@charset "utf-8";

.wrap-notice{height:100%; max-width:1820px; width:100%; margin-left:auto; padding:100px 0 120px 0;}
.wrap-notice > div {display: flex;}
.wrap-notice .left {width:240px; flex-shrink: 0;}
.wrap-notice .sub-title {color:#00B6AD; font-size: 16px; line-height: 20px; font-family: 'SUITE SemiBold';}
.wrap-notice .main-title h1 {font-size: 40px; line-height: 50px; font-family: 'SUITE ExtraBold';}
.wrap-notice .btn-list {position: relative;}
.wrap-notice .btn-box {position: relative; max-width:200px; display: flex; align-items: center;}
.wrap-notice .btn-box::after {content: ''; width:0%; height:2px; background:#000; position: absolute; bottom:0; left:0; transition:width .5s;}
.wrap-notice .btn-box:hover::after {width:100%;}
.wrap-notice .btn-box.active::after {width:100%;}
.wrap-notice .btn-box button {font-family: 'SUITE Bold'; font-size: 22px; line-height: 70px; color:#000; width:100%; text-align:left;}
.wrap-notice .btn-box .more {width:15px; height:100%; background:url('../images/notice-more.png') no-repeat center; text-indent: -9999px; flex-shrink: 0; visibility: hidden; opacity:0; position: relative; top:10px;}
.wrap-notice .btn-box.active .more {visibility: visible; opacity:1; top:0; transition:all 0.3s ease;}
.wrap-notice .right {position: relative; max-width:calc(100% - 240px); width:100%; margin-left:175px;}
.wrap-notice .right > li {display: none; position: relative; height:100%;}
.wrap-notice .right > li.active {display: block; position: relative;}

/* slider1 */
.wrap-notice .slider1 {position: relative; max-width:630px; width:100%; margin:0 auto; height:400px;}
.wrap-notice .slider1 > ul {margin:0 15px;}
.wrap-notice .list-nodata {display: flex !important; align-items: center; justify-content: center; font-family: 'HG Regular';}
.wrap-notice .list-nodata > ul {flex:1;}
.wrap-notice .slider1 li {padding:0 15px;}
.wrap-notice .slider1 a {padding:40px 50px; border:1px solid #000; border-radius:10px; display: block; height: 400px;}
.wrap-notice .slider1 .con {height:100%; position: relative;}
.wrap-notice .slider1 .con::before {content:''; width:76px; height:101px; background:url('../images/notice-obj.png') no-repeat center; position: absolute; right:0; bottom:0;}
.wrap-notice .slider1 .cl {font-family: 'SUITE Regular'; font-size: 18px; color:#3F8EDD; display: block;}
.wrap-notice .slider1 .subjectText {font-family: 'SUITE Bold'; font-size: 26px; line-height: 40px; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; color:#333;}
.wrap-notice .slider1 .subjectText span {display: inline; background:linear-gradient(to bottom, transparent 98%, rgba(0,0,0,1) 0) left center no-repeat; background-size:0%; transition:background-size .5s;}
.wrap-notice .slider1 a:hover .subjectText span{background-size:100% auto;}
.wrap-notice .slider1 .content {font-family: 'SUITE Light';font-size: 18px; line-height: 26px; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4; overflow:hidden; color:#333; margin-top: 15px;}
.wrap-notice .slider1 .date {color:#888; font-size: 16px; font-family: 'SUITE Light'; line-height: 26px; position: absolute; bottom:0;}

.wrap-notice .shadowText {position: absolute; width:440px; border:1px solid #d5d5d5; border-radius:10px;}
.wrap-notice .shadowText .con::before {width:37px; height:49px; background-size:cover; right: 0px;}
.wrap-notice .shadowText a { border:none;height:300px; }
.wrap-notice .shadowText .subjectText {font-size: 22px; line-height: 35px;}
.wrap-notice .shadowText .content {font-size: 16px; -webkit-line-clamp: 2;}
.wrap-notice .shadowText_1 {right:100%; top:0}
.wrap-notice .shadowText_2 {left:100%; bottom:0;}

.wrap-notice .control button {width:80px; height:80px; border-radius:50%; border:1px solid #d5d5d5; text-indent: -9999px; position: absolute; transition: all .3s;}
.wrap-notice .control button:hover {border:1px solid #005BAC;}
.wrap-notice .prev {background:#fff url('../images/notice-prev.png') no-repeat center; left:calc(-100% + 190px); bottom:0;}
.wrap-notice .prev:hover {background:#fff url('../images/prev-on.png') no-repeat center;}
.wrap-notice .next {background:#fff url('../images/notice-next.png') no-repeat center; left:100%; top:0;}
.wrap-notice .next:hover {background:#fff url('../images/next-on.png') no-repeat center;}
@media screen and (min-width:1921px) {
    .wrap-notice {max-width:1820px; margin:0 auto;}
}
@media screen and (max-width:1800px) {
    .wrap-notice {margin:0 20px;}
}
@media screen and (max-width:1600px) {
    .wrap-notice {width:auto;}
    .wrap-notice > div {flex-direction: column;}
    .wrap-notice .left {width:100%;display: flex; justify-content: space-between;}
    .wrap-notice .btn-list {display: flex; gap:45px;}
    .wrap-notice .btn-box {max-width:unset; align-self: start;}
    .wrap-notice .btn-box.active .more {margin-left:30px;}

    .wrap-notice .right {max-width:unset; margin-left:0; margin-top: 30px;}

    .wrap-notice .control .prev {right:100%; left:unset;}
}
@media screen and (max-width:1200px) {
    .wrap-notice {padding:70px 0 80px 0; margin:0 40px; }
    .wrap-notice .left {flex-wrap:wrap;}
    .wrap-notice .btn-box button {line-height: 63px;}
}
@media screen and (max-width:950px) {
    .wrap-notice .main-title h1 {margin-bottom: 18px;}
    .wrap-notice .btn-list {gap:30px;}
}
@media screen and (max-width:768px) {
    .wrap-notice {padding:40px 0 60px 0; margin:0 20px;}
    .wrap-notice .main-title h1 {font-size: 30px; line-height: 40px;}
    .wrap-notice .btn-list {gap:15px;}
    .wrap-notice .btn-box button {line-height: 50px;}

    .wrap-notice .right {margin-top: 20px;}
    .wrap-notice .shadowText {display: none !important;}
    .wrap-notice .slider1 {max-width:100%; overflow:hidden; height: auto;}
    .wrap-notice .slider1 > ul {margin:0 -15px;}
    .wrap-notice .slider1 li {height:331px;}
    .wrap-notice .slider1 li.list-nodata {height:431px;}
    .wrap-notice .slider1 a {height:330px; padding: 30px 35px 33px 30px; }
    .wrap-notice .slider1 .con::before {width:37px; height:49px; background-size: cover;}
    .wrap-notice .slider1 .subjectText {font-size: 22px; line-height: 35px;}
    .wrap-notice .slider1 .content { font-size: 16px; line-height: 25px;}

    .wrap-notice .control {text-align: center; display: flex; gap:10px; justify-content: center; margin-top: 20px;}
    .wrap-notice .control button {position: relative;}
    .wrap-notice .control .prev {left:unset; right:unset; bottom:unset; top:unset;}
    .wrap-notice .control .next {left:unset; right:unset; bottom:unset; top:unset;}
}