*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0b1120;font-family:"Microsoft YaHei","PingFang SC",sans-serif;-webkit-tap-highlight-color:transparent}
.container{width:100%;height:100%;position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1120,#1a2a4a)}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transform:translateY(100%) scale(.92);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s ease;z-index:0;display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);z-index:10}
.slide.leave-up{opacity:.35;transform:translateY(-28%) scale(.88);z-index:5}
.slide.leave-down{opacity:.35;transform:translateY(28%) scale(.88);z-index:5}
.slide.from-bottom{transform:translateY(100%) scale(.92)}
.slide.from-top{transform:translateY(-100%) scale(.92)}
.slide.from-bottom.active,.slide.from-top.active{transform:translateY(0) scale(1)}
.canvas{position:relative;width:min(100vw,calc(100vh * 750 / 1470));height:min(100vh,calc(100vw * 1470 / 750));margin:auto;overflow:hidden;--u:calc(min(100vw,calc(100vh * 750 / 1470)) / 750)}
.canvas>img{width:100%;height:100%;display:block;transform:scale(1.08) translateY(46px);opacity:0;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .85s ease}
.slide.active .canvas>img{transform:scale(1) translateY(0);opacity:1}
.video-area{opacity:0;transform:translateY(24px);transition:opacity .7s ease .25s,transform .7s cubic-bezier(.22,1,.36,1) .25s}
.slide.active .video-area{opacity:1;transform:translateY(0)}
.video-area{position:absolute;left:7.333333%;top:34.661957%;width:85.333333%;height:24.489796%;overflow:hidden;background:transparent}
.video-area video{width:100%;height:100%;object-fit:cover;display:block;background:#eef2f7;cursor:pointer}
.video-area::after{content:"点击播放协会发展回顾";position:absolute;left:50%;bottom:calc(24 * var(--u));transform:translateX(-50%);padding:calc(10 * var(--u)) calc(24 * var(--u));border-radius:calc(28 * var(--u));background:rgba(30,58,110,.82);color:#fff;font-size:calc(23 * var(--u));letter-spacing:calc(2 * var(--u));white-space:nowrap;pointer-events:none;transition:opacity .2s ease;z-index:2}
.video-area.is-started::after{opacity:0}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(76 * var(--u));height:calc(76 * var(--u));background:rgba(255,255,255,.94);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(30,50,90,.25);transition:opacity .3s ease,transform .3s ease}
.play-btn::after{content:"";border-left:calc(22 * var(--u)) solid #099bd2;border-top:calc(13 * var(--u)) solid transparent;border-bottom:calc(13 * var(--u)) solid transparent;margin-left:calc(5 * var(--u))}
.play-btn.hide{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}
.play-btn::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:calc(2 * var(--u)) solid rgba(9,155,210,.55);animation:pulse-ring 1.8s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.bobing-slide .canvas>img{filter:saturate(.94) contrast(1.02)}
.bobing-slide .canvas::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(239,246,252,.08) 0,rgba(228,239,249,.02) 39%,rgba(13,32,68,.08) 100%);pointer-events:none}
.bobing-copy{position:absolute;z-index:2;top:calc(92 * var(--u));left:calc(64 * var(--u));width:calc(622 * var(--u));text-align:center;color:#203e78;opacity:0;transform:translateY(calc(22 * var(--u)));transition:opacity .75s ease .35s,transform .75s cubic-bezier(.22,1,.36,1) .35s}
.slide.active .bobing-copy{opacity:1;transform:translateY(0)}
.bobing-kicker{display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));font-size:calc(22 * var(--u));letter-spacing:calc(5 * var(--u));color:#8f6b2f}
.bobing-kicker span{width:calc(58 * var(--u));height:1px;background:linear-gradient(90deg,transparent,#c49b51)}
.bobing-kicker span:last-child{background:linear-gradient(90deg,#c49b51,transparent)}
.bobing-copy h2{margin:calc(24 * var(--u)) 0 calc(22 * var(--u));font-family:"STSong","SimSun",serif;font-size:calc(74 * var(--u));line-height:1;color:#26417f;letter-spacing:calc(12 * var(--u));text-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(38,65,127,.12)}
.bobing-copy p{margin:auto;width:calc(586 * var(--u));font-size:calc(25 * var(--u));line-height:1.85;text-align:justify;color:#40537f;letter-spacing:calc(1.2 * var(--u))}
.bobing-tags{display:flex;justify-content:center;gap:calc(14 * var(--u));margin-top:calc(26 * var(--u))}
.bobing-tags b{padding:calc(8 * var(--u)) calc(17 * var(--u));border:1px solid rgba(155,116,50,.55);border-radius:calc(24 * var(--u));background:rgba(255,255,255,.62);font-size:calc(20 * var(--u));font-weight:500;letter-spacing:calc(2 * var(--u));color:#745522;box-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(68,82,115,.08)}
.form-slide .canvas{background:#d7deea;position:relative}
.form-card{position:relative;width:100%;height:100%;padding:calc(78 * var(--u)) calc(56 * var(--u)) calc(50 * var(--u));display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(24px);transition:opacity .7s ease .25s,transform .7s cubic-bezier(.22,1,.36,1) .25s}
.slide.active .form-card{opacity:1;transform:translateY(0)}
.leaf{position:absolute;width:calc(140 * var(--u));height:calc(140 * var(--u));background:#3a5a8c;border-radius:50% 0 50% 0;opacity:.25;pointer-events:none}
.leaf-tl{top:calc(-30 * var(--u));left:calc(-40 * var(--u));transform:rotate(-15deg)}
.leaf-tr{top:calc(-20 * var(--u));right:calc(-30 * var(--u));transform:rotate(75deg)}
.leaf-bl{bottom:calc(-40 * var(--u));left:calc(-30 * var(--u));transform:rotate(165deg);opacity:.18}
.leaf-br{bottom:calc(-30 * var(--u));right:calc(-40 * var(--u));transform:rotate(255deg);opacity:.18}
.form-title{font-size:calc(62 * var(--u));color:#1e3a6e;font-weight:700;letter-spacing:calc(6 * var(--u));margin-bottom:calc(28 * var(--u));text-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(30,58,110,.10)}
.form-desc{width:100%;font-size:calc(23 * var(--u));color:#2c4470;line-height:1.65;text-align:justify;margin-bottom:calc(34 * var(--u));padding:0 calc(10 * var(--u))}
.form-wrap{width:100%;padding:0 calc(10 * var(--u))}
.f-item{margin-bottom:calc(22 * var(--u));display:flex;flex-direction:column}
.f-label{font-size:calc(28 * var(--u));color:#1e3a6e;font-weight:600;margin-bottom:calc(12 * var(--u));letter-spacing:calc(.5 * var(--u))}
.f-label em{color:#e23b4d;font-style:normal;margin-left:calc(4 * var(--u))}
.f-input{width:100%;height:calc(72 * var(--u));border:calc(2 * var(--u)) solid #bfcadd;border-radius:calc(12 * var(--u));padding:0 calc(24 * var(--u));font-size:calc(27 * var(--u));color:#1e3a6e;background:#fff;outline:none;font-family:inherit;transition:border-color .25s ease,box-shadow .25s ease}
.f-input::placeholder{color:#9ba9c0}
.f-input:focus{border-color:#099bd2;box-shadow:0 0 0 calc(4 * var(--u)) rgba(9,155,210,.14)}
.f-input.err{border-color:#e23b4d;box-shadow:0 0 0 calc(4 * var(--u)) rgba(226,59,77,.13)}
.submit-btn{margin-top:calc(24 * var(--u));width:100%;height:calc(76 * var(--u));border:none;border-radius:calc(38 * var(--u));background:linear-gradient(135deg,#1e3a6e,#335694);color:#fff;font-size:calc(30 * var(--u));font-weight:600;letter-spacing:calc(10 * var(--u));font-family:inherit;box-shadow:0 calc(5 * var(--u)) calc(18 * var(--u)) rgba(30,58,110,.3);cursor:pointer;transition:transform .18s ease,box-shadow .25s ease}
.submit-btn:active{transform:scale(.97);box-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(30,58,110,.28)}
.form-logo{position:absolute;bottom:calc(30 * var(--u));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(10 * var(--u));font-size:calc(20 * var(--u));color:#1e3a6e;opacity:.85}
.logo-mark{width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;background:linear-gradient(135deg,#40a8d8,#1e3a6e);position:relative}
.logo-mark::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(18 * var(--u));height:calc(18 * var(--u));background:#fff;border-radius:50% 0 50% 0}
.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(30,45,75,.92);color:#fff;padding:calc(18 * var(--u)) calc(34 * var(--u));border-radius:calc(14 * var(--u));font-size:calc(27 * var(--u));z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease;white-space:nowrap}
.toast.show{opacity:1}
.form-done{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(215,222,234,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(18 * var(--u));z-index:6;opacity:0;pointer-events:none;transition:opacity .45s ease}
.form-done.show{opacity:1;pointer-events:auto}
.done-icon{width:calc(112 * var(--u));height:calc(112 * var(--u));border-radius:50%;background:linear-gradient(135deg,#17b978,#0e9e63);display:flex;align-items:center;justify-content:center;box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(14,158,99,.28);transform:scale(0)}
.form-done.show .done-icon{animation:pop .5s cubic-bezier(.22,1.4,.4,1) forwards}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.done-icon::after{content:"";width:calc(26 * var(--u));height:calc(48 * var(--u));border-right:calc(6 * var(--u)) solid #fff;border-bottom:calc(6 * var(--u)) solid #fff;transform:rotate(45deg) translate(calc(-2 * var(--u)),calc(-5 * var(--u)))}
.done-title{font-size:calc(38 * var(--u));color:#33456e;font-weight:700}
.done-sub{font-size:calc(26 * var(--u));color:#7b8aa5;text-align:center;line-height:1.6}
.dots{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:10px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .35s cubic-bezier(.22,1,.36,1)}
.dot.active{background:#fff;transform:scale(1.45);box-shadow:0 0 12px rgba(255,255,255,.6)}
.hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.9);font-size:13px;z-index:100;background:rgba(0,0,0,.32);padding:7px 20px;border-radius:20px;animation:hint-breathe 2s ease-in-out infinite}
@keyframes hint-breathe{0%,100%{opacity:.6;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-4px)}}
.form-slide .hint{display:none}
.music-btn{position:fixed;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:120;box-shadow:0 2px 12px rgba(20,40,80,.25)}
.music-btn::before{content:"";width:17px;height:17px;border-radius:50%;border:3px solid #099bd2;border-right-color:transparent;animation:spin 1.3s linear infinite}
.music-btn.paused::before{animation-play-state:paused;opacity:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.music-credit{position:fixed;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.5);z-index:90;pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}