@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
.login-content h2, .login-btn {
font-family: 'Nosifer', 'Roboto', 'Malgun Gothic', sans-serif !important;
}
#login_info, .login-content h5, .login-input, .login-a, .login-member a {
font-family: 'NEXON Lv1 Gothic OTF', 'Roboto', 'Malgun Gothic', sans-serif !important;
}
.login-member{
overflow: hidden;
}
.login-a, .login-a label{
font-size: 0.85rem !important;
color: #999 !important;
display: block;
text-decoration: none;
font-size: 0.75rem;
transition: .3s;
}
.login-a:hover, .login-a label:hover{
color: #38d39f !important;
}
.login-a {
text-align: right;
}
#login_info {
margin: 10px 0 !important;
}
.login-wave{
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.login-container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap :7rem;
padding: 0 2rem;
}
.login-img{
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.login-img img{
width: 500px;
}
.login-member form{
width: 360px;
}
.login-content img{
height: 100px;
}
.login-content h2{
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 20px 0;
padding: 5px 0;
border-bottom: 1px dashed #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 0.9rem;
transition: .3s;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: -5px;
font-size: 0.85rem;
}
.input-div.focus > .i > i{
color: #38d39f;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 0.85rem;
color: #555;
}
.input-div.pass{
margin-bottom: 4px;
}
.login-btn{
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #5245ca, #5245ca, #5245ca);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.login-btn:hover{
background-position: right;
}
.login-input {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.login-input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus{
border: none !important;
outline: none !important;
box-shadow: none !important;
}
@media screen and (max-width: 1050px){
.login-container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
.login-member form{
width: 290px;
}
.login-content h2{
font-size: 2.4rem;
margin: 8px 0;
}
.login-img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
.login-container{
grid-template-columns: 1fr;
}
.login-img{
display: none;
}
.login-wave{
display: none;
}
.login-content{
justify-content: center;
}
}
#sns_login {
margin:0 !important;
padding:0 !important;
border:0 !important;
height:auto !important;
}
#sns_login h3, #sns_login .txt {
display: none !important;
}
.sns-wrap {
position:fixed;
top:50%;
right:10px;
transform: translateY(-50%);
}
.sns-wrap-over .sns-google {
background: rgba(255,255,255, 1) !important;
}
.sns-wrap-over .sns-naver,
.sns-wrap-over .sns-google,
.sns-wrap-over .sns-facebook,
.sns-wrap-over .sns-twitter,
.sns-wrap-over .sns-payco,
.sns-wrap-over .sns-kakao {
border-radius: 50% !important;
overflow:hidden !important;
border: 0 !important;
opacity: 0.8 !important;
}
/* Chrome Autofill 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
box-shadow: 0 0 0 1000px transparent inset !important;
background: transparent !important;
-webkit-text-fill-color: #ff0000 !important;
transition: background-color 9999s ease-out 0s !important;
}
/* 일반 상태 */
.input-wrap input::placeholder {
color: rgba(255,255,255,0);
}
/* Firefox */
.input-wrap input::-moz-placeholder {
color: rgba(255,255,255,0);
}
/* IE/Edge(레거시) */
.input-wrap input:-ms-input-placeholder {
color: rgba(255,255,255,0);
}
/* Chrome(autofill 상태에서도 유지되도록) */
.input-wrap input::-webkit-input-placeholder {
color: rgba(255,255,255,0);
}