/* root ----------------------- */
:root {
    --black: #000000;
    --white: #ffffff;
    --white-back: #ffffff;

    --gray900: #121212;
    --gray800: #1c1c1c;
    --gray700: #222222;
    --gray600: #2b2b2b;
    --gray500: #303030;
    --gray400: #444444;
    --gray300: #737373;
    --gray200: #c6c8ca;
    --gray100: #e3e5e9;
    --gray50: #f2f3f6;

    --blue900: #0d172d;
    --blue800: #001c48; /* main color */
    --blue700: #112e5e;
    --blue600: #294065;
    --blue500: #475c7b;
    --blue400: #667790;
    --blue300: #808da3;
    --blue200: #99a4b6;
    --blue100: #c6c8ca;
    --blue50: #d9dde4;

    --red: #ee2529; /* sub color */
    --light-red: #f5abac;
    --light-blue: #0061af;
    --sky-blue: #a2c6e2;
    --orange: #F5821F;
}
@media (prefers-color-scheme: dark) {
    :root {
        --black: #FFFFFF;
        --white: #121212;
        --white-back: #1C1C1C;

        --gray700: #f2f3f6;
        --gray400: #c6c8ca;
        --gray200: #444444;
        --gray100: #2B2B2B;
        --gray50: #121212;

        --blue800: #112e5e; /* main color */
    }
}

/* header ----------------------- */
header {width: 100%; min-width: 144rem; padding: 0 2rem; display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 999; background-color: var(--white-back);}
.header-wrap {width: 120rem; height: 11.2rem; margin: 0 auto; display: flex; align-items: center; position: relative; justify-content: space-between;}
.header-wrap > img {width: 14rem; height: auto;}
.header-wrap .desktop {display: block; width: fit-content; height: 100%;}
.header-wrap .desktop > ul {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.header-wrap .desktop > ul > li {position: relative; height: 100%;}
.header-wrap .desktop > ul > li > h4 {width: 16rem; height: 100%; font-size: 1.8rem; font-weight: 500; color: var(--gray700); display: flex; align-items: center; justify-content: center; column-gap: .8rem; cursor: pointer;}
.header-wrap .desktop > ul > li.active > h4 {font-weight: 700; color: var(--red);}
.header-wrap .desktop > ul > li.active > h4::after {content: ''; display: none; width: 100%; height: .3rem; background-color: var(--red); position: absolute; bottom: -4.8rem; opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; z-index: 1;}
.header-wrap .desktop > ul > li > ul {display: none; width: 100%; padding: 2rem 0; flex-flow: column; align-items: center; justify-content: center; row-gap: 3rem; position: absolute; left: 0; opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; z-index: 2;}
.header-wrap .desktop > ul > li > ul > li {text-align: center; font-size: 1.8rem; font-weight: 500; cursor: pointer; line-height: 1.6;}
.header-wrap .desktop > ul > li > ul > li.active {font-weight: 600; color: var(--red);}
.header-wrap .desktop .menu-back {display: none; width: 100vw; min-width: 144rem; height: 33.2rem; background-color: var(--white-back); position: fixed; left: 0; top: 11.2rem; border-top: 1px solid var(--gray100); opacity: 0; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; z-index: 1;}

.header-wrap .desktop > ul:hover > li > ul {display: flex; opacity: 1;}
.header-wrap .desktop > ul:hover > li.active > h4::after,
.header-wrap .desktop > ul:hover + .menu-back {display: block; opacity: 1;}

/* 3뎁스 */
.header-wrap .desktop > ul > li > ul > li > ul {display: flex; flex-flow: column; row-gap: 1.2rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--gray100);}
.header-wrap .desktop > ul > li > ul > li > ul > li {font-size: 1.4rem; font-weight: 400; color: var(--gray400); cursor: pointer;}
.header-wrap .desktop > ul > li > ul > li > ul > li:hover {color: var(--gray700);}

.header-wrap .mobile {display: none;}

@media screen and (max-width: 768px) {
    header {width: 100%; min-width: auto; padding: 0 2rem; transition: none; overflow: hidden;}
    header::before {content: ''; width: 100vw; height: 1px; background-color: rgba(227, 229, 233, .4); position: absolute; top: 6.8rem; left: 0; z-index: 1;}
    .header-wrap {width: 100%; height: 6.8rem; justify-content: space-between;}
    .header-wrap > img {width: 10.4rem;}

    .header-wrap .desktop {display: none;}

    .header-wrap .mobile {display: block;}
    .header-wrap .mobile .menu {width: 2.4rem; height: 2.4rem; padding: 0; background-color: transparent; border: 0;}
    .header-wrap .mobile .menu > span {width: 1.6rem; height: .15rem; display: block; background-color: var(--black); position: relative; transition: background-color .2s ease-out;}
    .header-wrap .mobile .menu > span::before,
    .header-wrap .mobile .menu > span::after {content: ''; background-color: var(--black); display: block; width: 100%; height: .15rem; position: absolute; transition: all .2s ease-out;}
    .header-wrap .mobile .menu > span::before {top: -.6rem;}
    .header-wrap .mobile .menu > span::after {bottom: -.6rem;}

    .header-wrap .mobile .menu.active > span {background-color: transparent;}
    .header-wrap .mobile .menu.active > span::before {transform: rotate(45deg); top: 0; left: -.2rem; width: 2.2rem;}
    .header-wrap .mobile .menu.active > span::after {transform: rotate(-45deg); top: 0; left: -.2rem; width: 2.2rem;}

    .header-wrap .mobile .menu-wrap {display: none; position: fixed; top: 6.8rem; left: 0; width: 100vw; height: calc(100vh - 6.8rem); padding: 3.2rem 2rem; background-color: var(--white);}
    .header-wrap .mobile .menu-wrap.active {display: flex; flex-flow: column; row-gap: 3.6rem;}
    .header-wrap .mobile .menu-wrap.active > li {position: relative;}
    .header-wrap .mobile .menu-wrap.active > li > h4 {font-size: 2.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; column-gap: .8rem;}
    .header-wrap .mobile .menu-wrap.active > li > ul {display: flex; flex-flow: column; row-gap: 2.4rem; height: 0;}
    .header-wrap .mobile .menu-wrap.active > li > ul::before {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-arrow-up-24.svg); background-repeat: no-repeat; background-size: 2.4rem; background-position: center 0; position: absolute; top: 0; right: 0; transform: rotate(180deg); cursor: pointer;}
    .header-wrap .mobile .menu-wrap.active > li > ul > li {font-size: 1.8rem; font-weight: 500; cursor: pointer; visibility: hidden;}

    .header-wrap .mobile .menu-wrap.active > li.active > ul {height: fit-content; margin-top: 3.2rem; padding-bottom: 1.2rem;}
    .header-wrap .mobile .menu-wrap.active > li.active > ul::before {transform: rotate(0deg);}
    .header-wrap .mobile .menu-wrap.active > li.active > ul > li {visibility: visible;}
}
@media (prefers-color-scheme: dark) {
    .header-wrap .mobile .menu-wrap.active > li > ul::before {filter: invert(1);}
}

/* footer ----------------------- */
footer {width: 100%; min-width: 144rem; padding: 0 2rem; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--gray100);}
.footer-wrap {width: 120rem; margin: 0 auto; padding: 4rem 0 5.2rem; display: flex; justify-content: space-between;}
.footer-wrap .logo {display: flex; flex-flow: column; row-gap: 2rem; align-items: flex-start;}
.footer-wrap .logo > img {width: 14rem;}
.footer-wrap .logo > div {display: flex; align-items: center; column-gap: 1.2rem;}
.footer-wrap .logo > div > h3 {font-size: 1.6rem; font-weight: 600; color: var(--gray300); display: flex; align-items: center; column-gap: 1.2rem;}
.footer-wrap .logo > div > h3::after {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray300);}
.footer-wrap .logo > div > img {height: 3.4rem;}

.footer-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: flex-end;}
.footer-wrap > div .family {height: 3.6rem; padding: 0 5.2rem 0 1rem; font-size: 1.4rem; background-image: url(../img/ico/ic-plus-14.svg); background-size: 1.4rem; background-position: center right 1rem;}
.footer-wrap > div > ul {margin-top: .8rem; display: flex; align-items: center; column-gap: .6rem;}
.footer-wrap > div > ul > li {font-size: 1.4rem; color: var(--gray300); display: flex; align-items: center;}
.footer-wrap > div > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300); margin-right: .6rem;}
.footer-wrap > div > p {font-size: 1.4rem; color: var(--gray300);}

@media screen and (max-width: 768px) {
    footer {min-width: auto;}
    .footer-wrap {width: 100%; padding: 3rem 0 4rem; flex-flow: column; row-gap: 2rem;}
    .footer-wrap .logo > img {width: 10.4rem;}
    .footer-wrap .logo > div {column-gap: 1rem;}
    .footer-wrap .logo > div > h3 {font-size: 1.4rem; column-gap: 1rem;}
    .footer-wrap .logo > div > img {height: 2.4rem;}

    .footer-wrap > div {align-items: flex-start; flex-flow: column-reverse; row-gap: 1rem;}
    .footer-wrap > div > select {width: 100%;}
    .footer-wrap > div > ul {margin-top: 0; margin-bottom: 1rem; column-gap: .4rem;}
    .footer-wrap > div > ul > li {font-size: 1.3rem;}
    .footer-wrap > div > ul > li + li::before {margin-right: .4rem;}
    .footer-wrap > div > p {font-size: 1.3rem; color: var(--gray300);}
}

/* container ----------------------- */
.container {width: 100%; min-width: 144rem; padding: 10rem 2rem 16rem; overflow-x: hidden;}
.container .contents {width: 120rem; margin: 0 auto;}

@media screen and (max-width: 768px) {
    .container {width: 100%; min-width: auto; padding: 3rem 2rem;}
    .container .contents {width: 100%;}
}

/* main ----------------------- */
.main header.trans {background-color: transparent;}
.main header.trans .header-wrap .desktop > ul > li > h4 {color: #ffffff;}
.main header.trans .header-wrap .desktop > ul > li > h4 > i {background-image: url(../img/ico/ic-link-20-wh.svg);}

.main header.white {background-color: var(--white-back);}
.main header.white .header-wrap .desktop > ul > li > h4 {color: var(--gray700);}
.main header.white .header-wrap .desktop > ul > li > h4 > i {background-image: url(../img/ico/ic-link-20.svg);}

@media screen and (max-width: 768px) {
    .main header.trans .header-wrap .mobile .menu > span {background-color: #ffffff;}
    .main header.trans .header-wrap .mobile .menu > span::before,
    .main header.trans .header-wrap .mobile .menu > span::after {background-color: #ffffff;}
    .main header.trans .header-wrap .mobile .menu.active > span {background-color: transparent;}
    .main header.trans .header-wrap .mobile .menu.active > span::before,
    .main header.trans .header-wrap .mobile .menu.active > span::after {background-color: var(--black);}
}

@media (prefers-color-scheme: dark) {
    .main header.white .header-wrap .desktop > ul > li > h4 > i {background-image: url(../img/ico/ic-link-20-wh.svg);}
}

.main-title {margin-bottom: 10rem; display: flex; align-items: center; justify-content: space-between; column-gap: 2rem;}
.main-title > h2 {font-size: 4.8rem; font-weight: 700; line-height: 1.4; display: flex; align-items: flex-end; column-gap: 1.2rem;}
.main-title > h2 > i {margin-bottom: 1.1rem;}
.main-title > p {width: 50%; font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .main-title {margin-bottom: 3rem; row-gap: 3rem; flex-wrap: wrap;}
    .main-title > h2 {font-size: 2.2rem; column-gap: .8rem;}
    .main-title > h2 > i {width: 2.4rem; height: 2.4rem; margin-bottom: .6rem;}
    .main-title > p {width: 100%; font-size: 1.5rem;}
}

.main-banner-wrap {width: 100vw; min-width: 144rem; height: 100vh; min-height: 67rem; position: absolute; top: 0; left: 0;}
.main-banner-wrap + * {margin-top: calc(100vh - 11.2rem - 10rem + 20rem);}
.main-banner-wrap .scroll {width: 12.4rem; height: 2rem; position: absolute; right: 6rem; bottom: 12.4rem; z-index: 9; font-size: 2rem; font-weight: 500; color: #ffffff; display: flex; align-items: center; column-gap: 1.2rem; transform: rotate(-90deg); cursor: default;}
.main-banner-wrap .scroll .ic-arrow-scroll {width: 6rem; height: 2rem; background-image: url(../img/ico/ic-arrow-scroll.svg);}

.main-banner-swiper {height: 100%; overflow: hidden;}
.main-banner-swiper .swiper-slide {height: 100%; display: flex; align-items: center;}
.main-banner-swiper .swiper-slide .img {background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1;}
.main-banner-swiper .swiper-slide .img.desktop {width: 100vw; min-width: 144rem; height: 100vh; min-height: 67rem;}
.main-banner-swiper .swiper-slide .img.mobile {display: none;}
.main-banner-swiper .swiper-slide .desc {width: 120rem; margin: 0 auto; display: flex; flex-flow: column; row-gap: 3.2rem; position: relative; z-index: 2; }
.main-banner-swiper .swiper-slide .desc > h1 {font-size: 7.2rem; font-weight: 700; color: #ffffff; line-height: 1.4;}
.main-banner-swiper .swiper-slide .desc > p {font-size: 2rem; font-weight: 500; color: #ffffff; opacity: .6; line-height: 1.6;}
.main-banner-swiper .swiper-slide .desc > a {width: fit-content; margin-top: 2.8rem; font-size: 2rem; font-weight: 500; color: #ffffff; display: flex; align-items: center; column-gap: 1.2rem; padding-bottom: 1rem; border-bottom: .2rem solid #ffffff;}

.main-banner-swiper .swiper-controller {display: flex; align-items: center; column-gap: 1.2rem; z-index: 2; position: absolute; bottom: 8rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.main-banner-swiper .swiper-button-prev::after, .main-banner-swiper .swiper-button-next::after {content: none!important;}
.main-banner-swiper .swiper-button-prev, .main-banner-swiper .swiper-button-next {width: 2.4rem; height: 2.4rem; margin: 0; left: initial; right: initial; top: initial; position: relative;}
.main-banner-swiper .swiper-button-prev::before, .main-banner-swiper .swiper-button-next::before {content: ''; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.main-banner-swiper .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev-24.svg);}
.main-banner-swiper .swiper-button-next::before {background-image: url(../img/ico/swiper-next-24.svg);}

.main-banner-swiper .swiper-controller-sub {width: 20rem; display: flex; align-items: center; justify-content: center; position: relative;}
.main-banner-swiper .swiper-controller-sub .swiper-pagination-fraction {width: 100%; position: absolute; top: 50%; bottom: initial; right: initial; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-between;}
.main-banner-swiper .swiper-controller-sub .swiper-pagination-fraction span {width: 2rem; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.6rem; font-weight: 500; color: #fff; opacity: .6;}
.main-banner-swiper .swiper-controller-sub .swiper-pagination-fraction .swiper-pagination-current {opacity: 1; font-weight: 600;}
.main-banner-swiper .swiper-controller-sub .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 14rem; height: .4rem; position: relative; background-color: transparent; border-bottom: .2rem solid rgba(255,255,255,.4);}
.main-banner-swiper .swiper-controller-sub .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #fff; bottom: 0; height: .4rem;}

.main-banner-swiper .ic-stop-24 {width: 2.4rem!important;}
.main-banner-swiper .ic-stop-24.active {background-image: url(../img/ico/ic-play-24.svg);}

@media screen and (max-width: 768px) {
    .main-banner-wrap {min-width: 100%; min-height: 57.5rem;}
    .main-banner-wrap + * {margin-top: calc(100vh - 6.8rem - 3rem + 4.8rem);}
    .main-banner-wrap .scroll {display: none;}

    .main-banner-swiper .swiper-slide .img.desktop {display: none;}
    .main-banner-swiper .swiper-slide .img.mobile {display: block; width: 100vw; height: 100vh; min-width: 100%; min-height: 57.5rem;}
    .main-banner-swiper .swiper-slide .desc {width: 100%; margin: 0 auto; padding: 0 3rem; row-gap: 1.8rem;}
    .main-banner-swiper .swiper-slide .desc > h1 {font-size: 2.6rem;}
    .main-banner-swiper .swiper-slide .desc > p {font-size: 1.5rem; word-break: keep-all;}
    .main-banner-swiper .swiper-slide .desc > a {margin-top: 2.2rem; font-size: 1.3rem; column-gap: .2rem; padding-bottom: .6rem;}
    .main-banner-swiper .swiper-slide .desc > a > i {width: 1rem; height: 1rem;}

    .main-banner-swiper .swiper-controller {bottom: 3rem;}
    .main-banner-swiper .swiper-button-prev, .main-banner-swiper .swiper-button-next {width: 1.6rem; height: 1.6rem;}
    .main-banner-swiper .swiper-button-prev::before, .main-banner-swiper .swiper-button-next::before {width: 1.6rem; height: 1.6rem;}

    .main-banner-swiper .swiper-controller-sub {width: 15.2rem;}
    .main-banner-swiper .swiper-controller-sub .swiper-pagination-fraction span {width: 1.6rem; font-size: 1.3rem;}
    .main-banner-swiper .swiper-controller-sub .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 10.4rem;}

    .main-banner-swiper .ic-stop-24 {width: 1.6rem!important; height: 1.6rem;}
}

.cont-box.banner {margin-top: calc(100vh - 11.2rem - 10rem + 20rem - 15rem);}
.cont-box.banner + .cont-box {margin-top: 4rem;}

@media screen and (max-width: 768px) {
    .cont-box.banner {margin-top: calc(100vh - 6.8rem - 3rem + 4.8rem);}
    .cont-box.banner + .cont-box {margin-top: 4rem;}
}

/* main > vision */
.main-vision {display: grid; grid-template-columns: repeat(4,1fr); column-gap: 2rem;}
.main-vision > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.main-vision > li img {width: 100%;}
.main-vision > li > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.main-vision > li > div > h4 {font-size: 3.2rem; font-weight: 600;}
.main-vision > li > div > p {font-size: 1.8rem; font-weight: 500; color: var(--gray300);}

@media screen and (max-width: 768px) {
    .main-vision {grid-template-columns: repeat(2,1fr); grid-gap: 2.4rem 1.2rem;}
    .main-vision > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
    .main-vision > li > div {row-gap: .6rem;}
    .main-vision > li > div > h4 {font-size: 1.6rem;}
    .main-vision > li > div > p {font-size: 1.3rem;}
}

/* main > program */
.cont-box.program {padding: 16rem 0; position: relative;}
.cont-box.program > * {position: relative; z-index: 2;}
.cont-box.program::before {content: ''; width: 100vw; min-width: 144rem; height: 100%; background-color: var(--blue900); display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}

.cont-box.program .program-pattern {position: absolute; width: 100vw; min-width: 144rem; height: 100%; top: 0;  left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}
.cont-box.program .program-pattern::before {content: ''; width: 76rem; height: 58rem; display: block; background-image: url(../img/bg-pattern-main-program01.svg); background-repeat: no-repeat; background-size: contain; background-position: top right; position: absolute; top: 14rem; right: 0;}
.cont-box.program .program-pattern::after {content: ''; width: 71rem; height: 79rem; display: block; background-image: url(../img/bg-pattern-main-program02.svg); background-repeat: no-repeat; background-size: contain; background-position: bottom left; position: absolute; bottom: 0; left: 0;}

.cont-box.program .main-title * {color: #ffffff;}
.cont-box.program .main-title + p {font-size: 2.4rem; font-weight: 500; color: #ffffff; margin-top: -4rem; margin-bottom: 4rem;}

.program-swiper {padding-bottom: 12.6rem;}
.program-swiper .swiper-slide {width: 55rem; display: flex; flex-flow: column; row-gap: 3.2rem;}
.program-swiper .swiper-slide > img {width: 100%;}
.program-swiper .swiper-slide > div > div {font-size: 2.4rem; font-weight: 600; color: var(--blue300);}
.program-swiper .swiper-slide > div > h4 {margin-top: 1.6rem; font-size: 3.2rem; font-weight: 600; color: #ffffff; line-height: 1.4;}
.program-swiper .swiper-slide > div > p {height: 8.8rem; margin-top: 3.2rem; font-size: 1.8rem; color: var(--blue400); line-height: 1.6; word-break: keep-all;}
.program-swiper .swiper-slide > div > a {width: fit-content; margin-top: 4rem; font-size: 1.8rem; font-weight: 600; color: #ffffff; display: flex; align-items: center; column-gap: .8rem; padding-bottom: .8rem; border-bottom: .2rem solid #ffffff;}

.program-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {bottom: 0; top: initial; background-color: rgba(255,255,255,.4); height: .2rem;}
.program-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #ffffff; height: .4rem; position: absolute; bottom: 0; top: initial;}

/* .program-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10rem;}
.program-wrap > div {display: flex; flex-flow: column; row-gap: 5rem;}
.program-wrap > div > img {position: relative; z-index: 2; width: 100%; height: fit-content;}
.program-wrap > div > div {position: relative; z-index: 1; width: 100%;}
.program-wrap > div > div > div {font-size: 10rem; font-weight: 700; color: #ffffff; opacity: .08; position: absolute; top: -1rem; right: 0;}
.program-wrap > div > div > h4 {font-size: 3.2rem; font-weight: 600; color: #ffffff; line-height: 1.4;}
.program-wrap > div > div > p {font-size: 1.8rem; color: var(--blue400); line-height: 1.6; width: 44rem; margin-top: 3.2rem; word-break: keep-all;}
.program-wrap > div > div > a {width: fit-content; margin-top: 4rem; font-size: 1.8rem; font-weight: 600; color: #ffffff; display: flex; align-items: center; column-gap: .8rem; padding-bottom: .8rem; border-bottom: .2rem solid #ffffff;}

.program-wrap .article01 {grid-column: 1; grid-row: 1 / span 2;}
.program-wrap .article02 {grid-column: 2; grid-row: 2 / span 2;}
.program-wrap .article03 {grid-column: 1; grid-row: 3 / span 2;}
.program-wrap .article04 {grid-column: 2; grid-row: 4 / span 2;} */

@media screen and (max-width: 768px) {
    .cont-box.program {padding: 4rem 0;}
    .cont-box.program::before {min-width: 100%;}

    .cont-box.program .program-pattern {min-width: 100%;}
    .cont-box.program .program-pattern::before {content: ''; width: 100%; height: 100%; display: block; background-image: url(../img/bg-pattern-main01-mb.svg); background-repeat: no-repeat; background-position: center; top: 0; left: 0; right: initial;}
    .cont-box.program .program-pattern::after {content: none;}

    .cont-box.program .main-title + p {font-size: 1.4rem; margin-top: 0; margin-bottom: 2rem;}

    .program-swiper {padding-bottom: 4rem;}
    .program-swiper .swiper-slide {width: 24rem; row-gap: 1.6rem;}
    .program-swiper .swiper-slide > div {height: 25.6rem; position: relative;}
    .program-swiper .swiper-slide > div > div {font-size: 1.6rem;}
    .program-swiper .swiper-slide > div > h4 {margin-top: .8rem; font-size: 1.8rem; word-break: keep-all;}
    .program-swiper .swiper-slide > div > p {height: fit-content; margin-top: 2rem; font-size: 1.5rem;}
    .program-swiper .swiper-slide > div > a {margin-top: 0; font-size: 1.3rem; column-gap: .2rem; padding-bottom: .6rem; position: absolute; bottom: 0;}
    .program-swiper .swiper-slide > div > a > i {width: 1rem; height: 1rem;}

    .program-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {bottom: 0; top: initial; background-color: rgba(255,255,255,.4); height: .2rem;}
    .program-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #ffffff; height: .4rem; position: absolute; bottom: 0; top: initial;}

    /* .program-wrap {grid-template-columns: repeat(3, 1fr); grid-gap: 4rem;}
    .program-wrap > div {row-gap: 2.4rem;}
    .program-wrap > div > div {display: flex; flex-flow: column; row-gap: 1.6rem;}
    .program-wrap > div > div > div {font-size: 5rem; top: -.5rem;}
    .program-wrap > div > div > h4 {font-size: 1.8rem;}
    .program-wrap > div > div > p {font-size: 1.5rem; width: 100%; margin-top: 0;}
    .program-wrap > div > div > a {margin-top: 0; font-size: 1.3rem; column-gap: .2rem; padding-bottom: .6rem;}
    .program-wrap > div > div > a > i {width: 1rem; height: 1rem;}

    .program-wrap .article01 {grid-column: 1 / span 2; grid-row: 1;}
    .program-wrap .article02 {grid-column: 2 / span 2; grid-row: 2;}
    .program-wrap .article03 {grid-column: 1 / span 2; grid-row: 3;}
    .program-wrap .article04 {grid-column: 2 / span 2; grid-row: 4;} */

}

/* main > news */
.news-swiper .swiper-slide {cursor: pointer;}
.news-swiper .swiper-slide:hover {box-shadow: .2rem .2rem 4rem 0 rgba(0, 28, 72, .12);}
.news-swiper .swiper-slide .img {width: 100%; height: 28rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.news-swiper .swiper-slide .desc {width: 100%; border: 1px solid var(--gray100); background-color: var(--white); padding: 3.2rem 2.6rem; display: flex; flex-flow: column; row-gap: 2rem;}
.news-swiper .swiper-slide .desc > h6 {height: 6.8rem; font-size: 2.4rem; font-weight: 600; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news-swiper .swiper-slide .desc > p {font-size: 1.6rem; color: var(--gray300);}

.news-swiper-controller {display: flex; align-items: center; column-gap: 3rem;}
.news-swiper-controller .news-swiper-button-prev::after, .news-swiper-controller .news-swiper-button-next::after {content: none!important;}
.news-swiper-controller .news-swiper-button-prev, .news-swiper-controller .news-swiper-button-next {width: 4rem; height: 4rem; margin: 0; position: relative;}
.news-swiper-controller .news-swiper-button-prev.swiper-button-disabled, .news-swiper-controller .news-swiper-button-next.swiper-button-disabled {opacity: 1;}
.news-swiper-controller .news-swiper-button-prev::before, .news-swiper-controller .news-swiper-button-next::before {content: ''; display: block; width: 4rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.news-swiper-controller .news-swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.news-swiper-controller .news-swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.news-swiper-controller .news-swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.news-swiper-controller .news-swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .news-swiper .swiper-slide {width: 27.2rem;}
    .news-swiper .swiper-slide .img {width: 100%; height: 17.4rem;}
    .news-swiper .swiper-slide .desc {padding: 2rem 1.6rem; row-gap: 1rem;}
    .news-swiper .swiper-slide .desc > h6 {height: 4.2rem; font-size: 1.5rem;}
    .news-swiper .swiper-slide .desc > p {font-size: 1.3rem;}
    .news-swiper .swiper-slide-active {filter: drop-shadow(12px 12px 40px rgba(0, 28, 72, 0.12));}

    .news-swiper-controller {column-gap: 1rem;}
    .news-swiper-controller .news-swiper-button-prev, .news-swiper-controller .news-swiper-button-next {width: 2.4rem; height: 2.4rem;}
    .news-swiper-controller .news-swiper-button-prev::before, .news-swiper-controller .news-swiper-button-next::before {width: 2.4rem; height: 2.4rem;}
}
@media (prefers-color-scheme: dark) {
    .news-swiper-controller .news-swiper-button-prev::before,
    .news-swiper-controller .news-swiper-button-prev.swiper-button-disabled::before,
    .news-swiper-controller .news-swiper-button-next::before,
    .news-swiper-controller .news-swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
}

/* main > report */
.report-swiper {overflow: hidden;}
.report-swiper .swiper-slide {cursor: pointer; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center;}
.report-swiper .swiper-slide .img {width: 100%; height: fit-content; background-repeat: no-repeat; background-size: contain; background-position: center bottom; padding-top: 3rem; margin-top: -3rem; display: flex; align-items: flex-end; justify-content: center; position: relative;}
.report-swiper .swiper-slide .img > img {width: 20rem; box-shadow: 0 .2rem 4rem 0 rgba(0, 28, 72, .12);}
.report-swiper .swiper-slide .img > i {position: absolute; right: 1.6rem; bottom: 1.6rem;}
.report-swiper .swiper-slide > h6 {font-size: 3.2rem; font-weight: 700;}

.report-swiper-controller {display: flex; align-items: center; column-gap: 3rem;}
.report-swiper-controller .report-swiper-button-prev::after, .report-swiper-controller .report-swiper-button-next::after {content: none!important;}
.report-swiper-controller .report-swiper-button-prev, .report-swiper-controller .report-swiper-button-next {width: 4rem; height: 4rem; margin: 0; position: relative;}
.report-swiper-controller .report-swiper-button-prev.swiper-button-disabled, .report-swiper-controller .report-swiper-button-next.swiper-button-disabled {opacity: 1;}
.report-swiper-controller .report-swiper-button-prev::before, .report-swiper-controller .report-swiper-button-next::before {content: ''; display: block; width: 4rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.report-swiper-controller .report-swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.report-swiper-controller .report-swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg);}
.report-swiper-controller .report-swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.report-swiper-controller .report-swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg);}

@media screen and (max-width: 768px) {
    .report-swiper .swiper-slide {row-gap: 1.6rem;}
    .report-swiper .swiper-slide .img {padding-top: 1rem; margin-top: -1rem;}
    .report-swiper .swiper-slide .img > img {width: 12rem;}
    .report-swiper .swiper-slide .img > i {width: 3.2rem; height: 3.2rem; right: 1rem; bottom: 1rem;}
    .report-swiper .swiper-slide > h6 {font-size: 1.8rem;}

    .report-swiper-controller {column-gap: 1rem;}
    .report-swiper-controller .report-swiper-button-prev, .report-swiper-controller .report-swiper-button-next {width: 2.4rem; height: 2.4rem;}
    .report-swiper-controller .report-swiper-button-prev::before, .report-swiper-controller .report-swiper-button-next::before {width: 2.4rem; height: 2.4rem;}
}
@media (prefers-color-scheme: dark) {
    .report-swiper-controller .report-swiper-button-prev::before,
    .report-swiper-controller .report-swiper-button-prev.swiper-button-disabled::before,
    .report-swiper-controller .report-swiper-button-next::before,
    .report-swiper-controller .report-swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
}

/* main > sponsor */
.sponsor-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
.sponsor-wrap > li {display: flex; align-items: center; justify-content: center;}
.sponsor-wrap img {width: 100%;}

.sponsor2-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
.sponsor2-wrap > li {display: flex; align-items: center; justify-content: center;}
.sponsor2-wrap img {width: 100%; cursor: pointer;}

.sponsor4-wrap {display: grid; grid-template-columns: repeat(4, 1fr);}
.sponsor4-wrap > li {display: flex; align-items: center; justify-content: center;}
.sponsor4-wrap img {width: 100%; cursor: pointer;}

.sponsor3-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
.sponsor3-wrap > li {display: flex; align-items: center; justify-content: center;}
.sponsor3-wrap img {width: 100%; cursor: pointer;}

/* main > banner */
.main-banner {margin-bottom: -16rem; display: flex; align-items: center; justify-content: center; position: relative;}
.main-banner::before {content: ''; width: 100vw; min-width: 144rem; height: 100%; display: block; background-color: #0E172E; position: absolute; z-index: 1;}
.main-banner img {width: 100vw; min-width: 144rem; position: relative; z-index: 2;}
.main-banner .desktop {display: block;}
.main-banner .mobile {display: none;}

@media screen and (max-width: 768px) {
    .main-banner {margin-bottom: -3rem;}
    .main-banner img {min-width: initial;}
    .main-banner .desktop {display: none;}
    .main-banner .mobile {display: block;}
}

/* intro ----------------------- */
/* intro > vision */
.vision-wrap {display: flex; flex-flow: column; row-gap: 10rem;}
.vision-wrap > div {display: flex; column-gap: 10rem;}
.vision-wrap > div > h4 {width: 20rem; height: fit-content; font-size: 3.2rem; font-weight: 700; position: relative; text-transform: uppercase; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray700);}
.vision-wrap > div > *:not(h4) {width: calc(100% - 20rem - 10rem);}

.vision-wrap .vision > div {display: flex; flex-flow: column; row-gap: 2rem;}
.vision-wrap .vision > div > h6 {font-size: 2.4rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.vision-wrap .vision > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}

.vision-wrap .goals > ul {display: flex; flex-flow: column; row-gap: 3rem;}
.vision-wrap .goals > ul > li {display: flex; align-items: center; column-gap: 4rem;}
.vision-wrap .goals > ul > li > img {width: 30rem;}
.vision-wrap .goals > ul > li > div {width: 42rem; display: flex; flex-flow: column; row-gap: 2.6rem;}
.vision-wrap .goals > ul > li > div > h4 {font-size: 3.2rem; font-weight: 600; display: flex; align-items: flex-end; column-gap: .6rem;}
.vision-wrap .goals > ul > li > div > h4 > span {font-size: 1.8rem; font-weight: 500; color: var(--gray300); line-height: 1.4;}
.vision-wrap .goals > ul > li > div > div {display: flex; flex-flow: column; row-gap: .6rem;}
.vision-wrap .goals > ul > li > div > div > h6 {font-size: 1.8rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.vision-wrap .goals > ul > li > div > div > p {font-size: 1.8rem; color: var(--gray400); line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .vision-wrap {row-gap: 2.8rem;}
    .vision-wrap > div {width: 100%; flex-flow: column; row-gap: 4rem;}
    .vision-wrap > div > h4 {width: 100%; font-size: 2.2rem; padding-bottom: -2rem;}
    .vision-wrap > div > *:not(h4) {width: 100%;}

    .vision-wrap .vision > div {row-gap: 2rem;}
    .vision-wrap .vision > div > h6 {font-size: 1.8rem;}
    .vision-wrap .vision > div > p {font-size: 1.5rem;}

    .vision-wrap .goals > ul {row-gap: 3rem;}
    .vision-wrap .goals > ul > li {flex-flow: column; row-gap: 2rem;}
    .vision-wrap .goals > ul > li > img {width: 100%;}
    .vision-wrap .goals > ul > li > div {width: 100%; row-gap: 1.6rem;}
    .vision-wrap .goals > ul > li > div > h4 {font-size: 2rem; column-gap: .6rem; align-items: center;}
    .vision-wrap .goals > ul > li > div > h4 > span {font-size: 1.6rem;}
    .vision-wrap .goals > ul > li > div > div {row-gap: .4rem;}
    .vision-wrap .goals > ul > li > div > div > h6 {font-size: 1.6rem;}
    .vision-wrap .goals > ul > li > div > div > p {font-size: 1.5rem;}
}

/* intro > history */
.history-swiper-wrap {display: flex; flex-flow: column; row-gap: 6rem;}
.history-swiper-wrap .history-button {display: flex; align-items: center; column-gap: 6rem;}
.history-swiper-wrap .history-button > li {font-size: 3.2rem; font-weight: 700; color: var(--gray200); cursor: pointer; position: relative;}
.history-swiper-wrap .history-button > li.active {color: var(--gray700);}
.history-swiper-wrap .history-button > li.active::before {content: ''; width: 100%; height: .2rem; background-color: var(--gray700); position: absolute; bottom: -.8rem;}

.history-swiper-wrap .history-swiper {overflow: hidden;}
.history-swiper-wrap .history-swiper .swiper-wrapper {transition-duration: 200ms!important;}
.history-swiper-wrap .history-swiper .swiper-slide {width: 25%; display: flex; flex-flow: column; row-gap: 3.2rem; cursor: pointer;}
.history-swiper-wrap .history-swiper .swiper-slide div {display: none;}
.history-swiper-wrap .history-swiper .swiper-slide-active {width: 50%; padding: 0 3rem;}
.history-swiper-wrap .history-swiper .swiper-slide-active div {display: flex; flex-flow: column; row-gap: 1.6rem;}
.history-swiper-wrap .history-swiper .swiper-slide-active div > h6 {font-size: 4.8rem; font-weight: 700;}
.history-swiper-wrap .history-swiper .swiper-slide-active div > ul {list-style: disc; padding-left: 2.4rem;}
.history-swiper-wrap .history-swiper .swiper-slide-active div > ul > li {font-size: 2.4rem; line-height: 1.6;}
.history-swiper-wrap .history-swiper .swiper-slide img {width: 100%;}

@media screen and (max-width: 768px) {
    .history-swiper-wrap {row-gap: 2.6rem;}
    .history-swiper-wrap .history-button {column-gap: 2.4rem; width: 100vw; padding: 0 2rem; margin: 0 -2rem; overflow-x: auto; overflow-y: hidden;}
    .history-swiper-wrap .history-button::-webkit-scrollbar,
    .history-swiper-wrap .history-button::-webkit-scrollbar-thumb,
    .history-swiper-wrap .history-button::-webkit-scrollbar-track {opacity: 0; width: 0; height: 0; z-index: 0;}
    .history-swiper-wrap .history-button > li {font-size: 2.2rem;}
    .history-swiper-wrap .history-button > li.active::before {bottom: -.4rem;}

    .history-swiper-wrap .history-swiper .swiper-slide {row-gap: 2rem;}
    .history-swiper-wrap .history-swiper .swiper-slide-active {width: 100%; padding: 0;}
    .history-swiper-wrap .history-swiper .swiper-slide-active div > h6 {font-size: 2.8rem;}
    .history-swiper-wrap .history-swiper .swiper-slide-active div > ul > li {font-size: 1.5rem;}
}

/* intro > people */
.organization img {width: 100%;}
.organization .desktop {display: block;}
.organization .mobile {display: none;}

@media screen and (max-width: 768px) {
    .organization .desktop {display: none;}
    .organization .mobile {display: block;}
}

/* intro > greeting */
.greeting-wrap {display: flex; column-gap: 3rem;}
.greeting-wrap img {width: 20rem; height: fit-content;}

.greeting-wrap > div {width: calc(100% - 20rem - 3rem); display: flex; flex-flow: column; row-gap: 2rem;}
.greeting-wrap > div > h4 {font-size: 2.4rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.greeting-wrap > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}
.greeting-wrap > div > h6 {font-size: 2rem; line-height: 1.6; word-break: keep-all; align-self: flex-end;}

@media screen and (max-width: 768px) {
    .greeting-wrap {flex-flow: column; row-gap: 2rem;}
    .greeting-wrap img {width: 100%;}

    .greeting-wrap > div {width: 100%; row-gap: 1.4rem;}
    .greeting-wrap > div > h4 {font-size: 2rem;}
    .greeting-wrap > div > p {font-size: 1.6rem;}
    .greeting-wrap > div > h6 {font-size: 1.8rem;}
}

.cont-box.member {padding: 16rem 0; margin-bottom: -16rem; position: relative;}
.cont-box.member * {position: relative; z-index: 2;}
.cont-box.member::before {content: ''; width: 100vw; min-width: 144rem; height: 100%; background-color: var(--gray50); display: block; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}

.member-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem;}
.member-wrap > li {background-color: var(--white-back); padding: 4.8rem 3.2rem; display: flex; flex-flow: column; align-items: center; row-gap: 3.2rem;}
.member-wrap > li > h4 {width: 100%; padding-bottom: 2rem; border-bottom: .2rem solid var(--gray700); display: flex; align-items: flex-end; justify-content: center; column-gap: .8rem; font-size: 3.2rem; font-weight: 700;}
.member-wrap > li > h4 > span {font-size: 2.4rem; color: var(--gray300);}
.member-wrap > li > ul {width: 100%; display: flex; flex-flow: column; row-gap: 1.4rem;}
.member-wrap > li > ul > li {display: flex; align-items: flex-start; column-gap: 1.2rem; font-size: 1.8rem;}
.member-wrap > li > ul > li > h6 {width: 1.6rem; font-weight: 600; line-height: 1.6;}
.member-wrap > li > ul > li.now > h6 {color: var(--light-blue);}
.member-wrap > li > ul > li > p {width: calc(100% - 1.2rem - 1.8rem); color: var(--gray400); line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}
.member-wrap > li > ul > li > p::before {content: '|'; margin-right: .6rem;}

@media screen and (max-width: 768px) {
    .cont-box.member {padding: 4rem 0; margin-bottom: -4rem;}
    .cont-box.member::before {min-width: initial;}

    .member-wrap {grid-template-columns: repeat(1, 1fr); grid-gap: 1.2rem;}
    .member-wrap > li {padding: 4rem 2rem; row-gap: 2.4rem;}
    .member-wrap > li > h4 { column-gap: .4rem; font-size: 2.2rem;}
    .member-wrap > li > h4 > span {font-size: 1.5rem;}
}

/* intro > library */
.library-wrap {border-top: .2rem solid var(--gray700);}
.library-wrap > li {padding: 2.4rem 0; display: flex; align-items: center; column-gap: 4rem; border-bottom: 1px solid var(--gray100);}
.library-wrap > li .img {width: 16rem; height: 20rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.library-wrap > li .desc {flex: 1; display: flex; align-items: center; justify-content: space-between;}
.library-wrap > li .desc > div {display: flex; flex-flow: column; row-gap: 2.4rem;}
.library-wrap > li .desc > div > p {font-size: 2.4rem; font-weight: 600; color: var(--gray700);}
.library-wrap > li .desc > div > span {font-size: 1.8rem; color: var(--gray400);}
.library-wrap > li .desc > ul {display: flex; flex-flow: column; row-gap: .8rem;}
.library-wrap > li .desc > ul button {width: 13rem; height: 4rem; border: 1px solid var(--gray100); background-color: transparent; display: flex; align-items: center; justify-content: center; column-gap: .8rem; font-size: 1.4rem; font-weight: 500; color: var(--gray300)}

@media screen and (max-width: 768px) {
    .library-wrap > li {padding: 1.8rem 0; column-gap: 1.6rem;}
    .library-wrap > li .img {width: 8.8rem; height: 11rem;}
    .library-wrap > li .desc {flex-flow: column; row-gap: 1.8rem; align-items: initial;}
    .library-wrap > li .desc > div {row-gap: 1.2rem;}
    .library-wrap > li .desc > div > p {font-size: 1.6rem;}
    .library-wrap > li .desc > div > span {font-size: 1.2rem;}
    .library-wrap > li .desc > ul {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .8rem; width: 100%;}
    .library-wrap > li .desc > ul button {width: 100%; height: 3.6rem; column-gap: .4rem; font-size: 1.2rem;}
    
}

/* 프로그램 ----------------------- */
/* 프로그램 > 드림어시스트 */
.program-desc-wrap {display: flex; flex-flow: column; row-gap: 10rem;}
.program-desc-wrap > h6 {font-size: 2.4rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.program-desc-wrap > div {display: flex; flex-flow: column; row-gap: 6rem;}
.program-desc-wrap > div > div:not(.uni-swiper-wrap) {display: flex; flex-flow: column; row-gap: 2.4rem;}
.program-desc-wrap > div > div > h6 {font-size: 2.4rem; font-weight: 600; line-height: 1.6; word-break: keep-all;}
.program-desc-wrap > div > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}
.program-desc-wrap > div > div > p > a {color: var(--light-blue); font-weight: 600; text-decoration: underline; cursor: pointer;}

.program-desc-wrap > div > div .detail-cont {margin-top:10rem; display: flex; flex-flow: column; align-items: center; line-height: 2rem;}
.program-desc-wrap > div > div .detail-cont img {max-width: 80rem; width: 100%;}
.program-desc-wrap > div > div .detail-cont img + * {margin-top: 6rem;}

.program-desc-wrap > ul {display: flex; flex-flow: column; row-gap: 10rem;}
.program-desc-wrap > ul > li {display: flex; align-items: flex-start; column-gap: 10rem;}
.program-desc-wrap > ul > li > h6 {width: 32rem; font-size: 2.4rem; font-weight: 600; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray700);line-height: 1.3;}
.program-desc-wrap > ul > li > p {width: calc(100% - 32rem - 10rem); font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}
.program-desc-wrap > ul > li > div {display: flex; flex-flow: column; row-gap: 3.2rem;}
.program-desc-wrap > ul > li > div button {width: 100%;}
.program-desc-wrap > ul > li > ul {width: calc(100% - 32rem - 10rem);}
.program-desc-wrap > ul > li > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}
.program-desc-wrap > ul > li > div > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}
.program-desc-wrap > ul > li > div > div {display: flex; flex-flow: column; row-gap: .4rem;}
.program-desc-wrap > ul > li > div > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; font-weight: 600;}
.program-desc-wrap > ul > li > div > div > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}

@media screen and (max-width: 768px) {
    .program-desc-wrap {row-gap: 4.8rem;}
    .program-desc-wrap > h6 {font-size: 1.5rem;}
    .program-desc-wrap > div {row-gap: 2rem;}
    .program-desc-wrap > div > div {row-gap: 2rem;}
    .program-desc-wrap > div > div > h6 {font-size: 1.5rem;}
    .program-desc-wrap > div > div > p {font-size: 1.5rem;}

    .program-desc-wrap > div > div .detail-cont {padding: 2.4rem 0; row-gap: 2rem;}
    .program-desc-wrap > div > div .detail-cont img {max-width: 100%;}

    .program-desc-wrap > ul {row-gap: 2.8rem;}
    .program-desc-wrap > ul > li {flex-flow: column; row-gap: 2rem;}
    .program-desc-wrap > ul > li > h6 {width: 100%; font-size: 2.2rem; font-weight: 700; padding-bottom: 2rem; border-width: 1px;}
    .program-desc-wrap > ul > li > p {width: 100%; font-size: 1.5rem;}
    .program-desc-wrap > ul > li > div {row-gap: 2rem;}
    .program-desc-wrap > ul > li > ul {width: 100%;}
    .program-desc-wrap > ul > li > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
    .program-desc-wrap > ul > li > div > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
    .program-desc-wrap > ul > li > div > div {row-gap: .2rem;}
    .program-desc-wrap > ul > li > div > div > p {font-size: 1.5rem;}
    .program-desc-wrap > ul > li > div > div > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
}

.dream-swiper-wrap {position: relative;}
.dream-swiper {overflow: hidden;}
.dream-swiper img {width: 100%;}

.dream-swiper-wrap .swiper-button-prev::after, .dream-swiper-wrap .swiper-button-next::after {content: none!important;}
.dream-swiper-wrap .swiper-button-prev, .dream-swiper-wrap .swiper-button-next {width: 8rem; height: 8rem; margin: 0; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.dream-swiper-wrap .swiper-button-prev.swiper-button-disabled, .dream-swiper-wrap .swiper-button-next.swiper-button-disabled {opacity: 1;}
.dream-swiper-wrap .swiper-button-prev::before, .dream-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.dream-swiper-wrap .swiper-button-prev {left: -10rem;}
.dream-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.dream-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.dream-swiper-wrap .swiper-button-next {right: -10rem;}
.dream-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.dream-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .dream-swiper-wrap {padding-bottom: 2.4rem;}
    .dream-swiper-wrap .swiper-button-prev, .dream-swiper-wrap .swiper-button-next {display: none;}

    .dream-swiper-scrollbar {width: 10rem; height: .2rem; margin: 2rem auto 0; border-radius: 0; position: relative; left: initial; bottom: initial; top: initial; background-color: var(--gray100); opacity: 1!important;}
    .dream-swiper-scrollbar .swiper-scrollbar-drag {height: .4rem; background-color: var(--black); border-radius: 0; position: relative; top: -.2rem;}
}
@media (prefers-color-scheme: dark) {
    .dream-swiper-wrap .swiper-button-prev::before,
    .dream-swiper-wrap .swiper-button-prev.swiper-button-disabled::before,
    .dream-swiper-wrap .swiper-button-next::before,
    .dream-swiper-wrap .swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
}

/* 프로그램 > 드림어시스트 > 넘버 */
.number-wrap {display: grid; grid-template-columns: repeat(3, 1fr);}
.number-wrap > li {display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.6rem; position: relative;}
.number-wrap > li > p {font-size: 10rem; font-weight: 700;}
.number-wrap > li > span {font-size: 3.2rem; font-weight: 600;}
.number-wrap > li + li::before {content: ''; width: .2rem; height: 8rem; background-color: var(--gray100); display: block; position: absolute; left: 0;}

@media screen and (max-width: 768px) {
    .number-wrap > li {row-gap: .6rem;}
    .number-wrap > li > p {font-size: 2.8rem;}
    .number-wrap > li > span {font-size: 1.5rem; font-weight: 500;}
    .number-wrap > li + li::before {width: 1px; height: 3.2rem;}
}

/* 프로그램 > 드림어시스트 > 멘토 */
.cont-box.coach {position: relative; z-index: 9;}
.coach-swiper-wrap {position: relative;}
.coach-swiper {width: 100%;}

.coach-swiper .swiper-slide {border-radius: 1.2rem; background-color: var(--blue800); position: relative;}
.coach-swiper .swiper-slide .img {height: 32.4rem; overflow: hidden; background-image: url(../img/bg-pattern-coach.svg); background-repeat: no-repeat; background-size: cover; background-position: top center;}
.coach-swiper .swiper-slide .img img {width: 100%;}
.coach-swiper .swiper-slide .info {padding: 2rem; display: flex; flex-flow: column; row-gap: 1rem; background-image: url(../img/logo/img-logo-program-blue.svg); background-repeat: no-repeat; background-size: 6.4rem auto; background-position: right 2rem bottom 2rem;}
.coach-swiper .swiper-slide .info > p {font-size: 1.4rem; font-weight: 700; color: #f2f3f6;}
.coach-swiper .swiper-slide .info > h3 {font-size: 2.2rem; font-weight: 700; color: #fff;}

.coach-swiper .swiper-slide .layer {width: 28.5rem; margin-top: 1.4rem; padding: 3.2rem 2rem; display: flex; flex-flow: column; row-gap: 3rem; border: 1px solid var(--gray100); background-color: var(--white); position: absolute; top: 32.2rem; left: 0; z-index: 9;}
.coach-swiper .swiper-slide .layer::before {content: ''; width: 1.7rem; height: 1.6rem; background-image: url(../img/ico/ic-layer-arrow.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; position: absolute; top: -1.4rem;}
.coach-swiper .swiper-slide .layer > i {position: absolute; top: 2rem; right: 2rem;}
.coach-swiper .swiper-slide .layer .name {display: flex; flex-flow: column; row-gap: .6rem;}
.coach-swiper .swiper-slide .layer .name > p {font-size: 2rem; font-weight: 600;}
.coach-swiper .swiper-slide .layer .name > span {font-size: 1.6rem; font-weight: 600;}
.coach-swiper .swiper-slide .layer .history {display: flex; flex-flow: column; row-gap: 1rem;}
.coach-swiper .swiper-slide .layer .history > p {font-size: 1.6rem; font-weight: 600;}
.coach-swiper .swiper-slide .layer .history > ul > li {font-size: 1.6rem; line-height: 1.6; text-indent: -1.3rem; padding-left: 1.3rem; word-break: keep-all;}
.coach-swiper .swiper-slide .layer .history > ul > li::before {content: '﹒';}

/* .coach-swiper-wrap .swiper-button-prev::after, .coach-swiper-wrap .swiper-button-next::after {display: none!important;}
.coach-swiper-wrap .swiper-button-prev, .coach-swiper-wrap .swiper-button-next {width: 8rem; height:14rem; margin: 0; padding-bottom: 6rem; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.coach-swiper-wrap .swiper-button-prev::before, .coach-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.coach-swiper-wrap .swiper-button-prev {left: -10rem;}
.coach-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.coach-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.coach-swiper-wrap .swiper-button-next {right: -10rem;}
.coach-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.coach-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;} */

.coach-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal {width: 100%; height: .2rem; margin-top: 6rem; border-radius: 0; position: relative; left: initial; bottom: initial; top: initial; background-color: var(--gray100); opacity: 1!important; z-index: initial;}
.coach-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {height: .2rem; background-color: var(--black); border-radius: 0;}

@media screen and (max-width: 768px) {
    .coach-swiper {width: 100vw; margin: 0 -2rem; padding: 0 2rem;}
    .coach-swiper .swiper-slide {width: 18rem;}
    .coach-swiper .swiper-slide .img {height: 20.5rem;}
    .coach-swiper .swiper-slide .info {padding: 1.2rem; row-gap: .4rem; background-size: 4.4rem auto; background-position: right 1.2rem bottom 1.2rem;}
    .coach-swiper .swiper-slide .info > p {font-size: 1.3rem;}
    .coach-swiper .swiper-slide .info > h3 {font-size: 1.8rem;}

    .coach-swiper .swiper-slide .layer {width: 21rem; padding: 2.4rem 2rem; row-gap: 2rem; top: 20.8rem;}
    .coach-swiper .swiper-slide .layer .name > p {font-size: 1.8rem;}
    .coach-swiper .swiper-slide .layer .name > span {font-size: 1.5rem;}
    .coach-swiper .swiper-slide .layer .history > p {font-size: 1.5rem;}
    .coach-swiper .swiper-slide .layer .history > ul > li {font-size: 1.3rem; line-height: 1.6; text-indent: -1.3rem; padding-left: 1.3rem; word-break: keep-all;}
    .coach-swiper .swiper-slide .layer .history > ul > li::before {content: '﹒';}

    .coach-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal {width: 10rem; height: .2rem; margin: 2rem auto 0;}
    .coach-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {height: .4rem; position: relative; top: -.2rem;}
}
@media (prefers-color-scheme: dark) {
    .coach-swiper .swiper-slide .layer::before {background-image: url(../img/ico/ic-layer-arrow-dark.svg);}
}

/* .dream-mentor-swiper-wrap {position: relative;}
.dream-mentor-swiper {overflow: hidden;}
.dream-mentor-swiper img {width: 100%;}

.dream-mentor-swiper-wrap .swiper-button-prev::after, .dream-mentor-swiper-wrap .swiper-button-next::after {content: none!important;}
.dream-mentor-swiper-wrap .swiper-button-prev, .dream-mentor-swiper-wrap .swiper-button-next {width: 8rem; height: 8rem; margin: 0; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.dream-mentor-swiper-wrap .swiper-button-prev.swiper-button-disabled, .dream-mentor-swiper-wrap .swiper-button-next.swiper-button-disabled {opacity: 1;}
.dream-mentor-swiper-wrap .swiper-button-prev::before, .dream-mentor-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.dream-mentor-swiper-wrap .swiper-button-prev {left: -10rem;}
.dream-mentor-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.dream-mentor-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.dream-mentor-swiper-wrap .swiper-button-next {right: -10rem;}
.dream-mentor-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.dream-mentor-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .dream-mentor-swiper-wrap {padding-bottom: 2.4rem;}
    .dream-mentor-swiper-wrap .swiper-button-prev, .dream-mentor-swiper-wrap .swiper-button-next {display: none;}

    .dream-mentor-swiper-wrap .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 10rem; border-bottom: .2rem solid var(--gray100); background-color: var(--white-back); top: initial; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); position: relative;}
    .dream-mentor-swiper-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {border: 0; height: .4rem; background-color: var(--gray700);}
}
@media (prefers-color-scheme: dark) {
    .dream-mentor-swiper-wrap .swiper-button-prev::before,
    .dream-mentor-swiper-wrap .swiper-button-prev.swiper-button-disabled::before,
    .dream-mentor-swiper-wrap .swiper-button-next::before,
    .dream-mentor-swiper-wrap .swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
} */

/* 프로그램 > 드림어시스트 > 파트너 */
.partner-wrap {display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;row-gap: 60px}
.partner-wrap > li {display: flex; align-items: center; justify-content: center;}
.partner-wrap > li:nth-child(1):nth-last-child(2), .partner-wrap > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}
.partner-wrap > li:nth-child(1):nth-last-child(3), .partner-wrap > li:nth-child(1):nth-last-child(3) ~ li {width: calc(100% / 3);}
.partner-wrap > li img {width: 100%;}
.partner-wrap > li:nth-child(n+5){margin-right: auto;}
.partner-wrap > li:nth-last-child(n+5),.partner-wrap > li:nth-last-child(n+5) ~ .partner-wrap > li {width: calc(100% / 3);}

/* 프로그램 > 드림어시스트 > 수상내역 */
.cont-box.award {padding: 16rem 0; margin-bottom: -16rem; position: relative;}
.cont-box.award * {position: relative; z-index: 2;}
.cont-box.award::before {content: ''; width: 100vw; min-width: 144rem; height: 100%; background-color: var(--gray50); position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}

.award-wrap {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem;}
.award-wrap > li {min-height: 21.4rem; background-color: var(--white-back); padding: 4rem 3.2rem; display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center;}
.award-wrap > li > h3 {width: 22rem; height: 5.2rem; padding-bottom: 1.2rem; text-align: center; font-size: 3.2rem; font-weight: 700; border-bottom: .2rem solid var(--gray700); background-image: url(../img/bg-award.svg); background-repeat: no-repeat; background-size: 18.4rem 4.8rem; background-position: center bottom 1.2rem;}
.award-wrap > li > p {text-align: center; font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .cont-box.award {padding: 4rem 0; margin-bottom: -3rem;}
    .cont-box.award::before {min-width: initial; height: 100%;}

    .award-wrap {grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem;}
    .award-wrap > li {min-height: 16.3rem; padding: 2.4rem 1.6rem; row-gap: 1.6rem;}
    .award-wrap > li > h3 {width: 13rem; height: 3.8rem; padding-bottom: 1.2rem; font-size: 2.2rem; background-size: 12.6rem 3.2rem;}
    .award-wrap > li > p {font-size: 1.3rem;}
}

/* 프로그램 > 드림어시스트 > SNS */
.cont-box.sns {position: relative; margin-bottom: -16rem;}
.cont-box.sns * {position: relative; z-index: 2;}
.cont-box.sns::before {content: ''; width: 100vw; min-width: 144rem; height: 100%; display: block; background-image: url(../img/img-dream-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1;}

.sns-wrap {display: flex; align-items: center; justify-content: center; padding: 13rem 0;}
.sns-wrap > h4 {text-align: center; font-size: 4.8rem; font-weight: 700; color: #ffffff; line-height: 1.4;}
.sns-wrap > ul {display: flex; flex-flow: column; row-gap: 4.6rem;}
.sns-wrap > ul > li {display: flex; align-items: center; column-gap: .6rem; cursor: pointer;}
.sns-wrap > ul > li > p {font-size: 2.4rem; font-weight: 600; color: #ffffff;}

@media screen and (max-width: 768px) {
    .cont-box.sns {margin-bottom: -3rem;}
    .cont-box.sns::before {min-width: initial; height: 100%;}

    .sns-wrap {justify-content: center; column-gap: 2.6rem; padding: 4rem 0;}
    .sns-wrap > h4 {font-size: 1.2rem; line-height: 1.6;}
    .sns-wrap > ul {flex-flow: initial; column-gap: 1.6rem;}
    .sns-wrap > ul > li > i {width: 2rem; height: 2rem;}
    .sns-wrap > ul > li > p {display: none;}
}

/* 프로그램 > 유니파이드컵 */
.uni-swiper-wrap {position: relative;}
.uni-swiper {overflow: hidden;}
.uni-swiper img {width: 100%;}

.uni-swiper-wrap .swiper-button-prev::after, .uni-swiper-wrap .swiper-button-next::after {content: none!important;}
.uni-swiper-wrap .swiper-button-prev, .uni-swiper-wrap .swiper-button-next {width: 8rem; height: 8rem; margin: 0; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.uni-swiper-wrap .swiper-button-prev.swiper-button-disabled, .uni-swiper-wrap .swiper-button-next.swiper-button-disabled {opacity: 1;}
.uni-swiper-wrap .swiper-button-prev::before, .uni-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.uni-swiper-wrap .swiper-button-prev {left: -10rem;}
.uni-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.uni-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.uni-swiper-wrap .swiper-button-next {right: -10rem;}
.uni-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.uni-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .uni-swiper-wrap {padding-bottom: 2.4rem;}
    .uni-swiper-wrap .swiper-button-prev, .uni-swiper-wrap .swiper-button-next {display: none;}

    .uni-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal {width: 10rem; height: .2rem; margin: 2rem auto 0; border-radius: 0; position: relative; left: initial; bottom: initial; top: initial; background-color: var(--gray100); opacity: 1!important;}
    .uni-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {height: .4rem; background-color: var(--black); border-radius: 0; position: relative; top: -.2rem;}
}
@media (prefers-color-scheme: dark) {
    .uni-swiper-wrap .swiper-button-prev::before,
    .uni-swiper-wrap .swiper-button-prev.swiper-button-disabled::before,
    .uni-swiper-wrap .swiper-button-next::before,
    .uni-swiper-wrap .swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
}

/* 프로그램 > 유니파이드컵 > 프로축구연맹 */
.league-wrap {display: flex; align-items: center; justify-content: center; grid-gap: 1.2rem; flex-wrap: wrap;}
.league-wrap > li {width: 19rem; height: 21.4rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.league-wrap > li .emblem {width: 10rem; height: 10rem;}
.league-wrap > li > p {width: fit-content; height: fit-content; padding: .6rem 1.4rem; font-size: 1.8rem; font-weight: 500; border: 1px solid var(--gray200); border-radius: 1.5rem;}

@media screen and (max-width: 768px) {
    .league-wrap {display: grid; grid-gap: 0; grid-template-columns: repeat(3, 1fr);}
    .league-wrap > li {width: 100%; height: 13rem; row-gap: 1.2rem;}
    .league-wrap > li .emblem {width: 6rem; height: 6rem;}
    .league-wrap > li > p {padding: .6rem .8rem; font-size: 1.3rem;}
}

.uni-desc {display: flex; flex-flow: column; row-gap: 4rem;}
.uni-desc > li {display: flex; align-items: center; column-gap: 6rem;}
.uni-desc > li > img {width: 30rem;}
.uni-desc > li > div {width: calc(100% - 30rem - 6rem); display: flex; flex-flow: column; row-gap: 2.4rem;}
.uni-desc > li > div > h3 {font-size: 2.4rem; font-weight: 600; padding-bottom: 1.2rem; border-bottom: .2rem solid var(--gray700); word-break: keep-all; line-height: 1.6;}
.uni-desc > li > div > p {font-size: 1.8rem; line-height: 1.8; word-break: keep-all; line-height: 1.6;}

@media screen and (max-width: 768px) {
    .uni-desc > li {flex-flow: column; row-gap: 2rem;}
    .uni-desc > li > img {width: 100%;}
    .uni-desc > li > div {width: 100%; row-gap: 1.6rem;}
    .uni-desc > li > div > h3 {font-size: 1.8rem; border-width: 1px;}
    .uni-desc > li > div > p {font-size: 1.5rem;}
}

.interview-swiper-wrap {position: relative;}
.interview-swiper {overflow: hidden;}
.interview-swiper .swiper-slide {height: 40rem; display: grid; grid-template-columns: repeat(2, 1fr);}
.interview-swiper .swiper-slide .desc {border: 1px solid var(--gray200); border-right: 0; padding: 6rem; display: flex; flex-flow: column; row-gap: 4rem; justify-content: center;}
.interview-swiper .swiper-slide .desc > div {display: flex; column-gap: 1.2rem; align-items: flex-end;}
.interview-swiper .swiper-slide .desc > div > p {font-size: 3.2rem; font-weight: 600;}
.interview-swiper .swiper-slide .desc > div > span {font-size: 1.8rem; font-weight: 500; color: var(--gray300);}
.interview-swiper .swiper-slide .desc > p {font-size: 1.8rem; line-height: 1.8; word-break: keep-all;}

.interview-swiper-wrap .swiper-button-prev::after, .interview-swiper-wrap .swiper-button-next::after {display: none!important;}
.interview-swiper-wrap .swiper-button-prev, .interview-swiper-wrap .swiper-button-next {width: 8rem; height:14rem; margin: 0; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.interview-swiper-wrap .swiper-button-prev::before, .interview-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.interview-swiper-wrap .swiper-button-prev {left: -10rem;}
.interview-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.interview-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.interview-swiper-wrap .swiper-button-next {right: -10rem;}
.interview-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.interview-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .interview-swiper .swiper-slide {grid-template-columns: repeat(1, 1fr);}
    .interview-swiper .swiper-slide img {width: 100%;}
    .interview-swiper .swiper-slide .desc {border-right: 1px solid var(--gray200); border-bottom: 0; padding: 2rem; row-gap: 1.6rem;}
    .interview-swiper .swiper-slide .desc > div {column-gap: .4rem;}
    .interview-swiper .swiper-slide .desc > div > p {font-size: 2.2rem;}
    .interview-swiper .swiper-slide .desc > div > span {font-size: 1.3rem;}
    .interview-swiper .swiper-slide .desc > p {font-size: 1.5rem;}

    .interview-swiper-wrap {padding-bottom: 2.4rem;}
    .interview-swiper-wrap .swiper-button-prev, .interview-swiper-wrap .swiper-button-next {display: none;}

    .interview-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal {width: 10rem; height: .2rem; margin: 2rem auto 0; border-radius: 0; position: relative; left: initial; bottom: initial; top: initial; background-color: var(--gray100); opacity: 1!important;}
    .interview-swiper-wrap .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {height: .4rem; background-color: var(--black); border-radius: 0; position: relative; top: -.2rem;}
}

/* 프로그램 > 그린킥오프 */
.green-swiper-wrap {position: relative;}
.green-swiper {overflow: hidden;}
.green-swiper img {width: 100%;}

.green-swiper-wrap .swiper-button-prev::after, .green-swiper-wrap .swiper-button-next::after {content: none!important;}
.green-swiper-wrap .swiper-button-prev, .green-swiper-wrap .swiper-button-next {width: 8rem; height: 8rem; margin: 0; left: initial; right: initial; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.green-swiper-wrap .swiper-button-prev.swiper-button-disabled, .green-swiper-wrap .swiper-button-next.swiper-button-disabled {opacity: 1;}
.green-swiper-wrap .swiper-button-prev::before, .green-swiper-wrap .swiper-button-next::before {content: ''; width: 8rem; height: 8rem; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.green-swiper-wrap .swiper-button-prev {left: -10rem;}
.green-swiper-wrap .swiper-button-prev::before {background-image: url(../img/ico/swiper-prev.svg);}
.green-swiper-wrap .swiper-button-prev.swiper-button-disabled::before {background-image: url(../img/ico/swiper-prev-disabled.svg); cursor: default;}
.green-swiper-wrap .swiper-button-next {right: -10rem;}
.green-swiper-wrap .swiper-button-next::before {background-image: url(../img/ico/swiper-next.svg);}
.green-swiper-wrap .swiper-button-next.swiper-button-disabled::before {background-image: url(../img/ico/swiper-next-disabled.svg); cursor: default;}

@media screen and (max-width: 768px) {
    .green-swiper-wrap {padding-bottom: 2.4rem;}
    .green-swiper-wrap .swiper-button-prev, .green-swiper-wrap .swiper-button-next {display: none;}

    .green-swiper-scrollbar {width: 10rem; height: .2rem; margin: 2rem auto 0; border-radius: 0; position: relative; left: initial; bottom: initial; top: initial; background-color: var(--gray100); opacity: 1!important;}
    .green-swiper-scrollbar .swiper-scrollbar-drag {height: .4rem; background-color: var(--black); border-radius: 0; position: relative; top: -.2rem;}
}
@media (prefers-color-scheme: dark) {
    .green-swiper-wrap .swiper-button-prev::before,
    .green-swiper-wrap .swiper-button-prev.swiper-button-disabled::before,
    .green-swiper-wrap .swiper-button-next::before,
    .green-swiper-wrap .swiper-button-next.swiper-button-disabled::before {filter: invert(1);}
}

.program-desc-wrap .green-stats {background-color: var(--gray50); height: 10rem; display: flex; flex-flow: row; align-items: center; justify-content: space-between; padding: 0 4rem;}
.program-desc-wrap .green-stats > p {font-size: 2.4rem; font-weight: 600;}

@media screen and (max-width: 768px) {
    .program-desc-wrap .green-stats {height: 7.8rem; padding: 0 2rem;}
    .program-desc-wrap .green-stats > p {width: 16rem; font-size: 1.5rem; word-break: keep-all; line-height: 1.6;}
    .program-desc-wrap .green-stats > i {width: 2.4rem; height: 2.4rem;}
}

.program-desc-wrap .green-report > li {display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center;}
.program-desc-wrap .green-report > li .img {width: 100%; display: flex; align-items: center; justify-content: center; position: relative; background-image: url(../img/bg-pattern-green-data.svg); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;}
.program-desc-wrap .green-report > li .img img {width: 20rem;}
.program-desc-wrap .green-report > li .img .ic-down-red {position: absolute; right: 1.6rem; bottom: 1.6rem;}
.program-desc-wrap .green-report > li > p {width: 100%; text-align: center; font-size: 3.2rem; font-weight: 700;}

@media screen and (max-width: 768px) {
    .program-desc-wrap .green-report > li {row-gap: 1.6rem;}
    .program-desc-wrap .green-report > li .img {background-image: url(../img/bg-pattern-green-data-mb.svg);}
    .program-desc-wrap .green-report > li .img img {width: 12rem;}
    .program-desc-wrap .green-report > li .img .ic-down-red {width: 3.4rem; height: 2.4rem; right: 1rem; bottom: 1rem;}
    .program-desc-wrap .green-report > li > p {font-size: 1.8rem;}
}

/* 뉴스 ------------------ */
/* 뉴스 리스트(게시판형) */
.news-table td > p {width: 64rem; font-weight: 600; text-align: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media screen and (max-width: 768px) {
    .notice-list {border-top: 1px solid var(--black);}
    .notice-list > li {border-bottom: 1px solid var(--gray200); padding: 2rem 0; display: flex; flex-flow: column; row-gap: .8rem; cursor: pointer;}
    .notice-list > li > span {font-size: 1.3rem; font-weight: 600;}
    .notice-list > li > p {font-size: 1.5rem; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .notice-list > li > ul {margin-top: .4rem; display: flex; align-items: center; column-gap: .5rem;}
    .notice-list > li > ul > li {display: flex; align-items: center; column-gap: .5rem; font-size: 1.3rem; color: var(--gray300);}
    .notice-list > li > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray300);}
}

/* 뉴스 리스트(앨범형) */
.news-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6rem 4rem;}
.news-wrap > li {display: flex; flex-flow: column; row-gap: 2.4rem; cursor: pointer;}
.news-wrap > li .img {width: 100%; height: 24.8rem; background-image: url(../img/img-news-noimage.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.news-wrap > li .info {display: flex; flex-flow: column; row-gap: 1.2rem;}
.news-wrap > li .info > h6 {font-size: 2.4rem; font-weight: 600; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news-wrap > li .info > ul {margin-top: 2.8rem; display: flex; align-items: center; column-gap: .8rem;}
.news-wrap > li .info > ul > li {font-size: 1.8rem; color: var(--gray300); display: flex; align-items: center; column-gap: .8rem;}
.news-wrap > li .info > ul > li + li::before {content: ''; width: 1px; height: 1.4rem; background-color: var(--gray300);}

.more {width: 20rem; height: 6rem; margin: 6rem auto 0; border: 1px solid var(--gray200); font-size: 2.4rem; font-weight: 500; color: var(--gray300); background-color: transparent;}

@media screen and (max-width: 768px) {
    .news-wrap {grid-template-columns: repeat(1, 1fr); grid-gap: 2.8rem;}
    .news-wrap > li {row-gap: 2rem;}
    .news-wrap > li .img {height: 60vw;}
    .news-wrap > li .info > h6 {font-size: 1.8rem;}
    .news-wrap > li .info > ul {margin-top: .8rem;}
    .news-wrap > li .info > ul > li {font-size: 1.4rem;}
    .news-wrap > li .info > ul > li + li::before {height: 1.2rem;}

    .more {width: 12rem; height: 4.4rem; margin: 4rem auto 0; font-size: 1.6rem; background-color: transparent;}
}

/* 뉴스 상세 */
.detail-wrap .detail-title {display: flex; flex-flow: column; row-gap: 2rem; padding-bottom: 6rem; border-bottom: 1px solid var(--gray200);}
.detail-wrap .detail-title .label {font-size: 2.4rem; font-weight: 600;}
.detail-wrap .detail-title > h4 {font-size: 4.8rem; font-weight: 700; word-break: keep-all; line-height: 1.4;}
.detail-wrap .detail-title > ul {margin-top: 2rem; display: flex; align-items: center; column-gap: .8rem;}
.detail-wrap .detail-title > ul > li {font-size: 1.8rem; color: var(--gray300); display: flex; align-items: center; column-gap: .8rem;}
.detail-wrap .detail-title > ul > li + li::before {content: ''; width: 1px; height: 1.4rem; background-color: var(--gray300);}

.detail-wrap .detail-cont {padding:10rem 0; display: flex; flex-flow: column; align-items: center; line-height: 2rem;}
.detail-wrap .detail-cont img {max-width: 80rem; width: 100%;}
.detail-wrap .detail-cont img + * {margin-top: 6rem;}
.detail-wrap .detail-cont * {font-size: 1.8rem!important; line-height: 1.6!important; word-break: keep-all!important;}

.detail-wrap .detail-cont-new {padding:10rem 0; display: block; flex-flow: column; align-items: center; line-height: 2rem;}
.detail-wrap .detail-cont-new p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}
.detail-wrap .detail-cont-new * {font-size: 1.8rem!important; line-height: 1.6!important; word-break: keep-all!important;}

.detail-wrap .detail-file {display: flex; align-items: center; column-gap: 3rem; padding: 2.4rem 0; border-top: 1px solid var(--gray200);}
.detail-wrap .detail-file > h6 {width: 6.5rem; font-size: 1.8rem; font-weight: 600;}
.detail-wrap .detail-file > ul {width: calc(100% - 6.5rem - 3rem); display: flex; align-items: center; grid-gap: 1.2rem; flex-wrap: wrap;}
.detail-wrap .detail-file > ul > li {width: fit-content; height: fit-content; min-height: 4.8rem; padding: .4rem 1.6rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; border: 1px solid var(--gray200); border-radius: 4rem; font-size: 1.8rem; cursor: pointer;}
.detail-wrap .detail-file > ul > li > i {width: 2.4rem;}
.detail-wrap .detail-file > ul > li > p {width: calc(100% - .4rem - 2.4rem); line-height: 1.2;}

.detail-wrap .detail-btn {border-top: 1px solid var(--gray200); padding-top: 6rem; display: flex; align-items: center; justify-content: space-between;}
.detail-wrap .detail-btn button {width: 20rem; height: 6rem; font-size: 2.4rem; font-weight: 500; color: var(--gray300); border: 1px solid var(--gray200); background-color: var(--white);}
.detail-wrap .detail-btn button:disabled {color: var(--gray200); cursor: auto;}
.detail-wrap .detail-btn .list {background-color: var(--blue800); border-color: var(--blue800); color: var(--white);}

@media screen and (max-width: 768px) {
    .detail-wrap .detail-title {row-gap: 1.2rem; padding-bottom: 2.4rem;}
    .detail-wrap .detail-title .label {font-size: 1.6rem;}
    .detail-wrap .detail-title > h4 {font-size: 2.2rem;}
    .detail-wrap .detail-title > ul {margin-top: 1.2rem;}
    .detail-wrap .detail-title > ul > li {font-size: 1.4rem;}
    .detail-wrap .detail-title > ul > li + li::before {height: 1.2rem;}

    .detail-wrap .detail-cont {padding: 2.4rem 0; row-gap: 2rem;}
    .detail-wrap .detail-cont img {max-width: 100%;}
    .detail-wrap .detail-cont img + * {margin-top: 0;}
    .detail-wrap .detail-cont p {font-size: 1.5rem!important;}
    .detail-wrap .detail-cont * {font-size: 1.5rem!important;}

    .detail-wrap .detail-cont-new {padding: 2.4rem 0; row-gap: 2rem;}
    .detail-wrap .detail-cont-new p {font-size: 1.5rem!important;}
    .detail-wrap .detail-cont-new * {font-size: 1.5rem!important;}

    .detail-wrap .detail-file {flex-flow: column; row-gap: 1.2rem; align-items: start;}
    .detail-wrap .detail-file > h6 {width: fit-content; font-size: 1.5rem;}
    .detail-wrap .detail-file > ul {width: 100%; grid-gap: .8rem; flex-flow: wrap;}
    .detail-wrap .detail-file > ul > li {min-height: 3.6rem; padding: .4rem 1.2rem; font-size: 1.5rem;}
    .detail-wrap .detail-file > ul > li > i {width: 2rem; height: 2rem;}
    .detail-wrap .detail-file > ul > li > p {width: calc(100% - .4rem - 2rem);}

    .detail-wrap .detail-btn {padding-top: 2.4rem;}
    .detail-wrap .detail-btn button {width: calc((100% - 1.6rem) / 3); height: 4.4rem; font-size: 1.6rem;}
}

/* unifiedCup */
.unified-club {display: grid; grid-template-columns: repeat(5,1fr); column-gap: 2rem;}
.unified-club > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
.unified-club > li img {width: 100%;}
.unified-club > li > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.unified-club > li > div > h4 {font-size: 3.2rem; font-weight: 600;}
.unified-club > li > div > p {font-size: 1.8rem; font-weight: 500; color: var(--gray300);}

@media screen and (max-width: 768px) {
    .unified-club {grid-template-columns: repeat(2,1fr); grid-gap: 2.4rem 1.2rem;}
    .unified-club > li {display: flex; flex-flow: column; row-gap: 2rem; align-items: center; justify-content: center;}
    .unified-club > li > div {row-gap: .6rem;}
    .unified-club > li > div > h4 {font-size: 1.6rem;}
    .unified-club > li > div > p {font-size: 1.3rem;}
}

/* 모두의 축구장 ------------------ */
/* 모두의 축구장 리스트 */
.map-intro {height: 15.6rem; margin-bottom: 10rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gray700); border-bottom: 1px solid var(--gray100);}
.map-intro > p {width: 61rem; font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}

.kleague-sort {margin-top: 6rem; display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--gray100); border-bottom: 0; border-right: 0; position: relative;}
.kleague-sort::before {content: ''; width: 1px; height: 100%; background-color: var(--gray100); position: absolute; top: 0; right: 0;}
.kleague-sort::after {content: ''; width: 100%; height: 1px; background-color: var(--gray100); position: absolute; bottom: 0; left: 0;}
.kleague-sort > li {width: 100%; height: 7.2rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem; position: relative; cursor: pointer; border-bottom: 1px solid var(--gray100); border-right: 1px solid var(--gray100);}
.kleague-sort > li > i {width: 3.2rem; height: 3.2rem;}
.kleague-sort > li > p {font-size: 2rem; font-weight: 500;}
.kleague-sort > li:hover {background-image: url(../img/emblem-tab-pattern.svg); background-color: var(--light-blue); background-repeat: no-repeat; background-size: cover; background-position: center;}
.kleague-sort > li:hover > p {color: #fff;}

/* .kleague-sort > li:nth-child(6n+1):not(:first-child)::before {content: ''; width: calc(600% + 6px); height: 1px; background-color: var(--gray100); position: absolute; top: 0; left: 0;} */
/* .kleague-sort > li:not(:nth-child(6n)) {border-right: 1px solid var(--gray100);} */

@media screen and (max-width: 768px) {
    .map-intro {height: fit-content; padding: 2.4rem 0; margin-bottom: 4rem; flex-flow: column; align-items: flex-start; row-gap: 1.6rem;}
    .map-intro > img {height: 3.6rem;}
    .map-intro > p {width: 100%; font-size: 1.4rem; white-space: normal;}

    .kleague-sort {margin-top: 2.4rem;}
    .kleague-sort > li {width: 100%; height: 5.7rem;}
    .kleague-sort > li > p {display: none;}
    .kleague-sort > li:hover {background-image: url(../img/emblem-tab-pattern-mb.svg);}
}

.mapArea {width: 100%; height: 55vh; margin-top: 6rem;}
.mapArea > div:nth-child(1) > div:nth-child(1) > div > div {background-color: transparent!important; border: 0!important;}
.mapArea > div:nth-child(1) > div:nth-child(1) > div > div > div:nth-child(1) {width: 1.8rem!important; height: 1.6rem!important; background-image: url(../img/map-position01.svg)!important; background-repeat: no-repeat!important; background-size: contain!important; background-position: center!important;}
.mapArea > div:nth-child(1) > div:nth-child(1) > div > div > img:nth-child(3) {width: 2rem!important; height: 2rem!important; right: 2rem!important; top: 2rem!important;}
.mapArea > div > div > div > div > div .transportInfo {padding: 3.2rem 2rem 2rem; width: 32rem!important; height: fit-content!important; background-color: var(--white);}
.mapArea > div > div > div > div > div .transportInfo .boxtitle {line-height: 1.6;}
.mapArea > div > div > div > div > div .transportInfo .boxtitle > p {font-size: 1.8rem; font-weight: 600;}
.mapArea > div > div > div > div > div .transportInfo .boxtitle > span {font-size: 1.6rem; font-weight: 400; color: var(--gray300);}
.mapArea > div > div > div > div > div .transportInfo .boxtitle > span > span {font-weight: 600;}
.mapArea > div > div > div > div > div .transportInfo > ul {margin-top: 3.2rem; display: flex; column-gap: 1px;}
.mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(1), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(1) ~ li {width: calc((100% - (1px * 0)) / 1);}
.mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(2), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(2) ~ li {width: calc((100% - (1px * 1)) / 2);}
.mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(3), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(3) ~ li {width: calc((100% - (1px * 2)) / 3);}
.mapArea > div > div > div > div > div .transportInfo > ul > li {height: 8.8rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: .8rem; background-color: var(--gray50);}
.mapArea > div > div > div > div > div .transportInfo > ul > li > p {font-size: 1.6rem;}
.mapArea > div > div > div > div > div .transportInfo > ul > li > p > span {font-weight: 700;}
.mapArea > div > div > div > div > div .transportInfo .detail-btn {margin-top: 2rem;}
.mapArea > div > div > div > div > div .transportInfo .detail-btn > button {width: 100%; height: 5.2rem; background-color: var(--blue800); font-size: 1.6rem; font-weight: 500; color: #fff;}

@media screen and (max-width: 768px) {
    .mapArea {width: 100vw; height: 60vh; margin: 2.8rem -2rem 0;}
    .mapArea > div:nth-child(1) > div:nth-child(1) > div > div > div:nth-child(1) {display: none;}
    .mapArea > div:nth-child(1) > div:nth-child(1) > div > div > img:nth-child(3) {width: 1.6rem!important; height: 1.6rem!important; right: 1.2rem!important; top: 1.2rem!important;}
    .mapArea > div > div > div > div > div .transportInfo {padding: 2rem 1.2rem 1.2rem; width: 18rem!important;}
    .mapArea > div > div > div > div > div .transportInfo .boxtitle > p {font-size: 1.3rem;}
    .mapArea > div > div > div > div > div .transportInfo .boxtitle > span {font-size: 1.1rem;}
    .mapArea > div > div > div > div > div .transportInfo > ul {margin-top: 2rem; row-gap: 1px; flex-flow: column;}
    .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(1), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(1) ~ li,
    .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(2), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(2) ~ li,
    .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(3), .mapArea > div > div > div > div > div .transportInfo > ul > li:nth-child(1):nth-last-child(3) ~ li {width: 100%;}
    .mapArea > div > div > div > div > div .transportInfo > ul > li {height: 3.2rem; justify-content: flex-start; flex-flow: initial; column-gap: .4rem; padding: 0 .8rem;}
    .mapArea > div > div > div > div > div .transportInfo > ul > li > i {width: 1.6rem; height: 1.6rem;}
    .mapArea > div > div > div > div > div .transportInfo > ul > li > p {font-size: 1.1rem;}
    .mapArea > div > div > div > div > div .transportInfo .detail-btn {margin-top: 1.2rem;}
    .mapArea > div > div > div > div > div .transportInfo .detail-btn > button {height: 4rem; font-size: 1.3rem;}
}

.club-map {width: 100%; height: 66rem; position: relative; background-image: url(../img/map-bg.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}
.club-map .position {position: absolute; width: 4.8rem; height: 4.8rem; background-color: var(--white); border: 1px solid var(--gray200); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border-radius: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.club-map .position .emblem {width: 3.2rem; height: 3.2rem;}

.club-map .position.active {transform: scale(1.5); background-color: var(--light-blue); border: 0; z-index: 10!important;}
.club-map .position:hover {z-index: 10!important;}

.club-map .position.K01 {top: 44rem; left: 70rem; z-index: 1;} /* 울산 현대 */
.club-map .position.K02 {top: 16rem; left: 56rem; z-index: 2;} /* 수원 삼성 */
.club-map .position.K03 {top: 37rem; left: 72rem; z-index: 1;} /* 포항 스틸러스 */
.club-map .position.K04 {top: 55rem; left: 66rem; z-index: 1;} /* 제주 UTD */
.club-map .position.K05 {top: 38rem; left: 46rem; z-index: 1;} /* 전북 현대 */
.club-map .position.K06 {top: 49rem; left: 65rem; z-index: 1;} /* 부산 아이파크 */
.club-map .position.K07 {top: 53rem; left: 50rem; z-index: 1;} /* 전남 드래곤즈 */
.club-map .position.K08 {top: 20rem; left: 57rem; z-index: 3;} /* 성남 FC */
.club-map .position.K09 {top: 15rem; left: 48rem; z-index: 2;} /* FC 서울 */
.club-map .position.K10 {top: 32rem; left: 52rem; z-index: 1;} /* 대전 하나 시티즌 */
.club-map .position.K17 {top: 38rem; left: 65rem; z-index: 1;} /* 대구 FC */
.club-map .position.K18 {top: 15rem; left: 40rem; z-index: 1;} /* 인천 UTD */
.club-map .position.K20 {top: 46rem; left: 59rem; z-index: 1;} /* 경남 FC */
.club-map .position.K21 {top: 16rem; left: 63rem; z-index: 1;} /* 강원 FC */
.club-map .position.K21_1 {top: 13rem; left: 68rem; z-index: 1;} /* 강원 FC */
.club-map .position.K22 {top: 46rem; left: 44rem; z-index: 1;} /* 광주 FC */
.club-map .position.K26 {top: 19rem; left: 48rem; z-index: 3;} /* 부천 FC */
.club-map .position.K27 {top: 22rem; left: 51rem; z-index: 4;} /* FC 안양 */
.club-map .position.K29 {top: 13rem; left: 58rem; z-index: 1;} /* 수원 FC */
.club-map .position.K31 {top: 13rem; left: 51rem; z-index: 1;} /* 서울 이랜드 */
.club-map .position.K32 {top: 19rem; left: 43.5rem; z-index: 4;} /* 안산 그리너스 */
.club-map .position.K34 {top: 29rem; left: 46rem; z-index: 2;} /* 충남 아산 */
.club-map .position.K35 {top: 33rem; left: 63rem; z-index: 1;} /* 김천 상무 */
.club-map .position.K36 {top: 12rem; left: 44.5rem; z-index: 1;} /* 김포 FC */
.club-map .position.K37 {top: 25rem; left: 60rem; z-index: 1;} /* 충북 청주 */
.club-map .position.K38 {top: 27rem; left: 50rem; z-index: 1;} /* 천안 시티 */
.club-map .position.K39 {top: 23rem; left: 46rem; z-index: 1;} /* 화성 */

@media screen and (max-width: 768px) {
    .club-map {width: 100vw; margin: 0 -2rem; height: 224vw; background-image: url(../img/map-bg-mb.svg);}
    .club-map .position {width: 3.2rem; height: 3.2rem;}
    .club-map .position .emblem {width: 2rem; height: 2rem;}

    .club-map .position.K01 {top: 117vw; left: 75vw; z-index: 1;} /* 울산 현대 */
    .club-map .position.K02 {top: 64vw; left: 50vw; z-index: 2;} /* 수원 삼성 */
    .club-map .position.K03 {top: 104vw; left: 80vw; z-index: 1;} /* 포항 스틸러스 */
    .club-map .position.K04 {top: 136vw; left: 70vw; z-index: 1;} /* 제주 UTD */
    .club-map .position.K05 {top: 106vw; left: 32vw; z-index: 1;} /* 전북 현대 */
    .club-map .position.K06 {top: 125vw; left: 66vw; z-index: 1;} /* 부산 아이파크 */
    .club-map .position.K07 {top: 133vw; left: 37vw; z-index: 1;} /* 전남 드래곤즈 */
    .club-map .position.K08 {top: 70vw; left: 53vw; z-index: 3;} /* 성남 FC */
    .club-map .position.K09 {top: 64vw; left: 37vw; z-index: 2;} /* FC 서울 */
    .club-map .position.K10 {top: 96vw; left: 42vw; z-index: 1;} /* 대전 하나 시티즌 */
    .club-map .position.K17 {top: 106vw; left: 66vw; z-index: 1;} /* 대구 FC */
    .club-map .position.K18 {top: 64vw; left: 21vw; z-index: 1;} /* 인천 UTD */
    .club-map .position.K20 {top: 122vw; left: 53vw; z-index: 1;} /* 경남 FC */
    .club-map .position.K21 {top: 64vw; left: 64vw; z-index: 1;} /* 강원 FC */
    .club-map .position.K21_1 {top: 58vw; left: 72vw; z-index: 1;} /* 강원 FC */
    .club-map .position.K22 {top: 120vw; left: 29vw; z-index: 1;} /* 광주 FC */
    .club-map .position.K26 {top: 70vw; left: 34vw; z-index: 3;} /* 부천 FC */
    .club-map .position.K27 {top: 76vw; left: 40vw; z-index: 4;} /* FC 안양 */
    .club-map .position.K29 {top: 58vw; left: 56vw; z-index: 1;} /* 수원 FC */
    .club-map .position.K31 {top: 58vw; left: 40vw; z-index: 1;} /* 서울 이랜드 */
    .club-map .position.K32 {top: 72vw; left: 26vw; z-index: 4;} /* 안산 그리너스 */
    .club-map .position.K34 {top: 89vw; left: 32vw; z-index: 2;} /* 충남 아산 */
    .club-map .position.K35 {top: 96vw; left: 64vw; z-index: 1;} /* 김천 상무 */
    .club-map .position.K36 {top: 56vw; left: 29vw; z-index: 1;} /* 김포 FC */
    .club-map .position.K37 {top: 80vw; left: 58vw; z-index: 1;} /* 충북 청주 */
    .club-map .position.K38 {top: 85vw; left: 38vw; z-index: 1;} /* 천안 시티 */
    .club-map .position.K39 {top: 77vw; left: 33vw; z-index: 1;} /* 화성 */
}

.club-info {position: absolute; right: 6rem; bottom: 6rem; width: 32rem; background-color: var(--white);}
.club-info .title {height: 6rem; padding: 0 2rem; margin-bottom: 0; display: flex; flex-flow: initial; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray100);}
.club-info .title > h2 {font-size: 2rem; font-weight: 600;}

.club-info .info {padding: 2rem; display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.club-info .info > div {display: flex; flex-flow: column; row-gap: 2rem; align-items: center;}
.club-info .info > div > i {width: 8rem; height: 8rem;}
.club-info .info > div > div {display: flex; flex-flow: column; row-gap: .8rem; align-items: center;}
.club-info .info > div > div > h3 {font-size: 1.8rem; font-weight: 600;}
.club-info .info > div > div > p {font-size: 1.6rem; color: var(--gray300);}
.club-info .info > div > div > p > span {font-weight: 600;}
.club-info .info > ul {display: flex; align-items: center; column-gap: 1px; width: 100%;}
.club-info .info > ul > li {background-color: var(--gray50); height: 8.8rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .8rem;}
.club-info .info > ul > li:nth-child(1):nth-last-child(1) {width: 100%;}
.club-info .info > ul > li:nth-child(1):nth-last-child(2), .club-info .info > ul > li:nth-child(1):nth-last-child(2) ~ li {width: calc((100% - 1px) / 2);}
.club-info .info > ul > li:nth-child(1):nth-last-child(3), .club-info .info > ul > li:nth-child(1):nth-last-child(3) ~ li {width: calc((100% - 2px) / 3);}
.club-info .info > ul > li > p {font-size: 1.6rem; color: var(--gray700);}
.club-info .info > ul > li > p > span {font-weight: 700;}
.club-info .info > button {width: 100%; height: 5.2rem; font-size: 1.6rem;}

@media screen and (max-width: 768px) {
    .club-info {right: auto; bottom: 2rem; width: calc(100% - 4rem); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
    .club-info .title {height: 5rem; padding: 0 1.2rem;}
    .club-info .title > h2 {font-size: 1.8rem;}

    .club-info .info {padding: 1.2rem; row-gap: 1.2rem;}
    .club-info .info > div {width: 100%; flex-flow: row; column-gap: .8rem;}
    .club-info .info > div > i {width: 6rem; height: 6rem;}
    .club-info .info > div > div {flex: 1; align-items: flex-start;}
    .club-info .info > div > div > h3 {font-size: 1.5rem;}
    .club-info .info > div > div > p {font-size: 1.3rem;}
    .club-info .info > ul > li {height: 4rem; flex-flow: row; justify-content: center; column-gap: .4rem;}
    .club-info .info > ul > li > i {width: 1.8rem; height: 1.8rem;}
    .club-info .info > ul > li > p {font-size: 1.3rem;}
    .club-info .info > button {width: 100%; height: 4rem; font-size: 1.3rem;}
}

.kleague-desc {display: flex; flex-flow: column; row-gap: 10rem;}
.kleague-desc > li {border-top: 1px solid var(--gray700); display: flex; flex-flow: column; row-gap: 4rem;}
.kleague-desc > li > h3 {height: 10rem; display: flex; align-items: center; font-size: 2.4rem; font-weight: 600; line-height: 1.6; border-bottom: 1px solid var(--gray100);  word-break: keep-all;}
.kleague-desc > li > p {font-size: 1.8rem; line-height: 1.8; color: var(--gray400); word-break: keep-all;}
.kleague-desc > li > span {font-size: 1.8rem; line-height: 1.8; color: var(--gray300); word-break: keep-all;}
.kleague-desc > li > ul {display: flex; justify-content: space-between;}
.kleague-desc > li > ul > li {width: 35.4rem; display: flex; align-items: center; flex-flow: column; row-gap: 3.2rem; position: relative;}
.kleague-desc > li > ul > li + li::before {content: ''; width: 6.9rem; height: calc(22.6rem + 4.8rem); position: absolute; top: 0; left: -6.9rem; background-image: url(../img/ico/ic-arrow-right-40.svg); background-position: center; background-size: 4rem; background-repeat: no-repeat;}
.kleague-desc > li > ul > li > div {width: calc(22.6rem + 4.8rem); height: calc(22.6rem + 4.8rem); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.kleague-desc > li > ul > li > div > div {width: 22.6rem; height: 22.6rem; border-radius: 100%; background-color: var(--white); box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.24); display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1.2rem; z-index: 2;}
.kleague-desc > li > ul > li > div > div > div {font-size: 4.8rem; font-weight: 700;}
.kleague-desc > li > ul > li > div > div > h4 {font-size: 2.4rem; font-weight: 600; text-align: center; line-height: 1.4;}
.kleague-desc > li > ul > li > p {font-size: 1.8rem; text-align: center; line-height: 1.6; word-break: keep-all;}

.kleague-desc > li > ul > li:nth-child(1) > div {background-color: #BBE1DE;}
.kleague-desc > li > ul > li:nth-child(1) > div > div > div {color: #BBE1DE;}
.kleague-desc > li > ul > li:nth-child(2) > div {background-color: #7CCAC2;}
.kleague-desc > li > ul > li:nth-child(2) > div > div > div {color: #7CCAC2;}
.kleague-desc > li > ul > li:nth-child(3) > div {background-color: #24A99B;}
.kleague-desc > li > ul > li:nth-child(3) > div > div > div {color: #24A99B;}

@media screen and (max-width: 768px) {
    .kleague-desc {row-gap: 4rem;}
    .kleague-desc > li {row-gap: 2.4rem;}
    .kleague-desc > li > h3 {height: fit-content; padding: 2rem 0; font-size: 1.8rem;}
    .kleague-desc > li > p {font-size: 1.5rem;}
    .kleague-desc > li > span {font-size: 1.5rem;}
    .kleague-desc > li > ul {flex-flow: column; row-gap: 8rem;}
    .kleague-desc > li > ul > li {width: 100%; row-gap: 2rem;}
    .kleague-desc > li > ul > li + li::before {width: 100%; height: 8rem; top: -8rem; left: 0; background-image: url(../img/ico/ic-arrow-down-40.svg); background-position: center; background-size: 4rem; background-repeat: no-repeat;}
    .kleague-desc > li > ul > li > div {width: 18rem; height: 18rem;}
    .kleague-desc > li > ul > li > div > div {width: 14.8rem; height: 14.8rem;}
    .kleague-desc > li > ul > li > div > div > div {font-size: 2.8rem;}
    .kleague-desc > li > ul > li > div > div > h4 {font-size: 1.8rem;}
    .kleague-desc > li > ul > li > p {max-width: 29.5rem; margin: 0 auto; font-size: 1.5rem;}
}

.campaign-video {width: 100%;}
.campaign-video iframe {width: 100%; height: 69rem;}

.campaign {display: flex; flex-flow: column; row-gap: 10rem;}
.campaign > li {display: flex; align-items: flex-start; column-gap: 10rem;}
.campaign > li > h3 {width: 24rem; font-size: 3.2rem; font-weight: 700; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray700);}
.campaign > li > p {flex: 1; font-size: 1.8rem; line-height: 1.8; word-break: keep-all; color: var(--gray400);}

@media screen and (max-width: 768px) {
    .campaign-video iframe {height: 50vw;}

    .campaign {flex-flow: column; row-gap: 4rem;}
    .campaign > li {flex-flow: column; row-gap: 1.2rem;}
    .campaign > li > h3 {width: 100%; font-size: 2.2rem; padding-bottom: 1.2rem;}
    .campaign > li > p {font-size: 1.5rem;}
}

/* 모두의 경기장 상세 */
.club-title {padding: 10rem 0; margin-top: -10rem; margin-bottom: 16rem; position: relative;}
.club-title::before {content: ''; display: block; width: 100vw; min-width: 144rem; height: 100%; background-image: url(../img/club/page-banner-k08.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1!important;}
.club-title * {position: relative; z-index: 2;}
.club-title > h1 {font-size: 6rem; font-weight: 700; color: #ffffff;}
.club-title > i {width: 18rem; height: 18rem; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.club-title .info {margin-top: 4rem; display: flex; align-items: center; column-gap: 3.2rem;}
.club-title .info > li {display: flex; align-items: center; column-gap: .8rem; font-size: 2.4rem; font-weight: 500; color: #ffffff;}
.club-title .info > li > span {font-weight: 600;}
.club-title .desc {margin-top: 1.6rem; display: flex; align-items: center; column-gap: 1.2rem;}
.club-title .desc > li {display: flex; align-items: center; column-gap: 1.2rem; font-size: 1.8rem; color: rgba(255, 255, 255, .6);}
.club-title .desc > li + li::before {content: ''; width: 1px; height: 1.4rem; background-color: rgba(255, 255, 255, .6);}
.club-title .map {display: flex; align-items: center; column-gap: .8rem; margin-top: 4rem;}

@media screen and (max-width: 768px) {
    .club-title {padding: 3rem 0; margin-top: -3rem; margin-bottom: 4rem;}
    .club-title::before {min-width: initial; background-image: url(../img/club/page-banner-k08-mb.png);}
    .club-title > h1 {font-size: 2.2rem;}
    .club-title > i {width: 7.8rem; height: 7.8rem;}
    .club-title .info {margin-top: 2.4rem; flex-flow: column; row-gap: 1rem; width: fit-content; align-items: initial;}
    .club-title .info > li {column-gap: .6rem; font-size: 1.4rem;}
    .club-title .info > li > i {width: 2rem; height: 2rem;}
    .club-title .desc {display: none;}
    .club-title .map {display: none;}
}


/* 모두의 경기장 > 이동약자 경로정보 */
.map-wrap {width: 100%; height: 66rem; display: grid; grid-template-columns: 42rem calc(100% - 42rem); border: 1px solid var(--gray100);}
.map-wrap .map-img {width: 100%; height: 100%; overflow: hidden; position: relative;}
.map-wrap .map-img.scale {overflow: auto;}

.map-wrap .map-img .scale {display: grid; grid-template-columns: 1fr; box-shadow: .2rem .2rem 1.2rem rgba(0, 0, 0, 0.24); width: fit-content; position: absolute; bottom: 2.4rem; right: 2.4rem;}
.map-wrap .map-img .scale > li {width: 4.8rem; height: 4.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--white);}
.map-wrap .map-img .scale > li + li {border-top: 1px solid var(--gray100);}

/*.map-wrap .map-img {position: relative;}*/
/*.map-wrap .svg-pan-zoom-control {position: absolute; bottom: 2.4rem; right: 2;}*/

.map-wrap .map-desc {border-right: 1px solid var(--gray100); display: grid; grid-template-rows: 10rem calc(100% - 10rem); overflow: hidden;}
.map-wrap .map-desc .notice {height: 10rem; padding: 0 2.4rem; display: flex; align-items: center; column-gap: .8rem; border-bottom: .8rem solid var(--gray50);}
.map-wrap .map-desc .notice > p {font-size: 1.6rem; color: var(--gray300); line-height: 1.4; word-break: keep-all;}
.map-wrap .map-desc > ul {height: 100%; overflow-y: auto;}
.map-wrap .map-desc > ul > li .position {height: 10rem; padding: 0 2.4rem; display: flex; flex-flow: column; row-gap: .8rem; justify-content: center; border-bottom: 1px solid var(--gray100); background-image: url(../img/ico/ic-arrow-down-32.svg); background-size: 3.2rem; background-repeat: no-repeat; background-position: center right 2.4rem; cursor: pointer;}
.map-wrap .map-desc > ul > li .position > span {font-size: 1.8rem; font-weight: 500; line-height: 1.4;}
.map-wrap .map-desc > ul > li .position > span > br {display: none;}
.map-wrap .map-desc > ul > li .position > p {font-size: 2.4rem; font-weight: 600; color: var(--red);}
.map-wrap .map-desc > ul > li .detail {display: none; height: 36rem; padding: 2.4rem; overflow-y: auto; background-color: var(--gray50); flex-flow: column; row-gap: 2.4rem; border-bottom: 1px solid var(--gray100);}
.map-wrap .map-desc > ul > li .detail > p {font-size: 1.6rem; font-weight: 600;}
.map-wrap .map-desc > ul > li .detail > ul {display: flex; flex-flow: column; row-gap: 2.4rem;}
.map-wrap .map-desc > ul > li .detail > ul > li {display: flex; flex-flow: column; padding-left: 5.4rem; position: relative;}
.map-wrap .map-desc > ul > li .detail > ul > li > p {font-size: 1.6rem; line-height: 1.6; word-break: keep-all;}
.map-wrap .map-desc > ul > li .detail > ul > li > p .summary {font-size: 1.6rem; color: var(--gray300); line-height: 1.6; word-break: keep-all;}
.map-wrap .map-desc > ul > li .detail > ul > li > img {width: 100%; margin-top: 1rem;}

.map-wrap .map-desc > ul > li .detail > ul > li:not(:first-child, :last-child)::before {content: ''; width: 1.1rem; height: 1.1rem; background-image: url(../img/ico/ic-spot.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 1.4rem; top: .6rem; z-index: 2;}
.map-wrap .map-desc > ul > li .detail > ul > li:not(:last-child)::after {content: ''; width: 1px; height: calc(100% + 2.4rem); background-color: var(--gray200); position: absolute; top: .7rem; left: 1.9rem; z-index: 1;}
.map-wrap .map-desc > ul > li .detail > ul > li:first-child::before {content: ''; width: 4rem; height: 4rem; background-color: initial; background-image: url(../img/ico/ic-spot-start.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; left: 0; background-color: var(--gray50); border-bottom: .4rem solid var(--gray50); z-index: 2;}
.map-wrap .map-desc > ul > li .detail > ul > li:last-child::before {content: ''; width: 4rem; height: 4rem; background-color: initial; background-image: url(../img/ico/ic-spot-end.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 0; left: 0; background-color: var(--gray50); border-top: .4rem solid var(--gray50); z-index: 2;}

.map-wrap .map-desc > ul > li.active .position {background-image: url(../img/ico/ic-arrow-up-32.svg);}
.map-wrap .map-desc > ul > li.active .detail {display: flex;}

@media screen and (max-width: 768px) {
    .map-wrap {width: 100vw; margin: 0 -2rem; border: 0; height: fit-content; display: flex; flex-flow: column-reverse;}
    .map-wrap .map-img {height: 32rem;}

    .map-wrap .map-desc {border-right: 0; display: block;}
    .map-wrap .map-desc .notice {height: 7.2rem; padding: 0 2rem;}
    .map-wrap .map-desc .notice > p {font-size: 1.4rem;}
    .map-wrap .map-desc > ul {height: initial; overflow-y: initial;}
    .map-wrap .map-desc > ul > li .position {height: 7.2rem; padding: 0 2rem; background-size: 2.4rem; background-position: center right 2rem;}
    .map-wrap .map-desc > ul > li .position > span {font-size: 1.4rem;}
    .map-wrap .map-desc > ul > li .position > p {font-size: 1.8rem;}
    .map-wrap .map-desc > ul > li .detail {height: fit-content; padding: 2rem; row-gap: 2rem;}
    .map-wrap .map-desc > ul > li .detail > p {font-size: 1.42rem;}
    .map-wrap .map-desc > ul > li .detail > ul {row-gap: 2rem;}
    .map-wrap .map-desc > ul > li .detail > ul > li > p {font-size: 1.4rem;}
    .map-wrap .map-desc > ul > li .detail > ul > li > p .summary {font-size: 1.4rem;}
    .map-wrap .map-desc > ul > li .detail > ul > li > img {width: 100%; margin-top: 1rem;}

    .map-wrap .map-desc > ul > li .detail > ul > li:not(:first-child, :last-child)::before {width: .9rem; height: .9rem; left: 1.5rem; top: .7rem; z-index: 2;}
}

/* 모두의 경기장 > 내부시설정보 */
.map-tab {width: 100%; display: flex; align-items: center; justify-content: center;}
.map-tab > li {height: 6rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 500; color: var(--gray300); background-color: var(--gray50); border: 1px solid var(--gray100); cursor: pointer;}
.map-tab > li.active {border-bottom: 0; background-color: transparent; font-weight: 600; color: var(--gray700); border-top: .2rem solid var(--gray700);}
.map-tab > li + li {border-left: 0;}
.map-tab > li:nth-child(1):nth-last-child(2), .map-tab > li:nth-child(1):nth-last-child(2) ~ li {width: calc(100% / 2);}

.map-cont {display: none; border: 1px solid var(--gray100); border-top: 0; padding: 2.4rem;}
.map-cont.active {display: block;}

.map-sub-tab {display: flex; align-items: center; column-gap: .8rem;}
.map-sub-tab > li {height: 4.2rem; padding: 0 2rem; display: flex; align-items: center; justify-content: center; column-gap: .4rem; border-radius: 2rem; font-size: 1.8rem; font-weight: 500; color: var(--gray300); border: 1px solid var(--gray200); cursor: pointer;}
.map-sub-tab > li.active {background-color: var(--gray300); border-color: var(--gray300); color: #ffffff; font-weight: 600;}

.map-img-facility {margin-top: 3rem; width: 100%; min-height: 54rem; height: fit-content;}

@media screen and (max-width: 768px) {
    .map-tab {width: 100vw; margin: 0 -2rem;}
    .map-tab > li {height: 4.8rem; font-size: 1.6rem;}
    .map-tab > li:first-child {border-left: 0;}
    .map-tab > li:last-child {border-right: 0;}

    .map-cont {width: 100vw; margin: 0 -2rem; border: 0; border-bottom: 1px solid var(--gray100); padding: 2rem;}

    .map-sub-tab {grid-gap: .8rem .4rem; flex-wrap: wrap;}
    .map-sub-tab > li {height: 3rem; padding: 0 1.2rem; font-size: 1.4rem;}

    .map-img-facility {margin-top: 2rem; height: 26rem;}
}

/* 기부 > 기부 신청 > 기부 정보 */
.donation-step {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3rem; margin-bottom: 10rem;}
.donation-step > li {display: flex; align-items: center; padding: 0 2rem; height: 9.2rem; column-gap: .8rem; border: 1px solid var(--gray100); background-color: var(--white); position: relative;}
.donation-step > li + li::before {content: ''; width: 2.4rem; height: 2.4rem; position: absolute; left: -2.7rem; background-image: url(../img/ico/ic-arrow-step.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.donation-step > li > div {display: flex; flex-flow: column; row-gap: .6rem; font-size: 1.8rem; font-weight: 500; color: var(--gray300);}
.donation-step > li > div > p {font-size: 1.8rem; font-weight: 600;}

.donation-step > li.active {border: 0; background-color: var(--light-blue); background-image: url(../img/donation-pattern.svg); background-repeat: no-repeat; background-size: cover; background-position: center right;}
.donation-step > li.active > div {color: #ffffff;}

.donation-table1 th {width: 20rem;}

@media screen and (max-width: 768px) {
    .donation-step {column-gap: 2.4rem; margin-bottom: 4rem;}
    .donation-step > li {flex-flow: column; row-gap: .8rem; padding: 1.2rem 0; height: fit-content;}
    .donation-step > li + li::before {content: ''; width: 1.6rem; height: 1.6rem; left: -2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
    .donation-step > li > i {width: 4.8rem; height: 4.8rem;}
    .donation-step > li > div {row-gap: .4rem; font-size: 1.3rem; align-items: center;}
    .donation-step > li > div > p {font-size: 1.5rem;}

    .donation-step > li.active {background-image: url(../img/donation-pattern-mb.svg);}

    .donation-table1 th {width: 8.4rem;}
}

/* 기부 > 기부 신청 > 납입 정보 */
.donation-amount {height: 8.8rem; margin-bottom: 10rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gray700); border-bottom: 1px solid var(--gray100);}
.donation-amount > p {font-size: 1.8rem;}
.donation-amount > div {font-size: 2.4rem; font-weight: 600;}

.terms-desc {font-size: 1.8rem; line-height: 1.8;}

@media screen and (max-width: 768px) {
    .donation-amount {height: 5.8rem; margin-bottom: 4rem;}
    .donation-amount > p {font-size: 1.5rem;}
    .donation-amount > div {font-size: 1.8rem;}

    .terms-desc {font-size: 1.3rem;}
}

/* 기부 > 기부 신청 > 기부 신청 완료 */
.donation-complete {display: flex; flex-flow: column; align-items: center;}
.donation-complete > h2 {font-size: 2.4rem; font-weight: 600; margin-top: 2rem}
.donation-complete > p {font-size: 1.8rem; color: var(--gray300); margin-top: 1.2rem; text-align: center; line-height: 1.6;}
.donation-complete > ul {width: 42rem; margin: 6rem auto 0; display: flex; flex-flow: column; border-top: 1px solid var(--gray700);}
.donation-complete > ul > li {min-height: 8.8rem; padding: 3.2rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray100);}
.donation-complete > ul > li > p {font-size: 1.8rem;}
.donation-complete > ul > li > div {text-align: right; font-size: 2.4rem; font-weight: 600; line-height: 1.4;}
.donation-complete > ul > li > div > p {font-size: 2rem;}

@media screen and (max-width: 768px) {
    .donation-complete > i {width: 10rem; height: 10rem;}
    .donation-complete > h2 {font-size: 1.8rem; margin-top: 1.2rem}
    .donation-complete > p {font-size: 1.5rem;}
    .donation-complete > ul {width: 100%; margin: 4rem auto 0;}
    .donation-complete > ul > li {min-height: 5.8rem; padding: 2rem 0;}
    .donation-complete > ul > li > p {font-size: 1.5rem;}
    .donation-complete > ul > li > div {font-size: 1.8rem;}
    .donation-complete > ul > li > div > p {font-size: 1.3rem;}
}

/* 기부 > 기부 내역 */
.donation-history-wrap {display: flex; flex-flow: column; row-gap: 6rem; align-items: center; justify-content: center;}
.donation-history-wrap > div {display: flex; flex-flow: column; row-gap: 2.4rem; align-items: center; justify-content: center;}
.donation-history-wrap > div > h2 {font-size: 4.8rem; font-weight: 700;}
.donation-history-wrap > div > p {font-size: 1.8rem; color: var(--gray300);}
.donation-history-wrap > ul {padding: 4rem; background-color: var(--gray50); display: flex; flex-flow: column; row-gap: 1.2rem;}
.donation-history-wrap > ul > li {width: 44rem; font-size: 1.8rem; font-weight: 500; color: var(--gray300);}
.donation-history-wrap > ul > li input {width: 100%; margin-bottom: 1.2rem;}
.donation-history-wrap > ul > li button {width: 100%; margin-top: 1.6rem;}

@media screen and (max-width: 768px) {
    .donation-history-wrap {row-gap: 4rem;}
    .donation-history-wrap > div {row-gap: 1.2rem;}
    .donation-history-wrap > div > h2 {font-size: 1.8rem;}
    .donation-history-wrap > div > p {font-size: 1.5rem;}
    .donation-history-wrap > ul {width: 100%; padding: 2rem 1.6rem;}
    .donation-history-wrap > ul > li {width: 100%; font-size: 1.3rem;}
    .donation-history-wrap > ul > li input {margin-bottom: .8rem;}
    .donation-history-wrap > ul > li button {margin-top: 0;}
}

/* 케어 프로젝트 */
.kare-intro {display: flex; align-items: center; column-gap: 12rem;}
.kare-intro > ul {display: flex; flex-flow: column; row-gap: 2rem;}
.kare-intro > ul > li {display: flex; align-items: center; justify-content: center; height: 8rem; width: 70rem; border-radius: 20rem; border: 2px solid var(--blue800); font-size: 2.4rem; font-weight: 600; color: var(--blue800);}

@media screen and (max-width: 768px) {
    .kare-intro {flex-flow: column; row-gap: 2.4rem;}
    .kare-intro > ul {width: 100%; row-gap: 1rem;}
    .kare-intro > ul > li {height: 4.8rem; width: 100%; font-size: 1.5rem;}
    .kare-intro > img {width: 22rem;}
}

.kare-logo-desc {display: flex; align-items: center; column-gap: 16rem;}
.kare-logo-desc > div {display: flex; flex-flow: column; row-gap: 2rem;}
.kare-logo-desc > div > h6 {font-size: 2.4rem; font-weight: 600;}
.kare-logo-desc > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}

@media screen and (max-width: 768px) {
    .kare-logo-desc {flex-flow: column; row-gap: 2.4rem;}
    .kare-logo-desc > div {row-gap: 1rem;}
    .kare-logo-desc > div > h6 {font-size: 2.2rem;}
    .kare-logo-desc > div > p {font-size: 1.5rem;}
}

.kare-logo-wrap {display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--gray700); margin-top: 6rem;}
.kare-logo-wrap > li {border-bottom: 1px solid var(--gray400); display: flex; align-items: center; justify-content: center;}
.kare-logo-wrap > li > div {display: flex; flex-flow: column; row-gap: 2rem; height: 24rem; justify-content: center; width: fit-content;}
.kare-logo-wrap > li > div > p {font-size: 1.8rem;}
.kare-logo-wrap > li > div > img {height: 10rem;}

@media screen and (max-width: 768px) {
    .kare-logo-wrap > li > div {row-gap: 1.6rem; height: fit-content; padding: 1.6rem;}
    .kare-logo-wrap > li > div > p {font-size: 1.4rem;}
    .kare-logo-wrap > li > div > img {height: initial; width: 100%;}
}

.kare-logo-wrap > li.dark {background-color: var(--black);}
.kare-logo-wrap > li.dark > div > p {color: var(--white)}

.sub-title + .desc-list {margin-top: 10rem;}
.desc-list {display: flex; flex-flow: column; row-gap: 10rem;}
.desc-list > li {display: flex; align-items: flex-start; column-gap: 10rem;}
.desc-list > li > h6 {width: 32rem; font-size: 2.4rem; font-weight: 600; padding-bottom: 1.2rem; border-bottom: 1px solid var(--gray700);}
.desc-list > li > p {width: calc(100% - 32rem - 10rem); font-size: 1.8rem; line-height: 1.6; word-break: keep-all;}
.desc-list > li > div {display: flex; flex-flow: column; row-gap: 3.2rem;}
.desc-list > li > div button {width: 100%;}
.desc-list > li > ul {width: calc(100% - 32rem - 10rem);}
.desc-list > li > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}
.desc-list > li > div > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}
.desc-list > li > div > div {display: flex; flex-flow: column; row-gap: .4rem;}
.desc-list > li > div > div > p {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; font-weight: 600;}
.desc-list > li > div > div > ul > li {font-size: 1.8rem; line-height: 1.6; word-break: keep-all; text-indent: -1.2rem; padding-left: 1.2rem;}

@media screen and (max-width: 768px) {
    .sub-title + .desc-list {margin-top: 4.8rem;}
    .desc-list {row-gap: 2.8rem;}
    .desc-list > li {flex-flow: column; row-gap: 2rem;}
    .desc-list > li > h6 {width: 100%; font-size: 2.2rem; font-weight: 700; padding-bottom: 2rem; border-width: 1px;}
    .desc-list > li > p {width: 100%; font-size: 1.5rem;}
    .desc-list > li > div {row-gap: 2rem;}
    .desc-list > li > ul {width: 100%;}
    .desc-list > li > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
    .desc-list > li > div > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
    .desc-list > li > div > div {row-gap: .2rem;}
    .desc-list > li > div > div > p {font-size: 1.5rem;}
    .desc-list > li > div > div > ul > li {font-size: 1.5rem; text-indent: -1rem; padding-left: 1rem;}
}

.kare-step {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem .4rem;}
.kare-step > li {border: 1px solid var(--gray100); display: flex; align-items: center; column-gap: .8rem; padding: 2rem!important; margin-right: 2.8rem; position: relative; line-height: initial!important; text-indent: initial!important;}
.kare-step > li:not(:last-child):after {content: ''; width: 2.4rem; height: 2.4rem; background-image: url(../img/ico/ic-arrow-right-24.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; right: -2.8rem;}
.kare-step > li > div {display: flex; flex-flow: column; row-gap: .6rem;}
.kare-step > li > div > p {font-size: 1.8rem; font-weight: 600; color: var(--gray300);}
.kare-step > li > div > span {font-size: 1.8rem; font-weight: 500; color: var(--gray300);}

@media screen and (max-width: 768px) {
    .kare-step {grid-gap: 2rem .4rem;}
    .kare-step > li {flex-flow: column; row-gap: .8rem; padding: .8rem!important; margin-right: 2rem;}
    .kare-step > li:not(:last-child):after {width: 1.6rem; height: 1.6rem; right: -2rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
    .kare-step > li > div {align-items: center;}
    .kare-step > li > div > p {font-size: 1.6rem;}
    .kare-step > li > div > span {font-size: 1.6rem; text-align: center;}
}

.ic-kare01 {width: 5.2rem; height: 5.2rem; background-image: url(../img/ico/ic-kare01.svg);}
.ic-kare02 {width: 5.2rem; height: 5.2rem; background-image: url(../img/ico/ic-kare02.svg);}
.ic-kare03 {width: 5.2rem; height: 5.2rem; background-image: url(../img/ico/ic-kare03.svg);}
.ic-kare04 {width: 5.2rem; height: 5.2rem; background-image: url(../img/ico/ic-kare04.svg);}
.ic-kare05 {width: 5.2rem; height: 5.2rem; background-image: url(../img/ico/ic-kare05.svg);}

.terms-desc-wrap {display: flex; flex-flow: column; row-gap: 2.4rem;}
.terms-desc-wrap > p {background-color: var(--gray50); padding: 4rem 3rem; border-top: 1px solid var(--gray700); font-size: 1.8rem; line-height: 1.6; color: var(--gray700); word-break: keep-all;}
.terms-desc-wrap > div {display: flex; align-items: center; justify-content: space-between;}
.terms-desc-wrap > div > p {font-size: 1.8rem;}

@media screen and (max-width: 768px) {
    .terms-desc-wrap {row-gap: 4rem;}
    .terms-desc-wrap > p {padding: 2rem 1.6rem; font-size: 1.4rem;}
    .terms-desc-wrap > div {flex-flow: column; row-gap: 1.8rem;}
    .terms-desc-wrap > div > p {font-size: 1.4rem;}

    .terms-desc-wrap .flex-input {align-items: center; flex-flow: initial;}
}


.flex-address.kare > li:nth-child(1) input {width: 44rem!important;}

@media screen and (max-width: 768px) {
    .flex-address.kare > li:nth-child(1) input {width: 100%!important;}
}


/* 엑시트캠페인 영상 영역 */
.video-container { position: relative; width: 100%; max-width: 1000px; margin: 2rem auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.plyr-video { width: 100%; aspect-ratio: 16/9; }
.plyr--video { border-radius: 12px; overflow: hidden; }

/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
    .video-container { margin: 1.5rem auto; border-radius: 8px; }
    .plyr--video { border-radius: 8px; }
}

@media screen and (max-width: 480px) {
    .video-container { margin: 1rem auto; }
}
.title.title-row { display: flex; flex-direction: row; }
.title.title-row > button { margin-left: auto; }
.list-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.list-wrap li { background: rgba(242, 243, 246, 1); height: 104px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 600; }
.list-wrap li > img { height: 4rem; width: auto; flex-shrink: 0; }
.list-wrap li > div { display: flex !important; flex-flow: column !important; row-gap: .2rem; margin-left: 1rem; flex: 0 0 auto; }
.list-wrap li > div > span:first-child { font-size: 1.5rem; font-weight: 700; color: var(--gray700); }
.list-wrap li > div > span:last-child { font-size: 1.3rem; font-weight: 400; color: var(--gray400); }
.sub-page-cont { display: none; }
.sub-page-cont.active { display: block; }
.page-cont .sub-tab { margin-bottom: 10rem; }
.simbol-list { display: flex; gap: 2.4rem; }
.simbol-list > li { flex: 1; }
.simbol-list > li > div { display: flex; justify-content: center; align-items: center; height: 15rem; background: rgba(242, 243, 246, 1); }
.simbol-list > li strong { font-size: 2.4rem; font-weight: 600; margin-top: 2.4rem; display: block; }
.simbol-list > li p { font-size: 1.8rem; line-height: 1.6; margin-top: 1.6rem; }
.life-list { display: flex; gap: 3rem; }
.life-list > li { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; border: 1px solid var(--gray100); background: url("../img/kare/bg-list.png") no-repeat center / cover; padding: 6rem; }
.life-list > li > img { width: 13.5rem; }
.life-list > li strong { font-size: 2rem; font-weight: 600; display: block; margin-top: 1rem; }
.life-list > li:not(:first-child):before { position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); content: ""; display: flex; width: 2.4rem; height: 2.4rem; background: url("../img/ico/ic-arrow-right-40.svg") no-repeat center / contain; }
.life-list > li p { font-size: 1.8rem; font-weight: 500; line-height: 1.4; color: var(--gray300); text-align: center; }
.kare-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.9rem; }
.kare-list > li { padding: 3rem 3.5rem; background: url("../img/kare/bg-list.png") no-repeat center / cover; display: flex; flex-direction: row; gap: 2rem; align-items: center; border: 1px solid var(--gray100); }
.kare-list > li img { width: 7rem; flex-shrink: 0; }
.kare-list > li strong { font-size: 2.4rem; display: block; font-weight: 700; }
.kare-list > li p { color: var(--gray300); font-size: 1.8rem; margin-top: .4rem; }
.program-desc-wrap > ul > li > div.step-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; width: calc(100% - 32rem - 10rem); }
.program-desc-wrap > ul > li > div.step-wrap > div { position: relative; border: 1px solid var(--gray100); padding: 2rem; display: flex; flex-direction: row; gap: .8rem; align-items: center; }
.program-desc-wrap > ul > li > div.step-wrap > div > div { color: var(--gray300); font-size: 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
.program-desc-wrap > ul > li > div.step-wrap > div:not(:first-child, :nth-child(4)):before { position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); content: ""; display: flex; width: 2.4rem; height: 2.4rem; background: url("../img/ico/ic-arrow-right-40.svg") no-repeat center / contain; }
.icon-box { display: flex;flex-shrink: 0; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; border-radius: 100%; background: var(--blue100); }
.bold { font-weight: 600; }
@media screen and (max-width: 768px) {
    .partner-wrap { row-gap: 0; }
    .partner-wrap > li:nth-child(n+5) { margin-right: 0; }
    .partner-wrap > li, .partner-wrap > li:nth-last-child(n+5), .partner-wrap > li:nth-last-child(n+5) ~ .partner-wrap > li { width: 100%; }
    .list-wrap li { font-size: 1.4rem; }
    .simbol-list { display: grid; grid-template-columns: repeat(2, 1fr); }
    .simbol-list > li strong { font-size: 1.6rem; }
    .simbol-list > li p { font-size: 1.4rem; }
    .life-list > li { padding: 2rem; }
    .life-list > li > img { width: 10rem; }
    .life-list > li strong { font-size: 1.4rem; }
    .life-list > li p { font-size: 1.2rem; word-break: keep-all; }
    .kare-list { grid-template-columns: repeat(1, 1fr); }
    .kare-list > li img { width: 5rem; }
    .kare-list > li strong { font-size: 1.6rem; }
    .kare-list > li p { font-size: 1.4rem; }
    .program-desc-wrap > ul > li > div.step-wrap { width: 100%; }
    .program-desc-wrap > ul > li > div.step-wrap > div { padding: 1.6rem; }
    .program-desc-wrap > ul > li > div.step-wrap > div > div { font-size: 1.2rem; }
}