@charset "UTF-8";
/* CSS Document */
.articleTitle {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.mainArea.index {
  padding-bottom: 0;
  background-color: #f4f4f4;
}
@media (min-width: 1024px) {
  .mainArea.index .pcHide {
    display: none;
  }
}
.mainArea.index .wrap {
  max-width: 1640px;
}
.mainArea.index .contentBox {
  display: flex;
  flex-wrap: wrap;
}
.mainArea.index .leftBox {
  padding-top: 60px;
  padding-left: 40px;
  padding-right: 65px;
  width: 365px;
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
}
@media (max-width: 1023px) {
  .mainArea.index .leftBox {
    padding: 0 20px;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .mainArea.index .leftBox {
    padding-top: 20px;
  }
}
.mainArea.index .rightBox {
  width: calc(100% - 365px);
  border-right: 1px solid #dcdcdc;
}
.mainArea.index .rightBox .bread {
  border-bottom: 1px solid #dcdcdc;
}
@media (max-width: 1023px) {
  .mainArea.index .rightBox .bread {
    display: none;
  }
}
.mainArea.index .rightBox .bread .wrap {
  justify-content: flex-start;
}
@media (max-width: 1023px) {
  .mainArea.index .rightBox {
    border-left: 1px solid #dcdcdc;
    width: 100%;
  }
}
.mainArea.ins {
  padding-bottom: 0;
}
.mainArea.ins .bread {
  border: none;
}
.mainArea.ins .bread .wrap {
  padding: 0;
}

.titleBox {
  margin-bottom: 25px;
}
@media (max-width: 1023px) {
  .titleBox {
    margin-bottom: 15px;
  }
}
.titleBox .title {
  font-size: 25px;
  font-weight: 700;
  color: #2f2f2f;
  letter-spacing: 2px;
}
@media (max-width: 1023px) {
  .titleBox .title {
    font-size: 18px;
  }
}
.titleBox .subTitle {
  font-size: 50px;
  font-weight: 600;
  color: #2f2f2f;
  line-height: 1.2;
}
@media (max-width: 1023px) {
  .titleBox .subTitle {
    font-size: 35px;
  }
}

.classNote {
  padding-bottom: 10px;
  font-size: 15px;
  color: #222;
  text-align: center;
  line-height: 1.8;
}
.classNote img {
  max-width: 100%;
  backface-visibility: hidden;
}

.itemList {
  display: flex;
  flex-wrap: wrap;
}
.itemList li {
  width: 33.33%;
  padding: 0;
  border-bottom: 1px solid #dcdcdc;
}
@media (max-width: 767px) {
  .itemList li {
    width: 50%;
  }
}
@media (max-width: 540px) {
  .itemList li {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .itemList li:nth-of-type(3n+1) {
    border-right: 1px solid #dcdcdc;
  }
  .itemList li:nth-of-type(3n+2) {
    border-right: 1px solid #dcdcdc;
  }
}
@media (min-width: 541px) and (max-width: 767px) {
  .itemList li:nth-of-type(2n+1) {
    border-right: 1px solid #dcdcdc;
  }
}
.itemList .item {
  padding: 30px 30px 30px;
}
@media (max-width: 1180px) {
  .itemList .item {
    padding: 10px 20px;
  }
}
.itemList .item:hover .btnBox {
  pointer-events: auto;
  opacity: 1;
}
.itemList .Img {
  position: relative;
  padding-top: 65px;
  padding-bottom: 50px;
}
@media (max-width: 1180px) {
  .itemList .Img {
    padding-top: 30px;
    padding-bottom: 10px;
  }
}
.itemList .Img a {
  display: block;
  overflow: hidden;
}
.itemList .Img img {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.itemList .no {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  font-weight: 600;
  color: #4f4f4f;
}
.itemList .btnBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  pointer-events: none;
  opacity: 0;
}
@media (max-width: 1180px) {
  .itemList .btnBox {
    width: auto;
    margin: 0 -8px;
    margin-top: 20px;
    position: relative;
    pointer-events: auto;
    opacity: 1;
  }
}
.itemList .btnBox a {
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 160px;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #9b9a9a;
  letter-spacing: 1px;
}
@media (max-width: 1180px) {
  .itemList .btnBox a {
    font-size: 14px;
    height: 40px;
  }
}
.itemList .btnBox a:hover {
  background-color: #b13028;
}
.itemList .Txt {
  font-size: 15px;
  font-weight: 400;
  color: #4f4f4f;
  line-height: 1.5;
}
.itemList .Txt .title {
  margin-bottom: 10px;
}
.itemList .Txt .title a {
  font-size: 24px;
  font-weight: 600;
  font-family: "Oswald", "Noto Sans TC", "微軟正黑體", sans-serif;
  color: #3d3d3d;
}
.itemList .Txt .title a:hover {
  color: #b13028;
}
.itemList .Txt p {
  height: 45px;
  overflow: hidden;
}
.itemList .colorBox {
  margin-top: 15px;
}
.itemList .colorBox a {
  width: 20px;
  height: 20px;
}

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

.marqueeBox {
  text-align: center;
  background-color: #b13028;
}
.marqueeBox a {
  display: inline-block;
  padding: 8px;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.5px;
}

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

.productIntro {
  display: flex;
}
@media (max-width: 767px) {
  .productIntro {
    flex-direction: column;
  }
}
.productIntro .albumBox {
  padding: 150px 40px 70px;
  width: 50%;
}
@media (max-width: 767px) {
  .productIntro .albumBox {
    width: 100%;
    padding: 30px;
  }
}
@media (max-width: 640px) {
  .productIntro .albumBox {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.productIntro .albumBox img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.productIntro .albumBox .ins_albumBox {
  position: relative;
  max-width: 500px;
  padding: 0 90px;
  margin: 70px auto 0;
}
@media (max-width: 1180px) {
  .productIntro .albumBox .ins_albumBox {
    padding: 0 60px;
  }
}
@media (max-width: 767px) {
  .productIntro .albumBox .ins_albumBox {
    margin-top: 30px;
  }
}
@media (max-width: 640px) {
  .productIntro .albumBox .ins_albumBox {
    padding: 0 40px;
  }
}
.productIntro .albumBox .side_album {
  margin: 0 -10px;
}
@media (max-width: 640px) {
  .productIntro .albumBox .side_album {
    margin: 0 -3px;
  }
}
.productIntro .albumBox .side_album li {
  padding: 0 10px;
}
@media (max-width: 640px) {
  .productIntro .albumBox .side_album li {
    padding: 0 3px;
  }
}
.productIntro .albumBox .side_album img {
  display: block;
  width: 100%;
  backface-visibility: hidden;
}
.productIntro .albumBox .side_album a {
  display: block;
}
.productIntro .albumBox .arrowBox .prev, .productIntro .albumBox .arrowBox .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
}
@media (max-width: 640px) {
  .productIntro .albumBox .arrowBox .prev, .productIntro .albumBox .arrowBox .next {
    width: 40px;
  }
}
.productIntro .albumBox .arrowBox .prev:hover::before, .productIntro .albumBox .arrowBox .next:hover::before {
  border-color: #b13028;
}
.productIntro .albumBox .arrowBox .prev::before, .productIntro .albumBox .arrowBox .next::before {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  transition: all 0.4s ease;
}
.productIntro .albumBox .arrowBox .prev {
  left: 0;
}
.productIntro .albumBox .arrowBox .prev::before {
  top: 50%;
  left: 20px;
  border-top: 1px solid #828282;
  border-left: 1px solid #828282;
  transform-origin: left top;
  transform: rotate(-45deg);
}
@media (max-width: 640px) {
  .productIntro .albumBox .arrowBox .prev::before {
    left: 10px;
  }
}
.productIntro .albumBox .arrowBox .next {
  right: 0;
}
.productIntro .albumBox .arrowBox .next::before {
  top: 50%;
  right: 20px;
  border-top: 1px solid #828282;
  border-right: 1px solid #828282;
  transform-origin: right top;
  transform: rotate(45deg);
}
@media (max-width: 640px) {
  .productIntro .albumBox .arrowBox .next::before {
    right: 10px;
  }
}
.productIntro .introBox {
  padding-left: 130px;
  padding-right: 20px;
  width: 100%;
  max-width: 720px;
}
@media (max-width: 1180px) {
  .productIntro .introBox {
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .productIntro .introBox {
    padding-top: 30px;
    flex: auto;
  }
}
.productIntro .introBox .articleTitle {
  margin-bottom: 25px;
  font-size: 50px;
  font-weight: 600;
  font-family: "Oswald", "Noto Sans TC", "微軟正黑體", sans-serif;
}
@media (max-width: 1180px) {
  .productIntro .introBox .articleTitle {
    font-size: 34px;
  }
}
.productIntro .model {
  font-size: 15px;
  font-weight: 600;
  font-family: "Oswald", "Noto Sans TC", "微軟正黑體", sans-serif;
  color: #686868;
}
.productIntro .Txt {
  padding-bottom: 30px;
  font-size: 15px;
  line-height: 1.8;
}
.productIntro .spec {
  padding: 25px 0;
  border-top: 1px solid #e1e1e1;
  font-size: 18px;
  font-weight: 500;
  color: #303030;
}

.infoBox {
  padding: 15px 0;
  border-top: 1px solid #e1e1e1;
  width: 100%;
}
.infoBox .top {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.infoBox .title {
  font-size: 18px;
  font-weight: 700;
  color: #2f2f2f;
}

/* 「查看尺寸表」在規格二區塊的標題列（select_package.php），不在 .orderTable 裡。
   svg 那條特別重要：inline <svg> 沒有尺寸時瀏覽器會畫成 300x150。 */
.sizeBtn a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #858585;
}
.sizeBtn a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #858585;
}
.sizeBtn svg {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}

/* 列表卡片的規格組合預覽（database/general/demo_color.php），唯讀。
   內頁與燈箱可以點選的是 .packageColorBox / .packageSizeBox，不受這段影響。 */
.colorBox.demoColorBox {
  flex-wrap: nowrap;
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
  gap: 14px;
}
.colorBox.demoColorBox .circle {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}
.itemList .colorBox.demoColorBox a {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  width: auto;
  height: auto;
  min-width: 0;
}
.colorBox.demoColorBox a::before {
  display: none;
}
.colorBox.demoColorBox img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.colorBox.demoColorBox .colorName {
  position: static;
  transform: none;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  opacity: 1;
}
.colorBox.demoColorBox .colorName::before {
  display: none;
}

/* 規格選擇器（database/general/select_package.php），內頁與洽詢燈箱共用。
   規格一、規格二各一個區塊。 */
.colorBox.packageColorBox {
  margin: 0;
  gap: 8px;
}
.colorBox.packageColorBox .circle {
  flex: 0 0 auto;
  max-width: 100%;
}
.colorBox.packageColorBox .circle.noPic a {
  padding-left: 12px;
}
.colorBox.packageColorBox a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px 4px 4px;
  width: auto;
  height: auto;
  min-height: 36px;
  border: 1px solid #dedede;
  border-radius: 999px;
}
.colorBox.packageColorBox a::before {
  display: none;
}
.colorBox.packageColorBox a:hover {
  border-color: #b5b5b5;
}
.colorBox.packageColorBox a.current {
  border-color: #b13028;
}
.colorBox.packageColorBox a.current .colorName {
  font-weight: 700;
  color: #b13028;
}
.colorBox.packageColorBox img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}
.colorBox.packageColorBox .colorName {
  position: static;
  transform: none;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  pointer-events: auto;
  opacity: 1;
}
.colorBox.packageColorBox .colorName::before {
  display: none;
}

.packageSizeBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.packageSizeBox a {
  padding: 7px 10px;
  min-width: 68px;
  border: 1px solid #dedede;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #4f4f4f;
  text-align: center;
  white-space: nowrap;
}
.packageSizeBox a:hover {
  border-color: #b5b5b5;
}
.packageSizeBox a.current {
  border-color: #b13028;
  font-weight: 700;
  color: #b13028;
}
.packageSizeBox a.disabled {
  border-color: #ececec;
  color: #c4c4c4;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.code {
  /*商品編號*/
  display: block;
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.share {
  clear: both;
  padding: 30px 0;
}
.share b {
  display: inline-block;
  font-weight: 400;
  font-size: 13px;
  color: #666;
}
.share a {
  display: inline-block;
  width: 25px;
  font-size: 18px;
  color: #666;
  text-align: center;
}
.share a:hover {
  opacity: 0.8;
}
.share .line svg {
  width: 17px;
  height: 16px;
}

/*訂購規格區*/
.orderTable {
  padding-top: 10px;
}
.orderTable th {
  padding: 10px;
  font-size: 15px;
  color: #6c6c6c;
}
.orderTable td {
  padding: 10px;
  color: #6c6c6c;
}
.orderTable select {
  cursor: pointer;
  padding: 4px;
}
.orderTable tr:nth-child(odd) {
  background-color: #f1f1f1;
}
.orderTable b {
  font-weight: 400;
  font-size: 15px;
  color: #6c6c6c;
}
.orderTable .flexBox {
  border-top: 1px solid #e1e1e1;
  display: flex;
  align-items: flex-start;
  padding-bottom: 15px;
}
@media (max-width: 480px) {
  .orderTable .flexBox {
    display: block;
  }
}
.orderTable .flexBox .infoBox {
  border: none;
}
.orderTable .selectOutBox {
  padding-right: 15px;
  width: 50%;
}
@media (max-width: 480px) {
  .orderTable .selectOutBox {
    padding-right: 0;
    width: 100%;
  }
}
.orderTable .selectBox {
  position: relative;
}
.orderTable .selectBox .main {
  position: relative;
  width: 100%;
  height: 45px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: "Oswald", "Noto Sans TC", "微軟正黑體", sans-serif;
  color: #2f2f2f;
  letter-spacing: 0.5px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid #dcdcdc;
  background-color: #fff;
}
.orderTable .selectBox .main::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5.5px 0 5.5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.orderTable .selectBox select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.orderTable .countBox {
  width: 100%;
  align-items: center;
  display: flex;
}
@media (max-width: 480px) {
  .orderTable .countBox {
    padding-left: 0;
    width: 100%;
  }
}
.orderTable .countBox b {
  margin-right: 20px;
  font-size: 14px;
  color: #434343;
  letter-spacing: 0.1em;
}
.orderTable .countBox .countItemBox {
  display: flex;
  width: 100%;
  height: 45px;
  border: 1px solid #dcdcdc;
}
.orderTable .countBox .countItemBox .countBtn {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
}
.orderTable .countBox .countItemBox .count {
  width: calc(100% - 90px);
  height: 45px;
  line-height: 45px;
  border-top: none;
  border-bottom: none;
  font-size: 16px;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  color: #2f2f2f;
  text-align: center;
  letter-spacing: 0.1em;
}
.orderTable .countBox .countItemBox .countLess {
  border-right: 1px solid #dcdcdc;
}
.orderTable .countBox .countItemBox .countLess::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -1px;
  width: 12px;
  height: 2px;
  background-color: #7b7b7b;
}
.orderTable .countBox .countItemBox .countAdd {
  border-left: 1px solid #dcdcdc;
}
.orderTable .countBox .countItemBox .countAdd::before, .orderTable .countBox .countItemBox .countAdd:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #7b7b7b;
}
.orderTable .countBox .countItemBox .countAdd::before {
  margin-left: -6px;
  margin-top: -1px;
  width: 12px;
  height: 2px;
}
.orderTable .countBox .countItemBox .countAdd::after {
  margin-left: -1px;
  margin-top: -6px;
  width: 2px;
  height: 12px;
}
.orderTable .btn {
  align-items: center;
  display: flex;
  padding-top: 20px;
  text-align: center;
  margin: 0 -15px;
}
@media (max-width: 480px) {
  .orderTable .btn {
    margin: 0;
    flex-direction: column;
  }
}
.orderTable .btn a {
  flex: 1;
  border: 1px solid #9b9a9a;
  font-size: 16px;
  padding: 15px 15px;
  margin: 5px 15px;
  letter-spacing: 3px;
  color: #fff;
  background-color: #9b9a9a;
}
@media (max-width: 480px) {
  .orderTable .btn a {
    width: 100%;
  }
}
.orderTable .btn a + a {
  border-color: #b13028;
  background-color: #b13028;
}
.orderTable .btn a + a:hover {
  color: #b13028;
}
.orderTable .btn a:hover {
  background-color: #fff;
  color: #2f2f2f;
}

.priceBox {
  border-top: 1px solid #e1e1e1;
  padding: 15px 0;
  display: flex;
  align-items: flex-end;
}
.priceBox .priceItem {
  line-height: 1.2;
  letter-spacing: 0.5px;
}
.priceBox .priceItemOriginal, .priceBox .priceItemSelling, .priceBox .priceItemDefault {
  font-size: 30px;
  font-weight: 600;
  font-family: "Oswald", "Noto Sans TC", "微軟正黑體", sans-serif;
  padding: 5px 0;
}
.priceBox .priceItemOriginal, .priceBox .priceItemSelling {
  display: none;
}
.priceBox .priceItemOriginal {
  margin-left: 25px;
  position: relative;
  font-size: 19px;
  font-weight: 500;
  color: #a5a5a5;
  align-items: center;
}
.priceBox .priceItemOriginal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #a5a5a5;
  z-index: 1;
}
.priceBox .priceItemOriginal .unitName {
  display: inline-block;
  font-size: 16px;
  transform: translateY(-2px);
}
.priceBox .priceItemSelling {
  color: #ca0000;
}
.priceBox .priceItem .up {
  font-size: 16px;
  font-weight: 500;
}

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

.tabBox {
  background-color: #f8f8f8;
  border-bottom: 1px solid #dcdcdc;
}

.tab {
  margin-top: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.tabContent {
  padding: 70px 20px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.sideProductArea {
  background-color: #f4f4f4;
}
.sideProductArea .wrap {
  max-width: 1400px;
  padding: 0;
}
.sideProductArea .side_productBox {
  position: relative;
  padding: 0 100px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
}
@media (max-width: 767px) {
  .sideProductArea .side_productBox {
    padding: 0 60px;
  }
}
@media (max-width: 480px) {
  .sideProductArea .side_productBox {
    padding: 0 40px;
  }
}
.sideProductArea .itemList li {
  border: none;
  border-right: 1px solid #dcdcdc;
}
.sideProductArea .backBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background-color: #979797;
}
.sideProductArea .backBtn a:hover {
  background-color: #b13028;
}
.sideProductArea .backBtn svg {
  margin-right: 15px;
  width: 13px;
  height: 12px;
  transform: rotate(180deg);
}
.sideProductArea .arrowBox .prev,
.sideProductArea .arrowBox .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  transition: all 0.4s ease;
}
@media (max-width: 767px) {
  .sideProductArea .arrowBox .prev,
  .sideProductArea .arrowBox .next {
    width: 60px;
  }
}
@media (max-width: 480px) {
  .sideProductArea .arrowBox .prev,
  .sideProductArea .arrowBox .next {
    width: 40px;
  }
}
.sideProductArea .arrowBox .prev:hover,
.sideProductArea .arrowBox .next:hover {
  background-color: #b13028;
}
.sideProductArea .arrowBox .prev:hover::before,
.sideProductArea .arrowBox .next:hover::before {
  border-color: #fff;
}
.sideProductArea .arrowBox .prev::before,
.sideProductArea .arrowBox .next::before {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  transition: all 0.4s ease;
}
.sideProductArea .arrowBox .prev {
  left: 0;
  border-right: 1px solid #dcdcdc;
}
.sideProductArea .arrowBox .prev::before {
  top: 50%;
  left: 40px;
  border-top: 1px solid #828282;
  border-left: 1px solid #828282;
  transform-origin: left top;
  transform: rotate(-45deg);
}
@media (max-width: 767px) {
  .sideProductArea .arrowBox .prev::before {
    left: 20px;
  }
}
@media (max-width: 480px) {
  .sideProductArea .arrowBox .prev::before {
    left: 10px;
  }
}
.sideProductArea .arrowBox .next {
  right: 0;
  border-left: 1px solid #dcdcdc;
}
.sideProductArea .arrowBox .next::before {
  top: 50%;
  right: 40px;
  border-top: 1px solid #828282;
  border-right: 1px solid #828282;
  transform-origin: right top;
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .sideProductArea .arrowBox .next::before {
    right: 20px;
  }
}
@media (max-width: 480px) {
  .sideProductArea .arrowBox .next::before {
    right: 10px;
  }
}

.sideProductLightArea .moduleWrap {
  max-width: 680px;
}
.sideProductLightArea .moduleContent {
  padding-left: 60px;
  padding-right: 60px;
}
.sideProductLightArea .productIntro .introBox {
  padding: 0;
  width: 64%;
}
.sideProductLightArea .productIntro .introBox .articleTitle {
  font-size: 24px;
  margin: 0;
  padding: 0;
}
.sideProductLightArea .productIntro .albumBox {
  padding: 0;
  width: 36%;
  background-color: transparent;
}
.sideProductLightArea .productIntro .albumBox .ins_albumBox {
  display: none;
}
.sideProductLightArea .priceBox {
  border-top: none;
  border-bottom: 1px solid #e1e1e1;
}
.sideProductLightArea .orderTable .btn {
  border-top: 1px solid #dcdcdc;
}