@charset "utf-8";

.login-container .logo {max-width:400px; max-height:180px; display:block; width:100%; margin:0 auto 40px;}
.login-container .logo img {display:block; max-width:400px; max-height:180px; margin:0 auto;}
.login-container .form {margin:0 auto; width:362px;}

.login-container .l-wrap .title {margin:14px 0 6px 0;}
.login-container .l-wrap .title span {font-size:24px; line-height:1.2; font-family: var(--family-bold);font-weight: var(--weight-bold); color:#555555;}

.login-container .login-default {display:none;}
.login-container .login-default li:nth-child(1) {margin: 0 0 4px 0;}
.login-container .form .login-default ul li .input {width: 360px; height:50px; border-color:#cccccc;}
.login-container .form .login-default ul li .input .name {font-size: 16px; line-height: 52px; color: #999999;}
.login-container .form .login-default ul li .input .name {left:15px; top:-2px;}
.login-container .form .login-default ul li .input input {font-size:16px; line-height:52px;}
.login-container .form .login-default ul li .input input {padding:0 15px; width:calc(100% - 30px); height:52px;}
.login-container .form .login-default.focus {display:block;}

.login-container .form .div-autologin {position:relative; margin:10px 0 26px 0; display:none;}
.login-container .form .div-autologin.focus {display:block;}
.login-container .form .div-autologin div:nth-child(1) {display:flex; flex-direction:row; align-items:center;}
.login-container .form .div-autologin .checkbox {width:auto; height:24px; border:0;}
.login-container .form .div-autologin .checkbox .icon {width:24px; height:24px; position:relative; display:inline-block;}
.login-container .form .div-autologin .checkbox .icon:before {content:''; display:block; width:22px; height:22px; border:1px solid #d9d9d9; border-radius:100%; background:#ffffff;}
.login-container .form .div-autologin .checkbox .icon svg {width:16px; height:11px; position:absolute; top:calc(50% - 5.5px); left:calc(50% - 8px);}
.login-container .form .div-autologin .checkbox .icon svg polygon {fill:#999999;}
.login-container .form .div-autologn .checkbox label {font-size:13px; line-height:24px; font-family: var(--family-light);font-weight: var(--weight-light); color:#999999;}
.login-container .form .div-autologin .checkbox label.focus .icon:before {background:var(--color2); border-color:var(--color2);}
.login-container .form .div-autologin .checkbox label.focus .icon svg polygon {fill:#ffffff;}
.login-container .form .div-autologin label.focus {color:var(--color2);}

.login-container .autologin {border:1px solid #cccccc; border-radius:2px; background-color:#ffffff; display:block; position:relative; margin:8px 0 0 0; display:none; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);}
.login-container .autologin svg {width:11px; height:6px; position: absolute; left: 50px; top: -6px;}
.login-container .autologin svg .st0 {fill:#FFFFFF;}
.login-container .autologin svg .st1 {fill:#CCCCCC;}
.login-container .autologin span.text {font-size:13px; line-height:31px; color:#000000; text-align:center;}
.login-container .autologin span.text {display:block; padding:0 20px;}
.login-container .autologin.focus {display: block;}

.login-container .btn-guest {padding:30px 0 10px 0; margin-top:30px; border-top:1px solid #e4e4e4;}
.login-container .btn-login {display:none;}
.login-container .btn-login.focus {display:block; cursor: pointer;}
.login-container .btn-login ul li,
.login-container .btn-guest ul li {display:block; width:100%; height:54px; position:relative;}
.login-container .btn-login ul li {background:var(--color2);}
.login-container .btn-guest ul li {background:#8a8d93;}
.login-container .btn-login ul li:before {content:''; display:none; width:100%; height:54px; box-shadow: 0px 5px 5px 0px var(--color2); opacity: .3; position:absolute; top:0;}
.login-container .btn-login ul li span,
.login-container .btn-guest ul li span {font-size:16px; line-height:54px; color:#ffffff; text-align:center;}
.login-container .btn-login ul li span,
.login-container .btn-guest ul li span {display:block; width:100%; height:54px; cursor:pointer;}
.login-container .btn-login:hover ul li:before {display:block;}
.login-container .btn-guest:hover ul li {background:#444444;}


.login-container .btn-pw-popup{margin: 50px 0  0 0; text-decoration:none; font-family: var(--family-medium);font-weight: var(--weight-medium); line-height:54px; font-size:16px; color:#fff;}

/*링크 버튼 리스트*/
.login-container .link-list {text-align: center; margin: 8px 0 0 0; padding:9px 0 3px 0;}
.login-container .link-list a {font-size:13px; line-height:1; font-family: var(--family-light);font-weight: var(--weight-light); color: #999999;}
.login-container .link-list a {display: inline-block; padding:7px 16px 7px 17px; position:relative;}
.login-container .link-list a:nth-child(1) {padding:7px 16px 7px 16px;}
.login-container .link-list a:before {content:''; display:none; width:calc(100% - 32px); height:1px; position:absolute; bottom:0; left:16px; background:#adadad;}
.login-container .link-list a:nth-child(3):before {background:var(--color2);}
.login-container .link-list a:after {content:''; display:block; width:1px; height:calc(100% - 15px); position:absolute; top:8px; left:0; background:#e4e4e4;}
.login-container .link-list a:nth-child(1):after {display:none}
.login-container .link-list a:hover {color:#333333; text-decoration:none;}
.login-container .link-list a:hover:before {display:block;}
.login-container .link-list a:nth-child(3):hover {color:var(--color2);}

.login-container .div-account {padding:20px 0; position:relative; display:block; text-align:center; width:100%;}
.login-container .div-account ul li {cursor:pointer;}
.login-container .div-account ul li {display:flex; flex-direction:row; align-items:center; justify-content:center; width: calc(100% - 2px); height:47px; border: 1px solid #ccc;}
.login-container .div-account ul li:nth-child(1){margin: 0 0 10px 0;}
.login-container .div-account ul li .account-icon {width:28px; height:28px;}
.login-container .div-account ul li .account-icon svg {height:28px; width:28px;}
.login-container .div-account ul li .account-name {font-size:15px; line-height:47px; font-family: var(--family-regular);font-weight: var(--weight-regular); color:#555555;}
.login-container .div-account ul li:hover {border-color:#666666;}
.login-container .div-account ul li:hover .account-name {color:#000000;}

.login-container .div-account.type2 ul {display:flex; flex-direction:row; align-items:center; justify-content:center;}
.login-container .div-account.type2 ul li{width:80px; height:92px; border:0; flex-direction:column;}
.login-container .div-account.type2 ul li .account-icon {width:48px; height:48px; border:1px solid #cccccc; border-radius:100%; margin:10px auto 9px; position:relative;}
.login-container .div-account.type2 ul li .account-icon svg {width:28px; height:28px; position:absolute; top:10px; left:calc(50% - 14px);}
.login-container .div-account.type2 ul li .account-name {font-size:13px; line-height:1; font-family: var(--family-light);font-weight: var(--weight-light); color:#999999;}
.login-container .div-account.type2 ul li .account-name {padding:0 0 10px 0;}
.login-container .div-account.type2 ul li:hover .account-icon{border:1px solid #999999;}
.login-container .div-account.type2 ul li:hover .account-name {color:#333333;}

.login-container .login-naver svg {fill:#21c603;}
.login-container .login-kakao svg {fill:#3a2020;}
.login-container .login-facebook svg {fill:#3c5a9a;}
.login-container .login-google svg {fill:#da4835;}

/*로그인 실패*/
.login-container .login-fail {display:none;}
.login-container .login-fail ul {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 15px; height:176px; border:1px solid #cccccc;}
.login-container .login-fail ul li:nth-child(1) div {margin-bottom:17px; text-align:center;}
.login-container .login-fail ul li div .text-result {font-size:16px; line-height:1.5; font-family: var(--family-regular);font-weight: var(--weight-regular); color:#333333;}
.login-container .login-fail .login-retry span {font-size:16px; line-height:38px; font-family: var(--family-medium);font-weight: var(--weight-medium); color:#ffffff;}
.login-container .login-fail .login-retry span {display:inline-block; padding:0 20px; height:40px; background:#555555; border-radius:3px; cursor:pointer;}
.login-container .login-fail .login-retry span:hover {background:#000000;}

.login-container .login-fail.focus {display:block;}

/*캡챠*/
.login-container .login-fail-bot {display:none}
.login-container .login-fail-bot.focus {display:block;}
.login-container .login-fail-bot #inquiry-recaptcha div {width: 100% !important;}