@charset "utf-8";

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


/*=================== //visual 끝 ===================*/

/*=================== section style 시작 ===================*/
/*======= use_sec =======*/
.use_sec{
    padding: 83px 0 52px 0;
}

.use_sec .inner{
    display: flex;
    gap: 40px;
    justify-content: right;
    align-items: center;
    padding: 0 24px;
}

.use_slider_container{
    position: relative;
    width: 338px;
    /*height: 671px;*/
    height: 700px;
    overflow: hidden;
    padding-bottom: 40px;
}

/* swiper */
.swiper-wrapper{
    align-items: center;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0;
}
/* //swiper */

.use_img_area{
    width: 338px;
    height: 671px;
    opacity: 1;
}

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

.use_text_area{
    position: relative;
    background-color: #fff;
    width: 331px;
    height: 345px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.use_text_content{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    height: 341px;
}

.use_tx_wrap1{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.use_sec_label{
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--semantic-text-primary);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.use_sec_label .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);
}

.use_sec_label .label_text{
    color: var(--semantic-text-primary);
}

.use_sec_tit{
    font-size: 38px;
    line-height: 52px;
    font-weight: 600;
}

.use_tx_wrap2{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.use_sec_txt{
    font-size: 18px;
    line-height: 30px;
    color: var(--semantic-text-subtle);
}

.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);
}

.use_slider_pager{
    display: flex;
    gap: 12px;
    position: absolute;
    justify-content: center;
}

.mo_slide_btn{
    display: none;
}
/*======= //use_sec =======*/

/*======= section =======*/
.section{
    padding: 120px 0 140px 0;
}

.section .inner{
    display: flex;
    gap: 44px;
}

.sec_img{
    width: 418px;
    height: 306px;
    background-position: center;
    background-size: cover;
}

.section1 .sec_img{
    background-image: url("/public/assets/renewal/images/intro_img1.gif");
}

.section2 .sec_img{
    background-image: url("/public/assets/renewal/images/intro_img2.gif");
}

.section3 .sec_img{
    background-image: url("/public/assets/renewal/images/intro_img3.gif");
}

.section4 .sec_img{
    background-image: url("/public/assets/renewal/images/intro_img4.gif");
}

.section2, .section4{
    background-color: #F8F9FA;
}

.section2 .inner, .section4 .inner{
    flex-direction: row-reverse;
}
/*======= //section =======*/
/*=================== //section style 끝 ===================*/


/*=================== media query 시작 ===================*/
/*======= tab size =======*/
@media screen and (max-width: 978px){
    /* use_sec */
    .use_sec .inner{
        justify-content: center;
    }

    .use_slider_container{
        width: 50%;
        height: auto;
    }

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

    .use_sec_tit{
        font-size: 32px;
        line-height: 44px;
    }

    .use_sec_txt{
        font-size: 16px;
        line-height: 28px;
    }
    /* use_sec */

    /* section */
    .section{
        padding: 52px 0 72px 0;
    }

    .section .inner{
        flex-direction: column;
        align-items: center;
    }
    /* //section */
}
/*======= //tab size =======*/

/*======= mobile size =======*/
@media screen and (max-width: 600px){
    .visual{
        background-image: url("/public/assets/renewal/images/bg_intro_mo.png");
    }

    /* use_sec */
    .use_sec{
        padding: 38px 0;
    }

    .use_sec .inner{
        flex-direction: column-reverse;
        gap: 20px;
    }

    .use_slider_container{
        width: 100%;
        overflow: unset;
        padding-bottom: 0;
    }

    .use_slider li{
        display: flex;
        justify-content: center;
    }

    .use_img_area{
        width: 65%;
        height: auto;
    }

    .use_slider_pager{
        gap: 8px;
    }

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

    .use_text_content{
        gap: 9px;
        height: auto;
        text-align: center;
    }

    .use_sec_label{
        gap: 6px;
        justify-content: center;
        font-size: 16px;
        line-height: 24px;
    }

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

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

    .use_sec_txt{
        font-size: clamp(14px, 5vw, 16px);
        line-height: 1.4em;
        height: 64px;
        word-break: keep-all;
    }

    .slide_btn_wrap{
        display: none;
    }

    .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;
    }

    /* swiper */
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
        bottom: -20px;
    }
    /* swiper */
    /* //use_sec */

    /* section */
    .sec_img {
        width: 267px;
        height: 195px;
        width: 228px;
        height: 167px;
    }
    /* //section */

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