@charset "UTF-8";
.main-recent-notice { position:relative; margin-bottom:150px; } 

.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: 360px; } 
.recent-notice-wrap .notice-title { position: relative; float: left; font-size: 60px; line-height: 70px; font-family: "TitilliumWeb-Bold"; color: #000000; margin-right: 30px; margin-bottom: 40px; padding-bottom: 35px; } 
.recent-notice-wrap .notice-title::after { content: ""; position: absolute; width: 63%; left: 0; bottom: 0; height: 3px; background: #000; } 
.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: 0; border-radius: 10px; background: #000 url("../images/more-arr.png") no-repeat 82% center; color: #fff; font-size: 20px; font-family: 'Pretendard Medium'; padding: 14px 75px 14px 32px; line-height: 1; transition:all ease .25s; } 
.recent-notice-wrap > ul > li .more:hover { background-position:87% center; letter-spacing:0.5px; } 
.recent-notice-wrap > ul > li.on .more { display: block; } 


.main-recent-notice .title { float: left; position:relative; padding: 0 40px 0 0; } 
.main-recent-notice .title button { position: relative; display: inline-block; font-size: 40px; color: #8e8e8e; font-family: "Pretendard Bold"; outline: none; } 
.main-recent-notice .title button::after { content: ""; position: absolute; width: 0; height: 5px; background: #000; left: 0; bottom: -10px; transition: width 0.5s; } 
.recent-notice-wrap > ul > li.on .title button, .main-recent-notice .title button:hover { color: #000000; } 
.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: 110px; width: 100%; height: 270px; } 
.main-recent-notice .list .nodata {text-align: center;padding: 20px 0;width: 100%;font-size: 20px;} 
.main-recent-notice .list li { float: left; width: calc(100% / 4 - 64px); box-sizing: border-box; } 
.main-recent-notice .list li + li { margin-left:85px; } 

.main-recent-notice .con { display: block; width: 100%; } 
.main-recent-notice .con { position:relative; } 
.main-recent-notice .con-title { font-size: 0; } 
.main-recent-notice .con-title span { position: relative; display: -webkit-box; max-width: 100%; font-size: 20px; line-height: 28px; letter-spacing: -0.5px; color: #000000; word-break: break-all; height: 82px; overflow: hidden; font-family: "Pretendard Medium"; margin-bottom: 15px; max-height: 56px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition:all ease .5s; } 
.main-recent-notice .con-info { font-size: 16px; line-height: 23px; letter-spacing: -0.5px; color: #666; margin-bottom: 15px; height: 50px; overflow: hidden; font-family: 'Pretendard Regular'; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
.main-recent-notice .date { display: block; font-size: 14px; line-height: 25px; color: #999999; font-family: "Pretendard Regular"; padding-bottom: 20px; border-bottom: 1px solid #000; margin-bottom: 35px; } 
.main-recent-notice .con-more { display: inline-block; font-family: "Pretendard SemiBold"; font-size: 18px; letter-spacing: -0.5px; color: #000000; padding-right: 32px; padding-bottom: 5px; border-bottom: 1px solid #000; background: url("../images/ic_more_arrow.png") no-repeat 98% 9px; transition:all ease .25s; } 
.main-recent-notice .con-more:hover { background-position:101%; letter-spacing:0.5px; } 

.main-recent-notice .con:hover .con-title span { color:#0070d8; } 

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

@media (max-width: 1680px) {
	.main-recent-notice { padding: 0 20px; } 
 }

@media all and (max-width:1023px){
 .recent-notice-wrap { height: 240px; } 
.recent-notice-title p { font-size: 25px; line-height: 35px; } 
.recent-notice-wrap .notice-title { float: none; display: inline-block; font-size: 48px; line-height: 58px; margin-right: 0; margin-bottom: 20px; padding-bottom: 15px; } 
.recent-notice-wrap > ul { float: none; margin-left: 0; margin-right: 50px; margin-top: 0; } 
.recent-notice-wrap > ul > li .more { left: auto; right: 0; } 

.main-recent-notice .list { top: 80px; } 
.main-recent-notice .list li { width: calc((100% / 3) - 20px); } 
.main-recent-notice .list li:nth-child(4) {display: none;}
.main-recent-notice .list li + li { margin-left :30px; } 
.main-recent-notice .recent-notice-wrap > ul > li:first-child .title { padding-left: 0; } 
.main-recent-notice .title button { font-size: 32px; } 

.main-recent-notice .con-title span { font-size: 22px; line-height: 30px; height: auto; max-height: 120px; } 
.main-recent-notice .con-info { font-size: 14px; line-height: 20px; height: 40px; } 
 }

@media all and (max-width:768px){
 .recent-notice-wrap { height: 475px; } 
.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: 28px; } 

.main-recent-notice .list { height: 255px; } 
.main-recent-notice .list li { width: 100%;float: none;margin-bottom: 30px;}
.main-recent-notice .list li + li {margin-left: 0;} 
.main-recent-notice .list li:nth-child(3) {display: none;}
.main-recent-notice .list li + li:nth-child(2) {margin-bottom: 0;}

.recent-notice-wrap > ul { margin-right: 0; } 
.recent-notice-wrap > ul > li .more { width: 180px; height: auto; background-size: 20px auto; top: 0; padding: 14px 75px 14px 20px;}
.main-recent-notice .con-title span {margin-bottom: 5px;} 
.main-recent-notice .con-info {margin-bottom: 5px;}
.main-recent-notice .date {margin-bottom: 23px;padding-bottom: 10px;}
.main-recent-notice {margin-bottom: 58px;}
 }


 @media all and (max-width:500px){
   .main-recent-notice .title button {font-size: 23px;}
   .main-recent-notice .list {top: 65px;}
   .recent-notice-wrap > ul > li .more { width: 120px; padding: 11px 20px 11px 20px;font-size: 17px; background: #000;line-height: 1.1;text-align: center;} 
}

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