@charset "UTF-8";

.wrap-notice {margin-top: 10px;}
.wrap-notice > ul {position: relative; height: 245px;}
.wrap-notice-title {position: relative; float: left; font-size: 22px; color: #0d1e69; font-family: 'Play'; font-weight: 700; line-height: 60px; padding-right: 45px;}
.wrap-notice-title::after {content: ""; position: absolute; width: 20px; height: 1px; background: #0D1E69; right: 0; top: 50%;}

.wrap-notice > ul > li {float: left;}

.wrap-notice .title{float: left;}
.wrap-notice .title::after{content:"";display: table; clear: both;}
.wrap-notice .title button {position: relative; font-size: 18px; color: #999999; float: left; line-height: 60px; font-family: "Noto Medium"; letter-spacing: -0.5px; padding-right: 20px; margin-left: 20px;}
.wrap-notice .title button::after {content: ""; position: absolute; width: 9px; height: 9px; background: #999999; border-radius: 50%; right: 0; top: 50%; margin-top: -4.5px;}

.wrap-notice li.on .title button {color: #0d1e69;}
.wrap-notice li.on .title button::after {background: #0d1e69;}

.wrap-notice .list .more{position: absolute; right: 0; top: -61px; font-size: 12px; color: black; font-family: 'Play'; font-weight: 700; background: url(../images/more-logo.png) no-repeat right center; display: block;  padding: 0px 15px 0px 0; line-height: 60px;}
.wrap-notice .list .more::after{content:""; display: block; position: absolute; width: 100%; height: 1px; bottom: -1px; background-color: black;}

.wrap-notice .list{display: none; position: absolute; width: 100%; left: 0; top: 60px; border-top: 1px solid #e1e1e1; padding-top: 20px;}
.wrap-notice li.on .list {display: block;}

.wrap-notice .list li{padding-left: 13px; position: relative;}
.wrap-notice .list li::before{content:"";display: block; position: absolute; width: 3px; height: 3px; left: 0; background-color: #2340c3; top: 50%; margin-top: -1.5px;}
.wrap-notice .list li a{width: 100%; height: 100%; display: block; color: #333333; padding: 4.5px 0;}
.wrap-notice .list li:first-child a{padding-top: 0;}
.wrap-notice .list li:last-child a{padding-bottom: 0;}
.wrap-notice .list li a::after{content:"";display: table;clear: both;}
.wrap-notice .list li a p{float: left; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wrap-notice .list li a span{display: block; float: right;  font-family: 'Play'; font-weight: 400; font-size: 16px; color: #979797;}
.wrap-notice .list li a:hover p {text-decoration: underline;}

@media all and (max-width: 1023px) {
	.wrap-notice{padding: 0 20px;}
}

@media all and (max-width: 768px) {
	.wrap-notice .list li a p{width: 70%;}
}

@media all and (max-width: 500px){
	.wrap-notice .list .more {width: 20px; height: 20px; border: 1px solid #111; top: -38px; background: url(../images/more-logo.png) no-repeat center;}
	.wrap-notice .list .more span {display: none;}

	.wrap-notice-title {padding-right: 0; width: 100%; line-height: 40px;}
	.wrap-notice-title::after {display: none;}
	.wrap-notice .title button {margin-left: 10px; padding-right: 10px; font-size: 14px; line-height: 30px;}
	.wrap-notice > ul > li:first-child .title button {margin-left: 0;}
	.wrap-notice .title button::after {width: 5px; height: 5px; margin-top: -2.5px;}
	.wrap-notice .list {top: 80px;}
	.wrap-notice .list li a {padding: 2px 0;}
}

@media all and (max-width: 420px) {
	.wrap-notice .list li a p{width: 60%;}
}

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