@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}/* Hides from IE-mac \*/
* html .clearfix {height:1%;}/* End hide from IE-mac */ 
*{-webkit-box-sizing:border-box;box-sizing:border-box;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; }
body{margin:0;overflow-x:hidden;font-family:'cwTeXHei',Microsoft YaHei,Meiryo,Arial,Helvetica,sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{display:block;}
a{text-decoration:none;font-family:'cwTeXHei',Microsoft YaHei,Meiryo,Arial,Helvetica,sans-serif;background-color:transparent;-moz-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s;transition:all 0.2s;}
a:active, a:hover{outline:0;text-decoration:none;-moz-transition:all 0.2s;-o-transition:all 0.2s;-webkit-transition:all 0.2s;transition:all 0.2s;}
html, body{margin:0;padding:0;height:100%;border:none;}



.wrapper{margin:0 auto;width:100%;padding-left:220px;position:relative;display:block;float:left;}

#video-controls{}
#video-cover,#yt-container{}
#ytapiplayer{}
#myytplayer{}
/* Header
-----------------------------------------------------------------------------*/
#head{position:fixed;left:0;width:220px;height:100vh;z-index:99;background:#fff;}

.logo{position:relative;display:block;padding:15px 20px 10px;}
.logo>img{max-width:150px;min-width:150px;width:150px;}
#left_bar{position:relative;z-index:99;width:100%;display:inline-block;}
#left_bar a{display:block;text-align:left;height:45px;letter-spacing:1px;font-size:20px;position:relative;box-sizing:border-box;color:#0033a0;padding-left:20px;width:100%;line-height:45px;}
#left_bar>a>span{font-family:'Oswald',"Microsoft YaHei",'cwTeXHei';text-transform:uppercase;letter-spacing:0;}
#left_bar a:hover{background:#0033a0; color:#FFF;}#left_bar a:hover b{color:#FFF;}
#left_bar b{display:block;margin-top:5px;font-family:'Oswald',"Microsoft YaHei",'cwTeXHei';text-transform:uppercase;text-align:justify;font-size:13px;color:#000;font-weight:lighter;}
/*#left_bar a b:first-letter{font-size:16px;font-weight:lighter;}*/
.lang{position:relative;padding-top:15px;padding-left:20px;width:200px;height:70px;}
.cn,.en{position:relative;display:inline-block;font-size:12px;padding:10px;background:#bfc7cc;color:#0033a0;height:auto;border:none;float:left;}
.cn:hover,.cn:active,.cn.active,.en:hover,.en:active,.en.active{background:#0033a0;color:#FFF;}
.map{position:absolute;bottom:0;padding-left:10px;width:100%;font-size:15px;}.map a{display:block;padding:5px 10px;color:#0033a0;}

.cover{width:100%;display:block;z-index:9;pointer-events:none;background:url(../images/cover.png) repeat;position:absolute;height:100%;opacity:0.8;}
.vision{position:absolute;z-index:99;right:0;margin-top:160px;}
.vision>a{display:block;width:100%;}
.vision>a>img{display:block;}

/*-------------------------------------------輪播------------------------*/
.flexslider{position:relative;height:700px;overflow:hidden;background:url(../images/factory.jpg) no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:800px;}

/*--------------------------------------------------消息*/
.new{position:relative;width:25%;min-width:250px;height:280px;background:#f0f0f0;padding:30px 0px 55px 0px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.new h2{position:relative;text-align:center;font-size:25px;color:#0033a0;margin-bottom:2.5vh;display:block;line-height:1.2;font-weight:400;font-family:'cwTeXHei',"Microsoft YaHei";}
.new h2 i{position:relative;margin-right:5px;background:url(../images/i.png) no-repeat;width:18px;height:18px;display:inline-block;background-position:0px 0px;animation:loading 1s infinite linear;}
.new h4{position:relative;width:80%;display:block;margin:0 auto;font-size:1.2em;color:#0033a0;font-weight:normal;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.new p{position:relative;width:80%;display:block;margin:0 auto;font-size:0.95em;height:50px;margin-bottom:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.new_btn{position:relative;width:60%;padding:5px 2px;text-align:center;margin:30px auto 0px auto;display:block;color:#fff;text-transform:uppercase;font-family:'Oswald';background:#0033a0;}
.new_btn:hover{background:#0033a0;color:#FFF;width:50%;}

/*--------------------------------------------------商品*/
.products{position:relative;width:20%;min-width:280px;height:280px;background:#fff;padding:30px 0 20px 0;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.products h2{position:relative;text-align:center;font-size:25px;color:#0033a0;margin-bottom:1.5vh;display:block;line-height:1.2;font-weight:400;font-family:'cwTeXHei',"Microsoft YaHei";}
.products h3{position:relative;width:200px;display:block;margin:0 auto;font-size:1em;text-align:center;font-weight:normal;margin-top:10px;color:#0033a0;font-family:'cwTeXHei',"Microsoft YaHei";}
.pic{position:relative;width:200px;display:block;margin:0 auto;height:160px;overflow:hidden;text-align:center;}
.pic img{width:100%;display:block;vertical-align:middle;position:absolute;top:-15%;}
.arrow{background:url(../images/i.png) no-repeat;display:inline-block;position:absolute;width:30px;height:45px;top:45%;}
.A1{background-position:-10px -17px;left:5px;}.A2{background-position:-52px -17px;right:5px;}

/*--------------------------------------------------關於*/
.about{position:relative;width:55%;height:280px;padding:80px 80px 55px 120px;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;background:url(../images/about_bg_l.png) no-repeat left top ,url(../images/about_bg_r.png) no-repeat right top ,#fff;border-left:solid 1px #d4e3ff;}
.about h2{font-size:25px;color:#00215b;position:relative;display:inline-block;font-weight:400;font-family:'cwTeXHei',"Microsoft YaHei";cursor:pointer;}
.about p{width:70%;display:block;margin-top:20px;letter-spacing:1px;}
.about span{border-bottom:solid 1px #00215b;width:350px;display:inline-block;margin-top:30px;position:absolute;left:0;z-index:9;}
.a_r{float:right;margin-top:-10px;margin-right:80px;}
.about .a_r span{width:150px;right:-10px;left:auto;}


/*--------------------------------------------------聯絡*/
.contact{position:relative;width:100%;padding:20px 30px;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;background:url(../images/sitemap_bg.jpg) no-repeat right top #001b4d;}
.contact h2{color:#FFF;font-size:25px;font-weight:400;font-family:'cwTeXHei',"Microsoft YaHei";cursor:pointer;}



/*--------------------------------------------------頁腳*/
.sitemap{position:relative;width:90%;margin:0 auto;font-size:1.2em;margin-top:100px;display:table;line-height:2;}
.nav-foot{text-align:center;}
.nav-foot ol{display:inline-block;}
.nav-foot>li{display:inline-table;text-shadow:1px 2px 5px rgba(0, 0, 0, 0.6);text-align:center;font-weight:500;width:15%;}
.nav-foot li span{font-size:10px;display:block; position:absolute;margin-top:-10px;}
.nav-foot li>a{display:inline-block;color:#7fd9fe;letter-spacing:0;line-height:1.2;vertical-align:middle;}
.foot_item{margin-top:15px;display:block;}
.foot_item li{display:block;text-align:center;margin:0;padding:0;line-height:2;}
.foot_item li a{display:inline-block;color:#FFF;font-size:0.7em;vertical-align:middle;}
.foot_item li a:hover{color:#FFF;background:rgba(255,255,255,0.5);display:inline-block;}

.sitemap_open{display:inline-block;color:#fff;margin:0 10px;font-family:'Oswald';}
.sitemap_open img{vertical-align:middle;background-color:rgba(255, 255, 255, .25);margin:0 5px;}
.line-caption {display:table; white-space:nowrap;text-align:center;position:relative;float:right;right:5%;}
.line-caption:after{border-top:1px solid #fff;content:'';display:table-cell;position:relative;top:1.2em;width:20px;}
.line-caption:before{border-top:1px solid #fff;content:'';display:table-cell;position:relative;top:1.2em;width:150px;}


/*pop*/
.back{display:inline-flex;background:rgba(0, 0, 0, .8);position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;}
.pop{position:fixed;width:1000px;left:50%;z-index:1009;text-align:center;margin-left:-500px;top:10%;font-family:'Noto Sans TC',Microsoft YaHei,Meiryo,monospace,Arial,sans-serif;}
.pop_info{width:100%;height:700px;position:relative;display:inline-block;overflow-y:auto;overflow-x:hidden;}
.pop_info>p{display:block;margin:10px auto;color:#fff;font-size:20px;}
.pop_info>.img{width:70%;margin:0 auto;display:block;}
.pop_info>.img>img{width:100%;}
.top{position:fixed; bottom:20px;right:0;z-index:99;cursor:pointer;}
.xx{background:url(../images/xx.png) no-repeat rgba(255,255,255,0.1);width:60px;height:60px;position:fixed;display:block;right:45px;top:45px;;z-index:1099;}

.video{width:1280px;position:fixed;left:50%;z-index:1000;top:5%;margin-left:-640px;}


/*搜尋*/

#searchform{padding:0 0 10px 10px;width:100%;}
#searchform>.s_text{width:80%;height:30px;line-height:30px;}
.s_btn{background:url(../images/searchsubmit.png) no-repeat #0033a0 center center;border:none;width:30px;height:30px;}

/*scrollbar*/
body .pop_info::-webkit-scrollbar{width:10px;}           
body .pop_info::-webkit-scrollbar-track {background-color:#fff;}
body .pop_info::-webkit-scrollbar-thumb{background-color:#0033a0;}


/*---------動畫--------------*/
@-webkit-keyframes loading {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {-webkit-transform:rotate(360deg);
}
}
@-moz-keyframes loading {
	from {
		-moz-transform:rotate(0deg);
	}
	to {
		-moz-transform:rotate(360deg);
	}
}
@-o-keyframes loading {
	from {
		-o-transform:rotate(0deg);
	}
	to {
		-o-transform:rotate(360deg);
	}
}
@keyframes loading {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}


@media (min-width:1365px) and (max-width:1680px ){

.new{position:relative;width:25%;min-width:inherit;height:280px;background:#f0f0f0;padding:30px 0px 55px 0px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.products{position:relative;width:25%;min-width:inherit;height:280px;background:#fff; padding:30px 0 20px 0;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.about{position:relative;width:50%;height:280px;padding:50px 30px 25px 50px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;border:none;}

	
.a_r{float:right; margin-top:-10px; margin-right:20px;}
	
.nav-foot>li{display:inline-table;text-shadow:1px 2px 5px rgba(0, 0, 0, 0.6); text-align:center;font-weight:500;width:15%;}
}

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

.new{position:relative;width:30%;min-width:inherit;height:280px;background:#f0f0f0;padding:30px 0px 55px 0px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.products{position:relative;width:25%;min-width:inherit;height:280px;background:#fff; padding:30px 0 20px 0;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.about{position:relative;width:45%;height:280px;padding:40px 5px 25px 25px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;border:none;}
.a_r{float:right; margin-top:-10px; margin-right:20px;}

.nav-foot>li{display:inline-table;text-shadow:1px 2px 5px rgba(0, 0, 0, 0.6); text-align:center;font-weight:500;width:15%;}
.sas{line-height:1.5!important;height:45px!important;}.sas>span{line-height:45px;}
}



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

.new{position:relative;width:60%;min-width:inherit;height:280px;background:#f0f0f0;padding:30px 0px 55px 0px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.products{position:relative;width:40%;min-width:inherit;height:280px;background:#fff; padding:30px 0 20px 0;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;}
.about{position:relative;width:100%;height:280px;padding:40px 50px 25px 80px; display:inline-block; line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;border:none;}
.a_r{float:right; margin-top:-10px; margin-right:20px;}

/*--------------------------------------------------聯絡*/
.contact{position:relative;width:100%;padding:20px 20px 25px 20px;display:inline-block;line-height:1.2;box-sizing:border-box;vertical-align:top;float:left;background:url(../images/sitemap_bg.jpg) no-repeat right top #001b4d;}

/*--------------------------------------------------頁腳*/
.sitemap{position:relative;width:100%;margin:0 auto;font-size:1.2em;margin-top:100px;display:table;line-height:2;}
.nav-foot{text-align:center;}
.nav-foot>li{display:inline-table;text-shadow:1px 2px 5px rgba(0, 0, 0, 0.6); text-align:center;font-weight:500;width:120px;}
.sas{line-height:1.5!important;height:45px!important;}.sas>span{line-height:45px;}
}