.wrapper {
    position: relative;
    padding-bottom: 112px;
}

.blueWrapper {
    background: linear-gradient(360deg, #A6D1FF 0%, #3E83FC 100%);
}

.wrapperStyle1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow-x: hidden;
    position: relative;
    padding: 78px 54px;
}

.wrapperStyle1.black {
    color: #333;
}

.wrapperStyle1 .enName {
    font-size: 24px;
    margin-bottom: 14px;
}

.wrapperStyle1 .cnName {
    font-size: 30px;
    margin-bottom: 14px;
}

.wrapperStyle1 .iconsWrapper {
    display: flex;
    align-items: center;
    height: 48px;
}

.wrapperStyle1 .iconsWrapper .line1 {
    width: 239px;
}

.wrapperStyle1 .iconsWrapper .icons {
    width: 48px;
    /*height: 48px;*/
    margin: 0 22px;
}

.wrapperStyle1 .iconsWrapper .line2 {
    width: 239px;
}

.cardBox {
    width: 81%;
    margin: -46px auto 0px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 52px;
}

.cardBox .box {
    flex: 0 1 calc(33.33% - (2 * 52px) / 3);
    box-shadow: -1px -1px 4px 0px #6164660D;
    /* box-sizing: border-box; */
}

.cardBox .box .image {
    height: 286px;
    width: 100%;
    object-fit: cover;
}

.cardBox .box .desc {
    height: 114px;
    padding: 20px;
    font-size: 20px;
}

.mediaWrapper {
    width: 74%;
    margin: 0px auto 0px;
    display: flex;
    position: relative;
}

.mediaWrapper .mediaSwiperWrapper {
    width: 60%;
    height: 100%;
}

.mediaWrapper .textWrapper {
    width: 40%;
    height: 100%;
    padding: 8px 32px;
    background: #fff;
}

.mediaWrapper .textWrapper .item {
    padding: 24px 0 22px;
    border-bottom: 1px solid #c6ced2;
    color: #333;
}

.mediaWrapper .textWrapper .item .title {
    margin-bottom: 14px;
    font-size: 20px;
}

.mediaWrapper .textWrapper .item .text {
    font-size: 16px;
}

.showcaseWrapper {
    width: 66%;
    margin: 0px auto;
    background: #fff;
    position: relative;
}

.showcaseWrapper .item {
    display: flex;
    /* justify-content: space-between; */
    gap: 10px;
    margin-bottom: 10px;
}

.showcaseWrapper .item:last-child {
    margin-bottom: 0px;
}

.showcaseWrapper .item .box {
    flex: 0 1 calc(33.33% - (2 * 10px) / 3);
}

.showcaseWrapper .item .box>img {
    height: 267px;
    width: 100%;
    object-fit: cover;
}

.videoWrapper {
    width: 100%;
    margin: 0px auto;
    position: relative;
}

.videoWrapper .videoSwiper {
    width: 100%;
    height: 452px;
}

.videoWrapper .videoSwiper .swiper-slide {
    width: 40%;
    height: 100%;
    position: relative;
}

.videoWrapper .videoSwiper .swiper-slide .imgBox {
    height: 80%;
    width: 100%;
    position: relative;
}

.videoWrapper .videoSwiper .swiper-slide.swiper-slide-active .imgBox {
    height: 100%;
}

.videoWrapper .videoSwiper .swiper-slide .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videoWrapper .videoSwiper .swiper-slide .play {
    position: absolute;
    width: 82px;
    height: 82px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.liveboardWrapper .textWrapper {
    width: 28.2%;
    height: 100%;
    padding: 4px 8px;
    background: #172D59;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.liveboardWrapper .textWrapper .item {
    height: 146px;
    width: 100%;
    position: relative;
}

.liveboardWrapper .textWrapper .item .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    /*background: rgba(0,0,0,0.7);*/
}

.liveboardWrapper .textWrapper .item .yugao {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 3;
    width: 56px;
}

.liveboardWrapper .textWrapper .item .bg {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.carShowWrapper {
    width: 75%;
    height: 656px;
    background: #fff;
    padding: 48px 0;
    margin: 0px auto 0;
}

.carShowWrapper .bg {
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.video-swiper-pagination {
    background: transparent;
    margin-top: 60px;
    text-align: center;
}

.video-swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #D6E1E6;
    margin: 0 6px !important;
    opacity: 1;
    transform: rotate(45deg);
    /* 旋转 45 度 */
    transform-origin: center;
}

.video-swiper-pagination .swiper-pagination-bullet-active {
    width: 12px;
    height: 12px;
    border-right: 6px;
    background: #fff;
}

.mobBanner {
    width: 100%;
}

/* 针对大屏幕（如桌面） */
@media (min-width: 769px) {
    .mediaWrapper {
        height: 442px;
    }

    .liveboardWrapper {
        width: 60.4%;
        margin: 0px auto;
        display: flex;
        height: 458px;
        position: relative;
    }

    .liveboardWrapper .liveboardSwiper {
        width: 72.8%;
        height: 100%;
    }

    .liveboardSwiper .swiper-slide {
        position: relative;
        display: block;
    }

    .liveboardSwiper .coverimg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        object-fit: cover;
        z-index: 1;
    }

    .liveboardSwiper .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        background: rgba(7, 7, 7, 0.6);
    }

    .liveboardSwiper .text {
        z-index: 3;
        color: #fff;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        padding: 60px 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .liveboardSwiper .text .title {
        font-size: 36px;
        font-weight: bold;
    }

    .liveboardSwiper .text .time {
        font-size: 16px;
        margin: 27px 0 68px;
    }

    .liveboardSwiper .text>a>img {
        width: 128px;
    }

    .livacardLine .icons {
        width: 60px !important;
    }

    .whiteMore {
        font-size: 24px;
        position: absolute;
        top: 180px;
        right: 7.5%;
        background-image: url("../images/oicon/more.png");
        color: #fff;
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 30px;
    }

    .whiteMore.black {
        color: #000;
        background-image: url("../images/oicon/more2.png");
    }

    .mediaMore {
        background-image: url("../images/oicon/more.png");
        color: #fff;
    }
}

/* 针对小屏幕（如手机） */
@media (max-width: 768px) {
    .whiteMore {
        color: #fff;
        font-size: 14px;
        background-image: url("../images/oicon/more4.png");
        background-size: 14px 14px;
        background-repeat: no-repeat;
        background-position: center;
        background-position: calc(50% + 25px) center;
        /* 水平右移50px，垂直居中 */
        /* padding-right: 50px; */
        margin-top: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .whiteMore.black {
        background-image: url("../images/oicon/more3.png");
        color: #000;
    }

    .mediaMore {
        background-image: url("../images/oicon/more3.png");
        color: #000;
    }

    .wrapper {
        padding-bottom: 50px;
    }

    .wrapperStyle1 {
        padding: 28px 0;
    }

    .newsPadding {
        padding-bottom: 38px;
    }

    .wrapperStyle1 .enName {
        display: none;
    }

    .wrapperStyle1 .cnName {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .wrapperStyle1 .iconsWrapper {
        height: 24px;
    }

    .wrapperStyle1 .iconsWrapper .line1 {
        width: 143px;
    }

    .wrapperStyle1 .iconsWrapper .icons {
        width: 24px;
        /*height: 24px;*/
        margin: 0 12px;
    }

    .wrapperStyle1 .iconsWrapper .line2 {
        width: 143px;
    }

    .cardBox {
        width: 90%;
        margin: -22px auto 0;
        padding: 0px;
        flex-direction: column;
        gap: 14px;
    }

    .cardBox .box {
        box-shadow: 0px -1px 0px 0px #9797970D inset;
    }

    .cardBox .box:first-child {
        box-shadow: 1px 1px 4px 0px #6164660D;
    }

    .cardBox .box .image {
        height: 207px;
    }

    .cardBox .box .desc {
        padding: 16px 14px;
        height: 70px;
        font-size: 14px;
        color: #000;
    }

    .mediaWrapper {
        width: 90%;
        flex-direction: column;
    }

    .mediaWrapper .mediaSwiperWrapper {
        width: 100%;
        height: 230px;
    }

    .mediaWrapper .mediaSwiperWrapper .swiper-wrapper {
        height: 190px;
    }

    .mediaWrapper .textWrapper {
        width: 100%;
        padding: 20px 14px;
        background: #fff;
        margin-top: 18px;
    }

    .mediaWrapper .textWrapper .item {
        padding: 0 0 14px;
        margin-bottom: 18px;
    }

    .mediaWrapper .textWrapper .item:last-child {
        margin-bottom: 0px;
    }

    .mediaWrapper .textWrapper .item .title {
        margin-bottom: 15px;
        font-size: 14px;
    }

    .mediaWrapper .textWrapper .item .timeWrapper {
        font-size: 12px;
        color: #989898;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mediaWrapper .textWrapper .item .timeWrapper .detail {
        display: flex;
        align-items: center;
    }

    .mediaWrapper .textWrapper .item .timeWrapper .detail>img {
        width: 10px;
        height: 7px;
        margin-left: 9px;
    }

    .videoWrapper .videoSwiper {
        height: 300px;
    }

    .videoWrapper .videoSwiper .swiper-slide {
        width: 70%;
        flex-direction: column;
        padding-top: 10px;
    }

    .videoWrapper .videoSwiper .swiper-slide .imgBox {
        height: 150px !important;
        padding-top: 10px;
    }

    .videoWrapper .videoSwiper .swiper-slide .image {
        height: 100%;
    }

    .videoWrapper .videoSwiper .swiper-slide .play {
        width: 27px;
        height: 27px;
    }

    .videoWrapper .videoSwiper .swiper-slide .text {
        height: 130px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        margin-top: 24px;
    }

    .videoWrapper .videoSwiper .swiper-slide.swiper-slide-active {
        padding: 0;
    }

    .videoWrapper .videoSwiper .swiper-slide.swiper-slide-active .imgBox {
        height: 170px !important;
    }

    .videoWrapper .videoSwiper .swiper-slide .text .mob {
        display: none;
    }

    .videoWrapper .videoSwiper .swiper-slide.swiper-slide-active .text .mob {
        display: block;
    }

    .video-swiper-pagination {
        display: none;
    }

    .showcaseWrapper {
        margin: 0 auto;
        width: 90%
    }

    .showcaseWrapper .item {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .showcaseWrapper .item .box {
        position: relative;
    }

    .showcaseWrapper .item .title {
        position: absolute;
        bottom: 14px;
        color: #fff;
        text-align: center;
        left: 0;
        right: 0;
    }

    .showcaseWrapper .item .box>img {
        height: auto;
    }

    .livacardLine .icons {
        width: 28px !important;
    }

    .liveboardWrapper {
        margin: 0;
        width: 100%;
        flex-direction: column;
        height: auto;
    }

    .liveboardWrapper .liveboardSwiper {
        width: 100%;
        height: auto;
    }

    .liveboardWrapper .swiper-wrapper {
        flex-direction: column;
    }

    .liveboardSwiper .swiper-slide {
        flex-direction: column;
        box-shadow: 0px 0 5px #eee;
        width: 90%;
        margin: 0 auto 18px;
    }

    .liveboardSwiper .swiper-slide .text {}

    .liveboardSwiper .swiper-slide .text .title {
        padding: 14px;
        font-size: 14px;
        color: #000;
    }

    .liveboardSwiper .swiper-slide .text .time {
        padding-bottom: 14px;
        font-size: 12px;
    }

    .carShowWrapper {
        width: 90%;
        margin: 0px auto;
        height: auto;
    }

    .carShowWrapper .bg {
        width: 94%;
        height: auto;
    }
}