/* com2zoa design KYJ 211028*/

/* 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 {width: 100%; min-width: 320px; font-family: CGC}
#content{position: relative; z-index:1}
#mainheader {z-index: 100}

/*Ãѵ¿¹®È¸*/
.qmu_friend{position: absolute; top:-38px; left:0}
.qmu_friend a{display: inline-block; height: 28px; line-height: 28px; padding: 0 10px; border-radius: 50px; background: #fff; color:#505050; font-weight:500; font-size: 12px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1); transition: all .3s}
.qmu_friend a span{color:#4ca22b; transition: all .3s}
.qmu_friend a:hover{background: #ffb244; color:#fff}
.qmu_friend a:hover span{color:#fff}

/* 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%; top:50%; margin:65px 0 0 -138px}
.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%; top:50%; margin:50px 0 0 -180px}
.slick-dots li {float: left;display:inline-block; margin: 0 0 0 6px; border:2px solid #d8d8d8; border-radius:50%}
.slick-dots li button{display:block; width:10px; height:10px;cursor:pointer}
.slick-dots li.slick-active {display:block; background:#d8d8d8; border-radius:50%}

/* 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_on.active {display:block}
.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:10px; width: 28px; height: 28px; 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; height:300px; padding-top:13px}
.main_openpop .popup_imgsize{width: 269px; height:253px; margin: 0 auto; border-radius: 10px;  background:url(../images/main/no_popup.jpg) no-repeat 0 center}
.main_openpop .popup_imgsize img{width:269px; height:253px; border-radius: 10px; 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:400; margin:15px 50px}
.main_openpop .popup_layer .popup_tit a{display:block; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-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***/    
.content_area{z-index: 100}

/*TOP qmn*/
.topquick_wrap{position: relative}
.topquick_wrap .btn_slide li {display: block; position: absolute; top:50%; margin-top: -11px}
.topquick_wrap .btn_slide li.topquick_left{left:0}
.topquick_wrap .btn_slide li.topquick_right{right:0}
.topquick_wrap .btn_slide li button{cursor: pointer;width:27px; height:23px; border:none}
.topquick_wrap .btn_slide li span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.topquick_wrap .btn_slide .tquickpre{ background:url(../images/main/btn_tqmn_l.gif) no-repeat 0 center}
.topquick_wrap .btn_slide .tquicknext{ background:url(../images/main/btn_tqmn_r.gif) no-repeat 0 center}
.topquick_wrap .btn_slide .btns button:focus{outline:2px solid #000}
.topquick_wrap .tquick_list{margin-top:-50px; text-align: center}
.topquick_wrap .tquick_list li a{display: block; font-weight: 500; line-height: 150%; font-size: 15px; color:#333; text-align: center}
.topquick_wrap .tquick_list li a img{padding-top:7px}
.topquick_wrap .tquick_list li:hover a{text-decoration: underline; font-weight: 600}
.topquick_wrap .tquick_list span.alone_tit{display: block; padding-top: 4px}
.topquick_wrap .tquick_list img{margin: 0 auto}
.topquick_wrap .tquick_list li span.tq_icon{display: block; width: 104px; height: 104px; margin: 0 auto 5px; background: #fff; border:3px solid #f0f0f0;  border-radius: 50%; box-sizing: border-box}
.topquick_wrap .tquick_list li:hover a span.tq_icon{border-color:#62afeb}

 /*Notice*/
.notice_box {overflow:hidden; position: relative; margin:15px 0; padding-bottom: 5px; border-bottom: 1px solid #c8c8c8} 
.notice_box h3 {position:absolute; top:0; width:33.3%}
.notice_box h3 a {display:block; width:90%; height:40px; line-height:40px; margin: 0 auto; border-radius: 10px 10px 0 0; background:#e4e4e4; font-size:14px;  font-weight:500; color:#515151; transition: all .3s; text-align: center}
.notice_box .on a, .notice_box h3 a:hover{display:block; background:#ffc350; color: #fff}
.notice_box .noticetab01 {left:0}
.notice_box .noticetab02 {left:33.3%}
.notice_box .noticetab03 {left:66.6%}
/**°øÁö»çÇ×_³»¿ë¿µ¿ª**/
.notice_box .notice_tb {overflow: hidden; height:153px; margin-top:40px; font-family:NSK}
.notice_box .notice_tb ul {overflow:hidden; height:153px; margin-bottom: 15px}
.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 0 9px; color:#393939; font-size:13px}
.notice_box .notice_tb li:hover{background:url(../images/main/blt_v01_a.gif) no-repeat 0 9px; 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}
.notice_box ul li .date {position:absolute; top:50%; right:10px; width:65px; height:24px; line-height:24px; margin-top:-13px; background:url(../images/main/blt_date.gif) no-repeat 0 6px; text-align:right; font-size:12px; color:#939393; font-weight: 400}
/*°øÁö»çÇ×_ù¹ø° ¸®½ºÆ®*/
.notice_box .notice_tb li.first_list{position: relative; min-height:55px; padding:0 0 15px 55px; margin:0 0 10px; background:url(../images/main/icon_noti.gif) no-repeat 10px center; border: 3px solid #ffc350; border-radius: 10px; font-family:CGC; box-sizing: border-box}
.notice_box .notice_tb li.first_list .tit a{width:70%; padding-top: 12px; color:#393939; font-size: 14px; font-weight: 500}
.notice_box .notice_tb li.first_list .date{padding-top:1px; background: none; color:#2c2c2c}

 /* Calendar */
.cal_wrap {position: relative; padding:10px; background: #fab7d7; border-radius: 10px} 
.cal_wrap .top_box{position: relative; margin-bottom: 5px}
/*ÀÌ´ÞÀÇ Çà»ç_ŸÀÌƲ*/
.cal_wrap .caltit_box{height:34px; font-weight: 500}
.cal_wrap .top_box .cal_tit{font-size:14px; color:#fff}
.cal_wrap .top_box .cal_tit span{display:inline-block; padding:8px 0 8px 35px; background:url(../images/main/ico_cal.gif) no-repeat left 2px}
/*ÀÌ´ÞÀÇ Çà»ç_³¯Â¥*/
.cal_wrap .cal_date{height: 40px; line-height: 40px; background: #f675af; border-radius: 5px 5px 0 0; font-size:13px; color:#fff; font-weight: 600; text-align: center}
.cal_wrap .cal_date span{display: inline-block; width: 25px; height: 25px; line-height: 27px; margin-left: 5px; border-radius: 50%; background: #fff; text-align: center; color:#000}
/*ÀÌ´ÞÀÇ Çà»ç_¸®½ºÆ®*/
.cal_wrap .cal_area{overflow: hidden; position: relative; height: 69px; padding: 10px; border-radius: 0 0 5px 5px; background:#fff; font-family:NSK}
.cal_wrap .cal_list li{height:25px; line-height: 150%; padding-left:8px; background:url(../images/main/blt_v02.gif) no-repeat 0 10px; color:#393939; font-size:14px; font-weight:400}
.cal_wrap .cal_list li a {display:block; overflow:hidden; width:90%; color:#595959; text-overflow:ellipsis;  white-space:nowrap}
.cal_wrap .cal_list li span {font-weight:600; margin-right: 10px; color:#313131}
.cal_wrap .cal_list li:hover {font-weight:500; color:#000; text-decoration: underline}
/*ÀÌ´ÞÀÇ Çà»ç_¹öÆ°*/
.cal_wrap .btn_slide{position: absolute; top:14px; right:15px}
.cal_wrap .btn_slide li{float: left; margin: 0 3px;}
.cal_wrap .btn_slide li a{display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 50px 50px 0 0; background: #fff; text-align: center}
.cal_wrap .btn_slide li a img{vertical-align: middle}
/*ÀÌ´ÞÀÇ Çà»ç_´õº¸±â*/
.cal_wrap .more{position: absolute; top:19px; left:123px}

/*Userquick*/
.userqum_wrap{position: relative; margin: 55px 0 20px}
.userqum_wrap h3 {position: absolute; width:99px}
.userqum_wrap h3 a {position: relative; display:block; width: 73px; margin: 0 auto; height:40px; border-radius: 50px 50px 0 0;  font-weight:400; font-size:14px; text-align:center}
.userqum_wrap h3 a span{display: block; padding-top:15px}
.userqum_wrap h3 a br{display: none}
.userqum_wrap .btn_quick_tit h3 a{background:#e4e4e4; color:#000; transition: all .6s}
.userqum_wrap .btn_quick_tit.on h3 a, .userqum_wrap .btn_quick_tit h3:hover a{color:#fff; font-weight: 500}
.userqum_wrap .on .qmu_tab01 a, .userqum_wrap .qmu_tab01:hover a, .userqum_wrap .quick_tb.quick_tb01{background:#80ce76}
.userqum_wrap .on .qmu_tab02 a, .userqum_wrap .qmu_tab02:hover a, .userqum_wrap .quick_tb.quick_tb02{background:#ffb137}
.userqum_wrap .on .qmu_tab03 a, .userqum_wrap .qmu_tab03:hover a, .userqum_wrap .quick_tb.quick_tb03{background:#64abf3}
.userqum_wrap .quick_tb {height: 172px; padding:8px; border-radius:10px ;z-index: 5}
.userqum_wrap .quick_tb .qmu_box{position: relative; position: relative; overflow:hidden; height: 151px; padding:10px; border-radius:10px; background: #fff; z-index: 5}
.userqum_wrap .quick_tb .qmu_tit{height: 25px; padding-top: 5px; margin-bottom: 15px; border-bottom: 1px solid #d6d6d6; text-align: center; font-weight: 500}
.userqum_wrap .quick_tb01 .qmu_tit span{color:#76ac4f}
.userqum_wrap .quick_tb02 .qmu_tit span{color:#ff8f21}
.userqum_wrap .quick_tb03 .qmu_tit span{color:#4493e3}
.userqum_wrap .quick_list {position: relative; padding:0 10px}
.userqum_wrap .quick_list>div ul:after{content:""; clear: both; display: block;}
.userqum_wrap .quick_list>div ul li{float: left; width: 50%}
.userqum_wrap .quick_list>div a{position: relative; display: block; margin:0 auto; text-align: center}
.userqum_wrap .quick_list>div a span.qmu_icon{display:block; width: 60px; height:60px; background-color: #efefef; border:2px solid #eee; border-radius: 50%; margin: 0 auto; text-align: center; box-sizing: border-box; transition: all .6s}
.userqum_wrap .quick_list>div a:hover span.qmu_icon{background-color: #fff; border:2px solid #ccc; box-sizing: border-box}
.userqum_wrap .quick_tb01 .quick_list>div a:hover span.qmu_icon{border-color:#80ce76}
.userqum_wrap .quick_tb02 .quick_list>div a:hover span.qmu_icon{border-color:#ffb137}
.userqum_wrap .quick_tb03 .quick_list>div a:hover span.qmu_icon{border-color:#64abf3}
.userqum_wrap .quick_list>div a span.tit{display: block; line-height: 140%; padding-top: 10px; font-weight: 400}
.userqum_wrap .quick_list>div a span.alone_txt{padding-top: 124px}
.userqum_wrap .quick_list>div a:hover span.tit{font-weight: 500}
.userqum_wrap .quick_tb01 a:hover span.tit{color: #80ce76}
.userqum_wrap .quick_tb02 a:hover span.tit{color: #ffb137}
.userqum_wrap .quick_tb03 a:hover span.tit{color: #64abf3}
/*¹öÆ°*/
.userqum_wrap .btn_slide li{position: absolute; top: 6px}
.userqum_wrap .quick_left{left:10px}
.userqum_wrap .quick_right{right:10px}
.userqum_wrap .btn_slide button{display:block; width:27px; height:27px; font-size:0; cursor:pointer; z-index: 10}
.quick_tb01 .btn_slide .quick_prev {background:url(../images/main/btn_qmn1_v1.gif) no-repeat 0 0}
.quick_tb01 .btn_slide .quick_next {background:url(../images/main/btn_qmn1_v2.gif) no-repeat 0 0}
.quick_tb02 .btn_slide .quick_prev {background:url(../images/main/btn_qmn2_v1.gif) no-repeat 0 0}
.quick_tb02 .btn_slide .quick_next {background:url(../images/main/btn_qmn2_v2.gif) no-repeat 0 0}
.quick_tb03 .btn_slide .quick_prev {background:url(../images/main/btn_qmn3_v1.gif) no-repeat 0 0}
.quick_tb03 .btn_slide .quick_next {background:url(../images/main/btn_qmn3_v2.gif) no-repeat 0 0}

/*Çлý*/
.useqm01_v1 .qmu_icon{background:url(../images/main/useqm01_v1.png) no-repeat center center}
.useqm01_v2 .qmu_icon{background:url(../images/main/useqm01_v2.png) no-repeat center center}
.useqm01_v3 .qmu_icon{background:url(../images/main/useqm01_v3.png) no-repeat center center}
.useqm01_v4 .qmu_icon{background:url(../images/main/useqm01_v4.png) no-repeat center center}
.useqm01_v5 .qmu_icon{background:url(../images/main/useqm01_v5.png) no-repeat center center}
.useqm01_v6 .qmu_icon{background:url(../images/main/useqm01_v6.png) no-repeat center center}
.useqm01_v1:hover .qmu_icon{background:url(../images/main/useqm01_v1_a.png) no-repeat center center}
.useqm01_v2:hover .qmu_icon{background:url(../images/main/useqm01_v2_a.png) no-repeat center center}
.useqm01_v3:hover .qmu_icon{background:url(../images/main/useqm01_v3_a.png) no-repeat center center}
.useqm01_v4:hover .qmu_icon{background:url(../images/main/useqm01_v4_a.png) no-repeat center center}
.useqm01_v5:hover .qmu_icon{background:url(../images/main/useqm01_v5_a.png) no-repeat center center}
.useqm01_v6:hover .qmu_icon{background:url(../images/main/useqm01_v6_a.png) no-repeat center center}
/*Çкθð*/
.useqm02_v1 .qmu_icon{background:url(../images/main/useqm02_v1.png) no-repeat center center}
.useqm02_v2 .qmu_icon{background:url(../images/main/useqm02_v2.png) no-repeat center center}
.useqm02_v3 .qmu_icon{background:url(../images/main/useqm02_v3.png) no-repeat center center}
.useqm02_v4 .qmu_icon{background:url(../images/main/useqm02_v4.png) no-repeat center center}
.useqm02_v5 .qmu_icon{background:url(../images/main/useqm02_v5.png) no-repeat center center}
.useqm02_v1:hover .qmu_icon{background:url(../images/main/useqm02_v1_a.png) no-repeat center center}
.useqm02_v2:hover .qmu_icon{background:url(../images/main/useqm02_v2_a.png) no-repeat center center}
.useqm02_v3:hover .qmu_icon{background:url(../images/main/useqm02_v3_a.png) no-repeat center center}
.useqm02_v4:hover .qmu_icon{background:url(../images/main/useqm02_v4_a.png) no-repeat center center}
.useqm02_v5:hover .qmu_icon{background:url(../images/main/useqm02_v5_a.png) no-repeat center center}
/*±³Á÷¿ø*/
.useqm03_v1 .qmu_icon{background:url(../images/main/useqm03_v1.png) no-repeat center center}
.useqm03_v2 .qmu_icon{background:url(../images/main/useqm03_v2.png) no-repeat center center}
.useqm03_v3 .qmu_icon{background:url(../images/main/useqm03_v3.png) no-repeat center center}
.useqm03_v4 .qmu_icon{background:url(../images/main/useqm03_v4.png) no-repeat center center}
.useqm03_v5 .qmu_icon{background:url(../images/main/useqm03_v5.png) no-repeat center center}
.useqm03_v1:hover .qmu_icon{background:url(../images/main/useqm03_v1_a.png) no-repeat center center}
.useqm03_v2:hover .qmu_icon{background:url(../images/main/useqm03_v2_a.png) no-repeat center center}
.useqm03_v3:hover .qmu_icon{background:url(../images/main/useqm03_v3_a.png) no-repeat center center}
.useqm03_v4:hover .qmu_icon{background:url(../images/main/useqm03_v4_a.png) no-repeat center center}
.useqm03_v5:hover .qmu_icon{background:url(../images/main/useqm03_v5_a.png) no-repeat center center}

/*  Photo */
.album_wrap {position: relative; margin:10px}
.album_wrap .album_top{position: absolute; top:20px; left:5px}
.album_wrap .album_top .top_txt{display: inline-block; padding: 5px 15px; margin:0 0 8px 20px; border-radius: 50px; background:#58a5e1; font-size: 12px; font-weight: 500; color:#fff}
.album_wrap .photo_area {position: relative; height: 178px; margin-left: 130px}
.album_wrap .photo_item {width:149px; margin: 0 auto; padding: 0 14px}
.album_wrap .photo_item .photo_box {width:150px; margin:0 auto; }
.album_wrap .photo_item .photo{position: relative; overflow: hidden; width:150px; height: 150px; margin: 0 auto; border-radius:50%; background:url(../images/main/none_img.gif) no-repeat center center; box-shadow:3px 3px 4px rgba(0, 0, 0, 0.15)} 
.album_wrap .photo_item .photo img{width:150px; height: 150px; border-radius:5px}
.album_wrap .photo_txt {width:150px; height:46px; line-height: 46px;  margin: 0 auto}
.album_wrap .photo_txt .tit {display:block;  overflow: hidden;  height:46px; line-height: 46px; margin:0 auto; font-size:14px; font-weight:400;  color:#000;  text-align:center; text-overflow:ellipsis; white-space:nowrap}
.album_wrap .photo_txt .tit:hover a, .album_wrap .photo_item:hover .tit a{text-decoration: underline; color:#000}
.album_wrap .photo .m_blind {position:absolute; left:0; top:-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_item:hover .photo .m_blind{top:0}
.album_wrap .photo_item a:focus img,
.album_wrap .photo_item a:active img{display:block; width:150px; height: 150px; border:2px solid #000; border-radius:10px; box-sizing:border-box}
/*¾Ù¹ü_¹öÆ°*/
.album_btnwrap{overflow: hidden; height: 75px; margin-top: -60px; border-radius: 10px; background: #f0f2f3}
.album_btnwrap .btns{width: 112px; height: 70px; padding:20px 0 0 8px; background:#dee3e6}
.album_btnwrap .btns button{background:none; padding:0; cursor: pointer}
.album_btnwrap .btns li {float: left}
.album_btnwrap .btns li:nth-child(2){padding: 0 2px}
.album_wrap .more{position: absolute; top:63px; left:98px}

 /*Class*/
.class_wrap {overflow: hidden; position:relative; padding:10px; margin:15px 10px 10px; background: #fff; border-radius: 10px; border:4px solid #dee3e6}
.class_wrap .class_top { padding:8px 0 13px; margin-bottom: 5px; border-bottom: 1px solid #c8c8c8; text-align: center}
.class_wrap .class_top .top_box{width: 178px; margin:0 auto}
.class_wrap .class_top .top_txt{display: block;  float: left; margin:-5px 10px 0 0}
.class_wrap .class_top h3 {float: left; display: block;font-size:14px; font-weight:500}
/*Çг⼱Åÿµ¿ª*/
.class_wrap .class_area{position:relative; height: 46px; margin: 0 10px}
.class_wrap .grade {width:auto; padding: 10px 20px}
.class_wrap .grade>li {float:left; width:16.6%}
.class_wrap .grade>li dt>a {position: relative; display:block; width: 30px; height: 30px; line-height: 25px; margin:0 auto;  background:#fff; border:2px solid #ffa439; border-radius: 50%; text-align:center; font-weight:500; color:#ffa439; font-size:14px; box-sizing: border-box; transition: all .3s}
.class_wrap .grade>li dt>a span{display:block}
.class_wrap .grade>li dt>a:hover {height:30px;  background:#ffa439; border-radius: 500px; color:#fff}
.class_wrap .grade .on dl>dt>a {height:30px; background:#ffa439; color:#fff}
.class_wrap .grade .on dl>dt>a::after, .class_wrap .grade>li dt>a:hover::after{content: ""; display: block; clear: both; position: absolute; bottom:-4px; left:11px; width:9px; height:5px; background:url(../images/main/blt_grade.png) no-repeat 0 center; z-index:1}
/*¹Ý¼±Åà ¿µ¿ª*/
.class_wrap .class_list {position:absolute; top:52px; left:0; width:100%; height: 30px; line-height:30px; text-align:center}
.class_wrap .class_list li{display:inline-block}
.class_wrap .class_list li a {background:none; background:none; padding: 0 2px; font-size: 13px; color:#333; font-weight:300}
.class_wrap .class_list li a:hover {background-image:none; font-weight:500; color:#000; text-decoration: underline}
/*¹Ù·Î°¡±â ¹öÆ° ¿µ¿ª*/
.class_wrap .class_kid{margin-top: 47px}
.class_wrap .class_kid ul{position: relative}
.class_wrap .class_kid ul::after, .class_wrap .class_kid ul::before{content:""; clear: both; display: block;position: absolute; width: 45px}
.class_wrap .class_kid ul::after{top:-51px; left:10px; height: 51px; background:url(../images/main/img_class_v1.gif) no-repeat 0 center}
.class_wrap .class_kid ul::before{top:-52px; right:10px; height: 52px; background:url(../images/main/img_class_v2.gif) no-repeat 0 center}
.class_wrap .class_kid ul li{ float: left; width: 48%}
.class_wrap .class_kid ul li:last-child{float: right}
.class_wrap .class_kid ul li a{display: block; height: 22px; line-height: 25px; padding: 5px 10px; margin: 0 auto; background: #5ba3ec; border-radius: 50px; color:#fff; font-size: 12px; font-weight:500; transition: .3s}
.class_wrap .class_kid ul li a:hover{background: #4187cd}
.class_wrap .class_kid ul li:last-child a{background:#7bae3f}
.class_wrap .class_kid ul li:last-child a:hover{background:#6a9932}
.class_wrap .class_kid ul li a span{float: right; display: inline-block; width: 40px; height: 22px; line-height: 22px; margin-right: -3px;  border-radius: 50px; background: #fff; color:#5997d6; text-align: center}
.class_wrap .class_kid ul li:last-child a span{color:#6d9c36}
.class_wrap .more{position: absolute; top:19px; right:50%; margin-right: -105px}

/*Food*/
.food_wrap{position: relative; padding: 10px; margin: 10px 0; border-radius: 10px; background:#75c360}
.food_wrap .food_top{position: relative}
.food_wrap .tit{padding:8px 0 13px 38px; background:url(../images/main/ico_food.gif) no-repeat 0 2px;font-size: 14px; color:#fff}
.food_wrap .tit span{margin-right: 5px}
.food_wrap .food_area{padding: 10px; border-radius: 10px; background:url(../images/main/bg_food.gif) no-repeat right 80% #fff}
.food_wrap .food_date{padding:10px 5px; border-radius: 10px; background: #ffb72b; text-align: center; color:#fff; font-weight: 500}
.food_wrap .food_txt{overflow: hidden; height: 55px; line-height: 130%; margin: 15px 80px 5px 5px; font-size: 14px; font-family:NSk}
.food_wrap .food_txt a:hover{color:#000; text-decoration: underline}
.food_wrap .more{position: absolute; top:19px; left:128px }

/*Popup*/
#main_popup .pop_wrap{position: relative; padding: 10px; border-radius: 10px; background:#49b4eb}
/*Æ˾÷ ŸÀÌƲ*/
.pop_wrap .popup_top .tit{padding:6px 0 13px 35px; background:url(../images/main/ico_pop.gif) no-repeat 0 2px;font-size: 14px; color:#fff}
.pop_wrap .popup_top .tit span{display: inline-block; margin: 2px 5px 0 0}
/*Æ˾÷³»¿ë*/
.pop_wrap .pop_area{position: relative; padding: 10px; border-radius: 10px; background-color:#fff; font-family:NSK}
.pop_wrap .bx-viewport{min-height:70px}
.pop_wrap .pop_list li{background:url(../images/main/blt_v02.gif) no-repeat 0 center; height:26px}
.pop_wrap .pop_list li a{display:block; width:70%; height:29px; line-height:29px; padding-left:10px; color:#484848; font-size: 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop_wrap .pop_list li a:hover{font-weight:400; color:#000; text-decoration: underline}
/*Æ˾÷ ¹öÆ°*/
.pop_wrap .btn_slide{overflow: hidden; position: absolute; top:8px; right:8px; width: 29px; border-radius: 10px; z-index: 5}
.pop_wrap .btn_slide li a{display: block; width: 29px; padding: 7px 0;  text-align: center; background: #d48bf3}
.pop_wrap .btn_slide li:nth-child(2){border-top: 1px solid #fff; border-bottom:1px solid #fff}
.pop_wrap .more{position: absolute; top:19px; left:93px }

/*Banner*/
#main_banner{ height: 81px; padding-bottom:15px}
.banner_wrap {position: relative; height:68px; padding:0 10px 0 0}
.banner_wrap .ban_head {position: relative; float: left; width:95px; height:82px; padding:5px 10px 5px 5px}
.banner_wrap .ban_head h3 { margin:18px 0 0 7px; font-size:15px; font-weight:500; color:#323232}
.banner_wrap .ban_head h3 span{margin-right: 18px}
/*¹öÆ°*/
.banner_wrap .btns{position: absolute; left:5px; bottom:13px}
.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:26px; height:26px}
.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.png) no-repeat 0 center}
.banner_wrap .btns .ban_btn_stop{background:url(../images/main/ban_btn_v2.png) no-repeat 0 center}
.banner_wrap .btns .ban_btn_next{background:url(../images/main/ban_btn_v3.png) no-repeat 0 center}
.banner_wrap .ban_area{margin:0 0 0 100px}
.banner_wrap .ban_item{margin-top:20px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 190px; height:61px; border-radius:8px; margin: 0 auto; background:url(../images/main/no_banner.gif) no-repeat center center; border:1px solid #d7d7d7}
.banner_wrap .ban_item img {margin: 0 auto; width:190px; height: 61px}
.banner_wrap .btns button{background:none; outline:0}
.banner_wrap .more{position: absolute; top:27px; left:80px}

/* Footer */
#footwrap {background: #495055}
.address .add_num{font-weight: 300}
.address .add_num dt{display: block; width:62px; height: 20px; line-height: 20px; margin: 0 auto; border-radius: 50px; background:#3f3f3f; font-weight: 400}
.address .add_num dd{margin: 3px 0 8px }

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {

.skip_navi .pc_skip{display:none}
/*Mainheader */
.header_top{position: absolute; top:50px; left:0; width: 100%; min-width: 320px; margin: 0; z-index:100}
.header_top .header_box{position: relative; height:45px; margin:0 10px; border-radius: 50px; background: #f4f4f4; box-shadow:0 5px 10px rgba(0, 0, 0, 0.1)}
.logo_top a{display: block; position: absolute; top:6px; left: 7px; width:142px; height: 40px;  background: url(../images/main/logo_m.png) no-repeat left top}
.logo_top img{display: none}
.btn_top{position: absolute; top:140px; right:10px; z-index: 100}

/* Mobile Menu */
.header_top .btn_all{position: absolute; top:1px; right:3px}
.header_top .qmenu .mb_non{display: none}
.header_top .qmenu_mb{position: absolute; bottom:0; right:0}
.header_top .qmenu_mb>p{margin-left:14px}
.header_top .qmenu .qmu_popup{position: absolute; top:-38px; right:0}
.header_top .qmu_search{position: absolute; top:1px; right:45px}
.header_top .qmu_search, .header_top .btn_all{transform: scale(0.9)}
	
/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width: 260px; height:100%; min-height:100%; background:#f4f4f3; color:#093458; z-index:1000; overflow-y:auto; box-sizing:border-box}
#gnb p.mb_gnbtit{display: block; height:58px; line-height: 58px; padding-left: 32px; background:url(../images/main/gnb_mbicon.gif) no-repeat 15px #62afeb; font-size:18px; font-weight:500;color:#fff}
#gnb p.mb_gnbtit span{padding-left:15px}
/*GNB_»ó´Ü*/
#gnb .allbtnclose .closebtn {display:block; width: 40px; height: 39px; margin: 5px; font-size:0; line-height:0; text-indent:-9999px; overflow: hidden; position:absolute; top:4px; right:0; background: url(../images/main/btn_menu_close.gif) no-repeat left top}
/*GNB_¸Þ´º¹öÆ°*/
#gnb .mbl_area{padding: 10px 5px; background:#4a92ca}
#gnb .mbl_area li {width:49%; height: 35px; line-height: 35px; border-radius: 50px}
#gnb .mbl_area li:first-child{float: left; background:url(../images/main/icon_login.gif) no-repeat 15px center #fff}
#gnb .mbl_area li:last-child{float: right;  background:url(../images/main/icon_join.gif) no-repeat 15px center #fff}
#gnb .mbl_area li a {display:block; color:#000; font-size: 14px; font-weight: 500; text-align: center}
#gnb .mbl_area li a span{padding-left: 15px}
/*GNB_¸Þ´ºÅ¸ÀÌƲ*/
#gnb .gnb_list{padding: 10px}
#gnb .gnb_list .depth1 > h2{margin-bottom: 5px;}
#gnb .gnb_list .depth1 > h2 a {display:block; line-height:49px; border:1px solid #ededed; border-radius: 5px; font-size:15px; font-weight:500; padding:0 0 0 15px; margin:0; width:auto; background:url(../images/main/bg_mn.png) no-repeat right bottom #fff; color:#303030}
#gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .act > h2 a  {background:url(../images/main/bg_mn_a.png) no-repeat right bottom #7dc859; color:#fff}
/*GNB_¸Þ´º¼¼ºÎ*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: auto; padding:10px 10px 0; margin: 10px 0; border-radius: 5px; border:2px solid #7dc859; background:#fff}
#gnb .gnb_list .depth1 .navi_sub::after{content:""; clear: both; display: block;position: absolute; top:-6px; left:50%; width: 13px; height: 13px; margin-left:-5px; background:#7dc859; border-radius: 50%}
#gnb .gnb_list .depth1 .navi_sub ul>li{padding-left:10px; background:url(../images/main/gnb_lstblt.png) no-repeat left 9px; border-bottom: 1px solid #ccc}
#gnb .gnb_list .depth1 .navi_sub ul>li:hover{background:url(../images/main/gnb_lstblt_a.png) no-repeat left 9px}
#gnb .gnb_list .depth1 .navi_sub ul>li:last-child{border-bottom: none}
#gnb .gnb_list .depth1 .navi_sub ul>li>a {line-height:180%; display:block; padding:5px 0 5px 12px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; 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>a {color:#ff971d; font-weight:500; text-decoration: underline}

/* Visual */
.visual .visual_wrap {position: relative;  margin: 0 auto}
.visual .visual_item{width:auto; height:285px; margin: 0 auto}
.visual .item1{background:url(../images/main/v01_m.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v02_m.jpg) no-repeat top center}
/*Àç»ý,ÀϽÃÁ¤Áö*/
.visual_wrap .btn_visual{top:315px; left:74px; margin:0}
.visual_wrap .btn_visual button{width:16px; height:16px}
.visual_wrap .btn_visual button.vbtn_pause{background:url(../images/main/vbtn_pause_s.png) 0 0 no-repeat}
.visual_wrap .btn_visual button.vbtn_pause.play{background:url(../images/main/vbtn_play_s.png) 0 0 no-repeat}
/*ºñÁÖ¾ó À̵¿ ºí¸´*/
.slick-dots {top:105px; left:10px; margin:0}
.slick-dots li button{width:10px; height:10px}
.slick-dots li {border:2px solid #fff}
.slick-dots li.slick-active {background:#fff}
	
/* Poplayer */
.main_openpop .popup_open{display:none}
.main_openpop{ position: absolute; top:95px; right:0; width: 100%; z-index:200}
.main_openpop .popup_layer .popup_tit{top:10px}
.main_openpop .popup_on{display:none;width: 100%; height: 315px; margin: 0 auto; text-align: center; background:rgba(255,255,255,0.9); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)}
.qmu_popup a, .openact>a{display: block; width:83px; height:28px}
.qmu_popup a{ background:url(../images/main/btn_layerpop_m.png) 0 0 no-repeat}
.openact>a{background:url(../images/main/btn_layerpop_m_a.png) 0 0 no-repeat}


/*TOP qmn*/
#main_topquick .topquick_wrap{position: relative; min-height: 68px; padding: 10px; background:#eee; border-radius:10px; box-sizing: border-box}
.topquick_wrap .tqmn_tit{position: absolute; top:35px; left:16px; width: 51px; height: 32px; background:url(../images/main/tqmn_tit_m.png) no-repeat 0 center}
.topquick_wrap .tqmn_tit img{display:none}
.topquick_wrap .topquick_area{position: relative; margin: 0 40px; height: 89px}
.topquick_wrap .tquick_list li{overflow: hidden; height: 100px; text-align: center}
.topquick_wrap .tquick_list li a{display: block; font-size: 13px; font-weight: 400}
.topquick_wrap .tquick_list img{transform: scale(0.9)}
.topquick_wrap .tquick_list li span.tq_icon{width:75px; height: 75px}
.topquick_wrap .tquick_list li span.tq_tit{display: block; line-height: 130%}
.topquick_wrap .tquick_list li a:hover span{transition: all .3s}
.main_openpop .pop_close{display:none}

 /* Calendar */
/*ÀÌ´ÞÀÇ Çà»ç_¹öÆ°*/
.cal_wrap .cal_more{position: absolute; top:18px; right:5px}

/*  Photo */
/*¾Ù¹ü_¹öÆ°*/
.album_wrap .photo_more a{position: absolute; top:15px; right:50%; margin-right:-50px}

/*Userquick*/
.userqum_wrap h3 {top:-40px; left:50%}
.userqum_wrap .qmu_tab01 {margin-left: -131px}
.userqum_wrap .qmu_tab02 {margin-left: -50px}
.userqum_wrap .qmu_tab03 {margin-left: 32px}

/*Food*/
.food_more{top:9px; margin-left:50px}

/*Banner*/
/*¹öÆ°*/
.banner_wrap .btns{position: absolute; left:10px; bottom:-13px}
.banner_wrap .ban_more{position: absolute; left:92px; top:25px}

/* Footer */
#footwrap{padding:0 10px 0}
#footwrap .foot_area{position:relative}
#footwrap .foot_menu .foot_mlst{position: relative; width: 310px; margin: 0 auto}
#footwrap .foot_menu .mb_menu{margin:0 auto; padding-left: 35px}
#footwrap .foot_menu .mb_menu li {float: left; padding:6px 13px; height: 31px; line-height: 31px; 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 a {display:block; color:#fff; font-size: 12px; font-weight: 300}
#footwrap .foot_menu p.foot_home{position: absolute; top:6px; left:-32px}
#footwrap .foot_menu p.foot_home a{display:block; width: 31px; height: 31px; line-height: 31px; background:url(../images/main/foot_home.gif) no-repeat left center}
#footwrap .foot_menu p.foot_home a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
/*PC¹öÆ°*/
#footwrap .pc_menu {margin: 5px 0 15px; background:#e9e9e9; border-radius: 5px; text-align:center; font-weight: 500; border: 1px solid #8b9098} 
#footwrap .pc_menu  li a{display: block; padding: 10px 0; color:#6b6b6b}
#footwrap .pc_menu  li.li_1{float: left; display:block; width:50%}
#footwrap .pc_menu  li.li_1 a{border-right:1px solid #bcbcbc}
#footwrap .pc_menu  li.li_2{float: right; display:block; width:50%}
#footwrap .pc_menu  li.li_3{display:block; width: 100%}
#footwrap .pc_menu  li.li_3 a{margin-top: 34px; padding: 10px 0; border-top:1px solid #bcbcbc; color:#2795da}
#footwrap .pc_menu  li.li_4, #footwrap .foot_menu .pc_menu  li.li_5{display: none}
/*ÁÖ¼Ò*/
#footwrap .add .address{width:auto; line-height:160%; padding:0 15px 15px; color:#e4e4e4; text-align: center; font-weight: 400; font-size: 12px}
#footwrap .add .address span.add_txt{display: block; margin-bottom: 10px;  color:#fff}
#footwrap .add .address p.copy{padding:3px 0 0 0; margin-top: 10px; color:#9d9d9d; font-weight: 400}
#footwrap .count_box{display:none}
#footwrap .btn_admin{display:none}
	

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

/***Content  Common***/   
.mb_none{display: none}
.content_area{position: relative;  background:url(../images/main/bg_bottom.gif) bottom left no-repeat}
.conline01{margin:0 10px}
.conline03{margin:0 10px}


}

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

/* Main */
.headerwrap {position: relative; width: 1200px; margin: 0 auto}
.logo_top {position:absolute; top:16px; left:50%; margin-left: -55px} 
.logo_top a{display: block; width: 170px; height: 49px; cursor:pointer}

/*Ãѵ¿¹®È¸*/
.qmu_friend{position: absolute; top:22px; left:0}
.qmu_friend a{display: block; width: 150px; height: 32px; line-height: 32px; padding: 0 10px 0 20px; background:url(../images/main/ico_friend.png) no-repeat 5px center #fff; font-size: 14px; text-align: center}
.qmu_friend a:hover{background:url(../images/main/ico_friend_a.png) no-repeat 5px center #ffb244}

/* Mainheader */
.header_top{position: relative; width: 100%}
.header_top .qmenu .pc_non{display: none}
.header_top .qmu_member p{float: left}
.header_top .qmu_member{float: right; height:32px; line-height: 32px; padding: 0 20px; margin:22px 0 ; background: #fff; border-radius: 50px; transition: all .3s}
.header_top .qmu_member>p:first-child{margin-right:10px; padding-right:10px; background:url(../images/main/bar_log.gif) no-repeat right center}
.header_top .qmu_member>p a{display: block; color:#474747; font-size: 14px; font-weight: 500}
.header_top .qmu_search, .header_top .qmu_site{position: absolute; bottom:8px}
.header_top .qmu_search{right:65px}
.header_top .qmu_site{ right:15px}
.header_top .qmu_member p a:hover{color:#4ca22b; font-weight: 500}

/* GNB */
#gnb .allbtnclose, #gnb .mbl_area, #gnb .navi_sub {display: none}
#gnb{margin-right: 113px}
.gnb_box{ border-radius: 50px; background: #f4f4f4; box-shadow:5px 5px 8px rgba(0, 0, 0, 0.07);}
#gnb .mb_gnbtit, #gnb p.gnb_mbtxt{display: none}
#gnb .depth1 {position: relative; float: left; width: 14.2%; padding:24px 0; text-align: center; z-index: 1000; text-align: center}
#gnb .depth1 h2 a{display: inline; text-align: center; font-weight:500;  font-size:17px; color: #333; font-weight: 500}
#gnb .navi_sub{position: absolute; left:50%; top:55px; width: 185px; margin-left:-90px; border-radius: 10px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.05); border:2px solid #2d87eb; background: #fff}
#gnb .navi_sub::after{content: ""; display: block; clear: both; position: absolute; top:-15px; left:50%; margin-left: -15px; width:25px; height:25px; background:url(../images/main/blt_navi.png) no-repeat 0 center; z-index:1}
#gnb .navi_sub li{border-bottom: 1px solid #ccc}
#gnb .navi_sub li:last-child{border-bottom:none}
#gnb .navi_sub a {display: block; line-height: 140%; padding: 13px 5px; text-align: center; font-size:15px; font-weight: 500}
#gnb .navi_sub a:hover {font-weight:500; background: #2d87eb; color:#fff; transition: all .3s}
#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:500; color: #2d87eb}
#gnb .depth1.active .navi_sub .depth2 > li.active a{color:#2d87eb}

/* 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:583px}
.visual .visual_item > a{display: block; height:583px}
.visual .item1 a:focus-visible{height:580px; outline:2px solid #000}
.visual .item1{background:url(../images/main/v01_p.jpg) no-repeat top center}
.visual .item2{background:url(../images/main/v02_p.jpg) no-repeat top center}
/*¾Ö´Ï¸ÞÀ̼Ç*/
.visual .slogun {position: absolute; top: 136px; right: 50%; margin-right:-137px; z-index: 10}
.visual .slogun .mb {display: none}
.visual .slogun img {position: absolute; opacity: 0; transform: translateY(100%)}
.visual .slogun img.sl01 {animation: slogun1 25s infinite; left:-325px}
.visual .slogun img.sl02 {animation: slogun2 25s infinite; top:35px; left:-240px}
.visual .slogun img.sl03 {animation: slogun3 25s infinite; left:-240px}
.visual .slogun img.sl04 {animation: slogun4 25s infinite; top:35px; left:-155px}
.visual .slogun img.sl05 {animation: slogun5 25s infinite; left:-165px}
.visual .slogun img.sl06 {animation: slogun6 25s infinite; top:68px; left:-177px}
.visual .slogun img.sl07 {animation: slogun7 25s infinite; top:88px; left:-133px}
.visual .slogun img.sl08 {animation: slogun8 25s infinite; top:73px; left:-39px}
.visual .slogun img.sl09 {animation: slogun9 25s infinite; top:58px; left:41px}
.visual .slogun img.sl10 {animation: slogun10 25s infinite; top:43px; left:45px}
.visual .slogun img.sl11 {animation: slogun11 25s infinite; top:32px; left:60px}

/*Poplayer */
.content_poplayer{ position: relative; z-index: 1000}
.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}
.main_openpop .popup_on{position: absolute; top:10px; left:30px; width: 295px; height:300px}
.main_openpop .popup_layer_wrap{background:#f2f2f2; border-radius: 10px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1); text-align: center}
.main_openpop .popup_open a{display:block; position: absolute; top:-60px; left:50%; width:75px; height:50px; margin-left:-675px; background:url(../images/main/btn_ray_pop.gif) 0 0 no-repeat; z-index:1000}
.main_openpop .popup_open a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.main_openpop .popup_open.openact >a{background:url(../images/main/btn_ray_close.gif) 0 0 no-repeat}

/*vr_quick*/
#vr_quick{ display: flex; position: absolute; right:50%; top:610px; margin-right: -730px}
#vr_quick .btn_top a{display: block}

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

/***Content  Common***/   
#content{background:url(../images/main/bg_bottom_p.gif) bottom center no-repeat}
.pc_none{display:none}
.content_area{position: relative; width: 1200px; margin:-85px auto 0}
.conline01{margin-bottom: 45px; background:url(../images/main/bg_conline01.png) no-repeat top left}
.conline01_01{position: absolute; top:15px; right:15px; width: 567px; height: 279px; padding: 10px; background: #fff; border-radius: 15px 15px 0 0}
.conline02{margin-bottom: 45px}
.conline02_01{position: relative}
.conline03{margin-bottom: 45px}

/*TOP qmn*/
#main_topquick{position: absolute; top:0; left:0; width: 609px; height: 154px}
.topquick_wrap{margin: 0 50px}
.topquick_wrap .btn_slide li {display: block; position: absolute; top:50%; margin-top: 25px}
.topquick_wrap .btn_slide li.topquick_left{left:-23px}
.topquick_wrap .btn_slide li.topquick_right{right:-23px}
.topquick_wrap .btn_slide li button{width:25px; height:24px}
.topquick_wrap .btn_slide .tquickpre{ background:url(../images/main/btn_tqmnp_l.gif) no-repeat 0 center}
.topquick_wrap .btn_slide .tquicknext{ background:url(../images/main/btn_tqmnp_r.gif) no-repeat 0 center}
.topquick_wrap .tquick_list{margin:-60px 10px 0}
.topquick_wrap .tquick_list li a img{padding-top:23px}
.topquick_wrap .tquick_list li span.tq_icon{margin-bottom: 10px; border:5px solid #f0f0f0}
.topquick_wrap .tquick_list li:hover a span.tq_icon{border-color:#62afeb}

/*Notice*/
#main_notice{padding-top:100px; width:586px}
.notice_box h3 a {display:block; width:93%; height:40px; line-height:40px; margin: 0 auto; border-radius: 10px 10px 0 0; background:url(../images/main/btn_more_v1.png) no-repeat right center #e4e4e4; font-size:15px; text-align: left}
.notice_box h3 a span{padding-left: 10px}
.notice_box .on a, .notice_box h3 a:hover{background:url(../images/main/btn_more_v1_a.png) no-repeat right center #ffc350}
/**°øÁö»çÇ×_³»¿ë¿µ¿ª**/
.notice_box .notice_tb {height:153px}
.notice_box .notice_tb ul {height:153px}
.notice_box .notice_tb li {height:30px; color:#000; font-size:14px; font-weight: 400}
.notice_box .notice_tb li:hover a{color:#000}
/*°øÁö»çÇ×_¸®½ºÆ®*/
.notice_box ul li .tit a {width:80%}
.notice_box ul li .date {width:70px; font-size:13px}
/*°øÁö»çÇ×_ù¹ø° ¸®½ºÆ®*/
.notice_box .notice_tb li.first_list{min-height:50px}
.notice_box .notice_tb li.first_list .tit a{width:85%; padding-top: 8px; color:#393939}
.notice_box .notice_tb li.first_list .date{padding-right: 5px; font-size: 14px}

/*Calendar*/
#main_calendar{float: left; width: 290px}
.cal_wrap{height: 269px}
.cal_wrap .top_box{position: relative; margin-bottom: 5px}
/*ÀÌ´ÞÀÇ Çà»ç_ŸÀÌƲ*/
.cal_wrap .caltit_box{margin-bottom: 47px}
.cal_wrap .top_box .cal_tit{padding-top: 5px; font-size:16px}
/*ÀÌ´ÞÀÇ Çà»ç_³¯Â¥*/
.cal_wrap .cal_date{ font-size:16px; color:#fff; font-weight: 500}
/*ÀÌ´ÞÀÇ Çà»ç_¸®½ºÆ®*/
.cal_wrap .cal_area{height: 129px}
.cal_wrap .cal_list li{height:27px; line-height: 160%}
/*ÀÌ´ÞÀÇ Çà»ç_¹öÆ°*/
.cal_wrap .btn_slide{top:51px}
.cal_wrap .btn_slide li a{width: 40px; height: 40px; line-height: 40px}
/*ÀÌ´ÞÀÇ Çà»ç_´õº¸±â*/
.cal_wrap .more{top:25px; left:132px}

/*Userquick*/ 
#main_userquick{position: absolute; top:10px; right:-51px; width:328px}
.userqum_wrap{position: relative; margin: 0 61px 0 0}
.userqum_wrap h3 {position: absolute; top:10px; right: -80px}
.userqum_wrap h3 a {position: relative; display:block; width:61px; height:84px;margin: 0 auto; border-radius: 0 50px 50px 0;  font-weight:400; font-size:14px; text-align:center}
.userqum_wrap h3 a span{display: block; padding-top:35px; margin-left: -6px}
.userqum_wrap .qmu_tab02 {margin-top: 90px}
.userqum_wrap .qmu_tab03 {margin-top: 181px}
.userqum_wrap .quick_tb{height: 273px}
.userqum_wrap .quick_tb .qmu_tit{padding:5px 0 5px; margin-bottom: 13px; font-size: 15px}
.userqum_wrap .quick_tb .qmu_tit span{margin-right: 3px}
.userqum_wrap .quick_tb .qmu_box{height: 252px; border-radius: 5px}
.userqum_wrap .quick_list>div ul li{float: left; width:100%; margin-bottom: 14px}
.userqum_wrap .quick_list>div ul li:last-child{margin-bottom: 0}
.userqum_wrap .quick_list>div a span.qmu_icon{width: 75px; height:50px; border-radius: 30px}
.userqum_wrap .quick_list>div a span.tit{padding-top:5px}
.userqum_wrap .btn_slide li{top:10px}

/*  Photo */
#main_album{width:795px; height: 234px}
.album_wrap {position: relative; margin:0}
.album_wrap .album_top{position: absolute; top:47px; left:20px}
.album_wrap .album_top .album_tit {display: block; width:112px; height: 49px; background:url(../images/main/album_tit.gif) no-repeat center center}
.album_wrap .album_top .album_tit img{display: none}
.album_wrap .album_top .top_txt{padding: 5px 20px 3px; margin: 0 0 8px 35px; font-size: 13px}
.album_wrap .photo_area {position: relative; height: 169px; margin:0 10px 0 178px}
.album_wrap .photo_item {width:169px}
.album_wrap .photo_item .photo_box {width:169px; padding-top: 15px}
.album_wrap .photo_item .photo{width:169px; height:169px} 
.album_wrap .photo_item .photo img{width:169px; height:169px; border-radius:5px}
.album_wrap .photo_txt {width:169px}
.album_wrap .photo_txt .tit { font-size:14px; font-weight: 500}
/*¾Ù¹ü_¹öÆ°*/
.album_btnwrap{overflow: hidden; height: 76px; margin-top: -11px; border-radius: 10px 0 0 10px}
.album_btnwrap .btns{width: 173px; height: 76px; padding:18px 0 0 17px; box-sizing: border-box}
.album_btnwrap .btns li button{width: 40px; height: 40px}
.album_btnwrap .btns li button img{ display: none}
.album_btnwrap .btns li:first-child button{background:url(../images/main/btn_photo_v1.gif) no-repeat 0 0}
.album_btnwrap .btns li:nth-child(2) button{background:url(../images/main/btn_photo_v2.gif) no-repeat 0 0}
.album_btnwrap .btns li:last-child button{background:url(../images/main/btn_photo_v3.gif) no-repeat 0 0}
.album_btnwrap .btns li:nth-child(2){padding: 0 10px}
.album_wrap .more{position: absolute; top:95px; left:145px}

/*Class*/
#main_class{position:absolute; top:0; right:0; width: 405px; height: 234px; padding:0 13px 10px; background:url(../images/main/bg_class.png) no-repeat bottom right; box-sizing: border-box}
.class_wrap {height: 221px; margin:0; border-radius: 20px; box-sizing: border-box}
.class_wrap .class_top { padding:13px 0 15px; margin-bottom: 15px}
.class_wrap .class_top .top_box{width: 190px}
.class_wrap .class_top .top_txt{margin:-2px 10px 0 0}
.class_wrap .class_top h3 {font-size:16px}
/*Çг⼱Åÿµ¿ª*/
.class_wrap .class_area{margin: 0}
.class_wrap .grade {width:auto; padding: 10px 65px}
/*¹Ý¼±Åà ¿µ¿ª*/
.class_wrap .class_list li a {font-size: 14px; color:#000; font-weight:500}
/*¹Ù·Î°¡±â ¹öÆ° ¿µ¿ª*/
.class_wrap .class_kid ul::after, .class_wrap .class_kid ul::before{content:""; clear: both; display: block;position: absolute; width: 56px}
.class_wrap .class_kid ul::after{top:-75px; left:5px; height: 75px; background:url(../images/main/img_class_v1_p.gif) no-repeat 0 center}
.class_wrap .class_kid ul::before{top:-76px; right:9px; height: 76px; background:url(../images/main/img_class_v2_p.gif) no-repeat 0 center}
.class_wrap .class_kid ul li{ float: left; width: 48%}
.class_wrap .class_kid ul li:last-child{float: right}
.class_wrap .class_kid ul li a{display: block; height: 25px; line-height: 25px; padding: 5px 10px 5px 27px; margin: 0 auto; background: #5ba3ec; border-radius: 50px; color:#fff; font-size: 12px; font-weight:500; transition: .3s}
.class_wrap .class_kid ul li a span{width: 50px; height: 24px; line-height: 22px; font-size: 13px}
.class_wrap .more{top:25px; margin-right: -110px}
	
/*Food*/
#main_food{float: left;  width: 590px}
.food_wrap{position: relative; padding: 10px; margin:0; border-radius: 10px; background:#75c360}
.food_wrap .food_top{width: 130px; height: 114px; margin-top:20px; background:url(../images/main/bgtit_food.gif) 20px 40px no-repeat}
.food_wrap .tit{padding:0 0 0 8px; background:none; font-size: 16px; color:#fff}
.food_wrap .food_area{height: 114px; margin:-134px 0 0 120px}
.food_wrap .food_date{font-size: 15px}
.food_wrap .more{position: absolute; top:32px; left:105px }

/*Popup*/
#main_popup{float: right; width: 590px}
#main_popup .pop_wrap{position: relative; padding: 10px; border-radius: 10px; background:#49b4eb}
/*Æ˾÷ ŸÀÌƲ*/
.pop_wrap .popup_top{width: 130px; ; height: 114px; margin-top:20px; background:url(../images/main/bgtit_pop.gif) 30px 40px no-repeat}
.pop_wrap .popup_top .tit{padding:0; background:none;font-size: 16px; color:#fff}
.pop_wrap .popup_top .tit span{display: inline-block; margin: 2px 5px 0 25px}
/*Æ˾÷³»¿ë*/
.pop_wrap .pop_area{margin:-134px 0 0 120px; padding:15px; background:url(../images/main/bg_pop.gif) 85% center no-repeat #fff}
.pop_wrap .bx-viewport{min-height:104px}
.pop_wrap .pop_list li{height:27px}
/*Æ˾÷ ¹öÆ°*/
.pop_wrap .btn_slide{width: 39px}
.pop_wrap .btn_slide li a{width: 39px; padding: 13px 0}
.pop_wrap .more{position: absolute; top:34px; left:90px }

/*Banner*/
#main_banner{width: 1200px; height:auto; padding-bottom:30px}
.banner_wrap{padding: 0}
.banner_wrap .ban_head{height: auto}
.banner_wrap .ban_head h3 { margin:0 0 0 5px; color:#000}
.banner_wrap .ban_area{margin:0 0 0 140px}
.banner_wrap .ban_item{margin-top:0}
.banner_wrap .btns{bottom:7px}
.banner_wrap .more{position: absolute; top:8px; left:75px}

/* Footer */
#footwrap{height: 265px}
#footwrap .foot_area {width:1200px; height:57px; line-height: 57px; margin:0 auto;  background: #6c7174; border-radius:0 0 10px 10px}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu {height:53px; line-height:53px}
#footwrap .pc_menu:after {content:""; clear:both; display:block; height:0}
#footwrap .pc_menu li {float:left; height:53px; line-height:53px; padding: 0 20px; background:url(../images/main/foot_bar.gif) left center no-repeat; text-align: center}
#footwrap .pc_menu li:first-child{background: none}
#footwrap .pc_menu li a { font-size:14px; color:#fff; font-weight: 400}
#footwrap .pc_menu li.li_1 {float:left}
#footwrap .pc_menu li.li_3 a{font-weight: 500; color: #ffd144}
#footwrap .add_area{position: relative; width: 1200px; margin: 26px auto 0; padding-bottom:35px;  background:url(../images/main/foot_logo.png) center bottom no-repeat}
#footwrap .add_area .add{font-size: 14px; color:#dadadb; line-height: 150%; text-align: center; font-weight: 300}
#footwrap .add_area .copy{margin: 20px 0; color:#c2c2c2}
#footwrap .add_area .add br{display: none}
#footwrap .add_txt{display:block; margin-bottom: 5px; color:#fff}
#footwrap .fax_num{display: block; color:#dadadb}
/* Footer_count */ 
#footwrap .count_box {display:block; position: absolute; color:#515151; top:-87px; right:0; height: 31px; width: 380px; padding: 15px 5px; background: #343a3f; border-radius: 0 0 10px 0}
#footwrap .count_box ul li{float: left; width: 50%;   height: 34px; line-height: 34px; font-size: 13px; font-weight: 400}
#footwrap .count_box ul li .tit{display: inline-block; width: 65px; height: 20px; line-height: 20px; margin-left:5px; background: #6c7174; border-radius: 50px; color:#fff; font-weight: 400; text-align: center}
#footwrap .count_box ul li .num{display: inline-block; width: 106px; text-align: center; color:#d6d6d6}   
#footwrap .count_box ul li:first-child .num{font-weight: 400; color:#ffd144}
/*Admin*/
#footwrap .btn_admin{position: absolute; top:-71px; right:403px}
#footwrap .btn_admin a{display: block; width: 98px; height: 34px; line-height: 34px; border-radius:5px ; background:url(../images/main/icon_admin.png) 8px center no-repeat #5c5c5c; color: #eeeeee; font-size: 14px; font-weight: 400; transition: all .3s}
#footwrap .btn_admin a:hover{ background:url(../images/main/icon_admin_a.png) 8px center no-repeat #ffa92e; color: #fff}
#footwrap .btn_admin a span{margin-left: 45px}
#footwrap .address .add_num{font-weight: 300; width:1130px; margin: 20px auto 20px; text-align: center}
#footwrap .address .add_num dt{display:inline-block;width:62px; height: 20px; line-height: 20px; margin: 0 auto; border-radius: 50px; font-weight: 400}
#footwrap .address .add_num dd{display:inline-block; margin: 0 23px 0 9px; letter-spacing: -1px }
#footwrap .address .add_num dd:last-child{margin-right: 0}
}

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

@media only screen and (min-width:1650px) {
/*Menu FIX*/
.top_bar_fix{position:absolute; top:0; left:0; width:100%; z-index:1000}
.fixed .mainheader_bg{background:none}
#gnb.gnb_fix{position:fixed; top:0; left:0; width:100%; padding-left:0; background:rgba(255,255,255,.9); box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); z-index:1000}
#gnb.gnb_fix ul.gnb_list{width:1200px !important; margin:0 auto}
}


/********* TABLET LAYOUT[Áß°£»çÀÌÁî Á¶Á¤°ü·Ã] *********/
@media only screen and (max-width:1478px) {
/*vr_quick*/
#vr_quick{ display:none}
}
@media only screen and (max-width:1868px) {
/* Poplayer */
.main_openpop{ position: absolute; top:-440px; right:0; width: 100%; z-index:200}
.main_openpop .popup_open a{display:block; position: absolute; top:380px}

}
@media only screen and (min-width:1025px) and (max-width:1365px) {
/*Mainheader */
.header_top .qmenu .qmu_popup{display: block; position: absolute; top:24px; left:145px}

/*Ãѵ¿¹®È¸*/
.qmu_friend{position: absolute; top:24px; left:0}
.qmu_friend a{width: 130px; height: 28px; line-height: 28px; padding: 0; background:url(../images/main/ico_friend.png) no-repeat 2px center #fff; background-image: none}
.qmu_friend a:hover{background:url(../images/main/ico_friend_a.png) no-repeat 5px center #ffb244; background-image: none;}

/* Poplayer */
.main_openpop{ position: absolute; top:-440px; right:0; width: 100%; z-index:200}
.main_openpop .popup_open{display:none}
.qmu_popup a, .openact>a{display: block; width:83px; height:28px}
.qmu_popup a{ background:url(../images/main/btn_layerpop_m.png) 0 0 no-repeat}
.openact>a{background:url(../images/main/btn_layerpop_m_a.png) 0 0 no-repeat}
}
@media only screen and (min-width:1025px) and (max-width:1326px) {
/*Userquick*/ 
#main_userquick{right:10px; width:265px;}
.userqum_wrap{margin: 0}
.userqum_wrap h3 {top:10px; right: -27px; width:35px}
.userqum_wrap h3 a {width:40px; height:84px; border-radius: 0 30px 30px 0}
.userqum_wrap h3 a br{display: block}
.userqum_wrap h3.qmu_tab01 a span{padding-top: 30px}
.userqum_wrap h3 a span{display: block; padding-top:22px; margin-left: -6px}
}
/********* TABLET LAYOUT[Áß°£»çÀÌÁî Á¶Á¤ ³¡] *********/


@keyframes slogun1 {
	0% {opacity: 0; transform: translateY(-50%)}
	10% {opacity: 1; transform: translateY(0)}
	65% {opacity: 1; transform: translateY(0)}
	75% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun2 {
	3% {opacity: 0; transform: translateY(-50%)}
	13% {opacity: 1; transform: translateY(0)}
	68% {opacity: 1; transform: translateY(0)}
	78% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun3 {
	6% {opacity: 0; transform: translateY(-50%)} 
	16% {opacity: 1; transform: translateY(0)}
	71% {opacity: 1; transform: translateY(0)}
	81% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun4 {
	9% {opacity: 0; transform: translateY(-50%)}
	19% {opacity: 1; transform: translateY(0)}
	74% {opacity: 1; transform: translateY(0)}
	84% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun5 {
	12% {opacity: 0; transform: translateY(-50%)}
	22% {opacity: 1; transform: translateY(0)}
	77% {opacity: 1; transform: translateY(0)}
	87% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun6 {
	15% {opacity: 0; transform: translateY(-50%)}
	25% {opacity: 1; transform: translateY(0)}
	80% {opacity: 1; transform: translateY(0)}
	90% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun7 {
	18% {opacity: 0; transform: translateY(-50%)}
	28% {opacity: 1; transform: translateY(0)}
	83% {opacity: 1; transform: translateY(0)}
	93% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun8 {
	21% {opacity: 0; transform: translateY(-50%)}
	31% {opacity: 1; transform: translateY(0)}
	86% {opacity: 1; transform: translateY(0)}
	96% {opacity: 0; transform: translateY(50%)}
}
@keyframes slogun9 {
	24% {opacity: 0; transform: translateX(0)}
	34% {opacity: 1; transform: translateX(0)}
	77% {opacity: 1; transform: translateX(0)}
	87% {opacity: 0; transform: translateX(0)}
}
@keyframes slogun10 {
	27% {opacity: 0; transform: translateX(0)}
	37% {opacity: 1; transform: translateX(0)}
	80% {opacity: 1; transform: translateX(0)}
	90% {opacity: 0; transform: translateX(0)}
}
@keyframes slogun11 {
	30% {opacity: 0; transform: translateX(0)}
	40% {opacity: 1; transform: translateX(0)}
	83% {opacity: 1; transform: translateX(0)}
	93% {opacity: 0; transform: translateX(0)}
}
@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}
@keyframes effect2 {
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-3px)}
}
@keyframes shake {
	0% {
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
	}
	50% {
		transform: translateY(-4px);
		transform: translateY(-4px);
		transform: translateY(-4px);
		transform: translateY(-4px);
		transform: translateY(-4px);
	}
	100% {
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
		transform: translateY(4px);
	}
}