@charset "utf-8";



@font-face{
    
    font-family:'NanumSquare';
    src:url('fonts/NanumSquareB.ttf');
    src:url('fonts/NanumSquareEB.ttf');
    src:url('fonts/NanumSquareL.ttf');
    src:url('fonts/NanumSquareR.ttf');
    font-weight: normal;
    font-style: normal;
    
}


/*로그인 시작!*/
.member_box {}
.inner {width:80%; margin:0 auto;}
.member_box_01 {width:600px; border:1px solid #ccc; padding:3%; box-sizing: border-box; border-radius:20px; margin:10% auto;}

/* .member_box_01_01 {font-size:24px; color:#333; font-weight: bold;} */
.member_box_01_02 {margin-top:5%; overflow: hidden;}
.member_box_01_02 input {width:100%; border-left:0; border-right:0; border-top:0; border-bottom:1px solid #ccc; padding:4% 2%; font-size:18px;}
.member_box_01_03 {margin-top:1%; overflow: hidden;}
.member_box_01_03 input {width:100%; border-left:0; border-right:0; border-top:0; border-bottom:1px solid #ccc; padding:4% 2%; font-size:18px;}
/* .member_box_01_04 {margin-top:7%;} */
.member_box_01_04 .input_checkbox_box {display:inline-block;}
.member_box_01_04 .id_pw_find_btn_box {display:inline-block; float:right;}
.member_box_01_04 .id_pw_find_btn_box .id_find_btn {}
.member_box_01_04 .id_pw_find_btn_box .pw_find_btn:before {content:''; display:inline-block; height:10px; border-left:1px solid #ccc; padding:0 0 0 5px;}
.member_box_01_05 {margin-top:7%;}
/* .home_login_btn {background-color:#07afee; display:block; padding:3%; color:#fff; font-size:24px; font-weight:bold; text-align: center;} */
.facebook_box {margin-top:7%; text-align: center;}
.facebook_box .round {background-color:#02468b; color:#fff; display: inline-block; width:50px; height:50px; border-radius:25px; font-size:24px; font-weight:bold; vertical-align:middle; line-height: 50px;}
.facebook_box .facebook_login_btn {font-size:24px; font-weight: bold;}
.member_box_01_06 {margin-top:10%; border-top:1px solid #ccc; padding-top:5%;}
.member_box_01_06 .left_txt {display:inline-block; width:70%; vertical-align:top; color:#333; font-size:14px;}
.member_box_01_06 .join_membership_box {display:inline-block; vertical-align:top; float:right; }
.member_box_01_06 .join_membership_box .join_membership_btn{background-color:#07afee; color:#fff; display: block; padding:10px; width:100px; box-sizing: border-box; text-align: center; font-size:1.8rem;}
input::placeholder{color:#ccc;}








/*아이디찾기,비번찾기*/
.id_pw_find_box {width:600px; margin:10% auto; }
.id_pw_find_box_01 {width:100%; border:1px solid #ccc; padding:10%; box-sizing: border-box; border-radius:20px;}


.id_pw_find_box_01_01 { font-size:0; width:100%;}
.id_pw_find_box_01_01 a {display:inline-block; padding:5%; width:50%; box-sizing:border-box; text-align: center;}
.id_pw_find_box_01_01 .id_title {color:#666; font-size:18px; border-left:1px solid #ccc; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.id_pw_find_box_01_01 .id_title.active{ border-top:1px solid #07afee; border-right:1px solid #07afee; border-bottom:1px solid #07afee; border-left:1px solid #07afee; color:#07afee;}
.id_pw_find_box_01_01 .pw_title {font-size:18px; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #ccc; color:#666;}
.id_pw_find_box_01_01 .pw_title.active{ border-top:1px solid #07afee; border-right:1px solid #07afee; border-bottom:1px solid #07afee; border-left:1px solid #07afee; color:#07afee;}
/* .id_pw_find_box_01_01 .on_bottom_line {border-bottom:1px solid #07afee; display:block;} */
/* .id_pw_find_box_01_01 .off_bottom_line {border-bottom:1px solid #ccc; display:block;} */
.id_pw_find_box_01_02 {margin-top:10%;}
.id_pw_find_box_01_02 .title {font-size:24px; color:#333; font-weight: bold;}
.id_pw_find_box_01_02 .gray_txt {font-size:14px; color:#ccc; margin-top:10px;}
.id_pw_find_box_01_03 {margin-top:5%;}
.id_pw_find_box_01_03 .input_email_box {width:100%; overflow:hidden;}
.id_pw_find_box_01_03 .input_email_box input {padding:5%; width:100%; box-sizing: border-box; border-bottom:1px solid #ccc; border-top:0; border-left:0; border-right:0; font-size:18px;}
.id_pw_find_box_01_04 {margin-top:15%;}
.id_pw_find_box_04_btn {background-color:#07afee; display:block; padding:5%; text-align: center; color:#fff; font-size:24px; font-weight: bold; }













/*공통*/
.membership_info_step_box {margin-top:5%; font-size:0; text-align: center;}
.membership_info_step_box li {display:inline-block; vertical-align: top; position: relative;}
.membership_info_step_box li + li {margin-left:20%;}
.membership_info_step_box li + li:before {content:''; display:block; width:13px; height:22px; background:url(../img/img_step_arrow.jpg)no-repeat; position: absolute; left:-100%; top:50%;}
.membership_info_step_box li span {display:block;}
.membership_info_step_box li .span_01 {font-size:18px; color:#888888;}
.membership_info_step_box li .span_02 {margin:10px 0;}
.membership_info_step_box li .span_03 {font-size:18px; color:#888888;}

.membership_info_step_box li .img_step01 {width:40px; margin: 10px auto;}
.membership_info_step_box li .img_step01 img {width:100%;}
.membership_info_step_box li .img_step02 {width:36px; margin: 10px auto;}
.membership_info_step_box li .img_step02 img {width:100%;}
.membership_info_step_box li .img_step03 {width:40px; margin: 10px auto;}
.membership_info_step_box li .img_step03 img {width:100%;}


/*회원가입-1.약관동의/개인정보수집및이용안내*/
.membership_info_box {width:600px; margin:10% auto;}
.membership_info_box h3 {font-size:48px; font-weight:bold; text-align: center;}

.membership_info_con_box {border:1px solid #ccc; border-radius:20px; width:100%; padding:5%; margin-top:5%;}
.membership_info_con_01 .title {font-size:24px; font-weight: bold; margin-bottom:10%;} 
.membership_info_con_01 .tr_box {border-bottom:1px solid #ccc; padding:3% 0; font-size: 1.5rem;}
.membership_info_con_01 .tr_box .left_txt {display:inline-block;}
.membership_info_con_01 .tr_box .left_txt .red_point {font-size:14px; color:red;}
.membership_info_con_01 .tr_box .right_content_btn {display:inline-block; float:right; text-decoration: underline; font-size:14px;}


.membership_info_con_02 {margin-top:10%;}
.membership_info_con_02 p {color:#909090; font-size:14px; line-height: 1.5;}
.membership_info_con_03 {margin-top:10%;}
.membership_info_con_03 .membership_info_con_03_btn {background-color:#07afee; font-size:24px; display:block; padding:3%; color:#fff; text-align: center;}

/*약관동의*/
.terms_of_use_wrap {position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:1;}
.terms_of_use_wrap .terms_of_use {background-color:#fff; margin:5%; padding:5%;}
.terms_of_use_wrap .terms_of_use p {margin-bottom:20px; font-size:16px;}

/*개인정보수집및이용안내*/
.personal_information_wrap {position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:1;}
.personal_information_wrap .personal_information {background-color:#fff; margin:5%; padding:5%;}
.personal_information_wrap .personal_information p {margin-bottom:20px; font-size:16px;}
     


















/*회원가입-2.정보입력*/
.information_input_box {width:600px; margin:10% auto;}
.information_input_box h3 {font-size:48px; font-weight:bold;}
.information_input_con_box {border:1px solid #ccc; border-radius:20px; width:100%; padding:5%; margin-top:5%;}
.information_input_con_01 .title {font-size:24px; font-weight: bold; margin-bottom:3%;} 
.information_input_con_03 {margin-top:10%;}
.information_input_con_03 .information_input_con_03_btn {background-color:#07afee; font-size:24px; display:block; padding:3%; color:#fff; text-align: center;}
.input_tr_box input {font-size:18px; border-left:0; border-top:0; border-right:0; border-bottom:1px solid #ccc; width:100%; padding:5%; box-sizing: border-box;}






/*회원가입-3.가입완료*/
.completion_box {width:600px; margin:10% auto;}
.completion_box h3 {font-size:48px; font-weight:bold;}
.completion_con_box {border:1px solid #ccc; border-radius:20px; width:100%; padding:5%; margin-top:5%;}
.completion_con_01 {margin-top:10%;}
.tr_box_01 , .tr_box_02, .tr_box_03{text-align: center;}
.tr_box_02 {margin:5% 0;}
.tr_box_02 strong {font-size:24px; font-weight: bold;}
.tr_box_03 span {font-size:24px;}
.completion_con_02 {margin-top:20%;}
.completion_con_02 .completion_con_02_btn {background-color:#07afee; font-size:24px; display:block; padding:3%; color:#fff; text-align: center;}













/*반응형 시작!*/





@media screen and (max-width: 600px) {
    
    
    .inner {width: 100%;}
    
    .information_input_box {width:500px; margin:5% auto;}
    .membership_info_box {width:500px; margin:5% auto;}
    .member_box_01 {width:500px; margin: 5% auto;}
    .completion_box {width: 500px;margin: 5% auto;}
    .id_pw_find_box {width: 500px;margin: 5% auto;}
    
    .membership_info_step_box li .span_01 {font-size:14px;}
    .membership_info_step_box li .span_02 {font-size:14px;}
    .membership_info_step_box li .span_03 {font-size:14px;}
    
    .membership_info_step_box li .img_step01 {width:30px;}
    .membership_info_step_box li .img_step02 {width:30px;}
    .membership_info_step_box li .img_step03 {width:30px;}
    
    
    .membership_info_step_box li + li {margin-left:10%;}
    .membership_info_step_box li + li:before {left:-50%; top:40%;}
    
    
    .completion_box h3 {font-size: 40px;}
    .tr_box_02 strong {font-size:20px;}
    .tr_box_03 span {font-size: 20px;}
    
    
}

@media screen and (max-width: 500px) {
    
    
    .information_input_box {width:400px; margin:5% auto;}
    .membership_info_box {width:400px; margin:5% auto;}
    .member_box_01 {width:400px; margin: 5% auto;}
    .completion_box {width: 400px;margin: 5% auto;}
    .id_pw_find_box {width: 400px;margin: 5% auto;}
}