.mockupSection-container{align-items:center;width:100%;min-height:100vh;padding:0 24px;display:flex}.mockupSection{background-image:url(/assets/images/mockup.png);background-position:50%;background-size:cover;border-radius:32px;flex-direction:column;width:100%;max-width:1449px;height:fit-content;min-height:866px;margin:0 auto;padding:8rem 4rem;display:flex;position:relative}.mockupSection .mockup-section-left,.mockupSection .mockup-section-right{flex:1}.mockupSection .mockup-section-right{justify-content:flex-end;display:flex}.mockup-desktop-container{height:var(--slider-height);position:relative}.mockupSection .mockupsectionContent{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:1312px;margin:0 auto;display:flex}.mockupSection .mockupSectionInner{justify-content:space-between;display:flex}.mockupSection .mockupSectionListInnerItem.hidden{visibility:hidden;border-top:0;height:0;padding:0}.mockupSection .mockupSectionListInnerItem.step-active .mockup-section-left{align-items:center}.mockupSection .mockup-section-left{justify-content:flex-start;display:flex}.mockupSection .mockup-section-left .main{color:#fff;flex-direction:column;row-gap:24px;width:340px;display:flex}.mockupSection .mockupSectionListInnerItem.step-active .mockup-section-left .main h1,.mockupSection .mockupSectionListInnerItem.step-active .mockup-section-left .main span.link{opacity:1!important}.mockupSection .mockup-section-left .main span:first-child{font-size:14px;font-weight:500;line-height:20px}.mockupSection .mockup-section-left .main h1{opacity:0;font-size:32px;font-weight:800;line-height:40px;font-family:var(--encode-sans);transition:opacity .5s linear}.mockupSection .mockup-section-left .main span.link{color:var(--chill-blue);opacity:0;align-items:center;column-gap:8px;font-size:16px;transition:opacity .5s linear;display:flex}.mockupSection .mockup-section-left .main span.link img{width:16px;height:16px}.mockupSection .mockUpSectionList{flex-direction:column;display:flex}.mockupSection .mockupSectionListInnerItem{border-top:1px solid;border-image-source:linear-gradient(109.12deg,#c0cffe29 .42%,#f3dff429 57.74%,#f9d8e529 98.62%);border-image-slice:1;justify-content:space-between;width:100%;height:85px;padding:32px 0;transition:height 1s cubic-bezier(.26,1,.48,1),opacity .5s linear,border-color .5s linear;display:flex;overflow:hidden}.mockupSection .mockupSectionListInnerItem.step-active{border-top:0;height:440px;animation:1s cubic-bezier(.26,1,.48,1) forwards slideUpFadeIn}.mockupSection .mockupSectionListInnerItem:last-of-type{border-bottom:1px solid}.mockupSection .mockupSectionListInnerItem span{color:#fff;font-size:14px;font-weight:500;line-height:20px}.mockupSection .mockupSectionListInnerItem.step-active .mockup-section-right .main{opacity:1!important}.mockupSection .mockup-section-right .main{color:#fff;opacity:0;flex-direction:column;row-gap:16px;width:340px;transition:opacity .5s linear;display:flex;align-self:center!important}.mockupSection .mockup-section-right .main span:first-child{font-size:20px;font-weight:500;line-height:32px}.mockupSection .mockup-section-right .main span:last-child{color:var(--graymode);font-size:16px;font-weight:400;line-height:24px}.mockupSection .center-phone{visibility:hidden;opacity:0;height:80.6rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mockupSection .center-phone.step-active{visibility:visible;opacity:1}@keyframes phoneSlideUpFadeIn{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes phoneSlideDownFadeOut{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-45%)}}.mockupSection .center-phone img{object-fit:cover;width:100%;height:100%}.mockup-section-mobile{background-image:url(/assets/images/mockup.png);background-position:50%;background-size:cover;flex-direction:column;padding-top:9.6rem;padding-bottom:4.8rem;display:flex;position:relative;overflow:hidden}.mockup-section-mobile .center-phone{visibility:hidden;opacity:0;width:32.8rem;height:66.8rem;margin:0 auto 0;animation:.5s ease-in-out forwards mobilePhoneSlideDownFadeOut;display:none}.mockup-section-mobile .center-phone.step-active{visibility:visible;opacity:1;animation:.5s ease-in-out forwards mobilePhoneSlideUpFadeIn;display:block}@keyframes mobilePhoneSlideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes mobilePhoneSlideDownFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.mockup-section-mobile .center-phone img{object-fit:cover;width:100%;height:100%}.mockup-section-mobile .mockup-section-mobile-inner{column-gap:5.6rem;padding-bottom:1rem;transition:transform .5s ease-in-out;display:flex}.mockup-section-mobile .mockup-section-mobile-inner .main{color:#fff;flex-direction:column;justify-content:flex-end;row-gap:2.4rem;min-width:25rem;max-width:25rem;display:flex}.mockup-section-mobile .mockup-section-mobile-inner .main:not(.current-step) h1,.mockup-section-mobile .mockup-section-mobile-inner .main:not(.current-step) span{opacity:.16}.mockup-section-mobile .mockup-section-mobile-inner .main:first-child{margin-left:2.4rem}.mockup-section-mobile .mockup-section-mobile-inner .main:last-child{margin-right:2.4rem}.mockup-section-mobile .mockup-section-mobile-inner .main span:first-child{text-transform:uppercase;font-size:14px;font-weight:500;line-height:20px;transition:opacity .5s ease-in-out}.mockup-section-mobile .mockup-section-mobile-inner .main h1{font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;line-height:clamp(3.2rem,4vw,4rem);transition:opacity .5s ease-in-out}.mockup-section-mobile .mockup-section-mobile-inner .main span.link{color:var(--chill-blue);align-items:center;column-gap:8px;font-size:16px;display:flex}.mockup-section-mobile .mockup-section-mobile-inner .main span.link img{width:16px;height:16px}.mockup-section-mobile .mockup-bottom-banner{background:linear-gradient(#4b4555 0%,#2c293a 100%);border-radius:2.4rem;flex-direction:column;row-gap:3.6rem;width:100%;max-width:34.2rem;padding:3.2rem 2.4rem;display:flex;position:absolute;bottom:3rem;left:50%;transform:translate(-50%)}.mockup-section-mobile .mockup-bottom-banner p{color:#fff;font-size:1.6rem;line-height:2.4rem}.mockup-section-mobile .mockup-bottom-banner .navigation{justify-content:space-between;align-items:center;display:flex}.mockup-section-mobile .mockup-bottom-banner .navigation ul{column-gap:1.2rem;padding:0;list-style:none;display:flex}.mockup-section-mobile .mockup-bottom-banner .navigation ul li{color:#fff;opacity:.3;font-size:1.6rem;transition:opacity .5s ease-in-out}.mockup-section-mobile .mockup-bottom-banner .navigation ul li.active{opacity:1}.mockup-section-mobile .mockup-bottom-banner .directional-arrows{align-items:center;column-gap:1.6rem;display:flex}.mockup-section-mobile .mockup-bottom-banner .directional-arrows img{transition:opacity .5s linear}.mockup-section-mobile .mockup-bottom-banner .directional-arrows img.disabled{opacity:.16}@keyframes slideUpFadeIn{0%{opacity:0;height:0;transform:translateY(20px)}to{opacity:1;height:440px;transform:translateY(0)}}@keyframes slideDownFadeOut{0%{opacity:1;height:440px;transform:translateY(0)}to{opacity:0;height:0;transform:translateY(20px)}}