@charset "utf-8";
/* 2018 */

/* Color Chart
    yellow: #f7ab00;
    blue: #05779b;
*/

/*--------------------------------------- universal (全部頁面使用)------------------------------------------*/

body              { margin: 0; background: #000; color: #fff; font-size: 16px;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
                  }
a,
a:link,
a:visited, 
a:active, 
a:hover           { text-decoration: none; blr:expression(this.onFocus=this.blur()); cursor: pointer;}

a                 { outline: none; /* for Firefox Chrome */ behavior:expression(this.onFocus=this.blur()); /* for IE */} 
a:focus           { -moz-outline-style: none; outline: none; } /* for Firefox Chrome */

select, 
input, 
button, 
textarea          { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;}
button:focus, 
input:focus, 
select:focus, 
textarea:focus    { outline: none;}

.clear:after{
    content: '';
    clear: both;
    display: block;
}


*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
*::-webkit-scrollbar-track {
    background: #000; 
}
 
*::-webkit-scrollbar-thumb {
    background: #666; 
    border-radius: 30px;
}






/* construction */

.wrapper .line{
    width: 100%;
    height: 3px;
    position: fixed;
    left: 0px;
    top: 127px;
    background-color: #008bfc; /* theme */
    z-index: 5;
    transition: all 1.3s;
}
.theme-1080p .line{
    background: linear-gradient(to right, #008bfc 0%, #c6fc80 100%); /* theme */
}
.theme-2k .line{
    background: linear-gradient(to right, #d9055a 0%, #f6832a 100%); /* theme */
}
.theme-4k .line{
    background: linear-gradient(to right, #9452f4 0%, #1fe5ce 100%); /* theme */
}

.switch-wrapper{
    width: 240px;
    height: 130px;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #000;
    z-index: 4;
}
.model-list{
    width: 240px;
    position: fixed;
    left: 0;
    top: 130px;
    box-sizing: border-box;
    background-color: #000;
    z-index: 2;
}
.reset-wrapper{
    width: 240px;
    height: 60px;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 5px 10px 10px 10px;
    background-color: #000;
    box-shadow: 0 0 20px 10px rgba(0,0,0,1);
    z-index: 3;
}
.benchmark-wrapper{
    background-color: #111;
    min-width: 960px;
    height: 130px;
    margin-left: 240px;
    box-sizing: border-box;
}
.scoreboard{
    background-color: #000;
    min-width: 960px;
    margin-left: 240px;
    padding-bottom: 260px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    z-index: 1;
    padding-bottom: 0; /* remove empty bottom space in chrome */
}
.footer{
    min-width: 960px;
    width: 100%;
    height: 60px;
    position: fixed;
    left: 240px;
    bottom: 0;
    background-color: #000;
    box-shadow: 0 0 15px 15px rgba(0,0,0,1);
}



@media screen and (max-width: 800px) {
.switch-wrapper{
    position: absolute;
}
.model-list{
    position: absolute;
}
.wrapper .line{
    position: absolute;
    width: 1000px;
}
.footer p{
    display: none;
}
}








/* switch-wrapper */

.switch-wrapper .version{
    height: 87px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding: 10px 0px 0 7px;
}
.switch-wrapper .version img{
    vertical-align: middle;
    width: 50px;
    margin: 5px;
}

.switch-wrapper .switch{
    height: 40px;
    margin: 0;
    padding: 0;
}
.switch-wrapper .switch a{
    width: 72px;
    height: 40px;
    display: block;
    float: left;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s;
}
.switch-wrapper .switch a:hover{
    background-color: #222;
}
.switch-wrapper .switch a.switch-1080p{
    color: #008bfc;
    margin-left: 8px;
}
.switch-wrapper .switch a.switch-2k{
    color: #d7065a;
}

.switch-wrapper .switch a.switch-4k{
    color: #9c5efd;
}




.switch-wrapper .switch a.switch-1080p.active{
    background-color: #008bfc;
}
.switch-wrapper .switch a.switch-2k.active{
    background-color: #d7065a;
}
.switch-wrapper .switch a.switch-4k.active{
    background-color: #9c5efd;
}
.switch-wrapper .switch a.active{
    color: #fff;
}








/* benchmark */

.benchmark-wrapper > div{
    background-color: #777;
    width: 20%;
    height: 130px;
    float: left;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    border: 3px solid #000;
    transition: all 0.2s;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}
.benchmark-wrapper > div.active{
    width: 40%;
}
.benchmark-wrapper > div.not-active{
    width: 20%;
}
.benchmark-wrapper .benchmark-1{
    background-image: url("../img/benchmark-1.jpg");
}
.benchmark-wrapper .benchmark-2{
    background-image: url("../img/benchmark-2.jpg");
}
.benchmark-wrapper .benchmark-3{
    background-image: url("../img/benchmark-3.jpg");
}
.benchmark-wrapper .benchmark-4{
    background-image: url("../img/benchmark-4.jpg");
}


.benchmark-wrapper > div:before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1;
    transition: all 0.3s;
}
.benchmark-wrapper > div.active:before{
    background-color: transparent;
}



.wrapper .benchmark-wrapper > div:after{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
}

/* theme-1080p */
.theme-1080p .benchmark-wrapper .benchmark-1:after{
    background: linear-gradient(to bottom, rgba(0,139,255,0) 80%, rgba(0,139,255,0.3) 100%); /* theme */
}
.theme-1080p .benchmark-wrapper .benchmark-2:after{
    background: linear-gradient(to bottom, rgba(84,187,198,0) 80%, rgba(84,187,198,0.3) 100%); /* theme */
}
.theme-1080p .benchmark-wrapper .benchmark-3:after{
    background: linear-gradient(to bottom, rgba(134,216,165,0) 80%, rgba(134,216,165,0.3) 100%); /* theme */
}
.theme-1080p .benchmark-wrapper .benchmark-4:after{
    background: linear-gradient(to bottom, rgba(182,243,132,0) 80%, rgba(182,243,132,0.3) 100%); /* theme */
}

/* theme-2k */
.theme-2k .benchmark-wrapper .benchmark-1:after{
    background: linear-gradient(to bottom, rgba(216,5,91,0) 80%, rgba(216,5,91,0.3) 100%); /* theme */
}
.theme-2k .benchmark-wrapper .benchmark-2:after{
    background: linear-gradient(to bottom, rgba(252,74,73,0) 80%, rgba(252,74,73,0.3) 100%); /* theme */
}
.theme-2k .benchmark-wrapper .benchmark-3:after{
    background: linear-gradient(to bottom, rgba(250,95,46,0) 80%, rgba(250,95,46,0.3) 100%); /* theme */
}
.theme-2k .benchmark-wrapper .benchmark-4:after{
    background: linear-gradient(to bottom, rgba(248,117,17,0) 80%, rgba(248,117,17,0.3) 100%); /* theme */
}

/* theme-4k */
.theme-4k .benchmark-wrapper .benchmark-1:after{
    background: linear-gradient(to bottom, rgba(104,89,211,0) 80%, rgba(104,89,211,0.3) 100%); /* theme */
}
.theme-4k .benchmark-wrapper .benchmark-2:after{
    background: linear-gradient(to bottom, rgba(77,149,198,0) 80%, rgba(77,149,198,0.3) 100%); /* theme */
}
.theme-4k .benchmark-wrapper .benchmark-3:after{
    background: linear-gradient(to bottom, rgba(25,134,126,0) 80%, rgba(25,134,126,0.3) 100%); /* theme */
}
.theme-4k .benchmark-wrapper .benchmark-4:after{
    background: linear-gradient(to bottom, rgba(120,228,206,0) 80%, rgba(120,228,206,0.3) 100%); /* theme */
}




.benchmark-wrapper > div p{
    margin: 0;
    z-index: 2;
    position: relative;
    text-shadow: 0px 2px 6px #000, 0px 2px 6px #000;
    font-weight: bold;
    padding-top: 20px;
    font-size: 20px;
    width: 100%;;
    height: 100%;
    box-sizing: border-box;
}
.benchmark-wrapper > div.benchmark-3 p{
    font-size: 18px;
}

.benchmark-wrapper p span{
    display: block;
}
.benchmark-wrapper .benchmark-1 p span{
    padding-top: 15px;
}
.benchmark-wrapper .benchmark-2 p span{
    padding-top: 15px;
}
.benchmark-wrapper .benchmark-3 p span{
    padding-top: 10px;
}
.benchmark-wrapper .benchmark-4 p span{
    padding-top: 15px;
}
.benchmark-wrapper > div p:after{
    /*
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 0;
    height: 0;
    margin-left: -12px;
    border-style: solid;
    border-width: 18px 12px 0px 12px;
    border-color: #fff transparent transparent transparent;
    z-index: 2;
    transition: all 0.3s;
    display: none;
    box-shadow: 0 0 20px 10px red;
    */
    display: none;
    position: absolute;
    left: 50%;
    bottom: 10px;
    content: '\25BC';
    text-shadow: 0px 1px 9px #000, 0px 1px 9px #000, 0px 2px 12px #000, 0px 3px 18px #000, 0px 3px 18px #000;
}
.benchmark-wrapper > div.active p:after{
    display: block;
}
.benchmark-wrapper > div.reverse p:after{ /*反向排序*/
    /*
    border-width: 0 12px 18px 12px;
    border-color: transparent transparent #fff transparent;
    */
    content: '\25B2';
}

.benchmark-wrapper > div p img{
    display: none;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}


@media screen and (max-width: 1600px) {
.benchmark-wrapper > div.active{
    width: 64%;
}
.benchmark-wrapper > div.not-active{
    width: 12%;
}
.benchmark-wrapper > div.not-active p img{
    display: block;
}
.benchmark-wrapper > div.not-active p span{
    display: none;
}
}






/* model-list */

.model-list{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.model-list .checkbox-group{
    background-color: #111;
    margin: 0 10px;
}
.model-list .checkbox-group > span{
    display: block;
}
.model-list .checkbox-group img{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}


.model-list input[type="checkbox"] {
    display:none;
}
.model-list input[type="checkbox"] + label{
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    display: block;
    padding: 10px 7px 10px 8px;
    transition: all 0.3s;
}
.model-list input[type="checkbox"]:hover + label{
    background-color: #000;
}
.model-list input[type="checkbox"] + label i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 30px;
    margin: -3px 7px 0 0;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #444;
    transition: all 0.3s;
    background-size: 200%;
    background-position: center center;
}
.model-list input[type="checkbox"] + label b {
    font-weight: normal;
    display: inline-block;
    width: 170px;
    vertical-align: middle;
    overflow: hidden;
}


.model-list input[type="checkbox"]:checked + label{
    background-color: #0e2334; /* theme */
}
.model-list input[type="checkbox"]:checked + label i {
    background: url("../img/icon-checked-light.png") center center no-repeat;
    background-size: 100%;
    background-color: #008bfe; /* theme */
    border-color: #008bfe; /* theme */
}
.model-list input[type="checkbox"]:disabled + label i {
    background-color: #ccc;
    border-color: #aaa;
    cursor: default;
}




.theme-1080p .model-list input[type="checkbox"]:checked + label{
    background-color: #0e2334; /* theme */
}
.theme-2k .model-list input[type="checkbox"]:checked + label{
    background-color: #2f0f1c; /* theme */
}
.theme-4k .model-list input[type="checkbox"]:checked + label{
    background-color: #261e33; /* theme */
}


.theme-1080p .model-list input[type="checkbox"]:checked + label i {
    background-color: #008bfe; /* theme */
    border-color: #008bfe; /* theme */
}
.theme-2k .model-list input[type="checkbox"]:checked + label i {
    background-color: #d9055a; /* theme */
    border-color: #d9055a; /* theme */
}
.theme-4k .model-list input[type="checkbox"]:checked + label i {
    background-color: #9452f4; /* theme */
    border-color: #9452f4; /* theme */
}










/* reset */

.reset-wrapper .reset{
    width: 100%;
    height: 45px;
    display: block;
    border: 2px solid #018afc; /* theme */
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    transition: all 0.2s;
}
.reset-wrapper .reset:hover{
    background-color: #111;
}

.theme-1080p .reset-wrapper .reset{
    border-color: #018afc; /* theme */
}
.theme-2k .reset-wrapper .reset{
    border-color: #d9055a; /* theme */
}
.theme-4k .reset-wrapper .reset{
    border-color: #9452f4; /* theme */
}

/* footer */

.footer img{
    vertical-align: middle;
    margin: 5px;
    margin-left: 15px;
    width: 50px;
}
.footer p{
    margin: 0 0 0 10px;
    font-size: 17px;
    position: relative;
}
.footer p:before{
    display: block;
    content: '';
    width: 1px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 15px;
}



/* scoreboard */

.scoreboard .model:after{
    content: '';
    display: block;
    clear: both;
}

.scoreboard .column{
    float: left;
    width: 20%;
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
    transition: all 0.2s;
}
.scoreboard .column.active{
    width: 40%;
}
.scoreboard .column.not-active{
    width: 20%;
}
.scoreboard .column .score{
    height: 55px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.scoreboard .column .score.others{
    color: #777;
    /* margin-bottom: 0px; */
}
.scoreboard .column .score .bar{
    background-color: #222;
    height: 100%;
    position: relative;
}
.scoreboard .column .score .number{
    position: absolute;
    left: 10px;
    top: 14px;
    font-size: 24px;
    font-weight: bold;
}
.scoreboard .column .score .number i{
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
}
@media screen and (max-width: 1600px) {
.scoreboard .column.not-active .score .number i{
    display: none;
}
}
.scoreboard .column .score .detail{
    position: absolute;
    left: 120px;
    top: 7px;
    overflow: hidden;
    display: none;
}
.scoreboard .column .score.others .detail{
}
.scoreboard .column.active .score .detail{
    display: block;
}



.scoreboard .column .score .detail p{
    margin: 0;
    font-size: 14px;
}
.scoreboard .column .score .detail p.name{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}
.scoreboard .column .score.others .detail p.name{
    font-weight: normal;
}
.scoreboard .column .score .detail p.title{
    font-size: 15px;
}

#div_product_item{
    padding-top: 10px;
    padding-bottom: 15px;
}

@media screen and (max-width: 1600px) {
.scoreboard .column.active{
    width: 64%;
}
.scoreboard .column.not-active{
    width: 12%;
}
}




/* theme-1080p 藍色系 */

.theme-1080p .scoreboard .column:nth-child(1) .bar{
    background: linear-gradient(to right, #096fd1, #2f91b8 100%); /* theme */
}
.theme-1080p .scoreboard .column:nth-child(2) .bar{
    background: linear-gradient(to right, #2f91b8, #47a593 100%); /* theme */
}
.theme-1080p .scoreboard .column:nth-child(3) .bar{
    background: linear-gradient(to right, #47a593, #60ae63 100%); /* theme */
}
.theme-1080p .scoreboard .column:nth-child(4) .bar{
    background: linear-gradient(to right, #60ae63, #78ae60 100%); /* theme */
}




/* theme-2k 紅色系 */

.theme-2k .scoreboard .column:nth-child(1) .bar{
    background: linear-gradient(to right, #b8044d, #d83747 100%); /* theme */
}
.theme-2k .scoreboard .column:nth-child(2) .bar{
    background: linear-gradient(to right, #d83747, #d54930 100%); /* theme */
}
.theme-2k .scoreboard .column:nth-child(3) .bar{
    background: linear-gradient(to right, #d54930, #d55b1a 100%); /* theme */
}
.theme-2k .scoreboard .column:nth-child(4) .bar{
    background: linear-gradient(to right, #d55b1a, #dc7905 100%); /* theme */
}




/* theme-4k 紫色系 */

.theme-4k .scoreboard .column:nth-child(1) .bar{
    background: linear-gradient(to right, #9452f4, #536ec5 100%); /* theme */
}
.theme-4k .scoreboard .column:nth-child(2) .bar{
    background: linear-gradient(to right, #536ec5, #368ebe 100%); /* theme */
}
.theme-4k .scoreboard .column:nth-child(3) .bar{
    background: linear-gradient(to right, #368ebe, #2daba8 100%); /* theme */
}
.theme-4k .scoreboard .column:nth-child(4) .bar{
    background: linear-gradient(to right, #2daba8, #2cd38a 100%); /* theme */
}





.scoreboard .column .score .bar:before{
    background: linear-gradient(to right, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100%); /* theme */
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
}
.scoreboard .column .score .bar.full:before{
    display: none;
}
.wrapper .scoreboard .column .others .bar{
    background: linear-gradient(to right, #222 50%, #000 100%);
}







.no-data{
    color: #999;
    padding: 20px 20px 10px 40px;
    font-size: 16px;
    line-height: 1.6em;
    box-sizing: border-box;
    width: 99%;
}
.no-data p{
    margin: 0;
}
.no-data .banner img{
    max-width: 48%;
    margin-right: 1%;
    max-height: 100%;
}
.no-data .banner{
    position: relative;
    margin-top: 10px;
    overflow: hidden;
}
.no-data .banner .twins{
    height: 100%;
    text-align: center;
}

/*
@media screen and (max-width: 1200px) {
.no-data{
    padding-left: 15%;
}
}
*/