@charset "utf-8";

#main-news{display:flex;gap:50px;padding:80px calc((100% - 1300px) / 2);background:#eaf7fb}
#main-news .tit{flex-shrink:0;width:240px;padding-top:20px;font-size:18px}
#main-news .tit h2{font-size:32px;font-weight:700;color:var(--dark)}
#main-news .tit a{display:flex;gap:10px;align-items:center;margin-top:30px;font-size:14px;font-weight:700;color:var(--second)}
#main-news .tit a svg{width:18px;height:18px}
#main-news .slide{width:calc(100% - 240px);padding:10px}
#main-news ul{margin-left:auto}
#main-news ul li{border-radius:12px;background:#fff;transition:all .2s}
#main-news ul li a{display:block;padding:30px;color:#777}
#main-news ul li span:not(.date){padding:6px 15px;border-radius:4px;font-size:14px;color:#fff;background:var(--second)}
#main-news ul li p{margin:50px 0 5px 0;font-size:17px;font-weight:700;color:var(--dark)}
#main-news ul li:hover{ transform:translate(-5px, -5px); box-shadow:3px 3px 16px var(--primary-15)}
#main-news ul li .date{display:block;margin-top:10px;font-size:14px;color:#aaa}
#main-news ul li div{width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
#main-news ul li.empty{padding:50px}

@media(max-width:1480px){
#main-news{gap:30px}
#main-news .tit{padding:20px 0 0 20px}
}
@media(max-width:768px){
#main-news{display:block;padding:40px 0}
#main-news .tit{width:100%;padding:0;font-size:16px;text-align:center}
#main-news .tit h2{font-size:24px}
#main-news .tit a{justify-content:center;margin:10px 0}
#main-news .slide{width:100%}
#main-news ul li a{padding:15px}
#main-news ul li span:not(.date){padding:3px 10px;font-size:13px}
#main-news ul li p{margin-top:25px;font-size:16px}
#main-news ul li .date{font-size:12px}
}