@charset "utf-8";
.community-wrap {width:100%;background:url('/003/img/community-bg.jpg') no-repeat; background-size:cover;}
.community-wrap .min-width {padding-top:80px;padding-bottom:80px;}
.community-wrap .community-inner {display:flex;}
.community-wrap .c-left {width:640px;height:640px;background:url('/003/img/recruitment.jpg');background-size:cover;position:relative;transition:all}
.community-wrap .c-right {display:flex;flex-direction:column;width: calc(100% - 640px);}
.community-wrap .c-left:before {content:'';position:absolute;display:block;width:1px;height:100%;background:rgba(255,255,255,.5);left:25px;}
.community-wrap .c-left:after {content:'';position:absolute;display:block;width:100%;height:1px;background:rgba(255,255,255,.5);bottom:25px;}
.notice-wrap,.qa-wrap {height:50%;}
.community-wrap .c-left .tit {position:absolute;bottom:56px;left:50px;}
.community-wrap .c-left .tit h2 {font-size:12px;font-weight:400;letter-spacing:4px;color:#fff;margin-bottom:16px;}
.community-wrap .c-left .tit h2:after {content:'';display:inline-block;width:30px;height:2px;background:#fff;margin-left:8px}
.community-wrap .c-left .tit h1 {font-size:37px;font-weight:600;color:#fff;margin-left:30px;display:inline-block;vertical-align:middle;transition:all .4s}
.community-wrap .c-left .tit h1:hover {color:#2673dd;}
.community-wrap .c-left .tit img {vertical-align:middle;margin-left:10px}
.notice-wrap {background:#fff;}
.qa-wrap {background:#2673dd;}

.catalouge-wrap {background:#e3e9f1;padding:56px 0 100px 0;}
.catalouge-wrap .cat-top  {margin-bottom:50px;}
.catalouge-wrap .cat-top h1 {font-size:34px;font-weight:500;color:#222;display:inline-block;margin-right:15px;}
.catalouge-wrap .cat-top a {font-size:18px;color:#545353;font-weight:500;transition:all .4s;}
.catalouge-wrap .cat-top a:hover {color: #2673dd;}
.catalouge-wrap .cat-con {display:flex;justify-content:center;}
.catalouge-wrap .cat-con li {margin:0 40px}
.catalouge-wrap .cat-con li h2 {text-align:center;margin-top:10px;font-size:16px;color:#333;font-weight:500;transition:all .4s;}
.catalouge-wrap .cat-con li a img  {transition:all .4s;}
.catalouge-wrap .cat-con li a:hover img {box-shadow:0 10px 20px rgba(0,0,0,.5)}
.catalouge-wrap .cat-con li a:hover h2 {color:#2673dd;}

/* button */
.btnSection {margin-top:60px; text-align:center;}
.btnSection:after {clear:both; content:''; display:block;}
.btnSection2 { text-align:right; width:100%; margin-top:-50px; padding-bottom:15px;}
.btnSection2:after {clear:both; content:''; display:block;}
.btnSection3 {margin-top:10px; text-align:center;}
.btnSection3:after {clear:both; content:''; display:block;}

[class*='btn_'] {display:inline-block;}
[class*='btn_'] > * {border:1px solid transparent; box-sizing:border-box; text-align:center; display:block;}

.btn_mid > * {height:56px; font-size:16px; font-weight:500; line-height:54px;}
.btn_xs > * {height:36px; font-size:14px; font-weight:500; line-height:36px;}
.btn_sm {height:40px; font-size:20px; font-weight:400; line-height:40px; color:#3f77ab;}
.btn_sm:nth-child(2) {color:#4ca39e !important;}
.btn_sm:nth-child(3) {color:#5c9c1f !important;}
.btnSection2 .btn_link > *{display:block; width:40px; height:40px; -webkit-border-radius:50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;  text-align: center;background:#e0e0e0;}
.btnSection2 .btn_link > *:hover{color:#fff; background:#777;}
.btnSection .btn_link > * {width:116px; color:#fff; background-color:#0B2064; font-size: 15px;}
.btnSection .btn_download > * {width:116px; color:#fff; background-color:#2673dd; font-size: 15px;}

.btnSection3 .btn_link > *{display:block; width:40px; height:40px; text-align: center;background:#8196bc;}
.btnSection3 .btn_link > *:hover{color:#fff; background:#6680b0;}
.btnSection3 .btn_link > * {width:100px; color:#fff; background-color:#6680b0;}
.btnSection3 .btn_link2 > *{display:block; width:40px; height:40px; text-align: center;background:#81a5bc;}
.btnSection3 .btn_link2 > *:hover{color:#fff; background:#6697b3;}
.btnSection3 .btn_link2 > * {width:100px; color:#fff; background-color:#6697b3;}

/*board-top*/
.board-top {position:relative;margin-bottom:40px;}
.board-top h1 {position:absolute;left:0;top:0;background:rgba(38,115,221,.7);color:#fff;font-size:40px;font-weight:700;padding:37px 70px;transition:all .4s}
.board-top h1:after {position:absolute;right:-50px;top:50%;content:'';display:block;background:#fff;height:1px;width:80px;}
.board-top img {max-width:100%;}
.contents-top-padding {padding-top:50px;}

/*==============================* 인재상 *===============================*/
.type-bg {position:relative;}
.type-bg:before,
.type-bg:after {content:'';z-index:-1;display:block;position:absolute;left:0;top:0;width:1024px;height:509px;background:url('/003/img/type-bg.png')}
.type-bg:after {left:auto;right:0;transform:rotate(180deg);top:auto;bottom:0;}
.type-inner {display:flex;justify-content:center;align-items:center;}
.type-center {width:438px;height:438px;position:relative;}
.type-center .circle3 {width:100%;height:100%;border-radius:100%;border:1px solid #d6d6d6;background:#fff;}
.type-center .circle2 {position:absolute;border-radius:100%;width:80%;height:80%;left:10%;top:10%;background:#f0f0f0}
.type-center .circle1 {
    position:absolute;border-radius:100%;width:70%;height:70%;left:15%;top:15%;background:#103862;color:#fff;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.type-center .circle1  h1 {margin-top:12px;font-size:29px;font-weight:700}
.type-list {
    width:196px;height:196px;border:1px solid #c1d4e3; border-radius:100%;background:#fff; margin: 25px 40px;padding: 20px;position:relative;
}
.type-list:before {content:'';display:block;position:absolute;top:50%;right:-74px;background:#bed3e6;width:74px;height:1px;}
.type-list.type3:before,.type-list.type4:before {right:0;left:-74px;}
.type-list:after {content:'';display:block;position:absolute;top:calc(50% - 4px);right:-77px;width:9px;height:9px;border-radius:100%;background:#0152a4;z-index:1}
.type-list.type3:after,.type-list.type4:after {right:0;left:-77px;}

.type-list .top {text-align:center;border-bottom:1px solid #e3e3e5;margin-bottom:15px;height: 50%;display: flex;flex-direction: column;justify-content: center;padding-top:8px;}
.type-list .top h1 {font-size:24px;font-weight:500;color:#074d95}
.type-list .top h2 {font-size:15px;font-weight:600;color:#5695d6;line-height:1.8}
.type-list p {font-size:18px;color:#777;text-align:center;line-height:1.4;letter-spacing:-.5px;word-break:keep-all;}

/*==============================* 복리후생 *===============================*/
.wel-wrap ul {display:flex;width:100%;flex-wrap:wrap;margin:0 auto;}
.wel-wrap ul li {
    background:#dde7f0;color:#333;margin:8px;width: calc(20% - 20px);position:relative;padding-top:30px;
    height: 180px;display: flex;flex-direction: column;justify-content: center;text-align:center;
}
.wel-wrap ul li .ico {width:90px;height:90px;background-color:#074d95;border-radius:100%;position:absolute;;left: calc(50% - 45px); top: -45px; background-size: cover;background-repeat: no-repeat;}
.wel-wrap ul li.wel1 .ico {background-image:url('/002/img/welfare-ico1.png')}
.wel-wrap ul li.wel2 .ico {background-image:url('/002/img/welfare-ico2.png');}
.wel-wrap ul li.wel3 .ico {background-image:url('/002/img/welfare-ico3.png');}
.wel-wrap ul li.wel4 .ico {background-image:url('/002/img/welfare-ico4.png');}
.wel-wrap ul li.wel5 .ico {background-image:url('/002/img/welfare-ico5.png');}
.wel-wrap ul li h2 {color:#074d95;font-size:18px;font-weight:700;margin-bottom:13px;}
.wel-wrap ul li p {font-size:16px;color:#444;line-height:1.5;letter-spacing:-.5px;word-break:keep-all;}
.sl {margin: 20px 0;font-size: 23px;margin-bottom: 80px;text-align: center;line-height: 1.5;color: #8c8c8c;}
.sl span {color:#074d95;font-weight:500}

/*==============================* 채용안내 *===============================*/
.recruit-step {position:relative;}
.info-line {width:100%;height:1px;background:#bed3e6;position:absolute;top:50%;}
.info-line:before {content:'';display:block;position:absolute;width:9px;height:9px;background:#0152a4;border-radius:100%;left:0;top:-4px}
.info-line:after {content:'';display:block;position:absolute;width:9px;height:9px;background:#0152a4;border-radius:100%;right:0;;top:-4px}
.recruit-step ul {display:flex;justify-content:space-around;padding: 20px 150px;}
.recruit-step ul li {
    width: 196px;
    height: 196px;
    border: 1px solid #c1d4e3;
    border-radius: 100%;
    background: #fff;
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.recruit-step ul li span {
    position:absolute;width:35px;height:35px;border-radius:100%;background:#5695d6;color:#fff;font-size:16px;
    font-weight:500;top:-18px;display: flex;justify-content: center;align-items: center;-webkit-margin-start:0;margin-left:-17px;
}

.recruit-step ul li h2 {font-size:17px;color:#555;font-weight:500;margin-top:12px;}
.recruit-txt {border-radius:8px;background:#dde7f0;padding:20px 45px;font-size:15px;color:#333;font-weight:400;width: 75%;margin: 20px auto;}
.recruit-txt h3 {width:88px;color:#074d95;font-weight:500;font-size:16px;}
.recruit-txt li {display:flex;margin:20px 0;align-items: center;}
.recruit-txt li p {word-break:keep-all;}

.product-box.pb-w {background:#fff;border:1px solid #ccc}
h2.bullet {font-size:19px;font-weight:bold;color:#333;margin-bottom:20px;}
h2.bullet > img {margin-right:5px;vertical-align:middle;}
.product-box {
    background:#ebebeb;border-radius:5px;padding:35px 42px;margin-bottom:50px;
    font-size:15px;color:#666;line-height:1.8;word-break:keep-all;
}
.product-box img {display:block;margin:0 auto;max-width:100%}
.product-list {display:flex;}
.product-list li {display:flex;flex-direction:column;align-items:center;width:25%}
.product-box .product-list li img {margin-bottom:8px;}
.product-box .product-list li span  {text-align:center;line-height:1.5}
.product-box .product-list li span br {display:none;}

@media all and (max-width:1240px) {
    .product-box {width:100%;}
}
@media all and (max-width:480px) {
    h2.bullet {font-size:17px;margin-bottom:15px;}
    .product-box {padding:20px; margin-bottom:25px;}
    .product-box .product-list li img {width:30px;}
    .product-box .product-list li span br {display:block;}
}



@media all and (max-width:1700px) {
     /*인재상*/
     .type-bg:after {display:none;}
}

@media all and (max-width:1400px) {
    .community-wrap .c-left {width:600px;height:600px;}
    .community-wrap .c-right {width: calc(100% - 600px);}


}

@media all and (max-width:1366px) {
    .board-top h1 {font-size:34px;}
}

@media all and (max-width:1280px) {
    .community-wrap .c-left {width:500px;height:500px;}
    .community-wrap .c-right {width: calc(100% - 500px);}

    /*인재상*/
    .type-center {width:320px;height:320px;}

    /*채용안내*/
    .recruit-step ul {padding:20px 80px;}
    .recruit-txt {width:1000px;}

}

@media all and (max-width:1100px) {
    .community-wrap .min-width {padding-top:60px;padding-bottom:60px;}
    .community-wrap .c-left {width:400px;height:400px;}
    .community-wrap .c-right {width: calc(100% - 400px);}
    .community-wrap .c-left:before {left:15px;}
    .community-wrap .c-left:after {bottom:15px;}
    .community-wrap .c-left .tit h1 {font-size:30px;}
    .community-wrap .c-left .tit h2 {margin-bottom:10px;}
    .community-wrap .c-left .tit {left:35px;bottom:35px;}

    /*catalouge*/
    .catalouge-wrap {padding:50px 0 80px 0}
    .catalouge-wrap .cat-top {margin-bottom:40px;}
    .catalouge-wrap .cat-top h1 {font-size:30px;}
    .catalouge-wrap .cat-con li {margin:0 10px;width:25%;}
    .catalouge-wrap .cat-con li a img {width:100%;}


     /*채용안내*/
     .recruit-step ul {padding:20px 20px;}
     .recruit-txt {width:100%;}
     .recruit-step ul li {width:160px;height:160px;}
     .recruit-step ul li img {width:50px;height:50px;}
}

@media all and (max-width:1023px) {
    .community-wrap .c-left {width:250px;height:400px;}
    .community-wrap .c-right {width: calc(100% - 250px);}
}

@media all and (max-width:1000px) {
    .community-wrap .min-width {padding-top:40px;padding-bottom:40px;}

    /*catalouge*/
    .catalouge-wrap {padding:35px 0 60px 0}
    .catalouge-wrap .cat-top h1 {font-size:26px;}
    .catalouge-wrap .cat-con li h2 {font-size:15px;}

    /*board*/
    .board-top {margin-bottom:20px;}
    .board-top h1 {font-size:28px;padding:25px 48px}
}
@media all and (max-width:960px) {
    /*인재상*/
    .type-center {width:260px;height:260px;}
    .type-center .circle2,
    .type-center .circle1 {width: 90%;height: 90%;left: 5%;top: 5%;}
    .type-list {margin:25px 10px;}

    /*채용안내*/
    .recruit-txt {margin:0;}
}
@media all and (max-width:768px) {
    /* 카달로그 */
    .catalouge-wrap .cat-con {display:flex;justify-content:space-around;width:100%;}

    /*인재상*/
    .type-bg:before {display:none;}
    .type-list {margin:25px 0}
    .type-list.type3:after, .type-list.type4:after {left:-68px;}
    .type-list.type3:before, .type-list.type4:before {left:-68px}
    .type-list:after {right:-68px;}
    .type-list:before {width:68px;right:-68px;}
    .wel-wrap ul li .ico {left: 10px; top: calc(50% - 45px);}
    .wel-wrap ul li h2 {font-size:19px;margin-bottom:2px;}
    .sl {font-size:19px;margin-bottom:20px;word-break:keep-all;}
    .sl br {display:none;}

    /*복리후생*/
    .wel-wrap ul li {width:100%;height:auto;padding-top:30px;padding-bottom:30px;}

    /*채용안내*/
    .recruit-step ul li {width:120px;height:120px;}
    .recruit-step ul li img {width:35px;height:35px;}
    .recruit-step ul li span {width:28px;height:28px;font-size:13px;top:-14px;}
    .recruit-txt li {display:block;}
    .recruit-txt li p {line-height:1.4}
    .recruit-txt h3 {margin-bottom:6px;}
    .recruit-txt {padding:1px 25px;}
}
@media all and (max-width:767px) {
    /*인재상*/
    .type-list:after,.type-list:before {display:none;}
    .type-center {display:none;}
    .type-list {margin:20px;}
}
@media all and (max-width:640px) {
    .community-wrap .community-inner {display:block;}
    .community-wrap .min-width {padding-top:40px;padding-bottom:40px;}
    .notice-wrap, .qa-wrap {height:190px;}
    .community-wrap .c-left {width:100%;height:200px;}
    .community-wrap .c-right {width:100%;}

    /*catalouge*/
    .catalouge-wrap .cat-con li h2 {font-size:14px;}
    .catalouge-wrap .cat-top {margin-bottom:30px;}
    .board-top h1 {font-size:24px;padding: 18px 30px;}

    /*인재상*/
    .type-list {margin:10px;}

    .wel-wrap ul li .ico {width:70px;height:70px;}

    /*채용안내*/
    .info-line {display:none;}
    .recruit-step ul {padding:20px 0;}
    .recruit-step ul li {border-radius:0;margin-left:-1px}
    .recruit-step ul li h2 {font-size:15px;}
    .community-wrap .c-left {background:url('/003/img/recruitment-m.jpg');background-position:center 278px;background-size:cover}
}

@media all and (max-width:480px) {
    /*board*/
    .board-top {height:64px;overflow:hidden;margin-bottom:15px;}
    .board-top h1 {width:100%;height:100%;text-align:center;}
    .board-top h1:after {display:none;}
    .board-top img {max-width: auto;width:100%;height: 100%;}

    /*인재상*/
    .type-inner {display:block;}
    .type-list .top h1 {font-size:16px;}
    .type-list .top h2 {font-size:14px;}
    .type-list {width:100%;padding:10px 20px;height:auto;border-radius:0;margin:5px 0;}
    .type-list .top {height:auto;margin-bottom:5px;padding-top:0;}


    /*채용안내*/
    .recruit-step ul {display:block;}
    .recruit-step ul li {margin-top:-1px;width:100%}

    .wel-wrap ul li .ico {width:50px;height:50px;}
    .sl {font-size:15px;}
}
