/*=================================中小型笔记本或大平板 laptop /*=================================*/
     @media screen and (max-width: 1200px) {
          html {
               --color: #ccc;
               --font-family: 'Arial';
          }

          header {
               height: 60px;
               position: fixed;
               top: 0;
               left: 0;
               z-index: 999;
          }

          header .w1400 {
               height: 100%;
          }

          header .nav {
               display: none;
          }
          .banner{
               margin-top: 60px;
          }
          /*手机导航开始menu*/
          .menu {
               display: block;
               cursor: pointer;
          }

          .menu_down {
               position: fixed;
               left: 0;
               top: 60px;
               z-index: 999999;
               width: 100%;
               padding: 0 0 22px;
               background: #fff;
               border-top: 1px solid #fff;
          }

          .menu_down ul {
               flex-direction: column;
               width: 92%;
               margin: 0 auto;
          }

          .menu_down li>a {
               width: 100%;
               line-height: 3;
               position: relative;
               border-bottom: 1px solid #ccc;
          }

          .menu_down li span {
               color: var(--color);
               position: absolute;
               top: 50%;
               right: 0%;
               transform: translateY(-50%);
          }

          .menu_down li a {
               padding: 0 10px;
               display: block;
               font-size: 16px;
               color: #000;
          }

          .menu_down li .erji {
               display: none;
               /* background: #fab54d; */
               width: 90%;
               margin-left: auto;
               -webkit-transition: all 300ms ease-out;
               -moz-transition: all 300ms ease-out;
               transition: all 300ms ease-out;
          }

          .menu_down li .erji a {
               border-bottom: 1px dashed #ccc;
               line-height: 3;
               font-size: 14px;
          }

          .menu span.icon-bar {
               background: #ccc;
               width: 25px;
               height: 2px;
               display: block;
               -webkit-transition: all 300ms ease-out;
               -moz-transition: all 300ms ease-out;
               transition: all 300ms ease-out;
          }

          .menu .sr-only {
               display: none;
          }

          .menu .icon-bar:nth-child(2) {
               -webkit-transform: rotate(0deg) translate(0, 0);
               -moz-transform: rotate(0deg) translate(0, 0);
               -ms-transform: rotate(0deg) translate(0, 0);
               transform: rotate(0deg) translate(0, 0);
               transform-origin: top left;
          }

          .menu .icon-bar:nth-child(3) {
               margin-top: 6px;
               -webkit-transform: scale(1, 1);
               -moz-transform: scale(1, 1);
               -ms-transform: scale(1, 1);
               transform: scale(1, 1);
               -webkit-transform-origin: center center;
               -moz-transform-origin: center center;
               -ms-transform-origin: center center;
               transform-origin: center center;
          }

          .menu .icon-bar:nth-child(4) {
               margin-top: 6px;
               -webkit-transform: rotate(0deg) translate(0, 0);
               -moz-transform: rotate(0deg) translate(0, 0);
               -ms-transform: rotate(0deg) translate(0, 0);
               transform: rotate(0deg) translate(0, 0);
               transform-origin: top left;
          }

          .xz .icon-bar:nth-child(2) {
               -webkit-transform: rotate(45deg) translate(2px, -3px);
               -moz-transform: rotate(45deg) translate(2px, -3px);
               -ms-transform: rotate(45deg) translate(2px, -3px);
               transform: rotate(45deg) translate(2px, -3px);
               transform-origin: 0 0;
          }

          .xz .icon-bar:nth-child(3) {
               opacity: 0;
          }

          .xz .icon-bar:nth-child(4) {
               -webkit-transform: rotate(-45deg) translate(1px, 2px);
               -moz-transform: rotate(-45deg) translate(1px, 2px);
               -ms-transform: rotate(-45deg) translate(1px, 2px);
               transform: rotate(-45deg) translate(1px, 2px);

          }

          /*手机导航结束*/
          .w1400,.w1500{
               width: 92%;
          }
          .index-page1 .w1400 {
              width: 92%;
          }

          .index-page1 .left,
          .index-page1 .right {
               width: 50%;
          }

          .index-page1 .right {
               margin-top: 20px;
          }

          .index-page2 .w1400 {
               width: 92%;
          }
          .index-page3,.index-page5{
               width: 92%;
          }
          .index-page4 h2,.index-page4>p,.index-page4 ul{
               width: 92%;
               margin: 0 auto;
          }    
          .index-page6 .w1500{
               width: 92%;
          }
          .about-page .top{
               margin-top: 80px;
          }
          .about-page .bottom .video .dialog .w{
               width: 80%;
          }



          footer .top .w1400{
               width: 92%;
          }
          footer .top ul{
               padding: 0;
          }
      }

     /*=================================手机或小平板 phone=============================== */
     @media screen and (max-width: 767px) {
          .menu_down {
               top: 60px;
          }
          .banner{
               height: 100%;
              
          }
          .banner img{
               height: 100%;
               min-height: 200px;
               object-fit: cover;
          }
          .banner .swiper-button-next,
          .banner .swiper-button-prev {
               width: 30px;
               height: 30px;
          }

          .banner .swiper-button-next:after,
          .banner .swiper-button-prev:after {
               font-size: 14px;
          }
          .index-page{
               padding: 30px 0;
          }
          .index-page1{
               padding: 40px 0;
          }

          .index-page1 .left,
          .index-page1 .right {
               width: 100%;
          }

          .index-page1 .w1400,.index-page2 .w1400 {
               flex-direction: column;
               width: 92%;
          }

          .index-page2 .left,
          .index-page2 .right {
               width: 100%;
               padding: 0;
          }

          .index-page2 .left {
               margin-bottom: 20px;
          }
          .index-page2 .left a{
               margin: 0 0 0 auto;
          }
          .index-page3{
               width: 92%;
          }
          .index-page3 ul{
               gap: 10px;
               grid-template-columns: repeat(2,1fr);
          }
          .index-page4 ul{
               margin-top: 20px;
          }
          .index-page4 ul li{
               padding: 0 20px;
          }
          .index-page4 h2{
               margin-bottom: 20px;
          }
          .index-page5 ul{
               gap: 10px;
               grid-template-columns: repeat(2,1fr);
          }
          .index-page5 ul li .img{
               height: 120px;
          }
          .index-page5 ul li h4,.index-page5 ul li p{
               margin-top: 10px;
          }

          .index-page6 ul{
               margin-top: 20px;
               grid-template-columns: repeat(2, 1fr);
               gap: 5px;
          }

          .about-page .top{
               margin-top: 30px;
          }
          .about-page .bottom .video .dialog .w{
               width: 90%;
          }
          .about-page .bottom .video img{
               min-height: 200px;
          }
          .about-page .bottom .video .play-btn{
               top: 50%;
               opacity: 1;
          }
          .about-page .bottom .video:hover img{
               transform: none;
          }

          .about-page2 .bottom ul{
               padding: 10px  0 30px ;
               grid-template-columns: repeat(2, 1fr);
               gap: 10px;

          }
          .product-page{
               padding: 30px 0;
          }
          .product-detail-page{
               padding: 30px 0;
          }
          .product-detail-page .top{
               flex-direction: column;
          }
          .product-detail-page .top .left{
               width: 100%;
          }
          .product-detail-page .top .right{
               width: 100%;
               padding: 0;
               margin-top: 10px;
          }
          .product-detail-page .left .btns{
               display: none;
          }
          .product-detail-page .right .price{
               margin-top: 10px;
          }
          .product-detail-page .bottom{
               margin-top: 30px;
          }
          .product-detail-page .bottom .nav{
               flex-wrap: wrap;
          }
          .product-detail-page .bottom .nav li{
               width: 50%;
          }
          .product-detail-page .bottom .editor{
               padding: 10px;
          }
          .contact-page .info{
               flex-direction: column;
          }
          .contact-page .info .left{
               width: 100%;
          }
          .contact-page .info .right{
               width: 100%;
               margin-top: 20px;
          }
          .contact-page .left>p{
               margin-bottom: 10px;
          }
          .contact-page .left button{
               display: inline;
          }
          .contact-page .left .info-editor{
               margin-top: 20px;
          }
          .message{
               padding: 30px 0 50px;
          }
          .message .item{
               width: 100%;
               margin-bottom: 10px;
          }
          .message .item input{
               margin-top: 5px;
          }
          .message .item textarea{
               margin-top: 5px;
          }
          .message .form button{
               margin: 20px auto 0;
          }
          .join-page .join-page1 .p1{
               margin: 20px 0 30px;
          }
          .join-page .join-page1 .info{
               flex-direction: column;
          }
          .join-page .join-page1 .editor{
               width: 100%;
               margin-right: 0;
          }
          .join-page .join-page1 .info .img1{
               width: 100%;
               margin-top: 10px;
          }
          .join-page .join-page2{
               margin-top: 60px;
          }
          .join-page .join-page2 .editor{
               margin-top: 20px;
          }
          footer .top{
               padding: 10px 0;
          }

          footer .top ul{
               flex-direction: column;
               align-items: baseline;
          }
          footer .top ul li{
               margin: 10px 0;
          }

     }