@media only screen and (orientation: landscape) and (max-width:767px) {
  body { background-color: red; }
}

.top-toggle-nav { cursor: pointer; z-index: 5; height: 1.6rem; display: flex; justify-content: flex-end; }
.top-toggle-nav:hover i { color: var(--normal); }
.tnb-con { display: block; }
.tnb-con>em { position: absolute; top: 0; transition: all .35s; line-height: 1; white-space: nowrap; right: 0; }
.tnb-hover, .tnb-close { opacity: 0; }
.tnb-menu { opacity: 1; }
.tnb-con:hover .tnb-menu { opacity: 0; }
.tnb-con:hover .tnb-hover { opacity: 1; }
.mobile-menu .tnb-menu, .mobile-menu .tnb-hover { opacity: 0 !important; }
@media screen and (max-width:767px) {
  :root { --top-nav: 55px; --top-pad: 18rem; --left-pad: 20px; --hue: rgb(145, 150, 157); }
  html { font-size: 112.5%; }
  body { line-height: 2; font-size: .65rem; transition: padding .35s ease; }
  .frame-wide { padding-right: var(--left-pad); padding-left: var(--left-pad); }
  .frame-middle, .frame-narrow { padding-right: var(--left-pad); padding-left: var(--left-pad); }
  .frame-middle .frame-narrow { padding-left: 0; padding-right: 0; }

  /* bootstrap */
  .pt-5, .py-5 { padding-top: 2rem !important; }
  .pb-5, .py-5 { padding-bottom: 2rem !important; }
  .mt-5, .my-5 { margin-top: 2rem !important; }
  .mb-5, .my-5 { margin-bottom: 2rem !important; }
  .p-5 { padding: 2rem !important }
  .m-5 { margin: 2rem !important }
  .empty-line { line-height: 0; height: 0; font-size: 0; margin-bottom: .75rem; }
  .slick-dotted.slick-slider { margin-bottom: 0; }
  .slick-dots { bottom: 0; font-size: 0; line-height: 1; right: initial; left: 50%; transform: translateX(-50%); }

  /*.slick-dots li button:before { background: var(--mute); border-radius: 4px; }*/

  /*.slick-dots li button::after { background: var(--primary); border-radius: 4px; }*/

  /*.slick-dots li, .slick-dots li button { width: 8px; height: 8px; padding: 0 }*/

  /*.slick-dots li, .slick-dots li button { width: 8px; height: 8px; padding: 0 }*/
  .slick-dots li button:before { background-color: var(--muted); }
  .slick-dotted.slick-slider { padding-bottom: 1.5rem; }

  /* top nav */
  .top-nav, .fixed-bar .top-nav { padding-top: .55rem; padding-bottom: .55rem; background-color: var(--black); }
  .top-toggle-nav { z-index: 6; display: block; }
  .main-nav-bar .top-row, .main-nav-bar>hr { display: none; }
  .top-nav-menu dl.has-sub dt:after { display: none; }
  .top-toggle-nav > span { display: block; }
  .top-toggle-nav > span { position: relative; width: 2.25rem; height: 26px; }
  .top-toggle-nav i { font-size: 18px; position: absolute; top: 4px; right: 0; transition: opacity .25s; color: white!important; }
  .top-toggle-nav i.icon-menu { opacity: 1; }
  .top-toggle-nav i.icon-menu-close, .top-toggle-nav i.icon-menu-right { opacity: 0; }
  .top-nav-logo { width: 50%; padding: 0!important; height: 1.75rem; }
  .tnh-con { font-size: .65rem; line-height: 1; height: 1rem; border-color: var(--white); color: var(--white); padding-left: .75rem; padding-right: .75rem; white-space: nowrap; }
  /*.mobile-menu, .mobile-menu body { overflow: hidden !important; height: 100% !important; }*/
  .mobile-menu .top-toggle-nav i.icon-menu { opacity: 0; }
  .mobile-menu .top-toggle-nav i.icon-menu-close { opacity: 1; }
  .mobile-menu .tn-menu { z-index: 1000; top: 0; display: block; opacity: 1; }
  .mobile-menu .tn-logo img.logo-color { opacity: 0; }
  .mobile-menu .top-nav-hotline { opacity: 0; pointer-events: none; }
  .mobile-menu body:before { z-index: 5; opacity: 1; }
  .main-nav-bar { position: fixed; z-index: -1; top: 0; left: 0; justify-content: center; opacity: 0; display: block; width: 100%; height: 100vh; margin: 0; padding: 0; transition: opacity .25s ease, transform .35s ease; transform-origin: center top; transform: translate3d(0, -100%, 0); background: var(--dark); }
  .top-nav-menu { padding: 5rem 0 0 0; margin: 0; opacity: 0; display: flex; flex-direction: column; justify-content: space-between; }
  .top-nav-menu .tnm-con { flex-wrap: wrap; display: flex; font-size: 1.65rem; height: calc(100% - 8rem)!important; }
  .top-nav-menu dl { width: 100%; height: auto; padding: 0; }
  .top-nav-menu dt { height: auto; padding: 0; }
  .top-nav-menu dt a { font-size: 1.6rem; height: auto; line-height: 2.2rem; font-weight: normal; display: block; text-align: center; padding: 0; margin-left: 0; margin-bottom: .25rem; }
  .top-nav-menu dt a em { display: inline-block; }
  .top-nav-menu .hover-border.hb-normal { color: var(--primary); padding: .25em 0; }
  .tnm-slogan { letter-spacing: .85em; padding-left: .85em; color: var(--gray-light); }
  .hover-border.hb-normal:before { background-color: var(--primary); }
  .mobile-menu .main-nav-bar { transform: translate3d(0, 0, 0); opacity: 1; }
  .top-nav-menu, .tnm-con, .tnm-con dl, .tnm-con dt { height: auto; }
  .mobile-top-lang a { color: white; font-size: .85rem; line-height: 2.2rem; }
  .mobile-menu .body-mask { z-index: 5; pointer-events: unset; }
  .mobile-menu .top-nav-menu { transition: opacity .25s ease .25s; opacity: 1; }
  .top-nav-logo img.logo-color { display: none!important; }
  .top-nav-logo img.logo-white { opacity: 1; display: block!important; }
  .fixed-tn .top-nav { background-color: var(--black); }
  /**/
  .fs-19 { font-size: .8rem; }
  .fs-20 { font-size: .8rem; }
  .fs-28 { font-size: 1.1rem; }
  .fs-light { font-family: var(--font-system) }
  .rounded { border-radius: .45rem; }
  .b-bc.bc-lg { height: 1.75rem; font-size: .75rem; padding: 0 2rem; letter-spacing: .05rem; }
  .b-bc.bc-lg em { padding-left: .05rem; }
  .lsp-15 { letter-spacing: .05rem; }
  .b-bc.bc-md { font-size: .725rem; height: 1.6rem; letter-spacing: 0.025rem; }

  /* home */
  .homeban-front>.mask { position: absolute; bottom: -.45rem; z-index: 9; }
  .home-intro { padding-top: 4rem; padding-bottom: 4rem; }
  .hintro-left h4.fs-50 { font-size: 1.55rem; }
  .hintrol-det { font-size: 1.225rem; }
  .hintro-right { margin-top: 5rem; }
  .prod-item { border: 0; }
  .home-prod-slogan { padding: 4rem var(--left-pad); margin: 0; margin-top: 5rem; background-color: var(--primary); }
  .home-prod-slogan .fs-50 { font-size: 1.45rem; line-height: 1.3; color: var(--black); letter-spacing: .3em; padding-left: .3em; text-align: center; }
  .hcom-frame { flex-direction: column; }
  .hcom-left, .hcom-right, .hcom-center { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .hcom-right { justify-content: center; }
  .hcoml-title { font-size: 2.75rem!important; }
  .hcoml-sub { font-size: 1rem; }
  .hcoml-det p { font-size: .675rem!important; }
  .hcoml-link { font-size: .775rem; }
  .hcom-center img { max-width: 14rem; }
  .main-footer { background-color: var(--black); }
  .mfcn-tel { position: relative; margin: 0; color: var(--black)!important; font-size: 1.1rem!important; }
  .mmf-icon img { max-width: 6rem; }

  /* products */
  .prod-banner { height: 100%; }
  .prod-list { margin:0; }
  .prod-item { display: block !important; }
  .prod-item .ratio { padding-top: 110%; }
  .prodi-front>dt { height: 75%; }
  .prodi-img, .prodi-info { width: 100% !important; }
  .prodi-info { padding: 1rem 0; }
  .prodi-info h4 { font-size: 1rem; margin-top: .15rem; margin-bottom: .25rem; }
  .prodi-info h5 { font-size: .675rem; }
  .prodin-det { font-size: .675rem; line-height: 1.9; color: var(--hue); }
  .prodif-title { font-size: .85rem; }
  .prodif-title>span { font-size: .8rem; }
  .prodif-det { font-size: .785rem; padding-top: 1rem; }
  .prodi-front>dd { padding: .75rem var(--left-pad) }
  .prodsi-img { width: 50%; }
  .prod-slogan { padding-top: 0; padding-bottom: 6rem; }
  .prodsloi-img dt, .prodsloi-img dd { padding: .25rem; }
  .prodsloi-txt dt { font-size: .8rem; }

  .prods-list-con { padding-top: 125%; margin-bottom: 6rem; }
  .prods-list { background-size: 150% auto; }
  .prodsi-img>h4 { margin-top: 2.5rem; }
  .prodsi-img>h4>em { display: inline-block; line-height: 1; padding: .25rem .25rem; background-color: var(--black); color: var(--white); }
  .prodsi-img>img { height: auto!important; }
  .prodsl-nav { width: 85%; top: 42%; }
  .prodsl-nav.slides-nav button { font-size: 1.5rem; }
  .proddcht-cat { font-size: 1.3rem; }
  .proddcht-sub { font-size: 1rem; }
  .proddc-intro { font-size: .725rem; }
  .proddc-body p { font-size: .675rem; }
  .apn-con { height: auto; }
  .article-prev-next,.article-prev-next a { font-size: .725rem; }
  .article-prev-next a { padding: 0 1.5rem; }
  .apnc-arrow { width: 10vw; }
  .apnc-item strong { padding: .5rem; max-width: unset; }
  .apnc-back { height: 2rem!important; }
  .apnc-back a { font-size: 1.3rem; }
  .ehw-list .ehwl-item { width: 100%; }
  .common-works-list-title strong { font-size: .85rem; }
  .common-works-list-title em { font-size: .675rem; }
  .common-works-list-title { background-color: transparent; }
  .ehw-list.common-works-list { padding-bottom: 0; }

  /* about */
  main { z-index: 2; background-color: var(--black); }
  .sub-banner { position: fixed; width: 100%; height: 100vh; left: 0; top: var(--top-nav); }
  .sub-banner, .subban-front { height: calc(100vh - var(--top-nav)); }
  .about-ban-play { display: none!important; }
  .about-banner,.coop-banner { height: 100%; }
  .abslo-title { font-size: 1.3rem; }
  .abinh-title,.aboutin-heading h3 { font-size: 1.15rem; }
  .aboutin-det { font-size: .675rem; }
  .aboutbr-heading { border: 0; margin: 0; min-height: unset; padding: 0 var(--left-pad) }
  .aboutbr-heading .fs-24 { line-height: 1.5; font-size: .675rem; }
  .aboutbr-heading .fs-30 { font-size: 1.3rem; margin-bottom: 1rem; }
  .aboutbr-con:before { display: none; }
  .aboutbr-con { height: calc(100vw * 0.24); overflow: hidden; }
  .aboutbr-item { margin-bottom: 3rem; }
  .aboutbri-img { transform: translateY(-30%); }
  .aboutsp-frame { position: relative!important; overflow: hidden; }
  .aboutspf-con { padding: 0 1rem!important; }
  .aboutsp-list { justify-content: center; margin-left: -2.25rem; margin-right: -2.25rem; }
  .aboutsp-item { max-width: 50%; flex: 0 0 50%; padding-left: 2.25rem; padding-right: 2.25rem; }
  .aboutsp-item:first-child { margin-left: 15%; margin-right: 15%; }
  .aboutspib-det { font-size: 1rem; }
  .aboutspif-con>div { font-size: .725rem; line-height: 1.5; }
  .aboutsp-footer h4 { font-size: .725rem; line-height: 1.7; text-align: center; }
  .aboutca-item:not(:last-child) { border: 0; }
  .aboutca-item dd .fs-25 { font-size: 1.15rem; }
  .aboutca-item dd .fs-18 { font-size: .725rem; }
  .aboutca-item { padding-left: 0; padding-right: 0; }
  .aboutst-title { max-width: 50%; margin-left: auto; margin-right: auto; }
  .aboutst-det p { font-size: .675rem; }

  /* news */
  .news-top-con { max-height: unset; height: calc(100vh - var(--top-nav)); }
  .newstop-list { padding-left: 0; }
  .newstop-item { height: 25%; }
  .newstop-item:first-child { width: 100%; height: 50%; position: relative; }
  .sub-nav { font-size: .825rem; overflow: hidden; padding-left: 0; padding-right: 0; }
  .sub-nav a { padding: 0; margin: .5rem 1.25rem; }
  .sub-nav a>em { white-space: nowrap; }
  .newstopi-title { font-size: .75rem; padding-bottom: .75rem; margin-bottom: .75rem; }
  .newstopi-det { font-size: .8rem; }
  .news-list li { border: 0; }
  .news-list li a { padding-top: 1rem; padding-bottom: 2rem; }
  .news-list .item-info { margin-left: 0; padding-right: 0; }
  .news-list .subject { font-size: .775rem; }
  .news-list .overview { font-size: .625rem; }
  .newsd-heading { font-size: 1.15rem; }
  .newsd-con p { font-size: .675rem; }
  .newsd-share { justify-content: center; flex-direction: column; }
  .newsd-share .social-share a { width: 1.6rem; height: 1.6rem; }
  .news-related { padding-left: 0; padding-right: 0; }
  .news-related h3 { font-size: 1.375rem; }
  .cwli-con { padding: 1rem; }
  .cwli-con .sub { font-size: .85rem; }
  .cwli-con .subject, .cwli-con .cats { font-size: 1.15rem; -webkit-line-clamp: 3; }

  /* contact */
  .condf-title { font-size: 1.15rem; text-align: center; }
  .condr-intro { font-size: .675rem; line-height: 1.5; }
  .confee-frame input, .confee-frame textarea { padding: .5rem .75rem; font-size: .75rem; }
  .confee-frame .btn-submit { width: 2.25rem; height: 2.25rem; font-size: .625rem; }
  .coopadv-item dl { align-items: flex-start; margin-bottom: 2rem; }
  .coopadv-item dd { min-height: unset; font-size: .675rem; border: 0; }
  .coopadv-item dt { font-size: .825rem; width: 2.5rem; height: 2.5rem; margin-top: .35rem; }
  .coopdai-nums { font-size: 2.25rem; }
  .coopda-list { overflow: hidden; }
  .coopda-item { padding-left: .5rem; padding-right: .5rem; }
  .coopda-item dt .icon-plus { font-size: .85rem; }
  .coopda-item dd { font-size: .625rem; }
  .coop-data .coopda-img { height: 15rem; }
  .coopsup-title { border-bottom: 1px dotted white; }
  .coopcost-con { width: 100%; max-width: unset; padding: 0; }

  /* contact */
  .coninfo-left .fs-56 { font-size: 1.25rem; }
  .coninfo-left .fs-25 { font-size: .675rem; }
  .con-address dt { padding-top: .75rem; }
  .con-address dd { line-height: 2; margin-bottom: 3.5rem; }
  .consto-icon { font-size: 2.5rem; }
  .consto-list h4 { font-size: 1.15rem; line-height: 2.8rem; font-size: .7rem; }
  .ajl-item h4 { padding-left: .5rem; padding-right: .5rem; justify-content: space-between; }
  .ajl-content,.ajl-overview { font-size: .675rem; }
  .ajl-item.active .ajl-content { padding: 1rem .5rem; }
  .ajl-email { position: relative!important; margin-top: 1.5rem; margin-bottom: 1rem; top: 0; transform: none; right: initial; }
  .ajl-email a { font-size: .65rem; padding: .15rem .5rem; max-width: 40%; margin: 0 auto; }
  .ajl-email a .icon-email { font-size: 1.25rem; }
  .ajl-item h4>span:not(.xs-visible) { display: none; }
  .ajl-item h4 >.ajli-icon { flex-grow: 0; }
  .confoo-img>img { max-width: 6rem; }
  .confoo-title { font-size: .9rem; }
  .confoo-sub { font-size: .7rem; }
  .contact-footer { padding-top: 5rem; padding-bottom: 5rem; }

  [lang="zh-CN"] {  }
  /* English */
  html[lang='en-US'] .habc-det .fs-18.lh-2 { font-size: .8rem; line-height: 1.6; }
  html[lang='en-US'] .hhot-title { line-height: 1.2; margin-bottom: .25rem; }
  html[lang='en-US'] .bc-app:hover, .prodin-link[data-active="apple"] a.bc-apple { width: 4.75rem; }
  html[lang='en-US'] .abbaf-con h2 { line-height: 1.2; }
  html[lang='en-US'] .abwhoc-det { line-height: 1.6; font-size: .7rem; }
  html[lang='en-US'] .sub-nav a { margin-left: .75rem; margin-right: .75rem; }
}
@media screen and (max-width:375px) {
  .strpd-list .strpdl-line>span:last-child { width: 25%; }
}