.flexbox{display: flex;justify-content: space-between}
.spbetween{justify-content: space-between}
.alignc{align-items: center}
.flex1{flex:1}

.titbox h3{font-size:26px;color:#000;font-weight:800;display:flex;align-items: center}
.titbox h3 span{margin-left:10px;font-weight:400;display:inline-block;background:#285BF3;color:#fff;font-size:12px;padding:5px 14px;border-radius:3px}
.titbox h3 em.view_icon{margin-left:10px}


/*header*/
.header_top{position:relative;align-items: center;width: 100%;height: 40px;background: linear-gradient(90deg, #673AFF 0%, #4C98FF 100%);padding:10px;
    display:flex}
.header_top h1{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;justify-content:center;font-weight:400;align-items:center;color:#fff;font-size:10px;gap:15px;background:url(/pages/kjcareer/img/main/simbol.png) no-repeat left center;padding-left:20px;background-size:15px}
.header_topbox{margin:0 auto;}
.header_top_site{align-items:center;display:flex;justify-content:center;     overflow: hidden;}
.header_top_site button{width:10px;height:11px;}
.header_top_site button.prev{background:url(/pages/kjcareer/img/main/header_top_prev.png) no-repeat left center}
.header_top_site button.prev{background:url(/pages/opendata/img/src/arrow) no-repeat left center}
.header_top_site button.next{background:url(/pages/kjcareer/img/main/header_top_next.png) no-repeat left center}
.header_top_site ul{display:flex;gap:20px;gap:10px;max-width:1000px;}
.header_top_site ul li a{font-size:11px;color:#fff;}
.header_top_site_m{display:none}

.header_wrap{position: sticky;height:80px}
.header_logo_wrap{padding:0 30px; margin:0 auto;max-width:100%;height:inherit;display:flex;align-items:center;justify-content: center}
.header_logo_wrap a.logo{position:absolute;left:30px;top:50%;transform:translateY(-50%)}
.header_right{position:absolute;right:30px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:20px}
.header_right ul{display:flex;align-items: center;justify-content:flex-end;}
.header_right ul li{padding:0 5px;display:flex;align-items: center}
.header_right ul li a{font-size:15px;border:1px solid #545454;border-radius:8px;padding:10px 20px}
.header_right ul li a:hover{background:#fff;color:#333;}
.header_right ul li.login a{border-left:1px solid #ddd;border-right:1px solid #ddd;padding:0 15px}


.header_menu{position:relative;margin:0 auto}
.header_menu ul{display:flex}
.header_menu ul > li{padding:0 30px}
.header_menu ul > li > a{display:block;width:100%;position:relative;padding:20px 0;font-weight:600;text-decoration: none;font-size:16px;color:#fff;transition: all 0.3s ease}
.header_menu ul > li > a::before{content:'';position:absolute;bottom:-4px;left:0;width:0;height:4px;background:#606DFF;transition: width 0.3s ease}
.header_menu ul > li > a:hover::before{width:100%;}
.header_menu ul > li > a.active::before{width:100%;}

.depth2_down{left:0;right:0;top:71px;gap:40px;width:100vw;margin-left:calc(-50vw + 50%);position:absolute;display:none;padding:30px;background:#fff;
    border:1px solid #e0e0e0;border-radius:8px;z-index:1000;justify-content:center}
.depth2_down h3{font-size:24px;color:#111;width:120px}
.depth2_down p{color:#3B61F4;font-size:13px;width:250px}
.depth2_down > ul > li > a{color:#767676 !important;font-size:14px;font-weight:400;transition:none !important;padding:0 !important}
.depth2_down > ul > li > a::before{display:none !important}
.depth2_down > ul > li > a:hover{color:#111 !important}
.depth2_down ul.depth2{width:1000px;flex-wrap: wrap;gap:10px;position: relative;left:auto;top:auto;padding:0;display:flex}


/* .header_wrap:hover{background:#fff}
.header_wrap:hover .header_logo_wrap{background:url(/pages/kjcareer/img/main/logo_c.png) no-repeat 30px 23px}
.header_wrap:hover .header_logo_wrap a.logo{width:146px;height:25px;display:block;}
.header_wrap:hover .header_logo_wrap a img{display:none}
.header_wrap:hover .header_right ul li a{color:#000}
.header_wrap:hover .header_menu ul li a{color:#000}
.header_wrap:hover:after{display:none} */



/*모바일메뉴*/
.mobile_menu{display:none}
.menu_button{ display: none}

    /*.header_menu button{color:#333;font-weight:600;background:#fff url(/pages/job/img/main/icon_arrow_g.png) no-repeat 96% center;position: absolute;right: 0;top: 0;display: flex;align-items: center;padding:5px 25px 5px 15px;border:1px solid #ddd;border-radius: 5px}*/
/*.header_menu button img{margin-right:10px;}*/

.header_dropmenu{display:none !important}
/*.header_dropmenu > ul{width:1320px;margin:0 auto;display:flex;flex-wrap: wrap;padding:30px 0 0}*/
/*.header_dropmenu > ul > li {width:23%;margin:0 1% 30px}*/
/*.header_dropmenu > ul > li > a{border:1px solid #dcdee6;border-radius:4px;display:block;text-align:center;padding:12px 0;font-size:16px;margin-bottom:10px}*/
/*.header_dropmenu > ul > li > a.on{border:2px solid #333}*/
/*.header_dropmenu > ul > li > a:hover{text-decoration:none;border:1px solid #a5abc2}*/
/*.header_dropmenu > ul > li > ul > li {width:100%}*/
/*.header_dropmenu > ul > li > ul > li > a{display:inline-block;text-align:left;padding:8px 25px 8px 8px;color: #48484c;font-size:15px}*/
/*.header_dropmenu > ul > li > ul > li > a:hover{text-decoration:none;color:#222;font-weight:700}*/
/*.header_dropmenu > ul > li > ul > li > a.blank{background:url(/pages/job/img/main/blank_b.png) no-repeat right center / 15px }*/
/*.header_dropmenu > ul > li > ul > li > a.on{border-bottom:2px solid #1c5bd7;color:#1c5bd7}*/
/*.header_dropmenu > ul > li > ul > li > ul{margin-bottom:10px}*/
/*.header_dropmenu > ul > li > ul > li > ul > li > a{display:inline-block;padding:5px 20px 5px 25px;position: relative;color:#676767}*/
/*.header_dropmenu > ul > li > ul > li > ul > li > a:before{position: absolute;content:'';width:10px;height:1px;background:#b8bece;top:10px;left:10px}*/
/*.header_dropmenu > ul > li > ul > li > ul > li > a.blank{background:url(/pages/job/img/main/blank_b.png) no-repeat right center / 15px }*/
/*.header_dropmenu > ul > li > ul > li > ul > li > a.on{font-weight:800;color: #1c5bd7}*/

/*sublayout*/
/* .sub_layout{height:100%;min-height:700px;display:flex;max-width: 1920px;margin:0 auto} */
.sub_layout .lnb_wrap{width:320px;position:relative;padding:50px 30px;z-index:1;background:#fff}
.sub_layout .lnb_wrap::before{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:#eee;z-index:100}
.sub_layout .lnb_wrap h3{font-size:24px;margin-bottom:20px;color:#000;font-weight:800}
.sub_layout .lnb_wrap .depth_box2 li a{padding:15px 20px;display:block;color:#2d2d2d}
.sub_layout .lnb_wrap .depth_box2 li a.on{font-weight:600;background:#f0f1ff;color:#616dff;border-radius:5px;}

/* .sub_cont{flex:1}
.sub_cont_wrap{width:1420px;margin:0 auto}
.sub_cont_top{display:flex;justify-content: space-between;margin-bottom:20px}
.sub_cont_top h3{font-size:32px;color:#000;font-weight:700} */

.sub_navi .location{display:flex;align-items:center}
.sub_navi .location > li{display:flex;align-items:center}
.sub_navi .location > li > a{text-decoration:none;position:relative;display:flex;align-items:center}
.sub_navi .location > li:not(:last-child):after{content:'/';display:inline-block;margin:0 15px;color:#b9b9b9;font-size:12px}
.sub_navi .location > li > a::after {content:'';display:inline-block;margin-left:5px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #999;transition:transform 0.3s}
.sub_navi .location > li > a.active::after {border-top:none;border-bottom:6px solid #777;transform:rotate(0deg)}
.sub_navi .location > li.home > a::after{display:none}
.sub_navi .location li a span{color:#999}
.sub_navi .location > li.home > a span{display:flex;align-items:center}
.sub_navi .location li{position: relative;color:#e2e2e2}
.sub_navi .location_dept{width:130px;position: absolute;background:#7981AD;border-radius:5px;top:30px;right:0px;z-index:999;padding:12px 0}
.sub_navi .location_dept li a span{display:block;padding:5px 12px;color:#fff}
.sub_navi .location_dept li a:hover{text-decoration:none}
.sub_navi .location_dept li a:hover span{background:rgba(0, 0, 0, 0.4)}

/*footer*/
.footer_wrap{background:#2d2d2d;border-bottom:1px solid #3d3d3d;padding:40px 0;position:relative;z-index:2}
.footer_box{width:1420px;margin:0 auto;display:flex;justify-content: space-between}
.footer_box h2{margin-right:70px}
.footer{background:#2d2d2d;border-bottom:1px solid #3d3d3d;padding:20px 0 80px 0;position:relative;z-index:2}
.footer_menu > ul{display:flex;width:100%;gap:30px}
.footer_menu > ul > li{width:calc(100% / 6)}
.footer_menu > ul li a{color:#fff;opacity: .5;margin-bottom:8px;display:block;}
.footer_menu .depth1 > li > a > span{font-size:16px;margin-bottom:15px;font-weight:600}
.footer_menu ul.depth2{margin-top:20px;min-width:100px}
.footer_menu .depth2 > li > a {font-size:14px;font-weight:300;}

.relative_site{margin-top:-5px}
.relative_site button{position:relative;border-radius:7px;background:#252528;color:#767676;padding:0 20px;width:225px;text-align:left;height:40px;line-height:40px}
.relative_site button:after{ content:'';position: absolute;right:10px;top:17px; transform: rotate(-180deg);    border-bottom:7px solid #767676FF;border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 7px solid transparent;}
.relative_site ul {display:none; background-color: #e7e7e7; padding: 10px; border-radius:5px;}

.footer_info{gap:20px;justify-content: flex-start;margin-bottom:15px;}
.footer_info li a{font-size:14px;color:#888;}
.footer_box .address{display:flex}
.footer_box .copyright{margin-top:15px;}





/****** Mobile ******/
@media screen and (min-width:320px) and (max-width:690px){
    

    .header_top{position: fixed;top:0;width:100%; z-index: 99;}
    .header_topbox{display:flex;justify-content: space-between}
    .header_top_site{display:none}
    .header_top_site_m{display:block;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
    .header_top_site_m select{font-size:12px;background-color:#3147bb;background-position:99% center;min-height:35px;height:35px;border:none;padding:0 12px;color:#fff}

    .header_wrap{position: sticky;width:100%; z-index: 99;height:80px}
    .header_wrap:hover .header_logo_wrap{background:none;}
    .header_wrap:hover:after{display:none}
    .header_wrap:hover .header_logo_wrap a img{display:block;}
    .header_logo_wrap{padding:0 10px}
    .header_logo_wrap a.logo{left:20px}
    .header_menu{display:none;}
    .header_right{display:none}

    #navigation_mobile_wrap{height:100dvh;position: fixed;top:90px;background:#111;padding:20px;z-index: 99;width:100%}
    #navigation_mobile h2{font-size:0;opacity: 0;position: absolute}

    #navigation_m > li > a{color:#fff;font-size:17px;padding:7px 0;display:block;border-bottom:#777;}
    .gnb_2depth{border-radius:10px;background: #1e1e1e;max-height: 0;overflow: hidden;transition: max-height 0.3s ease; }
    .gnb_2depth ul li a{display:block;font-size:14px;color:#888;padding:5px 20px }
    .gnb_2depth.open{max-height:fit-content;transition: max-height 0.3s ease; }

    /*모바일메뉴*/
    .mobile_menu{position:absolute;right:20px;display:flex;justify-content:center;z-index:99}
    .mobile_menu button {position:relative;display: flex;flex-direction: column;gap: 6px;width: 30px;background: transparent;border: none;cursor: pointer;z-index: 1000;}
    .mobile_menu .bar {width:30px;height: 3px;background: #ffffff;transition: all 0.3s ease;border-radius: 2px;}

    /* 닫기 아이콘 상태 */
    .mobile_menu.open .bar:nth-child(1) {transform: rotate(45deg) translateY(13px);}
    .mobile_menu.open .bar:nth-child(2) {opacity: 0;}
    .mobile_menu.open .bar:nth-child(3) {transform: rotate(-45deg) translateY(-13px);}

    /* 메뉴 숨김 기본값 */
    #navigation_mobile_wrap {display: none;}

    /* 메뉴 열림 */
    #navigation_mobile_wrap.active {display: block;}

    /*footer*/
    .footer{padding:20px 20px 80px}
    .footer_wrap{padding:20px}
    .footer_box{width:100%;flex-direction: column}
    .footer_box .address{flex-wrap:wrap}
    .footer_box p{font-size:13px}
    .footer_menu {display:none}
    .footer_info{flex-wrap: wrap;gap:10px}
    .relative_site button{width:100%;margin-top:20px}

    
    /*sublayout*/
    /* .sub_layout{margin-top:90px}
    .sub_layout .lnb_wrap{display:none}
    .sub_cont_wrap{width:100%} */

    .sub_cont_top{display:block}
    .sub_cont_top h3{padding:0 0 20px 25px;font-size:25px}    
    /* .sub_cont_box{padding:40px 0} */
    .sub_navi .location{width:100%;height:45px;display:flex;align-items:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:0 25px}
    .sub_navi .location li.home{display:none}
    .sub_navi .location_dept{left:0;border-radius:0 0 5px 5px}
    .sub_navi .location > li:after{display:none}

}


/****** tablet ******/
@media screen and (min-width:691px) and (max-width:1180px){

    /* #contents_wrap{padding:10px 20px 0 20px} */

    .header_top{position: fixed;top:0;width:100%; z-index: 99;}
    .header_topbox{display:flex;justify-content: space-between}
    .header_top_site{display:none}
    .header_top_site_m{display:block;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
    .header_top_site_m select{font-size:12px;background-color:#5755d3;background-position:99% center;min-height:30px;border:none;padding:0 12px;color:#fff}

    /* .header_wrap{position: fixed;top:40px;width:100%; z-index: 99;height:50px} */
    .header_menu{display:none;}
    .header_right{display:none}
    .header_logo_wrap{padding:0 15px;}
    .header_logo_wrap a.logo{left:20px}
    .header_wrap:hover .header_logo_wrap{background:none;}
    .header_wrap:hover:after{display:none}
    /* .header_wrap:hover{background: #111} */
    .header_wrap:hover .header_logo_wrap a img{display:block;}

    #navigation_mobile_wrap{height:100dvh;position: fixed;top:90px;background:#111;padding:20px;z-index: 99;width:40%;right:0;opacity: .95}
    #navigation_mobile h2{font-size:0;opacity: 0}

    #navigation_m > li > a{color:#fff;font-size:17px;padding:10px 0;display:block;border-bottom:#777;}
    .gnb_2depth{border-radius:10px;background: #1e1e1e;max-height: 0;overflow: hidden;transition: max-height 0.3s ease; }
    .gnb_2depth ul li a{display:block;font-size:14px;color:#888;padding:10px 20px }
    .gnb_2depth.open{max-height:fit-content;transition: max-height 0.3s ease; }

    /*모바일메뉴*/
    .mobile_menu{display:block;position:absolute;right:20px;top:50%;transform:translateY(-50%);}
    .mobile_menu button {display: flex;flex-direction: column;gap: 6px;width:30px;background: transparent;border: none;cursor: pointer;z-index: 1000;}
    .mobile_menu .bar {width:30px;height: 3px;background: #ffffff;transition: all 0.3s ease;border-radius: 2px;}

    /* 닫기 아이콘 상태 */
    .mobile_menu.open .bar:nth-child(1) {transform: rotate(45deg) translateY(13px);}
    .mobile_menu.open .bar:nth-child(2) {opacity: 0;}
    .mobile_menu.open .bar:nth-child(3) {transform: rotate(-45deg) translateY(-13px);}

    /* 메뉴 숨김 기본값 */
    #navigation_mobile_wrap {display: none;}

    /* 메뉴 열림 */
    #navigation_mobile_wrap.active {display: block;}

    /*footer*/
    .footer{padding:20px 20px 80px}
    .footer_wrap{padding:20px}
    .footer_box{width:100%;flex-direction: column}
    .footer_box .address{flex-wrap:wrap}
    .footer_box p{font-size:13px}
    .footer_menu {display:none}
    .footer_info{flex-wrap: wrap;gap:10px}
    .relative_site button{width:100%;margin-top:20px}

   /*sublayout*/
    /* .sub_layout{margin-top:90px} */
    .sub_layout .lnb_wrap{display:none}
    .sub_cont_wrap{width:100%}

    .sub_cont_top{display:block}
    .sub_cont_top h3{padding:0 0 20px 25px}    
    /* .sub_cont_box{padding:40px 0} */
    .sub_navi .location{width:100%;height:45px;display:flex;align-items:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:0 25px}
    .sub_navi .location li.home{display:none}
    .sub_navi .location_dept{left:0;border-radius:0 0 5px 5px}
    .sub_navi .location > li:after{display:none}

}

/****** desktop*****/
@media screen and (min-width:1181px) and (max-width:1600px){
    #contents_wrap{padding:10px 20px 0 20px}

    .header_logo_wrap{padding:0 10px;}
    .header_menu{margin-right:auto;margin-left:260px}
    .header_menu ul li{padding:0 10px}

    .header_top_site{width:800px;left:auto;right:10px;margin:0}
    .header_top_site ul{gap:10px}
    
    .header_right ul li a{padding:10px 15px}
.depth2_down{
    left: 0;
      right: 0;
      width: 100vw;
      margin-left:-276px;
  }

    /*footer*/
    .footer{padding:20px 20px 80px}
    .footer_wrap{padding:30px 20px}
    .footer_box{width:100%;align-items: center}
    .footer_box .address{flex-wrap: wrap;gap:10px}
    .footer_menu {display:none}
    .footer_info{flex-wrap: wrap;gap:10px}
    .relative_site button{margin-top:20px}



    /*sublayout*/
    .sub_layout .lnb_wrap{width:250px}

}