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

/* 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; font-family:NSQ; font-weight: 500}
#content{position: relative}
#mainheader {z-index: 100}
.header_top .header_box::after{content:""; clear: both; display: block; position: absolute}
.header_top .qmu_btnbox p.qmu_btn a{display: block; width: 29px; height:30px}
.header_top .qmu_btnbox p.qmu_btn a span {display:inline-block}
.header_top .qmu_btnbox p.qmu_btn a span img {vertical-align: middle}

/* 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; left:50%; bottom:478px; margin:0 0 0 520px}
.visual_wrap .btn_visual li{position: absolute; left:0; bottom:0}
.visual_wrap .btn_visual li.blind{display:none}
.visual_wrap .btn_visual button{width:16px; height:16px; margin: 0 0 0 4px; cursor:pointer}
.visual_wrap .btn_visual button.vbtn_pause{background:url(../images/main/vbtn_pause.png) 0 0 no-repeat}
.visual_wrap .btn_visual button.vbtn_pause.play{background:url(../images/main/vbtn_play.png) 0 0 no-repeat}
/*비주얼 이동 블릿*/
.slick-dots {position: absolute; left:50%; bottom:480px}
.slick-dots li {display:block; float: left; margin: 0 5px 0 0; border-radius:50%; box-sizing: border-box; box-shadow:0 1px 3px rgba(0,0,0,0.1); background:#fff}
.slick-dots li button{display:block; width:8px; height:8px;cursor:pointer}
.slick-dots li.slick-active {display:block; width: 14px; height: 14px; background:#ffd03f; border:none; border-radius:50px}

/* Poplayer */
/*팝업레이어 노출시 컨텐츠위로 가려져서 버튼클릭 안될시에는 .popup_on{display:none}/.popup_on.active {display:block} 주면됨 */
.main_openpop .pop_tit{font-size: 15px; color:#fff; font-weight: 400}
.main_openpop .popup_layer_wrap{ overflow: hidden; position: relative}
.main_openpop button{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px; cursor: pointer}
.main_openpop .slick-prev,.main_openpop .slick-next{position: absolute; bottom:20px; width: 10px; height: 18px; z-index: 500}
.main_openpop .slick-prev {left:10px; background:url(../images/main/btn_layer_left.png) 0 0 no-repeat}
.main_openpop .slick-next {right:10px; background:url(../images/main/btn_layer_right.png) 0 0 no-repeat}
.main_openpop .popup_layer{position: relative; padding-top:13px; box-sizing: border-box}
.main_openpop .popup_imgsize{width:214px; height:194px; margin: 0 auto; border-radius: 15px;  background:url(../images/main/no_popup.jpg) no-repeat 0 center; box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.main_openpop .popup_imgsize img{width:214px; height:194px; border-radius: 15px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)}
.main_openpop .popup_layer .popup_tit{display:block; color:#000; font-size: 15px; font-weight:500; margin:19px 40px}
.main_openpop .popup_layer .popup_tit a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qmu_popup a span{font-size:0}
.main_openpop .popup_on{display:none}
.main_openpop .popup_on.active {display:block}

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

/***Content  Common***/   
.line01_box {margin-top:15px}

/* Topquick */
.topquick_wrap{position: relative; margin: 20px 0 10px}
.topquick_wrap .tquick_list{margin: 0 20px}
.topquick_wrap .tquick_list li a{display: block; width:107px; height: 140px; margin: 0 auto; border-radius:55px 55px 10px 10px; background: #fff; box-shadow:0 -1px 7px 2px rgba(0, 0, 0, 0.05); text-align: center; line-height: 120%; box-sizing: border-box; transition: all .3s}
.topquick_wrap .tquick_list li a:hover{border-color:#ff8579; color:#ff432a}
.topquick_wrap .tq_icon{display: block; padding:22px 0 18px; text-align: center}
.topquick_wrap .tq_icon img{display: inline-block}
.topquick_wrap .tq_tit {font-weight: 600; font-size:1.077em}
.topquick_wrap .btn_slide li{position: absolute; bottom:20px}
.topquick_wrap .btn_slide li.topquick_left{left:5px}
.topquick_wrap .btn_slide li.topquick_right{right:5px}
.topquick_wrap .btn_slide button{width:8px; height:12px; font-size: 0}
.topquick_wrap .btn_slide .tquickpre {background:url(../images/main/img_topq_arrleft.png) no-repeat 0 0}
.topquick_wrap .btn_slide .tquicknext {background:url(../images/main/img_topq_arrright.png) no-repeat 0 0}
.mquick_wrap {display:none}

 /*Notice*/
#main_notice{overflow:hidden; position: relative; margin-bottom: 20px; border-radius:15px 15px 0 0; background: #fff; border-bottom:1px solid #d4d4d4}
.notice_box {position: relative; padding:8px 0 0} 
.notice_box h3 {position:absolute; top:8px; width:calc(100%/3 - 6px)}
.notice_box h3 a {display:block; width:97%; height:36px; line-height:36px; margin:0 auto; font-size:14px; font-weight:600; color:#353535; transition: all .3s; text-align: center; background-color:#ececec; border-radius: 50px}
.notice_box h3 a span{display:inline-block}
.notice_box .on a , .notice_box h3 a:hover {background-color:#657380; border-radius: 50px}
.notice_box .on a span, .notice_box h3 a:hover  span{display:inline-block; color: #fff; transition:.3s}
.notice_box .noticetab01 {left:1%}
.notice_box .noticetab02 {left:33.7%}
.notice_box .noticetab03 {left:66.2%}
.notice_box .noticetab03 a span{margin-right: 0}
.notice_box .notice_tb {overflow: hidden; height:206px; margin-top:44px}
.notice_box .notice_tb .more{display: none}
.notice_box .notice_tb ul {overflow:hidden; height:170px}
.notice_box .notice_tb li {position:relative; height:27px; line-height: 210%; padding-left:16px; margin-left: 5px; background:url(../images/main/blt_v01.gif) no-repeat 5px 10px}
.notice_box .notice_tb li a{color:#000; font-size:13px}
.notice_box .notice_tb li:hover{background:url(../images/main/blt_v01_a.gif) no-repeat 5px 10px; font-weight:500; text-decoration: underline}
.notice_box ul li .tit {width:auto; margin:0}
.notice_box ul li .tit a {display:block; overflow:hidden; width:75%; text-overflow:ellipsis; white-space:nowrap; color:#111; font-weight:600}
.notice_box ul li .date {position:absolute; top:50%; right:12px; width:65px; height:20px; line-height:20px; margin-top:-10px; text-align:right; font-size:13px; color:#868686; font-family:NSK}
.notice_box .notice_tb li.first_list{position: relative; min-height:46px; line-height:46px; padding:0 0 15px 0; margin:0 0 13px; background: #ffdb6e; box-sizing: border-box; border-radius:0 0 15px 15px}
.notice_box .notice_tb li.first_list .tit a{width:55%; padding-left:60px; background:url(../images/main/ico_notice_m.gif) no-repeat 12px bottom; color:#000; font-size: 14px; font-weight:600}
.notice_box .notice_tb li.first_list .date{background: none; color:#000; font-weight: 500}

/* 학급홈페이지 */
.class_wrap {overflow:hidden; position: relative; margin-bottom:20px; background:#ffc8d7; border-radius:20px}
.class_wrap .more {position: absolute; top:15px; right:24px}
.class_wrap .tit {padding:15px; margin:0 10px; font-size:15px; font-weight:600; background:#ffe8ee; border-radius:0 0 20px 20px; box-shadow:0 2px 4px rgba(0,0,0,0.08); color:#000}
.class_wrap .class_elemen{position: relative; box-sizing: border-box}
.class_box {overflow:hidden}
.class_wrap .class_area {position:relative; padding:18px 15px 118px; margin:0 10px; box-sizing: border-box}
.class_wrap .grade {width:auto}
.class_wrap .grade > li {float:left; width:16.6%}
.class_wrap .grade > li dt > a {display:block; position:relative; width: 32px; height: 32px; line-height: 32px; margin:0 auto; background:#fff; border-radius: 50%; text-align:center; font-weight:600; color:#000; font-size:13px; box-sizing: border-box; transition: all .3s}
.class_wrap .grade > li dt > a span{display:block}
.class_wrap .grade > li dt > a:hover, .class_wrap .grade li.on dl > dt > a {background:#fd7098; border-radius: 50px; color:#fff}
.class_wrap .class_list {position:absolute; top:60px; left:0; width:100%; margin:0 auto; text-align:center; padding:15px; border-top:1px solid #fff1f5; box-sizing: border-box}
.class_wrap .class_list li {display:inline-block; float:left; width:25%; line-height:150%}
.class_wrap .class_list li a {background:none; padding:2px 7px 2px 10px; font-size: 13px; color:#000; font-weight:600}
.class_wrap .class_list li a:hover {background-image:none; font-weight:500; color:#f9346b}
.class_wrap .class_kid{position: relative}
.class_wrap .class_kid ul li{position:absolute; bottom:0;width:50%}
.class_wrap .class_kid li a{display: block; width:100%; height:38px; line-height:38px; margin: 0 auto; padding:0 30px; border-radius:30px 30px 0 0; background-repeat: no-repeat; font-size: 14px; color:#fff; font-weight: 500; text-align: right; transition:all .3s; box-sizing: border-box}
.class_wrap .class_kid li.kidbtn01 {left:0}
.class_wrap .class_kid li.kidbtn01 a {background:#ff86a8 url(../images/main/blt_kid_ico01.png) no-repeat 15px 50%}
.class_wrap .class_kid li.kidbtn02 {right:0}
.class_wrap .class_kid li.kidbtn02 a {background:#fd7098 url(../images/main/blt_kid_ico02.png) no-repeat 15px 50%}
.class_wrap .class_kid li a:hover {background-color:#f65985}

 /* Calendar */
.cal_wrap {overflow:hidden; position: relative; margin-bottom:20px; background:#d190fa; border-radius:20px}
.cal_wrap .more {position: absolute; top:15px; right:24px}
.cal_wrap .tit {padding:15px; margin:0 10px; font-size:15px; font-weight:600; background:#f1dcff; border-radius:0 0 20px 20px; box-shadow:0 2px 4px rgba(0,0,0,0.08); color:#000}
.cal_wrap .cal_box{position: relative; padding:60px 0 0; margin:0 10px 14px}
.cal_wrap .cal_area{overflow: hidden; position: relative}
.cal_wrap .cal_tb{overflow: hidden; height:108px}
.cal_wrap .cal_list li {height:28px; line-height:170%; color:#393939; font-size:13px; font-weight: 400}
.cal_wrap .cal_list li a {display:block; overflow:hidden; width:90%; color:#fff; text-overflow:ellipsis;  white-space:nowrap}
.cal_wrap .cal_list li span {display:inline-block; width:58px; height:20px; line-height:20px; border-radius:50px; background: #fff; font-weight:500; margin-right:10px; ; color:#000; font-size: 12px; box-sizing: border-box; text-align: center}
.cal_wrap .cal_list li:hover {font-weight:500}
.cal_wrap .cal_list li:hover a span{background:#8525c1; color:#fff}
.cal_toparea {display:flex; justify-content: space-between; align-items: center; position:absolute; top:15px; left:0; width:100%; height:34px; margin:0 auto; background:#fff; border-radius:50px 50px}
.cal_today {padding:0 15px; font-weight:600; color:#000}
.cal_wrap .btn_slide li{display: inline-block; margin:0 6px 0 0}
.cal_wrap .btn_slide li a{display: block}

/*Photo*/
.album_wrap {position: relative; min-height:290px;margin-bottom:25px}
.album_wrap .album_top {position:relative; margin:0 10px 0 0; padding-left:10px; background:#7abbff; border-radius:0 10px 30px 0; z-index:1}
.album_wrap .album_top:before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:25px; background:#50a4fb; border-radius:0 10px 0 0; z-index:-1}
.album_wrap .tit {display:inline-block; padding:16px 0 60px 0; text-align:center}
.album_wrap .tit img {margin-right:14px}
.album_wrap .album_top .top_txt {display:block; width:104px; height:20px; line-height:20px; margin:0 0 3px; border-radius: 50px; background:#fff; font-size: 13px; font-weight:600; text-align: center}
.album_wrap .photo_area {position: relative; height:218px; margin:0 10px; margin-top:-52px; z-index:1}
.album_wrap .photo_area:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:72px; background:#eee; border-radius:60px}
.album_wrap .photo_item {width:146px; margin: 0 auto; padding:0}
.album_wrap .photo_item .photo_box {width:185px; margin:0 auto; }
.album_wrap .photo_item .photo{position: relative; overflow: hidden; width:185px; height:174px; margin: 0 auto; border-radius:15px; background:url(../images/main/none_img.gif) no-repeat center 100% #e0f3fd; box-shadow:2px 2px 5px rgba(0,0,0,0.1)} 
.album_wrap .photo_item .photo img {width:185px; height:174px; border-radius:15px}
.album_wrap .photo_item .txt{display:block; overflow: hidden; height:40px; line-height:40px;  margin:0 auto; font-size:14px; color:#000; font-weight: 500; text-align:center; text-overflow:ellipsis; white-space:nowrap}
.album_wrap .photo_item .txt:hover a, .album_wrap .photo_item:hover .txt a{color:#000; text-decoration:underline}
.album_wrap .photo_item .photo a::after{content: ""; display: block; clear: both; position:absolute; left:0; bottom:100%; width:100%; height:100%; background:rgba(0,0,0,0.6) url(../images/main/ico_view.png) no-repeat 50% 50%; transition:all .8s}
.album_wrap .photo_box:hover .photo a::after{bottom:0}
.album_wrap .photo_item .photo a:focus img,
.album_wrap .photo_item .photo a:active img{display:block; width:210px; height:180px; border:2px solid #000; box-sizing:border-box}
.album_wrap .btn_slide{position: absolute; top:10px; right:10px}
.album_wrap .btn_slide li{float: left}
.album_wrap .btn_slide li a{display: block; width:28px; height:28px; line-height:26px; background:#fff; border-radius:50%; box-shadow:0 3px 5px rgba(0,0,0,0.05); text-align: center}
.album_wrap .btn_slide li:nth-child(2) a{margin: 0 5px}
.album_wrap .btn_slide li a img {vertical-align: middle}
.album_wrap .more {position: absolute; top:48px; left:92px; z-index:1}

/*Food*/
#main_food {margin-bottom:20px}
.food_wrap .food_box{position: relative; padding:0 10px}
.food_wrap .food_top{position: relative; padding-bottom:18px}
.food_wrap .food_top::before, .food_wrap .food_top::after{content:""; clear: both; display: block; position: absolute; bottom:-8px; width:12px; height:26px; background:url(../images/main/bg_foodlink_img.png) no-repeat 0 0} 
.food_wrap .food_top::before {left:15px}
.food_wrap .food_top::after {right:15px}

.food_wrap .tit {display:block; padding:15px; font-size: 15px; font-weight:600; border-radius:10px; background:#ffbc47; color:#fff}
.food_wrap .food_area {overflow:hidden; padding:9px; border-radius:10px 10px 20px 20px; background-color:#fff; border:2px solid #92cc53; background:url(../images/main/bg_food_img.gif) no-repeat 100% 100%}
.food_wrap .food_date {display:flex; justify-content:space-between; align-items:center;  position:relative; padding:6px 5px; background:#92cc53; font-weight: 500; border-radius:50px 50px}
.food_wrap .food_date .fdate {padding:0 10px; color:#fff; font-size:1.077em}
.food_wrap .food_date .fday {display: inline-block; min-width:80px; height: 26px; line-height: 26px; margin-left:5px; border-radius: 50px; background: #fff; color:#000; font-weight: 600; text-align: center}
.food_wrap .food_txt{overflow: hidden; height:58px; line-height:160%; margin:10px 60px 10px 10px; color:#000; font-weight: 400; box-sizing: border-box; word-break: keep-all}
.food_wrap .food_txt a:hover{text-decoration: underline}
.food_wrap .more {position: absolute; top:15px; right:25px}

/*Popup*/
.pop_wrap{position: relative; background:#56c1b6; padding:3px;border-radius:20px 20px 8px 8px}
.pop_wrap .popup_top{position: relative}
.pop_wrap .tit {padding:12px 15px; font-size: 15px; font-weight: 500; color:#fff}
.pop_wrap .pop_area{ position: relative; padding:10px 15px; border-radius:5px; background: #fff; box-sizing: border-box}
.pop_wrap .pop_area .pop_tb{overflow: hidden; height:52px}
.pop_wrap .pop_list li{background:url(../images/main/blt_v02.gif) no-repeat 0 10px}
.pop_wrap .pop_list li a{display:block; width:70%; height:24px; line-height:24px; padding-left:13px; color:#222; font-size:1.077em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop_wrap .pop_list li a:hover{font-weight:600; color:#000; text-decoration: underline}
.pop_wrap .btn_slide {position:absolute; top:8px; right:10px}
.pop_wrap .btn_slide li{float: left}
.pop_wrap .btn_slide li a{display: block}
.pop_wrap .btn_slide li:nth-child(2) a {margin: 0 5px}
.pop_wrap .more {position: absolute; top:15px; left:70px}
.pop_wrap .more a {display:block}

/*Banner*/
#main_banner {margin:20px 0; height:54px}
.banner_wrap {position: relative; height:68px}
.banner_wrap .ban_head {position: relative; float: left; width:110px}
.banner_wrap .tit {padding:10px 0; font-size: 15px; font-weight: 500}
.banner_wrap .btns{position: absolute; left:0; top:30px}
.banner_wrap .btns li {float: left}
.banner_wrap .btns li:nth-child(2){margin: 0 3px}
.banner_wrap .btns button{display: block; cursor: pointer;width:32px; height:19px}
.banner_wrap .btns span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.banner_wrap .btns button:focus-visible{outline:2px solid #000}
.banner_wrap .btns .ban_btn_prev{background:url(../images/main/ban_btn_v1.gif) no-repeat 0 center}
.banner_wrap .btns .ban_btn_stop{background:url(../images/main/ban_btn_v2.gif) no-repeat 0 center}
.banner_wrap .btns .ban_btn_next{background:url(../images/main/ban_btn_v3.gif) no-repeat 0 center}
.banner_wrap .ban_area{margin:0 0 0 100px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 178px; height:63px; border-radius:10px; margin: 0 auto; background:url(../images/main/no_banner.gif) no-repeat center center #ccc; border:1px solid #e2e2e2}
.banner_wrap .ban_item img {margin: 0 auto; width:178px; height: 63px}
.banner_wrap .btns button{background:none; outline:0}
.banner_wrap .more{position: absolute; left:68px; top:10px}

/*Userquick*/
#quick02 .quick_btns {display: flex; position: relative}
#quick02 .quick_btns .qk {display: block; position: relative; height:39px; line-height:37px; text-align: center; margin: 0 auto}
#quick02 .quick_btns .txt {display: block; height:36px; position: relative; transition: all .4s}
#quick02 .quick_btns .qk01 .txt {background:url(../images/main/img_qckmtit01.gif) no-repeat 50% 50%}
#quick02 .quick_btns .qk02 .txt {background:url(../images/main/img_qckmtit02.gif) no-repeat 50% 50%}
#quick02 .quick_btns .qk03 .txt {background:url(../images/main/img_qckmtit03.gif) no-repeat 50% 50%}
#quick02 .quick_btns .on .qk01 .txt, #quick02 .quick_btns .qk01:hover .txt {background:url(../images/main/img_qckmtit01_a.gif) no-repeat 50% 50%}
#quick02 .quick_btns .on .qk02 .txt, #quick02 .quick_btns .qk02:hover .txt {background:url(../images/main/img_qckmtit02_a.gif) no-repeat 50% 50%}
#quick02 .quick_btns .on .qk03 .txt, #quick02 .quick_btns .qk03:hover .txt {background:url(../images/main/img_qckmtit03_a.gif) no-repeat 50% 50%}
#quick02 .quick_box {display: none; position: absolute; border-radius: 10px; background: #fff; border:2px solid #ccc; box-sizing:border-box}
#quick02 .on .quick_box {display: block}
#quick02 .quick_box .quick_list {padding:10px 20px; text-align: center; font-weight: 500}
#quick02 .quick_box .quick_list .qmu_tit {line-height:130%}
#quick02 .qb01 {border-color:#ffdb79}
#quick02 .qb02 {border-color:#f3acce}
#quick02 .qb03 {border-color:#b0de7e}
#quick02 .btn:hover .txt{color:#fff}
#quick02 .quick_list span.qmu_icon{display: block; overflow: hidden; position: relative; width: 46px; height:46px; margin: 0 auto 10px; border-radius:50%; background-position: center; background-repeat: no-repeat; background-color: #f1f1f1; border:2px solid #f1f1f2; box-sizing: border-box;  text-align: center; transition: all .5s; z-index: 1}
#quick02 .qb01 li a:hover .qmu_icon {background-color:#fff; border-color:#ffdb79}
#quick02 .qb02 li a:hover .qmu_icon {background-color:#fff; border-color:#f3acce}
#quick02 .qb03 li a:hover .qmu_icon {background-color:#fff; border-color:#b0de7e}
#quick02 .quick_box .qb_tit {margin:0 10px; height:36px; line-height:36px;  text-align: center; border-bottom:1px solid #e0e0e0; font-size:0}
#quick02 .qb01 .qb_tit {background:url(../images/main/img_qb_tit01.gif) no-repeat 50% 50%}
#quick02 .qb02 .qb_tit {background:url(../images/main/img_qb_tit02.gif) no-repeat 50% 50%}
#quick02 .qb03 .qb_tit {background:url(../images/main/img_qb_tit03.gif) no-repeat 50% 50%}

/*학생*/
#quick02 .qb01 ul li span.qico1_v1{background-image:url(../images/main/useqm01_v1n.png)}
#quick02 .qb01 ul li span.qico1_v2{background-image:url(../images/main/useqm01_v2n.png)}
#quick02 .qb01 ul li span.qico1_v3{background-image:url(../images/main/useqm01_v3n.png)}
#quick02 .qb01 ul li span.qico1_v4{background-image:url(../images/main/useqm01_v4n.png)}
#quick02 .qb01 ul li span.qico1_v5{background-image:url(../images/main/useqm01_v5n.png)}
#quick02 .qb01 ul li span.qico1_v6{background-image:url(../images/main/useqm01_v6n.png)}
/*학부모*/
#quick02 .qb02 ul li span.qico2_v1{background-image:url(../images/main/useqm02_v1.png)}
#quick02 .qb02 ul li span.qico2_v2{background-image:url(../images/main/useqm02_v2.png)}
#quick02 .qb02 ul li span.qico2_v3{background-image:url(../images/main/useqm02_v3.png)}
#quick02 .qb02 ul li span.qico2_v4{background-image:url(../images/main/useqm02_v4.png)}
#quick02 .qb02 ul li span.qico2_v5{background-image:url(../images/main/useqm02_v5.png)}
/*교직원*/
#quick02 .qb03 ul li span.qico3_v1{background-image:url(../images/main/useqm03_v1.png)}
#quick02 .qb03 ul li span.qico3_v2{background-image:url(../images/main/useqm03_v2.png)}
#quick02 .qb03 ul li span.qico3_v3{background-image:url(../images/main/useqm03_v3.png)}
#quick02 .qb03 ul li span.qico3_v4{background-image:url(../images/main/useqm03_v4.png)}
#quick02 .qb03 ul li span.qico3_v5{background-image:url(../images/main/useqm03_v5.png)}
#quick02 .qb03 ul li span.qico3_v6{background-image:url(../images/main/useqm03_v6.png)}

/* 퀵메뉴 팝업 없을 경우 */
#quick02.qk_nopop .quick_wrap {height:auto}
#quick02.qk_nopop .quick_btns {height:190px}
#quick02.qk_nopop .userquick_tit {padding:14px 0 10px}
#quick02.qk_nopop::after {top:-4px}

/* Footer */
#footwrap {background: #525c65}
#footwrap .add .address p.copy{color:#a3a3a4}
.add_txt {color:#fff}
.address dl.add_num {margin-bottom: 5px; font-weight:400; color:#5d5d5d; font-size: 13px}
.address dl.add_num dt{display: inline-block; padding: 0 20px; margin-bottom: 7px; border-radius: 50px; background:#353e45; color:#fff}
.address dl.add_num dd li{font-family: PTD; color:#e6e6e6}

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
    .skip_navi .pc_skip{display:none}
    /*Mainheader */
    .header_top{position: absolute; top:38px; left:0; width: 100%; min-width: 320px; margin: 0; z-index:100}
    .header_top .header_box {height:40px; margin-left:10px; background:#fff; border-radius:50px 0 0 50px}
    .logo_top a {display:inline-block; overflow:hidden; margin:3px;border-radius:50px 50px}
    .logo_top img {width:134px; height:auto}
    .fixed{position:fixed; top:0; left:0; width:100%; height:40px; background:rgba(255,255,255,0.95); box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
    .fixed .header_top {top:0}
    .fixed .header_top .header_box {background:none}

    /* Mobile Menu */
    .header_top .qmenu .mb_non{display: none}
    .header_top .qmu_btnbox{position: absolute; top:5px; right:10px; z-index: 100}
    .header_top .qmu_btnbox > p{float: left; margin-right:5px}
    .header_top .qmu_btnbox > p:last-child {margin-right: 0}
    .fixed .qmu_popup{display: none}
    /* GNB */
    .mobile_bg{z-index: 500 !important}
    #gnb {display: none; overflow:hidden; position:fixed; top:0; right:0;  width: 260px; height:100%; min-height:100%; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
    #gnb p.mb_gnbtit {overflow:hidden; display: block; height:50px; line-height: 50px; padding-left:50px; background:url(../images/main/blt_allmn_layer.gif) no-repeat 15px #27639b; font-size:18px; font-weight:500; color:#fff}
    /*GNB_상단*/
    #gnb .allbtnclose .closebtn {display:block; position:absolute; top:-4px; right:-4px;  width:42px; height:42px; overflow: hidden; background: #1f4f7c url(../images/main/btn_menu_close.gif) no-repeat 50% 50%; font-size:0; line-height:0; text-indent:-9999px; border-radius:50%}
    /*GNB_메뉴버튼*/
    #gnb .mbl_area{padding:7px 10px; margin:0 10px; background: #4fbaf3; box-sizing: border-box ; border-radius:0 0 15px 15px}
    #gnb .mbl_area li {width:49%; height:25px; line-height:25px; border-radius:50px}
    #gnb .mbl_area li:first-child{float: left; background:#fff}
    #gnb .mbl_area li:last-child{float: right; background:rgba(255,255,255,0.6)}
    #gnb .mbl_area li a {display:block; color:#000; font-weight:500; text-align: center}
    
    /*GNB_메뉴타이틀*/
    #gnb .gnb_list{padding: 10px}
    #gnb .gnb_list .depth1 > h2{margin-bottom: 7px}
    #gnb .gnb_list .depth1 > h2 a {position:relative; overflow:hidden; display:block; line-height:42px; border-radius:20px 20px 3px 3px; font-size:15px; font-weight:500; padding:0 50px 0 15px; margin:0; width:auto; background:#f0f0f0; color:#000; box-sizing: border-box}
    #gnb .gnb_list .depth1 > h2 a:after {content:""; display:block; position:absolute; top:-5px; right:-5px; width:42px; height:42px; background:#e1e1e1 url(../images/main/blt_gnbmn.png) no-repeat 50% 50%; border-radius:50% }
    #gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
    #gnb .gnb_list .act > h2 a {position: relative; color:#fff; background:#ffc425; margin-bottom:5px}
    #gnb .gnb_list .act > h2 a:after {background:#ff9625 url(../images/main/blt_gnbmn_a.png) no-repeat 50% 50%}
    /*GNB_메뉴세부*/
    #gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: auto; padding:0 10px 5px; margin:0 0 10px; background:#fff; border-bottom:2px solid #ffc425; box-sizing: border-box}
    #gnb .gnb_list .depth1 .navi_sub ul > li {padding-left:10px; background-image:url(../images/main/gnb_lstblt.gif); background-repeat:no-repeat; background-position:5px 11px; border-bottom: 1px solid #f0f0f0}
    #gnb .gnb_list .depth1 .navi_sub ul > li:last-child {border-bottom: none}
    #gnb .gnb_list .depth1 .navi_sub ul > li > a {line-height:140%; display:block; padding:8px 0 8px 8px; font-size: 13px; font-weight: 400}
    #gnb .gnb_list .depth1 .navi_sub ul > li > a[target=_blank] span {display:inline-block; padding-right:15px}
    #gnb .gnb_list .depth1 .navi_sub ul > li:hover{background-image:url(../images/main/gnb_lstblt_a.gif)}
    #gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#ff9625; font-weight:500}

    /* Visual */
    .visual .visual_wrap {position: relative;  margin: 0 auto}
    .visual .visual_item{position:relative; width:auto; height:523px; margin: 0 auto}
    .visual .item1{background:url(../images/main/v_m01.jpg) no-repeat top center}
    .visual .item2{background:url(../images/main/v_m02.jpg) no-repeat top center}
    .visual .item3{background:url(../images/main/v_m03.jpg) no-repeat top center}
    .visual .visual_item:after {content:""; display:block; position:absolute; bottom:82px; right:0.5%; width:99%; height:98px; border-radius:30px 30px 5px 5px}
    .visual .item1:after {background:#4d9de8}
    .visual .item2:after {background:#5eae66}
    .visual .item3:after {background:#f284ca}
    .visual .visual_item:before {content:""; display:block; position:absolute; top:0; right:0; width:94px; height:34px; border-radius:0 0 0 20px} 
    .visual .item1:before {background:#a9d4ff}
    .visual .item2:before {background:#a4e08e}
    .visual .item3:before {background:#ffc0f2}

    /*비주얼 이동 블릿-mobile*/
    .slick-dots {bottom:325px; margin:0 0 0 98px}
    .visual_wrap .btn_visual{bottom:320px; margin:0 0 0 136px}
    .slick-dots li button {width:8px; height:8px; box-sizing: border-box}
    .slick-dots li.slick-active {width:8px; height:8px}

    /* Poplayer */
    .main_openpop .popup_open {display:none}
    .main_openpop{ position: absolute; top:-332px; right:0; width: 100%}
    .main_openpop .popup_on{display:none;width: 100%; height: 259px; margin: 0 auto; text-align: center; background:rgba(255,255,255,0.9); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)}
    .header_top p.qmu_popup {position:absolute; top:-34px; right:5px; margin:0}
    .qmu_popup a, .openact>a{display: block; width:82px; height:24px; line-height:24px; border-radius:50px 50px; text-align: center; box-sizing: border-box}
    .qmu_popup a{ background:#266b8f url(../images/main/btn_layerpop_m.png) 3px 50% no-repeat}
    .openact>a{background:#266b8f url(../images/main/btn_layerpop_ma.png) 3px 50% no-repeat}

    /*Userquick*/
    #quick02 {margin-bottom:25px}    
    #quick02 .quick_btns .qk {width:100%; border-radius:5px; border:2px solid #eee; font-size:0; box-sizing: border-box}
    #quick02 .quick_btns .on .qk01, #quick02 .quick_btns .qk01:hover {border-color:#ff9e20}
    #quick02 .quick_btns .on .qk02, #quick02 .quick_btns .qk02:hover {border-color:#ed79b0}
    #quick02 .quick_btns .on .qk03, #quick02 .quick_btns .qk03:hover {border-color:#649a2b}
    #quick02 .quick_btns {margin:0 10px; padding-bottom:274px; justify-content: center}
    #quick02 .quick_btns > li {width:calc(100%/3)}
    #quick02 .quick_btns > li:nth-child(2) {margin: 0 5px}
    #quick02 .quick_btns > li:first-child .quick_box{display:block}
    #quick02 .quick_box {border-radius:15px; position: relative; display: none; position: absolute; z-index: 10}
    #quick02 .quick_btns .qk:hover .quick_box {display:block} 
    #quick02 .quick_box .quick_list li {margin-top: 6px}
    #quick02 .quick_list a {display: block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; font-size:13px}
    #quick02 .quick_box {left: 0; bottom: 0; right: 0; margin:0}
    #quick02 .quick_list li{float: left; width: 33.3%; height: 86px; margin-bottom:10px}

    /* 팝업 없을 경우 */
    #quick02.qk_nopop .quick_btns {height:auto}
    
    /* banner */
    .banner_wrap .ban_item a {width:148px; height:53px}
    .banner_wrap .ban_item img {width:148px; height:53px}

    /* Footer */
    #footwrap{padding:0 10px 50px}
    #footwrap .foot_area{position:relative}
    #footwrap .foot_menu .foot_mlst{position: relative}
    #footwrap .foot_menu .mb_menu{position: relative; margin:0 auto; text-align: center}
    #footwrap .foot_menu .mb_menu li {display: inline-block; padding:7px 7px 7px 12px; background:url(../images/main/foot_bar.gif) no-repeat left center}
    #footwrap .foot_menu .mb_menu li:first-child {background:none}
    #footwrap .foot_menu .mb_menu li:nth-child(2) {background:none; padding-left:5px}
    #footwrap .foot_menu .mb_menu li a {display:block; font-size: 13px; font-weight: 400; color:#fff}
    #footwrap .foot_menu .mb_menu li.foot_home {padding:7px 0}
    #footwrap .foot_menu .mb_menu li.foot_home a {display:block; width:32px; height:32px; line-height: 32px; background:url(../images/main/foot_home.gif) no-repeat left center}
    #footwrap .foot_menu .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: 0 0 15px; border-radius:5px; text-align:center; font-weight: 500; background: #fff; font-size: 13px; font-weight: 400} 
    #footwrap .pc_menu li a{display: block; padding:10px; color:#000}
    #footwrap .pc_menu li.li_1 {float: left; display:block; width:50%}
    #footwrap .pc_menu li.li_1 a{border-right:1px solid #dae0e4}
    #footwrap .pc_menu li.li_2 {float: left; display:block; width:50%}
    #footwrap .pc_menu li.li_3 {float: right; display:block; width:50%; border-left:1px solid #cfcfcf; box-sizing: border-box}
    #footwrap .pc_menu li.li_3 a {color:#278ec9}
    #footwrap .pc_menu li.li_4 {float:left; display:block; width: 100%; border-top:1px solid #cfcfcf}
    #footwrap .pc_menu li.li_1, #footwrap .foot_menu .pc_menu  li.li_5{display: none}
    /*주소*/
    #footwrap .add .address{width:auto; line-height:160%; text-align: center; font-weight: 400; font-size: 14px}
    #footwrap .add .address span.add_txt{display: block; margin-bottom: 10px}
    #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{display: inline-block; padding: 0 8px}
    .address dl.add_num dd li:first-child{padding-left: 0; background: none}

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

    /***Content  Common***/   
    .mb_none{display: none}
    .content_area{position: relative}
    .conline01{margin:0 10px}
    .conline03{margin:0 10px}

    /* Topquick */
    #main_topquick {margin:-230px 10px 0}
    .topquick_wrap {max-width:500px; margin:0 auto}
    .topquick_wrap .tquick_list li a  {width:79px; height:105px;}
    .topquick_wrap .tq_tit {font-size:0.86em}
    .topquick_lstbox .tquick_list li a span.tq_icon img{transform:scale(0.75)}
    .topquick_lstbox .tquick_list li span.tq_icon {width:54px; height:45px; padding:10px 0; margin:0 auto}
    .topquick_lstbox .tquick_list li span.tq_tit {margin-top:5px}
	/* notice 
	.notice_box h3 a span {padding-right:14px; background:url(../images/main/btn_more_b.png) no-repeat 100% 48%; background-size:9px auto; letter-spacing:-0.5px}
	.notice_box h3.on a span, .notice_box h3:hover a span {background:url(../images/main/btn_more_w.png) no-repeat 100% 48%; background-size:9px auto}*/
	.notice_box .notice_tb .more {display:block; margin:5px 0 }
	.notice_box .notice_tb .more a {display:block; padding:5px; background:#e7e7e7; text-align:center; border-radius:5px}
	.notice_box .notice_tb .more img {display:none}
    /* photo */
    .album_wrap .tit img {transform:scale(0.8)}

}

/* PC LAYOUT */
@media only screen and (min-width:1025px) {
    .skip_navi .mb_skip{display:none}
    #wrap {overflow:hidden; min-width:1230px}
    #content{position: relative}
    .btn_top_pc{position: absolute; top:35px; right:50%; margin-right: -670px}

    /* Main */
    .headerwrap {position: relative; width: 100%; height: 152px; margin: 0 auto; background:url(../images/main/gnb_bg.png) no-repeat top center}
    .logo_top {position:absolute; top:15px; left:0} 

    /* Mainheader */
    .header_top{position: relative; width: 1200px; margin: 0 auto; padding-top:72px}
    .header_top .qmenu .pc_non{display: none}
    .header_top .qmenu_tb{position: absolute; top:10px; right:0; height: 40px}
    .header_top .qmu_btnbox p{float: left}
    .header_top .qmu_btnbox p.qmu_mem {margin-right:18px}
    .header_top .qmu_btnbox p.qmu_mem a {line-height:35px; color:#fff; font-size:1.231em}
    /*검색 및 사이트맵*/
    .header_top .qmu_btnbox p.qmu_btn a {display:block; width:42px; height: 35px; margin-left:10px; background:#fff; border-radius: 10px; transition: all .3s}
    .header_top .qmu_btnbox p.qmu_btn a img {display:none}
    .header_top .qmu_btnbox p.qmu_btn.allbtn a {background:#fff url(../images/main/bg_allmn_pc.gif) no-repeat 50% 50%}
    .header_top .qmu_btnbox p.qmu_btn.qmu_search a {background:#fff url(../images/main/bg_srch_pc.gif) no-repeat 50% 50%}

    /* GNB */
    #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:12.5%; text-align: center; z-index: 1000; text-align: center}
    #gnb .depth1 h2 a{display: block; padding:24px 0; text-align: center; font-size:19px; color: #000; font-weight: 600}
    #gnb .navi_sub{position: absolute; left:50%; top:58px; width:175px; margin-left:-95px; padding:15px 7px 25px; border-radius: 10px 10px 30px 30px; box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); border:2px solid #269437; background:url(../images/main/bg_laymn_logo.gif) no-repeat bottom center #fff}
    #gnb .navi_sub::before{content: ""; display: block; clear: both; position: absolute; top:-7px; left:50%; margin-left: -6px; width:11px; height:11px; border-radius:50%; background: #269437; z-index:1}
    #gnb .navi_sub li{border-bottom: 1px solid #ccc}
    #gnb .navi_sub li:last-child{border-bottom:none}
    #gnb .navi_sub li a {display: block; line-height: 140%; padding:4px; margin: 4px 0; text-align: center; font-size:14px; color:#000; font-weight: 600; word-break: keep-all}
    #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: #269437}
    #gnb .navi_sub li:hover a, #gnb .depth1.active .navi_sub .depth2 > li.active a{display: block; font-weight:600; /*background: #ececec; border-radius:5px;*/ color:#269437}

    /* Visual */ 
    .visual{margin-bottom: 0; position: relative}
    .visual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
    .visual .visual_item{display: block; width:100%; height:821px}
    .visual .visual_item > a{display: block; height:821px}
    .visual .item1 a:focus-visible{height:817px; outline:2px solid #000}
    .visual .item1{background:url(../images/main/v_pc01.jpg) no-repeat top center}
    .visual .item2{background:url(../images/main/v_pc02.jpg) no-repeat top center}
    .visual .item3{background:url(../images/main/v_pc03.jpg) no-repeat top center}
    
    .visual_wrap .slick-dots {bottom:441px; margin-left:505px}
    .slick-dots li {width:12px; height:12px}
    .slick-dots li button {width:12px; height:12px}
    .visual_wrap  .btn_visual {position: absolute; bottom:440px; margin-left:560px}
    

    /*Poplayer */
    .content_poplayer{ /*position: absolute; top:0; left:0;*/}
    .poplayer_btn span, .main_openpop .popup_open>a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
    .main_openpop{position: relative; z-index:11}
    .main_openpop .popup_on {position: absolute; top:5px;right:140px; width:236px}
    .main_openpop .popup_layer_wrap{background:rgba(255,255,255,0.9); border-radius: 15px; box-shadow:1px 3px 5px rgba(0, 0, 0, 0.1); text-align: center}
    .quick_popup.popup_open {position: absolute; top:5px; right:-9px; z-index:12}
    .quick_popup.popup_open a{display:block;  width:141px; height:48px; background:url(../images/main/btn_laypop.png) 0 0 no-repeat}
    .quick_popup.popup_open a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
    .quick_popup.popup_open.openact >a{background:url(../images/main/btn_laypop_a.png) 0 0 no-repeat}
    .main_openpop .slick-prev {bottom:18px; left:16px}
    .main_openpop .slick-next{bottom:18px; right:16px}

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

    /***Content  Common***/   
    .pc_none{display:none}
    .content_area{position: relative}
    .conline{position: relative}
    .conline01 {width:1200px; margin:0 auto}
    .conline01 .line01_box {padding-left:635px; margin:0}
    .conline02 {margin:58px 0 38px; height: 234px; background: url(../images/main/bg_conline02.gif) no-repeat center bottom}
    .conline02 .line02_box {position: relative; width: 1200px; margin: 0 auto}
    .conline03 {margin-bottom:32px}
    .conline03 .line03_box {position: relative; width: 1200px; margin: 0 auto}

    /*Quick*/
    #main_topquick {width: 1200px; height:170px; margin:-405px auto 0}
    .topquick_wrap {float:right; width:570px; height:170px; margin:0 0 13px}
    .topquick_lstbox .tq_icon {display:block; margin:0 auto; transition: all .2s ease-in-out}
    .topquick_wrap .tquick_list {margin:0 27px}
    .tquick_list li a:hover .tq_icon img,
    .tquick_list li a:focus .tq_icon img {animation:effect 2s ease infinite}
    .topquick_lstbox .tquick_list li a {margin:10px auto; font-size:14px}

    /*Notice*/
    #main_notice{position: absolute; top:-58px; left:0; width: 617px; height:300px; box-sizing: border-box; border-radius:25px 25px 0 0; margin:0}
    /*Notice*/
    .notice_box .noticetab01 {left:8px}
    .notice_box .noticetab02 {left:164px}
    .notice_box .noticetab03 {left:322px}
    .notice_box h3 a {width:151px; height:42px; line-height:42px; margin:0; font-size:17px; text-align:center}
    .notice_box h3 a span {background:#ececec}
    .notice_box .on a span, .notice_box h3 a:hover span {background:#657380; transition:.3s}
    .notice_box .notice_tb {margin-top:49px; height:242px}
    .notice_box .notice_tb ul {height:212px; margin-bottom:0}
    .notice_box .notice_tb li {height:33px; margin-left:11px; padding-left:22px}
    .notice_box .notice_tb li a {font-size:15px}
    .notice_box .notice_tb .tit a {width:80%}
    .notice_box .notice_tb .date {right:20px; width:80px; margin-top: -15px; font-size:15px}
    .notice_box .notice_tb li:hover p.date {font-weight:300}
    .notice_box .notice_tb .more{display: block; position: absolute; top:8px; right:14px}
    .notice_box .notice_tb .more a {display:block; width:42px; height:42px; line-height:40px; background:#657380; border-radius:50% 50%; text-align: center; font-size:0}
    .notice_box .notice_tb .more img {vertical-align: middle}
    .notice_box .notice_tb li.first_list {min-height:58px; line-height:58px; margin-bottom:30px}
    .notice_box .notice_tb li.first_list .tit a {padding-left:76px; font-size:15px; background:url(../images/main/ico_notice_pc.gif) no-repeat 12px bottom}
    .notice_box .notice_tb li.first_list .date, .notice_box .notice_tb li.first_list:hover .date {font-weight:400; margin-top:-10px}
    
    /*Class*/
    #main_class {float:left; width:275px}
    .class_wrap {height: 229px; margin:0}
    .class_wrap .tit {font-size:16px}
    .class_wrap .grade > li dt > a {font-size:14px}
    .class_wrap .class_list {top:64px; padding:15px 30px}
    .class_wrap .class_list li a {}
    .class_wrap .class_kid li a {height:54px; line-height:54px; padding:0 15px; border-radius:20px 20px 0 0}
    .class_wrap .class_area {padding:18px 15px 134px}
    
    /* Calendar */
    #main_calendar{float:right; width:275px}
    .cal_wrap {height:229px; margin:0}
    .cal_wrap .tit {font-size:16px}
    .cal_wrap .cal_list li span {font-size:13px}
    .cal_wrap .cal_list li {height:28px; font-size:14px}
    .cal_today {font-size:14px}
    .cal_wrap .cal_tb {padding:0 5px}

    /*Food*/
    #main_food{float:right; width:275px}
    .food_wrap .food_box {padding:0}
    .food_wrap .tit {padding:12px 15px; font-size: 16px}
    .food_wrap .food_txt {line-height:170%; height:90px; margin:16px 52px 10px 13px; font-size:1.077em}
    .food_wrap .more {top:13px; right:15px}
    .food_wrap .food_date .fday {font-size:1.077em}

    /*Photo*/
    #main_album {float:left; width:910px}
    .album_wrap {min-height:190px; padding-left:178px; margin:0}
    .album_wrap .album_top {position:absolute; top:0; left:0; background: none}
    .album_wrap .photo_area {margin:0; padding:0 35px; background:none}
    .album_wrap .album_top .tit {padding:20px 20px 0 38px}
    .album_wrap .btn_slide {width:140px; left:25px; top:171px; right:inherit}
    .album_wrap .album_top:before {display:none}
    .album_wrap .photo_area:before {display:none}
    .album_wrap .btn_slide li a {width:38px; height:38px; line-height:36px; box-shadow:1px 3px 2px rgba(0,0,0,0.1)}
    .album_wrap .btn_slide li:nth-child(2) a {margin:0 10px}
    .album_wrap .more {top:58px; left:146px}
    .album_wrap .album_top .top_txt {width:112px;margin-bottom:10px}
    .album_wrap .tit img {margin-right:17px}
    .album_wrap .photo_item .txt {font-size:15px}

    /*Popup*/
    #main_popup {float:right; width:275px; height:117px}
    .pop_wrap {position:relative; margin: 0}
    .pop_wrap::before {content: ''; position: absolute; width:100vw; height:117px; background: #56c1b6; left: 0; top: 0; border-radius:20px 0 0 8px; z-index:-1}
    .pop_wrap .tit{display: inline-block; padding:15px; font-size: 16px}
    .pop_wrap .pop_area{position: relative}
    .pop_wrap .pop_area .pop_tb{height:45px}
    .pop_wrap .pop_list li{background-position:0 8px}
    .pop_wrap .pop_list li:hover{background-position: 0 8px}
    .pop_wrap .pop_list li a{width:90%; font-size: 14px}
    .pop_wrap .btn_slide {top:11px; right:0}
    .pop_wrap .btn_slide li:nth-child(2) a{margin: 0 5px}
    .pop_wrap .more {top:18px; left:72px}

    /*Banner*/
    #main_banner {float:left; width:910px; height:auto;padding:30px 0 0; margin:0}
    .banner_wrap {height:auto}
    .banner_wrap .ban_head {width:130px}
    .banner_wrap .ban_head h3 {padding:0 4px 15px; font-size:17px}
    .banner_wrap .btns{left:0; top:46px}
    .banner_wrap .btns li:nth-child(2){margin: 0 5px}
    .banner_wrap .ban_area{margin:0 0 0 148px}
    .banner_wrap .ban_item img{transition: all .3s}
    .banner_wrap .ban_item:hover img{transform: scale(115%)}
    .banner_wrap .more{left:89px; top:1px}

    /*Userquick*/
    #quick02 {position: absolute; right:16px; top:-470px; z-index:100}
    #quick02 .quick_wrap {width:112px; height:360px; margin-top:84px; background:#4fbaf3; border-radius:10px 10px 100px 100px; padding:2px; box-shadow:0 3px 5px rgba(0,0,0,0.1); box-sizing: border-box}    
    #quick02::after{content: ""; display: block; clear: both; position: absolute; top:-3px; right:5px; width:175px; height:98px; background:url(../images/main/img_qck_tit.png) no-repeat 100% 100%}
    #quick02 .userquick_tit {position: relative; text-align:center; padding:61px 0 10px; background:#fff; border-radius:5px 5px 0 0}
    #quick02 .quick_box {width: 248px; height: 260px; right: 100%; top:2px}
    #quick02 .quick_box.qb02 {top:-62px}
    #quick02 .quick_box.qb03 {top:-126px}
    #quick02 .quick_box .quick_list {padding:10px 5px}

    #quick02 .quick_btns li:hover .quick_box {display: block}
    #quick02 .quick_list li{float: left; width: 33.3%; height: 92px; margin-bottom:10px}
    #quick02 .btn_top {display: block; position: relative; padding:0 0 10px}
    #quick02 .btn_top a {display: block; text-align: center}
    #quick02 .quick_btns {position: relative; width:115px; margin: 10px 0 5px -11px; flex-direction: column; box-sizing: border-box}
    #quick02 .quick_btns li.btn {position: relative; width: auto; z-index:15}
    #quick02 .quick_btns .qk {display: block; position: relative; width: auto; height:60px; line-height:60px; margin:2px auto; text-align: center; font-size:0}

    #quick02 .quick_btns .txt {width:116px; height:60px}

    #quick02 .quick_btns .qk01 .txt {background:url(../images/main/img_qcktit01.png) no-repeat 0 0}
    #quick02 .quick_btns .qk02 .txt {background:url(../images/main/img_qcktit02.png) no-repeat 0 0}
    #quick02 .quick_btns .qk03 .txt {background:url(../images/main/img_qcktit03.png) no-repeat 0 0}
    #quick02 .quick_btns li:hover .qk01 .txt, #quick02 .quick_btns .on .qk01 .txt {background:url(../images/main/img_qcktit01_a.png) no-repeat 0 0}
    #quick02 .quick_btns li:hover .qk02 .txt, #quick02 .quick_btns .on .qk02 .txt {background:url(../images/main/img_qcktit02_a.png) no-repeat 0 0}
    #quick02 .quick_btns li:hover .qk03 .txt, #quick02 .quick_btns .on .qk03 .txt {background:url(../images/main/img_qcktit03_a.png) no-repeat 0 0}
    #quick02 .quick_btns li:hover .qk::before, #quick02 .quick_btns .on .qk::before {width: 100%; color:#fff}
    #quick02 .qmu_tit {font-size: 13px}

    /* Footer */
    #footwrap {padding:16px 0}
    #footwrap .foot_area {width:1200px; margin:0 auto}
    #footwrap .mb_menu {display:none}
    #footwrap .pc_menu{height:58px; padding-left:25px; background: #f5f5f5; border-radius:20px; box-sizing: border-box}
    #footwrap .pc_menu:after {content:""; clear:both; display:block; height:0}
    #footwrap .pc_menu li {float:left; height:58px; line-height:58px; padding: 0 13px; background:url(../images/main/foot_bar.gif) left center no-repeat; text-align: center}
    #footwrap .pc_menu li:first-child{background: none; padding-left: 0}
    #footwrap .pc_menu li a {font-size:14px; color:#000; font-weight:400}
    #footwrap .pc_menu li.li_3 a{font-weight: 600; color: #087dce}
    #footwrap .pc_menu li a:hover{font-weight:600}
    #footwrap .add_area{position: relative; width: 1200px; padding-left: 10px; margin: 17px auto 5px; border-radius: 10px 10px 0 0; background:url(../images/main/flogo.gif) right bottom no-repeat; box-sizing: border-box}
    #footwrap .add_area .add{font-size: 13px; line-height: 150%; text-align: left; font-weight: 400}
    #footwrap .add_area .copy{margin:10px 0 0; color:#9d9d9d; font-size: 13px}
    #footwrap .add_area .add br{display: none}
    #footwrap .add_txt {display:block; padding:0 0 13px; font-size: 14px; font-weight:400}
    .address dl.add_num dt {width: 60px; text-align: center; box-sizing: border-box}
    .address dl.add_num dd{margin:-27px 0 0 70px}
    .address dl.add_num dd li{display: inline-block; padding: 0 10px; background:url(../images/main/foot_bar.gif) left center no-repeat; font-size: 14px; font-weight:400}
    .address dl.add_num dd li:first-child{padding-left: 0; background: none}
    /* Footer_count */ 
    #footwrap .count_box {display:block; overflow: hidden; position: absolute; top:-63px; right:10px; width: 344px; border-radius:50px; box-sizing: border-box}
    #footwrap .count_box ul li{float: left; width: 50%; height:34px; line-height:34px; background: #dadada; font-size: 12px; font-weight: 400; color:#000; box-sizing: border-box}
    #footwrap .count_box ul li:last-child{background:#525c65; color:#fff}
    #footwrap .count_box ul li .tit{display: inline-block; padding-left: 10px; font-weight:400}
    #footwrap .count_box ul li .num{display: inline-block; width: 100px; margin-left: 12px; text-align: right}
    /*Admin*/
    #footwrap .btn_admin{position: absolute; top:-63px; right:365px}
    #footwrap .btn_admin a{display: block; width:96px; height:34px; line-height:32px; border-radius:50px; border:1px solid #868686; background-image:url(../images/main/btn_admin.png); background-position: 10px center; background-repeat: no-repeat; color: #868686; font-size: 14px; font-weight: 400; box-sizing: border-box; transition: all .3s}
    #footwrap .btn_admin a span{margin-left:40px}
    #footwrap .btn_admin a:hover{background-image:url(../images/main/btn_admin_a.png); background-color: #32a5e8; border-color: #2e9ee0; color: #fff}
}

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

@media only screen and (min-width:1248px) {
/* Menu FIX */
.top_bar_fix{position:absolute; top:0; left:0; width:100%; 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.9); box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap{height: 100px; background:none}
.fixed .header_top{padding-top: 37px}
.fixed .header_top .header_box::after{display: none}
.fixed .logo_top, .fixed .qmenu{display: none}
.fixed .gnb_box{border-radius: 0; background:none; box-shadow:none}
.fixed ul.gnb_list{margin:0 auto; padding: 0}
.fixed #gnb .navi_sub{top:60px}
}

@media only screen and (min-width:1025px) and (max-width:1540px) {
/*Userquick*/
#quick02 {position: absolute; right:10px; top:-200px}
}

/********* TABLET LAYOUT[중간사이즈 조정 끝] *********/
@media only screen and (max-width:820px) {
.address .telnumbox{text-align: left}
.address .telnumbox{width: 250px; margin: 0 auto}
.address .telnumbox li{margin-bottom: 3px}
}

@media only screen and (max-width:580px) {
.address dl.add_num dd li{display:block; padding:0; background:none}
}

@media only screen and (max-width:355px) {
#main_history .cyber_wrap{width: 302px; height:198px; background-size: 302px 198px}
}

/**** keyframe ****/

@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}