@charset "UTF-8";

.main-notice-title {float: left;  margin-right: 15px}

.main-notice-title p {position:relative; display:inline-block; font-size:24px; letter-spacing: -0.5px; color: #222222; font-family:'S-CoreDream-5Medium'; padding-left: 15px;}
.main-notice-title p::before {content: ""; position: absolute; width: 7px; height: 7px; background: #222222; border-radius: 50%; left: 0; top: 12px;}

.main-notice {position:relative; overflow:hidden;}
.main-notice > ul {position: relative; height: 380px;}
.main-notice > ul > li > .title {float: left; margin-top: 5px;}
.main-notice > ul > li > .title button {position: relative; display: inline-block; font-size: 20px; line-height: 30px; letter-spacing: -0.5px; color: #999999; font-family:'S-CoreDream-5Medium'; padding: 0 15px;}
.main-notice > ul > li > .title button::before {content: ""; position: absolute; display: inline-block; width: 1px; height: 10px; background: #DDDDDD; left: 0; top: 10px;}
.main-notice > ul > li:first-child > .title button::before {display: none;}

.main-notice > ul > li.on > .title button {color: #0b89e1;}

.main-notice .more {position:absolute; right:0; top:13px; text-indent:-99999px;  width:25px; height:25px; background:url('../images/btn_notice_more.png') no-repeat center center;}

.main-notice > ul > li {transition: background 0.3s; background: #fff;}
.main-notice > ul > li.on .list {display: block;}
.main-notice > ul > li .list {display: none; position: absolute; width: 100%; height: 340px; left: 0; top: 40px;}
.main-notice > ul > li a.subject {position: relative; display: block; padding: 15px 0; padding-right: 90px;}
.main-notice > ul > li a.subject::after {content: ""; position: absolute; width: 45px; height: 45px; border-radius: 50%; right: 20px; top: 50%; margin-top: -22.5px; border: 2px solid #DDDDDD; background: url("../images/ic_notice.png") no-repeat center; transition: all 0.3s;}
.main-notice > ul > li .con-date {float: left; padding: 0 4%; width: 120px; text-align: center; box-sizing: border-box;}
.main-notice > ul > li .con-date span.date {display: block; font-size: 36px; line-height: 36px; letter-spacing: -0.5px; color: #9a9a9a; font-family:'Mont Medium';}
.main-notice > ul > li .con-date span.month {display: block; font-size: 13px; line-height: 14px; color: #888888; font-family:'Mont Light';}

.main-notice > ul > li .con-info {float: left; width: calc(100% - 120px);}
.main-notice > ul > li .con-info .title {position: relative; display: inline-block; font-size: 20px; line-height: 25px; letter-spacing: -0.5px; color: #333333; font-family: "Noto DemiLight"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.main-notice > ul > li .con-info .title::after {content: ""; position: absolute; width: 0; height: 1px; background: #333333; left: 0; bottom: 0; transition: width 0.5s;}
.main-notice > ul > li .con-info .content {font-size: 16px; line-height: 20px; letter-spacing: -0.5px; color: #888888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main-notice > ul > li .nodata {text-align: center; padding: 20px 0;}

.main-notice > ul > li ul li {border-bottom: 1px solid #E5E5E5;}

.main-notice > ul > li ul li:hover {background: #F0F7FF;}
.main-notice > ul > li ul li:hover .con-date span.date, .main-notice > ul > li ul li:hover .con-date span.month  {color: #6c7f9f;}
.main-notice > ul > li ul li:hover .con-info .title::after {width: 100%;}
.main-notice > ul > li ul li:hover a.subject::after {border-color: #0B89E1; background: url("../images/ic_notice_on.png") no-repeat center;}

@media all and (min-width:1921px) {

}

@media all and (max-width:1023px) {

}

@media all and (max-width:768px) {
  .main-notice-title {float: none; width: 100%;}
  .main-notice .more {top: -30px;}
  .main-notice > ul > li > .title {}
  .main-notice > ul > li > .title button {font-size: 16px; padding: 0 7px;}
  .main-notice > ul > li .con-date {width: 90px; }
  .main-notice > ul > li .con-date span.date {font-size: 28px; line-height: 32px;}
  .main-notice > ul > li .con-info {width: calc(100% - 90px);}
  .main-notice > ul > li a.subject {padding-right: 0;}
  .main-notice > ul > li a.subject::after {display: none; width: 35px; height: 35px; margin-top: -17.5px;}
}

/*20230509 백그라운드 이미지 alt 값 대신 css로 처리*/
.text-hidden{position: absolute !important; left: -99999px !important; text-indent: -9999px !important;}