@charset "utf-8";

* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}

body {font-family: 'Noto Sans KR', sans-serif; color: #555;}
div {box-sizing: border-box;}
.Montserrat {font-family: 'Montserrat', sans-serif;}
.Poppins {font-family: 'Poppins', sans-serif;}
/* 
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Kaushan Script', cursive;
 */

/* 전체내용 */
.wrap {width: 100%; overflow: hidden; max-width: 2000px; margin: 0 auto;}


/* 메인 */
main {width: 100%;}
    /* 인트로 */
    .main_intro {padding: 0 15rem; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: no-repeat center center / cover; background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(../img/employ_intro_bg1.jpg); color: #fff;}
    .main_intro h2 {font-size: 50px;}
    /* 서브메뉴 */
    .sub_menu {padding: 0 15rem; background-color: #fff;}
    .sub_menu ul {display: flex; width: 100%;}
    .sub_menu ul li {width: calc(100% / 3); height: 60px; text-align: center; line-height: 60px; border-bottom: 2px solid #ddd; color: #ddd; cursor: pointer;}
    .sub_menu ul li.on {color: #2D91FF; border-bottom: 2px solid #2D91FF; font-weight: bold;}
    .sub_menu ul li a {display: block; width: 100%; height: 100%;}
    /* 인재상 */
    .talent {padding: 150px 0 50px;}
        /* 제목 */
        .talent .title {text-align: center; color: #555; margin-bottom: 80px;}
        .talent .title .Montserrat {color: #11397c; font-weight: bold;}
        .talent .title h3 {font-size: 40px;}
        /* 컨텐츠 */
        .talent .contents {padding: 0 15rem; height: 700px; display: flex; position: relative;}
        .talent .contents::before {content: ""; background: url(../img/talent_bg.jpg) no-repeat center center /cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: .3;}
        .talent .contents .explane {width: 42%; height: 50%; display: flex; align-items: center; font-size: 23px;}
        .talent .contents .explane h3 {font-weight: 500;}
        .talent .contents .explane span {color: #2D91FF;}
        .talent .contents .cont {width: 58%;}
        .talent .contents .box_wrap {display: flex; justify-content: space-between; margin-bottom: 30px;}
        .talent .contents .box {width: 48%; border: 1px solid #ddd; padding: 40px; opacity: 0; transform: translate(150px , 0); transition: all .5s; background-color: rgba(255, 255, 255, .9); }
        .talent .contents .box.active {transform: translate(0 , 0); opacity: 1;}
        .talent .contents .box .num {font-size: 22px; font-weight: bold;}
        .talent .contents .box .icon_wrap {display: flex; justify-content: flex-end; margin: 10px 0;}
        .talent .contents .box .icon_wrap .icon_bg {width: 70px; height: 70px; border-radius: 50%; background-color: #ddd; display: flex; justify-content: center; align-items: center;}
        .talent .contents .box .icon_wrap .icon_bg .icon {width: 70%; height: 70%;}
        .talent .contents .box1 .icon_wrap .icon_bg .icon {background-image: url(../img/creat_black.png); background-size: contain;}
        .talent .contents .box2 .icon_wrap .icon_bg .icon {background-image: url(../img/challenge_black.png); background-size: contain;}
        .talent .contents .box3 .icon_wrap .icon_bg .icon {width: 60%; height: 60%; background-image: url(../img/leader_black.png); background-size: contain;}
        .talent .contents .box4 .icon_wrap .icon_bg .icon {background-image: url(../img/change_black.png); background-size: contain;}
        .talent .contents .box .subject {font-size: 22px; font-weight: bold; margin-bottom: 15px;}
        .talent .contents .box .text {color: #999;}
        .talent .contents .box .text span {color: #555; font-weight: bold;}
        /* hover시 */
        .talent .contents .box:hover {border: 1px solid #2D91FF;}
        .talent .contents .box:hover .num {color: #2D91FF;}
        .talent .contents .box:hover .icon_wrap .icon_bg {background-color: #D2E3FF;}
        .talent .contents .box1:hover .icon_wrap .icon_bg .icon {background-image: url(../img/creat_color.png)}
        .talent .contents .box2:hover .icon_wrap .icon_bg .icon {background-image: url(../img/challenge_color.png)}
        .talent .contents .box3:hover .icon_wrap .icon_bg .icon {background-image: url(../img/leader_color.png)}
        .talent .contents .box4:hover .icon_wrap .icon_bg .icon {background-image: url(../img/change_color.png)}
        .talent .contents .box:hover .subject {color: #2D91FF;}
        .talent .contents .box:hover .text span {color: #2D91FF;}
        
        /* 채용절차 */
    .employment {padding: 150px 15rem 200px;}
        /* 제목 */
        .employment .title {text-align: center; color: #555; margin-bottom: 80px;}
        .employment .title .Montserrat {color: #11397c; font-weight: bold;}
        .employment .title h3 {font-size: 40px; margin-bottom: 30px;}
        /* 절차 */
        .employment ul {display: flex; justify-content: center;}
        .employment ul li {width: 22%; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translate(0, 150px); transition: all .5s;}
        .employment ul li.active {opacity: 1; transform: translate(0,0);}
        .employment ul li .num {border-radius: 50%; width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; font-size: 40px; color: #fff; margin-bottom: 30px; position: relative;}
        .employment ul li .num:after {content: ""; display: block; width: 250%; height: 2px; position: absolute; top: 50%; left: 100%; background-color: #ddd;}
        .employment ul li:last-of-type .num:after {width: 0%;}
        .employment ul li .subject {font-size: 20px; margin-bottom: 10px;}
        .employment ul li .icon {width: 100px; height: 100px; margin-bottom: 35px;}
        .employment ul li .icon1 {background-image: url(../img/copy.png); background-size: contain;}
        .employment ul li .icon2 {background-image: url(../img/talking.png); background-size: contain;}
        .employment ul li .icon3 {background-image: url(../img/interview.png); background-size: contain;}
        .employment ul li .icon4 {background-image: url(../img/id-card.png); background-size: contain;}
        .employment ul li .explane {text-align: center; color: #999;}
        .employment ul li .explane h3 {font-weight: 500;}
    
    /* 배너 */
    .banner {padding: 50px 15rem; background: url(../img/banner_bg2.jpg) no-repeat center center / cover;}
        /* 컨텐츠 */
        .banner .contents {width: 95%; height: 400px; display: flex; justify-content: space-between; margin: 0 auto;}
        .banner .contents .img1 {width: 270px; height: 300px; background-color: #ddd; margin: auto 0; background: url(../img/banner_img1.jpg) no-repeat left center / cover; opacity: 0; transform: translate(-150px, 0); transition: all .5s;}
        .banner .contents .cont {width: 500px; padding-left: 50px;}
        .banner .contents .cont .img2 {width: 500px; height: 250px; background-color: #ddd; position: relative; margin-bottom: 60px; background: url(../img/banner_img2.jpg) no-repeat center center / cover; opacity: 0; transform: translate(0, 150px); transition: all .5s;}
        .banner .contents .cont .img2 p {font-size: 82px; position: absolute; font-family: 'Kaushan Script', cursive; transform: rotate(-7deg); bottom: -45px; right: -50px; color: #2D91FF;}
        .banner .contents .cont .text {width: 500px;}
        .banner .contents .cont .text h3 {font-size: 32px; color: #11397c; margin-bottom: 20px;}
        .banner .contents .cont .text p {color: #999;}
        .banner .contents .cont2 {display: flex; align-items: flex-end;}
        .banner .contents .cont2 .img3 {width: 200px; height: 200px; background-color: #ddd; background: url(../img/banner_img3.jpg) no-repeat center center / cover; opacity: 0; transform: translate(150px, 0); transition: all .5s;}
    
    /* 복리후생 */
    .welfare {padding: 150px 15rem;}
        /* 제목 */
        .welfare .title {text-align: center; color: #555; margin-bottom: 80px;}
        .welfare .title .Montserrat {color: #11397c; font-weight: bold;}
        .welfare .title h3 {font-size: 40px; margin-bottom: 30px;}
        /* 컨텐츠 */
        .welfare .contents {box-shadow: 0 0 10px #ddd; display: flex; justify-content: center; padding: 80px 0;}
        .welfare .contents ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 70px; width: 70%;}
        .welfare .contents ul li { display: flex;}
        .welfare .contents ul li .icon {display: flex; align-items: center;}
        .welfare .contents ul li .icon img {width: 70px;}
        .welfare .contents ul li .cont {margin-left: 30px;}
        .welfare .contents ul li .cont p {color: #999;}
        .welfare .contents ul li .cont .subject {font-size: 20px; color: #11397c; margin-bottom: 10px;}

@media screen and (max-width:1720px) {

    .talent .contents {height: 600px;}
    .talent .contents .explane {width: 45%;}
    .talent .contents .cont {width: 55%;}
    .talent .contents .box {padding: 20px 40px;}

    .banner .contents {width: 100%;}
    .banner .contents .cont {padding-left: 0;}
}

@media screen and (max-width:1600px) {
    .main_intro {padding:  0 11rem;}
    .sub_menu {padding: 0 11rem;}
    .talent {padding: 100px 0 50px;}
    .talent .contents {padding: 0 11rem;}
    .employment {padding: 100px 11rem 150px;}
    .banner {padding: 40px 11rem;}
    .welfare {padding: 100px 11rem;}
    .welfare .contents ul {width: 80%;}
}

@media screen and (max-width: 1400px) {
    .talent .title h3 {font-size: 32px;}
    .talent .contents .explane {font-size: 20px;}
    .talent .contents .box .subject {font-size: 20px;}

    .employment .title h3 {font-size: 32px;}
    .employment ul li .num {font-size: 32px; width: 80px; height: 80px;}
    .employment ul li .icon {width: 90px; height: 90px;}

    .banner .contents .img1 {width: 200px; height: 230px;}
    .banner .contents .cont {width: 450px;}
    .banner .contents .cont .img2 {width: 450px;}
    .banner .contents .cont2 .img3 {width: 150px; height: 150px;}
    .banner .contents .cont .img2 p {font-size: 70px;}
    .banner .contents .cont .text h3 {font-size: 25px;}

    .welfare .title h3 {font-size: 32px;}
    .welfare .contents ul li .cont .subject {font-size: 18px;}

    body {font-size: .9rem;}
}

@media screen and (max-width: 1250px) {
    .main_intro {padding: 0 8rem; height: 400px;}
    
    .sub_menu {padding: 0 8rem;}

    .talent {padding: 4rem 0 4rem;}
    .talent .title {margin-bottom: 40px;}
    .talent .contents {padding:  0 8rem;}
    .talent .contents {display: block; height: auto;}
    .talent .contents .explane {width: 100%; text-align: center; display: block; margin-bottom: 40px;}
    .talent .contents .cont {width: 100%; display: flex; flex-direction: column; align-items: flex-end;}
    .talent .contents .box_wrap {width: 70%;}
    .talent .contents .box_wrap:last-of-type {margin-bottom: 0;}

    .employment {padding: 0 8rem 4rem;}
    .employment .title {margin-bottom: 40px;}
    .employment ul li .num:after {width: 180%;}
    .banner {padding: 40px 8rem;}

    .welfare {padding: 4rem 8rem;}
    .welfare .title {margin-bottom: 40px;}
}

@media screen and (max-width: 1000px) {
    
    .main_intro {padding: 0 3rem; height: 300px;}
    .main_intro h2 {font-size: 40px;}

    .sub_menu {padding: 0 3rem;}
    .sub_menu ul li {height: 50px; line-height: 50px;}

    .talent {padding: 3rem 0;}
    .talent .title {margin-bottom: 30px;}
    .talent .title h3 {font-size: 28px;}
    .talent .contents {padding: 0 3rem;}
    .talent .contents::before {background-size: 200%; background-position-x: -7%;}
    .talent .contents .explane {font-size: 16px;}
    .talent .contents .box .num {font-size: 18px;}
    .talent .contents .box .subject {font-size: 16px;}
    .talent .contents .cont {align-items: center;}
    .talent .contents .box_wrap {width: 90%;}

    .employment {padding: 0 3rem 4rem;}
    .employment .title h3 {font-size: 28px;}
    .employment ul li {width: 25%;}
    .employment ul li .num {font-size: 28px; width: 70px; height: 70px; margin-bottom: 20px;}
    .employment ul li .num:after {width: 230%;}
    .employment ul li .icon {width: 75px; height: 75px;} 

    
    .banner .contents .img1 {width: 150px; height: 180px;}
    .banner .contents .cont .img2 {width: 400px; height: 200px;}
    .banner .contents .cont .img2 p {font-size: 60px;}
    .banner .contents .cont2 {display: none;}
    .banner .contents {height: auto;}

    .welfare {padding: 3rem;}
    .welfare .title h3 {font-size: 28px;}
    .welfare .contents {padding: 3rem 0;}
    .welfare .contents ul {width: 85%; grid-gap: 30px 40px;}
    .welfare .contents ul li .cont .subject {font-size: 16px;}
    .welfare .contents ul li .icon img {width: 55px;}

    body {font-size: .8rem;}
}

@media screen and (max-width: 860px) {
    .talent .contents .box_wrap {width: 100%;}

    .banner {padding: 40px 3rem;}
    .banner .contents {justify-content: center;}
    .banner .contents .img1 {display: none;}

    .employment ul li .num:after {width: 175%;}
}

@media screen and (max-width: 640px) {
    .main_intro {height: 200px; padding: 1rem;}
    .main_intro h2 {font-size: 30px;}

    .talent .title h3 {font-size: 25px;}
    .talent .contents::before {background: none;}
    .talent .contents .box_wrap {display: block; margin-bottom: 0;}
    .talent .contents .box {width: 80%; margin: 0 auto; margin-bottom: 30px;}
    .talent .contents .box_wrap:last-of-type .box:last-of-type {margin-bottom: 0;}

    .employment .title h3 {font-size: 25px;}
    .employment ul {flex-direction: column;}
    .employment ul li {width: 100%; flex-direction: row; justify-content: space-between; margin-bottom: 30px;}
    .employment ul li:last-of-type {margin-bottom: 0;}
    .employment ul li .explane {text-align: left;}
    .employment ul li .num {font-size: 22px; width: 60px; height: 60px; margin-bottom: 0; margin-right: 20px;}
    .employment ul li .num:after {display: none;}
    .employment ul li .subject {font-size: 16px; margin-bottom: 0; margin-right: 20px; width: 60px;}
    .employment ul li .icon {width: 50px; height: 50px; margin-bottom: 0; margin-right: 20px;}
    .employment ul li .explane {width: 180px;}

    .banner .contents .cont .img2 {margin-bottom: 40px;}
    .banner .contents .cont .img2 p {font-size: 50px; bottom: -30px;}
    .banner .contents .cont .text h3 {font-size: 20px;}

    .welfare .title h3 {font-size: 25px;}
    .welfare .contents ul {grid-template-columns: repeat(1, 1fr);}


    .talent .contents .box .icon_wrap .icon_bg {width: 65px; height: 65px;}
    .talent .contents .box .icon_wrap .icon_bg .icon {width: 60%; height: 60%;}
    .talent .contents .box3 .icon_wrap .icon_bg .icon {width: 50%; height: 50%;}
}

@media screen and (max-width: 440px) {
    .main_intro {height: 150px;}
    .main_intro h2 {font-size: 25px;}

    .sub_menu {padding: 0;}
    .sub_menu ul li {height: 40px; line-height: 40px;}

    .talent {padding: 2rem 0;}
    .talent .title {margin-bottom: 20px;}
    .talent .title h3 {font-size: 20px;}
    .talent .contents .explane {margin-bottom: 20px;}
    .talent .contents .explane h3 {font-size: 16px;}
    .talent .contents {padding: 0 1rem;}
    .talent .contents .box {width: 100%;}
    .talent .contents .box .icon_wrap {margin: 0;}

    body {font-size: .7rem;}

    .employment {padding: 0 1rem 2rem;}
    .employment .title h3 {font-size: 20px;}
    .employment ul li {margin-bottom: 20px;}
    .employment ul li .num {width: 50px; height: 50px; font-size: 18px;}
    .employment ul li .icon {width: 45px; height: 45px;}

    .banner {padding: 2rem 1rem;}
    .banner .contents .cont {width: 300px; margin: 0 auto;}
    .banner .contents .cont .img2 {width: 100%; height: 150px;}
    .banner .contents .cont .img2 p {font-size: 40px; bottom: -25px; right: -30px;}
    .banner .contents .cont .text h3 {font-size: 16px;}

    .welfare {padding: 2rem 1rem;}
    .welfare .title h3 {font-size: 20px;}
    .welfare .contents {padding: 1rem;}
    .welfare .contents ul {width: 100%;}
    .welfare .contents ul li .cont .subject {font-size: 14px;}
    .welfare .contents ul li .icon img {width: 50px;}
}