/* ------

파일 전달 전 확인 사항
1) nav-btn에 임시로 붙인 onclick 삭제하기

--------*/






/* -------------------- 
     공통 속성
----------------------*/

.center-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;}

/* @media screen and (max-height: 736px) {
    .center-container { margin-top: 73px; margin-bottom: 85px;}
} */

input[type="checkbox"]  { display: none; }
input[type="file"]  { display: none; }
.textarea-default { width: 100%; height: 269px; border-radius: 12px; border: 1px solid #e4e4e4; padding: 10px;}


.input-wrap { width: 100%;}
.input-default { width: 100%; border: unset; border-bottom: 1px solid #e4e4e4; padding-bottom: 10px; border-radius: 0px;}
.input-default::placeholder { font-size: 18px; font-weight: 600; color: #b8b8b8; }
.input-title { font-size: 13px; font-weight: bold; color: #000; margin-bottom: 10px;}
.input-guide { font-size: 13px; font-weight: 500; color: #f5606a; margin-top: 10px; }
.btn-input-wrap { position: relative;}

.point-txt-blue { color: var(--windows-blue);}


.alert-dot { display: block;  width: 5px; height: 5px; background-color: #ff6b5f; border-radius: 50%; margin-left: 4px;}


/* -------------------- 
     버튼 
----------------------*/


/* 버튼 공통 속성 */

.border-r { border-radius: 17.5px; } 
.btn-default { width: 100%; height: 55px; display: flex; justify-content: center; align-items: center; border-radius: 12px; font-size: 18px; font-weight: bold; color: #fff; }
.btn-bg-407 { background-color: #407cbe; color: #fff; }
.btn-bg-303 { background-color: #303030; }

.next-btn { margin-top: 15px;  margin-bottom: 46px;}


.btn-container { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 24px 34px; background-color: #fff; }
.btn-container .next-btn { margin-bottom: unset;}


.user-chk-btn { font-size: 18px; font-weight: 600; color: var(--windows-blue); }

/* // */




/* 텍스트 체크 박스 */
.text-chk-box .text-check{ display: flex; align-items: center;  gap: 10px; width: fit-content;}
.text-chk-box .text-check .text-chk-icon { font-size: 21px; color: #b8b8b8;  }
.text-chk-box .text-check .text-chk-title { font-size: 18px; font-weight: bold; color: #b8b8b8; }
.text-chk-box .text-check .required-txt { font-size: 18px; font-weight: bold; }
    /* ---- 활성화 */
    .text-chk-box input:checked ~ label .text-chk-icon {  color: #000; }
    .text-chk-box input:checked ~ label .text-chk-title { color: #000; }

/* 버튼 체크 박스 */
.btn-chk-box .btn-check { display: flex; align-items: center;  gap: 10px; border: 2px solid #e4e4e4; border-radius: 12px; padding-left: 25px; height: 50px;}
.btn-chk-box .btn-check .btn-chk-icon { font-size: 21px; color: #b8b8b8;  }
.btn-chk-box .btn-check .btn-chk-title { font-size: 18px; font-weight: bold; color: #b8b8b8; }
    /* ---- 활성화 */
    .btn-chk-box input:checked ~ label {  border-color: var(--windows-blue);}
    .btn-chk-box input:checked ~ label .btn-chk-icon {  color: var(--windows-blue); }
    .btn-chk-box input:checked ~ label .btn-chk-title { color: var(--windows-blue); }

/* // */ 


/* 셀랙트 박스 */
.select-input-wrap .input-title { margin-bottom: 0px;}
.select-input-wrap .select_box { position: relative; width: 100%; height: 39px; border-bottom: solid 1px #e4e4e4;  }
.select-input-wrap .select_box .btn_select { position: relative; display: flex; width: 100%; height: 100%;  align-items: center; justify-content: space-between; z-index: 2; }
.select-input-wrap .select_box .btn_select p { font-size: 18px; font-weight: 600; color: #b8b8b8;line-height: 1;}
.select-input-wrap .select_box .btn_select i { font-size: 18px; color: var(--windows-blue); }

.select-input-wrap .select_box .list_member { display: none; position: absolute; top: 100%; left: 0; padding: 0 20px 0 20px; background-color: #fff; width: 100%; border-radius: 0 0 12px 12px;   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); border: 1px solid #e4e4e4;  z-index: 1; }
.select-input-wrap .select_box .list_member li { display: flex; height: 51px; cursor: pointer; align-items: center; }
.select-input-wrap .select_box .list_member li:not(:last-child) { border-bottom: 1px solid #e4e4e4; }
.select-input-wrap .select_box .list_member li p { font-size: 18px; font-weight: 600; color: #000; }
.select-input-wrap .select_box .list_member li.guide-view p { font-size: 18px; font-weight: 600; color: #b8b8b8; }

.select-input-wrap .select_box.open .btn_select i { transform: rotate(0.5turn); }
.select-input-wrap .select_box.open .list_member { display: block; background-color: #fff; }

/* // */




/* 
  리스트 목록 공통 
  * 참고 : 알림 페이지 기준으로 만들었기때문에 추후 작업 시 컴포넌트 용도가 변경되지 않도록 할 것.
  * 알림, 이용내역 
*/

.list-wrap .list-item { display: block;}
.list-wrap .list-item:not(:first-child) {  margin-top: 30px;}
.list-wrap .item-head { display: flex; justify-content: space-between; }
    .list-wrap .item-head .item-state { display: flex; font-size: 13px;  font-weight: 500; color: #000; }
    .list-wrap .item-day-wrap { display: flex;  gap: 8px;}
    .list-wrap .item-head .item-date,
    .list-wrap .item-head .item-time  { font-size: 13px;  font-weight: 300; color: #000; }
.list-wrap .item-body { display: flex; flex-direction: column; gap: 15px;  border-radius: 12px; background-color: #f5f5f5; border: 1px solid #e4e4e4; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);  padding: 15px; margin-top: 10px; }
.list-wrap .user-chk-btn { position: inherit; font-size: 13px; font-weight: 500; }
.list-wrap .location-title { display: flex;  justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #000;  white-space:nowrap;   overflow:hidden;   text-overflow: ellipsis; }
.list-wrap .location-title .title {  font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #000; white-space:nowrap;   overflow:hidden;   text-overflow: ellipsis; }

.list-wrap .location-title i { font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #000; margin-left: 3px;}
@media screen and (max-width: 768px) {
    /* .list-wrap .location-title .title { max-width: 200px;} */
}

/* 페이지 틀 속성 */

.main {min-height:100vh; background-color: var(--windows-blue);}
.main.subpage { background-color: #fff;}
.main.loginPage { background-color:  #f5f5f5;}


/* 
 result 페이지 공통
*/
.result-container { height: calc( 100vh - 101px);}
.result-title-wrap { display: flex;  flex-direction: column; align-items: center; }
.result-icon-wrap { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--windows-blue);  }
.result-icon { font-size: 35px; color: #fff;  font-weight: bold;}
.result-title { font-size: 25px; font-weight: bold; color: #000;  margin-top: 10px; }
.result-sub { font-size: 18px; line-height: 1.44; color: #000; text-align: center; margin-top: 40px; }

/* // */







/******************** 회원가입페이지 join ***********************/
.join-logo-wrap { max-width: 260px; margin: 0 auto; }
.join-title-wrap { margin: 40px auto 0; font-size: 25px; font-weight: 600; line-height: 1.4; max-width: 228px; text-align: center; color: #222; }
.join-btn-wrap { display: flex; gap: 20px; width: fit-content; margin: 147px auto 0; }
.join-btn-wrap .join-btn { display: flex; max-width: 56px;}
.join-email-btn { display: flex; align-items: center; margin-top: 30px;  }
.join-email-btn .email-btn-title { font-size: 18px; font-weight: bold; color: #000; }
.join-email-btn .email-btn-icon { font-size: 18px; font-weight: bold; color: #000; margin-left: 5px;}
@media screen and (max-height: 741px) {
    .join-title-wrap { margin: 20px auto 0; } 
    .join-logo-wrap { margin-top: 73px; }
    .join-btn-wrap { margin: 64px auto 0; }
    .join-email-btn  { margin-bottom: 85px;}
}
@media screen and (max-height: 569px) {
    .join-logo-wrap { max-width: 180px; } 
    .join-title-wrap { margin: 10px auto 0; font-size: 20px; } 
    .join-logo-wrap { margin-top: 30px; }
    .join-btn-wrap { margin: 34px auto 0; gap: 10px; }
}




/******************** 이용약관동의 policy ***********************/
.privacy-wrap { padding-top: 30px; }
.policy-wrap .policy-content-box { width: 100%; border-radius: 12px; background-color: #e4e4e4; height: 160px; overflow-y: scroll; padding: 15px; margin-top: 15px; }
.policy-wrap .policy-content { font-size: 10px; font-weight: 500; color: #000; line-height: 1.5; }
.policy-btn { margin-top: 124px;  }
@media screen and (max-height: 741px) {
    .policy-btn { margin-top: 52px; }
}
@media screen and (max-height: 569px) {
   
}


/******************** 기본정보 입력 basicInformation  ***********************/
.email-input-wrap { margin-bottom: 40px; }
.user-chk-btn { position: absolute; bottom: 10px; right: 0;}
.pwd-input-wrap { margin-bottom: 25px; }

/******************** 추가정보 입력 additionalInformation  ***********************/
.profile-wrap .profile-box { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; }
.profile-wrap .profile-img-box {  position: relative;    }
.profile-wrap .profile-img-box .profile-img-wrap { width: 100px; height: 100px; border-radius: 50%; background-color: #e4e4e4; border: 2px solid #e4e4e4; overflow: hidden; }
.profile-wrap .profile-img-box .profile-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-wrap .add-img-btn { position: absolute;  top: 0; right: 0;  display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--windows-blue); background-color: #fff; cursor: pointer; }
.profile-wrap .add-img-btn .add-btn-icon { font-size: 23px; color: var(--windows-blue); }
.nick-input-wrap { margin-bottom: 40px; }
.zipcode-input-wrap { margin-bottom: 20px; }
.adress-input-wrap { margin-bottom: 40px; }
.tel-input-wrap { margin-bottom: 40px; }
.number-input-wrap { margin-bottom: 20px; }


/******************** 로그인 login  ***********************/
.loginPage {  background-color: #f5f5f5;  }
.login-container { margin-top: unset; margin-bottom: unset; padding-top: 43px;}
.login-container .input-default { background-color:  #f5f5f5;}
.login-logo-wrap { max-width: 80px; }
.login-title-wrap { margin-top: 40px; font-size: 25px; font-weight: bold; color: #000; line-height: 1.4; }
.login-email-btn { justify-content: center;}
.login-container .email-input-wrap { margin-top: 40px; }
.login-container .login-btn { margin-top: 25px;  }
.login-container .join-email-btn { margin-bottom: unset; padding-bottom: 56px;}
.login-container .join-btn-wrap { margin-top: 150px; }


/******************** 비밀번호 변경 setPwd  ***********************/
.btm-25 { margin-bottom: 25px;}


/******************** 비밀번호 변경완료 resultSetPwd  ***********************/
.result-sub.setPwd { font-size: 13px; line-height: 1.54; margin-top: 25px; }



/******************** 공지사항/이벤트 notice ***********************/
.notice-list-wrap { }
.notice-list-wrap .list-item { display: block;}
.notice-list-wrap .list-item:not(:first-child) {  margin-top: 30px;}
.notice-list-wrap .item-img-wrap { position: relative;  border-radius: 8px; border: 1px solid #e4e4e4;  overflow: hidden; }
.notice-list-wrap .item-img-wrap::before {  content: ''; display: block;  padding-top: 60.7%; }
.notice-list-wrap .item-img-wrap img { width: 100%; height: 100%;  position: absolute;  top: 0; left: 0; object-fit: cover;  object-position: center; }
.notice-list-wrap .item-content { margin-top: 15px; }
.notice-list-wrap .item-title { font-size: 13px; font-weight: 500; color: #000; }
.notice-list-wrap .item-sub { display: block; font-size: 13px; color: #000; opacity: 0.5; letter-spacing: -0.33px;   white-space:nowrap;     overflow:hidden;   text-overflow: ellipsis; }


/******************** 공지사항, 이벤트 디테일 페이지 postDetail ***********************/
.post-container { padding: 0; margin-top: 80px; margin-bottom: unset; }
.post-content-container { margin-top: unset; font-size: 13px; line-height: 1.54; color: #000; }
.post-content-container p { font-size: 13px; line-height: 1.54; color: #000; }
.post-top-img { margin-bottom: 30px; }



/******************** 알림 목록 notification ***********************/
.nontification-list-wrap { }
.nontification-list-wrap .item-body-top { display: flex; justify-content: space-between; align-items: center; }
.nontification-list-wrap .item-body-btm { display: flex; justify-content: space-between; align-items: center; }
.nontification-list-wrap .state-guide { font-size: 10px; line-height: 1.5; letter-spacing: -0.25px; color: #68696b;}
.nontification-list-wrap .serial-number-wrap { text-align: right;}
.nontification-list-wrap .serial-title { font-size: 10px; line-height: 1.5; color: #000; font-weight: 300; }
.nontification-list-wrap .serial-number { font-size: 10px; line-height: 1.5; color: #000; font-weight: 600; }
.nontification-list-wrap .location-title { max-width: 195px;}

 

/******************** 예약취소 cancelReservation ***********************/
.cancel-title-wrap { text-align: center; line-height: 1.4; }
.cancel-result-sub { font-size: 13px; font-weight: 500; letter-spacing: -0.33px; }
.reservation-wrap { display: flex; }
.reservation-wrap .title,  
.reservation-wrap .reservation-day { font-size: 13px; font-weight: 300; color: #000; margin-top: 6px; }



/******************** 고장신고 reportBreakdown ***********************/




/******************** 고객센터 customerCenter ***********************/
/* -- 공통요소 */
.coustomer-container .title { font-size: 13px;  line-height: 1; }
.coustomer-container .sub { font-size: 10px; color: #68696b; line-height: 1; }
.coustomer-container .info-sub { font-size: 10px; line-height: 1; }
.coustomer-container .complete-txt { font-weight: 600; color: var(--windows-blue);  }
.customer-inquriy-item .inquriy-detail { color: #202020; letter-spacing: -0.25px; line-height: 1.5; margin-top: 10px; }
/* // */

.coustomer-container .content-head { padding-bottom: 10px; border-bottom: 1px solid #202020;}
.coustomer-container .content-head .title { font-weight: 500; letter-spacing: -0.33px; }
.coustomer-container .tell-num { font-size: 18px; font-weight: 600; color: #202020; line-height: 1; margin-top: 5px;}
.coustomer-container .title.info-title { font-weight: 300;}
.coustomer-container .center-info-wrap { margin-top: 10px; }
.coustomer-container .center-info-wrap .sub { margin-top: 5px; }
.coustomer-container .content-btm-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 10px;  }
.coustomer-container .user-chk-btn { position: inherit;  font-size: 18px; font-weight: 600; }
 
    /* -- 질문 */
    .customer-inquriy-item { margin-top: 30px;}
    .customer-inquriy-item .inquriy-wrap { padding-bottom: 30px;  border-bottom: 1px solid #e4e4e4;}
    .customer-inquriy-item .inquriy-wrap:not(:first-child) { padding-top: 30px;}
    .customer-inquriy-item .inquriy-head { display: flex; }
    .customer-inquriy-item .inquriy-head .title { font-weight: 500; margin-right: 7px; }
    .customer-inquriy-item .question-sort { display: flex; margin-top: 10px; }
    .customer-inquriy-item .question-title { font-weight: 500; letter-spacing: -0.33px; margin-top: 10px; }
    .customer-inquriy-item .write-date { letter-spacing: -0.25px;  color: #68696b; opacity: 0.6;  margin-top: 10px; } 



/******************** 문의작성 inquriyWrite ***********************/
.history-list-wrap .title { font-size: 13px; }
.history-list-wrap .sub { font-size: 10px; color: #68696b; letter-spacing: -0.25px; }

.history-list-wrap .item-body { flex-direction: inherit; justify-content: space-between; gap: 5px; }
.history-list-wrap .station-item .item-body { flex-direction: column; }

.history-list-wrap .ticket-price-wrap { display: flex; align-items: center; gap: 3px; }
.history-list-wrap .ticket-state-wrap { display: flex; }



/******************** 이용권 구매 ticketRecharge ***********************/


.blue-container { position: relative; max-width: 1024px; margin: 80px auto 0; } 
.blue-container .blue-box { position: relative; display: flex; align-items: center;  height: 158px; background-color: var(--windows-blue); padding: 0 25px; }
.blue-container .blue-box .blue-box-icon { position: absolute; top: 10%;  right: 25px; transform: translate(-50%,-50px); font-size: 151px; color: #fff; opacity: 0.4;     transform: rotate(16deg);}
.blue-container .blue-box .title { display: flex; align-items: center; font-size: 13px; font-weight: 300; letter-spacing: -0.33px; line-height: 1; color: #fff;}
.blue-container .blue-box .user-name { font-size: 13px; font-weight: 300; letter-spacing: -0.33px; color: #fff; line-height: 1;}
.blue-container .blue-box .ticket-num { font-size: 25px; font-weight: bold; color: #fff; line-height: 1; margin-top: 6px; }

.blue-list-container { position: absolute; top: 130px; margin-top: 0;  padding-bottom: 150px;}
.recharge-list-wrap { }
.recharge-list-wrap .list-item { display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 24px; border-radius: 12px; background-color: #fff; border: 1px solid #e4e4e4;   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);   }
.recharge-list-wrap .list-item:not(:first-child) { margin-top: 12px; }
.recharge-list-wrap .list-item.active  { border-color: var(--windows-blue); border-width: 2px;}
.recharge-list-wrap .list-title-wrap { display: flex; justify-content: space-between; }
.recharge-list-wrap .list-item .title { font-size: 16px; font-weight: bold; }
.recharge-list-wrap .best-list-item .list-title { color: var(--windows-blue); margin-right: 12px; }


/******************** 회원 등급 memberLevel ***********************/
.blue-list-container.level { top: 105px; }
.blue-container .level-blue-box { height: 130px;}
.level-blue-box .title-wrap { display: flex; justify-content: space-between; width: 100%; }
.level-blue-box .myLevel-txt { font-size: 25px; font-weight: bold; color: #fff; margin-right: 11px; }
.level-list-wrap .list-item { display: flex; justify-content: space-between; align-items: center; height: 72px; padding: 0 24px; border-radius: 12px; background-color: #fff; border: 1px solid #e4e4e4;   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);   }
.level-list-wrap .list-item:not(:first-child) { margin-top: 12px; }
.level-list-wrap .list-title-wrap { display: flex; justify-content: space-between; }
.level-list-wrap .list-item .title { font-size: 16px; font-weight: bold; }
.level-list-wrap .level-info-wrap { text-align: right;}
.level-list-wrap .info-title { font-size: 13px; font-weight: bold; color: #15191c; }
.level-list-wrap .info-sub { font-size: 10px;  color: #68696b; letter-spacing: -0.25px; line-height: 1; }

.level-list-wrap .guide-list-item {  background-color: #f5f5f5; border: none; flex-direction: column; height: unset; align-items: start; padding: 20px 24px; gap: 8px; box-shadow: unset;  }
.level-list-wrap .guide-list-item .guide-info-wrap { display: flex; gap: 12px; align-items: center;}
.level-list-wrap .guide-list-item .title { font-size: 13px; letter-spacing: -0.33px; font-weight: bold;}
.level-list-wrap .guide-list-item .info-sub { font-size: 13px; letter-spacing: -0.33px; font-weight: 500; color: #000; margin-top: 0;}
.level-list-wrap .guide-list-item .guide-detail {  font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: -0.25px; color: #000; opacity: 0.6;   }


/******************** 예약완료  resultReservation ***********************/
.resultReservation-container { height: calc( 100vh - 80px); }
.resultReservation-container .reservation-wrap .title, 
.reservation-wrap .reservation-day { color: #68696b; font-weight: inherit;}

.resultReservation-container .result-sub { margin-top: 0;}
.resultReservation-container .complete-guide-wrap { text-align: center; margin-top: 60px; }
.resultReservation-container .complete-title { font-size: 13px; font-weight: 600; letter-spacing: -0.33px; color: #303030;}
.resultReservation-container .complete-sub { font-size: 13px; font-weight: 300; letter-spacing: -0.33px; color: #303030;}
.resultReservation-container .complete-title.btm { margin-top: 10px;}





/******************** 메인페이지 index ***********************/
/* --blue 컨테이너 */
.main-blue-container { position: relative; margin-top: 0;  }
.main-blue-container .blue-box { height: 120px; z-index: 1; max-width: 900px;  margin: 0 auto;}
.main-blue-container .title-wrap { width: 100%; display: flex; flex-direction: column; justify-content: center;    background-image: url(../images/ebox-main.png); background-size: contain; background-repeat: no-repeat; height: 77px; padding-left: 71px; padding-top: 20px;}
.main-blue-container .title-wrap .title { width: fit-content; font-weight: normal; letter-spacing: unset;  }
.main-blue-container .title-wrap .location-title { display: flex;  width: fit-content; margin-top: 5px; }
.main-blue-container .location-title .title { font-size: 13px;  font-weight: 500; letter-spacing: -0.33px;  color: #fff; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }
.main-blue-container .location-title i { font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #fff;  margin-left: 3px; }
.main-blue-container .alarm-wrap { position: absolute; right: 0; transform: translateX(-14px); top: 9px;}
.main-blue-container .alarm-img-wrap { position: relative;}
.main-blue-container .alarm-bell-img { max-width: 33px;}
.main-blue-container .alarm-img-wrap .alert-dot { position: absolute; top: 5px; right: 5px; }

/* -- 메인 컨테이너 */
.main-contents { z-index: 2; position: relative; width: 100%; background-color: #fff; border-radius: 12px 12px 0 0; margin-top: 5px; }
.main-container { margin-top: 0; position: relative;  padding: 30px 14px 0; }
.main-container.top { margin-bottom: unset;}
.main-container.btm { padding-top: unset; margin-bottom: 100px;}

/* -- 검색 박스 */
.search-section { position: absolute; top: -25px; width: 90%; min-width: 347px; left: 50%; transform: translateX(-50%); }
.search-section .input-default { padding-bottom: unset; height: 55px; border-radius: 12px; border: 3px solid var(--windows-blue); padding: 0 20px; }


/* 0918수정 */

/* -- 이용횟수 박스 */
.main-container .user-ticket-section { border-radius: 12px; background-color: #fff; border: 1px solid #e4e4e4; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); margin-top: 15px; padding: 18px 20px 12px; }

.user-ticket-section .top-wrap { display: flex; align-items: center; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid #eee; border-radius: #eee; }
.user-ticket-section .top-wrap .title { font-size: 16px; font-weight: bold;  color: #000; }
.user-ticket-section .top-wrap .state-title {   color: #15191c; }
.user-ticket-section .btm-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.user-ticket-section .btm-wrap .state-title { font-weight: bold; margin-left: 1px; letter-spacing: -0.33px;}
.user-ticket-section .button { width: 100%; display: flex; align-items: center; border-radius: 14px; height: 28px;  }
.user-ticket-section .ticket-state-zone { min-width: 120px;  display: flex;  font-size: 13px; font-weight: 500; color: #15191c; letter-spacing: -0.33px; }
.user-ticket-section .ticket-state-zone p { font-size: 13px; font-weight: 500; color: #15191c; letter-spacing: -0.33px;  } 
.user-ticket-section .btn-wrap { display: flex; gap: 5px; }
.user-ticket-section .history-btn  {  min-width: 62px;     max-width: 200px;   justify-content: center; background-color: #303030; font-size: 12px; font-weight: 500; color: #fff; letter-spacing: -0.3px; }
.user-ticket-section .charge-btn  {  min-width: 47px;     max-width: 200px; justify-content: center; background-color: var(--windows-blue); font-size: 12px; font-weight: 500; color: #fff; letter-spacing: -0.3px; }
/* // 0918수정  */


/* -- event-slide-section */
.event-slide-section { margin-top: 15px; position: relative; }
.event-slide-section .eventSwiper { border-radius: 12px; overflow: hidden; }
.event-slide-section .swiper-slide { position: relative; border-radius: 12px; overflow: hidden; }
.event-slide-section .swiper-slide::before {  content: ''; display: block;  padding-top: 42.7%; }
.event-slide-section .swiper-slide img { width: 100%; height: 100%;  position: absolute;  top: 0; left: 0; object-fit: cover;  object-position: center; }
.event-slide-section .swiper-pagination { position: absolute; left: 20px; bottom: 12px;  width: fit-content; font-size: 10px; font-weight: 300; color: #000; opacity: 0.6; }
.event-slide-section .swiper-pagination-current { font-weight: 600; }

/* -- notice-slide-section  */
.notice-slide-section { margin-left: 14px; margin-top: 20px; }
.notice-slide-section .section-title { font-size: 18px; font-weight: bold; color: #000; }
.notice-slide-section .noticeSwiper { margin-top: 15px; }
.notice-slide-section .noticeSwiper .swiper-slide { display: flex; flex-direction: column; max-width: 282px;}
.notice-slide-section .noticeSwiper .img-wrap{ position: relative;  border-radius: 6px; overflow: hidden;  }
.notice-slide-section .noticeSwiper .img-wrap::before {  content: ''; display: block;  padding-top: 59%; }
.notice-slide-section .noticeSwiper .img-wrap img { width: 100%; height: 100%;  position: absolute;  top: 0; left: 0; object-fit: cover;  object-position: center; }
.notice-slide-section .slide-content { margin-top: 15px; }
.notice-slide-section .notice-title { font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #000; }
.notice-slide-section .notice-sub { font-size: 13px; letter-spacing: -0.33px; color: #000; opacity: 0.5; }

/* -- banner-slide-section */
.banner-slide-section { margin-top: 20px; }
.banner-slide-section .bannerSwiper { position: relative; width: 100%; border-radius: 12px; overflow: hidden; }
.banner-slide-section .bannerSwiper .swiper-slide { position: relative;  border-radius: 6px; overflow: hidden;  }
.banner-slide-section .bannerSwiper .swiper-slide::before {  content: ''; display: block;  padding-top: 16%; }
.banner-slide-section .bannerSwiper .swiper-slide img { width: 100%; height: 100%;  position: absolute;  top: 0; left: 0; object-fit: cover;  object-position: center; }
.banner-slide-section .bannerSwiper .swiper-pagination { position: absolute; top:2px; left: unset; right: 10px;  width: fit-content;  height: fit-content;}
.banner-slide-section .bannerSwiper .swiper-pagination-bullet { width: 5px; height: 5px; margin: 0 2.5px;  background-color: #68696b; opacity: unset; }
.banner-slide-section .bannerSwiper .swiper-pagination-bullet-active {  background-color: var(--windows-blue); }




/******************** 마이페이지 mypage ***********************/
.myPage .myPage-blue-box { align-items: inherit; }
.myPage .myPage-heade-wrap { position: absolute; display: flex; justify-content: end; top: 9px; left: 0;  background-color: #fff; width: 110px; height: 33px;  padding: 0 18px 0 14px; border-radius: 0 16.5px 16.5px 0 ;}
.myPage .myPage-heade-wrap img { max-width: 77px; }
.myPage .main-blue-container .title-wrap { background-image: unset; }
.myPage .main-blue-container .blue-box { height: 336px; }
.myPage .main-container .user-ticket-section { margin-top: unset; }
.myPage .main-container { padding-top: unset; position: relative; top: -44px; z-index: 2; margin-bottom: 50px; }
.myPage .main-contents { position:unset;  border-radius: unset;  margin-top: unset; }
.myPage .myPage-main-wrap { width: 100%;}
.myPage .btn-wrap { display: flex; justify-content:end; margin-top: 60px;  }
.myPage .logout-btn { font-size: 13px; color: #fff; }
.myPage .main-title-wrap { display: flex; align-items: center; gap: 24px; margin-top: 12px;  }
.myPage .user-img-wrap {  position: relative;  width: 100px; height: 100px; border-radius: 50%; border: 2px solid #e4e4e4;  overflow: hidden;  }
.myPage .user-img-wrap::before {  content: ''; display: block;  padding-top: 100%; }
.myPage .user-img-wrap img { width: 100%; height: 100%;  position: absolute;  top: 0; left: 0; object-fit: cover;  object-position: center; }
.myPage .user-info-wrap { font-size: 18px; font-weight: bold; line-height: 1.28; color: #fff; }
.myPage .user-info-wrap .title { display: inline; font-size: 18px; font-weight: bold; line-height: 1.28; color: #fff; }
.myPage .level-wrap { display: flex; justify-content: space-between; margin-top: 73px; }
.myPage .level-title-wrap { display: flex; gap: 10px; align-items: center; }
.myPage .level-title-wrap .user-level {  font-size: 16px; font-weight: bold; color: #fff; }
.myPage .level-guide-btn { width: 100%; max-width: 84px; height: 24px; display: flex; justify-content: center; align-items: center;  background-color: #fff; border-radius: 12.5px; border: 1px solid #e4e4e4; font-size: 13px; font-weight: 500; letter-spacing: -0.33px; color: #000; }
.myPage .user-ticket-section .ticket-state-zone { max-width: 240px; }
/* 0918수정 */
.myPage .user-ticket-section .charge-btn { max-width: 47px; }
/* //0918수정 */
.myPage .user-often-section { display: flex;  align-items: center; margin-top: 15px; }
.myPage .user-often-section > .title { font-size: 13px; color: #222222;}
.myPage .user-often-section .divi-icon { font-size: 13px; color: #222222; margin-left: 10px; }
.myPage .user-often-section .location-title { display: flex;  align-items: center;  margin-left: 10px; }
.myPage .user-often-section .location-title .title { max-width: 190px; color: #222222;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myPage .user-often-section .location-title .angle-icon { color: #222222; }

.myPage .myPage-menu-section {  margin-top: 31px; display: flex; flex-direction: column;}
.myPage .myPage-menu-section .menu-item { padding: 14px 0 15px; font-size: 13px; font-weight: 500; color: #000;  border-bottom: 1px solid #e4e4e4; }
.myPage .myPage-menu-section .menu-item.top { border-top: 2px solid #303030; }






/* station 공통속성 */
#map { width: 100%; height: 100%; }
.map-container { position: relative; margin-top: 0;  margin-bottom: unset; height: calc( 100vh - 80px);   padding: unset; }
.map-container {height:calc( ( var(--vh, 1vh) * 100) - 80px)}
.map-container .station-btn { position: absolute; display: flex; justify-content: center; align-items: center; width: 35px; height: 35px;  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);  background-color: #fff; border-radius: 12px;  }
.map-container .station-btn .list-icon {  font-size: 20px; }

/* // */
    /* -- 리스트 버튼 */
    .map-container .station-list-btn {  top: 70px; right: 14px; }
    .map-container .station-list-btn .station-icon-img {  max-width: 20px; }

    /* -- 현재 위치 버튼 */
    .map-container .current-location-btn {  bottom: 82px; right: 14px; }
    .map-container .current-location-btn .station-icon-img {  max-width: 19px; }

    /* -- 자주 이용 위치 */
    .map-container  .user-often-section.station-btn { width: 100%;  max-width: 347px; justify-content: start;  padding-left: 16px; }
    .map-container  .user-often-section { position: fixed; bottom: 86px;  left: 50%; transform: translate(-50%, -50%); display: flex;  align-items: center; margin-top: 15px; }
    .map-container  .user-often-section > .title { font-size: 13px; color: #222222;}
    .map-container  .user-often-section .divi-icon { font-size: 13px; color: #222222; margin-left: 10px; }
    .map-container  .user-often-section .location-title { display: flex;  align-items: center;  margin-left: 10px; }
    .map-container  .user-often-section .location-title .title { max-width: 190px; font-size: 13px; color: #222222; font-weight: 600;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .map-container  .user-often-section .location-title .angle-icon { font-size: 13px; color: #222222; }


 /* stationList 스테이션 리스트 */
 .station-list-container { margin-top: 60px; margin-bottom: 100px; }
 .station-list-container .station-list-wrap { }
 .station-list-wrap .station-item { display: flex; justify-content: space-between; padding: 15px 0 16px; border-bottom:  1px solid #eee; }
 .station-list-wrap .station-info .state-mark {  width: 7px; height: 7px; margin-right: 5px; border-radius: 50%;  }
    /* -- 상태마크 활성화 */
    .station-info .state-mark.greenMark { background-color: #12a407; } 
    .station-info .state-mark.redMark { background-color: red } 
    .station-info .state-mark.blueMark { background-color: rgb(0, 128, 255); } 

 .station-list-wrap .station-info .top-wrap { display: flex; align-items: center;  }
    .station-list-wrap .station-info .station-address { font-size: 13px; font-weight: bold; letter-spacing: -0.33px; color: #000; line-height: 1;  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .station-list-wrap .station-info .btm-wrap { display: flex; margin-top: 5px; align-items: center; }
 .station-list-wrap .station-info .state-wrap { display: flex; align-items: center; line-height: 1; }
 .station-list-wrap .station-info .state-wrap:not(:last-child) { padding-right: 5px; border-right: 1px solid #68696b; }
 .station-list-wrap .station-info .state-wrap:not(:first-child) { padding-left: 5px; }
    .station-list-wrap .station-info  .state-wrap .title { font-size: 10px;  letter-spacing: -0.25px;   color: #68696b; line-height: 1;}
    .station-list-wrap .station-info  .state-wrap .bold-title { color: #222222;  }
    .station-list-wrap .station-info  .state-wrap .state-num { margin-left: 5px; line-height: 1;}
    .station-list-wrap .station-distance { font-size: 13px;  letter-spacing: -0.33px;   color: var(--windows-blue); line-height: 1;}



/* 마커 클릭한 곳 */
.summary-container.active .station-detail-wrap { display: none; }


 /* 지도 마크 터치 시 나오는 탭 */
 .summary-container { display: none; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 9999; padding: 15px 14px; background-color: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.08);  }
 .summary-container.open { display: block;  }

 .summary-container .btn-wrap { display: flex; gap: 10px; }
 .summary-container .btn-default { border-radius: 17.5px; height: 35px; font-size: 12px; font-weight: 500; letter-spacing: -0.3px; }
 .summary-container .station-list-wrap .station-item { border-bottom:  unset;}
 .summary-container .serialNumber-btn { background-color: #68696b;}
 .summary-container .ebox-zone { display: none;}
 .summary-container img { max-width: 151px;}

 /* 11월 수정 - 추가 */
 .summary-container .station-detail-wrap { display: none; flex-direction: column; width: 100%; }
 .summary-container .btn-bg-407 { width: 35px; height: 35px; min-width: 35px;  border-radius: 50%; }
 .summary-container .btn-bg-407 i { font-size: 18px; color: #fff; transform: rotate(-5deg); padding-bottom: -5px; margin-left: -2px;}

 .serialnumber-wrap { margin-top: 40px; width: 100%; }
 .serialnumber-wrap .time-wrap { display: flex; align-items: center; gap: 5px;}
 .serialnumber-wrap .time-txt { font-size: 13px; font-weight: 300; letter-spacing: -0.33px; color: #303030;}
 .serialnumber-wrap #timer { font-weight: 600;}
 .serialnumber-wrap .serial-view-wrap { margin-top: 12px; width: 100%; height: 80px; border-radius: 40px; display: flex; justify-content: center; align-items: center; background-color: #d9e6fc; font-size: 30px; font-weight: bold;  color: #000;}
  .serialnumber-wrap .serial-view-wrap .serial-txt { font-size: 30px; font-weight: bold; color: #000;}
 /* // */

 .summary-container .detail-top { position: relative; width: 100%; }
 .summary-container .location-title { font-size: 20px; font-weight: 500; letter-spacing: -0.5px; color: #000; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .summary-container .detail-info { display: flex; }
 .summary-container .detail-info.top { gap: 11px; margin-top: 5px; }
 .summary-container .detail-info  .title { font-size: 13px; letter-spacing: -0.32px; color: #68696b;  line-height: 1;}
 .summary-container .detail-info  .state-content { font-size: 13px; font-weight: 600; letter-spacing: -0.33px; color: #202020;  line-height: 1;}
 .summary-container .detail-info  .sub { font-size: 13px; letter-spacing: -0.33px; color: var(--windows-blue);  line-height: 1;}
 .summary-container .detail-info.btm { gap: 8px; margin-top: 5px;  }
 .summary-container .detail-info .state-content  { font-weight: 600; line-height: 1; }
 .summary-container .detail-info .station-distance  { padding-left: 10px; border-left: 1px solid #e4e4e4; line-height: 1 ;}

 .summary-container .report-btn { position: absolute; right: 0; bottom: 0;  display: flex; align-items: center; gap: 5px; }
 .summary-container .report-btn .title {  font-size: 13px; font-weight: 600; letter-spacing: -0.33px; color: #202020; line-height: 1; }
 .summary-container .report-btn .angle-icon {  font-size: 13px; font-weight: 600; letter-spacing: -0.33px; color: #202020; line-height: 1; }

 .summary-container .detail-state { display: flex; gap: 8px; }


 /* -- status-board 숫자 상태  */
 .summary-container .status-board { margin-top: 15px;  padding: 10px 0; display: flex; justify-content: space-around; border-radius: 8px; border: 1px solid #e4e4e4;  }
 .summary-container .status-board .board-item { display: flex; flex-direction: column;  align-items: center; }
 .summary-container .status-board .mid-item { position: relative; }
 .summary-container .status-board .mid-item:after { position: absolute; display: block; content: ""; width: 1px; height: 100%; background-color: #e4e4e4; left: -19px; }
 .summary-container .status-board .mid-item:before{ position: absolute; display: block; content: ""; width: 1px; height: 100%; background-color: #e4e4e4; right: -19px; }
 .summary-container .status-board .board-title { font-size: 13px; font-weight: 500; letter-spacing: -0.33px; }
 .summary-container .status-board .board-count { font-size: 20px; font-weight: 500; letter-spacing: -0.5px; }


/* -- machine-board 기계 퍼센트 보드*/
 .summary-container .machine-board { display: flex; gap: 19px; justify-content: space-between;  margin-top: 11px; padding-bottom: 14px; border-bottom: 1px solid #eee; margin-bottom: 10px; }
 .summary-container .machine-img-wrap { width: calc(100% - 19px - 171px ); }
 .summary-container .charge-item-wrap { display: flex; gap: 7px; flex-wrap: wrap; width: calc(100% - 19px - 151px);}
 .summary-container .charge-item { position: relative; width: calc((100% - (7px * 1)) / 2 ); max-width: 82px; height: 83px; background-color: #222; border-radius: 12px; border: 4px solid #41413f; padding: 6px; overflow: hidden; }
 .summary-container .charge-item .charge-box-num { width: fit-content; font-size: 12px; font-weight: 500; color: #fff;  z-index: 2; position: relative;}
 .summary-container .charge-item .charge-state { width: fit-content; position: relative; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.8px;  z-index: 2; position: relative; }

 /* ------ 충전 퍼센트 기본 속성 */
       .summary-container .charge-item .charge-bar { position: absolute; left: 0; bottom: 0; width: 100%; background-color: var(--windows-blue); }
       .summary-container .charge-item.available-item .charge-bar  { background-color: #FF9A03; }
       .summary-container .charge-item.reservation-item .charge-bar  { background-color: green; }


/* -- 탭이 위로 올라올 때 클래스 open 추가 */
    .summary-container.open { max-height: unset;  bottom: 0; }

    .summary-container.open .ebox-zone { display: flex;}
    .summary-container.open .station-detail-wrap  { display:flex; background-color: #fff; }
    .summary-container.open .btn-wrap { }
    @media screen and (max-height: 641px) {
        /* .summary-container.open { top: 90%;  } */

    }




/* 예약확인 페이지 stepReservation */
.reservation-container { height: calc(100vh - 50px); align-items: start; padding: 0 27px;}
.reservation-title-wrap { align-items: start; }
.reservation-title-wrap .location-title { font-size: 18px; font-weight: 500; letter-spacing: -0.45px; color: #000; }
.reservation-container .guide-wrap { }
.reservation-container .guide-wrap.top { margin-top: 40px; margin-bottom: 10px; }

.reservation-container .guide-title {  font-size: 13px; font-weight: 600; letter-spacing: -0.33px; color: #303030; }
.reservation-container .guide-sub {  font-size: 13px; font-weight: 300; letter-spacing: -0.33px; color: #303030; }
.reservation-container .btn-container { display: flex; gap: 7px; }
.reservation-container .btn-default { height: 35px; border-radius: 17.5px; font-size: 12px; font-weight: 500; letter-spacing: -0.3px;  }

/* 예약완료 페이지 completeReservation */
.complete-container { height: calc(100vh - 50px); }
.complete-container .location-title { font-size: 18px; font-weight: 500; letter-spacing: -0.45px;  }
.complete-container .title { font-size: 13px; letter-spacing: -0.33px; color: #68696b; }
.complete-container .reservation-time-wrap { display: flex; }
.complete-container .guide-wrap { text-align: center;}
.complete-container .guide-wrap .guide-title {  font-size: 13px; font-weight: 600;   letter-spacing: -0.33px; }
.complete-container .guide-wrap .guide-sub {  font-size: 13px; font-weight: 300;   letter-spacing: -0.33px; }
.complete-container .guide-wrap.top { margin-top: 60px; margin-bottom: 10px;  }


.m-input-select.type01 {
    position: relative;
}
.m-input-select.type01 select {
    width: 100%; height: 39px;
    border:none; border-bottom: solid 1px #e4e4e4;
    outline: none;
}
.m-input-select.type01 select {
    -webkit-appearance: none; /* WebKit (Chrome, Safari 등) 기반 브라우저에 적용 */
    -moz-appearance: none; /* Firefox 기반 브라우저에 적용 */
    appearance: none; /* 다른 브라우저에 적용 */

}
.m-input-select.type01 i {
    position: absolute; right:0; top:50%; transform:translateY(-50%);
    font-size: 18px;
    color: var(--windows-blue);
}

.ql-editor {
    padding:0;
}

.station-show .summary-container {
    padding:0;
    position:static;
    border-radius:0; box-shadow:none;
}

.m-spaces.type01 {
    display: flex;
    width:100%;
    margin:-5px;
}
.m-spaces.type01 .m-space-wrap {
    flex:1;
    padding:5px;
}