@charset "UTF-8";

.wrap-media {min-height: 1035px; padding: 143px 0 125px 0; background: #f3f3f3;}
.wrap-media .container {position: relative;}
.wrap-media .title {position: absolute; left: 0; top: 0; font-family: 'Mont Bold'; font-size: 20px; color: #006276;}
.wrap-media .title .text {margin: 5px 0 0 0; font-family: 'Noto Light'; font-size: 23px; line-height: 1.4; color: #666;}
.wrap-media .media {padding: 0 210px 0 0; text-align: right;}
.wrap-media .media > li {display: inline-block; vertical-align: middle;}
.wrap-media .media > li.on .tab.on{color: #006276;}
.wrap-media .media .tab {position: relative; display: inline-block; margin: 0 0 0 37px; padding: 17px 0 17px 37px; font-family: 'Mont Bold'; font-size: 50px; vertical-align: middle; letter-spacing: -1px; color: #000;}
.wrap-media .media .tab:hover {color: #006276;}
.wrap-media .media .tab::after {content: ''; position: absolute; left: 0; top: 48%; width: 6px; height: 6px; background: #000; border-radius: 100%;}
.wrap-media .media .tab span {position: relative;}
.wrap-media .media .tab span::after {content: ''; position: absolute; left: 0; bottom: -12px; width: 0; height: 3px; background: #006276;}
.wrap-media .media .tab:hover span::after {width: 100%; transition: .4s;}
.wrap-media .media > li:first-child .tab::after {display: none;}
.wrap-media .media .list {display: none; position: absolute; left: 0; top: 295px; width: 100%; text-align: left;}
.wrap-media .media .list-media.on .list {display: block;}
.wrap-media .media .list .more-hidden {display: none;}
.wrap-media .media .list a {display: block;}
.wrap-media .media .list .thumb {overflow: hidden; margin: 0 0 25px 0; height: 168px; transition: all .3s}
.wrap-media .media .list .slick-current + li .thumb{height: 324px; overflow: hidden;}
.wrap-media .media .list .thumb img {width: 100%; display:block; position:relative; left:50%; transform:translate(-50%,0); max-width:none;}
.wrap-media .media .list .subject {overflow: hidden; display: inline-block; height: 55px; margin: 0 0 7px 0; font-family: 'Noto Regular'; font-size: 20px; line-height: 1.3; color: #222;}
.wrap-media .media .list .subject span {position: relative; background: linear-gradient(to bottom, transparent 60%, rgba(0,98,118,0.2) 0) left center no-repeat; background-size: 0; transition: background .4s;}
.wrap-media .media .list a:hover .subject span{background-size: 100% auto;}
.wrap-media .media .list .desc {overflow: hidden; height: 70px; margin: 0 0 22px 0; font-family: 'Noto Light'; font-size: 16px; color: #666;}
.wrap-media .media .list .date {font-family: 'Mont Light'; font-size: 14px; color: #666;}
.wrap-media .media .list .slick-slide {width: 330px; padding: 0 20px 0 0;}
.wrap-media .media .list .nodata {padding: 50px 0; text-align: center;}
.wrap-media .media .list .slick-current + li {width: 620px;}
.wrap-media .media .list .slick-current + li .thumb img {width: 100%;}
.wrap-media .media .list .slick-current + li .subject {height: 80px; padding: 0 0 0 25px; font-family: 'Noto Medium'; font-size: 28px; line-height: 1.3;}
.wrap-media .media .list .slick-current + li .desc {height: 85px; padding: 0 0 0 25px; font-size: 17px; line-height: 1.8;}
.wrap-media .media .list .slick-current + li .date {display: none;}
.wrap-media .more {position: absolute; right: 140px; top: 175px; width: 30px; height: 30px; background: url('../images/btn-media-more.png') no-repeat center center; text-indent: -99999px;}
.wrap-media .control {position: absolute; left: 0; bottom: 100px; width: 100%;}
.wrap-media .control .container {max-width: 1300px; padding: 0 0 0 28px; font-size: 0;}
.wrap-media .control .prev,
.wrap-media .control .next {display: inline-block !important; width: 24px; height: 5px; text-indent: -99999px; vertical-align: middle;}
.wrap-media .control .prev {margin: 0 25px 0 0; background: url('../images/btn-media-prev.png') no-repeat center center;}
.wrap-media .control .next {margin: 0 45px 0 0; background: url('../images/btn-media-next.png') no-repeat center center;}
.wrap-media .control .paging {width: calc(100% - 130px); height: 6px; margin: 1px 0 0 0; background: #dbdbdb; border-radius: 10px;}
.wrap-media .control .paging,
.wrap-media .control .paging li,
.wrap-media .control .paging button {display: inline-block; font-size: 0; vertical-align: middle;}
.wrap-media .control .paging ul,
.wrap-media .control .paging li,
.wrap-media .control .paging button {height: 100%;}
.wrap-media .control .paging ul {display: table; width: 100%; table-layout: fixed;}
.wrap-media .control .paging ul.off{display: none !important;}
.wrap-media .control .paging li {display: table-cell; vertical-align: middle;}
.wrap-media .control .paging button {width: 100%;}
.wrap-media .control .paging .slick-active button {background: #006276; border-radius: 10px;}

@media all and (max-width: 1780px) {
    .wrap-media {min-height: 875px;}
    .wrap-media .media {padding: 0 80px 0 0;}
    .wrap-media .title {left: 20px;}
    .wrap-media .more {right: 20px;}
    .wrap-media .media .list .slick-slide {padding: 0 15px;}
    .wrap-media .media .list .thumb {height: 175px !important;}
    .wrap-media .media .list .slick-slide {width: auto; padding: 0 20px;}
    .wrap-media .media .list .slick-current + li {width: auto;}
    .wrap-media .media .list .slick-current + li .thumb img,
    .wrap-media .media .list .thumb img {width: 150%;}
    .wrap-media .media .list .slick-current + li .subject {height: 55px; font-family: 'Noto Regular'; font-size: 20px; line-height: 1.4;}
    .wrap-media .media .list .slick-current + li .desc {height: 70px; font-size: 16px; line-height: 1.5;}
    .wrap-media .media .list .slick-current + li .date {display: inline-block;}
}

@media all and (max-width: 1500px) {
    .wrap-media .media .tab {padding: 24px 0 24px 37px; font-size: 40px;}
    .wrap-media .title .text {font-size: 20px;}
}


@media all and (max-width: 1300px) {
    .wrap-media {min-height: 795px; padding: 100px 0 125px 0;}
    .wrap-media .media .list {top: 230px;}
    .wrap-media .more {top: 132px;}
}

@media all and (max-width: 1100px) {
    .wrap-media {min-height: 765px;}
    .wrap-media .media .list {top: 234px;}
    .wrap-media .media .tab {margin: 0 0 0 25px; padding: 30px 0 30px 24px;font-size: 30px; }
    .wrap-media .title .text {font-size: 18px;}
    .wrap-media .control {bottom: 75px;}
}

@media all and (max-width: 915px) {
    .wrap-media {min-height: 730px; padding: 40px 0 125px 0;}
    .wrap-media .title {position: static;}
    .wrap-media .media {text-align: left;}
    .wrap-media .media .tab {font-size: 26px;}
    .wrap-media .media li:first-child .tab {padding: 30px 0 30px 20px; margin: 0;}
    .wrap-media .media .list {top: 224px;}
    .wrap-media .media .list .slick-current + li .thumb img,
    .wrap-media .media .list .thumb img {width: 100%;}
    .wrap-media .more {top: 155px;}
}

@media all and (max-width: 600px) {
    .wrap-media {min-height: 645px; padding: 30px 0 40px 0;}
    .wrap-media .media .list {top: 220px;}
    .wrap-media .media .list .thumb {height: 180px !important;}
    .wrap-media .media .list .slick-slide {padding: 0 80px;}
    .wrap-media .control .container {padding: 0 20px;}
    .wrap-media .control {bottom: 220px;}
    .wrap-media .control .paging {display: none;}
    .wrap-media .control .prev,
    .wrap-media .control .next {width: 50px; height: 50px; border: 1px solid #ccc;}
    .wrap-media .control .prev {background: #fff url('../images/btn-college-prev.png') no-repeat center center; float: left;}
    .wrap-media .control .prev:hover {background: #04b9c2 url('../images/btn-college-prev-on.png') no-repeat center center; border: 1px solid #04b9c2; transition: .4s;}
    .wrap-media .control .next {background: #fff url('../images/btn-college-next.png') no-repeat center center; float: right; margin: 0;}
    .wrap-media .control .next:hover {background: #04b9c2 url('../images/btn-college-next-on.png') no-repeat center center; border: 1px solid #04b9c2; transition: .4s;}
    .wrap-media .more {top: 145px;}
}