@charset "utf-8";

/*전체감싸기*/
.wrap-notice{padding: 55px 20px 65px 15px;}
.wrap-notice h2{text-align:center;font-size:35px;font-family:'Noto Medium';line-height:1;padding-bottom:35px;}
.wrap-notice h2:before,
.wrap-notice h2:after{content:"";display:inline-block;width:11px;height:11px;border-radius:30px;margin:0 20px;background:#2067e9;vertical-align:8px;}
/*게시판*/
.wrap-notice > ul{word-break:break-all;max-width:1400px;margin: 0 auto;}
.wrap-notice > ul > li{
    position: relative;
}
/*타이틀*/
.wrap-notice .title{font-size: 30px;font-family: 'Noto Bold';}
/*목록*/
.wrap-notice .list{border-top:3px solid #0c0c0c;margin-top: 10px;}
.wrap-notice .list ul{font-size:0}
.wrap-notice .list ul li{display:inline-block;vertical-align:top;font-size: 17px;border-bottom: 1px solid #e2e2e2;position: relative;width: 100%;}
.wrap-notice .list ul li:first-child{margin-left:0;}
/*noData*/
.wrap-notice .list ul li.nodata{font-size:18px;text-align:center;padding:60px 0;width:100%;}
/*썸네일*/
.wrap-notice .thumb{display:none}
.wrap-notice .thumb img{}
/*제목*/
.wrap-notice .con{}
.wrap-notice  .list ul li:hover{background-color: rgba(230,225,235, .5);}
.wrap-notice .con a{display:block;position:relative;color:#333;line-height:1.3;padding: 13px 0;width: 80%;}


.wrap-notice .con strong{color:#444;display: block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.wrap-notice .con p{display: none;}
.wrap-notice .con p.day_first,
.wrap-notice .con p.month_first{display: none;}
.wrap-notice .con p.common_date{display: block;}

.wrap-notice .list ul li:nth-child(1){padding:21px 0;}
.wrap-notice .list ul li:nth-child(1) a{width:90%;}
.wrap-notice .list ul li:nth-child(1) .con{padding-left: 17%;}
.wrap-notice .list ul li:nth-child(1) .con strong{font-size: 20px;color:#333;font-family: 'Noto Medium';display: block;margin-bottom: 10px;padding-left: 20px;background:url('../images/new_icon.png') no-repeat left center;}
.wrap-notice .list ul li:nth-child(1) .con p{display: block;height: 46px;overflow: hidden;width: calc(100% + 35px);font-size: 16px;line-height: 1.6;font-family: 'Noto Light';}
.wrap-notice .list ul li:nth-child(1) .date{right:unset;top: 30px;left:0;width: 70px;text-align: center;}
.wrap-notice .list ul li:nth-child(1) .date p.common_date{display: none;width: auto;}
.wrap-notice .list ul li:nth-child(1) .date p.day_first{font-size:44px;color:#333;font-family: 'Noto Bold';line-height: 44px;margin-left:5px;width: auto;}
.wrap-notice .list ul li:nth-child(1) .date p.month_first{font-size:16px;color:#828282;font-family: 'Noto Medium';line-height: 16px;width: auto;margin-left: 5px;letter-spacing: 0.5px;}

.wrap-notice .subjectText{display:block;font-family:'Noto Regular';height:50px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;padding-left:70px;}
/*내용*/
.wrap-notice .content{display:block;margin-top:15px;font-size:15px;height:60px;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;padding-left:70px;}
/*날짜*/
.wrap-notice .date{display:block;font-size: 17px;color: #666;line-height:1;font-family: 'Noto Light';position:absolute;right: 15px;top: 15px;}
.wrap-notice .date i{display:block;font-style:normal;font-size:40px;position:absolute;top:0;}
/*더보기*/
.wrap-notice a.more{display:block;position: absolute;top: 20px;right: 0px;padding-right: 15px;background:url('../images/plus_icon.png') no-repeat right center;}
/*활성화*/
.wrap-notice > ul > li.active .list,
.wrap-notice > ul > li.active a.more{display:block}

@media only screen and (max-width:1400px){
}
@media only screen and (max-width:1024px){
.wrap-notice .list ul li:nth-child(1) .con{padding-left:20%;}
.wrap-notice .list ul li:nth-child(1) .con strong,
.wrap-notice .list ul li:nth-child(1) .con p{width:80%;}
}
@media only screen and (max-width:768px){
  .wrap-notice{padding:25px 25px 40px;}
  .wrap-notice .list{margin-top:0;}
  .wrap-notice .list ul li:nth-child(1) .con{padding-left:90px;}
  .wrap-notice .list ul li:nth-child(1) .con strong, .wrap-notice .list ul li:nth-child(1) .con p{width:100%;}
}
@media only screen and (max-width:480px){
	.wrap-notice .title{font-size:22px;}
  .wrap-notice a.more{top:5px;}
  .wrap-notice .list ul li:nth-child(1){padding:10px 0;}
  .wrap-notice .list ul li:nth-child(1) .con{padding-left: 80px;}
  .wrap-notice .list ul li:nth-child(1) .date p.day_first{font-size:38px;}
  .wrap-notice .list ul li:nth-child(1) .date p.month_first{font-size:14px;}
}
