@charset "UTF-8";

.wrap-notice {min-height: 593px; padding: 90px 0 110px 0; background: #f3f3f3;}
.wrap-notice .container {position: relative;}
.wrap-notice .title {position: absolute; left: 0; top: 0; font-family: 'Noto Bold'; font-size: 60px; line-height: 1.2; color: #000;}
.wrap-notice .notice {padding: 0 160px 0 0; text-align: right;}
.wrap-notice .notice li {display: inline-block; vertical-align: middle;}
.wrap-notice .notice .tab {position: relative; display: inline-block; margin: 0 0 0 39px; padding: 17px 0 17px 37px; font-family: 'Noto Regular'; font-size: 28px; vertical-align: middle; color: #868686;}
.wrap-notice .notice .tab:hover,
.wrap-notice .notice .on .tab {color: #006276;}
.wrap-notice .notice .tab::after {content: ''; position: absolute; left: 0; top: 48%; width: 6px; height: 6px; background: #000; border-radius: 100%;}
.wrap-notice .notice .tab span {position: relative;}
.wrap-notice .notice .tab span::after {content: ''; position: absolute; left: 0; bottom: -12px; width: 0; height: 3px; background: #006276;}
.wrap-notice .notice .tab:hover span::after {width: 100%; transition: .4s;}
.wrap-notice .notice li:first-child .tab::after {display: none;}
.wrap-notice .notice .list {display: none; position: absolute; left: 0; top: 145px; width: 100%; text-align: left;}
.wrap-notice .notice .on .list {display: block;}
.wrap-notice .notice .list li {float: left; width: 25%; padding: 0 50px 0 0;}
.wrap-notice .notice .list li.nodata {padding: 30px 0 0 0; text-align: center;}
.wrap-notice .notice .list li a:hover .subject,
.wrap-notice .notice .list li a:hover .more {color: #006276; transition: .4s;}
.wrap-notice .notice .list li a {display: block;}
.wrap-notice .notice .list .date {display: block; font-family: 'Mont Regular'; font-size: 14px; color: #666;}
.wrap-notice .notice .list .subject {overflow: hidden; display: block; height: 75px; margin: 8px 0 0 0; font-family: 'Noto Medium'; font-size: 32px; letter-spacing: -1px; line-height: 1.2; color: #222;}
.wrap-notice .notice .list .desc {overflow: hidden; height: 75px; margin: 21px 0 0 0; font-family: 'Noto Light'; font-size: 17px; color: #444;}
.wrap-notice .notice .list .more {display: inline-block; margin: 30px 0 0 0; padding: 0 35px 0 0; background: url('../images/btn-notice-more2.png') no-repeat right 10px; font-family: 'Noto Regular'; font-size: 14px; letter-spacing: 0; color: #333;}
.wrap-notice .notice .list .more-hidden {display: none;}
.wrap-notice .control {position: absolute; right: 0; top: 25px; font-size: 0;}
.wrap-notice .control a,
.wrap-notice .control button {display: inline-block; width: 24px; height: 24px; vertical-align: middle; text-indent: -99999px;}
.wrap-notice .control .prev {width: 45px; background: url('../images/btn-notice-prev.png') no-repeat center center;}
.wrap-notice .control .next {position: relative; width: 45px; background: url('../images/btn-notice-next.png') no-repeat center center;}
.wrap-notice .control .next::after {content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 25px; background: #a2a2a2;}
.wrap-notice .control .more {background: url('../images/btn-notice-more.png') no-repeat center center;}

@media all and (max-width: 1620px) {
    .wrap-notice .container {padding: 0 20px;}
    .wrap-notice .title {left: 20px;}
    .wrap-notice .control {right: 20px;}
    .wrap-notice .notice .list {padding: 0 20px;}
}

@media all and (max-width: 1500px) {
    .wrap-notice {min-height: 580px; padding: 100px 0;}
    .wrap-notice .title {font-size: 50px;}
    .wrap-notice .notice .tab {padding: 17px 0 17px 27px; font-size: 20px;}
    .wrap-notice .notice .list .subject {height: 60px; font-size: 25px;}
    .wrap-notice .notice .list .desc {height: 65px; font-size: 15px;}
    .wrap-notice .control {top: 18px;}
}

@media all and (max-width: 1200px) {
    .wrap-notice {min-height: 530px; padding: 80px 0;}
    .wrap-notice .notice .list .subject {height: 50px; font-size: 20px;}
    .wrap-notice .notice .tab {padding: 17px 0 17px 17px; margin: 0 0 0 15px;}
}

@media all and (max-width: 1000px) {
    .wrap-notice {min-height: 400px; padding: 60px 0;}
    .wrap-notice .title {font-size: 35px;}
    .wrap-notice .notice {padding: 0 115px 0 0;}
    .wrap-notice .notice .list {top: 82px;}
    .wrap-notice .notice .tab {padding: 17px 0 17px 20px; font-size: 18px;}
    .wrap-notice .notice .tab::after {top: 45%;}
    .wrap-notice .notice .list .subject {height: 43px; font-size: 18px;}
    .wrap-notice .notice .list .desc {font-size: 14px; line-height: 1.2;}
    .wrap-notice .notice .list .date {font-size: 12px;}
    .wrap-notice .notice .list .more {margin: 20px 0 0 0; background-position: right 6px; font-size: 11px;}
}

@media all and (max-width: 856px) {
    .wrap-notice {min-height: 430px;}
    .wrap-notice .title {position: static; margin: 0 0 10px 0; text-align: center;}
    .wrap-notice .notice {padding: 0; text-align: center;}
    .wrap-notice .notice .list {top: 122px;}
    .wrap-notice .control {top: 8px;}
}

@media all and (max-width: 700px) {
    .wrap-notice .notice .tab {padding: 17px 0 17px 11px; margin: 0 0 0 6px; font-size: 15px;}
}

@media all and (max-width: 600px) {
    .wrap-notice {min-height: 530px; padding: 50px 0 60px 0;}
    .wrap-notice .title {margin: 0 0 30px 0; font-size: 30px;}
    .wrap-notice .notice li:first-child .tab {padding: 17px 0 17px 0; margin: 0;}
    .wrap-notice .notice .list {top: 155px; padding: 0 35px;}
    .wrap-notice .notice .list li {padding: 0;}
    .wrap-notice .notice .list .date {font-size: 14px;}
    .wrap-notice .notice .list .subject {font-size: 32px;}
    .wrap-notice .notice .list .desc {height: 75px; font-size: 17px; line-height: 1.4;}
    .wrap-notice .notice .list .more {font-size: 14px;}
    .wrap-notice .control {top: auto; right: auto; bottom: -290px; left: 50%; transform: translate(-50%,0);}
}