@charset "UTF-8";

#_contentBuilder .main-notice {position: relative; height: 424px; 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: 5px; text-indent:-99999px; width: 35px; height: 35px; background:url('../images/plus.png') no-repeat center center/contain; transition: 0.3s ease-in-out;}
.main-notice > ul > li .more:hover {transform: rotate(90deg);}
.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: 53px; background: none; transition: background-color 0.3s ease-in-out; border-radius: 15px 15px 0 0; font-weight: bold; border-top: 4px solid transparent;}

.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: #f2f5f9; color: #070202; border-color: #2d4160;}

.main-notice .info {position: absolute; left: 0; top: 57px; width: 100%; padding: 25px 30px; background: #f2f5f9; height: calc(100% - 57px); box-sizing: border-box; overflow: auto; border-bottom: 2px solid #a0a9ad;}
.main-notice .info  > ul > li {overflow: hidden; padding: 5px 0;}
.main-notice .info .subject {position: relative; float: left; padding-left: 15px; font-size: 16px; font-family: 'Noto Light'; /*color: #5e5a5a;*/ width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; transition: color 0.3s ease-in-out;}
.main-notice .info .subject:after {content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #2D4160;}
.main-notice .info .date {float: right; font-size: 16px; 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 > ul > li {width: 50%;}
  .main-notice .info .subject {width: 100%;}
  .main-notice .info .date {display: none;}
}
@media (max-width: 550px) {
  .main-notice > ul > li > button {line-height: 44px; border-radius: 10px 10px 0 0; font-size: 16px;}
  .main-notice .info {top: 48px;}
}
@media all and (max-width: 420px){
  
}