/* wo-about: mobile LEARN MORE clearance */
@media (max-width: 767px) {
  .about-box {
    position: relative !important;
    z-index: 20 !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
  .about-box .more {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    z-index: 21 !important;
  }
  .about-box .more a {
    position: relative !important;
    z-index: 22 !important;
  }
  /* soften default -70px overlap; keep a little tuck without covering the button */
  .product-box {
    margin-top: -18px !important;
    z-index: 1 !important;
  }
}


/* wo-cat-n12: hug product photos — no tall square empty frames */
.product-box .list .img-box,
.product-box .list a.img-box {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px !important;
}
.product-box .list .img-box img,
.product-box .list a.img-box img,
.product-box .list .pic img,
.product-box .list img.lazy {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 767px) {
  .product-box .list .img-box,
  .product-box .list a.img-box {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
  }
}


/* wo-cat-n13: beat style-main-b html body min-height on portrait cards */
html body .product-box .list .img-box,
html body .product-box .list a.img-box {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 6px !important;
}
html body .product-box .list .img-box img,
html body .product-box .list a.img-box img,
html body .product-box .list .pic img,
html body .product-box .list .img-box img.lazy {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
@media (max-width: 767px) {
  html body .product-box .list .img-box,
  html body .product-box .list a.img-box {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px !important;
  }
}


/* wo-font-n14: keep 15px body; PingFang/YaHei only — kill Oswald/ClearSans/Sansation */
html body,
html body *:not(i):not(.iconfont):not([class*="iconfont"]):not(script):not(style):not(svg):not(path) {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
html body {
  font-size: 15px !important;
  line-height: 1.7 !important;
}
/* Template display fonts that used Oswald / ClearSans / Sansation */
html body .product-box .title h2,
html body .product-box .title h3,
html body .about-box .title h2,
html body .about-box .title h3,
html body .news-box .title h2,
html body .news-box .title h3,
html body .item-box .item .pic h3,
html body .item-box .item .pic h3 a,
html body .waz,
html body .waz *,
html body .slide .caption,
html body .banner,
html body .banner *,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .title,
html body .title h2,
html body .title h3,
html body .header,
html body .header a,
html body .navigation a,
html body .foot-box,
html body .copyright,
html body .product-wrap,
html body .product-wrap a,
html body .update_contact1_right,
html body .update_contact1_right *,
html body p,
html body li,
html body dd,
html body dt,
html body td,
html body th,
html body input,
html body textarea,
html body button,
html body select,
html body a.more,
html body .more a {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
/* Keep icon font glyphs working */
html body .iconfont,
html body [class^="icon-"],
html body [class*=" icon-"],
html body i.iconfont {
  font-family: "iconfont" !important;
}


/* wo-about-text-n15: homepage About body == About page body (15px) */
html body .about-box .text,
html body .about-box .text p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #5b6570 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
}
html body .about-wrap #lContent,
html body .about-wrap #lContent p,
html body .about-wrap #lContent span,
html body .about-wrap #lContent strong,
html body .about-wrap #lContent b,
html body .about-wrap #lContent font,
html body .about-wrap .wrap-in #lContent,
html body span#lContent,
html body span#lContent p,
html body span#lContent span,
html body span#lContent strong,
html body span#lContent font {
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  color: #1f2933 !important;
}


/* wo-about-title-n16: About WhiteOptics title deep blue (not red) */
html body .about-box .title h2,
html body .about-box .title h3,
html body .about-wrap .title-in h3,
html body .about-wrap .title-in,
html body .title-in h3 {
  color: #006bb8 !important;
}
html body .about-box .title h2::after,
html body .about-box .title h2::before,
html body .title h2::after {
  background-color: #006bb8 !important;
}

html body .wrap-in .title-in h3,
html body .about-wrap .title-in h3 {
  color: #006bb8 !important;
}
html body .wrap-in .title-in ul::before {
  color: #006bb8 !important;
}


/* wo-about-text-n17: iPhone About body — flush right edge (justify), less indent holes */
html body .about-box .text,
html body .about-box .text p,
html body .about-wrap #lContent,
html body .about-wrap #lContent p,
html body .about-wrap #lContent span,
html body .about-wrap #lContent strong,
html body .about-wrap #lContent font,
html body span#lContent,
html body span#lContent p,
html body span#lContent span,
html body span#lContent strong,
html body span#lContent font {
  text-align: justify !important;
  text-justify: inter-ideograph !important;
  text-align-last: left !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}
@media (max-width: 767px) {
  html body .about-box .text,
  html body .about-box .text p,
  html body .about-wrap #lContent,
  html body .about-wrap #lContent p,
  html body .about-wrap #lContent span,
  html body .about-wrap #lContent strong,
  html body .about-wrap #lContent font,
  html body span#lContent,
  html body span#lContent p,
  html body span#lContent span,
  html body span#lContent strong,
  html body span#lContent font {
    text-indent: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: justify !important;
    text-justify: inter-ideograph !important;
    text-align-last: left !important;
  }
  html body .about-box .text {
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }
  html body .about-wrap #lContent,
  html body span#lContent {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }
}


/* wo-about-indent-n18: kill first-paragraph indent on About body */
html body .about-box .text,
html body .about-box .text p,
html body .about-wrap #lContent,
html body .about-wrap #lContent *,
html body span#lContent,
html body span#lContent * {
  text-indent: 0 !important;
}
html body .about-wrap #lContent p:first-child,
html body .about-wrap #lContent p:first-of-type,
html body span#lContent > p:first-child,
html body .about-box .text > p:first-child {
  text-indent: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}


/* wo-about-n19: blue About title centered; body only loses indent */
html body .about-box .title,
html body .about-box .title h2,
html body .about-box .title h3 {
  text-align: center !important;
  float: none !important;
  width: 100% !important;
  display: block !important;
  color: #006bb8 !important;
}
html body .wrap-in .title-in,
html body .about-wrap .title-in {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
  overflow: hidden !important;
}
html body .wrap-in .title-in h3,
html body .about-wrap .title-in h3 {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: #006bb8 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .wrap-in .title-in ul {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 8px auto 0 !important;
}
/* body only — never touch titles */
html body .about-box .text,
html body .about-box .text p,
html body .about-wrap #lContent,
html body .about-wrap #lContent p,
html body .about-wrap #lContent span,
html body .about-wrap #lContent strong,
html body .about-wrap #lContent font,
html body span#lContent,
html body span#lContent p,
html body span#lContent span,
html body span#lContent strong,
html body span#lContent font {
  text-indent: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}



/* wo-about-n20: homepage About body centered + justify; About page body keeps indent cleanup */
html body .about-box .text,
html body .about-box .text p {
  text-align: justify !important;
  text-justify: inter-ideograph !important;
  text-align-last: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 820px !important;
  box-sizing: border-box !important;
}
html body .about-box .title,
html body .about-box .title h2 {
  text-align: center !important;
  color: #006bb8 !important;
}


/* wo-sidebar-email-n21: keep sidebar email on one line */
html body .sub-box .sub-contact .note p,
html body .sub-contact .note p,
html body .sub-contact .note li {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
html body .sub-contact .note li.wo-email,
html body .sub-contact .note p.wo-email,
html body .sub-contact .note .wo-email {
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: -0.02em !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* wo-about-n22: homepage About body justify, last line left */
html body .about-box .text,
html body .about-box .text p {
  text-align: justify !important;
  text-justify: inter-ideograph !important;
  text-align-last: left !important;
}


/* wo-email-n23: shrink address only; 邮箱 label stays normal */
html body .sub-contact .note li.wo-email,
html body .sub-contact .note p.wo-email,
html body .sub-contact .note .wo-email {
  font-size: inherit !important;
  letter-spacing: normal !important;
}
html body .wo-email-row {
  font-size: 13px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
html body .wo-email-addr {
  font-size: 11px !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}


/* wo-email-n24: Email same size as address/phone; no shrink */
html body .sub-contact .note li.wo-email,
html body .sub-contact .note p.wo-email,
html body .sub-contact .note .wo-email,
html body .wo-email-row,
html body .wo-email-addr {
  font-size: inherit !important;
  letter-spacing: normal !important;
}
html body .sub-box .sub-contact .note p,
html body .sub-contact .note p,
html body .sub-contact .note li,
html body .wo-email-row {
  font-size: 13px !important;
}
html body .wo-email-row,
html body .sub-contact .note li.wo-email-row,
html body .sub-contact .note p.wo-email-row {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .wo-email-addr {
  font-size: 13px !important;
}


/* wo-breadcrumb-n25: hide Home > About crumb above About body */
html body .wrap-in .title-in ul,
html body .about-wrap .title-in ul,
html body .title-in ul {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* wo-contact-right-n26: Contact right column — Email = address/phone size */
html body .update_contact1_right,
html body .update_contact1_right dl,
html body .update_contact1_right dt,
html body .update_contact1_right dd,
html body .update_contact1_right dd li,
html body .update_contact1_right dd a,
html body .update_contact1_right li,
html body .update_contact1_right a,
html body .update_contact1_right .wo-email-row,
html body .update_contact1_right .wo-email-addr,
html body #ContactZidingyi .update_contact1_right,
html body #ContactZidingyi .update_contact1_right * {
  font-size: 16px !important;
  letter-spacing: normal !important;
}
html body .update_contact1_right dd,
html body .update_contact1_right dd li {
  line-height: 1.7 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* wo-subcontact-n27: remove phone graphic from left Contact sidebar background */
html body .sub-box .sub-contact,
html body .sub-contact {
  background-image: none !important;
  background-color: #f5f8fa !important;
}
/* decorative phone/video panel under sidebar contact */
html body .sub-box .video,
html body .sub-contact + .video {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  overflow: hidden !important;
}


/* n31: keep page from h-scroll; search is in-flow (see PC header block) */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.header,
.header .container,
.header .container-pc {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* n33: footer — kill big gap under Copyright (was margin-bottom:20px) */
html body .foot-box .note h3,
html body .copyright .note h3,
html body .foot-box .note h3 a {
  margin: 0 0 4px 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}
html body .foot-box .note p,
html body .copyright .note p {
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}
html body .foot-box .note p:empty {
  display: none !important;
}

/* n33: search MUST sit immediately right of PC nav (DOM is logo,toplink,navbar) */
@media (min-width: 768px) {
  html body .header .container-pc {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  html body .header .container-pc .logo {
    order: 1 !important;
    margin-right: auto !important; /* push nav+search as a right group */
  }
  html body .header .container-pc .navbar {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
  html body .header .container-pc .toplink {
    order: 3 !important;
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }
  html body .header .container-pc .toplink > div {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html body .header .container-pc .toplink input.text2,
  html body .header .container-pc #KeyName,
  html body .header .container-pc input#KeyName {
    width: 150px !important;
    max-width: 150px !important;
    height: 34px !important;
    border: 1px solid #c5cdd6 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }
  html body .header .container-pc #SearchButton,
  html body .header .container-pc .toplink input[type="button"] {
    height: 34px !important;
    padding: 0 12px !important;
    color: #fff !important;
    background: #0082dc !important;
    border: 1px solid #0082dc !important;
    border-radius: 4px !important;
  }
}