/* ---- no02-extra.css ---- */ /* No.02 專用：把成果牆與「按鈕氣泡」接在爆款拆解模板上，沿用同一套變數與節奏 */ /* 把 Mac 螢幕裡的兩張卡改成「可以放圖」的版本 */ #gav-skill .scr-ov img{width:100%;border-radius:1cqw;display:block} #gav-skill .ov-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:.9cqw} #gav-skill .ov-thumbs img{border-radius:.8cqw} #gav-skill .ov-cap{font-size:.86em;color:#7b6b5c} /* 預設氣泡：讓人一眼知道「用講的就好」 */ #gav-skill .says{background:var(--paper,#f7f4f1);padding:72px 0 80px} #gav-skill .say-card{max-width:620px;margin:28px auto 0;background:#fffdf8;border-radius:20px; padding:26px 26px 20px;box-shadow:0 18px 44px #0000000f} #gav-skill .say-top{display:flex;align-items:center;gap:12px;margin-bottom:16px} #gav-skill .say-top .av{width:42px;height:42px;border-radius:50%;background:#e9ddcb;flex:none; display:grid;place-items:center;font-size:20px} #gav-skill .say-top b{font-size:17px;color:#2a231e} #gav-skill .say-bubble{background:#efebe4;border-radius:14px;padding:14px 16px;color:#2a231e;line-height:1.7} #gav-skill .say-hint{margin:18px 0 10px;font-size:14px;color:#8a7a6a} #gav-skill .say-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} #gav-skill .say-btn{display:flex;align-items:center;justify-content:center;gap:8px; background:#fff;border:1px solid #e3d9cb;border-radius:12px;padding:14px 10px; font-size:15px;color:#2a231e} #gav-skill .say-foot{margin-top:14px;text-align:center;font-size:13px;color:#9b8b7a} @media(max-width:600px){#gav-skill .say-grid{grid-template-columns:1fr}} /* 成果牆 */ #gav-skill .wall{padding:76px 0 0} #gav-skill .wall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px} #gav-skill .wall-grid figure{margin:0;background:#fffdf8;border-radius:14px;overflow:hidden; box-shadow:0 10px 26px #0000000d} #gav-skill .wall-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} #gav-skill .wall-grid figcaption{padding:11px 12px;font-size:14px;color:#2a231e; display:flex;align-items:center;gap:8px} #gav-skill .wall-grid figcaption i{font-style:normal;font-size:12px;color:#a9875a; border:1px solid #e3d9cb;border-radius:5px;padding:1px 5px} #gav-skill .wall-grid figure.wide img{aspect-ratio:3/4;object-fit:contain;background:#efeae2} #gav-skill .wall-note{margin-top:22px;font-size:14px;color:#8a7a6a;line-height:1.8} @media(max-width:1100px){#gav-skill .wall-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){#gav-skill .wall-grid{grid-template-columns:repeat(2,1fr)}} /* 0 元領取與 LINE 交付 */ #gav-skill .deliver{background:#1d1917;color:#f3ece2;padding:76px 0 84px} #gav-skill .deliver h2{color:#fff} #gav-skill .deliver .kicker{color:#c9b291} #gav-skill .dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px} #gav-skill .dl-grid article{background:#272120;border-radius:14px;padding:20px 18px} #gav-skill .dl-grid .n{font-size:13px;color:#c9a06a;letter-spacing:.08em} #gav-skill .dl-grid h3{font-size:17px;margin:8px 0 6px;color:#fff} #gav-skill .dl-grid p{font-size:14px;color:#c2b5a6;line-height:1.75;margin:0} @media(max-width:900px){#gav-skill .dl-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){#gav-skill .dl-grid{grid-template-columns:1fr}} #gav-skill .line-note{margin-top:26px;background:#272120;border-left:3px solid #c9a06a; border-radius:0 12px 12px 0;padding:16px 18px;font-size:14px;color:#c2b5a6;line-height:1.8} /* FAQ */ #gav-skill .faq-list{margin-top:26px;display:grid;gap:12px} #gav-skill .faq-list article{background:#fffdf8;border:1px solid #ece3d7;border-radius:12px;padding:18px 20px} #gav-skill .faq-list h3{font-size:16px;margin:0 0 6px;color:#2a231e} #gav-skill .faq-list p{margin:0;font-size:14.5px;color:#6f6256;line-height:1.8} /* 後面接的是深色或照片底的區塊時，上一節要留呼吸空間，不然卡片會貼死在交界 */ #gav-skill .sec.pad-b{padding-bottom:96px} @media(max-width:899px){#gav-skill .sec.pad-b{padding-bottom:64px}} /* 痛點卡放的是商品照不是人物照：瓶頭不能被裁掉，改成整張放進去 */ #gav-skill .pain-card img{aspect-ratio:4/3;object-fit:contain;background:#f1ece4;padding:14px} /* hero 底部往米色淡出（用自己的 span，不碰模板的 .hero:after） */ #gav-skill .hero-fade{position:absolute;left:0;right:0;bottom:0;height:240px;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(247,244,241,0) 0%,rgba(247,244,241,.85) 70%,var(--paper,#f7f4f1) 88%)} /* 痛點卡：1:1 滿版，不裁到瓶頭 */ #gav-skill .pain-card img{aspect-ratio:1/1;object-fit:cover;object-position:center 42%;padding:0;background:none} /* 痛點段的引言 */ #gav-skill .sec .lead{font-size:18px;line-height:1.9;color:#6f6256;margin:-6px 0 30px} /* 模板一進頁會把首圖從 1.08 縮到 1（2.6 秒）。立卡上的金線只有 1–2px，縮放時會閃爍像在發抖；這頁關掉那個縮放 */ #gav-skill.fx .hero:before,#gav-skill .hero:before{animation:none!important;transform:none!important} /* ---- no02-get.css ---- */ #gav-skill .get2{padding:96px 0 104px} #gav-skill .get2 .wrap{max-width:1040px;margin:0 auto;padding:0 24px;text-align:center} #gav-skill .get2 h2{font-size:44px;line-height:1.25;margin:14px 0 10px;font-weight:600} #gav-skill .get2 .lead{font-size:18px;color:#6f6256;margin:0 0 38px;line-height:1.8} #gav-skill .get2 .flow{display:flex;justify-content:center;align-items:center;gap:0;margin:0 auto 42px;max-width:820px} #gav-skill .get2 .flow li{list-style:none;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1} #gav-skill .get2 .flow i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-style:normal} #gav-skill .get2 .flow b{font-size:16px;font-weight:600} #gav-skill .get2 .flow small{font-size:13px;line-height:1.5} #gav-skill .get2 .flow .arr{flex:0 0 48px;font-size:22px;opacity:.45} #gav-skill .get2 .big{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:700;padding:22px 48px;border-radius:999px;text-decoration:none; box-shadow:0 18px 40px rgba(0,0,0,.18);transition:transform .18s} #gav-skill .get2 .big:hover{transform:translateY(-2px)} #gav-skill .get2 .fine{margin:18px 0 0;font-size:13px;line-height:1.7} /* A 淺色 */ #gav-skill .get2.light{background:var(--paper,#f7f4f1);color:#2a231e} #gav-skill .get2.light .flow i{background:#fff;color:#a97845;box-shadow:0 8px 20px rgba(71,48,25,.10)} #gav-skill .get2.light .flow small{color:#8a7a6a} #gav-skill .get2.light .big{background:#2a231e;color:#fff} #gav-skill .get2.light .fine{color:#9b8b7a} /* B 深色 */ #gav-skill .get2.dark{background:#1d1917;color:#f3ece2} #gav-skill .get2.dark h2{color:#fff} #gav-skill .get2.dark .lead{color:#c2b5a6} #gav-skill .get2.dark .flow i{background:#2b2522;color:#e2c48d;box-shadow:inset 0 0 0 1px #3d3430} #gav-skill .get2.dark .flow b{color:#fff} #gav-skill .get2.dark .flow small{color:#a79a8b} #gav-skill .get2.dark .big{background:#e2c48d;color:#1d1917;box-shadow:0 18px 44px rgba(226,196,141,.28)} #gav-skill .get2.dark .fine{color:#8f8275} #gav-skill .get2 .flow{padding:0} @media(max-width:760px){#gav-skill .get2 .flow{flex-direction:column;gap:18px}#gav-skill .get2 .flow .arr{display:none}#gav-skill .get2 h2{font-size:32px}} /* 結尾：AI 學習中心那張 hero */ #gav-skill .outro{position:relative;isolation:isolate;aspect-ratio:1774/887;min-height:0;max-height:none;overflow:hidden;background:#efe6d8} #gav-skill .outro-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-2} #gav-skill .outro-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(247,240,229,.72) 0%,rgba(247,240,229,.35) 32%,rgba(247,240,229,0) 55%)} #gav-skill .outro-copy{position:absolute;left:clamp(24px,20vw,400px);top:50%;transform:translateY(-50%);max-width:520px} #gav-skill .outro h2{font-size:clamp(34px,4.2vw,64px);line-height:1.22;margin:0 0 30px;font-weight:600;letter-spacing:.5px;color:#2a231e} #gav-skill .outro h2 .en{font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:500} #gav-skill .outro h2 b{font-weight:700} #gav-skill .outro-btn{display:inline-flex;align-items:center;gap:34px;background:#7a5d40;color:#fff; text-decoration:none;font-size:16px;font-weight:500;letter-spacing:.04em;padding:15px 28px 15px 32px;border-radius:999px;box-shadow:0 14px 30px rgba(71,48,25,.22);transition:transform .18s} #gav-skill .outro-btn:hover{transform:translateY(-2px)} #gav-skill .outro-lead{margin:22px 0 0;font-size:15px;color:#5d5044;letter-spacing:.06em} #gav-skill .outro-sign{position:absolute;right:clamp(16px,4vw,70px);top:18%;font-family:"LXGW WenKai TC","Kaiti TC",serif;font-size:20px;line-height:1.9;color:#5d5044;text-align:left} #gav-skill .outro-sign small{display:block;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:14px;color:#8a7a6a;margin-top:6px} @media(max-width:900px){#gav-skill .outro{aspect-ratio:auto;min-height:520px;max-height:none}#gav-skill .outro-copy{left:24px;right:24px;max-width:none}#gav-skill .outro-sign{display:none}} #gav-skill .outro-btn .arr{font-size:13px;opacity:.95} #gav-skill .outro h2{margin-bottom:34px} #gav-skill .outro-lead{margin-top:26px;font-size:14.5px;color:#6f6256} /* 這頁結尾是滿版照片，直接接黑色頁腳；主題頁腳本身有 56px 上邊距會露出一條米色帶，這頁關掉 */ body:has(#gav-skill) footer.gav-ft{margin-top:0!important} /* ---- no02-demo.css ---- */ /* 03 Try it：左邊電腦螢幕裡是一整個 AI 對話視窗，右邊平板當第二螢幕放大出圖 */ /* 電腦跟平板要坐在桌面上：區塊高度照模板的 --H 算，內容靠底、底邊留桌面那條線的距離 */ #gav-skill .room{--H:max(680px,calc(100vw * .3984));display:flex;flex-direction:column;justify-content:flex-end; min-height:var(--H);padding:80px 0 calc(var(--H) * .085)} #gav-skill .room-head{margin-bottom:auto;padding-bottom:26px} #gav-skill .room-head{max-width:1180px;margin:0 auto 34px;padding:0 24px;position:relative;z-index:2} #gav-skill .room-head h2{font-size:40px;line-height:1.28;margin:14px 0 0;font-weight:600} #gav-skill .room-head h2 b{font-weight:600} #gav-skill .room-ws{max-width:1180px;margin:0 auto;padding:0 24px;display:grid; grid-template-columns:minmax(0,1.42fr) minmax(220px,.58fr);gap:40px;align-items:end} #gav-skill .room-ws .mac-col{width:100%} #gav-skill .room-foot{margin:14px 0 0;font-size:13px;color:#8a7a6a;display:flex;align-items:center;gap:14px} #gav-skill .replay{background:transparent;border:1px solid #d9cdbc;border-radius:999px;padding:6px 14px; font:inherit;font-size:13px;color:#6f6256;cursor:pointer} #gav-skill .replay:hover{border-color:#a97845;color:#a97845} /* ── 螢幕裡的 AI 視窗 ── */ #gav-skill .app{container-type:inline-size;position:relative;flex:1;min-height:0;display:flex;flex-direction:column; background:#f6f3ee;font-size:clamp(9px,1.85cqw,14px);color:#2a231e} #gav-skill .app-bar{display:flex;align-items:center;gap:.5em;padding:1.1cqw 1.8cqw;background:#ebe6de; border-bottom:1px solid #e0d8cc;font-size:.92em} #gav-skill .app-bar i{width:.8em;height:.8em;border-radius:50%;background:#d9cfc1} #gav-skill .app-bar i:nth-child(1){background:#e8a39a}#gav-skill .app-bar i:nth-child(2){background:#e7cc8d} #gav-skill .app-bar i:nth-child(3){background:#a9cfa1} #gav-skill .app-bar b{margin-left:1em;color:#2a231e} #gav-skill .app-bar span{margin-left:auto;color:#9b8b7a;font-size:.86em} #gav-skill .app-log{flex:1;overflow:hidden;padding:1.8cqw 2.2cqw;display:flex;flex-direction:column; gap:1.2cqw;justify-content:flex-end} #gav-skill .app-input{display:flex;align-items:center;gap:1.2cqw;margin:0 2.2cqw 1.8cqw;background:#fff; border:1px solid #e3d9cb;border-radius:1.4cqw;padding:1cqw 1.2cqw} #gav-skill .app-input .chip{display:inline-flex;align-items:center;gap:.5em;background:#f1ece4; border-radius:.7em;padding:.3em .7em .3em .3em;font-size:.86em;color:#5d5044} #gav-skill .app-input .chip img{width:2em;height:2em;border-radius:.4em;object-fit:cover} #gav-skill .app-input .ph{flex:1;color:#b3a695} #gav-skill .app-input b{width:2.2em;height:2.2em;border-radius:50%;background:#2a231e;color:#fff; display:grid;place-items:center} /* 泡泡 */ #gav-skill .m{max-width:84%;border-radius:1.3cqw;padding:1.2cqw 1.5cqw;line-height:1.65; animation:gav-up .42s cubic-bezier(.2,.7,.2,1) both} #gav-skill .m.ai{align-self:flex-start;background:#fff;box-shadow:0 .4cqw 1.4cqw #0000000a} #gav-skill .m.me{align-self:flex-end;background:#2a231e;color:#f6f1ea} #gav-skill .m.me img{display:block;width:9cqw;border-radius:.8cqw;margin-bottom:.6em} #gav-skill .m .note{display:block;margin-top:.4em;font-size:.86em;color:#8a7a6a} #gav-skill .m.me .note{color:#c9bcab} @keyframes gav-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 思考中 */ #gav-skill .think{align-self:flex-start;display:flex;align-items:center;gap:.9em;background:#fff; border-radius:1.3cqw;padding:1.1cqw 1.5cqw;color:#8a7a6a;font-size:.92em;animation:gav-up .3s both} #gav-skill .dots{display:inline-flex;gap:.3em} #gav-skill .dots i{width:.5em;height:.5em;border-radius:50%;background:#a97845;animation:gav-dot 1.1s infinite} #gav-skill .dots i:nth-child(2){animation-delay:.18s}#gav-skill .dots i:nth-child(3){animation-delay:.36s} @keyframes gav-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-.25em)}} /* 快速回覆按鈕（在對話裡） */ #gav-skill .qr{align-self:flex-start;display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;max-width:84%; animation:gav-up .42s .12s both} #gav-skill .qr button{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid #e3d9cb; border-radius:1cqw;padding:1cqw 1.3cqw;font:inherit;font-size:1em;color:#2a231e;cursor:pointer;text-align:left; transition:border-color .18s,transform .18s} #gav-skill .qr button:hover{border-color:#a97845;transform:translateY(-1px)} #gav-skill .qr button i{font-style:normal;flex:none;width:1.7em;height:1.7em;border-radius:50%; background:#a97845;color:#fff;display:grid;place-items:center;font-size:.82em} #gav-skill .qr button:only-child{grid-column:1/-1} /* 生成中的卡片 → 圖長出來 */ #gav-skill .gen{align-self:flex-start;width:38%;aspect-ratio:4/5;border-radius:1.3cqw;overflow:hidden; background:linear-gradient(110deg,#ece6dc 20%,#f7f3ec 45%,#ece6dc 70%);background-size:220% 100%; animation:gav-shimmer 1.3s linear infinite,gav-up .3s both;position:relative} #gav-skill .gen span{position:absolute;left:0;right:0;bottom:1cqw;text-align:center;font-size:.86em;color:#8a7a6a} @keyframes gav-shimmer{from{background-position:120% 0}to{background-position:-120% 0}} #gav-skill .pic{align-self:flex-start;width:38%;border-radius:1.3cqw;overflow:hidden;cursor:zoom-in; box-shadow:0 .8cqw 2.2cqw #00000018;animation:gav-pop .55s cubic-bezier(.2,.8,.2,1) both;position:relative} #gav-skill .pic img{display:block;width:100%} #gav-skill .pic .tag{position:absolute;left:.8cqw;top:.8cqw;background:#e6efe5;color:#39563f; border-radius:.5em;padding:.25em .7em;font-size:.82em} #gav-skill .pic.on{outline:.35cqw solid #a97845;outline-offset:.25cqw} @keyframes gav-pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}} /* ── 右邊平板 ── */ #gav-skill .tab-col{display:flex;flex-direction:column;align-items:center;gap:0;padding-bottom:2px;margin-bottom:-5.2%} #gav-skill .tab{box-shadow:0 30px 60px rgba(40,28,16,.28),inset 0 0 0 1px #3a322c,0 2px 0 #2a241f} #gav-skill .tab{width:100%;aspect-ratio:3/4;border-radius:22px;background:#1d1917;padding:12px; box-shadow:0 30px 60px rgba(40,28,16,.28),inset 0 0 0 1px #3a322c} #gav-skill .tab-scr{width:100%;height:100%;border-radius:12px;overflow:hidden;position:relative;container-type:inline-size; background:linear-gradient(160deg,#dfe4ee 0%,#e9dfe4 38%,#f2d9c6 72%,#f6cfb4 100%)} #gav-skill .tab-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; animation:gav-light .7s cubic-bezier(.2,.8,.2,1) both} @keyframes gav-light{from{opacity:0;transform:scale(1.04);filter:brightness(.4)}to{opacity:1;transform:none;filter:none}} /* 桌面 */ #gav-skill .dk{position:absolute;inset:0;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;color:#2a231e} #gav-skill .dk-bar{position:absolute;left:0;right:0;top:0;height:7cqw;background:rgba(255,255,255,.55);backdrop-filter:blur(8px); display:flex;align-items:center;gap:2.6cqw;padding:0 3cqw;font-size:2.9cqw} #gav-skill .dk-bar b{font-weight:700}#gav-skill .dk-bar i{margin-left:auto;font-style:normal;color:#5d5044} #gav-skill .dk-icons{position:absolute;left:4cqw;top:11cqw;display:flex;flex-direction:column;gap:3cqw} #gav-skill .dk-icons figure{margin:0;width:16cqw;height:18cqw;text-align:center;flex:none} #gav-skill .dk-icons img,#gav-skill .dk-icons .f{display:block;width:12cqw;height:12cqw;margin:0 auto;border-radius:1.6cqw;object-fit:cover; box-shadow:0 .8cqw 2cqw #0000001f;background:#fff} #gav-skill .dk-icons .f.doc{background:linear-gradient(#fff,#f1efe9);position:relative} #gav-skill .dk-icons .f.doc:after{content:"";position:absolute;left:2.4cqw;right:2.4cqw;top:3cqw;height:5cqw; background:repeating-linear-gradient(#cfc7bb 0 .6cqw,transparent .6cqw 1.6cqw)} #gav-skill .dk-icons .f.fold{background:linear-gradient(#8fb9e8,#5f93d6);border-radius:1.2cqw 1.2cqw 1.6cqw 1.6cqw} #gav-skill .dk-icons figcaption{font-size:2.4cqw;color:#3b332c;margin-top:.9cqw;white-space:nowrap} #gav-skill .dk-dock{position:absolute;left:50%;bottom:2.4cqw;transform:translateX(-50%);display:flex;gap:1.6cqw; background:rgba(255,255,255,.55);backdrop-filter:blur(8px);border-radius:3cqw;padding:1.6cqw 2.2cqw} #gav-skill .dk-dock i{width:4.6cqw;height:4.6cqw;border-radius:1.2cqw;background:#9ab6ea} #gav-skill .dk-dock i:nth-child(2){background:#f0c35a}#gav-skill .dk-dock i:nth-child(3){background:#e8766a} #gav-skill .dk-dock i:nth-child(4){background:#8fcf8a}#gav-skill .dk-dock i:nth-child(5){background:#b79be6}#gav-skill .dk-dock i:nth-child(6){background:#cfd5de} /* 出圖：像「預覽」視窗開在桌面上 */ #gav-skill .dk-win{position:absolute;left:21cqw;right:4cqw;top:10cqw;bottom:27cqw;background:#fff;border-radius:2.4cqw;overflow:hidden; box-shadow:0 3cqw 7cqw rgba(0,0,0,.28);animation:gav-pop .55s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column;z-index:2} #gav-skill .dk-win-bar{display:flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2.4cqw;background:#ebe6de;font-size:2.7cqw;flex:none} #gav-skill .dk-win-bar i{width:2cqw;height:2cqw;border-radius:50%;background:#d9cfc1} #gav-skill .dk-win-bar i:nth-child(1){background:#e8a39a}#gav-skill .dk-win-bar i:nth-child(2){background:#e7cc8d}#gav-skill .dk-win-bar i:nth-child(3){background:#a9cfa1} #gav-skill .dk-win-bar b{margin-left:1cqw;font-weight:600;color:#5d5044} #gav-skill .dk-win-body{position:relative;flex:1;min-height:0;background:#f3efe8} #gav-skill .dk-win.story .tab-copy b{font-size:4.8cqw} #gav-skill .dk-win.story .tab-copy small,#gav-skill .dk-win.story .tab-copy span{font-size:2.1cqw} #gav-skill .dk-win-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f3efe8} #gav-skill .tab-copy{position:absolute;left:8%;right:8%;top:7%;text-align:left;color:#2b3a2f; font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;animation:gav-up .5s .1s both} #gav-skill .tab-copy small{display:block;font-size:2.4cqw;letter-spacing:.14em;color:#6f7f70;margin-bottom:.6em} #gav-skill .tab-copy b{display:block;font-size:6cqw;line-height:1.3;font-weight:700;letter-spacing:.04em} #gav-skill .tab-copy span{display:block;margin-top:.9em;font-size:2.4cqw;color:#4e5c50;letter-spacing:.04em} #gav-skill .tab-cap{position:absolute;left:0;right:0;bottom:-28px;font-size:13px;color:#8a7a6a;text-align:center} #gav-skill .tab-col{position:relative} @media(max-width:1060px){ #gav-skill .room-ws{grid-template-columns:1fr;gap:26px} #gav-skill .tab-col{margin-bottom:0} #gav-skill .room-head h2{font-size:30px} #gav-skill .tab-col{max-width:360px;margin:0 auto} } /* 做好的圖存到桌面：右邊排成一欄，越做越多 */ #gav-skill .dk-saved{position:absolute;left:21cqw;right:4cqw;bottom:12.5cqw;height:13cqw;display:flex;gap:1.4cqw;overflow:hidden;z-index:1;align-items:flex-start} #gav-skill .dk-saved figure{margin:0;width:9cqw;flex:none;text-align:center;animation:gav-pop .5s cubic-bezier(.2,.8,.2,1) both} #gav-skill .dk-saved img{display:block;width:7.6cqw;height:7.6cqw;margin:0 auto;border-radius:1.2cqw;object-fit:cover;box-shadow:0 .6cqw 1.6cqw #0000001f;border:.35cqw solid #fff} #gav-skill .dk-saved figcaption{font-size:1.8cqw;color:#3b332c;margin-top:.5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gav-skill .dk-win{z-index:2} /* 深色圖上的字用白色＋暗影，不然深綠字在深綠底上看不到 */ #gav-skill .tab-copy.light,#gav-skill .tab-copy.light small,#gav-skill .tab-copy.light span{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)} #gav-skill .tab-copy.light small{color:#dfe9e0} /* 對話欄是從底部往上排的 flex 欄，內容一多，圖卡會被壓到 0 高只剩金框一條線；禁止壓縮 */ #gav-skill .app-log>*{flex-shrink:0} #gav-skill .pic{min-height:12cqw} /* 輪播視窗 */ #gav-skill .car-btn{position:absolute;top:50%;transform:translateY(-50%);width:6cqw;height:6cqw;border-radius:50%;border:0; background:rgba(255,255,255,.9);color:#2a231e;font-size:3.6cqw;line-height:1;cursor:pointer;box-shadow:0 .4cqw 1.2cqw #0000001f;display:grid;place-items:center} #gav-skill .car-btn.prev{left:1.6cqw}#gav-skill .car-btn.next{right:1.6cqw} #gav-skill .car-dots{position:absolute;left:0;right:0;bottom:2cqw;display:flex;justify-content:center;gap:1cqw} #gav-skill .car-dots i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:rgba(255,255,255,.55)} #gav-skill .car-dots i.on{background:#a97845} #gav-skill .car-n{position:absolute;right:2cqw;top:2cqw;background:rgba(42,35,30,.7);color:#fff;font-size:2.2cqw;border-radius:.6em;padding:.25em .7em} #gav-skill .dk-saved{position:absolute;left:21cqw;right:4cqw;bottom:12.5cqw;height:13cqw;display:flex;gap:1.4cqw;overflow:hidden;z-index:1;align-items:flex-start} #gav-skill .dk-saved figure{margin:0;width:9cqw;flex:none;text-align:center;animation:gav-pop .5s cubic-bezier(.2,.8,.2,1) both} #gav-skill .dk-saved img{display:block;width:7.6cqw;height:7.6cqw;margin:0 auto;border-radius:1.2cqw;object-fit:cover;box-shadow:0 .6cqw 1.6cqw #0000001f;border:.35cqw solid #fff} #gav-skill .dk-saved figcaption{font-size:1.8cqw;color:#3b332c;margin-top:.5cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 底圖（原本在本機預覽的