@media screen and (max-width:1200px) {
  header .menu {
    position: fixed;
    left: -100%;
    top: 0;
    width: 80%;
    height: 100vh;
    background: #fff;
    display: block;
    opacity: 0;
    overflow: auto;
    transition: all ease .3s;
    z-index: 50;
    color: #333;
  }

  header.open .menu {
    left: 0;
    opacity: 1;
  }

  header .menu::before {
    content: '';
    width: 20vw;
    display: block;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: -20vw;
    top: 0;
    z-index: 50;
    transition: all ease .3s;
  }

  header.open .menu::before {
    left: 80%;
  }

  header .link {
    width: 100%;
    margin-left: 0;
  }

  header .link>a {
    display: block;
    border-bottom: 1px solid #ddd;
    line-height: 50px;
  }

  header .link a {
    padding: 0 20px;
  }

  header .link::after {
    display: none;
    width: 52px;
    height: 10px;
    left: 50%;
    top: 100%;
    margin-top: 14px;
    transform: translate(-50%, -50%) scale(0);
  }

  header .link:hover::after,
  header .link.on::after {
    transform: translate(-50%, 0) scale(1);
  }

  header .down {
    min-width: 80px;
    overflow: hidden;
    padding: 0;
  }

  header .link .down {
    left: 50%;
    top: 100%;
    margin-top: 0;
    transform: translate(0, 0);
    min-width: 160px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    position: static;
    opacity: 1;
    width: 100%;
    pointer-events: visible;
    border-bottom: 1px solid #ddd;
    display: none;
    background: #ccc;
  }

  header .link .down::before {
    width: 100%;
    height: 40px;
    bottom: 100%;
    display: none;
  }

  header .link .down a {
    padding: 10px 30px;
    text-align: left;
    font-size: 14px;
    color: #666;
  }

  header .link .down a:not(:last-child) {
    border-bottom: none;
  }

  header .link .down-jt {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    background: url('/img/icon-jia.svg') no-repeat center/15px;
  }


  header .link.on .down-jt {
    background: url('/img/icon-jian.svg') no-repeat center/15px;
  }

  .home::before {
    display: none;
  }

  :root {
    --head: 34px;
  }

  svg {
    width: 100%;
    height: 100%;
  }

  .C-btn {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 7px 10px;
    border-radius: 6px;
  }

  .C-btn .icon {
    width: 7px;
    height: 7px;
    margin-left: 6px;
  }

  .C-more {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--color);
  }

  .C-more .icon {
    width: 7px;
    height: 7px;
    margin-left: 13px;
  }

  /* -----------------------------------------head,foot-------------------------------------- */
  .head1 {
    width: 100%;
  }

  .scroll .head1 {
    backdrop-filter: none;
  }

  .blackHead .head1 {
    backdrop-filter: none;
  }

  .head1 .logo {
    width: 101px;
  }

  .head1 .menu {
    gap: 30px;
    height: 100%;
  }

  .head1 .link {
    height: auto;
  }

  .head1 .link>a {
    height: 100%;
    display: flex;
    padding: 0 20px;
  }

  .head1 .contact-btn {
    margin-left: 10px;
    border-radius: 4px;
    padding: 5px 10px;
  }

  .head1 .right {
    margin-left: 27px;
  }

  .foot1 {
    padding: 13px 0 80px;
    width: 100%;
    background: url('/img/foot1-5.svg') no-repeat 97% 100%/88px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  }

  .foot1 .logo {
    width: 146px;
    margin-bottom: 13px;
  }

  .foot1 .zuo {
    width: 100%;
  }

  .foot1 .info .icon {
    width: 18px;
    margin-right: 6px;
  }

  .foot1 .info a {
    margin-bottom: 10px;
  }

  .foot1 .info .whatsapp {
    width: 19px;
    height: 19px;
    right: 10px;
    top: 1px;
  }

  .foot-link {
    gap: 27px;
    display: none;
  }

  .foot-link ul a {
    margin-bottom: 18px;
  }

  .foot1 form .lab {
    width: 100%;
    margin-top: 7px;
    border-radius: 10px;
    padding: 1px;
  }

  .foot1 form .lab input {
    padding: 8px 10px;
    flex: 1;
    height: 37px;
    border-radius: 10px;
  }

  .foot1 form .lab button {
    padding: 0 12px;
    height: 35px;
    border-radius: 10px;
  }

  .foot2 {
    padding: 10px 0 20px;
  }

  .foot2 .share .ev {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: 10px;
  }

  .foot2 .share .ev .icon {
    width: 18px;
  }

  .foot2 .you {
    gap: 15px;
    width: 100%;
    margin-top: 20px;
  }

  .foot3 {
    width: 44px;
    right: 25px;
    bottom: 44px;
  }

  /* -----------------------------------------首页-------------------------------------- */
  .home1 .bg {
    height: 100%;
  }

  .home1 .earth {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    width: 642px;
    filter: blur(13px);
  }

  .home1 .intr {
    width: 100%;
    height: 100%;
    padding-bottom: 15vh;
  }

  .home1 .intr .pic {
    width: 197px;
  }

  .home1 .intr .t1 {
    font-size: 25px;
    margin: 45px 0 30px;
  }

  .home1 .icon {
    width: 120px;
  }

  .home2 .zuo {
    width: 100%;
    margin-left: 5%;
    margin-right: 5%;
    padding: 5% 0;
  }

  .home2 .zuo .t1 {
    margin-bottom: 32px;
  }

  .home2 .zuo .t2 {
    margin-top: 55px;
  }

  .home2 .you {
    flex: 1;
  }

  .home2 .you .warpper {
    gap: 21px;
  }

  .home2 .you .slide {
    width: 90vw;
  }

  .home2 .you .slide .pic {
    height: 100%;
  }

  .home2 .you .slide img {
    width: 100%;
    height: 100%;
  }

  .home2 .you .slide video {
    width: 100%;
    height: 100%;
  }

  .home2 .playbtn {
    width: 54px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .home3 {
    /* padding: 0 55px 57px; */
    padding: 0 55px 15vh;
  }

  .home3 .t2 {
    margin-bottom: 22px;
  }

  .home3 .pic-list {
    width: 100%;
    height: 100%;
  }

  .home3 .pic-list .pic {
    border-radius: 10px;
    width: 197px;
  }

  .home3 .cur {
    width: 150px;
  }

  .home4 .t1 {
    letter-spacing: -0.412px;
  }

  .home4 .list {
    width: 100%;
    height: 100%;
  }

  .home4 .item {
    left: 100%;
    display: flex;
  }

  .home4 .item .intr {
    flex: 1;
    padding: 0 15px 54px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .home4 .item .num {
    font-size: 100px;
    margin-bottom: 20px;
  }

  .home4 .item .t2 {
    flex: none;
    width: 100%;
  }

  .home4 .item .t2::before {
    width: 180px;
    height: 1px;
  }

  .home4 .item .pic {
    width: 100px;
    margin-bottom: 45px;
  }

  .home4 .item .t3 {
    width: 100%;
  }

  .home4 .item .zhanwei {
    height: 100%;
  }

  .home4 .item1 .zhanwei {
    width: calc(90px * 0);
    width: 0;
  }

  .home4 .item2 .zhanwei {
    width: calc(90px * 1);
    width: 0;
  }

  .home4 .item3 .zhanwei {
    width: calc(90px * 2);
    width: 0;
  }

  .home4 .item4 .zhanwei {
    width: calc(90px * 3);
    width: 0;
  }

  .home4 .item5 .zhanwei {
    width: calc(90px * 4);
    width: 0;
  }

  .home4 .item5 .intr {
    padding-left: 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .home4 .scrollTip {
    bottom: 50px;
  }

  .home5 {
    padding: 60px 0 65px;
  }

  .home5 .list {
    gap: 5px;
    margin: 27px auto 0;
  }

  .home5 .item {
    flex: none;
    width: 100%;
    height: 338px;
    border-radius: 10px;
    transition: -ms-flex .6s, -ms-flex .6s, flex .6s;
  }

  .home5 .item.on {
    flex: none;
  }

  .home5 .item .intr {
    width: 100%;
    height: 100%;
  }

  .home5 .item .intr .t1 {
    width: 100%;
    bottom: 23px;
  }

  .home5 .item .intr .t2 {
    margin-top: 9px;
  }

  .home5 .item .intr .down {
    width: 282px;
    padding: 22px;
    transform: translateY(25px);
  }

  .home5 .item .intr::after {
    width: 100%;
    height: 95px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
  }

  .home5 .item.on .intr .t1 {
    transform: translate(-25px, -25px);
  }

  .home6 {
    */ padding: 60px 0;
  }

  .home6 .sticky-wrap {
    padding: 60px 0 0;
  }

  .home6 .k1 {
    margin-bottom: 32px;
  }

  .home6 .item {
    border-radius: 13px;
    padding: 30px 30px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    --diff: 0px;
    height: 95vh;
    overflow: auto;
  }

  .home6 .item .zuo {
    width: 360px;
    align-items: flex-start;
  }

  .home6 .item .zuo .t2 {
    margin-top: 6px;
  }

  .home6 .item .zuo .t3 {
    margin-top: 16px;
    margin-bottom: 25px;
  }

  .home6 .item .zuo .t4 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
  }

  .home6 .item .you .pic {
    width: 154px;
    margin-top: 20px;
  }

  .home7 {
    padding: 60px 0 55px;
  }

  .home7 .k2 {
    margin: 2px 0 30px;
  }

  .home7 .list {
    gap: 20px;
  }

  .home7 .item {
    border-radius: 10px;
    padding: 10px;
  }

  .home7 .item .pic {
    border-radius: 10px;
    width: 132px;
  }

  .home7 .item .intr {
    flex: 1;
    padding: 0 15px 0 15px;
  }

  .home7 .item .intr .t1::after {
    width: 58px;
    height: 1px;
    margin: 5px 0 19px;
  }

  .home7 .item .intr .t2 {
    letter-spacing: -0.4px;
  }

  .home8 .t1 {
    margin-bottom: 17px;
  }

  .home8 .bg {
    width: 100%;
    height: 100%;
  }

  .home8 .earth {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 367px;
  }

  .home8 .intr {
    padding: 128px 0 89px;
  }

  .home9 {
    padding: 60px 0 40px;
  }

  .home9 .swiper {
    margin-top: 31px;
    padding-bottom: 44px;
  }

  .home9 .swiper-slide {
    width: 227px;
    padding: 10px 10px 17px;
    border-radius: 10px;
  }

  .home9 .swiper-slide .bg {
    width: 206px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .home9 .swiper-slide .t2 {
    margin-top: 6px;
    margin-bottom: 9px;
  }

  .home9 .swiper-pagination {
    bottom: 0px;
  }

  .home9 .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    border-radius: 10px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
  }

  .home9 .swiper-pagination-bullet::after {
    width: 100%;
    height: 100%;
  }

  .home9 .swiper-pagination-bullet-active {
    width: 24px;
  }

  /* work页面样式 */
  .work1 {
    padding: 0 5%;
  }

  .work1 .left {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 80px 0
  }

  .work1 .right {
    width: 100%;
  }

  .work1 .t1 {
    margin-bottom: 20px;
  }

  .work1 .t2 {
    width: 100%;
    margin-bottom: 20px;
  }

  .faq1 {
    padding: 154px 0 60px;
  }

  .faq1 .title .t2 {
    width: 100%;
    margin-top: 20px;
  }

  .faq1 .main {
    margin: 40px 0 0 auto;
    width: 100%;
  }

  .faq1 .main .tabs {
    margin-bottom: 16px;
    gap: 15px;
  }

  .faq1 .list .item {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .faq1 .list .item::after {
    width: 28px;
    height: 28px;
  }

  .faq1 .list .item .t1 {
    padding-right: 33px;
  }

  .faq1 .list .item .down {
    padding-top: 12px;
  }

  .faq1 .list .item .jt {
    margin: 5px;
    width: 14px;
  }

  /* ----------------------------------------- Contact Us Page -------------------------------------- */
  .contact-top {
    height: 450px;
  }

  .contact-top .bg {
    width: 100%;
    height: 100%;
  }

  .contact-top .bg img {
    width: 100%;
    height: 100%;
  }

  .contact-top .overlay {
    width: 100%;
    height: 100%;
  }

  .contact-top .content-wrap {
    width: 100%;
    padding: 0 0 40px;
  }

  .contact-top .intro-text {
    max-width: 100%;
  }

  .contact-top .intro-text h1 {
    margin-bottom: 20px;
  }

  /* 联系方式卡片区域 */
  .ct3 {
    padding: 10px 0 60px;
  }

  .ct3 .list {
    gap: 20px;
  }

  .ct3 .item {
    border-radius: 10px;
  }

  .ct3 .item .intr {
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .ct3 .item .zuo .icon {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .ct3 .item .zuo .icon img {
    width: 17px;
  }

  .ct3 .item .you {
    flex: 1;
    padding-left: 10px;
  }

  .ct3 .item .you .t1 {
    margin: 3px 0 15px;
  }

  .ct3 .item .you .iconlist {
    gap: 10px;
  }

  .ct3 .item .you .iconlist .icon {
    width: 20px;
  }

  /*  */
  .work2 {
    padding: 60px 30px;
  }

  .work2 .k1 {
    margin-bottom: 60px;
  }

  .work2 .steps-section:nth-last-child(n+1) {
    margin-bottom: 50px;
  }

  .work2 .steps-section .zuo {
    width: 100%;
  }

  .work2 .steps-section .zuo .t2 {
    margin: 20px 0 60px;
  }

  .work2 .steps-section .you {
    flex: none;
    width: 100%;
    gap: 10px;
    height: auto;
    margin: 20px 0 0;
  }

  .work2 .step-item {
    border-radius: 10px;
    flex: none;
    width: 100%;
    height: 383px;
  }

  .work2 .step-item.on {
    flex: none;
    width: 100%;
  }

  .work2 .step-item .t2 {
    margin-top: 4px;
  }

  .work2 .step-item.on .t2 {
    font-size: 21px;
  }

  .work2 .step-item .icon {
    width: 20px;
  }

  .work2 .step-item .top {
    width: 100%;
    padding: 12px 12px 28px;
  }

  .work2 .step-item .top::before {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
  }

  .work2 .step-item .bottom {
    padding: 12px 12px 16px;
    backdrop-filter: blur(3px);
    width: 100%;
    border-radius: 10px;
  }

  .work2 .step-item.on .bottom {
    transition: all ease 0.3s;
  }

  /*-----------------------------------------------about----------------------------------------------------*/
  .about2 {
    width: 100%;
  }

  .about2 .container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 35px;
    width: 100%;
    flex-wrap: wrap;
  }

  .about2 .image-wrapper {
    width: 100%;
    height: auto;
  }

  .about2 .image-wrapper img {
    width: 100%;
    height: 100%;
  }

  .about2 .text-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 0 20px
  }

  .about2 .quote {
    width: 100%;
  }

  .about2 .description {
    width: 100%;
  }

  .about3 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    padding: 60px 0;
  }

  .about3 .top-section {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
  }

  .about3 .title-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .about3 .main-title {
    width: 100%;
  }

  .about3 .description {
    width: 100%;
  }

  .about3 .bottom-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 40px;
  }

  .about3 .promise-title {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
  }

  .about3 .promise-title .icon {
    width: 31px;
    height: 19px;
  }

  .about3 .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .about3 .list .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px;
    width: 100%;
    height: 160px;
  }

  .about3 .list .item .item-title {
    width: 100%;
  }

  .about3 .list .item .item-desc {
    width: 100%;
  }

  /* about4板块样式 */
  .about4 {
    padding: 60px 0 70px;
  }

  .about4 .C-wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .about4 .title-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 60px;
  }

  .about4 .title-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 60px;
  }

  .about4 .title-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .about4 .accordion-list {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
  }

  .about4 .accordion-item {
    display: flex;
    height: auto;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    flex: none;
  }

  .about4 .accordion-item .item-header {
    padding: 20px 12px;
    width: 39px;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .about4 .content-wrapper {
    width: 100%;
  }

  .about4 .accordion-item.expanded {
    flex: none;
    flex-direction: row;
  }

  .about4 .accordion-item .item-title {
    transform: rotate(-90deg) translate(-20px, 0);
    line-height: 15px;
  }

  .about4 .accordion-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    padding: 20px;
  }

  .about4 .content-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-bottom: 20px;
  }

  .about4 .pic {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .about4 .pic img {
    width: 100%;
    height: 100%;
  }

  .about5 {
    width: 100%;
    padding: 0 0 93px;
  }

  .about5 .title {
    letter-spacing: -0.64%;
    margin-bottom: 40px;
  }

  .about5 .comparison-table {
    width: 100%;
    max-width: 100%;
  }

  .about5 .table-row {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .about5 .table-col {
    word-break: break-all;
    display: flex;
    padding: 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  }

  .about5 .col-feature {
    width: 190px;
    justify-content: flex-start;
  }

  .about5 .col-option {
    width: 177px;
  }

  .about5 .table-header:nth-child(1) .col-option.lever {
    border-radius: 10px 10px 0 0;
  }

  .about5 .table-row:nth-last-child(1) .col-option.lever {
    border-radius: 0 0 10px 10px;
  }

  .about5 .col-feature .text,
  .about5 .col-option .text {
    letter-spacing: -2.06%;
  }

  .about5 .check-icon,
  .about5 .cross-icon {
    width: 15px;
    height: 10px;
  }

  .about5 .table-header:nth-child(1) .table-col-hover {
    border-radius: 10px 10px 0 0;
  }

  .about5 .table-row:nth-last-child(1) .table-col-hover {
    border-radius: 0 0 10px 10px;
  }

  .about5 .table-header .col-option:first-child {
    border-radius: 10px 10px 0 0;
  }

  .about5 .table-row:last-child .col-option:first-child {
    border-radius: 0 0 10px 10px;
  }

  /*-----------------------------------------------product----------------------------------------------------*/
  /* ========== Products Page ========== */
  .product2 {
    width: 100%;
    padding: 60px 0 0;
  }

  .product2 .C-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .product2 .text-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .product2 .description p {
    margin: 0 0 10px 0;
  }

  .product2 .hero-image {
    width: 100%;
    height: 281px;
  }

  .product2 .hero-image img {
    width: 100%;
    height: 100%;
  }

  /* ========== Product3 Section ========== */
  .product3 {
    padding: 60px 0 0;
  }

  .product-category {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
  }

  .category-header {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .main-category-title {
    margin-bottom: 20px;
  }

  .product-list {
    width: 100%;
    gap: 30px 15px;
  }

  .product-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .product-item .pic {
    width: 100%;
  }

  .product-item .pic img {
    width: 100%;
    height: 100%;
  }

  .product-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .product-title-wrapper {
    display: flex;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
  }

  .product4 .pic {
    width: 100%;
  }

  .product4 .intr {
    flex: 1;
    padding: 40px 5% 80px;
  }

  .product4 .intr .t2 {
    margin: 20px 0;
  }

  /*-----------------------------------------------Service----------------------------------------------------*/
  .ser2 .t2 {
    margin-top: 20px;
  }

  .ser2 .pic {
    margin-top: 40px;
  }

  .ser3 .k2 {
    margin-top: 20px;
  }

  .ser3 .list {
    margin-top: 30px;
    gap: 40px;
  }

  .ser3 .list .intr {
    padding-top: 10px;
  }

  .ser3 .list .intr .line {
    width: 100%;
    height: 1px;
    margin: 10px 0 12px;
  }

  .ser3 .list .intr .t3 {
    margin-top: 12px;
  }

  .ser4 .main {
    margin-top: 20px;
  }

  .ser4 .pic {
    width: 100%;
  }

  .ser4 .intr {
    flex: 1;
    padding: 0 20px;
  }

  .ser4 .intr .li {
    margin: 20px 0;
  }

  .ser4 .intr .li .t2 {
    margin-top: 10px;
  }

  /*-----------------------------------------------blog----------------------------------------------------*/
  .blog2 {
    padding: 60px 0 40px;
  }

  .C-search {
    width: 220px;
    padding: 0 20px;
    border-radius: 42px;
    border: 1px solid #000;
  }

  .C-search input {
    flex: 1;
    height: 34px;
  }

  .blog2 .list {
    border-top: 1px solid rgba(0, 0, 0, 0.20);
    margin-top: 20px;
  }

  .blog2 .item {
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
  }

  .blog2 .item .pic {
    width: 100%;
    height: auto;
  }

  .blog2 .item .intr {
    width: 100%;
    align-items: flex-start;
    margin-top: 20px;
  }

  .blog2 .item .intr .line {
    margin: 10px 0 12px;
    height: 1px;
    width: 100%;
  }

  .blog2 .item .intr .t3 {
    margin: 12px 0;
  }

  .blog2 .C-paging {
    margin-top: 40px;
  }

  .C-paging .icon svg {
    width: 18px;
  }

  .C-paging .pages {
    margin: 0 12px;
  }

  .C-paging .pages a {
    width: 25px;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 6px;
    margin: 0 1px;
  }

  .blog4 .sec1 {
    padding: 60px 0 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
  }

  .blog4 .sec1 .icon {
    width: 40px;
    height: 40px;
    border-radius: 100%;
  }

  .blog4 .sec1 .intr {
    flex: 1;
    padding-left: 20px;
  }

  .blog4 .sec1 .intr .t2 {
    margin-top: 8px;
  }

  .blog4 .empty {
    padding: 20px 0 30px;
  }

  .blog4 .empty img {
    width: 100%;
    margin: 10px 0;
  }

  .blog4 .empty * {
    max-width: 100%;
  }

  .blog4 .sec3 .item:nth-last-child(n+2) {
    margin-bottom: 30px;
  }

  .blog4 .sec3 .item:nth-child(2n) {
    flex-direction: row-reverse;
  }

  .blog4 .sec3 .item .pic {
    width: 100%;
  }

  .blog4 .sec3 .item .intr {
    margin-top: 20px;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .blog4 .C-switch {
    padding: 40px 0;
    gap: 10px;
  }

  .C-switch .back {
    border-radius: 6px;
    padding: 4px 10px;
    gap: 4px;
    order: 5;
    margin: 30px auto;
  }

  .C-switch .abtn {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
  }

  .C-switch .abtn.next {
    flex-direction: row;
  }

  .C-switch .abtn span {
    width: 5em;
  }

  /*-----------------------------------------------library----------------------------------------------------*/
  .lib2 .sec1 {
    margin: 60px 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
  }

  .lib2 .C-search {
    margin: 20px 0 0 0;
  }

  .lib2 .C-paging {
    padding: 40px 0;
  }

  /*-----------------------------------------------product-detail----------------------------------------------------*/
  .product6 .t2 {
    margin-top: 20px;
  }

  .product7 {
    padding: 60px 0 60px 5%;
  }

  .product7 .zuo {
    width: 100%;
  }

  .product7 .you {
    width: 100%;
  }

  .product7 .swiper-slide {
    width: 320px;
  }

  .product7 .swiper-slide .t3 {
    margin-top: 10px;
  }

  .product7 .swiper-slide .t4 {
    margin-top: 10px;
  }

  .product7 .swiper-slide[data-name=slidePrev-1] {
    transform: translate(34px, 0) scale(0.7);
  }

  .product7 .swiper-slide[data-name=slidePrev-2] {
    transform: translate(102px, 0) scale(0.7);
  }

  .product7 .swiper-slide[data-name=slideNext-1] {
    transform: translate(-34px, 0) scale(0.7);
  }

  .product7 .swiper-slide[data-name=slideNext-2] {
    transform: translate(-102px, 0) scale(0.7);
  }

  .product7 .swiper-pagination {
    margin: 20px 0;
  }

  .product7 .swiper-pagination-bullet {
    width: 20px;
    height: 1px;
  }

  .product7 .swiper-pagination-bullet-active {
    width: 66px;
  }

  .product8 {
    padding: 60px 0;
  }

  .product8 .C-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 40px;
  }

  .product8 .left-image-area {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
  }

  .product8 .image-frame {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .product8 .image-container {
    width: 100%;
    height: auto;
    padding-top: 122%;
  }

  .product8 .fabric-image {
    width: 100%;
    height: 100%;
  }

  .product8 .right-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
  }

  .product8 .section-title {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .product8 .sub-title {
    width: 100%;
  }

  .product8 .tab-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .product8 .tab-item {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
    padding: 20px 0px;
    width: 100%;
    border-bottom: 1px solid #000000;
  }

  .product8 .tab-item:first-child {
    border-top: 1px solid #000000;
  }

  .product8 .tab-item p {
    width: 100%;
  }

  .product9 {
    padding: 60px 8%;
  }

  .product9 .main-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .product9 .title-section {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  .product9 .title-frame {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .product9 .item-list {
    gap: 30px 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .product9 .item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .product9 .item .bg {
    width: 100%;
  }

  .product9 .item .bg img {
    width: 100%;
    height: 100%;
  }

  .product9 .content-frame {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .product9 .text-frame {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 0px 0px 10px;
    border-bottom: 1px solid #000000;
  }

  .product9 .item-title {
    width: 100%;
  }

  .terms2 {
    padding: 60px 0 40px;
  }

  .terms2 .t1 {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
  }

  .terms2 .empty img {
    width: 100%;
    margin: 10px 0;
  }

  .terms2 .empty * {
    max-width: 100%;
  }
}

@media screen and (max-width:768px) {
  .product7 .swiper-slide {
    width: 232px;
  }
}