/*=================================中小型笔记本或大平板 laptop /*=================================*/
     @media screen and (max-width: 1200px) {
          html{
               font-size: 9px;
          }
          /*手机导航开始menu*/
          .menu {
               display: block;
               /* float: right; */
               padding-top: 20px;
               margin-right: 15px;
          }

          .menu_down {
               position: absolute;
               left: 0;
               top: 55px;
               z-index: 999999;
               width: 100%;
               padding-bottom: 22px;
               background: #737f94;
          }

          .menu_down li {
               line-height: 3;
               text-align: center;
               /*padding-left: 4rem;*/
               border-bottom: 1px solid #fff;
          }

          .menu_down li a {

               display: block;
               font-size: 15px;
               color: #fff;
          }

          .menu span.icon-bar {
               background: #fff;
               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);

          }

          /*手机导航结束*/

          nav {
               display: none;
          }

          .index-banner {
               margin-top: 115px;
          }
          .index-page{
               margin: 20px auto;
          }
          .main{
               margin: 20px auto;
          }
          header{
               padding: 0;
          }
          header .container {
               width: 100%;
               height: 100%;
               padding:0 2%;
               flex-direction: row;
               flex-wrap: wrap;
               justify-content:space-between;
               align-items: center;
          }

          header .logo {
               order: 2;
               width: 30%;
               margin: 0;
               padding: 0 10px;
          }

          header .container>.right {
               order: 3;
               flex: 1;
               margin: 0;
               padding: 10px 0;
               justify-content: end;
               height: 60px;
          }
          header .container>.right .account{
               padding:0 20px;
               margin: 0;
               justify-content: space-between;
               white-space: nowrap;
          }
     
          header .container>.right .account .login{
               left: auto;
               right: 0;
               transform:translateX(0)
          }
          header .container>.right .account .login-form{
               font-size: 1.4rem;
          }
		  header .container>.right .account .login-form a:before{
				width:12px;
				height:12px;
		   }
          header .container>.right .cart {
               padding: 0 20px; 
          }
          header .container>.right .cart .left{
               margin: 0;
          }
          header .container>.right .cart .right{
               display: none;
          }
          header .search {
               order: 4;
               width: 100%;
               margin: 0;
               padding: 0;
               overflow: hidden;
               flex: none;
               margin-bottom: 10px;
          }
          header .search .search-bar{
               display: none;
          }
          .menu{
               order: 1;
               background:var(--main-color);
               padding: 10px 0;
          }
          .menu span.icon-bar{
               margin: 0 auto;
          }
          .menu_down{
               position: fixed;
               top: 59px;
               background: var(--main-color);
          }
          .menu_down li dl{
               background: #233073;
          }
          .menu_down li dl dd{
               border:1px  dashed #233073;
          }
          .menu_down li .sanji{
               background: #293885;
          }
          .menu_down li .sanji li{
               border: 0;
          }
     
          .menu_down li dl{
                display: none; 
          }
          .menu_down li dl .sanji{
               display: none;
          }

          .page{
               padding-top: 115px;
          }




          .index-page3 ul {
               display: flex;
               flex-direction: column;
          }
   
          .index-page4 .right .swiper .item h2{
               height: 60px;
               margin: 10px 0;
          }
          .index-page4 .right .swiper .item p{
               margin: 10px 0;
          }
          .index-page2 .top{
               width: 100%;
               margin:0 auto 20px;
          }
          .index-page2 ul{
               width: 96%;
               flex-wrap: wrap;
          }
          .cart-page table td:first-child{
               width: 100%;
          }
          .cart-page table td{
               padding: 20px 10px;
          }

     }




















     /*=================================手机或小平板 phone=============================== */
     @media screen and (max-width: 767px) {
          html{
               font-size: 8px;
          }
          .index-page3 ul li{
               width: 100%;
               height: auto;
          }
          .index-page4{
               display: flex;
               flex-direction: column;
          }
          .index-page4 .left h2{

               margin-bottom: 10px;
          }
          .index-page4 .left a{
               margin-top: 10px;
               padding: 10px 20px;
          }
          .index-page4 .right{
               position: inherit;
               width: 96%;
               margin: 10px auto 0;
          }
          .index-page4 .right .swiper .item{
               padding: 10px;
          }
          .index-page4 .right .prev, .index-page4 .right .next{
               width: 36px;
               height: 36px;
          }
          .index-page4 .right .prev{
               left: 0;
          }
          .index-page4 .right .next{
               right: 0;
          }
          .index-page4 .right .prev img{
               padding: 20%;
          }
          .index-page4 .right .next img{
               padding: 20%;
          }
          .index-page4 .right .swiper .item h2{
               margin: 10px 0;
               height: 100px;
          }
          .main .index-page1 li{
               width: 100%;
               margin-bottom: 20px;
          }
          .index-page2 ul li{
               width: 33.3%;
          }
          .index-page2 ul li .icon-right {
              display: none;
          }

          .index-page3{
               display: none;
          }
          .index-page8 .list{
               flex-wrap: wrap;
          }
          .index-page8 .item1 .list li{
               width: 33.3%;
               padding: 10px 0;
               margin-bottom: 10px;
          }

          .index-page8 .item1{
               margin-bottom: 0;
          }

          .index-page9 .prev, .index-page9 .next{
               width: 36px;
               height: 36px;
          }
          .index-page9 .prev{
               left: 0;
          }
          .index-page9 .next{
               right: 0;
          }
          .index-page9 .prev img{
               padding: 20%;
          }
          .index-page9 .next img{
               padding: 20%;
          }

          .product{
               flex-direction: column;
               margin: 0 auto 25px;
          }
          .product .side-bar{
               width: 100%;
               padding: 20px;
               margin-bottom: 10px;
          }
          .product .side-bar .price{
               padding-top: 10px;
          }
          .product .product-container>h2 {
               margin: 20px 20px 0;
          }
          .product .product-container .toolbar{
               padding: 10px;
          }
          .product .product-container .product-list li{
               width: 50%;
               border: 0;
          }
          .product .product-container .product-list li+li{
               border-left: 1px solid #67727933;
          }
          .page-nav{
               margin: 15px auto;
          }
          .page-nav ul a{
               font-size: 1.5rem;
          }
          .page-nav ul li{
               font-size: 1.5rem;
          }
          .page-nav ul li span{
               margin:  0 3px;
          }
          .product .side-bar .availability{
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
          }
          .product .side-bar .availability li{
               width: 50%;
          }
          .product-list h2{
              /*  height: 100px; */
          }
          .index-page9 .swiper .swiper-slide h2{
               height: 100px;
          }
          .product-info .top{
               flex-direction: column;
          }
          .product-info .top .card{
               width: 96%;
               margin: 0 auto;
          }
          .product-info .top .card .imgs{
               flex-direction: column-reverse;
          }
          .product-info .product-swiper{
               width: 100%;
          }
          .product-info .product-swiper2{
             width: 100%;
             height: auto;
          }
          .product-info .product-swiper2 .swiper-wrapper{
               flex-direction: row;
               min-height: 50px;
          }
          .product-info .product-swiper2 .swiper-wrapper .swiper-slide{
               width: 25%;
			   height:100%;
          }
          .product-info .top .card .description{
               margin: 20px 0;
          }
          .product-info .top .base-info{
               width: 96%;
               margin:  0 auto;
          }
          .product-info .base-info .discount{
               margin: 20px 0;
          }
          .product-info .base-info .top{
               padding-bottom: 10px;
          }
          .swatch-title{
               margin: 20px 0;
          }
          .swatch-list label{
               padding: 10px;
          }
          .swatch-list label+label{
               margin-left: 10px;
               margin-bottom: 10px;
          }
          .product-info-form .price,.product-info-form .quantity{
               margin: 20px 0;
          }
          .product-info-form .index-button{
               width: 100%;
          }
          .product-info .container{
               width: 96%;
               margin: 30px auto;
          }
       
          .product-info .container .tabs .tab{
               padding: 10px;
               display: flex;
                align-items: center;
                 justify-content: center;
          }
          .product-info .container .editor{
               padding: 20px;
          }
          .tip{
               width: 100%;
               margin: 0px auto;
               padding:15px 10% ;
          }

          .index-page{
               margin: 10px auto;
          }
          .cart-page .title{
               margin-bottom: 10px;
          }
          .cart-page table thead{
               display: none;
          }
          .cart-page table tr{
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
          }
          .cart-page table td{
               padding: 10px 10px 0 10px;
          }
          .cart-page table td:first-child{
               width: 100%;
          }
          .cart-page table td:first-child img{
               width: 30%;
               margin: 0;
               padding: 0 10px ;
          }
          .cart-page table td:first-child .info .p2 .sp1{
               padding: 0;
          }
          .cart-page table td:nth-child(2){
               margin-left: calc(30% + 13px);
               display: flex;
               padding:10px 0;
          }
          .cart-page table td.count{
               display: none;
          }
          .cart-page .num-count{
               margin-bottom: 0;
          }
          .cart-page table .remove-btn{
               margin: 0 20px;
               font-size: 1.6rem;
          }
          .num-count button{
               width: 36px;
               height: 36px;
          }
          .num-count input[type="number"]{
               width: 60px;
               height: 36px;
          }
          .cart-page .cart-total{
               flex-direction: column;
               margin-top: 20px;
               align-items: end;
          }
          .cart-page .cart-total p{
               line-height: 2;
               margin-right: 10px;
          }
          .cart-page .cart-total .cart-total-info{
               flex-direction: column;
               margin-bottom: 10px;
               text-align: end;
          }
          .cartList-page{
               flex-direction: column;
          }
          .cartList-page .side-bar{
               width: 100%;
               margin: 0 auto 20px;
               padding:10px 20px;
          }
          .cartList-page .cartList-container h2{
               padding: 10px 20px ;
          }
          .cartList-page .cartList-container .order-list{
               padding: 0;
          }
          .cartList-page .cartList-container .order-list .item{
               margin: 0;
          }
          .cartList-page .cartList-container .order-list table{
               width: 100%;
          }
          .cartList-page .cartList-container .order-list table thead th{
               display: none;
          }
          .cartList-page .cartList-container .order-list table thead th:first-child{
               display: block;
               width: 100%;   
               border: 0;
          }
          .cartList-page .cartList-container .order-list table th{
               min-width: auto;
               padding: 10px;
          }
          .cartList-page .cartList-container .order-list table tr{
               flex-direction: row;
               flex-wrap: wrap;
               border-bottom: 1px solid #67727933;
               padding: 10px 0;
          }
          .cartList-page .cartList-container .order-list table td{
               min-width: auto;
               border: 0;
               padding: 10px;
               display: flex;
               flex-direction: row;
               
          }
          .cartList-page .cartList-container .order-list table tbody td:first-child img{
               width: 100px;
               height: 100px;
          }
          .cartList-page .cartList-container .order-list table tbody td:first-child .name{
               margin: 10px 0 ;
               line-height: 2.4rem;
               height: 7.2rem;
                overflow : hidden;
	          text-overflow: ellipsis;
	          display: -webkit-box;
	          -webkit-line-clamp: 3;
	          -webkit-box-orient: vertical;
          }
          .cartList-page .cartList-container .order-list table td:nth-child(2){
               margin-left: 120px;
               flex: 1;
               margin-top: -40px;
               white-space: nowrap;
          }
          .cartList-page .cartList-container .order-list table tbody td .p1{
               margin-right: 10px;
          }
          .cartList-page .cartList-container .order-list table td:nth-child(3){
               flex: 1;
               margin-top: -40px;
          }
          .cartList-page .cartList-container .order-list table td:nth-child(4){
              display: none;
          }
          .cartList-page .cartList-container .item .form{
               padding: 10px 10px 20px;
          }
          .cartList-page .cartList-container .item .form .order-info{
               flex-direction: column;
               flex: 1;
               line-height: 1.6;

          }
          .news .index-page2{
               margin: 15px auto;
          }
          .index-page2 .top>.right .icon-right{
               width: 16px;
               opacity: 1;
               margin-left: 10px;
          }
          .news .news-list li{
               width: 49%;
               margin-bottom: 25px;
          }
          .news .news-list li img{
               width: 100%;
               height: auto;
               object-fit: contain;
          }
          .news .news-list li h2{
               margin: 10px 0;
               font-size: 2rem;
               height: 6.6rem;
          }
          .news-page .container{
               flex-direction: column;
          }
          .news-page .container>.right{
               margin: 0;
               width: 100%;
               max-width: none;
          }
          .news-page .news-info{
               width: 100%;
               margin: 0 auto;
               /* padding:0 20px ; */
          }
          .news-page .news-info .editor {
               margin: 20px auto;
          }
          .news-page .message form .index-button{
               margin: 0 auto 20px;
               width: 60%;
          }
          .news-page .top{
                margin-bottom: 20px;
          }
          .news-page .top h2{
               font-size: 2.6rem;
          }
          .news-page .news-info-nav{
               margin: 20px 0;
               padding: 20px 0 ;
          }
          .contact-page{
               width: 96%;
               margin: 20px auto;
          }
          .contact-page>.editor{
               width: 85%;
               margin: 40px auto ;
               word-break: break-all;
               font-weight: 600;
          }
          .contact-page>.editor p{
               margin-bottom: 10px;
               font-size: 1.6rem;
          }
          .common-page h2{
               margin: 20px auto;
          }
          .common-page .editor{
               width: 85%;
               margin: 0 auto;
          }
          .common-page-footer {
               margin: 40px 0;
          }

          .common-page-footer .container{
               width: 85%;
          }









          footer .top{
               margin: 0;
               padding: 0;
          }
          footer .top ul{
               flex-wrap: wrap;
          }
          footer .top ul li{
               width: 50%;
               padding:  20px;
          }
          footer .center .list1{
               flex-direction: column;
               width: 96%;
               margin: 0 auto;
          }
          footer .center{
               margin: 20px 0 0;
          }
          
          footer .center .list1 li{
               width: 100%;
               padding: 0;
               margin: 0;
          }
          footer .center .list1>li:first-child{
               width: 100%;
               margin: 0 auto 20px;
          }
          footer .center .list1>li{
               margin-bottom: 20px;
          }
		  footer .center .list1>li:nth-child(3){
			  width: 100%;
		  }
          footer .center .list1>li .title{
               text-align: center;
               margin-bottom: 10px;
          }
          footer .center .list2{
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;
          }
          footer .center .list2>li{
               width:50% ;
               padding: 0 10px;
               white-space: nowrap;
          }
          footer .center .list1>li:nth-child(4) p{
               text-align: center;
          }
          footer .center .list1 .form{
               flex-direction: row;
               margin-top: 10px;
               height: 50px;
               width: 100%;
          }
          footer .center .list1 .form .index-input{
               width: 100%;
          }
          footer .center .list1 .form button{
               margin: 0;
          }
          footer .bottom{
               text-align: center;
               margin: 0 0 10px;
          }
          footer .bottom .icon-list{
               justify-content: center;
               margin-bottom: 10px;
          }
     }