@charset "UTF-8"; /* * File Name : /ui_resource/css/responsive/common/layerpopup.css * Description : [공통] 레이어팝업 관련 스타일 */ /* layerpopup (common) */ [class*=layerpopup-common] .cl-white {color: #fff !important;} [class*=layerpopup-common] .cl-light-purple {color: #A399FF !important;} [class*=layerpopup-common] .cl-yellow {color: #FEBB00 !important;} [class*=layerpopup-common] .bold {color: #FEBB00 !important; font-family: var(--ft-family_Poppins-400) !important;} [class*=layerpopup-common] {display: none; justify-content: center; align-items: center; z-index: 1000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;} [class*=layerpopup-common]:after {content: ""; z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);} [class*=layerpopup-common] .layer-wrapper {overflow-y: auto; position: relative; width: 415px; /*max-height: 90%;*/background-color: #240075; border: 3px solid #1398FF; border-radius: 18px; box-sizing: border-box; transition: all .7s ease; animation: fadeInScaleEffect 0.5s ease forwards;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {z-index: 1; position: absolute; top: 15px; right: 15px; width: 30px; height: 30px;} /* button-layerpopup-close : type-circle */ [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle {top: -15.2px; right: -15.2px; width: 50.6px; height: 50.6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'%3E%3Ccircle cx='26.5737' cy='26.5739' r='25.3659' fill='%23240075' stroke='%231398FF' stroke-width='2.4158'/%3E%3Crect x='10.871' y='39.458' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(-45 10.871 39.458)' fill='white'/%3E%3Crect x='13.6895' y='10.8711' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(45 13.6895 10.8711)' fill='white'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::after {display: none;} .layerpopup-payment-complete .layer-wrapper, .layerpopup-login-bonus .layer-wrapper, .layerpopup-vip-levelup .layer-wrapper {overflow: visible;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::after {content: ''; position: absolute; left: 50%; top: 50%; width: 42px; height: 4px; background-color: #fff; border-radius: 15px; transform-origin: center;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::before {transform: translate(-50%, -50%) rotate(45deg);} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::after {transform: translate(-50%, -50%) rotate(-45deg);} [class*=layerpopup-common] .layer-top-area {text-align: center;} [class*=layerpopup-common] .layer-top-area > * {display: block;} [class*=layerpopup-common] .layer-top-area .img-main {margin: 0 auto;} [class*=layerpopup-common] .layer-inner {display: flex; flex-direction: column; align-items: center; position: relative; height: 100%; padding: 30px 0; box-sizing: border-box;} [class*=layerpopup-common] .layer-inner > *, [class*=layerpopup-common] .layer-contents > * {margin-bottom: 16px;} [class*=layerpopup-common] .layer-inner > *:last-child {margin-bottom: 0 !important;} [class*=layerpopup-common] .layer-header {margin-bottom: 10px; text-align: center;} [class*=layerpopup-common] .layer-header .main-tit {color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 36px; line-height: 1;} [class*=layerpopup-common] .layer-header .sub-tit {margin-top: 7px; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 16px;} /* point-img */ [class*=layerpopup-common] .layer-header .sub-tit .point-img {display: inline-block; width: 21.4px; height: 21.4px; margin-right: 4px; background: url(../../../images/store/common/icon_point.png) center no-repeat; background-size: contain; vertical-align: -4px;} [class*=layerpopup-common] .layer-contents {display: flex; flex-direction: column; width: 100%; padding: 0 20px; box-sizing: border-box;} .layerpopup-vip-levelup .layer-contents {padding: 0 6px;} [class*=layerpopup-common] .layer-contents.inner-pd, [class*=layerpopup-common] .layer-contents .inner-pd {width: calc(100% - 20px) !important; margin: 0 auto 16px;} .layerpopup-vip-open .layer-contents.inner-pd, .layerpopup-vip-levelup .layer-contents.inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd, .layerpopup-login-bonus .layer-contents .inner-pd, .layerpopup-vip-levelup .layer-contents .inner-pd {width: 100% !important;} /* 게이지 팝업 : 하단 박스 너비를 게이지와 동일하게 */ .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd {width: 334px !important;} [class*=layerpopup-common] .layer-contents .content {color: #A399FF; font-family: var(--ft-family_Poppins-300); font-size: 16px; line-height: 1.4; text-align: center;} [class*=layerpopup-common] .layer-contents > *:last-child {margin-bottom: 0 !important;} [class*=layerpopup-common] .layer-contents .infobox {width: 100%; padding: 0 15px; margin-bottom: 14px; background: #1A0057; border-radius: 8px; border: 2px solid #4B11CD; box-sizing: border-box;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area {display: flex; justify-content: center; align-items: center; height: 60.72px;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area > * {margin-right: 6px;;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area > *:last-child {margin-right: 0 !important;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-img {display: inline-block; width: 30.408px; height: 31.392px; background: url(../../../images/common/icons/icon_chip.png) center no-repeat; background-size: cover;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-amount {overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 30px); font-family: var(--ft-family_NotoSans-700); font-size: 32.4px; background-image: linear-gradient(180deg, #ffee32 34.066%, #ffb200 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0.9px rgba(83, 0, 35, .7)) drop-shadow(0 1px 0 #9e2205);} [class*=layerpopup-common] .layer-contents .infobox.type-list {display: flex; flex-direction: column; align-items: center; padding: 15px 20px;} [class*=layerpopup-common] .layer-contents .infobox.type-list > * {margin-bottom: 10px;} [class*=layerpopup-common] .layer-contents .infobox.type-list > *:last-child {margin-bottom: 0 !important;} [class*=layerpopup-common] .layer-contents .infobox.type-list .title {color: #1398FF; font-family: var(--ft-family_Poppins-400); font-size: 16px; text-align: center;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item {position: relative; padding-left: 15px; margin-bottom: 7px; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 14px;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item:last-child {margin-bottom: 0 !important;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: #fff; border-radius: 50%;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item {display: flex; justify-content: center; align-items: center; flex-direction: column; flex: 0 0 calc(20% - 12px); height: 60px; padding: 2px 0; margin-right: 14px; margin-bottom: 10px; gap: 2px; background-color: #1A0057; border: 2px solid #4B11CD; box-sizing: border-box; border-radius: 12px;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item:nth-child(5n) {margin-right: 0 !important;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item:last-child {margin-right: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon {width: auto; height: 60%; margin-top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon {aspect-ratio: 1;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon img {position: relative; top: 0; width: 100%; height: 100%; object-fit: contain;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .cnt {display: inline-block; color: #FFF47A; font-family: var(--ft-family_Poppins-400); font-size: 14px;} [class*=layerpopup-common] .layer-contents .notice {color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 14px; text-align: center; line-height: 1.4;} [class*=layerpopup-common] .layer-contents .circle-gauge {display: flex; justify-content: center; margin-top: 5px;} [class*=layerpopup-common] .layer-footer .btn-complete {width: 210px; height: 48px;} .layerpopup-payment-complete-new .layer-footer .btn-complete, .layerpopup-login-reward .layer-footer .btn-complete, .layerpopup-login-bonus .layer-footer .btn-complete, .layerpopup-webstore-voucher .layer-footer .btn-complete, .layerpopup-account-not-found .layer-footer .btn-complete, .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 227.9px; height: 50.6px;} .layerpopup-login-bonus .layer-footer .btn-complete {width: 181.2px; height: 40.2px;} .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 214.1px; height: 47.5px;} .layerpopup-vip-open .layer-footer .btn-complete, .layerpopup-vip-levelup .layer-footer .btn-complete {width: 193.5px; height: 43px;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back, [class*=layerpopup-common] .layer-footer .btn-complete .bg-front {height: 91.667%; border-radius: 30px;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back {top: 6.25%;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner {left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 30px;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before, [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {left: 2px; width: calc(100% - 4px); height: calc(50% - 2px);} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before {top: 2px; border-radius: 170px 170px 0 0;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {bottom: 2px; border-radius: 0 0 170px 170px;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt {font-size: 24px;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -ms-text-stroke-width: 2px; text-stroke-width: 2px;} [class*=layerpopup-common].show {display: flex;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-top-area {position: relative; border-radius: 18px 18px 0 0;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-top-area .img-main img {width: 100%;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-inner {padding-top: 0; border-radius: 18px;} [class*=layerpopup-common] .layer-wrapper.half-bg {width: 390px;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-top-area {height: 200px; width: 100%; border: 3px solid #1A0057; border-bottom: 0; box-sizing: border-box;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-top-area .img-main {position: absolute; left: 50%; transform: translateX(-50%);} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-inner {padding-top: 25px; background-color: #1d0056; border-radius: 0 0 18px 18px;} [class*=layerpopup-common] .layer-wrapper.w-slim {width: 330px;} [class*=layerpopup-common] .layer-wrapper.w-slim .layer-contents .content {font-size: 14px;} [class*=layerpopup-common] .layer-wrapper.over-maxh {overflow-y: auto !important; max-height: 90% !important;} /* layerpopup (common) : vip */ [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper {width: 430px; background-color: #771241; border-color: #febb00;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper > .button-layerpopup-close::before, [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper > .button-layerpopup-close::after {background: #febb00;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-contents .infobox {background-color: #55042a; border-color: #911a51;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .sub-tit {color: #febb00;} /* layerpopup (common) : promotion */ /* [class*=layerpopup-common][class*=layerpopup-promotion] .layer-wrapper {background-color: #4f00b1; border-color: #7613F1;} */ /* layerpopup-full (common) */ [class*=layerpopup-full-common] {display: none; justify-content: center; align-items: center; z-index: 1000; position: fixed; left: 0; top: 0; width: 100%; height: 100%;} [class*=layerpopup-full-common]:after {content: ""; z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);} [class*=layerpopup-full-common] .layer-wrapper {overflow-y: auto; position: relative; width: 100%; height: 100%; background-color: #1A0057; box-sizing: border-box; transform: translateY(-100%); transition: all .5s ease;} [class*=layerpopup-full-common] .button-layerpopup-close {z-index: 1; position: absolute; top: 20px; right: 20px; width: 26px; height: 26px;} [class*=layerpopup-full-common] .button-layerpopup-close::before, [class*=layerpopup-full-common] .button-layerpopup-close::after {content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 4px; background-color: #fff; border-radius: 15px; transform-origin: center;} [class*=layerpopup-full-common] .button-layerpopup-close::before {transform: translate(-50%, -50%) rotate(45deg);} [class*=layerpopup-full-common] .button-layerpopup-close::after {transform: translate(-50%, -50%) rotate(-45deg);} [class*=layerpopup-full-common].show {display: flex;} [class*=layerpopup-full-common].show .layer-wrapper {transform: translateY(-100%); animation: showLayerFromTop .7s 0s ease forwards;} /* layerpopup (side) */ [class*=layerpopup-side]:after {content: ""; z-index: 99; position: fixed; left: 0; top: 0; width: 0; height: 0; background: rgba(0, 0, 0, 0.8); transition: all 1s ease;} [class*=layerpopup-side] .layer-inner {overflow-y: auto; z-index: 101; position: fixed; top: 0; width: 384px; height: 100%; background: #240075;} [class*=layerpopup-side] .button-layerpopup-close {z-index: 1; position: absolute; top: 20px; width: 26px; height: 26px;} [class*=layerpopup-side] .button-layerpopup-close::before, [class*=layerpopup-side] .button-layerpopup-close::after {content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 4px; background-color: #fff; border-radius: 15px; transform-origin: center;} [class*=layerpopup-side] .button-layerpopup-close::before {transform: translate(-50%, -50%) rotate(45deg);} [class*=layerpopup-side] .button-layerpopup-close::after {transform: translate(-50%, -50%) rotate(-45deg);} [class*=layerpopup-side] * {color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 24px;} [class*=layerpopup-side]:after, [class*=layerpopup-side] .layer-inner {transition: transform .7s ease;} [class*=layerpopup-side]:after {opacity: 0;} [class*=layerpopup-side].show:after {width: 100%; height: 100%; opacity: 1; /* animation: fadeInEffect .5s 0s forwards; */} [class*=layerpopup-side].show .layer-inner {transform: translateX(0);} .layerpopup-side-left .layer-inner {left: 0; transform: translateX(-100%);} .layerpopup-side-left .button-layerpopup-close {left: 20px;} .layerpopup-side-right .layer-inner {right: 0; transform: translateX(100%);} .layerpopup-side-right .button-layerpopup-close {right: 20px;} /* layerpopup (mo-menu-comm) : 태블릿부터 노출됨 */ .mo-menu-comm {display: none !important;} /* layerpopup (profile) : 개편 UI */ .layerpopup-side-right.layerpopup-profile .layer-inner {display: flex; flex-direction: column; width: 446px; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} /* 상단 타이틀바 */ .layerpopup-profile .profile-top {position: relative; height: 60.4px; background: #3c008f;} .layerpopup-profile .profile-top .title {position: absolute; left: 20.26px; top: 60.18%; transform: translateY(-50%); color: #7556ff; font-family: var(--ft-family_Poppins-700); font-size: 32.25px; line-height: 29.07px; text-transform: uppercase;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close {top: 22.5px; right: 22.5px; width: 27.7px; height: 27.7px;} /* 닫기버튼 : ::before 에 SVG 배경, ::after 제거 */ .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::before {left: 50%; top: 0; width: 100%; height: auto; aspect-ratio: 27.66 / 30.15; background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='27.6558' height='30.1503' viewBox='0 0 27.6558 30.1503' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='BTN_Close'%3E %3Cg id='Union' filter='url(%23filter0_d_6083_10577)'%3E %3Cmask id='path-1-outside-1_6083_10577' maskUnits='userSpaceOnUse' x='2.90085' y='3.26698' width='22' height='22' fill='black'%3E %3Crect fill='white' x='2.90085' y='3.26698' width='22' height='22'/%3E %3Cpath d='M5.81343 4.41677C6.01323 4.21699 6.33719 4.21711 6.53706 4.41677L13.8173 11.7009L21.0947 4.42067C21.2946 4.22067 21.6194 4.22067 21.8193 4.42067L23.582 6.18532C23.7817 6.38528 23.7816 6.70899 23.582 6.90896L16.3046 14.1902L23.5771 21.4666C23.777 21.6666 23.777 21.9912 23.5771 22.1912L21.8144 23.9549C21.6145 24.1549 21.2897 24.1549 21.0898 23.9549L13.8173 16.6785L6.54195 23.9588C6.34205 24.1586 6.01816 24.1587 5.81831 23.9588L4.05562 22.1951C3.85573 21.9951 3.85573 21.6705 4.05562 21.4705L11.331 14.1902L4.05073 6.90505C3.8509 6.70504 3.85087 6.3814 4.05073 6.18142L5.81343 4.41677Z'/%3E %3C/mask%3E %3Cpath d='M5.81343 4.41677C6.01323 4.21699 6.33719 4.21711 6.53706 4.41677L13.8173 11.7009L21.0947 4.42067C21.2946 4.22067 21.6194 4.22067 21.8193 4.42067L23.582 6.18532C23.7817 6.38528 23.7816 6.70899 23.582 6.90896L16.3046 14.1902L23.5771 21.4666C23.777 21.6666 23.777 21.9912 23.5771 22.1912L21.8144 23.9549C21.6145 24.1549 21.2897 24.1549 21.0898 23.9549L13.8173 16.6785L6.54195 23.9588C6.34205 24.1586 6.01816 24.1587 5.81831 23.9588L4.05562 22.1951C3.85573 21.9951 3.85573 21.6705 4.05562 21.4705L11.331 14.1902L4.05073 6.90505C3.8509 6.70504 3.85087 6.3814 4.05073 6.18142L5.81343 4.41677Z' fill='url(%23paint0_linear_6083_10577)'/%3E %3Cpath d='M5.81343 4.41677L5.45141 4.05471L5.45119 4.05493L5.81343 4.41677ZM6.53706 4.41677L6.8992 4.05483L6.89891 4.05454L6.53706 4.41677ZM13.8173 11.7009L13.4552 12.0629L13.8173 12.4252L14.1794 12.0629L13.8173 11.7009ZM21.0947 4.42067L21.4568 4.78264L21.4568 4.78261L21.0947 4.42067ZM21.8193 4.42067L22.1815 4.05884L22.1814 4.05874L21.8193 4.42067ZM23.582 6.18532L23.9443 5.82355L23.9442 5.82348L23.582 6.18532ZM23.582 6.90896L23.9441 7.2709L23.9443 7.2707L23.582 6.90896ZM16.3046 14.1902L15.9425 13.8283L15.5808 14.1902L15.9425 14.5521L16.3046 14.1902ZM23.5771 21.4666L23.9393 21.1046L23.9392 21.1046L23.5771 21.4666ZM23.5771 22.1912L23.9392 22.5531L23.9392 22.5531L23.5771 22.1912ZM21.8144 23.9549L21.4523 23.5929L21.4523 23.5929L21.8144 23.9549ZM21.0898 23.9549L21.4519 23.5929L21.4519 23.5929L21.0898 23.9549ZM13.8173 16.6785L14.1795 16.3165L13.8173 15.9542L13.4552 16.3166L13.8173 16.6785ZM6.54194 23.9588L6.90397 24.3208L6.90411 24.3207L6.54194 23.9588ZM5.81831 23.9588L6.18046 23.5968L6.18045 23.5968L5.81831 23.9588ZM4.05562 22.1951L3.69347 22.557L3.69348 22.557L4.05562 22.1951ZM4.05562 21.4705L4.41776 21.8324L4.41778 21.8324L4.05562 21.4705ZM11.331 14.1902L11.6932 14.5521L12.0548 14.1902L11.6932 13.8283L11.331 14.1902ZM4.05073 6.90505L3.68853 7.26693L3.68857 7.26697L4.05073 6.90505ZM4.05073 6.18142L4.41289 6.54334L4.41297 6.54325L4.05073 6.18142ZM5.81343 4.41677L6.17545 4.77882L6.17522 4.779L6.53706 4.41677L6.89891 4.05454C6.49931 3.65536 5.85133 3.65483 5.45141 4.05471L5.81343 4.41677ZM6.53706 4.41677L6.17493 4.77871L13.4552 12.0629L13.8173 11.7009L14.1795 11.339L6.8992 4.05483L6.53706 4.41677ZM13.8173 11.7009L14.1794 12.0629L21.4568 4.78264L21.0947 4.42067L20.7326 4.05871L13.4552 11.339L13.8173 11.7009ZM21.0947 4.42067L21.4568 4.78261H21.4571L21.8193 4.42067L22.1814 4.05874C21.7816 3.65864 21.1324 3.65864 20.7325 4.05874L21.0947 4.42067ZM21.8193 4.42067L21.457 4.78251L23.2197 6.54716L23.582 6.18532L23.9442 5.82348L22.1815 4.05884L21.8193 4.42067ZM23.582 6.18532L23.2197 6.5471L23.2196 6.54721L23.582 6.90896L23.9443 7.2707C24.3435 6.87088 24.3436 6.22342 23.9443 5.82355L23.582 6.18532ZM23.582 6.90896L23.2198 6.54701L15.9425 13.8283L16.3046 14.1902L16.6668 14.5521L23.9441 7.2709L23.582 6.90896ZM16.3046 14.1902L15.9425 14.5521L23.215 21.8285L23.5771 21.4666L23.9392 21.1046L16.6668 13.8283L16.3046 14.1902ZM23.5771 21.4666L23.215 21.8285L23.215 21.8292L23.5771 22.1912L23.9392 22.5531C24.3389 22.1532 24.3389 21.5046 23.9393 21.1046L23.5771 21.4666ZM23.5771 22.1912L23.215 21.8292L21.4523 23.5929L21.8144 23.9549L22.1765 24.3168L23.9392 22.5531L23.5771 22.1912ZM21.8144 23.9549L21.4523 23.5929H21.4519L21.0898 23.9549L20.7277 24.3168C21.1275 24.7169 21.7767 24.7169 22.1766 24.3168L21.8144 23.9549ZM21.0898 23.9549L21.4519 23.5929L14.1795 16.3165L13.8173 16.6785L13.4552 17.0404L20.7277 24.3168L21.0898 23.9549ZM13.8173 16.6785L13.4552 16.3166L6.17979 23.5968L6.54194 23.9588L6.90411 24.3207L14.1795 17.0404L13.8173 16.6785ZM6.54194 23.9588L6.17992 23.5967L6.18046 23.5968L5.81831 23.9588L5.45617 24.3207C5.85611 24.7209 6.50424 24.7205 6.90397 24.3208L6.54194 23.9588ZM5.81831 23.9588L6.18045 23.5968L4.41776 21.8332L4.05562 22.1951L3.69348 22.557L5.45617 24.3207L5.81831 23.9588ZM4.05562 22.1951L4.41776 21.8332V21.8324L4.05562 21.4705L3.69347 21.1085C3.29378 21.5085 3.29378 22.1571 3.69347 22.557L4.05562 22.1951ZM4.05562 21.4705L4.41778 21.8324L11.6932 14.5521L11.331 14.1902L10.9688 13.8283L3.69346 21.1086L4.05562 21.4705ZM11.331 14.1902L11.6932 13.8283L4.41289 6.54313L4.05073 6.90505L3.68857 7.26697L10.9688 14.5521L11.331 14.1902ZM4.05073 6.90505L4.41294 6.54317L4.41289 6.54334L4.05073 6.18142L3.68858 5.81949C3.28887 6.21945 3.28902 6.86705 3.68853 7.26693L4.05073 6.90505ZM4.05073 6.18142L4.41297 6.54325L6.17567 4.77861L5.81343 4.41677L5.45119 4.05493L3.6885 5.81958L4.05073 6.18142Z' fill='url(%23paint1_linear_6083_10577)' mask='url(%23path-1-outside-1_6083_10577)'/%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3Cfilter id='filter0_d_6083_10577' x='1.54565' y='3.75498' width='24.5413' height='26.3953' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E %3CfeOffset dy='3.6864'/%3E %3CfeGaussianBlur stdDeviation='0.9216'/%3E %3CfeComposite in2='hardAlpha' operator='out'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.151282 0 0 0 0 0 0 0 0 0 0.283654 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6083_10577'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6083_10577' result='shape'/%3E %3C/filter%3E %3ClinearGradient id='paint0_linear_6083_10577' x1='13.8163' y1='4.26698' x2='13.8163' y2='24.1087' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FFF6FF'/%3E %3Cstop offset='1' stop-color='%23DCC8FF'/%3E %3C/linearGradient%3E %3ClinearGradient id='paint1_linear_6083_10577' x1='13.8163' y1='4.26698' x2='13.8163' y2='24.1087' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FAE4FF'/%3E %3Cstop offset='1' stop-color='%23B39EFF'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E") 50% 50% / 100% 100% no-repeat; border-radius: 0; transform: translateX(-50%);} /* 프로필 카드 */ .layerpopup-profile .profile-card {position: relative; flex: 0 0 auto; width: 415.96px; height: 224.11px; margin: 12.4px auto 0; border-radius: 13.231px; background: linear-gradient(180deg, #5702ca 0%, #8125ff 100%); box-shadow: 0 4.135px 4.962px rgba(0, 7, 85, .44), inset 0 0 0 0.413px #ea8900, inset 0 0 0 1.654px #fffbd3, inset 0 0 0 2.067px #ff8306;} .layerpopup-profile .profile-card__user {position: absolute; left: 25.64px; right: 16px; top: 26.43px; display: flex; align-items: center; gap: 12px;} .layerpopup-profile .profile-card__user .thumb {position: relative; flex: 0 0 auto; width: 94.34px; height: 94.34px;} /* 사진 없을 때 기본 배경 */ .layerpopup-profile .profile-card__user .thumb::before {content: ""; position: absolute; left: 3.08px; top: 3.08px; width: 88.19px; height: 88.19px; border-radius: 50%; background: linear-gradient(180deg, #310560 0%, #440096 100%);} .layerpopup-profile .profile-card__user .thumb img {position: relative; display: block; width: 88.19px; height: 88.19px; margin: 3.08px; border-radius: 50%; object-fit: cover;} .layerpopup-profile .profile-card__user .thumb::after {content: ""; position: absolute; inset: 0; padding: 5.458px; border-radius: 50%; background: linear-gradient(180deg, #6b0fe5 0%, #7619f4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .layerpopup-profile .profile-card__user .info {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6.666px;} .layerpopup-profile .profile-card__user .name {font-family: var(--ft-family_NotoSans-700); font-size: 20.67px; line-height: 1; letter-spacing: -0.41px; white-space: nowrap; max-width: 100%; padding-bottom: 0.2em; overflow: hidden; text-overflow: ellipsis;} /* 기본 이미지는 링·배경까지 포함. 우리 처리 해제하고 꽉 채움 */ .layerpopup-profile .profile-card__user .thumb.is-default::before, .layerpopup-profile .profile-card__user .thumb.is-default::after {display: none;} .layerpopup-profile .profile-card__user .thumb.is-default img {width: 100%; height: 100%; margin: 0;} .layerpopup-profile .profile-card__user .id {display: flex; align-items: center; gap: 8px;} .layerpopup-profile .profile-card__user .id .label {font-family: var(--ft-family_NotoSans-700); font-size: 16.54px; line-height: 1; letter-spacing: -0.33px;} .layerpopup-profile .profile-card__user .id .num {min-width: 102.34px; height: 27.29px; padding: 0 12px; box-sizing: border-box; background: rgba(74, 0, 173, .7); border-radius: 44px; color: rgba(255, 255, 255, .7); font-family: var(--ft-family_NotoSans-600), var(--ft-family_NotoSans-700), sans-serif; font-size: 16.54px; line-height: 27.29px; text-align: center;} /* 기기별 글자 자동확대 차단 : 같은 크기인데 iOS·안드로이드가 다르게 그림 */ .layerpopup-profile .profile-card__user .id {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;} /* 이름·ID 라벨 그라디언트 */ .layerpopup-profile .profile-card__user .name, .layerpopup-profile .profile-card__user .id .label {background-image: linear-gradient(180deg, #f6cff5 0%, #9afef6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} /* VIP LV. | VIP Points */ .layerpopup-profile .profile-card__stat {position: absolute; left: 50%; top: 136.86px; transform: translateX(-50%); width: 401.9px; height: 80.2px; display: flex; align-items: center; justify-content: center; gap: 3.72px; background: rgba(88, 3, 204, .05); border-radius: 8.27px; box-shadow: 0 0.827px 1.406px 5px rgba(104, 16, 223, .64), inset 0 1.24px 0.538px 1px rgba(255, 255, 255, .25), inset 0 0 12.404px 2px rgba(255, 255, 255, .19);} .layerpopup-profile .profile-card__stat .stat {flex: 0 0 auto; display: flex; align-items: center; width: 194.93px; height: 46.72px;} .layerpopup-profile .profile-card__stat .divider {flex: 0 0 auto; width: 2.48px; height: 51.27px; background: #9b71ff; opacity: .66; border-radius: 0.83px;} .layerpopup-profile .profile-card__stat .ico {flex: 0 0 auto; display: block;} .layerpopup-profile .profile-card__stat .txt {display: flex; flex-direction: column; gap: 4.54px;} .layerpopup-profile .profile-card__stat .label {color: #cb88ff; font-family: var(--ft-family_NotoSansDisplay-800i); font-style: italic; font-size: 13.23px; line-height: 1; letter-spacing: -0.26px;} .layerpopup-profile .profile-card__stat .value {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 14.89px; line-height: 1; white-space: nowrap;} .layerpopup-profile .profile-card__stat .value .cur {color: #ffea00; font-size: inherit; font-family: inherit;} .layerpopup-profile .stat--lv .ico {width: 50.48px; height: 36.56px; margin-left: 11.07px; filter: drop-shadow(0 3px 0.827px #5305bd);} .layerpopup-profile .stat--lv .ico img {width: 100%; height: 100%; object-fit: contain;} .layerpopup-profile .stat--lv .txt {margin-left: 8.09px;} /* LV 라벨만 SemiCondensed : 반응형 .label 보다 우선순위 높게 */ .layerpopup-profile .profile-card__stat .stat--lv .label {font-family: var(--ft-family_NotoSansDisplaySCd-800i);} .layerpopup-profile .stat--point .ico {width: 42.42px; height: 42.42px; margin-left: 8.56px; background: url(../../../images/store/common/icon_vippoint.png) 50% 50% / contain no-repeat; filter: drop-shadow(0 4px 0.827px #5305bd);} .layerpopup-profile .stat--point .txt {margin-left: 6.08px;} /* 포인트 값 : 시안 폰트 크기가 LV 쪽과 다름 */ .layerpopup-profile .stat--point .value {font-size: 16.54px;} /* 하단 버튼 */ .layerpopup-profile .profile-bottom {margin: auto 0 69.94px; display: flex; flex-direction: column; align-items: center; gap: 40.47px;} .layerpopup-profile .btn-backtogame {position: relative; width: 302.37px; height: 71.11px; padding: 0; filter: drop-shadow(0 2.313px 1.734px rgba(41, 0, 91, .42));} .layerpopup-profile .btn-backtogame .btn {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 71.11px; border-radius: 23.229px; background: linear-gradient(180deg, #23c5ff 18.241%, #436bff 40.832%, #3e36d2 89.242%); box-shadow: inset 0 -2.108px 1.405px rgba(18, 5, 112, .28), inset 0 -1.405px 2.811px #1c096d, inset 0 0 5.762px #006fff;} .layerpopup-profile .btn-backtogame .glow {position: absolute; left: 1.53%; right: 1.72%; top: calc(50% - 1.45px); transform: translateY(-50%); height: 63.6px; border-radius: 19.745px; background: linear-gradient(180deg, #00eeff 0%, #4681ff 38.462%, #401cc2 90.385%, #3c2bc4 100%); box-shadow: inset 0 -1.156px 0.703px rgba(76, 67, 247, .85); filter: blur(0.694px);} .layerpopup-profile .btn-backtogame .shine {position: absolute; left: 2.29%; right: 2.49%; top: calc(50% - 3.18px); transform: translateY(-50%); height: 56.66px; border-radius: 17.422px; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 30.769%); opacity: .85; filter: blur(0.289px);} .layerpopup-profile .btn-backtogame .txt {position: absolute; left: 8.03%; right: 8.08%; top: calc(50% - 2.07px); transform: translateY(-50%); height: 54.11px; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800); font-size: 32.38px; line-height: 1; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #99dfff 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.703px 0 #0084ff) drop-shadow(0 2.108px 1.265px #000b89) drop-shadow(0 1.405px 5.551px #1341c7);} .layerpopup-profile .btn-logout {width: 120.83px; height: 41.05px; padding: 0; color: #886dff; font-family: var(--ft-family_NotoSansDisplay-700); font-size: 28.91px; line-height: 40.65px; letter-spacing: -0.58px; text-transform: uppercase; text-decoration: underline;} /* lv-diamond-comm */ .lv-diamond-comm {position: relative; display: block; width: 100%; height: 100%;} .lv-diamond-comm::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../../../images/store/common/img_lv_bg.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 3.47px 2.04px rgba(55, 3, 120, .58));} .lv-diamond-comm > span {position: absolute; left: 0; top: -3.33%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); font-size: 21.25px; line-height: 9.517px; letter-spacing: -0.425px; text-align: center; text-transform: uppercase; -webkit-text-stroke: 2.02px rgba(255, 255, 0, .5); background-image: none;} .lv-diamond-comm > span::after {content: attr(data-lv); position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #963800 0%, #5f2103 83.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .lv-diamond-comm.is-off::before {background-image: url(../../../images/store/common/img_lv_bg_off.png);} .lv-diamond-comm.is-off > span {font-family: var(--ft-family_NotoSans-800); font-size: 20.07px; letter-spacing: -0.401px; -webkit-text-stroke: 0;} .lv-diamond-comm.is-off > span::after {background-image: linear-gradient(180deg, #fff 0%, #e7c7ff 83.17%);} /* point-gauge */ .point-gauge {position: relative; width: 437.08px; height: 137.599px;} .layerpopup-payment-complete .point-gauge, .layerpopup-login-reward .point-gauge {transform: scale(0.7642); transform-origin: 50% 0; margin: 0 calc(50% - 218.54px) -5.44px;} .point-gauge > span {position: absolute;} .point-gauge__frame {left: 0; top: 23px; width: 437px; height: 90px; background: url(../../../images/store/common/bg_point_gauge.svg?v=260916) 50% 50% / 100% 100% no-repeat;} .point-gauge__title {left: 102.39px; top: 2.428px; width: 231.895px; height: 41.684px; background: url(../../../images/store/common/img_gauge_title.png) 50% 50% / 100% 100% no-repeat;} /* point-gauge__bar */ .point-gauge__bar {left: 63.943px; top: 48.564px; width: 309.194px; height: 38.042px; border-radius: 4.047px; background: linear-gradient(0deg, #3b1b8e 0%, #1b005e 100%);} .point-gauge__bar::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 2.833px; border-radius: inherit; background: linear-gradient(270deg, #4f21c3 0%, #7706ce 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__track {left: 70.014px; top: 54.635px; width: 297.053px; height: 25.901px; border-radius: 2.428px; overflow: hidden;} .point-gauge__fill {display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e3a138 1.44%, #ffff6b 7.21%, #f55f51 83.65%, #f475fe 100%); transition: width .3s; animation: pointGaugeFill 1s cubic-bezier(.22, .61, .36, 1) .25s backwards;} .point-gauge.is-max .point-gauge__fill {background: linear-gradient(180deg, #38c9e3 1.44%, #6bffcf 7.21%, #6756ff 83.65%, #7a75fe 100%);} /* 만렙은 포인트 표기 미노출 */ .point-gauge.is-max .point-gauge__panel {display: none;} .point-gauge .point-gauge__max {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); filter: drop-shadow(0 0.046em 0 #e82300) drop-shadow(0 0.12em 0.07em rgba(59, 0, 83, .8)); background-image: linear-gradient(180deg, #fff 34.07%, #ffef79 72.1%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 17.5px; line-height: 1; text-align: center;} .point-gauge__level {left: 29.139px; top: 40.47px; width: 54.635px; height: 54.635px;} .point-gauge__reward {left: 355.044px; top: 36.828px; width: 52.452px; height: 61.029px; background: url(../../../images/store/common/icon_reward.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__badge {position: absolute; left: 29.019px; top: -2.428px; width: 29.948px; height: 29.948px; box-sizing: border-box; padding-bottom: 3.64px; display: flex; align-items: center; justify-content: center; background: url(../../../images/store/common/icon_reddot.png) 50% 50% / 100% 100% no-repeat; color: #fff; font-family: var(--ft-family_NotoSans-800); font-size: 16.19px; line-height: 1; text-align: center; text-shadow: 0 0.405px 0 rgba(119, 0, 0, .26);} /* 포인트칩 : 테두리 바깥쪽 + 그라데이션 */ /* 포인트칩 : 자릿수 늘면 좌우로 늘어남 */ .point-gauge__panel {left: 50%; top: 83.774px; transform: translateX(-50%); width: auto; height: 39.255px; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; border-radius: 0 0 18.212px 18.212px; background: linear-gradient(0deg, #a446fb 0%, #5621c1 100%); box-shadow: 0 2.428px 4.047px rgba(46, 21, 101, .5);} .point-gauge__panel::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.809px; border-radius: inherit; background: linear-gradient(0deg, #ee68fa 0%, #9b30ff 21%, #571cba 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__panel::before {content: ""; position: absolute; left: 3.237px; right: 3.237px; top: 2.833px; bottom: 3.236px; border-radius: 4.047px 4.047px 16.188px 16.188px; background: linear-gradient(0deg, #5704b4 9%, #110361 100%);} .point-gauge__icon {position: relative; flex: 0 0 auto; width: 30.757px; height: 30.757px; background: url(../../../images/store/common/icon_point.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__num {position: relative; flex: 0 0 auto; height: 25.092px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 18.62px; line-height: 1; letter-spacing: -0.3724px; text-align: center; white-space: nowrap;} .point-gauge__num .cur {color: #ff0; font-family: inherit; font-size: inherit;} @keyframes pointGaugeFill { from {width: 0;} } /* layerpopup (doubleupoint) : 개편 UI */ .layerpopup-side-right.layerpopup-doubleupoint .layer-inner {display: flex; flex-direction: column; overflow: hidden; width: 446px; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close {top: 20px; right: 21px; width: 42px; height: 42px;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::before {left: 50%; top: 50%; width: 42px; height: 42px; border-radius: 0; transform: translate(-50%, -50%); background-color: transparent; background-image: url(../../../images/popup/doubleupoint/v2/btn_close.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%;} /* 상단 고정영역 (배너 + 게이지) */ .layerpopup-doubleupoint .dpoint-top {position: relative; z-index: 1; flex: 0 0 auto; height: 315.917px; background: url(../../../images/popup/doubleupoint/v2/img_top_banner.jpg) 50% 0 / 100% auto no-repeat;} .layerpopup-doubleupoint .dpoint-top::before {content: ""; position: absolute; left: 0; top: 230.43px; width: 100%; height: 92.091px; background: linear-gradient(180deg, rgba(43, 1, 96, 0) 0%, #260352 16.35%, rgba(43, 1, 96, .66) 65.87%, rgba(43, 1, 96, 0) 96.15%);} .layerpopup-doubleupoint .dpoint-top__txt {position: absolute; left: 48.75px; top: 55.34px; width: 242px; height: 99.11px; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 20.648px; line-height: 26.43px; letter-spacing: -0.413px; -webkit-text-stroke: 2.23px #bc339a; paint-order: stroke fill; text-shadow: 0 2.23px 0 #84186a, 0 1.239px 2.973px rgba(199, 48, 50, .77);} .layerpopup-doubleupoint .dpoint-top .point-gauge {position: absolute; left: 4.46px; top: 174.258px;} /* 리워드 리스트 */ .layerpopup-doubleupoint .layer-wrapper {overflow-x: hidden; overflow-y: auto; position: relative; flex: 1 1 auto; margin-top: -66.487px; padding-top: 66.487px; scrollbar-width: none; -ms-overflow-style: none;} /* 스크롤바 숨김 : 시안폭 유지 (스크롤 표시는 상단 그림자 + 탑버튼) */ .layerpopup-doubleupoint .layer-wrapper::-webkit-scrollbar {display: none;} .layerpopup-doubleupoint .reward-list > .item {position: relative; height: 140.407px; padding: 4.752px 0 0 121.824px; box-sizing: border-box;} .layerpopup-doubleupoint .level-wrap {position: absolute; left: 33.45px; top: 37.789px; width: 54.181px; height: 54.181px;} .layerpopup-doubleupoint .level-wrap::before, .layerpopup-doubleupoint .level-wrap::after {content: ""; position: absolute; left: 50%; width: 9.344px; height: 9.344px; background: rgba(127, 34, 252, .5); border-radius: 1.652px; transform: translateX(-50%) rotate(45deg);} .layerpopup-doubleupoint .level-wrap::before {top: -31.182px;} .layerpopup-doubleupoint .level-wrap::after {top: 76.189px;} .layerpopup-doubleupoint .reward-wrap {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 9.356px 9.607px 0; position: relative; width: 299.811px; height: 119.924px; border-radius: 13.63px; background: linear-gradient(180deg, #6007d8 0%, #8831ff 88.942%); box-shadow: 0 4.543px 5.452px rgba(55, 3, 120, .8), inset 0 0 0 0.454px #ea8900, inset 0 0 0 2.272px #fffbd3, inset 0 0 0 2.726px #ff8306;} .layerpopup-doubleupoint .set-box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 68.139px; gap: 2.726px;} .layerpopup-doubleupoint .set-box .set {position: relative; flex: 0 0 auto; width: 68.139px; height: 68.139px; border-radius: 5.782px; background: linear-gradient(180deg, #4c1bb5 0%, #681bd3 100%);} .layerpopup-doubleupoint .set-box .set img {position: absolute; left: 50%; top: 3.41px; width: 42.25px; height: 42.25px; object-fit: contain; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt-area {position: absolute; left: 50%; top: 48.31px; width: 38.14px; height: 10.68px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 15.256px; line-height: 1; text-align: center; white-space: nowrap;} .layerpopup-doubleupoint .btn-area {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 169.728px; height: 41.709px;} .layerpopup-doubleupoint .btn-claim {position: relative; top: 7.988px; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 11.151px; background: linear-gradient(180deg, #b4f84a 18.241%, #4ac535 40.832%, #056a0a 89.242%); box-shadow: 0 2.891px 2.891px rgba(55, 3, 120, .8), inset 0 -1.115px 0.743px rgba(0, 59, 1, .65), inset 0 -0.743px 1.487px #055017, inset 0 0 3.048px #057407;} .layerpopup-doubleupoint .btn-claim::before {content: ""; position: absolute; left: 5.782px; top: 2.478px; width: 157.766px; height: 13.216px; border-radius: 41.3px; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;} .layerpopup-doubleupoint .btn-claim .txt {position: absolute; left: 14.36%; right: 13.14%; top: 8.91%; bottom: 15.84%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800), var(--ft-family_NotoSans-800), sans-serif; font-size: 23.128px; line-height: 1; letter-spacing: -0.463px; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transform: translateY(-0.031em); filter: drop-shadow(0 0.502px 0 #0d8800) drop-shadow(0 1.506px 0.904px #0a5b0c) drop-shadow(0 1.004px 3.965px rgba(5, 80, 23, .88));} .layerpopup-doubleupoint .btn-claim[disabled] {cursor: default;} .layerpopup-doubleupoint .btn-claim[disabled]::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 10.738px; background: rgba(29, 0, 97, .6);} .layerpopup-doubleupoint .claimed-text {color: rgba(235, 184, 255, .6); font-family: var(--ft-family_NotoSans-800); font-size: 20.648px; font-style: italic; letter-spacing: -0.826px; transform: translateY(-0.053em);} /* unlock / lock */ .layerpopup-doubleupoint .item.unlock .reward-wrap::after {content: ""; position: absolute; left: 276.685px; top: 93.44px; width: 28.081px; height: 31.705px; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 2.266px 2.855px rgba(40, 0, 88, .25));} .layerpopup-doubleupoint .item.lock .set-box, .layerpopup-doubleupoint .item.lock .btn-area {display: none;} .layerpopup-doubleupoint .item.lock .reward-wrap::after {content: ""; position: absolute; left: 50%; top: 50%; width: 28.164px; height: 31.798px; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 2.272px 2.862px rgba(40, 0, 88, .25)); transform: translate(-50%, -50%);} /* 탑버튼 */ .layerpopup-doubleupoint .btn-top-renew {display: block; z-index: 1; position: absolute; right: 20px; bottom: 20px; width: 54px; height: 54px; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%; background-image: url(../../../images/popup/doubleupoint/v2/btn_top.png);} /* layerpopup (layerpopup-login-modal) */ .layerpopup-login-modal .layer-wrapper {overflow: auto; width: 760px; height: 630px; background-color: transparent; border: none; border-radius: 16px;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close {z-index: 10; right: 16px; top: 16px; width: 26px; height: 26px;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::before, .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::after {background-color: #1398FF; width: 36px; height: 4px;} .layerpopup-login-modal iframe {display: block; width: 100%; height: 100%;} /* layerpopup (login-prompt-comm) */ .layerpopup-login-prompt-comm .layer-wrapper {animation: showLayerFromTop .7s 0s ease forwards;} .layerpopup-login-prompt-comm .layer-top-area .img-main {width: 228px; margin-top: -80px;} /* layerpopup (login-prompt) */ .layerpopup-login-prompt .layer-top-area .img-main {width: 170px; margin-top: -64px; margin-bottom: 10px;} .layerpopup-login-prompt .layer-header .main-tit {font-size: 22px; line-height: 1.35;} .layerpopup-login-prompt .layer-contents .notice:not(.cl-light-purple) {margin-bottom: 10px; font-size: 16px;} /* layerpopup (pw-reset-complete) */ .layerpopup-pw-reset-complete .layer-top-area .img-main {width: 226px; margin-top: -64px;} /* layerpopup (account-create-complete) */ .layerpopup-account-create-complete .layer-top-area .img-main {width: 200px; margin-top: -60px;} .layerpopup-account-create-complete .layer-header {margin-bottom: 15px;} /* layerpopup (email-sent-complete) */ .layerpopup-email-sent-complete .layer-top-area .img-main {width: 320px; margin-top: -83px; margin-left: -15px;} /* layerpopup (weblogin-blocked) */ .layerpopup-weblogin-blocked .layer-top-area .img-main {width: 182px; margin-top: -65px;} .layerpopup-weblogin-blocked .layer-contents .qr-img {width: 88px; margin: 0 auto;} .layerpopup-weblogin-blocked .layer-contents .qr-img img {width: 100%;} /* layerpopup (account-not-found) */ .layerpopup-account-not-found .layer-inner {padding: 26.1px 0 22.3px;} .layerpopup-account-not-found .layer-header {margin-bottom: 7.6px;} .layerpopup-account-not-found .layer-header .main-tit {font-size: 38.5px; line-height: 1.164;} .layerpopup-account-not-found .layer-contents {margin-bottom: 30.6px;} .layerpopup-account-not-found .layer-contents .content {font-size: 18.2px; line-height: 1.389;} /* layerpopup (levelup-reward)*/ .layerpopup-levelup-reward {z-index: 1001;} .layerpopup-levelup-reward .layer-contents {margin-bottom: 10px !important;} /* layerpopup (payment-complete) */ .layerpopup-payment-complete .layer-contents .content {color: #fff; font-size: 16.2px;} .layerpopup-login-reward .layer-contents .content {font-size: 18.2px;} .layerpopup-login-bonus .layer-contents .content {font-size: 14.4px;} .layerpopup-payment-complete-new .layer-header, .layerpopup-login-reward .layer-header {margin-bottom: 30px;} .layerpopup-payment-complete-levelup .layer-header {margin-bottom: 12px;} .layerpopup-payment-complete-levelup .lv-diamond-comm + .layer-header {margin-bottom: 18px;} .layerpopup-payment-complete-levelup .lv-diamond-comm + .layer-header .main-tit {line-height: 1.1;} .layerpopup-payment-complete-new .layer-contents, .layerpopup-login-reward .layer-contents {margin-bottom: 26px;} /* layerpopup (payment-complete 구버전) */ .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-header {margin-bottom: 8px;} .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-contents {margin-bottom: 2px;} .layerpopup-payment-complete .content-ui {margin-bottom: 0 !important;} .layerpopup-payment-complete-new .content-ui {margin-bottom: 23px !important;} .layerpopup-payment-complete .content-ui > * {margin-bottom: 16px;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons {row-gap: 10px;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons .item {margin-bottom: 0;} .layerpopup-payment-complete .content-ui > *:last-child {margin-bottom: 0 !important;} .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 136.6px; height: 136.6px; margin: 0 auto 12px;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 53.575px; letter-spacing: -1.071px; -webkit-text-stroke-width: 5.093px;} .layerpopup-payment-complete-levelup .layer-footer {display: flex; justify-content: center; align-items: center;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete {width: 182.2px; height: 50.6px; margin-right: 14px;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete:last-child {margin-right: 0 !important;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete .txt-area .txt {font-size: 20.2px;} /* layerpopup (vip-open) */ .layerpopup-vip-open .layer-top-area .img-main {width: 200px; margin-top: -35px;} .layerpopup-vip-open .layer-contents .item-list {display: flex; flex-wrap: wrap; justify-content: center;} .layerpopup-vip-open .layer-contents .item-list .item {overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex: 1 0 calc(50% - 8.5px); position: relative; height: 180px; padding-top: 7px; margin: 0 17px 17px 0; background: #55042a; border: 2px solid #911a51; border-radius: 12px; box-sizing: border-box;} .layerpopup-vip-open .layer-contents .item-list .item:nth-child(2n) {margin-right: 0;} .layerpopup-vip-open .layer-contents .item-list .item:nth-child(n+3) {margin-bottom: 0;} .layerpopup-vip-open .layer-contents .item-list .item .thumb-img {width: 80%;} .layerpopup-vip-open .layer-contents .item-list .item .thumb-img img {width: 100%;} .layerpopup-vip-open .layer-contents .item-list .item .content-area {position: relative; top: -5px; width: 100%; text-align: center;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .title {color: #febb00; font-family: var(--ft-family_Poppins-500); font-size: 20px;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .description {display: flex; justify-content: center; align-items: center; height: 2lh; margin-top: 5px; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 12px; line-height: 1.4;} /* layerpopup (vip-levelup) */ .layerpopup-vip-levelup .layer-top-area .img-main {position: relative; padding-bottom: 10px;} .layerpopup-vip-levelup .layer-top-area .img-main::before, .layerpopup-vip-levelup .layer-top-area .img-main::after {content: ""; display: inline-block; z-index: 1; position: absolute; top: 62px; width: 76px; background-repeat: no-repeat; background-position: center; background-size: contain;} .layerpopup-vip-levelup .layer-top-area .img-main::before {left: -44px; height: 33px; background-image: url(../../../images/popup/vip_levelup/img_coins_left.png);} .layerpopup-vip-levelup .layer-top-area .img-main::after {right: -40px; height: 34px; background-image: url(../../../images/popup/vip_levelup/img_coins_right.png);} .layerpopup-vip-levelup .layer-top-area .img-main .img {position: relative; display: block;} .layerpopup-vip-levelup .layer-top-area .img-main .img::before {content: ''; display: inline-block; z-index: -1; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 176px; height: 27px; background: url(../../../images/popup/vip_levelup/bg_shadow.png) center no-repeat; background-size: cover;} .layerpopup-vip-levelup .layer-top-area .img-main img {width: auto; height: 88px;} /* layerpopup (upsell-unavailable) */ .layerpopup-upsell-unavailable .layer-top-area .img-main {width: 230px; margin-top: -60px;} /* layerpopup (doubleupoint) */ .layerpopup-full-common.layerpopup-doubleupoint .layer-wrapper {position: absolute; right: 0; width: 384px;} .layerpopup-full-common.layerpopup-doubleupoint .button-layerpopup-close {right: 16px; top: 16px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-top-comm {display: flex !important; opacity: 0; animation: fadeInEffect 1s 0s forwards;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner {position: relative; height: 252px; background: url(../../../images/popup/doubleupoint/img_top_banner.jpg) 0 0 no-repeat; background-size: cover;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box {display: flex; flex-direction: column; z-index: 1; position: absolute; left: 0; top: 0; height: 100%; padding: 25px 25px 0; box-sizing: border-box;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box > * {margin-bottom: 10px;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box > *:last-child {margin-bottom: 0 !important;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .title {color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 40px; line-height: .9;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .desc {color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 12px; line-height: 1.4;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .desc .bold {color: #fff47a; font-family: var(--ft-family_Poppins-600);} .layerpopup-full-common.layerpopup-doubleupoint .point-area-comm .point-title {flex-direction: column; text-align: center;} .layerpopup-full-common.layerpopup-doubleupoint .point-area-comm .point-title .title {margin-right: 0; margin-bottom: 10px;} .layerpopup-full-common.layerpopup-doubleupoint .reward-area {display: flex; justify-content: center; padding: 25px 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item:last-child {margin-bottom: 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap {display: flex; justify-content: center; align-items: center; width: 105px; height: 105px; background-image: url(../../../images/popup/doubleupoint/sp_level_gauge02.png?V=2); background-repeat: no-repeat; background-position: 0 0; background-size: cover;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm {width: 55px; height: 55px; margin-top: -2px;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm .num {line-height: 55px; font-size: 17px;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap {display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; /* width: calc(100% - 115px); */ width: 219px; height: 121px; margin-left: 10px; box-sizing: border-box; background-image: url(../../../images/popup/doubleupoint/bg_reward_box.png); background-repeat: no-repeat; background-position: 0 0; background-size: cover;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap > * {height: 50%;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box {display: flex; justify-content: center; align-items: center; width: calc(100% - 8px); padding-left: 8px; box-sizing: border-box;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box .set {display: flex; flex-direction: column; align-items: center; position: relative; width: 45px; height: 45px; padding-top: 2px; margin-right: 5px; border-radius: 9px; border: 2px solid #6D2EFA; background: #250078; box-sizing: border-box;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box .set:last-child {margin-right: 0 !important;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set img {width: 90%;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area {display: flex; justify-content: center; position: absolute; left: 0; bottom: 3px; width: 100%;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area .txt {letter-spacing: .1px; color: #FFF47A; font-family: var(--ft-family_Poppins-500); font-size: 10px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-area {display: flex; align-items: center;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim {width: 130px; height: 40px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-front {height: 37px; border-radius: 20px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back {top: 3px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner {left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 20px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {left: 2px; width: calc(100% - 4px); height: calc(50% - 2px);} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before {top: 2px; border-radius: 170px 170px 0 0;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {bottom: 2px; border-radius: 0 0 170px 170px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt {font-size: 22px;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 2px; -moz-text-stroke-width: 2px; -ms-text-stroke-width: 2px; text-stroke-width: 2px;} .layerpopup-full-common.layerpopup-doubleupoint .claimed-text {color: #6D2EFA; font-family: var(--ft-family_Poppins-700); font-size: 22px;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item[class*=lock] .level-wrap {background-position-y: bottom;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .reward-wrap {background-image: url(../../../images/popup/doubleupoint/bg_reward_box-unlock.png);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .reward-wrap::after {content: ""; display: inline-block; position: absolute; right: -8px; top: -8px; width: 30px; height: 37px; background: url(../../../images/popup/doubleupoint/icon_unlock.png) 0 0 no-repeat; background-size: contain;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim {cursor: pointer; pointer-events: none;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .bg-back {background: linear-gradient(to bottom, #323232 91.28%, #8D8D8D 122.67%); } .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .bg-front {background: linear-gradient(to bottom, #AAAAAA 0%, #6E6E6E 100%);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .front-inner {background: linear-gradient(to bottom, #8F8F8F 0%, #363636 100%);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .front-inner::before {background: linear-gradient(to bottom, #C2C2C2 38.5% , rgba(255, 255, 255, 0.3) 100%);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .front-inner::after {background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, #414141 100%);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .txt-area .txt {color: #CFCFCF;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .btn-claim .txt-area .txt:nth-child(1) {-webkit-text-stroke-color: #555; -moz-text-stroke-color: #555; -ms-text-stroke-color: #555; text-stroke-color: #555;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.lock .level-wrap .icon-level-comm::before {background-image: url(../../../images/common/icons/bg_icon_level-off.png);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.lock .level-wrap .icon-level-comm .num {color: #3F3F3F;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.lock .reward-wrap {background-image: url(../../../images/popup/doubleupoint/bg_reward_box-lock.png);} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.lock .set-box {display: none;} /* layerpopup (promotion-login-bonus) */ .layerpopup-login-bonus .layer-top-area .img-main {width: 330px; margin-top: -16px; margin-left: 10px;} /* layerpopup (promotion-doubleupoint) - 사용 안함 */ .layerpopup-promotion-doubleupoint .layer-inner {padding-top: 35px;} .layerpopup-promotion-doubleupoint .layer-header .main-tit {font-size: 30px;} /* layerpopup (promotion-doubleupoint-toast) - 사용 안함 */ .layerpopup-promotion-doubleupoint-toast .layer-wrapper {width: 550px; margin-top: 42px;} .layerpopup-promotion-doubleupoint-toast .layer-inner {padding-left: 0; padding-right: 0;} .layerpopup-promotion-doubleupoint-toast .layer-top-area {margin-top: -84px;} .layerpopup-promotion-doubleupoint-toast .layer-top-area .img-main img {width: 365px;} .layerpopup-promotion-doubleupoint-toast .layer-header {margin-top: -25px;} .layerpopup-promotion-doubleupoint-toast .layer-header .main-tit {font-family: var(--ft-family_Poppins-800);} .layerpopup-promotion-doubleupoint-toast .layer-header .sub-tit.small-txt, .layerpopup-promotion-doubleupoint-toast .layer-contents .notice {font-family: var(--ft-family_Poppins-300); font-size: 20px;} .layerpopup-promotion-doubleupoint-toast .layer-header .sub-tit.small-txt {margin-top: 10px; line-height: 1.3;} .layerpopup-promotion-doubleupoint-toast .layer-footer {margin-top: 10px;} .layerpopup-promotion-doubleupoint-toast .layer-footer .checkbox-area {margin-top: 10px; color: #3eb5fe; font-family: var(--ft-family_Poppins-400); font-size: 20px; text-align: center;} .layerpopup-promotion-doubleupoint-toast .layer-footer .checkbox-area input[type=checkbox] + label {display: flex; justify-content: center; align-items: center; cursor: pointer;} .layerpopup-promotion-doubleupoint-toast .layer-footer .checkbox-area input[type=checkbox] + label .icon {position: relative; width: 20px; height: 20px; margin-right: 7.5px; border: 1px solid #3eb5fe; box-sizing: border-box; border-radius: 2px;} .layerpopup-promotion-doubleupoint-toast .layer-footer .checkbox-area input[type=checkbox] + label .icon::before {content: ""; display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; background: url(../../../images/common/icons/icon_checkbox_skyblue.png) center no-repeat; background-size: 12px;} .layerpopup-promotion-doubleupoint-toast .layer-footer .checkbox-area input[type=checkbox]:checked + label .icon::before {display: block;} /* layerpopup (promotion-benefit-guide) */ .layerpopup-promotion-benefit-guide .layer-top-area .img-main {width: 300px; margin-top: -93px;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area {margin-top: 10px; color: #1398FF; font-family: var(--ft-family_Poppins-400); font-size: 16px; text-align: center;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label {display: flex; justify-content: center; align-items: center; cursor: pointer;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon {position: relative; width: 15px; height: 15px; margin-right: 6px; border: 1px solid #1398FF; box-sizing: border-box; border-radius: 1px;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon::before {content: ""; display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' fill='none'%3E%3Cpath d='M1 4L2.90476 6L7 1' stroke='%231398FF' stroke-width='1.17647' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox]:checked + label .icon::before {display: block;} /* layerpopup (layerpopup-webstore-voucher) */ .layerpopup-webstore-voucher .layer-wrapper {overflow-x: hidden;} .layerpopup-webstore-voucher .layer-header .main-tit {line-height: .95;} .layerpopup-webstore-voucher .layer-header .main-tit > * {display: block; font-family: var(--ft-family_Poppins-700) !important; font-size: 60px;} .layerpopup-webstore-voucher .layer-header .main-tit .bold {margin-bottom: 6px; font-size: 40px;} .layerpopup-webstore-voucher .layer-header .sub-tit, .layerpopup-webstore-voucher .layer-header .sub-tit * {font-family: var(--ft-family_Poppins-600) !important;} .layerpopup-webstore-voucher .layer-header .sub-tit {font-size: 20px; line-height: 1;} .layerpopup-webstore-voucher .layer-contents {align-items: center; margin-top: -10px; margin-bottom: 20px;} .layerpopup-webstore-voucher .img-area {margin-bottom: 0 !important;} .layerpopup-webstore-voucher .img-area::before {content: ""; display: inline-block; z-index: -1; position: absolute; left: 0; top: 50%; transform: translateY(-60%); width: 100%; height: 344px; background: url(../../../images/popup/webstore_voucher/bg_coupon.png) center bottom no-repeat; background-size: contain;} .layerpopup-webstore-voucher .img-area .coupon {display: flex; justify-content: center; align-items: center; position: relative; width: 339.8px; height: 195.4px;} .layerpopup-webstore-voucher .img-area .coupon::before, .layerpopup-webstore-voucher .img-area .coupon::after {content: ""; display: inline-block; position: absolute; left: -1px; top: 0; width: 100%; height: 100%; background-size: cover; animation: blinkEffect .6s infinite;} .layerpopup-webstore-voucher .img-area .coupon::before {background-image: url(../../../images/popup/webstore_voucher/coupon_light.png); animation-delay: 0s;} .layerpopup-webstore-voucher .img-area .coupon::after {background-image: url(../../../images/popup/webstore_voucher/coupon_light_02.png); animation-delay: .3s;} .layerpopup-webstore-voucher .img-area .coupon img {width: 323.6px; margin-top: 10px; margin-left: -1px;} .layerpopup-webstore-voucher .content {margin: 5px 0 12px; color: #fff !important;} .layerpopup-webstore-voucher .timer-area {display: flex; justify-content: center; align-items: center; position: relative; width: 204.6px; height: 40.5px; padding: 0 19.9px 0 39.8px; background: #560083; border: 3px solid #FFBC2C; border-radius: 30px; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 24.3px; text-align: center; white-space: nowrap; box-sizing: border-box; box-shadow: 0 2.941px 3.529px 0 rgba(0, 0, 0, 0.35);} .layerpopup-webstore-voucher .timer-area::before {content: ""; position: absolute; left: -27px; top: 50%; transform: translateY(-50%); width: 56.7px; height: 63.45px; background: url(../../../images/common/icons/icon_clock.png) 0 0 no-repeat; background-size: cover;} .layerpopup-webstore-voucher .timer-area .timger {letter-spacing: .5px;} /* layerpopup (layerpopup-promo-top10-purchase) */ .layerpopup-promo-top10-purchase .layer-wrapper {background-color: #4A1203; border-color: #F4BD1C;} .layerpopup-promo-top10-purchase .layer-header .main-tit {color: #FFC12D;} .layerpopup-promo-top10-purchase .layer-contents .content {color: #fff;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] {padding: 0 !important; background: #671105; border: 2px solid #982514; border-radius: 12px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li {display: flex; justify-content: center; align-items: center; height: 40px; border-bottom: 1px solid #982514; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 20px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li:last-child {justify-self: center; border-bottom: 0; font-size: 14px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon {margin-right: 4px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon img {width: 30px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .tit {width: 105px;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .cont {color: #FFC12D;} .layerpopup-promo-top10-purchase .layer-contents .notice {color: #fff; line-height: 1.7; font-size: 12px;} /* layerpopup (layerpopup-promo-top20-purchase) */ .layerpopup-promo-top20-purchase .layer-wrapper {width: 520px;} .layerpopup-promo-top20-purchase .layer-header .main-tit {font-family: var(--ft-family_Poppins-500);} .layerpopup-promo-top20-purchase .layer-header .main-tit .bold {display: block; font-family: var(--ft-family_Poppins-700) !important;} .layerpopup-promo-top20-purchase .layer-contents {text-align: center;} .layerpopup-promo-top20-purchase .layer-contents * {color: #fff; font-family: var(--ft-family_Poppins-300);} .layerpopup-promo-top20-purchase .layer-contents .cont {line-height: 1.2; font-size: 16px;} .layerpopup-promo-top20-purchase .layer-contents .notice {font-size: 14px; line-height: 1.3;} .layerpopup-promo-top20-purchase .layer-contents .cont + .notice {color: #BB84FF;} .layerpopup-promo-top20-purchase .layer-contents .table {width: 100%; box-sizing: border-box;} .layerpopup-promo-top20-purchase .layer-contents .table > img {width: 100%;} /* * [해상도 1400px] * - 컨텐츠 inner: 1400px 기준 * - 1920 기준 / DPR 1 / 16.6 */ @media all and (max-width:1400px) { /* layerpopup (profile) : 개편 UI */ .layerpopup-side-right.layerpopup-profile .layer-inner {width: 23.229vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-profile .profile-top {position: relative; height: 3.146vw; background: #3c008f;} .layerpopup-profile .profile-top .title {position: absolute; left: 1.055vw; top: 60.18%; transform: translateY(-50%); color: #7556ff; font-family: var(--ft-family_Poppins-700); font-size: 1.68vw; line-height: 1.514vw; text-transform: uppercase;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close {top: 1.172vw; right: 1.172vw; width: 1.443vw; height: 1.443vw;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::after {display: none;} .layerpopup-profile .profile-card {position: relative; width: 21.665vw; height: 11.672vw; margin: 0.646vw auto 0; border-radius: 0.689vw; background: linear-gradient(180deg, #5702ca 0%, #8125ff 100%); box-shadow: 0 0.215vw 0.258vw rgba(0, 7, 85, .44), inset 0 0 0 0.022vw #ea8900, inset 0 0 0 0.086vw #fffbd3, inset 0 0 0 0.108vw #ff8306;} .layerpopup-profile .profile-card__user {position: absolute; left: 1.335vw; right: 0.833vw; top: 1.377vw; display: flex; align-items: center; gap: 0.625vw;} .layerpopup-profile .profile-card__user .thumb {position: relative; flex: 0 0 auto; width: 4.914vw; height: 4.914vw;} .layerpopup-profile .profile-card__user .thumb::before {content: ""; position: absolute; left: 0.16vw; top: 0.16vw; width: 4.593vw; height: 4.593vw; border-radius: 50%; background: linear-gradient(180deg, #310560 0%, #440096 100%);} .layerpopup-profile .profile-card__user .thumb img {position: relative; display: block; width: 4.593vw; height: 4.593vw; margin: 0.16vw; border-radius: 50%; object-fit: cover;} .layerpopup-profile .profile-card__user .thumb::after {content: ""; position: absolute; inset: 0; padding: 0.284vw; border-radius: 50%; background: linear-gradient(180deg, #6b0fe5 0%, #7619f4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .layerpopup-profile .profile-card__user .info {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.348vw;} .layerpopup-profile .profile-card__user .name {font-family: var(--ft-family_NotoSans-700); font-size: 1.077vw; line-height: 1; letter-spacing: -0.021vw; white-space: nowrap; max-width: 100%; padding-bottom: 0.2em; overflow: hidden; text-overflow: ellipsis;} .layerpopup-profile .profile-card__user .id {display: flex; align-items: center; gap: 0.417vw;} .layerpopup-profile .profile-card__user .id .label {font-family: var(--ft-family_NotoSans-700); font-size: 0.861vw; line-height: 1; letter-spacing: -0.017vw;} .layerpopup-profile .profile-card__user .id .num {min-width: 5.33vw; height: 1.421vw; padding: 0 0.625vw; box-sizing: border-box; background: rgba(74, 0, 173, .7); border-radius: 2.292vw; color: rgba(255, 255, 255, .7); font-family: var(--ft-family_NotoSans-600), var(--ft-family_NotoSans-700), sans-serif; font-size: 0.861vw; line-height: 1.421vw; text-align: center;} .layerpopup-profile .profile-card__user .id .label {background-image: linear-gradient(180deg, #f6cff5 0%, #9afef6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .layerpopup-profile .profile-card__stat {position: absolute; left: 50%; top: 7.128vw; transform: translateX(-50%); width: 20.932vw; height: 4.177vw; display: flex; align-items: center; justify-content: center; gap: 0.194vw; background: rgba(88, 3, 204, .05); border-radius: 0.431vw; box-shadow: 0 0.043vw 0.073vw 0.26vw rgba(104, 16, 223, .64), inset 0 0.065vw 0.028vw 0.052vw rgba(255, 255, 255, .25), inset 0 0 0.646vw 0.104vw rgba(255, 255, 255, .19);} .layerpopup-profile .profile-card__stat .stat {flex: 0 0 auto; display: flex; align-items: center; width: 10.153vw; height: 2.433vw;} .layerpopup-profile .profile-card__stat .divider {flex: 0 0 auto; width: 0.129vw; height: 2.67vw; background: #9b71ff; opacity: .66; border-radius: 0.043vw;} .layerpopup-profile .profile-card__stat .ico {flex: 0 0 auto; display: block;} .layerpopup-profile .profile-card__stat .txt {display: flex; flex-direction: column; gap: 0.236vw;} .layerpopup-profile .profile-card__stat .label {color: #cb88ff; font-family: var(--ft-family_NotoSansDisplay-800i); font-style: italic; font-size: 0.689vw; line-height: 1; letter-spacing: -0.014vw;} .layerpopup-profile .profile-card__stat .value {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 0.776vw; line-height: 1; white-space: nowrap;} .layerpopup-profile .profile-card__stat .value .cur {color: #ffea00; font-size: inherit; font-family: inherit;} .layerpopup-profile .stat--lv .ico {width: 2.629vw; height: 1.904vw; margin-left: 0.577vw; filter: drop-shadow(0 0.156vw 0.043vw #5305bd);} .layerpopup-profile .stat--lv .ico img {width: 100%; height: 100%; object-fit: contain;} .layerpopup-profile .stat--lv .txt {margin-left: 0.421vw;} .layerpopup-profile .stat--point .ico {width: 2.209vw; height: 2.209vw; margin-left: 0.446vw; background: url(../../../images/store/common/icon_vippoint.png) 50% 50% / contain no-repeat; filter: drop-shadow(0 0.208vw 0.043vw #5305bd);} .layerpopup-profile .stat--point .txt {margin-left: 0.317vw;} .layerpopup-profile .stat--point .value {font-size: 0.862vw;} .layerpopup-profile .profile-bottom {margin: auto 0 3.643vw; display: flex; flex-direction: column; align-items: center; gap: 2.108vw;} .layerpopup-profile .btn-backtogame {position: relative; width: 15.748vw; height: 3.704vw; padding: 0; filter: drop-shadow(0 0.12vw 0.09vw rgba(41, 0, 91, .42));} .layerpopup-profile .btn-backtogame .btn {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3.704vw; border-radius: 1.21vw; background: linear-gradient(180deg, #23c5ff 18.241%, #436bff 40.832%, #3e36d2 89.242%); box-shadow: inset 0 -0.11vw 0.073vw rgba(18, 5, 112, .28), inset 0 -0.073vw 0.146vw #1c096d, inset 0 0 0.3vw #006fff;} .layerpopup-profile .btn-backtogame .glow {position: absolute; left: 1.53%; right: 1.72%; top: calc(50% - 0.076vw); transform: translateY(-50%); height: 3.312vw; border-radius: 1.028vw; background: linear-gradient(180deg, #00eeff 0%, #4681ff 38.462%, #401cc2 90.385%, #3c2bc4 100%); box-shadow: inset 0 -0.06vw 0.037vw rgba(76, 67, 247, .85); filter: blur(0.036vw);} .layerpopup-profile .btn-backtogame .shine {position: absolute; left: 2.29%; right: 2.49%; top: calc(50% - 0.166vw); transform: translateY(-50%); height: 2.951vw; border-radius: 0.907vw; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 30.769%); opacity: .85; filter: blur(0.015vw);} .layerpopup-profile .btn-backtogame .txt {position: absolute; left: 8.03%; right: 8.08%; top: calc(50% - 0.108vw); transform: translateY(-50%); height: 2.818vw; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800); font-size: 1.686vw; line-height: 1; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #99dfff 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.037vw 0 #0084ff) drop-shadow(0 0.11vw 0.066vw #000b89) drop-shadow(0 0.073vw 0.289vw #1341c7);} .layerpopup-profile .btn-logout {width: 6.293vw; height: 2.138vw; padding: 0; color: #886dff; font-family: var(--ft-family_NotoSansDisplay-700); font-size: 1.506vw; line-height: 2.117vw; letter-spacing: -0.03vw; text-transform: uppercase; text-decoration: underline;} /* layerpopup (common) */ [class*=layerpopup-common] .layer-wrapper {width: 25vw; border-width: 0.181vw; border-radius: 1.084vw;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {top: 0.904vw; right: 0.904vw; width: 1.807vw; height: 1.807vw;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle {top: -0.915vw; right: -0.915vw; width: 3.048vw; height: 3.048vw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'%3E%3Ccircle cx='26.5737' cy='26.5739' r='25.3659' fill='%23240075' stroke='%231398FF' stroke-width='2.4158'/%3E%3Crect x='10.871' y='39.458' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(-45 10.871 39.458)' fill='white'/%3E%3Crect x='13.6895' y='10.8711' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(45 13.6895 10.8711)' fill='white'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::after {display: none;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::after {width: 2.530vw; height: 0.241vw; border-radius: 0.904vw;} [class*=layerpopup-common] .layer-inner {padding: 1.807vw 0;} [class*=layerpopup-common] .layer-inner > *, [class*=layerpopup-common] .layer-contents > * {margin-bottom: 0.964vw;} [class*=layerpopup-common] .layer-header {margin-bottom: 0.602vw;} [class*=layerpopup-common] .layer-header .main-tit {font-size: 2.169vw;} [class*=layerpopup-common] .layer-header .sub-tit {margin-top: 0.456vw; font-size: 0.964vw;} [class*=layerpopup-common] .layer-header .sub-tit .point-img {width: 1.289vw; height: 1.289vw; margin-right: 0.241vw; vertical-align: -0.241vw;} [class*=layerpopup-common] .layer-contents {padding: 0 1.205vw;} .layerpopup-vip-levelup .layer-contents {padding: 0 0.362vw;} [class*=layerpopup-common] .layer-contents.inner-pd, [class*=layerpopup-common] .layer-contents .inner-pd {width: calc(100% - 1.205vw) !important; margin: 0 auto 0.964vw;} .layerpopup-vip-open .layer-contents.inner-pd, .layerpopup-vip-levelup .layer-contents.inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd, .layerpopup-login-bonus .layer-contents .inner-pd, .layerpopup-login-bonus .layer-contents .inner-pd, .layerpopup-login-bonus .layer-contents .inner-pd, .layerpopup-vip-levelup .layer-contents .inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd {width: 20.124vw !important;} [class*=layerpopup-common] .layer-contents .content {font-size: 0.964vw;} [class*=layerpopup-common] .layer-contents .infobox {padding: 0 0.904vw; margin-bottom: 0.843vw; border-radius: 0.482vw; border-width: 0.120vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area {height: 3.663vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area > * {margin-right: 0.361vw;;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-img {width: 1.832vw; height: 1.891vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-amount {max-width: calc(100% - 1.807vw); font-size: 1.952vw; background-image: linear-gradient(180deg, #ffee32 34.066%, #ffb200 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0.9px rgba(83, 0, 35, .7)) drop-shadow(0 1px 0 #9e2205);} [class*=layerpopup-common] .layer-contents .infobox.type-list {padding: 0.904vw 1.205vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list > * {margin-bottom: 0.602vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .title {font-size: 0.964vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item {padding-left: 0.904vw; margin-bottom: 0.422vw; font-size: 0.843vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item::before {width: 0.301vw; height: 0.301vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item {flex: 0 0 calc(20% - 0.723vw); height: 3.614vw; padding: 0.120vw 0; margin-right: 0.843vw; margin-bottom: 0.602vw; gap: 0.120vw; border-width: 0.120vw; border-radius: 0.723vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon {margin-top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon img {top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .cnt {font-size: 0.843vw;} [class*=layerpopup-common] .layer-contents .notice {font-size: 0.843vw;} [class*=layerpopup-common] .layer-contents .circle-gauge {margin-top: 0.301vw;} [class*=layerpopup-common] .layer-footer .btn-complete {width: 12.651vw; height: 2.896vw;} .layerpopup-payment-complete-new .layer-footer .btn-complete, .layerpopup-login-reward .layer-footer .btn-complete, .layerpopup-login-bonus .layer-footer .btn-complete, .layerpopup-webstore-voucher .layer-footer .btn-complete, .layerpopup-account-not-found .layer-footer .btn-complete, .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 13.729vw; height: 3.053vw;} .layerpopup-login-bonus .layer-footer .btn-complete {width: 10.916vw; height: 2.427vw;} .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 12.899vw; height: 2.867vw;} .layerpopup-vip-open .layer-footer .btn-complete, .layerpopup-vip-levelup .layer-footer .btn-complete {width: 11.657vw; height: 2.594vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back, [class*=layerpopup-common] .layer-footer .btn-complete .bg-front {height: 91.667%; border-radius: 1.807vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back {top: 6.25%;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner {left: 0.120vw; top: 0.120vw; width: calc(100% - 0.241vw); height: calc(100% - 0.241vw); border-radius: 1.807vw;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before, [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {left: 0.120vw; width: calc(100% - 0.241vw); height: calc(50% - 0.120vw);} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before {top: 0.120vw; border-radius: 10.241vw 10.241vw 0 0;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {bottom: 0.120vw; border-radius: 0 0 10.241vw 10.241vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt {font-size: 1.446vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.120vw; -moz-text-stroke-width: 0.120vw; -ms-text-stroke-width: 0.120vw; text-stroke-width: 0.120vw;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-top-area {border-radius: 1.084vw 1.084vw 0 0;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-inner {padding-top: 0; border-radius: 1.084vw;} [class*=layerpopup-common] .layer-wrapper.half-bg {width: 23.494vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-top-area {height: 12.048vw; border-width: 0.181vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-inner {padding-top: 1.506vw; border-radius: 0 0 1.084vw 1.084vw;} [class*=layerpopup-common] .layer-wrapper.w-slim {width: 19.88vw;} [class*=layerpopup-common] .layer-wrapper.w-slim .layer-contents .content {font-size: 0.843vw;} /* layerpopup (common) : vip */ [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper {width: 25.901vw;} /* layerpopup-full (common) */ [class*=layerpopup-full-common] .button-layerpopup-close {top: 1.205vw; right: 1.205vw; width: 1.566vw; height: 1.566vw;} [class*=layerpopup-full-common] .button-layerpopup-close::before, [class*=layerpopup-full-common] .button-layerpopup-close::after {width: 2.169vw; height: 0.241vw; border-radius: 0.904vw;} /* layerpopup (side) */ [class*=layerpopup-side] .layer-inner {width: 23.133vw;} [class*=layerpopup-side] .button-layerpopup-close {top: 1.205vw; width: 1.566vw; height: 1.566vw;} [class*=layerpopup-side] .button-layerpopup-close::before, [class*=layerpopup-side] .button-layerpopup-close::after {width: 2.169vw; height: 0.241vw; border-radius: 0.904vw;} [class*=layerpopup-side] * {font-size: 1.446vw;} .layerpopup-side-left .button-layerpopup-close {left: 1.205vw;} .layerpopup-side-right .button-layerpopup-close {right: 1.205vw;} /* layerpopup (profile) */ .layerpopup-profile .profile-area .user-info {padding: 2.108vw 0.904vw 1.205vw;} .layerpopup-profile .profile-area .user-info > * {margin-bottom: 0.602vw;} .layerpopup-profile .profile-area .user-info .thumb {width: 2.711vw; height: 2.711vw;} .layerpopup-profile .profile-area .user-info .name {font-size: 1.325vw;} .layerpopup-profile .profile-area .user-info .id {min-width: 6.325vw; height: 1.205vw; padding: 0 0.602vw; border-radius: 0.904vw; font-size: 0.723vw;} .layerpopup-profile .profile-area .chip-info, .layerpopup-profile .profile-area .vip-info {min-height: 4.217vw; padding: 1.205vw 0.904vw;} .layerpopup-profile .profile-area .chip-info .amount {padding-left: 2.229vw; font-size: 1.807vw;} .layerpopup-profile .profile-area .chip-info .amount::before {width: 1.807vw; height: 1.988vw; margin-top: 0.060vw;} .layerpopup-profile .profile-area .vip-info > * {margin-right: 1.506vw;} .layerpopup-profile .profile-area .vip-info .lv-name {font-size: 1.084vw;} .layerpopup-profile .profile-area .vip-info .card-img {margin-left: 0.301vw; width: 2.169vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar {min-width: 12.651vw; padding: 0 0.904vw 0 2.108vw; height: 1.205vw; border-radius: 0.904vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar::before {left: -0.301vw; width: 1.506vw; height: 1.506vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info, .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info * {font-size: 0.723vw;} .layerpopup-profile .bottom-area {padding: 1.205vw 0;} .layerpopup-profile .bottom-area .button-logout > .txt {font-size: 1.024vw;} /* layerpopup (layerpopup-login-modal) */ .layerpopup-login-modal .layer-wrapper {width: 45.783vw; height: 37.952vw; border-radius: 0.964vw;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close {right: 0.964vw; top: 0.964vw; width: 1.566vw; height: 1.566vw;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::before, .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::after {width: 2.169vw; height: 0.241vw;} /* layerpopup (login-prompt-comm) */ .layerpopup-login-prompt-comm .layer-top-area .img-main {width: 13.735vw; margin-top: -4.819vw;} /* layerpopup (login-prompt) */ .layerpopup-login-prompt .layer-top-area .img-main {width: 10.241vw; margin-top: -3.855vw; margin-bottom: 0.602vw;} .layerpopup-login-prompt .layer-header .main-tit {font-size: 1.325vw;} .layerpopup-login-prompt .layer-contents .notice:not(.cl-light-purple) {margin-bottom: 0.602vw; font-size: 0.964vw;} /* layerpopup (pw-reset-complete) */ .layerpopup-pw-reset-complete .layer-top-area .img-main {width: 13.614vw; margin-top: -3.855vw;} /* layerpopup (account-create-complete) */ .layerpopup-account-create-complete .layer-top-area .img-main {width: 12.048vw; margin-top: -3.614vw;} .layerpopup-account-create-complete .layer-header {margin-bottom: 0.904vw;} /* layerpopup (email-sent-complete) */ .layerpopup-email-sent-complete .layer-top-area .img-main {width: 19.277vw; margin-top: -5vw; margin-left: -0.904vw;} /* layerpopup (weblogin-blocked) */ .layerpopup-weblogin-blocked .layer-top-area .img-main {width: 10.964vw; margin-top: -3.916vw;} .layerpopup-weblogin-blocked .layer-contents .qr-img {width: 5.301vw;} /* layerpopup (account-not-found) */ .layerpopup-account-not-found .layer-inner {padding: 1.572vw 0 1.344vw;} .layerpopup-account-not-found .layer-header {margin-bottom: 0.457vw;} .layerpopup-account-not-found .layer-header .main-tit {font-size: 2.317vw;} .layerpopup-account-not-found .layer-contents {margin-bottom: 1.845vw;} .layerpopup-account-not-found .layer-contents .content {font-size: 1.098vw;} /* layerpopup (levelup-reward)*/ .layerpopup-levelup-reward .layer-contents {margin-bottom: 0.602vw !important;} /* layerpopup (payment-complete) */ .layerpopup-payment-complete .layer-contents .content {font-size: 0.975vw;} .layerpopup-login-reward .layer-contents .content {font-size: 1.097vw;} .layerpopup-login-bonus .layer-contents .content {font-size: 0.868vw;} .layerpopup-payment-complete .content-ui > * {margin-bottom: 0.964vw;} .layerpopup-payment-complete-new .layer-header, .layerpopup-login-reward .layer-header {margin-bottom: 1.807vw;} .layerpopup-payment-complete-levelup .layer-header {margin-bottom: 0.723vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm + .layer-header {margin-bottom: 1.084vw;} .layerpopup-payment-complete-new .layer-contents, .layerpopup-login-reward .layer-contents {margin-bottom: 1.566vw;} .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-header {margin-bottom: 0.482vw;} .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-contents {margin-bottom: 0.12vw;} .layerpopup-payment-complete-new .content-ui {margin-bottom: 1.386vw !important;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons {row-gap: 0.602vw;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons .item {margin-bottom: 0;} .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 8.229vw; height: 8.229vw; margin: 0 auto 0.723vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 3.227vw; letter-spacing: -0.065vw; -webkit-text-stroke-width: 0.307vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete {width: 10.976vw; height: 3.048vw; margin-right: 0.843vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete:last-child {margin-right: 0 !important;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete .txt-area .txt {font-size: 1.217vw;} /* layerpopup (vip-open) */ .layerpopup-vip-open .layer-top-area .img-main {width: 12.048vw; margin-top: -2.108vw;} .layerpopup-vip-open .layer-contents .item-list .item {flex: 1 0 calc(50% - 0.512vw); height: 10.843vw; padding-top: 0.422vw; margin: 0 1.023vw 1.023vw 0; border-width: 0.120vw; border-radius: 0.723vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area {top: -0.301vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .title {font-size: 1.205vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .description {margin-top: 0.301vw; font-size: 0.723vw;} /* layerpopup (vip-levelup) */ .layerpopup-vip-levelup .layer-top-area .img-main {padding-bottom: 0.602vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before, .layerpopup-vip-levelup .layer-top-area .img-main::after {top: 3.735vw; width: 4.578vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before {left: -2.651vw; height: 1.988vw;} .layerpopup-vip-levelup .layer-top-area .img-main::after {right: -2.41vw; height: 2.048vw;} .layerpopup-vip-levelup .layer-top-area .img-main .img::before {bottom: -0.723vw; width: 10.602vw; height: 1.627vw;} .layerpopup-vip-levelup .layer-top-area .img-main img {height: 5.301vw;} /* layerpopup (upsell-unavailable) */ .layerpopup-upsell-unavailable .layer-top-area .img-main {width: 13.855vw; margin-top: -3.614vw;} /* 공통 : 레벨 다이아 + 더블유포인트 게이지 */ .lv-diamond-comm {position: relative; display: block; width: 100%; height: 100%;} .lv-diamond-comm::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../../../images/store/common/img_lv_bg.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.181vw 0.106vw rgba(55, 3, 120, .58));} .lv-diamond-comm > span {position: absolute; left: 0; top: -3.33%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); font-size: 1.107vw; line-height: 0.496vw; letter-spacing: -0.022vw; text-align: center; text-transform: uppercase; -webkit-text-stroke: 0.105vw rgba(255, 255, 0, .5); background-image: none;} .lv-diamond-comm > span::after {content: attr(data-lv); position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #963800 0%, #5f2103 83.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .lv-diamond-comm.is-off::before {background-image: url(../../../images/store/common/img_lv_bg_off.png);} .lv-diamond-comm.is-off > span {font-family: var(--ft-family_NotoSans-800); font-size: 1.045vw; letter-spacing: -0.021vw; -webkit-text-stroke: 0;} .lv-diamond-comm.is-off > span::after {background-image: linear-gradient(180deg, #fff 0%, #e7c7ff 83.17%);} .point-gauge {position: relative; width: 22.765vw; height: 7.167vw;} .layerpopup-payment-complete .point-gauge, .layerpopup-login-reward .point-gauge {transform: scale(0.884); transform-origin: 50% 0; margin: 0 calc(50% - 11.3825vw) 0.797vw;} .point-gauge > span {position: absolute;} .point-gauge__frame {left: 0; top: 1.201vw; width: 22.765vw; height: 4.688vw; background: url(../../../images/store/common/bg_point_gauge.svg?v=260916) 50% 50% / 100% 100% no-repeat;} .point-gauge__title {left: 5.333vw; top: 0.126vw; width: 12.078vw; height: 2.171vw; background: url(../../../images/store/common/img_gauge_title.png) 50% 50% / 100% 100% no-repeat;} .point-gauge__bar {left: 3.33vw; top: 2.529vw; width: 16.104vw; height: 1.981vw; border-radius: 0.211vw; background: linear-gradient(0deg, #3b1b8e 0%, #1b005e 100%);} .point-gauge__bar::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.148vw; border-radius: inherit; background: linear-gradient(270deg, #4f21c3 0%, #7706ce 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__track {left: 3.647vw; top: 2.846vw; width: 15.472vw; height: 1.349vw; border-radius: 0.126vw; overflow: hidden;} .point-gauge__fill {display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e3a138 1.44%, #ffff6b 7.21%, #f55f51 83.65%, #f475fe 100%); transition: width .3s; animation: pointGaugeFill 1s cubic-bezier(.22, .61, .36, 1) .25s backwards;} .point-gauge.is-max .point-gauge__fill {background: linear-gradient(180deg, #38c9e3 1.44%, #6bffcf 7.21%, #6756ff 83.65%, #7a75fe 100%);} .point-gauge .point-gauge__max {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); filter: drop-shadow(0 0.046em 0 #e82300) drop-shadow(0 0.12em 0.07em rgba(59, 0, 83, .8)); background-image: linear-gradient(180deg, #fff 34.07%, #ffef79 72.1%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 0.911vw; line-height: 1; text-align: center;} .point-gauge__level {left: 1.518vw; top: 2.108vw; width: 2.846vw; height: 2.846vw;} .point-gauge__reward {left: 18.492vw; top: 1.918vw; width: 2.732vw; height: 3.179vw; background: url(../../../images/store/common/icon_reward.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__badge {position: absolute; left: 1.511vw; top: -0.126vw; width: 1.56vw; height: 1.56vw; box-sizing: border-box; padding-bottom: 0.19vw; display: flex; align-items: center; justify-content: center; background: url(../../../images/store/common/icon_reddot.png) 50% 50% / 100% 100% no-repeat; color: #fff; font-family: var(--ft-family_NotoSans-800); font-size: 0.843vw; line-height: 1; text-align: center; text-shadow: 0 0.021vw 0 rgba(119, 0, 0, .26);} .point-gauge__panel {left: 50%; top: 4.363vw; transform: translateX(-50%); width: auto; height: 2.045vw; display: flex; align-items: center; justify-content: center; gap: 0.104vw; padding: 0 0.417vw; border-radius: 0 0 0.949vw 0.949vw; background: linear-gradient(0deg, #a446fb 0%, #5621c1 100%); box-shadow: 0 0.126vw 0.211vw rgba(46, 21, 101, .5);} .point-gauge__panel::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.042vw; border-radius: inherit; background: linear-gradient(0deg, #ee68fa 0%, #9b30ff 21%, #571cba 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__panel::before {content: ""; position: absolute; left: 0.169vw; right: 0.169vw; top: 0.148vw; bottom: 0.169vw; border-radius: 0.211vw 0.211vw 0.843vw 0.843vw; background: linear-gradient(0deg, #5704b4 9%, #110361 100%);} .point-gauge__icon {position: relative; flex: 0 0 auto; width: 1.602vw; height: 1.602vw; background: url(../../../images/store/common/icon_point.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__num {position: relative; flex: 0 0 auto; height: 1.307vw; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 0.97vw; line-height: 1; letter-spacing: -0.019vw; text-align: center; white-space: nowrap;} .point-gauge__num .cur {color: #ff0; font-family: inherit; font-size: inherit;} @keyframes pointGaugeFill { from {width: 0;} } .layerpopup-side-right.layerpopup-doubleupoint .layer-inner {display: flex; flex-direction: column; overflow: hidden; width: 23.229vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close {top: 1.042vw; right: 1.094vw; width: 2.188vw; height: 2.188vw;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::before {width: 2.188vw; height: 2.188vw;} .layerpopup-doubleupoint .dpoint-top {position: relative; flex: 0 0 auto; height: 16.454vw; background: url(../../../images/popup/doubleupoint/v2/img_top_banner.jpg) 50% 0 / 100% auto no-repeat;} .layerpopup-doubleupoint .dpoint-top::before {content: ""; position: absolute; left: 0; top: 12.002vw; width: 100%; height: 4.796vw; background: linear-gradient(180deg, rgba(43, 1, 96, 0) 0%, #260352 16.35%, rgba(43, 1, 96, .66) 65.87%, rgba(43, 1, 96, 0) 96.15%);} .layerpopup-doubleupoint .dpoint-top__txt {position: absolute; left: 2.539vw; top: 2.882vw; width: 12.604vw; height: 5.162vw; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 1.075vw; line-height: 1.377vw; letter-spacing: -0.022vw; -webkit-text-stroke: 0.116vw #bc339a; paint-order: stroke fill; text-shadow: 0 0.116vw 0 #84186a, 0 0.065vw 0.155vw rgba(199, 48, 50, .77);} .layerpopup-doubleupoint .dpoint-top .point-gauge {position: absolute; left: 0.232vw; top: 9.076vw;} .layerpopup-doubleupoint .layer-wrapper {overflow-x: hidden; overflow-y: auto; position: relative; flex: 1 1 auto; margin-top: -3.463vw; padding-top: 3.463vw; scrollbar-width: none; -ms-overflow-style: none;} .layerpopup-doubleupoint .layer-wrapper::-webkit-scrollbar {display: none;} .layerpopup-doubleupoint .reward-list > .item {position: relative; height: 7.313vw; padding: 0.248vw 0 0 6.345vw;} .layerpopup-doubleupoint .level-wrap {position: absolute; left: 1.742vw; top: 1.968vw; width: 2.822vw; height: 2.822vw;} .layerpopup-doubleupoint .level-wrap::before, .layerpopup-doubleupoint .level-wrap::after {content: ""; position: absolute; left: 50%; width: 0.487vw; height: 0.487vw; background: rgba(127, 34, 252, .5); border-radius: 0.086vw; transform: translateX(-50%) rotate(45deg);} .layerpopup-doubleupoint .level-wrap::before {top: -1.624vw;} .layerpopup-doubleupoint .level-wrap::after {top: 3.968vw;} .layerpopup-doubleupoint .reward-wrap {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0.487vw 0.5vw 0; position: relative; width: 15.615vw; height: 6.246vw; border-radius: 0.71vw; background: linear-gradient(180deg, #6007d8 0%, #8831ff 88.942%); box-shadow: 0 0.237vw 0.284vw rgba(55, 3, 120, .8), inset 0 0 0 0.024vw #ea8900, inset 0 0 0 0.118vw #fffbd3, inset 0 0 0 0.142vw #ff8306;} .layerpopup-doubleupoint .set-box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 3.549vw; gap: 0.142vw;} .layerpopup-doubleupoint .set-box .set {position: relative; flex: 0 0 auto; width: 3.549vw; height: 3.549vw; border-radius: 0.301vw; background: linear-gradient(180deg, #4c1bb5 0%, #681bd3 100%);} .layerpopup-doubleupoint .set-box .set img {position: absolute; left: 50%; top: 0.177vw; width: 2.200vw; height: 2.200vw; object-fit: contain; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt-area {position: absolute; left: 50%; top: 2.516vw; width: 1.986vw; height: 0.556vw; display: flex; align-items: center; justify-content: center; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 0.795vw; line-height: 1; text-align: center; white-space: nowrap;} .layerpopup-doubleupoint .btn-area {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 8.84vw; height: 2.172vw;} .layerpopup-doubleupoint .btn-claim {position: relative; top: 0.416vw; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0.581vw; background: linear-gradient(180deg, #b4f84a 18.241%, #4ac535 40.832%, #056a0a 89.242%); box-shadow: 0 0.151vw 0.151vw rgba(55, 3, 120, .8), inset 0 -0.058vw 0.039vw rgba(0, 59, 1, .65), inset 0 -0.039vw 0.077vw #055017, inset 0 0 0.159vw #057407;} .layerpopup-doubleupoint .btn-claim::before {content: ""; position: absolute; left: 0.301vw; top: 0.129vw; width: 8.217vw; height: 0.688vw; border-radius: 2.151vw; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;} .layerpopup-doubleupoint .btn-claim .txt {position: absolute; left: 14.36%; right: 13.14%; top: 8.91%; bottom: 15.84%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800), var(--ft-family_NotoSans-800), sans-serif; font-size: 1.205vw; line-height: 1; letter-spacing: -0.024vw; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.026vw 0 #0d8800) drop-shadow(0 0.078vw 0.047vw #0a5b0c) drop-shadow(0 0.052vw 0.207vw rgba(5, 80, 23, .88));} .layerpopup-doubleupoint .btn-claim[disabled] {cursor: default;} .layerpopup-doubleupoint .btn-claim[disabled]::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 0.559vw; background: rgba(29, 0, 97, .6);} .layerpopup-doubleupoint .claimed-text {font-size: 1.075vw; letter-spacing: -0.043vw;} .layerpopup-doubleupoint .item.unlock .reward-wrap::after {content: ""; position: absolute; left: 14.411vw; top: 4.867vw; width: 1.463vw; height: 1.651vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.118vw 0.149vw rgba(40, 0, 88, .25));} .layerpopup-doubleupoint .item.lock .set-box, .layerpopup-doubleupoint .item.lock .btn-area {display: none;} .layerpopup-doubleupoint .item.lock .reward-wrap::after {content: ""; position: absolute; left: 50%; top: 50%; width: 1.467vw; height: 1.656vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.118vw 0.149vw rgba(40, 0, 88, .25)); transform: translate(-50%, -50%);} .layerpopup-doubleupoint .btn-top-renew {right: 1.042vw; bottom: 1.042vw; width: 2.813vw; height: 2.813vw;} /* layerpopup (doubleupoint) */ .layerpopup-full-common.layerpopup-doubleupoint .layer-wrapper {width: 23.133vw;} .layerpopup-full-common.layerpopup-doubleupoint .button-layerpopup-close {right: 0.964vw; top: 0.964vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner {height: 15.181vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box {padding: 1.506vw 1.506vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box > * {margin-bottom: 0.602vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .title {font-size: 2.41vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .desc {font-size: 0.723vw;} .layerpopup-full-common.layerpopup-doubleupoint .point-area-comm .point-title .title {margin-bottom: 0.602vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-area {padding: 1.506vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item {margin-bottom: 1.205vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap {width: 6.325vw; height: 6.325vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm {width: 3.313vw; height: 3.313vw; margin-top: -0.120vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm .num {line-height: 3.313vw; font-size: 1.024vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap { width: 13.193vw; height: 7.289vw; margin-left: 0.602vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box {width: calc(100% - 0.482vw); padding-left: 0.482vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box .set {width: 2.711vw; height: 2.711vw; padding-top: 0.120vw; margin-right: 0.301vw; border-radius: 0.542vw; border-width: 0.120vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area {bottom: 0.181vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area .txt {letter-spacing: 0.006vw; font-size: 0.602vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim {width: 7.831vw; height: 2.41vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-front {height: 2.229vw; border-radius: 1.205vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back {top: 0.181vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner {left: 0.060vw; top: 0.060vw; width: calc(100% - 0.120vw); height: calc(100% - 0.120vw); border-radius: 1.205vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {left: 0.120vw; width: calc(100% - 0.241vw); height: calc(50% - 0.120vw);} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before {top: 0.120vw; border-radius: 10.241vw 10.241vw 0 0;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {bottom: 0.120vw; border-radius: 0 0 10.241vw 10.241vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt {font-size: 1.325vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.120vw; -moz-text-stroke-width: 0.120vw; -ms-text-stroke-width: 0.120vw; text-stroke-width: 0.120vw;} .layerpopup-full-common.layerpopup-doubleupoint .claimed-text {font-size: 1.325vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .reward-wrap::after {right: -0.482vw; top: -0.482vw; width: 1.807vw; height: 2.229vw;} /* layerpopup (promotion-login-bonus) */ .layerpopup-login-bonus .layer-top-area .img-main {width: 19.88vw; margin-top: -0.964vw; margin-left: 0.602vw;} /* layerpopup (promotion-benefit-guide) */ .layerpopup-promotion-benefit-guide .layer-top-area .img-main {width: 18.072vw; margin-top: -5.602vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area {margin-top: 0.602vw; font-size: 0.964vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon {width: 0.904vw; height: 0.904vw; margin-right: 0.361vw; border-radius: 0.060vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon::before {background-size: 0.542vw;} /* layerpopup (layerpopup-webstore-voucher) */ .layerpopup-webstore-voucher .layer-header .main-tit > * {font-size: 3.614vw;} .layerpopup-webstore-voucher .layer-header .main-tit .bold {margin-bottom: 0.43vw; font-size: 2.41vw;} .layerpopup-webstore-voucher .layer-header .sub-tit {font-size: 1.205vw;} .layerpopup-webstore-voucher .layer-contents {margin-top: -0.602vw; margin-bottom: 1.205vw;} .layerpopup-webstore-voucher .img-area::before {height: 20.723vw;} .layerpopup-webstore-voucher .img-area .coupon {width: 20.47vw; height: 11.771vw;} .layerpopup-webstore-voucher .img-area .coupon::before, .layerpopup-webstore-voucher .img-area .coupon::after {left: -0.060vw;} .layerpopup-webstore-voucher .img-area .coupon img {width: 19.494vw; margin-top: 0.602vw; margin-left: -0.060vw;} .layerpopup-webstore-voucher .content {margin: 0.301vw 0 0.723vw;} .layerpopup-webstore-voucher .timer-area {width: 12.325vw; height: 2.44vw; padding: 0 1.199vw 0 2.398vw; border-width: 0.18vw; border-radius: 1.807vw; font-size: 1.464vw; box-shadow: 0 0.177vw 0.213vw 0 rgba(0, 0, 0, 0.35);} .layerpopup-webstore-voucher .timer-area::before {left: -1.627vw; width: 3.416vw; height: 3.822vw;} .layerpopup-webstore-voucher .timer-area .timger {letter-spacing: 0.030vw;} /* layerpopup (layerpopup-promo-top10-purchase) */ .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] {border-width: 0.120vw; border-radius: 0.723vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li {height: 2.41vw; border-width: 0.060vw; font-size: 1.205vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li:last-child {font-size: 0.843vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon {margin-right: 0.241vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon img {width: 1.807vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .tit {width: 6.325vw;} .layerpopup-promo-top10-purchase .layer-contents .notice {font-size: 0.723vw;} /* layerpopup (layerpopup-promo-top20-purchase) */ .layerpopup-promo-top20-purchase .layer-wrapper {width: 31.325vw;} .layerpopup-promo-top20-purchase .layer-contents .cont {font-size: 0.964vw;} .layerpopup-promo-top20-purchase .layer-contents .notice {font-size: 0.843vw;} } /* * [해상도 481px ~ 1024px] * 1. 769px ~ 1024px * - 낮은 해상도의 PC * - 태블릿 가로모드 * * 2. 481px ~ 768px] * - 모바일 가로모드 * - 태블릿 세로모드 * * 3. 768 기준 / DPR 2 / 7.68 * 4. 태블릿 ui 적용 (mode-tablet) * 5. 터치 기반 디바이스 ui 적용 (mode-touch): 태블릿+모바일 */ @media all and (max-width:1024px) { /* layerpopup (profile) : 개편 UI */ .layerpopup-side-right.layerpopup-profile .layer-inner {width: 50vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-profile .profile-top {position: relative; height: 6.771vw; background: #3c008f;} .layerpopup-profile .profile-top .title {position: absolute; left: 2.271vw; top: 60.18%; transform: translateY(-50%); color: #7556ff; font-family: var(--ft-family_Poppins-700); font-size: 3.615vw; line-height: 3.259vw; text-transform: uppercase;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close {top: 2.522vw; right: 2.522vw; width: 3.105vw; height: 3.105vw;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::before {left: 50%; top: 0; width: 100%; height: auto; aspect-ratio: 55.31 / 60.3; background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='55.3116' height='60.3013' viewBox='0 0 55.3116 60.3013' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='BTN_Close'%3E %3Cg id='Union' filter='url(%23filter0_d_6088_10627)'%3E %3Cmask id='path-1-outside-1_6088_10627' maskUnits='userSpaceOnUse' x='5.80115' y='6.53452' width='43' height='43' fill='black'%3E %3Crect fill='white' x='5.80115' y='6.53452' width='43' height='43'/%3E %3Cpath d='M11.6273 8.83448C12.027 8.43456 12.6748 8.4345 13.0745 8.83448L27.6351 23.4038L42.1898 8.84229C42.5895 8.44228 43.2382 8.44228 43.638 8.84229L47.1634 12.3706C47.5632 12.7706 47.5632 13.4188 47.1634 13.8189L32.6097 28.3804L47.1536 42.9331C47.5534 43.3331 47.5534 43.9823 47.1536 44.3823L43.6282 47.9107C43.2285 48.3106 42.5798 48.3105 42.18 47.9107L27.6351 33.3579L13.0843 47.9185C12.6846 48.318 12.0367 48.3181 11.637 47.9185L8.11066 44.3901C7.71088 43.9901 7.71088 43.3409 8.11066 42.9409L22.6614 28.3804L8.10089 13.811C7.70117 13.4111 7.70129 12.7628 8.10089 12.3628L11.6273 8.83448Z'/%3E %3C/mask%3E %3Cpath d='M11.6273 8.83448C12.027 8.43456 12.6748 8.4345 13.0745 8.83448L27.6351 23.4038L42.1898 8.84229C42.5895 8.44228 43.2382 8.44228 43.638 8.84229L47.1634 12.3706C47.5632 12.7706 47.5632 13.4188 47.1634 13.8189L32.6097 28.3804L47.1536 42.9331C47.5534 43.3331 47.5534 43.9823 47.1536 44.3823L43.6282 47.9107C43.2285 48.3106 42.5798 48.3105 42.18 47.9107L27.6351 33.3579L13.0843 47.9185C12.6846 48.318 12.0367 48.3181 11.637 47.9185L8.11066 44.3901C7.71088 43.9901 7.71088 43.3409 8.11066 42.9409L22.6614 28.3804L8.10089 13.811C7.70117 13.4111 7.70129 12.7628 8.10089 12.3628L11.6273 8.83448Z' fill='url(%23paint0_linear_6088_10627)'/%3E %3Cpath d='M11.6273 8.83448L10.9031 8.11053L10.903 8.1106L11.6273 8.83448ZM13.0745 8.83448L13.7988 8.11062L13.7988 8.11062L13.0745 8.83448ZM27.6351 23.4038L26.9108 24.1277L27.635 24.8524L28.3593 24.1277L27.6351 23.4038ZM42.1898 8.84229L42.914 9.5662L42.9141 9.56616L42.1898 8.84229ZM43.638 8.84229L44.3624 8.11852L44.3623 8.11843L43.638 8.84229ZM47.1634 12.3706L46.439 13.0944L46.4391 13.0945L47.1634 12.3706ZM47.1634 13.8189L47.8877 14.5427L47.8877 14.5427L47.1634 13.8189ZM32.6097 28.3804L31.8854 27.6565L31.1619 28.3804L31.8854 29.1042L32.6097 28.3804ZM47.1536 42.9331L46.4293 43.657L46.4293 43.657L47.1536 42.9331ZM47.1536 44.3823L46.4293 43.6585L46.4293 43.6586L47.1536 44.3823ZM43.6282 47.9107L44.3525 48.6345L44.3526 48.6344L43.6282 47.9107ZM42.18 47.9107L41.4557 48.6345L41.4559 48.6347L42.18 47.9107ZM27.6351 33.3579L28.3593 32.634L27.635 31.9093L26.9108 32.6341L27.6351 33.3579ZM13.0843 47.9185L13.8082 48.6427L13.8086 48.6423L13.0843 47.9185ZM11.637 47.9185L10.9127 48.6423L10.913 48.6426L11.637 47.9185ZM8.11066 44.3901L7.38637 45.114L7.38638 45.114L8.11066 44.3901ZM8.11066 42.9409L8.83495 43.6648L8.83498 43.6648L8.11066 42.9409ZM22.6614 28.3804L23.3858 29.1042L24.1091 28.3804L23.3857 27.6565L22.6614 28.3804ZM8.10089 13.811L8.82519 13.0872L8.82518 13.0872L8.10089 13.811ZM8.10089 12.3628L7.37662 11.6389L7.37643 11.6391L8.10089 12.3628ZM11.6273 8.83448L12.3515 9.55843C12.3524 9.55745 12.3527 9.55735 12.3523 9.55763C12.3519 9.55789 12.3514 9.55816 12.3509 9.55835C12.3501 9.5587 12.3501 9.55852 12.3509 9.55852C12.3518 9.55852 12.3518 9.5587 12.3509 9.55834C12.3504 9.55813 12.3499 9.55785 12.3495 9.55759C12.349 9.55728 12.3493 9.55737 12.3502 9.55835L13.0745 8.83448L13.7988 8.11062C12.999 7.31036 11.7027 7.31063 10.9031 8.11053L11.6273 8.83448ZM13.0745 8.83448L12.3502 9.55834L26.9108 24.1277L27.6351 23.4038L28.3594 22.68L13.7988 8.11062L13.0745 8.83448ZM27.6351 23.4038L28.3593 24.1277L42.914 9.5662L42.1898 8.84229L41.4655 8.11839L26.9108 22.6799L27.6351 23.4038ZM42.1898 8.84229L42.9141 9.56616H42.9137L43.638 8.84229L44.3623 8.11843C43.5626 7.31823 42.2652 7.31823 41.4655 8.11843L42.1898 8.84229ZM43.638 8.84229L42.9136 9.56607L46.439 13.0944L47.1634 12.3706L47.8878 11.6468L44.3624 8.11852L43.638 8.84229ZM47.1634 12.3706L46.4391 13.0945V13.095L47.1634 13.8189L47.8877 14.5427C48.6871 13.7429 48.6871 12.4466 47.8877 11.6467L47.1634 12.3706ZM47.1634 13.8189L46.4391 13.095L31.8854 27.6565L32.6097 28.3804L33.334 29.1043L47.8877 14.5427L47.1634 13.8189ZM32.6097 28.3804L31.8854 29.1042L46.4293 43.657L47.1536 42.9331L47.8779 42.2093L33.334 27.6565L32.6097 28.3804ZM47.1536 42.9331L46.4293 43.657C46.4302 43.6579 46.4303 43.6581 46.43 43.6577C46.4298 43.6573 46.4296 43.6569 46.4294 43.6565C46.4292 43.6559 46.4295 43.6564 46.4295 43.6577C46.4295 43.6591 46.4292 43.6595 46.4294 43.6589C46.4296 43.6586 46.4298 43.6581 46.43 43.6578C46.4303 43.6573 46.4302 43.6576 46.4293 43.6585L47.1536 44.3823L47.8779 45.1062C48.6773 44.3063 48.6773 43.0091 47.8779 42.2092L47.1536 42.9331ZM47.1536 44.3823L46.4293 43.6586L42.9039 47.1869L43.6282 47.9107L44.3526 48.6344L47.878 45.1061L47.1536 44.3823ZM43.6282 47.9107L42.904 47.1868L42.9041 47.1866L42.18 47.9107L41.4559 48.6347C42.2554 49.4344 43.5527 49.4348 44.3525 48.6345L43.6282 47.9107ZM42.18 47.9107L42.9043 47.1868L28.3593 32.634L27.6351 33.3579L26.9108 34.0818L41.4557 48.6345L42.18 47.9107ZM27.6351 33.3579L26.9108 32.6341L12.36 47.1946L13.0843 47.9185L13.8086 48.6423L28.3594 34.0818L27.6351 33.3579ZM13.0843 47.9185L12.3604 47.1942L12.361 47.1943L11.637 47.9185L10.913 48.6426C11.7127 49.4421 13.0087 49.4418 13.8082 48.6427L13.0843 47.9185ZM11.637 47.9185L12.3613 47.1946L8.83494 43.6663L8.11066 44.3901L7.38638 45.114L10.9128 48.6423L11.637 47.9185ZM8.11066 44.3901L8.83495 43.6663C8.83405 43.6654 8.83397 43.6651 8.83425 43.6656C8.8345 43.6659 8.83472 43.6664 8.83487 43.6667C8.83511 43.6673 8.83483 43.6669 8.83483 43.6655C8.83483 43.6642 8.83511 43.6637 8.83487 43.6643C8.83472 43.6647 8.8345 43.6651 8.83425 43.6655C8.83397 43.6659 8.83405 43.6657 8.83495 43.6648L8.11066 42.9409L7.38637 42.2171C6.58698 43.0169 6.58698 44.3141 7.38637 45.114L8.11066 44.3901ZM8.11066 42.9409L8.83498 43.6648L23.3858 29.1042L22.6614 28.3804L21.9371 27.6565L7.38634 42.2171L8.11066 42.9409ZM22.6614 28.3804L23.3857 27.6565L8.82519 13.0872L8.10089 13.811L7.3766 14.5349L21.9371 29.1042L22.6614 28.3804ZM8.10089 13.811L8.82518 13.0872L8.82536 13.0865L8.10089 12.3628L7.37643 11.6391C6.57762 12.4388 6.5771 13.7349 7.37661 14.5349L8.10089 13.811ZM8.10089 12.3628L8.82517 13.0867L12.3515 9.55836L11.6273 8.83448L10.903 8.1106L7.37662 11.6389L8.10089 12.3628Z' fill='url(%23paint1_linear_6088_10627)' mask='url(%23path-1-outside-1_6088_10627)'/%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3Cfilter id='filter0_d_6088_10627' x='3.09075' y='7.51052' width='49.0829' height='52.7908' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E %3CfeOffset dy='7.3728'/%3E %3CfeGaussianBlur stdDeviation='1.8432'/%3E %3CfeComposite in2='hardAlpha' operator='out'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.151282 0 0 0 0 0 0 0 0 0 0.283654 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6088_10627'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6088_10627' result='shape'/%3E %3C/filter%3E %3ClinearGradient id='paint0_linear_6088_10627' x1='27.6322' y1='8.53452' x2='27.6322' y2='48.2181' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FFF6FF'/%3E %3Cstop offset='1' stop-color='%23DCC8FF'/%3E %3C/linearGradient%3E %3ClinearGradient id='paint1_linear_6088_10627' x1='27.6322' y1='8.53452' x2='27.6322' y2='48.2181' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FAE4FF'/%3E %3Cstop offset='1' stop-color='%23B39EFF'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E") 50% 50% / 100% 100% no-repeat; border-radius: 0; transform: translateX(-50%);} .layerpopup-profile .profile-card {position: relative; width: 46.632vw; height: 25.124vw; margin: 1.39vw auto 0; border-radius: 1.483vw; background: linear-gradient(180deg, #5702ca 0%, #8125ff 100%); box-shadow: 0 0.464vw 0.556vw rgba(0, 7, 85, .44), inset 0 0 0 0.046vw #ea8900, inset 0 0 0 0.185vw #fffbd3, inset 0 0 0 0.232vw #ff8306;} .layerpopup-profile .profile-card__user {position: absolute; left: 2.874vw; right: 1.793vw; top: 2.963vw; display: flex; align-items: center; gap: 1.345vw;} .layerpopup-profile .profile-card__user .thumb {position: relative; flex: 0 0 auto; width: 10.576vw; height: 10.576vw;} .layerpopup-profile .profile-card__user .thumb::before {content: ""; position: absolute; left: 0.345vw; top: 0.345vw; width: 9.887vw; height: 9.887vw; border-radius: 50%; background: linear-gradient(180deg, #310560 0%, #440096 100%);} .layerpopup-profile .profile-card__user .thumb img {position: relative; display: block; width: 9.887vw; height: 9.887vw; margin: 0.345vw; border-radius: 50%; object-fit: cover;} .layerpopup-profile .profile-card__user .thumb::after {content: ""; position: absolute; inset: 0; padding: 0.612vw; border-radius: 50%; background: linear-gradient(180deg, #6b0fe5 0%, #7619f4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .layerpopup-profile .profile-card__user .info {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.748vw;} .layerpopup-profile .profile-card__user .name {font-family: var(--ft-family_NotoSans-700); font-size: 2.317vw; line-height: 1; letter-spacing: -0.046vw; white-space: nowrap; max-width: 100%; padding-bottom: 0.2em; overflow: hidden; text-overflow: ellipsis;} .layerpopup-profile .profile-card__user .id {display: flex; align-items: center; gap: 0.897vw;} .layerpopup-profile .profile-card__user .id .label {font-family: var(--ft-family_NotoSans-700); font-size: 1.854vw; line-height: 1; letter-spacing: -0.037vw;} .layerpopup-profile .profile-card__user .id .num {min-width: 11.473vw; height: 3.059vw; padding: 0 1.345vw; box-sizing: border-box; background: rgba(74, 0, 173, .7); border-radius: 4.933vw; color: rgba(255, 255, 255, .7); font-family: var(--ft-family_NotoSans-600), var(--ft-family_NotoSans-700), sans-serif; font-size: 1.854vw; line-height: 3.059vw; text-align: center;} .layerpopup-profile .profile-card__user .id .label {background-image: linear-gradient(180deg, #f6cff5 0%, #9afef6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .layerpopup-profile .profile-card__stat {position: absolute; left: 50%; top: 15.343vw; transform: translateX(-50%); width: 45.056vw; height: 8.991vw; display: flex; align-items: center; justify-content: center; gap: 0.417vw; background: rgba(88, 3, 204, .05); border-radius: 0.927vw; box-shadow: 0 0.093vw 0.158vw 0.561vw rgba(104, 16, 223, .64), inset 0 0.139vw 0.06vw 0.112vw rgba(255, 255, 255, .25), inset 0 0 1.391vw 0.224vw rgba(255, 255, 255, .19);} .layerpopup-profile .profile-card__stat .stat {flex: 0 0 auto; display: flex; align-items: center; width: 21.853vw; height: 5.238vw;} .layerpopup-profile .profile-card__stat .divider {flex: 0 0 auto; width: 0.278vw; height: 5.748vw; background: #9b71ff; opacity: .66; border-radius: 0.093vw;} .layerpopup-profile .profile-card__stat .ico {flex: 0 0 auto; display: block;} .layerpopup-profile .profile-card__stat .txt {display: flex; flex-direction: column; gap: 0.509vw;} .layerpopup-profile .profile-card__stat .label {color: #cb88ff; font-family: var(--ft-family_NotoSansDisplay-800i); font-style: italic; font-size: 1.483vw; line-height: 1; letter-spacing: -0.029vw;} .layerpopup-profile .profile-card__stat .value {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 1.669vw; line-height: 1; white-space: nowrap;} .layerpopup-profile .profile-card__stat .value .cur {color: #ffea00; font-size: inherit; font-family: inherit;} .layerpopup-profile .stat--lv .ico {width: 5.659vw; height: 4.099vw; margin-left: 1.241vw; filter: drop-shadow(0 0.336vw 0.093vw #5305bd);} .layerpopup-profile .stat--lv .ico img {width: 100%; height: 100%; object-fit: contain;} .layerpopup-profile .stat--lv .txt {margin-left: 0.907vw;} .layerpopup-profile .stat--point .ico {width: 4.756vw; height: 4.756vw; margin-left: 0.96vw; background: url(../../../images/store/common/icon_vippoint.png) 50% 50% / contain no-repeat; filter: drop-shadow(0 0.448vw 0.093vw #5305bd);} .layerpopup-profile .stat--point .txt {margin-left: 0.682vw;} .layerpopup-profile .stat--point .value {font-size: 1.854vw;} .layerpopup-profile .profile-bottom {margin: auto 0 7.841vw; display: flex; flex-direction: column; align-items: center; gap: 4.537vw;} .layerpopup-profile .btn-backtogame {position: relative; width: 33.898vw; height: 7.972vw; padding: 0; filter: drop-shadow(0 0.259vw 0.194vw rgba(41, 0, 91, .42));} .layerpopup-profile .btn-backtogame .btn {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 7.972vw; border-radius: 2.604vw; background: linear-gradient(180deg, #23c5ff 18.241%, #436bff 40.832%, #3e36d2 89.242%); box-shadow: inset 0 -0.236vw 0.158vw rgba(18, 5, 112, .28), inset 0 -0.158vw 0.315vw #1c096d, inset 0 0 0.646vw #006fff;} .layerpopup-profile .btn-backtogame .glow {position: absolute; left: 1.53%; right: 1.72%; top: calc(50% - 0.163vw); transform: translateY(-50%); height: 7.13vw; border-radius: 2.214vw; background: linear-gradient(180deg, #00eeff 0%, #4681ff 38.462%, #401cc2 90.385%, #3c2bc4 100%); box-shadow: inset 0 -0.13vw 0.079vw rgba(76, 67, 247, .85); filter: blur(0.078vw);} .layerpopup-profile .btn-backtogame .shine {position: absolute; left: 2.29%; right: 2.49%; top: calc(50% - 0.357vw); transform: translateY(-50%); height: 6.352vw; border-radius: 1.953vw; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 30.769%); opacity: .85; filter: blur(0.032vw);} .layerpopup-profile .btn-backtogame .txt {position: absolute; left: 8.03%; right: 8.08%; top: calc(50% - 0.232vw); transform: translateY(-50%); height: 6.066vw; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800); font-size: 3.63vw; line-height: 1; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #99dfff 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.079vw 0 #0084ff) drop-shadow(0 0.236vw 0.142vw #000b89) drop-shadow(0 0.158vw 0.622vw #1341c7);} .layerpopup-profile .btn-logout {width: 13.546vw; height: 4.602vw; padding: 0; color: #886dff; font-family: var(--ft-family_NotoSansDisplay-700); font-size: 3.241vw; line-height: 4.557vw; letter-spacing: -0.065vw; text-transform: uppercase; text-decoration: underline;} /* layerpopup (common) */ [class*=layerpopup-common] .layer-wrapper {width: 42.969vw; border-width: 0.311vw; border-radius: 1.864vw;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {top: 1.432vw; right: 1.432vw; width: 3.385vw; height: 3.385vw;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle {top: -1.574vw; right: -1.574vw; width: 5.239vw; height: 5.239vw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'%3E%3Ccircle cx='26.5737' cy='26.5739' r='25.3659' fill='%23240075' stroke='%231398FF' stroke-width='2.4158'/%3E%3Crect x='10.871' y='39.458' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(-45 10.871 39.458)' fill='white'/%3E%3Crect x='13.6895' y='10.8711' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(45 13.6895 10.8711)' fill='white'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::after {display: none;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::after {width: 4.787vw; height: 0.52vw; border-radius: 0.904vw;} [class*=layerpopup-common] .layer-inner {padding: 3.106vw 0;} [class*=layerpopup-common] .layer-inner > *, [class*=layerpopup-common] .layer-contents > * {margin-bottom: 1.5625vw;} [class*=layerpopup-common] .layer-header {margin-bottom: 1vw;} [class*=layerpopup-common] .layer-header .main-tit {font-size: 3.727vw;} [class*=layerpopup-common] .layer-header .sub-tit {margin-top: 0.911vw; font-size: 1.657vw;} [class*=layerpopup-common] .layer-header .sub-tit .point-img {width: 2.09vw; height: 2.09vw; margin-right: 0.391vw; vertical-align: -0.391vw;} [class*=layerpopup-common] .layer-contents {padding: 0 2.071vw;} .layerpopup-vip-levelup .layer-contents {padding: 0 0.672vw;} [class*=layerpopup-common] .layer-contents.inner-pd, [class*=layerpopup-common] .layer-contents .inner-pd {width: calc(100% - 3.906vw) !important; margin: 0 auto 1.5625vw;} .layerpopup-vip-open .layer-contents.inner-pd, .layerpopup-vip-levelup .layer-contents.inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd, .layerpopup-vip-levelup .layer-contents .inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd {width: 34.589vw !important;} [class*=layerpopup-common] .layer-contents .content {font-size: 1.657vw;} [class*=layerpopup-common] .layer-contents .infobox {padding: 0 1.553vw; margin-bottom: 1.45vw; border-radius: 0.828vw; border-width: 0.207vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area {height: 6.287vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area > * {margin-right: 0.781vw;;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-img {width: 3.299vw; height: 3.406vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-amount {max-width: calc(100% - 3.385vw); font-size: 3.355vw; background-image: linear-gradient(180deg, #ffee32 34.066%, #ffb200 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0.9px rgba(83, 0, 35, .7)) drop-shadow(0 1px 0 #9e2205);} [class*=layerpopup-common] .layer-contents .infobox.type-list {padding: 1.823vw 0.021vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list > * {margin-bottom: 1.5625vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .title {font-size: 1.562vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item {padding-left: 1.042vw; margin-bottom: 0.911vw; font-size: 1.432vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item::before {width: 0.391vw; height: 0.391vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item {flex: 0 0 calc(20% - 1.242vw); height: 6.212vw; padding: 0.207vw 0; margin-right: 1.553vw; margin-bottom: 1vw; gap: 0.207vw; border-width: 0.195vw; border-radius: 1.172vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon {margin-top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon img {top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .cnt {font-size: 1.450vw;} [class*=layerpopup-common] .layer-contents .notice {font-size: 1.5625vw;} [class*=layerpopup-common] .layer-contents .circle-gauge {margin-top: 0.651vw;} [class*=layerpopup-common] .layer-footer .btn-complete {width: 23.4375vw; height: 5.208vw;} .layerpopup-payment-complete-new .layer-footer .btn-complete, .layerpopup-login-reward .layer-footer .btn-complete, .layerpopup-login-bonus .layer-footer .btn-complete, .layerpopup-webstore-voucher .layer-footer .btn-complete, .layerpopup-account-not-found .layer-footer .btn-complete, .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 23.59vw; height: 5.24vw;} .layerpopup-vip-open .layer-footer .btn-complete, .layerpopup-vip-levelup .layer-footer .btn-complete {width: 21.68vw; height: 4.82vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back, [class*=layerpopup-common] .layer-footer .btn-complete .bg-front {height: 91.667%; border-radius: 2.604vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back {top: 6.25%;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner {left: 0.13vw; top: 0.13vw; width: calc(100% - 0.26vw); height: calc(100% - 0.26vw); border-radius: 2.604vw;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before, [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {left: 0.13vw; width: calc(100% - 0.26vw); height: calc(50% - 0.13vw);} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before {top: 0.13vw; border-radius: 22.135vw 22.135vw 0 0;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {bottom: 0.13vw; border-radius: 0 0 22.135vw 22.135vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt {font-size: 2.485vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.207vw; -moz-text-stroke-width: 0.207vw; -ms-text-stroke-width: 0.207vw; text-stroke-width: 0.207vw;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-top-area {border-radius: 1.953vw 1.953vw 0 0;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-inner {border-radius: 1.864vw;} [class*=layerpopup-common] .layer-wrapper.half-bg {width: 42.969vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-top-area {height: 22.786vw; border-width: 0.521vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-inner {padding-top: 2.279vw; border-radius: 0 0 1.953vw 1.953vw;} [class*=layerpopup-common] .layer-wrapper.w-slim {width: 36.458vw;} .layerpopup-login-bonus .layer-wrapper.w-slim {width: 42.969vw;} .layerpopup-login-bonus .layer-wrapper.w-slim .layer-contents .content {font-size: 1.87vw; letter-spacing: 0;} .layerpopup-upsell-unavailable .layer-header .main-tit {font-size: 3.966vw;} .layerpopup-upsell-unavailable .layer-contents .content {font-size: 1.763vw;} .layerpopup-login-bonus .layer-header .main-tit {font-size: 4.688vw;} [class*=layerpopup-common] .layer-wrapper.w-slim .layer-contents .content {font-size: 1.5625vw; letter-spacing: .02vw;} /* layerpopup (common) : vip */ [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper {width: 48.177vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .main-tit {font-size: 4.033vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .sub-tit, [class*=layerpopup-common][class*=layerpopup-vip] .layer-contents .content {font-size: 1.793vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-contents .infobox .chip-info-area .chip-amount {font-size: 3.630vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-footer .btn-complete .txt-area .txt {font-size: 2.689vw;} /* layerpopup-full (common) */ [class*=layerpopup-full-common] .button-layerpopup-close {top: 2.604vw; right: 2.604vw; width: 3.385vw; height: 3.385vw;} [class*=layerpopup-full-common] .button-layerpopup-close::before, [class*=layerpopup-full-common] .button-layerpopup-close::after {width: 4.787vw; height: 0.521vw; border-radius: 3.906vw;} /* layerpopup (side) */ [class*=layerpopup-side] .layer-inner {width: 50%;} [class*=layerpopup-side] .button-layerpopup-close {top: 2.604vw; width: 3.385vw; height: 3.385vw;} [class*=layerpopup-side] .button-layerpopup-close::before, [class*=layerpopup-side] .button-layerpopup-close::after {width: 4.787vw; height: 0.521vw; border-radius: 3.906vw;} [class*=layerpopup-side] * {font-size: 1.5625vw;} .layerpopup-side-left .button-layerpopup-close {left: 2.604vw;} .layerpopup-side-right .button-layerpopup-close {right: 2.604vw;} /* layerpopup (mo-menu-comm) */ .mo-menu-comm.show {display: block !important;} .mo-menu-comm .layer-inner {/*padding: 8.464vw 1.953vw 0;*/ padding: 8.203vw 1.953vw 0; box-sizing: border-box; background-color: #240075;} .mo-menu-comm .layer-inner::before {content: ''; display: inline-block; position: absolute; left: 0; /*top: 8.464vw;*/ top: 8.203vw; width: 100%; height: 0.26vw; background-color: #1398FF;} .mo-menu-comm .menu-area {margin: 0.651vw 0 9.115vw;} .mo-menu-comm .menu-area .menu-item > a {display: flex; align-items: center; position: relative; width: 100%; height: 9.115vw; padding: 0 2.604vw; box-sizing: border-box; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 3.906vw;} .mo-menu-comm .menu-area .menu-item.active > a {color: #1398FF; font-family: var(--ft-family_Poppins-600);} /* layerpopup (gnb) */ .layerpopup-gnb .menu-area .lnb {display: none; margin-bottom: 5.208vw;} .layerpopup-gnb .menu-area .lnb .lnb-item {padding: 0 2.604vw; box-sizing: border-box;} .layerpopup-gnb .menu-area .lnb .lnb-item > a {display: flex; align-items: center; width: 100%; height: 5.208vw; padding: 0 1.302vw; box-sizing: border-box; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 2.344vw;} .layerpopup-gnb .menu-area .gnb-item.has-depth > a::after {content: ""; display: inline-block; position: absolute; right: 2.604vw; top: 50%; transform: translateY(-50%); width: 2.604vw; height: 1.302vw; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20' fill='none'%3E%3Cpath d='M40 0L0 0L19.1304 20L40 0Z' fill='white'/%3E%3C/svg%3E"); background-size: cover;} .layerpopup-gnb .menu-area .gnb-item.has-depth.active > a::after {transform: translateY(-50%) rotate(180deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20' fill='none'%3E%3Cpath d='M40 0L0 0L19.1304 20L40 0Z' fill='%231398FF'/%3E%3C/svg%3E");} .layerpopup-gnb .menu-area .gnb-item.active .lnb {display: block;} .layerpopup-gnb .menu-area .lnb .lnb-item.active > a {color: #1398FF; font-family: var(--ft-family_Poppins-400);} .layerpopup-gnb .bottom-area {display: flex; flex-direction: column; align-items: center; padding: 5.208vw 0; border-top: 0.26vw solid #3811AE;} .layerpopup-gnb .bottom-area > * {margin-bottom: 5.208vw;} .layerpopup-gnb .bottom-area > *:last-child {margin-bottom: 0 !important;} .layerpopup-gnb .btn-play {width: 32.552vw; height: 7.617vw;} .layerpopup-gnb .btn-play .bg-back, .layerpopup-gnb .btn-play .bg-front {height: 7.161vw; border-radius: 3.711vw;} .layerpopup-gnb .btn-play .bg-back {top: 0.456vw; box-shadow: 0 0.464vw 0.371vw 0 rgba(0, 0, 0, 0.30);} .layerpopup-gnb .btn-play .front-inner {left: 0.195vw; top: 0.195vw; width: calc(100% - 0.391vw); height: calc(100% - 0.391vw); border-radius: 3.711vw;} .layerpopup-gnb .btn-play .front-inner::before, .layerpopup-gnb .btn-play .front-inner::after {left: 0.195vw; width: calc(100% - 0.391vw); height: calc(50% - 0.195vw);} .layerpopup-gnb .btn-play .front-inner::before {top: 0.195vw; border-radius: 31.51vw 31.51vw 0 0; } .layerpopup-gnb .btn-play .front-inner::after {bottom: 0.195vw; border-radius: 0 0 31.51vw 31.51vw;} .layerpopup-gnb .btn-play .txt-area .txt {font-size: 3.906vw;} .layerpopup-gnb .btn-play .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.391vw; -moz-text-stroke-width: 0.391vw; -ms-text-stroke-width: 0.391vw; text-stroke-width: 0.391vw;} .layerpopup-gnb .sns-btns-comm [class*=btn-item] {width: 5.208vw; height: 5.208vw; margin: 0 1.953vw;} /* layerpopup (terms-menu) */ .layerpopup-terms-menu .layer-inner {width: 60%; padding-left: 1.302vw; padding-right: 1.302vw;} .layerpopup-terms-menu .menu-area .menu-item > a {font-size: 2.8vw;} /* layerpopup (profile) */ .layerpopup-profile .profile-area .user-info {padding: 2.279vw 1.302vw 2.604vw;} .layerpopup-profile .profile-area .user-info > * {margin-bottom: 1.302vw;} .layerpopup-profile .profile-area .user-info .thumb {width: 5.859vw; height: 5.859vw;} .layerpopup-profile .profile-area .user-info .name {font-size: 2.214vw;} .layerpopup-profile .profile-area .user-info .id {min-width: 13.672vw; height: 2.604vw; padding: 0 1.953vw; border-radius: 1.953vw; font-size: 1.5625vw;} .layerpopup-profile .profile-area .chip-info, .layerpopup-profile .profile-area .vip-info {min-height: 9.1146vw; padding: 1.953vw 1.302vw;} .layerpopup-profile .profile-area .chip-info .amount {padding-left: 4.818vw; font-size: 3.906vw;} .layerpopup-profile .profile-area .chip-info .amount::before {width: 3.841vw; height: 3.971vw; margin-top: 0.25vw;} .layerpopup-profile .profile-area .vip-info > * {margin-right: 3.255vw;} .layerpopup-profile .profile-area .vip-info .lv-name {font-size: 2.344vw;} .layerpopup-profile .profile-area .vip-info .card-img {margin-left: 0.78125vw; width: 4.6875vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar {min-width: 15.625vw; padding: 0 1.302vw 0 2.604vw; height: 2.604vw; border-radius: 1.953vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar::before {left: -0.651vw; width: 3.255vw; height: 3.255vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info, .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info * {font-size: 1.5625vw;} .layerpopup-profile .bottom-area {padding: 2.604vw 0;} .layerpopup-profile .bottom-area .button-logout > .txt {font-size: 2.214vw;} /* layerpopup (layerpopup-login-modal) */ .layerpopup-login-modal .layer-wrapper {width: calc(100% - 2.604vw); height: auto; max-height: 80vh; border-radius: 1.953vw;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close {right: 1.953vw; top: 1.953vw; width: 3.255vw; height: 3.255vw;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::before, .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::after {width: 4.688vw; height: 0.521vw;} .layerpopup-login-modal iframe {height: 82.031vw !important;} /* layerpopup (login-prompt-comm) */ .layerpopup-login-prompt-comm .layer-top-area .img-main {width: 25.26vw; margin-top: -8.659vw;} /* layerpopup (login-prompt) */ .layerpopup-login-prompt .layer-top-area .img-main {width: 18.88vw; margin-top: -7.292vw; margin-bottom: 0.651vw;} .layerpopup-login-prompt .layer-header .main-tit {font-size: 2.344vw;} .layerpopup-login-prompt .layer-contents .notice:not(.cl-light-purple) {margin-bottom: 1.302vw; font-size: 1.5625vw;} /* layerpopup (pw-reset-complete) */ .layerpopup-pw-reset-complete .layer-top-area .img-main {width: 25vw; margin-top: -6.51vw;} /* layerpopup (account-create-complete) */ .layerpopup-account-create-complete .layer-top-area .img-main {width: 22.135vw; margin-top: -6.901vw;} .layerpopup-account-create-complete .layer-header {margin-bottom: 1.953vw;} /* layerpopup (email-sent-complete) */ .layerpopup-email-sent-complete .layer-top-area .img-main {width: 35.156vw; margin-top: -8.724vw; margin-left: -1.302vw;} /* layerpopup (weblogin-blocked) */ .layerpopup-weblogin-blocked .layer-top-area .img-main {width: 20.052vw; margin-top: -6.901vw;} .layerpopup-weblogin-blocked .layer-contents .qr-img {width: 9.766vw;} /* layerpopup (account-not-found) */ .layerpopup-account-not-found .layer-inner {padding: 2.702vw 0 2.309vw;} .layerpopup-account-not-found .layer-header {margin-bottom: 0.786vw;} .layerpopup-account-not-found .layer-header .main-tit {font-size: 3.983vw;} .layerpopup-account-not-found .layer-contents {margin-bottom: 3.170vw;} .layerpopup-account-not-found .layer-contents .content {font-size: 1.886vw;} /* layerpopup (levelup-reward)*/ .layerpopup-levelup-reward .layer-contents {margin-bottom: 1vw !important;} /* layerpopup (payment-complete) */ .layerpopup-payment-complete .layer-contents .content {font-size: 1.677vw;} .layerpopup-login-reward .layer-contents .content {font-size: 1.884vw;} .layerpopup-login-bonus .layer-contents .content {font-size: 1.406vw;} .layerpopup-payment-complete .content-ui > * {margin-bottom: 1.953vw;} .layerpopup-payment-complete-new .layer-header, .layerpopup-login-reward .layer-header {margin-bottom: 3.106vw;} .layerpopup-payment-complete-levelup .layer-header {margin-bottom: 1.242vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm + .layer-header {margin-bottom: 1.864vw;} .layerpopup-payment-complete-new .layer-contents, .layerpopup-login-reward .layer-contents {margin-bottom: 2.692vw;} .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-header {margin-bottom: 0.828vw;} .layerpopup-payment-complete:not(.layerpopup-payment-complete-new) .layer-contents {margin-bottom: 0.207vw;} .layerpopup-payment-complete-new .content-ui {margin-bottom: 2.381vw !important;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons {row-gap: 1vw;} .layerpopup-payment-complete-new .layer-contents .infobox-wrap .gift-icons .item {margin-bottom: 0;} .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 14.14vw; height: 14.14vw; margin: 0 auto 1.242vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 5.547vw; letter-spacing: -0.111vw; -webkit-text-stroke-width: 0.527vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete {width: 18.86vw; height: 5.24vw; margin-right: 1.449vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete:last-child {margin-right: 0 !important;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete .txt-area .txt {font-size: 2.091vw;} /* layerpopup (vip-open) */ .layerpopup-vip-open .layer-top-area .img-main {width: 22.331vw; margin-top: -4.1016vw;} .layerpopup-vip-open .layer-contents .item-list .item {flex: 1 0 calc(50% - 0.952vw); height: 20.167vw; padding-top: 0.784vw; margin: 0 1.905vw 1.905vw 0; border-width: 0.195vw; border-radius: 1.302vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .title {font-size: 2.214vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .description {margin-top: 0.301vw; font-size: 1.302vw;} /* layerpopup (vip-levelup) */ .layerpopup-vip-levelup .layer-top-area .img-main {padding-bottom: 0.602vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before, .layerpopup-vip-levelup .layer-top-area .img-main::after {top: 6.771vw; width: 6.510vw; height: 3.646vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before {left: -4.818vw;} .layerpopup-vip-levelup .layer-top-area .img-main::after {right: -4.427vw;} .layerpopup-vip-levelup .layer-top-area .img-main .img::before {bottom: -1.302vw; width: 19.27vw; height: 2.93vw;} .layerpopup-vip-levelup .layer-top-area .img-main img {height: 9.57vw;} /* layerpopup (upsell-unavailable) */ .layerpopup-upsell-unavailable .layer-top-area .img-main {width: 25.39vw; margin-top: -6.51vw;} /* 공통 : 레벨 다이아 + 더블유포인트 게이지 */ .lv-diamond-comm {position: relative; display: block; width: 100%; height: 100%;} .lv-diamond-comm::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../../../images/store/common/img_lv_bg.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.389vw 0.229vw rgba(55, 3, 120, .58));} .lv-diamond-comm > span {position: absolute; left: 0; top: -3.33%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); font-size: 2.382vw; line-height: 1.067vw; letter-spacing: -0.048vw; text-align: center; text-transform: uppercase; -webkit-text-stroke: 0.226vw rgba(255, 255, 0, .5); background-image: none;} .lv-diamond-comm > span::after {content: attr(data-lv); position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #963800 0%, #5f2103 83.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .lv-diamond-comm.is-off::before {background-image: url(../../../images/store/common/img_lv_bg_off.png);} .lv-diamond-comm.is-off > span {font-family: var(--ft-family_NotoSans-800); font-size: 2.25vw; letter-spacing: -0.045vw; -webkit-text-stroke: 0;} .lv-diamond-comm.is-off > span::after {background-image: linear-gradient(180deg, #fff 0%, #e7c7ff 83.17%);} .point-gauge {position: relative; width: 49vw; height: 15.426vw;} .layerpopup-payment-complete .point-gauge, .layerpopup-login-reward .point-gauge {transform: scale(0.7059); transform-origin: 50% 0; margin: 0 calc(50% - 24.5vw) -1.74vw;} .point-gauge > span {position: absolute;} .point-gauge__frame {left: 0; top: 2.586vw; width: 49vw; height: 10.092vw; background: url(../../../images/store/common/bg_point_gauge.svg?v=260916) 50% 50% / 100% 100% no-repeat;} .point-gauge__title {left: 11.479vw; top: 0.272vw; width: 25.997vw; height: 4.673vw; background: url(../../../images/store/common/img_gauge_title.png) 50% 50% / 100% 100% no-repeat;} .point-gauge__bar {left: 7.168vw; top: 5.444vw; width: 34.663vw; height: 4.265vw; border-radius: 0.454vw; background: linear-gradient(0deg, #3b1b8e 0%, #1b005e 100%);} .point-gauge__bar::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.318vw; border-radius: inherit; background: linear-gradient(270deg, #4f21c3 0%, #7706ce 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__track {left: 7.849vw; top: 6.125vw; width: 33.302vw; height: 2.904vw; border-radius: 0.272vw; overflow: hidden;} .point-gauge__fill {display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e3a138 1.44%, #ffff6b 7.21%, #f55f51 83.65%, #f475fe 100%); transition: width .3s; animation: pointGaugeFill 1s cubic-bezier(.22, .61, .36, 1) .25s backwards;} .point-gauge.is-max .point-gauge__fill {background: linear-gradient(180deg, #38c9e3 1.44%, #6bffcf 7.21%, #6756ff 83.65%, #7a75fe 100%);} .point-gauge .point-gauge__max {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); filter: drop-shadow(0 0.046em 0 #e82300) drop-shadow(0 0.12em 0.07em rgba(59, 0, 83, .8)); background-image: linear-gradient(180deg, #fff 34.07%, #ffef79 72.1%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 1.962vw; line-height: 1; text-align: center;} .point-gauge__level {left: 3.267vw; top: 4.537vw; width: 6.125vw; height: 6.125vw;} .point-gauge__reward {left: 39.803vw; top: 4.129vw; width: 5.88vw; height: 6.842vw; background: url(../../../images/store/common/icon_reward.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__badge {position: absolute; left: 3.253vw; top: -0.272vw; width: 3.357vw; height: 3.357vw; box-sizing: border-box; padding-bottom: 0.408vw; display: flex; align-items: center; justify-content: center; background: url(../../../images/store/common/icon_reddot.png) 50% 50% / 100% 100% no-repeat; color: #fff; font-family: var(--ft-family_NotoSans-800); font-size: 1.815vw; line-height: 1; text-align: center; text-shadow: 0 0.045vw 0 rgba(119, 0, 0, .26);} .point-gauge__panel {left: 50%; top: 9.392vw; transform: translateX(-50%); width: auto; height: 4.401vw; display: flex; align-items: center; justify-content: center; gap: 0.224vw; padding: 0 0.897vw; border-radius: 0 0 2.042vw 2.042vw; background: linear-gradient(0deg, #a446fb 0%, #5621c1 100%); box-shadow: 0 0.272vw 0.454vw rgba(46, 21, 101, .5);} .point-gauge__panel::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.091vw; border-radius: inherit; background: linear-gradient(0deg, #ee68fa 0%, #9b30ff 21%, #571cba 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__panel::before {content: ""; position: absolute; left: 0.363vw; right: 0.363vw; top: 0.318vw; bottom: 0.363vw; border-radius: 0.454vw 0.454vw 1.815vw 1.815vw; background: linear-gradient(0deg, #5704b4 9%, #110361 100%);} .point-gauge__icon {position: relative; flex: 0 0 auto; width: 3.448vw; height: 3.448vw; background: url(../../../images/store/common/icon_point.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__num {position: relative; flex: 0 0 auto; height: 2.813vw; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 2.087vw; line-height: 1; letter-spacing: -0.042vw; text-align: center; white-space: nowrap;} .point-gauge__num .cur {color: #ff0; font-family: inherit; font-size: inherit;} @keyframes pointGaugeFill { from {width: 0;} } .layerpopup-side-right.layerpopup-doubleupoint .layer-inner {display: flex; flex-direction: column; overflow: hidden; width: 50vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close {top: 1.953vw; right: 1.953vw; width: 4.818vw; height: 4.818vw;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::before {width: 4.818vw; height: 4.818vw;} .layerpopup-doubleupoint .dpoint-top {position: relative; flex: 0 0 auto; height: 35.417vw; background: url(../../../images/popup/doubleupoint/v2/img_top_banner.jpg) 50% 0 / 100% auto no-repeat;} .layerpopup-doubleupoint .dpoint-top::before {content: ""; position: absolute; left: 0; top: 25.833vw; width: 100%; height: 10.324vw; background: linear-gradient(180deg, rgba(43, 1, 96, 0) 0%, #260352 16.35%, rgba(43, 1, 96, .66) 65.87%, rgba(43, 1, 96, 0) 96.15%);} .layerpopup-doubleupoint .dpoint-top__txt {position: absolute; left: 5.465vw; top: 6.204vw; width: 27.13vw; height: 11.111vw; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 2.315vw; line-height: 2.963vw; letter-spacing: -0.046vw; -webkit-text-stroke: 0.25vw #bc339a; paint-order: stroke fill; text-shadow: 0 0.25vw 0 #84186a, 0 0.139vw 0.333vw rgba(199, 48, 50, .77);} .layerpopup-doubleupoint .dpoint-top .point-gauge {position: absolute; left: 0.5vw; top: 19.536vw;} .layerpopup-doubleupoint .layer-wrapper {overflow-x: hidden; overflow-y: auto; position: relative; flex: 1 1 auto; margin-top: -7.454vw; padding-top: 7.454vw; scrollbar-width: none; -ms-overflow-style: none;} .layerpopup-doubleupoint .layer-wrapper::-webkit-scrollbar {display: none;} .layerpopup-doubleupoint .reward-list > .item {position: relative; height: 15.741vw; padding: 0.533vw 0 0 13.657vw;} .layerpopup-doubleupoint .level-wrap {position: absolute; left: 3.75vw; top: 4.236vw; width: 6.074vw; height: 6.074vw;} .layerpopup-doubleupoint .level-wrap::before, .layerpopup-doubleupoint .level-wrap::after {content: ""; position: absolute; left: 50%; width: 1.048vw; height: 1.048vw; background: rgba(127, 34, 252, .5); border-radius: 0.185vw; transform: translateX(-50%) rotate(45deg);} .layerpopup-doubleupoint .level-wrap::before {top: -3.496vw;} .layerpopup-doubleupoint .level-wrap::after {top: 8.541vw;} .layerpopup-doubleupoint .reward-wrap {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 1.049vw 1.077vw 0; position: relative; width: 33.611vw; height: 13.444vw; border-radius: 1.528vw; background: linear-gradient(180deg, #6007d8 0%, #8831ff 88.942%); box-shadow: 0 0.509vw 0.611vw rgba(55, 3, 120, .8), inset 0 0 0 0.051vw #ea8900, inset 0 0 0 0.255vw #fffbd3, inset 0 0 0 0.306vw #ff8306;} .layerpopup-doubleupoint .set-box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 7.639vw; gap: 0.306vw;} .layerpopup-doubleupoint .set-box .set {position: relative; flex: 0 0 auto; width: 7.639vw; height: 7.639vw; border-radius: 0.648vw; background: linear-gradient(180deg, #4c1bb5 0%, #681bd3 100%);} .layerpopup-doubleupoint .set-box .set img {position: absolute; left: 50%; top: 0.382vw; width: 4.736vw; height: 4.736vw; object-fit: contain; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt-area {position: absolute; left: 50%; top: 5.416vw; width: 4.276vw; height: 1.197vw; display: flex; align-items: center; justify-content: center; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 1.71vw; line-height: 1; text-align: center; white-space: nowrap;} .layerpopup-doubleupoint .btn-area {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 19.028vw; height: 4.676vw;} .layerpopup-doubleupoint .btn-claim {position: relative; top: 0.895vw; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 1.25vw; background: linear-gradient(180deg, #b4f84a 18.241%, #4ac535 40.832%, #056a0a 89.242%); box-shadow: 0 0.324vw 0.324vw rgba(55, 3, 120, .8), inset 0 -0.125vw 0.083vw rgba(0, 59, 1, .65), inset 0 -0.083vw 0.167vw #055017, inset 0 0 0.342vw #057407;} .layerpopup-doubleupoint .btn-claim::before {content: ""; position: absolute; left: 0.648vw; top: 0.278vw; width: 17.687vw; height: 1.482vw; border-radius: 4.63vw; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;} .layerpopup-doubleupoint .btn-claim .txt {position: absolute; left: 14.36%; right: 13.14%; top: 8.91%; bottom: 15.84%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800), var(--ft-family_NotoSans-800), sans-serif; font-size: 2.593vw; line-height: 1; letter-spacing: -0.052vw; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.056vw 0 #0d8800) drop-shadow(0 0.169vw 0.101vw #0a5b0c) drop-shadow(0 0.113vw 0.445vw rgba(5, 80, 23, .88));} .layerpopup-doubleupoint .btn-claim[disabled] {cursor: default;} .layerpopup-doubleupoint .btn-claim[disabled]::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 1.204vw; background: rgba(29, 0, 97, .6);} .layerpopup-doubleupoint .claimed-text {font-size: 2.315vw; letter-spacing: -0.093vw;} .layerpopup-doubleupoint .item.unlock .reward-wrap::after {content: ""; position: absolute; left: 31.018vw; top: 10.475vw; width: 3.148vw; height: 3.554vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.254vw 0.32vw rgba(40, 0, 88, .25));} .layerpopup-doubleupoint .item.lock .set-box, .layerpopup-doubleupoint .item.lock .btn-area {display: none;} .layerpopup-doubleupoint .item.lock .reward-wrap::after {content: ""; position: absolute; left: 50%; top: 50%; width: 3.157vw; height: 3.565vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.255vw 0.321vw rgba(40, 0, 88, .25)); transform: translate(-50%, -50%);} .layerpopup-doubleupoint .btn-top-renew {right: 1.953vw; bottom: 2.083vw; width: 5.99vw; height: 6.055vw;} /* layerpopup (doubleupoint) */ .layerpopup-full-common.layerpopup-doubleupoint .layer-wrapper {width: 50%;} .layerpopup-full-common.layerpopup-doubleupoint .button-layerpopup-close {right: 2.604vw; top: 2.409vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner {height: 32.8125vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box {padding: 3.255vw 3.255vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box > * {margin-bottom: 1.302vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .title {font-size: 5.208vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .desc {font-size: 1.5625vw;} .layerpopup-full-common.layerpopup-doubleupoint .point-area-comm .point-title .title {margin-bottom: 0.977vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-area {padding: 3.255vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item {margin-bottom: 2.6041vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap {width: 13.672vw; height: 13.672vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm {width: 7.161vw; height: 7.161vw; margin-top: 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm .num {line-height: 7.161vw; font-size: 2.214vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap {width: 28.516vw; height: 15.885vw; margin-left: 0.651vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box {width: calc(100% - 0.488vw); padding-left: 0.781vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box .set {width: 5.859vw; height: 5.859vw; padding-top: 0.651vw; margin-right: 0.651vw; border-radius: 1.172vw; border-width: 0.26vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set img {width: 80%;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area {bottom: 0.521vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area .txt {font-size: 1.302vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim {width: 16.927vw; height: 5.208vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-front {height: 4.88vw; border-radius: 2.604vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back {top: 0.326vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner {left: 0.13vw; top: 0.13vw; width: calc(100% - 0.26vw); height: calc(100% - 0.26vw); border-radius: 2.604vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {left: 0.13vw; width: calc(100% - 0.26vw); height: calc(50% - 0.26vw);} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before {top: 0.26vw; border-radius: 22.135vw 22.135vw 0 0;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {bottom: 0.26vw; border-radius: 0 0 22.135vw 22.135vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt {font-size: 2.865vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.26vw; -moz-text-stroke-width: 0.26vw; -ms-text-stroke-width: 0.26vw; text-stroke-width: 0.26vw;} .layerpopup-full-common.layerpopup-doubleupoint .claimed-text {font-size: 2.865vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .reward-wrap::after {right: -1.0417vw; top: -1.0417vw; width: 3.906vw; height: 4.753vw;} /* layerpopup (promotion-login-bonus) */ .layerpopup-login-bonus .layer-top-area .img-main {width: 42.969vw; margin-top: -2.083vw; margin-left: 1.302vw;} /* layerpopup (promotion-benefit-guide) */ .layerpopup-promotion-benefit-guide .layer-top-area .img-main {width: 33.203vw; margin-top: -10.221vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area {margin-top: 1.302vw; font-size: 1.563vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon {width: 1.302vw; height: 1.302vw; margin-right: 0.52vw; border-radius: 0.13vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon::before {background-size: 0.781vw;} /* layerpopup (layerpopup-webstore-voucher) */ .layerpopup-webstore-voucher .layer-header .main-tit > * {font-size: 6.212vw;} .layerpopup-webstore-voucher .layer-header .main-tit .bold {margin-bottom: 0.59vw; font-size: 4.142vw;} .layerpopup-webstore-voucher .layer-header .sub-tit {font-size: 2.071vw;} .layerpopup-webstore-voucher .layer-contents {margin-bottom: 2.205vw;} .layerpopup-webstore-voucher .img-area::before {height: 37.723vw;} .layerpopup-webstore-voucher .img-area .coupon {width: 35.816vw; height: 20.629vw;} .layerpopup-webstore-voucher .img-area .coupon::before, .layerpopup-webstore-voucher .img-area .coupon::after {left: -0.105vw;} .layerpopup-webstore-voucher .img-area .coupon img {width: 34.108vw; margin-top: 1.056vw; margin-left: -0.105vw;} .layerpopup-webstore-voucher .content {margin: 0.301vw 0 1.723vw;} .layerpopup-webstore-voucher .timer-area {width: 21.18vw; height: 4.193vw; padding: 0 2.061vw 0 4.121vw; border-width: 0.311vw; border-radius: 1.953vw; font-size: 2.516vw; box-shadow: 0 0.326vw 0.391vw 0 rgba(0, 0, 0, 0.35);} .layerpopup-webstore-voucher .timer-area::before {left: -2.796vw; width: 5.871vw; height: 6.57vw;} /* layerpopup (layerpopup-promo-top10-purchase) */ .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] {border-width: 0.26vw; border-radius: 1.302vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li {height: 4.232vw; border-width: 0.13vw; font-size: 2.214vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li:last-child {font-size: 1.5625vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon {margin-right: 0.456vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon img {width: 3.255vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .tit {width: 11.5vw;} .layerpopup-promo-top10-purchase .layer-contents .notice {font-size: 1.302vw;} /* layerpopup (layerpopup-promo-top20-purchase) */ .layerpopup-promo-top20-purchase .layer-wrapper {width: 54.948vw;} .layerpopup-promo-top20-purchase .layer-contents .cont {font-size: 1.5625vw;} .layerpopup-promo-top20-purchase .layer-contents .notice {font-size: 1.5625vw; letter-spacing: -0.05vw;} @media (orientation: landscape) and (max-height: 500px) { /* 팝업 : 화면 높이에 맞춰 내부 스크롤, 하단 버튼만 고정 */ [class*=layerpopup-common]:not(.type-toast) .layer-wrapper {display: flex; flex-direction: column; overflow: visible; max-height: 90vh; max-height: 90svh;} [class*=layerpopup-common] .layer-top-area {flex: 0 0 auto;} [class*=layerpopup-common] .layer-inner {position: static; flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden auto; padding-bottom: 9vw;} [class*=layerpopup-common] .layer-footer {position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; padding-bottom: 3.106vw; border-radius: 0 0 1.553vw 1.553vw; background: linear-gradient(180deg, rgba(36,0,117,0) 0%, rgba(36,0,117,.75) 45%, rgba(36,0,117,.94) 100%);} [class*=layerpopup-common][class*=layerpopup-vip] .layer-footer {background-image: linear-gradient(180deg, rgba(119,18,65,0) 0%, rgba(119,18,65,.75) 45%, rgba(119,18,65,.94) 100%);} /* 닫기버튼은 스티키 푸터 위로 */ [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {z-index: 2;} [class*=layerpopup-common] .layer-inner > * {flex: 0 0 auto;} [class*=layerpopup-common].layerpopup-payment-complete .layer-wrapper {max-height: calc(90vh - 3.2vw); max-height: calc(90svh - 3.2vw);} .layerpopup-vip-open .layer-wrapper .layer-top-area {padding-top: 2.4vw;} .layerpopup-vip-open .layer-wrapper .layer-top-area .img-main {margin-top: 0;} /* 내부 스크롤 시 iOS 에서 그라데이션 글자가 안 그려짐. 별도 레이어로 올려 리페인트 유도 */ [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-amount {transform: translateZ(0);} /* 가로모드 : 레벨 아이콘만 축소 (상단 이미지는 시안 크기 유지) */ .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 20svh; height: 20svh;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 7.85svh; letter-spacing: -0.157svh; -webkit-text-stroke-width: 0.746svh;} .layerpopup-side-right.layerpopup-profile .layer-inner {width: 85svh; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-profile .profile-top {position: relative; height: 11.495svh; background: #3c008f;} .layerpopup-profile .profile-top .title {position: absolute; left: 3.856svh; top: 60.18%; transform: translateY(-50%); color: #7556ff; font-family: var(--ft-family_Poppins-700); font-size: 6.138svh; line-height: 5.533svh; text-transform: uppercase;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close {top: 4.282svh; right: 4.282svh; width: 5.272svh; height: 5.272svh;} .layerpopup-profile .profile-card {position: relative; width: 79.168svh; height: 42.654svh; margin: 2.36svh auto 0; border-radius: 2.519svh; background: linear-gradient(180deg, #5702ca 0%, #8125ff 100%); box-shadow: 0 0.787svh 0.944svh rgba(0, 7, 85, .44), inset 0 0 0 0.078svh #ea8900, inset 0 0 0 0.314svh #fffbd3, inset 0 0 0 0.394svh #ff8306;} .layerpopup-profile .profile-card__user {position: absolute; left: 4.88svh; right: 3.045svh; top: 5.03svh; display: flex; align-items: center; gap: 2.284svh;} .layerpopup-profile .profile-card__user .thumb {position: relative; flex: 0 0 auto; width: 17.955svh; height: 17.955svh;} .layerpopup-profile .profile-card__user .thumb::before {content: ""; position: absolute; left: 0.586svh; top: 0.586svh; width: 16.785svh; height: 16.785svh; border-radius: 50%; background: linear-gradient(180deg, #310560 0%, #440096 100%);} .layerpopup-profile .profile-card__user .thumb img {position: relative; display: block; width: 16.785svh; height: 16.785svh; margin: 0.586svh; border-radius: 50%; object-fit: cover;} .layerpopup-profile .profile-card__user .thumb::after {content: ""; position: absolute; inset: 0; padding: 1.039svh; border-radius: 50%; background: linear-gradient(180deg, #6b0fe5 0%, #7619f4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .layerpopup-profile .profile-card__user .info {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.268svh;} .layerpopup-profile .profile-card__user .name {font-family: var(--ft-family_NotoSans-700); font-size: 3.934svh; line-height: 1; letter-spacing: -0.078svh; white-space: nowrap; max-width: 100%; padding-bottom: 0.2em; overflow: hidden; text-overflow: ellipsis;} .layerpopup-profile .profile-card__user .id {display: flex; align-items: center; gap: 1.522svh;} .layerpopup-profile .profile-card__user .id .label {font-family: var(--ft-family_NotoSans-700); font-size: 3.148svh; line-height: 1; letter-spacing: -0.063svh;} .layerpopup-profile .profile-card__user .id .num {min-width: 19.478svh; height: 5.194svh; padding: 0 2.284svh; box-sizing: border-box; background: rgba(74, 0, 173, .7); border-radius: 8.374svh; color: rgba(255, 255, 255, .7); font-family: var(--ft-family_NotoSans-600), var(--ft-family_NotoSans-700), sans-serif; font-size: 3.148svh; line-height: 5.194svh; text-align: center;} .layerpopup-profile .profile-card__user .id .label {background-image: linear-gradient(180deg, #f6cff5 0%, #9afef6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .layerpopup-profile .profile-card__stat {position: absolute; left: 50%; top: 26.048svh; transform: translateX(-50%); width: 76.492svh; height: 15.264svh; display: flex; align-items: center; justify-content: center; gap: 0.708svh; background: rgba(88, 3, 204, .05); border-radius: 1.574svh; box-shadow: 0 0.157svh 0.268svh 0.952svh rgba(104, 16, 223, .64), inset 0 0.236svh 0.102svh 0.19svh rgba(255, 255, 255, .25), inset 0 0 2.36svh 0.381svh rgba(255, 255, 255, .19);} .layerpopup-profile .profile-card__stat .stat {flex: 0 0 auto; display: flex; align-items: center; width: 37.101svh; height: 8.892svh;} .layerpopup-profile .profile-card__stat .divider {flex: 0 0 auto; width: 0.472svh; height: 9.758svh; background: #9b71ff; opacity: .66; border-radius: 0.158svh;} .layerpopup-profile .profile-card__stat .ico {flex: 0 0 auto; display: block;} .layerpopup-profile .profile-card__stat .txt {display: flex; flex-direction: column; gap: 0.864svh;} .layerpopup-profile .profile-card__stat .label {color: #cb88ff; font-family: var(--ft-family_NotoSansDisplay-800i); font-style: italic; font-size: 2.518svh; line-height: 1; letter-spacing: -0.049svh;} .layerpopup-profile .profile-card__stat .value {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 2.834svh; line-height: 1; white-space: nowrap;} .layerpopup-profile .profile-card__stat .value .cur {color: #ffea00; font-size: inherit; font-family: inherit;} .layerpopup-profile .stat--lv .ico {width: 9.608svh; height: 6.958svh; margin-left: 2.107svh; filter: drop-shadow(0 0.571svh 0.157svh #5305bd);} .layerpopup-profile .stat--lv .ico img {width: 100%; height: 100%; object-fit: contain;} .layerpopup-profile .stat--lv .txt {margin-left: 1.539svh;} .layerpopup-profile .stat--point .ico {width: 8.073svh; height: 8.073svh; margin-left: 1.629svh; background: url(../../../images/store/common/icon_vippoint.png) 50% 50% / contain no-repeat; filter: drop-shadow(0 0.761svh 0.157svh #5305bd);} .layerpopup-profile .stat--point .txt {margin-left: 1.157svh;} .layerpopup-profile .stat--point .value {font-size: 3.148svh;} .layerpopup-profile .profile-bottom {margin: auto 0 6svh; display: flex; flex-direction: column; align-items: center; gap: 4svh;} .layerpopup-profile .btn-backtogame {position: relative; width: 57.549svh; height: 13.535svh; padding: 0; filter: drop-shadow(0 0.44svh 0.33svh rgba(41, 0, 91, .42));} .layerpopup-profile .btn-backtogame .btn {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 13.535svh; border-radius: 4.421svh; background: linear-gradient(180deg, #23c5ff 18.241%, #436bff 40.832%, #3e36d2 89.242%); box-shadow: inset 0 -0.401svh 0.268svh rgba(18, 5, 112, .28), inset 0 -0.268svh 0.535svh #1c096d, inset 0 0 1.096svh #006fff;} .layerpopup-profile .btn-backtogame .glow {position: absolute; left: 1.53%; right: 1.72%; top: calc(50% - 0.276svh); transform: translateY(-50%); height: 12.105svh; border-radius: 3.758svh; background: linear-gradient(180deg, #00eeff 0%, #4681ff 38.462%, #401cc2 90.385%, #3c2bc4 100%); box-shadow: inset 0 -0.22svh 0.133svh rgba(76, 67, 247, .85); filter: blur(0.132svh);} .layerpopup-profile .btn-backtogame .shine {position: absolute; left: 2.29%; right: 2.49%; top: calc(50% - 0.605svh); transform: translateY(-50%); height: 10.784svh; border-radius: 3.316svh; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 30.769%); opacity: .85; filter: blur(0.055svh);} .layerpopup-profile .btn-backtogame .txt {position: absolute; left: 8.03%; right: 8.08%; top: calc(50% - 0.394svh); transform: translateY(-50%); height: 10.299svh; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800); font-size: 6.162svh; line-height: 1; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #99dfff 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.133svh 0 #0084ff) drop-shadow(0 0.401svh 0.241svh #000b89) drop-shadow(0 0.268svh 1.057svh #1341c7);} .layerpopup-profile .btn-logout {width: 22.998svh; height: 7.813svh; padding: 0; color: #886dff; font-family: var(--ft-family_NotoSansDisplay-700); font-size: 5.502svh; line-height: 7.737svh; letter-spacing: -0.11svh; text-transform: uppercase; text-decoration: underline;} /* lv-diamond-comm */ .lv-diamond-comm {position: relative; display: block; width: 100%; height: 100%;} .lv-diamond-comm::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../../../images/store/common/img_lv_bg.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.584svh 0.343svh rgba(55, 3, 120, .58));} .lv-diamond-comm > span {position: absolute; left: 0; top: -3.33%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); font-size: 3.574svh; line-height: 1.6svh; letter-spacing: -0.071svh; text-align: center; text-transform: uppercase; -webkit-text-stroke: 0.34svh rgba(255, 255, 0, .5); background-image: none;} .lv-diamond-comm > span::after {content: attr(data-lv); position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #963800 0%, #5f2103 83.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .lv-diamond-comm.is-off::before {background-image: url(../../../images/store/common/img_lv_bg_off.png);} .lv-diamond-comm.is-off > span {font-family: var(--ft-family_NotoSans-800); font-size: 3.375svh; letter-spacing: -0.068svh; -webkit-text-stroke: 0;} .lv-diamond-comm.is-off > span::after {background-image: linear-gradient(180deg, #fff 0%, #e7c7ff 83.17%);} .point-gauge {position: relative; width: 73.5svh; height: 23.139svh;} .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 22.971svh; height: 22.971svh; margin: 0 auto 2.017svh;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 9.011svh; letter-spacing: -0.179svh; -webkit-text-stroke-width: 0.857svh;} .layerpopup-payment-complete .point-gauge, .layerpopup-login-reward .point-gauge {transform: scale(0.7059); transform-origin: 50% 0; margin: 0 calc(50% - 36.75svh) -0.863svh;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd {width: 51.884svh !important; max-width: 100%;} .point-gauge > span {position: absolute;} .point-gauge__frame {left: 0; top: 3.879svh; width: 73.5svh; height: 15.137svh; background: url(../../../images/store/common/bg_point_gauge.svg?v=260916) 50% 50% / 100% 100% no-repeat;} .point-gauge__title {left: 17.218svh; top: 0.408svh; width: 38.996svh; height: 7.01svh; background: url(../../../images/store/common/img_gauge_title.png) 50% 50% / 100% 100% no-repeat;} .point-gauge__bar {left: 10.753svh; top: 8.167svh; width: 51.994svh; height: 6.397svh; border-radius: 0.68svh; background: linear-gradient(0deg, #3b1b8e 0%, #1b005e 100%);} .point-gauge__bar::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.476svh; border-radius: inherit; background: linear-gradient(270deg, #4f21c3 0%, #7706ce 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__track {left: 11.774svh; top: 9.188svh; width: 49.953svh; height: 4.355svh; border-radius: 0.408svh; overflow: hidden;} .point-gauge__fill {display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e3a138 1.44%, #ffff6b 7.21%, #f55f51 83.65%, #f475fe 100%); transition: width .3s; animation: pointGaugeFill 1s cubic-bezier(.22, .61, .36, 1) .25s backwards;} .point-gauge.is-max .point-gauge__fill {background: linear-gradient(180deg, #38c9e3 1.44%, #6bffcf 7.21%, #6756ff 83.65%, #7a75fe 100%);} .point-gauge .point-gauge__max {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); filter: drop-shadow(0 0.046em 0 #e82300) drop-shadow(0 0.12em 0.07em rgba(59, 0, 83, .8)); background-image: linear-gradient(180deg, #fff 34.07%, #ffef79 72.1%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 2.943svh; line-height: 1; text-align: center;} .point-gauge__level {left: 4.9svh; top: 6.806svh; width: 9.188svh; height: 9.188svh;} .point-gauge__reward {left: 59.704svh; top: 6.193svh; width: 8.821svh; height: 10.263svh; background: url(../../../images/store/common/icon_reward.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__badge {position: absolute; left: 4.88svh; top: -0.408svh; width: 5.036svh; height: 5.036svh; box-sizing: border-box; padding-bottom: 0.612svh; display: flex; align-items: center; justify-content: center; background: url(../../../images/store/common/icon_reddot.png) 50% 50% / 100% 100% no-repeat; color: #fff; font-family: var(--ft-family_NotoSans-800); font-size: 2.722svh; line-height: 1; text-align: center; text-shadow: 0 0.068svh 0 rgba(119, 0, 0, .26);} .point-gauge__panel {left: 50%; top: 14.087svh; transform: translateX(-50%); width: auto; height: 6.602svh; display: flex; align-items: center; justify-content: center; gap: 0.336svh; padding: 0 1.346svh; border-radius: 0 0 3.062svh 3.062svh; background: linear-gradient(0deg, #a446fb 0%, #5621c1 100%); box-shadow: 0 0.408svh 0.68svh rgba(46, 21, 101, .5);} .point-gauge__panel::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.136svh; border-radius: inherit; background: linear-gradient(0deg, #ee68fa 0%, #9b30ff 21%, #571cba 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__panel::before {content: ""; position: absolute; left: 0.544svh; right: 0.544svh; top: 0.476svh; bottom: 0.544svh; border-radius: 0.68svh 0.68svh 2.722svh 2.722svh; background: linear-gradient(0deg, #5704b4 9%, #110361 100%);} .point-gauge__icon {position: relative; flex: 0 0 auto; width: 5.172svh; height: 5.172svh; background: url(../../../images/store/common/icon_point.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__num {position: relative; flex: 0 0 auto; height: 4.22svh; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 3.131svh; line-height: 1; letter-spacing: -0.062svh; text-align: center; white-space: nowrap;} .point-gauge__num .cur {color: #ff0; font-family: inherit; font-size: inherit;} @keyframes pointGaugeFill { from {width: 0;} } .layerpopup-side-right.layerpopup-doubleupoint .layer-inner {display: flex; flex-direction: column; overflow: hidden; width: 75svh; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close {top: 3.472svh; right: 3.472svh; width: 7.222svh; height: 7.222svh;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::before {width: 7.222svh; height: 7.222svh;} .layerpopup-doubleupoint .dpoint-top {position: relative; flex: 0 0 auto; height: 53.125svh; background: url(../../../images/popup/doubleupoint/v2/img_top_banner.jpg) 50% 0 / 100% auto no-repeat;} .layerpopup-doubleupoint .dpoint-top::before {content: ""; position: absolute; left: 0; top: 38.75svh; width: 100%; height: 15.486svh; background: linear-gradient(180deg, rgba(43, 1, 96, 0) 0%, #260352 16.35%, rgba(43, 1, 96, .66) 65.87%, rgba(43, 1, 96, 0) 96.15%);} .layerpopup-doubleupoint .dpoint-top__txt {position: absolute; left: 8.198svh; top: 9.306svh; width: 40.695svh; height: 16.666svh; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 3.472svh; line-height: 4.444svh; letter-spacing: -0.07svh; -webkit-text-stroke: 0.375svh #bc339a; paint-order: stroke fill; text-shadow: 0 0.375svh 0 #84186a, 0 0.209svh 0.5svh rgba(199, 48, 50, .77);} .layerpopup-doubleupoint .dpoint-top .point-gauge {position: absolute; left: 0.75svh; top: 29.303svh;} .layerpopup-doubleupoint .layer-wrapper {overflow-x: hidden; overflow-y: auto; position: relative; flex: 1 1 auto; margin-top: -11.181svh; padding-top: 11.181svh; scrollbar-width: none; -ms-overflow-style: none;} .layerpopup-doubleupoint .layer-wrapper::-webkit-scrollbar {display: none;} .layerpopup-doubleupoint .reward-list > .item {position: relative; height: 23.611svh; padding: 0.799svh 0 0 20.486svh;} .layerpopup-doubleupoint .level-wrap {position: absolute; left: 5.625svh; top: 6.355svh; width: 9.111svh; height: 9.111svh;} .layerpopup-doubleupoint .level-wrap::before, .layerpopup-doubleupoint .level-wrap::after {content: ""; position: absolute; left: 50%; width: 1.571svh; height: 1.571svh; background: rgba(127, 34, 252, .5); border-radius: 0.277svh; transform: translateX(-50%) rotate(45deg);} .layerpopup-doubleupoint .level-wrap::before {top: -5.243svh;} .layerpopup-doubleupoint .level-wrap::after {top: 12.812svh;} .layerpopup-doubleupoint .reward-wrap {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 1.574svh 1.616svh 0; position: relative; width: 50.416svh; height: 20.167svh; border-radius: 2.292svh; background: linear-gradient(180deg, #6007d8 0%, #8831ff 88.942%); box-shadow: 0 0.764svh 0.916svh rgba(55, 3, 120, .8), inset 0 0 0 0.076svh #ea8900, inset 0 0 0 0.382svh #fffbd3, inset 0 0 0 0.458svh #ff8306;} .layerpopup-doubleupoint .set-box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 11.458svh; gap: 0.458svh;} .layerpopup-doubleupoint .set-box .set {position: relative; flex: 0 0 auto; width: 11.458svh; height: 11.458svh; border-radius: 0.972svh; background: linear-gradient(180deg, #4c1bb5 0%, #681bd3 100%);} .layerpopup-doubleupoint .set-box .set img {position: absolute; left: 50%; top: 0.573svh; width: 7.104svh; height: 7.104svh; object-fit: contain; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt-area {position: absolute; left: 50%; top: 8.124svh; width: 6.414svh; height: 1.796svh; display: flex; align-items: center; justify-content: center; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 2.566svh; line-height: 1; text-align: center; white-space: nowrap;} .layerpopup-doubleupoint .btn-area {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28.542svh; height: 7.014svh;} .layerpopup-doubleupoint .btn-claim {position: relative; top: 1.343svh; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 1.875svh; background: linear-gradient(180deg, #b4f84a 18.241%, #4ac535 40.832%, #056a0a 89.242%); box-shadow: 0 0.486svh 0.486svh rgba(55, 3, 120, .8), inset 0 -0.188svh 0.125svh rgba(0, 59, 1, .65), inset 0 -0.125svh 0.25svh #055017, inset 0 0 0.512svh #057407;} .layerpopup-doubleupoint .btn-claim::before {content: ""; position: absolute; left: 0.972svh; top: 0.417svh; width: 26.531svh; height: 2.222svh; border-radius: 6.945svh; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;} .layerpopup-doubleupoint .btn-claim .txt {position: absolute; left: 14.36%; right: 13.14%; top: 8.91%; bottom: 15.84%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800), var(--ft-family_NotoSans-800), sans-serif; font-size: 3.89svh; line-height: 1; letter-spacing: -0.078svh; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.085svh 0 #0d8800) drop-shadow(0 0.254svh 0.152svh #0a5b0c) drop-shadow(0 0.169svh 0.667svh rgba(5, 80, 23, .88));} .layerpopup-doubleupoint .btn-claim[disabled] {cursor: default;} .layerpopup-doubleupoint .btn-claim[disabled]::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 1.806svh; background: rgba(29, 0, 97, .6);} .layerpopup-doubleupoint .claimed-text {font-size: 3.472svh; letter-spacing: -0.139svh;} .layerpopup-doubleupoint .item.unlock .reward-wrap::after {content: ""; position: absolute; left: 46.528svh; top: 15.713svh; width: 4.722svh; height: 5.332svh; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.381svh 0.48svh rgba(40, 0, 88, .25));} .layerpopup-doubleupoint .item.lock .set-box, .layerpopup-doubleupoint .item.lock .btn-area {display: none;} .layerpopup-doubleupoint .item.lock .reward-wrap::after {content: ""; position: absolute; left: 50%; top: 50%; width: 4.736svh; height: 5.348svh; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.382svh 0.482svh rgba(40, 0, 88, .25)); transform: translate(-50%, -50%);} .layerpopup-doubleupoint .btn-top-renew {right: 3.472svh; bottom: 4.861svh; width: 9.028svh; height: 9.028svh;} } } /* * [해상도 ~ 480px] * - 모바일 (최소 360px까지) * - 360 기준 / DPR 3 / 3.6 * - 모바일 ui 적용 (mode-mobile) */ @media all and (max-width:480px) { /* layerpopup (profile) : 개편 UI */ .layerpopup-side-right.layerpopup-profile .layer-inner {width: 100vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-profile .profile-top {position: relative; height: 13.524vw; background: #3c008f;} .layerpopup-profile .profile-top .title {position: absolute; left: 4.536vw; top: 60.18%; transform: translateY(-50%); color: #7556ff; font-family: var(--ft-family_Poppins-700); font-size: 7.221vw; line-height: 6.509vw; text-transform: uppercase;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close {top: 5.038vw; right: 5.038vw; width: 6.202vw; height: 6.202vw;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-profile .button-layerpopup-close::before {left: 50%; top: 0; width: 100%; height: auto; aspect-ratio: 78 / 84.8; background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='78' height='84.7988' viewBox='0 0 78 84.7988' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='BTN_Close'%3E %3Cg id='Union' filter='url(%23filter0_d_6088_10645)'%3E %3Cmask id='path-1-outside-1_6088_10645' maskUnits='userSpaceOnUse' x='9.00064' y='10.0003' width='60' height='60' fill='black'%3E %3Crect fill='white' x='9.00064' y='10.0003' width='60' height='60'/%3E %3Cpath d='M16.3975 12.4216C16.9604 11.8599 17.8736 11.8599 18.4365 12.4216L38.9717 32.9118L59.4981 12.4323C60.061 11.871 60.9733 11.8709 61.5361 12.4323L66.5117 17.3972C67.0745 17.9589 67.0746 18.8697 66.5117 19.4314L45.9854 39.9108L66.4971 60.3767C67.0601 60.9384 67.0601 61.8491 66.4971 62.4108L61.5225 67.3747C60.9595 67.9364 60.0464 67.9364 59.4834 67.3747L38.9717 46.9089L18.4502 67.3855C17.8872 67.9472 16.9751 67.9472 16.4121 67.3855L11.4365 62.4216C10.8736 61.8599 10.8736 60.9491 11.4365 60.3874L31.958 39.9099L11.4229 19.4196C10.8599 18.8579 10.8599 17.9472 11.4229 17.3855L16.3975 12.4216Z'/%3E %3C/mask%3E %3Cpath d='M16.3975 12.4216C16.9604 11.8599 17.8736 11.8599 18.4365 12.4216L38.9717 32.9118L59.4981 12.4323C60.061 11.871 60.9733 11.8709 61.5361 12.4323L66.5117 17.3972C67.0745 17.9589 67.0746 18.8697 66.5117 19.4314L45.9854 39.9108L66.4971 60.3767C67.0601 60.9384 67.0601 61.8491 66.4971 62.4108L61.5225 67.3747C60.9595 67.9364 60.0464 67.9364 59.4834 67.3747L38.9717 46.9089L18.4502 67.3855C17.8872 67.9472 16.9751 67.9472 16.4121 67.3855L11.4365 62.4216C10.8736 61.8599 10.8736 60.9491 11.4365 60.3874L31.958 39.9099L11.4229 19.4196C10.8599 18.8579 10.8599 17.9472 11.4229 17.3855L16.3975 12.4216Z' fill='url(%23paint0_linear_6088_10645)'/%3E %3Cpath d='M16.3975 12.4216L15.3804 11.4022L15.3803 11.4023L16.3975 12.4216ZM18.4365 12.4216L19.4536 11.4022L19.4536 11.4022L18.4365 12.4216ZM38.9717 32.9118L37.9546 33.9312L38.9716 34.946L39.9888 33.9312L38.9717 32.9118ZM59.4981 12.4323L58.4813 11.4127L58.481 11.4129L59.4981 12.4323ZM61.5361 12.4323L62.5533 11.413L62.553 11.4127L61.5361 12.4323ZM66.5117 17.3972L67.5291 16.378L67.5289 16.3778L66.5117 17.3972ZM66.5117 19.4314L67.5288 20.4508L67.5288 20.4507L66.5117 19.4314ZM45.9854 39.9108L44.9683 38.8914L43.9466 39.9108L44.9683 40.9302L45.9854 39.9108ZM66.4971 60.3767L67.5142 59.3573L67.5142 59.3573L66.4971 60.3767ZM66.4971 62.4108L65.48 61.3915L65.4799 61.3915L66.4971 62.4108ZM61.5225 67.3747L62.5396 68.3941L62.5396 68.394L61.5225 67.3747ZM59.4834 67.3747L60.5005 66.3554L60.5005 66.3553L59.4834 67.3747ZM38.9717 46.9089L39.9888 45.8895L38.9717 44.8747L37.9546 45.8895L38.9717 46.9089ZM18.4502 67.3855L19.4673 68.4048L19.4673 68.4048L18.4502 67.3855ZM16.4121 67.3855L17.4292 66.3661L17.4291 66.366L16.4121 67.3855ZM11.4365 62.4216L10.4194 63.4409L10.4195 63.441L11.4365 62.4216ZM11.4365 60.3874L12.4536 61.4068L12.4537 61.4067L11.4365 60.3874ZM31.958 39.9099L32.9752 40.9292L33.9967 39.9098L32.9751 38.8905L31.958 39.9099ZM11.4229 19.4196L10.4057 20.439L10.4057 20.439L11.4229 19.4196ZM11.4229 17.3855L12.44 18.4048L12.44 18.4048L11.4229 17.3855ZM16.3975 12.4216L17.4146 13.4409C17.4159 13.4396 17.4163 13.4395 17.4158 13.4398C17.4153 13.4401 17.4148 13.4404 17.4144 13.4405C17.4139 13.4408 17.4148 13.4403 17.417 13.4403C17.4192 13.4403 17.4201 13.4408 17.4196 13.4405C17.4192 13.4404 17.4187 13.4401 17.4182 13.4398C17.4177 13.4395 17.4181 13.4396 17.4194 13.4409L18.4365 12.4216L19.4536 11.4022C18.3286 10.2796 16.5054 10.2796 15.3804 11.4022L16.3975 12.4216ZM18.4365 12.4216L17.4194 13.4409L37.9546 33.9312L38.9717 32.9118L39.9888 31.8925L19.4536 11.4022L18.4365 12.4216ZM38.9717 32.9118L39.9888 33.9312L60.5151 13.4517L59.4981 12.4323L58.481 11.4129L37.9546 31.8924L38.9717 32.9118ZM59.4981 12.4323L60.5148 13.452C60.5162 13.4507 60.5166 13.4505 60.5161 13.4508C60.5157 13.4511 60.5152 13.4513 60.5148 13.4515C60.5142 13.4517 60.5151 13.4513 60.5171 13.4513C60.5192 13.4513 60.5201 13.4517 60.5194 13.4515C60.519 13.4513 60.5185 13.451 60.518 13.4508C60.5175 13.4504 60.5179 13.4506 60.5193 13.4519L61.5361 12.4323L62.553 11.4127C61.428 10.2907 59.6061 10.291 58.4813 11.4127L59.4981 12.4323ZM61.5361 12.4323L60.519 13.4517L65.4946 18.4165L66.5117 17.3972L67.5289 16.3778L62.5533 11.413L61.5361 12.4323ZM66.5117 17.3972L65.4944 18.4163C65.4957 18.4176 65.4958 18.418 65.4954 18.4173C65.495 18.4167 65.4945 18.4159 65.4942 18.4151C65.4936 18.4137 65.4938 18.4135 65.4938 18.4144C65.4938 18.4153 65.4936 18.415 65.4942 18.4135C65.4946 18.4127 65.495 18.4118 65.4955 18.4111C65.496 18.4104 65.4959 18.4107 65.4946 18.412L66.5117 19.4314L67.5288 20.4507C68.6558 19.3262 68.6551 17.5021 67.5291 16.378L66.5117 17.3972ZM66.5117 19.4314L65.4947 18.412L44.9683 38.8914L45.9854 39.9108L47.0024 40.9302L67.5288 20.4508L66.5117 19.4314ZM45.9854 39.9108L44.9683 40.9302L65.48 61.396L66.4971 60.3767L67.5142 59.3573L47.0025 38.8915L45.9854 39.9108ZM66.4971 60.3767L65.48 61.396C65.4813 61.3974 65.4814 61.3977 65.4809 61.397C65.4805 61.3963 65.4801 61.3955 65.4797 61.3947C65.4791 61.3932 65.4793 61.3929 65.4793 61.3938C65.4793 61.3946 65.4791 61.3943 65.4797 61.3928C65.4801 61.392 65.4805 61.3912 65.4809 61.3905C65.4814 61.3898 65.4813 61.3901 65.48 61.3915L66.4971 62.4108L67.5142 63.4302C68.641 62.3059 68.641 60.4817 67.5142 59.3573L66.4971 60.3767ZM66.4971 62.4108L65.4799 61.3915L60.5053 66.3554L61.5225 67.3747L62.5396 68.394L67.5142 63.4302L66.4971 62.4108ZM61.5225 67.3747L60.5054 66.3554C60.504 66.3567 60.5037 66.3568 60.5042 66.3565C60.5046 66.3562 60.5051 66.3559 60.5055 66.3558C60.5061 66.3556 60.5051 66.356 60.5029 66.356C60.5007 66.356 60.4998 66.3556 60.5004 66.3558C60.5008 66.3559 60.5013 66.3562 60.5017 66.3565C60.5022 66.3568 60.5018 66.3567 60.5005 66.3554L59.4834 67.3747L58.4663 68.3941C59.5914 69.5167 61.4145 69.5167 62.5396 68.3941L61.5225 67.3747ZM59.4834 67.3747L60.5005 66.3553L39.9888 45.8895L38.9717 46.9089L37.9546 47.9283L58.4663 68.3941L59.4834 67.3747ZM38.9717 46.9089L37.9546 45.8895L17.4331 66.3661L18.4502 67.3855L19.4673 68.4048L39.9888 47.9282L38.9717 46.9089ZM18.4502 67.3855L17.4331 66.3661C17.4317 66.3675 17.4313 66.3677 17.4318 66.3674C17.4322 66.3671 17.4327 66.3668 17.4331 66.3666C17.4338 66.3663 17.4331 66.3668 17.4312 66.3668C17.4292 66.3668 17.4285 66.3663 17.4292 66.3666C17.4296 66.3668 17.4301 66.3671 17.4306 66.3674C17.4311 66.3677 17.4306 66.3675 17.4292 66.3661L16.4121 67.3855L15.395 68.4048C16.5201 69.5274 18.3422 69.5274 19.4673 68.4048L18.4502 67.3855ZM16.4121 67.3855L17.4291 66.366L12.4536 61.4022L11.4365 62.4216L10.4195 63.441L15.3951 68.4049L16.4121 67.3855ZM11.4365 62.4216L12.4537 61.4022C12.4523 61.4009 12.4522 61.4006 12.4527 61.4013C12.4531 61.4019 12.4536 61.4028 12.4539 61.4036C12.4545 61.4051 12.4543 61.4053 12.4543 61.4045C12.4543 61.4036 12.4545 61.4039 12.4539 61.4054C12.4536 61.4062 12.4531 61.4071 12.4527 61.4077C12.4522 61.4084 12.4523 61.4081 12.4536 61.4068L11.4365 60.3874L10.4194 59.368C9.29257 60.4924 9.29264 62.3166 10.4194 63.4409L11.4365 62.4216ZM11.4365 60.3874L12.4537 61.4067L32.9752 40.9292L31.958 39.9099L30.9409 38.8905L10.4194 59.3681L11.4365 60.3874ZM31.958 39.9099L32.9751 38.8905L12.44 18.4003L11.4229 19.4196L10.4057 20.439L30.9409 40.9292L31.958 39.9099ZM11.4229 19.4196L12.44 18.4003C12.4387 18.399 12.4386 18.3986 12.439 18.3994C12.4395 18.4 12.4399 18.4008 12.4402 18.4016C12.4408 18.4031 12.4406 18.4034 12.4406 18.4025C12.4406 18.4017 12.4408 18.402 12.4402 18.4034C12.4399 18.4043 12.4394 18.4051 12.439 18.4057C12.4385 18.4065 12.4386 18.4061 12.44 18.4048L11.4229 17.3855L10.4058 16.3661C9.2789 17.4905 9.27898 19.3147 10.4057 20.439L11.4229 19.4196ZM11.4229 17.3855L12.44 18.4048L17.4146 13.4409L16.3975 12.4216L15.3803 11.4023L10.4057 16.3661L11.4229 17.3855Z' fill='url(%23paint1_linear_6088_10645)' mask='url(%23path-1-outside-1_6088_10645)'/%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3Cfilter id='filter0_d_6088_10645' x='4.37664' y='10.5603' width='69.1812' height='74.2385' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E %3CfeOffset dy='10.368'/%3E %3CfeGaussianBlur stdDeviation='2.592'/%3E %3CfeComposite in2='hardAlpha' operator='out'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.151282 0 0 0 0 0 0 0 0 0 0.283654 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_6088_10645'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_6088_10645' result='shape'/%3E %3C/filter%3E %3ClinearGradient id='paint0_linear_6088_10645' x1='38.9672' y1='12.0003' x2='38.9672' y2='67.8068' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FFF6FF'/%3E %3Cstop offset='1' stop-color='%23DCC8FF'/%3E %3C/linearGradient%3E %3ClinearGradient id='paint1_linear_6088_10645' x1='38.9672' y1='12.0003' x2='38.9672' y2='67.8068' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FAE4FF'/%3E %3Cstop offset='1' stop-color='%23B39EFF'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E") 50% 50% / 100% 100% no-repeat; border-radius: 0; transform: translateX(-50%);} .layerpopup-profile .profile-card {position: relative; width: 93.139vw; height: 50.181vw; margin: 2.777vw auto 0; border-radius: 2.963vw; background: linear-gradient(180deg, #5702ca 0%, #8125ff 100%); box-shadow: 0 0.926vw 1.111vw rgba(0, 7, 85, .44), inset 0 0 0 0.092vw #ea8900, inset 0 0 0 0.37vw #fffbd3, inset 0 0 0 0.463vw #ff8306;} .layerpopup-profile .profile-card__user {position: absolute; left: 5.741vw; right: 3.582vw; top: 5.918vw; display: flex; align-items: center; gap: 2.687vw;} .layerpopup-profile .profile-card__user .thumb {position: relative; flex: 0 0 auto; width: 21.124vw; height: 21.124vw;} .layerpopup-profile .profile-card__user .thumb::before {content: ""; position: absolute; left: 0.69vw; top: 0.69vw; width: 19.747vw; height: 19.747vw; border-radius: 50%; background: linear-gradient(180deg, #310560 0%, #440096 100%);} .layerpopup-profile .profile-card__user .thumb img {position: relative; display: block; width: 19.747vw; height: 19.747vw; margin: 0.69vw; border-radius: 50%; object-fit: cover;} .layerpopup-profile .profile-card__user .thumb::after {content: ""; position: absolute; inset: 0; padding: 1.222vw; border-radius: 50%; background: linear-gradient(180deg, #6b0fe5 0%, #7619f4 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .layerpopup-profile .profile-card__user .info {flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.492vw;} .layerpopup-profile .profile-card__user .name {font-family: var(--ft-family_NotoSans-700); font-size: 4.628vw; line-height: 1; letter-spacing: -0.092vw; white-space: nowrap; max-width: 100%; padding-bottom: 0.2em; overflow: hidden; text-overflow: ellipsis;} .layerpopup-profile .profile-card__user .id {display: flex; align-items: center; gap: 1.791vw;} .layerpopup-profile .profile-card__user .id .label {font-family: var(--ft-family_NotoSans-700); font-size: 3.704vw; line-height: 1; letter-spacing: -0.074vw;} .layerpopup-profile .profile-card__user .id .num {min-width: 22.915vw; height: 6.111vw; padding: 0 2.687vw; box-sizing: border-box; background: rgba(74, 0, 173, .7); border-radius: 9.852vw; color: rgba(255, 255, 255, .7); font-family: var(--ft-family_NotoSans-600), var(--ft-family_NotoSans-700), sans-serif; font-size: 3.704vw; line-height: 6.111vw; text-align: center;} .layerpopup-profile .profile-card__user .id .label {background-image: linear-gradient(180deg, #f6cff5 0%, #9afef6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .layerpopup-profile .profile-card__stat {position: absolute; left: 50%; top: 30.645vw; transform: translateX(-50%); width: 89.991vw; height: 17.958vw; display: flex; align-items: center; justify-content: center; gap: 0.833vw; background: rgba(88, 3, 204, .05); border-radius: 1.852vw; box-shadow: 0 0.185vw 0.315vw 1.12vw rgba(104, 16, 223, .64), inset 0 0.278vw 0.12vw 0.224vw rgba(255, 255, 255, .25), inset 0 0 2.777vw 0.448vw rgba(255, 255, 255, .19);} .layerpopup-profile .profile-card__stat .stat {flex: 0 0 auto; display: flex; align-items: center; width: 43.648vw; height: 10.461vw;} .layerpopup-profile .profile-card__stat .divider {flex: 0 0 auto; width: 0.555vw; height: 11.48vw; background: #9b71ff; opacity: .66; border-radius: 0.186vw;} .layerpopup-profile .profile-card__stat .ico {flex: 0 0 auto; display: block;} .layerpopup-profile .profile-card__stat .txt {display: flex; flex-direction: column; gap: 1.017vw;} .layerpopup-profile .profile-card__stat .label {color: #cb88ff; font-family: var(--ft-family_NotoSansDisplay-800i); font-style: italic; font-size: 2.962vw; line-height: 1; letter-spacing: -0.058vw;} .layerpopup-profile .profile-card__stat .value {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 3.334vw; line-height: 1; white-space: nowrap;} .layerpopup-profile .profile-card__stat .value .cur {color: #ffea00; font-size: inherit; font-family: inherit;} .layerpopup-profile .stat--lv .ico {width: 11.303vw; height: 8.186vw; margin-left: 2.479vw; filter: drop-shadow(0 0.672vw 0.185vw #5305bd);} .layerpopup-profile .stat--lv .ico img {width: 100%; height: 100%; object-fit: contain;} .layerpopup-profile .stat--lv .txt {margin-left: 1.811vw;} .layerpopup-profile .stat--point .ico {width: 9.498vw; height: 9.498vw; margin-left: 1.917vw; background: url(../../../images/store/common/icon_vippoint.png) 50% 50% / contain no-repeat; filter: drop-shadow(0 0.896vw 0.185vw #5305bd);} .layerpopup-profile .stat--point .txt {margin-left: 1.361vw;} .layerpopup-profile .stat--point .value {font-size: 3.703vw;} .layerpopup-profile .profile-bottom {margin: auto 0 15.661vw; display: flex; flex-direction: column; align-items: center; gap: 9.062vw;} .layerpopup-profile .btn-backtogame {position: relative; width: 67.705vw; height: 15.923vw; padding: 0; filter: drop-shadow(0 0.518vw 0.388vw rgba(41, 0, 91, .42));} .layerpopup-profile .btn-backtogame .btn {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 15.923vw; border-radius: 5.201vw; background: linear-gradient(180deg, #23c5ff 18.241%, #436bff 40.832%, #3e36d2 89.242%); box-shadow: inset 0 -0.472vw 0.315vw rgba(18, 5, 112, .28), inset 0 -0.315vw 0.629vw #1c096d, inset 0 0 1.29vw #006fff;} .layerpopup-profile .btn-backtogame .glow {position: absolute; left: 1.53%; right: 1.72%; top: calc(50% - 0.325vw); transform: translateY(-50%); height: 14.241vw; border-radius: 4.421vw; background: linear-gradient(180deg, #00eeff 0%, #4681ff 38.462%, #401cc2 90.385%, #3c2bc4 100%); box-shadow: inset 0 -0.259vw 0.157vw rgba(76, 67, 247, .85); filter: blur(0.155vw);} .layerpopup-profile .btn-backtogame .shine {position: absolute; left: 2.29%; right: 2.49%; top: calc(50% - 0.712vw); transform: translateY(-50%); height: 12.687vw; border-radius: 3.901vw; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 30.769%); opacity: .85; filter: blur(0.065vw);} .layerpopup-profile .btn-backtogame .txt {position: absolute; left: 8.03%; right: 8.08%; top: calc(50% - 0.464vw); transform: translateY(-50%); height: 12.116vw; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800); font-size: 7.25vw; line-height: 1; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #99dfff 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.157vw 0 #0084ff) drop-shadow(0 0.472vw 0.283vw #000b89) drop-shadow(0 0.315vw 1.243vw #1341c7);} .layerpopup-profile .btn-logout {width: 27.056vw; height: 9.192vw; padding: 0; color: #886dff; font-family: var(--ft-family_NotoSansDisplay-700); font-size: 6.473vw; line-height: 9.102vw; letter-spacing: -0.13vw; text-transform: uppercase; text-decoration: underline;} /* layerpopup (common) */ [class*=layerpopup-common] .layer-wrapper {width: 75.926vw !important; border-width: 0.556vw; border-radius: 3.704vw;} /* 팝업 : 화면 높이에 맞춰 내부 스크롤, 하단 버튼만 고정 */ [class*=layerpopup-common]:not(.type-toast) .layer-wrapper {display: flex; flex-direction: column; overflow: visible; max-height: 90vh; max-height: 90svh;} [class*=layerpopup-common] .layer-top-area {flex: 0 0 auto;} [class*=layerpopup-common] .layer-inner {position: static; flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden auto; padding-bottom: 15.5vw;} [class*=layerpopup-common] .layer-footer {position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; padding-bottom: 5.556vw; border-radius: 0 0 3.148vw 3.148vw; background: linear-gradient(180deg, rgba(36,0,117,0) 0%, rgba(36,0,117,.75) 45%, rgba(36,0,117,.94) 100%);} [class*=layerpopup-common][class*=layerpopup-vip] .layer-footer {background-image: linear-gradient(180deg, rgba(119,18,65,0) 0%, rgba(119,18,65,.75) 45%, rgba(119,18,65,.94) 100%);} /* 닫기버튼은 스티키 푸터 위로 */ [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {z-index: 2;} [class*=layerpopup-common] .layer-inner > * {flex: 0 0 auto;} [class*=layerpopup-common].layerpopup-payment-complete .layer-wrapper {max-height: calc(90vh - 12.039vw); max-height: calc(90svh - 12.039vw);} /* 상단 돌출 이미지만큼 여유 */ [class*=layerpopup-common].layerpopup-upsell-unavailable .layer-wrapper {max-height: calc(90vh - 10.926vw); max-height: calc(90svh - 10.926vw);} [class*=layerpopup-common].layerpopup-login-bonus .layer-wrapper {max-height: calc(90vh - 3.333vw); max-height: calc(90svh - 3.333vw);} .layerpopup-vip-open .layer-wrapper .layer-top-area {padding-top: 4.63vw;} .layerpopup-vip-open .layer-wrapper .layer-top-area .img-main {margin-top: 0;} /* VIP 안내 : 상단 마크를 팝업 안쪽으로 (기획 예외) */ [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close {top: 3.148vw; right: 3.148vw; width: 7.222vw; height: 7.222vw;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle {left: 50%; right: auto; top: auto; bottom: -12.039vw; transform: translateX(-50%); width: 9.258vw; height: 9.258vw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'%3E%3Ccircle cx='26.5737' cy='26.5739' r='25.3659' fill='%23240075' stroke='%231398FF' stroke-width='2.4158'/%3E%3Crect x='10.871' y='39.458' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(-45 10.871 39.458)' fill='white'/%3E%3Crect x='13.6895' y='10.8711' width='40.2633' height='4.02633' rx='2.01316' transform='rotate(45 13.6895 10.8711)' fill='white'/%3E%3C/svg%3E") 50% 50% / 100% 100% no-repeat;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close.type-circle::after {display: none;} [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::before, [class*=layerpopup-common] .layer-wrapper > .button-layerpopup-close::after {width: 10.212vw; height: 0.8vw; border-radius: 4vw;} [class*=layerpopup-common] .layer-inner {padding: 5.556vw 0 15.5vw;} [class*=layerpopup-common] .layer-inner > *, [class*=layerpopup-common] .layer-contents > * {margin-bottom: 3.704vw;} [class*=layerpopup-common] .layer-header {margin-bottom: 1.852vw;} [class*=layerpopup-common] .layer-header .main-tit {font-size: 6.586vw;} [class*=layerpopup-common] .layer-header .sub-tit {margin-top: 1.852vw; font-size: 2.927vw;} [class*=layerpopup-common] .layer-header .sub-tit .point-img {width: 4.458vw; height: 4.458vw; margin-right: 0.833vw; vertical-align: -0.833vw;} [class*=layerpopup-common] .layer-contents {padding: 0 2.315vw;} .layerpopup-vip-levelup .layer-contents {padding: 0 0.695vw;} [class*=layerpopup-common] .layer-contents.inner-pd, [class*=layerpopup-common] .layer-contents .inner-pd {width: calc(100% - 9.259vw) !important; margin: 0 auto 3.704vw;} .layerpopup-vip-open .layer-contents.inner-pd, .layerpopup-vip-levelup .layer-contents.inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd, .layerpopup-vip-levelup .layer-contents .inner-pd {width: 100% !important;} .layerpopup-payment-complete-new .layer-contents .inner-pd, .layerpopup-login-reward .layer-contents .inner-pd {width: 61.123vw !important;} [class*=layerpopup-common] .layer-contents .content {font-size: 2.927vw !important; letter-spacing: .1vw !important;} [class*=layerpopup-common] .layer-contents .infobox {padding: 0 1.852vw; margin-bottom: 1.389vw; border-radius: 1.667vw; border-width: 0.37vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area {height: 14.055vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area > * {margin-right: 0.9259vw;;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-img {width: 7.039vw; height: 7.509vw;} [class*=layerpopup-common] .layer-contents .infobox .chip-info-area .chip-amount {max-width: calc(100% - 6.481vw); font-size: 5.928vw; background-image: linear-gradient(180deg, #ffee32 34.066%, #ffb200 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0.9px rgba(83, 0, 35, .7)) drop-shadow(0 1px 0 #9e2205);} [class*=layerpopup-common] .layer-contents .infobox.type-list {padding: 2.315vw 2.778vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list > * {margin-bottom: 2.778vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .title {font-size: 2.963vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item {padding-left: 1.852vw; margin-bottom: 1.852vw; font-size: 2.593vw;} [class*=layerpopup-common] .layer-contents .infobox.type-list .item::before {width: 0.741vw; height: 0.741vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item {flex: 0 0 calc(20% - 1.111vw); height: 11.111vw; padding: 0; margin-right: 1.389vw; margin-bottom: 1.389vw; gap: 0.370vw; border-width: 0.37vw; border-radius: 1.852vw;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon {margin-top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .icon img {top: 0;} [class*=layerpopup-common] .layer-contents .infobox-wrap .gift-icons .item .cnt {font-size: 2.593vw;} [class*=layerpopup-common] .layer-contents .notice {font-size: 3.333vw;} [class*=layerpopup-common] .layer-contents .circle-gauge {margin-top: 1.852vw;} [class*=layerpopup-common] .layer-footer .btn-complete {width: 40.741vw; height: 9.259vw;} .layerpopup-payment-complete-new .layer-footer .btn-complete, .layerpopup-login-reward .layer-footer .btn-complete, .layerpopup-login-bonus .layer-footer .btn-complete, .layerpopup-webstore-voucher .layer-footer .btn-complete, .layerpopup-account-not-found .layer-footer .btn-complete, .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 41.696vw; height: 9.257vw;} .layerpopup-login-bonus .layer-footer .btn-complete {width: 35.152vw; height: 7.761vw;} .layerpopup-upsell-unavailable .layer-footer .btn-complete {width: 41.539vw; height: 9.17vw;} .layerpopup-vip-open .layer-footer .btn-complete, .layerpopup-vip-levelup .layer-footer .btn-complete {width: 41.667vw; height: 9.259vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back, [class*=layerpopup-common] .layer-footer .btn-complete .bg-front {height: 91.667%; border-radius: 4.444vw;} [class*=layerpopup-common] .layer-footer .btn-complete .bg-back {top: 6.25%;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner {left: 0.278vw; top: 0.278vw; width: calc(100% - 0.556vw); height: calc(100% - 0.556vw); border-radius: 4.444vw;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before, [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {left: 0.278vw; width: calc(100% - 0.556vw); height: calc(50% - 0.278vw);} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::before {top: 0.278vw; border-radius: 46.296vw 46.296vw 0 0;} [class*=layerpopup-common] .layer-footer .btn-complete .front-inner::after {bottom: 0.278vw; border-radius: 0 0 46.296vw 46.296vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt {font-size: 4.444vw;} [class*=layerpopup-common] .layer-footer .btn-complete .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.370vw; -moz-text-stroke-width: 0.370vw; -ms-text-stroke-width: 0.370vw; text-stroke-width: 0.370vw;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-top-area {border-radius:3.5vw 3.5vw 0 0;} [class*=layerpopup-common] .layer-wrapper.over-visible .layer-inner {border-radius: 3.5vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-top-area {height: 41.667vw; border-width: 0.556vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-inner {padding-top: 4.63vw; border-radius: 0 0 3.5vw 3.5vw;} [class*=layerpopup-common] .layer-wrapper.half-bg .layer-inner .content {font-size: 2.593vw !important;} [class*=layerpopup-common].type-toast .layer-wrapper {position: absolute; left: 0; bottom: 0; width: 100% !important; max-width: 100% !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; animation: showLayerFromBottom .8s ease forwards;} /* layerpopup (common) : vip */ [class*=layerpopup-common][class*=layerpopup-vip] .layer-wrapper {width: 92.593vw !important;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .main-tit {font-size: 7.752vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .sub-tit, [class*=layerpopup-common][class*=layerpopup-vip] .layer-contents .content {font-size: 3.445vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-contents .infobox .chip-info-area .chip-amount {font-size: 6.977vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-footer .btn-complete .txt-area .txt {font-size: 5.168vw;} .layerpopup-upsell-unavailable .layer-header .main-tit {font-size: 7.009vw;} .layerpopup-upsell-unavailable .layer-contents .content {font-size: 3.115vw;} .layerpopup-login-bonus .layer-header .main-tit {font-size: 8.283vw;} [class*=layerpopup-common][class*=layerpopup-vip] .layer-header .sub-tit {font-size: 3.704vw;} /* layerpopup-full (common) */ [class*=layerpopup-full-common] .layer-wrapper {width: 100%;} [class*=layerpopup-full-common] .button-layerpopup-close {top: 3.704vw; right: 4.167vw; width: 7.222vw; height: 7.222vw;} [class*=layerpopup-full-common] .button-layerpopup-close::before, [class*=layerpopup-full-common] .button-layerpopup-close::after {width: 10.212vw; height: 0.8vw; border-radius: 4vw;} /* layerpopup (side) */ [class*=layerpopup-side] .layer-inner {width: 100%;} [class*=layerpopup-side] .button-layerpopup-close {top: 3.704vw; width: 7.222vw; height: 7.222vw;} [class*=layerpopup-side] .button-layerpopup-close::before, [class*=layerpopup-side] .button-layerpopup-close::after {width: 10.212vw; height: 0.8vw; border-radius: 4vw;} [class*=layerpopup-side] * {font-size: 1.5625vw;} .layerpopup-side-left .button-layerpopup-close {left: 4.167vw;} .layerpopup-side-right .button-layerpopup-close {right: 4.167vw;} /* layerpopup (mo-menu-comm) */ .mo-menu-comm .layer-inner {padding: 14.815vw 3.704vw 0;} .mo-menu-comm .layer-inner::before {top: 14.815vw; height: 0.556vw;} .mo-menu-comm .menu-area {margin: 12.963vw 0;} .mo-menu-comm .menu-area .menu-item > a {height: 18.519vw; padding: 0 3.704vw; font-size: 7.407vw;} /* layerpopup (gnb) */ .layerpopup-gnb .menu-area .lnb {margin-bottom: 9.259vw;} .layerpopup-gnb .menu-area .lnb .lnb-item {padding: 0 3.704vw;} .layerpopup-gnb .menu-area .lnb .lnb-item > a {height: 12.963vw; padding: 0 3.704vw; font-size: 4.63vw;} .layerpopup-gnb .menu-area .gnb-item.has-depth > a::after {right: 2.604vw; width: 3.333vw; height: 1.852vw;} .layerpopup-gnb .bottom-area {padding: 9.259vw 0; border-width: 0.37vw;} .layerpopup-gnb .bottom-area > * {margin-bottom: 7.407vw;} .layerpopup-gnb .btn-play {width: 61.852vw; height: 14.444vw;} .layerpopup-gnb .btn-play .bg-back, .layerpopup-gnb .btn-play .bg-front {height: 13.519vw; border-radius: 7.407vw;} .layerpopup-gnb .btn-play .bg-back {top: 0.926vw; box-shadow: 0 0.463vw 0.37vw 0 rgba(0, 0, 0, 0.30);} .layerpopup-gnb .btn-play .front-inner {left: 0.37vw; top: 0.37vw; width: calc(100% - 0.391vw); height: calc(100% - 0.391vw); border-radius: 7.407vw;} .layerpopup-gnb .btn-play .front-inner::before, .layerpopup-gnb .btn-play .front-inner::after {left: 0.37vw; width: calc(100% - 0.741vw); height: calc(50% - 0.37vw);} .layerpopup-gnb .btn-play .front-inner::before {top: 0.37vw; border-radius: 59.907vw 59.907vw 0 0; } .layerpopup-gnb .btn-play .front-inner::after {bottom: 0.37vw; border-radius: 0 0 59.907vw 59.907vw;} .layerpopup-gnb .btn-play .txt-area .txt {font-size: 7.407vw;} .layerpopup-gnb .btn-play .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.741vw; -moz-text-stroke-width: 0.741vw; -ms-text-stroke-width: 0.741vw; text-stroke-width: 0.741vw;} .layerpopup-gnb .sns-btns-comm [class*=btn-item] {width: 8.519vw; height: 8.519vw; margin: 0 4.63vw;} /* layerpopup (terms-menu) */ .layerpopup-terms-menu .menu-area .menu-item > a {justify-content: center; font-size: 7vw; text-align: center;} /* layerpopup (profile) */ .layerpopup-profile .profile-area .user-info {padding: 5.556vw 2.778vw;} .layerpopup-profile .profile-area .user-info > * {margin-bottom: 3.704vw;} .layerpopup-profile .profile-area .user-info .thumb {width: 12.037vw; height: 12.037vw;} .layerpopup-profile .profile-area .user-info .name {font-size: 5.556vw;} .layerpopup-profile .profile-area .user-info .id {min-width: 27.778vw; height: 5.556vw; padding: 0 3.704vw; border-radius: 3.704vw; font-size: 3.148vw;} .layerpopup-profile .profile-area .chip-info, .layerpopup-profile .profile-area .vip-info {min-height: 18.519vw; padding: 4.63vw 3.704vw;} .layerpopup-profile .profile-area .chip-info .amount {padding-left: 10.556vw; font-size: 7.407vw;} .layerpopup-profile .profile-area .chip-info .amount::before {width: 7.778vw; height: 7.963vw; margin-top: 0.25vw;} .layerpopup-profile .profile-area .vip-info > * {margin-right: 7.407vw;} .layerpopup-profile .profile-area .vip-info .lv-name {font-size: 4.63vw;} .layerpopup-profile .profile-area .vip-info .card-img {margin-left: 1.574vw; width: 9.444vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar {min-width: 31.296vw; padding: 0 3.704vw 0 5.185vw; height: 5.556vw; border-radius: 3.704vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar::before {left: -1.296vw; width: 6.481vw; height: 6.481vw;} .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info, .layerpopup-profile .profile-area .vip-info .gauge-bar .gauge-info * {font-size: 3.148vw;} .layerpopup-profile .bottom-area {padding: 5.556vw 0;} .layerpopup-profile .bottom-area .button-logout > .txt {font-size: 4.63vw;} /* layerpopup (layerpopup-login-modal) */ .layerpopup-login-modal {z-index: 101; top: var(--header-height); height: calc(100% - var(--header-height));} /* .layerpopup-login-modal::after {background: none;} */ .layerpopup-login-modal .layer-wrapper {width: 100% !important; height: 100%; border-radius: 0; animation: showLayerFromTop 0.7s ease forwards;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close {/*display: none;*/ top: 4.63vw; right: 3.704vw;} .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::before, .layerpopup-login-modal .layer-wrapper > .button-layerpopup-close::after {height: 1vw;} .layerpopup-login-modal iframe {height: 100% !important;} .layerpopup-login-modal[class*=layerpopup-common] .layer-wrapper {max-height: 100% !important;} /* layerpopup (login-prompt-comm) */ .layerpopup-login-prompt-comm .layer-top-area .img-main {width: 45vw; margin-top: -14.815vw;} /* layerpopup (login-prompt) */ .layerpopup-login-prompt .layer-top-area .img-main {width: 37.037vw; margin-top: -11.852vw; margin-bottom: 1.852vw;} .layerpopup-login-prompt .layer-header {margin-bottom: 3.704vw;} .layerpopup-login-prompt .layer-header .main-tit {font-size: 4.0741vw;} .layerpopup-login-prompt .layer-contents .notice {margin-bottom: 1.852vw !important; font-size: 2.963vw !important;} .layerpopup-login-prompt .layer-contents .notice:nth-of-type(2) {font-size: 2.593vw !important;} /* layerpopup (pw-reset-complete) */ .layerpopup-pw-reset-complete .layer-top-area .img-main {width: 44.444vw; margin-top: -10.833vw;} /* layerpopup (account-create-complete) */ .layerpopup-account-create-complete .layer-top-area .img-main {width: 39.444vw; margin-top: -11.667vw;} .layerpopup-account-create-complete .layer-header {margin-bottom: 3.704vw;} /* layerpopup (email-sent-complete) */ .layerpopup-email-sent-complete .layer-top-area .img-main {width: 62.593vw; margin-top: -14.815vw; margin-left: -2.315vw;} /* layerpopup (weblogin-blocked) */ .layerpopup-weblogin-blocked .layer-top-area .img-main {width: 35.833vw; margin-top: -11.667vw;} .layerpopup-weblogin-blocked .layer-contents .qr-img {width: 17.407vw;} /* layerpopup (account-not-found) */ .layerpopup-account-not-found .layer-inner {padding: 4.775vw 0 13.326vw;} /* 푸터가 absolute 라 bottom 기준점이 테두리 안쪽. 공용값(5.556vw)에서 테두리만큼 뺌 */ .layerpopup-account-not-found .layer-footer {padding-bottom: 4.074vw;} .layerpopup-account-not-found .layer-header {margin-bottom: 1.389vw;} .layerpopup-account-not-found .layer-header .main-tit {font-size: 7.037vw;} .layerpopup-account-not-found .layer-contents {margin-bottom: 5.602vw;} .layerpopup-account-not-found .layer-contents .content {font-size: 3.333vw !important;} /* layerpopup (levelup-reward)*/ /* .layerpopup-levelup-reward .layer-contents {margin-bottom: 1vw !important;} */ /* layerpopup (doubleupoint-levelup) */ .layerpopup-doubleupoint-levelup .layer-contents {padding: 0;} /* layerpopup (payment-complete) */ .layerpopup-payment-complete .layer-contents .content {font-size: 2.964vw !important;} .layerpopup-login-reward .layer-contents .content {font-size: 3.330vw !important;} .layerpopup-login-bonus .layer-contents .content {font-size: 3vw !important;} .layerpopup-payment-complete .content-ui > * {margin-bottom: 3.704vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm {width: 24.99vw; height: 24.99vw; margin: 0 auto 2.194vw;} .layerpopup-payment-complete-levelup .lv-diamond-comm > span {font-size: 9.802vw; letter-spacing: -0.196vw; -webkit-text-stroke-width: 0.932vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete {width: 33.334vw; height: 9.257vw; margin-right: 2.561vw;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete:last-child {margin-right: 0 !important;} .layerpopup-payment-complete-levelup .layer-footer .btn-complete .txt-area .txt {font-size: 3.696vw;} /* layerpopup (vip-open) */ .layerpopup-vip-open .layer-top-area .img-main {width: 42.963vw; margin-top: -7.87vw;} .layerpopup-vip-open .layer-contents .item-list .item {flex: 1 0 calc(50% - 3.148vw); height: 38.889vw; padding-top: 0.391vw; margin: 0 6.297vw 6.297vw 0; border-width: 0.37vw; border-radius: 1.852vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .title {font-size: 4.444vw;} .layerpopup-vip-open .layer-contents .item-list .item .content-area .description {margin-top: 0.926vw; font-size: 2.593vw;} /* layerpopup (vip-levelup) */ .layerpopup-vip-levelup .layer-top-area .img-main {padding-bottom: 0.602vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before, .layerpopup-vip-levelup .layer-top-area .img-main::after {top: 12.593vw; width: 12.222vw; height: 6.759vw;} .layerpopup-vip-levelup .layer-top-area .img-main::before {left: -8.981vw;} .layerpopup-vip-levelup .layer-top-area .img-main::after {right: -8.148vw;} .layerpopup-vip-levelup .layer-top-area .img-main .img::before {bottom: -1.302vw; width: 35.741vw; height: 5.463vw;} .layerpopup-vip-levelup .layer-top-area .img-main img {height: 17.685vw;} /* layerpopup (upsell-unavailable) */ .layerpopup-upsell-unavailable .layer-top-area .img-main {width: 45.185vw; margin-top: -10.926vw;} /* 공통 : 레벨 다이아 + 더블유포인트 게이지 */ .lv-diamond-comm {position: relative; display: block; width: 100%; height: 100%;} .lv-diamond-comm::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../../../images/store/common/img_lv_bg.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.778vw 0.457vw rgba(55, 3, 120, .58));} .lv-diamond-comm > span {position: absolute; left: 0; top: -3.33%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); font-size: 4.765vw; line-height: 2.134vw; letter-spacing: -0.095vw; text-align: center; text-transform: uppercase; -webkit-text-stroke: 0.453vw rgba(255, 255, 0, .5); background-image: none;} .lv-diamond-comm > span::after {content: attr(data-lv); position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #963800 0%, #5f2103 83.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} .lv-diamond-comm.is-off::before {background-image: url(../../../images/store/common/img_lv_bg_off.png);} .lv-diamond-comm.is-off > span {font-family: var(--ft-family_NotoSans-800); font-size: 4.5vw; letter-spacing: -0.09vw; -webkit-text-stroke: 0;} .lv-diamond-comm.is-off > span::after {background-image: linear-gradient(180deg, #fff 0%, #e7c7ff 83.17%);} .point-gauge {position: relative; width: 98vw; height: 30.852vw;} .layerpopup-payment-complete .point-gauge, .layerpopup-login-reward .point-gauge {transform: scale(0.6237); transform-origin: 50% 0; margin: 0 calc(50% - 49vw) -6.667vw;} .point-gauge > span {position: absolute;} .point-gauge__frame {left: 0; top: 5.172vw; width: 98vw; height: 20.183vw; background: url(../../../images/store/common/bg_point_gauge.svg?v=260916) 50% 50% / 100% 100% no-repeat;} .point-gauge__title {left: 22.957vw; top: 0.544vw; width: 51.994vw; height: 9.346vw; background: url(../../../images/store/common/img_gauge_title.png) 50% 50% / 100% 100% no-repeat;} .point-gauge__bar {left: 14.337vw; top: 10.889vw; width: 69.326vw; height: 8.53vw; border-radius: 0.907vw; background: linear-gradient(0deg, #3b1b8e 0%, #1b005e 100%);} .point-gauge__bar::before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.635vw; border-radius: inherit; background: linear-gradient(270deg, #4f21c3 0%, #7706ce 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__track {left: 15.698vw; top: 12.25vw; width: 66.604vw; height: 5.807vw; border-radius: 0.544vw; overflow: hidden;} .point-gauge__fill {display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e3a138 1.44%, #ffff6b 7.21%, #f55f51 83.65%, #f475fe 100%); transition: width .3s; animation: pointGaugeFill 1s cubic-bezier(.22, .61, .36, 1) .25s backwards;} .point-gauge.is-max .point-gauge__fill {background: linear-gradient(180deg, #38c9e3 1.44%, #6bffcf 7.21%, #6756ff 83.65%, #7a75fe 100%);} .point-gauge .point-gauge__max {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSans-900); filter: drop-shadow(0 0.046em 0 #e82300) drop-shadow(0 0.12em 0.07em rgba(59, 0, 83, .8)); background-image: linear-gradient(180deg, #fff 34.07%, #ffef79 72.1%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 3.924vw; line-height: 1; text-align: center;} .point-gauge__level {left: 6.533vw; top: 9.074vw; width: 12.25vw; height: 12.25vw;} .point-gauge__reward {left: 79.606vw; top: 8.257vw; width: 11.761vw; height: 13.684vw; background: url(../../../images/store/common/icon_reward.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__badge {position: absolute; left: 6.507vw; top: -0.544vw; width: 6.715vw; height: 6.715vw; box-sizing: border-box; padding-bottom: 0.816vw; display: flex; align-items: center; justify-content: center; background: url(../../../images/store/common/icon_reddot.png) 50% 50% / 100% 100% no-repeat; color: #fff; font-family: var(--ft-family_NotoSans-800); font-size: 3.63vw; line-height: 1; text-align: center; text-shadow: 0 0.091vw 0 rgba(119, 0, 0, .26);} .point-gauge__panel {left: 50%; top: 18.783vw; transform: translateX(-50%); width: auto; height: 8.802vw; display: flex; align-items: center; justify-content: center; gap: 0.448vw; padding: 0 1.794vw; border-radius: 0 0 4.083vw 4.083vw; background: linear-gradient(0deg, #a446fb 0%, #5621c1 100%); box-shadow: 0 0.544vw 0.907vw rgba(46, 21, 101, .5);} .point-gauge__panel::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 0.181vw; border-radius: inherit; background: linear-gradient(0deg, #ee68fa 0%, #9b30ff 21%, #571cba 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;} .point-gauge__panel::before {content: ""; position: absolute; left: 0.726vw; right: 0.726vw; top: 0.635vw; bottom: 0.726vw; border-radius: 0.907vw 0.907vw 3.63vw 3.63vw; background: linear-gradient(0deg, #5704b4 9%, #110361 100%);} .point-gauge__icon {position: relative; flex: 0 0 auto; width: 6.896vw; height: 6.896vw; background: url(../../../images/store/common/icon_point.png) 50% 50% / 100% 100% no-repeat;} .point-gauge .point-gauge__num {position: relative; flex: 0 0 auto; height: 5.626vw; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 4.175vw; line-height: 1; letter-spacing: -0.083vw; text-align: center; white-space: nowrap;} .point-gauge__num .cur {color: #ff0; font-family: inherit; font-size: inherit;} @keyframes pointGaugeFill { from {width: 0;} } .layerpopup-side-right.layerpopup-doubleupoint .layer-inner {display: flex; flex-direction: column; overflow: hidden; width: 100vw; padding: 0; background: linear-gradient(180deg, #3d008f 0%, #6c0fd1 100%);} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close {top: 4.63vw; right: 4.63vw; width: 9.63vw; height: 9.63vw;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::after {display: none;} .layerpopup-side-right.layerpopup-doubleupoint .button-layerpopup-close::before {width: 9.63vw; height: 9.63vw;} .layerpopup-doubleupoint .dpoint-top {position: relative; flex: 0 0 auto; height: 70.833vw; background: url(../../../images/popup/doubleupoint/v2/img_top_banner.jpg) 50% 0 / 100% auto no-repeat;} .layerpopup-doubleupoint .dpoint-top::before {content: ""; position: absolute; left: 0; top: 51.666vw; width: 100%; height: 20.648vw; background: linear-gradient(180deg, rgba(43, 1, 96, 0) 0%, #260352 16.35%, rgba(43, 1, 96, .66) 65.87%, rgba(43, 1, 96, 0) 96.15%);} .layerpopup-doubleupoint .dpoint-top__txt {position: absolute; left: 10.93vw; top: 12.408vw; width: 54.26vw; height: 22.222vw; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 4.63vw; line-height: 5.926vw; letter-spacing: -0.093vw; -webkit-text-stroke: 0.5vw #bc339a; paint-order: stroke fill; text-shadow: 0 0.5vw 0 #84186a, 0 0.278vw 0.667vw rgba(199, 48, 50, .77);} .layerpopup-doubleupoint .dpoint-top .point-gauge {position: absolute; left: 1vw; top: 39.071vw;} .layerpopup-doubleupoint .layer-wrapper {overflow-x: hidden; overflow-y: auto; position: relative; flex: 1 1 auto; margin-top: -14.907vw; padding-top: 14.907vw; scrollbar-width: none; -ms-overflow-style: none;} .layerpopup-doubleupoint .layer-wrapper::-webkit-scrollbar {display: none;} .layerpopup-doubleupoint .reward-list > .item {position: relative; height: 31.481vw; padding: 1.065vw 0 0 27.315vw;} .layerpopup-doubleupoint .level-wrap {position: absolute; left: 7.5vw; top: 8.473vw; width: 12.148vw; height: 12.148vw;} .layerpopup-doubleupoint .level-wrap::before, .layerpopup-doubleupoint .level-wrap::after {content: ""; position: absolute; left: 50%; width: 2.095vw; height: 2.095vw; background: rgba(127, 34, 252, .5); border-radius: 0.37vw; transform: translateX(-50%) rotate(45deg);} .layerpopup-doubleupoint .level-wrap::before {top: -6.991vw;} .layerpopup-doubleupoint .level-wrap::after {top: 17.083vw;} .layerpopup-doubleupoint .reward-wrap {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 2.098vw 2.154vw 0; position: relative; width: 67.222vw; height: 26.889vw; border-radius: 3.056vw; background: linear-gradient(180deg, #6007d8 0%, #8831ff 88.942%); box-shadow: 0 1.019vw 1.222vw rgba(55, 3, 120, .8), inset 0 0 0 0.102vw #ea8900, inset 0 0 0 0.509vw #fffbd3, inset 0 0 0 0.611vw #ff8306;} .layerpopup-doubleupoint .set-box {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 15.278vw; gap: 0.611vw;} .layerpopup-doubleupoint .set-box .set {position: relative; flex: 0 0 auto; width: 15.278vw; height: 15.278vw; border-radius: 1.296vw; background: linear-gradient(180deg, #4c1bb5 0%, #681bd3 100%);} .layerpopup-doubleupoint .set-box .set img {position: absolute; left: 50%; top: 0.764vw; width: 9.472vw; height: 9.472vw; object-fit: contain; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt-area {position: absolute; left: 50%; top: 10.832vw; width: 8.552vw; height: 2.395vw; display: flex; align-items: center; justify-content: center; transform: translateX(-50%);} .layerpopup-doubleupoint .set-box .txt {color: #fff; font-family: var(--ft-family_NotoSans-700); font-size: 3.421vw; line-height: 1; text-align: center; white-space: nowrap;} .layerpopup-doubleupoint .btn-area {flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38.056vw; height: 9.352vw;} .layerpopup-doubleupoint .btn-claim {position: relative; top: 1.791vw; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 2.5vw; background: linear-gradient(180deg, #b4f84a 18.241%, #4ac535 40.832%, #056a0a 89.242%); box-shadow: 0 0.648vw 0.648vw rgba(55, 3, 120, .8), inset 0 -0.25vw 0.167vw rgba(0, 59, 1, .65), inset 0 -0.167vw 0.333vw #055017, inset 0 0 0.683vw #057407;} .layerpopup-doubleupoint .btn-claim::before {content: ""; position: absolute; left: 1.296vw; top: 0.556vw; width: 35.374vw; height: 2.963vw; border-radius: 9.26vw; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;} .layerpopup-doubleupoint .btn-claim .txt {position: absolute; left: 14.36%; right: 13.14%; top: 8.91%; bottom: 15.84%; display: flex; align-items: center; justify-content: center; font-family: var(--ft-family_NotoSansDisplay-800), var(--ft-family_NotoSans-800), sans-serif; font-size: 5.186vw; line-height: 1; letter-spacing: -0.104vw; text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.113vw 0 #0d8800) drop-shadow(0 0.338vw 0.203vw #0a5b0c) drop-shadow(0 0.225vw 0.889vw rgba(5, 80, 23, .88));} .layerpopup-doubleupoint .btn-claim[disabled] {cursor: default;} .layerpopup-doubleupoint .btn-claim[disabled]::after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 2.408vw; background: rgba(29, 0, 97, .6);} .layerpopup-doubleupoint .claimed-text {font-size: 4.63vw; letter-spacing: -0.185vw;} .layerpopup-doubleupoint .item.unlock .reward-wrap::after {content: ""; position: absolute; left: 62.037vw; top: 20.951vw; width: 6.296vw; height: 7.109vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.508vw 0.64vw rgba(40, 0, 88, .25));} .layerpopup-doubleupoint .item.lock .set-box, .layerpopup-doubleupoint .item.lock .btn-area {display: none;} .layerpopup-doubleupoint .item.lock .reward-wrap::after {content: ""; position: absolute; left: 50%; top: 50%; width: 6.315vw; height: 7.13vw; background: url(../../../images/popup/doubleupoint/v2/icon_lock.png) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 0.509vw 0.642vw rgba(40, 0, 88, .25)); transform: translate(-50%, -50%);} .layerpopup-doubleupoint .btn-top-renew {right: 4.63vw; bottom: 6.481vw; width: 12.037vw; height: 12.037vw;} /* layerpopup (doubleupoint) */ .layerpopup-full-common.layerpopup-doubleupoint .top-banner {height: 65.556vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box {padding: 5.556vw 2.778vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box > * {margin-bottom: 2.778vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .title {font-size: 10.37vw;} .layerpopup-full-common.layerpopup-doubleupoint .top-banner .inner-box .desc {font-size: 3.148vw;} .layerpopup-full-common.layerpopup-doubleupoint .point-area-comm .point-title .title {margin-bottom: 3.704vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-area {padding: 7.407vw 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item {margin-bottom: 3.704vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap {width: 29.074vw; height: 29.074vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm {width: 15.185vw; height: 15.185vw; margin-top: 0;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .level-wrap .icon-level-comm .num {line-height: 15.185vw; font-size: 4.63vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap {width: 60.741vw; height: 33.796vw; margin-left: 2.778vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box {width: calc(100% - 3.148vw); padding-left: 2.777vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set-box .set {width: 12.407vw; height: 12.407vw; padding-top: 0.926vw; margin-right: 1.111vw; border-radius: 2.593vw; border-width: 0.556vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set img {width: 85%;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area {bottom: 1vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list .reward-wrap .set .txt-area .txt {font-size: 2.778vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim {width: 36.111vw; height: 9.259vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-front {height: 8.611vw; border-radius: 4.444vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .bg-back {top: 0.648vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner {left: 0.278vw; top: 0.278vw; width: calc(100% - 0.556vw); height: calc(100% - 0.556vw); border-radius: 4.444vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before, .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {left: 0.278vw; width: calc(100% - 0.556vw); height: calc(50% - 0.556vw);} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::before {top: 0.556vw; border-radius: 46.296vw 46.296vw 0 0;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .front-inner::after {bottom: 0.556vw; border-radius: 0 0 46.296vw 46.296vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt {font-size: 4.444vw;} .layerpopup-full-common.layerpopup-doubleupoint .btn-claim .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.556vw; -moz-text-stroke-width: 0.556vw; -ms-text-stroke-width: 0.556vw; text-stroke-width: 0.556vw;} .layerpopup-full-common.layerpopup-doubleupoint .claimed-text {font-size: 4.444vw;} .layerpopup-full-common.layerpopup-doubleupoint .reward-list > .item.unlock .reward-wrap::after {right: -2.315vw; top: -2.222vw; width: 8.333vw; height: 10.185vw;} /* layerpopup (promotion-login-bonus) */ .layerpopup-login-bonus .layer-top-area .img-main {width: 76.111vw; margin-top: -3.333vw; margin-left: 1.944vw;} /* layerpopup (promotion-benefit-guide) */ .layerpopup-promotion-benefit-guide .layer-top-area .img-main {width: 80.185vw; margin-top: -24.6296vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area {margin-top: 3.704vw; font-size: 3.333vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon {width: 4.63vw; height: 4.63vw; margin-right: 1.852vw;} .layerpopup-promotion-benefit-guide .layer-footer .checkbox-area input[type=checkbox] + label .icon::before {background-size: 2.8vw;} /* layerpopup (layerpopup-webstore-voucher) */ .layerpopup-webstore-voucher .layer-header .main-tit > * {font-size: 11.111vw;} .layerpopup-webstore-voucher .layer-header .main-tit .bold {margin-bottom: 1.25vw; font-size: 7.407vw;} .layerpopup-webstore-voucher .layer-header .sub-tit {margin-top: 1vw; font-size: 3.704vw;} .layerpopup-webstore-voucher .layer-contents {margin-bottom: 4.63vw;} .layerpopup-webstore-voucher .img-area::before {height: 55vw;} .layerpopup-webstore-voucher .img-area .coupon {width: 69.516vw; height: 40vw;} .layerpopup-webstore-voucher .img-area .coupon::before, .layerpopup-webstore-voucher .img-area .coupon::after {left: -0.205vw;} .layerpopup-webstore-voucher .img-area .coupon img {width: 66.202vw; margin-top: 2.047vw; margin-left: -0.205vw;} .layerpopup-webstore-voucher .content {margin: 0.301vw 0 2.778vw;} .layerpopup-webstore-voucher .timer-area {width: 37.43vw; height: 7.41vw; padding: 0 3.641vw 0 7.282vw; border-width: 0.549vw; border-radius: 3.704vw; font-size: 4.446vw; box-shadow: 0 0.694vw 0.833vw 0 rgba(0, 0, 0, 0.35);} .layerpopup-webstore-voucher .timer-area::before {left: -4.94vw; width: 10.374vw; height: 11.608vw;} /* layerpopup (layerpopup-promo-top10-purchase) */ .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] {border-width: 0.37vw; border-radius: 1.852vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li {height: 7.407vw; border-width: 0.37vw; font-size: 3.704vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li:last-child {font-size: 2.593vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon {margin-right: 1.296vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .icon img {width: 5.926vw;} .layerpopup-promo-top10-purchase .layer-contents > [class*=infobox] .info-list > li .tit {width: 20.5vw;} .layerpopup-promo-top10-purchase .layer-contents .notice {font-size: 2.222vw;} .layerpopup-promo-top10-purchase .layer-contents .notice .bold {display: block; margin-top: 0.926vw; font-size: 2.593vw;} /* layerpopup (layerpopup-promo-top20-purchase) */ .layerpopup-promo-top20-purchase .layer-wrapper {width: 92.593vw !important;} .layerpopup-promo-top20-purchase .layer-header .sub-tit, .layerpopup-promo-top20-purchase .layer-contents .cont, .layerpopup-promo-top20-purchase .layer-contents .notice {font-size: 2.593vw;} .layerpopup-promo-top20-purchase .layer-contents .cont {line-height: 1.6;} }