@import url('font.css');
@import url('color.css');



.modal-dialog {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.modal-content {
    max-width: 500px;
}

.modal-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.container {
    padding: 0;
}

.header {
    width: 100%;
    height: 6.25rem;
    transition: 0.3s;
    color: #000000;
    background: #ffffff;
    display: flex;
    align-items: center;
}

.header .in {
    margin: 0 auto;
    justify-content: space-between;
    height: 100%;
}

.logo>img {
    width: 10.9375rem;
    object-fit: contain;
}

.bg1 {
    width: 100vw;
    position: relative;
}


.bg1>img,
.bg-tip>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tip-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bg-tip {
    width: 45%;
    /* position: absolute;
    left: 10.5%; */
}

.bg-tip span {
    display: inline-block;
}

.bg-tip .title {
    display: block;
    margin: 24px 0 36px 0;
    letter-spacing: 3px;
}

.bg-tip .he5 {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #5b94f0 0%, #5b94f0 30%, #f2f4f8 50%, transparent 100%);
    margin-top: 23px;
}

.bg-tip .modal-btn {
    width: 178px;
    height: 42px;
    border: 2px solid #3F85F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: pointer;
}

.modal-btn>img {
    margin-left: 22px;
}





.nav {
    position: relative;
    height: 100%;
    top: 0;
    transition: .3s;
}

.nav>li {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1.8125rem;
}

.nav>li>a {
    display: block;
    line-height: 1.875rem;
}


.pro-drop {
    opacity: 0;
    visibility: hidden;

    z-index: 99;
    width: 830px;
    background: #FFFFFF;
    box-shadow: 0px 2px 9px 1px rgba(135, 180, 255, 0.55);
    position: absolute;
    left: -40%;
    top: 100px;
    padding: 2.25rem 2.5625rem;
}

.about-drop {
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    width: 122px;
    background: #FFFFFF;
    box-shadow: 0px 2px 9px 1px rgba(135, 180, 255, 0.55);
    position: absolute;
    left: 55%;
    top: 100px;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.about-drop>a {
    padding-top: 1.25rem;
}

.nav>li:nth-child(2):hover .pro-drop {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s;
}

.nav>li:nth-child(4):hover .about-drop {
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}

.pro-drop .drop-item {
    width: 100%;

}

.drop-item .drop-t {
    justify-content: flex-start;
    align-items: center;
}

.drop-item .drop-t::before {
    display: inline-block;
    content: "";
    width: .375rem;
    height: 1.125rem;
    background-color: #3F85F9;
    margin-right: .4375rem;
    border-radius: 3px;
}

.drop-detial-box {
    display: flex;
    justify-content: flex-start;
    margin: .625rem 0 .75rem 0;
}

.drop-detial-box a {
    display: block;
}

.drop-detial-box a:nth-child(2) {
    width: 250px;
}

.drop-detial-box a>div {
    justify-content: flex-start;
    width: 275px;
    white-space: nowrap;
}

.drop-detial-box .det {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.drop-item .drop-detial-box>a {
    display: inline-block;
    /* margin-right: 10%; */
}




/* .bg-btn {
    position: absolute;
    width: 12.34%;
    height: 14.8%;
    z-index: 11;
    top: 66.86%;
    left: 13.39%;
    cursor: pointer;
    background-color: red;
} */



.topr-tel {
    flex-direction: column;
    align-items: center;
}

.topr .topr-tel>span {
    display: block;
}

.topr .topr-btn {
    width: 7.9375rem;
    height: 2.0625rem;
    line-height: 2.0625rem;
    margin-left: 2.0625rem;
    background-color: #3F85F9;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.section {
    padding: 5.25rem 0;
}

.section h3 {
    font-weight: normal;
}

.section .section-item {
    width: 100%;
    text-align: center;
    position: relative;
}

.section .section-img,
.section .customer {
    margin: 3.25rem auto;
}

.section .section-img>img {
    object-fit: contain;
    width: 100%;
    height: auto;
}

.col-bottom {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* background: red; */
    /* z-index: 100; */
    width: 30%;
    position: absolute;
    /* opacity: 0; */
    transition: all 0.5s ease;
}

.col-bottom .col-text-box,
.col-bottom>img {
    display: none;
}


.section-item .matrix {
    margin-top: 2.375rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.section-item .matrix>div {
    width: 32%;
    height: 15rem;
    background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 42%, #DDEAFF 100%);
    border-radius: .625rem;
    border: .25rem solid #ffffff;
    margin-bottom: 1.375rem;
    position: relative;
    text-align: left;
    padding: 1.875rem 1.25rem;
    font-style: italic;
    cursor: pointer;
}

.matrix>div .matrix-img {
    width: 58%;
    height: 59%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.matrix-img>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.matrix1:hover .matrix-pop1,
.matrix2:hover .matrix-pop2,
.matrix3:hover .matrix-pop3,
.matrix4:hover .matrix-pop4,
.matrix5:hover .matrix-pop5,
.matrix6:hover .matrix-pop6,
.matrix7:hover .matrix-pop7,
.matrix8:hover .matrix-pop8,
.matrix9:hover .matrix-pop9 {
    display: block;
}

.matrix .matrix-pop {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: 10;
    display: none;
    font-style: normal;

}

.matrix .matrix-pop>span:nth-child(1) {
    margin: 10px 20px;
    font-weight: bold;
}

.matrix .matrix-pop>span:nth-child(2) {
    width: 80%;
    margin: 10% auto;
}

.matrix .matrix-pop>a {
    text-align: center;
    border: 1px solid #3F85F9;
    padding: 10px 20px;
    width: 50%;
    margin: 10px auto;
    color: #3F85F9;
}

.section-item .matrix>div>span,
.matrix .matrix-pop>span,
.matrix-pop>a,
.customer .customer-count>div:nth-child(2)>span,
.rectangle div>span {
    display: block;
}

.section .customer-box {
    margin-top: 3.75rem;
}

.section-item .customer {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.customer .customer-count {
    width: 23%;
    height: 7.5rem;
    background-color: #478CFF;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}

.customer .customer-count>div:nth-child(2)>span {
    color: #ffffff;
}

.customer .customer-count>div:nth-child(1)>img {
    margin-right: 10px;
}

.customer-box .customer-org {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 100px;
    margin-left: 22px;
}

.customer-org .logo-box {
    width: 17.5%;
    /* width: 259px; */
    margin-left: -45px;
}

.logo-box>img {
    width: 100%;
    object-fit: contain;
    margin-bottom: -10px;
}


.customer-org .logo-box:nth-child(2),
.customer-org .logo-box:nth-child(4),
.customer-org .logo-box:nth-child(6) {
    margin-top: -100px;
}


.footer {
    width: 100%;
}

.footer .inner {
    width: 58%;
    margin: 0 auto;
}


.footer .ftop {
    padding: 65px 0;
    background-color: #3F85F9;
    color: #ffffff;
}

.ftop .inner_l>span {
    display: block;
}

.ftop .inner-r .btn {
    display: inline-block;
    text-align: center;
    padding: .8125rem 2.625rem;
    border: 1px solid #fff;
    border-radius: .625rem;
    color: #fff;
    margin-right: 2.5rem;
}

.ftop .inner-r {
    flex-wrap: wrap;
}

.ftop .inner_l span:nth-child(2) {
    color: rgba(255, 255, 255, 0.8);
    padding-top: 19px;
}

.fmid .inner {
    border-bottom: 1px solid #FFFFFF;
    padding: 43px 0;
    align-items: flex-start;
}

.footer .fmid,
.footer .fbot {
    background-color: #0E1D35;
    color: rgba(255, 255, 255, 0.8);
}

.fmid .inner_list span:nth-child(1) {
    color: #fff;
}

.fmid .inner_list a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.fmid .inner_l {
    align-items: flex-start;
    flex: 1 1 auto;
}


.fmid .inner_list span,
.fmid .inner_list a {
    padding-bottom: 16px;
    display: block;
}

.fmid .inner_qr {
    text-align: center;
}

.fmid .inner-qr>span {
    padding-top: 0;
}



.footer .fbot {
    text-align: center;
    padding: 33px 0;
    color: rgba(255, 255, 255, 0.58);
}

.show-menu {
    display: none;
    cursor: pointer;
}


.active {
    color: #3F85F9;
    border-bottom: 2px solid #3F85F9;
}

.dot {
    width: 40px;
    height: 6px;
    background-color: #3F85F9;
    margin: 0 auto;
    margin-bottom: 6rem;
}

.italic {
    font-style: italic;
}

.none {
    display: none;
}


.modal-footer {
    flex-direction: column;
}

.modal-body {
    padding: 1rem 3rem;
}

.btn-primary {
    background-color: #3F85F9;
}

.small-nav {
    display: none;
}



.col-text-box {
    width: 100%;
    padding: 20px;
    border: 1px solid #008FFF;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 16px 0px rgba(0, 143, 255, 0.5);
    text-align: justify;
}

.h10 {
    height: 10px;
}

.w60 {
    width: 60px;
    height: 60px;
    position: relative;
    cursor: pointer;
    /* background-color: red; */
}

.fontweight {
    font-weight: bold;
}

@media(max-width:1440px) {

    body {
        font-size: 16px;
    }

    .footer .inner {
        width: 70%;
    }

    .nav li {
        padding: 0 1.375rem;
    }



    .customer .customer-count>div:nth-child(1)>img {
        width: 40px;
        height: 40px;
    }

    .section {
        padding: 4rem 0;
    }


}

@media(max-width:1280px) {


    .nav li {
        padding: 0 1.25rem;
    }

    .drop-item .drop-detial-box>a {
        margin-right: 1%;
    }

    .footer .inner {
        width: 85%;
    }


    .fmid .inner_l {
        flex-wrap: wrap;
    }

    .fmid .inner .inner_list {
        width: 30%;
    }
}

@media(max-width:1188px) {
    .header .in {
        width: 93%;
    }

    .in ul>li {
        padding: 0 1.125rem;
    }

    .customer-box .customer-org {
        margin-top: 70px;
    }

    .customer-org .logo-box:nth-child(2),
    .customer-org .logo-box:nth-child(4),
    .customer-org .logo-box:nth-child(6) {
        margin-top: 70px;
    }
}

@media(max-width:1014px) {
    .header {
        height: 100px;
        padding: .625rem 0;
    }

    .header .logo img {
        width: 5.5rem;
        height: 1.75rem;
    }

    .header .in .nav {
        display: none;
    }

    .bg-tip {
        width: 80%;
    }

    .bg-tip .he5 {
        width: 35%;
    }

    .bg-tip .modal-btn {
        width: 8.75rem;
        height: 2.1875rem;
    }

    .bg-tip>img {
        width: 30%;
    }

    .bg-tip .he5 {
        margin-top: 5px;
    }

    .topr {
        flex-wrap: wrap;
        justify-content: center;
        padding: .625rem;
    }


    .footer .inner {
        width: 95%;
    }

    .ftop .inner-r {
        justify-content: flex-end;
    }

    .ftop .inner-r img {
        width: 20px;
        height: 20px;
    }

    .ftop .inner-r .btn {
        margin-right: 0;
    }

    .fmid .inner_l {
        flex-wrap: wrap;
    }

    .fmid .inner .inner_list {
        width: 50%;
        text-align: center;
    }

    .section-item .matrix>div {
        width: 48%;
        height: 14rem;
    }

    .matrix .matrix-pop>a {
        width: 58%;
    }

    .customer {
        justify-content: space-between;
    }

    .customer .customer-count {
        width: 45%;
        margin-bottom: 10px;

    }

    .show-menu {
        display: block;
    }


    .small-nav {
        width: 100vw;
        max-height: 100vh;
        background-color: #ffff;
        z-index: 999;
        position: absolute;
        left: 0;
        top: 6.25rem;
        overflow: auto;
    }

    .small-nav ul {
        display: block;
        padding: 10px 0;
        border-top: 1px solid #f5f5f5;
    }

    .small-nav ul li {
        position: relative;
    }

    .small-nav ul li>a {
        padding: 0 1.875rem;
        line-height: 3.125rem;
        display: block;
    }

    .small-nav li.haschild>a {
        position: relative;
        display: flex;
    }

    .small-nav li.haschild>a::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        transform: rotate(-45deg);
        right: 30px;
        top: 50%;
        margin-top: -4px;
        transition: .3s;
    }

    .small-nav li.haschild.rotate>a:after {
        transform: rotate(45deg);
    }

    .fixsub {
        display: none;
    }

    .fixsub .sub-del {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 10px 45px;
    }
}


@media(max-width:600px) {
    .bg-tip {
        width: 80%;
        margin: 0 auto;
    }

    .bg-tip .he5 {
        width: 100%;
    }

    .bg-tip>img {
        width: 60%;
    }

    .bg-tip .title {
        margin: 6px 0;
        letter-spacing: 2px;

    }

    .section {
        padding: 20px 0;
    }

    .topr .topr-btn {
        margin-left: 0;
        margin-top: .3125rem;
    }

    .section .section-img,
    .section .customer {
        margin: 1.25rem auto;
    }



    .customer-box .customer-org {
        margin-top: 0;
        margin-left: 0;
    }

    .customer-org .logo-box {
        width: 33.3%;
        margin-left: 0;
    }

    .logo-box>img {
        width: 100%;
        object-fit: contain;
        margin-bottom: 0;
    }

    .customer-org .logo-box:nth-child(2),
    .customer-org .logo-box:nth-child(4),
    .customer-org .logo-box:nth-child(6) {
        margin-top: 0;
    }


    .customer-org .logo-box:last-child {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .customer-org .logo-box:last-child>img {
        width: 33%;
    }

    .inner-r-img {
        margin-top: .625rem;
    }

}