.main,.wrap,body,html {
    height: 100%;
    overflow: hidden;
    padding: 0
}

.main .swiper {
    height: 100%
}

.main .swiper .swiper-slide {
    background-position: 50% 50%;
    background-size: cover
}

.main .swiper .swiper-slide .slide-content {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    width: 70%
}

@media screen and (max-width: 830px) {
    .main .swiper .swiper-slide .slide-content {
        -webkit-transform:translateY(-65px);
        transform: translateY(-65px);
        width: 88%
    }
}

.main .swiper .swiper-slide .backgroundFill {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.main .swiper .swiper-slide .backgroundFill img {
    -webkit-animation: brath 15s linear infinite;
    animation: brath 15s linear infinite;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

@-webkit-keyframes brath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes brath {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.main .swiper .swiper-slide .block {
    align-items: center;
    height: 100%;
    justify-content: center;
    position: relative;
    z-index: 2
}

.main .swiper .page2 .block {
    align-items: flex-end
}

.main .content .copy {
    align-items: flex-start;
    color: #fff;
    display: flex;
    flex-direction: column
}

.main .content .copy .line1,.main .content .copy .line2 {
    font-family: MarkProBold;
    font-size: 56px
}

@media screen and (max-width: 830px) {
    .main .content .copy .line1,.main .content .copy .line2 {
        font-family:MarkPro;
        font-size: 4rem;
        line-height: 1
    }
}

.main .content .copy .line2 {
    font-family: MarkProLight
}

@media screen and (max-width: 830px) {
    .main .content .copy .line2 {
        font-size:3.2rem
    }
}

.main .content .copy .line3 {
    font-family: SourceHanSansCNRegular;
    font-size: 48px;
    margin-top: 45px
}

@media screen and (max-width: 830px) {
    .main .content .copy .line3 {
        font-size:3.2rem
    }
}

.main .content .copy .desc {
    color: #c1d0e5;
    font-family: SourceHanSansCNLight;
    font-size: 19px;
    line-height: normal;
    margin-top: 16px
}

@media screen and (max-width: 830px) {
    .main .content .copy .desc {
        font-size:1.6rem
    }
}

.main .content .copy .link-btn {
    margin-top: 32px
}

.page1 {
    background-image: url(../imgs/page1.jpg)
}

.page1 .v1 {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.page1 .content {
    -webkit-transform: translate3d(0,-60%,0);
    transform: translate3d(0,-60%,0)
}

.page1 .content .copy .line1 {
    font-size: 43px;
    font-size: 8.4rem;
    line-height: 1.1
}

.page1 .content .copy .desc {
    color: #fff;
    font-family: SourceHanSansCNRegular;
    font-size: 16px;
    margin-top: 24px;
    width: 500px
}

@media screen and (max-width: 830px) {
    .page1 .content {
        -webkit-transform:translate3d(0,-100px,0);
        transform: translate3d(0,-100px,0)
    }

    .page1 .content .copy .line1 {
        font-size: 4.3rem
    }

    .page1 .content .copy .line1 span {
        display: block
    }

    .page1 .content .copy .desc {
        font-size: 1.3rem;
        width: 85%
    }
}

.page2 .slide-content {
    flex-direction: row;
    height: 88%;
    justify-content: space-between;
    -webkit-transform: translateY(0)!important;
    transform: translateY(0)!important
}

.page2 .slide-content .left,.page2 .slide-content .right {
    height: 100%;
    width: 50%
}

.page2 .slide-content .left .swiper-slide,.page2 .slide-content .right .swiper-slide {
    overflow: hidden
}

.page2 .slide-content .left .text-block {
    color: #4d4d4d;
    font-size: 41.6px;
    line-height: 1.3
}

.page2 .slide-content .left .text-block .line {
    overflow: hidden
}

.page2 .slide-content .left .text-block span {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: -webkit-linear-gradient(180deg,#29f19c,#02a1f9);
    display: block
}

.page2 .slide-content .left .text-block:first-child {
    margin-top: 112px
}

.page2 .slide-content .left .text-block:nth-child(2) {
    margin-top: 48px
}

.page2 .slide-content .left .text-block:nth-child(3) {
    margin-top: 16px
}

.page2 .slide-content .left .text-block-title {
    color: #4d4d4d;
    font-family: MarkProLight;
    font-size: 28.8px;
    line-height: normal
}

.page2 .slide-content .left .text-block-title span {
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-image: none
}

.page2 .slide-content .left .text-block-en {
    font-family: MarkProMedium
}

.page2 .slide-content .left .text-block-zh {
    font-family: SourceHanSansCNMedium
}

.page2 .slide-content .left .swiper-pagination {
    align-items: flex-end;
    bottom: 10%;
    justify-content: flex-start;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet {
    background-color: transparent;
    border-bottom: 1.5px solid #000;
    border-radius: 0;
    height: 8px;
    margin: 0 4px;
    opacity: .2;
    width: 128px
}

.page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet-active {
    background-color: none;
    background-image: -webkit-linear-gradient(180deg,#29f19c,#02a1f9);
    border: none;
    opacity: 1
}

@media screen and (max-width: 830px) {
    .page2 .slide-content .left .swiper-pagination {
        bottom:5%;
        justify-content: center
    }

    .page2 .slide-content .left .swiper-pagination .swiper-pagination-bullet {
        height: 6.5px;
        width: 64px
    }
}

.page2 .slide-content .right {
    width: 48%
}

.page2 .slide-content .right .page2-swiper2 .swiper-slide img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

@media screen and (max-width: 830px) {
    .page2 .slide-content {
        display:flex;
        flex-direction: column-reverse;
        height: 100%;
        justify-content: flex-end;
        width: 100%!important
    }

    .page2 .slide-content .left {
        height: 40%;
        margin: 0 auto;
        width: 100%;
        width: 87.2%
    }

    .page2 .slide-content .left .text-block {
        font-size: 24px;
        margin-top: 0
    }

    .page2 .slide-content .left .text-block:first-child {
        font-size: 16px;
        margin-top: 48px
    }

    .page2 .slide-content .left .text-block:nth-child(2) {
        margin-top: 16px
    }

    .page2 .slide-content .left .text-block:nth-child(3) {
        margin-top: 0
    }

    .page2 .slide-content .left .text-block .clean span {
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: -webkit-linear-gradient(180deg,#02a1f9,#02a1f9)!important
    }

    .page2 .slide-content .left .text-block-en,.page2 .slide-content .left .text-block-zh {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap
    }

    .page2 .slide-content .left .text-block-en .line:first-child,.page2 .slide-content .left .text-block-zh .line:first-child {
        margin-right: 4px
    }

    .page2 .slide-content .right {
        height: 60%;
        width: 100%
    }
}

.page4 .content .copy .desc {
    color: #effbfb
}

.page6 .content {
    line-height: normal
}

.nav {
    background-color: transparent;
    color: #262626
}

.nav .main .nav-item .tools-item .search-item .search-btn i.icon-search {
    border-color: #fff
}

.nav .item-block i.icon,.nav .item-block p {
    color: #fff
}

@media screen and (min-width: 961px) {
    .nav .item-block:hover i.icon,.nav .item-block:hover p {
        color:#09acdd!important
    }
}

.nav .item-block.active {
    color: #09acdd
}

.nav .item-block i.icon {
    display: none
}

.nav.normal-nav {
    -webkit-animation: normal-nav .5s linear forwards;
    animation: normal-nav .5s linear forwards
}

.nav.normal-nav i.icon,.nav.normal-nav p {
    color: #262626
}

.nav.normal-nav .main .nav-item .tools-item .search-item .search-btn i.icon-search {
    border-color: #262626
}

.nav.light-nav {
    -webkit-animation: light-nav .5s linear forwards;
    animation: light-nav .5s linear forwards
}

.nav.light-nav .main .nav-item .tools-item .search-item .search-btn i.icon-search {
    border-color: #fff
}

.nav.light-nav i.icon,.nav.light-nav p {
    color: #fff
}

.nav:hover {
    background-color: #fff
}

.nav:hover.light-nav {
    -webkit-animation: none;
    animation: none
}

.nav:hover .main .nav-item .tools-item .search-item .search-btn i.icon-search {
    border-color: #000
}

.nav:hover .item-block i.icon,.nav:hover .item-block p {
    color: #262626
}

@media screen and (min-width: 961px) {
    .nav:hover .item-block:hover p {
        color:#09acdd
    }
}

@media screen and (max-width: 830px) {
    .nav {
        background-color:#fff!important;
        color: #262626!important
    }

    .nav.light-nav,.nav.normal-nav {
        -webkit-animation: none;
        animation: none
    }
}

@-webkit-keyframes normal-nav {
    0% {
        -webkit-transform: translate3d(0,-70px,0);
        transform: translate3d(0,-70px,0)
    }

    to {
        background-color: #fff;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes normal-nav {
    0% {
        -webkit-transform: translate3d(0,-70px,0);
        transform: translate3d(0,-70px,0)
    }

    to {
        background-color: #fff;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes light-nav {
    0% {
        background-color: #fff
    }

    to {
        background-color: transparent
    }
}

@keyframes light-nav {
    0% {
        background-color: #fff
    }

    to {
        background-color: transparent
    }
}