@charset "UTF-8";
/* CSS Document */
.mainContent .peripheralBox .peripheralItem .counterBox .counterBtn, .mainContent .selectBox ul.select li, .mainContent .selectBox ul.select, .mainContent .selectBox label, .mainContent .chooseBox ul li .txt, .mainContent .chooseBox ul li, .topContent ul li .txt, .topContent ul li .num {
  transition: all 0.5s ease-in-out;
}

.contentBox {
  padding-top: 70px;
}
@media (max-width: 1180px) {
  .contentBox {
    padding-top: 50px;
  }
}
@media (max-width: 768px) {
  .contentBox {
    padding-top: 40px;
  }
}

.topContent {
  width: 100%;
  max-width: 1490px;
  position: relative;
  overflow-x: auto;
  margin: 0 auto 50px;
}
.topContent::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.topContent::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.topContent::-webkit-scrollbar-thumb {
  background: #8a199c;
}
@media (max-width: 1300px) {
  .topContent {
    margin-bottom: 40px;
  }
}
.topContent ul {
  min-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, auto 1fr) auto;
  padding-bottom: 10px;
}
.topContent ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 15px;
  cursor: pointer;
}
.topContent ul li.active .num {
  background: #8a199c;
  color: #ffffff;
}
.topContent ul li.active .txt {
  color: #8a199c;
}
.topContent ul li .num {
  width: 40px;
  height: 40px;
  background: #e5e5e5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  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;
}
.topContent ul li .txt {
  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;
}
@media (max-width: 1300px) {
  .topContent ul li .txt {
    font-size: 18px;
  }
}
.topContent ul li .arrow {
  display: block;
  width: 14px;
  height: 14px;
  border: solid 2px #bfbfbf;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.mainContent .contentWrap {
  display: none;
}
.mainContent .contentWrap.show {
  display: block;
}
.mainContent .mainTitle {
  text-align: center;
  margin-bottom: 50px;
  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;
}
@media (max-width: 1300px) {
  .mainContent .mainTitle {
    font-size: 22px;
    margin-bottom: 30px;
  }
}
.mainContent .box {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.mainContent .chooseBox {
  width: 100%;
  margin-bottom: 50px;
}
@media (max-width: 1300px) {
  .mainContent .chooseBox {
    margin-bottom: 30px;
  }
}
.mainContent .chooseBox.single {
  margin: 0;
}
.mainContent .chooseBox ul {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
}
@media (max-width: 768px) {
  .mainContent .chooseBox ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
.mainContent .chooseBox ul li {
  width: 100%;
  max-width: 410px;
  height: 110px;
  background: #f5f5f5;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  cursor: pointer;
}
@media (min-width: 1181px) {
  .mainContent .chooseBox ul li:hover {
    background: #c48ccd;
  }
  .mainContent .chooseBox ul li:hover .txt {
    color: #ffffff;
  }
}
@media (max-width: 1300px) {
  .mainContent .chooseBox ul li {
    max-width: 300px;
    height: 80px;
    gap: 15px;
  }
}
@media (max-width: 768px) {
  .mainContent .chooseBox ul li {
    max-width: 100%;
  }
}
.mainContent .chooseBox ul li.active {
  background: #c48ccd;
}
.mainContent .chooseBox ul li.active .txt {
  color: #ffffff;
}
.mainContent .chooseBox ul li i {
  display: block;
  position: relative;
}
.mainContent .chooseBox ul li i.cpuImg {
  width: 60px;
  height: 60px;
}
.mainContent .chooseBox ul li i.cpuImg::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_cpuImg.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
@media (max-width: 1300px) {
  .mainContent .chooseBox ul li i.cpuImg {
    width: 40px;
    height: 40px;
  }
}
.mainContent .chooseBox ul li i.cpuImg.double::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_cpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-5px, -5px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg {
  width: 60px;
  height: 60px;
}
.mainContent .chooseBox ul li i.gpuImg::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
@media (max-width: 1300px) {
  .mainContent .chooseBox ul li i.gpuImg {
    width: 40px;
    height: 40px;
  }
}
.mainContent .chooseBox ul li i.gpuImg.double::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-5px, -5px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg.triple::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-3px, -3px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg.triple em {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.mainContent .chooseBox ul li i.gpuImg.triple em::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-6px, -6px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg.quad::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-2px, -2px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg.quad em {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.mainContent .chooseBox ul li i.gpuImg.quad em::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-4px, -4px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li i.gpuImg.quad em::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: url("../images/calculator_gpuImg.png") no-repeat center;
  background-size: contain;
  transform: translate(-6px, -6px);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
.mainContent .chooseBox ul li .txt {
  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;
}
@media (max-width: 1300px) {
  .mainContent .chooseBox ul li .txt {
    font-size: 18px;
  }
}
.mainContent .selectBox {
  width: 100%;
}
.mainContent .selectBox:not(:last-child) {
  border-bottom: solid 1px #e5e5e5;
  margin-bottom: 30px;
  padding-bottom: 35px;
}
.mainContent .selectBox .selectList {
  max-width: 810px;
  margin: 0 auto;
}
.mainContent .selectBox .selectList .selectItem {
  position: relative;
  margin-bottom: 35px;
}
.mainContent .selectBox .selectList .selectItem:last-child {
  margin: 0;
}
.mainContent .selectBox .selectList .selectItem:has(.show) {
  z-index: 1;
}
.mainContent .selectBox .selectList .selectItem.error label {
  border-color: #e74c3c;
}
.mainContent .selectBox .selectTitle {
  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;
}
@media (max-width: 1300px) {
  .mainContent .selectBox .selectTitle {
    font-size: 18px;
  }
}
.mainContent .selectBox label {
  height: 65px;
  background: #ffffff;
  border: solid 1px #e5e5e5;
  border-radius: 15px;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  color: #2a2727;
  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;
}
.mainContent .selectBox label::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  width: 14px;
  height: 14px;
  border: solid 2px #3f3f3f;
  border-width: 2px 2px 0 0;
  right: 35px;
  top: 45%;
  transform: translateY(-50%) rotate(135deg);
}
.mainContent .selectBox label.active {
  border-color: #8a199c;
}
.mainContent .selectBox label.active::before {
  border-color: #8a199c;
  top: 50%;
  transform: translateY(-50%) rotate(135deg) scale(-1);
}
.mainContent .selectBox label a {
  display: none;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: unset;
}
@media (max-width: 480px) {
  .mainContent .selectBox label a {
    display: block;
  }
}
.mainContent .selectBox ul.select {
  width: 100%;
  max-height: 250px;
  background: #ffffff;
  border: solid 1px #e5e5e5;
  border-radius: 15px;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(5px);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
}
.mainContent .selectBox ul.select::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.mainContent .selectBox ul.select::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.mainContent .selectBox ul.select::-webkit-scrollbar-thumb {
  background: #8a199c;
}
.mainContent .selectBox ul.select.show {
  opacity: 1;
  visibility: inherit;
  pointer-events: auto;
}
.mainContent .selectBox ul.select.modelSelect, .mainContent .selectBox ul.select.secSelect {
  display: none;
}
.mainContent .selectBox ul.select.modelSelect.related, .mainContent .selectBox ul.select.secSelect.related {
  display: block;
}
.mainContent .selectBox ul.select li {
  height: 50px;
  padding: 0 35px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #404040;
  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 (min-width: 1181px) {
  .mainContent .selectBox ul.select li:hover {
    background: #e6e6e6;
  }
}
.mainContent .selectBox ul.select li.active {
  background: #e6e6e6;
}
.mainContent .selectBox ul.select:has(> li:hover) > li:not(:hover).active, .mainContent .selectBox ul.select:has(> li:focus-within) > li:not(:focus-within).active {
  background: #ffffff;
}
@media (max-width: 480px) {
  .mainContent .peripheralBox {
    width: 100%;
  }
}
.mainContent .peripheralBox .peripheralItem {
  display: flex;
  gap: 35px;
  margin-bottom: 40px;
}
.mainContent .peripheralBox .peripheralItem:last-child {
  margin: 0;
}
.mainContent .peripheralBox .peripheralItem .Img {
  display: block;
  flex-shrink: 0;
}
.mainContent .peripheralBox .peripheralItem .Img.ssdImg {
  width: 40px;
  height: 52px;
  background: url("../images/calculator_ssdImg.png") no-repeat center;
  background-size: contain;
}
.mainContent .peripheralBox .peripheralItem .Img.fanImg {
  width: 40px;
  height: 40px;
  background: url("../images/calculator_fanImg.png") no-repeat center;
  background-size: contain;
}
.mainContent .peripheralBox .peripheralItem .Img.hddImg {
  width: 40px;
  height: 52px;
  background: url("../images/calculator_hddImg.png") no-repeat center;
  background-size: contain;
}
@media (max-width: 480px) {
  .mainContent .peripheralBox .peripheralItem .rightBox {
    width: 100%;
  }
}
.mainContent .peripheralBox .peripheralItem .txt {
  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;
}
@media (max-width: 1300px) {
  .mainContent .peripheralBox .peripheralItem .txt {
    font-size: 18px;
  }
}
.mainContent .peripheralBox .peripheralItem .counterBox {
  min-width: 355px;
  border: solid 1px #e5e5e5;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
@media (max-width: 480px) {
  .mainContent .peripheralBox .peripheralItem .counterBox {
    width: 100%;
    min-width: unset;
  }
}
.mainContent .peripheralBox .peripheralItem .counterBox .counterBtn {
  width: 50px;
  height: 50px;
  background: #cccccc;
  border-radius: 15px;
  display: grid;
  place-items: center;
}
@media (min-width: 1181px) {
  .mainContent .peripheralBox .peripheralItem .counterBox .counterBtn:hover {
    background: #8a199c;
  }
}
.mainContent .peripheralBox .peripheralItem .counterBox .counterBtn.plus i::before {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: 0.5s all;
  background: #ffffff;
  transform: rotate(90deg);
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.mainContent .peripheralBox .peripheralItem .counterBox .counterBtn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.mainContent .peripheralBox .peripheralItem .counterBox .counterBtn i {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  position: relative;
}
.mainContent .peripheralBox .peripheralItem .counterBox .counterNum {
  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;
}
.mainContent .btnBox {
  margin-top: 100px;
}
@media (max-width: 1300px) {
  .mainContent .btnBox {
    margin-top: 50px;
  }
}
.mainContent .btnBox .btn {
  min-width: 255px;
}
@media (max-width: 1300px) {
  .mainContent .btnBox .btn {
    min-width: 170px;
  }
}

/* 手機版專用彈窗 */
.calculatorModule .selectBox ul.select {
  max-height: 50vh;
  overflow-y: auto;
}
.calculatorModule .selectBox ul.select::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
}
.calculatorModule .selectBox ul.select::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
}
.calculatorModule .selectBox ul.select::-webkit-scrollbar-thumb {
  background: #8a199c;
}
.calculatorModule .selectBox ul.select li {
  padding: 15px 20px;
  border-bottom: solid 1px #e5e5e5;
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  line-height: calc(18 / 18 * 1.5);
  letter-spacing: calc(18 * 0 / 1000 * 1px);
  font-family: "Oswald", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.calculatorModule .selectBox ul.select li:last-child {
  border: none;
}
.calculatorModule .selectBox ul.select li.active {
  color: #8a199c;
  font-weight: 600;
}