@charset "UTF-8";
/* 24.11.22 tgkim */
/* newkeep add CSS */
.c_sec01 .inner {
    padding:140px 0;
    justify-content:space-between;
    flex-wrap:wrap;
}
.banner_area {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    width:100%;
}
.banner_area .banner_list {
    margin:0;
    padding:60px;
    box-sizing:border-box;
    border-radius:30px;
    overflow:hidden;
    position:relative;
}
.banner_area .banner_con {
    width:640px;
    height:800px;
    background:url('../../img/newkeep/story/img_content_story_001.png') no-repeat center;
    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 {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:20px;
    width:620px;
    height:800px;
    padding:0;
}
.banner_area .banner_list .naver_con {
    width:100%;
    height:400px;
    padding:60px;
    background:#F8F8F8 url('../../img/newkeep/story/img_content_story_002.png') no-repeat;
    background-size:310px;
    background-position:260px 180px;
    border-radius:30px;
    box-sizing:border-box;
    overflow:hidden;
}
.banner_area .banner_list.banner_con2 .txt01 {
    margin-bottom:28px;
    font-size:30px;
    color:#121212;
    letter-spacing:-0.03em;
    line-height:1.4;
}
.banner_area .banner_list.banner_con2 .txt02 {
    font-size:20px;
    color:#121212;
    letter-spacing:-0.03em;
    line-height:1.4;
}
.banner_area .banner_list .banner_con3 {
    display:flex;
    justify-content:space-between;
    gap:20px;
    width:100%;
    height:380px;
    padding:0;
}
.banner_area .banner_list .premier_con {
    width:100%;
    background:url('../../img/newkeep/story/img_content_story_003.png') no-repeat center;
    background-size:contain;
    padding:30px;
    box-sizing:border-box;
    border-radius:30px;
}
.banner_area .banner_list .ai_con {
    display:flex;
    width:100%;
    padding:30px;
    background:url('../../img/newkeep/story/img_content_story_004.png') no-repeat center;
    background-size:contain;
    box-sizing:border-box;
    border-radius:30px;
}
.banner_area .banner_list .ai_con p { margin:0; font-size:20px; font-weight:500; color:#FFF; letter-spacing:-0.03em; line-height:1.4; }
@media all and (max-width:1024px) {
    .c_sec01 .inner {
        padding:0 5% 70px;
        box-sizing:border-box;
    }
    .banner_area {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin-top:20px;
    }
    .banner_area .banner_list {
        width:100%;
        padding:35px 30px;
    }
    .banner_area .banner_con {
        height:365px;
    }
    .banner_area .banner_list.banner_con .txt01 {
        margin-bottom:12px;
        font-size:20px;
    }
    .banner_area .banner_list.banner_con .txt02 {
        font-size:17px;
    }
    .banner_area .banner_list.banner_con2 {
        width:100%;
        height:auto;
    }
    .banner_area .banner_list.banner_con2 .txt01 {
        font-size:20px;
        margin-bottom:12px;
    }
    .banner_area .banner_list.banner_con2 .txt02 {
        font-size:17px;
    }
    .banner_area .banner_list .naver_con {
        height:225px;
        padding:35px 30px;
        background-size:127px;
        background-position:90% 90%;
    }
    .banner_area .banner_list .banner_con3 {
        height:auto;
        gap:10px;
    }
    .banner_area .banner_list .premier_con {
        width:100%;
        height:225px;
        border-radius:25px;
        padding:10px 15px;
        background-size:100% 100%;
    }
    .banner_area .banner_list .ai_con {
        width:100%;
        height:225px;
        border-radius:25px;
        padding:10px 15px;
        background-size:100% 100%;
    }
    .banner_area .banner_list .ai_con p { font-size:17px; }
    .banner_area .banner_list .ai_con p .mo_space { display:block; }
}
ul.story_lst {
    display:flex;
    justify-content:flex-start;
    gap: 40px;
    flex-wrap:wrap;
    width:100%;
    padding:0;
    box-sizing:border-box;
}
ul.story_lst.swiper_lst {
    flex-wrap:nowrap;
}
ul.story_lst li {
    width:calc((100% - 80px) / 3);
}
ul.story_lst li a {
    display:block;
    width:100%;
}
ul.story_lst li a .img_area {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:360px;
    background:#F8F8F8;
    border-radius:20px;
    overflow:hidden;
}
ul.story_lst li a img {
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:10px;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
}
ul.story_lst li a p.cate {
    margin-top:20px;
    font-size:16px;
    font-weight:500;
    color:#3BA3FD;
    letter-spacing:-0.01em;
}
ul.story_lst li a p.tit {
    width:100%;
    margin-top:20px;
    font-size:30px;
    font-weight:500;
    color:#121212;
    letter-spacing:-0.9px;
    overflow:hidden;
    text-align:left;
    word-break:keep-all;
    line-height:1.4;
    opacity:1;
}
.story_lst_more_btn {
    margin:0 auto;
    text-align:center;
}
.c_sec02 .inner { flex-direction:column; position:relative; }
.c_sec02 .stitle { font-size:50px; font-weight:500; letter-spacing:-0.03em; }

@media all and (max-width:1024px) {
    .c_sec02 .inner {
        padding:70px 5%;
        box-sizing:border-box;
    }
    ul.story_lst li {
        width:100%;
        margin-bottom:45px;
    }
    ul.story_lst li a img {
        height:auto;
    }
    ul.story_lst li a p.tit {
        font-size:14px;
    }
    ul.story_lst li a p.txt {
        margin-top:5px;
        font-size:12px;
    }
    .story_lst_more_btn img {
        width:50%;
    }
    .c_sec02 .stitle {
        font-size:22px;
        margin-bottom:30px;
    }
    ul.story_lst li a .img_area {
        display:flex;
        justify-content:center;
        align-items:center;
        height:260px;
        overflow:hidden;
    }
    ul.story_lst li a .img_area img {
        width:100%;
        object-fit:contain;
    }
}
/* detail */
.cont_bg { max-width:1280px; margin:50px auto 140px; padding:60px; background:#F8F8F8; border-radius:60px; box-sizing:border-box; }
.news_txt01 { font-size:30px; color:#3BA3FD; }
.news_txt02 { margin:16px 0; font-size:44px; font-weight:500; }
.news_txt03 { font-size:30px; font-weight:300; }
.news_txt04 { font-size:20px; color:#9BA7B9; }
.n_sec03 .inner { padding:0 0 40px; box-sizing:border-box; border-bottom:2px solid #DADEE3; flex-direction:column; }
.n_sec04 .inner { max-width:980px; padding:100px 0 140px; box-sizing:border-box; flex-direction:column; }
.n_sec04 .inner .news_content { min-height:300px; height:auto; overflow-x:hidden; overflow-y:hidden; }
.n_sec04 .inner .news_content img { max-width:100%; width:auto; object-fit:contain; margin-bottom:30px; }
.recruit_more_btn { display:flex; justify-content:center; align-items:center; width:160px; height:52px; margin:120px auto 0; box-sizing:border-box; border:1px solid #121212; border-radius:26px; font-size:16px; color:#121212; text-align:center; transition:all 0.3s; }
.recruit_more_btn:hover { color:#FFF; background:#121212; transition:all 0.3s; }
.swiper_news { width:100%; margin:0 auto 50px; padding:100px 0 20px; box-sizing:border-box; }
.swiper_news .swiper-slide { width:auto; box-sizing:border-box; }
.swiper_news .swiper-pagination-fraction,
.swiper_news .swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper_news .swiper-pagination-bullets.swiper-pagination-horizontal { bottom:0; }
.swiper_news .swiper-pagination-bullet { background:#DADEE3; opacity:1; }
.swiper_news .swiper-pagination-bullet-active { background:#022D81 !important; }
.swiper-button-prev, .swiper-button-next { width:53px; height:53px; margin-top:0; top:0; left:auto; right:0; background:#FFF; border-radius:50%; }
.swiper-button-prev img, .swiper-button-next img { width:100%; object-fit:contain; }
.swiper-button-prev { right:65px; }

/* 신규 뉴스레터 li 레이아웃 */
li.new_list a { display:flex; flex-direction:column; overflow:hidden; }
li.new_list .sum_box { display:flex; flex-direction:column; gap:20px; width:100%; max-width:360px; aspect-ratio:1/1; padding:30px; box-sizing:border-box; border-radius:10px; overflow:hidden; position:relative; }
li.new_list .sum_box .cate_txt { display:flex; justify-content:flex-start; align-items:center; width:fit-content; padding:8px 15px; font-size:18px; font-weight:500; color:#FFF; box-sizing:border-box; text-align:center; }
li.new_list .sum_box .sum_txt { font-size:30px; font-weight:400; color:#222; line-height:1.4; }
li.new_list .sum_box .sum_txt span { font-weight:500; color:#222; }
li.new_list .sum_box .icons { max-width:125px; height:auto; object-fit:contain; position:absolute; bottom:20px; right:20px; z-index:0; }
li.new_list .sum_box.center { justify-content:center; align-items:center; }

@media all and (max-width:1024px) {
    .cont_bg { max-width:90%; margin:25px auto; padding:30px 5% !important; border-radius:30px; }
    .n_sec03 .inner { margin:0 auto; padding:35px 0; border-bottom:1px solid #DADEE3; box-sizing:border-box; }
    .n_sec04 .inner { padding:25px 0; box-sizing:border-box; }
    .n_sec01 .inner { padding:50px 5%; }
    .news_txt01 { font-size:15px; font-weight:300; }
    .news_txt02 { margin:8px 0; font-size:22px; }
    .news_txt03 { font-size:15px; }
    .news_txt04 { font-size:12px; }
    .n_sec02 .cate_lst { margin:0 auto 20px; padding-bottom:10px; }
    .n_sec02 .cate_lst li { margin-right:20px; font-size:13px; }
    .n_sec02 .cate_lst li span { margin-left:5px; padding:2px 9px; font-size:13px; }

    ul.news_lst { gap:0 15px; padding:0; }
    ul.news_lst li { width:calc((100% - 15px)/2); margin-bottom:30px; }
    ul.news_lst li a img { height:auto; }
    ul.news_lst li a p.cate { margin-top:15px; font-size:12px; }
    ul.news_lst li a p.tit { margin-top:7px; font-size:14px; }
    ul.news_lst li a p.txt { margin-top:5px; font-size:12px; }
    ul.news_lst li a p.date { margin-top:5px; font-size:10px; }

    .none_cont { margin:80px auto; text-align:center; }
    .none_cont p { font-size:20px; }


    .n_sec03 .inner { margin:0 auto; padding:35px 0; border-bottom:1px solid #DADEE3; box-sizing:border-box; }
    .n_sec04 .inner { padding:25px 0; box-sizing:border-box; }

    .recruit_more_btn { width:100%; margin:35px auto 0; }
    .news_more_btn img { width:50%; }

    ul.story_lst li a .img_area { display:flex; justify-content:center; align-items:center; max-width:250px; height:200px; margin:0 auto; overflow:hidden; }
    ul.story_lst li a img { width:100%; height:auto; object-fit:contain; }
    ul.story_lst li a p.cate { margin-top:10px; font-size:15px; }
    ul.story_lst li a p.tit { max-width:250px; margin:10px auto 0; font-size:15px; word-break:keep-all; line-height:1.4; }

    li.new_list .sum_box.center { justify-content:center; align-items:center; }
    li.new_list .sum_box { gap:10px; padding:15px; }
    li.new_list .sum_box .cate_txt { padding:4px 7px; font-size:12px; }
    li.new_list .sum_box .sum_txt { font-size:15px; line-height:1.4; }
    li.new_list .sum_box .icons { max-width:50px; bottom:10px; right:10px; }
    li.new_list .sum_box .sum_txt.detail { font-size:18px; line-height:1.4; }

    .c_sec02 .inner { padding:0 5% 35px; box-sizing:border-box; }
    .c_sec02 .stitle { margin:35px auto 0; font-size:22px; text-align:center; }
    .c_sec02 .m_margin { margin-bottom:35px; }
    .swiper_news { width:calc(100% - 125px); margin: 80px auto 0; padding:0; }
    .swiper_news .swiper-slide-active,
    .swiper_news .swiper-slide-next { opacity: 1; transition: all 0.3s;}
    .swiper_news .swiper-slide .img_box { height: auto;}
    .swiper_news .swiper-slide .news_txt01 { margin-top: 12px; font-size: 10px;}
    .swiper_news .swiper-slide .news_txt02 { margin-top: 7px; font-size: 14px;}
    .swiper_news .swiper-slide .news_txt03 { margin-top: 5px; font-size: 12px;}
    .swiper_news .swiper-slide .news_txt04 { margin-top: 5px; font-size: 10px;}
    .swiper-button-prev, .swiper-button-next { width:30px; height:30px; margin-top:0; top:calc(50% - 15px); left:auto; right:auto; }
    .swiper-button-prev { left:5%; right:auto; }
    .swiper-button-next { right:5%; }
}