@charset "UTF-8";

.wrap-notice{position: relative; min-height:450px;}
.wrap-notice .notice-title-background{width:1000px; height: 477px; background-color: #042e6e; position: absolute; top: 0; left: 50%; margin-left:-1630px;z-index:1;}
.wrap-notice .notice_inner{position: relative; max-width: 1600px; margin: 0 auto; z-index: 2;}
.wrap-notice .notice_inner::after{content:""; display: block; clear: both;}
.wrap-notice .notice_inner .recentBbsTab{}
.wrap-notice .notice_inner .list{width: calc(100% - 266px);  float: right; display: none; padding: 65px 0;}
.wrap-notice .notice_inner .active .list{display: block; min-height:400px;}
.wrap-notice .notice-background{background: url(../images/recentBbs_background.png) no-repeat; width:100%; height: 477px; position: absolute; top: 0; right: 0; background-size: cover;}

.wrap-notice .notice_inner li:nth-child(1) .recent-title{top: 70px;}
.wrap-notice .notice_inner li:nth-child(2) .recent-title{top: 140px;}
.wrap-notice .notice_inner li:nth-child(3) .recent-title{top: 210px;}
.wrap-notice .notice_inner li:nth-child(4) .recent-title{top: 280px;}
.wrap-notice .recent-title{position: absolute; width: 195px; cursor: pointer; background-color: transparent; font-size: 18px; color: white; font-family: 'Noto Light'; text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2);}
.wrap-notice .recent-title p{padding: 11px 0 11px 30px; position: relative;}
.wrap-notice .active .recent-title p{background-color: #007eff; color: white;  position: relative;}
.wrap-notice .active .recent-title p::after{content:""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -4.5px; width: 6px; height: 9px; background: url(../images/title-arrow.png);}
.wrap-notice .recent-title p:hover{background-color: #007eff; color: white;position: relative;}
.wrap-notice .recent-title p:hover::after{content:""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -4.5px; width: 6px; height: 9px; background: url(../images/title-arrow.png);}


.wrap-notice .list li{width: calc(31.4% - 1px); float: left; margin-right: 2.8%; text-align: center; margin-bottom: 35px; position: relative; cursor: pointer; border: 3px solid transparent;}
.wrap-notice .list li:hover{border: 3px solid #0b4da2;}
.wrap-notice .list li:hover::before{content:""; display: block; position: absolute; width: 36px; height: 36px; background: url(../images/link-arrow.png); right: 0; bottom: 0;}
.wrap-notice .list li:nth-child(3n){margin-right: 0;}
.wrap-notice .list li:nth-child(n+4){margin-bottom: 0;}
.wrap-notice .list li .con{height: 150px; display: table; width: 100%;}
.wrap-notice .list li a{background-color: white; display: table-cell; vertical-align: middle; padding: 0 40px;}
.wrap-notice .list li .title{font-size: 20px; color: #333333; font-family: 'Noto DemiLight'; display: block; line-height: 26px; margin-bottom: 15px; height: 52px; overflow: hidden; word-break: break-all;}
.wrap-notice .list li .text{display: none;}
.wrap-notice .list li .date{font-size: 16px; color: #666666; font-family: 'Titillium Web';}
.wrap-notice .list .more a{position: absolute; width: 25px; height: 25px; text-indent: -9999px; left: 60px; bottom: 0px; display: block; background: url(../images/list-more.png) no-repeat center center;}

@media all and (max-width: 1600px) {
	.wrap-notice .notice-title-background{width:165px;left: 0; margin-left:auto;}
}
@media all and (max-width: 1400px) {
	.wrap-notice .recent-title{z-index: 3;}
	.wrap-notice .notice_inner .list{width: calc(100% - 220px);}
}

@media all and (max-width: 1300px) {
  .wrap-notice .list li .title{font-size: 18px; line-height: 22px; height: 44px;}
  .wrap-notice .list li a{padding: 0 20px;}
}

@media all and (max-width: 1024px) {
  .wrap-notice{margin-top: 50px;}
  .wrap-notice .recent-title{font-size: 16px;}
  .wrap-notice .recent-title p{padding: 11px 50px 11px 20px;}
  .wrap-notice .list li .title{font-size: 16px; margin-bottom: 7px;}
  .wrap-notice .list li .date{font-size: 14px;}
}

@media all and (max-width: 768px) {
  .wrap-notice{margin-top: 20px;}
  .wrap-notice .notice-title-background{width: 100%; min-width: auto; height: 92px;}
  .wrap-notice .recent-title{width: 50%; border-bottom: 0; padding-bottom: 0;}
  .wrap-notice .notice_inner li:nth-child(1) .recent-title{top: 0;}
  .wrap-notice .notice_inner li:nth-child(2) .recent-title{top: 0; right: 0;}
  .wrap-notice .notice_inner li:nth-child(3) .recent-title{top: 46px;}
  .wrap-notice .notice_inner li:nth-child(4) .recent-title{top: 46px; right: 0;}
  .wrap-notice .notice_inner .list{width: 100%; float: none; padding: 120px 20px 30px 20px;}
  .wrap-notice .notice_inner .list::after{content:""; display: block; clear: both;}
  .wrap-notice .list li{width: 48%; margin-right: 0;}
  .wrap-notice .list li:nth-child(even){float: right;}
  .wrap-notice .list li:nth-child(n+4){margin-bottom: 35px;}
  .wrap-notice .notice-background{width: 100%; height: 720px;}
  .wrap-notice .list .more a{background-color: #042e6e; bottom: 0; left: auto; right: 50%; width: 35px; height: 35px; margin-right: -17.5px;}
}

@media all and (max-width: 420px) {
  .wrap-notice .recent-title p{padding-right: 30px;}
  .wrap-notice .list li{width: 100%; float: none;}
  .wrap-notice .list li:nth-child(even){float: none;}
  .wrap-notice .notice-background{height: 1300px;}
}

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