@font-face {
    font-family: 'SourceHanSerifCN';
    src: url('../font/SourceHanSerifCN-Bold-2.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; /* 添加平滑滚动效果 */
    font-family: 'SourceHanSerifCN';
}

main {
    overflow: scroll; /* overflow 为 scroll，来把滚动条设置到 main 元素上 */
    height: 100vh;
    scroll-snap-type: y mandatory; /* scroll-snap-type 需要两个值，第一个值为滚动贴合的方向，y 表示纵向滚动贴合，第二个值为贴合方式，mandatory 表示强制滚动，用户只要一滚动鼠标，下一屏内容就直接滚动上来进行贴合。 */
    /*scroll-padding: 80px; !* 空车顶部菜单的高度 *!*/
    scroll-behavior: smooth; /* 添加平滑滚动效果 */
}

main::-webkit-scrollbar {
    display: none;
}

.head {
    position: fixed;
    top: 4.6vh;
    left: 2.6vw;
    background: transparent;
    z-index: 99;
}

.head img {
    width: 12.9vw;
    height: 7.4vh;
    display: block;
}

.arrow {
    position: fixed;
    height: 3.7vh;
    width: 2.1875vw;
    left: calc(50% - (2.1875vw / 2));
    bottom: 1.2vh;
    z-index: 99;
}

section {
    height: 100vh;
    width: 100vw;
    display: grid;
    /*place-items: center;*/
    scroll-snap-align: center;
    position: relative;
}


/*第一页*/
.page-one {
    background: url("../assets/page1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.page-one .title-list {
    /*margin: 25.9vh 0 0 9.375vw;*/
    position: absolute;
    left: 9.375vw;
    top: 25.9vh;
}

.page-one .title-list .title1 {
    color: #2C4EFF;
    font-weight: 700;
}

.page-one .title-list .title2 {
    color: #000000;
    font-weight: 900;
    margin: 20px 0 6px;
}

.page-one .title-list .title3 {
    color: #000000;
    font-weight: 700;
}

.page-one .row {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 4.1vw;
    bottom: 9.2vh;
}

.page-one .row .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2.6vw;
}

.page-one .row .col:last-child {
    margin-right: 0;
}

.page-one .row .col .cn {
    color: #000000;
    font-weight: 900;
    font-size: 1.6vw;
    margin: 1.3vh 0 0.4vh;
}

.page-one .row .col .en {
    color: #000000;
    font-weight: 700;
    font-size: 0.8vw;
}

.page-one .row .col img {
    width: 85px;
    height: 85px;
}

/*第二页*/
.page-two {
    background: url("../assets/page2.png");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-x: 48.4vw;
}

.page-two .block {
    position: absolute;
    top: 20.2vh;
    left: 11.9vw;
}

.page-two .block div {
    font-weight: 900;
    margin-bottom: 3.7vh;
}

.page-two .block div:last-of-type {
    margin-top: 14.8vh;
}

.page-two .block p {
    color: #000000;
    font-weight: 600;
    font-size: 1.6vw;
}

.page-three .content{
    position: absolute;
    bottom: 0;
    width: 100vw;
    left: 0;
}

.page-three .title{
    position: absolute;
    top: 18.9vh;
    left: 11.9vw;
}

.page-three .content .swiper {
    width: 100vw;
    height: 66vh;
    overflow: hidden;
}

.page-three .content .swiper .swiper-wrapper{
    transition-timing-function: linear !important; /* 没错就是这个属性 */
}

.page-three .content .swiper-slide {
    transform: translateY(12.9vh);
    height: 66vh;
    background: #FFFFFF;
    border: 2px solid #2C66FF4C;
    margin-right: 1.5625vw;
    display: flex;
    flex-direction: column;
    padding: 1.5625vw 2.7vh;
    box-sizing: border-box;
    transition: all 1s;
    cursor: pointer;
}

.page-three .content .swiper-slide img {
    width: 100%
}

.page-three .content .swiper-slide .slide-title {
    text-align: left;
    color: #000000;
    font-weight: 700;
    font-size: 1.875vw;
    margin: 1.4vh 0 1.8vh;
}

.page-three .content .swiper-slide .slide-info {
    color: #8B8B8B;
    font-weight: 500;
    font-size: 1.25vw;
}

.page-three .content .my-slide-active {
    background: #2C66FF;
    color: #ffffff;
}

.page-three .content .my-slide-active .slide-title {
    color: #ffffff;
}

.page-three .content .my-slide-active .slide-info {
    color: #ffffff;
}

.page-four {
    background: url("../assets/page4.png");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position: center;
    background-position-y: 18.5vh;
}

.page-four .left {
    position: absolute;
    top: 394px;
    left: 180px;
}

.page-four .left .title{
    color: #000000;
    font-weight: 900;
    margin-bottom: 7.4vh;
}

.page-four .left p{
    color: #000000;
    font-weight: 700;
    font-size: 2.5vw;
}

.page-four .right {
    position: absolute;
    right: 7.4vw;
    top: 17.1vh;
}

.page-four .right .title {
    display: flex;
    padding-bottom: 4.6vh;
    border-bottom: 1px solid #2C66FF4C;
}

.page-four .right .title .part1 {
    margin-right: 1.8vw;
}

.page-four .right .title .part1 img{
    width: 5.2vw;
    height: 10.1vh;
}

.page-four .right .title .part2 div{
    color: #000000;
    font-weight: 700;
    font-size: 3.3vw;
    font-family: none;
}

.page-four .right .title .part2 p{
    color: #2C66FF;
    font-weight: bold;
    font-size: 1.875vw;
}

.page-four .right .list{
    margin-top: 4.6vh
}

.page-four .right .list .item{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 7.4vh;
}

.page-four .right .list .item img{
    width: 32px;
    height: 32px;
    display: block;
    margin-right: 1.1vw;
}

.page-four .right .list .item p{
    color: #000000;
    font-weight: 900;
    font-size: 1.875vw;
    line-height: 1;
}

.page-five {
    background: url("../assets/page5.png");
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
}

.page-five .title80{
    color: #000000;
    font-weight: 900;
    text-align: center;
    position: absolute;
    top: 16.2vh;
    width: 100%;
}

.page-five .content{
    position: absolute;
    top: 39.8vh;
    padding: 0 7.8vw;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

.page-five .content .left{
    width: 18.2vw;
}

.page-five .content .block{
    background: #2C66FF;
    border: 2px solid #FFFFFFB2;
    position: relative;
    height: 39.03vh;
}

.page-five .content .block .icon{
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    background: #FFFFFF;
    border: 2px solid #2C66FF;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 80px);
    top: -80px;
}

.page-five .content .block .icon img{
    width: 100px;
    height: 100px;
}

@media (max-width: 1366px) {
    .page-five .content .block .icon{
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background: #FFFFFF;
        border: 2px solid #2C66FF;
        margin: 0 auto;
        position: absolute;
        left: calc(50% - 50px);
        top: -50px;
    }

    .page-five .content .block .icon img{
        width: 60px;
        height: 60px;
    }
}

.page-five .content .block .s-title{
    color: #FFFFFF;
    font-weight: 900;
    font-size: 1.6vw;
    text-align: center;
    padding-top: 9.7vh;
}

.page-five .content .block .xiaoyuandian{
    display: flex;
    justify-content: center;
    margin-top: 3.2vh;
}

.page-five .content .block .xiaoyuandian span{
    width: 24px;
    height: 24px;
    display: block;
    background: #BBCEFF;
    border-radius: 24px;
}

.page-five .content .block .text{
    margin: 3.7vh 0 4.6vh;
}

.page-five .content .block .text div{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.page-five .content .block .text div span{
    flex-basis: 1;
    margin-right: 1.25vw;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.25vw;
}

.page-five .content .block .text div span:last-of-type{
    margin-right: 0;
}

.page-five .content .jiantou {
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.page-five .content .jiantou img{
    width: 5.8vw;
}

.page-five .content .center {
    width: 33.07vw;
}

.page-five .content .block .list {
    display: flex;
    justify-content: center;
}


.page-five .content .block .list .item{
    margin-right: 2.5vw;
}

.page-five .content .block .list .item:last-child{
    margin-right: 0;
}

.page-five .content .block .list .item p{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.25vw;
    margin-top: 2.3vh;
}

.page-five .content .block .remind {
    width: 23.1vw;
    padding: 0.9vh 0;
    text-align: center;
    margin: 4.6vh auto 0;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.25vw;
}

.foot {
    height: 203px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: #F4F4F4;
}

.foot .qr{
    display: flex;
    justify-content: center;
}

.foot .qr img{
    width: 80px;
    height: 107px;
    margin-right: 80px;
}

.foot .qr img:last-of-type{
    margin-right: 0;
}

.foot .banhao{
    color: #333333;
    font-size: 16px;
    text-align: center;
    margin-top: 24px;
    font-family: none;
}

section .title60 {
    font-size: 3.125vw;
}

section .title80 {
    font-size: 4.1vw;
}

section .title120 {
    font-size: 6.25vw;
}

section .commonFont {
    font-family: SourceHanSerifCN;
}


footer {
    scroll-snap-align: start;
}

ul {
    padding: 0;
    list-style: none;
}

.arrow {
    animation: arrowX 1.5s linear;
    animation-iteration-count: infinite;
}

@keyframes arrowX {
    from {bottom: 10px;}
    to { bottom: 0; }
}

@keyframes fadeIn {
    from {opacity: 1;}
    to { opacity: .5; }
}

@keyframes fadeOut {
    from {opacity: .5;}
    to { opacity: 1; }
}