.section-1{position:relative;z-index:0;overflow:hidden;aspect-ratio:16/9}.section-1::before{content:'';position:absolute;inset:0;background:url(../../../../themes/moki/imgs/contact_s1_bg.webp) no-repeat center/cover;animation:bgZoomIn 1.4s ease-out forwards;will-change:transform;z-index:-1}.section-1 .moon{position:absolute;width:16%;top:17%;left:50%;transform:translateX(-50%);z-index:1}.section-1 .moon img{width:100%}.section-1 .moon-left{position:absolute;width:20%;top:20%;left:54%;transform:translate(-100%,-25%);z-index:2}.section-1 .moon-left img{width:100%}.section-1 .moon-right{position:absolute;width:20%;top:20%;right:48%;transform:translate(80%,-25%);z-index:2}.section-1 .moon-right img{width:100%}.section-1 .logo-bg{position:absolute;width:100%;bottom:0;left:0}.section-1 .logo-bg img{width:100%}.section-1 .hand{position:absolute;width:25%;bottom:0;left:35%;z-index:0}.section-1 .hand img{width:100%}.section-1 .content-txt{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%)}.section-1 .content-txt .title-en{margin:1rem 0 2rem 0}.section-1 .moon{animation:moonPopIn 1s cubic-bezier(.34,1.56,.64,1) 0.2s forwards,moonFloat 4.5s ease-in-out 1.5s infinite alternate;will-change:transform}.section-1 .moon img{animation:moonGlow 4s ease-in-out 1.5s infinite alternate}.section-1 .moon-left{animation:slideInLeft 0.9s ease-out 0.35s forwards,swayLeft 5s ease-in-out 1.55s infinite alternate;will-change:transform}.section-1 .moon-right{animation:slideInRight 0.9s ease-out 0.35s forwards,swayRight 5s ease-in-out 1.55s infinite alternate;will-change:transform}.section-1 .logo-bg{animation:logoRise 1s ease-out 0.5s forwards}.section-1 .hand{animation:handRise 1.1s cubic-bezier(.22,1,.36,1) 0.65s forwards,handFloat 3.5s ease-in-out 1.85s infinite alternate;will-change:transform}.section-1 .content-txt .title-bg{display:inline-block;animation:titleReveal 0.8s ease-out 0.9s forwards}.section-1 .content-txt .title-en{animation:fadeUp 0.7s ease-out 1.05s forwards}@keyframes bgZoomIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes moonPopIn{from{opacity:0;transform:translateX(-50%) scale(.7)}to{opacity:1;transform:translateX(-50%) scale(1)}}@keyframes moonFloat{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-10px)}}@keyframes moonGlow{from{filter:drop-shadow(0 0 12px rgb(255 255 255 / .3))}to{filter:drop-shadow(0 0 28px rgb(255 255 255 / .7))}}@keyframes slideInLeft{from{opacity:0;transform:translate(-100%,-25%) translateX(-80px)}to{opacity:1;transform:translate(-100%,-25%) translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translate(80%,-25%) translateX(80px)}to{opacity:1;transform:translate(80%,-25%) translateX(0)}}@keyframes swayLeft{from{transform:translate(-100%,-25%) rotate(-2deg)}to{transform:translate(-100%,-25%) rotate(2deg)}}@keyframes swayRight{from{transform:translate(80%,-25%) rotate(2deg)}to{transform:translate(80%,-25%) rotate(-2deg)}}@keyframes logoRise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}@keyframes handRise{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes handFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}}@keyframes titleReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.section-1,.section-1::before,.section-1 .moon,.section-1 .moon img,.section-1 .moon-left,.section-1 .moon-right,.section-1 .logo-bg,.section-1 .hand,.section-1 .content-txt .title-bg,.section-1 .content-txt .title-en{animation:none}}.section-2{padding:5rem 0;overflow:hidden}.section-2 .container .content-txt .title-en{margin:1rem 2rem}.section-2 .container .content-base .title-box{display:flex;justify-content:center;margin-top:3rem;margin-bottom:3rem}.section-2 .container .content-base .title-box .title-nav{border-radius:2rem;border:1px solid #ccc;padding:4px 0}.section-2 .container .content-base .title-box .title-nav .title{padding:8px 15px;color:#ccc;font-size:.95rem;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:all 0.3s ease;position:relative}.section-2 .container .content-base .title-box .title-nav .title::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--moki-blue);transition:all 0.3s ease;transform:translateX(-50%)}.section-2 .container .content-base .title-box .title-nav .title:hover::after{width:80%}.section-2 .container .content-base .title-box .title-nav .title.active{background-color:var(--moki-blue);color:#fff;border-radius:2rem}.section-2 .container .content-base .title-box .title-nav .title.active::after{display:none}.section-2 .container .content-base .base-card .card .card-img{position:relative;border-radius:1rem;overflow:hidden}.section-2 .container .content-base .base-card .card .card-img img{transition:transform 0.6s ease}.section-2 .container .content-base .base-card .card:hover .card-img img{transform:scale(1.05)}.section-2 .container .content-base .base-card .card .card-img .info{position:absolute;background-color:rgb(22 82 82 / .4);color:#eee;line-height:1.5;border-radius:1rem;padding:1rem;left:1rem;bottom:1rem;opacity:1;z-index:2;transition:all 0.4s ease}.section-2 .container .content-base .base-card .card:hover .card-img .info{transform:translateY(0);opacity:1}.section-2 .container .content-base .base-card .card .card-img .info .title{display:inline-block;padding:1px 8px;background-color:var(--moki-blue);border-radius:1rem;color:#222;font-weight:500}.section-2 .container .content-base .base-card .card .card-img .info hr{margin:10px 0;border:none;border-top:1px solid #eee;opacity:.3}.section-2 .container .content-base .base-card .card .card-img .info ul li .iconfont{margin-right:10px}.section-2 .container .content-base .base-card .card .card-img .base-pic{display:block;width:100%;transition:transform 0.6s ease}.section-2 .container .content-base .base-card .card:hover .card-img .base-pic{transform:scale(1.05)}.section-2 .container .content-base .base-card .card .highlight{margin-top:3rem;text-align:center;color:#eee;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease 0.2s,transform 0.6s ease 0.2s}.section-2 .container .content-base .base-card .card:hover .highlight{opacity:1;transform:translateY(0)}.section-3{padding:0 0 5rem 0;overflow:hidden}.section-3 .section-title{margin-bottom:3rem;color:#eee;text-align:center;letter-spacing:.02em}.section-3 .contact-form{width:100%;max-width:1000px;margin:0 auto;padding:0 1rem}.section-3 .contact-form form{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}.section-3 .contact-form form .form-group label{color:var(--moki-blue);font-size:1rem;font-weight:500;margin-bottom:10px;display:block;transition:transform 0.3s ease,color 0.3s ease}.section-3 .contact-form form .form-group input{background:linear-gradient(90deg,rgb(50 60 80 / .5),rgb(40 60 70 / .5),rgb(50 60 80 / .5));padding:10px 20px;border-radius:10px;border:none;color:#fff;font-size:1rem;font-weight:500;width:100%;transition:box-shadow 0.3s ease,background 0.3s ease}.section-3 .contact-form form .form-group input::placeholder{text-align:center;font-size:.9rem;transition:transform 0.3s ease,opacity 0.3s ease}.section-3 .contact-form form .form-group input:focus{outline:none;box-shadow:0 0 0 2px rgb(123 187 189 / .5),0 0 20px rgb(123 187 189 / .2);background:linear-gradient(90deg,rgb(60 70 90 / .6),rgb(50 70 80 / .6),rgb(60 70 90 / .6))}.section-3 .contact-form form .form-group input:focus::placeholder{transform:translateX(5px);opacity:.5}.section-3 .contact-form form .form-group:nth-child(-n+3){flex:0 1 calc(33.3% - 4rem)}.section-3 .contact-form form .form-group:nth-child(4){flex:0 1 100%}.section-3 .contact-form form .form-group textarea{width:100%;height:6rem;background:linear-gradient(90deg,rgb(50 60 80 / .5),rgb(40 60 70 / .5),rgb(50 60 80 / .5));padding:10px 20px;border-radius:10px;border:none;color:#fff;font-size:1rem;font-weight:500;transition:box-shadow 0.3s ease,background 0.3s ease;resize:vertical}.section-3 .contact-form form .form-group textarea::placeholder{text-align:center;font-size:.9rem;transition:transform 0.3s ease,opacity 0.3s ease}.section-3 .contact-form form .form-group textarea:focus{outline:none;box-shadow:0 0 0 2px rgb(123 187 189 / .5),0 0 20px rgb(123 187 189 / .2);background:linear-gradient(90deg,rgb(60 70 90 / .6),rgb(50 70 80 / .6),rgb(60 70 90 / .6))}.section-3 .contact-form form .form-group textarea:focus::placeholder{transform:translateX(5px);opacity:.5}.section-3 .contact-form form button{flex:0 1 100%;max-width:100px;background-color:var(--moki-blue);margin:0 auto;padding:5px 18px;border-radius:10px;border:none;color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease}.section-3 .contact-form form button:hover{background-color:#8fd0d2;box-shadow:0 4px 15px rgb(123 187 189 / .4);transform:translateY(-2px)}.section-3 .contact-form form button:active{transform:translateY(0) scale(.95)}@media screen and (max-width:1200px){.section-1{aspect-ratio:auto;min-height:50vw}}@media screen and (max-width:1024px){.section-1 .moon{width:18%;top:15%}.section-1 .moon-left{width:22%;left:52%}.section-1 .moon-right{width:22%;right:46%}.section-1 .hand{width:28%;left:33%}.section-2{padding:3rem 0}.section-2 .container .content-base .title-box{margin-top:3rem;margin-bottom:3rem}.section-3{padding:3rem 0}}@media screen and (max-width:768px){.section-1{min-height:60vw}.section-1 .moon{width:22%;top:12%}.section-1 .moon-left{width:26%;left:52%;top:14%}.section-1 .moon-right{width:26%;right:46%;top:17%}.section-1 .hand{width:32%;left:30%}.section-1 .content-txt{bottom:1.5rem}.section-2{padding:2.5rem 0}.section-2 .container .content-base .title-box{margin-top:2rem;margin-bottom:2rem}.section-2 .container .content-base .base-card .card .card-img .info{bottom:0}.section-3{padding:2.5rem 0}.section-3 .contact-form form .form-group:nth-child(-n+3){flex:0 1 calc(50% - 2rem)}.section-3 .contact-form form{gap:1.5rem}}@media screen and (max-width:640px){.section-1{min-height:70vw}.section-1 .moon{width:26%;top:8%}.section-1 .moon-left{width:30%;left:46%;top:24%;transform:translate(-100%,-25%) scale(.8)}.section-1 .moon-right{width:30%;right:38%;top:24%;transform:translate(80%,-25%) scale(.8)}.section-1 .hand{width:38%;left:26%}.section-1 .moon-left{animation:slideInLeftSmall 0.9s ease-out 0.35s forwards,swayLeftSmall 5s ease-in-out 1.55s infinite alternate}.section-1 .moon-right{animation:slideInRightSmall 0.9s ease-out 0.35s forwards,swayRightSmall 5s ease-in-out 1.55s infinite alternate}.section-2{padding:2rem 0}.section-2 .container .content-base .title-box{margin-top:1.5rem;margin-bottom:1.5rem}.section-3{padding:2rem 0}.section-3 .contact-form form .form-group:nth-child(-n+3){flex:0 1 100%}.section-3 .contact-form form{gap:1rem}}@media screen and (max-width:440px){.section-1{min-height:80vw}.section-1 .moon{width:32%;top:5%}.section-1 .moon-left{width:35%;left:52%;top:7%}.section-1 .moon-right{width:35%;right:44%;top:9%}.section-1 .hand{width:44%;left:24%}}@keyframes slideInLeftSmall{from{opacity:0;transform:translate(-100%,-25%) scale(.8) translateX(-60px)}to{opacity:1;transform:translate(-100%,-25%) scale(.8) translateX(0)}}@keyframes slideInRightSmall{from{opacity:0;transform:translate(80%,-25%) scale(.8) translateX(60px)}to{opacity:1;transform:translate(80%,-25%) scale(.8) translateX(0)}}@keyframes swayLeftSmall{from{transform:translate(-100%,-25%) scale(.8) rotate(-2deg)}to{transform:translate(-100%,-25%) scale(.8) rotate(2deg)}}@keyframes swayRightSmall{from{transform:translate(80%,-25%) scale(.8) rotate(2deg)}to{transform:translate(80%,-25%) scale(.8) rotate(-2deg)}}