/* 와이드 pc  */

.section_header {
  display: flex;
  align-items: center;
  gap: 80px;
}

#content .more {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.4s ease-in-out;
}

#content .more-text {
  font-weight: 800;
  font-size: var(--font-20px);
}

#content .more img {
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

#content .more:hover {
  transform: translateX(25px);
}

#content .more:hover .more-text {
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#content .more:hover img {
  transform: rotate(360deg);
}

.videoBox {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
}

#videoBG {
  position: fixed;
  /*고정=>fixed/ 스크롤처리=>absolute */
  left: 50%;
  top: 50%;
  /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
  width: auto;
  min-width: 100%;
  /*동영상 너비를 꽉차게*/
  height: auto;
  min-height: 100%;
  /*동영상 높이를 꽉차게*/
  transform: translateX(-50%) translateY(-50%);
  z-index: -100;
  /*다른요소보다 아래에 위치*/
}

#imgBG {
  position: fixed;
  /*고정=>fixed/ 스크롤처리=>absolute */
  left: 50%;
  top: 50%;
  /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
  width: auto;
  min-width: 100%;
  /*동영상 너비를 꽉차게*/
  height: auto;
  min-height: 100%;
  /*동영상 높이를 꽉차게*/
  transform: translateX(-50%) translateY(-50%);
  z-index: -100;
  display: none;
}

#content {
  width: 100%;
  margin: 0 auto;
  background: rgba(44, 0, 62, 0.9);
  position: relative;
  /* min-height: 100vh;
  padding: 100px 50px;  */
}

/* #interactive-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
} */

#content > section {
  margin: 0 auto;
}

/* ABOUT 영역 */

#content .about {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 100px;
}

#content .about h3,
#content .characters h3,
#content .trailer h3,
#content .news h3,
#content .gallery h3 {
  font-size: var(--font-60px);
  font-weight: 800;
  margin-bottom: 10px;
}

#content .about p,
#content .characters p,
#content .trailer p,
#content .news p,
#content .gallery p {
  font-size: var(--font-26px);
  padding-bottom: 40px;
  line-height: 1rem;
}

#content .about_container {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 1% 3%;
  grid-template-areas:
    "a b"
    "d c"
    "e f";
}

#content .about_content {
  padding-bottom: 30px;
  overflow: hidden;
}

#content .about_content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  transition: transform 0.5s ease-in-out;
}

#content .about_content:hover img {
  transform: scale(1.1);
}

#content .about_content:nth-of-type(2),
#content .about_content:nth-of-type(4),
#content .about_content:nth-of-type(6) {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#content .about_content h4 {
  font-size: var(--font-50px);
  font-weight: 800;
  margin-bottom: 25px;
}

#content .about_content p {
  font-size: var(--font-22px);
  line-height: 2.2rem;
}

#content .about_content:nth-of-type(1) {
  grid-area: a;
}

#content .about_content:nth-of-type(2) {
  grid-area: b;
}

#content .about_content:nth-of-type(3) {
  grid-area: c;
}

#content .about_content:nth-of-type(4) {
  grid-area: d;
}

#content .about_content:nth-of-type(5) {
  grid-area: e;
}

#content .about_content:nth-of-type(6) {
  grid-area: f;
}

/* characters 섹션 */
#content .characters {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

#content .characters::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 30px;
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  animation: rift-effect-top 5s ease-in-out infinite;
}

#content .characters::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 30px;
  background: linear-gradient(90deg, var(--color-sub1), var(--color-point1));
  animation: rift-effect-bottom 5s ease-in-out infinite;
}

@keyframes rift-effect-top {
  0% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 15%,
      80% 5%,
      65% 20%,
      40% 5%,
      25% 15%,
      0 5%
    );
  }

  50% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 5%,
      85% 15%,
      70% 5%,
      45% 20%,
      20% 5%,
      0 15%
    );
  }

  100% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 15%,
      80% 5%,
      65% 20%,
      40% 5%,
      25% 15%,
      0 5%
    );
  }
}

@keyframes rift-effect-bottom {
  0% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 85%,
      80% 95%,
      65% 80%,
      40% 95%,
      25% 85%,
      0 95%
    );
  }

  50% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 95%,
      85% 85%,
      70% 95%,
      45% 80%,
      20% 95%,
      0 85%
    );
  }

  100% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 85%,
      80% 95%,
      65% 80%,
      40% 95%,
      25% 85%,
      0 95%
    );
  }
}

#content .characters p,
#content .characters .section_header,
#content .news p,
#content .news .section_header {
  width: 90%;
  margin: 0 auto;
}

#content .characters_container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 2%;
  grid-template-areas:
    "a b c"
    "d d d"
    "e f g"
    "h i j"
    "k k k";
}

#content .characters_content {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-radius: 20px;
}

#content .characters_content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  transition: transform 0.4s ease-in-out;
}

#content .characters_content dl {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

#content .characters_content dt {
  min-width: 110px;
  min-height: 30px;
  font-size: var(--font-24px);
  font-weight: 700;
  color: var(--color-main);
  background: var(--color-sub1);
  padding: 7px 3px;
  border-radius: 10px 0 0 0;
}

#content .characters_content dd {
  min-width: 110px;
  min-height: 30px;
  font-size: var(--font-24px);
  font-weight: 700;
  color: var(--main-font);
  background: var(--color-point1);
  padding: 7px 3px;
  border-radius: 0 0 15px 0;
}

#content .description_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 0, 62, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  color: var(--color-sub1);
  font-size: var(--font-30px);
  line-height: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#content .characters_content:hover .description_overlay {
  opacity: 1;
}

#content .characters_content:hover img {
  transform: scale(1.02);
  filter: brightness(120%);
}

#content .characters_content:nth-child(1) {
  grid-area: a;
}

#content .characters_content:nth-child(2) {
  grid-area: b;
}

#content .characters_content:nth-child(3) {
  grid-area: c;
}

#content .characters_content:nth-child(4) {
  grid-area: d;
}

#content .characters_content:nth-child(5) {
  grid-area: e;
}

#content .characters_content:nth-child(6) {
  grid-area: f;
}

#content .characters_content:nth-child(7) {
  grid-area: g;
}

#content .characters_content:nth-child(8) {
  grid-area: h;
}

#content .characters_content:nth-child(9) {
  grid-area: i;
}

#content .characters_content:nth-child(10) {
  grid-area: j;
}

#content .characters_content:nth-child(11) {
  grid-area: k;
}

/* TRAILER 섹션  */
#content .trailer {
  width: 90%;
  margin: 0 auto;
  padding: 100px 0;
}

#content .trailer_wrapper {
  width: 90%;
  margin: 0 auto;
}

#content .trailer_pc_layout {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 3%;
}

#content .pc_main_display {
  position: relative;

  cursor: pointer;
  width: 100%;
}

#content .pc_main_display img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

#content .pc_main_display .fa-youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-70px);
  color: red;
  transition: transform 0.3s;
}

#content .pc_main_display:hover .fa-youtube {
  transform: translate(-50%, -50%) scale(1.1);
}

#content #pcMainInfo {
  width: 100%;
}

#content #pcMainInfo dt {
  font-size: var(--font-36px);
  font-weight: 800;
  padding-bottom: 20px;
}

#content #pcMainInfo dd {
  font-size: var(--font-20px);
  line-height: 1.7rem;
}

#content .pc_thumb_list {
  width: 90%;
  margin: 50px auto 0;
  gap: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content .pc_thumb_list li {
  cursor: pointer;
  border: 5px solid transparent;
  border-radius: 25px;
  transition: all 0.3s ease;
  opacity: 0.6;
}

#content .pc_thumb_list li:hover {
  opacity: 1;
  transform: scale(1.05);
}

#content .pc_thumb_list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

#content .pc_thumb_list li.selected {
  opacity: 1;
  border-color: var(--color-sub1);
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--color-sub1);
}

/* Swiper Layout Styles */

#content .trailer-swiper {
  display: none;
  /* PC에서는 숨김 */
  overflow: hidden;
  position: relative;
}

#content .trailer-swiper .swiper-slide {
  position: relative;
  cursor: pointer;
  text-align: center;
}

#content .trailer-swiper .swiper-slide img {
  width: 100%;
  border-radius: 20px;
  max-width: 550px;
  margin: 0 auto;
}

#content .trailer-swiper .swiper-slide .play_icon {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-50px);
  color: red;
}

#content .trailer-swiper .swiper-slide dl {
  margin-top: 20px;
}

#content .trailer-swiper .swiper-slide dt {
  font-size: var(--font-30px);
  padding-bottom: 10px;
}

#content .trailer-swiper .swiper-slide dd {
  font-size: var(--font-16px);
  line-height: 1.5rem;
  padding: 0 15px;
}

/* Swiper 기본 스타일 커스텀  */
#content .trailer-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.7;
}

#content .trailer-swiper .swiper-pagination-bullet-active {
  background: var(--color-sub1);
  opacity: 1;
}

#content .trailer-swiper .swiper-button-next,
#content .trailer-swiper .swiper-button-prev {
  color: var(--color-sub1);
}

/* Popup Style */
#content .trailer_popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 0, 62, 0.85);
  z-index: 100;
  justify-content: center;
  align-items: center;
}

#content .trailer_popup .youtube_iframe_wrapper {
  position: relative;
  width: 90%;
  max-width: 1500px;
}

#content .trailer_popup .close_btn {
  position: absolute;
  top: -2rem;
  right: 1rem;
  font-size: var(--font-30px);
  cursor: pointer;
  z-index: 160;
  color: var(--color-sub1);
}

#content .trailer_popup .close_btn .fa-xmark {
  transition: all 0.5s ease-in-out;
}

#content .trailer_popup .close_btn:hover .fa-xmark {
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: rotate(360deg);
}

#content .trailer_popup .youtube_iframe {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

#content .trailer_popup .youtube_iframe iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
  border-radius: 30px;
}

/* NEWS 섹션 */
#content .news {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0 200px;
  position: relative;
  overflow: hidden;
}

#content .news::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 30px;
  background: linear-gradient(90deg, var(--color-sub1), var(--color-point1));
  animation: rift-effect-top 5s ease-in-out infinite;
}

/* 아래쪽 경계선 (차원의 균열 #2) */
#content .news::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 30px;
  background: linear-gradient(90deg, var(--color-point1), var(--color-sub1));
  animation: rift-effect-bottom 5s ease-in-out infinite;
}

#content .news_container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 1% 2%;
  grid-template-areas:
    "a b"
    "c c"
    "d e"
    "f f";
}

#content .news_content {
  width: 100%;
  margin: 0 auto;
  background: var(--color-sub1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

#content .news_content img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

#content .content_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#content .news_content h4 {
  font-size: var(--font-28px);
  font-weight: 800;
  color: #333;
  text-align: center;
}

#content .news_content p {
  font-size: var(--font-20px);
  font-weight: 500;
  line-height: 1.7rem;
  margin-top: 30px;
  color: #333;
}

#content .news_content:nth-of-type(1) {
  grid-area: a;
}

#content .news_content:nth-of-type(2) {
  grid-area: b;
}

#content .news_content:nth-of-type(3) {
  grid-area: c;
}

#content .news_content:nth-of-type(4) {
  grid-area: d;
}

#content .news_content:nth-of-type(5) {
  grid-area: e;
}

#content .news_content:nth-of-type(6) {
  grid-area: f;
}

#content .news_content {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#content .news_content:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

/* GALLERY 섹션 */
#content .gallery {
  width: 90%;
  margin: 0 auto;
  padding: 100px 0;
}

#content .gallery_container {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 1%;
  grid-template-areas:
    "a a a b b b"
    "a a a c d e"
    "f g h j j j"
    "i i i j j j";
}

#content .gallery_container .gallery_card {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

#content .gallery_card img,
#content .gallery_card video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s ease;
}

#content .gallery_card:nth-child(1) {
  grid-area: a;
}

#content .gallery_card:nth-child(2) {
  grid-area: b;
}

#content .gallery_card:nth-child(3) {
  grid-area: c;
}

#content .gallery_card:nth-child(4) {
  grid-area: d;
}

#content .gallery_card:nth-child(5) {
  grid-area: e;
}

#content .gallery_card:nth-child(6) {
  grid-area: f;
}

#content .gallery_card:nth-child(7) {
  grid-area: g;
}

#content .gallery_card:nth-child(8) {
  grid-area: h;
}

#content .gallery_card:nth-child(9) {
  grid-area: i;
}

#content .gallery_card:nth-child(10) {
  grid-area: j;
}

#content .gallery_card:nth-child(11) {
  grid-area: k;
  display: none;
}

#content .gallery_card:hover img,
#content .gallery_card:hover video {
  transform: scale(1.05);
  filter: brightness(120%);
}

/* 



 여기부터 일반 pc  영역이여 
 



*/
@media screen and (max-width: 1280px) {
  #content .more {
    width: 55px;
    height: 55px;
  }

  #content .more img {
    width: 100%;
  }

  /* ABOUT 영역 */

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-60px);
    margin-bottom: 5px;
  }

  #content .about p,
  #content .characters p,
  #content .trailer p,
  #content .news p,
  #content .gallery p {
    font-size: var(--font-24px);
  }

  #content .about_content h4 {
    font-size: var(--font-50px);
  }

  #content .about_content p {
    font-size: var(--font-20px);
  }

  /* CHAEACTERS 섹션 */

  #content .characters_content dt {
    min-width: 100px;
    min-height: 30px;
    font-size: var(--font-24px);
    font-weight: 700;
    padding: 7px 3px;
  }

  #content .characters_content dd {
    min-width: 100px;
    min-height: 30px;
    font-size: var(--font-24px);
    font-weight: 700;
    padding: 7px 3px;
  }

  #content .description_overlay {
    font-size: var(--font-28px);
    line-height: 2rem;
  }

  /* NEWS 섹션 */

  #content .news_content {
    padding: 25px;
    gap: 25px;
  }

  #content .news_content p {
    font-size: var(--font-20px);
    line-height: 1.6rem;
    margin-top: 20px;
  }
}

/* 





 여기부터 테블릿 영역이여 




*/
@media screen and (max-width: 1150px) {
  #content .more {
    width: 50px;
    height: 50px;
  }

  #content .more img {
    width: 100%;
  }

  /* ABOUT 영역 */

  #content .more-text {
    font-weight: 800;
    font-size: var(--font-18px);
  }

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-50px);
  }

  #content .about p,
  #content .characters p,
  #content .trailer p,
  #content .news p,
  #content .gallery p {
    font-size: var(--font-20px);
    padding-bottom: 50px;
    line-height: 1.5rem;
  }

  #content .about_container {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0 3%;
    grid-template-areas:
      "a c"
      "b d"
      "e e"
      "f f";
  }

  #content .about_content {
    padding-bottom: 5px;
  }

  #content .about_content h4 {
    font-size: var(--font-40px);
    margin-bottom: 10px;
  }

  #content .about_content p {
    font-size: var(--font-18px);
    line-height: 1.7rem;
  }

  #content .about_content:nth-of-type(5) {
    height: 400px;
  }

  #content .about_content:nth-of-type(6) {
    text-align: center;
  }

  /* characters 섹션 */
  #content .characters {
    width: 100%;
  }

  #content .characters_container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1%;
    grid-template-areas:
      "a b c"
      "e f g"
      "h i j";
  }

  #content .characters_content dt {
    min-width: 80px;
    min-height: 20px;
    font-size: var(--font-20px);
    font-weight: 700;
    padding: 3px 3px;
  }

  #content .characters_content dd {
    min-width: 80px;
    min-height: 20px;
    font-size: var(--font-20px);
    font-weight: 700;
    padding: 2px 3px;
  }

  #content .description_overlay {
    font-size: var(--font-26px);
    line-height: 2rem;
  }

  #content .characters_content:nth-of-type(4),
  #content .characters_content:nth-of-type(11) {
    display: none;
  }

  /* TRAILER 섹션  */
  #content .trailer {
    padding: 100px 0 70px 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }

  #content .trailer_pc_layout,
  #content .pc_thumb_list {
    display: none;
  }

  #content .trailer-swiper {
    display: block;
  }

  #content .trailer_wrapper {
    width: 100%;
    margin: 0 auto;
  }

  #content .trailer-swiper .swiper-button-prev,
  #content .trailer-swiper .swiper-button-next {
    top: 35%;
  }

  #content .trailer-swiper .swiper-pagination {
    position: static;
    margin-top: 20px;
  }

  #content .trailer-swiper .swiper-pagination-bullet-active {
    background: var(--color-point1);
  }

  /* NEWS 섹션 */
  #content .news {
    padding: 100px 0 150px 0;
  }

  #content .news_container {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 2%;
    grid-template-areas:
      "a a"
      "b d"
      "c e";
  }

  #content .news_content {
    background: var(--color-sub1);
    border-radius: 20px;
    padding: 20px;
    gap: 20px;
  }

  #content .news_content h4 {
    font-size: var(--font-24px);
    font-weight: 800;
    color: #333;
    text-align: center;
  }

  #content .news_content:nth-of-type(6) {
    display: none;
  }

  #content .news_content:nth-of-type(3) p {
    display: none;
  }

  #content .news_content:nth-of-type(3) img {
    width: 100%;
    height: 100%;
  }

  /* GALLERY 섹션 */
  #content .gallery {
    width: 90%;
    padding: 100px 0;
  }

  #content .gallery_container {
    width: 99%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 1%;
    grid-template-areas:
      "i i g h "
      "b b a a "
      "d e a a ";
  }

  #content .gallery_card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
  }

  #content .gallery_card:nth-child(3),
  #content .gallery_card:nth-child(6),
  #content .gallery_card:nth-child(10) {
    display: none;
  }
}

/*





소형 테블릿 인것이여 






*/
@media screen and (max-width: 855px) {
  #content .more {
    width: 40px;
    height: 40px;
  }

  #content .more img {
    width: 100%;
  }

  #content .more-text {
    font-weight: 800;
    font-size: var(--font-16px);
  }

  /* ABOUT 영역 */

  #content .about {
    padding-bottom: 60px;
    margin-top: -50px;
  }

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-44px);
  }

  #content .about p,
  #content .characters p,
  #content .trailer p,
  #content .news p,
  #content .gallery p {
    font-size: var(--font-20px);
  }

  #content .about_content h4 {
    font-size: var(--font-30px);
  }

  #content .about_content p {
    font-size: var(--font-16px);
    line-height: 1.3rem;
    text-align: center;
  }

  #content .about_content:nth-of-type(5) {
    height: 300px;
  }

  /* characters 섹션 */

  #content .characters_content dt {
    min-width: 60px;
    min-height: 20px;
    font-size: var(--font-16px);
    font-weight: 700;
    padding: 3px;
  }

  #content .characters_content dd {
    min-width: 60px;
    min-height: 20px;
    font-size: var(--font-16px);
    font-weight: 700;
    padding: 2px;
  }

  #content .description_overlay {
    font-size: var(--font-24px);
    line-height: 2rem;
  }

  /* TRAILER 섹션  */

  #content .trailer-swiper .swiper-button-prev,
  #content .trailer-swiper .swiper-button-next {
    display: none;
  }

  #content .trailer-swiper .swiper-slide .play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -130%);
    font-size: var(--font-60px);
    color: red;
  }

  /* NEWS 섹션 */
  #content .news {
    padding: 90px 0 130px 0;
  }

  #content .news_content h4 {
    font-size: var(--font-20px);
  }

  /* GALLERY 섹션 */
  #content .gallery {
    width: 90%;
    padding: 70px 0;
  }
}

/*






모바일 영역이여






*/
@media screen and (max-width: 667px) {
  .section_header {
    display: flex;
    align-items: center;
    gap: 50px;
  }

  #content .more {
    width: 35px;
    height: 35px;
  }

  #content .more img {
    width: 100%;
  }

  #content .more-text {
    font-weight: 800;
    font-size: var(--font-14px);
  }

  /* ABOUT 영역 */

  #content .about {
    padding-bottom: 10px;
  }

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-40px);
  }

  #content .about p,
  #content .characters p,
  #content .trailer p,
  #content .news p,
  #content .gallery p {
    font-size: var(--font-18px);
    line-height: 1.5rem;
  }

  #content .about_content h4 {
    font-size: var(--font-30px);
    margin-bottom: 10px;
  }

  #content .about_content p {
    font-size: var(--font-18px);
    line-height: 1.3rem;
  }

  #content .about_content {
    text-align: center;
  }

  #content .about_container {
    width: 95%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0 1%;
    grid-template-areas:
      "a a"
      "b b"
      "c c"
      "d d";
  }

  #content .about_content:nth-of-type(5),
  #content .about_content:nth-of-type(6) {
    display: none;
  }

  /* characters 섹션 */
  #content .characters {
    padding: 70px 0;
  }

  #content .characters_content dt {
    min-width: 80px;
    min-height: 30px;
    font-size: var(--font-18px);
    padding-top: 4px;
  }

  #content .characters_content dd {
    min-width: 80px;
    min-height: 30px;
    font-size: var(--font-18px);
    padding-top: 4px;
  }

  #content .description_overlay {
    font-size: var(--font-16px);
    line-height: 1.1rem;
  }

  #content .characters_container {
    width: 95%;
    margin: -10px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 2%;
    grid-template-areas:
      "a b"
      "c e"
      "f g"
      "h i";
  }

  #content .characters_content:nth-of-type(10) {
    display: none;
  }

  /* TRAILER 섹션  */
  #content .trailer {
    padding: 70px 0 40px 0;
  }

  #content .trailer-swiper .swiper-slide dt {
    font-size: var(--font-28px);
    padding-bottom: 15px;
  }

  #content .trailer-swiper .swiper-slide dd {
    line-height: 1.4rem;
  }

  #content .trailer-swiper .swiper-slide .play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -160%);
    font-size: var(--font-50px);
    color: red;
  }

  /* NEWS 섹션 */
  #content .news {
    padding: 70px 0 100px;
  }

  #content .news_content h4 {
    font-size: var(--font-20px);
  }

  #content .news_container {
    width: 90%;
    margin: -10px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 2%;
    grid-template-areas:
      "a a"
      "b b";
  }

  #content .news_content:nth-of-type(3),
  #content .news_content:nth-of-type(4),
  #content .news_content:nth-of-type(5) {
    display: none;
  }

  /* GALLERY 섹션 */
  #content .gallery {
    width: 90%;
    margin: 0 auto;
    padding: 70px 0;
  }

  #content .gallery_container {
    width: 99%;
    margin: -20px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1%;
    grid-template-areas:
      "b b k"
      "a a k"
      "h i i";
  }

  #content .gallery_card:nth-child(11) {
    grid-area: k;
    display: block;
  }

  #content .gallery_card:nth-child(4),
  #content .gallery_card:nth-child(5),
  #content .gallery_card:nth-child(7) {
    display: none;
  }
}

/* 






두번째 모바일 크기여 







*/

@media screen and (max-width: 565px) {
  .section_header {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  #content .more {
    width: 30px;
    height: 30px;
  }

  #content .more img {
    width: 100%;
  }

  /* ABOUT 영역 */

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-36px);
  }

  #content .about p,
  #content .characters p,
  #content .trailer p,
  #content .news p,
  #content .gallery p {
    font-size: var(--font-16px);
  }

  /* characters */

  #content .characters_container {
    margin-top: -20px;
  }

  /* trailer */
  #content .trailer-swiper .swiper-slide dt {
    font-size: var(--font-24px);
    padding-bottom: 10px;
  }

  #content .trailer-swiper .swiper-slide dd {
    font-size: var(--font-14px);
    line-height: 1.2rem;
  }

  /* NEWS 섹션 */
  /* #content .news {
    padding-top: 100px;
  } */

  #content .news_content h4 {
    font-size: var(--font-26px);
  }

  /* GALLERY 섹션 */
  #content .gallery {
    width: 90%;
    padding: 70px 0 50px;
  }
}

/* 더이상 조절은 없다  */
@media screen and (max-width: 467px) {
  #content .about {
    padding-bottom: 10px;
    margin-top: -100px;
  }

  #content .about h3,
  #content .characters h3,
  #content .trailer h3,
  #content .news h3,
  #content .gallery h3 {
    font-size: var(--font-30px);
  }

  .section_header {
    gap: 10px;
  }

  #content .more {
    gap: 5px;
  }

  #content .more-text {
    font-size: var(--font-14px);
  }

  #content .about {
    padding: 60px 0 0 0;
  }

  /* characters */
  #content .characters_content dt {
    min-width: 45px;
    min-height: 5px;
    font-size: var(--font-14px);
    padding: 0 2px;
  }

  #content .characters_content dd {
    min-width: 45px;
    min-height: 5px;
    font-size: var(--font-14px);
    padding: 0 2px;
  }

  #content .description_overlay {
    font-size: var(--font-18px);
    justify-content: flex-start;
    line-height: 1rem;
  }

  /* trailer */

  #content .trailer {
    padding: 60px 0 30px 0;
  }

  #content .trailer-swiper .swiper-slide dt {
    font-size: var(--font-20px);
    padding-bottom: 15px;
  }

  #content .trailer-swiper .swiper-slide dd {
    line-height: 1rem;
  }

  #content .trailer-swiper .swiper-slide .play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -150%);
    font-size: var(--font-40px);
    color: red;
  }

  #content .news_content h4 {
    font-size: var(--font-20px);
  }
}