/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style:none;
	margin:0;
	padding:0;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
a {
	text-decoration:none;
}
a:focus {
    outline: none;
}
*:focus {
    outline: none;
}
.clear {
	clear:both;
}

body {
	font-family:微軟正黑體, 黑體, Verdana, Arial;
	background:#fff;
}
.wrap {
	width:1600px;
	margin:0 auto;
}

.wrap img{
	max-width:100%
}
.header-bottom {
	background:#fff;
	padding:0 0;
}

.header-bottom-left {
	float:left;
	width:85%;
	margin:0px;
}
.header-bottom-right {
	float:right;
	width:auto;
	margin:25px 0 25px 0;
	display:block;
}
.logo {
	float:left;
	padding:0 5% 0 0px;
}
.logo img{
}
/*--menu--*/
.menu {
	float:left;
	margin:20px 0 0 0;
}
/* sub-menu */
.h_nav h4 {
	border-bottom:1px solid #bb0000;
	font-size:18px;
	color:#bb0000;
	padding:0 3px 5px 3px;
	margin:0 0 15px 0;
}

.h_nav ul li {
	display: block;	
}
.h_nav ul li a {
	display:block;
	font-size:15px;
	color:#000;
	line-height:26px;
	border-bottom:1px solid #ccc;
	padding:0px 3px;
	margin-bottom:8px;
}
.h_nav ul li a:hover {
	color:#00405d;
	text-decoration:none;
}
.h_nav2 {
	margin:0 15px 0 0;display:block;float:left;padding:0;
}
.h_nav2 ul li {
	display: block;
}
.h_nav2 ul li a {
	display:block;
	font-size:14px;
	color:#000;
	line-height:26px;
	border-bottom:1px solid #ccc;
	padding:0px 3px;
	margin-bottom:8px;	
}
.h_nav2 ul li a:hover {
	color:#00405d;
	text-decoration:none;
}
.h_nav2:last-of-type{margin:0px 0 0 15px;}

.search {
	background:#fff;
	border: 1px solid #ddd;
	position: relative;
	float:left;
	margin:0px;
	display:block;
}
.search input[type="text"] {
	border: none;
	outline: none;
	background: none;
	font-size:15px;
	font-family:微軟正黑體, 黑體, Verdana, Arial;
	color:#777;
	width:130px;
	padding:7px;
	-webkit-apperance:none;
	margin:0;
}
.search input[type="text"]:focus {
	width:130px;
}
.search input[type="submit"] {
	border: none;
	text-indent: -9999px;
	outline:none;
	cursor: pointer;
	background: url("../images/search.png") no-repeat 0px 3px;
	width:30px;
	height:25px;
	padding:8px;
}
.search input[type="submit"]:active {
	position:relative;
}

.dropsearch{display:none;}
#searchbar {display:none;}

/*--content--*/
.main {
	margin:1% 1% 2% 1%;
	display:inline-block;
	width:98%;text-align:center;
}
.main div.p_list {	
	display:block;
	margin:25px auto;
	text-align:center;
}
.main div.p_detail {	
	display:block;
	margin:25px 30px;
	text-align:left;
}

.main div.dm_list {	
	display:block;
	margin:25px auto;
	text-align:center;
	width:98%
}

.main div.p_detail h2{
	border-bottom:1px solid #ddd;
	padding:8px;
	margin:0 50px 15px 50px;
}
.main div.p_detail div.p_left{
	padding:8px;display:block;
	width:auto;
}
.news_t {margin:25px 0 0px 0;
text-align:left;
padding:12px 25px;
border-top: 2px solid #658392;
border-bottom: 2px solid #658392;
background-color:#F0F0F0;
font-weight:bold;
}

[class*="span"] {
float: left;
min-height: 1px; 
}

/*首頁商品列表---------------*/
.span4 {
width: 21.85%;
margin-left:1.5%;
margin-right:1.5%;
margin-bottom:20px;
}
/*商品頁商品列表---------------*/
.span5 {
border:1px solid #DCDCDC;
width:18.58%;/*解析度1680以上一列5張*/
height:320px;
text-align:center;
padding:10px 10px;
margin:0;
}

.span5 div.text{
	width:90%;
	text-align:left;
	padding:0px 10px;
	display:block;
}

.span5 div.text h3{
	font-size:15px;
	line-height:24px
}

.span5 div.text span.text-small{
	font-size:13px;
	line-height:28px;
	color:#999;
}
.span6 {
border:1px solid #dcdcdc;
width:19.8%;
text-align:center;
padding:10px 0px 0 0;
margin:0;
}

.span6 div.dm-text{
	width:auto;
	text-align:left;
	padding:10px 10px;
	display:block;
	background-color:#eee;
	height:50px;
}
.span6 div.dm-text span.text-small{
	font-size:14px;
	line-height:24px;
	color:#333;
}
/*首頁商品圖左側文字區塊----------------*/
.view {
   z-index:9;
   cursor: default;
   overflow: hidden;
   text-align: center;
   position: relative;
}
.view .mask {
   width:40%;
   position: absolute;
   overflow: hidden;
   top:80px;text-align:left;
   padding:0 10px 0 35px;
   left:0;
}
.view img {
   display: block;
   position: relative;
   width:100%;
}
.view h2 {
   color: #000;
   text-align:left;
   position: relative;
   font-size:16px;
   font-weight:bold;
   line-height:28px;
   padding:0;
   margin:0;
}
.view a.info {
   color:#45636B;
   background:#fff;
   border:2px solid #45636B;
   padding: 5px 12px;
   font-weight:bold;
   text-decoration: none;
   margin-top:20px;
   display: inline-block;
   overflow:hidden;
}
.view a.info:hover {
	background:#eee;
	border:2px solid #45636B;
}

.sub-nav{
	text-align:right;
	margin:0px auto;
	padding:10px 2%;
	border-bottom:1px solid #A0A0A0;
	display:inline-block;
	width:96%;
	color:#000;
}
.sub-nav a{
	color:#000;
}

.sub-nav a:hover{
	color:#983434;
}
.about_left2 {
	width:45%;
	float:left;
	margin:0px 3% 20px 1%;	
	padding:0 50px 0 0;
	border-right:1px solid #a0a0a0;
	display: block;
	position: relative;
	top:-85px;
}
.about_left2 img {
	border:1px solid #a0a0a0;
	max-width:100%;
	width:100%;
}
.about_right2 {
	float:right;
	margin:0 3% 0 0%;	
	width:43%;
}

.about_right2 h4{
color:#ff6317;font-size:17px;font-weight:bold;letter-spacing:1px;line-height:32px;
text-align:left;
}

.about_left {
	width:45%;
	float:left;
	margin:25px 3% 20px 3%;	
	padding:0 50px 0 0;
	border-right:1px solid #a0a0a0;
}
.about_left img {
	border:1px solid #a0a0a0;
	max-width:100%;
	width:100%;
}
.about_left iframe{
height:450px;
width:100%;
}

.about_right {
	float:right;
	margin:0 3% 0 0;	
	width:42%;
}

.about_right div.news_text {
	margin:25px 3% 0 0;	
	width:100%;
	text-align:left;
	line-height:28px;
}

.about_right div.news_download {
	border-top:1px solid #a0a0a0;
	margin-top:80px;margin-bottom:50px;
	text-align:left;
	line-height:28px;
	padding-top:10px
}
.about_right div.news_download a{color:#000}
.about_right div.news_download a:hover{color:#990000}

.about_right div.treif_logo {
	text-align:left;
	margin:25px 0 0 0;	
	width:100%;
	border-bottom:1px dotted #999;
	padding:0 0 5px 0;
}
.about_right div.treif_logo span.link {
	display:inline-block;
	text-align:right;
	width:100%;
	font-size:14px;
	color:#FF6600;
	line-height:20px;
}
.about_right div.treif_logo span.link img{
	padding:0px 5px 0 0;vertical-align:middle
}

.about_right div.treif_logo span.link a{
	color:#FF6600;
}

.about_right div.treif_logo span.link a:hover{
	color:#999;
}

.about_right div.treif_info {
	text-align:left;
	margin:25px 0 0 0;	
	width:100%;
	line-height:30px;
}
.about_right div.treif_info p{
margin:0 0 25px 0;
}
.about_right div.treif_info .img{width:100%}
.about_right div.treif_info .right{
	float:right;
	padding:10px 0 10px 15px
}
.about_right div.treif_info .left{
	float:left;
	padding:10px 15px 10px 0;
}
.about_right div.treif_info span.red{
color:#bb0000;
}
.info_left {
	width:45%;
	float:left;
	margin:25px 0% 20px 3%;	
	padding:0 50px 200px 0;
	border-right:1px solid #a0a0a0;
}
.info_left img {
	border:1px solid #a0a0a0;
	max-width:100%;
	width:100%;
}
.contact_left {
	width:45%;
	float:left;
	margin:25px 3% 20px 3%;	
	padding:0 50px 120px 0;
	border-right:1px solid #a0a0a0;
}
.contact_left img {
	border:1px solid #a0a0a0;
	max-width:100%;
	width:100%;
}

.c_bottom{
border-top:1px solid #a0a0a0;
margin-top:5px;
padding:20px 40px 10px 40px;
}
.c_map{
border:1px solid #a0a0a0;
text-align:left;
padding:0;
display:inline-block;
width:100%;
}
.c_map div.c_map_l{
text-align:left;
padding:100px 20px;
float:left;
width:23%;
}
.c_map div.c_map_l h2{
line-height:30px;
border-bottom:1px solid #a0a0a0;
font-size:18px;
padding:0 8px 5px 8px;
margin:0 10px 8px 0;
width:100%;
display:inline-block;
}
.c_map div.c_map_l span.address{
line-height:30px;
font-size:15px;
margin-left:8px;
display:inline-block;
}
.c_map div.c_map_r{
text-align:left;
padding:0px;
float:right;
width:72%;
border-left:1px solid #a0a0a0;
}

.c_map div.c_map_r iframe{
width:100%;
height:400px;
border:none;
}
.news {
width:100%;margin:0 auto;
}
/*原廠-產品推薦---------------------*/
.recommend{
border-top:1px solid #a0a0a0;
margin-top:5px;
padding:20px 0 10px 0;
}

.recommend h1{
color:#F60;
font-weight:bold;
border-bottom:1px solid #F60;
padding:0 0 5px 15px;
margin:0 auto 10px auto;
text-align:left;
width:92%;
font-size:20px;
}



/*--footer--*/
.sub-logo {
	width:98%;
	margin:0 auto;text-align:center;
}
.footer-top {
	background:#fff;
	border-top:8px solid #DCDCDC;
	padding:10px 0 15px 0;
}
.col_1_of_f_1 {
	display: block;
	float:left;
	margin: 5px 0 25px 0;	
}
.col_1_of_f_1:first-child {
	margin-left: 0;
}
.span_1_of_f_1 {
	width: 100%;
}

.span_1_of_2 {
	width:22%;
	padding:0 0% 0 3%;
}

.span_1_of_3 {
	width:21%;
	padding:0 0% 0 4%;
}
.company_address {
	border-left: 5px solid #45636D;
	padding-left:10px;
}
.company_address h3 {
	font-size: 16px;
	color: #333;
	line-height:24px;
	padding:0;
	margin:0
}
.company_address p {
	font-size:14px;
	color: #333;
	line-height:1.8em;
}

/*--上方橫幅 Banner-----------------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{
width: 100%;
height: 205px;
position: relative;z-index:-999;
margin: 0 auto;
overflow: hidden;
}
.bn-about{background: #6B683D url(../images/bn_about.jpg) no-repeat right 0%;}
.bn-brand{background: #4B5C6E url(../images/bn_brand-info.jpg) no-repeat right 0%;}
.bn-contact{background: #3B4858 url(../images/bn_contact.jpg) no-repeat right 0%;}
.bn-dm{background: #EBECEE url(../images/bn_dm.jpg) no-repeat right 0%;}
.bn-news{background: #2C2C2C url(../images/bn_news.jpg) no-repeat right 0%;}
.bn-products{background: #4B5C6E url(../images/bn_products.jpg) no-repeat right 0%;}
.bn-recommend{background: #2C2C2C url(../images/bn_recommend.jpg) no-repeat right 0%;}
.da-slide{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 60px;
	left: -120px;
	text-align: left;
}

.da-slide h2{
	color: #f9f9f9;
	font-size:28px;
	font-weight:bold;
	letter-spacing:1px;
	z-index: 99;
	padding:0 0 2px 0;
}

.da-slide p {
	font-size:24px;
	font-weight:400;
	line-height: 25px;
	width:100%;
	color: #fff;
}
.da-slide h2,
.da-slide p  {
margin-left:11%;
}

/*--螢幕解析度小於1600px時，使用以下這段-----------------*/
@media (max-width:1600px) {
.wrap {
	width:99%;
}
.logo {padding-right:3%;}
.logo img {
	width:240px;
}
.menu {	
	margin:18px 0 0 0;
}
.header-bottom {padding:0 0%;margin:0;}
.header-bottom-left {
	width:85%
}
.header-bottom-right {
	margin:22px 0 15px 0;
	
}
.search input[type="text"] {
	width: 100px;
}
.search input[type="text"]:focus {
	width: 100px;
}
.main {
	margin:1% 0% 2% 0%;
	width:100%;
}
.main div.p_list {
	width:98%;
}
.main div.p_detail {	
	margin:25px 15px;
}

.main div.p_detail h2{
	margin:0 0px 15px 0px;
}
.main div.p_detail div.p_left{

}
/*首頁商品列表---------------*/
.span4 {
width: 21.85%;
margin-left:1.5%;
margin-right:1.5%;
}

/*商品頁商品列表---------------*/
.span5 {
width:23.5%;/*解析度1600時一列4張*/
height:300px;
}

.span6 {
width:19.8%;
}
.span6 img{
	max-width:90%
}

.view .mask {
   top:80px;
   padding:0 0px 0 25px;
   left:0;
}
.about_left {
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 0 0;
}
.about_right {
	float:right;
	margin:0 1% 0 0;	
	width:43%;
}
.info_left {	
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 300px 0;
}
.contact_left {	
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 190px 0;
}
.c_bottom{
padding:20px 10px 10px 10px;
}

.span_1_of_2 {
	width:21%;
	padding:0 0% 0 1%;
}

.span_1_of_3 {
	width:22%;
	padding:0 0% 0 4%;
}
}
/*--螢幕解析度小於1440px時，使用以下這段-----------------*/
@media (max-width:1440px) {
.main {
	margin:1% 0% 2% 0%;
	width:100%;
}
.main div.p_list {
	width:98%;
}

/*首頁商品列表---------------*/
.span4 {
width: 21.85%;
margin-left:1.5%;
margin-right:1.5%;
}

/*商品頁商品列表---------------*/
.span5 {
width:23.3%;/*解析度1440時一列4張*/
height:300px;
}
}

/*--螢幕解析度小於1366px時，使用以下這段-----------------*/
@media (max-width:1366px) {
.wrap {
	width:99.8%;
}
.logo {padding-right:3%;}
.logo img {
	width:240px;
}
.menu {	
	margin:18px 0 0 0;
}
.header-bottom {padding:0 0%;margin:0;}
.header-bottom-left {
	width:85%
}
.header-bottom-right {
	margin:22px 0 15px 0;
	
}
.search input[type="text"] {
	width: 100px;
}
.search input[type="text"]:focus {
	width: 100px;
}
.main div.p_list {
width: 99%;
}
.main div.p_detail {	
	margin:25px 15px;
}

.main div.p_detail h2{
	margin:0 0px 15px 0px;
}
.main div.p_detail div.p_left{

}

/*首頁商品列表---------------*/
.span4 {
width: 30%;/*3張*/
margin-left:1.5%;
margin-right:1.5%;
}

/*商品頁商品列表---------------*/
.span5 {
width:23.25%;/*解析度1366時一列4張*/
height:290px;
}

.span6 {
width:19.8%;
}
.span6 img{
	max-width:90%
}

.view .mask {
   top:80px;
   padding:0 0px 0 25px;
   left:0;
}
.about_left {
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 0 0;
}
.about_right {
	float:right;
	margin:0 1% 0 0;	
	width:43%;
}
.info_left {	
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 300px 0;
}
.contact_left {	
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 190px 0;
}
.c_bottom{
padding:20px 10px 10px 10px;
}

.span_1_of_2 {
	width:21%;
	padding:0 0% 0 1%;
}

.span_1_of_3 {
	width:22%;
	padding:0 0% 0 4%;
}
}

/*--螢幕解析度小於1280px時，使用以下這段-----------------*/
@media (max-width:1280px) {
.wrap {
	width:100%;
}
.logo {padding-right:1%;}
.logo img{
	width:220px;
}
.menu {	
	margin:18px 0 0 0;
}
.header-bottom {padding:0 0%;margin:0;}
.header-bottom-left {
	width:85%;
}
.header-bottom-right {
	margin:20px 0 12px 0;
	
}
.h_nav ul li a {
	font-size:14px;
	margin-bottom:5px;}

.h_nav2 ul li a {
	font-size:14px;
	margin-bottom:5px;
}
.search input[type="text"] {
	width: 100px;
}
.search input[type="text"]:focus {
	width: 100px;
}

.main div.p_list {
	
}
.main div.p_detail {
	margin:25px 0px;
}
.main div.p_detail h2{
	margin:0 10px 15px 10px;
}

/*首頁商品列表---------------*/
.span4 {
width: 30%;/*3張*/
margin-left:1.5%;
margin-right:1.5%;
}

/*商品頁商品列表---------------*/
.span5 {
width:23.2%;/*解析度1366時一列4張*/
height:290px;
}
.span6 {
width:24.8%;
}
.span6 img{
	max-width:85%
}
.view .mask {
   top:60px;
   padding:0 0px 0 20px;
   left:0;
}
.view h2 {
   font-size:15px;
   font-weight:bold;
   line-height:26px;
}

.about_left {
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 50px 0;
}
.about_right {
	float:right;
	margin:0 1% 0 0;	
	width:45%;
}

.info_left {	
	width:45%;
	margin:25px 30px 20px 10px;
	padding:0 50px 320px 0;
}
.contact_left {	
	width:45%;
	padding:0 50px 220px 0;
}
.span_1_of_2 {
	width:21%;
	padding:0 0% 0 1%;
}

.span_1_of_3 {
	width:22%;
	padding:0 0% 0 4%;
}
}

/*--螢幕解析度小於1024px時，使用以下這段-----------------*/
@media (max-width:1024px) {
.wrap {
	width:100%;
}
.logo {padding-right:1%;}
.logo img{
	width:200px;
}
.menu {	
	margin:13px 0 0 0;
}
.header-bottom {padding:0px 0px;margin:0;}
.header-bottom-left {
	width:85%
}
.header-bottom-right {
	margin:15px 0 0px 0;	
}

.search input[type="text"] {
	width:94px;font-size:14px;height:15px;line-height:15px
}
.search input[type="text"]:focus {
	width:94px;
}

.col_1_of_f_1 {
	float:left;
	margin:5px 0 5px 0;
}

.span_1_of_1 {
	width:100%;
}
.span_1_of_2 {
	width:auto;
	padding:0 3% 0 1%;
}
.span_1_of_2 img {
	width:170px;
}

.span_1_of_3 {
	width:23%;
	padding:0 0% 0 3%;
}
.company_address {
	border-left: 4px solid #45636D;
	padding:6px 8px;
}
.company_address h3 {
	font-size: 14px;
	color: #333;
	line-height:20px;
	padding:0;
	margin:0
}
.company_address p {
	font-size:12px;
	color: #333;
	line-height:20px;
}
.h_nav ul li a {
	font-size:14px;
	margin-bottom:5px;}

.h_nav2 {
	margin:0 0 0 0;float:none;
}
.h_nav2 ul li a {
	font-size:14px;
	margin-bottom:5px;
}
.h_nav2:last-of-type{margin:0px;}


.main {
	margin:1% 0% 3% 0%;
}
.main div.p_list {

}

/*@media (max-width:1024px)*/

/*首頁商品列表---------------*/
.span4 {
width: 30%;/*3張*/
margin-left:1.2%;
margin-right:1.2%;
}

/*商品頁商品列表---------------*/
.span5 {
width:31.1%;/*解析度1024時一列3張*/
height:290px;
}
.span6 {
width:24.7%;
}

.span6 img{
	max-width:85%
}
.view .mask {
   width:45%;
   top:60px;
   padding:0 0px 0 15px;
   left:0;
}
.view h2 {
   font-size:14px;
   font-weight:bold;
   line-height:26px;
}
.view a.info{
	font-size:14px;
	margin-top:10px;
}
.about_left2 {
	width:45%;
	margin:0px 3% 20px 0%;	
	padding:0 35px 0 0;
	top:-75px;
}

.about_right2 {
	float:right;
	margin:0 1% 0 0%;	
	width:47%;
}

.about_left {
	width:43%;
	margin:25px 20px 20px 5px;
	padding:0 40px 50px 0;
}
.about_left iframe{
height:300px;
width:100%;
}
.about_right {
	float:right;
	margin:0 1% 0 0;	
	width:47%;
}

.info_left {	
	width:43%;
	margin:25px 20px 20px 5px;
	padding:0 40px 450px 0;
}
.contact_left {	
	width:43%;
	margin:25px 20px 20px 5px;
	padding:0 40px 360px 0;
}
/*--上方橫幅 Banner 1024px------------------------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{height: 160px;background-size:cover;}
.bn-about{background: #6B683D url(../images/bn_about.jpg) no-repeat 50% 0%;}
.bn-brand{background: #4B5C6E url(../images/bn_brand-info.jpg) no-repeat 50% 0%;}
.bn-contact{background: #3B4858 url(../images/bn_contact.jpg) no-repeat 50% 0%;}
.bn-dm{background: #EBECEE url(../images/bn_dm.jpg) no-repeat 50% 0%;}
.bn-news{background: #2C2C2C url(../images/bn_news.jpg) no-repeat 50% 0%;}
.bn-products{background: #4B5C6E url(../images/bn_products.jpg) no-repeat 50% 0%;}
.bn-recommend{background: #2C2C2C url(../images/bn_recommend.jpg) no-repeat 50% 0%;}
.da-slide{
	top: 40px;
	left: -80px;
}

}
/*--螢幕解析度介於769~1023px時，使用以下這段-----------------*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
.header-bottom-left {width:82%}
.header-bottom-right {margin:20px 5px 0px 0;}
.search {display:block;}
.dropsearch{display:none;}	
}

/*--螢幕解析度小於768px時，使用以下這段-----------------*/
@media (max-width: 768px) {	
.wrap {
	width:100%;
}
.header-bottom-left {
	width: 100%;
	float: none;
}

.header-bottom-right {
	width:97%;
	position:absolute;
	top:0px;
	right:0;
	margin:0;
	display:block;
}

.logo {
	margin:5px auto !important;
	float:none;
	text-align: center;
	position:absolute;
	top:0;
	right:0;
	left:0;
	z-index:10;
	width:220px;
}
.logo img{
	width:220px;
}
.menu {
	float: none;
	margin:0;
	padding-top:0px;
	top:0px;
	left:0;
	width:100%;
}

.search {display:none;}
.dropsearch{display:block;}
/*------------------------------------------------*/
/** 手機版搜尋 bar **/
#topnav {
  display: block;
  float: right;
  height:50px;
  padding:5px 0 12px 0;
  margin-top:2px;
}
#topnav ul {list-style: none; }
#topnav ul li {
  float: left;
}
#topnav ul li a {
  display: block;
  float: left;
  font-size: 22px;
  line-height:60px;
  padding:0 8px;
  margin-right: 8px;
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#topnav ul li a:hover {
  color: #458ba7;
}

#topnav ul li a#searchtoggl {
  margin: 0;
  padding:5px 14px 0 14px;
}

/** hidden search field **/
#searchbar {
  display: none;
  float:right;
  width: 100%;
  height: 45px;
  line-height: 45px;
  right:0px;
  left:0;
  margin:5px 0 0 0;
  border-top: 1px solid #d8d8d8;
  padding-left:50px;
  padding-right:10px;
  z-index: 9999;
  background: #fff;  
  -webkit-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}

#s {
  display: block;
  width:85%;
  border: 0;
  outline: none;
  padding:15px 0;
  margin:0;
  height: 45px;
  line-height: 45px;
  font-size:20px;
  color: #ccc;
}
#searchsubmit {
  display: block;
  float:right;
  margin:6px 0 5px 0;
  background: none;
  color: #717171;
  border: 0;
  outline: none;
  cursor: pointer;
}
/*------------------------------------------------*/
.footer-top {
	border-top:4px solid #dcdcdc;
	padding:8px 0;
}

.col_1_of_f_1 {
	float: none;
	margin:5px 0 5px 0;
}

.span_1_of_1 {
	width: 100%;
}
.span_1_of_2 {
	width: 100%;
	padding:0;text-align:center
}
.span_1_of_2 img {
	width:150px;
}
.span_1_of_3 {
	width: 100%;
	padding:0
}

.company_address {
	border-left:none;
	border-top: 2px solid #45636D;
	padding:8px 20px;
}
.company_address h3 {
	font-size: 14px;
	color: #333;
	line-height:20px;
	padding:0;
	margin:0
}
.company_address p {
	font-size:12px;
	color: #333;
	line-height:20px;
}
.h_nav h4 {
	font-size:15px;
	margin-bottom:5px;
	padding-top:10px;
}
.h_nav ul li a {
	font-size:13px;
}

.main {
	margin:1% 0 3% 0;width:100%;
}
.main div.p_list {
width:98%;
}
/* @media (max-width:768px)*/
/*.span5 {
width:210px;
}*/

/*首頁商品列表---------------*/
.span4 {
width:30.9%;margin:0 1% 20px 1%;
height:220px
}

/*商品頁列表---------------*/
.span5 {
width:30.3%;/*3張*/
}

.span6 {
width:33%;
}

.span6 img{
	max-width:85%
}
.view .mask {
   top:80px;
   padding:0 5px 0 5px;
   left:0;
}
.view h2 {
   font-size:14px;
   line-heught:20px;
}
.view a.info {
   font-size:14px;
   margin-top:15px;
}

.about_left2 {
	width:98%;
    float:none;
	border-right:none;
	text-align:center;
	top:0px;margin-left:0%	
}

.about_right2 {
	float:none;
	margin:0 0 10% 0%;	
	width:98%;
}

.about_left {
	width:100%;
	float:none;
	border-right:none;
	text-align:center;
	margin:25px 20px;
	padding:0 0px 0px 0;
}
.about_left img {
	max-width:80%;
	width:80%;
}

.about_left iframe{
height:450px;
width:90%;margin-right:50px;
}
.about_right {
	float:none;
	margin:0 1% 0 1%;	
	width:98%;
}

.about_right div.treif_logo span.link {
	text-align:left;
	padding:5px 5px;
}
.info_left {	
	width:100%;
	float:none;
	border-right:none;
	text-align:center;
	margin:25px 20px;
	padding:0 0px 0px 0;
}
.info_left img {
	max-width:80%;
	width:80%;
}
.contact_left {	
	width:100%;
	float:none;
	border-right:none;
	text-align:center;
	margin:25px 20px;
	padding:0 0px 0px 0;
}
.contact_left img {
	max-width:80%;
	width:80%;
}

.c_map div.c_map_l{
text-align:left;
padding:10px 20px;
float:none;
width:85%;
margin:0 auto;
}
.c_map div.c_map_l h2{
font-size:17px;
}
.c_map div.c_map_l span.address{
line-height:28px;
font-size:14px;
margin-left:8px;
display:inline-block;
}
.c_map div.c_map_r{
text-align:left;
padding:0px;
float:none;
width:100%;
border-left:none;
border-top:1px solid #a0a0a0;
}

.c_map div.c_map_r iframe{
width:100%;
height:400px;
border:none;
}
/*--上方橫幅 Banner 768px------------------------------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{height: 160px;background-size:cover;}
.da-slide{left: -65px;}
}


@media (max-width: 736px) {
.main{
	margin:1% auto;
}
.main div.p_list {
	margin:20px 1%;
	width:98%;
}
.main div.dm_list {
	margin:20px 2%;
	width:96%;
}
.span4{margin:0 1.2% 0 1.2%;width:47%;height:auto}
.span5 {
width:46.63%;/*2張*/
}
.span6 {
width:49.5%;
}
}

/*--螢幕解析度小於640px時，使用以下這段-----------------*/
@media (max-width:640px) {
.wrap {
	width:100%;
}
.header-bottom{padding-bottom:5px}
.header-bottom-left {
	width: 100%;
	float: none;
}
.header-bottom-right {
	width:97%;
	position:absolute;
	top:0px;
	right:0;
	margin:0;
	display:block;
}
.logo img{
	width:210px;
}
.menu {
	float: none;
	margin:10px 0 0 0;
	padding-top:10px;
	top:0px;
	left:0;
	width:100%
}

.search {display:none;}
.dropsearch{display:block;}

/*手機版搜尋--------------------*/
#topnav {
  display: block;
  float: right;
  height:50px;
  padding:5px 0 12px 0;
  margin-top:2px;
}
#topnav ul li a#searchtoggl {
  margin: 0;
  padding:0px 14px 0 14px;
}
/*---------------------------------------*/

.span_1_of_2 {
	width: 100%;
}
.col_1_of_2 {
	float:none;
	margin:0;
}
.main{
	margin:1% auto;
}
.main div.p_list {
	margin:20px 2%;
	width:96%;
}
.main div.dm_list {
	margin:20px 2%;
	width:96%;
}
/*@media (max-width:640px)*/
/*.span5 {
width:290px;float:none;
}*/

.span4{margin:0 1.2% 0 1.2%;width:47%;}
.span5 {
width:45.8%;
}
.span6 {
width:49.5%;
}
.span6 img{
	max-width:85%
}
.view .mask {
   top:80px;
   padding:0 0px 0 20px;
   left:0;
}
.view h2 {
   font-size:14px;
   line-heught:18px;
}
.view a.info {
   font-size:14px;
   margin-top:10px;
}
.about_left2 {
width:96%;
margin-left:0%	
}

.about_right2 {
	float:none;
	margin:0 1% 10% 0%;	
	width:98%;
}
.about_left {
	width:100%;	
	border-right:none;
	margin:20px 0;
	padding:0 0px 0px 0;
}
.about_left img {
	max-width:90%;
	width:90%;
}
.about_left iframe{
height:400px;
width:96%;margin:0px 2%;
}
.about_right {
	float:none;
	margin:0 1% 0 1%;	
	width:98%;
}

.info_left {	
	width:100%;	
	border-right:none;
	margin:20px 0;
	padding:0 0px 0px 0;
}
.info_left img {
	max-width:90%;
	width:90%;
}
/*--上方橫幅 Banner 640px ----------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{height: 160px;background-size:cover;}
.da-slide{
	left: -50px;
}
.da-slide h2{
	font-size:26px;
}

.da-slide p {
	font-size:22px;
}

}

/*--螢幕解析度小於480px時，使用以下這段-----------------*/
@media (max-width:480px) {
.wrap {
	width:100%;
}
.header-bottom{padding-bottom:0;}
.header-bottom-left {
	width: 100%;
	float: none;
}
/*.header-bottom-right {
	width: 100%;
	float: none;
	margin-top: 5px;
}*/

.header-bottom-right {
	width:97%;
	position:absolute;
	top:0px;
	right:0;
	margin:0;
	display:block;
}
.logo img{
	width:180px;
}
.menu {
	margin:5px 0 0 0;
	padding-top:10px;
}
/*---手機版搜尋 bar ---------------------*/
#topnav {
  display: block;
  float: right;
  height:35px;
  padding:0px 0 25px 0;
  margin-top:0px;
}
#topnav ul {list-style: none; }
#topnav ul li {
  float: left;
}
#topnav ul li a {
  display: block;
  float: left;
  font-size: 22px;
  line-height:60px;
  padding:0 8px;
  margin-right: 8px;
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#topnav ul li a:hover {
  color: #458ba7;
}

#topnav ul li a#searchtoggl {
  margin: 0;
  padding:5px 14px 0 14px;
}

/** hidden search field **/
#searchbar {
  display: none;
  float:right;
  width: 96%;
  height: 45px;
  line-height: 45px;
  right:0px;
  left:0;
  margin:0px 0 0 0;
  border-top: 1px solid #d8d8d8;
  padding-left:15px;
  padding-right:5px;
  z-index: 9999;
  background: #fff;  
  -webkit-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
  box-shadow: -1px 2px 2px rgba(0,0,0,0.2);
}

#s {
  display: block;
  width:85%;
  border: 0;
  outline: none;
  padding:5px 0;
  margin:0;
  height: 45px;
  line-height: 45px;
  font-size:18px;
  color: #ccc;
}
#searchsubmit {
  display: block;
  float:right;
  margin:6px 0 5px 0;
  background: none;
  color: #717171;
  border: 0;
  outline: none;
  cursor: pointer;
}
/*---------------------------------------*/
.text input[type="text"], .text textarea {
	width:93.7%;
}

.span_1_of_2 {
	width: 100%;
}
.col_1_of_2 {
	float:none;
	margin:0;
}

.span_1_of_3 {
	width:100%;
}
.col_1_of_3 {
	float: none;
	margin: 1% 0 1% 0%;
}

.span_1_of_3 {
	width: 100%;
}
.col_1_of_f_2 {
	float:none;
	margin: 1% 0 1% 0;
}

.sub-nav{
font-size:11px;
text-align:left
}
.main{margin:0px auto;}
.main div.p_list {
	margin:20px auto;text-align:center
}

.span4{margin:0 1.5% 0 1.5%;width:97%;height:auto;}
/*@media (max-width:480px)*/
/*.span5 {
width:280px;float:none;
}*/
.span5 {
width:85%;height:auto;float:none;
}

.span6 {
width:85%;float:none;
}
.span6 img{
	max-width:85%
}
.x01 {margin:0 auto}
.view .mask {
   top:80px;
   padding:0 0px 0 10px;
   left:0;
}
.view h2 {
   font-size:13px;
   line-height:18px
}
.view a.info {
   font-size:13px;
   margin-top:10px;
}

.contact_left {
	text-align:center;
	margin:25px 0px;
}
.c_bottom{
padding:15px 0px 10px 0px;
}
.c_map{
width:97%;
margin-right:2%
}
.c_map div.c_map_l{
padding:10px 0px;
float:none;
width:88%;
margin:0 0 0 10px;
}
.c_map div.c_map_l h2{
font-size:15px;
}
.c_map div.c_map_l span.address{
font-size:13px;
margin-left:8px;
}

/*--上方橫幅 Banner 480px---------------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{height: 100px;background-size:180% 100px;}
.da-slide{top:25px;	left: -30px;}
.da-slide h2{font-size:22px;padding:0;}
.da-slide p {font-size:18px;}
}

/*--螢幕解析度小於320px時，使用以下這段-----------------*/
@media (max-width:320px) {
.wrap {
	width:100%;
}
.header-bottom-left {
	width: 100%;
	float: none;
}

.logo {
	margin-right:0;
	float:none;
	text-align: center;
}
.logo img{
}
.menu {
	float: none;
	margin-top: 6px;
}
/*
.search {
	margin:5px 0px;
}
.search input[type="text"] {
	width:130px;
}*/

.span_1_of_2 {
	width: 100%;
}
.col_1_of_2 {
	float:none;
	margin:0;
}
.span_1_of_3 {
	width:100%;
}
.col_1_of_3 {
	float: none;
	margin: 1% 0 1% 0%;
}
.span4{margin:0 1%;width:98%}
/*@media (max-width:320px)*/

.c_map{
width:99%;
margin-right:0%
}

/*--上方橫幅 Banner 320px---------------------------------*/
.bn-about,.bn-brand,.bn-contact,.bn-dm,.bn-news,.bn-products,.bn-recommend{height: 100px;background-size:180% 100px;}
.da-slide{top:25px;	left: -30px;}
.da-slide h2{font-size:18px;padding:0;}
.da-slide p {font-size:15px;}
}