/*All*/
body{ background:#101a20;}

.btn{ background: none;
    border: 0;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px #434749;
    color: #ffffff;
    position: relative;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}

.btn::before, .btn::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.draw {
    transition: color 0.25s;
}

.draw {
    transition: color 0.25s;
}
.draw::before, .draw::after {
    border: 1px solid transparent;
    width: 0;
    height: 0;
}
.draw::before {
    top: 0;
    left: 0;
}
.draw::after {
    bottom: 0;
    right: 0;
}
.draw:hover {
    color: #ffffff;
}
.draw:hover::before, .draw:hover::after {
    width: 100%;
    height: 100%;
}
.draw:hover::before {
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.videoWrapper {

    /* 16:9 */
    /*padding-top: 25px;*/

}
.videoWrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*Desktop*/
body.desktop{ min-width: 1100px;}

.desktop .top_section{ background:url("../images/2020/inner_bg.jpg"); }
.desktop .top_section .top_super_banner{ padding-top: 10px; border-bottom: 0px solid #eaeaea; }
.desktop .largeLeaderBoard{ margin-top: 0; margin-bottom: 0; margin-top: 20px; padding-top: 0; z-index: 2; position: relative; width: 728px; margin: auto; z-index: 2; position: relative; padding: 30px 0; }
.desktop .superBanner { width: 728px; margin: auto; padding: 30px 0; }
/* .superBanner{ text-align: center; }
.desktop .largeLeaderBoard{ margin-top: 25px;  margin-bottom: 45px; text-align: center; }
.desktop .superBanner:first-child{margin-top: 25px;  margin-bottom: 45px;}
.desktop .superBanner {
    width: 728px;
    margin: auto;
    margin-top: 60px;  margin-bottom: 50px;
} */


#videoAd, #placeholder{ z-index: 1; width: 100%; height: 100%; }


.desktop .container{ width: 1060px; margin: auto;}
.desktop #player{ width: 640px;	height: 360px;}
.desktop .leftContent, .desktop .rightContent{ display: inline-block; vertical-align:top;}
.desktop .leftContent{ width: 700px; margin-right: 50px; }
.desktop .leftContent .list{ margin-bottom: 50px; }
.desktop .rightContent{ width: 300px;}
.dekstop a.logo{ display: none; }
/* .dekstop .keyart a.logo{ display: block;}
.desktop .keyart{ width:1060px ; height:178px ; background:url("../images/desktop/KeyartInner_d.png");}
.desktop .m_keyart{ display: none;} */
.desktop .m-keyart{ display: none; }
.desktop .keyart{ display: block; margin-bottom: -5px; }
.desktop .keyart .keyart-container{ width: 1060px; margin: auto; }
.desktop .keyart .keyart-container:before{ content: ""; background: url(../images/2020/desktop/KeyartInner_d.png) no-repeat; width: 1060px; height: 220px; position: relative; display: block; background-size: 100%; }
.desktop .main{ background: #101a20; padding-top: 22px; /*padding-bottom: 100px;*/}
.desktop .btn_live, .desktop .btn_back{   background: url("../images/2020/IconBack.svg") no-repeat left center; background-size: 15%;}
.desktop .title h3, .desktop .btn{vertical-align: middle;}
.desktop .btn{ display:inline-block; width: 192px; /*height: 40px;*/ padding: 10px 0;}
.desktop .award_list{ margin: 60px 30px 0px 30px;}
.desktop .award_list li{ border-bottom: 1px solid #4c4c4c; padding-bottom: 20px; margin-bottom: 20px;}
.desktop .award_list li:last-child{ border-bottom: 0;padding-bottom: 0; margin-bottom: 0; }
.desktop .awardInfo{ margin-bottom: 25px;}
.desktop .awardVideo{ text-align: right;}
.desktop .btn{ margin-right: 15px;}
.desktop .btn:last-child{ margin-right: 0;}
.desktop .awardVideo .btn{ color: #fcfcfc; font-weight: 300;}
.desktop .largeRect{ margin-bottom: 10px;}
.desktop .largeRect:last-child{ margin-bottom: 0;}
.desktop .control{ border-top: 1px solid #4c4c4c; padding-top: 30px; text-align: center;}
.desktop .control.no-control{
    padding-top: 0px !important;
}
/* .desktop .footer{ border-top: 1px solid #f0ff80; padding-top:20px; padding-bottom: 30px;}
.desktop .footer_share{ float: right; text-align: right;}
.desktop .footer_share ul li {text-align: right; display: inline-block; vertical-align: top; margin-right: 10px; margin-top: 5px}
.desktop .footer_share ul li:last-child{margin-right: 0;} */
.desktop .whatsappButton img { width: 28px; height: 28px;}
.desktop .openbox {
    display: block;
    width: 125px;
    height: 55px;
    text-indent: -9999px;
    margin-bottom: 40px;
}

.desktop .largeRect{ margin-bottom: 10px;}
.desktop .largeRect:last-child{ margin-bottom: 0;}
.desktop .openbox{ width: 165px;}
/* .desktop .footer_left{ float: left;}
.desktop .footer_right{ float: right; text-align: right;} */
/* .desktop .footer:after{ content: ""; clear: both;} */
.desktop .share, .desktop .like{ color: #6b6b6b; font-weight: 300; font-size: 14px;}
.desktop .share{ float: right; margin-bottom: 20px; text-align:left; }
.desktop .share ul{ text-align: right; vertical-align: middle; margin-top: 2px;  }
.desktop .share li{display: inline-block; vertical-align: top;}
.desktop .video_share{ width:640px; color: #ffffff; font-weight: 300; margin: auto; margin-bottom: 20px;}
.desktop .video_share img{ display: inline-block; vertical-align: middle ; width: 32px}
.desktop .viedo_whatsapp{ margin-right: 8px; margin-left: 8px;}
.desktop .title { margin-bottom: 25px;}
.desktop .youtube{ width: 640px; margin: auto; margin-bottom: 20px;  position: relative;  }
.desktop .info{ width: 640px; margin: auto;}
.desktop .leftContent .container{ width: 640px; margin: auto; }
.desktop .btn_next, .desktop .btn_previous{ color: #fcfcfc; font-size: 17px;}
/* .desktop .footer .copyright{ clear:both; } */

.desktop .footer{ border-top: 1px solid #f65b3f; padding-top:22px; }
.desktop .footer_right{ float: right; text-align: right;}
.desktop .footer_share{ float:right; text-align:left; }
.desktop .footer_share p{ margin-bottom: 8px; font-size: 14px; line-height: 14px; font-weight: 400; }
.desktop .footer_share ul{ text-align: right;}
.desktop .footer_share ul li {text-align: right; display: inline-block; vertical-align: top; margin-right: 10px; }
.desktop .clear.box{ padding: 5px 0; }
.desktop .whatsappButton img,
.desktop .facebookButton img,
.desktop .instagramButton img
{
    width: 28px; height: 28px;
}
.desktop .openbox {
    display: block;
    width: 166px;
    height: 46px;
}
.desktop .largeRect{ margin-bottom: 10px;}
.desktop .largeRect:last-child{ margin-bottom: 0;}
.desktop .footer_left{ width: 166px; float: left;}
.desktop .m-footer{
    display: none;
}

/*Mobile*/
.mobile{ margin: 0px auto; }

.mobile .keyart{ display: none; }
.mobile .m-keyart{ display: block; }
.mobile .m-keyart .m-keyart-container{ position: relative; width: 100%; margin: auto; }
.mobile .m-keyart .m-keyart-container:before{ content: ""; background: url(../images/2020/mobile/KeyartInner_m.png) no-repeat; width: 100%; height: 100vw; position: relative; display: block; background-size: 100%; }

.mobile .btn{ padding: 10px 0; overflow: hidden;}
.mobile {/*max-width: 960px;*/}
.mobile .largeLeaderBoard{ width:320px; margin: auto; background:#101a20; padding-top:17px;}
.mobile .top_banner, .mobile .leftContent{ background:#101a20;}
.mobile .leftContent .container, .mobile .leftContent .award_list{ padding: 0 15px;}
.mobile .rightContent { background: #101a20;}
.mobile .rightContent .largeRect{ margin: auto; width: 300px;}
.mobile .leftContent { padding: 14px 0px 10px 0;}

.mobile .title, .mobile .footer .footer_share{ margin: 0 15px; }
.mobile .title:after{ clear: both; content: "";}
.mobile .title{ padding-bottom: 10px;}

.mobile .title a.btn {
    float: right;

}
.mobile .title:after {
    clear: both;
    content: "";
}
.mobile .title:after{ clear: both; content: ""; display: block;}
.mobile .btn{ width: 48%; }
.mobile .title .btn{ width: 30%;}
.mobile .btn_live, .mobile .btn_back {
    background: url(../images/2020/IconBack.svg) no-repeat left center;
    background-size: 15%;
}
.mobile .award_list {
    margin: 20px 0px 0px 0;
}
.mobile .award_list li {
    border-bottom: 1px solid #4c4c4c;
    padding-bottom: 30px;
}

.mobile .award_list li:not(:last-child){
    margin-bottom: 30px;
}

.mobile .awardLabel{ margin-bottom: 23px;}
.mobile .awardVideo a.btn:first-child{ margin-right: 4%;}
.mobile .largeRect{ margin:auto; width: 300px;}
.mobile .largeRect{ padding-top:34px; padding-bottom: 45px;}
.mobile .footer{ background:#101a20; padding-bottom: 98px; line-height: 14px; text-align: center; font-size: 14px;}
.mobile .openbox{ display: none;}
.mobile .footer_share{ display: none }
.mobile .footer .copyright{ margin: auto; margin-bottom: 20px; width: 288px; position: relative; }
.mobile .m-footer{
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    transition: transform 0.3s ease;
    height: 89px;
    z-index: 2;
}
.mobile .m-footer.hidden{
    display: none !important;
}
.mobile .m-footer .share{
    height: 40px;
}
.mobile .m-footer .news{
    height: 34px;
    padding: 10px 10px;
    background: #444444;
    font-size: 14px;
    color: #afafaf;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 100;
}
.mobile .m-footer .share .mFooterWhatsapp,
.mobile .m-footer .share .mFooterFacebook,
.mobile .m-footer .share .mInstagram{
    display: table-cell;
    width: 100vw;
}

.mobile .m-footer .share .mFooterWhatsapp a{
    display: block;
    background: url(../images/2020/IconWhatapps.svg) no-repeat #25d366 center;
    background-size: 36px;
    padding-top: 40px;
    height: 0;
    overflow: hidden;
}

.mobile .m-footer .share .mFooterFacebook a{
    display: block;
    background: url(../images/2020/IconFacebook.svg) no-repeat #3b5998 center;
    background-size: 26px;
    padding-top: 40px;
    height: 0;
    overflow: hidden;
}

.mobile .m-footer .share .mInstagram a{
    display: block;
    background: url(../images/2020/IconInstagram.svg) no-repeat #dd2a7b center;
    background-size: 26px;
    padding-top: 40px;
    height: 0;
    overflow: hidden;
}

.mobile .m-footer .news span,
.mobile .m-footer .news .buttonwrap{
    margin-right: 10px;
}

.mobile .m-footer .news .buttonwrap{
    display: inline-block;
}

.mobile .m-footer .news .buttonwrap a{
    color: #ededed;
    letter-spacing: 1px;
}

.mobile .m-footer .news .buttonwrap .facebookButton,
.mobile .m-footer .news .buttonwrap .instagramButton{
    width: 30px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
    padding-right: 5px;
}

/* .mobile .openbox{ display: none;}
.mobile .footer .footer_share{  padding-top: 25px;}
.mobile .footer_share li{ width: 10%;  display: inline-block; margin-right: 3%; }
.mobile .footer_share ul{margin-bottom: 44px; margin-top: 5px;}
.mobile .footer .copyright{ padding-bottom: 44px;}
.mobile .footer .footer_share {
    padding-top: 25px;
}
.mobile .footer .copyright {
    padding-bottom: 44px;
}
.mobile .footer ul {
    margin-bottom: 44px;
    margin-top: 5px;
}
.mobile .footer li {
    width: 10%;
    display: inline-block;
    margin-right: 3%;
} */
/* .whatsappButton {
    width: 10%;
}

.mobile .footer {
    padding-top: 25px;
} */
.mobile .video_share{
    margin: 20px 0;
}

.mobile .video_share img{ width: 10%; display: inline-block; margin-left:3%; vertical-align: middle; }
.mobile .control {
    border-top: 1px solid #4c4c4c;
    padding-top: 20px;
    text-align: center;
}

.mobile .control.no-control{
    padding-top: 0px !important;
}

.mobile .control .btn{ width:48%; }
.mobile .control .btn:first-child{ margin-right: 2%;}
.mobile .btn_next, .mobile .btn_previous{ color: #fcfcfc; font-size: 14px;}
.mobile .youtube{ margin-bottom: 10px; overflow: hidden; }

.mobile #videoAd > div{
    width: 100%;
    height: 100%;
}

@media (max-width: 340px){
    .mobile .title, .mobile .video_share, .mobile .footer .footer_share{ margin: 0 5px; }
}

@media (max-width: 330px){
    .mobile .m-footer .news span,
    .mobile .m-footer .news .buttonwrap{
        margin-right: 5px;
    }
}

.leftContent .youtube .wrapper{
    padding-bottom: 56.25%;
    position:relative;
}