.River4-C20-Modal{--black:#000;--white:#fff;--archor-bg:#f5f5f6;--devide:#e6e6e7;--p:40px;--gap:28px;--item-w:180px;--item-p:12px;--item-txt:16px;--overview:20px;--archor-gap:16px;--archor-p:8px 20px;--archor:16px;--menu-gap:20px;--menu:14px;--menu-g:8px;height:auto;font-family:var(--ff-woff2-B);color:var(--black);line-height:1.3}.River4-C20-Modal.theme-black{--black:#fff;--white:#000;--archor-bg:#343434;--devide:#343434}.River4-C20-Modal .content{gap:var(--gap);flex-direction:column;height:auto;padding:44px 0 28px;display:flex;position:relative;overflow:visible}.River4-C20-Modal .content .naver-scroll-top,.River4-C20-Modal .content .naver-scroll-bottom{gap:var(--gap);flex-direction:column;flex:none;display:flex;overflow:visible}.River4-C20-Modal .content .panel-lock{z-index:4;gap:var(--gap);background:0 0;flex-direction:column;flex:none;display:flex;position:relative}.River4-C20-Modal .content .items,.River4-C20-Modal .content .devide,.River4-C20-Modal .content .panel-head,.River4-C20-Modal .content .overview,.River4-C20-Modal .content .menus{padding:0 var(--p)}.River4-C20-Modal .content .items,.River4-C20-Modal .content .devide,.River4-C20-Modal .content .overview,.River4-C20-Modal .content .menus{opacity:var(--progress);transform:translateY(calc(-100px * (1 - var(--progress))))}.River4-C20-Modal .content .panel-head{z-index:4;visibility:hidden;pointer-events:none;flex:none;justify-content:space-between;align-items:flex-start;gap:16px;min-height:40px;margin:0;display:flex}.River4-C20-Modal .content .panel-title-spacer{min-width:0;font-size:var(--title-open);white-space:normal;overflow-wrap:break-word;flex:auto;line-height:1.15}.River4-C20-Modal .content .panel-buy-spacer{border:1px solid var(--black);background-color:var(--black);color:var(--white);white-space:nowrap;border-radius:40px;flex:none;padding:6px 12px;font-size:12px;line-height:1.2;text-decoration:none}.River4-C20-Modal .content .panel-buy-spacer:hover,.River4-C20-Modal .content .panel-buy-spacer:active{border-color:var(--black);color:var(--black);background-color:#0000}.River4-C20-Modal .content .items{width:100%}.River4-C20-Modal .content .items .item{width:var(--item-w);height:auto;padding:var(--item-p);text-align:center;flex-direction:column;gap:8px;display:flex}.River4-C20-Modal .content .items .item .item-img{height:calc(.8*var(--item-w));overflow:hidden}.River4-C20-Modal .content .items .item .item-img img{object-fit:contain;will-change:transform;transition:transform .4s}.River4-C20-Modal .content .items .item .item-img img:hover,.River4-C20-Modal .content .items .item .item-img img :active{transform:scale(1.05)}.River4-C20-Modal .content .items .item .item-name{font-family:var(--ff-woff2-B);font-size:var(--item-txt)}.River4-C20-Modal .content .items .item .item-btns{flex-direction:column;gap:4px;margin-top:auto;display:flex}.River4-C20-Modal .content .items .item .item-btns .item-btn{cursor:pointer;color:#3f68e0;border:1px solid #0000;border-radius:40px;justify-content:center;align-items:center;gap:4px;width:100%;padding:6px 12px;font-size:12px;line-height:1;display:flex}.River4-C20-Modal .content .items .item .item-btns .item-btn svg{width:16px;height:16px;transform:rotate(-90deg)}.River4-C20-Modal .content .items .item .item-btns .item-btn.disabled{color:#83868a;cursor:not-allowed}.River4-C20-Modal .content .items .item .item-btns .item-btn:not(.disabled):hover,.River4-C20-Modal .content .items .item .item-btns .item-btn:not(.disabled):active{color:#3f4ce0;border-color:#3f4ce0}.River4-C20-Modal .content .devide{width:calc(100% - 2*var(--p));left:var(--p);right:var(--p);background-color:var(--devide);height:1px;margin:0 auto}.River4-C20-Modal .content .overview{gap:var(--gap);flex-direction:column;display:flex}.River4-C20-Modal .content .overview .overvie-name{font-size:var(--overview);color:#949494}.River4-C20-Modal .content .overview .archors{gap:var(--archor-gap);flex-wrap:wrap;display:flex}.River4-C20-Modal .content .overview .archors .archor{padding:var(--archor-p);background-color:var(--archor-bg);font-size:var(--archor);color:var(--black);cursor:pointer;border-radius:40px}.River4-C20-Modal .content .overview .archors .archor:hover,.River4-C20-Modal .content .overview .archors .archor:active{background-color:var(--black);color:var(--white)}.River4-C20-Modal .content .menus{gap:var(--menu-gap);flex-flow:column wrap;display:flex}.River4-C20-Modal .content .menus .menu .menu-current{justify-content:flex-start;align-items:center;gap:var(--menu-g);font-size:var(--menu);color:#949494;cursor:default;pointer-events:none;display:flex}.River4-C20-Modal .content .menus .menu .menu-current svg{width:16px;height:16px;transform:rotate(-90deg)}.River4-C20-Modal .content .menus .menu .menu-link{justify-content:flex-start;align-items:center;gap:var(--menu-g);font-size:var(--menu);color:#3f68e0;cursor:pointer;display:flex}.River4-C20-Modal .content .menus .menu .menu-link:hover,.River4-C20-Modal .content .menus .menu .menu-link:active{color:#3f4ce0;text-decoration:underline}.River4-C20-Modal .content .menus .menu .menu-link svg{width:16px;height:16px;transform:rotate(-90deg)}@media (max-width:1024px){.River4-C20-Modal{--gap:20px;--item-w:140px;--item-p:8px;--item-txt:12px;--title:24px;--overview:16px;--archor-gap:12px;--archor-p:12px 16px;--archor:14px;--menu-gap:12px;--menu:12px;--menu-g:4px}}@media not (min-width:768px){.River4-C20-Modal{--p:24px;--w:calc(100vw - 24px)}.River4-C20-Modal .content .panel-buy-spacer{font-size:10px}}
@property --progress{syntax:"<number>";inherits:true;initial-value:0}.River4-C20{z-index:2400;--box:min(1200px, calc(100vw - 240px));--nav-p:20px 0;--r:40px;--radius-open:28px;--black:#000;--white:#fff;--rgba:#ffffffb3;--border-color:#cfd0d2;--white-border:#3a3c3f;--progress:0;--title-closed:14px;--title-open:32px;--bar-h:48px;--expand-h:0px;--explore-w:72px;--name-x0:0px;--name-y0:0px;--name-x1:0px;--name-y1:0px;--name-w0:50%;--name-w1:50%;--buy-x0:0px;--buy-y0:0px;--buy-x1:0px;--buy-y1:0px;--x-x0:0px;--x-y0:0px;--x-x1:0px;--x-y1:12px;width:100%;padding:var(--nav-p);font-family:var(--ff-woff2-B);line-height:1.3;transition:--progress .4s ease-out;position:fixed;top:0;left:0}.River4-C20.enter .naver{opacity:1;transform:translate(0%)}.River4-C20.is-open{--progress:1}.River4-C20.is-pinned{--nav-p:12px 0;position:sticky}.River4-C20.is-pinned .naver-slot{height:var(--bar-h);visibility:hidden;pointer-events:none;display:block}.River4-C20.is-pinned .naver{width:var(--box);opacity:1;margin-left:auto;margin-right:auto;transition:background .3s,border-color .3s;position:absolute;left:0;right:0;transform:none}.River4-C20 .naver-slot{display:none}.River4-C20 .naver-overlay{z-index:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:var(--progress);pointer-events:none;background:#00000059;position:fixed;inset:0}.River4-C20.is-open .naver-overlay{pointer-events:auto}.River4-C20.theme-black{--white:#000;--black:#fff;--rgba:#181819b3;--border-color:#3a3c3f}.River4-C20.theme-white .naver{background:color-mix(in srgb, #fff calc(var(--progress) * 100%), var(--rgba))}.River4-C20 .naver{z-index:1;width:var(--box);border-radius:calc(var(--r) + (var(--radius-open) - var(--r))*var(--progress));border:1px solid var(--border-color);background:var(--rgba);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);will-change:opacity,transform;opacity:0;margin:0 auto;transition:opacity .6s,transform .6s;position:relative;overflow:hidden;transform:translateY(-100%)}.River4-C20 .naver .naver-bar{z-index:4;pointer-events:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex;position:relative}.River4-C20 .naver .naver-name{width:50%;color:var(--black);align-self:center;font-size:14px}.River4-C20 .naver .naver-btns{flex-wrap:wrap;justify-content:flex-end;gap:4px 8px;width:calc(50% - 12px);display:flex}.River4-C20 .naver .naver-btns .btn{border:1px solid var(--black);cursor:pointer;border-radius:40px;padding:6px 12px;font-size:12px;line-height:1.2}.River4-C20 .naver .naver-btns .btn.btn-explore{z-index:5;min-width:calc(32px*(1 - var(--progress)));min-height:calc(28px*(1 - var(--progress)));padding:calc(6px*(1 - var(--progress))) calc(12px*(1 - var(--progress)));border-color:color-mix(in srgb, var(--black) calc(clamp(0, (.3 - var(--progress)) / .3, 1) * 100%), transparent);color:var(--black);pointer-events:auto;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}.River4-C20 .naver .naver-btns .btn.btn-explore .btn-explore-label{max-width:calc(var(--explore-w)*(1 - var(--progress)));white-space:nowrap;opacity:clamp(0,(.3 - var(--progress))/.3,1);display:block;overflow:hidden}.River4-C20 .naver .naver-btns .btn.btn-explore:not(.is-open):not(.disable):hover{background-color:var(--black);color:var(--white)}.River4-C20 .naver .naver-btns .btn.btn-explore.is-open{pointer-events:none;background:0 0}.River4-C20 .naver .naver-btns .btn.btn-buy{background-color:var(--black);color:var(--white)}.River4-C20 .naver .naver-btns .btn.btn-buy:not(.disable):hover{border-color:var(--black);color:var(--black);background-color:#0000}.River4-C20 .naver .naver-btns .btn.disable{cursor:not-allowed;opacity:.5}.River4-C20 .naver.is-measured .naver-name,.River4-C20 .naver.is-measured .btn-buy-placeholder{visibility:hidden}.River4-C20 .naver .fly-title,.River4-C20 .naver .fly-buy{z-index:3;opacity:0;pointer-events:none;margin:0;position:absolute}.River4-C20 .naver.is-measured .fly-title,.River4-C20 .naver.is-measured .fly-buy{opacity:1}.River4-C20 .naver.is-measured .fly-buy{pointer-events:auto}.River4-C20 .naver .btn-explore-x{z-index:6;left:calc(var(--x-x0) + (var(--x-x1) - var(--x-x0))*var(--progress));top:calc(var(--x-y0) + (var(--x-y1) - var(--x-y0))*var(--progress));background:var(--black);width:32px;height:32px;color:var(--white);opacity:clamp(0,var(--progress)/.45,1);pointer-events:none;cursor:pointer;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.River4-C20 .naver .btn-explore-x svg{width:16px;height:16px}.River4-C20 .naver .fly-buy{border:1px solid var(--black);background-color:var(--black);color:var(--white);white-space:nowrap;border-radius:40px;padding:6px 12px;font-size:12px;line-height:1.2;text-decoration:none}.River4-C20 .naver .fly-buy:hover{border-color:var(--black);color:var(--black);background-color:#0000}.River4-C20 .naver .fly-title{left:calc(var(--name-x0) + (var(--name-x1) - var(--name-x0))*var(--progress));top:calc(var(--name-y0) + (var(--name-y1) - var(--name-y0))*var(--progress));width:calc(var(--name-w0) + (var(--name-w1) - var(--name-w0))*var(--progress));font-size:calc(var(--title-closed) + (var(--title-open) - var(--title-closed))*var(--progress));color:var(--black);pointer-events:none;white-space:normal;overflow-wrap:break-word;line-height:1.15}.River4-C20 .naver .fly-buy{left:calc(var(--buy-x0) + (var(--buy-x1) - var(--buy-x0))*var(--progress));top:calc(var(--buy-y0) + (var(--buy-y1) - var(--buy-y0))*var(--progress))}.River4-C20 .naver .naver-expand{z-index:1;height:calc(var(--expand-h)*var(--progress));max-height:calc((100vh - 120px)*var(--progress));margin-top:calc(var(--bar-h)*var(--progress)*-1);flex-direction:column;display:flex;position:relative;overflow:hidden}.River4-C20.is-open .btn-explore-x{pointer-events:auto}.River4-C20.is-open .btn-explore-x:hover{opacity:.82}.River4-C20.is-open .panel-head{visibility:visible;pointer-events:auto;opacity:clamp(0,(var(--progress) - .99)*100,1)}.River4-C20.is-open .naver.is-measured .fly-title,.River4-C20.is-open .naver.is-measured .fly-buy{visibility:hidden;opacity:0;pointer-events:none}.River4-C20.is-open .naver-expand.is-scrollable{overscroll-behavior:contain;scrollbar-width:none;overflow:hidden auto}.River4-C20.is-open .naver-expand.is-scrollable::-webkit-scrollbar{display:none}@media (max-width:1024px){.River4-C20{--box:calc(100vw - 96px)}}@media not (min-width:768px){.River4-C20{--box:100vw;--nav-p:0;--r:0;--radius-open:0px;--title-closed:12px;--title-open:24px}.River4-C20.is-pinned{--nav-p:0}.River4-C20.is-pinned.is-open{--nav-p:0 0 12px}.River4-C20 .naver{border-top:none;border-left:none;border-right:none}.River4-C20 .naver .naver-name{width:unset;font-size:12px}.River4-C20 .naver .naver-btns{width:unset;flex-wrap:nowrap;gap:4px}.River4-C20 .naver .naver-btns .btn{flex:none;font-size:10px}.River4-C20 .naver .fly-buy{font-size:10px}.River4-C20 .naver .naver-expand{max-height:calc(100vh*var(--progress))}}@media (prefers-reduced-motion:reduce){.River4-C20{transition:none}}