:root{
    --themeColor: #D42935;
    --fcolor:#333333;
    --num16ie:1rem;
    --num16: clamp(0.75rem,0.83vw, 1.5rem);
}
html, body{ -webkit-text-size-adjust:none; margin: 0;padding: 0; color: var(--fcolor); font-size: 16px;}
body{font-family:"Microsoft Yahei","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;overflow-x:hidden;} 
a, a:link, a:visited, a:hover, a:active{ outline: 0;  text-decoration: none}
a{color: var(--fcolor);}
a:hover{color: var(--themeColor);}
em,b,strong{font-style: normal;font-weight: none;}
small{display: block; font-size: 100%;}
input, textarea, button, select, radio{outline: 0; border: 0;}
select:link,select:visited{color: #666;}
textarea{resize: none;}
img{max-width: 100%; display: block;}
ul{list-style: none; padding-left: 0;}
::-ms-clear, ::-ms-reveal{display: none;}
select::-ms-expand{ display: none; } 
/* .d-flex{display: flex; align-items: center;} */
.flex-1{flex: 1;}
.bold{font-weight: bold;}
.trans-3 {transition: all .3s;}
.rel{position: relative;}
.abs{position: absolute;}
.container { 
    width: 79.5vw;   
    padding: 0;
}
.tc{text-align: center;}
.block {display: block;}
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.line2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word;}

.line3 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-wrap: break-word;}
.cwhite100{color: #fff;}
.img-box{
    overflow: hidden;
    transition: all .3s;
}
.img-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-contain{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.d-flex {display: -webkit-box; display: -webkit-flex; display: flex;}

.d-flex-item {min-width: 1px;-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

.d-flex-wrap{display: flex; flex-wrap: wrap;}

.start {-webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;}

.middle {-webkit-box-align: center; -webkit-align-items: center; align-items: center;}

.end {-webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end;}

.jcenter{justify-content: center;}

.jbetween{justify-content: space-between;}
.my-swiper-pagination .swiper-pagination-bullet{
    width: 1.25rem;
    height: 1.25rem;
    width: clamp(0.625rem,1.04vw,1.875rem);
    height: clamp(0.625rem,1.04vw,1.875rem);
    background: transparent;
    border: 2px solid #fff;
    opacity: 1;
}
.my-swiper-pagination .swiper-pagination-bullet-active{
    background:#fff
}

.my-swiper-pagination .swiper-pagination-bullet{
    margin:  0 0.75rem !important;
    margin:  0  clamp(0.375rem,0.625vw,1.125rem) !important;
}
.icon16x16{
    width: var(--num16ie);
    height:var(--num16);
    width: var(--num16ie);
    height:var(--num16);
}
.icon20x20{
    width: 1.25rem;
    height: 1.25rem;
    width: clamp(0.94rem,1.04vw,1.8755rem);
    height: clamp(0.94rem,1.04vw,1.875rem);
}

.icon24x24{
    width: 1.5rem;
    height: 1.5rem;
    width: clamp(1.125rem,1.25vw,2.25rem);
    height: clamp(1.125rem,1.25vw,2.25rem);
}
.icon54x54{
    width: 3.375rem;
    height: 3.375rem;
    width: clamp(2.53rem,2.81vw,5.06rem);
    height: clamp(2.53rem,2.81vw,5.06rem);
 
}
.icon68x68{
    width: 4.25rem;
    height: 4.25rem;
    width: clamp(2.5rem,3.54vw,6.375rem);
    height: clamp(2.5rem,3.54vw,6.375rem);
}
.icon72x72{
    width: 4.5rem;
    height: 4.5rem;
    /* width: clamp(3.375rem,3.74vw,6.75rem);
    height: clamp(3.375rem,3.54vw,6.75rem); */
    width: clamp(2.5rem,3.74vw,6.75rem);
    height: clamp(2.5rem,3.54vw,6.75rem);
}
.icon80x80{
    width: 5rem;
    height: 5rem;
    width: clamp(3.75rem,4.17vw,7.5rem);
    height: clamp(3.75rem,4.17vw,7.5rem);
}
.icon32x32{
    width: 2rem;
    height: 2rem;
    width: clamp(1.5rem,1.67vw,3rem);
    height: clamp(1.5rem,1.67vw,3rem);
}
.f13{
    font-size: 0.81rem;
    font-size:  clamp(0.61rem,0.68vw,1.22rem);
}
.f14{
    font-size: 0.875rem;
    font-size:  clamp(0.75rem,0.73vw,1.31rem);
}
.f16{
    font-size: 1rem;
    font-size:  clamp(0.875rem,0.83vw,1.5rem);
}
.f18{
    font-size: 1.125rem;
    font-size:  clamp(1rem,0.94vw,1.69rem);
}
.f20{
    font-size: 1.25rem;
    font-size:  clamp(1rem,1.04vw,1.875rem);
}
.f22{
    font-size: 1.375rem;
    font-size:  clamp(1.105rem,1.15vw,2.06rem);
}
.f24{
    font-size: 1.5rem;
    font-size:  clamp(1.125rem,1.25vw,2.25rem);
}
.f28{
    font-size: 1.75rem;
    font-size:  clamp(1.31rem,1.458vw,2.625rem);
}
.f32{
    font-size: 2rem;
    font-size:  clamp(1.5rem,1.667vw,3rem);
}
.f36{
    font-size: 2.25rem;
    font-size:  clamp(1.69rem,1.88vw,3.38rem);
}
.f40{
    font-size: 2.5rem;
    font-size:  clamp(1.75rem,2.083vw,3.75rem);
}
.f44{
    font-size: 2.75rem;
    font-size:  clamp(1.8rem,2.29vw,4.125rem);
}
.f48{
    font-size: 3rem;
    font-size:  clamp(2.25rem,2.5vw,4.5rem);
}
.border-radius36{
    border-radius: 2.25rem;
    border-radius:  clamp(1.688rem,1.875vw,3.375rem);
}
.border-radius16{
    border-radius: var(--num16ie);
    border-radius:  var(--num16);
}
.overhide{
    overflow: hidden;
}
.gray333{
    color: #333;
}
.gray555{
    color: #555;
}
/* 导航栏 */
.header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    height: 5.5rem;
    height: clamp(4.125rem,4.58vw, 8.25rem);
    background: #FFFFFF;
    padding: 0 5rem;
    padding: 0 clamp(3.75rem,4.17vw, 7.5rem);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.header_logo{
    overflow: hidden;
    /* height: 2.25rem;
    height: clamp(1.69rem,1.88vw, 3.38rem); */
    
}
.header_logo .logo{
    height: 2.25rem;
    height: clamp(1.69rem,1.88vw, 3.38rem);
}
.nav{ 
    flex: 1; 
    display: flex;  
    align-items: center; 
    padding-left: 2.1vw;
}
  
.nav .nav-item{ 
    height: 5.5rem;
    height: clamp(4.125rem,4.58vw, 8.25rem);
    line-height: 5.5rem;
    line-height: clamp(4.125rem,4.58vw, 8.25rem);
    padding:0 1.375rem; 
    padding:0 clamp(1.03rem,1.15vw, 2.06rem); 
    position: relative; 
}

.nav .nav-item >a{
    display: block; 
    height: 100%; 
    position: relative;   
}
.nav .nav-item >a::after{
    position: absolute;
    content: '';
    z-index: 2;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--themeColor);
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all .3s;
}
.header .nav .nav-item.on >a::after{
    opacity: 1;
}
.nav .nav-item .sub-nav{
    width:130%; 
    left: 50%; 
    transform: translateX(-50%);
    top: 5.5rem;
    top: clamp(4.125rem,4.58vw, 8.25rem);  
    display: none;  
    z-index: 15; 
    background: #fff;
    border-radius: 8px; 
    overflow: hidden;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
}
  
.nav .nav-item .sub-nav .sub-nav-box{  
    position: relative;  
    height: 100%;
} 
.sub-nav  ul{ 
    width: 100%; 
    margin-bottom: 0;
}
  
.sub-nav ul li{
    text-align: center; 
    cursor: pointer; 
    line-height: initial;
    position: relative;
    padding: 0.875rem; 
    padding: clamp(0.66rem ,0.73vw, 1.31rem); 
    transition: all .3s; 
}
.sub-nav  ul li  .nav-text{ color: #333; }
.header_right{
    height: 100%; 
}
.h-search-box{
    cursor: pointer;
    position: relative;
    margin-left: 1.81rem;  
    margin-left: clamp(1.36rem ,1.51vw, 2.72rem);  
    margin-right: 1.81rem;  
    margin-right: clamp(1.36rem ,1.51vw, 2.72rem);   
}
.zixun-box{
    margin-left: 2rem;
    margin-left: clamp(1.5rem ,1.67vw, 3rem);
    width: 9.25rem;
    width:  clamp(6.94rem , 7.71vw, 13.88rem);
    height: 2.5rem;
    height:  clamp(1.875rem , 2.08vw, 3.75rem);
    background: #D42935;
    border-radius: 20px;
    justify-content: center;
    color: #fff;
}
.zixun-box .icon20x20{
    margin-right: 0.19rem;
    margin-right: clamp(0.14rem , 0.16vw, 0.28rem);
}
.nav-icon {
    display: block;      
    position: absolute;      
    right: 15px;      
    top: 50%;      
    margin-top: -7px;      
}

.nav-icon span {
    display: block;      
    width: 22px;      
    height: 2px;      
    background: #333333;      
    border-radius: 2px;      
    transition: all .3s linear;      
}

.nav-icon span:not(:first-child) { margin-top: 4px; }

.nav-icon.on span:nth-of-type(1) {
    -webkit-transform: matrix(1,0,0,1,0,6) rotate(45deg);      
    transform: matrix(1,0,0,1,0,6) rotate( 45deg );      
}

.nav-icon.on span:nth-of-type(2) {  width: 0; }

.nav-icon.on span:nth-of-type(3) {      
    -webkit-transform: matrix(1,0,0,1,0,6) rotate( 45deg);
    transform: matrix(1,0,0,1,0,-6) rotate( -45deg);        
}
/* 表单 */
.form-box{
    padding: 0 0 5rem;
    padding: 0 0 clamp(3.75rem,4.17vw, 7.5rem);
    background: #f9f9f9;
}
.form-box .form-inner{
    background: url(../images/form-bg.png) no-repeat;
    background-size: cover;
    padding: 2rem 3.88rem  2.375rem;
    padding: clamp(1.5rem,1.67vw, 3rem) clamp(2.91rem,3.23vw, 5.81rem) clamp(1.78rem,1.98vw, 3.56rem);
    border-radius: 1.875rem;
    border-radius: clamp(1.41rem, 1.56vw,2.81rem);
    overflow: hidden;
}
.form-box .form-inner .title{
    color: #fff;
    padding-bottom: 2.88rem;
    padding-bottom: clamp(2.16rem,2.4vw, 4.31rem);
}
.form-box .form-inner .form {
    gap: 2rem;
    gap: clamp(1.5rem,1.67vw, 3rem);
}
.form-box .form-inner .form .form-item{
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 4px;
}
.form-box .form-inner .form .form-item .suffx{
    right: 5%;
}
.form-box .form-inner .form .form-item  .form-control{
    height: 3rem;
    height: clamp(2.25rem,2.5vw, 4.5rem);
}
.form-box .form-inner .form .form-item  .form-control.area{
    padding-right: 25%;
}
.form-box .btn-box{
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    padding-top: clamp(1.5rem,1.67vw, 3rem);
}
.form-box .btn-box img{
    height: 3.375rem;
    cursor: pointer;
    height: clamp(2.53rem,2.81vw, 5.06rem);    
}

/* footer */
.footer{
    background-color: #F3F3F3;
    background-image: url(../images/footer-bg.png) ;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer1{
    padding: 5rem 0 2.25rem;
    padding: clamp(3.75rem , 4.17vw, 7.5rem) 0 clamp(1.69rem ,1.88vw, 3.38rem);
}


.footer1 .footer1-l .footer-logo{
    height: 2.75rem;
    height: clamp(2.06rem , 2.29vw, 4.125rem);
}
.code-list{
    /* gap: 1.25rem;
    gap: clamp(0.94rem , 1.04vw, 1.875rem); */
    gap: 0.625rem;
    gap: clamp(0.47rem , 0.52vw, 0.94rem);
    margin-top: 2.81rem ;
    margin-top: clamp(2.11rem , 2.34vw, 4.22rem);
}
.code-list .item{
    text-align: center;
    padding: 0.625rem;
    padding: clamp(0.47rem , 0.52vw, 0.94rem);
}
.code-list .item img{
    margin-bottom: 0.375rem;
    margin-bottom: clamp(0.375rem , 0.31vw, 0.56rem);
}
.footer1 .footer1-r{
    display: flex;
    justify-content: flex-end;
    padding-right: 9.375rem;
    padding-right: clamp(7.03rem , 7.81vw, 14.06rem);
}
.footer1 .footer1-r .item{
    margin-left: 10.73vw;
}
.footer1 .footer1-r .item a{
    display: block;
    padding: 0.625rem 0;
    padding: clamp(0.47rem , 0.52vw, 0.94rem) 0;
}
.footer2{
    border-top: 1px solid #d9d9d9;
    padding: 1.69rem 0 3.25rem;
    padding: clamp(1.27rem , 1.4vw, 2.53rem) 0 clamp(2.44rem , 2.71vw, 4.875rem);
}
.footer2 .footer2-item .txt1{color: #888888;}
.footer2 .footer2-item .txt2{
    display: block;
    color: #333;
    margin-top: 0.81rem;
    margin-top: clamp(0.81rem , 0.68vw, 1.22rem);
    margin-bottom: 1.94rem;
    margin-bottom: clamp(1.45rem , 1.61vw, 2.91rem);
}
.footer2 .footer2-item .footer2-img{
    width: 3.125rem;
    width: clamp(2.34rem , 2.6vw, 4.69rem);
    height: 3.125rem;
    height: clamp(2.34rem , 2.6vw, 4.69rem);
}
.footer3{
    border-top: 1px solid #d9d9d9;
    padding: 3.31rem 0 3.56rem;
    padding: clamp(2.48rem , 2.76vw, 4.97rem) 0 clamp(2.67rem , 2.97vw, 5.34rem);
}
.footer3 span, .footer3 a{color: #999;}

/* 侧边 */
.side-box{
    position: fixed;
    right: 1.5rem;
    right: clamp(1.125rem , 1.25vw, 2.25rem);
    bottom: 10vh;
    background: var(--themeColor);
    border-radius: 1.875rem;
    border-radius: clamp(1.875rem , 1.56vw, 2.81rem);
    overflow: hidden;
    z-index: 999;
}
.side-box .item{
    font-size: 0.8125rem ;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   cursor: pointer;
}
.side-box .item:nth-child(1){
    border-bottom: 1px solid #fff;
    padding: 1.375rem  0.375rem 0.81rem;
    padding: clamp(1.03rem ,1.16vw, 2.06rem)  clamp(0.37rem , 0.31vw,0.56rem) clamp(0.61rem , 0.68vw,1.22rem);
}
.side-box .item:nth-child(2){
    padding: 0.81rem   0.375rem 1.375rem;
    padding:clamp(0.61rem , 0.68vw,1.22rem)   clamp(0.37rem , 0.31vw,0.56rem) clamp(1.03rem ,1.16vw, 2.06rem);
}
@media (min-width: 993px){
    .nav .nav-item:hover >a, 
    .footer1 .footer1-r .item a:hover,
    .footer2 .footer2-item:hover .txt2,
    .footer3 a:hover{
        color: var(--themeColor);
    }  
    .sub-nav  ul li:hover{
        background: var(--themeColor);
        color: #fff;
    } 
    .sub-nav  ul li:hover .nav-text{
        color: #fff;
    }
    .form-box .btn-box img:hover{
        transform: scale(1.1);
    }
    .code-list .item:hover {
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
        border-radius: 8px;
    }
    .zixun-box:hover{color: #fff;}
}
@media (max-width: 993px){
 
    .header{ padding: 0 40px 0 15px;justify-content: space-between; }
    /* .header .logo{ height: 24px;} */
    .header_right .zixun-box,.header_right .h-kefu{display: none;}
    .header .nav{display: block !important; padding: 0 30px; transform: translateX(100%); position: fixed;background: #fff; left: 0; right: 0; 
        top: 5.5rem;
        top: clamp(4.125rem,4.58vw, 8.25rem); 
        bottom: 0;}
    .header.mactive .nav{transform: translate(0);}
    .nav .nav-item{
        padding:15px 30px;
        height: unset;
        line-height: unset;
    }
    .header .nav .nav-item .has_subnav{position: relative; }
    .header .nav .nav-item .sub-nav{
        position: relative;
        margin-top: 15px; 
        display: none; 
        z-index: 18;
        text-align: left;
        box-shadow:none;  
        left: 0; 
        right: 0; 
        width: 100% !important; 
        bottom: 0;  
        top: 100%; 
        height: auto;
        transform: translateX(0);  
    }
    .code-list{justify-content: space-around;}
    .code-list .item img{width: 120px;height: 120px;}
    .footer2-item{margin-bottom: 20px;}
    .footer2 .footer2-item .txt2{
        margin: 10px 0;
    }
    .footer1 .footer1-r{
        padding-right: 30px;
        justify-content: space-around;
    }
}

@keyframes myfadeInUp{

    0%{
        opacity: 0;
        transform: translate3d(0,50px,0);
    }

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

}

.myfadeInUp {
    animation: myfadeInUp .5s ease-in-out both;
    animation-delay: .4s;
}



@keyframes imgbigtosmall {
    0% { 
    opacity: 1;
    -webkit-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    transform: scale(1.2);
    }

    100% { 
    opacity: 1;
    -webkit-transform: scale(1); 
    -ms-transform: scale(1);
    transform: scale(1);
    }

  }

  .imgbigtosmall{
    -webkit-animation-name: imgbigtosmall;
    animation-name: imgbigtosmall;
    transition: all 10s ease;
    transform-origin: 50% 50%;
  }