@media screen and (max-width: 840px) {
  html,
  body {
    font-size: 12px;
    margin: 0 auto;
  }
  .paddinglr {
    padding: 0 1rem !important;
  }
  nav.navigation {
    display: none;
  }
  section.mobile-navigation {
    height: 5rem;
    display: block;
  }
  section.mobile-navigation nav {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 5rem;
    display: flex;
    position: fixed;
    padding-left: 6%;
    align-items: center;
    background-color: var(--grey-3);
  }
  section.mobile-navigation nav div {
    width: 6%;
  }
  section.mobile-navigation nav div img {
    width: 100%;
  }
  section.mobile-navigation nav a {
    width: 40%;
    margin-left: 24%;
  }
  section.mobile-navigation nav blockquote {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    transform: translateX(-100%);
    background-color: var(--block-view);
  }
  section.mobile-navigation nav blockquote.open {
    transform: translateX(0);
    transition: ease all 0.3s;
  }
  section.mobile-navigation nav blockquote ul {
    width: 50%;
    height: 100%;
    padding-top: 6rem;
    position: relative;
    box-sizing: border-box;
    background-color: var(--grey-3);
  }
  section.mobile-navigation nav blockquote ul img {
    top: 1rem;
    right: 1rem;
    width: 2.6rem;
    position: absolute;
    transform: rotate(180deg);
  }
  section.mobile-navigation nav blockquote ul li {
    margin-top: 4rem;
    padding-left: 3rem;
  }
  section.mobile-navigation nav blockquote ul li a {
    font-size: 1.6rem;
    color: var(--black);
  }
  section.swiper video,
  section.swiper img {
    width: 100%;
  }
  .swiper {
    z-index: auto !important;
  }
  /********************************index**********************************/
  section.click-swiper,
  section.section-product,
  section.section-youshi,
  section.section-news,
  section.section-service,
  footer.pc-footer {
    display: none;
  }
  section.index-about,
  section.index-chandi,
  section.index-product,
  section.index-news,
  footer.mobile-footer {
    display: block;
  }
  section.index-about > div {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
  }
  /********************************about**********************************/
  section.about-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.about-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.about-names a:hover::after {
    display: none;
  }
  section.about-container-jianjie,
  section.about-container-wenhua,
  section.about-container-jiagou,
  section.about-container-guihua {
    all: unset;
    display: block;
    margin-top: 2rem;
  }
  section.about-container-jianjie > img,
  section.about-container-wenhua > img,
  section.about-container-jiagou > img,
  section.about-container-guihua > img {
    width: 100%;
  }
  section.about-container-jianjie > div,
  section.about-container-wenhua > div,
  section.about-container-jiagou > div,
  section.about-container-guihua > div {
    width: 100%;
    padding: 0 6%;
    line-height: 2;
    margin-top: 2rem;
    text-indent: 2em;
    text-align: justify;
    box-sizing: border-box;
    font-family: FZVariable-YouHeiS, PingFang SC, Lantinghei SC, Siyuan, Microsoft YaHei, \5fae\8f6f\96c5\9ed1, SimSun, Arial;
  }
  section.about-container-jianjie > div ul li,
  section.about-container-wenhua > div ul li,
  section.about-container-jiagou > div ul li,
  section.about-container-guihua > div ul li {
    text-indent: 0;
    display: block;
  }
  section.about-container-jianjie > div ul li a,
  section.about-container-wenhua > div ul li a,
  section.about-container-jiagou > div ul li a,
  section.about-container-guihua > div ul li a {
    line-height: 2;
  }
  section.about-container-dashiji {
    width: 100%;
  }
  section.about-container-rongyu blockquote {
    width: 90%;
  }
  section.about-container-rongyu blockquote .swiper-container-two {
    width: 80%;
  }
  section.about-container-rongyu blockquote .swiper-button-next,
  section.about-container-rongyu blockquote .swiper-button-prev {
    z-index: 0;
  }
  section.about-container-rongyu .swiper-image-list {
    width: 96%;
  }
  /***************************culture*******************************/
  .culture-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .culture-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  .culture-names a:hover::after {
    display: none;
  }
  .culture-container-youlai {
    width: 100%;
    padding: 0 1rem;
    margin: 2rem 0;
  }
  .culture-container-chandi,
  .culture-container-changqu {
    all: unset;
    width: 100%;
    margin: 2rem 0;
  }
  .culture-container-chandi blockquote,
  .culture-container-changqu blockquote {
    all: unset;
  }
  .culture-container-chandi blockquote ul,
  .culture-container-changqu blockquote ul {
    all: unset;
    height: 6rem;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .culture-container-chandi blockquote ul li,
  .culture-container-changqu blockquote ul li {
    all: unset;
    height: 100%;
    display: inline-block;
  }
  .culture-container-chandi blockquote ul li img,
  .culture-container-changqu blockquote ul li img {
    width: auto;
    height: 100%;
    object-fit: cover;
  }
  .culture-container-chandi blockquote ul li:not(:last-child),
  .culture-container-changqu blockquote ul li:not(:last-child) {
    border-bottom: 0;
  }
  .culture-container-chandi .center,
  .culture-container-changqu .center {
    width: 100% !important;
    height: auto;
    display: flex;
    margin-left: 0;
    margin-top: 0.2rem;
  }
  .culture-container-chandi .center img,
  .culture-container-changqu .center img {
    height: 100%;
    object-fit: cover;
  }
  .culture-container-chandi .right,
  .culture-container-changqu .right {
    all: unset;
    width: 100%;
    padding: 0 6%;
    line-height: 2;
    display: block;
    margin-top: 2rem;
    text-indent: 2em;
    text-align: justify;
    box-sizing: border-box;
    font-family: FZVariable-YouHeiS, PingFang SC, Lantinghei SC, Siyuan, Microsoft YaHei, \5fae\8f6f\96c5\9ed1, SimSun, Arial;
  }
  section.culture-container-gongyi blockquote {
    width: 90%;
  }
  section.culture-container-gongyi blockquote .swiper-container-two {
    width: 80%;
  }
  section.culture-container-gongyi blockquote .swiper-button-next,
  section.culture-container-gongyi blockquote .swiper-button-prev {
    z-index: 0;
  }
  section.culture-container-gongyi .swiper-image-list {
    width: 96%;
  }
  /***************************news*******************************/
  .news-container {
    width: 100%;
    padding: 0 1rem;
  }
  section.news-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.news-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.1rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.news-names a:hover::after {
    display: none;
  }
  .news-detail {
    width: 90%;
  }
  /***************************service*******************************/
  .service-container {
    width: 100%;
    padding: 0 1rem;
    display: block;
  }
  .service-container a {
    width: 100%;
    display: block;
    background-color: var(--grey-4);
  }
  section.service-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.service-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.1rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.service-names a:hover::after {
    display: none;
  }
  section.service-container-pinjian blockquote {
    width: 90%;
  }
  section.service-container-pinjian blockquote .swiper-container-two {
    width: 80%;
  }
  section.service-container-pinjian blockquote .swiper-button-next,
  section.service-container-pinjian blockquote .swiper-button-prev {
    z-index: 0;
  }
  section.service-container-pinjian .swiper-image-list {
    width: 96%;
  }
  /***************************cooperation*******************************/
  .cooperation-container {
    width: 100%;
    padding: 0 1rem;
    display: block;
  }
  .cooperation-container form dl dd {
    margin-bottom: 2rem;
  }
  .cooperation-container form dl dd label {
    font-size: 1.2rem;
  }
  .cooperation-container form dl dd div {
    width: 100%;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 0.1rem;
    background-color: var(--grey-3);
  }
  .cooperation-container form dl dd div input,
  .cooperation-container form dl dd div select {
    width: 100%;
    padding: 0.8rem 1rem;
  }
  section.cooperation-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.cooperation-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.cooperation-names a:hover::after {
    display: none;
  }
  /***************************product*******************************/
  section.product-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.product-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.product-names a:hover::after {
    display: none;
  }
  section.product-container {
    width: 96%;
    margin-top: 2rem;
  }
  section.product-container ul li {
    width: 48%;
  }
  section.product-container ul li > a {
    height: 3.4rem;
    font-size: 1.2rem;
  }
  /***************************contact*******************************/
  .contact-container {
    width: 100%;
    padding: 0 1rem;
    display: block;
  }
  section.contact-names {
    all: unset;
    display: block;
    margin-top: 2rem;
    overflow-x: scroll;
    white-space: nowrap;
  }
  section.contact-names a {
    all: unset;
    padding: 0 0.4rem;
    font-size: 1.5rem;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
  }
  section.contact-names a:hover::after {
    display: none;
  }
  section.contact-container-fankui {
    width: 100%;
    padding: 0 1rem;
    display: block;
  }
  section.contact-container-fankui form dl dd {
    margin-bottom: 2rem;
  }
  section.contact-container-fankui form dl dd label {
    font-size: 1.2rem;
  }
  section.contact-container-fankui form dl dd div {
    width: 100%;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 0.1rem;
    background-color: var(--grey-3);
  }
  section.contact-container-fankui form dl dd div input,
  section.contact-container-fankui form dl dd div select {
    width: 100%;
    padding: 0.8rem 1rem;
  }
  .pages {
    flex-wrap: wrap;
  }
  .pages ul {
    width: 100%;
    margin-bottom: 2rem;
  }
}