bnon-process{display:block}.bnon-process{overflow:hidden;padding-block:86px 90px;background:var(--bnon-color-black);color:var(--bnon-color-white)}.bnon-process__container{display:grid}.bnon-process__intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px}.bnon-process__heading,.bnon-process__description,.bnon-process__step-title,.bnon-process__step-description,.bnon-process__feature,.bnon-process__confirm-text,.bnon-process__confirms p{margin:0}.bnon-process__heading{grid-column:1 / -1;font-family:var(--bnon-font-latin);font-size:60px;font-weight:var(--bnon-weight-extrabold);line-height:1.1;letter-spacing:-.04em;color:#fff}.bnon-process__description{font-family:var(--bnon-font-korean);font-size:20px;font-weight:var(--bnon-weight-medium);line-height:1.2;letter-spacing:-.04em}.bnon-process__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,652px);gap:64px;align-items:start;margin-top:50px}.bnon-process__content{position:relative;min-height:300px}.bnon-process__panel{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;align-content:start;gap:29px;opacity:0;transition:opacity var(--bnon-motion-slow, .6s) ease}.bnon-process__panel.is-active{opacity:1}.bnon-process__panel.is-leaving{opacity:0}.bnon-process__step-title{display:inline-flex;justify-self:start;align-items:baseline;gap:8px;padding:10px 24px;border:0;border-radius:10px;background:var(--bnon-color-blue);font-family:var(--bnon-font-korean);font-size:24px;font-weight:var(--bnon-weight-medium);line-height:1.2;letter-spacing:-.04em}.bnon-process__step-title span,.bnon-process__step-title .bnon-process__step-title-text{font-size:24px}.bnon-process__step-description,.bnon-process__feature{max-width:470px;font-family:var(--bnon-font-korean);font-size:20px;font-weight:var(--bnon-weight-medium);line-height:1.5;letter-spacing:-.04em}.bnon-process__mobile-break{display:none}.bnon-process__feature{margin-top:-19px;color:#fff}.bnon-process__confirm-text{font-family:var(--bnon-font-korean);font-size:20px;font-weight:var(--bnon-weight-semibold);line-height:1.2;letter-spacing:-.04em;color:#fff}.bnon-process__media{position:relative;aspect-ratio:652 / 435;overflow:hidden;border-radius:20px;background:#1a1a1a}.bnon-process__image{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transform:scale(1.015);transition:opacity var(--bnon-motion-slow, .6s) ease,transform var(--bnon-motion-slow, .6s) ease}.bnon-process__image.is-active{opacity:1;transform:scale(1)}.bnon-process__image.is-leaving{opacity:0;transform:scale(1)}.bnon-process__image img,.bnon-process__image-placeholder{display:block;width:100%;height:100%;object-fit:cover}.bnon-process__image-placeholder{background:#252525}.bnon-process__navigation{margin-top:100px}.bnon-process__arrows{align-self:end;justify-self:end}.bnon-process__progress{position:relative;height:3px;background:#ffffff52}.bnon-process__progress span{--bnon-process-progress: .2;position:absolute;inset:0 auto 0 0;width:calc(var(--bnon-process-progress) * 100%);background:#28dbc4;transform-origin:left center;transition:width var(--bnon-motion-slow, .6s) cubic-bezier(.22,1,.36,1)}.bnon-process__progress span:after{position:absolute;top:50%;right:-8px;width:16px;height:16px;border-radius:50%;background:#28dbc4;transform:translateY(-50%);content:""}.bnon-process__mobile-bottom-progress{display:none}.bnon-process__progress.is-resetting span,.bnon-process__progress.is-resetting .bnon-process__mobile-bottom-progress:before,.bnon-process__progress.is-resetting .bnon-process__mobile-bottom-dot{transition:none}.bnon-process__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}.bnon-process__step-anchor{position:relative;grid-column:auto;grid-row:1;justify-self:center;width:max-content;transform:none}.bnon-process__step-button{display:grid;gap:6px;padding:18px 0 0;border:0;background:transparent;color:var(--bnon-color-white);font-family:var(--bnon-font-korean);font-size:20px;font-weight:var(--bnon-weight-semibold);line-height:1.2;letter-spacing:-.04em;text-align:left;cursor:pointer}.bnon-process__step-button>span:first-child{display:none}.bnon-process__step-button:focus-visible{outline:2px solid var(--bnon-color-mint);outline-offset:4px}.bnon-process__confirm{position:absolute;bottom:calc(100% + 50px);margin:0;color:var(--bnon-color-white);font-family:var(--bnon-font-korean);font-size:20px;font-weight:var(--bnon-weight-semibold);line-height:1.2;letter-spacing:-.04em;white-space:nowrap}.bnon-process__confirm--step-3{left:50%;transform:translate(-50%)}.bnon-process__confirm--step-4{right:auto;left:0}@media screen and (max-width:1023px){.bnon-process{padding-block:72px}.bnon-process__stage{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;margin-top:40px}.bnon-process__heading{font-size:52px}.bnon-process__content{min-height:260px}.bnon-process__step-title{font-size:20px}.bnon-process__step-title .bnon-process__step-title-text{font-size:24px}.bnon-process__step-description,.bnon-process__feature,.bnon-process__confirm-text{font-size:18px}.bnon-process__step-button,.bnon-process__confirm{font-size:16px}}@media screen and (max-width:767px){.bnon-process{padding-block:52px 64px}.bnon-process__intro{gap:18px}.bnon-process__heading{font-size:clamp(42px,12vw,56px)}.bnon-process__description{font-size:18px}.bnon-process__stage{grid-template-columns:1fr;gap:32px;margin-top:32px}.bnon-process__content{min-height:220px;order:2}.bnon-process__panel{gap:20px}.bnon-process__step-title{font-size:20px}.bnon-process__step-title span{font-size:24px}.bnon-process__step-description,.bnon-process__feature,.bnon-process__confirm-text{font-size:17px}.bnon-process__media{order:1;border-radius:14px}.bnon-process__navigation{margin-top:48px;overflow-x:auto;padding-bottom:8px}.bnon-process__steps{grid-template-columns:repeat(5,minmax(116px,1fr));min-width:580px}.bnon-process__step-button{font-size:15px;white-space:normal}.bnon-process__confirm{bottom:calc(100% + 42px);font-size:14px}}@media(prefers-reduced-motion:reduce){.bnon-process__panel,.bnon-process__image,.bnon-process__progress span,.bnon-process__step-button>span:first-child{transition-duration:.01ms}}@media screen and (min-width:768px)and (max-width:1023px){.bnon-process__confirm{font-size:14px}}@media screen and (max-width:480px){.bnon-process{padding-block:48px 60px}.bnon-process__heading{font-size:42px}.bnon-process__description{font-size:16px;line-height:1.45}.bnon-process__stage{gap:26px;margin-top:28px}.bnon-process__media{width:100%;aspect-ratio:3 / 2}.bnon-process__content{min-height:240px}.bnon-process__step-title{max-width:100%;font-size:17px}.bnon-process__step-title span,.bnon-process__step-title .bnon-process__step-title-text{font-size:16px}.bnon-process__step-description,.bnon-process__feature,.bnon-process__confirm-text{font-size:16px;line-height:1.45}.bnon-process__mobile-break{display:block}.bnon-process__step-description+.bnon-process__feature{margin-top:-10px}.bnon-process__navigation{position:relative;width:100vw;height:92px;margin-top:22px;margin-left:calc(-1 * var(--bnon-gutter));transform:translateY(-32px);overflow:visible;padding-bottom:0}.bnon-process__progress{position:absolute;top:0;left:0;width:70.9333vw;height:2px}.bnon-process__progress .bnon-process__mobile-bottom-progress{position:absolute;top:68px;right:auto;bottom:auto;left:calc(40vw + 17px);width:calc(60vw - 17px);height:2px;background:#ffffff52}.bnon-process__progress .bnon-process__mobile-bottom-progress:before{position:absolute;inset:0 auto 0 0;width:var(--bnon-process-mobile-bottom-progress, 0%);background:#28dbc4;content:"";transition:width var(--bnon-motion-slow, .6s) cubic-bezier(.22,1,.36,1)}.bnon-process__progress .bnon-process__mobile-bottom-progress:after{position:absolute;top:50%;right:auto;left:var(--bnon-process-mobile-bottom-progress, 0%);width:10px;height:10px;border-radius:50%;background:#28dbc4;content:"";opacity:0;transform:translate(-50%,-50%);transition:left var(--bnon-motion-slow, .6s) cubic-bezier(.22,1,.36,1),opacity .01ms linear}.bnon-process__progress .bnon-process__mobile-bottom-progress[data-active-track]:after{opacity:1}.bnon-process__progress .bnon-process__mobile-bottom-progress[data-complete]:after{visibility:hidden!important;opacity:0!important}.bnon-process__progress .bnon-process__mobile-bottom-progress:not([data-active-track]):before{width:0}.bnon-process__progress .bnon-process__mobile-bottom-progress{display:block}.bnon-process__progress>span[data-bnon-process-progress]{display:block}.bnon-process__progress[data-mobile-top-complete]>span[data-bnon-process-progress]:after{visibility:hidden!important;opacity:0!important}.bnon-process__progress span{width:calc(var(--bnon-process-mobile-top-progress, .1875) * 100%)}.bnon-process__progress span:after{right:-5px;width:10px;height:10px}.bnon-process__progress[data-step="3"]>span[data-bnon-process-progress]:after,.bnon-process__progress[data-step="4"]>span[data-bnon-process-progress]:after,.bnon-process__progress[data-step="5"]>span[data-bnon-process-progress]:after,.bnon-process__progress[data-step="5"] .bnon-process__mobile-bottom-progress:after{display:none!important;content:none!important}.bnon-process__progress[data-step="4"]>span[data-bnon-process-progress]:after,.bnon-process__progress[data-step="5"]>span[data-bnon-process-progress]:after{width:0!important;height:0!important;background:transparent!important}.bnon-process__progress>span[data-bnon-process-progress]:after{display:none!important}.bnon-process__progress>span[data-bnon-process-progress]:before{position:absolute;top:50%;right:-5px;display:none;width:10px;height:10px;border-radius:50%;background:#28dbc4;content:"";transform:translateY(-50%)}.bnon-process__progress.has-mobile-top-dot>span[data-bnon-process-progress]:before{display:block}bnon-process:has(.bnon-process__step-anchor--1 .bnon-process__step-button.is-active) .bnon-process__progress>span[data-bnon-process-progress]:before,bnon-process:has(.bnon-process__step-anchor--2 .bnon-process__step-button.is-active) .bnon-process__progress>span[data-bnon-process-progress]:before{display:block!important}.bnon-process__progress[data-step="5"] .bnon-process__mobile-bottom-progress:after{display:block!important;visibility:visible!important;opacity:1!important;content:""!important}.bnon-process__progress .bnon-process__mobile-bottom-progress:after{display:none!important}.bnon-process__mobile-bottom-dot{position:absolute;top:50%;left:var(--bnon-process-mobile-bottom-progress, 0%);display:block;width:10px;height:10px;border-radius:50%;background:#28dbc4;opacity:0;transform:translate(-50%,-50%);transition:left var(--bnon-motion-slow, .6s) cubic-bezier(.22,1,.36,1),opacity var(--bnon-motion-slow, .6s) ease}.bnon-process__mobile-bottom-progress[data-active-track] .bnon-process__mobile-bottom-dot{opacity:1}.bnon-process__mobile-bottom-progress[data-complete] .bnon-process__mobile-bottom-dot{transform:translate(-100%,-50%)}.bnon-process__steps{display:grid;position:relative;grid-template-columns:repeat(3,max-content);justify-content:space-between;width:calc(70.9333vw - 16px);margin-left:16px;margin-right:0;min-width:0}.bnon-process__step-anchor{position:absolute;top:0;width:max-content;min-width:0}.bnon-process__step-anchor--1,.bnon-process__step-anchor--2,.bnon-process__step-anchor--3{position:static;grid-row:1;justify-self:auto;width:max-content;transform:none}.bnon-process__step-anchor--4{top:68px;left:calc(40vw + 1px)}.bnon-process__step-anchor--5{top:68px;right:-99px;left:auto}.bnon-process__step-button{width:max-content;gap:0;padding:12px 0 0;font-size:10px;font-weight:var(--bnon-weight-semibold);line-height:1.2;letter-spacing:-.04em;text-align:left;white-space:nowrap}.bnon-process__step-anchor--1 .bnon-process__step-button,.bnon-process__step-anchor--2 .bnon-process__step-button,.bnon-process__step-anchor--3 .bnon-process__step-button{width:max-content;text-align:left}.bnon-process__step-button.is-active{color:var(--bnon-color-white);font-weight:var(--bnon-weight-semibold)}.bnon-process__confirm{display:none}}.bnon-process__panel,.bnon-process__image{transition:opacity .45s ease}.bnon-process__image{transform:none}.bnon-process__panel.is-leaving{pointer-events:none}@media(prefers-reduced-motion:reduce){.bnon-process__panel,.bnon-process__image{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/29/assets/bnon-process.css.map */