@charset "UTF-8";

@import url('common.css');
@import url('jquery-ui.css');
@import url('slick.css');
@import url('swiper-bundle.min.css');
@import url('main.css');
@import url('sub.css');


/* 공통 스타일 (상단 헤더 / 상단 헤더 메뉴 / 하단 고정메뉴 / 팝업) */
#wrap {overflow:hidden;}
#container {padding-top:56px; padding-bottom:102px;}
#container.con_btm {padding-bottom:162px;}
#container.not_top {padding-top:0;}
.wrapper {padding:0 24px;}
.wrapper02 {padding:0 16px;}

/* 공통 - 배경 */
.bg_gray {background:#f2f1f6 !important;}
.bg_blue {background:#1271f3 !important;}

/* 공통 - 말줄임 효과 */
.short_words {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; text-overflow:ellipsis;}

/* 공통 - 버튼 */
.btn_gray_radius {display:block; padding:12px 24px; color:#969ca4; font-size:14px; font-weight:700; line-height:1.5; text-align:center; letter-spacing:-0.02em; border:0; border-radius:100px; background:#e8e7ed;}
.btn_blue_btm {display:block; position:relative; z-index:1; width:100%; padding:17px 0; color:#fff; font-size:17px; font-weight:700; line-height:1.5; text-align:center; letter-spacing:-0.02em; border:0; border-radius:0; background:#1271f3; transition:all .5s ease;}
.btn_blue_btm.charge_stop {background:#3e4857;}
.btn_blue_radius {display:block; width:100%; height: 52px; margin-top:70px; padding:15px 0; color:#fff; font-weight:700; text-align:center; line-height:1.5; letter-spacing:-0.02em; border:0; border-radius:12px; background:#0b63db;}
.btn_blue_radius.sky {background:#009bff;}
.btn_remove {display:block; width:32px; height:32px; text-indent:-9999px; border:0; background:url(../images/ico/ico_i_remove.svg) no-repeat; background-size:contain;}
.btn_blue_txt {position:absolute; z-index:1; top:50%; right:0; transform:translateY(-50%); color:#1271f3; font-weight:500; line-height:1.4; letter-spacing:-0.02em; border:0; background:none;}

.btn_gray_btm {display:block; position:relative; z-index:1; width:100%; padding:17px 0; color:#969ca4; font-size:17px; font-weight:700; line-height:1.5; text-align:center; letter-spacing:-0.02em; border:1px solid #ddd; border-radius:0; transition:all .5s ease;}

/* 네이버 로그인 버튼 */
.btn_naver_radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 16px 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    border-radius: 12px;
    background: #03C75A;
}
.btn_naver_radius img {
	margin-left: 18px;
    width: 17px; /* 아이콘 이미지의 너비 */
    height: auto; /* 아이콘 이미지의 높이 */
    vertical-align: middle; /* 아이콘 이미지를 텍스트와 수직 정렬 */
}

.btn_naver_radius span {
    flex-grow: 1;
    margin-right: 25px;
}


/* 카카오 로그인 버튼 */
.btn_kakao_radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 17px 0;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    border-radius: 12px;
    background: #FEE500;
}
.btn_kakao_radius img {
	margin-left: 15px;
    width: 22px; /* 아이콘 이미지의 너비 */
    height: auto; /* 아이콘 이미지의 높이 */
    vertical-align: middle; /* 아이콘 이미지를 텍스트와 수직 정렬 */
}

.btn_kakao_radius span {
    flex-grow: 1;
    margin-right: 25px;
}

/* 20221219 추가 - 디폴트 : 그레이 / 활성화 : 블루 */
.btn_gray_blue {display:block; position:relative; z-index:1; width:100%; padding:17px 0; color:#fff; font-size:17px; font-weight:700; line-height:1.5; text-align:center; letter-spacing:-0.02em; border:0; border-radius:0; background:#B0B2B6; transition:all .5s ease;}
.btn_gray_blue.on {background:#1271f3;}

/* 20221220 추가 */
.btn_wrap_btm {display:flex; align-items:center;}
.btn_blue_btm.po_gray {background:#3e4857;}
.btn_blue_radius.blue_border {color:#1271f3; border:1px solid #0b63db; background:#fff;}

/* 공통 - 텍스트스타일 */
.txt_tit {font-size:20px; font-weight:700; line-height:24px;}
.txt_tit_marin {display:block; margin:30px 0 60px;}
.txt_tit .tit_box{display: flex; justify-content: space-between;}
h3 {font-size:18px; font-weight:700;}
h4 {margin-left:12px; font-size:19px; font-weight:700; line-height:1.5; letter-spacing:-0.025em;}
h5 {font-size:18px; font-weight:700; line-height:22px;}
h6 {font-size:16px; font-weight:700; line-height:19.2px;}

/* 공통 - 테이블 스타일 */
.terms_table th, td {border: 1px solid black; border-collapse: collapse; font-size: 12px; padding: 5px; text-align: center;}
.terms_table td {font-size: 10px;}

/* 공통 - 동그라미 로고 */
.logo_small {flex-shrink:0; width:24px; height:24px;}
.logo_medium {flex-shrink:0; width:26px; height:26px;}
.logo_medium02 {flex-shrink:0; width:28px; height:28px;}
.logo_large {flex-shrink:0; width:32px; height:32px;}
.logo_event_mng {flex-shrink:0; width:36px; height:36px;}
img.icon_event {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* 공통 - 아이콘 (+ 회원가입 완료 / 예약 완료) */
.succ_check {text-align:center;}
.succ_check .txt_box::before {content:''; display:block; width:70px; height:70px; margin:0 auto; background:url(../images/ico/ico_succ_check.svg) no-repeat; background-size:contain;}
.succ_check .txt_box .txt_tit {display:block; margin-top:34px; font-size:26px; font-weight:700; line-height:1.38;}
.succ_check .txt_box .txt_desc {margin-top:44px; font-size:18px; font-weight:600; line-height:22px;}

/* 공통 - 토글버튼 */
.toggle_wrap li label input[type="checkbox"] {position:absolute; z-index:-1; left:-9999px; width:0; height:0; overflow:hidden; clip:rect(0,0,0,0);}

.toggle_wrap {margin-top:8px;}
.toggle_wrap li {display:flex; justify-content:space-between; align-items:center; padding:16px 0;}
.toggle_wrap li:last-child {padding-bottom:0;}
.toggle_wrap li + li {border-top:1px solid #eee;}
.toggle_wrap li p {color:#3e4857; font-size:17px; font-weight:500; line-height:20px;}

.toggle_wrap li label span {display:block; position:relative; width:52px; height:32px; border-radius:100px; background:#e9e9e9; transition:background-color .3s ease;}
.toggle_wrap li label span::before {content:''; position:absolute; z-index:1; top:50%; left:2px; transform:translateY(-50%); width:28px; height:28px; box-shadow:0 0 3px rgba(0,0,0,.1); border-radius:100px; background:#fff; transition:left .3s ease;}
.toggle_wrap li label input:checked + span {background:#1271f3;}
.toggle_wrap li label input:checked + span::before {left:calc(100% - 30px);}

/* 상단 헤더 (header) */
header {display:flex; justify-content:space-between; align-items:center; position:fixed; z-index:9999; top:0; left:0; right:0; padding:12px 16px; background:#fff;}
header.hd_right {justify-content:flex-end; position:static;}
header.hd_center {justify-content:center;}
header.hd_border {border-bottom:1px solid #ddd;}
header .hd_none {opacity:0;}

header div {display:flex; align-items:center;}

header h2 {width:32px; height:32px; text-indent:-9999px; cursor:pointer; border:0; background-image:url(../images/ico/ico_hd_menu.svg); background-repeat:no-repeat; background-size:contain;}
header h7 {width:32px; height:32px; text-indent:-9999px; cursor:pointer; border:0; background-image:url(../images/ico/ico_menu.svg); background-repeat:no-repeat; background-size:contain;}
header .hd_notify {display:block; position:relative; width:32px; height:32px; margin-right:10px; text-indent:-9999px; border:0; background:url(../images/ico/ico_hd_notify.svg) no-repeat; background-size:contain;}
header .hd_notify.hd_ico_white {background:url(../images/ico/ico_hd_notify_white.svg) no-repeat;}
header .hd_notify.on::after {content:''; position:absolute; z-index:1; top:5px; right:2px; width:5px; height:5px; border-radius:10px; background:#ff4a4a;}
header .hd_back {display:block; width:32px; height:32px; text-indent:-9999px; border:0; background:url(../images/ico/ico_hd_back.svg) no-repeat; background-size:contain;}
header .hd_close {display:block; width:32px; height:32px; text-indent:-9999px; border:0; background:url(../images/ico/ico_hd_close.svg) no-repeat; background-size:contain;}
header .hd_setting {display:block; width:32px; height:32px; text-indent:-9999px; border:0; background:url(../images/ico/ico_hd_setting_white.svg) no-repeat; background-size:contain;}
header .hd_refresh {display:block; width:32px; height:32px; text-indent:-9999px; border:0; background:url(../images/ico/ico_hd_refresh.svg) no-repeat; background-size:contain;}

/* 상단 헤더 메뉴 */
header nav {position:fixed; z-index:9999; top:0; left:100%; bottom:0; width:100%; padding:56px 24px 100px; overflow-y:auto; background:#f2f1f6; -ms-overflow-style:none; scrollbar-width:none; transition:left .5s ease;}
header nav.on {left:0;}
header nav::-webkit-scrollbar {display:none;}
header nav strong {color:#969ca4; font-size:22px; font-weight:700; line-height:1.5; letter-spacing:-0.02em;}
header nav strong span {color:#3e4857;}

header nav .menu {display:flex; align-items:center; margin:28px -6px 0;}
header nav .menu li {width:calc(33.333% - 12px); margin:0 6px; text-align:center; border-radius:8px; background:#fff;}
header nav .menu li a {display:block; width:100%; height:100%; padding:19px 0; font-size:14px; font-weight:700; line-height:12px;}

header nav .menu li a::before {content:''; display:block; width:32px; height:32px; margin:0 auto 14px; background-repeat:no-repeat; background-size:contain;}
header nav .menu li .nav_search::before {background-image:url(../images/ico/ico_nav_search.svg);}
header nav .menu li .nav_charge::before {background-image:url(../images/ico/ico_nav_charge.svg);}
header nav .menu li .nav_info::before {background-image:url(../images/ico/ico_nav_info.svg);}

header nav .gnb {margin:24px -24px 0;}
header nav .gnb li [class^="gnb_"] {display:block; width:100%; padding:18px 24px; color:#3e4857; font-weight:700; line-height:1.4; letter-spacing:-0.02em; border-bottom:1px solid #dcdbdf;}
header nav .gnb .dep {display:none; padding:20px 0; background:#fff; border-bottom:1px solid #dcdbdf;}
header nav .gnb .dep li a {display:block; padding:6px 32px; color:#686b6f; font-size:14px; font-weight:500; line-height:1.4; letter-spacing:-0.02em;}

header nav .gnb li .gnb_arrow {background-image:url(../images/ico/ico_gnb_arrow.svg); background-repeat:no-repeat; background-size:32px 32px; background-position:center right 20px;}
header nav .gnb li.on .gnb_arrow {background-image:url(../images/ico/ico_gnb_arrow_on.svg);}

header nav .gnb li [class^="gnb_"]::before {content:''; display:inline-block; width:24px; height:24px; margin:0 8px 3px 0; vertical-align:middle; background-repeat:no-repeat; background-size:contain;}
header nav .gnb li .gnb_book::before {background-image:url(../images/ico/ico_gnb_book.svg);}
header nav .gnb li .gnb_subscript::before {background-image:url(../images/ico/ico_gnb_subscript.svg);}
header nav .gnb li .gnb_lpoint::before {background-image:url(../images/ico/ico_gnb_lpoint.svg);}
header nav .gnb li .gnb_setting::before {background-image:url(../images/ico/ico_gnb_setting.svg);}
header nav .gnb li .gnb_bkmkStn::before {background-image:url(../images/ico/ico_nav_search.svg);}

/* 20221220 추가 */
header nav .gnb li .gnb_customer::before {background-image:url(../images/ico/ico_gnb_customer.svg);}

header nav .nav_logout {width:120px; margin:34px auto 0;}
header nav .nav_close {display:block; position:absolute; z-index:1; top:12px; right:15px; width:32px; height:32px; text-indent:-9999px; background:url(../images/ico/ico_hd_close.svg) no-repeat; background-size:contain;}

/* 충전소 찾기 헤더 */
header.hd_searchbox {padding:8px 20px; background:transparent;}
header.hd_searchbox .hd_search {display:block; position:relative; width:100%; height:48px; padding:14px 24px; color:#969ca4; font-weight:500; line-height:19px; box-shadow:3px 3px 10px rgba(0,0,0,.1); border:1px solid #eee; border-radius:50px; background:#fff;}
header.hd_searchbox .hd_search::after {content:''; position:absolute; z-index:1; top:50%; right:12px; transform:translateY(-50%); width:24px; height:24px; background:url(../images/ico/ico_hd_search.svg) no-repeat; background-size:contain;}
header.hd_searchbox h2 {flex-shrink:0; width:48px; height:48px; margin-left:8px; background-image:url(../images/ico/ico_hd_search_menu.svg);}

header.hd_searchbox .tab {display:inline-block; position:fixed; z-index:9999; top:64px; left:20px; width:calc(100% + 4px); margin:0 -20px; padding: 0 20px 10px; overflow-x:auto; white-space:nowrap; -ms-overflow-style:auto; scrollbar-width:auto;}
header.hd_searchbox .tab::-webkit-scrollbar {display:none;}
header.hd_searchbox .tab::after {display:none;}
header.hd_searchbox .tab li {display:inline-block; /* margin:0 4px; */}
header.hd_searchbox .tab li a {display:flex; align-items:center; padding:6px 12px 6px 8px; color:#969ca4; font-size:13px; font-weight:600; box-shadow:3px 3px 10px rgba(0,0,0,.1); border:1px solid #eee; border-radius:100px; background:#fff;}
header.hd_searchbox .tab li a::before {content:''; display:inline-block; width:20px; height:20px; margin-right:2px; background-repeat:no-repeat; background-size:contain;}
header.hd_searchbox .tab .tab_filter a::before {background-image:url(../images/ico/ico_tab_filter.svg);}
header.hd_searchbox .tab .tab_use a::before {background-image:url(../images/ico/ico_tab_use.svg);}
header.hd_searchbox .tab .tab_bk a::before {background-image:url(../images/ico/ico_tab_bk.svg);}
header.hd_searchbox .tab .tab_move a::before {background-image:url(../images/ico/ico_tab_move.svg);}

header.hd_searchbox .tab li.on a {color:#fff; border:1px solid #0b63db; background:#1271f3;}
header.hd_searchbox .tab .tab_filter.on a::before {background-image:url(../images/ico/ico_tab_filter_on.svg);}
header.hd_searchbox .tab .tab_use.on a::before {background-image:url(../images/ico/ico_tab_use_on.svg);}
header.hd_searchbox .tab .tab_bk.on a::before {background-image:url(../images/ico/ico_tab_bk_on.svg);}
header.hd_searchbox .tab .tab_move.on a::before {background-image:url(../images/ico/ico_tab_move_on.svg);}

header .header_title {font-weight: 700;}

/* 하단 고정메뉴 (btm_menu) */
.btm_menu {position:fixed; z-index:99999; left:0; right:0; bottom:0;}
.btm_menu .nav {display:flex; align-items:center; text-align:center; position:relative; z-index:2; box-shadow:0 -2px 20px rgba(0,0,0,.05); border-radius:24px 24px 0 0; background:#fff;}
.btm_menu.btm_menu_border .nav {box-shadow:0 -2px 20px rgba(0,0,0,.03); border-top:1px solid #ddd; border-radius:0; transition:border-radius .3s ease;}
.btm_menu .nav li {flex:1 1 25%;}
.btm_menu .nav li a {display:block; width:100%; height:100%; padding:4px 0 8px; color:#969ca4; font-size:12px; font-weight:600; line-height:12px;}

.btm_menu .nav li a::before {content:''; display:block; width:32px; height:32px; margin:0 auto; background-repeat:no-repeat; background-size:contain;}
.btm_menu .nav li .btm_home::before {background-image:url(../images/ico/ico_btm_home.svg);}
.btm_menu .nav li .btm_search::before {background-image:url(../images/ico/ico_btm_search.svg);}
.btm_menu .nav li .btm_charge::before {background-image:url(../images/ico/ico_btm_charge.svg);}
.btm_menu .nav li .btm_progress::before {background-image:url(../images/ico/gnb_new.svg);}
.btm_menu .nav li .btm_info::before {background-image:url(../images/ico/ico_btm_info.svg);}
.btm_menu .nav li .btm_book::before {background-image:url(../images/ico/ico_btm_book.svg);}

.btm_menu .nav li.on a {color:#151515;}
.btm_menu .nav li.on .btm_home::before {background-image:url(../images/ico/ico_btm_home_on.svg);}
.btm_menu .nav li.on .btm_search::before {background-image:url(../images/ico/ico_btm_search_on.svg);}
.btm_menu .nav li.on .btm_charge::before {background-image:url(../images/ico/ico_btm_charge_on.svg);}
.btm_menu .nav li.on .btm_info::before {background-image:url(../images/ico/ico_btm_info_on.svg);}
.btm_menu .nav li.on .btm_book::before {background-image:url(../images/ico/ico_btm_book_on.svg);}

/* 하단 고정메뉴 -> 충전중 표시 */
.btm_menu .charge_state {display:flex; align-items:center; margin:0 10px 15px; padding:17px 30px 18px; border-radius:100px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(0,87,255,.8) url(../images/ico/ico_report_state_arrow.svg) no-repeat; background-size:9px 14px; background-position:center right 28px; transition:transform .5s ease;}
.btm_menu .charge_state div {position:relative;}
.btm_menu .charge_state div + div::before {content:''; position:absolute; z-index:1; top:50%; left:0; transform:translateY(-50%); width:1px; height:40px; opacity:.2; background:#fff;}
.btm_menu .charge_state .ing {flex-shrink:0; text-align:center;}
.btm_menu .charge_state .ing strong {color:#fff; font-size:25px; font-weight:800; letter-spacing:-0.025em;}
.btm_menu .charge_state .ing p {margin-top:6px; color:#fff; font-size:14px; font-weight:700; opacity:.8; letter-spacing:-0.025em;}
.btm_menu .charge_state .move {margin-left:16px; padding-left:16px;}
.btm_menu .charge_state .move strong {color:#fff; font-weight:700; letter-spacing:-0.025em;}
.btm_menu .charge_state .move span {display:block; margin-top:8px; color:#fff; font-size:14px; font-weight:500; letter-spacing:0.025em; word-break:keep-all; opacity:.8;}

/* 탭 메뉴 */
.tab_wrap .tab.fix {position:fixed; z-index:999; top:56px; left:0; right:0;}

.tab_wrap .tab {display:flex; align-items:center; border-bottom:2px solid #ddd; background:#fff;}
.tab_wrap .tab li {position:relative; width:50%;}
.tab_wrap .tab li::after {content:''; position:absolute; z-index:1; bottom:-2px; left:50%; transform:translateX(-50%); width:0; height:2px; background:#000; transition:width .5s ease;}
.tab_wrap .tab li a {display:block; padding:12px 0 20px; color:#b0b2b6; font-weight:700; line-height:1; letter-spacing:0; text-align:center;}
.tab_wrap .tab li.on::after {width:100%;}
.tab_wrap .tab li.on a {color:#000;}

/* 팝업 */
.modal_wrap {display:none; position:fixed; z-index:99999; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6);}
.modal_wrap .modal_box {position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 48px); padding:32px; border-radius:16px; background:#fff;}
.modal_wrap .modal_box form .content_area {border-radius: 16px; padding: 20px; background: #F2F1F6;}

.modal_wrap .btn_wrap {display:flex; align-items:center; margin-top:34px;}
.modal_wrap .btn_wrap button {width:50%; padding:16px 0; font-size:15px; font-weight:700; letter-spacing:-0.02em; border-radius:6px;}
.modal_wrap .btn_wrap button + button {margin-left:8px;}
.modal_wrap .btn_wrap .btn_cancel {color:#969ca4; border:1px solid #ddd;}
.modal_wrap .btn_wrap .btn_ok {color:#fff; background:#1271f3;}

/* 충전소 찾기 팝업 */
.modal_guide_map .modal_box label input {position:absolute; z-index:-1; left:-9999px; width:0; height:0; overflow:hidden; clip:rect(0,0,0,0);}

.modal_guide_map .modal_box .txt_tit {line-height:1.3; letter-spacing:-0.02em; word-break:keep-all;}
.modal_guide_map .modal_box p {margin-top:8px; color:#969ca4; font-weight:400; line-height:1.5; letter-spacing:-0.02em; word-break:keep-all;}
.modal_guide_map .modal_box .map_choice {margin-top:29px;}
.modal_guide_map .modal_box .map_choice li + li {margin-top:8px;}
.modal_guide_map .modal_box .map_choice label {display:flex; align-items:center;}
.modal_guide_map .modal_box .map_choice label span i {display:inline-block; width:32px; height:32px; margin-right:8px; background-repeat:no-repeat; background-size:contain;}
.modal_guide_map .modal_box .map_choice label.kakaomap span i {background-image:url(../images/ico/ico_pop_kakaomap.png);}
.modal_guide_map .modal_box .map_choice label.tmap span i {background-image:url(../images/ico/ico_pop_tmap.png);}
.modal_guide_map .modal_box .map_choice label.applemap span i {background-image:url(../images/ico/ico_pop_applemap.png);}
.modal_guide_map .modal_box .map_choice label span {display:flex; align-items:center;  width:100%; padding:12px 16px; font-size:15px; font-weight:600; line-height:15px; letter-spacing:-0.02em; border:1px solid #ddd; border-radius:8px; background:#fff;}

.modal_guide_map .modal_box .map_choice label input:checked + span {color:#1271f3; border:1px solid #1271f3; background:#f5f8fc;}

.modal_guide_map .modal_box .navi {display:flex; align-items:flex-start; margin-top:27px;}
.modal_guide_map .modal_box .navi input + i {display:inline-block; width:22px; height:22px; background-image:url(../images/ico/ico_pop_check.svg); background-repeat:no-repeat; background-size:contain;}
.modal_guide_map .modal_box .navi input ~ span {display:inline-block; margin-left:6px; font-size:15px; font-weight:400; line-height:15px; letter-spacing:-0.02em; word-break:keep-all;}

.modal_guide_map .modal_box .navi input:checked + i {background-image:url(../images/ico/ico_pop_check_on.svg);}

.modal_guide_map .modal_box .pop_close {display:block; width:124px; margin:34px auto 0; padding:16px 0; color:#fff; font-size:15px; font-weight:700; line-height:15px; letter-spacing:-0.02em; text-align:center; border:1px solid #0b63db; border-radius:6px; background:#1271f3;}

/* 결제수단 관리 팝업 */
.modal_card_name strong {font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-0.02em;}
.modal_card_name form {margin-top:14px;}
.modal_card_name form .form_box input {border-color:#151515;}
.modal_card_name form .form_box .inp_remove {opacity:1;}

/* 충전현황 팝업 (주차할인, 충전중단) */
.modal_parking_discount .txt_tit,
.modal_charge_stop .txt_tit {line-height:1.3; letter-spacing:-0.02em;}

.modal_parking_discount form {margin-top:14px;}

.modal_charge_stop p {margin-top:12px; color:#656d79; font-weight:400; line-height:1.5;}

/* 충전기 상태표시 팝업 */
.modal_pin_info .modal_box {width:calc(100% - 80px); padding:24px;}
.modal_pin_info .modal_box .pin_box {margin-top:16px;}
.modal_pin_info .modal_box .pin_box li {width:100%; padding:16px 16px 16px 70px; text-align:left; border-radius:8px; background-color:#f5f6f8; background-repeat:no-repeat; background-position:16px center;}
.modal_pin_info .modal_box .pin_box li + li {margin-top:8px;}
.modal_pin_info .modal_box .pin_box li strong {font-size:15px;}
.modal_pin_info .modal_box .pin_box li p {margin-top:8px; color:#666; font-size:12px; font-weight:400; line-height:1.5; word-break:keep-all;}
.modal_pin_info .modal_box .pop_close {position:absolute; z-index:1; top:20px; right:20px; width:32px; height:32px; text-indent:-9999px; background:url(../images/ico/ico_i_popclose.svg) no-repeat; background-size:contain;}

.modal_pin_info .modal_box .pin_box li.pin01 {background-image:url(../images/ico/ico_pop_pin01.svg);}
.modal_pin_info .modal_box .pin_box li.pin02 {background-image:url(../images/ico/ico_pop_pin02.svg);}
.modal_pin_info .modal_box .pin_box li.pin03 {background-image:url(../images/ico/ico_pop_pin03.svg);}
.modal_pin_info .modal_box .pin_box li.pin04 {background-image:url(../images/ico/ico_pop_pin04.svg);}

/* 새 컨펌 팝업 스타일 250218 강성혁 */
.modal_wrap .icon_modal_box {position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 48px);
    padding:8px; border-radius:16px; background:#fff; display: flex; flex-direction: column; align-items: center;}
.modal_wrap .title_txt {font-weight: 700; font-size: 18px; line-height: 25.2px; width: 100%; text-align: center;}
.modal_wrap .icon_modal_box .alert_icon {padding-top: 24px; padding-bottom: 20px;}
.modal_wrap .icon_modal_box .content_txt {font-weight: 500; font-size: 14px; line-height: 19.6px; color: #737687; width: 100%; text-align: center; margin-bottom: 20px;}
.modal_wrap .icon_modal_box .input_box {padding: 15px 15px; gap: 10px; width: 90%; height: 46px; background: #F5F8FC; border-radius: 6px; border: none; margin-bottom: 18px;}
.modal_wrap .icon_modal_box .icon_modal_btn {display: flex; flex-direction: column; width: 100%;}
.modal_wrap .icon_modal_box .icon_modal_btn button {width: 100%;}
.modal_wrap .icon_modal_box .icon_modal_btn .confirm_btn {background-color: #006EF1; color: #FFFFFF; font-weight: 500; font-size: 14px;
    line-height: 15px; border-radius: 6px; padding-top: 16px; padding-bottom: 16px;}
.modal_wrap .icon_modal_box .icon_modal_btn .cancel_btn {color: #737687; font-size: 14px; padding: 16px;}

.modal_wrap .icon_modal_box .icon_modal_horiz_btn {display: flex; flex-direction: row; width: 100%; align-items: center;}
.modal_wrap .icon_modal_box .icon_modal_horiz_btn .horizontal_cancel_btn {width: auto; height: 48px; background: #FFFFFF; border: 1px solid #8E919F; border-radius: 6px; flex: 1; order: 0; color: #8E919F;
margin: 0 5px 5px 5px;}
.modal_wrap .icon_modal_box .icon_modal_horiz_btn .horizontal_confirm_btn {width: auto; height: 48px; background: #006EF1; border-radius: 6px; flex: 1; order: 1;  color: white;
    margin: 0 5px 5px 5px;}

.modal_wrap .new_confirm_box {position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100% - 48px);
    padding:30px; border-radius:16px; background:#fff; display: flex; flex-direction: column; align-items: center;}
.modal_wrap .new_confirm_box .btn_wrap {display: flex; align-items: center; margin-top: 16px; width: 100%;}
.modal_wrap .new_confirm_box .content_txt {font-weight: 500; font-size: 14px; line-height: 19.6px; color: #737687; width: 100%; text-align: center;}

/* 롤링팝업 230407 */
.roll_popup {position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.roll_popup .slick-slider img {height: 370px; display: block;}
.roll_popup .slick-list {height: 370px;}
.roll_popup .popup {position:absolute; z-index:1; left:50%; max-width:260px; width:250px; top:50%; transform:translate(-50%,-50%);}
.roll_popup .pop_close {display:flex; justify-content:space-between; height:50px; background:#fff;}
.roll_popup .pop_close label {display:block; padding:0 15px; line-height:50px;}
.roll_popup .pop_close label span {font-size:15px;}
.roll_popup .pop_close a {display:block; width:50px; height:50px; text-indent:-9999px; background:url(../images/ico/ico_popup_close_50.jpg);}
.roll_popup .slick-dots {display:flex; position:absolute; z-index:1; left:50%; padding:12px 12px; bottom:12px; transform:translateX(-50%); border-radius:100px; background:rgba(0,0,0,0.2);}
.roll_popup .slick-dots li {width:8px; height:8px; margin:0 4px; border-radius:100%; cursor:pointer; 
 text-indent:-9999px; background:#fff; opacity:0.5;}
.roll_popup .slick-dots li.slick-active {opacity:1;}
.roll_popup .slick-arrow {position:absolute; z-index:1; top:50%; margin-top:-30px; color:#fff; text-indent:-9999px;}
.roll_popup .slick-arrow.slick-prev {left:-50px; width:60px; height:60px; background:url(../images/ico/ico_pop_prev.svg) no-repeat center;}
.roll_popup .slick-arrow.slick-next {right:-50px; width:60px; height:60px; background:url(../images/ico/ico_pop_next.svg) no-repeat center;}

/* 로딩화면 추가 */
.loading {position:fixed; z-index:999999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.loading .spinner {position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:70px; text-align:center;}
.loading .spinner > div {width:18px; height:18px; background-color:#fff; border-radius:100%; display:inline-block; -webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both; animation:sk-bouncedelay 1.4s infinite ease-in-out both;}
.loading .spinner .bounce1 {-webkit-animation-delay:-0.32s; animation-delay:-0.32s;}
.loading .spinner .bounce2 {-webkit-animation-delay:-0.16s; animation-delay:-0.16s;}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform:scale(0) }
    40% { -webkit-transform:scale(1.0) }
}

/* 로플랫 위치허용 및 알림허용 */
.loplat_loc_popup {position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.terms_noti_popup {position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.push_noti_popup {position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.private_popup {position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}

/* 토스트 팝업 20240717 강성혁 추가 */
.toastMsg_div {opacity:0; position:fixed; bottom:-100px; left:50%; transform:translate(-50%,0); padding:20px; background:rgba(0, 0, 0, 0.70); border-radius:100px; color:#fff; box-shadow:3px 4px 11px 0px #00000040; transition:all 0.5s;}
.toastMsg_div.active {opacity:100%; bottom:65px;}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform:scale(0);
        transform:scale(0);
    } 40% {
          -webkit-transform:scale(1.0);
          transform:scale(1.0);
      }
}



/*****************************************************************************************************************************************************************************************/
@media all and (max-width:260px) {
	/* 230407 추가 */
	.roll_popup .popup {width:90vw;}
}

@media all and (max-width:374px) {
    /* 하단 고정메뉴 -> 충전중 표시 */
    .btm_menu .charge_state .move {margin-left:12px; padding-left:12px;}

    /* 팝업 */
    .modal_wrap .modal_box {padding:32px 24px;}

    .modal_guide_map .modal_box .navi input ~ span {line-height:1.4;}

    .modal_pin_info .modal_box {width:calc(100% - 48px);}
}

@media all and (max-width:359px) {
    /* 하단 고정메뉴 -> 충전중 표시 */
    .btm_menu .charge_state {padding:17px 22px 18px;  background-position: center right 20px;}
    .btm_menu .charge_state .ing strong {font-size:20px;}
    .btm_menu .charge_state .ing p {font-size:13px;}
    .btm_menu .charge_state .move {margin-left:10px; margin-right:10px; padding-left:10px;}
    .btm_menu .charge_state .move strong {font-size:14px;}
    .btm_menu .charge_state .move span {font-size:13px;}

	/* 공통 - 토글버튼 */
	.toggle_wrap li p {font-size:16px;}

}
/******************** 알림 설정 팝업 관련 ****************************************/
.push_agree_popup, .push_disagree_popup {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* 화면 중앙 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    z-index: 1000; /* 다른 요소들 위에 위치 */
}

.popup-container {
    width: 320px;
    height: auto; /* 높이 자동 조정 */
    background: white;
    border-radius: 8px;
    position: relative;
    padding: 16px; /* 내부 여백 추가 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.popup-header {
    color: #222222;
    font-size: 14px;
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 8px;
}

.popup-divider {
    width: 100%;
    border-top: 1px solid #E0E0E0;
    margin: 8px 0;
}

.popup-message,
.popup-sub-message,
.popup-status {
    color: #222222;
    font-size: 12px;
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 8px; /* 각 메시지 간격 조정 */
}

.button1 {
    width: 100%;
    height: 48px;
    background: white;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px; /* 버튼 위 여백 추가 */
    cursor: pointer; /* 커서 포인터로 변경 */
    transition: background 0.3s;
}

.button1:hover {
    background: #F5F5F5; /* 버튼 호버 시 색상 변경 */
}

.button-text {
    text-align: center;
    color: #777777;
    font-size: 14px;
    font-family: 'Noto Sans CJK KR', sans-serif;
    font-weight: 400;
    line-height: 21px;
}

/******************** toastr 스타일설정  ****************************************/
.toast-bottom-center {
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
}