@charset "utf-8";

/* notice */
.notice-wrap {position: relative; z-index: 4;}
.notice-wrap .wrap-inner {max-width:1620px; width:100%; height:100px; margin:0 auto; background: rgba(2,7,33,0.8); border-radius:10px; overflow:hidden; padding:20px 30px;}
.notice-wrap .frame { display: flex; align-items: center; height:100%;}
.notice-wrap .title {width:160px;}
.notice-wrap .title strong {color:#00AEC4; font-size: 20px; font-family: gb; position: relative; padding-left:25px;}
.notice-wrap .title strong::after {content:''; width:10px; height:10px; background:#00AEC4; border-radius:50%; position: absolute; left:0; top:5px;}
.notice-wrap .slider { width:calc(100% - 260px); overflow: hidden;}
/* .notice-wrap .slider .swiper-wrapper {margin:0 -30px;} */
/* .notice-wrap .swiper-wrapper {flex-wrap:wrap;} */
/* .notice-wrap .swiper-container-vertical>.swiper-wrapper {flex-direction: row;} */
.notice-wrap .slider li {padding:0 30px; width:50%;}
.notice-wrap .slider li a{display: flex; justify-content: space-between; height:100%; align-items: center;}
.notice-wrap .sj { font-size: 18px; font-family: gl; color:#fff; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
.notice-wrap .date { font-size: 18px; display: inline-block; color:rgba(255,255,255,0.4); font-family: gl; margin-left:10px;}
.notice-wrap .more {flex:1; text-align: center; font-size: 14px; color:#EA5539; font-family: gb;}
.notice-wrap .more::after {content:''; width:10px; height:10px; background:url('../../images/main/noti-more.png') no-repeat center; display: inline-block; margin-left:10px; transition:transform .4s;}
.notice-wrap .more:hover::after {transform: rotate(180deg);}

@media (max-width:1800px) {
    .notice-wrap {padding:0 20px;}
}

@media (max-width:1200px) {
    .notice-wrap .sj {font-size: 16px;}
    .notice-wrap .data {font-size: 16px;}
}

@media (max-width:768px) {
    .notice-wrap .frame {flex-wrap:wrap; height:auto; position: relative;}
    .notice-wrap .wrap-inner {height:auto;}
    .notice-wrap .slider {width:100%; margin-top: 10px;}
    .notice-wrap .slider li {width:100%; padding:0; margin: 5px 0;}
    .notice-wrap .date {display: none;}
    .notice-wrap .more {position: absolute; right:0; top:0;}
}