@charset "utf-8";

.wrap_notice{height:100%;padding-bottom: 53rem;}

/*게시판*/
.wrap_notice {z-index: 2;}
.wrap_notice > ul{display:flex;}
.wrap_notice > ul > li {margin-right: 5rem;}
.wrap_notice > ul > li:last-child {margin-right: 0;}


/*타이틀*/
.wrap_notice .title{display:flex;align-items:center;}
.wrap_notice .title a{position: relative;font-family:pr;font-size:3rem;color:#222;line-height:1;padding:2px 0;}
.wrap_notice .title a::after {content: '';position: absolute;right: -2.5rem;top: 50%;width: .5rem;height: .5rem;margin-top: -.25rem;background: #a1a1a1;}
.wrap_notice > ul > li:last-child .title a::after {display: none;}


/*목록*/
.wrap_notice .list{position:absolute;top: 7.2rem;left:0;width:100%;}
.wrap_notice .list ul{display:flex;flex-wrap:wrap;}
.wrap_notice .list ul li{position: relative;width: calc((100% / 3) - 2rem);margin-right: 3rem;margin-bottom: 3rem;background: #fff;border-radius: 2rem;overflow: hidden;border: 1px solid #f0f0f0}
.wrap_notice .list ul li:nth-child(3n) {margin-right: 0;}
.wrap_notice .list ul li.top-notice::before {content: '';position: absolute;right: 3rem;bottom: 2.5rem;width: 4rem;height: 4rem;background: #1d398d url(../images/ic-notice.png) no-repeat center / 2.2rem;border-radius: 50%;}

/*noData*/
.wrap_notice .list .nodata{font-size:18px;color:#000;text-align:center;padding:50px 0;width:100%;}

/*링크*/
.wrap_notice a.subject{display:block;padding: 3.4rem 3.5rem 3rem;}

/*썸네일*/
.wrap_notice .thumb{display:none;}
.wrap_notice .thumb img{}

/*컨텐츠*/
.wrap_notice .con{}

/*제목*/
.wrap_notice .subjectText{margin-bottom: 3rem;line-height:1.5;height:6.5rem;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;font-size:2rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: #000;}
.wrap_notice .subjectText span {background: linear-gradient(to bottom, transparent 92%, #1d398d 0) left center no-repeat;background-size: 0;transition: background-size .5s;font-family: pmGov;font-size:2rem;color:#000;}
.wrap_notice a.subject:hover .subjectText span {background-size: 100% auto;color: #1d398d;}

/*내용*/
.wrap_notice .content{display: none;font-size:17px;color:#666;line-height:1.5;height:50px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;margin:30px 0;}

/*날짜*/
.wrap_notice .date{font-size:1.4rem;color:#aaa;}

/*더보기*/
.wrap_notice .more{position: absolute;right: 0;top: 0;display:block;width: 3rem;height: 3rem;line-height:1;background: url(../images/ic-plus.png) no-repeat center / 1.7rem;transition: .35s ease-in-out;text-indent: -9999px;}
.wrap_notice .more:hover {transform: rotate(180deg);}
.wrap_notice .more span{display:none;}

/*꾸미기*/
.wrap_notice .readMore{display:none;}

/*활성화*/
.wrap_notice .list,
.wrap_notice .more{display:none}
.wrap_notice > ul > li.active .list,
.wrap_notice > ul > li.active .more{display:block}
.wrap_notice > ul > li.active .title a{font-family:pb;color:#1d398d;}
.wrap_notice > ul > li.active .title::after{opacity:1;}

/*CONTROL*/
.wrap_notice .control{display:none;}

/*HOVER*/

@media screen and (max-width: 1400px) {
    .wrap_notice .list ul li {width: calc((100% / 3) - 1rem);margin-right: 1.5rem;margin-bottom: 1.5rem;}
    
    /*공지사항 아이콘 임시로 붙이기(나중에 클래스명붙으면 생기는걸로 바꿀예정)*/
    .wrap_notice .list ul li:first-child::before {right: 1.5rem;width: 3rem;height: 3rem;background-size: 1.8rem;}
}

@media screen and (max-width: 1024px) {
    .wrap_notice {padding-bottom: 49rem;}
    .wrap_notice a.subject {padding: 1.4rem 2rem 1.7rem;}
    .wrap_notice .list ul {flex-direction: column;}
    .wrap_notice .list ul li {width: 100%;margin-bottom: 1rem;margin-right: 0;}
    .wrap_notice .list ul li:nth-child(n+5) {display: none;}
    .wrap_notice .subjectText {height: auto;margin-bottom: .8rem;-webkit-line-clamp: 1;}

    /*공지사항 아이콘 임시로 붙이기(나중에 클래스명붙으면 생기는걸로 바꿀예정)*/
    .wrap_notice a.subject {padding: 1.4rem 4rem 1.7rem 2rem;}
    .wrap_notice .list ul li:first-child::before {bottom: 1rem;right: 1rem;}
}

@media screen and (max-width:768px) {
    .wrap_notice {padding-bottom: 49rem;}
    .wrap_notice .title a {font-size: 2.6rem;}
    .wrap_notice .list {top: 6rem;}
    .wrap_notice > ul > li {margin-right: 4rem;}
    .wrap_notice .title a::after {right: -2.3rem;margin-top: -.3rem;}
}