/* 메인 공통 */
.section-title {}
.section-title > span {display: block; margin-bottom: 22rem;font-size: 24rem;font-weight: 700;}
.section-title > h2 {margin-bottom: 5rem;;font-size: 48rem;font-family: var(--font-secondary);}
.section-title > h2 > em {}
.section-title > p {font-size: 24rem;}
.section-title > p > strong {font-weight: 700;}
.section-divider {position: absolute;bottom: 0;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 1300rem;font-size: 0;}
.section-divider > img {width: 100%;}





/* intro - 인트로 (1단) */
.intro {}
.intro > div {position: relative;}
.intro__bg {}
.intro__bg > img {width: 100%;min-height: 100vh;object-fit: cover;}
.intro__title {position: absolute;top: 200rem;left: 50%;transform: translateX(-50%);width: 100%;}
.intro__title-logo {margin-bottom: 44rem;;font-size: 0;text-align: center;}
.intro__title-logo > img {width: 885rem;}
.intro__title-desc {margin-bottom: 53rem;font-size: 24rem; line-height: 1.4; text-align: center;letter-spacing: 0.01em;font-family: var(--font-secondary-eng);}
.intro__title-desc > strong {font-weight: 900;}
.intro__title-buttons {display: flex;align-items: center;justify-content: center;gap: 8rem;}
.intro__title-buttons > a {}
.intro__scroll {position: absolute;bottom: 60rem;left: 50%;transform: translateX(-50%);width: max-content;text-align: center;}
.intro__scroll .icon {display: block;margin-bottom: 8rem;animation: scrollDown .8s infinite;}
.intro__scroll .icon > svg {width: 24rem; height: max-content;}
.intro__scroll > p {font-size: 12rem; line-height: 1.2;letter-spacing: 0.01em;color: #727C95;}

@keyframes scrollDown {
    0% {transform: translateY(-20rem);}
    100% {transform: translateY(0);}
}



/* info - 소개 (2단) */
.info {position: relative;padding: 100rem 0 120rem;overflow: hidden;}
.info > div {}
.info__title {margin-bottom: 60rem;position: relative;}
.info__title.section-title > span {color: var(--color-primary);}
.info__title.section-title > h2 > em {color: var(--color-primary);}
.info__title.section-title .info-nav {display: flex;align-items: center;gap: 10rem;position: absolute;bottom: 0;right: 0;}
.info__title.section-title .info-nav > span {display: block;width: 54rem;line-height: 54rem;border: 1rem solid var(--color-neutral-5); border-radius: 50%;text-align: center;font-size: 0;cursor: pointer;}
.info__title.section-title .info-nav > span > img {width: 24rem;vertical-align: middle;transition: 0.4s;}
.info__title.section-title .info-nav > span.swiper-button-disabled > img {filter: invert(98%) sepia(9%) saturate(203%) hue-rotate(296deg) brightness(115%) contrast(87%);}
.info__swiper {width: 440rem; margin: 0 0;overflow: visible;}
.info__swiper > ul {}
.info__swiper-item {position: relative;width: 420rem;height: auto;margin-right: 20rem;;padding: 50rem 61rem 60rem;border-radius: 20rem; background: var(--color-neutral-5);overflow: hidden;transition: ease 1s;}
.info__swiper-item.on {width: 750rem;}
.info__swiper-item-desc {display: flex;flex-direction: column;height: 100%;}
.info__swiper-item-desc > span {display: block;margin-bottom: 16rem;font-size: 16rem;color: var(--color-primary);}
.info__swiper-item-desc > strong {display: block;margin-bottom: 87rem;;font-size: 24rem;font-weight: 700;}
.info__swiper-item-desc > p {margin-top: auto;;font-size: 18rem;color: var(--color-neutral-2);}
.info__swiper-img {position: absolute;bottom: -30rem;right: 52rem; width: 312rem;opacity: 0;visibility: hidden;}
.info__swiper-img > img {width: 100%;}
.info__swiper-item.on .info__swiper-img {bottom: 0;opacity: 1;visibility: visible;transition: 1s 1s;}
.info__swiper .swiper-pagination {display: none;}



/* function - 기능 (3단) */
.function {position: relative;padding: 150rem 0 398rem; overflow: hidden;}
.function__title {margin-bottom: 276rem;text-align: center;}
.function__title.section-title > span {color: var(--color-sub-2);}
.function__title.section-title > h2 > em {color: var(--color-sub-2);}
.function__list {}
.function__list > li {display: flex;align-items: center;justify-content: space-between;}
.function__list > li > figure {position: relative;width: calc(50% - 10rem);}
.function__list > li > figure > img {position: absolute;top: 50%;left: -50rem;transform: translateY(-45%);width: 100%;}
.function__list > li .desc {width: 50%;}
.function__list > li .desc > span {display: flex;align-items: center;gap: 2rem; margin-bottom: 16rem;font-size: 20rem; font-weight: 700;color: var(--color-sub-2);}
.function__list > li .desc > span > img {width: 40rem;}
.function__list > li .desc > h3 {margin-bottom: 40rem;;font-size: 36rem;font-weight: 700;}
.function__list > li .desc > p {font-size: 18rem;color: var(--color-neutral-2);}
.function__list > li:nth-child(even) {text-align: right;}
.function__list > li:nth-child(even) > figure > img {left: auto;right: -50rem;}
.function__list > li:nth-child(even) .desc > span {justify-content: right;}
.function__list > li:nth-child(1) {margin-bottom: 438rem;}
.function__list > li:nth-child(2) {margin-bottom: 477rem;}



/* 캠페인, 시험일정 wrap */
.time {padding: 0 0 272rem;background: url(/images/main/campaign_bg.png) no-repeat center center/cover;}

/* campaign - 캠페인 (4단) */
.campaign {padding-top: 150rem;text-align: center;}
.campaign__title {margin-bottom: 26rem;}
.campaign__title.section-title > span {color: var(--color-sub-1);}
.campaign__title.section-title > h2 > em {color: var(--color-sub-1);}
.campaign__join {position: relative;padding: 226rem 0 218rem;}
.campaign__join > figure {position: absolute;top: 0;left: 0;width: 100%;z-index: -1;}
.campaign__join > figure > img {width: 100%;min-height: 746rem;object-fit: cover;}
.campaign__join .logo {margin-bottom: 30rem;font-size: 0;}
.campaign__join .logo > img {width: 380rem;}
.campaign__join > a {margin: 0 auto;gap: 10rem;transform: translateY(20rem);opacity: 0;visibility: hidden;transition: .7s;}
.campaign__join > a > span {color: var(--color-neutral-7);}

.campaign__time {margin-bottom: 100rem;}
.campaign__time > p {margin-bottom: 30rem;font-size: 24rem;font-weight: 700;}
.campaign__time-count {display: flex;justify-content: center;align-items: center;gap: 40rem;}
.campaign__time-count > div {width: 140rem;}
.campaign__time-count > div .time-count {position: relative;display: flex;align-items: center;justify-content: center;height: 120rem; margin-bottom: 16rem;border-radius: 20rem;border: 1rem solid var(--color-sub-2);}
.campaign__time-count > div~div .time-count::after {content: ":";display: inline-block;position: absolute;top: 50%;right: 100%;transform: translateY(-50%);width: 40rem;text-align: center;font-size: 36rem;font-weight: 400;}
.campaign__time-count > div .time-count > strong {font-size: 48rem;font-weight: 700;font-family: var(--font-secondary-eng);}
.campaign__time-count > div > span {font-size: 24rem;font-family: var(--font-secondary-eng);}
.campaign__cont {display: flex;gap: 20rem;}
.campaign__cont-info {font-size: 18rem;color: var(--color-neutral-2);}
.campaign__cont > div {width: 50%;height: auto;padding: 60rem 0 65rem; background: var(--color-neutral-6);border-radius: 20rem;}
.campaign__cont > div > strong {display: block;margin-bottom: 16rem;;font-size: 16rem; font-weight: 700;color: var(--color-sub-1);}
.campaign__cont > div > ul {margin-bottom: 40rem;}
.campaign__cont > div > ul > li {display: flex;align-items: center;justify-content: center; gap: 9rem;}
.campaign__cont > div > ul > li .number {display: inline-block;width: 20rem;line-height: 20rem; border-radius: 50%;background: var(--color-sub-1);color: var(--color-neutral-6);font-size: 12rem;font-weight: 700;font-family: var(--font-secondary-eng);}
.campaign__cont > div > ul > li > p {font-size: 24rem;}
.campaign__cont > div > ul > li > p > strong {font-weight: 700;}
.campaign__cont > div .amount {margin-bottom: 39rem;font-size: 40rem;font-weight: 700;}
.campaign__cont > div.campaign__cont-donation > strong {margin-bottom: 38rem;}



/* schedule - 시험일정 (5단) */
.schedule {padding-top: 150rem;}
.schedule > div {}
.schedule__title {margin-bottom: 60rem;text-align: center;}
.schedule__title.section-title > span {color: var(--color-sub-3);}
.schedule__title.section-title > h2 > em {color: var(--color-sub-3);}
.schedule__list {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 30rem 20rem;}
.schedule__list-item {height: auto;padding: 20rem 20rem 30rem;border-radius: 20rem;background: var(--color-neutral-5);}
.schedule__list-item-title {position: relative;padding-bottom: 12rem; margin-bottom: 12rem;border-bottom: 1rem solid var(--color-neutral-6);}
.schedule__list-item-title > strong {font-size: 36rem;font-weight: 700;}
.schedule__list-item-title .icon {position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: max-content;}
.schedule__list-item-title .icon > img {max-height: 60rem;}
.schedule__list-item-content {font-size: 18rem;color: var(--color-neutral-2);}
.schedule__list-item-content > p {}
.schedule__list-item:last-child {background: #8337DA;box-shadow: 0 0 8rem #DCBEFF, inset 0 2rem 12rem #D8B6FF;}
.schedule__list-item:last-child .schedule__list-item-title {border-color: var(--color-neutral-1);}
.schedule__list-item:last-child .schedule__list-item-content {font-size: 20rem; font-weight: 700;color: var(--color-neutral-1);}



/* app - 앱 다운로드 (6단) */
.app {padding: 150rem 0 153rem;background: url(/images/main/app_bg.jpg) no-repeat center center/cover;}
.app > div {}
.app__logo {margin-bottom: 30rem;;font-size: 0;text-align: center;}
.app__logo > img {width: 200rem;}
.app__title {margin-bottom: 80rem;;text-align: center;}
.app__title.section-title > h2 > em {color: var(--color-primary);}
.app-buttons { display: flex;align-items: center;justify-content: center;gap: 8rem;}




/* 애니메이션 */
.animation {opacity:0;visibility: hidden;transition: .8s;}
.animation.active {opacity:1;visibility: visible;}
.function__list > li > figure > img.active {left: 0;}
.function__list > li:nth-child(even) > figure > img.active {left: auto;right: 0;}
.campaign__join .animation {transform: translateY(20rem);}
.campaign__join .animation.active {transform: translateY(0);}
.schedule__list-item {transform: translateY(20rem);}
.schedule__list-item.active {transform: translateY(0);}



@media all and (max-width:860px) {
    .section-title {text-align: center;}
    .section-title > span {margin-bottom: 4rem;;font-size: 16rem;}
    .section-title > h2 {margin-bottom: 16rem;;font-size: 32rem;}
    .section-title > p {font-size: 15rem;}


    .intro__bg > img {min-height: 100%;}
    .intro__title {top: 115rem;}
    .intro__title-logo {margin-bottom: 24rem;}
    .intro__title-logo > img {width: 307rem;}
    .intro__title-desc {font-size: 18rem;}
    .intro__title-buttons {display: none;}
    .intro__buttons {display: flex;align-items: center;justify-content: center;gap: 16rem;position: absolute;bottom: 70rem;left: 0;width: 100%;}
    .intro__scroll {display: none;}



    .info {padding: 76rem 0 100rem;}
    .info__swiper {position: relative;width: 100%;max-width: 400rem;}
    .info__swiper-item {display: flex;flex-direction: column;width: 100%;padding: 30rem 30rem 0;}
    .info__swiper-item.on {width: 100%;}
    .info__swiper-item-desc {height: auto;margin-bottom: 85rem;}
    .info__swiper-item-desc > span {margin-bottom: 10rem;;font-size: 14rem;}
    .info__swiper-item-desc > strong {margin-bottom: 16rem;;font-size: 18rem;}
    .info__swiper-item-desc > p {margin-top: 0;font-size: 14rem;}
    .info__swiper-img {position: static;width: 100%;transform: translateY(100rem);margin-top: auto;;transition: .5s 1s;}
    .info__swiper-item.swiper-slide-active .info__swiper-img {transform: translateY(0);opacity: 1;visibility: visible;}
    .info__title.section-title .info-nav {display: none;}
    .info__swiper .swiper-pagination {display: block;position: absolute;top: 30rem;right: 30rem;bottom: auto;left: auto;width: 34rem;line-height: 22rem; border-radius: 40rem;background: var(--color-neutral-6);text-align: center;font-size: 12rem; font-weight: 500;color: var(--color-neutral-2);}
    .info__swiper .swiper-pagination-current {color: #fff;}




    .function {padding: 70rem 0 104rem;}
    .function__title {margin-bottom: 70rem;}
    .function__list > li {flex-direction: column;margin-bottom: 70rem !important;text-align: left !important;}
    .function__list > li .desc {width: 100%; max-width: 350rem; padding: 0 16rem;}
    .function__list > li .desc > span {margin-bottom: 8rem;;font-size: 15rem;}
    .function__list > li .desc > span > img {order: -1;width: 20rem;}
    .function__list > li .desc > h3 {font-size: 24rem;margin-bottom: 20rem;}
    .function__list > li .desc > p {font-size: 14rem;}
    .function__list > li .desc > p br {display: none;}
    .function__list > li > figure {order: -1;width: 100%; max-width: 400rem; margin: 0 auto 48rem;text-align: center;}
    .function__list > li > figure > img:nth-child(1) {position: static;transform: translate(0,0);opacity: 0;}
    .function__list > li > figure > img:nth-child(2) {top: calc(50% + 30rem);left: calc( 50% - 6rem) !important;right: auto !important;transform: translate(-50%, -50%);}
    .function__list > li:nth-child(even) .desc > span {justify-content: left;}
    

    .time {padding: 0 0 100rem;}

    .campaign {padding-top: 70rem;}
    .campaign__join {padding: 140rem 0 121rem;}
    .campaign__join > figure > img {min-height: 100%;}
    .campaign__join .logo {margin-bottom: 20rem;}
    .campaign__join .logo > img {width: 229rem;}
    .campaign__time {margin-bottom: 40rem;}
    .campaign__time > p {margin-bottom: 20rem;;font-size: 16rem;}
    .campaign__time-count > div {width: 70rem;}
    .campaign__time-count > div .time-count {height: 80rem; margin-bottom: 6rem;; border-radius: 10rem;}
    .campaign__time-count > div .time-count > strong {font-size: 24rem;}
    .campaign__time-count > div > span {font-size: 12rem;}
    .campaign__cont > div {padding: 30rem 0 35rem;}
    .campaign__cont > div > strong {margin-bottom: 16rem;;font-size: 14rem;}
    .campaign__cont > div > ul > li {gap: 5rem;}
    .campaign__cont > div > ul > li > p {font-size: 18rem;}
    .campaign__cont > div > ul > li .number {width: 16rem;line-height: 16rem;font-size: 10rem;}
    .campaign__cont > div.campaign__cont-donation > strong {margin-bottom: 36rem;}
    .campaign__cont > div .amount {margin-bottom: 36rem;;font-size: 24rem;}
    .campaign__cont-info {font-size: 14rem;}


    .schedule {padding-top: 70rem;}
    .schedule__title {margin-bottom: 40rem;}
    .schedule__list {gap: 10rem;}
    .schedule__list-item {padding: 16rem; border-radius: 10rem;}
    .schedule__list-item-title {padding-bottom: 8rem;margin-bottom: 8rem;}
    .schedule__list-item-title > strong {font-size: 24rem;}
    .schedule__list-item-title .icon {top: calc(50% - 8rem);}
    .schedule__list-item-title .icon > img {max-height: 30rem;}
    .schedule__list-item-content {font-size: 14rem;}
    .schedule__list-item:last-child .schedule__list-item-content {font-size: 16rem;}



    .app {padding: 80rem 0 70rem;background: url(/images/main/app_bg_mo.jpg) no-repeat center center/cover;}
    .app__logo > img {width: 100rem;}
    .app__title {margin-bottom: 50rem;}



    /* 애니메이션 */
    .function__list > li > figure > img.active {top: 50%;}
}


@media all and (max-width:660px) {
    .intro__buttons{bottom: 24rem;}

    .info__swiper {max-width: 100%;}

    .function__list > li > figure {max-width: 100%;}
    .function__list > li .desc {max-width: 100%;}


    .campaign__cont {flex-direction: column;gap: 10rem;}
    .campaign__cont > div {width: 100%;border-radius: 10rem;}

    .schedule__list {grid-template-columns: repeat(1, minmax(0, 1fr));}
}