/* Phase-one mobile adaptation layer. Desktop presentation remains unchanged. */

.homepage-section-gap {
  height: 4em;
}

.mobile-subnav-toggle {
  display: none;
}

@media (max-width: 1199px) {
  html {
    scroll-padding-top: calc(76px + env(safe-area-inset-top));
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body.mobile-nav-open {
    overflow: hidden;
    touch-action: none;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  .header {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
    box-shadow: 0 3px 16px rgba(31, 61, 79, .08);
  }

  .header_logo {
    position: relative;
    z-index: 32;
    height: 30px;
    max-width: calc(100% - 150px);
    transform: none;
  }

  .header_logo img {
    display: block;
    width: auto;
    height: 30px;
    max-width: 100%;
    object-fit: contain;
  }

  .header .nav {
    z-index: 40;
    top: calc(60px + env(safe-area-inset-top));
    width: 100%;
    padding: 12px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform .3s ease, visibility .3s ease;
    visibility: hidden;
  }

  .header.mactive .nav {
    visibility: visible;
  }

  .header .nav .nav-item {
    position: relative;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #edf0f2;
  }

  .header .nav .nav-item > a {
    min-height: 52px;
    height: auto;
    padding: 0 34px 0 4px;
    font-size: 16px;
    line-height: 52px;
    white-space: normal;
  }

  .header .nav .nav-item > a.has_subnav {
    padding-right: 56px;
  }

  .header .nav .nav-item .has_subnav::before {
    display: none !important;
  }

  .header .nav .mobile-subnav-toggle {
    position: absolute;
    top: 4px;
    right: 0;
    z-index: 4;
    display: block;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .header .nav .mobile-subnav-toggle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    content: "";
    transform: translate(-65%, -50%) rotate(45deg);
  }

  html[lang="en"] .header .nav .nav-item > a {
    font-size: 15px;
  }

  .header .nav .nav-item .sub-nav {
    top: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 40;
    width: 100% !important;
    height: calc(100dvh - 60px - env(safe-area-inset-top));
    padding: 16px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%) !important;
  }

  .header .nav .nav-item.on .sub-nav.on {
    transform: translateX(0) !important;
  }

  .header .nav .nav-item .sub-nav .gray333 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 34px;
  }

  .header .nav .nav-item .sub-nav .sub-nav-box {
    display: block;
  }

  .header .nav .nav-item .sub-nav .sub-nav-box::after {
    display: none;
  }

  .header .nav .nav-item .sub-nav .sub-nav-box a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    height: auto;
    margin: 0;
    padding: 9px 4px;
    border: 0;
    border-bottom: 1px solid #edf0f2;
    border-radius: 0;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    white-space: normal;
  }

  .sub-nav.on .m-sub-back {
    position: static;
    z-index: 41;
    width: 100%;
    height: 46px;
    margin-bottom: 8px;
    padding: 0 4px;
    border-bottom: 1px solid #dce3e7;
    font-size: 15px;
    line-height: 46px;
  }

  .nav-icon {
    right: max(106px, calc(94px + env(safe-area-inset-right)));
    z-index: 33;
    width: 44px;
    height: 44px;
    margin-top: 0;
    transform: translateY(-50%);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-icon span {
    width: 24px;
  }

  .site-lang-switch {
    right: max(12px, env(safe-area-inset-right));
    z-index: 34;
  }

  .site-lang-toggle {
    min-width: 78px;
    min-height: 44px;
  }

  .site-lang-menu {
    top: 54px;
    border-radius: 6px;
    overflow: hidden;
  }

  .site-lang-menu a {
    min-height: 44px;
    height: 44px;
    line-height: 44px;
  }

  .side-go-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }

  .side-go-top img {
    width: 46px;
    height: 46px;
  }

  .sub-nav-title {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sub-nav-title::-webkit-scrollbar {
    display: none;
  }

  .sub-nav-title > .mCustomScrollBox {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sub-nav-title > .mCustomScrollBox::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .sub-nav-title .mCSB_container {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
  }

  .sub-nav-title .item-a {
    min-height: 48px;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .news-info-con,
  .prodel-1-r,
  .pro-del-content {
    overflow-wrap: anywhere;
  }

  .news-info-con img,
  .news-info-con video,
  .news-info-con iframe,
  .prodel-1-r img,
  .pro-del-content img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .footer-section {
    gap: 12px;
    padding: 24px 20px;
  }

  .footer-right,
  .footer-right p,
  .copyright p {
    width: 100%;
    text-align: center;
    line-height: 1.7;
  }

  .footer-right a,
  .go-top {
    min-height: 44px;
  }
}

@media (max-width: 780px) {
  body {
    font-size: 15px;
  }

  /* Brand hero images must begin below the fixed 60px mobile header. */
  .inner-banner.blky-banner,
  .inner-banner.qxyl-banner,
  main.cyx-page > .brand-banner-frame,
  main.cyk-page:not(.en-brand-page) > .cyk-banner-frame,
  main.en-brand-page > .en-brand-banner-frame {
    margin-top: 60px !important;
  }

  /* Mobile pages stay visually stable: content is immediately visible and
     does not replay entrance animations while scrolling or reflowing. */
  .wow,
  .wow.animated {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .brand-banner-stable.brand-banner-playing,
  .brand-banner-stable.brand-banner-strong.brand-banner-playing,
  .brand-seamless-banner.brand-banner-frame-playing {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .sub-nav-title .mCSB_scrollTools {
    display: none !important;
  }

  .sub-nav-title-con > .container {
    position: relative;
    padding-right: 38px;
    padding-left: 38px;
  }

  .sub-nav-title-con .sub-nav-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0;
    margin-left: 0;
  }

  .section-tab-arrow {
    position: absolute;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #2495b0;
  }

  .section-tab-prev {
    left: 3px;
  }

  .section-tab-next {
    right: 3px;
  }

  .section-tab-arrow::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .section-tab-prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
  }

  .section-tab-next::before {
    transform: rotate(45deg);
    margin-right: 4px;
  }

  .section-tab-arrow:disabled {
    color: #cbdde1;
    opacity: .48;
  }

  /* Keep all section shortcuts in one complete, touch-scrollable row.
     The desktop scrollbar plugin writes a negative inline left value which
     otherwise opens the mobile row halfway through its five items. */
  .sub-nav-title > .mCustomScrollBox {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .sub-nav-title .mCSB_container {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    width: max-content !important;
    min-width: 100% !important;
    padding: 0 4px 10px;
    box-sizing: border-box;
  }

  .sub-nav-title .item-a {
    flex: 0 0 auto;
    min-width: 116px;
    padding-right: 14px;
    padding-left: 14px;
    margin-right: 8px;
    border: 1px solid rgba(36, 149, 176, .1);
    border-radius: 24px;
    box-shadow: none;
    scroll-snap-align: start;
  }

  /* Platform overview: retain the desktop left-copy/right-image composition
     at phone scale instead of stacking two oversized blocks. */
  .tech-1#tech1 {
    padding-top: 50px;
    padding-bottom: 28px;
  }

  .tech-1#tech1 > .container {
    margin-right: 8px;
    margin-left: 8px;
  }

  .tech-1#tech1 .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: 0;
    margin-left: 0;
  }

  .tech-1#tech1 .row > .col-xs-12:first-child {
    float: none;
    flex: 0 0 58%;
    width: 58%;
    max-width: 58%;
    padding: 34px 3px 0 0;
  }

  .tech-1#tech1 .inner-title .en {
    font-size: 34px;
    line-height: 1;
  }

  .tech-1#tech1 .inner-title .cn {
    margin-top: -30px;
    padding-left: 0;
    font-size: clamp(21px, 6.1vw, 24px);
    line-height: 1.25;
  }

  .tech-1#tech1 .tech-1-con {
    margin-top: 16px;
    padding-right: 0;
    padding-bottom: 0;
    text-indent: 2em;
  }

  .tech-1#tech1 .tech-1-con p {
    font-size: 14px;
    line-height: 1.75;
    text-align: left;
  }

  .tech-1#tech1 .tech-1-r {
    float: none;
    flex: 0 0 42%;
    width: 42%;
    max-width: 42%;
    padding: 0;
    text-align: right;
  }

  .tech-1#tech1 .tech-1-r img {
    display: inline-block;
    width: 100% !important;
    max-width: 160px;
    height: auto !important;
  }

  /* Product advantages keep the same portrait ellipse used on desktop. */
  .tech-3#tech3 .tech-3-item .item-img {
    overflow: hidden;
    border-radius: 50% !important;
  }

  .tech-3#tech3 .tech-3-swiper {
    padding-bottom: 30px;
  }

  .tech-3#tech3 .tech-3-item {
    padding-bottom: 77px;
  }

  .tech-3#tech3 .tech-3-item > br {
    display: none;
  }

  .tech-3#tech3 .tech-3-item > h5 {
    margin-top: 18px;
  }

  /* Align the product-features description with its padded mobile title. */
  .tech-4#tech4 .tech-4-con p {
    text-indent: 15px;
  }

  /* Development-step captions wrap completely instead of clamping to an ellipsis. */
  .tech-2#tech2 .step-item .txt p.line1 {
    display: block;
    height: auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Application-scenario and business-domain cards use one consistent
     landscape frame on phones, matching the equal-size desktop treatment. */
  .tech-5#tech5 .tech-5-item .item-img,
  .tech-5.business-domain .tech-5-item .item-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 14px;
  }

  .tech-5#tech5 .tech-5-item .item-img img,
  .tech-5.business-domain .tech-5-item .item-img img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .tech-5#tech5 .tech-5-item .item-txt,
  .tech-5.business-domain .tech-5-item .item-txt {
    padding: 14px 8px 10px;
  }

  #section0 {
    margin-top: 60px;
    background: #eef5f7;
  }

  html[lang="zh-cn"] #section0 .swiper-container {
    height: auto !important;
    aspect-ratio: 750 / 1334;
  }

  html[lang="en"] #section0 .swiper-container {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  #section0 .swiper-slide,
  #section0 .swiper-wrapper {
    height: 100% !important;
  }

  #section0 .swiper-slide img,
  #section0 .swiper-slide video,
  #section0 .swiper-slide canvas.home-banner-frozen {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #eef5f7;
  }

  #section0 .ind-banner-info {
    display: none;
  }

  .container,
  .container2 {
    width: auto;
    max-width: none;
    margin-left: 15px;
    margin-right: 15px;
  }

  .inner-banner,
  .inner-banner.solutions,
  .inner-banner.tech-ban {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 60px;
    background: #eef5f7;
  }

  .inner-banner > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .inner-ban-big {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .inner-ban-small {
    padding: 0 20px;
    font-size: 15px;
    line-height: 1.6;
  }

  .ind-title .tcn,
  .inner-title .cn {
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1.25;
  }

  html[lang="en"] .ind-title .tcn,
  html[lang="en"] .inner-title .cn {
    font-size: clamp(23px, 6.4vw, 32px);
    overflow-wrap: anywhere;
  }

  .ind-title-p,
  .about-1-p,
  .news-info-con,
  .pro-del-content {
    font-size: 15px;
    line-height: 1.85;
  }

  html[lang="en"] #about .about-1-con-txt .about-1-p,
  html[lang="en"] #about .about-1-con-txt .about-1-p p,
  html[lang="en"] #about .about-1-con2 .item p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

  .more-btn,
  .prodel-btn,
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }

  .ind-banner-txt {
    left: 20px;
    right: 20px;
  }

  .ind2-l,
  .ind2-top {
    width: 100%;
    height: auto;
  }

  .ind2 {
    background:
      url(../images/ind1-bg1.png) no-repeat left bottom / 100% auto,
      linear-gradient(180deg, #f5fbfc 0%, #fff 100%);
  }

  .ind2-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .ind2-l {
    flex: 0 0 min(77vw, 300px);
    width: min(77vw, 300px);
    height: min(77vw, 300px);
    padding: 40px 8px 24px 20px;
    border: 0;
    border-radius: 50%;
    background: #2495b0 url(../images/ind1-bg2.png) no-repeat center 18px / 82% auto;
    box-shadow: 0 15px 34px rgba(27, 101, 119, .19);
    overflow: hidden;
  }

  .ind2-txt .ind2-p1 {
    padding-top: 0;
    margin-bottom: 10px;
    background: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .ind2-txt .ind2-p1::after {
    display: block;
    width: 32px;
    height: 2px;
    margin: 9px auto 0;
    border-radius: 2px;
    background: rgba(255,255,255,.9);
    content: "";
  }

  .ind2-txt .ind2-p2 {
    display: -webkit-box !important;
    max-height: none;
    margin-top: 0;
    padding-right: 0;
    color: rgba(255,255,255,.92);
    height: 120px;
    font-size: 11px;
    line-height: 15px;
    text-align: justify;
    overflow: hidden;
    touch-action: auto;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }

  .ind2-txt {
    width: min(250px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .ind2-l .more-btn {
    min-height: 34px;
    height: 34px;
    margin-top: 14px;
    padding: 0 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(14, 77, 92, .2);
  }

  .ind2-l .more-btn span,
  .ind2-l .more-btn .icon-more-plus {
    color: #2495b0 !important;
  }

  .ind2-l .more-btn span {
    font-size: 12px;
  }

  .ind2-l .more-btn .icon-more-plus {
    font-size: 17px;
  }

  .ind2-r {
    position: relative;
    display: block !important;
    top: auto;
    left: auto;
    flex: 0 0 min(62vw, 240px);
    width: min(62vw, 240px);
    height: min(62vw, 240px);
    margin: 0 0 0 -35vw;
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(38, 78, 92, .13);
  }

  .ind2-num {
    margin-top: 40px;
  }

  .ind2-r img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ind3-right {
    position: absolute !important;
    z-index: 6;
    display: block !important;
    top: 148px !important;
    right: -34px !important;
    width: 68%;
    max-width: none;
    margin-top: 0;
    transform: none !important;
  }

  .ind3 {
    margin-top: 0;
    padding: 48px 15px 52px;
    overflow: hidden;
    background-image: url(../images/ind2-bg1-1.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
  }

  .ind3 > .container {
    width: auto;
    margin: 0;
  }

  .ind3 .weui-flex-warp {
    position: relative;
    min-height: 390px;
  }

  .ind3-txt {
    position: relative;
    z-index: 4;
    width: 100% !important;
    padding: 0;
  }

  .ind3 .ind-title {
    margin: 0 0 12px;
    padding: 0 4px;
  }

  .ind3 .ind-title .tcn {
    margin-bottom: 10px;
    text-align: left;
  }

  .ind3 .ind-title .tp {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.7;
  }

  .ind3-txt-con {
    width: 53%;
    min-height: 260px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .ind3-txt-swiper {
    padding-top: 4px;
  }

  .ind3-txt-swiper .ind3-txt-item {
    padding-bottom: 8px;
  }

  .ind3-txt-swiper .swiper-button-prev,
  .ind3-txt-swiper .swiper-button-next,
  .ind3-txt-swiper .swiper-pagination {
    display: none !important;
  }

  .ind3-hover-box .item {
    cursor: pointer;
    touch-action: manipulation;
  }

  .ind3-txt-con .ind3-txt-item > span {
    margin-top: 12px;
    margin-bottom: 14px;
    font-size: 14px;
  }

  .ind3-txt-con .ind3-txt-title {
    font-size: 22px;
    line-height: 1.35;
  }

  .ind3-txt-con .ind3-txt-p {
    padding: 18px 0 20px;
    font-size: 14px;
    line-height: 1.6;
  }

  .ind3-txt-con .more-btn {
    min-height: 42px;
    height: 42px;
    padding: 0 20px;
  }

  .ind3-txt-con .more-btn span {
    font-size: 14px;
  }

  .ind3-con,
  .circle-gray {
    display: block;
    width: 100%;
    height: auto;
  }

  .circle-gray img {
    display: none;
    width: 100%;
    height: auto;
  }

  .circle-gray img.on {
    display: block;
  }

  .ind3-img > img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
  }

  #culture {
    padding: 48px 0 44px;
  }

  #culture br {
    display: none !important;
  }

  #culture > .container > .tp {
    margin-top: 12px;
    padding: 0 14px;
    font-size: 15px !important;
    line-height: 1.75;
  }

  #culture .about-3-list-box {
    margin-top: 30px;
  }

  #culture .about-3-list .item,
  #culture .homepage-academy-values .item,
  .academy-circle-list > .item {
    flex-basis: min(72vw, 280px) !important;
    width: min(72vw, 280px) !important;
    min-width: min(72vw, 280px) !important;
    max-width: min(72vw, 280px) !important;
    height: min(72vw, 280px) !important;
    min-height: min(72vw, 280px) !important;
    max-height: min(72vw, 280px) !important;
    padding: 38px 24px !important;
  }

  #culture > .tc {
    margin-top: 28px;
  }

  .homepage-section-gap {
    height: 30px;
  }

  .ind6 {
    padding-top: 28px;
  }

  .ind6 .ind-partner-bg {
    display: block;
    opacity: .62;
  }

  .ind6 .ind-title br {
    display: none;
  }

  .ind6 .ind-title .tp {
    margin-top: 12px;
    padding: 0 12px;
    font-size: 15px !important;
    line-height: 1.7;
  }

  .ind6 .ind-partner {
    padding-top: 34px;
    padding-bottom: 52px;
  }

  .ind-news .item {
    height: auto;
    min-height: 360px;
  }

  .ind-news .item .item-txt p,
  .news_1-r-txt p,
  .news_1-r-txt h4 {
    height: auto;
  }

  .news-swiper,
  .news-swiper .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .news_2 .item {
    width: 100%;
    margin-right: 0;
  }

  .news_2 .item .item-txt .item-title {
    height: auto;
    min-height: 0;
    margin-bottom: 24px;
  }

  .news_2 .item .item-img,
  .news_1 .item-img,
  .tech-3-swiper .tech-3-item .item-img,
  .tech-5 .tech-5-item .item-img,
  .tech-6 .tech-6-item .item-img,
  .pro_list .item .item-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 16px;
  }

  .news_2 .item .item-img img,
  .news_1 .item-img img,
  .tech-3-swiper .tech-3-item .item-img img,
  .tech-5 .tech-5-item .item-img img,
  .tech-6 .tech-6-item .item-img img,
  .pro_list .item .item-img img,
  .pc-property-r-img img,
  .m-property-r img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .pro_list .item {
    display: block;
    padding: 20px;
  }

  .pro_list .item-txt,
  .pro_list .item-img,
  .prodel-1 .prodel-1-l,
  .prodel-1 .prodel-1-r {
    width: 100% !important;
  }

  .pro_list .item-txt {
    padding: 20px 0 0;
  }

  .contact-map-l .map-box,
  .contact-map-l .map-img,
  .contact-map-l .map-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .contact-map-r .contact-list .item {
    width: 100%;
    min-height: 64px;
  }

  .contact-sec3 .item {
    align-items: flex-start;
  }

  .contact-sec3 .item .item-r p {
    padding-left: 14px;
    line-height: 1.6;
  }

  .property-main-bxr {
    padding: 24px 15px;
  }

  .academy-postdoctoral-image {
    min-height: 0;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (max-width: 780px) {
  /* Keep the group introduction visually close to the desktop composition:
     a large circular information panel with the two original decorative images. */
  #about.about-1 {
    position: relative;
    padding: 30px 0 46px;
    background: #f6f6f6 url(../images/about1-bg.png) no-repeat center bottom / auto 58%;
  }

  #about .container {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  #about .about-1-con {
    width: min(calc(100vw - 32px), 390px);
    height: min(calc(100vw - 32px), 390px);
    margin: 0 auto;
    overflow: visible;
    border-radius: 50%;
    background: url(../images/about1-bg2.png) no-repeat center / cover;
    transform: none;
  }

  #about .about-1-con-txt {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: clamp(50px, 14.5vw, 62px) clamp(38px, 11vw, 48px) clamp(40px, 11.5vw, 50px);
    overflow: hidden;
    clip-path: circle(calc(50% - 2px) at 50% 50%);
  }

  #about .about-1-con-txt .inner-title {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0 0 clamp(12px, 3.5vw, 17px);
  }

  #about .about-1-con-txt .inner-title .en {
    font-size: clamp(34px, 10.5vw, 45px);
    line-height: .9;
  }

  #about .about-1-con-txt .inner-title .cn {
    margin: -8px 0 0;
    font-size: clamp(23px, 6.8vw, 29px);
    line-height: 1.2;
  }

  #about .about-1-con-txt .about-1-p {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    padding: 0 12px 12px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #31454c;
    font-size: clamp(12.5px, 3.25vw, 13.5px);
    line-height: 1.72;
    text-align: justify;
    text-indent: 0;
    scrollbar-color: #2495b0 rgba(255, 255, 255, .5);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  #about .about-1-con-txt .about-1-p p {
    margin: 0 0 .65em;
    text-indent: 2em;
  }

  #about .about-1-p.mCustomScrollbar,
  #about .about-1-p .mCustomScrollBox {
    box-sizing: border-box;
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #about .about-1-p .mCSB_container {
    box-sizing: border-box;
    min-height: 100%;
  }

  #about .about-1-con-txt .about-1-p::-webkit-scrollbar {
    width: 4px;
  }

  #about .about-1-con-txt .about-1-p::-webkit-scrollbar-track {
    border-radius: 4px;
    background: rgba(255, 255, 255, .48);
  }

  #about .about-1-con-txt .about-1-p::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #2495b0;
  }

  #about .right-top,
  #about .right-bottom {
    display: block !important;
    pointer-events: none;
  }

  #about .right-top {
    top: -7%;
    left: 65%;
    z-index: 2;
    width: 35%;
    opacity: .9;
  }

  #about .right-bottom {
    top: 60%;
    left: 83%;
    z-index: 1;
    width: 36%;
    opacity: .78;
  }

  #about .right-top img,
  #about .right-bottom img {
    display: block;
    width: 100%;
    height: auto;
  }

  #about .about-1-con2 {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 28px 24px 0;
    transform: none;
  }

  #about .about-1-con2 .item {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #about .about-1-con2 .item p {
    margin: 0;
    color: #999;
    font-size: 14px;
    line-height: 1.72;
    text-align: justify;
    text-indent: 2em;
  }

  html[lang="en"] #about .about-1-con-txt {
    padding-right: clamp(32px, 9.5vw, 41px);
    padding-left: clamp(32px, 9.5vw, 41px);
  }

  html[lang="en"] #about .about-1-con-txt .inner-title .cn {
    font-size: clamp(21px, 6.1vw, 27px);
  }

  html[lang="en"] #about .about-1-con-txt .about-1-p,
  html[lang="en"] #about .about-1-con-txt .about-1-p p,
  html[lang="en"] #about .about-1-con2 .item p {
    text-align: left;
    text-indent: 0;
  }
}

@media (max-width: 380px) {
  .header_logo {
    max-width: calc(100% - 142px);
  }

  .site-lang-toggle {
    min-width: 70px;
    padding: 0 6px;
  }

  .site-lang-current {
    font-size: 11px;
  }

  .nav-icon {
    right: 92px;
  }

  .ind2-num .item,
  .ind-partner .item {
    width: 100%;
    margin-right: 0;
  }
}

/* Mobile inner-page artwork: keep the full bitmap visible and render readable,
   wrapping HTML copy over the small text embedded in the source artwork. */
.cg-mobile-banner-copy {
  display: none;
}

.cg-mobile-clean-art {
  display: none;
}

@media (max-width: 780px) {
  .inner-banner.cg-mobile-copy-enabled > img:not(.cg-mobile-clean-art) {
    display: none !important;
  }

  .inner-banner.cg-mobile-copy-enabled > .cg-mobile-clean-art {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .inner-banner.cg-mobile-art-banner > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-left: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .inner-banner.cg-mobile-copy-enabled .inner-ban-txt,
  .inner-banner.cg-mobile-copy-enabled .inner-banner-txt {
    display: none !important;
  }

  .cg-mobile-banner-copy {
    position: absolute;
    z-index: 8;
    top: 50%;
    display: flex;
    width: min(64%, 260px);
    padding: 9px 11px;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    text-align: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }

  .cg-mobile-banner-copy strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }

  .cg-mobile-banner-copy span {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .cg-mobile-banner-copy.cg-copy-left {
    left: 2%;
  }

  .cg-mobile-banner-copy.cg-copy-right {
    right: 2%;
  }

  .cg-mobile-banner-copy.cg-copy-center {
    left: 50%;
    width: min(78%, 300px);
    transform: translate(-50%, -50%);
  }

  .cg-mobile-banner-copy.cg-copy-light {
    color: #2495b0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 3px rgba(255, 255, 255, .95);
  }

  html[lang="en"] .cg-mobile-banner-copy {
    width: min(70%, 280px);
  }

  html[lang="en"] .cg-mobile-banner-copy strong {
    font-size: 18px;
  }

  html[lang="en"] .cg-mobile-banner-copy span {
    font-size: 9.5px;
    line-height: 1.4;
  }
}

@media (max-width: 340px) {
  .ind2-l {
    flex-basis: 280px;
    width: 280px;
    height: 280px;
  }

  .ind2-r {
    flex-basis: 220px;
    width: 220px;
    height: 220px;
    margin-left: -160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}