@charset "utf-8";
/*join css*/
@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';}
body{background-color: #F0F3F5;color:#3E464A; height: 100vh;box-sizing:border-box;margin: 0;padding:0;overflow-x:hidden;}
#footer{display: none;}

.join_wrap{width: 90%;max-width: 500px; margin: 50px auto; font-family: 'Pretendard'; min-height: 100vh;background-color: #fff;
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);border-radius:20px;color:#3E464A;}

.toptop{margin: 0 auto; padding-top: 50px;text-align: center;}
.toptop img{width: 60px;}
.toptop h1{font-size: 32px; color:#3DA4E4;padding: 30px 0;}

label{display: block; width: 100%; font-size: 16px; line-height: 35px; margin-bottom: 10px; font-weight: 500;}
input[type=text],input[type=password],input[type=tel]{border:1px solid #3E464A; border-radius:10px; padding: 0 10px; font-size: 16px; line-height: 42px;width:70%;height: 50px;}
button{border:none; border-radius:10px; background: #3DA4E4; color:#fff;font-size: 16px; line-height: 42px; padding: 0 10px; font-weight: 600;width: 30%;height: 50px;}
input::placeholder{color:#CCCCCC;}
.inputbox{width: 100%; display:flex; gap:10px; justify-content:space-between; }

.join_top{background: #fff; padding:20px; }
.join_btm{padding: 0 20px 40px 20px;}
.phone_input{margin: 20px 0;}
.phone_inputbox1{width: 100%;margin-top: 10px;}

.pw_input input{width: 100%;position: relative;}
.pw_input1{margin: 20px 0;}
/*.pw_input1 input{margin-bottom: 8px;}*/
.pw_input span{font-size: 25px;line-height: 35px;color: #D61E1E;}
 .hide{display: none;}

 .pw_input{position: relative;}
 .pw_btns {position: absolute; right: 20px; top: 60%;/*transform:translateY(-50%);*/ cursor:pointer;}
 .pw_btns img.on {display: block;}
 .pw_btns img {width: 24px; display: none;}



.broke_input{margin: 20px 0;}
.broke_input input{width: 100%;}

.terms_box{display:flex;justify-content:space-between; align-items: center;}
.terms_box p {cursor:pointer;}
.terms_wrap > p{font-size: 20px; line-height: 20px; font-weight: 600;border-top:1px solid rgba(204,204,204,0.5); padding-top: 40px;}

.terms_box .left{display:flex; gap:15px;  align-items: center;} 
.terms_box .left label{font-weight: 500; font-size: 16px; line-height: 42px;}
.terms_box .left label span{color:#3DA4E4}


.terms_wrap .whole{display:flex; gap:15px;  align-items: center; margin-top: 40px; border-bottom: 1px solid rgba(204,204,204,0.5); padding-bottom: 20px;	}
.terms_wrap .whole > label{font-size: 20px; line-height: 20px; font-weight: 500;}
.terms_box img{width: 25px; }


input[type="checkbox"] { display: none; }

.terms_wrap label {display: flex; align-items: center; font-size: 30px;line-height: 30px;font-weight: 300; margin-bottom: 0; gap:10px;cursor:pointer;}

/* 체크박스가 비어 있을 때 레이블의 ::before */
input[type="checkbox"] + label::before { content: '';width: 22px;height: 22px; border: 2px solid #3DA4E4;border-radius: 4px;
  background-color: #fff;display: flex; align-items: center;  justify-content: center; transition: background-color 0.3s, border-color 0.3s;}

/* 체크박스가 체크된 상태일 때 */
/*
input[type="checkbox"]:checked + label::before { background-color: #fff; border-color: #3DA4E4; background: url('/images/check.png') no-repeat center center; background-size: 29px 23px;
  content: '';}
*/
 input[type="checkbox"]:checked + label::before { background-color: #fff; border-color: #3DA4E4; background: url("/images/ckbox-fill.png") no-repeat center center; background-size: 30px 30px;
  content: '';}

.login_btn{width: 100%;height: 82px;font-size: 30px;line-height: 42px;background: #3DA4E4;color: #ffffff; border: none; margin-top: 30px; border-radius: 4px;text-align: center;
margin-top: 60px; cursor: pointer;}


.conttpopup{width:720px;min-height: 100vh; margin: 0 auto;  display: none; position: fixed; z-index: 1000;}
.conttpopup .cont_bg{width: 100%; min-height: 100vh; background: rgba(0,0,0,0.5);  position: fixed;top:0;left:0;}
/*
.conttpopup .conttpopup_wrap{width: 680px; height: 80vh; position: fixed; top:30%; left:50%; transform:translate(-50%,-30%);
	background: #fff; border-radius:8px; border:1px solid #f5f5f5; padding: 20px; overflow-y:auto;}
*/
.conttpopup .conttpopup_wrap, .conttpopup1 .conttpopup_wrap{width: 720px; height: 80vh; position: fixed; top:30%; left:50%; transform:translate(-50%,-30%);
	background: #fff; border-radius:8px; border:1px solid #f5f5f5; padding: 20px;overflow: hidden;}

.conttpopup .conttpopup_wrap .cont_top {border-bottom: 1px solid #f5f5f5;margin-bottom: 20px;padding-bottom: 20px; position: relative;height: 84px;}
.conttpopup .conttpopup_wrap .cont_top h2 {font-size: 30px;line-height: 42px; margin: 0 auto; text-align:center;}
.conttpopup .conttpopup_wrap .cont_top img {cursor: pointer; width: 43px; position: absolute; top:0; right:20px;}
/* 
.conttpopup .conttpopup_wrap .cont_cnt{ min-height: 50vh; padding: 20px;background: #f8f8f8;font-size: 25px; line-height: 35px;} 
*/
.conttpopup .conttpopup_wrap .cont_cnt, .conttpopup1 .conttpopup_wrap .cont_cnt{ height: 50vh; padding: 20px;background: #f8f8f8;font-size: 18px; line-height: 25px;overflow-y:auto; }
.conttpopup .conttpopup_wrap .btn_popup button , .conttpopup1 .conttpopup_wrap .btn_popup button {
	width: 100%;height: 50px;font-size: 18px;line-height: 50px;background: #3DA4E4;color: #ffffff; border: none; border-radius: 10px;text-align: center;
	margin-top: 35px; cursor: pointer;}





.conttpopup1{width:720px; margin: 0 auto;  display: none; position: fixed; z-index: 1000;}
.conttpopup1 .cont_bg{width: 100%; min-height: 100vh; background: rgba(0,0,0,0.5);  position: fixed;top:0;left:0;}
/*
.conttpopup1 .conttpopup_wrap{width: 680px; height: 80vh; position: fixed; top:30%; left:50%; transform:translate(-50%,-30%);
background: #fff; border-radius:8px; border:1px solid #f5f5f5; padding: 20px; overflow-y:auto;}
*/
.conttpopup1 .conttpopup_wrap .cont_top {border-bottom: 1px solid #f5f5f5;margin-bottom: 20px;padding-bottom: 20px; position: relative;height: 84px;}
.conttpopup1 .conttpopup_wrap .cont_top h2 {font-size: 30px;line-height: 42px; margin: 0 auto; text-align:center;}
.conttpopup1 .conttpopup_wrap .cont_top img {cursor: pointer; width: 43px; position: absolute; top:0; right:20px;}
/*.conttpopup1 .conttpopup_wrap .cont_cnt{padding: 20px;background: #f8f8f8;font-size: 25px; line-height: 35px;}*/






@media screen and (max-width: 720px) {

.join_wrap{width: 90%; margin: 8.333vw auto;  min-height: 100vh;background: #fff; border-radius:20px; }

.toptop{margin: 0 auto; padding: 13.8889vw 0 5vw 0; text-align: center;}
.toptop img{width: 13.8889vw;}
.toptop h1{font-size: 5.5556vw; color:#3DA4E4;padding: 2.7778vw 0;}

label{ width: 100%; font-size: 3.4722vw; line-height: 4.8611vw; margin-bottom: 1.3889vw; }
input[type=text],input[type=password],input[type=tel]{border:0.1389vw solid #727C82; border-radius:1.6667vw; padding: 0 1.3889vw; font-size: 4.1667vw; line-height: 5.8333vw;width:70%;height: 11.3889vw;}
button{/*border:0.1389vw solid #CCCCCC;*/ border-radius:1.6667vw; background: #3da4e4; font-size: 4.1667vw; line-height: 5.8333vw; padding: 0 1.3889vw; width: 30%;height: 11.3889vw;}

.inputbox{width: 100%;  gap:1.3889vw;  }

.join_top{background: #fff; padding: 2.7778vw; }
.join_btm{padding: 2.7778vw;}
.phone_input{margin: 4.1667vw 0;}
.phone_inputbox1{margin-top: 1.3889vw;}

.pw_input input{width: 100%;}
.pw_input1{margin: 4.1667vw 0;}
/*.pw_input1 input{margin-bottom: 1.1111vw;}*/
.pw_input span{font-size: 3.4722vw;line-height: 4.8611vw;}

 .hide{display: none;}

 .pw_input{position: relative;}
 .pw_btns {position: absolute; right: 3.8889vw; top: 50%; cursor:pointer;}
 .pw_btns img.on {display: block;}
 .pw_btns img {width: 6.111vw; display: none;}

.broke_input{margin: 4.1667vw 0;}
.broke_input input{width: 100%;}

.terms_box{align-items: center; margin-bottom: 2.7778vw;}
.terms_wrap > p{font-size: 5vw; line-height: 4.8611vw; }

.terms_box .left{ gap:2.0833vw;  align-items: center;} 
.terms_box .left label{ font-size: 4.1667vw; line-height: 5.8333vw;}
.terms_box .left label span{color:#3DA4E4}

.terms_wrap .whole{ gap:2.0833vw;  align-items: center; margin-bottom:5vw; border-bottom: 0.1389vw solid rgba(204,204,204,0.5);}
.terms_wrap .whole > label{font-size: 4.5833vw; line-height: 6.3889vw; font-weight: 500;}
.terms_box img{width: 4.5833vw; }


input[type="checkbox"] {  }

.terms_wrap label { align-items: center; font-size: 4.1667vw;line-height: 5.5vw; margin-bottom: 0; gap:1.3889vw;cursor:pointer;}

/* 체크박스가 비어 있을 때 레이블의 ::before */
input[type="checkbox"] + label::before { width: 5vw;height: 5vw; border: 0.5555vw solid #3DA4E4;border-radius: 0.5556vw;
   align-items: center; transition: background-color 0.3s, border-color 0.3s;}

/* 체크박스가 체크된 상태일 때 */
input[type="checkbox"]:checked + label::before {  border- background: url('/images/ckbox-fill.png') no-repeat center center; background-size: 6.5vw 6.5vw;
  }

.login_btn{width: 100%;height: 10vw;font-size: 4.1667vw;line-height: 5.8333vw;background: #3DA4E4; border: none; margin-top: 4.1667vw; border-radius:1.6667vw;
margin: 8.3333vw 0; cursor: pointer;}


.conttpopup{width:100%;margin: 0 auto;    }
.conttpopup .cont_bg{width: 100%; min-height: 100vh; background: rgba(0,0,0,0.5);  top:0;left:0;}
.conttpopup .conttpopup_wrap{width: 94.4444vw; height: 80vh;  top:30%; left:50%; transform:translate(-50%,-30%);
background: #fff; border-radius:1.1111vw; border:0.1389vw solid #f5f5f5; padding: 2.7778vw; overflow-y:auto;}
.conttpopup .conttpopup_wrap .cont_top {border-bottom: 0.1389vw solid #f5f5f5;margin-bottom: 2.7778vw;padding-bottom: 2.7778vw; }
.conttpopup .conttpopup_wrap .cont_top h2 {font-size: 4.1667vw;line-height: 5.8333vw; margin: 0 auto; }
.conttpopup .conttpopup_wrap .cont_top img {cursor: pointer; width: 5.9722vw;  top:0; right:2.7778vw;}
.conttpopup .conttpopup_wrap .cont_cnt{padding: 2.7778vw;background: #f8f8f8;font-size: 3.4722vw; line-height: 4.8611vw;}

.conttpopup1{width:100%;margin: 0 auto;    }
.conttpopup1 .cont_bg{width: 100%; min-height: 100vh; background: rgba(0,0,0,0.5);  top:0;left:0;}
.conttpopup1 .conttpopup_wrap{width: 94.4444vw; height: 80vh;  top:30%; left:50%; transform:translate(-50%,-30%);
background: #fff; border-radius:1.1111vw; border:0.1389vw solid #f5f5f5; padding: 2.7778vw; overflow-y:auto;}
.conttpopup1 .conttpopup_wrap .cont_top {border-bottom: 0.1389vw solid #f5f5f5;margin-bottom: 2.7778vw;padding-bottom: 2.7778vw; }
.conttpopup1 .conttpopup_wrap .cont_top h2 {font-size: 4.1667vw;line-height: 5.8333vw; margin: 0 auto; }
.conttpopup1 .conttpopup_wrap .cont_top img {cursor: pointer; width: 5.9722vw;  top:0; right:2.7778vw;}
.conttpopup1 .conttpopup_wrap .cont_cnt{padding: 2.7778vw;background: #f8f8f8;font-size: 3.4722vw; line-height: 4.8611vw;}
}