*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}
to{opacity:1}
}
.ug-sec1-title,.ug-sec1-desc{animation:fadeInUp .8s ease-out both}
.ug-sec1-desc{animation-delay:.2s}
@media screen and (min-width:640px){html{font-size:calc(15px+(16.5 - 15) *((100vw - 640px) /(1024 - 640)))}
}
@media screen and (min-width:1024px){html{font-size:calc(16.5px+(18 - 16.5) *((100vw - 1024px) /(1440 - 1024)))}
}
@media screen and (min-width:1440px){html{font-size:18px}
}
@media screen and (max-width:768px){html{font-size:16px!important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
}
/*:root {*/
/* --font-xxs: clamp(0.7rem,0.3vw,0.825rem);*/
/* --font-xs: clamp(0.825rem,0.35vw,0.95rem);*/
/* --font-sm: clamp(0.95rem,0.4vw,1rem);*/
/* --font-base: clamp(1rem,0.45vw,1.0625rem);*/
/* --font-md: clamp(1.0625rem,0.5vw,1.1875rem);*/
/* --font-lg: clamp(1.1875rem,0.6vw,1.3125rem);*/
/* --font-xl: clamp(1.3125rem,0.75vw,1.5625rem);*/
/* --font-2xl: clamp(1.5625rem,0.9vw,1.9375rem);*/
/* --font-3xl: clamp(1.9375rem,1.05vw,2.5625rem);*/
/* --font-4xl: clamp(2.5625rem,1.25vw,3.0625rem)*/
/*}*/
/*@media screen and (max-width:768px) {*/
/* :root {*/
/* --font-xxs: clamp(1.0625rem, 4.4vw, 1.25rem);*/
/* --font-xs: clamp(1.1875rem, 4.8vw, 1.375rem);*/
/* --font-sm: clamp(1.3125rem, 5.2vw, 1.5rem);*/
/* --font-base: clamp(1.4375rem, 5.6vw, 1.625rem);*/
/* --font-md: clamp(1.375rem, 5.8vw, 1.625rem);*/
/* --font-lg: clamp(1.5rem, 6.5vw, 1.75rem);*/
/* --font-xl: clamp(1.6875rem, 7.4vw, 2rem);*/
/* --font-2xl: clamp(1.9375rem, 8.6vw, 2.375rem);*/
/* --font-3xl: clamp(2.25rem, 9.8vw, 2.75rem);*/
/* --font-4xl: clamp(2.7rem, 12vw, 3.5rem);*/
/* }*/
/*}*/
.container-sec.ug-sec1{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;background:black}
.ug-sec1 .ug-sec1-content{position:relative;z-index:2;padding:5vh var(--spacing-container,1.5rem) 2rem;text-align:center;color:#fff}
.ug-sec1 .ug-sec1-bg{position:relative;width:95%;max-width:1440px;z-index:1;padding-bottom:var(--spacing-section,4rem)}
.ug-sec1 .ug-sec1-bg img{width:100%;height:100%;object-fit:contain;object-position:center}
.ug-sec1 .ug-sec1-title{font-size:var(--font-4xl);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm,0.75rem);text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.ug-sec1 .ug-sec1-desc{font-size:var(--font-2xl);line-height:1.6;max-width:60ch;margin:0 auto;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
.ug-sec1 .tag{display:inline-block;background:rgb(231 71 71 / 90%);color:#fff;padding:.15rem .25rem;border-radius:4px;font-size:var(--font-sm);font-weight:600;margin-left:.5rem;vertical-align:middle}
@media screen and (max-width:768px){.container-sec.ug-sec1{min-height:50vh}
.ug-sec1 .ug-sec1-content{padding:7vh var(--spacing-container-mobile,1rem) var(--spacing-section-mobile,2rem)}
.ug-sec1 .tag {
font-size: var(--font-lg);}
}
@media screen and (max-width:480px){.ug-sec1 .ug-sec1-content{padding:1vh .875rem 1.5rem}
}
.container-sec.ug-sec2{position:relative;width:100%;min-height:113vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.container-sec.ug-sec2::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:19.5%;background:#dddedf;z-index:1}
.ug-sec2 .ug-sec2-product{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-top:32vh}
.ug-sec2 .ug-sec2-product-inner{position:relative;display:inline-block;max-width:100%}
.ug-sec2 .ug-sec2-product-inner::after{content:'';position:absolute;bottom:2%;left:20%;width:70%;height:25%;background:linear-gradient(196deg,#000,rgb(0 0 0 / 82%) 40%,rgb(0 0 0 / 0) 70%,transparent 90%);filter:blur(15px);z-index:-1;transform:skewX(16deg) scaleX(1.1)}
.ug-sec2 .ug-sec2-product img{width:auto;max-width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.ug-sec2 .ug-sec2-subtitle{position:absolute;top:10%;left:50%;transform:translateX(-50%);font-size:var(--font-4xl);font-weight:600;color:#555;z-index:3;letter-spacing:.15em;text-transform:uppercase}
.ug-sec2 .ug-sec2-title{position:absolute;top:35%;left:50%;transform:translate(-50%,-70%);font-size:220px;font-weight:700;color:#3a3a3a;z-index:1;letter-spacing:.02em;white-space:nowrap;background:linear-gradient(90deg,#3a3a3a,#f2e0d2,#3a3a3a,#ebb994,#3a3a3a);background-size:500% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}
.ug-sec2 .ug-sec2-title.animate{animation:flowLight 3.5s ease forwards,titleFadeIn 1.2s ease-out both}
@keyframes flowLight{0%{background-position:100% 50%}
100%{background-position:0 50%;color:#3a3a3a}
}
@keyframes titleFadeIn{from{opacity:0;transform:translate(-50%,-70%) scale(0.9)}
to{opacity:1;transform:translate(-50%,-70%) scale(1)}
}
@media screen and (max-width:1024px){.ug-sec2 .ug-sec2-title{font-size:180px}
}
@media screen and (max-width:768px){.container-sec.ug-sec2{min-height:70vh}
.ug-sec2 .ug-sec2-product{min-height:50vh;align-items:flex-start;padding-top:21vh}
.ug-sec2 .ug-sec2-product-inner{max-width:85%}
.ug-sec2 .ug-sec2-product img{max-width:100%;max-height:55vh}
.ug-sec2 .ug-sec2-title{font-size:150px;top:30%}
.ug-sec2 .ug-sec2-subtitle{font-size:var(--font-4xl);top:8%}
.ug-sec1 .ug-sec1-bg {
width: 105%;
}
}
@media screen and (max-width:480px){.container-sec.ug-sec2{min-height:55vh}
.ug-sec2 .ug-sec2-product{min-height:40vh;padding-top:16vh}
.ug-sec2 .ug-sec2-product-inner{max-width:83%}
.ug-sec2 .ug-sec2-product img{max-width:100%;max-height:40vh}
.ug-sec2 .ug-sec2-title{font-size:70px;top:35%}
.ug-sec2 .ug-sec2-subtitle{font-size:var(--font-2xl);top:10%}
}
.container-sec.ug-sec3{padding:var(--spacing-section,4rem) var(--spacing-container,1.5rem);background:linear-gradient(to bottom,#dddedf,#fff,#fff,#fff);min-height:70vh;width:100%;max-width:100%}
.card-ug-sec3{display:flex;gap:1.5rem;max-width:1400px;margin:0 auto}
@media(max-width:1024px){.card-ug-sec3{flex-direction:column;gap:1.25rem}
.ug-sec3-left,.ug-sec3-right{width:100%;display:flex;flex-direction:column;gap:1.25rem}
.ug-sec3-left>div:last-child,.ug-sec3-right>div:first-child{flex-direction:column!important;gap:1.25rem}
.ug-sec3-left .card-media,.ug-sec3-left .card-vm,.ug-sec3-right .card-search,.ug-sec3-right .card-album{width:100%!important;height:280px}
.ug-sec3-left .card-cpu,.ug-sec3-right .card-network{height:220px}
}
@media(max-width:768px){.container-sec.ug-sec3{padding:var(--spacing-section,2rem) var(--spacing-container,1rem)}
.card-ug-sec3{gap:1rem}
.ug-sec3-left,.ug-sec3-right{gap:1rem}
.ug-sec3-left .card-cpu,.ug-sec3-right .card-network{height:180px;flex-direction:column!important}
.ug-sec3-left .card-cpu .card-img-wrap{order:1;padding:.5rem}
.ug-sec3-left .card-cpu .card-content{order:2;padding:1rem}
.ug-sec3-left .card-cpu .spec-group{gap:2rem;flex-wrap:wrap}
.ug-sec3-left .card-media,.ug-sec3-left .card-vm,.ug-sec3-right .card-search,.ug-sec3-right .card-album{height:240px;min-height:300px}
.ug-sec3 .img-cpu img{max-width:100px}
}
@media(max-width:480px){.container-sec.ug-sec3{padding:var(--spacing-section,1.5rem) var(--spacing-container,0.75rem)}
.card-ug-sec3{gap:.75rem}
.ug-sec3-left,.ug-sec3-right{gap:.75rem}
.ug-sec3-left .card-cpu,.ug-sec3-right .card-network{height:auto;min-height:160px}
.ug-sec3-left .card-media,.ug-sec3-left .card-vm,.ug-sec3-right .card-search,.ug-sec3-right .card-album{height:200px}
.ug-sec3 .card-content{padding:1rem}
.ug-sec3 .spec-group{flex-direction:column;gap:.75rem}
.ug-sec3 .card-carousel{max-width:220px;padding:.5rem}
.ug-sec3 .carousel-track img{width:70px;height:95px}
}
.ug-sec3-left{flex:1;display:flex;flex-direction:column;gap:1.5rem}
.ug-sec3-left .ug-sec3-card.card-cpu{min-height:300px;display:flex!important;flex-direction:row!important;align-items:center}
.ug-sec3-left .ug-sec3-card.card-cpu .card-content{width:auto;flex:1;order:1}
.ug-sec3-left .ug-sec3-card.card-cpu .card-img-wrap{order:2;width:auto;flex:0 0 auto}
.ug-sec3-left .card-media,.ug-sec3-left .card-vm{height:400px}
.ug-sec3-left .card-media{width:calc(50% - .75rem)}
.ug-sec3-left .card-vm{width:calc(50% - .75rem)}
.ug-sec3-left>div:nth-child(2){display:flex;gap:1.5rem}
.ug-sec3-right{flex:1;display:flex;flex-direction:column;gap:1.5rem}
.ug-sec3-right .card-search,.ug-sec3-right .card-album{height:380px}
.ug-sec3-right .card-search{width:calc(50% - .75rem);min-width:0}
.ug-sec3-right .card-album{width:calc(50% - .75rem);min-width:0}
.ug-sec3-right>div:first-child{display:flex;gap:1.5rem;width:100%;flex-wrap:nowrap}
.ug-sec3-right .card-network{height:320px;background-image:url('../images/02.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.ug-sec3 .ug-sec3-card{border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.08);position:relative;display:flex;flex-direction:column;background-color:#e9eaea}
.ug-sec3 .card-content{padding:1.5rem;width:100%}
.ug-sec3 .card-title{font-size:var(--font-md);font-weight:700;color:#1a1a1a;margin-bottom:.75rem}
.ug-sec3 .card-desc{font-size:var(--font-sm);color:#666;line-height:1.6}
@media(max-width:768px){.ug-sec3 .card-desc{font-size:var(--font-lg);}
.ug-sec3 .card-title{font-size:var(--font-xl)}}
.ug-sec3 .spec-group{display:flex;gap:2rem}
.ug-sec3 .spec-item{display:flex;flex-direction:column;gap:.25rem}
.ug-sec3 .spec-title{font-size:var(--font-md);font-weight:600;color:#1a1a1a}
.ug-sec3 .spec-sub{font-size:var(--font-sm);color:#666;padding-bottom:10px}
.ug-sec3 .card-img-wrap{position:relative;width:100%;flex:1;overflow:hidden}
.ug-sec3 .card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ug-sec3 .img-overflow-top{overflow:visible;flex:1;display:flex;align-items:flex-end;justify-content:center}
.ug-sec3 .img-overflow-top img{width:80%;height:auto;object-fit:contain;transform:translateY(-20%)}
.ug-sec3 .card-carousel{position:relative;overflow:hidden;padding:1rem;flex:1;display:flex;align-items:center;max-width:350px;margin:0 auto}
@media(max-width:768px){.ug-sec3 .card-carousel{max-width:80%}
.ug-sec3 .spec-title{font-size:var(--font-lg)}
.ug-sec3 .spec-sub {
font-size: var(--font-lg);}
}
.ug-sec3 .carousel-track{display:flex;gap:8px;width:fit-content;animation:marqueeScroll 8s linear infinite}
.ug-sec3 .carousel-track img{width:110px;height:150px;object-fit:cover;border-radius:8px;flex-shrink:0}
@media(max-width:768px){.ug-sec3 .carousel-track img{width:180px;height:auto}
}
@keyframes marqueeScroll{0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.ug-sec3 .img-cpu{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:1rem}
.ug-sec3 .img-cpu img{width:100%;max-width:180px;height:auto;object-fit:contain}
.ug-sec3 .card-img-wrap{perspective:1000px}
.ug-sec3 .card-img-wrap img{transition:transform .3s ease;will-change:transform}
.gsap-hidden{opacity:0}
@media(hover:none){.ug-sec3 .card-img-wrap img{transform:none!important;width:100%;object-fit:contain}
}
.container-sec.ug-sec4{position:relative;width:100%;background:#fff}
.ug-sec4-header{position:relative;z-index:2;background:#fff;padding:4rem var(--spacing-container,1.5rem) 1.5rem;text-align:center}
.ug-sec4-title{font-size:var(--font-4xl);font-weight:700;color:#1a1a1a;line-height:1.4}
.ug-sec4-horizontal-wrapper{position:relative;width:100%;height:100vh;overflow:hidden;margin-top:0}
.ug-sec4-panels{display:flex;height:100%;will-change:transform}
.ug-sec4-panel{flex:0 0 100vw;height:100vh;display:flex;align-items:center;justify-content:center;gap:0;padding:0;background:#fff}
.sec4-panel-text{flex:0 0 40%;max-width:500px;display:flex;flex-direction:column;justify-content:center;padding:0 4%}
.sec4-label{font-size:var(--font-xs);color:#999;letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
.sec4-panel-title{font-size:var(--font-2xl);font-weight:700;color:#1a1a1a;margin-bottom:1.5rem;line-height:1.4}
.sec4-panel-desc{font-size:var(--font-lg);color:#666;line-height:1.8}
.sec4-panel-img{flex:1;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sec4-panel-img img{width:100%;height:100%;object-fit:cover}
@media screen and (max-width:768px){.ug-sec4-horizontal-wrapper{height:65vh}
.ug-sec4-panel{flex-direction:column;gap:1rem;padding:1.5rem;height:60vh}
.sec4-panel-text,.sec4-panel-img{flex:0 0 auto;width:100%}
.sec4-panel-img{height:40vh}
.sec4-panel-desc {
font-size: var(--font-xl);
}
}
.container-sec.ug-sec5{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}
.ug-sec5-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec5-bg img{width:100%;height:100%;object-fit:cover}
.ug-sec5-content{position:relative;z-index:2;padding-left:8%;color:#fff}
.ug-sec5-title{font-size:clamp(5rem,1.6vw,3.75rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.ug-sec5-subtitle{font-size:var(--font-3xl);font-weight:400;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
@media screen and (max-width:1024px){.container-sec.ug-sec5{height:70vh}
}
@media screen and (max-width:768px){.container-sec.ug-sec5{height:50vh;min-height:300px}
.ug-sec5-content{padding-left:5%}
.ug-sec5-title{font-size:var(--font-4xl);margin-bottom:.5rem}
.ug-sec5-subtitle{font-size:var(--font-2xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec5{height:40vh;min-height:260px}
.ug-sec5-content{padding-left:1.25rem}
.ug-sec5-title{font-size:var(--font-2xl);margin-bottom:.35rem}
.ug-sec5-subtitle{font-size:var(--lg)}
}
.container-sec.ug-sec10{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}
.ug-sec10-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec10-bg img{width:100%;height:100%;object-fit:cover}
.ug-sec10-content{position:relative;z-index:2;padding-left:8%;color:#fff}
.ug-sec10-title{font-size:clamp(5rem,1.6vw,3.75rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.ug-sec10-subtitle{font-size:var(--font-3xl);font-weight:400;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
@media screen and (max-width:1024px){.container-sec.ug-sec10{height:70vh}
}
@media screen and (max-width:768px){.container-sec.ug-sec10{height:50vh;min-height:300px}
.ug-sec10-content{padding-left:5%}
.ug-sec10-title{font-size:var(--font-4xl);margin-bottom:.5rem}
.ug-sec10-subtitle{font-size:var(--font-2xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec10{height:40vh;min-height:260px}
.ug-sec10-content{padding-left:1.25rem}
.ug-sec10-title{font-size:var(--font-2xl);margin-bottom:.35rem}
.ug-sec10-subtitle{font-size:var(--lg)}
}
.container-sec.ug-sec6{width:100%;min-height:auto}
.ug-sec6-text{padding:5rem var(--spacing-container,1.5rem) 2rem;text-align:center;background:#fff}
.ug-sec6-label{font-size:var(--font-2xl);color:#666;margin-bottom:1rem}
.ug-sec6-title{font-size:var(--font-4xl);font-weight:800;color:#1a1a1a;margin-bottom:1.25rem;letter-spacing:.05em}
.ug-sec6-desc{font-size:var(--font-lg);color:#555;line-height:1.9;max-width:600px;margin:0 auto}
.ug-sec6-visual{position:relative;width:100%;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ug-sec6-cpu{position:relative;width:100%;max-width:100%}
.ug-sec6-cpu img{width:100%;height:auto;object-fit:contain;display:block}
.ug-sec6-specs{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);width:92%;max-width:1200px;z-index:4;display:flex;gap:1.5rem;background: rgb(0 0 0);padding:1.5rem}
.ug-sec6-specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem 2rem;background:rgba(255,255,255,0.95);padding:1.5rem 2.5rem;border-radius:12px;flex:1}
.ug-sec6-spec-item{flex:1;text-align:center;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.ug-sec6-spec-item .spec-value{font-size:clamp(0.95rem,0.9vw,1.15rem);font-weight:700;color:#1a1a1a;white-space:nowrap}
.ug-sec6-spec-item .spec-value.orange{color:#c8852e}
.ug-sec6-spec-item .spec-label{font-size:clamp(0.9rem,0.65vw,0.825rem);color:#888;line-height:1.5;white-space:pre-line}
.ug-sec6-compare{display:flex;flex-direction:column;gap:.75rem;background:rgba(255,255,255,0.95);padding:1.25rem 2rem;border-radius:12px;flex:1}
.compare-row{display:flex;align-items:center;gap:1.5rem;padding:0}
.compare-left{flex-shrink:0;display:flex;flex-direction:column;min-width:110px}
.compare-num{font-size:clamp(1.25rem,1.1vw,1.65rem);font-weight:800;color:#1a1a1a}
.compare-text{font-size:clamp(0.9rem,0.65vw,0.825rem);color:#888;margin-top:.15rem}
.compare-bars{flex:1;display:flex;flex-direction:column;gap:.45rem}
.bar-item{display:flex;align-items:center;gap: 0.75rem;padding-top: 10px;}
.bar-name{font-size:clamp(0.9rem,0.68vw,0.85rem);color:#555;white-space:nowrap;min-width:130px}
.bar-track{flex:1;height:20px;background:#eee;border-radius:4px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:4px}
.bar-fill.gold{background:linear-gradient(90deg,#d4a03a,#e8b84a)}
.bar-fill.gray{background:#bbb}
.bar-score{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:#333}
@media screen and (max-width:1024px){.ug-sec6-specs{width:94%;gap:1rem}
.ug-sec6-specs-grid{padding:1.25rem 1.5rem;gap:.5rem 1rem}
.ug-sec6-compare{padding:1rem 1.25rem}
.bar-name{min-width:100px}
}
@media screen and (max-width:768px){.ug-sec6-text{padding:2.5rem 1.25rem 1.5rem}
.ug-sec6-label{font-size:var(--font-2xl)}
.ug-sec6-title{font-size:var(--font-3xl)}
.ug-sec6-desc{font-size:var(--font-xl)}
.ug-sec6-desc br{display:none}
.ug-sec6-visual{min-height:auto;flex-direction:column;padding-bottom:0}
.ug-sec6-cpu{width:100%;max-width:100%;position:relative}
.ug-sec6-specs{position:static;transform:none;width:100%;max-width:100%;flex-direction:column;gap:.75rem;padding:0 0 2rem}
.ug-sec6-specs-grid{grid-template-columns:repeat(3,1fr);padding:1.25rem 1rem;gap:.5rem .5rem;max-width: 650px;margin-left: auto;margin-right: auto;width: 650px;}
.ug-sec6-spec-item .spec-value{font-size: 1.55rem;}
.ug-sec6-spec-item .spec-label{font-size: 1.4rem;}
.ug-sec6-compare{padding:1rem 1rem;max-width: 650px;margin-left: auto;margin-right: auto;width: 650px;}
.compare-row{flex-direction:column;align-items:stretch;gap:.6rem}
.compare-left{flex-direction:row;gap:.5rem;align-items:baseline;min-width:auto}
.bar-name{min-width:90px;font-size: 1.5rem;}
.bar-track{height: 25px;}
.bar-score{font-size: 19px;}
.compare-num {
font-size: clamp(1.7rem, 1.1vw, 2rem);
}
.compare-text {
font-size: clamp(1.4rem, 0.65vw, 1.5rem);
}
}
@media screen and (max-width:480px){.ug-sec6-text{padding:2rem 1rem 1rem}
.ug-sec6-specs{padding:0 .75rem 1.25rem}
.ug-sec6-specs-grid{grid-template-columns:repeat(2,1fr);padding:.85rem;gap:.5rem}
.ug-sec6-spec-item .spec-value{font-size:.78rem;white-space:normal}
.ug-sec6-spec-item .spec-label{font-size:.65rem}
.compare-num{font-size:1.1rem}
.compare-text{font-size:.65rem}
.bar-name{min-width:75px;font-size:.68rem}
.bar-track{height:16px}
.bar-score{font-size:9px;right:5px}
}
.container-sec.ug-sec7{width:100%;padding:4rem var(--spacing-container,1.5rem) 1rem;background:#fff;text-align:center}
.ug-sec7-content{margin-bottom:2.5rem}
.ug-sec7-title{font-size:var(--font-4xl);font-weight:700;color:#1a1a1a;margin-bottom:.75rem}
.ug-sec7-desc{font-size:var(--font-lg);color:#666;line-height:1.8}
.ug-sec7-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;max-width:1300px;margin:0 auto;background-color:#fafafa;border-radius:16px}
.ug-sec7-card-left{border-radius:16px 0 0 16px;display:flex;align-items:center;justify-content:center;min-height:550px;height:100%;overflow:hidden}
.ug-sec7-card-left img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;opacity:1;transition:opacity .35s ease}
.ug-sec7-card-left img:not(.active){display:none!important;opacity:0}
.ug-sec7-card-right{position:relative;text-align:left}
.ug-sec7-card-title{font-size:clamp(1.5rem,1.3vw,2rem);font-weight:700;color:#1a1a1a;line-height:1.3;margin-bottom:2rem}
.ug-sec7-option-list{display:flex;flex-direction:column;gap:1rem;position:relative;padding-left:1.25rem;padding-right:2.25rem}
.ug-sec7-option-list::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(to bottom,#111 0,#ccc 100%);border-radius:2px}
.ug-sec7-option-item{padding:1.25rem 1.5rem;border-radius:12px;border:1px solid #eee;cursor:pointer;transition:all .3s ease}
.ug-sec7-option-item:hover{border-color:#ddd;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.ug-sec7-option-item.active{background-color:#e5ae8b24}
.ug-sec7-option-title{font-size:var(--font-md);font-weight:600;color:#1a1a1a;margin-bottom:.5rem}
.ug-sec7-option-desc{font-size:var(--font-base);color:#555;line-height:1.7}
.ug-sec7-speed-compare{display:flex;align-items:center;gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;padding-right:2.25rem}
.ug-sec7-speed-left{flex-shrink:0;display:flex;flex-direction:column;min-width:100px}
.ug-sec7-speed-num{font-size: clamp(1.95rem,1.5vw,2.25rem);font-weight:800;color:#1a1a1a;line-height:1}
.ug-sec7-speed-label{font-size:clamp(0.9rem,0.65vw,0.875rem);color:#888;margin-top:.35rem}
.ug-sec7-speed-bars{flex:1;display:flex;flex-direction:column;gap:.5rem}
.ug-sec7-speed-row{display:flex;align-items:center;gap:.75rem}
.ug-sec7-speed-name{font-size:clamp(0.9rem,0.68vw,0.85rem);color:#555;white-space:nowrap;min-width:140px}
.ug-sec7-speed-track{flex:1;height:22px;background:#eee;border-radius:4px;position:relative;overflow:hidden}
.ug-sec7-speed-fill{height:100%;border-radius:4px}
.ug-sec7-speed-fill.gold{background:linear-gradient(90deg,#c8953a,#d4a03a)}
.ug-sec7-speed-fill.gray{background:#bbb}
.ug-sec7-speed-val{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.ug-sec7-speed-tips{font-size:var(--font-xs);color:#bbb;margin-top: .75rem;line-height:1.5}
@media screen and (max-width:1024px){.ug-sec7-card{gap:2rem}
.ug-sec7-card-left{min-height:340px;padding:1.5rem}
.ug-sec7-speed-tips{font-size:var(--font-base);}
}
@media screen and (max-width:768px){.container-sec.ug-sec7{padding:3rem 1rem 4rem}
.ug-sec7-content{margin-bottom:1.75rem}
.ug-sec7-title{font-size:var(--font-3xl)}
.ug-sec7-desc{font-size:var(--font-xl)}
.ug-sec7-card{grid-template-columns:1fr;gap:1.5rem}
.ug-sec7-card-left{min-height:260px;padding:1.25rem}
.ug-sec7-card-title{font-size:var(--font-2xl);margin-bottom:1.5rem}
.ug-sec7-speed-compare{flex-direction:column;align-items:stretch;gap:1rem}
.ug-sec7-speed-left{flex-direction:row;gap:.5rem;align-items:baseline;min-width:auto}
.ug-sec7-speed-name{min-width:110px;font-size: 1.5rem;}
.ug-sec7-speed-track{height: 30px;}
.ug-sec7-speed-val{font-size: 18px;}
.ug-sec7-speed-label {
font-size: clamp(1.55rem, 0.65vw, 0.875rem);
}
.ug-sec7-option-title{font-size:var(--font-xl);font-weight:600;color:#1a1a1a;margin-bottom:.5rem}
.ug-sec7-option-desc{font-size:var(--font-lg);color:#555;line-height:1.7}
}
.ug-sec7-scenarios{margin-top:4rem;text-align:center}
.ug-sec7-sce-title{font-size:var(--font-4xl);font-weight:700;color:#1a1a1a;margin-bottom:2.25rem}
.ug-sec7-sce-gallery{max-width:1300px;margin:0 auto;margin-bottom:8rem}
.ug-sec7-sce-img-wrap{border-radius:16px;overflow:hidden;position:relative;margin-bottom:2rem;background:#f0f0f0;min-height:420px}
.ug-sec7-sce-img{width:100%;height:auto;display:block;object-fit:cover;opacity:1;transition:opacity .4s ease}
.ug-sec7-sce-img:not(.active){display:none!important;opacity:0}
.ug-sec7-sce-tabs{display:flex;gap:2rem;justify-content:center;position:relative;padding-bottom:.5rem}
.ug-sec7-sce-tab{padding:.75rem 2.5rem;border:0;background:transparent;font-size:var(--font-base);font-weight:400;color:#999;cursor:pointer;transition:all .25s ease;white-space:nowrap;position:relative}
.ug-sec7-sce-tab::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:transparent;transition:background .3s ease}
.ug-sec7-sce-tab:hover{color:#555}
.ug-sec7-sce-tab.active{color:#1a1a1a;font-weight:600}
.ug-sec7-sce-tab.active::after{background:#1a1a1a}
.ug-sec7-sce-tab-item{display:flex;flex-direction:column;align-items:center;gap: .5rem;padding-top: 10px;}
.ug-sec7-sce-desc{font-size:var(--font-base);color:#666;line-height:1.5;margin:0;padding:0 .5rem;text-align:center}
.ug-sec7-sce-desc:not(.active){display:none}
.container-sec.ug-sec8{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ug-sec8-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec8-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.ug-sec8-content{position:relative;z-index:2;text-align:center;color:#fff;width:100%;padding:1rem var(--spacing-container,1.5rem)}
.ug-sec8-subtitle{font-size:var(--font-3xl);font-weight:600;margin-bottom:1rem;letter-spacing:.1em;opacity:0;transform:translateY(-20px)}
.ug-sec8-subtitle.animate{animation:fadeInDown .8s ease-out forwards}
.ug-sec8-number{font-size:clamp(5rem,14vw,12rem);font-weight:800;line-height:1;letter-spacing:-0.02em;margin-bottom:1rem;opacity:0;transform:scale(0.5)}
.ug-sec8-number.animate{animation:scaleUpFadeIn 1s ease-out forwards;animation-delay:.2s}
.ug-sec8-product{position:relative;z-index:3;margin-top:-3rem}
.ug-sec8-product img{width:auto;max-width:80%;height:auto;max-height:50vh;object-fit:contain;display:block;margin:0 auto}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes scaleUpFadeIn{from{opacity:0;transform:scale(0.5)}
to{opacity:1;transform:scale(1)}
}
@media screen and (max-width:768px){.container-sec.ug-sec8{min-height:50vh}
.ug-sec8-number{font-size: clamp(3.5rem,16vw,6rem);margin-bottom:1.5rem}
.ug-sec8-product{margin-top:-1.5rem}
.ug-sec8-product img{max-width:90%;max-height:35vh}
.ug-sec7-sce-desc {
font-size: var(--font-lg);}
}
.container-sec.ug-sec8-capacity-wrap{width:100%;background:#fff;padding:0 var(--spacing-container,1.5rem) 4rem;margin-top:-80px}
.ug-sec8-capacity{position:relative;z-index:4;width:100%;max-width:1200px;margin:0 auto;padding:2rem 0;text-align:center}
.ug-sec8-cap-title{font-size:var(--font-3xl);font-weight:700;color:#1a1a1a;margin-bottom:2.5rem}
.ug-sec8-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem}
.ug-sec8-cap-card{background:#f9fafb;border-radius:16px;padding:2rem 1.25rem;text-align:center;transition:transform .3s ease,background .3s ease}
.ug-sec8-cap-card:hover{transform:translateY(-4px);background:#f0f1f2}
.ug-sec8-cap-icon{width:56px;height:56px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.ug-sec8-cap-icon img{width:100%;height:100%;object-fit:contain}
.ug-sec8-cap-label{font-size:var(--font-lg);color:#555;margin-bottom:.5rem}
.ug-sec8-cap-number{font-size:var(--font-xl);font-weight:700}
.ug-sec8-cap-number.blue{color:#2478f5}
.ug-sec8-cap-number.orange{color:#ff9a2e}
.ug-sec8-cap-number.purple{color:#a24de0}
.ug-sec8-cap-number.green{color:#26bc6a}
.ug-sec8-cap-tips{font-size:var(--font-xs);color:#999;line-height:1.6;max-width:900px;margin:0 auto}
@media screen and (max-width:992px){.ug-sec8-card-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
.ug-sec8-cap-title{font-size:var(--font-3xl);margin-bottom:1.75rem}
.ug-sec8-cap-tips{font-size:var(--font-base);color:#999;line-height:1.6;max-width:900px;margin:0 auto}
}
@media screen and (max-width:768px){.container-sec.ug-sec8-capacity-wrap{padding:0 var(--spacing-container-mobile,1rem) 2.5rem}
.ug-sec8-capacity{padding:1.5rem 0}
.ug-sec8-cap-card{padding:1.5rem 1rem}
.ug-sec8-cap-icon{width:48px;height:48px}
.ug-sec8-cap-number{font-size:var(--font-2xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec8{min-height:60vh}
.ug-sec8-number{font-size:clamp(2.8rem,10vw,4rem)}
.ug-sec8-product img{max-height:28vh}
.ug-sec8-card-grid{gap:.75rem}
.ug-sec8-cap-card{padding:1.25rem .75rem;border-radius:12px}
.ug-sec8-cap-icon{width:40px;height:40px;margin-bottom:.75rem}
.ug-sec8-cap-label{font-size:var(--font-xs)}
.ug-sec8-cap-number{font-size:var(--font-base)}
}
@media screen and (max-width:768px){.ug-sec7-scenarios{margin-top:2.5rem}
.ug-sec7-sce-title{font-size:var(--font-3xl);margin-bottom:1.5rem}
.ug-sec7-sce-img-wrap{border-radius:12px;min-height:260px}
.ug-sec7-sce-tabs{flex-direction:column;align-items:center;gap:.25rem}
.ug-sec7-sce-tab{padding:.5rem 1.25rem;font-size: var(--font-xl);}
.ug-sec7-sce-tab.active::after{background:#1a1a1a}
}
.container-sec.ug-sec9{width:100%;padding:5rem var(--spacing-container,1.5rem);background:linear-gradient(180deg,#fbf0e6 0,#fff 100%)}
.ug-sec9-header{text-align:center;margin-bottom:3rem}
.ug-sec9-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--font-xs);color:#c8852e;background:rgba(200,133,46,0.12);padding:.4rem .85rem;border-radius:20px;margin-bottom:1rem}
.ug-sec9-tag::before{content:'';width:14px;height:14px;background:url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='002424'fill='%23c8852e'%3E%3Cpathd='M1221.35l-1.45-1.32C5.415.36212.2828.525.424.4237.53c1.7403.41.814.52.09C13.093.8114.76316.5319.583225.42228.5c03.78-3.46.86-8.5511.54L1221.35z'/%3E%3C/svg%3E") no-repeat center;background-size:contain;display:inline-block}
.ug-sec9-title{font-size:var(--font-4xl);font-weight:700;color:#1a1a1a;line-height:1.2}
.ug-sec9-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto}
.ug-sec9-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04);transition:transform .3s ease,box-shadow .3s ease}
.ug-sec9-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.ug-sec9-card-img-wrap{overflow:hidden}
.ug-sec9-card-img{width:100%;height:280px;object-fit:cover;display:block;transition:transform .3s ease}
.ug-sec9-card:hover .ug-sec9-card-img{transform:scale(1.05)}
.ug-sec9-card-content{padding:1.5rem}
.ug-sec9-card-name{font-size:var(--font-lg);font-weight:600;color:#1a1a1a;margin-bottom:.5rem;line-height:1.4}
.ug-sec9-card-desc{font-size:var(--font-base);color:#666;line-height:1.6}
.ug-sec9-tips{font-size:var(--font-xs);color:#999;margin-top:2rem;max-width:800px;margin-left:auto;margin-right:auto}
@media screen and (max-width:1024px){.ug-sec9-cards{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
@media screen and (max-width:768px){.container-sec.ug-sec9{padding:3rem var(--spacing-container-mobile,1rem)}
.ug-sec9-header{margin-bottom:2rem}
.ug-sec9-title{font-size:var(--font-3xl)}
.ug-sec9-cards{grid-template-columns:1fr;gap:1rem}
.ug-sec9-card-img{height: 360px;}
.ug-sec9-card-content{padding:1.25rem}
.ug-sec9-card-name{font-size:var(--font-xl)}
.ug-sec9-tips{margin-top:1.5rem}
.ug-sec9-card-desc {
font-size: var(--font-lg);}
.ug-sec9-tips{font-size:var(--font-base);color:#999;margin-top:2rem;max-width:800px;margin-left:auto;margin-right:auto}
}
.container-sec.ug-sec12{width:100%;padding:1rem var(--spacing-container,1.5rem) 8rem;background:transparent;min-height:100vh}
.ug-sec12-header{text-align:center;margin-bottom:3rem;padding-bottom:1rem}
.ug-sec12-tag{display:inline-block;font-size:var(--font-lg);color:#c8852e;background:rgba(200,133,46,0.15);padding:.4rem 1rem;border-radius:20px;letter-spacing:.05em}
.ug-sec12-title{font-size:var(--font-4xl);font-weight:700;color:#222;line-height:1.2;margin-bottom:1rem;padding-top: 20px;}
.ug-sec12-desc{font-size:var(--font-lg);color:#666;line-height:1.8;max-width:560px;margin:0 auto}
.ug-sec12-stack-wrapper{display:flex;flex-direction:column;gap:2rem;max-width:650px;margin:0 auto;padding-bottom:20rem}
.ug-sec12-card{position:relative;width:100%;border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,0.08);background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.08)}
.ug-sec12-card-inner{display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;height: 100%;}
.ug-sec12-card-img{width:100%;height:280px;overflow:hidden}
.ug-sec12-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.ug-sec12-card-content{padding:2rem 2.5rem;text-align:center}
.ug-sec12-card-title{font-size:var(--font-xl);font-weight:600;color:#222;margin-bottom:.5rem}
.ug-sec12-card-desc{font-size:var(--font-base);color:#666;line-height:1.7}
@media screen and (min-width:1024px){.ug-sec12-stack-wrapper{max-width:650px;gap:2.5rem}
.ug-sec12-card-img{height:360px}
}
@media screen and (max-width:768px){.container-sec.ug-sec12{padding:3rem var(--spacing-container-mobile,1rem) 0rem}
.ug-sec12-title{font-size:var(--font-3xl);padding-top: 20px;}
.ug-sec12-card-img{height: 100%;}
.ug-sec12-card-content{padding:1.5rem 1.25rem}
.ug-sec12-stack-wrapper{gap:1.5rem;padding-bottom:12rem}
.ug-sec12-desc {
font-size: var(--font-xl);
}
.ug-sec12-card-desc{font-size:var(--font-lg);color:#666;line-height:1.7}
}
@media screen and (max-width:480px){.ug-sec12-card-img{height:160px}
.ug-sec12-card-content{padding:1.25rem 1rem}
}
.container-sec.ug-sec11{width:100%;padding:5rem var(--spacing-container,1.5rem);background:#fff;text-align:center}
.ug-sec11-content{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ug-sec11-title{font-size: clamp(3rem,4vw,3.5rem);font-weight:700;color:#c8852e;margin:0;line-height:1.2}
.ug-sec11-subtitle{font-size:var(--font-2xl);font-weight:600;color:#1a1a1a;margin:0}
.ug-sec11-desc{font-size:var(--font-lg);color:#888;margin:0;line-height:1.6}
.ug-sec11-card{display:grid;grid-template-columns:1fr 1.6fr;gap:2rem;max-width:1200px;margin:3rem auto 0;background:#fff;border-radius:24px;padding:2rem;box-shadow:0 2px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.03);align-items:center}
.ug-sec11-left{overflow:hidden;height:320px;flex:1;display:flex;align-items:center;justify-content:center;padding:0 4px}
.ug-sec11-feed{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:360px;padding:4px 12px}
.ug-sec11-feed-wrapper{overflow:hidden;will-change:transform}
@keyframes sec11FeedScroll{0%{transform:translateY(0)}
100%{transform:translateY(-50%)}
}
.ug-sec11-feed-wrapper{animation:sec11FeedScroll 24s linear infinite;will-change:transform}
.sec11-note{display:grid;grid-template-columns:3em 1fr;gap:.75em;padding:1em 1.25em;background:#fff;border-radius:1em;box-shadow:0 2px 12px rgb(0 0 0 / 3%);border:1px solid rgba(0,0,0,0.04);flex-shrink:0;text-align:left}
.sec11-note-avatar{aspect-ratio:1;border-radius:50%;font-size:1.5em;display:grid;place-items:center;width:100%}
.sec11-note-avatar img{border-radius:4px}
.sec11-note-body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sec11-note-name{font-size:.9em;font-weight:600;color:#1a1a1a;margin-bottom:.15em}
.sec11-note-msg{font-size:.8em;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes sec11NoteIn{from{filter:blur(8px);opacity:0;transform:scale(0.85)}
to{filter:blur(0);opacity:1;transform:scale(1)}
}
.ug-sec11-right{border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ug-sec11-right img{width:100%;height:auto;display:block;object-fit:cover;border-radius:12px}
@media screen and (max-width:1024px){.ug-sec11-card{grid-template-columns:1fr 1.2fr;gap:1.5rem;padding:1.5rem}
}
@media screen and (max-width:768px){.ug-sec11-card{grid-template-columns:1fr;gap:1.5rem;padding:1.25rem;margin-top:2rem}
.ug-sec11-left{height: 300px;order:2}
.ug-sec11-feed{max-width:100%}
.sec11-note-name {
font-size: 1.5rem;
}
.sec11-note-msg {
font-size: 1.4em;
}
.ug-sec11-desc {
font-size: var(--font-xl);
}
}
.container-sec.ug-sec13{width:100%;padding:8rem var(--spacing-container,1.5rem) 9rem}
.ug-sec13-container{max-width:1440px;margin:0 auto;background:#f4f4f4;border-radius:32px;padding:4rem;position:relative;overflow:hidden}
.ug-sec13-container::before{content:'';position:absolute;top:0;right:0;width:200px;height:200px;border-radius:0 32px 0 50%;transform:rotate(45deg) translateX(50px) translateY(-50px)}
.ug-sec13-header{position:relative;z-index:2;margin-bottom:4rem}
.ug-sec13-title{font-size:var(--font-4xl);font-weight:700;color:#1a1a1a;line-height:1.3;margin-bottom:2rem;max-width:700px}
.ug-sec13-buttons{display:flex;gap:1rem;flex-wrap:wrap}
.ug-sec13-btn{padding:.85rem 2rem;border-radius:25px;border:0;font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .3s ease;background:#1a1a1a;color:#fff}
.ug-sec13-btn:hover{background:#333;transform:translateY(-2px)}
.ug-sec13-btn-secondary{background:transparent;color:#1a1a1a;border:2px solid #e0e0e0}
.ug-sec13-btn-secondary:hover{border-color:#1a1a1a;background:#fafafa}
.ug-sec13-content{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;position:relative;z-index:2}
.ug-sec13-tabs{display:flex;flex-direction:column;gap:1rem}
.ug-sec13-tab{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem;border-radius:16px;cursor:pointer;transition:all .3s ease;background:#fafafa;border:1px solid transparent}
.ug-sec13-tab:hover{background:#f5f5f5}
.ug-sec13-tab.active{background:#fff;border-color:#e0e0e0;box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.ug-sec13-tab-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ug-sec13-tab-icon img{width:24px;height:24px;object-fit:contain}
.ug-sec13-tab-content{flex:1;min-width:0}
.ug-sec13-tab-title{font-size:var(--font-md);font-weight:600;color:#c8852e;margin-bottom: .45rem;}
.ug-sec13-tab-desc{font-size:var(--font-sm);color:#888;line-height: 1.5;}
.ug-sec13-images{position:relative;height:560px}
.ug-sec13-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:all .4s ease;min-height: 500px;}
.ug-sec13-image-wrapper.active{opacity:1;visibility:visible}
.ug-sec13-image-card{height:100%;background:#f8f9fa;border-radius:20px;display:flex;flex-direction:column}
.container-sec.ug-sec23{position:relative;width:100%;min-height:100vh;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:3vh}
.ug-sec23-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec23-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.ug-sec23-content{position:relative;z-index:2;text-align:center;color:#fff;padding:2rem var(--spacing-container,1.5rem);max-width:800px}
.ug-sec23-title{font-size:var(--font-4xl);font-weight:700;line-height:1.3;margin-bottom:1.25rem;text-shadow:0 2px 12px rgba(0,0,0,0.4)}
.ug-sec23-subtitle{font-size:var(--font-lg);color:rgba(255,255,255,0.9);margin-bottom:3rem;text-shadow:0 1px 6px rgba(0,0,0,0.3);letter-spacing:.05em}
.ug-sec23-bubbles{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;max-width:400px;margin:0 auto;margin-left:4%}
.ug-sec23-bubbles .bubble{background:rgb(195 207 226);color:#333;padding:.85rem 1.25rem;border-radius:16px 16px 16px 4px;font-size:var(--font-sm);box-shadow:0 4px 16px rgba(0,0,0,0.15);max-width:100%}
.ug-sec23-bubbles .bubble-1{align-self:flex-start;animation:bubbleIn .8s ease-out forwards}
.ug-sec23-bubbles .bubble-2{align-self:center;animation:bubbleIn .8s ease-out .3s forwards;opacity:0}
.ug-sec23-bubbles .bubble-3{align-self:flex-end;animation:bubbleIn .8s ease-out .6s forwards;opacity:0}
@keyframes bubbleIn{from{opacity:0;transform:translateY(20px) scale(0.9)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@media screen and (max-width:768px){.container-sec.ug-sec23{min-height:70vh}
.ug-sec23-content{padding:2rem var(--spacing-container-mobile,1rem)}
.ug-sec23-title{font-size: clamp(1.8rem,6vw,2.5rem);margin-bottom:1rem}
.ug-sec23-subtitle{font-size:var(--font-xl);margin-bottom:2rem}
.ug-sec23-bubbles{gap:.75rem;max-width: 420px;}
.ug-sec23-bubbles .bubble{padding:.75rem 1rem;font-size:var(--font-md)}
.ug-sec13-tab-title {
font-size: var(--font-xl);}
.ug-sec13-tab-desc{font-size:var(--font-lg);color:#888}
}
@media screen and (max-width:480px){.container-sec.ug-sec23{min-height:55vh}
.ug-sec23-title{font-size:clamp(1.3rem,4.5vw,1.8rem)}
.ug-sec23-subtitle{font-size:var(--font-sm)}
.ug-sec23-bubbles{max-width:280px}
}
.container-sec.ug-sec23-cards-wrap{width:100%;background:#f5f5f7;padding:3rem 0}
.ug-sec23-cards{max-width:1200px;margin:0 auto;padding:0 var(--spacing-container,1.5rem);display:flex;flex-direction:column;gap:1.5rem}
.ug-sec23-card{display:flex;background:#fff;border-radius:24px;overflow:hidden}
.ug-sec23-card-img{flex:1;min-width:0}
.ug-sec23-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.ug-sec23-card-content{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2.5rem}
.ug-sec23-card-title{font-size:var(--font-xl);font-weight:700;color:#1a1a1a;margin-bottom:1rem;line-height:1.3}
.ug-sec23-card-desc{font-size:var(--font-base);color:#666;line-height:1.8}
.ug-sec23-card.card-music{flex-direction:row-reverse}
.ug-sec23-tips{text-align:center;padding:1rem var(--spacing-container,1.5rem);font-size:var(--font-xs);color:#999}
@media screen and (max-width:1024px){.ug-sec23-card-content{padding:2rem}
.ug-sec23-card-title{font-size:clamp(1.3rem,2.5vw,1.6rem)}
.ug-sec23-card-desc{font-size:var(--font-sm)}
}
@media screen and (max-width:768px){.ug-sec23-cards{margin-top:2.5rem;gap:1.25rem;padding:0 var(--spacing-container-mobile,1rem)}
.ug-sec23-card{flex-direction:column!important}
.ug-sec23-card-img{height:220px}
.ug-sec23-card-content{padding:1.75rem}
.ug-sec23-card-title{font-size:var(--font-xl)}
.ug-sec23-tips{padding:2rem var(--spacing-container-mobile,1rem);font-size:var(--font-xxs)}
.ug-sec23-card-desc {
font-size: var(--font-lg);
}
}
@media screen and (max-width:480px){.ug-sec23-card-img{height:180px}
.ug-sec23-card-content{padding:1.25rem}
.ug-sec23-card-title{font-size:var(--font-lg);margin-bottom:.75rem}
.ug-sec23-card-desc{font-size:var(--font-xs)}
}
.ug-sec13-image-title{font-size:var(--font-lg);font-weight:600;color:#1a1a1a;margin-bottom:.5rem}
.ug-sec13-image-subtitle{font-size:var(--font-sm);color:#888;margin-bottom:1.5rem}
.ug-sec13-image-card img{flex:1;width:100%;height:calc(100% - 80px);object-fit:cover;border-radius:12px}
.ug-sec13-bottom-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1440px;margin:3rem auto 0}
.ug-sec13-bottom-card{background:#f8f9fa;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.ug-sec13-bottom-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.08)}
.ug-sec13-bottom-card-content{padding:1.5rem}
.ug-sec13-bottom-card-title{font-size:var(--font-xl);font-weight:600;color:#c8852e;margin-bottom:.5rem}
.ug-sec13-bottom-card-desc{font-size:var(--font-md);color:#666;line-height:1.6}
.ug-sec13-bottom-card-img{height:auto;overflow:hidden}
.ug-sec13-bottom-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.ug-sec13-bottom-card:hover .ug-sec13-bottom-card-img img{transform:scale(1.05)}
@media screen and (max-width:1200px){.ug-sec13-content{grid-template-columns:1fr 1.3fr}
.ug-sec13-images{height:450px}
}
@media screen and (max-width:992px){.ug-sec13-container{padding:3rem}
.ug-sec13-content{grid-template-columns:1fr;gap:2rem}
.ug-sec13-images{height:400px;order:-1}
.ug-sec13-tabs{flex-direction:row;flex-wrap:wrap}
.ug-sec13-tab{flex:1;min-width:200px}
.ug-sec13-bottom-cards{grid-template-columns:1fr;padding:0 2rem}
}
@media screen and (max-width:768px){.container-sec.ug-sec13{padding: 15rem var(--spacing-container-mobile,1rem) 3rem;}
.ug-sec13-container{padding:2rem;border-radius:24px}
.ug-sec13-title{font-size:var(--font-2xl);margin-bottom:1.5rem}
.ug-sec13-buttons{gap:.75rem}
.ug-sec13-btn{padding:.75rem 1.5rem;font-size:var(--font-xs)}
.ug-sec13-images{height:320px}
.ug-sec13-image-card{padding:1.5rem}
.ug-sec13-tabs{flex-direction:column}
.ug-sec13-tab{min-width:auto;min-height: 180px;}
.ug-sec13-bottom-cards{padding:0 1rem}
.ug-sec13-bottom-card-desc{font-size:var(--font-lg);color:#666;line-height:1.6}
}
@media screen and (max-width:480px){.ug-sec13-container{padding:1.5rem;border-radius:20px}
.ug-sec13-title{font-size:var(--font-xl)}
.ug-sec13-images{height:260px}
.ug-sec13-tab-icon{width:40px;height:40px}
.ug-sec13-tab-icon img{width:20px;height:20px}
}
.container-sec.ug-sec14{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}
.ug-sec14-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec14-bg img{width:100%;height:100%;object-fit:cover}
.ug-sec14-content{position:relative;z-index:2;padding-left:8%;color:#fff}
.ug-sec14-title{font-size:clamp(5rem,1.6vw,3.75rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.ug-sec14-subtitle{font-size:var(--font-3xl);font-weight:400;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
@media screen and (max-width:1024px){.container-sec.ug-sec14{height:70vh}
}
@media screen and (max-width:768px){.container-sec.ug-sec14{height:50vh;min-height:300px}
.ug-sec14-content{padding-left:5%}
.ug-sec14-title{font-size:var(--font-4xl);margin-bottom:.5rem}
.ug-sec14-subtitle{font-size:var(--font-2xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec14{height:40vh;min-height:260px}
.ug-sec14-content{padding-left:1.25rem}
.ug-sec14-title{font-size:var(--font-2xl);margin-bottom:.35rem}
.ug-sec14-subtitle{font-size:var(--lg)}
}
.container-sec.ug-sec20{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:flex-start}
.ug-sec20-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.ug-sec20-bg img{width:100%;height:100%;object-fit:cover}
.ug-sec20-content{position:relative;z-index:2;padding-left:8%;color:#fff}
.ug-sec20-title{font-size:clamp(5rem,1.6vw,3.75rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.ug-sec20-subtitle{font-size:var(--font-3xl);font-weight:400;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
@media screen and (max-width:1024px){.container-sec.ug-sec20{height:70vh}
}
@media screen and (max-width:768px){.container-sec.ug-sec20{height:50vh;min-height:300px}
.ug-sec20-content{padding-left:5%}
.ug-sec20-title{font-size:var(--font-4xl);margin-bottom:.5rem}
.ug-sec20-subtitle{font-size:var(--font-2xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec20{height:40vh;min-height:260px}
.ug-sec20-content{padding-left:1.25rem}
.ug-sec20-title{font-size:var(--font-2xl);margin-bottom:.35rem}
.ug-sec20-subtitle{font-size:var(--lg)}
}
.container-sec.ug-sec21{position:relative;width:100%;padding:4rem var(--spacing-container,1.5rem);background:#f0f2f6;display:flex;justify-content:center}
.container-sec.ug-sec21 .ug-sec21-inner{background:#fff;width:100%;max-width:1400px;border-radius:2rem;padding:3rem var(--spacing-container,1.5rem)}
.ug-sec21-header{text-align:center;margin-bottom:4rem}
.ug-sec21-badge{display:inline-block;background:#dcfce7;color:#166534;font-size:var(--font-sm);font-weight:600;padding: .8rem 1.25rem;border-radius:9999px}
.ug-sec21-title{font-size:var(--font-4xl);font-weight:700;color:#1e293b;margin-bottom:1.5rem;padding-top:1.5rem}
.ug-sec21-desc{font-size:var(--font-lg);color:#64748b;max-width:600px;margin:0 auto;line-height:1.8}
.ug-sec21-content{display:flex;flex-direction:column;gap:4rem;align-items:center;max-width:1200px;margin:0 auto}
.ug-sec21-cards{display:flex;flex-direction:row;gap:2rem;width:100%;justify-content:center}
.ug-sec21-card{display:flex;flex-direction:row;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:linear-gradient(135deg,#f8fafc 0,#f1f5f9 100%);border-radius:1rem;min-width:140px;text-align:left}
.ug-sec21-card-icon-wrapper{width:40px;height:40px;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8b5cf6}
.ug-sec21-card-title{font-size:1rem;font-weight:600;color:#1e293b;margin:0;line-height:1;display:flex;align-items:center}
.ug-sec21-card-desc{font-size:var(--font-sm);color:#64748b;line-height:1.6}
.ug-sec21-image{display:flex;justify-content:center;align-items:center;padding:2rem 0}
.ug-sec21-image img{max-width:100%;height:auto}
@media(max-width:768px){.container-sec.ug-sec21 .ug-sec21-inner{border-radius:1rem;margin:2rem 1rem;padding:4rem 1.5rem}
.ug-sec21-content{gap:3rem}
.ug-sec21-cards{flex-direction:column;gap:1.5rem}
.ug-sec21-title{font-size:clamp(1.5rem,4vw,2rem)}
.ug-sec21-card-icon-wrapper {
width: 60px;
height: 60px;}
.ug-sec21-card-title {
font-size: 1.7rem;
}
.ug-sec21-badge {
font-size: var(--font-lg);
}
}
.cloud-item .cloud-icon.kuake{background:linear-gradient(135deg,#00c6fb 0,#005bea 100%)}
.cloud-item .cloud-icon.google{background:linear-gradient(135deg,#4285f4 0,#3367d6 100%)}
.cloud-item .cloud-icon{width:44px;height:44px;border-radius:10px;object-fit:contain}
.cloud-item span{font-size:var(--font-xs);color:rgba(255,255,255,0.6)}
.ug-sec21-image{position:relative;border-radius:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#fff;height:100%}
.ug-sec21-image img{width:100%;height:auto;display:block}
@media screen and (max-width:1024px){.ug-sec21-content{grid-template-columns:1fr;gap:3rem}
.ug-sec21-image{order:-1}
}
@media screen and (max-width:768px){.container-sec.ug-sec21{padding:2rem 1rem}
.ug-sec21-title{font-size:var(--font-2xl);margin-top: 15px;}
.ug-sec21-desc{font-size:var(--font-base)}
.ug-sec21-cards-row{grid-template-columns:1fr}
.ug-sec21-card{padding:1.5rem}
.ug-sec21-cloud-icons{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:480px){.ug-sec21-header{margin-bottom:2.5rem}
.ug-sec21-card{padding:1.25rem}
.ug-sec21-card-icon{width:40px;height:40px;font-size:1.25rem}
.ug-sec21-cloud-icons{gap:1rem}
.cloud-icon{width:36px;height:36px;font-size:1rem}
}
.container-sec.ug-sec15{position:relative;width:100%;min-height:100vh;background:linear-gradient(to bottom,#000 0,#030304 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ug-sec15-content{position:relative;z-index:2;margin-bottom:3rem;padding-top: 6rem;}
.ug-sec15-title{font-size:var(--font-4xl);font-weight:700;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.ug-sec15-desc{font-size:var(--font-lg);color:rgba(255,255,255,0.7);line-height:1.6;max-width:600px;margin:0 auto}
.ug-sec15-image{position:relative;z-index:2;width:100%;max-width:900px}
.ug-sec15-image img{width:100%;height:auto;object-fit:contain;display:block}
.ug-sec15-features{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;height:80px;width:100%;text-align:center;z-index:10}
.ug-sec15-feature-item{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:0;transition:opacity .5s ease,transform .5s ease;width:100%}
.ug-sec15-feature-item.active{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ug-sec15-feature-item.prev{opacity:0;transform:translate(-50%,-150%) scale(0.9)}
.ug-sec15-feature-item.next{opacity:0;transform:translate(-50%,50%) scale(0.9)}
.ug-sec15-feature{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.ug-sec15-feature-desc{font-size:var(--font-base);color:rgba(255,255,255,0.8);text-shadow:0 1px 4px rgba(0,0,0,0.5)}
@media screen and (max-width:1024px){.container-sec.ug-sec15{min-height:80vh}
}
@media screen and (max-width:768px){.container-sec.ug-sec15{min-height: 60vh;padding: 3rem var(--spacing-container-mobile,1rem);}
.ug-sec15-title{font-size:var(--font-3xl)}
.ug-sec15-subtitle{font-size:var(--font-2xl);margin-bottom:1rem}
.ug-sec15-desc{font-size:var(--font-xl)}
.ug-sec15-feature{font-size:var(--font-3xl)}
.ug-sec15-feature-desc{font-size:var(--font-xl)}
}
@media screen and (max-width:480px){.container-sec.ug-sec15{min-height:60vh}
.ug-sec15-content{margin-bottom:2rem}
.ug-sec15-title{font-size:var(--font-3xl)}
.ug-sec15-subtitle{font-size:var(--font-xl)}
}
.container-sec.ug-sec16{position:relative;width:100%;background:#000;padding:6rem var(--spacing-container,1.5rem)}
.ug-sec16-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;max-width:1300px;margin:0 auto;background-color:#000;border-radius:16px;overflow:hidden}
.ug-sec16-card-left{border-radius:16px 0 0 16px;display:flex;align-items:center;justify-content:center;min-height:400px;height:100%;overflow:hidden}
.ug-sec16-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;opacity:1;transition:opacity .35s ease}
.ug-sec16-img:not(.active){display:none!important;opacity:0}
.ug-sec16-card-right{position:relative;text-align:left;padding:2rem 2rem 2rem 0}
.ug-sec16-card-title{font-size:clamp(1.5rem,1.3vw,2rem);font-weight:700;color:#fff;line-height:1.3;margin-bottom:2rem}
.ug-sec16-option-list{display:flex;flex-direction:column;gap:1rem;position:relative;padding-left:1.25rem;padding-right:2.25rem}
.ug-sec16-option-list::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(to bottom,#fff 0,#666 100%);border-radius:2px}
.ug-sec16-option-item{padding:1.25rem 1.5rem;border-radius:12px;border:1px solid #333;cursor:pointer;transition:all .3s ease}
.ug-sec16-option-item:hover{border-color:#555;box-shadow:0 2px 8px rgba(255,255,255,0.05)}
.ug-sec16-option-item.active{background-color:rgba(255,255,255,0.1)}
.ug-sec16-option-title{font-size:var(--font-base);font-weight:600;color:#fff;margin-bottom:.5rem}
.ug-sec16-option-desc{font-size:var(--font-sm);color:rgba(255,255,255,0.7);line-height:1.7}
@media screen and (max-width:1024px){.ug-sec16-card{gap:2rem}
}
@media screen and (max-width:768px){.container-sec.ug-sec16{padding:4rem var(--spacing-container,1.5rem)}
.ug-sec16-card{grid-template-columns:1fr;gap:1.5rem}
.ug-sec16-card-left{border-radius:16px 16px 0 0;min-height:250px}
.ug-sec16-card-right{padding:1.5rem}
}
@media screen and (max-width:480px){.container-sec.ug-sec16{padding:3rem var(--spacing-container,1rem)}
.ug-sec16-card-title{font-size:var(--font-xl)}
.ug-sec16-option-desc{font-size:var(--font-xs)}
}
.container-sec.ug-sec17{position:relative;width:100%;background:#000;padding:2rem var(--spacing-container,1.5rem);text-align:center}
.ug-sec17-content{margin-bottom:4rem}
.ug-sec17-title{font-size:clamp(2rem,3vw,3rem);font-weight:700;color:#fff;margin-bottom:.5rem}
.ug-sec17-subtitle{font-size:clamp(1.5rem,2.5vw,2.25rem);font-weight:700;color:#fff;margin-bottom:1.5rem}
.ug-sec17-desc{font-size:var(--font-lg);color:rgba(255,255,255,0.7);line-height:1.6;max-width:600px;margin:0 auto}
.ug-sec17-gallery{max-width:1300px;margin:0 auto}
.ug-sec17-img-wrap{border-radius:16px;overflow:hidden;position:relative;margin-bottom:2rem;background:#111;min-height:420px}
.ug-sec17-img{width:100%;height:auto;display:block;object-fit:cover;opacity:1;transition:opacity .4s ease}
.ug-sec17-img:not(.active){display:none!important;opacity:0}
.ug-sec17-tabs{display:flex;gap:2rem;justify-content:center;position:relative;border-bottom:1px solid #333;padding-bottom:.5rem}
.ug-sec17-tab{padding:.75rem 1.5rem;border:0;background:transparent;font-size:var(--font-lg);font-weight:400;color:#888;cursor:pointer;transition:all .25s ease;white-space:nowrap}
.ug-sec17-tab:hover{color:#ccc}
.ug-sec17-tab.active{color:#fff;font-weight:600}
.ug-sec17-tab-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}
.ug-sec17-tab-item::after{content:'';position:absolute;bottom:-0.75rem;left:50%;transform:translateX(-50%);width:80%;height:2px;background:transparent;transition:background .3s ease}
.ug-sec17-tab-item.active::after{background:#fff}
.ug-sec17-tab-desc{font-size:var(--font-lg);color:rgba(255,255,255,0.6);line-height:1.4;margin:0;padding:0 .5rem;text-align:center}
.ug-sec17-tab-desc:not(.active){display:none}
@media screen and (max-width:768px){.container-sec.ug-sec17{padding:4rem var(--spacing-container,1.5rem)}
.ug-sec17-img-wrap{min-height:280px}
.ug-sec17-tab{padding:.75rem 1.5rem;font-size: var(--font-xl);}
.ug-sec17-subtitle {
font-size: clamp(2.5rem, 2.5vw, 2.25rem);
}
.ug-sec17-desc{font-size:var(--font-xl);color:rgba(255,255,255,0.7);line-height:1.6;max-width:600px;margin:0 auto}
}
@media screen and (max-width:480px){.container-sec.ug-sec17{padding:1rem var(--spacing-container,1rem)}
.ug-sec17-title{font-size:var(--font-2xl)}
.ug-sec17-subtitle{font-size:var(--font-xl)}
.ug-sec17-desc{font-size:var(--font-base)}
.ug-sec17-img-wrap{min-height:200px}
}
.container-sec.ug-sec18{position:relative;width:100%;background:#000;padding:6rem var(--spacing-container,1.5rem);text-align:center}
.ug-sec18-content{margin-bottom:4rem}
.ug-sec18-title{font-size:var(--font-4xl);font-weight:700;color:#fff;margin-bottom:.5rem}
.ug-sec18-subtitle{font-size:var(--font-4xl);font-weight:700;color:#fff;margin-bottom:2rem}
.ug-sec18-desc{font-size:var(--font-xl);color:rgba(255,255,255,0.7);line-height:1.8;max-width:600px;margin:0 auto}
.ug-sec18-desc p{margin-bottom:.5rem}
.ug-sec18-desc p:last-child{margin-bottom:0}
.ug-sec18-image{max-width:100%;margin:0 auto}
.ug-sec18-image img{width:100%;height:auto;display:block;max-width:1200px;margin:0 auto}
@media screen and (max-width:768px){.container-sec.ug-sec18{padding:4rem var(--spacing-container,1.5rem)}
.ug-sec18-title {
font-size: clamp(3rem, 3vw, 4rem);
}
.ug-sec18-subtitle {
font-size: clamp(2.5rem, 2.5vw, 3rem);
}
}
@media screen and (max-width:480px){.container-sec.ug-sec18{padding:3rem var(--spacing-container,1rem)}
.ug-sec18-title{font-size:var(--font-2xl)}
.ug-sec18-subtitle{font-size:var(--font-xl)}
.ug-sec18-desc{font-size:var(--font-base)}
}
.container-sec.ug-sec19{position:relative;width:100%;min-height:100vh;overflow:hidden}
@media screen and (max-width:768px){.container-sec.ug-sec19{min-height:60vh;background-color:#000}
}
.ug-sec19-slider{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
@media screen and (max-width:768px){.ug-sec19-slider{opacity:.6}
}
.ug-sec19-slides{position:relative;width:100%;height:100%}
.ug-sec19-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.ug-sec19-slide.active{opacity:1}
.ug-sec19-content{position:absolute;bottom:0;left:0;right:0;z-index:2;max-width:1200px;margin:0 auto;padding:2rem var(--spacing-container,1.5rem) 4rem;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:3rem}
.ug-sec19-text{flex:1;text-align:left}
.ug-sec19-title{font-size: clamp(2.3rem,2.5vw,2.5rem);font-weight:700;margin-bottom:1rem;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.ug-sec19-desc{font-size:var(--font-base);color:rgba(255,255,255,0.85);line-height:1.6;max-width:420px;text-shadow:0 1px 10px rgba(0,0,0,0.5)}
.ug-sec19-features{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;flex:1;max-width:450px}
.ug-sec19-feature{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:rgba(255,255,255,0.08);border-radius:8px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}
.ug-sec19-feature-icon{font-size:var(--font-base);width:30px}
.ug-sec19-feature-text{font-size:var(--font-md);font-weight:500;color:rgba(255,255,255,0.9)}
.ug-sec19-dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:1rem}
.ug-sec19-dot{width:10px;height:10px;min-width:10px;min-height:10px;border-radius:50%;border:2px solid rgba(255,255,255,0.5);background:transparent;cursor:pointer;transition:all .3s ease;padding:0;margin:0}
.ug-sec19-dot:hover{border-color:rgba(255,255,255,0.8)}
.ug-sec19-dot.active{background:#fff;border-color:#fff}
@media screen and (max-width:1024px){.ug-sec19-features{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:768px){.ug-sec19-content{padding:6rem var(--spacing-container,1.5rem) 4rem;text-align:center}
.ug-sec19-desc{margin:0 auto 2.5rem;font-size: var(--font-lg);}
.ug-sec19-features{grid-template-columns:1fr;max-width:100%}
.ug-sec19-feature{justify-content:center}
}
@media screen and (max-width:480px){.ug-sec19-content{padding:4rem var(--spacing-container,1rem) 3rem}
.ug-sec19-title{font-size:var(--font-2xl)}
.ug-sec19-desc{font-size:var(--font-base)}
}
.container-sec.ug-sec22{position:relative;width:100%;padding:6rem var(--spacing-container,1.5rem);background:linear-gradient(180deg,#f5f7fa 0,rgba(255,255,255,0.8) 50%,#fff 100%)}
.ug-sec22-header{text-align:center;margin-bottom:3rem}
.ug-sec22-title{font-size:var(--font-4xl);font-weight:700;color:#1e293b;margin:0}
.ug-sec22-inner{max-width:1400px;margin:0 auto}
.ug-sec22-top-card{background:#fff;border-radius:20px;padding:2.5rem;margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center;gap:2.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.04)}
.ug-sec22-top-image{width:auto;height:200px;border-radius:16px;overflow:hidden;background:#f8fafc;flex-shrink:0}
.ug-sec22-top-image img{width:100%;height:100%;object-fit:cover}
.ug-sec22-top-content{flex:1;display:flex;flex-direction:column;gap:.75rem}
.ug-sec22-top-content .ug-sec22-top-title{font-size:var(--font-xl);font-weight:600;color:#1e293b;margin-bottom:0}
.ug-sec22-top-content .ug-sec22-top-desc{font-size:var(--font-base);color:#64748b;line-height:1.6}
.ug-sec22-top-icons{display:flex;justify-content:flex-end}
.ug-sec22-icon-circle{position:relative;width:280px;height:280px}
.ug-sec22-icon-circle::before{content:'';position:absolute;top:50%;left:50%;width:180px;height:180px;border:2px solid #e2e8f0;border-radius:50%;transform:translate(-50%,-50%)}
.ug-sec22-icon-circle::after{content:'';position:absolute;top:50%;left:50%;width:220px;height:220px;border:1px solid #f1f5f9;border-radius:50%;transform:translate(-50%,-50%)}
.ug-sec22-icon-center{position:absolute;top:50%;left:50%;width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2}
.ug-sec22-icon-center img{width:50px;height:50px;object-fit:contain}
.ug-sec22-icon-item{position:absolute;width:48px;height:48px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:transform .2s ease;z-index:1}
.ug-sec22-icon-item:hover{transform:scale(1.1)}
.ug-sec22-icon-item img{width:26px;height:26px;object-fit:contain}
.ug-sec22-icon-item.icon-top{top:20px;left:50%;transform:translateX(-50%)}
.ug-sec22-icon-item.icon-top-right{top:50px;right:20px}
.ug-sec22-icon-item.icon-right{top:50%;right:12px;transform:translateY(-50%)}
.ug-sec22-icon-item.icon-bottom-right{bottom:50px;right:20px}
.ug-sec22-icon-item.icon-bottom{bottom:20px;left:50%;transform:translateX(-50%)}
.ug-sec22-icon-item.icon-bottom-left{bottom:50px;left:20px}
.ug-sec22-icon-item.icon-left{top:50%;left:12px;transform:translateY(-50%)}
.ug-sec22-icon-item.icon-top-left{top:50px;left:20px}
.ug-sec22-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ug-sec22-card{background:#fff;border-radius:20px;padding:0;box-shadow:0 4px 20px rgba(0,0,0,0.04);display:flex;flex-direction:column;overflow:hidden}
.ug-sec22-card-image{width:100%;height:100%;overflow:hidden;background:#f8fafc}
.ug-sec22-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.ug-sec22-card-content{padding:1.5rem}
.ug-sec22-card-title{font-size:var(--font-lg);font-weight:600;color:#1e293b;margin-bottom:.75rem}
.ug-sec22-card-desc{font-size:var(--font-base);color:#64748b;line-height:1.6}
@media screen and (max-width:1024px){.ug-sec22-top-card{flex-direction:column;text-align:center}
.ug-sec22-top-content{align-items:center}
.ug-sec22-top-icons{justify-content:center}
.ug-sec22-icon-circle{width:220px;height:220px}
.ug-sec22-icon-circle::before{width:140px;height:140px}
.ug-sec22-icon-circle::after{width:170px;height:170px}
.ug-sec22-icon-center{width:52px;height:52px}
.ug-sec22-icon-center img{width:28px;height:28px}
.ug-sec22-icon-item{width:42px;height:42px}
.ug-sec22-icon-item img{width:22px;height:22px}
.ug-sec22-icon-item.icon-top{top:15px}
.ug-sec22-icon-item.icon-top-right{top:40px;right:15px}
.ug-sec22-icon-item.icon-right{right:8px}
.ug-sec22-icon-item.icon-bottom-right{bottom:40px;right:15px}
.ug-sec22-icon-item.icon-bottom{bottom:15px}
.ug-sec22-icon-item.icon-bottom-left{bottom:40px;left:15px}
.ug-sec22-icon-item.icon-left{left:8px}
.ug-sec22-icon-item.icon-top-left{top:40px;left:15px}
}
@media screen and (max-width:768px){.container-sec.ug-sec22{padding:4rem var(--spacing-container,1.5rem)}
.ug-sec22-top-card{padding:2rem}
.ug-sec22-top-title{font-size:var(--font-xl)}
.ug-sec22-cards{grid-template-columns:1fr}
.ug-sec22-card{padding:1.5rem;gap:1.5rem}
.ug-sec22-card-title{font-size:var(--font-lg)}
.ug-sec22-title {
font-size: clamp(2.7rem, 3vw, 2.25rem);
}
.ug-sec22-icon-item img {
width: 50px;
height: 50px;}
.ug-sec22-icon-circle {
width: 350px;
height: 350px;}
.ug-sec22-icon-center img {
width: 58px;
height: 58px;
}
.ug-sec22-top-content .ug-sec22-top-desc{font-size:var(--font-lg);text-align: start;}
.ug-sec22-card-desc {
font-size: var(--font-lg);
}
}
@media screen and (max-width:480px){.container-sec.ug-sec22{padding:3rem var(--spacing-container,1rem)}
.ug-sec22-card{padding:1.25rem}
}
.container-sec.ug-sec24{position:relative;width:100%;min-height:100vh;background:#fff;padding:5rem var(--spacing-container,1.5rem);display:flex;align-items:flex-start;justify-content:center}
.ug-sec24-content{position:relative;z-index:2;max-width:1200px;width:100%;text-align:center}
.ug-sec24-title{font-size:var(--font-4xl);font-weight:700;color:#000;line-height:1.25;margin-bottom:1rem}
.ug-sec24-desc{font-size:var(--font-lg);color:#666;margin-bottom:3.5rem;letter-spacing:.02em}
.ug-sec24-map{width:100%;max-width:1100px;margin:0 auto 4rem}
.ug-sec24-map img{width:100%;height:auto;display:block}
.ug-sec24-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:900px;margin:0 auto 1rem;padding-bottom:1rem;border-bottom:1px solid #eee}
.node-item{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.node-item img{width:60px;height:60px;object-fit:contain}
.node-title{font-size:var(--font-lg);font-weight:600;color:#000;margin:0}
.node-desc{font-size:var(--font-sm);color:#999;margin:0;line-height:1.5}
.ug-sec24-tips{font-size:var(--font-base);color:#ccc;margin:0}
@media screen and (max-width:768px){.container-sec.ug-sec24{padding:4rem var(--spacing-container,1rem);min-height:auto}
.ug-sec24-title{font-size: clamp(1.5rem,6vw,2.5rem);}
.ug-sec24-desc{font-size:var(--font-xl);margin-bottom:2.5rem}
.ug-sec24-map{margin-bottom:3rem}
.ug-sec24-nodes{grid-template-columns:repeat(2,1fr);gap:2rem;max-width: 700px;padding-bottom:2rem}
.node-item img{width:50px;height:50px}
.node-title{font-size:var(--font-xl)}
.node-desc{font-size:var(--font-lg)}
}
@media screen and (max-width:480px){.container-sec.ug-sec24{padding:3rem var(--spacing-container,0.875rem)}
.ug-sec24-title{font-size:clamp(1.3rem,6vw,2rem)}
.ug-sec24-nodes{grid-template-columns:repeat(2,1fr);gap:1.5rem}
.node-item img{width:45px;height:45px}
.node-title{font-size:var(--font-sm)}
.node-desc{font-size:var(--font-xxs)}
.ug-sec24-tips{font-size:var(--font-xxs)}
}
.container-sec.ug-sec25{position:relative;width:100%;padding:5rem var(--spacing-container,1.5rem);background:#000;overflow:hidden}
.ug-sec25-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/bg-h5.webp') center/cover no-repeat;z-index:1;opacity:.6}
.ug-sec25-content{position:relative;z-index:10;max-width:1400px;margin:0 auto;text-align:center}
.ug-sec25-title{font-size:var(--font-4xl);font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.3}
.ug-sec25-desc{font-size:var(--font-lg);color:rgba(255,255,255,0.85);line-height:1.8;max-width:900px;margin:0 auto 2rem}
.ug-sec25-safe-icons{display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;margin-bottom:3rem}
.ug-sec25-security-subtitle{font-size:var(--font-3xl);color:#fff;text-align:center;margin-bottom:2.5rem;line-height:1.6;max-width:900px;margin-left:auto;margin-right:auto;font-weight:normal;font-weight:700}
.ug-sec25-security{margin-bottom:5rem}
.ug-sec25-security-all{background:rgba(249,250,251,1);border-radius:20px;padding:2.5rem;box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.ug-sec25-security-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem}
.ug-sec25-security-card{background:#fff;border-radius:16px;padding:1.5rem .75rem;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:transform .2s ease;display:flex;flex-direction:column;align-items:center;gap:.625rem}
.ug-sec25-security-card:hover{transform:translateY(-3px)}
.ug-sec25-security-card .security-icon{width:50px;height:50px;stroke:#c49a5a;stroke-width:2;fill:none}
.ug-sec25-security-card .security-title{font-size:var(--font-sm);font-weight:600;color:#1f2937;text-align:center}
.ug-sec25-security-card .security-desc{font-size:.8125rem;color:#6b7280;text-align:center;line-height:1.4}
@media(max-width:1024px){.ug-sec25-security-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){.ug-sec25-security-grid{grid-template-columns:repeat(2,1fr)}
.ug-sec25-security-all{padding:1.25rem}
}
.ug-sec25-safe-item{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ug-sec25-safe-item .safe-icon{width:200px;height:auto;object-fit:contain}
.ug-sec25-safe-item .safe-label{font-size:var(--font-sm);color:rgba(255,255,255,0.85);text-align:center;line-height:1.5}
.ug-sec25-os-wrap{position:relative;width:100%;max-width:1000px;margin:0 auto;margin-bottom:5rem}
.ug-sec25-os-img{width:100%;height:auto;display:block;object-fit:contain;border-radius:16px}
@media screen and (max-width:1024px){.ug-sec25-safe-icons{gap:3rem}
}
@media screen and (max-width:768px){.container-sec.ug-sec25{padding:4rem var(--spacing-container-mobile,1rem)}
.ug-sec25-title{font-size:var(--font-3xl);margin-bottom:1rem}
.ug-sec25-desc{font-size:var(--font-xl);margin-bottom:3rem}
.ug-sec25-safe-icons{gap:2rem;display:grid;grid-template-columns:repeat(2,1fr);max-width:320px;margin-left:auto;margin-right:auto}
.ug-sec25-safe-item{width:100%}
.ug-sec25-safe-item .safe-icon{width: 250px;}
.ug-sec25-safe-item .safe-label{font-size:var(--font-xs)}
.ug-sec25-security-subtitle{font-size:var(--font-2xl);margin-bottom:1.5rem;padding:0 1rem}
.ug-sec25-security{margin-bottom:4rem}
.ug-sec25-security-all{padding:1.75rem 1rem}
.ug-sec25-security-row{gap:1rem;margin-bottom:1.25rem}
.ug-sec25-security-card{flex:0 0 calc(20% - .8rem);min-width:100px;max-width:100%;gap:.625rem}
.ug-sec25-security-card .security-icon{width:48px;height:48px}
.ug-sec25-security-card .security-title{font-size:var(--font-lg);white-space:normal}
.ug-sec25-security-card .security-desc{font-size:var(--font-md)}
}
@media screen and (max-width:480px){.container-sec.ug-sec25{padding:3rem var(--spacing-container-mobile,0.875rem)}
.ug-sec25-title{font-size:var(--font-xl)}
.ug-sec25-safe-icons{gap:1.5rem}
.ug-sec25-safe-item .safe-icon{width:100%}
.ug-sec25-safe-item .safe-label{font-size:var(--font-xxs)}
.ug-sec25-security-subtitle{font-size:var(--font-xl);margin-bottom:1.25rem;padding:0 .75rem}
.ug-sec25-security-all{padding:1.25rem .5rem}
.ug-sec25-security-row{gap:.5rem;margin-bottom:1rem}
.ug-sec25-security-card{flex:0 0 calc(20% - .4rem);min-width:100px;max-width:100%;gap:.375rem}
.ug-sec25-security-card .security-icon{width:36px;height:36px}
.ug-sec25-security-card .security-title{font-size:var(--font-base);white-space:normal}
.ug-sec25-security-card .security-desc{font-size:15px}
}
.container-sec.ug-sec26{position:relative;width:100%;padding:4rem var(--spacing-container,1.5rem);background:#f8f9fa}
.ug-sec26-header{text-align:center;margin-bottom:3rem}
.ug-sec26-title{font-size:var(--font-4xl);font-weight:700;color:#333;margin:0}
.ug-sec26-slider{position:relative;max-width:1000px;margin:0 auto;overflow:hidden;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.ug-sec26-slides{position:relative;width:100%;height:600px}
.ug-sec26-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.ug-sec26-slide.active{opacity:1}
.ug-sec26-slide img{width:100%;height:100%;object-fit:cover}
.ug-sec26-slide-content{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 2rem;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);color:#fff}
.ug-sec26-slide-title{font-size:1.5rem;font-weight:600;margin:0 0 .5rem}
.ug-sec26-slide-desc{font-size:var(--font-sm);color:rgba(255,255,255,0.9);margin:0;line-height:1.5}
.ug-sec26-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.75rem;z-index:10}
.ug-sec26-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:background .3s ease}
.ug-sec26-dot.active{background:#fff}
@media screen and (max-width:768px){.container-sec.ug-sec26{padding:2.5rem var(--spacing-container-mobile,1rem)}
.ug-sec26-title{font-size: clamp(2rem,8vw,2.5rem);}
.ug-sec26-slides{height:500px}
.ug-sec26-slide-content{padding:1rem 1.5rem}
.ug-sec26-slide-title{font-size: 1.6rem;}
.ug-sec26-slide-desc{font-size:var(--font-md)}
}
@media screen and (max-width:480px){.ug-sec26-slides{height:220px}
.ug-sec26-title{font-size:clamp(1.3rem,5vw,1.6rem)}
.ug-sec26-dot{width:10px;height:10px}
}