@charset "UTF-8";

/* default */
html,
body {
  font-family: "Pretendard JP";
  font-weight: 400;
  line-height: 150%;
  color: var(--black);
}
section {
  position: relative;
  width: 100%;
}
.f-section-ani {
  padding: var(--paddingMain);
}
.f-section-ani .width-wrap {
  padding: 0;
}
.width-wrap {
  position: relative;
  max-width: 1520px;
  width: 100%;
  padding: var(--padding150);
  margin: 0 auto;
}
.width-wrap.main {
  padding: var(--paddingMain);
}
.width-wrap.content {
  max-width: 920px;
  width: 100%;
}
p,
span,
i {
  line-height: 150%;
}

/* responsive class */
.under1570,
.under1540,
.under1450,
.under1060,
.under720,
.under500 {
  display: none;
}
.top1570,
.top1060,
.top500 {
  display: block;
}

/* font */
.po-en {
  font-family: "the-seasons", sans-serif;
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
.po-en.it {
  font-style: italic;
  font-weight: 300;
}

.po-b-font {
  font-size: 140px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: -5.6px;
}

.col-white {
  color: var(--white);
}
.col-po {
  color: var(--po);
}
.col-gray {
  color: var(--gray);
}
.col-gray-d {
  color: var(--dark-gray);
}
.col-gray-lt-d {
  color: #656565;
}
.col-gray-lt {
  color: var(--light-gray);
}
.col-gray-mlt {
  color: #b7b7b7;
}

.bold {
  font-weight: 700;
}
.semi-bold {
  font-weight: 600;
}
.regular {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.light {
  font-weight: 300;
}

h1 {
  font-size: 124px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -4.96px;
}
h2 {
  font-size: 64px;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: -2.56px;
}
h3 {
  font-size: 54px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -2.16px;
}
h4 {
  font-size: 50px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -2px;
}
h5 {
  font-size: 48px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -1.92px;
}
h6 {
  font-size: 44px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -1.76px;
}
.font40 {
  font-size: var(--font-40);
  letter-spacing: var(--font-40-ls);
}
.font36 {
  font-size: var(--font-36);
  letter-spacing: var(--font-36-ls);
}
.font34 {
  font-size: var(--font-34);
  letter-spacing: var(--font-34-ls);
}
.font30 {
  font-size: var(--font-30);
  letter-spacing: var(--font-30-ls);
}
.font28 {
  font-size: var(--font-28);
  letter-spacing: var(--font-28-ls);
}
.font26 {
  font-size: var(--font-26);
  letter-spacing: var(--font-26-ls);
}
.font24 {
  font-size: var(--font-24);
  letter-spacing: var(--font-24-ls);
}
.font22 {
  font-size: var(--font-22);
  letter-spacing: var(--font-22-ls);
}
.font20 {
  font-size: var(--font-20);
  letter-spacing: var(--font-20-ls);
}
.font18 {
  font-size: var(--font-18);
  letter-spacing: var(--font-18-ls);
}
.font16 {
  font-size: var(--font-16);
  letter-spacing: var(--font-16-ls);
}
.font14 {
  font-size: var(--font-14);
  letter-spacing: var(--font-14-ls);
}
.font13 {
  font-size: var(--font-13);
  letter-spacing: var(--font-13-ls);
}
.font12 {
  font-size: var(--font-12);
  letter-spacing: var(--font-12-ls);
}

/* t-icon */
.t-icon {
  position: relative;
}
.t-icon:before {
  content: url("/media/img/icon/icon_title_cursor.svg");
  position: absolute;
  top: -25px;
  left: -31px;
}

/* btn */
.btn {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  transition: all 0.25s linear;
}
.btn.fit {
  width: fit-content;
}
.btn.full {
  width: 100%;
}
.btn.p32 {
  padding: 32px 40px;
}
.btn.p20 {
  padding: 20px 0;
}
.btn.p2028 {
  padding: 20px 28px;
}
.btn.p18 {
  padding: 18px 32px;
}
.btn.p12 {
  padding: 12px 0;
}
.btn.space {
  justify-content: space-between;
}

.btn.po {
  padding: 20px 28px;
  border-radius: 12px;
  background: var(--po);
  color: var(--white);
}
.btn.black {
  border-radius: 8px;
  background: var(--black);
  color: var(--white);
}
.btn.stroke {
  padding: 4px 0 3px;
  border-bottom: 1px solid var(--gray);
  color: var(--gray);
}

.btn.po-br {
  border-radius: 8px;
  border: 1px solid var(--po);
  color: var(--po);
}
.btn.po-br:hover {
  background: var(--po);
  color: var(--white);
}
.btn.po-br:hover svg path {
  stroke: var(--white);
}

.btn.blur-br {
  border-radius: 12px;
  border: 1px solid #d2d2d2;
  background: rgba(51, 51, 51, 0.4);
  backdrop-filter: blur(4px);
  color: var(--white);
}
.btn.blur-br:hover {
  background: var(--white);
  color: var(--black);
}
.btn.blur-br:hover svg path {
  stroke: var(--black);
}
/* fixed top btn */
.btn.top {
  position: fixed;
  aspect-ratio: 1 / 1;
  width: 44px;
  border-radius: 500px;
  background: var(--black);
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
/* fixed btn */
.btn.fixed {
  height: fit-content;
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background: var(--black);
  padding: 20px 16px;
  box-sizing: border-box;
  color: var(--white);
  writing-mode: vertical-lr;
  border-radius: 1000px;
  font-size: 13px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.26px;
}
/* hambuger btn */
.hambuger-btn {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.hambuger-btn div {
  width: 17px;
  height: 2px;
  border-radius: 50px;
  background: var(--black);
  transition: all 0.25s linear;
}
.hambuger-btn div:last-child {
  width: 12px;
}
header.on .hambuger-btn div:nth-child(1) {
  width: 7px;
  transform: rotate(-45deg) translate(-2px, 0px);
}
header.on .hambuger-btn div:nth-child(2) {
  width: 7px;
  transform: rotate(45deg) translate(-1px, -4px);
}
header.on .hambuger-btn div:last-child {
  display: none;
}

/* label */
.label {
  width: fit-content;
  color: var(--white);
  padding: 4px 14px;
  border-radius: 1000px;
}
.label.po {
  background: var(--gradient);
}
.label.po2 {
  background: var(--gradient2);
}

/* box */
.icon-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* header */
header {
  position: fixed;
  top: 37px;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  width: 98.34%;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 4px 40px 0px rgba(51, 51, 51, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.25s linear;
}
header .width-wrap {
  padding: var(--paddingHeader);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .width-wrap .left-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
header .width-wrap .left-area a img {
  width: 126px;
}
header .width-wrap .right-area {
  display: flex;
  gap: 64px;
}
header .width-wrap .right-area li a {
  color: #656565;
  transition: all 0.25s linear;
}
header .width-wrap .right-area li a.on,
header .width-wrap .right-area li a:hover {
  color: var(--po);
}

/* footer */
footer {
  border-top: 1px solid #e0e0e0;
}
footer .width-wrap {
  padding: var(--paddingFooter);
}
footer .width-wrap .top-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
footer .width-wrap .top-area img {
  width: 154px;
}
footer .width-wrap .top-area .list-zone {
  display: flex;
  gap: 40px;
}
footer .width-wrap .top-area .list-zone li {
  position: relative;
  display: flex;
  align-items: center;
}
footer .width-wrap .top-area .list-zone li:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 14px;
  background: var(--black);
  right: -20px;
}
footer .width-wrap .top-area .list-zone li:last-child::before {
  display: none;
}
footer .width-wrap .info-area {
  margin: 60px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* animation */
@keyframes w100 {
  0% {
    width: 0;
  }
  100% {
    width: 101%;
  }
}
@keyframes op1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes translate0 {
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* bottom to top */

.ani-tranlate0.bo-t {
  opacity: 0;
  transform: translateY(50%);
}
.ani-tranlate0.bo-t.js-start {
  animation-name: translate0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.ani-tranlate0.js-start {
  animation-name: translate0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.ani-tranlate0.l-r-not-op {
  transform: translateX(50%);
}

.a-delay200 {
  animation-delay: 0.2s;
}
.a-delay400 {
  animation-delay: 0.4s;
}
.a-delay600 {
  animation-delay: 0.6s;
}
.a-delay800 {
  animation-delay: 0.8s;
}
.a-delay1000 {
  animation-delay: 1s;
}
.a-delay1200 {
  animation-delay: 1.2s;
}
.a-delay1400 {
  animation-delay: 1.4s;
}
.a-delay1600 {
  animation-delay: 1.6s;
}

/* responsive */
@media all and (max-width: 1630px) {
  .width-wrap {
    width: 90%;
  }

  header .width-wrap {
    width: 89%;
  }
}
@media all and (max-width: 1570px) {
  .under1570 {
    display: block;
  }
  .top1570 {
    display: none;
  }
}
@media all and (max-width: 1540px) {
  .under1540 {
    display: block;
  }
}
@media all and (max-width: 1450px) {
  .under1450 {
    display: block;
  }
}
@media all and (max-width: 1300px) {
  .po-b-font {
    font-size: 108px;
  }
  h1 {
    font-size: 98px;
  }
  h2 {
    font-size: 52px;
  }
  h3 {
    font-size: 44px;
  }
  h4 {
    font-size: 38px;
  }
  h5 {
    font-size: 40px;
  }
  h6 {
    font-size: 36px;
  }
}
@media all and (max-width: 1060px) {
  .under1060 {
    display: block;
  }
  .top1060 {
    display: none;
  }
}
@media all and (max-width: 940px) {
  .width-wrap.content {
    width: 90%;
  }
}
@media all and (max-width: 900px) {
  .po-b-font {
    font-size: 78px;
  }
  h1 {
    font-size: 73px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 36px;
  }
  h4 {
    font-size: 23px;
  }
  h5 {
    font-size: 32px;
  }
  h6 {
    font-size: 28px;
  }

  .btn.top {
    bottom: 18px;
    right: 18px;
  }
  .btn.fixed {
    bottom: 200px;
    right: 18px;
    transform: none;
  }
  .hambuger-btn {
    display: flex;
  }

  header {
    overflow: hidden;
    border-radius: 24px;
    height: 83px;
    width: 94.7%;
    top: 20px;
  }
  header .width-wrap {
    flex-direction: column;
  }
  header .width-wrap .right-area {
    margin-top: 24px;
    gap: inherit;
    justify-content: space-between;
    width: 100%;
  }
  header .width-wrap .right-area li {
    opacity: 0;
  }
  header.on .width-wrap .right-area li {
    animation: op1 0.25s linear forwards;
  }
  header.on .width-wrap .right-area li:nth-child(2) {
    animation-delay: 0.1s;
  }
  header.on .width-wrap .right-area li:nth-child(3) {
    animation-delay: 0.2s;
  }
  header.on .width-wrap .right-area li:nth-child(4) {
    animation-delay: 0.3s;
  }
  header.on .width-wrap .right-area li:nth-child(5) {
    animation-delay: 0.4s;
  }
  header.on {
    height: 131px;
  }

  footer .width-wrap .top-area {
    flex-direction: column;
    gap: 20px;
  }
}
@media all and (max-width: 800px) {
  .t-icon:before {
    content: url("/media/img/icon/icon_title_cursor_mo.svg");
    top: -14px;
    left: -15px;
  }
}
@media all and (max-width: 720px) {
  .under720 {
    display: block;
  }
}
@media all and (max-width: 615px) {
  .btn.p32 {
    padding: 20px 28px;
  }
}
@media all and (max-width: 500px) {
  .under500 {
    display: block;
  }
  .top500 {
    display: none;
  }
  .po-b-font,
  h1 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }
  h2,
  h3 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }
  h4 {
    font-size: 16px;
    letter-spacing: -0.64px;
  }
  h5,
  h6 {
    font-size: 24px;
    letter-spacing: -0.96px;
  }

  .label {
    padding: 4px 12px;
  }

  .btn.p32 {
    padding: 20px;
  }
  .btn.p20 {
    padding: 12px 0;
  }

  header {
    height: 73px;
  }
  header .width-wrap .left-area a img {
    width: 86px;
  }
  header .width-wrap .right-area li a {
    font-size: 14px;
    letter-spacing: -0.56px;
  }
  header.on {
    height: 121px;
  }

  footer .width-wrap .top-area img {
    width: 110px;
  }
  footer .width-wrap .info-area {
    margin: 40px 0;
  }
  footer .width-wrap > P {
    font-size: 14px;
    letter-spacing: -0.56px;
  }
  footer .width-wrap .top-area .list-zone {
    gap: 27.67px;
  }
  footer .width-wrap .top-area .list-zone li:before {
    right: -14px;
  }
}