@charset "UTF-8";

.main-recent-notice {position:relative; overflow:hidden; padding-top: 45px; margin-right: 5%;}

.recent-notice-title p {font-size: 35px; line-height: 40px; letter-spacing: -0.5px; color: #000200; margin-bottom: 20px;}

.recent-notice-wrap {position: relative; height: 363px;}
.recent-notice-wrap .notice-title {position: relative; float: left; font-size: 36px; line-height: 40px; font-family: "TitilliumWeb-SemiBold"; letter-spacing: -0.25px; color: #004e96; }
.recent-notice-wrap > ul {float: left;}
.recent-notice-wrap > ul > li {float: left;}
.recent-notice-wrap > ul > li .list {display: none;}
.recent-notice-wrap > ul > li.on .list {display: block; border-top: 0;}
.recent-notice-wrap > ul > li .more {display: none; position: absolute; right: 13px; width: 21px; height: 21px; text-indent:-99999px; background:url('../images/btn_news_more.png') no-repeat center center;}
.recent-notice-wrap > ul > li.on .more {display: block;}


.main-recent-notice .title {float: left; position:relative; padding: 0 40px;}
.main-recent-notice .title::before {content: ""; position: absolute; left: 0; top: 50%; margin-top: -7.5px; width: 1px; height: 15px; background: #BFBFBF;}
.main-recent-notice .recent-notice-wrap > ul > li:first-child .title::before {display: none;}

.main-recent-notice .title button {position: relative; display: inline-block; font-size: 22px; color: #3a3a3a; font-family: "Noto Regular"; outline: none;}
.main-recent-notice .title button::after {content: ""; position: absolute; width: 0; height: 2px; background: #2C53B0; left: 0; bottom: -5px; transition: width 0.5s; }
.recent-notice-wrap > ul > li.on .title button, .main-recent-notice .title button:hover {color: #1648a1;}
.recent-notice-wrap > ul > li.on .title button::after, .main-recent-notice .title button:hover::after {width: 100%;}


.main-recent-notice .list {position: absolute; left: 0; top: 83px; height: 210px; padding: 0 20px; width: 100%;}
.main-recent-notice .list ul {margin: 0 -0.5%;}
.main-recent-notice .list .nodata {text-align: center; padding: 20px 0;}
.main-recent-notice .list li {position: relative; float: left; width: 33.33%; box-sizing: border-box; padding: 0 0.5%;}
.main-recent-notice .list li .newArtcl {position: absolute; width: 45px; height: 45px; background: #EF6019; border-radius: 50%; left: -13px; top: -20px; font-family: "Noto Medium"; color: #fff; font-size: 12px; line-height: 45px; text-align: center; z-index: 5; box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.2);}

.main-recent-notice .con {position:relative; display: block; width: 100%; background: #fff; border: 1px solid #B4B4B4; box-sizing: border-box; padding: 20px 9%;}
.main-recent-notice .con a {display: block;}
.main-recent-notice .con::after {content: ""; position: absolute; width: calc(100% + 2px); height: calc(100% + 2px); left: -1px; top: -1px; border: 4px solid #C9D4DC; opacity: 0; transition: opacity 0.3s;}
.main-recent-notice .con:hover::after {opacity: 1;}

.main-recent-notice .con-title {font-size: 0;}
.main-recent-notice .con-title span {position: relative; display: block; font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #2a2d40; word-break: break-all; height: 60px; overflow: hidden; font-family: "Noto DemiLight"; margin-bottom: 10px;}
.main-recent-notice .con-info {font-size: 16px; line-height: 24px; letter-spacing: -0.5px; color: #666666; height: 48px; overflow: hidden;  }
.main-recent-notice .date {display: block; font-size: 13px; line-height: 13px; color: #b5b5b5; font-family: "Noto Regular"; text-align: right; padding-top: 15px; margin-top: 15px; border-top: 1px solid #ECEFF2;}
.main-recent-notice .con-more {display: inline-block; font-family: "TitilliumWeb-SemiBold"; font-size: 18px; letter-spacing: -0.5px; color: #000000; padding-right: 25px; padding-bottom: 10px; border-bottom: 1px solid #3A3A3A; background: url("../images/ic_more_arrow.png") no-repeat right 9px;}


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

}

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

	.main-recent-notice {margin-right: 0;}
	.recent-notice-wrap {height: 313px;}
	.recent-notice-wrap .notice-title {float: none; font-size: 30px;}
	.recent-notice-wrap > ul {float: none; margin: 15px 0;}
	.recent-notice-wrap > ul > li:first-child .title {padding-left: 0;}
	.recent-notice-wrap > ul > li .more {top: 10px; right: }

	.main-recent-notice .title {padding: 0 20px;}
	.main-recent-notice .title button {font-size: 1.8vw;}
	.main-recent-notice .list {top: 126px; padding-right: 0; height: 190px;}
	.main-recent-notice .list li {width: 50%; margin-bottom: 20px;}

	.main-recent-notice .con-title span {font-size: 16px; line-height: 25px; height: 50px;}
	.main-recent-notice .con-info {font-size: 14px; line-height: 20px; height: 40px;}
}

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

}

@media all and (max-width:768px) {
	.recent-notice-title p {font-size: 20px;}
	.recent-notice-wrap .notice-title {font-size: 40px;}
	.main-recent-notice .title {padding: 0 15px;}
	.main-recent-notice .title button {font-size: 3.2vw;}

	.main-recent-notice .list {height: 255px;}
	.main-recent-notice .list li {width: 50%;}
}

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