@charset "utf-8";

/*=================== visual 시작 ===================*/
.visual{
    background-image: url("/public/assets/renewal/images/bg_main.png");
}
/*=================== //visual 끝 ===================*/


/*=================== section style 시작 ===================*/
/*======= section2 =======*/
.section2{
    padding: 100px 0 120px 0;
}

.section2 .inner{
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.hov_card_wrap{
    display: flex;
    width: 100%;
    gap: 12px;
}

.hov_card{
    position: relative;
    flex-grow: 1;
    height: 469px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.hov_card:before{
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 55%;
    background: linear-gradient(rgba(81, 81, 81, 0%), #515151);
}

.hov_card_img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hov_card:nth-child(1) .hov_card_img{
    background-image: url("/public/assets/renewal/images/hov_card_img1.png");
}

.hov_card:nth-child(2) .hov_card_img{
    background-image: url("/public/assets/renewal/images/hov_card_img2.png");
}

.hov_card_tx_wrap{
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    z-index: 1;
    width: 100%;
    transition: all 0.5s ease;
}

.hov_card_tit{
    display: inline-block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    background-image: url("/public/assets/renewal/images/hov_card_down_icon.svg");
    background-position: right 8px center;
    background-repeat: no-repeat;
    padding: 4px 24px 4px 10px;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-bottom: 13px;
}

.hov_card.on .hov_card_tit{
    background-image: url("/public/assets/renewal/images/hov_card_up_icon.svg");
}

.hov_card_txt{
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease;
    height: auto;
    overflow: hidden;
}

.hov_card_txt2{
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    transform: translateY(100px);
    text-align: center;
    padding: 0 20px;
    transition: all 0.4s ease;
    height: 0;
    overflow: hidden;
}

.hov_card_txt2 .titi{
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.hov_card_txt2 .sub_titi_box{
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.hov_card_txt2 .sub_titi_wrap{
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 32px 36px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 12px;
}

.hov_card_txt2 .sub_titi{
    width: 100%;
    display: flex;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    justify-content: center;
}

.hov_card_txt2 .sub_titi:before{
    display: inline-block;
    content: "";
    width: 25px;
    height: 25px;
    background-image: url("/public/assets/renewal/images/icon_subtiti_chk.svg");
    background-position: left center;
    background-repeat: no-repeat;
}

.hov_card_txt2 .txtx{
    font-size: 18px;
    line-height: 28px;
}

.hov_card.on .hov_card_img{
    filter: blur(8px); /* 파이어폭스 */
    -webkit-filter: blur(8px); /* 크롬, 사파리, 오페라 */
}

.hov_card.on .hov_card_img:after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 50%);
}

.hov_card.on .hov_card_tx_wrap{
    bottom: 34px;
}

.hov_card.on .hov_card_txt{
    opacity: 0;
    transform: translateY(-100px);
    height: 0;
}

.hov_card.on .hov_card_txt2{
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.hov_card.on .hov_card_tit{
    transform: translateY(0px);
}
/*======= //section2 =======*/

/*======= section3 =======*/
.section3{
    display: flex;
    flex-direction: row;
    gap: 44px;
    padding: 160px 0;
    background-color: #F8F9FA;
}

.section3 .inner{
    display: flex;
}

.section3 .sec_tx_wrap{
    background-color: #F8F9FA;
}

.slide_area{
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    width: 368px;
}

.lottie{
    position: absolute;
    width: 160px;
    height: 160px;
    background: #fff;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
}

.lottie li img{
    width: 160px;
    height: 160px;
}

.lottie_tit{
    position: absolute;
    left: 0;
    top: 180px;
    font-size: 22px;
    line-height: 28px;
    width: 160px;
    text-align: center;
}

.rolling_wrap{
    /*padding: 0 20px;*/
}

.rolling{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.rolling li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px !important;
    height: 160px;
}

.rolling li img{
    width: 110px;
    height: 110px;
    transition: all 0.2s;
}

.rolling li.swiper-slide-active img{
    width: 135px;
    height: 135px;
    opacity: 0;
}
/*======= //section3 =======*/

/*======= section4 =======*/
.section4{
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.section4 .inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.scroll_slider_container{
    position: relative;
    flex: 1;
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
}

.scroll_slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scroll_slider .swiper-slide{
    display: flex;
    align-items: center;
    height: 100%;
    background: #fff;
}

.scroll_slider .text_area{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.section4 .sec_sub_tx{
    display: flex;
    gap: 8px;
    align-items: center;
}

.index_icon{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background-color: var(--semantic-text-primary);
}
/* 섹션4 페이지네이션 */
.section4 .swiper-pagination {
    display: flex;
    gap: 4px;
    flex-direction: column;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity .2s;
    z-index: 10;
}
html.in-section4 .section4 .swiper-pagination { opacity: 1; }

/* 섹션4 모드에서 페이지 스크롤 차단 */
html.in-section4,
html.in-section4 .content_wrap {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none;
}

/* 섹션4 화면 고정 */
html.in-section4 .section4 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}


/* 이미지 영역 고정 */
.img_area_fixed{
    position: relative;
    flex: 1;
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img_area_fixed .img_area{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26.250rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.img_area_fixed .img_area.active{
    opacity: 1;
}

.img_area_fixed .img_area img{
    width: auto;
    height: 70vh;
    max-height: 680px;
}

.img_area_fixed .img_area img.sec4_img3_obj{
    width: 160px;
    height: auto;
    position: absolute;
    top: 20%;
    right: 0;
}

.slide_btn_wrap{
    display: flex;
    gap: 20px;
    align-items: center;
}
.slide_btn{
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    background-repeat: no-repeat;
    transition: all 0.4s;
}
.slide_btn.slide_btnL{
    color: var(--semantic-text-muted);
    background-image: url("/public/assets/renewal/images/slide_chevron_left_disabled.svg");
    background-position: left center;
    padding-left: 20px;
}
.slide_btn.slide_btnR{
    padding: 9px 29px 9px 16px;
    border-radius: 50px;
    color: #fff;
    background-color: var(--semantic-button-primary-fill);
    background-image: url("/public/assets/renewal/images/slide_chevron_right.svg");
    background-position: right 9px center;
    cursor: pointer;
}

.slide_btn.slide_btnL.on{
    color: var(--semantic-text-primary);
    background-image: url("/public/assets/renewal/images/slide_chevron_left.svg");
    cursor: pointer;
}

.slide_btn.slide_btnR.on{
    background-color: var(--semantic-button-primary-fill-pressed);
}

.mo_slide_btn{
    display: none;
}


/*======= //section4 =======*/

/*======= section5 =======*/
.section5{
    position: relative;
}

.sec5_img{
    position: relative;
    width: 100%;
    height: auto;
}

.section5 h2{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    line-height: 64px;
    text-align: center;
    color: #fff;
}
/*======= //section5 =======*/

/*======= section6 =======*/
.section6{
    padding: 116px 0 120px 0;
}

.section6 .inner{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.sec6_box_wrap{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sec6_box{
    display: flex;
    gap: 44px;
    justify-content: space-between;
}

.sec6_tx_box{
    flex-grow: 1;
    flex-basis: 414px;
}

.sec6_tx_box .num{
    width: 36px;
    height: 36px;
    background-color: #E2EEFF;
    color: var(--semantic-text-primary);
    margin-bottom: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
}

.sec6_tx_box .tit{
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    margin-bottom: 10px;
}

.sec6_tx_box .txt{
    font-size: 18px;
    line-height: 32px;
    color: var(--semantic-text-subtle);
}

.sec6_tx_box .go_edu{
    margin-top: 10px;
}

.sec6_img_box{
    flex-grow: 1;
    flex-basis: 414px;
    height: 282px;
}

.sec6_img_box img{
    width: 100%;
    height: auto;
}

.sec6_img_box .img_pc{
    display: block;
}

.sec6_img_box .img_tab{
    display: none;
}

.sec6_img_box .img_mo{
    display: none;
}

/*======= //section6 =======*/

/*======= section7 =======*/
.sec7_img{
    position: relative;
    width: 100%;
    height: 535px;
    background-image: url("/public/assets/renewal/images/sec7_img.png");
    background-size: cover;
    background-position: center;
}

.sec7_tx_area{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 55px;
    width: 89%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sec7_txt{
    font-size: 22px;
    line-height: 32px;
    color: #fff;
    margin-bottom: 12px;
}

.sec7_tit{
    font-size: 34px;
    line-height: 48px;
    font-weight: 600;
    color: #fff;
}

.apply_btn{
    width: 194px;
    padding: 0 20px 0 28px;
}
/*======= //section7 =======*/
/*=================== //section style 끝 ===================*/


/*=================== media query 시작 ===================*/
/*======= tab size =======*/
@media screen and (max-width: 978px){

    /* section2 */
    .hov_card_wrap{
        flex-wrap: wrap;
    }

    .hov_card{
        width: 100%;
        height: 48vw;
        min-height: 250px;
    }

    .hov_card:nth-child(1) .hov_card_img{
        background-position: top 20% center;
    }

    .hov_card:nth-child(2) .hov_card_img{
        background-position: top 40% center;
    }

    .hov_card.on .hov_card_tx_wrap{
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .hov_card.on .hov_card_txt2{
        gap: 8px;
    }

    .hov_card_txt2 .titi{
        font-size: 18px;
        line-height: 1.4em;
    }

    .hov_card_txt2 .txtx{
        font-size: 16px;
        line-height: 1.4em;
    }

    .hov_card_txt2 .sub_titi_wrap{
        gap: 12px;
        padding: 20px;
    }

    .hov_card_txt2 .sub_titi_box{
        gap: 12px;
    }

    .hov_card_txt2 .sub_titi{
        font-size: 16px;
        line-height: 1.4em;
    }

    .section2{
        padding: 58px 0 78px 0;
    }

    /* section3 */
    .section3{
        padding: 58px 0 108px 0;
    }

    .section3 .inner{
        flex-direction: column;
        gap: 75px;
        padding-bottom: 200px;
    }

    .slide_area{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-80px);
    }

    /* section4 */
    .section4{
        padding: 64px 0 50px 0;
    }

    .section4 .inner{
        flex-direction: column-reverse;
        gap: 0;
        justify-content: space-around;
    }

    .scroll_slider_container{
        max-width: 100%;
        flex: none;
        /*height: 240px;*/
        height: auto;
        order: 2;
        overflow: hidden;
    }

    .scroll_slider_container:before{
        display: none;
        /*display: block;*/
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 5%;
        background-image: linear-gradient(to top, rgba(255,255,255,0), white);
        z-index: 2;
    }

    .scroll_slider_container:after{
        display: none;
        /*display: block;*/
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 5%;
        background-image: linear-gradient(to bottom, rgba(255,255,255,0), white);
        z-index: 2;
    }

    .img_area_fixed{
        max-width: unset;
        width: 100%;
    }

    .scroll_slider .text_area{
        gap: 8px;
        align-items: center;
    }

    .img_area_fixed .img_area{
        top: auto;
        left: auto;
        transform: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        opacity: 0;
        transition: opacity .45s ease;
        will-change: opacity;
        text-align: center;
    }
    .img_area_fixed .img_area.active{
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    .img_area_fixed .img_area img{
        height: 50vh;
    }

    .img_area_fixed .img_area img.sec4_img3_obj{
        width: 130px;
    }

    .section4 .swiper-pagination{
        display: none;
    }

    /* section5 */
    .section5 h2{
        /*font-size: 40px;*/
        font-size: clamp(24px, 5vw, 34px);
        line-height: 1.4em;
    }

    /* section6 */
    .section6{
        padding: 78px 0;
    }

    .sec6_box_wrap{
        gap: 52px;
    }
    .sec6_box{
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 16px;
    }

    .sec6_tx_box{
        flex-basis: auto;
    }

    .sec6_tx_box .num{
        display: inline-block;
        margin-bottom: 14px;
        margin-right: 10px;
    }

    .sec6_tx_box .tit{
        display: inline-block;
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 0;
    }

    .sec6_tx_box .txt{
        font-size: 16px;
        line-height: 20px;
    }

    .sec6_tx_box .go_edu{
        margin-top: 14px;
    }

    .sec6_img_box{
        /*flex-basis: 414px;*/
        display: flex;
        justify-content: center;
        width: 100%;
        height: 447px;
        background-color: #F8F9FA;
        border-radius: 24px;
        overflow: hidden;
    }

    .sec6_img_box img {
        width: auto;
        height: 100%;
    }

    .sec6_img_box .img_pc{
        display: none;
    }

    .sec6_img_box .img_tab{
        display: block;
    }

    .sec6_img_box .img_mo{
        display: none;
    }

    /* section7 */
    .sec7_img{
        border-radius: 24px;
        overflow: hidden;
    }

    .sec7_tit{
        font-size: clamp(24px, 5vw, 34px);
        line-height: 1.4em;
    }
}
/*======= //tab size =======*/

/*======= mobile size =======*/
@media screen and (max-width: 640px){
    /* visual */
    .visual.main{
        height: calc(100vh - 64px);
        background-image: url("/public/assets/renewal/images/bg_main_mo.png");
    }

    /* section2 */
    .hov_card {
        cursor: pointer;
        transition: none;
    }

    .hov_card:hover {
        transform: none;
    }

    .hov_card_tit{
        font-size: 14px;
        line-height: 20px;
    }

    .hov_card_txt{
        font-size: 18px;
        line-height: 1.4em;
    }

    .hov_card_txt2 {
        display: none;
    }

    .hov_card.on .hov_card_img:after {
        display: none;
    }

    .hov_card.on .hov_card_img{
        filter: none;
        -webkit-filter: none;
    }
    /* //section2 */

    /* section3 */
    .lottie_tit{
        font-size: 18px;
        line-height: 24px;
    }

    /* //section3 */

    /* section4 */
    .section4 .inner{
        gap: 3%;
    }

    .scroll_slider_container{
        height: auto;
    }

    .scroll_slider .text_area{
        gap: 8px;
    }

    .img_area_fixed .img_area{
        width: 100%;
    }

    .img_area_fixed .img_area img.sec4_img3_obj{
        max-width: 130px;
        width: 40%;
        height: auto;
        position: absolute;
        top: 15%;
        right: 5%;
    }

    .slide_btn_wrap{
        display: none;
    }

    .section4 .swiper-pagination{
        display: flex;
        flex-direction: row;
        right: auto;
        top: auto;
        transform: translatex(-50%);
        bottom: -16px;
        left: 50%;
    }

    .mo_slide_btn{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 48px;
        height: 48px;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 3;
        cursor: pointer;
    }

    .mo_slide_btnL{
        background-image: url("/public/assets/renewal/images/mo_slide_btn_left_disabled.svg");
        left: 0;
    }

    .mo_slide_btnL.on{
        background-image: url("/public/assets/renewal/images/mo_slide_btn_left.svg");
    }

    .mo_slide_btnR{
        background-image: url("/public/assets/renewal/images/mo_slide_btn_right.svg");
        right: 0;
    }

    .section4 .sec_sub_tx{
        gap: 4px;
    }

    .index_icon{
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }

    /* //section4 */

    /* section5 */
    .section5{
        height: 24vh;
        display: flex;
        justify-content: center;
    }

    .section5 h2{
        font-size: clamp(24px, 5vw, 28px);
        line-height: 1.6em;
    }

    .sec5_img{
        width: auto;
        height: 100%;
    }

    /* section6 */
    .sec6_box_wrap{
        gap: 44px;
    }

    .sec6_box{
        gap: 18px;
    }

    .sec6_tx_box .num{
        width: 32px;
        height: 32px;
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 10px;
        margin-right: 6px;
    }

    .sec6_tx_box .tit{
        font-size: 20px;
        line-height: 28px;
    }

    .sec6_tx_box .txt{
        line-height: 26px;
    }

    .sec6_tx_box .go_edu{
        width: 100%;
    }

    .sec6_img_box .img_pc{
        display: none;
    }

    .sec6_img_box .img_tab{
        display: none;
    }

    .sec6_img_box .img_mo{
        display: block;
    }
    /* //section6 */

    /* section7 */
    .section7 .inner{
        padding: 0;
    }

    .sec7_img{
        height: 34vh;
        border-radius: 0;
    }

    .sec7_img:before{
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
        height: 100%;
    }

    .sec7_tx_area{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .sec7_tit{
        font-size: 20px;
        line-height: 28px;
    }

    .sec7_txt{
        font-size: 16px;
        line-height: 20px;
    }

}
/*======= //mobile size =======*/
/*=================== //media query 끝 ===================*/