/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1440px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:1.7; color: #333; letter-spacing: 0.05rem;  padding-top: 160px; font-weight: 400;}
#content p{ margin-bottom: 0px; margin-top: 0; padding-bottom: 30px; font-size: 16px;line-height:1.7;  font-weight: 400; }
p, td, li, label { font-size: 16px;line-height:1.7;  font-weight: 400; }

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%; }

.demo-section { padding-left: 5%; padding-right: 5%;}

header {border-bottom: 1px solid #e2e2e2 !important; }

#path {border-top: 1px solid #e2e2e2; padding: calc(5px + 0.5%) 5%;}
#path ul { margin: 0 auto; padding: 0; }
#path li { display: inline-block; vertical-align: top; font-size: 14px; color: #ff7440; font-weight: 300;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px; color: #333333;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333333;}
#path li a:hover { /*opacity: 0.6;*/ color: #ff7440; text-decoration:underline;}
#path li:last-child a { color: #333333;}

/* Hashtag */
.hashtag-common {
  position: relative;
  padding: 0 3%;
  margin: 0 auto;
}
.hashtag-common ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 20px 0;
  padding: 0;
}
.hashtag-common li {
  list-style: none; font-size: inherit; line-height: inherit;
}
.hashtag-common li a {
  display: block;
  font-size: 0.9rem;
  background-color: #e7e7e7;
  border: 1px solid #d9d9d9;
  padding: 3px 13px;
  margin-bottom: 10px;
  border-radius: 3px;
  margin-right: 10px;
  color: #8b8b8b;
  line-height: 1.7;
  transition: all 0.5s;
}
.hashtag-common li a:hover, .hashtag-common li.current a {
  color: #fff;
  font-weight: bold;
  background-color: #5f3c2f; border: 1px solid #5f3c2f;
}

.cms-back-btn {display: flex; flex-flow: wrap; justify-content: center; align-items: center; margin: 1.5rem 0 2.5rem 0;}
.cms-back-btn > a:link, .cms-back-btn > a:visited {text-decoration:none; color:#362e2b; padding: 5px 20px; line-height: 1.7; border: 1px solid #362e2b; transition: all 0.5s ease 0s;}
.cms-back-btn > a:active, .cms-back-btn > a:hover {text-decoration:none; color:#fff; background: #5f3c2f; border: 1px solid #5f3c2f; cursor:pointer; transition: all 0.5s ease 0s;}


.blog-list {
  display: flex;
  margin-bottom: 30px;
}
.blog-list-pic {
  position: relative;
  width: 30%;
  transition: all 0.5s;
}
.blog-list-content {
  width: 70%;
  padding-left: 20px;
}
.blog-list-pic .img-center {position: relative; padding-bottom: 66.6%; line-height: 0; font-size: 0; height: 0;}
.blog-list-pic .img-center a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;  
}
.blog-list-pic .img-center img {
  max-height: 100%;
  transition: all 0.5s;
}
.blog-list-pic:hover img {
  transform: scale(0.9);
}
.blog-list-title {
  font-size: 19px;
}
.blog-list-date {
  color: #bdbdbd;
}
.blog-list-text {
  color: #5d5d5d;
}
.blog-list-more {
  text-align: right;
}
.blog-list-more a {
  color: #362e2b;
}
.blog-list-more a:hover {
  text-decoration: underline;
  color: #5f3c2f;
}
.blog-list-tag a {
  color: #a1a1a1;
  background: #f5f5f5;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  padding: 3px 12px;
  transition: all 0.5s;
}
.blog-list-tag a:hover {
  color: #fff;
  background-color: #5f3c2f;
  border: 1px solid #5f3c2f;
}

.blog-divider {
  border-left: 1px solid #dfdfdf;
  padding: 30px 0 30px 30px;
}
@media only screen and (max-width: 991px) {
  .blog-divider {
    padding: 10px 0 30px 0;
    border-left: none;
  }
}

.blog-article-title {
  font-size: 19px;
  margin-bottom: 10px;
}
.blog-article-search {
  position: relative;
}
.blog-article-search > input {
  width: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 40px;
  padding: 0 40px 0 20px;
  transition: all 0.5s;
}
.blog-article-search:hover > input {
  border: 1px solid #5f3c2f;
}
.blog-article-search > a {
  position: absolute;
  right: 15px;
}
.blog-article-tag {
  margin-top: 30px;
}
.blog-article-tag a {
  color: #a1a1a1;
  background: #f5f5f5;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  padding: 3px 12px;
  transition: all 0.5s;  
}
.blog-article-tag a:hover {
  color: #fff;
  background: #5f3c2f;
  border: 1px solid #5f3c2f;
}
.blog-article-cate {
  margin-top: 30px;
}
.blog-article-cate > ul {
  padding-left: 0;
}
.blog-article-cate > ul > li {
  transition: all 0.5s;
  border-bottom: 1px solid #e6e6e6;
  list-style: none;
  padding: 5px 0 5px 10px;
}
.blog-article-cate > ul > li:hover {
  background-color: #5f3c2f;
}
.blog-article-cate > ul > li:hover * {
  color: #fff;
}
.blog-article-hot-box {
  border-bottom: 1px solid #e6e6e6;
}
.blog-article-hot-cate {
  color: #8b8b8b;
}
.blog-article-hot-text a {
  transition: all 0.5s;
}
.blog-article-hot-text a:hover {
  color: #5f3c2f;
}


.blog-detail-text {
  padding: 20px 0;
}
.blog-detail-tag a {
  color: #a1a1a1;
  background: #f5f5f5;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  padding: 3px 12px;
  transition: all 0.5s;
}
.blog-detail-tag a:hover {
  color: #fff;
  background: #5f3c2f;
  border: 1px solid #5f3c2f;
}
.blog-detail-btn {
  background: #f3f3f3;
  border-top:1px solid #e7e7e7;
  border-bottom:1px solid #e7e7e7;
  padding: 0 10px;
  margin-top: 30px;
}
.blog-detail-btn a {
  display: block;
  line-height: 66px;
  background: #fff;
  text-align: center;
  width:154px;
  color: #9f9f9f;
  font-size: 18px;
  margin: 0 0 0 auto;
  transition: all 0.5s;
}
.blog-detail-btn a:hover {
  background: #9f9f9f;
  color: #fff;
  width: 100%;
}

.blog-detail-more {
  margin-top: 30px;
}
.blog-detail-more-title {
    font-size: 24px;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
  }
.blog-detail-more-list {
    font-size: 18px;
    list-style: circle;
    line-height: 36px;
    margin-top: 20px;
    padding-left: 20px;
  }
.blog-detail-more-list a:hover { color: #447ab6; }


@media only screen and (max-width: 768px) {
  .blog-list {
    flex-direction: column;
  }
  .blog-list-pic {
    width: 100%;
    /*padding-bottom: 100%;*/
    max-width: 600px; margin: auto;
  }
  .blog-list-content {
    width: 100%;
    padding-top: 20px;
    padding-left: 0;
  }    
}

/*about*/
.about-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.about-section > div { padding-left: 5%; padding-right: 5%;}
.about-section > div:nth-of-type(1) { width: 32%; position: sticky; top:38%;}
.about-section > div:nth-of-type(2) { width: 68%; border-left: 1px solid #e2e2e2; padding-top: calc(20px + 2%); padding-bottom: calc(20px + 4%);}

.title01 { display: flex; flex-direction: column; flex-wrap: wrap;  color: #362e2b;}
.title01 > div, .title01 > h1  { position:relative; margin: 0 0 calc(10px + 0.5%) 0; padding: 0 0 calc(15px + 1%) 0; letter-spacing: 0.05rem; line-height: 1.3; font-weight: 500; font-size: clamp(26px, 3.5vw, 50px);}
.title01 > div:after, .title01 > h1:after  { position: absolute; content: ""; background: #362e2b; bottom: 0; left: 0; width: 60px; height: 4px;}
.title01 > span  { display: inline-block; font-weight: 300; line-height: 1.2; text-transform: uppercase; font-size: clamp(20px, 2.5vw, 38px);}

.title01-center, .title01-2-center {align-items: center; padding-top: calc(20px + 2%); padding-bottom: calc(20px + 2%);}
.title01-center > div, .title01-2-center > h1 { font-size: clamp(26px, 2.5vw, 38px);}
.title01-center > h1, .title01-center > span, .title01-2-center > div, .title01-2-center > span { font-size: clamp(20px, 1.8vw, 30px); margin: 0; padding: 0;font-weight: 300; line-height: 1.4; }
.title01-center > div:after, .title01-2-center > h1:after  { left:50%; transform: translateX(-50%);}
.title01-center > h1:after, .title01-center > span:after, .title01-2-center > div:after, .title01-2-center > span:after  { display: none;}

.about-title { background: #362e2b; color: #fff; padding:15px 20px; font-weight: 300;font-size: clamp(19px, 1.3vw, 26px); text-align: center; margin-bottom: calc(20px + 2%); line-height: 1.3;}

.font-size-20 { font-size: 20px;}

/*products*/
.products-section > div:nth-of-type(2) { border-left: 0px solid #e2e2e2; padding-top: 30px; padding-left: 0; padding-right: 0; }

.products-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.products-list > a { padding: 0 20px 25px 0; width: 33.33%;}
.products-list > a:hover .products-list-over-pto { opacity: 1;}
.products-list-pto-box { border: 1px solid #f1f1f1; position: relative; margin-bottom: 5px;}
.products-list-pto { padding-bottom: 100%;}
.products-list-over-pto { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;transition: all 0.4s ease-out 0s; }
.products-list-over-pto img  { object-fit: cover; width: 100%; height: 100%; object-position: 50% 50%;}
.products-list-name  { color: #362e2b; font-size:clamp(16px, 1vw, 20px); }

/*products-list*/
.idx-hot-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(10px + 1%); padding-left: 3%; padding-right: 3%;}
.idx-hot-1 > a { width: 25%; padding: 0 1.5%; margin-bottom: calc(20px + 1%); display:block;}
.idx-hot-1 > a:hover .idx-hot-1-pto img { transform: scale(0.9);}
.idx-hot-1 > a:hover .idx-hot-1-pto-box { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.idx-hot-1-pto-box { padding: 5px; margin-bottom: calc(10px + 1%); position: relative; border: 1px solid #e0e0e0;transition: all 0.5s ease-out 0s;}
.idx-hot-1-pto { padding-bottom: 100%;}
.idx-hot-1-pto img { transition: all 0.3s ease-out 0s; width: auto !important;}
.idx-hot-1-name { font-weight: 400; line-height: 1.3; padding-bottom: 5px;font-size:clamp(16px, 1vw, 20px);}
.idx-hot-1-cash { display: flex; flex-direction: row; flex-wrap: wrap; font-weight: 400; font-size: 16px; }
.idx-hot-1-cash-o { color: #666; text-decoration: line-through;}
.idx-hot-1-cash-s { margin-right: 12px; }

.banner { position:relative; margin-bottom: calc(20px + 2%); }
.banner img { width: 100%; }
.banner-pc { }
.banner-mobile { display: none !important;}

#page { text-align: center; padding:0 5% calc(20px + 3%) 5%;}
#page a { font-size: 16px; color: #333; font-weight: 400; width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 100%; display: inline-block;}
#page a:hover, #page a.current { background: #362e2b; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #333; border-right: 1px solid #333; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*products-detail*/
.products-detail-top { border-bottom: 1px solid #e2e2e2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; position: relative;}
.products-detail-top:after { content: ""; position: absolute; width: 1px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); background: #e2e2e2;}
.products-detail-top > div { width: 50%; padding: calc(20px + 3%) 5%;}
.products-detail-top > div:nth-of-type(1) { position: sticky; top: 0;}
.products-detail-top > div:nth-of-type(2) { }

.products-detail-tool { position: relative;}
   .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: inline-block;
      max-width: 600px; width: 100%;
      /*height: 100%;
      object-fit: cover;*/
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center; padding: 0 5px;
    }

    .mySwiper2 {
      height: 80%;
      width: 100%; 
    }

    .mySwiper {
      height: auto;
      box-sizing: border-box;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

.swiper-next, .swiper-prev { width: 26px !important; height: 26px !important; border-radius: 100%; background: #fff; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%); border: 1px solid #362e2b;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 6px; height: 6px ; border-width: 1px 1px 0 0; border-color: #362e2b; border-style: solid;}
.swiper-prev:after { transform: rotate(-135deg);}
.swiper-next:after { transform: rotate(45deg);}
.swiper-prev { left: 0px;}
.swiper-next { right: 0px;}


.p-detail-title {  position:relative; margin: 0 0 calc(15px + 2%) 0; padding: 0 0 calc(15px + 2%) 0; letter-spacing: 0.05rem; line-height: 1.3; font-weight: 500; font-size: clamp(23px, 2vw, 30px); color: #362e2b;}
.p-detail-title:after  { position: absolute; content: ""; background: #362e2b; bottom: 0; left: 0; width: 60px; height: 4px;}

.p-detail-cash { padding-bottom: calc(10px + 2%); margin-bottom: calc(15px + 2%); border-bottom: 1px solid #999999; display: flex; flex-direction: row; flex-wrap: wrap; line-height: 1.2;}
.p-detail-cash > div { padding-bottom: 10px; padding-right: 20px; font-size: clamp(20px, 1.5vw, 26px); font-weight: 300; color: #362e2b;}
.p-detail-cash-s { }
.p-detail-cash-o { text-decoration: line-through; color: #999 !important; }
.p-detail-cash-d {width: 100%; font-size: clamp(14px, 0.938vw, 18px)!important;}
.p-detail-cash-d a:link, .p-detail-cash-d a:visited {text-decoration:underline; color:#ff7440; transition: all 0.5s ease 0s;}
.p-detail-cash-d a:active, .p-detail-cash-d a:hover {text-decoration:underline; color:#5f3c2f; cursor:pointer; transition: all 0.5s ease 0s;}
.p-detail-info { padding-bottom: calc(10px + 2%); margin-bottom: calc(15px + 2%); border-bottom: 1px solid #999999; }

.p-select-section { padding-bottom: 15px; margin-bottom: calc(15px + 2%); border-bottom: 1px solid #999999; display: flex; flex-direction: column; flex-wrap: nowrap;}
.p-select-section > div { padding-bottom: 20px;}
.p-select-title { font-weight: 500; font-size: 18px; line-height: 1.3; padding-bottom: 15px;}
.p-select-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.p-select-list > div { cursor: pointer; margin: 0 10px 10px 0; line-height: 40px; border: 1px solid #cccccc; padding: 0 12px;}
.p-select-list > div:hover, .p-select-list > div.current { background: #ff7440; color: #fff; border-color: #ff7440;}
.p-select-list > button { cursor: pointer; margin: 0 10px 10px 0; line-height: 40px; border: 1px solid #cccccc; padding: 0 12px; background: #fff; }
.p-select-list > button:not(:disabled):hover, .p-select-list > button.active { background: #ff7440; color: #fff; border-color: #ff7440;}

#cms-amount-panel {display: inline-flex; flex-direction: column; align-items: flex-start;}
#cms-amount-panel > div { /*font-weight:bold;*/}
/* #cms-amount-panel > div:nth-child(1) {padding: 0;} */
.cms-amount-value {border: 1px solid #e4e4e4; display: inline-flex; flex-direction: row; height: 40px;}
#cms-amount-panel button { width:25px; font-size: 13px; color: #333333; background-color: #eeeeee; border: 0;}
#cms-amount-panel input[type="text"] { width:54px; font-size: 13px; text-align:center; border: 0;}


.p-add-section { padding-bottom: 15px; margin-bottom: calc(15px + 2%); border-bottom: 1px solid #999999; }
.products-add-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 25px;}
.products-add-list > div { line-height: 1.4; letter-spacing: 0;}
.products-add-list > div:nth-of-type(1) { width: 30px;}
.products-add-list > div:nth-of-type(2) { width: 60px; border: 1px solid #cccccc;}
.products-add-list > div:nth-of-type(3) { width: calc(100% - 30px - 60px - 70px); font-size: 16px; padding: 0 10px 0 20px;color: #999;}
.products-add-list > div:nth-of-type(3) span { color: #ff7440;}
.products-add-list > div:nth-of-type(4) { width: 70px; line-height: 1;}

.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 28px; padding-right: 20px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #333; margin-bottom: 0;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 3px;left: 0;height: 20px;width: 20px;background-color: #fff; border: 1px solid #cccccc; }
.contact-note2:hover input ~ .checkmark {background-color: #fff;}
.contact-note2 input:checked ~ .checkmark {background: #362e2b}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 3px;top: 4px;width: 13px;height: 7px; border-width: 0 0 2px 2px; border-style: solid; border-color:#fff; transform: rotate(-45deg);}

.number-select select{  margin: 0px 0 0 0;  width:100%; background-image: url("../images/select-arrow.png"); background-repeat: no-repeat; background-position: calc(100% - 10px) 15px; background-size: 13px 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; font-size: 16px; border-width:1px; border-style: solid; border-color: #cccccc; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding: 0px 25px 0 10px;  letter-spacing: 0; height: 40px; line-height: 100%; text-align: center; }
.number-select option { padding:1px 5px;}
.number-select select::-ms-expand {
    display: none;
}

.p-detail-btn { margin-bottom: 30px; display: flex ;flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.p-detail-btn > a { width: calc(50% - 12px); display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 2px solid #333333; padding: 10px; margin-bottom: 10px;}
.p-detail-btn > a:hover { background: #333;}
.p-detail-btn > a:hover > img { filter:brightness(0) invert(1);}
.p-detail-btn > a:hover > span { color: #fff;}
.p-detail-btn > a > img { width: 23px;}
.p-detail-btn > a > span { font-size: 16px; display: inline-block; margin-left: 10px;}
.p-detail-btn > button { width: calc(50% - 12px); display: flex ;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 2px solid #333333; padding: 10px; margin-bottom: 10px; background:#fff; }
.p-detail-btn > button:disabled { border: 2px solid #ddd; }
.p-detail-btn > button:disabled > img { filter:brightness(0) invert(0.8);}
.p-detail-btn > button:not(:disabled):hover { background: #5f3c2f; border: 2px solid #5f3c2f;}
.p-detail-btn > button:not(:disabled):hover > img { filter:brightness(0) invert(1);}
.p-detail-btn > button:not(:disabled):hover > span { color: #fff;}
.p-detail-btn > button > img { width: 23px;}
.p-detail-btn > button > span { font-size: 16px; display: inline-block; margin-left: 10px;}

.p-detail-bottom { padding-top:calc(20px + 3%); padding-bottom:calc(10px + 1%);}

.loop6b { border-top:1px solid #e2e2e2;}
.loop6b .owl-item {position: relative; border-right: 1px solid #e2e2e2; padding: 20px;}
.loop6b .owl-nav { position: absolute; top:calc(50% - 26px); transform: translate(-50%, -50%); left: 50%; width: 100%; z-index: 11;}
.loop6b .owl-prev, .loop6b .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 26px; height: 26px; border: 1px solid #362e2b !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s; margin: 0 !important;}
.loop6b .owl-prev:hover, .loop6b .owl-next:hover { transform: scale(0.8);}
.loop6b .owl-prev:hover, .loop6b .owl-prev:hover:before, .loop6b .owl-next:hover:before { }
.loop6b .owl-prev { left:15px; }
.loop6b .owl-next { right:15px;}
.loop6b .owl-prev:before, .loop6b .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop6b .owl-prev:after, .loop6b .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop6b .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop6b .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop6b .owl-prev:after { left: 14px !important; }
.loop6b .owl-next:after { right: 14px !important;}
.loop6b .owl-prev:hover:before, .loop6b .owl-next:hover:before { opacity: 1;}
.loop6b .owl-stage-outer {z-index: 2;}
.loop6b .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop6b .owl-dots .owl-dot span, .loop6b  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop6b .owl-dots .owl-dot.active span, .loop6b  .owl-dots .owl-dot:hover span { opacity: 1; }

.loop6b .idx-hot-1-pto-box { border-width: 0;}

.tab-list {
  text-align: center;
  background: #362e2b;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  border-top: solid 1px rgba(255, 255, 255, 0.5);
  padding: 0;
  position: sticky; top: 97px; z-index: 10; overflow-x: auto; display: flex; flex-flow: row; justify-content: center;
}
.tab-list li {
  display: inline-block;
  padding: 3px 2em;
  margin: 0px -2px;
  border-left: solid 1px rgba(255, 255, 255, 0.3);
  list-style: none;
  text-align: center;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 2.5em;
  cursor: pointer;
  white-space:nowrap;
}
@media (max-width: 1279px) {
    .tab-list {top: 79px;}
    .judge-top + .header-top + #content > .tab-list {top: 49px;}
}
@media (max-width: 991px) {
  .tab-list {justify-content: flex-start;}
  .tab-list li {padding: 3px 20px;}
}
@media (max-width: 760px) {
  .pro-list {margin-bottom: 70px;}
  .tab-list li {
    /*display: block;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);*/
  }
}
.tab-list li:last-child {
  border-right: solid 1px rgba(255, 255, 255, 0.3);
}
.tab-list li a {
  color: #fff;
  transition: all 0.5s;
}
.tab-list li a:hover {
  color: #ff7440;
}

.tab-list-content {
  padding: 30px;
  width: 100%;
  max-width: 1258px;
  margin: 2% auto;
}

/*news*/
.news-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(10px + 2%);}
.news-list > a { padding: 0 3% 25px 3%; width: 33.33%;}
.news-list > a:hover .news-list-pto { transform: rotate(-2deg) scale(0.95);}
.news-list-pto { padding-bottom: 96%; margin-bottom: 13px;transition: all 0.5s ease-out 0s; }
.news-list-title { font-weight: 500; font-size: 18px; color: #362e2b; margin-bottom: 10px; height: 54px; line-height: 1.6; transition: all 0.5s ease-out 0s;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis}
.news-list > a:hover .news-list-title {color: #ff7440;}
.news-list-data { font-size: 15px;  height: 50px;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis}

/*contact*/
.contact-section > div { width: 50% !important;}

.contact-list { background: #f3f3f3; padding: 16px 20px; margin-bottom: 25px;}

.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: 16px; border-width:0px; border-style: solid; border-color: #d0d0d0; margin: 0px 0 0px 0; width: 100%; padding:0px 0px ; color:#362e2b; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 1.3; border-radius: 0px; letter-spacing: 0.05rem; font-weight: 400; }
.contact-form textarea { height:100px; padding: 0; resize:none; line-height: 1.7;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; background-image: url("../images/select-arrow.png"); background-repeat: no-repeat; background-position: calc(100% - 16px) calc(50% - 0px); -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; border-width:0px; border-style: solid; border-color: #d0d0d0; color:#362e2b; font-family: 'Noto Sans TC', sans-serif;  padding:0px 55px 0px 0px;  line-height: 1.5; border-radius: 0px; letter-spacing: 0.05rem; font-size: 16px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}
.contact-form ::placeholder {opacity: 1; color: #362e2b;}

.contact-btn { background: #362e2b; width: 100px; line-height: 55px; text-align: center; color: #fff; border-width: 0; font-size: 16px;transition: all 0.2s ease-out 0s;}
.contact-btn:hover { width: 120px; background: #5f3c2f;}

@media only screen and (max-width: 1279px) {
    #content { padding-top: 80px;}
    #content, #content p, p, td, li, label { }
	
	.font-size-20 { font-size: 18px;}

	.banner-pc { display: none !important;}
	.banner-mobile { display: block !important;}
	
}

@media only screen and (max-width: 980px) {
	.about-section > div:nth-of-type(1) { width: 100%; top:auto; padding-top: calc(20px + 2%);}
	.about-section > div:nth-of-type(2) { width: 100%; border-left: 0px solid #e2e2e2; padding-top: calc(20px + 2%); padding-bottom: calc(20px + 4%);}
	
	.title01 { align-items: center;}
	.title01 > div:after, .title01 > h1:after  { left:50%; transform: translateX(-50%);}
	
	.products-section > div:nth-of-type(2) { padding-left: 5%; padding-right: 5%; }
	.products-list > a { padding: 0 10px 25px 10px; }
	
	.idx-hot-1 > a { width: 33.33%; }
	
	.products-detail-top:after { display: none;}
	.products-detail-top > div { width: 100%; }
	.products-detail-top > div:nth-of-type(1) {  position: relative; top: auto;}
	
	.news-list-title { font-size: 16px;}
	
	.contact-section > div { width: 100% !important;}
}
@media only screen and (max-width: 768px) {
	.products-list > a { width: 50%;}
	
	.news-list > a { width: 50%;}
}
@media only screen and (max-width: 640px) {
	.idx-hot-1 > a { width: 50%; }

	.products-add-list > div:nth-of-type(3) {  width: calc(100% - 30px - 70px);}
	.products-add-list > div:nth-of-type(4) { width: 100%; padding-left: 110px; margin-bottom: 10px; margin-top: 10px;}
	.products-add-list > div:nth-of-type(4) select { max-width: 88%;}
}
@media only screen and (max-width: 570px) {
	
}

@media only screen and (max-width: 414px) {
	.p-detail-btn > a { width: 100%; }
	
}

@media only screen and (max-width: 320px) {
	.products-list > a { width: 100%;}
	
	.idx-hot-1 > a { width: 100%; }
	
	.news-list > a { width: 100%; padding: 0 0 25px 0;}
}