@charset "utf-8";

/* 공지사항 */
.wrap-notice {min-height: 400px; background: url('../images/bg-notice.png') no-repeat center top / cover;}
.wrap-notice .container {position: relative; display: flex; justify-content: flex-start; width: 100%; padding: 50px 0;}
.wrap-notice .container::after {content: ''; position: absolute; right: calc(100% - 180px); top: 0; width: 1000px; height: 100%; background: #042e6e;}
.wrap-notice .tabs {position: relative; z-index: 1; flex-shrink: 0; width: 265px;}
.wrap-notice .tabs li {padding-right: 70px;}
.wrap-notice .tabs button {position: relative; display: flex; align-items: center; width: 100%; height: 70px;  padding-left: 30px; font-size: 18px; color: #fff;}
.wrap-notice .tabs .on button::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #007eff url('../images/arr-notice.png') no-repeat calc(100% - 30px) center;}
.wrap-notice .tabs button span {position: relative; z-index: 1;}
.wrap-notice .list {flex-grow: 1;}
.wrap-notice .list ul {display: none; flex-wrap: wrap; width: calc(100% + 40px);}
.wrap-notice .list ul.on {display: flex;}
.wrap-notice .list li {width: 33.333%; padding: 20px 40px 20px 0;}
.wrap-notice .list li a {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 150px; padding: 0 20px; background: #fff;}
.wrap-notice .list li a::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 3px solid #0b4da2; opacity: 0;}
.wrap-notice .list li a:hover::after {opacity: 1;}
.wrap-notice .list li a::before {content: ''; position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; background: #0b4da2 url('../images/arr-notice2.png') no-repeat center; opacity: 0;}
.wrap-notice .list li a:hover::before {opacity: 1;}
.wrap-notice .list li strong {overflow: hidden; display: -webkit-box; text-align: center; font-size: 18px; color: #333; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.wrap-notice .list li p {margin-top: 10px; color: #666666;}
.wrap-notice .more {display: none; position: absolute; left: 20px; bottom: 40px; z-index: 1; width: 50px; height: 50px; background: url('../images/more-notice.png') no-repeat center; text-indent: -9999px;}
.wrap-notice .on .more {display: block;}

@media screen and (max-width: 1620px) {
	.wrap-notice .container {padding: 50px 20px;}
}

@media screen and (max-width: 1215px) {
	.wrap-notice .tabs li {padding-right: 30px;}
	.wrap-notice .list li {width: 50%;}
	.wrap-notice .list li a {height: 130px;}
	.wrap-notice .list li p {margin-top: 6px;}
}

@media screen and (max-width: 900px) {
	.wrap-notice .tabs {width: 190px;}
	.wrap-notice .list ul {width: 100%;}
	.wrap-notice .list li {width: 100%; padding: 10px 0;}
	.wrap-notice .list li a {height: 90px; align-items: flex-start;}
	.wrap-notice .list li strong {text-align: left; line-clamp: 1; -webkit-line-clamp: 1;}
}