/* 메인-배차현황 */
body {background: #efefef; padding-bottom: 10rem;}
header {position: absolute; left: 0; top: 0; right: 0; z-index: 100; padding: 0rem 2rem 0;}
header .top {display: flex; justify-content: space-between;}
header .top div a { display: inline-block; width: 2rem; height: 7rem;}
header .top div a.ico_alarm {background: url(../images/icon_alarm.png) no-repeat center / 1.9rem auto; position: relative;}
header .top div a.ico_alarm .ico_alarm_new { background: url(../images/icon_alarm_new.png) no-repeat center / 2.5rem auto; width: 2.5rem; height: 2.5rem; position: absolute; top: 28; right: 0; transform: translate(50%, -50%); }
.ico_alarm_new_2 { background: url(../images/icon_alarm_new.png) no-repeat center / 2.0rem auto; width: 2.5rem; height: 2.7rem; margin-left: 0.5rem; position: relative; top: -15; left: 38; transform: none; }

/* 공통 - 가로 디바이더 */
.sub-horizontal-devider { position: absolute; left: 0; right: 0; top: 5.5rem; height: 0.1rem; background-color: #efefef; }
.horizontal-devider { position: absolute; left: 0; right: 0; top: 4.9rem; height: 0.1rem; background-color: #efefef; }

/* 공통 - 더보기 버튼, 페이징 */
.more-button { padding: 2rem 2rem; display: flex; flex-direction: column; align-items: center;}
.more-button button { width: 30%; height: 4rem; border-radius: 5rem; color: #f24f56; background-color: #fff; cursor: pointer; margin-bottom: 0.7rem; text-align: center; font-size: 1.4rem; font-weight: 500; font-family: Pretendard; border: 0.15rem solid #f24f56;}

/* 공통 - 탭바 메뉴 */
footer.tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 9rem; background-color: #fff; display: flex; justify-content: space-between; box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.15); z-index: 800; }
.tab-item { flex-grow: 1; text-align: center; display: flex; flex-direction: column; align-items: center; margin-top: 2rem; position: relative;}
.tab-icon { background-size: contain; background-repeat: no-repeat; background-position: center; width: 25px; height: 25px; }
.tab-label { font-size: 1.2rem; font-family: Pretendard; font-weight: 500; color: #aaaaaa; margin-top: 0.6rem; }
.active-tab .tab-label{ color: #f24f56; }
.icon-driving { background-image: url('../images/icon_tabbar_driveReport.png'); }
.icon-fuel { background-image: url('../images/icon_tabbar_gas.png'); }
.icon-schedule { background-image: url('../images/icon_tabbar_steering.png'); }
.icon-vacation { background-image: url('../images/icon_tabbar_vacation.png'); }
.icon-more { background-image: url('../images/icon_tabbar_more.png'); }
.icon-c-driving { background-image: url('../images/icon_tabbar_colored_driveReport.png'); }
.icon-c-fuel { background-image: url('../images/icon_tabbar_colored_gas.png'); }
.icon-c-schedule { background-image: url('../images/icon_tabbar_colored_steering.png'); }
.icon-c-vacation { background-image: url('../images/icon_tabbar_colored_vacation.png'); }
.icon-c-more { background-image: url('../images/icon_tabbar_colored_more.png'); }

/* 공통 - 로딩 */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #F6F6F6; display: flex; align-items: center; justify-content: center;  transition: opacity 0.3s ease; z-index: 9999; }
.loading { background-image: url('../images/boram_loading.gif'); background-size: 7rem 7rem; background-repeat: no-repeat; background-position: center; width: 30%; height: 30%; }
.boramLogo { position: absolute; bottom: -7rem; background-image: url('../images/boram_h_logo.png'); background-size: 10rem 2.5rem; background-repeat: no-repeat; background-position: center; width: 30%; height: 30%; }

/* 카메라 촬영 버튼 */
.callCamera { display: block; max-width: 8rem; background-image: url('../images/callCameraButton.png'); background-size: 3rem 3rem; background-repeat: no-repeat; background-position: center; }

/* 카카오 주소검색 팝업 */
.kakao-place-name {
    font-size: 1.4rem;
    font-family: Pretendard;
    font-weight: 500;
    color: #333;
}

.kakao-road-address-name {
    font-size: 1.2rem;
    font-family: Pretendard;
    font-weight: 500;
    color: #333;
}

.result-item { margin-left: 1rem; line-height: 1.8rem; }


/* 로그인페이지 - 비밀번호 찾기 팝업 */
.forgot-password-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); display: flex; justify-content: center; align-items: center; z-index: 20; transition: background-color 0.3s ease; flex-direction: column; z-index: 9999;}
.forgot-password-popup-area { background-color: #fff; border-radius: 1rem 1rem 0 0; padding: 2.3rem 2rem; width: 30rem; height: 13.4rem; display: flex; flex-direction: column; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; }
.forgot-password-popup-title span { font-size: 1.6rem; font-family: Pretendard; font-weight: 600; color: #333; letter-spacing: -0.04rem; }
.find-password { width: 100%; position: relative;}
.find-password-tel { width: 87%; margin-top: -1rem;}
.find-password-txt { width: 100%; height: 5.2rem; margin-top: 2.1rem; border-radius: 1rem !important; border: solid 1px #e8e8e8; background-color: #f7f7f7; letter-spacing: -0.025rem; font-size: 1.6rem; font-family: Pretendard; font-weight: 600; text-indent: 1.9rem; padding-right: 4.2rem;}
.find-password-txt:focus { outline: none; border: solid 0.1rem #b8b8b8; }
.find-password-txt::placeholder { color: #ccc; }
.delete-icon { position: absolute; right: 1.6rem; top: 3.7rem; width: 25px; height: 25px; cursor: pointer; background-image: url('../images/icon_delete.png');  background-size: 2.2rem 2.2rem;  background-repeat: no-repeat;  }
.close-icon { position: absolute; margin-top: -2rem; right: 0; padding-right: 2rem; width: 1.8rem; height: 1.8rem; cursor: pointer; background-image: url('../images/icon_close.png'); background-size: 1.8rem 1.8rem;; background-repeat: no-repeat;  }
.find-password-description { margin-top: 1.8rem; padding: 0.2rem;}
.find-password-description span  { font-size: 1.4rem; font-family: Pretendard; font-weight: 500; color: #888; letter-spacing: -0.02rem; line-height: 1.6rem; }
.forgot-password-popup-exit-area { display: flex; width: 32.9rem; height: 5.2rem; margin-left: -2rem; margin-top: 1.6rem; }
.forgot-password-close-btn { background-color: #909090; flex: 0 0 9rem; display: flex; align-items: center; justify-content: center; padding: 2.3rem 2rem; color: #333; border-radius: 0 0 0 1rem; cursor: pointer; }
.forgot-password-confirm-btn { background-color: #333; flex: 0 0 21rem; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 0 0 1rem 0; cursor: pointer; }
.forgot-password-popup-exit-area p { font-size: 1.6rem; font-family: Pretendard; font-weight: 500; margin-top: 0.2rem; color: #fff;}

/* 로그인페이지 - 비밀번호 변경 팝업 */
.reset-password-popup-area { background-color: #fff; border-radius: 1rem 1rem 0 0; padding: 2.3rem 2rem; width: 27rem; height: 11.9rem; display: flex; flex-direction: column; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; }
.reset-password-popup-title { margin-bottom: 1.1rem;}
.reset-password-popup-title span { font-size: 1.6rem; font-family: Pretendard; font-weight: 600; color: #333; letter-spacing: -0.04rem; }
.new-password { width: 100%; position: relative;}
.new-password-txt { width: 100%; height: 5.2rem; margin-top: 1rem; border-radius: 1rem !important; border: solid 1px #e8e8e8; background-color: #f7f7f7; letter-spacing: -0.025rem; font-size: 1.6rem; font-family: Pretendard; font-weight: 600; text-indent: 1.9rem; padding-right: 4.2rem;}
.new-password-txt:focus { outline: none; border: solid 0.1rem #b8b8b8; }
.new-password-txt::placeholder { color: #ccc; }
.new-password-description { margin-top: 0.7rem; margin-bottom: 0.5rem; padding: 0.2rem;}
.new-password-description span  { font-size: 1.4rem; font-family: Pretendard; font-weight: 500; color: #888; letter-spacing: -0.02rem; line-height: 1.6rem; }
.reset-password-popup-exit-area { display: flex; width: 32.9rem; height: 5.2rem; margin-left: -2rem; margin-top: 1.6rem; }
.reset-password-close-btn { background-color: #909090; flex: 0 0 8rem; display: flex; align-items: center; justify-content: center; padding: 2.3rem 2rem; color: #333; border-radius: 0 0 0 1rem; cursor: pointer; }
.reset-password-confirm-btn { background-color: #333; flex: 0 0 19rem; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 0 0 1rem 0; cursor: pointer; }
.reset-password-popup-exit-area p { font-size: 1.6rem; font-family: Pretendard; font-weight: 500; margin-top: 0.2rem; color: #fff;}

/* 배차현황 - 해당 월 운행현황 및 통계 */
.logo-container { display: flex; align-items: center;}
.logo { display:block; width: 3.5rem; height: 3.5rem; background: url(../images/boram_logo.png) no-repeat 0 0 / 100% auto;  }
.logo_title { color: #111; font-size: 2rem; font-weight: 600; margin-left: 1.2rem; font-family: Pretendard; letter-spacing: -0.05rem; margin-top: -0.5rem;}
.main-info { overflow: visible; background: #fff; border-radius: 0 0 2.5rem 2.5rem; box-shadow: 1px 1.7px 4px 0 rgba(233, 233, 234, 0.5); height: 20rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.main-stat { background: #f24f56; margin-top: 3rem; border-radius: 1rem; width: 92%; height: 11rem; display: flex; justify-content: space-between; }
.stat-group { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.stat-divider { width: 1px; height: 50%; background-color: #e4343d; align-self: center;}
.main-stat-txt, .main-stat-cnt { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.main-stat-title, .big-cnt, .small-cnt, .unit { color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; height: 4rem; }
.main-stat-title { color: #fff; text-align: center; font-size: 1.4rem; font-family: Pretendard; font-weight: 500; height: 4rem; line-height: 4rem; margin-top: -0.5rem; }
.big-cnt { font-size: 2.6rem; font-weight: 600; font-family: Pretendard; }
.small-cnt { font-size: 2.6rem; font-weight: 600; font-family: Pretendard; }
.unit { font-size: 1.65rem; font-weight: 300; margin-left: 1rem;  margin-top: 1rem; font-family: Pretendard; }

/* 배차현황 - 총 건수 영역 및 날짜 지정 */
.total-date { position: relative; margin-top: 1.7rem; display: flex; justify-content: center;}
.second-section { padding: 0rem 2rem; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 1.2rem; width: 92%; height: 5.5rem; box-sizing: border-box;}
.second-section .total-cnt-filtered p { font-size: 1.6rem; font-weight: 600; font-family: Pretendard; color: #333333; line-height: 0.188rem; letter-spacing: -0.04rem;}
.second-section .main-datePicker span { font-size: 1.4rem; font-family: Pretendard; font-weight: 600; color: #333333; line-height: 0.214rem; letter-spacing: -0.07rem;}
.main-datePicker { display: flex; align-items: center; }
.total-cnt-filtered span { color: #f24f56; }
.ico_datePicker { display: inline-block; width: 1.8rem; height: 1.8rem; background: url('../images/icon_adjustment.png') no-repeat 0 0 / 100% auto; margin-left: 2rem; }

/* 배차현황 - 날짜 지정 팝업 */
.date-popup-box { padding: 0rem 2rem; background: #fff; width: 100%; height: 23.4rem; box-sizing: border-box; border-radius: 2.5rem 2.5rem 0 0;}
.date-popup-top-area { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.date-popup-button { padding: 0rem 2rem; display: flex; justify-content: center; align-items: center; background: #333; width: 100%; height: 5.2rem; box-sizing: border-box; cursor: pointer; }
.date-popup-button p { font-size: 1.6rem; font-family: Pretendard; font-weight: 500; color: #fff;}
.date-popup-title { margin-top: 3.1rem; }
.date-popup-title span { font-size: 1.6rem; font-family: Pretendard; font-weight: 600; color: #333; letter-spacing: -0.04rem; }
.date-popup-subtitle { margin-top: 0.5rem; }
.date-popup-subtitle span { font-size: 1.2rem; font-family: Pretendard; font-weight: 600; color: #888; letter-spacing: -0.04rem; }
.date-period-button { margin-top: 1.4rem; justify-content: space-between; width: 100%; display: flex; }
.date-period-button p { font-size: 1.4rem; font-weight: 600; font-family: Pretendard; color: #333; }
.date-period-past2m, .date-period-past1m, .date-period-future1m, .date-period-future2m { box-sizing: border-box; border: none; background-color: #f1f1f1; cursor: pointer; flex-grow: 1; text-align: center; padding: 0.8rem; margin-right: 0.2rem; height: 5.3rem; }
.date-period-past2m { border-radius: 1rem 0 0 1rem; }
.date-period-future2m { border-radius: 0 1rem 1rem 0; margin-right: 0; }
.date-period-area { justify-content: space-between; width: 100%; display: flex;}
.date-period-start p, .date-period-end p { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #333;}
.date-period-start, .date-period-end { display: flex; align-items: center; justify-content: space-between; position: relative; flex-grow: 1; height: 5.3rem; margin-top: 2.1rem; border-radius: 1rem; background-color: #f1f1f1; letter-spacing: -0.025rem; text-indent: 1.9rem; padding-right: 2.2rem; margin-right: 0.5rem; cursor: pointer; }
.date-period-end { margin-right: 0; }
.date-hyphen { margin-top: 2rem; padding: 0 0.5rem; color: #e8e8e8; display: flex; align-items: center; font-size: 1.4rem; font-weight: 600; font-family: Pretendard; }
.ico_openCalendar, .ico_closeCalendar { display: inline-block; width: 2rem; height: 2rem; background: url('../images/icon_calendar.png') no-repeat 0 0 / 100% auto; }
.date-popup { position: fixed; bottom: -100%; left: 0; right: 0; transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 1001; opacity: 0; }   
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); display: none; opacity: 0; z-index: 1000; transition: opacity 0.3s ease-in-out; }
.date-popup.active { bottom: 0; }

/* 배차현황 - 날짜지정에 따른 운행 건수 표시 */
.total-cnt { text-align: center; margin-top: 3rem; }
.total-cnt p { font-size: 1.75rem; font-weight: bold; color: #333333; font-family: Pretendard; letter-spacing: -0.088rem;}
.total-cnt span { color: #f24f56; letter-spacing: -0.08rem;}
.highlight-count { color: #f24f56; letter-spacing: -0.08rem;}

/* 배차현황 - 운행현황 및 차량번호 상세 버튼 영역 */
.main-list { position: relative; margin-top: 1.6rem; display: flex; justify-content: center; }
.main-list-area { background: #fff; border-radius: 1.2rem; width: 92%; height: 34.3rem; box-sizing: border-box; padding: 0 2rem; transition: height 0.3s ease; }
.main-list-area.expanded { height: 46.5rem; }
.main-list-area.shortexpanded { height: 40rem; }
.main-list-area.supershortexpanded { height: 33.5rem; }
.main-list-title { display: flex; justify-content: space-between; width: 100%; }
.curr-step { margin-top: 1.6rem;}
.curr-step span { font-size: 1.65rem; font-weight: 600; font-family: Pretendard; color: #f24f56; letter-spacing: -0.041rem;}
.trans-right-grp { display: flex; flex-direction: row; gap: 1rem; }
.trans-title { margin-top: 1.7rem; }
.trans-title span { font-size: 1.45rem; font-weight: 600; font-family: Pretendard; color: #888888; letter-spacing: -0.036rem;}
.trans-code { margin-top: 1.6rem;}
.trans-code span { font-size: 1.6rem; font-weight: bold; font-family: Pretendard; color: #333333; letter-spacing: -0.08rem;}
.ico_arrowRight { margin-top: 1.4rem; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/Arrow_right.png') no-repeat 0 0 / 100% auto; }

/* 배차현황 - 운행 타임라인 */
.timeline  { width:100%; font-family:Pretendard; position:relative;}
.wait-time { font-weight:600; font-size:1.4rem; color:#e4343d; letter-spacing: -0.031rem; font-family: Pretendard; margin-top: 2.6rem; }
.wait-time-val { color:#333;}
.event { display:flex; align-items:center; margin-bottom:-2.2rem; margin-top: -2rem; }
.event-icon { width:0.9rem; height:0.9rem; background-color:#f24f56; border-radius:50%; position:relative; margin-top: -1rem;}
.event-icon::after { content:'';position:absolute;top:100%;left:50%;width:1px;height:60px;background-color:#e7e7e7;transform:translateX(-100%);}
.event-description { margin-left:2rem; margin-top: 3rem;}
.event-title { font-weight:500; font-size:1.25rem; color:#888888; padding-bottom:0.2rem; letter-spacing: -0.031rem; font-family: Pretendard; }
.event-time-address { display:flex;flex-direction:row;gap:1rem;}
.event-time { margin-top:0.4rem; font-size:1.45rem; color:#e4343d; font-weight:600; font-family: Pretendard; }
.event-address { font-size:1.65rem; color:#333333; font-weight:600; letter-spacing:-0.04rem; margin-bottom:1.8rem; margin-top: 0.2rem;}
.event:last-child .event-icon::after { height:0;}
.no-after::after { display: none !important;}

/* 배차현황 - 운행 타임라인 담당지도사 정보 영역 */
.counselor-info-area { position:relative; margin-top:-1.0rem; display:flex; justify-content:center;}
.counselor-info-section { position:relative; padding:0 2rem; margin-top:1.5rem; display:flex; justify-content:space-between; background:#efefef; border-radius:1.2rem; width:100%; height:5.2rem; box-sizing:border-box; transition:height 0.3s ease, background-color 0.3s ease;}
.counselor-info-section.expanded { height:17.6rem;}
.counselor-info-section span { position: absolute; font-size:1.45rem; font-weight:500; color:#555555; font-family:Pretendard; margin-top: 1.7rem;}
.ico_drop { width:2.3rem; height:2.3rem; background:url('../images/Arrow_down.png') no-repeat center center /  1rem 0.5rem #fff; border-radius:50%; position:absolute; right:3rem; transition:transform 0.3s ease; margin-top: 1.5rem;}
.ico_drop.rotated { transform:rotate(180deg);}
.counselor-info .info-content-name { position: absolute; flex-direction: column; font-size: 1.2rem; font-family:Pretendard; color: #888888; font-weight: 500; margin-top: 4.4rem; line-height: 3rem;}
.counselor-info .info-content { position: absolute; flex-direction: column; font-size: 1.4rem; font-family:Pretendard; color: #333333; font-weight: 500; margin-top: 4.4rem; margin-left: 7rem; line-height: 3rem; letter-spacing: -0.125rem;}
.counselor-info-section.expanded .counselor-infot { display: flex; }
.counselor-info-section:hover { background-color: rgba(0, 0, 0, 0.15); /* 占쏙옙占쎌스 占쏙옙占쏙옙 占쏙옙 占쏙옙緞占� 처占쏙옙 */}
.counselor-info-section.expanded:hover { background-color: #efefef; /* 확占쏙옙占� 占쏙옙占승울옙占쏙옙占쏙옙 hover 효占쏙옙 占쏙옙占쏙옙 */}
.counselor-button { position: relative; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 1.2rem; width: 100%; height: 4.3rem; box-sizing: border-box; margin-top: 11.4rem;}
.counselor-button-divider { width: 0.1rem; height: 100%; background-color: #efefef; position: absolute; left: 50%; }
.ico_sns, .ico_telephone { display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; background-size: 2rem 2rem; background-repeat: no-repeat; background-position: center; }
.ico_sns { background-image: url('../images/icon_sns.png'); }
.ico_telephone { background-image: url('../images/icon_telephone.png'); justify-content: flex-end; }

/* 배차현황 상세 - 메인 */
.sub-top {display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.sub-top-container { display: flex; align-items: center; }
.goback-button a { display: block; width: 2.7rem; height: 2.7rem; background: url(../images/Arrow_goback.png) no-repeat 0 0 / 100% auto; cursor: pointer; }
.submenu-title { color: #333333; font-size: 1.8rem; font-weight: 600; margin-left: 1.2rem; margin-top: -0.8rem; font-family: Pretendard; font-weight: 600; letter-spacing: -0.045rem;}

/* 배차현황 상세 - 배차현황 banner */
.trans-status-area { overflow: visible; background: #fff; height: 10.7rem; display: flex; align-items: center; box-sizing: border-box; }
.trans-status-sub { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4rem;}
.trans-detail { background: #4c4c4c; margin-top: 11rem; width: 100%; height: 10.7rem;}
.stat-group-A { display: flex; justify-content: center; margin-top: 2.9rem; margin-bottom: 0.4rem;}
.stat-group-B { display: flex; }
.stat-divider { width: 1px; height: 90%; background-color: #e4343d; align-self: center;}
.trans-status { color: #fff; font-size: 2.4rem; font-family: Pretendard; font-weight: 500; line-height: 4rem; margin-top: -0.5rem; }
.trans-detail-txt { color: #fff; font-size: 1.2rem; font-weight: 300; font-family: Pretendard; display: flex; justify-content: flex-start;}
.trans-detail-txt2 { color: #fff; font-size: 1.2rem; font-weight: 300; font-family: Pretendard; display: flex; justify-content: flex-start; }
.trans-detail-info { color: #fff; font-size: 1.4rem; font-weight: 500; font-family: Pretendard; margin-left: 1rem; margin-top: -0.1rem;}

/* 배차현황 상세 - 배차현황 일정 */
.trans-list { position: relative; margin-top: 5.6rem; display: flex; justify-content: center; }
.trans-detail-area { background: #fff; width: 100%; height: 20rem; box-sizing: border-box; padding: 0 2rem; }
.trans-detail-cnt { margin-top: 1.9rem; justify-content: space-between; display: flex;}
.trans-detail-cnt p { font-size: 1.4rem; font-weight: 600; font-family: Pretendard; color: #e4343d; margin-top: 0.2rem; }
.trans-detail-cnt span { font-size: 1.6rem; font-weight: 500; font-family: Pretendard; color: #333333; }
.trans-detail-cnt .trans-cnt { color: #f24f56; }

/* 배차현황 상세 - 경유지 추가 팝업 */
.addLocationPopup { position: fixed; bottom: -100%; left: 0; right: 0; transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 1001; opacity: 0; }
.addLocatoon-popup-box { padding: 0rem 2rem; background: #fff; width: 100%; height: 30.0rem; box-sizing: border-box; border-radius: 2.5rem 2.5rem 0 0;}
.addLocation-popup-top-area { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.ico_down { width:2.8rem; height:2.8rem; background:url('../images/Arrow_down.png') no-repeat center center /  1.8rem 0.9rem;  position:absolute; right:2rem; margin-top: 2.8rem; cursor: pointer; }
.ico_delete { position: absolute; right: 2rem; top: 5.9rem; width: 25px; height: 25px; cursor: pointer; background-image: url('../images/icon_delete.png');  background-size: 2.2rem 2.2rem;  background-repeat: no-repeat;  }
.search-Address { width: 10rem; height: 5rem; background-color: #333; box-sizing: border-box; border-radius: 1.2rem; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-right: 1rem; }
.search-Address span { font-family: Pretendard; font-size: 1.3rem; color: #fff; font-weight: 500; }
.address-input-container { display: flex; align-items: center; }
.next-address { margin-top: 3.1rem; }
.place-text { font-size: 1.6rem; font-family: Pretendard; font-weight: 600; color: #333; letter-spacing: -0.04rem; }
.place-name { text-decoration: underline; font-weight: 800; font-size: 1.6rem; font-family: Pretendard; color: #333; letter-spacing: -0.04rem;}

/* 배차현황 상세 - 배차현황 타임라인 */
.trans-detail-timeline  { width:100%; font-family:Pretendard; position:relative;}
.trans-detail-event-address { background: #f7f7f7; border-radius: 1rem; height: 5.2rem; box-sizing: border-box; width: 100%; display: flex; align-items: center; }
.trans-detail-event-address span { font-family:Pretendard; color: #333333; font-size: 1.4rem; font-weight: 500; letter-spacing:-0.035rem; margin-left: 0.5rem; cursor: pointer;}
.trans-detail-event { display:flex; margin-bottom:-2.2rem; margin-top: 4.4rem; align-items: flex-start; flex-direction: column;}
.trans-detail-event-icon { width:0.9rem; height:0.9rem; background-color:#f24f56; border-radius:50%; position:relative; margin-top: 0.3rem;}
.trans-detail-event-icon::after { content:''; position:absolute; top:100%; left:50%; width:1px; height:117px; background-color:#e7e7e7; transform:translateX(-100%); }
.trans-detail-event-description { margin-left:2.6rem; width: 97%; margin-top: -1.4rem;}
.trans-detail-event-title { font-weight:600; font-size:1.25rem; color:#888888; padding-bottom:0.2rem; margin-top: 0.2rem;}
.trans-detail-event-km { font-weight:600; font-size:1.25rem; color:#e4343d; margin-top: 0.4rem; margin-right: 1rem; }
.trans-detail-event-time-address { display:flex; position: relative; flex-direction:row; gap:1rem; justify-content: space-between; }
.trans-detail-event-name-wrapper { display: flex; align-items: center; }
.trans-detail-event-time { margin-top:0.4rem; font-size:1.45rem; color:#e4343d; font-weight:700; }
.trans-detail-event-name { font-size:1.65rem; color:#333333; font-weight:700; letter-spacing:-0.041rem; margin-bottom:1rem; margin-top: 0.2rem;}
.trans-detail-event:last-child .trans-detail-event-icon::after { height:0; }
.ico-location, .ico-clipboard, .ico-addLocation { height: 2rem; width: 2rem; margin-left: 1rem; background-size: contain; background-repeat: no-repeat; }
.ico-location { background-image: url('../images/icon_location.png'); }
.ico-addLocation { background-image: url('../images/icon_addLocation.png'); margin-left: 1rem; margin-top: -0.7rem; cursor: pointer; }
.ico-clipboard { background-image: url('../images/Arrow_right.png'); margin-left: auto; margin-right: 2rem; cursor: pointer; }
.trans-detail-km-txt { font-weight:600; font-size:1.25rem; color:#888888; padding-bottom:0.2rem; margin-top: 0.2rem;}
.trans-detail-km-num{ font-weight:600; font-size:1.25rem; color:#333333; padding-bottom:0.2rem; margin-top: 0.2rem;}
.trans-detail-km-area { display: flex; justify-content: space-between; align-items: center; margin-right: 1rem; }

/* 배차현황 상세 - 담당지도사 정보 영역 */
.trans-detail-counselor-info { position: relative; margin-top: 1rem; display: flex; justify-content: center; }
.trans-detail-counselor-info-area { background: #fff; width: 100%; height: 24rem; box-sizing: border-box; padding: 0 2rem; }
.trans-detail-counselor-txt .info-content-name { position: absolute; flex-direction: column; font-size: 1.2rem; font-family:Pretendard; color: #888888; font-weight: 500; margin-top: 3.6rem; line-height: 3.4rem;}
.trans-detail-counselor-txt .info-content { position: absolute; flex-direction: column; font-size: 1.4rem; font-family:Pretendard; color: #333333; font-weight: 500; margin-top: 3.6rem; margin-left: 7rem; line-height: 3.4rem; letter-spacing: -0.035rem;}
.trans-detail-counselor-button { position: relative; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 1.2rem; width: 100%; height: 5.4rem; box-sizing: border-box; margin-top: 12rem; border: 0.2rem solid #e7e7e7;}
.counselor-button-divider { width: 0.1rem; height: 100%; background-color: #efefef; position: absolute; left: 50%; }
.ico_sns, .ico_telephone { display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; background-size: 2.0rem 2.0rem; background-repeat: no-repeat; background-position: center; }
.ico_sns { background-image: url('../images/icon_sns.png'); }
.ico_telephone { background-image: url('../images/icon_telephone.png'); justify-content: flex-end; }

/* 배차현황 상세 - 장례정보 영역 */
.trans-detail-funeral-info { position: relative; margin-top: 1rem; display: flex; justify-content: center; }
.trans-detail-funeral-info-area { background: #fff; width: 100%; height: 12.7rem; box-sizing: border-box; padding: 0 2rem; }

/* 배차현황 상세 - 운행정보 영역 */
.trans-detail-trans-info { position: relative; margin-top: 1rem; display: flex; justify-content: center; }
.trans-detail-trans-info-area { background: #fff; width: 100%; height: 24rem; box-sizing: border-box; padding: 0 2rem; }
.trans-detail-trans- { display: flex; flex-direction: row; gap: 1rem; }
.trans-detail-distance-area { display: flex; justify-content:space-between; width: 100%; }
.trans-detail-trans-num { display: flex; align-items: center; margin-top: 2rem; margin-left: auto;}
.trans-detail-trans-title { font-size: 1.45rem; font-weight: 600; font-family: Pretendard; color: #888888; letter-spacing: -0.03rem; margin-right: 1rem;}
.trans-detail-trans-code { font-size: 1.45rem; font-weight: 600; font-family: Pretendard; color: #333333; letter-spacing: -0.03rem;}
.trans-detail-distance-txt .trans-detail-distance-info { position: absolute; flex-direction: column; font-size: 1.4rem; font-family: Pretendard; color: #888888; font-weight: 500; margin-top: 3.1rem; line-height: 3.4rem; }
.trans-detail-distance-txt .trans-detail-distance-content { position: absolute; right: 0; flex-direction: column; align-items: flex-end; font-size: 1.4rem; font-family: Pretendard; color: #333333; font-weight: 500; margin-top: 3.1rem; line-height: 3.4rem; letter-spacing: -0.125rem; }
.trans-detail-distance-content .distance-entry { display: flex; justify-content: flex-end; }
.trans-detail-distance-content span { margin-left: 1rem; margin-right: 2rem;}
.trans-detail-distance-warning-area { position: relative; display: flex; justify-content: center; align-items: center; background: #fff; width: 100%; height: 6.2rem; box-sizing: border-box; margin-top: 1rem;}
.trans-detail-distance-warning-area span { font-size: 1.2rem; font-weight: 500; color: #777; letter-spacing: -0.03rem; font-family: Pretendard; line-height: 1.8rem; text-align: center;}

/* 배차현황 상세 - 운행종료 버튼 */
footer.trans-detail-button { position: fixed; bottom: 0; left: 0; width: 100%; height: 5.2rem; background-color: #f24f56; display: flex; justify-content: center; align-items: center; z-index: 1000; }
.trans-detail-button .full-width-button { font-size: 1.6rem; font-family:Pretendard; color: #fff; font-weight: 600; letter-spacing: -0.04rem; width: 100%; height: 100%;
  border: none; background: transparent; cursor: pointer;}

 /* 운행정보입력 - 운행정보입력 */
 .trans-detail-input-img { position: relative; margin-top: 5.6rem; display: flex; justify-content: center;}
 .trans-detail-input-img-area img { width: 90%; height: 40vh; width: auto; object-fit: contain; background-size: contain; background-repeat: no-repeat; background-position: center; }
.trans-detail-input-km { position: relative; display: flex; justify-content: center; }
.trans-detail-input-km-area { background: #fff; width: 100%; height: 8.4rem; box-sizing: border-box; }
.input-carNum { position: relative; padding: 0 1.5rem; margin-top: 1.9rem;}
.input-carNum-type { width: 100%; height: 5.2rem; border-radius: 1rem !important; border: solid 1px #d8d8d8; background-color: #fff; letter-spacing: -0.025rem; font-size: 1.4rem; font-family: Pretendard; font-weight: 500; text-indent: 2rem; direction: rtl; }
.input-carNum-type:focus { outline: none; border: solid 0.1rem #b8b8b8; }
.input-carNum-type::placeholder { color: #ccc; }
.input-carNum-txt{ position: absolute; left: 3.5rem; top: 50%; transform: translateY(-50%); color: #333; font-size: 1.4rem; font-family:Pretendard; }
.input-km { position: relative; padding: 0 1.5rem; margin-top: 0.9rem;}
.input-km-txt { width: 100%; height: 5.2rem; border-radius: 1rem !important; border: solid 1px #d8d8d8; background-color: #fff; letter-spacing: -0.025rem; font-size: 1.4rem; font-family: Pretendard; font-weight: 500; text-indent: 5rem; direction: ltl; text-align: right; padding-right: 4.5rem; }
.input-km-txt:focus { outline: none; border: solid 0.1rem #b8b8b8; }
.input-km-txt::placeholder { color: #ccc; }
.input-km-start-unit { position: absolute; left: 3.5rem; top: 50%; transform: translateY(-50%); color: #333; font-size: 1.4rem; font-family:Pretendard; }
.input-km-unit { position: absolute; right: 3.7rem; top: 50%; transform: translateY(-50%); color: #888; font-size: 1.2rem; font-family:Pretendard; }
.input-km-description { display: flex; flex-direction: column; }
.input-km-description-item { display: flex; align-items: center; margin-top: 1rem; }
.input-km-description span { font-size: 1.2rem; font-family: Pretendard; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.03rem; color: #777; margin-right: 1.5rem;}
.input-km-description-bullet { width: 0.6rem; height: 0.6rem; background-color: #b5b5b5; border-radius: 50%; margin-right: 0.7rem; margin-left: 1.6rem; }

 /* 운행정보입력 - 운행정보삭제버튼 */
 .delete-dispatch { text-align: center; margin-top: -0.8rem; }
 .delete-dispatch span { font-size: 1.6rem; font-family: Pretendard; font-weight: 600; color: #333; cursor: pointer; }
 
/* 운행정보입력 - 운행정보저장 버튼 */
footer.trans-detail-save-km-button { position: fixed; bottom: 0; left: 0; width: 100%; height: 5.2rem; background-color: #333; display: flex; justify-content: center; align-items: center; }
.trans-detail-save-km-button .full-width-button { font-size: 1.6rem; font-family:Pretendard; color: #fff; font-weight: 600; letter-spacing: -0.04rem; width: 100%; height: 100%;
  border: none; background: transparent; cursor: pointer;}

/* 운행기록 상세 - 운행기록 banner */
.drive-status-area { overflow: visible; background: #fff; height: 10.7rem; display: flex; align-items: center; box-sizing: border-box; }
.drive-detail { background: #efefef; margin-top: 11rem; width: 100%; height: 10.7rem;}
.drive-status { color: #333; font-size: 2.4rem; font-family: Pretendard; font-weight: 500; line-height: 4rem; margin-top: -0.5rem; }
.drive-status-sub { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 4rem;}
.drive-detail-txt { color: rgba(136, 136, 136, 0.8); font-size: 1.2rem; font-weight: 500; font-family: Pretendard; display: flex; justify-content: flex-start;}
.drive-detail-txt2 { color: rgba(136, 136, 136, 0.8); font-size: 1.2rem; font-weight: 500; font-family: Pretendard; display: flex; justify-content: flex-start; }
.drive-detail-info { color: #333; font-size: 1.4rem; font-weight: 500; font-family: Pretendard; margin-left: 1rem; margin-top: -0.1rem;}

/* 운행기록 상세 - 운행종료 버튼 */
footer.drive-detail-button { position: fixed; bottom: 0; left: 0; width: 100%; height: 5.2rem; background-color: #aaa; display: flex; justify-content: center; align-items: center; z-index: 1000; }
.drive-detail-button .full-width-button { font-size: 1.6rem; font-family:Pretendard; color: #fff; font-weight: 600; letter-spacing: -0.04rem; width: 100%; height: 100%;
  border: none; background: transparent; cursor: pointer;}

/* 개인정보처리방침 */
.policy-top { margin-top: 8.5rem; padding: 0 1.5rem;}
.policy-top span { font-size: 1.6rem; font-weight: 600; font-family:Pretendard; color: #111; }
.policy-top p { font-size: 1.2rem; font-weight: 500; font-family:Pretendard; color: #333; line-height: 1.7rem; letter-spacing: 0.03rem; margin-top: 1.2rem;}
.policy-bottom { margin-top: 3.2rem; padding: 0 1.5rem;}
.policy-bottom span { font-size: 1.6rem; font-weight: 600; font-family:Pretendard; color: #111; }
.policy-bottom p { font-size: 1.2rem; font-weight: 500; font-family:Pretendard; color: #333; line-height: 1.7rem; letter-spacing: 0.03rem; margin-top: 1.2rem;}

/* 알림 */
.notification-switch { position: relative; display: flex; justify-content: space-between; padding: 0 7.1rem;  height: 10.7rem; background: #fff;}
.notification-tabs { flex: 1; display: flex; justify-content: center; margin-top: 5.4rem;}
.tab-item { font-size: 1.6rem; font-weight: 600; font-family: Pretendard; color: #aaa; line-height: 1.7rem; letter-spacing: 0.04rem; text-align: center; transition: all 0.3s ease;}
.underline { position: absolute; bottom: 0; left: 0; height: 0.3rem; background-color: #333; width: 50%; }
.tab-item.active { color: #333;}

.tab-content { display: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
.tab-content.active { display: block; opacity: 1; }

/* 배차알림 - 배차알림 */
.notification-content { position: relative; padding: 0 1.6rem; }
.delete-and-read { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; margin-right: 1.6rem; margin-top: -3.3rem;}
.delete-and-read p { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #888; letter-spacing: 0.07rem; margin: 0 0.5rem; }
.vertical-small-divider { width: 0.1rem; height: 100%; background-color: #b5b5b5; position: absolute; }

/* 배차알림 - 알림내용  */
.trans-noti-box-area { display: flex; margin-top: 5.2rem; flex-direction: column; }
.trans-noti-box { display: flex; flex-direction: column; background: #fff; border-radius: 1.2rem; width: 100%; height: 9.2rem; box-sizing: border-box; margin-bottom: 0.9rem;}
.trans-noti-box-top { display: flex; justify-content: space-between; padding: 0 1.9rem; margin-bottom: 0.8rem; margin-top: 2.1rem;}
.trans-noti-title { font-size: 1.2rem; font-weight: 500; font-family: Pretendard; color: #ec464d; letter-spacing: -0.035rem; }
.trans-noti-date { font-size: 1.2rem; font-weight: 500; font-family: Pretendard; color: #888; letter-spacing: -0.035rem; }
.trans-noti-box-desc { padding: 0 1.9rem; }
.trans-noti-txt { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #333; letter-spacing: -0.035rem; }

/* 배차알림 - 읽음과 안읽음 처리 */
.trans-noti-box.read .trans-noti-title { color: #888; }
.trans-noti-box.read { background-color: #f6f6f6; }

/* 공지사항 - 알림내용  */
.announce-noti-box-area { display: flex; margin-top: 1.9rem; flex-direction: column; }
.announce-noti-box { display: flex; flex-direction: column; background: #fff; border-radius: 1.2rem; width: 100%; height: 7.4rem; box-sizing: border-box; margin-bottom: 0.9rem;}
.announce-noti-box-top { display: flex; justify-content: space-between; padding: 0 1.9rem; margin-bottom: 0.8rem; margin-top: 2rem;}
.announce-noti-title { font-size: 1.4rem; font-weight: 600; font-family: Pretendard; color: #333; letter-spacing: -0.035rem; }
.announce-noti-date { font-size: 1.2rem; font-weight: 500; font-family: Pretendard; color: #888; letter-spacing: -0.035rem; }
.announce-noti-box-date { padding: 0 1.9rem; margin-top: -0.8rem;}
.ico_arrowRightToAnnounce { display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/Arrow_right.png') no-repeat 0 0 / 100% auto; }

.noti-detail-box { display: flex; margin-top: 5.4rem; flex-direction: column; }
.noti-detail { padding: 2rem 2rem; display: flex; flex-direction: column; }
.noti-detail-title { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #333; }
.noti-detail-date { font-size: 1.2rem; font-weight: 500; font-family: Pretendard; color: #555; margin-top: 0.7rem;}
.noti-detail-desc { padding: 0 2rem; display: flex; flex-direction: column; }
.noti-descript { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #333; margin-bottom: 0.4rem;}
.noti-attach-area { display: flex; position: relative; flex-direction: column; background: #f7f7f7;  width: 100%; height: 10rem; box-sizing: border-box; margin-top: 2rem;}
.noti-attach-area p { font-size: 1.4rem; font-weight: 500; font-family: Pretendard; color: #333; margin-bottom: 1rem;}
.noti-attach-file { font-size: 1.2rem; font-weight: 500; font-family: Pretendard; color: #888; text-decoration: underline; }
.attach-devider { margin-top: 1.4rem; height: 0.1rem; background: #d6d5d5; }







/*휴가-휴가현황*/
.off-tab-item { flex-grow: 1; text-align: center; display: flex; font-size: 1.6rem; font-weight: 600; flex-direction: column; align-items: center; margin-top: 2rem; }
.off-tab-item.active { color: #333;}
.off-detail-title { position: relative; margin-top: 1.6rem; display: flex; margin-left: 4%; }
.off-box-detail-title { font-size: 1.65rem; font-weight: bold; font-family: Pretendard; color: #333; letter-spacing: -0.035rem; }


/*휴가-휴가신청내역*/
.off-box-car, .off-box-station { width: 100%; margin-bottom: 0.813rem; text-align: left; font-weight: 600; }
.off-box-car-title, .off-box-station-title { display: inline-block; padding-left: 3rem; width: 15%; font-size: 1.2rem; font-weight: 600; color: #888; }
.off-box-car-content, .off-box-station-content { display: inline-block; font-size: 1.5rem; font-weight: 600; color: #333; }
.off-title { color: #111; font-size: 2rem; font-weight: 600; margin-left: 1.2rem; font-family: Pretendard; letter-spacing: -0.05rem; }

/*휴가-휴가신청서 상세*/
.icon_arrowGoback { display:block; width: 3rem; height: 2rem; background: url(../images/Arrow_goback.png) no-repeat 0 0 / 100% auto; }
.hr { margin: 0 1.5rem; height: 0.1rem;  background-color: #333; }
.detail-box { margin: 0 1.5rem; font-size: 1.2rem; font-weight: 600; }
.detail-box-line { display: block; height: 6rem; line-height: 6rem; }
.detail-box-hr { border: 0; height: 0.009rem; background: #eee; }
.detail-box-title { display: inline-block; width: 8.6rem; color: #777; }
.detail-box-content { display: inline-block; color: #333; }
.detail-app { color: #EC464D; }
.off-detail-box { height: 10rem; width: inherit; }
.detail-box-line3 { display: block; height: 4rem; line-height: 4rem; }

/*휴가-휴가신청내역 및 주유-주유내역 공통*/
.off-box-wrap { position: relative; margin-top: 1.7rem; justify-content: center; }
.off-box { position:relative; width: 92%; height: 14rem; margin: 1.9rem auto; justify-content: space-between; align-items: center; background: #fff; border-radius: 1.2rem; box-sizing: border-box; } /*padding: 0rem 2rem; */
.total-date-off { padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 1.2rem; width: 100%; height: 5.5rem; box-sizing: border-box;}
.total-date-off .total-cnt-filtered p { font-size: 1.6rem; font-weight: 600; font-family: Pretendard; color: #333333; line-height: 0.188rem; letter-spacing: -0.04rem;}
.total-date-off .main-datePicker span { font-size: 1.4rem; font-family: Pretendard; font-weight: 600; color: #333333; line-height: 0.214rem; letter-spacing: -0.07rem;}
.off-box-title { padding-top: 0.2rem; }
.off-box-title-span { display: inline-block; font-size: 1.65rem; font-weight: 600; font-family: Pretendard; color: #ec464d; letter-spacing: -0.035rem; }
.off-box-title-arrow { display: inline-block; }
.off-box-content {  margin-top: 1.9rem; line-height: 2.8rem; }
.off-box-desc { padding: 0 1.9rem;}
.box-title { display: inline-block; width: 7rem; font-size: 1.45rem; font-weight: 500; font-family: Pretendard; color: #888; letter-spacing: -0.035rem; }
.box-content, .box-app { display: inline-block; font-size: 1.65rem; font-weight: 500; font-family: Pretendard; color: #333; letter-spacing: -0.035rem; }
.icon_arrowRight { display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/Arrow_right.png') no-repeat 0 0 / 100% auto;}
.off-box-ajax { display:none; justify-content: space-between; border-radius: 1.2rem; width: 92%; height: 14rem; margin: 1.9rem auto; box-sizing: border-box; background-color: #FFF;}

/*주유-주유정보등록*/
.total-photo-box { padding-top: 2rem; }
.photo-box { width: 100%; height: 20rem; border: 1px solid #2E80FF; }
.comment-box { color:#777; margin: 2rem 0; }
.detail-box-line2 { display: flex; justify-content: space-between; width: 100%; height: 6rem; line-height: 6rem; margin-bottom: 0.9rem;}
.detail-box-title2 { display: block; color: #777;}
.station-box .icons { position: absolute; width: 6rem; height: 6.5rem; top:35%; bottom: 0; right: 0.5rem; margin: 0 auto; }
.icon-search { display:inline-block; position: absolute; width: 2rem; height: 2rem; right: 1.5rem; transform: translateY(-30%); background: url(../images/icon_search.png) no-repeat 0 0 / 100% auto; }
.icon-calendar { display:inline-block; position: absolute; width: 2rem; height: 2rem; right: 1.5rem; transform: translateY(-30%); background: url(../images/icon_calendar.png) no-repeat 0 0 / 100% auto; }
.detail-box-title3 { position: relative; display: inline-block; width: 8.6rem; color: #333;}
.detail-box-content3 { position: relative; display: inline-block; width: 70%;}
.detail-box-content3-input { position: absolute; right: 1.5rem; top: 35%; transform: translateY(-45%); color: #888; font-size: 1.2rem; font-family:Pretendard; }

/*주유소 선택 - 모달*/
.btn-box { border-radius: 1.2rem; background-color: #F1F1F1; height: 5rem; margin-bottom: 0.9rem;}
.list-btn, .self-btn { display: inline-block; width: 49.5%; height: 5rem; line-height: 5rem; font-size: 1.5rem; font-weight: 500; text-align: center; }
.list-btn { border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;}
.list-btn span { font-size: 1.6rem; font-family: Pretendard; }
.self-btn { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
.self-btn span { font-size: 1.6rem; font-family: Pretendard; }
.cng-btn { color: #EEE; background-color: #333; }
/*.cng-btn:active, .cng-btn:hover { color: #EEE; background-color: #333; }
.cng-btn:visited { color: #EEE; background-color: #333; }*/
/* .station-list-save-box { position: fixed; width: 100%; bottom: 0;} */
/*.station-list-save-box { position: absolute; width: 100%; top:65%; background-color: #008aff; }*/
.station-list-save-box { position: absolute; width: 100%; margin-top: 8.4rem; }
.station-list-save-btn { position: absolute; bottom: 0; margin-bottom: 0.9rem; width: 100%; height: 5rem; border-radius: 1.2rem; color: #EEE; background-color: #333; }
.station-list-save-btn span { font-size: 1.6rem; font-family: Pretendard; }
.station-list-save-box.self-input-active { bottom: -6.5rem; }
.detail-box-content2 { position: relative; display: inline-block; width: 100%;}
.station-list-save { padding-top: 12rem; }

/*휴가종류 - 모달*/
.off-list-save-box { position: absolute; width: 100%; margin-top: 7.8rem;}
.off-list-save-btn { position: absolute; bottom: 0; margin-bottom: 0.9rem; width: 100%; height: 5rem; border-radius: 1.2rem; color: #EEE; background-color: #333; }
.off-list-save-btn span { font-size: 1.6rem; font-family: Pretendard; }

/*공통*/


/*필수값*/
.required { color: #EC464D; }

/*저장, 취소 버튼*/
.cancel-btn { display: flex; width: 100%; bottom: 0; left: 0; position: fixed; justify-content: space-between; z-index: 10; height: 5rem; background-color: #333;}
.cancle-btn-content { position: relative; line-height: 5rem; font-size: 1.5rem; color: #fff; margin: 0 auto; }
.cancle-btn-content2 { width: inherit; height: inherit; }
.cancle-btn-content-c { display: inline-block; width: 49.5%; height: inherit; font-size: 1.5rem; line-height: 5rem; color: #fff; background-color: #777; text-align: center; }
.cancle-btn-content-s { display: inline-block; width: 49.5%; height: inherit; font-size: 1.5rem; line-height: 5rem; text-align: center; color: #fff;  background-color: #333; }
.cancle-btn-content-r { display: inline-block; width: inherit; height: inherit; font-size: 1.5rem; line-height: 5rem; text-align: center; color: #fff;  background-color: #333; }


/*select*/
select{ font-family: 'Pretendard'; }
.select-box { position: relative; width: 100%; height: 5rem; line-height: 5rem; border-radius: 1.2rem; border: solid 1px #d8d8d8;}
.select-box-basic { position: relative; width: inherit; height: inherit; background: transparent; border: 0 none; outline: 0 none; padding: 0 1.5rem; }
.select-box-basic option { font-size: 1.5rem; line-height: 5rem; padding: 0 2rem; }


/*input*/
input { position: relative; width: 100%; height: 5rem; line-height: 5rem; background-color: transparent; font-family: Pretendard; text-indent: 2rem;}
input[type="text"], input[type="number"] { width: 100%; border: solid 1px #d8d8d8; border-radius: 1.2rem; }
input:disabled { background-color: #d8d8d8; height: 5rem; }
.input-box { margin-bottom: 0.9rem;}


/*기간*/
.period-box { position: relative; display: inline-block; width: 100%; height: 5rem; line-height: 5rem; border-radius: 1.2rem; }
.total-period-box { position: relative; display: inline-block; width: 49%; }
.total-period-box .icons { position: absolute; width: 6rem; height: 6.5rem; top:50%; bottom: 0; right: 0.5rem; margin: 0 auto; }
/* .period-box button { position: absolute; width: 6rem; height: 6.5rem; top:0; bottom: 0; right: 0.5rem; margin: 0 auto; } */
.show-calendar { background-color: transparent; }



/*textarea*/
.textarea-box { position: relative; width: 100%; }
textarea { position: relative; padding: 1rem; width: inherit; min-height: 10rem; line-height: 2rem; box-sizing: border-box; border-radius: 1.2rem; border: solid 1px #d8d8d8; font-family: Pretendard; }


/*등록 버튼*/
.add-btn-wrap { position: fixed; right: 1.5rem; bottom: 11.5rem; z-index: 50; }
.add-btn { width: 5rem; height: 5rem; line-height: 5rem; border-radius: 2.5rem; z-index: 5; background-color: #333; opacity: 0.8; }
.icon-add { display: flex; width: 2rem; height: 2rem; transform: translateX(75%) translateY(75%); background: url('../images/icon_add.png') no-repeat 0 0 / 100% auto;}

/*모달*/
.car-popup { margin-bottom: 20rem; }
.modal-wrap { transition: transform 0.3s ease; transform: translateY(100%); }
.modal-wrap2 { transition: transform 0.3s ease; transform: translateY(100%); }
.modal-open .modal-wrap { position: fixed; width: 100%; height: 45rem; top: calc(100% - 45rem); border-radius: 1.2rem 1.2rem 0 0; z-index: 998; transition: height 0.3s ease, top 0.3s ease; transform: translateY(0);}
.modal-open2 .modal-wrap2 { position: fixed; width: 100%; height: 50rem; top: calc(100% - 45rem); border-radius: 1.2rem 1.2rem 0 0; z-index: 998; transition: height 0.3s ease, top 0.3s ease; transform: translateY(0);}
.modal-wrap.self-input-active { height: 37rem; transition: height 0.3s ease; transform: translateY(8rem); }
.modal-wrap2.self-input-active2 { height: 32rem; transition: height 0.3s ease; transform: translateY(19rem); }
.modal-open .off-modal-wrap { top: calc(100% - 40rem); border-radius: 1.2rem; transform: translateY(0%); transition: transform 0.3s ease-out; }
.modal-open2 .off-modal-wrap2 { top: 65%; border-radius: 1.2rem; transform: translateY(0%); transition: transform 0.3s ease-out; }
.off-modal-wrap { transform: translateY(100%); transition: transform 0.3s ease-in; }
.modal-wrap, .off-modal-wrap { position: fixed; width: 100%; height: 100%; margin: 0; padding: 0; top: 100%; left: 0; z-index: 999; border-radius: 1.2rem; background-color: #FFF; }
.modal-wrap2, .off-modal-wrap2 { position: fixed; width: 100%; height: 100%; margin: 0; padding: 0; top: 100%; left: 0; z-index: 999; border-radius: 1.2rem; background-color: #FFF; }
.modal-bg { display: none; position: fixed; width: 100%; top: 0; left: 0; bottom: 0; right: 0; background-color: #777; opacity: 0.4; }
.total-modal-box { position: relative; margin: 0 1.5rem; }
.modal-title-box { padding-top: 1.5rem; margin: 1.5rem 0; line-height: 2.2rem; }
.modal-title-box-title { font-size: 1.8rem; font-weight: 600; color: #333; }
.modal-title-box-comment { margin-top: 1rem; font-size: 1.2rem; color: #777; }
.popup-icon-search { display: inline-block; position: absolute; width: 2rem; height: 2rem; right: 1.5rem; background: url(../images/icon_search.png) no-repeat 0 0 / 100% auto; }
.close-popup { display: inline-block; position: absolute; width: 2rem; height: 2rem; right: 1.5rem; background: url(../images/icon_close.png) no-repeat 0 0 / 100% auto; }
.popup-icon-search { position: absolute; width: 2rem; height: 2rem; right: 1.5rem; top: 50%; transform: translateY(-70%); color: #888; font-size: 1.2rem; font-family: Pretendard; background: url(../images/icon_search.png) no-repeat 0 0 / 100% auto; }
.popup-icon-remove { display: none; position: absolute; width: 2rem; height: 2rem; right: 1.5rem; top: 50%; transform: translateY(-70%); color: #888; font-size: 1.2rem; font-family: Pretendard; background: url(../images/icon_delete.png) no-repeat 0 0 / 100% auto; }

/*紐⑤떖 - 紐⑸줉�뿉�꽌 �꽑�깮�떆 紐⑸줉 諛뺤뒪*/
.station-list-box { padding: 1.5rem; border-radius: 1.2rem; background-color: #f7f7f7; font-size: 1.5rem; font-weight: 500; line-height: 2.8rem;}
.station-list-box ul { padding: 0 1.5rem;}
.station-list-box ul li


/*달력*/
.wrap { position: relative; justify-content: center; display: flex; background-color: transparent; }
.calender-wrapper { width: 92%; border-radius: 1.2rem; background-color: #FFF; padding: 1rem 0; z-index: 3000;}
.calender-wrapper .nav { position: relative; padding:0 2rem; height:7rem; margin-top: 1rem; align-items: center; justify-content: space-between; margin-bottom:2rem; }
.calender-wrapper .nav .nav-msg { position:relative; display:flex; width: 100%; height:4rem; line-height:3rem; justify-content: space-between;}
.calender-wrapper .nav .nav-msg .nav-msg-day { display: inline-block; font-size:1.6rem; font-weight: 500; font-family: Pretendard;}
.calender-wrapper .nav .nav-msg .nav-period-close { display: flex; justify-content:center; align-items: center; }
.icon-period-close { width:1.5rem; height:2.8rem; background: url(../images/icon_close.png) no-repeat 0 0 / 100% auto; }
.calender-wrapper .nav .nav-info { position: relative; display:flex; width:100%; height: 4rem; line-height:4rem; justify-content: space-between; align-items: center; }
.calender-wrapper .nav .current-date { display:inline-block; height: inherit; font-size: 1.6rem; font-weight: 600; text-align: center; }
.calender-wrapper .nav .nav-info button { display:inline-block; padding:0 0.9rem; border: none; outline: none; background-color: transparent; padding: 0; cursor: pointer; } 
.icon-prev { width:2rem; height:2rem; background: url(../images/Arrow_left.png) no-repeat 0 0 / 100% auto; }
.icon-next { width:2rem; height:2rem; background: url(../images/Arrow_right.png) no-repeat 0 0 / 100% auto; }
.current-date { display: inline-block; }
.calendar ul {display: flex; list-style: none; flex-wrap: wrap; font-size: 1.6rem; text-align: center; margin-top: 1rem;}
.calendar .weeks li {font-weight: 600;}
.calendar .weeks .sun {color: #EC464D;}
.calendar .days {margin-bottom: 2rem;}
.calendar ul li {position: relative; width: calc(100% / 7);}
.calendar .days li { margin-top: 30px; cursor: pointer; }
.days li.inactive {color: #ccc;}
.days li.active {color: #f2f2f2;}
.calendar .days li::before {position: absolute; content: ''; height: 4rem; width: 4rem; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
.days li::hover::before {background: #f2f2f2;}
.days li.active::before {background: #008aff;}
.sunday {color: #EC464D; }

/*기간*/
.modal-wrap-period { position: fixed; width: 100%; height: 46rem; left: 0; bottom: 0; border-radius: 1.2rem 1.2rem 0 0; background-color: #FFF; transform: translateY(100%); transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
.modal-period-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #777; opacity: 0; transition: opacity 0.3s ease-out; z-index: 2999; }
.modal-open .modal-wrap-period { transform: translateY(0); }
.modal-open .modal-period-bg { display: block; opacity: 0.4; transition: opacity 0.3s ease-out; }