@charset "utf-8";
body { width:100%; height:100%; margin:0; padding:0; font-family:"微軟正黑體";  font-size: 14px; line-height: 20px;}
html { width:100%; height:100%; }

.warpper { max-width:640px; margin:0 auto;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */
a { text-decoration:none;}
img { border:0;}


header { height:0px; padding-top:0px; position:inherit;}
.head-main {height:0; position:inherit;}

.head-main .logo { position:absolute; top:0; left:5px;width:140px;  }
.head-main .logo img { width:140px; height:auto;}
.head-tool { right:inherit; top:7px;left:150px;}

.home { display:none; }
a.home_w { display: block; position:absolute; top:5px; left:10px; width:30px; height:auto; padding: 0; }
a.home_w img { width: 100%; height: auto;}

.m-banner { width:100%; overflow:hidden; position: relative; z-index:1000;}
.m-banner img { position:absolute; top:-50%;  }
.banner { margin:110px 0 0 0; }
.banner img { width:100%;}
.oproject { display: inline; color:#900;}

@media screen and (max-width: 450px) {
.head-main .logo { position:absolute; top:0; left:5px;width:110px;  }
.head-main .logo img { width:110px; height:auto;}
.head-tool { right:inherit; top:7px;left:120px;}

} 




/***** 訂單列表  *****/
.order-search { padding-left:0px;}
ul.order-list li.th { display:none;}
.order-list { padding-left:0px;} 
.order-list-img, .order-list-img02 { float:left; width:100%; font-size:15px; text-align:center;}
   .order-list-img { height:auto;}
  .order-list-img img.pro-photo { width:86%; max-width:180px; height:auto; padding:2%; border:1px #CCC solid; margin:5%; text-align:center;}
  .order-list .order-list-td { font-size:15px; color: #333; text-align: left;}
  
  
.order-list-name { width:100%;  padding-top:0PX;  font-size:15px; text-align:center;} 
.order-list-price { float:left; width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.order-list-quantity, .order-list-quantity02 { float:left; width:100%; padding-top:0PX;  font-size:15px; text-align:center;}
.order-list-subtotal, .order-list-subtotal02 { float:left; width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.order-list-del { float:left; width:100%;  padding:20PX 0;  font-size:15px; text-align:center;}
.order-list-del a { padding: 5px 10%;}

.order-list .portal { width:100%; text-align: center;}
.order-list .freight { width:100%;  text-align: center;}
.order-list .oproject { font-size:15px; color:#000; display: inline; }
.order-ditaile-info { padding:0 0 0 0px; }


/*****  FAQ  *****/
.faq-right{ padding:36px 15px 10px 15px; }


/*****  內頁BANNER  *****/
.inside-banner { margin:110px 0 0 0;}


/*****  購物車  *****/
ul.shopping-car-list li.th { display:none;}
.shopping-car { padding:0px;} 
.shop-car-img { width:100%; height:auto; text-align:center; border-bottom:1px #D3D3D3 dotted; margin-bottom:10px; display:block;}
  .shop-car-img img.pro-photo { width:86%; max-width:180px; height:auto; padding:10px; border:1px #CCC solid; margin:10px auto; text-align:center; display:block;}
  
.shop-car-name { float:none; display:block;  width:100%;  padding-top:0PX;  font-size:15px; text-align:center;} 
.shop-car-price {  width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.shop-car-quantity {  width:100%; padding-top:0PX;  font-size:15px; text-align:center;}
.shop-car-subtotal{ width:100%;  padding-top:0PX;  font-size:15px; text-align:center;}
.shop-car-del {  font-size:15px; text-align:center; width:50px;}
.shop-car-del a { padding: 5px 10%;}

.shopping-car .portal { width:100%; text-align: center;}
.shopping-car .freight { width:100%;  text-align: center;}
.shopping-car .oproject { font-size:15px; color:#000; display: inline; }

.checkout-box { background:#F4F3F0; padding: 10px; margin-left:0px; border-bottom:2px #FFF dotted; }


/*****  產品專區  *****/
.pro-banner ul{ list-style:none; padding:0; margin:0; display: flex;
  flex-wrap:wrap; }
.pro-banner ul li{  flex:1;flex-basis:calc(50% - 20px);margin:30px 1%;}

.pro-banner ul li:nth-child(1){margin:15px 10px;padding:30px 20px 70px 20px;}
.pro-banner ul li:nth-child(2){margin:15px 10px;padding:30px 20px 70px 20px;}
.pro-banner ul li:nth-child(3){margin:15px 10px;padding:30px 20px 70px 20px;}
.pro-banner ul li:nth-child(4){margin:15px 10px;padding:30px 20px 70px 20px;}


.pro-store-info {  padding:10px 0 10px 0px; }
.pro-list ul li {  width:49%;  }
.pro-detaile {}
.pro-detaile .pro-photo-box { padding:0 0px 0 0;}
.pro-qr-code { text-align:center; padding-bottom:20px;}
.pro-qr-code img { width:200px; height:auto;}
@media screen and (max-width: 380px) {
	.pro-list ul li {  width:92%;  }

} 

.pro-detaile-img-slogan{ display: block; border-bottom:2px #c75725 solid; background: url(../images/pro-detaile_bg.png) no-repeat right bottom; background-size:cover; margin:0 0 20px 0;}
.pro-detaile-img{flex:1;}
.pro-detaile-slogan{ flex:1; padding:15px; font-size:20px; color:#fff; }
h3.pro-introduce { margin:20px 10px;}

.cart-info .price { font-size:28px; text-align:center; display:block; padding:10px 0 20px 0;}
.cart-info .quantity {text-align: center;}
.cart-info .check-out { text-align:center; clear:both; display:block;}
.cart-info .check-out a { font-size:15px; width:100%; padding:10px 0px; margin-left:0px; display:block;}


.pro-detaile-box { display: block;}
.pro-detaile-box>div {  -webkit-flex: 1;  flex: 1;}
.pro-detaile-photo-box { width: 100%;}
.pro-detaile-spe-box { width: 100%; position: relative; padding-bottom: 0px;}

.cart-info { position: static; bottom: auto; }


/** 元素分類 **/
.element-classification{ padding:15px 0;}

.element-classification>ul{ padding:40px 10px 0px 10px; margin:20px 0px;}
.element-classification>ul>li{ flex-basis:48%; margin:1%; padding:5px;display: flex;justify-content:center; align-items:center; align-content:stretch;  }

/*****  知識內頁相關商品/元素  *****/
.r-pro-main{ padding:30px 50px 0 50px;}
.news-d{ display: block; border-radius:0 100px 0px 0px; padding:20px;}
.news-d-photo img.index-pro-img {border-radius:0 100px 0px 0px;}
.news-d .news-d-information{ flex:1;padding:25px 0 0 0; margin:0;}

/** 文章分類 **/
.article-classification>ul>li {width:47%; }

@media screen and (max-width: 380px) {
	.article-classification>ul>li {width:92%; margin:10px 1%; }

}
/*****  相關文章  *****/
.r-article{ padding: 20px 15px;}

/*** news-list  最新消息 ***/
.news-list li { border:1px #5e781c solid;flex-basis:98%; padding:1%; background:#fff url(../images/article-list_bg.png) no-repeat top right; background-size:110px; margin:1%; position:relative; }

@media screen and (max-width: 400px) {
.news-list li {  background:#fff ; }
.news-list li:hover{ background:#f7f9f2 ; }
}

/*****  聯絡我們  *****/
.contact-body { padding:0 0 0 0px;}
.contact-left { max-height:200px; overflow:hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.contact-left img { width:100%; height:auto; margin-top:10px;}

a.btn-send {padding: 5px 0;  width:49%; margin:5px 1% 0 0; display:block; float:left;}
a.btn-reset { padding: 5px 0; width:49%; margin:5px 0 0 1%; display:block; float:left;}
a.btn-send-over { padding: 3px  0px; color:#fff; width:100%; display:block; float:left; margin-top:5px;}

/*****  內頁架構  *****/
.page-main { padding: 0 0 0 0px; }
.left-menu-title { font-size:15px; border-top:1px #999 dotted;}

.classBox{padding:0 0 20px 0; margin:0 10px;}
ul.classLink{display:none;}
.m_classLink{display:block; position:relative; background-color:#f6e7e1; border:1px solid #c75725;}
.m_classLink a.main{display:block; background:none; font-size:15px; font-family:"微軟正黑體", "新細明體", sans-serif; color:#333; position:relative; padding:10px;}
.m_classLink a.main i{display:block; font-size:15px; background:#c75725; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #c75725; position:absolute; left:0; top:100%; z-index:999; box-sizing:border-box;}
.m_classLink ul li{margin:0; padding:0;}
.m_classLink ul li a{display:block; padding:15px 10px; border-top:1px solid #c75725; font-family:"微軟正黑體", "新細明體", sans-serif; font-size:15px; color:#222;}
.m_classLink ul li:first-child a{border:none;}
.m_classLink ul li a:hover{background:#f9f4f2;}


/*****  首頁產品  *****/
.index-pro ul li {  width:98%; padding:1%; text-align:center; float:left;}


/*****  首頁連結  *****/
.index-link ul li { float:left; width:50%; margin:0; padding:0; border:0;}

/*** news-list  最新消息 ***/
.i-news ul li { float:left; width:100%; padding:10px 15px 10px 50px; font-size:15px; line-height:1.8em; background:url(../images/i-news-icon.jpg) no-repeat 10px 48px; background-size:32px;  }

/** 內頁資料 **/
.contect-information{padding:5px 20px;  margin:26% 0 6% 0%; }
.font001{ font-size:30px; }
.font002{ font-size:30px; }

.about-contect{ background:rgba(0,0,0,.6);padding:20px; color:#fff; font-size:15px; text-align:center; max-width:700px; margin:14% 10px 5% 10px;}

/** 信條 **/
.credo-contect{ display: block;}
.credo-left ul li:after{ margin:64px 45px 0 -45px;}
.credo-left ul li:last-child:after{  margin:64px 45px 0 -43px;}
.credo-left ul li .credo-word{flex:1; text-align:left; padding:5px 0 0 0; margin:0 0 0 10px ; }
.credo-left ul li .credo-icon{ width:64px; margin:0 10px; }
.credo-right{flex:1.44; margin:0 10px;}

/** 品質 **/
.process ul li {  width:49%; padding:10px; text-align:center; display: inline-block;overflow:hidden;}
.process ul li:last-child{ width:99%;}
.process-photo img.index-pro-img {border-radius:150px; }
.process ul li:last-child .information{ padding:20% 15px 15px 15px; margin:-20% 0 0 0 ;background: #f1f0de; background:linear-gradient(-45deg, transparent 20px, #f1f0de 0) bottom right; background-size: 100% 100%; background-repeat: no-repeat;}
.process ul li:last-child .information .contect{height: auto;}
.process ul li:last-child .process-photo {  width:100%; position: relative; padding:0.4px 29%;}

@media screen and (max-width: 380px) {
.process ul li {  width:99%; padding:10px; text-align:center; display: inline-block;overflow:hidden;}
.process ul li .information .contect{height: auto;overflow-x:hidden;overflow-y:auto;}
.process-photo { padding:0.4px 10%;}
.process-photo img.index-pro-img {border-radius:200px; }
.process ul li:last-child .information{padding:46% 15px 15px 15px; margin:-46% 0 0 0 ;}
.process ul li:last-child .process-photo {  padding:0.4px 10%;}
.process ul li:after { content:"v"; display:block; position:absolute;bottom:3px; right: inherit; left:48%; top:inherit; color:#de5050; font-weight: normal; font-size:30px;font-family:"arial";  }

} 

/** 品質明細 **/
@media screen and (max-width: 600px) {
.process-detail-certificate ul li{padding:1%; margin:0; display: inline-block; width:49%;}
}
@media screen and (max-width: 460px) {
.process-detail-certificate ul li{padding:1%; margin:0; display: inline-block; width:99%;}
}

/** 認證 **/
@media screen and (max-width: 600px) {
.certification ul li { height:420px; }
}
@media screen and (max-width: 500px) {
.certification ul li { height:380px;}
}
@media screen and (max-width: 500px) {
	.line{ display:none;}
.certification { position:relative; padding:0;}
.certification ul li { float:left;  width:90%; padding:1%; margin:1% 5%; text-align:center; display: block;position:relative;height: auto; border-bottom:2px #adc32b dotted; }
.certification-photo {margin:0; }
.certification ul li:nth-child(odd){ padding:1%;}
.certification ul li .information .contect{ height: auto; }

}

/***  會員登入  ***/
h3.login-title { margin:10px 0 10px 0; font-family:"Times New Roman"; font-size:30px; line-height:30px; color:#9B9B9B; text-align:center;}
.login-tool {text-align:center; }
.icon-tool { width:40px; height:auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.member-signup { font-size:14px; color:#828282; line-height:20px; padding:5px 0; text-align:center;}

@media screen and (max-width: 530px) {
.contact-note {display:block;}
.contact-note-star-main {flex: 1;width: 100%;}
.contact-note-service {text-align:left;width: 100%;padding: 5px 0 0 0;}
}
/***  版面欄位  ***/
.main { padding:0;}
.col-m  { width:100%; margin-right:0%; float:none;}
.col-100 {}
.col-015, 
.col-020, 
.col-025, 
.col-030, 
.col-035, 
.col-040, 
.col-045, 
.col-050, 
.col-055, 
.col-060, 
.col-065, 
.col-070, 
.col-075, 
.col-080,
.col-085 { width:100%; margin-right:0%;}


.cor-015, 
.cor-020, 
.cor-025, 
.cor-030, 
.cor-035, 
.cor-040, 
.cor-045, 
.cor-050, 
.cor-055, 
.cor-060, 
.cor-065, 
.cor-070, 
.cor-075, 
.cor-080,
.cor-085 { width:100%;}

/** faq **/
.faq-contact{ position:absolute; top:30%;left:5px; border:2px #7bcace solid; padding:10px 30px 10px 15px ;background:#fff ; background: linear-gradient(-135deg, transparent 15px, #fff 0) top right, linear-gradient(-45deg, transparent 15px, #fff 0) bottom right; background-size: 100% 52%; background-repeat: no-repeat; border-radius:5px ;}  

nav { }

@media screen and (max-width: 640px) {
	.slicknav_menu { display:none;}
	.js #menu {	display:none;}
	.js .slicknav_menu {display:block;}
} 

 .menu { list-style:none;}
 .menu li { color:#fff; width:100%;  text-align:center; float:none;}
 
 
 
/*** 訂位區塊  ***/
.info-box { font-size:14px; color:#7E7E7E; line-height:20px;}

/***  定位-選項-時段  ***/
.order-opinion { width:100%; margin-right:0; float: none;}
.time { width:100%; float: none;}

.time ul li {margin:1% 1% 0 0; width:24%;}


/***  step  ***/
.step li { font-size: 18px; }
.step li span { height: 38px; padding: 5px 10px; }


/***  表單欄位  ***/
.form-box {}
.form-style01 { font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; padding:5px 3%; line-height:20px; width:93%;}
.input-main-style02 {  padding:5px 3%; width:93.3333%; }

.opinion { margin-bottom:5px; }
.opinion-left01 { float:left; width:100%; padding:5px 3%; border-right:0}
.opinion-right01 { float:left; width:7.5%; padding:0px 2%;}
.input-main-style01 { float:left; width:81%; margin:0; padding:5px 3%; -webkit-border-radius:5px 0px 0px 5px; -moz-border-radius:5px 0px 0px 5px; border-radius:5px 0px 0px 5px;}
.input-main-select {float:none; width:100%;}

.bottom-info-main { padding:0 20px;}
footer .copytight { max-width:1200px; margin:0 auto; padding:30px 10px; color:#fff; font-size:13px; text-shadow:-1px -1px 0px #7b6f48; line-height:24px; }
footer .copytight img.footer-logo { width:220px; height: auto; margin:0 auto 20px auto; display:block;} 

.select-style { font-size:15px; width:96%; line-height:20px; padding:5px 2%;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.input-style01, .input-main-style02, .input-main-style03 { float:none; width:100%;}
.checkout-box h3 { margin-right:0;}

.cart-btn { height: auto; overflow: auto;}
a.btn-send-over { margin-left:0px;}

/* 頁次 */	
.page{ height:100px;}
.page br { display: block;}

/******  底部資訊  ******/

.bottom-info-main h3 { font-size:15px; color:#fff; border-bottom:1px #d4a0a0 solid; line-height:40px; margin-top:0; }

footer .copytight { text-align:center; text-shadow:0 0 0 #2D2D2D; }
footer .copytight .footer-logo { float: none;  margin-right:0px; } 


