@charset "utf-8"; 
@media (max-width: 1024px) and (min-width:960px) {  
    html{
        font-size:132.26px;
    }
}
@media (max-width: 960px) and (min-width:900px) {  
    html{
        font-size:124px;
    }
}
@media (max-width: 900px) and (min-width:820px) {  
    html{
        font-size:114.66px;
    }
}
@media (max-width: 820px) and (min-width:750px) {  
    html{
        font-size:104.66px;
    }
}
@media (max-width: 750px) and (min-width:700px) {  
    html{
        font-size:100px;
    }
}
@media (max-width: 700px) and (min-width:640px) {  
    html{
        font-size:89.33px;
    }
}
@media (max-width: 640px) and (min-width:560px) {  
    html{
        font-size:80px;
    }
}
@media (max-width: 560px) and (min-width:480px) {  
    html{
        font-size:69.33px;
    }
}
@media (max-width: 480px) and (min-width:420px) {  
    html{
        font-size:60px;
    }
}
@media (max-width: 420px) and (min-width:380px) {  
    html{
        font-size:53.33px;
    }
}
@media (max-width: 380px) and (min-width:350px) {  
    html{
        font-size:48.66px;
    }
}
@media (max-width: 350px) and (min-width:320px) {  
    html{
        font-size:44.66px;
    }
}
@media (max-width: 320px) and (min-width:300px) {  
    html{
        font-size:41.33px;
    }
}
@media (max-width: 1024px) {  
    .bigScreen{
        display: none !important;
    }
    .smallScreen{
        display: block !important;
    }
    .smallScreen-inline-block{
        display: inline-block;
    }
    .bigScreen-inline-block{
        display: none;
    }

    .header-mobile{
        position: fixed;
        z-index: 10;
        background: rgba(51,51,51, .75);
        width: 100%;
        height: .88rem;
    }
    .header-mobile  .switch-img{
        position: absolute;
        right: .27rem;
        top:50%;
        margin-top: -.165rem;
        height:.33rem;
      
    }
    .header-mobile .header-logo{
        position: absolute;
        left: .3rem;
        top:50%;
        margin-top: -.25rem;
        width: 1.70rem;
        height:.50rem;
        background: url(/images/logo.png) no-repeat;
        background-size: 1.70rem .50rem;
    }
    
 
    .content-index .big-img .img-des{
        position: relative;
        padding-top: 0;
        top: 50%;
        font-size:.34rem;
        transform: translateY(-50%);
    }
    .content-info .big-img {
        height: 4.88rem;
        /* background: yellow; */
        background: url(/images/banner/banner-info.png) no-repeat center center;
        background-size: 100% 100%
    }
    .content-about .big-img {
        height: 4.88rem;
        background: url(/images/banner/banner-about.jpg) no-repeat center center;
    }
    .content-index .big-img {
        height: 4.88rem;
        background: url(/images/banner/banner-index-m.png) no-repeat center center;
        position: relative;
        background-size: 100% 100%
    }
    .content-index .big-img.banner-index_02 {
        height: 4.88rem;
        background: url(/images/banner/banner-index_02.jpg) no-repeat center center;
        position: relative;
    }
    .content-index .big-img.banner-index_03 {
        height: 4.88rem;
        background: url(/images/banner/banner-index_03.jpg) no-repeat center center;
        position: relative;
    }
    .content-index .big-img.banner-index_04 {
        height: 4.88rem;
        background: url(/images/banner/banner-index-m_04.png) no-repeat center center;
        position: relative;
    }
    .content-case .big-img {
        height: 4.88rem;
        background: url(/images/banner/banner-case-m.png) no-repeat center center;
        background-size: 100% 100%
    }
    .content-prod .big-img {
        height: 4.88rem;
        background: url(/images/banner/banner-prod-m.png) no-repeat center center;
        background-size: 100% 100%
    }
    .content-info .big-img .img-des, 
    .content-about .big-img .img-des,
    .content-case .big-img .img-des,
    .content-prod .big-img .img-des 
    {
      width: 100%;
    }
    .content-index .img {
        height: 2.85rem;
        background: url(/images/index-imgs/img-m.png) no-repeat center center; 
    }

    .content-index .img.banner-index_02 {
        height: 3rem;
     
    }
    .content-index .img.banner-index_03 {
        height: 3rem;
        
    }
    .content-index .img.banner-index_04 {
        height: 3rem;
        background: url(/images/index-imgs/img-04-m.png) no-repeat center center;
    }
    .content-index .img-test{
        height: 2.85rem;
    }
    .content-index .statistics {
     
        position: absolute;
        width: 100%;
        /* top: 50%;
        transform: translateY(-50%); */
    }
    .content-index .statistics .item {
        display:block;
        width: 50%;
        height: .96rem;
        float: left;
        box-sizing: border-box;
        border-right:0;
        margin-top: .27rem;
        padding-left:.42rem;
   
    }
  
    .content-index .statistics .item-2 {
        padding-left:.3rem;
        /* border: 1px solid rgb(254,140,67); */
        border-left: 1px solid #6A6A6A;
    }
  
    .content-index .statistics .item-4 {
        padding-left:.3rem;
        /* border: 1px solid rgb(254,140,67); */
        border-left: 1px solid #6A6A6A;
    }
    .content-index .statistics .item:first-child {
        border-left: 0;
    }
    .content-index .statistics .item .num {
        font-size:.22rem;
        color:rgb(254,140,67);
        margin-bottom: 0rem;
        text-align: left;
        font-weight:bold;
    }
    .content-index .statistics .item .desc {
        margin-top: .22rem;
        font-size:.18rem;
        color:rgb(255,255,255);
    }
   .navigation{
       position: fixed;
       /* display: none; */
       top:0;
       bottom: 0;
       left: 0;
       right: 0;
       background: rgba(51,51,51,.95);
       z-index: 9999;
   }
   .navigation .close{
       position: relative;
       width: 100%;
       height:.88rem;
       background:rgba(102,102,102,.9)
    }

    .navigation .close .close-img{
        position: absolute;
        right:.4rem;
        top: 50%;
        margin-top: -.17rem;
        width:.35rem;
        height:.34rem;
    }

    .navigation .item{
        /* height: .8rem; */
    }
    .navigation .item p{
        line-height: .8rem;
        text-align: center;

    }
    .navigation .item p a{
        font-size: .28rem;
        color: #cccccc;
    }
    .navigation   ul {
        width: 100%;
        height: 0rem;
        overflow: hidden;
        transition: height 0.5s;
    }
    /* .navigation  .btn-2:hover+ul.ul-1{
        height: 3rem;
    }
    .navigation  .btn-3:hover+ul.ul-2{
        height: .6rem;
    }
    .navigation  .btn-4:hover+ul.ul-3{
        height: 1.2rem;
    }
    .navigation  .btn-5:hover+ul.ul-4{
        height: 2.4rem;
    } */

    .navigation .arrow{
        margin-left: .1rem;
        width: .3rem;
        height:.3rem;
        vertical-align: sub;
    }
    /* .navigation  .item:hover .arrow{
        transform: rotate(180deg);
    } */
    .navigation  ul li{
        line-height: .7rem;
        font-size: .24rem;
        text-align: center;
        color: #cccccc;
        background:rgba(102,102,102,.9)
    }

    .content-info .big-img {
        height: 4.88rem;
        /* background: yellow; */
        background: url(/images/banner/banner-info-m.png) no-repeat center center;
    }
    .content-about .big-img {
        height: 4.88rem;
        background: url(/images/banner/banner-about-m.png) no-repeat center center;
    }
    .content-info .big-img .img-des, 
    .content-about .big-img .img-des,
    .content-case .big-img .img-des,
    .content-prod .big-img .img-des 
    {
        padding-top: 1.97rem;

    }

    .content-mobile .big-img .img-des {
        font-size: .34rem;
    }
    .content-mobile .big-img .desc {
        font-size: .28rem;
    }
    .content-mobile .big-img .en-text {
        font-size: .14rem;
    }
    .content-mobile .big-img .line {
        width:.39rem;
        height:.03rem;
        background:rgb(255,255,255);
        margin: 0 auto;
        margin-top: .12rem;
        margin-bottom: .1rem;
    }
    .map-spot {
        width: .09rem;
        height: .09rem;
        border-radius: 50%;
        background-color: #FE8C43;
    }
    .wave {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        position: relative;
    }
    .wave .map-spot {
        position: absolute;
        top:50%;
        margin-top: -.08rem;
        left:50%;
        margin-left: -.08rem;
        /* top: calc(50% - 8px);
        left: calc(50% - 8px); */
        z-index: 10;
    }
    .icp{
      position: absolute;
      bottom: 0;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      margin-bottom: .2rem;
      font-size: .12rem;
      color: white;
      margin-left: -.8rem;
    }
}