:root{
  --bg:#F2F4F7;
  --card:#FFFFFF;
  --line:#DDE2EA;
  --muted:#E8EAF3;
  --main:#3B2E8C;
  --main2:#5544B8;
  --sec:#F2A46B;
  --acc:#7A9464;
  --ink:#20243A;
  --dim:#5C6478;
  --col:720px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
  font-size:16px;line-height:1.8;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,figcaption,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--main);text-decoration:none}
a:hover{color:var(--sec)}
.wrap{max-width:var(--col);margin:0 auto;padding:0 20px}

.notice{background:var(--main);color:#EDEBFA}
.notice__in{max-width:1120px;margin:0 auto;padding:7px 20px;font-size:12.5px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;letter-spacing:.3px}
.bar{background:var(--card);border-bottom:1px solid var(--line)}
.bar__in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.mark{display:flex;align-items:center;gap:11px;color:var(--ink)}
.mark img{width:38px;height:38px;border-radius:12px}
.mark__name{display:block;font-size:17px;font-weight:700;letter-spacing:.4px;line-height:1.2}
.mark__en{font-size:10.5px;color:var(--dim);letter-spacing:2.2px;line-height:1.3;display:block;font-weight:400}
.menu{display:flex;gap:20px;margin-left:auto;font-size:15px}
.menu a{color:var(--dim);padding-bottom:3px;border-bottom:2px solid transparent}
.menu a[aria-current="page"]{color:var(--main);border-bottom-color:var(--sec);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center}
.btn.btn-solid{
  display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;
  background:var(--main);color:#fff;font-weight:600;font-size:14.5px;padding:10px 22px;border-radius:8px;
}
.btn.btn-solid:hover{background:var(--main2);color:#fff;padding:10px 22px;display:inline-flex}
.btn.btn-line{
  display:inline-flex;align-items:center;justify-content:center;width:auto;white-space:nowrap;
  border:1.5px solid var(--main);color:var(--main);padding:9px 20px;border-radius:8px;background:transparent;font-size:14.5px;
}
.btn.btn-line:hover{background:var(--main);color:#fff;padding:9px 20px;display:inline-flex}
.bar__cta{margin-left:26px}

.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:30}
.rail a{width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--dim);font-size:11px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;box-shadow:0 2px 6px rgba(32,36,58,.07)}
.rail a:hover{border-color:var(--main);color:var(--main)}

.intro{background:var(--card);border-bottom:1px solid var(--line)}
.intro__in{max-width:var(--col);margin:0 auto;padding:46px 20px 40px}
.intro__tag{display:inline-block;font-size:11.5px;letter-spacing:2.4px;color:var(--main);background:var(--muted);padding:3px 10px;border-radius:3px}
.intro h1{font-size:36px;line-height:1.32;margin:16px 0 16px;font-weight:800;letter-spacing:.3px}
.intro h1 i{font-style:normal;color:var(--sec)}
.lead{color:var(--dim);font-size:16.5px;line-height:1.9}
.intro__row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.intro__facts{display:flex;gap:30px;margin-top:30px;padding-top:22px;border-top:1px dashed var(--line);flex-wrap:wrap}
.intro__facts div{font-size:13px;color:var(--dim)}
.intro__facts b{display:block;font-size:20px;color:var(--main);line-height:1.35}
.hero-img{max-width:var(--col);margin:0 auto;padding:26px 20px 8px}
.hero-img img{width:auto;max-width:min(320px,100%);height:auto;margin:0 auto;border-radius:16px;border:1px solid var(--line)}

.block{padding:58px 0}
.block--gray{background:var(--muted)}
.bhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.bhead h2{font-size:25px;line-height:1.38;font-weight:800}
.bhead p{font-size:13.5px;color:var(--dim);max-width:24em;text-align:right;line-height:1.7}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slab{background:var(--card);border:1px solid var(--line);padding:22px 22px 20px;position:relative}
.slab::before{content:"";position:absolute;left:22px;right:22px;top:0;border-top:1px dashed var(--sec)}
.slab__eye{font-size:11px;letter-spacing:2.2px;color:var(--acc);padding-top:6px}
.slab h3{font-size:17.5px;line-height:1.5;margin:6px 0 9px}
.slab p{font-size:14.5px;color:var(--dim);line-height:1.82}
.slab ul{margin-top:12px;display:grid;gap:5px}
.slab li{font-size:13.5px;color:var(--dim);padding-left:15px;position:relative}
.slab li::before{content:"·";position:absolute;left:2px;top:-2px;color:var(--sec);font-weight:700;font-size:18px}

.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shots figure{background:var(--card);border:1px solid var(--line);padding:12px 12px 14px}
.shots img{width:100%;height:auto;border-radius:10px}
.shots figcaption{font-size:13px;color:var(--dim);line-height:1.65;margin-top:10px}
.shots figcaption b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}

.fold{border-top:1px solid var(--line)}
.fold details{background:var(--card);border-bottom:1px solid var(--line)}
.fold summary{cursor:pointer;list-style:none;padding:15px 40px 15px 4px;font-size:15.5px;font-weight:600;position:relative}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"›";position:absolute;right:8px;top:12px;font-size:22px;color:var(--sec);transform:rotate(90deg)}
.fold details[open] summary::after{transform:rotate(-90deg)}
.fold details p{padding:0 4px 16px;font-size:14.5px;color:var(--dim);line-height:1.86}

.tail{background:var(--main);color:#fff}
.tail__in{max-width:var(--col);margin:0 auto;padding:44px 20px;text-align:center}
.tail h2{font-size:23px;line-height:1.45;margin-bottom:10px}
.tail p{font-size:14px;color:#D9D4F2;margin-bottom:20px}
.tail .btn.btn-solid{background:var(--sec);color:#20243A}
.tail .btn.btn-solid:hover{background:#F7B985;color:#20243A}

.art{max-width:var(--col);margin:0 auto;padding:44px 20px 8px}
.art h2{font-size:24px;line-height:1.4;margin:34px 0 12px;font-weight:800;padding-left:14px;border-left:4px solid var(--sec)}
.art h3{font-size:17.5px;margin:22px 0 7px;color:var(--main)}
.art p{font-size:15.5px;color:var(--dim);line-height:1.9;margin-bottom:13px}
.art b{color:var(--ink)}
.art ol{counter-reset:t;margin:0 0 16px;display:grid;gap:12px}
.art ol li{counter-increment:t;padding-left:36px;position:relative;font-size:15px;color:var(--dim);line-height:1.86}
.art ol li::before{content:counter(t);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--main);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.art ul{margin:0 0 16px;display:grid;gap:7px}
.art ul li{font-size:15px;color:var(--dim);padding-left:16px;position:relative;line-height:1.85}
.art ul li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:2px;background:var(--sec)}
.art figure{margin:24px 0}
.art figure img{width:auto;max-width:min(320px,100%);height:auto;margin:0 auto;border-radius:14px;border:1px solid var(--line)}
.art figcaption{text-align:center;font-size:13px;color:var(--dim);margin-top:9px}
.art blockquote{margin:18px 0;padding:14px 18px;background:var(--muted);border-left:4px solid var(--acc);font-size:15px;color:var(--main)}

.grid-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);margin:6px 0 18px}
.grid-table th,.grid-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.grid-table th{background:var(--muted);font-weight:700;white-space:nowrap;color:var(--ink)}
.grid-table td{color:var(--dim)}
.tnote{font-size:13px;color:var(--dim);margin:0 0 8px}

.page-top{background:var(--card);border-bottom:1px solid var(--line)}
.page-top__in{max-width:var(--col);margin:0 auto;padding:36px 20px 32px}
.path{font-size:12.5px;color:var(--dim);letter-spacing:.4px}
.path a{color:var(--main)}
.page-top h1{font-size:29px;line-height:1.34;margin:10px 0 12px;font-weight:800}

.base{background:#20243A;color:#C9CDDA;padding:44px 0 0}
.base__in{max-width:var(--col);margin:0 auto;padding:0 20px;text-align:center}
.base img{width:46px;height:46px;border-radius:13px;margin:0 auto 12px}
.base b{display:block;color:#fff;font-size:16px;letter-spacing:.6px;margin-bottom:8px}
.base p{font-size:13px;line-height:1.8;color:#A9AEC2;max-width:40em;margin:0 auto}
.base__links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:13.5px}
.base__links a{color:#C9CDDA}
.base__links a:hover{color:#fff}
.base__legal{margin-top:26px;padding:14px 0 18px;border-top:1px solid #333850;font-size:12px;color:#8B90A3;line-height:1.8}
.base__legal span{display:block}
.base__legal span + span{margin-top:4px}

.up{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:var(--main);color:#fff;font-size:12.5px;padding:7px 16px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}
.up[data-show]{opacity:1;pointer-events:auto}

@keyframes slideup{from{opacity:0;clip-path:inset(28% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.rise{animation:slideup .58s cubic-bezier(.2,.7,.3,1) both}
.rise.late{animation-delay:.1s}

@media (max-width:980px){
  .rail{display:none}
  .intro h1{font-size:30px}
  .duo{grid-template-columns:1fr}
  .bhead{flex-direction:column;align-items:flex-start;gap:8px}
  .bhead p{text-align:left}
}
@media (max-width:620px){
  body{font-size:15px}
  .bar__in{flex-wrap:wrap;padding:10px 16px;gap:10px}
  .mark{order:1}
  .bar__cta{order:2;margin-left:auto}
  .menu{order:3;flex:1 0 100%;justify-content:center;flex-wrap:wrap;gap:16px;font-size:14px}
  .notice__in{font-size:11.5px;gap:10px;padding:6px 14px}
  .intro__in{padding:32px 16px 30px}
  .intro h1{font-size:25px}
  .lead{font-size:15.5px}
  .intro__facts{gap:20px}
  .block{padding:42px 0}
  .bhead h2{font-size:21px}
  .shots{grid-template-columns:1fr;gap:14px}
  .art,.wrap{padding-left:16px;padding-right:16px}
  .art h2{font-size:20px}
  .page-top h1{font-size:22px}
  .grid-table{display:block;overflow-x:auto;white-space:nowrap}
  .tail h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;clip-path:none}
}