@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Noto+Sans+HK:wght@100..900&family=Noto+Serif+HK:wght@200..900&family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.brown-light {
  color: #9D824B;
}

html {
  font-family: "Noto Sans HK", sans-serif;
}

.num-en {
  font-family: "Cormorant Infant", serif;
}

.f-ming {
  font-family: "Noto Serif HK", serif;
}

.f-81-title {
  font-size: 4.21vw;
  font-weight: bold;
  letter-spacing: 1px;
}

.f-82, h2 .num-en {
  font-size: clamp(65.6px, 4.2708333333vw, 82px);
}

.f-72, .n-set .setbox .card-item .inner .title .en-q {
  font-size: clamp(57.6px, 3.75vw, 72px);
}

.f-64, h2 {
  font-size: clamp(51.2px, 3.3333333333vw, 64px);
}
@media (max-width: 768px) {
  .f-64, h2 {
    font-size: clamp(35px, 9.0909090909vw, 57.6px);
  }
}

.f-56, .n-set .setbox .card-item .inner .title, .n-hero--features--item .info .num-percent {
  font-size: clamp(44.8px, 2.9166666667vw, 56px);
}

.f-48, .n-use .show .show--item .info--main .title, .n-machine--item.n-machine--item-a .info .title, .n-machine--item.n-machine--item-b .info .title {
  font-size: clamp(38.4px, 2.5vw, 48px);
}
@media (max-width: 768px) {
  .f-48, .n-use .show .show--item .info--main .title, .n-machine--item.n-machine--item-a .info .title, .n-machine--item.n-machine--item-b .info .title {
    font-size: clamp(28px, 1.4583333333vw, 33.6px);
  }
}

.f-40, .n-set .setbox .card-item .inner .groups .group .g-title {
  font-size: clamp(32px, 2.0833333333vw, 40px);
}

.f-36, .n-use .show .show--item .info--main .sub, .n-use .show .show--item .info--sub, .n-treat .features .card-item .title, .n-treat .n-treat-vs .card-item .title {
  font-size: clamp(28.8px, 1.875vw, 36px);
}
@media (max-width: 768px) {
  .f-36, .n-use .show .show--item .info--main .sub, .n-use .show .show--item .info--sub, .n-treat .features .card-item .title, .n-treat .n-treat-vs .card-item .title {
    font-size: clamp(22px, 1.1458333333vw, 26.4px);
  }
}

.f-32, .n-set .setbox .card-item .inner .list .item, .n-machine--item.n-machine--item-a .info .sub, .n-machine--item.n-machine--item-b .info .sub, h3 {
  font-size: clamp(25.6px, 1.6666666667vw, 32px);
}

.f-28, .n-set .setbox .card-item .inner .title-sub, .n-treat .n-treat-vs .card-item .info .points .item .wording, .n-treat .n-treat-steps .steps .card-item .title .step-txt {
  font-size: clamp(22.4px, 1.4583333333vw, 28px);
}

.f-22, .n-machine--item.n-machine--item-a .info .sub-ul, .n-machine--item.n-machine--item-b .info .sub-ul, .n-hero--features--item .info .txt {
  font-size: clamp(17.6px, 1.1458333333vw, 22px);
}

.en-q {
  font-family: "Quattrocento Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
}

.alcenter, .n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num span {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.alcenter-x {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}

.alcenter-y {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.n-sec-title {
  position: relative;
  display: inline-block;
  transform: translateX(-50%);
  left: 50%;
  padding-top: 3.4vw;
  width: 90%;
}
@media (max-width: 768px) {
  .n-sec-title {
    padding-top: 13vw;
  }
}

.n-sec-title-sub {
  position: relative;
  display: inline-block;
  transform: translateX(-50%);
  left: 50%;
  padding-top: 3.4vw;
  font-weight: 600;
  text-align: center;
  line-height: 130%;
}
@media (max-width: 768px) {
  .n-sec-title-sub {
    padding-top: 13vw;
  }
}

h2 {
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding-bottom: 8px;
  line-height: 130%;
}
@media (max-width: 768px) {
  h2 {
    padding-bottom: 24px;
  }
}

h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  color: #764717;
}
@media (max-width: 768px) {
  h3 {
    font-size: clamp(22px, 1.1458333333vw, 26.4px);
    gap: 8px;
  }
  h3 span img {
    display: block;
    width: 100%;
  }
  h3 span.title-arrow {
    width: 10%;
  }
}

.l-wrap {
  width: 100vw;
  overflow: hidden;
}

.img-fit {
  display: block;
  width: 100%;
}

.for-m {
  display: none;
}
@media (max-width: 768px) {
  .for-m {
    display: block;
  }
}

.for-d {
  display: block;
}
@media (max-width: 768px) {
  .for-d {
    display: none;
  }
}

.pos-ab {
  position: absolute;
}

.n-hero {
  position: relative;
  width: 100%;
  opacity: 0;
  background: #764717;
}
.n-hero--banner {
  width: 100%;
}
.n-hero--title {
  width: 40.8%;
  position: absolute;
  transform: translateX(-50%);
  left: 70.2%;
  top: calc(10% - 30px);
  opacity: 0;
  bottom: calc(20.37% + 50px);
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-hero--title {
    width: 83%;
    top: 58%;
    left: 50%;
    bottom: auto;
  }
}
.n-hero--pdname {
  position: absolute;
  width: 35%;
  top: calc(81.3% + 30px);
  opacity: 0;
  left: 52.8%;
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-hero--pdname {
    width: 53%;
    top: 5%;
    transform: translateX(-50%);
    left: 50%;
  }
}
.n-hero--pd {
  width: 14.7%;
  bottom: 0;
  left: 6.9%;
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-hero--pd {
    width: 36.3%;
    bottom: -4.2%;
    left: 8%;
  }
}
.n-hero--mask {
  width: 33%;
  top: 5%;
  left: calc(21.6% - 30px);
  opacity: 0;
}
.n-hero--features {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.n-hero--features--item .info {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
}
.n-hero--features--item .info .num-percent .en-q {
  font-weight: 400 !important;
}
.n-hero--features--item .info .txt {
  text-align: center;
}
.n-hero--features-cell {
  width: 8.8%;
  top: 38%;
  left: 68.3%;
}
.n-hero--features-1 {
  width: 10.1%;
  top: calc(34.5% - 30px);
  opacity: 0;
  left: 55.1%;
}
.n-hero--features-2 {
  width: 10.1%;
  top: calc(53.9% - 30px);
  opacity: 0;
  left: 63.4%;
}
.n-hero--features-3 {
  width: 10.1%;
  top: calc(38.8% - 30px);
  opacity: 0;
  left: 75.4%;
}
.n-hero--bottom {
  right: 16px;
  bottom: 16px;
}
.n-hero--bottom .notice p {
  font-size: 9px;
  line-height: 110%;
}
.n-hero {
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-hero--title {
    width: 86%;
    top: calc(6% - 30px);
  }
  .n-hero--pdname {
    width: 87%;
    top: calc(20.4% + 30px);
  }
  .n-hero--mask {
    width: 68%;
    left: calc(3.6% - 30px);
    top: 30%;
  }
  .n-hero--pd {
    bottom: 0;
    left: 2%;
  }
  .n-hero--features--item .info {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .n-hero--features--item .info .num-percent {
    font-size: 32px;
  }
  .n-hero--features--item .info .num-percent .en-q {
    font-weight: 400 !important;
  }
  .n-hero--features--item .info .txt {
    font-size: 14px;
    text-align: center;
  }
  .n-hero--features-1 {
    width: 24.1%;
    top: calc(35.5% - 30px);
    opacity: 0;
    left: 49.2%;
  }
  .n-hero--features-2 {
    width: 24.1%;
    top: calc(51% - 30px);
    opacity: 0;
    left: 65.2%;
  }
  .n-hero--features-3 {
    width: 24.1%;
    top: calc(68% - 30px);
    opacity: 0;
    left: 72.2%;
  }
  .n-hero--features-cell {
    width: 15.8%;
    top: 77%;
    left: 60.3%;
  }
  .n-hero--bottom {
    right: 8px;
    bottom: 12px;
  }
}
.n-hero.active {
  opacity: 1;
}

.n-video {
  position: relative;
  display: flex;
  padding: 11.8vh 0;
  width: 100%;
  box-sizing: border-box;
  background: #DDBA82;
  background: linear-gradient(0deg, rgb(221, 186, 130) 0%, rgb(254, 254, 254) 50%, rgb(217, 190, 123) 100%);
  align-items: center;
  justify-content: center;
}
.n-video--videobox {
  width: 90%;
  max-width: 1280px;
}
.n-video--videobox .ytbox {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  border-radius: 1vw;
  overflow: hidden;
}
.n-video--videobox .ytbox iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .n-video {
    padding: 32px 0;
  }
  .n-video--videobox {
    max-width: 90%;
    margin-top: 0;
  }
}

.n-machine {
  position: relative;
  width: 100%;
}
.n-machine--bg {
  width: 100%;
}
.n-machine .n-sec-title {
  top: 0;
}
.n-machine--item.n-machine--item-a {
  width: 50%;
  height: 66.83%;
  top: 24%;
  left: 16%;
}
.n-machine--item.n-machine--item-a .machine {
  height: 100%;
}
.n-machine--item.n-machine--item-a .machine img {
  display: block;
  height: 100%;
}
.n-machine--item.n-machine--item-a .info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: absolute;
  left: 35.6%;
  top: 30%;
}
.n-machine--item.n-machine--item-a .info .title {
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;
}
.n-machine--item.n-machine--item-a .info .sub {
  letter-spacing: 2px;
  color: #764717;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .n-machine--item.n-machine--item-a .info .sub {
    display: none !important;
    font-size: 28px;
  }
}
.n-machine--item.n-machine--item-a .info .sub-ul {
  letter-spacing: 2px;
  color: #764717;
  font-weight: 600;
  padding-left: 28px;
  list-style-type: disc;
  display: none;
}
.n-machine--item.n-machine--item-a .info .sub-ul li {
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .n-machine--item.n-machine--item-a .info .sub-ul {
    display: block;
  }
}
.n-machine--item.n-machine--item-b {
  width: 50%;
  height: 54.38%;
  top: 38%;
  left: 37%;
  display: flex;
  justify-content: flex-end;
}
.n-machine--item.n-machine--item-b .machine {
  height: 100%;
}
.n-machine--item.n-machine--item-b .machine img {
  display: block;
  height: 100%;
}
.n-machine--item.n-machine--item-b .info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: absolute;
  left: 16%;
  top: 69%;
}
.n-machine--item.n-machine--item-b .info .title {
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;
}
.n-machine--item.n-machine--item-b .info .sub {
  letter-spacing: 2px;
  color: #764717;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}
@media (max-width: 1024px) {
  .n-machine--item.n-machine--item-b .info .sub {
    display: none !important;
    font-size: 28px;
  }
}
.n-machine--item.n-machine--item-b .info .sub-ul {
  letter-spacing: 2px;
  color: #764717;
  font-weight: 600;
  padding-left: 28px;
  list-style-type: disc;
  display: none;
}
.n-machine--item.n-machine--item-b .info .sub-ul li {
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .n-machine--item.n-machine--item-b .info .sub-ul {
    display: block;
  }
}
.n-machine {
  /*<1680*/
}
@media (max-width: 1680px) {
  .n-machine--item.n-machine--item-a {
    left: 7%;
  }
  .n-machine--item.n-machine--item-b {
    left: 42%;
  }
  .n-machine--item.n-machine--item-b .info {
    left: 3%;
  }
}
.n-machine {
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-machine--item.n-machine--item-a .info {
    left: 29.6%;
    width: 76%;
  }
}
@media (max-width: 1024px) {
  .n-machine {
    background: url("../img/new-sec-2-bg-mb.png") top center no-repeat;
    background-size: cover;
    padding-bottom: 8vw;
  }
  .n-machine .n-machine--bg {
    display: none;
  }
  .n-machine--item {
    position: relative !important;
  }
  .n-machine--item.n-machine--item-a {
    width: 80%;
    height: auto;
    left: 7%;
    padding-top: 267px;
  }
  .n-machine--item.n-machine--item-a .machine {
    height: 82vw;
  }
  .n-machine--item.n-machine--item-a .info {
    width: 100%;
    left: 54%;
    top: 69.5%;
  }
  .n-machine--item.n-machine--item-a .info .title {
    text-align: left;
  }
  .n-machine--item.n-machine--item-b {
    width: 80%;
    height: auto;
    margin-top: 9vw;
    left: 17%;
  }
  .n-machine--item.n-machine--item-b .machine {
    height: 61vw;
  }
  .n-machine--item.n-machine--item-b .info {
    width: 100%;
    left: -3.4%;
    top: 39%;
  }
  .n-machine--item.n-machine--item-b .info .title {
    text-align: left;
  }
}

.n-treat {
  position: relative;
  width: 100%;
  background: #FFF4E1;
  background: linear-gradient(0deg, rgb(255, 244, 225) 0%, rgb(254, 254, 254) 50%, rgb(255, 244, 225) 100%);
  overflow: hidden;
}
.n-treat .features {
  width: 90%;
  max-width: 1154px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  gap: 3vw;
  padding: 60px;
  margin-top: 24px;
  border-radius: 24px;
  box-sizing: border-box;
}
.n-treat .features .card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  padding: 12px 0;
}
.n-treat .features .card-item .cover {
  width: 100%;
}
.n-treat .features .card-item .cover img {
  width: 100%;
}
.n-treat .features .card-item .title {
  letter-spacing: 1px;
  text-align: center;
}
.n-treat .features .divider {
  display: block;
  width: 1px;
  background: #9D824B;
}
@media (max-width: 768px) {
  .n-treat .features {
    flex-wrap: wrap;
    gap: 16px;
    padding: 48px 18px;
  }
  .n-treat .features .card-item {
    width: calc((100% - 16px) / 2);
  }
  .n-treat .features .divider {
    display: none;
  }
}
.n-treat .n-treat-vs {
  width: 90%;
  max-width: 1280px;
  margin: 42px auto;
  display: flex;
  gap: 24px;
}
.n-treat .n-treat-vs .vs {
  display: flex;
  align-items: center;
}
.n-treat .n-treat-vs .card-item {
  border-radius: 24px;
  border: solid 1px #000;
  overflow: hidden;
}
.n-treat .n-treat-vs .card-item .title {
  padding: 16px;
  background: #000;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.n-treat .n-treat-vs .card-item .info {
  display: flex;
  align-items: center;
  padding-top: 2vw;
}
.n-treat .n-treat-vs .card-item .info .face {
  width: 59%;
}
.n-treat .n-treat-vs .card-item .info .face img {
  display: block;
  width: 100%;
}
.n-treat .n-treat-vs .card-item .info .points {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}
.n-treat .n-treat-vs .card-item .info .points .item {
  display: flex;
  gap: 8px;
}
.n-treat .n-treat-vs .card-item .info .points .item .icon {
  width: 10px;
  display: flex;
  align-items: center;
}
.n-treat .n-treat-vs .card-item .info .points .item .wording {
  font-weight: 500;
}
.n-treat .n-treat-vs .card-item.card-new {
  width: 80%;
}
.n-treat .n-treat-vs .card-item.card-new .title {
  background: #AC8F4F;
  background: linear-gradient(90deg, rgb(172, 143, 79) 0%, rgb(252, 228, 176) 50%, rgb(172, 143, 79) 100%);
}
.n-treat .n-treat-vs .card-item.card-new .info .face {
  width: 39.16%;
}
.n-treat .n-treat-vs .card-item.card-new .info .points .item .icon {
  width: 30px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .n-treat .n-treat-vs {
    flex-direction: column;
    align-items: center;
  }
  .n-treat .n-treat-vs .card-item {
    padding-bottom: 32px;
  }
  .n-treat .n-treat-vs .card-item .info {
    align-items: flex-end;
  }
  .n-treat .n-treat-vs .card-item .info .points {
    padding-bottom: 16px;
  }
  .n-treat .n-treat-vs .card-item.card-new {
    width: 100%;
  }
  .n-treat .n-treat-vs .card-item.card-new .info {
    flex-direction: column;
    align-items: center;
  }
  .n-treat .n-treat-vs .card-item.card-new .info .face {
    width: 70%;
  }
}
.n-treat .n-treat-steps {
  width: 90%;
  max-width: 1280px;
  background: #fff;
  border-radius: 24px;
  margin: 68px auto;
  padding: 0 32px 3.4vw 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  align-items: center;
}
.n-treat .n-treat-steps .n-sec-title-sub {
  transform: none;
  left: initial;
}
.n-treat .n-treat-steps .steps {
  margin-top: 24px;
  width: 90%;
  display: flex;
  gap: 2vw;
}
.n-treat .n-treat-steps .steps .card-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.n-treat .n-treat-steps .steps .card-item .title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.n-treat .n-treat-steps .steps .card-item .title .num {
  display: inline-block;
  padding: 4px 40px;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: #D5404B;
  border-radius: 9999px;
}
.n-treat .n-treat-steps .steps .card-item .title .num.orange {
  background: #DF9739;
}
.n-treat .n-treat-steps .steps .card-item .title .num.brown {
  background: #CF852B;
}
.n-treat .n-treat-steps .steps .card-item .title .days {
  font-size: 22px;
  font-weight: 500;
  color: #9D824B;
  text-align: center;
}
.n-treat .n-treat-steps .steps .card-item .title .step-txt {
  letter-spacing: 5px;
  color: #000;
  font-weight: 500;
}
.n-treat .n-treat-steps .steps .card-item .cover {
  width: 100%;
}
.n-treat .n-treat-steps .steps .card-item .cover img {
  display: block;
  width: 100%;
}
.n-treat .n-treat-steps .steps .card-item .info p {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 32px;
  text-align: center;
}
.n-treat .n-treat-steps .steps .card-item .info .notice {
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  background: #AC8F4F;
  background: linear-gradient(90deg, rgb(172, 143, 79) 0%, rgb(252, 228, 176) 50%, rgb(172, 143, 79) 100%);
  font-size: 22px;
  color: #fff;
  border-radius: 12px;
}
.n-treat .n-treat-steps .steps .divider {
  display: block;
  width: 1px;
  background: #9D824B;
}
@media (max-width: 768px) {
  .n-treat .n-treat-steps {
    padding: 32px;
  }
  .n-treat .n-treat-steps .n-sec-title-sub {
    padding: 0 16px;
  }
  .n-treat .n-treat-steps .steps {
    flex-direction: column;
    gap: 24px;
  }
  .n-treat .n-treat-steps .steps .divider {
    height: 1px;
    width: 100%;
  }
}

.n-set {
  position: relative;
  width: 100%;
  background: url("../img/new-sec-4-bg-pc.png") bottom center no-repeat;
  background-size: cover;
  overflow: hidden;
  padding-bottom: 78px;
}
.n-set .setbox {
  width: 90%;
  max-width: 1194px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.n-set .setbox .card-item {
  background: linear-gradient(90deg, rgb(172, 143, 79) 0%, rgb(252, 228, 176) 50%, rgb(172, 143, 79) 100%);
  padding: 4px;
  border-radius: 24px;
  overflow: hidden;
}
.n-set .setbox .card-item .inner {
  background: #F3EFEA;
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  padding: 38px 34px;
}
.n-set .setbox .card-item .inner .bgimg {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.n-set .setbox .card-item .inner .bgimg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n-set .setbox .card-item .inner .title {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 12px;
}
.n-set .setbox .card-item .inner .title .en-q {
  background: linear-gradient(180deg, rgb(106, 73, 0) 0%, rgb(252, 228, 176) 100%);
  background-clip: text;
  color: transparent;
}
.n-set .setbox .card-item .inner .title span {
  display: block;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgb(106, 73, 0) 0%, rgb(252, 228, 176) 100%);
  background-clip: text;
  color: transparent;
}
.n-set .setbox .card-item .inner .title-sub {
  color: #999999;
  font-weight: 600;
  margin: 12px 0 19px 0;
}
.n-set .setbox .card-item .inner .list {
  display: flex;
  gap: 16px;
}
.n-set .setbox .card-item .inner .list .item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.n-set .setbox .card-item .inner .list .item .icon img {
  display: block;
  height: 1.3em;
}
.n-set .setbox .card-item .inner .list .item span {
  display: flex;
  flex-shrink: 0;
  font-weight: 600;
  line-height: 100%;
}
.n-set .setbox .card-item .inner .groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.n-set .setbox .card-item .inner .groups .group {
  display: flex;
  align-items: center;
  gap: 28px;
}
.n-set .setbox .card-item .inner .groups .group .g-title {
  line-height: 110%;
  font-weight: 600;
}
.n-set .setbox .card-item .inner .groups .group .divider {
  width: 1px;
  align-self: stretch;
  background: #ccc;
  transform: scaleY(0.8);
}
.n-set .setbox .card-item .inner .groups .group .list-h {
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1024px) {
  .n-set {
    background: url("../img/new-sec-4-bg-mb.png") bottom center no-repeat;
    background-size: cover;
  }
  .n-set .setbox .card-item .inner {
    padding-bottom: 40vw;
  }
  .n-set .setbox .card-item .inner .bgimg {
    width: 100%;
    height: auto;
    aspect-ratio: 100/40;
    left: 0;
    top: initial;
    bottom: 0;
  }
  .n-set .setbox .card-item .inner .bgimg img {
    object-fit: cover;
  }
  .n-set .setbox .card-item .inner .list {
    flex-direction: column;
  }
  .n-set .setbox .card-item .inner .groups {
    gap: 32px;
    margin-top: 32px;
  }
  .n-set .setbox .card-item .inner .groups .group {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .n-set .setbox .card-item .inner .groups .group .divider {
    width: 100%;
    height: 1px;
  }
}

.n-use {
  background: url("../img/new-sec-5-bg.png") bottom center no-repeat;
  background-size: cover;
  padding-bottom: 78px;
}
.n-use .show {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.n-use .show .show-face {
  display: block;
  width: 52%;
}
.n-use .show .show--item {
  left: 57%;
  top: 14%;
}
.n-use .show .show--item .line {
  width: 14.89vw;
  max-width: 286px;
  right: calc(100% + 8px);
  top: 25%;
}
.n-use .show .show--item .line img {
  width: 100%;
}
.n-use .show .show--item .info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.n-use .show .show--item .info--main {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.n-use .show .show--item .info--main .title {
  color: #764717;
  font-weight: 600;
}
.n-use .show .show--item .info--main .divider {
  width: 1px;
  background: #764717;
  align-self: stretch;
  margin-top: 2%;
}
.n-use .show .show--item .info--main .sub {
  color: #764717;
}
.n-use .show .show--item.line-2 {
  top: 39%;
}
.n-use .show .show--item.line-2 .line {
  width: 16.35vw;
  max-width: 314px;
  right: calc(100% + 8px);
  top: 21%;
}
.n-use .show .show--item.line-3 {
  top: 61%;
}
.n-use .show .show--item.line-3 .line {
  width: 19.01vw;
  max-width: 365px;
  right: calc(100% + 8px);
  top: -50%;
}
.n-use .show {
  /*<1680*/
}
@media (max-width: 1680px) {
  .n-use .show .show--item {
    left: 52%;
    top: 17%;
  }
}
.n-use .show {
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-use .show .show--item {
    left: 46%;
  }
}
@media (max-width: 1024px) {
  .n-use .show .show--item {
    left: 48%;
  }
}
@media (max-width: 768px) {
  .n-use .show {
    margin-left: 5%;
  }
  .n-use .show .show--item {
    top: 11%;
    left: 48%;
  }
  .n-use .show .show--item .info {
    gap: 8px;
  }
  .n-use .show .show--item .info--main {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
  .n-use .show .show--item .info--sub {
    font-size: clamp(18px, 0.9375vw, 21.6px);
  }
  .n-use .show .show--item .line {
    width: 22.95vw;
    max-width: 101px;
    top: 17%;
  }
  .n-use .show .show--item.line-2 .line {
    width: 22.22vw;
    max-width: 111px;
    top: 15%;
  }
  .n-use .show .show--item.line-3 {
    top: 65%;
  }
  .n-use .show .show--item.line-3 .line {
    width: 30vw;
    max-width: 132px;
    top: -81%;
  }
}
@media (max-width: 630px) {
  .n-use .show .show--item {
    left: 51%;
    top: 8%;
  }
}
@media (max-width: 540px) {
  .n-use .show .show--item {
    left: 55%;
    top: 5%;
  }
  .n-use .show .show--item.line-3 {
    top: 71%;
  }
}
@media (max-width: 480px) {
  .n-use .show .show--item {
    left: 57%;
    top: 2%;
  }
  .n-use .show .show--item.line-3 {
    top: 71%;
  }
}
.n-use .usebox {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-sizing: border-box;
}
.n-use .usebox .useimg {
  width: 100%;
}
.n-use .usebox .useimg img {
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  .n-use {
    background: url("../img/new-sec-5-bg-m.png") bottom center no-repeat;
    background-size: cover;
  }
}

.n-qa {
  position: relative;
  width: 100%;
  background: #fff;
  padding-top: 2vw;
  padding-bottom: 5vw;
}
.n-qa--title {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transform: translateX(-50%);
  left: 50%;
  top: 5%;
  color: #764717;
}
.n-qa .n-qabox {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1vw;
  margin-top: 0.5vw;
  border-top: solid 1vw #764717;
  background: #fff;
}
.n-qa .n-qabox--item {
  padding: 0 0 1vw 0;
  margin: 0 2vw 1vw 2vw;
  border-bottom: solid 1px #764717;
}
.n-qa .n-qabox--item:last-child {
  border: none;
}
.n-qa .n-qabox--item .n-qabox-q {
  display: flex;
  padding-right: 1.4vw;
  align-items: center;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1%;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num {
  flex-shrink: 0;
  width: 2.3vw;
  position: relative;
  margin-top: 0.5vw;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num--icon {
  width: 100%;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num--icon svg {
  width: 100% !important;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num span {
  color: #fff;
  font-size: 1.3vw;
  font-weight: 500;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-text p {
  font-size: 2vw;
  font-weight: bold;
  color: #764717;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-arrow {
  width: 1.8vw;
  display: flex;
  height: 2vw;
  align-items: center;
}
.n-qa .n-qabox--item .n-qabox-q .n-qabox-arrow img {
  display: block;
  width: 100%;
}
.n-qa .n-qabox--item .n-qabox-a {
  display: none;
  opacity: 0;
  transition: 0.3s;
}
.n-qa .n-qabox--item .n-qabox-a .n-qabox-text {
  padding-left: calc(2.5vw + 1%);
  padding-top: 2vw;
}
.n-qa .n-qabox--item .n-qabox-a .n-qabox-text p {
  font-size: 1.2vw;
  line-height: 150%;
  letter-spacing: 0.1vw;
}
.n-qa .n-qabox--item.active .n-qabox-q .n-qabox-arrow {
  transform: rotate(180deg);
  transition: 0.3s;
}
.n-qa .n-qabox--item.active .n-qabox-a {
  display: block;
  opacity: 1;
}
.n-qa {
  /*<1280*/
}
@media (max-width: 1280px) {
  .n-qa {
    padding-top: 4vw;
  }
  .n-qa--title p {
    font-size: 8vw;
  }
  .n-qa .n-qabox {
    width: 80%;
    margin-top: 4vw;
    border-top: solid 2.7vw #764717;
    padding-top: 6vw;
    border-radius: 2vw;
  }
  .n-qa .n-qabox--item {
    margin: 0 2vw 5vw 4vw;
    padding: 3px 0 5vw 0;
  }
  .n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num {
    width: 5.3vw;
  }
  .n-qa .n-qabox--item .n-qabox-q .n-qabox-text .n-qabox-num span {
    font-size: 3vw;
  }
  .n-qa .n-qabox--item .n-qabox-q .n-qabox-text p {
    font-size: 4.2vw;
  }
  .n-qa .n-qabox--item .n-qabox-q .n-qabox-arrow {
    width: 4vw;
  }
  .n-qa .n-qabox--item .n-qabox-a .n-qabox-text {
    padding-left: 0;
  }
  .n-qa .n-qabox--item .n-qabox-a .n-qabox-text p {
    font-size: 3vw;
  }
}/*# sourceMappingURL=style-mask.css.map */