@charset "UTF-8";

.wrap-notice {position: relative; min-height: 420px; padding: 80px 0 70px;}
.notice-container {position: relative; max-width: 1400px; margin: 0 auto;}
.wrap-notice .title {float: left; width: 22%; font-size: 40px; font-family: 'TitilliumWeb-SemiBold'; line-height: 1.2; letter-spacing: -1px;}
.wrap-notice .title p {position: relative; font-family: 'Mont SemiBold'; font-size: 45px; color: #111;}

.notice-container > ul {position: relative; float: right; width: 78%;}
.notice-container > ul::after {content: ""; display: block; clear: both;}
.notice-container > ul > li {float: left; margin-top: 6px; margin-right: 60px;}
.notice-container > ul > li button {font-family: 'Noto Medium'; font-size: 26px; color: #666; }
.notice-container > ul > li button span {position: relative; z-index: 1;}
.notice-container > ul > li.on button {position: relative; font-family: 'Noto Bold'; color: #333;}
.notice-container > ul > li.on button span::after {content: ''; position: absolute; top: -10px; left: 50%; width: 10px; height: 10px; background: #00a6ac; border-radius: 100%; transform: translate(-50%, 0);}
.notice-container > ul > li .more {display: none;}
.notice-container > ul > li.on .more {display: block; position: absolute; right: 0; top: 15px; width: 35px; height: 35px; background: url('../images/btn-notice-more.png') no-repeat center center; text-indent: -99999px;}

.wrap-notice .list {display: none;}
.wrap-notice .on .list {display: block; position: absolute; top: 75px; left: 0; width: 100%; width: 101.5%; margin-left: -10px;}
.wrap-notice .list li {float: left; width: 25%;}
.wrap-notice .list .box {padding: 0 15px;}
.wrap-notice .list .box a {display: block; transition: all 0.4s ease;}
.wrap-notice .list .subject {font-family: 'Noto Bold'; font-size: 26px; color: #151515; line-height: 1.2; margin-bottom: 20px; display: block; height:62px; overflow: hidden;}
.wrap-notice .list a:hover .subject {color: #007a93;}
.wrap-notice .list .desc {font-family: 'Noto Light'; font-size: 16px; color: #666666; margin-bottom: 30px; height: 50px; overflow: hidden;}
.wrap-notice .list .date {font-family:'TitilliumWeb-Regular'; font-size: 18px; color: #888888;}
.wrap-notice .list .cate {display: inline-block; color: #fff; padding: 2px 7px; font-size: 14px; margin-left: 10px;}
.wrap-notice .list .cate.color1 {background:#2899fb;}
.wrap-notice .list .cate.color2 {background:#fdab3d;}
.wrap-notice .list .cate.color3 {background:#fc595b;}
.wrap-notice .list .cate.color4 {background:#2899fb;}
.wrap-notice .list .nodata {text-align: center; width: 100%; padding: 20px 0;}

.wrap-notice .control {position: absolute; left: 0; top: 80px;}
.wrap-notice .control button {display: inline-block; width: 46px; height: 12px; vertical-align: middle; text-indent: -99999px;}
.wrap-notice .control button.prev {margin: 0 30px 0 0; background: url('../images/btn-notice-prev.png') no-repeat center center;}
.wrap-notice .control button.next {background: url('../images/btn-notice-next.png') no-repeat center center;}

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

@media all and (max-width: 900px) {
    .wrap-notice {min-height: 475px;}
    .wrap-notice .title {width: 100%; margin: 0 0 20px 0;}
    .wrap-notice .control {left: auto; right: 0; top: 10px;}
    .notice-container > ul {width: 100%;}
    .notice-container > ul > li button {font-size: 20px;}
    .notice-container > ul > li {margin-right: 20px;}
    .notice-container > ul > li.on .more {top: 4px;}
}