.test {
    border: 1px solid #ff0007;
}

.sidebar-container {
    margin: 0 !important;
    position: absolute;
    top: 16.875rem;
    right: 0.5rem;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}

.schedule-start {
    padding: 12px;
    background-color: #040a1b;
}

.fancybox-button {
    height: 65px !important;
    width: 65px !important;
}

.fancybox-slide {
    padding: 0 12px !important;
}

/*light-sweep*/
.light-sweep {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.lightSweep {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-filter: brightness(2);
    -webkit-mask-size: 300% 200%;
    -webkit-mask-image: -webkit-linear-gradient(-45deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 60%);
    -webkit-transition: -webkit-mask-position;
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-filter: brightness(2);
    -moz-mask-size: 300% 200%;
    -moz-mask-image: -webkit-linear-gradient(-45deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 60%);
    -moz-transition: -webkit-mask-position;
    -moz-animation-timing-function: linear;
    -moz-transform: translate3d(0, 0, 0);
    -o-filter: brightness(2);
    -o-mask-size: 300% 200%;
    -o-mask-image: -webkit-linear-gradient(-45deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 60%);
    -o-transition: -webkit-mask-position;
    -o-animation-timing-function: linear;
    -o-transform: translate3d(0, 0, 0);
    filter: brightness(2);
    mask-size: 300% 200%;
    mask-image: -webkit-linear-gradient(-45deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 60%);
    transition: -webkit-mask-position;
    animation-timing-function: linear;
    transform: translate3d(0, 0, 0);
    transition-duration: 3s;
    animation: move 3s ease-out infinite;
}

@keyframes move {
    from {
        -webkit-mask-position: 150% 0px;
        -moz-mask-position: 150% 0px;
        -o-mask-position: 150% 0px;
        mask-position: 150% 0px;
    }

    to {
        -webkit-mask-position: 0% 0px;
        -moz-mask-position: 0% 0px;
        -o-mask-position: 0% 0px;
        mask-position: 0% 0px;
    }
}

/*light-sweep01*/
.light-sweep01 {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.gototop {
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: center;
    vertical-align: middle;
    z-index: 2;
    overflow: hidden;

}

.img-filter-yg {
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}

.yg-pd {
    padding: 60px 0;
}

.yg-pd01 {
    padding: 80px 0 70px 0;
}

.yg-btn-detail {
    display: block;
    width: 300px;
    margin: 0 auto;
    color: #322623;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #cf6d19;
    box-shadow: 0px 5px 0px 0px #aa520b;
    border-radius: 40px;
    /* text-shadow: 0 1px 1px #8f5c14; */
    background: linear-gradient(to bottom, #f1af53, #c75b08);
    text-decoration: none;
    background: url(../images/bg-footer.png) repeat center bottom;
}

.yg-btn-detail:hover {
    display: block;
    width: 300px;
    margin: 0 auto;
    color: #463222;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #cf6d19;
    box-shadow: 0px 5px 0px 0px #aa520b;
    border-radius: 40px;
    /* text-shadow: 0 1px 1px #8f5c14; */
    background: linear-gradient(to bottom, #f1af53, #c75b08);
    text-decoration: none;
    background: url(../images/bg-footer.png) repeat center bottom;

}

.yg-btn-detail a {
    color: #ffffff !important;
}

.hyg-btn-detail:hover {
    background-color: rgb(123, 0, 255);
    color: #ffffff !important;
    text-decoration: none;
    text-align: center;
}

.yg-btn-detail:hover::after {
    bottom: -5px;
    left: -5px;
    right: -5px;
    top: -5px;
    color: #ffffff !important;
}


.yg-btn-join {
    display: block;
    width: 300px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #439cd4;
    box-shadow: 0px 5px 0px 0px #1d6797;
    border-radius: 40px;
    text-shadow: 0 1px 1px #008ac5;
    background: linear-gradient(to bottom, #67b5d8, #1198d5);
}

.yg-btn-join:hover {
    display: block;
    width: 300px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #439cd4;
    box-shadow: 0px 5px 0px 0px #1d6797;
    border-radius: 40px;
    text-shadow: 0 1px 1px #008ac5;
    background: linear-gradient(to bottom, #67b5d8, #1198d5);
}

.yg-btn-join:active,
.yg-btn-detail:active {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0px 0px 0px 0px;
}


.yg-btn-join a {
    color: #ffffff !important;
}

.hyg-btn-join:hover {
    background-color: rgb(123, 0, 255);
    color: #ffffff !important;
    text-decoration: none;
    text-align: center;
}

.yg-btn-join:hover::after {
    bottom: -5px;
    left: -5px;
    right: -5px;
    top: -5px;
    color: #ffffff !important;
}

/***********************************************/
/************ floating scroll  *****************/
/***********************************************/
.line-section {
    background-color: #000d2e;
}

.float-section-btn,
.float-section-btn:hover {
    background-color: rgba(255, 255, 255, 0) !important;
    font-size: 18px;
    left: -70px;
    padding: 2px 18px;
    border: 0;
    display: flex;
    transition: all 200ms ease;
}

.float-section-btn .s1 {
    color: #ffffff;
    margin: 10px 0px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.float-section-btn.active .s1,
.float-section-btn:hover .s1 {
    color: #ffac32;
    /* text-shadow: 0px 2px 2px #1e1515; */
}

.float-section-btn .s2 {
    color: white;
    text-shadow: 0 0 4px black;
    opacity: 0;
    transition: all 200ms ease;
    display: flex;
    align-self: center;
    text-transform: uppercase;
    font-size: 16px;
    pointer-events: none;
}

.float-section-btn:hover .s2 {
    color: white;
    opacity: 1;
    display: flex;
    align-self: center;
}

.float-section-ps {
    left: 185px;
    top: calc(50% - 0px);
    transform: translate(-50%, -50%);
    z-index: 9;
}

/************************/
/********* Main *********/
/************************/
/*.bg-main {
    background-color: #2d2122;
}*/

.main-logo {
    padding-top: 40px;
    z-index: 2;
    position: relative;
}

.main-logo-register {
    padding-bottom: 80px;
}

.text-main {
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

header {
    position: relative;
    background-color: black;
    height: 985px;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

header video {
    position: absolute;
    top: 45%;
    left: 50%;
    min-width: 100%;
    /* min-height: 100%; */
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

header .container {
    position: relative;
    z-index: 2;
}

@media (pointer: coarse) and (hover: none) {
    /* header {
        background: url(../images/yulgang-main.jpg) black no-repeat center center scroll;
        background-size: cover;
    } */

    /* 
	header video {
		display: none;
	} */
}

/******************************/
/********* Highlights *********/
/******************************/
.bg-highlights {
    background-color: #182a46;
    background: url(../images/yulgang-bg-highlights.jpg) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
}


.name-highlights {
    color: #ffffff;
    font-size: 24px;
    line-height: 26px;
    font-weight: 400;
    text-align: center;
    text-shadow: 0 2px 2px #14284e;
}

.block-highlights {
    background-color: #45a9dc;
    padding: 8px 15px;
    text-align: center;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffffff;
    text-shadow: 0 1px 1px #008ac5;
    font-size: 20px;
}

.btnplay-highlights {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;


}

.block-highlights:hover {
    text-shadow: 0 1px 1px #008ac5;
    color: #ffffff;
}

.filter-highlights {
    filter: contrast(100%);
    background-color: rgb(0 0 0 / 0.25);
}

.filter-highlights:hover {
    filter: contrast(180%);
    background-color: rgb(0 0 0 / 0.50);
}

/***************************/
/********** Guild **********/
/***************************/
/*.bg-guild {
    background-color: #201614;
    background: url(../images/yulgang-bg-guild.jpg) no-repeat center top;
     background-size: cover; 
     border-top: 2px solid #3d2926; 
}*/

.bg-guild {
    padding: 50px 0;
}

/*********************************/
/********** Competition **********/
/*********************************/
.bg-competition {
    background: url(../images/yulgang-bg-content.jpg) center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-competition::before {
    /* background: #B73F40; */
    /* background: linear-gradient(0deg, rgba(183, 63, 64, 0) 0%, rgb(0 0 0 / 50%) 50%); */
    top: 0;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    content: '';
    pointer-events: none;
    background-size: contain;
}

.font-gradient {
    /* background: linear-gradient(180deg, #ffeb81 26.5%, #ffa94c 86%); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #92cdff;
    font-weight: 400;
}

.text-hit {
    color: #ffffff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    font-weight: 200;
}

/****************************/
/********* Schedule *********/
/****************************/
.bg-schedule {
    /* background-color: #3b2b2b;
    background: url(../images/yulgang-bg-schedule.jpg) no-repeat center top;
     background-size: cover; 
    background-attachment: fixed; 
     border-top: 2px solid #312424;*/
}

.schedule-block {
    padding-right: 20px;
    padding-left: 20px;
    padding: 20px 30px;
    border: solid 1px #17140f;
    background-color: rgb(23 20 15);
    -webkit-transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
    transition: all 0.7s cubic-bezier(0.11, 0.6, 0.24, 0.89);
}

.title-schedule {
    display: inline-block;
    font-size: 95px;
    line-height: 95px;
    font-weight: 600;
    color: #bda052;
    text-shadow: 0 5px 0 rgb(113 88 29);
}

.detail-title-schedule {
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 0 5px #bda052;
}

.text-month-schedule {
    font-size: 30px;
    color: #ffac31;
    font-weight: 500;
    padding-left: 11px;
}

txt-fb {
    font-size: 42px;
    font-weight: 400;
}


.bg-live {
    color: #ffffff;
    font-size: clamp(2rem, -0.0327rem + 3.2215vw, 2.5rem);
    font-weight: 500;
    padding: 15px 0;
    line-height: 1.15;
    /* background: url(../images/yulgang-bg-live.jpg) repeat center; */
    background-color: #4267B2;
    text-shadow: 0 2px 2px #225a9c;
    border-bottom: 1px solid #3161c3;
    border-top: 1px solid #3161c3;
    margin: 0 auto;

}

.btn_facebook {
    border-radius: 5px;
    float: right;
    position: relative;
    /* height: 50px; */
    padding: 1px 34px 0 24px;
    color: #4267b2;
    font-size: 28px;
    line-height: 50px;
    letter-spacing: .05em;
    text-align: center;
    background-color: #ffffff;
    width: 100%;
    text-shadow: none;
    font-weight: 600;
    /* border: 1px solid #4267b2; */
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
    /* box-shadow: 0px 5px 0px 0px #ff6d00; */
    text-decoration: none;
}

.btn_facebook:hover {
    border-radius: 5px;
    float: right;
    position: relative;
    /* height: 50px; */
    padding: 1px 34px 0 24px;
    color: #4267b2;
    font-size: 28px;
    line-height: 50px;
    letter-spacing: .05em;
    text-align: center;
    background-color: #ffffff;
    width: 100%;
    text-shadow: none;
    font-weight: 600;
    /* border: 1px solid #4267b2; */
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, #ffffff 0%, #ffffff 100%);
    /* box-shadow: 0px 5px 0px 0px #ff6d00; */
    text-decoration: none;
}

/*.btn_facebook:hover:before {
    left: -4px;
    right: -4px;
    top: -4px;
    bottom: -4px;
}*/

.btn_facebook:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 9px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/yulgang-arrow.png) 0 0 no-repeat;
    background-size: 100% 100%;
}

/*.btn_facebook:hover {
	color: #233a6b;
}*/

.slick-Nav h3 {
    text-align: center;
}

.slick-Content {
    display: none;
}

/*.table-bg-schedule {
    background-color: #592b2d !important;
}*/
.b-gift01 {
    /* background-color: #fff0d4; */
    padding: 24px 0;
    /* background: url(../images/item-pattern2.jpg) repeat center bottom; */
    /* border: 24px solid #ffe2a5; */
    border-image: url(../images/frame-in2.png) 34 round;
    border: 1px solid #6a231d;
    color: #ffffff;
    background-color: #401317;
    box-shadow: inset 1px 1px 24px #591d18;
}

.b-gift02 {
    /* background-color: #fff0d4; */
    padding: 24px 0;
    /* background: url(../images/item-pattern2.jpg) repeat center bottom; */
    /* border: 24px solid #ffe2a5; */
    border-image: url(../images/frame-in2.png) 34 round;
    border: 1px solid #193158;
    color: #ffffff;
    background-color: #070f2a;
    box-shadow: inset 1px 1px 24px #193158;
}

.name-gift01 {
    background-color: #f1af54;
    color: #ffffff;
    padding: 4px 12px;
    font-weight: 400;
    height: 58px;
    /* line-height: 1.25; */
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.125rem, 0.932rem + 0.5369vw, 1.25rem);
    line-height: 1;
    /* background: linear-gradient(to bottom, #f1af53, #c65a05); */
    /* background: url(../images/bg-footer.png) repeat center bottom; */
    /* border-bottom: 2px solid #193158; */
    background-color: #315daa;
    /* border-top: 2px solid #193158; */
}

.name-gift02 {
    background-color: #f1af54;
    color: #ffffff;
    padding: 4px 12px;
    font-weight: 400;
    height: 58px;
    /* line-height: 1.25; */
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.125rem, 0.932rem + 0.5369vw, 1.25rem);
    line-height: 1;
    /* background: linear-gradient(to bottom, #f1af53, #c65a05); */
    /* background: url(../images/bg-footer.png) repeat center bottom; */
    /* border-bottom: 2px solid #193158; */
    background-color: #ac3a30;
    /* border-top: 2px solid #193158; */
}

.table {
    width: 100%;
    margin-bottom: 0;
    color: #212529;
    margin-top: 15px;
}

.table thead th {
    vertical-align: bottom;
    /* border-bottom: 2px solid #193158; */
    background-color: #315daa;
    /* border-top: 2px solid #193158; */
    color: #ffffff;
    width: 25%;
    font-size: 20px;
    font-weight: 500;
    /* background: linear-gradient(to bottom, #f1af53, #c65a05); */
    /* background: url(../images/bg-footer.png) repeat center bottom; */
}

.table td,
.table th {
    padding: .75rem;
    vertical-align: top;
    border: 1px solid #193158;
    color: #ffffff;
    background-color: #070f2a;
}

.schedule-warp {
    background-color: #070f2a;
    padding: 25px;
    border: 5px solid transparent;
    border-image: linear-gradient(to right, #0e95fc, #d23537);
    border-image-slice: 1;
    background: url(../images/pattern-content.png) repeat center top;
}

.schedule {
    background-color: #fff;
}


.schedule {
    padding: 100px 0px;
    background-color: #ecedf0;
    font-family: 'Titillium Web';
}

.schedule-tag {
    color: #ffffff;
    background-color: #315daa;
    padding: 6px;
    text-align: center;
    font-weight: 400;
    line-height: 1;
    /* background: linear-gradient(to bottom, #bf3535, #892020); */
    /* border: 1px solid #f1af53; */
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.schedule-header span {
    display: inline-block;
    margin-right: 25px;
}

.schedule-header {
    margin-bottom: 80px;
}

.schedule-card {
    position: relative;
    margin-bottom: 0.7em;
}

.f-time {
    font-size: 0.85rem;
}

t-notable {
    color: #1495fb;
    font-weight: 400;
}

.insidebox {
    box-shadow: 0 0px 5px rgba(0, 0, 0, .07);
    width: 100% 1264px;
    height: auto;
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -o-flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 10px;
    color: #ffffff;
    transition: all 0.2s ease-in;
    font-weight: 400;
    border: 2px solid #1a3158;
    background-color: #040a1b !important;
    font-size: 18px;
}

.day-one {
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 28px;
    color: #bda052;
}

/***************************/
/********** Rules **********/
/***************************/
/*.bg-rules {
    background-color: #392b2a;
    background: url(../images/yulgang-bg-rules.jpg) no-repeat center top;
    background-size: auto;
    border-top: 2px solid #2f1f21;
}*/
.bs-table {
    box-shadow: inset 1px 1px 9px #193158 !important;
}

.title-rules {
    display: inline-block;
    font-size: 95px;
    line-height: 95px;
    font-weight: 600;
    color: #bda052;
    text-shadow: 0 5px 0 rgb(113 88 29);
}

.box-rules {
    background-color: #2d271b;
    padding: 28px;
}

.card-header {
    padding: 10px 15px 2px 20px !important;
}


.accordion-rules-detail {
    background-color: #1a1710;
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 400;
}

.accordion-rules-title {
    background-color: #F1AF53;
    cursor: pointer;
    /* background: linear-gradient(to bottom, #f1af53, #d98a1c); */
    background: linear-gradient(to bottom, #f1af53, #c65a05);
    background: url(../images/bg-footer.png) repeat center bottom;
    background: #B73F40;
    background: linear-gradient(-90deg, #d23537 0%, rgba(19, 149, 251, 1) 100%);
}


.accordion-rules-box {
    color: #ffffff !important;
    font-weight: 600;
    padding: 0;
    text-decoration: none !important;
}

.accordion-rules-title:hover {
    background-color: #f1af53;

}

.accordion-rules {
    background-color: #eba348;
    border-radius: 0;
    margin-bottom: 1rem;
    border: none;
}

.card-header:first-child {
    border-radius: 0;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    color: #ffffff;
    font-weight: 300;
    font-size: 18px;
    background-color: #070f2a;
    background: url(../images/pattern-content.png) repeat center top;
    padding: 25px;
    border: 3px solid transparent;
    border-image: linear-gradient(to right, #0e95fc, #d23537);
    border-image-slice: 1;
}

.accordion-rules-toppic {
    font-size: 1.75rem;
    /* text-shadow: 0 1px 1px #ffcf82; */
    color: #ffffff;
}

rules-note {
    color: #45b7fd;
    font-weight: 300;
}

ol {
    list-style: none;
    counter-reset: mycounter;
    padding: 0;
}

ol li {
    position: relative;
    margin-left: 30px;
    padding: 0px 7px;
    margin-bottom: 8px;
}


ol li:before {
    content: counter(mycounter);
    counter-increment: mycounter;
    position: absolute;
    top: 0;
    left: -30px;
    width: 25px;
    height: 26px;
    line-height: 25px;
    color: #fff2e0;
    text-align: center;
    background-image: url(../images/yulgang-six-square.png);
    background-position: center;
    font-weight: 500;
    background-repeat: no-repeat;
    font-size: 15px;
}

/**********************/
/******** Tab *********/
/**********************/

.project-tab #tabs {
    background: #007b5e;
    color: #eee;
}

.project-tab #tabs h6.section-title {
    color: #eee;
}

.project-tab #tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #fff1dd;
    background-color: #72a4d6;
    font-size: 32px;
    font-weight: 400;
    background-color: #554826;
    cursor: pointer;
    /* background: linear-gradient(to bottom, #ba9c4c, #6b531c); */
    text-shadow: 0 1px 1px #0073d1;
}

.nav-tabs .nav-link {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-tabs {
    border-bottom: 1px solid #564d36;
}

.project-tab .nav-link {
    color: #7aa3d4;
    font-size: 32px;
    font-weight: 400;
    background-color: #17233c;
    border: 1px solid #72a4d6;
}


.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #67b5d8;
    border: 1px solid #72a4d6;
    background: linear-gradient(to bottom, #67b5d8, #1198d5);
}

.project-tab .nav-link:hover {
    border: none;
}

.project-tab thead {
    background: #f3f3f3;
    color: #333;
}

.project-tab a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border: 1px solid #67a5d8;
}

/***************************/
/********** Award **********/
/***************************/

.bg-award {
    background-color: #201614;
    background: url(../images/yulgang-bg-content.jpg) repeat-y center top;
    padding: 50px 0;
    background-size: cover;
    background-attachment: fixed;
}

.bg-pattern-award {
    background-color: #181818;
    background: url(../images/yulgang-pattern-award.png);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
}

.yg-pd-award {
    padding: 0 0 40px 0;
}

.note-award {
    line-height: 1.35;
    font-size: 20px;
    color: #45b7fd;
    text-align: center;
    font-weight: 400;
    text-shadow: 0 1px 1px #142235;
}

txt-red {
    display: block;
    color: #ffffff;
}

/********************************/
/********** Prediction **********/
/********************************/
.bg-prediction {
    background-color: #332a1b;
    background: url(../images/yulgang-bg-prediction.jpg) no-repeat center top;
    background-size: cover;
}

.time-prediction {
    text-align: center;
    font-size: 32px;
    padding: 8px 15px;
    color: #ffffff;
    box-sizing: border-box;
    background-color: #59a7da;
    font-weight: 500;
    /* background: linear-gradient(to bottom, #59a7da, #67a5d8); */
    line-height: 1.25;
    /* text-shadow: 0 0 5px #1e3565; */
    text-shadow: 0 1px 1px #008ac5;
    background: linear-gradient(to bottom, #67b5d8, #1198d5);
}

.box-prediction {
    background-color: rgb(12 25 51 / 80%);
    padding: 0 0 35px 0;
    border: 1px solid rgb(64 152 211);
    background: url(../images/yulgang-pattren.png) repeat;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
}


.txt-prediction {
    color: #ffffff;
    font-size: 32px;
    font-weight: 500;
    background-color: #67a5d8;
    padding: 5px;
    text-align: center;
    text-shadow: 0 1px 1px #0073d1;
    background: linear-gradient(to bottom, #67b5d8, #1198d5);
}

.detail-prediction {
    background-color: #172949;
    padding: 25px;
    border: 1px solid rgb(67 154 211);
}

.name-prediction {
    color: #45b7fd;
    font-size: 20px;
    text-align: left;
}

.text-name-prediction {
    color: #ffffff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.text-gift-prediction {
    font-size: 36px;
    font-weight: 500;
    text-shadow: 0 0 5px #0f1b2d;
    margin-bottom: 10px;
    padding-top: 15px;
    text-align: center;
    color: #00b9ff;

}

.detail-gift-prediction {
    color: #c8e4ff;
    font-size: 16px;
    font-weight: 300;
}

.size-lucky {
    width: 70px;
    height: 70px;
}



.border-img {
    padding: 8px;
    background-color: rgb(45 17 17);
    border: 3px solid rgb(99 45 46);
}

.btn-detail a {
    color: #fff0d4;
    font-size: clamp(1.125rem, 0.7391rem + 1.0738vw, 1.375rem);
}

.btn-detail a:hover {
    color: #ffdfa2;
}

/**********************************************************/
/******************** Media Query  ************************/
/**********************************************************/
@media (min-width:1921px) {
    /*.bg-live {
        width: 1920px;
        margin: 0 auto;
    }*/

    header {
        width: 1920px;
        margin: 0 auto;
    }
}

@media (max-width:1919px) {}

@media (min-width: 1200px) {}

@media (min-width: 992px)and (max-width:1199px) {
    txt-fb {
        font-size: 30px;
        font-weight: 400;
    }

    .note-award {
        font-size: 18px;
    }

    .detail-prediction {
        padding: 15px;
    }

    .text-name-prediction {
        font-size: 19px;
    }

    .schedule-tag,
    .schedule-start {
        height: 59px;
    }

    .insidebox {
        padding: 10px 8px;
    }

    .bg-competition::before {
        /* background: #B73F40;
        background: linear-gradient(0deg, rgba(183, 63, 64, 0) 0%, rgb(0 0 0 / 100%) 50%); */
        top: 0;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        content: '';
        pointer-events: none;
        background-size: contain;
    }
}

@media (min-width: 768px)and (max-width:991px) {
    .bg-competition::before {
        /* background: #B73F40;
        background: linear-gradient(0deg, rgba(183, 63, 64, 0) 0%, rgb(0 0 0 / 100%) 50%); */
        top: 0;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        content: '';
        pointer-events: none;
        background-size: contain;
    }

    .yg-pd {
        padding: 60px 0;
    }

    .note-award {
        font-size: 16px;
    }

    .insidebox {
        padding: 10px 8px;
    }


    txt-fb {
        font-size: 30px;
    }

    .box-prediction {
        padding: 0 0 15px 0;
    }

    .detail-prediction {
        padding: 15px;
    }

    .text-name-prediction {
        font-size: 19px;
    }

    .bg-rules {
        background-size: cover;
    }
}

@media (min-width: 576px)and (max-width:767px) {
    .bg-competition::before {
        /* background: #B73F40;
        background: linear-gradient(0deg, rgba(183, 63, 64, 0) 0%, rgb(0 0 0 / 100%) 50%); */
        top: 0;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        content: '';
        pointer-events: none;
        background-size: contain;
    }

    .box-prediction {
        padding: 0 0 25px 0;
    }

    .schedule-start {
        text-align: center;
        background-color: #060a1a;
        padding: 8px 8px;
        height: auto;
        border: 1px solid #193158;
    }

    .yg-pd {
        padding: 60px 0;
    }

    .yg-pd01 {
        padding: 60px 0 50px 0;
    }

    .note-award {
        font-size: 16px;
    }



    txt-fb {
        font-size: 30px;
    }

    .accordion-rules-toppic {
        font-size: 1.65rem;

    }

    .project-tab #tabs .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        font-size: 24px;

    }

    .project-tab .nav-link {
        font-size: 24px;

    }

    .insidebox {
        font-size: 17px;
    }

    .bg-rules {
        background-size: cover;
    }

    .insidebox {
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        flex-direction: column;
    }

}

@media (max-width: 575px) {
    /*.bg-guild {
        background-attachment: fixed;
    }*/

    .bg-competition::before {
        /* background: #B73F40;
        background: linear-gradient(0deg, rgba(183, 63, 64, 0) 0%, rgb(0 0 0 / 100%) 50%); */
        top: 0;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        content: '';
        pointer-events: none;
        background-size: contain;
    }

    .insidebox {
        box-shadow: 0 0px 5px rgba(0, 0, 0, .07);
        width: 100%;
        height: auto;
        display: flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -webkit-flex;
        display: -o-flex;
        -webkit-align-items: center;
        align-items: center;
        /* padding: 10px 20px; */
        color: #5a1d19;
        transition: all 0.2s ease-in;
        font-weight: 400;
        border: 1px solid #483b3a;
        background-color: #fff0d4 !important;
        font-size: 18px;
        flex-direction: column;
        border: 2px solid #1a3158;
        background-color: #040a1b !important;
    }

    .schedule-start {
        text-align: center;
        background-color: #040a1b;
        padding: 4px 8px;
        height: auto;
        color: #ffffff;
        border: 1px solid #193158;
    }

    .bg-rules {
        background-size: cover;
    }


    .accordion-rules-toppic {
        font-size: 1.65rem;

    }

    .box-prediction {
        padding: 0 0 25px 0;
    }

    .time-prediction {
        font-size: 28px;
        line-height: 1.25;
    }



    txt-fb {
        font-size: 32px;
    }

    .yg-pd {
        padding: 40px 15px;
    }

    .yg-pd01 {
        padding: 40px 0 30px 0;
    }

    .note-award {
        font-size: 15px;
    }

    .txt-prediction {
        font-size: 28px;
    }

    .text-name-prediction {
        font-size: 18px;
        line-height: 1;
    }

    .name-prediction {
        font-size: 16px;
    }

    .detail-prediction {
        padding: 15px;
    }

    .card-body {
        font-size: 17px;
    }

    .project-tab #tabs .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        font-size: 24px;

    }

    .project-tab .nav-link {
        font-size: 24px;

    }

    .insidebox {
        font-size: 17px;
    }

}

@media (max-width: 375px) {
    .card-body {
        font-size: 17px;
    }

    .time-prediction {
        font-size: 24px;
    }

    .btn_facebook {
        height: 40px;
        font-size: 26px;
        line-height: 35px;

    }



    txt-fb {
        font-size: 26px;
    }

    .yg-btn-join,
    .yg-btn-join:hover,
    .yg-btn-detail,
    .yg-btn-detail:hover,
    .btn_facebook,
    .btn_facebook:hover {
        width: 100%;
    }
}

.light-sweep {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.lightSweep {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
    overflow: hidden;
    -webkit-filter: brightness(2);
    -webkit-mask-size: 300% 200%;
    -webkit-mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    -webkit-transition: -webkit-mask-position;
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-filter: brightness(2);
    -moz-mask-size: 300% 200%;
    -moz-mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    -moz-transition: -webkit-mask-position;
    -moz-animation-timing-function: linear;
    -moz-transform: translate3d(0, 0, 0);
    -o-filter: brightness(2);
    -o-mask-size: 300% 200%;
    -o-mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    -o-transition: -webkit-mask-position;
    -o-animation-timing-function: linear;
    -o-transform: translate3d(0, 0, 0);
    filter: brightness(2);
    mask-size: 300% 200%;
    mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    transition: -webkit-mask-position;
    animation-timing-function: linear;
    transform: translate3d(0, 0, 0);
    transition-duration: 3s;
    animation: move 2s ease-out infinite;
}

@keyframes move {
    0% {
        -webkit-mask-position: 150% 0px;
        -moz-mask-position: 150% 0px;
        -o-mask-position: 150% 0px;
        mask-position: 150% 0px;
    }

    100% {
        -webkit-mask-position: 0% 0px;
        -moz-mask-position: 0% 0px;
        -o-mask-position: 0% 0px;
        mask-position: 0% 0px;
    }
}

.floating {
    bottom: 135px;
    cursor: pointer;
    position: fixed;
    right: 12px;
    z-index: 9;
   
}

.img-floating {
    -webkit-animation: float-move 1s infinite alternate;
    animation: float-move 1s infinite alternate;
}

@keyframes float-move {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

.spin {
    position: absolute;
    top: 0;
    right: -28px;
    animation: spin 2.5s linear infinite;
    z-index: -1;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}