@media screen and (max-width:1309px){
    .server-banner{ height:400px; }
}
@media screen and (max-width:960px){
    body{ padding-top:50px; }
    .header-inner .logo img{ height:30px; width:auto;}
    .header-inner{ height:50px;}
    .header-inner .nav{ display: none; }
    .header-inner .h-link img{ width:26px; height:26px;}
    .header-inner .h-link a{ margin-left:12px; }
    .mobile-nav{ display: block; transition: all .6s cubic-bezier(.7, 0, .2, 1); opacity: 0; transform: translateX(-100%); position: fixed; top:50px; bottom:0; background:#fff; width:220px; z-index:33;}
    .mobile-nav li { position: relative;}
    .mobile-nav li a{ display: block; padding:15px 20px; font-size:14px; font-weight: bold; border-bottom:1px solid #f8f8f8; }
    .mobile-nav li a:hover{ background:#f8f8f8; }
    .mobile-nav li span{ font-size:18px; position: absolute; right:0; top:0; width:50px; height:48px; transition: all 0.3s ease; }
    .mobile-nav li span.open{ transform: rotate(180deg); }
    .mobile-nav li .dropdown{ display: none;}
    .mobile-nav li .dropdown li a{ padding-left:30px; font-size:13px; }
    .mobile-nav.open{ opacity: 1; transform: translateX(0)}
    .menu-icon{ display: block; }
    .simgift img{ width:50%; }
    .server-banner .img{ opacity:0.6; }
    .server-banner .text{ width:100%; text-align: center; }
    .server-banner .hm.flex{ align-items: center; justify-content: center; }
    .service-card .text{ padding-right:20px; }
    .service-card .img{ padding-left:20px; }
    .services .service-card:nth-child(2n) .text{ padding-left:20px;}
    .services .service-card:nth-child(2n) .img{ padding-right:20px; }
    .service-card .text{ margin-top:0; }
    .service-card .text h3{ font-size:35px; }
    .service-card{ margin-top:30px; border-bottom:2px solid #f7f8f7f8; padding-bottom:20px; }
    .service-card:last-child{ border-bottom:0; border:0; }
    .service-card .img{ padding:0; width:100%; margin-top:20px; }
    .service-card .text{ width:100%; padding:0; }
    .services .service-card:nth-child(2n) .text{ float:none; padding:0; }
    .services .service-card:nth-child(2n) .img{ float:none; padding:0;  }
    .service-card .text h3{ font-size:25px; }
    .title p{ font-size:14px; color:#666;  margin-top:12px; }
    .withus ul { margin-left:-20px; }
    .withus ul li{ width: calc(100% / 2 - 20px); margin-left:20px; padding:30px 15px; margin-bottom:20px; }
    .contact-list{ margin-left:-20px;}
    .contact-list .item{ width: calc(100% / 2 - 20px); margin-top:20px; margin-left:20px; }
    .news-detop h1{ font-size:40px; }
    .news-detail{ display: block; }
    .news-detail .fl{ float:none; margin-right:0}
    .news-detail .fr{ float:none; width:100%; margin-top:20px; }
    .prevnext{ margin-top:20px; padding-top:20px; }
    .news-detail .fr .search{ height:50px; }
    .recent-news{ margin-top:20px; }
    .recent-news h2{ font-size:20px; }
    .recent-news .list li a{ font-weight: normal; font-size:14px;}
    .our-story.flex{ display: block; }
    .story-img{ height:auto; width:100%;  }
    .our-story img{ width:100%; display: block;}
    .story-text{ margin-left:0; margin-top:20px; }
    .story-text h2{ font-size:30px; }
    .mission-cards{ margin-left:-20px; }
    .mission-card{ width: calc(100% / 3 - 20px); margin-left:20px; padding:20px; }
    .product-philo ul li .img1{ padding-right:20px;}
    .product-philo ul li .design-text{ padding-right:20px; }
    .product-philo ul li:nth-child(2n) .design-text{ padding-left:20px; }
    .product-philo ul li .design-text h3{ font-size:30px; }
    .product-philo ul li .img2{ padding-left:20px; }
    .tech-core ul{ margin-left:-20px; }
    .tech-core ul li{ width: calc(100% / 3 - 20px); margin-left: 20px; }
    .pro-top{ display: block; margin-top:20px;}
    .pro-top .pro-img .thumb-swiper{ display: none;}
    .pro-top .pro-img .main-swiper{ border-radius:10px; }
    .pro-top .pro-info{ margin-left:0; margin-top:12px; width:100%; }
    .pro-top .pro-info h1{ font-size:20px; padding:12px 0;}
    .pro-top .pro-info .note{ margin-top:0;}
    .pro-top .pro-info .choose-color{ margin-top:12px;}
    .pro-top .pro-info .choose-color .color i{ width:20px; height:20px; margin-right:10px; }
    .pro-top .pro-info .choose-color .color i em{ width:15px; height:15px; }
    .pro-top .pro-info .choose-color dl dd{ padding:10px 15px; min-height:50px; }
    .pro-top .pro-info .choose-color dl dd b{ font-size:16px; }
    .pro-top .pro-info .pro-btn{ margin-left:-12px; margin-top:18px;}
    .pro-top .pro-info .pro-btn .btn{ margin-left:12px; font-size:15px; height:45px; }
    .pro-content{ padding:12px 0;}
    .scenes2{ padding:0 0 12px 0;}
    .techspec .tech-con{ grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width:768px){
    .banner .text h2{ font-size:40px; }
    .banner .img{ max-width:80%;}
    .title h2{ font-size:30px; }
    .pd50{ padding:40px 0;}
    .explore-products .button-prevnext{ width:40px; height:40px; }
    .explore-products .button-prevnext img{ width:20px; }
    .explore-products .swiper{ margin:0 12px; }
    .features ul{ gap:20px; }
    .features ul li{ padding:20px; }
    .lovedby .swiper .swiper-slide .swiper-con{ gap:20px; }
    .lovedby .swiper .swiper-slide .card .ht .star img{ width:20px; height:20px; margin-right:3px; }
    .lovedby .swiper .swiper-slide .card .hm{ padding:12px;}
    .simgift .text h2{ font-size:25px; }
    .newslist{ margin-left:-20px; }
    .newslist li{ width: calc(100% / 3 - 20px); margin-left:20px; }
    .newslist li .pic{ height:230px; }
    .shop-banner .wrap.flex{ display: block; text-align: center; }
    .shop-banner img{ width:90%; }
    .goods-list{ margin-left:-20px; }
    .goods-list li{ width: calc(100% / 2 - 20px); margin-left:20px; margin-top:20px; }
    .shop-item .title{ padding-bottom:10px;}
    .goods-list li .text h3{ font-size:14px; }
    .goods-list li .text p{ font-size:14px; }
    .server-banner .img{ height:auto; bottom:0; top:auto;}
    .server-banner h2{ font-size:20px; }
    .server-banner h1{ font-size:40px; }
    .service-card{ margin-top:20px; }
    .down-tit{ padding-top:30px; }
    .down-tit h1{ font-size:40px; }
    .down-tit p{ margin-top:5px; }
    .download-box{ display: block; margin-left:0; }
    .download-box .download-item{ width:100%; margin:0; margin-top:20px; overflow: hidden; padding:20px; box-sizing: border-box; }
    .download-box .download-item .tit h2{ font-size:20px; }
    .download-box .download-item .tit p{ font-size:14px; }
    .download-box .download-item .down-list li{ padding:15px 0;}
    .download-box .download-item .text h3{ font-size:15px; }
    .download-box .download-item .text p{ margin-top:5px; color:#888; }
    .download-box.pd50{ padding-top:0;}
    .faq-search{ padding:50px 0;}
    .faq-search h1{ font-size:40px; }
    .faq-search .input{ height:60px; }
    .faq-search .input .intxt{ font-size:16px; }
    .faq-search p{ margin-top:20px; }
    .faq-box{ display: block; }
    .faq-box .fl{ margin-right:0; float:none;}
    .faq-box .fl .faq-item{ padding:20px; }
    .faq-box .fr{ width:100%; }
    .new-tit{ padding:40px 0 25px 0;}
    .new-tit h2{ font-size:40px; line-height:40px; }
    .new-tit p{ margin-top:10px; font-size:14px;}
    .newslist li{ width: calc(100% / 2 - 20px);}
    .news-detop h1{ font-size:30px; }
    .prevnext.between{ display: block; }
    .prevnext li{ max-width:100%; }
    .prevnext li:nth-child(2){ text-align: left; margin-top:12px; }
    .news-detail{ padding:40px 0;}
    .like-news h2{ font-size:30px; }
    .about-banner{ padding:60px 0; height:auto;}
    .about-banner h1{ font-size:35px; }
    .about-banner p{ font-size:16px; }
    .product-philo ul li .design-text h3{ font-size:25px; }
    .tech-core ul li{ width:100%; margin-bottom:20px; }
    .tech-core ul li .img1{ width:100%;}
    .partner .partner-box{ display:block; }
    .partner .partner-box dl{ margin-right:0;}
    .partner .partner-box .fr{ margin-left:0; margin-top:20px; float:none; }
    .partner .partner-box .fr .text{ font-size:15px; }
    .partner .partner-box .fr ul li h3{ font-size:20px; }
    .partner .partner-box .fr ul li p{ font-size:14px; line-height:20px; }
}

@media screen and (max-width:640px){
    .banner .text h2{ font-size:22px; }
    .banner .text p{ font-size:14px;}
    .banner .timg img{ margin:0 10px; height:30px; }
    .title{ padding-bottom:15px; }
    .title h2{ font-size:23px; }
    .pd50{ padding:30px 0;}
    .explore-products .swiper-slide{ display: block;}
    .explore-products .swiper-slide .img{ max-width:100%; }
    .explore-products .swiper-slide .text{ margin-left:0; margin-top:12px;  }
    .explore-products .swiper-slide .text h3{ font-size:18px; }
    .explore-products .swiper-slide .text .sm{ font-size:14px; }
    .explore-products .swiper-slide .text .pcolor{ margin-top:12px; }
    .explore-products .swiper{ padding-bottom:30px;}
    .explore-products .swiper-pagination-bullet{ width:30px; }
    .btn{ height:45px; }
    .scenes{ padding:30px 12px;}
    .features ul{ grid-template-columns: repeat(1, 1fr); }
    .features ul li{ text-align: center;}
    .features ul li .img{ width:60px; height:60px; margin:0 auto;}
    .lovedby .swiper{ padding-bottom:0; }
    .lovedby .swiper-pagination{ display: none;}
    .lovedby .swiper .swiper-slide .card .ht .note{ font-size:14px; }
    .simgift .wrap.flex{ display: block; text-align: center; padding:25px 12px;}
    .simgift img{ width:90%;}
    .title a{ font-size:14px;}
    .faqlist dl dt{ padding:12px 0;}
    .faqlist dl dt .tit{ font-size:14px; }
    .faqlist dl dt .opt img{ width:20px; }
    .newslist li{ width:100%; }
    .newslist li .pic{ height:180px; border-radius:12px; }
    .newslist li h3{ font-size:14px; height:auto; }
    .newslist li .readmore{ margin-top:10px; }
    .foot-three{ padding:12px 0;}
    .foot-three ul{ display: block; padding:10px 0;}
    .foot-three ul li{ padding:12px 0; }
    .footer-columns{ padding:25px 0;}
    .footer-columns .fl{ display: none; }
    .footer-columns h4{ text-align: center; }
    .footer-columns .fcons{ width:100%; border:0; padding-left:0; }
    .footer-columns .fcons form{ margin-bottom:20px; }
    .follow-link{ align-items: center; justify-content: center; }
    .copyright{ padding:20px 0;}
    .shop-banner .text h1{ font-size:25px; }
    .shop-banner .text p{ font-size:14px; line-height:22px; }
    .goods-list{ margin-left:-10px; }
    .goods-list li{ width: calc(100% / 2 - 10px); margin-left:10px; margin-top:10px;  }
    .server-banner{ height:300px; }
    .server-banner h2{ font-size:16px; }
    .server-banner h1{ font-size:25px; }
    .server-banner p{ font-size:12px; line-height:20px; }
    .server-banner .hm .btn{ font-size:14px; }
    .service-card .text h3{ font-size:20px; }
    .service-card .text p{ font-size:14px; line-height:22px; margin-top:10px; }
    .service-card .text .list p{ margin-top:10px; font-size:14px; }
    .withus ul li{ width: 100%; padding:30px 12px; margin-bottom:10px; }
    .withus ul li h3{ padding:10px 0; }
    .contact-list .item{ width:100%; }
    .book{ margin-top:20px; padding:20px; }
    .book ul.between{ display: block; }
    .book ul li .intxt.te{ height:100px; }
    .down-tit h1,.new-tit h2{ font-size:30px; line-height:30px; }
    .down-tit p{ font-size:13px; color:#888; }
    .download-box .download-item{ padding:15px; border-radius: 12px; }
    .down-list li a.between{  }
    .download-box .download-item .text p span{ margin-right:10px; }
    .faq-search{ padding:30px 0;}
    .faq-search h1{ font-size:20px; }
    .faq-search .input{ margin-top:10px;  height:45px; border:2px solid #765186;}
    .faq-search .input svg{ transform: scale(0.6) translateX(10px); transform-origin: right center; }
    .faq-box .fl .faq-item{ padding:12px; border-radius:12px; margin-bottom:15px;}
    .faq-box .fl .faq-item .tit h2{ font-size:18px; }
    .faq-box .fl .faq-item .tit p{ font-size:14px; }
    .faq-box .fr .tit h2{ font-size:23px; }
    .faq-box .fr form{ margin-top:20px; }
    .faq-box .fr .input-field{ height:50px; }
    .faq-box .fr .input-field .intxt{ height:50px;}
    .recent-news .list li a{ padding:12px 0; }
    .news-detop{ height:auto; padding:30px 0;}
    .news-detop h1{ font-size:18px; }
    .news-detail{ padding:20px 0;}
    .like-news h2{ font-size:20px; margin-bottom:15px; text-align: center;  }
    .new-tit{ padding:20px 0 15px 0;}
    .about-banner{ padding:30px 0;}
    .about-banner h1{ font-size:20px; }
    .about-banner p{ font-size:14px; line-height:20px; padding:12px 0; }
    .about-banner .hero-btn{ height:45px; }
    .story-text h3{ font-size:16px; }
    .story-text h2{ font-size:20px; }
    .story-text .text{ font-size:14px; line-height:22px; margin-top:15px; }
    .mission-card{ width: 100%; }
    .product-philo ul li{ display: block; margin-top:20px; }
    .product-philo ul li .img1{ padding:0; width:100%; display: block;}
    .product-philo ul li .img2{ padding:0; width:100%; display: none;}
    .product-philo ul li .design-text{ padding:0; width:100%;  margin-top:15px; }
    .product-philo ul li .design-text h3{ font-size:18px; margin-bottom:5px; }
    .product-philo ul li .design-text p{ font-size:14px; line-height:20px; }
    .product-philo ul li img{ width:100%;  padding:0;}
    .product-philo ul li:nth-child(2n) .design-text{ padding-left:0; }
    .techspec .tech-con{ padding:12px; }
    .techspec .tech-con dl{ height:auto; padding:15px 0;}
    .techspec .tech-con dl dd{ font-size:14px;}
    .techspec .tech-con dl dt{ font-size:14px; }
    .evalute-box .evalute-point{ display: block; padding:12px;}
    .evalute-box .evalute-point .fl{ float:none; }
    .evalute-box .evalute-point .fl b{ font-size:25px; }
    .evalute-box .evalute-point .fl .evstar{ padding:10px 0;}
    .evalute-box .evalute-point .fr{ float:none; }
    .evalute-box .evalute-point .fr dd .bar{ width:150px; }
    .pay-con .left-column{ padding:12px; border-right:0;}
    .pay-con .wrap{ display: block; }
    .pay-con .right-column{ width:100%; padding:12px; }
    .pay-con .left-column .btn{ display: none; }
    .pay-select-box{ margin:12px 0; padding:0; }
    .pay-select-box .h-tit{ font-size:15px; }
    .pay-select-box .ht{ margin-bottom:12px;}
    .pay-select-box .info-box{ padding:12px; margin-bottom:12px;}
    .pay-select-box .icon-box{ margin-right:12px; }
    .pay-select-box .info-box{ gap:0;}
    .pay-select-box .divider{ margin-bottom:12px;}
    .pay-select-box .action-area{ margin-top:18px; margin-bottom:20px;  }
    .pay-select-box .action-area .btn{ width:100%;}
    .order-detail-box .od-card{ padding:12px 0;}
    .order-detail-box .od-step .time{ font-size:10px; }
    .order-detail-box{ padding-bottom:20px; }
}