@charset "utf-8";

/* 로그인 */
.login_logo	{ padding:70px 0 40px 0; text-align:center;}

#login	{width:400px; margin:0 auto;}
#login_id,#login_pw	{width:400px; height:60px; border:1px solid #ddd; border-radius:10px; padding:0 30px 0 50px; box-sizing:border-box;}
#login_id	{margin-bottom:10px; background-image:url(../img/member/bg_id.png); background-repeat:no-repeat; background-position: 30px center; background-color: #fff;}
#login_pw	{margin-bottom:20px; background-image:url(../img/member/bg_pw.png); background-repeat:no-repeat; background-position: 30px center; background-color: #fff;}
#login .btn_submit	{width:400px; height:60px; background-color:#1da1f2; color:#fff; text-align:center; border-radius:10px; border:0; font-family:'Noto Sans KR',돋움,san-serif; font-size:20px; font-weight:500; margin-bottom:10px;}
#login>p	{overflow:hidden;}
#login>p span	{float:left;}
#login>p .btn02	{float:right;}

.btn_join	{margin-top:40px; background-color:#e5f3fc; border:1px solid #d1e4f1; text-align:center; padding:20px 0; border-radius:10px;}

/* 회원가입 */
#join_logo	{display:block; width:202px; margin:80px auto 40px auto; }
#join	{width:600px; margin:0 auto;} 
#join>ol	{overflow:hidden;} 
#join>ol>li	{float:left; width:25%; padding:20px 0; border-right:1px solid #fff; box-sizing:border-box; background-color:#ececec; text-align:center; color:#aaa; font-family:'Noto Sans KR',돋움,san-serif; font-size:18px; font-weight:600;} 
#join>ol>li.on	{ color:#fff; background-color:#1da1f2;} 
/*#join>ol>li:first-child	{border-radius:10px 0 0 0; } 
#join>ol>li:last-child	{border-radius:0 10px 0 0; border-right:0;} */
#join>ol>li span	{font-size:11px; opacity:0.5; display:inline-block; margin-bottom:3px; } 

.join_cont	{padding:40px 40px 20px 40px; background-color:#fff; box-sizing:border-box;}
.join_cont .agree_title	{overflow:hidden; margin-bottom:5px; font-size:14px; font-weight:bold;}
.join_cont .agree_title .check_agree { float:right; }
.join_cont .agree_title .check_agree label { font-size:13px; font-weight:normal; color:#666; cursor:pointer; }
.join_cont .agree_title .check_agree input { cursor:pointer; }
.join_cont .agree_cont	{height:200px; margin-bottom:20px; overflow-y:scroll; border:1px solid #eee; padding:10px; box-sizing:border-box; line-height:18px; }
.join_cont .user_contry { margin-top:20px;margin-bottom:20px;text-align:center;font-size:12px;  }
.join_cont .user_contry > label { color:#333; font-size:14px; cursor:pointer; }
.join_cont .user_contry > label > input { width:14px; height:14px; display:inline-block; margin:0 3px 0 0; cursor:pointer; }

#join_footer {overflow:hidden; width:600px; margin:20px auto 40px auto; } 
#join_footer .cp_menu {overflow:hidden; float:left; } 
#join_footer .cp_menu a {padding:0 5px; border-right:1px solid #ddd; font-size:12px;} 
#join_footer .cp_menu a:first-child {padding-left:0;} 
#join_footer .cp_menu a:last-child {border-right:0;} 
#join_footer .copyright {float:right;} 

.join_tbl	{width:100%; border-top:1px solid #ddd; margin-bottom:20px;}
.join_tbl th, .join_tbl td	{border-bottom:1px solid #ddd;}
.join_tbl th	{width:30%; padding:0 15px; /* border-left:1px solid #ddd; */ height:48px; text-align:left; font-size:14px; color:#888; vertical-align:middle;}
.join_tbl td	{width:75%; /* border-right:1px solid #ddd; */ vertical-align:middle;}
.join_tbl td input, .join_tbl td select	{padding:0 5px; height:40px; border:0;}
.join_tbl .btn_sms {display:inline-block; padding:5px 10px; border:1px solid #ddd; font-size:12px; background:#fff; vertical-align: middle;}
.join_tbl .btn_sms:hover {background:#ddd;}

.join_tbl .privacy_cont	{height:100px; margin-right:10px;  margin-bottom:5px; overflow-y:scroll; line-height:18px; border:1px solid #ddd; padding:10px; box-sizing:border-box;}

.join_cont .txt_finish1	{margin-bottom:30px; text-align:center; color:#1da1f2; font-size:30px; letter-spacing:-2px; font-family:'Noto Sans KR',돋움,san-serif; }
.join_cont .txt_finish2	{margin-bottom:20px; font-size:14px; line-height:22px; text-align:center;}
.join_cont .txt_finish2 .id	{font-weight:bold; color:#1da1f2;}

#fregisterform .join {height:30px;}
#fregisterform th {text-align:left; padding:0 10px;} 

/* 가입 전 선택지 */
.reg_before { position:fixed; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,0.3); display:block; transition:opacity 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.reg_before > div { position:absolute; left:0; top:0; bottom:0; right:0; background:#fff; width:370px; height:450px; margin:auto; box-sizing:border-box; padding:40px 0 40px; box-shadow:0 0 20px rgba(0,0,0,0.3); }
.reg_before > div > h1 { margin:0; padding:0; text-align:center; line-height:1; font-size:25px; letter-spacing:-0.03em; color:#333; }

.reg_before > div > section { padding-top:15px; width:216px; margin:0 auto; display:flex; justify-content:center; flex-direction:column; }
.reg_before > div > section > h2 { font-size:15px; color:#555; letter-spacing:-0.03em; padding:0 0 19px; margin:0; text-align:center; }
.reg_before > div > section > button { border:0; border-radius:0; width:100%; height:40px; background:#62a6c5; color:#fff; display:flex; justify-content:center; align-items:center; box-sizing:border-box; cursor:pointer; outline:none; }

/* 가입 전 선택지 - 닫기버튼 */
.reg_before > div > button[close] { position:absolute; right:10px; top:10px; width:30px; height:30px; background:transparent; border:0; border-radius:0; cursor:pointer; outline:none; }
.reg_before > div > button[close]::before { background:#b3b3b3; content:''; position:absolute; left:0; top:0; bottom:0; right:0; width:1px; margin:auto; transform:rotate(45deg); transition:background-color 0.2s ease-in-out; }
.reg_before > div > button[close]::after { background:#b3b3b3; content:''; position:absolute; left:0; top:0; bottom:0; right:0; width:1px; margin:auto; transform:rotate(-45deg); transition:background-color 0.2s ease-in-out; }
.reg_before > div > button[close]:hover::before { background:#333; }
.reg_before > div > button[close]:hover::after { background:#333; }

/* mobile */

@media all and (max-width:420px) {
/* 로그인 */
.login_logo	{ padding:40px 0;}

#login	{width:90%; margin:0 auto;}
#login_id,#login_pw	{width:100%; height:50px;margin-bottom:5px; padding:0 10px 0 35px; background-position:15px center; }
#login .btn_submit	{width:100%; height:50px; font-size:16px; font-weight:500; margin-top:5px; margin-bottom:10px;}

.btn_join	{margin-top:20px;}

}

/* mobile2 */

@media all and (max-width:620px) {

/* 회원가입 */

#join_logo	{width:40%; margin:40px auto; }
#join_logo>img	{width:100%;}
#join	{width:93.75%; margin:0 3.125%;}  
#join>ol>li	{padding:10px 0;font-size:14px; font-weight:500;} 
#join>ol>li span	{font-size:10px;} 

.join_cont	{padding:20px 5%;}
.join_cont .agree_cont	{height:150px;}

.join_tbl th	{line-height:20px;}

#join_footer {width:93.75%; margin:15px 3.125% 30px 3.125%; } 

#join_footer .cp_menu {float:none;text-align:center; } 
#join_footer .cp_menu a {padding:0 5px; border-right:1px solid #ddd; font-size:12px;} 
#join_footer .cp_menu a:last-child {padding-right:0;} 
#join_footer .copyright {float:none; margin-top:10px; text-align:center;} 

.join_tbl .btn_sms	{margin-top:10px;}

.join_cont .txt_finish1	{margin-top:20px; margin-bottom:15px;  font-size:20px; }
.join_cont .txt_finish2	{font-size:12px; line-height:18px;}

#fregisterform td {padding:10px;}

.reg_before > div { width:340px;}

}