@charset "UTF-8";

.container {position: relative;padding-top: 65px;}

.container .main-visual .inner {padding: 110px 0 60px 0;}

.container .bg {position:absolute;top:0;left:0;background:#000;width: 100%;height: 100%;opacity: .4;}

.container .main-visual {
    background: url('../images_2022/bg_pc.png') no-repeat center center;
    background-size: cover;
}

.container .main-visual .inner .contents .cont {
    display: flex;
    flex-direction: row;
}

.container .main-visual .inner .contents {
    margin: 0 auto;
}

/* 왼쪽 컨텐츠 */

.cont .left {
    flex: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* 서치 영역 */
.container .main-visual .search-wrap .searchbox {
    position: relative; width: 82%; height: 60px;overflow: hidden;border-radius: 50px;}
.container .main-visual .search-wrap .searchbox input#searchInput {width: 100%;height: 100%;border: 0;color: #333; background: white;line-height: 60px;outline: 0;text-indent: 25px;font-size: 17px;}
.container .main-visual .search-wrap .searchbox button#schBtn {position:absolute;top: 2px;right: 5px;text-indent:-9999px;overflow:hidden;background: url(../images_2022/icon_search.png) no-repeat center;border-radius: 50px;width: 58px;height: 58px;background-size: 25px;}


/* 키워드 영역 */
.container .main-visual .search-wrap .keywords {margin-top: 15px; display: flex; flex-direction: row; text-align: center;}
.container .main-visual .search-wrap .keywords span.title {font-size: 14px; color: #fff; padding: 0 15px 0 20px; display: block;}
.container .main-visual .search-wrap .keywords a {font-size: 14px;color:#fff;margin: 0 7px; display: block;}
.container .main-visual .search-wrap .keywords .key-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* 메인 타이틀 영역 */
.container .main-visual .main-title {
    font-size:74px;color:#fff;font-weight:600;transition:all 0.5s;line-height: 1.1; letter-spacing: -6px;  

}
.container .main-visual .main-sub-title {
    font-size: 23px;
    color: #fff;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -2px;
}

/* 오른쪽 컨텐츠 */

.cont .right {
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: row;
}

/* 컨텐츠 영역 */
.cont .right .content-box {
    width: 30%;
    height: 230px;
    margin-bottom: 15px;
    border-radius: 10px;
    opacity: .8;
    text-align: center; 
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.cont .right .content-box a.con-link {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.cont .right .content-box.con01 {
    background: #1bc09b;
}

.cont .right .content-box.con05 {
    background: #377bbb;
}

.cont .right .content-box.con02 {
    background: #ff9c00;
}

.cont .right .content-box.con03 {
    background: #f3553c;
}

/* 공지사항 con04 */
.cont .right .content-box.con04 {
    position: relative;
    width: 95%;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.cont .right .content-box.con04 .wrap04 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 25px 20px;
}

.cont .right .content-box .con-icon {
    width: 65px;
    height: 65px;
    display: inline-block;
    text-align: center;
}

.cont .right .content-box.con01 .con-icon {
    background: url('../images_2022/icon_apply.png') no-repeat;
    background-size: 65px;
}
.cont .right .content-box.con05 .con-icon {
    background: url('../images_2022/icon_apply_l.png') no-repeat;
    background-size: 65px;
}
.cont .right .content-box.con02 .con-icon {
    background: url('../images_2022/icon_online_apply.png') no-repeat;
    background-size: 65px;
}
.cont .right .content-box.con03 .con-icon {
    background: url('../images_2022/icon_case.png') no-repeat;
    background-size: 65px;
}

.cont .right .content-box span.tit{text-align:center;display:block;color: #fff;font-size: 20px;font-weight: 600;line-height: 1.2;height: 48px;display: flex;align-items: center;letter-spacing: -2px;}
.cont .right .content-box.con04 span.tit {text-align:center; display:block;color: #000;padding-top: 0;text-align:left;height: auto;}
.cont .right .content-box.con04 ul {margin-top: 15px;}
.cont .right .content-box.con04 ul li {margin-bottom: 15px;font-weight:600;}
.cont .right .content-box.con04 ul li a {display:block;}
.cont .right .content-box.con04 ul li span.dot {margin-right: 7px;}
.cont .right .content-box.con04 ul li span.list-tit {color: #333;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;letter-spacing: -1px;}
.cont .right .content-box.con04 ul li span.list-con {display:block;color:#666;font-size:13px;font-weight:500;padding: 7px 15px 0px;height:3.6em;line-height: 1.2em;text-overflow: ellipsis;overflow: hidden;letter-spacing: -1px;}
.cont .right .content-box.con04 a.notice-link {position:absolute;top: 25px;right: 20px;text-indent: -9999px;background: url('../images_2022/icon_more.png') no-repeat center;background-size: 100%;width:20px;height:20px;}

.cont .right .content-box span.togo {
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 18px;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    letter-spacing: -2px;
}

/* 전화상담 */
.content-box-last {
    position: relative;
    margin-top: 30px;
    background: #444;
    opacity: .8;
    border-radius: 10px;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
}

/* 전화상담 왼쪽 아이템 */
.content-box-last .tel-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: center;
    position: relative;
}

.content-box-last .tel-left::after {
    position: absolute;
    width: 1px;
    height: 40px;
    background: #acacab;
    content: "";
    z-index: 123;
    right: 0;
    top: 0;
}

.content-box-last .con-icon{
    display: inline-block;
    background: url('../images_2022/icon_phone.png') no-repeat;
    background-size: 38px;
    vertical-align: middle;
    width: 38px;
    height: 38px;
    flex-shrink: 1;
}

.content-box-last .tit {
    display: inline-block;
    color: #fff; 
    font-size: 20px;
    font-weight: 600;
    margin-left: 20px;
    flex-shrink: 1;
}

/* 전화상담 오른쪽 아이템 */
.content-box-last .txt {
    display: flex;
    flex-direction: row;
    flex: 2;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
}

.content-box-last .txt .ns {
    color: #ff9c00;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    flex: 0.8;
    align-self: center;
    padding-bottom: 3px;
    text-align: center;
    margin: 0 auto;
}

.content-box-last .txt .telinfo {
    flex: 2;
    line-height: 1.5;
    padding: 0 15px;
}

.content-box-last .txt .telinfo br {
    display: none;
}

.content-box-last .bar {
    display: none;
}




/* 미디어쿼리 */

@media screen and (max-width: 1200px)  {
    .container { padding-top: 150px; }
    .container .main-visual .inner { padding: 65px 0 180px 0; }

    .cont .left { justify-content: center; margin-left: 20px;}
    .container .main-visual .main-title { font-size: 60px; }
    .container .main-visual .main-sub-title { font-size: 20px; margin: 30px 0; }

    .content-box-last { width: 95%; margin: 30px auto 0;}
    .content-box-last .txt .ns { font-size: 26px; }

}

/* 태블릿 가로 */
@media screen and (max-width: 992px)  {
    .container { padding-top: 70px; }
    .container .main-visual .main-title { font-size: 55px; }
    .container .main-visual .search-wrap .keywords span.title { padding: 0 5px 0 10px; }
    .container .main-visual .search-wrap .keywords a { margin: 0 7px 10px; }

    .content-box-last .tit { font-size: 18px; }
    .content-box-last .con-icon { width: 35px; height: 35px; background-size: 35px; }
    .content-box-last .txt { margin: 0 30px; }
    .content-box-last .txt .ns {display: block; margin: 0; font-size: 24px; }
}

@media screen and (max-width: 850px)  {
    .container .main-visual {
        background: url('../images_2022/bg_tablet.png') no-repeat center center;
        background-size: cover;
    }
    .container .main-visual .inner { padding: 40px 0 30px; }
    .container .main-visual .inner .contents .cont {flex-direction: column;}

    .cont .left {flex-direction: column-reverse; margin-left: 0;}

    .container .main-visual .main-title { font-size: 50px; letter-spacing: -4px; margin: 60px 0; text-align: center;}
    .container .main-visual .main-sub-title { display: none;}

    .container .main-visual .search-wrap .searchbox { height: 50px; width: 80%; margin: 0 auto;}
    .container .main-visual .search-wrap .searchbox input#searchInput { font-size: 15px; }
    .container .main-visual .search-wrap .searchbox button#schBtn {
        width: 50px;
        height: 50px;
        background-size: 23px;
        top: 0;
    }
    .container .main-visual .search-wrap .keywords {justify-content: center;}
    .container .main-visual .search-wrap .keywords span.title { padding: 0 5px 0 30px; }
    .container .main-visual .search-wrap .keywords a { margin: 0 7px; }

    .content-box-last { width: 95%; margin: 30px auto 0;}
    .content-box-last .tit { font-size: 18px; margin: 0 20px; }
    .content-box-last .txt .ns {font-size: 22px; }
}

@media screen and (max-width: 720px)  {
    .container .main-visual .inner { padding: 30px 0 20px 0; }

    .container .main-visual .main-title { font-size: 45px; }

    .content-box-last { 
        height: auto;
        flex-direction: column;
        padding: 25px 0;
    }

    .content-box-last .tel-left::after { content: none; }

    .content-box-last .con-icon {
        background-size: 30px;
        width: 30px;
        height: 30px;
        margin-right: -10px;
    }
    .content-box-last .txt { flex-direction: column; text-align: center; align-items: center;}
    .content-box-last .txt .ns {margin: 15px;}
    .content-box-last .txt .telinfo { padding: 0; }
    .content-box-last .txt .telinfo br { display: block; }
}

/* 모바일 가로, 태블릿 */
@media screen and (max-width: 640px)  {
    .container .main-visual .search-wrap .keywords span.title { font-size: 13px; }
    .container .main-visual .search-wrap .keywords a { font-size: 13px; }
    .cont .right .content-box.con04 ul li span.list-tit { font-size: 13px; }
    .cont .right .content-box.con04 ul li span.list-con { font-size: 11px; }
}

@media screen and (max-width: 550px)  {
    .container .main-visual .inner { padding: 30px 0; }
}

/* 모바일 */
@media screen and (max-width: 480px)  { 
    .container .main-visual .inner { padding: 30px 0 0; }

    .container .main-visual {
        background: url('../images_2022/bg_mobile.png') no-repeat center center;
        background-size: cover;
    }
    
    .container .main-visual .main-title { font-size: 35px; text-align: center; margin: 60px 0; letter-spacing: -2px;}
    .container .main-visual .main-sub-title { display: none; }

    .container .main-visual .search-wrap .searchbox {
        width: 90%;
        margin: 0 auto;
        height: 40px;
    }
    .container .main-visual .search-wrap .searchbox input#searchInput {font-size: 14px;}
    .container .main-visual .search-wrap .searchbox button#schBtn {
        width: 40px;
        height: 40px;
        right: 0;
        background-size: 20px;
    }
    .container .main-visual .search-wrap .keywords span.title {font-size: 12px; padding: 0 5px;}
    .container .main-visual .search-wrap .keywords a {font-size: 12px;}

    .cont .right { flex-direction: column;}
    .cont .right .content-box {
        width: 100%;
        height: auto;
        border-radius: 0;
        justify-content: unset;
        flex-direction: column;
        margin-bottom: 7px;
    }
    .cont .right .content-box span.tit br {display: none;}
    .cont .right .content-box.con04 { width: 100%; border-radius: 0;}
    .cont .right .content-box.con04 .wrap04 { padding: 20px 15px 10px; width: calc(100% - 30px);}
    .cont .right .content-box.con04 a.notice-link {top: 20px; right: 15px;}
    .cont .right .content-box a.con-link {
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 20px;
    }
    .cont .right .content-box .con-icon {width: 50px; height: 50px;}
    .cont .right .content-box.con01 .con-icon, .cont .right .content-box.con05 .con-icon,
    .cont .right .content-box.con02 .con-icon, .cont .right .content-box.con03 .con-icon  {background-size: 50px;}
    .cont .right .content-box span.togo { padding: 5px 15px; font-size: 14px;}

    .cont .right .content-box.con04 ul li span.list-tit { font-size: 12px; font-weight: normal;}
    .cont .right .content-box.con04 ul li span.list-con { display: none; }

    .content-box-last { 
        width: 100%;
        border-radius: 0;
        margin-top: 0;
    }
    .content-box-last .txt { font-size: 12px; }
    .content-box-last .txt .ns {font-size: 20px;}
    .content-box-last .tit { font-size: 18px; }
}

@media screen and (max-width: 360px)  {
    .container .main-visual .main-title {font-size: 32px; margin: 40px 0 50px;}

    .container .main-visual .search-wrap .keywords {
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
    }
    .container .main-visual .search-wrap .keywords .key-wrap { 
        width: 75%;
        flex: 1 1 auto;
        margin: -5px;
    }
    .container .main-visual .search-wrap .keywords span.title { padding: 0; width: 25%;}
    .container .main-visual .search-wrap .keywords a { margin: 5px;}

    .cont .right .content-box span.tit { font-size: 16px; }
    .cont .right .content-box span.togo { font-size: 12px; padding: 5px 10px; }

    .cont .right .content-box .con-icon {width: 40px; height: 40px;}
    .cont .right .content-box.con01 .con-icon, .cont .right .content-box.con05 .con-icon,
    .cont .right .content-box.con02 .con-icon, .cont .right .content-box.con03 .con-icon  {background-size: 40px;}
   
    .container .main-visual .search-wrap .searchbox input#searchInput { font-size: 12px; }

    .content-box-last .tit { font-size: 16px; }
    .content-box-last .txt { font-size: 11px; }
    .content-box-last .txt .ns { font-size: 18px; }

}

@media screen and (max-width: 315px)  {
    .container .main-visual .search-wrap .keywords span.title { width: 35%; }
    .container .main-visual .search-wrap .keywords .key-wrap { width: 65%; }
}