@charset "UTF-8";

/* 공통적용 - 페이지설정 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #bbb;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* 공통적용 - 텍스트에 stroke + 쉐도우 */
t {
  color: #fff;
  text-shadow: var(--text-stroke);
  filter: drop-shadow(0 0 2px #000);
  font-weight: 500;
}
t.t500 {
  text-shadow: var(--text-stroke500);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4666666667));
}
t.t100 {
  text-shadow: var(--text-stroke100);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}
t.t400 {
  -webkit-text-stroke: 1px black;
  color: #fff;
}

/* 공통적용 - 아이콘 관련 i */
i {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  aspect-ratio: 1/1;
  position: relative;
}
i::after,
i::before {
  position: absolute;
  content: "";
}
i.arrow {
  position: relative;
  background-color: #fff;
}
i.arrow::after {
  width: 30%;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  border: 2px solid #000;
  border-width: 0 2px 2px 0;
}
i.arrow.down::after {
  transform: translate(-50%, -75%) rotate(45deg);
}
i.arrow.up::after {
  transform: translate(-50%, -35%) rotate(-135deg);
}
i.arrow.right::after {
  transform: translate(-70%, -50%) rotate(-45deg);
}
i.arrow.left::after {
  transform: translate(-35%, -50%) rotate(135deg);
}
i.close::after,
i.close::before {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background-color: black;
}
i.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
i.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* --- 화살표 */
/* --- 닫기 X */
/* 공통적용 - 자세히보기 팝업 popup_wrap */

.popup_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6666666667);
  overflow: hidden;
  z-index: 1000;
  display: none;
}
.popup_wrap .btn_close {
  --size-px: 64px;
  width: var(--size-px);
  height: var(--size-px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 16px;
  right: 24px;
}
.popup_wrap .btn_close i {
  width: initial;
  height: 100%;
  _opacity: 0.8;
}
.popup_wrap .btn_close i::after,
.popup_wrap .btn_close i::before {
  background-color: #fff;
}
.popup_wrap .btn_close:hover i {
  opacity: 1;
}
.popup_wrap .popup_contents_wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  overscroll-behavior: contain; /* 바운스 효과 제한 */
}
.popup_wrap img {
  padding: 40px 0;
  width: 60%;
  max-width: 920px;
  min-width: 600px;
  object-fit: cover;
  object-position: top center;
}

.popup_wrap .flip_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: auto;
  top: 50%;
  translate: 0 -50%;
}
.popup_wrap .flip_wrap .flipbook {
  width: 1120px;
  height: 792px;
  overflow: hidden;
}
.popup_wrap .flip_wrap .flipbook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 95%,
    rgba(0, 0, 0, 0.0666666667) 100%
  );
  z-index: 1000;
}
.popup_wrap .flip_wrap .flipbook .page {
  width: 560px;
  height: 792px;
  background-color: #fff;
}
.popup_wrap .flip_wrap .flipbook .page img {
  width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  padding: 0;
}
.popup_wrap .flip_wrap .flip-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  max-width: 1120px;
  max-height: 792px;
  height: 100%;
  z-index: 1001;
  display: flex;
  justify-content: space-between;
}
.popup_wrap .flip_wrap .flip-controls button {
  width: 20%;
  height: 100%;
  position: relative;
}
.popup_wrap .flip_wrap .flip-controls button:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/flipbook_corner.png) no-repeat bottom right/50px;
  filter: drop-shadow(4px 15px 8px rgba(0, 0, 0, 0.6666666667));
}
.popup_wrap .flip_wrap .flip-controls button:hover::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    105deg,
    transparent 80%,
    rgba(0, 0, 0, 0.4666666667) 100%
  );
}
.popup_wrap .flip_wrap .flip-controls button:hover:first-child {
  transform: scaleX(-1);
}

/* 공통 적용 - 인트로 제목 영역 */
section.intro .txt_box {
  width: 100%;
  margin-bottom: 2.08333%;
}
section.intro .txt_box .main_txt {
  /* font-size: clamp(40px, 2.08333vw, 52px);*/
  font-size: 52px;
  line-height: 1.2;
}

section.intro .txt_box .eng_txt {
  font-size: clamp(20px, 1.02vw, 24px);
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 14px;
}
section.intro .txt_box .sub_txt {
  font-size: clamp(16px, 0.8333vw, 20px);
  font-size: 20px;
  line-height: 1.4;
}

/* 공통적용 - 중제목 영역 txt_box */

.txt_box {
  text-align: center;
}
.txt_box p {
  color: #fff;
  font-weight: 700;
}
.txt_box.dark p:not(.eng_txt) {
  color: #000;
}
.txt_box .eng_txt {
  color: #00a6ff;
  font-size: 20px;
  line-height: 33px;
}
.txt_box .main_txt {
  font-size: 40px;
}
.txt_box .sub_txt {
  margin-top: 40px;
  font-size: 16px;
  font-weight: 400;
}

.con_txt {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 18px;
  line-height: 180%;
}

.con_txt p {
  color: rgba(0, 0, 0, 0.8);
  word-break: keep-all;
  text-wrap: balance;
}

.con_txt p b {
  color: #000;
}

button.btn_more {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  letter-spacing: -0.06em;
  width: max-content;
  margin-top: 24px;
}
button.btn_more::after {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url(../img/ico_more.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 6px;
  translate: 0 2px;
}
button.btn_more:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
button.btn_more:hover::after {
  background-image: url(../img/ico_more_hover.svg);
}

/* 공통적용 - 인트로 스크롤 박스 scroll_box */
.scroll_box {
  width: max-content;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  font-size: 14px;
}
.scroll_box > div {
  width: 2px;
  height: 140px;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.scroll_box > div::before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  animation: scroll-down 2s infinite ease-in-out;
}

@keyframes scroll-down {
  0% {
    transform-origin: 50% 100%;
    transform: scaleY(1);
  }
  50% {
    transform-origin: 50% 100%;
    transform: scaleY(0);
  }
  50.1% {
    transform-origin: 50% 0;
    transform: scaleY(0);
  }
  to {
    transform-origin: 50% 0;
    transform: scaleY(1);
  }
}
/* 공통적용 - 체크박스 */
label.checkbox {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
label.checkbox input[type="checkbox"] {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  appearance: none;
}
label.checkbox input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.3654 4.23423C13.5154 4.38425 13.5997 4.5877 13.5997 4.79983C13.5997 5.01196 13.5154 5.21541 13.3654 5.36543L6.96544 11.7654C6.81542 11.9154 6.61197 11.9997 6.39984 11.9997C6.18771 11.9997 5.98426 11.9154 5.83424 11.7654L2.63424 8.56543C2.48851 8.41455 2.40788 8.21247 2.4097 8.00271C2.41152 7.79295 2.49566 7.5923 2.64398 7.44397C2.79231 7.29565 2.99296 7.21151 3.20272 7.20969C3.41247 7.20787 3.61456 7.2885 3.76544 7.43423L6.39984 10.0686L12.2342 4.23423C12.3843 4.08425 12.5877 4 12.7998 4C13.012 4 13.2154 4.08425 13.3654 4.23423Z' fill='white'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
}
label.checkbox span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.32px;
}
label.checkbox span .en {
  opacity: 0.5;
}

.blind {
  text-indent: -9999px;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
}

/* --------------------------------- */
/* ! 인트로 */
/* --------------------------------- */
section.intro {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

section.intro .video_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section.intro .video_bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.intro .txt_box .eng_txt {
  color: #00a6ff;
}

.m_br {
  display: none;
}
.pc_br {
  display: block;
}

/* 아이콘 */
.ico_back {
  width: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M3.14633 9.41169C2.99011 9.56796 2.90234 9.77988 2.90234 10.0009C2.90234 10.2218 2.99011 10.4337 3.14633 10.59L7.8605 15.3042C7.93737 15.3838 8.02933 15.4473 8.131 15.4909C8.23267 15.5346 8.34202 15.5576 8.45266 15.5586C8.56331 15.5595 8.67305 15.5384 8.77546 15.4965C8.87787 15.4546 8.97092 15.3928 9.04916 15.3145C9.12741 15.2363 9.18928 15.1432 9.23118 15.0408C9.27308 14.9384 9.29417 14.8287 9.29321 14.718C9.29225 14.6074 9.26926 14.498 9.22558 14.3963C9.18191 14.2947 9.11842 14.2027 9.03883 14.1259L5.74717 10.8342L16.783 10.8342C17.004 10.8342 17.216 10.7464 17.3723 10.5901C17.5285 10.4338 17.6163 10.2219 17.6163 10.0009C17.6163 9.77984 17.5285 9.56788 17.3723 9.4116C17.216 9.25532 17.004 9.16752 16.783 9.16752L5.74717 9.16752L9.03883 5.87585C9.19063 5.71868 9.27463 5.50818 9.27273 5.28968C9.27083 5.07119 9.18319 4.86218 9.02868 4.70767C8.87417 4.55316 8.66516 4.46552 8.44667 4.46362C8.22817 4.46173 8.01767 4.54572 7.8605 4.69752L3.14633 9.41169Z' fill='black'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}
.ico_list {
  width: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M4.11719 8H10.1172M4.11719 5.5H10.1172M11.1172 5.5H12.1172M11.1172 8H12.1172M11.1172 10.5H12.1172M4.11719 10.5H10.1172M2.61719 2.5H13.6172V13.5H2.61719V2.5Z' stroke='black' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* media query */
@media all and (max-width: 1400px) {
  .m_br {
    display: block;
  }
  .pc_br {
    display: none;
  }

  section.intro .txt_box .main_txt {
    font-size: clamp(32px, 8.8888vw, 52px);
  }

  section.intro .txt_box .eng_txt {
    font-size: clamp(14px, 3.8888vw, 24px);
  }
  section.intro .txt_box .sub_txt {
    font-size: clamp(14px, 3.8888vw, 20px);
  }

  .txt_box .eng_txt {
    color: #006aff;
    font-size: clamp(12px, 3.3333vw, 20px);
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .txt_box .main_txt {
    font-size: clamp(24px, 6.6666vw, 40px);
    line-height: 1.4;
  }
  .txt_box .sub_txt {
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.6;
  }

  button.btn_more {
    font-size: clamp(12px, 3.33333vw, 18px);
  }
  button.btn_more::after {
    min-width: 12px;
    width: 3.33333vw;
    max-width: 18px;
    min-height: 12px;
    height: 3.33333vw;
    max-height: 18px;
    vertical-align: baseline;
  }

  .popup_wrap img {
    max-width: 600px;
    width: 100%;
    min-width: auto;
  }
}
@media all and (max-width: 576px) {
  .scroll_box > div {
    width: 1px;
  }
}