@import url(https://fonts.googleapis.com/css?family=Oswald);
        #pic6{
            margin-top:1px;
        }
        .titlebar{
            font-size:2em;
            font-family: 'Oswald', sans-serif, '微軟正黑體', Microsoft JhengHei;
            font-family: 'Oswald', '微軟正黑體' !important;
            color:#000;
            text-align: center;
            padding:1% 0% 3%;
            background-image: url("../images/line.png");
            background-position: top center;
            background-repeat: no-repeat;
        }

		#movie {
			width:1920px;
		}

		#movieA {
			width:1600px;
		}

        #TripleNVMe {
            background-color: #000;
            background-image: url("../images/mb_triple_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1200px;
        }
        
        #TripleNVMe .text{
            width:67%;
        }
        #TripleNVMe .trititle{
            color:#fff;margin-top:1%;font-size:150%;
        }

        #diagnostic {
            background-color: #000;
            background-image: url("../images/mb_diagnostic_1920.jpg");
            background-position: center -10px;
            min-height: 550px;
            background-repeat: no-repeat;
        }
		
        #swappable {
            background-color: #000;
            background-position:center;
            background-repeat: no-repeat;
        }
                
        #swappable .title{
            margin-top:5%;
			width: 58%;
        }

        #swappable .text{
			width: 55%;
        }

        #optane{
            background-color: #000;
            background-image: url("../images/Optane_1920.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 1400px;
            position: relative;
        }
        
        #optane .title{
            font-size:3em;
            color:#fff;
            text-shadow:0px 0px 30px #00C4A8;
            text-align: center;
            margin-top:100px;

        }

        #optane .optitle{
            font-size:120px;
        }

        #optane .text{
            margin-top:60%;
        }
        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1100px;
            position: relative;
        }

        #anti-sulfur .title{
            text-align: right;
            margin-top:12%;
            font-size:2.6em;
            text-shadow:1px 1px 10px #000;
            /*
            -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)), to(rgba(0,0,0,0)));
            */
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 50%;
        }
        #aorussli{

        }

        #qflashplud{

        }

        

        #M2Thermal{
            background-color: #000;
            background-image: url("../images/m2-thermal-gurard_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1200px;
            position: relative;
        }


        #M2Thermal .title, #M2Thermal .text{
            text-align: right;
        }

        #boost {
            background-color: #000;
            background-image: url("../images/turbo-boost_1920.jpg");
            background-position: 50% 50%;
            background-repeat: no-repeat;
            min-height: 500px;
        }
        
        #boost .frame .cell {
            width: 58%;
            float: right;
            margin-right:10%;
            text-align: justify;
        }

        #creative720 {
            background-color: #000;
            background-image: url("../images/creative720_1920.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 1000px;
        }
        
        
        #creative720 .frame .cell {
            width: 60%;
            float: right;
            margin-right:10%;
            text-align: justify;
        }

        #scoutradar {
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
            margin-top:4%;
        }
        
        
        #scoutradar .frame .cell {
           
        }

        #x-fi .software720{
            margin-left:0%;
        }

        #digitalled{
            background-color: #000;
            background-image: url("../images/digitalled_1920.jpg");
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 1194px;
            /*animation: colorrunup 3s alternate infinite;
            -webkit-animation: colorrunup 3s alternate infinite;*/
            z-index:11;
        }

        
        @keyframes colorrun{
        from{
            -webkit-filter:hue-rotate(0deg);
            -ms-filter:hue-rotate(0deg);
            filter:hue-rotate(0deg);
        }
        to  {
            -webkit-filter: hue-rotate(337deg);
            -ms-filter:hue-rotate(337deg);
            filter: hue-rotate(337deg);
        }
        }




        @keyframes colorrunup{
            0%{opacity: 0.4;}
            100%{opacity: 1;}
        }

        @-ms-keyframes colorrunup{
            0%{opacity: 0.4;}
            100%{opacity: 1;}
        }
        @-webkit-keyframes colorrunup{
            0%{opacity: 0.4;}
            100%{opacity: 1;}
        }
        
        @-o-keyframes colorrunup{
            0%{opacity: 0.4;}
            100%{opacity: 1;}
        }

        #digitalled-text{
             z-index:12;
             min-height: 1200px;
             margin-top:-64%;
             position: relative;
        }    

        #digitalled-text .digitalled-port{
            -webkit-animation: colorrun 1s infinite;
            -o-animation: colorrun 1s infinite;
            -ms-animation: colorrun 1s infinite;
            animation: colorrun 1s infinite;
        }
        #digitalled-text .frame .cell {
            width:68%;
            float: right;
        }
        #digitalled-text #ledimgport{
            width:auto;
        }


        #esssabre{
            background-color: #000;
            background-image: url("../images/ess-sabre-dac_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1000px;
        }

            

        #digitalfuse{
            background-image: url("../images/usb31-digital-fuse-port.jpg");
            background-position: 50% 30%;
            background-repeat: no-repeat;
            min-height: 700px;

        }
        #digitalfuse .fusedesign{
            margin-bottom: 4%;
        }

        #digitalfuse .fusedesign .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 70%;
        }

        #digitalfuse .fusedesign .conbox2{
             display: inline-block;
             position: relative;
             width:24%; 
             margin-left:2%;
             text-align: right;

        } 
        #digitalfuse .fusedesign .conbox2 .title{
            font-size:1.4em;
        }

        #ess1 .title{
            margin-top:4%;
            font-size:1em;
        }

        #ess1 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 50%;
        
        }

        #ess1 .conbox2{
             display: inline-block;
             position: relative;             
             margin-left:2%;
             width: 46%;
        } 


        #ess2 .title{
            margin-top:4%;
            font-size:1em;
        }
        #ess2 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 50%;
        }

        #ess2 .conbox2{
             display: inline-block;
             position: relative;
             width:46%; 
             margin-left:2%;
        } 


        #ess3 .title{
            margin-top:4%;
            font-size:1em;
        }
        #ess3 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 50%;
        }

        #ess3 .conbox2{
             display: inline-block;
             position: relative;
             width:46%; 
             margin-left:2%;
        } 
        #ess4 .title{
            margin-top:4%;
            font-size:1em;
        }

        #ess4 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 50%;
        }

        #ess4 .conbox2{
             display: inline-block;
             position: relative;
             width:46%; 
             margin-left:2%;
        } 


        #ess4 .conbox3{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 50%;
        }

        #ess4 .conbox4{
             display: inline-block;
             position: relative;
             width:46%; 
             margin-left:2%;
        }
        #turbobclock {
            background-color: #000;
            background-image: url("../images/turbo_1920.jpg");
            background-position: 50% 40%;
            background-repeat: no-repeat;
            min-height: 1800px;
        }
        
        #turbobclock .frame .cell {
            width: 46%;
            float: right;
        }
        
        #turbobclock .title{
            margin-top:100px;
        }
        
        #turbobclock .turbotitle{
            font-weight:bold;font-size:1.6em;line-height:1.4em;
        }


/*
        #wtfast {
            background-color: #000;
            background-image: url("../images/mb_wtfast_1920.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 930px;
        }
*/ 

@media screen and (max-width: 1366px) {      
        #pic6{
            margin-top:1px;
        }

        .titlebar{
            padding:1.5% 0% 3%;
            min-height: 130px;
        }

		#movieA {
			width:1200px;
		}

        #boost {
            background-color: #000;
            background-image: url("../images/turbo-boost_1366.jpg");
            background-position: 50% 40%;
            background-repeat: no-repeat;
            min-height: 550px;
        }
        
        #boost .frame .cell {
            width: 62%;
            float: right;
            margin-right:10%;
            text-align: justify;
        }
		
		#movie {
			width:1366px;
		}
		
        #TripleNVMe {
            background-color: #000;
            background-image: url("../images/mb_triple_1366.jpg");
            background-position: center;
            background-repeat: no-repeat;
            min-height: 900px;
        }
        
        #TripleNVMe .title{
            font-size:1.4em;
        }

        #TripleNVMe .trititle{
            font-size:100%;
        }

        #swappable {
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        #optane .text{
            margin-top:86%;
        }


        #creative720 .frame .cell {
            width: 70%;
            float: right;
        }
        #esssabre{
            background-color: #000;
            background-image: url("../images/ess-sabre-dac_1366.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1000px;
            position: relative;
        }
        #M2Thermal{
            background-color: #000;
            background-image: url("../images/m2-thermal-gurard_1366.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1400px;
            position: relative;
        }


        #M2Thermal .title, #M2Thermal .text{
            text-align: right;
        }

        #digitalfuse{
            background-image: url("../images/usb31-digital-fuse-port_1366.jpg");
            background-position: 50% 50%;
            background-repeat: no-repeat;
            min-height: 870px;

        }

        #digitalfuse .fusedesign .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #digitalfuse .fusedesign .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:0%;
             text-align: left;
             margin-bottom: 40%;

        }

        #x-fi .software720{
            margin-left:0%;
        }
        #digitalled{
            background-color: #000;
            background-image: url("../images/digitalled_1366.jpg");
            background-position: 50% 90%;
            background-repeat: no-repeat;
            min-height: 1050px;
        }

        #digitalled-text{
             z-index:12;
             min-height: 1020px;
             margin-top:-1110px;
             position: relative;
        }
		
        #digitalled-text .frame .cell {
            width:60%;
            float: right;
        }

         #turbobclock {
            background-color: #000;
            background-image: url("../images/turbo_1366.jpg");
            background-position: 50% 40%;
            background-repeat: no-repeat;
            min-height: 1260px;
        }
        
        #turbobclock .frame .cell {
            width: 46%;
            float: right;
        }
        
        #turbobclock .title{
            margin-top:0px;
        }
        
        #turbobclock .turbotitle{
            font-weight:bold;font-size:1.6em;line-height:1.4em;
        }        


}


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

        #pic6{
            margin-top:1px;
        }

		#movieA {
			width:800px;
		}
  
        .titlebar{
            font-size:1.4em;
            padding:1.5% 0% 3%;
            background-image: url("../images/line_960.png");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 90px;
        }

		#movie {
			width:960px;
		}

        #boost {
            background-color: #000;
            background-image: url("../images/turbo-boost_960.jpg");
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 630px;
        }
        
        
        #boost .frame .cell {
            width: 100%;
            float: left;
            margin-right:10%;
            text-align: justify;
        }

        #swappable {
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        #TripleNVMe {
            background-color: #000;
            background-image: url("../images/mb_triple_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 900px;
        }
       #TripleNVMe .title{
            font-size:1.0em;
        }
        #TripleNVMe .trititle{
            color:#fff;margin-top:1%;font-size:100%;
        }
     
        #diagnostic {
            background-color: #000;
            background-image: url("../images/mb_diagnostic_960.jpg");
            background-position: center -10px;
            min-height: 700px;
            background-repeat: no-repeat;
        }
        #diagnostic .title {
            margin-top:50px;
        }


        #optane{
            background-color: #000;
            background-image: url("../images/Optane_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1000px;
            position: relative;
        }

        #optane .title{
            font-size:2em;
            color:#fff;
            text-shadow:0px 0px 30px #00C4A8;
            text-align: center;
            margin-top:0px;

        }

        #optane .optitle{
            margin-top:20px;
            font-size:80px;
        }



        #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1100px;
            position: relative;
        }

        #anti-sulfur .title{
            text-align:left;
            margin-top:70%;
            font-size:2.2em;
            text-shadow:1px 1px 10px #000;
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 100%;
            margin-top:-4%;
        }
        #creative720 {
            background-color: #000;
            background-image: url("../images/creative720_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 800px;
        }
        
        
        #creative720 .frame .cell {
            width: 100%;
            float: right;
            margin-right:0%;
            text-align: justify;
        }
       
        #creative720 .title {margin-top:0px;}

        #M2Thermal{
            background-color: #000;
            background-image: url("../images/m2-thermal-gurard_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1500px;
            position: relative;
        }


        #M2Thermal .title, #M2Thermal .text{
            text-align: left;
        }

         #digitalfuse{
            background-image: url("../images/usb31-digital-fuse-port_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 860px;

        }

        #digitalfuse .fusedesign .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #digitalfuse .fusedesign .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:0%;
             text-align: left;
             margin-bottom: 50%;

        }
        #x299main{
            background-color: #000;
            background-image: url("../images/x299main_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 600px;
            position: relative;
            margin-top:10%;
        }

        #x299main .center {
            width: 40%;
            margin-top:0%;

        }
        #baseplate{
            background-color: #000;
            background-image: url("../images/base-plate_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:1150px;
            position: relative;

        }

        #baseplate .center {
            width:100%;

        }    

        #baseplate .conbox1{
            width:100%;
            margin-top:10%;
            text-align: left;

        }

        #baseplate .conbox2{
             width:100%;
            margin-top:100%;
            text-align:left;
        }

        #esssabre{
            background-color: #000;
            background-image: url("../images/ess-sabre-dac_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 900px;
            position: relative;
        } 

        #ess1 .title{
            margin-top:4%;
            font-size:1em;
        }
        #ess1 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #ess1 .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:2%;
        } 


        #ess2 .title{
            margin-top:4%;
            font-size:1em;
        }
        #ess2 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #ess2 .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:2%;
        } 


        #ess3 .title{
            margin-top:4%;
            font-size:1em;
        }
        #ess3 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #ess3 .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:2%;
        } 
        #ess4 .title{
            margin-top:4%;
            font-size:1em;
        }

        #ess4 .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 45%;
        }

        #ess4 .conbox2{
             display: inline-block;
             position: relative;
             width:48%; 
             margin-left:2%;
        } 


        #ess4 .conbox3{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 45%;
        }

        #ess4 .conbox4{
             display: inline-block;
             position: relative;
             width:48%; 
             margin-left:2%;
        }

        #digitalled{
            background-color: #000;
            background-image: url("../images/digitalled_960.jpg");
            background-position: 70% bottom;
            background-repeat: no-repeat;
            min-height: 1400px;
         
        }
        #digitalled-text{
             z-index:12;
             min-height: 1260px;
             margin-top:-1480px;
             position: relative;
             
        }
        #digitalled-text .frame .cell {
            width:100%;
            float: right;
        }
         #turbobclock {
            background-color: #000;
            background-image: url("../images/turbo_960.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1800px;
        }
        
        #turbobclock .frame .cell {
            width: 100%;
        }
        
        #turbobclock .title{
            margin-top:0px;
        }
        
        #turbobclock .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }           
       


   
}


@media screen and (max-width: 640px) {      
        .titlebar{
            padding:2% 0% 3%;
        }

		#movie {
			width:640px;
		}

		#movieA {
			width:600px;
		}

        #boost {
            background-color: #000;
            background-image: url("../images/turbo-boost_640.jpg");
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height: 600px;
        }
        
        
        #boost .frame .cell {
            width: 100%;
            float: left;
            margin-right:10%;
            text-align: justify;
        }

        #lighting{
            background-image: url("../images/mb_lighting_640.jpg");
            background-position: center;
            min-height:700px;
        }
        #swappable {
            background-color: #000;
            background-position: top center;
            background-repeat: no-repeat;

        }
        #swappable .title {
            margin-top:0px;
        }

        #TripleNVMe {
            background-image: url("../images/mb_triple_640.jpg");
            min-height:970px;
        }
        #TripleNVMe .text{
            width:100%;
        }

        #diagnostic {
            background-image: url("../images/mb_diagnostic_640.jpg");
            min-height: 700px;
        }


        #optane{
            min-height: 800px;
        }

         #optane .title{
            font-size:1.6em;
            color:#fff;
            text-shadow:0px 0px 30px #00C4A8;
            text-align: center;
            margin-top:0px;

        }

        #optane .optitle{
            margin-top:20px;
            font-size:60px;
        }

        #optane .text{
            margin-top:140%;
        }


         #anti-sulfur{
            background-color: #000;
            background-image: url("../images/anti-sulfur_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:900px;
            position: relative;
        }

        #anti-sulfur .title{
            text-align:left;
            margin-top:110%;
            font-size:1em;
            text-shadow:1px 1px 10px #000;
        }

        #anti-sulfur .text{
            float:right;
            text-align: justify;
            width: 100%;
            margin-top:0%;
        }
        #creative720 {
            background-color: #000;
            background-image: url("../images/creative720_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 700px;
        }

        #creative720 .frame .cell{
            float:left;
            width:100%;
        }
        #M2Thermal{
            background-color: #000;
            background-image: url("../images/m2-thermal-gurard_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1100px;
            position: relative;
        }
        #digitalfuse{
            background-image: url("../images/usb31-digital-fuse-port_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 700px;

        }

        #digitalfuse .fusedesign .conbox1{
             position: relative;
             display: inline-block;
             vertical-align: top;width: 100%;
        }

        #digitalfuse .fusedesign .conbox2{
             display: inline-block;
             position: relative;
             width:100%; 
             margin-left:0%;
             text-align: left;
             margin-bottom: 50%;

        }
        #x299main{
            background-color: #000;
            background-image: url("../images/x299main_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 860px;
            position: relative;
            margin-top:10%;
        }

        #x299main .center {
            width: 100%;
            margin-top:0%;

        }
        #baseplate{
            background-color: #000;
            background-image: url("../images/base-plate_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:1000px;
            position: relative;

        }

        #baseplate .center {
            width:100%;

        }    

        #baseplate .conbox1{
            width:100%;
            margin-top:10%;
            text-align: left;

        }

        #baseplate .conbox2{
             width:100%;
            margin-top:140%;
            text-align:left;
        }
        #esssabre{
            background-color: #000;
            background-image: url("../images/ess-sabre-dac_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:1400px;
            position: relative;
        }   
   
        #digitalled{
            background-color: #000;
            background-image: url("../images/digitalled_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1400px;
         
        }
        #digitalled-text{
             z-index:12;
             min-height: 1300px;
             margin-top:-1450px;
             position: relative;
             
        }
        #digitalled-text .frame .cell {
            width:100%;
            float: right;
        }
        #digitalled-text #ledimgport{
            width:100%;
        }

          #turbobclock {
            background-color: #000;
            background-image: url("../images/turbo_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1370px;
        }
        
        #turbobclock .frame .cell {
            width: 100%;
        }
        
        #turbobclock .title{
            margin-top:0px;
        }
        
        #turbobclock .turbotitle{
            font-weight:bold;font-size:1.2em;line-height:1.4em;
        }           
         

}


@media screen and (max-width: 480px) { 
		#movie {
			width:400px;
		}

		#movieA {
			width:400px;
		}

        #digitalled{
            background-color: #000;
            background-image: url("../images/digitalled_640.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1400px;
         
        }
        #digitalled-text{
             z-index:12;
             min-height: 1300px;
             margin-top:-1450px;
             position: relative;
             
        }
        #digitalled-text .frame .cell {
            width:100%;
            float: right;
        }
        .titlebar{
            font-size:2em;
            line-height: 120%;
        }
        #esssabre{
            background-color: #000;
            background-image: url("../images/ess-sabre-dac_480.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height:1200px;
            position: relative;
        }

        .titlebar{
            padding:4% 0% 2%;
            font-size:1.4em;
        }
        #turbobclock {
            background-color: #000;
            background-image: url("../images/turbo_480.jpg");
            background-position: top center;
            background-repeat: no-repeat;
            min-height: 1200px;
        }
   
            


 }