| 7 |
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;place-items:center;background:#f6d3cc;color:#595959;font-family:Arial,"PingFang SC",sans-serif}.page{width:min(100vw,177.78vh);height:min(56.25vw,100vh);padding:5%;background:#fff;position:relative}.top{display:flex;justify-content:space-between;align-items:center}.brand{font:12px monospace;letter-spacing:2px;color:#d02300}.badge{padding:8px 12px;color:#fff;background:#d02300;font-size:12px}.band{margin:4% 0 3%;padding:3% 4%;background:linear-gradient(90deg,#d02300,#9c1a00);color:#fff}.band h1{margin:0;font-size:clamp(32px,5vw,84px);line-height:1}.band p{margin:10px 0 0;font-size:clamp(13px,1.4vw,23px)}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:2%;align-items:center}.node{min-height:25vh;padding:9%;border:2px solid #d02300;background:#fff;position:relative}.node:after{content:"→";position:absolute;right:-16%;top:42%;font-size:28px;color:#ffc000}.node:last-child:after{display:none}.node b{display:block;color:#d02300;font-size:clamp(26px,3.4vw,60px)}.node h2{font-size:clamp(16px,2vw,30px);color:#595959}.node p{font-size:clamp(11px,1.1vw,17px);line-height:1.5}.foot{position:absolute;bottom:5%;left:5%;font:12px monospace;color:#808080;letter-spacing:1px} |