@charset "UTF-8";

/*수트폰트*/
@font-face {
  font-family: 'SUIT-Thin';
  src: url('fonts/SUIT-Thin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-ExtraLight';
  src: url('fonts/SUIT-ExtraLight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-Light';
  src: url('fonts/SUIT-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-Regular';
  src: url('fonts/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-Medium';
  src: url('fonts/SUIT-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-SemiBold';
  src: url('fonts/SUIT-SemiBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-Bold';
  src: url('fonts/SUIT-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-ExtraBold';
  src: url('fonts/SUIT-ExtraBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'SUIT-Heavy';
  src: url('fonts/SUIT-Heavy.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}


/*스포카 한산네오 숫자만 적용*/
@font-face {
  font-family: 'Spoqa Han Sans Neo_Bold';
  font-weight: 700;
  src: local('Spoqa Han Sans Neo Bold'),
  url('fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
  url('fonts/SpoqaHanSansNeo-Bold.woff') format('woff');
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Spoqa Han Sans Neo_Medium';
  font-weight: 500;
  src: local('Spoqa Han Sans Neo Medium'),
  url('fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
  url('fonts/SpoqaHanSansNeo-Medium.woff') format('woff');
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Spoqa Han Sans Neo_Regular';
  font-weight: 400;
  src: local('Spoqa Han Sans Neo Regular'),
  url('fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
  url('fonts/SpoqaHanSansNeo-Regular.woff') format('woff');
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Spoqa Han Sans Neo_Light';
  font-weight: 300;
  src: local('Spoqa Han Sans Neo Light'),
  url('fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
  url('fonts/SpoqaHanSansNeo-Light.woff') format('woff');
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Spoqa Han Sans Neo_Thin';
  font-weight: 100;
  src: local('Spoqa Han Sans Neo Thin'),
  url('fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
  url('fonts/SpoqaHanSansNeo-Thin.woff') format('woff');
  unicode-range: U+0030-0039;
}

html, body {margin: 0;padding: 0;font-size: 15px;height: 100%;width: 100%;font-family: 'SUIT-SemiBold';font-family: 'SUIT-Medium' , 'Spoqa Han Sans Neo_Regular', 'sans-serif';box-sizing: border-box;line-height: 1.5;color: #2f2f2f;word-break: keep-all;}
div {box-sizing: border-box;}


.login_body{background: #f3f3f3;min-height: 100%;height: 100%;}
.login_bk{display: flex;align-items: center;justify-content: center;background: #f3f3f3; min-height: 100%; padding-top: 50px; padding-bottom: 50px;}
.login_area {margin:0 auto; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 500px; width: 90%; background: #fff; border-radius: 20px; padding: 50px;}
.login_area h2 em {font-size: 1.1rem; width: 100%;text-align: center;font-style: normal; font-weight: 500; display: none;}
.login_area h2 img {margin: 0 auto; width: 266px; display: block;}
.login_area .login_input { width: 100%; margin: 0 auto; padding:0;}
.log_box {margin-top: 20px;}
.log_box label {width: 100%; display: block; margin-bottom: 10px;}
.log_box input:focus {outline: none; border:1px solid #f9c626;}
.log_box input { font-size: 1.1rem; border:1px solid #dfdfdf; padding: 10px; border-radius: 5px; width: 100%; box-sizing: border-box;}
.log_box:nth-child(2) {margin-top: 20px;}
.search_pw,
.login_btn {background: #f9c626; transition: all ease-in 0.3s; border:0; outline: 0; padding: 14px 0; width: 100%; border-radius: 5px; font-size: 1.1rem; color: #fff; cursor: pointer;  font-family: 'SUIT-Bold'; display: block; text-align: center;}
.join_btn {background: #fff; border:1px solid #f9c626;  transition: all ease-in 0.3s; outline: 0; padding: 14px 0; width: 100%; border-radius: 5px; font-size: 1.1rem; color: #f9c626; cursor: pointer; margin-top: 15px;  font-family: 'SUIT-Bold';}
a.join_btn {background: #fff; border:1px solid #f9c626;  transition: all ease-in 0.3s; outline: 0; padding: 14px 0; width: 100%; border-radius: 5px; font-size: 1.1rem; color: #f9c626; cursor: pointer; margin-top: 15px; text-align: center;  font-family: 'SUIT-Bold'; display: block;}
.search_pw:hover,
.search_pw:focus,
.login_btn:hover,
.login_btn:focus {background: #ff9f0f; color: #fff;}
.join_btn:hover,
.join_btn:focus {background: #ff9f0f; border:1px solid #ff9f0f; color:#fff;}
.login_caution {font-size: 0.9rem; padding: 5px 0; width: 100%; color: var(--number-point);}
.login_caution i {color: #ff9f0f;}
.search_infos { margin-top:10px; color: #7c7c7c; display: flex; align-items: center; justify-content: space-between;}
.search_infos a {padding: 5px 10px; display: block; }
.user_search_link:hover, 
.user_search_link:focus {color: var(--button-point-color);}
.id_search_img {display: block; margin: 0 auto 20px; width: 45px;}
.pass_email_pop {color: var(--number-point);}


input.ch_box_login{
  display: none;
}

input.ch_box_login + label{
  display: inline-block;
  position: relative;
  padding-left: 32px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  user-select:none;
  color: #939393;
}
input.ch_box_login + label::after{
  content:'';
  width: 21px;
  height: 21px;
  text-align: center;
  position: absolute;
  left: 0;
  top:10px;
  background: url(/resource/common/img/log_no_save.png)no-repeat center left;
  opacity: 0.5;
}
input.ch_box_login:checked + label::after{
  content:'';
  width: 21px;
  height: 21px;
  text-align: center;
  position: absolute;
  left: 0;
  top:10px;
  background: url(/resource/common/img/log_save.png)no-repeat center left;
  opacity: 1;
}
input.ch_box_login:checked + label {
  color: #636363;
}
.indoor {padding: 6px; border-radius: 30px; border:1px solid #dfdfdf; background: var(--bg-cell-color); margin-right: 10px;}


/*회원가입*/
.join_bk{background: #f3f3f3; min-height: auto;}

.member_area {box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 670px; width: 90%; background: #fff; border-radius: 20px; padding: 50px; margin:0 auto;}
.member_area h2 {text-align: left;}
.member_area h2 em {display: block; text-align: center;}
.member_area h2 img {width: 100px; margin: 0 auto;}
.member_area h3 {border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; margin-top: 20px;}
.member_state_info {max-width: 670px; width: 90%; border-radius: 20px; margin:0 auto;}


.login_input { width: 100%; margin: 0 auto; padding: 15px;}
.join_grp {width: 72%; /*display: flex; align-items: flex-start; justify-content: center;*/ margin-left:28%; padding-top: 100px; padding-bottom: 100px;}
.guide_join {width: 28%; background: url(/resource/common/img/join_layer.png)no-repeat center center; background-size: cover; height: 100%; position: fixed;}
.logist_join {padding: 60px;}
.login_verifi {background: #f9c626; transition: all ease-in 0.3s; border:0; outline: 0; width: 100px;  border-radius: 5px;  color: #fff; cursor: pointer;  font-family: 'SUIT-Bold';}
.login_verifi_define {background: #ff9f0f; transition: all ease-in 0.3s; border:0; outline: 0; width: 100px;  border-radius: 5px; color: #fff; cursor: pointer;  font-family: 'SUIT-Bold';}

.join_box {margin-top: 15px;}
.join_box:first-of-type {margin-top: 0;}
.join_box label {width: 100%; display: block; margin-bottom: 5px;}
.join_box input:focus {outline: none; border:1px solid #f9c626;}
.join_box > select,
.join_box input { font-size: 1.1rem; border:1px solid #dfdfdf; padding: 5px 10px; border-radius: 5px; width: 100%;}
.join_box > select {outline: none; color: #2f2f2f;}
.join_box > select:hover,
.join_box > select:focus {outline: none; border:1px solid #f9c626;}
.button_join {padding: 50px 0 0; text-align: center;}
.button_join > .cal_button {width: 30%; max-width: 300px; min-width: 150px;}
.join_box select.caution_input,
.join_box input.caution_input {border:1px solid #f97030;}
.login_link {text-decoration: underline;}

/*약관동의*/
.all_check_ag {background: #f2f2f2; padding: 10px;}
.ag_text {flex:1; width: 93%;}

.pop_content_ag .text_ul {margin-top: 10px;} /*나중수정*/
.pop_content_ag .text_ul > li { position: relative;  padding-left: 20px; margin-top: 5px; color: #7c7c7c;} /*나중수정*/
.pop_content_ag .text_ul > li::before {content:'-'; position: absolute; left:10px; font-size: 10px; top: 3px;}
.pop_content_ag .text_ul > li.none::before {content:'';}
.pop_content_ag .text_ul > dt { position: relative;  padding-left: 20px; margin-top: 5px; }
.pop_content_ag .text_ul > dt::before {content:'-'; position: absolute; left:10px; font-size: 10px; top: 3px;}
.pop_content_ag .text_ul > dt + dd{ position: relative;  padding-left: 30px; margin-top: 5px; color: #7c7c7c;}
.pop_content_ag .text_inner_ul {padding-left: 20px;} /*나중수정*/
.pop_content_ag .text_pop_p {margin-top: 10px; padding-left: 10px;} /*나중수정*/
.pop_content_ag .agree_txt {margin-top: 10px;}
.pop_content_ag h5:first-of-type {margin-top: 0;}

.table_pop {width: 50%; border-top: 2px solid #dd6c03; margin-top: 10px;}
.table_pop {border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; }
.table_pop tr:nth-child(1) > td {background: #f7f7f7;}
.table_pop td {border:1px solid #dfdfdf; padding: 10px;}
.sutak {text-align: center;}

.pop_grps_w { width: 90%; max-width: 1000px; padding: 0; /*height: 65%;*/ margin-top: -30px;}
.pop_grps_w_sm { width: 90%; max-width: 1000px; padding: 0; min-height: 150px; max-height: 450px; margin-top: -30px;}
.pop_grps_w_md { width: 90%; max-width: 1000px; padding: 0; height: 45%; margin-top: -30px;}
.agree_conents {position: relative; padding-bottom:60px; height:100%; background: #fff; border-radius: 20px;}
.done_conents { position: relative; height: 100%; border-radius: 20px 20px 0 0; background: #fff;}
.define_agree {position: absolute; bottom: 0; width:100%; background: #fff; left:0; padding:10px 10px; text-align: right;} 
.agree_btn {transition: all ease-in .3s; padding: 7px 50px; background: #ff9f0f; color:#fff; display: inline-block; border-radius: 5px; margin-left: 5px; border:none;}
.cancel_btn {transition: all ease-in .3s; padding: 7px 50px; background: var(--button-del-cancel); color:#fff; display: inline-block; border-radius: 5px; margin-left: 5px;}
.agree_btn:hover,
.agree_btn:focus {background: #ff7800; color:#fff;}
.cancel_btn:hover,
.cancel_btn:focus {background: #797979; color:#fff;}

.view_context {padding:3px 5px; background: #fdf5ee; border-radius: 5px; font-size: 0.95rem;}
.view_context:hover {text-decoration: underline;}

.member_state_info {display: flex; align-items: center; margin-bottom: 10px; justify-content: flex-start;}
.member_state_info li {margin-right: 5px;}
.member_state_info li a {transition: all ease-in 0.2s; padding: 10px 20px; display: block; border-radius: 50px; /*background: #fff;*/ }
/* .member_state_info li a.active:hover,
.member_state_info li a:hover {background: #fff; box-shadow: 1px 2px rgba(56, 65, 74, 0.1);} */
.member_state_info li a.active {background: var(--base-button); box-shadow: 1px 2px rgba(56, 65, 74, 0.1);}
.select_member_state {display: flex; align-items: center; justify-content: space-between; padding: 20px 0 0;}
.now_member_state {background: var(--bg-color-lightsky); margin-top: 20px; text-align: center; padding: 10px;}
.now_member_state i {color: var(--);}
.select_member_state > .fx_1 {text-align: center;}

.member_join_area {box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 670px; width: 90%; background: #fff; border-radius: 20px; padding: 50px; margin:0 auto;}
.member_join_area h2 {text-align: left;}
.member_join_area h2 em {display: block; text-align: center;}
.member_join_area h2 img {width: 100px; margin: 0 auto;}
.member_join_area h3 {border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; margin-top: 20px;}



/*user info*/
.user_grp {width: 100%; padding-top: 50px; padding-bottom: 50px;}
.not_modify {width: 100%; border-radius: 5px; background: var(--bg-cell-color); padding: 5px 10px; font-size: inherit;}

/*text 경고문*/
.caution_text {color:#f97030;}
.caution_text.ac_sb p {width: 50%;}
.caution_text.ac_sb p:nth-child(2) {margin-left:10px;}



@media (max-width: 1100px) {
  .guide_join {display: none;}
  .join_grp {width: 100%; margin-left: 0;}
}

@media (max-width: 600px) {
  .join_box > select, .join_box input {
    font-size: 1rem;
  }
}
@media (max-width: 550px) {
  .member_area {padding: 20px; padding-top: 40px;}
  .member_join_area {padding: 20px;}
  .join_grp {padding-top: 50px; padding-bottom: 50px;}
  
}
@media (max-width: 500px) {
  .join_box > .ac_sb {flex-direction: column;}
  .join_box > .ac_sb .mgr5 {margin-right: 0;}
  .join_box > .ac_sb .mgl5 {margin-left: 0; margin-top: 5px;}
  .define_agree { display: flex; align-items: center; justify-content: space-between; gap:5px;}
  .agree_btn {margin-left: 0;}
  .cancel_btn {margin-left: 0;}
  .define_agree > a {width: 49%; text-align: center;}
  .agree_btn, .cancel_btn {padding: 10px 0;}
  .table_pop {width: 100%;}
}
@media (max-width: 450px) {
  .login_area {padding: 30px;}
  .login_area h2 img {width: 180px;}
}
@media (max-width: 400px) {
  .login_input,
  .member_area {padding:10px; padding-top: 20px;}
  .select_member_state > .fx_1 {flex-basis: 100%; text-align: left;}
}