@charset "UTF-8";
/* CSS Document */
body {
 background-color: #f5f0f0;
}

.topBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
 -webkit-box-align: end;
     -ms-flex-align: end;
         align-items: flex-end;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}

.searchBox {
 margin-bottom: 30px;
 background-color: #fff;
 border: 2px solid #de6500;
 border-radius: 60px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 padding: 20px 32px;
 overflow: hidden;
 -webkit-transition: all 0.5s linear;
 transition: all 0.5s linear;
}
.searchBox .searchBtn {
 padding: 2px 15px 0 0;
}
.searchBox .searchBtn svg {
 width: 20px;
 height: 20px;
}
.searchBox .searchInput {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding: 0 20px;
 border-left: 1px solid #5a4b41;
}
@media (max-width: 1180px) {
 .searchBox {
  padding: 15px 20px;
 }
 .searchBox svg {
  width: 18px;
  height: 18px;
  margin-right: 10px;
 }
 .searchBox .searchInput {
  padding: 0 10px;
 }
}
@media (max-width: 840px) {
 .searchBox {
  width: 100%;
 }
}
.productList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin: 0 -20px;
}
@media (max-width: 1180px) {
 .productList {
  margin: 0 -10px;
 }
}
.productList .productItem {
 width: 33.33%;
 padding: 0 20px 40px;
}
@media (max-width: 1180px) {
 .productList .productItem {
  width: 50%;
  padding: 0 10px 20px;
 }
}
@media (max-width: 640px) {
 .productList .productItem {
  width: 100%;
 }
}
.productList .Img {
 padding: 30px 0;
 background-color: #fff;
 overflow: hidden;
 border-radius: 9px;
 cursor: pointer;
}
@media (min-width: 1181px) {
 .productList .Img:hover .textBox {
  opacity: 1;
 }
 .productList .Img:hover .textBox .text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
 }
}
.productList .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.productList .Img .textBox {
 background-color: rgba(222, 101, 0, 0.7);
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 20px 32px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 opacity: 0;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.productList .Img .textBox .text {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 0.64px;
 line-height: 1.6;
 opacity: 0;
 -webkit-transform: translateY(10px);
         transform: translateY(10px);
 -webkit-transition: all 0.5s 0.3s;
 transition: all 0.5s 0.3s;
}
.productList .Img .linkWrap {
 display: block;
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
}
.productList .Img .point {
 position: absolute;
 top: 0;
 left: 12px;
}
.productList .Img .point.hot::before {
 content: "HOT";
 display: block;
 width: 50px;
 height: 58px;
 padding-top: 15px;
 background-image: url(../images/hot_icon.png);
 background-size: contain;
 background-repeat: no-repeat;
 font-size: 16px;
 font-weight: 300;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #fff;
 letter-spacing: 1.28px;
 text-align: center;
}
.productList .Img .point.award::after {
 content: "獲獎";
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 width: 50px;
 height: 50px;
 margin-top: 15px;
 background-image: url(../images/award_icon.png);
 background-size: contain;
 background-repeat: no-repeat;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.64px;
}
.productList .Txt {
 padding-top: 25px;
 text-align: center;
}
.productList .Txt .title {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
}
.productList .Txt .price {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 margin-top: 8px;
}

.tagList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
}
.tagList .tagTitle {
 border: 1px solid #de6500;
 padding: 5px 10px;
 font-size: 13px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #de6500;
 letter-spacing: 0.52px;
}

.normal {
 text-decoration: line-through;
}

.discount b {
 font-size: 18px;
 font-style: italic;
 color: #de6500;
}

.insIntroBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
.insIntroBox .Img {
 width: 50%;
 max-width: 600px;
 background-color: #fff;
 border-radius: 12px;
}
.insIntroBox .Img img {
 width: 100%;
 height: auto;
 display: block;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
}
.insIntroBox .introBox {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding-left: 50px;
}
@media (max-width: 767px) {
 .insIntroBox .introBox {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
 }
}
.insIntroBox .introBox .articleTitle {
 margin-bottom: 15px;
 padding: 0 0 15px 0;
}
.insIntroBox .introBox .introList li {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin-bottom: 5px;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
}
.insIntroBox .introBox .introList .introTitle {
 font-weight: 500;
 color: #5a4b41;
}
.insIntroBox .introBox .code {
 display: block;
 font-size: 14px;
 font-weight: 400;
 padding: 3px 0;
}
.insIntroBox .introBox .code a {
 color: #de6500;
}
@media (min-width: 1181px) {
 .insIntroBox .introBox .code a:hover {
  color: #5a4b41;
 }
}

/*訂購規格區*/
.orderTable {
 margin-top: 15px;
 padding-top: 15px;
 border-top: 1px dashed #e1e1e1;
}
.orderTable th {
 padding: 10px;
 font-size: 15px;
 color: #6c6c6c;
}
.orderTable td {
 padding: 10px;
 color: #6c6c6c;
}
.orderTable select {
 padding: 4px;
}
.orderTable tr:nth-child(odd) {
 background-color: #f1f1f1;
}
.orderTable b {
 font-weight: 400;
 font-size: 15px;
 color: #6c6c6c;
}
.orderTable .priceBox {
 padding: 10px 0;
}
.orderTable .priceBox .priceItem {
 line-height: 1.2;
 letter-spacing: 0.5px;
}
.orderTable .priceBox .priceItemOriginal, .orderTable .priceBox .priceItemSelling, .orderTable .priceBox .priceItemDefault {
 font-size: 15px;
 font-weight: 500;
 padding: 5px 0;
}
.orderTable .priceBox .priceItemOriginal span, .orderTable .priceBox .priceItemSelling span, .orderTable .priceBox .priceItemDefault span {
 display: inline-block;
}
.orderTable .priceBox .priceItemOriginal span:first-child, .orderTable .priceBox .priceItemSelling span:first-child, .orderTable .priceBox .priceItemDefault span:first-child {
 margin-right: 3px;
}
.orderTable .priceBox .priceItemOriginal, .orderTable .priceBox .priceItemSelling {
 display: none;
}
.orderTable .priceBox .priceItemOriginal {
 color: #bbb;
}
.orderTable .priceBox .priceItemOriginal span {
 position: relative;
}
.orderTable .priceBox .priceItemOriginal span::before {
 content: "";
 width: 100%;
 height: 1px;
 background-color: #9f9f9f;
 position: absolute;
 top: 50%;
 left: 0;
 z-index: 1;
}
.orderTable .priceBox .priceItemSelling {
 color: #ca0000;
}
.orderTable .countBox {
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 padding: 10px 0;
}
.orderTable .countBox b {
 margin-right: 20px;
 font-size: 14px;
 color: #434343;
 letter-spacing: 0.1em;
}
.orderTable .countBox .countItemBox {
 display: -ms-flexbox;
 display: -webkit-box;
 display: flex;
 width: 130px;
 height: 30px;
 border: 1px solid #e1e1e1;
}
.orderTable .countBox .countItemBox .countBtn {
 position: relative;
 display: block;
 width: 30px;
 height: 30px;
 background-color: #de6500;
}
.orderTable .countBox .countItemBox .count {
 width: calc(100% - 60px);
 height: 30px;
 line-height: 30px;
 border: 1px solid #e1e1e1;
 border-top: none;
 border-bottom: none;
 font-size: 15px;
 color: #959595;
 text-align: center;
 letter-spacing: 0.1em;
}
.orderTable .countBox .countItemBox .countLess::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -3px;
 margin-top: -1px;
 width: 6px;
 height: 2px;
 background-color: #fff;
}
.orderTable .countBox .countItemBox .countAdd::before, .orderTable .countBox .countItemBox .countAdd:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background-color: #fff;
}
.orderTable .countBox .countItemBox .countAdd::before {
 margin-left: -6px;
 margin-top: -1px;
 width: 12px;
 height: 2px;
}
.orderTable .countBox .countItemBox .countAdd::after {
 margin-left: -1px;
 margin-top: -6px;
 width: 2px;
 height: 12px;
}
.orderTable .btn {
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 padding-top: 20px;
 text-align: center;
}
.orderTable .btn a {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 border-radius: 3px;
 border: 1px solid #de6500;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #de6500;
 letter-spacing: 0.64px;
 padding: 10px 15px;
}
.orderTable .btn a + a {
 color: #fff;
 background-color: #de6500;
 margin-left: 10px;
}
@media (min-width: 1181px) {
 .orderTable .btn a:hover {
  color: #fff;
  border-color: #5a4b41;
  background-color: #5a4b41;
 }
}

.promotionArea .moduleWrap {
 max-width: 480px;
}
.promotionArea .promotionBox {
 margin: 30px 0;
}
.promotionArea .promotionBox .btn1 {
 margin-top: 20px;
}

.dataItem {
 padding-bottom: 40px;
}
.dataItem .dataTitle {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 padding-bottom: 5px;
 margin-bottom: 10px;
}
.dataItem .dataTitle span {
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(10%, rgba(235, 105, 0, 0.35)));
 background-image: linear-gradient(transparent 55%, rgba(235, 105, 0, 0.35) 10%);
 background-size: 100% 100%;
 background-repeat: no-repeat;
 background-position: left bottom;
}
.dataItem .dataExp {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 line-height: 1.8;
 padding: 0 20px;
}
.dataItem .toc {
 overflow: hidden;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
.dataItem .toc.hide {
 max-height: 300px;
}
.dataItem .toc.hide::after {
 display: block;
}
.dataItem .toc::after {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 60px;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(245, 240, 240, 0)), to(rgb(245, 240, 240)));
 background: linear-gradient(rgba(245, 240, 240, 0), rgb(245, 240, 240));
 pointer-events: none;
 display: none;
}
.dataItem .tocBtn {
 display: inline-block;
 padding: 5px;
 margin-top: 10px;
 cursor: pointer;
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (min-width: 1181px) {
 .dataItem .tocBtn:hover {
  color: #de6500;
 }
 .dataItem .tocBtn:hover::before {
  border-color: #de6500;
 }
}
.dataItem .tocBtn.close::before {
 -webkit-transform: rotate(-45deg) translateX(-3px);
         transform: rotate(-45deg) translateX(-3px);
}
.dataItem .tocBtn::before {
 content: "";
 display: inline-block;
 width: 8px;
 height: 8px;
 border-top: 2px solid #606060;
 border-right: 2px solid #606060;
 margin-right: 8px;
 -webkit-transform: rotate(135deg) translateX(-3px);
         transform: rotate(135deg) translateX(-3px);
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}

.infoDataList li {
 margin-bottom: 10px;
 padding-left: 15px;
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 line-height: 1;
}
.infoDataList li::before {
 content: "";
 width: 7px;
 height: 7px;
 background-color: #de6500;
 border-radius: 2px;
 display: inline-block;
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
 left: 0;
}

.sideDataList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 gap: 40px 0;
 margin: 0 -20px;
}
.sideDataList .sideDataItem {
 width: 25%;
 padding: 0 20px;
}
.sideDataList .Img {
 border-radius: 9px;
 overflow: hidden;
}
.sideDataList .Img img {
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
}
@media (min-width: 1181px) {
 .sideDataList .Img a:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
 }
}
.sideDataList .Txt {
 padding: 10px 0;
}
.sideDataList .Txt .title {
 font-size: 18px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 0.72px;
 height: 27px;
 overflow: hidden;
 margin-bottom: 15px;
}
.sideDataList .Txt .title a {
 color: #5a4b41;
}
@media (min-width: 1181px) {
 .sideDataList .Txt .title a:hover {
  color: #de6500;
 }
}
.sideDataList .Txt .newsInfo {
 margin-bottom: 10px;
}
.sideDataList .Txt .text {
 font-size: 16px;
 font-weight: 400;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #606060;
 letter-spacing: 0.64px;
 line-height: 1.8;
 height: 58px;
 overflow: hidden;
}
.sideDataList .Txt .newsInfo {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 20px;
}
.sideDataList .Txt .date {
 font-size: 18px;
 font-weight: 700;
 font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #5a4b41;
 letter-spacing: 1.44px;
}
@media (max-width: 400px) {
 .sideDataList .Txt .date {
  font-size: 16px;
 }
}
.sideDataList .Txt .classTitle {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 8px;
 font-size: 14px;
 font-weight: 500;
 font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
 color: #de6500;
 letter-spacing: 0.56px;
}
.sideDataList .Txt .classTitle svg {
 width: 39px;
 height: 30px;
 color: #5a4b41;
}
@media (max-width: 400px) {
 .sideDataList .Txt .classTitle svg {
  width: 32px;
  height: 24px;
 }
}
/*# sourceMappingURL=product.css.map */