@charset "euc-kr";
/* bg url: https://image.megagong.net/m/2025/ */

/* settings */
:root {
    --color-primary: #050A60;
}
.evSection {padding: 150px 0;}
.evSection .mini_tit {font-weight: 400;}
.evSection .con_tit {letter-spacing: -0.04em; margin-bottom: 60px;}
.evSection .mini_tit + .con_tit {margin-top: 20px;}

.evSection .mega_swiper {position: relative; overflow: hidden;}
.evSection .swiper-pagination {position: static; margin-top: 1%;}
.evSection .swiper-pagination-bullet-active {background: var(--color-primary);}

/* evCon1 */
.evCon1 {padding: 20px 0 0; background: #fff url(https://image.megagong.net/m/2025/0611_book/con1_bg.jpg) no-repeat; background-size: auto 100%;}
.evCon1 .sm_tit {font-weight: 400; color: #666; letter-spacing: 0.6em; margin-bottom: 84px;}
.evCon1 .md_tit.top {color: var(--color-primary);}
.evCon1 .md_tit.btm {margin-bottom: 55px;}
.evCon1 h3 {margin: 35px auto 15px;}
.evCon1 .book_slide {margin: 0 -100px;}
.evCon1 .book_slide .swiper-wrapper {align-items: flex-end; transition-timing-function: linear;}
.evCon1 .book_slide .swiper-slide {width: fit-content;}

/* evCon2 */
.evCon2 {background: #fff;}
.evCon2 .step_wrap {gap: 16px; border: 1px solid #DDD; border-radius: 20px;}
.evCon2 .step_wrap li {flex: 1; position: relative; padding: 32px 0;}
.evCon2 .step_wrap li + li::before {content: ''; position: absolute; top: calc(50% - 20px); left: -28px; width: 40px; height: 40px; background-color: #000; background-image: url(https://image.megagong.net/m/2025/0611_book/ico_con2_arr.png); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 50%;}
.evCon2 .step_wrap .num {display: inline-block; width: 112px; background: #F9982F; padding: 6.5px 0; border-radius: 20px;}
.evCon2 .step_wrap .tit {margin: 15px auto 10px;}
.evCon2 .step_wrap .ico {display: inline-block; margin-bottom: 15px;}
.evCon2 .step_wrap p {font-weight: 400; color: #666;}
.evCon2 .step_wrap li.highlight {background: #FFF; border: 1px solid #DDD; padding: 40px 0; margin: -20px -1px; border-radius: 16px;}
.evCon2 .step_wrap li.highlight.on {background: #D7E021;}
.evCon2 .step_wrap li.highlight.on .num {background: #000;}
.evCon2 .step_wrap li.highlight.on p {color: #111;}

/* evCon3 */
.evCon3 {background: #F7F3E7;}
.evCon3 .feature_slide .swiper-wrapper {gap: 20px; flex-wrap: wrap; justify-content: center;}
.evCon3 .feature_slide .swiper-slide {flex: 0 0 calc(33.333% - 13.333px); height: 292px; background: #FFF; border-radius: 24px; padding: 40px 20px;}
.evCon3 .feature_slide .ico {}
.evCon3 .feature_slide .tit {}
.evCon3 .feature_slide p {color: #555; font-weight: 400; margin-top: 15px;}

/* evCon4 */
.evCon4 {background: #fff;}
.evCon4 {}

@media screen and (max-width: 1200px){
    /* settings */
    .evSection {padding: 14% 0;}
    .evSection .mini_tit {}
    .evSection .con_tit {margin-bottom: 6%;}
    .evSection .mini_tit + .con_tit {margin-top: 2%;}

    .evSection .button-prev,
    .evSection .button-next {display: none;}
    .evSection .swiper-pagination {display: block;}

    /* evCon1 */
    .evCon1 {padding: 2% 0 0;}
    .evCon1 .book_slide {margin: 0 -4%;}
}
@media screen and (max-width: 992px){
    /* evCon1 */
    .evCon1 {background-size: 250% auto; background-position: 50% 0 !important; padding: 2% 0 0;}

    .evCon3 .feature_slide .swiper-wrapper {gap: 10px;}
    .evCon3 .feature_slide .swiper-slide {flex-basis: calc(33.333% - 6.666px);}
}
@media screen and (max-width: 768px){
    .evCon1 .sm_tit {margin-bottom: 50px;}
    .evCon1 .md_tit.btm {width: 55%; margin: 0 auto 30px;}
    .evCon1 .book_slide .swiper-slide {width: 20%;}

    .evCon2 .step_wrap {gap: 10px;}
    .evCon2 .step_wrap .ico {width: 60%; margin: 0 auto 10px;}
    .evCon2 .step_wrap li + li::before {top: calc(50% - 15px); left: -20px; width: 30px; height: 30px; background-size: 30%;}
    .evCon2 .step_wrap li.highlight {margin: -10px 0;}

    .evCon3 .feature_slide .swiper-wrapper {gap: 0; flex-wrap: nowrap; justify-content: initial;}
    .evCon3 .feature_slide .swiper-slide {flex: 1 0 100%; height: auto;}
}
@media screen and (max-width: 576px){
    .evCon1 .sm_tit {margin-bottom: 30px;}
    .evCon1 h3 {margin: 20px auto 10px;}

    .evCon2 .step_wrap {flex-direction: column; border: none;}
    .evCon2 .step_wrap li,
    .evCon2 .step_wrap li.highlight {padding: 25px 0; border: 1px solid #DDD; border-radius: 10px; margin: 0;}
    .evCon2 .step_wrap li + li::before {top: -20px; left: calc(50% - 15px); transform: rotate(90deg);}
    .evCon2 .step_wrap .num {width: 80px; padding: 4px;}
    .evCon2 .step_wrap .ico {width: 60px;}

    .evCon3 .feature_slide .swiper-slide {border-radius: 10px; padding: 20px 10px;}
}