:root{--primary:#2785f7;--primary-100:#004fb1}body,html{height:100%}.signin-conatainer{justify-content:center;align-items:center;padding:80px 120px}.signin-conatainer,.signin-content{width:100%;height:100%;display:flex}.signin-content{justify-content:flex-start;align-items:stretch;background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);max-width:1200px}.signin-banner{flex-grow:1;background:var(--primary);text-align:center;padding:50px}.signin-banner .signin-logo{filter:brightness(0) invert(1);-webkit-filter:brightness(0) invert(1)}.signin-banner p{font-size:24px;font-weight:600;line-height:1.4;color:#fff}.signin-banner>img{width:426px}.signin-form-area{flex-shrink:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;width:500px;padding:50px}.signin-logo{text-align:center;margin-bottom:30px}.signin-form{margin:auto 0}.signin-tablist{display:flex;justify-content:center;align-items:stretch;border-bottom:1px solid #eee;margin-bottom:20px;gap:30px}.signin-tablist li{font-size:21px;font-weight:500;text-align:center;padding:15px 8px 12px;cursor:pointer;color:#999;border-bottom:4px solid #fff}.signin-tablist li.active{color:#000;border-color:var(--primary)}.signin-input{display:flex;justify-content:flex-start;align-items:center;padding:0 18px;font-size:16px;border:1px solid #ddd;height:58px;border-radius:5px;gap:12px;overflow:hidden}.signin-input+.signin-input{margin-top:30px}.signin-input input{border:0;padding:0;width:100%;height:100%}.signin-input input:focus{outline:none}.signin-input .input-icons,.signin-input input::placeholder{color:#999}.signin-input .input-icons{font-size:20px}.signin-input:focus-within{border-color:var(--primary)}.signin-input:focus-within .input-icons{color:var(--primary)}.signin-input .fa-eye{color:#000}.signin-input .fa-eye-slash{color:#999}.signin-input button{flex-shrink:0;padding:0;width:24px;height:24px;text-align:center;border:0;background:transparent;cursor:pointer}.signin-input input:not([type=""])~button .fa-eye,.signin-input input:not([type=password])~button .fa-eye-slash{display:none}.signin-tool{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin-top:30px}.signin-tool>a{color:#999;text-decoration:none}.signin-tool>a:hover{color:var(--primary-100);text-decoration:underline;text-underline-position:under}.signin-tool .checkbox-group{margin-right:auto}.signin-tool .checkbox-group *{cursor:pointer}.signin-tool .checkbox-group input[type=checkbox]{margin-top:0}.signin-form-controls{display:flex;justify-content:flex-start;align-items:center;margin-top:40px}.signin-form-controls button{width:100%;height:48px;font-size:16px;color:#fff;background:var(--primary);border:1px solid var(--primary);border-radius:10px;cursor:pointer;margin-bottom:0}.signin-form-controls button:hover{background:var(--primary-100)}.signin-form-controls button:active{opacity:.8}.signin-induce{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px}.signin-induce p{color:#333}.signin-induce a{color:var(--primary);text-decoration:none}.signin-induce a:hover{color:var(--primary-100);text-decoration:underline;text-underline-position:under}.social-login-api{margin-top:24px}.button-kakaotalk{display:flex;justify-content:center;align-items:center;text-decoration:none;width:100%;height:48px;font-size:16px;font-weight:700;color:#422920;border-radius:10px;cursor:pointer;background:#feea33}@media (max-width:1024px){.signin-conatainer{padding:80px;height:auto;align-items:flex-start}.signin-content{flex-direction:column}.signin-banner{flex-grow:inherit;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 50px;border-bottom:4px solid #f4f6fb}.signin-banner .signin-logo{display:none}.signin-banner p{text-align:left;font-size:19px}.signin-banner>img{width:190px}.signin-form-area{flex-grow:1;width:100%}}@media (max-width:768px){.signin-conatainer{padding:0;border-radius:0;height:100%}.signin-content{border-radius:0;overflow:auto}.signin-banner{position:relative;padding:20px;order:2;border-bottom:0;border-top:4px solid #e5e7ec}.signin-banner h1{position:relative;z-index:10;margin:10px 0}.signin-banner p{font-size:14px}.signin-banner>img{position:absolute;right:0;bottom:0;margin:10px;z-index:0;width:120px}.signin-form-area{padding:50px 20px}.signin-form{flex-grow:1;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}.signin-tool{margin-bottom:auto}}