@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;
		}

        #swappable {
            background-color: #000;
            background-image: url("../images/swappable_1920.gif");
			min-height:550px;
        }
                
        #swappable .title{
            margin-top:5%;
			width: 58%;
        }

        #swappable .text{
			width: 66%;
        }

        #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%;
        }

        #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;
        }

        #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%;
        }
        
        #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;
        }

        #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;
        }



/*
        #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;
        }

		#movie {
			width:1366px;
		}

		#movieA {
			width:1200px;
		}
		
        #swappable {
            background-color: #000;
            background-image: url("../images/swappable_1366.gif");
			background-position: 50% 90%;
			min-height:500px;
        }
        
        #swappable .text{
			width:56%;
        }

        #creative720 .frame .cell {
            width: 70%;
            float: right;
        }

        #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% 100%;
            background-repeat: no-repeat;
            min-height: 1200px;

        }

        #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: 1%;

        }

        #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;
        }



}


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

        #pic6{
            margin-top:1px;
        }

  
        .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;
		}

		#movieA {
			width:800px;
		}

        #swappable {
            background-color: #000;
            background-image: url("../images/swappable_960.gif");
            background-position: center;
            background-repeat: no-repeat;
        }

        #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: 30%;

        }

        #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;
        }
       


   
}


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

		#movie {
			width:640px;
		}

		#movieA {
			width:600px;
		}

		#mode {
			min-height:250px;
		}

        #swappable {
            background-color: #000;
            background-image: url("../images/swappable_640.gif");
            background-position: 50% bottom;
            background-repeat: no-repeat;
            min-height:630px;
        }

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

        #swappable .text {
			width:100%;
        }

         #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: 50% 70%;
            background-repeat: no-repeat;
            min-height: 600px;
        }

        #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%;

        }

        #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%;
        }

         

}


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

		#movieA {
			width:100%;
		}

        #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%;
        }

        .titlebar{
            padding:4% 0% 2%;
            font-size:1.4em;
        }


 }