.m2u-pf{
--m2u-text:#eef2fb;
--m2u-muted:#a3b2cf;
--m2u-accent:#7db4ff;
--m2u-card:rgba(255,255,255,.04);
--m2u-line:rgba(255,255,255,.10);
--m2u-radius:var(--r,20px);
--m2u-gap:26px;
width:100%;
box-sizing:border-box;
color:var(--m2u-text);
}
.m2u-pf.m2u-light{
--m2u-text:#16213a;
--m2u-muted:#5b6784;
--m2u-accent:#2b6cf0;
--m2u-card:#fff;
--m2u-line:rgba(20,30,60,.10);
}
.m2u-pf *,.m2u-pf *::before,.m2u-pf *::after{box-sizing:border-box} .m2u-pf .m2u-head{text-align:center;margin:0 0 34px}
.m2u-pf .m2u-sec-title{font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.25;color:var(--m2u-text);margin:0 0 10px}
.m2u-pf .m2u-sec-sub{margin:0 auto;max-width:640px;font-size:16px;line-height:1.7;color:var(--m2u-muted)} .m2u-pf .m2u-grid{
display:grid;
grid-template-columns:repeat(var(--m2u-cols,3),minmax(0,1fr));
gap:var(--m2u-gap);
}
@media (max-width:767px){
.m2u-pf{--m2u-gap:14px}
.m2u-pf .m2u-grid{grid-template-columns:repeat(var(--m2u-mcols,2),minmax(0,1fr))}
.m2u-pf .m2u-head{margin-bottom:22px}
} .m2u-pf .m2u-card{
margin:0;
padding:0 0 18px;
background:var(--m2u-card);
border:1px solid var(--m2u-line);
border-radius:var(--m2u-radius);
overflow:hidden;
transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.m2u-pf .m2u-card:hover{
transform:translateY(-30px);
box-shadow:0 8px 18px rgba(0,0,0,.18);
} .m2u-pf .m2u-media{
position:relative;
display:block;
width:100%;
aspect-ratio:1/1;
overflow:hidden;
background:#0c1426;
cursor:pointer;
text-decoration:none;
outline-offset:-3px;
}
.m2u-pf .m2u-media img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
object-position:center top;
margin:0;
border-radius:0;
transform:scale(1);
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.m2u-pf .m2u-card:hover .m2u-media img{transform:none} .m2u-pf .m2u-shine{
position:absolute;
top:-10%;
bottom:-10%;
left:-70%;
width:45%;
pointer-events:none;
background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 70%,transparent 100%);
transform:skewX(-22deg);
opacity:0;
}
.m2u-pf .m2u-card:hover .m2u-shine{
animation:m2uShine .95s ease-out 1;
}
@keyframes m2uShine{
0%{left:-70%;opacity:0}
15%{opacity:1}
100%{left:130%;opacity:1}
} .m2u-pf .m2u-zoom{
position:absolute;
right:12px;
bottom:12px;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#fff;
background:rgba(10,18,36,.62);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.25);
opacity:0;
transform:translateY(8px) scale(.85);
transition:opacity .3s,transform .3s;
}
.m2u-pf .m2u-card:hover .m2u-zoom,
.m2u-pf .m2u-media:focus-visible .m2u-zoom{opacity:1;transform:none}
@media (hover:none){
.m2u-pf .m2u-zoom{opacity:.9;transform:none;width:34px;height:34px;right:8px;bottom:8px}
} .m2u-pf .m2u-shine,.m2u-pf .m2u-zoom{display:none!important}
.m2u-pf .m2u-card{border-color:rgba(20,30,60,.14);box-shadow:none}
.m2u-pf:not(.m2u-light) .m2u-card{border-color:rgba(255,255,255,.14)} .m2u-pf .m2u-title{
margin:16px 16px 6px;
padding:0;
font-size:20px;
font-weight:700;
line-height:1.35;
letter-spacing:0;
text-transform:none;
color:var(--m2u-text);
text-align:center;
}
.m2u-pf .m2u-desc{
margin:0 16px;
padding:0;
font-size:15px;
line-height:1.6;
color:var(--m2u-muted);
text-align:center;
}
@media (max-width:767px){
.m2u-pf .m2u-card{padding-bottom:14px}
.m2u-pf .m2u-title{font-size:16px;margin:12px 10px 4px}
.m2u-pf .m2u-desc{font-size:13px;margin:0 10px}
} .m2u-pf .m2u-sl{position:relative}
.m2u-pf .m2u-sl-track{
position:relative;
display:flex;
gap:14px;
align-items:stretch;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-padding-inline:50px;
padding:42px 50px 40px;
scrollbar-width:none;
-ms-overflow-style:none;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
cursor:grab;
}
.m2u-pf .m2u-sl-track::-webkit-scrollbar{display:none}
.m2u-pf .m2u-sl-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.m2u-pf .m2u-sl-track>.m2u-card{
flex:0 0 300px;
width:300px;
min-height:400px;
display:flex;
flex-direction:column;
padding-bottom:22px;
scroll-snap-align:start;
} @supports(width:1cqw){
.m2u-pf .m2u-sl{container-type:inline-size;--cols:4;--m2u-cw:calc((100cqw - 100px - (var(--cols) - 1)*14px)/var(--cols));--m2u-ch:max(calc(var(--m2u-cw) + 100px),420px)}
.m2u-pf .m2u-sl-track>.m2u-card{flex-basis:var(--m2u-cw);width:var(--m2u-cw);min-height:var(--m2u-ch)}
}
@media (max-width:1279px){.m2u-pf .m2u-sl{--cols:3}}
@media (max-width:899px){.m2u-pf .m2u-sl{--cols:2}}
.m2u-pf .m2u-sl-track img{-webkit-user-drag:none;user-select:none}
.m2u-pf .m2u-sl-track .m2u-media{flex:none}
.m2u-pf .m2u-sl-nav{position:absolute;inset:0;z-index:3;pointer-events:none}
.m2u-pf .m2u-sl-nav button{
position:absolute;
top:50%;
margin-top:-18px;
pointer-events:auto;
width:36px;
height:36px;
padding:0;
display:grid;
place-items:center;
border-radius:50%;
border:0;
background:rgba(10,31,77,.07);
color:#10213f;
cursor:pointer;
transition:opacity .3s,transform .25s,background .25s,color .25s;
}
.m2u-pf .m2u-sl-prev{left:7px}
.m2u-pf .m2u-sl-next{right:7px}
.m2u-pf:not(.m2u-light) .m2u-sl-nav button{background:rgba(255,255,255,.12);color:#fff}
@media (hover:hover){.m2u-pf .m2u-sl-nav button:hover:not(:disabled){background:#2b6cf0;color:#fff;transform:scale(1.06)}}
.m2u-pf .m2u-sl-nav button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m2u-pf .m2u-sl-nav button:disabled{opacity:.3;cursor:default}
.m2u-pf .m2u-sl-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m2u-pf .m2u-sl.is-static .m2u-sl-nav{display:none}
.m2u-pf .m2u-sl.is-static .m2u-sl-track{cursor:auto;justify-content:center}
@media (max-width:767px){
.m2u-pf .m2u-sl{touch-action:pan-y;container-type:normal}
.m2u-pf .m2u-sl-track{display:flow-root;overflow:visible;scroll-snap-type:none;padding:0;cursor:auto}
.m2u-pf .m2u-sl-track>.m2u-card{
width:auto;
flex:none;
margin:20px;
padding-bottom:0;
min-height:max(calc(100vh - var(--m2u-hh,76px) - 40px),440px);
min-height:max(calc(100svh - var(--m2u-hh,76px) - 40px),440px);
}
.m2u-pf .m2u-sl-track>.m2u-card:hover{transform:none;box-shadow:none}
.m2u-pf .m2u-sl-track .m2u-media{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
.m2u-pf .m2u-sl-track .m2u-title{font-size:22px;margin:18px 22px 6px}
.m2u-pf .m2u-sl-track .m2u-desc{font-size:15px;margin:0 22px 26px}
.m2u-pf .m2u-sl-nav{position:fixed;inset:auto;right:8px;top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:8px;z-index:60}
.m2u-pf .m2u-sl-nav.on{display:flex}
.m2u-pf .m2u-sl-nav button{position:static;margin:0;width:36px;height:36px;background:rgba(255,255,255,.92)!important;color:#10213f!important;box-shadow:0 4px 14px rgba(15,40,100,.25)}
.m2u-pf .m2u-sl-nav button:disabled{opacity:.3}
.m2u-pf .m2u-sl-nav svg{width:18px;height:18px;transform:rotate(90deg)}
} .m2u-lb{
position:fixed;
inset:0;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(5,9,20,.88);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:0;
visibility:hidden;
transition:opacity .3s,visibility .3s;
font-family:inherit;
}
.m2u-lb.is-open{opacity:1;visibility:visible}
.m2u-lb *{box-sizing:border-box}
.m2u-lb-box{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
max-width:min(1100px,100%);
max-height:100%;
transform:scale(.92) translateY(14px);
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.m2u-lb.is-open .m2u-lb-box{transform:none}
.m2u-lb-imgwrap{
position:relative;
display:block;
width:min(80vw,calc(100vh - 250px),560px);
aspect-ratio:1/1;
overflow:hidden;
border-radius:12px;
box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
background:#0c1426;
}
.m2u-lb-img{
display:block;
width:100%;
height:100%;
max-width:none;
max-height:none;
margin:0;
object-fit:cover;
object-position:center top;
}
.m2u-lb-imgwrap.is-wide{
width:fit-content;
max-width:min(600px,92vw);
aspect-ratio:auto;
}
.m2u-lb-imgwrap.is-wide .m2u-lb-img{
width:auto;
height:auto;
max-width:min(600px,92vw);
max-height:calc(100vh - 250px);
object-fit:contain;
}
.m2u-lb-cap{text-align:center;color:#eef2fb;padding:16px 8px 0;max-width:720px}
.m2u-lb .m2u-lb-cap .m2u-lb-title{margin:0 0 4px;padding:0;font-size:22px;font-weight:700;line-height:1.3;color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.m2u-lb .m2u-lb-cap .m2u-lb-desc{margin:0 0 14px;font-size:15px;line-height:1.6;color:#b4c1dc!important}
.m2u-lb-visit{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 24px;
border-radius:999px;
background:linear-gradient(135deg,#4f8dff,#7db4ff);
color:#08101f;
font-weight:700;
font-size:15px;
text-decoration:none;
box-shadow:0 8px 22px -8px rgba(79,141,255,.8);
transition:transform .25s,box-shadow .25s;
}
.m2u-lb-visit:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(79,141,255,.95);color:#08101f}
.m2u-lb-btn{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:1px solid rgba(255,255,255,.22);
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
transition:background .25s,transform .25s;
}
.m2u-lb-btn:hover{background:rgba(255,255,255,.2)}
.m2u-lb-close{top:16px;right:16px}
.m2u-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.m2u-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.m2u-lb-prev:hover,.m2u-lb-next:hover{transform:translateY(-50%) scale(1.08)}
.m2u-lb-count{position:absolute;top:26px;left:24px;color:#9fb0cf;font-size:14px}
@media (max-width:767px){
.m2u-lb{padding:12px}
.m2u-lb-imgwrap{width:min(84vw,calc(100vh - 270px),420px)}
.m2u-lb .m2u-lb-cap .m2u-lb-title{font-size:18px}
.m2u-lb-prev,.m2u-lb-next{top:auto;bottom:14px;transform:none}
.m2u-lb-prev{left:14px}
.m2u-lb-next{right:14px}
.m2u-lb-prev:hover,.m2u-lb-next:hover{transform:scale(1.08)}
}
body.m2u-lb-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.m2u-pf .m2u-card,.m2u-pf .m2u-media img,.m2u-lb,.m2u-lb-box{transition:none}
.m2u-pf .m2u-card:hover .m2u-shine{animation:none}
}