@charset "utf-8";

/*
최초 작업 시 1200px 구간을 작업 중간 시점 1179px 으로 변경, ▼
그렇지 않은 경우, 아이패드 가로형 또는 left가 일찍 사라지면 접근 불가능한 페이지가 생겼었음
*/


/* 공통 */
body{background-color: var(--bg);}

.wrap{position: relative; width: 100%; max-width: 1300px; margin: 0 auto;}

.scr-none{overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none;}
.scr-none::-webkit-scrollbar{display: none;}
@media (max-width: 1340px){
    .wrap{padding: 0 30px;}
}
@media (max-width: 1024px){
    .wrap{padding: 0 20px;}
}


/* 헤더 */
#header{position: relative; z-index: 3; box-shadow: var(--shadow_1); background-color: var(--white);}
#header .h_top{padding: 20px 0;}
#header .h_top > .wrap{display: flex; align-items: center; gap: 2.5rem;}
#header .h_top .logo a img.mobile{display: none;}
#header .h_top .sch_wrap{position: relative;}
#header .h_top .sch_wrap input{width: 420px; height: 52px; padding: 0 3.3rem 0 1.5rem; border: 1px solid var(--main); border-radius: 36px; font-size: 16px;}
#header .h_top .sch_wrap button{position: absolute; top: 0; right: 20px; font-size: 0; display: block; width: 30px; height: 100%; background: url(/assets/site/img/common/ico_sch.svg) no-repeat center;}
/* ▼ 아이콘 방식 */
/* #header .h_top .login{margin-left: auto; display: flex; gap: 10px;}
#header .h_top .login > li a{display: block; font-size: 0; width: 36px; height: 36px; background-repeat: no-repeat; background-size: contain;}
#header .h_top .login > li a.login{background-image: url(/assets/site/img/common/ico_login.svg);}
#header .h_top .login > li a.join{background-image: url(/assets/site/img/common/ico_join.svg);}
#header .h_top .login > li a.logout{background-image: url(/assets/site/img/common/ico_logout.svg);}
#header .h_top .login > li a.mypage{background-image: url(/assets/site/img/common/ico_join.svg);} */
/* ▼ 텍스트 방식 */
#header .h_top .login{margin-left: auto; display: flex;}
#header .h_top .login > li + li{display: flex; align-items: center;}
#header .h_top .login > li + li:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 10px; width: 1px; height: 10px; background-color: var(--line);}
#header .h_top .login > li a{display: block; font-size: 14px; font-weight: var(--fwr); color: var(--sub_dim);}
#header .h_top .login > li a.login{}
#header .h_top .login > li a.join{}
#header .h_top .login > li a.logout{}
#header .h_top .login > li a.mypage{}

#header .h_mid{position: relative; z-index: 1;}
#header .h_mid > .wrap{display: flex; align-items: center;}
#header .h_mid .q_menu{display: flex; gap: 2.5rem;}
#header .h_mid .q_menu > li{position: relative;}
#header .h_mid .q_menu > li a{line-height: 60px; font-size: 1.063rem; font-weight: var(--fwsb);}
#header .h_mid .q_menu > li a:hover {color: var(--sub_dim);}
#header .h_mid .q_menu > li a.menu_all_btn{position: relative; padding: 0 0 0 35px;}
#header .h_mid .q_menu > li a.menu_all_btn .lines{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 26px; height: 20px;}
#header .h_mid .q_menu > li a.menu_all_btn .lines em{position: absolute; left: 0; display: inline-block; width: 100%; height: 2px; border-radius: 2px; background-color: var(--main);}
#header .h_mid .q_menu > li a.menu_all_btn .lines em:nth-child(1){top: 0;}
#header .h_mid .q_menu > li a.menu_all_btn .lines em:nth-child(2){top: 9px;}
#header .h_mid .q_menu > li a.menu_all_btn .lines em:nth-child(3){top: 9px;}
#header .h_mid .q_menu > li a.menu_all_btn .lines em:nth-child(4){top: 18px;}
#header .h_mid .q_menu > li a.hot:before{content: "hot"; font-size: 0; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 78px; height: 28px; background: url(/assets/site/img/common/hot.svg) no-repeat; background-size: contain;}

#header .h_mid .q_menu > li a.menu_all_btn.on {}
#header .h_mid .q_menu > li a.menu_all_btn.on .lines {}
#header .h_mid .q_menu > li a.menu_all_btn.on .lines em:nth-child(1) {width: 0%;}
#header .h_mid .q_menu > li a.menu_all_btn.on .lines em:nth-child(2) { transform: rotate(45deg);}
#header .h_mid .q_menu > li a.menu_all_btn.on .lines em:nth-child(3) {transform: rotate(-45deg);}
#header .h_mid .q_menu > li a.menu_all_btn.on .lines em:nth-child(4) {width: 0%;}


#header .h_mid .q_write{display: flex; gap: 1.5rem; margin-left: auto;}
#header .h_mid .q_write > li > a {display: inline-block; font-weight: var(--fwsb); vertical-align: middle; line-height: 20px;}
#header .h_mid .q_write > li > a::before {content: ''; display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: 0 8px 0 0;}
#header .h_mid .q_write > li > a::after {content: ''; display: inline-block; width: 6px; height: 6px; border-top: 2px solid var(--main); border-right: 2px solid var(--main); transform: rotate(45deg); margin: 0 0 2px 7px;}
#header .h_mid .q_write > li:nth-child(1) a::before {background: url(/assets/site/img/common/q_write_01.svg) no-repeat center center;}
#header .h_mid .q_write > li:nth-child(2) a::before {background: url(/assets/site/img/common/q_write_02.svg) no-repeat center center;}

#header .h_mid .q_write > li > a:hover {color: var(--sub_dim);}
#header .h_mid .q_write > li > a:hover::after {border-top: 2px solid var(--sub_dim); border-right: 2px solid var(--sub_dim);}


#header .h_quick{display: none; padding: 0 0 3px; border-bottom: 1px solid var(--line);}
#header .h_quick .tab_rowscr{position: relative; display: flex; width: auto; flex-wrap: nowrap; overflow-x: auto; gap: 12px; font-size: 0; text-align: left; background-color: #fff;}
#header .h_quick .tab_rowscr::-webkit-scrollbar{height: 5px; display: none;}
#header .h_quick .tab_rowscr::-webkit-scrollbar-thumb{border-radius: 10px; background-color: var(--gray_heavy);}
#header .h_quick .tab_rowscr::-webkit-scrollbar-track{border-radius: 10px; background-color: transparent;}
#header .h_quick .tab_rowscr:after{display: none; content: ""; flex: none; position: sticky; z-index: 1; right: 0; display: block; width: 30px; height: 100%; background: linear-gradient(90deg, rgba(248,249,250,0) 0%, rgba(248,249,250,1) 100%); pointer-events: none;}
#header .h_quick .tab_rowscr li{display: inline-block; width: auto; flex: 0 0 auto; font-size: 16px;}
#header .h_quick .tab_rowscr li a{position: relative; z-index: 1; display: block; line-height: 40px; padding: 0 6px; text-align: center; user-select: none; font-weight: var(--fwr); color: var(--main); transition: 0.1s;}
#header .h_quick .tab_rowscr li:first-child a{margin-left: 20px;}
#header .h_quick .tab_rowscr li a.on{color: var(--main);}
#header .h_quick .tab_rowscr .bar{display: none; position: absolute; z-index: 0; top: 0; left: 0; height: 100%; padding: 0; transition: 0.1s; background-color: #abc; background-clip: content-box; border-radius: 10px;}

#header .m_menu_btn{display: none; position: absolute; z-index: 3; right: 20px; top: 27px; width: 24px; height: 18px; font-size: 0; margin: 0; padding: 0;}
#header .m_menu_btn em{font-size: 0; width: 0; height: 0; line-height: 0; margin: 0; padding: 0; position: absolute; left: -9999px; overflow: hidden;}
#header .m_menu_btn span{position: absolute; left: 50%; display: block; width: 100%; height: 2px; border-radius: 2px; background-color: var(--main); transform: translateX(-50%) rotate(0deg); transition: 0.25s ease-in-out;}
#header .m_menu_btn span:nth-child(1){top: 0;}
#header .m_menu_btn span:nth-child(2){top: 8px;}
#header .m_menu_btn span:nth-child(3){top: 8px;}
#header .m_menu_btn span:nth-child(4){top: 16px;}
#header .m_menu_btn.on span:nth-child(1){width: 0%; top: 8px; left: 50%;}
#header .m_menu_btn.on span:nth-child(2){margin-left: -13px; top: 8px; transform: rotate(45deg); width: 110%;}
#header .m_menu_btn.on span:nth-child(3){margin-left: -13px; top: 8px; transform: rotate(-45deg); width: 110%;}
#header .m_menu_btn.on span:nth-child(4){width: 0%; top: 8px; left: 50%;}

#header .m_menu{display: none;}
@media (max-width: 1280px){
    #header .h_mid .q_write > li .btn{width: 120px;}
}
@media (max-width: 1024px){
    #header .h_mid{display: none;}

    #header .h_top{padding: 17px 0 10px;}
    #header .h_top > .wrap{flex-direction: column; gap: 15px;}
    #header .h_top .logo a img.pc{display: none;}
    #header .h_top .logo a img.mobile{display: block; width: 150px;}
    #header .h_top .login{position: absolute; left: 20px; top: 0; flex: none; margin-left: 0; display: block; gap: initial;}
    #header .h_top .login > li a{display: block; font-size: 0; width: 36px; height: 36px; background-repeat: no-repeat; background-size: contain;}
    #header .h_top .login > li a.login{background-image: url(/assets/site/img/common/ico_login.svg);}
    #header .h_top .login > li a.join{background-image: url(/assets/site/img/common/ico_join.svg);}
    #header .h_top .login > li a.logout{background-image: url(/assets/site/img/common/ico_logout.svg);}
    #header .h_top .login > li a.mypage{background-image: url(/assets/site/img/common/ico_join.svg);}
    #header .h_top .login > li:nth-child(2){display: none;}


    #header .h_top .sch_wrap{width: 100%;}
    #header .h_top .sch_wrap input{width: 100%;}

    #header .h_quick{display: block;}
    #header .h_quick .tab_rowscr:after{width: 20px;}

    #header .m_menu_btn{display: block;}
    #header .m_menu_btn.on{position: fixed;}

    #header .m_menu{display: flex; flex-direction: column; position: fixed; z-index: 2; top: 0; bottom: 0; height: 100%; left: 100%; transform: translateX(0); opacity: 0; visibility: hidden; width: 100%; transition: all 0.25s ease-in-out; background-color: var(--bg);}
    #header .m_menu.on{transform: translateX(-100%); opacity: 1; visibility: visible;}
    #header .m_head{padding: 17px 20px 20px; background-color: var(--white); border-bottom: 12px solid var(--bg);}
    #header .m_head .top{display: flex; padding: 0 30px 8px 0;}
    #header .m_head .top .m_logo a img{width: 145px;}
    #header .m_head .top .btns_top{margin-left: auto; display: flex; gap: 3px;}
    #header .m_head .top .btns_top li a{display: block; width: 36px; height: 36px; background-repeat: no-repeat; background-size: contain; font-size: 0;}
    #header .m_head .top .btns_top li a.logout{background-image: url("/assets/site/img/common/ico_logout.svg");}
    #header .m_head .top .btns_top li a.mypage{background-image: url("/assets/site/img/common/ico_set.svg");}

    #header .m_head .log .txt{display: flex; align-items: center; font-size: 16px; color: var(--sub);}
    #header .m_head .log .txt strong{font-weight: var(--fwsb);}

    #header .m_head .login .txt{color: var(--main);}
    #header .m_head .login .txt a.logout{position: relative; margin-left: auto; font-size: 15px; color: var(--sub_dim); /* text-decoration: underline; */}
    #header .m_head .login .txt a.logout:before{content: ""; position: absolute; bottom: 3px; left: 0; right: 0; width: 100%; height: 1px; background-color: var(--sub_dim);}

    #header .m_head .login .btns_login{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 11px 0 9px;}
    #header .m_head .login .btns_login li{width: 25%; padding: 10px; box-sizing: border-box;}
    #header .m_head .login .btns_login li a{position: relative; display: block; padding: 72px 0 0; text-align: center; font-size: 14px; font-weight: var(--fwr); line-height: 1; color: var(--main);}
    #header .m_head .login .btns_login li a:before{content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 64px; height: 64px; border-radius: var(--radius_1); background-color: var(--gray_light); background-repeat: no-repeat; background-position: center; background-size: 80% auto;}

    /* #header .m_head .login .btns_login li.list a::before{background-image: url("/assets/site/img/common/ico_faq.svg");}
    #header .m_head .login .btns_login li.apply a::before{background-image: url("/assets/site/img/common/ico_apply.svg");}
    #header .m_head .login .btns_login li.ico_heart a::before{background-image: url("/assets/site/img/common/ico_heart.svg");}
    #header .m_head .login .btns_login li.resume a::before{background-image: url("/assets/site/img/common/ico_resume.svg");}
    #header .m_head .login .btns_login li.academy a::before{background-image: url("/assets/site/img/common/ico_acade.svg");}
    #header .m_head .login .btns_login li.human a::before{background-image: url("/assets/site/img/common/ico_human.svg");}
    #header .m_head .login .btns_login li.product a::before{background-image: url("/assets/site/img/common/ico_product.svg");}
    #header .m_head .login .btns_login li.support a::before{background-image: url("/assets/site/img/common/ico_support.svg");}
    #header .m_head .login .btns_login li.notice a::before{background-image: url("/assets/site/img/common/ico_notice.svg");}
    #header .m_head .login .btns_login li.faq a::before{background-image: url("/assets/site/img/common/ico_inq1.svg");}
    #header .m_head .login .btns_login li.ad a::before{background-image: url("/assets/site/img/common/ico_inq2.svg");}
    #header .m_head .login .btns_login li.inq a::before{background-image: url("/assets/site/img/common/ico_write.svg");}*/

    #header .m_head .login .btns_login li.list a::before {background-image: url("/assets/site/img/common/m_menu_01.svg");}
    #header .m_head .login .btns_login li.human a::before {background-image: url("/assets/site/img/common/m_menu_02.svg");}
    #header .m_head .login .btns_login li.support a::before {background-image: url("/assets/site/img/common/m_menu_03.svg");}
    #header .m_head .login .btns_login li.scraph a::before {background-image: url("/assets/site/img/common/m_menu_04.svg");}
    #header .m_head .login .btns_login li.product a::before {background-image: url("/assets/site/img/common/m_menu_05.svg");}
    #header .m_head .login .btns_login li.notice a::before {background-image: url("/assets/site/img/common/m_menu_06.svg");}
    #header .m_head .login .btns_login li.ad a::before {background-image: url("/assets/site/img/common/m_menu_07.svg");}
    #header .m_head .login .btns_login li.inq a::before {background-image: url("/assets/site/img/common/m_menu_08.svg");}

    #header .m_head .login .btns_login li.resume a::before {background-image: url("/assets/site/img/common/m_menu_09.svg");}
    #header .m_head .login .btns_login li.faq a::before {background-image: url("/assets/site/img/common/m_menu_10.svg");}



    #header .m_head .logout .btns_logout{display: flex; justify-content: space-between; gap: 6px; padding: 7px 0 0;}
    #header .m_head .logout .btns_logout li{flex: 1;}
    #header .m_head .logout .btns_logout li a{display: block; line-height: 42px; border-radius: var(--radius_1); text-align: center; font-size: 15px; color: #fff; background-color: var(--main);}
    #header .m_head .logout .btns_logout li a.theme{background-color: var(--theme);}

    #header .m_body{flex: 1; background-color: var(--bg);}
    #header .m_body .d1{position: relative; height: 100%;}
    #header .m_body .d1 > li{width: 25%;}
    #header .m_body .d1 > li > a{display: block; padding: 16px 0; font-size: 17px; font-weight: var(--fwr); color: var(--sub_bold); line-height: 141%; text-align: center;}
    #header .m_body .d1 > li > a.on{font-weight: var(--fwsb); color: var(--main); background-color: var(--white);}

    #header .m_body .d2{display: none; position: absolute; top: 0; left: 25%; width: 75%; height: 100%; padding: 28px 24px 30px; overflow-y: auto; overscroll-behavior: contain; background-color: var(--white);}
    #header .m_body .d2::-webkit-scrollbar{width: 4px; height: 4px;}
    #header .m_body .d2::-webkit-scrollbar-thumb{background-color: var(--line); border-radius: 10px; border: 3px solid transparent;}
    #header .m_body .d2::-webkit-scrollbar-track{background-color: transparent;}
    #header .m_body .d2> li{position: relative;}
    #header .m_body .d1 > li > a.on + .d2{display: flex; flex-direction: column; gap: 10px;}
    #header .m_body .d2 > li > a{display: block; font-size: 17px; font-weight: var(--fwm); line-height: 165%;}
    #header .m_body .d2 > li.current > a{font-weight: var(--fwb);}
    #header .m_body .d2 > li > a span{position: relative;}
    #header .m_body .d2 > li > a span.hot:after{content: "hot"; position: absolute; left: 100%; margin-left: 5px; top: 1px; display: block; width: 36px; height: 18px; font-size: 0; background: url("/assets/site/img/common/hot_m.svg") no-repeat center; background-size: contain;}

    #header .m_body .d3{display: flex; flex-wrap: wrap; padding: 5px 0; line-height: 1.8;}
    #header .m_body .d3 > li{width: 100%; color: var(--sub_bold);}
    #header .m_body .d3 > li > a:hover,
    #header .m_body .d3 > li > a:focus{text-decoration: underline;}
    #header .m_body .d3 > li > a.on{color: var(--main); font-weight: var(--fwm);}

    /* 모바일 메뉴 3차 : 2열 */
    #header .m_body .d2 > li:has(a[href*="/job/lists/occupation"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/job/lists/period"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/human/lists/occupation"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/human/lists/period"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/job/lists/industry"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/human/lists/career"]) .d3 > li{width: 50%; padding-right: 2px;}

    /* 모바일 메뉴 3차 : 3열 */
    #header .m_body .d2 > li:has(a[href*="/job/lists/region"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/human/lists/region"]) .d3 > li{width: 33.333%; padding-right: 2px;}

    /* 모바일 메뉴 3차 : 4열 */
}
@media (max-width: 640px){
    #header .m_body .d1 > li{width: 154px;}
    #header .m_body .d2{width: calc(100% - 154px); left: 154px;}
    #header .m_body .d2 > li:has(a[href*="/job/lists/occupation"]) .d3 > li,
    #header .m_body .d2 > li:has(a[href*="/human/lists/occupation"]) .d3 > li {width: 100%;}
}
@media (max-width: 460px){
    #header .h_quick .tab_rowscr {gap: 8px;}
    #header .h_quick .tab_rowscr li:first-child a {margin-left: 10px;}
}


/* 헤더 고정 (헤더 고정 부분 작업 초기 있었다가 중반에 클라이언트 요구로 뺴놓은 상태)*/
body.h_fixed{margin-top: 170px; /* 헤더 고정 시 덜컥거림 없애는 용도 */}
#header.h_fixed{position: fixed; top: 0; left: 0; right: 0; animation: smoothScroll 0.25s forwards; animation-timing-function: ease;}
#header.h_fixed .h_mid .q_menu > li a.hot:before{display: none;}
#header.h_fixed .h_top{display: none;}
@media (max-width: 1024px){
    body.h_fixed{margin-top: 0;}
    #header.h_fixed{position: static; top: auto; left: auto; right: auto; animation: none;}
    #header.h_fixed .h_top{display: block;}
}


/* 헤더 스크롤 방향에 따라 숨김, 보임 */
@media (max-width: 640px){
    #header.out{animation: none; transform: translateY(-100%); transition: 0.15s ease;}
}


/* 전체 메뉴 */
#menu_all_wrap{position: absolute; top: 60px; left: 0; width: 100%; background-color: #fff; height: 0; overflow: hidden; border: none;}
#menu_all_wrap.on{height: auto; border-top: 2px solid var(--theme); box-shadow: 0 5px 5px rgba(0,0,0,0.05)}
#menu_all_wrap .d1{display: flex;}
#menu_all_wrap .d1 > li{position: relative; flex: 1; padding: 15px 0 0;}
#menu_all_wrap .d1 > li:nth-last-child(-n+2){background-color: #fafafa;}
body.login #menu_all_wrap .d1 > li{background-color: transparent !important;}
body.login #menu_all_wrap .d1 > li:nth-last-child(1){background-color: #fafafa !important;}
#menu_all_wrap .d1 > li+li{border-left: 1px solid var(--line);}
#menu_all_wrap .d1 > li.hide{display: none;}
#menu_all_wrap .d1 > li > a{display: block; padding: 8px 20px 8px 24px; font-size: 15px; font-weight: var(--fwsb); line-height: 140%;}
#menu_all_wrap .d1 > li > a:hover{text-decoration: underline; font-weight: var(--fwb);}
#menu_all_wrap .d1 > li > a span{position: relative; display: block; padding: 0 10px 0 0;}
#menu_all_wrap .d1 > li > a span:after{content: ""; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); right: 1px; display: block; margin: 0; width: 8px; height: 8px; border-top: 2px solid #111; border-right: 2px solid #111;}

#menu_all_wrap .d2{display: flex; flex-direction: column; gap: 6.2px; padding: 2px 0 23px;}
#menu_all_wrap .d2 > li{position: relative;}
#menu_all_wrap .d2 > li > a{display: block; padding: 0 20px 0 24px; line-height: 1.2; font-size: 14px; font-weight: var(--fwr); color: #555;}
#menu_all_wrap .d2 > li.current > a{font-weight: var(--fwsb); color: var(--main);}
#menu_all_wrap .d2 > li > a:hover{text-decoration: underline; font-weight: var(--fwsb); color: #333;}

#menu_all_wrap .d3{display: flex; flex-wrap: wrap; display: none !important; font-size: 13px; font-weight: var(--fwr); padding: 10px 15px; color: var(--dotted); border-radius: 6px; margin: 10px 20px 10px 24px; width: calc(100% - 44px); background-color: #f6f6f6;}
#menu_all_wrap .d3 > li{width: 100%;}
#menu_all_wrap .d2 > li:has(a[href*="/job/lists/region"]) .d3 > li,
#menu_all_wrap .d2 > li:has(a[href*="/human/lists/region"]) .d3 > li,
#menu_all_wrap .d2 > li:has(a[href*="/job/lists/period"]) .d3 > li{width: 33.333%;}
#menu_all_wrap .d3 > li > a{}
#menu_all_wrap .d3 > li > a:hover,
#menu_all_wrap .d3 > li > a:focus{text-decoration: underline; color: var(--main);}
#menu_all_wrap .d3 > li > a.on{color: var(--main); font-weight: var(--fwsb);}


/* 구분선 : common.js 에서 클래스 넣을 요소 지정 */
#menu_all_wrap .d2 > li.line:after{content: ""; display: inline-block; vertical-align: middle; width: calc(100% - 44px); margin: 3px 20px 0 24px; height: 1px; background-color: var(--gray_heavy);}
#header .m_body .d2 > li.line:after{content: ""; display: inline-block; vertical-align: middle; margin: 7px 0 0; width: 100%; height: 1px; background-color: var(--gray_heavy);}


/* 모바일 (단순 화면너비 구분 아닌 기기 구분 후 태블랫 or 모바일에만 적용) */
#header.header_mobile_sub{box-shadow: none;}
#header.header_mobile_sub .h_top{padding: 20px 0 19px;}
#header.header_mobile_sub .h_top > .wrap{display: flex; flex-direction: row; align-items: center; gap: initial; padding-right: 59px;}

#header.header_mobile_sub .h_top .btn_back{display: inline-block; vertical-align: top; margin: 0 6px 0 0; width: 30px; height: 18px; background: url("/assets/site/img/common/arr_page_tit.svg") no-repeat; font-size: 0;}
#header.header_mobile_sub .h_top .page_tit{font-size: 24px; font-weight: var(--fwsb);}

#header.header_mobile_sub .h_top .btn_m_sch{margin-left: auto; display: inline-block; width: 24px; height: 24px; font-size: 0; background: url("/assets//site/img/common/sch_page_tit.svg") no-repeat;}
#header.header_mobile_sub .h_top .scrap{display: inline-block; width: 27px; height: 27px; background-image: url(/assets/site/img/common/btn_scrap2_l.svg); background-position: center bottom; transition: background 0.2s; background-size: 27px auto;}
#header.header_mobile_sub .h_top .scrap.on{background-position: center top;}

#header.header_mobile_sub .h_top .sch_wrap{display: none; position: fixed; z-index: 10; top: 0; left: 0; width: 100%; padding: 20px 20px 19px; background-color: var(--bg);}
#header.header_mobile_sub .h_top .sch_wrap.on{display: block;}
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top{position: relative;}
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top h3{font-size: 24px; font-weight: var(--fwsb); padding: 0 0 10px;}
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top button{font-size: 0; position: absolute; top: 2px; right: 0; display: block;  width: 24px; height: 24px; background: none;}
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top button:before,
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top button:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background-color: var(--main);}
#header.header_mobile_sub .h_top .sch_wrap .sch_m_top button:after{width: 2px; height: 100%;}
#header.header_mobile_sub .h_top .sch_wrap button{top: 61px; right: 35px; height: 48px;}


/* 푸터 */
#footer{font-size: 0.938rem; font-weight: var(--fwr);}
#footer .link{border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--sub);}
#footer .link .list{display: flex; justify-content: space-between;}
#footer .link .list > li + li{position: relative;}
#footer .link .list > li a{display: block; padding: 13px 0px; font-size: 15px;}

#footer .f_body{display: flex; flex-direction: column; gap: 1rem; padding-top: 2.5rem; padding-bottom: 2.5rem; color: var(--sub_dim); text-align: center;}
#footer .f_body .logo{flex: 0 0 auto;}
#footer .f_body .info{flex: 1;}
#footer .f_body .info .address{display: block; line-height: 150%;}
#footer .f_body .info .address span{position: relative;}
#footer .f_body .info .address span:nth-child(1){font-size: 15px;}
#footer .f_body .info .address span + span:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 0.5rem 0; width: 1px; height: 13px; background-color: var(--line);}
#footer .f_body .info .copyright{padding: 0.5rem 0 0; font-size: 12px; color: var(--dotted);}

/* 관련사이트 */
#footer .family_site{display:none;}
#footer .family_site .area{position: relative; display: block;}
#footer .family_site button{font-size: 0.938rem; background: #fff; display: block; width: 100%; padding: 12px 15px; position: relative; border-radius: var(--radius_1); text-align: left; border: 1px solid var(--line); box-sizing: border-box; cursor: pointer; white-space: nowrap; outline: none; color: #222;}
#footer .family_site button::after {content:''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: inline-block; width: 6px; height: 6px; border-right: 2px solid var(--dotted_deep); border-bottom: 2px solid var(--dotted_deep); transform: rotate(45deg); margin-top: -3px;}
#footer .family_site button.active::after {transform: rotate(-135deg);}
#footer .family_site ul{display: none; overflow: hidden; position: absolute; bottom: 48px; right: 0; border-radius: var(--radius_1); background: #fff; border: 1px solid var(--line); box-sizing: border-box; color: #222; z-index: 1; width: 100%;}
#footer .family_site li{ box-sizing: border-box; transition: 0.2s;}
#footer .family_site li a{display: block; padding: 12px 15px; text-align: left; font-size: 0.938rem; position: relative;}
#footer .family_site li a::after {content: ''; display: block; width: calc(100% - 30px); height: 1px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-bottom: 1px dashed var(--line);}
#footer .family_site li:last-child a::after {content: none;}

@media (max-width: 1024px){
    #footer {display: flex; flex-direction: column; border-top: 1px solid var(--line); background: #f9f9f9; padding-bottom: 1.5rem;}

    #footer .link {order:2; border: 0; position: relative;}
    #footer .link .list {justify-content: flex-start; row-gap: 5px; column-gap: 5px; flex-wrap: wrap; padding-top: 1rem;}
    #footer .link .list li:nth-child(1) {display: none;}
    #footer .link .list li:nth-child(6) {display: none;}
    #footer .link .list > li a {font-size: 0.938rem; padding: 0px;}

    #footer .f_body {order:1; padding-top: 1.5rem; padding-bottom: 0; text-align: left;}
    #footer .f_body .logo {display: none;}
    #footer .f_body .info .address span {white-space: nowrap; word-break: break-all;}
    #footer .f_body .info .address span:nth-child(1) {display: block; margin-bottom: 5px;}
    #footer .f_body .info .address span:nth-child(2)::before {content: none;}
    #footer .f_body .info .address span:nth-child(4) {display: block;}
    #footer .f_body .info .address span:nth-child(4)::before {content: none;}
    #footer .f_body .info .address span:nth-child(5)::before {content: none;}
    #footer .f_body .info .address span:nth-of-type(7) {display: block; white-space: break-spaces;}
    #footer .f_body .info .address span:nth-of-type(7)::before {content: none;}


    #footer .family_site {display: block;}
}
@media (max-width: 460px) {
    #footer {font-size: 0.85rem;}
    #footer .link .list > li a {font-size: 0.9rem;}

}




/* 최상단 팝업 */
.top_popup{position: relative; height: 102px; background-color: #000; overflow: hidden;}
.top_popup.closed{height: 0;}
.top_popup .img{position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%);}
.top_popup .img img{position: relative; left: 50%; transform: translateX(-50%); max-width: none; height: 100%; vertical-align: top;}

.top_popup > .wrap{position: relative; height: 100%;}
.top_popup .tpu_btn_wrap{position: absolute; top: 14px; right: 0; display: inline-flex; align-items: center; gap: 17px;}
.top_popup .tpu_btn_wrap .tpu_btn{display: block; color: #fff; font-size: 12px; font-weight: 500;}
.top_popup .tpu_btn_wrap .tpu_btn.today{position: relative; margin: 3px 0 0;}
.top_popup .tpu_btn_wrap .tpu_btn.today .chk_shape{position: relative; display: inline-block; margin: 0 6px 0 0; vertical-align: top; width: 18px; height: 18px; border-radius: 4px; border: 1px solid #fff;}
.top_popup .tpu_btn_wrap .tpu_btn.today .chk_shape:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -74%) rotate(-45deg); width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0;}
.top_popup .tpu_btn_wrap .tpu_btn.today.on .chk_shape:before{opacity: 1;}

.top_popup .tpu_btn_wrap .tpu_btn.close{position: relative; width: 25px; height: 25px; font-size: 0;}
.top_popup .tpu_btn_wrap .tpu_btn.close:before,
.top_popup .tpu_btn_wrap .tpu_btn.close:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);; width: 100%; height: 2px; background-color: #fff;}
.top_popup .tpu_btn_wrap .tpu_btn.close:after{transform: translate(-50%, -50%) rotate(45deg);}
@media (max-width: 1280px){
    .top_popup{height: 100px;}
    .top_popup .tpu_btn_wrap{right: 30px;}
}
@media (max-width: 1024px){
    .top_popup{height: 80px;}
    .top_popup .tpu_btn_wrap{right: 15px;}
    .top_popup .tpu_btn_wrap .tpu_btn.today .chk_shape{margin: 0 6px 0 0}
}
@media (max-width: 860px){
    .top_popup{height: auto;}
    .top_popup .img{position: static; top: auto; left: auto; transform: none;}
    .top_popup .img img{position: relative; left: 50%; transform: translateX(-50%); width: 200%;}
    .top_popup > .wrap{position: absolute; top: 0; right: 0;}
}
@media (max-width: 640px){
    .top_popup > .wrap{position: static; display: flex; justify-content: flex-end; padding: 5px 20px; background-color: #343B48;}
    .top_popup .tpu_btn_wrap{position: static; top: auto; right: auto;}
    .top_popup .tpu_btn_wrap .tpu_btn.close{width: 20px; height: 20px;}
    .top_popup .tpu_btn_wrap .tpu_btn.today{margin: 1px 0 0;}
}
@media (max-width: 460px){
    .top_popup .img img{width: 1200px;}
}


/*▼*********************************************▼*/
/*▼********** 서브페이지 레이아웃 **************▼*/
/*▼*********************************************▼*/

.sub_container > .wrap{display: flex; align-items: flex-start; gap: 52px; padding-top: 20px; padding-bottom: 100px;}
.sub_container > .wrap:has(.sub_hasRight){gap: 40px;}
@media (max-width: 1179px){
    .sub_container > .wrap{display: block; gap: initial;}
}

/* 서브페이지 좌측 영역 ( only depth2 / 있는 페이지도 있고 없는 페이지도 있음 ) */
#left{width: 223px; border: 1px solid #e9e9e9; border-radius: 12px; overflow: hidden;}
#left .d2 > li+li{border-top: 1px solid #e9e9e9;}
#left .d2 > li > a{position: relative; display: block; font-size: 16px; padding: 17px 24px; line-height: 140%; background-color: #fff;}
#left .d2 > li.current > a{font-weight: var(--fwsb); background-color: var(--theme_light);}
#left .d2 > li.current > a:before{content: ""; position: absolute; top: 24px; right: 21px; display: block; width: 7px; height: 7px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg);}

#left .d3{display: none; padding: var(--gap); flex-wrap: wrap; row-gap: 12px; line-height: 1; background-color: var(--white);}
#left .d2 > li.current .d3{display: flex;}
#left .d3 > li{width: 100%;}
#left .d3 > li > a{font-size: 13px; font-weight: var(--fwr); color: var(--sub);}
#left .d3 > li > a.on{font-weight: var(--fwsb); color: var(--main)}
#left .d3 > li > a:hover,
#left .d3 > li > a:focus{text-decoration: underline; color: #111;}

/* 3차 메뉴 : 2열 */
/* #left .d2 > li:has(a[href*="/job/lists/occupation"]) .d3 > li,
#left .d2 > li:has(a[href*="/human/lists/occupation"]) .d3 > li{width: 50%; padding-right: 2px;} */

/* 3차 메뉴 : 3열 */


/* 3차 메뉴 : 4열 */
#left .d2 > li:has(a[href*="/job/lists/region"]) .d3 > li,
#left .d2 > li:has(a[href*="/human/lists/region"]) .d3 > li{width: 25%; padding-right: 2px;}

@media (max-width: 1179px){
    #left{display: none;}
}


/* 서브페이지 본문 영역 */
@media (max-width: 1179px){
    #form_job_filter + .sec,
    #form_resume_filter + .sec{margin-top: 0;}
}

.sub_contents{flex: 1; min-width: 0;}
.sub_contents.sub_member{max-width: 640px; margin: 0 auto;}
.sub_contents.sub_join{max-width: 925px; margin: 0 auto;}
.sub_contents.newWindow{max-width: 1200px; margin: 0 auto;}
.sub_contents.sub_join.my{flex: 1; min-width: 0; max-width: none;}

.sub_tit{display: flex; padding: 7px 0 25px;}
.sub_tit + *{margin-top: 0 !important;}
.sub_tit + form .sec:first-of-type{margin-top: 0;}

.sub_tit h3{font-size: 28px; font-weight: var(--fwsb);}
.sub_tit .location{margin-left: auto; display: inline-flex; gap: 19px; align-items: center; font-size: 12px; font-weight: var(--fwr); color: #888;}
.sub_tit .location > li{position: relative;}
.sub_tit .location > li:first-child a{font-size: 0; display: block; width: 12px; height: 12px; margin-top: -3px; background: url("/assets/site/img/common/ico_location_home.svg") no-repeat center; background-size: contain;}
.sub_tit .location > li:last-child{font-weight: var(--fwsb); color: #555;}
.sub_tit .location > li+li:before{content: ""; position: absolute; top: 50%; transform: translateY(-47%) rotate(45deg); left: -12px; width: 4px; height: 4px; border-top: 1px solid #999; border-right: 1px solid #999;}

.sub_tit .tit_btns{margin-left: auto; display: flex; align-items: center;}
.sub_tit .tit_btns > li+li:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 12px 0; width: 1px; height: 22px; background-color: var(--line);}
.sub_tit .tit_btn{position: relative; padding: 0 0 0 22px; font-size: 13px; color: #888;}
.sub_tit .tit_btn:before{content: ""; position: absolute; top: -3px; left: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center;}
.sub_tit .tit_btn_share:before{background-image: url("/assets/site/img/common/tit_btn_share.svg");}
.sub_tit .tit_btn_print:before{background-image: url("/assets/site/img/common/tit_btn_print.svg");}
@media (max-width: 1500px){
    .sub_contents.newWindow{padding: 0 30px;}
}
@media (max-width: 1179px){
    .sub_tit .location > li:first-child a{margin-top: 0; }
}
@media (max-width: 1024px){
    .sub_contents.newWindow{padding: 0 20px;}
}
@media (max-width: 860px){
    .sub_tit{display: none;}
}


/* 서브페이지 우측 영역 ( 개인서비스 이력서 등록, 업체서비스 공고 등록, 아카데미 관리 페이지에만 ) */
#right{position: relative; top: 0; transition: 0.1s;}
#right .field_state{border-radius: 8px; border: 1px solid var(--line); padding: var(--gap) var(--gap_s);}
#right .field_state .title{font-size: 18px; font-weight: var(--fwsb); line-height: 1.22; padding: 0 0 12px;}
#right .field_state .f_list{display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: var(--fwm); color: #999; line-height: 1.34;}
#right .field_state .f_list > li .btn_scroll{display: block;}
#right .field_state .f_list > li .btn_scroll.complete{color: var(--main);}
#right .field_state .f_list > li .btn_scroll:before{content: ""; display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: 0 6px 0 0; background: url("/assets/site/img/common/chk_field_state.svg") no-repeat center; background-size: contain;}
#right .field_state .f_list > li .btn_scroll.complete:before{filter: brightness(0) saturate(100%);}
#right .btn_wrap{padding: 12px 0;}
#right .btn_wrap .btn{line-height: 65px; font-size: 16px; font-weight: var(--fwsb);}
#right .stamp{text-align: center; font-size: 14px; font-weight: var(--fwm); color: #999;}
#right .field_state .seperator{display: block; padding: 0; margin: 20px auto; appearance: none; -webkit-appearance: none; height: 1px; border: none; border-top: 1px dashed var(--line);}
@media (max-width: 1179px){
    #right{display: none;}
}


/* 스크램 알림 */
#scrap_alert{position: fixed; z-index: 4; top: 0; left: 0; width: 100%; line-height: 30px; text-align: center; font-size: 0.9rem; background-color: rgba(0,0,0,0.8); color: #fff; transition: all 0.25s; transform: translateY(-100%); opacity: 0; visibility: hidden;}
#scrap_alert.show_alert{transform: translateY(0); opacity: 1; visibility: visible;}


/* Css Animations */
@keyframes smoothScroll {
    0% {transform: translateY(-100%);}
	100% {transform: translateY(0%);}
}



.quick_menu {position: fixed; right: 50px; bottom: 50px; z-index: 99999;}
.quick_menu ul {display: flex; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 10px 10px 25px; border-radius: 50px;}
.quick_menu ul li {border-top: 1px solid var(--gray_heavy); font-size: 14px; text-align: center; padding: 8px;}
.quick_menu ul li:first-of-type {border-top: 0;}
.quick_menu ul li a {font-weight: var(--fwm);}
.quick_menu ul li a::before {content: ''; display: block; width: 50px; height: 45px; margin: 0 auto; background-position: center center; background-size: 55% auto; background-repeat: no-repeat;}

.quick_menu ul li.list a::before {background-image: url("/assets/site/img/common/ico_faq.svg");}
.quick_menu ul li.human a::before {background-image: url("/assets/site/img/common/ico_human.svg");}
.quick_menu ul li.product a::before {background-image: url("/assets/site/img/common/ico_product.svg");}
.quick_menu ul li.academy a::before {background-image: url("/assets/site/img/common/ico_acade.svg");}

.quick_menu ul li.apply a::before {background-image: url("/assets/site/img/common/ico_apply.svg");}
.quick_menu ul li.ico_heart a::before {background-image: url("/assets/site/img/common/ico_heart.svg");}
.quick_menu ul li.resume a::before {background-image: url("/assets/site/img/common/ico_resume.svg");}

.quick_menu .to_top {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; letter-spacing: 2px; width: 53px; height: 53px; border-radius: 50%; margin: -20px auto 0; font-size:11px; font-weight: var(--fwb); text-align: center; color: #fff; background: var(--main);}
.quick_menu .to_top::before {content: ''; display: inline-block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); margin-bottom: 2px;}

@media (max-width: 1400px){
    .quick_menu {right: 30px; bottom: 30px;}
}

@media (max-width: 1024px){
    .quick_menu {display: none;}
}