.insIntroBox .introBox .colorBox .colorList button, .insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots li button, .wattageBox .wattageTitle, .compareBox .tableHeadItem .deleteBtn, .compareBox .tableHeadItem .ImgWrap img, .catalogList .item .ImgBox .Img img, .catalogList .item .ImgBox, .catalogList .item, .catalogBox, .calculatorResult .resultHeader .resultArrow, .calculatorResult .resultHeader, .filterBox .rangeBox {
  transition: all 0.5s ease-in-out;
}

.mainArea {
  padding: 0;
}
.mainArea.insPage {
  padding-bottom: 40px;
}
@media (max-width: 768px) {
  .mainArea.insPage {
    padding-top: 40px;
  }
}
.mainArea.insPage .contentBox {
  padding: 0;
}

.contentBox {
  padding-top: 70px;
}
@media (max-width: 1180px) {
  .contentBox {
    padding-top: 50px;
  }
}
@media (max-width: 480px) {
  .contentBox {
    padding-top: 40px;
  }
}
.contentBox.compare {
  padding: 0;
}
.contentBox .wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 1180px) {
  .contentBox .wrap {
    flex-direction: column;
  }
}
.contentBox .wrap .leftBox {
  width: 100%;
  max-width: 375px;
  flex-shrink: 0;
  padding-top: 40px;
}
@media (max-width: 1180px) {
  .contentBox .wrap .leftBox {
    max-width: 100%;
    padding: 0;
  }
}
.contentBox .wrap .rightBox {
  width: 100%;
  max-width: 1230px;
}
@media (max-width: 1180px) {
  .contentBox .wrap .rightBox {
    max-width: 100%;
  }
}

.outerTitle {
  text-align: center;
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 20px;
  margin-bottom: 30px;
  color: #000000;
  font-size: 35px;
  font-weight: 600;
  line-height: calc(35 / 35 * 1.5);
  letter-spacing: calc(35 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.filterTitle {
  margin-bottom: 20px;
  color: #000000;
  font-size: 22px;
  font-weight: 500;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.classFilter {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 25px;
}
@media (max-width: 1180px) {
  .classFilter .filterTitle {
    text-align: center;
  }
}
@media (max-width: 1180px) {
  .classFilter ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }
}
.classFilter ul li {
  margin-bottom: 15px;
}
@media (max-width: 1180px) {
  .classFilter ul li {
    margin: 0;
  }
}
.classFilter ul li:last-child {
  margin: 0;
}
.classFilter ul li a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.classFilter ul li a.current i::before {
  opacity: 1;
}
.classFilter ul li a i {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #e5e5e5;
  border-radius: 50%;
  position: relative;
}
.classFilter ul li a i::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 10px;
  height: 10px;
  background: #c48ccd;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.classFilter ul li a span {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.filterBox {
  padding-top: 25px;
}
@media (max-width: 1180px) {
  .filterBox {
    display: none;
  }
}
.filterBox > ul > li {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.filterBox > ul > li:nth-last-of-type(1) {
  border: none;
  padding: 0;
  margin: 0;
}
.filterBox .filterList {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.filterBox .filterList li {
  width: calc(50% - 7.5px);
}
.filterBox .filterList li.full {
  width: 100%;
}
.filterBox .filterList li a {
  display: flex;
  align-items: center;
  gap: 15px;
}
.filterBox .filterList li a.selected i::before {
  opacity: 1;
}
.filterBox .filterList li a i {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #e5e5e5;
  border-radius: 50%;
  position: relative;
}
.filterBox .filterList li a i::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 10px;
  height: 10px;
  background: #c48ccd;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.filterBox .filterList li a span {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.filterBox .rangeBox {
  background-color: #f7f7f7;
  padding: 20px;
}
@media (min-width: 1181px) {
  .filterBox .rangeBox:hover {
    background-color: #e8e8e8;
  }
}
.filterBox .rangeBox label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  margin-bottom: 20px;
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 20 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.filterBox .rangeBox label.selected {
  color: #8a199c;
}
.filterBox .rangeBox label.selected i::before {
  opacity: 1;
}
.filterBox .rangeBox label input {
  display: none;
}
.filterBox .rangeBox label i {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #000000;
  border-radius: 50%;
  position: relative;
}
.filterBox .rangeBox label i::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 10px;
  height: 10px;
  background: #c48ccd;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.filterBox .rangeBox .rangeBar {
  padding: 0 5px;
}
.filterBox .rangeBox .rangeBar.selected .noUi-connects {
  background-color: #8a199c;
}
.filterBox .rangeBox .rangeBar.selected .noUi-connect {
  background-color: #ffffff;
  cursor: pointer;
}
.filterBox .rangeBox .noUi-horizontal {
  height: 4px;
}
.filterBox .rangeBox .noUi-horizontal .noUi-handle {
  width: 12px;
  height: 12px;
  background-color: #8a199c;
  border: 1px solid #ffffff;
  border-radius: 50%;
  box-shadow: none;
  top: -4px;
  right: -6px;
  cursor: pointer;
}
.filterBox .rangeBox .noUi-horizontal .noUi-handle::before, .filterBox .rangeBox .noUi-horizontal .noUi-handle::after {
  display: none;
}
.filterBox .rangeBox .noUi-target {
  border-radius: 0;
  border: none;
}
.filterBox .rangeBox .noUi-tooltip {
  display: none;
  font-size: 12px;
  border: none;
  right: auto;
  left: 120%;
  padding: 2px 3px;
}
.filterBox .rangeBox .noUi-active .noUi-tooltip {
  display: block;
}
.filterBox .rangeBox.noUi-target {
  background-color: #d2d2d2;
  border: none;
}
.filterBox .rangeBox .noUi-connects {
  cursor: pointer;
}
.filterBox .rangeBox .noUi-connect {
  background-color: #8a199c;
}
.filterBox .rangeBox .rangeInput {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.filterBox .rangeBox .rangeInput input {
  padding: 5px;
  width: calc(50% - 10px);
  border: 1px solid #bbb;
}

.filterFuncList {
  margin-top: 30px;
}
@media (max-width: 1180px) {
  .filterFuncList:not(.pop) {
    display: none;
  }
}

.filter.pop {
  display: none;
  max-width: 200px;
  margin: 0 auto;
}
@media (max-width: 1180px) {
  .filter.pop {
    display: block;
  }
}
.filter.pop .btnBox .btn.bgMain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.moduleBoxFilter .innerFilter {
  max-height: 55vh;
  position: relative;
  overflow-y: auto;
}
.moduleBoxFilter .innerFilter::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.moduleBoxFilter .innerFilter::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.moduleBoxFilter .innerFilter::-webkit-scrollbar-thumb {
  background: #8a199c;
}
.moduleBoxFilter .innerFilter .filterTitle:not(:first-child) {
  margin-top: 20px;
}
.moduleBoxFilter .innerFilter .filterList {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .moduleBoxFilter .innerFilter .filterList {
    padding: 0;
  }
}
.moduleBoxFilter .innerFilter .filterList .filterItem {
  width: 33.3333333333%;
}
@media (max-width: 640px) {
  .moduleBoxFilter .innerFilter .filterList .filterItem {
    width: 50%;
  }
}
@media (max-width: 480px) {
  .moduleBoxFilter .innerFilter .filterList .filterItem {
    width: 100%;
  }
}
.moduleBoxFilter .innerFilter .filterList .filterItem a {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  padding: 10px 0;
}
.moduleBoxFilter .innerFilter .filterList .filterItem a.selected i::before {
  opacity: 1;
}
.moduleBoxFilter .innerFilter .filterList .filterItem a i {
  display: block;
  width: 20px;
  height: 20px;
  border: solid 1px #e5e5e5;
  border-radius: 50%;
  position: relative;
}
.moduleBoxFilter .innerFilter .filterList .filterItem a i::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 10px;
  height: 10px;
  background: #c48ccd;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.moduleBoxFilter .innerFilter .filterList .filterItem a span {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.moduleBoxFilter .filterFuncList {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.sideClassList {
  width: 100%;
}
.sideClassList .rangeBox {
  background-color: #fff;
}
@media (min-width: 1181px) {
  .sideClassList .rangeBox:hover {
    background-color: #fff;
  }
}

.noData {
  color: #2a2727;
}

.calculatorResult {
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  overflow: hidden;
  margin-bottom: 30px;
}
.calculatorResult .resultHeader {
  background: #f7f7f7;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
@media (min-width: 1181px) {
  .calculatorResult .resultHeader:hover {
    background: rgb(234.25, 234.25, 234.25);
  }
}
@media (max-width: 480px) {
  .calculatorResult .resultHeader {
    padding: 15px 20px;
  }
}
.calculatorResult .resultHeader .resultHeaderTitle {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 480px) {
  .calculatorResult .resultHeader .resultHeaderTitle {
    font-size: 18px;
  }
}
.calculatorResult .resultHeader .resultArrow {
  width: 12px;
  height: 12px;
  border-right: solid 2px #000000;
  border-bottom: solid 2px #000000;
  transform: rotate(-135deg);
}
.calculatorResult .resultHeader.closed .resultArrow {
  transform: rotate(45deg);
}
.calculatorResult .resultBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.calculatorResult .resultBody.open {
  max-height: 1000px;
}
.calculatorResult .resultSection {
  border-bottom: 1px solid #e5e5e5;
  padding: 20px 30px;
}
@media (max-width: 480px) {
  .calculatorResult .resultSection {
    padding: 15px 20px;
  }
}
.calculatorResult .resultSectionTitle {
  margin-bottom: 15px;
  color: #c48ccd;
  font-size: 18px;
  font-weight: 600;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorResult .resultGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.calculatorResult .resultGrid .resultGridItem {
  width: calc(50% - 10px);
}
@media (max-width: 480px) {
  .calculatorResult .resultGrid .resultGridItem {
    width: 100%;
  }
}
.calculatorResult .resultGrid.col3 .resultGridItem {
  width: calc(33.3333333333% - 14px);
}
@media (max-width: 1180px) {
  .calculatorResult .resultGrid.col3 .resultGridItem {
    width: calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  .calculatorResult .resultGrid.col3 .resultGridItem {
    width: 100%;
  }
}
.calculatorResult .resultLabel {
  color: #888;
  font-size: 14px;
  font-weight: 400;
  line-height: calc(14 / 14 * 1.5);
  letter-spacing: calc(14 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorResult .resultValue {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: calc(16 / 16 * 1.5);
  letter-spacing: calc(16 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorResult .resultSub {
  margin-top: 2px;
  color: #2a2727;
  font-size: 14px;
  font-weight: 400;
  line-height: calc(14 / 14 * 1.5);
  letter-spacing: calc(14 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorResult .resultSub strong {
  color: #c48ccd;
  font-weight: 600;
}
.calculatorResult .resultFooter {
  padding: 20px 30px;
  text-align: center;
}
@media (max-width: 480px) {
  .calculatorResult .resultFooter {
    padding: 15px 20px;
  }
}
.calculatorResult .resultFooterItem {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.calculatorResult .resultFooterItem + .resultFooterItem {
  margin-top: 8px;
}
.calculatorResult .resultFooterLabel {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorResult .resultFooterValue {
  color: #c48ccd;
  font-size: 20px;
  font-weight: 600;
  line-height: calc(20 / 20 * 1.5);
  letter-spacing: calc(20 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.catalogBox.hide {
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s;
  transform: translateY(-5px);
}

.catalogList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.catalogList .catalogItem {
  width: 33.3333333333%;
  padding: 0 10px 30px;
}
@media (min-width: 1181px) and (max-width: 1535px) {
  .catalogList .catalogItem {
    width: 50%;
  }
}
@media (max-width: 940px) {
  .catalogList .catalogItem {
    width: 50%;
  }
}
@media (max-width: 640px) {
  .catalogList .catalogItem {
    width: 100%;
  }
}
.catalogList .item {
  height: 100%;
  max-width: 400px;
  background: #ffffff;
  border: solid 1px #e5e5e5;
  border-radius: 40px;
  padding: 15px 15px 40px;
  margin: 0 auto;
}
@media (min-width: 1181px) {
  .catalogList .item:hover {
    border-color: #8a199c;
  }
}
.catalogList .item .ImgBox {
  background: #f5f5f5;
  border-radius: 30px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
}
@media (min-width: 1181px) {
  .catalogList .item .ImgBox:hover {
    background: #d3d7df;
  }
  .catalogList .item .ImgBox:hover .Img img {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
.catalogList .item .ImgBox .Img {
  width: 100%;
  max-width: 250px;
  position: static;
}
.catalogList .item .ImgBox .Img a {
  display: block;
}
.catalogList .item .ImgBox .Img a::before {
  content: "";
  position: absolute;
  pointer-events: auto;
  transition: 0.5s all;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.catalogList .item .ImgBox .Img img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.catalogList .item .Txt {
  margin-top: 25px;
  text-align: center;
}
.catalogList .item .Txt .title {
  color: #000000;
  font-size: 24px;
  font-weight: 500;
  line-height: calc(24 / 24 * 1.5);
  letter-spacing: calc(24 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (min-width: 1181px) {
  .catalogList .item .Txt .title:hover {
    color: #8a199c;
  }
}
@media (max-width: 1360px) {
  .catalogList .item .Txt .title {
    font-size: 18px;
  }
}
.catalogList .item .Txt .title a {
  color: currentColor;
}
.catalogList .item .Txt .btnBox {
  margin-top: 25px;
}
.catalogList .item .Txt .btnBox .btnContent {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.catalogList .item .Txt .btnBox .btnContent li {
  width: calc(25% - 7.5px);
  height: 30px;
}
@media (max-width: 1360px) {
  .catalogList .item .Txt .btnBox .btnContent li {
    width: calc(33.3333333333% - 6.6666666667px);
  }
}
.catalogList .item .Txt .btnBox .btnContent li h3 {
  height: 100%;
}
.catalogList .item .Txt .btnBox .btnContent li a {
  width: 100%;
  height: 100%;
  background: #f0f3f7;
  border-radius: 99px;
  display: grid;
  place-items: center;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: calc(16 / 16 * 1.5);
  letter-spacing: calc(16 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (min-width: 1181px) {
  .catalogList .item .Txt .btnBox .btnContent li a:hover {
    background: #c48ccd;
    color: #ffffff;
  }
}
.catalogList .item .Txt .btnBox .btnContent li a.current {
  background: #c48ccd;
  color: #ffffff;
}
.catalogList .item .Txt .btnBox .btn.compare,
.catalogList .item .Txt .btnBox .btn.preOrder {
  margin-top: 25px;
  color: #000000;
  font-size: 17px;
  font-weight: 400;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (min-width: 1181px) {
  .catalogList .item .Txt .btnBox .btn.compare:hover,
  .catalogList .item .Txt .btnBox .btn.preOrder:hover {
    color: #8a199c;
  }
}

.compareBox {
  width: 100%;
  position: relative;
}
.compareBox .tableWrap {
  width: 100%;
  overflow: auto;
}
.compareBox .tableWrap.dragscroll {
  cursor: move;
}
.compareBox .tableWrap.dragscroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.compareBox .tableWrap.dragscroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.compareBox .tableWrap.dragscroll::-webkit-scrollbar-thumb {
  background: #8a199c;
}
.compareBox .compareTable {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  position: relative;
  color: #2a2727;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 768px) {
  .compareBox .compareTable {
    font-size: 15px;
  }
}
.compareBox [scope=row] {
  width: 250px;
  min-width: 250px;
  text-align: left;
  vertical-align: middle;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.compareBox th,
.compareBox td {
  width: 50%;
  vertical-align: middle;
  padding: 0 10px;
  color: #404040;
  font-size: 17px;
  font-weight: 500;
  line-height: calc(17 / 17 * 1.5);
  letter-spacing: calc(17 * 0 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (min-width: 1024px) {
  .compareBox th:first-child,
  .compareBox td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
  }
  .compareBox th:nth-child(2)[scope=row],
  .compareBox td:nth-child(2)[scope=row] {
    position: sticky;
    left: 250px;
    z-index: 2;
    background: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
  }
  .compareBox th.stickyField--sub:first-child,
  .compareBox td.stickyField--sub:first-child {
    left: 250px;
  }
  .compareBox thead .tableHeadWrap > th:first-child {
    background: #f7f7f7;
    z-index: 4;
  }
}
.compareBox .wattageExp th,
.compareBox .wattageExp td {
  width: auto;
}
.compareBox tbody tr {
  border-top: 1px solid #e5e5e5;
}
.compareBox tbody tr:first-child {
  border: none;
}
.compareBox tbody .tdContent {
  min-height: 60px;
  display: flex;
  align-items: center;
}
.compareBox tbody .tdContent.center {
  justify-content: center;
  text-align: center;
}
.compareBox thead tr.tableHeadWrap {
  background: #f7f7f7;
  counter-reset: index;
}
.compareBox thead tr.tableHeadWrap th {
  background: #f7f7f7;
}
@media (min-width: 1024px) {
  .compareBox thead tr.tableHeadWrap {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}
.compareBox .tableHeadItem {
  min-width: 200px;
  counter-increment: index;
  position: relative;
  padding: 10px 20px;
}
.compareBox .tableHeadItem::before {
  content: counter(index, decimal-leading-zero);
  display: block;
  opacity: 0;
  padding: 10px 0;
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.compareBox .tableHeadItem .ImgWrap {
  display: block;
  width: 100%;
  max-width: 150px;
  overflow: hidden;
  margin: 0 auto;
}
.compareBox .tableHeadItem .ImgWrap img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
@media (min-width: 1181px) {
  .compareBox .tableHeadItem .ImgWrap:hover img {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
.compareBox .tableHeadItem .title {
  display: block;
  width: 100%;
  text-align: center;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.compareBox .tableHeadItem .title a {
  display: block;
}
.compareBox .tableHeadItem .deleteBtn {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  color: #333;
  font-size: 18px;
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 1;
  cursor: pointer;
  outline: none;
  padding: 0;
}
@media (min-width: 1181px) {
  .compareBox .tableHeadItem .deleteBtn:hover {
    color: #8a199c;
  }
}

.specTableBox .specTable {
  width: 100%;
}
.specTableBox .specTable .specTableRow {
  width: 100%;
  display: flex;
}
.specTableBox .specTable .specTableRowHead {
  margin-bottom: 20px;
}
.specTableBox .specTable .specTableRowHead .specTableColumn {
  color: #c48ccd;
  font-size: 22px;
  font-weight: 500;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.wattageBox {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  gap: 15px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .wattageBox {
    display: block;
  }
}
.wattageBox .rwdContent {
  display: none;
  width: 100%;
  height: 50px;
  border: solid 1px #e5e5e5;
  border-radius: 15px;
  align-items: center;
  position: relative;
  padding-left: 20px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.wattageBox .rwdContent::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 14px;
  height: 14px;
  border-right: solid 2px #3f3f3f;
  border-bottom: solid 2px #3f3f3f;
  right: 35px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 1180px) {
  .wattageBox .rwdContent::before {
    width: 10px;
    height: 10px;
    right: 20px;
  }
}
@media (max-width: 768px) {
  .wattageBox .rwdContent {
    display: flex;
  }
}
.wattageBox .wattageTitle {
  width: 140px;
  height: 50px;
  background: #f0f3f7;
  border-radius: 99px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #000000;
  font-size: 20px;
  font-weight: 500;
  line-height: calc(20 / 20 * 1.5);
  letter-spacing: calc(20 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (min-width: 1181px) {
  .wattageBox .wattageTitle:hover {
    background: #c48ccd;
    color: #ffffff;
  }
}
@media (max-width: 768px) {
  .wattageBox .wattageTitle {
    display: none;
    width: 100%;
    height: 42px;
    border-radius: 0;
  }
}
@media (max-width: 768px) {
  .wattageBox .wattageTitle:not(:first-child) {
    border-top: solid 1px #e5e5e5;
  }
}
.wattageBox .wattageTitle.current {
  background: #c48ccd;
  color: #ffffff;
}
.wattageBox .wattageTitle.show {
  display: grid;
}

.wattageExpBox {
  margin-top: 40px;
}

.wattageExpTitle {
  color: #c48ccd;
  font-size: 22px;
  font-weight: 500;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.cableListBox {
  overflow-x: auto;
  cursor: move;
}
.cableListBox::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.cableListBox::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.cableListBox::-webkit-scrollbar-thumb {
  background: #8a199c;
}
.cableListBox .cableList {
  min-width: 1000px;
}
.cableListBox .cableList .cableItem {
  margin-bottom: 30px;
}
.cableListBox .cableList .cableItem:last-child {
  margin: 0;
}
.cableListBox .cableList .item {
  display: flex;
  align-items: center;
  gap: 25px;
}
.cableListBox .cableList .item .Img {
  width: 100%;
  max-width: 1248px;
}
.cableListBox .cableList .item .Img img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.cableListBox .cableList .item .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  color: #000000;
  font-size: 32px;
  font-weight: 500;
  line-height: calc(32 / 32 * 1.5);
  letter-spacing: calc(32 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 1600px) {
  .cableListBox .cableList .item .title {
    width: 200px;
    flex: unset;
    flex-shrink: 0;
  }
}
@media (max-width: 1180px) {
  .cableListBox .cableList .item .title {
    font-size: 24px;
  }
}

.insIntroBox {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 1180px) {
  .insIntroBox {
    flex-direction: column;
    align-items: center;
  }
}
.insIntroBox .albumBox {
  width: 100%;
  max-width: 800px;
}
@media (max-width: 1536px) {
  .insIntroBox .albumBox {
    max-width: 600px;
  }
}
.insIntroBox .albumBox .albumListMain {
  background: #f1f1f1;
  border-radius: 40px;
  padding: 65px 0;
}
@media (max-width: 768px) {
  .insIntroBox .albumBox .albumListMain {
    padding: 30px;
  }
}
.insIntroBox .albumBox .albumListMain.slick-dotted {
  margin: 0;
}
.insIntroBox .albumBox .albumListMain .item .Img {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
@media (max-width: 1536px) {
  .insIntroBox .albumBox .albumListMain .item .Img {
    max-width: 400px;
  }
}
.insIntroBox .albumBox .albumListMain .item .Img img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.insIntroBox .albumBox .albumListNav {
  margin-top: 15px;
}
.insIntroBox .albumBox .albumListNav .slick-list {
  margin: 0 -5px;
}
.insIntroBox .albumBox .albumListNav .slick-slide {
  padding: 0 5px;
}
.insIntroBox .albumBox .albumListNav .item {
  background: #f1f1f1;
  border-radius: 40px;
  padding: 15px;
}
.insIntroBox .albumBox .albumListNav .item .Img {
  width: 100%;
  max-width: 130px;
  margin: 0 auto;
}
.insIntroBox .albumBox .albumListNav .item .Img img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.insIntroBox .albumBox .albumDecoBox {
  margin-top: 25px;
}
@media (max-width: 1180px) {
  .insIntroBox .albumBox .albumDecoBox {
    display: none;
  }
}
.insIntroBox .albumBox .albumDecoBox .dotsBox {
  pointer-events: auto;
}
.insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots {
  position: static;
  display: flex;
  justify-content: center;
}
.insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots li {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 10px;
}
.insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots li.slick-active button {
  background: #c48ccd;
}
.insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots li button {
  width: 100%;
  height: 100%;
  background: #bfbfbf;
  border-radius: 50%;
  padding: 0;
}
.insIntroBox .albumBox .albumDecoBox .dotsBox .slick-dots li button::before {
  display: none;
}
.insIntroBox .introBox {
  width: 100%;
  max-width: 800px;
  padding-top: 40px;
}
@media (max-width: 1536px) {
  .insIntroBox .introBox {
    padding: 0;
  }
}
.insIntroBox .introBox .mainTitle {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 20px;
  margin-bottom: 25px;
  color: #000000;
  font-size: 40px;
  font-weight: 500;
  line-height: calc(40 / 40 * 1.5);
  letter-spacing: calc(40 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 1360px) {
  .insIntroBox .introBox .mainTitle {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .insIntroBox .introBox .mainTitle {
    font-size: 28px;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
}
.insIntroBox .introBox .textEditor.intro ul {
  padding: 0;
  margin: 0;
}
.insIntroBox .introBox .textEditor.intro ul li {
  position: relative;
  list-style: none;
  padding-left: 15px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.insIntroBox .introBox .textEditor.intro ul li::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 5px;
  height: 5px;
  background: #c48ccd;
  border-radius: 50%;
  top: 12px;
  left: 0;
}
@media (max-width: 480px) {
  .insIntroBox .introBox .textEditor.intro ul li::before {
    top: 7px;
  }
}
@media (max-width: 1360px) {
  .insIntroBox .introBox .textEditor.intro ul li {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .insIntroBox .introBox .textEditor.intro ul li {
    font-size: 13px;
  }
}
.insIntroBox .introBox .btnContentBox {
  border-top: solid 1px #e5e5e5;
  padding-top: 35px;
  margin-top: 35px;
}
@media (max-width: 480px) {
  .insIntroBox .introBox .btnContentBox {
    padding-top: 20px;
    margin-top: 20px;
  }
}
.insIntroBox .introBox .btnContentBox .contentTitle {
  margin-bottom: 10px;
  color: #000000;
  font-size: 22px;
  font-weight: 400;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.insIntroBox .introBox .btnContentBox .btnContent {
  display: block;
  width: 100%;
  height: 65px;
  border: solid 1px #e5e5e5;
  border-radius: 15px;
  position: relative;
}
.insIntroBox .introBox .btnContentBox .btnContent::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 14px;
  height: 14px;
  border-right: solid 2px #3f3f3f;
  border-bottom: solid 2px #3f3f3f;
  right: 35px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 1180px) {
  .insIntroBox .introBox .btnContentBox .btnContent::before {
    width: 10px;
    height: 10px;
    right: 20px;
  }
}
@media (max-width: 1180px) {
  .insIntroBox .introBox .btnContentBox .btnContent {
    height: 50px;
  }
}
.insIntroBox .introBox .btnContentBox .btnContent select {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-left: 35px;
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 20 / 1000 * 1px);
  font-family: "Open Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
@media (max-width: 1180px) {
  .insIntroBox .introBox .btnContentBox .btnContent select {
    padding-left: 20px;
  }
}
.insIntroBox .introBox .colorBox {
  margin-top: 30px;
}
.insIntroBox .introBox .colorBox .colorTitle {
  margin-bottom: 10px;
  color: #000000;
  font-size: 22px;
  font-weight: 400;
  line-height: calc(22 / 22 * 1.5);
  letter-spacing: calc(22 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.insIntroBox .introBox .colorBox .colorList {
  display: flex;
  gap: 10px;
}
.insIntroBox .introBox .colorBox .colorList button {
  width: 42px;
  height: 42px;
  border: solid 2px #e5e5e5;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white inset;
}
@media (min-width: 1181px) {
  .insIntroBox .introBox .colorBox .colorList button:hover {
    border-color: #c48ccd;
  }
}
.insIntroBox .introBox .colorBox .colorList button.current {
  border-color: #c48ccd;
}
.insIntroBox .introBox .btnBox {
  margin-top: 60px;
}
@media (max-width: 480px) {
  .insIntroBox .introBox .btnBox {
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }
}
.insIntroBox .introBox .btnBox .btn {
  min-width: 255px;
}
@media (max-width: 1360px) {
  .insIntroBox .introBox .btnBox .btn {
    min-width: 170px;
  }
}
@media (max-width: 480px) {
  .insIntroBox .introBox .btnBox .btn {
    width: 100%;
    min-width: unset;
    flex: unset;
  }
}