/* English-only site overrides */
h1.tit, h1.t1 { margin: 0; padding: 0; font-weight: 400; }
.en-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.en-btn { display:inline-block; margin:22px 0 0; padding:13px 30px; background:#d7181f; color:#fff !important; font-weight:bold; border-radius:2px; }
.en-btn:hover { background:#b51218; }
.en-video-img { width:100%; height:100%; object-fit:cover; display:block; }
/* homepage company video (restored from the original site) */
.ipart05 .video video { width:100%; height:auto; display:block; }
.en-cta { padding:55px 0; background:#f5f5f5; text-align:center; }
.en-cta h2 { font-size:30px; color:#1e1e1e; margin:0 0 12px; }
.en-cta p { font-size:16px; color:#666; margin:0 0 8px; }
.channel_content.about .infor .con p { margin-bottom:14px; }
.en-product-img-wrap { text-align:center; margin:0 0 30px; }
.en-product-img { display:block; width:100%; max-width:520px; height:auto; margin:0 auto; }
/* make the inner-page banner fully visible instead of a 1920px fixed crop */
.xc_banner { height:auto; }
.xc_banner>img { position:static; left:auto; margin-left:0; width:100%; max-width:100%; height:auto; display:block; }
/* Main business: stop truncating headings and card labels */
.ipart01 .left .smal_infor .tit.el { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.5; }
.ipart01 .right li .infor { left:24px; }
.ipart01 .right li .infor .t.el { white-space:normal; overflow:visible; text-overflow:clip; font-size:24px; line-height:34px; }
.ipart01 .right li .cover .box .t.el { white-space:normal; overflow:visible; text-overflow:clip; font-size:24px; line-height:34px; }
/* Home product carousel: allow long product names to wrap on two lines */
.ipart04 .content .item .txt.el { white-space:normal; overflow:hidden; text-overflow:clip; line-height:20px; height:40px; }
/* subtle emphasis for key phrases in body copy */
.en-hl { font-weight:600; color:#1e1e1e; padding:0 2px; border-radius:1px;
  background:linear-gradient(transparent 57%, rgba(184,142,22,0.24) 57%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* key-phrase emphasis must stay readable on the dark photo panels
   (Application Solutions): white text + stronger translucent gold underline +
   shadow, instead of the dark body-copy colour */
.ipart02 .ip2_bg li .infor .en-hl {
  color:#fff;
  background:linear-gradient(transparent 58%, rgba(255, 205, 92, 0.45) 58%);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* keep breadcrumbs visible: let the tab strip take its natural width */
.xc_nav .left { width:auto; }
.xc_nav .right { font-size:13px; color:#fff; }
/* fixed 1300px wrap breaks on 1280px laptops: make it fluid until the mobile breakpoint */
@media only screen and (min-width:1241px) and (max-width:1366px) {
  .wrap { width:auto; max-width:1300px; margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; box-sizing:border-box; }
  .inav_wrapper .inav .nav_li>a { padding:0 9px; font-size:15px; }
  /* the hero text wrap is absolutely positioned around a 1300px canvas */
  .ibanner .item .wrap { width:1300px; max-width:none; padding-left:0; padding-right:0; left:50%; margin-left:-650px; }
  /* the vertical carousel dot rail is positioned for a centred 1300px canvas;
     at 1280 that pushes it ~18px outside the viewport and creates a
     horizontal scrollbar - pin it inside the right edge instead */
  .ibanner .iban_dots { right:70px; margin-right:0; }
}
/* footer QR captions: same width as the 136px QR images so both columns line up */
.foot_top .f_r .ewm img { display:block; width:136px; height:136px; }
.foot_top .ewm_txt.el { display:block; width:136px; height:34px; line-height:34px; padding:0 8px; box-sizing:border-box; font-size:13px; white-space:nowrap; overflow:visible; text-overflow:clip; text-align:center; }
/* improve contrast for text placed over photos */
.ipart02 .ip2_bg li:after { background:rgba(0,0,0,0.5); }
.ipart02 .ip2_bg li .infor { text-shadow:0 1px 3px rgba(0,0,0,.55); }
.ipart02 .ip2_bg li .infor .c { font-size:15px; line-height:1.8; }
.ipart01 .right li .infor .t, .ipart01 .right li .cover .t, .ipart01 .right li .cover .c { text-shadow:0 1px 3px rgba(0,0,0,.45); }


/* ====================================================================
   2026-11 UI polish round (5 items from the site owner)
   1. right sidebar phone slides out on hover
   2. breadcrumb-only strip instead of duplicated top-nav tabs
   4. long-form body copy readability
   ==================================================================== */

/* [1] right sidebar: reverted to the original template behaviour
   (common.js animates li.rtbar_li1 left:-116px on hover, dragging the icon
   left and pulling the phone number out). Only the number text was updated. */
/* the original template reveals a 116px strip which is too narrow for
   "+86 0536 5347196", so widen the item and the slide distance a little
   (215 - 65 = 150) while keeping the exact same drag-out animation/feel. */
.right_bar li.rtbar_li1 { width:215px; }

/* [2] breadcrumb-only strip that replaces the duplicated navigation tabs on
   the business pages / about / projects / contact pages */
.xc_nav.xc_nav_crumbs { background:#fbf7ee; height:44px; overflow:visible; border-bottom:1px solid #ece0c6; }
.xc_nav.xc_nav_crumbs .wrap { position:relative; }
.xc_nav.xc_nav_crumbs .crumbs { float:right; line-height:44px; font-size:13px; color:#7d6118; }
.xc_nav.xc_nav_crumbs .crumbs a { display:inline-block; color:#7d6118; }
.xc_nav.xc_nav_crumbs .crumbs a:hover { color:#b88e16; }
.xc_nav.xc_nav_crumbs .crumbs span { display:inline-block; color:#bda878; }

/* [4] long-form body copy: real paragraphs with a 2em first-line indent,
   airy line height, and a hanging indent for numbered / bulleted lines. */
.channel_content .about01 .infor .con > p { text-indent:2em; line-height:1.95; margin:0 0 14px; }
.channel_content .about01 .infor .con > p.con-item { text-indent:-2.2em; padding-left:2.2em; }
.channel_content .about01 .infor .con > p.con-media { text-indent:0; }
.channel_content .about01 .infor .con > p.con-media-center { text-align:center; }
.channel_content .about01 .infor .con > p:last-child { text-indent:0; }
.channel_content .about01 .infor .con.con-contact > p { text-indent:0; }


/* ====================================================================
   2026-11 mobile adaptation (task-9)
   - hero banner: stable height, cover image, readable overlay text,
     entrance animation that ends at translateY(0) instead of jumping
   - carousel dots: visible inactive dots + clear active dot
   - header: working hamburger button for the offcanvas navigation
   - main business cards / application solutions: no overlap, no clipping
   - video poster / autoplay fallback lives in index.html
   Desktop (>1240px) is intentionally untouched.
   ==================================================================== */

/* ---------- shared for everything below the desktop breakpoint ---------- */
@media only screen and (max-width:1240px) {

  /* header hamburger: the original iconfont glyph is empty in this clone, so
     draw a 3-bar button with CSS and give it a 48px tap target */
  .mobile_key { display:block; position:absolute; right:10px; top:50%; margin:-24px 0 0;
    float:none; width:48px; height:48px; z-index:95;
    -webkit-tap-highlight-color:transparent; }
  .mobile_key i { display:block; position:relative; width:22px; height:2px; margin:23px auto 0;
    background:#555; line-height:0; font-size:0; font-style:normal; }
  .mobile_key i:before, .mobile_key i:after { content:''; position:absolute; left:0;
    width:22px; height:2px; background:#555; }
  .mobile_key i:before { top:-7px; }
  .mobile_key i:after { top:7px; }

  /* before the carousel JS initialises the slide items are stacked; keep the
     layout stable so the page does not jump when owl-carousel boots */
  .ibanner .owl-carousel:not(.owl-loaded) .item { display:none; }

  /* hero text entrance: start 26/20px below, settle at translateY(0) */
  .ibanner .item .wrap .t1 { opacity:0; -webkit-transform:translateY(26px);
    transform:translateY(26px); transition:opacity .5s ease .1s, transform .5s ease .1s; }
  .ibanner .item .wrap .t2 { opacity:0; -webkit-transform:translateY(20px);
    transform:translateY(20px); transition:opacity .55s ease .3s, transform .55s ease .3s; }
  .ibanner .active .item .wrap .t1 { opacity:1; -webkit-transform:translateY(0);
    transform:translateY(0); transition:opacity .5s ease .1s, transform .5s ease .1s; }
  .ibanner .active .item .wrap .t2 { opacity:1; -webkit-transform:translateY(0);
    transform:translateY(0); transition:opacity .55s ease .3s, transform .55s ease .3s; }

  /* carousel dots: white dot + dark ring + shadow so all 4 are readable on photos */
  .ibanner .iban_dots .owl-dot span { background:#fff; border:1px solid rgba(0,0,0,.45);
    box-shadow:0 0 0 2px rgba(0,0,0,.28); box-sizing:border-box; }
  .ibanner .iban_dots .owl-dot.active span { background:#d7181f; border-color:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.6); }
}

/* ---------- tablet / small laptop (761px - 1240px) ---------- */
@media only screen and (min-width:761px) and (max-width:1240px) {

  /* the legacy template pins .wrap to 940px, which overflows a 768-1024 tablet:
     make it fluid so nothing is cut off and the hamburger stays on screen */
  .wrap, .mwrap { width:auto; max-width:940px; margin-left:auto; margin-right:auto;
    padding-left:15px; padding-right:15px; box-sizing:border-box; }
  .mwrap .wrap { padding-left:0; padding-right:0; }

  /* hero text on a fluid banner */
  .ibanner { min-height:630px; }
  .ibanner .item .wrap { left:0; right:0; width:100%; margin-left:0;
    padding:0 30px; box-sizing:border-box; }

  /* dots: horizontal at the bottom right of the banner */
  .ibanner .iban_dots { right:22px; left:auto; top:auto; bottom:22px; width:auto;
    margin:0; text-align:right; line-height:0; }
  .ibanner .iban_dots:after { display:none; }
  .ibanner .iban_dots .owl-dot { display:inline-block; margin:0 5px; line-height:0; }
  .ibanner .iban_dots .owl-dot.active { border:none; width:13px; height:13px; line-height:1; }

  /* application solutions: all four copy blocks share ONE css-grid cell and
     only the active one is visible; switching only changes opacity, so the
     section height (and everything below it) never moves. Cards stay in a row
     underneath. */
  .ipart02 { overflow-anchor:none; }
  .ipart02 .ip2_bg { display:grid; grid-template-columns:100%; height:auto; }
  .ipart02 .ip2_bg li { grid-area:1 / 1; position:relative; left:auto; margin:0;
    width:100%; height:auto; display:block; opacity:0; visibility:hidden;
    transition:opacity .25s ease; }
  .ipart02 .ip2_bg li.cur { opacity:1; visibility:visible; }
  .ipart02 .ip2_bg li .infor { width:100%; padding:50px 0 36px; }
  .ipart02 .content { position:static; left:auto; bottom:auto; width:100%;
    background:#1e1e1e; overflow-anchor:none; }
  .ipart02 .content li { padding:24px 0; touch-action:manipulation; }
  .ipart02 .content li:after { display:none; }
  .ipart02 .content li .t { font-size:16px; }
}

/* ---------- phones (<= 760px) ---------- */
@media only screen and (max-width:760px) {

  /* ---- header ---- */
  .header .head_bott { min-height:58px; }
  .header .head_bott .logo { width:calc(100% - 64px); padding:10px 0; box-sizing:border-box; }
  .header .head_bott .logo img { width:auto; max-width:100%; max-height:38px; }
  .header.fixed .head_bott { height:58px; }
  .header.fixed .head_bott .logo { padding:10px 0; }

  /* ---- hero banner ---- */
  .ibanner { overflow:hidden; background:#1e1e1e; min-height:62vw; }
  .ibanner .item { height:auto; padding-bottom:62%; }
  .ibanner .owl-carousel .owl-item img { position:absolute; left:0; top:0; width:100%;
    height:100%; max-width:none; margin:0; object-fit:cover; object-position:center center; }
  .ibanner .item .wrap { position:absolute; left:0; top:0; width:100%; height:100%; margin:0;
    padding:10px 7% 34px; box-sizing:border-box; display:-webkit-box; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column;
    -webkit-box-pack:center; justify-content:center; -webkit-box-align:center;
    align-items:center; overflow:hidden; text-align:center; color:#fff; }
  .ibanner .item .wrap .t1,
  .ibanner .active .item .wrap .t1 { font-size:26px; line-height:1.35; letter-spacing:0;
    text-shadow:0 2px 10px rgba(0,0,0,.55); }
  .ibanner .item .wrap .t2,
  .ibanner .active .item .wrap .t2 { font-size:15px; line-height:1.55; margin-top:10px;
    text-shadow:0 1px 6px rgba(0,0,0,.6); }
  .ibanner .item:after { content:''; position:absolute; left:0; right:0; top:0; bottom:0;
    background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.38));
    z-index:1; pointer-events:none; }
  .ibanner .item .wrap { z-index:6; }

  /* ---- banner dots ---- */
  .ibanner .iban_dots { position:absolute; left:0; right:0; bottom:10px; top:auto;
    width:100%; margin:0; padding:0; text-align:center; line-height:0; z-index:11; }
  .ibanner .iban_dots:after { display:none; }
  .ibanner .iban_dots .owl-dot { display:inline-block; margin:0 3px; padding:6px;
    line-height:0; width:12px; height:12px; border:none; border-radius:50%;
    vertical-align:middle; }
  .ibanner .iban_dots .owl-dot span { display:block; width:12px; height:12px; }
  .ibanner .iban_dots .owl-dot.active { width:12px; height:12px; border:none; line-height:0; }
  .ibanner .iban_dots .owl-dot.active span { display:block; width:12px; height:12px; }

  /* ---- main business: one full-width card per row ---- */
  .ipart01 .right { float:none; clear:both; width:100%; }
  .ipart01 .right ul { margin:0; }
  .ipart01 .right li { float:none; width:100%; margin:0 0 12px; }
  .ipart01 .right li:last-child { margin-bottom:0; }
  .ipart01 .right li .rect-1686 { padding-bottom:52%; }
  .ipart01 .right li .cover { padding:20px 18px; }
  .ipart01 .right li .cover .box .c_line { width:36px; margin-bottom:14px; }
  .ipart01 .right li .cover .box .t,
  .ipart01 .right li .cover .box .t.el { font-size:24px; line-height:1.3; }

  /* ---- application solutions: grid stack + a 2x2 card grid ---- */
  .ipart02 { overflow-anchor:none; }
  .ipart02 .ip2_bg { display:grid; grid-template-columns:100%; height:auto; }
  .ipart02 .ip2_bg li { grid-area:1 / 1; position:relative; left:auto; margin:0;
    width:100%; height:auto; display:block; opacity:0; visibility:hidden;
    transition:opacity .25s ease; }
  .ipart02 .ip2_bg li.cur { opacity:1; visibility:visible; }
  .ipart02 .ip2_bg li .infor { width:100%; padding:34px 0 28px; }
  .ipart02 .ip2_bg li .infor .big_t { font-size:22px; margin-bottom:10px; }
  .ipart02 .ip2_bg li .infor .t { font-size:19px; margin-bottom:8px; }
  .ipart02 .ip2_bg li .infor .c { font-size:15px; line-height:1.7; }
  .ipart02 .content { position:static; left:auto; bottom:auto; width:100%;
    background:#1e1e1e; overflow-anchor:none; }
  .ipart02 .content .wrap { padding-left:0; padding-right:0; }
  .ipart02 .content ul.full-row { display:flex; flex-wrap:wrap; }
  .ipart02 .content li { float:none; width:50%; flex:0 0 50%; box-sizing:border-box;
    padding:16px 10px; touch-action:manipulation; }
  .ipart02 .content li:after { display:none; }
  .ipart02 .content li .icon { width:44px; height:44px; background-size:cover;
    margin-bottom:6px; }
  .ipart02 .content li .icon01 { background-position:0 0; }
  .ipart02 .content li .icon02 { background-position:-44px 0; }
  .ipart02 .content li .icon03 { background-position:-88px 0; }
  .ipart02 .content li .icon04 { background-position:-132px 0; }
  .ipart02 .content li .t { font-size:14px; line-height:1.35; }
  .ipart02 .content li.cur { background:#b88e16; }

  /* ---- company video + copy ---- */
  .ipart05 { padding:26px 0 0; }
  .ipart05 .video video { width:100%; height:auto; display:block; background:#000; }
  .ipart05 .about { margin-top:18px; }
  .ipart05 .about .t1 { font-size:24px; line-height:1.3; }
  .ipart05 .about .t2 { font-size:15px; line-height:1.7; }
  .ipart05 .about .line { margin-left:auto; margin-right:auto; }

  /* ---- misc ---- */
  .en-cta { padding:34px 0; }
  .en-cta h2 { font-size:24px; }
  .en-cta p { font-size:15px; }
  .ipart04 .infor a .t { font-size:22px; }
}

/* ---------- small phones (<= 480px) ---------- */
@media only screen and (max-width:480px) {
  .ibanner { min-height:66vw; }
  .ibanner .item { padding-bottom:66%; }
  .ibanner .item .wrap .t1,
  .ibanner .active .item .wrap .t1 { font-size:22px; }
  .ibanner .item .wrap .t2,
  .ibanner .active .item .wrap .t2 { font-size:14px; margin-top:8px; }
  .ipart01 .right li .cover .box .t,
  .ipart01 .right li .cover .box .t.el { font-size:21px; }
  .ipart02 .ip2_bg li .infor { padding:28px 0 22px; }
  .ipart02 .ip2_bg li .infor .big_t { font-size:20px; }
  .ipart02 .ip2_bg li .infor .c { font-size:14px; }
  .ipart02 .content li { padding:14px 8px; }
  .ipart02 .content li .t { font-size:13px; }
  .ipart05 .about .t1 { font-size:22px; }
}


/* ====================================================================
   2026-11 right sidebar Instagram link (task-10)
   Adds li.rtbar_li0 above the phone button and shifts the other three
   buttons down by 67px (Instagram 0 / phone 67 / WeChat 134 / TOP 201).
   ==================================================================== */
.right_bar { height:268px; }
.right_bar li.rtbar_li0 { top:0; width:65px; }
.right_bar li.rtbar_li1 { top:67px; }
.right_bar li.rtbar_li2 { top:134px; }
.right_bar li.rtbar_li4 { top:201px; }
.right_bar li.rtbar_li0 a { display:-webkit-box; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  width:65px; height:67px; overflow:hidden;
  background-color:#bc1888;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  -webkit-transition:-webkit-filter .2s ease; transition:filter .2s ease; }
.right_bar li.rtbar_li0 a:hover { -webkit-filter:brightness(1.12) saturate(1.05);
  filter:brightness(1.12) saturate(1.05); }
.right_bar li.rtbar_li0 a svg { display:block; width:26px; height:26px;
  pointer-events:none; }


/* ====================================================================
   2026-11 task-11 mobile refinements
   1) no white line above the business-card titles on phones
   3) fade-up reveal for titles (opacity/transform only; classes added by JS
      only on <=760px and only when prefers-reduced-motion is not set)
   ==================================================================== */
@media only screen and (max-width:760px) {
  .ipart01 .right li .cover .box .c_line { display:none; }

  .ipart01 .right li .cover .box .t.js-reveal,
  .ipart01 .left .big_infor .tit.js-reveal,
  .ipart04 .infor .t.js-reveal,
  .ipart05 .about .t1.js-reveal,
  .en-cta h2.js-reveal {
    opacity:0;
    -webkit-transform:translateY(18px);
    transform:translateY(18px);
    transition:opacity .65s ease, -webkit-transform .65s ease;
    transition:opacity .65s ease, transform .65s ease;
  }
  .ipart01 .right li .cover .box .t.js-reveal.is-revealed,
  .ipart01 .left .big_infor .tit.js-reveal.is-revealed,
  .ipart04 .infor .t.js-reveal.is-revealed,
  .ipart05 .about .t1.js-reveal.is-revealed,
  .en-cta h2.js-reveal.is-revealed {
    opacity:1;
    -webkit-transform:none;
    transform:none;
  }
}

@media only screen and (max-width:760px) and (prefers-reduced-motion: reduce) {
  .ipart01 .right li .cover .box .t.js-reveal,
  .ipart01 .left .big_infor .tit.js-reveal,
  .ipart04 .infor .t.js-reveal,
  .ipart05 .about .t1.js-reveal,
  .en-cta h2.js-reveal {
    opacity:1;
    -webkit-transform:none;
    transform:none;
    transition:none;
  }
}
/* ====================================================================
   2026-11 task-11b: small contact buttons in the mobile header
   (Instagram new-window link + WeChat QR popup). Desktop keeps using the
   right floating bar, so these are display:none on desktop.
   ==================================================================== */
.m-contact-links, .m-wx-layer { display:none; }
@media only screen and (max-width:760px) {
  .m-contact-links { display:-webkit-box; display:flex; -webkit-box-align:center;
    align-items:center; position:absolute; right:64px; top:50%; margin-top:-14px;
    height:28px; z-index:94; }
  .m-contact-links > * + * { margin-left:6px; }
  .m-contact-links a, .m-contact-links button { display:-webkit-box; display:flex;
    -webkit-box-align:center; align-items:center; -webkit-box-pack:center;
    justify-content:center; width:28px; height:28px; padding:0; margin:0;
    border-radius:50%; background:#fff; border:1px solid #eadfc4;
    box-shadow:0 1px 3px rgba(0,0,0,.10); cursor:pointer; box-sizing:border-box;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .m-contact-links a:active, .m-contact-links button:active { background:#fbf7ee; }
  .m-contact-links svg { display:block; width:15px; height:15px; }

  .m-wx-layer { position:fixed; z-index:9999; left:0; right:0; top:0; bottom:0;
    background:rgba(20,20,20,.62); -webkit-box-align:center; align-items:center;
    -webkit-box-pack:center; justify-content:center; }
  .m-wx-layer.is-open { display:-webkit-box; display:flex; }
  .m-wx-box { position:relative; width:78vw; max-width:320px; background:#fff;
    border-radius:10px; padding:20px 18px 16px; text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.35); box-sizing:border-box; }
  .m-wx-box img { display:block; width:100%; max-width:240px; height:auto; margin:0 auto; }
  .m-wx-title { font-size:15px; color:#1e1e1e; margin:0 0 12px; }
  .m-wx-hint { font-size:12px; color:#888; margin-top:10px; }
  .m-wx-close { position:absolute; right:6px; top:4px; width:32px; height:32px;
    border:0; background:transparent; font-size:22px; line-height:32px; color:#999;
    cursor:pointer; padding:0; }
}


/* ====================================================================
   2026-11 task-11c: aesthetic-audit fixes
   ==================================================================== */
@media only screen and (max-width:760px) {
  /* F1: product / project card titles wrap to (max) two lines instead of
     being cut with an ellipsis on narrow phones */
  .video_list01 .cont { padding:8px 0; }
  .video_list01 .cont .title,
  .video_list01 .cont .title.el { white-space:normal; overflow:visible;
    text-overflow:clip; line-height:1.3; }

  /* F2: the logo link is only as tall as the image; enlarge its tap area
     without changing the layout */
  .header .head_bott .logo a { position:relative; display:inline-block; }
  .header .head_bott .logo a:after { content:''; position:absolute; left:-6px;
    right:-6px; top:-8px; bottom:-8px; }
}