@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ 25.05.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}
a{text-underline-offset:3px}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 320px; font-family:'NSQ'; font-weight: 500}
#content{position: relative; z-index:1}
#mainheader {z-index: 100} 

/*Mainheader */
.header_top{z-index: 1000} 
.header_top .logo_top{position: absolute; top:70px; left:40px; width: 100%; height:46px}
.header_top .logo_top a{margin: 6px auto}

/*동부교육지원청 바로가기*/
.header_top .dongbu_go{padding:0 10px}
.header_top .dongbu_go a{position: relative; display: block; height: 30px; padding: 7px 10px; background: #fff; border-radius: 0 0 10px 10px; font-size: 14px; box-sizing: border-box; transition: all .3s}
.header_top .dongbu_go a::after{display: block; clear:both; content: 'GO'; position: absolute; top:5px; right:6px; width:35px; height: 19px; line-height: 19px; border-radius: 50px; background: #4d5d68; color:#fff; font-size: 12px; text-align: center}
.header_top .dongbu_go a span{padding: 10px 0 10px 30px; background:url(../images/main/dongbu_go.png) left center no-repeat; transition: all .3s}
.header_top .dongbu_go a:hover span{background:url(../images/main/dongbu_go_a.png) left center no-repeat; font-weight: 600; color:#0072bc}
.header_top .dongbu_go a:hover::after{background: #0072bc}

/*상단버튼*/ 
.header_top .mem_btnbx{display: flex; justify-content: space-between; gap:10px; padding: 10px 10px 0}
.header_top .mem_btnbx a{display: block; padding:0 15px; height: 30px; line-height: 30px; background-color: #6b7e8c; background-position: left 15px center; background-repeat: no-repeat; border-radius: 10px 10px 0 0; color:#fff; text-align: right; transition:all .3s}
.header_top .mem_btnbx a:hover{background-color: #344149}
.header_top .mem_btnbx .qmu_login a{background-image:url(../images/main/icon_login.png)}
.header_top .mem_btnbx .qmu_logout a{background-image:url(../images/main/icon_logout.png)}
.header_top .mem_btnbx .qmu_org a{background-image:url(../images/main/icon_org.png)}
.header_top .mem_btnbx .qmu_user a{background-image:url(../images/main/icon_user.png)}
 
/* Visual */
.visual {position:relative; overflow:hidden}
.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{display:block !important}
.visual_wrap .visual_item > a{position: relative; display:block !important}
.visual_wrap .visual_item > a:focus-visible{outline:2px solid #000}
.visual_wrap .visual_item span.vbg_txt{height:0; width:0; line-height:0; font-size:0;text-indent:-9999999px}
/*재생,일시정지*/
.visual_wrap .btn_visual{position: absolute; right:50%; bottom:47px; margin:0 -800px 0 0; z-index: 100}
.visual_wrap .btn_visual li.blind{display:none}
.visual_wrap .btn_visual button{width:16px; height:16px; margin: 0 0 0 4px; cursor:pointer; border-radius:50%; box-sizing: border-box}
.visual_wrap .btn_visual button.vbtn_pause{background:url(../images/main/vbtn_play.png) 0 0 no-repeat}
.visual_wrap .btn_visual .vbtn02 button.vbtn_pause{background:url(../images/main/vbtn_pause.png) 0 0 no-repeat}
/*비주얼 이동 블릿*/
.slick-dots {position: absolute; right:50%; bottom:50px; margin:0 -780px 0 0; z-index: 100}
.slick-dots li {display:block; float: left; margin: 0 7px 0 0; background:rgba(255, 255, 255, 0.6); border-radius:5px; opacity: 0.8px; box-sizing: border-box}
.slick-dots li button{display:block; width:16px; height:12px; border-radius:5px; cursor:pointer; box-sizing: border-box; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.15)}
.slick-dots li.slick-active button{display:block; width: 35px; height: 12px; background:#fff; border:none}
 
/********************************************* Layout **********************************************/

/***Content  Common***/    
/*더보기버튼 공통*/
.content_area .more a{position: relative; display: block; width: 72px; padding:6px 10px 7px; border-radius: 50px; background: #f7f7f7; color:#939393; text-align: left; align-content: space-around; transition: all .3s; box-sizing: border-box; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.content_area .more a::after{display: block; content: ''; clear: both; position: absolute; right:10px; top:8px; width: 10px; height: 10px; background:url(../images/main/btn_more_v1.png) no-repeat left center}
.content_area .more a::after{transition: all .3s}
.content_area .more a:hover{background-color:#dfdfdf}
.content_area .more a:hover::after{transform: rotate(180deg)} 

/*비주얼 컨텐츠*/
.visual_conline{min-height: 320px; padding: 8px; margin: -320px 10px 0; background: #fff; border-radius: 30px 30px 0 0; box-shadow:0 -2px 3px rgba(0, 0, 0, 0.05); box-sizing: border-box}

/*등록 및 제출 버튼*/
.visual_conline{position: relative; z-index: 10}
.visual_conline .topbtn_wrap{display: flex; justify-content: space-between; gap:10px}
.topbtn_wrap .topbtn{flex: 1}
.topbtn_wrap .topbtn a{overflow: hidden; display: block; border-radius:23px; border:2px solid #ccc; transition: all .3s; box-shadow:0 2px 2px rgba(0, 0, 0, 0.1); box-sizing: border-box}
.topbtn_wrap .topbtn .topbt_tit{padding: 10px; font-size: 14px; font-weight: 600; text-align: center} 
.topbtn_wrap .topbtn .topbt_tit > span{display: block}
.topbtn_wrap .topbtn .topbt_tit > span.ico{margin: 0 0 10px}
.topbtn_wrap .topbtn .topbt_tit > span.ico img{width: 33px}
.topbtn_wrap .topbtn .topbt_tit > span.user{ width:70px; height:26px; line-height:26px; margin:10px auto 0; border-radius:10px; background:#fff; font-size:14px; text-align:center; transition: all .3s}
.topbtn_wrap .topbtn .topbt_btn{padding: 10px; border-radius:15px 15px 0 0; background: #ccc}
.topbtn_wrap .topbtn .topbt_btn .btntxt{display: none}
.topbtn_wrap .topbtn .topbt_btn .btngo{position: relative; display: block; padding: 8px 15px; border-radius: 50px; background: #ccc; color:#fff; font-weight: 600; font-size: 14px; box-sizing: border-box; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1); transition: all .3s}
.topbtn_wrap .topbtn .topbt_btn .btngo::after{display: block; content: ''; clear: both; position: absolute; top:10px; right:15px; width: 25px; height: 11px; background:url(../images/main/btn_btngo.png) no-repeat left center}
/*채용공고 등록*/
.topbtn.topbtn_v1 a{border-color: #87d0ff} 
.topbtn.topbtn_v1 .topbt_tit .tit span{color:#3a94cf}
.topbtn.topbtn_v1 .topbt_tit span.user{background:#e3f4ff}
.topbtn.topbtn_v1 .topbt_btn{background:#87d0ff}
.topbtn.topbtn_v1 .topbt_btn .btngo{background:#59a9dd}
/*채용 지원서 제출*/
.topbtn.topbtn_v2 a{border-color: #89dde4}
.topbtn.topbtn_v2 .topbt_tit .tit span{color:#4bb5be}
.topbtn.topbtn_v2 .topbt_tit span.user{background:#daeff1}
.topbtn.topbtn_v2 .topbt_btn{background:#89dde4}
.topbtn.topbtn_v2 .topbt_btn .btngo{background:#59b9c1}
/*오버스타일*/
.topbtn_wrap .topbtn a:hover span.ico img{position: relative;transition:transform 1.2s;transform-style: preserve-3d; transform: rotateY(360deg)}
.topbtn_wrap .topbtn a:hover .topbt_tit > span.user{color:#fff}
.topbtn_wrap .topbtn a:hover .btngo::after{animation:effect3 2s ease infinite}
.topbtn.topbtn_v1 a:hover{border-color: #59a9dd; color:#3a94cf}
.topbtn.topbtn_v1 a:hover .topbt_tit span.user{background:#59a9dd}
.topbtn.topbtn_v1 a:hover .topbt_btn{background:#59a9dd}
.topbtn.topbtn_v1 a:hover .btngo{background:#2b6d97}
.topbtn.topbtn_v2 a:hover{border-color: #4bb5be; color:#4bb5be}
.topbtn.topbtn_v2 a:hover .topbt_tit span.user{background:#59b9c1}
.topbtn.topbtn_v2 a:hover .topbt_btn{background:#4bb5be}
.topbtn.topbtn_v2 a:hover .btngo{background:#32777d}

/*알림팝업*/
.visual_conline .popup_wrap{position: relative; margin-top: 12px}
/*타이틀*/
.popup_wrap h3.tit{font-size: 15px; font-weight:600}
.popup_wrap h3.tit span{display: block; padding: 5px 0 5px 30px; background:url(../images/main/ico_popup.png) no-repeat left center}
/*팝업이미지*/
.popup_wrap .popup{overflow: hidden; width:400px; height: 222px; margin: 12px auto; border-radius: 23px; background:url(../images/main/pop_none_new.jpg) no-repeat center; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.popup_wrap .pop_item a{display: block; overflow: hidden; width: 400px; height: 222px; margin: 0 auto; border-radius: 23px; box-shadow:0 3px 3px rgba(0, 0, 0, 0.1)}
.popup_wrap .pop_item a img{width:100%; height:222px; transition: all .5s}
.popup_wrap .pop_item > p a:hover img{transform: scale(1.05)}
/*버튼*/
.popup_wrap .pop_btn{position: absolute; top:0; right:0; display: flex; gap:7px}
.popup_wrap .pop_btn .btns{display: flex; gap:7px}
.popup_wrap .pop_btn .btns button{width: 38px; height: 26px; border-radius: 50px; background-color:#f6f6f6; background-position: center; background-repeat: no-repeat; font-size: 0; text-indent: -9999px; transition: all .3s; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.popup_wrap .pop_btn .btns button.pop_prev{background-image:url(../images/main/pop_prev.png)}
.popup_wrap .pop_btn .btns button.pop_next{background-image:url(../images/main/pop_next.png)}
.popup_wrap .pop_btn .btns button:hover{background-color:#dfdfdf}

/*채용공고 접수현황*/
.employ_wrap{position: relative; margin: 0 10px; padding: 10px; margin-bottom: 10px; background: #f5f5f5; border-radius: 15px;}
/*타이틀*/ 
.employ_wrap h3.tit{font-size: 15px; font-weight:600}
.employ_wrap h3.tit span{display: block; padding: 6px 0 5px 35px; margin-bottom: 10px; background:url(../images/main/ico_employ.png) no-repeat left center}
/*리스트*/
.employ_wrap .emp_lstbx{position: relative; padding: 13px; background: #fff; border-radius: 10px}
.employ_wrap .emp_lst a{display:block; width: 95%; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap}
.employ_wrap .emp_lst a:hover .txt{font-weight: 600}
/*상태*/
/*.employ_wrap span.state_type{display:block; width: 70px; height: 22px; line-height: 22px; margin-bottom: 13px; border-radius: 50px; background: #ccc; font-size: 13px; color:#fff; text-align: center}*/
.employ_wrap .state_type{display: block; width:100px; height: 26px; line-height: 26px; margin-bottom: 10px; border-radius: 50px; text-align: center; font-weight: 600; font-size: 13px; color:#fff; box-sizing: border-box}
.employ_wrap .state_type.state1{background: #d182ff}/*예정*/
.employ_wrap .state_type.state2{background: #ff6946}/*접수중*/
.employ_wrap .state_type.state3{background: #a5a5a5}/*접수마감*/
.employ_wrap .state_type.state4{background: #78b939}/*서류심사완료*/
.employ_wrap .state_type.state5{background: #3096d1}/*채용완료*/
.employ_wrap .state_type.state6{background: #f0f0f0; color:#919191}/*공고취소*/

/*버튼*/
.employ_wrap .emp_btn{position: absolute; top:13px; right:13px}
.employ_wrap .emp_btn .btns{display: flex; gap:7px}
.employ_wrap .emp_btn .btns a{display: block !important; width: 38px; height: 22px; border-radius: 50px; background-color:#f6f6f6; background-position: center; background-repeat: no-repeat; font-size: 0; text-indent: -9999px; transition: all .3s; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.employ_wrap .emp_btn .btns a.emp_prev{background-image:url(../images/main/emp_prev.png)}
.employ_wrap .emp_btn .btns a.emp_next{background-image:url(../images/main/emp_next.png)}
.employ_wrap .emp_btn .btns a:hover{background-color:#dfdfdf}
.employ_wrap .more{position: absolute; top:10px; right:10px}
.employ_wrap .more a{background: #fff}

/*공지사항*/
.notice_wrap{position: relative; margin:15px 10px; padding: 10px; border-radius: 15px; border:2px solid #f2f2f2; background: #fff;}
/*타이틀*/
.notice_wrap .noti_titbx{position: relative}
.notice_wrap .noti_titbx::after{display: block; content: ''; clear: both; position: absolute; left:0; top:0; width:100%; height:88px; border-radius: 10px; background: #4d5d68}
.notice_wrap .noti_titbx h3.tit{position: relative; padding: 18px 10px 12px; color:#fff; font-family: SJG; font-size: 19px; font-weight: 300; z-index: 1}
.notice_wrap .noti_titbx h3.tit span{padding: 8px 0 4px 35px; background:url(../images/main/ico_noti.png) no-repeat left center; background-size: 27px}
/*공지리스트*/
.noti_lstbx{position: relative; z-index: 1}
.noti_lstbx::after{display: block; content: ''; clear: both; position: absolute; left:0; bottom:0; width: 100%; height: 135px; border-radius: 10px; background: #f9f9f9}
.noti_lstbx ul{overflow: hidden; height: 256px}
.noti_lstbx li{position: relative;  border-bottom: 1px solid #ececec; box-sizing: border-box; z-index: 1}
.noti_lstbx li p{position: relative; padding: 16px 8px; z-index: 1}
.noti_lstbx li p.tit{display:block; overflow:hidden; width: 60%; padding-left: 27px; background:url(../images/main/ico_notilst.png) no-repeat left 5px center;  color:#5d5d5d; text-overflow:ellipsis; white-space:nowrap}
.noti_lstbx li p.date{position: absolute; top:0; right:5px; font-family:CGC}
.noti_lstbx li p.date span{padding:1px 0 1px 18px; background:url(../images/main/ico_date.png) no-repeat left 3px; color:#959595}
.noti_lstbx li:hover p.tit{background:url(../images/main/ico_notilst_a.png) no-repeat left 5px center; font-weight: 600; text-decoration: underline}
.noti_lstbx li:hover p.date span{padding:1px 0 1px 18px; background:url(../images/main/ico_date_a.png) no-repeat left 3px; color:#000}
/*공지 첫번째 리스트*/
.noti_lstbx li.first_lst{height: auto; margin: 0 10px 12px; padding:50px 0 0; border-bottom: none}
.noti_lstbx li.first_lst::after{display: block; content: ''; clear: both; position: absolute; left:0; top:0; width: 100%; height: 39px; border-radius: 10px 10px 0 0; background: #fff}
.noti_lstbx li.first_lst p{padding: 0}
.noti_lstbx li.first_lst p.tit{width: 95%; background: none; font-weight: 600}
.noti_lstbx li.first_lst p.txt{overflow: hidden; height: 38px; margin-top: 7px; line-height: 150%}
.noti_lstbx li.first_lst p.txt a{color:#545454}
.noti_lstbx li.first_lst p.date{top:9px; right:inherit; left:50%; margin-left: -53px; text-align: center; font-size: 15px; font-weight: 600}
.noti_lstbx li.first_lst p.date span{padding: 0; background: none; color:#000}
.noti_lstbx li.first_lst p.date span.big_year{display:inline-block; width:65px; height: 21px; line-height: 21px; margin-right: 7px; border-radius: 50px; background: #ffb448; text-align: center; font-size: 14px; font-weight: 600; color:#fff}
.noti_lstbx li.first_lst:hover p.txt a{color:#000}
/*더보기버튼*/
.notice_wrap .more{position: absolute; top:22px; right:23px; z-index: 10}
.notice_wrap .more a{background: #4d5d68; border:1px solid #748591; color:#748591; box-sizing: border-box}
.notice_wrap .more a::after{background:url(../images/main/btn_more_v2.png) no-repeat left center}

/*사용자 퀵메뉴*/  
.userquick_wrap{margin:15px 10px}
.userquick_wrap .user_quick{background: #ccc; padding: 13px}
.user_quick .tit{margin-bottom: 13px; font-family: SJG; font-size: 18px; color:#fff; text-align: center; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2)}
.user_quick .tit br{display: none}
.user_quick ul{display: flex; justify-content: space-between; gap:15px}
.user_quick ul li{flex: 1; border-radius:15px 15px 5px 5px; background: #fff; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);  text-align: center; transition: all .3s}
.user_quick ul li a{display: block; padding:5px 5px 8px}
.user_quick ul span{display: block}
.user_quick ul span.qico{height: 61px; margin-bottom: 5px; align-content: space-around} 
.user_quick ul span.qico img{width: 43px}
.user_quick ul span.qtit{line-height: 140%}
.user_quick ul span.qtit br{display: none}
/*채용담당자*/
.userquick_wrap .user_type1{margin-bottom: 15px; border-radius: 15px 15px 5px 5px; background: #4fafed}
/*채용지원자*/
.userquick_wrap .user_type2{border-radius: 5px 5px 15px 15px; background: #5cbdc5}
.userquick_wrap .user_type2 ul li{border-radius:5px 5px 15px 15px}
/*오버스타일*/  
.user_quick ul li a:hover span.qico img{position: relative;transition:transform 1.2s;transform-style: preserve-3d; transform: rotateY(360deg)}
.user_quick ul li a:hover span.qtit{font-weight: 600}
.user_quick.user_type1 ul li a:hover span.qtit{color:#3291cf}
.user_quick.user_type2 ul li a:hover span.qtit{color:#409aa1}

/* Banner */ 
.banner_wrap {position: relative; height:55px; margin:25px 10px 15px; box-sizing: border-box}
.banner_wrap .tit{padding:0; color:#4c5459; font-size: 16px; font-weight: 500; font-family: SJG}
.banner_wrap .tit span{padding: 10px 0}
/*배너리스트*/
.banner_wrap .ban_area{margin:-21px 0 0 125px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 220px; height:53px; margin: 0 auto; border-radius:10px; border:1px solid #e6e6e6; background:#ccc}
.banner_wrap .ban_item img {margin: 0 auto; width:220px; height:53px; transition: all .5s}
.banner_wrap .ban_item a:hover img{transform: scale(120%)}
/*버튼*/
.banner_wrap .ban_btn{position: absolute; bottom:8px; left:0}
.banner_wrap .ban_btn .btns{display: flex; gap:7px}
.banner_wrap .ban_btn .btns button{width: 34px; height: 19px; border-radius: 50px; background-color:#4c5459; background-position: center; background-repeat: no-repeat; font-size: 0; text-indent: -9999px; transition: all .3s; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
.banner_wrap .ban_btn .btns button.ban_prev{background-image:url(../images/main/ban_prev.png)}
.banner_wrap .ban_btn .btns button.ban_stop{background-image:url(../images/main/ban_stop.png)}
.banner_wrap .ban_btn .btns button.ban_next{background-image:url(../images/main/ban_next.png)}
.banner_wrap .ban_btn .btns button:hover{background-color:#7a848a}
.banner_wrap .more{position: absolute; top:-2px; left:80px}
.banner_wrap .more a{width: 34px; height: 18px; padding: 0; background: #dbdbdb; font-size: 0}
.banner_wrap .more a::after{right:11px; top:5px; background:url(../images/main/btn_more_v3.png) no-repeat left center}
.banner_wrap .more a:hover{background: #b1b1b1}

/* Footer */
#footwrap{background: #4c5459}
/*문의전화 및 주소*/
#footwrap .add_num{display: flex; gap:10px; margin-bottom: 10px; color:#fff}
#footwrap .add_num dt{width: 70px; height: 25px; line-height: 25px; border-radius: 50px; background: #687177; text-align: center; color:#fff}
#footwrap .add_num dd{width: 80%; align-content: space-around; line-height: 160%}
/*광주광역시교육청 바로가기*/
#footwrap .btn_offiedu a{position: relative; display: block; height: 34px; line-height: 34px; padding:0 10px; border-radius: 10px; background: #f1f1f1; font-weight: 600; font-size: 14px; box-sizing: border-box; transition: all .3s}
#footwrap .btn_offiedu a::after{display: block; clear:both; content: 'GO'; position: absolute; top:6px; right:6px; width:44px; height:22px; line-height: 22px; border-radius: 50px; background: #4d5d68; color:#fff; font-size: 12px; text-align: center}
#footwrap .btn_offiedu a:hover{color: #0072bc}
#footwrap .btn_offiedu a:hover::after{background: #0072bc}
/*카피라이트*/
#footwrap .copy{color:#b2b2b2; line-height: 150%; text-align: center}

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

/*Mainheader */
.header_top{width: 100%; height: 116px; background: #4d5d68} 
.header_top .logo_top{background: #fff}
    
/*모바일 로고*/
.header_top .logo_top{position: absolute; top:70px; left:0; width: 100%; height:46px}
.header_top .logo_top a{display: block; width:164px; height: 34px; margin: 6px auto; background: url(../images/main/logo_m.png) no-repeat left top; z-index: 10}
.header_top .logo_top img{display: none}

/*상단버튼*/
.header_top p.qmu_mem,
.header_top .gnbline_btn{width: 50%}
.header_top .mem_btnbx .btn_all a{background-image:url(../images/main/icon_btnall.png)}
.header_top .mem_btnbx p.qmu_org,
.header_top .mem_btnbx p.qmu_user{display: none}

/* Mobile fix */
.fixed{position:fixed; top:0; left:0; width:100%; min-width: 320px; height: 57px; transition: 0.6s}
.fixed .header_top{height: 40px} 
.fixed .header_top .dongbu_go{display: none}
.fixed .header_top .logo_top{top: 40px; background:rgba(255,255,255,0.9); box-shadow:0 2px 3px rgba(0, 0, 0, 0.1)}

/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0; width: 100%; height:100%; min-height:100%; min-width: 330px; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
.gnb_topbx{padding: 0 10px; background: #4d5d68}
#gnb p.mb_gnbtit{display: block; height:50px; line-height: 50px; border-radius: 0 0 20px 20px; background:#fff; font-size:18px; font-weight:500; color:#4d5d68; box-shadow:0 2px 2px rgba(0, 0, 0, 0.1); font-family:SJG}
#gnb p.mb_gnbtit span{padding-left:15px}
/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:10px; right:23px;  width: 28px; height: 28px; overflow: hidden; background: url(../images/main/btn_menu_close.png) no-repeat left top; font-size:0; line-height:0; text-indent:-9999px}
/*GNB_메뉴버튼*/
#gnb .mbl_area{box-sizing: border-box}
#gnb .mbl_area .mbl_btntx{margin-top: 15px}
#gnb .mbl_area .mbtn_membx{display: flex; gap: 15px}
#gnb .mbl_area .mbtn_membx p {flex: 1; height: 37px; line-height: 37px; border-radius:10px 10px 0 0}
/* #gnb .mbl_area .mbtn_membx p:first-child a{background:url(../images/main/icon_login_m.png) no-repeat 10px center #6b7e8c}
#gnb .mbl_area .mbtn_membx p:last-child a{background:url(../images/main/icon_join_m.png) no-repeat 10px center #6b7e8c} */
#gnb .mbl_area .mbtn_membx p a{display: block; height: 37px; line-height: 37px; padding:0 10px; background-color: #6b7e8c; background-position: left 15px center; background-repeat: no-repeat; border-radius: 15px 15px 0 0; color:#fff; font-size: 14px; font-weight:600; text-align: right; box-sizing: border-box; transition:all .3s}
#gnb .mbl_area .mbtn_membx p a:hover{background-color: #344149}
#gnb .mbl_area .mbtn_membx p.qmu_login a{background-image:url(../images/main/icon_login.png)}
#gnb .mbl_area .mbtn_membx p.qmu_logout a{background-image:url(../images/main/icon_logout.png)}
#gnb .mbl_area .mbtn_membx p.qmu_org a{background-image:url(../images/main/icon_org.png)}
#gnb .mbl_area .mbtn_membx p.qmu_user a{background-image:url(../images/main/icon_user.png)}
#gnb .mbl_area .mbtn_membx p span{padding-left: 20px}
#gnb .mbl_area p.mbtn_srch a{display:block; padding:10px; margin-bottom: 10px; background:url(../images/main/icon_srch_m.png) no-repeat 10px center;  border-radius:50px; border:1px solid #d5d5d5; color:#fff; font-size: 14px; font-weight:600; text-align: right; box-sizing: border-box}
/*GNB_메뉴타이틀*/
#gnb .gnb_list{padding: 10px}
#gnb .gnb_list .depth1 > h2{margin-bottom: 13px}
#gnb .gnb_list .depth1 > h2 a{position: relative; display:block; border:1px solid #e9e9e9; line-height:48px; font-size:16px; font-weight:600; padding:0 0 0 15px; margin:0; width:auto; border-radius: 10px; background: #fff; color:#000; box-sizing: border-box}
#gnb .gnb_list .depth1 > h2 a::after{content: ""; display: block; clear: both; position:absolute; right:10px; top:10px; width: 44px; height: 25px; border-radius: 50px; background:url(../images/main/bg_mn.png) no-repeat center #d5d5d5}
#gnb .gnb_list .act > h2 a {position: relative; background:#63bcf5; color:#fff}
#gnb .gnb_list .act > h2 a::after{background:url(../images/main/bg_mn_a.png) no-repeat center #fff; box-shadow:0 2px 2px rgba(0, 0, 0, 0.1)}
/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: 100%; padding:10px; margin:-6px 0 10px; border-radius:13px; background: #f8f8f8; box-sizing: border-box; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}
#gnb .gnb_list .depth1 .navi_sub ul > li{margin-bottom: 7px; border-bottom: 1px solid #e2e2e2}
#gnb .gnb_list .depth1 .navi_sub ul > li:last-child{margin-bottom: 0; border-bottom: none}
#gnb .gnb_list .depth1 .navi_sub ul > li > a {position: relative; display:block; padding:3px 3px 3px 20px; margin-bottom: 5px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; font-size: 14px; font-weight: 400; line-height:180%;}
#gnb .gnb_list .depth1 .navi_sub ul > li:last-child a{margin-bottom: 0}
#gnb .gnb_list .depth1 .navi_sub ul  > li > a::after{display: block; clear: both; content: ''; position: absolute; top:12px; left:5px; width: 5px; height: 5px; background: #9d9d9d; border-radius: 50px}
#gnb .gnb_list .depth1 .navi_sub ul  > li:hover a::after{background:#000}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {background:#e0e0e0; border-radius: 8px; color:#000; font-weight:600}

/* Visual */
.visual .visual_wrap {position: relative;  margin: 0 auto}
.visual .visual_item{position: relative; width:auto; height:514px; margin: 0 auto}
.visual .item1{background:url(../images/main/v01_m_new.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v02_m_new.jpg) no-repeat top center}
/*비주얼 이동 블릿, 재생,일시정지*/
.slick-dots, .visual_wrap .btn_visual {display: none !important}

/* Footer */  
#footwrap{padding:0 10px 10px}
#footwrap .foot_area{position:relative}
#footwrap .foot_mlst{position: relative}
#footwrap .mb_menu{position: relative; margin:0 auto; text-align: center}
#footwrap .mb_menu li{position: relative; display: inline-block; padding:7px 10px; height: 25px; line-height: 25px}
#footwrap .mb_menu li::after {content:""; clear:both; display:block; position: absolute; top:14px; right:-3px; width: 1px; height: 10px; background: #d0d0d0}
#footwrap .mb_menu li:first-child {padding:7px 3px 7px 8px}
#footwrap .mb_menu li:first-child::after, #footwrap .mb_menu li:last-child::after{background:none}
#footwrap .mb_menu li a {display:block; font-size: 13px; font-weight: 400; color:#fff}
#footwrap .mb_menu li.foot_home a{display:block;  padding:5px 0; width: 18px; height: 18px; line-height: 18px; background:url(../images/main/foot_home.gif) no-repeat left 4px}
#footwrap .mb_menu li.foot_home a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
/*PC버튼*/
#footwrap .pc_menu{display: flex; flex-wrap: wrap; background: #687177; border-radius:15px;  margin-bottom: 15px}
#footwrap .pc_menu li{flex: 1; min-width: 150px; border-right: 1px solid #4c5459; border-bottom: 1px solid #4c5459; text-align: center; box-sizing: border-box}
#footwrap .pc_menu li a{display: block; padding: 10px; color:#fff}  
#footwrap .pc_menu li.li_1 a{font-weight: 600; color:#67cfff}
/*하단로고*/
#footwrap .foot_logo{margin:15px 0 10px; text-align: center}
#footwrap .foot_logo img{width: 169px}
/*주소*/
#footwrap .add_area{margin-top:15px}
#footwrap .add .address{width:auto; line-height:160%; text-align: center; font-weight: 400; font-size: 14px}
#footwrap .address br{display: none}
#footwrap .add .address p.copy{padding: 10px 0; line-height: 130%; font-weight: 400; font-size: 12px}
#footwrap .count_box{display:none}
#footwrap .btn_admin{display:none}
.address dl.add_num dd li{position: relative; display: inline-block; padding: 0 8px}
.address dl.add_num dd li::after {content:""; clear:both; display:block; position: absolute; top:6px; right:-2px; width: 1px; height: 10px; background: #a2a2a2}
.address dl.add_num dd li:last-child::after{display: none}
    
/********************************************* Layout **********************************************/

/***Content  Common***/   
.mb_none{display: none}
.content_area{position: relative}
.conline02 .inside_line{margin:0 10px}
 
/* Banner */
.banner_wrap .ban_item a {width: 176px; height:53px}
.banner_wrap .ban_item img {width: 176px; height:53px}
 
}


/******** PC LAYOUT ********/
@media only screen and (min-width:1025px) {
.skip_navi .mb_skip{display:none}
#wrap {min-width:1600px}
#content{position: relative} 
.header_top .qmenu .pc_non{display: none} 
 
/* Mainheader */
.headerwrap {position: relative; width: 100%; height: 117px; margin: 0 auto; background:url(../images/main/bg_headerwrap.gif) no-repeat center top}
.header_top{position: relative; width: 1600px; margin: 0 auto}  
.header_top .logo_top{top:60px; width: 192px; height:40px}
.header_top .qmu_btnbox{display: flex; justify-content: space-between}

/*동부교육지원청 바로가기*/
.header_top .dongbu_go{padding:7px 0 0}
.header_top .dongbu_go a{width: 278px; height: 34px; line-height: 25px; border-radius: 10px 10px 0 0}
.header_top .dongbu_go a::after{top:10px; right:8px}

/*상단버튼*/  
.header_top .mem_btnbx{padding:7px 0 0}
.header_top .mem_btnbx a{width: 163px; height: 34px; line-height: 34px; font-size: 14px}
.header_top .mem_btnbx .qmu_join a{background-image:url(../images/main/icon_join.png)}
.header_top .gnbline_btn{position: absolute; top:61px; right:0; display: flex; gap:13px}
.header_top .gnbline_btn a{width: 66px; height: 36px; background-color:#fff; border-radius: 50px; border:2px solid #d6d6d6; background-position: center; font-size: 0; text-indent: -9999px; box-sizing: border-box}
.header_top .gnbline_btn a:hover{background-color: #4d5d68; border-color:#4d5d68}
.header_top .gnbline_btn .qmu_search a{background-image:url(../images/main/btn_search.png)}
.header_top .gnbline_btn .qmu_site a{background-image:url(../images/main/btn_sitemap.png)}
.header_top .gnbline_btn .qmu_search a:hover{background-image:url(../images/main/btn_search_a.png)}
.header_top .gnbline_btn .qmu_site a:hover{background-image:url(../images/main/btn_sitemap_a.png)}

/* GNB */
#gnb .allbtnclose, #gnb .mbl_area, #gnb .navi_sub, #gnb .mb_gnbtit, #gnb p.gnb_mbtxt{display: none}
#gnb .gnb_list{display: flex; justify-content: space-between; margin: 0 150px 0 400px}
#gnb .depth1 {position: relative;  padding:29px 0; text-align: center; z-index: 1000; text-align: center}
#gnb .depth1 h2 a{position: relative; display: inline; text-align: center; font-size:19px; color: #000; font-weight:500}
#gnb .navi_sub{position: absolute; left:50%; top:68px; width:190px; margin-left:-110px; padding:12px; border-radius:35px 35px 15px 15px; box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); border:2px solid #75c5ea; background:#fff}
#gnb .navi_sub::before{content: ""; display: block; clear: both; position: absolute; top:-10px; left:50%; margin-left: -25px; width:57px; height:19px; border-radius: 50px; background:url(../images/main/arw_navisub.png) no-repeat center top; z-index:1}
#gnb .navi_sub li:nth-child(2n){background:#f5f5f5; border-radius:50px}
#gnb .navi_sub li a{display: block; line-height: 140%; padding:10px 5px 8px; margin: 5px 0; text-align: center; font-size:14px; color:#000; font-weight: 600}
#gnb .navi_sub li:first-child a{margin-top: 0}
#gnb .navi_sub li:last-child a{margin-bottom: 0; border:none}
/*GNB-hover*/
#gnb .depth1.active .navi_sub{display: block; z-index: 30}
#gnb .depth1.active h2 > a{font-weight:600; color: #0072bc}
#gnb .navi_sub li:hover a,
#gnb .depth1.active .navi_sub .depth2 > li.active a{position: relative; display: block; font-weight:600; background: #59a9dd; border-radius: 50px; color:#fff}
#gnb .depth1:hover::before{content: ""; display: block; clear: both; position: absolute; top:10px; left:50%; width:32px; height:12px; margin-left: -17px; background:url(../images/main/ico_gnb.png) no-repeat center top; z-index:1}
 
/* Visual */ 
.visual{margin-bottom: 0; position: relative}
.visual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.visual .visual_item{display: block; position: relative; width:100%; height:529px}
.visual .visual_item > a{display: block; height:567px}
.visual .item1 a:focus-visible{height:605px; outline:2px solid #000}
.visual .item1 {background:url(../images/main/v01_p_new.jpg) no-repeat center top}
.visual .item2 {background:url(../images/main/v02_p_new.jpg) no-repeat center top}

/********************************************* Layout **********************************************/

/***Content  Common***/   
.pc_none{display:none}
.content_area{position: relative; width: 1600px; margin:0 auto}
.content_line {display: flex; justify-content: space-between; margin: 55px 0 65px}
    
/*더보기버튼 공통*/
.content_area .more a{width: 91px; padding:5px 15px 8px; font-size: 16px; font-weight: 600}
.content_area .more a::after{right:13px; top:9px} 

/*비주얼 컨텐츠*/
.visual_conline{min-height: 338px; padding: 35px 0 23px 38px; margin: -410px 0 72px 664px; background:none; border-radius:0; box-shadow:none}
.visual_conwrap{display: flex; justify-content: space-between}
/*등록 및 제출 버튼*/ 
.visual_conline .topbtn_wrap{gap:33px; width: 467px; height: 262px}
.topbtn_wrap .topbtn a{height:100%; border-radius:30px}
.topbtn_wrap .topbtn .topbt_tit{position: relative; height: 170px; padding: 30px 25px; font-size:21px; text-align:left; line-height: 150%; box-sizing: border-box} 
/*.topbtn_wrap .topbtn .topbt_tit .tit span{display: block} */
.topbtn_wrap .topbtn .topbt_tit > span.ico{position: absolute; bottom:14px; right:20px; margin:0}
.topbtn_wrap .topbtn .topbt_tit > span.ico img{width:auto}
.topbtn_wrap .topbtn .topbt_tit > span.user{float:left}
.topbtn_wrap .topbtn .topbt_btn{height:90px; padding:22px 15px; box-sizing: border-box}
.topbtn_wrap .topbtn .topbt_btn .btntxt{display: block; margin-bottom: 13px; text-align: center; color:#fff; font-weight: 600; font-size: 14px; text-shadow:0 1px 2px rgba(0, 0, 0, 0.1);}
.topbtn_wrap .topbtn .topbt_btn .btngo{padding: 14px; font-size: 16px}
.topbtn_wrap .topbtn .topbt_btn .btngo::after{top:15px; right:15px}

/*알림팝업*/
.visual_conline .popup_wrap{margin-top: 0px; width:400px}
/*타이틀*/
.popup_wrap h3.tit{font-size: 18px}
.popup_wrap h3.tit span{padding: 5px 0 5px 30px}

/*채용공고 접수현황*/
.employ_wrap{display: flex; padding: 10px 0; margin:0; margin-bottom:0 }
/*타이틀*/ 
.employ_wrap h3.tit{width: 224px; padding: 0 22px; font-size: 17px; box-sizing: border-box; align-content: space-around}
.employ_wrap h3.tit span{margin-bottom: 0}
/*리스트*/
.employ_wrap .emp_lstbx{width: 1237px; border-radius: 15px; box-sizing: border-box}
.employ_wrap .emp_lst > div a{display: flex; gap:10px}
.employ_wrap .emp_lst a{width: 95%}
.employ_wrap .emp_lst .txt{display:block; width:1015px; font-size: 16px; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; align-content: space-around} 
/*상태*/
.employ_wrap .state_type{margin-bottom: 0}
/*버튼*/
.employ_wrap .emp_btn{top:13px; right:16px}
.employ_wrap .emp_btn .btns{gap:10px}
.employ_wrap .emp_btn .btns a{height: 26px}
.employ_wrap .more{top:22px; right:22px}

/*공지사항*/
#main_notice{width: 848px; height: 314px}
.notice_wrap{height: 314px; margin:0; padding: 20px; border-radius: 30px; box-sizing: border-box}
/*타이틀*/ 
.notice_wrap .noti_titbx::after{width:178px; height:271px; border-radius: 15px}
.notice_wrap .noti_titbx h3.tit{position: absolute; top:180px; left:45px; padding:0; font-size: 21px}
.notice_wrap .noti_titbx h3.tit span{padding: 49px 0 0 0; background-position: top center; background-size: auto}
/*공지리스트*/ 
.noti_lstbx::after{left:inherit; right: 0; width: 609px; height: 150px; border-radius: 15px}
.noti_lstbx ul{height: 271px; padding-left:205px} 
.noti_lstbx li p{padding: 18px 8px 17px}
.noti_lstbx li p.tit{width: 75%; font-size: 14px}
.noti_lstbx li p.date{right:17px; font-size: 13px}
.noti_lstbx li p.date span, .noti_lstbx li:hover p.date span{background-position: left 3px}
/*공지 첫번째 리스트*/
.noti_lstbx li.first_lst{margin: 0 10px 12px; padding:17px 0 0}
.noti_lstbx li.first_lst::after{left:-205px; top:10px; width: 178px; height: 96px; border-radius: 10px 0 0 48px}
.noti_lstbx li.first_lst p.tit{font-size: 17px}
.noti_lstbx li.first_lst p.txt{height: 45px; margin: 18px 0 26px; line-height: 170%; font-size: 15px}
.noti_lstbx li.first_lst p.date{top:28px; right:inherit; left:-160px; margin:0; font-size: 21px}
.noti_lstbx li.first_lst p.date span.big_year{display:block; width:85px;  margin:0 0 13px; font-size: 15px}
/*더보기버튼*/
.notice_wrap .more{top:inherit; right:inherit; bottom:38px; left:41px}
.notice_wrap .more a{width: 141px}

/*사용자 퀵메뉴*/  
#main_userquick{width: 717px}
.userquick_wrap{margin:0}
.userquick_wrap .user_quick{display: flex; padding: 14px; height: 147px; box-sizing: border-box}
.user_quick .tit{width: 156px; margin-bottom:0; line-height: 150%; font-size: 20px; align-content: space-around}
.user_quick .tit br{display:block}
.user_quick ul{width: 100%}
.user_quick ul li{border-radius:20px 20px 10px 10px}
.user_quick ul li a{height: 100%; padding:5px 5px 8px; font-size: 15px; box-sizing: border-box}
.user_quick ul span.qico{margin: 10px 0} 
.user_quick ul span.qico img{width:auto}
.user_quick ul span.qtit{line-height: 140%}
.user_quick ul span.qtit br{display: none}
/*채용담당자*/
.userquick_wrap .user_type1{margin-bottom: 20px; border-radius:30px 30px 10px 10px}
/*채용지원자*/
.userquick_wrap .user_type2{border-radius: 10px 10px 30px 30px}
.userquick_wrap .user_type2 ul li{border-radius:10px 10px 20px 20px}
 
/* Banner */
.banner_wrap {margin:0 0 50px}
.banner_wrap .tit{font-size: 18px}
/*배너리스트*/
.banner_wrap .ban_area{margin:-21px 0 0 145px}
/*버튼*/
.banner_wrap .ban_btn{bottom:3px}
.banner_wrap .ban_btn .btns{gap:13px}
.banner_wrap .more{top:0; left:95px}
.banner_wrap .more a{width: 34px; height: 18px; padding: 0; font-size: 0}
.banner_wrap .more a::after{top:4px}

/* Footer */
#footwrap {position: relative}
#footwrap .foot_area {width:1600px; margin:0 auto}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu{display: flex; gap:50px; padding: 30px 0; border-bottom: 1px solid #8e9294} 
#footwrap .pc_menu li{position: relative}
#footwrap .pc_menu li::after{content:""; clear:both; display:block; position: absolute; top:5px; right:-25px; width: 5px; height: 5px; background: #bbb; border-radius: 50px}
#footwrap .pc_menu li:last-child::after{background: none}
#footwrap .pc_menu li a {font-size:14px; color:#ededed; font-weight:400; transition: all .3s}
#footwrap .pc_menu li a:hover{color:#fff; font-weight:600}
#footwrap .pc_menu li.li_1 a{padding-left: 23px; background:url(../images/main/ico_protect.png) no-repeat left center; font-weight: 600; color: #6ecaff}
#footwrap .pc_menu li.li_1 a:hover{background:url(../images/main/ico_protect_a.png) no-repeat left center; color:#ebe078}
#footwrap .add_area{position: relative; width: 1600px; margin: 0 auto; padding: 30px 0; box-sizing: border-box}
/*문의전화 및 주소*/
#footwrap .add{margin-left: 220px}
#footwrap .add_num dt{width: 75px} 
/*광주광역시교육청 바로가기*/
#footwrap .btn_offiedu{position: absolute; top:-57px; right:0; width:238px}
#footwrap .btn_offiedu a{height: 38px; line-height: 38px}
#footwrap .btn_offiedu a::after{top:8px; right:10px}
/*관리자*/
#footwrap .btn_admin{position: absolute; top:-57px; right:250px}
#footwrap .btn_admin a{display: block; width:118px; height: 38px; padding:0 10px; line-height: 38px; border-radius:10px; border:1px solid #778086; background-image:url(../images/main/icon_admin.png); background-position: left 10px center; background-repeat: no-repeat; color: #fff; font-size: 14px; font-weight: 500; text-align: right; box-sizing: border-box; transition: all .3s} 
#footwrap .btn_admin a:hover{background-color: #778086}
/*카운터 */ 
#footwrap .count_box {display:block; position: absolute; bottom:33px; right:0}
#footwrap .count_box ul{overflow: hidden; width:240px; min-height:85px; padding:0 10px; border-radius: 10px; background: #3b4247; box-sizing: border-box}
#footwrap .count_box ul li{display: flex; flex: 1; justify-content: space-between; height: 42px; line-height:42px; padding:0 12px;  color:#bfc3c5; box-sizing:border-box}
#footwrap .count_box ul li:last-child{ border-top:1px solid #707579}
#footwrap .count_box ul li .tit{padding-left: 20px; background:url(../images/main/ico_count.png) no-repeat left center}
#footwrap .count_box ul li.today .tit,
#footwrap .count_box ul li.today .num{color:#fff}
/*하단로고*/
#footwrap .foot_logo{position: absolute; top:30px; left:0}
/*카피라이트*/
#footwrap .copy{margin-left: 220px; 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: 100px; padding-left:0; margin-top:-36px; background:rgba(255,255,255,0.95); box-shadow:0 3px 5px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap{height: 100px; background:none}
.fixed .header_top{padding-top: 37px}
.fixed .logo_top{top:46px; left: 0} 
.fixed .qmenu{display: none}
.fixed #gnb .depth1{padding: 23px 0}
.fixed .gnb_box{border-radius: 0; background:none; box-shadow:none}
.fixed #gnb ul.gnb_list{margin: 0 0 0 400px}
.fixed #gnb .navi_sub{top:60px}
}

/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (min-width:1025px) and (max-width:1900px) {
}
/********* TABLET LAYOUT[중간사이즈 조정 끝] *********/
@media only screen and (max-width:560px) {
/*알림팝업*/
/*팝업이미지*/
.popup_wrap .popup{width: 100%; height: 190px; background:url(../images/main/pop_none_m.png) no-repeat center}
.popup_wrap .pop_item a{width: 100%; height: 190px}
.popup_wrap .pop_item a img{width:100%; height:190px}
}

@media only screen and (max-width:450px) {
/*사용자 퀵메뉴*/ 
.user_quick ul span.qtit br{display:block}
}


/**** keyframe ****/
@keyframes shake{
    0% {transform:translateY(3px)}
    50% {transform:translateY(-3px)}
    100% {transform:translateY(3px)}
}
@keyframes shake2{
    0% {transform:translateY(5px)}
    50% {transform:translateY(-5px)}
    100% {transform:translateY(5px)}
}
@keyframes shake3 {
    0%,40%,100% {transform:translatex(0)}
    20%,60% {transform:translatex(-5px)}
}
@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)}
}