/* V2 composition with the current brand colors, readable type, and motion. */
.icon-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.13em;flex-shrink:0;overflow:visible;pointer-events:none}
.mobile-business{display:none}
.hero .main-landmark{animation:none}
.hero .landmark{transition:none;transform-origin:50% 65%}
.hero,.hero[data-scene=city]{min-height:740px;height:calc(100svh - 94px);max-height:1000px}
.hero-meta{display:flex;top:28px;left:4%;right:4%;font-size:14px;letter-spacing:1px;color:#fff}
.hero-title-wrap{top:9%;left:6%;width:43%}
.hero-word{font-size:clamp(130px,15vw,260px);font-weight:600;line-height:1.3;letter-spacing:-.1em;margin-left:-.045em}
.hero-word>span{color:#fff;transform:none}
.hero h1,.hero[data-scene=city] h1{font-size:clamp(26px,2.8vw,44px);line-height:1.55;letter-spacing:3px;margin-top:17px}
.hero #hero-description.hero-origin{margin-top:22px;gap:4px}.hero-origin .origin-label{font-size:16px}.hero-origin strong{font-size:21px}
.hero .landmark{height:auto;bottom:auto;object-fit:contain;object-position:center;transform:none}
.hero .main-landmark{display:block;width:48%;left:51%;top:34%;opacity:1;z-index:2}
.hero .secondary.pagoda{display:block;width:17%;left:72%;top:10%;height:auto;opacity:.22;z-index:0}
.hero .secondary.bridge{display:block;width:22%;left:41%;top:31%;height:auto;opacity:.13;z-index:0}
.hero .extra-landmark{display:none}
.outline-word{display:block;left:39%;top:3%;font:700 clamp(100px,17vw,320px)/1 Arial,sans-serif;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px #ffffff26}
.stage-line,.stage-baseline{display:block;background:#ffffff26}.stage-cross{display:block;color:#fff;opacity:.5}
.landmark-caption{display:block;top:28%;left:58%;font-size:14px;letter-spacing:1px;color:#fff}
.hero[data-scene=city] .main-landmark{display:block;opacity:.15;transform:scale(.65) translate(0,-35%);left:52%;top:32%;width:48%}
.hero[data-scene=city] .secondary.bridge{opacity:1;width:45%;left:47%;top:35%;height:auto;bottom:auto;z-index:4}
.hero[data-scene=city] .secondary.pagoda{opacity:.65;width:23%;left:77%;top:14%;height:auto;bottom:auto}
.hero[data-scene=city] .extra-landmark.flower{display:block;opacity:.3;left:42%;top:12%;bottom:auto;width:10%;height:auto}
.hero[data-scene=city] .extra-landmark.statue{display:block;opacity:.3;left:62%;top:8%;bottom:auto;width:8%;height:auto}
.hero[data-scene=city] .extra-landmark.industry{display:block;opacity:.23;left:34%;top:70%;bottom:auto;width:18%;height:auto}
.hero[data-scene=city] .landmark-caption{color:#fff}.hero[data-scene=city] .outline-word{-webkit-text-stroke-color:#ffffff26}
.scene-controls{left:6%;bottom:38px;gap:30px}.scene-controls button{font-size:17px!important}
@media(min-width:1600px){.hero-title-wrap{top:8%}.hero h1,.hero[data-scene=city] h1{margin-top:25px}}
@media(max-width:1200px) and (min-width:651px){.hero,.hero[data-scene=city]{min-height:660px}.hero-word{font-size:180px}.hero-title-wrap{top:13%}.hero .main-landmark{width:48%;top:37%;left:51%}.landmark-caption{top:29%}.hero h1,.hero[data-scene=city] h1{font-size:32px}.hero-origin strong{font-size:19px}}
@media(max-width:900px) and (min-width:651px){.hero,.hero[data-scene=city]{height:720px;min-height:0}.hero-title-wrap{top:13%;left:5%;width:45%}.hero-word{font-size:17.5vw;white-space:nowrap}.hero h1,.hero[data-scene=city] h1{font-size:30px;margin-top:18px}.hero .main-landmark{top:41%;width:51%;left:50%}.hero .secondary.pagoda{top:24%;left:79%;width:19%}.hero .secondary.bridge{top:36%;left:46%}.outline-word{top:20%;font-size:160px}.landmark-caption{top:34%;left:58%;font-size:14px}.hero-meta{font-size:13px}.hero-meta .meta-line{display:none}}
@media(max-width:650px){
 html{scroll-padding-top:74px}.header{height:74px;padding:0 22px}.logo img{width:40px;height:40px}.brand-type strong{font-size:21px;letter-spacing:2px}.logo{gap:12px}.menu-toggle{padding-left:17px}
 .hero,.hero[data-scene=city]{height:740px;min-height:0;max-height:none}
 .hero-meta{top:22px;left:22px;right:22px;font-size:13px;letter-spacing:0;gap:20px}.hero-meta>span:first-child{max-width:none}.hero-meta>span:last-child{gap:0}.hero-meta .meta-line{display:none}.hero-meta>span:last-child{font-size:0}.hero-meta>span:last-child:after{content:'自 1999 年起';font-size:13px}
 .hero-title-wrap{left:22px;top:10%;width:calc(100% - 44px)}.hero-word{font-size:139px;line-height:1.2;letter-spacing:-.09em}
 .hero h1,.hero[data-scene=city] h1{font-size:24px;line-height:1.5;letter-spacing:1px;margin-top:17px;max-width:none}.hero h1 br{display:none}
 .hero #hero-description.hero-origin{margin-top:15px;gap:3px}.hero-origin .origin-label{font-size:14px}.hero-origin strong{font-size:18px;line-height:1.8;font-weight:400;letter-spacing:0}
 .hero .main-landmark{top:51%;left:24%;width:80%;height:auto;bottom:auto;z-index:2;transform:none}
 .hero .secondary.pagoda{width:28%;left:66%;top:35%;height:auto;bottom:auto;opacity:.18}
 .hero .secondary.bridge{width:33%;left:4%;top:49%;height:auto;bottom:auto;opacity:.16}
 .outline-word{top:38%;left:3%;font-size:100px}.line-one{top:72%;left:0;width:100%;transform:rotate(-20deg)}.line-two{left:73%;top:35%;height:50%}.stage-baseline{top:83%;left:10%;right:6%}.cross-one{top:45%;left:14%;font-size:18px}.cross-two{bottom:18%;right:9%;font-size:18px}.landmark-caption{left:25%;top:85%;font-size:13px;letter-spacing:0}
 .hero[data-scene=city] .main-landmark{left:37%;top:50%;width:80%;height:auto;bottom:auto;opacity:.14;transform:scale(.65) translate(0,-15%)}
 .hero[data-scene=city] .secondary.bridge{width:79%;left:8%;top:51%;height:auto;bottom:auto;opacity:1}
 .hero[data-scene=city] .secondary.pagoda{width:31%;left:66%;top:38%;height:auto;bottom:auto;opacity:.45}
 .hero[data-scene=city] .extra-landmark.flower{width:17%;left:5%;top:40%;bottom:auto;height:auto;opacity:.3}
 .hero[data-scene=city] .extra-landmark.statue{width:13%;left:81%;top:71%;bottom:auto;height:auto;opacity:.3}
 .hero[data-scene=city] .extra-landmark.industry{width:23%;left:9%;top:77%;bottom:auto;height:auto;opacity:.23}
 .hero[data-scene=city] .landmark-caption{left:35%;top:86%}
 .scene-controls{bottom:20px;left:22px;gap:28px}.scene-controls button{font-size:16px!important;padding:11px 0}
 .service-dock{grid-template-columns:1fr 1fr}.service-dock>a{min-height:82px;padding-block:22px!important}.service-dock>a>span:first-child{font-size:21px}.service-dock>a b{font-size:25px}
 .announcement{padding:17px 22px;gap:13px;font-size:14px}.announcement>span:first-child,.announcement>a{font-size:14px}.announcement>span:first-child{padding-right:13px}
 .section{padding:44px 22px 50px}.section-index,.section-index>a,.section-index>span:last-child{font-size:14px;line-height:1.7}.section-index{gap:12px}
 .profile-layout,.pharma-layout,.strength-layout{margin-top:27px;gap:27px}.profile-copy h2,.pharma-layout h2,.strength-layout h2{font-size:33px;line-height:1.5;letter-spacing:0}.profile-copy>p,.pharma-layout p,.strength-layout p{font-size:16px;line-height:1.95;margin-top:19px}
 .profile-layout>.photo,.pharma-layout>.photo,.strength-layout>.photo{height:auto;aspect-ratio:4/3}.photo figcaption,.concept-photo figcaption{font-size:13px;line-height:1.6;padding:7px 10px}.profile-facts{margin-top:25px;padding:18px 0;gap:12px}.profile-facts>span{font-size:13px}.profile-facts strong{font-size:33px}.line-link,.profile-copy>.line-link,.pharma-layout .line-link{font-size:16px;padding:18px 0}
 .city-gallery{padding:30px 22px}.city-gallery-heading h2{font-size:26px}.landmark-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 15px;margin-top:23px}.landmark-gallery img{height:100px;padding:4px}.landmark-gallery figcaption{padding-top:12px;margin-top:6px}.landmark-gallery figcaption span{font-size:15px;line-height:1.5;display:block}.pharma-categories strong{font-size:22px}.pharma-categories small{font-size:15px}
 .business-heading{margin:26px 0 28px}.business-heading h2{font-size:33px;line-height:1.5;letter-spacing:-1px}.business-accordion{display:none}.mobile-business{display:block;border-top:1px solid var(--green)}
 .mobile-business details{border:1px solid var(--green);border-top:0;color:var(--blue);background:#fff}.mobile-business summary{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;list-style:none;font-size:19px;font-weight:500;cursor:pointer}.mobile-business summary::-webkit-details-marker{display:none}.mobile-sector-symbol{font:25px/1 Arial}.mobile-sector-symbol:before{content:'+'}.mobile-business details[open]{background:var(--green);color:#fff}.mobile-business details[open] .mobile-sector-symbol:before{content:'−'}
 .mobile-sector-content{height:260px;position:relative;padding:0 20px;overflow:hidden}.mobile-sector-glyph{position:absolute;right:3px;bottom:12px;font:600 222px/1.1 var(--serif);color:#fff;opacity:.2;pointer-events:none}.mobile-sector-content p{position:absolute;left:20px;bottom:76px;font-size:16px;line-height:1.9;color:#fff;z-index:1}.mobile-sector-content>a{position:absolute;bottom:19px;left:20px;right:20px;padding-top:17px;border-top:1px solid #ffffff66;font-size:16px;color:#fff;z-index:1}.mobile-business summary:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
 .strength-numbers{gap:28px;margin:24px 0 15px}.strength-numbers>div strong{font-size:40px}.strength-numbers strong small{font-size:16px}.strength-numbers>div>span{font-size:15px}.strength-links{font-size:15px;gap:20px;margin-top:22px;padding-top:20px}.home-strength .data-source{font-size:13px}.home-strength + .journal{margin-top:40px}
 .journal-cover{padding:27px 22px 31px;gap:23px}.journal-cover>.section-index{font-size:14px}.journal-cover h2{font-size:68px;letter-spacing:-4px;line-height:1.05}.journal-bottom{font-size:15px;line-height:1.7}.journal-bottom a{font-size:38px}.journal-content{padding:30px 22px 36px}.journal-tabs{gap:26px}.journal-tabs button{font-size:16px;padding-bottom:18px}.journal-row{padding:23px 0}.journal-row h3{font-size:20px;line-height:1.6}.journal-row small{font-size:14px}.anniversary-link{padding:18px;gap:15px;margin-top:26px}.anniversary-link img{width:58px;height:48px}.anniversary-link strong{font-size:17px}
 .catalog-layout{gap:22px;margin-top:25px}.catalog-title h2{font-size:34px;line-height:1.45}.catalog-title h2>span{font-size:70px;top:5px;right:0}.catalog-title p{font-size:16px;margin-top:19px}.catalog-table a{padding:21px 0}.catalog-table a strong{font-size:23px}.catalog-table a b{font-size:26px}
 .story-title{margin:29px 0 33px}.story-title h2{font-size:31px;line-height:1.6}.story-title p{font-size:16px;line-height:1.95;margin-top:18px}.timeline{gap:25px}.timeline>a{display:grid;grid-template-columns:.95fr 1.05fr;gap:0 20px;align-items:center;padding-top:16px}.timeline-year{font-size:59px;grid-row:auto;width:auto;line-height:1.15}.timeline-year>span{font-size:17px;right:-5px;top:0}.timeline-caption{font-size:16px;line-height:1.7;align-self:center}.story-values{margin-top:33px;padding-top:21px;gap:13px}.story-values>span,.story-values a{font-size:14px}.story-values p{font-size:16px;letter-spacing:0;line-height:1.9}.story-values i{margin:0 8px}
 .contact{padding:36px 22px 41px}.contact h2{font-size:64px;line-height:1.4;margin:7px 0 26px}.contact h2>span{font-size:65px}.contact>div>span,.contact-details>span{font-size:15px!important}.contact-details a{font-size:33px}.contact-details p{font-size:15px;line-height:1.8}
 footer{padding:29px 22px 0;gap:24px}.footer-logo img{width:36px;height:36px}.footer-logo .brand-type strong{font-size:21px}.footer-links{font-size:15px;gap:24px}.footer-bottom{font-size:13px;padding:17px 0}.back-top{font-size:27px}
 .site-menu{padding:23px 22px 35px}.menu-statement{font-size:32px;line-height:1.5;margin-bottom:23px}.menu-layout{margin-top:26px}.menu-layout nav>*{font-size:23px;padding:14px 0}.site-menu form{margin-top:28px}.site-menu form label{font-size:15px}.site-menu input,#search-results>a{font-size:16px}
 .page-hero{padding:24px 22px 32px}.page-hero h1{font-size:35px;line-height:1.4}.page-hero-row{margin-top:28px}.page-hero-row>p{font-size:16px;line-height:1.8}.breadcrumbs,.breadcrumbs a{font-size:14px}.page-sidebar{gap:22px;margin-bottom:26px}.page-sidebar>a{font-size:15px}.page-content>p,.page-content li,.page-content .data-source{font-size:16px;line-height:1.95}.page-content>.article-lead{font-size:22px}.page-content>h2{font-size:29px;margin-top:30px}.page-content .photo{height:auto;aspect-ratio:4/3}.page-content .photo figcaption{font-size:13px}.page-content .reference-note{font-size:15px;padding:15px}.reference-note b{font-size:15px}.page-link-grid a{font-size:21px}.facts-strip strong{font-size:27px}.facts-strip>span{font-size:14px}.contact-page a{font-size:29px}.page-end{font-size:15px}
}
@media(max-width:360px){.hero,.hero[data-scene=city]{height:710px}.hero-word{font-size:125px}.hero h1,.hero[data-scene=city] h1{font-size:22px;letter-spacing:0}.hero-origin strong{font-size:17px}.hero .main-landmark{top:54%}.hero-meta{font-size:12px}.hero-meta>span:last-child:after{font-size:12px}.scene-controls{gap:23px}.scene-controls button{font-size:15px!important}.landmark-gallery{gap:20px 12px}.landmark-gallery img{height:85px}.landmark-gallery figcaption span{font-size:14px}.business-heading h2{font-size:29px}.strength-numbers>div strong{font-size:36px}.strength-links{gap:13px;font-size:14px}.journal-cover h2{font-size:60px}.journal-tabs{gap:20px}.journal-tabs button{font-size:15px}.story-title h2{font-size:28px}.timeline-year{font-size:51px}.timeline-caption{font-size:15px}.story-values p{font-size:14px}.contact h2{font-size:59px}.contact-details a{font-size:30px}.facts-strip strong{font-size:23px}}

/* Two distinct sets: headquarters / bridge / pagoda, then flower / statue / power plant. */
.hero[data-scene=city] .main-landmark,.hero[data-scene=city] .secondary.bridge,.hero[data-scene=city] .secondary.pagoda{display:none}
.hero[data-scene=city] .extra-landmark.flower{display:block;width:29%;height:62%;left:59%;top:25%;bottom:auto;opacity:1;object-fit:contain;z-index:2}
.hero[data-scene=city] .extra-landmark.statue{display:block;width:13%;height:36%;left:84%;top:38%;bottom:auto;opacity:.45;object-fit:contain;z-index:0}
.hero[data-scene=city] .extra-landmark.industry{display:block;width:23%;height:27%;left:41%;top:55%;bottom:auto;opacity:.35;object-fit:contain;z-index:0}
.hero[data-scene=city] .landmark-caption{top:20%;left:64%}
@media(max-width:900px) and (min-width:651px){.hero[data-scene=city] .extra-landmark.flower{left:58%;top:33%;height:55%;width:31%}.hero[data-scene=city] .extra-landmark.statue{left:85%;top:35%;width:13%;height:31%}.hero[data-scene=city] .extra-landmark.industry{left:40%;top:64%;width:24%;height:21%}.hero[data-scene=city] .landmark-caption{top:28%;left:63%}}
@media(max-width:650px){.hero[data-scene=city] .extra-landmark.flower{left:32%;top:44%;width:49%;height:40%;opacity:1}.hero[data-scene=city] .extra-landmark.statue{left:76%;top:47%;width:22%;height:25%;opacity:.45}.hero[data-scene=city] .extra-landmark.industry{left:2%;top:64%;width:38%;height:19%;opacity:.35}.hero[data-scene=city] .landmark-caption{top:86%;left:41%}}

/* Give each of the three headquarters-scene landmarks its own place. */
.hero[data-scene=deyun] .main-landmark{left:58.5%;top:auto;bottom:17%;width:34%;height:auto}
.hero[data-scene=deyun] .secondary.bridge{left:41%;top:auto;bottom:17%;width:14%;height:auto;opacity:.5}
.hero[data-scene=deyun] .stage-baseline{top:auto;bottom:17%;left:41%;right:4%;width:auto}
.hero[data-scene=deyun] .secondary.pagoda{left:86%;top:29%;width:12%;height:auto;opacity:.45}
.hero[data-scene=deyun] .landmark-caption{left:63.5%;top:auto;bottom:calc(17% + 22.64vw + 24px)}
.hero[data-scene=city] .hero-meta,.hero[data-scene=city] .stage-cross{color:#fff}
@media(max-width:900px) and (min-width:651px){.hero[data-scene=deyun] .main-landmark{left:56.5%;top:auto;bottom:15%;width:38%}.hero[data-scene=deyun] .secondary.bridge{left:39%;top:auto;bottom:15%;width:14%}.hero[data-scene=deyun] .secondary.pagoda{left:84%;top:33%;width:13%}.hero[data-scene=deyun] .landmark-caption{left:62.5%;top:auto;bottom:calc(15% + 25.3vw + 24px)}.hero[data-scene=deyun] .stage-baseline{bottom:15%;left:39%}}
@media(max-width:650px){
 .hero,.hero[data-scene=city]{height:760px}
 .hero[data-scene=deyun] .main-landmark{left:34%;top:auto;bottom:23%;width:61%;height:auto}
 .hero[data-scene=deyun] .secondary.bridge{left:8%;top:auto;bottom:23%;width:22%;height:auto;opacity:.45}
 .hero[data-scene=deyun] .stage-baseline{bottom:23%;left:8%}
 .hero[data-scene=deyun] .secondary.pagoda{left:74%;top:42%;width:23%;height:auto;opacity:.45}
 .hero[data-scene=city] .extra-landmark.flower{left:33%;top:54%;width:47%;height:33%}
 .hero[data-scene=city] .extra-landmark.statue{left:77%;top:56%;width:21%;height:23%}
 .hero[data-scene=city] .extra-landmark.industry{left:2%;top:71%;width:36%;height:17%}
 .hero .landmark-caption{display:none}
 .hero[data-scene=city] h1 br{display:block}
}
@media(max-width:360px){.hero,.hero[data-scene=city]{height:730px}.hero[data-scene=deyun] .secondary.pagoda{top:44%}}
@media(max-width:650px){.page-content .photo.anniversary-figure{width:100%;height:auto;min-width:0;max-width:100%;aspect-ratio:4/3}.page-content .anniversary-figure img{width:100%;height:100%;min-width:0;object-fit:contain;padding:24px}}

/* Wide screens: constrain architecture by the banner height and anchor the
   secondary landmarks to the headquarters, rather than stretching with vw. */
@media(min-width:901px){
 .hero{
  --wide-hero-height:clamp(740px,calc(100svh - 94px),1000px);
  --hq-width:min(34vw,560px,calc(var(--wide-hero-height) * .6));
  --bridge-width:min(14vw,210px,calc(var(--wide-hero-height) * .23));
  --tower-width:min(10vw,170px,calc(var(--wide-hero-height) * .19));
  --hq-left:calc(75.5% - var(--hq-width) / 2);
  --hq-roof:calc(17% + var(--hq-width) * .665738);
 }
 .hero[data-scene=deyun] .main-landmark{left:var(--hq-left);width:var(--hq-width)}
 .hero[data-scene=deyun] .secondary.bridge{left:calc(var(--hq-left) - var(--bridge-width) - 36px);width:var(--bridge-width)}
 .hero[data-scene=deyun] .secondary.pagoda{left:min(calc(var(--hq-left) + var(--hq-width) - var(--tower-width) * .1),calc(98% - var(--tower-width)));top:auto;bottom:calc(var(--hq-roof) + 24px);width:var(--tower-width)}
 .hero[data-scene=deyun] .landmark-caption{left:calc(var(--hq-left) + 36px);bottom:calc(var(--hq-roof) + 24px)}
 .hero[data-scene=deyun] .stage-baseline{left:calc(var(--hq-left) - var(--bridge-width) - 36px);right:calc(24.5% - var(--hq-width) / 2 + 2px)}
}
@media(min-width:1600px){
 .hero{--bridge-gap:clamp(64px,4vw,104px)}
 .hero[data-scene=deyun] .secondary.bridge{left:calc(var(--hq-left) - var(--bridge-width) - var(--bridge-gap))}
 .hero[data-scene=deyun] .stage-baseline{left:calc(var(--hq-left) - var(--bridge-width) - var(--bridge-gap))}
 .hero[data-scene=deyun] .secondary.pagoda{left:calc(var(--hq-left) + var(--hq-width) - var(--tower-width) * .5);bottom:calc(var(--hq-roof) + 12px)}
}