/* ======== 직무 메인 ======== */
.job_dpt {font-size: 16px; padding: 18px 20px; border-radius: 12px; background-color: #f1f3ff; color: #666; margin-top: 30px; text-align: center; line-height: 1.4;}
.job_list {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px;}
.job_con {padding: 35px; border: 2px solid #eee; border-radius: 16px; display: flex; flex-direction: column; gap: 20px; cursor: pointer; transition: all .1s; box-shadow: none;}
.job_con:hover {border-color: #1A34C7; box-shadow: 2px 2px 10px #0d208b30;}
.job_con .more_area {width: 100%; display: flex; justify-content: flex-end;}
.job_con .more {width: 50px; aspect-ratio: 1; border-radius: 100%; background-color: #eee; position: relative; transition: all .1s;}
.job_con .more::after {content: ""; display: block; width: 16px; aspect-ratio: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_arrow01.png) no-repeat center/contain; transition: all .1s;}
.job_con:hover .more {background-color: #1A34C7;}
.job_con:hover .more::after {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_arrow01_wh.png) no-repeat center/contain;}
.job_con .job_info {display: flex; flex-direction: column; align-items: flex-start;}
.job_con .job_info i {display: block; width: 30%; aspect-ratio: 1;}
.job_con .job_info i.con01 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con01.png) no-repeat center/contain;}
.job_con .job_info i.con02 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con02.png) no-repeat center/contain;}
.job_con .job_info i.con03 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con03.png) no-repeat center/contain;}
.job_con .job_info i.con04 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con04.png) no-repeat center/contain;}
.job_con .job_info i.con05 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con05.png) no-repeat center/contain;}
.job_con .job_info i.con06 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con06.png) no-repeat center/contain;}
.job_con .job_info i.con07 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_con07.png) no-repeat center/contain;}
.job_con .job_info i.bulk01 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_bulk01.png) no-repeat center/contain;}
.job_con .job_info i.bulk02 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_bulk02.png) no-repeat center/contain;}
.job_con .job_info i.bulk03 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_bulk03.png) no-repeat center/contain;}
.job_con .job_info i.mng01 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng01.png) no-repeat center/contain;}
.job_con .job_info i.mng02 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng02.png) no-repeat center/contain;}
.job_con .job_info i.mng03 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng03.png) no-repeat center/contain;}
.job_con .job_info i.mng04 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng04.png) no-repeat center/contain;}
.job_con .job_info i.mng05 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng05.png) no-repeat center/contain;}
.job_con .job_info i.mng06 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_mng06.png) no-repeat center/contain;}
.job_con .job_info i.it01 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_it01.png) no-repeat center/contain;}
.job_con .job_info i.it02 {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_it02.png) no-repeat center/contain;}
.job_con .job_info span {font-size: 18px; color: #999; font-weight: bold; font-family: "DM Sans", sans-serif; text-transform: uppercase; padding-top: 12px; display: none;}
.job_con .job_info p {font-size: clamp(18px, 1.8vw, 30px); font-weight: 600; padding-top: 20px;}



/* ======== 직무 상세 ======== */
.job_box {width: 70%; padding-top: 60px;}
.com_tit.sticky {position: sticky; top: 180px; padding-bottom: 8%;}
.company_list .btn_box {width: 200px; margin: 0 auto;}


.wrap.sub.cont_view .page_tit, .wrap.sub.management_view .page_tit, .wrap.sub.bulk_view .page_tit, .wrap.sub.it_view .page_tit {height: 80vh;}
.wrap.sub.cont_view .page_tit p, .wrap.sub.management_view .page_tit p, .wrap.sub.bulk_view .page_tit p, .wrap.sub.it_view .page_tit p {display: none;}
.wrap.sub.cont_view .page_title, .wrap.sub.management_view .page_title, .wrap.sub.bulk_view .page_title, .wrap.sub.it_view .page_title {padding-top: 0;}
.wrap.sub.cont_view .page_wrap, .wrap.sub.management_view .page_wrap, .wrap.sub.bulk_view .page_wrap, .wrap.sub.it_view .page_wrap {gap: 80px;}


/* 직무소개 */
.job_intro {display: flex; width: 100%; flex-direction: column; gap: 20px;}
.job_intro .img_box {width: 100%; aspect-ratio: 3 / 1; border-radius: 16px; overflow: hidden; border: 1px solid #ddd;}
.job_intro .img_box img {width: 100%; height: 100%; display: block; object-fit: cover;}
.job_intro .intro_main {font-size: clamp(18px, 2vw, 30px); line-height: 1.4; font-weight: 600; padding-top: 20px;}
.job_intro .intro_sub {font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6;}

/* 주요업무 */
.job_table {width: 100%; display: flex; flex-direction: column; border-top: 2px solid #1A34C7;}
.job_table dl {display: flex; width: 100%; align-items: flex-start; padding: 40px 20px; border-bottom: 1px solid #ddd;}
.job_table dt {display: flex; gap: 10px; width: 35%; flex-direction: column; align-items: flex-start;}
.job_table span {font-size: clamp(18px, 1.4vw, 20px); font-weight: 600; line-height: 1;}
.job_table .eng {font-size: 16px; font-family: "DM Sans", sans-serif; text-transform: capitalize; color: #999;}
.job_table dd {width: 65%; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; display: flex; flex-direction: column; align-items: flex-start;}

/* 필요역량 */
.job_skill {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; width: 100%;}
.job_skill .skill_con {display: flex; align-items: center; gap: 20px; flex-direction: column;}
.skill_con .icon {width: 50%; aspect-ratio: 1; position: relative; border-radius: 100%; background: radial-gradient(#eef1ff, #ffffff);}
.skill_con .icon i {display: block; width: 35%; position: absolute; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; min-width: 50px;}
.skill_con .icon i img {width: 100%; height: 100%; display: block; object-fit: contain;}
.skill_con .icon::before {content: ""; display: block; width: 85%; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(#d8ddfd, #fff);}
.skill_con .icon::after {content: ""; display: block; width: 60%; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 10px #1A34C730;}
.skill_con span {font-size: clamp(16px, 1.5vw, 18px); text-align: center; line-height: 1.4;}

/* 직무인터뷰 */
.job_interview {width: 100%; display: flex; flex-direction: column; gap: 30px;}
.job_interview .interview_img {width: 100%; aspect-ratio: 3 / 1; border-radius: 16px; border: 1px solid #ddd; overflow: hidden;}
.job_interview .interview_img img {width: 100%; height: 100%; display: block; object-fit: cover;}
.interview_con {display: flex; flex-direction: column; width: 100%; border-top: 2px  solid #1A34C7;}
.interview_con dl {display: flex; flex-direction: column; width: 100%; gap: 20px; padding: 45px 20px; border-bottom: 1px solid #ddd;}
.interview_con dt {display: flex; align-items: center; gap: 25px; width: 100%;}
.interview_con dt span {position: relative; font-size: 16px; font-weight: bold; font-family: "DM Sans", sans-serif; text-transform: uppercase; color: #fff;}
.interview_con dt span::after {content: ""; display: block; width: 40px; aspect-ratio: 1; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1A34C7; z-index: -1;}
.interview_con dt p {font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4;}
.interview_con dt p em {font-weight: 800;}
.interview_con dd {font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; padding-left: 45px; font-weight: 400; color: #444;}
.interview_con dd p + p {padding-top: 5px;}
.interview_con dd .part {display: flex; flex-direction: column; width: 100%; align-items: flex-start;}
.interview_con dd .part + .part {padding-top: 35px;}
.interview_con dd .part .name {font-weight: 600; padding-left: 15px; position: relative; line-height: 1; display: block; margin-bottom: 12px; color: #222;}
.interview_con dd .part .name::before {content: ""; display: block; width: 6px; aspect-ratio: 1; border-radius: 2px; background-color: #1A34C7; position: absolute; top: 1px; left: 0;}
.interview_con dd .part .name::after {content: ""; display: block; width: 6px; aspect-ratio: 1; border-radius: 2px; background-color: #8990b8; position: absolute; bottom: 1px; left: 0;}
.interview_con dd b + b {padding-left: 1%;}

/* 채용절차 */
.job_table dd .discript {color: #15288f; padding-top: 10px; font-size: 15px;}
.job_table dd ul {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.job_table dd ul + ul {padding-top: 25px;}
.job_table dd li.tit {font-size: 18px; font-weight: 600; padding: 0;}
.job_table dd li.tit::after {display: none;}
.job_table dd li {padding-left: 16px; position: relative; font-size: 16px; line-height: 1.5;}
.job_table dd li::after {content: ""; display: block; width: 8px; height: 2px; background-color: #999; top: 10px; left: 0; position: absolute;}
.job_table .attach {padding: 12px 25px; border-radius: 60px; background-color: #fff; color: #1A34C7; display: flex; align-items: center; font-size: 15px; gap: 8px; border: 2px solid #1A34C7; font-weight: 600; transition: all .1s; margin: 10px 0;}
.job_table .attach i {display: block; width: 18px; aspect-ratio: 1; background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_down.png) no-repeat center/contain; transition: all .1s;}
.job_table .attach:hover {background-color: #1A34C7; color: #fff;}
.job_table .attach:hover i {background: url(https://d23vac1awk897o.cloudfront.net/static/img/sub/icon_down_wh.png) no-repeat center/contain;}

.process_list {width: 70%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; row-gap: 60px; padding-top: 60px;}
.process_con {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
.process_con .icon_box {width: 70%; aspect-ratio: 1; border-radius: 100%; border: 2px solid #1A34C7; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; justify-content: center; background-color: #fff; position: relative;}
.process_con .icon_box::after {content: ""; display: block; width: 140%; height: 1px; border: 2px dashed #e9eaee; position: absolute; top: 50%; left: calc(100% + 2px); transform: translateY(-50%); z-index: 0;}
.process_con:nth-of-type(4n) .icon_box::after, .process_con:last-child .icon_box::after {display: none;}
.process_con .icon_box span {font-size: clamp(14px, 1.3vw, 18px); font-weight: 800; font-family: "DM Sans", sans-serif; text-transform: uppercase; color: #a3a8bf; line-height: 1;}
.process_con .icon_box .icon {display: block; width: 50px; aspect-ratio: 1;}
.process_con .icon_box .icon img {width: 100%; height: 100%; display: block; object-fit: contain;}
.process_con:nth-of-type(2) .icon_box, .process_con:nth-of-type(4) .icon_box, .process_con:nth-of-type(5) .icon_box, .process_con:nth-of-type(7) .icon_box {border-color: #c1c5d8;}
.process_con p {font-size: clamp(17px, 1.4vw, 20px); text-align: center; font-weight: 600; line-height: 1;}




@media screen and (max-width: 1440px) {
    /* 직무 메인 */
    .job_list {gap: 20px;}
    .job_con {padding: 25px;}
    .job_con .more {width: 40px;}
    .job_con .more::after {width: 12px;}

    /* 직무 상세 */
    .company_list {gap: 100px;}
    .job_intro .intro_main {padding-top: 10px;}
    .job_intro {gap: 15px;}
}


@media screen and (max-width: 1080px) {
    /* 직무 메인 */
    .job_list {gap: 15px;}
    .job_con {padding: 20px; border-radius: 10px;}
    .job_con .job_info p {padding-top: 10px;}
    .job_dpt {font-size: 15px; padding: 12px 20px; border-radius: 8px; margin-top: 20px;}


    /* 직무상세 */
    .job_box {width: 100%; padding-top: 30px;}
    .job_intro .img_box {border-radius: 10px;}
    .job_table .eng {font-size: 15px;}
    .job_table dl {padding: 25px 15px;}
    .job_table dt {width: 25%;}
    .job_table dd {width: 75%;}
    .skill_con .icon {width: 60%; min-width: 150px;}
    .com_tit.sticky {position: relative; top: initial; padding-bottom: 0;}
    .job_interview .interview_img {border-radius: 10px;}
    .interview_con dt span {font-size: 14px;}
    .interview_con dt span::after {width: 32px;}
    .interview_con dt {gap: 20px; padding-left: 7px;}
    .interview_con dd {padding: 0;}
    .interview_con dl {padding: 30px 15px;}
    .interview_con dd br {display: none;}
    .interview_con dd br + p {padding-top: 10px;}


    /* 지원가이드 */
    .process_list {width: 100%; gap: 0; row-gap: 40px; padding-top: 30px;}
}



@media screen and (max-width: 750px) {
    .wrap.sub.cont_view .page_tit, .wrap.sub.management_view .page_tit, .wrap.sub.bulk_view .page_tit, .wrap.sub.it_view .page_tit {height: 60vh; min-height: 480px;}
    .wrap.sub.cont_view .page_wrap, .wrap.sub.management_view .page_wrap, .wrap.sub.bulk_view .page_wrap, .wrap.sub.it_view .page_wrap {gap: 60px;}

    /* 직무 메인 */
    .job_list {grid-template-columns: 1fr 1fr;}
    .job_dpt {text-align: left;}


    /* 직무상세 */
    .company_list {gap: 80px;}
    .job_table dl {flex-direction: column; gap: 20px; padding: 25px 6px;}
    .job_table dt {flex-direction: row; align-items: baseline; gap: 12px; width: 100%; flex-wrap: wrap; row-gap: 8px;}
    .job_table .eng {font-size: 14px;}
    .job_table dd {width: 100%;}
    .skill_con span br {display: none;}
    .job_skill {grid-template-columns: 1fr; gap: 15px;}
    .skill_con .icon {width: 100px; min-width: 100px;}
    .skill_con .icon i {width: 35px; min-width: 35px;}
    .job_skill .skill_con {flex-direction: row; gap: 10px;}
    .skill_con span {text-align: left;}
    .interview_con dt {flex-direction: column; align-items: flex-start; padding-left: 0; gap: 16px;}
    .interview_con dt span {margin-left: 6px;}


    /* 지원가이드 */
    .process_con .icon_box .icon {width: 40px;}
    .process_list {grid-template-columns: 1fr 1fr 1fr; gap: 15px; row-gap: 30px;}
    .process_con .icon_box {width: 100%; padding: 20px; gap: 10px; border-radius: 10px; aspect-ratio: initial;}
    .process_con .icon_box::after {width: 100%;}
    .process_con:nth-of-type(4n) .icon_box::after {display: block;}
    .process_con:nth-of-type(3n) .icon_box::after, .process_con:last-child .icon_box::after {display: none;}
    .process_con:nth-of-type(2n) .icon_box {border-color: #c1c5d8;}
    .process_con:nth-of-type(2n-1) .icon_box {border-color: #1A34C7;}
    .com_box.guide .job_table span {position: relative; padding-left: 20px;}
    .com_box.guide .job_table span::after {content: ""; display: block; width: 10px; height: 10px; border-radius: 2px; background-color: #15288f; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
    .com_box.guide .job_table dd {padding-left: 20px;}
    .job_table dd li.tit {font-size: 16px;}
    .job_table dd li {font-size: 15px;}
    .job_table dd .discript {padding-top: 5px;}
    .job_table .attach {padding: 10px 20px; font-size: 14px;}
    .job_table .attach i {width: 16px;}
}



@media screen and (max-width: 550px) {
    /* 직무 메인 */
    .job_list {grid-template-columns: 1fr;}
    .job_con {gap: 0;}
    .job_con .job_info i {width: 50px;}


    /* 지원가이드 */
    .process_list {grid-template-columns: 1fr 1fr;}
    .process_con:nth-of-type(3n) .icon_box::after {display: block;}
    .process_con:nth-of-type(2n) .icon_box::after, .process_con:last-child .icon_box::after {display: none;}
    .process_con:nth-of-type(2n) .icon_box {border-color: #1A34C7;}
    .process_con:nth-of-type(2) .icon_box, .process_con:nth-of-type(3) .icon_box, .process_con:nth-of-type(6) .icon_box, .process_con:nth-of-type(7) .icon_box {border-color: #c1c5d8;}
    .process_con {gap: 16px;}
}