@charset "UTF-8";
/* 24.11.22 tgkim */
/* 24.12.23 Hyeok */

.pop_layer { display:flex; flex-direction:column; width:480px; height:660px; padding:40px; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:150; box-sizing:border-box; background:#FFF; }
.pop_layer .p_txt_box { display:flex; flex-direction:column; align-items:center; text-align:center;}
.pop_layer .p_txt_box .p_txt01 { font-size:20px; font-weight:500; color:#292929; letter-spacing:-0.03em; }
.pop_layer .p_txt_box .p_txt02 { margin:40px auto 16px; font-size:28px; font-weight:500; color:#292929; letter-spacing:-0.03em; }
.pop_layer .p_txt_box .p_txt03 { font-size:16px; font-weight:300; color:#292929; letter-spacing:-0.03em; line-height:1.4; }
.pop_layer img { max-width:318px; margin:20px auto 0; object-fit:contain; }
.pop_layer .pop_ok { display:flex; justify-content:center; align-items:center; margin:20px auto 0; width:280px; height:60px; font-size:20px; font-weight:600; color:#FFF; background:#022D81; border-radius:30px; box-sizing:border-box; transition:all 0.3s; }
.pop_layer .pop_ok:hover { color:#022D81; background:#FFF; border:1px solid #022D81; transition:all 0.3s; }
.pop_bg { width:100%; height:100vh; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,60%); }

/* newkeep add CSS */
.c_sec01 .inner {
    justify-content: space-between;
}

.banner_area {
	width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    margin-top: 140px;
}

.banner_area .banner_list {
    height: 400px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 30px;
    position: relative;
}

.banner_area .banner_con {
    width: 860px;
    background: url('../../img/newkeep/guide/img_use_guide_bg.png') center no-repeat;
    background-size:cover;
}

.banner_area .banner_list.banner_con .txt01 {
    margin-bottom: 28px;
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height:1.4;
}

.banner_area .banner_list.banner_con .txt02 {
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.03em;
    line-height:1.4;
}

.banner_area .banner_list.banner_con2 {
    width: 392px;
    background:#F8F8F8 url('../../img/newkeep/guide/img_use_guide_00.png') center bottom no-repeat;
    background-size:cover;
    background-size: 317px auto;
}

.banner_area .banner_list.banner_con2 .txt01 {
    font-size: 30px;
    font-weight: 500;
    color: #121212;
    letter-spacing: -0.03em;
    line-height:1.4;
    letter-spacing: -0.03em;
}

.banner_area .banner_list.banner_con2 .naver_logo { max-width:58px; position:absolute; top:40px; right:40px; }


@media all and (max-width: 1024px) {
    .c_sec01 .inner {
        padding: 0 5%;
        box-sizing: border-box;
    }

    .banner_area {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 40px;
    }

    .banner_area .banner_list {
        width: 100%;
        height: 320px;
        margin: 0 0 30px;
        padding: 30px;
        background: url('../../img/newkeep/guide/img_use_guide_bg_mo.png') no-repeat, linear-gradient(180deg, #274FBF, #a084cb);
        background-size: 65%;
        background-position:145px bottom;
    }

    .banner_area .banner_list:after { background-size:;}

    .banner_area .banner_list.banner_con .txt01 {
        font-size: 20px;
        margin-bottom:12px;
    }

    .banner_area .banner_list.banner_con .txt02 {
        font-size: 14px;
    }

    .banner_area .banner_list.banner_con2 {
        width: 100%;
        height: 200px;
        margin:0 auto;
        background-size: 60%;
        background-position:right bottom;
    }

    .banner_area .banner_list.banner_con2 .txt01 {
        font-size: 20px;
    }

    .banner_area .banner_list.banner_con2 .naver_logo { max-width:60px; position:absolute; top:30px; right:15px; }


}

.c_sec02 .inner { padding:140px 0; align-items:center; flex-direction:column; }
.c_sec02 .inner .m_txt02 { margin:0 0 10px; line-height:1; }


.dif_system { display:flex; flex-wrap:wrap; justify-content:left; margin-top:60px; gap:26px; }
.dif_system li { width:300px; height:180px; margin:0; padding:28px; box-sizing:border-box; border-radius:20px; background:#F8F8F8; border: #ddd 1px solid; position:relative; }
.dif_system li a { display:block; width:100%; height:100%; }
.dif_system li .dif_txt01 { font-size:24px; font-weight:500; color:#383838; letter-spacing:-0.03em; }
.dif_system li img { max-width:140px; position:absolute; bottom:10px; right:10px; }

@media all and (max-width: 1024px) {
    .c_sec02 .inner { padding:70px 5%; box-sizing: border-box;}
    .m_txt01 { margin-bottom:8px; font-size:22px; line-height:1.4; }
    .m_txt02 { font-size:15px; line-height:1.4; word-break:keep-all; }
    .c_sec02 .inner { padding:70px 0; }
    .c_sec02 .inner .m_txt01 { margin-bottom:0; font-size:22px; line-height:1; }
    .c_sec02 .inner .m_txt02 { margin-bottom:8px; font-size:15px; line-height:1; }

    .dif_system { margin-top:25px; padding:0 5%; box-sizing:border-box; justify-content: center; gap:10px 20px; }
    .dif_system li { width:calc(50% - 10px); height:90px; margin:0; padding:10px; }
    .dif_system li .dif_txt01 { font-size:17px; }
    .dif_system li img { max-width:65px; bottom:0; right:0 }

    .pop_layer { justify-content:center; width:calc(100% - 30px); height:500px; margin:0 auto; }
    .pop_layer .p_txt_box .p_txt01 { font-size:16px; }
    .pop_layer .p_txt_box .p_txt02 { margin:10px auto 8px; font-size:20px; }
    .pop_layer .p_txt_box .p_txt03 { font-size:13px; }
    .pop_layer img { max-width:80%; margin:10px auto; }
    .pop_layer .pop_ok { margin:0 auto; width:calc(100% - 30px); height:60px; font-size:16px; padding: 10px 0; }

    .banner_area .n-box {
        width:100%;
    }
    .banner_area .n-box .banner_list.banner_con2 {background-size: 38%;}
}

@media all and (max-width: 768px) {
    .banner_area .n-box .banner_list.banner_con2 {background-size: 60%;}
}