@charset "UTF-8";

#_contentBuilder .main-notice {position: relative; height: 270px; background: #fff; line-height: 1;}
.main-notice > ul {width: calc(100% - 57px);}
.main-notice > ul > li {float: left; width: 33.33%; border-right: 1px solid #fff; box-sizing: border-box;}
.main-notice > ul > li .info {display: none;}
.main-notice > ul > li.on .info {display: block;}
.main-notice > ul > li .more {display: none; position:absolute; right:0; top:0; text-indent:-99999px;  width:57px; height:57px; background:url('../images/board_morebtn.png') no-repeat center center;}
.main-notice > ul > li.on .more {display: block;}


.main-notice > ul > li > button {position: relative; display: block; width: 100%; text-align: center; color: #fff; font-family: 'Noto Light'; font-size:18px; line-height: 57px; background: none;}

.main-notice > ul > li:nth-child(1) button {background-color:#5b7195;}
.main-notice > ul > li:nth-child(2) button {background-color:#2d4160;}
.main-notice > ul > li:nth-child(3) button {background-color:#343949;}

.main-notice > ul > li.on > button {background: #fff; color: #070202;}

.main-notice .info {position: absolute; left: 0; top: 57px; width: 100%; padding: 20px 30px; background: #fff; height: 213px; box-sizing: border-box;}
.main-notice .info  > ul > li {overflow: hidden; padding: 5px 0;}
.main-notice .info .subject {position: relative; float: left; padding-left: 15px; font-size: 15px; font-family: 'Noto Light'; color: #5e5a5a; width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3;}
.main-notice .info .subject:after {content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #2D4160;}
.main-notice .info .date {float: right; font-size: 15px; font-family: 'Noto Light'; color: #5e5a5a;}


@media all and (max-width: 1400px){

}

@media all and (max-width: 1023px){

}

@media all and (max-width: 767px){
  .main-notice .info .subject {width: 100%;}
  .main-notice .info .date {display: none;}
}

@media all and (max-width: 420px){
  
}
