@charset "utf-8";
.kanji {font-family: 'Noto Sans KR', sans-serif !important;}

body#mypage {background:#f7f7f7}

/* 로그인 */
.login-box-wrap {width:100%; max-width:768px; padding:35px 50px 50px 50px; margin:0 auto; box-sizing:border-box; background:#fff;}
.login-item-wrap {width:100%;}
.login-item {width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; padding:10px 0}
.login-item .tit {width:100%; font-weight:600; font-size:1.8rem; margin-bottom:5px}
.login-item .tit .required {color:red;}
.login-item .login-input-wrap {width:100%;}
.login-item .login-input-wrap .login-input input[type=text],
.login-item .login-input-wrap .login-input input[type=password] {width:100%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.login-item .login-input-wrap .msg {color:#f12929; margin-top:3px; font-size:1.5rem; }

.login-func-wrap { width:100%; margin:20px 0; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;}
.login-func-wrap .save-id {position:relative;}
.login-func-wrap .save-id input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0}
.login-func-wrap .save-id input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  display:block;
  width:100%;
  vertical-align:middle;
  font-size:1.6rem; height:2.2rem; line-height:2.1rem; font-weight:400; 
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; 
 }
.login-func-wrap .save-id input[type="checkbox"] + label i {font-style:normal; margin-left:5px}

.login-func-wrap .save-id input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width:22px;  /* 체크박스의 너비를 지정 */
  height:22px;  /* 체크박스의 높이를 지정 */
  border-radius:50%; 
  box-sizing:border-box;
  border:2px solid #dadada;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 29 23' style='enable-background:new 0 0 29 23;'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23dadada;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M26.5,2.5l-15,18 M2.5,10.5l9,10'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background-size:13px;
}

.login-func-wrap .save-id input[type="checkbox"]:checked + label i {font-weight:bold}

.login-func-wrap .save-id input[type="checkbox"]:checked + label:before {border:3px solid #f12929;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 29 23' style='enable-background:new 0 0 29 23;'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23f12929;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M26.5,2.5l-15,18 M2.5,10.5l9,10'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background-size:13px;}


.login-func-wrap .save-id label {}
.login-func-wrap .btn-login-link {display:inline-flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;}
.login-func-wrap .btn-login-link a {font-size:1.6rem; height:2.2rem; line-height:2.1rem;  font-weight:400; padding:0 10px; position:relative;}
.login-func-wrap .btn-login-link a::before {content:''; display:block; box-sizing:border-box;  width:1px; height:13px; background:#aaa; position:absolute; left:0; top:6px;}
.login-func-wrap .btn-login-link a:first-child::before {content:none;}

/* 회원가입단계*/
.join-step-wrap {display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; width:100%; max-width:480px; position:relative; margin:0 auto;}
.join-step-wrap .join-step {width:100px; text-align:center;  font-weight:600; font-size:1.8rem; overflow:visible; position:relative; padding-top:60px; }
.join-step-wrap .join-step::before {content:''; display:block; box-sizing:border-box;  width:45px; height:45px; border-radius:50%; background:#dadada; position:absolute; left:50%; top:0; margin-left:-22.5px; }
.join-step-wrap .join-step::after {content:''; display:block; width:115px; height:3px; background:#dadada; position:absolute; left:-100%; top:21px;}
.join-step-wrap .join-step:first-child::after {content:none;}
.join-step-wrap .join-step.done::before {background:#f12929 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 29 23' style='enable-background:new 0 0 29 23;'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23ffffff;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M26.5,2.5l-15,18 M2.5,10.5l9,10'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background-size:23px}
.join-step-wrap .join-step.done::after {background:#f12929}
.join-step-wrap .join-step.on::before {background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 29 23' style='enable-background:new 0 0 29 23;'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23f12929;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M26.5,2.5l-15,18 M2.5,10.5l9,10'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background-size:23px; border:5px solid #f12929}
.join-step-wrap .join-step.on::after {background:#f12929 }
.join-step-wrap .join-step .tit {line-height:110%;}

/* 약관동의 */
.join-box-wrap .join-box-tit {font-size:1.9rem; font-weight:600; margin-top:60px; }

.join-box-wrap .join-box-tit:first-child {margin-top:0}
.use-box{ width: 100%; border: 1px solid #dadada; margin: 10px 0 0 0; text-align: center; overflow:hidden; box-sizing:border-box; border-radius:5px}
.scroll-box { padding: 3%; width: 94%; background: #fff; height:190px; text-align: left; font-size:1.6rem; /* font-size:1rem; */ overflow-y: scroll;}
.scroll-box #sub_con h5 {font-size: 1.7rem !important}

.agree-checks {position: relative; background:#444; height:60px; line-height:60px; overflow:hidden; border-radius:5px; text-align:center; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.agree-checks p {display:none;}
.agree-checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0}
.agree-checks input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  display:block;
  width:100%;
  vertical-align:middle;
  font-size:1.7rem; font-weight:600; color:#fff;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; 
 }
.agree-checks input[type="checkbox"] + label i {font-style:normal;}

.agree-checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width:30px;  /* 체크박스의 너비를 지정 */
  height:30px;  /* 체크박스의 높이를 지정 */
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 29 23' style='enable-background:new 0 0 29 23;'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23ffffff;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M26.5,2.5l-15,18 M2.5,10.5l9,10'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center; background-size:18px;
  border:none;
}

.agree-checks input[type="checkbox"]:checked + label {background:#0c82cc;}



/* 회원가입 */
.join-box-wrap {width:100%; max-width:1024px; padding:65px 80px 80px 80px; margin:0 auto; box-sizing:border-box; background:#fff; margin-top:80px;}
.mt-no {margin-top:0 !important;}
.join-item-wrap {width:100%;}
.join-item {width:100%; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; border-bottom:1px solid #efefef; padding:25px 0}
.join-item .tit {width:35%; font-weight:600; font-size:1.8rem}
.join-item .tit .required {color:red;}
.join-item .join-input-wrap {width:65%;}
.join-item .join-input-wrap .join-input {width:100%;}
.join-item .join-input-wrap .join-input input[type=text],
.join-item .join-input-wrap .join-input input[type=password] {width:100%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-input input[type=text]:focus,
.join-item .join-input-wrap .join-input input[type=password]:focus {border:1px solid red; }
.join-item .join-input-wrap .msg {color:#f12929; margin-top:3px; font-size:1.5rem; }
.join-item .join-input-wrap .join-number {width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.join-item .join-input-wrap .join-number select {width:42%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-number span {width:5%; text-align:center}
.join-item .join-input-wrap .join-number input[type=tel] { width:55%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-email {width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.join-item .join-input-wrap .join-email select {width:32%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-email input[type=text]  { width:32%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-email2 {width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.join-item .join-input-wrap .join-email2 span {width:10%; text-align:center;}
.join-item .join-input-wrap .join-email2 input[type=text]  { width:45%; box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem; }
.join-item .join-input-wrap .join-check {width:100%; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;}
.join-item .join-input-wrap .join-check .check-item {margin-left:30px; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;}
.join-item .join-input-wrap .join-check .check-item label {margin-left:8px;}
.join-item .join-input-wrap .join-check .check-item:first-child {margin-left:0; }


.join_address_wrap																	{ display:block; overflow:hidden; }
.join_address_wrap .join_address_f1 input[type=text], .join_address_wrap .join_address_f2 input[type=text] {box-sizing:border-box; border:1px solid #dadada; height:50px; line-height:50px; padding:0 10px; border-radius:5px; font-size:1.6rem;}
.join_address_wrap .join_address_f1 input[type=text]:focus, .join_address_wrap .join_address_f2 input[type=text]:focus {border:1px solid red; }
.join_address_wrap .join_address_f1											{ display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; max-width:200px; }
	.zip_txt																				{ width:calc(50% - 5px); }
	.zip_btn																				{ display:block; overflow:hidden; background:#333; width:calc(50% - 5px); height:50px; line-height:50px; text-align:center; color:#fff;  }
.join_address_f2																		{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.join_address_f2 .join_txt														{ width:100%; margin-top:10px; }


.join-btn-wrap {width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:60px}
.join-btn-wrap input {flex:fit-content; box-sizing:border-box; height:70px; line-height:70px; padding:0 10px; border-radius:5px; font-size:1.8rem; font-weight:600; text-align:center;}
.join-btn-wrap .btn-agree-done {background: #f12929; color: #fff;}


/* 아이디/비번 찾기 */
.join-tab-wrap {width:100%; max-width:1024px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.join-tab-wrap a {width:50%; height:80px; line-height:76px; background:#eaeaea; font-weight:600; font-size:2.2rem; text-align:center; box-sizing:border-box; border-bottom:4px solid #f12929;}
.join-tab-wrap a.on {background:#fff;  line-height:76px; border:4px solid #f12929; border-bottom:0px solid #fff;}

/*------------------------------------------------------------------------------------------------------------*/

/* 작은 PC용 CSS */
@media all and (max-width:1399px){

}
/*------------------------------------------------------------------------------------------------------------*/


/* 태블릿 CSS */
@media all and (max-width:1023px){
/* 로그인 */
.login-box-wrap { max-width:360px; padding:15px 30px 30px 30px; }
.login-item { padding:7px 0}
.login-item .tit { font-size:1.6rem; }
.login-item .login-input-wrap .login-input input[type=text],
.login-item .login-input-wrap .login-input input[type=password] {height:40px; line-height:40px; padding:0 8px; font-size:1.4rem; }
.login-item .login-input-wrap .msg {font-size:1.4rem; }

.login-func-wrap { margin:10px 0;}
.login-func-wrap .save-id input[type="checkbox"] + label {
  font-size:1.5rem; height:2.0rem; line-height:1.9rem;
 }

.login-func-wrap .save-id input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  width:20px;  /* 체크박스의 너비를 지정 */
  height:20px;  /* 체크박스의 높이를 지정 */
  border-radius:50%; 
  background-size:12px;
}

.login-func-wrap .save-id input[type="checkbox"]:checked + label:before {border:2px solid #f12929; background-size:12px;}

.login-func-wrap .save-id label {}
.login-func-wrap .btn-login-link {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; margin:15px 0}
.login-func-wrap .btn-login-link a {font-size:1.4rem; height:2.0rem; line-height:1.9rem;padding:0 7px;}
.login-func-wrap .btn-login-link a::before { height:11px; }



/* 회원가입단계*/
.join-step-wrap .join-step { width:90px; font-size:1.5rem; padding-top:40px; max-width:320px; }
.join-step-wrap .join-step::before { width:30px; height:30px; margin-left:-15px; }
.join-step-wrap .join-step::after {width:105px;  top:13px; left:-100%;}
.join-step-wrap .join-step.done::before {background-size:18px}
.join-step-wrap .join-step.on::before {border:4px solid #f12929; background-size:18px}

/* 회원가입 */
.join-box-wrap {padding:40px; margin-top:60px;}
.join-item .tit {width:25%; }
.join-item .join-input-wrap {width:75%;}

/* 아이디/비번 찾기 */
.join-tab-wrap a {height:70px; line-height:67px; font-size:1.8rem;border-bottom:3px solid #f12929;}
.join-tab-wrap a.on { line-height:67px; border:3px solid #f12929; border-bottom:0px solid #fff;}

}
/*------------------------------------------------------------------------------------------------------------*/


/* 모바일 CSS */
@media all and (max-width:767px){

/* 약관동의 */
.join-box-wrap .join-box-tit {font-size:1.7rem; margin-top:40px; }
.join-box-wrap .join-box-tit:first-child {margin-top:20px}
.scroll-box { height:150px;font-size:1.4rem;}

.agree-checks {height:50px; line-height:50px;}
.agree-checks input[type="checkbox"] + label {
  font-size:1.6rem;
 }

.agree-checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
  width:30px;  /* 체크박스의 너비를 지정 */
  height:25px;  /* 체크박스의 높이를 지정 */
  background-size:17px;
}


/* 회원가입 */
.join-box-wrap {width:92%; padding:10px 30px 30px 30px; margin-top:20px;}
.join-item {width:100%; display:block; padding:20px 0}
.join-item .tit {width:100%; font-size:1.5rem; margin-bottom:5px;}
.join-item .join-input-wrap {width:100%;}
.join-item .join-input-wrap .join-input {width:100%;}
.join-item .join-input-wrap .join-input input[type=text],
.join-item .join-input-wrap .join-input input[type=password] { height:40px; line-height:40px; padding:0 8px; font-size:1.4rem; }
.join-item .join-input-wrap .msg {font-size:1.3rem; }
.join-item .join-input-wrap .join-number select {height:40px; line-height:40px; padding:0 8px; font-size:1.4rem; }
.join-item .join-input-wrap .join-number input[type=tel] { height:40px; line-height:40px; padding:0 8px; font-size:1.4rem;}
.join-item .join-input-wrap .join-email select {height:40px; line-height:40px; padding:0 8px; font-size:1.4rem;}
.join-item .join-input-wrap .join-email input[type=text]  {height:40px; line-height:40px; padding:0 8px; font-size:1.4rem;}
.join-item .join-input-wrap .join-email2 input[type=text]  { height:40px; line-height:40px; padding:0 8px; font-size:1.4rem; }
.join-item .join-input-wrap .join-check .check-item {margin-left:25px;}
.join-item .join-input-wrap .join-check .check-item label {margin-left:5px;}

.join-btn-wrap {margin-top:30px}
.join-btn-wrap input { height:50px; line-height:50px; font-size:1.7rem; }



/* 아이디/비번 찾기 */
.join-tab-wrap {width:92%;  }
.join-tab-wrap a {height:55px; line-height:53px; font-size:1.6rem;border-bottom:2px solid #f12929;}
.join-tab-wrap a.on { line-height:53px; border:2px solid #f12929; border-bottom:0px solid #fff;}


}
/*------------------------------------------------------------------------------------------------------------*/