@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh 26.01.28 */

/* Common */
.mobile_bg {display: none; position: fixed; width: 100%; height: 100%;  left: 0; top: 0; background: #000; z-index:400}
.clear_fix::after{content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 320px; overflow: auto; font-family:NSQ; font-weight:400; box-sizing: border-box}
#content {position: relative}
h3.tit {font-size:1.231em; font-weight:400; color:#000}

/* basic */
img, li img, dd img {vertical-align: middle}

/*더보기버튼 공통*/
#content .btn_more {position: absolute}
#content .btn_more a {display: block; transition: all .3s; text-align: center}
#content .btn_more img {width:11px; height:11px; transition: all .3s; vertical-align:top}
#content .btn_more a:hover img {transform: rotate(180deg)}

/* Layout */
#content {position: relative}

/* 상단영역 */
.headerwrap {position: absolute; top:0; left:0; width: 100%; min-width: 320px; margin: 0}

/* 로고 영역 */
.logo a {display:flex}
.logo a .logo_txt {display: flex; overflow:hidden; white-space: nowrap; animation:blink 1.4s infinite}
.logo a .logo_txt span {display:inline;; font-size:12px; letter-spacing:0.5px}
.headerwrap {height:80px; width:100%}
.header_top {position:relative; height:34px}
.header_top .logo {position: absolute; top:34px; left:0; min-width:200px; padding:6px 20px 6px 10px; background:#fff; border-radius:0 0 15px 0 ; box-shadow:0 2px 1px 0 rgba(0,0,0,0.06); box-sizing: border-box}
.header_top .logo a{display: block}
.header_btn {position:relative; height:58px; padding-top:34px; transition:.3s}

.qmu_wrap .qmu_btn {transition:.3s}
.qmu_wrap .qmu_popup a {display:flex; justify-content: space-between; align-items: center; width:74px; height:25px; line-height:23px; padding:0 10px; background:#6b8392 url(../images/main/blt_popup_m.png) no-repeat right 10px top 50%; color:#fff; box-sizing: border-box; font-size:12px; border-radius:50px}
.qmu_wrap .qmu_popup a .pnum {position:absolute; top:4px; right:5px;display:block; width:13px; height:13px; line-height:13px; background:#ff3342; border-radius:50%; text-align: center; color:#fff; font-size:10px}
.qmenu .btn_all {position:absolute; top:46px; right:10px}
.qmenu .btn_all a {display:block; width:34px; height:34px; background:#fff url(../images/main/btn_allmn.png) no-repeat 50% 50%; font-size:0; border-radius:10px}
.qmu_wrap .qmu_genlink a {position:relative}
.qmu_wrap .qmu_genlink a:after {content:""; display:block; position: absolute; top:50%; right:10px; width:34px; height:18px; margin-top:-9px; background:rgba(107, 131, 146, 0.6) url(../images/main/btn_gengo_arr.png) no-repeat 50% 50%; border-radius:10px}

/* Visual */
.visual {position:relative}
.visual .visual_wrap {position:relative; width: 100%; margin: 0 auto}
.visual_wrap .slick-arrow {display:none !important}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button {border:none; background:none; font-size:0}
.visual_wrap .visual_item {position:relative; display: block; width:100%; height:324px}
.visual_wrap .visual_item > a {position: relative; display:block; height:324px}
.visual_wrap .visual_item > a:focus-visible {height:320px; outline:2px solid #000}
.visual .item1 {background:#f0f0fd url(../images/main/v_m01.jpg) no-repeat 50% 0} /* 메인1 */
.visual .item2 {background:#e4f6f7 url(../images/main/v_m02.jpg) no-repeat 50% 0} /* 메인2 */
.visual_item span.vbg_txt {font-size:0}

/* 비주얼 */
/*재생,일시정지*/
.ctrl_wrap {display:flex; justify-content: space-between; align-items:center; position:absolute; bottom:10px; left:50%; width:96px; margin:0 0 0 -685px; box-sizing: border-box}
.visual_wrap .btn_visual button {width:18px; height:20px; margin: 0 0 0 -28px; cursor:pointer; box-sizing: border-box; text-align: center}
.visual_wrap .btn_visual button.vbtn_play {background:url(../images/main/vbtn_play.png) no-repeat 50% 50%}
.visual_wrap .btn_visual .vbtn02 button.vbtn_pause{background:url(../images/main/vbtn_pause.png) no-repeat 50% 50%}
/*비주얼 이동 블릿*/
.visual_wrap .slick-dots {display:flex !important; gap:7px}
.visual_wrap .slick-dots li button {width:12px; height:12px; box-sizing: border-box; border-radius:50px; border:3px solid #fff; box-shadow:0 2px 2px rgba(0,0,0,0.08)}
.visual_wrap .slick-dots li.slick-active button {width:38px; background:#fff}

/* 레이어 팝업 */
.mpop_bg {position: fixed; top: 0;left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.75; z-index:110}
.mpop_top {display:flex; margin:0 auto 15px; align-items: center; max-width:540px}
.mpopup_box {display:none}
.mpopup_box.on {display:block}
.mpop_lstwrap {position:fixed; top:50%; left:50%; margin-left:-270px; margin-top:-250px; z-index:111; text-align: center}
.mpop_tit {display:block; text-align: center}
.mpop_lstwrap .mpop_tb {position:relative; width:550px}
.mpop_list {position:relative}
.mpop_layer {flex: 0 0 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin:0 5px}
.mpop_layer a {display:block}
.mpop_layer a.mpop_img {overflow: hidden; display:block; max-width:100%; background:#eee; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:10px; border:1px solid rgba(255,255,255,0.1)}
.mpop_layer a.mpop_txt {display:flex; justify-content: center; width:100%; text-align: center; color:#fff; font-size:17px; font-weight:600; padding:15px 0; white-space: nowrap}
.mpop_layer img {width:540px; height:310px}
.mpop_closebox {display: flex; justify-content: space-between; gap:20px; max-width:540px; margin:20px auto 0}
.mpop_closebox li {width:calc(100% /2)}
.mpop_closebox li a {display:block; height:40px; line-height:38px; font-size:1.154em; border:1px solid rgba(255,255,255,0.5); border-radius:50px; padding:0 20px; box-sizing: border-box; color:#fff; text-align: left; font-weight:500}
.mpop_closebox li.btn_poptoday a {background:rgba(255,255,255,0.15)}
.btn_poptoday a span {display:block; background:url(../images/main/blt_popup_today.png) no-repeat right 0 top 50%}
.btn_popclose a span {display:block; background:url(../images/main/blt_popup_close.png) no-repeat right 0 top 50%}

.mpop_zone {position:absolute; top:-40px; right:5px; display:flex; justify-content: space-between; align-items: center; z-index:5; pointer-events: auto;}
.mpop_count {display:flex; font-size:20px; font-weight:500; color:#fff}
.mpop_count .custom_paging {position:relative; height:30px; line-height:30px}
.mpop_count .custom_paging + .custom_paging{display:none !important;}
.mpop_count .custom_paging li {position:absolute; width:100%; left:24px; top:-7px; opacity:0; font-weight:500; color:#fff}
.mpop_count .custom_paging li.slick-active {opacity:1}
.mpop_count .custom_paging li span {display:inline; color:#fff}
.mpop_count .custom_paging li span.num {color:#ffd631; font-weight:700}
.mpop_zone .btn_slide {display: flex; justify-content: space-between; width:86px; height:40px}
.mpop_zone .btn_slide li button {display:block; width:10px; height:14px; line-height:14px; text-align: center; background:none; margin-top:7px}
.mpop_zone .btn_slide li button img {vertical-align: middle}
.mpop_zone .btn_slide li button.popup_prev {background:url(../images/main/btn_pop_prev.png) no-repeat 50% 50%}
.mpop_zone .btn_slide li button.popup_next {background:url(../images/main/btn_pop_next.png) no-repeat 50% 50%}


/***************** Layout ******************/
.content_area .btn_slide {position: absolute}
.content_area .btn_slide ul {display:flex}
.content_area .btn_slide ul li a {display:block; font-size:0}

/* 비주얼 퀵 영역 */
.vcont_area .vcont_bg {overflow:hidden; position: relative; background:#fff; border-radius:15px; box-shadow:0 2px 2px 0 rgba(0,0,0,0.08)}

/* 비주얼 퀵 */
.vquick_area {display: flex; justify-content: space-between; gap:10px}
.vq_area {width:calc(100% / 2 - 5px)}
.vq_area a {overflow: hidden; display:block; background:#5974a0; border-radius:10px}
.vq_atit {position:relative; padding:50px 0 20px; text-align: center}
.vq_atit:before {content:""; display: block; position:absolute; top:0; left:50%; width:72px; height:36px; border-radius:0 0 72px 72px; background:rgba(255,255,255,0.15); margin-left:-36px}
.vq_atit:after {content:""; display: block; position:absolute; top:7px; left:50%}
.vq_area1 .vq_atit:after {background:url(../images/main/bg_vquick01.png) no-repeat 50% 50%; width:74px; height:62px; margin-left:-37px}
.vq_area2 .vq_atit:after {background:url(../images/main/bg_vquick02.png) no-repeat 50% 50%; width:60px; height:62px; margin-left:-30px}

.vq_area a:hover .vq_atit:after {animation:bounce 1s ease-in-out infinite}
.vq_atxt {position:relative; display:flex; flex-direction: column; background:rgba(0,0,0,0.1); padding:22px 14px 10px}
.vq_people {position:absolute; top:-10px; left:50%; display: inline-block; width:64px; height:22px; line-height:22px; text-align: center; background:#fff; border-radius:50px; margin-left:-32px}
.vq_submit {display:block; color:#fff; background:url(../images/main/btn_vquick_arr.png) no-repeat right 0 top 50%; text-shadow:0 1px 3px rgba(0,0,0,0.1)}
.vq_area1 a {background:#aa9cf8; transition:2s}
.line_color02 .vq_area1 a {background:#7bc9ff}

/* 채용공고 현황 */
#main_employlst {padding:10px 10px 15px}
.employ_wrap {position:relative}
.employ_wrap .tit {padding-bottom:6px; border-bottom:1px solid #dedede}
.employ_wrap .tit span {display: inline-block; padding:2px 0 2px 28px; background: url(../images/main/blt_employ_tit.png) no-repeat 0 50%}
.employ_wrap .btn_more {top:5px; left:174px}
.emp_lstbx {padding:10px 0 0}
.emp_lst .emp_txt {margin-top:4px; min-height:44px; border:1px solid #dedede; border-radius:5px}
.emp_lst .emp_txt:first-child {margin-top:0}
.emp_lst .emp_txt a {display:flex; align-items:center; padding:5px}
.emp_lst .emp_txt a .txt {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:block}

.state_type {min-width:70px;text-align: center; padding:4px 5px; border-radius:3px; color:#fff; margin-right:10px; font-size:0.935em}
.state_type.state1 {background:#ad7cf6} /* 예정 */
.state_type.state2 {background:#ff6946} /* 접수중 */
.state_type.state3 {background:#757575} /* 접수마감 */
.state_type.state4 {background:#82c758} /* 서류심사완료 */
.state_type.state5 {background:#346fd4} /* 채용완료 */

.content_area .employ_wrap .btn_slide {top:3px; right:0}
.content_area .employ_wrap .btn_slide ul li {border:1px solid #cacaca}
.content_area .employ_wrap .btn_slide ul li a {width:30px; height:16px}
.content_area .employ_wrap .btn_slide ul li:first-child {border-right:0}
.content_area .employ_wrap .btn_slide ul li:first-child a {background:url(../images/main/btn_employ_prev.gif) no-repeat 50% 50%}
.content_area .employ_wrap .btn_slide ul li:last-child a {background:url(../images/main/btn_employ_next.gif) no-repeat 50% 50%}

.emp_tb .noempty {margin-top:4px; min-height:40px; border:1px solid #dedede; border-radius:5px; padding:160px 0 55px; text-align:center; background:#f0f2f5 url(../images/main/bg_noemploy.gif) no-repeat 50% 70px; font-size:1.077em}

/* notice */
#main_notice {background:#f1f1f1; padding:11px 12px}
.notice_box {position:relative}
.notice_box h3 {padding:5px 0 10px}
.notice_box h3 span {display: inline-block; padding:2px 0 2px 28px; background: url(../images/main/blt_notice_tit.gif) no-repeat 0 50%}
.notice_box .btn_more {top:10px; left:105px}
.notice_box .notice_tb {position:relative}
.notice_box .notice_tb ul {overflow:hidden; background:#fff; padding:10px; border-radius:15px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.08)}
.notice_box .notice_tb ul li {position:relative; min-height:24px; line-height:160%; padding:0 70px 0 16px; transition:.3s; box-sizing: border-box; cursor: pointer}
.notice_box .notice_tb ul li:after {content:""; display: block; position:absolute; top:50%; left:0; width:10px; height:9px; background:url(../images/main/blt_noticelst.gif) no-repeat 0 50%; margin-top:-4px}
.notice_box .notice_tb ul li .tit {width:auto; margin:0}
.notice_box .notice_tb ul li .tit a {display:block; overflow:hidden; width:95%; text-overflow:ellipsis; white-space:nowrap; color:#262626; font-size:1em;  font-weight:600}
.notice_box .notice_tb ul li .date {position:absolute; top:50%; right:0; width:68px; height:20px; line-height:20px;  margin-top:-11px; text-align:right; font-family: 'NSK'; font-weight:300; font-size: 1em; color: #979797}
.notice_box .notice_tb ul li img {display:inline-block !important}

.content_area .notice_box .btn_slide {top:1px; right:0}
.content_area .notice_box .btn_slide ul li {margin:1px}
.content_area .notice_box .btn_slide ul li a {display:block; width:24px; height:24px; background-color:#fff; border-radius:50%; border:1px solid #dedede}
.content_area .notice_box .btn_slide ul li:first-child a {background:#fff url(../images/main/btn_notice_prev.gif) no-repeat 50% 50%}
.content_area .notice_box .btn_slide ul li:last-child a {background:#fff url(../images/main/btn_notice_next.gif) no-repeat 50% 50%}

/* 사용자 영역 */
.userquick_wrap {display:flex; justify-content: space-between; gap:40px}
.userquick_wrap .user_quick {width:calc(100% / 2)}
.user_qbox {overflow: hidden; border:2px solid #5974a0; border-radius:10px}
.user_qbox .tit {padding:6px; background:#5974a0; text-align: center}
.user_qbox .tit span {position: relative; display: inline-block; padding:4px 0 4px 35px}
.user_qbox .tit span:before {content:""; display:block; position:absolute; top:0; left:0; width:64px; height:64px; box-shadow:0 2px 2px rgba(0,0,0,0.08); border-radius:50%; background:#fff}

.user_type1 .user_qbox .tit span:before {background:#fff url(../images/main/bg_userquick_ico01.png) no-repeat 50% 50%}
.user_type2 .user_qbox .tit span:before {background:#fff url(../images/main/bg_userquick_ico02.png) no-repeat 50% 50%}
.user_type1 .tit  {background:#9080e6}
.user_type1 .user_qbox  {border-color:#9080e6}
.line_color02 .user_type1 .tit  {background:#69b9f1}
.line_color02 .user_type1 .user_qbox {border-color:#69b9f1}
.user_qbox ul {display:flex; justify-content: space-between; padding:10px; gap:5px}
.user_qbox ul li {width:calc(100% / 3 - 5px); transition:.3s}
.user_qbox ul li a {display:block; padding:8px 5px 5px; background:#e6e6e6; border-radius:10px; text-align:center; border:1px solid #e6e6e6; box-sizing:border-box; transition:.3s}
.user_qbox ul li a .qico {display:block; width:44px; height:44px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:28px auto; margin:0 auto; border-radius:50%; transition:.3s}
.user_qbox ul li a .qtit {display:block; text-align: center; margin:8px 0; line-height:120%}
.user_qbox ul li a .qbarogo {display: block; padding:6px 20px 6px 10px; background:#fff url(../images/main/btn_userquick_arr.png) no-repeat right 10px top 50%; border-radius:5px; text-align: left; transition:.3s}

.user_qbox ul li.user0101 .qico {background-image: url(../images/main/img_uquick0101.png)}
.user_qbox ul li.user0102 .qico {background-image: url(../images/main/img_uquick0102.png)}
.user_qbox ul li.user0103 .qico {background-image: url(../images/main/img_uquick0103.png)}
.user_qbox ul li.user0101:hover .qico {background-image: url(../images/main/img_uquick0101_on.png)}
.user_qbox ul li.user0102:hover .qico {background-image: url(../images/main/img_uquick0102_on.png)}
.user_qbox ul li.user0103:hover .qico {background-image: url(../images/main/img_uquick0103_on.png)}
.user_qbox ul li.user0201 .qico {background-image: url(../images/main/img_uquick0201.png)}
.user_qbox ul li.user0202 .qico {background-image: url(../images/main/img_uquick0202.png)}
.user_qbox ul li.user0203 .qico {background-image: url(../images/main/img_uquick0203.png)}
.user_qbox ul li.user0201:hover .qico {background-image: url(../images/main/img_uquick0201_on.png)}
.user_qbox ul li.user0202:hover .qico {background-image: url(../images/main/img_uquick0202_on.png)}
.user_qbox ul li.user0203:hover .qico {background-image: url(../images/main/img_uquick0203_on.png)}

/* hover */
.user_qbox ul li:hover a .qbarogo {background:#5974a0 url(../images/main/btn_userquick_onarr.png) no-repeat right 10px top 50%; color:#fff}
.user_qbox ul li:hover a .qico {background:#5974a0; background-size:28px auto; background-repeat:no-repeat; background-position:50% 50%}
.user_type1 .user_qbox ul li:hover a .qico {background-color:#9080e6}
.line_color02 .user_type1 .user_qbox ul li:hover a .qico {background-color:#69b9f1}
.user_qbox ul li:hover a {background:#fff; border-color:#5974a0; box-shadow:1px 2px 8px rgba(0,0,0,0.2)}
.user_type1  .user_qbox ul li:hover a {background:#fff; border-color:#9080e6}
.line_color02 .user_type1  .user_qbox ul li:hover a {background:#fff; border-color:#69b9f1}
.user_type1 .user_qbox ul li:hover a .qbarogo {background-color:#9080e6}
.line_color02 .user_type1 .user_qbox ul li:hover a .qbarogo {background-color:#69b9f1}

/* banner */
.banner_wrap {position:relative; display: flex; justify-content: space-between; margin:5px 0 25px}
.ban_item a {overflow:hidden; display:block; width:100%; max-width:188px; height:52px; margin:0 auto; border:1px solid #cacaca; background:#fff url(../images/main/bg_nobanner.gif) no-repeat 50% 50%; box-sizing: border-box}
.ban_item img {width:100%; height:100%; margin: 0 auto; transition: .3s ease-in-out}
.ban_item:hover a img {transform:scale(1.08)}
.ban_item a:hover {border-color:#b0b0b0; box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.ban_area {min-height:52px; width:calc(100% - 120px)}

.banner_wrap .tit {width:120px}
.banner_wrap .btn_more {top:3px; left:84px}
.banner_wrap .btn_slide {display: flex; justify-content: space-between; bottom:0; left:10px}
.banner_wrap .btn_slide li {border:1px solid #cacaca}
.banner_wrap .btn_slide li:nth-child(2) {border-left:0; border-right:0}
.banner_wrap .btn_slide li button  {display:block; width:32px; height:22px; line-height:22px; text-align: center; cursor: pointer; box-sizing: border-box; text-align: center; background:none; font-size:0}
.banner_wrap .btn_slide li button img {vertical-align:text-bottom}
.banner_wrap .btn_slide li button.ban_prev {background:#fff url(../images/main/btn_ban_prev.gif) no-repeat 50% 50%}
.banner_wrap .btn_slide li button.ban_stop {background:#fff url(../images/main/btn_ban_stop.gif) no-repeat 50% 50%}
.banner_wrap .btn_slide li button.ban_next {background:#fff url(../images/main/btn_ban_next.gif) no-repeat 50% 50%}

/* footer */
#footwrap {position:relative; background:#232733}
#footwrap .ftit {display: inline-block; padding:0 10px; margin-right:4px; background:#71787e; text-align: center}
#footwrap .fadmin {display:none}
#footwrap .flogo {display: none}
#footwrap address {word-break: keep-all}
#footwrap .add_wrap {padding:15px 10px 10px; text-align: center; color:#fff; line-height:140%; word-break: keep-all; font-weight:300}
.add_telinfo {color:#bfc2ca}
#footwrap .copy {line-height:120%; padding:10px; text-align: center; color:rgba(255,255,255,0.5); font-size:13px}
.count_box {display: none}
.fgengo {margin-top:14px}
.fgengo a {display:flex; justify-content: space-between; align-items: center; padding:7px 10px; border-radius:5px; background:rgba(255,255,255,0.1); color:#fff; transition:.4s}
.fgengo a:hover {background:rgba(255,255,255,0.3)}
.fgengo a .fgen_go {display:block; width:40px; height:20px; line-height:20px; border-radius:5px; text-align: center; color:#000; background:#fff; font-weight:600}


/******** MOBILE LAYOUT ********/
@media only screen and (max-width:1024px) {
/* Common */
.skip_navi .pc_skip{display:none}

/* Layout */
#mainheader {position: relative; z-index:100}
#content {border-bottom:0}

/* fixed */
.fixed .headerwrap {position:fixed}
.fixed .header_btn {background:#f0f0fd; box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.fixed .header_btn:before {content:""; display:block; position: absolute; top:34px; left:0; width:100%; height:58px; background:#dfdffb}
.line_color02 .fixed .header_btn {background:#e4f6f7}
.line_color02 .fixed .header_btn:before  {background:#d4f0f3}
    
/* 로고영역 */
.logo a img {width:170px}
.qmenu .qmu_log {position:absolute; top:46px; right:50px}
.qmenu .qmu_log a {display:block; width:34px; height:34px; background:rgba(0,0,0,0.4) url(../images/main/btn_login_m.png) no-repeat 50% 50%; font-size:0; border-radius:10px}
.qmenu .qmu_logout {position:absolute; top:46px; right:50px}
.qmenu .qmu_logout a {display:block; width:34px; height:34px; background:rgba(0,0,0,0.4) url(../images/main/btn_logout_m.png) no-repeat 50% 50%; font-size:0; border-radius:10px}
.qmu_wrap .qmu_popup {position: absolute; top:5px; right:10px}
.qmu_wrap .qmu_popup .ptit_none {display: none}
.qmu_wrap .qmu_genlink {position: absolute; top:4px; left:0;}
.qmu_wrap .qmu_genlink a {position:relative; display: block; min-width:200px; height:30px; line-height:29px; padding:0 10px 0 22px; background:#5974a0 url(../images/main/blt_gengo_home.png) no-repeat 3px 40%; border-radius:0 15px 0 0; box-sizing: border-box; color:#fff}
.qmu_wrap .qmu_genlink a span {display:none}
.qmu_wrap .qmu_genlink a:after {width:18px; background-color:rgba(255,255,255,0.4)}
    
/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0; width: 250px; height:100%; min-height:100%; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
#gnb p.mb_gnbtit {display: block; height:40px; line-height:40px; padding:0 10px; text-align:left; font-size:0; background:#5974a0 url(../images/main/blt_allmn_tit.gif) no-repeat 10px 50%}
#gnb p.mb_gnbtit span {color:#fff; font-weight:600}
/* GNB_상단 */
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:0; right:0; width:40px; height:40px; overflow: hidden; background:url(../images/main/btn_allmn_close.gif) no-repeat 50% 50%; line-height:0; text-indent:-9999px}
    
/*GNB_메뉴버튼*/
#gnb .mbl_area {padding:6px 10px; box-sizing: border-box; background:#7a90b3}
#gnb .mbl_area ul {display: flex; justify-content: space-between; align-items: center; gap:5px}
#gnb .mbl_area li {width:calc(100% / 2)}
#gnb .mbl_area li a {display:block; color:#000; font-size: 13px; font-weight:500; text-align:center; background:#d8dee9; padding:8px 10px 7px; box-sizing: border-box; border-radius:5px}
#gnb .mbl_area li:first-child a {background: #fff} 
  
/* GNB_메뉴타이틀 */
#gnb .gnb_list .depth1 {border-bottom:1px solid #d9d9d9; padding:6px}
#gnb .gnb_list .depth1 h2 > a {overflow:hidden; position:relative; display:block; line-height: 130%; min-height:32px; padding:13px 30px 13px 12px; width:auto;  font-size:1.231em; font-weight:500; color: #000; transition: all .3s; box-sizing: border-box; word-break:keep-all; background:#eee;  border-radius:10px}
#gnb .gnb_list .depth1 h2 > a:after {content:""; display:block; position: absolute; top:0; right:0; width:30px; height:100%; background:rgba(0,0,0,0.1) url(../images/sub/blt_submn_arr.png) no-repeat 50% 50%}
#gnb .gnb_list .depth1 h2 > a:hover, #gnb .gnb_list .depth1.act h2 > a {position:relative; font-weight:600; text-decoration:none; background:#9080e6; border-radius:10px; color:#fff}

/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; box-sizing: border-box; padding:10px 5px 0}
#gnb .gnb_list .depth1 .navi_sub ul > li {margin-bottom:4px}
#gnb .gnb_list .depth1 .navi_sub ul > li > a {display:block; margin-top:4px; padding:5px 5px 5px 20px; font-weight:400; background:url(../images/main/blt_subleft_off.gif) no-repeat 0 7px; word-break:keep-all}
#gnb .gnb_list .depth1 .navi_sub ul > li:first-child a {margin-top:0}
#gnb .gnb_list .depth1 .navi_sub ul > li.third_on a , #gnb .gnb_list .depth1 .navi_sub ul > li:hover > a{background:url(../images/main/blt_subleft_on.gif) no-repeat 0 7px; color:#1f3a64; font-weight:600}


/********************************************* Layout **********************************************/
/***Content  Common***/   
.mb_none{display: none}
h3.tit img {height:20px}

/*비주얼 이동 블릿, 재생,일시정지*/
.ctrl_wrap {bottom:-19px; left:10px; margin:0; width:80px}
.visual_wrap .slick-dots {gap:5px}
.visual_wrap .slick-dots li button {height:8px; border-width:2px}
.visual_wrap .slick-dots li.slick-active button {width:30px}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button {background-size:13px auto !important}

/* 비주얼 퀵 영역 */
.vcont_area {padding:20px 10px; transition: background-color 2s ease}
.vquick_area {padding:10px}
.line_color01 .vcont_area {background:#dfdffb}
.line_color02 .vcont_area {background:#c6ebed}
.vq_atit img {height:20px}
.vq_area1 .vq_atit:after {background-size:46px auto; width:46px; height:42px; margin-left:-23px}
.vq_area2 .vq_atit:after {background-size:40px auto; width:40px; height:42px; margin-left:-20px}

/* 채용공고 */
.employ_wrap .tit span {background-size:22px auto}
.emp_lst .emp_txt {min-height:30px}
.emp_tb .noempty {padding:120px 0 30px; font-size:1em; background-position:50% 30px}
    
/* 공지사항 */
.notice_box .notice_tb ul {border-radius:10px}
.notice_box .tit span {background-size:22px auto}
    
/* 사용자 퀵메뉴 */
#main_userquick {padding:20px 10px}
.userquick_wrap {flex-wrap:wrap; gap:20px}
.userquick_wrap .user_quick {width:100%}
.user_qbox .tit img {height:20px}
.user_qbox .tit span:before {width:28px; height:28px; background-size:18px auto !important}
    
/* 배너존 */
.banner_wrap {padding:0 10px}    

/* 하단 */
.foot_wrap {display: block}
#footwrap .foot_menu {background:#ebebeb}
#footwrap .foot_menu .mb_menu {position: relative; display:flex; justify-content: center; align-items: center; margin:0 auto; text-align: center}
#footwrap .foot_menu .mb_menu li {padding:0 12px 0 8px; margin:0; height:34px; line-height:34px; background:url(../images/main/blt_foot_bar.gif) no-repeat right center}
#footwrap .foot_menu .mb_menu li:last-child {background: none}
#footwrap .foot_menu .mb_menu li a {display:block; font-weight: 400}
/*PC버튼*/
#footwrap .pc_menu {display:flex; justify-content:space-between; flex-wrap:wrap; text-align:center; font-weight:400; border-bottom:1px solid #4a4d58}
#footwrap .pc_menu li {width:100%}
#footwrap .pc_menu li a {display: block; padding:10px 0; color:#fff; font-weight:400}
#footwrap .pc_menu li.li_1 {border-bottom:1px solid #4a4d58}
#footwrap .pc_menu li.li_1 a {box-sizing: border-box; color:#ffd633; font-weight:600; text-decoration:underline; text-underline-position:under}
#footwrap .pc_menu li.li_2 {width:calc(50% - 1px); border-right:1px solid #4a4d58}
#footwrap .pc_menu li.li_3 {width:50%}
#footwrap .pc_menu li.li_4 {display:none}
    
.foot_baro {padding:0 10px}
    
/********************************************* Layout **********************************************/

/***Content  Common***/   
.mb_none{display: none}
 
}

/******** PC LAYOUT ********/
@media only screen and (min-width:1025px) {
/* Common */
.skip_navi .mb_skip{display:none}

/* Layout */
#wrap {min-width:1420px}
.header_top {position: relative; margin:0 auto; height:128px}
.header_btn {width:1400px; height:84px; margin:0 auto; border-top:0; padding-top:44px}
    
/* logo */
.header_top .logo {top:0; background:none; box-shadow:none; padding:0}
.header_top .logo a {padding:29px 58px 29px 0}
.header_top .logo:before {content:""; display: block; position: absolute; top:0; right:0; /*width:268px;*/ width:100vw;  height:106px;  background:#fff; border-radius:0 0 20px 0; box-shadow:0 2px 2px 0 rgba(0,0,0,0.08); z-index:-1}

/* qmenu */
.qmu_wrap {position:absolute; top:0; right:0; display:flex; justify-content: space-between; gap:5px}
.qmenu .btn_srch {position:absolute; top:58px; right:62px}
.qmenu .btn_srch a {display:block; width:52px; height:52px; background:rgba(0,0,0,0.5) url(../images/main/btn_srch.png) no-repeat 50% 50%; font-size:0; border-radius:10px}
.qmenu .btn_all {top:58px; right:0}
.qmenu .btn_all a {width:52px; height:52px; background:#fff url(../images/main/btn_allmn.png) no-repeat 50% 50%}
.qmu_wrap .qmu_popup a {position:relative; justify-content:flex-start; width:112px; height:38px; padding:0 14px; border-radius:0 0 16px 16px; font-size:1.077em; background:#6b8392 url(../images/main/blt_popup.png) no-repeat right 13px top 50%; box-shadow:0 2px 1px rgba(0,0,0,0.05)}
.qmu_wrap .qmu_popup a .pnum {top:8px; right:7px; width:16px; height:16px; line-height:16px; font-weight:500; font-size:13px}
.qmu_wrap .qmu_popup a .ptit {}
.qmu_wrap .qmu_btn a {display: block; height:38px; line-height:38px; padding:0 26px; background:#fff; font-size:1.077em; transition: .3s; box-shadow:0 2px 1px rgba(0,0,0,0.05); border-radius:0 0 16px 16px}
.qmu_wrap .qmu_btn.qmu_genlink  a {padding:0 60px 0 34px ; background:#fff url(../images/main/blt_gengo_home.png) no-repeat 10px 50%}
    
/* GNB */
/*.gnb_box {max-width:1300px; margin: 0 auto; padding:0 7rem 0 6rem; box-sizing: border-box}*/
.gnb_box {max-width:1400px; margin:-84px auto 0; padding:0 178px 0 488px; box-sizing: border-box}
.gnb_list {display: flex; justify-content:center}
#gnb .allbtnclose, #gnb .mbl_area, #gnb .navi_sub {display: none}
#gnb .mb_gnbtit, #gnb p.gnb_mbtxt {display: none}
#gnb .depth1 {position: relative; float:left; width:33.3%; text-align: center}
#gnb .depth1 h2 a {display:block; padding:30px 0; text-align: center; font-size:19px; font-weight:600; color:#000}
#gnb .depth1.active h2 a {font-weight:600; color: #2286c5}
#gnb .navi_sub {display:none; position: absolute; left:50%; top:74px; width:240px; margin-left:-120px; z-index: 100; font-size:15px; background:#fff; border:2px solid #728cb6; border-radius:15px; box-shadow:0 1px 10px rgba(0,0,0,0.2); box-sizing: border-box}
#gnb .navi_sub:after {content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 10px solid #728cb6}
#gnb .navi_sub ul {overflow: hidden}
#gnb .navi_sub li {display: block; line-height: 180%; width:calc(100% - 18px); padding:7px 9px; text-align: center; border-top:1px solid #c5cfd6}
#gnb .navi_sub li:first-child {border:0} 
#gnb .navi_sub a:hover {background:linear-gradient(90deg, #b09bfb, #8dbdff); border-radius:5px; color:#fff; font-weight: 600; text-shadow:0 1px 5px rgba(0,0,0,0.1)}
#gnb .navi_sub li a {display: block; line-height: 130%; padding:7px 5px; text-align: center; font-size:14px; font-weight:500; letter-spacing:-0.3px; word-break:keep-all; color:#4d4d4d}
#gnb .depth1.active .navi_sub {display: block}
#gnb .depth1.active .navi_sub li:hover a {transition:.3s}
.gnb_bg {overflow:hidden; width: 100%; height:400px; position: absolute; left: 0; top:131px;  background:#f5f5f5; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); z-index: 99}
    
/* visual */
.visual .visual_wrap {max-width:1980px}
.visual .visual_item {height:660px}
.visual .visual_item > a {height:660px}
.visual .item1 a:focus-visible{height:556px; outline:2px solid #000}
.visual .item1 {background:#fff url(../images/main/v_pc01.jpg) no-repeat 50% 0}
.visual .item2 {background:#fff url(../images/main/v_pc02.jpg) no-repeat 50% 0}
    
/* 팝업 존 */
/********************************************* Layout **********************************************/
/***Content Common***/   
.pc_none{display:none}

/* content layer */
h3.tit {font-size:1.538em}
#content .btn_more img {width:13px; height:13px}
    
/* 비주얼 퀵영역 */
.vcont_area {margin:-536px auto 0 auto; width:1400px; padding:25px 0}
.vcont_area .vcont_bg {display:flex; flex-direction: column; justify-content: space-between; width:950px; height:486px; margin:0 0 0 auto}
.vcont_area .vcont_pc {display:flex; flex-direction: row-reverse; justify-content: space-between; padding:25px}
    
/* 비주얼 퀵 */
.vquick_area {width:340px; margin-left:25px; flex-wrap:wrap; gap:20px}
.vq_area {width:100%}
.vq_area a {border-radius:15px}
.vq_atit {padding:28px 130px 48px 25px; min-height:100px; text-align: left; box-sizing: border-box}
.vq_atxt {flex-direction: inherit; justify-content: space-between; align-items: center; padding:12px 30px 12px 22px}
.vq_people {position: inherit; top:inherit; left:inherit; margin:0; width:72px; height:26px; line-height:26px; font-size:1.077em; font-weight:500}
.vq_submit {padding:2px 24px 0 0; font-size:1.143em; animation:.3s }
.vq_atit:before {left:inherit; right:20px; width:92px; height:46px; border-radius:0 0 92px 92px; margin:0}
.vq_atit:after {left:inherit; top:15px; right:33px}
.vq_area1 .vq_atit:after {margin:0}
.vq_area2 .vq_atit:after {margin:0}

/* 채용공고 */
#main_employlst {padding:0}
.employ_wrap {width:538px; height:320px}
.employ_wrap .tit {padding:5px 0 14px}
.employ_wrap .tit span {padding:2px 0 2px 38px}
.employ_wrap .btn_more {top:11px; left:216px}
.content_area .employ_wrap .btn_slide ul li a {width:42px; height:21px}
.content_area .employ_wrap .btn_slide {top:10px}
.state_type {min-width:96px; padding:7px 5px; margin-right:14px}
.emp_lst .emp_txt a {padding:8px 9px; font-size:1.154em}
.emp_lst .emp_txt {margin-top:0; margin-bottom:8px}
    
/* 공지사항 */
#main_notice {padding:25px}
.notice_box {display: flex; align-items: center}
.notice_box h3 {padding:0}
.notice_box h3 span {padding:2px 0 2px 38px}
.notice_box .notice_tb ul {height:66px; align-content: center; padding:15px 106px 15px 15px; border-radius:10px}
.notice_box .notice_tb ul li {padding:0 70px 0 20px} 
.notice_box .notice_tb ul li .tit a {font-size:1.154em}
.notice_box .notice_tb ul li:after {left:0}
.notice_box .tit {width:180px}
.notice_box .notice_tb ul li .date {font-size:1.077em}
.notice_box .notice_tb {width:calc(100% - 180px)}
.notice_box .btn_more {top:24px; left:132px}
.content_area .notice_box .btn_slide {top:17px; right:15px}
.content_area .notice_box .btn_slide ul li a {width:28px; height:28px}
.content_area .notice_box .btn_slide ul li {margin:1px 3px}
    
/* 사용자 퀵 */
.content01 {max-width:1400px; margin:40px auto}
.user_qbox {display: flex}
.user_qbox .tit {display:flex; justify-content: center; align-items:center; width:128px; text-align:center; padding:0; box-sizing: border-box}
.user_qbox ul {width:calc(100% - 148px); padding:27px 29px; gap:20px}
.user_qbox .tit span {display: flex; flex-wrap:wrap; justify-content: center; padding:70px 0 10px; width:64px}
.user_qbox ul li a {padding:18px 8px 8px}
.user_qbox ul li a .qico {width:69px; height:69px; background-size:38px auto}
.user_qbox ul li:hover a .qico {background-size:38px auto}
.user_qbox ul li a .qtit {line-height:140%; font-size:1.231em; margin:12px 0}
.user_qbox ul li a .qbarogo {padding:8px 22px 7px 12px}
.user_qbox .tit span:before {box-shadow:1px 2px 3px rgba(0,0,0,0.1)}

/* banner */
#main_banner {margin:40px 0}
.banner_wrap {max-width:1400px; margin:0 auto; min-height:62px}
.banner_wrap .tit {width:150px}
.ban_area {width:calc(100% - 150px)}
.ban_item a {max-width:224px; height:64px; margin:0 auto}
.banner_wrap .btn_more {top:5px; left:96px}
.banner_wrap .btn_slide {left:0}
.banner_wrap .btn_slide li button {width:35px; height:20px}

/* Footer */
#footwrap {overflow: hidden}
.foot_wrap {display: block; position:relative; /*max-width:1920px;*/ margin:0 auto}
.foot_wrap:before {content:""; display:block; position:absolute; top:70px; left:0; width:100%; height:1px; background:rgba(255,255,255,0.3)}
.foot_menu {display:none}
.foot_area {position:relative; max-width:1400px; margin:0 auto}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu {display: flex}
#footwrap .pc_menu li { height:70px; line-height:70px; padding: 0 22px; text-align: center}
#footwrap .pc_menu li:first-child {background: none; padding-left:0}
#footwrap .pc_menu li.li_1 a {color:#ffce66; text-decoration: underline; text-underline-position: under}
#footwrap .pc_menu li a {padding:25px 0; font-size:14px; font-weight:400; color:#fff}
#footwrap .pc_menu li a:hover{font-weight:600}
#footwrap .add_wrap {position: relative; display:flex; justify-content: space-between;  max-width:1400px; margin:0 auto; padding:0; text-align:left; font-size:1.077em; box-sizing: border-box}
#footwrap .flogo {position:absolute; top:1px; left:0; display:block; padding:29px 58px 29px 0}
#footwrap .flogo:before {content:""; display: block; position: absolute; top:0; right:0; width:100vw;  height:106px;  background:#2e323d; border-radius:0 0 20px 0; box-shadow:0 2px 2px 0 rgba(0,0,0,0.08); z-index:1}
#footwrap .flogo img {position:relative; z-index:2} 
.add_info {width:calc(100% - 490px); padding:30px 0 10px 290px}
.add_info address {line-height:150%}
#footwrap .ftit {font-weight:500}
#footwrap .foot_baro {position:absolute; top:0; right:0; display: flex; margin:10px 0; gap:10px}
#footwrap .foot_baro .fgengo {margin:0}
#footwrap .foot_baro .fgengo a {width:186px; height:50px; line-height:48px; box-sizing: border-box}
#footwrap .fadmin {display: block}
#footwrap .fadmin a {display: block; width:94px; height:50px; line-height:48px; padding:0 10px; color:#fff; text-align: center; box-sizing: border-box; transition:.3s; border:1px solid rgba(255,255,255,0.3); border-radius:5px}
#footwrap .fadmin a span {display:inline-block; padding:0 0 0 30px; background:url(../images/main/blt_admin.png) no-repeat 0 50%}    
#footwrap .fadmin a:hover {border-color:rgba(255,255,255,0.6)}
#footwrap .count_box {display:block; overflow: hidden; width:186px}
#footwrap .count_box h3 {display:none}
#footwrap .count_box ul li {height:38px; padding:0; font-size:14px; font-weight:500; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; color:#fff; text-align: center; border-bottom:1px solid rgba(255,255,255,0.3)}
#footwrap .count_box ul li .tit {display:block; width:50px; margin-right:6px; color:#a2a2a2; flex:1; font-size:13px}
#footwrap .count_box ul li .num {display: inline-block; width:calc(100% - 56px); text-align:right; font-weight:400; font-size:14px; padding:0}
#footwrap .count_box ul li.today .tit {color:#fff}
#footwrap .count_box ul li.today .num {color:#ff8c8c}
#footwrap .copy {padding:20px 0; text-align: left} 

}

/**** LOWSET FIX ****/
@media only screen and (min-width:1025px) and (max-width:1410px) {
#mainheader{position: relative; margin: 0 auto}
#mainheader .headerwrap{position: absolute; top:0; left:0}
}

@media only screen and (min-width:1410px) {
/* Menu FIX */
.top_bar_fix{position:absolute; top:0; left:0; width:100%; z-index:1000; transition: 0.6s}
.fixed {position:fixed; top:0; left:0; width:100%; height:84px; padding-left:0; background:#e7e7fc; box-shadow:0 2px 7px 0 rgba(0, 0, 0, 0.1); transition: 0.6s}
.line_color02 .fixed {background: #d5f0f2}
.fixed .header_btn {margin-top:-44px}
.fixed .header_top .logo {top:12px}
.fixed .header_top .logo a {padding:46px 58px 0 0}
.fixed #gnb .depth1 h2 a {padding:32px 0}
}

/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (min-width:1025px) and (max-width:1900px) {
    
}
/********* TABLET LAYOUT[중간사이즈 조정 끝] *********/
@media only screen and (max-width:767px) {
/* 팝업존 */
.mpop_top {max-width:310px; margin:0 auto 12px}
.mpop_tit img {height:20px}
.mpop_lstwrap {margin-top:-150px; margin-left:-160px}
.mpop_lstwrap .mpop_tb {width:320px}
.mpop_layer img {width:310px; height:178px}
.mpop_closebox {flex-wrap: wrap; gap:5px; max-width:310px; margin:10px auto 0}
.mpop_closebox li {width:100%}
.mpop_closebox li a {padding:0 10px; height:36px; line-height:34px; font-size:1em}
.mpop_zone {top:-30px}
.mpop_count {font-size:16px}
.mpop_zone .btn_slide {width:74px; height:30px}
.mpop_zone .btn_slide li button {margin:0}

}


/**** keyframe ****/
@keyframes bounce{
    0% {transform: translateY(0)}
    50% {transform: translateY(-6px)}
}
@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}
@keyframes effect2 {
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-3px)}
}
@keyframes effect3 {
    0%,40%,100% {transform:translatex(0)}
    20%,60% {transform:translatex(-3px)}
}