/* ============> kakao 지도 <============ */
.kakaomap{width: 100% !important; height: 100% !important; margin: 0 auto !important; padding: 0 !important;border: 0 !important;}

/* 이부분은 맵 잡다한 부분 삭제처리 */
.root_daum_roughmap .wrap_btn_zoom{z-index: 1}
.root_daum_roughmap .wrap_controllers {display: none}
.root_daum_roughmap .wrap_map{height: 100% !important;}

/* ============= SubTop ============= */
.subTop {z-index: 2;background: #000;}
.subTop .subTopImg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: -1; background-position: center center;background-repeat: no-repeat;background-size: cover;}
.subTop .container{display: flex;justify-content: center;align-items: center;height:  45rem; padding-top:4em}

/* ============= Sub Common ============= */
#subPage{color:#333}
.imgSize{width:var(--imgSz)}
.txtimg{max-height: 1em;}
.minW{min-width: var(--minW,5em)}
.sub.en .enMinW{min-width: var(--minW,16rem)}
.pdBox{padding: var(--pdValue, 1.5em 1em)}
.ratioBox{aspect-ratio: var(--ratio, 16/9);}
.border-tit{border-top:1px solid var(--bdcolor,var(--pointcolor));border-bottom:1px solid var(--bdcolor,var(--pointcolor));padding:0.5em 0}

@media (max-width:1240px) {
    .md-pl-5p{padding-left:5%}
    .md-pr-5p{padding-right:5%}
}
@media (max-width:990px) {
    .sm-pl-5p{padding-left:5%}
    .sm-pr-5p{padding-right:5%}
}
@media (max-width:768px) {
    .xs-pl-5p{padding-left:5%}
    .xs-pr-5p{padding-right:5%}
}
@media (max-width:500px) {
    .xxs-pl-5p{padding-left:5%}
    .xxs-pr-5p{padding-right:5%}
}


/* ================== SubNav ==================  */
#subnav {border-bottom:1px solid #eee;font-family: 'Saira','Noto Sans KR',sans-serif;}

@media (min-width:991px) {
    #subnav .home,#subnav .list01,#subnav .list02 .name{display: none}
    #subnav .list02 {position: relative;}
    #subnav .list02 .listmenu{display: flex;justify-content: center;text-align: center;}
    #subnav .list02 .listmenu a{display: inline-block;line-height: 1.8em;padding:0.8em 0;}
    #subnav .list02 .listmenu a+a{margin-left:3em}
    #subnav .list02 .listmenu a.on{color : var(--pointcolor);font-weight: 500;border-bottom:4px solid var(--pointcolor)}
}

@media (max-width:990px) {
    #subnav .inner{display: flex;width:100%;max-width:500px;border-left:1px solid #eee;border-right:1px solid #eee}
    #subnav a{display: block}
    #subnav .home{width:38px;padding:10px;align-self: center;flex-shrink: 0}
    #subnav .list {border-left:1px solid #eee;position: relative;}
    #subnav .list .name{padding:0.9rem; padding-right:3em;width:100%}
    #subnav .list .name:after{display: block;content:'';position: absolute;right:10px;background: url(/img/subnav_arr.png) no-repeat center center / contain;padding: 8px;top: 50%;transform: translateY(-50%);}

    #subnav .list01 {display: flex;align-items: center;width:100%}
    #subnav .list .listmenu{display: none;position: absolute;width:calc(100% + 2px);background: #fff;z-index: 10;bottom:0;transform:translateY(100%);left: -1px;border:1px solid #eee}
    #subnav .list .listmenu a{padding:0.9rem}
    #subnav .list .listmenu a:hover{background: var(--pointcolor);color: #fff;}

    #subnav .list.active .name:after{transform: rotate(180deg) translateY(50%)}
    #subnav .list.active .listmenu{display: block}

    #subnav .list02{display: none;}
}

/* ============= background ============= */
.RD_bg{background:url(/images/sub/RD/RDbg.jpg) no-repeat center center / cover;}
.RD_bg2{background:url(/images/sub/RD/RDbg2.png) no-repeat center center / auto 100%}
.welfare_bg{height: 22em;background:url(/images/sub/HR/benefits.jpg) no-repeat center center / cover}

/* ============= iconList ============= */
.iconList .imgbox{width: 3em;}

/* ============= HistoryList ============= */
.HistoryList{position: relative;}
.HistoryList:before{content: ''; position: absolute; width: 1px;height: 100%; background: #ddd; left:12em;z-index: -1;}
.HistoryList li{display: flex; justify-content: space-between ;}
.HistoryList li+li{margin-top:15px}
.HistoryList .year{position: relative;;display: block; width:10em ; text-align: center; font-weight: bold; align-self: flex-start;padding: 1.5em 1em;}
.HistoryList .year:before{content: ''; position: absolute; right: -2.3em; top: 50%; width: 0.6em; height: 0.6em; background: #fff; transform: translateY(-50%); border-radius: 50%; border: 0.1em solid var(--pointcolor2);}
.HistoryList .txt{ width: calc(100% - 14em); --pdValue:1.5em 2em}

@media (max-width:500px) {
    .HistoryList li{flex-direction: column;}
    .HistoryList:before{left:1em;}
    .HistoryList .txt{width: calc(100% - 3em);margin-top: 1em;margin-left: auto;}
    .HistoryList .year:before{left:10px; bottom:-4em;top:auto}
}

/* ============= Chart ============= */
.Chart{--chartH:30px}
.Chart .Tit{display: inline-block;border:1px solid #bbb; border-radius: 5em;}
.Chart .Tit p{border:0.3em solid #fff; width:10em; padding:1em 2em; border-radius: 5em;}

.Chart .List{position: relative;;padding-top: var(--chartH);display: flex; justify-content: space-between;}
.Chart .List:before{content:''; position: absolute;top: 0;left: 50%;border-left: 1px solid #bbb; height: var(--chartH); margin-left: -1px; z-index: -1;}
.Chart .List li{width:20%;position: relative;margin-top:var(--chartH);padding:0 1em}
.Chart .List .dot{display: block; margin:0 auto 1em; width:10px;height: 10px; border-radius: 50%; border:2px solid var(--pointcolor2); position: relative; background:#fff}

.Chart .List li::before,.Chart .List li::after{content:'';position: absolute;top: calc(var(--chartH) * -1); left:0;border-top: 1px solid #bbb;height: var(--chartH);width:50%;}
.Chart .List li::before{right:50%;border-right: 1px solid #bbb;}
.Chart .List li::after{left:50%}
.Chart .List li:first-child::after{border-left: 1px solid #bbb;border-radius: 10px 0 0 0; }
.Chart .List li:last-child::before{border-right: 1px solid #bbb;border-radius: 0 10px 0 0;}

.Chart .List li:first-child::before,.Chart .List li:last-child::after{border:0 none}
.Chart .List li:first-child .dot:before,.Chart .List li:last-child .dot:before{display: none;}

@media (max-width:990px) {
    .Chart {display: flex; justify-content: space-between;}
    .Chart .Tit{display: flex; }
    .Chart .Tit p{width:auto; writing-mode: tb; padding:3em 1em; letter-spacing: 0.5em;}
    .Chart .List {flex-direction: column; padding-top:0;width: calc(100% - 6.5em)}
    .Chart .List:before {border:none;width:5em;height: 1px; background: #bbb; top:calc(50% + 4px); left: -3em;}
    .Chart .List .dot{position: absolute;top:50%; transform: translateX(-50%); left: 1.5em;}
    .Chart .List li{width:100%;margin-top:0;padding-left:1.5em; padding-right:0}
    .Chart .List li+li{margin-top:10px}
    .Chart .List li::before{z-index: -1;height: 4.5em; border-left:1px solid #ddd; border-right:none}
    .Chart .List li:nth-child(4):before{border-top:none}
    .Chart .List li:last-child:before{border-bottom:1px solid #ddd;border-right:none}
    .Chart .List li::after{display: none;}
}

/* ============= Information ============= */
.Information {--x-gap:3em;--y-gap:3em}
.Information .mapbox{position: relative; height: 20em;}
.Information .tit{position: relative; padding-bottom:0.5em;margin-bottom:0.7em}
.Information .tit::after{content:'';position: absolute;left: 0;bottom: 0;width:2em;border-bottom:2px solid var(--pointcolor)}

/* ============= ProcessList ============= */
.ProcessList .box{display: flex; flex-direction: column;}
.ProcessList .box .nameTag{min-height: 4.5em; background: #333; color: #fff;}
.ProcessList .box:nth-child(even) .nameTag{background: var(--pointcolor2)}
.ProcessList .txtdiv{padding:2em 1.5em}

/* ============= roundList ============= */
.roundList{display: flex; flex-direction: column; gap:1em;}
.roundList li{display: flex;justify-content: center;align-items: center;background: #fff;border: 0.5em solid #ced4df;padding: 2em 4em;border-radius: 10em;min-height: 10em;}

/* ============= pipeline ============= */
.pipeline {--arrSz:0.7em;}
.pipeline table{width:100%;border-collapse: collapse; border-spacing: 0; text-align: center; vertical-align: middle }
.pipeline td { border-color: #ddd; border-style: solid; border-width: 1px; padding:1em}
.pipeline th { background-color: var(--pointcolor); border-color: #fff; border-style: solid; border-width: 1px; color: #fff;  padding:0.8em}
.pipeline td:first-child {border-left: none;border-right:none}
.pipeline td:last-child {border-right: none;}
.pipeline td.bg-light-gray{border-right-color: var(--light-gray );border-left-color: var(--light-gray )}
.pipeline tr:last-child td{border-bottom-color: var(--pointcolor)}

.pipeline .arrbox{position:relative;z-index: 1;line-height: 1; ;/* width: var(--arrW,100%); */height: var(--arrSz);}
.pipeline .arrbox:before,.pipeline .arrbox:after{position: absolute;content:'';top:50%;height: 100%;;transform: translateY(-50%);}
.pipeline .arrbox:before{left: 0;background:#4777c8;width:calc(100% - var(--arrSz)); }
.pipeline .arrbox:after{right: 1px;border: var(--arrSz) solid transparent; border-left: var(--arrSz) solid #4777c8;border-right:0; }

/* ======> 화살표 너비크기 설정 */
.pipeline td:has(.arrbox){padding:0}
.pipeline tr:nth-child(2) {--arrW: calc(75% - var(--arrSz))}
.pipeline tr:nth-child(3) .arrbox,.pipeline tr:nth-child(4) .arrbox{--arrW: calc(100% - var(--arrSz) - 0.5em)}

    /* ======> 좌우 스크롤효과 */
    .pipeline::-webkit-scrollbar {height: 6px;}
    .pipeline::-webkit-scrollbar-thumb {background: var(--pointcolor2);}
    .pipeline .scroll-hint-icon {z-index: 2;height: 90px;}
    
    @media (max-width: 768px) {
        .pipeline{overflow-x:auto;padding-bottom:1em}
        .pipeline th{min-width:5em}
        .pipeline td{height: 6em;}
}

/* ============= recruit ============= */
.recruit{background: linear-gradient(to top, #fff 8em, transparent 8em), url(/images/sub/HR/recruitBG.jpg)  no-repeat center top / cover}
.recruit .cirList .box{border-radius: 50%; aspect-ratio: 1; background:#fff; box-shadow: 0 0 1em rgba(0,0,0,0.1); display: flex; flex-direction: column; padding:2em; justify-content: center;}

@media (max-width:990px) {
    .recruit .cirList{max-width: 40em;}
}
@media (max-width:500px) {
    .recruit {background: linear-gradient(to top, #fff 2em, transparent 8em), url(/images/sub/HR/recruitBG.jpg)  no-repeat center top / cover}
    .recruit .cirList{max-width: auto;}
    .recruit .cirList .box{border-radius: 0; aspect-ratio: auto;}
}

/* ============= recruitInfo  ============= */
.recruitInfo { --x-gap:4em}
.recruitInfo .box{position: relative;background: #f8f8f8; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column;justify-content: center; align-items: center;}
.recruitInfo .box+.box::before{left: -2em;transform: translateX(-50%); content:'';position: absolute;;width:0.7em;height: 1.5em; background: url(/images/sub/HR/arrows.png) no-repeat center center / contain;}

.acceptList{gap:2em 3em;--pdValue:1.5em 0 }

/* ============= benefitList  ============= */
.benefitList{--x-gap:3em;--y-gap:3em}