@charset "utf-8";.btn-moreH:hover [btn-more] .btn-ico {
    animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
}

@keyframes arrowGoLeft {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    50% {
        opacity: 0;
        transform: translate(-1.5rem) scale(1.1)
    }

    51% {
        opacity: 0;
        transform: translate(1.5rem) scale(1.1)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes arrowGoRight {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    50% {
        opacity: 0;
        transform: translate(1.5rem) scale(1.1)
    }

    51% {
        opacity: 0;
        transform: translate(-1.5rem) scale(1.1)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes arrowGoRight2 {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    50% {
        opacity: 0;
        transform: translate(2.5rem) scale(1.1)
    }

    51% {
        opacity: 0;
        transform: translate(-2.5rem) scale(1.1)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes arrowGoTop {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    50% {
        opacity: 0;
        transform: translate(0, -1.5rem) scale(1.1)
    }

    51% {
        opacity: 0;
        transform: translate(0, 1.5rem) scale(1.1)
    }

    to {
        opacity: 1;
        transform: translate(0, 0)
    }
}

html {
    font-size: 10px
}

@media screen and (max-width: 1650px) {
    html {
        font-size:9.375px
    }
}

@media screen and (max-width: 1360px) {
    html {
        font-size:8.75px
    }
}

@media screen and (max-width: 1180px) {
    html {
        font-size:9.375px
    }
}

.inner {
    width: 75%;
    margin: 0 auto
}

@media screen and (max-width: 1650px) {
    .inner {
        width:80%
    }
}

@media screen and (max-width: 1366px) {
    .inner {
        width:84%
    }
}

@media screen and (max-width: 1280px) {
    .inner {
        width:90%
    }
}

.inner1130 {
    width: 60%;
    margin: 0 auto
}

@media screen and (max-width: 1650px) {
    .inner1130 {
        width:70%
    }
}

@media screen and (max-width: 1366px) {
    .inner1130 {
        width:74%
    }
}

@media screen and (max-width: 1280px) {
    .inner1130 {
        width:90%
    }
}

.lh20 {
    line-height: 2
}

@media screen and (max-width: 1181px) {
    .lh20 {
        line-height:1.8
    }
}

.lh18 {
    line-height: 1.8
}

@media screen and (max-width: 1181px) {
    .lh18 {
        line-height:1.7
    }
}

.lh175 {
    line-height: 1.75
}

@media screen and (max-width: 1181px) {
    .lh175 {
        line-height:1.7
    }
}

.lh17 {
    line-height: 1.7
}

@media screen and (max-width: 1181px) {
    .lh17 {
        line-height:1.65
    }
}

.lh16 {
    line-height: 1.6
}

.lh15 {
    line-height: 1.5
}

.lh145 {
    line-height: 1.45
}

.lh14 {
    line-height: 1.4
}

.lh12 {
    line-height: 1.2
}

.lh1 {
    line-height: 1
}

.br20 {
    border-radius: 2rem
}

@media screen and (max-width: 1181px) {
    .br20 {
        border-radius:1.5rem
    }
}

@media screen and (max-width: 750px) {
    .br20 {
        border-radius:1.2rem
    }
}

[swiper-ipad] {
    overflow: hidden
}

@media screen and (max-width: 1181px) {
    [swiper-ipad] {
        overflow:initial
    }
}

[swiper-iphone] {
    overflow: hidden
}

@media screen and (max-width: 640px) {
    [swiper-iphone] {
        overflow:initial
    }
}

.pc {
    display: none
}

@media screen and (min-width: 1181px) {
    .pc {
        display:block
    }
}

.mo {
    display: none
}

@media screen and (max-width: 1180px) {
    .mo {
        display:block
    }
}

.fd-c {
    display: flex;
    flex-direction: column
}

.fj-c {
    display: flex;
    justify-content: center
}

.fj-ccc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.fa-c {
    display: flex;
    align-items: center
}

.fw500 {
    font-weight: 500
}

.co1 {
    color: #104CC7
}

.c00 {
    color: #000000
}

.c16 {
    color: #161616
}

.cff {
    color: #ffffff
}

.pt150 {
    padding-top: 15rem
}

@media screen and (max-width: 1650px) {
    .pt150 {
        padding-top:14rem
    }
}

@media screen and (max-width: 1440px) {
    .pt150 {
        padding-top:12rem
    }
}

@media screen and (max-width: 1180px) {
    .pt150 {
        padding-top:11rem
    }
}

@media screen and (max-width: 640px) {
    .pt150 {
        padding-top:8rem
    }
}

.pb150 {
    padding-bottom: 15rem
}

@media screen and (max-width: 1650px) {
    .pb150 {
        padding-bottom:14rem
    }
}

@media screen and (max-width: 1440px) {
    .pb150 {
        padding-bottom:12rem
    }
}

@media screen and (max-width: 1180px) {
    .pb150 {
        padding-bottom:11rem
    }
}

@media screen and (max-width: 640px) {
    .pb150 {
        padding-bottom:8rem
    }
}

.pt140 {
    padding-top: 14rem
}

@media screen and (max-width: 1650px) {
    .pt140 {
        padding-top:13rem
    }
}

@media screen and (max-width: 1440px) {
    .pt140 {
        padding-top:12rem
    }
}

@media screen and (max-width: 1180px) {
    .pt140 {
        padding-top:11rem
    }
}

@media screen and (max-width: 640px) {
    .pt140 {
        padding-top:8rem
    }
}

.pb140 {
    padding-bottom: 14rem
}

@media screen and (max-width: 1650px) {
    .pb140 {
        padding-bottom:13rem
    }
}

@media screen and (max-width: 1440px) {
    .pb140 {
        padding-bottom:12rem
    }
}

@media screen and (max-width: 1180px) {
    .pb140 {
        padding-bottom:11rem
    }
}

@media screen and (max-width: 640px) {
    .pb140 {
        padding-bottom:8rem
    }
}

.pt120 {
    padding-top: 12rem
}

@media screen and (max-width: 1650px) {
    .pt120 {
        padding-top:11rem
    }
}

@media screen and (max-width: 1440px) {
    .pt120 {
        padding-top:10rem
    }
}

@media screen and (max-width: 1180px) {
    .pt120 {
        padding-top:9rem
    }
}

@media screen and (max-width: 640px) {
    .pt120 {
        padding-top:7rem
    }
}

.pb120 {
    padding-bottom: 12rem
}

@media screen and (max-width: 1650px) {
    .pb120 {
        padding-bottom:11rem
    }
}

@media screen and (max-width: 1440px) {
    .pb120 {
        padding-bottom:10rem
    }
}

@media screen and (max-width: 1180px) {
    .pb120 {
        padding-bottom:9rem
    }
}

@media screen and (max-width: 640px) {
    .pb120 {
        padding-bottom:7rem
    }
}

.pt110 {
    padding-top: 11rem
}

@media screen and (max-width: 1650px) {
    .pt110 {
        padding-top:10rem
    }
}

@media screen and (max-width: 1440px) {
    .pt110 {
        padding-top:9rem
    }
}

@media screen and (max-width: 1180px) {
    .pt110 {
        padding-top:8rem
    }
}

@media screen and (max-width: 640px) {
    .pt110 {
        padding-top:6.5rem
    }
}

.pb110 {
    padding-bottom: 11rem
}

@media screen and (max-width: 1650px) {
    .pb110 {
        padding-bottom:10rem
    }
}

@media screen and (max-width: 1440px) {
    .pb110 {
        padding-bottom:9rem
    }
}

@media screen and (max-width: 1180px) {
    .pb110 {
        padding-bottom:8rem
    }
}

@media screen and (max-width: 640px) {
    .pb110 {
        padding-bottom:6.5rem
    }
}

.pt100 {
    padding-top: 10rem
}

@media screen and (max-width: 1650px) {
    .pt100 {
        padding-top:9rem
    }
}

@media screen and (max-width: 1440px) {
    .pt100 {
        padding-top:8rem
    }
}

@media screen and (max-width: 1180px) {
    .pt100 {
        padding-top:7rem
    }
}

@media screen and (max-width: 640px) {
    .pt100 {
        padding-top:6rem
    }
}

.pb100 {
    padding-bottom: 10rem
}

@media screen and (max-width: 1650px) {
    .pb100 {
        padding-bottom:9rem
    }
}

@media screen and (max-width: 1440px) {
    .pb100 {
        padding-bottom:8rem
    }
}

@media screen and (max-width: 1180px) {
    .pb100 {
        padding-bottom:7rem
    }
}

@media screen and (max-width: 640px) {
    .pb100 {
        padding-bottom:6rem
    }
}

.pt90 {
    padding-top: 9rem
}

@media screen and (max-width: 1650px) {
    .pt90 {
        padding-top:8rem
    }
}

@media screen and (max-width: 1440px) {
    .pt90 {
        padding-top:7rem
    }
}

@media screen and (max-width: 1180px) {
    .pt90 {
        padding-top:6.5rem
    }
}

@media screen and (max-width: 640px) {
    .pt90 {
        padding-top:5.5rem
    }
}

.pb90 {
    padding-bottom: 9rem
}

@media screen and (max-width: 1650px) {
    .pb90 {
        padding-bottom:8rem
    }
}

@media screen and (max-width: 1440px) {
    .pb90 {
        padding-bottom:7rem
    }
}

@media screen and (max-width: 1180px) {
    .pb90 {
        padding-bottom:6.5rem
    }
}

@media screen and (max-width: 640px) {
    .pb90 {
        padding-bottom:5.5rem
    }
}

.pt80 {
    padding-top: 8rem
}

@media screen and (max-width: 1440px) {
    .pt80 {
        padding-top:7rem
    }
}

@media screen and (max-width: 1180px) {
    .pt80 {
        padding-top:6rem
    }
}

@media screen and (max-width: 640px) {
    .pt80 {
        padding-top:5rem
    }
}

.pb80 {
    padding-bottom: 8rem
}

@media screen and (max-width: 1440px) {
    .pb80 {
        padding-bottom:7rem
    }
}

@media screen and (max-width: 1180px) {
    .pb80 {
        padding-bottom:6rem
    }
}

@media screen and (max-width: 640px) {
    .pb80 {
        padding-bottom:5rem
    }
}

.pt70 {
    padding-top: 7rem
}

@media screen and (max-width: 1440px) {
    .pt70 {
        padding-top:6rem
    }
}

@media screen and (max-width: 1180px) {
    .pt70 {
        padding-top:5rem
    }
}

@media screen and (max-width: 640px) {
    .pt70 {
        padding-top:4.5rem
    }
}

.pb70 {
    padding-bottom: 7rem
}

@media screen and (max-width: 1440px) {
    .pb70 {
        padding-bottom:6rem
    }
}

@media screen and (max-width: 1180px) {
    .pb70 {
        padding-bottom:5rem
    }
}

@media screen and (max-width: 640px) {
    .pb70 {
        padding-bottom:4.5rem
    }
}

.pt65 {
    padding-top: 6.5rem
}

@media screen and (max-width: 1440px) {
    .pt65 {
        padding-top:6rem
    }
}

@media screen and (max-width: 1180px) {
    .pt65 {
        padding-top:5rem
    }
}

@media screen and (max-width: 640px) {
    .pt65 {
        padding-top:4.5rem
    }
}

.pb65 {
    padding-bottom: 6.5rem
}

@media screen and (max-width: 1440px) {
    .pb65 {
        padding-bottom:6rem
    }
}

@media screen and (max-width: 1180px) {
    .pb65 {
        padding-bottom:5rem
    }
}

@media screen and (max-width: 640px) {
    .pb65 {
        padding-bottom:4.5rem
    }
}

.pt60 {
    padding-top: 6rem
}

@media screen and (max-width: 1440px) {
    .pt60 {
        padding-top:5rem
    }
}

@media screen and (max-width: 1180px) {
    .pt60 {
        padding-top:4.5rem
    }
}

@media screen and (max-width: 640px) {
    .pt60 {
        padding-top:4rem
    }
}

.pb60 {
    padding-bottom: 6rem
}

@media screen and (max-width: 1440px) {
    .pb60 {
        padding-bottom:5rem
    }
}

@media screen and (max-width: 1180px) {
    .pb60 {
        padding-bottom:4.5rem
    }
}

@media screen and (max-width: 640px) {
    .pb60 {
        padding-bottom:4rem
    }
}

.pt50 {
    padding-top: 5rem
}

@media screen and (max-width: 1440px) {
    .pt50 {
        padding-top:4.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pt50 {
        padding-top:4rem
    }
}

@media screen and (max-width: 640px) {
    .pt50 {
        padding-top:3.5rem
    }
}

.pb50 {
    padding-bottom: 5rem
}

@media screen and (max-width: 1440px) {
    .pb50 {
        padding-bottom:4.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pb50 {
        padding-bottom:4rem
    }
}

@media screen and (max-width: 640px) {
    .pb50 {
        padding-bottom:3.5rem
    }
}

.pt40 {
    padding-top: 4rem
}

@media screen and (max-width: 1440px) {
    .pt40 {
        padding-top:3.6rem
    }
}

@media screen and (max-width: 1180px) {
    .pt40 {
        padding-top:3rem
    }
}

@media screen and (max-width: 640px) {
    .pt40 {
        padding-top:2.6rem
    }
}

.pb40 {
    padding-bottom: 4rem
}

@media screen and (max-width: 1440px) {
    .pb40 {
        padding-bottom:3.6rem
    }
}

@media screen and (max-width: 1180px) {
    .pb40 {
        padding-bottom:3rem
    }
}

@media screen and (max-width: 640px) {
    .pb40 {
        padding-bottom:2.6rem
    }
}

.pt35 {
    padding-top: 3.5rem
}

@media screen and (max-width: 1440px) {
    .pt35 {
        padding-top:3rem
    }
}

@media screen and (max-width: 1180px) {
    .pt35 {
        padding-top:2.6rem
    }
}

@media screen and (max-width: 640px) {
    .pt35 {
        padding-top:2.2rem
    }
}

.pb35 {
    padding-bottom: 3.5rem
}

@media screen and (max-width: 1440px) {
    .pb35 {
        padding-bottom:3rem
    }
}

@media screen and (max-width: 1180px) {
    .pb35 {
        padding-bottom:2.6rem
    }
}

@media screen and (max-width: 640px) {
    .pb35 {
        padding-bottom:2.2rem
    }
}

.pt20 {
    padding-top: 2rem
}

@media screen and (max-width: 1440px) {
    .pt20 {
        padding-top:1.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pt20 {
        padding-top:1.2rem
    }
}

@media screen and (max-width: 640px) {
    .pt20 {
        padding-top:1rem
    }
}

.pb20 {
    padding-bottom: 2rem
}

@media screen and (max-width: 1440px) {
    .pb20 {
        padding-bottom:1.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pb20 {
        padding-bottom:1.2rem
    }
}

@media screen and (max-width: 640px) {
    .pb20 {
        padding-bottom:1rem
    }
}

.mb50 {
    margin-bottom: 5rem
}

@media screen and (max-width: 1440px) {
    .mb50 {
        margin-bottom:4.5rem
    }
}

@media screen and (max-width: 1180px) {
    .mb50 {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 640px) {
    .mb50 {
        margin-bottom:3.6rem
    }
}

.mt50 {
    margin-top: 5rem
}

@media screen and (max-width: 1440px) {
    .mt50 {
        margin-top:4.5rem
    }
}

@media screen and (max-width: 1180px) {
    .mt50 {
        margin-top:4rem
    }
}

@media screen and (max-width: 640px) {
    .mt50 {
        margin-top:3.6rem
    }
}

.mb45 {
    margin-bottom: 4.5rem
}

@media screen and (max-width: 1650px) {
    .mb45 {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 1180px) {
    .mb45 {
        margin-bottom:3.5rem
    }
}

@media screen and (max-width: 640px) {
    .mb45 {
        margin-bottom:3rem
    }
}

.mt45 {
    margin-top: 4.5rem
}

@media screen and (max-width: 1650px) {
    .mt45 {
        margin-top:4rem
    }
}

@media screen and (max-width: 1180px) {
    .mt45 {
        margin-top:3.5rem
    }
}

@media screen and (max-width: 640px) {
    .mt45 {
        margin-top:3rem
    }
}

.mb40 {
    margin-bottom: 4rem
}

@media screen and (max-width: 1650px) {
    .mb40 {
        margin-bottom:3.5rem
    }
}

@media screen and (max-width: 1180px) {
    .mb40 {
        margin-bottom:3rem
    }
}

@media screen and (max-width: 640px) {
    .mb40 {
        margin-bottom:2.5rem
    }
}

.mt40 {
    margin-top: 4rem
}

@media screen and (max-width: 1650px) {
    .mt40 {
        margin-top:3.5rem
    }
}

@media screen and (max-width: 1180px) {
    .mt40 {
        margin-top:3rem
    }
}

@media screen and (max-width: 640px) {
    .mt40 {
        margin-top:2.5rem
    }
}

.mb35 {
    margin-bottom: 3.5rem
}

@media screen and (max-width: 1650px) {
    .mb35 {
        margin-bottom:3rem
    }
}

@media screen and (max-width: 1180px) {
    .mb35 {
        margin-bottom:2.5rem
    }
}

@media screen and (max-width: 640px) {
    .mb35 {
        margin-bottom:2rem
    }
}

.mt35 {
    margin-top: 3.5rem
}

@media screen and (max-width: 1650px) {
    .mt35 {
        margin-top:3rem
    }
}

@media screen and (max-width: 1180px) {
    .mt35 {
        margin-top:2.5rem
    }
}

@media screen and (max-width: 640px) {
    .mt35 {
        margin-top:2rem
    }
}

.mb30 {
    margin-bottom: 3rem
}

@media screen and (max-width: 1650px) {
    .mb30 {
        margin-bottom:2.5rem
    }
}

@media screen and (max-width: 1440px) {
    .mb30 {
        margin-bottom:2rem
    }
}

@media screen and (max-width: 640px) {
    .mb30 {
        margin-bottom:1.8rem
    }
}

.mt30 {
    margin-top: 3rem
}

@media screen and (max-width: 1650px) {
    .mt30 {
        margin-top:2.5rem
    }
}

@media screen and (max-width: 1440px) {
    .mt30 {
        margin-top:2rem
    }
}

@media screen and (max-width: 640px) {
    .mt30 {
        margin-top:1.8rem
    }
}

.mb25 {
    margin-bottom: 2.5rem
}

@media screen and (max-width: 1180px) {
    .mb25 {
        margin-bottom:2rem
    }
}

@media screen and (max-width: 750px) {
    .mb25 {
        margin-bottom:1.5rem
    }
}

.mt25 {
    margin-top: 2.5rem
}

@media screen and (max-width: 1180px) {
    .mt25 {
        margin-top:2rem
    }
}

@media screen and (max-width: 750px) {
    .mt25 {
        margin-top:1.5rem
    }
}

.mb20 {
    margin-bottom: 2rem
}

@media screen and (max-width: 1180px) {
    .mb20 {
        margin-bottom:1.5rem
    }
}

@media screen and (max-width: 750px) {
    .mb20 {
        margin-bottom:1rem
    }
}

.mt20 {
    margin-top: 2rem
}

@media screen and (max-width: 1180px) {
    .mt20 {
        margin-top:1.5rem
    }
}

@media screen and (max-width: 750px) {
    .mt20 {
        margin-top:1rem
    }
}

.mb15 {
    margin-bottom: 1.5rem
}

@media screen and (max-width: 1180px) {
    .mb15 {
        margin-bottom:1rem
    }
}

@media screen and (max-width: 750px) {
    .mb15 {
        margin-bottom:.6rem
    }
}

.mt15 {
    margin-top: 1.5rem
}

@media screen and (max-width: 1180px) {
    .mt15 {
        margin-top:1rem
    }
}

@media screen and (max-width: 750px) {
    .mt15 {
        margin-top:.6rem
    }
}

.mb10 {
    margin-bottom: 1rem
}

@media screen and (max-width: 750px) {
    .mb10 {
        margin-bottom:.6rem
    }
}

.mt10 {
    margin-top: 1rem
}

@media screen and (max-width: 750px) {
    .mt10 {
        margin-top:.6rem
    }
}

.pageC-a a {
    color: #104CC7
}

.pageC-a a:hover {
    text-decoration: underline
}

@media screen and (min-width: 1181px) {
    .fixedImg {
        background-attachment:fixed
    }
}

@media screen and (max-width: 1441px) {
    .f16 {
        font-size:15px
    }
}

@media screen and (max-width: 1260px) {
    .f16 {
        font-size:14px
    }
}

@media screen and (max-width: 1180px) {
    .df-flex-ipad {
        display:block
    }

    .flex-w-ipad {
        flex-wrap: wrap
    }

    .pvideo-box {
        width: 90%
    }

    .pv-close {
        right: 0;
        top: -34px;
        font-size: 24px
    }

    .inner1348 {
        width: 90%
    }

    .inner1140 {
        width: 90%
    }
}

@media screen and (max-width: 640px) {
    .cookie-box {
        display:block
    }

    .cookie-rbox {
        margin: 2rem 0 0
    }

    .df-flex-iphone {
        display: block
    }

    .flex-w-iphone {
        flex-wrap: wrap
    }

    .pvideo-box {
        width: 100%
    }

    .f15 {
        font-size: 13px
    }
}

@media screen and (min-width: 1441px) {
    .f17 {
        font-size:1.7rem
    }

    .f18 {
        font-size: 1.8rem
    }

    .f19 {
        font-size: 1.9rem
    }

    .f20 {
        font-size: 2rem
    }

    .f21 {
        font-size: 2.1rem
    }

    .f22 {
        font-size: 2.2rem
    }

    .f23 {
        font-size: 2.3rem
    }

    .f24 {
        font-size: 2.4rem
    }

    .f25 {
        font-size: 2.5rem
    }

    .f26 {
        font-size: 2.6rem
    }

    .f27 {
        font-size: 2.7rem
    }

    .f28 {
        font-size: 2.8rem
    }

    .f29 {
        font-size: 2.9rem
    }

    .f30 {
        font-size: 3rem
    }

    .f31 {
        font-size: 3.1rem
    }

    .f32 {
        font-size: 3.2rem
    }

    .f33 {
        font-size: 3.3rem
    }

    .f34 {
        font-size: 3.4rem
    }

    .f35 {
        font-size: 3.5rem
    }

    .f36 {
        font-size: 3.6rem
    }

    .f37 {
        font-size: 3.7rem
    }

    .f38 {
        font-size: 3.8rem
    }

    .f39 {
        font-size: 3.9rem
    }

    .f40 {
        font-size: 4rem
    }

    .f41 {
        font-size: 4.1rem
    }

    .f42 {
        font-size: 4.2rem
    }

    .f43 {
        font-size: 4.3rem
    }

    .f44 {
        font-size: 4.4rem
    }

    .f45 {
        font-size: 4.5rem
    }

    .f46 {
        font-size: 4.6rem
    }

    .f47 {
        font-size: 4.7rem
    }

    .f48 {
        font-size: 4.8rem
    }

    .f49 {
        font-size: 4.9rem
    }

    .f50 {
        font-size: 5rem
    }

    .f51 {
        font-size: 5.1rem
    }

    .f52 {
        font-size: 5.2rem
    }

    .f53 {
        font-size: 5.3rem
    }

    .f54 {
        font-size: 5.4rem
    }

    .f55 {
        font-size: 5.5rem
    }

    .f56 {
        font-size: 5.6rem
    }

    .f57 {
        font-size: 5.7rem
    }

    .f58 {
        font-size: 5.8rem
    }

    .f59 {
        font-size: 5.9rem
    }

    .f60 {
        font-size: 6rem
    }

    .f61 {
        font-size: 6.1rem
    }

    .f62 {
        font-size: 6.2rem
    }

    .f63 {
        font-size: 6.3rem
    }

    .f64 {
        font-size: 6.4rem
    }

    .f65 {
        font-size: 6.5rem
    }

    .f66 {
        font-size: 6.6rem
    }

    .f67 {
        font-size: 6.7rem
    }

    .f68 {
        font-size: 6.8rem
    }

    .f69 {
        font-size: 6.9rem
    }

    .f70 {
        font-size: 7rem
    }

    .f71 {
        font-size: 7.1rem
    }

    .f72 {
        font-size: 7.2rem
    }

    .f73 {
        font-size: 7.3rem
    }

    .f74 {
        font-size: 7.4rem
    }

    .f75 {
        font-size: 7.5rem
    }

    .f76 {
        font-size: 7.6rem
    }

    .f77 {
        font-size: 7.7rem
    }

    .f78 {
        font-size: 7.8rem
    }

    .f79 {
        font-size: 7.9rem
    }

    .f80 {
        font-size: 8rem
    }

    .f81 {
        font-size: 8.1rem
    }

    .f82 {
        font-size: 8.2rem
    }

    .f83 {
        font-size: 8.3rem
    }

    .f84 {
        font-size: 8.4rem
    }

    .f85 {
        font-size: 8.5rem
    }

    .f86 {
        font-size: 8.6rem
    }

    .f87 {
        font-size: 8.7rem
    }

    .f88 {
        font-size: 8.8rem
    }

    .f89 {
        font-size: 8.9rem
    }

    .f90 {
        font-size: 9rem
    }

    .f91 {
        font-size: 9.1rem
    }

    .f92 {
        font-size: 9.2rem
    }

    .f93 {
        font-size: 9.3rem
    }

    .f94 {
        font-size: 9.4rem
    }

    .f95 {
        font-size: 9.5rem
    }

    .f96 {
        font-size: 9.6rem
    }

    .f97 {
        font-size: 9.7rem
    }

    .f98 {
        font-size: 9.8rem
    }

    .f99 {
        font-size: 9.9rem
    }

    .f100 {
        font-size: 10rem
    }

    .f101 {
        font-size: 10.1rem
    }

    .f102 {
        font-size: 10.2rem
    }

    .f103 {
        font-size: 10.3rem
    }

    .f104 {
        font-size: 10.4rem
    }

    .f105 {
        font-size: 10.5rem
    }

    .f106 {
        font-size: 10.6rem
    }

    .f107 {
        font-size: 10.7rem
    }

    .f108 {
        font-size: 10.8rem
    }

    .f109 {
        font-size: 10.9rem
    }

    .f110 {
        font-size: 11rem
    }

    .f111 {
        font-size: 11.1rem
    }

    .f112 {
        font-size: 11.2rem
    }

    .f113 {
        font-size: 11.3rem
    }

    .f114 {
        font-size: 11.4rem
    }

    .f115 {
        font-size: 11.5rem
    }

    .f116 {
        font-size: 11.6rem
    }

    .f117 {
        font-size: 11.7rem
    }

    .f118 {
        font-size: 11.8rem
    }

    .f119 {
        font-size: 11.9rem
    }

    .f120 {
        font-size: 12rem
    }

    .f121 {
        font-size: 12.1rem
    }

    .f122 {
        font-size: 12.2rem
    }

    .f123 {
        font-size: 12.3rem
    }

    .f124 {
        font-size: 12.4rem
    }

    .f125 {
        font-size: 12.5rem
    }

    .f126 {
        font-size: 12.6rem
    }

    .f127 {
        font-size: 12.7rem
    }

    .f128 {
        font-size: 12.8rem
    }

    .f129 {
        font-size: 12.9rem
    }

    .f130 {
        font-size: 13rem
    }

    .f131 {
        font-size: 13.1rem
    }

    .f132 {
        font-size: 13.2rem
    }

    .f133 {
        font-size: 13.3rem
    }

    .f134 {
        font-size: 13.4rem
    }

    .f135 {
        font-size: 13.5rem
    }

    .f136 {
        font-size: 13.6rem
    }

    .f137 {
        font-size: 13.7rem
    }

    .f138 {
        font-size: 13.8rem
    }

    .f139 {
        font-size: 13.9rem
    }

    .f140 {
        font-size: 14rem
    }

    .f141 {
        font-size: 14.1rem
    }

    .f142 {
        font-size: 14.2rem
    }

    .f143 {
        font-size: 14.3rem
    }

    .f144 {
        font-size: 14.4rem
    }

    .f145 {
        font-size: 14.5rem
    }

    .f146 {
        font-size: 14.6rem
    }

    .f147 {
        font-size: 14.7rem
    }

    .f148 {
        font-size: 14.8rem
    }

    .f149 {
        font-size: 14.9rem
    }

    .f150 {
        font-size: 15rem
    }

    .f151 {
        font-size: 15.1rem
    }

    .f152 {
        font-size: 15.2rem
    }

    .f153 {
        font-size: 15.3rem
    }

    .f154 {
        font-size: 15.4rem
    }

    .f155 {
        font-size: 15.5rem
    }

    .f156 {
        font-size: 15.6rem
    }

    .f157 {
        font-size: 15.7rem
    }

    .f158 {
        font-size: 15.8rem
    }

    .f159 {
        font-size: 15.9rem
    }

    .f160 {
        font-size: 16rem
    }

    .f161 {
        font-size: 16.1rem
    }

    .f162 {
        font-size: 16.2rem
    }

    .f163 {
        font-size: 16.3rem
    }

    .f164 {
        font-size: 16.4rem
    }

    .f165 {
        font-size: 16.5rem
    }

    .f166 {
        font-size: 16.6rem
    }

    .f167 {
        font-size: 16.7rem
    }

    .f168 {
        font-size: 16.8rem
    }

    .f169 {
        font-size: 16.9rem
    }

    .f170 {
        font-size: 17rem
    }
}

@media screen and (min-width: 1181px) and (max-width:1440px) {
    .f31 {
        font-size:2.69565217rem
    }

    .f32 {
        font-size: 2.7826087rem
    }

    .f33 {
        font-size: 2.86956522rem
    }

    .f34 {
        font-size: 2.95652174rem
    }

    .f35 {
        font-size: 3.04347826rem
    }

    .f36 {
        font-size: 3.13043478rem
    }

    .f37 {
        font-size: 3.2173913rem
    }

    .f38 {
        font-size: 3.30434783rem
    }

    .f39 {
        font-size: 3.39130435rem
    }

    .f40 {
        font-size: 3.47826087rem
    }

    .f41 {
        font-size: 3.56521739rem
    }

    .f42 {
        font-size: 3.65217391rem
    }

    .f43 {
        font-size: 3.73913043rem
    }

    .f44 {
        font-size: 3.82608696rem
    }

    .f45 {
        font-size: 3.91304348rem
    }

    .f46 {
        font-size: 4rem
    }

    .f47 {
        font-size: 4.08695652rem
    }

    .f48 {
        font-size: 4.17391304rem
    }

    .f49 {
        font-size: 4.26086957rem
    }

    .f50 {
        font-size: 4.34782609rem
    }

    .f51 {
        font-size: 4.43478261rem
    }

    .f52 {
        font-size: 4.52173913rem
    }

    .f53 {
        font-size: 4.60869565rem
    }

    .f54 {
        font-size: 4.69565217rem
    }

    .f55 {
        font-size: 4.7826087rem
    }

    .f56 {
        font-size: 4.86956522rem
    }

    .f57 {
        font-size: 4.95652174rem
    }

    .f58 {
        font-size: 5.04347826rem
    }

    .f59 {
        font-size: 5.13043478rem
    }

    .f60 {
        font-size: 5.2173913rem
    }

    .f61 {
        font-size: 5.30434783rem
    }

    .f62 {
        font-size: 5.39130435rem
    }

    .f63 {
        font-size: 5.47826087rem
    }

    .f64 {
        font-size: 5.56521739rem
    }

    .f65 {
        font-size: 5.65217391rem
    }

    .f66 {
        font-size: 5.73913043rem
    }

    .f67 {
        font-size: 5.82608696rem
    }

    .f68 {
        font-size: 5.91304348rem
    }

    .f69 {
        font-size: 6rem
    }

    .f70 {
        font-size: 6.08695652rem
    }

    .f71 {
        font-size: 6.17391304rem
    }

    .f72 {
        font-size: 6.26086957rem
    }

    .f73 {
        font-size: 6.34782609rem
    }

    .f74 {
        font-size: 6.43478261rem
    }

    .f75 {
        font-size: 6.52173913rem
    }

    .f76 {
        font-size: 6.60869565rem
    }

    .f77 {
        font-size: 6.69565217rem
    }

    .f78 {
        font-size: 6.7826087rem
    }

    .f79 {
        font-size: 6.86956522rem
    }

    .f80 {
        font-size: 6.95652174rem
    }

    .f81 {
        font-size: 7.04347826rem
    }

    .f82 {
        font-size: 7.13043478rem
    }

    .f83 {
        font-size: 7.2173913rem
    }

    .f84 {
        font-size: 7.30434783rem
    }

    .f85 {
        font-size: 7.39130435rem
    }

    .f86 {
        font-size: 7.47826087rem
    }

    .f87 {
        font-size: 7.56521739rem
    }

    .f88 {
        font-size: 7.65217391rem
    }

    .f89 {
        font-size: 7.73913043rem
    }

    .f90 {
        font-size: 7.82608696rem
    }

    .f91 {
        font-size: 7.91304348rem
    }

    .f92 {
        font-size: 8rem
    }

    .f93 {
        font-size: 8.08695652rem
    }

    .f94 {
        font-size: 8.17391304rem
    }

    .f95 {
        font-size: 8.26086957rem
    }

    .f96 {
        font-size: 8.34782609rem
    }

    .f97 {
        font-size: 8.43478261rem
    }

    .f98 {
        font-size: 8.52173913rem
    }

    .f99 {
        font-size: 8.60869565rem
    }

    .f100 {
        font-size: 8.69565217rem
    }

    .f101 {
        font-size: 8.7826087rem
    }

    .f102 {
        font-size: 8.86956522rem
    }

    .f103 {
        font-size: 8.95652174rem
    }

    .f104 {
        font-size: 9.04347826rem
    }

    .f105 {
        font-size: 9.13043478rem
    }

    .f106 {
        font-size: 9.2173913rem
    }

    .f107 {
        font-size: 9.30434783rem
    }

    .f108 {
        font-size: 9.39130435rem
    }

    .f109 {
        font-size: 9.47826087rem
    }

    .f110 {
        font-size: 9.56521739rem
    }

    .f111 {
        font-size: 9.65217391rem
    }

    .f112 {
        font-size: 9.73913043rem
    }

    .f113 {
        font-size: 9.82608696rem
    }

    .f114 {
        font-size: 9.91304348rem
    }

    .f115 {
        font-size: 10rem
    }

    .f116 {
        font-size: 10.08695652rem
    }

    .f117 {
        font-size: 10.17391304rem
    }

    .f118 {
        font-size: 10.26086957rem
    }

    .f119 {
        font-size: 10.34782609rem
    }

    .f120 {
        font-size: 10.43478261rem
    }

    .f121 {
        font-size: 10.52173913rem
    }

    .f122 {
        font-size: 10.60869565rem
    }

    .f123 {
        font-size: 10.69565217rem
    }

    .f124 {
        font-size: 10.7826087rem
    }

    .f125 {
        font-size: 10.86956522rem
    }

    .f126 {
        font-size: 10.95652174rem
    }

    .f127 {
        font-size: 11.04347826rem
    }

    .f128 {
        font-size: 11.13043478rem
    }

    .f129 {
        font-size: 11.2173913rem
    }

    .f130 {
        font-size: 11.30434783rem
    }

    .f131 {
        font-size: 11.39130435rem
    }

    .f132 {
        font-size: 11.47826087rem
    }

    .f133 {
        font-size: 11.56521739rem
    }

    .f134 {
        font-size: 11.65217391rem
    }

    .f135 {
        font-size: 11.73913043rem
    }

    .f136 {
        font-size: 11.82608696rem
    }

    .f137 {
        font-size: 11.91304348rem
    }

    .f138 {
        font-size: 12rem
    }

    .f139 {
        font-size: 12.08695652rem
    }

    .f140 {
        font-size: 12.17391304rem
    }

    .f141 {
        font-size: 12.26086957rem
    }

    .f142 {
        font-size: 12.34782609rem
    }

    .f143 {
        font-size: 12.43478261rem
    }

    .f144 {
        font-size: 12.52173913rem
    }

    .f145 {
        font-size: 12.60869565rem
    }

    .f146 {
        font-size: 12.69565217rem
    }

    .f147 {
        font-size: 12.7826087rem
    }

    .f148 {
        font-size: 12.86956522rem
    }

    .f149 {
        font-size: 12.95652174rem
    }

    .f150 {
        font-size: 13.04347826rem
    }

    .f151 {
        font-size: 13.13043478rem
    }

    .f152 {
        font-size: 13.2173913rem
    }

    .f153 {
        font-size: 13.30434783rem
    }

    .f154 {
        font-size: 13.39130435rem
    }

    .f155 {
        font-size: 13.47826087rem
    }

    .f156 {
        font-size: 13.56521739rem
    }

    .f157 {
        font-size: 13.65217391rem
    }

    .f158 {
        font-size: 13.73913043rem
    }

    .f159 {
        font-size: 13.82608696rem
    }

    .f160 {
        font-size: 13.91304348rem
    }

    .f161 {
        font-size: 14rem
    }

    .f162 {
        font-size: 14.08695652rem
    }

    .f163 {
        font-size: 14.17391304rem
    }

    .f164 {
        font-size: 14.26086957rem
    }

    .f165 {
        font-size: 14.34782609rem
    }

    .f166 {
        font-size: 14.43478261rem
    }

    .f167 {
        font-size: 14.52173913rem
    }

    .f168 {
        font-size: 14.60869565rem
    }

    .f169 {
        font-size: 14.69565217rem
    }

    .f170 {
        font-size: 14.7826087rem
    }

    .f17 {
        font-size: 1.57407407rem
    }

    .f18 {
        font-size: 1.66666667rem
    }

    .f19 {
        font-size: 1.75925926rem
    }

    .f20 {
        font-size: 1.85185185rem
    }

    .f21 {
        font-size: 1.94444444rem
    }

    .f22 {
        font-size: 2.03703704rem
    }

    .f23 {
        font-size: 2.12962963rem
    }

    .f24 {
        font-size: 2.22222222rem
    }

    .f25 {
        font-size: 2.31481481rem
    }

    .f26 {
        font-size: 2.40740741rem
    }

    .f27 {
        font-size: 2.5rem
    }

    .f28 {
        font-size: 2.59259259rem
    }

    .f29 {
        font-size: 2.68518519rem
    }

    .f30 {
        font-size: 2.77777778rem
    }
}

@media screen and (min-width: 641px) and (max-width:1180px) {
    .fp12 {
        font-size:1.2rem
    }

    .fp13 {
        font-size: 1.3rem
    }

    .fp14 {
        font-size: 1.4rem
    }

    .fp15 {
        font-size: 1.5rem
    }

    .fp16 {
        font-size: 1.6rem
    }

    .fp17 {
        font-size: 1.7rem
    }

    .fp18 {
        font-size: 1.8rem
    }

    .fp19 {
        font-size: 1.9rem
    }

    .fp20 {
        font-size: 2rem
    }

    .fp21 {
        font-size: 2.1rem
    }

    .fp22 {
        font-size: 2.2rem
    }

    .fp23 {
        font-size: 2.3rem
    }

    .fp24 {
        font-size: 2.4rem
    }

    .fp25 {
        font-size: 2.5rem
    }

    .fp26 {
        font-size: 2.6rem
    }

    .fp27 {
        font-size: 2.7rem
    }

    .fp28 {
        font-size: 2.8rem
    }

    .fp29 {
        font-size: 2.9rem
    }

    .fp30 {
        font-size: 3rem
    }

    .fp31 {
        font-size: 3.1rem
    }

    .fp32 {
        font-size: 3.2rem
    }

    .fp33 {
        font-size: 3.3rem
    }

    .fp34 {
        font-size: 3.4rem
    }

    .fp35 {
        font-size: 3.5rem
    }

    .fp36 {
        font-size: 3.6rem
    }

    .fp37 {
        font-size: 3.7rem
    }

    .fp38 {
        font-size: 3.8rem
    }

    .fp39 {
        font-size: 3.9rem
    }

    .fp40 {
        font-size: 4rem
    }

    .fp41 {
        font-size: 4.1rem
    }

    .fp42 {
        font-size: 4.2rem
    }

    .fp43 {
        font-size: 4.3rem
    }

    .fp44 {
        font-size: 4.4rem
    }

    .fp45 {
        font-size: 4.5rem
    }

    .fp46 {
        font-size: 4.6rem
    }

    .fp47 {
        font-size: 4.7rem
    }

    .fp48 {
        font-size: 4.8rem
    }

    .fp49 {
        font-size: 4.9rem
    }

    .fp50 {
        font-size: 5rem
    }

    .fp51 {
        font-size: 5.1rem
    }

    .fp52 {
        font-size: 5.2rem
    }

    .fp53 {
        font-size: 5.3rem
    }

    .fp54 {
        font-size: 5.4rem
    }

    .fp55 {
        font-size: 5.5rem
    }

    .fp56 {
        font-size: 5.6rem
    }

    .fp57 {
        font-size: 5.7rem
    }

    .fp58 {
        font-size: 5.8rem
    }

    .fp59 {
        font-size: 5.9rem
    }

    .fp60 {
        font-size: 6rem
    }

    .fp61 {
        font-size: 6.1rem
    }

    .fp62 {
        font-size: 6.2rem
    }

    .fp63 {
        font-size: 6.3rem
    }

    .fp64 {
        font-size: 6.4rem
    }

    .fp65 {
        font-size: 6.5rem
    }

    .fp66 {
        font-size: 6.6rem
    }

    .fp67 {
        font-size: 6.7rem
    }

    .fp68 {
        font-size: 6.8rem
    }

    .fp69 {
        font-size: 6.9rem
    }

    .fp70 {
        font-size: 7rem
    }

    .fp71 {
        font-size: 7.1rem
    }

    .fp72 {
        font-size: 7.2rem
    }

    .fp73 {
        font-size: 7.3rem
    }

    .fp74 {
        font-size: 7.4rem
    }

    .fp75 {
        font-size: 7.5rem
    }

    .fp76 {
        font-size: 7.6rem
    }

    .fp77 {
        font-size: 7.7rem
    }

    .fp78 {
        font-size: 7.8rem
    }

    .fp79 {
        font-size: 7.9rem
    }

    .fp80 {
        font-size: 8rem
    }

    .fp81 {
        font-size: 8.1rem
    }

    .fp82 {
        font-size: 8.2rem
    }

    .fp83 {
        font-size: 8.3rem
    }

    .fp84 {
        font-size: 8.4rem
    }

    .fp85 {
        font-size: 8.5rem
    }

    .fp86 {
        font-size: 8.6rem
    }

    .fp87 {
        font-size: 8.7rem
    }

    .fp88 {
        font-size: 8.8rem
    }

    .fp89 {
        font-size: 8.9rem
    }

    .fp90 {
        font-size: 9rem
    }

    .fp91 {
        font-size: 9.1rem
    }

    .fp92 {
        font-size: 9.2rem
    }

    .fp93 {
        font-size: 9.3rem
    }

    .fp94 {
        font-size: 9.4rem
    }

    .fp95 {
        font-size: 9.5rem
    }

    .fp96 {
        font-size: 9.6rem
    }

    .fp97 {
        font-size: 9.7rem
    }

    .fp98 {
        font-size: 9.8rem
    }

    .fp99 {
        font-size: 9.9rem
    }

    .fp100 {
        font-size: 10rem
    }

    .fp101 {
        font-size: 10.1rem
    }

    .fp102 {
        font-size: 10.2rem
    }

    .fp103 {
        font-size: 10.3rem
    }

    .fp104 {
        font-size: 10.4rem
    }

    .fp105 {
        font-size: 10.5rem
    }

    .fp106 {
        font-size: 10.6rem
    }

    .fp107 {
        font-size: 10.7rem
    }

    .fp108 {
        font-size: 10.8rem
    }

    .fp109 {
        font-size: 10.9rem
    }

    .fp110 {
        font-size: 11rem
    }

    .fp111 {
        font-size: 11.1rem
    }

    .fp112 {
        font-size: 11.2rem
    }

    .fp113 {
        font-size: 11.3rem
    }

    .fp114 {
        font-size: 11.4rem
    }

    .fp115 {
        font-size: 11.5rem
    }

    .fp116 {
        font-size: 11.6rem
    }

    .fp117 {
        font-size: 11.7rem
    }

    .fp118 {
        font-size: 11.8rem
    }

    .fp119 {
        font-size: 11.9rem
    }

    .fp120 {
        font-size: 12rem
    }
}

@media screen and (min-width: 0) and (max-width:640px) {
    .fw12 {
        font-size:1.2rem
    }

    .fw13 {
        font-size: 1.3rem
    }

    .fw14 {
        font-size: 1.4rem
    }

    .fw15 {
        font-size: 1.5rem
    }

    .fw16 {
        font-size: 1.6rem
    }

    .fw17 {
        font-size: 1.7rem
    }

    .fw18 {
        font-size: 1.8rem
    }

    .fw19 {
        font-size: 1.9rem
    }

    .fw20 {
        font-size: 2rem
    }

    .fw21 {
        font-size: 2.1rem
    }

    .fw22 {
        font-size: 2.2rem
    }

    .fw23 {
        font-size: 2.3rem
    }

    .fw24 {
        font-size: 2.4rem
    }

    .fw25 {
        font-size: 2.5rem
    }

    .fw26 {
        font-size: 2.6rem
    }

    .fw27 {
        font-size: 2.7rem
    }

    .fw28 {
        font-size: 2.8rem
    }

    .fw29 {
        font-size: 2.9rem
    }

    .fw30 {
        font-size: 3rem
    }

    .fw31 {
        font-size: 3.1rem
    }

    .fw32 {
        font-size: 3.2rem
    }

    .fw33 {
        font-size: 3.3rem
    }

    .fw34 {
        font-size: 3.4rem
    }

    .fw35 {
        font-size: 3.5rem
    }

    .fw36 {
        font-size: 3.6rem
    }

    .fw37 {
        font-size: 3.7rem
    }

    .fw38 {
        font-size: 3.8rem
    }

    .fw39 {
        font-size: 3.9rem
    }

    .fw40 {
        font-size: 4rem
    }

    .fw41 {
        font-size: 4.1rem
    }

    .fw42 {
        font-size: 4.2rem
    }

    .fw43 {
        font-size: 4.3rem
    }

    .fw44 {
        font-size: 4.4rem
    }

    .fw45 {
        font-size: 4.5rem
    }

    .fw46 {
        font-size: 4.6rem
    }

    .fw47 {
        font-size: 4.7rem
    }

    .fw48 {
        font-size: 4.8rem
    }

    .fw49 {
        font-size: 4.9rem
    }

    .fw50 {
        font-size: 5rem
    }

    .fw51 {
        font-size: 5.1rem
    }

    .fw52 {
        font-size: 5.2rem
    }

    .fw53 {
        font-size: 5.3rem
    }

    .fw54 {
        font-size: 5.4rem
    }

    .fw55 {
        font-size: 5.5rem
    }

    .fw56 {
        font-size: 5.6rem
    }

    .fw57 {
        font-size: 5.7rem
    }

    .fw58 {
        font-size: 5.8rem
    }

    .fw59 {
        font-size: 5.9rem
    }

    .fw60 {
        font-size: 6rem
    }

    .fw61 {
        font-size: 6.1rem
    }

    .fw62 {
        font-size: 6.2rem
    }

    .fw63 {
        font-size: 6.3rem
    }

    .fw64 {
        font-size: 6.4rem
    }

    .fw65 {
        font-size: 6.5rem
    }

    .fw66 {
        font-size: 6.6rem
    }

    .fw67 {
        font-size: 6.7rem
    }

    .fw68 {
        font-size: 6.8rem
    }

    .fw69 {
        font-size: 6.9rem
    }

    .fw70 {
        font-size: 7rem
    }

    .fw71 {
        font-size: 7.1rem
    }

    .fw72 {
        font-size: 7.2rem
    }

    .fw73 {
        font-size: 7.3rem
    }

    .fw74 {
        font-size: 7.4rem
    }

    .fw75 {
        font-size: 7.5rem
    }

    .fw76 {
        font-size: 7.6rem
    }

    .fw77 {
        font-size: 7.7rem
    }

    .fw78 {
        font-size: 7.8rem
    }

    .fw79 {
        font-size: 7.9rem
    }

    .fw80 {
        font-size: 8rem
    }

    .fw81 {
        font-size: 8.1rem
    }

    .fw82 {
        font-size: 8.2rem
    }

    .fw83 {
        font-size: 8.3rem
    }

    .fw84 {
        font-size: 8.4rem
    }

    .fw85 {
        font-size: 8.5rem
    }

    .fw86 {
        font-size: 8.6rem
    }

    .fw87 {
        font-size: 8.7rem
    }

    .fw88 {
        font-size: 8.8rem
    }

    .fw89 {
        font-size: 8.9rem
    }

    .fw90 {
        font-size: 9rem
    }

    .fw91 {
        font-size: 9.1rem
    }

    .fw92 {
        font-size: 9.2rem
    }

    .fw93 {
        font-size: 9.3rem
    }

    .fw94 {
        font-size: 9.4rem
    }

    .fw95 {
        font-size: 9.5rem
    }

    .fw96 {
        font-size: 9.6rem
    }

    .fw97 {
        font-size: 9.7rem
    }

    .fw98 {
        font-size: 9.8rem
    }

    .fw99 {
        font-size: 9.9rem
    }

    .fw100 {
        font-size: 10rem
    }

    .fw101 {
        font-size: 10.1rem
    }

    .fw102 {
        font-size: 10.2rem
    }

    .fw103 {
        font-size: 10.3rem
    }

    .fw104 {
        font-size: 10.4rem
    }

    .fw105 {
        font-size: 10.5rem
    }

    .fw106 {
        font-size: 10.6rem
    }

    .fw107 {
        font-size: 10.7rem
    }

    .fw108 {
        font-size: 10.8rem
    }

    .fw109 {
        font-size: 10.9rem
    }

    .fw110 {
        font-size: 11rem
    }

    .fw111 {
        font-size: 11.1rem
    }

    .fw112 {
        font-size: 11.2rem
    }

    .fw113 {
        font-size: 11.3rem
    }

    .fw114 {
        font-size: 11.4rem
    }

    .fw115 {
        font-size: 11.5rem
    }

    .fw116 {
        font-size: 11.6rem
    }

    .fw117 {
        font-size: 11.7rem
    }

    .fw118 {
        font-size: 11.8rem
    }

    .fw119 {
        font-size: 11.9rem
    }

    .fw120 {
        font-size: 12rem
    }
}

@media screen and (min-width: 0) {
    [show-psimg] {
        position:absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0
    }

    [show-primg] {
        display: flex;
        height: 100%
    }

    [show-img] {
        opacity: 0;
        transform: scale(1.1);
        transition: transform 1s ease,opacity .8s ease
    }

    [show-img2] {
        transform: scale(1.1);
        transition: 1s cubic-bezier(.44, .43, .25, .92)
    }

    .action [show-img] {
        opacity: 1;
        transform: initial
    }

    .action [show-img2] {
        transform: initial
    }

    [show-opacity],[show-opacityD] {
        opacity: 0;
        transition: opacity .8s ease
    }

    [show-scale50],[show-scale50D] {
        opacity: 0;
        transform: scale(.5);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    [show-scale90],[show-scale90D] {
        opacity: 0;
        transform: scale(.9);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    [show-text],[show-textD] {
        opacity: 0;
        transform: translateY(25px);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    [show-text2],[show-textD2] {
        opacity: 0;
        transform: translateY(10%);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    [show-text-F] {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(5px);
        transition: 1s cubic-bezier(.33, 1, .68, 1)
    }

    [show-text-skew],[show-text-skewD] {
        opacity: 0;
        transform: translateY(25%) skew(15deg);
        transition: 1s cubic-bezier(.33, 1, .68, 1)
    }

    [show-text-skew2],[show-text-skew2D] {
        opacity: 0;
        transform: translateY(15%) skew(5deg);
        transition: 1s cubic-bezier(.33, 1, .68, 1)
    }

    [show-textL],[show-textDL] {
        opacity: 0;
        transform: translateX(25px);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    [show-textR],[show-textDR] {
        opacity: 0;
        transform: translateX(-25px);
        transition: transform 1s cubic-bezier(.33, 1, .68, 1),opacity .8s ease .3s
    }

    .action [show-opacity],.action[show-opacityD] {
        opacity: 1
    }

    .action [show-text],.action[show-textD],.action [show-text2],.action[show-textD2] {
        opacity: 1;
        transform: translateY(0)
    }

    .action [show-text-F] {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0)
    }

    .action [show-text-skew],.action[show-text-skewD],.action [show-text-skew2],.action[show-text-skew2D] {
        opacity: 1;
        transform: translateY(0) skew(0)
    }

    .action [show-textL],.action[show-textDL],.action [show-textR],.action[show-textDR] {
        opacity: 1;
        transform: translateX(0)
    }

    .action [show-scale50],.action[show-scale50D],.action [show-scale90],.action[show-scale90D] {
        opacity: 1;
        transform: inherit
    }

    [pbanner-img] {
        transform: scale(1.06);
        -webkit-transform: scale(1.06);
        transform-origin: center bottom;
        opacity: .1;
        transition: 2s;
        -webkit-transition: 2s
    }

    .action [pbanner-img] {
        transform: inherit;
        -webkit-transform: inherit;
        opacity: 1
    }

    [show-scaleX] {
        transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        opacity: 0;
        transition: transform 1s cubic-bezier(.25, .1, .25, 1),opacity .8s cubic-bezier(.25, .1, .25, 1)
    }

    .action [show-scaleX] {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        opacity: 1
    }

    [show-imgskewX] {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        background: #e5e1da;
        width: 100%;
        height: 100%;
        z-index: 2;
        transform: scale(1.2) skewX(-20deg);
        transform-origin: right bottom;
        animation: picBefore 1000ms 200ms cubic-bezier(.65, 0, .35, 1) forwards
    }

    @keyframes picBefore {
        0% {
            width: 100%
        }

        100% {
            width: 0
        }
    }

    @keyframes fadeInUpSkew {
        from {
            opacity: 0;
            transform: translateY(50px) skew(15deg)
        }

        to {
            opacity: 1;
            transform: translateY(0) skew(0)
        }
    }

    .dly20 {
        transition-delay: 2s;
        -webkit-transition-delay: 2s
    }

    .dly19 {
        transition-delay: 1.9s;
        -webkit-transition-delay: 1.9s
    }

    .dly18 {
        transition-delay: 1.8s;
        -webkit-transition-delay: 1.8s
    }

    .dly17 {
        transition-delay: 1.7s;
        -webkit-transition-delay: 1.7s
    }

    .dly16 {
        transition-delay: 1.6s;
        -webkit-transition-delay: 1.6s
    }

    .dly15 {
        transition-delay: 1.5s;
        -webkit-transition-delay: 1.5s
    }

    .dly14 {
        transition-delay: 1.4s;
        -webkit-transition-delay: 1.4s
    }

    .dly13 {
        transition-delay: 1.3s;
        -webkit-transition-delay: 1.3s
    }

    .dly12 {
        transition-delay: 1.2s;
        -webkit-transition-delay: 1.2s
    }

    .dly11 {
        transition-delay: 1.1s;
        -webkit-transition-delay: 1.1s
    }

    .dly10 {
        transition-delay: 1s;
        -webkit-transition-delay: 1s
    }

    .dly9 {
        transition-delay: .9s;
        -webkit-transition-delay: .9s
    }

    .dly8 {
        transition-delay: .8s;
        -webkit-transition-delay: .8s
    }

    .dly7 {
        transition-delay: .7s;
        -webkit-transition-delay: .7s
    }

    .dly6 {
        transition-delay: .6s;
        -webkit-transition-delay: .6s
    }

    .dly5 {
        transition-delay: .5s;
        -webkit-transition-delay: .5s
    }

    .dly4 {
        transition-delay: .4s;
        -webkit-transition-delay: .4s
    }

    .dly3 {
        transition-delay: .3s;
        -webkit-transition-delay: .3s
    }

    .dly2 {
        transition-delay: .2s;
        -webkit-transition-delay: .2s
    }

    .dly1 {
        transition-delay: .1s;
        -webkit-transition-delay: .1s
    }

    .action .dly-20 {
        transition-delay: 2s;
        -webkit-transition-delay: 2s
    }

    .action .dly-19 {
        transition-delay: 1.9s;
        -webkit-transition-delay: 1.9s
    }

    .action .dly-18 {
        transition-delay: 1.8s;
        -webkit-transition-delay: 1.8s
    }

    .action .dly-17 {
        transition-delay: 1.7s;
        -webkit-transition-delay: 1.7s
    }

    .action .dly-16 {
        transition-delay: 1.6s;
        -webkit-transition-delay: 1.6s
    }

    .action .dly-15 {
        transition-delay: 1.5s;
        -webkit-transition-delay: 1.5s
    }

    .action .dly-14 {
        transition-delay: 1.4s;
        -webkit-transition-delay: 1.4s
    }

    .action .dly-13 {
        transition-delay: 1.3s;
        -webkit-transition-delay: 1.3s
    }

    .action .dly-12 {
        transition-delay: 1.2s;
        -webkit-transition-delay: 1.2s
    }

    .action .dly-11 {
        transition-delay: 1.1s;
        -webkit-transition-delay: 1.1s
    }

    .action .dly-10 {
        transition-delay: 1s;
        -webkit-transition-delay: 1s
    }

    .action .dly-9 {
        transition-delay: .9s;
        -webkit-transition-delay: .9s
    }

    .action .dly-8 {
        transition-delay: .8s;
        -webkit-transition-delay: .8s
    }

    .action .dly-7 {
        transition-delay: .7s;
        -webkit-transition-delay: .7s
    }

    .action .dly-6 {
        transition-delay: .6s;
        -webkit-transition-delay: .6s
    }

    .action .dly-5 {
        transition-delay: .5s;
        -webkit-transition-delay: .5s
    }

    .action .dly-4 {
        transition-delay: .4s;
        -webkit-transition-delay: .4s
    }

    .action .dly-3 {
        transition-delay: .3s;
        -webkit-transition-delay: .3s
    }

    .action .dly-2 {
        transition-delay: .2s;
        -webkit-transition-delay: .2s
    }

    .action .dly-1 {
        transition-delay: .1s;
        -webkit-transition-delay: .1s
    }
}

.top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6%;
    color: #161616;
    z-index: 1000;
    height: 8rem;
    transition: .5s cubic-bezier(.4, 0, .2, 1);
    -webkit-transition: .5s cubic-bezier(.4, 0, .2, 1)
}

.top::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.05);
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    -webkit-transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.top a {
    color: #161616
}

.top a:hover {
    color: #104CC7
}

@media screen and (max-width: 1650px) {
    .top {
        padding:0 5%
    }
}

@media screen and (max-width: 1440px) {
    .top {
        padding:0 3%
    }
}

@media screen and (max-width: 1180px) {
    .top {
        height:60px
    }
}

@media screen and (max-width: 640px) {
    .top {
        height:54px
    }
}

.topbai {
    background-color: #ffffff
}

.pageH {
    height: 8rem
}

@media screen and (max-width: 1180px) {
    .pageH {
        height:60px
    }
}

@media screen and (max-width: 640px) {
    .pageH {
        height:54px
    }
}

[data-header-change]::before {
    opacity: 1;
    visibility: visible
}

[data-header-toggle] {
    transform: translateY(-110%)
}

.logo a {
    position: relative;
    display: block;
    height: 3.2rem
}

.logo a img {
    height: 100%;
    display: block
}

@media screen and (max-width: 1180px) {
    .logo a {
        height:22px
    }
}

@media screen and (max-width: 640px) {
    .logo a {
        height:18px
    }
}

.nav {
    display: flex
}

.nav>li {
    position: relative;
    margin-right: 12rem
}

.nav>li>a {
    height: 8rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.2;
    font-size: 1.8rem
}

.nav>li>a[has-item]::after {
    display: flex;
    content: "\e644";
    margin-left: 1rem;
    font-family: "iconfont";
    font-size: .8rem;
    line-height: 1;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.26, .06, 0, 1);
    transition-duration: .3s
}

.nav .subnav {
    position: absolute;
    top: 100%;
    left: 0%;
    background-color: #ffffff;
    box-shadow: 0 .4rem 1.8rem rgba(22,22,22,0.1);
    padding: 2.5rem;
    border-radius: .8rem;
    transform: translateY(-10%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .5s;
    -webkit-transition: .5s
}

.nav .subnav>p {
    margin-bottom: 1.2rem;
    font-size: 1.6rem
}

.nav .subnav>p:last-child {
    margin-bottom: 0
}

.nav .subnav a {
    color: #161616;
    display: block;
    line-height: 1.5;
    white-space: nowrap
}

.nav .subnav a:hover {
    color: #104CC7
}

.nav .subnav1 {
    position: fixed;
    top: 8rem;
    left: 0;
    right: 0;
    border-radius: 0;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 1rem 1rem rgba(22,22,22,0.06);
    padding: 4.8rem 0
}

.nav .pro-subnav {
    display: flex;
    justify-content: space-around
}

.nav .pro-for-nav {
    padding: 3.5rem 0;
    line-height: 1.4
}

.nav .pro-for-nav .type {
    margin-bottom: 1.6rem;
    line-height: 1.2;
    font-weight: bold
}

.nav .pro-for-nav>dd {
    margin-bottom: 1rem
}

.nav .pro-for-nav>dd a {
    position: relative;
    padding-left: 1.5rem;
    color: #666666
}

.nav .pro-for-nav>dd a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #666666;
    width: 4px;
    height: 4px;
    border-radius: 50%
}

.nav .pro-for-nav>dd a:hover::before {
    background-color: #104CC7
}

.nav .pro-for-nav>dd:last-child {
    margin-bottom: 0
}

.nav .tit {
    line-height: 1.2;
    font-size: 1.8rem
}

.nav .ti2 {
    font-weight: 500
}

.nav .subnav2 {
    width: 50rem;
    padding: 2.5rem 3rem
}

.nav .three-subnav {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.6rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(16,76,199,0.16)
}

.nav .three-subnav:last-child {
    margin-bottom: 0;
    border-bottom: 0 none
}

.nav .three-subnav>li {
    width: 31.33%;
    margin-left: 2%;
    margin-top: .4rem;
    padding-bottom: .4rem
}

.nav .three-subnav>li>a {
    position: relative;
    padding-left: 1.5rem;
    color: #666666
}

.nav .three-subnav>li>a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #666666;
    width: 4px;
    height: 4px;
    border-radius: 50%
}

.nav .three-subnav>li>a:hover::before {
    background-color: #104CC7
}

.nav>li:hover>a,.nav .hov>a {
    color: #104CC7
}

.nav>li:hover>a::before,.nav .hov>a::before {
    width: 100%
}

.nav>li:hover>a[has-item]::after,.nav .hov>a[has-item]::after {
    transform: scale(1, -1)
}

.nav>li:hover .subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0)
}

@media screen and (max-width: 1440px) {
    .nav>li {
        margin-right:4rem
    }
}

@media screen and (max-width: 1180px) {
    .nav {
        display:none
    }
}

.grop-box {
    display: flex;
    align-items: center
}

@media screen and (max-width: 1180px) {
    .grop-box {
        height:100%
    }
}

.grop-tel {
    display: flex;
    align-items: center;
    line-height: 1.4
}

.grop-tel .icon {
    margin-right: 1rem
}

@media screen and (max-width: 1180px) {
    .grop-tel {
        border-radius:2rem;
        padding: .5rem 1rem;
        line-height: 1.2;
        background-color: rgba(16,76,199,0.9)
    }

    .grop-tel .icon {
        margin-right: .8rem;
        color: #ffffff
    }

    .grop-tel .text {
        color: #ffffff
    }
}

@media screen and (max-width: 640px) {
    .grop-tel {
        line-height:1;
        padding: 2px;
        border-radius: 50%
    }

    .grop-tel .icon {
        margin-right: 0;
        font-size: 30px
    }

    .grop-tel .text {
        display: none
    }
}

.menu-handler {
    width: 4rem;
    height: 4.4rem;
    margin-left: 2rem;
    position: relative;
    display: none
}

.menu-handler .menu-bar {
    width: 100%;
    height: 2px;
    background: #104CC7;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: margin .4s .4s,transform .4s,opacity .4s
}

.menu-handler .menu-bar:nth-child(1) {
    margin-top: -1.1rem
}

.menu-handler .menu-bar:nth-child(3) {
    margin-top: 1.1rem
}

.menu-handler.active .menu-bar:nth-child(1) {
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(30deg);
    transition: margin .4s,transform .4s .4s,opacity .4s
}

.menu-handler.active .menu-bar:nth-child(2) {
    opacity: 0
}

.menu-handler.active .menu-bar:nth-child(3) {
    margin-top: 0;
    transform: translate(-50%, -50%) rotate(-30deg);
    transition: margin .4s,transform .4s .4s,opacity .4s
}

@media screen and (max-width: 1180px) {
    .menu-handler {
        display:block
    }
}

.menubarM {
    background-color: #ffffff;
    color: #161616;
    position: fixed;
    pointer-events: none;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
    z-index: 995;
    -webkit-transition: all .5s cubic-bezier(.25, .46, .45, .94);
    transition: all .5s cubic-bezier(.25, .46, .45, .94)
}

.menubarM a {
    color: #333333
}

.menubarM-box {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.menubarM-list {
    padding: 60px 0 3vh
}

.menubarM-list>li {
    position: relative;
    border-bottom: 1px solid #f1f1f1
}

.menubarM-list>li>a {
    position: relative;
    display: flex;
    font-size: 2.2rem;
    padding: 1.5rem 5%;
    line-height: 1.5;
    justify-content: space-between;
    align-items: center;
    font-weight: 500
}

.menubarM-list>li>a[has-item]::after {
    font-family: "iconfont" !important;
    content: "\e6df";
    margin-left: 1rem;
    flex-shrink: 0;
    transition: .3s;
    -webkit-transition: .3s
}

.menubarM-list .cur>a::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.menubarM-list .cur .subnav {
    background-color: #f9f9f9
}

.menubarM-list .subnav {
    padding: 1.2rem 5%;
    display: none
}

.menubarM-list .subnav p {
    font-weight: 500
}

.menubarM-list .subnav a {
    position: relative;
    display: flex;
    line-height: 1.4;
    padding: 1rem;
    font-size: 1.9rem;
    color: #333333
}

.menubarM-list .pro-subnav>li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
    margin-bottom: 1.2rem
}

.menubarM-list .pro-subnav>li:last-child {
    border-bottom: 0 none;
    margin-bottom: 0
}

.menubarM-list .pro-for-nav {
    padding: 1.8rem 0;
    display: flex;
    flex-wrap: wrap
}

.menubarM-list .pro-for-nav>dt {
    width: 100%
}

.menubarM-list .pro-for-nav>dd {
    margin-right: 2rem
}

.menubarM-list .pro-for-nav>dd:last-child {
    margin-right: 0
}

.menubarM-list .pro-for-nav>dd a {
    font-size: 1.6rem;
    padding: .7rem 0 .7rem 1.5rem;
    position: relative;
    color: #666666
}

.menubarM-list .pro-for-nav>dd a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #104CC7
}

.menubarM-list .tit {
    font-size: 1.9rem
}

.menubarM-list .type {
    font-size: 1.7rem;
    margin-bottom: 1rem
}

.menubarM-list .three-subnav {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.08)
}

.menubarM-list .three-subnav:last-child {
    border-bottom: 0 none;
    margin-bottom: 0
}

.menubarM-list .three-subnav li {
    margin-left: 1rem;
    margin-right: 1rem
}

.menubarM-list .three-subnav li:last-child {
    margin-right: 0
}

.menubarM-list .three-subnav a {
    font-size: 1.6rem;
    color: #666666;
    position: relative;
    padding: .7rem 0 .7rem 1.5rem
}

.menubarM-list .three-subnav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #104CC7
}

.menu-open .menubarM {
    -moz-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    pointer-events: all
}

.menu-open .top::before {
    opacity: 1;
    visibility: visible
}

.ibox-first {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.first-circles {
    width: 172.2916vw;
    height: 116.8229vw;
    left: 45%;
    position: absolute;
    top: 25%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 1180px) {
    .first-circles {
        top:30%;
        left: 50%
    }
}

@media screen and (max-width: 640px) {
    .first-circles {
        top:40%
    }
}

.first-circles-inner {
    position: absolute;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    right: 0;
    top: 0;
    width: 100%
}

.first-circles-contents {
    position: relative;
    height: 100%;
    width: 100%;
    animation: rotate 20s linear infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.first-circles-img1 {
    width: 32.8597%;
    position: absolute;
    right: 0;
    top: 0
}

.first-circles-img2 {
    width: 60.3688%;
    position: absolute;
    left: 0;
    bottom: 0
}

.ibox-banner-desc {
    position: sticky;
    top: 0;
    padding: 36rem 0 12rem;
    text-align: center;
    line-height: 1.2;
    color: #222222
}

.ibox-banner-desc .by1 {
    margin-bottom: 3.5rem
}

.ibox-banner-desc .by1 .co1 {
    padding: 0 1rem
}

.ibox-banner-desc .bot {
    margin-top: 5.5rem
}

@media screen and (max-width: 1440px) {
    .ibox-banner-desc {
        padding:29rem 0 10rem
    }
}

@media screen and (max-width: 1280px) {
    .ibox-banner-desc {
        padding:27rem 0 8rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-banner-desc {
        padding:34vh 0 15vh
    }

    .ibox-banner-desc .by1 {
        margin-bottom: 2rem
    }

    .ibox-banner-desc .by1 .co1 {
        padding: 0 .8rem
    }

    .ibox-banner-desc .bot {
        margin-top: 4rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-banner-desc .by1 {
        margin-bottom:1.2rem
    }

    .ibox-banner-desc .by1 .co1 {
        padding: 0 .5rem
    }

    .ibox-banner-desc .bot {
        margin-top: 2.4rem
    }
}

.btn-more1 {
    padding: 1.8rem 6rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: #104CC7;
    border-radius: 3.2rem
}

.btn-more1::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.btn-more1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.btn-more1 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.btn-more1 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.btn-more1 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.btn-more1 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .btn-more1:hover {
        color:#104CC7;
        box-shadow: 0 .4rem 1.8rem rgba(16,76,199,0.2)
    }

    .btn-more1:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .btn-more1:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .btn-more1:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .btn-more1:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 1180px) {
    .btn-more1 {
        padding:1.5rem 5rem;
        border-radius: 2.8rem
    }

    .btn-more1::before {
        border-radius: 2.8rem;
        display: none
    }
}

@media screen and (max-width: 640px) {
    .btn-more1 {
        padding:1.4rem 3.5rem;
        border-radius: 2.6rem
    }

    .btn-more1::before {
        border-radius: 2.6rem
    }

    .btn-more1 .btn-ico {
        margin-left: 1.5rem
    }
}

.banner {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    background-color: #eee;
    transform: scale(.8);
    z-index: 10
}

.banner .swiper-slide {
    height: auto
}

.banner .imgBox {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 2rem
}

.banner .imgBox img {
    filter: blur(5px);
    opacity: 0;
    transform-origin: right;
    transform: scale(1.04) scaleX(1.1) translate3d(0, 0, 0);
    transition: transform 1s,opacity .7s
}

.banner .imgBox img,.banner .imgBox video {
    border-radius: inherit
}

.banner .imgBox video {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.banner .desc {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.banner .swiper-pag {
    position: absolute;
    right: 4.375%;
    bottom: 4.5rem;
    z-index: 500
}

.banner .swiper-pag .swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: .5;
    margin: 0 0 0 1.2rem;
    border-radius: .4rem;
    width: .8rem;
    height: .8rem;
    transition: .4s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .4s cubic-bezier(.785, .135, .15, .86);
    transition: .4s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .4s cubic-bezier(.55, .31, .15, .93)
}

.banner .swiper-pag .swiper-pagination-bullet-active {
    width: 5.5rem;
    opacity: 1
}

.banner .swiper-slide-active .imgBox img {
    filter: blur(0);
    opacity: 1;
    transform: scale(1) scaleX(1) translate3d(0, 0, 0);
    transition: transform 1.4s .04s cubic-bezier(.08, .92, .35, 1),opacity .6s,filter 1.2s ease-out
}

@media screen and (max-width: 1180px) {
    .banner {
        transform:scale(.9)
    }

    .banner .desc .by {
        padding-bottom: 2rem
    }

    .banner .desc .bot {
        padding-top: 5rem
    }

    .banner .swiper-pag {
        right: 3%;
        bottom: 3%
    }

    .banner .swiper-pag .swiper-pagination-bullet {
        margin: 0 0 0 .8rem;
        border-radius: .3rem;
        width: .6rem;
        height: .6rem
    }

    .banner .swiper-pag .swiper-pagination-bullet-active {
        width: 4rem
    }
}

@media screen and (max-width: 640px) {
    .banner {
        transform:scale(1);
        border-radius: 1.5rem
    }

    .banner .imgBox {
        border-radius: 1.5rem
    }

    .banner .desc .by {
        padding-bottom: 1rem
    }

    .banner .desc .bot {
        padding-top: 2.5rem
    }

    .banner .swiper-pag .swiper-pagination-bullet {
        margin: 0 0 0 .4rem;
        border-radius: .2rem;
        width: .4rem;
        height: .4rem
    }

    .banner .swiper-pag .swiper-pagination-bullet-active {
        width: 2.5rem
    }
}

@keyframes scale-out {
    0% {
        transform: scale(1.125)
    }

    100% {
        transform: scale(1)
    }
}

.banner-more {
    padding: 1.4rem 2.8rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: transparent;
    border-radius: 2.5rem
}

.banner-more::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 2.5rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.banner-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.5rem;
    border: 1px solid #ffffff;
    box-sizing: border-box
}

.banner-more .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.banner-more .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.banner-more .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.banner-more .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .banner-more:hover {
        color:#104CC7
    }

    .banner-more:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .banner-more:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .banner-more:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .banner-more:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 750px) {
    .banner-more {
        padding:1.2rem 2.4rem;
        border-radius: 2.4rem
    }

    .banner-more::before,.banner-more::after {
        border-radius: 2rem
    }
}

@media screen and (max-width: 750px) {
    .banner-more {
        padding:.8rem 2rem;
        border-radius: 2rem
    }

    .banner-more::before,.banner-more::after {
        border-radius: 2rem
    }
}

.video-ico-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    border-radius: 2rem;
    cursor: pointer
}

.video-ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #104CC7
}

.video-ico::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: -1rem;
    right: -1rem;
    bottom: -1rem;
    border-radius: 50%;
    border: 1px solid #ffffff
}

@media screen and (max-width: 1180px) {
    .video-ico {
        width:7.4rem;
        height: 7.4rem
    }
}

@media screen and (max-width: 760px) {
    .video-ico {
        width:6rem;
        height: 6rem
    }
}

@media screen and (max-width: 640px) {
    .video-ico {
        width:5rem;
        height: 5rem
    }
}

@media screen and (max-width: 480px) {
    .video-ico {
        width:4rem;
        height: 4rem
    }
}

.ibox-title .t {
    line-height: 1.2;
    margin-bottom: 2.5rem
}

.ibox-title .by {
    line-height: 1.3
}

@media screen and (max-width: 1180px) {
    .ibox-title .t {
        margin-bottom:2rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-title .t {
        margin-bottom:1.2rem
    }
}

.ibox-business {
    padding: 16rem 0 14rem
}

@media screen and (max-width: 1180px) {
    .ibox-business {
        padding:12rem 0 10rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-business {
        padding:8rem 0 6rem
    }
}

.ibox-business-list {
    display: flex;
    margin-left: -2.33%
}

.ibox-business-list>li {
    width: 31%;
    margin-left: 2.33%;
    margin-top: 2rem;
    display: flex;
    position: relative
}

.ibox-business-list>li:nth-child(1) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.ibox-business-list>li:nth-child(2) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.ibox-business-list>li:nth-child(3) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s
}

.ibox-business-list>li:nth-child(4) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.ibox-business-list>li:nth-child(5) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.ibox-business-list>li:nth-child(6) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.ibox-business-list>li:nth-child(7) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.ibox-business-list>li:nth-child(8) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.ibox-business-list>li:nth-child(9) {
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s
}

@media screen and (max-width: 1180px) {
    .ibox-business-list {
        margin-left:0;
        flex-wrap: wrap
    }

    .ibox-business-list>li {
        width: 100%;
        transition-delay: .1s !important;
        -webkit-transition-delay: .1s !important;
        margin-top: 3.5rem
    }

    .ibox-business-list>li:first-child {
        margin-top: 0
    }
}

.ibox-business-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 1.2rem;
    background-color: #ffffff;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    cursor: pointer;
    transition: .5s;
    -webkit-transition: .5s
}

.ibox-business-item .tbox {
    display: flex;
    position: relative;
    justify-content: space-between;
    border-radius: 1.2rem 1.2rem 0 0;
    line-height: 1.4;
    overflow: hidden
}

.ibox-business-item .tbox .bg {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 1.2rem 1.2rem 0 0
}

.ibox-business-item .tbox .txt {
    position: relative;
    padding: 4.8rem 3rem 3.8rem
}

.ibox-business-item .tbox .icon {
    position: absolute;
    right: -5%;
    max-width: 57%;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    display: flex;
    justify-content: center
}

.ibox-business-item .tbox .icon img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    max-height: 100%;
    display: block
}

.ibox-business-item .desc {
    padding: 0 3rem
}

.ibox-business-item .list>li {
    display: flex;
    padding: 3rem 0;
    border-top: 1px solid #eee
}

.ibox-business-item .list>li:first-child {
    border-top: 0 none
}

.ibox-business-item .list .icon {
    width: 3.7rem;
    height: 3.7rem;
    color: #104CC7;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 3rem
}

.ibox-business-item .list .icon img {
    max-width: 100%;
    max-height: 100%
}

.ibox-business-item .list .t {
    line-height: 1.5;
    margin-bottom: 1rem
}

.ibox-business-item .list .c {
    font-family: "Source Han Sans Light";
    font-weight: lighter
}

@media (hover: hover) and (pointer:fine) {
    .ibox-business-item:hover {
        transform:translateY(-3%)
    }

    .ibox-business-item:hover .tbox .icon img {
        -webkit-animation: jump .6s linear forwards;
        animation: jump .6s linear forwards
    }
}

@media screen and (max-width: 1440px) {
    .ibox-business-item .tbox .txt {
        padding:3.5rem 2.5rem 2.5rem
    }

    .ibox-business-item .tbox .t {
        margin-bottom: .8rem
    }

    .ibox-business-item .desc {
        padding: 0 2.5rem
    }

    .ibox-business-item .list>li {
        padding: 2.5rem 0
    }

    .ibox-business-item .list .icon {
        margin-right: 2.5rem
    }

    .ibox-business-item .list .t {
        margin-bottom: .8rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-business-item .tbox .t {
        margin-bottom:.5rem
    }

    .ibox-business-item .tbox .icon {
        right: 0
    }

    .ibox-business-item .list .icon {
        margin-right: 2rem;
        width: 3rem;
        height: 3rem
    }

    .ibox-business-item .list .t {
        margin-bottom: .5rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-business-item {
        border-radius:.8rem
    }

    .ibox-business-item .tbox {
        border-radius: .8rem .8rem 0 0
    }

    .ibox-business-item .tbox .bg {
        border-radius: .8rem .8rem 0 0
    }

    .ibox-business-item .tbox .txt {
        padding: 2.5rem 2rem 2rem
    }

    .ibox-business-item .tbox .t {
        margin-bottom: .3rem
    }

    .ibox-business-item .desc {
        padding: 0 2rem
    }

    .ibox-business-item .list>li {
        padding: 2rem 0
    }

    .ibox-business-item .list .icon {
        margin-right: 1.5rem
    }

    .ibox-business-item .list .t {
        margin-bottom: .3rem
    }
}

@keyframes jump {
    10% {
        transition-timing-function: ease-out
    }

    30% {
        transform: translateY(-5px);
        transition-timing-function: ease-in
    }

    50% {
        transform: translateY(0);
        transition-timing-function: ease-out
    }

    80% {
        transform: translateY(-5px);
        transition-timing-function: ease-in
    }
}

.ibox-solution {
    background-color: #FAFAFB;
    padding-bottom: 3rem
}

.ibox-solution-box {
    width: 84.375%;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width: 1180px) {
    .ibox-solution-box {
        width:100%
    }
}

.isolution-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.isolution-item img {
    animation: fvSlide_bottom 6s linear infinite alternate-reverse
}

.isolution-item2 img {
    animation-delay: 1s
}

.isolution-item3 img {
    animation-delay: -1s
}

.isolution-item4 img {
    animation-delay: -1.8s
}

.isolution-item5 img {
    animation-delay: -1.5s
}

.isolution-item6 img {
    animation-delay: .5s
}

@keyframes fvSlide_bottom {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
    }
}

.isolution-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.isolution-tab {
    position: absolute;
    opacity: 0
}

.action .isolution-tab {
    opacity: 1;
    animation: textScale .5s linear both
}

.action .isolution-tab:nth-child(1) {
    animation-delay: .2s;
    -webkit-animation-delay: .2s
}

.action .isolution-tab:nth-child(2) {
    animation-delay: .3s;
    -webkit-animation-delay: .3s
}

.action .isolution-tab:nth-child(3) {
    animation-delay: .4s;
    -webkit-animation-delay: .4s
}

.action .isolution-tab:nth-child(4) {
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

.action .isolution-tab:nth-child(5) {
    animation-delay: .6s;
    -webkit-animation-delay: .6s
}

.action .isolution-tab:nth-child(6) {
    animation-delay: .7s;
    -webkit-animation-delay: .7s
}

.action .isolution-tab:nth-child(7) {
    animation-delay: .8s;
    -webkit-animation-delay: .8s
}

.action .isolution-tab:nth-child(8) {
    animation-delay: .9s;
    -webkit-animation-delay: .9s
}

.action .isolution-tab:nth-child(9) {
    animation-delay: 1s;
    -webkit-animation-delay: 1s
}

.action .isolution-tab:nth-child(10) {
    animation-delay: 1.1s;
    -webkit-animation-delay: 1.1s
}

.action .isolution-tab:nth-child(11) {
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s
}

.action .isolution-tab:nth-child(12) {
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s
}

.action .isolution-tab:nth-child(13) {
    animation-delay: 1.4s;
    -webkit-animation-delay: 1.4s
}

.action .isolution-tab:nth-child(14) {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

.action .isolution-tab:nth-child(15) {
    animation-delay: 1.6s;
    -webkit-animation-delay: 1.6s
}

.action .isolution-tab:nth-child(16) {
    animation-delay: 1.7s;
    -webkit-animation-delay: 1.7s
}

.action .isolution-tab:nth-child(17) {
    animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s
}

.action .isolution-tab:nth-child(18) {
    animation-delay: 1.9s;
    -webkit-animation-delay: 1.9s
}

@keyframes textScale {
    0% {
        opacity: 0;
        transform: translateY(-2rem)
    }

    100% {
        opacity: 1;
        transform: initial
    }
}

.isolution-tabA {
    position: relative;
    background-color: rgba(16,76,199,0.77);
    color: #ffffff;
    height: 4.6rem;
    border-radius: 2.3rem;
    padding: 0 2.8rem;
    line-height: 1.2;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    overflow: hidden;
    z-index: 1;
    border: 1.5px solid transparent
}

.isolution-tabA .icon {
    margin-right: 1.6rem
}

.isolution-tabA .btn-tbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.isolution-tabA::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 2.3rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.isolution-tabA:hover {
    color: #104CC7;
    border-color: rgba(16,76,199,0.77)
}

.isolution-tabA:hover::before {
    transform: scaleX(1);
    transform-origin: left
}

@media screen and (max-width: 1180px) {
    .isolution-tabA {
        height:4.2rem;
        border-radius: 2.1rem;
        padding: 0 2rem;
        font-size: 1.4rem
    }

    .isolution-tabA .icon {
        margin-right: 1rem
    }
}

@media screen and (max-width: 860px) {
    .isolution-tabA {
        height:3.8rem;
        border-radius: 1.9rem;
        padding: 0 1.7rem;
        font-size: 1.2rem
    }

    .isolution-tabA .icon {
        margin-right: .6rem
    }
}

@media screen and (max-width: 750px) {
    .isolution-tabA {
        height:auto;
        border-radius: 50%;
        padding: 0;
        font-size: 1.2rem
    }

    .isolution-tabA .icon {
        margin-right: 0;
        width: 3.2rem;
        height: 3.2rem;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .isolution-tabA .txt {
        display: none
    }
}

.pc {
    display: block
}

@media screen and (max-width: 750px) {
    .pc {
        display:none
    }
}

.mobile {
    display: none
}

@media screen and (max-width: 750px) {
    .mobile {
        display:block
    }
}

.ibox-partner {
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden
}

.ibox-partner-p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.ibox-partner-p video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ibox-partner-m {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.ibox-partner-nav {
    display: flex;
    justify-content: center
}

.ibox-partner-nav a {
    padding: 1.4rem 2.6rem;
    margin: 0 1rem 1.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: transparent;
    border-radius: 2.5rem
}

.ibox-partner-nav a::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 2.5rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.ibox-partner-nav a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.5rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.ibox-partner-nav a .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.ibox-partner-nav a .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.ibox-partner-nav a .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.ibox-partner-nav a .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .ibox-partner-nav a:hover {
        color:#ffffff
    }

    .ibox-partner-nav a:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .ibox-partner-nav a:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .ibox-partner-nav a:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .ibox-partner-nav a:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 750px) {
    .ibox-partner-nav a {
        padding:1rem 2rem;
        border-radius: 2rem;
        margin: 0 .5rem
    }

    .ibox-partner-nav a::before,.ibox-partner-nav a::after {
        border-radius: 2rem
    }
}

.ibox-partner-logo {
    position: relative;
    padding: 17rem 0
}

@media screen and (max-width: 1440px) {
    .ibox-partner-logo {
        padding:16rem 0
    }
}

@media screen and (max-width: 1370px) {
    .ibox-partner-logo {
        padding:15rem 0
    }
}

@media screen and (max-width: 1280px) {
    .ibox-partner-logo {
        padding:14rem 0
    }
}

@media screen and (max-width: 1180px) {
    .ibox-partner-logo {
        padding:10rem 0
    }
}

@media screen and (max-width: 750px) {
    .ibox-partner-logo {
        padding:8rem 0
    }
}

.ibox-logo-warp {
    position: relative;
    display: flex;
    margin-bottom: 7rem
}

.ibox-logo-warp:last-child {
    margin-bottom: 0
}

.ibox-logo-warp:hover .ibox-logo-ul {
    animation-play-state: paused !important
}

@media screen and (max-width: 1440px) {
    .ibox-logo-warp {
        margin-bottom:6rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-logo-warp {
        margin-bottom:5rem
    }
}

@media screen and (max-width: 860px) {
    .ibox-logo-warp {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-logo-warp {
        margin-bottom:3rem
    }
}

.ibox-logo-ul {
    display: flex;
    position: relative
}

.ibox-logo-ul>li {
    position: relative;
    margin: 0 4rem
}

.ibox-logo-ul .imgBox {
    width: 20rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.ibox-logo-ul .imgBox img {
    max-width: 100%;
    max-height: 100%
}

@media screen and (max-width: 1440px) {
    .ibox-logo-ul>li {
        margin:0 3rem
    }

    .ibox-logo-ul .imgBox {
        width: 19rem;
        height: 5rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-logo-ul>li {
        margin:0 2.5rem
    }

    .ibox-logo-ul .imgBox {
        width: 18rem;
        height: 4.6rem
    }
}

@media screen and (max-width: 750px) {
    .ibox-logo-ul>li {
        margin:0 2rem
    }

    .ibox-logo-ul .imgBox {
        width: 16rem;
        height: 4rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-logo-ul>li {
        margin:0 1.8rem
    }

    .ibox-logo-ul .imgBox {
        width: 13rem;
        height: 3.4rem
    }
}

.ibox-logo-warp1 .ibox-logo-ul:first-child {
    animation: kllogo1 calc(3s*var(--logo-num)) linear infinite
}

.ibox-logo-warp1 .ibox-logo-ul:last-child {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(100%);
    animation: kllogo2 calc(3s*var(--logo-num)) linear infinite
}

.ibox-logo-warp2 .ibox-logo-ul:first-child {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    animation: kllogo3 calc(3s*var(--logo-num)) linear infinite
}

.ibox-logo-warp2 .ibox-logo-ul:last-child {
    animation: kllogo4 calc(3s*var(--logo-num)) linear infinite
}

@keyframes kllogo1 {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes kllogo2 {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0%)
    }
}

@keyframes kllogo3 {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes kllogo4 {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

.led-bot {
    display: flex;
    justify-content: center
}

.led-more {
    padding: 1.4rem 2.6rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: transparent;
    border-radius: 2.5rem
}

.led-more::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 2.5rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.led-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.5rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.led-more .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.led-more .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.led-more .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.led-more .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .led-more:hover {
        color:#ffffff
    }

    .led-more:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .led-more:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .led-more:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .led-more:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 750px) {
    .led-more {
        padding:1rem 2rem;
        border-radius: 2rem
    }

    .led-more::before,.led-more::after {
        border-radius: 2rem
    }
}

.ibox-news-box {
    display: flex;
    margin-left: -2.33%
}

@media screen and (max-width: 860px) {
    .ibox-news-box {
        flex-wrap:wrap;
        margin-left: -4%
    }
}

.ibox-news-item {
    position: relative;
    margin-left: 2.33%;
    width: 31%;
    border-radius: 1.2rem;
    background-color: #ffffff;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16)
}

.ibox-news-item:nth-child(1) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.ibox-news-item:nth-child(2) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.ibox-news-item:nth-child(3) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s
}

.ibox-news-item:nth-child(4) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.ibox-news-item:nth-child(5) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.ibox-news-item:nth-child(6) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.ibox-news-item:nth-child(7) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.ibox-news-item:nth-child(8) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.ibox-news-item:nth-child(9) {
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s
}

@media screen and (max-width: 860px) {
    .ibox-news-item {
        margin-left:4%;
        width: 46%;
        transition-delay: .1s !important;
        -webkit-transition-delay: .1s !important
    }
}

@media screen and (max-width: 480px) {
    .ibox-news-item {
        width:96%
    }
}

.ibox-news-first .imgBox {
    border-radius: 1.2rem 1.2rem 0 0;
    padding-bottom: 55%
}

.ibox-news-first .imgBox img {
    border-radius: 1.2rem 1.2rem 0 0;
    position: absolute;
    left: 0;
    top: 0
}

.ibox-news-first .desc {
    padding: 3rem 3.5rem
}

.ibox-news-first .title {
    line-height: 1.3;
    height: 7.8rem;
    margin-bottom: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: .3s;
    -webkit-transition: .3s
}

.ibox-news-first .c {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 3.5rem
}

.ibox-news-first .bot {
    border-top: 1px solid rgba(112,112,112,0.31);
    padding-top: 2rem;
    line-height: 1.2;
    position: relative
}

.ibox-news-first .bot::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 0;
    height: 1px;
    background-color: #104CC7;
    transition: .6s;
    -webkit-transition: .6s
}

@media screen and (max-width: 1441px) {
    .ibox-news-first .title {
        height:7rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-news-first .desc {
        padding:2.5rem 3rem
    }

    .ibox-news-first .title {
        margin-bottom: 3rem
    }

    .ibox-news-first .c {
        margin-bottom: 2.5rem
    }

    .ibox-news-first .bot {
        padding-top: 1.5rem
    }
}

@media screen and (max-width: 860px) {
    .ibox-news-first {
        margin-bottom:3rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-news-first {
        margin-bottom:2.5rem
    }

    .ibox-news-first .desc {
        padding: 2rem
    }

    .ibox-news-first .title {
        height: auto;
        margin-bottom: 2rem
    }

    .ibox-news-first .c {
        display: none;
        margin-bottom: 1.5rem
    }
}

@media (hover: hover) and (pointer:fine) {
    .ibox-news-first:hover .bot::before {
        width:100%
    }

    .ibox-news-first:hover .title {
        color: #104CC7
    }

    .ibox-news-first:hover .kl-time .ico {
        color: #104CC7
    }
}

.kl-time {
    display: flex;
    align-items: center;
    color: #888888
}

.kl-time .ico {
    color: #dedede;
    margin-right: 1.6rem;
    transition: .3s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .3s cubic-bezier(.785, .135, .15, .86);
    transition: .3s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .3s cubic-bezier(.55, .31, .15, .93)
}

@media screen and (max-width: 1650px) {
    .kl-time .ico {
        margin-right:1.2rem
    }
}

@media screen and (max-width: 1180px) {
    .kl-time {
        font-size:1.4rem
    }

    .kl-time .ico {
        margin-right: .8rem
    }
}

@media screen and (max-width: 860px) {
    .ibox-news-list {
        width:96%
    }
}

.ibox-news-ul {
    padding: 3.5rem
}

.ibox-news-ul>li {
    position: relative;
    margin-bottom: 4rem
}

.ibox-news-ul>li:last-child {
    margin-bottom: 0
}

.ibox-news-ul .title {
    line-height: 1.5;
    font-weight: normal;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: .3s;
    -webkit-transition: .3s
}

.ibox-news-ul .bot {
    padding-top: 2rem;
    line-height: 1.2
}

@media screen and (max-width: 1650px) {
    .ibox-news-ul>li {
        margin-bottom:3rem
    }

    .ibox-news-ul .bot {
        padding-top: 1.5rem
    }
}

@media screen and (max-width: 1180px) {
    .ibox-news-ul {
        padding:2.5rem 3rem
    }

    .ibox-news-ul>li {
        margin-bottom: 2.5rem
    }

    .ibox-news-ul .bot {
        padding-top: 1rem
    }
}

@media screen and (max-width: 640px) {
    .ibox-news-ul {
        padding:2.5rem 2rem
    }

    .ibox-news-ul>li {
        border-top: 1px solid #f1f1f1;
        margin-bottom: 2rem;
        padding-top: 2rem
    }

    .ibox-news-ul>li:first-child {
        border-top: 0 none;
        padding-top: 0
    }

    .ibox-news-ul .bot {
        padding-top: .8rem
    }
}

@media (hover: hover) and (pointer:fine) {
    .ibox-news-ul>li:hover .title {
        color:#104CC7
    }

    .ibox-news-ul>li:hover .kl-time .ico {
        color: #104CC7
    }
}

.s-parallax-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

.s-parallax-img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    height: 135%;
    height: calc(100% + 106px)
}

.s-parallax-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ibox-trial-box {
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ibox-trial-box .title {
    line-height: 1.2;
    flex: 1;
    margin-right: 5%
}

@media screen and (max-width: 640px) {
    .ibox-trial-box {
        flex-wrap:wrap;
        justify-content: center
    }

    .ibox-trial-box .title {
        width: 100%;
        flex: none;
        text-align: center;
        margin-right: 0;
        margin-bottom: 4.5rem
    }
}

.trial-more {
    padding: 2.3rem 4rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.6rem
}

.trial-more::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 3.6rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.trial-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.6rem;
    border: 1px solid #ffffff;
    box-sizing: border-box
}

.trial-more .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.trial-more .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.trial-more .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.trial-more .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .trial-more:hover {
        color:#104CC7
    }

    .trial-more:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .trial-more:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .trial-more:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .trial-more:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.trial-more .btn-ico {
    margin-left: 5.2rem
}

@media screen and (max-width: 1180px) {
    .trial-more {
        padding:1.6rem 3.2rem;
        border-radius: 2.8rem
    }

    .trial-more::before,.trial-more::after {
        border-radius: 2.8rem
    }

    .trial-more .btn-ico {
        margin-left: 4.4rem
    }
}

@media screen and (max-width: 750px) {
    .trial-more {
        padding:1.2rem 2.4rem;
        border-radius: 2.4rem
    }

    .trial-more::before,.trial-more::after {
        border-radius: 2.4rem
    }

    .trial-more .btn-ico {
        margin-left: 4rem
    }
}

.foot {
    position: relative;
    background-color: #ffffff;
    overflow: hidden
}

.foot-tbox {
    padding: 8rem 0;
    display: flex;
    justify-content: space-between
}

.foot-tbox a {
    color: #222222
}

.foot-tbox a:hover {
    color: #104CC7
}

@media screen and (max-width: 1180px) {
    .foot-tbox {
        padding:5rem 0
    }
}

@media screen and (max-width: 860px) {
    .foot-tbox {
        display:block;
        padding: 4rem 0
    }
}

@media screen and (max-width: 640px) {
    .foot-tbox {
        padding:3rem 0
    }
}

.foot-logo a {
    display: block;
    height: 8.2rem
}

.foot-logo a img {
    height: 100%
}

@media screen and (max-width: 1440px) {
    .foot-logo a {
        height:7rem
    }
}

@media screen and (max-width: 1366px) {
    .foot-logo a {
        height:6rem
    }
}

@media screen and (max-width: 1180px) {
    .foot-logo a {
        height:5rem
    }
}

.foot-nav {
    width: 70%;
    display: flex;
    justify-content: space-between;
    margin-left: 5%
}

.foot-nav a {
    position: relative;
    z-index: 1
}

.foot-nav>li:nth-child(1) {
    transition-delay: .2s;
    -webkit-transition-delay: .2s
}

.foot-nav>li:nth-child(2) {
    transition-delay: .3s;
    -webkit-transition-delay: .3s
}

.foot-nav>li:nth-child(3) {
    transition-delay: .4s;
    -webkit-transition-delay: .4s
}

.foot-nav>li:nth-child(4) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.foot-nav>li:nth-child(5) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.foot-nav>li:nth-child(6) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s
}

.foot-nav>li:nth-child(7) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.foot-nav>li:nth-child(8) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.foot-nav>li:nth-child(9) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.foot-nav>li:nth-child(10) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.foot-nav>li:nth-child(11) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.foot-nav>li:nth-child(12) {
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s
}

.foot-nav>li:nth-child(13) {
    transition-delay: 1.4s;
    -webkit-transition-delay: 1.4s
}

.foot-nav>li:nth-child(14) {
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s
}

.foot-nav>li:nth-child(15) {
    transition-delay: 1.6s;
    -webkit-transition-delay: 1.6s
}

.foot-nav>li:nth-child(16) {
    transition-delay: 1.7s;
    -webkit-transition-delay: 1.7s
}

.foot-nav>li:nth-child(17) {
    transition-delay: 1.8s;
    -webkit-transition-delay: 1.8s
}

.foot-nav>li:nth-child(18) {
    transition-delay: 1.9s;
    -webkit-transition-delay: 1.9s
}

.foot-nav .subnav {
    margin-top: 2.5rem
}

.foot-nav .subnav p {
    margin-bottom: .5rem
}

.foot-nav .subnav p:last-child {
    margin-bottom: 0
}

.foot-nav .subnav a {
    display: inline-block
}

.foot-nav .subnav a:before {
    content: "";
    width: 0;
    height: 1px;
    background: #104CC7;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: .4s;
    z-index: -1
}

.foot-nav .subnav a:hover,.foot-nav .subnav a.active {
    color: #104CC7
}

.foot-nav .subnav a:hover:before,.foot-nav .subnav a.active:before {
    width: 100%;
    right: auto;
    left: 0
}

@media screen and (max-width: 1440px) {
    .foot-nav .subnav {
        margin-top:2rem
    }
}

@media screen and (max-width: 1180px) {
    .foot-nav .subnav {
        font-size:1.5rem
    }
}

@media screen and (max-width: 860px) {
    .foot-nav {
        margin-left:0;
        width: 100%;
        border-top: 1px solid rgba(112,112,112,0.3);
        padding-top: 2.5rem;
        margin-top: 2.5rem
    }

    .foot-nav .subnav {
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .foot-nav {
        display:none
    }
}

.foot-cbox {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(112,112,112,0.3);
    border-bottom: 1px solid rgba(112,112,112,0.3);
    color: #222222
}

.foot-cbox a {
    color: #222222
}

.foot-cbox a:hover {
    color: #104CC7
}

@media screen and (max-width: 1180px) {
    .foot-cbox {
        flex-wrap:wrap
    }
}

.foot-citem {
    border-left: 1px solid rgba(112,112,112,0.3)
}

.foot-citem:nth-child(1) {
    transition-delay: .2s;
    -webkit-transition-delay: .2s
}

.foot-citem:nth-child(2) {
    transition-delay: .3s;
    -webkit-transition-delay: .3s
}

.foot-citem:nth-child(3) {
    transition-delay: .4s;
    -webkit-transition-delay: .4s
}

.foot-citem:nth-child(4) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.foot-citem:nth-child(5) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.foot-citem:nth-child(6) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s
}

.foot-citem:nth-child(7) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.foot-citem:nth-child(8) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.foot-citem:nth-child(9) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.foot-citem:nth-child(10) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.foot-citem:nth-child(11) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.foot-citem:nth-child(12) {
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s
}

.foot-citem:nth-child(13) {
    transition-delay: 1.4s;
    -webkit-transition-delay: 1.4s
}

.foot-citem:nth-child(14) {
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s
}

.foot-citem:nth-child(15) {
    transition-delay: 1.6s;
    -webkit-transition-delay: 1.6s
}

.foot-citem:nth-child(16) {
    transition-delay: 1.7s;
    -webkit-transition-delay: 1.7s
}

.foot-citem:nth-child(17) {
    transition-delay: 1.8s;
    -webkit-transition-delay: 1.8s
}

.foot-citem:nth-child(18) {
    transition-delay: 1.9s;
    -webkit-transition-delay: 1.9s
}

.foot-citem:first-child {
    border-left: 0 none
}

@media screen and (max-width: 1180px) {
    .foot-citem {
        width:100%;
        border-left: 0 none;
        border-top: 1px solid rgba(112,112,112,0.3)
    }

    .foot-citem:first-child {
        border-top: 0 none
    }
}

.foot-cerm {
    padding: 4rem 0;
    margin-right: 1rem;
    flex: 1
}

.foot-cerm .t {
    margin-bottom: .5rem
}

@media screen and (max-width: 1180px) {
    .foot-cerm {
        padding:3rem 0;
        margin-right: 0;
        width: 100%
    }
}

@media screen and (max-width: 860px) {
    .foot-cerm {
        padding:2.5rem 0
    }
}

.foot-cerm-ul {
    display: flex;
    text-align: center
}

.foot-cerm-ul>li {
    width: 106px;
    margin-right: 2.4vw;
    padding-top: 1rem
}

@media screen and (max-width: 1600px) {
    .foot-cerm-ul>li {
        margin-right:2.2vw
    }
}

@media screen and (max-width: 1440px) {
    .foot-cerm-ul>li {
        margin-right:1.8vw
    }
}

@media screen and (max-width: 1180px) {
    .foot-cerm-ul>li {
        width:9rem;
        margin-right: 1.5rem
    }
}

@media screen and (max-width: 860px) {
    .foot-cerm-ul {
        justify-content:flex-start
    }
}

.footerm-box {
    width: 131px
}

@media screen and (max-width: 1180px) {
    .footerm-box {
        width:11rem
    }
}

@media screen and (max-width: 640px) {
    .footerm-box {
        width:10rem;
        border: 1px solid rgba(112,112,112,0.1)
    }
}

.foot-cmap {
    flex: 1;
    display: flex;
    align-items: center
}

@media screen and (max-width: 1180px) {
    .foot-cmap {
        flex:none;
        display: flex
    }
}

.foot-cmap-box {
    position: relative
}

.miaodian-ico {
    position: absolute;
    cursor: pointer
}

.miaodian-ico .zb {
    display: flex;
    color: #707070;
    line-height: 1.2
}

.miaodian-ico .zb .ico {
    color: #104CC7;
    font-size: 2rem;
    margin-right: .5rem
}

.miaodian-ico .zbsh {
    flex-direction: column
}

.miaodian-ico .zbsh2 {
    flex-direction: column-reverse
}

.miaodian-ico .desc {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border-radius: .6rem;
    box-shadow: 0 0 .6rem rgba(112,112,112,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 28rem;
    padding: 2rem 2rem 2.5rem;
    transform: scale(.9);
    transition: .4s;
    -webkit-transition: .4s
}

.miaodian-ico .desc .c {
    margin-top: .5rem;
    line-height: 1.5;
    font-size: 14px
}

@media (hover: hover) and (pointer:fine) {
    .miaodian-ico:hover .desc {
        opacity:1;
        visibility: visible;
        transform: scale(1)
    }
}

@media screen and (max-width: 1180px) {
    .miaodian-ico .zb {
        font-size:1.4rem
    }

    .miaodian-ico .zb .ico {
        font-size: 1.6rem
    }
}

.foot-cdesc {
    padding: 4rem 4.6rem
}

@media screen and (max-width: 1440px) {
    .foot-cdesc {
        padding:4rem 3.6rem
    }
}

@media screen and (max-width: 1180px) {
    .foot-cdesc {
        padding:3rem 0;
        width: 100%
    }
}

@media screen and (max-width: 860px) {
    .foot-cdesc {
        padding:2.5rem 0
    }
}

.foot-bbox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 0 1.8rem;
    color: #707070
}

.foot-bbox .c {
    flex: 1;
    margin-right: 5%
}

.foot-bbox a {
    color: #707070
}

.foot-bbox a:hover {
    color: #104CC7
}

@media screen and (max-width: 1180px) {
    .foot-bbox {
        font-size:1.5rem
    }
}

@media screen and (max-width: 640px) {
    .foot-bbox {
        display:block;
        padding: 2rem 0;
        font-size: 1.4rem
    }

    .foot-bbox .c {
        margin-right: 0
    }
}

.section-page {
    overflow: hidden;
    width: 100%
}

.bg-page {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto
}

.page-yuan {
    position: fixed;
    pointer-events: none
}

.page-yuan1 {
    width: 51.9791%;
    right: -35%;
    top: -5%
}

.page-yuan1 img {
    animation: rotate 20s linear infinite
}

.page-yuan2 {
    width: 41.3541%;
    left: -20%;
    bottom: -25%
}

.page-yuan2 img {
    animation: rotate 18s linear infinite
}

.news-tbox {
    padding: 7rem 0 4rem
}

@media screen and (max-width: 1180px) {
    .news-tbox {
        padding:6rem 0 3.5rem
    }
}

@media screen and (max-width: 750px) {
    .news-tbox {
        padding:5rem 0 3rem
    }
}

.news-first {
    display: flex;
    background-color: #ffffff;
    border-radius: 12px
}

.news-first .imgBox {
    width: 66%;
    border-radius: 12px 12px 0 0
}

.news-first .desc {
    padding: 7rem 4.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.news-first .title {
    line-height: 1.33;
    margin-bottom: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: .3s;
    -webkit-transition: .3s
}

.news-first .c {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 4rem
}

@media screen and (max-width: 1180px) {
    .news-first .imgBox {
        width:50%
    }

    .news-first .desc {
        padding: 6rem 4rem
    }
}

@media screen and (max-width: 860px) {
    .news-first .desc {
        padding:5rem 3rem
    }

    .news-first .title {
        margin-bottom: 2rem
    }

    .news-first .c {
        margin-bottom: 3rem
    }
}

@media screen and (max-width: 640px) {
    .news-first {
        border-radius:8px;
        flex-wrap: wrap;
        background-color: rgba(112,112,112,0.05)
    }

    .news-first .imgBox {
        width: 100%;
        border-radius: 8px 8px 0 0
    }

    .news-first .desc {
        padding: 3rem 5%
    }
}

@media (hover: hover) and (pointer:fine) {
    .news-first:hover .title {
        color:#104CC7
    }

    .news-first:hover .kl-time .ico {
        color: #104CC7
    }
}

.kl-line {
    height: 1px;
    background-color: rgba(112,112,112,0.31)
}

.news-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2.33%
}

.news-list>li {
    width: 31%;
    margin-left: 2.33%;
    margin-bottom: 5rem
}

@media screen and (max-width: 1180px) {
    .news-list>li {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 860px) {
    .news-list {
        margin-left:-4%
    }

    .news-list>li {
        width: 46%;
        margin-left: 4%;
        margin-bottom: 3rem
    }
}

@media screen and (max-width: 480px) {
    .news-list {
        margin-left:0
    }

    .news-list>li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 2.5rem
    }
}

.new-item {
    position: relative;
    border-radius: 1.2rem;
    background-color: #ffffff;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    display: flex;
    height: 100%;
    flex-direction: column
}

.new-item .imgBox {
    border-radius: 1.2rem 1.2rem 0 0;
    padding-bottom: 55%
}

.new-item .imgBox img {
    border-radius: 1.2rem 1.2rem 0 0;
    position: absolute;
    left: 0;
    top: 0
}

.new-item .desc {
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1
}

.new-item .title {
    line-height: 1.3;
    margin-bottom: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: .3s;
    -webkit-transition: .3s
}

.new-item .c {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 3.5rem
}

.new-item .bot {
    border-top: 1px solid rgba(112,112,112,0.31);
    padding-top: 2rem;
    line-height: 1.2;
    position: relative
}

.new-item .bot::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 0;
    height: 1px;
    background-color: #104CC7;
    transition: .6s;
    -webkit-transition: .6s
}

@media screen and (max-width: 1180px) {
    .new-item .desc {
        padding:2.5rem
    }

    .new-item .title {
        margin-bottom: 2.5rem
    }

    .new-item .c {
        margin-bottom: 3rem
    }

    .new-item .bot {
        padding-top: 1.5rem
    }
}

@media screen and (max-width: 860px) {
    .new-item .desc {
        padding:2.5rem 2rem
    }
}

@media screen and (max-width: 640px) {
    .new-item .title {
        margin-bottom:1.8rem
    }

    .new-item .c {
        margin-bottom: 2rem;
        font-size: 1.4rem
    }
}

@media (hover: hover) and (pointer:fine) {
    .new-item:hover .bot::before {
        width:100%
    }

    .new-item:hover .title {
        color: #104CC7
    }

    .new-item:hover .kl-time .ico {
        color: #104CC7
    }
}

.paging {
    display: flex;
    align-items: center;
    justify-content: center
}

.paging a,.paging span {
    line-height: 1.5;
    margin: 0 .5rem;
    border-radius: 50%;
    width: 5.8rem;
    height: 5.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #161616;
    background-color: #f8f8f8
}

.paging a:hover,.paging span:hover,.paging a.active,.paging span.active {
    background-color: #104CC7;
    color: #ffffff
}

.paging .btn-item {
    flex-shrink: 0
}

.paging .btn-item:first-child {
    margin-left: 0;
    margin-right: 5rem
}

.paging .btn-item:last-child {
    margin-right: 0;
    margin-left: 5rem
}

@media screen and (max-width: 1180px) {
    .paging a,.paging span {
        width:4.2rem;
        height: 4.2rem;
        margin: 0 .3rem
    }

    .paging .btn-item:first-child {
        margin-right: 3rem
    }

    .paging .btn-item:last-child {
        margin-left: 3rem
    }
}

@media screen and (max-width: 640px) {
    .paging {
        font-size:12px
    }

    .paging a,.paging span {
        width: 3.8rem;
        height: 3.8rem;
        margin: 0 .2rem
    }

    .paging .btn-item:first-child {
        margin-right: 1rem
    }

    .paging .btn-item:last-child {
        margin-left: 1rem
    }
}

.page-curbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #999999;
    padding: 2.5rem 0
}

.page-curbox .home {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background-color: #C0BFBF;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1.8rem
}

.page-curbox a {
    position: relative;
    color: #999999
}

.page-curbox a:before {
    content: "";
    width: 0;
    height: 1px;
    background: #104CC7;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: .4s;
    z-index: -1
}

.page-curbox a:hover,.page-curbox a.active {
    color: #104CC7
}

.page-curbox a:hover:before,.page-curbox a.active:before {
    width: 100%;
    right: auto;
    left: 0
}

.page-curbox a:hover {
    color: #104CC7
}

.page-curbox .fg {
    padding: 0 .4rem
}

@media screen and (max-width: 1440px) {
    .page-curbox {
        padding:2rem 0
    }
}

@media screen and (max-width: 1180px) {
    .page-curbox {
        padding:1.5rem 0;
        font-size: 1.4rem
    }

    .page-curbox .home {
        margin-right: 1rem
    }
}

.page-curbox2 {
    color: #ffffff
}

.page-curbox2 .home {
    background-color: #104CC7
}

.page-curbox2 a {
    color: #ffffff
}

.page-curbox2 a::before {
    background-color: #ffffff
}

.page-curbox2 a:hover {
    color: #ffffff
}

.bgF7FAFC {
    background-color: #F7FAFC
}

.bgFAFAFB {
    background-color: #FAFAFB
}

.info-tbox-box {
    background-color: #F7FAFC
}

@media screen and (max-width: 860px) {
    .info-tbox-box .inner-lw66 {
        width:100%
    }
}

.inner-lw66 {
    width: 66%
}

.info-tbox {
    padding: 10rem 0 6rem
}

.info-tbox .title {
    margin-bottom: 7rem;
    line-height: 1.5;
    color: #333333
}

.info-tbox .time {
    color: #999999
}

@media screen and (max-width: 1440px) {
    .info-tbox {
        padding:8rem 0 5rem
    }

    .info-tbox .title {
        margin-bottom: 6rem
    }
}

@media screen and (max-width: 1370px) {
    .info-tbox {
        padding:7rem 0 4rem
    }

    .info-tbox .title {
        margin-bottom: 5rem
    }
}

@media screen and (max-width: 1180px) {
    .info-tbox {
        padding:4rem 0
    }

    .info-tbox .title {
        margin-bottom: 4rem
    }
}

@media screen and (max-width: 640px) {
    .info-tbox {
        padding:3.5rem 0
    }

    .info-tbox .title {
        margin-bottom: 3rem
    }
}

.info-page {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

@media screen and (max-width: 860px) {
    .info-page {
        display:block
    }
}

@media screen and (max-width: 860px) {
    .info-page-l {
        width:100%
    }
}

.info-page-r {
    width: 25%;
    position: sticky;
    top: 12rem
}

@media screen and (max-width: 860px) {
    .info-page-r {
        width:100%;
        position: static;
        display: block;
        top: auto;
        margin-top: 4rem
    }
}

.info-rtitle {
    color: #333333;
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 2rem;
    line-height: 1.5
}

.info-sider-ul>li {
    position: relative;
    padding: 2.5rem 0;
    border-bottom: 1px solid #DFDFDF;
    color: #666666
}

.info-sider-ul .t {
    line-height: 1.55;
    margin-bottom: 1.2rem;
    font-weight: normal
}

.info-sider-ul .time {
    color: #999999
}

@media screen and (max-width: 1440px) {
    .info-sider-ul>li {
        padding:2rem 0
    }

    .info-sider-ul .t {
        margin-bottom: 1rem
    }
}

@media screen and (max-width: 1180px) {
    .info-sider-ul>li {
        padding:1.8rem 0
    }

    .info-sider-ul .t {
        margin-bottom: .5rem
    }

    .info-sider-ul .time {
        font-size: 1.4rem
    }
}

.pager {
    display: flex;
    justify-content: space-between;
    color: #999999;
    border-top: 1px solid #DFDFDF;
    padding: 3rem 0
}

.pager a {
    color: #999999;
    display: flex;
    align-items: center
}

.pager a:hover {
    color: #104CC7
}

.pager .item .ico {
    font-size: 2rem
}

.pager .prev .ico {
    margin-right: .5rem
}

.pager .next .ico {
    margin-left: .5rem
}

.pager .black .ico {
    margin-right: .5rem
}

@media screen and (max-width: 1180px) {
    .pager {
        padding:2.5rem 0
    }
}

@media screen and (max-width: 860px) {
    .pager {
        padding:1.5rem 2rem;
        background-color: #F7FAFC;
        border-top: 0 none;
        border-radius: 2.4rem
    }
}

.page-title {
    margin-bottom: 5.5rem
}

.page-title .title {
    line-height: 1.25
}

.page-title .page-line {
    width: 4rem;
    height: 4px;
    background-color: #104CC7;
    display: block;
    margin-top: 2.5rem
}

@media screen and (max-width: 1180px) {
    .page-title {
        margin-bottom:4.5rem
    }

    .page-title .page-line {
        width: 3rem;
        height: 3px;
        margin-top: 2rem
    }
}

@media screen and (max-width: 640px) {
    .page-title {
        margin-bottom:3.5rem
    }

    .page-title .page-line {
        width: 2.8rem;
        height: 2px;
        margin-top: 1.5rem
    }
}

.fc .page-line {
    margin-left: auto;
    margin-right: auto
}

.recommend-box {
    width: 100%;
    overflow: hidden
}

.recommend-swiper {
    position: relative
}

.recommend-swiper .swiper-slide {
    height: auto
}

@media screen and (max-width: 1180px) {
    .recommend-swiper {
        overflow:initial
    }
}

.join-pbanner {
    position: relative;
    overflow: hidden
}

[pbanner-fixd] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 120%;
    height: calc(100% + 34px)
}

.jpbanner-desc {
    color: #ffffff
}

.jpbanner-con {
    height: 50rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.jpbanner-con .t {
    margin-bottom: 2rem
}

@media screen and (max-width: 1440px) {
    .jpbanner-con {
        height:45rem
    }
}

@media screen and (max-width: 1370px) {
    .jpbanner-con {
        height:40rem
    }
}

@media screen and (max-width: 1180px) {
    .jpbanner-con {
        height:auto;
        padding: 10% 0
    }
}

.join-list>* {
    margin-bottom: 1.1rem;
    border-radius: 6px
}

.join-list>dt {
    background-color: #104CC7;
    color: #ffffff
}

.join-list>dd {
    background: -webkit-gradient(linear, left top, left bottom, from(#E9F0FF), to(#F6F8FF));
    background: -webkit-linear-gradient(#E9F0FF, #F6F8FF);
    background: linear-gradient(#E9F0FF, #F6F8FF);
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s
}

.join-list>dd:hover {
    box-shadow: 0 0 2rem rgba(0,0,0,0.1)
}

.joinTbox {
    display: flex;
    padding: 2.5rem 5%;
    line-height: 1.5;
    align-items: center
}

.joinTbox .hspan {
    flex-shrink: 0;
    width: 20%;
    margin-right: 3%
}

.joinTbox .hspan .ico {
    margin-right: 1rem
}

.joinTbox .hspan1 {
    width: 45%;
    line-height: 1.2
}

.joinTbox .lhspan {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0
}

@media screen and (max-width: 1180px) {
    .joinTbox {
        padding:2rem 4%
    }
}

@media screen and (max-width: 750px) {
    .joinTbox {
        padding:1.5rem 5%;
        justify-content: space-between
    }

    .joinTbox .hspan {
        display: none;
        width: auto
    }

    .joinTbox .hspan1 {
        display: block;
        flex: 1
    }

    .joinTbox .lhspan {
        width: 1.7rem;
        display: block;
        flex: 0
    }
}

.join-add {
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    position: relative;
    margin-top: .2rem;
    cursor: pointer
}

.join-add::before,.join-add::after {
    content: "";
    position: absolute;
    background-color: #104CC7;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .4s;
    -webkit-transition: .4s
}

.join-add::before {
    width: 100%;
    height: .3rem
}

.join-add::after {
    height: 100%;
    width: .3rem
}

.joinT {
    color: #999999;
    align-items: flex-start
}

.joinT .hspan1 {
    color: #222222
}

.joinB {
    padding-left: 5%;
    padding-right: 5%;
    border-top: 1px solid #DEDEDE;
    display: none
}

.join-desc {
    overflow: hidden
}

.join-more {
    padding: 1.6rem 4.2rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: #104CC7;
    border-radius: 2.8rem
}

.join-more::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 2.8rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.join-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.8rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.join-more .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.join-more .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.join-more .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.join-more .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .join-more:hover {
        color:#104CC7
    }

    .join-more:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .join-more:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .join-more:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .join-more:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 1180px) {
    .join-more {
        padding:1.4rem 3.6rem;
        border-radius: 2.2rem
    }

    .join-more::before,.join-more::after {
        border-radius: 2.2rem
    }
}

@media screen and (max-width: 750px) {
    .join-more {
        padding:1.2rem 3rem;
        border-radius: 2rem
    }

    .join-more::before,.join-more::after {
        border-radius: 2rem
    }
}

.active .join-add::after {
    height: 0
}

.pbanner-box {
    position: relative;
    overflow: hidden;
    z-index: 2
}

@media screen and (max-width: 1180px) {
    .pbanner-box-imgf .imgBox img {
        object-fit:fill
    }
}

.pbanner-desc {
    position: relative;
    text-align: center
}

.pbanner-desc .t {
    line-height: 1.1;
    margin-bottom: 2.8rem
}

@media screen and (max-width: 1180px) {
    .pbanner-desc .t {
        margin-bottom:2.2rem
    }
}

@media screen and (max-width: 750px) {
    .pbanner-desc {
        line-height:1.5
    }

    .pbanner-desc .t {
        margin-bottom: 1.8rem
    }
}

[pbanner-fixd2] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

[pbanner-fixd3] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 750px) {
    [pbanner-fixd3] {
        position:initial;
        height: auto;
        left: auto;
        top: auto
    }
}

.pbanner-desc2 {
    height: 57.6rem;
    display: flex;
    justify-content: center;
    flex-direction: column
}

.pbanner-desc2 .t {
    line-height: 1.2;
    margin-bottom: 2rem
}

.pbanner-desc2 .c {
    width: 60%
}

@media screen and (max-width: 1440px) {
    .pbanner-desc2 {
        height:50rem
    }

    .pbanner-desc2 .t {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pbanner-desc2 {
        height:40rem
    }

    .pbanner-desc2 .t {
        margin-bottom: 1rem
    }

    .pbanner-desc2 .c {
        width: 70%
    }
}

@media screen and (max-width: 860px) {
    .pbanner-desc2 {
        height:auto;
        padding: 6rem 0
    }
}

@media screen and (max-width: 640px) {
    .pbanner-desc2 {
        min-height:30vh;
        padding: 4.5rem 0
    }

    .pbanner-desc2 .t {
        margin-bottom: .8rem
    }

    .pbanner-desc2 .c {
        width: 100%
    }
}

.pbanner-desc3 {
    height: 57.6rem;
    display: flex;
    justify-content: center;
    flex-direction: column
}

.pbanner-desc3 .t {
    line-height: 1.2;
    margin-bottom: 2rem
}

.pbanner-desc3 .c {
    width: 60%
}

@media screen and (max-width: 1440px) {
    .pbanner-desc3 {
        height:50rem
    }

    .pbanner-desc3 .t {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 1180px) {
    .pbanner-desc3 {
        height:40rem
    }

    .pbanner-desc3 .t {
        margin-bottom: 1rem
    }

    .pbanner-desc3 .c {
        width: 70%
    }
}

@media screen and (max-width: 860px) {
    .pbanner-desc3 {
        height:auto;
        padding: 6rem 0
    }
}

@media screen and (max-width: 750px) {
    .pbanner-desc3 {
        position:absolute;
        left: 5%;
        top: 0;
        padding: 8vh 0 0;
        justify-content: flex-start
    }

    .pbanner-desc3 .t {
        margin-bottom: .8rem
    }

    .pbanner-desc3 .c {
        width: 100%
    }
}

.pbanner-descfff {
    color: #ffffff;
    text-shadow: 0 .3rem .6rem rgba(0,0,0,0.16)
}

.pbanner-descblue {
    color: #104CC7
}

[pbanner-descH] {
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.page-more {
    padding: 1.5rem 4.6rem
}

@media screen and (max-width: 1180px) {
    .page-more {
        padding:1.4rem 3.6rem;
        border-radius: 2.2rem
    }

    .page-more::before,.page-more::after {
        border-radius: 2.2rem
    }
}

@media screen and (max-width: 750px) {
    .page-more {
        padding:1.2rem 3rem;
        border-radius: 2rem
    }

    .page-more::before,.page-more::after {
        border-radius: 2rem
    }
}

@media screen and (max-width: 640px) {
    .page-more {
        font-size:1.4rem
    }
}

.pbanner-more1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: #104CC7;
    border-radius: 3.2rem
}

.pbanner-more1::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.pbanner-more1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.pbanner-more1 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.pbanner-more1 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.pbanner-more1 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.pbanner-more1 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .pbanner-more1:hover {
        color:#104CC7
    }

    .pbanner-more1:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .pbanner-more1:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .pbanner-more1:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .pbanner-more1:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.kaola-plist {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3.33%;
    margin-top: -4rem
}

.kaola-plist>li {
    width: 30%;
    margin-left: 3.33%;
    margin-top: 4rem;
    display: flex
}

@media screen and (max-width: 768px) {
    .kaola-plist {
        margin-top:-3rem
    }

    .kaola-plist>li {
        width: 100%;
        margin-top: 3rem
    }
}

.kaola-pitem {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 0 .6rem rgba(0,0,0,0.16);
    border-radius: .6rem;
    padding: 5rem 4rem 6.5rem;
    border: 1px solid transparent;
    height: 100%;
    transition: .6s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .6s cubic-bezier(.785, .135, .15, .86);
    transition: .6s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .6s cubic-bezier(.55, .31, .15, .93)
}

.kaola-pitem .ico {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.kaola-pitem .ico img {
    max-width: 100%;
    max-height: 100%
}

@media (hover: hover) and (pointer:fine) {
    .kaola-pitem:hover {
        box-shadow:0 0 2.6rem rgba(112,112,112,0.16);
        border-color: #104CC7;
        border-radius: 1.2rem
    }
}

@media screen and (max-width: 1440px) {
    .kaola-pitem {
        padding:4.5rem 3.5rem 5.5rem
    }
}

@media screen and (max-width: 1180px) {
    .kaola-pitem {
        padding:4rem 3rem 5rem
    }
}

@media screen and (max-width: 860px) {
    .kaola-pitem {
        padding:3.5rem 2.5rem 4.5rem
    }
}

@media screen and (max-width: 640px) {
    .kaola-pitem {
        padding:3rem 2rem 4rem
    }
}

.buddy-item {
    text-align: center
}

.buddy-item .ico {
    margin-bottom: 4rem;
    width: 7rem;
    height: 7rem
}

.buddy-item .title {
    line-height: 1.4
}

.buddy-item .c {
    color: #707070
}

@media screen and (max-width: 1180px) {
    .buddy-item {
        text-align:left
    }

    .buddy-item .ico {
        width: 6rem;
        height: 6rem;
        margin-bottom: 3rem
    }

    .buddy-item .c {
        text-align: justify
    }
}

@media screen and (max-width: 640px) {
    .buddy-item .ico {
        width:5.5rem;
        height: 5.5rem;
        margin-bottom: 2.5rem
    }
}

.buddy-choiceBox {
    position: relative;
    margin-bottom: 8rem
}

.buddy-choiceBox .imgBox {
    width: 50.208%;
    margin: 0 auto
}

.buddy-choiceBox .imgBox img {
    -webkit-animation: updownInfi_S 3s ease-in-out infinite alternate;
    animation: updownInfi_S 3s ease-in-out infinite alternate
}

@media screen and (max-width: 860px) {
    .buddy-choiceBox {
        margin-bottom:0
    }

    .buddy-choiceBox .imgBox {
        width: 70%
    }
}

@media screen and (max-width: 640px) {
    .buddy-choiceBox .imgBox {
        width:100%
    }
}

@keyframes updownInfi_S {
    0% {
        transform: translateY(-1rem)
    }

    50% {
        transform: translateY(1rem)
    }

    100% {
        transform: translateY(-1rem)
    }
}

.buddychoice-item {
    position: absolute;
    cursor: pointer
}

.buddychoice-item .ico {
    position: relative;
    width: 7.4rem;
    height: 7.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#D8E5FF), to(#104CC7));
    background: -webkit-linear-gradient(#D8E5FF, #104CC7);
    background: linear-gradient(#D8E5FF, #104CC7);
    transition: .3s;
    -webkit-transition: .3s
}

.buddychoice-item .ico::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #104CC7;
    transform: scale(1.2);
    opacity: 0;
    transition: .6s;
    -webkit-transition: .6s
}

.buddychoice-item .ico img {
    max-width: 42%;
    max-height: 42%;
    display: block;
    transition: .6s;
    -webkit-transition: .6s
}

.buddychoice-item .txt {
    line-height: 1.2;
    color: #104CC7;
    transition: .3s;
    -webkit-transition: .3s
}

@media (hover: hover) and (pointer:fine) {
    .buddychoice-item:hover .ico::before {
        opacity:1;
        transform: scale(1)
    }

    .buddychoice-item:hover .ico img {
        transform: rotateY(180deg)
    }

    .buddychoice-item:hover .txt {
        color: #222222
    }
}

@media screen and (max-width: 860px) {
    .buddychoice-item {
        position:relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        box-shadow: 0 0 2rem rgba(16,76,199,0.1);
        padding: 1.5rem;
        border-radius: 1.2rem;
        z-index: 2;
        margin-top: 1.5rem
    }

    .buddychoice-item .ico {
        width: 5.4rem;
        height: 5.4rem
    }
}

.buddychoice-item1 {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    top: 46%;
    right: 73%
}

.buddychoice-item1 .txt {
    text-align: right;
    margin-right: 2rem
}

@media screen and (max-width: 860px) {
    .buddychoice-item1 {
        flex-direction:row
    }

    .buddychoice-item1 .txt {
        margin: 0 0 0 2rem;
        text-align: left
    }
}

.buddychoice-item2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    left: 0%;
    top: 85%;
    width: 100%
}

.buddychoice-item2 .txt {
    margin-top: 2rem
}

@media screen and (max-width: 860px) {
    .buddychoice-item2 {
        text-align:left;
        flex-direction: row
    }

    .buddychoice-item2 .txt {
        margin: 0 0 0 2rem
    }
}

.buddychoice-item3 {
    display: flex;
    align-items: center;
    left: 71%;
    top: 45%
}

.buddychoice-item3 .txt {
    margin-left: 2rem
}

.buddyK-img1 {
    width: 76.46%;
    max-width: 1101px;
    margin: 0 auto;
    position: relative
}

.buddyK-img1 .item {
    position: absolute
}

.buddyK-img1 .item1 {
    width: 100%;
    left: 0;
    bottom: 35%;
    -webkit-animation: updownInfi_S 2.4s ease-in-out infinite alternate;
    animation: updownInfi_S 2.4s ease-in-out infinite alternate
}

.buddyK-img1 .item1 .tu {
    margin-top: 1.5rem
}

.buddyK-img1 .item1 .tu img {
    width: 13.079%
}

.buddyK-img1 .item2 {
    width: 36.7847%;
    left: 31.6076%;
    bottom: 19%
}

.buddyK-img1 .item2 img {
    -webkit-animation: beat 2s ease-in-out infinite alternate;
    animation: beat 2s ease-in-out infinite alternate
}

@media screen and (max-width: 1180px) {
    .buddyK-img1 .item1 .tu {
        margin-top:1rem
    }
}

@media screen and (max-width: 860px) {
    .buddyK-img1 {
        width:100%
    }

    .buddyK-img1 .item1 .tu {
        margin-top: .5rem
    }
}

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

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

    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

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

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

    100% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

.buddy-swiper {
    position: relative;
    overflow: hidden
}

.buddy-swiper .swiper-slide {
    display: flex;
    background-color: #ffffff;
    border-radius: 1.2rem;
    height: auto;
    position: relative
}

.buddy-swiper .imgBox {
    flex-shrink: 0;
    width: 64%;
    height: 100%;
    border-radius: 1.2rem 0 0 1.2rem
}

.buddy-swiper .imgBox img {
    border-radius: 1.2rem 0 0 1.2rem
}

.buddy-swiper .desc {
    flex: 1;
    padding: 7rem 5rem 9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.buddy-swiper .type {
    line-height: 1.5;
    margin-bottom: .5rem
}

.buddy-swiper .t {
    line-height: 1.2
}

.buddy-swiper .c {
    color: #666666;
    flex: 1
}

.buddy-swiper .bot {
    margin-top: 3rem
}

.buddy-swiper .more {
    display: inline-flex;
    position: relative;
    color: #222222
}

@media (hover: hover) and (pointer:fine) {
    .buddy-swiper .swiper-slide:hover .more .iconfont {
        animation:1s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 1180px) {
    .buddy-swiper .imgBox {
        width:50%
    }

    .buddy-swiper .desc {
        padding: 6rem 4rem 8rem
    }
}

@media screen and (max-width: 860px) {
    .buddy-swiper .swiper-slide {
        display:block
    }

    .buddy-swiper .imgBox {
        width: 100%;
        height: auto;
        border-radius: 1.2rem
    }

    .buddy-swiper .imgBox img {
        border-radius: 1.2rem
    }

    .buddy-swiper .desc {
        padding: 4rem 5% 5rem
    }
}

@media screen and (max-width: 640px) {
    .buddy-swiper {
        overflow:initial
    }

    .buddy-swiper .desc {
        padding: 3rem 5% 4rem
    }

    .buddy-swiper .t {
        margin-bottom: 2rem
    }
}

.klswiper-pag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5rem
}

.klswiper-pag .swiper-pagination-bullet {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid #707070;
    opacity: 1;
    margin: 0 .8rem !important;
    background-color: transparent;
    transition: .3s;
    -webkit-transition: .3s
}

.klswiper-pag .swiper-pagination-bullet-active {
    border-color: #104CC7;
    background-color: #104CC7
}

.klswiper-pag.swiper-pagination-lock {
    display: none
}

@media screen and (max-width: 1180px) {
    .klswiper-pag {
        padding-top:4rem
    }

    .klswiper-pag .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        margin: 0 .6rem !important
    }
}

@media screen and (max-width: 640px) {
    .klswiper-pag {
        padding-top:3rem
    }

    .klswiper-pag .swiper-pagination-bullet {
        width: .8rem;
        height: .8rem;
        margin: 0 .4rem !important
    }
}

.kaola-now-more1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 2.7rem
}

.kaola-now-more1::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: rgba(16,76,199,0.9);
    border-radius: 2.7rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.kaola-now-more1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.7rem;
    border: 1px solid #ffffff;
    box-sizing: border-box
}

.kaola-now-more1 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.kaola-now-more1 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.kaola-now-more1 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.kaola-now-more1 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .kaola-now-more1:hover {
        color:#ffffff
    }

    .kaola-now-more1:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .kaola-now-more1:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .kaola-now-more1:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .kaola-now-more1:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.kaola-now-box {
    text-align: center;
    background-color: #104CC7;
    color: #ffffff
}

.kaola-now-box .t {
    line-height: 1.4;
    margin-bottom: 1rem
}

.kaola-now-box .bot {
    display: flex;
    justify-content: center
}

.canvas-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.case-page {
    display: flex;
    justify-content: space-between
}

@media screen and (max-width: 640px) {
    .case-page {
        display:block
    }
}

.case-sider {
    width: 13.88%
}

@media screen and (max-width: 1180px) {
    .case-sider {
        width:15%
    }
}

@media screen and (max-width: 640px) {
    .case-sider {
        display:none
    }
}

.case-rbox {
    width: 83%
}

@media screen and (max-width: 1180px) {
    .case-rbox {
        width:75%
    }
}

@media screen and (max-width: 640px) {
    .case-rbox {
        width:100%
    }
}

.case-sider-nav {
    position: sticky;
    top: 12rem;
    border-left: 1px solid #D8D8D8
}

.case-sider-nav>li {
    padding-bottom: 3rem
}

.case-sider-nav>li:last-child {
    padding-bottom: 0
}

.case-sider-nav a {
    position: relative;
    padding-left: 3rem;
    color: #222222
}

.case-sider-nav a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    width: 4px;
    background-color: #104CC7;
    transition: .3s;
    -webkit-transition: .3s
}

.case-sider-nav a._current {
    color: #104CC7
}

.case-sider-nav a._current::before {
    height: 100%
}

@media screen and (max-width: 1650px) {
    .case-sider-nav>li {
        padding-bottom:2.5rem
    }

    .case-sider-nav a {
        padding-left: 2.5rem
    }
}

@media screen and (max-width: 1440px) {
    .case-sider-nav>li {
        padding-bottom:2rem
    }

    .case-sider-nav a {
        padding-left: 2rem
    }
}

@media screen and (max-width: 1360px) {
    .case-sider-nav>li {
        padding-bottom:1.6rem
    }

    .case-sider-nav a {
        padding-left: 1.6rem
    }
}

@media screen and (max-width: 1180px) {
    .case-sider-nav>li {
        padding-bottom:1.2rem
    }

    .case-sider-nav a {
        padding-left: 1.2rem
    }
}

.case-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2%
}

.case-list>li {
    width: 48%;
    margin-left: 2%;
    margin-top: 3rem
}

@media screen and (max-width: 750px) {
    .case-list>li {
        width:100%
    }
}

.case-item {
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    background-color: #ffffff;
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: .6s;
    -webkit-transition: .6s
}

.case-item .imgBox {
    padding-bottom: 54%
}

.case-item .desc {
    padding: 4rem 8% 4.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.case-item .type {
    line-height: 1.5;
    margin-bottom: .5rem
}

.case-item .title {
    line-height: 1.2;
    /*margin-bottom: 3rem;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: .3s;
    -webkit-transition: .3s
}

.case-item .c {
    color: #666666;
    margin-bottom: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.case-item .more {
    display: inline-flex;
    position: relative;
    color: #222222
}

@media screen and (max-width: 1440px) {
    .case-item .desc {
        padding:3.5rem 6% 4rem
    }

    .case-item .type {
        margin-bottom: .4rem
    }

    .case-item .title {
        margin-bottom: 2.5rem
    }

    .case-item .c {
        color: #666666;
        margin-bottom: 3.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }
}

@media screen and (max-width: 1180px) {
    .case-item .desc {
        padding:3rem 5% 3.5rem
    }

    .case-item .type {
        margin-bottom: .2rem
    }

    .case-item .title {
        margin-bottom: 2rem
    }

    .case-item .c {
        color: #666666;
        margin-bottom: 3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }
}

@media (hover: hover) and (pointer:fine) {
    .case-item:hover {
        box-shadow:0 .4rem 1.4rem rgba(0,0,0,0.16)
    }

    .case-item:hover .title {
        color: #104CC7
    }

    .case-item:hover .more {
        color: #104CC7
    }

    .case-item:hover .more .iconfont {
        animation: 1s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.caseBanner-desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 5.2rem 0
}

.caseBanner-desc .imgBox {
    width: 40%;
    margin-left: 5%;
    border-radius: 1.2rem 1.2rem 0 0
}

.caseBanner-desc .imgBox img {
    border-radius: 1.2rem 1.2rem 0 0
}

.caseBanner-desc .desc {
    flex: 1
}

@media screen and (max-width: 1180px) {
    .caseBanner-desc {
        padding:6rem 0
    }
}

@media screen and (max-width: 860px) {
    .caseBanner-desc {
        display:block
    }

    .caseBanner-desc .imgBox {
        width: 100%;
        margin-left: 0;
        margin-bottom: 2.5rem
    }
}

.case-info-page {
    display: flex;
    justify-content: space-between
}

@media screen and (max-width: 640px) {
    .case-info-page {
        display:block
    }
}

.case-info-sider {
    width: 20%;
    padding-bottom: 10.5rem
}

@media screen and (max-width: 1180px) {
    .case-info-sider {
        padding-bottom:8.5rem
    }
}

@media screen and (max-width: 860px) {
    .case-info-sider {
        width:25%;
        padding-bottom: 7.5rem
    }
}

@media screen and (max-width: 640px) {
    .case-info-sider {
        display:none
    }
}

.case-info-rbox {
    width: 72.5%
}

@media screen and (max-width: 860px) {
    .case-info-rbox {
        width:68%
    }
}

@media screen and (max-width: 640px) {
    .case-info-rbox {
        width:100%
    }
}

.case-info-nav {
    position: sticky;
    top: 15rem;
    border-left: 1px solid #D8D8D8
}

.case-info-nav>li {
    padding-bottom: 3rem
}

.case-info-nav>li:last-child {
    padding-bottom: 0
}

.case-info-nav a {
    position: relative;
    padding-left: 3rem;
    color: #222222
}

.case-info-nav a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    width: 4px;
    background-color: #104CC7;
    transition: .3s;
    -webkit-transition: .3s
}

.case-info-nav a._current {
    color: #104CC7
}

.case-info-nav a._current::before {
    height: 100%
}

@media screen and (max-width: 1650px) {
    .case-info-nav>li {
        padding-bottom:2.5rem
    }

    .case-info-nav a {
        padding-left: 2.5rem
    }
}

@media screen and (max-width: 1440px) {
    .case-info-nav>li {
        padding-bottom:2rem
    }

    .case-info-nav a {
        padding-left: 2rem
    }
}

@media screen and (max-width: 1360px) {
    .case-info-nav>li {
        padding-bottom:1.6rem
    }

    .case-info-nav a {
        padding-left: 1.6rem
    }
}

@media screen and (max-width: 1180px) {
    .case-info-nav>li {
        padding-bottom:1.2rem
    }

    .case-info-nav a {
        padding-left: 1.2rem
    }
}

.case-info-item {
    padding: 7.5rem 0;
    border-top: 1px solid #D6D6D6
}

.case-info-item:nth-child(1) {
    border-top: 0 none;
    padding-top: 12rem
}

@media screen and (max-width: 1180px) {
    .case-info-item {
        padding:5.5rem 0
    }

    .case-info-item:nth-child(1) {
        padding-top: 9rem
    }
}

@media screen and (max-width: 640px) {
    .case-info-item {
        padding:4.5rem 0
    }

    .case-info-item:nth-child(1) {
        padding-top: 6rem
    }
}

.case-info-t {
    margin-bottom: 2.5rem;
    line-height: 1.4
}

@media screen and (max-width: 640px) {
    .case-info-t {
        margin-bottom:2rem
    }
}

@media screen and (max-width: 640px) {
    .case-info-t {
        margin-bottom:1.5rem
    }
}

.case-advantage-list {
    display: flex;
    justify-content: space-between;
    margin-left: -2% !important
}

.case-advantage-list>li {
    border-left: 1px solid #E3E3E3;
    margin-left: 2%;
    padding-left: 2%;
    flex: 1
}

.case-advantage-list>li:first-child {
    border-left: 0 none;
    padding-left: 0
}

@media screen and (max-width: 1180px) {
    .case-advantage-list {
        display:block;
        margin-left: 0 !important
    }

    .case-advantage-list>li {
        padding-left: 0;
        margin-left: 0;
        border-left: 0 none;
        border-bottom: 1px solid #E3E3E3;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }

    .case-advantage-list>li:last-child {
        border-bottom: 0 none
    }
}

.case-application-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2.33%
}

.case-application-list>li {
    position: relative;
    width: 31%;
    margin-left: 2.33%;
    margin-bottom: 3rem;
    border-radius: 6px;
    overflow: hidden
}

.case-application-list .imgBox {
    border-radius: 6px
}

.case-application-list .imgBox::after {
    content: "";
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000000);
    background: linear-gradient(rgba(0,0,0,0), #000000)
}

.case-application-list .imgBox img {
    border-radius: 6px
}

.case-application-list .txt {
    text-align: center;
    position: absolute;
    line-height: 1.5;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 2rem 5%;
    color: #ffffff
}

@media screen and (max-width: 1180px) {
    .case-application-list .txt {
        padding:1rem 5%
    }
}

@media screen and (max-width: 860px) {
    .case-application-list {
        margin-left:-3%
    }

    .case-application-list>li {
        width: 47%;
        margin-left: 3%;
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 640px) {
    .case-application-list .txt {
        font-size:1.4rem
    }

    .case-application-list>li {
        margin-bottom: 1.5rem
    }
}

.case-next-step {
    display: flex;
    justify-content: right
}

.case-next-step .desc {
    width: 72.5%
}

.case-next-step .t {
    line-height: 1.2;
    margin-bottom: 2rem
}

@media screen and (max-width: 1180px) {
    .case-next-step .t {
        margin-bottom:1.5rem
    }
}

@media screen and (max-width: 860px) {
    .case-next-step {
        display:block
    }

    .case-next-step .desc {
        width: 100%
    }
}

@media screen and (max-width: 640px) {
    .case-next-step .t {
        margin-bottom:1rem
    }
}

.kl-bot {
    display: flex;
    flex-wrap: wrap
}

.kl-bot [kl-more] {
    margin-right: 1.8rem;
    margin-bottom: 1rem
}

.kl-bot [kl-more]:last-child {
    margin-right: 0
}

@media screen and (max-width: 860px) {
    .kl-bot [kl-more] {
        margin-right:1.5rem
    }
}

@media screen and (max-width: 640px) {
    .kl-bot [kl-more] {
        margin-right:1rem
    }
}

.case-more1 {
    padding: 1.5rem 3.2rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.2rem
}

.case-more1::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.case-more1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.case-more1 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.case-more1 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.case-more1 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.case-more1 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .case-more1:hover {
        color:#ffffff
    }

    .case-more1:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .case-more1:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .case-more1:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .case-more1:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 1180px) {
    .case-more1 {
        padding:1.3rem 2.8rem;
        border-radius: 2.2rem
    }

    .case-more1::before,.case-more1::after {
        border-radius: 2.2rem
    }

    .case-more1 .btn-ico {
        margin-left: 1.5rem
    }
}

@media screen and (max-width: 750px) {
    .case-more1 {
        padding:1rem 2.2rem;
        border-radius: 2rem
    }

    .case-more1::before,.case-more1::after {
        border-radius: 2rem
    }

    .case-more1 .btn-ico {
        margin-left: .8rem
    }
}

@media screen and (max-width: 640px) {
    .case-more1 {
        font-size:1.4rem
    }
}

.pbanner-moreB {
    padding: 1.5rem 3.2rem
}

.pbanner-moreB .btn-ico {
    margin-left: 1.4rem
}

@media screen and (max-width: 1180px) {
    .pbanner-moreB {
        padding:1.2rem 2.8rem;
        border-radius: 2.2rem
    }

    .pbanner-moreB::before,.pbanner-moreB::after {
        border-radius: 2.2rem
    }

    .pbanner-moreB .btn-ico {
        margin-left: 1.2rem
    }
}

@media screen and (max-width: 640px) {
    .pbanner-moreB {
        font-size:1.4rem;
        padding: 1.1rem 2rem;
        border-radius: 2rem
    }

    .pbanner-moreB::before,.pbanner-moreB::after {
        border-radius: 2rem
    }

    .pbanner-moreB .btn-ico {
        margin-left: .8rem
    }
}

.pbanner-more2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.2rem
}

.pbanner-more2::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.pbanner-more2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.pbanner-more2 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.pbanner-more2 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.pbanner-more2 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.pbanner-more2 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .pbanner-more2:hover {
        color:#ffffff
    }

    .pbanner-more2:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .pbanner-more2:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .pbanner-more2:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .pbanner-more2:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.page-nav-box {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: .5s cubic-bezier(.4, 0, .2, 1);
    -webkit-transition: .5s cubic-bezier(.4, 0, .2, 1)
}

@media screen and (max-width: 860px) {
    .page-nav-box {
        display:none
    }
}

.model-nav-inner {
    border-radius: 6px;
    box-shadow: 0 .3rem 1.2rem rgba(0,0,0,0.16);
    background-color: #ffffff;
    margin-top: -3.5rem
}

@media screen and (max-width: 1440px) {
    .model-nav-inner {
        margin-top:-3.2rem
    }
}

@media screen and (max-width: 1180px) {
    .model-nav-inner {
        margin-top:-3rem
    }
}

@media screen and (max-width: 860px) {
    .model-nav-inner {
        margin-top:-2.5rem
    }
}

.model-nav {
    display: flex;
    justify-content: space-around
}

.model-nav>li {
    display: flex;
    justify-content: center
}

.model-nav a {
    height: 7rem;
    line-height: 7rem;
    position: relative;
    font-size: 1.8rem;
    display: inline-flex;
    color: #222222
}

.model-nav a::before {
    content: "";
    width: 0;
    height: 4px;
    background: #104CC7;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: .5s;
    -webkit-transition: .5s
}

.model-nav a._current {
    color: #104CC7
}

.model-nav a._current:before {
    width: 100%;
    right: auto;
    left: 0
}

@media (hover: hover) and (pointer:fine) {
    .model-nav a:hover {
        color:#104CC7
    }

    .model-nav a:hover:before {
        width: 100%;
        right: auto;
        left: 0
    }
}

@media screen and (max-width: 1440px) {
    .model-nav a {
        height:6.4rem;
        line-height: 6.4rem;
        font-size: 1.7rem
    }
}

@media screen and (max-width: 1180px) {
    .model-nav a {
        height:6rem;
        line-height: 6rem;
        font-size: 1.6rem
    }
}

@media screen and (max-width: 860px) {
    .model-nav a {
        height:5rem;
        line-height: 5rem;
        font-size: 1.5rem
    }
}

.kaola-plist2 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3.33%;
    margin-top: -3rem
}

.kaola-plist2>li {
    width: 30%;
    margin-left: 3.33%;
    margin-top: 3rem;
    display: flex
}

@media screen and (max-width: 768px) {
    .kaola-plist2 {
        margin-top:-2rem
    }

    .kaola-plist2>li {
        width: 100%;
        margin-top: 2rem
    }
}

@media screen and (max-width: 640px) {
    .kaola-plist2 {
        margin-top:-1.5rem
    }

    .kaola-plist2>li {
        margin-top: 1.5rem
    }
}

.kaola-pitem2 {
    width: 100%;
    padding: 3rem 4rem 6rem;
    background-color: #ffffff;
    box-shadow: 0 0 .6rem rgba(0,0,0,0.16);
    border-radius: .6rem;
    border: 1px solid transparent;
    text-align: center;
    transition: .6s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .6s cubic-bezier(.785, .135, .15, .86);
    transition: .6s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .6s cubic-bezier(.55, .31, .15, .93)
}

.kaola-pitem2 .ico {
    width: 7.8rem;
    height: 7.8rem;
    margin: 0 auto 2rem;
    line-height: 1;
    display: flex;
    justify-content: baseline;
    align-items: baseline
}

.kaola-pitem2 .ico img {
    max-width: 100%;
    max-height: 100%
}

.kaola-pitem2 .title {
    line-height: 1.4
}

.kaola-pitem2 .c {
    color: #707070
}

@media screen and (max-width: 1440px) {
    .kaola-pitem2 {
        padding:2.5rem 3.5rem 5rem
    }
}

@media screen and (max-width: 1180px) {
    .kaola-pitem2 {
        padding:2.5rem 3rem 4.5rem
    }

    .kaola-pitem2 .ico {
        width: 6.4rem;
        height: 6.4rem;
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 768px) {
    .kaola-pitem2 {
        padding:2rem;
        display: flex;
        text-align: left
    }

    .kaola-pitem2 .ico {
        flex-shrink: 0;
        margin: 0 2rem 0 0;
        width: 6rem;
        height: 6rem
    }

    .kaola-pitem2 .title {
        margin-bottom: .5rem
    }
}

@media screen and (max-width: 640px) {
    .kaola-pitem2 {
        padding:1.5rem
    }

    .kaola-pitem2 .ico {
        margin: 0 1.5rem 0 0;
        width: 5rem;
        height: 5rem
    }

    .kaola-pitem2 .c {
        line-height: 1.5;
        font-size: 1.4rem
    }
}

@media (hover: hover) and (pointer:fine) {
    .kaola-pitem2:hover {
        box-shadow:0 0 2.6rem rgba(112,112,112,0.16);
        border-color: #104CC7;
        border-radius: 1.2rem
    }
}

.model-three-pageC .imgBox {
    position: relative;
    width: 37.2222%;
    margin: 0 auto 5rem
}

.model-three-pageC .c-round {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    background-color: rgba(16,76,199,0.1);
    box-shadow: inset 1px 1px 1px 0 rgba(16,76,199,0.05);
    border: solid 2px #93D2FA
}

.model-three-pageC .c-round::before {
    content: "";
    display: block;
    padding-top: 100%
}

.model-three-pageC .c-round:nth-child(1) {
    animation: round1 6s infinite
}

.model-three-pageC .c-round:nth-child(2) {
    animation: round1 6s 1s infinite
}

.model-three-pageC .c-round:nth-child(3) {
    animation: round1 6s 2s infinite
}

.model-three-pageC .c-round:nth-child(4) {
    animation: round1 6s 3s infinite
}

.model-three-pageC .img1 {
    width: 53.7313%;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.model-three-pageC .img1 img {
    -webkit-animation: fudong1 3s ease-in-out infinite;
    animation: fudong1 3s ease-in-out infinite
}

.model-three-pageC .img2 {
    width: 64.5522%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.model-three-pageC .img2 img {
    animation: rotate 10s linear infinite
}

.model-three-pageC .img3 {
    width: 94.4029%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.model-three-pageC .img3 img {
    animation: rotate 12s linear infinite
}

@media screen and (max-width: 860px) {
    .model-three-pageC .imgBox {
        width:50%;
        margin: 0 auto
    }

    .model-three-pageC .c-round {
        width: 180%
    }
}

@keyframes round1 {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes fudong1 {
    0% {
        transform: rotate(0deg) translate(0, 0)
    }

    50% {
        transform: rotate(4deg) translate(-5px, 8px)
    }

    100% {
        transform: rotate(0deg) translate(0, 0)
    }
}

.model-three-item {
    position: absolute;
    display: flex;
    cursor: pointer
}

.model-three-item .t {
    color: #104CC7;
    line-height: 1.4;
    margin-bottom: .5rem
}

.model-three-item .ico {
    position: relative;
    width: 7.4rem;
    height: 7.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: -webkit-linear-gradient(-110deg, #D8E5FF, #104CC7);
    background: linear-gradient(-110deg, #D8E5FF, #104CC7);
    transition: .3s;
    -webkit-transition: .3s
}

.model-three-item .ico::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(16,76,199,0.3);
    transform: scale(1.4);
    opacity: 0;
    transition: .6s;
    -webkit-transition: .6s
}

.model-three-item .ico img {
    max-width: 42%;
    max-height: 42%;
    display: block;
    transition: .6s;
    -webkit-transition: .6s
}

.model-three-item .desc {
    padding-top: .5rem
}

.model-three-item .c {
    line-height: 1.5;
    color: #666666
}

@media (hover: hover) and (pointer:fine) {
    .model-three-item:hover .ico::before {
        opacity:1;
        transform: scale(1)
    }

    .model-three-item:hover .ico img {
        transform: rotateY(180deg)
    }

    .model-three-item:hover .txt {
        color: #222222
    }
}

@media screen and (max-width: 1440px) {
    .model-three-item .ico {
        width:7rem;
        height: 7rem
    }
}

@media screen and (max-width: 1180px) {
    .model-three-item .ico {
        width:6.4rem;
        height: 6.4rem
    }

    .model-three-item .c {
        font-size: 1.4rem;
        line-height: 1.4
    }
}

@media screen and (max-width: 860px) {
    .model-three-item {
        position:relative;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        box-shadow: 0 0 2rem rgba(16,76,199,0.1);
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 1rem;
        z-index: 2;
        margin-top: 1.5rem
    }

    .model-three-item .ico {
        width: 5.4rem;
        height: 5.4rem
    }
}

.model-three-itemR {
    flex-direction: row-reverse;
    text-align: right
}

.model-three-itemR .ico {
    margin-left: 2rem
}

@media screen and (max-width: 860px) {
    .model-three-itemR {
        flex-direction:row;
        text-align: left
    }

    .model-three-itemR .ico {
        margin-right: 1.5rem;
        margin-left: 0
    }
}

.model-three-itemC {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.model-three-itemC .ico {
    margin-bottom: 1rem
}

@media screen and (max-width: 860px) {
    .model-three-itemC {
        flex-direction:row;
        justify-content: initial;
        align-items: initial;
        text-align: left
    }

    .model-three-itemC .ico {
        margin-right: 1.5rem;
        margin-bottom: 0
    }
}

.model-three-itemL .ico {
    margin-right: 2rem
}

@media screen and (max-width: 860px) {
    .model-three-itemL .ico {
        margin-right:1.5rem
    }
}

.model-three-item1 {
    top: 22%;
    right: 57%
}

.model-three-item2 {
    top: 51%;
    right: 65.5%
}

.model-three-item3 {
    top: 79%;
    right: 61.5%
}

.model-three-item4 {
    top: 94%;
    left: 0%;
    width: 100%
}

.model-three-item5 {
    top: 22%;
    left: 57%
}

.model-three-item6 {
    top: 51%;
    left: 65.5%
}

.model-three-item7 {
    top: 79%;
    left: 61.5%
}

.ptab-swiper {
    position: relative;
    margin: 0 23.5%;
    width: 70%;
}

.ptab-swiper .swiper-slide {
    perspective: 18vw
}

.ptab-swiper .ptab-slide {
    position: relative;
    display: block
}

.ptab-swiper .imgBox {
    opacity: .8;
    transition: .3s;
    -webkit-transition: .3s
}

.ptab-swiper .desc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000000);
    background: linear-gradient(rgba(0,0,0,0), #000000);
    padding: 5rem 5% 3.5rem;
    opacity: 0;
    transition: .3s;
    -webkit-transition: .3s
}

.ptab-swiper .t {
    line-height: 1.2;
    margin-bottom: 1.5rem
}

.ptab-swiper .title {
    line-height: 1.2
}

.ptab-swiper .c {
    line-height: 1.5;
    font-weight: lighter
}

.ptab-swiper .swiper-slide-active .imgBox {
    opacity: 1
}

.ptab-swiper .swiper-slide-active .desc {
    opacity: 1
}

/*.ptab-swiper .swiper-prev {*/
/*    left: -8%*/
/*}*/

/*.ptab-swiper .swiper-next {*/
/*    right: -8%*/
/*}*/

@media screen and (max-width: 1650px) {
    .ptab-swiper .swiper-prev {
        left:-5%
    }

    .ptab-swiper .swiper-next {
        right: -5%
    }
}

@media screen and (max-width: 1440px) {
    .ptab-swiper {
        margin:0 18%
    }

    .ptab-swiper .desc {
        padding: 3.5rem 5% 2.5rem
    }

    .ptab-swiper .swiper-prev {
        left: -3%
    }

    .ptab-swiper .swiper-next {
        right: -3%
    }
}

@media screen and (max-width: 1180px) {
    .ptab-swiper {
        margin:0 10%
    }

    .ptab-swiper .swiper-slide {
        perspective: 20vw
    }

    .ptab-swiper .desc {
        padding: 2.5rem 5% 2rem
    }

    .ptab-swiper .swiper-prev {
        left: -3%
    }

    .ptab-swiper .swiper-next {
        right: -3%
    }
}

@media screen and (max-width: 768px) {
    .ptab-swiper {
        margin:0 5%
    }

    .ptab-swiper .desc {
        position: relative;
        padding: 2rem 5%;
        background: #ffffff;
        box-shadow: 0 0 2rem rgba(16,76,199,0.16);
        color: #222222;
        border-radius: 0 0 1rem 1rem
    }

    .ptab-swiper .t {
        margin-bottom: 1rem
    }

    .ptab-swiper .c {
        line-height: 1.5
    }

    .ptab-swiper .swiper-arrow {
        display: none
    }
}

.model-five-page {
    background: -webkit-gradient(linear, left top, left bottom, from(#DEEEFF), to(#F2F8FF));
    background: -webkit-linear-gradient(#DEEEFF, #F2F8FF);
    background: linear-gradient(#DEEEFF, #F2F8FF)
}

.model-five-page .tbox {
    text-align: center
}

.model-five-page .bot {
    display: flex;
    justify-content: center
}

.moedel-more1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #104CC7;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.2rem
}

.moedel-more1::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.moedel-more1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #104CC7;
    box-sizing: border-box
}

.moedel-more1 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.moedel-more1 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.moedel-more1 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.moedel-more1 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .moedel-more1:hover {
        color:#ffffff
    }

    .moedel-more1:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .moedel-more1:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .moedel-more1:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .moedel-more1:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.moedel-more2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.2rem
}

.moedel-more2::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.moedel-more2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #ffffff;
    box-sizing: border-box
}

.moedel-more2 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.moedel-more2 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.moedel-more2 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.moedel-more2 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .moedel-more2:hover {
        color:#104CC7
    }

    .moedel-more2:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .moedel-more2:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .moedel-more2:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .moedel-more2:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.model-list {
    position: relative;
    display: flex;
    margin-left: -3%;
    margin-top: -3rem;
    flex-wrap: wrap
}

.model-list>li {
    width: 47%;
    margin-top: 3rem;
    margin-left: 3%;
    position: relative;
    border-radius: 2.2rem
}

.model-list .imgBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.2rem;
    overflow: hidden
}

.model-list .imgBox img {
    border-radius: 2.2rem
}

.model-list .desc {
    color: #ffffff;
    text-align: center;
    padding: 8rem 8% 6rem;
    position: relative
}

.model-list .t {
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 3rem
}

@media screen and (max-width: 1180px) {
    .model-list {
        margin-top:-2.5rem;
        margin-left: -2%
    }

    .model-list>li {
        width: 48%;
        margin-top: 2.5rem;
        margin-left: 2%;
        border-radius: 2rem
    }

    .model-list .imgBox {
        border-radius: 2rem
    }

    .model-list .imgBox img {
        border-radius: 2rem
    }

    .model-list .desc {
        padding: 7rem 6% 5.5rem
    }
}

@media screen and (max-width: 860px) {
    .model-list {
        margin-top:-2rem
    }

    .model-list>li {
        margin-top: 2rem;
        border-radius: 1.6rem
    }

    .model-list .imgBox {
        border-radius: 1.6rem
    }

    .model-list .imgBox img {
        border-radius: 1.6rem
    }

    .model-list .t {
        margin-bottom: 2.5rem
    }

    .model-list .desc {
        padding: 5rem 6%
    }
}

@media screen and (max-width: 640px) {
    .model-list {
        margin-top:-1.5rem
    }

    .model-list>li {
        width: 100%;
        margin-top: 1.5rem;
        border-radius: 1.2rem
    }

    .model-list .desc {
        padding: 4rem 5% 5rem
    }

    .model-list .imgBox {
        border-radius: 1.2rem
    }

    .model-list .imgBox img {
        border-radius: 1.2rem
    }
}

.osm-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3.33%;
    margin-top: -3rem
}

.osm-list>li {
    width: 30%;
    margin-left: 3.33%;
    margin-top: 3rem
}

@media screen and (max-width: 860px) {
    .osm-list {
        margin-top:-2rem;
        margin-left: 0
    }

    .osm-list>li {
        margin-top: 2rem;
        margin-left: 0;
        width: 100%
    }
}

.osm-item {
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid #E6E6E6;
    box-shadow: 0 0 6px rgba(0,0,0,0.16);
    height: 100%;
    transition: .5s;
    -webkit-transition: .5s
}

.osm-item .tbox {
    padding: 4.5rem 4% 3.5rem;
    text-align: center
}

.osm-item .ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7rem;
    height: 7rem;
    margin: 0 auto .8rem
}

.osm-item .ico img {
    max-width: 100%;
    max-height: 100%
}

.osm-item .title {
    line-height: 1.4
}

.osm-item .desc {
    margin: 0 4%;
    border-top: 1px solid #E6E6E6;
    padding: 5rem 0
}

.osm-item .desc>li {
    text-align: center;
    margin-bottom: 3.5rem
}

.osm-item .desc>li:last-child {
    margin-bottom: 0
}

.osm-item .desc h4 {
    line-height: 1.45;
    color: #222222;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 500
}

@media (hover: hover) and (pointer:fine) {
    .osm-item:hover {
        transform:translateY(-10px);
        box-shadow: 0 0 2.6rem rgba(112,112,112,0.16);
        border-color: #104CC7;
        border-radius: 1.2rem
    }
}

@media screen and (max-width: 1180px) {
    .osm-item .tbox {
        padding:2.5rem 5%
    }

    .osm-item .ico {
        width: 6rem;
        height: 6rem
    }

    .osm-item .desc {
        padding: 3.5rem 0
    }

    .osm-item .desc>li {
        margin-bottom: 2.5rem
    }

    .osm-item .desc h4 {
        font-size: 1.9rem;
        margin-bottom: .8rem
    }
}

@media screen and (max-width: 640px) {
    .osm-item .tbox {
        padding:2rem 5%
    }

    .osm-item .ico {
        width: 4.5rem;
        height: 4.5rem
    }

    .osm-item .desc {
        padding: 3rem 0
    }

    .osm-item .desc>li {
        margin-bottom: 2rem
    }

    .osm-item .desc h4 {
        font-size: 1.8rem;
        margin-bottom: .5rem
    }
}

.osm-function-ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2%
}

.osm-function-ul>li {
    width: 48%;
    margin-left: 2%;
    margin-bottom: 4rem
}

@media screen and (max-width: 1370px) {
    .osm-function-ul>li {
        margin-bottom:3rem
    }
}

@media screen and (max-width: 1180px) {
    .osm-function-ul>li {
        margin-bottom:2.5rem
    }
}

@media screen and (max-width: 768px) {
    .osm-function-ul>li {
        width:100%;
        margin-bottom: 1.5rem
    }
}

.osm-fun-item {
    box-shadow: 0 0 6px rgba(16,76,199,0.16);
    border-radius: 6px;
    background-color: #ffffff;
    padding: 4rem 2.8rem;
    border: 1px solid transparent;
    display: flex;
    height: 100%;
    transition: .4s;
    -webkit-transition: .4s
}

.osm-fun-item .num {
    position: relative;
    width: 8.7rem;
    height: 8.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 2.8rem;
    z-index: 1;
    color: #ffffff;
    font-style: normal;
    background: url(../img/osm-bx1.svg) no-repeat scroll center center;
    background-size: 100% auto
}

.osm-fun-item .num img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.osm-fun-item .t {
    line-height: 1.5;
    margin-bottom: 1rem
}

.osm-fun-item .c {
    color: #222222
}

@media (hover: hover) and (pointer:fine) {
    .osm-fun-item:hover {
        box-shadow:0 0 2.6rem rgba(112,112,112,0.16);
        border-color: #104CC7;
        border-radius: 1.2rem
    }
}

@media screen and (max-width: 1370px) {
    .osm-fun-item {
        padding:3.5rem 2.5rem
    }

    .osm-fun-item .num {
        width: 7rem;
        height: 7rem;
        margin-right: 2.2rem
    }
}

@media screen and (max-width: 1180px) {
    .osm-fun-item {
        padding:3rem 2rem
    }

    .osm-fun-item .num {
        width: 6rem;
        height: 6rem;
        margin-right: 1.8rem
    }

    .osm-fun-item .t {
        margin-bottom: .8rem
    }

    .osm-fun-item .c {
        font-size: 1.4rem
    }
}

@media screen and (max-width: 768px) {
    .osm-fun-item {
        padding:2.5rem 2rem
    }

    .osm-fun-item .num {
        width: 5rem;
        height: 5rem;
        margin-right: 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .osm-fun-item {
        padding:2.5rem 2rem;
        display: block
    }

    .osm-fun-item .num {
        margin-bottom: 1.5rem
    }
}

.osm-function-swiper {
    position: relative;
    overflow: hidden
}

.osm-function-swiper .swiper-slide {
    padding: 0 1px
}

.osm-function-swiper.active {
    animation: lightSpeedIn .8s forwards
}

@keyframes lightSpeedIn {
    0% {
        transform: translateX(5%) skewX(-4deg);
        opacity: 0
    }

    100% {
        transform: translateX(0) skewX(0deg);
        opacity: 1
    }
}

.ptab-navbox {
    display: flex;
    justify-content: center
}

.ptab-nav {
    display: flex;
    width: 93%;
    justify-content: space-between;
    border-radius: 4.1rem;
    background-color: rgba(16,76,199,0.11);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.ptab-nav a {
    flex: 1;
    height: 7.2rem;
    line-height: 7.2rem;
    color: #104CC7;
    padding: 0 2rem;
    text-align: center;
    border-radius: 4.1rem
}

.ptab-nav a.active {
    background-color: #104CC7;
    color: #ffffff
}

@media screen and (max-width: 1440px) {
    .ptab-nav {
        border-radius:3rem
    }

    .ptab-nav a {
        height: 6rem;
        line-height: 6rem;
        border-radius: 3rem
    }
}

@media screen and (max-width: 1180px) {
    .ptab-nav {
        border-radius:2.5rem
    }

    .ptab-nav a {
        height: 5rem;
        line-height: 5rem;
        border-radius: 2.5rem
    }
}

@media screen and (max-width: 860px) {
    .ptab-nav {
        width:100%
    }

    .ptab-nav a {
        height: auto;
        line-height: 1.2;
        padding: 1.5rem 1rem
    }
}

@media screen and (max-width: 640px) {
    .ptab-nav a {
        font-size:1.4rem
    }
}

@media screen and (max-width: 860px) {
    .application-nav {
        flex-wrap:wrap;
        background-color: transparent;
        justify-content: center
    }

    .application-nav a {
        background-color: #eee;
        flex: initial;
        padding: 1rem 2.8rem;
        border-radius: 2rem;
        margin-bottom: .8rem;
        margin-right: .8rem
    }
}

.probanner {
    position: relative;
    color: #ffffff;
    z-index: 3
}

.probanner .imgBox video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.probanner .imgBox::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4)
}

.pbanner-more3 {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    background-color: transparent;
    border-radius: 3.2rem
}

.pbanner-more3::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #ffffff;
    border-radius: 3.2rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.pbanner-more3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.2rem;
    border: 1px solid #ffffff;
    box-sizing: border-box
}

.pbanner-more3 .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.pbanner-more3 .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.pbanner-more3 .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.pbanner-more3 .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .pbanner-more3:hover {
        color:#104CC7
    }

    .pbanner-more3:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .pbanner-more3:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .pbanner-more3:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .pbanner-more3:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.pro-video-btn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    cursor: pointer
}

.pro-video-btn .icon {
    width: 4.9rem;
    height: 4.9rem;
    border-radius: 50%;
    background-color: #104CC7;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative
}

.pro-video-btn .icon::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0%;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.1);
    transform: scale(0);
    opacity: 0;
    transition: .3s;
    -webkit-transition: .3s
}

.pro-video-btn .txt {
    transition: .3s;
    -webkit-transition: .3s
}

@media (hover: hover) and (pointer:fine) {
    .pro-video-btn:hover .icon::before {
        transform:scale(1.2);
        opacity: 1
    }
}

.pro-advantage-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -2rem;
    margin-left: -1%
}

.pro-advantage-list>li {
    margin-top: 2rem;
    margin-left: 1%;
    width: 24%
}

@media screen and (max-width: 1180px) {
    .pro-advantage-list {
        margin-left:-2%
    }

    .pro-advantage-list>li {
        width: 48%;
        margin-left: 2%
    }
}

@media screen and (max-width: 640px) {
    .pro-advantage-list {
        margin-top:-1.5rem
    }

    .pro-advantage-list>li {
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 520px) {
    .pro-advantage-list>li {
        width:100%
    }
}

.pro-advantage-item {
    height: 100%;
    text-align: center;
    padding: 6rem 3rem
}

.pro-advantage-item .ico {
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto 2rem
}

.pro-advantage-item .title {
    color: #104CC7;
    line-height: 1.4
}

.pro-advantage-item .line {
    width: 3rem;
    height: 4px;
    background-color: #104CC7;
    display: block;
    margin: 2.5rem auto 0
}

.pro-advantage-item .tbox {
    margin-bottom: 4.5rem
}

@media screen and (max-width: 1440px) {
    .pro-advantage-item {
        padding:5rem 2.8rem
    }

    .pro-advantage-item .tbox {
        margin-bottom: 4rem
    }
}

@media screen and (max-width: 1180px) {
    .pro-advantage-item {
        padding:4.5rem 2.5rem
    }

    .pro-advantage-item .line {
        width: 2.6rem;
        height: 3px;
        margin: 2rem auto 0
    }

    .pro-advantage-item .tbox {
        margin-bottom: 3rem
    }
}

@media screen and (max-width: 860px) {
    .pro-advantage-item {
        padding:4rem 2rem
    }

    .pro-advantage-item .ico {
        width: 5.4rem;
        height: 5.4rem;
        margin: 0 auto 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .pro-advantage-item {
        padding:3rem 1.5rem
    }

    .pro-advantage-item .line {
        width: 2.4rem;
        height: 2px;
        margin: 1.5rem auto 0
    }

    .pro-advantage-item .ico {
        width: 4rem;
        height: 4rem;
        margin: 0 auto 1rem
    }

    .pro-advantage-item .tbox {
        margin-bottom: 2rem
    }
}

.pro-function-ul {
    display: flex
}

@media screen and (max-width: 1180px) {
    .pro-function-ul {
        flex-wrap:wrap;
        margin-left: -2%
    }
}

.pro-function-item {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    height: 60rem;
    margin-left: 1%;
    flex: 1;
    cursor: pointer;
    -webkit-transition: .5s ease-out;
    transition: .5s ease-out
}

.pro-function-item:first-child {
    margin-left: 0
}

.pro-function-item .imgBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: .5s ease-out;
    transition: .5s ease-out
}

.pro-function-item .imgBox::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80%;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(16,76,199,0)), to(#104CC7));
    background: -webkit-linear-gradient(rgba(16,76,199,0), #104CC7);
    background: linear-gradient(rgba(16,76,199,0), #104CC7)
}

.pro-function-item .imgBox img {
    display: none
}

.pro-function-item .con-box1 {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2rem 5% 3rem;
    width: 100%;
    text-align: center;
    transition: .3s;
    -webkit-transition: .3s
}

.pro-function-item .con-box1 .t {
    font-weight: normal;
    line-height: 1.4
}

.pro-function-item .con-box2 {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2rem 5% 3rem;
    width: 100%;
    opacity: 0;
    transform: translateY(15%);
    font-weight: lighter;
    transition: .3s;
    -webkit-transition: .3s
}

.pro-function-item .con-box2 .t {
    margin-bottom: 2.5rem;
    line-height: 1.4
}

.pro-function-item.wf-w {
    flex: 3.4;
    flex-shrink: 0
}

@media (hover: hover) and (pointer:fine) {
    .pro-function-item:hover .con-box1 {
        opacity:0;
        transform: translateY(10%)
    }

    .pro-function-item:hover .con-box2 {
        transform: translateY(0);
        opacity: 1;
        transition-delay: .5s
    }
}

@media screen and (max-width: 1180px) {
    .pro-function-item {
        width:48%;
        height: auto;
        border-radius: 1rem;
        background-color: #ffffff;
        box-shadow: 0 0 2rem rgba(0,0,0,0.16);
        margin-left: 2%;
        margin-bottom: 3%;
        flex: initial
    }

    .pro-function-item:first-child {
        margin-left: 2%
    }

    .pro-function-item .imgBox {
        position: relative;
        left: auto;
        top: auto;
        height: auto
    }

    .pro-function-item .imgBox::before {
        height: 30%
    }

    .pro-function-item .imgBox img {
        display: block;
        border-radius: 1rem 1rem 0 0
    }

    .pro-function-item .con-box1 {
        display: none
    }

    .pro-function-item .con-box2 {
        position: relative;
        opacity: 1;
        transform: initial;
        color: #222222;
        padding: 3.5rem 5%;
        font-weight: normal
    }

    .pro-function-item .con-box2 .t {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .pro-function-item .con-box2 {
        padding:2.5rem 1.5rem
    }

    .pro-function-item .con-box2 .t {
        margin-bottom: 1rem
    }

    .pro-function-item .con-box2 .c {
        font-size: 1.4rem
    }
}

@media screen and (max-width: 480px) {
    .pro-function-item {
        width:100%;
        margin-bottom: 1.5rem
    }
}

.swiper-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #3D3D3D;
    line-height: 1;
    z-index: 100
}

.swiper-arrow:hover {
    color: #104CC7
}

.swiper-arrow.swiper-button-disabled {
    opacity: .5;
    cursor: no-drop
}

.swiper-prev {
    left: 0%
}

.swiper-next {
    right: 0%
}

.kaola-tab table {
    width: 100% !important;
    background-color: #E2EFFF
}

.kaola-tab table tr {
    border-radius: 6px;
    font-weight: lighter
}

.kaola-tab table tr:nth-child(odd) {
    background-color: #E4EBF9
}

.kaola-tab table td {
    border: 1px solid #ffffff;
    padding: 1rem 3rem
}

@media screen and (max-width: 640px) {
    .kaola-tab table tr {
        display:block
    }

    .kaola-tab table td {
        display: block;
        padding: .8rem 1.5rem
    }
}

.kaola-w80 {
    width: 76%;
    margin: 0 auto
}

@media screen and (max-width: 1180px) {
    .kaola-w80 {
        width:100%
    }
}

.pro-one-imgbox {
    width: 67.0833%;
    position: relative;
    margin: 10rem auto 0
}

.pro-one-imgbox .item2 {
    width: 87.267%;
    left: 9%;
    bottom: 12%
}

.pro-one-imgbox .item2 img {
    -webkit-animation: updownInfi_S 3s ease-in-out infinite alternate;
    animation: updownInfi_S 3s ease-in-out infinite alternate
}

@media screen and (max-width: 860px) {
    .pro-one-imgbox {
        width:100%;
        position: static;
        padding-bottom: 4.5rem;
        margin-top: 4rem
    }

    .pro-one-imgbox .imgBox {
        position: relative;
        width: 60%;
        margin: 0 auto
    }
}

@media screen and (max-width: 640px) {
    .pro-one-imgbox .imgBox {
        width:90%;
        margin-top: -4rem
    }
}

.pro-one-desc {
    position: absolute;
    cursor: pointer
}

.pro-one-desc .title {
    width: 11.6rem;
    height: 11.6rem;
    border-radius: 50%;
    border: 5px solid #CEEDFE;
    background-color: #104CC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    line-height: 1.4;
    text-align: center;
    font-weight: normal;
    box-shadow: 0 1.2rem 2.4rem rgba(16,76,199,0.2)
}

.pro-one-desc .name {
    width: 5.9rem;
    height: 5.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 1.5rem;
    text-align: center;
    color: #104CC7;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 1.2rem rgba(0,0,0,0.16);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: .4s ease-out;
    transition: .4s ease-out
}

.pro-one-desc .namew1 {
    width: 7.5rem;
    height: 7.5rem;
    font-size: 1.4rem
}

.pro-one-desc .desc .name:nth-child(1) {
    transition-delay: .2s;
    -webkit-transition-delay: .2s
}

.pro-one-desc .desc .name:nth-child(2) {
    transition-delay: .3s;
    -webkit-transition-delay: .3s
}

.pro-one-desc .desc .name:nth-child(3) {
    transition-delay: .4s;
    -webkit-transition-delay: .4s
}

.pro-one-desc .desc .name:nth-child(4) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.pro-one-desc .desc .name:nth-child(5) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.pro-one-desc .desc .name:nth-child(6) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s
}

.pro-one-desc .desc .name:nth-child(7) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.pro-one-desc .desc .name:nth-child(8) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.pro-one-desc .desc .name:nth-child(9) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.pro-one-desc .desc .name:nth-child(10) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.pro-one-desc .desc .name:nth-child(11) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.pro-one-desc .desc .name:nth-child(12) {
    transition-delay: 1.3s;
    -webkit-transition-delay: 1.3s
}

.pro-one-desc .desc .name:nth-child(13) {
    transition-delay: 1.4s;
    -webkit-transition-delay: 1.4s
}

.pro-one-desc .desc .name:nth-child(14) {
    transition-delay: 1.5s;
    -webkit-transition-delay: 1.5s
}

.pro-one-desc .desc .name:nth-child(15) {
    transition-delay: 1.6s;
    -webkit-transition-delay: 1.6s
}

.pro-one-desc .desc .name:nth-child(16) {
    transition-delay: 1.7s;
    -webkit-transition-delay: 1.7s
}

.pro-one-desc .desc .name:nth-child(17) {
    transition-delay: 1.8s;
    -webkit-transition-delay: 1.8s
}

.pro-one-desc .desc .name:nth-child(18) {
    transition-delay: 1.9s;
    -webkit-transition-delay: 1.9s
}

@media (hover: hover) and (pointer:fine) {
    .pro-one-desc:hover .name {
        opacity:1;
        transform: scale(1);
        visibility: visible;
        pointer-events: all
    }
}

@media screen and (max-width: 860px) {
    .pro-one-desc {
        position:relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: initial !important;
        display: flex;
        border-radius: 1rem;
        box-shadow: 0 0 1.2rem rgba(16,76,199,0.1);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        align-items: center
    }

    .pro-one-desc .title {
        flex-shrink: 0;
        width: 10rem;
        height: 10rem;
        margin-right: 1rem
    }

    .pro-one-desc .name {
        opacity: 1;
        transform: scale(1);
        visibility: visible;
        pointer-events: all;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin-left: 1rem;
        border-radius: .8rem;
        padding: .5rem 1.5rem;
        margin-top: .5rem;
        box-shadow: 0 0 .4rem rgba(0,0,0,0.1)
    }

    .pro-one-desc .desc {
        display: flex;
        flex-wrap: wrap
    }
}

@media screen and (max-width: 640px) {
    .pro-one-desc {
        padding:1.5rem 0 0;
        box-shadow: 0 0 0 transparent;
        border-radius: 0;
        border-top: 1px solid rgba(16,76,199,0.1)
    }
}

.pro-one-desc1 {
    left: 0%;
    top: 36%
}

.pro-one-desc1 .name1 {
    right: 98%;
    bottom: 112%
}

.pro-one-desc1 .name2 {
    right: 152%;
    top: 26%
}

.pro-one-desc1 .name3 {
    right: 100%;
    top: 110%
}

.pro-one-desc1 .name4 {
    left: 56%;
    top: 122%
}

.pro-one-desc1 .name5 {
    left: 133%;
    top: 34%
}

.pro-one-desc1 .name6 {
    left: 95%;
    bottom: 106%
}

.pro-one-desc2 {
    left: 50%;
    transform: translateX(-50%);
    top: 0%
}

.pro-one-desc2 .name1 {
    right: 138%;
    bottom: 85%
}

.pro-one-desc2 .name2 {
    right: 220%;
    top: 36%
}

.pro-one-desc2 .name3 {
    right: 113%;
    top: 72%
}

.pro-one-desc2 .name4 {
    left: 158%;
    top: 96%
}

.pro-one-desc2 .name5 {
    left: 213%;
    top: 26%
}

.pro-one-desc2 .name6 {
    left: 132%;
    bottom: 92%
}

.pro-one-desc3 {
    right: 0;
    top: 36%
}

.pro-one-desc3 .name1 {
    right: 95%;
    top: 72%
}

.pro-one-desc3 .name2 {
    left: 105%;
    top: -22%
}

.pro-one-desc4 {
    left: 15%;
    top: 59%
}

.pro-one-desc4 .name1 {
    left: 10%;
    bottom: 106%
}

.pro-one-desc4 .name2 {
    right: 95%;
    top: 72%
}

.pro-one-desc4 .name3 {
    left: 105%;
    top: 25%
}

.pro-one-desc5 {
    left: 50%;
    transform: translateX(-50%);
    bottom: 15%
}

.pro-one-desc5 .name1 {
    left: 10%;
    bottom: 106%
}

.pro-one-desc5 .name2 {
    right: 95%;
    top: 72%
}

.pro-one-desc5 .name3 {
    left: 105%;
    top: 25%
}

.pro-one-desc6 {
    right: 15%;
    top: 59%
}

.pro-one-desc6 .name1 {
    left: 10%;
    bottom: 106%
}

.pro-one-desc6 .name2 {
    right: 95%;
    top: 72%
}

.pro-one-desc6 .name3 {
    left: 105%;
    top: 25%
}

.pro2-one-item {
    padding: 4.5rem 2.6rem;
    height: 100%;
    text-align: center
}

.pro2-one-item .ico {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 2rem
}

.pro2-one-item .title {
    line-height: 1.2
}

.pro2-one-item .tbox {
    margin-bottom: 2.5rem
}

@media screen and (max-width: 1180px) {
    .pro2-one-item {
        padding:4rem 2rem
    }

    .pro2-one-item .ico {
        width: 4rem;
        height: 4rem;
        margin: 0 auto 1.5rem
    }

    .pro2-one-item .tbox {
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 640px) {
    .pro2-one-item {
        padding:3rem 1.5rem
    }

    .pro2-one-item .ico {
        width: 3.4rem;
        height: 3.4rem;
        margin: 0 auto 1rem
    }

    .pro2-one-item .tbox {
        margin-bottom: 1.5rem
    }
}

.pro2-one-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -3%;
    margin-left: -3%
}

.pro2-one-list>li {
    margin-top: 3%;
    margin-left: 3%;
    width: 22%
}

@media screen and (max-width: 1180px) {
    .pro2-one-list {
        margin-top:-2rem;
        margin-left: -2%
    }

    .pro2-one-list>li {
        width: 48%;
        margin-top: 2rem;
        margin-left: 2%
    }
}

@media screen and (max-width: 640px) {
    .pro2-one-list {
        margin-top:-1.5rem
    }

    .pro2-one-list>li {
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 520px) {
    .pro2-one-list>li {
        width:100%
    }
}

.pro2-one-bot {
    display: flex;
    justify-content: center
}

.ing-pro-btn {
    display: inline-flex;
    padding: 1.5rem 5rem;
    line-height: 1.4;
    border-radius: 3.2rem;
    border: 1px solid #A8A8A8;
    color: #A8A8A8
}

@media screen and (max-width: 1180px) {
    .ing-pro-btn {
        padding:1.3rem 3.8rem;
        border-radius: 2.8rem
    }
}

@media screen and (max-width: 640px) {
    .ing-pro-btn {
        padding:1.2rem 3rem;
        border-radius: 2.6rem
    }
}

.kaola-swiper-demo2 {
    position: relative
}

.kaola-swiper-demo2 .swiper-prev {
    left: -5%
}

.kaola-swiper-demo2 .swiper-next {
    right: -5%
}

@media screen and (max-width: 640px) {
    .kaola-swiper-demo2 .swiper-arrow {
        display:none
    }

    .kaola-swiper-demo2 .swiper-prev {
        left: 0
    }

    .kaola-swiper-demo2 .swiper-next {
        right: 0
    }
}

.successcase-swiper {
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 3rem
}

.successcase-swiper .swiper-slide {
    height: auto
}

@media screen and (max-width: 640px) {
    .successcase-swiper {
        overflow:initial
    }
}

.currency-solution-list {
    display: flex;
    margin-left: -2%
}

.currency-solution-list>li {
    position: relative;
    margin-left: 2%;
    display: flex;
    width: 48%;
    height: 44.2rem;
    -webkit-transition: .5s ease-out;
    transition: .5s ease-out
}

.currency-solution-list>li.wf-w {
    width: 58.6%;
    flex-shrink: 0
}

.currency-solution-list>li.sx-w {
    width: 37.4%
}

.currency-solution-list .imgBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.currency-solution-list .imgBox::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(left, #000000, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, #000000, rgba(0,0,0,0) 100%)
}

.currency-solution-list .cbox {
    position: relative;
    padding: 5.5rem 7% 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff
}

.currency-solution-list .t {
    margin-bottom: 3rem
}

.currency-solution-list .c {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.currency-solution-list a {
    color: #ffffff
}

.currency-solution-list .more {
    display: inline-flex;
    position: relative;
    color: #ffffff
}

@media (hover: hover) and (pointer:fine) {
    .currency-solution-list>li:hover .more .iconfont {
        animation:1s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

@media screen and (max-width: 1440px) {
    .currency-solution-list .cbox {
        top:4rem;
        bottom: 4rem
    }
}

@media screen and (max-width: 1180px) {
    .currency-solution-list>li {
        height:auto
    }

    .currency-solution-list .cbox {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        padding: 4.5rem 8%;
        width: 100%
    }

    .currency-solution-list .c {
        -webkit-line-clamp: initial
    }
}

@media screen and (max-width: 640px) {
    .currency-solution-list {
        flex-wrap:wrap
    }

    .currency-solution-list>li {
        width: 100%;
        margin-top: 1.5rem
    }

    .currency-solution-list>li:first-child {
        width: 100%;
        margin-bottom: 0
    }

    .currency-solution-list .cbox {
        padding: 3.5rem 5%
    }
}

.solution-two-page {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

@media screen and (max-width: 860px) {
    .solution-two-page {
        display:block
    }
}

.solution-two-lbox {
    width: 40.8rem;
    flex-shrink: 0;
    position: sticky;
    top: 12rem
}

@media screen and (max-width: 860px) {
    .solution-two-lbox {
        width:100%;
        position: static;
        top: auto
    }
}

.solution-two-rbox {
    width: 50%;
    margin-left: 5%
}

@media screen and (max-width: 860px) {
    .solution-two-rbox {
        margin-left:0;
        width: 100%;
        margin-top: 5rem
    }
}

.solution-two-nav {
    display: flex;
    flex-wrap: wrap;
    margin-top: -1.4rem;
    margin-left: -1%
}

.solution-two-nav>li {
    width: 32.33%;
    margin-top: 1.4rem;
    margin-left: 1%
}

.solution-two-nav a {
    display: flex !important;
    width: 100%;
    padding: 1.1rem 1.6rem;
    justify-content: space-between;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #707070;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1.9rem
}

.solution-two-nav a::before {
    content: "";
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background-color: #104CC7;
    border-radius: 1.9rem;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -moz-transition: transform .6s cubic-bezier(.785, .135, .15, .86);
    -o-transition: transform .6s cubic-bezier(.785, .135, .15, .86)
}

.solution-two-nav a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.9rem;
    border: 1px solid #707070;
    box-sizing: border-box
}

.solution-two-nav a .btn-tbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.2;
    overflow: hidden
}

.solution-two-nav a .btn-tbox .btn-txt {
    transition: .6s;
    -webkit-transition: .6s;
    display: block;
    transform: translateY(0)
}

.solution-two-nav a .btn-tbox .btn-txt:nth-child(2) {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0
}

.solution-two-nav a .btn-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.2rem;
    line-height: 1
}

@media (hover: hover) and (pointer:fine) {
    .solution-two-nav a:hover {
        color:#ffffff
    }

    .solution-two-nav a:hover::before {
        transform: scaleX(1);
        transform-origin: left
    }

    .solution-two-nav a:hover .btn-tbox .btn-txt:nth-child(1) {
        opacity: 0;
        transform: translateY(-100%)
    }

    .solution-two-nav a:hover .btn-tbox .btn-txt:nth-child(2) {
        opacity: 1;
        transform: translateY(-100%)
    }

    .solution-two-nav a:hover .btn-ico {
        animation: .6s cubic-bezier(.785, .135, .15, .86) arrowGoRight forwards
    }
}

.solution-two-nav a .btn-ico {
    margin-left: .1rem
}

.solution-two-nav a:hover::after {
    border-color: #104CC7
}

@media screen and (max-width: 1180px) {
    .solution-two-nav {
        margin-top:-1rem
    }

    .solution-two-nav>li {
        margin-top: 1rem
    }
}

.solution-two-rbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.solution-two-rbox>ul {
    width: 47.5%;
    margin-right: 5%
}

.solution-two-rbox>ul:nth-child(even) {
    margin-top: 6rem;
    margin-right: 0
}

@media screen and (max-width: 1440px) {
    .solution-two-rbox>ul:nth-child(even) {
        margin-top:5rem
    }
}

@media screen and (max-width: 1180px) {
    .solution-two-rbox>ul:nth-child(even) {
        margin-top:4rem
    }
}

@media screen and (max-width: 640px) {
    .solution-two-rbox>ul:nth-child(even) {
        margin-top:2.5rem
    }
}

.solution-hy-ul {
    display: flex;
    flex-wrap: wrap
}

.solution-hy-ul>li {
    margin-bottom: 5rem;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0,0,0,0.16)
}

.solution-hy-ul .imgBox {
    border-radius: 6px
}

.solution-hy-ul .imgBox img {
    border-radius: 6px
}

.solution-hy-ul .imgBox::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    background: -webkit-linear-gradient(16deg, #104CC7 0, rgba(16,76,199,0) 50%);
    background: -o-linear-gradient(16deg, #104CC7 0, rgba(16,76,199,0) 50%);
    background: -moz-linear-gradient(16deg, #104CC7 0, rgba(16,76,199,0) 50%);
    background: -ms-linear-gradient(16deg, #104CC7 0, rgba(16,76,199,0) 50%);
    background: linear-gradient(16deg, #104CC7 0, rgba(16,76,199,0) 50%)
}

.solution-hy-ul .desc {
    position: absolute;
    left: 8%;
    bottom: 8%;
    right: 8%;
    color: #ffffff
}

@media screen and (max-width: 1440px) {
    .solution-hy-ul>li {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 1180px) {
    .solution-hy-ul>li {
        margin-bottom:3.5rem
    }
}

@media screen and (max-width: 640px) {
    .solution-hy-ul>li {
        margin-bottom:2rem
    }
}

.solution-one-list1 {
    box-shadow: 0 0 6px rgba(0,0,0,0.16);
    background-color: #ffffff;
    border-radius: 6px;
    display: flex;
    justify-content: space-between
}

.solution-one-list1>li {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(112,112,112,0.16)
}

.solution-one-list1>li:first-child {
    border-left: 0 none
}

.solution-one-list1 .tbox {
    border-bottom: 1px solid rgba(112,112,112,0.16);
    padding: 4rem 8% 2rem
}

.solution-one-list1 .t {
    line-height: 1.4;
    font-weight: normal
}

.solution-one-list1 .cbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4rem 8%
}

.solution-one-list1 .desc p {
    position: relative;
    display: flex;
    margin-bottom: .5rem;
    line-height: 1.5
}

.solution-one-list1 .desc p::before {
    content: "•";
    flex-shrink: 0;
    margin-right: 1.5rem
}

.solution-one-list1 .bot {
    margin-top: 4rem
}

@media screen and (max-width: 1440px) {
    .solution-one-list1 .tbox {
        padding:3.5rem 8% 1.5rem
    }

    .solution-one-list1 .cbox {
        padding: 3.5rem 8%
    }
}

@media screen and (max-width: 1180px) {
    .solution-one-list1 .desc p::before {
        margin-right:1rem
    }
}

@media screen and (max-width: 768px) {
    .solution-one-list1 {
        display:block;
        box-shadow: initial
    }

    .solution-one-list1>li {
        border-left: 0 none;
        box-shadow: 0 0 6px rgba(112,112,112,0.16);
        border-radius: 6px;
        margin-bottom: 1.5rem
    }

    .solution-one-list1 .tbox {
        padding: 1.8rem 5%;
        background-color: #DEEEFF;
        border-bottom: 0 none;
        border-radius: 6px 6px 0 0
    }

    .solution-one-list1 .cbox {
        padding: 3rem 5% 4.5rem
    }

    .solution-one-list1 .bot {
        margin-top: 2.5rem
    }
}

.solution-one3-img {
    position: relative
}

.solution-one3-img .imgBox {
    position: relative;
    width: 50%;
    margin: 0 auto
}

.solution-one3-img .img1 img {
    animation: rotate 22s linear infinite
}

.solution-one3-img .img2 {
    width: 32.3611%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.solution-one3-img .img2 img {
    animation: p_ddd 2s ease-in-out 0s infinite forwards
}

@keyframes p_ddd {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

.solution1-three-item1 {
    top: 45%;
    right: 72%
}

.solution1-three-item2 {
    top: 14%;
    left: 68%
}

.solution1-three-item3 {
    bottom: 2%;
    left: 64%
}

.solution-Safe-item {
    text-align: center;
    padding: 4rem 1.8rem
}

.solution-Safe-item .tbox {
    margin-bottom: 3rem
}

.solution-Safe-item .ico {
    width: 5.4rem;
    height: 5.4rem;
    margin: 0 auto 2rem
}

.solution-Safe-item .title {
    color: #104CC7;
    line-height: 1.5
}

.solution-Safe-item .c {
    font-size: 1.5rem
}

@media screen and (max-width: 1440px) {
    .solution-Safe-item {
        padding:3.5rem 1.5rem
    }

    .solution-Safe-item .ico {
        width: 5rem;
        height: 5rem;
        margin: 0 auto 1.5rem
    }

    .solution-Safe-item .tbox {
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 1180px) {
    .solution-Safe-item {
        padding:3rem 1.5rem
    }

    .solution-Safe-item .ico {
        width: 4.4rem;
        height: 4.4rem;
        margin: 0 auto 1.5rem
    }

    .solution-Safe-item .tbox {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 860px) {
    .solution-Safe-item {
        padding:2.5rem 1.5rem
    }

    .solution-Safe-item .ico {
        width: 4rem;
        height: 4rem
    }
}

.solution-Safe-ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2%;
    margin-top: -2rem
}

.solution-Safe-ul>li {
    width: 18%;
    margin-left: 2%;
    margin-top: 2rem
}

@media screen and (max-width: 1180px) {
    .solution-Safe-ul>li {
        width:31.33%
    }
}

@media screen and (max-width: 768px) {
    .solution-Safe-ul>li {
        width:48%
    }
}

@media screen and (max-width: 480px) {
    .solution-Safe-ul>li {
        width:100%
    }
}

.two-solution2-list {
    display: flex;
    justify-content: space-between;
    text-align: center
}

.two-solution2-list>li {
    margin-top: 5rem
}

.two-solution2-list>li:nth-child(odd) {
    width: 33.7rem
}

.two-solution2-list .tbox {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(141,178,255,0.1)), to(rgba(16,76,199,0.1)));
    background: -webkit-linear-gradient(rgba(141,178,255,0.1), rgba(16,76,199,0.1));
    background: linear-gradient(rgba(141,178,255,0.1), rgba(16,76,199,0.1));
    border-radius: 1.2rem;
    height: 49.4rem;
    padding: 0 3.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: #ffffff
}

.two-solution2-list .title {
    border-radius: 50%;
    width: 9.9rem;
    height: 9.9rem;
    border: .5rem solid #CEEDFE;
    background-color: #104CC7;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.2
}

.two-solution2-list .c p {
    background-color: #ffffff;
    border-radius: 2.6rem;
    padding: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1px;
    color: #104CC7
}

.two-solution2-list .jt-box {
    height: 49.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.two-solution2-list .jt-box img {
    max-width: 7rem
}

.two-solution2-list .imgBox {
    display: flex;
    justify-content: center;
    align-items: center
}

.two-solution2-list .imgBox img {
    max-width: 100%
}

.two-solution2-list .line {
    height: 22px;
    width: 1px;
    background-color: #8DB2FF;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.two-solution2-list .line::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #8DB2FF;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
}

@media screen and (max-width: 1180px) {
    .two-solution2-list {
        justify-content:flex-start;
        margin-left: -2%
    }

    .two-solution2-list>li {
        width: 31.33%;
        margin-left: 2%
    }

    .two-solution2-list>li:nth-child(odd) {
        width: 31.33%
    }

    .two-solution2-list>li:nth-child(even) {
        display: none
    }

    .two-solution2-list .jt-box {
        padding: 0 2rem;
        flex-shrink: 0
    }
}

@media screen and (max-width: 860px) {
    .two-solution2-list .tbox {
        height:auto;
        padding: 1.5rem 10%
    }

    .two-solution2-list .title {
        width: 9rem;
        height: 9rem;
        position: relative;
        top: auto;
        margin-top: -5rem
    }

    .two-solution2-list .c {
        padding-top: 2rem
    }

    .two-solution2-list .c p {
        padding: .8rem
    }
}

@media screen and (max-width: 640px) {
    .two-solution2-list {
        flex-wrap:wrap
    }

    .two-solution2-list>li:nth-child(odd) {
        width: 100%
    }
}

.thee-solution-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3.33%
}

.thee-solution-list>li {
    width: 30%;
    margin-left: 3.33%;
    margin-bottom: 3.33%
}

@media screen and (max-width: 860px) {
    .thee-solution-list {
        margin-left:-3%
    }

    .thee-solution-list>li {
        width: 47%;
        margin-left: 3%;
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 640px) {
    .thee-solution-list {
        margin-left:-2%
    }

    .thee-solution-list>li {
        width: 48%;
        margin-bottom: 1.5rem;
        margin-left: 2%
    }
}

@media screen and (max-width: 480px) {
    .thee-solution-list>li {
        width:100%
    }
}

.thee-solution-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px
}

.thee-solution-item .imgBox {
    border-radius: 6px
}

.thee-solution-item .imgBox::after {
    content: "";
    height: 50%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000000));
    background: -webkit-linear-gradient(rgba(0,0,0,0), #000000);
    background: linear-gradient(rgba(0,0,0,0), #000000)
}

.thee-solution-item .imgBox img {
    border-radius: 6px
}

.thee-solution-item .txt {
    text-align: center;
    position: absolute;
    line-height: 1.5;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 2rem 5%;
    color: #ffffff
}

@media screen and (max-width: 1180px) {
    .thee-solution-item .txt {
        padding:1rem 5%
    }
}

@media screen and (max-width: 640px) {
    .thee-solution-item {
        margin-left:-2%
    }

    .thee-solution-item .txt {
        font-size: 1.4rem
    }
}

.solution-three-swiper {
    position: relative;
    overflow: hidden;
    padding: 1rem
}

.solution-three-swiper .swiper-slide {
    position: relative;
    height: auto;
    cursor: pointer
}

.solution-three-swiper .swiper-slide:hover .solution3-pro-c {
    transform: scale(1);
    opacity: 1
}

@media screen and (max-width: 1180px) {
    .solution-three-swiper {
        overflow:initial;
        position: 0
    }
}

@media screen and (max-width: 640px) {
    .solution-three-swiper .solution3-pro-c {
        position:relative;
        transform: scale(1);
        opacity: 1;
        height: auto
    }

    .solution-three-swiper .swiper-slide {
        box-shadow: 0 0 2.6rem rgba(112,112,112,0.16);
        border-radius: 6px;
        background-color: rgba(16,76,199,0.86)
    }
}

.solution-three-demo .swiper-prev {
    left: -5%
}

.solution-three-demo .swiper-next {
    right: -5%
}

@media screen and (max-width: 1180px) {
    .solution-three-demo .swiper-arrow {
        display:none
    }

    .solution-three-demo .swiper-prev {
        left: 0
    }

    .solution-three-demo .swiper-next {
        right: 0
    }
}

.solution3-pro {
    box-shadow: 0 0 6px rgba(0,0,0,0.16);
    border-radius: 6px;
    background-color: #ffffff;
    border: 1px solid transparent;
    padding: 2.8rem 2.4rem;
    height: 100%;
    transition: .4s;
    -webkit-transition: .4s
}

.solution3-pro .imgBox {
    padding-top: 86%
}

.solution3-pro .imgBox img {
    border-radius: 6px
}

.solution3-pro .t {
    text-align: center;
    padding: 2.5rem 0;
    line-height: 1.4
}

@media (hover: hover) and (pointer:fine) {
    .solution3-pro:hover {
        box-shadow:0 0 2.6rem rgba(112,112,112,0.16);
        border-color: #104CC7;
        border-radius: 1.2rem
    }
}

@media screen and (max-width: 1180px) {
    .solution3-pro {
        padding:2.5rem 2rem
    }

    .solution3-pro .t {
        padding: 2rem 0
    }
}

@media screen and (max-width: 640px) {
    .solution3-pro {
        height:auto;
        box-shadow: 0 0 0 transparent
    }

    .solution3-pro:hover {
        box-shadow: 0 0 0 transparent
    }

    .solution3-pro .t {
        display: none
    }
}

.solution3-pro-c {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(16,76,199,0.86);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 8%;
    color: #ffffff;
    border-radius: 6px;
    flex-direction: column;
    transform: scale(.9);
    opacity: 0;
    transition: .5s;
    -webkit-transition: .5s
}

.solution3-pro-c .t {
    line-height: 1.4;
    text-align: center;
    margin-bottom: 3rem
}

.solution3-pro-c .c {
    text-align: justify
}

.solution3-pro-c .bot {
    margin-top: 4rem
}

@media screen and (max-width: 1180px) {
    .solution3-pro-c {
        padding:2.5rem 5%
    }

    .solution3-pro-c .t {
        margin-bottom: 2.5rem
    }

    .solution3-pro-c .c {
        font-size: 1.4rem
    }

    .solution3-pro-c .bot {
        margin-top: 3rem
    }
}

@media screen and (max-width: 640px) {
    .solution3-pro-c {
        border-radius:0;
        background-color: transparent
    }

    .solution3-pro-c .t {
        margin-bottom: 1.5rem;
        text-align: left
    }
}

.vvico-btn {
    display: inline-flex;
    border-radius: 3rem;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 3.4rem;
    background-color: #104CC7;
    color: #ffffff;
    line-height: 1.2
}

.vvico-btn .icon {
    margin-right: 1rem
}

@media (hover: hover) and (pointer:fine) {
    .vvico-btn:hover {
        color:#104CC7;
        background-color: #ffffff
    }
}

@media screen and (max-width: 1440px) {
    .vvico-btn {
        padding:1.3rem 3rem
    }
}

@media screen and (max-width: 1180px) {
    .vvico-btn {
        padding:1.2rem 2.6rem
    }

    .vvico-btn .icon {
        margin-right: .8rem
    }
}

.about-page-bpx .img1 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44%
}

.about-page {
    position: relative;
    padding-top: 14rem;
    padding-bottom: 14rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

@media screen and (max-width: 1440px) {
    .about-page {
        padding-top:12rem;
        padding-bottom: 12rem
    }
}

@media screen and (max-width: 1180px) {
    .about-page {
        padding-top:10rem;
        padding-bottom: 10rem
    }
}

@media screen and (max-width: 860px) {
    .about-page {
        padding-top:8rem;
        padding-bottom: 8rem
    }
}

@media screen and (max-width: 640px) {
    .about-page {
        padding-top:6rem;
        padding-bottom: 6rem
    }
}

.aboutpage-l {
    width: 45%
}

@media screen and (max-width: 750px) {
    .aboutpage-l {
        width:100%
    }
}

.aboutpage-r {
    width: 50.34%;
    flex-shrink: 0;
    overflow: hidden
}

@media screen and (max-width: 750px) {
    .aboutpage-r {
        width:100%
    }
}

.about-tbox {
    margin-bottom: 4.5rem
}

.about-tbox .by {
    margin-bottom: 1rem
}

.about-tbox .title {
    line-height: 1.25
}

@media screen and (max-width: 1440px) {
    .about-tbox {
        margin-bottom:4rem
    }
}

@media screen and (max-width: 1180px) {
    .about-tbox {
        margin-bottom:3.5rem
    }

    .about-tbox .by {
        margin-bottom: .8rem
    }
}

@media screen and (max-width: 640px) {
    .about-tbox {
        margin-bottom:3rem
    }

    .about-tbox .by {
        margin-bottom: .5rem
    }
}

.about-pageC {
    line-height: 1.8
}

.about-num {
    display: flex;
    border-top: 1px solid #707070;
    justify-content: space-between;
    color: #333333
}

.about-num .t {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 1rem
}

.about-num .t span {
    color: #104CC7
}

@media screen and (max-width: 1180px) {
    .about-num {
        flex-wrap:wrap;
        margin-left: -5%
    }

    .about-num>li {
        width: 45%;
        margin-left: 5%;
        margin-bottom: 2rem
    }

    .about-num .t {
        margin-bottom: .5rem
    }
}

.team-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -2%
}

.team-list>li {
    position: relative;
    margin-left: 2%;
    width: 48%;
    padding-top: 5%;
    margin-bottom: 4rem
}

.team-list .imgBox {
    width: 57.5%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block
}

.team-list .desc {
    padding: 3.5rem 2rem 4.5rem;
    border-radius: 1.2rem;
    background-color: #ffffff;
    padding-left: 57.5%;
    height: 100%
}

.team-list .tbox {
    line-height: 1.4;
    margin-bottom: 3rem
}

.team-list .cbox {
    font-weight: lighter;
    color: #333333
}

.team-list .cbox p {
    position: relative;
    display: flex;
    margin-bottom: .5rem;
    line-height: 1.5
}

.team-list .cbox p::before {
    content: "·";
    flex-shrink: 0;
    margin-right: .2rem
}

@media screen and (max-width: 1180px) {
    .team-list {
        margin-left:-4%
    }

    .team-list>li {
        padding-top: 0;
        margin-left: 4%;
        width: 46%;
        display: flex;
        flex-direction: column
    }

    .team-list .imgBox {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 50%;
        margin-left: 2.5rem
    }

    .team-list .tbox {
        margin-bottom: 2rem
    }

    .team-list .desc {
        padding: 2.5rem;
        height: auto;
        flex: 1
    }

    .team-list .cbox {
        font-weight: normal
    }
}

@media screen and (max-width: 640px) {
    .team-list .imgBox {
        width:80%;
        margin: 0 auto
    }

    .team-list .desc {
        padding: 1.5rem;
        border-radius: .8rem
    }

    .team-list .tbox {
        margin-bottom: 1.5rem
    }
}

.team-info-list {
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.6);
    border-radius: 1.2rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 5rem 5%
}

.team-info-list>li {
    width: 25%;
    margin-left: 5%;
    margin-bottom: 4rem
}

.team-info-list>li:nth-child(1) {
    width: 40%;
    margin-left: 0
}

.team-info-list .ico {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.team-info-list .ico img {
    max-width: 100%;
    max-height: 100%
}

.team-info-list .t {
    line-height: 1.4;
    margin-bottom: 2.5rem
}

.team-info-list .desc {
    line-height: 2
}

.team-info-list .desc img {
    max-width: 100%
}

@media screen and (max-width: 860px) {
    .team-info-list {
        padding:4rem 5%;
        display: block
    }

    .team-info-list>li {
        width: auto;
        margin-left: 0;
        border-bottom: 1px solid #8DB2FF;
        padding-bottom: 3rem;
        margin-bottom: 3rem
    }

    .team-info-list>li:nth-child(1) {
        width: auto
    }

    .team-info-list>li:last-child {
        border-bottom: 0 none;
        padding-bottom: 0;
        margin-bottom: 0
    }

    .team-info-list .ico {
        margin-bottom: 1.5rem
    }

    .team-info-list .t {
        margin-bottom: 2rem
    }
}

.honor-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -3%
}

.honor-list>li {
    margin-left: 3%;
    margin-top: 3rem;
    width: 22%
}

@media screen and (max-width: 1440px) {
    .honor-list {
        margin-left:-2%
    }

    .honor-list>li {
        margin-left: 2%;
        margin-top: 2rem;
        width: 23%
    }
}

@media screen and (max-width: 1180px) {
    .honor-list {
        margin-left:-1%
    }

    .honor-list>li {
        margin-left: 1%;
        width: 24%
    }
}

@media screen and (max-width: 750px) {
    .honor-list {
        margin-left:-2%
    }

    .honor-list>li {
        margin-left: 2%;
        width: 48%;
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .honor-list>li {
        margin-top:1rem
    }
}

.honor-item {
    display: block;
    height: 100%;
    padding: 4rem;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    text-align: center;
    transition: .4s;
    -webkit-transition: .4s
}

.honor-item .imgBox {
    width: 50%;
    position: relative;
    overflow: hidden;
    padding-top: 45%;
    margin: 0 auto 2rem
}

.honor-item .imgBox img {
    position: absolute;
    left: 0;
    top: 0
}

@media (hover: hover) and (pointer:fine) {
    .honor-item:hover {
        transform:translateY(-10px);
        box-shadow: 0 0 2rem rgba(16,76,199,0.16);
        color: #104CC7
    }
}

@media screen and (max-width: 1440px) {
    .honor-item {
        padding:3rem
    }
}

@media screen and (max-width: 1180px) {
    .honor-item {
        padding:2.5rem
    }

    .honor-item .imgBox {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 750px) {
    .honor-item {
        padding:2rem
    }
}

@media screen and (max-width: 640px) {
    .honor-item {
        padding:1.5rem
    }

    .honor-item .imgBox {
        margin-bottom: 1rem
    }
}

.honor-swiper {
    position: relative;
    overflow: hidden;
    padding-bottom: 8px
}

@media screen and (max-width: 1180px) {
    .honor-swiper {
        overflow:initial
    }
}

.kl-arow {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: block;
    text-align: center;
    position: relative;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    -webkit-transition: .3s
}

.kl-arow::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #104CC7;
    border-radius: 50%;
    transition: .5s cubic-bezier(.215, .61, .355, 1);
    -webkit-transition: .5s cubic-bezier(.215, .61, .355, 1)
}

.kl-arow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #104CC7;
    transform: scale(.6);
    opacity: 0;
    border-radius: 50%;
    transition: .5s cubic-bezier(.215, .61, .355, 1);
    -webkit-transition: .5s cubic-bezier(.215, .61, .355, 1)
}

.kl-arow .ico {
    position: relative;
    color: #104CC7;
    transition: .3s;
    -webkit-transition: .3s
}

.kl-arow:hover .ico {
    color: #ffffff
}

.kl-arow:hover::before {
    transform: scale(1);
    opacity: 1
}

.kl-arow:hover::after {
    transform: scale(1.1);
    opacity: 0
}

@media screen and (max-width: 1180px) {
    .kl-arow {
        width:4.6rem;
        height: 4.6rem
    }
}

.kl-prev {
    margin-right: 1.3rem
}

.company-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.company-l {
    width: 45%;
    position: sticky;
    top: 15rem
}

@media screen and (max-width: 750px) {
    .company-l {
        width:100%;
        position: static;
        top: auto
    }
}

.company-r {
    width: 50.34%;
    flex-shrink: 0
}

@media screen and (max-width: 750px) {
    .company-r {
        width:100%
    }
}

.company-item {
    position: sticky;
    top: 15rem;
    border-radius: 2rem;
    background-color: #ffffff;
    margin-bottom: 2.3rem;
    overflow: hidden;
    transition: .3s;
    -webkit-transition: .3s
}

.company-item .en {
    line-height: .8;
    margin-left: 8%;
    top: -1rem;
    color: #EDF0F3;
    transition: .3s;
    -webkit-transition: .3s
}

.company-item .desc {
    padding: 4rem 8%
}

.company-item .by {
    color: #104CC7;
    margin-bottom: 2.5rem;
    transition: .3s;
    -webkit-transition: .3s
}

.company-item .line {
    width: 4rem;
    height: 3px;
    margin-bottom: 2.5rem;
    background-color: #104CC7;
    transition: .3s;
    -webkit-transition: .3s
}

.company-item .num {
    position: absolute;
    right: 4%;
    bottom: 0;
    line-height: .8;
    color: #DEDEDE
}

.company-item.on {
    background-color: #104CC7;
    color: #ffffff
}

.company-item.on .en {
    color: rgba(237,240,243,0.41)
}

.company-item.on .by {
    color: #ffffff
}

.company-item.on .line {
    background-color: #ffffff
}

@media (hover: hover) and (pointer:fine) {
    .company-item:hover {
        background-color:#104CC7;
        color: #ffffff
    }

    .company-item:hover .en {
        color: rgba(237,240,243,0.41)
    }

    .company-item:hover .by {
        color: #ffffff
    }

    .company-item:hover .line {
        background-color: #ffffff
    }
}

@media screen and (max-width: 1440px) {
    .company-item .desc {
        padding:3.5rem 8%
    }

    .company-item .by {
        margin-bottom: 2rem
    }

    .company-item .line {
        margin-bottom: 2rem
    }
}

@media screen and (max-width: 1180px) {
    .company-item .desc {
        padding:3rem 5%
    }

    .company-item .en {
        margin-left: 5%
    }

    .company-item .by {
        margin-bottom: 1.5rem
    }

    .company-item .line {
        margin-bottom: 1.5rem
    }
}

@media screen and (max-width: 640px) {
    .company-item .by {
        margin-bottom:1rem
    }

    .company-item .line {
        margin-bottom: 1rem
    }
}

.history-page-box .abg2 {
    position: absolute;
    right: 0;
    top: 4%;
    width: 26.3%;
    pointer-events: none
}

.history-page-box .abg3 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28.4375%;
    pointer-events: none
}

.history-page-box canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none
}

.history-box {
    position: relative;
    z-index: 2
}

.history-box .process {
    position: absolute;
    left: 25%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(112,112,112,0.2)
}

.history-box .process .bar {
    position: absolute;
    width: 100%;
    height: 0%;
    left: 0;
    top: 0;
    background-color: #104CC7
}

.history-box .process .y1,.history-box .process .y2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1.8rem;
    height: 1.8rem;
    border: .2rem solid #104CC7;
    border-radius: 50%
}

.history-box .process .y1 {
    top: -3rem
}

.history-box .process .y2 {
    bottom: -3rem
}

@media screen and (max-width: 860px) {
    .history-box {
        margin-left:1rem
    }

    .history-box .process {
        left: 0
    }
}

.history-item {
    display: flex;
    justify-content: space-between;
    padding: 4.4rem 0;
    align-items: flex-start
}

.history-item .year {
    line-height: 1;
    color: #104CC7
}

.history-item .desc {
    width: 75%;
    flex-shrink: 0
}

.history-item .link-img {
    display: none
}

.history-item .item {
    padding-left: 11%;
    margin-top: 4rem;
    position: relative;
    color: #333333;
    transition: .3s;
    -webkit-transition: .3s
}

.history-item .item::before {
    content: "";
    position: absolute;
    top: .8rem;
    width: 5px;
    height: 5px;
    display: block;
    left: -2px;
    border-radius: 50%;
    background-color: #104CC7
}

@media screen and (max-width: 1180px) {
    .history-item {
        padding:3rem 0
    }

    .history-item .item {
        margin-top: 2rem;
        padding-left: 10%;
        cursor: pointer
    }
}

@media screen and (max-width: 860px) {
    .history-item {
        padding:2.5rem 0;
        display: block
    }

    .history-item .year {
        line-height: 1.4;
        margin-left: 8%
    }

    .history-item .desc {
        width: 100%
    }

    .history-item .item {
        margin-top: 1.2rem;
        padding-left: 8%
    }
}

@media (hover: hover) and (pointer:fine) {
    .history-item .item:hover {
        color:#104CC7
    }
}

.join-banner {
    display: block;
    position: relative;
    overflow: hidden;
    height: 100vh
}

.join-banner .swiper-slide {
    height: auto
}

.join-banner .imgBox {
    position: relative;
    overflow: hidden;
    height: 100%
}

.join-banner .imgBox img {
    filter: blur(5px);
    opacity: 0;
    transform-origin: right;
    transform: scale(1.02) scaleX(1.1) translate3d(0, 0, 0);
    transition: transform 1s,opacity .7s
}

.join-banner .swiper-pag {
    position: absolute;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: center;
    bottom: 8%;
    z-index: 500
}

.join-banner .swiper-pag .swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: .5;
    margin: 0 .8rem;
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;
    transition: .4s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .4s cubic-bezier(.785, .135, .15, .86);
    transition: .4s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .4s cubic-bezier(.55, .31, .15, .93)
}

.join-banner .swiper-pag .swiper-pagination-bullet-active {
    opacity: 1
}

.join-banner .swiper-slide-active .imgBox img {
    filter: blur(0);
    opacity: 1;
    transform: scale(1) scaleX(1) translate3d(0, 0, 0);
    transition: transform 1.2s .04s cubic-bezier(.08, .92, .35, 1),opacity .6s,filter 1.2s ease-out
}

@media screen and (max-width: 1180px) {
    .join-banner {
        height:auto;
        margin-top: 60px
    }

    .join-banner .swiper-pag .swiper-pagination-bullet {
        margin: 0 .4rem;
        width: 10px;
        height: 10px
    }
}

@media screen and (max-width: 640px) {
    .join-banner {
        margin-top:54px
    }

    .join-banner .imgBox img {
        width: 120%;
        margin-left: -10%
    }

    .join-banner .swiper-pag .swiper-pagination-bullet {
        width: 8px;
        height: 8px
    }
}

.join-tbox {
    position: relative;
    margin-bottom: 8rem;
    padding: 6.5rem 0 4.5rem
}

.join-tbox .en {
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    opacity: .36;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.join-tbox .img1 {
    height: 15.7rem;
    max-height: 157px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.join-tbox .img1 img {
    height: 100%;
    -webkit-animation: fudong1 3s ease-in-out infinite;
    animation: fudong1 3s ease-in-out infinite
}

.join-tbox .title {
    line-height: 1.2
}

@media screen and (max-width: 1440px) {
    .join-tbox {
        margin-bottom:7rem;
        padding: 6rem 0 4rem
    }

    .join-tbox .img1 {
        height: 14rem
    }
}

@media screen and (max-width: 1180px) {
    .join-tbox {
        margin-bottom:6rem;
        padding: 5rem 0 3.5rem
    }

    .join-tbox .img1 {
        height: 12rem
    }
}

@media screen and (max-width: 640px) {
    .join-tbox {
        margin-bottom:5rem;
        padding: 4rem 0 3rem
    }

    .join-tbox .img1 {
        height: 10rem
    }
}

.join-item {
    padding: 5rem 5% 9rem;
    background-image: url(../img/aboutxxybg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0 none
}

.join-item .ico {
    width: 7rem;
    height: 7rem;
    margin-bottom: 5.5rem
}

@media screen and (max-width: 1440px) {
    .join-item {
        padding:4.5rem 5% 8rem
    }

    .join-item .ico {
        width: 6.4rem;
        height: 6.4rem;
        margin-bottom: 5rem
    }
}

@media screen and (max-width: 1180px) {
    .join-item {
        padding:3.5rem 5% 6.5rem
    }

    .join-item .ico {
        width: 5.8rem;
        height: 5.8rem;
        margin-bottom: 4rem
    }
}

@media screen and (max-width: 768px) {
    .join-item {
        padding:2rem 1.5rem
    }

    .join-item .ico {
        width: 3.8rem;
        height: 3.8rem;
        margin-bottom: 0
    }
}

@media screen and (max-width: 640px) {
    .join-item .ico {
        width:3.2rem;
        height: 3.2rem
    }
}

.join-two {
    padding: 18rem 0;
    color: #ffffff
}

@media screen and (max-width: 1440px) {
    .join-two {
        padding:15rem 0
    }
}

@media screen and (max-width: 1180px) {
    .join-two {
        padding:12rem 0
    }
}

@media screen and (max-width: 860px) {
    .join-two {
        padding:10rem 0
    }
}

@media screen and (max-width: 640px) {
    .join-two {
        padding:8rem 0
    }

    .join-two .desc {
        text-align: justify
    }
}

.join-three {
    background-color: #EDF2F8
}

.join-for-ul {
    display: flex;
    margin-left: -2.5%
}

.join-for-ul>li {
    margin-left: 2.5%;
    width: 10%;
    margin-bottom: 2rem
}

@media screen and (max-width: 1440px) {
    .join-for-ul {
        margin-left:-2%
    }

    .join-for-ul>li {
        margin-left: 2%;
        width: 10.5%
    }
}

@media screen and (max-width: 1180px) {
    .join-for-ul {
        flex-wrap:wrap
    }

    .join-for-ul>li {
        width: 23%
    }
}

@media screen and (max-width: 640px) {
    .join-for-ul>li {
        margin-bottom:1rem
    }
}

@media screen and (max-width: 520px) {
    .join-for-ul>li {
        width:48%
    }
}

.join-for-item {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 5rem 2% 8rem;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s
}

.join-for-item::before,.join-for-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    border-radius: .4rem;
    transition: .3s;
    -webkit-transition: .3s
}

.join-for-item::before {
    background-color: #104CC7;
    opacity: 0
}

.join-for-item::after {
    background-color: #ffffff
}

.join-for-item * {
    position: relative;
    z-index: 2
}

.join-for-item .num {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background-color: #104CC7;
    margin: 0 auto 4.5rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    font-style: initial;
    position: relative
}

.join-for-item .num::before {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    border: 1px dashed #104CC7;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (hover: hover) and (pointer:fine) {
    .join-for-item:hover {
        color:#ffffff
    }

    .join-for-item:hover::before {
        opacity: 1;
        transform: translate(10px, -10px)
    }

    .join-for-item:hover::after {
        box-shadow: 0 none;
        background-color: rgba(255,255,255,0.5);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px)
    }

    .join-for-item:hover .num::before {
        animation: rotate2 10s linear infinite
    }
}

@media screen and (max-width: 1440px) {
    .join-for-item {
        padding:4.5rem 5% 7rem
    }
}

@media screen and (max-width: 1180px) {
    .join-for-item {
        padding:3.5rem 5% 5rem
    }

    .join-for-item .num {
        margin-bottom: 3rem
    }
}

@media screen and (max-width: 640px) {
    .join-for-item {
        padding:3rem 5% 4rem
    }

    .join-for-item .num {
        width: 5rem;
        height: 5rem;
        margin-bottom: 2.5rem
    }

    .join-for-item .num::before {
        width: 130%;
        height: 130%
    }
}

@keyframes rotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

.join-five-ul {
    display: flex
}

.join-five-ul>li {
    width: 33.33%;
    position: relative
}

.join-five-ul .imgBox::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    transition: .4s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .4s cubic-bezier(.785, .135, .15, .86);
    transition: .4s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .4s cubic-bezier(.55, .31, .15, .93)
}

.join-five-ul .desc {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    transform: translateY(-50%);
    text-align: center;
    margin-top: 4rem;
    transition: .4s cubic-bezier(.785, .135, .15, .86);
    -webkit-transition: .4s cubic-bezier(.785, .135, .15, .86);
    transition: .4s cubic-bezier(.55, .31, .15, .93);
    -webkit-transition: .4s cubic-bezier(.55, .31, .15, .93)
}

.join-five-ul .title {
    line-height: 1.4;
    margin-bottom: 2rem
}

.join-five-ul .bot {
    opacity: 0
}

@media (hover: hover) and (pointer:fine) {
    .join-five-ul>li:hover .imgBox::after {
        background-color:rgba(16,76,199,0.9)
    }

    .join-five-ul>li:hover .desc {
        color: #ffffff;
        margin-top: 0
    }

    .join-five-ul>li:hover .bot {
        opacity: 1;
        line-height: 1.4
    }
}

@media screen and (max-width: 1180px) {
    .join-five-ul .title {
        margin-bottom:1.5rem
    }

    .join-five-ul .desc {
        margin-top: 0
    }

    .join-five-ul .bot {
        opacity: 1;
        line-height: 1.1
    }
}

@media screen and (max-width: 640px) {
    .join-five-ul {
        display:block
    }

    .join-five-ul>li {
        width: 100%;
        position: relative
    }

    .join-five-ul .imgBox {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%
    }

    .join-five-ul .desc {
        position: relative;
        padding: 4rem 5%;
        top: auto;
        left: auto;
        width: auto;
        transform: initial;
        margin-top: 0
    }

    .join-five-ul .title {
        margin-bottom: 1rem
    }
}

.join-three-nav {
    justify-content: center;
    display: flex
}

.join-three-nav a {
    display: flex;
    align-items: center;
    color: #222222;
    line-height: 1.2
}

.join-three-nav a .ico {
    margin-right: 1.5rem
}

.join-three-nav a.active {
    color: #104CC7
}

.join-three-nav .fg {
    width: 1px;
    background-color: #707070;
    margin: 0 6rem
}

@media screen and (max-width: 1440px) {
    .join-three-nav .fg {
        margin:0 5rem
    }

    .join-three-nav a .ico {
        margin-right: 1rem
    }
}

@media screen and (max-width: 1180px) {
    .join-three-nav .fg {
        margin:0 4rem
    }

    .join-three-nav a .ico {
        margin-right: .8rem
    }
}

@media screen and (max-width: 640px) {
    .join-three-nav .fg {
        margin:0 2rem
    }
}

.join-three-img {
    display: flex;
    align-items: center
}

.join-three-i {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1.6rem
}

.join-three-i .item {
    margin-bottom: 1.4rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.join-three-i .item:last-child {
    margin-bottom: 0
}

.join-three-i .item video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.join-three-i .item1 {
    width: 53.13807531%;
    padding-top: 57%
}

.join-three-i .item2 {
    padding-top: 62%
}

.join-three-i .item3 {
    width: 66.10878661%;
    padding-top: 41%
}

.join-three-i .item4 {
    padding-top: 153%
}

.join-three-i .item5 {
    padding-top: 83%
}

.join-three-i .item6 {
    padding-top: 123%
}

.join-three-i .item7 {
    padding-top: 39%
}

.join-three-i .item8 {
    width: 51.83%;
    padding-top: 67%;
    margin-bottom: 0 !important
}

.join-three-i .item9 {
    width: 44.2764%;
    padding-top: 28%
}

@media screen and (max-width: 1180px) {
    .join-three-i {
        margin-left:1rem
    }

    .join-three-i .item {
        margin-bottom: .8rem
    }
}

@media screen and (max-width: 750px) {
    .join-three-i {
        margin-left:.8rem
    }

    .join-three-i .item {
        margin-bottom: .4rem
    }

    .join-three-i.join-three-i1 {
        width: 25%
    }

    .join-three-i.join-three-i2 {
        display: none
    }

    .join-three-i.join-three-i3 {
        width: 50%
    }

    .join-three-i .join-three-i4 {
        width: 25%
    }
}

.join-three-i1 {
    width: 16.5%;
    justify-content: flex-end;
    margin-left: 0
}

.join-three-i2 {
    width: 14.5%
}

.join-three-i3 {
    width: 33.125%
}

.join-three-i4 {
    width: 32.15%;
    align-items: flex-end;
    justify-content: space-between
}

.join-three-i5 {
    justify-content: space-between
}

.join-three-swiper {
    position: relative;
    overflow: hidden
}

.join-three-swiper.active {
    animation: lightSpeedIn .8s forwards
}

.kao-form-page {
    width: 1190px;
    border-radius: 8px;
    background-color: #ffffff
}

@media screen and (max-width: 1280px) {
    .kao-form-page {
        width:90%
    }

    .kao-form-page .form-box-close1 {
        right: 1rem;
        top: 1rem
    }
}

@media screen and (max-width: 750px) {
    .kao-form-page {
        width:100%;
        min-height: 100vh;
        border-radius: 0
    }

    .kao-form-page .form-box-close1 {
        position: fixed;
        right: 2rem;
        line-height: 1
    }

    .kao-form-page .form-box-close1 i {
        color: #104CC7
    }
}

.kao-form-box {
    display: flex
}

@media screen and (max-width: 640px) {
    .kao-form-box {
        display:block
    }
}

.kao-form-lbox {
    width: 38%;
    padding: 5rem 4.5rem;
    border-radius: 8px 0 8px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.kao-form-lbox .tbox {
    margin-bottom: 14rem
}

.kao-form-lbox .cbox .erm {
    margin-top: 1rem
}

.kao-form-lbox .cbox .erm img {
    width: 50%;
    max-width: 131px
}

@media screen and (max-width: 1370px) {
    .kao-form-lbox {
        padding:4.5rem 4rem
    }

    .kao-form-lbox .tbox {
        margin-bottom: 12rem
    }
}

@media screen and (max-width: 1180px) {
    .kao-form-lbox {
        padding:6rem 3.5rem
    }

    .kao-form-lbox .tbox {
        margin-bottom: 10rem
    }
}

@media screen and (max-width: 750px) {
    .kao-form-lbox {
        padding:5rem 2rem;
        border-radius: 0
    }

    .kao-form-lbox .tbox {
        margin-bottom: 7rem
    }
}

@media screen and (max-width: 640px) {
    .kao-form-lbox {
        width:100%
    }

    .kao-form-lbox .tbox {
        margin-bottom: 0
    }

    .kao-form-lbox .cbox {
        display: none
    }

    .kao-form-lbox .cbox .erm img {
        width: 10rem
    }
}

.kao-form-ico {
    width: 6.4rem;
    margin-top: 2.5rem
}

@media screen and (max-width: 640px) {
    .kao-form-ico {
        margin-top:1.8rem
    }
}

.kao-form-rbox {
    flex: 1;
    padding: 5rem 8%;
    color: #999999
}

@media screen and (max-width: 1370px) {
    .kao-form-rbox {
        padding:3.5rem 6%
    }
}

@media screen and (max-width: 1180px) {
    .kao-form-rbox {
        padding:3.5rem 5rem
    }
}

@media screen and (max-width: 750px) {
    .kao-form-rbox {
        padding:6rem 2rem 5rem
    }
}

.kao-form-ul {
    list-style: none;
    display: flex;
    margin-left: -5%
}

.kao-form-ul2 {
    list-style: none;
    display: flex;
    padding-top: 1rem
}

@media screen and (max-width: 750px) {
    .kao-form-ul2 {
        display:block
    }
}

.kao-form-r5 {
    margin-right: 5%
}

.kao-form-nl {
    flex-shrink: 0
}

@media screen and (max-width: 750px) {
    .kao-form-nl {
        margin-bottom:.5rem
    }
}

.kao-form-nr {
    flex: 1;
    display: flex
}

.repay-method {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center
}

.repay-method input {
    margin: 0;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0
}

.repay-method input:checked+.radio-ico {
    border-color: #104CC7
}

.repay-method input:checked+.radio-ico::before {
    transform: translate(-50%, -50%) scale(1)
}

.repay-method .radio-ico {
    width: 18px;
    height: 18px;
    border: 1px solid #8d8d8d;
    border-radius: 50%;
    display: block;
    margin-right: 1rem;
    flex-shrink: 0;
    position: relative
}

.repay-method .radio-ico::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #104CC7;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: .3s;
    -webkit-transition: .3s
}

.repay-method .txt {
    position: relative
}

.kao-from-item {
    flex: 1;
    position: relative;
    margin-left: 5%
}

.kao-from-item .arrow {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem
}

@media screen and (max-width: 750px) {
    .kao-from-item .arrow {
        right:1.2rem
    }
}

.kao-form-txt {
    border: 1px solid #EFEFEF;
    border-radius: 6px;
    padding: 1.4rem 2.2rem;
    line-height: 1.2;
    display: block;
    width: 100%;
    transition: .3s;
    -webkit-transition: .3s
}

.kao-form-txt:focus {
    border-color: #104CC7
}

@media screen and (max-width: 750px) {
    .kao-form-txt {
        padding:1.5rem 1.5rem
    }
}

.kao-form-txt2 {
    resize: none;
    height: 11.8rem
}

.kao-form-se {
    padding-right: 4rem;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    color: #999999
}

@media screen and (max-width: 750px) {
    .kao-form-se {
        padding-right:3rem
    }
}

.kao-form-t {
    color: #999999;
    padding: 1.6rem 0
}

.kao-formbot {
    padding-top: 3.5rem
}

.kaolao-jl {
    position: fixed;
    left: .5%;
    bottom: 2%;
    z-index: 900;
    display: block
}

.kaolao-jl>a {
    display: block;
    width: 8rem;
    margin-left: 1.6rem
}

@media screen and (max-width: 1180px) {
    .kaolao-jl {
        width:14rem
    }
}

@media screen and (max-width: 750px) {
    .kaolao-jl {
        width:9rem
    }
}

.kaola-jl-close {
    position: absolute;
    right: -3rem;
    top: 0;
    width: 2rem;
    cursor: pointer
}

.kaola-jl-close img {
    transition: .3s;
    -webkit-transition: .3s
}

.kaola-jl-close:hover img {
    transform: rotate(180deg)
}

.kl-hot-issue {
    position: absolute;
    left: 0;
    bottom: 120%
}

.kl-hot-issue-item {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 .3rem .6rem rgba(0,0,0,0.16);
    padding: 5px 10px 5px 5px;
    position: absolute;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s ease;
    margin: 6px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: -1
}

.kl-hot-issue-item .ico {
    width: 21px;
    margin-right: 3px;
    flex-shrink: 0
}

.kl-hot-issue-item .txt {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.4
}

.kl-hot-issue-item.fade-in1 {
    transform: translateY(-80px);
    opacity: 0
}

.kl-hot-issue-item.fade-in2 {
    transform: translateY(-40px);
    opacity: 1
}

.kaolao-dock {
    position: fixed;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    margin-top: 15px;
    z-index: 900;
    -webkit-transition: .4s ease-out;
    transition: .4s ease-out
}

@media screen and (max-width: 1370px) {
    .kaolao-dock {
        right:2px
    }
}

@media screen and (max-width: 1180px) {
    .kaolao-dock {
        display:none
    }
}

.dock-list {
    padding: 4px;
    border-radius: 35px;
    background-color: #fff;
    box-shadow: 0 0 16px rgba(0,0,0,0.16)
}

.dock-list>li.on .title {
    background-color: #104CC7;
    color: #ffffff
}

.dock-list>li.on .icon {
    background-color: #104CC7;
    color: #ffffff
}

.dock-list>li.on .icon::before {
    opacity: 0
}

.dock-list>li.on+li .icon::before {
    opacity: 0
}

.dock-list>li:hover .dock-desc {
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

.dock-item {
    position: relative;
    color: #000000
}

.dock-item .title {
    position: relative;
    width: 16px;
    width: 52px;
    border-radius: 35px;
    padding: 20px 10px;
    line-height: 1.2;
    text-align: center;
    transition: .3s;
    -webkit-transition: .3s
}

.dock-item .icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 22px;
    margin: 0 auto;
    transition: .3s;
    -webkit-transition: .3s
}

.dock-item::before {
    /*content: "";*/
    /*position: absolute;*/
    /*top: 0;*/
    /*width: 20px;*/
    /*left: 50%;*/
    /*border-top: 2px solid #F2F3F3;*/
    /*transform: translateX(-50%)*/
}

.dock-desc {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 20px;
    text-align: left;
    border-radius: 4px;
    background-color: #fff;
    transform: translateY(-50%);
    box-shadow: 0 0 16px rgba(0,0,0,0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s;
    -webkit-transition: .3s
}

.dock-desc .txt {
    padding: 10px 20px;
    white-space: nowrap
}

.dock-desc .img {
    padding: 10px;
    width: 13rem
}

.dock-arrow {
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.03))
}

.dock-arrow,.dock-arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 50%;
    right: -6px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
    border-color: transparent;
    border-style: solid
}

.scro-top {
    border-radius: 50%;
    background-color: #104CC7;
    color: #ffffff;
    display: block;
    margin: 1.4rem auto 0;
    font-size: 24px;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 60px
}

@media (hover: hover) and (pointer:fine) {
    .scro-top:hover {
        background-color:#222222
    }
}

.data-dock .kaolao-dock {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    margin-top: 0
}

.fc-ipad {
    text-align: center
}

@media screen and (max-width: 1180px) {
    .fc-ipad {
        text-align:justify
    }
}

.fc-iphone {
    text-align: center
}

@media screen and (max-width: 750px) {
    .fc-iphone {
        text-align:justify
    }
}

.kaola-video video {
    width: 100%;
    border-radius: 1rem
}

.kaola-swiper-demo {
    position: relative
}

.kaola-swiper-demo .swiper-prev {
    left: -5%
}

.kaola-swiper-demo .swiper-next {
    right: -5%
}

@media screen and (max-width: 1180px) {
    .kaola-swiper-demo .swiper-arrow {
        display:none
    }

    .kaola-swiper-demo .swiper-prev {
        left: 0
    }

    .kaola-swiper-demo .swiper-next {
        right: 0
    }
}

.kaola-swiper-ov {
    overflow: hidden;
    padding: 1rem
}

.kaola-swiper-ov .swiper-slide {
    height: auto
}

@media screen and (max-width: 1180px) {
    .kaola-swiper-ov {
        overflow:initial
    }
}

.up-genxin {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center
}

.up-genxin .ico {
    width: 6.17rem
}

.up-genxin .txt {
    margin-top: 2rem
}