body{font-family:Montserrat,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(hsla(0,0%,4%,.8),hsla(0,0%,4%,.8)),url(../assets/img/portfolio_bg.webp);background-attachment:fixed;background-position:50%;background-size:cover;color:#fff;line-height:1.6}
.container{margin:0 auto;max-width:1200px;padding:80px 20px}
.btn-action{align-items:center;border-radius:4px;cursor:pointer;display:inline-flex;font-size:12px;font-weight:800;justify-content:center;letter-spacing:2px;line-height:1;padding:18px 35px;text-decoration:none;transform:none;transition:all .3s ease}
.lang-zh .btn-action{font-size:16px;letter-spacing:2px}
.btn-action svg{flex-shrink:0;height:18px;margin-right:12px;transform:translateY(-2px);transition:transform .3s ease;width:18px}
.btn-solid{background:#111;border:2px solid #111;color:#fff}
.btn-solid:hover{background:#ff4d4d;border-color:#ff4d4d;transform:none}
.btn-solid:hover svg{transform:translateY(1px)}
.btn-outline{background:0 0;border:2px solid #111;color:#111}
.btn-outline:hover{background:0 0;border-color:#ff4d4d;color:#ff4d4d;transform:none}
#intro{align-items:center;display:flex;height:100vh;justify-content:center;min-height:600px;overflow:hidden;position:relative;width:100%}
.intro_bg{background-image:linear-gradient(180deg,rgba(28,36,49,.7) 20%,rgba(15,20,28,.4) 150%),url(../assets/img/intro_bg.webp);background-position:bottom;background-size:cover;filter:blur(.5px);height:110%;left:0;position:absolute;top:-10%;width:100%;will-change:transform;z-index:1}
.intro_content{display:flex;flex-direction:column;height:55%;justify-content:space-between;padding:0 20px;position:relative;text-align:center;width:100%;z-index:2}
.intro_text_wrapper{margin-bottom:auto;margin-top:auto;transform:translateY(-100px)}
.intro-hello{color:#ff4d4d;font-size:32px;font-weight:800;letter-spacing:4px;margin-bottom:15px;text-transform:uppercase}
.lang-zh .intro-hello{letter-spacing:8px}
.intro-name{color:#fff;font-size:80px;font-weight:800;letter-spacing:-2px;margin:0 0 25px}
.intro-desc{color:hsla(0,0%,100%,.75);font-size:22px;font-weight:400;line-height:1.8;margin:0 auto;max-width:680px}
.lang-zh .intro-desc{font-size:22px;letter-spacing:1.5px;line-height:2}
.intro-desc strong a{color:#fff;text-decoration:none;transition:color .3s ease}
.intro-desc strong a:hover{color:#ff4d4d}
.intro_scroll{bottom:40px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}
.intro_scroll-link{align-items:center;animation:bounceDown 2.5s infinite;color:#fff;display:flex;flex-direction:column;opacity:.7;text-decoration:none;transition:opacity .3s ease}
.intro_scroll-link:hover{opacity:1}
.scroll-arrow svg{margin-bottom:0;margin-top:10px}
.scroll-text{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
@keyframes bounceDown{0%,20%,50%,80%,to{transform:translateY(0)}
40%{transform:translateY(-12px)}
60%{transform:translateY(-6px)}
}
#about{background-color:#f5f5f5;color:#333;padding:60px 0 120px}
#about .container{display:block;margin:0 auto;max-width:1000px;padding:0 20px}
.about-header{margin-bottom:35px;margin-top:-40px;text-align:center}
.about-header .sub-title{color:#ff4d4d;font-size:32px;font-weight:800;letter-spacing:3px;line-height:1.2;margin:60px 0 15px;text-transform:uppercase}
.about-header .main-title{color:#111;font-size:38px;font-weight:800;line-height:1.2;margin:0 0 20px}
.about-intro{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:64px;width:100%}
.avatar-wrapper{animation:avatar-pulse 3s ease-in-out infinite;background-image:url(../assets/img/Avatar.gif);background-position:50%;background-size:cover;border:5px solid #fff;border-radius:50%;box-shadow:0 0 20px rgba(0,0,0,.1);flex-shrink:0;height:100px;width:100px}
.bio-text{color:#555;font-size:18px;line-height:1.8;margin:0;max-width:600px}
.lang-en .bio-text{max-width:720px}
.lang-en .intro-name{font-size:48px;letter-spacing:2px;margin-bottom:20px}
.about-details{display:grid;gap:80px;grid-template-columns:1fr 1fr;margin-bottom:70px;width:100%}
.details-column h3{color:#111;font-size:22px;font-weight:800;letter-spacing:1px;margin:0}
.detail-desc{color:#777;font-size:16px;line-height:1.6;margin:0 0 40px}
.info-list{list-style:none;padding:0}
.info-list li{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.info-list li strong{color:#111;font-size:16px;font-weight:800;text-transform:uppercase}
.info-list li span{color:#666;font-size:15px}
.skill-item{margin-bottom:25px}
.skill-info{color:#111;display:flex;font-size:16px;font-weight:800;justify-content:space-between;margin-bottom:15px}
.skill-bar{background:#e0e0e0;border-radius:10px;height:8px;width:100%}
.bar-fill{background:#222;border-radius:10px;height:100%;transition:width 1.5s cubic-bezier(.1,.5,.1,1);width:0}
.about-buttons{display:flex;gap:25px;justify-content:center;margin-top:50px;width:100%}
.animate-box{opacity:0;transform:translateY(40px);transition:all .7s ease-out}
.animate-box.appeared{opacity:1;transform:translateY(0)}
.about-header.appeared{transition-delay:0.1s}
.about-intro.appeared{transition-delay:0.2s}
.about-details .profile-col.appeared,.about-details .skills-col.appeared{transition-delay:0.4s}
.about-buttons.appeared{transition-delay:0.2s}
@keyframes avatar-pulse{0%,to{box-shadow:0 0 10px rgba(0,0,0,.1);transform:scale(1)}
50%{box-shadow:0 0 40px hsla(0,0%,39%,.7);transform:scale(1.02)}
}
#Services{background-color:#e0e0e0;color:#333;padding:120px 0}
#Services .container{display:block;margin:0 auto;max-width:1000px;padding:0 20px}
.services-header{margin:-40px 0 0 35px;text-align:center}
.services-header .sub-title{color:#ff4d4d;font-size:32px;font-weight:800;letter-spacing:3px;line-height:1.2;margin:0;text-transform:uppercase}
.services-header .main-title{color:#111;font-size:38px;font-weight:800;line-height:1.2;margin:15px 0 0}
.services-grid{display:grid;gap:40px;grid-template-columns:repeat(4,1fr)}
.service-item{background:0 0;padding:40px 10px;position:relative;text-align:center;transition:all .4s ease}
.service-icon{align-items:center;color:#ff4d4d;display:flex;font-size:42px;height:60px;justify-content:center;margin-bottom:25px}
.service-item h3{color:#111;font-size:20px;font-weight:800;margin-bottom:15px}
.service-item p{color:#666;font-size:15px;line-height:1.7;margin:0}
.service-item:after{background-color:#ff4d4d;bottom:0;content:"";height:2px;left:10%;position:absolute;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1);width:80%}
.service-item:hover:after{transform:scaleX(1)}
.services-grid .service-item:first-child{transition-delay:0.1s}
.services-grid .service-item:nth-child(2){transition-delay:0.3s}
.services-grid .service-item:nth-child(3){transition-delay:0.5s}
.services-grid .service-item:nth-child(4){transition-delay:0.7s}
.portfolio-header{margin-bottom:50px;text-align:center}
.section-title{font-size:36px;font-weight:800;letter-spacing:5px;margin:0;text-transform:uppercase}
.title-divider{align-items:center;display:flex;justify-content:center;margin-top:15px}
.title-divider .line{background-color:hsla(0,0%,100%,.3);height:1px;width:40px}
.title-divider .dot{background-color:#fff;border-radius:50%;height:6px;margin:0 12px;width:6px}
.lang-switch{position:fixed;right:30px;top:30px;z-index:1000}
.lang-switch button{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:#fff;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:1px;padding:8px 15px;transition:all .3s ease}
.lang-switch button:hover{background:#ff4d4d;border-color:#ff4d4d}
.filter-menu{display:flex;gap:55px;justify-content:center;margin-bottom:70px;text-align:center;transition:all .3s ease}
.lang-zh .filter-menu{gap:60px}
.filter-btn{background:0 0;border:none;color:#fff;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:1.5px;opacity:.5;padding:5px 0;text-transform:none;transition:all .3s ease}
.lang-zh .filter-btn{font-size:17px;letter-spacing:2.5px}
.filter-btn:hover{opacity:.9}
.filter-btn.active{color:#ff4d4d;opacity:1;transform:scale(1.05)}
#portfolio{height:auto;overflow:visible;padding-bottom:80px;position:relative}
.portfolio-grid{align-items:start;column-gap:45px;display:grid;grid-template-columns:repeat(3,1fr);row-gap:90px}
.portfolio-item{backdrop-filter:blur(10px);background:rgba(30,30,30,.4);border:1px solid hsla(0,0%,100%,.08);border-radius:4px;cursor:pointer;display:none;overflow:hidden;transition:background .4s ease,opacity .4s ease}
.portfolio-item:hover{background:rgba(40,40,40,.7)}
.item-cover{aspect-ratio:16/9;background:#000;display:block;overflow:hidden;position:relative;width:100%}
.cover-static,.cover-video{display:block;height:100%;object-fit:cover;object-position:center;transition:opacity .5s ease;width:100%}
.cover-static{opacity:1;position:relative;z-index:1}
.cover-video{left:0;opacity:0;position:absolute;top:0;z-index:2}
.portfolio-item.preview-active .cover-video,.portfolio-item:hover .cover-video{opacity:1}
.portfolio-item.preview-active .cover-static,.portfolio-item:hover .cover-static{opacity:0}
.item-info{background:hsla(0,0%,6%,.85);padding:16px 20px;text-align:center}
.item-info h3{color:#fff;font-size:13px;font-weight:500;letter-spacing:2px;margin:0;opacity:.9;text-transform:uppercase}
.lang-zh .item-info h3{font-size:15px;font-weight:400;letter-spacing:2px;text-transform:none}
.portfolio-item.fade-in{animation:itemZoomIn .5s forwards}
.portfolio-item.fade-out{animation:itemZoomOut .3s forwards}
@keyframes itemZoomIn{0%{opacity:0;transform:scale(.95)}
to{opacity:1;transform:scale(1)}
}
@keyframes itemZoomOut{0%{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(.95)}
}
#clients{background:#fff;border-top:1px solid #ccc;padding-bottom:40px}
#clients .section-title{color:#0a0a0a}
#clients .title-divider .line{background-color:hsla(0,0%,4%,.2)}
#clients .title-divider .dot{background-color:#0a0a0a}
.clients-list{align-items:center;column-gap:20px;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:40px auto 0;max-width:1100px;padding:0;row-gap:50px}
.clients-list li{background-position:50%;background-repeat:no-repeat;background-size:contain;height:80px;margin:0 auto;max-width:240px;width:100%}
.logo-01{background-image:url(../assets/img/client_logo/01.webp)}
.logo-02{background-image:url(../assets/img/client_logo/02.webp)}
.logo-03{background-image:url(../assets/img/client_logo/03.webp)}
.logo-04{background-image:url(../assets/img/client_logo/04.webp)}
.logo-05{background-image:url(../assets/img/client_logo/05.webp)}
.logo-06{background-image:url(../assets/img/client_logo/06.webp)}
.logo-07{background-image:url(../assets/img/client_logo/07.webp)}
.logo-08{background-image:url(../assets/img/client_logo/08.webp)}
.logo-09{background-image:url(../assets/img/client_logo/09.webp)}
.logo-10{background-image:url(../assets/img/client_logo/10.webp)}
.logo-11{background-image:url(../assets/img/client_logo/11.webp)}
.logo-12{background-image:url(../assets/img/client_logo/12.webp)}
.logo-13{background-image:url(../assets/img/client_logo/13.webp)}
.logo-14{background-image:url(../assets/img/client_logo/14.webp)}
.logo-15{background-image:url(../assets/img/client_logo/15.webp)}
.logo-16{background-image:url(../assets/img/client_logo/16.webp)}
#contact{background:#272727;border-top:1px solid hsla(0,0%,100%,.03)}
.contact-flex-container{align-items:flex-start;display:flex;justify-content:space-between}
.contact-left{flex:none;width:50%}
.contact-sub-title{color:#fff;display:inline-block;font-size:18px;letter-spacing:3px;margin:0 0 25px;position:relative;transition:font-size .3s ease}
.lang-zh .contact-sub-title{letter-spacing:4px}
.contact-sub-title:after{background-color:#ff4d4d;bottom:-10px;content:"";height:2px;left:0;position:absolute;width:100%}
.contact-main-text{color:#ebebeb;font-size:38px;font-weight:400;line-height:1.4;margin-top:40px}
.contact-right{display:flex;flex:none;flex-direction:column;gap:35px;padding-top:50px;width:30%}
.info-group label{color:#6d6d6d;display:block;font-size:16px;font-weight:600;margin-bottom:12px}
.info-link{color:#fff;font-size:24px;font-weight:300;text-decoration:none;transition:color .3s ease}
.info-link:hover{color:#ff4d4d}
.wechat-qr-code{background-color:#fff;background-image:url(../assets/img/wechat_qr.webp);background-position:50%;background-repeat:no-repeat;background-size:contain;border:5px solid #fff;border-radius:4px;box-shadow:0 5px 15px rgba(0,0,0,.2);height:140px;width:140px}
#contact .btn-action{align-self:flex-start;padding-left:32px!important;padding-right:32px!important;width:max-content}
.download-icon{fill:currentColor;flex-shrink:0;height:26px;margin-right:18px;transform:translateY(4px);transition:transform .4s ease;width:26px}
#footer-bar{background:#141414;border-top:1px solid hsla(0,0%,100%,.02);padding:40px 0}
#footer-bar .container{padding-bottom:0!important;padding-top:0!important}
.footer-content{align-items:center;display:flex;justify-content:space-between}
.copyright-text{color:#5c5c5c;font-size:12px;font-weight:500;letter-spacing:1px;line-height:1!important;margin:0!important}
.social-links{display:flex;gap:30px;line-height:1!important}
.social-links a{color:#5c5c5c;font-size:12px;font-weight:700;letter-spacing:2px;line-height:1!important;text-decoration:none;transition:color .3s ease}
.social-links a:hover{color:#fff}
.video-lightbox{align-items:center;display:none;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}
.lightbox-overlay{backdrop-filter:blur(10px);background:rgba(0,0,0,.6);height:100%;position:absolute;width:100%}
.lightbox-content{aspect-ratio:16/9;background:#000;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);max-width:1100px;overflow:hidden;position:relative;width:90%;z-index:10000}
#lightboxPlayer{height:100%;width:100%}
.close-btn{display:none!important}
.artplayer-container{border:none!important;margin:0!important;padding:0!important}
.artplayer-container .art-video-player{bottom:0!important}
.artplayer-container .art-controls{background-image:linear-gradient(transparent,rgba(0,0,0,.8))!important;border-radius:0!important;bottom:0!important;margin-bottom:0!important;padding-bottom:0!important}
.artplayer-container .art-settings{background-color:hsla(0,0%,8%,.9)!important;bottom:50px!important;z-index:500!important}
.back-to-top{align-items:center;background-color:#ff4d4d;border-radius:4px;bottom:30px;box-shadow:0 5px 15px rgba(255,77,77,.3);color:#fff;cursor:pointer;display:flex;height:45px;justify-content:center;opacity:0;position:fixed;right:30px;transform:translateY(20px);transition:all .4s cubic-bezier(.4,0,.2,1);visibility:hidden;width:45px;z-index:2000}
.back-to-top.show{opacity:1;transform:translateY(0);visibility:visible}
.back-to-top svg{height:24px;width:24px}
.back-to-top:hover{transform:translateY(-5px)}
@media (max-width:992px){.portfolio-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
.portfolio-grid{column-gap:30px;row-gap:60px}
.clients-list{grid-template-columns:repeat(3,1fr)}
.contact-main-text{font-size:28px}
.contact-left{width:60%}
.contact-right{width:35%}
}
@media (max-width:768px){.intro-name{font-size:50px;letter-spacing:-1px}
.intro-hello{font-size:24px}
.intro-desc{font-size:16px;line-height:1.7;padding:0 10px}
.intro_text_wrapper{transform:translateY(-50px)}
.lang-zh .intro-hello{letter-spacing:4px}
.about-intro{flex-direction:column;gap:25px;text-align:center}
.about-details{gap:40px;grid-template-columns:1fr}
.about-buttons{align-items:center;flex-direction:column}
.bio-text{max-width:100%}
.container{padding:40px 15px}
#portfolio{height:auto;min-height:800px}
.portfolio-grid{grid-template-columns:1fr;row-gap:40px}
.filter-menu{flex-wrap:wrap;gap:20px;margin-bottom:40px}
.lang-zh .filter-menu{gap:25px}
.section-title{font-size:26px}
.clients-list{gap:10px;grid-template-columns:repeat(2,1fr)}
.clients-list li{height:60px;max-width:180px}
#clients{padding-bottom:30px}
#contact{padding:80px 0}
.contact-flex-container{flex-direction:column;gap:40px;text-align:left}
.contact-left,.contact-right{flex:none;width:100%}
.contact-right{padding-top:0}
#footer-bar{padding:30px 0}
.footer-content{flex-direction:column;gap:20px;text-align:center}
.social-links{gap:15px}
.wechat-qr-code{height:120px;width:120px}
.back-to-top{bottom:20px;height:40px;right:20px;width:40px}
.services-grid{grid-template-columns:1fr}
.services-header .sub-title{font-size:24px}
.services-header .main-title{font-size:28px}
}