@charset "UTF-8";


@font-face {
    font-family: tcceb;
    src: url("../font/TCCEB.TTF");
}

.news span{
    display: block;
    margin-left: -130px;
    color: #f7f7f7;
    font-family: tcceb;
    font-size: 778px;
    line-height: 550px;
    user-select: none;
    cursor: default;
}
.news .content .pic,
.news .content .takeaway{
    top: 55px;
    width: 634px;
    height: 428px;
}
.news .content .pic{
    left: 0;
}
.news .content .pic > div{
    top: 50%;
    left: -90px;
    width: 280px;
    height: 190px;
    margin-top:-95px ;
    transition: 1s;
    opacity: 0;
}
.news .content .pic > div.on{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    opacity: 1;
}
.news .content .pic > div.prv{
    opacity: 1;
    z-index: -1;
}
.news .content .takeaway{
    right: 0;
}
.news .content .takeaway > div.on{
    left: 0;
    opacity: 1;
    visibility: visible;
}
.news .content .takeaway > div{
    left: 100px;
    width: 100%;
    height: 100%;
    padding-top: 45px;
    box-sizing: border-box;
    transition: 1s;
    opacity: 0;
    visibility: hidden;
}
.news .content .takeaway h3{
    margin-bottom: 30px;
    color: #231815;
    font-size: 36px;
}
.news .content .takeaway p{
    color: rgba(35,24,21,.9);
    font-size: 18px;
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.news .content .takeaway a{
    left: 0;
    bottom: 35px;
    width:160px ;
    height: 40px;
    background-color: #2e272d;
    color: white;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}
.news .content .btn{
    bottom: 12px;
    right: 0;
}
.news .content .btn > div{
    display: inline-block;
    width: 16px;
    height: 27px;
    cursor: pointer;
}
.news .content .btn > .prv{
    background: url("../img/prv.png") no-repeat center;
}
.news .content .btn > .next{
    margin-left: 30px;
    background: url("../img/next.png") no-repeat center;
}
.news .year{
    position: relative;
    width: 1400px;
    margin: auto;
    margin-top: 120px;
    font-size: 0;
    text-align: center;
    z-index: 1;
}
.news .swiper-slide{
    margin-bottom: 65px;
}
.news .swiper-slide a{
    padding-bottom: 20px;
    border-bottom: 2px solid transparent;
    color: #979797;
    font-size: 22px;
}
.news .swiper-slide:hover a{
    border-bottom-color:#231815 ;
    color: #231815;
    font-weight: bold;
}
.news .swiper-slide.on a{
    border-bottom-color:#231815 ;
    color: #231815;
    font-weight: bold;
}
.news .year .swiper-button-next,
.news .year .swiper-button-prev{
    top: 15px;
    width: 9px;
    height: 15px;
    margin-top: -7.5px;
    background-size: 9px 15px;
}
.news .year .swiper-button-next{
    background-image: url("../img/l.png");
    right: 0;
}
.news .year .swiper-button-prev{
    background-image: url("../img/r.png");
    left:  0;
}


.news-details{
    padding-bottom: 20px;
    text-align: center;
}
.news-details h3{
    margin-bottom: 25px;
    color: #231815;
    font-size: 36px;
}
.news-details span{
    display: block;
    margin-bottom: 25px;
    color: #818181;
    font-size: 18px;
}
.news-details p{
    color: rgba(35,24,21,.9);
}
.news-details .content{
    width: 1200px;
}
.go-back{
    margin: 75px 0 50px;
}
.go-back a{
    position: relative;
    font-size: 18px;
}
.go-back a:nth-of-type(1){
    margin-right: 40px;
}
.go-back a:nth-of-type(2){
    margin-left: 40px;
}
.go-back a:before{
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 13px;
    margin-top: -6.5px;
}
.go-back a:nth-of-type(1):before{
    right: calc(100% + 15px);
    background: url("../img/prv1.png") no-repeat center;
}
.go-back a:nth-of-type(2):before{
    left: calc(100% + 15px);
    background: url("../img/next1.png") no-repeat center;
}
.go-back a:hover{
    color: #cc9d4b;
}
.go-back a:nth-of-type(1):hover:before{
    background-image: url(../img/prv2.png);
}
.go-back a:nth-of-type(2):hover:before{
    background-image: url(../img/next2.png);
}
.go-back i{
    width: 1px;
    height: 11px;
    background-color: #484240;
}
