.case-container.p1{background:url(/images/banner/bg-case.png) no-repeat center/cover;min-height:80vh;display:flex;justify-content:center;align-items:center;padding:40px 20px;margin:0;overflow:visible;position:relative;animation:gradientShift 15s ease infinite}
.case-container.relative{width:100%;max-width:1400px;position:relative}
.case-container .container{position:relative;overflow:visible;margin:0 auto;padding:0 60px;box-sizing:border-box;z-index:10;width:100%;padding-top:6%}
.case-container .carousel,.testimonials-carousel{position:relative;overflow:hidden}
.case-container .carousel{height:620px;width:100%}
.case-container .carousel .wrapper,.testimonials-wrapper{display:flex;transition:transform .5s ease}
.case-container .carousel .item{flex-shrink:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:60px;padding:40px 20px;box-sizing:border-box}
.text-section,.case-info,.advantage-content,.testimonial-card{padding:20px}
.text-section{flex:1;padding:0 20px;max-width:550px}
.case-container .title,.cases-title,.advantages-title,.testimonials-title,.section-title{font-weight:700;margin-bottom:16px}
.case-container .title{font-size:var(--font-3xl);color:var(--fontColor1);line-height:1.2;margin-bottom:28px;font-weight:800;text-shadow:0 3px 6px rgba(0,0,0,0.15);letter-spacing:-0.5px}
.case-container .subtitle,.cases-subtitle,.advantages-subtitle,.testimonials-subtitle,.section-description{line-height:1.6}
.case-container .subtitle{font-size:var(--font-md);color:var(--fontColor2);margin-bottom:36px;max-width:500px}
.case-container .author-section{display:flex;align-items:center;margin-bottom:36px;flex-wrap:wrap}
.case-container .avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:16px;border:2px solid rgba(255,255,255,0.9);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.case-container .author-info{display:flex;flex-direction:column;justify-content:center;margin-right:24px}
.case-container .author-name{font-size:var(--font-md);color:var(--fontColor1);font-weight:600}
.case-container .author-tag{font-size:var(--font-sm);color:var(--fontColor2);margin-top:4px}
.case-container .ug-btn,.more-btn,.subscribe-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 12px;border-radius:30px;font-size:var(--font-sm);font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;border:0}
.case-container .ug-btn{background:rgb(22 93 255 / .9);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.case-container .ug-btn:hover{background:#102a66;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.2)}
.case-container .ug-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.case-container .video-section{flex:1;position:relative;max-width:620px;display:flex;justify-content:center}
.case-container .video-cover{width:100%;height:450px;object-fit:cover;border-radius:16px;cursor:pointer;transition:all .4s ease;box-shadow:0 12px 30px rgba(0,0,0,0.2)}
.case-container .video-cover:hover{transform:scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,0.25)}
.case-container .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background:rgba(0,0,0,0.65);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:all .3s ease;border:2px solid rgba(255,255,255,0.3)}
.case-container .play-btn::after{content:'';border-style:solid;border-width:18px 0 18px 32px;border-color:transparent transparent transparent #fff;margin-left:6px}
.case-container .play-btn:hover{background:rgba(0,0,0,0.8);transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 30px rgba(255,255,255,0.5)}
.case-container .carousel-control,.case-container .close-btn,.testimonial-prev,.testimonial-next{display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all .3s ease}
.case-container .carousel-control,.testimonial-prev,.testimonial-next{position:absolute;width:50px;height:50px;background:rgb(0 0 0 / 14%);color:#fff;font-size:20px}
.case-container .carousel-control:hover,.testimonial-prev:hover,.testimonial-next:hover{background:var(--btnColor);transform:translateY(-50%) scale(1.15);box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.case-container .prev-btn{left:10px}
.case-container .next-btn{right:10px}
.indicator-bar,.testimonial-indicators{display:flex;gap:12px;justify-content:center}
.indicator-bar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:10}
.indicator{width:40px;height:7px;background:rgba(0,0,0,0.25);border-radius:4px;cursor:pointer;transition:all .3s ease}
.indicator.active{background:#165dff;width:65px}
.indicator:hover:not(.active){background:rgba(0,0,0,0.35);width:50px}
.ug-video-popup{background:rgba(0,0,0,0);overflow:auto;z-index:900;position:fixed;top:0;left:0;height:100%;width:100%;pointer-events:none;display:flex;align-items:center;justify-content:center}
.ug-video-popup.active{pointer-events:all;background:rgba(0,0,0,0.85)}
.ug-video-popup .video-popup{width:90%;max-width:1200px;position:relative;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .3s}
.ug-video-popup.active .video-popup{pointer-events:all;opacity:1;transform:translateY(0)}
.case-container .close-btn{position:absolute;top:-60px;right:0;color:#fff;font-size:var(--font-2xl);width:50px;height:50px}
.case-container .close-btn:hover{background:rgba(255,255,255,0.2);transform:rotate(90deg)}
.case-container #video-player{width:100%;height:650px;border-radius:12px}
.cases-showcase,.nas-advantages,.testimonials-section,.subscribe-contact-section{padding:80px 0}
.cases-showcase .container,.advantages-grid,.testimonials-carousel,.subscribe-contact-section .container{max-width:1400px;margin:0 auto}
.cases-header,.testimonials-header,.section-header{text-align:center;margin-bottom:50px}
.cases-title{font-size:var(--font-3xl);color:#2c3e50}
.cases-subtitle{font-size:var(--font-md);color:#7f8c8d;max-width:800px;margin:0 auto}
.cases-tabs{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap}
.cases-showcase .tab-btn{padding:12px 24px;background:#fff;border:1px solid #e0e0e0;border-radius:30px;cursor:pointer;transition:all .3s ease;font-size:var(--font-sm);color:#555}
.cases-showcase .tab-btn:hover{background:#e8eaf6;border-color:#3f51b5;color:#3f51b5}
.cases-showcase .tab-btn.active{background:#165dff;color:#fff;border-color:#165dff}
.cases-grid,.advantages-grid{display:grid;gap:30px;margin-bottom:40px}
.cases-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:10px}
.case-card,.advantage-card,.testimonial-card{border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.case-card{background:#fff;box-shadow:0 4px 15px rgba(0,0,0,0.1);cursor:pointer}
.case-card:hover{transform:translateY(-8px);box-shadow:0 12px 25px rgba(0,0,0,0.15)}
.case-img{height:200px;overflow:hidden;position:relative}
.case-tag{position:absolute;top:15px;left:15px;color:white;padding:6px 16px;border-radius:20px;font-size:var(--font-sm);font-weight:500;z-index:10}
.case-tag.educate{background:#5825c2}
.case-tag.photography{background:#4CAF50}
.case-tag.experience{background:#3f51b5}
.case-tag.video{background:#03A9F4}
.case-tag.company{background:#009688}
.case-tag.studio{background:#00BCD4}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case-card:hover .case-img img{transform:scale(1.08)}
.case-info h3{font-size:var(--font-sm);color:#2c3e50;margin-bottom:10px;font-weight:600; overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;}
.case-info p{font-size:var(--font-sm);color:#7f8c8d;line-height:1.5;margin-bottom:15px;flex-grow:1}
.view-details{display:inline-flex;align-items:center;gap:5px;color:#165dff;font-size:var(--font-sm);font-weight:500;text-decoration:none;transition:all .3s ease;margin-top:auto}
.view-details:hover{color:#303f9f;transform:translateX(5px)}
.view-details i{transition:transform .3s ease}
.view-details:hover i{transform:translateX(3px)}
.cases-more{text-align:center}
.more-btn{padding:15px 40px;background:#3f51b500;color:#165dff;border:1px solid #165dff;font-size:var(--font-md);gap:10px}
.more-btn:hover{background:#165dff;transform:translateY(-3px);color:#fff}
.advantages-title{font-size:var(--font-2xl);color:#333;text-align:center;margin-bottom:20px}
.advantages-subtitle{font-size:var(--font-md);color:#666;text-align:center;margin-bottom:60px;max-width:800px;margin-left:auto;margin-right:auto}
.advantages-grid{grid-template-columns:repeat(4,1fr)}
.advantage-card{padding:40px 10px;text-align:left;position:relative;overflow:visible;transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease}
.advantage-card:hover{transform:translateY(-10px)}
.advantage-card-1{background-color:rgb(239 246 255);color:#333}
.advantage-card-1:hover{background-color:rgb(219 234 254)}
.advantage-card-2{background-color:rgb(255 247 237);color:#333}
.advantage-card-2:hover{background-color:rgb(255 237 213)}
.advantage-card-3{background-color:rgb(240 253 244);color:#333}
.advantage-card-3:hover{background-color:rgb(220 252 231)}
.advantage-card-4{background-color:rgb(250 245 255);color:#333}
.advantage-card-4:hover{background-color:rgb(243 232 255)}
.advantage-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:10px;font-size:24px;margin:0 auto 20px auto}
.advantage-card-1 .advantage-icon{background-color:rgb(195 216 255);color:#2563eb}
.advantage-card-2 .advantage-icon{background-color:rgb(255 215 170);color:#ea580c}
.advantage-card-3 .advantage-icon{background-color:rgb(183 241 204);color:#16a34a}
.advantage-card-4 .advantage-icon{background-color:rgb(228 203 253);color:#7e22ce}
.advantage-content{text-align:center}
.advantage-title{font-size:var(--font-lg);font-weight:600;margin-bottom:15px;color:#333}
.advantage-text{font-size:var(--font-base);line-height:1.6;color:#666}
.testimonials-section{background-color:#f9fafb}
.testimonials-header{margin-bottom:60px}
.testimonials-title{font-size:var(--font-2xl);color:#2c3e50}
.testimonials-subtitle{font-size:var(--font-md);color:#7f8c8d;max-width:700px;margin:0 auto}
.testimonial-item{flex-shrink:0;padding:0 15px;width:33.333%;box-sizing:border-box}
.testimonial-card{background:#fff;padding:30px;box-shadow:0 4px 15px rgba(0,0,0,0.05);height:100%}
.testimonial-header{display:flex;align-items:center;margin-bottom:20px}
.testimonial-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-right:15px;border:3px solid #f1f5f9}
.testimonial-info{flex:1}
.testimonial-name{font-size:var(--font-md);font-weight:600;color:#2c3e50;margin-bottom:5px}
.testimonial-title{font-size:var(--font-sm);color:#7f8c8d}
.testimonial-rating{color:#ffc107;margin-bottom:15px;font-size:var(--font-sm)}
.testimonial-content{font-size:var(--font-sm);color:#555;line-height:1.8;font-style:italic}
.testimonial-controls{position:absolute;top:40%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.testimonial-prev,.testimonial-next{width:40px;height:40px;background:rgba(255,255,255,0.9);box-shadow:0 4px 12px rgba(0,0,0,0.1);color:#333;pointer-events:auto}
.testimonial-prev{left:3px}
.testimonial-next{right:3px}
.testimonial-prev:hover,.testimonial-next:hover{background:#165dff;color:white;transform:scale(1.1)}
.testimonial-indicators{margin-top:40px;gap:10px}
.subscribe-contact-section{background:linear-gradient(135deg,#165dff 0,#0040c9 100%);padding:80px 0;color:white}
.subscribe-contact-section .container{padding:0 20px}
.section-title{font-size:var(--font-2xl);color:white;margin-bottom:16px}
.section-description{font-size:var(--font-md);color:rgba(255,255,255,0.8);max-width:600px;margin:0 auto 50px}
.subscribe-contact-content{display:flex;gap:0;align-items:stretch;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.1);background:transparent;backdrop-filter:none;padding:0;border:0}
.subscribe-part{flex:1;display:flex;flex-direction:column;justify-content:center;background:white;padding:40px;border-radius:20px 0 0 20px}
.contact-part{flex:1;display:flex;flex-direction:column;justify-content:center;background:rgb(249 250 251);padding:40px;border-radius:0 20px 20px 0}
.subscribe-title,.contact-title{font-size:var(--font-xl);font-weight:600;margin-bottom:16px;color:rgb(56 56 56 / 90%)}
.subscribe-description{font-size:var(--font-sm);color:rgb(56 56 56 / 90%);margin-bottom:24px;line-height:1.6;max-width: 400px;}
.subscribe-form{width:100%}
.form-group{position:relative;display:flex;gap:12px}
.subscribe-form input{flex:1;padding:16px 20px;border:2px solid #e2e8f0;border-radius:50px;font-size:var(--font-sm);outline:0;transition:all .3s ease;background:white;color:#333}
.subscribe-form input:focus{box-shadow:0 0 0 3px rgba(22,93,255,0.1);border-color:#165dff;transform:translateY(-2px)}
.subscribe-btn{padding:16px 32px;background:#165dff;color:rgb(255 255 255 / 90%);border:2px solid white;border-radius:50px;font-weight:600;white-space:nowrap}
.subscribe-btn:hover{background:white;color:#165dff;transform:translateY(-2px);box-shadow:0 10px 20px rgba(22,93,255,0.3)}
.contact-title{margin-bottom:24px}
.contact-info{margin-bottom:32px}
.contact-item{display:flex;align-items:center;margin-bottom:16px;color:rgb(56 56 56 / 90%);font-size:var(--font-sm)}
.contact-item i{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:50%;margin-right:16px;font-size:var(--font-md);color:rgb(56 56 56 / 90%);transition:all .3s ease}
.contact-item:hover i{background:white;color:#165dff;transform:scale(1.1)}
.contact-item a{color:rgb(56 56 56 / 90%);text-decoration:none;transition:color .3s ease}
.contact-item a:hover{color:#165dff;text-decoration:none}
.social-links{display:flex;gap:16px}
.social-link{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:white;border-radius:50%;transition:all .3s ease;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden}
.social-link:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.social-icon{width:24px;height:24px;object-fit:contain;transition:all .3s ease}
.weixin-container{position:relative;display:inline-block;cursor:pointer}
.weixin-qrcode{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:10px;background-color:white;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000;text-align:center}
.weixin-container:hover .weixin-qrcode{opacity:1;visibility:visible;min-width: 100px;}
.qrcode-image{width:100px;height:100px;border:0;min-width: 100px;}
.qrcode-text{margin:8px 0 0;font-size:var(--font-sm);color:#333}
.weixin-qrcode::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:8px;border-style:solid;border-color:white transparent transparent transparent}
@keyframes gradientShift{0%{background-position:0 50%}
50%{background-position:100% 50%}
100%{background-position:0 50%}
}
@media(max-width:1200px){.case-container .carousel{height:570px}
.case-container .title{font-size:var(--font-3xl)}
.advantages-grid{grid-template-columns:repeat(2,1fr);gap:25px}
.testimonial-item{width:50%}
}
@media(max-width:992px){.case-container .carousel{height:100%}
.case-container .title{font-size:var(--font-2xl)}
.case-container .subtitle{font-size:var(--font-md)}
.case-container .prev-btn{left:5px}
.case-container .next-btn{right:5px}
.case-container #video-player{height:550px}
.subscribe-contact-content{flex-direction:column;gap:40px;padding:30px}
.section-title{font-size:var(--font-xl)}
.form-group{flex-direction:column}
.subscribe-btn{width:100%}
.case-container .carousel .item{display: grid;justify-items: center;}
}
@media(max-width:768px){.cases-showcase,.nas-advantages,.testimonials-section,.subscribe-contact-section{padding:50px 20px}
.cases-title,.advantages-title,.testimonials-title{font-size:var(--font-xl)}
.cases-subtitle,.advantages-subtitle,.testimonials-subtitle,.section-description{font-size:var(--font-lg);padding-left: 10px;padding-right: 10px;}
.cases-subtitle{margin-bottom:40px}
.cases-tabs{gap:15px}
.cases-showcase .tab-btn{padding:10px 20px;font-size:var(--font-xl)}
.cases-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px}
.more-btn{padding:12px 30px;font-size:var(--font-xl)}
.advantages-grid{grid-template-columns:1fr;gap:20px;padding:0 15px}
.advantage-card{padding:30px 20px}
.advantage-icon{width:80px;height:80px;font-size:var(--font-3xl)}
.advantage-title{font-size:var(--font-xl)}
.advantage-text{font-size:var(--font-lg)}
.testimonial-item{width:100%}
.subscribe-contact-section{padding:60px 0}
.section-header{margin-bottom:40px}
.subscribe-title,.contact-title{font-size:var(--font-lg)}
.case-container .avatar{width:80px;height:80px}
.case-container .author-name{font-size:var(--font-xl)}
.case-container .author-tag{font-size:var(--font-xl)}
.case-container .video-section{max-width:620px}
.case-info h3{font-size:var(--font-lg)}
.case-info p{font-size:var(--font-xl)}
.view-details{font-size:var(--font-lg)}
.testimonial-name{font-size:var(--font-lg)}
.testimonial-title{font-size:var(--font-md)}
.testimonial-rating{font-size:var(--font-md)}
.testimonial-content{font-size:var(--font-lg)}
.subscribe-description{font-size:var(--font-xl);max-width: 100%;}
.subscribe-form input{padding:20px 28px;font-size:var(--font-xl)}
.contact-item a{font-size:var(--font-xl)}
.contact-item span{font-size:var(--font-xl)}
.contact-item i{font-size:var(--font-xl)}
.social-link{font-size:var(--font-2xl);width:64px;height:64px}
.subscribe-form span{font-size:var(--font-xl);}
.social-icon {width: 50px;height: 50px;padding: 3px;}
}
@media(max-width:750px){.case-container .carousel{height:auto;min-height:650px;padding-bottom:60px}
.case-container .carousel .item{flex-direction:column;gap:30px;padding:30px 10px}
.case-container .title{font-size:var(--font-xl);text-align:center;margin:0 auto 28px}
.case-container .subtitle{font-size:var(--font-lg);text-align:center;margin:0 auto 36px}
.case-container .author-section{justify-content:center;flex-direction:column;text-align:center;gap:15px}
.case-container .ug-btn{margin:10px auto 0;width:55%;font-size:var(--font-xl)}
.case-container .p1{margin:0 -10px;width:calc(100%+20px)}
.case-container .container{padding:0 15px}
.case-container .carousel-control{width:45px;height:45px}
.case-container .indicator-bar{bottom:auto}
.case-container #video-player{height:350px}
}
@media(max-width:480px){.subscribe-contact-section{padding:40px 0}
.subscribe-contact-content{padding:20px;border-radius:15px}
.section-title{font-size:var(--font-lg)}
.contact-item{font-size:var(--font-sm)}
.social-links{justify-content:center}}