@media screen and (min-width: 768px) {
    #b07-section {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    #b07-section .sticky-container {
        position: sticky;
        top: 0;
        width: 100vw;
        height: 100vh;
    }

    #b07-section .text-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        z-index: 10000;
        padding-top: 6.25vw;
        padding-left: 5.8333333333vw;
        font-size: 1.875vw;
        line-height: 2.8125vw;
        font-weight: lighter;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
        pointer-events: none;
    }

    #b07-section .text-container span {
        font-size: 2.6041666667vw;
        font-weight: bolder;
        margin-bottom: 1.0416666667vw;
    }

    #b07-section .text-container > div {
        display: none;
    }

    #b07-section .mySwiper {
        width: 100vw;
        height: 100vh;
        -webkit-transition: background 0.2s;
        transition: background 0.2s;
    }

    #b07-section .mySwiper .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover;
    }

    #b07-section .mySwiper .text-slide-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div {
        height: 100vh;
        width: 25vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        color: #fff;
        position: relative;
    }

    #b07-section .mySwiper .text-slide-container div:hover div.cover {
        top: 0;
    }

    #b07-section .mySwiper .text-slide-container div:hover span {
        opacity: 1;
    }

    #b07-section .mySwiper .text-slide-container div:nth-child(1):hover .text-container-0 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div:nth-child(2):hover .text-container-1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div:nth-child(3):hover .text-container-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div:nth-child(4):hover .text-container-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div:nth-child(5):hover .text-container-4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .mySwiper .text-slide-container div div.cover {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 52, 145, 0)), to(rgba(4, 52, 145, 0.45)));
        background: linear-gradient(180deg, rgba(4, 52, 145, 0) calc(100vh - 20.0520833333vw), rgba(4, 52, 145, 0.45) 100%);
    }

    #b07-section .mySwiper .text-slide-container div img {
        width: 3.75vw;
        margin-bottom: 1.25vw;
        z-index: 2;
    }

    #b07-section .mySwiper .text-slide-container div p {
        font-size: 1.875vw;
        line-height: 2.96875vw;
        margin-bottom: 4.1666666667vw;
        z-index: 2;
    }

    #b07-section .mySwiper .text-slide-container div span {
        opacity: 0;
        font-size: 1.25vw;
        line-height: 1.875vw;
        margin-bottom: 4.1666666667vw;
        z-index: 2;
        font-weight: lighter;
    }

    #b07-section .mySwiper .swiper-slide {
        width: 100vw;
        height: 100vh;
    }

    #b07-section .mySwiper .swiper-slide div {
        height: 100vh;
        width: 25vw;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 52, 145, 0)), to(rgba(4, 52, 145, 0.45)));
        background: linear-gradient(180deg, rgba(4, 52, 145, 0) calc(100vh - 20.0520833333vw), rgba(4, 52, 145, 0.45) 100%);
    }

    #b07-section .mySwiper .swiper-slide.slide-2 div {
        border-left: none;
    }

    #b07-section .mySwiper .swiper-slide.slide-2 div {
        margin-left: 25vw;
    }

    #b07-section .mySwiper .swiper-slide.slide-3 div {
        margin-left: 40vw;
    }

    #b07-section .mySwiper .swiper-slide.slide-4 div {
        margin-left: 60vw;
    }

    #b07-section .mySwiper .swiper-slide.slide-5 div {
        margin-left: 80vw;
    }
}

/* mob */
@media screen and (max-width: 767.98px) {
    #b07-section {
        width: 100vw;
        height: 100vh;
        margin-top: 9.6vw;
    }

    #b07-section .my-mob-swiper {
        width: 100vw;
        height: 100vh;
        -webkit-transition: background 0.2s;
        transition: background 0.2s;
    }

    #b07-section .my-mob-swiper .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover;
    }

    #b07-section .my-mob-swiper .text-slide-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #b07-section .my-mob-swiper .text-slide-container div {
        height: 100vh;
        width: 20vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        color: #fff;
    }

    #b07-section .my-mob-swiper .text-slide-container div img {
        width: 9.6vw;
        margin-bottom: 3.2vw;
        z-index: 2;
    }

    #b07-section .my-mob-swiper .text-slide-container div p {
        font-size: 4.8vw;
        line-height: 7.6vw;
        margin-bottom: 1.7333333333vw;
        z-index: 2;
    }

    #b07-section .my-mob-swiper .text-slide-container div span {
        opacity: 0;
        font-size: 3.2vw;
        line-height: 4.8vw;
        margin-bottom: 10.6666666667vw;
        z-index: 2;
    }

    #b07-section .my-mob-swiper .text-slide-container div.active span {
        opacity: 1;
    }

    #b07-section .my-mob-swiper .swiper-slide {
        width: 100vw;
        height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    #b07-section .my-mob-swiper .swiper-slide div:first-of-type {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        width: 100vw;
        max-width: 100vw;
        padding: 36vw 5.3333333333vw 0;
        font-size: 4.8vw;
        line-height: 7.4666666667vw;
        color: #fff;
    }

    #b07-section .my-mob-swiper .swiper-slide div:last-of-type {
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    #b07-section .my-mob-swiper .swiper-slide div:last-of-type img {
        width: 10.9333333333vw;
        margin-bottom: 6.4vw;
    }

    #b07-section .my-mob-swiper .swiper-slide div:last-of-type p {
        font-size: 6.4vw;
        line-height: 9.6vw;
        letter-spacing: 0.5333333333vw;
        margin-bottom: 21.3333333333vw;
        font-weight: bold;
    }

    #b07-section .my-mob-swiper .swiper-slide div:last-of-type span {
        font-size: 4.8vw;
        line-height: 7.4666666667vw;
        margin-bottom: 21.3333333333vw;
    }

    #b07-section .my-mob-swiper .swiper-button-next, #b07-section .my-mob-swiper .swiper-button-prev {
        width: 4.8vw;
        height: 4.8vw;
        bottom: 37.0666666667vw;
        top: unset;
    }

    #b07-section .my-mob-swiper .swiper-button-next::after {
        content: "";
        width: 9.6vw;
        height: 9.6vw;
        background: url("/static_material/tengshi/cn/brand/svg/right.svg") center center no-repeat;
        background-size: 100% auto;
    }

    #b07-section .my-mob-swiper .swiper-button-prev::after {
        content: "";
        width: 9.6vw;
        height: 9.6vw;
        background: url("/static_material/tengshi/cn/brand/svg/left.svg") center center no-repeat;
        background-size: 100% auto;
    }
}