body {
  background-color: var(--c-black);
}
.content {
  padding: 0;
}
.section {
  color: var(--c-white);
  padding: 0;
}
.sec__title {
  display: inline-block;
  padding-bottom: 1.3em;
  background: linear-gradient(60deg, var(--c-primary), #d4f8ff);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -ms-background-clip: text;
  -o-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--rem-18);
}
.sec__sub_title {
  font-size: clamp(var(--rem-24), var(--vw-40), var(--rem-40));
  font-weight: 500;
}
.btn-main {
  display: inline-block;
  line-height: var(--rem-50);
  padding: 0 20px;
  border: 1px solid var(--c-white);
  border-radius: 10px;
  transition:
    background var(--ani-time),
    border var(--ani-time),
    color var(--ani-time);
}
.btn-main:after {
  content: '';
  display: inline-block;
  width: var(--rem-22);
  height: var(--rem-22);
  margin-left: var(--rem-16);
  margin-top: -1px;
  vertical-align: middle;
  background: var(--ico-arrow-white) no-repeat center / contain;
  transition: background var(--ani-time);
}
.btn-main:hover {
  color: var(--c-black);
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn-main:hover:after {
  background-image: var(--ico-arrow-black);
}
.section__intro.normal-section {
  overflow-x: hidden;
  overflow-y: auto;
}
.section__intro::-webkit-scrollbar,
.section__intro *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#intro {
  --c-intro-txt: var(--c-white);
  height: 100lvh;
  position: relative;
  overflow: hidden;
  perspective: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;

  .intro__img {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 0 5%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
  }
  .intro__img img {
    width: auto;
    max-width: none;
    height: 100vh;
  }
  @media (max-width: 980px) {
    .intro__img {
      opacity: 0.7;
    }
  }
  .intro__content {
    height: 100lvh;
    width: 90%;
    max-width: 1720px;
    padding-top: var(--h-header);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    position: relative;
  }
  .intro__box.title {
    width: 100%;
    position: relative;
  }

  /* Intro Title */
  .intro__title {
    line-height: 1em;
    font-size: clamp(var(--rem-32), var(--vw-80), var(--rem-80));
    font-weight: 900;
    color: var(--c-intro-txt);
    white-space: nowrap;
    position: relative;
    z-index: 5;
  }
  .intro__title br {
    display: none;
  }
  @media (max-width: 980px) {
    .intro__title {
      text-align: center;
      line-height: 1.2em;
      padding: 10px 0;
    }
    .intro__title br {
      display: block;
    }
  }
  @media (max-width: 360px) {
    .intro__title {
      font-size: var(--rem-28);
    }
  }
  /* deco */
  .intro__deco {
    display: none;
  }
  /* dot */
  @media (max-width: 980px) {
    .intro__deco {
      display: flex;
      justify-content: center;
      padding: 0.5em;
      position: relative;
    }
    .intro__dot {
      --size: 12px;
      display: block;
      width: var(--size);
      height: var(--size);
      background-color: var(--c-primary);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--c-primary);
      z-index: 2;
    }
    /* dot line */
    .intro__line--mo {
      display: block;
      width: 80vw;
      height: 1px;
      background: radial-gradient(#c7d4ff, var(--c-primary), #ffffff00 60%);

      position: absolute;
      top: calc(50% - 0.5px);
      left: calc(50% - 40vw);
      opacity: 1;
      z-index: -1;
    }
  }

  .intro__line--pc {
    display: block;
    width: 100vw;
    height: 1px;
    position: absolute;
    background: linear-gradient(to right, var(--c-primary), #d4f8ff);
    top: calc(100% + var(--rem-20));
    left: 50%;
    transform-origin: left;
    transform: translate(-50%, 0) scale(1, 0.5);
  }

  @media (max-width: 980px) {
    .intro__line--pc {
      display: none;
    }
  }

  /* desc */
  .intro__box.desc {
    color: var(--c-intro-txt);
    font-size: clamp(var(--rem-15), var(--vw-20), var(--rem-20));
    line-height: 1.4;
    padding-top: var(--rem-60);
    position: relative;
    box-sizing: content-box;
    opacity: 1;
  }

  @media (max-width: 980px) {
    .intro__box.desc {
      color: rgba(255, 255, 255, 1);
      padding-top: 40px;
      opacity: 1;
      text-align: center;
    }
  }
}

@media (min-width: 981px) {
  .active .intro__img {
    animation: introImg 1s forwards;
    will-change: right, bottom, filter;
  }
  .active .intro__box.title {
    animation: introTitle 2s forwards;
    will-change: opacity, left;
  }
  .active .intro__title--02 {
    animation: introTitle 2.5s forwards;
  }
  .active .intro__box.desc {
    animation: introDesc 2s ease-in-out forwards;
    will-change: opacity, top;
  }

  @keyframes introImg {
    0% {
      right: -2%;
      bottom: -2%;
      filter: opacity(0);
    }
    100% {
      right: 0;
      bottom: 0;
      filter: opacity(100%);
    }
  }
  @keyframes introTitle {
    0% {
      opacity: 0;
      left: 10%;
    }
    100% {
      opacity: 1;
      left: 0;
    }
  }
  @keyframes introDesc {
    0% {
      opacity: 0;
      top: -10%;
    }
    100% {
      opacity: 1;
      top: 0;
    }
  }
}
@media (max-width: 980px) {
  .active .intro__title--01 {
    position: relative;
    animation: titleDown 2s forwards;
  }
  .active .intro__title--02 {
    position: relative;
    animation: titleUp 2s forwards;
  }
  .active .intro__line--mo {
    animation: lineScale 3s forwards;
  }

  .active .intro__box.desc p {
    opacity: 0;
    animation: descFade 2s ease-in-out forwards;
  }
  .active .intro__box.desc p:nth-child(2) {
    animation-delay: 0.2s;
  }
  .active .intro__box.desc p:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes titleDown {
    0% {
      opacity: 0;
      bottom: 2rem;
    }
    100% {
      bottom: 0;
      opacity: 1;
    }
  }
  @keyframes titleUp {
    0% {
      opacity: 0;
      top: 2rem;
    }
    100% {
      top: 0;
      opacity: 1;
    }
  }
  @keyframes lineScale {
    0% {
      transform: scale(0, 0.5);
    }
    100% {
      transform: scale(1, 0.5);
    }
  }
  @keyframes descFade {
    0% {
      opacity: 0;
      top: 10%;
    }
    100% {
      opacity: 1;
      top: 0;
    }
  }
}
/* fullpage section */
.content > .section ~ .section__news {
  display: flex;
  align-items: center;
  min-height: 100lvh;
}
.content .section__products .fp-tableCell,
.content .section__review .fp-tableCell,
.content .section__news .fp-tableCell {
  padding: calc(var(--h-header) + var(--pd-header) + var(--pd-header)) 0 0;
}

@media (max-width: 1024) and (max-height: 800px) {
  .content > .section ~ .section__news {
    padding: var(--h-header) 0;
  }
}
/* ======== */
/* Products */
/* ======== */
.section__products {
  overflow: hidden;

  .inner::after {
    content: '';
    display: block;
    clear: both;
  }
  .left-grp {
    width: 30%;
    float: left;
    padding-right: 44px;
  }
  /* prdSlide action */
  .left-grp .action {
    display: flex;
    margin-right: -10px;
    margin-top: 30px;
  }
  .left-grp .action button {
    width: 50px;
    height: 50px;
    background: none;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition:
      background var(--ani-time),
      border var(--ani-time);
  }
  .left-grp .action button:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
  }
  .left-grp .action button:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ico-arrow-white) no-repeat 40% center / 60%;
    transition: backgroudn 0.3s;
  }
  .left-grp .action .prev-btn:before {
    transform: scale(-1);
  }
  .left-grp .action button:hover:before {
    background-image: var(--ico-arrow-black);
  }
  .left-grp .action .pagination {
    gap: 2px;
    width: 80px;
    padding: 1px 0 0;
    margin: 0;
    margin-left: auto;
    border: 1px solid var(--c-white);
    border-radius: 50px;
    font-size: var(--rem-16);
  }

  /* prdSlide */
  .prdSlide {
    float: right;
    width: 70%;
    overflow: visible;
    clip-path: polygon(0 -50%, 200% -50%, 200% 150%, 0 150%);
  }
  .prdSlide .swiper-slide {
    position: relative;
    overflow: hidden;
    transition: transform var(--ani-time);
  }
  .prdSlide .swiper-slide-active {
    transform: translateY(-10%);
  }
  .prdSlide .swiper-slide .img-box {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid #fff;
    transition: border 0.3s;
  }
  .prdSlide .swiper-slide .img-box:before,
  .prdSlide .swiper-slide .img-box:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    transition: opacity 1s;
    opacity: 0;
  }
  .prdSlide .swiper-slide .img-box img {
    display: block;
    width: 100%;
  }
  .prdSlide .swiper-slide.full .img-box,
  .prdSlide .swiper-slide:hover .img-box {
    border-color: transparent;
  }
  .prdSlide .swiper-slide .img-box:before {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(212, 248, 255, 0.8));
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(6px) brightness(120%);
    -moz-backdrop-filter: blur(6px) brightness(120%);
    -ms-backdrop-filter: blur(6px) brightness(120%);
    -o-backdrop-filter: blur(6px) brightness(120%);
    backdrop-filter: blur(6px) brightness(120%);
  }
  .prdSlide .swiper-slide.full .img-box:before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(212, 248, 255, 0.2));
  }
  .prdSlide .swiper-slide .img-box:after {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    background: var(--img-main-product) no-repeat center/contain;
    z-index: 2;
  }

  .prdSlide .swiper-slide:hover .img-box:before,
  .prdSlide .swiper-slide:hover .img-box:after {
    opacity: 1;
  }
  .prdSlide .swiper-slide .txt-box {
    padding: 0;
    padding-bottom: 76px;
  }
  .prdSlide .swiper-slide .txt-box .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--rem-60);
    background: rgba(255, 255, 255, 0.26);
    padding: 0 clamp(var(--rem-24), var(--vw-40), var(--rem-40));
    border-radius: 10px;

    font-weight: 500;
    font-size: clamp(var(--rem-16), var(--vw-20), var(--rem-20));
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    opacity: 1;
    animation:
      slideHover2 0.8s,
      slideHover4 0.8s;
    z-index: 2;
    text-align: center;
  }
  .prdSlide .swiper-slide:hover .txt-box .title {
    bottom: 70%;
    background: rgba(255, 255, 255, 0);
    opacity: 1;
    animation:
      slideHover 0.8s forwards,
      slideHover3 0.8s forwards;
  }
  .prdSlide .swiper-slide .txt-box .btn-main {
    position: absolute;
    bottom: 116px;
    left: clamp(var(--rem-24), var(--vw-40), var(--rem-40));
    opacity: 0;
    z-index: 2;
    transition:
      opacity var(--ani-time),
      background var(--ani-time),
      border var(--ani-time);
  }
  .prdSlide .swiper-slide:hover .txt-box .btn-main {
    opacity: 1;
  }
}
@media (max-width: 1024px) {
  .section__products {
    .left-grp {
      width: 100%;
      float: none;
      padding-right: 0;
      padding-bottom: 44px;
      margin-bottom: 8%;
    }
    .left-grp .sec-sub_title {
      margin-right: calc(88px + 10px + 24px);
    }
    .left-grp .action {
      float: right;
      margin-top: -44px;
      margin-right: -10px;
    }
    .left-grp .action button {
      width: 44px;
      height: 44px;
    }

    /* prdSlide */
    .prdSlide {
      float: none;
      width: 100%;
    }
    .prdSlide .swiper-slide .img-box:before {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(212, 248, 255, 0.9));
      -webkit-backdrop-filter: none;
      -moz-backdrop-filter: none;
      -ms-backdrop-filter: none;
      -o-backdrop-filter: none;
      backdrop-filter: none;
    }

    .prdSlide .swiper-slide .txt-box .title {
      font-size: clamp(var(--rem-16), 1.125vw, var(--rem-22));
    }
    .prdSlide .swiper-slide .txt-box .btn-main {
      -webkit-backdrop-filter: blur(20px);
      -moz-backdrop-filter: blur(20px);
      -ms-backdrop-filter: blur(20px);
      -o-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
  }
}

@media (max-width: 768px) {
  .section__products {
    .left-grp {
      margin-bottom: 12%;
    }
    .left-grp .sec-sub_title {
      margin-right: 0;
    }
    .left-grp .action {
      float: none;
      margin-top: 16px;
    }
    .prdSlide {
      clip-path: polygon(-200% -50%, 200% -50%, 200% 150%, -200% 150%);
    }
  }
}

/* Review */
.section__review {
  .btn-main {
    margin-top: clamp(20px, 1.5625vw, 30px);
  }
  .review__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: clamp(60px, 5.208vw, 100px);
  }
  .review__item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-white);
    border-radius: 10px;
    padding: 24px;
  }
  .review__item .title {
    display: flex;
    align-items: flex-start;
    text-align: right;
    margin-bottom: 1em;
  }
  /* .review__item .title .num {
    display: grid;
    grid-template-columns: 8px 8px;
    gap: 3px;
    padding-right: 16px;
    margin-right: auto;
  }
  .review__item .title .num b {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #a9adb9;
    background: var(--c-primary);
    border-radius: 50%;
  }
  .review__item .title .num .active ~ * {
    background: #a9adb9;
  } */
  .review__item .desc {
    --num-line: 5;

    margin-top: auto;
    font-size: var(--rem-18);
    line-height: 1.4;
  }
  /* .review__item .title .num b.active {
    animation: blink 2s infinite;
  } */
}
@media (max-width: 1024px) {
  .section__review {
    .review__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@media (max-width: 768px) {
  .section__review {
    .review__list {
      grid-template-columns: repeat(1, 1fr);
    }
    .review__item .desc {
      margin-top: 20px;
    }
  }
}
/* News */
.section__news {
  .row-grp {
    display: flex;
    margin-top: clamp(40px, 4.166vw, 80px);
  }
  .tab__list {
    padding-right: 3%;
  }
  .tab__link {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #a9adb9;
    font-size: var(--rem-20);
    line-height: 1;
    padding: 8px 0;
    cursor: pointer;
    transition:
      opacity var(--ani-time),
      color var(--ani-time);
    white-space: nowrap;
  }
  .active .tab__link {
    color: var(--c-primary);
  }
  .tab__link:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin: 6px;
    margin-right: 26px;
    background: #a9adb9;
    outline: 1px solid #a9adb9;
    outline-offset: -1px;
    flex-shrink: 0;
    transition:
      outline-offset var(--ani-time),
      outline var(--ani-time),
      background var(--ani-time);
  }
  .tab__link:hover {
    opacity: 0.8;
  }
  .tab__link:hover:before {
    outline-offset: 6px;
  }
  .active .tab__link:before {
    outline-offset: 6px;
    outline-color: var(--c-primary);
    background: var(--c-primary);
  }

  /* content */
  .content-grp {
    margin-left: auto;
    width: 80%;
    max-width: 1140px;
  }
  .content__list {
    --wh-btn: 50px;
    border-top: 1px solid var(--c-white);
    display: none;
  }
  .content__list.active {
    display: block;
  }
  .content__item {
    border-bottom: 1px solid var(--c-white);
    padding: 1.875em 0;
    padding-right: calc(5% + var(--wh-btn));
    position: relative;
  }
  .no-data {
    text-align: center;
    padding: 6em 0;
  }
  .content__item .date {
    display: inline-block;
    margin-bottom: 1.75em;
  }
  .content__item .title {
    font-weight: 400;
    font-size: var(--rem-24);
  }

  .content__item .btn-more {
    width: var(--wh-btn);
    height: var(--wh-btn);
    line-height: var(--wh-btn);
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: background var(--ani-time);
    background: var(--ico-arrow-white) no-repeat center / 24px;
  }
  .content__item .btn-more:hover {
    background-image: var(--ico-arrow-black);
    background-color: var(--c-primary);
    border-color: var(--c-primary);
  }
}
@media (max-width: 1024px) {
  .section__news {
    .row-grp {
      display: block;
    }
    .tab__list {
      width: 100%;
      display: flex;
      margin-bottom: 5%;
    }
    .tab__item {
      margin-right: 8%;
    }

    /* content */
    .content-grp {
      width: 100%;
      max-width: none;
    }
    .content__list {
      --wh-btn: 44px;
    }
    .content__item .date {
      margin-bottom: 1em;
      font-size: var(--rem-14);
    }
    .content__item .title {
      font-size: var(--rem-18);
    }
  }
}
@media (max-width: 768px) {
  .section__news {
    .tab__link {
      font-size: var(--rem-16);
      display: block;
    }
    .tab__link:before {
      margin-bottom: 16px;
    }
  }
}