.next-how{--title-height: 0px;--step-current: 1;margin-inline:1rem;border-radius:2rem;background-color:var(--bg-light-grey);contain:paint;min-height:80vh;width:100%}@media (max-width: 1025px){.next-how{border-radius:1rem;min-height:0}}@media (max-width: 767px){.next-how{background-color:transparent}}.next-how-wrap{display:block;position:relative;display:flex}.next-how .container{height:100%}@media (max-width: 1025px){.next-how .container{grid-template-rows:auto 20rem auto auto auto;position:relative}}@media (max-width: 767px){.next-how .container{padding-inline:0;grid-template-rows:auto;grid-auto-rows:auto}}.next-how-title-wrap{grid-column:1/6;display:flex;flex-direction:column;justify-content:center;padding-top:9.6rem;padding-bottom:6rem;transition:all .8s ease;position:relative}@media (max-width: 1025px){.next-how-title-wrap{grid-column:1/-1;grid-row:1/2;padding-top:8rem;padding-bottom:9rem;text-align:center;align-items:center}}@media (max-width: 767px){.next-how-title-wrap{grid-row:2/5;background-color:var(--bg-light-grey);padding-bottom:3.2rem;padding-top:3.2rem;opacity:0;pointer-events:none;transition:opacity var(--t-md) ease;position:relative;z-index:2}.next-how-title-wrap.inactive{pointer-events:auto;opacity:1}}.next-how-label{margin-bottom:2rem;color:var(--cl-black-80)}@media (max-width: 767px){.next-how-label{margin-bottom:1.2rem}}.next-how-title{color:var(--cl-black)}@media (max-width: 1025px){.next-how-title{margin-bottom:4.8rem}}@media (max-width: 767px){.next-how-title{margin-bottom:2.4rem}}@media (max-width: 1025px){.next-how-title .txt-54{font-size:4.8rem}}@media (max-width: 767px){.next-how-title .txt-54{font-size:3.2rem}}.next-how-content{grid-column:1/5;grid-row:2/3;max-width:33.3rem;margin-bottom:8rem}@media (max-width: 1025px){.next-how-content{grid-column:3/-3;grid-row:3/4;max-width:50.8rem;margin-bottom:9rem;text-align:center;align-self:flex-end;transition:transform 1s ease}.next-how-content.laststep{transform:translateY(8rem)}}@media (max-width: 767px){.next-how-content{grid-column:1/-1;margin-block:2.4rem 2.4rem;transition:transform 1s ease,margin 1s ease;grid-row:2/3;margin-inline:2rem;max-height:100vw;transition:max-height var(--t) ease;position:relative;z-index:3}.next-how-content.laststep{transform:translateY(3.8rem)}}.next-how-content-inner{display:grid;grid-template-columns:1fr}.next-how-content-item{grid-column:1/-1;grid-row:1/2;display:flex;flex-direction:column;row-gap:1.2rem;transition:all 1.2s ease}@media (max-width: 1025px){.next-how-content-item{align-items:center;text-align:center}}.next-how-content-item.active{opacity:1}.next-how-content-item:not(:first-child){opacity:0;pointer-events:none}.next-how-content-item-title{color:var(--cl-black)}.next-how-content-item-title .word{color:#fff0;transition:all .4s ease-out;transition-delay:0s;transform:translateY(10%)}.next-how-content-item-decs{color:var(--cl-black-80)}@media (max-width: 767px){.next-how-content-item-decs .txt-16{font-size:1.4rem;line-height:1.2em}}.next-how-content-item-decs .word{color:#fff0;transition:all .3s ease-out;transition-delay:0s;transform:translateY(10%)}.next-how-content-item.active{opacity:1;pointer-events:auto}.next-how-content-item.active .next-how-content-item-title .word{color:var(--cl-black);transition-delay:var(--trans-delay);transform:translateY(0)}.next-how-content-item.active .next-how-content-item-decs .word{color:var(--cl-black-80);transition-delay:var(--trans-delay);transform:translateY(0)}.next-how-progress{position:relative;grid-column:1/5;margin-bottom:6rem;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t) ease}@media (max-width: 1025px){.next-how-progress{grid-column:2/-2;grid-row:5/6;margin-bottom:6.4rem}}@media (max-width: 767px){.next-how-progress{grid-column:1/-1;margin-bottom:2rem;grid-row:4/5;margin-inline:2rem;max-height:100vw;transition:max-height var(--t) ease;position:relative;z-index:3}}.next-how-progress.active{opacity:1;pointer-events:auto}.next-how-progress>.div-line{position:absolute;height:.2rem;top:0;left:0;background-color:var(--cl-black-10);border-radius:99rem}.next-how-progress>.div-line>.div-line-inner{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--cl-primary);transform-origin:left;transform:scaleX(var(--prog))}.next-how-progress-inner{padding-top:3.2rem;display:flex;flex-direction:row;width:100%;align-items:center;justify-content:space-between}@media (max-width: 767px){.next-how-progress-inner{padding-top:1.6rem}}.next-how-progress-count{color:var(--cl-black-30)}.next-how-progress-count-text{overflow:hidden;display:flex}.next-how-progress-count-text-list{color:var(--cl-black);position:relative;width:3.2rem;height:1em}.next-how-progress-count-text-list-inner{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;text-align:center}.next-how-progress-count-text-list-item{height:1em}@media (max-width: 1025px){.next-how-progress-count-text-list-item .txt-44{font-size:4.4rem}}.next-how-progress-count-text-div{margin-right:.15em}.next-how-progress-btn .btn.disable{background-color:#0000000d;color:var(--cl-black-30)}.next-how-interact{grid-column:6/-1;grid-row:1/5;margin-left:-3.2rem;margin-right:-10rem;position:relative}@media (max-width: 1025px){.next-how-interact{position:absolute;z-index:4;grid-column:2/-2;grid-row:2/6;margin-inline:auto;background-color:var(--cl-white);border-radius:1rem;width:100%;transition:all ease 1s;overflow:hidden;margin-top:0;margin-bottom:0;aspect-ratio:639/578}.next-how-interact.active{aspect-ratio:639/500;transform:translateY(calc(-1 * (var(--title-height)) + 7.8rem))}.next-how-interact.reset{background-color:transparent}.next-how-interact.laststep{aspect-ratio:639/580}}@media (max-width: 767px){.next-how-interact{grid-column:1/-1;position:relative;grid-row:1/2;background-color:transparent;aspect-ratio:1056/980}.next-how-interact.active{transform:none;aspect-ratio:1056/980}.next-how-interact.laststep{aspect-ratio:1056/1116}}.next-how-interact-inner{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .6s ease;opacity:1}.next-how-interact-inner.inactive{opacity:0}.next-how-interact-inner-video{-webkit-mask-image:linear-gradient(to left,#0000 1rem,#000 10rem calc(100% - 10rem),#0000 calc(100% - 1rem));mask-image:linear-gradient(to left,#0000 1rem,#000 10rem calc(100% - 10rem),#0000 calc(100% - 1rem));position:absolute;pointer-events:none;z-index:2;bottom:0;left:0;width:100%;height:100%;transform-origin:left bottom;transition:all .9s ease}@media (max-width: 1025px){.next-how-interact-inner-video{-webkit-mask-image:linear-gradient(to left,#0000 1rem,#000 2rem calc(100% - 2rem),#0000 calc(100% - 1rem));mask-image:linear-gradient(to left,#0000 1rem,#000 2rem calc(100% - 2rem),#0000 calc(100% - 1rem))}}.next-how-interact-inner-video>video{width:100%;height:100%;object-fit:contain}@media (max-width: 767px){.next-how-interact-inner-video>video{object-position:bottom}}.next-how-interact-inner-video.step-0,.next-how-interact-inner-video.step-1{left:0;width:100%;height:100%}.next-how-interact-inner-video.step-2{left:0%;width:100%;height:100%;bottom:-2.8571428571%}.next-how-interact-inner-video.step-3{left:0%;width:100%;height:100%;bottom:0}.next-how-interact-inner-video.step-4{left:1.1181332037%;bottom:-13.5714285714%;width:61.5894039735%;height:61.5306122449%;transition:all 1.2s ease}@media (max-width: 767px){.next-how-interact-inner-video.step-4{left:1.118133%;bottom:-9.571429%;width:59.589404%;height:59.589404%}}.next-how-interact-inner-person{pointer-events:none;position:absolute;z-index:1;top:0;right:0;height:100%;transform:translate(20%);opacity:0;transition:all 1.2s ease}@media (max-width: 767px){.next-how-interact-inner-person{top:auto;bottom:0;height:95%}}.next-how-interact-inner-person.active{opacity:1;transform:translate(0)}.next-how-btn-start{width:max-content;cursor:pointer;z-index:3;pointer-events:auto;opacity:1;transition:opacity var(--t) ease}@media (min-width: 1025px){.next-how-btn-start{position:absolute;top:100%}}@media (max-width: 1025px){.next-how-btn-start{grid-column:1/-1;margin-inline:auto}}.next-how-btn-start .btn{padding:2.5rem 3.2rem;gap:1rem}@media (max-width: 1025px){.next-how-btn-start .btn{padding:1.2rem 2.4rem}}@media (max-width: 767px){.next-how-btn-start .btn{padding:1.4rem 2.2rem}}.next-how-btn-start .btn.disabled{pointer-events:none;opacity:0}@media (max-width: 767px){.next-how-btn-start-icon .ic{--ic-size: 1.6rem !important}}@media (max-width: 767px){.next-how-btn-start-label .txt{font-size:1.6rem}}.next-how-guide{grid-column:1/4;min-width:17rem;width:max-content;display:grid;grid-template-columns:1fr;margin-bottom:4.8rem}@media (max-width: 1025px){.next-how-guide{grid-column:2/-2;grid-row:4/5;width:100%;margin-bottom:4rem}}@media (max-width: 767px){.next-how-guide{grid-column:1/-1;margin-bottom:2.4rem;margin-inline:0rem;padding-inline:2rem;width:auto;-webkit-mask-image:linear-gradient(to right,#0000 .5rem,#000 2rem calc(100% - 2rem),#0000 calc(100% - .5rem));mask-image:linear-gradient(to right,#0000 .5rem,#000 2rem calc(100% - 2rem),#0000 calc(100% - .5rem));grid-row:3/4;max-height:50vw;transition:max-height var(--t) ease;position:relative;z-index:3}}.next-how-guide-step{grid-column:1/1;grid-row:1/2;opacity:1;display:flex;flex-direction:column;row-gap:1.2rem;opacity:0;pointer-events:none;transition:all 1.2s ease}@media (max-width: 1025px){.next-how-guide-step{flex-direction:row;align-items:center;justify-content:flex-start}}.next-how-guide-step.active{opacity:1;pointer-events:auto}.next-how-guide-step.active.done{pointer-events:none}.next-how-guide-item{display:flex;align-items:center;column-gap:.8rem;padding:.7rem 2.3rem .7rem .7rem;border-radius:9.9rem;background-color:var(--cl-white);color:var(--cl-black-30);min-width:17rem;border:1px dashed var(--cl-black-20);transition:color var(--t)}@media (max-width: 1025px){.next-how-guide-item{margin-right:.8rem}}@media (min-width: 768px) and (max-width: 1025px){.next-how-guide-item{flex:1}}@media (max-width: 767px){.next-how-guide-item{padding:.4rem 1rem .4rem .4rem;border-radius:4rem;min-width:14rem}}.next-how-guide-item-head{width:3.6rem;height:3.6rem;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;background-color:var(--bg-light-grey);position:relative;transition:background-color var(--t)}@media (max-width: 767px){.next-how-guide-item-head{width:2.4rem;height:2.4rem}}.next-how-guide-item-head-txt{position:absolute;color:var(--cl-black-30);transition:color var(--t)}@media (max-width: 767px){.next-how-guide-item-head-txt .txt-16{font-size:1.4rem;line-height:1.2em}}.next-how-guide-item-head-ic{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0}@media (max-width: 767px){.next-how-guide-item-body .txt-16{font-size:1.4rem;line-height:1.2em}}.next-how-guide-item.active{color:var(--cl-black-80)}.next-how-guide-item.active .next-how-guide-item-head{background-color:var(--cl-primary)}.next-how-guide-item.active .next-how-guide-item-head-txt{color:var(--cl-white)}.next-how-guide-item.done{color:var(--cl-black-80)}.next-how-guide-item.done .next-how-guide-item-head{background-color:var(--bg-dark-gray)}.next-how-guide-item.done .next-how-guide-item-head-txt{opacity:0}.next-how-guide-item.done .next-how-guide-item-head-ic{opacity:1}.next-how-bg-mb{display:none}@media (max-width: 767px){.next-how-bg-mb{display:block;grid-column:1/-1;grid-row:2/5;background-color:var(--bg-light-grey);border-radius:1rem;transition:opacity var(--t) ease;pointer-events:none;position:relative;z-index:2}}@media (max-width: 767px){.next-how.inactive .next-how-content,.next-how.inactive .next-how-guide,.next-how.inactive .next-how-progress{pointer-events:none}.next-how.inactive .next-how-bg-mb{opacity:0}}
/*# sourceMappingURL=/cdn/shop/t/506/assets/sc-next-how.css.map */