/* Typography, spacing and motion refinements, layered over the design baseline. */
:root {
  --laimu-copy-size: 16px;
  --laimu-copy-leading: 1.625;
  --laimu-motion: 200ms ease;
}

:root:lang(zh),
:root:lang(ko) {
  --laimu-copy-leading: 1.75;
}

/* The original OPPO webfont has compressed Hangul glyph advances. */
body:lang(ko) {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Arial, sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body:lang(ko) .footer,
body:lang(ko) .index-quality-left h2 {
  font-family: inherit;
}

.index-banner-content h1 {
  font-size: clamp(36px, 2.5vw, 48px);
  line-height: 1.25;
}

.page-heading h1,
.contact-banner .page-heading h1 {
  line-height: 1.25;
}

.page-heading h2,
.index-series-contnet .page-heading h2,
.home-technology .page-heading h2,
.index-quality-left h2,
.laimu-who h2,
.laimu-faq .page-heading h2,
.solution-contact h2,
.laimu-history .page-heading h2,
.laimu-strengths .page-heading h2,
.laimu-service-carousel .page-heading h2,
.laimu-jobs .page-heading h2 {
  font-size: 36px;
  line-height: 1.3;
}

.page-heading p,
.index-series-contnet .page-heading p,
.index-quality-left p,
.laimu-about-profile .laimu-profile-copy,
.laimu-who p,
.laimu-faq details p,
.laimu-history-copy p,
.laimu-strengths article p,
.laimu-jobs-grid p,
.contact-banner .page-heading p,
.contact-info > p,
.login-head p {
  font-size: var(--laimu-copy-size);
  line-height: var(--laimu-copy-leading);
}

.page-heading h1,
.page-heading h2,
.page-heading h3 {
  margin-bottom: 16px;
}

.home-technology .page-heading p {
  font-size: 20px;
  line-height: 1.4;
}

.laimu-about-profile .laimu-profile-copy p {
  margin-top: 24px;
}

.laimu-who p,
.contact-info > p {
  margin-top: 16px;
}

.py-100 {
  padding-top: 88px;
  padding-bottom: 88px;
}

/* Keep the image-led sections on their existing composition and proportions. */
.single-product-section {
  padding-top: 50px;
  padding-bottom: 50px;
}

.laimu-about-profile {
  padding-top: 240px;
  padding-bottom: 200px;
}

.contact-infos {
  padding-top: 64px;
  padding-bottom: 80px;
}

.product-list {
  gap: 44px 24px;
}

.product-card-info {
  padding-top: 16px;
}

.product-card-info h4,
.index-series-swiper .cp-item h3 {
  font-size: 16px;
  line-height: 1.5;
}

.index-series-swiper .cp-item h3 {
  margin-top: 16px;
}

.product-card-add {
  font-size: 14px;
  line-height: 1.5;
}

.product-results,
.filter-option,
.filter-tag,
.filter-clear-all,
.contact-form > p,
.cp-form-status,
.login-head p,
.single-title p {
  font-size: 14px;
  line-height: 1.5;
}

.filter-option {
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.single-title h1 {
  line-height: 1.3;
}

.single-title p {
  margin-top: 12px;
}

.single-meta li {
  font-size: 15px;
  line-height: 1.6;
  padding: 10px 0;
}

.single-actions {
  gap: 12px;
  padding-top: 32px;
}

.contact-info h3,
.contact-form > h3 {
  line-height: 1.35;
}

.cp-label,
.contact-form .cp-label,
.login-card .cp-label {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.cp-input,
.cp-select,
.login-card .cp-input {
  height: 48px;
  font-size: 16px;
  padding-left: 14px;
  padding-right: 14px;
}

.cp-textarea,
.contact-form .cp-textarea {
  font-size: 16px;
  line-height: var(--laimu-copy-leading);
  min-height: 140px;
  padding: 12px 14px;
}

.cp-form-row {
  gap: 24px;
}

.contact-form .cp-form-row,
.contact-form form > .cp-field,
.login-card .cp-field {
  margin-bottom: 24px;
}

.contact-form form,
.login-card form {
  margin-top: 32px;
}

.cp-btn,
.single-actions .cp-btn,
.contact-form .cp-btn,
.login-card .cp-btn,
.index-banner-content .cp-btn {
  height: 48px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.25;
  transition: color var(--laimu-motion), background-color var(--laimu-motion),
    border-color var(--laimu-motion), transform 100ms ease;
}

.single-actions .cp-btn,
.contact-form .cp-btn {
  height: 50px;
}

.cp-btn::before {
  width: 100%;
  opacity: 0;
  transition: opacity var(--laimu-motion);
}

.cp-btn-primary:hover::before,
.cp-btn-primary.active::before,
.cp-btn-solid:hover::before,
.cp-btn-white:hover::before {
  opacity: 1;
}

.cp-btn .cp-arrow {
  transition: transform var(--laimu-motion), background-color var(--laimu-motion);
}

.cp-btn .cp-arrow::before,
.cp-btn .cp-arrow::after {
  transition: background-color var(--laimu-motion);
}

@media (hover: hover) and (pointer: fine) {
  .cp-btn:hover .cp-arrow {
    transform: translateX(3px);
  }
}

.cp-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.burger,
.burger-mask {
  transition: opacity var(--laimu-motion), visibility var(--laimu-motion);
}

.burger-wrapper {
  transition: width 240ms ease, opacity var(--laimu-motion);
}

.burger-close {
  transition: opacity var(--laimu-motion), transform 220ms ease;
}

.burger-nav > ul > li {
  transform: translateX(-6px);
  transition: opacity var(--laimu-motion), transform 220ms ease;
}

.burger.burger-active .burger-close,
.burger.burger-active .burger-nav > ul > li:nth-child(n) {
  transition-delay: 0s;
}

.header-user-menu {
  transition: opacity var(--laimu-motion), visibility var(--laimu-motion),
    transform var(--laimu-motion);
}

.filter-panel {
  transition-duration: 200ms;
}

.footer-advantage h3 {
  font-size: 16px;
  line-height: 24px;
}

.footer-advantage p,
.footer-subscribe-copy,
.footer-nav .sub-menu a,
#newsletter-status {
  font-size: 14px;
  line-height: 22px;
}

.footer-main {
  padding-top: 72px;
}

.footer-subscribe-copy {
  margin-top: 16px;
  min-height: 44px;
}

.footer-nav .sub-menu {
  gap: 16px;
  margin-top: 16px;
}

.footer-nav .sub-menu li {
  line-height: 22px;
}

#newsletterForm {
  height: 48px;
  margin-top: 24px;
}

#newsletter-email {
  height: 46px;
  font-size: 16px;
}

#newsletterForm button {
  height: 48px;
  font-size: 16px;
  transition: background-color var(--laimu-motion), opacity var(--laimu-motion);
}

.footer-social-icon,
.footer-nav a {
  transition: color var(--laimu-motion), border-color var(--laimu-motion);
}

.footer-copyright {
  padding-top: 72px;
}

@media (min-width: 769px) and (max-width: 1100px) {
  .laimu-about-profile {
    padding-top: 180px;
  }
}

@media (max-width: 992px) {
  .footer-main {
    padding-top: 48px;
  }

  .footer-copyright {
    padding-top: 64px;
  }
}

@media (max-width: 768px) {
  .index-banner-content h1 {
    font-size: clamp(30px, 8.2vw, 32px);
    line-height: 1.3;
  }

  .index-banner-content {
    gap: 24px;
  }

  .contact-banner .page-heading h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .page-heading h2,
  .index-series-contnet .page-heading h2,
  .home-technology .page-heading h2,
  .index-quality-left h2,
  .laimu-who h2,
  .laimu-faq .page-heading h2,
  .solution-contact h2,
  .laimu-history .page-heading h2,
  .laimu-strengths .page-heading h2,
  .laimu-service-carousel .page-heading h2,
  .laimu-jobs .page-heading h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  .py-100 {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .laimu-about-profile {
    padding-top: 150px;
    padding-bottom: 160px;
  }

  .single-product-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .contact-infos {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .product-list {
    gap: 30px 16px;
  }

  .single-meta li {
    font-size: 16px;
    line-height: 1.625;
    padding: 10px 0;
    gap: 4px;
  }

  .single-actions {
    gap: 12px;
    padding-top: 24px;
  }

  .single-actions .cp-btn {
    height: 48px;
    min-width: 135px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  .cp-form-row {
    gap: 24px;
  }

  .footer-main {
    padding-top: 40px;
    gap: 48px;
  }

  .footer-subscribe-copy {
    min-height: 0;
  }

  .footer-copyright {
    padding-top: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .cp-btn:active,
  .cp-btn:hover .cp-arrow {
    transform: none !important;
  }
}