@charset "utf-8";
.membership_wrap{display:block; width:100%; min-height:100%; margin:0 auto; background:#eef6fc; font-family: 'NanumGothic'}

.mem_header{width:100%; height:80px; border-bottom:2px solid #1a4f9f; box-sizing:border-box; background:#fff; margin:0 auto }
.mem_header ul{display:flex; justify-content: space-between; width:1000px; height:100%; margin:0 auto; font-family: 'GmarketSans'; color:#000;}
.mem_header li:nth-child(1){width:200px; background:url("../images/ui_01.png") left center no-repeat; text-indent:-9999px}
.mem_header li:nth-child(2){font-family: 'GmarketSans'; font-size: 25px; font-weight:600; text-align:right; padding-top:30px; letter-spacing:-1px}

.membership_info{display:block; width:1000px; margin:30px auto; padding:0 0 30px 0} 
.membership_info h3{display:none; font-size: 23px; font-weight:600; text-align:left; letter-spacing:-1px; color:#000; margin-bottom:10px}

.sub_top{display:flex; justify-content:space-between; width:100%}
.sub_top li{display:block}
.sub_top li:nth-child(1){display:none; font-size: 23px; font-weight:600; text-align:left; letter-spacing:-1px; color:#000}
.sub_top li:nth-child(2){width:300px; height:38px;}
.btn_me{width:100%; height:100%; background:#fa6b6b; border-radius:30px; text-align:center; color:#fff; font-weight:500; font-size: 15px; border:none; outline:none; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1);}
.btn_me:hover{background:#ff6278; cursor:pointer; box-shadow:none}


.membership_info > div{width:100%; border:1px solid #d7e0ed; border-radius:10px; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1); background:#fff; box-sizing:border-box; padding:50px 50px 30px 50px; margin-bottom:30px}

.membership_info li{display: flex; align-items: center; gap:10px; width:100%; min-height:40px; line-height:38px; flex-wrap:wrap;margin-bottom:15px } 
.membership_info li p.title,
.membership_info li > label{position:relative; display:inline-block; width:80px; height:100%; font-size:15px; font-weight:600; text-align:right }
.membership_info li p.title:before,
.membership_info li > label:before{content:""; width:15px; height:10px; display:inline-block; background:url("../images/blit_01.png") no-repeat center;  }


.membership_info input[type=text], 
.membership_info input[type=password],
.membership_info select{width:250px; height:38px; padding:0 10px; outline:none; color:#444; font-size:15px; font-weight:600; box-sizing:border-box}
.membership_info select option{color:#666; font-size:14px; font-weight:400}


.membership_info input[type=radio] + label{font-size:15px}
.membership_info dl{display: flex;  align-items: center;gap: 10px;  width:100%; min-height:38px; line-height:38px}
.membership_info dt{position:relative; display:inline-block; width:80px; height:100%; font-size:15px; font-weight:600; text-align:right; vertical-align:top} 
.membership_info dt:before{content:""; width:15px; height:10px; display:inline-block; background:url("../images/blit_01.png") no-repeat center}  
.membership_info dd{width:calc(100% - 80px)}
.membership_info dd label{display:none}

/*기업회원 추가 */
.company {display: flex;  flex-wrap: wrap;}

.company li {display:flex;  align-items: center;  gap:5px; width: 50%;  box-sizing: border-box;}
.company li.team_name,
.company li.file{width: 100%;}
.company li > label {position:relative; width:150px;  flex-shrink:0; letter-spacing:-1px; padding-right:5px}
.company li > label:before{content:""; width:15px; height:10px; display: inline-block; background:url("../images/blit_01.png") no-repeat center; }
.company li > input { flex:1;}

.company li.address {width:100%;}
.company dt{position:relative; width:150px; text-align:right; background:none}
.company dt > label:before{content:""; width:15px; height:10px; display:inline-block; background:url("../images/blit_01.png") no-repeat center; }
.company dd{width:calc(100% - 160px)}

.company input[type=text], 
.company input[type=password],
.company select{width:calc(100% - 160px)}


/*성별*/
.gender{display:inline-block;}
.gender label{display:inline-block!important; font-size:15px; font-weight:500}
.gender label:before{display:none}


/* 이메일 */
.email input[type=text], 
.email select{width:31%}
.email span{width:3%; text-align:center}

/*연락처*/
.phone input[type=text], 
.phone select{width:100px}
.phone span{width:3%; text-align:center}


/*주소*/
.address dt{padding-bottom:90px;box-sizing: border-box;}
.address p{display:flex; width:100%; min-height:38px; margin-bottom:5px}
.address p a{top:0; right:0; display:block; width:90px; height:38px; background:#0066bc; border-radius:3px; text-align:center; color:#fff; font-weight:500; font-size: 13px; border:none; outline:none; margin-left:5px}
.address p a:hover{background:#0019b1; cursor:pointer}
.address input[type=text].add_01{width:calc(38% - 85px)}
.address input[type=text].add_02{width:100%}


/* 인풋타입뒤에 버튼 포함 */
.add_btn input[type=text]{width:calc(100% - 95px)}
.add_btn input[type=text].w50{width:calc(50% - 95px)}
.add_btn a{display:block; width:90px; height:38px; background:#0066bc; border-radius:3px; text-align:center; color:#fff; font-weight:500; font-size: 13px; border:none; outline:none}
.add_btn a:hover{background:#0019b1; cursor:pointer}


/* 회원가입약정 */
.mem_company{border-top:1px solid #d7e0ed; margin:30px 0 20px 0; padding-top:40px}
.mem_company h1{color:#000; font-size:24px; font-weight:600; padding-bottom:20px}
.mem_company h2{color:#000; font-size:17px; font-weight:600; margin:20px 0 10px 0}

.mem_company p{font-size:14px; font-weight:500; line-height:20px; padding-bottom:10px; color:#555}

.mem_company ul{padding:10px 0 10px 10px}
.mem_company li{display:block; width:100%; min-height:auto; line-height:18px; background:url("../images/blit_01.png") no-repeat left 8px; padding:0 0 0 10px; background-size:3px}

.mem_company input[type="checkbox"]{margin-top:20px; font-size:18px}

/* 파일업로드 */
.file {display:flex; align-items: center; gap: 10px; margin-bottom:12px; width:100%;}
.file input[type="file"] { display: none;}
.file dd{display:flex; }
.file_name {overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;  padding:0 10px; outline:none; color:#444; font-size:15px; font-weight:600; border:1px solid #d7e0ed; background:#fff; border-radius:3px; display:inline-block; width:100%; height:38px;  box-sizing:border-box; }

.file label {display:inline-block!important; white-space: nowrap; width:90px; height:38px; background:#0066bc; border-radius:3px; text-align:center; color:#fff; font-weight:500; font-size: 13px; border:none; outline:none; margin-left:5px;  cursor:pointer}
.file label:hover {background: #0019b1;}

/* 회원가입버튼 */
.btn_login{display:block; width:180px; height:45px; margin:0 auto; background:#0066bc; border-radius:30px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);text-align:center; vertical-align:middle; color:#fff; font-weight:500; font-size: 20px; border:none; outline:none}
.btn_login:hover{background:#0019b1; box-shadow:none;cursor:pointer} /*#0084aa 008fbe*/ 

.login_coment{display:flex; justify-content:space-between; width:100%; margin-top:45px; padding-top:30px;  box-sizing:border-box; border-top:1px solid #cadfef;}
.login_coment p{width:260px; background:url("../images/coment.png") no-repeat center 10px; padding-top:110px; color:#000; font-size:18px; font-weight:600; text-align:center; padding-right:5px}

.login_coment ul{width:calc(100% - 260px)}
.login_coment li{display:block; margin-bottom:12px; padding-left:23px; background:url("../images/blit_02.png") no-repeat left center; font-size:15px; font-weight:500}

.wfull{width:100%!important}
.w100{width:100px!important}
.w32{width:32%!important}



@media (max-width:1100px) {
.mem_header ul{width:90%}
.membership_info{width:90%}   

.company li { width:100%;}
.company li input { width:100% }
.company li.clear{display:none}    
.company li dd.gender input{width:auto} 
.address input[type=text].add_01{width:150px}
}
    
@media (max-width:800px) { 
.mem_header li:nth-child(2){display:none}
.membership_info h3{display:block} 
    
.sub_top{display:flex; justify-content:space-between; width:100%}
.sub_top li:nth-child(1){display:block}

}

@media (max-width:640px) {
    
.mem_header{height:60px;}
.mem_header li:nth-child(1){line-height:60px; background-size:140px}
  
.membership_info{margin:20px auto}
.membership_info{border-radius:5px;  padding:10px 0}
.membership_info > div{padding: 50px 40px 30px 40px}  
.membership_info li p.title,
.membership_info li > label{width:60px; padding:0; text-align:left} 
.membership_info li p.title:before,
.membership_info li > label:before{display:none} 
    
.membership_info dt:before{display:none} 

.membership_info dt{width:60px; background:none; padding:0; text-align:left; margin-bottom:0}

.company dl{display:block}
.company dt {width:100%;}
.company dd{width:100%;}
.company li > label {display:none}  /*; width: 110px;*/
.company li.file > label {display:block; width:120px} 
.team_name label{line-height:18px}
    
.company placeholder{color:#000}
 


/*연락처*/
.phone input[type=text], 
.phone select{width:30%}
.phone span{width:3%}
.school select{width:100%!important}   
}

@media (max-width:550px) { 
    
.membership_info input[type=text], 
.membership_info input[type=password],
.membership_info select{width:calc(100% - 80px)} 
    

.email, .phone {display:flex!important; justify-content:space-between}   
 /* 이메일 */
.email input[type=text], 
.email select{width:30%}
.email span{width:3%}    



@media (max-width:480px) { 
    
.membership_info h3{font-size:20px;padding:0 0 10px 0; border-bottom:1px solid #d7e0ed; margin-bottom:20px}   
.membership_info > div{background:none; border:none; padding:0; box-shadow:none} 
    
.membership_info dl{display:block}   
.membership_info dt{height:38px}
.membership_info dd{width:100%} 
    
.mem_company{background:#fff; border-top:none; margin:20px 0; padding:20px}
.mem_company h1{padding:10px 0 0 0}
    
 .sub_top li:nth-child(2){width:150px}    
 
}