body{
    font-size: 16px;
    font-size: 62.5%;
    color:#383838;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.left{
    float:left;
}
.right{
    float:right;
}


.m-l-15{
    margin-left: 15px;
}
.common-width{
    width:80%;
    margin-left: auto;
    margin-right: auto;
}

.horizontal_center{
    margin-left: auto;
    margin-right: auto;
}


/* 背景图放大缩小动画 */
@keyframes backgroundZoom {
    0% {
      background-size: 100%;
    }
    50% {
      background-size: 120%;
    }
    100% {
      background-size: 100%;
    }
}

/* 在线咨询头像放大动画 */
@keyframes scale {
    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}
@keyframes scale2 {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}


/* 按钮水波纹 */
.section_btn{
    position: relative;
    overflow: hidden;
}
.section_btn::before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 0.2s;
    background: #fff;
    opacity: 0;
}
.section_btn::after{
    content: '';
    display: block;
    position: absolute;
    width: 200%;
    height: 100%;
    left: var(--x, 0);
    top: var(--y, 0);
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
    transition: transform 0.8s, opacity 0.8s;
}
.section_btn:hover::before{
    opacity: 0.2;
}
.section_btn:hover::after{
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.3;
    transition: 0s;
}


/* head */
#head{
    width:100%;
    height:5vw;
    position: fixed;
    left:0;
    top:0;
    background: transparent;
    z-index: 20;
    transition: all 0.4s ease;
}
#head.scroll{
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(30px);
}
.head{
    width:100%;
    height:100%;
    padding:1vw 5%;
    box-sizing: border-box;
}
.head .head_left{
    float:left;
}
.head .head_right{
    float:right;
}
.head .logo{
    float:left;
    width:auto;
    height:3vw;
    margin-right: 2vw;
}
.head .logo img{
    width:auto;
    height:100%;
    display: block;
    float:left;
}
.head .logo img.zhixiang{
    width:auto;
    height:2vw;
    margin-top: 0.5vw;
    margin-left: 1vw;
}
.head .nav{
    float:left;
}
.head .nav .menu{
    float:left;
    width:auto;
    height:3vw;
    line-height: 3vw;
    margin:0 1vw;
    position: relative;
}
.head .nav .menu .menu_one{
    font-size: 0.9vw;
    color:#021136;
}
.head .btn{
    float:left;
    width: auto;
    height:2vw;
    line-height: 2vw;
    padding:0 1vw;
    border-radius: 1vw;
    box-sizing: border-box;
    font-size: 0.8vw;
    margin-left: 1vw;
    margin-top: 0.5vw;
}
.head .btn.trial{
    background: #14A8A6;
    color:#fff;
}
.head .btn.login{
    border: 1px solid #14A8A6;
    line-height: calc(2vw - 2px);
    color:#14A8A6;
}
/* .head .menu .submenu{
    display: none;
    position: absolute;
}
.head .menu:hover .submenu{
    display: block;
}
.head .menu.product .submenu{}
.head .menu.product .submenu .item{}
.head .menu.product .submenu .item p{}
.head .menu.product .submenu .item ul li{} */


/* 咨询 浮窗 */
#consult{
    position: fixed;
    right:2vw;
    top:calc(50vh - 8vw);
    z-index: 100;
}
.consult{
    width:5vw;
    height:16vw;
    border-radius: 3vw;
    background: #fff;
    padding:0.6vw 0;
    box-sizing: border-box;
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 5%);
}
.consult .online .avatar_box{
    width:5vw;
    height:5vw;
    position: relative;
}
.consult .online .avatar_box::before{
    content: "";
    position: absolute;
    width:4.2vw;
    height:4.2vw;
    left:0.4vw;
    top:0.4vw;
    border:2px solid rgba(7, 92, 254,0.3);
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    animation: scale 1200ms ease-out infinite;
}
.consult .online .avatar{
    width:3.6vw;
    height:3.6vw;
    margin-left: 0.7vw;
    top:0.7vw;
    border-radius: 50%;
    overflow: hidden;
    border:2px solid rgba(7, 92, 254,1);
    box-sizing: border-box;
    background: #F2F2F2;
    position: relative;
    z-index: 1;
    animation: scale2 1200ms ease-out infinite;
}
.consult .online .avatar img{
    position: absolute;
    width:2.2vw;
    height:auto;
    left:0.7vw;
    top:0.2vw;
    z-index: 2;
}
.consult .item p{
    font-size: 0.7vw;
    color:#6C7282;
}
.consult .online p{
    color:#0D53FF;
}
.consult .phone{
    border-top:1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding:0.5vw 0;
    box-sizing: border-box;
}
.consult .phone,
.consult .wechat{
    width:3vw;
    margin:0.5vw 1vw;
}
.consult .phone img,
.consult .wechat img{
    width:2vw;
    height:2vw;
}
.contact_info{
    width:10vw;
    height:16vw;
    position: absolute;
    top:0;
    right:6vw;
    background: #fff;
    border-radius: 0.8vw;
    padding:1vw;
    box-sizing: border-box;
    transition: all 0.4s ease;
    display: none;
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 5%);
}
.contact_info.active{
    display: block;
}
.contact_info .ewm img{
    width:90%;
    height:auto;
    margin-left: 5%;
}
.contact_info .ewm p{
    font-size: 0.9vw;
    color:#808080;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.3px;
}
.contact_info .phone{
    border-bottom: 2px solid #666;
    margin-top:0.8vw;
    padding-bottom: 0.1vw;
    box-sizing: border-box;
}
.contact_info .phone img{
    width:1vw;
    height:1vw;
}
.contact_info .phone span{
    font-size: 0.9vw;
    font-weight: bold;
}
.contact_info .address{
    font-size: 0.7vw;
    margin-top: 0.2vw;
    letter-spacing: 1px;
}
.contact_info::after{
    content:"";
    width: 0;
    height: 0;
    border-left: 8px solid #fff;
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    right:-16px;
    top:calc(8vw - 5px);
    transition: all 0.4s ease;
}

/* footer */
#footer{
    width:100%;
    height:60vw;
    overflow: hidden;
    background: url(./images/footer_bg.png) no-repeat center center / cover;
    margin-top: 100px;
}
.footer .ewm{
    width:100%;
    height:28vw;
    padding:8vw 25%;
    box-sizing: border-box;
}
.footer .ewm .text{
    float: left;
    margin-top: 2vw;
}
.footer .ewm .text .Q{
    font-size: 2vw;
    color:#fff;
    line-height: 1.5;
}
.footer .ewm .text .A{
    font-size: 3vw;
    color:#fff;
    font-weight: bold;
    line-height: 1.5;
}
.footer .ewm .pic{
    float: right;
}
.footer .ewm .pic img{
    width:12vw;
    height:12vw;
}
.footer .content{
    width:100%;
    height:32vw;
    background: rgba(0,0,0,0.3);
    padding:5vw 3% 5vw 5%;
    box-sizing: border-box;
}
.footer .content .info{
    float:left;
    width:26vw;
    margin-right: 2vw;
}
.footer .content .info .logo{
    height:3.8vw;
}
.footer .content .info .logo img{
    height:100%;
    width:auto;
}
.footer .content .info .text{
    margin-top: 3vw;
}
.footer .content .info .phone{
    font-size: 2.5vw;
    line-height: 2.5vw;
    font-weight: bold;
    color:#fff;
    opacity: 0.98;
    margin-bottom: 0.5vw;
}
.footer .content .info .phone img{
    width:2vw;
    height:2vw;
    vertical-align: middle;
}
.footer .content .info .address{
    font-size: 1vw;
    color:#fff;
    opacity: 0.98;
}
.footer .content .info .FAQ{
    margin-top: 5vw;
}
.footer .content .info .FAQ a,
.footer .content .info .FAQ span{
    font-size: 1vw;
    color:#D6D6D6;
}
.footer .content .info .FAQ span{
    margin:0 2px;
}
.footer .content .pro_nav{
    float:left;
    width:calc(100% - 28vw);
}
.footer .content .pro_nav li{
    float:left;
    width:32%;
    height:140px;
    margin-bottom: 20px;
}
.footer .content .pro_nav li:nth-child(3n+2){
    margin-left: 2%;
    margin-right: 2%;
}
.footer .content .pro_nav li img{
    width:auto;
    height:25px;
}
.footer .content .pro_nav li .tit{
    font-size: 0.8vw;
    color:#fff;
    font-weight: bold;
    line-height: 1.5;
    margin:3px auto;
}
.footer .content .pro_nav li .desc{
    font-size: 0.7vw;
    color:#fff;
    line-height: 1.5;
    opacity: 0.6;
    padding-right: 1vw;
    box-sizing: border-box;
}

.footer .content .beian{
    position: absolute;
    width:90%;
    left:5%;
    bottom:0;
    height:6vw;
    line-height: 6vw;
    border-top:1px solid rgb(31, 37, 62);
    text-align: center;
}
.footer .content .beian a{
    font-size: 1vw;
    color:rgba(255,255,255,0.6);
}

/* 试用 浮窗 */
#fw{
    display: none;
    transition: all 0.6s ease;
}
.fw{
    width:100%;
    height:0;
    line-height: 5vw;
    position: fixed;
    left:0;
    bottom:0;
    z-index: 99;
    background: url(./images/fw_bg.png) no-repeat center center / cover;
    padding:0 5%;
    box-sizing: border-box;
    transition: all 0.6s ease;
}
#fw.active{
    display: block;
    transition: all 0.6s ease;
}
#fw.active .fw{
    height:5vw;
    transition: all 0.6s ease;
}
.fw p{
    font-size: 2vw;
    font-weight: bold;
    color:#fff;
}
.fw .btn{
    float:left;
    width: auto;
    height:2vw;
    line-height: 2vw;
    padding:0 1vw;
    border-radius: 1vw;
    box-sizing: border-box;
    font-size: 0.8vw;
    margin-top: 1.5vw;
}
.fw .btn.trial{
    margin-right: 1vw;
    background: #fff;
}
.fw .btn.appointment{
    border: 1px solid #fff;
    line-height: calc(2vw - 2px);
    color:#fff;
}


@media (max-width: 1680px){
    .footer .content .pro_nav li{
        height:120px;
    }
}
@media (max-width: 1440px){
    .footer .content .pro_nav li .tit{
        font-size: 0.9vw;
    }
    .footer .content .pro_nav li .desc{
        font-size: 0.8vw;
    }
    .footer .content .pro_nav li img{
        height:22px;
    }
}
@media (max-width: 1280px){
    .footer .content .pro_nav li{
        height:100px;
    }
}