@charset "utf-8";
@import url("reset.css");

/*body 共用*/
html{scrollbar-3dlight-color:#ccc; scrollbar-highlight-color:#fff; scrollbar-arrow-color:#999; scrollbar-base-color:#ddd;scrollbar-darkshadow-color:#fff; scrollbar-shadow-color:#999; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; }
body,p,form {margin: 0px;padding: 0px;}
body {font-family: Arial, Helvetica, sans-serif, '微軟正黑體';line-height: 30px;font-size: 15px; background:url(../images/bg.jpg) repeat-x center top;}
a {color: #a70f07;text-decoration: none;}
a:hover{color:#ff9600;
    -o-transition: color .20s linear;
    -webkit-transition: color .20s linear;
    -moz-transition: color .20s linear;
    transition:  color .20s linear;}
ul{list-style-type: none;margin: 0px;padding: 0px;}
li{list-style-type: none;margin: 0px;padding: 0px;}
br.clear{ clear:both; font-size:1px; line-height:1px; height:1px;}
table {border-spacing:0;border-collapse:collapse;/*邊框空白問題*/}
td, th {padding:0}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}

/*清除浮動*/
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}

/*png 圖片透明(共用)*/
.img {behavior: url("iepngfix.htc"); }

/*元件(共用)*/
.input1{color: #000;background-color: #FFF;border: 1px solid #ccc; padding:2px;}
.textarea{color: #000;background-color: #FFF;border: 1px solid #ccc;}
.select{color: #000;background-color: #FFF;border: 1px solid #ccc;}

.page_icon li{ font-size:1.2em; border-left:#a70f07 solid 8px; padding-left:2%; margin:1%;}
.page_icon li span a{ color:#04359b;}

/*框架共用*/
div#wrapper_bg_no{ background:url(../images/bg_no.jpg) no-repeat center top;}
div#wrapper{ width:990px; margin:0 auto 45px;}
div.container{overflow: hidden; margin-top:20px; }
div.main{overflow: hidden;float: right; width: 733px;}

#header,#header_page { width:1000px; margin: auto; overflow: hidden;}
#header_page{ padding-bottom:260px;}
#header_bg { width:100%;z-index: 0;}

/*Top*/
.title{ background:url(../images/title_bg.png) no-repeat center bottom; font-size:1.7em; text-align:center;  font-weight:bold; color: hsla(0,0%,16%,1.00); border-top:hsla(359,100%,43%,1.00) solid 4px;padding:3% 0 5% 0; margin-top:5%; margin-bottom:5%;}
.logo{ float:left; background:url(../images/logo.png) no-repeat left top; width:350px; height:130px;}
.logo img{ width:100%;}
.nav_icon{ width:360px; height:67px; float:right;}
.search{ width:290px; height:67px; float:right;}
.menu{ width:650px; height:64px; float:right;}
.png{ float:left; width:150px; height:60px;}

#top-bar{ color:#fff; width:100%; background:rgba(198, 0, 0, 0.9); position:fixed; padding-bottom:7%; padding-top:1%;
	 /* CSS3 陰影*/-webkit-box-shadow: 2px 3px 8px #000; -moz-box-shadow: 2px 3px 8px #000;box-shadow: 2px 3px 8px #000; z-index:999;}
#top-bar a{ color:#fff;}
#top-bar a:hover{ color:#ff8f5e;}
.top_bar_s{ text-align:center; margin:auto;}

.top{ display:block;}
#top-bar{ display:none;}

/*title*/
.nav_about,.nav_news,.nav_contact,.nav_hohwei{ color:#3a3a3a; padding:53px 0 10px 830px;}
.nav_product{ color:#3a3a3a; padding:53px 0 10px 660px;}
.nav_about{ background:url(../images/title/about.png) no-repeat left top;}
.nav_product{ background:url(../images/title/product.png) no-repeat left top;}
.nav_news{ background:url(../images/title/news.png) no-repeat left top;}
.nav_contact{ background:url(../images/title/contact.png) no-repeat left top;}
.nav_hohwei{ background:url(../images/title/hohwei.png) no-repeat left top;}

/*left*/
.sidebar{ width:224px; float:left; padding-top:35px;}
ul.left_pro li{ padding-bottom:25px; line-height:20px;}

/*背景*/
.bg_box{ background-color:#ffef97;}
.bg_box2{ background-color:#fff;}
#wrapper_about{ background:url(../images/bg/about.jpg) no-repeat center top;}
#wrapper_product{ background:url(../images/bg/product.jpg) no-repeat center top;}
#wrapper_news{ background:url(../images/bg/news.jpg) no-repeat center top;}
#wrapper_contact{ background:url(../images/bg/contact.jpg) no-repeat center top;}
#wrapper_hohwei{ background:url(../images/bg/hohwei.jpg) no-repeat center top;}

/*首頁形象*/
.fullSlide {width:100%;position:relative;height:430px; display:block;}
.fullSlide .bd {margin:0 auto;position:relative;z-index:0;overflow:hidden;}
.fullSlide .bd ul {width:100% !important;}
.fullSlide .bd li {width:100% !important;height:430px;overflow:hidden;text-align:center;}
.fullSlide .bd li a {display:block;height:430px;}
.fullSlide .hd {width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
.fullSlide .hd ul {text-align:center;}
.fullSlide .hd ul li {cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}

/*首頁形象*/
.fullSlide2 {width:100%;position:relative;height:430px; display:none;}
.fullSlide2 .bd {margin:0 auto;position:relative;z-index:0;overflow:hidden;}
.fullSlide2 .bd ul {width:100% !important;}
.fullSlide2 .bd li {width:100% !important;height:430px;overflow:hidden;text-align:center;}
.fullSlide2 .bd li a {display:block;height:430px;}
.fullSlide2 .hd {width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
.fullSlide2 .hd ul {text-align:center;}
.fullSlide2 .hd ul li {cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}

/*首頁形象*/
.fullSlide3 {width:100%;position:relative;height:430px; display:none;}
.fullSlide3 .bd {margin:0 auto;position:relative;z-index:0;overflow:hidden;}
.fullSlide3 .bd ul {width:100% !important;}
.fullSlide3 .bd li {width:100% !important;height:430px;overflow:hidden;text-align:center;}
.fullSlide3 .bd li a {display:block;height:430px;}
.fullSlide3 .hd {width:100%;position:absolute;z-index:1;bottom:0;left:0;height:30px;line-height:30px;}
.fullSlide3 .hd ul {text-align:center;}
.fullSlide3 .hd ul li {cursor:pointer;display:inline-block;*display:inline;zoom:1;width:42px;height:11px;margin:1px;overflow:hidden;background:#000;filter:alpha(opacity=50);opacity:0.5;line-height:999px;}

/*首頁*/
ul#wrapper_index{ width:1000px; margin:auto; overflow:hidden; padding-bottom:45px;}
ul#wrapper_index li{ text-align:center; float:left;}
ul#wrapper_index li.pro{ width:242px; padding:40px 0 0 0; margin:0 8px 0 0;}
ul#wrapper_index li.pro img{ margin:1em 0;}
ul#wrapper_index li.pro div{ text-align:left; color:#a50000; width:120px; padding-left:20px; margin:auto;}
ul#wrapper_index li.pro div.index_tel{ background:url(../images/index/tel_icon.png) no-repeat left center; padding-top:8px;}
ul#wrapper_index li.pro div.index_mail{ background:url(../images/index/mail_icon.png) no-repeat left center;}

ul#wrapper_index li.index_box{ background-color:#a70f07; color:#fff; width:222px; padding:40px 10px 45px 10px;}
ul#wrapper_index li.index_box a{ color:#ffde00;}

.index_box2{ width:1000px; margin:auto; overflow:hidden;}
ul.index_left{ width:750px; float:left;}
ul.index_left li{ padding:40px 0 0 0; margin:0 8px 0 0; float:left;}
ul.index_left li img{ margin:1em 0;}
.index_right{ background-color:#a70f07; color:#fff; width:222px; padding:40px 10px 45px 10px; float:right;}
.index_right img{ margin:1em 0;}

/*footer 頁尾(共用)*/
.fbg,.fbg_02{ background-color:#383838;}
footer{ width:1000px; margin:auto; font-size:0.9em; color:#fff; clear:both; overflow:hidden;}
footer a{color:#ffde00;}.footer a:hover{ color:#ffef97;-o-transition: color .20s linear; -webkit-transition: color .20s linear; -moz-transition: color .20s linear; transition:  color .20s linear;}
footer span{ float:right;}
.footer_float{ float:left;}
.footer_line{ color:#ffffff; text-align:center; padding:1%; margin-top:1%; border-top:#fff 1px solid;}
.footer_line a{ color:#ffffff;}

.fbg{ display:block;}
.fbg_02{ display:none;}

/*文字*/
.red{ background-color:none; color:#ff313f;}

#gotop {display:none;position:fixed;right: 20px;bottom: 20px; padding: 7px 12px; font-size: 16px;background:rgba(30%, 30%, 30%, 0.4);border:#fff 1px solid;color: #fff;cursor: pointer;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}

/*About*/
ul.about_main{ overflow:hidden;}
ul.about_main li{ width:40%; padding:5%; float:left;}

/*product*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.pro_img img{ width:100%;}
.pro_img2 img{ width:50%; float:left;}

/*news*/
.date{ color:hsla(359,100%,42%,1.00); padding-left:20px; margin-bottom:30px; border-left:#B8B8B8 solid 5px;}
.back a{ background-color:hsla(359,100%,43%,1.00); color:#fff; padding:5px 5%; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;cursor: pointer;}
.back a:hover{ background-color:hsla(0,0%,56%,1.00);}

/*contact*/
.contact_line li{ background:url(../images/icon/icon01.png) no-repeat left 0.5em; border-bottom:#E4E4E4 1px dashed; padding:1% 1% 1% 40px; margin-bottom:1%;}
.contact_line li:hover{background-color:#eeeeee;
    -o-transition: color .20s linear;
    -webkit-transition: color .20s linear;
    -moz-transition: color .20s linear;
    transition:  color .20s linear;}
	
/*hohwei*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


@media screen and (max-width:880px) {
/*框架共用*/
div#wrapper{width:100%;}
#header,#header_page { width:100%;}
.nav_about,.nav_product,.nav_news,.nav_contact,.nav_hohwei{ color:#3a3a3a; padding:53px 0 0 600px;}

ul#wrapper_index{ width:100%; margin:auto; overflow:hidden;}
ul#wrapper_index li.pro,ul#wrapper_index li.index_box{ width:48%; padding:5% 0; margin:0 1% 0 0}
.index_pic img{ width:100%;}

.index_box2{ width:100%; margin:auto; overflow:hidden;}
ul.index_left{ width:100%; float:none; overflow:hidden;}
ul.index_left li{ width:22%; padding:5% 0; margin:0 2% 0 1%;}
ul.index_left li img{ width:95%;}
.index_right{ width:100%; float:none;}


ul#wrapper_index li.index_box{ width:50%; margin:auto; padding:5% 0;}
.run{ padding-left:10%;float:right;}

/*left*/
div.container{overflow: hidden; margin-top:20px; }
div.main{overflow: hidden;float: none; width:100%}
.sidebar{ width:100%; padding-top:5%; margin-top:5%; background-color:hsla(0,0%,77%,1.00);}
ul.left_pro li{ text-align:center;float:left; width:23%; margin:1%;}
ul.left_pro li img{ width:96%;}

.fullSlide { display:none;}
.fullSlide2 { display:block;}
.fullSlide3 { display:none;}

footer{ width:90%; padding:5%;}
footer span{ float:none; display:block;}
	}
	
@media screen and (max-width:700px) {

#header_page{margin-bottom:180px;}
.nav_about,.nav_product,.nav_news,.nav_contact,.nav_hohwei{ color:#3a3a3a; padding:60px 0 0 30px;}
ul.left_pro li{ text-align:center;float:left; width:48%; margin:1%;}

.logo{ float:left; background:url(../images/logo.png) no-repeat left top; width:50%; height: auto;}
.logo img{ width:100%;}
.nav_icon{ width:50%;}
.search{ display:none;}
.png{ width:80px;}
	}
	
@media screen and (max-width:480px) {

#header_bg { padding-top:50%;}
div#wrapper_bg_no{ background:none;}
ul#wrapper_index{ width:100%; margin:auto; overflow:hidden;}
ul#wrapper_index li.pro,ul#wrapper_index li.index_box{ width:100%; padding:5% 0; margin:0 1% 0 0}
ul#wrapper_index li.pro div{width:65%;}
.index_pic img{ width:100%;}
#header_page{ margin-bottom:40%;}

.index_box2{ width:100%;}
ul.index_left{ width:100%; overflow:hidden;}
ul.index_left li,.index_right{ width:100%; padding:5% 0; margin:0 1% 0 0}
ul.index_left li{ width:100%; padding:40px 0 0 0; margin:0 8px 0 0; float:left;}
ul.index_left li img{ width:100%;}
.index_right{ width:100%;}
.index_right img{ width:100%;}

.title{ padding:5% 0 8% 0; margin-top:5%; margin-bottom:5%; font-size:1.4em;}


/*left*/
div.main{overflow: hidden;float: none; width:90%; margin:5%;}
.sidebar{ width:96%; padding:2%; background-color:hsla(0,0%,79%,1.00);}
.sidebar ul.left_pro{ background-color:hsla(0,0%,79%,1.00);}
ul.left_pro li{ text-align:center;float:left; width:46%; padding:1%;}
ul.left_pro li img{ width:100%;}

/*單元*/
.product{max-width:none; margin:auto;}
.product li{ width:45%; padding:1%;}
.product li img{ width:90%;}
.title img{ width:100%}
.alliance_box{ max-width:450px; width:90%;}
.nav_about,.nav_product,.nav_news,.nav_contact,.nav_hohwei{ color:#3a3a3a; padding:60px 0 0 30px;}

.fullSlide { display:none;}
.fullSlide2 { display:none;}
.fullSlide3 { display:block;}



.top{ display:none;}
#top-bar{ display:block;}
#top-bar img{ width:100%;}

/*About*/
ul.about_main li{ width:85%; margin:2%; float:none;}
.page_icon li{ font-size:1.1em;}
.pro_img2 img{ width:95%; margin:auto; float:none;}
	}