/* worldcup */
.mod-worldcup{width:100%; min-height:100vh; padding-top:13%; background:url(../images/worldcup/bg.png) #0A1028 no-repeat bottom center / 100%; font-family:Arial, Helvetica, sans-serif; position:relative; word-break:keep-all;}
.mod-worldcup .worldcup-banner{width:100%; padding-bottom:52%; background:url(../images/worldcup/bg_top.png?1) no-repeat top center / 100%; position:absolute; top:0; z-index:0; pointer-events:none;}
.mod-worldcup .worldcup-content{position:relative; z-index:1;}
.mod-worldcup .worldcup-content > div:not(.worldcup-countdown){padding-bottom:50px;}
.mod-worldcup .worldcup-content .title img{height:50px;}
.mod-worldcup .worldcup-content .match{margin:0 -5px; display:flex; flex-wrap:wrap;}
.mod-worldcup .worldcup-content .match li{width:calc(50% - 10px); height:120px; margin:5px; color:#ededed; background:#262b3f; border-radius:10px; display:flex;}
.mod-worldcup .worldcup-content .match li > div{display:flex; flex-flow:column; align-items:center; justify-content:center;}
.mod-worldcup .worldcup-content .match .status{min-width:110px; margin:10px 0; font-size:12px; line-height:1; border-right:1px solid #090f25; text-align:center;}
.mod-worldcup .worldcup-content .match .status span{min-width:55px; max-width:75px; padding:3px; color:#f5f5f5; background:#8f9db5; border-radius:5px; text-transform:uppercase; display:inline-block;}
.mod-worldcup .worldcup-content .match .status > *:empty{display:none;}
.mod-worldcup .worldcup-content .match .status em{font-size:14px; line-height:1.2;}
.mod-worldcup .worldcup-content .match .detail{margin:5px 0 0 25px; font-size:14px; line-height:1; align-items:flex-start; justify-content:space-around; flex-grow:1;}
.mod-worldcup .worldcup-content .match .status b{font-size:18px; margin:15px auto; letter-spacing:2px;}
.mod-worldcup .worldcup-content .match .detail > span{color:#8f9db5;}
.mod-worldcup .worldcup-content .match .detail > div{display:flex; align-items:center;}
.mod-worldcup .worldcup-content .match .detail > div p{display:flex; align-items:center;max-width: 120px;}
.lang-cn .mod-worldcup .worldcup-content .match .detail > div p{overflow-wrap: anywhere;}
.mod-worldcup .worldcup-content .match .detail > div em{margin:0 15px;}
.mod-worldcup .worldcup-content .match .detail > div img{max-width:35px; margin-right:5px;}
.mod-worldcup .worldcup-content .match .link a{width:135px; line-height:50px; margin:0 20px; font-size:16px; color:#ededed; background:#383d55; border-radius:25px; transition:background .3s; text-align:center; display:block;}
.mod-worldcup .worldcup-content .match .link a:hover{background:#4594ff;}
.mod-worldcup .worldcup-content .match-live .status span{background:#ff3153;}
.mod-worldcup .worldcup-content .match-ended .status span{color:#8f9db5; background:#383d55;}
.mod-worldcup .worldcup-content .match-ended .link a{color:#8f9db5; pointer-events:none;}
.mod-worldcup .worldcup-promotions .promo{margin:0 -5px; display:flex; flex-wrap:wrap;}
.mod-worldcup .worldcup-promotions .promo li{width:calc(50% - 10px); margin:5px; border-radius:10px; display:flex; overflow:hidden;}
.mod-worldcup .worldcup-promotions .promo li img{max-width:100%;}
.mod-worldcup .worldcup-countdown{margin-bottom:25px; text-align:center;}
.mod-worldcup .worldcup-countdown > h1{font-size:64px; line-height:1.2; color:#FEFEFE; text-shadow:0 0 .5em #8C1530; font-weight:bold;}
.mod-worldcup .worldcup-countdown > div{width:auto; margin:0 auto; padding:15px; border-radius:15px; border:1px solid #0a1028; background:#363f4b; background:linear-gradient(0deg, #363f4b 0%, #343a43 100%); box-shadow:0px 0px .5em #0a1028; display:inline-block;}

/* scroll-tabs */
.scroll_tabs_container{height:50px; margin:5px auto 10px; padding:10px 10px 0px; background:#191f32; border-radius:5px; overflow:hidden; position:relative; text-align:left;}
.scroll_tabs_container div.scroll_tab_inner{height:40px; margin:0px; font-size:0px; position:absolute; overflow:hidden; white-space:nowrap; text-overflow:clip;}
.scroll_tabs_container div.scroll_tab_inner span, .scroll_tabs_container div.scroll_tab_inner li{padding-left:15px; padding-right:15px; margin-right:5px; border-radius:5px; cursor:pointer;}
.scroll_tabs_container div.scroll_tab_inner li{display:inline-block; zoom:1; user-select:none; list-style-type:none; transition:background .3s;}
.scroll_tabs_container div.scroll_tab_inner li a{line-height:40px; font-size:14px; color:#ededed;}
.scroll_tabs_container div.scroll_tab_inner li.scroll_tab_last{margin-right:0;}
.scroll_tabs_container div.scroll_tab_inner li.scroll_tab_over{background-color:#383d55;}
.scroll_tabs_container div.scroll_tab_inner li.tab_selected{background-color:#4594ff;}
.scroll_tabs_container div.scroll_tab_inner span.scroll_tab_left_finisher, .scroll_tabs_container div.scroll_tab_inner span.scroll_tab_right_finisher{padding:0px; width:0px;}
.scroll_tabs_container .scroll_tab_left_button, .scroll_tabs_container .scroll_tab_right_button{width:40px !important; height:40px; margin:10px 5px 10px 5px; border-radius:5px; background-color:#383d55; transition:all .3s; position:absolute; top:0; z-index:1; user-select:none; cursor:pointer;}
.scroll_tabs_container .scroll_tab_left_button{left:0;}
.scroll_tabs_container .scroll_tab_right_button{right:0;}
.scroll_tabs_container .scroll_tab_left_button::before, .scroll_tabs_container .scroll_tab_right_button::before{content:""; width:100%; height:100%; background:url(../images/worldcup/icon_arrow.png) no-repeat center / 8px; display:block;}
.scroll_tabs_container .scroll_tab_left_button::before{transform:scaleX(-1);}
.scroll_tabs_container .scroll_tab_left_button_over, .scroll_tabs_container .scroll_tab_right_button_over{background-color:#4594ff;}
.scroll_tabs_container .scroll_tab_left_button_disabled, .scroll_tabs_container .scroll_tab_right_button_disabled{opacity:.5; pointer-events:none;}
.scroll_tabs_content > div{display:none;}

/* empty tabs */
.match-empty{height:50px; margin:5px auto 10px; padding:10px 10px 0px; background:#191f32; border-radius:5px; overflow:hidden; position:relative; text-align:left;}
.match-empty p{line-height: 40px;font-size: 14px;color: #ededed;padding: 0px 15px;}

/* countdown */
.flip-clock{text-align:center; padding:3px; perspective:400px; background:#0f141B; box-shadow:inset 1px 2px 2px #000000,0px 0px .5em #0A1028;}
.flip-clock *,.flip-clock *:before,.flip-clock *:after{box-sizing:border-box;}
.flip-clock__piece{display:inline-block; position:relative; margin:3px;}
.flip-clock__piece:nth-child(1) .card__top,.flip-clock__piece:nth-child(1) .card__bottom,.flip-clock__piece:nth-child(1) .flip-clock__slot{background:#ededed!important; color:#1a2028!important;}
.flip-clock__piece:nth-child(2) .card__top,.flip-clock__piece:nth-child(2) .card__bottom,.flip-clock__piece:nth-child(2) .flip-clock__slot{background:#ededed!important; color:#1a2028!important;}
.flip-clock__slot{font-size:12px; color:#ededed; text-transform:uppercase; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); z-index:10;}
.card{display:block; position:relative; padding-bottom:0.9em; font-size:50px; line-height:1;}
.card__top,.card__bottom,.card__back::before,.card__back::after{display:block; height:0.9em; padding:0.3em; color:#ededed; background:#1a2028; backface-visiblity:hidden; transform-style:preserve-3d; width:auto; transform:translateZ(0);}
.card__bottom{color:#ededed; position:absolute; top:50%; left:0; pointer-events:none; overflow:hidden;}
.card__bottom::after{display:block; margin-top:-0.9em;}
.card__back::before,.card__bottom::after{content:attr(data-value);}
.card__back{position:absolute; top:0; height:100%; left:0%; pointer-events:none;}
.card__back::before{position:relative; z-index:-1; overflow:hidden;}
.card__gap{width:100%; height:2px; background:#0f141B; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:10;}
.flip .card__back::before{animation:flipTop 0.3s cubic-bezier(.37,.01,.94,.35); animation-fill-mode:both; transform-origin:center bottom;}
.flip .card__back .card__bottom{transform-origin:center top; animation-fill-mode:both; animation:flipBottom 0.6s cubic-bezier(.15,.45,.28,1);}
@keyframes flipTop{
    0%{transform:rotateX(0deg); z-index:2;}
    0%, 99%{opacity:0.99;}
    100%{transform:rotateX(-90deg); opacity:0;}
}
@keyframes flipBottom{
    0%, 50%{z-index:-1; transform:rotateX(90deg); opacity:0;}
    51%{opacity:0.99;}
    100%{opacity:0.99; transform:rotateX(0deg); z-index:5;}
}

@font-face {
    font-family: FZHZGBJW;
    src: local(FZHZGBJW),
        url(../fonts/FZHZGBJW.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

.mod-eurocup{background:#4585d0 url(../images/eurocup/euro_bg.png) no-repeat center top; background-size:contain;}
.mod-eurocup .worldcup-banner{top:auto; bottom:0; background:url(../images/eurocup/euro_backdrop.png) no-repeat center bottom; background-size:contain;}
.mod-eurocup .worldcup-countdown > div{box-shadow:0px 0px .5em #0a9468;}
.mod-eurocup .worldcup-countdown > h1{font-family:'FZHZGBJW'; margin-bottom:15px; text-shadow:none; font-weight:normal;}
.mod-eurocup.en .worldcup-countdown > h1{margin-top:-60px;}

.mod-regular{padding-bottom: 25px;background:unset;background-size: 100%;background-position: top;padding: 0;background-repeat: repeat;}
.mod-worldcup.mod-regular .worldcup-banner img{width:100%;padding:0;}
.mod-worldcup.mod-regular .worldcup-banner{position:relative;padding:0;}
.mod-worldcup.mod-regular .worldcup-content.isfixed{height: 540px;overflow-y: scroll;padding: 0 20px;scrollbar-width: thin;scrollbar-color: #4594ff #0d1b2a;margin-top:0;}
.isfixed::-webkit-scrollbar {width: 10px;}
.isfixed::-webkit-scrollbar-track {background: #0d1b2a;}
.isfixed::-webkit-scrollbar-thumb {background: #4594ff;border-radius: 10px;}
.isfixed::-webkit-scrollbar-thumb:hover {background: #4594ff;}
.mod-worldcup.mod-regular .worldcup-countdown{margin: 0 auto;position: relative;height: 500px;display: flex;flex-wrap:wrap;align-items: center;justify-content: center;}
.mod-worldcup.mod-regular .worldcup-countdown > h1{text-shadow: 0px 3px 12px #000000D5;}
.mod-worldcup.mod-regular .worldcup-banner .title{margin-top:5px;}
.mod-worldcup.mod-regular .worldcup-banner .title img{height:50px;width:auto;}
.mod-worldcup.mod-regular .worldcup-content .match li{background:none;padding:12px 18px;box-sizing:border-box;height:unset;}
.mod-worldcup.mod-regular .worldcup-content .match li .status{display: block;width: 100%;text-align: left;margin: 0;border:none;}
.mod-worldcup.mod-regular .worldcup-content .match li .status span{box-sizing: border-box;font-size: 14px;font-weight: bold;min-width: unset;max-width: unset;}
.mod-worldcup.mod-regular .worldcup-content .match li .status span.match-status{background: #393D53;border-radius: 8px;padding: 8px 18px;color: #8F9DB5;margin-right:10px;}
.mod-worldcup.mod-regular .worldcup-content .match li .status span.match-name{color: #8F9DB5;background:none;padding:0;}
.mod-worldcup.mod-regular .worldcup-content .match li .status em{margin-right:10px;}
.mod-worldcup.mod-regular .worldcup-content .match li .status .detail{margin: 0;margin-top: 10px;}
.mod-worldcup.mod-regular .worldcup-content .match li .status .detail > div{margin-bottom: 10px;}
.mod-worldcup.mod-regular .worldcup-content .match li .status .detail > div p{max-width: 100%;width: 100%;}
.mod-worldcup.mod-regular .worldcup-content .match li .status .detail > div p b{margin: unset;margin-left: 15px;text-align: center;}
.mod-worldcup.mod-regular .worldcup-content .match li .status .detail > div p img{max-height: 30px;margin: 0 15px;}
.mod-worldcup.mod-regular .worldcup-content .match li .link{justify-content:flex-start;}
.mod-worldcup.mod-regular .worldcup-content .match li .link a{margin:0;line-height:40px;}
.mod-worldcup.mod-regular .worldcup-content .match li.match-upcoming .link a, .mod-worldcup.mod-regular .worldcup-content .match li.match-live .link a{background: #4594ff;}
.mod-worldcup.mod-regular .worldcup-content .match li.match-upcoming .link a:hover, .mod-worldcup.mod-regular .worldcup-content .match li.match-live .link a:hover{background: #327de6;}
.mod-worldcup.mod-regular .scroll_tabs_container{margin:0px auto 10px;}

@media only screen and (max-width: 1024px) {
    .mod-regular .match > li{width: 100%!important;}
}