@charset "utf-8"; 
/************************************************************************
 * 파일명 : memeber_login.css
 * 설명 : 에누리 로그인
 * 작성자 : 신왕섭 
 * 작성일 : 2023.8.11
************************************************************************/

:root {
    --comm-sprite2 : url("//img.enuri.info/images/mobile_v2/common_sprite2.png");
    --mobile--sprite-size : 360px;

    --member-sprite : url("//img.enuri.info/images/mobile_v2/member_sprite.png");
    --member-sprite-size: 320px;
}

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

/* 헤더 */
.enuri-bi{display:none}
.login__head .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}
.login__head .enuri-bi a{display:block;height:100%}

.wrapper{display:flex;width:100%;height:100vh;min-height:768px;justify-content:center;align-items:center}
.wrapper-box{background-color:#fff}
.header_top{position:fixed;top:0;left:0;right:0}

.login{width:100vw;max-width:520px;text-align:center;display:flex;align-items:center}
.login__inner{padding:106px 0 90px;width:100%}
.login-enuri{padding-bottom:32px}
.login__head{height:32px;}
.login__head h1{height:32px;text-align:left;text-indent:-9999em;background:url(//img.enuri.info/images/icon/svg/icon_logo_ko2.svg) no-repeat 50% 0 / auto 32px;}
.login__body{padding:28px 16px 0}
.login__body .login--row{margin-top:14px;}
.login__body .login--row:first-child{margin-top:0}
.login__body .login--row label{position: relative;display:block}
.login__body .login--row input[type="text"],
.login__body .login--row input[type="password"]{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__body .login--row input:-webkit-autofill,
.login__body .login--row input:-webkit-autofill:focus,
.login__body .login--row input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px white inset !important;}
.login__body .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} 
.login__body .login--row .is--focus input,
.login__body .login--row .is--correct input{border-color:#3588f3}
.login__body .login--row .is--focus .login__label--tit,
.login__body .login--row .is--correct .login__label--tit{color:#3588f3}
.login__body .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__body .login--row .is--focus .inp-pw__btn--toggle{display:block}
.login__body .login--row input[type="text"] + .inp-pw__btn--toggle{background-position: -48px -24px}
.login__foot{position:absolute;left:0;right:0;bottom:-40px;font-size:12px;line-height:16px;color:#999;text-align:center;display:none}

.login-check-auto{height:24px;margin-top:10px;font-size:14px;color:#666;text-align:left}
.login-check-auto input{display:none}
.login-check-auto label{line-height:24px;display:inline-block}
.login-check-auto label:before{content:"";display:inline-block;width:24px;height:24px;background:var(--member-sprite) no-repeat 0 0 / var(--member-sprite-size)}
.login-check-auto label.is--checked:before{background-position:0 -24px}
.login-check-auto .login__label--auto{vertical-align: top;}

.login__btn{margin-top:24px;background-color:#3588f3;height:52px;border-radius:8px;font-size:16px;color:#fff;width:100%}

.login-simple{position: relative;border-top:1px solid #eee;padding:20px 0 30px}
.login-simple:before{content:"또는";width:44px;height:16px;font-size:12px;color:#999;position:absolute;left:50%;margin-left:-22px;margin-top:-28px;background-color:#fff}
.login-simple [class^="login-simple__btn"]{width:64px;height:64px;display:inline-block;margin:0 12px;text-indent:-9999em;text-align:left;background:var(--member-sprite) no-repeat 0 0 / var(--member-sprite-size)}
.login-simple .login-simple__btn--kakao{background-position:-168px -120px}
.login-simple .login-simple__btn--naver{background-position:-96px -120px}
.login-simple .login-simple__btn--apple{background: var(--url-comm-sprite) no-repeat 0 0 / 360px;background-position: -208px -60px;width:65px}

.login-menu{height:20px;color:#666;font-size:14px;line-height:20px;}
.login-menu a{display:inline-block;padding:0 8px 0 9px;position: relative;}
.login-menu a:first-child{padding-left:8px}
.login-menu a:before{content:"";position:absolute;top:4px;height:12px;border-left:1px solid #ccc;left:0}
.login-menu a:first-child:before{display:none}

/* 기존레이어 관련 */
.dim_back {position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#80000000, endColorStr=#80000000 )"; zoom: 1;}
.stripe {display: inline-block;font-size: 0;text-indent: -9999px;vertical-align: middle;background: url(//img.enuri.info/images/member/page/ir_stripe_member.png) no-repeat;}
.layer_pop {position:absolute; top:50%; left:50%; z-index:10; border:1px solid #575c67; box-shadow: 0px 1px 2px 0px #000; background:#fff; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);}
.layer_pop h4 {color:#fff; font-size:12px; height:30px; line-height:30px; vertical-align:middle; text-indent:10px; background:#575c67; }
.layer_pop .close{width:14px; height:14px; position:absolute; right:7px; top:7px; background: url(//img.enuri.info/images/member/page/ico_stick.png) -117px -208px no-repeat; text-indent:-9999em;}
.layer_pop fieldset {padding:25px 15px;}
.layer_pop .err_txt {margin-bottom:20px; font-size:14px; color:#ff0101; letter-spacing:-1px; line-height:25px;}
.layer_pop .info_txt {margin-bottom:10px; font-size:13px; color:#505050; letter-spacing:-1px; line-height:16px;}
.layer_pop .tit {margin-bottom:20px; font-weight:bold; font-size:16px; color:#171717; letter-spacing:-1px; line-height:25px;}

#passwordErr {width:300px; margin:0 auto;}
.ipt_list {margin-bottom:20px;}
.ipt_list li {margin-bottom:4px;}
.ipt_list li .ipt {width:250px; height:20px; padding:5px 9px; border:1px solid #e2e2e2; /*font-size:16px;*/ font-size:14px; letter-spacing:-1px; color:#666; line-height:20px;}
.ipt_list li .ipt:focus {border-color:#1689d3; background-color:#fffff4;}
.ipt_list li.numb {overflow:hidden;}
.ipt_list li.numb * {display:inline; float:left; margin-right:4px;}
.ipt_list li.numb .imgs {width:70px; height:32px; vertical-align:top;}
.ipt_list li.numb .btn {width:30px; height:30px; border:1px solid #666; background-position:-347px 3px;}
.ipt_list li.numb .ipt {width:140px; margin-right:0; font-size:12px;}

.btn_group {clear:both;}
.btn_group > div {margin-bottom:6px; border-bottom:4px solid #e2e2e2;}
.btn_group > div.sm {margin:0 auto; border-bottom:2px solid #f0f0f0;}
.btn_group.no_b > div {border-bottom:0;}
.btn_group .btn {display:block; width:100%; border:1px solid #999; line-height:34px; text-align:center; vertical-align:middle; letter-spacing:-1px; transition:.1s all ease-out; background-color:#fff;}
.btn_group .btn.btn_lg {padding:10px 0 12px; font-size:24px; color:#343434;}
.btn_group .btn.btn_lg .sub {display:inline-block; margin-top:-5px; font-size:18px; vertical-align:middle;}
.btn_group .btn.btn_lg.inactive{border-color:#d2d2d2; color:#999; background-color:#f9f9f9;}
.btn_group .btn.btn_lg.active {border-color:#1689d3; font-weight:bold; color:#fff; background-color:#1689d3;}
.btn_group .btn.btn_lg.allchk {border-color:#1689d3;}
.btn_group .btn.btn_lg.allchk .chk {display:inline-block; width:32px; height:23px; background-position:0 0;}
.btn_group .btn.btn_lg.btn_sns {border-color:#d9d9d9; font-size:17px; line-height:18px;}
.btn_group .btn.btn_lg.btn_sns strong {display:inline-block; width:auto; height:22px; margin-top:-4px; font-size:0; text-indent:-9999px; line-height:22px; vertical-align:middle; background:url(//img.enuri.info/images/member/page/sns_logo.png); background-size: 70px;}
.btn_group .btn.btn_lg.btn_sns span {display:inline-block; width:auto; height:22px; margin-top:-4px; font-size:12px; line-height:22px; vertical-align:middle;}
.btn_group .btn.btn_lg.btn_sns._naver strong {width:70px; height:13px; top:2px; background-position:0 0;}
.btn_group .btn.btn_lg.btn_sns._kakao strong {width:49px; height:15px; top:1px; background-position:0 -15px;}
.btn_group.btn_login > div {margin-bottom:25px;}

.btn_group .btn.btn_sm {height:36px; padding:0; font-weight:bold; font-size:14px; color:#666; }
.btn_group .btn.btn_sm.default {}
.btn_group .btn.btn_sm.detail_add {padding:0 9px; font-weight:bold; text-align:left; color:#343434;}
.btn_group .btn.btn_sm.detail_add .plus {float:right; margin-top:9px; width:18px; height:18px; background-position:-100px 0;}
.btn_group .btn.btn_sm.detail_add.open .plus {background-position:-100px -24px;}
.btn_group .btn.btn_sm.disabled {border-color:#bbb; font-weight:normal; color:#666; background-color:#f9f9f9; cursor:default;}
.btn_group .btn.btn_sm.active {border-color:#1689d3; font-weight:bold; color:#fff; background-color:#1689d3;}
.btn_group .btn.btn_sm.bold {height:32px; margin-top:2px; border-color:#333; font-weight:bold; color:#333; line-height:30px; vertical-align:middle;}
.btn_group.seller_add {display:inline; float:right; width:110px; margin:-10px 0 28px;}
.btn_group.two_btn {overflow:hidden; width:100%; margin-top:-10px;}
.btn_group.two_btn > div {display:inline; float:left; width:calc(50% - 5px); font-weight:normal; margin-right:5px;}
.btn_group.two_btn > div.last {margin-right:0; margin-left:5px;}
.btn_group.two_btn.no_b > div {border-bottom:1px solid #ced2d7;}
.btn_group.two_btn.no_b > div .btn {border:0;}
.btn_group.three_btn {overflow:hidden; width:100%; margin-top:20px;}
.btn_group.three_btn > div {display:inline; float:left; width:32%; font-weight:normal; margin-right:2% }
.btn_group.three_btn > div.last {margin-right:0;}
.btn_group.three_btn > div.joinus .btn {font-weight:bold; color:#0073be;}
.btn_group .btn.btn_sm.inline-close {width:137px; height:38px; margin:0 auto; border-color:#1689d3; font-weight:bold; color:#fff; background-color:#1689d3;}

/* 성인인증 로그인 */
.login__head--adult{text-align:left;padding:0 32px}
.login__head--adult .login__tx--adult-tit{height:40px;position: relative;padding:10px 0 10px 70px;line-height:20px;font-size:18px;font-weight:700;}
.login__head--adult .login__tx--adult-tit em{color:#fe504f}
.login__head--adult .login__tx--adult-tit:before{content:"19";position:absolute;box-sizing:border-box;width:60px;height:60px;top:0;left:0;border-radius:50%;border:4px solid #fe504f;line-height:52px;text-align:center;font-size:34px;color:#222;font-weight:700}
.login__head--adult .login__tx--adult-sub{font-size:14px;color:#666;line-height:18px;font-weight:400;margin-top:12px}

/* 로그인 광고 */
.login-ad{border-radius:8px;width:100%;background-color:#222;margin-bottom:28px;margin-top:-2px}
.login-ad a{display:flex;align-items: center;justify-content: center;}
.login-ad img{height:52px}

/* 375미만 분기 */
@media (max-width:375px){
    .wrapper{min-height:670px}
    .login__inner{padding:70px 0}
}

/* PC버전 분기 */
@media (min-width:1024px){
    /* 공통 */
    .header_top{display:none}
    .wrapper-box{width:520px;border:1px solid #ddd;border-radius:8px;}

    /* 로그인 */
    .login__inner{padding:60px 0;position: relative;}
    .login__body{padding:46px 96px 0}
    .login__foot{display:block;}
    .login__head--adult{padding:0 96px}
}