/* Examples page (/examples). Loaded after legal.css, svc.css and en.css. */
.ex{display:grid;gap:30px;margin-top:36px}
.exc{border:1px solid var(--line);border-radius:26px;background:rgba(14,22,70,.35);overflow:hidden}
.exc .shots{position:relative;display:block;padding:22px 22px 0;background:linear-gradient(170deg,rgba(40,60,170,.35),rgba(3,6,25,.6));border-bottom:1px solid var(--line)}
.exc .shots img{display:block;height:auto}
.exc .shots .d{width:100%;border-radius:12px 12px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.exc .shots .m{position:absolute;right:30px;bottom:14px;width:21%;border:4px solid #0b1030;border-radius:20px;box-shadow:0 18px 40px -12px rgba(0,0,0,.75)}
.exc .shots:hover .d{opacity:.94}
.exc .bd{padding:24px 28px 28px}
.exc .tag{margin:0 0 4px;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--glow)}
.exc h2{margin:0 0 8px;font-size:1.6rem}
.exc h2 a{color:#fff;text-decoration:none}.exc h2 a:hover{color:var(--glow)}
.exc h3{margin-top:20px}
.exc .go{margin-top:18px;font-weight:600}
.exc .go a{text-decoration:none}.exc .go a:hover{text-decoration:underline}
.ex+.note{margin-top:26px}
@media(max-width:620px){
.exc{border-radius:20px}
.exc .shots{padding:14px 14px 0}
.exc .shots .m{right:16px;bottom:10px;width:24%;border-width:3px;border-radius:12px}
.exc .bd{padding:20px 20px 22px}
.exc h2{font-size:1.4rem}
.ctab{padding:22px}
.ctab .btn{display:flex;justify-content:center;text-align:center}
}