@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400,300,700');


body{
    background-color: #000;
}

.title {
    font-size: 60px;
    line-height: 60px;
    color: #fff;
    font-family: 'Play', sans-serif, '微軟正黑體', Microsoft JhengHei;
    font-family: 'Play', '微軟正黑體' !important;    
}

.titlemain {
    font-size: 70px;
    line-height: 70px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
    font-family: 'Roboto Condensed', '微軟正黑體' !important;
    text-align: center;
    margin-top:0%;
    text-shadow: 4px -5px 5px #000;
}

.titleorange{
    color:#FF6400;
    
}

.text {
    font-weight: 300;
    font-size: 22px;
    line-height:30px;
    margin-top: 1em;
    margin-bottom: 1em;
    color: #eee;
    font-family: 'Roboto Condensed', sans-serif, '微軟正黑體', Microsoft JhengHei;
    font-family: 'Roboto Condensed', '微軟正黑體' !important;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


.listlinetab{
     padding-left:20px;
     color:#ff7200;
}

.lanbar{ 
    border: 1px solid #ff7200;  
    box-shadow: 0px 0px 4px #ff7200;  
    outline:none;
    cursor: pointer;    
    font-size:16px;
    line-height: 30px;
    background-color: #000;
    padding:6px;
    color:#fff;    
    margin-top:24px;
    margin-left:10px; 
    font-family: 'Play', sans-serif, '微軟正黑體', Microsoft JhengHei;
    font-family: 'Play', '微軟正黑體' !important;   
}

.lanbarside{
    display:inline-block;
}    


.socialbtn{
    margin-top:160px;
    margin-bottom:2%;
}

.socialbtn ul li{
    float:left;   
    
    list-style: none;  
}


/* mainevent */
.mainbox{
    max-width:1920px;
}
.mainevent{
    width:70%;
    margin:0 auto; 
    overflow: hidden;
    margin-top:100px;

}

.maineventbox{
    border:1px solid #ff7200;
}
.mainright{
    margin-left:0px;
}
.imgbottom{
    margin-bottom:0px;
}



/* Main page**********************************/
.container-fluid{
    background-image: url("/microsites/data/167/mainpage.jpg");
    background-position: top center;
    background-repeat: no-repeat;  
    background-size:100%;      
    min-height:1200px;
    max-width:1920px;
}

.c-boxnav{
	margin:0 auto;
    padding:0 16% 0 16%;
}

.c-box{
    width:80%;
    margin:0 auto;    
    
}

.ruletitle{
    border-left:6px solid #ff7200;
    padding-left:6px;
    font-size:30px;
    margin-bottom:10px;       
    
}

ol, ul {
    list-style: disc;
    padding-left:20px;   
}




#picicon div{    
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;    
    cursor: url("/microsites/data/167/point90.cur"), url("https://www.aorus.com/event_html/Z370/images/point90.cur"), pointer;
    /* cursor:url("/microsites/data/167/point90.cur"), pointer; */
    margin-right:-8%;    
    margin-left:4%;

}

.pressin{
    transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
      
}

/* Real-Time Survey Results */
.conresults{    
    color:#fff;
    font-size:2em;    
    width:90%;
    margin:0 auto;
    margin-bottom: 0%;
}
.conresults .title{
    margin-bottom:2%;
}

.conresults .ts1{    
    font-size:0.8em;
    text-align: right;
    vertical-align:bottom;  
}

.conresults .ts2{        
    vertical-align:middle;
    height:40px;
}    

.conresults .connum{
    text-align: center;
}
.conresults img{
    margin:0 auto;
}
.conresults .numre{
    font-size:40px;
}


/* conbox */
.conbox{
    width:80%;    
    border:6px solid #292929;
    border-radius: 10px;
    background-color:#000;
    height:auto;
    display:none;
    top:16%;
    padding:0%;
    z-index:10;   
    position: absolute;
    margin-bottom:10%;    
     /*box-shadow: 0px 0px 100px #ff7200; */
    max-width:1500px;
}

#content2 .closebox{
    
}

.closebox{    
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 2em;
    font-weight: bold;
    padding:-2px 6px 4px 6px;
    text-align: center;
    width: 36px;
    height: 36px;
    position: absolute;
    cursor:pointer;
    border-radius: 5px;
    right:10px;
    top:10px;    
}


#content1 .closebox{
    background: #ff0000;
}

#content2 .closebox{
    background: #ff6600;
}

#content3 .closebox{
    background: #00b0f0;
}

#content4 .closebox{
    background: #00ff00;    
}



.titlebgred{
    color:#ff0000;
    font-weight: 600;
}
.titlebgorange{
    color:#ff6600;
    font-weight: 600;
}
.titlebgblue{
    color:#00b0f0;
    font-weight: 600;
}

.titlebggreen{
    color:#00ff00;
    font-weight: 600;
}

.barline{
    margin:3% 0 3% 0;
}

.specpoint{
    width:30px;
    height:30px;
    border-radius:50%;			
    background-color:#ff7200;
    color:#fff;
    font-size:1em;
    line-height: 1.5em;
    margin-right:6px;
    text-align: center;
    float:left;
    margin-bottom:4%;
    display:none;
    font-weight: bold;
}

/* joinicon */
.joinicon{
    background-image: url("/microsites/data/167/loginicon.png");
    background-repeat: no-repeat;
    padding:10px;
    width:240px;
    height:70px;
    font-size:30px;
    line-height: 46px;
    text-align: center;    
    position: absolute;
    text-shadow:1px 1px 5px #000;
    right:13%;
    top:3.6%;
}

.joinicon a{
    color:#fff;
    text-decoration: none;    
    font-family: 'Play', sans-serif, '微軟正黑體', Microsoft JhengHei;
    font-family: 'Play', '微軟正黑體' !important;
}

.joinicon:hover{
    box-shadow: 0px 0px 60px #ff0000;
}


/* footer */
footer{
    margin-top:4%;
    margin-bottom:1%;
    text-align: center;
    font-size:14px;
    color:#ccc;    
    font-family: 'Play', sans-serif, Microsoft JhengHei;
    
}

footer a{
    color:#ccc;
}

footer a:hover{
    color:#ccc;
}

#frmBg {
    display:none;
    position:absolute; 
    background:url("/microsites/data/167/opacity-bk.png") repeat;     
    top:0px; 
    width:100%; 
    z-index:2;    
}

/* Go Top */
#gotop{
    width:100px;
    /*background-color:rgba(51,51,51, 0.8);*/
    color:#FFFFFF;
    /*border-radius:10px;*/
    margin:10px;
    padding:10px;
    cursor:pointer;
    text-align:center;
    font-size:13px;
    bottom:30px;
    right:4%;
    position:fixed;	
    display:none;
    transition:all 0.3s linear;
    font-family: Arial, Helvetica, sans-serif;
    z-index:11;  
}

#gotop:hover{
    background-color:#de5801;
}



@keyframes picpop {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
              transform: scale3d(1.2, 1.2, 1.2);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }

} 

@keyframes picpop {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
              transform: scale3d(1.2, 1.2, 1.2);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }

} 


@-webkit-keyframes picpop {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
              transition-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
    }  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
              transform: scale3d(1.2, 1.2, 1.2);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }

} 


@-ms-keyframes picpop {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.2, 1.2, 1.2);
              transform: scale3d(1.2, 1.2, 1.2);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }

} 


/*** Youtube ***/
 .modal-body{
      background-color: #000;
    }

    iframe{
      width: 100%;
      height: 100%;
      min-height: 800px;

    }
    .modal-dialog{
      width:80%;      
      background-color: #000;
      margin-top:6%;
    }

    .close{
        font-size: 5em;
        position: absolute;
        right: -40px;
        top: 0;
        outline: none;
    }
    .videobanner img{
        position:fixed;
        right:2%;
        top:240px;
        box-shadow: 0px 0px 60px #666;        
    }
    .videobanner img:hover{        
        box-shadow: 0px 0px 60px #ff7200;
    }



@media screen and (max-width: 1880px) {
    .mainevent img{
        display: block;
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 1680px) {
    .c-box{
        width:90%;
        margin:0 auto;
    }

    .conbox{
        width:90%;
        right:4%; 
        top:18%;
    }

       .c-boxnav{
        padding:0 2% 0 2%;        
    }



    /* mainevent */
    .mainevent img{
        display: block;
        max-width: 100%;
        height: auto;
    }
    .mainright{
        margin-left:-10px;
    }

    /*** Youtube ***/
    .videobanner img{
         top:320px;       
         width:160px;
    }

}  

@media screen and (max-width: 1440px) {
    .conresults .ts2{            
        margin-bottom: 10%;
    }       
     #picicon div{
            margin-right:4%;    
            margin-left:-4%;
    }

    .c-boxnav{
        padding:0 2% 0 2%;        
    }

    /*** Youtube ***/
    .videobanner img{
         top:100px;       
         width:100px;
    }

}    


@media screen and (max-width: 1366px) {

    #picicon img{
            width:120%;
        } 


    #picicon div{
            margin-right:0%;    
            margin-left:0%;
        }

        .titlemain {            
            font-size: 60px;
            line-height: 60px;            
        }

    /*** Youtube ***/
    .videobanner img{   
      width:100px;    
    }    
    
}

@media screen and (max-width: 1280px) {

    .lanbar{             
        margin-bottom:30px;
        margin-top:10px;
    }

    .lanbarside{
        display:block;
    }
    
   
    .collapsing {
        overflow: hidden!important;
    }

  
    .listlinetab{
        display:none;
    }

    
}


@media screen and (max-width: 1024px) {
    .conresults .ts1{           
        text-align: left;       
    }

  

}

@media screen and (max-width: 1024px) {
    .modal-dialog{
      width:90%;
    }
    iframe{     
      min-height: 400px;
    }
    .videobanner img{
         top:70px;       
         width:80px;
    }
}


@media screen and (max-width: 860px) {

    .conresults .ts2{            
        margin-bottom: 20%;
    }    
        
/* mainevent */
    .mainevent{
        width:90%;
    }
    .mainright{
        margin-left:0px;
    }
    .imgbottom{
        margin-bottom:10px;
    }
    .imgbottom1{
        margin-top:10px;
    }
    
}

@media screen and (max-width: 768px) {
    
  
        #picicon img{
            width:50%;
            float:left;
        } 

        .conresults .msge{
            width:25%;
            float:left;
        } 

        .conresults .ts2{    
            margin-top: 20%;    
            height:50px;
            font-size:20px;
            line-height: 24px;
        }


        .socialbtn{
            margin-top:100px;
            margin-bottom: 60px;
        }

        .titlemain {            
            font-size: 40px;
            line-height: 50px;            
        }


}        

@media screen and (max-width: 640px) {

    .conbox{
        margin-top:0%;
    }

    footer {
        margin:10% 4% 4% 4%;
    }

    .c-box{
        width:96%;
        margin:0 auto;
    }
    .conresults .ts2{    
        height:60px;
        font-size:16px;
    }


    .conresults .ts3{    
        font-size:1.2em;
        line-height: 1.4em;
    }

    /*TOP*/
			#gotop{
				width:100%;
				background-color:rgba(51,51,51, 0.8);
				color:#FFFFFF;
				border-radius:0px;
				margin:0px;
				padding:10px;
				cursor:pointer;
				text-align:center;
				font-size:13px;
				bottom:0px;
				right:0%;
				position:fixed;	
				display:none;
				transition:all 0.3s linear;
				font-family: Arial, Helvetica, sans-serif;

			}

    /*** Youtube ***/
     .modal-dialog{
      width:90%;
      margin-top:10%;
    }
    iframe{     
      min-height: 300px;
    }

    .close img{
     width:50%;
    }

     .videobanner img{
         position:absolute;
         top:70px;       
         width:70px;
         right:30px;
    }        


    

}

@media screen and (max-width: 480px) {

        .conresults .ts2{    
            height:60px;
            font-size:13px;
            line-height: 16px;

        }
        .conresults .ts3{    
             font-size:1em;
             line-height: 1.4em;
        }

        .conbox{
            margin-bottom: 30%;
        }

    }