﻿.swiper-news .swiper-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.swiper-news .swiper-pagination-bullet {
    width: 80px;
    height: 5px;
    border-radius: 0;
    opacity: 1;
    background:#fff
}
.swiper-news .swiper-pagination-bullet-active {
    background: #be9562;
}
.swiper-news .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0 15px}
.swiper-news .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-news .swiper-pagination-custom, .swiper-news .swiper-pagination-fraction {
    bottom: 5%
}
.news-wrap {
    padding: 10rem 20%;
    background: #f9f9f9;
}
.news-box {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between
}
.news{width:calc(50% - 1rem);margin-bottom:2rem}
.news-p {
    height: 25rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    line-height: 0;
    background-color:#000
}
.news-p img{width:100%}
.news-c {
    background: #fff;
    padding: 1.5rem 2rem;
    height:15rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.news-title {
    font-size: 1.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .5rem ;
}
.news-b{display:flex;align-items:center;justify-content:space-between}
.link-btn{
    position:relative;
    height:1px;
    width:5rem;
    background:#be9562
}
.link-btn::before,.link-btn::after{
    content: "";
    position: absolute;
    right: 0;
    height: 1px;
    width: 1.25rem;
    background: #be9562;
    transform: rotate(45deg);
    transform-origin: right;
}
.link-btn::after{
    transform: rotate(-45deg);
}
.time{color:#898989}
.news:hover .news-c {
    background:#be9562;
    color:#fff
}
.news:hover .link-btn{background:#fff}
.news:hover .link-btn::after,.news:hover .link-btn::before{background:#fff}
.news:hover .time{color:#fff}
.know-More{display:flex;align-items:center;color:#000;width: max-content;}
.news:hover .arrow-line{width:40px;background:#fff}
.news:hover .know-More{color:#fff}
.arrow-line {
    height: 1px;
    width: 15px;
    background: #000;
    margin-left: 10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    width: 5px;
    height: 5px;
    border-top: 5px solid transparent;
    border-left: 5px solid;
    border-bottom: 5px solid transparent;
}
.moreBtn {
    display: block;
    margin: auto;
    color: #cacbcb;
    border: 1px solid;
    font-size: 1.25rem;
    font-family: 'PingFang Medium';
    padding: .5rem 3rem;
    margin-top: 5rem;
}
.news-type {
    display: flex;
    justify-content: center;
    line-height: 5rem;
    font-size:1.25rem;
}
.news-type .type{margin:0 1.5rem;color:#898989}
.news-type .type.active{color:#be9562;border-bottom:3px solid;font-size:1.35rem}