@charset "utf-8";
/*login css*/
html{overflow: hidden;}
#header{display: none;}
#footer{display: none;}
body{background-color: #F0F3F5; height: 100vh;box-sizing:border-box;margin: 0;padding:0;overflow-x:hidden;overflow-y: auto;}
.bodywrap{position: relative;width: 100%;margin: 50px 0;}
.form{min-height: 100vh; min-width: 100vw; background: #F0F3F5; position: relative; padding: 50px 0;}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
.gm {font-family: 'GmarketSansMedium';}
.gm_bold {font-family: 'GmarketSansBold';}
.bar{width: 100%;height: 50px;margin-top: 50px;background-color: red;}
.mgb{margin-bottom: 40px;}
/*
.login_wrap{position: fixed; left: 50%;top: 50%;transform:translate(-50%, -50%); width:90%;max-width: 500px; margin: 0 auto;padding: 20px 30px;border-radius:20px;
	background-color: #fff;overflow:hidden;box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);}
*/

.login_wrap{width:90%;max-width: 500px; margin: 0 auto;padding: 20px 30px;border-radius:20px;
	background-color: #fff;box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);overflow: hidden;}

.login_wrap .logo_img{width: 100%; display:flex; justify-content:center; margin-top: 50px; }
.login_wrap img{width: 60px;}
.login_wrap .hook{font-size: 32px; font-weight: bold;color:#3DA4E4; display:flex; justify-content:center;margin:20px 0;}

.login_wrap input{width: 100%; height: 50px; border-radius:10px; border:1px solid #CCC; padding: 0 20px; font-size: 16px;}
span{font-size: 16px; color:#CCCCCC;}


.id_input{width: 100%; position: relative;}
.id_input > span{position: absolute; }
.pw_input{width: 100%; position: relative; margin-top: 10px;}
.pw_input > span{position: absolute;}


.login_btn{width: 100%; height:50px; background: #3DA4E4;  color:#fff;  border-radius:10px; font-size: 18px; border:none; margin-top: 40px;}
.bot{border-top: 1px solid #DDDDDD; padding-top: 30px;}

.join{width: 100%;display:flex; justify-content:center; margin-top: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(204,204,204,0.5);}
.join a{font-size: 16px; line-height: 36px; color:#767676;}
.join a:first-child{padding-right: 24px; position: relative;}
.join a:first-child:after{content:''; width: 1px; height: 80%; background: rgba(204,204,204,0.5); position: absolute; right:0; top:5px;}
.join a:last-child{padding-left: 24px;}

.affiliate{width: 100%; margin-top: 40px;}
.affiliate button{width: 100%;margin-bottom: 30px; height: 50px; background: #3E464A; color:#fff;  font-size: 18px; border:none;border-radius:10px;}

.id_input input{position: relative; /*padding: 35px 20px 20px 20px;*/ border: 1px solid #727C82; transition: border-color 0.5s ease;font-size: 16px;}
.id_input input:focus { outline: none;border-color: #3DA4E4; }
.id_input input + span {position: absolute;transition: all 0.5s ease;top: 50%;transform: translateY(-50%);left: 20px;}
.id_input input.focused + span {font-size: 16px; top: 50%;color: #3DA4E4;}
.id_input input.focused {border-color: #3DA4E4}


.pw_input input{position: relative; /*padding: 35px 20px 20px 20px;*/ border: 1px solid #727C82; transition: border-color 0.5s ease;}
.pw_input input:focus { outline: none;border-color: #3DA4E4; }
.pw_input input + span {position: absolute;transition: all 0.5s ease;top: 50%;transform: translateY(-50%);left: 20px;}
.pw_input input.focused + span {font-size: 16px; top: 50%;color: #3DA4E4;}
.pw_input input.focused {border-color: #3DA4E4}

.ico_pw{width: 24px;position: absolute;top: 50%;right: 20px; transform: translateY(-50%); cursor: pointer;}
.ico_pw img{width: 100%;display: none;}
.ico_pw img.on {display:block;}

/*제휴 계정으로 회원가입*/
.input_title{font-size: 16px;margin-bottom: 14px;line-height: 1.5;}



@media screen and (max-width: 720px) {
body{height: 100vh;/*padding: 8.3333vw 0;*/overflow-y:auto;}
.bodywrap{position: relative;width: 100%;height: 100%;margin: 8.3333vw 0;}
.form{min-height: 100vh; min-width: 100vw; background: #F0F3F5; position: relative; padding: 8.3333vw 0;}

.login_wrap{position: absolute; left: 50%;top: 50%;transform:translate(-50%, -50%);width: 90%;max-width:138.8889vw;overflow: auto;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);border-radius:20px; padding:4.4444vw 4.4444vw 11.1111vw;}
.login_wrap .logo_img{width: 100%; margin-top: 8.3339vw; }
.login_wrap img{width: 13.8889vw;}
.login_wrap .hook{font-size: 5.5556vw; font-weight: bold;color:#3DA4E4; display:flex; justify-content:center;margin-bottom:8.3339vw;}
/*
.login_wrap input{width: 100%; height: 12.5000vw; border-radius:1.6667vw; border:0.1389vw solid #727C82; padding: 0 2.7778vw; font-size: 3.8889vw;}
span{font-size: 4.1667vw; }
*/
/*.login_wrap{width:90%;max-width: 138.8889vw; margin: 0 auto;padding: 20px 30px;border-radius:20px;
	background-color: #fff;box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);overflow-y: auto;}
*/
.id_input{width: 100%; }

.pw_input{width: 100%;  margin-top: 1.3889vw;}


.login_btn{width: 100%; height: 11.3889vw; background: #3DA4E4; border-radius:1.6667vw; font-size: 4.1667vw; border:none; margin-top: 5.5556vw;}

.join{width: 100%;margin-top: 5.5556vw; padding-bottom: 2.7778vw;}
.join a{font-size: 3.8889vw; line-height: 5.0000vw; }
.join a:first-child{padding-right: 3.3333vw; }
.join a:first-child:after{ width: 0.1389vw; height: 100%; background: rgba(204,204,204,0.5);  right:0; top:0;}
.join a:last-child{padding-left: 3.3333vw;}

.affiliate{width: 100%; margin-top: 5.5556vw;}
.affiliate button{width: 100%; height: 11.3889vw; background: #3E464A;   font-size: 4.1667vw; border:none;border-radius:1.6667vw;}

.id_input , .pw_input {padding-bottom: 4vw;}
input{color:#3E464A;}
.id_input input{ /*padding: 4.8611vw 2.7778vw 2.7778vw 2.7778vw;*/ border:0.2778vw solid #727C82;}
.id_input input:focus { outline: none;}
.id_input input + span {transition: all 0.5s ease;top: 50%;transform: translateY(-50%);left: 2.7778vw;}
.id_input input.focused + span {font-size: 2.7778vw; top: 2.7778vw;}
.id_input input.focused {border-color: #3DA4E4}

.pw_input input{ /*padding: 4.8611vw 2.7778vw 2.7778vw 2.7778vw;*/  border:0.2778vw solid #727C82;}
.pw_input input:focus { outline: none;}
.pw_input input + span {transition: all 0.5s ease;top: 50%;transform: translateY(-50%);left: 2.7778vw;}
.pw_input input.focused + span {font-size: 2.7778vw; top: 2.7778vw;}
.pw_input input.focused {border-color: #3DA4E4}

.ico_pw{width: 6.1111vw;position: absolute;top: 50%;right: 3.8889vw; transform: translateY(-50%); cursor: pointer;}
.ico_pw img{width: 100%;display: none;}
.ico_pw img.on {display:block;}

.mgb{margin-bottom: 0px;}
.input_title{font-size: 3.8889vw;margin-bottom: 1.6667vw;line-height: 1.5;}

}