*{
    padding: 0;
    margin: 0
}
body{
    /* background-color: gray; */
    background-image: url('../img/cartoon-bg.png');
    background-repeat: repeat;
    min-width: 1280px;
}
.top{
    width: 1280px;
    display: flex;
    margin: auto;
    background-image: url('../img/cartoon-bg.png');
    background-repeat: repeat;
    position: relative;
    height: 220px;
}
.top .di{
    width: 100vw;
    height: 84px;
    background-color: #8C0101;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.top .left{
    height: 157px;
    width: 115.5px;
}
.topbg{
    width: 1049px;
    margin: auto;
    height: 220px;
    display: block;
}
.content{
    width: 1280px;
    margin: auto;
    height: 535px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background-image: url('../img/cartoon-bg.png');
    background-repeat: repeat;
}
.content .di{
    width: 100vw;
    height: 533px;
    background-color: #D3D3D3;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.content .banner{
    width: 1049px;
    height: 386px;
    padding: 75px 0;
}
.content .banner .swiper{
    width: 1005px;
    height: 346px;
    padding: 20px 23px;
    background-color: #D3D3D3;
    overflow: hidden;
    /* position: relative; */
}
.swiper  .swiper-slide img{
    width: 608px;
    height: 321px;
    padding: 13px 12px;
    background-color: #fff;
}
.swiper .swiper-slide{
    display: flex;
}
 .swiper .intro{
    width: 226px;
    background-color: #fff;
    height: 288px;
    padding: 30px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-left: 42px;
}
 .swiper .intro::-webkit-scrollbar{
    width: 5px;
}
.thumbs{
    width: 960px;
    height: 120px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
    z-index: 99;
    padding: 10px;
}


.left{
    width: 115.5px;
    height: 535px;
}

.thumbs img{
    width: 160px;
    height: 92px;
    display: block;
    margin:auto;
}

.thumbs .swiper-slide{
    opacity: 0.4;
    height: 120px;
    /* padding: 10px 10px 0 10px; */
}
.thumbs .swiper-slide .name{
    text-align: center;
    font-size: 14px;
}
.thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 3px solid red;
}

.swiper-button-prev::after,.swiper-button-next::after{
    content: "" !important;
}
.swiper-button-next img,.swiper-button-prev img{
    width: 62px !important;
    height: 63px !important;
    padding: 0 !important;
    background-color: none !important;
    position: absolute;
    
}
.swiper-button-next img{
    left: -50px;
}
.swiper-button-prev img{
    left: 20px;
}  

.content .more{
    position: absolute;
    bottom: -151px;
    right: 118px;
    background-color: #8C0101;
    color: #fff;
    line-height: 30px;
    width: 100px;
    text-align: center;
    border-radius: 5px;
}