.page-header {
    color: #000;
}

section.top {
    padding-top: calc(80 * var(--rpx));
    background: linear-gradient(to bottom, #dde0e8, #fff);
    padding-bottom: calc(45 * var(--rpx));
}

.top .anchor-nav-bar {
    margin-bottom: calc(100 * var(--rpx));
}

.section-title {
    text-align: center;
}

section.brand {
    height: calc(720 * var(--rpx));
    position: relative;
}

section.brand .wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 215;
}

section.brand.dark {
    color: #fff;
}

section.brand.reversed .wrapper {
    align-items: flex-end;
}

.brand .wrapper>* {
    max-width: calc(500 * var(--rpx));
}

.brand .title {
    font-size: calc(38 * var(--rpx));
    font-weight: bold;
}

.brand .line {
    height: 2px;
    width: calc(40 * var(--rpx));
    margin-top: calc(28 * var(--rpx));
    margin-bottom: calc(30 * var(--rpx));
    background: linear-gradient(to right, rgb(80, 155, 223) 0%, rgb(72, 192, 206) 50%, rgb(221, 187, 193) 100%);
}

.brand .desc1,
.brand .desc2 {
    font-size: calc(16rem / 16);
}

.reversed .desc1,
.reversed .desc2 {
    text-align: right;
}

.brand .desc1 {
    font-weight: bold;
    margin-bottom: .7em;
}

.brand .desc2 {
    /*font-weight: lighter;*/
    line-height: calc(34em / 20);
}

section.features .wrapper {
    position: relative;
    height: 80vh;
    min-height: calc(640 * var(--rpx));
    z-index: 215;
    padding-top: calc(80 * var(--rpx));
}

.feature .title {
    font-size: calc(24rem / 16);
    max-width: 100%;
    width: calc(240em / 24);
    line-height: calc(24rem / 16);
}

.feature-list .feature {
    width: calc(240 * var(--rpx));
}

@media (max-width: 1220px) {
    .feature-list .feature {
        width: calc(255 * var(--rpx));
    }
}

@media (max-width: 750px) {
    .feature-list .feature {
        width: calc((100% - 20 * var(--rpx)) / 2);
    }

    .feature .title {
        font-size: calc(20rem / 16);
    }
}

/* .feature:nth-of-type(2) .title{
    font-size: calc(16rem / 16);
    width: 100%;
} */

section.globalization .wrapper {
    height: 80vh;
    min-height: calc(640 * var(--rpx));
    padding-top: calc(80 * var(--rpx));
    padding-bottom: calc(100 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 215;
}


.globalization .location-list-ctn {
    margin-top: calc(70 * var(--rpx));
    /*
    *1040px at 1920
    *840px at 960
    */
    width: calc(20.833vw + 640px);
    flex: 0 0 auto;
    /*
    *40px at 1920
    *20px at 960
    */
    --gap: 2.083vw;
    --col: 3;
    /*
    *30px at 1920
    *18px at 960
    */
    --padding: calc(1.250vw + 6px);
    margin-bottom: calc(-1 * var(--gap));
}

.globalization .location-list {
    margin-bottom: calc(-1 * var(--gap));

    display: flex;
    flex-wrap: wrap;
}

.globalization .location {
    width: calc(100% / var(--col) - var(--gap));
    flex: 0 0 auto;
    margin-right: calc(1 * var(--gap));
    margin-bottom: calc(1 * var(--gap));
}


.globalization .location .link {
    background-color: #fff;
    border-radius: calc(25 * var(--rpx));
    padding: var(--padding) var(--padding) var(--padding) calc(var(--padding) + 18 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    color: #000;
    font-size: calc(20 * var(--rpx));
    /*font-weight: lighter;*/
}

.globalization .location .title {
    font-weight: bold;
}

.globalization .location .desc2 {
    font-size: calc(16 * var(--rpx));
    color: #666666;
    position: absolute;
    right: var(--gap);
    top: var(--gap);

}


.globalization .location .link::before {
    content: "";
    background: linear-gradient(to bottom, rgb(80, 155, 223) 0%, rgb(72, 192, 206) 50%, rgb(221, 187, 193) 100%);
    width: 2px;
    height: calc(100% - var(--padding) * 2);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: var(--padding);
}

.location .title {}

.brand[data-id="44"] {
    background: linear-gradient(to bottom, #bec7d5, #f1f6ff);
}

.car-ctn {
    width: 55vw;
    height: calc(55vw * 0.438);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    /*
    *120px at 1920
    *30px at 960
    */
    left: clamp(30px, calc(9.375vw - 60px), 120px);
    background: url("../images/rnd_car.webp") center/contain no-repeat;
}

.ripple-ctn {
    width: 0;
    height: 0;
    position: absolute;
}

.ripple-ctn:nth-of-type(4n+1) {
    top: calc(160% / 4.6);
}

.ripple-ctn:nth-of-type(4n+2) {
    top: calc(310% / 4.6);
}

.ripple-ctn:nth-of-type(4n+3) {
    top: calc(90% / 4.6);
    transform: scale(.75);
}

.ripple-ctn:nth-of-type(4n+4) {
    top: calc(380% / 4.6);
    transform: scale(.75);
}

.ripple-ctn:nth-of-type(1),
.ripple-ctn:nth-of-type(2) {
    left: calc(340% / 9.9);
}

.ripple-ctn:nth-of-type(3),
.ripple-ctn:nth-of-type(4) {
    left: calc(430% / 9.9);
}

.ripple-ctn:nth-of-type(5),
.ripple-ctn:nth-of-type(6) {
    left: calc(540% / 9.9);
}

.ripple-ctn:nth-of-type(7),
.ripple-ctn:nth-of-type(8) {
    left: calc(620% / 9.9);
}

.ripple-ctn:nth-of-type(9),
.ripple-ctn:nth-of-type(10) {
    left: calc(730% / 9.9);
}

@keyframes rippleSpread {
    0% {
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        opacity: 1;
    }

    75% {
        width: calc(90 * var(--rpx));
        height: calc(90 * var(--rpx));
        top: calc(-45 * var(--rpx));
        left: calc(-45 * var(--rpx));
        opacity: 1;
    }

    100% {
        width: calc(120 * var(--rpx));
        height: calc(120 * var(--rpx));
        top: calc(-60 * var(--rpx));
        left: calc(-60 * var(--rpx));
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    top: calc(-40 * var(--rpx));
    left: calc(-40 * var(--rpx));
    animation: rippleSpread 5s linear forwards infinite;
    border-radius: 50%;
    z-index: 220;
    background: radial-gradient(circle at center, rgba(255, 138, 147, 0) 0px, rgba(255, 138, 147, 0) calc(100% - 20px), rgba(255, 138, 147, 1) 100%);
}

.ripple-ctn::after {
    content: "";
    position: absolute;
    width: calc(60 * var(--rpx));
    height: calc(60 * var(--rpx));
    top: calc(-30 * var(--rpx));
    left: calc(-30 * var(--rpx));
    z-index: 218;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
}

.ripple:nth-of-type(1) {
    animation-delay: 0s;
}

.ripple:nth-of-type(2) {
    animation-delay: 1s;
}

.ripple:nth-of-type(3) {
    animation-delay: 2s;
}

.ripple:nth-of-type(4) {
    animation-delay: 3s;
}

.ripple:nth-of-type(5) {
    animation-delay: 4s;
}


.header-back img,
.header-back picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.page-header .wrapper {
    justify-content: center;
    margin-top: var(--header-height);
    height: calc(100vh - var(--header-height));
}

@media (max-width: 750px) {

    .page-header .wrapper {
        padding-top: calc(80 * var(--rpx));
        justify-content: flex-start;
    }

    /*.header-back{
        object-position: left;
    }*/

    .header-back img,
    .header-back picture {
        object-fit: cover;
    }

    .brand .desc1 {
        font-size: calc(24 * var(--rpx));
    }

    .brand .desc2 {
        font-size: calc(16 * var(--rpx));
    }

    .car-ctn {
        position: relative;
        width: 90vw;
        height: calc(90vw * 0.438);
        margin-left: 5%;
        left: 0;
        margin-bottom: calc(40vw / 7.5);
    }

    .ripple-ctn {
        transform: scale(.5);
    }

    .ripple-ctn:nth-of-type(4n+3),
    .ripple-ctn:nth-of-type(4n+4) {
        transform: scale(.6);
    }

    .brand[data-id="44"] {
        padding-top: calc(160vw / 7.5);
        padding-bottom: calc(160vw / 7.5);
    }

    .brand[data-id="45"] .section-back {
        object-position: 80% center;
    }

    section.brand[data-id="44"] {
        height: auto;
    }

    section.brand[data-id="44"] .wrapper {
        position: relative;
        height: auto;
    }

    section.brand[data-id="46"] .section-back {
        opacity: .4;
        object-position: 25% center;
    }

    .globalization .location-list-ctn {
        width: var(--wrapper-width);
    }

    .globalization .location-list {
        display: flex;
        flex-direction: column;
    }

    .globalization .location {
        width: 100%;
    }

    .location .desc {
        font-size: calc(16 * var(--rpx));
    }


    .section-title,
    .brand .title {
        font-size: calc(32 * var(--rpx))
    }

    section.features .wrapper {
        padding-top: calc(120 * var(--rpx));
    }

}