@charset "utf-8";

#mcontainer{margin-top:-110px;}

/* 공통 */
section{position:relative;}
section h2:before{display:none;}
h3, p, a, span{font-family:'nsr', sans-serif}
.ir-able{display:inline-block;background: url(/images/able/main/ir.png) no-repeat}
.ir-rcon{display:inline-block;background: url(/images/able/main/ir.png) no-repeat}

/* 메뉴박스 */
section .menu-box{position:absolute;left:0;bottom:0;width:100%;background:url(/images/able/main/shadow_bg.png);}
section .menu-box ul{padding:0 60px;}
section .menu-box ul:after{display:block;content:"";clear:both;visibility:hidden;}
section .menu-box ul li{float:left;width:16.6%;text-align:center;}
section .menu-box ul li a{display:inline-block;padding:20px 0;color:#fff;font-size:15px;font-weight:600;}
section .menu-box ul li a:hover,
section .menu-box ul li a:active,
section .menu-box ul li a:focus{text-decoration:underline;}

section .menu-box ul li a .ico{display:inline-block;margin-right:8px;width:25px;height:25px;background:#efefef;border-radius:50%;vertical-align:middle;}

@media only screen and (max-width:1023px) {
	section .menu-box ul{padding:0;}
}

@media only screen and (max-width:767px) {
	section .menu-box ul li{width:33.3%;}

}

@media only screen and (max-width:459px) {
	section .menu-box ul li{width:50%;}
}


/* 메인비주얼 */
#section1{height:525px;background:url(/images/able/main/mvisual_img.png) 50% 50%;background-size:cover;color:#fff;text-align:center;}
#section1 h2{padding:160px 0 40px 0;}
#section1 .sub_tit div{line-height:69px;}
#section1 .sub_tit div div{display:inline-block;}
#section1 .sub_tit div,
#section1 .sub_tit div em{font-family:'nmg';font-size:56px;}
#section1 .sub_tit div em{color:#e2e02b;}
#section1 .sub_tit span{font-size:18px;}

@media only screen and (max-width:1023px) {
	#section1 .sub_tit div,
	#section1 .sub_tit div em{font-size:35px;line-height:40px;}
	#section1 .sub_tit span{display:inline-block;margin-top:10px;font-size:16px;line-height:20px;}
}


/*@media only screen and (max-width:639px) {
	#section1{height:640px;}
}*/

@media only screen and (max-width:459px) {
	#section1{height:465px}
	#section1 .sub_tit span em{display:block;}
	#section1 .sub_tit div, #section1 .sub_tit div em {font-size: 25px;line-height: 33px;}
	#section1 .sub_tit span {font-size: 14px;}

}





/* 게시판박스 */
#section2,#section3{padding:50px 0 180px 0;background-color:#f5f5f5;}

#section2 .story{position:relative;transition:height 300ms ease-in-out;-webkit-transition:height 300ms ease-in-out}
#section2 .story:after{content:"";display:block;clear:both;visibility:hidden}
#section2 .story h2{margin-top:0}
#section2 .story .item{
width:100%;margin-bottom:20px;background-color:#fff;border:1px solid #ddd;
transition:left 0.3s ease-in-out,top 0.3s ease-in-out ;
-webkit-transition:left 0.3s ease-in-out,top 0.3s ease-in-out;
}
#section2 .story .item a{display:block;}
#section2 .story .item .img_box{position:relative;padding-top:57.5%;background-color:#fafafa;text-align:center}
#section2 .story .item .img_box .img_wrap{position:absolute;left:0;right:0;top:0;width:100%;height:100%;}
#section2 .story .item .img_box .img_wrap img{max-width:none;width:100%;height:100%;}

#section2 .story .item .img_box .ov ul{position:absolute;top:50%;left:0;margin-top:-20px;width:100%}
#section2 .story .item .img_box .ov ul li{display:inline-block;margin:0 3px}
#section2 .story .item .img_box .ov ul li .s7_ico{width:40px;height:41px;font-size:0;line-height:0}
#section2 .story .item .text_box{position:relative;padding:20px}
#section2 .story .item .text_box span{font-size:14px;color:000;opacity:0.7;}
#section2 .story .item .text_box .new{position:absolute;top:0;right:30px;padding:8px 0px 18px;width:33px;height:35px;background-position:-80px 0;color:#fff5a0;font-size:9px;font-weight:bold;line-height:1;text-align:center}
#section2 .story .item .text_box h3{margin:5px 0 10px;color:#000;font-size:22px;line-height:26px}
#section2 .story .item .text_box a{display:block;margin-bottom:10px;color:#333;font-size:15px;font-weight:bold;line-height:20px;text-align:justify;word-break:break-all}
#section2 .story .item .text_box p{margin:0;color:#8e8e8e;font-size:14px;line-height:18px;text-align:justify;word-break:break-all;}
#section2 .story .item .info_box{border-top:1px solid #ddd}
#section2 .story .item .info_box:after{content:"";display:block;clear:both;visibility:hidden}
#section2 .story .item .info_box li{float:left;padding:15px 0;width:50%;font-size:13px;line-height:1;text-align:center}
#section2 .story .item .info_box li:first-child{border-right:1px solid #ddd}
#section2 .story .item .info_box li .s7_ico{display:inline-block;margin-right:5px;width:14px;height:13px;font-size:0;line-height:0;vertical-align:middle}
#section2 .story .item .info_box li .s7_ico.st_ico4{height:15px}
#section2 .story .item .info_box li .s7_ico.st_ico16{width:17px;height:12px}
#section2 .story .item .top5{margin-bottom:10px}
#section2 .story .item .top5 h2{margin:0;padding:15px 0;background-color:#ef4030;color:#fff;font-size:15px;line-height:20px;text-align:center}
#section2 .story .item .s7_ico{display:inline-block;width:75px;height:20px;font-size:0;line-height:0;vertical-align:middle;font-size:0;line-height:0;vertical-align:middle}
#section2 .story .item .top5 ul{}
#section2 .story .item .top5 ul li{padding:15px;background-color:#fff;border-top:1px solid #ddd}
#section2 .story .item .top5 ul li:first-child{background-color:#f9f9f9}
#section2 .story .item .top5 ul li a{display:block;position:relative;overflow:hidden;height:40px;padding-left:25px;line-height:20px}
#section2 .story .item .top5 ul li a span{display:block;position:absolute;top:0;left:0;width:19px;height:19px;background-color:#9b9b9b;border-radius:100%;color:#fff;line-height:19px;text-align:center}
#section2 .story .item .top5 ul li:first-child span{background-color:#ef4030}
#section2 .story .item .hashtag{padding:15px;background-color:#fff}
#section2 .story .item .hashtag h3{margin:0 0 10px;color:#333;font-size:18px}
#section2 .story .item .hashtag ul{padding:10px;background-color:#f9f9f9}
#section2 .story .item .hashtag ul li{display:inline-block}


@media only screen and (min-width:480px) {
	#section2 .story .item{float:left;margin:0 0 2% 2%;width:48%}
}

@media only screen and (min-width:768px) {
	#section2 .story .item{width:31.33%}
}


@media only screen and (min-width:1200px) {
	#section2 .story .item{width:23%}
}


/* ov 경우 */
#section2 .story .item:hover .text_box,
#section2 .story .item:active .text_box,
#section2 .story .item:focus .text_box,
#section2 .story .item.ov .text_box{background-color:#2e679c;color:#fff;}

#section2 .story .item:hover .text_box h3,
#section2 .story .item:active .text_box h3,
#section2 .story .item:focus .text_box h3,
#section2 .story .item.ov .text_box h3{color:#fff;}

#section2 .story .item:hover .text_box p,
#section2 .story .item:active .text_box p,
#section2 .story .item:focus .text_box p,
#section2 .story .item.ov .text_box p{color:#fff;opacity:0.7;}

/* 텍스트 없는 경우 */
#section2 .story .item.no-txt .text_box p{display:none;}

/* 이미지 없는 경우 */
#section2 .story .item.no-img .text_box h3{margin:20px 0;}
#section2 .story .item.no-img .img_box{display:none;}


/* 더보기, 탑버튼 */
#section2 .btn-box{position:absolute;left:0;bottom:80px;width:100%;text-align:center;}
#section2 .btn-box a{display:inline-block;height:50px;line-height:50px;font-size:18px;color:#fff;text-align:center;vertical-align:middle;}
#section2 .btn-box a.btn_more{width:300px;background:#9e252e url(/images/able/main/arr_bottom_ico.png) no-repeat 90% 50%;}
#section2 .btn-box a.btn_top{width:50px;background:#c4c4c4 url(/images/able/main/arr_top_ico.png) no-repeat 50% 50%;;font-size:0;}

@media only screen and (max-width:459px) {
	#section2 .btn-box a.btn_more{padding-right:15px;width:120px;}
}

/*생활관안내*/
#section3 .sc_ir{background:url(/images/able/main/able_ir.png) no-repeat}
#section3 .col_group .col2 .mnotice{background:url(/images/able/main/able_activity_img.jpg) no-repeat}

#section3 .col_group{overflow:hidden;position:relative;width:100%}
#section3 .col_group .col{float:left;position:relative;width:32%;margin:0 0 2% 2%;border:1px solid #ddd;background:#fff}
#section3 .col_group .col:first-child{margin-left:0}
#section3 .col_group .col .inner{position:relative;height:284px;padding:30px 50px}

#section3 .col_group .col.col3 .inner{position:relative;padding:10px 40px}

#section3 .col_group h3{height:56px;margin:0 auto;line-height:56px;color:#fff;text-align:center}

#section3 .col_group .col1 h3{background-color:#711d1e}
#section3 .col_group .col2 h3{background-color:#94886c}
#section3 .col_group .col3 h3{background-color:#1a244a}

#section3 .col_group .mnotice h4{margin:0 0 15px;font-size:20px;font-weight:600}
#section3 .col_group .mnotice .title{font-size:18px;color:#333}
#section3 .col_group .mnotice .text,#section3 .col_group .mnotice .info{color:#666}
#section3 .col_group .mnotice .text{margin:15px 0}
#section3 .col_group .mnotice .text em{display:block}
#section3 .col_group .mnotice .inner .more{position:absolute;top:35px;right:40px;left:auto;width:19px;height:19px;background-position:-15px -234px;font-size:0}
#section3 .col_group .mnotice .inner .item .info .date .day{display:inline-block;width:19px;height:21px;margin-right:5px;background-position:-14px -199px;vertical-align:middle}

#section3 .col_group .minfo .inner{width:74%;margin:0 auto;padding:50px 0;border-top:1px solid #ddd}
#section3 .col_group .minfo .inner ul li{float:left;width:50%}
#section3 .col_group .minfo .inner ul li a{display:block;margin-bottom:30px;font-size:14px;line-height:16px;letter-spacing:-1px;text-align:center;}

/* .col2 */
#section3 .col_group .col2 .mnotice .btn_wrap{margin-top:18px}
#section3 .col_group .col2 .mnotice .btn_wrap a{display:block;width:197px;margin-top:5px;padding:15px 22px;border:1px solid #ddd;background-color:#fff;font-size:18px}
#section3 .col_group .col2 .mnotice .btn_wrap a:first-child{margin-top:0}
#section3 .col_group .col2 .mnotice .btn_wrap a .btn_icon{display:inline-block;width:28px;height:22px;margin-left:20px;background-position:-11px -267px;vertical-align:middle}


/* .col3 */
#section3 .col_group .col3 .mnotice ul li{width:100%;border-top:1px solid #ddd}
#section3 .col_group .col3 .mnotice ul li:first-child{border-top:none}
#section3 .col_group .col3 .mnotice ul li .item{display:block;width:244px;margin:15px auto;font-size:18px;line-height:60px;letter-spacing:-1px}
#section3 .col_group .col3 .mnotice ul li .item .icon{display:block;float:left;width:60px;height:60px;margin-right:20px;border-radius:50px;background-color:#767c92}
#section3 .col_group .col3 .mnotice ul li .item .icon.icon1{background-position:-35px 8px}
#section3 .col_group .col3 .mnotice ul li .item .icon.icon2{background-position:-39px -37px}
#section3 .col_group .col3 .mnotice ul li .item .icon.icon3{background-position:8px -135px}

#section3 .col_group .col3 .mnotice ul li .item .btn{display:inline-block;right:-24px;width:28px;height:22px;border-color:#fff;background-position:-11px -267px;vertical-align:middle}
#section3 .col_group .col3 .mnotice ul li .item .btn.btn3{right:-16px;}

@media(max-width:960px){
#section3 .col_group .col{width:100%}
#section3 .col_group .col{float:none;margin-left:0}
#section3 .col_group .col2 .mnotice{background-position:right}
#section3 .col_group .col3 .mnotice ul li .item .btn{display:inline-block;right:-15px;}
#section3 .col_group .col3 .mnotice ul li .item .btn.btn3{right:-5px;}
}

#section2 .content-1-3{clear:both;padding-top:280px}
.content-1-3 ul .info{overflow:hidden;float:left;position:relative;width:25%;height:188px}
.content-1-3 ul .info a{display:block;width:100%;height:100%;padding:25px;border:1px solid #ddd;border-left:0;background-color:#fff}

.content-1-3 ul .info a:hover,.content-1-3 ul .info a:focus{border-color:#212a3d;background-color:#212a3d}

.content-1-3 ul .info a:hover h2,.content-1-3 ul .info a:focus h2{color:#fff}

.content-1-3 ul .info a:hover p,.content-1-3 ul .info a:focus p{line-height:21px;color:#fff;opacity:0.7}

.content-1-3 ul .info a:hover .more,.content-1-3 ul .info a:focus .more{color:#fff}
.content-1-3 ul .info h2{margin-top:0;font-size:21px;color:#000;transition:all 300ms ease-out}
.content-1-3 ul .info h2:before{display:none}
.content-1-3 ul .info p{font-size:14px;color:#6c6c6c;transition:all 300ms ease-out}
.content-1-3 ul .info .more{position:absolute;bottom:30px;color:#6c6c6c}
.content-1-3 ul .info .more:before{display:inline-block;width:9px;height:9px;margin-right:5px;background:url(/images/edulife/main/ir.png)no-repeat;background-position:-280px 0;content:''}
.content-1-3 ul .info .ir-rcon{display:block;position:absolute;right:30px;bottom:30px;transition:all 300ms ease-out}
.content-1-3 ul .info .rco1{width:44px;height:44px;background-position:0 -52px}
.content-1-3 ul .info .rco2{width:36px;height:47px;background-position:-63px -51px}
.content-1-3 ul .info .rco3{width:37px;height:46px;background-position:-116px -52px}
.content-1-3 ul .info .rco4{width:37px;height:41px;background-position:-169px -52px}
.content-1-3 ul .info .rco5{width:46px;height:35px;background-position:-219px -52px}
.content-1-3 ul .info .rco6{width:54px;height:34px;background-position:-279px -51px}
.content-1-3 ul .info .rco7{width:40px;height:44px;background-position:-348px -51px}

/* .content-1-3 ul .info1{background-color:#212a3d;border-color:#212a3d}
.content-1-3 ul .info1 h2{color:#fff}
.content-1-3 ul .info1 p{line-height:21px;color:#fff;opacity:0.7}
.content-1-3 ul .info1 .more{color:#fff}
.content-1-3 ul .info1 .more:before{background-position:-264px 0} */
.content-1-3 ul .info1 p .yt{color:#ffba00}

.content-1-3 ul .info5 a,.content-1-3 ul .info6 a,.content-1-3 ul .info7 a,.content-1-3 ul .info8 a{border-top:0}
.content-1-3 ul .info1 a,.content-1-3 ul .info5 a{border-left:1px solid #ddd}

.content-1-3 ul .info:hover h2{margin-top:-10px;margin-left:-10px}
.content-1-3 ul .info:hover p{margin-top:-5px;margin-left:-10px}
.content-1-3 ul .info:hover .ir-rcon{right:10px;bottom:10px}

@media(max-width:1024px){
.content-1-3 ul .info{width:50%}
.content-1-3 ul .info1 a,.content-1-3 ul .info2 a{border-bottom:0}
}

@media(max-width:480px){
.content-1-3 ul .info{width:100%}
.content-1-3 ul .info2,.content-1-3 ul .info3,.content-1-3 ul .info4{border-top:0}
}


