@media screen and (max-width: 1600px) {
     .w1600,.w1400{
          width: 96%;
     }

}


@media screen and (max-width: 1400px){
  
     .page .r ul{
          grid-template-columns: repeat(6, 1fr);
     }
    
     
}

/*=================================中小型笔记本或大平板 laptop /*=================================*/
@media screen and (max-width: 1200px) {


}

/*=================================手机或小平板 phone=============================== */
@media screen and (max-width: 767px) {
    
     header{
          height: 80px;
     }
   
     header .header-right{
          gap: 10px;
     }
     header .header-right a{
          font-size: 16px;
          gap: 6px;
     }
     header .header-right a .icon{
          font-size: 20px;
     }
     header .logo img{
          width: 150px;
          height: auto;
     }
     .page{
          margin-top: 80px;
     }
     .page .l{
          width: 100%;
          background: #fff;
          position: fixed;
          top: 80px;
          height: auto;
          box-shadow: none;
          overflow:visible;
          z-index: 10;
     }
     .phone-nav{
          display: block;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 92%;
          height: 50px;
          border: 1px solid #ccc;
          margin: 10px auto ;
          padding: 0 10px;
     }
     .phone-nav span{
          font-size: 20px;
          color: var(--color);
     }
     .phone-nav .icon{
          font-size: 24px;
          color: var(--color);
     }
     .phone-nav.open>.icon{
          transform: rotate(180deg);
     }

     .page .l>ul{
          display: none;
          background: #fff;
          z-index: 10;
          position: absolute;
          top: 65px;
          left: 0;
          width: 100%;
     }


     .page .r{
          width: 100%;
          margin: 160px 0 0;
     }
     .page .r .item h3{
          padding: 20px 0;
     }
     .page .r ul{
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
     }


     .login-page{
          background: url(../images/login_bg_phone.jpg) no-repeat;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding-bottom: 50px;
     }
     .login-page .form{
          width: 92%;
          position: static;
          transform: none;
          padding: 30px 40px;

     }
     .login-page .phone-img{
          display: block;
          width: 90%;
          margin-bottom: 10px;
      }


	    .dialog .w{
          width: 92%;
      }
      .dialog .w .icon{
          right: 0;
      }








}