* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
    font-size: 14px;
}

img {
    width: 100%;
}

:root {
    --size-0: 100px;
    --size-1: 70px;
    --size-2: 40px;
    --size-3: 30px;
    --size-4: 20px;
    --size-5: 16px;
    --size-6: 14px;
    --size-7: 12px;
}

body {
    background: linear-gradient(180deg, #00A9FD 0%, #043BD5 100%);
    height: 100vh;
}

.bg-video {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: -1;
    opacity: .2;
}

header {
    position: relative;
    height: 80px;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 160px;
    align-items: center;
}

header::after {
    background-color: white;
    height: 1px;
    opacity: 0.5;
    position: absolute;
    display: block;
    content: '';
    width: calc(100vw - 320px);
    transform: translateX(160px);
    bottom: 0;
}

header .logo {
    height: 40px;
    width: auto;
}

header nav {
    display: flex;
    justify-content: end;
    line-height: 78px;
    gap: 20px;
}

header nav a {
    font-size: var(--size-5);
    text-decoration: none;
    color: white;
    padding: 0 15px;
    border-bottom: 2px solid transparent;
    opacity: 0.7;
}

header nav a.active {
    border-bottom-color: white;
    opacity: 1;
}

header nav .underline {
    color: white;
}

.languageSwitch {
    padding: 0 20px;
    font-size: var(--size-5);
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.languageItems {
    position: absolute;
    display: none;
    flex-direction: column;
    top: 60px;
    left: 0;
    padding: 15px 5px;
    background: white;
    border-radius: 10px;
    line-height: 30px;
    width: 100%;
    z-index: 2;
}

.languageItems > a {
    color: gray;
    cursor: pointer;
}

.languageItems > a.active {
    color: #08f;
}

.languageSwitch > img {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.languageSwitch > img.active {
    transform: rotate(180deg);
}

.content-wrap {
    /*padding: 0 160px;*/
    height: calc(100vh - 80px);
    /*height: 1080px;*/
    overflow: hidden;
}

.content-list {
    height: 1200%;
    display: flex;
    flex-direction: column;
    transform: translate(0, 0);
    transition: 0.4s;
}

@keyframes loop-content {
    0% {transform: translate(0, 0)}
    25% {transform: translate(0, 0)}
    50% {transform: translate(0, -25%)}
    75% {transform: translate(0, -50%)}
    100% {transform: translate(0, -75%)}
}

.content-list > div {
    height: calc(100vh - 80px);
}

.content-list h2 {
    font-size: var(--size-2);
    font-weight: 500;
}

.content-list h3 {
    font-size: var(--size-3);
    font-weight: 500;
}

.home {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.home-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    color: white;
    padding: 0 160px;
}

.home-left .home-logo {
    height: 45px;
    width: 160px;
}

.home-left .home-title {
    font-size: var(--size-1);
    font-weight: 600;
}

.home-left .home-title2 {
    font-size: var(--size-2);
    font-weight: 500;
}

.home-left .home-qr {
    height: 140px;
    width: 140px;
}

.home-right {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
}

.home-right .loop-wrap {
    position: relative;
    width: 384px;
    height: 590px;
}

.home-right .loop-wrap-bg {
    position: absolute;
}


.loop-container-out {
    position: absolute;
    top: 6px;
    left: 148px;
    width: 190px;
    height: 412px;
    overflow: hidden;
    border-radius: 22px;
}

.loop-container {
    height: 100%;
    width: 400%;
    overflow: hidden;
    transform: translate(0,0);
    animation-name: loop;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    display: flex;
}

.loop-container > img {
    width: 192px;
}

@keyframes loop {
    0% {transform: translate(0, 0)}
    25% {transform: translate(0, 0)}
    50% {transform: translate(-25%, 0)}
    75% {transform: translate(-50%, 0)}
    100% {transform: translate(-75%, 0)}
}

.showCase1 {
    position: relative;
    display: grid;
    grid-template-areas:"left right";
    grid-template-columns: 1fr 1fr;
}

.showCase1 .showCase1Img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55%;
}

.showCase1 .showCase1Content {
    grid-area: right;
    display: flex;
    color: white;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.showCase1Content p {
    line-height: 30px;
}

.showCase1Content p:nth-child(3) {
    margin-top: 20px;
}

.showCase1Content p:nth-child(6) {
    margin-top: 10px;
    color: #FFFFFF;
    opacity: 0.7;
}

.showCase1Content p:nth-child(7) {
    line-height: 50px;
}

.showCase1Content .partner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.action-list {
    display: none;
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    flex-direction: column;
    gap: 20px;
}

.action-list.active {
    display: flex;
}

.action-list-item {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.action-list-item-title {
    display: none;
}

.action-list-item-title.active {
    display: block;
}

.action-list-item-bar {
    background: #FFFFFF;
    width: 15px;
    height: 2px;
    opacity: .5;
}

.action-list-item-bar.active {
    opacity: 1;
    width: 30px;
}

.showCase2,
.showCase3,
.showCase4,
.showCase5,
.showCase6 {
    color: white;
    padding: 0 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 80px;
}

.showCase2 img {
    width: 320px;
    height: 320px;
}

.showCase2Content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.showCase2Content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.showCase2Content > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.showCase2 .stepBg {
    position: absolute;
    font-size: var(--size-0);
    font-weight: bold;
    font-style: italic;
    opacity: 0.5;
    left: 40%;
}

.showCase2 .descLeft {
    font-size: var(--size-2);
    height: 53px;
    border-bottom: 24px solid #003cff;;
}

.showCase2 .descRight {
    font-size: var(--size-4);
}

.showCase3Content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.showCase3Content > div {
    display: flex;
    flex-direction: column;
    align-items: start;
}

/*.showCase3Content img {*/
/*    width: 300px;*/
/*    height: 410px;*/
/*}*/

.showCase3 > div > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.showCase3 > div > div > * {
    width: 75%;
}

.showCase3 > div > div > h3 {
    text-align: center;
}

.showCase4Content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 30px;
    justify-items: start;
}

.showCase4Desc {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 25px 0;
}

.showCase4Desc p {
    line-height: 30px;
    font-size: var(--size-5);
}

.showCase4Content img {
    width: 520px;
    height: 366px;
    justify-self: end;
}

.showCase5 > h2 {
    margin-bottom: 50px;
}

.showCase5Content {
    color: black;
    width: 100%;
    height: 30%;
    position: relative;
}

.showCase5Content > div {
    background-color: white;
    border: 2px solid white;
    border-radius: 10px;
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
}

.showCase5Content > div:nth-child(1) {
    position: absolute;
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0.2;
    transition: 0.4s ease;
    /*animation-name: showCase5Content1;*/
    /*animation-duration: 8s;*/
    /*animation-iteration-count: infinite;*/
}

@keyframes showCase5Content1 {
    0% {transform: translate(0, 0)}
    33.33% {transform: translate(100%, 0); opacity: 0.2}
    66.66% {transform: translate(50%, 0) scale(1.5); opacity: 1; z-index: 2}
    100% {transform: translate(0, 0)}
}

.showCase5Content > div:nth-child(2) {
    position: absolute;
    left: 25%;
    width: 50%;
    z-index: 2;
    opacity: 1;
    transition: 0.4s ease;
    transform: scale(1.5);
    /*animation-name: showCase5Content2;*/
    /*animation-duration: 8s;*/
    /*animation-iteration-count: infinite;*/
}

@keyframes showCase5Content2 {
    0% {transform: translate(0, 0) scale(1.5)}
    33.33% {transform: translate(-50%, 0); opacity: 0.2; z-index: 1}
    66.66% {transform: translate(50%, 0); opacity: 0.2; z-index: 1}
    100% {transform: translate(0, 0) scale(1.5)}
}

.showCase5Content > div:nth-child(3) {
    position: absolute;
    left: 50%;
    width: 50%;
    z-index: 1;
    transition: 0.4s ease;
    opacity: 0.2;
    /*animation-name: showCase5Content3;*/
    /*animation-duration: 8s;*/
    /*animation-iteration-count: infinite;*/
}

@keyframes showCase5Content3 {
    0% {transform: translate(0, 0)}
    33.33% {transform: translate(-50%, 0) scale(1.5); opacity: 1; z-index: 2}
    66.66% {transform: translate(-100%, 0)}
    100% {transform: translate(0, 0)}
}

.showCase5ContentSwitch {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: -100px;
}

.showCase5ContentSwitch > div {
    width: 10px;
    height: 6px;
    opacity: 0.5;
    background: white;
    border-radius: 3px;
    transition: 0.4s ease;
    cursor: pointer;
}

.showCase5ContentSwitch > div.active {
    width: 40px;
    opacity: 1;
}

.showCase5ContentTitle {
    font-size: var(--size-5);
}

.showCase5ContentValue {
    line-height: 1.8;
    text-indent: 2em;
    font-size: var(--size-7);
    color: #333333
}

.showCase5ContentFromUser {
    font-size: var(--size-7);
    color: #999999;
    width: 100%;
    text-align: end;
}

.showCase6 .showCase6Content {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.showCase6ContentCard {
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    cursor: pointer;
}

.showCase6Content > div > img {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
}

.showCase6Content > div > img.active {
    transform: rotate(180deg);
}

.showCase6ContentTitle {
    color: #000000;
    font-size: var(--size-5);
}

.showCase6ContentValue {
    display: none;
    color: #666666;
    line-height: 20px;
    transition: 0.4s ease;
}

.aboutUs1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: white;
    padding: 0 250px;
    align-items: center;
    justify-items: center;
}

.aboutUs1Left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.aboutUs1LeftTop {
    font-size: var(--size-2);
    line-height: 60px;
}

.aboutUs1LeftBottom {
    display: flex;
    justify-content: start;
    gap: 45px;
}

.aboutUs1LeftBottom > img:first-child {
    width: 280px;
    height: 50px;
}

.aboutUs1LeftBottom > img:nth-child(2) {
    width: 200px;
    height: 50px;
}

.aboutUs1Right {
    width: 500px;
    height: 379px;
}

.aboutUs2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: white;
    padding: 0 250px;
    align-items: center;
    justify-items: center;
}

.aboutUs2LeftTop {
    font-size: var(--size-2);
    line-height: 60px;
}

.aboutUs2LeftBottom {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.aboutUs2LeftBottom > img:first-child {
    width: 198px;
    height: 40px;
}

.aboutUs2LeftBottom > img:nth-child(2) {
    width: 193px;
    height: 50px;
}

.aboutUs2LeftBottom > img:nth-child(3) {
    width: 177px;
    height: 50px;
}

.aboutUs2LeftBottom > img:nth-child(4) {
    width: 162px;
    height: 50px;
}

.aboutUs2LeftBottom > img:nth-child(5) {
    width: 156px;
    height: 50px;
}

.aboutUs2LeftBottom > img:nth-child(6) {
    width: 196px;
    height: 50px;
}

.aboutUs2Right {
    width: 456px;
    height: 571px;
}

.aboutUs3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.aboutUs3 > div > p {
    color: white;
    line-height: 60px;
    font-size: var(--size-2);
}

.aboutUs3 > img {
    width: 960px;
    height: 483px;
}

.aboutUs4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.aboutUs4Title {
    color: white;
    font-size: var(--size-2);
}

.aboutUs4List {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
    row-gap: 15px;
}

.aboutUs4Card {
    width: 100%;
    background: white;
    border-radius: 10px;
    padding: 30px;
    font-size: var(--size-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}

.aboutUs4Card > img {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
    margin-left: 20px;
}

.contactUs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 250px;
    column-gap: 50px;
}

.contactUsLeft {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.contactUsLeft > img:nth-child(1) {
    width: 348px;
    height: 90px;
}

.contactUsLeft > img:nth-child(2) {
    border-radius: 140px;
    width: 140px;
    height: 140px;
}

.contactUsRight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.contactUsRightTitle {
    color: white;
    font-size: var(--size-2);
}

.contactUsMobileAndEMail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contactUsItem {
    display: flex;
    flex-direction: column;
}

.contactUsItem > div:nth-child(1) {
    color: white;
    font-size: var(--size-3);
}

.contactUsItem > div:nth-child(2) {
    color: white;
    font-size: var(--size-5);
}

.wxAndZhiHu {
    display: flex;
    gap: 30px;
}

.wxAndZhiHu  img {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

@media (max-width: 1200px) {
    header {
        padding: 0 70px;
    }

    header::after {
        width: calc(100vw - 140px);
        transform: translateX(70px);
    }

    .showCase2,
    .showCase3,
    .showCase4,
    .showCase5,
    .showCase6,
    .aboutUs1{
        padding: 0 160px;
    }

    .aboutUs2 {
        padding: 0 90px;
    }

    .contactUs {
        padding: 0 120px;
        gap: 0px;
    }
}

@media (max-width: 992px) {
    header {
        padding: 0 10px;
    }

    header::after {
        width: calc(100vw - 20px);
        transform: translateX(10px);
    }

    .home-left {
        padding: 0 35px;
    }

    .showCase2,
    .showCase3,
    .showCase4,
    .showCase5,
    .showCase6,
    .aboutUs1,
    .aboutUs2 {
        padding: 0 10px;
    }

    .aboutUs1LeftTop,
    .aboutUs2LeftTop,
    .aboutUs3 > div > p {
        font-size: var(--size-3);
    }

    .aboutUs2LeftBottom {
        grid-template-columns: repeat(2, 1fr);
    }

    .contactUsMobileAndEMail {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
}

@media (max-width: 872px) {
    header nav {
        display: none;
    }
}

@media (max-width: 768px) {
    header nav {
        display: none;
    }

    .showCase1 {
        grid-template-columns: unset;
    }

    .showCase1 > img {
        opacity: 0.8;
    }

    .showCase2 img {
        width: 200px;
        height: 200px;
    }

    .showCase4Content {
        grid-template-columns: 1fr;
    }

    .showCase4Content img {
        justify-self: center;
    }

    .aboutUs1,
    .aboutUs2 {
        grid-template-columns: 1fr;
    }

    .aboutUs1Right{
        width: 400px;
        height: auto;
    }

    .aboutUs2Right {
        width: 300px;
        height: auto;
    }

    .aboutUs2LeftBottom {
        justify-items: center;
    }

    .aboutUs2LeftBottom > img {
        width: 120px !important;
        height: auto !important;
    }

    .aboutUs3 > img {
        width: 750px;
        height: auto;
    }

    .contactUs {
        grid-template-columns: 1fr
    }
}

@media (max-width: 576px) {
    .home {
        grid-template-columns: 1fr;
    }
    .home-left {
        align-items: center;
    }
    .home-left .home-title {
        font-size: var(--size-2);
        font-weight: 500;
    }
    .home-left .home-title2 {
        font-size: var(--size-3);
        font-weight: 400;
    }
    .home .loop-wrap {
        left: -50px;
    }
    .home-right {
        overflow: hidden;
    }
    .aboutUs2 {
        overflow: hidden;
    }
}