@charset "UTF-8"; /* * File Name : /ui_resource/css/responsive/store.css * Description : 웹상점 스타일 */ /* store 관련 공통 스타일 */ :root { --userinfo-panel-height: 65px; --header-wrap-height: calc(var(--header-height) + var(--userinfo-panel-height)); --navi-height: 70px; } body, .section-package {background: #240075;} .layout-inner {width: 1160px;} /* loading */ .loading-layer {display: none; justify-content: center; align-items: center; z-index: 100; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.6);} .loading-layer .loading-img {width: 250px;} .loading-layer .loading-img img {width: 100%;} .loading-layer.show {display: flex;} /* 엑솔라 결제 팝업 */ .xpaystation-widget-lightbox .xpaystation-widget-button-close {display: none !important; z-index: 10; position: absolute; right: 30px; top: 6px; width: 30px; height: 30px;} .xpaystation-widget-lightbox .xpaystation-widget-button-close::before, .xpaystation-widget-lightbox .xpaystation-widget-button-close::after {content: ""; display: inline-block; position: absolute; width: 100%; height: 3px; background: #666; border-radius: 1.333vw;} .xpaystation-widget-lightbox .xpaystation-widget-button-close::before {left: 0; transform: rotate(45deg);} .xpaystation-widget-lightbox .xpaystation-widget-button-close::after {right: 0; transform: rotate(-45deg)} /* floating-banner */ .floating-banner {display: none; justify-content: end; align-items: center; z-index: 11; position: fixed; right: 20px; bottom: 60px;} .floating-banner > * {margin-right: 14px;} .floating-banner > *:last-child {margin-right: 0 !important;} .floating-banner img {width: 100%;} .floating-banner .button-floating-toggle {display: flex; justify-content: center; align-items: center; position: relative; left: 26px; width: 66px; height: 89px; background: url(../../images/floating_banner/coupon_banner/bg_btn_toggle02.png) 0 0 no-repeat; background-size: cover; cursor: pointer; -webkit-tap-highlight-color: transparent;} .floating-banner .button-floating-toggle::before {content: ""; display: inline-block; position: relative; left: -3px; top: -3px; width: 12px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M2 18L10 10L2 2' stroke='white' stroke-width='3.17506' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: cover; transform: rotate(180deg);} .floating-banner .hidden-banner {opacity: 0; display: none; align-items: center; position: relative; right: -10px; transition: all 1s ease; transform: translateX(40%);} .floating-banner .hidden-banner .button-floating-toggle {display: none;} .floating-banner .hidden-banner .button-floating-toggle::before {transform: rotate(0deg);} .floating-banner .hidden-banner .coupon-wrapper {display: flex; align-items: center; position: relative; min-height: 132px; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.75); border: 3px solid #EC011A; border-radius: 18px; box-sizing: border-box;} .floating-banner .hidden-banner .coupon-wrapper, .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-empty {background-color: #7F0002; border-color: #EC011A;} .floating-banner .hidden-banner .coupon-wrapper::after {content: ""; display: inline-block; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 16px; height: 24px; background-size: cover;} .floating-banner .hidden-banner .coupon-wrapper::after, .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-empty::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='16' height='24' fill='url(%23pattern0_341_16864)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_341_16864' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_341_16864' transform='scale(0.0454545 0.030303)'/%3E%3C/pattern%3E%3Cimage id='image0_341_16864' width='22' height='33' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAhCAYAAADdy1suAAAACXBIWXMAAAsTAAALEwEAmpwYAAACTUlEQVRIia3WzWsVVxgH4Ofce01i4jVXBMUoreBGoQuziIj40UrRxn9AQUFcKgiCG8GNUHAlKC50IYj4lYUf1EWVFkKFWISgQgQrCl0JihgvxvgRotfjYrwSZyboJP6W5z3zMHPeM2cmDIeu6Mtcwz7cNY2U0ip6MYSd04IvxbqXGnm1YziD6pTgJ8b1xWEPvM2rb5MsyfbCMIyL/o4j/oovjMsszmKcwqHCcDMPjTkfhz02njd3L/rRUxiGUQ2XY93NOOpDdv56DGJPYRgibnntYnxuJL+xh9GHuYXgZp56py8O+y+/sVskjd1RGIZ3ov444mp8YSy7OF04iaOF4Wb+N6YvPvcov7G7cR3LCsPwSsOVWPdvHNXIbst1krtfXhgmaewdr12IdXXv0+WVOA7ln4UDRXF444P73poZSuaZMbG0CPXCdzwx70X/xJeGvEmXVk8LbuZ2fJUeWvNd4Jyjt/xd4O7QkR4aqEwHLGFVqOqWgW9MGW5X8luoWaglXRrCkSnBXVr0hpr27Gvw+ZNWGO7WYVWo5r1Zdz6hg4XgFsGvodMSbXnlC9hswgb5Jniuik1hjppyXvkg9qcHvwovNdMvYbaKkC49kfx/nM67blK4LFgbqn7Snlf+U3LAP5vs+ly4qmxTqKUPl2aOY9dk4KTwj1ptCJ3asn1vSLp+4mvoF3DAijBLj1nZ1WTgE3rvW9DPcJuSjaHTD1rz5pyT/BEVSmW+GXpDTTV/K+2XbKfCCU/DgljOPvxD/I6zU0GhkoP+ga1kPwtF8hHNB5cGGEGFRAAAAABJRU5ErkJggg=='/%3E%3C/defs%3E%3C/svg%3E%0A");} .floating-banner .hidden-banner .coupon-wrapper .button-refresh {z-index: 1; position: absolute; right: -7px; top: -15px; width: 46px; height: 50px; background: url(../../images/floating_banner/coupon_banner/icon_refresh02.png) center no-repeat; background-size: cover; -webkit-tap-highlight-color: transparent;} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-brown {background-color: #5F3201; border-color: #B15E06;} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-brown::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='16' height='24' fill='url(%23pattern0_463_4334)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_463_4334' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_463_4334' transform='scale(0.0454545 0.030303)'/%3E%3C/pattern%3E%3Cimage id='image0_463_4334' width='22' height='33' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAhCAYAAADdy1suAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVElEQVRIia3WzWsTQRjH8e/sbkLaxmI1NBhMUKFQoaAiqTkoBW/+BQqK4lGhIHgRehQ8CRUP9iCI+IIHL3oQT7FqFKRKpUoP1cSGVutLWmtLTbXZFw/bVJqZ0M6mz3F358Mzz282WfHwZNhjdT0GLgDvaKAMr5aFI8AIcKYh+Pm4TXlJ1oFrwG1gUyB4puyRzdtM/HJV90/gj+SUNgxQceHNZ4fXkw4VR3pmB3ATuKwNV2tyziWbt5n+rRzNeSALpLVhgHLFI1e0Gf3u4Mr+YWAIOKcNA3gejJVcnn2yWVAH2w/cA7ZqwdWaXfR4krcpziqDPYYf7GltGMB2YfiLw6sJhyU52ARwA7iqDVdrat4P9seCcjS9wFNgtzYMsFjxeFm0ef9NGWwPfvd7tWEAD/g47TJYsJn/K+kZYCAQXK25Px6DBZvxn1KwGaA3MAzguPB2yqEwI+EHG4KrNVaS4EMbAntIszY3BO6ImbWXclYjoBDQFTfpiEn9vQgMRyzoTlrEWkTtrRHgSiA41iLoTlpE5NUrf2nacEfMoCtuIqRGGV5Gh7TgkAH7t5skWpV53weOwv/jsS64NSLIpEyiYblN4BLQV3txTTi12WBfwlQdzK/43x+3VOvqwoaAPdtMdm5Rbv0R/g98qd56JdwcEhxImbQ1Kbc+AJytB9aF41FBOmkRll4mHPzUr6+FroIF0Nlu0tluoOgzt4yOrgddgcMmpJMW8ahy63fxv4i0ympr8ufZHFKiffjHSbusnl0Whmx+AC4Cd4KgAJYCfQAcB8pBUYB/wyisui7GWTQAAAAASUVORK5CYII='/%3E%3C/defs%3E%3C/svg%3E%0A");} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-blue {background-color: #002D89; border-color: #005EEC;} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-blue::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='16' height='24' fill='url(%23pattern0_463_4275)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_463_4275' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_463_4275' transform='scale(0.0454545 0.030303)'/%3E%3C/pattern%3E%3Cimage id='image0_463_4275' width='22' height='33' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAhCAYAAADdy1suAAAACXBIWXMAAAsTAAALEwEAmpwYAAACLElEQVRIia3W32uNYQAH8M/Zzsw0y49Zo2GTRFEUtfKzcSN/AEXkklLKjdqlcqXIBRdK8iMXipWfN6tp3CypEc1MhvyYDYsZNmfHxbPR3vOu7T3zvTo93+f99JzneXp7U3b3ZI3ObRzGI5NIgWzUtRWt2Dc5+PlNBvriulO4gOn5wd+7aLvK5464fpewJXuSw5AZ5NVdOpvIDETnVOMcjiWHR/LlBW3X6PsQN/cQGrEmOUzY745bvHtAdija1qEFB5PDkM3S1Ur7DX59jZtxHJcxOxk8kv5u2hr41B7X7hAOdm9yGIYGed3My0Z+/4q283AWJ5PDI+ntDNfy27u49gCasCw5DIP9dNzhbQvZTLTdKKx+ZXIYZPn4mGfX+dkbLWtxOk94OD8+8ayBnrY4/ED+MAxleHOf7qfRZt3k4JF0tUZH1v8fOPfVW/h/4Irl0ZHm9KTAVAHzVlOxItrcyx8uKqG6jtLKaNOKE/nBpZUBLSqJQ/dBcrhiRfj7qZzjeTiMtiSDC4tYsIEZ1XHtFWzH3+sxMXjqTBZtobgsrj2K+ujg+PCsxcxfS0HO1PfC98f5uMfGhlOFVNVSvjSuvSm84LvHejwenlJKzWamlce1p7F/zAWNCZdVsXAT6eJokxFO/cx4aAROMXcVlSvD79FpHkafTAT9B6eLwyrLquLmXBK+iBIlbdocaurCvuamXrhOiZO2ZFu4AaPTjiO4mA8a4Fy0ATvRny8KfwAsvYiwCTluvgAAAABJRU5ErkJggg=='/%3E%3C/defs%3E%3C/svg%3E%0A");} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-purple {background-color: #4B007F; border-color: #8B00EC;} .floating-banner .hidden-banner .coupon-wrapper.wrap-bg-purple::after {background-image: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Crect width='16' height='24' fill='url(%23pattern0_463_4216)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_463_4216' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_463_4216' transform='scale(0.0454545 0.030303)'/%3E%3C/pattern%3E%3Cimage id='image0_463_4216' width='22' height='33' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAhCAYAAADdy1suAAAACXBIWXMAAAsTAAALEwEAmpwYAAACMklEQVRIia3WXWhOcRwH8M+zPVtDiybUvEwIs13YBUleImFuXVCUXE6tlBvlUrmhyAUXSvK2NMQFokQhpcfYMrKSWLaYaPM29vK4OB5y9l9znvle/r+/8+l0/uec/qn93mf9nWvYjRajSEFW3FWLZtSNCn7sgl49oe4ITqE0L7hbp4wGbz0P9VtFj2RbYhj6/fDMDU9d1+9HfGYmTuBAYjiXd9pknNWtIzS7CzexKDEMvT557KKX7ssajNer8QA7E8OQlfVKxiPnfdMdGjmIBkxMBOfS462MBp2ehurNoo3dnhiGAX2eu6nVVX1643U5juNwYjiXLi9kNPioPVTX4zYqE8Pw3WctLnvhnkED8Xql6O4XJoaJNrZdkyaNvvgQr5fgaF5wLp91eeicDk9CeH3eMAzq1+aWN5rj1bJRwbm89jC+tPy/wIFfb+F/gaepiS/dSY8GTCkwy1LTh8J384aLjbXAehNMjVfNOJQXPF65KrWKjQ2hdZAYnq7GLEulhn4CTb/QB4ngtGLzrDHJ7FDdiE38eT3+CR5nomobjDEhVO/DnqE3MkKmmG+uVQqHjnaKzh8nQ9cNCxcoNMcK5apD9RXRD75ruOuDcIlSVTYoNTlUH8WO4cBh4TIVKq1VpCReDYh2/dhI6F9wSkqFxSoskpKKz935hbb+C/obLlKi0jplZoRmzohORImSLjVFlVol4SPaHtHrlDjpGhsVKIyvt2EvTueDQjqAXsIWfM0XhZ/DdomDVTSA+AAAAABJRU5ErkJggg=='/%3E%3C/defs%3E%3C/svg%3E%0A");} .floating-banner .hidden-banner .coupon-inner {display: flex; align-items: center; height: 100%; padding: 10px; border-radius: 10px;} .floating-banner .hidden-banner .coupon-area {display: flex;} .floating-banner .hidden-banner .coupon-area > * {margin-right: 10px;} .floating-banner .hidden-banner .coupon-area > *:last-of-type {margin-right: 0 !important;} .floating-banner .hidden-banner .coupon-area > .coupon {display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; width: 120px; min-height: 104px; padding: 5px 5px 7px; border: 2px solid #55090A; border-radius: 8px; box-sizing: border-box;} .floating-banner .hidden-banner .coupon-area > .coupon, .floating-banner .hidden-banner .coupon-area > .coupon.bg-empty {background-color: #55090A; border-color: #55090A;} .floating-banner .hidden-banner .coupon-area > .coupon > * {margin-bottom: 3px;} .floating-banner .hidden-banner .coupon-area > .coupon > *:last-child {margin-bottom: 0 !important;} .floating-banner .hidden-banner .coupon-area > .coupon .img-area {position: relative;} .floating-banner .hidden-banner .coupon-area > .coupon .img-area img {width: 100%;} .floating-banner .hidden-banner .coupon-area > .coupon .coupon-rate {display: inline-block; position: absolute; width: 40px; background-image: linear-gradient(0deg, #f6b138 0%, #fcff56 50%, #f6b138 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--ft-family_Poppins-700); font-size: 26px; letter-spacing: -2px; text-align: center;} .floating-banner .hidden-banner .coupon-area > .coupon .time-count, .floating-banner .hidden-banner .coupon-area > .coupon .txt-empty {display: flex; align-items: center; height: 100%; font-family: var(--ft-family_Poppins-400); font-size: 20px; text-align: center; letter-spacing: .5px;} .floating-banner .hidden-banner .coupon-area > .coupon .time-count {color: #fff;} .floating-banner .hidden-banner .coupon-area > .coupon .txt-empty, .floating-banner .hidden-banner .coupon-area > .coupon.bg-empty .txt-empty {color: #C56E6F} .floating-banner .hidden-banner .coupon-area > .coupon.on {background: linear-gradient(180deg, #00B733 0%, #004714 100%) !important; border-color: #38AF1A !important;} .floating-banner .hidden-banner .coupon-area > .coupon.on .time-count {color: #ffff6a !important;} .floating-banner .hidden-banner .coupon-area > .coupon.end {display: none;} .floating-banner .hidden-banner .coupon-area > .coupon[class*=lock] {pointer-events: none;} .floating-banner .hidden-banner .coupon-area > .coupon.lock .img-area::before {content: ""; display: inline-block; position: absolute; left: -8px; bottom: -14px; width: 30px; height: 37px; background: url(../../images/common/icons/icon_lock.png) 0 0 no-repeat; background-size: contain;} .floating-banner .default-banner {display: flex; align-items: center; position: relative; -webkit-tap-highlight-color: transparent;} .floating-banner .default-banner .banner-inner {display: flex; justify-content: center; align-items: center; position: relative; width: 172px; height: 172px; background: url(../../images/floating_banner/coupon_banner/bg_banner02.png) 0 0 no-repeat; background-size: cover; overflow: hidden;} .floating-banner .default-banner .label {z-index: 1; position: absolute; right: 22px; top: 14px; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cg filter='url(%23filter0_d_463_4144)'%3E%3Ccircle cx='17' cy='14' r='14' fill='url(%23paint0_linear_463_4144)'/%3E%3Ccircle cx='17' cy='14' r='13.0475' stroke='url(%23paint1_linear_463_4144)' stroke-width='1.90505'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_463_4144' x='0.459938' y='0' width='33.0801' height='33.7151' 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.17508'/%3E%3CfeGaussianBlur stdDeviation='1.27003'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_463_4144'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_463_4144' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_463_4144' x1='17' y1='0' x2='17' y2='28' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23348D00'/%3E%3Cstop offset='1' stop-color='%232F8100'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_463_4144' x1='17' y1='28' x2='17' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.00961538' stop-color='%230B3700'/%3E%3Cstop offset='1' stop-color='%2359EA00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;} .floating-banner .default-banner .label .num {display: flex; justify-content: center; align-items: center; position: absolute; left: 3px; top: 0; width: 27px; height: 27px; color: #fff; font-family: var(--ft-family_Poppins-italic-500); font-size: 19px;} .floating-banner .default-banner .img {position: absolute; left: 50%; top: 37px; transform: translateX(-50%); width: 118px;} .floating-banner .default-banner .txt {position: absolute; bottom: 28px; width: 168px;} .floating-banner .hidden-banner.expanded {display: flex; right: 0; animation: expandBanner 1s ease forwards;} .floating-banner .hidden-banner.expanded .button-floating-toggle {display: flex; left: 21px;} .floating-banner .hidden-banner.expanded + .default-banner .button-floating-toggle {display: none;} .floating-banner .hidden-banner.return {display: flex; animation: backwardBanner 3s ease-in-out 0s 1 normal forwards;} .floating-banner.banner-show {display: flex;} /* floating-banner : coupon-type */ .floating-banner .hidden-banner .coupon-area > .coupon.coupon-normal .coupon-rate {left: 7px; top: 32px;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-exclusive .coupon-rate {left: 50px; top: 16px;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-special .coupon-rate {left: 7px; top: 13px; width: 44px; font-size: 28px;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-surprise .coupon-rate {left: 8px; top: 12px; width: 65px; font-size: 36px;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-offcanvas .coupon-rate, .floating-banner .hidden-banner .coupon-area > .coupon.webstore-voucher .coupon-rate {display: none;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-firstpurchase-bonus .coupon-rate {left: 5px; top: 15px; width: 42px;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-brown {background-color: #401E06; border-color: #401E06;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-brown .txt-empty {color: #A97F52;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-blue {background-color: #001A66; border-color: #001A66;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-blue .txt-empty {color: #6B87C0;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-purple {background-color: #340058; border-color: #340058;} .floating-banner .hidden-banner .coupon-area > .coupon.bg-purple .txt-empty {color: #A26FC6} /* install-banner */ .install-banner {display: flex; justify-content: space-between; align-items: center; z-index: 99; position: fixed; left: 10px; bottom: 20px; right: 10px; min-height: 40px; background: #f06f36; padding: 0 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); border-radius: 20px; box-sizing: border-box; color: #fff; font-size: 14px;} .install-banner * {font-size: 16px;} .install-banner .txt {padding-left: 25px; text-indent: -25px; line-height: 1.2;} .install-banner button {padding-left: 10px;} /* header (store) */ .header-wrap .layout-inner {display: flex; justify-content: space-between; align-items: center; height: 100%;} .header-wrap .new::after {content: ""; display: inline-block; z-index: 1; position: absolute; right: 0; top: 0; width: 16px; height: 16px; background-image: url(../../images/common/icons/icon_dot_red02.png); background-repeat: no-repeat; background-size: cover;} .header-wrap .header .logo > a > * {margin-left: 60px} .header-wrap .header .logo > a > *:first-child {margin-left: 0 !important;} .header-wrap .header .logo-txt {color: #1398ff; font-family: var(--ft-family_Poppins-700); font-size: 30px;} .header-wrap .header .button-login {display: flex; justify-content: center; align-items: center; width: 190px; height: 58px; margin-left: 15px;} .header-wrap .header .button-login .bg-back, .header-wrap .header .button-login .bg-front {height: 54px; border-radius: 30px;} .header-wrap .header .button-login .bg-back {top: 4px; box-shadow: none;} .header-wrap .header .button-login .front-inner {left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 30px;} .header-wrap .header .button-login .front-inner::before, .header-wrap .header .button-login .front-inner::after {left: 2px; width: calc(100% - 4px); height: calc(50% - 2px);} .header-wrap .header .button-login .front-inner::before {top: 2px; border-radius: 300px 300px 0 0; } .header-wrap .header .button-login .front-inner::after {bottom: 2px; border-radius: 0 0 300px 300px;} .header-wrap .header .button-login .txt-area .txt {font-size: 32px;} .header-wrap .header .button-login .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 4px; -moz-text-stroke-width: 4px; -ms-text-stroke-width: 4px; text-stroke-width: 4px;} .header-wrap .header .button-profile {display: none; position: relative; width: 58px; height: 58px;} .header-wrap .header .button-profile img {width: 100%; height: auto; border-radius: 50%; /* border: 2px solid #1398FF; */} .header-wrap .userinfo-panel {height: var(--userinfo-panel-height); background: #4211AF;} .header-wrap .userinfo-panel .noti-msg {width: 100%; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 20px; text-align: center;} .header-wrap .userinfo-panel .noti-msg .bold {color: #FFBC2C; font-family: var(--ft-family_Poppins-500);} .header-wrap .userinfo-panel .userinfo {display: none; justify-content: space-between; align-items: center;} .header-wrap .userinfo-panel .userinfo .info-area {display: inline-block; position: relative; width: 436px; height: 36px; background: #240075; border: 3px solid #6425F5; border-radius: 30px; box-sizing: border-box;} .header-wrap .userinfo-panel .userinfo .chip-amount {display: flex; justify-content: flex-end; align-items: center; width: 450px; padding: 0 16px 0 37px; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 20px; line-height: 36px; text-align: right; letter-spacing: .5px;} .header-wrap .userinfo-panel .userinfo .chip-amount::before {content: ""; display: inline-block; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); width: 46px; height: 50px; background: url(../../images/common/icons/icon_chip.png) center no-repeat; background-size: contain;} .header-wrap .userinfo-panel .userinfo .point-progress > * {z-index: 0;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm {z-index: 1; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 48px; height: 49px;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm::before {background-image: url(../../images/common/icons/bg_icon_level_shadow.png);} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm .num {font-size: 20px; line-height: 50px;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-bar {overflow: hidden; position: relative; left: 2%; width: 96%; height: 100%;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-bar .gauge {position: absolute; top: 50%; transform: translateY(-50%); width: 0%; height: 26px; border-radius: 15px; background: linear-gradient(90deg, #F83600 0%, #FFB400 100%); transition: width 0.3s ease-in-out;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap {position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 20px; line-height: 1lh; transform: translateY(-50%);} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap .bar {position: relative; top: -1px; font-size: 17px;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap:first-child * {-webkit-text-stroke: 2px #1C005C; -moz-text-stroke: 2px #1C005C; -ms-text-stroke: 2px #1C005C; text-stroke: 2px #1C005C;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox {position: absolute; right: -8px; top: -4px; width: 42px; height: 51px; margin-top: -9px;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox::before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../images/common/icons/icon_gift.png) center no-repeat; background-size: contain;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox.new {animation: twoShakeAni 2.2s ease-in-out infinite;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox.new::after {width: 12px; height: 12px;} /* header (store): login active */ .header-wrap.login-active .button-login, .header-wrap.login-active .userinfo-panel .noti-msg {display: none;} .header-wrap.login-active .button-profile, .header-wrap.login-active .userinfo-panel .userinfo {display: flex;} /* contents common */ .contents-wrap {overflow: hidden; padding-top: var(--header-wrap-height);} /* section-banner : common (홈페이지 모바일 작업 패치 시점부터 배너 제거 250828~) */ [class*=section-banner] {overflow: hidden; position: relative; height: 380px; background-position: 0 0; background-repeat: no-repeat; background-size: cover;} [class*=section-banner] > [class^=banner-type] {height: 100%;} [class*=section-banner] video {height: 100%; object-fit: cover; object-position: center;} [class*=section-banner] .layout-inner {z-index: 1; position: absolute; left: 50%; top: 0; width: 1400px; height: 100%; padding-left: 120px; padding-right: 120px; transform: translateX(-50%); box-sizing: border-box; background-position: center; background-repeat: no-repeat; background-color: #2c0b66;} [class*=section-banner] .layout-inner > .banner-img {position: absolute; left: 0;} [class*=section-banner] .inner-box {display: flex; flex-direction: column; height: 100%; padding: 0; padding-top: 50px; box-sizing: border-box;} [class*=section-banner] .section-title {margin-left: -2px; margin-bottom: 7px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 80px; text-align: left; line-height: .9; text-shadow: 0px 4px 6px #22004C;} [class*=section-banner] .section-content {display: flex; flex-direction: column;} [class*=section-banner] .section-content > * {margin-bottom: 20px;} [class*=section-banner] .section-content > *:last-child {margin-bottom: 0 !important;} [class*=section-banner] .section-content .txt-area {color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 34px; line-height: 1.1; letter-spacing: -.5px; line-height: 1; text-shadow: 0px 4px 6px #22004C;} [class*=section-banner] .section-content .txt-area > p {margin-bottom: 15px;} [class*=section-banner] .section-content .txt-area > p:last-child {margin-bottom: 0 !important;} [class*=section-banner] .button-banner-comm {width: 294px; height: 80px;} [class*=section-banner] .button-banner-comm .bg-back, [class*=section-banner] .button-banner-comm .bg-front {height: 74px; border-radius: 42px;} [class*=section-banner] .button-banner-comm .bg-back {top: 6px;} [class*=section-banner] .button-banner-comm .front-inner {left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 4px); border-radius: 42px;} [class*=section-banner] .button-banner-comm .front-inner::before, [class*=section-banner] .button-banner-comm .front-inner::after {left: 4px; width: calc(100% - 8px); height: calc(50% - 3px);} [class*=section-banner] .button-banner-comm .front-inner::before {top: 3px; border-radius: 340px 340px 5px 5px; } [class*=section-banner] .button-banner-comm .front-inner::after {bottom: 3px; border-radius: 5px 5px 340px 340px;} [class*=section-banner] .button-banner-comm .txt-area {text-shadow: none;} [class*=section-banner] .button-banner-comm .txt-area .txt {font-size: 42px;} [class*=section-banner] .button-banner-comm .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 4px; -moz-text-stroke-width: 4px; -ms-text-stroke-width: 4px; text-stroke-width: 4px;} /* package-navigation */ .package-navigation {background: #4211af; border-top: 2px solid #240075; border-bottom: 2px solid #240075;} .package-navigation .navi {display: flex; height: var(--navi-height);} .package-navigation .navi .item {flex: 1; position: relative; background: #4211af;} .package-navigation .navi .item > a {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;} .package-navigation .navi .item.active {background: #1398ff;} .package-navigation .navi .item:last-child::after {display: none; width: 0;} .package-navigation .navi .item * {color: #fff;} .package-navigation .navi .item .main-txt {font-family: var(--ft-family_Poppins-700); font-size: 28px;} .package-navigation.fixed {z-index: 98; position: fixed; top: var(--header-wrap-height); width: 100%; border-top: 2px solid #240075; border-bottom: 2px solid #240075;} /* section-package (common) */ .section-package {padding: 60px 0 100px; background: linear-gradient(180deg, #240075 40%, #1A0057 80%);} .section-package .section-title {margin-bottom: 25px !important; color: #fefeff; font-family: var(--ft-family_Poppins-800); font-size: 48px; text-align: center;} .section-package > .layout-inner {display: flex; flex-direction: column;} .section-package [class^=package-wrap-].navi-target {display: none;} .section-package [class^=package-wrap-].navi-target.show {display: flex;} .section-package .section-content {display: flex;} .section-package .package-wrap {-webkit-tap-highlight-color: transparent; position: relative; background: #4f00b1; border: 3px solid #ffbc2c; border-radius: 24px; box-sizing: border-box; cursor: pointer;} .section-package .package-wrap .click-btn-wrap {z-index: 10; position: absolute; inset: 0; width: 100%; height: 100%;} .section-package .package-wrap [data-no-pay] {-webkit-tap-highlight-color: initial; z-index: 3; position: absolute;} .section-package .package-wrap .tag-title {display: inline-block; position: absolute; left: 50%; top: -11px; transform: translateX(-50%); width: 252px; height: 36px; background-image: url(../../images/store/bg_tag_legend_02.png); background-size: contain; background-repeat: no-repeat; background-position: center; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 18px; text-align: center; line-height: 1.8;} .section-package .package-wrap .tag-title.master {background-image: url(../../images/store/bg_tag_master_02.png);} .section-package .package-wrap .tag-title.expert {background-image: url(../../images/store/bg_tag_expert_02.png);} .section-package .package-wrap .tag-title.rookie {background-image: url(../../images/store/bg_tag_rookie_02.png);} .section-package .package-wrap .gift-list-comm {display: flex; flex-wrap: wrap;} .section-package .package-wrap .gift-list-comm > li {flex: 0 0 calc(20% - 8px); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 58px; margin-right: 10px; margin-bottom: 10px; background: #8C1BFF; border: 3px solid #9C3BFF; border-radius: 12px; box-sizing: border-box; text-align: center;} .section-package .package-wrap .gift-list-comm > li:nth-child(5n) {margin-right: 0 !important;} .section-package .package-wrap .gift-list-comm .info-image {width: 85%;} .section-package .package-wrap .gift-list-comm .info-image img {width: 100%; vertical-align: middle;} .section-package .package-wrap .gift-list-comm .info-cnt {margin-top: -2px; color: #fff47a; font-family: var(--ft-family_Poppins-400); font-size: 14px;} .section-package .package-wrap .gift-list-comm .info-txt {width: 100%; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 14px;} .section-package .package-wrap .gift-list-comm > li.bg-on {background-color: #bd1fff; border-color: #d658ff;} .section-package .package-wrap .package-info {background: #8c1bff; border: 3px solid #4f00b1; border-bottom: 0; border-radius: 21px 21px 0 0; box-sizing: border-box;} .section-package .package-wrap .package-info .coupon-wrapper {display: none; z-index: 11; position: absolute; left: -14px; top: -14px;} .section-package .package-wrap .package-info .coupon-badge {z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 76px; height: 82px; background: url(../../images/store/bg_coupon_badge.png) 0 0 no-repeat; background-size: contain; font-size: 12px; transition: all 1s ease; animation: scaleEffectShow 1s ease forwards; cursor: default;} .section-package .package-wrap .package-info .coupon-badge::after {content: ""; display: none; position: absolute; left: 40%; bottom: 15px; width: 15px; height: 10px; background: url(../../images/store/icon_coupon_badge_arrow.png) 0 0 no-repeat; background-size: contain; transform: rotate(180deg);} .section-package .package-wrap .package-info .coupon-badge * {color: #fff; font-family: var(--ft-family_Poppins-600); line-height: 1; letter-spacing: 0; text-shadow: 2px 3px 3px rgb(0, 0, 0, .3);} .section-package .package-wrap .package-info .coupon-badge .percent {font-size: 18px;} .section-package .package-wrap .package-info .coupon-badge .num {font-family: var(--ft-family_Poppins-700); font-size: 20px; letter-spacing: .5px;} .section-package .package-wrap .package-info .coupon-badge .txt {font-size: 13px;} .section-package .package-wrap .package-info .coupon-tooltip {display: none; position: relative; left: -5px; width: 112px; height: 92px; margin-top: 2px; background: url(../../images/store/tooltip_purchase.png) 0 0 no-repeat; background-size: contain; transition: all 1s ease; animation: fromTopToBottomShow 1s ease forwards;} .section-package .package-wrap .package-info .coupon-tooltip * {color: #240075; font-family: var(--ft-family_Poppins-600); font-size: 14px; letter-spacing: 0;} .section-package .package-wrap .package-info .coupon-tooltip .percent {position: absolute; bottom: 5px; width: 100%; height: 24px; line-height: 24px; text-align: center;} .section-package .package-wrap .package-info .coupon-tooltip .num {font-family: var(--ft-family_Poppins-700); font-size: 18px;} .section-package .package-wrap .package-info .coupon-wrapper.coupon-show {display: block;} .section-package .package-wrap .package-info .layer-more-wrapper {display: flex; flex-direction: column; z-index: 10; position: absolute; left: 0; top: 0; width: calc(100% - 20px); margin: 0 10px;} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more {align-self: flex-end; position: relative; width: 56px; height: 60px; margin-top: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='60' viewBox='0 0 56 60' fill='none'%3E%3Ccircle cx='28' cy='32' r='28' fill='url(%23paint0_linear_341_17417)'/%3E%3Ccircle cx='28' cy='28' r='27' fill='url(%23paint1_linear_341_17417)' stroke='url(%23paint2_linear_341_17417)' stroke-width='2'/%3E%3Ccircle opacity='0.25' cx='28' cy='28' r='24' fill='url(%23paint3_linear_341_17417)'/%3E%3Ccircle opacity='0.25' cx='28' cy='28' r='24' fill='url(%23paint4_linear_341_17417)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_341_17417' x1='28' y1='63.9487' x2='28' y2='53.5385' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%236E12B5'/%3E%3Cstop offset='1' stop-color='%234A0083'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_341_17417' x1='28' y1='0' x2='28' y2='56' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%236407D6'/%3E%3Cstop offset='1' stop-color='%23520090'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_341_17417' x1='28' y1='0' x2='28' y2='56' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23AB67FF'/%3E%3Cstop offset='1' stop-color='%237F38E1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_341_17417' x1='28' y1='4' x2='28' y2='52' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='0.635' stop-color='%2379009C' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_341_17417' x1='28' y1='52' x2='28' y2='4' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231A0028'/%3E%3Cstop offset='0.46' stop-color='%2300319C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; box-shadow: 0 2.656px 3.187px 0 rgba(0, 0, 0, 0.25); border-radius: 50%;} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more::before {content: ""; display: inline-block; width: 29px; height: 29px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Crect x='13.75' y='8.75122' width='1.5' height='11.5' rx='0.75' fill='white' stroke='white' stroke-width='1.5'/%3E%3Crect x='20.25' y='13.7512' width='1.5' height='11.5' rx='0.75' transform='rotate(90 20.25 13.7512)' fill='white' stroke='white' stroke-width='1.5'/%3E%3Cmask id='path-3-inside-1_341_17422' fill='white'%3E%3Cpath d='M21.6351 24.6395C21.047 24.056 21.047 23.11 21.6351 22.5265C22.2232 21.943 23.1766 21.943 23.7647 22.5265L27.4915 26.2243C28.0796 26.8078 28.0796 27.7538 27.4915 28.3373C26.9034 28.9208 25.95 28.9208 25.3619 28.3373L21.6351 24.6395Z'/%3E%3C/mask%3E%3Cpath d='M21.6351 24.6395C21.047 24.056 21.047 23.11 21.6351 22.5265C22.2232 21.943 23.1766 21.943 23.7647 22.5265L27.4915 26.2243C28.0796 26.8078 28.0796 27.7538 27.4915 28.3373C26.9034 28.9208 25.95 28.9208 25.3619 28.3373L21.6351 24.6395Z' fill='white'/%3E%3Cpath d='M23.7647 22.5265L21.6351 24.6395L25.3619 28.3373L27.4915 26.2243L29.6211 24.1113L25.8943 20.4135L23.7647 22.5265ZM25.3619 28.3373L27.4915 26.2243L23.7647 22.5265L21.6351 24.6395L19.5055 26.7525L23.2323 30.4503L25.3619 28.3373ZM27.4915 28.3373L25.3619 26.2243C25.95 25.6408 26.9034 25.6408 27.4915 26.2243L25.3619 28.3373L23.2323 30.4503C24.9965 32.2008 27.8569 32.2008 29.6211 30.4503L27.4915 28.3373ZM27.4915 26.2243L25.3619 28.3373C24.7738 27.7538 24.7738 26.8078 25.3619 26.2243L27.4915 28.3373L29.6211 30.4503C31.3853 28.6998 31.3853 25.8617 29.6211 24.1113L27.4915 26.2243ZM21.6351 22.5265L23.7647 24.6395C23.1766 25.223 22.2232 25.223 21.6351 24.6395L23.7647 22.5265L25.8943 20.4135C24.1301 18.663 21.2697 18.663 19.5055 20.4135L21.6351 22.5265ZM21.6351 22.5265L19.5055 20.4135C17.7413 22.164 17.7413 25.0021 19.5055 26.7525L21.6351 24.6395L23.7647 22.5265C24.3528 23.11 24.3528 24.056 23.7647 24.6395L21.6351 22.5265Z' fill='white' mask='url(%23path-3-inside-1_341_17422)'/%3E%3Ccircle cx='14.5' cy='14.501' r='12' stroke='white' stroke-width='3'/%3E%3C/svg%3E"); background-size: cover;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more {display: none; z-index: 1; position: relative; top: 6px; padding: 7px 7px 2px; background: #440083; border: 3px solid #FFBC2C; border-radius: 20px;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li {flex: 0 0 calc(20% - 4px); margin-right: 5px; margin-bottom: 5px;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm .info-cnt {font-size: 11px;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li:first-child .info-image {width: 75%;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li:first-child .info-cnt {margin-top: 4px;} .section-package .package-wrap .package-info .layer-more-wrapper.show .btn-more::before {width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect y='2.30273' width='3' height='30.3854' rx='1.5' transform='rotate(-45 0 2.30273)' fill='white'/%3E%3Crect x='21.7031' y='0.132812' width='3' height='30.3854' rx='1.5' transform='rotate(45 21.7031 0.132812)' fill='white'/%3E%3C/svg%3E");} .section-package .package-wrap .package-info .layer-more-wrapper.show .layer-more {display: block;} .section-package .package-wrap .package-info .innerbox {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 0 15px; box-sizing: border-box;} .section-package .package-wrap .package-info .img-area {display: flex;} .section-package .package-wrap .package-info .img-area img {align-self: center; width: 100%;} .section-package .package-wrap .package-info .chip-area {display: flex; align-items: center; margin-top: -25px;} .section-package .package-wrap .package-info .chip-area > * {margin-right: 8px;} .section-package .package-wrap .package-info .chip-area > *:last-child {margin-right: 0 !important;} .section-package .package-wrap .package-info .chip-box {display: flex; flex-direction: column; align-items: center;} .section-package .package-wrap .package-info .chip-box > * {letter-spacing: 0;} .section-package .package-wrap .package-info .chip-box > *:last-child {margin-bottom: 0 !important;} .section-package .package-wrap .package-info .chip-box .current-chip {margin-top: 2px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 40px; text-shadow: 0 2.497px 1.873px rgba(0, 0, 0, 0.25);;} .section-package .package-wrap .package-info .chip-box .original-chip {color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 28px; text-decoration: line-through; transition: all 1s ease;} .section-package .package-wrap .package-info .point-area {display: inline-block; position: relative; min-width: 120px; height: 28px; padding: 0 15px 0 33px; margin-top: 10px; background: #4F00B1; border-radius: 20px; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 20px; line-height: 28px; letter-spacing: .5px; box-sizing: border-box; text-align: center;} .section-package .package-wrap .package-info .point-area::before {content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 27px; height: 30px; background: url(../../images/common/point_gauge/icon_point.png) 0 0 no-repeat; background-size: contain;} .section-package .package-wrap .package-info .point-area .num {font-family: var(--ft-family_Poppins-600); letter-spacing: .5px;} .section-package .package-wrap .tag-title + .package-info .innerbox {padding-top: 36px;} .section-package .package-wrap .gift-info {display: flex; flex-direction: column; align-items: center; padding: 20px 0 25px; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;} .section-package .package-wrap .button-pay .price-txt * {font-family: var(--ft-family_Poppins-600); font-size: 40px; letter-spacing: 0;} .section-package .package-wrap .button-pay .price-txt .price .value {font-family: var(--ft-family_Poppins-800);} .section-package .package-wrap .button-pay .price-txt .cnt-num {margin-left: 4px; font-family: var(--ft-family_Poppins-500); font-size: 24px;} .section-package .package-wrap .button-pay.icon-best::before, .section-package .package-wrap .button-pay.icon-hot::before {content: ""; display: inline-block; z-index: 10; position: absolute; left: -15px; top: -20px; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center;} .section-package .package-wrap .button-pay.icon-best::before {background-image: url(../../images/store/label_best02.png);} .section-package .package-wrap .button-pay.icon-hot::before {background-image: url(../../images/store/label_hot02.png);} /* section-package (navigation fixed) */ .package-navigation.fixed + .section-package {padding-top: calc(60px + var(--navi-height));} /* section-package (p.p show) */ .section-package .package-wrap:not(.pp-coupon-show) .coupon-wrapper, .section-package .package-wrap:not(.pp-coupon-show) .package-info .coupon-badge {cursor: default;} .section-package .package-wrap:not(.pp-coupon-show) .package-info .coupon-badge {pointer-events: none; -webkit-tap-highlight-color: transparent;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-wrapper {display: block;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge {padding-bottom: 8px; cursor: pointer;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge::after {display: inline-block;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge.inactive::after {bottom: 12px; transform: rotate(0);} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge.inactive + .coupon-tooltip {animation: fromBottomToTopHide .5s ease forwards;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-tooltip {display: block;} /* section-package (deal common: sdeal, fdeal) */ .section-package .package-wrap-deal .section-content {overflow: visible; width: 100%;} .section-package .package-wrap-deal .swiper-wrapper {margin-bottom: 55px;} .section-package .package-wrap-deal .package-wrap {background-color:#79009C;} .section-package .package-wrap-deal .package-wrap .gift-list-comm > li {background-color: #C11BFF; border-color: #CF4DFF;} .section-package .package-wrap-deal .package-info {position: relative; height: 320px; padding-top: 60px; background-color: #C11BFF; border-color: #79009C;} .section-package .package-wrap-deal .package-info .innerbox {padding: 20px 0 0;} .section-package .package-wrap-deal .package-info .label-title {display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 60px; padding-bottom: 2px; border-radius: 18px 18px 0 0; background: linear-gradient(0deg, #FFD900 0%, #FFA600 6.5%); border-bottom: 2px solid #A74526; color: #79009C; font-family: var(--ft-family_Poppins-700); font-size: 28px; text-shadow: 0 4px 2px #FFC832;} .section-package .package-wrap-deal .package-info .label-title::before, .section-package .package-wrap-deal .package-info .label-title::after {content: ""; display: inline-block; position: absolute;} .section-package .package-wrap-deal .package-info .label-title::before {left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 14px 14px 2px 2px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0% , #F88400 100%);} .section-package .package-wrap-deal .package-info .label-title::after {left: 0; bottom: 0; width: 100%; height: 1px; background: #A74526;} .section-package .package-wrap-deal .package-info .label-title .txt {z-index: 1; position: relative;} .section-package .package-wrap-deal .package-info .img-area {position: relative; height: 95px;} .section-package .package-wrap-deal .package-info .img-area img {width: auto; height: 100%;} .section-package .package-wrap-deal .package-info .img-area .txt-box {position: absolute; right: 25px; bottom: 45px;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt {position: absolute; left: 0; top: 50%; width: 100%; height: 100%; transform: translateY(-50%); letter-spacing: 1px; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 20px;} .section-package .package-wrap-deal .package-info .img-area .txt-box .unit {margin-right: 5px; font-family: var(--ft-family_Poppins-400);} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt:nth-child(1) {-webkit-text-stroke: 3px #79009C; -moz-text-stroke: 3px #79009C; -ms-text-stroke: 3px #79009C; text-stroke: 3px #79009C;} .section-package .package-wrap-deal .package-info .point-area {background-color: #6C007F;} .section-package .package-wrap-deal .package-info .coupon-wrapper, .section-package .package-wrap-deal .package-info .layer-more-wrapper {top: 60px;} .section-package .package-wrap-deal .package-info .coupon-wrapper {margin-top: -10px;} .section-package .package-wrap-deal .package-info .layer-more-wrapper .btn-more {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='60' viewBox='0 0 56 60' fill='none'%3E%3Ccircle cx='28' cy='31.9998' r='28' fill='url(%23paint0_linear_341_18226)'/%3E%3Ccircle cx='28' cy='27.9998' r='27' fill='url(%23paint1_linear_341_18226)' stroke='url(%23paint2_linear_341_18226)' stroke-width='2'/%3E%3Ccircle opacity='0.25' cx='28' cy='27.9998' r='24' fill='url(%23paint3_linear_341_18226)'/%3E%3Ccircle opacity='0.25' cx='28' cy='27.9998' r='24' fill='url(%23paint4_linear_341_18226)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_341_18226' x1='28' y1='63.9485' x2='28' y2='53.5382' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237D12B5'/%3E%3Cstop offset='1' stop-color='%23560083'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_341_18226' x1='28' y1='-0.000244141' x2='28' y2='55.9998' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23AC00DE'/%3E%3Cstop offset='1' stop-color='%236C008B'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_341_18226' x1='28' y1='-0.000244141' x2='28' y2='55.9998' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23DE6AFF'/%3E%3Cstop offset='1' stop-color='%239F2EC0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_341_18226' x1='28' y1='3.99976' x2='28' y2='51.9998' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='0.635' stop-color='%2379009C' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_341_18226' x1='28' y1='51.9998' x2='28' y2='3.99976' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231A0028'/%3E%3Cstop offset='0.46' stop-color='%2379009C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");} .section-package .package-wrap-deal .package-info .layer-more-wrapper .layer-more {background-color: #79009C;} .section-package .package-wrap-deal .package-info .chip-area {margin-top: -5px;} .section-package .package-wrap-deal .gift-info {display: flex; justify-content: center; align-items: center; height: 130px; padding: 0; box-sizing: border-box;} .section-package .package-wrap-deal .timer-area + .gift-info {padding-bottom: 20px;} .section-package .package-wrap-deal .timer-area {display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); min-width: 210px; height: 42px; padding: 0 30px 0 50px; background: #560083; border: 3px solid #FFBC2C; border-radius: 30px; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 24px; letter-spacing: 1px; text-align: center; white-space: nowrap; box-sizing: border-box;} .section-package .package-wrap-deal .timer-area::before {content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 58px; height: 64px; background: url(../../images/common/icons/icon_clock.png) 0 0 no-repeat; background-size: cover;} .section-package .package-wrap-deal .swiper-pagination {display: none; margin-bottom: 0 !important;} .section-package .package-wrap-deal .swiper-pagination .swiper-pagination-bullet {opacity: 1; width: 20px; height: 20px; margin: 0 15px; background: #D9D9D9; border-radius: 50%;} .section-package .package-wrap-deal .swiper-pagination .swiper-pagination-bullet-active {background: #C11BFF;} /* section-package (deal : single-item O or X) */ /* .section-package .package-wrap-deal:not(.single-item) {padding: 0;} */ .section-package .package-wrap-deal.single-item .swiper-wrapper {display: flex; justify-content: center;} .section-package .package-wrap-deal.single-item .swiper-slide {flex: 0 0 calc(33% - 10px); margin-right: 20px;} .section-package .package-wrap-deal.single-item .swiper-slide:last-child {margin-right: 0 !important;} /* flash deal */ .section-package .package-wrap-deal.fdeal .package-info .coupon-wrapper {top: 0; margin-top: -14px;} .section-package .package-wrap-deal.fdeal .package-info .label-title {font-size: 28px;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box {bottom: 35px;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box .unit {margin-right: 2px;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt1 {right: 154px;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt2 {right: 97px;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt3 {right: 40px;} /* section-package (packages) */ .section-package [class^=package-wrap-]:not(.package-wrap-deal) .section-content {flex-wrap: wrap; flex-direction: row; width: 100%; margin-bottom: 0;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap {flex: 0 0 calc(33% - 10px); margin-right: 20px; margin-bottom: 20px;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap:nth-child(3n) {margin-right: 0;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-info .innerbox {height: 280px;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap.has-coupon .package-info .innerbox {height: 300px;} .section-package .package-wrap-chip .package-wrap {background-color: #003390;} .section-package .package-wrap-chip .package-wrap .gift-list-comm > li {background-color: #0060E2; border-color: #2481FF;} .section-package .package-wrap-chip .package-wrap .gift-list-comm > li.bg-on {background-color: #1398ff; border-color: #3eb5fe;} .section-package .package-wrap-chip .package-wrap .package-info {background-color: #0060E2; border-color: #003390;} .section-package .package-wrap-chip .package-info .point-area {background-color: #003390;} .section-package .package-wrap-chip .package-info .layer-more-wrapper .btn-more {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='60' viewBox='0 0 56 60' fill='none'%3E%3Ccircle cx='28' cy='32' r='28' fill='url(%23paint0_linear_341_17889)'/%3E%3Ccircle cx='28' cy='28' r='27' fill='url(%23paint1_linear_341_17889)' stroke='url(%23paint2_linear_341_17889)' stroke-width='2'/%3E%3Ccircle opacity='0.25' cx='28' cy='28' r='24' fill='url(%23paint3_linear_341_17889)'/%3E%3Ccircle opacity='0.25' cx='28' cy='28' r='24' fill='url(%23paint4_linear_341_17889)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_341_17889' x1='28' y1='63.9487' x2='28' y2='53.5385' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23013DA1'/%3E%3Cstop offset='1' stop-color='%23002A78'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_341_17889' x1='28' y1='0' x2='28' y2='56' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230060E2'/%3E%3Cstop offset='1' stop-color='%23003390'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_341_17889' x1='28' y1='0' x2='28' y2='56' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%235599FF'/%3E%3Cstop offset='1' stop-color='%231855C1'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_341_17889' x1='28' y1='4' x2='28' y2='52' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='0.635' stop-color='%2379009C' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_341_17889' x1='28' y1='52' x2='28' y2='4' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231A0028'/%3E%3Cstop offset='0.46' stop-color='%2300319C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");} .section-package .package-wrap-chip .package-info .layer-more-wrapper .layer-more {background-color: #00186F;} .section-package .package-wrap-upselling .gift-info {padding: 12px 12px 100px;} .section-package .package-wrap-upselling .package-wrap .button-pay {position: absolute; bottom: 25px;} .section-package .package-wrap-upselling .soldout-content {display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: -40px;} .section-package .package-wrap-upselling .soldout-content .img-area {width: 694px;} .section-package .package-wrap-upselling .soldout-content .img-area img {width: 100%;} .section-package .package-wrap-upselling .soldout-content .text-area {margin-top: 50px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 60px; text-align: center; line-height: 1.1;} /* section-btm-banner */ .section-btm-banner {background-image: url(../../images/store/bg_btm_banner.jpg);} .section-btm-banner .inner-box {width: 540px;} .section-btm-banner .img-character {left: 23px; top: -71px; width: 650px;} /* * [해상도 1025px ~] * - 1025px 이상부터는 swiper에 의해 너비값이 조정되면 안 되기 때문에 강제로 따로 지정함 * - 스페셜딜 3개까지 노출 (너비 고정) * - 2개, 1개인 케이스도 가운데 정렬 되도록 함 */ @media (min-width: 1025px) { .section-package .package-wrap-deal .swiper-wrapper {justify-content: center;} .section-package .package-wrap-deal .swiper-slide {flex: 0 0 calc(33% - 0.602vw) !important; margin-right: 1.205vw; flex-shrink: 0;} .section-package .package-wrap-deal .swiper-slide:last-child {margin-right: 0 !important;} } /* * [해상도 1400px] * - 컨텐츠 inner: 1400px 기준 * - 1920 기준 / DPR 1 / 16.6 */ @media all and (max-width:1400px) { /* store 관련 공통 스타일 */ :root { --userinfo-panel-height: 3.916vw; --navi-height: 4.217vw; } .layout-inner {width: 69.88vw;} /* loading */ .loading-layer .loading-img {width: 15.06vw;} /* floating-banner */ .floating-banner {right: 1.205vw; bottom: 3.614vw;} .floating-banner > * {margin-right: 0.843vw;} .floating-banner .button-floating-toggle {left: 1.566vw; width: 3.976vw; height: 5.361vw;} .floating-banner .button-floating-toggle::before {left: -0.181vw; top: -0.181vw; width: 0.723vw; height: 1.205vw;} .floating-banner .hidden-banner {right: -0.602vw;} .floating-banner .hidden-banner .coupon-wrapper {min-height: 7.952vw; box-shadow: 0 0.181vw 0.301vw 0 rgba(0, 0, 0, 0.75); border-width: 0.181vw; border-radius: 1.084vw;} .floating-banner .hidden-banner .coupon-wrapper::after {right: -0.964vw; width: 0.964vw; height: 1.446vw;} .floating-banner .hidden-banner .coupon-wrapper .button-refresh {right: -0.422vw; top: -0.904vw; width: 2.771vw; height: 3.012vw;} .floating-banner .hidden-banner .coupon-inner {padding: 0.602vw; border-radius: 0.602vw;} .floating-banner .hidden-banner .coupon-area > * {margin-right: 0.602vw;} .floating-banner .hidden-banner .coupon-area > .coupon {width: 7.229vw; min-height: 6.265vw; padding: 0.301vw 0.301vw 0.422vw; border-width: 0.120vw; border-radius: 0.482vw;} .floating-banner .hidden-banner .coupon-area > .coupon > * {margin-bottom: 0.181vw;} .floating-banner .hidden-banner .coupon-area > .coupon .coupon-rate {width: 2.41vw; font-size: 1.566vw; letter-spacing: -0.120vw;} .floating-banner .hidden-banner .coupon-area > .coupon .time-count, .floating-banner .hidden-banner .coupon-area > .coupon .txt-empty {font-size: 1.205vw; letter-spacing: 0.030vw;} .floating-banner .hidden-banner .coupon-area > .coupon.lock .img-area::before {left: -0.482vw; bottom: -0.843vw; width: 1.807vw; height: 2.229vw;} .floating-banner .default-banner .banner-inner {width: 10.361vw; height: 10.361vw;} /* .floating-banner .default-banner .label {right: 1.325vw; top: 0.843vw; width: 2.048vw; height: 2.048vw;} */ /* .floating-banner .default-banner .label .num {left: 0.18vw; width: 1.627vw; height: 1.627vw; font-size: 1.145vw;} */ .floating-banner .default-banner .label {right: 1.325vw; top: 0.843vw; width: 2.3vw; height: 2.3vw;} .floating-banner .default-banner .label .num {left: 0.18vw; width: 1.8vw; height: 1.8vw; font-size: 1.3vw;} .floating-banner .default-banner .img {top: 2.229vw; width: 7.108vw;} .floating-banner .default-banner .txt {bottom: 1.687vw; width: 10.120vw;} .floating-banner .hidden-banner.expanded .button-floating-toggle {left: 1.265vw;} /* floating-banner : coupon-type */ .floating-banner .hidden-banner .coupon-area > .coupon.coupon-normal .coupon-rate {left: 0.422vw; top: 1.928vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-exclusive .coupon-rate {left: 3.012vw; top: 0.964vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-special .coupon-rate {left: 0.422vw; top: 0.783vw; width: 2.651vw; font-size: 1.687vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-surprise .coupon-rate {left: 0.482vw; top: 0.723vw; width: 3.916vw; font-size: 2.169vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-firstpurchase-bonus .coupon-rate {left: 0.301vw; top: 0.904vw; width: 2.530vw;} /* install-banner */ .install-banner {left: 0.602vw; bottom: 1.205vw; right: 0.602vw; min-height: 2.41vw; padding: 0 1.205vw; border-radius: 1.205vw;} .install-banner * {font-size: 0.964vw;} .install-banner .txt {padding-left: 1.506vw; text-indent: -1.506vw;} .install-banner button {padding-left: 0.602vw;} /* header (store) */ .header-wrap .new::after {width: 0.964vw; height: 0.964vw;} .header-wrap .header .logo > a > * {margin-left: 3.614vw} .header-wrap .header .logo-txt {font-size: 1.807vw;} .header-wrap .header .button-login {width: 11.446vw; height: 3.494vw; margin-left: 0.904vw;} .header-wrap .header .button-login .bg-back, .header-wrap .header .button-login .bg-front {height: 3.253vw; border-radius: 1.807vw;} .header-wrap .header .button-login .bg-back {top: 0.241vw;} .header-wrap .header .button-login .front-inner {left: 0.120vw; top: 0.120vw; width: calc(100% - 0.241vw); height: calc(100% - 0.241vw); border-radius: 1.807vw;} .header-wrap .header .button-login .front-inner::before, .header-wrap .header .button-login .front-inner::after {left: 0.120vw; width: calc(100% - 0.241vw); height: calc(50% - 0.120vw);} .header-wrap .header .button-login .front-inner::before {top: 0.120vw; border-radius: 18.072vw 18.072vw 0 0; } .header-wrap .header .button-login .front-inner::after {bottom: 0.120vw; border-radius: 0 0 18.072vw 18.072vw;} .header-wrap .header .button-login .txt-area .txt {font-size: 1.928vw;} .header-wrap .header .button-login .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.241vw; -moz-text-stroke-width: 0.241vw; -ms-text-stroke-width: 0.241vw; text-stroke-width: 0.241vw;} .header-wrap .header .button-profile {width: 3.494vw; height: 3.494vw;} .header-wrap .userinfo-panel .noti-msg {font-size: 1.205vw;} .header-wrap .userinfo-panel .userinfo .info-area {width: 26.265vw; height: 2.169vw; border-width: 0.181vw; border-radius: 1.807vw;} .header-wrap .userinfo-panel .userinfo .chip-amount {width: 27.108vw; padding: 0 0.964vw 0 2.229vw; font-size: 1.205vw; line-height: 2.169vw; letter-spacing: 0.030vw;} .header-wrap .userinfo-panel .userinfo .chip-amount::before {left: -0.542vw; width: 2.771vw; height: 3.012vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm {left: -0.904vw; width: 2.892vw; height: 2.952vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm .num {font-size: 1.205vw; line-height: 3.012vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-bar .gauge {height: 1.566vw; border-radius: 0.904vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap {font-size: 1.205vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap .bar {top: -0.060vw; font-size: 1.024vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap:first-child * {-webkit-text-stroke-width: 0.120vw; -moz-text-stroke-width: 0.120vw; -ms-text-stroke-width: 0.120vw; text-stroke-width: 0.120vw;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox {right: -0.482vw; top: -0.241vw; width: 2.530vw; height: 3.072vw; margin-top: -0.542vw;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox.new::after {width: 0.723vw; height: 0.723vw;} /* package-navigation */ .package-navigation {border-width: 0.120vw;} .package-navigation .navi .item .main-txt {font-size: 1.687vw;} .package-navigation.fixed {border-width: 0.120vw;} /* section-package (common) */ .section-package {padding: 3.614vw 0 6.024vw;} .section-package .section-title {margin-bottom: 1.506vw !important; font-size: 2.892vw;} .section-package .package-wrap {border-width: 0.181vw; border-radius: 1.446vw;} .section-package .package-wrap .tag-title {top: -0.663vw; width: 15.181vw; height: 2.169vw; font-size: 1.084vw;} .section-package .package-wrap .gift-list-comm > li {flex: 0 0 calc(20% - 0.482vw); height: 3.494vw; margin-right: 0.602vw; margin-bottom: 0.602vw; border-width: 0.181vw; border-radius: 0.723vw;} .section-package .package-wrap .gift-list-comm .info-cnt {margin-top: -0.120vw; font-size: 0.843vw;} .section-package .package-wrap .gift-list-comm .info-txt {font-size: 0.843vw;} .section-package .package-wrap .package-info {border-width: 0.181vw; border-radius: 1.265vw 1.265vw 0 0;} .section-package .package-wrap .package-info .coupon-wrapper {left: -0.843vw; top: -0.843vw;} .section-package .package-wrap .package-info .coupon-badge {width: 4.578vw; height: 4.94vw; font-size: 0.723vw;} .section-package .package-wrap .package-info .coupon-badge::after {bottom: 0.904vw; width: 0.904vw; height: 0.602vw;} .section-package .package-wrap .package-info .coupon-badge * {text-shadow: 0.120vw 0.181vw 0.181vw rgb(0, 0, 0, .3);} .section-package .package-wrap .package-info .coupon-badge .percent {font-size: 1.084vw;} .section-package .package-wrap .package-info .coupon-badge .num {font-size: 1.205vw; letter-spacing: 0.030vw;} .section-package .package-wrap .package-info .coupon-badge .txt {font-size: 0.783vw;} .section-package .package-wrap .package-info .coupon-tooltip {left: -0.301vw; width: 6.747vw; height: 5.542vw; margin-top: 0.120vw;} .section-package .package-wrap .package-info .coupon-tooltip * {font-size: 0.843vw;} .section-package .package-wrap .package-info .coupon-tooltip .percent {bottom: 0.301vw; height: 1.446vw; line-height: 1.446vw;} .section-package .package-wrap .package-info .coupon-tooltip .num {font-size: 1.084vw;} .section-package .package-wrap .package-info .layer-more-wrapper {width: calc(100% - 1.205vw); margin: 0 0.602vw;} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more {width: 3.373vw; height: 3.614vw; margin-top: 0.602vw; box-shadow: 0 0.16vw 0.192vw 0 rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more::before {width: 1.747vw; height: 1.747vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more {top: 0.361vw; padding: 0.422vw 0.422vw 0.120vw; border-width: 0.181vw; border-radius: 1.205vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li {flex: 0 0 calc(20% - 0.241vw); margin-right: 0.301vw; margin-bottom: 0.301vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm .info-cnt {font-size: 0.723vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li:first-child .info-cnt {margin-top: 0.241vw;} .section-package .package-wrap .package-info .layer-more-wrapper.show .btn-more::before {width: 1.446vw; height: 1.446vw;} .section-package .package-wrap .package-info .innerbox {padding: 0 0 0.904vw;} .section-package .package-wrap .package-info .chip-area {margin-top: -1.506vw;} .section-package .package-wrap .package-info .chip-area > * {margin-right: 0.482vw;} .section-package .package-wrap .package-info .chip-box .current-chip {margin-top: 0.120vw; font-size: 2.41vw; text-shadow: 0 0.150vw 0.113vw rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .chip-box .original-chip {font-size: 1.687vw;} .section-package .package-wrap .package-info .point-area {min-width: 7.229vw; height: 1.687vw; padding: 0 0.904vw 0 1.988vw; margin-top: 0.602vw; border-radius: 1.205vw; font-size: 1.205vw; line-height: 1.687vw; letter-spacing: 0.030vw;} .section-package .package-wrap .package-info .point-area::before {left: -0.060vw; width: 1.627vw; height: 1.807vw;} .section-package .package-wrap .package-info .point-area .num {letter-spacing: 0.030vw;} .section-package .package-wrap .tag-title + .package-info .innerbox {padding-top: 2.169vw;} .section-package .package-wrap .gift-info {padding: 1.205vw 0 1.506vw; border-bottom-left-radius: 1.446vw; border-bottom-right-radius: 1.446vw;} .section-package .package-wrap .button-pay .price-txt * {font-size: 2.41vw;} .section-package .package-wrap .button-pay .price-txt .cnt-num {margin-left: 0.241vw; font-size: 1.446vw;} .section-package .package-wrap .button-pay.icon-best::before, .section-package .package-wrap .button-pay.icon-hot::before {left: -0.904vw; top: -1.205vw; width: 3.614vw; height: 3.614vw;} /* section-package (navigation fixed) */ .package-navigation.fixed + .section-package {padding-top: calc(3.614vw + var(--navi-height));} /* section-package (p.p show) */ .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge {padding-bottom: 0.482vw;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge.inactive::after {bottom: 0.723vw;} /* section-package (deal common: sdeal, fdeal) */ .section-package .package-wrap-deal .swiper-wrapper {margin-bottom: 3.313vw;} .section-package .package-wrap-deal .package-info {height: 19.277vw; padding-top: 3.614vw;} .section-package .package-wrap-deal .package-info .innerbox {padding: 1.205vw 0 0;} .section-package .package-wrap-deal .package-info .label-title {height: 3.614vw; padding-bottom: 0.120vw; border-radius: 1.084vw 1.084vw 0 0; border-width: 0.120vw; font-size: 1.687vw; text-shadow: 0 0.241vw 0.120vw #FFC832;} .section-package .package-wrap-deal .package-info .label-title::before {left: 0.241vw; top: 0.241vw; width: calc(100% - 0.482vw); height: calc(100% - 0.482vw); border-radius: 0.843vw 0.843vw 0.120vw 0.120vw;} .section-package .package-wrap-deal .package-info .label-title::after {height: 0.060vw;} .section-package .package-wrap-deal .package-info .img-area {height: 5.723vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box {right: 1.506vw; bottom: 2.711vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt {letter-spacing: 0.060vw; font-size: 1.205vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .unit {margin-right: 0.301vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt:nth-child(1) {-webkit-text-stroke-width: 0.181vw; -moz-text-stroke-width: 0.181vw; -ms-text-stroke-width: 0.181vw; text-stroke-width: 0.181vw;} .section-package .package-wrap-deal .package-info .coupon-wrapper, .section-package .package-wrap-deal .package-info .layer-more-wrapper {top: 3.614vw;} .section-package .package-wrap-deal .package-info .coupon-wrapper {margin-top: -0.602vw;} .section-package .package-wrap-deal .package-info .chip-area {margin-top: -0.301vw;} .section-package .package-wrap-deal .gift-info {height: 7.831vw; padding: 0;} .section-package .package-wrap-deal .timer-area + .gift-info {padding-bottom: 1.205vw;} .section-package .package-wrap-deal .timer-area {bottom: -1.265vw; min-width: 12.651vw; height: 2.530vw; padding: 0 1.807vw 0 3.012vw; border-width: 0.181vw; border-radius: 1.807vw; font-size: 1.446vw; letter-spacing: 0.06vw;} .section-package .package-wrap-deal .timer-area::before {left: -1.205vw; width: 3.494vw; height: 3.855vw;} .section-package .package-wrap-deal .swiper-pagination .swiper-pagination-bullet {width: 1.205vw; height: 1.205vw; margin: 0 0.904vw;} /* section-package (deal : single-item O or X) */ .section-package .package-wrap-deal.single-item .swiper-slide {flex: 0 0 calc(33% - 0.602vw); margin-right: 1.205vw;} /* flash deal */ .section-package .package-wrap-deal.fdeal .package-info .coupon-wrapper {margin-top: -0.843vw;} .section-package .package-wrap-deal.fdeal .package-info .label-title {font-size: 1.687vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box {bottom: 2.108vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box .unit {margin-right: 0.120vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt1 {right: 9.277vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt2 {right: 5.843vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt3 {right: 2.41vw;} /* section-package (packages) */ .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap {flex: 0 0 calc(33% - 0.602vw); margin-right: 1.205vw; margin-bottom: 1.205vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-info .innerbox {height: 16.867vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap.has-coupon .package-info .innerbox {height: 18.0722vw;} .section-package .package-wrap-upselling .gift-info {padding: 0.723vw 0.723vw 6.024vw;} .section-package .package-wrap-upselling .package-wrap .button-pay {bottom: 1.506vw;} .section-package .package-wrap-upselling .soldout-content {margin-top: -2.41vw;} .section-package .package-wrap-upselling .soldout-content .img-area {width: 41.807vw;} .section-package .package-wrap-upselling .soldout-content .text-area {margin-top: 3.012vw; font-size: 3.614vw;} /* section-btm-banner */ .section-btm-banner .inner-box {width: 32.530vw;} .section-btm-banner .img-character {left: 1.386vw; top: -4.277vw; width: 39.157vw;} } /* * [해상도 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) { /* store 관련 공통 스타일 */ :root { --userinfo-panel-height: 5.208vw; --navi-height: 5.208vw; } .layout-inner {width: 74.74vw;} .header-wrap .header .layout-inner, .footer-wrap .layout-inner {width: 100%;} /* loading */ .loading-layer .loading-img {width: 25%;} /* floating-banner */ .floating-banner {right: 2.344vw; bottom: 7.510vw;} .floating-banner > * {margin-right: 1.432vw;} .floating-banner .button-floating-toggle {left: 2.669vw; width: 6.771vw; height: 9.18vw;} .floating-banner .button-floating-toggle::before {left: -0.5vw; top: -0.3vw; width: 1.2371vw; height: 2.08vw;} .floating-banner .hidden-banner .coupon-wrapper {min-height: 13.542vw; box-shadow: 0 0.326vw 0.456vw 0 rgba(0, 0, 0, 0.75); border-width: 0.26vw; border-radius: 1.823vw;} .floating-banner .hidden-banner .coupon-wrapper::after {right: -1.432vw; width: 1.432vw; height: 2.148vw;} .floating-banner .hidden-banner .coupon-wrapper .button-refresh {right: -0.781vw; top: -1.497vw; width: 4.753vw; height: 5.143vw;} .floating-banner .hidden-banner .coupon-inner {padding: 1.172vw; border-radius: 1.823vw;} .floating-banner .hidden-banner .coupon-area > * {margin-right: 0.977vw;} .floating-banner .hidden-banner .coupon-area > .coupon {width: 12.37vw; min-height: 10.677vw; padding: 0.846vw 0.846vw 1.042vw; border-width: 0.195vw; border-radius: 0.781vw;} .floating-banner .hidden-banner .coupon-area > .coupon > * {margin-bottom: 0.651vw;} .floating-banner .hidden-banner .coupon-area > .coupon .coupon-rate {width: 4.5vw; font-size: 2.6vw; letter-spacing: -0.2vw;} .floating-banner .hidden-banner .coupon-area > .coupon .time-count, .floating-banner .hidden-banner .coupon-area > .coupon .txt-empty {font-size: 2vw;} .floating-banner .hidden-banner .coupon-area > .coupon.lock .img-area::before {left: -0.846vw; bottom: -1.497vw; width: 3.255vw; height: 3.971vw;} .floating-banner .default-banner .banner-inner {width: 17.643vw; height: 17.643vw;} /* .floating-banner .default-banner .label {right: 1.302vw; top: 2.214vw; width: 3.4vw; height: 3.4vw;} .floating-banner .default-banner .label .num {left: 0.4vw; top: 0.2vw; width: 2.6vw; height: 2.6vw; font-size: 1.8vw;} */ .floating-banner .default-banner .label {right: 1.302vw; top: 2.214vw; width: 4vw; height: 4vw;} .floating-banner .default-banner .label .num {left: 0.4vw; top: 0.1vw; width: 3vw; height: 3vw; font-size: 2.2vw;} .floating-banner .default-banner .img {top: 3.906vw; width: 12.109vw;} .floating-banner .default-banner .txt {bottom: 2.93vw; width: 17.1875vw;} .floating-banner .hidden-banner.expanded .button-floating-toggle {left: 2.214vw;} /* floating-banner : coupon-type */ .floating-banner .hidden-banner .coupon-area > .coupon.coupon-normal .coupon-rate {left: 0.5vw; top: 3.2vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-exclusive .coupon-rate {left: 4.4vw; top: 1.4vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-special .coupon-rate {left: 0.8vw; top: 1.4vw; width: 4vw; font-size: 2.7vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-surprise .coupon-rate {left: 0.8vw; top: 0.9vw; width: 6vw; font-size: 3.5vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-firstpurchase-bonus .coupon-rate {left: 0.6vw; top: 1.4vw; width: 4vw;} /* install-banner */ .install-banner {left: 2.344vw; right: 2.344vw; height: 4.2vw; padding: 0 3vw; border-radius: 3vw;} .install-banner * {font-size: 2vw;} /* header (store) */ .header-wrap .new::after {width: 1.5625vw; height: 1.5625vw;} .header-wrap .header .layout-inner {padding: var(--inner-padding);} .header-wrap .header .layout-al-right {display: flex;} .header-wrap .header .logo > a > * {margin-left: 4.232vw} .header-wrap .header .logo-txt {font-size: 3.255vw;} .header-wrap .header .button-login {width: 16.927vw; height: 5.208vw; margin-left: 1.302vw;} .header-wrap .header .button-login .bg-back, .header-wrap .header .button-login .bg-front {height: 4.818vw; border-radius: 6.510vw;} .header-wrap .header .button-login .bg-back {top: 0.391vw;} .header-wrap .header .button-login .front-inner {left: 0.130vw; top: 0.130vw; width: calc(100% - 0.260vw); height: calc(100% - 0.260vw); border-radius: 6.510vw;} .header-wrap .header .button-login .front-inner::before, .header-wrap .header .button-login .front-inner::after {left: 0.130vw; width: calc(100% - 0.260vw); height: calc(50% - 0.130vw);} .header-wrap .header .button-login .front-inner::before {top: 0.130vw; border-radius: 22.135vw 22.135vw 0 0; } .header-wrap .header .button-login .front-inner::after {bottom: 0.130vw; border-radius: 0 0 22.135vw 22.135vw;} .header-wrap .header .button-login .txt-area .txt {font-size: 2.865vw;} .header-wrap .header .button-login .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.260vw; -moz-text-stroke-width: 0.260vw; -ms-text-stroke-width: 0.260vw; text-stroke-width: 0.260vw;} .header-wrap .header .button-profile {width: 5.208vw; height: 5.208vw;} .header-wrap .userinfo-panel .noti-msg {font-size: 1.823vw;} .header-wrap .userinfo-panel .userinfo .info-area {width: 36.068vw; height: 2.93vw; border-width: 0.181vw; border-radius: 1.953vw;} .header-wrap .userinfo-panel .userinfo .chip-amount {width: 34.831vw; padding: 0 1.302vw 0 3.19vw; font-size: 1.5625vw; line-height: 2.93vw;} .header-wrap .userinfo-panel .userinfo .chip-amount::before {left: -0.456vw; width: 3.646vw; height: 3.971vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm {left: -1.042vw; width: 3.841vw; height: 3.906vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm .num {font-size: 1.5vw; line-height: 1;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-bar .gauge {height: 2.148vw; border-radius: 1.953vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap {font-size: 1.5625vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap .bar {top: 0; font-size: 1.5625vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap:first-child * {-webkit-text-stroke-width: 0.130vw; -moz-text-stroke-width: 0.130vw; -ms-text-stroke-width: 0.130vw; text-stroke-width: 0.130vw;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox {right: -0.716vw; top: -0.846vw; width: 3.32vw; height: 4.036vw; margin-top: 0;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox.new::after {width: 0.977vw; height: 0.977vw;} /* package-navigation */ .package-navigation {border-width: 0.130vw;} .package-navigation .navi {width: 100% !important;} .package-navigation .navi .item .main-txt {font-size: 2.214vw;} .package-navigation.fixed {border-width: 0.130vw;} /* section-package (common) */ .section-package {padding: 5.208vw 0 6.51vw;} .section-package .section-title {margin-bottom: 2.604vw !important; font-size: 3.906vw;} .section-package .package-wrap {border-width: 0.26vw; border-radius: 1.953vw;} .section-package .package-wrap .tag-title {top: -0.9vw; width: 24.219vw; height: 3.45vw; font-size: 1.822vw;} .section-package .package-wrap .gift-list-comm > li {flex: 0 0 calc(20% - 0.781vw); height: 5.859vw; margin-right: 0.977vw; margin-bottom: 0.977vw; border-width: 0.26vw; border-radius: 1.172vw;} .section-package .package-wrap .gift-list-comm .info-cnt {margin-top: -0.120vw; font-size: 1.302vw;} .section-package .package-wrap .gift-list-comm .info-txt {font-size: 1.302vw;} .section-package .package-wrap .package-info {border-width: 0.26vw; border-radius: 1.8vw 1.8vw 0 0;} .section-package .package-wrap .package-info .coupon-wrapper {left: -1.042vw; top: -1.042vw;} .section-package .package-wrap .package-info .coupon-badge {width: 7.422vw; height: 8.008vw; font-size: 0.723vw;} .section-package .package-wrap .package-info .coupon-badge::after {bottom: 1.6vw; width: 1.3vw; height: 1vw;} .section-package .package-wrap .package-info .coupon-badge * {text-shadow: 0.120vw 0.181vw 0.181vw rgb(0, 0, 0, .3);} .section-package .package-wrap .package-info .coupon-badge .percent {font-size: 1.6vw;} .section-package .package-wrap .package-info .coupon-badge .num {font-size: 1.8vw;} .section-package .package-wrap .package-info .coupon-badge .txt {font-size: 1.25vw;} .section-package .package-wrap .package-info .coupon-tooltip {left: -0.977vw; width: 9.31vw; height: 7.682vw; margin-top: 0;} .section-package .package-wrap .package-info .coupon-tooltip * {font-size: 1.4vw;} .section-package .package-wrap .package-info .coupon-tooltip .percent {height: 2vw; line-height: 2vw;} .section-package .package-wrap .package-info .coupon-tooltip .num {font-size: 1.5vw;} .section-package .package-wrap .package-info .layer-more-wrapper {width: calc(100% - 2.604vw); margin: 0 1.302vw;} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more {width: 5.469vw; height: 5.729vw; margin-top: 1.302vw; box-shadow: 0 0.169vw 0.208vw 0 rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more::before {width: 2.799vw; height: 2.799vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more {top: 1.042vw; padding: 0.651vw 0.651vw 0.13vw; border-width: 0.26vw; border-radius: 1.953vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li {flex: 0 0 calc(20% - 0.417vw); margin-right: 0.521vw; margin-bottom: 0.521vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm .info-cnt {font-size: 1.05vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li:first-child .info-cnt {margin-top: 0.32vw;} .section-package .package-wrap .package-info .layer-more-wrapper.show .btn-more::before {width: 2.148vw; height: 2.148vw;} .section-package .package-wrap .package-info .innerbox {padding: 0 0 2vw;} .section-package .package-wrap .package-info .chip-area {margin-top: -2vw;} .section-package .package-wrap .package-info .chip-box .current-chip {margin-top: 0.26vw; font-size: 3.906vw; text-shadow: 0 0.247vw 0.182vw rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .chip-box .original-chip {font-size: 2.604vw;} .section-package .package-wrap .package-info .point-area {min-width: 11.068vw; height: 2.604vw; padding: 0 1.693vw 0 2.865vw; margin-top: 0.651vw; border-radius: 1.953vw; font-size: 1.823vw; line-height: 2.604vw;} .section-package .package-wrap .package-info .point-area::before {left: -0.846vw; width: 2.93vw; height: 3.32vw;} .section-package .package-wrap .tag-title + .package-info .innerbox {padding-top: 3.906vw;} .section-package .package-wrap .gift-info {padding: 1.953vw 0 2.344vw; border-bottom-left-radius: 1.8vw; border-bottom-right-radius: 1.8vw;} .section-package .package-wrap .button-pay .price-txt * {font-size: 3.516vw;} .section-package .package-wrap .button-pay .price-txt .cnt-num {margin-left: 0.391vw; font-size: 2.214vw;} .section-package .package-wrap .button-pay.icon-best::before, .section-package .package-wrap .button-pay.icon-hot::before {left: -1.3vw; top: -1.5vw; width: 5vw; height: 5vw;} /* section-package (navigation fixed) */ .package-navigation.fixed + .section-package {padding-top: calc(5.208vw + var(--navi-height));} /* section-package (p.p show) */ .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge {padding-bottom: 0.8vw;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge.inactive::after {bottom: 1.2vw;} /* section-package (deal common: sdeal, fdeal) */ .section-package .package-wrap-deal .section-content {margin-bottom: 5.4vw;} .section-package .package-wrap-deal .swiper-wrapper {margin-bottom: 4.557vw;} .section-package .package-wrap-deal .package-info {height: 32vw; padding-top: 6.510vw;} .section-package .package-wrap-deal .package-info .innerbox {padding: 2vw 0 0;} .section-package .package-wrap-deal .package-info .label-title {height: 6.510vw; padding-bottom: 0.13vw; border-radius: 1.432vw 1.432vw 0 0; border-width: 0.26vw; font-size: 2.7vw; text-shadow: 0 0.234vw 0.078vw #FFC832;} .section-package .package-wrap-deal .package-info .label-title::before {left: 0.26vw; top: 0.26vw; width: calc(100% - 0.521vw); height: calc(100% - 0.521vw); border-radius: 1.302vw 1.302vw 0.26vw 0.26vw;} .section-package .package-wrap-deal .package-info .label-title::after {height: 0.13vw;} .section-package .package-wrap-deal .package-info .img-area {height: 9.115vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box {right: 4.5vw; bottom: 2.5vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt {font-size: 1.5625vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt:nth-child(1) {-webkit-text-stroke-width: 0.195vw; -moz-text-stroke-width: 0.195vw; -ms-text-stroke-width: 0.195vw; text-stroke-width: 0.195vw;} .section-package .package-wrap-deal .package-info .coupon-wrapper, .section-package .package-wrap-deal .package-info .layer-more-wrapper {top: 6.510vw;} .section-package .package-wrap-deal .package-info .coupon-wrapper {margin-top: -0.651vw;} .section-package .package-wrap-deal .package-info .chip-area {margin-top: -.2vw;} .section-package .package-wrap-deal .gift-info {height: 12.109vw; padding: 0;} .section-package .package-wrap-deal .timer-area + .gift-info {padding-bottom: 1.823vw;} .section-package .package-wrap-deal .timer-area {bottom: -1.823vw; min-width: 20.443vw; height: 4.036vw; padding: 0 2.93vw 0 5.208vw; border-width: 0.26vw; border-radius: 2.344vw; font-size: 2.344vw;} .section-package .package-wrap-deal .timer-area::before {left: -0.5vw; width: 5.599vw; height: 6.25vw;} .section-package .package-wrap-deal .swiper-pagination {display: block; bottom: -1.7vw;} .section-package .package-wrap-deal .swiper-pagination .swiper-pagination-bullet {width: 1.7vw; height: 1.7vw; margin: 0 1vw;} /* section-package (deal : single-item O or X) */ .section-package .package-wrap-deal.single-item .section-content {margin-bottom: 0;} .section-package .package-wrap-deal.single-item .swiper-slide {flex: 0 0 calc(50% - 1.042vw); margin-right: 2.083vw;} /* flash deal */ .section-package .package-wrap-deal.fdeal .package-info .coupon-wrapper {margin-top: -1vw;} .section-package .package-wrap-deal.fdeal .package-info .label-title {font-size: 3.125vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box {bottom: 2.6vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box .unit {margin-right: 0.120vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt1 {right: 15.5vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt2 {right: 9.5vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt3 {right: 4.5vw;} /* section-package (packages) */ .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap {flex: 0 0 calc(50% - 1.042vw); margin-right: 2.083vw !important; margin-bottom: 2.083vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap:nth-child(2n) {margin-right: 0 !important;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-info .innerbox {height: 27vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap.has-coupon .package-info .innerbox {height: 29.3vw;} .section-package .package-wrap-upselling .gift-info {padding: 1.302vw 1.302vw 9.115vw;} .section-package .package-wrap-upselling .package-wrap .button-pay {bottom: 2.279vw;} .section-package .package-wrap-upselling .soldout-content .img-area {width: 45.182vw;} .section-package .package-wrap-upselling .soldout-content .text-area {font-size: 3.906vw;} /* section-btm-banner */ .section-btm-banner .inner-box {width: 37.76vw;} .section-btm-banner .img-character {left: 0.586vw; top: -4.6vw; width: 42.318vw;} } /* * [해상도 ~ 480px] * - 모바일 (최소 360px까지) * - 360 기준 / DPR 3 / 3.6 * - 모바일 ui 적용 (mode-mobile) */ @media all and (max-width:480px) { /* store 관련 공통 스타일 */ :root { --userinfo-panel-height: 13.333vw; --navi-height: 11.111vw; } /* loading */ .loading-layer .loading-img {width: 60%;} /* floating-banner */ .floating-banner {right: 3.704vw; bottom: 10vw;} .floating-banner > * {margin-right: 2.037vw;} .floating-banner .button-floating-toggle {left: 3.796vw; width: 9.63vw; height: 13.056vw;} .floating-banner .button-floating-toggle::before {left: -0.8vw; top: -0.5vw; width: 1.759vw; height: 2.963vw;} .floating-banner .hidden-banner .coupon-wrapper {min-height: 19.259vw; box-shadow: 0 0.463vw 0.648vw 0 rgba(0, 0, 0, 0.75); border-width: 0.37vw; border-radius: 2.593vw;} .floating-banner .hidden-banner .coupon-wrapper::after {right: -2.037vw; width: 2.037vw; height: 3.056vw;} .floating-banner .hidden-banner .coupon-wrapper .button-refresh {right: -1.111vw; top: -2.13vw; width: 6.759vw; height: 7.315vw;} .floating-banner .hidden-banner .coupon-inner {padding: 1.667vw; border-radius: 2.593vw;} .floating-banner .hidden-banner .coupon-area > * {margin-right: 1.389vw;} .floating-banner .hidden-banner .coupon-area > .coupon {width: 17.593vw; min-height: 15.185vw; padding: 1.204vw 1.204vw 1.481vw; border-width: 0.278vw; border-radius: 1.111vw;} .floating-banner .hidden-banner .coupon-area > .coupon > * {margin-bottom: 0.926vw;} .floating-banner .hidden-banner .coupon-area > .coupon .coupon-rate {width: 6.5vw; font-size: 3.704vw; letter-spacing: -0.2vw;} .floating-banner .hidden-banner .coupon-area > .coupon .time-count, .floating-banner .hidden-banner .coupon-area > .coupon .txt-empty {font-size: 2.963vw;} .floating-banner .hidden-banner .coupon-area > .coupon.lock .img-area::before {left: -1.204vw; bottom: -2.13vw; width: 4.444vw; height: 5.556vw;} .floating-banner .default-banner .banner-inner {width: 25.093vw; height: 25.093vw;} /* .floating-banner .default-banner .label {right: 1.852vw; top: 3.148vw; width: 4.259vw; height: 4.259vw;} .floating-banner .default-banner .label .num {left: 0.5vw; width: 3vw; height: 2.8vw; font-size: 2.222vw;} */ .floating-banner .default-banner .label {right: 1.852vw; top: 3.148vw; width: 5.6vw; height: 5.6vw;} .floating-banner .default-banner .label .num {left: 0.6vw; top: 0.2vw; width: 4vw; height: 4vw; font-size: 3vw;} .floating-banner .default-banner .img {top: 5.556vw; width: 17.222vw;} .floating-banner .default-banner .txt {bottom: 4.1667vw; width: 24.444vw;} .floating-banner .hidden-banner.expanded .button-floating-toggle {left: 3.241vw;} /* floating-banner : coupon-type */ .floating-banner .hidden-banner .coupon-area > .coupon.coupon-normal .coupon-rate {left: 0.5vw; top: 4.5vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-exclusive .coupon-rate {left: 6vw; top: 1.8vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-special .coupon-rate {left: 0.4vw; top: 1.6vw; width: 7vw; font-size: 4vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-surprise .coupon-rate {left: 0.6vw; top: 1.8vw; width: 10vw; font-size: 5vw;} .floating-banner .hidden-banner .coupon-area > .coupon.coupon-firstpurchase-bonus .coupon-rate {left: 0.5vw; top: 2.2vw; width: 6vw;} /* install-banner */ .install-banner {left: 3.5vw; right: 3.5vw; bottom: 2vw; height: 8vw;} .install-banner * {font-size: 3.2vw;} /* header (store) */ .header-wrap .new::after {width: 2.778vw; height: 2.778vw;} .header-wrap .header-fixed {z-index: 101;} .header-wrap .header .logo > a > * {margin-left: 3.704vw;} .header-wrap .header .logo-txt {font-size: 5.556vw;} .header-wrap .header .button-login {width: 25.926vw; height: 9.259vw; margin-left: 0.926vw;} .header-wrap .header .button-login .bg-back, .header-wrap .header .button-login .bg-front {height: 8.611vw; border-radius: 4.444vw;} .header-wrap .header .button-login .bg-back {top: 0.648vw;} .header-wrap .header .button-login .front-inner {left: 0.278vw; top: 0.278vw; width: calc(100% - 0.556vw); height: calc(100% - 0.556vw); border-radius: 4.444vw;} .header-wrap .header .button-login .front-inner::before, .header-wrap .header .button-login .front-inner::after {left: 0.278vw; width: calc(100% - 0.556vw); height: calc(50% - 0.278vw);} .header-wrap .header .button-login .front-inner::before {top: 0.278vw; border-radius: 46.296vw 46.296vw 0 0; } .header-wrap .header .button-login .front-inner::after {bottom: 0.278vw; border-radius: 0 0 46.296vw 46.296vw;} .header-wrap .header .button-login .txt-area .txt {font-size: 4.074vw;} .header-wrap .header .button-login .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;} .header-wrap .header .button-profile {width: 8.333vw; height: 8.333vw;} .header-wrap .userinfo-panel .noti-msg {font-size: 3.701vw;} .header-wrap .userinfo-panel .userinfo .info-area {width: 43.148vw; height: 6.481vw; border-width: 0.37vw; border-radius: 3.704vw;} .header-wrap .userinfo-panel .userinfo .chip-amount {width: 45.185vw; padding: 0 3.704vw 0 7.222vw; font-size: 3.333vw; line-height: 1;} .header-wrap .userinfo-panel .userinfo .chip-amount::before {left: -0.37vw; width: 7.593vw; height: 8.333vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm {left: -2.407vw; width: 7.778vw; height: 7.87vw;} .header-wrap .userinfo-panel .userinfo .point-progress .icon-level-comm .num {font-size: 2.6vw; line-height: 1;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-bar .gauge {height: 4.63vw; border-radius: 3.704vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap {font-size: 3.333vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap .bar {font-size: 3.333vw;} .header-wrap .userinfo-panel .userinfo .point-progress .progress-value .value-wrap:first-child * {-webkit-text-stroke-width: 0.37vw; -moz-text-stroke-width: 0.37vw; -ms-text-stroke-width: 0.37vw; text-stroke-width: 0.37vw;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox {right: -1.019vw; top: -1.574vw; width: 6.852vw; height: 8.333vw;} .header-wrap .userinfo-panel .userinfo .point-progress .btn-giftbox.new::after {width: 1.8vw; height: 1.8vw;} /* package-navigation */ .package-navigation {border-width: 0.185vw;} .package-navigation .navi .item .main-txt {font-size: 4.0741vw;} .package-navigation.fixed {border-width: 0.185vw;} /* section-package (common) */ .section-package {padding: 9.259vw 0 11.111vw;} .section-package .section-title {margin-bottom: 5.556vw !important; font-size: 7.407vw;} .section-package .package-wrap {border-width: 0.556vw; border-radius: 4.63vw;} .section-package .package-wrap .tag-title {top: -2.35vw; width: 61.667vw; height: 8.796vw; font-size: 4.63vw;} .section-package .package-wrap .gift-list-comm > li {flex: 0 0 calc(20% - 2.074vw); height: 14.815vw; margin-right: 2.593vw; margin-bottom: 2.593vw; border-width: 0.556vw; border-radius: 2.778vw;} .section-package .package-wrap .gift-list-comm .info-cnt {margin-top: -0.8vw; font-size: 3.333vw;} .section-package .package-wrap .gift-list-comm .info-txt {font-size: 3.333vw;} .section-package .package-wrap .package-info {border-width: 0.556vw; border-radius: 4vw 4vw 0 0;} .section-package .package-wrap .package-info .coupon-wrapper {left: -2.963vw; top: -2.963vw;} .section-package .package-wrap .package-info .coupon-badge {width: 18.981vw; height: 19.907vw;} .section-package .package-wrap .package-info .coupon-badge::after {bottom: 3.5vw; width: 3vw; height: 2vw;} .section-package .package-wrap .package-info .coupon-badge * {text-shadow: 0 0.463vw 0.37vw rgb(0, 0, 0, .3);} .section-package .package-wrap .package-info .coupon-badge .percent {font-size: 4.2vw;} .section-package .package-wrap .package-info .coupon-badge .num {font-size: 4.63vw;} .section-package .package-wrap .package-info .coupon-badge .txt {font-size: 3.333vw;} .section-package .package-wrap .package-info .coupon-tooltip {left: 0; width: 24.074vw; height: 19.815vw; margin-top: 1vw;} .section-package .package-wrap .package-info .coupon-tooltip * {font-size: 4vw;} .section-package .package-wrap .package-info .coupon-tooltip .percent {bottom: 1vw; height: 5vw; line-height: 5vw;} .section-package .package-wrap .package-info .coupon-tooltip .num {font-size: 4.2vw;} .section-package .package-wrap .package-info .layer-more-wrapper {width: calc(100% - 5.556vw); margin: 0 2.778vw;} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more {width: 13.889vw; height: 14.444vw; margin-top: 2.778vw; box-shadow: 0 0.441vw 0.528vw 0 rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .layer-more-wrapper .btn-more::before {width: 6.944vw; height: 7.13vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more {top: 1.852vw; padding: 1.852vw 1.852vw 0.556vw; border-width: 0.556vw; border-radius: 4.63vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li {flex: 0 0 calc(20% - 1.037vw); margin-right: 1.296vw; margin-bottom: 1.296vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm .info-cnt {font-size: 2.963vw;} .section-package .package-wrap .package-info .layer-more-wrapper .layer-more .gift-list-comm > li:first-child .info-cnt {margin-top: 0.5vw;} .section-package .package-wrap .package-info .layer-more-wrapper.show .btn-more::before {width: 5.37vw; height: 5.37vw;} .section-package .package-wrap .package-info .innerbox {padding: 0 0 5.556vw;} .section-package .package-wrap .package-info .chip-area {margin-top: -2vw;} .section-package .package-wrap .package-info .chip-box .current-chip {margin-top: 1vw; font-size: 10.185vw; text-shadow: 0 0.622vw 0.463vw rgba(0, 0, 0, 0.25);} .section-package .package-wrap .package-info .chip-box .original-chip {font-size: 6.667vw;} .section-package .package-wrap .package-info .point-area {min-width: 28.148vw; height: 6.481vw; padding: 0 3.701vw 0 5.556vw; margin-top: 2.5vw; border-radius: 5.556vw; font-size: 4.63vw; line-height: 6.481vw;} .section-package .package-wrap .package-info .point-area::before {left: -1.852vw; width: 7.407vw; height: 8.426vw;} .section-package .package-wrap .tag-title + .package-info .innerbox {padding-top: 11vw;} .section-package .package-wrap .gift-info {padding: 5.556vw 0 7.407vw; border-bottom-left-radius: 4vw; border-bottom-right-radius:4vw;} .section-package .package-wrap .button-pay .price-txt * {font-size: 9.259vw;} .section-package .package-wrap .button-pay .price-txt .cnt-num {margin-left: 0.648vw; font-size: 5.556vw;} .section-package .package-wrap .button-pay.icon-best::before, .section-package .package-wrap .button-pay.icon-hot::before {left: -3vw; top: -5vw; width: 13vw; height: 13vw;} /* section-package (navigation fixed) */ .package-navigation.fixed + .section-package {padding-top: calc(9.259vw + var(--navi-height));} /* section-package (p.p show) */ .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge {padding-bottom: 1.5vw;} .section-package .package-wrap.pp-coupon-show .package-info .coupon-badge.inactive::after {bottom: 3.2vw;} /* section-package (deal common: sdeal, fdeal) */ .section-package .package-wrap-deal .section-content {margin-bottom: 9vw;} .section-package .package-wrap-deal .swiper-wrapper {margin-bottom: 9.815vw;} .section-package .package-wrap-deal .package-info {height: 86vw; padding-top: 16.667vw;} .section-package .package-wrap-deal .package-info .innerbox {padding: 8vw 0 0;} .section-package .package-wrap-deal .package-info .label-title {height: 16.667vw; padding-bottom: 0.13vw; border-radius: 4vw 4vw 0 0; border-width: 0.556vw; font-size: 6.2vw; text-shadow: 0 0.593vw 0.185vw #FFC832;} .section-package .package-wrap-deal .package-info .label-title::before {left: 0.556vw; top: 0.556vw; width: calc(100% - 1.111vw); height: calc(100% - 1.111vw); border-radius: 0.741vw 0.741vw 3.148vw 3.148vw;} .section-package .package-wrap-deal .package-info .label-title::after {height: 0.556vw;} .section-package .package-wrap-deal .package-info .img-area {height: 21vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box {right: 7.5vw; bottom: 5.5vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .txt {font-size: 4.63vw;} .section-package .package-wrap-deal .package-info .img-area .txt-box .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;} .section-package .package-wrap-deal .package-info .coupon-wrapper, .section-package .package-wrap-deal .package-info .layer-more-wrapper {top: 16.667vw;} .section-package .package-wrap-deal .package-info .coupon-wrapper {margin-top: -4vw;} .section-package .package-wrap-deal .package-info .chip-area {margin-top: 3vw;} .section-package .package-wrap-deal .gift-info {height: 31.481vw; padding: 0;} .section-package .package-wrap-deal .timer-area + .gift-info {padding-bottom: 5.093vw;} .section-package .package-wrap-deal .timer-area {bottom: -4.63vw; min-width: 52.222vw; height: 10.185vw; padding: 0 7.407vw 0 12.963vw; border-width: 0.556vw; border-radius: 5.556vw; font-size: 5.556vw;} .section-package .package-wrap-deal .timer-area::before {left: -0.833vw; width: 13.889vw; height: 15.556vw;} .section-package .package-wrap-deal .swiper-pagination {bottom: -1.7vw;} .section-package .package-wrap-deal .swiper-pagination .swiper-pagination-bullet {width: 3.5vw; height: 3.5vw; margin: 0 2vw;} /* section-package (deal : single-item O or X) */ .section-package .package-wrap-deal.single-item .swiper-slide {flex: 0 0 calc(100%); margin-right: 0;} /* flash deal */ .section-package .package-wrap-deal.fdeal .package-info .coupon-wrapper {margin-top: -2.963vw;} .section-package .package-wrap-deal.fdeal .package-info .label-title {font-size: 7.407vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box {bottom: 6vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box .unit {margin-right: 0.5vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt1 {right: 32vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt2 {right: 19vw;} .section-package .package-wrap-deal.fdeal .package-info .img-area .txt-box.txt3 {right: 7vw;} /* section-package (packages) */ .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap {flex: 100%; margin-right: 0 !important; margin-bottom: 3.704vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-info .innerbox {height: 73vw;} .section-package [class^=package-wrap-]:not(.package-wrap-deal) .package-wrap.has-coupon .package-info .innerbox {height: 79.907vw;} .section-package .package-wrap-upselling .gift-info {padding: 3.704vw 3.704vw 24.074vw;} .section-package .package-wrap-upselling .package-wrap {margin-bottom: 5.556vw !important;} .section-package .package-wrap-upselling .package-wrap:last-child {margin-bottom: 0 !important;} .section-package .package-wrap-upselling .package-wrap .button-pay {bottom: 5.37vw;} .section-package .package-wrap-upselling .soldout-content .img-area {width: 100%;} .section-package .package-wrap-upselling .soldout-content .text-area {font-size: 7.407vw;} /* section-btm-banner */ .section-btm-banner .inner-box {width: 59.259vw;} .section-btm-banner .img-character {left: -14vw; top: -6.5vw; width: 70vw;} }