@charset "utf-8";

.wrap_notice{word-break:break-all;background:#e2ecff;padding:35px;}

/*게시판*/
.wrap_notice > ul{display:flex;justify-content:flex-start;align-contents:center;}
.wrap_notice > ul > li{}
/*타이틀*/
.wrap_notice .title{margin-right:20px;display:flex;justify-content:flex-start;align-items:center;}
.wrap_notice .title a{display:inline-block;font-size:26px;font-family:'Noto Medium';line-height:1;color:#888;}
.wrap_notice > ul > li.active .title a{color:#012e80 !important;}

/*목록*/
.wrap_notice .list{position:absolute;top:90px;left:0;width:100%;padding:0 35px;}
.wrap_notice .list ul{}
.wrap_notice .list ul li{width:100%;}
/*noData*/
.wrap_notice .list .nodata{font-size:18px;text-align:center;padding:30px 0;width:100%;}
/*썸네일*/
.wrap_notice .thumb{display:none;}
.wrap_notice .thumb img{}
/*컨텐츠*/
.wrap_notice .con{}
.wrap_notice a.subject{display:flex;justify-content:space-between;padding:20px 0;position:relative;font-size:18px;line-height:1;font-family:'Noto Light';border-bottom:1px solid #c0c9d9;}
/*제목*/
.wrap_notice .subjectText{position:relative;width:calc(100% - 90px);}
.wrap_notice .subjectText::after{content:"";display:block;width:0;height:10px;background:#c0d0ec;margin-top:-7px;}
.wrap_notice .subjectText span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/*내용*/
.wrap_notice .content{display:none;}
/*날짜*/
.wrap_notice .date{text-align:right;width:90px;color:#666;font-size:16px;}
/*더보기*/
.wrap_notice .more{text-indent:-9999px;position:absolute;right:25px;top:33px;width:30px;height:30px;background:url(../images/more.png) center no-repeat;}
/*활성화*/
.wrap_notice .list,
.wrap_notice .more{display:none}
.wrap_notice > ul > li.active .list{display:block}
.wrap_notice > ul > li.active .more{display:inline-block}

@media only screen and (max-width:768px){
	.wrap_notice{padding:25px;}
	.wrap_notice .title a{font-size:20px;}
	.wrap_notice .list{padding:0 25px;top:60px;}
	.wrap_notice a.subject{font-size:16px;}
	.wrap_notice .more{right:20px;top:21px;}
}
@media only screen and (max-width:420px){
	.wrap_notice .title{margin-right:10px;}
	.wrap_notice .subjectText{width:100%;}
	.wrap_notice .date{display:none;}
}


/*HOVER****************************************/
@media only screen and (min-width:1281px){
	.wrap_notice a.subject:hover .subjectText::after{width:100%;transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);}
}