/* 임포트 영역 */
@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);
}

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%;
}

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: black;
}

.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));
}

.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%;
}

/* 공유 버튼 */
.share_wrap {
  position: fixed;
  bottom: 50px;
  right: 160px;
  width: 67.5px;
  height: 69px;
  z-index: 999;
}

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

.share {
  position: absolute;
  width: 198px;
  height: 99px;
  background: url(./../img/btn-share.svg) no-repeat center/ cover;
  right: -20.5px;
  top: -114px;
  display: flex;
}

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

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

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

/* 콘텐츠 영역별 세부 스타일 */
/* 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;
}

.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) {
  .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: 24px !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;
  }

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

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

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

  /* .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;
  }

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

  .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;
  }

  /* 공유 버튼 */
  .share_wrap {
    bottom: 45px;
    right: 45px;
  }

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