.banner {
    width: 100vw;
    position: relative;
    padding-top: 110px;
}
.banner .page {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    display: flex;
}
.banner .page .item {
    width: 11px;
    height: 11px;
    background: #FAFAFA;
    opacity: 0.37;
    border-radius: 6px;
    margin-right: 11px;
    transition: 0.6s;
    cursor: pointer;
}
.banner .page .item:nth-last-child(1) {
    margin-right: 0;
}
.banner .page .page_on {
    width: 32px;
    height: 11px;
    background: #E60012;
    border-radius: 6px;
    opacity: 1;
}
.banner .swiper {
    width: 100%;
    height: 100%;
}
.banner .swiper .swiper-slide .slide-inner {
    width: 100%;
    height: 100%;
}
.banner .swiper .swiper-slide .slide-inner  img {
    display: block;
    width: 100%;
    height: 100%;
}
.banner .swiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.banner .swiper .swiper-slide .text {
    position: absolute;
    top: 50%;
    left: 112px;
    transform: translateY(-50%);
}
.banner .swiper .swiper-slide .text h1 {
    font-size: 44px;
    font-family: Roboto;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 50px;
}
.banner .swiper .swiper-slide .text p {
    font-size: 16px;
    font-family: Roboto;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: 40px;
}
.banner .swiper .swiper-slide .btn {
    display: block;
    width: 192px;
    height: 52px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    position: absolute;
    bottom: 261px;
    left: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.6s;
}
.banner .swiper .swiper-slide .btn:hover {
    background: #E50012;
}
.banner .swiper .swiper-slide .btn .jiantou {
    width: 6px;
    margin-left: 22px;
}
.banner .swiper .swiper-slide .btn p {
    font-size: 14px;
    font-family: Roboto;
    font-weight: 400;
    color: #FFFFFF;
}
.pro {
    width: 100%;
    background: #fff;
    padding-top: 99px;
}
.pro .joke {
    width: 1212px;
    margin: auto;
    position: relative;
}
.pro .joke .title {
    margin-bottom: 49px;
}
.pro .joke .title h1 {
    font-size: 42px;
    font-family: Roboto;
    font-weight: bold;
    color: #2D2D2D;
}
.pro .joke .index_pro {
    padding-bottom: 113px;
}
.pro .joke .index_pro .swiper-wrapper {
    flex-wrap: wrap;
    gap: 40px 94px;
}
.pro .joke .index_pro .swiper-slide {
    width: 341px;
}
.pro .joke .index_pro .swiper-slide .top {
    width: 100%;
    height: 47px;
    background: #F0F0F0;
    line-height: 47px;
    padding-left: 15px;
}
.pro .joke .index_pro .swiper-slide .top span {
    display: block;
    width: 16px;
    height: 2px;
    background: #020202;
    margin-bottom: 32px;
}
.pro .joke .index_pro .swiper-slide .top a {
    display: block;
    font-size: 16px;
    font-family: Roboto;
    font-weight: 400;
    color: #666666;
    transition: 0.6s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: 0.6s;
}
.pro .joke .index_pro .swiper-slide .top a:hover {
    color: #DC0715;
}
.pro .joke .index_pro .swiper-slide .img {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
.pro .joke .index_pro .swiper-slide .img img {
    width: 100%;
    transition: 0.6s;
}
.pro .joke .index_pro .swiper-slide .img:hover img {
    transform: scale(1.1);
}
.pro .joke .btn {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    z-index: 1;
}
.pro .joke .btn .jiantou1 {
    width: 73px;
    height: 38px;
    border: 1px solid #E50012;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pro .joke .btn .jiantou1:nth-child(1) {
    border-right: none;
}
.about {
    width: 100%;
    background: #F6F6F6;
    position: relative;
}
.about .joke {
    width: 1692px;
    margin: auto;
}
.about .joke .content h1 {
    font-size: 42px;
    font-family: Roboto;
    font-weight: bold;
    color: #2D2D2D;
}
.about .joke .content {
    overflow: hidden;
    margin-bottom: 141px;
}
.about .joke .content .title {
    margin-top: 73px;
    margin-bottom: 61px;
}
.about .joke .content .text {
    width: 782px;
}
.about .joke .content .text p {
    font-size: 17px;
    font-family: Roboto;
    font-weight: 400;
    color: #666666;
    line-height: 24px;
}
.about .joke .num {
    display: flex;
    position: relative;
    z-index: 2;
    margin-bottom: 168px;
}
.about .joke .num .item {
    width: 333px;
    height: 239px;
    background: #FFFFFF;
    margin-right: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 69px;
}
.about .joke .num .item p {
    font-size: 40px;
    font-family: Roboto;
    font-weight: 500;
    color: #000000;
    margin-top: 37px;
    margin-bottom: 23px;
}
.about .joke .num .item .en {
    font-size: 17px;
    font-family: Roboto;
    font-weight: 400;
    color: #666666;
    margin: 0;
}
.about .background {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.about .icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 97px;
}
.about .icon .img {
    height: 70px;
}
.about .icon .img img {
    display: block;
    max-height: 100%;
}
.design {
    width: 100%;
    position: relative;
}
.design .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.design .background img {
    width: 100%;
    height: 100%;
}
.design .joke {
    width: 1692px;
    margin: auto;
    padding-top: 99px;
    padding-bottom: 99px;
}
.design .joke h1 {
    font-size: 42px;
    font-family: Roboto;
    font-weight: bold;
    color: #2D2D2D;
}
.design .joke .content {
    display: flex;
    justify-content: center;
    margin-top: 138px;
}
.design .joke .content .left {
    position: relative;
    margin-right: 420px;
}
.design .joke .content .left .item {
    display: flex;
    align-items: center;
    margin-bottom: 149px;
}
.design .joke .content .left .item .iconfont {
    font-size: 27px;
    color: #666666;
    margin-right: 24px;
    transition: 0.6s;
}
.design .joke .content .left .item p {
    font-size: 14px;
    font-family: Roboto;
    font-weight: 400;
    color: #666666;
    text-transform: uppercase;
    transition: 0.6s;
}
.design .joke .content .left .item_on .iconfont,.design .joke .content .left .item_on p {
    color: #E92231;
}
.design .joke .content .left:after {
    content: "";
    position: absolute;
    height: 325px;
    border: 1px dashed #666666;
    top: 27px;
    left: 13px;
}
.design .joke .content .right {
    width: 772px;
    display: flex;
    position: relative;
}
.design .joke .content .right .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 110%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.design .joke .content .right .btns .jt img {
    display: block;
    width: 12px;
}
.design .joke .content .right .btns .jt {
    cursor: pointer;
}
.design .joke .content .right .btns .jt.next {
    transform: rotate(180deg);
}
.design .joke .content .right .swiper {
    width: 100%;
}
.design .joke .content .right .swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.design .joke .content .right .swiper .swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.design .joke .content .right .item {
    height: 470px;
    position: absolute;
    top: 0;
    left: 0;
}
.design .joke .content .right .item>img {
    display: block;
    margin-top: 58px;
    width: 720px;
}
.design .joke .content .right .item .btn {
    width: 26px;
    height: 470px;
    background: rgba(153,153,153,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}
.design .joke .content .right .item .btn img {
    cursor: pointer;
    transition: 0.6s;
}
.design .joke .content .left .item.on .iconfont, .design .joke .content .left .item.on p {
    color: #E92231;
}
.design .joke .content .left .item:nth-last-child(1) {
    margin-bottom: 0;
}
.design .joke .content .left .line {
    content: "";
    position: absolute;
    height: 0px;
    border: 1px dashed #E92231;
    top: 27px;
    left: 13px;
    z-index: 1;
    transition: 0.6s;
}
.design .joke .content .right .second {
    left: 720px;
    transition: 1s;
    display: flex;
    background-image: url('/static/images/index-design-bg.jpg');
    z-index: 1;
}
.design .joke .content .right .second>img, .design .joke .content .right .third>img {
    width: 720px;
}
/*.design .joke .content .right .second.item_on {*/
/*    left: 0;*/
/*}*/
.design .joke .content .right .item .item_on img {
    transform: rotate(540deg);
}
.design .joke .content .right .third {
    left: 747px;
    transition: 1s;
    display: flex;
    z-index: 2;
    background-image: url('/static/images/index-design-bg.jpg');
}
/*.design .joke .content .right .third.item_on {*/
/*    left: 26px;*/
/*}*/
.news {
    width: 100%;
    padding-top: 99px;
}
.news .joke {
    width: 1692px;
    margin: auto;
    overflow: hidden;
}
.news h1 {
    font-size: 42px;
    font-family: Roboto;
    font-weight: 500;
    color: #2D2D2D;
}
.news .joke .content {
    margin-top: 57px;
    display: flex;
    align-items: flex-start;
}
.news .joke .content .text p {
    font-size: 15px;
    font-family: Roboto;
    font-weight: 400;
    color: #666666;
}
.news .joke .content .text .time {
    font-size: 13px;
    font-family: Roboto;
    font-weight: 500;
    color: #797979;
    margin-bottom: 21px;
}
.news .joke .content .text .title {
    display: block;
    width: 356px;
    font-size: 20px;
    font-family: Roboto;
    font-weight: 400;
    color: #292929;
    margin-bottom: 31px;
    transition: 0.6s;
}
.news .joke .content .text .title:hover {
    color: #D41924;
}
.news .joke .content .left {
    width: 717px;
    border-bottom: 1px solid #D6D6D6;
    margin-right: 128px;
}
.news .joke .content .left .text {
    padding: 46px 0 38px;
}
.news .joke .content .right .item {
    display: flex;
    padding-bottom: 36px;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 30px;
}
.news .joke .content .right .item:nth-last-child(1) {
    border: none;
}
.news img {
    display: block;
    transition: 0.6s;
}
.news .joke .content .right .item .img {
    margin-right: 31px;
    width: 252px;
    height: 161px;
}
.news .joke .content .left .img {
    width: 100%;
    height: 455px;
}
.news .joke .content .img {
    overflow: hidden;
}
.news .joke .content .img a {
    display: block;
    width: 100%;
    height: 100%;
}
.news .joke .content .img img {
    display: block;
    width: 100%;
    height: 100%;
}
.news .joke .content .img:hover img {
    transform: scale(1.1);
}

.pro1 .joke .index_pro .swiper-slide .top {
    background: #F7F8FD;
    padding: 81px 38px;
    position: relative;
}
.pro1 .joke .index_pro .swiper-slide .top:after {
    content: "";
    width: 16px;
    height: 2px;
    background: #020202;
    position: absolute;
    top: 47px;
    left: 38px;
}
.pro1 .joke {
    width: 1600px;
}
.pro1 .joke .index_pro {
    width: 100%;
}
.pro1 .joke .index_pro .swiper-slide {
    width: 470px;
}
.pro1 .joke .index_pro .swiper-wrapper {
    flex-wrap: unset;
    gap: unset;
}
@media screen and (max-width: 1919px) {
    .banner{
       padding-top: 5.7291666667vw;
    }
    .banner .page{
        bottom: 3.90625vw;
    }
    .banner .page .item{
        width: 0.5729166667vw;
        height: 0.5729166667vw;
        border-radius: 0.3125vw;
        margin-right: 0.5729166667vw;
    }
    .banner .page .page_on{
        width: 1.6666666667vw;
        height: 0.5729166667vw;
        border-radius: 0.3125vw;
    }
    .banner .swiper .swiper-slide .text{
        left: 5.8333333333vw;
    }
    .banner .swiper .swiper-slide .text h1{
        font-size: 2.2916666667vw;
        line-height: 2.6041666667vw;
    }
    .banner .swiper .swiper-slide .text p{
        font-size: 0.8333333333vw;
        margin-top: 2.0833333333vw;
    }
    .banner .swiper .swiper-slide .btn{
        width: 10vw;
        height: 2.7083333333vw;
        border-radius: 0.2083333333vw;
        bottom: 13.59375vw;
        left: 5.9895833333vw;
    }
    .banner .swiper .swiper-slide .btn .jiantou{
        width: 0.3125vw;
        margin-left: 1.1458333333vw;
    }
    .banner .swiper .swiper-slide .btn p{
        font-size: 0.7291666667vw;
    }
    .pro{
        padding-top: 5.15625vw;
    }
    .pro .joke{
        width: 63.125vw;
    }
    .pro .joke .title{
        margin-bottom: 2.5520833333vw;
    }
    .pro .joke .title h1{
        font-size: 2.1875vw;
    }
    .pro .joke .index_pro{
        padding-bottom: 5.8854166667vw;
    }
    .pro .joke .index_pro .swiper-slide{
        width: 17.7604166667vw;
    }
    .pro .joke .index_pro .swiper-slide .top{
        height: 2.4479166667vw;
        line-height: 2.4479166667vw;
        padding-left: 0.78125vw;
    }
    .pro .joke .index_pro .swiper-slide .top span{
        width: 0.8333333333vw;
        height: 0.1041666667vw;
        margin-bottom: 1.6666666667vw;
    }
    .pro .joke .index_pro .swiper-slide .top a{
        font-size: 0.8333333333vw;
    }
    .pro .joke .btn .jiantou1{
        width: 3.8020833333vw;
        height: 1.9791666667vw;
        border-radius: 0.1041666667vw;
    }
    .about .joke{
        width: 88.125vw;
    }
    .about .joke .content h1{
        font-size: 2.1875vw;
    }
    .about .joke .content{
        margin-bottom: 7.34375vw;
    }
    .about .joke .content .title{
        margin-top: 3.8020833333vw;
        margin-bottom: 3.1770833333vw;
    }
    .about .joke .content .text{
        width: 40.7291666667vw;
    }
    .about .joke .content .text p{
        font-size: 0.8854166667vw;
        line-height: 1.25vw;
    }
    .about .joke .num{
        margin-bottom: 8.75vw;
    }
    .about .joke .num .item{
        width: 17.34375vw;
        height: 12.4479166667vw;
        margin-right: 0.15625vw;
        padding-left: 3.59375vw;
    }
    .about .joke .num .item p{
        font-size: 2.0833333333vw;
        margin-top: 1.9270833333vw;
        margin-bottom: 1.1979166667vw;
    }
    .about .joke .num .item .en{
        font-size: 0.8854166667vw;
    }
    .about .icon{
        padding-bottom: 5.0520833333vw;
    }
    .about .icon .img{
        height: 3.6458333333vw;
    }
    .design .joke{
        width: 88.125vw;
        padding-top: 5.15625vw;
        padding-bottom: 5.15625vw;
    }
    .pro .joke .index_pro .swiper-wrapper {
        gap: 2.08333333vw 4.89583333vw;
    }
    .design .joke h1{
        font-size: 2.1875vw;
    }
    .design .joke .content{
        margin-top: 7.1875vw;
    }
    .design .joke .content .left{
        margin-right: 21.875vw;
    }
    .design .joke .content .left .item{
        margin-bottom: 7.7604166667vw;
    }
    .design .joke .content .left .item .iconfont{
        font-size: 1.40625vw;
        margin-right: 1.25vw;
    }
    .design .joke .content .left .item p{
        font-size: 0.7291666667vw;
    }
    .design .joke .content .left::after{
        height: 16.9270833333vw;
        top: 1.40625vw;
        left: 0.6770833333vw;
    }
    .design .joke .content .right{
        width: 40.2083333333vw;
    }
    .design .joke .content .right .btns .jt img{
        width: 0.625vw;
    }
    .design .joke .content .right .item{
        height: 24.4791666667vw;
    }
    .design .joke .content .right .item > img{
        margin-top: 3.0208333333vw;
        width: 37.5vw;
    }
    .design .joke .content .right .item .btn{
        width: 1.3541666667vw;
        height: 24.4791666667vw;
    }
    .design .joke .content .left .line{
        top: 1.40625vw;
        left: 0.6770833333vw;
    }
    .design .joke .content .right .second{
        left: 37.5vw;
    }
    .design .joke .content .right .second > img, .design .joke .content .right .third > img{
        width: 37.5vw;
    }
    .design .joke .content .right .third{
        left: 38.90625vw;
    }
    .news{
        padding-top: 5.15625vw;
    }
    .news .joke{
        width: 88.125vw;
    }
    .news h1{
        font-size: 2.1875vw;
    }
    .news .joke .content{
        margin-top: 2.96875vw;
    }
    .news .joke .content .text p{
        font-size: 0.78125vw;
    }
    .news .joke .content .text .time{
        font-size: 0.6770833333vw;
        margin-bottom: 1.09375vw;
    }
    .news .joke .content .text .title{
        width: 18.5416666667vw;
        font-size: 1.0416666667vw;
        margin-bottom: 1.6145833333vw;
    }
    .news .joke .content .left{
        width: 37.34375vw;
        margin-right: 6.6666666667vw;
    }
    .news .joke .content .left .text{
        padding: 2.3958333333vw 0px 1.9791666667vw;
    }
    .news .joke .content .right .item{
        padding-bottom: 1.875vw;
        margin-bottom: 1.5625vw;
    }
    .news .joke .content .right .item .img{
        margin-right: 1.6145833333vw;
    }
    .pro1 .joke .index_pro .swiper-slide .top{
        padding: 4.21875vw 1.9791666667vw;
    }
    .pro1 .joke .index_pro .swiper-slide .top::after{
        width: 0.8333333333vw;
        height: 0.1041666667vw;
        top: 2.4479166667vw;
        left: 1.9791666667vw;
    }
    .pro1 .joke{
        width: 83.3333333333vw;
    }
    .pro1 .joke .index_pro .swiper-slide{
        width: 24.4791666667vw;
    }
    .about .background {
        width: 50vw;
    }
    .about .background img {
        display: block;
        width: 100%;
    }
    .about .joke .num .item .img {
        height: 2.55208333vw;
    }
    .about .joke .num .item .img img {
        display: block;
        height: 100%;
    }
    .pro1 .joke .index_pro .swiper-wrapper {
        gap: unset;
    }
    .news .joke .content .right .item .img {
        width: 13.125vw;
        height: 8.385416vw;
    }
    .news .joke .content .left .img {
        height: 23.69791666vw;
    }
}
@media screen and (max-width: 768px) {
    .banner {
        padding-top: 60px;
    }
    .banner .page .item {
        width: 8px;
        height: 8px;
        border-radius: 4px;
    }
    .banner .page {
        bottom: 20px;
        gap: 10px;
    }
    .banner .page .page_on {
        width: 20px;
    }
    .pro .joke {
        width: 90%;
    }
    .pro .joke .title {
        margin-bottom: 25px;
    }
    .pro .joke .title h1 {
        font-size: 22px;
    }
    .pro {
        padding: 50px 0;
    }
    .pro .joke .index_pro .swiper-wrapper {
        flex-wrap: unset;
        gap: unset;
    }
    .pro .joke .index_pro .swiper-slide .top a {
        font-size: 15px;
    }
    .pro .joke .index_pro .swiper-slide .top {
        height: unset;
        line-height: 1.4;
        padding: 15px;
    }
    .about {
        display: flex;
        flex-direction: column-reverse;
        overflow: hidden;
        padding: 0 0 40px;
    }
    .about .background {
        width: 100%;
        margin: 0 auto;
        position: unset;
    }
    .about .joke {
        width: 90%;
    }
    .about .joke .content .title {
        margin: 30px 0 20px;
    }
    .about .joke .content .text {
        width: 100%;
    }
    .about .joke .content .text p {
        font-size: 15px;
        line-height: 1.8;
    }
    .about .joke .num .item {
        width: 33.333%;
        height: unset;
        padding: 20px;
    }
    .about .joke .num .item .img {
        height: 28px;
    }
    .about .joke .num .item p {
        font-size: 28px;
        margin: 15px 0 5px;
    }
    .about .joke .num .item .en {
        font-size: 14px;
    }
    .about .joke .content h1 {
        font-size: 20px;
    }
    .about .icon {
        padding: 0;
        width: max-content;
        gap: 50px;
        animation: goA 40s infinite linear;
    }
    .about .icon .img {
        height: 40px;
    }
    @keyframes goA {
        100%{
            transform: translateX(-50%);
        }
    }
    .design .joke {
        width: 90%;
        padding: 50px 0;
    }
    .design .joke h1 {
        font-size: 22px;
    }
    .about .joke .num {
        margin-bottom: 40px;
    }
    .design .joke .content {
        display: block;
    }
    .design .joke .content .left {
        margin: 0 0 40px;
        display: flex;
        justify-content: space-between;
    }
    .design .joke .content .left .item .iconfont {
        font-size: 14px;
    }
    .design .joke .content .left .item:nth-last-child(1) .iconfont {
        font-size: 22px;
    }
    .design .joke .content .left::after {
        display: none;
    }
    .design .joke .content .left .item {
        margin: 0;
    }
    .design .joke .content .left .item p {
        font-size: 15px;

    }
    .design .joke .content .left .line {
        display: none;
    }
    .design .joke .content .right {
        width: 100%;
    }
    .news {
        padding: 50px 0;
    }
    .news h1 {
        font-size: 22px;
    }
    .news .joke {
        width: 90%;
    }
    .news .joke .content {
        margin: 40px 0 0;
        display: block;
    }
    .news .joke .content .left {
        width: 100%;
        margin: 0 0 30px;
    }
    .news .joke .content .right .item {
        display: block;
    }
    .news .joke .content .text .time {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .news .joke .content .text .title {
        width: 100%;
        font-size: 18px;

    }
    .news .joke .content .left .text {
        padding: 15px 0 10px;
    }
    .news .joke .content .right .item {
        padding: 0 0 10px;
        margin-bottom: 30px;
    }
    .news .joke .content .text {
        padding: 15px 0 0;
    }
    .pro1 {
        padding: 0 0 60px;
    }
    .pro .joke .btn {
        top: -3px;
    }
    .pro .joke .btn .jiantou1 {
        width: 50px;
        height: 30px;
    }
    .pro .joke .btn .jiantou1 img {
        width: 56%;
    }
    .pro1 .joke .index_pro .swiper-slide .top::after {
        display: none;
    }
    .news .joke .content .right .item .img {
        width: 100%;
        height: 50vw;
    }
    .news .joke .content .left .img {
        height: 50vw;
    }
}