/*로그인 아이디 패스워드*/
.login_guide02{ background: #fff; box-shadow: 1px 2px 20px #ddd;width: 730px; padding: 50px 5%; margin:0 auto; border-radius: 30px;}
.login_box02{background: url("/images/point/inc/login_img03.png") left top no-repeat; background-size: 270px; padding-top:10px; }
.login_box02 > ul{ margin-left: 340px;}
.login_box02 > ul li{ margin: 20px 0;}
.login_box02 > ul li span{ display: block; font-size: 15px;}
.login_box02 > ul li input{ height: 45px; line-height: 45px; width: 100%; background: #f3f3f3;border-radius: 4px; padding:0  10px;}
.login_box02 > ul li input:focus{ background:#fff5d2;}
.login_box02 > ul li button{ height: 50px; line-height: 50px; width: 100%; background: #00b16d; border-radius: 4px; box-shadow: 1px 5px 10px #ddd; color: #fff; font-weight: bold; border: 1px solid #00a364;}

@media all and (max-width :800px) {
.login_guide02{ width:calc(100% - 60px); padding: 30px 30px;  border-radius: 20px;}
.login_box02{ background-size: 200px;}
.login_box02 > ul{ margin-left: 220px;}
.login_box02 > ul li{ margin: 15px 0;}

}
@media all and (max-width :600px) {
.login_guide02{ width:calc(100% - 60px); padding: 30px 30px;  border-radius: 20px;}
.login_box02{background: url("/images/point/inc/login_img03.png") center top no-repeat; background-size: 130px;}
.login_box02 > ul{ margin-left: 0; padding-top: 100px;}

}






/*로그인 인증*/
.login_guide01{ text-align: center; word-break: keep-all; width: 1000px; margin: 0 auto;}
.login_txt01{ display: inline-block; text-align: left;}
.login_txt01 li{ padding: 3px 0 3px 10px;background: url("/images/point/inc/point01.png") left 12px no-repeat;}



/*로그인박스*/
.login_box01 { margin: 50px 0; display: flex; justify-content:space-around;}
.login_box01 a{vertical-align: top; border: 1px solid #eee; border-radius: 30px; box-shadow: 1px 10px 10px #eee; padding: 5%; margin: 0 3%; background-repeat: no-repeat; background-position: center 200px;}

.login_box01 a.login_link01{ background-image: url("/images/point/inc/login_img01.png");}
.login_box01 a.login_link02{ background-image: url("/images/point/inc/login_img02.png");}

.login_box01 a.login_link01:hover{ border: 2px solid #ef77be;}
.login_box01 a.login_link02:hover{ border: 2px solid #00a6d0;}

.login_box01 a strong{ font-size: 27px;font-family:"SBAggroM", sans-serif;}  
.login_box01 a.login_link01 strong{  color: #ef77be;} 
.login_box01 a.login_link02 strong{  color: #00a6d0;}  

.login_box01 a em{display: inline-block; border-radius:50px; padding: 10px 40px; color: #fff; margin-top: 250px;}
.login_box01 a.login_link01 em{ background:#ef77be;}  
.login_box01 a.login_link02 em{ background:#00a6d0;}
.login_box01 a > span{ display: block; margin: 20px 0; font-size: 15px;}

@media all and (max-width :1100px) {
.login_guide01{ width: 90%; margin: 0 5%;}
.login_txt01 li{ padding: 2px 0 2px 10px;font-size: 14px;}
.login_box01{ margin: 30px 0;}
.login_box01 a { background-size: 150px; margin: 0 1%;background-position: center 180px;}
.login_box01 a strong{ font-size: 20px;} 
.login_box01 a > span{  margin: 10px 0; font-size: 14px;}
.login_box01 a em{ margin-top: 220px;}
}
@media all and (max-width :950px) {
.login_guide01{ width: 100%; margin: 0;}
.login_txt01{ display: block;}
.login_box01{ margin: 30px 0;}
.login_box01 a { background-size: 150px; margin: 0 1%;background-position: center 180px; }
.login_box01 a strong{ font-size: 20px;} 
.login_box01 a > span{  margin: 10px 0; font-size: 14px;}
.login_box01 a em{ margin-top: 220px;}
}
@media all and (max-width :768px) {
.login_box01{ border-radius: 20px;}
.login_box01 a strong{ font-size: 16px;} 
}

@media all and (max-width :680px) {
.login_box01{ flex-direction: column;}
.login_box01 a{ margin: 0 0 30px 0; background-size: 100px;background-position: center 150px;padding:20px  5%; }
.login_box01 a em{ margin-top: 120px;}
}



/*회원가입*/
.join_guide01{background: #fff; box-shadow: 1px 2px 20px #ddd;width: 1000px; padding: 70px 5%; margin:0 auto; border-radius: 30px;}
.join_guide01 h5{ font-size: 18px;text-align: center; margin-bottom: 10px;}

.join_txt01{ border: 2px solid #00b16d; padding:30px  5%; border-radius: 20px; box-shadow: 10px 10px 10px #eee; font-size: 14px;text-align: left !important;}
.join_txt01 h6{font-size: 15px; margin: 10px 0 5px 0; color: #007a47;}
.join_txt01 ul{ margin-bottom: 10px; }

.join_txt02{ margin: 20px 0 20px 0; text-align: center;  display: inline-block;}
.join_txt02 > em{display: inline-block;width: 620px; word-break: keep-all; text-align: right; margin-right: 20px;}
.join_txt02 .form_guide{ font-size: 18px;color: #007a47; font-weight:500; float: right; width: 150px; }
.join_txt02 .form_guide > span{ border: 1px solid #00b16d; background: #7fdfba; }



.join_info{ font-size: 15px; margin-bottom: 30px;}
.join_info > p{  font-size: 14px; margin-bottom: 10px;}
.join_info ul{ border-bottom: 1px solid #000;border-top: 2px solid #000; }
.join_info li{ border-bottom: 1px solid #eee; padding:15px 20px; display: flex; justify-content: space-between; text-align: left; align-items: center;flex-flow: wrap;}
.join_info li > strong{ width:140px;}
.join_info li > span{ width:calc(100% - 140px);}
.join_info li em{display: inline-block;}
.join_info input, 
.join_info select{ height: 40px; border: 1px solid #eee;  margin:1px 0; padding: 0 10px; border-radius: 4px;}
.join_info button{ display: inline-block; background: #000; color: #fff; font-size: 10px; text-align: center; width: 80px; line-height: 30px; border-radius: 4px; margin-left:2px;} 
.join_info .input50f{ width: 50%;}
.join_info .input20f{ width: 20%;}

@media all and (max-width:1100px) {
.join_guide01{width: 100%; padding:0; box-shadow: 0 0 0 #fff;}
.join_txt02{ width: 100%; text-align: left;}
.join_txt02 > em{ width: calc(100% - 30px);}
.join_txt02 .form_guide{ font-size: 15px; width: 130px; }

}
@media all and (max-width:768px) {
.join_info{font-size: 14px;}
.join_guide01 h5{ font-size: 15px;}


}
@media all and (max-width:680px) {
.join_info li{  padding:15px 5px}
.join_info li > strong{ width:100%}
.join_info li > span{ width:100%;}
.join_info .input50f{ width: 100%;}
.join_info .input20f{ width: 30%;}

}