/* 임포트 영역 */
@import "./../font/pretendardvariable.css";
@import "./reset.css";
@import "./loader.css";
@import "./swiper-11.1.1.min.css";
@import "./ani.css";

/* 기본 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: light only;
  --primary-color: #ff153c;
  --dark-color: #181818;
  --light-gray: #d2d2d2;
  --border-color: rgba(0, 0, 0, 0.2);
  --bg: #000d2b;
}

html,
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
}

img {
  width: 100%;
}

/* 레이아웃 구조 */
.warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  background: #000D2B;
  zoom: 0.7;
}

.container {
  position: relative;
  width: 1500px;
}

/* 유틸리티 클래스 */
.mo {
  display: none;
}

.pc {
  display: block;
}

.opacity-0 {
  opacity: 0;
}

/* 공통 버튼 스타일 */
.btn-share {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 549px;
  height: 96px;
  font-size: 0;
  background: url(./../img/btn-share.svg) no-repeat center / cover;
  border-radius: 100px;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
}

.close_btn{
  
}

.play_btn {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 65px;
  height: 77px;
  background: url(./../img/play_btn.svg) no-repeat center / cover;
  z-index: 1;
  opacity: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* 공통 구독 버튼 스타일 */
.btn_subscribe {
  position: absolute;
  background: var(--primary-color);
  border-radius: 80px;
  display: flex;
  color: #fff;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  gap: 11.77px;
  line-height: 1.4;
  font-family: pretendard;
}

.content1,
.content2,
.content3,
.content4 {
  background: linear-gradient(to bottom, #001136 0%, #181818 100%);
}

.content3 .btn_subscribe,
.content5 .btn_subscribe {
  width: 402.24px;
  height: 58.33px;
  font-size: 24px;
}

.content3 .btn_subscribe {
  left: 549px;
  top: 428px;
}

.content5 .btn_subscribe {
  left: 549px;
  bottom: 195.67px;
}

.content6 .btn_subscribe {
  width: 402.24px;
  left: 555px;
  top: 774px;
  height: 58.33px;
  font-size: 24px;
}

.btn_arrow {
  width: 22px;
  height: 22px;
}

/* 화살표 스타일 */
.content1 .down {
  position: absolute;
  background: url(../img/down_arrow.svg) no-repeat center / cover;
  width: 41px;
  height: 17px;
  bottom: 97.37px;
  left: 729px;
}

.content1 .down.mo {
  width: 24.6px;
  height: 10.2px;
  background: url(../img/mo_down_arrow.svg) no-repeat center / cover;
  bottom: 52.4px;
  left: 347.2px;
  z-index: 99;
}

/* 컨텐츠 영역 공통 스타일 */
.content1,
.content2,
.content3,
.content4,
.content5,
.content6 {
  position: relative;
}

/* 헤더 텍스트 스타일 */
.content2_h,
.content3_h,
.content4_h,
.content5_h,
.content6_h {
  position: absolute;
}

/* 비디오 스타일 */
.content2 .video-wrap {
  overflow: hidden;
  position: absolute;
  top: 576.37px;
  left: 160px;
  aspect-ratio: 1180 / 663;
  width: 1180px;
  z-index: 99;
  border-radius: 20px;
}

.content2 .video-wrap video {
  width: 100%;
  height: 100%;
}

/* 공유 버튼 */
/* 720px 중앙 정렬 영역의 '안쪽 오른쪽 24px'에 고정 */
.share_wrap {
  position: relative;
  /* 화면 기준으로 중앙에 고정 */
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 254px;
  height: 112px;
  /* z-index: 999; */
  padding-bottom: 360px;
  display: flex;
  justify-content: space-between;
}

.btn-share_toggle {
  width: 112px;
  height: 112px;
  font-size: 0;
  background: url(./../img/btn-share_toggle_disney.png) no-repeat center / cover;
  border-radius: 100px;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
}

/* .share {
  position: absolute;
  width: 372.98px;
  height: 224px;
  background: url(./../img/btn-share.svg) no-repeat center / cover;
  right: -55px;
  top: -220px;
  display: flex;
} */

/* .share_kakao,
.share_url {
  width: 50%;
  height: 100%;
  opacity: 0;
} */

.pc_title {
  position: absolute;
  top: 0;
}

.mo_title {
  position: absolute;
  width: 230px;
  height: 134px;
  bottom: 22px;
  transform: translate(-50%, -50%);
}

/* 콘텐츠 영역별 세부 스타일 */
/* CONTENT 2 */
.content2 .content2_h.h_1 {
  top: 182px;
  left: 545px;
  width: 411px;
}

.content2 .content2_h.h_2 {
  top: 299.37px;
  left: 540px;
  width: 419px;
  height: 139px;
}

.content2 .content2_h.h_3 {
  bottom: 330px;
  left: 477px;
  width: 547px;
  height: 446px;
}

/* .content2 .content2_h.h_4 {
  bottom: 307px;
  left: 554px;
  width: 393px;
} */

/* CONTENT 3 */
.content3 {
  overflow: hidden;
}
.content3 .content3_h.h_1 {
  top: 204px;
  left: 532px;
  width: 436px;
}

.content3 .content3_h.h_2 {
  bottom: 147.89px;
  left: 630px;
  width: 240px;
}
.slide-container {
  width: 100%;
  overflow: hidden;
}

.slide-container {
  width: 100%;
  overflow: hidden;
}

.slide-track {
  display: flex;
  flex-direction: column;
  gap: 10.24px;
  opacity: 10%;
}

/* 슬라이드 행 */
.slide-row {
  display: flex;
  width: max-content;
}

.top_img,
.bottom_img {
  overflow: hidden;
  height: 346.04px;
}

/* 각각 트랙 자체에 애니메이션 부여 */
.slide-row.top {
  animation: slideTop 40s linear infinite;
}

.slide-row.bottom {
  animation: slideBottom 40s linear infinite;
}

/* 이미지 크기 고정 */
.slide-row img {
  width: 3117.39px;
  height: 346.04px;
  flex-shrink: 0;
  display: block;
}

@keyframes slideTop {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideBottom {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* CONTENT 4 */
.content4 .content4_h.h_1 {
  top: 174.11px;
  left: 485px;
  width: 530px;
}

.app .content4 .content4_h.h_1.pc {
  top: 26px;
}

.content4 .content4_h.img_1 {
  bottom: 187.77px;
  right: 288px;
  width: 446px;
}

.content4 .content4_h.img_2 {
  bottom: 187.77px;
  left: 527px;
  width: 446px;
  cursor: pointer;
}

/* CONTENT 5 */
.content5 .content5_h.h_1 {
  top: 167px;
  left: 485px;
  width: 530px;
}

/* 공통 스타일 */
.content5 .content5_h[class*="img_"] {
  position: absolute;
  bottom: 362px;
  width: 286px;
  left: 160px; /* 초기 위치 */
}

.img_5.pc {
  bottom: 312px;
  position: absolute;
  width: 386px;
  left: 557px;
}

.img_5.mo {
  bottom: 233px;
  position: absolute;
  width: 386px;
  left: 167px;
}

/* 각 이미지에 애니메이션 적용 + 딜레이 */
.content5 .content5_h.img_1 {
  z-index: 4;
}
.content5 .content5_h.img_2 {
  z-index: 3;
}
.content5 .content5_h.img_3 {
  z-index: 2;
}
.content5 .content5_h.img_4 {
  z-index: 1;
}
/* CONTENT 6 */
.content6 .content6_h.h_1 {
  top: 219.9px;
  left: 466px;
  width: 569px;
}

/* Step 1 */
.content6 .content6_h.step1_title {
  top: 479.68px;
  left: 504.5px;
  width: 502px;
}

.content6 .content6_h.step1_text {
  top: 620.68px;
  left: 471px;
  width: 570px;
}

.content6 .content6_h.img_1 {
  top: 501.68px;
  left: 407px;
  width: 698px;
}

/* Step 2 */
.content6 .content6_h.img_2 {
  top: 1006.4px;
  left: 407px;
  width: 698px;
}

.content6 .content6_h.step2_title {
  top: 981.68px;
  left: 504.5px;
  width: 500px;
}

.content6 .content6_h.step2_text1 {
  top: 1116.68px;
  left: 545px;
  width: 423px;
}

.content6 .content6_h.step2_text2 {
  top: 1258px;
  left: 705px;
  width: 102px;
}

.content6 .content6_h.step2_text3 {
  top: 1289.66px;
  left: 496px;
  width: 520.66px;
}

.content6 .content6_h.step2_text4 {
  top: 1887.66px;
  left: 581px;
  width: 348px;
}

/* Step 3 */
.content6 .content6_h.img_3 {
  bottom: 401.68px;
  left: 407px;
  width: 698px;
}

.content6 .content6_h.step3_title {
  bottom: 1097.06px;
  left: 519.5px;
  width: 473px;
}

.content6 .content6_h.step3_text1 {
  bottom: 897.06px;
  left: 515px;
  width: 480px;
}

.content6 .content6_h.step3_text2 {
  bottom: 474.21px;
  left: 496px;
  width: 520.66px;
}

.subscribe_click {
  position: absolute;
  width: 73px;
  height: 49px;
  right: 14.24px;
  top: -15.36px;
}

/* CONTENT 7 - 아코디언 */
.content7 {
  padding: 118px 208.4px 186.74px 208.4px;
  background-color: #fff;
  position: relative;
}

.content7 .pc {
  max-width: 1083.19px;
  margin: 0 auto;
}

.accordion {
  border-top: 0.74px solid rgba(0, 0, 0, 0.8);
  border-bottom: none;
  overflow: visible;
  background-color: #fff;
}

.accordion + .accordion {
  border-top: none;
}

.accordion:last-child {
  border-bottom: 0.74px solid rgba(0, 0, 0, 0.8);
}

.accordion-header {
  background-color: #fff;
  padding: 43px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 32px;
  color: var(--dark-color);
  line-height: 1.4;
  border-bottom: 0.74px solid rgba(0, 0, 0, 0.8);
}

.accordion-content {
  padding: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
  background-color: #fff;
}

.accordion-content-inner {
  padding: 30px 0 40px 0;
  line-height: 1.6;
  color: #444;
  background-color: #fff;
  border-bottom: 0.74px solid rgba(0, 0, 0, 0.8);
}

.active .accordion-content {
  height: auto;
}

/* .arrow {
  display: inline-block;
  width: 57.65px;
  height: 59.19px;
  background: url("../img/accorcdian_btn.svg") no-repeat center;
  transition: transform 0.3s ease;
} */

.active .arrow {
  transform: rotate(180deg);
}

.accordion-content ul {
  padding-left: 0px;
}

.accordion-content li,
.accordion-content p {
  line-height: 1.4;
  font-size: 24px;
  color: var(--dark-color);
}

.accordion-content strong {
  display: block;
  color: var(--dark-color);
  font-size: 24px;
  font-weight: bold;
}

/* 공통 점 목록 스타일 */
.dotted-list {
  padding-left: 0;
  list-style: none;
}

.dotted-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.4;
  color: var(--dark-color);
}

.dotted-list li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--dark-color);
  font-size: 24px;
  line-height: 1.4;
  font-weight: bold;
}

.question-image {
  background: url(../img/content7_h1.png) no-repeat center center / cover;
  height: 66px;
  width: 353px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18px;
  border-radius: 4px;
  margin-bottom: 82px;
}

.content7 .last_txt {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  color: var(--dark-color);
  font-size: 32px;
  padding-top: 82px;
}

.content7 .last_txt .bold {
  font-weight: bold;
  margin-left: 8px;
}

/* CONTENT 8 - 푸터 */
.content8 {
  position: relative;
  width: 1500px;
  height: 1112px;
  background-color: var(--dark-color);
  padding: 125.5px 150.59px 231.5px 150.59px;
}

.content8 .footer_box {
  width: auto;
  height: 755px;
}

.footer_box .head_line {
  width: auto;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: start;
  border-bottom: 1px solid #ffffff;
  font-size: 14.52px;
  color: #d4d4d4;
  margin-bottom: 23px;
}

.footer_box .head_line img {
  width: 17.87px;
  height: 17.87px;
}

.footer_contents {
  width: auto;
  height: 675px;
  color: var(--light-gray);
  line-height: 1.56;
  font-size: 16px;
}

.footer_contents .dotted-list li {
  padding-left: 15px;
  line-height: 1.56;
  color: var(--light-gray);
  font-size: 16px;
}

.footer_contents .dotted-list li::before {
  color: var(--light-gray);
  font-size: 16px;
  line-height: 1.56;
}

/* 버튼 배치 - 원래 분산된 배치들 */
.container.content1 .btn1 {
  top: 1412px;
}

.container.content2 .btn1 {
  top: 1812px;
}

.container.content2 .btn2 {
  top: 2138px;
}

.container.video button {
  top: 912px;
}

.container.keyvisual .bubble {
  position: absolute;
  width: 158px;
  height: 86.36px;
  left: 46px;
  bottom: 9px;
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
}

#avodannual {
  position: absolute;
  top: 0;
  width: 100%;
}

#toss {
  position: absolute;
  top: 1113px;
  width: 100%;
}

/* 모바일 스타일 */
@media screen and (max-width: 750px) {
  .warp {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform-origin: top center;
      background: #000D2B;
      zoom: 1;
    }

  .mo {
    display: block;
  }

  .pc {
    display: none;
  }

  .container {
    width: 720px;
  }

  .play_btn {
    opacity: 0;
    pointer-events: none;
  }

  /* 버튼 모바일 스타일 */
  .container button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: gray;
    width: 423px;
    height: 73px;
  }

  .container.content1 .btn1 {
    top: 971px;
  }

  .container.content2 .btn1 {
    top: 1380px;
  }

  /* 모바일 공통 버튼 스타일 */
  .btn_subscribe {
    transform: none;
    font-size: 36px !important;
    gap: 8.48px;
  }

  .btn_arrow {
    width: 22px;
    height: 22px;
  }

  .content5 .btn_arrow {
    width: 22px;
    height: 22px;
  }

  .content3 .btn_subscribe {
    width: 355px;
    left: 182px;
    top: 248px;
    height: 58.33px;
    background: #ff153c;
    display: flex;
  }

  .content5 .btn_subscribe {
    width: 402.24px;
    left: 159px;
    bottom: 127.67px;
    height: 58.33px;
    background: #ff153c;
    display: flex;
  }

  .content6 .btn_subscribe {
    width: 321.79px;
    left: 199px;
    top: 509.83px;
    height: 46.66px;
    font-size: 19.2px;
    gap: 9.42px;
    background: #ff153c;
  }

  /* 비디오 모바일 스타일 */
  /* .video-wrap {
    top: -427px;
    width: 583px;
    left: 50%;
  } */

  .content2 .video-wrap {
    top: 347.7px;
    left: 45px;
    aspect-ratio: 920 / 519;
    width: 630px;
    border-radius: 7px;
  }

  .app .content2 .video-wrap {
    top: 361px;
  }

  /* 모바일 콘텐츠 스타일 */
  /* CONTENT 2 */
  .content2 .content2_h.h_1 {
    top: 85px;
    left: 204px;
    width: 311.48px;
    height: 34px;
  }

  .app .content2 .content2_h.h_1 {
    top: 92px;
  }

  .content2 .content2_h.h_2 {
    top: 182px;
    left: 204px;
    width: 308px;
    height: 103px;
  }

  .app .content2 .content2_h.h_2 {
    top: 192px;
  }

  .content2 .content2_h.h_3 {
    bottom: 186.02px;
    left: 136px;
    width: 447px;
    height: 350px;
  }

  .app .content2 .content2_h.h_3 {
    bottom: 152px;
  }

  /* .content2 .content2_h.h_4 {
    bottom: 186.02px;
    left: 212px;
    width: 295px;
  } */

  /* CONTENT 3 */
  .content3 .content3_h.h_1 {
    top: 95px;
    left: 210px;
    width: 296px;
    height: 101px;
  }

  .content3 .content3_h.h_2 {
    bottom: 70px;
    left: 253px;
    width: 213px;
  }

  .slide-container {
    width: 100%;
    overflow: hidden;
  }

  .slide-track {
    display: flex;
    flex-direction: column;
    gap: 5.43px;
    opacity: 10%;
  }

  /* 슬라이드 행 */
  .slide-row {
    display: flex;
    width: max-content;
  }

  .top_img,
  .bottom_img {
    overflow: hidden;
    height: 212px;
  }

  /* 각각 트랙 자체에 애니메이션 부여 */
  .slide-row.top {
    animation: slideTop 40s linear infinite;
  }

  .slide-row.bottom {
    animation: slideBottom 40s linear infinite;
  }

  /* 이미지 크기 고정 */
  .slide-row img {
    width: 1723.27px;
    height: 212px;
    flex-shrink: 0;
    display: block;
  }

  @keyframes slideTop {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes slideBottom {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  /* CONTENT 4 */
  .content4 .content4_h.h_1 {
    top: 117px;
    left: 95px;
    width: 530px;
    height: 279px;
  }

  .app .content4 .content4_h.h_1 {
    top: 88px;
  }

  .content4 .content4_h.img_1 {
    top: 483px;
    right: 159.3px;
    width: 401.4px;
  }

  .app .content4 .content4_h.img_1 {
    top: 440px;
  }

  .content4 .content4_h.img_2 {
    bottom: 165.73px;
    width: 401.4px;
    left: 160.3px;
  }

  /* CONTENT 5 */
  .content5 .content5_h.h_1 {
    top: 120px;
    left: 178px;
    width: 365px;
  }

  .content5 .content5_h.img_1 {
    bottom: 285.71px;
    left: 46px;
  }

  .content5 .content5_h.img_2 {
    bottom: 285.71px;
    left: 344px;
  }

  .content5 .content5_h.img_3 {
    bottom: 285.71px;
    left: 642px;
  }

  .content5 .content5_h.img_4 {
    bottom: 285.71px;
    left: 940px;
  }

  /* CONTENT 6 */
  .content6 .content6_h.h_1 {
    top: 110px;
    left: 151px;
    width: 417px;
  }

  .content6 .content6_h.img_1 {
    top: 336px;
    left: 95px;
    width: 530px;
    height: 261px;
  }

  .content6 .content6_h.step1_title {
    top: 317.82px;
    left: 215px;
    width: 290.86px;
  }

  .content6 .content6_h.step1_text {
    top: 401.49px;
    left: 195px;
    width: 330px;
  }

  .content6 .content6_h.img_2 {
    top: 657.88px;
    left: 95px;
    width: 530px;
    height: 654px;
  }

  .content6 .content6_h.step2_title {
    top: 643px;
    left: 215px;
    width: 289.86px;
  }

  .content6 .content6_h.step2_text1 {
    top: 722.83px;
    left: 238px;
    width: 244px;
  }

  .content6 .content6_h.step2_text2 {
    top: 814.88px;
    left: 303px;
    width: 107px;
  }

  .content6 .content6_h.step2_text3 {
    top: 840.88px;
    left: 202px;
    width: 319px;
    height: 339px;
  }

  .content6 .content6_h.step2_text4 {
    top: 1216.28px;
    left: 219.26px;
    width: 279px;
  }

  .content6 .content6_h.img_3 {
    bottom: 186px;
    left: 95px;
    width: 530px;
    height: 482px;
  }

  .content6 .content6_h.step3_title {
    bottom: 649.45px;
    left: 223px;
    width: 274.86px;
  }

  .content6 .content6_h.step3_text1 {
    bottom: 533px;
    left: 221px;
    width: 279px;
  }

  .content6 .content6_h.step3_text2 {
    bottom: 234px;
    left: 167px;
    width: 392px;
  }

  .subscribe_click {
    width: 49px;
    height: 34px;
    right: 39.63px;
    bottom: 38.82px;
  }

  /* CONTENT 7 */
  .content7 {
    padding: 104px 88px 107px 88px;
    background-color: #fff;
  }

  .content7 .mo {
    max-width: 544px;
    margin: 0 auto;
  }

  .question-image {
    height: 33px;
    width: 172px;
    margin-bottom: 45px;
  }

  .accordion-header {
    padding: 12px 0;
    font-size: 16px;
    line-height: 1.5px;
  }

  /* .arrow {
    width: 30px;
    height: 30px;
    background: url(../img/mo/content7/content7_btn.svg) no-repeat center;
  } */

  .content7 .last_txt {
    font-size: 18px;
    padding-top: 45px;
    line-height: 31.7px;
    letter-spacing: -0.02em;
  }

  .accordion-content strong {
    font-size: 16px;
  }

  .accordion-content li,
  .accordion-content p {
    font-size: 16px;
  }

  .dotted-list li {
    padding-left: 20px;
  }

  .dotted-list li::before {
    left: 10px;
    font-size: 16px;
  }

  /* CONTENT 8 */
  .content8 {
    width: 720px;
    height: 1076px;
    padding: 83.78px 61.58px 174.78px 61.58px;
  }

  .footer_box .head_line {
    height: 28px;
    font-size: 14px;
    margin-bottom: 11.45px;
  }

  .footer_contents {
    height: auto;
    font-size: 14px;
  }

  /* 슬라이드 */
  .content5-swiper.mo {
    width: 100%;
    position: absolute;
    bottom: 285px;
  }

  .content5-swiper .swiper-slide {
    width: 1180px;
    height: 594px;
  }

  .content5-swiper .swiper-slide img {
    width: 286px;
    height: 594px;
  }


  .footer_contents .dotted-list li {
    padding-left: 15px;
    line-height: 1.56;
    color: var(--light-gray);
    font-size: 14px;
  }

  
}

.top_section {
  font-family: 'Pretendard';
}
.top_banner {
  position: absolute;
  top: 0;
  z-index: 999;
}
.content1_box {
  font-family: 'Pretendard !important';
  height: 134px;
  font-size: 48px;
  font-weight: bold;
  line-height: 140%;
  letter-spacing: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.subscribe_section {
  width: 100%;
  height: 447px;
  position: absolute;
  bottom: -3px;
  background: linear-gradient(to bottom,
        /* 위 → 아래 */
        rgba(0, 13, 43, 0) 0%,
        /* 0% : 투명 */
        rgba(0, 13, 43, 1) 45%
        /* 85% : 남색 */
      );
}

.mySwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.down {
  position: absolute;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 99;

  /* 위아래 이동 애니메이션 */
  animation: downUp 1.6s ease-in-out infinite;
}
.btn_subscribe {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 99px;
  border-radius: 15px;
  font-size: 36px;
  z-index: 999;
  transition: background 0.2s ease, color 0.2s ease;
}

/* hover 시 크기·위치 고정, 색상만 변경 */
.btn_subscribe:hover {
  background: #fff;
  color: #FF153C;
}

/* 750px 이하 (반응형) */
@media (max-width: 750px) {
  .btn_subscribe {
    bottom: 5vw;
    width: 83.4vw;
    height: 13.8vw;
    font-size: 5vw !important;
    border-radius: 3vw;
  }

  /* hover 시에도 같은 비율 그대로 유지 */
  .btn_subscribe:hover {
    background: #fff;
    color: #FF153C;
  }
}

.content_section {
  position: relative;
  width: 720px;
  /* background-color: #000D2B;
  background-image: url(../img/disney/content_back.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.video_box {
  position: relative;
  top: 34px;
  width: 100%;
  height: 925px;
  border-radius: 15px;
  z-index: 0;
  /* 기준 레이어 */
}
.video_box.web_video_box {
  position: relative;
  top: 0;
  width: 100%;
  height: 330.54px;
  border-radius: 15px;
  z-index: 0;
  /* 기준 레이어 */
}

.video_box .video-wrap {
  position: relative;
  z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    /* width: 519px; */
    /* height: 925px; */
}

 /* .ellipse{
  position: absolute;
  width: 100%;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
} */

.video_box .circle {
  top: 0;
  width: 772px;
  height: 772px;
  border-radius: 50%;
  background: #0048A7;
  opacity: 0.7;
  filter: blur(200px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.video_box iframe {
  transition: transform 0.9s ease-in-out;
  transform-origin: center center;
}

/* 유니버스 */
.universe_box{
  width: 720px;
  height: 766px;
  position: relative;
  margin-top: 385.3px;
}

.universe_img{
  width: 588px;
  height: 680px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

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

.universe_txt.universe_txt1{
  display: flex;
  flex-direction: column;
  font-size: 44px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard' !important;
  top: 0;
  left: 283px;
  width: 392px;
  height: 180px;
}

.universe_txt.universe_txt2{
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: medium;
  line-height: 1.6;
  color: #fff ;
  /* opacity: 0.8; */
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard' !important;
  top: 226px;
  left: 349px;
  width: 522px;
  height: 102px;
}

.universe_box .slide-row.top img {
  width: 1815.02px;
  height: 100%;
  flex-shrink: 0;
  display: block;
  margin-left: 40px;
}

.universe_box .slide-row.bottom img {
  width: 994.93px;
  height: 100%;
  flex-shrink: 0;
  display: block;
  margin-left: 40px;
}

.universe_box  .slide-track {
  display: flex;
  flex-direction: column;
  gap: 62.08px;                                                                                      
  /* opacity: 100%; */
  position: relative;
  top: 417px;
  z-index: 99;
  width: 100%;
  left: 50%;
  transform: translateX(-50%) !important;
}

.universe_box .top_img {
  overflow: hidden;
  height: 103.52px;
}

.universe_box .bottom_img {
  overflow: hidden;
  height: 113.76px;
  /* width: 690px; */
}

.universe_box .ellipse{
  position: absolute;
  width: 754px;
  height: 754px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.universe_box .circle {
    width: 772px;
    height: 772px;
    border-radius: 50%;
    background: #0048A7;
    opacity: 0.7;
    filter: blur(200px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 180px;
}



/* 스탠다드 */
.standard_box{
  position: relative;
  width: 720px;
  margin-top: 224px;
  height: 1076px;
}

.standard_img {
  width: 588px;
  height: 1167px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.standard_txt {
  position: absolute;
}

.standard_txt.standard_txt1 {
  display: flex;
  flex-direction: column;
  font-size: 44px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard' !important;
  top: 0;
  left: 263px;
  width: 352px;
  height: 180px;
}

.standard_txt.standard_txt2 {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: medium;
  line-height: 1.6;
  color: #fff;
  /* opacity: 0.8; */
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard' !important;
  top: 226px;
  width: 469px;
  left: 321.5px;
  height: 102px;
}

.standard_box .circle {
  top: 18px;
  width: 772px;
  height: 772px;
  border-radius: 50%;
  background: #0048A7;
  opacity: 0.7;
  filter: blur(200px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* 컨테이너 */
.slide_box {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  top: 414px;
  height: 662px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}

.slide_container {
  display: flex;
  align-items: center;
  transition: transform 400ms ease;
  will-change: transform;
}

/* 슬라이드 기본(레이아웃 기준 크기 = 가운데 기준) */
.slide_item {
  width: 458.53px;
  height: 662px;
  margin: 0 10px;
  flex: 0 0 auto;
  border-radius: 20px;
  overflow: hidden;
  /* 비활성 시 작게/반투명; 활성에서 덮어씀 */
  transform: scale(0.9);
  opacity: .3;
  transition: transform 260ms ease, opacity 260ms ease, filter 260ms ease;
  position: relative;
}

/* 중앙 외 좌우 그라데이션(비활성 슬라이드 위에 덮는 페이드) */
.slide_item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0, 0, 0, .20), transparent 25%),
    linear-gradient(to right, rgba(0, 0, 0, .20), transparent 25%);
  opacity: 1;
  transition: opacity 260ms ease;
}

/* 활성(가운데) */
.slide_item.is-active {
  transform: scale(1);
  opacity: 1;
}

.slide_item.is-active::after {
  opacity: 0;
}

.slide_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 네비 버튼 */
.nav_btn {
  position: absolute;
  top: 724px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
  z-index: 3;
  font-size: 20px;
}

.nav_btn.prev {
  left: 56px;
}

.nav_btn.next {
  right: 56px;
}

.nav_btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.nav_arrow {
  width: 10px;
  height: 18px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 15px;
}

/* reasonable_box */
.reasonable_box {
  position: relative;
  width: 100%;
  width: 340px;
  height: 155px;
  margin-top: 268px;
  left: 87px;
}


/* 3pack */
.pack_container {
  position: relative;
  width: 100%;
  max-height: 1106.5px;
  min-height: 720px;
  margin-top: 77px;
}

.pack_box {
  position: relative;
  width: 600px;
  margin: 0 auto;
  border: 1px solid #3597FF;
  border-radius: 20px;
  overflow: visible;

  background: url(../img/disney/pack/3pack.png) no-repeat top center;
  background-size: 600px auto;
  background-origin: content-box;
  min-height: 720px;
  max-height: 1106.5px;
}

.pack_box .pack_txt {
  position: relative;
  width: 509.24px;
  height: 447px;
  top: 138px;
  left: 40px;
}


.pack_detail {
  /* button 으로 변경 */
  margin-top: 195px;
  margin-bottom:38px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.pack_detail span {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: 'Pretendard' !important;
  line-height: 1.4;
}

.pack_box .packbox_detail_img {
  position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.pack_box .packbox_detail_img.is-open {
  max-height: 276.1px;
  /* 펼쳤을 때 목표 높이 */
  opacity: 1;
  margin-bottom: 80px;
  /* margin-top: 68px; */
}

.pack_detail img {
  width: 18px;
  height: 10px;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}


.pack_container .circle {
  top: -141px;
  width: 772px;
  height: 772px;
  border-radius: 50%;
  background: #0048A7;
  opacity: 0.7;
  filter: blur(200px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 화살표 회전 */
.pack_detail .arrow {
  transition: transform 0.3s ease;
}
.pack_detail .arrow.rotate {
  transform: rotate(180deg);
}


/* ====== double 전용 ====== */
.double_container {
  position: relative;
  width: 100%;
  max-height: 1040.5px;
  min-height: 662.5px;
  margin-top: 74px;
}

.double_box {
  position: relative;
    width: 600px;
    margin: 0 auto;
    border: 1px solid #3597FF;
    border-radius: 20px;
    overflow: visible;
  
    background: url(../img/disney/pack/double.png) no-repeat top center;
    background-size: 600px auto;
    background-origin: content-box;
    min-height: 662.5px;
    max-height: 1106.5px;
}

.double_box .double_img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 588px;
}

.double_box .double_title{
  width: 189px;
  height: 81px;
  position: relative;
  margin-top: 64px;
  left: 47px;
}

.double_box .double_txt {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 509px;
  height: 392px;
  top: 143px;
}

/* 버튼 */
.double_detail {
  /* button 으로 변경 */
    margin-top: 195px;
    margin-bottom: 38px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

.double_detail span {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  font-family: 'Pretendard' !important;
  line-height: 1.4;
}

.double_box .double_detail_img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 416px;
  height: auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.double_box .double_detail_img.is-open {
  max-height: 327.1px;
  opacity: 1;
  margin-bottom: 67.9px;
}


.pack_detail .arrow,
.double_detail .arrow {
  transition: transform .25s ease;
  transform-origin: center;
  display: inline-block;
  width: 18px;
  height: 10px;
}

/* 기본: 접힘 */
.packbox_detail_img,
.double_detail_img {
  display: block;
  /* 인라인 display:none 쓰지 않기 */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.arrow {
  transition: transform 0.25s ease;
}

.arrow.rotate {
  transform: rotate(180deg);
}

/* enjoy 영역 */
.enjoy_box {
  position: relative;
  margin-top: 230px;
  width: 100%;
  height: 973px;
}

.enjoy_box .enjoy_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 588px;
  border-radius: 15px;
  border: 1px solid rgb(255, 255, 255, 0.15);
}

.enjoy_box .enjoy_txt {
  position: absolute;
  top: 0;
  /* left: 50%; */
  transform: translateX(-50%);
  font-size: 64px;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
  font-family: 'Pretendard' !important;
  width: 100%;
  height: 90px;
  text-align: center;
}

/* 슬라이드 박스 */
.enjoy_box .swiper {
  position: absolute;
  top: 175.5px;
  /* left: 50%; */
  transform: translateX(-50%);
  width: 720px;
  height: 695.4px;
  border-radius: 20px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  /* 이미지 비율 유지하면서 슬라이드 안에 맞추기 */
  margin: 0 auto;
  /* 좌우 가운데 정렬 */
  display: block;
}

.swiper-pagination {
  bottom: 52px !important;
  /* 조금 위로 */
}

.swiper-pagination-bullet {
  background: #ff004c;
  width: 11px !important;
  height: 11px !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #D9D9D9 !important;
}
.swiper-pagination-bullet{
  background: rgb(217, 217, 217, 50%) !important;
}

.enjoy_box .circle {
  top: 0px;
  width: 772px;
  height: 772px;
  border-radius: 50%;
  background: #0048A7;
  opacity: 0.7;
  filter: blur(200px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 자주 묻는 질문 */
.question_container{
  position: relative;
  margin-top: 190px;
  width: 100%;
  max-height: 2271px;
}

.question_container .circle{
  top: -34px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: #0048A7;
  opacity: 0.7;
  filter: blur(200px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.question_container .question_box{
  position: relative;
  width: 545px;
  /* background-image: url(../img/disney/question/question_back.png); */
  height: auto;
  transform: translate(-50%);
  left: 50%;
}

.question_title{
  position: relative;
  margin-bottom: 96px;
  font-size: 64px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  font-family: 'Pretendard' !important;
}

.question{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
}

.question .list{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question .third_list{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start !important;
}

.question_txt{
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  font-family: 'Pretendard' !important;
  display: flex;
  align-items: center;
}

.question .info{
  position: relative;
  left: 53%;
  transform: translateX(-50%);
  width: 550px;
  font-size: 24px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);;
  line-height: 1.6;
  font-family: 'Pretendard' !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* max-height: 0; */
  opacity: 1;
  /* margin-bottom: 0 !important;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease; */
  }

.fifth_info {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* 열렸을 때 */
.fifth_info.is-open {
  opacity: 1;
  margin-bottom: 66px;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.notice-list li::marker {
  color: #FFFFFF;
  /* 점 색상 */
}

.notice-list a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.notice-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.notice-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 24px;
  color: #fff;
  line-height: 1.6;
}

/* 화살표 회전 애니메이션 */
.question_arrow img {
  transition: transform 0.3s ease;
}

.question_arrow img.rotate {
  transform: rotate(180deg);
}

/* .third_info{
  width: 483px !important;
  height: 200px;
  left: 53% !important;
} */

.fourth_info{
  width: 454px !important;
  height: 50px;
  left: 51% !important;
}

.question_check{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 381px;
  height: 25px;
  font-size: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  font-family: 'Pretendard' !important;
}

.line{
  position: relative;
  width: 607px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  height: 1px;
}

.question.open .info {
  opacity: 1;
}

/* 항목별 고정 높이 + 여백 (요청값) */
.question_first.open .first_info {
  max-height: 75px;
  margin-bottom: 33px !important;
}

.question_second.open .second_info {
  max-height: 75px;
  margin-bottom: 33px !important;
}

.question_third.open .third_info {
  max-height: 200px;
  margin-bottom: 33px !important;
}

.question_fourth.open .fourth_info {
  max-height: 50px;
  margin-bottom: 55px !important;
}

.question_fifth.open .fifth_info {
  max-height: 1676px;
  margin-bottom: 55px !important;
}

/* 화살표 회전(기존 규칙 유지) */
.question .question_arrow img {
  transition: transform 0.25s ease;
}

.question.open .question_arrow img {
  transform: rotate(180deg);
}

/* 꼭 알아두세요 */
.notice_container {
  position: relative;
  margin-top: 32px;
  width: 100%;
  max-height: 1943px;
}

.notice_container .notice_box {
  position: relative;
  width: 588px;
  /* background-image: url(../img/disney/question/question_back.png); */
  height: auto;
  transform: translate(-50%);
  left: 50%;
  /* border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px; */
}

.fifth_info{
  left: 53% !important;
}

.opacity_0{
  opacity: 0;
  will-change: transform, opacity;
}


.top_btn{
  width: 112px;
  height: 112px;
  background: transparent;
}


  #tvingVideo:fullscreen {
    object-fit: contain !important;
    width: auto !important;
    height: 100% !important;
  }

  #tvingVideo:-webkit-full-screen {
    object-fit: contain !important;
    width: auto !important;
    height: 100% !important;
  }

  #tvingVideo:-moz-full-screen {
    object-fit: contain !important;
    width: auto !important;
    height: 100% !important;
  }

  #tvingVideo:-ms-fullscreen {
    object-fit: contain !important;
    width: auto !important;
    height: 100% !important;
  }

/* @media (min-width: 761px) {
  .btn-share_toggle:hover {
    width: 112px;
    height: 112px;
    font-size: 0;
    background: url(./../img/btn-share_toggle_disney_hover.png) no-repeat center / cover;
    border-radius: 100px;
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.2));
  }

  .top_btn:hover {
    width: 56px;
    height: 56px;
    background: url(../img/top_btn_hover.png) no-repeat center / cover;
  }
} */

.share_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 팝업 내부 박스 */
.share_box {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  width: 372.98px;
  height: 216px;
  /* padding: 24px 16px 32px; */
  text-align: center;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
  animation: fadeInUp 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.share_box .share_kakao{
  width: 112px;
  height: 109.04px;
}

.share_box .share_url{
  width: 112px;
  height: 109.04px;
}


/* 닫기 버튼 */
.close_btn {
  position: absolute;
  top: 21px;
  right: 21px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.close_btn img {
  width: 15px;
  height: 15px;
}

.fadeIn20 {
  animation: fadeIn20 0.6s ease forwards;
}

.fadeOut20 {
  animation: fadeOut20 0.6s ease forwards;
}