@charset "utf-8";
/* CSS Document */
/* com2zoa design PJH 251121 */

/********************************************* 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: 310px; font-family:'SCdream'; font-weight: 500}
#content{position: relative; min-width: 310px; z-index:1}
#mainheader {z-index: 100} 
#mainheader .headerwrap{border-bottom: 1px solid #cccccc}
#mainheader .headerwrap .header_area{height: 50px; margin: 0 auto; background: #37404e}
/* Mainheader */
.header_top .logo_top{position: absolute; top: 70px}
.header_top{width:1400px; margin:0 auto}
.header_top .logo_top a{font-size: 0}
.gnb_box{margin-top: 84px}
/* qmu_btnbox */
.qmu_btnbox .gj_go{align-content: center}
.qmu_btnbox .gj_go:hover span{color: #48acbe; transition: all .3s}
.qmu_btnbox .gj_go a{padding-left:25px; font-size:14px; color: #fff; background: url(../images/main/gj_go.png)no-repeat left top}
.mem_btnbx{align-content: center}
.mem_btnbx{display: flex; align-items: center; gap:10px}
.qmu_mem.qmu_login a{display: block; width: 118px; height: 30px; line-height: 30px; background: #006ab8; border:1px solid #006ab8; border-radius:15px; font-size: 14px; color:#fff; text-align:center; box-sizing: border-box}
.qmu_mem.qmu_login.rule a{border-color:#00ae7b; background: #00ae7b}
.qmu_mem.qmu_login.rule a span{padding-left:25px; background: url(../images/main/icon_rule.png)no-repeat left center}
.qmu_mem.qmu_login a:hover{border-color:#fff; background:none; transition: all .3s}
.qmu_mem.qmu_login a span{padding-left:25px; background: url(../images/main/icon_login.png)no-repeat left center}

/* Visual */
.visual {position:relative; overflow:hidden; margin-top: 55px}
.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{display: block; 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%; top:20px; margin-right:-35px; 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:10px; height:10px; 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: 30px; height: 10px; background:#fff; border:none}

/********************************************* Layout **********************************************/
/* v_quick */
.v_quick{width: 1400px; margin: 0 auto; z-index: 100}
.v_quick .vq_lst{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -147px; padding: 0 20px}
.v_quick .vq_lst a{display: block; position:relative; width:323px; height:220px; padding: 10px; text-align: center; border-radius:10px; font-size: 23px; font-weight: 600; background:linear-gradient(to bottom, #0a2865, #407fae); color: #fff; box-sizing: border-box; align-content: center}
.v_quick .vq_lst a:hover{background: #173970}
.v_quick .vq_lst a:hover span.fq_img img{animation:fq_img 1.5s ease infinite}
.v_quick .vq_lst a span.fq_tit{display: block; position: relative; padding-top: 40px}
.v_quick .vq_lst a span.fq_tit::after{clear: both; content: ''; position: absolute; display: block; width: 40px; height: 1px; background: #fff; left: 50%; margin-left: -20px; top: 50%; margin-top: -10px}

/*알림창*/
.main_popwrap{position: absolute; top: 220px; right: 0}
.main_popwrap .mpop_open a{display: block; width:87px; height:65px; padding:10px; border-radius:8px 0 0 8px; text-align: center; background: linear-gradient(to bottom, #53c3c8, #255090); color:#fff; box-sizing: border-box}
.main_popwrap .mpop_open a:hover span.num{background:#255090; color:#fff; transition:all .3s}
.main_popwrap .mpop_open img{display: block; margin: 0 auto 5px}
.main_popwrap .mpop_open span.num{position: absolute; top: 8px; right: 27px; width:14px; height:14px; line-height:16px; border-radius:20px 20px; align-content: center; background: #fff; font-size: 10px; color: #3b78c4}

/* 레이어 팝업 */
.mpop_top {margin:6px auto 25px; padding: 0 60px}
.mpop_tit {width:372px; text-align: center; font-size:14px; font-weight:600; color:#333}
.mpop_tit span {display:block; overflow:hidden; text-align: center; text-overflow:ellipsis; white-space:nowrap; width:372px; padding:13px 10px; border-radius:5px; background:#fff; box-sizing: border-box}
.mpop_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; z-index:555}
.mpopup_box {display:none}
.mpopup_box.on {display:block}
.mpop_lstwrap {position:fixed; top:200px; left:50%; margin-left:-246px; z-index:99999}
.mpop_lstwrap .mpop_tb {width:492px} /* 595px + padding 0 60px 더한값 */
.mpop_list {position:relative; padding:0 60px}
.mpop_layer a {display: block; overflow: hidden; width:372px; height:auto; margin-top:5px; background:#fff; border-radius:5px}
.mpop_layer img {width:372px; height:285px}
.mpop_lstwrap .slick-arrow {position: absolute; top:50%; width:49px; height:49px; margin-top:-25px; font-size:0}
.mpop_lstwrap .slick-prev {left:-50px; background:url(../images/main/btn_mpop_prev.png) no-repeat 50% 50%}
.mpop_lstwrap .slick-next {right:-50px; background:url(../images/main/btn_mpop_next.png) no-repeat 50% 50%}
.mpop_lstwrap .btn_slide {display: flex; justify-content:center; align-items: center; margin:10px 0}
.mpop_lstwrap .btn_slide li a {display:block; margin-left:5px; padding:12px 22px; border-radius:50px; text-align: center; background:rgba(255,255,255,0.35); color:#fff; font-size:1.231em; box-sizing: border-box}
.mpop_lstwrap .btn_slide li a span {display:inline-block}
.btn_mpop {position:absolute; top:760px; right:280px}
.btn_mpop .btn_mpoptit:after {content:""; display:block; position:absolute; top:-6px; left:-6px; width:96px; height:96px; border:1px solid rgba(255,255,255,0.7); border-radius:50%; animation:rotate2 2s linear infinite; z-index:0; box-shadow:0 4px 5px rgba(0,0,0,0.1)}
.btn_mpop .btn_mpoptit:before {content:""; display:block; position:absolute; top:0; left:0; width:86px; height:86px; border-radius:50%; background:rgba(255,255,255,0.5); animation:rotate 20s linear infinite; z-index:0}
.btn_mpop .btn_mpoptit a {position:relative; display:block; width:70px; height:70px; margin:8px; line-height:120%; padding:18px 0; background:linear-gradient(90deg, #1d8ce7, #5a5ab4); border-radius:50%; text-align: center; color:#fff; font-size:1.154em; box-sizing: border-box; z-index:1}
.btn_mpop .btn_mpoptit a span {display: block; color:#fffaa1}
.mpop_right {display: flex; gap:12px; margin-top: 6px}
.mpop_right a {display:block; width:180px; height:34px; line-height:34px; padding:0 15px; text-align: left; color:#fff; font-size:14px; border-radius:5px; border: 1px solid #fff; box-sizing: border-box}
.mpop_right img{position: absolute; right: 15px; top: 12px}
.btn_poptoday{position: relative}
.btn_popclose{position: relative}

/* con_box */
.con_box{display: flex; justify-content: space-between; width: 1400px; margin: 0 auto 44px}

/* 관리자버튼 */
#footwrap .btn_admin{position: absolute; top:11px; right:245px}
#footwrap .btn_admin a{display: block; width:100px; height: 32px; line-height: 32px; border-radius:10px; background:url(../images/main/icon_admin.png)no-repeat 8px 6px; background-color: #757f83; color: #fff; font-size: 14px; font-weight: 400; box-sizing: border-box; transition: all .3s}
#footwrap .btn_admin a:hover{background-color: #48acbe; color: #fff}
#footwrap .btn_admin a span{margin-left:48px}

/* 입법예고 */
.advance_list li.notdata{padding:80px 0; text-align:center}
.advance_list li.notdata::after{display:none}
.advance_list li.notdata:hover::before{display:none}
.advance_wrap{position:relative}
.advance_wrap .wrap_tit{display:inline-block; padding:25px 77px 25px 0; border-radius:0 0 50px 0; background:#fff;  font-size: 21px; font-weight: 600}
.advance_wrap .advance_list{padding: 20px 0 30px}
.advance_list li{position:relative;padding: 0 0 0 30px;font-size: 15px;font-weight: 400;color: #000;margin: 10px 0;}
.advance_list li::after{display: block; clear: both; content: ''; position: absolute; top: 13px; left:10px; width:7px; height: 7px; border-radius:7px; background: #aaa}
.advance_list li a{display: block;padding: 9px 0;}
.advance_list li:hover a{color: #48acbe}
.advance_list li:hover .adv_date{color: #48acbe}
.advance_list li:hover::before{display: block; clear: both; content: ''; position: absolute; top: 13px; left:10px; width:7px; height: 7px; border-radius:7px; background: #48acbe; z-index: 1}
.advance_list .adv_tit{display: block; overflow: hidden; white-space: nowrap; width:80%; text-overflow: ellipsis}
.advance_list li .adv_date{position:absolute;right: 30px;top: 9px;text-align: right;color: #636363}
.advance_wrap .more_btn{display:block; position:absolute; top:18px; right:30px; width: 34px; height: 34px; border-radius:34px; background: url(../images/main/btn_more_v3.png)no-repeat center top 12px #48acbe; font-size: 0; z-index: 100; transition: all .3s}
.advance_wrap .more_btn:hover{background: url(../images/main/btn_more_v3.png)no-repeat center top 12px #b1b1b1; font-size: 0}

/* 자치법규 */
.col_bb{font-weight:600; font-family:PTD}
.notice_box .notice_tb{padding: 20px 0 14px}
.notice_box .notice_tb li a{display: block;overflow:hidden;width:80%;padding: 8px 0 13px;text-overflow:ellipsis;white-space:nowrap;box-sizing: border-box}
.notice_box #notice01.notice_tb li{position:relative;padding: 0 0 0 30px;border-bottom: 1px solid #ccc;font-size: 15px;font-weight: 500;margin: 9px 0;}
.notice_box #notice01.notice_tb li:last-child{position:relative; border-bottom: none; font-weight: 500}
.notice_box #notice01.notice_tb li a{color: #333}
.notice_box #notice01.notice_tb li:hover a{display: block; color: #48acbe}
.notice_box #notice01.notice_tb .date{position: absolute;right: 10px;top: 7px;color: #636363}
.notice_box #notice01.notice_tb li:hover .date{color: #48acbe}
.notice_box #notice01.notice_tb li::before{content:"";clear:both;display:block;position: absolute;top: 10px;left:10px;width: 7px;height: 7px;background: #aaaaaa;border-radius: 7px}
.notice_box #notice01.notice_tb li:hover::before{display: block;clear: both;content: '';position: absolute;top: 10px;left:10px;width:7px;height: 7px;border-radius:7px;background: #48acbe;z-index: 1}
.notice_top .noticetab02{position: absolute;top:0; left: 212px}
#notice02 ul{display: flex;flex-wrap: wrap;/* justify-content: space-between; */}
#notice02.notice_tb li a::before{background: none}
#notice02 ul li a{display: block; padding: 10px; width: 162px; height: 38px; margin:0 auto; box-sizing: border-box; border-radius: 10px; text-align: center; align-content: center; background: #cccccc}
#main_notice{position: relative}
#main_notice .more_btn{display:block; position:absolute; top:18px; right:10px; width: 34px; height: 34px; border-radius:34px; background: url(../images/main/btn_more_v3.png)no-repeat center top 12px #48acbe; font-size: 0; z-index: 100}
#main_notice .more_btn:hover{background: url(../images/main/btn_more_v3.png)no-repeat center top 12px #b1b1b1; font-size: 0; transition: all .3s}
#main_notice{position: relative; width: 682px}
.notice_box .notice_top h3{padding:25px 0 15px; border-bottom: 2px solid #333}
.notice_box h3 a{display:inline-block; position:relative; width: 190px; height: 30px; font-size: 21px; font-weight: 600; transition: all .3s; z-index: 5}
.notice_box h3 a::before{content: ''; clear: both; position: absolute; display: block; width:100%; height: 13px; bottom:0; border-radius: 10px; background: #f1f1f1; z-index: -1}
.notice_box h3 a::after{content: ''; clear: both; position: absolute; display: block; width:30px; height: 30px; right:0; top:-5px; border-radius: 50% 50%; background:url(../images/main/tit_blt_icon.png)#bbbbbb no-repeat left 6px top 7px}
.notice_box h3 a:hover::before,.notice_box h3.on a::before{content: ''; clear: both; position: absolute; display: block; width:100%; height: 13px; bottom:0; border-radius: 10px; background: #daeef2; z-index: -1}
.notice_box h3 a:hover::after,.notice_box h3.on a::after{content: ''; clear: both; position: absolute; display: block; width:30px; height: 30px; right:0; top:-5px; border-radius: 50% 50%; background:url(../images/main/tit_blt_icon.png)#48acbe no-repeat left 6px top 7px; animation: change 1.5s infinite}
.notice_box h3 a span{padding-left: 5px}
.notice_box #notice02.notice_tb{padding: 16px 0; background: url(../images/main/noti2_bg.gif)no-repeat center}
.notice_box #notice02.notice_tb li{min-width: 152px;height:36px;margin: 12px 0;width: calc(100% / 4);}
.notice_box #notice02.notice_tb li a{padding: 0; font-size: 14px; font-weight: 400}
.notice_box #notice02.notice_tb li:hover a{background: #48acbe; color: #fff; transition: all .3s}

/* Banner */ 
.main_banner_bg{width: 100%; background: #37404e}
#main_banner{position:relative; width: 1400px; margin: 0 auto; overflow:hidden; box-sizing: border-box}
.banner_wrap {position: relative; height:82px; margin:0 auto; padding-top:17px; box-sizing: border-box}
.banner_wrap .tit{color:#fff; font-size: 16px; font-weight: 500; font-family: SCdream}
.banner_wrap .tit span{position: absolute; top: 33px}

/*배너리스트*/
.banner_wrap .ban_area{margin:-21px 0 0 125px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 190px; height:53px; margin: 0 auto; border-radius:5px; background:#ccc}
.banner_wrap .ban_item img {margin: 0 auto; width:190px; height:53px; transition: all .5s}
.banner_wrap .ban_item a:hover img{transform: scale(120%)}
/*버튼*/
.banner_wrap .ban_btn{position: absolute; bottom:8px; left:90px}
.banner_wrap .ban_btn .btns{display: flex; gap:3px}
.banner_wrap .ban_btn .btns button{width: 30px; height: 30px; background-color:#ffffff; 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:#b1b1b1}
.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:url(../images/main/btn_more_v3.png)#b1b1b1 no-repeat center top 10px}

/* Footer */
#footwrap{position:relative; min-width:310px; background: #fff}
/*문의전화 및 주소*/
.add_area{position: relative}
.add_area .add{display: flex; font-size: 15px; font-weight: 600; color: #333333}
#footwrap .add_num{display: flex}
#footwrap .add_num span{padding-left:10px; font-weight: 500; color: #636363}
/*카운트*/
.count_box .num{font-weight: 400}

/*타시도교육청 법무행정*/
.family_site{display: inline-block; position: absolute; top: -45px; right: 0}
.family_site .fami_top_box{width: 220px; height: 36px; box-sizing: border-box; cursor: pointer; padding: 0 26px 0 10px; background:url(../images/main/btn_site_arr.gif)no-repeat right 6px top 15px #fff}
.fami_top_box .fami_tit{line-height: 36px; color: #37404e; font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box}
.fami_top_box .fami_tit::before{content: ''}
.fami_top_box .famigobtn{position: absolute; display: inline-block; width: 26px; height: 26px; right: 0; top: 4px; text-align: center; font-size:0; border-radius:50% 50%; background: url(../images/main/btn_site_arr.gif)no-repeat center top 10px #fff; color: #fff}
.fami_top_box .fami_tit:hover{color: #48acbe; font-weight: 500; transition: all .3s}
.family_site .fami_list{position: absolute; bottom:calc(100% - -10px); width: 100%; background: #f1f1f1; box-sizing: border-box; height: 0; transition: .3s; overflow: hidden; z-index: 1}
.family_site.active .fami_list{height: 139px; overflow-y: scroll; border: 1px solid #777}
.family_site .fami_list > li > button{padding: 4px 8px; display: block; transition: .3s; color: #333; line-height: 26px; line-height: 26px; text-align: left; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.family_site .fami_list > li > button:hover{background: #e1e1e1; font-weight: 600}

/*카피라이트*/
#footwrap .copy{padding:14px 10px 0; text-align: center; line-height:1.2;  color:#b2b2b2}

/************************************************ MOBILE LAYOUT ************************************************/
@media only screen and (max-width:1024px) {
.skip_navi .pc_skip{display:none} 
.header_top .qmenu .mb_none{display: none}
#footwrap .btn_admin{display:none}
/*Mainheader */
.header_top{width: 100%; height: 50px; background: #4d5d68} 
.header_top .logo_top{background: #fff}
/*행정규칙 버튼_모바일*/
#mainheader .headerwrap .header_area{height: 80px; background: #fff}
.qmu_mem.qmu_login.rule{position: absolute; bottom: -40px; right:-10px; width:100%}
.qmu_mem.qmu_login.rule a{width: 100%; border-radius: 0; border:none}
.qmu_mem.qmu_login.rule a:hover{background: #aaa; border:none}

/*모바일 로고*/
.header_top .logo_top{position: absolute; top:82px; left:0; width: 100%; height:58px}
.header_top .logo_top a{display: block; width:164px; height: 34px; margin: 10px; background: url(../images/main/logo_m.png) no-repeat left top; z-index: 10}
.header_top .logo_top img{display: none}
.gmn_btn{position: absolute; right: 10px; top: 97px}
.qmu_btnbox .gj_go{margin-top:1px}

/*상단버튼*/
.header_top .btn_all a{display: block; width:25px; height: 24px; background:url(../images/main/icon_btnall.png)no-repeat left center; font-size: 0}
.qmu_btnbox{display: flex; position:relative; justify-content: space-between; height:50px; padding: 10px; box-sizing: border-box}    
.mem_btnbx{position: absolute; width:100%; right: 10px; justify-content: right}
.qmu_mem.qmu_login a{width:110px}
.qmu_mem.qmu_login a span{font-size:13px}

/* search_wrap */
.srchwrap{display: flex; position: absolute; right: 0; top: 98px; align-items: center}
.srchwrap a{font-size: 0}
.srch{display: flex; justify-content: space-between; align-items: center}
.srch .input_box input[type=text]{display: none}
.button_box span{position:absolute; right:50px; top:-5px; padding:15px; border-radius:50px 50px; background: url(../images/main/icon_search2.png)#006ab8 no-repeat top 6px center; font-size: 0; box-sizing: border-box}

/* Mobile fix */
.fixed{position:fixed; top:0; left:0; width:100%; min-width: 310px; height: 57px; transition: 0.6s}
.fixed .header_top{height: 50px} 
.fixed .header_top .dongbu_go{display: none}
.fixed .header_top .logo_top{top: 82px; 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: 270px; height:100%; min-height:100%; min-width: 270px; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
.gnb_topbx{padding: 0 10px; background: #314459}
#gnb p.mb_gnbtit{display: block; height:50px; line-height: 50px; border-radius: 0 0 20px 20px; font-size:18px; font-weight:500; color:#fff}
/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:10px; right:10px;  width: 28px; height: 28px; overflow: hidden; border:1px solid #fff; border-radius:50% 50%; background: url(../images/main/btn_mpop_close.png) no-repeat center top 9px; 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 ul{display: flex; gap: 15px}
#gnb .mbl_area li {flex: 1; height: 37px; line-height: 37px; border-radius:10px 10px 0 0}
#gnb .mbl_area li a {display:block; padding:0 10px; border-radius:15px 15px 0 0; color:#fff; font-size: 14px; font-weight:600; text-align: right; box-sizing: border-box}
#gnb .mbl_area li:first-child a{background:url(../images/main/icon_login_m.png) no-repeat 10px center #6b7e8c}
#gnb .mbl_area li:last-child a{background:url(../images/main/icon_join_m.png) no-repeat 10px center #6b7e8c}
#gnb .mbl_area li a 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; line-height:42px; font-size:15px; font-weight:600; padding:0 0 0 15px; margin:0; width:auto; border-radius: 10px; background: #eeeeee; color:#333; box-sizing: border-box}
#gnb .gnb_list .depth1 > h2 a::after{content: ""; display: block; clear: both; position:absolute; right:10px; top:11px; width: 36px; height: 20px; border-radius: 50px; background:url(../images/main/blt_menu_off.gif) no-repeat center #d5d5d5}
#gnb .gnb_list .act > h2 a {position: relative; background:#eee; color:#2e97b1}
#gnb .gnb_list .act > h2 a::after{background:url(../images/main/blt_menu_on.gif) no-repeat center #2e97b1}
/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: 100%; padding:10px; margin:-6px 0 10px; border-bottom: 2px solid #2e97b1; box-sizing: border-box;}
#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: 13px; font-weight: 500; line-height:180%; color: #555}
#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:#2e97b1}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#2e97b1; font-weight:600}

/* Visual */
.visual{border-radius: 0 0 20px 20px; margin: 55px 10px 0}
.visual .visual_wrap {position: relative;  margin: 0 auto}
.visual .visual_item{position: relative; width:auto; height:180px; margin: 0 auto}
.visual .visual_item img{display: none}
.visual .item1{background:url(../images/main/v_m1.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v_m2.jpg) no-repeat top center}
.visual .item3{background:url(../images/main/v_m3.jpg) no-repeat top center}
.visual .item4{background:url(../images/main/v_m4.jpg) no-repeat top center}
.visual .item5{background:url(../images/main/v_m5.jpg) no-repeat top center}
/*비주얼 이동 블릿, 재생,일시정지*/
.slick-dots, .visual_wrap .btn_visual {display: none !important}

/*알림창*/
.main_popwrap{position: absolute; top: 7px; right: 125px; z-index: 10}
.main_popwrap .mpop_open h3 a{padding: 0; padding-top: 5px}
.main_popwrap .mpop_open a{width: 40px; height: 38px; padding: 5px; border-radius:8px 8px}
.main_popwrap .mpop_open img{margin: 0 auto}
.main_popwrap .mpop_open span.txt{font-size: 0}
.main_popwrap .mpop_open span.num{top: 3px;right: 4px;}

/*퀵메뉴*/
.v_quick{width: 100%; margin-top: 100px}
.v_quick .vq_lst li{width: calc(100% / 4 - 10px)}
.v_quick .vq_lst a{max-width: 100%; height: 180px; font-size: 20px}

/* 컨텐츠 */
.con_box{display: block; width: 100%; margin: 0 auto; box-sizing: border-box}
#main_notice{width: 100%; margin-bottom: 30px; padding: 0 20px; box-sizing: border-box}
#main_notice .more_btn{right: 15px}

/*입법예고*/
.advance_list li.notdata{padding:0 0 20px}
.advance_wrap{margin: 36px 10px 0 0; border-radius:0 20px 20px 0; background: #f3f3f3}
.advance_wrap .more_btn{right: 10px}
.advance_wrap .wrap_tit{width: 160px; padding-left:20px; border-radius:0 0 150px 0; background: #fff}
.advance_wrap .advance_list{padding: 20px}
.advance_list li::after{left: 0}
.advance_list li:hover::before{left: 0}
.advance_list li .adv_date{top:9px; right: 0}

/* 법규 */
.notice_box .notice_top h3{border-bottom: 1px solid #333; margin-bottom: 10px}
.notice_top .noticetab02{position: absolute;top:0; left: 222px}
.notice_box #notice02.notice_tb li{width: calc(100% / 4 - 10px); margin: 12px 5px}
#notice02 ul li a{width: 100%; min-width: 128px}
.notice_box #notice01.notice_tb li::before{left: 0}
.notice_box #notice01.notice_tb li:hover::before{left: 0}

/* 배너 */
#main_banner{width: 100%}
.banner_wrap .tit span{top: 16px; left: 10px}
.banner_wrap .ban_area{margin: -3px 0 0 125px}
.banner_wrap .ban_btn{bottom:10px; left: 10px}
.banner_wrap .more{top:-4px; left:77px}
.banner_wrap .more a{display:inline-block; width: 30px; height: 30px; padding: 0; font-size: 0; background:url(../images/main/btn_more_v3.png)no-repeat center top 10px}
.banner_wrap .more a::after{top:4px}

/*타시도교육청 법무행정*/
.family_site{width: 100%; top: -188px}
.family_site .fami_top_box{width: 100%; height: 48px; background: #eee; align-content: center}
.fami_top_box .famigobtn{top: 11px; right: 10px}
#footwrap .fm_site{position: relative; width: 100%}
#footwrap .site_tit{position: absolute; top:-219px; left:0; width:100%; align-content: center; line-height:26px; background: #eeeeee; font-size:13px; font-weight: 400; color:#37404e; box-sizing: border-box}
#footwrap .fm_arr{position: absolute; right: 10px; width:26px; height:26px; border-radius:26px; border: 1px solid #37404e; background:#fff; text-align: center}

/* Footer */  
#footwrap .foot_area{position:relative; margin-top: 48px}
#footwrap .foot_mlst{position: relative; display: none}
#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{margin: 70px 10px 15px; border-radius:10px; border: 1px solid #cccccc; background: #fff;}
#footwrap .pc_menu li{flex: 1; min-width: 150px; text-align: center; border-bottom:1px solid #cccccc; box-sizing: border-box}
#footwrap .pc_menu li:last-child{border-bottom: none}
#footwrap .pc_menu li a{display: block; padding: 10px; font-size:13px; font-weight: 500; color:#636363}  
#footwrap .pc_menu li:hover a{color: #48acbe; transition: all .3s}
#footwrap .pc_menu li.li_1 a{font-weight: 500; color: #0e509f}
#footwrap .pc_menu li.li_1:hover a{color: #48acbe; transition: all .3s}
#footwrap .pc_menu li.li_1 span{display: inline-block; position: relative; padding-left: 20px}  
#footwrap .pc_menu li.li_1 span::after {content:""; clear:both; display:block; position: absolute; top:-2px; left:0; width: 16px; height: 16px; background: url(../images/main/blt_info_ico.png)no-repeat center left}
#footwrap .add_area{position: relative; width: 100%; margin: 0 auto; padding: 10px 0 20px; box-sizing: border-box}
/*하단로고*/
#footwrap .foot_logo{margin:15px 0 10px; text-align: center}
#footwrap .foot_logo img{width: 169px}
/*주소*/
.add_area .add{display: block; line-height: 1.4; text-align: center}
#footwrap .add_num{display: block}
#footwrap .count_box{display:none}

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

/***Content  Common***/  
.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: 134px; margin: 0 auto}
.header_top{position: relative; margin: 0 auto}  
.header_top .qmu_btnbox{display: flex; justify-content: space-between; width: 1400px; margin: 0 auto; height: 50px}

/*상단버튼*/  
.header_all{position:relative; width: 100%; height: 200px; box-shadow: 0 3px 10px  rgba(0,0,0,0.1); background: #fff}
.header_all::before{display: block; clear: both; content: ''; position: absolute; bottom: 65px; right:0px; width:100%; height: 1px; background: #cccccc}
.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)}

/* search_wrap */
.srchwrap{display: flex; position: absolute; right: 0; top: 70px; align-items: center}
.srchwrap a{font-size: 0}
.srchwrap .srch{display: flex; justify-content: space-between; align-items: center}
.srchwrap .srch .input_box input[type=text]{width: 394px; height: 43px; padding: 0 50px; border: 1px solid #006ab8; border-radius:10px;  box-sizing: border-box; background:url(../images/main/icon_search1.png)no-repeat left 15px center}
.srchwrap .button_box span{position:absolute; right:10px; top:7px; padding:15px; border-radius:50px 50px; background: url(../images/main/icon_search2.png)#006ab8 no-repeat top 6px center; font-size: 0; box-sizing: border-box}

/* 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 auto; padding-right:30px; width: 1400px; box-sizing: border-box}
#gnb .depth1 {position: relative; width:25%; text-align: center; z-index: 100; text-align: center}
#gnb .depth1 h2 a{position: relative; display: block; padding:23px 0; text-align: center; font-size:19px; color: #000; font-weight:500}
#gnb .depth1 h2 a::before{display: block; clear: both; content: ''; position: absolute; bottom: 50%; right:0px; width:7px; height: 7px; margin-bottom:-4px; border-radius:7px; background: #006ab8}
#gnb li.depth1:last-child h2 a::before{display: none}
#gnb .navi_sub{position: absolute; left:50%; top:66px; width:342px; margin-left:-176px; padding:10px; border-radius:0 0 10px 10px; box-shadow:0 6px 7px rgba(0, 0, 0, 0.2); border-top:3px solid #48acbe; background:#fff; box-sizing: border-box}
#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; z-index:1}
#gnb .navi_sub li a{display: block; height: 31px; padding:8px 10px; margin: 5px 0; text-align: center; font-size:17px; color:#636363; font-weight: 400; box-sizing: border-box}
#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:400; background: #4fb8c9; border-radius: 5px; color:#fff}
.gmn_btn{position: relative; margin: -45px auto 0}
.gmn_btn p.btn_all{position: absolute; top: 0; right: 0}
.gmn_btn p.btn_all a {display: block; width:25px; height: 24px; box-sizing: border-box; text-indent: -9999px; font-size:0; transition: all .5s; background:url(../images/main/icon_btnall.png) 0 0 no-repeat}

/* Visual */ 
.visual{position: relative; width:1600px; margin: 0 auto}
.visual .visual_wrap {position: relative; width: 1600px; margin:200px 0 auto}
.visual .visual_item{display: block; position: relative; width:1600px; height:520px; margin: 0 auto; border-radius: 0 0 30px 30px}
.visual .visual_item
.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/v_pc1.jpg) no-repeat center top}
.visual .item2 {background:url(../images/main/v_pc2.jpg) no-repeat center top}
.visual .item3 {background:url(../images/main/v_pc3.jpg) no-repeat center top}
.visual .item4 {background:url(../images/main/v_pc4.jpg) no-repeat center top}
.visual .item5 {background:url(../images/main/v_pc5.jpg) no-repeat center top}
.visual .visual_item p{position: absolute; top:160px; right: 200px; width: 372px; height: 76px}
.visual .visual_item span{display: block; position: absolute}
.visual .visual_item span::after{content: ''; clear: both; position: absolute; display: block; top:-20px; right:0px; height: 2px; background: #fff; animation: reverse vline 6s infinite}
.visual .visual_item.item2 p,.visual .visual_item.item3 p,.visual .visual_item.item4 p{left: 200px}
.visual .visual_item.item2 span::after,.visual .visual_item.item3 span::after,.visual .visual_item.item4 span::after{left: 0px}

/********************************************* Layout **********************************************/
/***Content  Common***/   
.pc_none{display:none}
.content_area{position: relative;  margin:0 auto; z-index: 1}
.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 561px; background:none; border-radius:0; box-shadow:none}
.visual_conwrap{display: flex; justify-content: space-between}

/* 컨텐츠 */
.conbox_bg{width:100%; margin: 52px auto 0; background: url(../images/main/con_bg.jpg)no-repeat center top}
/* 입법예고 */
.advance_wrap{width: 682px; border-radius:0 20px 20px 0; background: #f3f3f3}

/* Banner */
.banner_wrap .tit{font-size: 18px}
/*배너리스트*/
.banner_wrap .ban_area{margin:-3px 0 0 260px}
.banner_wrap .ban_area .ban_item_lst{display: flex; gap:47px}
/*버튼*/
.banner_wrap .ban_btn{top:27px}
.banner_wrap .ban_btn .btns{gap:3px}
.banner_wrap .more{top:16px; left:190px}
.banner_wrap .more a{display:inline-block; width: 30px; height: 30px; padding: 0; font-size: 0; background:url(../images/main/btn_more_v3.png)no-repeat center top 10px #4fb8c9}
.banner_wrap .more a::after{top:4px}

/* Footer */
#footwrap {position: relative; width:100%; margin: 0 auto}
#footwrap .foot_area {position:relative; width:1400px; margin:0 auto}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu{display: flex; gap:40px; padding: 20px 0; border-bottom: 1px solid #adadad} 
#footwrap .pc_menu li{position: relative}
#footwrap .pc_menu li::after{content:""; clear:both; display:block; position: absolute; top:0px; right:-20px; width: 1px; height: 15px; background: #cdcdcd; border-radius: 50px}
#footwrap .pc_menu li:last-child::after{background: none}
#footwrap .pc_menu li a {font-size:14px; color:#636363; font-weight:500; transition: all .3s}
#footwrap .pc_menu li a:hover{color:#4fb8c9; font-weight:600}
#footwrap .pc_menu li.li_1 a{padding-left: 22px; background:url(../images/main/blt_info_ico.png) no-repeat left center; font-weight: 500; color: #0e509f}
#footwrap .pc_menu li.li_1 a:hover{background:url(../images/main/blt_info_ico.png) no-repeat left center; color:#4fb8c9}
#footwrap .add_area{position: relative; width: 1400px; margin: 0 auto; padding: 30px 0; box-sizing: border-box}
/*문의전화 및 주소*/
#footwrap .add_num li{position: relative; padding-left: 25px}
#footwrap .add_num li::after{content:""; clear:both; display:block; position: absolute; top:0px; left:12px; width: 2px; height: 14px; background: #636363; border-radius: 50px}    
/*타시도교육청 법무행정*/
#footwrap .site_tit{position: absolute; top:-46px; right:0; width:217px}
#footwrap .site_tit a{height: 38px; line-height: 38px; font-size: 15px; font-weight: 500; color: #37404e; text-align: left}
#footwrap .site_tit a::after{top:8px; right:10px}
#footwrap .site_tit .fm_arr{display:inline-block; width:26px; height:26px; line-height: 23px; margin-left: 40px; border: 1px solid #37404e; border-radius: 26px; background:#fff; text-align: center}
#footwrap .site_tit.active .fm_arr img{transform: rotate(180deg); transition: .3s ease-out}    
/*카운터 */ 
#footwrap .count_box {display:block; position: absolute; bottom:8px; right:0}
#footwrap .count_box ul li{display: flex; flex: 1; justify-content: space-between; width:220px; height: 41px; line-height:42px; margin-bottom:3px; padding:0 20px; background: #37404e; font-size:15px; font-weight: 500; color:#fff; box-sizing:border-box}
#footwrap .count_box .today{border-radius: 10px 10px 0 0}
#footwrap .count_box .total{border-radius: 0 0 10px 10px; background: #a9a9a9}
/*하단로고*/
#footwrap .foot_logo{position: absolute; top:30px; left:0}
/*카피라이트*/
#footwrap .copy{display:inline-block; padding:16px 0 0 0; text-align:left; font-size: 15px; font-weight: 500; color: #636363}
}

/**** 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: 200px; padding-left:0; margin-top:-50px; background:rgba(255,255,255,1); box-shadow:0 3px 5px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap{height: 134px; background:none}
.fixed .header_top{padding-top: 0px}
.fixed .logo_top{top:70px; left: 0} 
.fixed .qmenu{display: none}
.fixed .gnb_box{border-radius: 0; background:none; box-shadow:none}
.fixed #gnb ul.gnb_list{margin: 0px}
.fixed #gnb .navi_sub{top:66px}
}


@media only screen and (max-width:702px) {
/*레이어팝업*/
.mpop_lstwrap{top:121px; margin-left: -190px}
.mpop_lstwrap .mpop_tb{width: 380px}
.mpop_layer a{width: 260px; height: auto}
.mpop_layer img{width: 260px; height: 198px}
.mpop_tit,.mpop_tit span{width: 260px}
.mpop_right{display: block}
.mpop_right li a{width: 100%; height:30px; line-height: 30px; margin-bottom: 6px; font-size: 13px}
.mpop_right img{top: 9px}
/*퀵메뉴*/
.v_quick .vq_lst li{width: calc(100% / 2 - 5px); margin-bottom: 10px}
.v_quick .vq_lst a{font-size: 15px}
/*입법예고*/
.advance_wrap .wrap_tit{padding:25px 0px 25px 20px; border-radius: 0 0 50px 0}
.advance_list .adv_tit{width: 65%}
/*법규*/
.notice_box .notice_tb li a{width: 65%}
.notice_box #notice02.notice_tb li{width: calc(100% / 2 - 10px)}
}


@media only screen and (max-width:560px) {
.notice_top .noticetab02{left: 200px}
.notice_box h3 a{width:170px; font-size: 19px}
}


@media only screen and (max-width:470px) {
/*팝업버튼*/
.main_popwrap .mpop_open img{width:21px; height:22px; padding-top:2px}
/*퀵메뉴*/
.v_quick .vq_lst a{height:102px}
.v_quick .vq_lst a span.fq_tit{padding-top: 26px}
.v_quick .vq_lst .fq_img img{width: 35px}
.v_quick .vq_lst a span.fq_tit::after{width: 30px; margin-left: -15px; margin-top: -7px}
/*입법예고*/
.advance_wrap .wrap_tit{padding:15px 0px 15px 20px; border-radius:0 0 40px 0; font-size: 15px}
.advance_wrap .more_btn{width: 25px; height: 25px; background-position: center top 7px}
.advance_wrap .more_btn:hover{background-position: center top 7px}
.advance_wrap .more_btn{top: 10px}
.advance_wrap .advance_list{padding: 10px 20px}
.advance_list li{margin:6px 0; padding:0 0 0 20px; font-size: 13px}
.advance_list li::after{top: 12px}
.advance_list li:hover::before{top: 12px}
/*법규*/
.notice_top{margin-top: 15px}
.notice_box .notice_tb{padding: 0}
.notice_top .noticetab02{left: 160px}
.notice_box h3 a{width:128px; height:22px; font-size: 15px} 
.notice_box h3 a::after,.notice_box h3 a:hover::after, .notice_box h3.on a::after{width: 25px; height: 25px; background-position: top 5px center}
.notice_box #notice01.notice_tb li{padding:0 0 0 20px; font-size: 13px}
.notice_box #notice02.notice_tb{padding: 0}
.notice_box #notice02.notice_tb li{min-width:128px; margin: 7px 3px}
.notice_box #notice02.notice_tb li a{font-size: 13px; height: 32px}
#main_notice .more_btn{width: 25px; height: 25px; background-position: center top 7px}
#main_notice .more_btn:hover{background-position: center top 7px}
#main_notice .more_btn{top: 20px}
/*타시도교육청 법무행정*/
.fami_top_box .fami_tit{font-size: 13px}
/*footer*/
.add_area .add{font-size: 13px}
}


@media only screen and (max-width:360px) {
/*법규*/
.notice_top .noticetab02{left: 146px}
.notice_box h3 a{width:122px; height:22px; font-size: 15px} 
.notice_box h3 a::after{right: -3px}
.notice_box h3 a:hover::after, .notice_box h3.on a::after{right: -3px}
}


/* 퀵메뉴 애니메이션 */
@keyframes fq_img{
0% {transform:translateY(6px)}
50% {transform:translateY(-6px)}
100% {transform:translateY(6px)}
}

/* 비주얼 선 애니메이션 */
@keyframes vline {
0% {opacity:0}
33% {opacity:1; width:100%}
66% {opacity:1; width:100%}
100% {opacity:0; width:0}
}

/* 법규 타이틀 애니메이션 */
@keyframes change {
from{background-color:#006ab8}
to{background-color: #daeef2}
}