@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/store_common.css
 *  Description : 웹상점 공통 스타일 (스토어 메인 / 로그인 공용)
 *  Page : /store/index.php, /store/main.php
 */


/* loading-layer / install-banner : 기존 store.css 의 공통 규칙 (개편 페이지는 store.css 미사용) */
.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;}
.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;}

/* store-footer */
.store-footer {width: 100%; display: flex; flex-direction: column; align-items: center; background: var(--c-bg, #240075);}
.store-footer__inner {display: flex; flex-direction: column; align-items: center;}

.store-footer__logo a {display: block; width: 100%; height: 100%;}
.store-footer__logo img {display: block; width: 100%; height: 100%; object-fit: contain;}

.store-footer__links {display: flex; align-items: center; color: #fff; font-family: var(--ft-family_Poppins-400); white-space: nowrap;}
.store-footer__links a {color: inherit; font-family: inherit; font-size: inherit; text-decoration: none;}
.store-footer__links .sep {color: var(--c-faq-body, #dbd4ec); font-family: inherit; font-size: inherit;}

/* store-footer__playnow */
.store-footer__playnow {display: block; position: relative; padding: 0; border: 0; background: none; cursor: pointer;}
.store-footer__playnow .btn {position: absolute; border-radius: 900px; background: linear-gradient(180deg, var(--c-buy-1, #b4f84a) 18.241%, var(--c-buy-2, #4ac535) 40.832%, var(--c-buy-3, #056a0a) 89.242%);}
.store-footer__playnow .glow {position: absolute; border-radius: 900px; background: linear-gradient(180deg, #bcf760 0%, #016b00 100%); opacity: .2;}
.store-footer__playnow .shine {position: absolute; border-radius: 900px; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 34.135%, #fff 100%); opacity: .3;}
.store-footer__playnow .txt {position: absolute; display: flex; justify-content: center; font-family: var(--ft-family_NotoSans-800); text-align: center; background-image: linear-gradient(180deg, #fff 34.066%, #c3ff9b 72.105%);}

.store-footer__getapp {display: none; position: relative; background: linear-gradient(180deg, #0815c9 0%, #0056df 100%);}
.store-footer__getapp .ico {position: absolute;}
.store-footer__getapp .ico img {display: block; width: 100%; height: 100%; object-fit: contain;}
.store-footer__getapp .bar {position: absolute; background: linear-gradient(90deg, #3b79f7 0 50%, #0314ca 50% 100%);}
.store-footer__getapp .tit {position: absolute; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_Poppins-600); white-space: nowrap;}
.store-footer__getapp .sub {position: absolute; display: flex; align-items: center; color: #fff; font-family: var(--ft-family_Poppins-400); white-space: nowrap;}

.store-footer__copy {width: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-bg-deep, #1a0057); overflow: hidden;}
.store-footer__copy p {color: var(--c-faq-body, #dbd4ec); font-family: var(--ft-family_Poppins-300); text-align: center; white-space: nowrap;}

/* store-footer */
.is-touch .store-footer__playnow {display: none;}
.is-touch .store-footer__getapp {display: block;}


/* store-footer : 스토어 값 */
.store-footer__inner {padding: 40.38px 0 39.21px;}
.store-footer__logo {width: 96.91px; height: 96.91px; margin-bottom: 39.72px;}
/* store-footer__links */
.store-footer__links {margin-bottom: 31.63px; font-size: 19.382px; line-height: normal;}
.store-footer__links .sep {padding: 0 17.3px;}

/* store-footer__playnow */
.store-footer__playnow {width: 363.41px; height: 78.49px; filter: drop-shadow(0 5.05px 2.02px rgba(0, 0, 0, .3));}
.store-footer__playnow .btn {left: 4.22%; top: -1.03%; width: 91.34%; height: 103.92%; box-shadow: inset 0 -2.42px 1.62px 0 rgba(0, 59, 1, .65), inset 0 -1.62px 3.23px 0 #055017, inset 0 0 6.62px 0 #057407;}
.store-footer__playnow .glow {left: 5.33%; top: 1.03%; width: 88.89%; height: 95.69%; box-shadow: inset 0 -2.42px .81px 0 #1e9020; filter: blur(.52px);}
.store-footer__playnow .shine {left: 8.93%; top: 6.17%; width: 82%; height: 50.41%;}
.store-footer__playnow .txt {left: 9.78%; top: 9.26%; width: 80.22%; height: 79.22%; flex-direction: column; font-size: 40.379px; line-height: normal; letter-spacing: -0.81px; filter: drop-shadow(0 1.62px 6.38px rgba(5, 80, 23, .45)) drop-shadow(0 2.42px 1.45px #0a5b0c) drop-shadow(0 .81px 0 #0d8800);}

/* store-footer__getapp */
.store-footer__getapp {width: 392.49px; height: 98.12px; border-radius: 10.9px;}
.store-footer__getapp .ico {left: 10.9px; top: 9.03px; width: 78.74px; height: 78.74px;}
.store-footer__getapp .bar {left: 95.7px; top: 9.69px; width: 2.42px; height: 78.74px;}
.store-footer__getapp .tit {left: 109.02px; top: 9.03px; width: 174.16px; height: 43.54px; font-size: 29.11px; line-height: normal; text-shadow: 0 2.43px 2.43px rgba(0, 0, 0, .25);}
.store-footer__getapp .sub {left: 109.02px; top: 51.43px; width: 257.19px; height: 29.36px; font-size: 19.4px; line-height: normal;}

.store-footer__copy {height: 48.46px;}
.store-footer__copy p {font-size: 16.152px; line-height: normal;}


@media all and (min-width:1401px) {
	.store-footer--login .store-footer__inner {padding: 50px 0 46px;}
	.store-footer--login .store-footer__logo {width: 120px; height: 120px; margin-bottom: 50px;}
	.store-footer--login .store-footer__links {height: 36px; margin-bottom: 37px; font-size: 24px; line-height: 1.5;}
	.store-footer--login .store-footer__links .sep {padding: 0 14px;}

	/* store-footer--login */
	.store-footer--login .store-footer__playnow {width: 411px; height: 101px; filter: drop-shadow(0 6.25px 2.5px rgba(0, 0, 0, .3));}
	.store-footer--login .store-footer__playnow .btn {left: 0; top: 0; width: 100%; height: 100%; box-shadow: inset 0 -3px 2px rgba(0, 59, 1, .65), inset 0 -2px 4px #055017, inset 0 0 8.2px #057407;}
	.store-footer--login .store-footer__playnow .glow {left: 5px; top: 2px; width: 400px; height: 93px; box-shadow: inset 0 -3px 1px #1e9020; filter: blur(0.65px);}
	.store-footer--login .store-footer__playnow .shine {left: 21px; top: 7px; width: 369px; height: 49px;}
	.store-footer--login .store-footer__playnow .txt {left: 25px; top: 9.996px; width: 361px; height: 77px; flex-direction: row; align-items: center; font-size: 50px; line-height: 1; letter-spacing: -1px; filter: drop-shadow(0 1px 0 #0d8800) drop-shadow(0 3px 1.8px #0a5b0c) drop-shadow(0 2px 7.9px rgba(5, 80, 23, .45));}

	.store-footer--login .store-footer__getapp {width: 486px; height: 121.5px; border-radius: 9px;}
	.store-footer--login .store-footer__getapp .ico {left: 13.5px; top: 12px; width: 97.5px; height: 97.5px;}
	.store-footer--login .store-footer__getapp .bar {left: 118.5px; top: 12px; width: 3px; height: 97.5px;}
	.store-footer--login .store-footer__getapp .tit {left: 135px; top: 12px; width: 216px; height: 54px; font-size: 36px; line-height: 1.2; text-shadow: 0 3px 3px rgba(0, 0, 0, .25);}
	.store-footer--login .store-footer__getapp .sub {left: 135px; top: 64.5px; width: 318px; height: 36px; font-size: 24px; line-height: 1.2;}

	.store-footer--login .store-footer__copy {height: 60px;}
	.store-footer--login .store-footer__copy p {font-size: 20px; line-height: 1.5;}
}


/* 
 *  [해상도 1400px]
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
	.loading-layer .loading-img {width: 15.06vw;}
	.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;}
	.store-footer__inner {padding: 2.433vw 0 2.362vw;}
	.store-footer__logo {width: 5.838vw; height: 5.838vw; margin-bottom: 2.393vw;}
	.store-footer__links {margin-bottom: 1.905vw; font-size: 1.168vw;}
	.store-footer__links .sep {padding: 0 1.042vw;}
	.store-footer__playnow {width: 21.892vw; height: 4.728vw; filter: drop-shadow(0 0.304vw 0.122vw rgba(0, 0, 0, .3));}
	.store-footer__playnow .btn {box-shadow: inset 0 -0.146vw 0.098vw 0 rgba(0, 59, 1, .65), inset 0 -0.098vw 0.195vw 0 #055017, inset 0 0 0.399vw 0 #057407;}
	.store-footer__playnow .glow {box-shadow: inset 0 -0.146vw 0.049vw 0 #1e9020; filter: blur(0.031vw);}
	.store-footer__playnow .txt {font-size: 2.432vw; letter-spacing: -0.049vw; filter: drop-shadow(0 0.098vw 0.384vw rgba(5, 80, 23, .45)) drop-shadow(0 0.146vw 0.087vw #0a5b0c) drop-shadow(0 0.049vw 0 #0d8800);}
	.store-footer__getapp {width: 23.644vw; height: 5.911vw; border-radius: 0.657vw;}
	.store-footer__getapp .ico {left: 0.657vw; top: 0.544vw; width: 4.743vw; height: 4.743vw;}
	.store-footer__getapp .bar {left: 5.765vw; top: 0.584vw; width: 0.146vw; height: 4.743vw;}
	.store-footer__getapp .tit {left: 6.567vw; top: 0.544vw; width: 10.492vw; height: 2.623vw; font-size: 1.754vw; text-shadow: 0 0.146vw 0.146vw rgba(0, 0, 0, .25);}
	.store-footer__getapp .sub {left: 6.567vw; top: 3.098vw; width: 15.493vw; height: 1.769vw; font-size: 1.169vw;}
	.store-footer__copy {height: 2.919vw;}
	.store-footer__copy p {font-size: 0.973vw;}
}


/* 
 *  [해상도 1024px]
 */
@media all and (max-width:1024px) {
	.loading-layer .loading-img {width: 25%;}
	.install-banner {left: 2.344vw; right: 2.344vw; height: 4.2vw; padding: 0 3vw; border-radius: 3vw;}
	.install-banner * {font-size: 2vw;}
	.store-footer__inner {padding: 2.596vw 0 2.521vw;}
	.store-footer__logo {width: 6.231vw; height: 6.231vw; margin-bottom: 2.554vw;}
	.store-footer__links {margin-bottom: 2.034vw; font-size: 1.246vw;}
	.store-footer__links .sep {padding: 0 1.112vw;}
	.store-footer__playnow {width: 23.365vw; height: 5.047vw; filter: drop-shadow(0 0.325vw 0.13vw rgba(0, 0, 0, .3));}
	.store-footer__playnow .btn {box-shadow: inset 0 -0.156vw 0.104vw 0 rgba(0, 59, 1, .65), inset 0 -0.104vw 0.208vw 0 #055017, inset 0 0 0.426vw 0 #057407;}
	.store-footer__playnow .glow {box-shadow: inset 0 -0.156vw 0.052vw 0 #1e9020; filter: blur(0.033vw);}
	.store-footer__playnow .txt {font-size: 2.596vw; letter-spacing: -0.052vw; filter: drop-shadow(0 0.104vw 0.41vw rgba(5, 80, 23, .45)) drop-shadow(0 0.156vw 0.093vw #0a5b0c) drop-shadow(0 0.052vw 0 #0d8800);}
	.store-footer__getapp {width: 25.235vw; height: 6.309vw; border-radius: 0.701vw;}
	.store-footer__getapp .ico {left: 0.701vw; top: 0.581vw; width: 5.063vw; height: 5.063vw;}
	.store-footer__getapp .bar {left: 6.153vw; top: 0.623vw; width: 0.156vw; height: 5.063vw;}
	.store-footer__getapp .tit {left: 7.009vw; top: 0.581vw; width: 11.198vw; height: 2.799vw; font-size: 1.872vw; text-shadow: 0 0.156vw 0.156vw rgba(0, 0, 0, .25);}
	.store-footer__getapp .sub {left: 7.009vw; top: 3.307vw; width: 16.536vw; height: 1.888vw; font-size: 1.247vw;}
	.store-footer__copy {height: 3.116vw;}
	.store-footer__copy p {font-size: 1.038vw;}
}

@media all and (min-width:481px) and (max-width:1024px) {
	.store-footer--login .store-footer__inner {padding: 2.48vw 0 2.282vw;}
	.store-footer--login .store-footer__logo {width: 5.952vw; height: 5.952vw; margin-bottom: 2.48vw;}
	.store-footer--login .store-footer__links {height: 1.786vw; margin-bottom: 1.835vw; font-size: 1.19vw;}
	.store-footer--login .store-footer__links .sep {padding: 0 0.694vw;}
	.store-footer--login .store-footer__playnow {width: 20.387vw; height: 5.01vw; filter: drop-shadow(0 0.31vw 0.124vw rgba(0, 0, 0, .3));}
	.store-footer--login .store-footer__playnow .btn {box-shadow: inset 0 -0.149vw 0.099vw rgba(0, 59, 1, .65), inset 0 -0.099vw 0.198vw #055017, inset 0 0 0.407vw #057407;}
	.store-footer--login .store-footer__playnow .glow {left: 0.248vw; top: 0.099vw; width: 19.841vw; height: 4.613vw; box-shadow: inset 0 -0.149vw 0.05vw #1e9020; filter: blur(0.032vw);}
	.store-footer--login .store-footer__playnow .shine {left: 1.042vw; top: 0.347vw; width: 18.304vw; height: 2.431vw;}
	.store-footer--login .store-footer__playnow .txt {left: 1.24vw; top: 0.496vw; width: 17.907vw; height: 3.819vw; flex-direction: row; align-items: center; font-size: 2.48vw; line-height: 1; letter-spacing: -0.05vw; filter: drop-shadow(0 0.05vw 0 #0d8800) drop-shadow(0 0.149vw 0.089vw #0a5b0c) drop-shadow(0 0.099vw 0.392vw rgba(5, 80, 23, .45));}
	.store-footer--login .store-footer__getapp {width: 24.107vw; height: 6.027vw; border-radius: 0.446vw;}
	.store-footer--login .store-footer__getapp .ico {left: 0.67vw; top: 0.595vw; width: 4.836vw; height: 4.836vw;}
	.store-footer--login .store-footer__getapp .bar {left: 5.878vw; top: 0.595vw; width: 0.149vw; height: 4.836vw;}
	.store-footer--login .store-footer__getapp .tit {left: 6.696vw; top: 0.595vw; width: 10.714vw; height: 2.679vw; font-size: 1.786vw; text-shadow: 0 0.149vw 0.149vw rgba(0, 0, 0, .25);}
	.store-footer--login .store-footer__getapp .sub {left: 6.696vw; top: 3.199vw; width: 15.774vw; height: 1.786vw; font-size: 1.19vw;}
	.store-footer--login .store-footer__copy {height: 2.976vw;}
	.store-footer--login .store-footer__copy p {font-size: 0.992vw;}
}


/* 
 *  [해상도 480px]
 *  - 모바일
 */
@media all and (max-width:480px) {
	.loading-layer .loading-img {width: 60%;}
	.install-banner {left: 3.5vw; right: 3.5vw; bottom: 2vw; height: 8vw;}
	.install-banner * {font-size: 3.2vw;}
	.store-footer__inner {padding: 8.611vw 0 7.361vw;}
	.store-footer__logo {width: 12.037vw; height: 12.037vw; margin-bottom: 5.37vw;}
	/* store-footer__links */
	.store-footer__links {display: block; width: 84.074vw; height: auto; margin-bottom: 6.019vw; font-size: 3.704vw; line-height: 6vw; text-align: center; white-space: normal;}
	.store-footer__links .sep {padding: 0 1.852vw;}
	.store-footer__links .sep:nth-of-type(2)::after {content: "\A"; white-space: pre;}
	/* store-footer__playnow */
	.store-footer__getapp {width: 45vw; height: 11.25vw; border-radius: 1.25vw;}
	.store-footer__getapp .ico {left: 1.25vw; top: 1.035vw; width: 9.028vw; height: 9.028vw;}
	.store-footer__getapp .bar {left: 10.972vw; top: 1.111vw; width: 0.278vw; height: 9.028vw;}
	.store-footer__getapp .tit {left: 12.5vw; top: 1.035vw; width: 19.963vw; height: 4.991vw; font-size: 3.338vw; line-height: normal;}
	.store-footer__getapp .sub {left: 12.5vw; top: 5.898vw; width: 29.482vw; height: 3.37vw; font-size: 2.224vw; line-height: normal;}
	.store-footer__copy {height: 7.407vw;}
	.store-footer__copy p {font-size: 2.778vw; line-height: 3.2vw;}
}