@charset "utf-8"; 
@import url("//img.enuri.info/fonts/Pretendard/dist/web/static/pretendard-dynamic-subset.css"); /* Pretendard Web Font */
/************************************************************************
 * 파일명 : memeber_signup.css
 * 설명 : 에누리 간편 회원가입 / 계정연동
 * 작성자 : 신왕섭 
 * 작성일 : 2023.8.11
************************************************************************/
:root {
    --member-sprite : url("//img.enuri.info/images/member/member_sprite.png");
    --member-sprite-size: 320px;
}

body,html{background-color:#fff;font-family:'Pretendard',malgun gothic, "맑은고딕", verdana, sans-serif;}

/* 헤더 */
.enuri-bi{display:none}

/* 간편회원가입 */
.signup{width:100vw;height:calc(100vh - 107px)}
.signup-simple{width:100%;max-width:520px;margin:0 auto}
.signup-simple__tit{display:none}
.signup__bnr{position: relative;}
.signup__bnr img{width:100%}
.signup__bnr img:nth-of-type(1){position:absolute;top:0;left:0;animation: 6s linear infinite fadeinOut}
@keyframes fadeinOut {
    0%,45%,100% {opacity: 1;}
    50%,95% {opacity: 0;}
}
.signup__btn-group{padding:36px}
.signup__btn-group [class^="signup__btn--"]{display:block;line-height:22px;margin-top:8px;padding:15px 0;border-radius:8px;color:#fff;font-size:16px;border:1px solid #fff;box-sizing:border-box;width:100%}
.signup__btn-group [class^="signup__btn--"]:first-child{margin-top:0}
.signup__btn-group [class^="signup__btn--"]:before{content:"";display:inline-block;width:20px;height:20px;vertical-align: -4px;margin-right:4px}
.signup__btn-group .signup__btn--naver{background-color:#06bd34;border-color:#06bd34}
.signup__btn-group .signup__btn--naver:before{background:var(--url-comm-sprite) no-repeat -21px 0 / var(--size-comm-sprite);}
.signup__btn-group .signup__btn--kakao{background-color:#fddc3f;color:#444!important;border-color:#fddc3f}
.signup__btn-group .signup__btn--kakao:before{background:var(--url-comm-sprite) no-repeat -42px 0 / var(--size-comm-sprite);}
.signup__btn-group .signup__btn--apple{background-color:#fff;color:#222!important;border-color:#aaa}
.signup__btn-group .signup__btn--apple:before{background:var(--url-comm-sprite) no-repeat -84px 0 / var(--size-comm-sprite);}
.signup__btn-group .signup__btn--id{background-color:rgba(244, 249, 255, 1)    ;color:#3588F3!important;border-color:rgba(53, 136, 243, 0.6)}
.signup__btn-group .signup__btn--id:before{background:var(--url-comm-sprite) no-repeat -63px 0 / var(--size-comm-sprite);}
.signup__btn--seller{font-size:16px;line-height:20px;padding:16px 0;border-radius:8px;border:1px solid #ddd;background-color:#fff;text-align:center;display:none;color:#666;font-weight:500}

/* 이메일로 시작하기 */
.step1,.step2,.step3,.step4{transition:.3s all ease}
:is(.step1,.step2,.step3,.step4).is--complete{transform:translateX(-100%);opacity:0;position:absolute;}
:is(.step1,.step2,.step3,.step4).is--complete .login__btn--confirm{display:none}

.signup-simple--id{width:100%;max-width:540px;margin:0 auto}
.signup-simple__inner{padding:36px 16px}
.signup-simple__tx--tit{font-size:22px;line-height:28px;color:#222;text-align:left;font-weight:600}
.signup-simple__tx--sub{line-height:18px;font-size:13px;color:#666;letter-spacing:-.5px;margin-top:8px}
.signup-simple__tx--sub em{color:#3588f3}
.login-enuri{margin-top:26px}

.login__btn--confirm{position:fixed;max-width:436px;width:calc(100% - 32px);left:50%;transform:translate(-50%,72px);bottom:20px;height:52px;background-color:#3588f3;color:#fff;border-radius:8px;transition:.5s all ease;font-size:16px;transition:.3s all ease}
.login__btn--confirm:disabled{background-color:#cccccc}
.login__btn--confirm.is--show{transform:translate(-50%,0);}

.login--row{margin-top:14px;}
.login--row:first-child{margin-top:0}
.login--row label{position: relative;display:block}
.login--row input[type="text"],
.login--row input[type="password"],
.login--row input[type="email"]{box-sizing:border-box;width:100%;height:52px;border:1px solid #ddd;border-radius:8px;padding:0 24px;font-size:16px;transition:.5s all ease}
/* .login--row input[type="password"]:disabled{z-index:0;background:transparent} */
.login--row input[type="password"]:disabled + .inp-pw__btn--toggle{display:none}
.login--row input[type="text"]::placeholder,
.login--row input[type="email"]::placeholder {color: #aaa;}
.login--row input:disabled{opacity:1;-webkit-text-fill-color: inherit;background-color:rgba(239, 239, 239, 0.3)}
.login--row .login__label--tit{position:absolute;height:18px;line-height:18px;font-size:12px;color:#888;padding:0 4px;background-color:#fff;left:20px;top:-8px;border-radius:9px;} 
.login--row .is--focus input,
.login--row .is--correct input{border-color:#3588f3}
.login--row .is--focus .login__label--tit,
.login--row .is--correct .login__label--tit{color:#3588f3}
.login--row .is--error input{border-color:#fe504f}
.login--row .is--error .login__label--tit{color:#fe504f}
.login--row [class*="login__tx--"]{font-size:13px;line-height:18px;margin-top:4px;}
.login--row .login__tx--pass{color:#3588F3;display:none}
.login--row .login__tx--error{color:#fe504f;display:none}
.login--row .is--correct ~ .login__tx--pass{display:block}
.login--row .is--error ~ .login__tx--error{display:block}
.login--row .inp-pw__btn--toggle{text-indent:-9999em;display: block;position: absolute;top: 13px;right: 13px;z-index: 10;width: 24px;height: 24px;background: var(--member-sprite) no-repeat -48px 0 / var(--member-sprite-size);}
.login--row .is--focus .inp-pw__btn--toggle{display:block}
.login--row input[type="text"] + .inp-pw__btn--toggle{background-position: -48px -24px}

/* 이메일 힌트 */
.login__email{position: relative;}
.select-email{position:absolute;padding:8px 0;border:1px solid #ddd;background-color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.05);width:100%;left:0;box-sizing:border-box;top:51px;border-radius:8px;z-index:1;display:none}
.select-email__inner::-webkit-scrollbar {width: 6px;border-radius:6px}
.select-email__inner::-webkit-scrollbar-thumb { background: #ddd;}
.select-email__inner{max-height:124px;overflow:hidden;overflow-y:auto}
.select-email__inner ul{padding:2px 8px}
.select-email__inner li{line-height:20px;font-size:15px;color:#222;overflow:hidden;padding:10px 20px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;border-radius:4px}
.select-email__inner li em{color:#3588F3}
.select-email__inner li.is--hide{display:none}

/* .select-email__inner li:after{content:attr(data-domain);color:#222;} */
.select-email__inner li:hover,
.select-email__inner li:active{background-color:#F6F6F6;text-decoration: underline;text-underline-position: under; text-decoration-color:#222;cursor: pointer;}

/* [레이어] 가입동의  */
.lay-signup--simple{position:fixed;top:0;left:0;right:0;bottom:0;z-index:130;display:none}
.is--show.lay-signup--simple{display:block} 
.lay-signup--simple .lay__dimmed{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);}
.lay-signup__inner{box-sizing:border-box;padding:24px 16px 32px;background-color:#fff;border-radius:20px 20px 0 0;width:100%;max-width:480px;position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);z-index:1;text-align:center;letter-spacing:-.5px;transition-duration:.5s}
.lay-signup__inner.is--show{transform:translate(-50%,0)}
.lay-signup__head{line-height:28px;font-size:20px;font-weight:bold;color:#222;}
.lay-signup__body{color:#555;padding-top:16px;text-align:left}
.lay-signup__body input[type="checkbox"]{display:none}
/* .lay-signup__agree--all{} */
.lay-signup__agree--all label{display:block;line-height:24px;box-sizing:border-box;padding:14px 18px;font-size:16px;color:#444;border:1px solid #ddd;border-radius:8px;transition:.3s all ease}
.lay-signup__agree--all label:before{content:"";display:inline-block;width:24px;height:24px;background: var(--member-sprite) no-repeat 0 0 / var(--member-sprite-size);vertical-align: top;margin-right:6px}
.lay-signup__agree--all label.is--checked{border-color:#3588f3;background-color:#f4f9ff;color:#3588f3}
.lay-signup__agree--all label.is--checked:before{background-position:0 -24px}
.lay-signup__agree{background-color:#f9f9f9;padding:10px 0}
/* .lay-signup__agree .agree--row{} */
.lay-signup__agree .agree--row label{position:relative;display:block;line-height:24px;box-sizing:border-box;padding:6px 38px 6px 14px;font-size:12px;border-radius:8px;transition:.3s all ease;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.lay-signup__agree .agree--row label:before{content:"";display:inline-block;width:24px;height:24px;background: var(--member-sprite) no-repeat 0 -72px / var(--member-sprite-size);vertical-align: top;margin-right:6px}
.lay-signup__agree .agree--row label.is--checked:before{background-position:0 -48px}
.lay-signup__agree .agree--row .tx--required{color:#3588f3}
.lay-signup__agree .agree--row .agree__link--view{font-size:12px;color:#bbb;text-decoration:underline;text-underline-position:under;position:absolute;right:14px}
.lay-signup__btn--next{display:block;width:100%;height:52px;margin-top:28px;box-sizing:border-box;border-radius:8px;background-color:#3588f3;font-size:16px;color:#fff}
.lay-signup__btn--next:disabled{background-color:#cccccc}
.lay-signup__btn--close{position:absolute;width:24px;height:24px;top:16px;right:16px;text-indent:-9999em;background:var(--url-comm-sprite) no-repeat 0 -21px / var(--size-comm-sprite);}

/* 이메일 인증 */
.cert-email{padding-top:42px}
.cert-email .tx--email{line-height:25px;background-color:#f5f5f5;border-radius:8px;padding:16px 8px;color:#333;font-size:18px;text-align:center;font-weight:600}
.cert-email .tx--caution{margin-top:12px;line-height:19px;font-size:13px;color:#555;text-align:center;}
.cert-email .tx--caution em{color:#888}
.cert-email .tx--caution em a{color:#3588f3;text-decoration: underline;}
.cert-email__btn--confirm{position:fixed;max-width:436px;width:calc(100% - 32px);left:50%;transform:translateX(-50%);bottom:20px;height:52px;background-color:#3588f3;color:#fff;border-radius:8px;transition:.5s all ease;font-size:16px}

/* 회원가입 완료 */
.signup-complete{padding:120px 16px 0;text-align:center}
.signup-complete h2{font-size:22px;font-weight:bold;color:#3588f3;line-height:30px;position: relative;padding-top:84px}
.signup-complete h2:before{content:"";position:absolute;top:0;left:50%;margin-left:-44px;width:88px;height:80px;background:url(//img.enuri.info/images/member/signup_simple_complete.png) no-repeat 0 0 / 100% 100%;}
.signup-complete .tx--sub{margin-top:12px;line-height:24px;font-size:18px;color:#888}
.signup-simple__foot,
.signup-simple__foot--st{position:fixed;left:32px;right:32px;bottom:20px;}
.signup-simple__link{text-align:center}
.signup-simple__link--event{font-size:16px;color:#444;line-height:22px;text-decoration:underline!important;text-underline-position: under;}
.signup-simple__btn--home{display:block;max-width:436px;width:100%;height:52px;background-color:#3588f3;color:#fff;border-radius:8px;font-size:16px;margin:28px auto 0}
.signup-simple__btn--st{display:block;max-width:436px;width:100%;height:52px;background-color:#3588f3;color:#fff;border-radius:8px;font-size:16px;margin:0 auto}

@media (max-height:412px){
    .cert-email__btn--confirm{position:static;left:0;transform:none;bottom:0;width:100%;margin-top:60px}
    .signup-simple__foot{position:static;left:0;right:0;bottom:0;padding-top:120px}
}

/* PC버전 분기 */
@media (min-width:1024px){
    /* 공통 */
    ::-webkit-scrollbar { width: 5px; height: 8px; background:transparent;} 
    ::-webkit-scrollbar-thumb { display:block; background-color:rgba(0,0,0,.15);border-radius:10px }     

    /* 헤더 */
    .header_top{border:0;background: transparent;padding:60px 0 32px}
    .header_top .wrap{padding:0;}
    .header_top .wrap .enuri-bi{display:block;position:relative;width:100px;height:28px;background:url(//img.enuri.info/images/icon/svg/icon_logo_ko.svg) no-repeat 0 0 / 100%;text-indent:-9999em;margin:0 auto;top:auto;left:auto}
    .header_top .wrap .enuri-bi a{display:block;height:100%}
    .header_top .wrap .header_top_page_name,
    .header_top .wrap .btn__sr_back{display:none}
    .wrapper{display:flex;width:100%;height:100vh;min-height:768px;justify-content:center;align-items:center}
    .wrapper-box{width:520px;border:1px solid #ddd;border-radius:8px;background-color:#fff;}

    /* 3초 회원가입 */
    .signup{width:100%;height:auto}
    .signup-simple{padding:0 96px 60px;box-sizing:border-box}
    .signup-simple__tit{font-size:24px;font-weight:700;line-height:34px;text-align:center;display:block}
    .signup__bnr{display:none}
    .signup-simple .signup__btn-group{padding:24px 0 22px;display:flex;justify-content:space-between}
    .signup__btn-group [class^="signup__btn--"]{width:64px;height:64px;border-radius:50%;position: relative;text-indent:-9999em;font-size:0;margin:0;border:0}
    .signup__btn-group [class^="signup__btn--"]:before{position: absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;margin:0;background:var(--url-comm-sprite) no-repeat 0 0 / 360px;}
    .signup__btn-group .signup__btn--naver:before{background-position:-144px -60px}
    .signup__btn-group .signup__btn--kakao:before{background-position:-80px -60px}
    .signup__btn-group .signup__btn--apple:before{background-position:-208px -60px}
    .signup__btn-group .signup__btn--id:before{background-position:-50px -345px}
    .signup__btn-group [class^="signup__btn--"]:after{position:absolute;top:100%;left:0;right:0;height:18px;padding-top:4px;font-size:13px;color:#666;text-align:center}
    .signup__btn-group .signup__btn--naver:after{content:"네이버"}
    .signup__btn-group .signup__btn--kakao:after{content:"카카오"}
    .signup__btn-group .signup__btn--apple:after{content:"애플"}
    .signup__btn-group .signup__btn--id:after{content:"에누리 아이디";letter-spacing:-1px;left:-10px;right:-10px}
    .signup__btn--seller{display:block;margin-top:28px}

    /* 아이디로 시작하기 */
    .signup-simple__tx--tit{font-size:24px;font-weight:600;line-height:28px;text-align:center;}
    .signup-simple__tx--sub{text-align:center}
    .signup-simple__inner{padding:0 96px 60px;min-height:328px}
    .login__btn--confirm{position: relative;max-width:none;width:100%;left:auto;bottom:auto;margin-top:60px;transform:none;opacity:0}
    .login__btn--confirm.is--show{opacity:1;transform:none;}

    .lay-signup__inner{left:50%;top:50%;transform:translate(-50%,-50%) scale(0);border-radius:20px;bottom:auto;transition:.3s all ease-out;width:376px;padding: 24px 32px 32px;}
    .lay-signup__inner.is--show{transform:translate(-50%,-50%) scale(1);}
    .lay-signup__agree--all label,
    .lay-signup__agree .agree--row label{cursor: pointer;}

    /* 이메일 레이어 */
    .select-email__inner{max-height:240px}

    /* 이동모션 제거 */
    :is(.step1,.step2,.step3,.step4).is--complete{display:none;transform:translate(0,0);}

    /* 이메일 인증해주세요 */
    .cert-email__btn--confirm{margin-top:60px;position:static;max-width:auto;width:100%;transform:none;left:0;bottom:0}    

    /* 가입완료 */
    .signup-complete{padding-top:8px}
    .signup-simple__foot{position: static;padding-top:44px}
    .signup-simple__foot--st{position: static;padding-top:60px}
}

/* 로그인연동 */
.link-account__inner{padding:36px 16px 0}
.link-account__tx--tit{font-size:22px;line-height:32px;color:#222;text-align:left;font-weight:700}
.link-account__tx--sub{line-height:18px;font-size:13px;color:#666;letter-spacing:-.5px;margin-top:4px}
.account__list{margin-top:20px}
.account__list .account__item{margin-top:8px;height:60px;position: relative;}
.account__list .account__item:first-child{margin-top:0}
.account__btn--item{box-sizing:border-box;width:100%;height:60px;border:1px solid #ddd;border-radius:8px;background-color:#fff;padding:0 0 0 68px;}
.account__btn--item .account__tx--group{width:calc(100% - 32px);height:58px;display:flex;flex-direction:column;justify-content:center;text-align:left}
.account__btn--item .account__tx--small{display:block;font-size:11px;font-weight:500;line-height:14px;color:#3588F3;}
.account__btn--item .account__tx--comment{display:block;font-size:16px;font-weight:500;line-height:22px;color:#222}
.account__list .account__btn--item:before{content:"";position:absolute;width:64px;height:64px;border-radius:50%;overflow: hidden;top:14px;left:24px;background-image:var(--url-comm-sprite);background-size:var(--size-comm-sprite);background-repeat:no-repeat;transform:scale(0.5);transform-origin:0 0}
.account__list .account__btn--enuri:before{background-position:-114px -345px}
.account__list .account__btn--naver:before{background-position:-144px -60px}
.account__list .account__btn--kakao:before{background-position:-80px -60px}
.account__list .account__btn--apple:before{background-position:-208px -60px}

.link-account__btn--notice{line-height:16px;padding:12px 0;display:block;width:100%;margin-top:12px;color:#aaa;font-size:14px;text-align:center}
.link-account__btn--notice:after{content:"";width:16px;height:16px;display:inline-block;vertical-align: top;background:var(--url-comm-sprite) no-repeat -340px -215px / var(--size-comm-sprite);margin-left:4px}
.link-account__btn--notice.is--unfold:after{transform:rotate(180deg)}
.link-account__notice{padding:16px 32px 92px;margin:0 -32px;background-color:#FBFBFB;line-height:20px;font-size:12px;color:#666;display:none;transition:.3s all ease}
.link-account__notice ol{counter-reset: number 0;}
.link-account__notice li{padding-left:16px;position:relative;margin-top:4px;}
.link-account__notice li:first-child{margin-top:0}
.link-account__notice li:before{position:absolute;top:0;left:0;counter-increment: number 1;content: counter(number)".";}
.link-account__notice .notice__tx--sub{color:#999}
.link-account__notice li a{font-weight:600;color:#444;text-decoration:underline;text-underline-position:under}
.link-account__btn--notice.is--unfold + .link-account__notice{display:block;}
.link-account__btn--link{position:fixed;max-width:436px;width:calc(100% - 32px);left:50%;transform:translate(-50%,0);bottom:20px;height:52px;background-color:#3588f3;color:#fff;border-radius:8px;font-size:16px;}

/* PC버전 분기 */
@media (min-width:1024px){
    .link-account__tx--tit{font-size:24px;font-weight:700;line-height:28px;text-align:center;}
    .link-account__tx--sub{text-align:center}
    .link-account__inner{padding:0 96px 60px;min-height:328px}
    .link-account__btn--link{position: relative;max-width:none;width:100%;left:auto;bottom:auto;margin-top:40px;transform:none;}    
    .link-account__notice{padding-bottom:16px}
}