@import url("css2.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
.clear{ clear:both;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , Microsoft YaHei;}
button{cursor:pointer;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
.blank30{ height:30px; clear:both;}
.blank10{ height:10px; clear:both;}
body{font-family:arial,"微軟正黑體";  font-size:16px; line-height:28px; color:#333333;overflow-x: hidden;
}
.xs_wap{ display: none;}
.xs_web{ display: block;}
#xs_wap{ display: none;}
#xs_web{ display: block;}
.container{width:96%; margin-left:auto; margin-right:auto ; max-width:1200px; min-width:280px;}
.container2{width:96%; margin-left:auto; margin-right:auto ; max-width:1440px; min-width:280px;}

#btn {
  width:40px;
  height: 40px;
 position:fixed;
  right:10px;
  bottom:20px;
  background:url(../images/top.png)  no-repeat  left top ;
  margin-left: 610px;
}
#btn:hover {
  background:url(../images/top.png)  no-repeat  left -40px;
}

/**** top ****/
#nav{background-color:#EC6E00;width:100%;}
#header{ position:relative;}
.wrap{width:100%; margin-left:auto; margin-right:auto ; max-width:1440px; min-width:280px;}
#logo{float: left;width:20%;}
#logo img{ margin-top:10px;width:100%;max-width:260px;margin-top:30px;margin-bottom:30px;}
#navigation{margin-left:8%;float: right;width:50%;margin-top:40px;margin-bottom:40px;}
.navmid{ float: right;width:22%;margin-top:40px;margin-bottom:40px;}
.nav_find{width:28px;}
.nav_li{height:40px;margin-left:5px;margin-right:5px;}
.nav_cart{width:40px;}
.nav_user{width:30px;margin-left:30px;margin-right:3px;}
.navmid ul{text-align: right;}
.navmid li{display:inline-block}
.navmid li{flex-direction:column-reverse}
.navmid li a span{color:#fff;font-size: 20px;line-height: 40px;font-weight: lighter;}
.navmid li a{color:#fff;font-size: 20px;font-weight: bold;}

#navigation li{ display:inline-block; position:relative;}
#navigation li > a{display:block; padding:0px 0px; font-weight: bold; color:#fff; transition:all .3s; text-align:center; text-decoration:none;font-size:18px;}
#navigation li:hover > a ,
#navigation li.active > a{color:#fff}
#navigation li .sub-menu{position:absolute; left:0; top:100%; display:none;  z-index:99; background:#F1F1F1;  width:100%; }
#navigation li .sub-menu a{display:block;font-size:15px; color:#000; line-height:40px; text-align:left;margin:0 auto;width:100%; text-align: center;}
#navigation li .sub-menu a:hover{background:#FFB600; color:#fff;}
/* Boderbottom   */
.borderBottomEffect a {
  display:block; padding:5px 0px;font-weight: bold; color:#fff; transition:all .3s; text-align:center; text-decoration:none;font-size:20px;margin-left:20px;margin-right:20px;
}
.borderBottomEffect a::after {
  position: absolute;top: 100%;left: 0;width: 100%;height: 4px;/*background: rgba(0,0,0,0.1); */background: #fff;
  content: '';opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;-moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);transform: translateY(10px);
}
.borderBottomEffect a:hover::after,
.borderBottomEffect a:focus::after {opacity: 1;-webkit-transform: translateY(0px);-moz-transform: translateY(0px);transform: translateY(0px);
}

@media screen and (max-width:1440px){
  .container2{max-width:1200px; min-width:280px;}
  .wrap{max-width:1200px; min-width:280px;}
  #logo{width:18%;}
  #navigation{margin-left:5%;width:51%;}
  .navmid{width:26%;}
  .borderBottomEffect a {margin-left:14px;margin-right:14px;}
}

@media screen and (max-width:1200px){
  .container2{max-width:980px; min-width:280px;}
  .wrap{max-width:980px; min-width:280px;}
  #logo{width:14%;}
  #navigation{margin-left:3%;width:57%;margin-top:30px;margin-bottom:30px;}
  .navmid{width:25%;margin-top:30px;margin-bottom:30px;}
  #navigation li > a{font-size:16px;}
  .borderBottomEffect a {font-size:18px;}
  .nav_find{width:20px;}
  .nav_li{height:30px;}
  .nav_cart{width:30px;}
  .nav_user{width:20px;margin-left:20px;}
  .navmid li a span{font-size: 18px;}
  .navmid li a{font-size: 18px;}
}


/* mobile */
#nav_wap{position: fixed; top: 0; width:100%;left: 0;right:0;background-color: #EC6E00; z-index: 10000;height:93px;display: none;padding-top:10px;padding-bottom:10px;height:70px;-webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);-moz-box-shadow: 0 0 15px rgba(0,0,0,.2);box-shadow: 0 0 15px rgba(0,0,0,.2);}
.wap_logo{text-align: center;width:100%;position: absolute;}
.wap_logo img{max-width:50px;width:100%;}

#mobi-btn{position:absolute; top:18px; left:15px; display:block; width:34px; height:34px;background-image: url(../images/menu.png);cursor: pointer;}

#gwc{position:absolute; top:18px; right:15px; display:block; width:40px; height:40px;cursor: pointer;}
#gwc img{width:40px;}

#mobi-btn.active{ background-image: url(../images/close.png);}
#mobile{display:none;padding-bottom:30px;}
#mobile ul{width:100%;margin:0 auto;margin-top:30px;background-color:#000;padding-top:10px;padding-bottom:10px;}
#mobile ul li > a{display:block;   font-size:18px; color:#fff; line-height:60px; text-align:center;letter-spacing: 5px; font-weight: bold;width:90%;margin:0 auto;border-bottom:solid 1px #666;}
#mobile ul li > a span{ display:none}
#mobile ul li > a:hover{color:#fff; }
#mobile ul li .sub-menu{background:#F1F1F1;display:none;}
#mobile ul li .sub-menu a{display:block;  font-size:16px; color:#000; line-height:50px; text-align:left;letter-spacing: 5px;font-weight: bold;text-align: center;}
#mobile ul li .sub-menu a:hover{ background-color: #fff;}
#mobile ul li:last-child a{border-bottom:none;}

.blank60{height:80px;}
@media screen and (max-width:1001px){
  #nav{display:none;}
  #nav_wap{display:block;}
  #xs_wap{ display: block;}
  #xs_web{ display: none;}
  .blank60{height:60px;}

}

/**** 主體開始 ****/

/*banner*/
.banner{background-image: url(../images/bgall.jpg);padding-top:80px;padding-bottom:80px;background-color:#DCDEDD;}
.txt01{text-align: center;}
.txt01 img{width:100%;max-width: 150px;}
.txt02{margin-top:30px;text-align: center;}
.txt02 img{width:100%;max-width:312px;}
.txt03{margin-top:30px;text-align: center;}
.txt03 img{width:100%;max-width:470px;}
.txt04{margin-top:40px;text-align: center;}
.txt04 img{width:100%;max-width:950px;}
/*about*/
.about{background-color:#DCDEDD;padding-bottom:80px;background-image: url(../images/bgall.jpg);}
.abouttitle h3{text-align: center;font-size: 24px;color:#ED6E01;letter-spacing: 3px;font-weight: bolder;}
.abouttitle p{color:#ED6E01;letter-spacing: 3px;font-weight: bolder;text-align: center;font-size: 18px;margin-top:50px;}
.about article{font-weight: bolder;text-align: center;font-size: 18px;margin-top:10px;line-height: 36px;}
/*product*/
.product{padding-top:30px;padding-bottom:80px;background-color:#DCDEDD;}
.categorylist{margin-top:50px;}
.categorylist h3{font-size: 24px;color:#ED6E01;letter-spacing: 3px;font-weight: bolder;}
.categorylist ul{margin-top:20px;}
.categorylist ul li{border-bottom:solid 1px #888;padding-bottom:10px;padding-top:10px;font-size: 18px;font-weight: bolder;position: relative;}
.categorylist ul li a{font-size: 18px;font-weight: bolder;color:#000;line-height: 36px;display: block;}
.categorylist ul li i{position: absolute;right:15px;top:10px;font-size: 24px;}


.productlist{margin-top:50px;}
.productlist h3{font-size: 20px;letter-spacing:2px;text-align: right;}
.proimg{height:0; width:100%;  margin:0%;position: relative; padding-bottom:100%;  overflow: hidden;background-color: #666666;margin-top:40px;}
.proimg img{cursor: pointer;position: absolute;  left: 0; top: 0;width: 100%  ; height: 100%;display: block;}
.protitle{margin-top:20px; text-align: center;}
.protitle a{color:#000;font-size:16px;display: block;padding-top:10px;padding-bottom:10px;border:solid 1px #9FA1A0;}
.protitle a:hover{background-color:#ED6E01;color:#fff;border:solid 1px #000;}

/*** indexad ***/
.indexad{background-color:#DCDEDD;padding-bottom:40px;background-image: url(../images/bgall.jpg);padding-top:80px;}
.indexad article{font-weight: bolder;text-align: center;font-size: 18px;margin-top:10px;line-height: 36px;}
.adpic img{width:100%;max-width: 290px;display: block;margin:0 auto;margin-top:50px;}
.adkang{width:80%;margin:0 auto;max-width: 900px;}

/*** qa ***/
.qa{padding-top:40px;padding-bottom:50px;}

.qa h3{font-size: 24px;color:#ED6E01;letter-spacing: 3px;font-weight: bolder;}
/*
FAQ Area Style
======================================================*/
.accordion-item {
  background-color:transparent;
  border: 1px solid rgba(0,0,0,.125);
}
.faq-accordion { position: relative; z-index: 1;margin-top:30px;}
.faq-accordion .accordion {list-style-type: none;padding-left: 0;margin-bottom: 0;}
.faq-accordion .accordion .accordion-item {border-radius: 0;display: block; 
border: none; border-bottom:solid 1px #000;}
.faq-accordion .accordion .accordion-item:last-child {margin-bottom: 0;}
.faq-accordion .accordion .accordion-title {padding-left:10px;color: #111111; text-decoration: none;position: relative;display: block;font-size:18px;font-weight: 500;z-index: 1;padding-top:20px;padding-bottom:20px;font-weight: bolder;}


.faq-accordion .accordion .accordion-title i {position: absolute;right:10px;top: 26px;
-webkit-transition: all ease 0.5s;transition: all ease 0.5s;color: #000;
  display: inline-block;width:25px;height:25px;text-align: center;line-height:25px;font-size:25px;}
.faq-accordion .accordion .accordion-title.active i {-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.faq-accordion .accordion .accordion-title.active i::before { content: "\ea78";}
.faq-accordion .accordion .accordion-content {display: none;position: relative;padding-left: 80px;background-color: #fff;padding-top:20px;padding-bottom:20px;border-top:solid 1px #CECED1;padding-right:80px;
  line-height: 36px;
}
.faq-accordion .accordion .accordion-content.show {display: block;}


/*footer*/
footer{background-color:#EC6E00;padding-top:80px;padding-bottom:80px;}
footer h1{text-align: center;}
footer h1 img{width:100%;max-width: 480px;}
footer nav{margin-top:50px;text-align: center;}
footer nav a{margin-left:20px;margin-right:20px;color:#fff;font-size: 24px; font-weight: bolder;line-height:48px;}
footer nav a:hover{color:#fff}
.endn_web{display: block;}
.endn_ipad{display: none;}
.endn_wap{display: none;}

.dizhi img{width:30px;margin-right:10px;margin-left:30px;}
.dizhi{color:#fff;font-size: 24px;line-height: 48px;}
.endn_wap01{display: none;}

.endsearch{margin-top:50px;}
.endsearch form{border:solid 2px #fff;width:550px;margin:0 auto;background-color:#DCDEDD;}
.searchtxt{float:left;width:487px;height:53px;border: none;background-color: transparent;padding-left:10px;}
.searchbtn{float: right;width:50px;height: 53px;background-image: url(../images/search.png);background-color: transparent;border: none;}



.section-banner img{width:100%;}

.subnav{text-align:right;} 
.subnav i{font-size:28px;line-height: 36px;}
.subnav a{color:#666;font-size:18px;line-height:36px;vertical-align:top;}
.subcontent{background-color:#DCDEDD;}

.pager{margin-top:50px;text-align: center;}
.pager a{margin-left:5px;margin-right:5px;display: inline-block;width:40px;height:40px;line-height: 40px;background-color:#ccc;color:#000;}

.pager strong{margin-left:5px;margin-right:5px;display: inline-block;width:40px;height:40px;line-height: 40px;color:#fff;background-color:#666;}

.pro-inner-title h3 {font-size: 24px;line-height:40px; color: #000;font-weight: 500;}
.pro-inner-price{font-size: 34px;color: #EC6E00;font-weight: 500;margin-top:30px; line-height: 34px;}
/* 詢價數量 */

.howmuch-section {width: 100%;margin-top:50px;}
.howmuch-box {display: block; margin-top: auto;}
.howmuch {-webkit-border-radius: 0;border-radius: 0;width: 164px;height: 36px;text-align: center;border: 1px solid black;}
.howmuch-box {display: flex;align-items: center;}
.howmuch-item {width: 36px;height: 36px;background-color: #313740;}
/* 加入購物車 */
.addPrice {outline: none;border: none;background-color: #313740;transition: 0.6s;margin-top:50px;padding:10px 50px;display: inline-block;}
.addPrice:hover { background-color: #000;}
.addPrice a { font-size: 24px;text-decoration: none;color: #fff;text-align: center;letter-spacing: 3px;}

.nav-tabs .nav-link.active {border-top: 6px solid #666;}
.product-item-btn {color: black;}
.product-item-btn:hover {color: black;}

.back-btn-section {display: flex;justify-content: center;padding-top: 60px;}
.back-btn {border: none;background-color: #faf0;}
.back-btn a {display: flex;align-items: center;font-size: 20px;text-decoration: none;
color: #666;margin: auto;background-color: #fff;padding: 15px 60px; font-family: "Montserrat", sans-serif;
letter-spacing: 0.5em;font-weight: 500;transition: 0.6s; border: 1px solid #1e3d5a;
position: relative;z-index: 1;}
.back-btn a::before { content: "";display: block;width: 0;height: 100%;background-color: #666;
position: absolute;top: 0;left: 0;transition: 0.4s ease-in;z-index: -1;}
.back-btn a:hover::before {width: 100%;}
.back-btn a:hover {color: #fff;}

/**聯絡我們***/
.shop-contact-us-main {width: 100%;padding-bottom: 80px;padding-top:80px;}
.shop-contact-us {width: 59.375%;margin: auto;}
.shop-contact-us label {font-size: 25px;font-weight: 400;text-indent: 0.5em;}
.shop-contact-us label span {color: red;}
.form-control.form-textarea {height: 338px;background-color: #f6f6f6;}
.submit-btn {border: none;background-color: #666;height: 60px;transition: 0.3s;margin-top: 50px;}
.submit-btn:hover {transform: scale(0.8);}
.submit-btn:hover a {color: #fff;}
.submit-btn a {text-decoration: none;color: #fffbf8;font-size: 20px;font-weight: 600;margin: auto;display: block;}

/**彈出框***/
.overlay-page-item {width: 518px;height: 293px;margin: auto;display: flex;justify-content: center;flex-direction: column;align-items: center;padding: 36px 67px;background-color: #EC6E00;}
.x-btn {width: 19px;height: 19px;top: 15px;right: 15px;}
.overlay-page-item-pic {width: 60px;margin-bottom: 25px;}
.overlay-page-item-pic img {width: 100%;}
.overlay-page-item p {
  font-size: 20px;text-align: center;color: #fff;letter-spacing: 0.03em;line-height: 1.6;margin-bottom: 25px;
font-family: "Montserrat", sans-serif;
}
.overlay-page-btn {display: block;width: 142px;height: 51px; background-color: #fff;text-align: center;
text-decoration: none;color: #EC6E00;font-weight: 500;padding: 14px 0;font-family: "Montserrat", sans-serif;
}

@media screen and (max-width:1440px){
  /*banner*/
  .txt01 img{max-width: 100px;}
  .txt02 img{max-width:250px;}
  .txt03 img{max-width:370px;}
  .txt04 img{max-width:800px;}
  .adpic img{max-width: 240px;}
  footer h1 img{max-width: 350px;}
}
@media screen and (max-width:1200px){
  /*banner*/
  .txt01 img{max-width: 80px;}
  .txt02 img{max-width:200px;}
  .txt03 img{max-width:300px;}
  .txt04 img{max-width:600px;}

  .endn_web{display: none;}
  .endn_ipad{display: block;}
  .endn_wap{display: none;}
  .endn_wap01{display: none;}

}
@media screen and (max-width:1001px){
  /*banner*/
  .txt01 img{max-width: 60px;}
  .banner{margin-top:60px;padding-top:60px;padding-bottom:60px;}
  .txt02 img{max-width:150px;}
  .txt03 img{max-width:230px;}
  .txt04{margin-top:50px;text-align: center;}
  .txt04 img{max-width: 460px;}
  /*product*/
  .product{padding-top:0px;padding-bottom:60px;}
  .plist02{margin-top:0px;}
  .plist02 h3{display: none;}
  /*** indexad ***/
  .indexad{padding-bottom:30px;padding-top:0px;}
  .adpic img{margin-top:30px;}
  /*** qa ***/
  .qa{padding-top:60px;padding-bottom:30px;}
  .faq-accordion {margin-top:0px;}
  .faq-accordion .accordion .accordion-content {padding-left: 15px;padding-right:15px;}
  footer h1 img{max-width: 280px;}
  footer{padding-top:60px;padding-bottom:60px;}
  footer nav{margin-top:30px;}
  .dizhi{color:#fff;font-size: 18px;line-height: 48px;}

  .endsearch form{width:450px;}
  .searchtxt{width:387px;}


  /***內頁開始 **/
  .section-banner{margin-top:60px;}

  .subnav{text-align:left;} 

  .pro-inner-title h3 {margin-top:30px;}

.nav-tabs{margin-top:40px;}

.shop-contact-us-main {
  width: 100%;
  padding-bottom: 40px;
  padding-top: 40px;
}
.shop-contact-us {
  width: 90%;
 

}
.shop-contact-us label {
  font-size: 24px;
  font-weight: 500;
  text-indent: 0;
  margin-top:15px;
}
.submit-btn a {
  font-size: 20px;
}

}
@media screen and (max-width:768px){
  .overlay-page-item {width: 100%;height: 293px;}

}
@media screen and (max-width:480px){


  .overlay-page-item {height: 393px;padding-left:15px;padding-right:15px;}
  .overlay-page-item p {font-size: 18px;letter-spacing: 0px;}

  /*banner*/
  .txt04 img{max-width: 280px;}

  .endn_web{display: none;}
  .endn_ipad{display: none;}
  .endn_wap{display: block;width:230px;margin:0 auto;text-align: left;}
  .endn_wap01{display: block;font-size: 18px;}
  .endsearch{margin-top:30px;}
  .endsearch form{width:280px;}
  .searchtxt{width:217px;}
}