@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/store_login.css
 *  Description : 웹상점(프레스티지 라운지) 개편 - 로그인 스타일
 *  Page : /store/index.php
 *  Selector : .login-wrap
 */

/* 기본 */
html, body {background: #1a0057;}

/* login-card__title 폴백 : 서체별 폭 보정 */
@font-face {font-family: 'NotoSansCd-fb'; src: local('Noto Sans KR'); size-adjust: 90%;}
@font-face {font-family: 'NotoSansCd-fb2'; src: local('Arial'); size-adjust: 80%;}
.gradient-txt {-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}

/* login-wrap */
.login-wrap {position: relative; width: 100%; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;}
.login-main {flex: 1 0 auto;}

/* login-main */
.login-main {min-height: 940px; padding: 70px 0; box-sizing: border-box; background: url(../../images/store/login/bg_login.jpg) 50% 50% / cover no-repeat;}

.login-card {width: 600px; margin: 0 auto;}

/* login-card__emblem */
.login-card__emblem {position: relative; z-index: 1; display: block; width: 220.894px; height: 220.894px; margin: 0 auto; filter: drop-shadow(0 0 42.018px #e117ff);}
.login-card__emblem img {display: block; width: 100%; height: 100%; object-fit: contain;}

/* login-card__panel */
.login-card__panel {height: 638px; margin-top: -94.017px; padding: 110.857px 0 0; box-sizing: border-box; border-radius: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 35.577%), linear-gradient(180deg, rgba(165, 52, 223, 0) 0%, rgba(55, 111, 255, .48) 100%); box-shadow: 0 23px 43.5px rgba(36, 0, 117, .6), inset 0 3px 3px #fff, inset 0 -3px 3px rgba(255, 255, 255, .2);}

/* login-card__txt */
.login-card__txt {padding: 0 40px;}
/* title 2단 : 부모가 stroke 그라디언트, ::after 가 fill 그라디언트를 덮음. stroke 단색만 되는 한계를 피함 */
.login-card__title {position: relative; margin-bottom: 4.97px; padding-bottom: 8px; font-family: var(--ft-family_NotoSansCd-800), 'NotoSansCd-fb', 'NotoSansCd-fb2', sans-serif; font-size: 35.77px; font-weight: 800; line-height: 1; letter-spacing: -0.357px; text-align: center; -webkit-text-stroke: 2px transparent; background-image: linear-gradient(180deg, #fff68e 0%, #ffb81f 74%); filter: drop-shadow(0 2px 0 #9e2205) drop-shadow(0 3.1px 3.596px rgba(83, 0, 35, .7));}
/* padding-bottom 없으면 g·y 디센더가 배경칠 범위 밖이라 stroke 색으로 뚫림 */
.login-card__title::after {content: "Welcome to the Prestige Lounge"; position: absolute; left: 0; top: 0; width: 100%; padding-bottom: inherit; -webkit-text-stroke: 0; background-image: linear-gradient(180deg, #fff 34.58%, #ffef79 57.08%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.login-card__sub {color: #fff; font-family: var(--ft-family_NotoSans-500), sans-serif; font-size: 21.93px; line-height: 1.5; letter-spacing: -0.219px; text-align: center; text-shadow: 0 1.86px 4.278px #3b0068;}

/* login-btn */
.login-btns {width: 436px; margin: 50.674px auto 0; display: flex; flex-direction: column; gap: 40.558px;}

.login-btn {position: relative; display: flex; align-items: center; width: 100%; height: 71.281px; padding: 0; border: 0; border-radius: 11.88px;}
.login-btn::before {content: ""; position: absolute; left: 84.35px; top: 0; bottom: 0; width: 2.376px;}
.login-btn__icon {position: absolute; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%;}
.login-btn__txt {padding-left: 110.49px; font-family: var(--ft-family_Poppins-700); font-size: 24.95px; line-height: 1; text-transform: uppercase; white-space: nowrap;}

/* login-btn--facebook */
.login-btn--facebook {background: linear-gradient(180deg, #087cfe 30%, #0e55c9 100%); box-shadow: inset 0 -2.376px 1.188px #00398f, inset 0 2.376px 1.188px #2a9dff, 0 3.564px 4.752px rgba(0, 0, 0, .32);}
.login-btn--facebook::before {background: #add2ff; box-shadow: 1.188px 0 0 rgba(102, 177, 252, .25); mix-blend-mode: multiply;}
.login-btn--facebook .login-btn__icon {left: 27.32px; width: 32.076px; height: 32.076px; background-image: url(../../images/store/login/icon_facebook.png);}
.login-btn--facebook .login-btn__txt {color: #fff; text-shadow: 0 0.594px 0 #2a9dff;}

.login-btn--google {background: linear-gradient(180deg, #fff 0%, #d6d6d6 100%); box-shadow: inset 0 -2.376px 1.188px #8b8b8b, inset 0 1.188px 1.188px rgba(165, 166, 166, .23), 0 3.564px 4.752px rgba(0, 0, 0, .32);}
.login-btn--google::before {background: #e4e4e4; box-shadow: 1.188px 0 0 rgba(255, 255, 255, .25); mix-blend-mode: multiply;}
/* login-btn--google */
.login-btn--google .login-btn__icon {left: 27.92px; width: 31.408px; height: 32.076px; background-image: url(../../images/store/login/icon_google.png);}
.login-btn--google .login-btn__txt {color: #000; text-shadow: 0 0.594px 0 #fff;}

/* login-btn--apple */
.login-btn--apple {background: linear-gradient(180deg, #3a383d 0%, #000 100%); box-shadow: inset 0 -2.376px 1.188px #000, inset 0 2.376px 1.188px rgba(93, 90, 110, .5), 0 3.564px 4.752px rgba(0, 0, 0, .32);}
.login-btn--apple::before {background: #0b0a0c; box-shadow: 1.188px 0 0 rgba(161, 161, 161, .25);}
.login-btn--apple .login-btn__icon {left: 27.92px; width: 29.7px; height: 34.452px; background-image: url(../../images/store/login/icon_apple.png); transform: translateY(calc(-50% - 1.78px));}
.login-btn--apple .login-btn__txt {color: #fff; text-shadow: 0 0.594px 0 #5d5a6e;}

/* login-btn--app */
/* 앱 로그인은 터치기기 전용. 화면폭이 아니라 기기로 판별 */
.is-touch .login-btn--app {display: flex; order: -1;}
.is-touch .login-btn--apple {order: 1;}
.is-touch .login-btn--google {order: 2;}
.login-btn--app {display: none; background: linear-gradient(180deg, #51d41c 0%, #028402 100%); box-shadow: inset 0 -2.376px 1.188px rgba(3, 67, 18, .8), inset 0 2.376px 1.188px rgba(112, 254, 65, .46), 0 3.564px 4.752px rgba(0, 0, 0, .32);}
.login-btn--app::before {background: #a6cfac; box-shadow: 1.188px 0 0 rgba(189, 242, 103, .25); mix-blend-mode: multiply;}
.login-btn--app .login-btn__icon {left: 23.17px; width: 40.99px; height: 40.99px; background-image: url(../../images/store/common/img_appicon.png); transform: translateY(calc(-50% - 1.485px));}
.login-btn--app .login-btn__txt {color: #fff; text-shadow: 0 1.188px 0 #65cf3a;}

/* login-btn__last */
.login-btn__last {display: none; position: absolute; left: 441.39px; top: 4.715px; width: 91.43px; height: 71.33px; background: url(../../images/store/login/img_lastlogin.png) 50% 50% / 100% 100% no-repeat;}
.login-btn.is-last .login-btn__last {display: block;}


/* 
 *  [해상도 1024px]
 *  - 시안 프레임 2016 / 20.16
 */
@media all and (max-width:1024px) {
	.login-main {min-height: 76.885vw; padding: 5.084vw 0 5.516vw; background-image: url(../../images/store/login/bg_login_tablet.jpg);}

	.login-card {width: 45.978vw;}
	.login-card__emblem {width: 16.92vw; height: 16.92vw; filter: drop-shadow(0 0 3.219vw #e117ff);}
	.login-card__panel {height: 56.417vw; margin-top: -7.051vw; padding: 7.891vw 0 0; border-radius: 3.065vw; box-shadow: 0 1.762vw 3.333vw rgba(36, 0, 117, .6), inset 0 0.23vw 0.23vw #fff, inset 0 -0.23vw 0.23vw rgba(255, 255, 255, .2);}
	.login-card__txt {padding: 0 3.359vw;}
	.login-card__title {margin-bottom: 0.375vw; padding-bottom: 0.603vw; font-size: 2.697vw; letter-spacing: -0.027vw; -webkit-text-stroke-width: 0.151vw; filter: drop-shadow(0 0.151vw 0 #9e2205) drop-shadow(0 0.234vw 0.271vw rgba(83, 0, 35, .7));}
	.login-card__sub {font-size: 1.653vw; letter-spacing: -0.018vw; text-shadow: 0 0.14vw 0.323vw #3b0068;}

	/* login-btns */
	.login-btns {width: 33.748vw; margin-top: 4.528vw; gap: 3.075vw;}

	.login-btn {height: 5.517vw; border-radius: 0.92vw;}
	.login-btn::before {left: 6.529vw; width: 0.184vw;}
	.login-btn__txt {padding-left: 8.552vw; font-size: 1.931vw;}
	.login-btn--facebook {box-shadow: inset 0 -0.184vw 0.092vw #00398f, inset 0 0.184vw 0.092vw #2a9dff, 0 0.276vw 0.368vw rgba(0, 0, 0, .32);}
	.login-btn--google {box-shadow: inset 0 -0.184vw 0.092vw #8b8b8b, inset 0 0.092vw 0.092vw rgba(165, 166, 166, .23), 0 0.276vw 0.368vw rgba(0, 0, 0, .32);}
	.login-btn--apple {box-shadow: inset 0 -0.184vw 0.092vw #000, inset 0 0.184vw 0.092vw rgba(93, 90, 110, .5), 0 0.276vw 0.368vw rgba(0, 0, 0, .32);}
	.login-btn--app {box-shadow: inset 0 -0.184vw 0.092vw rgba(3, 67, 18, .8), inset 0 0.184vw 0.092vw rgba(112, 254, 65, .46), 0 0.276vw 0.368vw rgba(0, 0, 0, .32);}
	.login-btn--facebook::before {box-shadow: 0.092vw 0 0 rgba(102, 177, 252, .25);}
	.login-btn--google::before {box-shadow: 0.092vw 0 0 rgba(255, 255, 255, .25);}
	.login-btn--apple::before {box-shadow: 0.092vw 0 0 rgba(161, 161, 161, .25);}
	.login-btn--app::before {box-shadow: 0.092vw 0 0 rgba(189, 242, 103, .25);}
	.login-btn--facebook .login-btn__txt {text-shadow: 0 0.046vw 0 #2a9dff;}
	.login-btn--google .login-btn__txt {text-shadow: 0 0.046vw 0 #fff;}
	.login-btn--apple .login-btn__txt {text-shadow: 0 0.046vw 0 #5d5a6e;}
	.login-btn--app .login-btn__txt {text-shadow: 0 0.046vw 0 #65cf3a;}
	.login-btn--facebook .login-btn__icon {left: 2.115vw; width: 2.483vw; height: 2.483vw;}
	.login-btn--google .login-btn__icon {left: 2.161vw; width: 2.437vw; height: 2.483vw;}
	.login-btn--apple .login-btn__icon {left: 2.161vw; width: 2.299vw; height: 2.667vw; transform: translateY(calc(-50% - 0.138vw));}
	.login-btn--app .login-btn__icon {left: 1.793vw; width: 3.172vw; height: 3.172vw; transform: translateY(calc(-50% - 0.23vw));}
	.login-btn__last {left: 34.167vw; top: 0.365vw; width: 7.078vw; height: 5.522vw;}

}

/* 
 *  [해상도 480px]
 *  - 시안 프레임 1080 / 10.8
 */
@media all and (max-width:480px) {
	.login-main {min-height: 163.09vw; padding: 15.185vw 0 12.275vw; background-image: url(../../images/store/login/bg_login.jpg);}

	.login-card {width: 92.593vw;}
	.login-card__emblem {width: 34.043vw; height: 34.043vw; filter: drop-shadow(0 0 6.476vw #e117ff);}
	.login-card__panel {height: 115.741vw; margin-top: -14.154vw; padding: 16.005vw 0 0; border-radius: 6.173vw; box-shadow: 0 3.549vw 6.713vw rgba(36, 0, 117, .6), inset 0 0.463vw 0.463vw #fff, inset 0 -0.463vw 0.463vw rgba(255, 255, 255, .2);}
	.login-card__txt {padding: 0 7.407vw;}
	.login-card__title {margin-bottom: 0.743vw; padding-bottom: 1.194vw; font-size: 5.343vw; letter-spacing: -0.053vw; -webkit-text-stroke-width: 0.299vw; filter: drop-shadow(0 0.299vw 0 #9e2205) drop-shadow(0 0.463vw 0.537vw rgba(83, 0, 35, .7));}
	.login-card__sub {font-size: 3.275vw; letter-spacing: -0.033vw; text-shadow: 0 0.278vw 0.639vw #3b0068;}

	.login-btns {width: 67.9vw; margin-top: 9.152vw; gap: 6.29vw;}
	.login-btn {height: 11.101vw; border-radius: 1.85vw;}
	.login-btn::before {left: 13.136vw; width: 0.37vw;}
	.login-btn__txt {padding-left: 17.207vw; font-size: 3.885vw;}
	.login-btn--facebook {box-shadow: inset 0 -0.37vw 0.185vw #00398f, inset 0 0.37vw 0.185vw #2a9dff, 0 0.555vw 0.74vw rgba(0, 0, 0, .32);}
	.login-btn--google {box-shadow: inset 0 -0.37vw 0.185vw #8b8b8b, inset 0 0.185vw 0.185vw rgba(165, 166, 166, .23), 0 0.555vw 0.74vw rgba(0, 0, 0, .32);}
	.login-btn--apple {box-shadow: inset 0 -0.37vw 0.185vw #000, inset 0 0.37vw 0.185vw rgba(93, 90, 110, .5), 0 0.555vw 0.74vw rgba(0, 0, 0, .32);}
	.login-btn--app {box-shadow: inset 0 -0.37vw 0.185vw rgba(3, 67, 18, .8), inset 0 0.37vw 0.185vw rgba(112, 254, 65, .46), 0 0.555vw 0.74vw rgba(0, 0, 0, .32);}
	.login-btn--facebook::before {box-shadow: 0.185vw 0 0 rgba(102, 177, 252, .25);}
	.login-btn--google::before {box-shadow: 0.185vw 0 0 rgba(255, 255, 255, .25);}
	.login-btn--apple::before {box-shadow: 0.185vw 0 0 rgba(161, 161, 161, .25);}
	.login-btn--app::before {box-shadow: 0.185vw 0 0 rgba(189, 242, 103, .25);}
	.login-btn--facebook .login-btn__txt {text-shadow: 0 0.093vw 0 #2a9dff;}
	.login-btn--google .login-btn__txt {text-shadow: 0 0.093vw 0 #fff;}
	.login-btn--apple .login-btn__txt {text-shadow: 0 0.093vw 0 #5d5a6e;}
	.login-btn--app .login-btn__txt {text-shadow: 0 0.093vw 0 #65cf3a;}
	.login-btn--facebook .login-btn__icon {left: 4.256vw; width: 4.995vw; height: 4.995vw;}
	.login-btn--google .login-btn__icon {left: 4.348vw; width: 4.903vw; height: 4.995vw;}
	.login-btn--apple .login-btn__icon {left: 4.348vw; width: 4.625vw; height: 5.366vw; transform: translateY(calc(-50% - 0.278vw));}
	.login-btn--app .login-btn__icon {left: 3.607vw; width: 6.383vw; height: 6.383vw; transform: translateY(calc(-50% - 0.463vw));}
	.login-btn__last {left: 68.741vw; top: 0.734vw; width: 14.237vw; height: 11.107vw;}

}