@charset "utf-8";

.l-container {margin:0 auto; width:720px; padding:70px 0;}
.l-container .logo {padding-bottom:30px; border-bottom:1px solid #eff0f0; display:block; text-align:center;}
.l-container .logo img {display:inline-block; max-width:400px; max-height:180px; border:0;}
.l-container .form {margin:0 auto; width:460px; padding-top:20px;}
.l-container .wrap {padding:0 0 20px 0; border-bottom:1px solid #eff0f0;}
.l-container .wrap.ty-2 {padding-bottom:100px;}

.l-container .tabs {margin-bottom:30px; position:relative;}
.l-container .tabs ul {display:block; white-space:nowrap; height:47px;}
.l-container .tabs li {position:relative; display:inline-block; vertical-align:middle; width:calc(50% + 1px);}
.l-container .tabs li:nth-child(2) {margin-left:-2px;}
.l-container .tabs li label {z-index:1; position:relative; display:block; height:47px; background-color:#fff; word-break:break-all; text-align:center;}
.l-container .tabs li label {font-weight:800; line-height:45px; font-size:18px; color:#acacac;}
.l-container .tabs li label:before {z-index:-2; display:block; content:''; position:absolute; left:0; top:0; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #ebebeb; opacity:1;}
.l-container .tabs li label:after {z-index:-1; display:block; content:''; position:absolute; left:0; bottom:0; width:100%; border-bottom:2px solid #000000;}
.l-container .tabs li label.focus {z-index:2; color:#000000;}
.l-container .tabs li label.focus:before {border-color:#000000; border-bottom:0; height:calc(100% - 2px);}
.l-container .tabs li label.focus:after {border-color:transparent;}

.l-container .list {position:relative; display:block;}
.l-container .list ul {display:block;}
.l-container .list ul li {margin-top:10px; display:block;}
.l-container .list ul li:first-child {margin-top:0px;}
.l-container .input {transition:border 0.2s, background 0.2s; position:relative; display:block; vertical-align:middle; background-color:#eff0f0; border:1px solid #d7d7d7;}
.l-container .input input {z-index:1; position:relative; padding:0 10px 0 10px; width:calc(100% - 22px); height:50px; border:0; background:transparent;}
.l-container .input input {font-weight:700; line-height:50px; font-size:18px; color:#acacac;}
.l-container .input .name {font-weight:700; line-height:50px; font-size:18px; color:#acacac;}
.l-container .input.focus {background-color:#ffffff;}

.l-container .result {position:relative; display:none; padding:8px 0 0 17px;}
.l-container .result {font-weight:400; line-height:14px; font-size:12px; color:#ef4f4e;}
.l-container .result.active {display:block;}
.l-container .result:before {top:10px;}

.l-container .guest-result {position:relative; padding:8px 0 0 0;}
.l-container .guest-result {font-weight:400; line-height:14px; font-size:12px; color:#000000;}
.l-container .guest-result.active {color:#ef4f4e; padding-left:17px;}
.l-container .guest-result.active:before {top:10px;}

.l-container .hp-step1,
.l-container .hp-step2 {display:none;}
.l-container .hp-step1.active,
.l-container .hp-step2.active {display:block;}
.l-container .hp-step2 .tx1 {margin:-7px 0 0 0; text-align:center;}
.l-container .hp-step2 .tx1 {font-weight:700; line-height:27px; font-size:16px; color:#000000;}

.l-container .code-input {margin-top:26px; display:table; width:100%;}
.l-container .code-input ul {display:table-row;}
.l-container .code-input li {display:table-cell; vertical-align:top;}
.l-container .code-input li:nth-child(2) {padding-left:5px; width:140px;}
.l-container .code-input .btn {display:block; background-color:#acacac; text-align:center; cursor:pointer;}
.l-container .code-input .btn {font-weight:700; line-height:52px; font-size:15px; color:#fff;}
.l-container .code-input .btn:hover {background-color:#000000;}

.l-container .code-timer {margin:8px 0 -3px 0;}
.l-container .code-timer {font-weight:400; line-height:1.4; font-size:12px; color:#000000;}
.l-container .code-timer .timer {color:#605ca8;}
.l-container .code-timer .error {color:#f16362;}

.l-container .submit {margin-top:30px; text-align:center; cursor:pointer;}
.l-container .submit {font-weight:400; line-height:60px; font-size:18px; color:#ffffff;}

.l-container .link {margin-top:10px; padding:5px; position:relative; background-color:#ffffff; border-radius:4px;}
.l-container .link label {display:inline-block; vertical-align:middle; cursor:pointer;}
.l-container .link label {font-weight:400; line-height:20px; font-size:14px; color:#464646;}
.l-container .link .side {position:absolute; right:5px; top:5px;}
.l-container .link .line {padding:0 8px; display:inline-block; vertical-align:middle;}
.l-container .link .line {font-weight:400; line-height:20px; font-size:14px; color:#e2e2e2;}
.l-container .link a {display:inline-block; vertical-align:middle;}
.l-container .link a {font-weight:400; line-height:20px; font-size:14px; color:#464646;}

.l-container .autologin {margin-top:10px; display:none; text-align:center; background-color:#5031a9; border-radius:4px;}
.l-container .autologin {font-weight:400; line-height:37px; font-size:14px; color:#ffffff;}
.l-container .autologin.focus {display:block;}

.l-container .login-naver:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:0px -500px;}
.l-container .login-kakao:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-50px -500px;}
.l-container .login-facebook:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-100px -500px;}
.l-container .login-google:before {display:block; content:''; position:absolute; left:0; top:0; width:50px; height:50px; background-position:-150px -500px;}

.l-container .account {padding:20px 0;}
.l-container .account li {position:relative; display:inline-block; vertical-align:top; height:50px; cursor:pointer;}
.l-container .account li:before {left:calc(50% - 25px); top:calc(50% - 25px);}
.l-container .account.type1 li {width:100%;}
.l-container .account.type2 li {width:50%;}
.l-container .account.type3 li {width:33.333%;}
.l-container .account.type4 li {width:25%;}
.l-container .account .login-naver {background-color:#00c300;}
.l-container .account .login-kakao {background-color:#ffea26;}
.l-container .account .login-facebook {background-color:#405ea9;}
.l-container .account .login-google {background-color:#da4835;}