

.lp-cur{transform-origin:61.5% 53.5%;animation:lpCur 6s ease-in-out infinite}
.lp-btn{transform-origin:51.1% 53.6%;animation:lpBtn 6s ease-in-out infinite}
.lp-spk{transform-origin:63% 50%;animation:lpSpk 6s ease-in-out infinite}
@keyframes lpCur{0%,60%,100%{scale:1}66%{scale:1.14}72%{scale:1}}
@keyframes lpBtn{0%,61%,100%{scale:1;filter:none}67%{scale:1.05;filter:brightness(1.15)}74%{scale:1;filter:none}}
@keyframes lpSpk{0%,62%{opacity:0;scale:.4}70%{opacity:1;scale:1.15}76%,96%{opacity:1;scale:1}100%{opacity:0;scale:1}}

.lp-cmp{background:#fff;padding:110px 0 120px}
.lp-cmp-lead{margin-top:16px;max-width:900px}
.lp-cmp-lead p{font-size:17px;line-height:1.95}
.lp-cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.lp-cmp-grid .ad-k figcaption{margin-top:14px}
.lp-cmp-grid .ad-k-en{font-size:14px;margin:0;color:var(--navy)}
.lp-cmp-grid .ad-k:nth-child(2) .ad-k-en{color:var(--shu)}
.lp-hp,.lp-lp{aspect-ratio:16/10;border-radius:6px;background:var(--slate);position:relative;display:grid;place-items:center;overflow:hidden}
.lp-win{width:62%;aspect-ratio:4/3;background:#fff;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:2;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)}
.lp-nav{display:flex;align-items:center;gap:6px}
.lp-nav b{width:18%;height:8px;border-radius:2px;background:var(--navy);margin-right:auto}
.lp-nav i{width:9%;height:5px;border-radius:2px;background:var(--slate);animation:lpNav 4s steps(1) infinite}
.lp-nav i:nth-child(3){animation-delay:1s}.lp-nav i:nth-child(4){animation-delay:2s}.lp-nav i:nth-child(5){animation-delay:3s}
@keyframes lpNav{0%,24%{background:var(--shu)}25%,100%{background:var(--slate)}}
.lp-hero{height:34%;border-radius:3px;background:linear-gradient(160deg,#e9ecf0 0 50%,#9fb0c3 50%)}
.lp-cards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lp-cards span{border-radius:3px;background:#e1e5ea}
.lp-pages{position:absolute;width:62%;aspect-ratio:4/3;z-index:1}
.lp-pages span{position:absolute;inset:0;border-radius:6px;background:#c9d2dd;box-shadow:0 0 0 1px #9fb0c3}
.lp-pages span:nth-child(1){translate:14px -12px}.lp-pages span:nth-child(2){translate:28px -24px;opacity:.7}.lp-pages span:nth-child(3){translate:42px -36px;opacity:.45}
.lp-long{height:92%;aspect-ratio:9/22;background:#fff;border-radius:6px;padding:7px;display:flex;flex-direction:column;gap:5px;box-shadow:0 10px 20px -10px rgba(0,0,0,.4)}
.lp-long .lp-hero{height:22%}
.lp-long i,.lp-d i,.lp-mscroll i{display:block;height:4px;border-radius:2px;background:#c4ccd6}
.lp-long i.s,.lp-d i.s,.lp-mscroll i.s{width:62%}
.lp-img{height:16%;border-radius:3px;background:#e1e5ea}
.lp-go{margin-top:auto;height:14%;border-radius:3px;background:var(--shu);animation:lpGo 2.4s ease-in-out infinite}
@keyframes lpGo{0%,100%{scale:1}50%{scale:1.06}}

.lp-words{aspect-ratio:4/3;border-radius:6px;background:var(--navy);padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.lp-sbox{display:flex;align-items:center;gap:10px;height:40px;border-radius:20px;background:#fff;padding:0 16px;flex:none}
.lp-sbox i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--slate)}
.lp-sbox span{height:7px;width:40%;border-radius:4px;background:#c4ccd6;animation:lpType 4s steps(6) infinite}
.lp-sbox b{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--shu)}
@keyframes lpType{0%{width:4%}60%,100%{width:52%}}
.lp-bub{max-width:62%;border-radius:12px;background:#fff;padding:10px 14px;display:grid;gap:6px;opacity:0;animation:lpBub 6s infinite}
.lp-bub i{display:block;height:6px;border-radius:3px;background:#c4ccd6;width:160px;max-width:100%}
.lp-bub i.s{width:96px}
.lp-bub.me{align-self:flex-end;background:var(--slate)}.lp-bub.me i{background:rgba(255,255,255,.75)}
.lp-bub.b2{animation-delay:.6s}.lp-bub.b3{animation-delay:1.2s}
@keyframes lpBub{0%{opacity:0;translate:0 8px}8%,85%{opacity:1;translate:0 0}95%,100%{opacity:0}}
.lp-tags{margin-top:auto;display:flex;gap:8px}
.lp-tags span{flex:1;height:26px;border-radius:4px;box-shadow:inset 0 0 0 2px #3b4a5e}
.lp-tags span.on{background:var(--shu);box-shadow:none;animation:lpGo 2.4s ease-in-out infinite}

.lp-designs{aspect-ratio:4/3;border-radius:6px;background:var(--slate);display:flex;align-items:center;justify-content:center;gap:5%;padding:24px}
.lp-d{position:relative;width:24%;aspect-ratio:9/16;background:#fff;border-radius:5px;padding:7px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 18px -10px rgba(0,0,0,.45)}
.lp-d .lp-hero{height:34%}
.lp-d .h2{background:linear-gradient(200deg,#1d2737 0 45%,#d35f3c 45%)}
.lp-d .h3{height:26%;background:#e1e5ea}
.lp-d b{margin-top:auto;height:12%;border-radius:3px;background:var(--navy)}
.lp-d.d2{box-shadow:0 0 0 4px var(--shu),0 16px 24px -10px rgba(0,0,0,.5);animation:lpPickCard 5s ease-in-out infinite}
.lp-d.d2 b{background:var(--shu)}
@keyframes lpPickCard{0%,30%{translate:0 0}45%,90%{translate:0 -10px}100%{translate:0 0}}
.lp-pick{position:absolute;right:-12px;top:-12px;width:32px;height:32px;border-radius:50%;background:var(--shu);color:#fff;display:grid;place-items:center;animation:lpPick 5s ease-in-out infinite}
.lp-pick svg{width:20px;height:20px}
@keyframes lpPick{0%,35%{scale:0}45%{scale:1.2}52%,90%{scale:1}100%{scale:0}}

.lp-mob{aspect-ratio:4/3;border-radius:6px;background:var(--navy);display:grid;place-items:center;overflow:hidden}
.lp-mphone{position:relative;height:88%;aspect-ratio:9/17;background:#fff;border-radius:18px;box-shadow:0 0 0 7px #0f1520;overflow:hidden}
.lp-mscroll{padding:10px;display:flex;flex-direction:column;gap:6px;animation:lpScroll 8s ease-in-out infinite}
.lp-mscroll .lp-hero{height:90px;flex:none}
.lp-mscroll .lp-img{height:70px;flex:none}
@keyframes lpScroll{0%,15%{translate:0 0}55%,85%{translate:0 -120px}100%{translate:0 0}}
.lp-mbtn{position:absolute;left:10px;right:10px;bottom:12px;height:34px;border-radius:5px;background:var(--shu);box-shadow:0 6px 12px -6px rgba(0,0,0,.4);animation:lpGo 2.4s ease-in-out infinite}
.mt-price2:has(.ls-band){padding-top:0}
.lp-price-in{padding-top:90px}
.lp-cmp .ls-h2,.tr-t{word-break:auto-phrase}
@media (max-width:767px){
  .lp-cmp{padding:72px 0 80px}
  .lp-cmp-lead p{font-size:16px}
  .lp-cmp-grid{grid-template-columns:1fr;gap:14px;margin-top:30px}
  .lp-words{padding:16px;gap:8px}
  .lp-sbox{height:32px}
  .lp-bub i{width:120px}
  .lp-designs{padding:16px}
  .lp-pick{width:26px;height:26px;right:-8px;top:-8px}
  .lp-price-in{padding-top:56px}
  .lp-mscroll .lp-hero{height:60px}
  .lp-mscroll .lp-img{height:46px}
}
