@media screen and (min-width: 320px) and (max-width: 1024px) {
  .jsbox1 ul {
    height: 3.5rem;
  }
  .ban_dan {
    display: none !important;
  }
  .wrap {
    width: 92%;
  }
  .footer .fl .logo {
    position: relative;
  }
  .footer .fl .logo img {
    width: 158px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -30px;
  }
  .about .box1 .content iframe {
    width: 100%;
    height: 150px;
    margin: 20px auto 0;
  }

  .header,
  .banner {
    display: none;
  }

  .phoneheader {
    padding: 0 0.3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 0 4px #a1a0a0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .phoneheader .fr img {
    width: 0.5rem;
    margin-left: 0.2rem;
  }

  .phoneheader .fl img {
    height: 0.8rem;
  }
  .about .box3 li img {
    max-width: 70%;
  }

  .phoneheader .fr {
    position: absolute;
    right: 0.3rem;
  }

  .phonebanner {
    display: block;
    margin-top: 1.2rem;
  }

  .phonebanner img {
    width: 100%;
  }

  .phonebanner .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: #ffffff;
    opacity: 0.5;
    border-radius: 50%;
    margin: 0 5px !important;
  }

  .phonebanner .swiper-pagination-bullet-active {
    width: 20px;
    height: 6px;
    background: #ffffff;
    border-radius: 3px;
    opacity: 1;
  }

  .mobile-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99999;
  }

  .mobile_nav {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 70%;
    height: 100%;
    background: #fff;
    padding: 1rem 0.12rem;
    overflow-y: scroll;
  }

  .mobile_nav .del {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
  }

  .mobile_nav > ul > li {
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    position: relative;
    line-height: 0.8rem;
    text-align: left;
    padding-left: 0.3rem;
  }

  .mobile_nav > ul > li > a {
    font-size: 0.32rem;
    display: block;
    width: 100%;
  }

  .mobile-container .sub li {
    padding-left: 0.1rem;
    line-height: 0.6rem;
  }

  .mobile-container .sub li a {
    font-size: 0.28rem;
  }

  .mobile-container li .sub,
  .mobile-container li .three {
    display: none;
  }

  /* 间距 */

  .indexbox1,
  .indexbox2,
  .indexbox4,
  .jsbox3,
  .jsbox4,
  .indexbox5,
  .productbox1,
  .productbox2,
  .productbox3,
  .hzbox1,
  .hzbox2,
  .about .box1,
  .dqlist {
    padding: 0.6rem 0 0.8rem;
  }
  .hzbox1 li span {
    margin: 0.2rem 0;
  }
  .hzbox1 li p {
    line-height: 0.4rem;
    text-align: left;
    overflow: hidden;
    margin: 0;
  }

  .commontitle {
    margin-bottom: 0.5rem;
  }
  .indexbox2 ul,
  .indexbox4 ul,
  .productbox1 ul,
  .about .box3 ul {
    margin: 0 auto;
  }
  .about .box3 li {
    width: 48%;
  }
  .about .box3 li:nth-of-type(5n) {
    margin: 0 1.2% 15px 0;
  }
  .about .box3 li:nth-of-type(10n) {
    margin-right: 0;
  }

  .footer,
  .productbox1 li {
    padding: 0.3rem 0;
  }

  .indexbox1 li .text,
  .indexbox2 li,
  .indexbox4 li div,
  .jsbox3 li,
  .about .box1 .content {
    padding: 0.3rem;
  }

  .jsbox3 li img {
    height: 1.5rem;
  }

  .indexbox2 li,
  .productbox1 li,
  .jsbox3 li,
  .cj .box h2 {
    margin-bottom: 0.3rem;
  }

  .indexbox3 .text > div,
  .about .box1 .content video {
    margin-top: 0.3rem;
  }
  .indexbox4 li div span,
  .jsbox3 li span,
  .hzbox2 li div p {
    margin-top: 0.2rem;
  }

  .hzbox2 li div p {
    line-height: 0.4rem;
    height: 2.8rem;
    overflow: hidden;
  }
  .hzbox2 li {
    height: 4.8rem;
    display: block;
    text-align: center;
  }

  .hzbox2 li div {
    padding: 0;
    width: 100%;
  }
  .hzbox2 li i {
    margin: 0 auto;
  }
  .hzbox2 li div span {
    margin-top: 0.1rem;
    display: block;
  }
  .indexbox5 form,
  .about .box1 .content {
    margin-top: 0.5rem;
  }
  .footer .fl.nav dl {
    margin: 0;
    padding: 0.3rem 0 0 0;
  }
  .copy,
  .productbox3 dl {
    padding: 0.3rem 0;
  }

  .cj .box {
    padding: 0.6rem 0;
  }

  /* 字体 */

  .commontitle p {
    font-size: 0.4rem;
    margin: 0.1rem 0;
  }
  .commontitle em {
    width: 20px;
    margin: 0 2px;
    display: none;
  }
  .copy p,
  .copy p a,
  .details h3 {
    font-size: 0.26rem;
  }

  .indexbox4 li div p,
  .indexbox4 li div span,
  .footer .fl p,
  .footer .fl.nav dl a,
  .productbox3 dd,
  .jsbox1 li p,
  .jsbox3 li p,
  .cj .box .text p,
  .hzbox1 li p,
  .hzbox2 li div p,
  .productbox1 li span {
    font-size: 0.24rem;
  }
  .indexbox2 li em {
    font-size: 0.24rem;
  }
  .indexbox1 li .text h2,
  .indexbox3 .text span,
  .indexbox5 h2,
  .productbox3 dt,
  .about .box1 h2,
  .details h2,
  .commontitle div span {
    font-size: 0.28rem;
  }
  .indexbox1 li .text h3,
  .indexbox2 li span,
  .hzbox1 li span,
  .jsbox3 li span,
  .indexbox5 h3,
  .productbox3 dd b,
  .jsbox2 li em,
  .cj .box .text p.font,
  .hzbox2 li div span,
  .footer .fl span,
  .footer .fl.nav dl .ch,
  .footer .fl.nav dl .en {
    font-size: 0.24rem;
  }

  .hzbox3 li span {
    font-size: 0.24rem;
  }
  .hzbox3 .wrap {
    width: 100%;
  }
  .jsbox2 li span {
    font-size: 0.32rem;
    display: block;
    margin-bottom: 0.1rem;
  }
  .jsbox2 li p {
    font-size: 0.28rem;
    margin: 0;
    line-height: 0.45rem;
  }

  .indexbox1 li .text .font {
    font-size: 0.28rem;
    margin-top: 0.3rem;
    padding-left: 0.3rem;
  }

  .indexbox1 li .text .num {
    font-size: 0.7rem;
    margin: 0;
    top: 1rem;
  }
  .jsbox1 li span {
    font-size: 0.36rem;
    margin: 0.2rem 0;
  }

  .menus a {
    font-size: 0.28rem;
    margin-right: 0.4rem;
  }
  .about .box1 .content .text p,
  .details .text p,
  .details .chapter a {
    font-size: 0.28rem;
    line-height: 0.45rem;
    display: block;
  }

  /* 大小 */

  .about .box3 li {
    width: 48%;
    height: 1.5rem;
  }
  .hzbox3 li {
    background: url(../images/ico15.png) no-repeat right top 0.4rem/.3rem;
    padding-right: 0.2rem;
  }
  .hzbox3 li img {
    width: 0.8rem;
  }
  .hzbox3 li:last-child {
    padding: 0;
  }

  .hzbox3 li span {
    margin-top: 0.2rem;
  }

  /* 布局 */
  .hzbox2 li {
    padding: 0.3rem;
  }
  .cj .box:nth-of-type(2n) h2 {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 0.3rem;
  }
  .about .box1 .content .text,
  .about .box1 .content video {
    width: 100%;
    height: auto;
  }
  .cj .box .text {
    width: 100%;
    padding: 0 4%;
    margin: 0;
  }
  .menus {
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .menus .wrap {
    overflow-y: scroll;
    white-space: nowrap;
    display: block;
  }
  .jsbox3 ul,
  .cj .box .content,
  .about .box1 .content,
  .details .chapter {
    display: block;
  }
  .jsbox1 ul,
  .hzbox1 ul {
    flex-wrap: wrap;
  }
  .jsbox1 li {
    flex: auto;
    width: 50%;
    padding: 0 0.3rem;
  }
  .jsbox2 li:nth-of-type(1) {
    width: 100%;
    height: auto;
  }
  .jsbox2 li img {
    margin: 0.3rem auto 0;
    max-width: 80%;
  }
  .jsbox2 li,
  .hzbox1 li {
    width: 48%;
    padding: 0.3rem;
    margin: 0 4% 0.3rem 0;
  }
  .jsbox2 li {
    width: 100%;
    height: auto;
  }
  .dqlist li {
    width: 48%;

    margin: 0 4% 0.3rem 0;
  }
  .dqlist li:nth-of-type(3n) {
    margin-right: 4%;
  }
  .hzbox1 li:nth-of-type(2n),
  .dqlist li:nth-of-type(2n),
  .dqlist li:nth-of-type(6n) {
    margin-right: 0;
  }
  .dqlist li p {
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.3rem;
  }
  .dqlist li .pro {
    height: 3rem;
  }
  .cj .box .content img {
    max-width: 100%;
    display: block;
    margin: 0.2rem auto;
    width: auto;
  }

  .productbox3 .content .text,
  .productbox3 .content img {
    width: 100%;
    max-width: 100%;
  }
  .footer .fl.nav dl .ch {
    background: url(../images/xl.png) no-repeat right center/20px;
  }
  .footer .fl.nav dl .ch.active {
    background: url(../images/xl2.png) no-repeat right center/20px;
  }
  .footer .fr {
    padding-top: 0.3rem;
    width: 100%;
  }
  .footer .fr img,
  .productbox3 .content {
    display: block;
    margin: 0 auto;
  }
  .footer .fl.nav dl .ch {
    margin: 0;
  }
  .footer .fl.nav dd,
  .footer .fl.nav dl .en {
    display: none;
  }
  .indexbox4 li img {
    height: 2.8rem;
  }
  .footer .fl.nav {
    width: 47%;
    display: block;
    margin: 2.6rem 0 0 0;
    border-left: 1px solid #fff;
    padding-left: 0.2rem;
    height: 4rem;
    margin-left: 0.2rem;
    box-sizing: border-box;
  }
  .footer .fl .logo {
    width: 200%;
    border-bottom: 1px solid #fff;

    margin-bottom: 0.2rem;
    height: 2rem;
  }
  .indexbox5 form input {
    height: 0.7rem;
    line-height: 0.7rem;
    width: 100%;
  }
  .indexbox3 .text a,
  .indexbox4 a.more,
  .indexbox5 button {
    width: 2.5rem;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.28rem;
    margin: 0.3rem auto 0;
  }
  .indexbox3 .text > div {
    text-align: center;
  }
  .indexbox2 li .num,
  .productbox1 li .num {
    top: 0.2rem;
  }

  .indexbox1 li {
    display: block;
    height: auto;
    overflow: hidden;
  }
  .indexbox1 li > img,
  .indexbox1 li .text,
  .jsbox3 li {
    width: 100%;
    height: auto;
  }
  .footer {
    position: relative;
  }
  .footer .fr {
    position: absolute;
    top: 0;
    right: 9%;
    width: 2.5rem;
  }
  .footer .fr img {
    width: 1.4rem;
    height: 1.4rem;
  }
  .footer .fr span {
    margin-top: 0.1rem;
    width: 2.5rem;
  }
  .footer .fr span,
  .footer .fl span {
    font-size: 0.28rem !important;
  }
  .indexbox2 li,
  .indexbox4 li,
  .productbox1 li,
  .productbox1 li:nth-of-type(n + 4),
  .jsbox3 li,
  .hzbox2 li {
    width: 48%;
    margin: 0 4% 0.3rem 0;
    height: 3.2rem;
  }
  .about .box1 .content {
    position: relative;
    padding-top: 220px;
  }
  .about .box1 .content iframe {
    height: 195px !important;
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
  }
  .indexbox4 li {
    height: 4rem;
  }
  .hzbox2 li {
    height: 4.9rem;
  }
  .indexbox4 li {
    height: auto;
  }
  .indexbox4 li div p {
    line-height: 0.4rem;
    height: 1.6rem;
  }
  .footer .fl {
    width: 50%;
  }
  .productbox1 li,
  .productbox1 li:nth-of-type(n + 4) {
    height: 3.4rem;
  }
  .jsbox3 ul {
    display: flex;
  }
  .jsbox3 li {
    height: auto;
  }
  .indexbox2 li:nth-of-type(2n),
  .indexbox4 li:nth-of-type(2n),
  .jsbox3 li:nth-of-type(2n),
  .hzbox2 li:nth-of-type(2n),
  .productbox1 li:nth-of-type(2n) {
    margin-right: 0;
  }
  .indexbox2 li:nth-of-type(3n),
  .productbox1 li:nth-of-type(3n),
  .indexbox4 li:nth-of-type(3n) {
    margin-right: 4%;
  }
  .indexbox2 li:nth-of-type(6n),
  .productbox1 li:nth-of-type(6n),
  .indexbox4 li:nth-of-type(6n) {
    margin-right: 0;
  }
  .indexbox2 li:last-child {
    height: 4.2rem;
  }
  .indexbox4 ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .indexbox1 li > img {
    width: 110%;
    margin: 0 5% 0 -5%;
  }

  .indexbox2 li i,
  .productbox1 li i {
    height: 2rem;
  }

  .indexbox3 {
    height: 3.2rem;
    background: url(../images/bg2.png) no-repeat left center/cover;
  }

  .indexbox3 .text {
    width: 92%;
    display: block;
    padding-top: 0.5rem;
  }
  .indexbox3 .text > img {
    max-width: 100%;
    margin: 0 auto;
    width: auto;
    display: block;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
  .cj .box .text {
    width: 32%;
  }

  .wrap {
    width: 80%;
  }

  .header .fr span {
    margin-left: 0.5rem;
  }

  .footer .fl.nav {
    margin-top: 2.6rem;
  }
  .footer .fl.nav dl {
    margin-right: 40px;
  }
  .indexbox4 li img {
    height: auto;
  }
}