/* layout */
:root {
  --header-height: 100px;
  --book-container-bg: #f1bc2e;
  /* --secondary-filter: invert(48%) sepia(92%) saturate(2977%) hue-rotate(226deg) brightness(105%) contrast(101%); */
  --secondary-filter: invert(14%) sepia(100%) saturate(4707%) hue-rotate(261deg) brightness(92%) contrast(114%);
  --white-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(289deg) brightness(106%) contrast(101%);

  --primary-filter: invert(54%) sepia(72%) saturate(569%) hue-rotate(116deg) brightness(84%) contrast(98%);
  --primary-filter-deep: invert(45%) sepia(13%) saturate(1811%) hue-rotate(111deg) brightness(99%) contrast(88%);

  --logo-color: #f1bc2e;
  --logo-filter: invert(85%) sepia(29%) saturate(1568%) hue-rotate(337deg) brightness(102%) contrast(89%);
  --logo-filter-deep: invert(82%) sepia(12%) saturate(2560%) hue-rotate(342deg) brightness(96%) contrast(96%);
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2'), url('../fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2'), url('../fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  src: url('../fonts/Pretendard-Black.woff2') format('woff2'), url('../fonts/Pretendard-Black.woff') format('woff');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 400;
  src: url('../fonts/MaruBuri-ExtraLight.woff2') format('woff2'), url('../fonts/MaruBuri-ExtraLight.woff') format('woff'), url('../fonts/MaruBuri-ExtraLight.ttf') format('truetype');
}

* {font-family: inherit;}
html, body {font-family: 'Pretendard', sans-serif;}
h1, h2, h3, h4, h5, h6 {letter-spacing: -0.5px; word-break: keep-all;}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {word-break: keep-all;}
p {text-align: justify; letter-spacing: -0.75px;}

/* header */
header {width: 100%; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; transition: all .35s; z-index: 100;}
header nav {display: flex; align-items: center; gap: 20px;}
header nav .logo_wrap {margin-left: 30px; display: block;}
header nav .logo_wrap .logo {width: 150px; min-width: 150px; filter: var(--logo-filter);}
header nav .category {display: flex; align-items: center; gap: 1px; color: var(--logo-color); font-weight: 700;}
header nav .category .word {height: 1em; filter: var(--logo-filter);}
header nav .line_v {width: 1px; height: 1em; background-color: var(--logo-color);}
header.scroll,
body[data-page-type="sub"] header {background-color: #fff; box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.1);}
body[data-page-type="sub"] header nav .vol {font-size: 15px; letter-spacing: -0.5px;}
body[data-page-type="sub"] header nav .logo_wrap .logo {filter: none;}
body[data-page-type="sub"] header nav .category {color: var(--text-base);}
body:has(.gnb.active) header {background-color: transparent; box-shadow: none;}

@media screen and (max-width: 1200px) {
  header:not(.scroll) nav .logo_wrap .logo,
  header:not(.scroll) nav .category .word {filter: var(--white-filter);}
  header:not(.scroll) nav .category {color: #fff;}
  header:not(.scroll) nav .line_v {background-color: #fff;}
}

@media screen and (max-width: 640px) {
  :root {
    --header-height: 80px;
  }

  header nav .logo_wrap {margin-left: var(--inner-gap);}
  header nav .logo_wrap .logo {min-width: 100px; width: 100px;}
  header nav .category {font-size: 15px;}
  header nav .line_v {display: none;}
  header .menu_btn img {width: 80px;}
}

@media screen and (max-width: 475px) {
  body[data-page-type="sub"] header nav {gap: 10px;}
  body[data-page-type="sub"] header nav .vol {font-size: 14px;}
}

/* gnb */
.gnb {width: 100%; height: 100%; display: flex; justify-content: end; position: fixed; top: 0; left: 0; transition: all .35s; background-color: rgba(0, 0, 0, 0.7); z-index: 101; opacity: 0; pointer-events: none;}
.gnb .nav_area {width: max-content; min-width: 1200px; padding-inline: 50px; display: flex; flex-direction: column; transform: translateX(30%); transition: all .35s; background-color: #fff; overflow-y: auto;}
.gnb .nav_area .close_wrap {padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: end; align-items: center; position: sticky; top: 0; left: 0; background-color: #fff;}
.gnb .nav_area .close_wrap .close {height: 30px; aspect-ratio: 1 / 1;}
.gnb .nav_area .close_wrap .close img {pointer-events: none;}
.gnb .nav_area nav {display: flex; gap: 40px 80px;}
.gnb .nav_area nav .section {height: 50px; margin: 0; margin-bottom: 10px;}
.gnb .nav_area nav .section_line {width: 100%; height: 3px; margin-bottom: 20px;}
.gnb .nav_area nav ul li {margin-bottom: 30px;}
.gnb .nav_area nav ul li a {display: flex; flex-direction: column;}
.gnb .nav_area nav ul li a b {font-size: 20px;}
.gnb .nav_area nav ul li a b .ico_box {width: 1.5em; aspect-ratio: 1 / 1; margin-right: 0.35em;}
.gnb .nav_area nav ul li a b .ico_box img {width: 100%; height: 100%; object-fit: contain; object-position: center; margin-inline: 0;}
.gnb .nav_area nav ul li a span {font-size: 18px; word-break: keep-all; text-wrap: balance; line-height: 1.5; letter-spacing: -0.9px;}
.gnb .nav_area nav [data-nav-key="01"] ul li:hover {color: var(--primary-color-deep);}
.gnb .nav_area nav [data-nav-key="02"] ul li:hover {color: var(--secondary-color);}
.gnb .nav_area nav [data-nav-key="01"] ul li:hover .ico_box img {filter: var(--primary-filter-deep);}
.gnb .nav_area nav [data-nav-key="02"] ul li:hover .ico_box img {filter: var(--secondary-filter);}
.gnb .nav_area nav [data-nav-key] ul li:hover span {text-decoration: underline; text-underline-offset: 5px;}
.gnb .nav_area .btns {margin-top: 10px; padding-bottom: 30px; flex: 1; align-items: end; gap: 10px; position: sticky; bottom: 0; left: 0; background-color: #fff; z-index: 5;}
.gnb .nav_area .btns li {height: max-content; padding: 5px 10px; border: 1px solid #959595; border-radius: 5px;}
.gnb .nav_area .btns li a {display: flex; align-items: center; justify-content: center; gap: 2px; color: #505050; font-weight: 700;}
.gnb .nav_area .btns .ico {width: 40px; margin: 0;}
.gnb.active {opacity: 1; pointer-events: all;}
.gnb.active .nav_area {transform: translate(0); transition-delay: 0.1s;}

@media screen and (max-width: 1200px) {
  .gnb .nav_area {width: 100%; min-width: auto;}
  .gnb .nav_area .btns {position: static;}
}

@media screen and (max-width: 768px) {
  .gnb .nav_area {padding-inline: calc(var(--inner-gap) * 2); transform: translate(0);}
  .gnb .nav_area nav {flex-direction: column; gap: 20px;}
}

@media screen and (max-width: 475px) {
  .gnb .nav_area {padding-inline: calc(var(--inner-gap) * 1.5);}
}

.remote {width: 100%; height: 100%; padding-inline: var(--inner-gap); padding-bottom: var(--header-height); display: flex; justify-content: end; align-items: flex-end; position: fixed; top: 0; left: 0; font-size: 0; z-index: 10; pointer-events: none;}
.remote ul {transform: translateX(calc(101% + var(--inner-gap))); transition: all .35s;}
.remote button {width: 60px; aspect-ratio: 1 / 1; border-radius: 50%; pointer-events: all;}
.remote button.share_btn {margin-bottom: 10px; background-color: #505050;}
.remote button.share_btn img {filter: var(--white-filter);}
.remote button.top_btn {border: 1px solid #dedede; background-color: #fff; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.05);}
.remote button.top_btn img {filter: invert(30%) sepia(1%) saturate(0%) hue-rotate(29deg) brightness(94%) contrast(86%);}
.remote.scroll ul {transform: translate(0);}

@media screen and (max-width: 475px) {
  .remote {padding-bottom: calc(var(--header-height) / 2);}
  .remote button {width: 50px;}
  .remote button.share_btn {margin-bottom: 5px;}
}

/* main page */
main [class*="_section"] {padding-block: 100px;}
main .title_img {max-width: 300px; margin-bottom: 100px;}

@media screen and (max-width: 768px) {
  main .title_img {max-width: 200px; margin-bottom: 50px;}
}

@media screen and (max-width: 475px) {
  main [class*="_section"] {padding-block: 60px;}
  main .title_img {width: 35%; margin-bottom: 30px;}
}

/* visual section */
main .visual_wrap {max-height: 900px; display: flex;}
main .visual_wrap .img_container {position: relative; flex: 1;}
main .visual_wrap .img_container img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
main .visual_wrap .img_container .intro_link_wrap {width: 100%; height: 100%; padding-top: calc(var(--header-height) * 2); padding-inline: 60px; position: absolute; top: 0; left: 0;}
main .visual_wrap .img_container .intro_link_wrap .tag {border: 1px solid var(--text-base); background-color: transparent;}
main .visual_wrap .img_container .intro_link_wrap .title {font-size: 48px;}
main .visual_wrap .img_container .intro_link_wrap .btn {font-size: 18px; display: flex; align-items: center; gap: 5px;}
main .visual_wrap .img_container .intro_link_wrap .btn .ico {width: 1em; height: 1em; filter: var(--white-filter);}
main .visual_wrap .img_container .intro_link_wrap .btn:hover {filter: none; color: var(--logo-color); background-color: #141414 !important;}
main .visual_wrap .img_container .intro_link_wrap .btn:hover .ico {filter: var(--logo-filter);}
main .visual_wrap .img_container .intro_link_wrap .cont {letter-spacing: -1px; font-size: 18px;}
main .visual_wrap .book_container {width: 650px; padding-block: var(--header-height); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; background-color: var(--book-container-bg); overflow: hidden; box-shadow: 0 -2px 10px 5px rgba(0, 0, 0, 0.2);}
main .visual_wrap .book_container .abs_top,
main .visual_wrap .book_container .abs_bot {position: absolute; pointer-events: none;}
main .visual_wrap .book_container .abs_top {top: var(--header-height); right: -50px;}
main .visual_wrap .book_container .abs_bot {bottom: 0; left: -30%;}
main .visual_wrap .book_container .book_wrapper {width: max-content; max-width: 65%; margin-inline: auto; padding: 3px; position: relative; background-color: #fff; border-radius: 7px; box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.1); z-index: 2;}
main .visual_wrap .book_container .book_wrapper span {padding-block: 15px; display: block; text-align: center; font-size: 18px; font-weight: 700;}
main .visual_wrap .book_container .book_wrapper .book_img {width: 446px; max-width: 100%;}
main .visual_wrap .btns {margin-top: 40px; display: flex; align-items: center; gap: 20px; color: #fff;}
main .visual_wrap .btns a {display: flex; align-items: center; font-size: 20px; font-weight: 700;}
main .visual_wrap .btns img {height: 2em;}

main .mo_container .img_container {position: relative; flex: 1;}
main .mo_container .img_container img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
main .mo_container .img_container .intro_link_wrap {width: 100%; height: 100%; padding-inline: var(--inner-gap); display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0;}
main .mo_container .img_container .intro_link_wrap .tag {border: 1px solid var(--text-base); background-color: transparent;}
main .mo_container .img_container .intro_link_wrap .title {font-size: 48px;}
main .mo_container .img_container .intro_link_wrap .btn {font-size: 18px; display: flex; align-items: center; gap: 5px;}
main .mo_container .img_container .intro_link_wrap .btn .ico {width: 1em; height: 1em; filter: var(--white-filter);}
main .mo_container .img_container .intro_link_wrap .cont {letter-spacing: -1px; font-size: 17px;}

@media screen and (max-width: 1200px) {
  main .visual_wrap .img_container {display: none;}
  main .visual_wrap .book_container {width: 100%; padding-top: calc(var(--header-height) * 1.5); padding-bottom: calc(var(--header-height) * 0.5); box-shadow: none;}
  main .visual_wrap .book_container .abs_bot {left: -10%;}
}

@media screen and (max-width: 1024px) {
  main .mo_container .img_container .intro_link_wrap .title {font-size: 32px;}
}

@media screen and (max-width: 640px) {
  main .visual_wrap .book_container .book_wrapper {max-width: 80%;}
  main .visual_wrap .book_container .book_wrapper span {font-size: 15px;}
  main .visual_wrap .btns {margin-top: 20px; gap: 10px;}
  main .visual_wrap .btns a {font-size: 15px;}
  main .mo_container .img_container .intro_link_wrap {padding-top: 40px; justify-content: start; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px);}
  main .mo_container .img_container .intro_link_wrap .cont {display: none;}
  main .mo_container .img_container .intro_link_wrap .title {font-size: 25px; margin-bottom: 20px;}
  main .mo_container .img_container .intro_link_wrap .tag {font-size: 16px;}
  main .mo_container .img_container .intro_link_wrap .btn {font-size: 16px; padding: 10px 20px;}
}

/* communication section */
main .comm_section {position: relative;}
main .comm_section .bg_top {width: 50vw; position: absolute; top: 30px; left: 0; z-index: -1;}
main .comm_section .bg_bot {width: 50vw; position: absolute; bottom: 0; right: 0; z-index: -1;}
main .comm_section .inner-wrap {gap: 100px;}
main .comm_section .inner-wrap .title_img {margin-bottom: 70px;}
main .comm_section .inner-wrap h4 {font-size: 20px; margin-bottom: 5px;}
main .comm_section .inner-wrap h3 {font-size: 24px; font-weight: 700; line-height: 1.3;}
main .comm_section .inner-wrap .left {padding-top: 100px; flex: 0.45;}
main .comm_section .inner-wrap .right {flex: 0.55;}
main .comm_section .inner-wrap .left img:not(.title_img),
main .comm_section .inner-wrap .right img {margin-bottom: 30px; border-radius: 10px;}
main .comm_section .inner-wrap ul li {margin-bottom: 70px; position: relative;}
main .comm_section .inner-wrap ul li:last-of-type {margin-bottom: 0;}
main .comm_section .inner-wrap ul li.half {display: flex; gap: 30px;}
main .comm_section .inner-wrap ul li.half > :nth-of-type(1) {transform: translateY(30%);}
main .comm_section .inner-wrap ul li .cover {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2;}

main .comm_section .br1200 {overflow: hidden;}
main .comm_section .comm_swiper {position: relative;}
main .comm_section .comm_swiper img {margin-bottom: 30px; border-radius: 10px;}
main .comm_section .comm_swiper .cover {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2;}
main .comm_section .inner-wrap:has(.comm_swiper) {padding-right: 0;}
main .comm_section .inner-wrap:has(.comm_swiper) .title_img {margin-inline: 0;}

@media screen and (max-width: 1200px) {
  main .comm_section .inner-wrap h4 {font-size: 19px;}
  main .comm_section .inner-wrap:has(.comm_swiper) h3 {font-size: 20px;}
}

@media screen and (max-width: 768px) {
  main .comm_section .inner-wrap .title_img {margin-bottom: 50px;}
}

/* west section */
main .west_section {background-color: #f2e6b4; color: #fff;}
main .west_section * {color: inherit;}
main .west_section .live_banner .swiper-pagination {bottom: 60px; --swiper-pagination-bullet-width: 14px; --swiper-pagination-bullet-height: 14px;}
main .west_section .live .gray_container {max-width: calc(((100% - var(--inner-size)) / 2) + var(--inner-size) - var(--inner-gap)); margin-top: 100px; margin-left: auto; margin-right: 0; margin-bottom: 100px; padding-block: 100px; padding-right: calc(((100% - var(--inner-size)) / 2) + var(--inner-gap)); position: relative; background-color: #373637; border-radius: 5px;}
main .west_section .live .gray_container .inner-wrap {max-width: 100%; padding-inline: 0;}
main .west_section .live .gray_container .left {padding-inline: 70px; position: relative;}
main .west_section .live .gray_container .left h2 {margin-bottom: 30px  ; font-size: 40px; line-height: 1.3;}
main .west_section .live .gray_container .left p {color: #d4d4d4; letter-spacing: -0.75px; text-align: justify;}
main .west_section .live .gray_container .left .name_tag {display: block; position: absolute; top: -90px; left: 70px; transform: translateY(-50%);}
main .west_section .live .gray_container .left .name_tag span {width: 100%; padding-right: 10px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-base); font-size: 22px; font-weight: 700; letter-spacing: -1px;}
main .west_section .live .gray_container .left .name_tag img {width: 180px;}
main .west_section .live .gray_container .left,
main .west_section .live .gray_container .right {flex: 1;}
main .west_section .live .gray_container .right {position: relative;}
main .west_section .live .gray_container .right img {width: 100%; position: absolute; top: 0; left: 0; transform: translateY(-150px);}
main .west_section .live .gray_container .right .name_tag {display: none;}
main .west_section .fix {width: 450px; padding-right: 60px; display: flex; flex-direction: column; justify-content: space-between;}
main .west_section .fix .news {border-radius: 10px; overflow: hidden;}
main .west_section .fix footer {width: 100%; font-size: 16px;}
main .west_section .fix footer .logo {width: 100%; max-width: 350px; margin-inline: 0; margin-bottom: 20px;}
main .west_section .fix footer p {margin-bottom: 10px; color: #353638; line-height: 1.5;}
main .west_section .fix footer small {margin-bottom: 10px; display: block; font-size: 14px; color: #a59f7d;}
main .west_section .fix footer .sns {gap: 10px;}
main .west_section .fix footer .sns li {width: 40px; aspect-ratio: 1 / 1; padding: 7px; border: 1px solid #a59f7d; border-radius: 5px;}
main .west_section .flexible {flex: 1;}
main .west_section .flexible ul {margin-bottom: 30px; border-radius: 10px; overflow: hidden;}
main .west_section .flexible ul li {aspect-ratio: 4 / 2.7; padding: 30px; position: relative; overflow: hidden;}
main .west_section .flexible ul li * {position: relative; z-index: 2;}
main .west_section .flexible ul li .title {font-size: 24px; line-height: 1.4;}
main .west_section .flexible ul li .cover {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 5;}
main .west_section .flexible ul li[class*="type_color"] img {width: 180px; position: absolute; bottom: 20px; right: 20px; z-index: 1;}
main .west_section .flexible ul li.type_color01 {background-color: #3482c8;}
main .west_section .flexible ul li.type_color02 {background-color: #006445;}
main .west_section .flexible ul li.type_color03 {background-color: #d69709;}
main .west_section .flexible ul li.type_img img {width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0;}
main .west_section .flexible ul li .category {display: block; margin-bottom: 1em;}
main .west_section .flexible .mo_news {display: none;}
main .west_section .flexible .event_banner .swiper-slide {width: 100% !important; height: auto !important; padding-inline: 70px; padding-block: 10px; display: flex; align-items: center; position: relative; border: 1px solid #6b6b6b; border-radius: 10px; background-color: #373637;}
main .west_section .flexible .event_banner .swiper-slide .cover {width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 2;}
main .west_section .flexible .event_banner .swiper-slide img {margin-left: 0; margin-right: 40px; align-self: center;}
main .west_section .flexible .event_banner .swiper-slide .flex:has(h3) {margin-bottom: 10px; align-items: center; gap: 10px;}
main .west_section .flexible .event_banner .swiper-slide h3 {font-size: 24px; line-height: 1;}
main .west_section .flexible .event_banner .swiper-slide p {color: #d4d4d4; line-height: 1.5;}
main .west_section .flexible .event_banner .swiper-slide .banner_cont {padding-right: 70px;}
main .west_section .flexible .event_banner .swiper-pagination {width: max-content; height: auto; top: 50%; bottom: auto; left: auto; right: 70px; transform: translateY(-50%);}
main .west_section .flexible .event_banner .swiper-pagination-bullet {opacity: 1; background-color: #9d9d9d;}
main .west_section .flexible .event_banner .swiper-pagination-bullet-active {background-color: #ffffff;}

@media screen and (max-width: 1440px) {
  main .west_section .fix {padding-right: 30px;}
}

@media screen and (max-width: 1200px) {
  main .west_section .live .gray_container {margin-block: 50px; padding-block: 0; padding-inline: var(--inner-gap); background-color: transparent;}
  main .west_section .live .gray_container .left {padding-inline: 0;}
  main .west_section .live .gray_container .left h2 {font-size: 32px; line-height: 1.4; color: var(--text-base);}
  main .west_section .live .gray_container .left p {color: var(--text-base); line-height: 1.6;}
  main .west_section .live .gray_container .left .name_tag {display: none;}
  main .west_section .live .gray_container .inner-wrap > .flex {gap: 30px;}
  main .west_section .live .gray_container .right {margin-bottom: 0; position: relative;}
  main .west_section .live .gray_container .right img {position: static; transform: translate(0); border-radius: 10px;}
  main .west_section .live .gray_container .right .name_tag {display: block; position: absolute; top: 8px; left: 20px; transform: translateY(-50%); z-index: 1;}
  main .west_section .live .gray_container .right .name_tag span {width: 100%; padding-right: 10px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-base); font-size: 16px; font-weight: 700; letter-spacing: -1px; z-index: 1;}
  main .west_section .live .gray_container .right .name_tag img {width: 150px;}

  main .west_section .content_wrap {flex-direction: column-reverse; gap: 60px;}
  main .west_section .content_wrap .fix {width: 100%; padding-right: 0;}
  main .west_section .content_wrap .fix .news {display: none;}
  main .west_section .content_wrap .fix footer {display: flex; flex-direction: column; align-items: center;}
  main .west_section .content_wrap .fix footer small {margin-bottom: 50px;}
  main .west_section .content_wrap .fix footer .sns li {width: 60px; padding: 13px;}  
}

@media screen and (max-width: 1024px) {
  main .west_section .live .gray_container .inner-wrap > .flex {flex-direction: column-reverse;}
  main .west_section .live .gray_container .right {gap: 0;}
  main .west_section .flexible .mo_news {margin-bottom: 30px; display: block;}
  main .west_section .flexible .mo_news img {border-radius: 10px;}
  main .west_section .flexible ul li .title {font-size: 20px;}
}

@media screen and (max-width: 768px) {
  main .west_section .live_banner .swiper-pagination {bottom: 20px;}
  main .west_section .live .gray_container .inner-wrap > .flex {flex-direction: column-reverse;}
  main .west_section .flexible ul {gap: 30px; border-radius: 0;}
  main .west_section .flexible ul li {aspect-ratio: 4 / 2.5; border-radius: 10px;}
  main .west_section .flexible ul li[class*="type_color"] img {width: 120px;}
  main .west_section .flexible .event_banner .swiper-slide {height: auto; padding-top: 30px; padding-inline: 20px; flex-direction: column-reverse; justify-content: space-between;}
  main .west_section .flexible .event_banner .swiper-slide img {margin-right: 0; align-self: center;}
  main .west_section .flexible .event_banner .swiper-slide .banner_cont {padding-right: 20px;}
  main .west_section .flexible .event_banner .swiper-pagination {width: 100%; position: static; transform: translate(0);}
}

@media screen and (max-width: 475px) {
  main .west_section .live .gray_container .left h2 {margin-bottom: 10px; font-size: 22px; line-height: 1.5;}
  main .west_section .fix footer .logo {width: 70%;}
  main .west_section .fix footer p {font-size: 14px; text-align: center;}
  main .west_section .fix footer small {text-align: center;}
  main .west_section .flexible ul {margin-bottom: 15px; gap: 15px;}
  main .west_section .flexible .mo_news {margin-bottom: 20px;}
}

/* subpage */
[data-page-type="sub"] {
  --inner-size: 1200px;
}

[data-sub-category="00"] {--tag-background: var(--text-base);}
[data-sub-category="01"] {--tag-background: var(--gradient-base);}
[data-sub-category="02"] {--tag-background: var(--gradient-base2);}
[data-page-type="sub"] .tag_bg {background: var(--tag-background);}

[data-page-type="sub"] .movement > .inner-wrap {justify-content: center; text-align: center; gap: 10px;}
[data-page-type="sub"] .movement a,
[data-page-type="sub"] .movement span {width: calc(100% / 3); height: 60px; padding-inline: 20px; display: block; align-content: center;}
[data-page-type="sub"] .movement .prev,
[data-page-type="sub"] .movement .next {border: 1px solid #c5c5c5; background-color: #fff; color: #5b5b5b;}
[data-page-type="sub"] .movement .prev:hover,
[data-page-type="sub"] .movement .next:hover {filter: brightness(0.95);}
[data-page-type="sub"] .movement .arrow {width: max-content; padding-inline: 20px;}
[data-page-type="sub"] .movement .arrow img {height: 30px; margin: 0;}

@media screen and (max-width: 768px) {
  [data-page-type="sub"] .movement .prev,
  [data-page-type="sub"] .movement .next {display: none !important;}
  [data-page-type="sub"] .movement .curr {width: 90%;}
  [data-page-type="sub"] .movement .arrow {padding-inline: 5px;}
  
}

[data-page-type="sub"] h4 {line-height: 1.4;}
[data-page-type="sub"] .caption {font-size: 14px; margin-top: 5px; display: block; text-align: center;}
[data-page-type="sub"] .tag,
[data-page-type="sub"] .tag * {word-break: keep-all;}
[data-page-type="sub"] .gray_box {background-color: #f7f7f7;}
[data-page-type="sub"] .pd_box {padding: 30px 50px;}
[data-page-type="sub"] .ep_txt {font-size: 22px; font-family: 'MaruBuri', sans-serif; line-height: 1.7; word-break: keep-all; text-wrap: pretty;}
[data-page-type="sub"] .ep_box_wrap {display: flex; flex-direction: column; gap: var(--tb-gap-m);}
[data-page-type="sub"] .ep_box .pd_box {flex: 1;}
[data-page-type="sub"] .ep_box .img {width: max-content;}
[data-page-type="sub"] .ep_box .img img {width: 400px; margin: 0;}
[data-page-type="sub"] .ico_title {gap: 15px;}
[data-page-type="sub"] .ico_title img {height: 75px; margin-inline: 0;}
[data-page-type="sub"] .video_ratio {width: 100%; aspect-ratio: 16 / 9; font-size: 0; cursor: pointer;}
[data-page-type="sub"] .video_ratio video,
[data-page-type="sub"] .video_ratio iframe {width: 100%; height: 100%;}

[data-page-type="sub"] .intro {padding-top: calc(var(--header-height) * 2);}
[data-page-type="sub"] .intro h1 {font-size: 50px; line-height: 1.3;}
[data-page-type="sub"] .intro .flexible {flex: 1;}
[data-page-type="sub"] .intro .tag .ico {height: 1.7em; margin: 0; margin-right: 0.2em; filter: var(--white-filter);}
[data-page-type="sub"] .intro .byline {width: max-content; padding-top: 1ex; line-height: 1;}
[data-page-type="sub"] .intro .byline span.flex-center {white-space: nowrap; justify-content: start;}
[data-page-type="sub"] .intro .byline.with_img {display: flex; flex-direction: column; justify-content: space-between;}
[data-page-type="sub"] .intro .byline.with_img .byline_img {width: 150px;}
[data-page-type="sub"] .intro .byline.with_img span.flex-center {justify-content: end;}
[data-page-type="sub"] .img img {width: auto; max-width: 100%;}

[data-page-type="sub"] .intro .byline .ico {height: 1.7em; margin: 0; margin-right: 0.2em;}
[data-page-type="sub"][data-sub-category="01"] .intro .byline .ico {filter: var(--primary-filter-deep);}
[data-page-type="sub"][data-sub-category="02"] .intro .byline .ico {filter: var(--secondary-filter);}

@media screen and (max-width: 1024px) {
  [data-page-type="sub"] .pd_box {padding: 30px;}
  [data-page-type="sub"] .ep_box_wrap {flex-direction: row; align-items: stretch;}
  [data-page-type="sub"] .ep_box {flex-direction: column;}
  [data-page-type="sub"] .ep_box.reverse {flex-direction: column-reverse;}
  [data-page-type="sub"] .ep_box .img {width: 100%;}
  [data-page-type="sub"] .ep_box .img img {width: auto; max-width: 100%;}
  [data-page-type="sub"] .ep_txt {font-size: 18px;}
  [data-page-type="sub"] .ep_box .ep_txt {text-align: center !important;}
}

@media screen and (max-width: 768px) {
  [data-page-type="sub"] .intro {padding-top: calc(var(--header-height) * 1.5);}
  [data-page-type="sub"] .intro h1 {font-size: 36px; line-height: 1.3;}
  [data-page-type="sub"] .intro .tag + .flex {flex-direction: column;}
  [data-page-type="sub"] .intro .byline {width: 100%; display: flex; flex-wrap: wrap; gap: 5px 20px;}
  [data-page-type="sub"] .intro .byline.with_img {width: 100%; flex-direction: row; align-items: start;}
  [data-page-type="sub"] .intro .byline.with_img .byline_img {margin-right: 0;}
  [data-page-type="sub"] .pd_box {padding: 20px;}
  [data-page-type="sub"] .ep_box_wrap {flex-direction: column;}
  [data-page-type="sub"] .ep_txt {font-size: 17px;}
  [data-page-type="sub"] .ico_title img {height: 50px; margin-inline: 0;}
}

@media screen and (max-width: 475px) {
  [data-page-type="sub"] .tag_mo_center {width: 100%; text-align: center; text-wrap: balance;}
  [data-page-type="sub"] .intro h1 {font-size: 32px;}
}

[data-page-type="sub"] footer {padding-block: 60px; background-color: #fbfbfb;}
[data-page-type="sub"] footer .logo_wrap {align-items: start;}
[data-page-type="sub"] footer .logo_wrap .logo {width: 220px; margin-right: 30px; transform: translateY(-12px);}
[data-page-type="sub"] footer .textbox {margin-right: 30px;}
[data-page-type="sub"] footer p {font-size: 16px; line-height: 1.5; color: #505050; letter-spacing: -1px;}
[data-page-type="sub"] footer small {font-size: 14px; color: #a1a1a1; letter-spacing: -0.5px;}
[data-page-type="sub"] footer .sns {gap: 10px;}
[data-page-type="sub"] footer .sns img {width: 45px;}

@media screen and (max-width: 1024px) {
  [data-page-type="sub"] footer .logo_wrap {flex-direction: column;}
  [data-page-type="sub"] footer .logo_wrap .logo {margin-inline: auto; margin-bottom: 10px;}
  [data-page-type="sub"] footer .textbox {margin-right: 0; text-align: center;}
  [data-page-type="sub"] footer .textbox p {text-align: center;}
  [data-page-type="sub"] footer > .inner-wrap {flex-direction: column; align-items: center; gap: 30px;}
}

@media screen and (max-width: 475px) {
  [data-page-type="sub"] footer .textbox p {font-size: 15px;}
  [data-page-type="sub"] footer small {font-size: 13px;}
}

[data-page-type="sub"] .title {font-size: 38px; word-break: keep-all; line-height: 1.4;}
[data-page-type="sub"] .side_circle_layout .side_circle {max-width: 25%;}
[data-page-type="sub"] .side_circle_layout.interview .people_img {width: 200px; min-width: 200px; margin: 0;}

@media screen and (max-width: 1024px) {
  [data-page-type="sub"] .side_circle_layout .side_circle {max-width: 50%; margin-inline: auto;}
}

@media screen and (max-width: 768px) {
  [data-page-type="sub"] .title {font-size: 28px;}
  [data-page-type="sub"] .side_circle_layout.interview .people_img {width: 200px; min-width: 200px; margin-inline: auto;}
}

@media screen and (max-width: 475px) {
  [data-page-type="sub"] .side_circle_layout .side_circle {max-width: 80%;}
  [data-page-type="sub"] .title {font-size: 24px;}
}

[data-page-type="sub"] .ep_color {color: var(--ep-color) !important;}
[data-page-type="sub"] .ep_bg {background-color: var(--ep-color) !important;}
[data-page-type="sub"] .ep_bg_soft {background-color: var(--ep-color-soft) !important;}
[data-page-type="sub"] .ep_filter {filter: var(--ep-filter);}
[data-page-type="sub"] .ep_border {border: 1px solid var(--ep-color); background-color: transparent;}
[data-page-type="sub"] .ep_border_2px {border: 2px solid var(--ep-color); background-color: transparent;}

[data-page-type="sub"] .sub_content .line_v {width: 1px; height: calc(var(--header-height) * 0.6); margin-inline: auto; margin-top: 20px; background-color: var(--ep-color, #000);}
[data-page-type="sub"] .sub_content .line_v:not([class*="mb"]) {margin-bottom: 20px;}

[data-page-type="sub"] .place_box {width: 98%; margin-bottom: calc(var(--tb-gap-l) + 20px); position: relative; border: 1px solid #ddd; background-color: #fff;}
[data-page-type="sub"] .place_box::after {content: ""; width: 100%; height: 100%; display: block; position: absolute; bottom: -20px; right: -2%; border: 1px solid #ddd; background-color: #fbfbfb; z-index: -1;}
[data-page-type="sub"] .place_box .place_wrap {padding-block: 30px;}
[data-page-type="sub"] .place_box .left {width: max-content; padding-inline: 80px; display: flex; justify-content: center; align-items: center; flex-direction: column; border-right: 1px solid #ddd;}
[data-page-type="sub"] .place_box .left h4 {font-family: 'MaruBuri', sans-serif; font-size: 30px; margin-bottom: 10px;}
[data-page-type="sub"] .place_box .right {padding-inline: 80px; flex: 1;}
[data-page-type="sub"] .place_box .right .ico {width: 30px; margin-inline: 0;}

@media screen and (max-width: 1024px) {
  [data-page-type="sub"] .place_box .place_wrap {gap: 30px;}
  [data-page-type="sub"] .place_box .left {width: 100%; border-right: 0; border-bottom: 1px solid #ddd;}
  [data-page-type="sub"] .place_box .left img {margin-bottom: 30px;}
  [data-page-type="sub"] .place_box .left,
  [data-page-type="sub"] .place_box .right {padding-inline: 20px;}
}

@media screen and (max-width: 475px) {
  [data-page-type="sub"] .place_box .right > .flex {flex-direction: column; margin-bottom: 20px; gap: 0;}
  [data-page-type="sub"] .place_box .right > .flex:last-of-type {margin-bottom: 0;}
  [data-page-type="sub"] .place_box::after {bottom: -10px;}
}

[data-page-type="sub"] .dot_line {border-bottom: 1px dotted #bebebe;}
[data-page-type="sub"] .checklist_grid {gap: 40px;}
[data-page-type="sub"] .checklist_grid li {padding: 30px; display: flex; flex-direction: column; border: 1px solid #bebebe; box-shadow: 4px 6px 1px 3px #ececec;}
[data-page-type="sub"] .checklist_grid li h4 {font-size: 135%;}
[data-page-type="sub"] .checklist_grid li h5 {margin-bottom: 10px; color: #58c4e1;}
[data-page-type="sub"] .checklist_grid li .gray_box {padding: 20px; border-radius: 10px;}
[data-page-type="sub"] .checklist_grid li .bulb {width: 60px; margin-right: 15px;}
[data-page-type="sub"] .checklist_grid li .bulb + p {color: #87766e; font-size: 16px; line-height: 1.5;}
[data-page-type="sub"] .safe_box .border {border: 2px solid var(--text-base);}
[data-page-type="sub"] .safe_box .pd_box {padding: 30px 20px;}
[data-page-type="sub"] .safe_box p {letter-spacing: -1px;}
[data-page-type="sub"] .safe_box .txt-left * {word-break: keep-all;}
[data-page-type="sub"] .safe_box .img_box {width: max-content; display: flex; align-items: flex-end;}
[data-page-type="sub"] .safe_box .img_box img {width: 100px; min-width: 100px; margin-inline: 0;}

@media screen and (max-width: 475px) {
  [data-page-type="sub"] .checklist_grid .max20 {max-width: 50%;}
  [data-page-type="sub"] .checklist_grid li {padding: 30px 20px;}
  [data-page-type="sub"] .checklist_grid li .gray_box {padding: 10px;}
  [data-page-type="sub"] .checklist_grid li .gray_box > .flex {flex-direction: column; gap: 20px;}
  [data-page-type="sub"] .checklist_grid li .bulb {margin-inline: auto;}
  [data-page-type="sub"] .checklist_grid li h4 {font-size: 120%;}
  [data-page-type="sub"] .safe_box .img_box {width: auto; max-width: 80%; margin-inline: auto;}
  [data-page-type="sub"] .safe_box .img_box img {width: auto; min-width: auto; max-width: 100%;}
}

/* frame */
.frame350 {min-width: 350px; width: 350px;} 

@media screen and (max-width: 768px) {
  .frame350 {width: 100%;}
}