@charset "utf-8";

/* Mobile */
.m_content{padding-bottom: 30px;background: url("/images/16_special/main/right_bg.png") no-repeat bottom right;}

.m_content h3{font-family: SEBANG;font-size: 24px;color: #333;}

/*자주찾는링크*/
.mcon.wrap{position:relative;margin: 0 auto;padding: 0 20px;}
.mcon.wrap:before{content:"";display:block;z-index:-1;width:100%;height:500px;position:absolute;background: url("/images/16_special/main/left_bg.png")no-repeat left -279px top;background-size:cover;top: -49px;left: 0;}
.m_quick{margin: 50px 0 40px 0;}
.m_quick .tit{font-family: SEBANG;font-size: 24px;margin-bottom: 50px;color: #333;font-weight: 400;}
.m_quick .tit strong{display: block;font-size: 36px;color: #20409e;}
.m_quick ul::after{content: "";display: block;clear: both;}
.m_quick ul li{float: left;width: 48%;margin: 0 2% 10px 0;border: 1px solid #ddd;border-radius: 10px;background:#fff;}
.m_quick ul li:nth-of-type(2n){margin: 0 0 10px 0;}
.m_quick ul li:hover{border: 1px solid #20409e;border-radius: 10px 30px;box-shadow: 0 10px 15px #ddddddc7;}
.m_quick li a{display: block;text-align: center;word-break: keep-all;padding: 10px 5px;}
.m_quick li:hover span{color: #20409e;}
.m_quick li span{display: block;font-size: 15px;}
.m_quick li span::before{content: "";display: block;width: 60px;height:55px;background: url("/images/16_special/main/quick_i.png")no-repeat center top;margin: 0 auto;}
.m_quick li:first-child span{font-size: 13px;margin-top: 3px;}
.m_quick .li01 span::before{background-position: 0 0;}
.m_quick .li02 span::before{background-position: 0 -67px;}
.m_quick .li03 span::before{background-position: 0 -138px;}
.m_quick .li04 span::before{background-position: 0 -215px;}
.m_quick .li05 span::before{background-position: 0 -288px;}
.m_quick .li06 span::before{background-position: 0 -360px;}

/*공지사항*/
.m_notice{position: relative;margin-bottom: 60px;}
.m_notice>div{margin-top: 20px;}
.m_notice li{margin-bottom: 15px;border: 1px solid #ddd;border-radius: 10px;background: #fff;}
.m_notice li:first-child{border-radius:0 0 10px 10px;border-top:2px solid #20409e;}
.m_notice li:last-child{margin-bottom: 0;}
.m_notice li a{display: block;padding: 15px 20px;overflow:hidden;}
.m_notice li a strong{font-weight: 400;height: 3.0em;overflow: hidden;word-wrap: break-word;display:  -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.m_notice li span{display: block;font-size: 14px;color:#666;font-weight:300;float:right;margin-top:5px;}
.m_notice li:hover{border-radius: 10px 30px;background: url("/images/16_special/main/bbs_go.png")no-repeat right 30px center #20409e;box-shadow: 0 10px 15px #ddddddc7;border: 1px solid #20409e;}
.m_notice li:hover strong{color: #fff;width:80%;}
.m_notice li:hover span{color: #aac0ff;float: left;}
.m_notice li:hover:first-child{border-top: none;}
.more{position: absolute;top: 4px;right: 0;}
.more a{display: block;font-size: 14px;color: #20409e;}
.more a span{display: none;}
.more a::after{display: inline-block;width: 13px;height: 13px;content: "";background: url("/images/16_special/common/cm_ico.png") no-repeat center -71px;margin-left: 8px;}

/*특수교육소식*/
.m_photo{position: relative;margin-bottom: 60px;}
.m_photo>div{margin-top: 20px;}
.m_photo li{margin-bottom: 15px;border: 1px solid #20409e;border-radius: 10px 30px;overflow: hidden;}
.m_photo li a, .m_photo li span{display: block;}
.m_photo li a:focus, .m_photo li span:focus { outline-offset: -2px;}
.m_photo li .img{overflow:hidden;}
.m_photo li img{width: 100%;height: 51.5625vw;}
.m_photo li img:hover{transform: scale(1.1);transition: 1s;}
.m_photo li .txt{padding: 15px 20px;background: #fff;}
.m_photo li .txt strong{font-weight: 500;display: -webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.m_photo li .txt span{font-size: 14px; color: #666;}

/*자료실*/
.m_files{position: relative;}
.m_files>div{margin-top: 20px;}
.m_files li{overflow: hidden;border: 1px solid #ddd;border-radius: 10px;background: #fff;margin-bottom: 15px;}
.m_files li:first-child{border-radius: 0 0 10px 10px; border-top: 2px solid #003668;}
.m_files li a{display: block;padding: 15px 20px;}
.m_files li a:focus { outline-offset: -3px; outline: 2px dashed #fff;}
.m_files li .txt{display: block;margin-bottom: 15px;}
.m_files li strong{display: block;font-weight: 400;display: -webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align: center;}
.m_files li .txt em{display: inline-block;font-style: normal;font-size: 15px;padding: 5px 15px;border-radius:50px;background: #003668;color: #fff;}
.m_files li .txt span{color: #666;font-size: 14px;font-weight: 300;display:block;float: right;margin-top: 5px;}
.m_files li:hover{background: url("/images/16_special/main/bbs_go.png")no-repeat right 20px bottom 15px #003668;border-radius: 10px 30px;box-shadow: 0 10px 15px #ddddddc7;border: 1px solid #003668;}
.m_files li:hover a{color: #fff;}
.m_files li:hover .txt span{color: #8ab5dc;}
.m_files li:hover .txt em{background:#fff;color: #003668;}
.m_files li:hover strong{text-align: left;width: 80%;}
.m_files li:hover:first-child{border-top: none;}

/* Tablet */
@media all and (min-width:768px) {
/*특수교육소식*/
.m_photo>div{overflow: hidden;}
.m_photo li{width: 48.7%;float: left;margin-right: 2%;margin-bottom: 0;}
.m_photo li:nth-child(2){margin-right: 0;}
.m_photo li img{height: 27.4739vw;}
}

/* Desktop */
@media all and (min-width:1023px) {
.menu:before{height: 370px;}
.menu li li a{letter-spacing: -0.1em;}

.m_content{padding-bottom: 0;}
.mcon:after{display: block;clear: both;content: "";}
.mcon>div:after{display: block;clear: both;content: "";}

.mcon.wrap:before{top: 0px;height: 638px;}
.m_quick{float:left;margin-right:40px;width:calc((100% - 40px)/2);margin: 108px 40px 40px 0;}
.m_quick .tit{font-size: 30px;margin-bottom: 100px;}
.m_quick .tit strong{font-size:48px;padding-top: 5px;}
.m_quick ul li{margin-bottom:20px;margin-right: 20px;width: 47.4%;}
    
.m_notice{width:calc((100% - 40px)/2);float:right;margin-top:40px;overflow:hidden;}
    
.m_photo{float: left;overflow:hidden;}
.m_files{float:left;width:100%;margin: 0 0 40px 0;}
}

@media all and (min-width:1200px) {
.m_content:after{content:"";display:block;position:absolute;top: 130px;left: 0px;width:500px;height:738px;z-index:-1;background: url("/images/16_special/main/left_bg.png")no-repeat right -40px bottom;}
.wrap{margin: 0 auto;width: 100%;max-width: 1540px; padding:0; position: relative;}
.mcon.wrap:before{display:none;}
.mcon.wrap{padding:40px 0;}
.m_content h3{font-size:26px;}
.m_quick, .m_notice, .m_photo{width: calc((100% - 180px)/4);margin-right: 60px;float: left;margin-bottom: 0;margin-top: 0;}
.m_files{width: calc((100% - 180px)/4);margin-bottom: 0;}

.m_quick .tit{margin-top: 65px;}
.m_quick ul li{width: 46%;box-sizing: border-box;}
.m_quick ul li:nth-child(5), .m_quick ul li:nth-child(6){margin-bottom: 0;}
.m_quick ul li:nth-of-type(2n){margin: 0 0 20px 0;}
.m_quick li a{padding: 17px 0;}

.m_notice li a strong{font-size:18px;}
.m_notice li{margin-bottom:20px;}
.m_notice li a{padding: 25px 30px;}
.m_notice li a:focus { outline-offset: -3px; outline: 2px dashed #fff;}

.m_photo li{width: 100%;margin-right: 0;box-sizing: border-box;}
.m_photo li:first-child{margin-bottom:20px;}
.m_photo li .img img{height:12.5vw;max-height:201px;}
.m_photo li .txt{padding:15px 30px;}
.m_photo li .txt strong{font-size:18px;}
.m_photo li .txt span{margin-top: 6px;}

.m_files li{margin-bottom:20px;}
.m_files li:last-child{margin-bottom:0;}
.m_files li strong{font-size:18px;height: 50px;}
.m_files li .txt{margin-bottom: 18px;}
}              

/* 번역 */
/* Mobile */
.translated-ltr .m_quick li a {min-height: 148px;}
.translated-ltr .m_notice>div, .m_files>div {margin-top: 40px;}
.translated-ltr .more { top: 45px;}
.translated-ltr .m_photo>div {margin-top: 80px;}
.translated-ltr  .m_photo .more { top: 80px;}


@media all and (min-width:1023px) {
.translated-ltr .m_quick .tit strong {font-size: 33px;}
.translated-ltr .m_photo>div {margin-top: 50px;}
.translated-ltr  .m_photo .more { top: 90px;}
.translated-ltr  .m_files .more {top: 50px;}
}  

@media all and (min-width:1400px) {     
.translated-ltr .m_photo>div {margin-top: 90px;}

}