@media screen and (max-width:768px) {
  :root{
    --head:56px;
  }

  .C-wrap{
    width: 100%;
    padding: 0 20px;
  }

  .sec-label{
    gap: 8px;
    margin-bottom: 8px;
  }

  .sec-label em{
    width: 12px;
    height: 12px;
  }

  .btn{
    height: 48px;
    padding-right: 6px;
  }

  .btn .txt{
    height: 20px;
    padding: 0 20px;
  }

  .btn .txt b{
    height: 20px;
    line-height: 20px;
  }

  .btn i{
    width: 34px;
    height: 34px;
  }

  .btn i:before,
  .btn i:after{
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
  }

  .btn:hover i:before{
    transform: translate(12px, -12px);
  }

  .head1{
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  header.open .head1,
  .open .head1{
    transform: none;
    background: #fff;
  }

  .head1 .C-wrap{
    padding: 0 20px;
  }

  .head1 .logo{
    width: 110px;
    height: 36px;
  }

  .head1 .menu{
    position: fixed;
    left: 0;
    top: var(--head);
    width: 100%;
    height: calc(100vh - var(--head));
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    transition: all ease .3s;
    z-index: 50;
    gap: 0;
    margin-left: 0;
    flex: none;
    padding: 8px 0 40px;
  }

  header.open .menu{
    opacity: 1;
    visibility: visible;
  }

  .head1 .menu .link,
  .head1 .link{
    width: 100%;
    margin-left: 0;
  }

  .head1 .menu .link a,
  .head1 .link a,
  .head1 .link>a{
    display: block;
    padding: 0 20px;
    line-height: 56px;
    color: var(--txt);
    border-bottom: 1px solid rgba(16,50,79,0.1);
  }

  .head1 .menu .link a:after,
  .head1 .link::after,
  .head1 .menu .link a:hover:after,
  .head1 .menu .link.on a:after{
    display: none;
  }

  .head1 .menu .link.on a{
    color: var(--color);
  }

  .head1 .lang{
    color: var(--txt);
  }

  .head1 .lang .now{
    gap: 6px;
  }

  .head1 .lang .now img{
    width: 16px;
    height: 16px;
  }

  .head1 .lang .down{
    padding-top: 16px;
  }

  .head1 .lang .down .list{
    padding: 4px 0;
  }

  .head1 .lang .down .item{
    padding: 6px 10px;
  }

  .head1 .navbar-toggle{
    display: inline-block;
    margin-left: 16px;
  }

  .head1 .navbar-toggle span{
    background-color: var(--txt);
  }

  .home1{
    height: 560px;
  }

  .home1 .txt-box{
    left: 20px;
    right: 20px;
    top: 160px;
    width: auto;
  }

  .home1 .txt{
    gap: 24px;
  }

  .home1 .tit{
    letter-spacing: -0.5px;
    line-height: 1.15;
  }

  .home1 .swiper-button-prev,
  .home1 .swiper-button-next{
    width: 44px;
    height: 44px;
    margin-top: -22px;
    display: none;
  }

  .home1 .swiper-button-prev{
    left: 12px;
  }

  .home1 .swiper-button-next{
    right: 12px;
  }

  .home1 .swiper-button-prev img,
  .home1 .swiper-button-next img{
    width: 24px;
    height: 24px;
  }

  .home1 .swiper-pagination{
    left: 20px;
    bottom: 40px;
  }

  .home1 .swiper-pagination-bullet{
    width: 16px;
    height: 3px;
    margin: 0 6px 0 0 !important;
  }

  .home2{
    padding-top: 50px;
    padding-bottom: 20px;
  }

  .home2 .C-wrap{
    flex-direction: column;
    gap: 32px;
  }

  .home2 .tit{
    line-height: 1.3;
  }

  .home2 .desc{
    margin: 20px 0;
  }

  .home2 .you{
    width: 100%;
    min-height: 0;
  }

  .home2 .you .scaleImg,
  .home2 .you .pic{
    height: 220px;
  }

  .home2 .nums{
    margin-top: 20px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .home2 .nums .item{
    padding: 12px 14px;
    border-radius: 4px;
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .home3{
    margin-top: 0;
    padding: 40px 20px;
  }

  .home3 .list{
    flex-direction: column;
    gap: 24px;
    height: auto;
  }

  .home3 .item{
    gap: 12px;
    width: 100%;
  }

  .home3 .icon{
    width: 40px;
    height: 40px;
  }

  .home4{
    padding: 50px 0;
  }

  .home4 .hd{
    margin-bottom: 32px;
  }

  .home4 .tit{
    margin-top: 8px;
  }

  .home4 .sub{
    margin-top: 8px;
  }

  .home4 .caseSwiper{
    padding-left: 20px;
  }

  .home4 .swiper-slide{
    width: 300px;
    height: 380px;
  }

  .home4 .info{
    left: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    padding: 16px;
  }

  .home4 .ctrl{
    margin-top: 24px;
    gap: 12px;
  }

  .home4 .case-prev,
  .home4 .case-next{
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .home4 .case-prev img,
  .home4 .case-next img{
    width: 16px;
    height: 16px;
  }

  .home5{
    padding: 50px 0;
  }

  .home5 .hd{
    margin-bottom: 32px;
  }

  .home5 .list{
    gap: 20px;
  }

  .home5 .row{
    flex-direction: column;
    gap: 20px;
    height: auto;
  }

  .home5 .item{
    width: 100%;
    height: 320px;
    padding: 24px;
  }

  .home5 .item.big,
  .home5 .item.sm{
    width: 100%;
    flex: none;
  }

  .home5 .tags{
    gap: 12px;
  }

  .home5 .tags .line{
    gap: 10px;
    flex-wrap: wrap;
  }

  .home5 .tag{
    padding: 8px 14px;
    gap: 6px;
  }

  .home5 .tag em{
    width: 14px;
    height: 14px;
  }

  .foot1{
    height: auto;
  }

  .foot1 .foot-bg{
    width: 220px;
    height: 120px;
  }

  .foot1 .foot-inner{
    flex-direction: column;
    height: auto;
    padding: 50px 5% 40px;
    gap: 40px;
  }

  .foot1 .zuo{
    width: 100%;
    gap: 28px;
    padding: 0;
    height: auto;
    display: contents;
  }

  .foot1 .contact{
    gap: 10px;
    order: 1;
    width: 100%;
  }

  .foot1 .addr{
    margin-top: 8px;
  }

  .foot1 .foot-link{
    width: 100%;
    height: auto;
    padding: 0;
    border-left: 0;
    gap: 32px;
    flex-wrap: nowrap;
    order: 2;
  }

  .foot1 .foot-link .a1{
    padding: 6px 0;
    margin-bottom: 10px;
  }

  .foot1 .foot-link .a2{
    padding: 6px 0;
  }

  .foot1 .foot-link .a2:after{
    left: 0;
    right: 0;
  }

  .foot1 .foot-bot{
    order: 3;
    width: 100%;
    /* flex-direction: row; */
    /* align-items: center; */
    justify-content: space-between;
    gap: 12px;
    margin-top: 0;
  }

  .foot1 .social{
    gap: 10px;
    flex-shrink: 0;
  }

  .foot1 .social .item{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 8px;
  }

  .foot1 .social .item img{
    width: 18px;
    height: 18px;
  }

  .foot1 .social .item:nth-child(3) img{
    width: 28px;
    height: 28px;
  }

  .foot1 .foot-copy{
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: flex-start;
  }

  .foot1 .foot-copy .logo{
    width: 16px;
    height: 16px;
  }

  .foot1 .foot-copy .links{
    gap: 8px;
    flex-wrap: wrap;
  }

  .about1{
    height: 420px;
  }

  .about1 .txt-box{
    left: 20px;
    right: 20px;
    top: 50%;
    width: auto;
  }

  .about1 .txt-box > .txt{
    gap: 20px;
  }

  .about1 .tit{
    line-height: 1.2;
  }

  .about2{
    padding-top: 50px;
  }

  .about2 .top{
    flex-direction: column;
    gap: 16px;
  }

  .about2 .top .zuo{
    padding: 0;
    width: 100%;
  }

  .about2 .line{
    width: 100%;
    height: 12px;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
  }

  .about2 .line em{
    width: 12px;
    height: 12px;
  }

  .about2 .line span{
    width: auto;
    height: 2px;
    flex: 1;
    margin: 0;
  }

  .about2 .top .you{
    display: none;
  }

  .about2 .bot{
    padding-bottom: 40px;
    gap: 16px;
  }

  .about2 .since{
    margin-top: 20px;
    line-height: 1;
    font-size: 36px;
  }

  .about2 .since .fbd500{
    font-size: 36px;
  }

  .about2 .desc-box{
    width: 100%;
    margin-left: 0;
    gap: 16px;
  }

  .about2 .desc p + p{
    margin-top: 12px;
  }

  .about3{
    padding: 50px 0;
  }

  .about3:after{
    display: none;
  }

  .about3 .hd{
    margin-bottom: 24px;
  }

  .about3 .list{
    flex-direction: column;
    gap: 20px;
  }

  .about3 .item{
    height: auto;
    overflow: hidden;
  }

  .about3 .item .pic{
    position: relative;
    height: 320px;
  }

  .about3 .item .info{
    position: relative;
    height: auto;
    transform: none;
    background: var(--txt);
  }

  .about3 .item .info-inner{
    padding: 16px;
    gap: 12px;
    height: auto;
    align-items: flex-start;
    text-align: left;
  }

  .about3 .item:nth-child(2) .info-inner,
  .about3 .item:nth-child(3) .info-inner{
    align-items: flex-start;
    text-align: left;
  }

  .about3 .item .hd-txt{
    gap: 6px;
    align-items: flex-start;
  }

  .about3 .item:nth-child(2) .hd-txt,
  .about3 .item:nth-child(3) .hd-txt{
    align-items: flex-start;
  }

  .about3 .item .desc{
    opacity: 1;
    transform: none;
  }

  .about4{
    padding: 50px 0;
  }

  .about4 .hd{
    margin-bottom: 24px;
  }

  .about4 .list{
    flex-direction: column;
    gap: 16px;
  }

  .about4 .item{
    height: auto;
    min-height: 0;
    padding: 28px 20px 24px;
    gap: 20px;
  }

  .about4 .con{
    gap: 10px;
  }

  .about4 .icon{
    width: 48px;
    height: 48px;
  }

  .about4 .icon img{
    width: 24px;
    height: 24px;
  }

  .about5{
    padding: 50px 0;
  }

  .about5 .hd{
    margin-bottom: 24px;
  }

  .about5 .map{
    height: auto;
  }

  .about5 .map-box{
    height: 200px;
  }

  .about5 .map .pic{
    height: 100%;
  }

  .about5 .labels{
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }

  .about5 .labels span{
    position: static;
    padding: 6px 12px;
    background: rgba(255,255,255,0.12);
    line-height: 1.4;
  }

  .about6{
    padding: 50px 0;
  }

  .about6 .hd{
    margin-bottom: 24px;
  }

  .about6 .factorySwiper{
    overflow: hidden;
  }

  .about6 .swiper-slide{
    width: 240px;
  }

  .about6 .swiper-slide .pic{
    height: 160px;
  }

  .about6 .swiper-slide .name{
    margin-top: 10px;
  }

  .about6 .ctrl{
    margin-top: 20px;
    gap: 12px;
  }

  .about6 .factory-prev,
  .about6 .factory-next{
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .about6 .factory-prev img,
  .about6 .factory-next img{
    width: 16px;
    height: 16px;
  }

  .about7{
    padding: 50px 0;
  }

  .about7 .hd{
    margin-bottom: 24px;
  }

  .about7 .honorSwiper{
    overflow: hidden;
  }

  .about7 .swiper-slide{
    width: auto;
  }

  .about7 .swiper-slide .pic{
    aspect-ratio: 3 / 4;
  }

  .about7 .swiper-slide .name{
    padding: 12px 0;
  }

  .about7 .ctrl{
    margin-top: 20px;
    gap: 12px;
  }

  .about7 .honor-prev,
  .about7 .honor-next{
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .about7 .honor-prev img,
  .about7 .honor-next img{
    width: 16px;
    height: 16px;
  }

  .page-banner{
    height: auto;
    min-height: 0;
    padding: 100px 20px 40px;
  }

  .page-banner .txt{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    gap: 12px;
  }

  .page-banner .main{
    gap: 10px;
  }

  .page-banner .tit{
    line-height: 1.25;
  }

  .page-banner .sub{
    line-height: 1.4;
  }

  .page-banner .crumb{
    gap: 6px;
  }

  .page-cta{
    padding: 0 20px;
    margin-bottom: -24px;
  }

  .page-cta-inner{
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 20px;
    gap: 20px;
  }

  .page-cta .con{
    gap: 10px;
    width: 100%;
  }

  .prod-tabs{
    padding-top: 24px;
  }

  .prod-tabs .C-wrap{
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prod-tabs .tabs{
    min-width: max-content;
  }

  .prod-tabs .item{
    height: 44px;
    padding: 0 14px;
  }

  .sol2{
    padding: 40px 0 50px;
  }

  .sol2 .list{
    gap: 20px;
  }

  .sol2 .item,
  .sol2 .item.reserve{
    flex-direction: column-reverse;
    gap: 0;
    min-height: 0;
  }

  .sol2 .item .con{
    padding: 24px 20px;
    gap: 16px;
    width: 100%;
  }

  .sol2 .item .info{
    gap: 10px;
  }

  .sol2 .item .name{
    line-height: 1.3;
  }

  .sol2 .item .desc{
    line-height: 1.5;
  }

  .sol2 .item .pic{
    width: 100%;
    height: 200px;
    align-self: stretch;
  }

  .sold2{
    padding-top: 50px;
  }

  .sold2 .row,
  .sold2 .row.reserve{
    flex-direction: column;
    gap: 28px;
  }

  .sold2 .pic{
    width: 100%;
    height: 260px;
  }

  .sold2 .con{
    gap: 28px;
  }

  .sold2 .hd{
    gap: 16px;
  }

  .sold2 .name-box{
    gap: 16px;
  }

  .sold2 .line{
    width: 48px;
    height: 8px;
  }

  .sold2 .block{
    gap: 16px;
  }

  .sold2 .label{
    gap: 8px;
  }

  .sold2 .label img{
    width: 22px;
    height: 22px;
  }

  .sold2 .adv{
    gap: 16px;
  }

  .sold2 .adv .item{
    gap: 8px;
  }

  .sold2 .adv .item em{
    margin-top: 10px;
  }

  .sold2 .tags{
    gap: 12px;
  }

  .sold2 .tag{
    padding: 14px 16px;
    gap: 8px;
  }

  .sold2 .tag em{
    width: 14px;
    height: 14px;
  }

  .sold3{
    padding-top: 40px;
  }

  .sold3 .C-wrap{
    gap: 24px;
  }

  .sold3 .row,
  .sold3 .row.reserve{
    flex-direction: column;
    gap: 20px;
  }

  .sold3 .pic{
    width: 100%;
    height: 200px;
  }

  .sold4{
    padding-top: 50px;
  }

  .sold4 .sec-tit{
    margin-bottom: 16px;
  }

  .sold4 .sceneSwiper{
    padding-left: 20px;
  }

  .sold4 .ctrl{
    margin-top: 24px;
    margin-bottom: 50px;
    gap: 12px;
  }

  .sold4 .scene-prev,
  .sold4 .scene-next{
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  .sold4 .scene-prev img,
  .sold4 .scene-next img{
    width: 16px;
    height: 16px;
  }

  .sold4 .swiper-slide{
    width: 280px;
  }

  .sold4 .swiper-slide .pic{
    width: 280px;
    height: 168px;
  }

  .sold4 .cap{
    margin-top: 12px;
  }

  .prodd2{
    padding-top: 50px;
  }

  .prodd2 .C-wrap{
    flex-direction: column;
    gap: 32px;
  }

  .prodd2 .left{
    width: 100%;
  }

  .prodd2 .main-pic{
    height: 280px;
  }

  .prodd2 .thumbs{
    gap: 10px;
  }

  .prodd2 .thumb{
    width: 72px;
    height: 72px;
  }

  .prodd2 .thumb-arrow{
    width: 100%;
  }

  .prodd2 .thumb-arrow .arr{
    width: 36px;
    height: 36px;
  }

  .prodd2 .right{
    width: 100%;
    gap: 24px;
  }

  .prodd2 .intro{
    gap: 24px;
  }

  .prodd2 .name-box{
    gap: 12px;
  }

  .prodd2 .line{
    width: 48px;
    height: 8px;
  }

  .prodd2 .params{
    gap: 16px;
  }

  .prodd2 .label img{
    width: 22px;
    height: 22px;
  }

  .prodd2 .td{
    padding: 12px 10px;
  }

  .prodd2 .td.item{
    width: 40%;
  }

  .prodd3{
    padding: 50px 0;
  }

  .prodd3 .C-wrap{
    gap: 20px;
    margin-top: 20px;
  }

  .prodd3 .cards{
    flex-direction: column;
    gap: 16px;
  }

  .prodd3 .card{
    padding: 20px;
    gap: 12px;
  }

  .prodd3 .card .name em{
    width: 14px;
    height: 14px;
  }

  .cont2{
    padding: 50px 0;
  }

  .cont2 .sec-label{
    margin-bottom: 20px;
  }

  .cont2 .panel{
    flex-direction: column;
  }

  .cont2 .form-box{
    padding: 24px 20px 32px;
    width: 100%;
  }

  .cont2 .tip{
    margin-bottom: 28px;
  }

  .cont2 .form{
    gap: 16px;
  }

  .cont2 .row{
    flex-direction: column;
    gap: 16px;
  }

  .cont2 .lab-row{
    gap: 8px;
  }

  .cont2 .lab i{
    font-size: 14px;
  }

  .cont2 .ipt{
    height: 40px;
    padding: 0 14px;
    gap: 10px;
  }

  .cont2 .ipt input,
  .cont2 .ipt textarea{
    font-size: 14px;
  }

  .cont2 .ipt img{
    width: 18px;
    height: 18px;
  }

  .cont2 .ipt.area{
    height: 140px;
    padding: 14px;
  }

  .cont2 .ipt.area img{
    right: 14px;
    top: 14px;
  }

  .cont2 .agree{
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }

  .cont2 .agree span{
    flex: 1;
    min-width: 0;
  }

  .cont2 .agree input{
    width: 16px;
    height: 16px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .cont2 .agree-box .err{
    padding-left: 24px;
  }

  .cont2 .form .btn{
    margin-top: 8px;
  }

  .cont2 .info-box{
    width: 100%;
    padding: 28px 20px;
    gap: 24px;
  }

  .cont2 .info-top{
    gap: 20px;
  }

  .cont2 .info-top .hd{
    gap: 20px;
  }

  .cont2 .info-box .item{
    gap: 12px;
  }

  .cont2 .info-box .k{
    width: 70px;
  }

  .cont2 .mail{
    gap: 10px;
  }

  .cont2 .copy{
    width: 18px;
    height: 18px;
  }

  .cont2 .map{
    width: auto;
    height: 200px;
  }

  .cont3{
    padding: 40px 20px;
  }

  .cont3 .list{
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .cont3 .icon{
    width: 40px;
    height: 40px;
  }

  .legal1{
    padding: 90px 20px 50px;
  }

  .legal1 .tit{
    margin-bottom: 24px;
  }

  .privacy-section{
    margin-bottom: 24px;
  }

  .privacy-section__title{
    margin-bottom: 10px;
    padding-left: 10px;
  }

  .privacy-section__list{
    margin-top: 10px;
    gap: 10px;
  }
}