@charset "utf-8"; 

/* CSS Document */
#container{padding-top:60px; width:100%; margin:0 auto}

#slider-index{width:100%; height:650px; background:url(../images/line-red-l.jpg) center bottom repeat-x transparent}
.frame-slider-cut{position:relative; height:450px}
.outer-banner-title{position:relative; height:450px}
.frame-banner-title{position:absolute; z-index:3; width:340px; height:70px; left:0; bottom:75px; padding:30px}
.title-banner-main{color:#fff; font-size:30px}
.title-banner-sub{color:#ddd; font:normal 23px 'neo_sanslight'}
.banner_text{ width: 430px; height: 300px; background: url(../images/banner_text.png) no-repeat; display: block; margin: 0 auto; top: 130px; position: relative;}
.cover-slider{position:absolute; z-index:2; width:100%; height:650px; top:0; left:0; background:url(../images/bg-cover.png) 0 0 repeat transparent}
.frame-img{position:absolute; z-index:1; width:100%; height:650px; top:0; left:0; background-position:center 0}

/* img */
.slideshow{position:relative; height:460px; width:320px; margin: 0 auto; top: 10px;}
.slideshow li{position:absolute}
.slideshow a img{display:block; padding:0; margin:0 auto; border:none; width: 560px; height: 380px;}
.slideshow li a{display:block}



/*usb*/
/*.grid_full{width:100%; height:100%; background:url(../images/grid_full_bg.png) center no-repeat; display:inline-block; margin:0; padding:0 0 60px 0; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover}*/
.img_index_bg2{width:100%; height:180px; background:url(../images/temp/img_index_bg2.png) center no-repeat; display:inline-block; margin:30px 0 -3px 0; -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover}

.full_left{width: 50%; display:inline-block; position: relative; background:url(../images/img_usb01_bg.png) 0 55px repeat-x; height: 557px; float: left;}
.full_right{width: 50%; float:right; position: relative; background:url(../images/img_usb02_bg.png) 0 55px repeat-x; top: -40px; }

.usb_left{ margin: 0 auto; text-align: center;}
.usb_right{ width: 100%; margin: 0 auto; text-align: center; position: relative; }

.usb_left a , .usb_right a { position: relative; }
.usb_left li , .usb_right li { display: inline-block; margin: 0 10px;}
.usb_left li span , .usb_right li span { color: #666666; line-height: 20px; margin: 10px 0 0 0; display: block; }

.grid_hot{ width: 100%; height: 428px; display: inline-block; text-align: center; background: url(../images/img_usb03_bg.png) center bottom repeat-x; margin: 70px 0 0 0;}
.grid_hot li{ display: inline-block; margin: 0 4px;}
.grid_hot li img {background: #f3f3f3; width: 192px; height: 234px; margin: 80px 5px 0}
.grid_hot li span{ color: #e5e5e5; line-height: 20px; margin: 10px 0 0 0; display: block; }

.usb_list{width:500px; float:left; margin:0}
.usb_list li{height:65px; display:block; float:left; padding:30px 10px 10px; margin:0 10px 10px; background:#fff7e8}
.usb_list li:hover{background:#fff}

.process{ background: #fffccb; height: 800px; width: 100%; }
.process_img{ width: 1058px; height: 756px; display: block; text-align: center; margin: 0 auto; background: url(../images/process_img.png) no-repeat;}
.left_date{font-size:13px; width:80px; height:60px; border-right:1px dotted #e4c17e; float:left}
.left_date span{font-size:35px}

.right_text{line-height:22px; text-align:left; display:block; margin:0 0 0 100px}
.video_img{background:url(../images/temp/video_01.png) no-repeat center; width:420px; height:335px; display:block; float:right}

.full_left .slideshow img { margin: 0 0 0 -33%; }
.full_left .title-img-tw { margin: -10px 20px 0 0; }
.full_left .title-img-en { margin: -10px 20px 0 0; }
.full_right .slideshow img { margin: 0 0 0 -10%; }
.full_right .title-img-tw { margin: -10px 0 0 20px; }
.full_right .title-img-en { margin: -10px 0 0 20px; }

 /* Landscape and down
}
===============================*/
@media (max-width:1480px){ 
.slideshow a img{ width: 400px; height: 270px;}
.full_left .slideshow img { margin: 80px 0 0 -50px; }
.full_right .slideshow img { margin: 80px 0 0 -20px; }
}
@media (max-width:1024px){
.usb_list{width:100%}
.usb_list li{height:100%}
.video_img{margin:0 auto; float:none}
.slideshow a img{ width: 100%; height: auto;}
.grid_hot{ height: 380px; }
.grid_hot li{ margin: 0 -20px; }
.grid_hot li img {width: 160px; height: 195px; margin: 60px 30px 0;}
.process{ background: #fffccb; height: 880px; }
.process_img{ width: 780px; height: 860px; background: url(../images/process_img_mb.png) no-repeat;}
.full_left .slideshow img , .full_right .slideshow img { margin: 110px 0 0 0; }

}
@media (max-width:840px){
.grid_hot{ height: 340px; }
.grid_hot li{ margin: 10px -35px 0; }
.grid_hot li img {width: 170px; margin: 40px 35px 0;}
}

@media (max-width:768px){
.usb_list{width:100%}
.usb_list li{height:100%}
.video_img{margin:0 auto; float:none}
.full_left{width: 100%; height: 557px; top: -40px;}
.full_right{width: 100%; margin: 100px 0 0 0; z-index: 0;}
.slideshow a img{ width: 90%}
.grid_hot{ height: 340px; }
.grid_hot li{ margin: 20px -30px 0; }
.grid_hot li img { width: 160px; margin: 40px 35px 0;}
.process{ background: #fffccb; height: 550px; }
.process_img{ width: 252px; height: 550px; background: url(../images/process_img_mb2.png) no-repeat;}

}
@media (max-width:750px){
.grid_hot{ height: 550px; background: #30686b; }
.grid_hot li{ margin: 10px -15px 0; width: 40%;}
.grid_hot li img {width: 50%; height: auto; margin: 0px;}
.banner_text{ width: 320px; height: 223px; background: url(../images/banner_text_mb.png) no-repeat;}
.full_left .slideshow img , .full_right .slideshow img { margin: 110px 0 0 -30px; }
.slideshow a img{ width: 120%}

}

@media (max-width:480px){
.usb_list{width:100%}
.usb_list li{height:100%}
.grid_hot li{ margin: 10px -15px 0; width: 40%;}
.video_img{margin:0 auto; float:none; width:100%}
.full_left{width: 100%; height: 557px; top: -40px;}
.full_right{width: 100%; margin: 100px 0 0 0; z-index: 0;}
.full_left .slideshow img , .full_right .slideshow img { margin: 110px 0 0 0; }
.slideshow a img{ width: 100%}
.grid_hot{ height: 450px; }
.grid_hot li{ margin: 20px 10px 0; width: 40%;}
.grid_hot li img {width: 40%;}

}