@charset "UTF-8";
@import "mCustomScrollbar.css";
@import "plugins.css";
@import "font/css/fontello.css";
@import "photoswipe.css";
@import "bootstrap.min.css";
@import "animate.css";
@import "sweetalert2.css";
@import "default.css";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css");
.Poppins {
  font-family: "Poppins", "Noto Sans TC", sans-serif;
}

.Montserrat {
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
}

.RobotoCondensed {
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
}

.NotoSansTC {
  font-family: "Noto Sans TC", sans-serif;
}

.arial {
  font-family: "Arial", "Noto Sans TC", sans-serif;
}

.karla {
  font-family: "Karla", "Noto Sans TC", sans-serif;
}

/*最大寬度*/
.max1800 {
  width: 100%;
  max-width: 1800px;
  margin: auto;
}

.max1730 {
  max-width: 1730px;
  margin: auto;
  width: 100%;
}

.max1660 {
  width: 100%;
  max-width: 1660px;
  margin: auto;
}

.max1620 {
  width: 100%;
  max-width: 1620px;
  margin: auto;
}

.max1600 {
  width: 100%;
  max-width: 1600px;
  margin: auto;
}

.max1580 {
  width: 100%;
  max-width: 1580px;
  margin: auto;
}

.max1500 {
  width: 100%;
  max-width: 1500px;
  margin: auto;
}

.max1400 {
  width: 100%;
  max-width: 1400px;
  margin: auto;
}

.max1365 {
  width: 100%;
  max-width: 1365px;
  margin: auto;
}

.max1300 {
  width: 100%;
  max-width: 1300px;
  margin: auto;
}

.max1200 {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.max1100 {
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

.max1000 {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.w100 {
  width: 100% !important;
}

.w50 {
  width: 50%;
}

.z-1 {
  z-index: 1;
}

@media (max-width: 1199px) {
  .container {
    max-width: 900px;
  }
}
@media (max-width: 991px) {
  .container {
    max-width: 700px;
  }
}
@media (max-width: 767px) {
  .container {
    max-width: 500px;
  }
}
@media (max-width: 575px) {
  .container {
    max-width: 500px;
  }
}

button {
  font-family: "Noto Sans TC" !important;
  outline: none !important;
}
button:focus {
  outline: 0 !important;
}

@media (max-width: 1200px) {
  .font-96,
  .font-80 {
    font-size: 52px !important;
  }
  .font-20,
  .font-18 {
    font-size: 18px !important;
  }
}
.line-through {
  text-decoration: line-through;
}

.uppercase {
  text-transform: uppercase;
}

.pointer {
  cursor: pointer;
}

.txtHidden {
  color: transparent !important;
}

.text-white {
  color: white;
}

.text-black {
  color: #000 !important;
}

.text-orange {
  color: #F5821F;
}

a.text-orange {
  transition: all 0.3s;
  text-decoration: none !important;
}
a.text-orange:hover {
  color: #F5821F;
  text-decoration: underline !important;
}

.text-gray {
  color: #343434;
}

.text-gray48 {
  color: #484848;
}

.text-gray66 {
  color: #666666;
}

.text-gray4D {
  color: #4D4D4D;
}

.text-gray8E {
  color: #8E8E8E;
}

.text-red {
  color: #C60707 !important;
}

.text-brown {
  color: #9E7D54;
}

.text-green {
  color: #00C200;
}

.bg-black {
  background: #000 !important;
}

.bg-blue {
  background: #53C8DD !important;
}

.hover-orange {
  transition: all 0.3s;
}
.hover-orange:hover {
  color: #F5821F;
  text-decoration: underline;
}

.border-orange {
  border: 1px solid #F5821F !important;
}

::placeholder,
::-webkit-input-placeholder {
  color: #B2B2B2 !important;
}

input[type=checkbox]:focus {
  outline: none !important;
  box-shadow: none !important;
}

button,
.pointer {
  transition: all 0.3s !important;
}

.lh10 {
  line-height: 1em;
}

.lh12 {
  line-height: 1.2em;
}

.lh14 {
  line-height: 1.4em;
}

.lh25 {
  line-height: 2.5em;
}

.lh26 {
  line-height: 26px;
}

.lh28 {
  line-height: 28px;
}

.lh30 {
  line-height: 30px;
}

.lh32 {
  line-height: 32px;
}
@media (max-width: 767px) {
  .lh32 {
    line-height: 1.78em;
  }
}

.lh36 {
  line-height: 2em;
}

.fw100 {
  font-weight: 100;
}

.fw300 {
  font-weight: 300;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fw700 {
  font-weight: 700;
}

.ls100 {
  letter-spacing: 0.1em;
}

.ls005 {
  letter-spacing: 0.05em;
}

.ls003 {
  letter-spacing: 0.03em;
}

.ls000 {
  letter-spacing: 0;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-grow {
  flex-grow: 1;
}

.overflow-hidden {
  overflow: hidden;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*font-size*/
.font-96 {
  font-size: 96px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.font-18 {
  font-size: 18px;
  font-size: 18px !important;
}

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

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

.font-15-5 {
  font-size: 15.5px;
}

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

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

@media (max-width: 1400px) {
  .font-96 {
    font-size: 86px;
  }
  .font-80 {
    font-size: 70px;
  }
  .font-75 {
    font-size: 65px;
  }
  .font-70 {
    font-size: 60px;
  }
  .font-65 {
    font-size: 55px;
  }
  .font-60 {
    font-size: 50px;
  }
  .font-55 {
    font-size: 45px;
  }
  .font-50 {
    font-size: 40px;
  }
  .font-45 {
    font-size: 35px;
  }
  .font-43 {
    font-size: 32px;
  }
  .font-40 {
    font-size: 30px;
  }
}
@media (max-width: 1200px) {
  .font-96 {
    font-size: 70px;
  }
  .font-80 {
    font-size: 60px;
  }
  .font-75 {
    font-size: 55px;
  }
  .font-70 {
    font-size: 50px;
  }
  .font-65 {
    font-size: 45px;
  }
  .font-60 {
    font-size: 42px;
  }
  .font-55 {
    font-size: 40px;
  }
  .font-50 {
    font-size: 35px;
  }
  .font-48 {
    font-size: 32px;
  }
  .font-45 {
    font-size: 30px;
  }
  .font-43 {
    font-size: 30px;
  }
  .font-42 {
    font-size: 30px;
  }
  .font-40 {
    font-size: 28px;
  }
  .font-38 {
    font-size: 26px;
  }
  .font-36 {
    font-size: 26px;
  }
  .font-35 {
    font-size: 25px;
  }
  .font-33 {
    font-size: 25px;
  }
  .font-32 {
    font-size: 22px;
  }
  .font-30 {
    font-size: 22px;
  }
  .font-28 {
    font-size: 22px;
  }
  .font-26 {
    font-size: 21px;
  }
  .font-25 {
    font-size: 21px;
  }
  .font-24 {
    font-size: 20px;
  }
  .font-23 {
    font-size: 19px;
  }
  .font-22 {
    font-size: 19px;
  }
  .font-20 {
    font-size: 19px;
  }
}
@media (max-width: 768px) {
  .font-80 {
    font-size: 40px;
  }
  .font-75 {
    font-size: 36px;
  }
  .font-70 {
    font-size: 35px;
  }
  .font-65 {
    font-size: 32px;
  }
  .font-60 {
    font-size: 30px;
  }
  .font-55 {
    font-size: 29px;
  }
  .font-50 {
    font-size: 28px;
  }
  .font-48 {
    font-size: 28px;
  }
  .font-45 {
    font-size: 24px;
  }
  .font-43 {
    font-size: 26px;
  }
  .font-42 {
    font-size: 26px;
  }
  .font-40 {
    font-size: 25px;
  }
  .font-38 {
    font-size: 24px;
  }
  .font-36 {
    font-size: 24px;
  }
  .font-28 {
    font-size: 22px;
  }
  .font-26 {
    font-size: 20px;
  }
  .font-25 {
    font-size: 20px;
  }
  .font-24 {
    font-size: 20px;
  }
  .font-22 {
    font-size: 19px;
  }
  .font-21 {
    font-size: 18px;
  }
  .font-20-6 {
    font-size: 18px;
  }
  .font-20 {
    font-size: 18px;
  }
  .font-19 {
    font-size: 17px;
  }
  .font-18 {
    font-size: 15px;
  }
  .font-17 {
    font-size: 15px;
  }
  .font-15-5 {
    font-size: 15px;
  }
}
@media (max-width: 576px) {
  .font-45 {
    font-size: 20px;
  }
  .font-43 {
    font-size: 21.4px;
  }
  .font-40 {
    font-size: 18px;
  }
  .font-26 {
    font-size: 17px;
  }
  .font-22 {
    font-size: 16px;
  }
  .font-21 {
    font-size: 16px;
  }
  .font-20-6 {
    font-size: 16px;
  }
}
/*折價券*/
.coupon-ticket {
  border-radius: 0px;
  margin: 0 10px 0 0;
}
.coupon-ticket + .coupon-ticket {
  margin-top: 25px;
}
.coupon-ticket p {
  margin-bottom: 0;
}
.coupon-ticket .coupon-ticket-display {
  display: flex;
  min-height: 120px;
  box-shadow: 3px 2px 9px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 10px;
  overflow: hidden;
}
.coupon-ticket .coupon-ticket-display .display-cover {
  flex-shrink: 0;
  width: 164px;
  min-height: 127px;
  border-right: 2px dashed #FBF7F3;
  justify-content: center;
  padding: 8px;
  color: #fff;
  background-color: #F5821F;
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
  border-radius: 10px 0 0 10px;
  position: relative;
}
.coupon-ticket .coupon-ticket-display .display-cover::before {
  top: -9px;
}
.coupon-ticket .coupon-ticket-display .display-cover::after {
  bottom: -9px;
}
.coupon-ticket .coupon-ticket-display .display-cover::before, .coupon-ticket .coupon-ticket-display .display-cover::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #C4C4C4;
  border-radius: 50%;
  background-color: #f4f1f1;
  z-index: 1;
  left: 156px;
}
.coupon-ticket .coupon-ticket-display .display-cover .display-cover-inner {
  border: 1px solid #EFB584;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon-ticket .coupon-ticket-display .display-cover .display-cover-inner .coupon-img {
  text-align: center;
  padding: 5px 10px;
}
.coupon-ticket .coupon-ticket-display .display-cover .display-cover-inner .coupon-img img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.coupon-ticket .coupon-ticket-display > div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.coupon-ticket .coupon-ticket-display > div > div {
  max-width: 100%;
}
.coupon-ticket .coupon-ticket-display .num {
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-weight: 500;
}
.coupon-ticket .coupon-ticket-display .num small {
  font-size: 18.4px;
  display: block;
  letter-spacing: 0.5px;
  line-height: 1.5;
  font-family: "Noto Sans TC";
}
.coupon-ticket .coupon-ticket-display .txt {
  font-size: 18px;
}
.coupon-ticket .coupon-ticket-display span {
  display: inline-block;
}
.coupon-ticket .coupon-ticket-display .display-content {
  flex-grow: 1;
  position: relative;
  padding: 20px 40px;
  background-color: #FBF7F3;
  border: 1px solid #C4C4C4;
  border-radius: 10px;
}
.coupon-ticket .coupon-ticket-display .display-content:lang(zh-Hant), .coupon-ticket .coupon-ticket-display .display-content:lang(zh-Hans) {
  letter-spacing: 0.05em;
}
.coupon-ticket .coupon-ticket-display .display-content:not(.no-status) {
  padding-right: 130px;
}
.coupon-ticket .coupon-ticket-display .display-content .name {
  font-size: 18px;
  color: #000;
  font-weight: 600;
}
.coupon-ticket .coupon-ticket-display .display-content .name a {
  color: #000;
}
.coupon-ticket .coupon-ticket-display .display-content .name a:hover {
  color: #F5821F;
}
.coupon-ticket .coupon-ticket-display .display-content .txt {
  margin-top: 5px;
  color: #4D4D4D;
  line-height: 1.5;
  font-size: 16px;
}
.coupon-ticket .coupon-ticket-display .display-content .display-content-availability {
  position: absolute;
  top: 25px;
  right: 25px;
  text-align: center;
  line-height: 1;
}
.coupon-ticket .coupon-ticket-display.over .display-content {
  background-color: #F3F3F3;
  color: #666666;
}
.coupon-ticket .coupon-ticket-display.over .display-content::before {
  border-left: 2px #fff dashed;
  background-color: #C4C4C4;
}
.coupon-ticket .coupon-ticket-display.over .display-cover {
  border: 1px solid #C4C4C4;
  border-right: 2px dashed #C4C4C4;
  background-color: #F3F3F3;
  color: #666666;
}
.coupon-ticket .coupon-ticket-display.over .display-cover .display-cover-inner {
  border: 1px solid #fff;
}
.coupon-ticket .coupon-ticket-display.over .name {
  color: #666666;
}
.coupon-ticket .coupon-ticket-display.expired {
  opacity: 0.6;
}
.coupon-ticket > div {
  background-color: #ffffff;
}
@media (max-width: 768px) {
  .coupon-ticket .coupon-ticket-display .display-content {
    padding: 15px 20px;
    flex-wrap: wrap;
  }
  .coupon-ticket .coupon-ticket-display .display-content:not(.no-status) {
    padding-right: 20px;
  }
  .coupon-ticket .coupon-ticket-display .display-content .display-content-inner {
    width: 100%;
  }
  .coupon-ticket .coupon-ticket-display .display-content .display-content-availability {
    position: static;
    top: auto;
    right: auto;
    margin-top: 10px;
  }
}
@media (max-width: 576px) {
  .coupon-ticket .coupon-ticket-display .display-content .name {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .coupon-ticket + .coupon-ticket {
    margin-top: 15px;
  }
  .coupon-ticket .coupon-ticket-display {
    flex-wrap: wrap;
  }
  .coupon-ticket .coupon-ticket-display .num small {
    display: inline-block;
  }
  .coupon-ticket .coupon-ticket-display .display-cover {
    width: 100%;
    border-bottom: 2px dashed #FBF7F3;
    border-right: none;
    min-height: 100px;
  }
  .coupon-ticket .coupon-ticket-display .display-cover::before {
    top: auto;
    left: -5px;
    bottom: -8px;
  }
  .coupon-ticket .coupon-ticket-display .display-cover::after {
    bottom: -8px;
    right: -5px;
    left: auto;
  }
  .coupon-ticket .coupon-ticket-display .display-cover .display-cover-inner .coupon-img {
    padding: 5px;
  }
  .coupon-ticket .coupon-ticket-display .display-content {
    border-radius: 0 0 15px 15px;
  }
  .coupon-ticket .coupon-ticket-display .display-content .display-content-availability {
    margin: 10px auto 0 auto;
  }
}

.coupon-rule {
  box-shadow: 3px 2px 9px 0px rgba(0, 0, 0, 0.1019607843);
  border-radius: 10px;
  border: 1px solid #C4C4C4;
  overflow: hidden;
  padding: 0 2em;
  margin-top: -1px;
  background-color: #fff;
  position: relative;
}
.coupon-rule::before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #C4C4C4;
  border-radius: 50%;
  background-color: #f4f1f1;
  z-index: 1;
  left: 156px;
  left: 155px;
  top: -6px;
}
.coupon-rule .collapsible {
  cursor: pointer;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}
.coupon-rule .collapsible:after {
  content: "";
  background-image: url(images/common/+-2.svg);
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  transition: all 0.3s;
}
.coupon-rule .collapsible .rule-title {
  display: inline-block;
  font-size: 16px;
  width: 100%;
}
.coupon-rule .collapsible.active {
  padding-top: 1.5em;
}
.coupon-rule .collapsible.active:after {
  background-image: url(images/common/--1.svg);
  height: 3px;
}
.coupon-rule .collapsible.active + .txt div {
  opacity: 1;
  transition-delay: 0.1s;
}
.coupon-rule .txt {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  line-height: 2;
  letter-spacing: 0.03em;
  font-size: 16px;
}
.coupon-rule .txt div {
  display: block;
  margin-bottom: 2em;
  color: #808080;
  opacity: 0;
  transition: all 0.8s;
}
@media (max-width: 480px) {
  .coupon-rule::before {
    content: none;
  }
}

.coupon-tag {
  border: 1px solid #F5821F;
  border-radius: 5px;
  padding: 0 10px;
  width: 100%;
  height: 40px;
  line-height: 38px;
  color: #F5821F;
  background: #fff;
  min-width: 80px;
  font-size: 15px;
  font-weight: 600;
}
.coupon-tag.no {
  color: #666666;
  border: 1px solid #C4C4C4;
  background-color: transparent;
  font-weight: 400;
}

@media screen and (min-width: 480px) {
  .coupon-ticket .coupon-ticket-display .display-content .display-content-availability .btn {
    display: flex;
  }
}
.popup {
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.popup .popup-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.popup .popup-box {
  position: relative;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-height: 85vh;
}
.popup .popup-box .popup-content {
  position: relative;
}

.product-popup {
  display: none;
  overflow: auto;
  padding: 1em;
}
.product-popup .popup-box {
  min-width: 260px;
  background-color: #ffffff;
  overflow: auto;
}
.product-popup .popup-box .popup-head {
  padding-top: 40px;
  padding-bottom: 20px;
}
.product-popup .popup-box .popup-head .title {
  display: block;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-align: center;
}
.product-popup .popup-box .popup-head .close {
  position: absolute;
  right: 1em;
  top: 1.2em;
  opacity: 1;
  transition: all 0.3s;
}
.product-popup .popup-box .popup-head .close img,
.product-popup .popup-box .popup-head .close svg {
  width: 21px;
}
.product-popup .popup-box .popup-head .close img path,
.product-popup .popup-box .popup-head .close svg path {
  transition: all 0.3s;
}
.product-popup .popup-box .popup-head .close:hover {
  transform: scale(0.95);
}
.product-popup .popup-box .popup-head .close:hover img path,
.product-popup .popup-box .popup-head .close:hover svg path {
  fill: #F5821F !important;
}
.product-popup .popup-box .popup-content {
  padding: 1.5em;
  border-top: 1px solid #E1E1E1;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
}
.product-popup .popup-box .popup-content .coupon-head {
  letter-spacing: 0;
  text-align: center;
  height: 4em;
}
.product-popup .popup-box .popup-content .coupon-head .txt {
  line-height: 1.5;
}
.product-popup .popup-box .popup-content .coupon-head .txt a {
  text-decoration: underline;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner {
  margin-top: 10px;
  background-color: #F4F2F2;
  padding: 20px;
  margin-right: 10px;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .tt {
  display: block;
  color: #333;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field {
  width: 100%;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar {
  display: flex;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar .coupon-textfield {
  display: block;
  width: calc(100% - 110px);
  max-width: 295px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #E2E2E2;
  background-color: #ffffff;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.5;
  border-radius: 5px 0 0 5px;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar .btn {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 110px;
  height: 40px;
  background-color: #B28662;
  border-radius: 0 5px 5px 0;
  color: #fff;
  letter-spacing: 0.3px;
}
.product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar .btn:hover {
  background-color: #9E7D54;
}
@media (max-width: 576px) {
  .product-popup .popup-box .popup-head {
    padding-left: 15px;
    padding-right: 15px;
  }
  .product-popup .popup-box .popup-head .title {
    letter-spacing: normal;
  }
  .product-popup .popup-box .popup-content .coupon-head .coupon-head-inner {
    padding: 10px;
  }
  .product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar .coupon-textfield {
    flex-grow: 1;
  }
  .product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .coupon-field .coupon-bar .btn {
    width: fit-content;
  }
}
.product-popup.for-coupon .popup-box {
  max-width: 1000px;
}
.product-popup.for-coupon .popup-box .popup-content {
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.product-popup.for-coupon .popup-box .popup-content .mCustomScrollBox {
  padding: 0 0 0 1.4em;
}
.product-popup.for-coupon .popup-box .select2-container {
  max-width: 150px;
}
@media (max-width: 768px) {
  .product-popup.for-coupon .popup-box .popup-content {
    height: calc(85vh - 115px);
  }
  .product-popup.for-coupon .popup-box .popup-content .mCustomScrollBox {
    padding: 0;
  }
  .product-popup.for-coupon .popup-box .popup-content .mCSB_inside > .mCSB_container {
    margin-right: 15px;
  }
}
.product-popup.for-contact .popup-box {
  max-width: 875px;
}
.product-popup.for-contact .popup-box .popup-content .contact-table th {
  white-space: nowrap;
  text-align: center;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td {
  text-align: left;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .btn {
  width: 157px;
  height: 35px;
  font-size: 16px;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .btn.brown-btn {
  background-color: #E2DAD4;
  color: #9E7D54;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .btn.brown-btn:hover {
  background-color: #9E7D54;
  color: #fff;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .btn.brown-btn.outline {
  background-color: #fff;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .form-radio label {
  white-space: nowrap;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .form-radio label span {
  width: 1em;
  height: 1em;
  margin-right: 25px;
  background-image: linear-gradient(to bottom, #fff, rgba(0, 0, 0, 0.13));
}
.product-popup.for-contact .popup-box .popup-content .contact-table td .form-radio label span::before {
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
}
.product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(1) {
  text-align: left;
}
.product-popup.for-contact .popup-box .popup-content .contact-button {
  margin-top: 3.5em;
  margin-bottom: 3.5em;
  text-align: center;
}
.product-popup.for-contact .popup-box .popup-content .contact-button .btn {
  width: 190px;
  height: 50px;
  display: inline-flex;
  font-size: 16px;
}
@media (max-width: 992px) {
  .product-popup.for-contact .popup-box .popup-content .contact-table td .form-radio label span {
    margin-right: 10px;
  }
}
@media (max-width: 768px) {
  .product-popup.for-contact .popup-box .popup-content .contact-table th {
    display: none;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table tbody {
    border-top: 1px solid #DCC8B7;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table td {
    display: block;
    width: auto;
    float: left;
    border-bottom: none !important;
    padding: 8px 10px !important;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(1) {
    min-width: 130px;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(2) {
    min-width: 130px;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(3) {
    width: calc(100% - 260px);
    text-align: left;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(4) {
    width: 100%;
    border-bottom: 1px solid #DCC8B7 !important;
    padding-bottom: 15px !important;
    text-align: center;
  }
}
@media (max-width: 576px) {
  .product-popup.for-contact .popup-box .popup-content .contact-table td:nth-of-type(3) {
    width: 100%;
    padding: 4px 10px 4px 40px !important;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-button {
    margin: 25px auto;
  }
  .product-popup.for-contact .popup-box .popup-content .contact-button .btn {
    height: 40px;
  }
}
.product-popup.for-payment .popup-box {
  max-width: 1200px;
}
.product-popup.for-payment .popup-box .popup-content {
  height: 700px;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
.product-popup.for-payment .popup-box .popup-content .mCustomScrollBox {
  padding: 0 0 0 1.4em;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style th,
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style td {
  text-align: left;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style th:first-child,
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style td:first-child {
  width: 30%;
  padding-left: 7%;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style th:nth-child(2) {
  text-align: center;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style td:first-child {
  border-right: 1px solid #DCC8B7;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style td:nth-child(2) {
  padding-left: 10%;
}
.product-popup.for-payment .popup-box .popup-content .payment-table.basic-table-style tr:nth-child(even) {
  /* 匹配偶数行 */
  background-color: rgba(203, 203, 203, 0.1294117647);
}
.product-popup.fixed-head .popup-box {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  padding: 1em 0;
}
.product-popup.fixed-head .popup-box .popup-content {
  max-height: 100%;
  border: none;
  padding-top: 0;
  overflow: auto;
  padding-left: 5.5%;
  padding-right: 2%;
  padding-bottom: 1em;
  height: 70vh;
  margin: auto;
}
.product-popup.fixed-head .popup-box .popup-content .basic-table-style {
  width: 100%;
  color: rgba(0, 0, 0, 0.9);
}
.product-popup.fixed-head .popup-box .popup-content .basic-table-style th,
.product-popup.fixed-head .popup-box .popup-content .basic-table-style td {
  padding: 15px 20px;
  border-bottom: 1px solid #DCC8B7;
  text-align: center;
  line-height: 1.35;
  vertical-align: middle;
  font-size: 16px;
}
.product-popup.fixed-head .popup-box .popup-content .basic-table-style thead th {
  background-color: #F2EAE3;
  border-top: 1px solid #DCC8B7;
  font-weight: 500;
}
.product-popup .nicescroll-rails {
  margin-left: -5px;
}
.product-popup .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #C4C4C4;
}
.product-popup .mCSB_inside > .mCSB_container {
  margin-right: 4.5%;
}

.coupon-primary .coupons-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-height: 50px;
  min-height: 50px;
}
.coupon-primary .coupons-head .title {
  color: rgba(0, 0, 0, 0.9);
  padding-left: 15px;
  margin-bottom: 0;
}
@media (max-width: 576px) {
  .coupon-primary .coupons-list {
    margin: 10px 0 20px 0;
  }
}

@media screen and (min-width: 768px) {
  .product-popup .popup-box {
    max-width: 775px;
  }
  .product-popup .popup-box .popup-content .coupon-head .coupon-head-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: center;
  }
  .product-popup .popup-box .popup-content .coupon-head .coupon-head-inner .tt {
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 15px;
    line-height: 38px;
  }
}
@media screen and (max-width: 480px) {
  .product-popup .popup-box .popup-content {
    padding-left: 15px !important;
    padding-right: 0px !important;
  }
}
/* ==========================================================================
    header
==========================================================================*/
#header {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  font-family: "Noto Sans TC";
  z-index: 20;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 1s;
}
#header .icon {
  width: 25px;
  padding-top: 10%;
}
#header .icon svg {
  fill: #fff;
}
#header.active {
  background-color: white;
  box-shadow: 0px -5px 20px rgba(0, 0, 0, 0.1490196078);
}
#header.active .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a,
#header.active .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span {
  color: #000;
}
#header.active .icon svg {
  fill: #BFBFBF;
}
#header.active .icon svg:hover {
  fill: #F5821F;
}
@media (max-width: 1199px) {
  #header {
    height: 120px;
    padding-top: 20px;
  }
}
@media (max-width: 991px) {
  #header {
    height: 65px;
    padding-top: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a,
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span {
    color: #000;
  }
  #header .icon {
    width: 20px;
  }
  #header .icon svg {
    fill: #BFBFBF;
  }
}
#header .header-wrapper {
  max-width: 1920px;
  margin: auto;
}
#header .header-wrapper .logo {
  width: 273.9px;
  height: 34.5px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 4%;
}
#header .header-wrapper .logo a {
  display: block;
  height: 100%;
  background: url(./images/logo.svg) center no-repeat;
  background-size: cover;
}
@media (max-width: 1199px) {
  #header .header-wrapper .logo {
    position: static;
    -webkit-transform: none;
    transform: none;
    margin: auto;
    height: 35px;
  }
}
@media (max-width: 991px) {
  #header .header-wrapper .logo {
    position: absolute;
    left: 18px;
    top: 55%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    width: 84px;
    height: 38px;
    z-index: 10;
  }
  #header .header-wrapper .logo a {
    background: url(./images/logo2.svg) center no-repeat;
  }
}
#header .header-wrapper .menu-toggle {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 45%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  display: none;
}
@media (max-width: 991px) {
  #header .header-wrapper .menu-toggle {
    display: block;
  }
}
#header .header-wrapper .menu-toggle div {
  height: 3px;
  width: 100%;
  background-color: #F5821F;
  -webkit-transition: width 0.5s ease, top 0.5s, -webkit-transform 0.5s;
  transition: width 0.5s ease, top 0.5s, -webkit-transform 0.5s;
  transition: width 0.5s ease, top 0.5s, transform 0.5s;
  transition: width 0.5s ease, top 0.5s, transform 0.5s, -webkit-transform 0.5s;
  position: absolute;
  right: 0;
}
#header .header-wrapper .menu-toggle div.bar1 {
  top: 7px;
}
#header .header-wrapper .menu-toggle div.bar2 {
  top: 14px;
}
#header .header-wrapper .menu-toggle div.bar3 {
  top: 21px;
}
#header .header-wrapper .menu-toggle.active div {
  background-color: #666666;
}
#header .header-wrapper .menu-toggle.active div.bar1 {
  width: 20px;
  top: 14px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#header .header-wrapper .menu-toggle.active div.bar2 {
  opacity: 0;
}
#header .header-wrapper .menu-toggle.active div.bar3 {
  width: 20px;
  top: 14px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#header .header-wrapper .iconBox {
  top: 50%;
  position: absolute;
  right: 3%;
  transform: translateY(-50%);
}
#header .header-wrapper .iconBox > li {
  float: left;
  margin: 0 1em;
}
#header .header-wrapper .iconBox > li a {
  display: block;
  text-align: center;
}
#header .header-wrapper .iconBox > li.search {
  position: relative;
}
#header .header-wrapper .iconBox > li.search.actived .input_wrapper {
  width: 240px;
  left: -245px;
  border: 1px solid #cfcfcf;
  top: 48%;
}
#header .header-wrapper .iconBox > li.search.actived .input_wrapper input {
  opacity: 1;
}
#header .header-wrapper .iconBox > li.search.actived .input_wrapper button {
  opacity: 1;
}
#header .header-wrapper .iconBox > li.search .input_wrapper {
  display: inline-block;
  overflow: hidden;
  width: 0px;
  height: 40px;
  -webkit-transition: width 1s, border 1s, left 1s, opacity 1s;
  transition: width 1s, border 1s, left 1s, opacity 1s;
  background-color: white;
  position: absolute;
  left: 0px;
  top: 48%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 40px;
}
#header .header-wrapper .iconBox > li.search .input_wrapper input {
  border: none;
  width: 200px;
  margin-left: 15px;
  background: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  font-size: 16px;
  line-height: 24px;
}
#header .header-wrapper .iconBox > li.search .input_wrapper button {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 38px;
  height: 38px;
  color: #ACACAC;
  font-size: 22px;
  margin: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#header .header-wrapper .iconBox > li.search .input_wrapper button i::before {
  font-size: 22px;
}
#header .header-wrapper .iconBox > li.search .search-toggle {
  text-align: center;
  cursor: pointer;
}
#header .header-wrapper .iconBox > li.search .search-toggle:hover i {
  color: #F5821F;
}
#header .header-wrapper .iconBox > li.bag {
  position: relative;
}
#header .header-wrapper .iconBox > li.bag .icon {
  cursor: pointer;
}
#header .header-wrapper .iconBox > li.bag .icon span {
  position: absolute;
  background-color: #F5821F;
  color: #fff;
  right: -22px;
  top: -8px;
  border-radius: 50%;
  display: block;
  min-width: 28px;
  text-align: center;
  font-size: 16px;
  height: 28px;
  line-height: 28px;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
}
#header .header-wrapper .iconBox .dropdown-box {
  position: absolute;
  top: 30px;
  padding-top: 0;
  width: 370px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  max-height: 0;
  z-index: 10;
}
#header .header-wrapper .iconBox .dropdown-box.active {
  overflow: visible;
  opacity: 1;
  padding-top: 50px;
  max-height: 455px;
}
#header .header-wrapper .iconBox .dropdown-box .dropdown-inner {
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1411764706);
}
#header .header-wrapper .iconBox .bag .dropdown-box {
  width: 370px;
  transform: translateX(-80%);
}
#header .header-wrapper .iconBox .bag .dropdown-box .pd-box {
  max-height: 370px;
  overflow-y: auto;
  padding: 1em 0.5em 1em 1em;
}
#header .header-wrapper .iconBox .bag .dropdown-box .pd-box .mCSB_inside > .mCSB_container {
  margin-right: 0px;
}
#header .header-wrapper .iconBox .bag .dropdown-box .dropdown-inner {
  border-radius: 10px;
}
#header .header-wrapper .iconBox .bag .dropdown-box .cart-foot {
  border-top: 1px solid #E2DAD4;
  padding: 0.2em 1em;
}
#header .header-wrapper .iconBox .bag .dropdown-box .all-btn {
  border-radius: 10px;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul {
  padding: 0 2.5em 2px 0.5em;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item {
  display: flex;
  align-items: center;
  padding: 1em 0;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item + .list-item {
  border-top: 1px solid rgba(226, 218, 212, 0.6);
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-pic {
  background-color: #F8F8F8;
  border-radius: 15px;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-pic a {
  display: block;
  width: 80px;
  height: 85px;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-name {
  width: calc(100% - 100px);
  padding: 0 0 0 1em;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-name a {
  color: #000;
  text-align: left;
  line-height: 1.6;
  text-decoration: none;
  transition: all 0.3s;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-name a:hover {
  color: #F5821F;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-delete {
  width: 18px;
  margin-left: 1em;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-delete button {
  height: 20px;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-delete button i {
  font-size: 20px;
  color: #B28661;
}
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-delete button img,
#header .header-wrapper .iconBox .bag .dropdown-box ul li.list-item .item-delete button svg {
  fill: #8E8E8E;
  width: 18px;
}
#header .header-wrapper .iconBox .person .dropdown-box {
  transform: translateX(-50%);
  width: 230px;
}
#header .header-wrapper .iconBox .person .dropdown-box .pd-box {
  padding-bottom: 1em;
}
#header .header-wrapper .iconBox .person .dropdown-box .pd-box div {
  padding: 0.5em;
}
#header .header-wrapper .iconBox .person .dropdown-box .dropdown-inner {
  border-radius: 20px;
  padding: 1em 10px;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot {
  border-top: 1px solid #E2DAD4;
  padding: 1em 0.5em 0.5em 0.5em;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a {
  display: flex;
  align-items: center;
  text-align: left;
  color: #000;
  transition: all 0.3s;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a img,
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a svg {
  width: 20px;
  transition: all 0.3s;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a:hover {
  color: #F5821F;
  text-decoration: none;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a:hover img,
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a:hover svg {
  fill: #F5821F;
}
#header .header-wrapper .iconBox .person .dropdown-box .person-foot a span {
  margin-bottom: 2px;
  display: inline-block;
  margin-left: 5px;
}
#header .header-wrapper .iconBox .person .dropdown-box ul {
  list-style: none;
  padding: 0 2em;
}
#header .header-wrapper .iconBox .person .dropdown-box ul li {
  position: relative;
}
#header .header-wrapper .iconBox .person .dropdown-box ul li a {
  text-align: left;
  color: #000;
  line-height: 2.2;
  letter-spacing: 0.03em;
  transition: all 0.3s;
}
#header .header-wrapper .iconBox .person .dropdown-box ul li a:hover {
  font-weight: 600;
  color: #F5821F;
  text-decoration: none;
}
#header .header-wrapper .iconBox .person .dropdown-box ul li::before {
  content: ".";
  color: #F5821F;
  font-size: 20px;
  position: absolute;
  left: -18px;
  top: -3px;
}
#header .header-wrapper .iconBox .person .dropdown-box hr {
  border-top: 1px solid #C4C4C4;
}
@media (max-width: 1199px) {
  #header .header-wrapper .iconBox {
    top: 35%;
    right: 25px;
  }
}
@media (max-width: 991px) {
  #header .header-wrapper .iconBox {
    right: 60px;
    line-height: 1em;
    top: 50%;
  }
  #header .header-wrapper .iconBox li.bag span {
    padding: 2px;
  }
  #header .header-wrapper .iconBox li.bag .icon span {
    min-width: 20px;
    height: 20px;
    font-size: 14px;
    top: -5px;
    right: -15px;
    line-height: 18px;
  }
  #header .header-wrapper .iconBox .dropdown-box.active {
    display: none !important;
  }
}
#header .header-wrapper .searchBox {
  background-color: #F5821F;
  width: 100%;
  padding: 50px 10% 70px 10%;
  font-size: 16px;
  position: absolute;
  top: 100px;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s;
  box-shadow: 5.2px 5.2px 4.8px rgba(0, 0, 0, 0.1215686275);
}
#header .header-wrapper .searchBox.active {
  opacity: 1;
  z-index: 5;
  pointer-events: all;
}
@media (max-width: 1199px) {
  #header .header-wrapper .searchBox {
    top: 120px;
  }
}
@media (max-width: 992px) {
  #header .header-wrapper .searchBox {
    top: 65px;
    padding: 1.5em;
  }
}
#header .header-wrapper .searchBox .input_wrapper {
  position: relative;
  max-width: 900px;
  margin: auto;
}
#header .header-wrapper .searchBox .input_wrapper input {
  width: 100%;
  background: #fff;
  font-size: 16px;
  border: none;
  height: 55px;
  padding: 1em 1.5em;
  border-radius: 5px;
}
#header .header-wrapper .searchBox .input_wrapper .select1,
#header .header-wrapper .searchBox .input_wrapper .select2 {
  width: 43.5%;
  margin-right: 0.5em;
}
@media (max-width: 1133px) {
  #header .header-wrapper .searchBox .input_wrapper .select1,
  #header .header-wrapper .searchBox .input_wrapper .select2 {
    width: 100%;
    margin-bottom: 1em;
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  #header .header-wrapper .searchBox .input_wrapper .select1,
  #header .header-wrapper .searchBox .input_wrapper .select2 {
    margin-bottom: 0em;
  }
}
#header .header-wrapper .searchBox .input_wrapper button {
  margin: 0;
}
#header .header-wrapper .searchBox .input_wrapper button.btn1 {
  position: absolute;
  right: 1em;
  top: 57px;
  width: 20px;
  height: 20px;
}
#header .header-wrapper .searchBox .input_wrapper button.btn2 {
  width: 100px;
  height: 56px;
  font-size: 16px;
  background-color: #2B2B2B;
  color: #fff;
  border-radius: 5px;
}
@media (max-width: 1133px) {
  #header .header-wrapper .searchBox .input_wrapper button.btn2 {
    width: 100%;
  }
}
#header .header-wrapper .searchBox .select2-container {
  width: 100% !important;
}
#header .header-wrapper .searchBox .select2-container .select2-selection--single {
  height: 55px;
  border: none;
  line-height: normal;
  padding: 1em 1.5em;
  border-radius: 5px;
}
#header .header-wrapper .searchBox .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 1.5em;
  padding: 0;
}
#header .header-wrapper .searchBox .select2-container .select2-selection--single .select2-selection__arrow {
  height: auto;
  top: 50%;
  right: 1em;
  width: 20px;
}
#header .header-wrapper .searchBox .select2-container .select2-selection--single .select2-selection__arrow b {
  transition: all 0.3s;
  content: "";
  display: inline-block;
  border: none;
  position: absolute;
  width: 13px;
  height: 15px;
  right: 2.8em;
  top: 0px;
  background-image: url(../styles/images/common/down-2.svg);
  background-repeat: no-repeat;
  transition: all 0.3s;
}
@media screen and (max-width: 991px) {
  #header .header-wrapper .gray_block.active {
    left: 0;
    top: 65px;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    opacity: 0.5;
  }
}
@media screen and (max-width: 575px) {
  #header .header-wrapper .gray_block.active {
    display: none;
  }
}
#header .header-wrapper .bg_phone .infoBox {
  padding: 8.5%;
  display: none;
}
#header .header-wrapper .bg_phone .info1 {
  background-color: #F3F3F3;
  display: flex;
  padding: 1em 2% 0.8em 2%;
  justify-content: center;
  align-items: center;
}
#header .header-wrapper .bg_phone .info1 img,
#header .header-wrapper .bg_phone .info1 svg {
  margin-right: 2em;
  margin-bottom: 3px;
  width: 50px;
}
#header .header-wrapper .bg_phone .info1 img path,
#header .header-wrapper .bg_phone .info1 svg path {
  fill: #000 !important;
}
#header .header-wrapper .bg_phone .info1 span {
  font-size: 16px;
  display: block;
}
#header .header-wrapper .bg_phone .info1 a {
  font-size: 24px;
  color: #F5821F;
}
#header .header-wrapper .bg_phone .info2 div {
  justify-content: space-around;
  padding: 2em 0;
}
#header .header-wrapper .bg_phone .info2 div a {
  border: 1px solid #000;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
#header .header-wrapper .bg_phone .info2 div a .svg {
  height: 18px;
  fill: #343434;
  transition: all 0.3s;
}
#header .header-wrapper .bg_phone .info2 div a:hover {
  border: 1px solid #F5821F;
}
#header .header-wrapper .bg_phone .info2 div a:hover .svg {
  fill: #F5821F;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu {
  float: left;
  margin-left: 26%;
  font-size: 18px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li {
  line-height: 100px;
  position: relative;
  float: left;
  margin: 0 20px;
  padding: 0 2px;
  font-weight: lighter;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a,
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span {
  padding: 0 6px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: color 0.3s, background-color 0.5s;
  transition: color 0.3s, background-color 0.5s;
  display: block;
  letter-spacing: 0.5px;
  font-weight: 400;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a:hover,
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span:hover {
  color: #F5821F;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a > i,
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span > i {
  display: none;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > .submenu {
  border: 1px solid #F2F2F2;
  background: white;
  transition: background 0.5s;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > .submenu li {
  position: relative;
  -webkit-transition: padding-left 0.3s, padding-right 0.3s;
  transition: padding-left 0.3s, padding-right 0.3s;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > .submenu li:hover > a {
  color: #F5821F;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > .submenu li::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url("images/indication.svg") center no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > .submenu li > a {
  color: #343434;
  display: block;
  text-decoration: none;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  letter-spacing: 0.3px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li:not(.category) > ul {
  width: 360px;
  display: none;
  padding: 15px 10px 10px 23px;
  font-size: 16px;
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-shadow: 5.2px 5.2px 4.8px rgba(0, 0, 0, 0.12);
  box-shadow: 5.2px 5.2px 4.8px rgba(0, 0, 0, 0.12);
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li:not(.category) > ul > li {
  line-height: 1.2em;
  padding: 8.5px 0;
  font-weight: normal;
  padding-right: 20px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products {
  position: static;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu {
  display: none;
  padding: 60px 10%;
  font-size: 16px;
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-shadow: 5.2px 5.2px 4.8px rgba(0, 0, 0, 0.12);
  box-shadow: 5.2px 5.2px 4.8px rgba(0, 0, 0, 0.12);
  width: 100%;
}
@media (max-width: 1500px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu {
    padding: 4% 5%;
  }
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row {
  margin-left: -10px;
  margin-right: -10px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .category {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #0D0D0D;
  display: block;
  line-height: normal;
  margin-bottom: 15px;
  text-decoration: none;
  -webkit-transition: border-bottom 0.3s, color 0.3s;
  transition: border-bottom 0.3s, color 0.3s;
  max-width: none;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .category + .icon-indication {
  display: none;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .col {
  padding-left: 10px;
  padding-right: 10px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .col ul li {
  line-height: 1.3em;
  padding-right: 20px;
  word-wrap: break-word;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .col ul li a {
  font-weight: normal;
  padding: 8.5px 0;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .col ul li:hover {
  padding-right: 0px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu > .row .col:nth-child(2) > div:nth-child(2) {
  margin-top: 45px;
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu .box {
  text-align: right;
  max-width: 280px;
  float: right;
  position: relative;
}
@media (max-width: 991px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu .box {
    float: none;
    margin: auto;
    padding: 10%;
    max-width: none;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu .box img {
    width: 100%;
  }
}
#header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu .box::before {
  content: "";
  height: 280px;
  position: absolute;
  left: -20%;
  width: 1px;
  background: rgba(0, 0, 0, 0.1019607843);
}
@media (max-width: 1500px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li.products > .submenu .box::before {
    content: none;
  }
}
@media (max-width: 1600px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu {
    margin-left: 350px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li {
    margin: 0 16px;
  }
}
@media (max-width: 1400px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu {
    margin-left: 360px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li {
    margin: 0 0px;
  }
}
@media (max-width: 1600px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul:not(.menu) {
    margin-right: 20px;
  }
}
@media (max-width: 1199px) {
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu {
    margin-left: 0;
    margin: auto;
    display: table;
    float: none;
    margin-top: 13px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li {
    line-height: 40px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li.products .submenu {
    top: 120px;
    padding: 1em 5% 2em 5%;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li.products .submenu > .row .col ul li {
    line-height: 0.8em;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li.products .submenu > .row .category {
    margin-bottom: 5px;
    margin-top: 20px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li.products .submenu .col-lg-3 {
    margin: auto;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li:not(.category) > ul li::before {
    display: none;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li:not(.category) > ul li:hover {
    padding-left: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li:not(.category) > ul li:hover a {
    color: black;
    font-weight: normal;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li:not(.category) > ul {
    top: 53px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu li:after {
    display: none;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper .user {
    position: absolute;
    right: 160px;
    top: 0;
  }
}
@media (max-width: 991px) {
  #header .header-wrapper .bg_phone {
    width: 320px;
    overflow-y: auto;
    position: fixed;
    display: block;
    right: 0;
    top: 65px;
    border-top: 1px solid #CBCBCB;
    background: white;
    height: calc(100vh - 65px);
    z-index: 4;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transform: translateX(320px);
    transform: translateX(320px);
  }
  #header .header-wrapper .bg_phone.active {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  #header .header-wrapper .bg_phone .infoBox {
    display: block;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper {
    -webkit-overflow-scrolling: touch;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu {
    display: block;
    margin-top: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li {
    float: none;
    width: 100%;
    padding: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transition: color 0.3s, background-color 0.5s;
    transition: color 0.3s, background-color 0.5s;
    margin-left: 0;
    border-bottom: 1px solid #DBDBDB;
    background-color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.active:after {
    display: none;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.slideIn {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(1) {
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(2) {
    -webkit-transition: -webkit-transform 0.55s;
    transition: -webkit-transform 0.55s;
    transition: transform 0.55s;
    transition: transform 0.55s, -webkit-transform 0.55s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(3) {
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(4) {
    -webkit-transition: -webkit-transform 0.65s;
    transition: -webkit-transform 0.65s;
    transition: transform 0.65s;
    transition: transform 0.65s, -webkit-transform 0.65s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(5) {
    -webkit-transition: -webkit-transform 0.7s;
    transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transition: transform 0.7s, -webkit-transform 0.7s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(6) {
    -webkit-transition: -webkit-transform 0.75s;
    transition: -webkit-transform 0.75s;
    transition: transform 0.75s;
    transition: transform 0.75s, -webkit-transform 0.75s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(7) {
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(8) {
    -webkit-transition: -webkit-transform 0.85s;
    transition: -webkit-transform 0.85s;
    transition: transform 0.85s;
    transition: transform 0.85s, -webkit-transform 0.85s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(9) {
    -webkit-transition: -webkit-transform 0.9s;
    transition: -webkit-transform 0.9s;
    transition: transform 0.9s;
    transition: transform 0.9s, -webkit-transform 0.9s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(10) {
    -webkit-transition: -webkit-transform 0.95s;
    transition: -webkit-transform 0.95s;
    transition: transform 0.95s;
    transition: transform 0.95s, -webkit-transform 0.95s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(11) {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:nth-child(12) {
    -webkit-transition: -webkit-transform 1.05s;
    transition: -webkit-transform 1.05s;
    transition: transform 1.05s;
    transition: transform 1.05s, -webkit-transform 1.05s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.open > span {
    color: #fff;
    background-color: #343434;
    text-align: center;
    font-weight: 500;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.open > span > i {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg);
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.open .icon-indication {
    color: #fff;
    left: 2em;
    right: auto;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:hover > span,
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:hover > a {
    color: #fff !important;
    background-color: #343434;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:hover .icon-indication {
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu {
    height: auto !important;
    opacity: 0;
    left: -100%;
    transform: none;
    padding: 0px;
    border: none;
    box-shadow: none;
    display: block !important;
    top: 60px;
    transition: all 0.3s;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu > span {
    height: 60px;
    background-color: #343434;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu > span i {
    transform: rotate(-180deg) scale(0.65);
    position: absolute;
    left: 1em;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row {
    margin: 0;
    display: block;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group {
    position: relative;
    border-bottom: #CBCBCB 1px solid;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group .icon-indication {
    right: 20px;
    left: auto;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group:hover {
    background-color: #F5821F;
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group:hover .icon-indication {
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group:hover .category {
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group.open .category {
    background-color: #F5821F;
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col > .group.open .icon-indication {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col .category {
    font-size: 18px;
    padding: 0em 1.5em;
    border: 0;
    font-weight: 400;
    margin: 0;
    transition: background-color 0.3s;
    line-height: 60px;
    max-width: 100%;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col .category + .icon-indication {
    display: block;
    position: absolute;
    top: 10px;
    right: 17px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #999999;
    pointer-events: none;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col ul {
    display: none;
    background-color: #fff;
    padding: 1em 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col ul > li a {
    padding: 0;
    padding-left: 1.6em;
    line-height: 40px;
    font-size: 16px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products > .submenu .row .col:nth-child(2) > div:nth-child(2) {
    margin-top: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products.open {
    z-index: 1000;
    position: absolute;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li.products.open > .submenu {
    opacity: 1;
    left: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:not(.category) > ul.submenu {
    width: 100%;
    position: static;
    -webkit-transform: none;
    transform: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
    background: inherit;
    border: none;
    padding-top: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:not(.category) > ul.submenu li {
    padding: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li:not(.category) > ul.submenu li a {
    line-height: 28px;
    padding-left: 20px;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li > span {
    position: relative;
    line-height: 60px;
    padding-left: 1.5em;
    padding-right: 0;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li > span .icon-indication {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
    font-size: 12px;
    color: #999999;
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li > a {
    position: relative;
    line-height: 60px;
    padding-left: 1.5em;
    padding-right: 0;
    color: #000;
  }
}
@media (max-width: 575px) {
  #header .header-wrapper .bg_phone {
    width: 100%;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #header .header-wrapper .bg_phone .scroll_wrapper ul.menu > li {
    -webkit-transform: translateX(80%);
    transform: translateX(80%);
  }
}
#header .header-wrapper .user {
  position: absolute;
  top: 27px;
  right: 173px;
  font-weight: bold;
  display: none;
}
@media (max-width: 991px) {
  #header .header-wrapper .user {
    top: 19px;
    right: 65px;
    font-size: 15px;
  }
}
@media (max-width: 575px) {
  #header .header-wrapper .user {
    right: 57px;
  }
}

/* ==========================================================================
    footer
 ==========================================================================*/
#footer {
  background: #1D1D1D;
  font-family: "Noto Sans TC";
  padding: 2em 3em;
  clear: both;
  position: relative;
  z-index: 2;
}
#footer #top {
  position: fixed;
  bottom: -350px;
  right: 30px;
  cursor: pointer;
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
  transition: transform 0.3s, opacity 0.5s, bottom 0.9s;
  opacity: 0;
  z-index: 100;
}
#footer #top.show {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  bottom: 50px;
}
#footer #top .history {
  border: 1px solid #DEDEDE;
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
  width: 90px;
}
#footer #top .history span {
  background-color: #F2F2F2;
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
}
#footer #top .history > div a {
  height: 92px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#footer #top .history > div a:not(:nth-last-child(1)) {
  border-bottom: 1px solid #DEDEDE;
}
#footer #top .history > div a img {
  width: 80px;
  transition: all 0.3s;
}
#footer #top .history > div a:hover img {
  transform: scale(1.1);
}
#footer #top .line {
  width: 70px;
  height: 70px;
  background-color: #F5821F;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 1em;
  transition: all 0.3s;
}
#footer #top .line img,
#footer #top .line svg {
  width: 30px;
  fill: #fff;
}
#footer #top .line:hover {
  transform: scale(0.95);
}
#footer #top .top {
  margin: auto;
  margin-top: 1em;
  width: 70px;
  height: 70px;
  background: #fff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2509803922);
  border: 2px solid #D3D3D3;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s;
}
#footer #top .top i {
  color: #000;
  position: absolute;
  top: 48%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#footer #top .top i::before {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  font-weight: 900;
  font-size: 15px;
}
#footer #top .top:hover {
  opacity: 0.8;
  transform: scale(0.95);
}
#footer .topBox {
  display: flex;
  justify-content: space-between;
  padding: 4% 0;
}
#footer .topBox > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#footer .topBox > div > div {
  margin-left: 8%;
}
#footer .topBox > div > div > div:nth-child(1) {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5em;
}
#footer .topBox > div > div > div:nth-child(2) {
  color: #8E8E8E;
  font-size: 16px;
}
#footer .center {
  border-top: 1px solid #343434;
  padding: 5% 45px;
}
#footer .center .LBox {
  display: flex;
  justify-content: space-between;
  width: 75%;
}
#footer .center .LBox > li {
  padding: 0 10px;
  min-width: 200px;
  height: auto !important;
}
#footer .center .LBox > li span.title {
  display: block;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  color: #fff;
}
#footer .center .LBox > li span.title a {
  color: #fff;
  transition: all 0.3s;
}
#footer .center .LBox > li span.title a:hover {
  color: #F5821F;
  text-decoration: none;
}
#footer .center .LBox > li ul li {
  padding: 5px 0;
  font-size: 18px;
  letter-spacing: 0.03em;
}
#footer .center .LBox > li ul li a {
  color: #666666;
  text-decoration: none;
  -webkit-transition: color 0.3s, text-shadow 0.3s;
  transition: color 0.3s, text-shadow 0.3s;
}
#footer .center .LBox > li ul li a:hover {
  color: #F5821F;
  text-shadow: 0.1px 0.1px 1px #003913;
}
#footer .center .RBox {
  max-width: 280px;
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#footer .center .RBox > div:nth-child(2) a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #2C2C2C;
  border-radius: 4.3px;
  width: 100%;
  max-width: 280px;
  min-height: 85px;
  margin: 2.5em 0;
  padding: 1em;
  text-decoration: none;
  transition: all 0.3s;
}
#footer .center .RBox > div:nth-child(2) a img,
#footer .center .RBox > div:nth-child(2) a svg {
  width: 48px;
}
#footer .center .RBox > div:nth-child(2) a img path,
#footer .center .RBox > div:nth-child(2) a svg path {
  transition: all 0.3s;
}
#footer .center .RBox > div:nth-child(2) a:hover {
  color: #F5821F;
  border: 1px solid rgba(245, 130, 31, 0.5019607843);
}
#footer .center .RBox > div:nth-child(2) a:hover svg path {
  fill: #F5821F !important;
}
#footer .center .RBox > div:nth-child(2) span {
  display: block;
  line-height: 30px;
}
#footer .center .RBox > div:nth-child(3) {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15%;
  padding: 0 0.5em;
}
#footer .center .RBox > div:nth-child(3) a {
  width: 48px;
  height: 48px;
  border: 1px solid #666666;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  transition: all 0.3s;
  margin: 0 5px;
}
#footer .center .RBox > div:nth-child(3) a .svg {
  fill: #666666;
  transition: all 0.3s;
}
#footer .center .RBox > div:nth-child(3) a:hover {
  border: 1px solid #F5821F;
}
#footer .center .RBox > div:nth-child(3) a:hover .svg {
  fill: #F5821F;
}
#footer .center .RBox > div:nth-child(3) a:nth-child(1) .svg {
  width: 20px;
}
#footer .center .RBox > div:nth-child(3) a:nth-child(2) .svg {
  width: 10px;
}
#footer .center .RBox > div:nth-child(3) a:nth-child(3) .svg {
  width: 18px;
}
#footer .center .RBox > div:nth-child(3) a:nth-child(4) .svg {
  width: 16px;
}
#footer .center .RBox > div:nth-child(4) {
  color: #8E8E8E;
  max-width: 280px;
  margin: auto;
  text-align: right;
}
#footer .center .RBox > div:nth-child(4) span {
  display: block;
}
#footer .center .RBox > div:nth-child(4) span a {
  color: #8E8E8E;
  transition: all 0.3s;
}
#footer .center .RBox > div:nth-child(4) span a:hover {
  color: #F5821F;
  text-decoration: none;
}
@media (max-width: 1750px) {
  #footer #top .history {
    display: none;
  }
}
@media (max-width: 1450px) {
  #footer .topBox {
    max-width: 900px;
    margin: auto;
  }
  #footer .topBox > div div {
    margin-left: 0;
    margin-top: 1em;
    text-align: center;
    width: 100%;
  }
  #footer .center {
    max-width: 900px;
    margin: auto;
    padding: 5% 0;
  }
  #footer .center .LBox {
    width: 100%;
  }
  #footer .center .LBox > li {
    min-width: auto;
  }
  #footer .center .RBox {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: initial;
    max-width: none;
    padding-top: 5%;
  }
  #footer .center .RBox > div {
    margin: 0 !important;
  }
  #footer .center .RBox > div:nth-child(4) {
    width: 100%;
    max-width: none;
    text-align: center;
    padding-top: 5%;
  }
  #footer .center .RBox > div:nth-child(4) span {
    display: inline-block;
  }
}
@media (max-width: 1199px) {
  #footer #top {
    right: 15px;
  }
  #footer #top .top,
  #footer #top .line {
    width: 50px;
    height: 50px;
    margin-top: 0.5em;
  }
  #footer #top .top img,
  #footer #top .top svg,
  #footer #top .line img,
  #footer #top .line svg {
    width: 25px;
  }
}
@media (max-width: 991px) {
  #footer .topBox {
    max-width: 700px;
  }
  #footer .topBox > div {
    margin: 1em 0;
  }
  #footer .topBox > div div span:nth-child(1) {
    font-size: 16px;
  }
  #footer .topBox > div div span:nth-child(2) {
    font-size: 14px;
  }
  #footer .center {
    max-width: 700px;
    padding: 5% 0;
  }
  #footer .center .LBox {
    width: 100%;
  }
  #footer .center .LBox > li {
    min-width: auto;
  }
  #footer .center .LBox > li ul li {
    font-size: 16px;
  }
  #footer .center .LBox > li span.title {
    font-size: 16px;
  }
  #footer .center .RBox > div:nth-child(4) {
    max-width: 280px;
    text-align: center;
    padding-top: 1em;
  }
  #footer .center .RBox > div:nth-child(4) span {
    display: block;
  }
}
@media (max-width: 767px) {
  #footer {
    padding: 2em 0;
  }
  #footer #top {
    bottom: 20px;
    right: 10px;
  }
  #footer #top .top,
  #footer #top .line {
    width: 40px;
    height: 40px;
  }
  #footer #top .top img,
  #footer #top .top svg,
  #footer #top .line img,
  #footer #top .line svg {
    width: 20px;
  }
  #footer .topBox {
    flex-wrap: wrap;
    padding: 4% 3em;
  }
  #footer .topBox > div {
    flex-wrap: nowrap;
  }
  #footer .topBox > div img {
    width: 110px;
  }
  #footer .topBox > div div {
    margin-left: 2em;
    text-align: left;
  }
  #footer .topBox > div div span:nth-child(1) {
    font-size: 18px;
  }
  #footer .topBox > div div span:nth-child(2) {
    font-size: 16px;
  }
  #footer .center {
    max-width: none;
    justify-content: center;
    flex-direction: column;
    padding: 5% 3em;
  }
  #footer .center > a.title {
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    text-decoration: none;
    font-family: "Noto Sans TC";
    padding-top: 1em;
  }
  #footer .center .LBox {
    display: none;
  }
  #footer .center .RBox {
    justify-content: center;
    min-height: 350px;
    max-width: 400px;
    margin: auto;
  }
  #footer .center .RBox div:nth-child(4) {
    padding-top: 0;
  }
}
@media (max-width: 575px) {
  #footer .topBox {
    padding: 10% 3em;
  }
}

@media (max-width: 991px) {
  .cart-topBtn #footer #top.show {
    bottom: 170px;
  }
}

/* ==========================================================================
    error404
 ==========================================================================*/
#error404 {
  height: 100vh;
  overflow: hidden;
  background-color: #F6F6F6;
}

.error404-section {
  padding: 0 2.5em;
}
.error404-section .logo {
  position: absolute;
  top: 4%;
  left: 6%;
  z-index: 1;
  margin-bottom: 5em;
}
.error404-section .imgBox {
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
}
.error404-section .imgBox img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.error404-section .txtBox {
  position: absolute;
  max-width: 560px;
  width: 100%;
  top: 53%;
  transform: translateY(-50%);
  padding: 1em 1.5em;
}
.error404-section .txtBox h1 {
  line-height: 1;
}
.error404-section .txtBox h1 span:nth-child(1) {
  font-size: 199px;
}
.error404-section .txtBox h1 span:nth-child(2) {
  font-size: 36.6px;
  font-weight: 600;
}
.error404-section .txtBox .all-btn {
  height: 55px;
  border-radius: 27.5px;
}
@media screen and (max-width: 1199px) {
  .error404-section .txtBox {
    background: rgba(255, 255, 255, 0.3019607843);
    border-radius: 20px;
  }
}
@media screen and (max-width: 991px) {
  .error404-section .imgBox {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  .error404-section .imgBox img {
    width: 100%;
    min-width: fit-content;
    min-height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .error404-section .txtBox {
    left: 50%;
    transform: translateY(-45%) translateX(-50%);
  }
}

/* ==========================================================================
    common
 ==========================================================================*/
body {
  font-family: "Noto Sans TC", "Montserrat", sans-serif !important;
}

.noBanner #header {
  box-shadow: 0px -5px 20px rgba(0, 0, 0, 0.1490196078);
  background-color: #fff;
}
.noBanner #header .icon svg {
  fill: #BFBFBF;
}
.noBanner #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > a,
.noBanner #header .header-wrapper .bg_phone .scroll_wrapper > ul.menu > li > span {
  color: #000;
}
.noBanner .inner {
  margin-top: 100px;
}
@media (max-width: 991px) {
  .noBanner .inner {
    margin-top: 60px;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input,
textarea {
  margin: 0;
  -webkit-appearance: none !important;
  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
  -moz-appearance: none !important;
  /* FireFox */
  appearance: none !important;
}

.hidden {
  display: none !important;
}

@media screen and (min-width: 641px) {
  html[data-lc-type=image] #lightcase-content,
  html[data-lc-type=video] #lightcase-content {
    background-color: #fff;
  }
}
.btn.focus,
.btn:focus,
button:focus,
.form-control:focus {
  box-shadow: none;
  border-color: #C4C4C4;
}

.all-btn {
  width: 145px;
  height: 50px;
  background: linear-gradient(to right, #F5821F, #F59704);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  border-radius: 25px;
  margin: 2.5em 0 2em 0;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  transition: all 0.3s;
}
.all-btn:hover {
  transform: scale(0.95);
  color: #fff;
}
.all-btn.w100 {
  width: 100%;
  border-radius: 5px;
  margin: 1em 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.all-btn.w100::before {
  content: "";
  background-color: #F5821F;
  position: absolute;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.3s;
  z-index: -1;
  pointer-events: none;
}
.all-btn.w100:hover {
  transform: none !important;
}
.all-btn.w100:hover::before {
  width: 100%;
  opacity: 1;
  animation: fadeInLeft 0.3s;
}
.all-btn.bg-white {
  background: #fff;
  border: 1px solid #2A2A2A;
  color: #2A2A2A !important;
}

.gray-top {
  border-top: 1px #8E8E8E solid;
}

.grow-1 {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.modal-content {
  border: 0;
  border-radius: 20px;
  padding: 3em;
  justify-content: space-around;
  min-height: 320px;
}
.modal-content .head-titbox {
  padding-bottom: 1.5em;
  text-align: center;
}
.modal-content .msg-content {
  border-top: 1px solid #8E8E8E;
  padding: 2em;
  line-height: 1.8;
  color: #343434;
}
.modal-content .msg-content li::marker {
  font-size: 12px;
}
.modal-content .msg-content p {
  margin-bottom: 0.8em;
}
.modal-content .all-btn {
  margin: auto 8px;
}

.modal-dialog {
  padding: 1em;
}
@media (min-width: 992px) {
  .modal-dialog.modal-md {
    max-width: 500px;
  }
}
@media (min-width: 992px) {
  .modal-dialog.modal-lg {
    max-width: 700px;
  }
}
@media (min-width: 992px) {
  .modal-dialog.modal-xl {
    max-width: 875px;
  }
}
@media (min-width: 992px) {
  .modal-dialog {
    max-width: 400px;
  }
}

.position-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.moreBtn {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid #000;
  color: #000;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  text-decoration: none !important;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  position: absolute;
  transition: all 0.3s;
}
.moreBtn:hover {
  border: 1px solid #F5821F;
  color: #F5821F;
  transform: scale(0.95);
}
@media screen and (max-width: 575px) {
  .moreBtn {
    width: 80px;
    height: 80px;
    font-size: 14px;
  }
}

.banner {
  height: 33.3vw;
  min-height: 500px;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2em;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;
}
.banner .imgBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.banner .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner.login .breadCrumbs,
.banner .txtBox {
  max-width: 1500px;
  width: calc(100% - 4em);
  margin: 4.5em auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
.banner::before {
  background: url(./images/common/banner-bg.png), rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 991px) {
  .banner {
    background-size: cover;
    background-attachment: unset;
    height: 350px;
    min-height: auto;
  }
  .banner .txtBox {
    max-width: 800px;
  }
}

.titleBox {
  padding-bottom: 1em;
}
.titleBox span {
  display: block;
}
.titleBox span:nth-child(2) {
  border-left: 3px solid #F5821F;
  line-height: 1;
  padding-left: 20px;
  margin-left: 5px;
  margin-top: 1em;
}

.lh17 {
  line-height: 1.7em;
}

@media (max-width: 1199px) {
  .section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}
@media (max-width: 767px) {
  .section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

.overflow-unset {
  overflow: unset;
}

@media (min-width: 1400px) {
  .col-xxl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}
.category-section {
  display: flex;
  justify-content: center;
  padding: 5.5em 3em 3em 3em;
  z-index: 1;
  position: relative;
}
.category-section .category ul {
  display: inline-flex;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1019607843);
  border: 1px solid #D8D8D8;
  border-radius: 32.5px;
  list-style: none;
  font-size: 18px;
  padding: 0;
  margin-bottom: 0;
}
.category-section .category ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 65px;
  color: #343434;
  font-weight: 500;
  text-decoration: none;
  border-radius: 32.5px;
  transition: all 0.3s;
}
.category-section .category ul li.active a {
  background-color: #343434;
  color: #fff;
}
.category-section .category ul li.active a::before {
  content: "";
  background-color: #F5821F;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
}
.category-section .category ul li:hover a {
  background-color: #F5821F;
  color: #fff;
}
.category-section .category > div {
  display: none;
}
@media screen and (max-width: 991px) {
  .category-section {
    padding: 4em 2em 1em 2em;
    width: calc(100% - 4em);
    margin: auto;
  }
  .category-section .category ul li a {
    width: 150px;
    height: 55px;
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  .category-section .category {
    width: 100%;
  }
  .category-section .category .dropdown-toggle {
    display: block;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #E7E7E7;
    border-radius: 15px 15px;
    height: 50px;
    padding: 0 1em;
    text-align: left;
    color: #000;
    font-weight: 500;
    width: 100%;
  }
  .category-section .category .dropdown-toggle::after {
    content: "";
    display: inline-block;
    border: none;
    position: absolute;
    width: 10px;
    height: 15px;
    right: 2.5em;
    top: 20px;
    transform: rotate(90deg);
    background-image: url(../styles/images/common/arrow-right.svg);
    background-repeat: no-repeat;
    transition: all 0.3s;
  }
  .category-section .category .dropdown-menu {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1490196078);
    padding: 1em 0;
  }
  .category-section .category .dropdown-menu .dropdown-item {
    border: none;
    height: 50px;
    padding: 12px 1em;
    transition: all 0.3s;
  }
  .category-section .category .dropdown-menu .dropdown-item.active {
    background-color: #F5821F;
    color: #fff;
  }
  .category-section .category .dropdown-menu .dropdown-item:hover {
    background-color: #343434;
    color: #fff;
  }
  .category-section .category .dropdown-menu.show {
    top: 50px !important;
    transform: none !important;
    width: 100%;
    padding: 0;
    border-radius: 15px;
    border: none;
    display: block;
    overflow: hidden;
  }
  .category-section .category ul {
    display: none;
  }
  .category-section .category > div {
    display: block;
  }
}
@media screen and (max-width: 575px) {
  .category-section {
    padding: 4em 2em 0em 2em;
    width: calc(100% - 0em);
  }
}

.page {
  margin: auto;
  padding: 3% 0 5% 0;
}
.page ul li {
  width: 45px;
  height: auto;
  padding: 0 3px;
  line-height: 45px;
  margin: 0 5px;
  border-radius: 2.3px;
  border: 1px solid #C4C4C4;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
}
.page ul li a {
  color: black;
  text-decoration: none;
  line-height: 45px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.page ul li.etc {
  border: none;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 2px;
}
.page ul li.etc a {
  line-height: 30px;
  color: #666666;
}
.page ul li:hover {
  border: 1px solid #F5821F;
}
.page ul li:hover a {
  color: #F5821F;
}
.page ul li:hover.etc {
  border: none;
}
.page ul li:hover.etc a {
  line-height: 30px;
}
.page ul li.active {
  background: #F5821F;
}
.page ul li.active a {
  color: white;
}
.page ul li.next, .page ul li.prev {
  margin: 0;
  width: 4em;
  border: none;
  text-align: center;
  line-height: 55px;
}
.page ul li.next svg,
.page ul li.next img, .page ul li.prev svg,
.page ul li.prev img {
  width: 8px;
  fill: #000;
  transition: all 0.3s;
}
.page ul li.next a, .page ul li.prev a {
  padding: 0 10px;
}
.page ul li.next a:hover svg,
.page ul li.next a:hover img, .page ul li.prev a:hover svg,
.page ul li.prev a:hover img {
  fill: #F5821F !important;
}
.page ul li.next a:hover {
  margin-right: -10px;
}
.page ul li.prev a:hover {
  margin-left: -10px;
}
@media screen and (max-width: 767px) {
  .page {
    padding: 2em 0 4em 0;
  }
  .page ul li {
    width: 30px;
    padding: 0 3px;
    line-height: 30px;
  }
  .page ul li a {
    line-height: 30px;
  }
  .page ul li.next, .page ul li.prev {
    width: 2em;
    line-height: 36px;
  }
}

.slick-arrow {
  height: auto;
}
.slick-arrow svg path {
  transition: all 0.3s;
}
.slick-arrow:hover svg path {
  fill: #F5821F !important;
}

.slick-arrow {
  margin: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: transparent;
  border-radius: 50%;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  border: none;
}
.slick-arrow:hover {
  background: transparent;
}
@media screen and (max-width: 1199px) {
  .slick-arrow {
    width: 40px;
    height: 40px;
  }
}

.slick-dots li {
  width: 16px;
  height: 16px;
  margin: 0 8px;
  padding: 0 !important;
}
.slick-dots li:not(.slick-active) button {
  background: #DEDEDE;
}
.slick-dots li.slick-active button {
  background: #F5632B;
}
.slick-dots li button {
  border: none;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 1199px) {
  .slick-dots li {
    width: 14px;
    height: 14px;
  }
}
@media screen and (max-width: 767px) {
  .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
  }
}

/*麵包屑*/
.breadCrumbs {
  color: #fff;
  z-index: 1;
}
.breadCrumbs a {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1019607843);
  text-decoration: none;
  transition: all 0.3s;
}
.breadCrumbs a:hover {
  color: #F5821F !important;
}
.breadCrumbs i {
  display: inline-block;
  margin: 0 0.5em;
  font-size: 12px;
  font-size: 12px;
  transform: scale(0.75);
}
.breadCrumbs.gary {
  color: #666666;
}
.breadCrumbs.gary a {
  color: #666666;
  text-shadow: none;
}
@media screen and (max-width: 767px) {
  .breadCrumbs {
    display: none !important;
  }
}

.downloadTable {
  min-width: 400px;
  overflow: hidden;
}
.downloadTable .thead .tr {
  background: #272727;
}
.downloadTable .thead .tr .td:not(:last-child):after {
  background: #5D5D5D;
}
.downloadTable .tbody .tr {
  border-bottom: 1px solid #DBDBDB;
}
.downloadTable .tbody .tr a {
  text-decoration: none;
  color: black;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.downloadTable .tbody .tr a:hover {
  background: #F2F2F2;
}
.downloadTable .tbody .tr a:hover .td:last-child {
  color: #00AB38;
}
.downloadTable .tbody .tr a .td:not(:last-child):after {
  background: #DBDBDB;
}
.downloadTable .tbody .tr a .td:last-child {
  padding: 10px;
  color: #CECECE;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.downloadTable .tr .td {
  padding: 21px 10px;
  position: relative;
}
.downloadTable .tr .td:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: #5D5D5D;
}
.downloadTable .tr .td:nth-child(1) {
  min-width: 69px;
}
.downloadTable .tr .td:nth-child(2) {
  padding-left: 30px;
  width: 100%;
}
.downloadTable .tr .td:nth-child(3) {
  min-width: 115px;
}
.downloadTable .tr .td:nth-child(4) {
  min-width: 115px;
}
@media screen and (max-width: 767px) {
  .downloadTable .tr .td:nth-child(1) {
    min-width: 60px;
  }
  .downloadTable .tr .td:nth-child(2) {
    padding-left: 15px;
  }
  .downloadTable .tr .td:nth-child(3) {
    min-width: 98px;
  }
  .downloadTable .tr .td:last-child {
    min-width: 98px;
  }
}
@media screen and (max-width: 575px) {
  .downloadTable .tr .td {
    position: static;
  }
  .downloadTable .tr .td:nth-child(1) {
    min-width: 45px;
  }
  .downloadTable .tr .td:nth-child(2) {
    padding-left: 15px;
  }
  .downloadTable .tr .td:nth-child(3) {
    min-width: 75px;
  }
  .downloadTable .tr .td:last-child {
    min-width: 75px;
  }
}

.youtube-container {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: translate(-50%, -50%);
  max-width: inherit !important;
}
@media (min-aspect-ratio: 16/9) {
  .youtube-container {
    height: 56.25vw !important;
  }
}

/*為您推薦*/
.relatedBox {
  background-color: #F7F7F7;
  padding: 3.5% 2em;
}
.relatedBox .font-30 {
  font-size: 30px;
}
.relatedBox > div {
  width: 100%;
  max-width: 1500px;
  margin: auto;
}
.relatedBox .slickBox {
  position: relative;
  padding: 2em 0 1em 0;
}
.relatedBox .slickBox .slick {
  max-width: 1500px;
  margin: auto;
}
.relatedBox .slickBox .item > a {
  position: relative;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 470px;
  height: 250px;
  margin: 0 4%;
  padding: 1em;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s;
}
.relatedBox .slickBox .item > a::after {
  content: "";
  box-shadow: 0px 20px 30px 0px #000000;
  position: absolute;
  bottom: 30px;
  width: 90%;
  height: 10px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.relatedBox .slickBox .item > a::before {
  content: "VIEW MORE";
  width: 110px;
  height: 110px;
  background-color: rgba(245, 130, 31, 0.9019607843);
  position: absolute;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  left: 15%;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s;
}
.relatedBox .slickBox .item > a img {
  height: 200px;
  width: 50%;
  object-fit: none;
  mix-blend-mode: darken;
}
.relatedBox .slickBox .item > a > span {
  display: block;
  width: 50%;
}
.relatedBox .slickBox .item > a > span span {
  display: block;
}
.relatedBox .slickBox .item > a > span span:nth-child(1) {
  font-size: 22px;
}
.relatedBox .slickBox .item > a:hover::after {
  opacity: 1;
}
.relatedBox .slickBox .item > a:hover::before {
  opacity: 1;
}
.relatedBox .slickBox .slick-list {
  padding-bottom: 2em;
}
.relatedBox .slickBox .slick-arrow {
  top: -5%;
  width: 50px;
  height: 50px;
  border: 2px solid #F5821F;
  display: flex;
  justify-content: center;
  background-color: transparent;
  box-shadow: 1px 2px 10px 0px transparent;
  transition: all 0.3s;
}
.relatedBox .slickBox .slick-arrow img,
.relatedBox .slickBox .slick-arrow svg {
  width: 7px;
  fill: #F5821F;
}
.relatedBox .slickBox .slick-arrow:hover {
  background-color: #fff;
  border: 2px solid transparent;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2509803922);
}
.relatedBox .slickBox .slick-arrow:hover.slick-prev {
  left: calc(100% - 152px);
}
.relatedBox .slickBox .slick-arrow:hover.slick-next {
  right: 33px;
}
.relatedBox .slickBox .slick-prev {
  left: calc(100% - 150px);
}
.relatedBox .slickBox .slick-next {
  right: 35px;
}
.relatedBox .slickBox .slick-dots li {
  width: 8px;
  height: 8px;
  transition: all 0.3s;
}
.relatedBox .slickBox .slick-dots li.slick-active {
  width: 46px;
}
.relatedBox .slickBox .slick-dots li.slick-active button {
  background: #F5821F;
  width: 46px;
  height: 8px;
  border-radius: 4px;
}
.relatedBox .slickBox .slick-dots li:not(.slick-active) button {
  background: #666666;
}
@media screen and (max-width: 1440px) {
  .relatedBox {
    padding: 5em 2em;
  }
  .relatedBox > div {
    max-width: calc(1000px + 4%);
  }
}
@media screen and (max-width: 991px) {
  .relatedBox .slickBox .item > a::before {
    content: none;
  }
}
@media screen and (max-width: 900px) {
  .relatedBox > div {
    max-width: calc(700px + 0%);
  }
  .relatedBox .slickBox .item > a {
    flex-direction: column;
    max-width: 350px;
    height: 380px;
    text-align: center;
  }
  .relatedBox .slickBox .item > a img,
  .relatedBox .slickBox .item > a > span {
    width: 80%;
  }
  .relatedBox .slickBox .item > a::before {
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 767px) {
  .relatedBox {
    padding: 5em 2em;
  }
  .relatedBox > div {
    max-width: calc(350px + 4%);
  }
  .relatedBox .slickBox .item > a {
    margin: auto;
  }
  .relatedBox .slickBox .slick-prev {
    left: calc(100% - 110px);
  }
  .relatedBox .slickBox .slick-next {
    right: 15px;
  }
  .relatedBox .slickBox .slick-arrow {
    top: -4%;
    width: 40px;
    height: 40px;
  }
  .relatedBox .slickBox .slick-arrow:hover.slick-prev {
    left: calc(100% - 110px);
  }
  .relatedBox .slickBox .slick-arrow:hover.slick-next {
    right: 15px;
  }
}

table {
  width: 100%;
}

.table-style2 th {
  border-top: 1px solid #fff;
  font-weight: 500;
  text-align: center;
  background: #E5E5E5;
  color: #333;
  height: 50px;
}
.table-style2 tr:not(:nth-child(1)) {
  border-bottom: 1px solid #C4C4C4;
}
.table-style2 th,
.table-style2 td {
  padding: 12px;
  letter-spacing: 0.03em;
}
@media (max-width: 991px) {
  .table-style2 th {
    display: none;
  }
  .table-style2 tr {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .table-style2 tr:nth-of-type(1) {
    border-bottom: none;
    padding: 0;
  }
  .table-style2 td {
    display: flex;
    align-items: center;
    padding: 5px 10px;
  }
}

/*下拉選單自訂樣式*/
.select2-container {
  font-size: 16px;
  letter-spacing: 0.3px;
  text-align: left;
}
.select2-container--default .select2-selection--single {
  border: none;
  border-radius: 0;
  height: 60px;
  padding: 1em 0.5em;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: auto;
  top: 50%;
  right: 1.5em;
  width: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #F5821F transparent transparent transparent;
  border-width: 7px 6px 0 6px;
  transition: all 0.3s;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #f5821f transparent;
  border-width: 0px 6px 7px 6px;
}
.select2-container--default .select2-results__group {
  padding: 0.5em 1em;
  font-size: 18px;
}
.select2-container--default .select2-results__option .select2-results__option {
  padding: 0.5em 1em;
  min-height: auto;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #F5821F;
  height: 45px;
  margin: 0 0.8em 0.5em;
  width: calc(100% - 1.6em);
  border-radius: 5px;
  padding: 0.5em;
}
.select2-container .select2-dropdown {
  border: none !important;
  background: #fff;
  border-radius: 10px;
  color: #000;
  font-size: 16px;
  letter-spacing: 0.4px;
  padding: 1em 0;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1490196078);
  min-width: 150px;
  margin-top: 5px;
  max-height: 400px;
  overflow-y: auto;
}
.select2-container .select2-results__option {
  padding: 0.8em 1em;
  letter-spacing: 0.4px;
  transition: all 0.3s;
  min-height: 47px;
  background-color: transparent;
}
.select2-container .select2-results__option--highlighted[aria-selected] {
  background-color: #343434;
  color: #fff;
}
.select2-container .select2-results__option[aria-selected=true] {
  background-color: #F5821F;
  color: #fff;
}

.formBox > div {
  padding: 0em 1em 0 0.5em;
}
.formBox hr {
  border-top: 1px solid #8E8E8E;
}
.formBox .form-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.8em;
  position: relative;
}
.formBox .form-group.address .form-control {
  flex: 1 1 0;
}
.formBox .form-group.address > div > :nth-child(1),
.formBox .form-group.address > div > :nth-child(2) {
  margin-right: 10px;
}
.formBox .form-control {
  height: 55px;
  border: 1px solid #C4C4C4;
  border-radius: 5.5px;
}
.formBox .form-control:focus {
  box-shadow: none;
  border: 1px solid #F5821F;
}
.formBox .input-group-text {
  min-width: 150px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 1em 0;
  font-size: 16px;
  color: #2C2C2C;
  letter-spacing: 0.03em;
  flex: 0 1 0;
}
.formBox .radioBox {
  color: #333333;
  display: block;
  position: relative;
  padding-left: 25px;
  line-height: 1;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 4em;
  display: inline-block;
  margin: 20px 0px;
}
.formBox .radioBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.formBox .radioBox input:checked ~ .checkmark {
  border: 1px solid #F5821F;
}
.formBox .radioBox input:checked ~ .checkmark::after {
  display: block;
  background: #F5821F;
}
.formBox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  border: 1px solid #666666;
  border-radius: 50%;
}
.formBox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
}
.formBox textarea {
  padding: 1.2em 1.5em;
  border: 1px solid #C4C4C4;
  border-radius: 5.5px;
  width: 100%;
  height: 140px;
  color: #495057;
  font-size: 16px;
  line-height: 1;
}
.formBox textarea::placeholder {
  color: #808080 !important;
  font-family: "Noto Sans TC";
  line-height: 1;
  font-size: 16px;
}
.formBox input[type=date] + img, .formBox input[type=date] + svg {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  bottom: 6px;
  transform: translateY(-50%);
  background: #fff;
  pointer-events: none;
}
.formBox input[type=date] + img path, .formBox input[type=date] + svg path {
  fill: #c4c4c4 !important;
  transition: all 0.3s;
}
.formBox input[type=date]:focus, .formBox input[type=date]:hover {
  border: 1px solid #F5821F;
}
.formBox input[type=date]:focus + img path,
.formBox input[type=date]:focus + svg path, .formBox input[type=date]:hover + img path,
.formBox input[type=date]:hover + svg path {
  fill: #F5821F !important;
}
.formBox .custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
}
.formBox .custom-file-upload span {
  display: block;
  width: calc(100% - 0em);
  overflow: hidden;
  position: relative;
  top: 3px;
}
.formBox .custom-file-upload span input[type=file] {
  position: relative;
  width: 100%;
  left: -80px;
}
.formBox .custom-file-upload span input[type=file]::before {
  content: "";
  width: 80px;
  height: 30px;
  background-color: #fff;
  position: absolute;
}
.formBox .custom-file-upload img,
.formBox .custom-file-upload svg {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 1em;
  top: 15px;
}
.formBox .custom-file-upload img path,
.formBox .custom-file-upload svg path {
  fill: #c4c4c4 !important;
  transition: all 0.3s;
}
.formBox .custom-file-upload:focus, .formBox .custom-file-upload:checked, .formBox .custom-file-upload:hover {
  border: 1px solid #F5821F !important;
}
.formBox .custom-file-upload:focus img path,
.formBox .custom-file-upload:focus svg path, .formBox .custom-file-upload:checked img path,
.formBox .custom-file-upload:checked svg path, .formBox .custom-file-upload:hover img path,
.formBox .custom-file-upload:hover svg path {
  fill: #F5821F !important;
}
.formBox .custom-file {
  height: 55px;
}
.formBox .custom-file:focus .custom-file-label, .formBox .custom-file:checked .custom-file-label, .formBox .custom-file:hover .custom-file-label {
  border: 1px solid #F5821F !important;
}
.formBox .custom-file:focus .custom-file-icon img path,
.formBox .custom-file:focus .custom-file-icon svg path, .formBox .custom-file:checked .custom-file-icon img path,
.formBox .custom-file:checked .custom-file-icon svg path, .formBox .custom-file:hover .custom-file-icon img path,
.formBox .custom-file:hover .custom-file-icon svg path {
  fill: #F5821F !important;
}
.formBox .custom-file .custom-file-icon {
  position: absolute;
  right: 0;
  z-index: 2;
}
.formBox .custom-file .custom-file-icon img,
.formBox .custom-file .custom-file-icon svg {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 1em;
  top: 15px;
}
.formBox .custom-file .custom-file-icon img path,
.formBox .custom-file .custom-file-icon svg path {
  fill: #c4c4c4 !important;
  transition: all 0.3s;
}
.formBox .custom-file .custom-file-input {
  cursor: pointer;
  height: 55px;
}
.formBox .custom-file .custom-file-label {
  display: flex;
  align-items: center;
  color: #343434;
  font-size: 16px;
  height: 55px;
  padding: 0.5em 1em;
  transition: all 0.3s;
}
.formBox .custom-file .custom-file-label::after {
  content: none;
}
.formBox .select2-container--default .select2-selection--single {
  border: 1px solid #C4C4C4;
  border-radius: 5.5px !important;
  height: 55px;
  padding: 1em 0.5em;
  transition: all 0.3s;
}
.formBox .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
}
.formBox .select2-container--default .select2-selection--single .select2-selection__arrow b {
  transition: all 0.3s;
  content: "";
  display: inline-block;
  border: none;
  position: absolute;
  width: 10px;
  height: 15px;
  right: 2.5em;
  top: 0px;
  background-image: url(../styles/images/common/down-2.svg);
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.formBox .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.formBox .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border: 1px solid #F5821F;
}
@media screen and (max-width: 991px) {
  .formBox .input-group-text {
    min-width: 96px;
  }
  .formBox .form-control,
  .formBox .custom-file,
  .formBox .custom-file-input,
  .formBox .custom-file-label {
    height: 50px !important;
  }
  .formBox .select2-container--default .select2-selection--single {
    height: 50px;
  }
  .formBox .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1em;
  }
}
@media screen and (max-width: 767px) {
  .formBox .form-group {
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .formBox .form-group .input-group-text {
    flex: 1 1 100%;
    min-width: 100%;
    padding: 0.5em 0 5px 0;
  }
  .formBox .form-group.address .form-control {
    flex: 1 1 0;
    width: 100%;
  }
  .formBox .form-group.address > div {
    flex-wrap: wrap;
  }
  .formBox .form-group.address > div > :nth-child(1),
  .formBox .form-group.address > div > :nth-child(2) {
    margin-right: 0;
    width: 100%;
    margin-bottom: 8px;
  }
  .formBox .form-group.address > div > :nth-child(3) {
    width: 100%;
  }
}

.btnCheckbox {
  min-width: 150px;
  height: 50px;
  padding: 0 10px;
  border-radius: 5px;
  background-color: #E5E5E5;
  color: #343434;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}
.btnCheckbox:not(:nth-last-child(1)) {
  margin-right: 13px;
}
@media screen and (max-width: 575px) {
  .btnCheckbox {
    flex: 0 0 100%;
  }
}
.btnCheckbox:hover {
  border-color: #F5821F;
  color: #F5821F;
}
.btnCheckbox.checked, .btnCheckbox.active {
  border-color: transparent;
  color: #fff;
}
.btnCheckbox.checked::before, .btnCheckbox.active::before {
  opacity: 1;
}
.btnCheckbox.checked .text, .btnCheckbox.active .text {
  color: #fff;
}
.btnCheckbox::before {
  content: "";
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 2px;
  background: #F5821F;
  opacity: 0;
  position: absolute;
  top: -1px;
  left: -1px;
  transition: all 0.4s;
  z-index: 0;
}
.btnCheckbox .text {
  position: relative;
  z-index: 1;
}
.btnCheckbox:focus, .btnCheckbox.focus {
  outline: none;
  box-shadow: none;
}

/*取消bootstrap 預設 focus藍框框*/
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
}

.custom-checkbox .custom-control-label::before {
  background-color: transparent !important;
  border: 1px solid #000;
  border-radius: 0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url(images/common/icon-check-3.svg);
  width: 12px;
  height: 10px;
  background-size: auto;
  left: 3px;
  top: 7px;
}

.btnBox {
  display: flex;
  justify-content: center;
}

a.orderNo {
  align-items: center;
  color: #F5821F;
  text-decoration: underline;
}
a.orderNo:hover {
  text-decoration: none;
}

.orderNo {
  align-items: center;
  color: #F5821F !important;
  text-decoration: underline;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-weight: 600;
}

.anchor::before {
  content: "";
  display: block;
  margin-top: -150px;
  height: 150px;
  visibility: hidden;
}

.delete-btn img,
.delete-btn svg,
.delete img,
.delete svg {
  width: 18px;
}
.delete-btn:hover,
.delete:hover {
  transform: scale(0.95);
}
.delete-btn:hover svg path,
.delete:hover svg path {
  fill: #F5821F !important;
}

@keyframes upAndDown {
  0% {
    transform: translateY(0px) rotate(270deg);
  }
  50% {
    transform: translateY(10px) rotate(270deg);
  }
  100% {
    transform: translateY(0px) rotate(270deg);
  }
}
/* ==========================================================================
    index
 ==========================================================================*/
#index .inner {
  padding-bottom: 0px;
}
.index-banner-section {
  height: 100vh;
  max-height: calc(100vh + 50px);
}
.index-banner-section .banner {
  height: 100%;
  width: 100%;
  padding: 1em;
}
.index-banner-section .banner .max1700 {
  margin-bottom: 0;
}
.index-banner-section .banner > div {
  max-width: none;
  margin: 0;
  width: 100%;
}
.index-banner-section .banner {
  position: relative;
}
.index-banner-section .banner .txtBox {
  display: flex;
  height: 100%;
}
.index-banner-section .banner .txtBox .playBtn {
  position: relative;
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 480px;
  border-radius: 50%;
  margin: 1em 0 1.5em 0;
}
.index-banner-section .banner .txtBox .playBtn::before {
  content: "";
  border: 1px solid #F5821F;
  width: 465px;
  position: absolute;
  left: -480px;
  transform: scaleY(0.5);
}
.index-banner-section .banner .txtBox .playBtn::after {
  content: "";
  border: 0.5px solid #fff;
  border-radius: 50%;
  width: 65px;
  position: absolute;
  height: 65px;
  right: 2px;
  display: block;
  z-index: -1;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .index-banner-section .banner .txtBox .playBtn {
    width: 50px;
    height: 50px;
    left: 260px;
  }
  .index-banner-section .banner .txtBox .playBtn::before {
    width: 250px;
    left: -260px;
  }
  .index-banner-section .banner .txtBox .playBtn::after {
    width: 50px;
    height: 50px;
  }
}
.index-banner-section .banner .txtBox .text {
  display: block;
  position: absolute;
  left: 7.5%;
  line-height: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  max-width: 800px;
}
.index-banner-section .banner .txtBox .text.type1 {
  top: 50%;
}
.index-banner-section .banner .txtBox .text.type1 span.title {
  font-size: 96px;
}
.index-banner-section .banner .txtBox .text.type1 span.info1 {
  font-size: 96px;
}
.index-banner-section .banner .txtBox .text.type1 span.info2 {
  font-size: 22px;
  font-family: "Noto Sans TC";
}
.index-banner-section .banner .txtBox .text.type1 span.info2 span {
  font-family: "Noto Sans TC";
}
.index-banner-section .banner .imgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.index-banner-section .banner .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index-banner-section .slick-dots {
  position: absolute;
  top: 50%;
  right: 2.5%;
  transform: translateY(-50%);
}
.index-banner-section .slick-dots li {
  width: 45px;
  height: 45px;
  margin: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
  font-size: 15px;
}
.index-banner-section .slick-dots li a {
  color: #fff;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  letter-spacing: 0.5px;
  font-weight: 500;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s;
}
.index-banner-section .slick-dots li.slick-active a {
  border: 1px solid rgba(255, 255, 255, 0.3294117647);
}
.index-banner-section .slick-dots li:hover a {
  border: 1px solid rgba(255, 255, 255, 0.3294117647);
}
.index-banner-section .slick-dots li .circle {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.index-banner-section .slick-dots li svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(270deg);
}
.index-banner-section .slick-dots li.slick-active .circle {
  animation: stroke 42s linear forwards;
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.arrow {
  cursor: pointer;
  bottom: 0;
  right: 1%;
  bottom: 4.5em;
  animation: upAndDown 2s ease-in-out 0s infinite both;
}

.index-section-1 {
  padding: 9% 2.5em 14% 2.5em;
  background: linear-gradient(to right, transparent 0, transparent 50%, #F3F3F3 50%, #F3F3F3 100%);
  position: relative;
}
.index-section-1::before {
  content: "";
  background: url(images/index/bg1.png);
  position: absolute;
  right: -25px;
  top: 10%;
  width: 50%;
  height: 315px;
  animation: shake 30s ease-in-out 0s;
}
.index-section-1 .max1730 {
  position: relative;
}
.index-section-1 .max1730 > div:nth-child(1) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
  padding: 0 6%;
}
.index-section-1 .txtBox {
  width: 31%;
  height: 470px;
  position: relative;
}
.index-section-1 .txtBox .slickBox .item {
  padding-bottom: 6%;
}
.index-section-1 .txtBox .slickBox .item > span {
  margin-left: -8em;
  opacity: 0;
  transition: all 0.8s 0.8s;
}
.index-section-1 .txtBox .slickBox .item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 360px;
  padding-top: 5%;
  opacity: 0;
  transition: all 0.6s 1.5s;
}
.index-section-1 .txtBox .slickBox .item.slick-current span {
  margin-left: 0;
  opacity: 1;
}
.index-section-1 .txtBox .slickBox .item.slick-current p {
  padding-top: 0;
  opacity: 1;
}
.index-section-1 .imgBox-1 {
  position: relative;
  width: 52%;
}
.index-section-1 .imgBox-1 > div:nth-child(1) {
  position: absolute;
  max-width: 527px;
  max-height: 527px;
  bottom: 0px;
  background: radial-gradient(circle at center, #fff, #dddddd);
  border-radius: 50%;
  left: 0px;
  width: 100%;
  height: 100%;
}
.index-section-1 .imgBox-1::before {
  content: "NEW";
  color: #fff;
  background: linear-gradient(to right, #F5821F, #F59704);
  width: 85px;
  height: 85px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  left: 3%;
  top: 20%;
  z-index: 1;
}
.index-section-1 .imgBox-1 .slickBox .item img {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s;
}
.index-section-1 .imgBox-1 .slickBox .item a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  text-decoration: none;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1019607843);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 90px;
  left: 420px;
  bottom: 70px;
  opacity: 0;
  transition: all 0.8s 0.8s, color 0.3s 0s, background-color 0.3s 0s, transform 0.3s 0s;
}
.index-section-1 .imgBox-1 .slickBox .item div {
  width: 276px;
  height: 35px;
  box-shadow: 0px 60px 25px 0px rgba(0, 0, 0, 0.3490196078);
  position: absolute;
  left: 165px;
  bottom: 20%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s;
}
.index-section-1 .imgBox-1 .slickBox .item.slick-current img {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
}
.index-section-1 .imgBox-1 .slickBox .item.slick-current a {
  width: 110px;
  height: 110px;
  left: 450px;
  bottom: 50px;
  opacity: 1;
  transform: scale(1);
}
.index-section-1 .imgBox-1 .slickBox .item.slick-current a:hover {
  background-color: #000;
  color: #fff;
  font-size: 18px;
  transform: scale(1.1);
  transition-delay: 0s;
}
.index-section-1 .imgBox-1 .slickBox .item.slick-current div {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.6s;
}
.index-section-1 .imgBox-2 {
  position: relative;
  width: 17%;
}
.index-section-1 .imgBox-2 > div:nth-child(1) {
  position: absolute;
  width: 1000px;
  bottom: -60px;
  background-color: #fff;
  height: 220px;
  border-radius: 108px 0 0 108px;
  left: -50px;
}
.index-section-1 .imgBox-2 .slickBox .item img {
  width: 292px;
  position: relative;
  opacity: 0;
  bottom: -50px;
  transition: all 0.6s;
}
.index-section-1 .imgBox-2 .slickBox .item span {
  display: block;
  text-align: center;
  right: -280px;
  position: relative;
  transition: all 1s;
}
.index-section-1 .imgBox-2 .slickBox .item span:nth-child(2) {
  font-size: 36px;
  font-weight: 600;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  margin-bottom: 0.3em;
}
.index-section-1 .imgBox-2 .slickBox .item span:nth-child(3) {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #666666;
}
.index-section-1 .imgBox-2 .slickBox .item div {
  width: 150px;
  height: 35px;
  box-shadow: 0px 60px 25px 0px rgba(0, 0, 0, 0.5490196078);
  position: absolute;
  left: 15%;
  bottom: 40%;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s;
}
.index-section-1 .imgBox-2 .slickBox .item.slick-current img {
  opacity: 1;
  bottom: 0;
  transition-delay: 0.6s;
}
.index-section-1 .imgBox-2 .slickBox .item.slick-current span {
  right: 0;
  transition-delay: 0.8s;
}
.index-section-1 .imgBox-2 .slickBox .item.slick-current div {
  bottom: 45%;
  opacity: 1;
  transition-delay: 0.6s;
}
.index-section-1 .slick-dots {
  position: absolute;
  left: 6em;
  bottom: -30px;
}
.index-section-1 .slick-dots li {
  width: 28px;
  height: 2px;
  margin: 0;
}
.index-section-1 .slick-dots li.slick-active button {
  background: #000;
}
.index-section-1 .slick-dots li button {
  top: 0px;
  border: none;
  width: 28px;
  height: 2px;
  border-radius: 0;
  transition: all 0.3s;
}
.index-section-1 .numBox {
  font-weight: 600;
  font-size: 16px;
}
.index-section-1 .numBox span:nth-child(2) {
  padding: 0 0.5em;
  transform: rotate(-50deg);
  display: inline-block;
  background: #000;
  width: 20px;
  height: 1px;
  margin-bottom: 5px;
}
.index-section-1 .numBox span:nth-child(3) {
  color: #C4C4C4;
}
.index-section-1 .arrowBox {
  top: 65%;
  width: 100%;
  position: absolute;
}
.index-section-1 .slick-arrow {
  width: 25px;
  transition: all 0.3s;
}
.index-section-1 .slick-arrow:hover.slick-prev {
  left: -5px;
}
.index-section-1 .slick-arrow:hover.slick-next {
  right: -5px;
}
@media screen and (max-width: 1600px) {
  .index-section-1 .font-96 {
    font-size: 60px;
  }
  .index-section-1 .imgBox-2 .slickBox .item span:nth-child(2) {
    font-size: 25px;
  }
}
@media screen and (max-width: 1500px) {
  .index-section-1 {
    background: none;
  }
  .index-section-1 .max1730 {
    max-width: 1200px;
  }
  .index-section-1 .max1730 > div:nth-child(1) {
    padding: 0 8%;
    justify-content: space-between;
    align-items: center;
  }
  .index-section-1 .txtBox {
    width: 50%;
    height: auto;
  }
  .index-section-1 .imgBox-1 {
    width: 50%;
  }
  .index-section-1 .imgBox-1 > div:nth-child(1) {
    max-width: 440px;
    max-height: 440px;
  }
  .index-section-1 .imgBox-1 .slickBox .item a {
    left: 75%;
  }
  .index-section-1 .imgBox-1 .slickBox .item div {
    width: 45%;
    left: 27%;
    bottom: 20%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current a {
    width: 100px;
    height: 100px;
    left: 77%;
  }
  .index-section-1 .imgBox-1::before {
    top: 15%;
    left: 0;
  }
  .index-section-1 .imgBox-2 {
    display: none;
  }
  .index-section-1 .slick-dots {
    bottom: -1.2em;
    margin-bottom: 0;
  }
  .index-section-1 .numBox {
    bottom: -1.6em;
  }
}
@media screen and (max-width: 1199px) {
  .index-section-1 .max1730 {
    max-width: 992px;
  }
  .index-section-1 .imgBox-1 > div:nth-child(1) {
    max-width: 360px;
    max-height: 360px;
  }
  .index-section-1 .imgBox-1 .slickBox .item a {
    left: 72%;
    bottom: 25px;
  }
  .index-section-1 .imgBox-1 .slickBox .item div {
    width: 50%;
    height: 30px;
    left: 25%;
    bottom: 25%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current a {
    width: 90px;
    height: 90px;
    left: 75%;
    bottom: 25px;
  }
  .index-section-1 .imgBox-1::before {
    width: 75px;
    height: 75px;
  }
}
@media screen and (max-width: 991px) {
  .index-section-1 {
    padding: 9% 1em 14% 1em;
  }
  .index-section-1 .max1730 {
    max-width: 800px;
  }
  .index-section-1 .txtBox {
    width: 55%;
    height: auto;
  }
  .index-section-1 .imgBox-1 {
    width: 45%;
  }
  .index-section-1 .imgBox-1 > div:nth-child(1) {
    max-width: 260px;
    max-height: 260px;
  }
  .index-section-1 .imgBox-1 .slickBox .item a {
    width: 70px;
    height: 70px;
    left: 68%;
    bottom: 5px;
  }
  .index-section-1 .imgBox-1 .slickBox .item div {
    bottom: 28%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current a {
    width: 70px;
    height: 70px;
    left: 70%;
    bottom: 5px;
  }
  .index-section-1 .imgBox-1::before {
    width: 50px;
    height: 50px;
    font-size: 15px;
    top: 15%;
  }
}
@media screen and (max-width: 767px) {
  .index-section-1 {
    padding: 5em 2em 10em 2em;
  }
  .index-section-1 .max1730 {
    max-width: 560px;
  }
  .index-section-1 .max1730 > div:nth-child(1) {
    padding: 0 10%;
  }
  .index-section-1 .txtBox {
    width: 100%;
    margin-bottom: -10%;
  }
  .index-section-1 .txtBox .slickBox .item p {
    max-width: none;
  }
  .index-section-1 .txtBox .numBox {
    display: none;
  }
  .index-section-1 .imgBox-1 {
    width: 100%;
  }
  .index-section-1 .imgBox-1 > div:nth-child(1) {
    max-width: 390px;
    max-height: 390px;
    left: 50%;
    transform: translateX(-50%);
  }
  .index-section-1 .imgBox-1 .slickBox .item div {
    bottom: 25%;
    width: 45%;
    left: 35%;
    height: 20px;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current a {
    width: 90px;
    height: 90px;
    left: 75%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current img {
    position: relative;
    left: 20px;
    top: -10px;
  }
  .index-section-1 .imgBox-1::before {
    width: 75px;
    height: 75px;
    top: 20%;
    left: 3%;
  }
  .index-section-1 .imgBox-1 .slick-list {
    padding-top: 5%;
  }
  .index-section-1 .arrowBox {
    top: 75%;
  }
  .index-section-1 .numBox {
    bottom: -12%;
    left: 25%;
  }
  .index-section-1 .slick-dots {
    bottom: -18%;
    left: 50%;
  }
}
@media screen and (max-width: 575px) {
  .index-section-1 .max1730 {
    max-width: 300px;
  }
  .index-section-1 .max1730 > div:nth-child(1) {
    padding: 0 0%;
  }
  .index-section-1 .txtBox {
    margin-bottom: 0;
  }
  .index-section-1 .imgBox-1 > div:nth-child(1) {
    max-width: 305px;
    max-height: 305px;
  }
  .index-section-1 .imgBox-1 .slickBox .item div {
    bottom: 25%;
    width: 45%;
    left: 35%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current a {
    width: 70px;
    height: 70px;
    left: 75%;
  }
  .index-section-1 .imgBox-1 .slickBox .item.slick-current img {
    top: -25px;
  }
  .index-section-1 .imgBox-1::before {
    width: 60px;
    height: 60px;
    top: 10%;
    left: 0;
  }
  .index-section-1 .arrowBox {
    display: none;
  }
  .index-section-1 .numBox {
    bottom: -10%;
    left: 10%;
  }
  .index-section-1 .slick-dots {
    bottom: -18.5%;
    left: 50%;
  }
}

.index-section-2 > div {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  min-height: 600px;
  background-color: #805D3D;
}
.index-section-2 .LBox {
  width: 50%;
  position: relative;
  background-color: #805D3D;
  padding: 50px 0;
}
.index-section-2 .LBox .item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.index-section-2 .LBox .item .txtBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3em;
  opacity: 0;
  margin-left: -8em;
  transition: all 0.8s;
}
.index-section-2 .LBox .item .txtBox img {
  width: 185px;
}
.index-section-2 .LBox .item .txtBox .title {
  background-color: #F5821F;
  border-radius: 22.5px;
  padding: 8px 1.5em;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
.index-section-2 .LBox .item .txtBox p {
  max-width: 380px;
  text-align: center;
  margin-bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 18px 0;
}
.index-section-2 .LBox .item .txtBox .btnBox {
  margin-top: 30px;
}
.index-section-2 .LBox .item .txtBox .btnBox .all-btn {
  background: transparent;
  border: 1px solid #fff;
}
.index-section-2 .LBox .item.slick-current .txtBox {
  opacity: 1;
  margin-left: 0em;
  transition-delay: 0.5s;
}
.index-section-2 .LBox .numBox {
  font-weight: 600;
  font-size: 16px;
  position: absolute;
  bottom: 6em;
  left: 50%;
  transform: translateX(-50%);
}
.index-section-2 .LBox .numBox span:nth-child(1) {
  color: #fff;
}
.index-section-2 .LBox .numBox span:nth-child(2) {
  padding: 0 0.5em;
  transform: rotate(-50deg);
  display: inline-block;
  background: #fff;
  width: 20px;
  height: 1px;
  margin-bottom: 5px;
}
.index-section-2 .LBox .numBox span:nth-child(3) {
  color: #C4C4C4;
}
.index-section-2 .LBox .arrowBox {
  bottom: 6.5em;
  left: 50%;
  position: absolute;
}
.index-section-2 .LBox .slick-arrow {
  width: auto;
  height: auto;
  top: auto;
  padding: 0 10px;
  transition: all 0.3s;
}
.index-section-2 .LBox .slick-arrow .svg {
  width: 8px;
}
.index-section-2 .LBox .slick-arrow .svg path {
  fill: #fff !important;
  transition: all 0.3s;
}
.index-section-2 .LBox .slick-arrow.slick-prev {
  left: calc(50% - 120px);
}
.index-section-2 .LBox .slick-arrow.slick-next {
  right: calc(50% - 120px);
}
.index-section-2 .LBox .slick-arrow:hover .svg path {
  fill: #F5821F !important;
}
.index-section-2 .LBox .slick-arrow:hover.slick-prev {
  left: calc(50% - 122px);
}
.index-section-2 .LBox .slick-arrow:hover.slick-next {
  right: calc(50% - 122px);
}
.index-section-2 .RBox {
  width: 50%;
  background-color: #805D3D;
}
.index-section-2 .RBox img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.index-section-2 .CBox {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  max-width: 350px;
  width: 25vw;
  transform: translate(-50%, -50%);
}
.index-section-2 .CBox .item {
  padding-bottom: 5%;
}
.index-section-2 .CBox .item img {
  -webkit-filter: drop-shadow(3px 20px 4px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(3px 20px 4px rgba(0, 0, 0, 0.5));
  position: relative;
  top: 3em;
  opacity: 0;
  transition: all 0.8s;
}
.index-section-2 .CBox .item.slick-current img {
  top: 0;
  opacity: 1;
  transition-delay: 0.8s;
}
@media screen and (max-width: 1199px) {
  .index-section-2 .CBox {
    top: 80%;
  }
}
@media screen and (max-width: 991px) {
  .index-section-2 {
    background-color: #805D3D;
  }
  .index-section-2 .LBox {
    width: 100%;
  }
  .index-section-2 .LBox .item .txtBox {
    padding: 0 2em 3em 2em;
  }
  .index-section-2 .LBox .arrowBox {
    bottom: 6%;
  }
  .index-section-2 .LBox .numBox {
    bottom: 5%;
  }
  .index-section-2 .RBox {
    width: 100%;
  }
  .index-section-2 .CBox {
    height: 320px;
    width: 100%;
    top: 0;
    position: relative;
    transform: none;
    left: 0;
    max-width: none;
    top: 50%;
  }
  .index-section-2 .CBox .item {
    padding-bottom: 0;
  }
  .index-section-2 .CBox .item img {
    max-width: 350px;
    width: 60vw;
    min-width: 250px;
    left: 50%;
    transform: translateX(-50%);
  }
  .index-section-2 .CBox .item.slick-current img {
    top: -2em;
  }
}
@media screen and (max-width: 575px) {
  .index-section-2 .LBox .item .txtBox {
    padding: 0 2em 3em 2em;
  }
  .index-section-2 .CBox {
    height: auto;
  }
}

.index-section-3 {
  padding: 7% 3em 2% 3em;
  background-color: #F3F3F3;
}
.index-section-3 > span:nth-child(1) {
  margin-bottom: 8px;
}
.index-section-3 .slickBox {
  max-width: 1620px;
  margin: auto;
  position: relative;
  padding: 4em 3em;
}
.index-section-3 .slickBox .slick {
  max-width: 1500px;
  margin: auto;
}
.index-section-3 .slickBox .item > a {
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  height: 380px;
  margin: 0 4%;
  padding: 20px;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s;
}
.index-section-3 .slickBox .item > a::after {
  content: "";
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.568627451);
  position: absolute;
  bottom: 15px;
  width: 90%;
  height: 20px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.index-section-3 .slickBox .item > a::before {
  content: "VIEW MORE";
  width: 110px;
  height: 110px;
  background-color: rgba(245, 130, 31, 0.9019607843);
  position: absolute;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  top: 20%;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s;
}
.index-section-3 .slickBox .item > a img {
  height: 200px;
  mix-blend-mode: darken;
}
.index-section-3 .slickBox .item > a span:nth-child(2) {
  font-size: 22px;
}
.index-section-3 .slickBox .item > a:hover::after {
  opacity: 1;
}
.index-section-3 .slickBox .item > a:hover::before {
  opacity: 1;
}
.index-section-3 .slickBox .slick-list {
  padding-bottom: 4em;
}
.index-section-3 .slickBox .slick-arrow {
  top: 45%;
  width: 45px;
  height: auto;
  transition: all 0.3s;
  padding: 0 10px;
}
.index-section-3 .slickBox .slick-arrow svg path {
  transition: all 0.3s;
}
.index-section-3 .slickBox .slick-arrow:hover svg path {
  fill: #F5821F !important;
}
.index-section-3 .slickBox .slick-arrow:hover.slick-next {
  right: -5px;
}
.index-section-3 .slickBox .slick-arrow:hover.slick-prev {
  left: -5px;
}
.index-section-3 .slickBox .slick-dots li {
  width: 8px;
  height: 8px;
  transition: all 0.3s;
}
.index-section-3 .slickBox .slick-dots li.slick-active {
  width: 46px;
}
.index-section-3 .slickBox .slick-dots li.slick-active button {
  background: #F5821F;
  width: 46px;
  height: 8px;
  border-radius: 4px;
}
.index-section-3 .slickBox .slick-dots li:not(.slick-active) button {
  background: #666666;
}
@media screen and (max-width: 991px) {
  .index-section-3 {
    padding: 10% 3em 0 3em;
  }
  .index-section-3 .slickBox {
    max-width: 760px;
  }
  .index-section-3 .slickBox .item > a::before {
    content: none;
  }
}
@media screen and (max-width: 767px) {
  .index-section-3 .slickBox {
    max-width: 570px;
  }
  .index-section-3 .slickBox .item {
    opacity: 0;
    transition: all 0.3s;
  }
  .index-section-3 .slickBox .item > a {
    margin: 0 auto;
  }
  .index-section-3 .slickBox .item > a::after {
    opacity: 1;
  }
  .index-section-3 .slickBox .item.slick-current {
    opacity: 1;
  }
}
@media screen and (max-width: 575px) {
  .index-section-3 {
    padding: 6em 2em 5% 2em;
  }
  .index-section-3 .font-80 {
    padding-bottom: 15px;
  }
  .index-section-3 .slickBox {
    padding: 57px 0em;
  }
  .index-section-3 .slickBox .slick-list {
    padding-bottom: 5em;
  }
  .index-section-3 .arrowBox {
    display: none;
  }
}

.index-section-4 {
  padding: 9% 0 9% 3em;
  position: relative;
}
.index-section-4 > div {
  display: flex;
  position: relative;
  left: 9%;
}
.index-section-4 .LBox {
  width: 18%;
  min-width: 350px;
  display: inline-block;
  position: relative;
}
.index-section-4 .LBox p {
  max-width: 295px;
}
.index-section-4 .RBox {
  width: 82%;
  display: inline-block;
}
.index-section-4 .RBox .item > div {
  display: flex;
  flex-direction: column;
  margin: 0 1.5em;
}
.index-section-4 .RBox .item > div:hover a img {
  transform: scale(1.05);
}
.index-section-4 .RBox .item a {
  display: inline-block;
  color: #000;
  text-decoration: none;
  max-width: 470px;
  min-width: 470px;
  border-radius: 15px;
  overflow: hidden;
}
.index-section-4 .RBox .item a img {
  transition: all 0.3s;
}
.index-section-4 .RBox .item a span {
  display: block;
  padding: 1em 0;
}
.index-section-4 .RBox .item a span:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  padding: 0;
  margin: 2em 0 1em 0;
}
.index-section-4 .RBox .item a p {
  max-width: 410px;
  position: relative;
  padding-top: 1.5em;
  margin-bottom: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.index-section-4 .RBox .item a p::after {
  content: "";
  border-top: 2px solid #9E7D54;
  max-width: 450px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.index-section-4::after {
  content: "";
  background-color: #F3F3F3;
  width: 440px;
  height: 120px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.index-section-4 .slick-arrow {
  width: auto;
  height: auto;
  padding: 0 10px;
  transition: all 0.3s;
}
.index-section-4 .slick-arrow .svg {
  width: 8px;
}
.index-section-4 .slick-arrow .svg path {
  fill: #000 !important;
}
.index-section-4 .slick-arrow.slick-prev {
  left: calc(0% - 0px);
}
.index-section-4 .slick-arrow.slick-next {
  right: calc(50% - 50px);
}
.index-section-4 .slick-arrow:hover .svg path {
  fill: #F5821F !important;
}
.index-section-4 .slick-arrow:hover.slick-prev {
  left: calc(0% - 2px);
}
.index-section-4 .slick-arrow:hover.slick-next {
  right: calc(50% - 52px);
}
.index-section-4 .numBox {
  font-weight: 600;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translate(-50%, -50%);
}
.index-section-4 .numBox span:nth-child(1) {
  color: #000;
}
.index-section-4 .numBox span:nth-child(2) {
  padding: 0 0.5em;
  transform: rotate(-50deg);
  display: inline-block;
  background: #000;
  width: 20px;
  height: 1px;
  margin-bottom: 5px;
}
.index-section-4 .numBox span:nth-child(3) {
  color: #C4C4C4;
}
.index-section-4 a.moreBtn {
  bottom: 12%;
  right: 32%;
}
@media screen and (max-width: 1199px) {
  .index-section-4 > div {
    left: 0;
  }
  .index-section-4::after {
    content: none;
  }
}
@media screen and (max-width: 991px) {
  .index-section-4 > div {
    flex-wrap: wrap;
  }
  .index-section-4 .LBox {
    width: 100%;
    padding-bottom: 6em;
  }
  .index-section-4 .RBox {
    width: 100%;
    margin: 0 -1.5em;
  }
  .index-section-4 .arrowBox {
    position: absolute;
    width: 300px;
    bottom: 38px;
  }
  .index-section-4 .numBox {
    top: auto;
    left: 100px;
    bottom: 20px;
  }
  .index-section-4 a.moreBtn {
    right: 3em;
  }
}
@media screen and (max-width: 767px) {
  .index-section-4 {
    padding: 5em 2em;
  }
  .index-section-4 > div {
    max-width: 470px;
    margin: auto;
  }
  .index-section-4 .LBox a {
    right: 0;
  }
  .index-section-4 .RBox {
    margin: 0;
  }
  .index-section-4 .RBox .item > div {
    margin: 0;
  }
  .index-section-4 .RBox .item a {
    max-width: none;
    min-width: auto;
  }
  .index-section-4 .RBox .item a p {
    font-size: 16px;
    margin-bottom: 0.5em;
  }
  .index-section-4 .RBox .item a span:nth-child(1) {
    font-size: 18px;
  }
  .index-section-4 .RBox .item a span:nth-child(3) {
    font-size: 16px;
  }
}
@media screen and (max-width: 575px) {
  .index-section-4 {
    padding: 5em 2em;
  }
  .index-section-4 .LBox {
    padding-bottom: 2em;
    min-width: auto;
  }
  .index-section-4 .RBox {
    padding-bottom: 170px;
  }
  .index-section-4 .arrowBox {
    width: 225px;
    left: 50%;
    bottom: 128px;
    transform: translateX(-50%);
  }
  .index-section-4 .slick-arrow.slick-next {
    right: 0;
  }
  .index-section-4 .slick-arrow:hover.slick-next {
    right: -2px;
  }
  .index-section-4 .numBox {
    bottom: 110px;
    left: 50%;
  }
  .index-section-4 a.moreBtn {
    width: 70px;
    height: 70px;
    font-size: 14px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.index-section-5 {
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 600px;
  margin-bottom: 100px;
}
.index-section-5::before {
  content: "";
  width: 100%;
  height: 600px;
  background-color: rgba(52, 0, 0, 0.1882352941);
  position: absolute;
}
.index-section-5 > div {
  height: 100%;
  position: relative;
}
.index-section-5 .txtBox {
  position: absolute;
  background-color: #F5821F;
  width: 800px;
  height: 400px;
  border-radius: 20px;
  color: #fff;
  bottom: -100px;
  right: 8%;
  padding: 5em 4em;
}
.index-section-5 .txtBox span {
  display: inline-block;
}
.index-section-5 .txtBox span:nth-child(1) {
  line-height: 84px;
}
.index-section-5 .txtBox span:nth-child(2) {
  margin-left: 1.1em;
  -webkit-text-stroke: 0.5px #FFFFFF;
  color: transparent;
}
.index-section-5 .txtBox span:nth-child(3) {
  margin-top: 1em;
  padding-left: 140px;
  position: relative;
}
.index-section-5 .txtBox span:nth-child(3)::before {
  content: "";
  width: 120px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 12px;
}
@media screen and (max-width: 1199px) {
  .index-section-5 {
    background-position: -150px -15%;
    margin-bottom: 200px;
    height: 360px;
  }
  .index-section-5::before {
    height: 360px;
  }
  .index-section-5 .txtBox {
    position: relative;
    width: 600px;
    height: 300px;
    bottom: -250px;
    right: auto;
    margin: auto;
    padding: 2.5em 4em;
  }
}
@media screen and (max-width: 991px) {
  .index-section-5 {
    background-attachment: unset;
    background-size: cover;
    background-position: 0px 60%;
  }
}
@media screen and (max-width: 767px) {
  .index-section-5 {
    margin-bottom: 250px;
  }
  .index-section-5 .txtBox {
    width: calc(100% - 4em);
    max-width: 520px;
    height: auto;
    border-radius: 0;
    padding: 2.5em 2.5em;
  }
  .index-section-5 .txtBox span {
    display: inline;
  }
  .index-section-5 .txtBox span:nth-child(1) {
    line-height: 1em;
    max-width: 8em;
  }
  .index-section-5 .txtBox span:nth-child(2) {
    margin-left: 0;
  }
  .index-section-5 .txtBox span:nth-child(3) {
    display: inline-block;
    padding-left: 0;
    padding-top: 2em;
    margin-top: 0.5em;
    width: 100%;
  }
  .index-section-5 .txtBox span:nth-child(3)::before {
    width: 100%;
    position: absolute;
    left: 0;
    top: 12px;
  }
}
@media screen and (max-width: 575px) {
  .index-section-5 {
    background-size: 1000px;
    background-position: 40% 60%;
  }
  .index-section-5 .txtBox {
    max-width: 320px;
  }
}

.index-section-6 {
  padding: 8em 3em;
  position: relative;
}
.index-section-6::after {
  content: "";
  background: url(images/index/bg4.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: -41%;
  bottom: 0%;
  width: 1700px;
  height: 240px;
  animation: shake 20s ease-in-out 0s infinite;
}
.index-section-6 > div {
  max-width: 1350px;
  margin: auto;
  display: flex;
  z-index: 1;
  position: relative;
}
.index-section-6 .LBox {
  width: 50%;
  padding: 0 5% 0 0em;
  text-align: right;
}
.index-section-6 .LBox span {
  line-height: 1em;
}
.index-section-6 .LBox span:nth-child(3) {
  margin-top: 1.5em;
  line-height: 30px;
}
.index-section-6 .RBox {
  width: 50%;
  padding: 0 0em 0 3em;
  margin-top: 100px;
  position: relative;
}
.index-section-6 .RBox p {
  max-width: 600px;
}
.index-section-6 .RBox::before {
  content: "";
  height: 250px;
  width: 2px;
  top: 5px;
  left: 0;
  background-color: rgba(102, 102, 102, 0.4);
  position: absolute;
}
@media screen and (max-width: 1199px) {
  .index-section-6::after {
    left: auto;
    right: 0;
  }
  .index-section-6 .LBox span:nth-child(3) {
    margin-top: 0.5em;
  }
  .index-section-6 .RBox {
    margin-top: 3.5em;
  }
}
@media screen and (max-width: 991px) {
  .index-section-6 {
    padding: 10% 3em;
  }
  .index-section-6 > div {
    flex-wrap: wrap;
    max-width: 600px;
  }
  .index-section-6 .LBox {
    width: 100%;
    text-align: left;
  }
  .index-section-6 .LBox span {
    line-height: 1.2em;
  }
  .index-section-6 .LBox span:nth-child(3) {
    margin-top: 0.5em;
  }
  .index-section-6 .RBox {
    width: 100%;
    margin-top: 2.5em;
    padding: 2.5em 0;
  }
  .index-section-6 .RBox::before {
    height: 2px;
    width: 100%;
    top: 0;
    left: 0;
  }
  .index-section-6 a.moreBtn {
    margin: auto;
  }
}
@media screen and (max-width: 767px) {
  .index-section-6 {
    padding: 0em 2em 4em 2em;
  }
  .index-section-6::after {
    content: none;
  }
  .index-section-6 > div {
    max-width: 520px;
  }
}
@media screen and (max-width: 575px) {
  .index-section-6 {
    padding: 8em 2em 2em 2em;
  }
  .index-section-6 > div {
    max-width: 320px;
    padding: 0;
  }
  .index-section-6 a.moreBtn {
    width: 80px;
    height: 80px;
  }
}

.index-section-7 {
  height: 600px;
  position: relative;
}
.index-section-7 .imgBox {
  height: 100%;
}
.index-section-7 .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.index-section-7 .txtBox {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}
.index-section-7 .txtBox > div {
  width: 90%;
  max-width: 1420px;
  margin: auto;
  padding: 2em;
  display: flex;
  justify-content: center;
}
.index-section-7 .LBox {
  width: 50%;
  color: #fff;
}
.index-section-7 .LBox span {
  letter-spacing: -0.015em;
}
.index-section-7 .LBox p {
  max-width: 520px;
  line-height: 1.8em;
  border-left: 3px solid #F5821F;
  padding-left: 1.5em;
  margin-left: 1em;
  margin-bottom: 1.8em;
}
.index-section-7 .LBox a {
  text-decoration: none;
  padding: 0.8em 2em;
  border: 1px solid #fff;
  border-radius: 30px;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-left: 3em;
  color: #fff;
  transform: scale(1);
  transition: all 0.3s;
}
.index-section-7 .LBox a:hover {
  background: rgba(0, 0, 0, 0.3019607843);
}
.index-section-7 .RBox {
  width: 50%;
}
.index-section-7 .RBox > div a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  max-width: 340px;
  height: 105px;
  border-radius: 10px;
  color: #fff;
  margin: 1.2em auto;
  padding: 1em;
  transition: all 0.3s;
  transition-duration: 0.3s !important;
}
.index-section-7 .RBox > div a > span {
  padding-left: 2em;
  transition: all 0.3s;
}
.index-section-7 .RBox > div a > span span {
  display: block;
  line-height: 1.8;
}
.index-section-7 .RBox > div a:hover {
  transform: scale(0.95);
}
.index-section-7 .RBox > div:nth-child(1) a {
  background-color: #F5821F;
  border: 2px solid #F5821F;
}
.index-section-7 .RBox > div:nth-child(2) a {
  background-color: rgba(0, 0, 0, 0.3019607843);
  border: 2px solid #fff;
}
@media screen and (max-width: 991px) {
  .index-section-7 {
    height: 700px;
  }
  .index-section-7 .txtBox > div {
    width: 100%;
    max-width: 900px;
  }
  .index-section-7 .LBox {
    width: 60%;
  }
  .index-section-7 .LBox p {
    max-width: 80%;
  }
  .index-section-7 .RBox {
    width: 40%;
  }
}
@media screen and (max-width: 767px) {
  .index-section-7 {
    background-position: 25%;
  }
  .index-section-7 .txtBox {
    padding: 5% 0;
  }
  .index-section-7 .txtBox > div {
    max-width: calc(520px + 4em);
    flex-wrap: wrap;
  }
  .index-section-7 .LBox {
    width: 100%;
  }
  .index-section-7 .LBox p {
    max-width: none;
  }
  .index-section-7 .RBox {
    width: 100%;
    padding-top: 8%;
  }
  .index-section-7 .RBox > div a {
    max-width: 90%;
  }
  .index-section-7 .RBox a {
    margin: 0.5em;
  }
  .index-section-7 .RBox a > span {
    padding-left: 1em;
  }
}
@media screen and (max-width: 575px) {
  .index-section-7 {
    height: auto;
  }
  .index-section-7 > div:nth-child(1) {
    height: 250px;
  }
  .index-section-7 > div:nth-child(1) img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .index-section-7 .txtBox {
    position: relative;
  }
  .index-section-7 .txtBox > div {
    max-width: calc(320px + 4em);
    padding: 4em 2em 0 2em;
  }
  .index-section-7 .LBox {
    color: #343434;
  }
  .index-section-7 .LBox span > span {
    color: #F5821F;
  }
  .index-section-7 .LBox p {
    max-width: none;
    margin-left: 0em;
    padding-left: 0.8em;
    font-weight: 400 !important;
  }
  .index-section-7 .LBox a {
    color: #000;
    border: 1px solid #000;
    margin: auto;
    width: 257px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 1em;
  }
  .index-section-7 .LBox a:hover {
    color: #F5821F;
    border: 1px solid #F5821F;
    background-color: transparent;
  }
  .index-section-7 .RBox {
    display: block;
    padding-top: 3%;
  }
  .index-section-7 .RBox a {
    margin: 2em 0;
  }
  .index-section-7 .RBox a:nth-child(2) {
    background-color: #343434;
  }
}

.index-section-8 {
  min-height: 155px;
  display: flex;
  padding: 2em;
  background-color: #fff;
}
.index-section-8 > div {
  max-width: 1500px;
  width: 100%;
  margin: auto;
}
.index-section-8 > div .slick .item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}
.index-section-8 .slick-list {
  margin: 0 2em;
}
.index-section-8 .slick-arrow {
  width: 20px;
}
.index-section-8 .slick-arrow svg path {
  transition: all 0.3s;
}
.index-section-8 .slick-arrow:hover svg path {
  fill: #F5821F !important;
}
@media screen and (max-width: 575px) {
  .index-section-8 {
    min-height: auto;
    padding: 3em 1em 4em 1em;
  }
  .index-section-8 > div {
    max-width: 320px;
  }
}

@media screen and (max-width: 1199px) {
  .index-banner-section .slick-arrow {
    margin: 0;
  }
  .index-banner-section .slick-arrow i:before {
    font-size: 16px;
  }
  .index-banner-section .slick-arrow.slick-prev {
    left: 20px;
  }
  .index-banner-section .slick-arrow.slick-next {
    right: 20px;
  }
}
@media screen and (max-width: 991px) {
  .index-banner-section .banner .txtBox .text {
    max-width: 550px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.title {
    font-size: 70px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info1 {
    font-size: 70px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info2 {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) {
  .index-banner-section .banner .imgBox::before {
    width: 315px;
    left: -330px;
  }
  .index-banner-section .banner .imgBox::after {
    width: 50px;
    height: 50px;
    right: 0;
  }
  .index-banner-section .banner .txtBox .text {
    max-width: 450px;
  }
  .index-banner-section .banner .txtBox .text.type1 {
    line-height: 1.2;
  }
  .index-banner-section .banner .txtBox .text.type1 span.title {
    font-size: 60px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info1 {
    font-size: 60px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info2 {
    font-size: 18px;
  }
  .index-banner-section .slick-dots li {
    margin: 0.5em;
  }
  .index-banner-section .slick-dots li:not(.slick-active) button {
    background: rgba(198, 198, 198, 0.32);
  }
}
@media screen and (max-width: 575px) {
  .arrow {
    display: none;
  }
  .index-banner-section .banner .imgBox::before {
    width: 215px;
    left: -230px;
  }
  .index-banner-section .banner .imgBox::after {
    width: 40px;
    height: 40px;
  }
  .index-banner-section .banner .txtBox .text {
    max-width: 350px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.title {
    font-size: 48px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info1 {
    font-size: 48px;
  }
  .index-banner-section .banner .txtBox .text.type1 span.info2 span {
    display: block;
    line-height: 40px;
  }
  .index-banner-section .slick-dots {
    display: flex;
    flex-direction: unset;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 3em;
    top: auto;
  }
}
/* ==========================================================================
    products
 ==========================================================================*/
.products.section-1 {
  padding: 5% 2em 0em 2em;
}
.products.section-1 > div {
  max-width: 1500px;
  width: 100%;
  margin: auto;
}
.products.section-1 .slickBox {
  max-width: 1400px;
  width: 100%;
  height: 85px;
  margin: auto;
}
.products.section-1 .slickBox .slick a {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.0784313725);
  border: 1px solid #D8D8D8;
  border-radius: 32.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 65px;
  margin: 10px 8px;
  padding: 0 15px;
  color: #343434;
  font-size: 18px;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  text-decoration: none;
  border-radius: 32.5px;
  transition: all 0.3s;
}
.products.section-1 .slickBox .slick a span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.products.section-1 .slickBox .slick a.active {
  box-shadow: none;
  border: 1px solid #343434;
  background-color: #343434;
  color: #fff;
  font-weight: 700;
}
.products.section-1 .slickBox .slick a.active::before {
  content: "";
  background-color: #F5821F;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}
.products.section-1 .slickBox .slick a:hover {
  border: 1px solid #F5821F;
  background-color: #F5821F;
  color: #fff;
}
.products.section-1 .slick-list {
  margin: 0 2em;
}
.products.section-1 .slick-arrow {
  width: 15px;
  height: 15px;
}
.products.section-1 .slick-arrow svg,
.products.section-1 .slick-arrow img {
  width: 15px;
  height: 15px;
}
.products.section-2 {
  padding: 0em 2em;
}
.products.section-2 > div {
  max-width: 1500px;
  margin: auto;
  width: calc(100% - 8em);
}
.products.section-2 > div > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.products.section-3 {
  padding: 0 2em;
}
.products.section-3 > div {
  max-width: 1500px;
  width: 100%;
  width: calc(100% - 8em);
  margin: auto;
}
.products.section-4 {
  background-color: #F3F3F3;
  padding: 6% 2em 4.5% 2em;
}
.products.section-4 > div {
  max-width: 1630px;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 0 5%;
  position: relative;
}
.products.section-4 .LBox {
  width: 22%;
}
.products.section-4 .slickBox {
  width: 78%;
}
.products.section-4 .slick {
  max-width: 1500px;
  margin: auto;
}
.products.section-4 .item > a {
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  height: 380px;
  margin: 0 4%;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s;
}
.products.section-4 .item > a::after {
  content: "";
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.568627451);
  position: absolute;
  bottom: 15px;
  width: 90%;
  height: 20px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.products.section-4 .item > a::before {
  content: "VIEW MORE";
  width: 110px;
  height: 110px;
  background-color: rgba(245, 130, 31, 0.9019607843);
  position: absolute;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  top: 20%;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s;
}
.products.section-4 .item > a img {
  height: 200px;
  object-fit: none;
  mix-blend-mode: darken;
}
.products.section-4 .item > a span:nth-child(2) {
  font-size: 22px;
}
.products.section-4 .item > a span:nth-child(3) {
  font-size: 16px;
}
.products.section-4 .item > a span:nth-child(4) {
  font-size: 20px;
}
.products.section-4 .item > a:hover::after {
  opacity: 1;
}
.products.section-4 .item > a:hover::before {
  opacity: 1;
}
.products.section-4 .slick-slide {
  padding-bottom: 4em;
}
.products.section-4 .slick-arrow {
  top: 45%;
  width: 25px;
  height: auto;
  transition: all 0.3s;
}
.products.section-4 .slick-arrow svg path {
  transition: all 0.3s;
}
.products.section-4 .slick-arrow:hover svg path {
  fill: #F5821F !important;
}
.products.section-4 .slick-arrow:hover.slick-next {
  right: -5px;
}
.products.section-4 .slick-arrow:hover.slick-prev {
  left: -5px;
}
@media screen and (max-width: 1199px) {
  .products.section-2 > div, .products.section-3 > div {
    max-width: 950px;
  }
}
@media screen and (max-width: 991px) {
  .products.section-2 > div, .products.section-3 > div, .products.section-4 > div {
    width: calc(100% - 6em);
    max-width: 740px;
  }
  .products.section-4 {
    padding: 4em 2em;
  }
  .products.section-4 > div {
    padding: 0 5% 0 8%;
    width: 100%;
  }
  .products.section-4 .LBox {
    width: 45%;
  }
  .products.section-4 .slickBox {
    width: 65%;
  }
  .products.section-4 .slick-arrow {
    width: 15px;
  }
}
@media screen and (max-width: 767px) {
  .products.section-2 > div, .products.section-3 > div {
    width: calc(100% - 4em);
  }
}
@media screen and (max-width: 575px) {
  .products.section-1 .slickBox .slick a {
    height: 55px;
    margin: 10px 5px;
  }
  .products.section-2 > div > div {
    display: block;
    text-align: center;
  }
  .products.section-3 > div, .products.section-4 > div {
    max-width: 350px;
    flex-wrap: wrap;
    padding: 0;
  }
  .products.section-3 .LBox, .products.section-4 .LBox {
    width: 100%;
    padding-bottom: 2em;
  }
  .products.section-3 .item a, .products.section-4 .item a {
    margin: 0;
  }
  .products.section-3 .slickBox, .products.section-4 .slickBox {
    width: 100%;
  }
  .products.section-3 .slick-arrow, .products.section-4 .slick-arrow {
    display: none;
  }
}
.products .select2-container {
  max-width: 240px;
  min-width: 220px;
}
.products .select2-container--default .select2-selection--single .select2-selection__rendered::before {
  content: "排列方式： ";
}

.productBox {
  padding: 0 0.5em;
}
.productBox > a:nth-child(1) {
  position: relative;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  width: 100%;
  height: 380px;
  margin: 1em auto 15% auto;
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s;
  z-index: 1;
  padding: 15px;
}
.productBox > a:nth-child(1)::before {
  content: "VIEW MORE";
  width: 110px;
  height: 110px;
  background-color: rgba(245, 130, 31, 0.9019607843);
  position: absolute;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
  text-align: center;
  top: 20%;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s;
}
.productBox > a:nth-child(1) img {
  height: 200px;
  width: 100%;
  object-fit: none;
  mix-blend-mode: darken;
}
.productBox > a:nth-child(1) span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.productBox > a:nth-child(1) span:nth-child(2) {
  font-size: 22px;
}
.productBox > a:nth-child(1) span:nth-child(3) {
  font-size: 16px;
}
.productBox > a:nth-child(1) span.sellingPrice {
  font-size: 20px;
}
.productBox > a:nth-child(1) span.sellingPrice span {
  background-color: #53C8DD;
  color: #fff;
  border-radius: 17.5px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Noto Sans TC";
  letter-spacing: 0.3px;
  width: 103px;
  height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .productBox > a:nth-child(1) {
    margin: 1em auto 1em auto;
  }
}
.productBox .bag {
  position: absolute;
  right: calc(1.5em + 10px);
  bottom: calc(12% + 15px);
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
}
.productBox .bag img {
  width: 50px;
  height: 50px;
}
.productBox .bag:hover {
  transform: scale(0.9);
}
@media screen and (max-width: 991px) {
  .productBox .bag {
    display: none;
  }
}
.productBox::after {
  content: "";
  box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.568627451);
  position: absolute;
  bottom: 70px;
  width: 80%;
  height: 20px;
  margin: auto;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.productBox:hover a::before {
  opacity: 1;
}
.productBox:hover .bag {
  opacity: 1;
}
.productBox:hover::after {
  opacity: 1;
}

.product > div {
  max-width: 1500px;
  width: 100%;
  margin: auto;
}
.product .breadCrumbs a {
  text-shadow: none;
}
.product.section-1 {
  background-image: url(images/products/product/bg.png);
  background-repeat: no-repeat;
  padding: 3% 2em;
  position: relative;
  z-index: 1;
}
.product.section-1 > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product.section-1 .LBox {
  max-width: 800px;
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 700px;
  position: relative;
}
.product.section-1 .LBox .slickBox {
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
}
.product.section-1 .LBox .slickBox .slider-nav {
  width: 20%;
  max-width: 98px;
  max-height: 480px;
  margin: auto 0;
}
.product.section-1 .LBox .slickBox .slider-nav .item {
  padding: 10px;
  margin: 0.5em 1px;
  cursor: pointer;
}
.product.section-1 .LBox .slickBox .slider-nav .item img {
  transition: all 0.3s;
}
.product.section-1 .LBox .slickBox .slider-nav .item.slick-current {
  border: 1px solid #F5821F;
  border-radius: 15px;
  background-color: #fff;
}
.product.section-1 .LBox .slickBox .slider-nav .item:hover img {
  transform: scale(0.95);
}
.product.section-1 .LBox .slickBox .slider-for {
  max-width: 540px;
  width: 80%;
  margin: auto;
}
.product.section-1 .LBox .slickBox .slick-arrow {
  width: 15px;
  height: 15px;
}
.product.section-1 .LBox .slickBox .slick-arrow img,
.product.section-1 .LBox .slickBox .slick-arrow svg {
  width: 15px;
  height: 15px;
}
.product.section-1 .LBox .slickBox .slick-prev {
  left: 50%;
  top: -30px;
  transform: rotate(90deg) translateY(50%);
}
.product.section-1 .LBox .slickBox .slick-next {
  right: 50%;
  top: 100%;
  transform: rotate(90deg) translateY(-50%);
}
.product.section-1 .LBox .tagBox {
  padding-right: 1em;
}
.product.section-1 .LBox .tagBox .tag {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #333333;
  border: 1px solid #BFBFBF;
  border-radius: 5px;
  height: 35px;
  padding: 6px 12px;
  margin-right: 5px;
  margin-bottom: 10px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s;
}
.product.section-1 .LBox .tagBox .tag::before {
  content: "#";
}
.product.section-1 .LBox .tagBox .tag:hover {
  color: #53C8DD;
  border: 1px solid currentColor;
}
.product.section-1 .RBox {
  max-width: 590px;
  width: 40%;
}
.product.section-1 .RBox .info-script {
  max-width: 475px;
  width: 100%;
}
.product.section-1 .RBox .info-content {
  max-width: 550px;
}
.product.section-1 .RBox .info-content .colorBox {
  display: flex;
  align-items: center;
}
.product.section-1 .RBox .info-content .colorBox .colorstyle {
  display: inline-flex;
}
.product.section-1 .RBox .info-content .colorBox .colorstyle .color-btn {
  display: block;
  border: 1px solid #D8D8D8;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  margin-right: 10px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  overflow: hidden;
}
.product.section-1 .RBox .info-content .colorBox .colorstyle .color-btn .color {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: block;
}
.product.section-1 .RBox .info-content .colorBox .colorstyle .color-btn:hover, .product.section-1 .RBox .info-content .colorBox .colorstyle .color-btn.active {
  border: 1px solid #4f4f4f;
}
.product.section-1 .RBox .info-content .priceBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.product.section-1 .RBox .info-content .priceBox .stock-btn {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 4em;
}
.product.section-1 .RBox .info-content .priceBox .stock-btn .all-btn {
  background: #53C8DD;
  margin: 0;
}
.product.section-1 .RBox .info-content .numberfield {
  height: 50px;
  border: 1px solid #C4C4C4;
  color: #000;
  display: flex;
  width: 100%;
}
.product.section-1 .RBox .info-content .numberfield button {
  width: 50px;
  height: 50px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.product.section-1 .RBox .info-content .numberfield button img,
.product.section-1 .RBox .info-content .numberfield button svg {
  width: 10px;
  height: 10px;
}
.product.section-1 .RBox .info-content .numberfield button img path,
.product.section-1 .RBox .info-content .numberfield button img rect,
.product.section-1 .RBox .info-content .numberfield button svg path,
.product.section-1 .RBox .info-content .numberfield button svg rect {
  fill: #343434 !important;
  transition: all 0.3s;
}
.product.section-1 .RBox .info-content .numberfield button:hover img path,
.product.section-1 .RBox .info-content .numberfield button:hover img rect,
.product.section-1 .RBox .info-content .numberfield button:hover svg path,
.product.section-1 .RBox .info-content .numberfield button:hover svg rect {
  fill: #F5821F !important;
}
.product.section-1 .RBox .info-content .numberfield .amount {
  border: none;
  height: 48px;
  line-height: 48px;
  text-align: center;
  flex-grow: 1;
  width: calc(100% - 70px);
}
.product.section-1 .RBox .info-tag {
  border-top: 1px solid #C4C4C4;
  max-width: 550px;
}
.product.section-1 .RBox .info-tag .tag {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 20px;
  margin-right: 15px;
  min-width: 95px;
  height: 35px;
  padding: 6px 20px;
  text-align: center;
  display: inline-block;
}
.product.section-1 .RBox .info-tag .word {
  color: #4D4D4D;
  display: inline-block;
}
.product.section-1 .RBox .info-tag .info-activityUl > li {
  padding: 0.3em 0;
  display: none;
}
.product.section-1 .RBox .info-tag .info-activityUl > li.show {
  display: block;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event {
  display: flex;
  justify-content: space-between;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event .event-detail {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event .word {
  color: #4D4D4D;
  display: inline-block;
  width: 100%;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event .word span {
  margin-right: 10%;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event .desc-toggle {
  display: inline-block;
}
.product.section-1 .RBox .info-tag .info-activityUl > li .event .desc-toggle:hover {
  color: #F5821F;
}
.product.section-1 .RBox .show-more .show-more-btn {
  color: #4D4D4D;
  display: flex;
  align-items: center;
  width: fit-content;
  margin-right: 0.5em;
  margin-left: auto;
  text-decoration: none;
  transition: all 0.3s;
}
.product.section-1 .RBox .show-more .show-more-btn:hover {
  color: #F5821F;
}
.product.section-1 .RBox .show-more .show-more-btn .word {
  padding-right: 10px;
  display: block;
}
.product.section-1 .RBox .show-more .show-more-btn .word-less {
  padding-right: 10px;
  display: none;
}
.product.section-1 .RBox .show-more .show-more-btn .icon img,
.product.section-1 .RBox .show-more .show-more-btn .icon svg {
  margin-top: 4px;
  width: 7px;
  height: 12px;
  transform: rotate(270deg);
  fill: #F5821F;
}
.product.section-1 .bBox {
  width: 100%;
  display: flex;
}
.product.section-1 .bBox .share-group {
  width: 60%;
  border: 1px solid #C4C4C4;
  display: inline-flex;
  align-items: center;
  padding: 1em 1.5em;
  flex: 0 1 60%;
}
.product.section-1 .bBox .share-group .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 2em;
}
.product.section-1 .bBox .share-group .icon img,
.product.section-1 .bBox .share-group .icon svg {
  fill: #C4C4C4;
  transition: all 0.3s;
}
.product.section-1 .bBox .share-group .icon:hover svg {
  fill: currentColor;
}
.product.section-1 .bBox .share-group div.icon img,
.product.section-1 .bBox .share-group div.icon svg {
  fill: #808080;
}
.product.section-1 .bBox .share-group div.icon:hover svg {
  fill: #808080;
}
.product.section-1 .bBox .button-group {
  width: 40%;
  height: 70px;
  display: flex;
  flex: 1 0 40%;
}
.product.section-1 .bBox .button-group .buy-btn {
  background-color: #2A2A2A;
  width: 100%;
}
.product.section-1 .bBox .button-group .buy-addbtn {
  background-color: #F5821F;
  width: 100%;
}
.product.section-1 .bBox .button-group .btn-style {
  font-size: 18px;
  color: #fff;
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s;
}
.product.section-1 .bBox .button-group .btn-style:hover {
  transform: scale(0.92);
}
@media screen and (max-width: 1199px) {
  .product.section-1 .LBox .slickBox {
    padding: 0;
    padding-right: 1em;
  }
}
@media screen and (max-width: 991px) {
  .product.section-1 > div {
    flex-wrap: wrap;
    max-width: 700px;
  }
  .product.section-1 .LBox {
    width: 100%;
    max-width: none;
    height: auto;
    padding-top: 2em;
  }
  .product.section-1 .LBox .slickBox {
    padding-right: 0;
  }
  .product.section-1 .LBox .slickBox .slider-nav {
    max-height: 380px;
  }
  .product.section-1 .LBox .slickBox .slider-for {
    max-width: 400px;
  }
  .product.section-1 .LBox .tagBox .tag {
    height: 30px;
    padding: 4px 5px;
  }
  .product.section-1 .RBox {
    width: 100%;
    max-width: none;
  }
  .product.section-1 .RBox .info-head {
    border-top: 1px solid #C4C4C4;
    padding-top: 2em;
  }
  .product.section-1 .RBox .info-script,
  .product.section-1 .RBox .info-content,
  .product.section-1 .RBox .info-tag {
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  .product.section-1 .bBox .share-group {
    flex: 0 1 0;
  }
  .product.section-1 .bBox .button-group {
    flex: 1 1 0;
    height: 50px;
  }
}
@media screen and (max-width: 575px) {
  .product.section-1 .RBox .info-content .priceBox .stock-btn {
    position: relative;
    margin-top: 1em;
    margin-left: 4em;
  }
  .product.section-1 .bBox {
    flex-wrap: wrap;
  }
  .product.section-1 .bBox .share-group {
    flex: 0 1 100%;
    border: 0;
  }
  .product.section-1 .bBox .button-group {
    flex: 1 1 100%;
  }
}
.product.section-2 {
  padding: 3% 2em;
}
.product.section-2 .meau {
  margin: auto;
  margin-bottom: 3em;
  padding: 0 calc(70% - 600px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: sticky;
  background-color: #fff;
  z-index: 1;
  top: 100px;
}
@media screen and (max-width: 1199px) {
  .product.section-2 .meau {
    margin-bottom: 2em;
    padding: 0 calc(80% - 600px);
    top: 120px;
  }
}
@media screen and (max-width: 991px) {
  .product.section-2 .meau {
    margin-bottom: 1em;
    top: 60px;
  }
}
.product.section-2 .meau span {
  color: #343434;
  font-size: 20px;
  padding: 1em 0;
  border-bottom: 3px solid transparent;
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
}
.product.section-2 .meau span:hover {
  color: #F5821F;
}
.product.section-2 .meau span.active {
  font-weight: 600;
  border-bottom: 3px solid #F5821F;
}
@media screen and (max-width: 575px) {
  .product.section-2 .meau span {
    font-size: 16px;
  }
}
.product.section-2 .SpecificationBox {
  margin-bottom: 10%;
}
.product.section-2 .SpecificationBox table {
  width: 100%;
  border: 1px solid #CBCBCB;
}
.product.section-2 .SpecificationBox table tr {
  height: 55px;
}
.product.section-2 .SpecificationBox table tr:nth-child(odd) {
  background-color: #F3F3F3;
}
.product.section-2 .SpecificationBox table td:nth-child(1) {
  border-right: 1px solid #CBCBCB;
  padding: 0 1em 0 15%;
  font-size: 18px;
  font-weight: 500;
  color: #484848;
  letter-spacing: 0.3px;
}
.product.section-2 .SpecificationBox table td:nth-child(2) {
  padding: 0 1em 0 20%;
  font-size: 16px;
  color: #343434;
  letter-spacing: 0.3px;
}
.product.section-2 .brandBox {
  position: relative;
  min-height: 550px;
  height: auto;
  margin-bottom: 8%;
}
.product.section-2 .brandBox .txtBox {
  max-width: 720px;
  width: 100%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  padding: 7em 3% 5% 3%;
}
.product.section-2 .brandBox .txtBox p {
  margin-bottom: 0.8rem;
}
.product.section-2 .brandBox .txtBox::before {
  content: "";
  background-image: url(images/products/product/JBL-logo.png);
  width: 110px;
  height: 95px;
  position: absolute;
  top: 0;
  left: calc(5% - 0px);
}
.product.section-2 .downloadBox {
  padding-bottom: 3%;
}
.product.section-2 .downloadBox .item {
  border: 1px solid #C4C4C4;
  border-radius: 15px;
  padding: 1em 1.5em 1em 1.5em;
  margin-bottom: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0px 0px 10px transparent;
  text-decoration: none;
  transition: all 0.3s;
}
.product.section-2 .downloadBox .item > span {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  display: block;
}
.product.section-2 .downloadBox .item > span span {
  padding: 0 0.5em;
}
.product.section-2 .downloadBox .item span.title {
  transition: all 0.3s;
}
.product.section-2 .downloadBox .item .downloadBtn {
  color: #000;
  background-color: #F3F3F3;
  max-width: 200px;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
  position: relative;
  z-index: 0;
  transition: all 0.3s;
}
.product.section-2 .downloadBox .item .downloadBtn span {
  margin-left: 0.5em;
}
.product.section-2 .downloadBox .item .downloadBtn img,
.product.section-2 .downloadBox .item .downloadBtn svg {
  width: 26px;
  fill: #F5821F;
  transition: all 0.3s;
}
.product.section-2 .downloadBox .item .downloadBtn::after {
  content: "";
  background: linear-gradient(to right, #F5821F, #F59704);
  width: 100%;
  height: 100%;
  border-radius: 25px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.product.section-2 .downloadBox .item:hover {
  border: 1px solid #000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1019607843);
}
.product.section-2 .downloadBox .item:hover span.title {
  color: #000;
}
.product.section-2 .downloadBox .item:hover .downloadBtn {
  color: #fff;
}
.product.section-2 .downloadBox .item:hover .downloadBtn img,
.product.section-2 .downloadBox .item:hover .downloadBtn svg {
  fill: #fff;
}
.product.section-2 .downloadBox .item:hover .downloadBtn::after {
  opacity: 1;
}
.product.section-2 .downloadBox .linkBtn {
  width: 200px;
  height: 55px;
  border-radius: 27.5px;
  color: #9E7D54;
  border: 1px solid #9E7D54;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3em auto;
  text-decoration: none;
  transition: all 0.3s;
}
.product.section-2 .downloadBox .linkBtn span {
  margin-right: 0.5em;
}
.product.section-2 .downloadBox .linkBtn:hover {
  transform: scale(0.95);
}
@media screen and (max-width: 1199px) {
  .product.section-2 .SpecificationBox table td:nth-child(1) {
    padding: 10px 1em 10px 10%;
  }
  .product.section-2 .SpecificationBox table td:nth-child(2) {
    padding: 10px 1em 10px 10%;
  }
  .product.section-2 .downloadBox .item > span {
    width: 70%;
  }
}
@media screen and (max-width: 991px) {
  .product.section-2 .brandBox {
    background-position: 18%;
  }
  .product.section-2 .brandBox .txtBox {
    width: 90%;
    padding-top: 6em;
    padding: 7em 2em 2em 2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .product.section-2 .downloadBox > div {
    max-width: 600px;
    margin: auto;
  }
  .product.section-2 .downloadBox .item {
    padding: 1.5em 1em;
  }
  .product.section-2 .downloadBox .item > span {
    width: 100%;
    max-width: 600px;
    margin: auto;
  }
  .product.section-2 .downloadBox .item > span > span {
    font-size: 16px !important;
  }
  .product.section-2 .downloadBox .item .downloadBtn {
    width: 100%;
    margin: 1em auto 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .product.section-2 .SpecificationBox {
    margin-bottom: 5em;
  }
  .product.section-2 .SpecificationBox table td:nth-child(1) {
    padding: 10px 1em 10px 1em;
    font-size: 16px;
  }
  .product.section-2 .SpecificationBox table td:nth-child(2) {
    padding: 10px 1em 10px 1em;
    font-size: 15px;
  }
  .product.section-2 .brandBox {
    margin-bottom: 5em;
  }
  .product.section-2 .downloadBox > div {
    max-width: 500px;
  }
  .product.section-2 .downloadBox .item > span:not(.downloadBtn) > span {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5em;
    padding: 0;
  }
}

.slick-modal {
  background-color: #F3F3F3;
  height: 100vh;
  align-items: center;
  padding: 1.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
  display: flex;
}
.slick-modal.show {
  z-index: 100;
}
.slick-modal .slickBox {
  max-width: 1400px;
  width: 100%;
  margin: auto;
  position: relative;
}
.slick-modal .closeBtn {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 0;
  opacity: 0.4;
}
.slick-modal .closeBtn img,
.slick-modal .closeBtn svg {
  width: 30px;
  fill: #C4C4C4;
}
.slick-modal .slick-arrow {
  width: 25px;
}
.slick-modal .slick-dots {
  margin-top: 3em;
}
.slick-modal .slick-dots li {
  width: 8px;
  height: 8px;
  transition: all 0.3s;
}
.slick-modal .slick-dots li.slick-active {
  width: 46px;
}
.slick-modal .slick-dots li.slick-active button {
  background: #F5821F;
  width: 46px;
  height: 8px;
  border-radius: 4px;
}
.slick-modal .slick-dots li:not(.slick-active) button {
  background: #666666;
}
.slick-modal .item div {
  background-color: #fff;
  max-width: 750px;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 20px;
  margin: auto;
  width: 80%;
  padding: 4em;
}

.ToBig {
  position: absolute;
  right: 0;
  bottom: 150px;
}

#productScrollNavEdit.spyNav {
  margin: auto;
  margin-bottom: 3em;
  padding: 0 calc(70% - 600px);
  width: 100%;
  position: sticky;
  background-color: #fff;
  z-index: 1;
  top: 100px;
}
#productScrollNavEdit.spyNav.showItem {
  opacity: 1;
  left: 37px;
}
#productScrollNavEdit.spyNav ul {
  padding: 0;
  display: flex;
  justify-content: space-between;
}
#productScrollNavEdit.spyNav ul li {
  padding: 0 0 1em 0;
  border-bottom: 3px solid transparent;
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
}
#productScrollNavEdit.spyNav ul li:hover {
  color: #F5821F;
}
#productScrollNavEdit.spyNav ul li.active {
  border-bottom: 3px solid #F5821F;
}
#productScrollNavEdit.spyNav ul li.active .title {
  font-weight: 600;
}
#productScrollNavEdit.spyNav ul li .title {
  height: 29px;
  line-height: 27px;
  letter-spacing: 0.3px;
  transition: all 0.4s;
  color: #343434;
  font-size: 20px;
  padding: 1em 0;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 1199px) {
  #productScrollNavEdit.spyNav {
    margin-bottom: 2em;
    padding: 0 calc(80% - 600px);
    top: 120px;
  }
}
@media screen and (max-width: 991px) {
  #productScrollNavEdit.spyNav {
    margin-bottom: 1em;
    top: 60px;
  }
}
@media screen and (max-width: 575px) {
  #productScrollNavEdit.spyNav ul li .title {
    font-size: 16px;
  }
}

/* ==========================================================================
    about
 ==========================================================================*/
.about.section-1 {
  padding: 8% 2em 2em 2em;
}
.about.section-1 > div {
  display: flex;
  max-width: 1480px;
  width: 100%;
  margin: auto;
}
.about.section-1 .imgBox {
  width: 50%;
  text-align: center;
}
.about.section-1 .imgBox img {
  object-fit: cover;
  max-width: 700px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.about.section-1 .txtBox {
  width: 50%;
  max-width: calc(550px + 6%);
  padding: 0 1% 0 5%;
}
.about.section-1 .txtBox p {
  line-height: 1.8;
}
@media (max-width: 992px) {
  .about.section-1 > div {
    max-width: 650px;
    flex-wrap: wrap;
  }
  .about.section-1 .imgBox {
    width: 100%;
  }
  .about.section-1 .txtBox {
    width: 100%;
    padding: 1.5em 0em;
    max-width: none;
  }
}
@media (max-width: 767px) {
  .about.section-1 > div {
    max-width: 500px;
  }
}
.about.section-2 {
  background: url(images/about/bg1.jpg);
  padding: 8% 2em 3% 2em;
  margin-top: -4.5em;
}
.about.section-2 > div {
  max-width: 1400px;
  width: 100%;
  margin: auto;
}
.about.section-2 > div > div {
  text-align: center;
  padding: 2em 0;
}
.about.section-2 > div > div .item {
  display: inline-block;
  margin: 1.5em 2em;
}
.about.section-2 span {
  text-align: center;
  display: block;
}
@media (max-width: 992px) {
  .about.section-2 {
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .about.section-2 > div > div .item {
    margin: 0.5em 7em;
  }
  .about.section-2 > div > div .item img {
    padding: 1em 1em;
    height: 50px;
  }
}
.about.section-3 {
  background: url(images/about/bg2.jpg);
  background-position: center;
  max-height: 781px;
  height: 50vw;
  display: flex;
  padding: 2em;
  position: relative;
}
.about.section-3 > div {
  max-width: 1440px;
  width: calc(100% - 4em);
  margin: auto;
}
.about.section-3 span {
  display: block;
}
.about.section-3 .txtBox {
  padding-top: 15%;
}
.about.section-3 .imgBox {
  position: absolute;
  right: 12%;
  width: auto;
  padding: 0;
  bottom: -25%;
  text-align: right;
}
@media (max-width: 1680px) {
  .about.section-3 .imgBox {
    right: 0;
  }
}
@media (max-width: 1460px) {
  .about.section-3 .imgBox img {
    width: 90%;
  }
}
@media (max-width: 1199px) {
  .about.section-3 .imgBox img {
    width: 70%;
  }
}
@media (max-width: 992px) {
  .about.section-3 {
    background-position: 50% 20%;
    min-height: 450px;
    margin-bottom: 15%;
  }
  .about.section-3 > div {
    max-width: 450px;
    margin-top: 10%;
    width: 100%;
  }
  .about.section-3 .txtBox {
    padding-top: 0;
  }
  .about.section-3 .imgBox {
    position: relative;
    margin-top: 5em;
  }
  .about.section-3 .imgBox img {
    max-width: 450px;
    margin: auto;
    display: block;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .about.section-3 {
    margin-bottom: 20%;
  }
}
.about.section-4 {
  padding: 6.5% 2em 5% 2em;
}
.about.section-4 > div {
  display: flex;
  max-width: 1480px;
  width: 100%;
  margin: auto;
}
.about.section-4 .imgBox {
  width: 50%;
  text-align: center;
}
.about.section-4 .imgBox img {
  object-fit: cover;
  max-width: 700px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.about.section-4 .txtBox {
  width: 50%;
  max-width: calc(640px + 6%);
  margin: auto;
  padding: 5em 1% 0 5%;
}
.about.section-4 .txtBox p {
  line-height: 1.8;
}
@media (max-width: 992px) {
  .about.section-4 > div {
    max-width: 650px;
    flex-wrap: wrap;
  }
  .about.section-4 .imgBox {
    width: 100%;
  }
  .about.section-4 .txtBox {
    width: 100%;
    padding: 1.5em 0em;
    max-width: none;
  }
}
@media (max-width: 767px) {
  .about.section-4 > div {
    max-width: 500px;
  }
}
.about.section-5 {
  background: url(images/about/bg3.jpg);
  background-size: cover;
  height: 55vw;
  max-height: 650px;
  display: flex;
  padding: 2em;
  position: relative;
}
.about.section-5 > div {
  display: flex;
  max-width: 1400px;
  width: calc(100% - 4em);
  margin: auto;
}
.about.section-5 .txtBox {
  z-index: 1;
}
.about.section-5 .txtBox > span {
  max-width: 630px;
}
.about.section-5 .txtBox p {
  max-width: 630px;
  line-height: 2;
}
.about.section-5 .txtBox a {
  color: #fff;
  width: 215px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(to right, #F5821F, #F59704);
  transition: all 0.3s;
}
.about.section-5 .txtBox a:hover {
  transform: scale(0.95);
}
.about.section-5 .imgBox {
  position: absolute;
  right: -5%;
  bottom: -15%;
  z-index: 0;
}
.about.section-5 .imgBox img {
  margin: auto;
  margin-right: 0;
  display: block;
}
@media (max-width: 1460px) {
  .about.section-5 .txtBox {
    padding-bottom: 10%;
  }
  .about.section-5 .imgBox img {
    width: 85%;
  }
}
@media (max-width: 1199px) {
  .about.section-5 .txtBox > span,
  .about.section-5 .txtBox p {
    max-width: 550px;
  }
  .about.section-5 .imgBox img {
    width: 70%;
  }
}
@media (max-width: 992px) {
  .about.section-5 {
    min-height: 450px;
    max-height: none;
    height: auto;
  }
  .about.section-5 > div {
    max-width: 650px;
    width: 100%;
    flex-wrap: wrap;
  }
  .about.section-5 .txtBox {
    padding-top: 5%;
    padding-bottom: 0;
  }
  .about.section-5 .txtBox > span,
  .about.section-5 .txtBox p {
    max-width: none;
  }
  .about.section-5 .txtBox p {
    line-height: 1.8;
  }
  .about.section-5 .imgBox {
    position: relative;
    bottom: -2em;
    right: -8em;
    margin-top: -3em;
  }
  .about.section-5 .imgBox img {
    max-width: 650px;
    margin: auto;
    display: block;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .about.section-5 > div {
    max-width: 500px;
  }
}

/* ==========================================================================
    new
 ==========================================================================*/
.news.section-1 {
  padding: 1em 2em;
}
.news.section-1 > div {
  max-width: 1450px;
  width: calc(100% - 4em);
  margin: auto;
}
.news.section-1 > div > a {
  position: relative;
  display: flex;
  box-shadow: 4px 0px 50px rgba(0, 0, 0, 0.1490196078);
  border-radius: 15px;
  margin-right: 3em;
  margin-bottom: 5%;
  transition: all 0.3s;
  text-decoration: none;
  color: #000;
}
.news.section-1 > div > a .imgBox {
  width: 43%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 15px 0 0 15px;
}
.news.section-1 > div > a .imgBox img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
.news.section-1 > div > a .txtBox {
  width: 57%;
  margin: auto;
  padding: 3% 10% 3% 6%;
}
.news.section-1 > div > a .txtBox > span {
  max-width: calc(580px + 0em);
  display: block;
}
.news.section-1 > div > a .txtBox > span span:nth-child(1) {
  margin-bottom: 0.8em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.news.section-1 > div > a .txtBox > span span:nth-child(2) {
  padding-top: 1.5em;
  border-top: 2px solid #9E7D54;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.news.section-1 > div > a .txtBox > span span:nth-child(3) {
  color: #F5821F;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.news.section-1 > div > a .moreBtn {
  position: absolute;
  top: 50%;
  right: 0px;
  background-color: #fff;
  transform: translate(50%, -50%);
  transition: all 0.3s;
}
.news.section-1 > div > a:hover {
  box-shadow: 13px 5px 50px rgba(0, 0, 0, 0.2);
}
.news.section-1 > div > a:hover .imgBox img {
  transform: scale(1.1);
}
.news.section-1 > div > a:hover .moreBtn {
  background-color: #F5821F;
  color: #fff;
  border: 1px solid transparent;
}
@media screen and (max-width: 1199px) {
  .news.section-1 > div > a .txtBox {
    padding: 4% 8% 4% 5%;
  }
  .news.section-1 > div > a .txtBox p {
    -webkit-line-clamp: 2;
  }
  .news.section-1 > div > a .moreBtn {
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 991px) {
  .news.section-1 > div > a {
    flex-wrap: wrap;
    max-width: 500px;
    margin: 1em auto 1em auto;
  }
  .news.section-1 > div > a .imgBox {
    max-width: none;
    width: 100%;
    order: 1;
    border-radius: 15px 15px 0 0;
  }
  .news.section-1 > div > a .txtBox {
    padding: 2.5em 2em 25% 2em;
    width: 100%;
    max-width: none;
    order: 2;
  }
  .news.section-1 > div > a .txtBox > span {
    max-width: none;
  }
  .news.section-1 > div > a .moreBtn {
    bottom: -1em;
    top: auto;
    right: 50%;
  }
  .news.section-1 > div > a:not(:nth-last-child(1)) {
    margin: 1em auto 3em auto;
  }
}
@media screen and (max-width: 575px) {
  .news.section-1 > div {
    width: calc(100% - 2em);
  }
  .news.section-1 > div > a .txtBox {
    padding: 2.5em 2em 10em 2em;
  }
}

.new.section-1 {
  margin-top: 120px;
  padding: 1em 2em;
}
.new.section-1 > div {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}
.new.section-1 .TBox {
  text-align: center;
  padding-top: 2.5em;
  padding-bottom: 2em;
  border-bottom: 2px solid #9E7D54;
}
.new.section-1 .TBox span {
  display: block;
}
.new.section-1 .TBox span:nth-child(1) {
  background-color: #F3F3F3;
  width: 144px;
  height: 45px;
  border-radius: 22.5px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new.section-1 .TBox span:nth-child(2) {
  padding: 0.3em 0;
}
.new.section-1 .shareBox {
  display: flex;
  justify-content: center;
  padding: 2em 0;
}
.new.section-1 .shareBox > img {
  margin: 0 8px;
  display: inline-block;
}
.new.section-1 .shareBox a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #343434;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
  transition: all 0.3s;
}
.new.section-1 .shareBox a svg {
  fill: #343434;
  transition: all 0.3s;
}
.new.section-1 .shareBox a:nth-child(2) img,
.new.section-1 .shareBox a:nth-child(2) svg {
  width: 20px;
  fill: #000;
}
.new.section-1 .shareBox a:nth-child(3) img,
.new.section-1 .shareBox a:nth-child(3) svg {
  width: 10px;
  fill: #000;
}
.new.section-1 .shareBox a:nth-child(4) img,
.new.section-1 .shareBox a:nth-child(4) svg {
  width: 18px;
  fill: #000;
}
.new.section-1 .shareBox a:hover {
  background-color: #F5821F;
  border: 1px solid #F5821F;
}
.new.section-1 .shareBox a:hover svg {
  fill: #fff;
}
.new.section-1 .CBox {
  padding: 1.5em 0 1em 0;
}
.new.section-1 .CBox p {
  color: #343434;
  font-size: 16px;
  letter-spacing: 0.3px;
  line-height: 1.8;
}
.new.section-1 .CBox img {
  margin: 1.5em 0;
}
.new.section-1 .CBox .video-container {
  margin: 1.5em 0;
}
@media screen and (max-width: 991px) {
  .new.section-1 {
    margin-top: 65px;
  }
}

.pageBox {
  padding: 0 2em;
}
.pageBox > div {
  border-top: 1px solid #8E8E8E;
  padding: 3% 0 6% 0;
  max-width: 1000px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pageBox a {
  color: #000;
  text-decoration: none;
  max-width: calc(260px + 2em);
  line-height: 1.8;
  position: relative;
  transition: all 0.3s;
}
.pageBox a span {
  display: block;
}
.pageBox a span:nth-child(1) {
  margin-bottom: 0.5em;
}
.pageBox a.prev {
  padding-left: 2.5em;
  left: 0;
  width: calc(50% - 55px);
}
.pageBox a.prev::before {
  content: "\e80e";
  font-family: "fontello";
  font-weight: 800;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
}
.pageBox a.next {
  padding-right: 2.5em;
  text-align: right;
  right: 0;
  width: calc(50% - 55px);
}
.pageBox a.next::before {
  content: "\e801";
  font-family: "fontello";
  font-weight: 800;
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s;
}
.pageBox a:hover::before {
  color: #F5821F;
}
.pageBox a:hover.next {
  right: -10px;
}
.pageBox a:hover.prev {
  left: -10px;
}
.pageBox .moreBtn {
  position: unset;
  padding: 1em;
}
@media screen and (max-width: 991px) {
  .pageBox > div {
    padding: 2em 0 5em 0;
  }
  .pageBox .moreBtn {
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 767px) {
  .pageBox a span:nth-child(1) {
    margin-bottom: 0em;
  }
  .pageBox a span:nth-child(2) {
    display: none;
  }
}

/* ==========================================================================
    store
 ==========================================================================*/
.store.section {
  padding: 3% 2em;
}
.store.section > div {
  padding: 3em 0;
}
.store.section > div > div {
  display: flex;
}
.store.section > div > div:hover .imgBox {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3019607843);
}
.store.section > div > div:hover .imgBox img {
  transform: scale(1.05);
}
.store.section .imgBox {
  width: 50%;
  text-align: center;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.3s;
}
.store.section .imgBox img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.3s;
}
.store.section .txtBox {
  width: 50%;
  max-width: calc(500px + 1em);
  margin: auto;
}
.store.section .txtBox .topBox {
  border-bottom: 2px solid #9E7D54;
  padding-bottom: 1.2em;
  margin-bottom: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store.section .txtBox .topBox span:nth-child(2) {
  color: #F5821F;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #F5821F;
  border-radius: 20px;
  width: 70px;
  height: 35px;
  margin-left: 1.5em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.store.section .txtBox .bottomBox {
  padding-top: 5%;
}
.store.section .txtBox .bottomBox a {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid #000;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.store.section .txtBox .bottomBox a:nth-child(1) {
  margin-right: 0.8em;
}
.store.section .txtBox .bottomBox a:nth-child(1) img,
.store.section .txtBox .bottomBox a:nth-child(1) svg {
  width: 18px;
}
.store.section .txtBox .bottomBox a:nth-child(2) img,
.store.section .txtBox .bottomBox a:nth-child(2) svg {
  width: 26px;
}
.store.section .txtBox .bottomBox a svg {
  fill: #000;
  transition: all 0.3s;
}
.store.section .txtBox .bottomBox a:hover {
  background-color: #F5821F;
  border: 1px solid #F5821F;
}
.store.section .txtBox .bottomBox a:hover svg {
  fill: #fff;
}
.store.section .txtBox ul {
  line-height: 2;
  font-size: 16px;
}
.store.section .txtBox a {
  color: #343434;
  transition: 0.3s;
}
.store.section .txtBox a:hover {
  color: #F5821F;
  text-decoration: none;
}
.store.section .txtBox.R {
  margin-left: 6%;
  padding-right: 1em;
}
.store.section .txtBox.L {
  margin-right: 8%;
  padding-left: 1em;
}
@media screen and (max-width: 991px) {
  .store.section > div > div {
    flex-wrap: wrap;
    max-width: 700px;
    margin: auto;
  }
  .store.section .imgBox {
    width: 100%;
    order: 1;
  }
  .store.section .txtBox {
    width: 100%;
    max-width: none;
    order: 2;
  }
  .store.section .txtBox.R, .store.section .txtBox.L {
    margin: auto;
    padding: 2% 1em;
  }
  .store.section .txtBox .bottomBox {
    padding-top: 1em;
  }
  .store.section .txtBox .bottomBox a {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width: 575px) {
  .store.section .txtBox .topBox {
    flex-direction: column;
    align-items: flex-start;
  }
  .store.section .txtBox .topBox span:nth-child(1) {
    order: 2;
    font-size: 18px;
  }
  .store.section .txtBox .topBox span:nth-child(2) {
    margin-left: 0;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    order: 1;
  }
  .store.section .txtBox .bottomBox {
    text-align: center;
  }
}

/* ==========================================================================
    FAQ
 ==========================================================================*/
.FAQ.section-1 {
  padding: 1em 2em;
}
.FAQ.section-1 > div {
  max-width: 1500px;
  width: calc(100% - 4em);
  margin: auto;
}
.FAQ.section-1 .item {
  margin-bottom: 2%;
  border-radius: 15px;
  border: 1px solid transparent;
  transition: all 0.3s;
}
.FAQ.section-1 .item.active {
  border: 1px solid #000;
}
.FAQ.section-1 .collapsible {
  cursor: pointer;
  padding: 1em 2.5em;
  height: 80px;
  border-radius: 15px;
  background-color: #F3F3F3;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}
.FAQ.section-1 .collapsible::before {
  content: "Q.";
  font-size: 24px;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  margin-right: 0.8em;
  line-height: 1;
  font-weight: 600;
  vertical-align: top;
}
.FAQ.section-1 .collapsible:after {
  content: "";
  background-image: url(images/common/+.svg);
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  margin-left: 1em;
  transition: all 0.3s;
}
.FAQ.section-1 .collapsible h4 {
  font-size: 18px;
  display: inline-block;
  font-weight: 500;
  width: 100%;
  margin-bottom: 0;
}
.FAQ.section-1 .collapsible:hover, .FAQ.section-1 .collapsible.active {
  color: #F5821F;
}
.FAQ.section-1 .collapsible.active {
  border-radius: 15px 15px 0 0;
}
.FAQ.section-1 .collapsible.active:after {
  background-image: url(images/common/-.svg);
  height: 3px;
}
.FAQ.section-1 .txt {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  line-height: 2;
  letter-spacing: 0.03em;
  font-size: 16px;
}
.FAQ.section-1 .txt p {
  display: block;
  margin-bottom: 1.5em;
  padding: 2em 5.8%;
}
.FAQ.section-1 .txt p > span {
  display: flex;
  margin-top: 2em;
}
.FAQ.section-1 .txt p > span span {
  text-align: center;
}
.FAQ.section-1 .txt p > span img {
  width: 96%;
  max-width: 420px;
}
@media screen and (max-width: 767px) {
  .FAQ.section-1 .txt p > span {
    flex-wrap: wrap;
    margin-top: 1em;
  }
  .FAQ.section-1 .txt p > span span {
    width: 100%;
  }
  .FAQ.section-1 .txt p > span img {
    width: 100%;
    margin: 1em auto 0 auto;
    max-width: none;
  }
}
@media screen and (max-width: 575px) {
  .FAQ.section-1 {
    padding: 2em 2em;
  }
  .FAQ.section-1 > div {
    width: calc(100% - 0em);
  }
  .FAQ.section-1 .item {
    margin-bottom: 1em;
    border-radius: 5.5px;
  }
  .FAQ.section-1 .collapsible {
    padding: 1em 2em 1em 1.5em;
    height: auto;
    border-radius: 5.5px;
  }
  .FAQ.section-1 .collapsible h4 {
    font-size: 16px;
  }
  .FAQ.section-1 .collapsible.active {
    border-radius: 5.5px 5.5px 0 0;
  }
}

/* ==========================================================================
    contact
 ==========================================================================*/
.contact.banner {
  min-height: 106vh;
  height: auto;
  padding: 3em 1.5em 0 1.5em;
}
.contact.banner > div {
  margin-bottom: 0;
}
.contact.banner .LBox {
  width: 50%;
  padding-bottom: 15%;
  padding-left: 3%;
}
.contact.banner .LBox p {
  width: 380px;
  line-height: 1.8;
  padding-top: 1.5em;
}
.contact.banner .LBox .infoBox {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5em;
  margin: auto -0.5em;
}
.contact.banner .LBox .infoBox a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 4.3px;
  border: 1px solid rgba(255, 255, 255, 0.5490196078);
  color: #fff;
  margin: 0.5em 0.5em;
  padding: 1em 1.5em 0.5em 1.5em;
  transition: all 0.3s;
}
.contact.banner .LBox .infoBox a > span {
  padding-left: 1.5em;
  transition: all 0.3s;
}
.contact.banner .LBox .infoBox a > span span {
  display: block;
  line-height: 1.5;
}
.contact.banner .LBox .infoBox a:hover {
  transform: scale(0.95);
}
.contact.banner .RBox {
  width: 50%;
  padding-left: 2em;
}
.contact.banner .RBox > div {
  background-color: #fff;
  max-width: 650px;
  height: 750px;
  border-radius: 20px 20px 0 0;
  padding: 3em 8%;
  margin: auto;
}
.contact.banner form {
  margin-top: 1.5em;
}
.contact.banner form .input-group {
  margin-bottom: 2.5%;
}
.contact.banner form .form-control {
  height: 55px;
  border: 1px solid #C4C4C4;
  border-radius: 5.5px;
  padding-left: 5em;
}
.contact.banner form .form-control:focus {
  box-shadow: none;
}
.contact.banner form .input-group-prepend {
  z-index: 10;
  position: absolute;
  left: 0;
}
.contact.banner form .input-group-text {
  min-width: 4em;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 1em 1em;
  font-size: 16px;
  color: #2C2C2C;
}
.contact.banner form textarea {
  padding: 1.2em;
  padding-left: 5em;
  border: 1px solid #C4C4C4;
  border-radius: 5.5px;
  width: 100%;
  height: 140px;
  color: #495057;
}
.contact.banner form .code {
  margin: auto;
  margin-left: 1em;
}
.contact.banner .contactSend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 10% !important;
}
.contact.banner .contactSend img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3019607843);
  margin-bottom: 1.5em;
}
.contact.banner .contactSend span {
  display: block;
  margin-bottom: 0.5em;
}
.contact.banner .contactSend p {
  max-width: 380px;
  margin-bottom: 0;
}
.contact.banner .contactSend .all-btn {
  height: 56px;
  border-radius: 27.5px;
}
@media (max-width: 1600px) {
  .contact.banner .LBox {
    padding-left: 0;
  }
}
@media (max-width: 1340px) {
  .contact.banner .LBox .infoBox a:nth-child(1) {
    padding-right: 5.2em;
  }
}
@media (max-width: 1199px) {
  .contact.banner .LBox .infoBox a:nth-child(1) {
    padding-right: 4.6em;
  }
}
@media (max-width: 991px) {
  .contact.banner > .txtBox {
    flex-wrap: wrap;
  }
  .contact.banner .LBox {
    width: 100%;
    padding-bottom: 5%;
    max-width: 650px;
    margin: auto;
  }
  .contact.banner .LBox p {
    width: 100%;
    padding-top: 0.5em;
  }
  .contact.banner .LBox .infoBox {
    padding-top: 0;
    flex-wrap: nowrap;
  }
  .contact.banner .LBox .infoBox a {
    width: 100%;
  }
  .contact.banner .RBox {
    width: 100%;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .contact.banner > .txtBox {
    width: 100%;
    max-width: 500px;
  }
  .contact.banner .LBox .infoBox {
    flex-wrap: wrap;
  }
  .contact.banner .LBox .infoBox a {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.0509803922);
  }
}
@media (max-width: 575px) {
  .contact.banner .RBox > div {
    height: 700px;
  }
}

/* ==========================================================================
    warranty
 ==========================================================================*/
.warranty {
  padding: 0 1.5em;
}
.warranty .title {
  padding-bottom: 1.5em;
  letter-spacing: 0.03em;
}
.warranty.section-1 {
  padding-bottom: 3em;
}
.warranty.section-1 > div {
  padding: 1.5em 2em;
}
.warranty.section-1 .item-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 1em;
}
.warranty.section-1 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 180px;
  margin: 0 1em;
  padding-bottom: 1em;
  position: relative;
}
.warranty.section-1 .item:not(:nth-last-child(1))::after {
  content: "";
  background-image: url(images/common/arrow-right-2.svg);
  background-repeat: no-repeat;
  width: 10px;
  height: 20px;
  position: absolute;
  top: 5em;
  right: -40%;
  transform: translateX(-50%);
}
.warranty.section-1 .item h3 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.3em;
  padding-top: 2em;
  position: relative;
}
.warranty.section-1 .item h3::before {
  content: "";
  background-color: #F5821F;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.warranty.section-1 .item p {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 30px;
  max-width: 160px;
  color: #343434;
}
@media (max-width: 1199px) {
  .warranty.section-1 .max1200 {
    max-width: 1000px;
  }
  .warranty.section-1 .item {
    margin: 0;
  }
  .warranty.section-1 .item:not(:nth-last-child(1))::after {
    right: -25%;
  }
}
@media (max-width: 991px) {
  .warranty.section-1 .item {
    flex-direction: initial;
    width: 100%;
    padding-bottom: 2em;
  }
  .warranty.section-1 .item::after {
    content: none;
  }
  .warranty.section-1 .item img {
    width: 100px;
  }
  .warranty.section-1 .item h3 {
    width: 150px;
    padding: 0;
    margin-bottom: 0;
    flex: 0 0 150px;
  }
  .warranty.section-1 .item h3::before {
    top: 50%;
    left: 0.8em;
    transform: none;
  }
  .warranty.section-1 .item p {
    max-width: none;
    margin-bottom: 0;
    text-align: left;
  }
}
@media (max-width: 575px) {
  .warranty.section-1 {
    padding-top: 2em;
  }
  .warranty.section-1 .item {
    flex-direction: column;
    padding-bottom: 3em;
  }
  .warranty.section-1 .item h3 {
    flex: none;
    padding-top: 2em;
  }
  .warranty.section-1 .item h3::before {
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
  }
  .warranty.section-1 .item p {
    text-align: center;
    width: 250px;
  }
}
.warranty.section-2 .item-group {
  margin-bottom: 8%;
}
.warranty.section-2 .item {
  border: 2px solid #F5821F;
  border-radius: 15px;
  margin-bottom: 3em;
  padding: 2.5em 2em;
  display: flex;
  color: #343434;
  font-size: 16px;
}
.warranty.section-2 .item > div:nth-child(1) {
  flex: 0 1 16%;
  display: flex;
  justify-content: center;
  padding-right: 2em;
}
.warranty.section-2 .item > div:nth-child(2) {
  flex: 1 1 0;
}
.warranty.section-2 .item ol {
  padding-left: 1em;
}
.warranty.section-2 .item li {
  margin-bottom: 0.5em;
  letter-spacing: 0.03em;
}
@media (max-width: 767px) {
  .warranty.section-2 .item {
    flex-direction: column;
  }
  .warranty.section-2 .item > div:nth-child(1) {
    padding-right: 0;
    padding-bottom: 1.5em;
  }
}

.regist {
  padding: 0 1em 6% 1em;
}
.regist .max1200 > div:nth-child(1) {
  text-align: center;
  max-width: 1120px;
  margin: auto;
  padding: 1em 1em 7% 1em;
}
.regist .formBox {
  padding: 3em 2.5em 3em 2em;
}
.regist .formBox > div {
  position: relative;
}
.regist .formBox > div button {
  position: absolute;
  right: 0;
  top: 5px;
}
.regist .formBox > div button span:hover {
  text-decoration: underline;
}
.regist .formBox .input-group-text {
  min-width: 9em;
  padding: 0.8em 0;
}
.regist .formBox .form-group.different > div > :nth-child(1) {
  margin-right: 10px;
}
.regist .formBox .btnBox {
  display: flex;
  justify-content: center;
}
.regist .formBox .btnBox .all-btn {
  margin: 1em 0;
}
.regist .formBox .form-control {
  margin-bottom: 0;
}
.regist .formBox .select2-container {
  width: 100% !important;
}
@media (max-width: 575px) {
  .regist .formBox > div button {
    position: relative;
    margin-bottom: 1em;
  }
  .regist .formBox .form-group {
    flex-wrap: wrap;
    margin-bottom: 0.5em;
  }
  .regist .formBox .form-group.different > div {
    flex-wrap: wrap;
  }
  .regist .formBox .form-group.different > div > :nth-child(1) {
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0;
  }
  .regist .formBox .form-group.different > div > :nth-child(2) {
    width: 100%;
  }
  .regist .formBox .input-group-text {
    width: 100%;
    flex: 1 0 100%;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0;
  }
  .regist .formBox input[type=date] + img {
    top: 65px;
  }
}

.warranty-search {
  padding: 3% 1.5em;
}
.warranty-search table th {
  border-top: 1px solid #fff;
  font-weight: 500;
  text-align: center;
  background: #E5E5E5;
  color: #333;
  font-size: 16px;
  height: 50px;
}
.warranty-search table td {
  height: 78px;
  text-align: center;
  color: #333;
  font-size: 16px;
}
.warranty-search table td:nth-child(1) {
  width: 16%;
}
.warranty-search table td:nth-child(2) {
  width: 10%;
}
.warranty-search table td:nth-child(3) {
  width: 10%;
}
.warranty-search table td:nth-child(4) {
  width: 10%;
}
.warranty-search table td:nth-child(5) {
  width: 8%;
}
.warranty-search table td:nth-child(6) {
  width: 8%;
}
.warranty-search table td:nth-child(7) {
  width: 8%;
}
.warranty-search table td:nth-child(8) {
  width: 8%;
}
.warranty-search table tr:not(:nth-child(1)) {
  border-bottom: 1px solid #C4C4C4;
}
.warranty-search .btnBox {
  display: flex;
  justify-content: center;
  padding: 4% 0 3% 0;
}
@media (max-width: 767px) {
  .warranty-search table tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
  }
  .warranty-search table tr + tr {
    margin-bottom: 15px;
  }
  .warranty-search table tr:nth-of-type(1) {
    display: none;
    border-bottom: none;
  }
  .warranty-search table td {
    display: flex;
    width: 100% !important;
    height: auto;
    vertical-align: middle;
    padding: 0em;
    align-items: center;
  }
  .warranty-search table td span {
    display: block;
    padding: 8px 15px;
  }
  .warranty-search table td:not(:nth-last-child(1)) {
    border-bottom: 1px solid #C4C4C4;
  }
  .warranty-search table td:before {
    content: attr(data-th);
    background: #E5E5E5;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    width: 7em;
    display: flex;
    align-items: center;
    padding: 8px 15px;
  }
  .warranty-search .btnBox {
    padding-top: 0;
  }
}

/* ==========================================================================
    login
	register
 ==========================================================================*/
.login.banner,
.register.banner,
.forget.banner,
.activate.banner,
.connect.banner {
  min-height: calc(100vh - 90px);
  height: auto;
  background-attachment: unset;
  background-repeat: no-repeat;
  background-position: unset;
  background-size: cover;
}
.login.banner .breadCrumbs,
.register.banner .breadCrumbs,
.forget.banner .breadCrumbs,
.activate.banner .breadCrumbs,
.connect.banner .breadCrumbs {
  position: absolute;
  display: block;
  max-width: 1450px;
}
.login.banner > div:not(.breadCrumbs),
.register.banner > div:not(.breadCrumbs),
.forget.banner > div:not(.breadCrumbs),
.activate.banner > div:not(.breadCrumbs),
.connect.banner > div:not(.breadCrumbs) {
  width: 100%;
  margin: auto;
  padding: 5em 0;
}
.login.banner .RBox > div,
.register.banner .RBox > div,
.forget.banner .RBox > div,
.activate.banner .RBox > div,
.connect.banner .RBox > div {
  max-width: 580px;
  padding: 4em 4.5% 2em 4.5%;
  border-radius: 20px;
  background-color: #fff;
  margin: auto;
  position: relative;
}
.login.banner .RBox > div > span,
.register.banner .RBox > div > span,
.forget.banner .RBox > div > span,
.activate.banner .RBox > div > span,
.connect.banner .RBox > div > span {
  max-width: 440px;
  margin: auto;
}
.login.banner .RBox > div::before,
.register.banner .RBox > div::before,
.forget.banner .RBox > div::before,
.activate.banner .RBox > div::before,
.connect.banner .RBox > div::before {
  content: "";
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1019607843);
  border-radius: 50%;
  position: absolute;
  top: -45px;
  width: 80px;
  height: 80px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .login.banner > div:not(.breadCrumbs),
  .register.banner > div:not(.breadCrumbs),
  .forget.banner > div:not(.breadCrumbs),
  .activate.banner > div:not(.breadCrumbs),
  .connect.banner > div:not(.breadCrumbs) {
    padding: 0 0;
  }
}
@media (max-width: 575px) {
  .login.banner .RBox > div,
  .register.banner .RBox > div,
  .forget.banner .RBox > div,
  .activate.banner .RBox > div,
  .connect.banner .RBox > div {
    min-height: 580px;
  }
  .login.banner .RBox > div::before,
  .register.banner .RBox > div::before,
  .forget.banner .RBox > div::before,
  .activate.banner .RBox > div::before,
  .connect.banner .RBox > div::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
.login form,
.register form,
.forget form,
.activate form,
.connect form {
  margin-top: 1.5em;
}
.login form .input-group,
.register form .input-group,
.forget form .input-group,
.activate form .input-group,
.connect form .input-group {
  margin-bottom: 2.5%;
}
.login form .form-control,
.register form .form-control,
.forget form .form-control,
.activate form .form-control,
.connect form .form-control {
  height: 50px;
  border: 1px solid #C4C4C4;
  border-radius: 5.5px !important;
  padding-left: 1.5em;
}
.login form .form-control:focus,
.register form .form-control:focus,
.forget form .form-control:focus,
.activate form .form-control:focus,
.connect form .form-control:focus {
  box-shadow: none;
}
.login form .form-control.rounded-left,
.register form .form-control.rounded-left,
.forget form .form-control.rounded-left,
.activate form .form-control.rounded-left,
.connect form .form-control.rounded-left {
  border-top-left-radius: 5.5px !important;
  border-bottom-left-radius: 5.5px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.login form .code,
.register form .code,
.forget form .code,
.activate form .code,
.connect form .code {
  position: absolute;
  right: 10px;
  top: 6px;
  z-index: 10;
}
.login form > div:nth-child(2),
.register form > div:nth-child(2),
.forget form > div:nth-child(2),
.activate form > div:nth-child(2),
.connect form > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
}

.connect-iconBox {
  padding-top: 1em;
}
.connect-iconBox > span {
  color: #333333;
  display: block;
  text-align: center;
  position: relative;
}
.connect-iconBox > span::before {
  content: "";
  background-color: #C4C4C4;
  max-width: 175px;
  width: 40%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 12px;
}
.connect-iconBox > span::after {
  content: "";
  background-color: #C4C4C4;
  max-width: 175px;
  width: 40%;
  height: 1px;
  position: absolute;
  right: 0;
  top: 12px;
}
.connect-iconBox > div {
  display: flex;
  justify-content: space-between;
}
.connect-iconBox > div > a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  text-decoration: none;
  transition: all 0.3s;
}
.connect-iconBox > div > a span {
  padding: 1em 0.5em;
}
.connect-iconBox > div > a:hover {
  transform: scale(0.95);
  color: #000 !important;
}
@media (max-width: 1199px) {
  .connect-iconBox > div > a {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .connect-iconBox > span::before, .connect-iconBox > span::after {
    width: 35%;
  }
  .connect-iconBox > div {
    max-width: 350px;
    margin: auto;
  }
}
@media (max-width: 575px) {
  .connect-iconBox > div {
    max-width: 300px;
  }
  .connect-iconBox > div a span {
    display: none;
  }
}

.login.banner .breadCrumbs {
  position: absolute;
  display: block;
}
.login.banner > div {
  align-items: center;
}
.login.banner .LBox {
  width: 50%;
  padding-top: 10%;
  padding-left: 3%;
}
.login.banner .LBox .titleBox span:nth-child(2) {
  line-height: 1.8;
  max-width: 500px;
  margin-bottom: 2em;
}
.login.banner .LBox .infoBox a {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 25px;
  border: 1px solid #fff;
  color: #fff;
  margin: 0.5em 0.5em;
  transition: all 0.3s;
}
.login.banner .LBox .infoBox a:hover {
  transform: scale(0.95);
}
.login.banner .RBox {
  width: 50%;
  padding-left: 2em;
}
.login.banner .RBox > div {
  min-height: 630px;
  padding: 4em 9% 1em 9%;
}
.login.banner .RBox > div::before {
  content: "";
  background-image: url(images/common/user.svg);
}
@media (max-width: 1600px) {
  .login.banner .LBox {
    padding-left: 0;
  }
}
@media (max-width: 991px) {
  .login.banner > div {
    flex-wrap: wrap;
  }
  .login.banner .LBox {
    width: 100%;
    padding-bottom: 5%;
    padding-top: 0;
    max-width: 580px;
    margin: auto;
  }
  .login.banner .LBox .infoBox a {
    margin-bottom: 4em;
  }
  .login.banner .RBox {
    width: 100%;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .login.banner > div {
    width: 100%;
    max-width: 500px;
    padding-top: 3em !important;
  }
  .login.banner .LBox .infoBox a {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.0509803922);
    margin: 0;
    margin-bottom: 4em;
  }
}
@media (max-width: 575px) {
  .login.banner .LBox .titleBox span:nth-child(1) {
    max-width: 300px;
  }
}
.login form .form-control {
  padding-left: 1.5em;
  height: 55px;
}
.login form .code {
  top: 8px;
}
.login form > div:nth-child(2) a {
  color: #333333;
}
.login form > div:nth-child(2) span {
  color: #C4C4C4;
  font-size: 12px;
}
@media screen and (max-width: 991px) {
  .login form .form-control {
    height: 50px !important;
  }
}

.register.banner > div,
.forget.banner > div,
.activate.banner > div,
.connect.banner > div {
  display: block;
  margin-top: 5%;
}
.register.banner .RBox,
.forget.banner .RBox,
.activate.banner .RBox,
.connect.banner .RBox {
  width: 100%;
  margin-top: 5em;
  padding-bottom: 5%;
}
.register.banner .RBox > div.forget,
.forget.banner .RBox > div.forget,
.activate.banner .RBox > div.forget,
.connect.banner .RBox > div.forget {
  max-height: 550px;
  padding-bottom: 10%;
}
.register.banner .RBox > div.forget::before,
.forget.banner .RBox > div.forget::before,
.activate.banner .RBox > div.forget::before,
.connect.banner .RBox > div.forget::before {
  content: "";
  background-image: url(images/common/forget.svg);
}
.register.banner .RBox > div.register,
.forget.banner .RBox > div.register,
.activate.banner .RBox > div.register,
.connect.banner .RBox > div.register {
  height: auto;
}
.register.banner .RBox > div.register::before,
.forget.banner .RBox > div.register::before,
.activate.banner .RBox > div.register::before,
.connect.banner .RBox > div.register::before {
  content: "";
  background-image: url(images/common/register.svg);
}
.register.banner .RBox > div.activate,
.forget.banner .RBox > div.activate,
.activate.banner .RBox > div.activate,
.connect.banner .RBox > div.activate {
  max-height: 550px;
  padding-bottom: 10%;
}
.register.banner .RBox > div.activate::before,
.forget.banner .RBox > div.activate::before,
.activate.banner .RBox > div.activate::before,
.connect.banner .RBox > div.activate::before {
  content: "";
  background-image: url(images/common/activate.svg);
}
.register.banner .RBox > div.connect,
.forget.banner .RBox > div.connect,
.activate.banner .RBox > div.connect,
.connect.banner .RBox > div.connect {
  max-height: 580px;
  padding-bottom: 10%;
}
.register.banner .RBox > div.connect::before,
.forget.banner .RBox > div.connect::before,
.activate.banner .RBox > div.connect::before,
.connect.banner .RBox > div.connect::before {
  content: "";
  background-image: url(images/common/connect.svg);
}
.register.banner .RBox a,
.forget.banner .RBox a,
.activate.banner .RBox a,
.connect.banner .RBox a {
  transition: all 0.3s;
}
.register.banner .RBox a:hover,
.forget.banner .RBox a:hover,
.activate.banner .RBox a:hover,
.connect.banner .RBox a:hover {
  color: #F5821F;
}
.register form .input-group > .input-group-prepend > .input-group-text,
.forget form .input-group > .input-group-prepend > .input-group-text,
.activate form .input-group > .input-group-prepend > .input-group-text,
.connect form .input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.register form .txt2,
.forget form .txt2,
.activate form .txt2,
.connect form .txt2 {
  position: relative;
  padding-left: 2em;
}
.register form .txt2::before,
.forget form .txt2::before,
.activate form .txt2::before,
.connect form .txt2::before {
  content: "";
  background-image: url(images/common/icon-info.svg);
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 4px;
}
.register form > div:nth-child(2),
.forget form > div:nth-child(2),
.activate form > div:nth-child(2),
.connect form > div:nth-child(2) {
  display: block;
}
.register form.register .input-group-prepend,
.forget form.register .input-group-prepend,
.activate form.register .input-group-prepend,
.connect form.register .input-group-prepend {
  z-index: 10;
  position: absolute;
  left: 0;
}
.register form.register .input-group-text,
.forget form.register .input-group-text,
.activate form.register .input-group-text,
.connect form.register .input-group-text {
  min-width: 4em;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 1em;
  font-size: 16px;
  color: #2C2C2C;
}
.register form.register .form-control,
.forget form.register .form-control,
.activate form.register .form-control,
.connect form.register .form-control {
  padding-left: 7em;
}

.banner.ok .RBox > div {
  max-height: 500px;
  padding: 165px 6.5% 10% 6.5%;
}
.banner.ok .RBox > div::before {
  content: "";
  background-image: url(images/common/icon-check.svg);
  top: 12%;
}
.banner.ok .RBox a {
  margin: auto;
  height: 55px;
  border-radius: 27.5px;
}

.register.ok .RBox .register-ok {
  max-width: none;
  height: auto;
  max-height: none;
  min-height: 550px;
  display: flex;
  flex-wrap: wrap;
  padding: 4% 0 5% 0;
  transition: all 0.3s;
}
.register.ok .RBox .register-ok::before {
  content: none;
}
.register.ok .RBox .register-ok .txtBox {
  width: 35%;
  border-right: 1px solid #C4C4C4;
  position: relative;
  padding: 100px 4% 0 4%;
}
.register.ok .RBox .register-ok .txtBox span {
  max-width: 380px;
  width: 100%;
  margin: auto;
}
.register.ok .RBox .register-ok .txtBox::before {
  content: "";
  background-image: url(images/common/icon-check.svg);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1019607843);
  border-radius: 50%;
  left: 50%;
  top: -5px;
  width: 80px;
  height: 80px;
  position: absolute;
  transform: translateX(-50%);
}
.register.ok .RBox .register-ok .coupons-list {
  width: 65%;
  padding: 10px 3% 10px 4%;
}
.register.ok .RBox .register-ok .all-btn {
  width: 160px;
}
@media screen and (max-width: 991px) {
  .register.ok .RBox .register-ok .txtBox::before {
    top: 20px;
    width: 60px;
    height: 60px;
  }
  .register.ok .RBox .register-ok .txtBox,
  .register.ok .RBox .register-ok .coupons-list {
    width: 100%;
  }
  .register.ok .RBox .register-ok .coupons-list {
    padding-top: 3em;
  }
}

/* ==========================================================================
    cart
 ==========================================================================*/
.cart-heading {
  text-align: center;
}
.cart-heading .title {
  font-size: 30px;
  color: #000;
  font-weight: 600;
}
.cart-heading .step {
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 0;
  letter-spacing: 0.05em;
}
.cart-heading .step ol {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  counter-reset: step;
  padding: 0;
}
.cart-heading .step ol li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  counter-increment: step;
  color: #000;
  font-size: 18px;
}
.cart-heading .step ol li span {
  width: 4.5em;
}
.cart-heading .step ol li span::before {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  content: "0" counter(step);
  width: 50px;
  height: 50px;
  margin: 1em auto 1.5em auto;
  border-radius: 50%;
  color: #F5821F;
  background-color: #fff;
  font-size: 16px;
  line-height: 50px;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-weight: bold;
  letter-spacing: 0;
  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.168627451);
  display: block;
}
.cart-heading .step ol li:not(:nth-last-child(1))::after {
  content: "";
  margin: 0 5px 0 5px;
  border-bottom: 1px #000 dashed;
  width: 120px;
}
.cart-heading .step ol li.active {
  font-weight: 600;
}
.cart-heading .step ol li.active span::before {
  background-color: #F5821F;
  color: #fff;
}
@media screen and (max-width: 575px) {
  .cart-heading .step ol li:not(:nth-last-child(1))::after {
    width: 30px;
  }
}

.event {
  display: flex;
  justify-content: space-between;
}
.event .event-detail {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}
.event .tag {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 20px;
  margin-right: 15px;
  min-width: 70px;
  height: 30px;
  padding: 3px 5px;
  text-align: center;
  display: inline-block;
}
.event .word {
  text-align: left;
  display: inline-block;
  width: 100%;
}
.event .word span {
  margin-right: 1em;
}
.event .desc-toggle {
  display: inline-block;
}
.event .desc-toggle:hover {
  color: #F5821F;
}

/*數量加減*/
.qtt-spinner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 120px;
  height: 40px;
  margin: auto;
  border: 1px solid #C4C4C4;
}
.qtt-spinner > div {
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.qtt-spinner .form-control {
  padding: 0;
  flex: 0;
  border: 0;
}
.qtt-spinner .form-control:focus {
  border-color: transparent;
}
.qtt-spinner .qtt {
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  width: 50px;
  height: 38px;
  font-size: 18px;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  border: none;
}
.qtt-spinner .btn {
  width: 35px;
  min-width: unset !important;
  font-size: 18px;
  color: #333;
  border-radius: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qtt-spinner .btn img,
.qtt-spinner .btn svg {
  fill: #333333;
  transition: all 0.3s;
  width: 10px;
}
.qtt-spinner .btn:hover svg {
  fill: #F5821F;
}
.qtt-spinner .btn.focus,
.qtt-spinner .btn:focus,
.qtt-spinner button:focus,
.qtt-spinner .form-control:focus {
  border-color: transparent;
}

.input-group-prepend {
  margin-right: -1px;
}
.input-group-prepend bottom {
  width: 18px;
}

.input-group-append {
  margin-left: -1px;
}

.page-group-style {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 3px 10px 40px 0px rgba(0, 0, 0, 0.1411764706);
  padding: 2.5em 1.5em;
}

.cart-section[data-section=primary] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 3em;
  padding-bottom: 3.5em;
}
.cart-section[data-section=primary] .title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  width: 150px;
  display: inline-block;
}
.cart-section[data-section=primary] .LBox {
  flex: 1 1 0;
  max-width: 1135px;
}
.cart-section[data-section=primary] .LBox.w100 {
  max-width: none;
}
.cart-section[data-section=primary] .RBox {
  flex: 0 1 325px;
  height: 530px;
  max-width: 325px;
  position: sticky;
  top: 120px;
  margin-left: 10px;
  padding: 2.5em 0.8em;
  z-index: 2;
}

.cart {
  padding: 2em 2em;
}
.cart .cart-btnBox {
  display: none;
}
.cart .titleBox {
  width: 170px;
  text-align: left;
  padding: 1em 1em 1em 2em;
  flex: 0 0 170px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.cart .cart-top {
  background-color: #E5E5E5;
}
.cart .cart-top .cart-row {
  display: flex;
}
.cart .cart-top .cart-cell {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart .cart-top .cart-cell.tt {
  width: 170px;
  vertical-align: top;
}
.cart .cart-top .cart-cell.info {
  flex: 1 0 0;
}
.cart .cart-top .cart-cell.price {
  flex: 0 0 120px;
}
.cart .cart-top .cart-cell.qtt {
  flex: 0 0 150px;
}
.cart .cart-top .cart-cell.total {
  flex: 0 0 120px;
}
.cart .cart-top .cart-cell.modify {
  flex: 0 0 100px;
  padding-right: 30px !important;
}
.cart .cart-table .cart-row {
  display: block;
  align-items: center;
  padding: 1.5em 0 0em 0;
}
.cart .cart-table .cart-row:not(:nth-child(1)) {
  border-top: 1px solid rgba(226, 218, 212, 0.6);
}
.cart .cart-table .imgBox {
  width: 170px;
  vertical-align: top;
}
.cart .cart-table .imgBox > div {
  text-align: center;
  width: 130px;
  height: 140px;
  background-color: #F8F8F8;
  border-radius: 15px;
  padding: 0.5em;
  margin: auto;
}
.cart .cart-table .imgBox > div img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  mix-blend-mode: darken;
}
.cart .cart-table .for-pd {
  display: flex;
  align-items: center;
}
.cart .cart-table .for-pd .txtBox {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex: 1 0 0;
  padding-bottom: 1em;
}
.cart .cart-table .for-pd .cart-cell {
  text-align: center;
}
.cart .cart-table .for-pd .cart-cell:not(.info) {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart .cart-table .for-pd .cart-cell.info {
  flex: 1 0 0;
  text-align: left;
}
.cart .cart-table .for-pd .cart-cell.price {
  flex: 0 0 120px;
}
.cart .cart-table .for-pd .cart-cell.qtt {
  flex: 0 0 150px;
}
.cart .cart-table .for-pd .cart-cell.total {
  flex: 0 0 120px;
}
.cart .cart-table .for-pd .cart-cell.modify {
  flex: 0 0 100px;
  padding-right: 30px !important;
}
.cart .cart-table .for-pd .cart-cell.modify .delete-btn svg {
  margin: auto;
  fill: #996C4D;
  width: 18px;
}
.cart .cart-table .for-event {
  display: flex;
  align-items: center;
}
.cart .cart-table .for-event .pd-event {
  border-top: 1px solid rgba(226, 218, 212, 0.6);
  padding-top: 1em;
  padding-bottom: 1em;
}
.cart .cart-table .info-name {
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1em;
}
.cart .cart-table .info-name span {
  display: block;
  transition: all 0.3s;
}
.cart .cart-table .info-name span:nth-child(1) {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
}
.cart .cart-table .info-name span:nth-child(2) {
  color: #484848;
  font-size: 16px;
  letter-spacing: 0.03em;
}
.cart .cart-table .info-name:hover span:nth-child(1) {
  color: #F5821F;
}
.cart .cart-table .name-txt {
  color: #8E8E8E;
  letter-spacing: 0.03em;
  font-size: 15px;
  display: block;
}
.cart {
  /*購物車底部*/
}
.cart .cart-bottom {
  padding: 1em 0;
}
.cart .cart-bottom .cart-event {
  display: flex;
  flex-wrap: wrap;
  padding-top: 0.5em;
}
.cart .cart-bottom .infoBox {
  flex: 1 0 0;
  padding: 1em 0;
}
.cart .cart-bottom .txtBox {
  display: flex;
  flex: 1 0 0;
}
.cart .eventBox {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.cart .eventBox .txtBox {
  display: flex;
  align-items: center;
  flex: 1 0 0;
}
.cart .event {
  flex: 1 0 0;
}
.cart .event.li .word {
  position: relative;
  padding-left: 1.2em;
}
.cart .event.li .word::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #F5821F;
  position: absolute;
  left: 0;
  top: 8px;
}
.cart .numBox,
.cart .deleteBox {
  flex: 0 0 100px;
  text-align: center;
  padding-right: 1em;
}
.cart .num {
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.cart .contBont {
  flex-grow: 1;
}
.cart .couponBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cart .couponBox :nth-child(1) {
  flex: 0 0 6em;
}
.cart .couponBox :nth-child(2) {
  flex: 1 1 0;
  max-width: 400px;
  height: 50px;
}
.cart .couponBox :nth-child(3) {
  flex: 0 0 150px;
}
.cart .couponBox :nth-child(4) {
  flex: 0 0 150px;
  position: relative;
}
.cart .couponBox :nth-child(4)::before {
  content: attr(data-num);
  position: absolute;
  background-color: #F5821F;
  color: #fff;
  right: -10px;
  top: -10px;
  border-radius: 50%;
  display: block;
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
}
.cart .couponBox .all-btn {
  width: 150px;
  height: 50px;
  border-radius: 5px;
  margin: 0 0 0 0.5em;
}
.cart .couponBox .all-btn:nth-child(4) {
  background: #343434;
}
.cart .checkout-list-title {
  height: 60px;
  background-color: #E5E5E5;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 1em;
  margin-bottom: 0.5em;
}
.cart .checkout-list-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0 1em 1em;
}
.cart .checkout-list-row .row-title {
  font-size: 16px;
  letter-spacing: 0.03em;
}
.cart .checkout-list-row .row-value {
  font-size: 18px;
}
.cart .checkout-list-row .row-value .total {
  font-size: 20px;
  font-weight: 600;
}
.cart .checkout-list-row .row-txt {
  font-size: 15px;
  color: #8E8E8E;
  padding: 0.3em 0;
}
.cart .checkout-list-row:not(:nth-child(1)) {
  border-top: 1px solid rgba(226, 218, 212, 0.6);
}
.cart .checkout-list-row:nth-last-child(1) {
  border-top: 1px solid #8E8E8E;
  padding-top: 1.5em;
}
.cart .checkout-actions {
  display: flex;
  justify-content: space-between;
}
.cart .checkout-actions .all-btn {
  width: 145px;
}
.cart .checkout-actions :nth-child(1) {
  background: #2A2A2A;
}
.cart .manualBox > div {
  padding: 0em 1em 0 0.5em;
}
.cart .manualBox .title {
  margin-bottom: 1.5em;
}
.cart .manualBox hr {
  margin: 1.5em 0 1.8em 0;
}
.cart .manualBox ul {
  line-height: 1.8;
  font-size: 16px;
}
.cart .manualBox ul li::marker {
  font-size: 13px;
}
.cart .cart03 {
  width: 100%;
}
.cart .cart03 .cart-top .cart-cell.price {
  flex: 0 0 200px;
}
.cart .cart03 .cart-top .cart-cell.qtt {
  flex: 0 0 200px;
}
.cart .cart03 .cart-top .cart-cell.total {
  flex: 0 0 150px;
}
.cart .cart03 .cart-table .for-pd .cart-cell.price {
  flex: 0 0 200px;
}
.cart .cart03 .cart-table .for-pd .cart-cell.qtt {
  flex: 0 0 200px;
}
.cart .cart03 .cart-table .for-pd .cart-cell.total {
  flex: 0 0 150px;
}
.cart .cart03 .numBox,
.cart .cart03 .deleteBox {
  flex: 0 0 150px;
}
.cart .cart03 .checkout-list-row {
  padding: 1em 3em 1em 2em;
}
.cart .cart03 .checkout-list-row:nth-child(1) {
  padding-top: 1.3em;
}
.cart .cart03 .checkout-list-row:nth-last-child(1) {
  margin-top: 0.3em;
}
.cart .cart03 .cart-Numbering {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5em;
  padding-left: 2em;
  padding-right: 0.5em;
}
.cart .cart03 .cart-Numbering > div {
  line-height: 1.5;
}
.cart .cart03 .cart-Numbering > div:nth-child(1) {
  flex: 1 1 300px;
}
.cart .cart03 .cart-Numbering > div:nth-child(2) {
  flex: 0 1 300px;
}
.cart .cart03 .cart-Numbering > div:nth-child(3) {
  flex: 0 1 150px;
}
.cart .cart03 .TBox {
  min-height: 420px;
  padding: 5% 4.5% 5% 4.5%;
}
.cart .cart03 .TBox > div {
  display: flex;
  flex-wrap: wrap;
  min-height: 255px;
}
.cart .cart03 .TBox > div > div:nth-child(1) {
  flex: 1 1 500px;
  max-width: calc(900px + 5%);
  padding-right: 5%;
}
.cart .cart03 .TBox > div > div:nth-child(1) > span {
  margin-bottom: 1.3em;
  display: block;
}
.cart .cart03 .TBox > div > div:nth-child(1) ul {
  display: block;
  min-height: 5.7em;
  line-height: 1.8;
}
.cart .cart03 .TBox > div > div:nth-child(1) > div {
  display: flex;
  border: 1px solid #000;
}
.cart .cart03 .TBox > div > div:nth-child(1) > div a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 300px;
  height: 60px;
  color: #000;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s;
}
.cart .cart03 .TBox > div > div:nth-child(1) > div a:hover {
  background-color: #000;
  color: #fff;
}
.cart .cart03 .TBox > div > div:nth-child(1) > div a:not(:nth-last-child(1)) {
  border-right: 1px solid #000;
}
.cart .cart03 .TBox > div > div:nth-child(2) {
  flex: 0 0 calc(310px + 0%);
  border-left: 1px solid #8E8E8E;
  padding-left: 5%;
  padding-right: 0%;
}
.cart .cart03 .TBox > div > div:nth-child(2) ul {
  list-style: none;
  line-height: 2.2;
  padding: 1em 0;
}
.cart .cart03 .BBox .box {
  display: flex;
  flex-wrap: wrap;
}
.cart .cart03 .BBox .box ul {
  list-style: none;
  padding: 1em 1em 1em 3em;
  line-height: 2.3;
}
.cart .cart03 .BBox .box ul > li {
  margin-bottom: 5px;
}
.cart .cart03 .BBox .box ul > li > span {
  display: inline-block;
  letter-spacing: 0.03em;
  line-height: 1.5;
  font-size: 16px;
}
.cart .cart03 .BBox .box ul > li > span:nth-child(1) {
  width: 6em;
}
.cart .cart03 .BBox .box ul > li > span:nth-child(2) {
  color: #666666;
}
.cart .formBox .form-btnBox {
  display: flex;
}
.cart .formBox .form-btnBox button:not(:nth-last-child(1)) {
  margin-right: 13px;
}
.cart .formBox .tag-btn {
  width: 150px;
  height: 50px;
  border-radius: 5px;
  color: #000;
  background-color: #E5E5E5;
  font-size: 16px;
  display: inline-block;
}
.cart .formBox .tag-btn.active {
  background-color: #F5821F;
  color: #fff;
}
.cart .formBox .billBox > div:nth-child(2) .form-control:nth-child(1) {
  flex: 0 1 235px;
  margin-right: 12px;
}
.cart .formBox .select2-container {
  width: 100% !important;
}
@media screen and (max-width: 1300px) {
  .cart .titleBox {
    padding: 0.5em 0 0 0;
    flex: 0 0 100%;
  }
  .cart .cart-top {
    display: none;
  }
  .cart .cart-table .imgBox {
    width: 150px;
  }
  .cart .cart-table .imgBox > div {
    margin: 0;
  }
  .cart .cart-table .for-pd {
    align-items: flex-start;
  }
  .cart .cart-table .for-pd .cart-cell:not(.info) {
    justify-content: flex-end;
  }
  .cart .cart-table .for-pd .cart-cell.info {
    flex: 1 0 100%;
  }
  .cart .cart-table .for-pd .cart-cell.price {
    display: none;
  }
  .cart .cart-table .for-pd .cart-cell.qtt {
    flex: 0 0 0 !important;
  }
  .cart .cart-table .for-pd .cart-cell.total {
    flex: 1 0 120px;
  }
  .cart .cart-table .for-event .imgBox {
    display: none;
  }
  .cart .cart-table .name-txt {
    max-width: none;
    padding-bottom: 1em;
  }
  .cart .cart-bottom .cart-event {
    padding: 0 0 0 1em;
  }
  .cart .numBox,
  .cart .deleteBox {
    text-align: right;
  }
  .cart .contBont {
    padding-top: 1em;
  }
  .cart .cart03 .qtt::before {
    content: "數量：";
    width: 3em;
    font-size: 16px;
  }
  .cart .cart03 .cart-table .for-pd .cart-cell.total {
    flex: 1 0 0;
  }
  .cart .cart03 .checkout-list-row {
    padding: 1em 1em 1em 0em;
  }
  .cart .cart03 .numBox,
  .cart .cart03 .deleteBox {
    flex: 0 0 6em;
  }
  .cart .cart03 .cart-Numbering {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1em;
    border-bottom: 1px solid #343434;
  }
  .cart .cart03 .BBox .box ul {
    padding: 1em 1em 1em 0em;
  }
}
@media screen and (max-width: 1199px) {
  .cart .couponBox :nth-child(3),
  .cart .couponBox :nth-child(4) {
    flex: 0 1 120px;
  }
}
@media screen and (max-width: 991px) {
  .cart {
    padding: 0;
  }
  .cart .cart-section[data-section=head] {
    padding: 2em 2em 0 2em;
  }
  .cart .cart-section[data-section=primary] {
    display: block;
    padding-bottom: 0;
  }
  .cart .cart-section[data-section=primary] .title {
    display: block;
    margin-bottom: 1em;
  }
  .cart .cart-section[data-section=primary] > div:not(.RBox):not(.cart-btnBox) {
    padding: 0 1.5em 5em 1.5em;
  }
  .cart .cart-section[data-section=primary] .LBox {
    flex: 1 0 100%;
    max-width: none;
  }
  .cart .cart-section[data-section=primary] .RBox {
    bottom: 0px;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.5em;
    border-top: 1px solid #8E8E8E;
    border-bottom: 1px solid #8E8E8E;
    border-radius: 0px;
    box-shadow: none;
  }
  .cart .cart-section[data-section=primary] .RBox .checkout-actions {
    display: none;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row {
    padding: 3px 0.5em;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row .row-title {
    font-size: 15px !important;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row .row-value {
    order: 3;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row .row-value .num {
    font-size: 16px !important;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row .row-txt {
    order: 2;
    flex: 1 0 0;
    padding-left: 1em;
    padding-right: 1em;
  }
  .cart .cart-section[data-section=primary] > div:not(.cart03) .checkout-list-row:nth-last-child(1) {
    padding-top: 0.5em;
  }
  .cart .checkout-list-title {
    height: 50px;
    display: none;
  }
  .cart .checkout-list {
    position: sticky;
    bottom: 0;
    background-color: #fff;
  }
  .cart .checkout-actions {
    justify-content: center;
  }
  .cart .checkout-actions .all-btn {
    margin: 1em 0.5em;
  }
  .cart .cart-btnBox {
    display: block;
    padding: 2em 0;
  }
}
@media screen and (max-width: 955px) {
  .cart .cart03 .TBox > div > div:nth-child(1) {
    padding: 0;
    order: 2;
  }
  .cart .cart03 .TBox > div > div:nth-child(2) {
    border-left: 0;
    padding: 0 0 0 0;
    flex: 1 0 100%;
    order: 1;
    border-bottom: 1px solid #000;
    margin-bottom: 1em;
  }
  .cart .cart03 .TBox > div > div:nth-child(2) ul {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 850px) {
  .cart .cart03 .cart-Numbering > div {
    flex: 1 0 100% !important;
  }
}
@media screen and (max-width: 767px) {
  .cart .cart-bottom .cart-event {
    padding: 0;
  }
  .cart .couponBox {
    justify-content: flex-end;
  }
  .cart .couponBox :nth-child(2) {
    flex: 1 1 calc(100% - 6em);
    max-width: none;
  }
  .cart .couponBox :nth-child(3),
  .cart .couponBox :nth-child(4) {
    flex: 0 1 calc(50% - 3em);
    margin: 0.5em 0 0.5em 0.5em;
  }
  .cart .cart03 {
    padding-bottom: 5em;
  }
  .cart .cart03 .BBox .box .titleBox {
    flex: 1 0 100%;
  }
}
@media screen and (max-width: 575px) {
  .cart .formBox .form-btnBox {
    flex-wrap: wrap;
  }
  .cart .formBox .tag-btn {
    flex: 0 0 100%;
    margin: 5px 0;
  }
}
@media screen and (max-width: 580px) {
  .cart .cart-table .imgBox {
    width: 90px;
  }
  .cart .cart-table .imgBox > div {
    width: 80px;
    height: 80px;
  }
  .cart .cart-table .for-pd .cart-cell.modify {
    flex: 1 0 50px;
    padding-right: 15px !important;
  }
  .cart .cart-table .for-pd .cart-cell.total {
    flex: 1 0 80px;
  }
  .cart .eventBox .deleteBox {
    display: none;
  }
  .cart .contBont .eventBox .deleteBox {
    display: block;
  }
  .cart .numBox {
    flex: 0 0 75px;
  }
}
@media screen and (max-width: 420px) {
  .cart .checkout-list-row .row-txt {
    order: 3;
    flex: 1 0 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

.modal .addresse {
  padding: 3em 1.5em;
}
.modal .addresse th.name,
.modal .addresse td.name {
  width: 22%;
  padding-left: 1em;
}
.modal .addresse .radioBox {
  width: auto;
  padding-left: 2.5em;
}
.modal .addresse .btnBox {
  margin: 3.5em 0 1em 0;
}
@media (max-width: 991px) {
  .modal .addresse th.name,
  .modal .addresse td.name {
    width: auto;
  }
  .modal .addresse .btnBox {
    margin: 0em 0;
    padding-bottom: 0;
  }
}
.modal .pay {
  padding: 3em 1.5em;
}
.modal .pay .item {
  background-color: #F3F3F3;
  border-radius: 7px;
  display: flex;
  min-height: 140px;
  align-items: center;
  margin-bottom: 1em;
  padding: 1.5em 1em;
  color: #333;
  letter-spacing: 0.03em;
}
.modal .pay .item > div:nth-child(1) {
  flex: 0 0 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .pay .item > div:nth-child(2) {
  flex: 1 0 0;
}
.modal .pay .item > div:nth-child(2) span {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0.5em;
  display: block;
}
.modal .pay .item > div:nth-child(2) p {
  font-size: 16px;
  margin-bottom: 0;
}
.modal .pay .btnBox {
  margin: 1.5em 0 0em 0;
}

#cart .product-popup.for-coupon .popup-box .select2-container {
  width: 150px !important;
}
@media screen and (max-width: 1199px) {
  #cart .product-popup.for-coupon .popup-box {
    max-width: 700px;
  }
}
@media screen and (max-width: 767px) {
  #cart .product-popup.for-coupon .popup-box {
    max-width: 480px;
  }
}
@media screen and (max-width: 480px) {
  #cart .product-popup.for-coupon .popup-box {
    max-width: 350px;
  }
  #cart .product-popup .popup-box .popup-content .coupon-head {
    min-height: 6em;
  }
}

/* ==========================================================================
    member
 ==========================================================================*/
.boxShadow {
  box-shadow: 4px 0px 50px rgba(0, 0, 0, 0.1490196078);
  border-radius: 20px;
  overflow: hidden;
}

.memberBox {
  flex-wrap: wrap;
  display: flex;
}
@media (max-width: 576px) {
  .memberBox {
    margin: 0 !important;
  }
  .memberBox .boxShadow {
    border-radius: 10px;
  }
}

.membersidebar {
  flex: 0 0 300px;
}
.membersidebar .category {
  padding: 1.5em 10px 2em 10px;
}
.membersidebar .category .category-title {
  padding: 7.5px 15px;
  text-align: center;
}
.membersidebar .category .category-title > :nth-child(1) {
  margin: auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #F3F3F3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.membersidebar .category .category-title > :nth-child(1) img {
  width: 25px;
}
.membersidebar .category .category-title > :nth-child(2) {
  font-weight: 600;
  font-size: 18px;
}
.membersidebar .sidenav-category {
  padding: 2.5em 0 0 0;
}
.membersidebar .sidenav-category:nth-child(1) {
  padding-top: 1.2em;
}
.membersidebar .sidenav-category .tit {
  padding: 1em 30px 1em 22px;
  color: #000;
  background: #F3F3F3;
  border-radius: 5px;
  height: 50px;
}
.membersidebar .sidenav-category .tit a {
  color: #000;
  text-decoration: none;
}
.membersidebar .sidenav-category .tit.membernavtit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #F3F3F3;
}
.membersidebar .sidenav-category .tit.collapsed::after {
  content: "";
  background-image: url("images/common/+.svg");
  background-repeat: no-repeat;
  width: 11px;
  height: 11px;
}
.membersidebar .sidenav-category .tit::after {
  content: "";
  background-image: url("images/common/--1.svg");
  width: 11px;
  height: 2px;
}
.membersidebar .sidenav-category .category-menu {
  padding: 0 20px 0em 20px;
  transition: all 0.3s;
}
.membersidebar .sidenav-category .category-menu .categorylist {
  padding: 10px 0 0 0;
}
.membersidebar .sidenav-category .category-menu .categorylist a {
  color: #4d4d4d;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink {
  display: flex;
  padding: 8px 0;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink:before {
  content: "";
  display: block;
  min-width: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #F5821F;
  margin: 10px 8px 0 4px;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink.active {
  font-weight: bold;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink.active a {
  color: #F5821F;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink a {
  display: block;
  width: calc(100% - 15px);
  flex-grow: 1;
  transition: all 0.3s;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink a:hover {
  color: #F5821F;
  text-decoration: none;
  font-weight: bold;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink a.active {
  font-weight: bold;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink {
  padding: 0px 15px;
  display: none;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink .thirdlinkli {
  display: flex;
  padding: 7px 0;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink .thirdlinkli:before {
  content: "";
  display: block;
  min-width: 3px;
  width: 3px;
  height: 1px;
  border-radius: 50%;
  margin: 10px 8px 0 0;
  background: #333;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink .thirdlinkli .link {
  display: block;
  width: calc(100% - 15px);
  flex-grow: 1;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink .thirdlinkli .link:hover {
  color: #9E7D54;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink .thirdlink .thirdlinkli .link.active {
  font-weight: bold;
  color: #1a1a1a;
}
.membersidebar .sidenav-category .category-menu .categorylist .categorylink.active .thirdlink {
  display: block;
}
.membersidebar .sidenav-category.active .tit {
  padding: 16px 25px;
  border-bottom: 1px solid #F3F3F3;
  background: rgba(213, 180, 147, 0.34);
}
.membersidebar .sidenav-category.active .category-menu .categorylist {
  padding: 20px 0 0 0;
}
@media (max-width: 991px) {
  .membersidebar {
    flex: 0 0 230px;
  }
  .membersidebar .category .category-title > :nth-child(2) span {
    display: block;
  }
}
@media (max-width: 767px) {
  .membersidebar {
    width: 100%;
    flex: 1 0 100%;
  }
  .membersidebar .category {
    background-color: transparent;
  }
  .membersidebar .category .category-title .tit {
    width: 100%;
    text-align: center;
  }
  .membersidebar .sidenav-category {
    margin-top: 10px;
    padding: 0;
  }
  .membersidebar .sidenav-category + .sidenav-category {
    border-top: none;
  }
  .membersidebar .sidenav-category:nth-last-of-type(1) {
    min-height: auto;
  }
  .membersidebar .sidenav-category .tit {
    padding: 10.5px 18px;
    background: #F1E5DA;
    border-radius: 5px;
    border: none;
    position: relative;
  }
  .membersidebar .sidenav-category .tit span {
    text-align: center;
    width: 100%;
    display: block;
  }
  .membersidebar .sidenav-category .tit .icon {
    position: absolute;
    right: 18px;
    top: calc(50% - 3px);
  }
  .membersidebar .sidenav-category .category-menu {
    background: #fff;
    padding: 0;
    border: 1px solid #F3F3F3;
    border-top: none;
  }
  .membersidebar .sidenav-category .category-menu .categorylist {
    padding: 0;
  }
  .membersidebar .sidenav-category .category-menu .categorylist .categorylink + .categorylink {
    border-top: 1px solid #F3F3F3;
  }
  .membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink {
    padding: 11.5px 0;
  }
  .membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink:before {
    display: none;
  }
  .membersidebar .sidenav-category .category-menu .categorylist .categorylink .sublink a {
    width: 100%;
    text-align: center;
  }
}

.member-main {
  width: calc(100% - 300px);
  padding-left: 2.5em;
  flex: 1 1 0;
}
@media (max-width: 1260px) {
  .member-main {
    padding-left: 1.5em;
  }
}
@media (max-width: 920px) {
  .member-main .relatedBox > div {
    max-width: none;
  }
  .member-main .relatedBox .slickBox .item > a {
    margin: auto;
  }
}
@media (max-width: 767px) {
  .member-main {
    padding-left: 0;
    width: calc(100% - 0px);
    flex: 0 1 calc(100% - 0px);
  }
  .member-main .relatedBox .slickBox .item > a {
    margin: 0 4%;
  }
}
@media (max-width: 575px) {
  .member-main {
    width: 100%;
    padding-left: 0;
  }
  .member-main .relatedBox .slickBox .item > a {
    margin: auto;
  }
}

.membercenterbox {
  margin: 0 -15px;
}
.membercenterbox .overview-conetent {
  display: flex;
  justify-content: space-between;
}
.membercenterbox .overview-conetent:nth-child(1) {
  padding-bottom: 3%;
}
.membercenterbox .overview-conetent:nth-child(1) .col:nth-child(1) {
  flex: 0 1 675px;
  width: 50%;
}
.membercenterbox .overview-conetent:nth-child(1) .col:nth-child(2) {
  flex: 0 1 510px;
  width: 50%;
}
.membercenterbox .overview-conetent:nth-child(2):nth-child(1) {
  flex: 0 0 100%;
  max-width: 100%;
  padding-top: 2em;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox {
  background-color: #fff;
  padding: 2em 1.5em 1em 1.5em;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .slick-list {
  padding-bottom: 3em;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .slick-arrow {
  top: -2%;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .item > a {
  background-color: #F8F8F8;
  flex-direction: column;
  height: 380px;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .item > a::after {
  bottom: 20px;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .item > a::before {
  top: 20%;
  left: auto;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .item > a img {
  width: 100%;
}
.membercenterbox .overview-conetent:nth-child(2) .relatedBox .slickBox .item > a span {
  width: 100%;
  text-align: center;
}
.membercenterbox .overview-conetent .overview-box {
  padding: 2em;
  min-height: 400px;
}
.membercenterbox .overview-conetent .overview-box .headbox {
  padding-bottom: 0.5em;
}
.membercenterbox .overview-conetent .overview-box .headbox .tit {
  line-height: 1.5;
  margin-left: 2px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li {
  padding: 0 10px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  border: 1px solid #C4C4C4;
  border-radius: 10px;
  height: 100%;
  text-decoration: none;
  box-shadow: 0px 3px 25px transparent;
  padding: 0.5em;
  transition: all 0.3s;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a svg {
  fill: #000;
  transition: all 0.5s;
  z-index: 1;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a .wordbox {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a .wordbox .word {
  display: block;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a .wordbox .bubble {
  background: #F5821F;
  width: 25px;
  min-width: 25px;
  line-height: 25px;
  display: block;
  margin-left: 7px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a:hover {
  border: 1px solid #FFF;
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.1490196078);
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li a:hover .word {
  font-weight: 600;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1), .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) {
  flex: 1 0 50%;
  height: 110px;
  padding: 0 10px;
  margin-bottom: 1.5em;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a {
  flex-direction: initial;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a .icon, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a .icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #F3F3F3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8%;
  transition: all 0.3s;
  position: relative;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a .icon::before, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a .icon::before {
  content: "";
  background: linear-gradient(to right, #F5821F, #F59704);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  left: 0;
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a:hover .icon, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a:hover .icon {
  background-color: transparent;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a:hover .icon::before, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a:hover .icon::before {
  opacity: 1;
  z-index: 0;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a:hover .icon svg path,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a:hover .icon svg rect, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a:hover .icon svg path,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a:hover .icon svg rect {
  fill: #fff !important;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) a:hover .wordbox .word, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) a:hover .wordbox .word {
  font-weight: 600;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) .word, .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) .word {
  width: 6em;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) img,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1) svg {
  width: 37px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) img,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) svg {
  width: 32px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(3), .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(4), .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(5) {
  flex: 1 0 33.3%;
  height: 150px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(3) img,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(3) svg {
  width: 36px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(4) img,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(4) svg {
  width: 45px;
}
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(5) img,
.membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(5) svg {
  width: 47px;
}
.membercenterbox .overview-conetent .overview-box .tools-column {
  padding: 1.5em 0em 2em 0em;
  max-width: 395px;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a {
  display: flex;
  align-items: center;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a .iconbox {
  display: block;
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #8E8E8E;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a .wordbox {
  display: block;
  padding-left: 30px;
  color: #000;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a .wordbox .wordbold,
.membercenterbox .overview-conetent .overview-box .tools-column li a .wordbox .word {
  display: block;
  transition: all 0.3s;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a:hover {
  color: #F5821F;
  text-decoration: none;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a:hover .iconbox {
  background: #F5821F;
}
.membercenterbox .overview-conetent .overview-box .tools-column li a:hover .wordbox .wordbold,
.membercenterbox .overview-conetent .overview-box .tools-column li a:hover .wordbox .word {
  color: #F5821F;
}
.membercenterbox .overview-conetent .overview-box .tools-column li + li {
  margin-top: 3em;
}
@media screen and (max-width: 1260px) {
  .membercenterbox .overview-conetent {
    flex-wrap: wrap;
  }
  .membercenterbox .overview-conetent:nth-child(1) {
    padding-bottom: 0;
  }
  .membercenterbox .overview-conetent:nth-child(1) .col {
    padding-bottom: 1em;
  }
  .membercenterbox .overview-conetent:nth-child(1) .col:nth-child(1) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .membercenterbox .overview-conetent:nth-child(1) .col:nth-child(2) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .membercenterbox .overview-conetent .overview-box {
    min-height: auto;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column {
    max-width: none;
  }
}
@media screen and (max-width: 870px) {
  .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1), .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) {
    flex: 1 0 100%;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column {
    max-width: none;
  }
}
@media screen and (max-width: 991px) {
  .membercenterbox .overview-conetent {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .membercenterbox .overview-conetent {
    padding-bottom: 0;
  }
  .membercenterbox .overview-conetent .col {
    padding: 2em 0 0em 0 !important;
  }
}
@media (max-width: 767px) {
  .membercenterbox {
    margin: 0;
  }
}
@media (max-width: 576px) {
  .membercenterbox .overview-conetent .overview-box {
    padding: 1em 1.5em 2em 1.5em;
  }
  .membercenterbox .overview-conetent .overview-box .headbox {
    padding: 10px 15px;
  }
  .membercenterbox .overview-conetent .overview-box .function-wedgit li {
    height: 110px !important;
    padding: 0 5px;
  }
  .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(1), .membercenterbox .overview-conetent .overview-box .function-wedgit li:nth-child(2) {
    height: 90px !important;
    padding: 0 5px;
    margin-bottom: 1em;
  }
  .membercenterbox .overview-conetent .overview-box .function-wedgit li a .wordbox .bubble {
    width: 20px;
    min-width: 20px;
    line-height: 20px;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column {
    padding: 25px 15px;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column li + li {
    margin-top: 20px;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column li a .iconbox {
    width: 60px;
    min-width: 60px;
    height: 60px;
  }
  .membercenterbox .overview-conetent .overview-box .tools-column li a .wordbox {
    padding-left: 15px;
  }
}
@media (max-width: 360px) {
  .membercenterbox .overview-conetent .overview-box .function-wedgit {
    padding: 20px 10px;
  }
  .membercenterbox .overview-conetent .overview-box .function-wedgit li {
    padding: 0;
  }
}

.member {
  padding: 2em;
  min-height: 1000px;
}
@media (max-width: 767px) {
  .member {
    min-height: auto;
  }
}
.member .title {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.03em;
}
.member .title button:hover {
  text-decoration: underline;
}
.member.editor hr {
  border-top: 1px solid #8E8E8E;
}
.member.editor .topBox > div {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.member.editor .topBox > div .tit {
  width: 8em;
  padding: 13px 0;
  display: inline-block;
  color: #333333;
  letter-spacing: 0.03em;
}
.member.editor .topBox > div > span {
  padding: 13px 0;
}
.member.editor .topBox ul {
  padding: 0 1em 0 0;
  margin-bottom: 0;
  flex: 1 1 0;
}
.member.editor .topBox ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1em;
  width: 100%;
}
.member.editor .topBox ul li > img {
  margin-right: 3.5%;
  width: 50px;
}
.member.editor .topBox ul li > span {
  display: inline-block;
  flex: 1 1 0;
  color: #343434;
  letter-spacing: 0.03em;
  font-size: 16px;
  padding-right: 1em;
}
.member.editor .topBox ul li .all-btn {
  margin: auto;
  font-size: 16px;
}
.member.editor .topBox ul li .all-btn span {
  padding-left: 1em;
}
.member.editor .topBox ul li .all-btn.off {
  background: #fff;
  color: #000 !important;
  border: 1px solid #2A2A2A;
}
@media (max-width: 991px) {
  .member.editor .topBox > div .tit {
    flex: 1 0 100%;
  }
  .member.editor .topBox > div > span {
    padding: 0;
  }
  .member.editor .topBox > div ul {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .member.editor .topBox ul li > img {
    width: 35px;
  }
}
@media (max-width: 425px) {
  .member.editor .topBox ul li {
    margin-bottom: 1.5em;
  }
  .member.editor .topBox ul li .all-btn {
    flex: 0 0 100%;
    margin-top: 0.5em;
  }
}
.member.notice .member-group .msg-box.ordersmsg-box {
  padding: 1em 0 2em 0;
  border-bottom: none;
}
@media (max-width: 991px) {
  .member.notice .all-btn,
  .member.notice .outstock {
    width: auto !important;
    height: auto !important;
    padding: 8px 15px !important;
    font-size: 15px !important;
  }
}
.member {
  /*詢問客服*/
}
.member.service-detail .msg-box.ordersmsg-box {
  padding: 1em 0 1.8em 0;
}
.member.service-detail .formBox {
  padding-top: 1em;
}
.member.service-detail .formBox > div {
  padding: 0;
}
.member.service-detail .formBox .form-group {
  align-items: flex-start;
  margin-bottom: 1.5em;
}
.member.service-detail .formBox .input-group-text {
  padding: 0;
  min-width: 7.5em;
}
.member.service-detail .formBox textarea {
  height: 120px;
}
.member .cart-Numbering {
  margin-bottom: 1em !important;
  padding-left: 0;
  padding-top: 1em;
}
@media (max-width: 1490px) {
  .member .cart-Numbering > div {
    flex: 1 1 100% !important;
  }
}
.member {
  /*訂單明細*/
}
.member .member-order .cart-Numbering > div:nth-child(1) {
  flex: 1 1 35%;
}
.member .member-order .cart-Numbering > div:nth-child(2) {
  flex: 1 1 30%;
}
.member .member-order .cart-Numbering > div:nth-child(3) {
  flex: 1 1 20%;
}
.member .member-order .cart-Numbering > div:nth-child(4) {
  flex: 1 1 12;
}
.member {
  /*退貨明細*/
}
.member .return-detail .cart-Numbering {
  margin-bottom: 1em;
  padding-left: 0;
  padding-top: 1em;
}
.member .return-detail .cart-Numbering > div:nth-child(1) {
  flex: 1 1 12%;
}
.member .return-detail .cart-Numbering > div:nth-child(2) {
  flex: 1 1 20%;
}
.member .return-detail .cart-Numbering > div:nth-child(3) {
  flex: 0 1 27%;
}
.member .return-detail .cart-Numbering > div:nth-child(4) {
  flex: 1 1 12;
}
@media (max-width: 1490px) {
  .member .return-detail .cart-Numbering > div {
    flex: 1 1 100% !important;
  }
}
.member {
  /*申請退貨*/
}
.member .member-return .cart-table .for-event .pd-event {
  margin-left: 2em;
}
@media screen and (max-width: 1300px) {
  .member .member-return .cart-table .imgBox {
    width: 100px;
  }
  .member .member-return .cart-table .imgBox > div {
    width: 80px;
    height: 80px;
  }
  .member .member-return .cart-table .for-pd {
    align-items: baseline;
  }
}
@media screen and (max-width: 575px) {
  .member .member-return .custom-control.custom-checkbox {
    order: 3;
  }
  .member .member-return .cart-table .for-event .pd-event {
    margin-left: 0;
  }
  .member .member-return .cart-table .for-pd {
    align-items: flex-start;
  }
  .member .member-return .cart-table .for-pd .cart-cell.total {
    flex: 0 0 100%;
    justify-content: flex-start;
  }
}
.member .coupon-primary {
  padding-bottom: 4.5em;
}
.member .coupon-primary .select2-container {
  width: 100% !important;
}
.member .coupon-ticket {
  margin-right: 0;
}
.member .page-group-style {
  padding: 2em 2em;
}
.member .cart .cart03 {
  padding: 0 !important;
}
.member .cart .cart03 .cart-top .cart-cell.price {
  flex: 0 0 120px;
}
.member .cart .cart03 .cart-table .for-pd .cart-cell.price {
  flex: 0 0 120px;
}
@media screen and (max-width: 1300px) {
  .member .cart .cart03 .cart-table .for-pd .cart-cell.qtt {
    flex: 0 0 0;
  }
}
.member .memaddressmodal .modal-content {
  max-width: 750px;
}
.member .memaddressmodal .modal-content .zoom {
  padding: 45px 35px 50px 35px;
  min-height: 350px;
}
.member .memaddressmodal .address-form {
  padding: 35px 15px 0 15px;
}
.member .memaddressmodal .address-form .address-form-row {
  margin-bottom: 20px;
}
.member .memaddressmodal .address-form .address-form-row .tit {
  color: #1a1a1a;
}
.member .memaddressmodal .address-form .form-btn-row .form-btnUL {
  margin-top: 60px;
}
@media (max-width: 780px) {
  .member .memaddressmodal .modal-content {
    width: calc(100% - 30px);
    margin: auto;
  }
}
@media (max-width: 768px) {
  .member .memaddressmodal .modal-content .zoom {
    padding: 45px 25px 50px 25px;
  }
  .member .memaddressmodal .address-form .form-btn-row .form-btnUL {
    margin-top: 40px;
  }
  .member .memaddressmodal .address-form .form-btn-row .form-btnUL li {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  .member .memaddressmodal .modal-content .zoom {
    padding: 45px 15px 15px 15px;
  }
  .member .memaddressmodal .address-form {
    padding: 15px 15px 0 15px;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col .custom-select {
    height: 40px;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col .custom-select .dropdown-toggle {
    height: 40px;
    padding: 0 20px 0 10px;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col .custom-select.open .dropdown-menu li a {
    padding: 5px 10px;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col.zipcode {
    max-width: 120px;
  }
}
@media (max-width: 480px) {
  .member .memaddressmodal .address-form {
    padding: 15px 10px 0 10px;
  }
  .member .memaddressmodal .address-form .address-form-row {
    margin-bottom: 15px;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col {
    width: 100%;
    max-width: 100% !important;
  }
  .member .memaddressmodal .address-form .address-form-row .address-row .address-col + .address-col {
    margin-top: 15px;
  }
}
.member .formBox input[type=date] + img,
.member .formBox input[type=date] + svg {
  bottom: 9px;
}
.member .formBox .form-group.address .select2-container {
  width: 100% !important;
}
.member .formBox .btnBox {
  padding: 3% 0;
}
.member .formBox .btnBox .all-btn {
  margin: 2.5em 10px;
}
@media (max-width: 767px) {
  .member .formBox input[type=date] + img,
  .member .formBox input[type=date] + svg {
    bottom: 6px;
  }
}
@media screen and (max-width: 575px) {
  .member .formBox .form-group.address {
    justify-content: flex-end;
  }
  .member .formBox .form-group.address > :nth-child(2) {
    flex: 0 0 calc(100% - 0px);
    max-width: none;
    margin-right: 0;
  }
  .member .formBox .form-group.address > :nth-child(3) {
    flex: 0 0 calc(100% - 0px);
    max-width: none;
    margin-right: 0;
  }
  .member .formBox .form-group.address .form-control {
    flex: 0 0 calc(100% - 0px);
    max-width: none;
  }
  .member .formBox .btnBox {
    padding: 0;
  }
  .member .formBox .btnBox .all-btn {
    margin: 1.5em 10px;
  }
}
.member .renew {
  background-color: rgba(213, 171, 41, 0.0784313725);
  height: 50px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 5px;
}
.member .renew span {
  padding-left: 8px;
  letter-spacing: 0.05em;
}
.member .modal-content {
  padding: 3em 3em 1em 3em;
}
.member .modal-content .head-titbox div {
  line-height: 45px;
}
.member .modal-content .msg-content {
  padding: 1.5em 0 0 0;
}
.member .modal-content .msg-content .formBox .form-group {
  flex-wrap: wrap;
}
@media (max-width: 575px) {
  .member .modal-content .msg-content .formBox .form-group.address > div,
  .member .modal-content .msg-content .formBox .form-group.address .form-control {
    flex: 1 1 100% !important;
  }
}
.member .modal-content .msg-content .formBox .input-group-text {
  flex: 1 1 100%;
  padding: 0.3em 0 0.8em 0;
}
.member .modal-content .msg-content .formBox .btnBox .all-btn {
  margin: 0.5em 10px;
}
.member .page {
  padding: 0em 0 2em 0;
}
.member .linkbox {
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 75px;
  height: 40px;
  padding: 7px 5px;
  background-color: #fff;
  transition: all 0.3s;
}
.member .linkbox a {
  display: inline-block;
  color: #666666;
  font-weight: 500;
  padding: 0 7px;
  text-decoration: none !important;
  transition: all 0.3s;
}
@media (max-width: 1199px) {
  .member .page {
    padding: 0em 0 1em 0;
  }
}
@media (max-width: 1200px) {
  .member.notice .member-group .msg-box.ordersmsg-box {
    border-bottom: 1px solid #C4C4C4 !important;
  }
}
@media (max-width: 991px) {
  .member {
    padding: 2em 1.5em;
  }
  .member .modal-dialog.modal-lg {
    max-width: 750px;
  }
}
@media (max-width: 767px) {
  .member {
    margin-top: 2.5em;
  }
  .member .page-group-style {
    margin-top: 2.5em;
  }
}

@media (min-width: 576px) {
  .modal-dialog.modal-sm {
    max-width: 450px;
  }
}
.member-group {
  padding-bottom: 20px;
}
.member-group.member-weekbox {
  padding-bottom: 0;
}
.member-group .msg-box ul {
  margin: 0 0 0 5px;
}
.member-group .msg-box ul li {
  padding: 4px 0;
}
.member-group .msg-box ul li::marker {
  font-size: 13px;
}
.member-group .msg-box ul li p {
  color: #4d4d4d;
  letter-spacing: 0.03em;
  margin-bottom: 0;
}
.member-group .msg-box ul.ordersmsgUL li {
  padding: 0;
}
.member-group .msg-box .profitmsg-box {
  padding-bottom: 75px;
}
.member-group .msg-box .profitmsg-box .profit-btn {
  min-width: 153px;
  border-radius: 5px;
  background: #9E7D54;
  text-align: center;
  padding: 0 20px;
  color: #fff;
}
.member-group .msg-box .profitmsg-box .profit-btn:hover {
  background: #b08a71;
}
.member-group .msg-box .profitmsg-box .profit-info {
  display: flex;
  align-items: center;
}
.member-group .msg-box .profitmsg-box .profit-info .profit-link {
  color: #9E7D54;
  text-decoration: underline;
  display: block;
  margin-right: 15px;
  word-break: break-all;
}
.member-group .msg-box .profitmsg-box .profit-info .profit-link:hover {
  color: #b08a71;
}
.member-group .msg-box .profitmsg-box .profit-info .copy-btn {
  color: #fff;
  border-radius: 5px;
  background: #9E7D54;
  padding: 0 20px;
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-group .msg-box .profitmsg-box .profit-info .copy-btn .copy-icon {
  margin-right: 5px;
}
.member-group .msg-box .profitmsg-box .profit-info .copy-btn:hover {
  background: #b08a71;
}
.member-group .msg-box .profitmsg-box .profit-info .copy-btn[disabled=disabled] {
  cursor: default;
}
.member-group .msg-box .profitmsg-box .profit-info .copy-btn[disabled=disabled]:hover {
  background: #9E7D54;
}
.member-group .msg-box.no-order {
  padding: 40px 35px 25px 35px;
}
.member-group .msg-box.no-order ul {
  max-width: 940px;
}
.member-group .msg-box.no-order ul li + li {
  margin-top: 20px;
}
.member-group .msg-box.order-headbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #333;
  padding: 30px 40px 35px 30px;
}
.member-group .msg-box.order-headbox .order-num {
  padding-right: 20px;
}
.member-group .msg-box.order-headbox .order-num .orderNo {
  color: #C60707;
  text-decoration: underline;
}
.member-group .msg-box.order-headbox .order-num .orderNo:hover {
  color: #9E7D54;
  text-decoration: underline;
}
.member-group .msg-box.order-headbox .order-status {
  display: flex;
  flex-wrap: wrap;
}
.member-group .msg-box.order-headbox .order-status .order-time {
  margin-right: 25px;
}
.member-group .msg-box.ordersmsg-box {
  padding: 1em 0 2.5em 0;
  border-bottom: 1px solid #C4C4C4;
}
.member-group .msg-box.borderbrown-top {
  border-top: 1px solid #F3F3F3;
}
.member-group .msg-box.addslip {
  position: relative;
  padding-right: 160px !important;
}
.member-group .msg-box.addslip .order-slip {
  margin-right: 25px;
  position: absolute;
  right: 0;
  top: 22px;
}
.member-group .msg-box.addslip .order-slip a {
  display: block;
  width: fit-content;
  min-width: 120px;
  text-align: center;
  color: #9E7D54;
  color: #9E7D54;
  border: 1px solid #9E7D54;
  border-radius: 5px;
}
.member-group .msg-box.addslip .order-slip a:hover {
  background: #9E7D54;
  color: #fff;
}
@media (max-width: 992px) {
  .member-group .msg-box .profitmsg-box {
    padding-bottom: 20px;
  }
  .member-group .msg-box .profitmsg-box .profit-info {
    flex-wrap: wrap;
  }
  .member-group .msg-box .profitmsg-box .profit-info .profit-link {
    width: 100%;
    margin-bottom: 10px;
  }
  .member-group .msg-box.order-headbox {
    padding: 30px 20px;
  }
}
@media (max-width: 576px) {
  .member-group {
    padding-bottom: 0;
  }
  .member-group .msg-box {
    padding: 15px 15px 20px 15px;
  }
  .member-group .msg-box .profitmsg-box {
    padding-bottom: 10px;
  }
  .member-group .msg-box.no-order {
    padding: 15px 15px 20px 15px;
  }
  .member-group .msg-box.no-order ul li + li {
    margin-top: 10px;
  }
  .member-group .msg-box.order-headbox {
    padding: 15px 15px 20px 15px;
  }
  .member-group .msg-box.ordersmsg-box {
    padding: 15px 15px 20px 15px;
  }
}
@media (max-width: 480px) {
  .member-group .msg-box.addslip {
    padding-right: 15px !important;
  }
  .member-group .msg-box.addslip .order-slip {
    position: static;
    right: auto;
    top: auto;
    margin-top: 15px;
    margin-right: 0;
  }
}

/*貨到通知*/
.member-pdrecord {
  padding-bottom: 100px;
}
@media (max-width: 576px) {
  .member-pdrecord {
    padding-bottom: 40px;
  }
}

.member-pdInfo-table {
  width: 100%;
}
.member-pdInfo-table th {
  color: #333;
  background: #E5E5E5;
  height: 50px;
  text-align: center;
}
.member-pdInfo-table th:nth-of-type(1),
.member-pdInfo-table td:nth-of-type(1) {
  text-align: center;
}
.member-pdInfo-table th:nth-of-type(1), .member-pdInfo-table th:nth-of-type(3),
.member-pdInfo-table td:nth-of-type(1),
.member-pdInfo-table td:nth-of-type(3) {
  width: 135px;
}
.member-pdInfo-table th:nth-of-type(2),
.member-pdInfo-table td:nth-of-type(2) {
  width: calc(100% - 390px);
}
.member-pdInfo-table th:nth-of-type(4),
.member-pdInfo-table td:nth-of-type(4) {
  width: 150px;
}
.member-pdInfo-table th:nth-last-of-type(1),
.member-pdInfo-table td:nth-last-of-type(1) {
  padding-right: 40px;
  width: 100px;
  text-align: center;
}
.member-pdInfo-table td {
  border-bottom: 1px solid #C4C4C4;
}
.member-pdInfo-table .td-in .joindate {
  color: #333;
}
.member-pdInfo-table .td-in .pdbox {
  padding: 1.2em 0;
}
.member-pdInfo-table .td-in .pdbox a {
  display: flex;
  color: #333;
  align-items: center;
  transition: all 0.3s;
}
.member-pdInfo-table .td-in .pdbox a .picgroup {
  position: relative;
  display: block;
  padding: 0 30px 0 25px;
}
.member-pdInfo-table .td-in .pdbox a .picgroup .img {
  display: inline-block;
  text-align: center;
  width: 130px;
  height: 140px;
  background-color: #F8F8F8;
  border-radius: 15px;
  padding: 0.5em;
  margin: auto;
}
.member-pdInfo-table .td-in .pdbox a .picgroup .img img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  mix-blend-mode: darken;
}
.member-pdInfo-table .td-in .pdbox a .wordgroup .info-name span {
  display: block;
}
.member-pdInfo-table .td-in .pdbox a .wordgroup .info-name span:nth-child(1) {
  font-size: 20px;
  font-weight: 600;
  font-family: "Roboto Condensed", "Noto Sans TC", sans-serif;
}
.member-pdInfo-table .td-in .pdbox a .wordgroup .info-name span:nth-child(2) {
  font-size: 16px;
  letter-spacing: 0.03em;
  color: #484848;
}
.member-pdInfo-table .td-in .pdbox a .wordgroup .name-txt {
  display: block;
  letter-spacing: 0.03em;
  color: #8E8E8E;
  font-size: 15px;
  margin-top: 10px;
}
.member-pdInfo-table .td-in .pdbox a .wordgroup .notice {
  display: block;
  color: #F5821F;
  margin-top: 10px;
  letter-spacing: 0.03em;
}
.member-pdInfo-table .td-in .pdbox a:hover {
  color: #F5821F;
  text-decoration: none;
}
.member-pdInfo-table .td-in .pdprice {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-pdInfo-table .td-in .pdstatus {
  padding: 0 12px;
}
.member-pdInfo-table .td-in .pdstatus .all-btn {
  margin: 0.5em auto;
}
.member-pdInfo-table .td-in .pdstatus .all-btn.bg-black {
  background-color: #2A2A2A;
}
.member-pdInfo-table .td-in .pdstatus .outstock {
  width: 150px;
  height: 40px;
  background-color: #D8D8D8;
  color: #fff;
  letter-spacing: 0.03em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 16px;
}
.member-pdInfo-table .td-in .pdedit .delete svg,
.member-pdInfo-table .td-in .pdedit .delete img {
  width: 18px;
}
.member-pdInfo-table .td-in .pdedit .delete svg path,
.member-pdInfo-table .td-in .pdedit .delete svg rect,
.member-pdInfo-table .td-in .pdedit .delete img path,
.member-pdInfo-table .td-in .pdedit .delete img rect {
  fill: #8E8E8E !important;
  transition: all 0.3s;
}
.member-pdInfo-table .td-in .pdedit .delete:hover svg path,
.member-pdInfo-table .td-in .pdedit .delete:hover svg rect {
  fill: #F5821F !important;
}
@media (max-width: 1400px) {
  .member-pdInfo-table th:nth-of-type(1),
  .member-pdInfo-table td:nth-of-type(1) {
    width: 125px;
  }
  .member-pdInfo-table th:nth-of-type(3),
  .member-pdInfo-table td:nth-of-type(3) {
    width: 110px;
  }
  .member-pdInfo-table th:nth-last-of-type(1),
  .member-pdInfo-table td:nth-last-of-type(1) {
    padding-right: 15px;
    width: 65px;
  }
  .member-pdInfo-table .td-in .pdbox a {
    padding: 0 1em;
    flex-direction: column;
    align-items: flex-start;
  }
  .member-pdInfo-table .td-in .pdbox a .picgroup {
    padding: 0 0;
  }
  .member-pdInfo-table .td-in .pdbox a .wordgroup {
    margin-top: 1em;
  }
}
@media (max-width: 1200px) {
  .member-pdInfo-table th {
    display: none;
  }
  .member-pdInfo-table tr {
    border-bottom: 1px solid #C4C4C4;
  }
  .member-pdInfo-table tr:nth-of-type(1) {
    border-bottom: none;
    padding: 0;
  }
  .member-pdInfo-table tr {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0;
  }
  .member-pdInfo-table td {
    display: flex;
    border-bottom: none;
    align-items: center;
  }
  .member-pdInfo-table td:nth-of-type(1), .member-pdInfo-table td:nth-of-type(2) {
    width: 100%;
  }
  .member-pdInfo-table td:nth-of-type(3) {
    width: 130px;
  }
  .member-pdInfo-table td:nth-of-type(4) {
    flex: 1 1 0;
  }
  .member-pdInfo-table td:nth-of-type(5) {
    width: 50px;
  }
  .member-pdInfo-table td:nth-last-of-type(1) {
    justify-content: flex-end;
    padding-right: 0;
  }
  .member-pdInfo-table .td-in {
    text-align: left;
  }
  .member-pdInfo-table .td-in .pdbox {
    padding: 5px 0 1em 0;
  }
  .member-pdInfo-table .td-in .pdbox a {
    align-items: center;
    flex-direction: row;
    padding: 0;
  }
  .member-pdInfo-table .td-in .pdbox a .picgroup .pd-tag {
    top: 0;
  }
  .member-pdInfo-table .td-in .pdbox a .wordgroup {
    margin-top: 0;
    padding-left: 1em;
  }
  .member-pdInfo-table .td-in .pdstatus {
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
  }
  .member-pdInfo-table .td-in .pdstatus .all-btn {
    margin: 5px;
  }
}
@media (max-width: 410px) {
  .member-pdInfo-table .td-in {
    width: 100%;
  }
  .member-pdInfo-table .td-in .pdprice {
    justify-content: start;
  }
  .member-pdInfo-table .td-in .pdstatus .all-btn,
  .member-pdInfo-table .td-in .pdstatus .outstock {
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .member-pdInfo-table td:nth-of-type(3) {
    width: 80px;
  }
  .member-pdInfo-table td:nth-of-type(4) {
    justify-content: center;
  }
  .member-pdInfo-table .td-in .joindate {
    font-size: 15px !important;
  }
  .member-pdInfo-table .td-in .pdbox a {
    align-items: flex-start;
  }
  .member-pdInfo-table .td-in .pdbox a .picgroup .img {
    width: 80px;
    height: 80px;
  }
  .member-pdInfo-table .td-in .pdstatus {
    padding: 0em 0 0 0;
    justify-content: center;
  }
}

.bulletin-content {
  padding-bottom: 55px;
}

.dropmenu-box .bootstrap-select {
  padding: 9px 0;
  border-bottom: 1px solid #F3F3F3;
}
.dropmenu-box .bootstrap-select .dropdown-menu {
  border: none;
  border-radius: 0;
  font-size: 16px;
  padding: 4px 0;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
}
.dropmenu-box .bootstrap-select .dropdown-menu li {
  padding: 8px 10px 8px 25px;
}
.dropmenu-box .bootstrap-select .dropdown-menu li a {
  color: #333;
  display: block;
}
.dropmenu-box .bootstrap-select .dropdown-menu li:hover {
  background: #F1EDEA;
  color: #9E7D54;
}
.dropmenu-box .bootstrap-select .dropdown-menu li:hover a {
  color: #9E7D54;
  font-weight: 500;
}
.dropmenu-box .bootstrap-select .dropdown-toggle {
  padding: 0 0.75rem 0 0;
  border: none !important;
  background: #fff !important;
}
.dropmenu-box .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #333;
  font-size: 16px;
  padding-left: 25px;
}
.dropmenu-box .bootstrap-select .dropdown-toggle:focus, .dropmenu-box .bootstrap-select .dropdown-toggle:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.dropmenu-box .bootstrap-select .dropdown-toggle::after {
  background: url(images/common/icon-arrow-down.svg) center center no-repeat;
  width: 11px;
  height: 6px;
  content: "" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  border: none;
  vertical-align: top;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  right: 15px;
}
.dropmenu-box .bootstrap-select .dropdown-toggle.bs-placeholder {
  padding-left: 0;
}
.dropmenu-box .bootstrap-select.open .dropdown-menu {
  max-height: 500px;
  opacity: 1;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
.dropmenu-box .bootstrap-select.open .dropdown-toggle::after {
  background: url(images/common/icon-arrow-up.svg) center center no-repeat;
  content: "" !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
@media (max-width: 650px) {
  .dropmenu-box .bootstrap-select .dropdown-menu li {
    padding: 8px 20px 8px 10px;
  }
  .dropmenu-box .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    padding-left: 0;
  }
  .dropmenu-box .bootstrap-select .dropdown-toggle::after {
    right: 5px;
  }
}

/*折價券查詢*/
.member-coupons-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0em 0 1em;
  flex-wrap: wrap;
}
.member-coupons-nav .dropmenu-box {
  width: 150px;
}
.member-coupons-nav .dropmenu-box .bootstrap-select {
  border-bottom: 0;
  padding: 0;
}

.member-couponsbox {
  width: 100%;
  padding: 0 40px 150px 20px;
}
.member-couponsbox .coupon-ticket {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 992px) {
  .member-couponsbox {
    padding: 0 25px 100px 20px;
  }
}
@media (max-width: 900px) {
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content {
    padding: 20px;
  }
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content:not(.no-status) {
    padding-right: 110px;
  }
}
@media (max-width: 800px) {
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content {
    padding: 20px;
    flex-wrap: wrap;
  }
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content:not(.no-status) {
    padding-right: 10px;
    padding-left: 15px;
  }
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content .display-content-inner {
    width: 100%;
  }
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-content .display-content-availability {
    position: static;
    top: auto;
    right: auto;
    margin-top: 10px;
  }
}
@media (max-width: 768px) {
  .member-couponsbox {
    padding: 0 25px 70px 20px;
  }
}
@media (max-width: 650px) {
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-cover {
    width: 140px;
  }
}
@media (max-width: 576px) {
  .member-couponsbox {
    padding: 0 15px 40px 15px;
  }
}
@media (max-width: 480px) {
  .member-couponsbox .coupon-ticket {
    max-width: 86%;
  }
  .member-couponsbox .coupon-ticket .coupon-ticket-display .display-cover {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .member-couponsbox .coupon-ticket {
    max-width: 100%;
  }
}

.member-pagesbox {
  padding-bottom: 10%;
}

@media (max-width: 991px) {
  .wp[data-page=noorder] .cart-table .cart-row.for-pd .cart-cell.info {
    padding-right: 0;
  }
}

.service-contentbox {
  padding-bottom: 60px;
}
.service-contentbox .service-section .qa-topic {
  width: 170px;
}
.service-contentbox .service-section .qa-content {
  width: calc(100% - 210px);
}
.service-contentbox .service-section .qa-icon {
  width: 130px;
  padding: 0 15px 0 10px;
}
.service-contentbox .service-section .service-qatit-row {
  display: flex;
  align-content: center;
  background: #E5E5E5;
  color: #333;
  height: 50px;
  align-items: center;
}
.service-contentbox .service-section .service-qatit-row .qa-th {
  text-align: center;
}
.service-contentbox .service-section .service-qatit-row .qa-content {
  padding-top: 0;
}
@media (max-width: 992px) {
  .service-contentbox .service-section .qa-topic {
    width: 120px;
  }
  .service-contentbox .service-section .qa-content {
    width: calc(100% - 10em);
  }
  .service-contentbox .service-section .qa-icon {
    width: 80px;
  }
}
@media (max-width: 700px) {
  .service-contentbox .service-section .service-qatit-row {
    display: none;
  }
}
@media (max-width: 576px) {
  .service-contentbox {
    padding-bottom: 40px;
  }
}

.service-content-row {
  border-bottom: 1px solid rgba(226, 218, 212, 0.5);
}
.service-content-row .service-qacontent-row {
  display: flex;
  padding: 2em 0 1.5em 0;
}
.service-content-row .service-qacontent-row:nth-child(even) {
  background-color: #F3F3F3;
  border-radius: 10px;
  padding: 1.5em 0 2em 0 !important;
  margin-bottom: 2em;
}
.service-content-row .service-qacontent-row + .service-qacontent-row {
  padding: 0 0 2em 0;
}
.service-content-row .service-qacontent-row .qa-td {
  text-align: center;
}
.service-content-row .service-qacontent-row .td-in {
  color: #333;
}
.service-content-row .service-qacontent-row .td-in .service-ask {
  border: 1px solid #9E7D54;
  border-radius: 50%;
  display: flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 0;
}
.service-content-row .service-qacontent-row .td-in .service-ask:hover {
  background: #9E7D54;
}
.service-content-row .service-qacontent-row .td-in .service-ask:hover svg path,
.service-content-row .service-qacontent-row .td-in .service-ask:hover svg rect {
  fill: #fff !important;
}
.service-content-row .service-qacontent-row .td-in.qa-section {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.service-content-row .service-qacontent-row .td-in.qa-section .qa-row .qa-orderNo {
  margin-bottom: 8px;
}
.service-content-row .service-qacontent-row .td-in.qa-section .qa-row .qa-orderNo .orderNo:hover {
  text-decoration: none;
}
.service-content-row .service-qacontent-row .td-in.qa-section .qa-row .customer-picgroup {
  padding-top: 20px;
  width: 100%;
}
.service-content-row .service-qacontent-row .td-in.qa-section .qa-row .customer-picgroup .item {
  cursor: default;
}
.service-content-row .service-qacontent-row .td-in.qa-section .qa-row .customer-picgroup .item:after {
  display: none;
}
.service-content-row .service-qacontent-row .td-in.qa-section .linkbox {
  max-width: 75px;
  margin-top: 1.5em;
  padding: 0px;
}
.service-content-row .service-qacontent-row .td-in.qa-section .linkbox a {
  display: inline-block;
  height: 100%;
  width: 100px;
  padding: 7px 5px;
  text-align: center;
}
.service-content-row .service-qacontent-row .td-in.qa-section .linkbox:hover {
  background-color: #2A2A2A;
}
.service-content-row .service-qacontent-row .td-in.qa-section .linkbox:hover a {
  color: #fff;
}
.service-content-row.return-checkout .qa-topic {
  width: 165px;
  padding: 0 10px 0 15px;
}
.service-content-row.return-checkout .qa-content {
  width: calc(100% - 165px);
}
@media (max-width: 850px) {
  .service-content-row .service-qacontent-row .td-in.qa-section .qa-row .customer-picgroup {
    flex-wrap: wrap;
    padding-top: 10px;
  }
  .service-content-row .service-qacontent-row .td-in.qa-section .qa-row .customer-picgroup .item {
    width: calc(33.3333333333% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
@media (max-width: 700px) {
  .service-content-row .service-qacontent-row {
    position: relative;
    flex-wrap: wrap;
  }
  .service-content-row .service-qacontent-row .qa-td {
    width: 100%;
    display: flex;
    padding: 0 20px !important;
    flex-wrap: wrap;
  }
  .service-content-row .service-qacontent-row .qa-td + .qa-td {
    margin-top: 10px;
  }
  .service-content-row .service-qacontent-row .qa-td .td-in {
    width: 100%;
    text-align: left;
  }
  .service-content-row .service-qacontent-row .qa-td.qa-topic .td-in {
    width: calc(100% - 40px);
  }
  .service-content-row .service-qacontent-row .qa-td.qa-icon {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 0 !important;
    width: 40px;
    height: 40px;
  }
  .service-content-row .service-qacontent-row .qa-td.qa-icon:before {
    display: none !important;
  }
  .service-content-row .service-qacontent-row .qa-td.qa-icon .td-in {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 576px) {
  .service-content-row .service-qacontent-row {
    position: relative;
    flex-wrap: wrap;
  }
  .service-content-row .service-qacontent-row .qa-td {
    padding: 0 15px !important;
  }
}

.orders-searchbox {
  padding: 1.6em 0 2.2em;
}
.orders-searchbox .search-row {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.orders-searchbox .search-row .search-input {
  width: 275px;
  position: relative;
}
.orders-searchbox .search-row .search-input .input-emptyradius {
  background-color: #fff !important;
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  padding: 10px 15px;
  width: 100%;
  height: 45px;
}
.orders-searchbox .search-row .search-input.input-orderNo {
  margin-left: 13px;
}
.orders-searchbox .search-row .search-input input[type=date] + img {
  position: absolute;
  right: 15px;
  background: #fff;
  pointer-events: none;
  top: 12px;
}
.orders-searchbox .search-row .search-word {
  min-width: 30px;
  text-align: center;
}
.orders-searchbox .search-row .sendbtn-box {
  margin-left: 13px;
}
.orders-searchbox .search-row .sendbtn-box .all-btn {
  width: 104px;
  height: 45px;
  border-radius: 5px;
  margin: auto;
}
@media (max-width: 1099px) {
  .orders-searchbox .search-row {
    flex-wrap: wrap;
  }
  .orders-searchbox .search-row .search-input {
    width: calc(50% - 15px);
  }
  .orders-searchbox .search-row .search-input.input-orderNo {
    margin: 13px 0 0 0;
    width: calc(100% - 122px);
  }
  .orders-searchbox .search-row .sendbtn-box {
    margin-left: auto;
    margin-top: 13px;
  }
}
@media (max-width: 768px) {
  .orders-searchbox {
    padding: 15px 0 20px 0;
  }
}
@media (max-width: 576px) {
  .orders-searchbox .search-row .search-input .input-emptyradius-brown {
    padding: 7px 10px;
  }
}

.orders-list {
  border-top: 1px solid rgba(226, 218, 212, 0.5);
}
.orders-list .orderslist-head {
  display: flex;
  justify-content: space-between;
  padding: 1.5em 0;
  align-items: flex-start;
}
.orders-list .orderslist-head .search-during {
  padding-right: 20px;
  color: #333333;
}
.orders-list .orderslist-head .search-during span {
  letter-spacing: 0;
  padding: 0 8px;
}
@media (max-width: 768px) {
  .orders-list .orderslist-head {
    padding: 15px 15px 20px 15px;
  }
}
@media (max-width: 576px) {
  .orders-list .orderslist-head {
    padding: 15px 0 10px 0;
  }
  .orders-list .orderslist-head .search-during span {
    padding: 0 3px;
  }
}
.orders-list .table-default th {
  background-color: #E5E5E5;
  height: 50px;
  text-align: center;
  letter-spacing: 0.03em;
}
.orders-list .table-default td {
  padding: 0;
  line-height: 1;
  margin: 0;
  border-bottom: 1px solid #C4C4C4;
  height: 75px;
  min-height: 40px;
}
@media (max-width: 1350px) {
  .orders-list .table-default tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
  }
  .orders-list .table-default td:before {
    content: attr(data-th);
    background: #E5E5E5;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    width: 100px;
    display: flex;
    align-items: center;
    padding-left: 15px;
  }
}
.orders-list .orders-table .table-style td .td-in {
  padding: 18px 7px;
  text-align: center;
  color: #333;
}
.orders-list .orders-table .table-style td .td-in > * {
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.orders-list .orders-table .table-style td .td-in .linkbox {
  border: 1px solid #C4C4C4;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 75px;
  height: 40px;
  padding: 7px 5px;
  transition: all 0.3s;
}
.orders-list .orders-table .table-style td .td-in .linkbox a {
  display: inline-block;
  color: #666666;
  font-weight: 500;
  padding: 0 7px;
  text-decoration: none !important;
}
.orders-list .orders-table .table-style td .td-in .linkbox a + a {
  padding-left: 0;
  display: inline-flex;
  align-items: center;
}
.orders-list .orders-table .table-style td .td-in .linkbox a + a:before {
  content: "/";
  font-size: 16px;
  color: #666666;
  margin-right: 7px;
}
.orders-list .orders-table .table-style td .td-in .linkbox:hover {
  background-color: #2A2A2A;
}
.orders-list .orders-table .table-style td .td-in .linkbox:hover a {
  color: #fff;
}
.orders-list .orders-table .table-style td .td-in .linkbox:hover a:hover {
  color: #F5821F;
}
.orders-list .orders-table .table-style td .td-in .paywaybox .payway {
  display: inline-block;
}
.orders-list .orders-table .table-style td .td-in .paywaybox a {
  display: block;
  color: #F5821F;
  margin-top: 3px;
  transition: all 0.3s;
}
.orders-list .orders-table .table-style td .td-in .paywaybox a:not(.invoiceNo) {
  text-decoration: underline;
}
.orders-list .orders-table .table-style td .td-in .paywaybox a:hover {
  text-decoration: none;
}
@media (max-width: 1500px) {
  .orders-list .orders-table .table-style td {
    height: auto;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox {
    flex-direction: column;
    min-width: auto;
    padding: 7px;
    height: auto;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a {
    text-align: center;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a + a {
    padding: 3px 7px 0 7px;
    margin-top: 5px;
    border-top: 1px solid #C4C4C4;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a + a:before {
    display: none;
  }
  .orders-list .orders-table .table-style td .td-in .paywaybox .payway {
    max-width: 75px;
  }
}
@media (max-width: 1350px) {
  .orders-list .orders-table {
    border-top: none;
  }
  .orders-list .orders-table .table-style tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
  }
  .orders-list .orders-table .table-style tr:nth-of-type(1) {
    display: none;
    border-bottom: none;
  }
  .orders-list .orders-table .table-style tr + tr {
    margin-bottom: 15px;
  }
  .orders-list .orders-table .table-style th {
    display: none;
  }
  .orders-list .orders-table .table-style td {
    display: flex;
  }
  .orders-list .orders-table .table-style td:nth-of-type(1), .orders-list .orders-table .table-style td:nth-of-type(4), .orders-list .orders-table .table-style td:nth-of-type(7) {
    width: 35%;
  }
  .orders-list .orders-table .table-style td:nth-of-type(3), .orders-list .orders-table .table-style td:nth-of-type(6) {
    width: 28%;
  }
  .orders-list .orders-table .table-style td:nth-of-type(2), .orders-list .orders-table .table-style td:nth-of-type(5), .orders-list .orders-table .table-style td:nth-of-type(8) {
    width: 37%;
  }
  .orders-list .orders-table .table-style td:nth-of-type(7), .orders-list .orders-table .table-style td:nth-of-type(8) {
    border-bottom: none;
  }
  .orders-list .orders-table .table-style td .td-in {
    width: calc(100% - 100px);
    text-align: left;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .orders-list .orders-table .table-style td .td-in .orderNo {
    justify-content: flex-start;
  }
  .orders-list .orders-table .table-style td .td-in .paywaybox .payway {
    max-width: 100%;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox {
    flex-direction: row;
    min-width: 75px;
    padding: 7px;
    width: fit-content;
    align-items: center;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a {
    text-align: center;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a + a {
    padding: 0 7px 0 0;
    margin-top: 0px;
    border-top: none;
  }
  .orders-list .orders-table .table-style td .td-in .linkbox a + a:before {
    display: inline-block;
  }
}
@media (max-width: 1199px) {
  .orders-list .orders-table .table-style td:nth-of-type(n) {
    width: 50%;
  }
  .orders-list .orders-table .table-style td:nth-of-type(9) {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .orders-list .orders-table .table-style td:nth-of-type(n) {
    width: 100%;
  }
  .orders-list .orders-table .table-style td:nth-of-type(7) {
    border-bottom: 1px solid #C4C4C4;
  }
}
.orders-list .return-address-head {
  display: flex;
  padding-bottom: 8px;
}
.orders-list .return-address-head .editortit {
  min-width: 125px;
}
.orders-list .service-askingbox {
  margin-top: 35px;
  border-top: none;
}
.orders-list .editform-row .form-label {
  width: 125px;
}
.orders-list .form-btn-row .form-btnUL {
  margin-top: 50px;
}
.orders-list .form-btn-row .form-btnUL .backto-brown-empty {
  max-width: 100%;
}
.orders-list .order-info .order-info-content {
  width: calc(100% - 170px);
}
.orders-list .order-info .order-info-content .customer-picgroup {
  margin-top: 15px;
}
.orders-list .order-info .order-info-content .customer-picgroup li + li {
  margin-top: 0;
}
.orders-list .cart-group .order-info:first-child {
  border-top: none;
}
@media (max-width: 992px) {
  .orders-list .service-askingbox {
    margin-top: 0px;
  }
  .orders-list .order-info {
    padding: 25px 20px;
  }
  .orders-list .order-info .order-info-title {
    width: 140px;
  }
  .orders-list .order-info .order-info-content {
    width: calc(100% - 140px);
  }
  .orders-list .order-info .order-info-content .tt {
    margin-right: 15px;
  }
}
@media (max-width: 700px) {
  .orders-list .order-info {
    flex-wrap: wrap;
  }
  .orders-list .order-info .order-info-content {
    width: 100%;
    margin-top: 10px;
  }
}
@media (max-width: 576px) {
  .orders-list .editform-row {
    margin-top: 0;
  }
  .orders-list .custom-select.bootstrap-select {
    height: 40px;
  }
  .orders-list .custom-select.bootstrap-select .dropdown-toggle {
    height: 40px;
  }
  .orders-list .service-askingbox .askingbox-row .asking-field .custom-select {
    margin-top: 10px;
  }
  .orders-list .form-btn-row .form-btnUL {
    margin-top: 40px;
    padding-bottom: 0;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .orders-list .form-btn-row .form-btnUL li {
    max-width: 50%;
  }
}

/*退貨紀錄*/
.orders-retrun-table .table-style td {
  padding: 0;
  margin: 0;
}
.orders-retrun-table .table-style th,
.orders-retrun-table .table-style td {
  text-align: center;
  width: 170px;
}
.orders-retrun-table .table-style th.return-date,
.orders-retrun-table .table-style td.return-date {
  min-width: 150px;
  padding-left: 25px;
}
.orders-retrun-table .table-style th.order-no,
.orders-retrun-table .table-style td.order-no {
  width: 190px;
  padding-left: 20px;
}
.orders-retrun-table .table-style th:nth-last-of-type(1),
.orders-retrun-table .table-style td:nth-last-of-type(1) {
  width: 205px;
  padding-right: 35px;
}
.orders-retrun-table .table-style .td-in {
  text-align: center;
  padding: 25px 10px;
}
.orders-retrun-table .table-style td[data-th=訂單編號] .td-in .orderNo {
  color: #000 !important;
}
@media (max-width: 1500px) {
  .orders-retrun-table .table-style th.return-date,
  .orders-retrun-table .table-style td.return-date {
    min-width: fit-content;
  }
  .orders-retrun-table .table-style th.return-date .td-in,
  .orders-retrun-table .table-style td.return-date .td-in {
    white-space: nowrap;
  }
  .orders-retrun-table .table-style th.order-no,
  .orders-retrun-table .table-style td.order-no {
    width: 170px;
    padding-left: 0;
  }
  .orders-retrun-table .table-style th:nth-last-of-type(1),
  .orders-retrun-table .table-style td:nth-last-of-type(1) {
    width: 170px;
    padding-right: 1em;
  }
  .orders-retrun-table .table-style .td-in {
    padding: 15px 5px;
  }
}
@media (max-width: 1350px) {
  .orders-retrun-table {
    border-top: none;
  }
  .orders-retrun-table .table-style th {
    display: none;
  }
  .orders-retrun-table .table-style td {
    height: auto;
  }
  .orders-retrun-table .table-style th.return-date,
  .orders-retrun-table .table-style td.return-date {
    padding-left: 5px;
  }
  .orders-retrun-table .table-style th:nth-last-of-type(1),
  .orders-retrun-table .table-style td:nth-last-of-type(1) {
    padding-right: 5px;
  }
  .orders-retrun-table .table-style th:nth-of-type(7), .orders-retrun-table .table-style th:nth-of-type(8),
  .orders-retrun-table .table-style td:nth-of-type(7),
  .orders-retrun-table .table-style td:nth-of-type(8) {
    border-bottom: none;
  }
  .orders-retrun-table .table-style tr {
    display: flex;
    flex-wrap: wrap;
  }
  .orders-retrun-table .table-style tr:nth-of-type(1) {
    display: none;
  }
  .orders-retrun-table .table-style tr + tr {
    margin-bottom: 10px;
  }
  .orders-retrun-table .table-style td {
    display: flex;
    padding-left: 0 !important;
  }
  .orders-retrun-table .table-style td:nth-of-type(odd) {
    width: 45%;
  }
  .orders-retrun-table .table-style td:nth-of-type(even) {
    width: 55%;
  }
  .orders-retrun-table .table-style .td-in {
    width: calc(100% - 90px);
    text-align: left;
    padding: 10px;
  }
}
@media (max-width: 900px) {
  .orders-retrun-table .table-style td {
    width: 100% !important;
  }
}

/*會員權益*/
.terms > div {
  padding: 5% 2em;
}
.terms > div h2 {
  margin-bottom: 2em;
}
.terms > div:nth-child(1) {
  background-color: #F3F3F3;
}
.terms > div:nth-child(2) ol {
  padding-left: 1em;
}
.terms > div:nth-child(2) ol li {
  color: #343434;
  line-height: 30px;
  letter-spacing: 0.03em;
  margin-bottom: 1em;
  font-size: 16px;
}
.terms > div:nth-child(2) ul {
  padding-left: 0;
  padding-top: 0.5em;
}
.terms > div:nth-child(2) ul li {
  margin-bottom: 0;
}
.terms > div:nth-child(2) ul li::marker {
  font-size: 0;
}
.terms .item-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.terms .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 180px;
  margin: 0 1em;
  padding-bottom: 1em;
}
.terms .item h3 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.3em;
  padding-top: 2em;
  position: relative;
}
.terms .item h3::before {
  content: "";
  background-color: #F5821F;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.terms .item p {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 30px;
  max-width: 160px;
  color: #343434;
}
@media (max-width: 991px) {
  .terms > div {
    padding: 4em 2em;
  }
  .terms .max1200 {
    max-width: 450px;
  }
}
@media (max-width: 575px) {
  .terms .item-group {
    justify-content: center;
  }
}

/*管理收件人*/
.address-table {
  width: 100%;
  margin-top: 1.2em;
}
.address-table tr:not(:nth-child(1)) {
  border-bottom: 1px solid #C4C4C4;
}
.address-table th {
  border-top: 1px solid #fff;
  font-weight: 500;
  text-align: center;
  background: #E5E5E5;
  color: #333;
  height: 50px;
}
.address-table th,
.address-table td {
  padding: 12px;
  letter-spacing: 0.03em;
}
.address-table th.name,
.address-table td.name {
  width: 18%;
  padding-left: 3%;
}
.address-table th.phonenum,
.address-table td.phonenum {
  width: 14%;
}
.address-table th.address .td-in,
.address-table td.address .td-in {
  text-align: left;
  padding-left: 10%;
}
.address-table th.setDefault,
.address-table td.setDefault {
  width: 16%;
  text-align: center;
}
.address-table th.setDefault .addresssetDefault-btn,
.address-table td.setDefault .addresssetDefault-btn {
  background-color: #D8D8D8;
  width: 100px;
  height: 35px;
  border-radius: 5px;
  color: #fff;
}
.address-table th.setDefault .addresssetDefault-btn[disabled],
.address-table td.setDefault .addresssetDefault-btn[disabled] {
  background: #343434;
}
.address-table th.setDefault .addresssetDefault-btn[disabled]:hover,
.address-table td.setDefault .addresssetDefault-btn[disabled]:hover {
  background: #343434;
}
.address-table th.setDefault .addresssetDefault-btn:hover,
.address-table td.setDefault .addresssetDefault-btn:hover {
  background: #F5821F;
}
.address-table th.status,
.address-table td.status {
  width: 14%;
  min-width: 100px !important;
  text-align: center;
}
.address-table th.status img,
.address-table th.status svg,
.address-table td.status img,
.address-table td.status svg {
  width: 18px;
}
.address-table .td-in {
  text-align: center;
  color: #333;
}
.address-table .manage {
  display: flex;
  justify-content: center;
  padding: 0;
}
.address-table .manage .setDefault {
  padding-right: 14px;
}
.address-table .manage .editbtns {
  height: 28px;
}
.address-table .manage .editbtns button {
  padding: 5px 8px;
}
.address-table .manage .editbtns button.edit-btn svg path,
.address-table .manage .editbtns button.edit-btn svg rect, .address-table .manage .editbtns button.delete-btn svg path,
.address-table .manage .editbtns button.delete-btn svg rect {
  transition: all 0.3s;
}
.address-table .manage .editbtns button.edit-btn:hover svg path,
.address-table .manage .editbtns button.edit-btn:hover svg rect, .address-table .manage .editbtns button.delete-btn:hover svg path,
.address-table .manage .editbtns button.delete-btn:hover svg rect {
  fill: #F5821F !important;
}
@media (max-width: 1155px) {
  .address-table th {
    display: none;
  }
  .address-table tr {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .address-table tr:nth-of-type(1) {
    border-bottom: none;
    padding: 0;
  }
  .address-table td {
    padding: 5px 10px;
  }
  .address-table td.name {
    min-width: 8em;
    padding: 5px 10px;
  }
  .address-table td.name .td-in {
    text-align: left;
  }
  .address-table td.phonenum {
    width: auto;
  }
  .address-table td.address {
    width: calc(60% - 0px);
  }
  .address-table td.address .td-in {
    padding-left: 0;
  }
  .address-table td.setDefault {
    width: auto;
  }
  .address-table td.status {
    width: auto;
    max-width: 8em;
  }
  .address-table .manage .setDefault {
    padding-right: 15px;
  }
  .address-table .manage .editbtns button {
    padding: 7.5px 10px;
  }
}
@media (max-width: 1019px) {
  .address-table td.address {
    width: 100%;
  }
}

@font-face {
  font-family: "Gothic";
  src: url("./Century-Gothic-Bold.ttf");
}
.noscroll,
.noscroll body {
  overflow: hidden;
}

.noscroll body {
  position: relative;
}