/* Noto Sans KR 로컬 폰트 연결 */
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Noto Sans KR';
src: url('../font/NotoSansKR-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
--main-color:#47b5a3;
--main-color-op10:rgba(71,181,163, .1);
--main-color-op20:rgba(71,181,163, .2);
--main-color-op30:rgba(71,181,163, .3);
--main-color-op50:rgba(71,181,163, .5);
--sub-color:#f0a451;
--sub-color-op10:rgba(240,164,81, .1);
--sub-color-op20:rgba(240,164,81, .2);
--sub-color-op30:rgba(240,164,81, .3);
--sub-color-op50:rgba(240,164,81, .5);
--red_color:#fd665f;
--red_color-op10:rgba(253, 102, 95, .1);
--green_color:#217346;
--gold_color:#ffaa57;
--gold_color2:#ffe597;
--gold_color-op10:rgba(255, 170, 87, .1);
--gold_color-op30:rgba(255, 170, 87, .3);
--gold_gradient_color:linear-gradient(to top left, var(--gold_color), var(--gold_color2), var(--gold_color));
--silver_color:#9fa4a7;
--silver_color2:#e7e8f4;
--silver_color-op10:rgba(159, 164, 167, .1);
--silver_color-op30:rgba(159, 164, 167, .3);
--silver_gradient_color:linear-gradient(to top left, var(--silver_color), var(--silver_color2), var(--silver_color));
--bronze_color:#c07e6e;
--bronze_color2:#ffc3a1;
--bronze_color-op10:rgba(192, 126, 110, .1);
--bronze_color-op30:rgba(192, 126, 110, .3);
--bronze_gradient_color:linear-gradient(to top left, var(--bronze_color), var(--bronze_color2), var(--bronze_color));
}
input:focus-visible { outline:none; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ellipsis_2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; white-space:inherit; line-height:1.2; }
.body_hidden { overflow:hidden; }
* { margin:0; padding:0; text-indent:0; font-size:14px; text-decoration:none; font-family: "Noto Sans KR", sans-serif; font-weight:400; color:inherit; box-sizing:border-box; }
body { display:inline-flex; width:100%; padding-top:70px; flex-direction:column; float:left; }
h1, h2, h3, h4, h5, h6, p { margin:0; padding:0; }
a { text-decoration:none; color:inherit; }
ul, li { margin:0; padding:0; list-style:none; text-indent:0; }
table { table-layout:fixed; border-collapse:collapse; }
.pc_only { display:inline-block; }
.mo_only { display:none; }
.btn_default { display:inline-flex; width:auto; height:50px; padding:0 20px; background:var(--main-color); border:1px solid var(--main-color); border-radius:6px; justify-content:center; align-items:center; font-size:16px; font-weight:bold; color:#fff; cursor:pointer; }
.btn_default i { margin-right:10px; font-size:16px; color:#fff; }
.btn_default:hover { background:#fff; border-color:var(--main-color); color:var(--main-color); transition:all .2s; }
.btn_default:hover i { color:var(--main-color); transition:all .2s; }
.btn_default2 { height:40px; padding:0 15px; font-size:15px; }
input:read-only, input:disabled, select:disabled { background-color:#f6f6f6; color:#999; cursor:default; }
.password { position:relative; }
.password input { width:100%; padding-right:36px !important }
.password .show_pw { display:inline-flex; width:20px; height:20px; justify-content:center; align-items:center; position:absolute; top:50%; right:10px; transform:translateY(-50%); cursor:pointer; }
.password .show_pw i { display:none; width:100%; height:100%; justify-content:center; align-items:center; font-size:15px; font-weight:normal; color:#999; }
.password .show_pw i.fa-eye-slash { display:inline-flex; }
.password .show_pw i:hover { color:var(--main-color); transition:all .2s; }
.pwConfirm { display:none; width:100%; margin:5px 0; padding:0 10px; font-size:13px; font-weight:normal; }
.errorMsg { display:none; width:100%; margin-top:5px; padding:0 5px; font-size:13px; color:var(--red_color); }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.date_period_box { display:inline-flex; position:relative; }
.period_box { display:inline-flex; position:relative; }
.date_period_box>span { display:inline-flex; padding:0 5px; font-size:16px; justify-content:center; align-items:center; }
.period_box:before { content:'\f073'; display:inline-flex; width:34px; height:34px; justify-content:center; align-items:center; font-family:'Font Awesome 6 Pro'; font-weight:bold; font-size:14px; color:#999; position:absolute; top:0; right:0; z-index:1; pointer-events:none; }
.filter_wrap .date_period_box input { width:180px; }
.date_period_box + button { margin-left:10px; }
.ui-datepicker .ui-widget-header { background: var(--main-color); }
.ui-datepicker-current-day .ui-state-default { background:var(--main-color) !important; }
.ui-datepicker-today .ui-state-default { color:var(--main-color); }
.ui-datepicker .ui-datepicker-today .ui-state-default { background:var(--main-color-op10); }
.ui-datepicker .ui-datepicker-today .ui-state-default.ui-state-active { background:var(--main-color) !important; color:#fff; }
.ui-datepicker-buttonpane button[data-handler="today"] { color:var(--main-color); }
.ui-datepicker-calendar tr { border:none; text-align:center; }
.ui-datepicker .ui-state-disabled .ui-state-default { color:#999; }
/* toast */
.toast table { border: 1px solid rgba(0,0,0,.1); border-collapse: collapse; box-sizing: border-box; color: #222; margin: 12px 0 14px; width: auto }
.toast table td, .toast table th { border: 1px solid rgba(0,0,0,.1); height: 32px; padding: 5px 14px 5px 12px }
.toast table th { background-color: #555; color: #fff; font-weight: 300; padding-top: 6px }
.toast th p { color: #fff; margin: 0 }
.toast td p { margin: 0; padding: 0 2px }
.toast td.toastui-editor-cell-selected { background-color: #d8dfec }
.toast th.toastui-editor-cell-selected { background-color: #908f8f }
.toast li.task-list-item { border: 0; list-style: none; margin-left: -24px; padding-left: 24px; position:relative; }
.toast li.task-list-item:before { background-position: 50%; background-repeat: no-repeat; background-size: 18px 18px; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHJlY3Qgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3IiB4PSIuNSIgeT0iLjUiIHJ4PSIyIiBmaWxsPSIjRkZGIiBzdHJva2U9IiNDQ0MiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); border-radius: 2px; content: ""; cursor: pointer; height: 18px; left: 0; margin-left: 0; margin-top: 0; position: absolute; top: 1px; width: 18px; }
.toast li.task-list-item.checked:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHBhdGggZD0iTTE2IDBhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDJhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJoMTR6bS0xLjc5MyA1LjI5M2ExIDEgMCAwIDAtMS40MTQgMEw3LjUgMTAuNTg1IDUuMjA3IDguMjkzbC0uMDk0LS4wODNhMSAxIDAgMCAwLTEuMzIgMS40OTdsMyAzIC4wOTQuMDgzYTEgMSAwIDAgMCAxLjMyLS4wODNsNi02IC4wODMtLjA5NGExIDEgMCAwIDAtLjA4My0xLjMyeiIgZmlsbD0iIzRCOTZFNiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+); }
.toast a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); text-decoration: underline; }
/* 헤더 */
header { display:inline-flex; width:100%; height:70px; padding:0 20px; background:#fff; border-bottom:1px solid #ddd; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; z-index:1; }
header>div { display:inline-flex; }
header ul { display:inline-flex; }
header .logo { display:inline-flex; align-items:center; cursor:pointer; }
.mo_hamburger { display:none; }
.logo img { height:30px; }
.main_nav { display:inline-flex; padding:0 30px; align-items:center; }
.main_nav li a { display:inline-flex; height:40px; padding:0 20px; justify-content:center; align-items:center; font-size:17px; font-weight:500; color:#333; position:relative; }
.main_nav li.on a { color:var(--main-color); font-weight:bold; transition:all .2s; }
.main_nav li a:hover { transition:all .2s; }
.main_nav li a:after { content:''; display:inline-flex; width:0; height:30px; background:var(--main-color-op10); position:absolute; top:calc(50% + 1px); left:50%; transform:translate(-50%, -50%); transition:all .2s; }
.main_nav li:hover a:after { width:calc(100% - 30px); transition:all .2s; }
.main_nav li:not(:last-child) { margin-right:10px; }
.main_nav.sub_nav { padding:0 10px; }
.main_nav.sub_nav li:not(:last-child) { margin-right:0; }
.btn_login { display:inline-flex; justify-content:center; align-items:center; font-size:17px; font-weight:500; color:#333; cursor:pointer; }
.btn_login i { margin-right:5px; font-size:18px; color:#333; }
.btn_login:hover, .btn_login:hover * { color:var(--main-color); transition:all .2s; }
.login_user { display:inline-flex; justify-content:center; align-items:center; font-size:17px; font-weight:500; color:#333; cursor:pointer; position:relative; }
.login_user i { margin-right:5px; font-size:18px; color:#333; }
.login_user span { font-size:16px; font-weight:500; color:#333; }
.login_user:hover>*:not(.login_drop) { color:var(--main-color); transition:all .2s; }
.login_drop { display:none; width:160px; background:#fff; border:1px solid #ddd; border-radius:5px; flex-direction:column; position:absolute; top:100%; right:0; font-size:14px; box-shadow:0 0 5px rgba(0,0,0,.15); overflow:hidden; }
.login_drop>div { display:inline-flex; width:100%; padding:8px 0; justify-content:center; align-items:center; }
.login_drop>.btn_logout { background-color:var(--red_color-op10); }
.login_drop>.btn_logout, .login_drop>.btn_logout i { color:var(--red_color); }
.login_user.on .login_drop { display:inline-flex; }
.login_user.on>i, .login_user.on>span { color:var(--main-color); }
.login_user.on>i.fa-caret-down { transform:rotate(180deg); transition:all .2s; }
.login_drop>div:not(.btn_logout):hover { color:var(--main-color); transition:all .2s; }
.login_drop>div:not(.btn_logout):hover i { color:var(--main-color); transition:all .2s; }
.login_drop>.btn_logout:hover { background-color:var(--red_color); color:#fff; transition:all .2s; }
.login_drop>.btn_logout:hover i { color:#fff; transition:all .2s; }
.input_btn { display:inline-flex; width:100%; justify-content:center; align-items:center; font-size:15px; flex-direction:row; }
.input_btn input { width:calc(100% - 80px); margin:0; padding:0 10px; border:1px solid #ddd; border-radius:6px 0 0 6px; }
.input_btn button { display:inline-flex; width:80px; height:40px; padding:0; border-radius:0 6px 6px 0; justify-content:center; align-items:center; }
.input_span { display:inline-flex; width:100%; justify-content:center; align-items:center; font-size:15px; flex-direction:row; }
.input_span input { width:calc(100% - 40px); margin:0; padding:0 10px; border:1px solid #ddd; border-radius:6px 0 0 6px !important; }
.input_span span { display:inline-flex; width:40px; height:40px; padding:0; background:#f3f3f3; border:1px solid #ddd; border-left:none; border-radius:0 6px 6px 0 !important; justify-content:center; align-items:center; color:#999; }
.input_box, .select_box { display:inline-flex; width:100%; position:relative; }
.select_box.select_box_2 { justify-content:space-between; }
.select_box select { width:100%; padding:0 10px; border-radius:5px; }
#menuToggle { display:inline-flex; flex-direction:column; }
#menuToggle a { text-decoration: none; color:#333; transition: color 0.3s ease; }
#menuToggle a:hover { color:var(--main-color); }
#menuToggle input { display:inline-flex; width:100%; height:100%; cursor:pointer; cursor:pointer; opacity:0; z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; position:absolute; top:0; left:0; }
#menuToggle span { display:inline-flex; width:25px; height:3px; margin-bottom:5px; position:relative; background:#333; border-radius:3px; z-index:1; transform-origin: 2px 6px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { margin-bottom:0; transform-origin: 4px -2px; }
#menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(0, 0); background:var(--main-color); }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, 0); }
#menuToggle #menu { display:inline-flex; width:100%; height:100%; background:#fff; position:fixed; top:0; left:-100%; list-style-type: none; -webkit-font-smoothing: antialiased; transition:left 0.5s cubic-bezier(0.77,0.2,0.05,1.0); flex-direction:column; }
#menu .logo { display:inline-flex; width:100%; height:50px; padding:0 15px; background:#fff; border-bottom:1px solid #ddd; align-items:center; justify-content:space-between; }
#menuToggle ul { display:inline-flex; width:100%; flex-direction:column; }
#menuToggle ul li { display:inline-flex; align-items:center; }
#menuToggle ul li a { display:inline-flex; width:100%; height:50px; padding:0 20px; align-items:center; font-size:16px; font-weight:555; color:#333; }
#menuToggle ul li.on a { color:var(--main-color); }
#menuToggle input:checked ~ #menu { left:0; }
/* 푸터 */
footer { display:inline-flex; width:100%; padding:50px 0; background:var(--main-color-op10); border-top:1px solid #ddd; justify-content:center; align-items:center; flex-direction:column; position:relative; }
footer .logo { display:inline-flex; margin-bottom:30px; cursor:pointer; }
footer .logo img { height:40px; }
footer .company { display:inline-flex; justify-content:center; text-align:center; }
footer .company span { font-size:16px; color:#666; }
footer .company span:not(:last-child):after { content:'·'; padding:0 10px; }
footer .terms { display:inline-flex; position:absolute; top:20px; right:20px; }
footer .terms li { font-size:15px; color:#888; cursor:pointer; }
footer .terms li:not(:last-child):after { content:'｜'; padding:0 5px; }
footer .terms li:hover { font-weight:bold; color:#777; transition:all .2s; }
footer .copyright { margin-top:30px; color:#ccc; }
footer .tel span, footer .email span { text-decoration:underline; cursor:pointer; }
/* table_wrap */
.table_wrap { display:inline-flex; width:100%; flex-direction:column; }
.table_top { display:inline-flex; width:100%; margin-bottom:15px; justify-content:space-between; }
.table_top>* { display:inline-flex; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.dt-info { display:inline-flex; height:34px; margin-right:10px; padding:0 15px; background:var(--main-color-op10); border-radius:6px; justify-content:center; align-items:center; font-size:15px; color:var(--main-color) !important; }
.dt-info span { margin-left:3px; font-weight:bold; font-size:15px; color:var(--main-color); }
.dt-length { display:inline-flex; height:34px; margin-right:10px; justify-content:center; align-items:center; font-size:15px; }
.dt-length select { margin-right:5px; }
.dt-length label { font-size:13px; }
div.dt-container select.dt-input { padding:0 10px; }
div.dt-container .dt-length .dt-input { min-width:auto; border:1px solid #ddd; border-radius:6px; }
.dt-search { display:inline-flex; max-width:200px; height:34px; justify-content:center; align-items:center; font-size:15px; flex-direction:row; position:relative; }
.dt-search label { display:inline-flex; width:34px; height:34px; background:#333; border:1px solid #333; border-right:none; border-radius:6px 0 0 6px; color:#fff; justify-content:center; align-items:center; }
.table_wrap .dt-search input { width:calc(100% - 34px); }
.dt-container .table_wrap .dt-search input { margin:0; padding:0 10px; border:1px solid #ddd; border-radius:0 6px 6px 0; }
.table_wrap table { width:100%; table-layout:fixed; border-collapse:collapse; }
.table_wrap table tr { border:1px solid #ddd; border-left:none; border-right:none; }
body table.dataTable thead tr th { padding:8px 10px; border:none; border-bottom:1px solid #ddd; font-weight:bold; text-align:center; }
body table.dataTable thead tr th .dt-column-title { font-weight:500; }
body table.dataTable thead tr th:not(:last-child) { border-right:1px solid #ddd; }
.table_wrap table thead th { padding:10px; background:#f6f6f6; text-align:center; font-weight:bold; }
.table_wrap table.dataTable tfoot td { padding:8px 10px; background:var(--main-color-op10); border-top:4px double #ddd; font-weight:bold; }
.table_wrap table.dataTable tfoot td * { font-weight:bold; }
.table_wrap table td, .table_wrap table th { padding:5px 10px; position:relative; }
.table_wrap input { display:inline-flex; width:auto; height:34px; padding:0 10px; background:#fff; border:1px solid #ddd; border-radius:6px; justify-content:center; align-items:center; font-size:14px; position:relative; float:left; }
.table_wrap select { display:inline-flex; width:auto; height:34px; padding:0 10px; padding-right:30px; background-color:transparent; border:1px solid #ddd; border-radius:6px; justify-content:center; align-items:center; font-size:14px; position:relative; float:left; cursor:pointer; }
.table_wrap button {}
/* datatable */
div.dt-container.dt-empty-footer tbody>tr:last-child>* { border-bottom:none; }
table.dataTable { border-left:none; border-right:none; }
table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover { outline:none; }
table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-order:after, table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover .dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-desc:hover .dt-column-order:after { color:var(--main-color); }
table.dataTable>tbody>tr:hover { background-color:var(--main-color-op10); transition:all .2s; }
table.dataTable>tbody>tr:hover td, table.dataTable>tbody>tr:hover td * { font-weight:bold; transition:all .2s; }
table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td { padding:5px 10px; border-left:none; border-right:none; }
div.dt-container .dt-layout-row:not(.dt-layout-table) { display:inline-flex; width:100%; justify-content:space-between; }
table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td { text-align:center; }
div.dt-container .dt-paging .ellipsis { padding:0 5px; }
/* IE의 경우 */
table.dataTable input::-ms-clear, table.dataTable input::-ms-reveal { opacity:0; position:absolute; right:10px; cursor:pointer; }
/* 크롬의 경우 */
table.dataTable input::-webkit-search-decoration, table.dataTable input::-webkit-search-cancel-button, table.dataTable input::-webkit-search-results-button, table.dataTable input::-webkit-search-results-decoration { opacity:0; position:absolute; right:10px; cursor:pointer; }
.dt-search input + .input_search_close { width:15px; height:15px; border:none; color:#999; font-size:15px; outline:none; cursor:pointer; position:absolute; top:50%; right:10px; transform:translateY(-50%); pointer-events:none; justify-content:center; align-items:center; opacity:0; transition:all .2s; }
.dt-search input:focus + .input_search_close, .dt-search input:active + .input_search_close, .dt-search input:hover + .input_search_close { opacity:1; }
/* 페이징 */
.pagination_box, .dt-paging { display:inline-flex; margin:15px 0; justify-content:center; align-items:center; }
.dt-paging { margin:0; }
div.dt-container .dt-paging .dt-paging-button { display:inline-flex; min-width:24px; height:24px; padding:0 4px; border:1px solid #ddd; border-radius:24px; justify-content:center; align-items:center; color:#999; cursor:pointer; transition:all .2s; }
div.dt-container .dt-paging .dt-paging-button.current { background:var(--main-color) !important; border-color:var(--main-color) !important; color:#fff !important; font-weight:bold; }
div.dt-container .dt-paging .dt-paging-button:not(:last-child) { margin-right:4px; }
div.dt-container .dt-paging .dt-paging-button.current:hover { background:var(--main-color) !important; border-color:var(--main-color) !important; color:#fff !important; }
div.dt-container .dt-paging .dt-paging-button:hover { background:var(--main-color-op10) !important; border-color:var(--main-color-op10) !important; color:var(--main-color) !important; }
div.dt-container .dt-paging .dt-paging-button.disabled:hover { background:transparent !important; border-color:transparent !important; }
.dt-container .dt-paging .dt-paging-button.first, .dt-container .dt-paging .dt-paging-button.last, .dt-container .dt-paging .dt-paging-button.previous, .dt-container .dt-paging .dt-paging-button.next { border:none; color:#999; cursor:pointer; }
.dt-container .dt-paging .dt-paging-button.first:hover, .dt-container .dt-paging .dt-paging-button.last:hover, .dt-container .dt-paging .dt-paging-button.previous:hover, .dt-container .dt-paging .dt-paging-button.next:hover { background:#fff; border:none; color:var(--main-color) !important; transition:all .2s; }
div.dt-container .dt-paging .dt-paging-button:active { background:var(--main-color-op10); border-color:var(--main-color-op10); color:var(--main-color) !important; box-shadow:none; }
div.dt-container .dt-paging .dt-paging-button.current:active { background:var(--main-color); border-color:var(--main-color); color:#fff !important; }
.dt-container .dt-paging .dt-paging-button.first:active, .dt-container .dt-paging .dt-paging-button.last:active, .dt-container .dt-paging .dt-paging-button.previous:active, .dt-container .dt-paging .dt-paging-button.next:active { background:#fff; border:none; color:var(--main-color) !important; transition:all .2s; }
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active { color:#ddd !important; }
/* 모달 */
.bg_black { display:inline-flex; width:100%; height:100%; background:rgba(0,0,0,.4); position:fixed; top:0; left:0; transition:all .2s; z-index:-1; opacity:0; }
.bg_black.on { z-index:999; opacity:1; }
.modal_box { display:none; width:600px; height:400px; background:#fff; border-radius:10px; flex-direction:column; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); overflow:hidden; box-shadow:0 0 5px rgba(0,0,0,.15); z-index:9999; }
.modal_box.on { display:inline-flex; }
.modal_box .modal_title { position:relative; }
.modal_box .modal_title .modal_close { top:50%; transform:translateY(-50%); }
.modal_box .modal_close { display:inline-flex; width:30px; height:30px; justify-content:center; align-items:center; position:absolute; top:10px; right:10px; font-size:16px; transition:all .2s; cursor:pointer; }
.modal_box .modal_close:hover { opacity:.8; }
.modal_title { display:inline-flex; width:100%; height:40px; background:#333; justify-content:center; align-items:center; font-size:16px; font-weight:bold; color:#fff; position:relative; }
.modal_title h4 { display:inline-flex; font-size:16px; font-weight:bold; justify-content:center; align-items:center; }
.modal_title h4 i { margin-right:5px; font-size:16px; }
.modal_content { display:inline-flex; width:100%; height:100%; padding:20px; flex-direction:column; overflow-y:auto; }
.modal_box .btn_box .btn_default { height:34px; padding:0 10px; font-size:14px; }
.modal_box .btn_box .btn_default i { margin-right:5px; font-size:14px; }
/* 페이지 상단 타이틀 */
.main_title { display:inline-flex; width:100%; padding:40px 0; justify-content:center; align-items:center; flex-direction:column; text-align:center; position:relative; }
.main_title.fixed { position:fixed; top:70px; left:0; }
.main_title h4 { font-size:30px; font-weight:bold; color:#000; }
.main_title p { display:inline-flex; margin-top:10px; font-weight:500; color:#999; }
.menu_line { display:none; width:480px; height:4px; background:var(--main-color); border-radius:5px; position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.menu_line img { display:inline-flex; height:auto; justify-content:center; align-items:center; position:absolute; bottom:0px; }
.menu_line .car { width:84px; left:0; }
.menu_line .plug { width:40px; right:-5px; bottom:inherit; top:50%; transform:translateY(-50%); }
/* 페이지 메인 박스 */
.section_wrap { display:inline-flex; width:100%; flex-direction:column; justify-content:center; align-items:center; }
.main_wrap { display:inline-flex; width:100%; padding:0 0 50px; flex-direction:column; justify-content:center; align-items:center; }
/* 페이징 */
.pagination_box { display:inline-flex; margin-top:15px; justify-content:center; align-items:center; }
.pagination_box>* { display:inline-flex; min-width:24px; height:24px; justify-content:center; align-items:center; }
.paging_arrow { color:#999; cursor:pointer; }
.paging_arrow:hover { color:var(--main-color); transition:all .2s; }
.paging_arrow.disabled { color:#ddd; cursor:default; }
ul.paging_num { display:inline-flex; margin:0 4px; justify-content:center; align-items:center; }
.paging_num li { display:inline-flex; min-width:28px; height:28px; padding:0 5px; border-radius:28px; justify-content:center; align-items:center; cursor:pointer; transition:all .2s; }
.paging_num li:hover { background:#f3f3f3; }
.paging_num li.on { background:var(--main-color); color:#fff; font-weight:bold; }
.paging_num li:not(:last-child) { margin-right:4px; }
/* 메인 */
.main { display:inline-flex; width:100%; flex-direction:column; }
.main>div { display:inline-flex; width:100%; padding:70px 0; background-color:#fff; flex-direction:column; justify-content:center; align-items:center; position:relative; }
.main>div>h4 { margin-bottom:20px; font-size:30px; font-weight:bold; text-align:center; }
.main>div>p { font-size:18px; color:#666; word-break:keep-all; text-align:center; }
.main>div.mobile_moveBtn { display:none; }
.main>.main01 { height:calc(100vh - 70px); padding:0; background:#fff; }
.main01_slide_wrap { display:inline-block; width:100%; height:100%; overflow:hidden; z-index:0; }
.main01_slide { display:inline-flex; width:100%; height:100%; position:relative; }
.main01_slide.slide01 { background-color:var(--main-color-op10); }
.main01 .arrow_box { opacity:0; }
.main01:hover .arrow_box { opacity:1; transition:opacity .5s; }
.swiper { z-index:0; }
.swiper-button-next, .swiper-button-prev { color:var(--main-color); }
.swiper-pagination-bullet-active { background:var(--main-color); }
.main01 .swiper-button-next, .main01 .swiper-button-prev { color:#999; }
.main01 .swiper-button-next:after, .main01 .swiper-button-prev:after { font-size:55px; }
.main01 .swiper-slide>img { width:800px; position:absolute; top:50%; right:calc((100% - 1400px) / 2); transform:translateY(-50%); }
.main01_slide.slide02 img { display:none; }
.main_box { display:inline-flex; width:600px; position:absolute; top:50%; left:calc((100% - 1200px) / 2); transform:translateY(-50%); justify-content:center; flex-direction:column; }
.main_box h2 { margin-left:-5px; font-size:80px; font-weight:900; }
.main_box p { margin-bottom:40px; font-size:28px; font-weight:500; letter-spacing:7.5px; }
.main_box p span { font-size:28px; font-weight:500; }
.main_box p span.color_main { color:var(--main-color); }
.main_box p span.color_sub { color:var(--sub-color); }
.main_box span { width:100%; word-break:keep-all; font-size:20px; }
.main_box .btn_default { width:180px; margin-top:60px; line-height:1.2; }
.slide03 { background-color:#172353; /*172353*/ }
.slide03 .main_box { width:700px; top:46%; }
.slide03 .main_box .subTitle { display:inline-flex; margin-bottom:10px; padding:10px 15px; background:var(--main-color); border-radius:5px; font-size:20px; font-weight:bold; color:#fff; align-self:baseline; }
.slide03 .main_box h2 { font-size:60px; color:#fff; }
.slide03 .bubble_box { display:inline-flex; margin-top:70px; }
.slide03 .bubble_box div { display:inline-flex; width:140px; height:140px; padding:20px; background:var(--sub-color); border-radius:150px; justify-content:center; align-items:center; text-align:center; word-break:keep-all; font-size:16px; font-weight:bold; color:#fff; filter:drop-shadow(0px 0px 2px rgba(255, 255, 255, .8)); }
.slide03 .bubble_box div:not(:last-child) { margin-right:15px; }
.slide03 .biz_logo_box { display:inline-flex; width:1200px; padding:0 80px; background:rgba(255,255,255,.9); border-radius:10px 10px 0 0; position:absolute; bottom:0; left:50%; transform:translateX(-50%); justify-content:space-between; align-items:center;}
.slide03 .biz_logo_box img { display:inline-flex; width:auto; max-height:80px; }
.main>.main02 { background:#f3f3f3; }
.mainBox { display:inline-flex; width:1200px; margin-top:70px; padding:0; justify-content:space-between; align-items:center; }
.main01 .btn_box { display:inline-flex; }
.main01 .btn_box .btn_default { padding:0 10px; }
.main01 .btn_box .btn_default:not(:last-child) { margin-right:10px; }
.main01 .btn_box .btn_default:nth-child(2) { background-color:var(--sub-color); border-color:var(--sub-color); color:#fff; }
.main01 .btn_box .btn_default:nth-child(2):hover { background-color:#fff; color:var(--sub-color); }
.main01 .btn_box .btn_default:nth-child(3) { background-color:#D8613E; border-color:#D8613E; color:#fff; }
.main01 .btn_box .btn_default:nth-child(3):hover { background-color:#fff; color:#D8613E; }
.main01 .btn_box .btn_default i { margin:0; margin-left:10px; font-size:17px; color:#fff; }
.main01 .btn_box .btn_default:hover i { color:var(--main-color); transition:all .2s; }
.main01 .btn_box .btn_default:nth-child(2) i, .main01 .btn_box .btn_default:nth-child(3) i { color:#fff; }
.main01 .btn_box .btn_default:nth-child(2):hover i { color:var(--sub-color); }
.main01 .btn_box .btn_default:nth-child(3):hover i { color:#D8613E; }
.main02_con>div { display:inline-flex; flex-direction:column; }
.main02_con_L { width:630px; position:relative; }
.main02_con_L .box_title { display:inline-flex; height:55px; background-color:var(--main-color); border-radius:10px 10px 0 0; font-size:22px; font-weight:bold; text-align:center; color:#fff; justify-content:center; align-items:center; }
.main02_con_L .box_con { display:inline-flex; width:100%; padding:40px; background-color:rgba(255,255,255,.6); border-radius:0 0 10px 10px; flex-direction:row-reverse; }
.box_con .info_box { display:inline-flex; padding:30px; background-color:#fff; border-radius:10px; flex-direction:column; }
.box_con .info_box div { display:inline-flex; min-width:160px; min-height:55px; background-color:var(--sub-color); border-radius:10px; font-size:18px; font-weight:500; color:#fff; justify-content:center; align-items:center; }
.box_con .info_box div:not(:last-child) { margin-bottom:10px; }
.main02_con_L .arrow { display:inline-flex; padding:0 25px; justify-content:center; align-items:center; }
.main02_con_L .arrow img { transform:rotate(180deg); }
.main02_con_L .arrow i { display:inline-flex; width:40px; height:30px; font-size:30px; color:var(--main-color); justify-content:center; align-items:center; }
.main02_con_L .txt_box { display:inline-flex; width:100%; justify-content:space-between; flex-direction:column; }
.main02_con_L .txt_box .box { display:inline-flex; width:100%; padding:30px 10px; background-color:rgba(255,255,255,.95); border-radius:10px; flex-direction:column; text-align:center; }
.main02_con_L .txt_box .box h4 { font-size:22px; font-weight:800; color:#333; }
.main02_con_L .txt_box .box p { margin-bottom:20px;font-size:16px; font-weight:500; color:var(--sub-color); }
.main02_con_L .txt_box .box li { font-size:15px; }
.main02_con_L .txt_box .box li:not(:last-child) { margin-bottom:3px; }
.main02_arrow { position:absolute; top:50%; right:-55px; transform:translateY(-50%);}
.main02_con_R { width:calc(100% - 700px); align-self: normal; }
.main02_con_R .box2 { display:inline-flex; width:100%; height:calc((100% - 30px) / 3); justify-content:space-between; align-items:center; }
.main02_con_R .box2:not(:last-child) { margin-bottom:15px; }
.main02_con_R .box2 .icon_box { display:inline-flex; width:110px; height:auto; justify-content:center; align-items:center; flex-direction:column; }
.box2 .icon_box .img { display:inline-flex; width:100%; aspect-ratio:auto 1 / 1; background-color:var(--main-color); border-radius:10px 10px 0 0; justify-content:center; align-items:center; }
.box2 .icon_box img { width:80px; height:auto; }
.box2 .icon_box span { display:inline-flex; width:100%; height:40px; background-color:#fff; border-radius:0 0 10px 10px; color:#333; font-size:20px; font-weight:bold; justify-content:center; align-items:center; }
.main02_con_R .box2 .con_box { display:inline-flex; width:calc(100% - 150px); height:120px; background-color:rgba(255,255,255,.8); border-radius:10px; position:relative; font-size:20px; font-weight:bold; color:#333; justify-content:center; align-items:center; }
.main02_con_R .box2 .con_box:after { content:''; border-right:15px solid rgba(255,255,255,.8); border-top:15px solid transparent; border-bottom:15px solid transparent; position:absolute; top:50%; left:-15px; transform:translateY(-50%); }
.mainBox.main02_con { flex-direction:column; }
.main02_con>div { width:100%; }
.main02_con>div:not(:last-child) { margin-bottom:80px; }
.main02_con>div>.box_title { display:inline-flex; padding:10px 20px; background:var(--sub-color); border-radius:10px 10px 0 0; align-self:flex-start; font-size:20px; font-weight:bold; color:#fff; }
.main02_con>.main02_con_B>.box_title { background:var(--main-color); align-items:center; }
.main02_con>.main02_con_B>.box_title img { width:auto; max-height:20px; margin-right:10px; }
.main02_con>div>.box_con { display:inline-flex; width:100%; padding:20px; background:#fff; border-radius:10px; }
.main02_con>.main02_con_T { justify-content:space-between; position:relative; }
.main02_con>.main02_con_T:after { content:'\f322'; display:inline-flex; width:35px; height:35px; justify-content:center; align-items:center; font-family:'Font Awesome 6 Pro'; font-size:35px; position:absolute; top:calc(100% + 25px); left:50%; transform:translateX(-50%); }
.main02_con>.main02_con_T>.box_con { justify-content:space-between; }
.main02_con>.main02_con_T>.box_con>div { display:inline-flex; width:calc((100% - 30px) / 4); padding:15px; background:var(--sub-color-op10); border-radius:10px; justify-content:center; align-items:center; font-size:18px; font-weight:bold; }
.main02_con>.main02_con_B>.box_con { flex-direction:column; }
.main02_con>.main02_con_B>.box_con>div { display:inline-flex; }
.main02_con>.main02_con_B>.box_con .arrow { display:inline-flex; justify-content:center; align-items:center; }
.flow_prev { padding:15px; background:var(--main-color-op10); border-radius:10px; flex-direction:column; }
.main02_con>.main02_con_B>.box_con .arrow i { display:inline-flex; width:auto; margin:5px 0; font-size:30px; justify-content:center; align-items:center; color:var(--main-color); }
.flow_prev>div { display:inline-flex; width:100%; padding:15px; background:var(--main-color-op30); border-radius:10px; justify-content:center; align-items:center; font-size:20px; font-weight:bold; text-align:center; word-break:keep-all; }
.flow_prev>div:not(:last-child) { margin-bottom:15px; }
.flow_prev>.flow_box { padding:0; background:none; justify-content:space-between; }
.flow_prev>.flow_box>div { display:inline-flex; width:calc((100% - 60px) / 3); padding:15px; background:var(--main-color-op10); border-radius:10px; justify-content:center; align-items:center; font-size:18px; font-weight:bold; position:relative; }
.flow_prev>.flow_box>div:not(:last-child):after { content:'\f330'; display:inline-flex; width:20px; height:20px; justify-content:center; align-items:center; font-family:'Font Awesome 6 Pro'; font-size:20px; color:var(--main-color); position:absolute; top:50%; left:calc(100% + 5px); transform:translateY(-50%); }
.flow_next { padding:15px; background:var(--main-color-op10); border-radius:10px; justify-content:space-between; align-items:flex-start; }
.flow_next .box2 { display:inline-flex; width:calc((100% - 90px) / 3); justify-content:center; align-items:center; flex-direction:column; }
.flow_next .box2 .icon_box { display:inline-flex; width:100%; background:var(--main-color); border-radius:10px 10px 0 0; justify-content:center; align-items:center;; }
.flow_next .box2 .icon_box .img { width:60px; border-radius:10px 0 0 0; }
.flow_next .box2 .icon_box img { width:50px; }
.flow_next .box2 .icon_box span { width:auto; height:60px; background:transparent; color:#fff; }
.flow_next .box2 .con_box { display:inline-flex; width:100%; height:100%; padding:15px; background:#fff; border-radius:0 0 10px 10px; justify-content:center; align-items:center; flex-direction:column; }
.flow_next .box2 .con_box span { display:inline-flex; justify-content:center; align-items:center; font-size:16px; }
.flow_next .box2 .con_box span:before { content:'·'; display:inline-flex; margin-right:5px; justify-content:center; align-items:center; }
.main03_con { flex-wrap:wrap; }
.main03_box { display:inline-flex; width:calc((100% - 50px) / 3); margin-bottom:25px; aspect-ratio:auto 1 / 1; background-color:#f6f6f6; border-radius:10px; flex-direction:column; justify-content:center; align-items:center; }
.main03_box:not(:last-child) { margin-right:25px; }
.main03_box:nth-child(3n) { margin-right:0;}
.main03_box:nth-child(n+4) { margin-bottom:0; }
.main03_box .icon_box { display:inline-flex; width:140px; height:140px; margin-bottom:30px; background-color:#fff; border-radius:140px; justify-content:center; align-items:center; }
.main03_box img { width:90px; height:auto; }
.main03_box .con_box { text-align:center; color:#555; }
.main03_box .con_box p { margin-bottom:15px; font-size:20px; }
.main03_box .con_box h4 { font-size:22px; font-weight:bold; color:#000; }
.main>.main04 { padding:80px 0; background-color:var(--main-color); }
.main04 h2 { font-size:25px; font-weight:bold; text-align:center; color:#fff; line-height:1.4; }
.main04 h2 span { font-size:70px; font-weight:bold; }
.main04 h2 p { margin-top:25px; font-size:18px; }
.main04 .btn_box { display:inline-flex; margin-top:40px; }
.main04 .btn_box .btn_default { background-color:#fff; border-color:#fff; color:var(--main-color); }
.main04 .btn_box .btn_default i { margin:0; margin-left:10px; font-size:17px; color:var(--main-color); }
.main04 .btn_box .btn_default:hover { background-color:var(--main-color); color:#fff; }
.main04 .btn_box .btn_default:hover i { color:#fff; transition:all .2s; }
.main04 .btn_box .btn_default:last-child { margin-left:30px; color:var(--sub-color); }
.main04 .btn_box .btn_default:last-child i { color:var(--sub-color); }
.main04 .btn_box .btn_default:last-child:hover { background-color:var(--sub-color); color:#fff; }
.main04 .btn_box .btn_default:last-child:hover i { color:#fff; transition:all .2s; }
.main>.main05 {}
.main05 .btn_default { margin-top:30px; }
.main05 .logo_box { display:inline-flex; width:1200px; margin-top:50px; justify-content:center; align-items:center; flex-wrap:wrap; }
.main05 .logo_box img { display:inline-flex; max-width:calc((100% - 80px) / 6); height:auto; }
.main05 .logo_box img:not(:last-child) { margin-right:15px; }
.main05 .logo_box img:nth-child(6n) { margin-right:0; }
.main>.main06 { background:var(--main-color-op10); }
.main06 .news_box_wrap { display:inline-flex; margin:0; flex-direction:column; }
.main06 .news_wrap { display:inline-flex; width:calc(100% + 100px); margin-top:50px; padding:0 45px; flex-wrap:wrap; justify-content:space-between; position:relative; }
.main06 .news_wrap .newsSwiper { width:100%; }
.main06 .news_wrap .news_box { display:inline-flex; width:100%; padding:50px; background:#fff; border-radius:10px; flex-direction:column; float:left; cursor:pointer; }
.main06 .news_wrap .news_box:hover { background-color:var(--main-color); transition:all .2s; }
.main06 .news_wrap .news_box:hover * { color:#fff; transform:scale(1.04); transition:all .2s; }
.main06 .news_wrap .news_box:hover .newsDate { font-weight:bold; transition:all .2s; }
.main06 .news_wrap .news_box:hover .newsKeyword .span_keyword { color:var(--main-color); transition:all .2s; }
.main06 .news_box .newsDate { margin-bottom:5px; font-size:14px; color:#999; }
.main06 .news_box .newsTitle { font-size:20px; font-weight:bold; word-break:keep-all; }
.main06 .news_box .newsContent { margin:30px 0 5px; }
.main06 .news_box .newsKeyword { display:inline-flex; width:100%; margin-top:5px; justify-content:flex-end; }
.main06 .news_box .newsKeyword .span_keyword { display:inline-flex; padding:2px 8px; background-color:#fff; border:1px solid #ddd; border-radius:20px; justify-content:center; align-items:center; }
.main06 .news_box .newsKeyword .span_keyword:not(:last-child) { margin-right:5px; }
.main06 .news_box .newsKeyword .span_keyword i { margin-right:3px; }
.main06 .news_box .newsKeyword .span_keyword.car i { color:var(--main-color); }
.main06 .swiper-button-prev, .main06 .swiper-rtl .swiper-button-next { left:var(--swiper-navigation-sides-offset,5px); }
.main06 .swiper-button-next, .main06 .swiper-rtl .swiper-button-prev { right:var(--swiper-navigation-sides-offset,5px); }
.main07 img { max-width:100%; }
/* 로그인 */
.login_wrap { display:inline-flex; width:100%; min-height:calc(100vh - 340px); flex-direction:column; justify-content:center; align-items:center; }
.login_box { display:inline-flex; width:400px; flex-direction:column; text-align:center; }
.login_box h4 { margin-bottom:20px; font-size:22px; font-weight:bold; color:#333; }
.login_form { display:inline-flex; width:100%; padding:38px 35px; border:1px solid #ddd; border-radius:10px; flex-direction:column; }
.login_form input { display:inline-block; width:100%; height:44px; padding:0 15px; border:1px solid #ddd; border-radius:6px; line-height:42px; }
.login_form .password { margin-top:5px; }
.login_chk { display:inline-flex; width:100%; margin-top:10px; margin-bottom:15px; justify-content:space-between; }
.login_chk * { color:#999; }
.login_chk .check:hover label, .login_chk .find_idpw:hover a { color:#666; font-weight:bold; transition:all .2s; }
.login_form .btn_default { height:44px; }
.signup { display:inline-flex; margin-top:15px; align-items:center; justify-content:center; color:#666; }
.signup i { display:inline-flex; width:20px; height:20px; margin-right:5px; justify-content:center; align-items:center; font-size:15px; }
.signup a { margin-left:10px; font-weight:bold; color:var(--main-color); }
.signup a:hover { text-decoration:underline; transition:all .2s; }
.login_adminCenter { display:inline-flex; margin-top:5px; align-items:center; justify-content:center; color:#666; }
.login_adminCenter i { display:inline-flex; width:20px; height:20px; margin-right:5px; justify-content:center; align-items:center; font-size:15px; }
.login_adminCenter a { margin-left:10px; font-weight:bold; color:var(--main-color); }
.login_adminCenter a:hover { text-decoration:underline; transition:all .2s; }
/* 지도 */
#map_wrap { display:inline-flex; height:calc(100vh - 70px); flex-direction:column; position:relative; }
#map_wrap_box { height:100%; }
.map_controls { display:inline-flex; width:50px; flex-direction:column; position:fixed; top:85px; right:15px; z-index:1; }
.map_controls>* { display:inline-flex; width:100%; flex-direction:column; box-shadow:0 0 5px rgba(0,0,0,.15); }
.map_controls>*:not(:last-child) { margin-bottom:10px; }
.map_controls .map_type { background-color:#fff; border:1px solid var(--sub-color); border-radius:6px; overflow:hidden; }
.map_controls .map_type>div { display:inline-flex; width:100%; height:34px; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#666; cursor:pointer; }
.map_controls .map_type>.active { background-color:var(--sub-color); color:#fff; }
.map_controls .map_zoom { background-color:#fff; border:1px solid #ddd; border-radius:6px; overflow:hidden; }
.map_controls .map_zoom>div { display:inline-flex; width:100%; aspect-ratio:auto 1 / 1; justify-content:center; align-items:center; cursor:pointer; }
.map_controls .map_zoom>div:last-child { border-top:1px solid #ddd; }
.map_controls .map_btn { aspect-ratio:auto 1 / 1; background-color:#fff; border-radius:6px; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#666; cursor:pointer; }
.map_controls #toggleCadastral.active { background-color:var(--sub-color); color:#fff; }
.map_controls i { font-size:18px; color:#666; }
.map_controls #traffic * { font-weight:bold; }
.map_controls #traffic.on { background-color:var(--sub-color); color:#fff; }
#traffic .map_btn_icon { display:inline-flex; flex-direction:column; justify-content:center; align-items:center; }
.map_controls #traffic .map_btn_icon>* { display:inline-flex; height:18px; justify-content:center; align-items:center; }
.map_controls #traffic .map_btn_icon span { height:14px; margin-top:3px; font-size:13px; }
.map_controls #traffic.on * { color:#fff; }
.map_controls .measure_control { display:inline-flex; justify-content:center; align-items:center; font-size:14px; font-weight:bold; color:#666; cursor:pointer; position:relative; }
.measure_control .map_btn_icon { display:inline-flex; width:100%; padding:5px; background-color:#fff; border-radius:6px; justify-content:center; align-items:center; flex-direction:column; aspect-ratio:auto 1 / 1; }
/*.measure_control .map_btn_icon:not(:last-child) { margin-bottom:10px; }*/
.measure_control .map_btn_icon, .measure_control .map_btn_icon * { font-weight:bold; color:#666; }
.measure_control .map_btn_icon.on { background-color:var(--sub-color); }
.measure_control .map_btn_icon.on, .measure_control .map_btn_icon.on * { color:#fff; }
.measure_control .map_btn_icon>* { display:inline-flex; height:18px; justify-content:center; align-items:center; }
.measure_control .map_btn_icon span { height:14px; margin-top:3px; font-size:13px; }
.measure_control .measure_wrap { display:none; width:100%; background:#fff; border-radius:6px; flex-direction:column; position:absolute; top:0; right:calc(100% + 10px); overflow:hidden; }
.measure_control .map_btn_icon.on + .measure_wrap { display:inline-flex; }
.measure_control .measure_wrap .control-btn { display:inline-flex; width:100%; padding:5px 0; justify-content:center; align-items:center; cursor:pointer; }
.measure_control .control-btn.on { background-color:var(--sub-color); color:#fff; }
.measure_control .measure_wrap .control-btn2 { display:inline-flex; width:100%; padding:5px 0; background:var(--red_color); border:1px solid var(--red_color); border-radius:0 0 6px 6px; justify-content:center; align-items:center; color:#fff; cursor:pointer; }
.measure_control .measure_wrap .control-btn2:hover { background:var(--red_color-op10); border-color:var(--red_color-op10); color:var(--red_color); transition:all .2s; }
.measure_info_box { display:inline-block; width:max-content; padding:2px 5px; background-color:#fff; border:1px solid #ddd; border-radius:10px; text-align:center; font-family:'Noto Sans KR'; position:relative; }
.measure_info_box.measureInfo_circle { padding:0; background:transparent; border:none; }
.measure_close_btn { display:inline-flex; width:20px; height:20px; background:#fff; border-radius:24px; justify-content:center; align-items:center; position:absolute; top:-10px; right:-10px; box-shadow:0 0 1px #000; }
.measure_close_btn i { display:inline-flex; width:100%; height:100%; font-size:15px; justify-content:center; align-items:center; cursor:pointer; }
.map_controls .guideBtn { display:inline-flex; width:70px; height:70px; background:var(--red_color); border:2px solid #fff; border-radius:10px; justify-content:center; align-items:center; position:fixed; bottom:80px; left:15px; color:#fff; cursor:pointer;animation:guide_ani .5s ease-in infinite alternate; transition:all .2s; }
.map_controls .guideBtn.move { top:330px; animation:none; }
.map_controls .guideBtn.bottomLeft { bottom:15px; left:15px; }
.map_controls .guideBtn.on, .map_controls .guideBtn:hover { background:#fff; color:var(--red_color); animation-play-state:paused; transition:all .2s; }
.map_controls .guideBtn.on { border-color:var(--red_color); }
.map_controls .guideBtn.on *, .map_controls .guideBtn:hover * { color:var(--red_color); transition:all .2s; }
.map_controls .guideBtn i { display:inline-flex; width:24px; height:24px; font-size:24px; color:#fff; justify-content:center; align-items:center; }
.map_controls .guideBtn span { height:14px; margin-top:5px; font-size:13px; line-height:14px; }
.notice_bubble { display:inline-flex; width:max-content; padding:5px 10px; background:rgba(255,255,255,.9); border-radius:6px; position:absolute; top:calc(100% + 20px); left:0px; font-size:13px; font-weight:bold; color:#333; box-shadow:0 1px 5px rgba(0,0,0,.15); animation:guideBubble_ani 1s ease-in infinite alternate; }
.notice_bubble:before { content:''; border-bottom:10px solid rgba(255,255,255,.8); border-left:8px solid transparent; border-right:8px solid transparent; position:absolute; top:-9px; left:25px; filter:drop-shadow(0 2px 1px #f6f6f6) }
.map_controls .guideBtn.on .notice_bubble { display:none; }
.map_controls .guideBtn:hover .notice_bubble, .map_controls .guideBtn.move .notice_bubble { animation-play-state:paused; }
#guide_wrap { display:none; width:100%; height:100%; padding:50px 0; background:rgba(0,0,0,.85); position:fixed; top:0; left:-100%; overflow:hidden; overflow-y:auto; }
#guide_wrap.on { display:inline-block; left:0; z-index:101; }
#guide_wrap.scale_on { width:980px; height:81%; padding:0; border:1px solid #ddd; border-radius:10px; left:inherit; right:30px; top:50%; transform:translateY(-50%); overflow-y:auto; }
#guide_wrap.scale_on .guide_top { display:inline-flex; width:100%; height:50px; padding:0 20px; background:#000; justify-content:space-between; align-items:center; position:relative; }
#guide_wrap.scale_on .guide_top h4 { display:inline-flex; font-size:16px; font-weight:bold; color:#fff; }
#guide_wrap.scale_on .guide_top>.close_btn { width:30px; height:30px; background:#fff; position:absolute; top:50%; right:10px; transform:translateY(-50%); }
#guide_wrap.scale_on .guide_top>.close_btn i { color:#000; }
#guide_wrap.scale_on .guide_top>.close_btn:hover { background:var(--main-color); }
#guide_wrap.scale_on .guide_top>.close_btn:hover i { color:#fff; }
#guide_wrap.scale_on .guide_top>.close_btn i { font-size:14px; }
#guide_wrap.scale_on .guide_top>.expand_btn { width:30px; height:30px; background:#fff; position:absolute; top:50%; right:50px; transform:translateY(-50%); }
#guide_wrap.scale_on .guide_top>.expand_btn i { color:#000; }
#guide_wrap.scale_on .guide_top>.expand_btn i { display:none; }
#guide_wrap.scale_on .guide_top>.expand_btn .expand { display:inline-flex; }
#guide_wrap.scale_on .guide_top>.expand_btn:hover { background:var(--main-color); }
#guide_wrap.scale_on .guide_top>.expand_btn:hover i { color:#fff; }
#guide_wrap.scale_on .guide_top>.expand_btn i { font-size:14px; }
#guide_wrap.scale_on .guide_content_wrap { height:calc(100% - 50px); overflow:hidden; overflow-y:auto; }
#guide_wrap.scale_on .guide_slide>h4 { margin-bottom:30px; padding:15px; }
#guide_wrap.scale_on .guide_slide>h4, #guide_wrap.scale_on .guide_slide>h4 span, #guide_wrap.scale_on .guide_slide>h4 .wave { font-size:20px; }
#guide_wrap.scale_on .guide_slide>h4 .wave { font-size:22px; }
#guide_wrap.scale_on .guide_slide>h4 .h4_ex { font-size:16px; }
#guide_wrap.scale_on .guide_box img { max-width:90%; }
#guide_wrap.scale_on .guide_box_wrap { padding:0; }
#guide_wrap.scale_on .guide_slide_wrap .swiper-slide { align-items:flex-start; }
#guide_wrap.scale_on .guide_arrow { padding:0 15px; }
#guide_wrap.scale_on .guide_slide { max-width:100%; padding:20px; overflow:inherit; }
#guide_wrap.scale_on .guide_slide_wrap .guide_content { padding:0 0 30px; flex-wrap:wrap; }
#guide_wrap.scale_on .guide_slide_wrap .guide_slide { height:auto; }
#guide_wrap.scale_on #info_edit-guide { width:375px; }
#guide_wrap.scale_on .info_edit_form { width:420px; }
#guide_wrap.scale_on .guide_slide4 .guide_arrow { padding:0 15px; }
#guide_wrap.scale_on .guide_slide4 .guide_arrow.or { padding:0 15px !important; font-size:20px !important; }
#guide_wrap.scale_on .guide_slide4 .info_edit { width:404px !important; }
#guide_wrap.scale_on .guide_slide4 #modal_info_pw2 { width:404px !important; }
#guide_wrap .guide_top h4 { display:none; }
#guide_wrap .guide_top>.close_btn { display:inline-flex; width:50px; height:50px; border:4px solid #fff; border-radius:30px; position:fixed; top:30px; right:30px; justify-content:center; align-items:center; font-size:30px; color:#fff; cursor:pointer; z-index:2; }
#guide_wrap .guide_top>.close_btn i { display:inline-flex; width:30px; height:30px; font-size:30px; justify-content:center; align-items:center; text-shadow:0 0 5px rgba(0,0,0,.15); }
#guide_wrap .guide_top>.close_btn:hover { background:var(--main-color); border-color:var(--main-color); color:#fff; transition:all .2s; }
#guide_wrap .expand_btn { display:inline-flex; width:50px; height:50px; border:4px solid #fff; border-radius:30px; position:fixed; top:30px; right:90px; justify-content:center; align-items:center; font-size:30px; color:#fff; cursor:pointer; z-index:2; }
#guide_wrap .expand_btn:hover { background:var(--main-color); border-color:var(--main-color); color:#fff; transition:all .2s; }
.expand_btn i { display:inline-flex; width:30px; height:30px; font-size:22px; justify-content:center; align-items:center; text-shadow:0 0 5px rgba(0,0,0,.15); }
#guide_wrap i.expand { display:none; }
.guide_content_wrap { display:inline-flex; width:100%; height:100%; flex-direction:column; justify-content:center; align-items:center; }
.guide_content { display:inline-flex; width:600px; flex-direction:column; }
.guide_content:not(:last-child) { margin-bottom:50px; }
.guide_content h4 { margin-bottom:30px; }
.guide_content h4, .guide_content h4 span { font-size:24px; font-weight:bold; color:#fff; text-shadow:0 0 5px rgba(0,0,0,.15); position:relative; }
.guide_content h4 span:after { content:''; width:100%; border:1px wave var(--sub-color); position:absolute; bottom:-8px; left:0; opacity:.8; }
.guide_content h4 span { font-size:28px; }
.guide_cluster_wrap { display:inline-flex; justify-content:center; align-items:center; }
.guide_cluster_wrap .cluster_marker { margin:10px 30px; position:relative; top:inherit; left:inherit; transform:scale(1.2); }
.guide_cluster_wrap .cluster_box:after { filter:none; }
/* HTML: */
.guide_content h4 span:after {
--s: 5px; /* size of the wave */
--b: 1.5px; /* thickness of the line */
--m: 0.8; /* curvature of the wave [0 2] */
content:'';
background: var(--sub-color);
--R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
height: calc(2*var(--R));
width: 100%;
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g))
calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g))
50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}
.guide_content_wrap .map_controls { position:relative; top:inherit; right:inherit; }
.guide_content_wrap .filter_btn_box li.on { background-color:var(--sub-color); font-weight:bold; color:#fff; }
.guide_content_wrap .filter_wrap { border:1px solid #ddd; position:relative; top:inherit; left:inherit; }
.zoom_mouse { margin:0 50px; font-size:20px; color:#fff; }
.mouse_scroll { margin-left:20px; margin:20px 0; transform:scale(1.5); }
.mouse { display: block; width: 23px; height: 36px; background:#fff; border: 2px solid #fff; border-radius: 23px; }
.mouse::after { content:''; display: block; position: relative; width: 2px; height: 6px; margin: 5px auto; background: var(--sub-color); border-radius:4px; animation: mouse-pulse 2s ease infinite; }
.up_arrow {margin-bottom: 6px;}
.up_arrow span { display: block; position: relative; left: 50%; width: 8px; height: 8px; margin-top: 2px; margin-left: -2px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(-45deg) translateX(-50%); animation: fade-arrow 1s infinite; }
.up_arrow2:nth-of-type(2) { animation-delay: .2s; animation-direction: alternate; }
.up_arrow1:nth-of-type(1) { animation-delay: .3s; animation-direction: alternate; }
.dowm_arrow {margin-top: 6px;}
.dowm_arrow span { display: block; position: relative; left: 50%; width: 8px; height: 8px; margin-bottom: 2px; margin-left: -2px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateX(-50%); animation: fade-arrow 1s infinite; }
.dowm_arrow2:nth-of-type(2) { animation-delay: .2s; animation-direction: alternate; }
.dowm_arrow3:nth-of-type(3) { animation-delay: .3s; animation-direction: alternate; }
#guide_wrap .search_box input:read-only { background:#fff; }
#guide_wrap .btn_default:hover { background:var(--sub-color); color:#fff; }
#guide_wrap .btn_default:hover * { color:#fff; }
#guide_wrap .info_edit .bbs_top { display:none; }
.guide_slide_wrap { }
.guide_slide { display:inline-flex; max-height:100%; flex-direction:column; overflow:hidden; overflow-y:auto; }
.guide_slide>h4 { display:inline-flex; width:100%; margin-bottom:50px; padding:30px; background:rgba(255,255,255,.1); border-radius:10px; align-items:center; }
.guide_slide>h4, .guide_slide>h4 span, .guide_slide>h4 .wave { font-size:24px; font-weight:bold; color:#fff; text-shadow:0 0 5px rgba(0,0,0,.15); position:relative; }
.guide_slide>h4 .num { font-size:28px; }
.guide_slide>h4 .wave { margin:0 10px; font-size:28px; }
.guide_slide>h4 .wave:after { content:''; width:100%; border:1px wave var(--sub-color); position:absolute; bottom:-8px; left:0; opacity:.8; }
.guide_slide>h4 .h4_ex { width:100%; margin-top:10px; padding-left:30px; font-size:24px; font-weight:bold; text-shadow:0 0 5px rgba(0, 0, 0, .15); position:relative; }
.guide_slide>h4 .btn_default { margin:0 10px; background-color:var(--sub-color); border-color:var(--sub-color); cursor:default; }
.guide_slide h4 .wave:after {
--s: 5px; /* size of the wave */
--b: 1.5px; /* thickness of the line */
--m: 0.8; /* curvature of the wave [0 2] */
content:'';
background: var(--sub-color);
--R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
height: calc(2*var(--R));
width: 100%;
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g))
calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g))
50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}
.guide_slide_wrap .swiper-slide { display:inline-flex; justify-content:center; align-items:center; }
.guide_slide_wrap .guide_content { width:100%; justify-content:center; align-items:center; flex-direction:row; }
.guide_box_wrap { display:inline-flex; width:auto; padding:0 30px; justify-content:center; align-items:center; flex-direction:column; }
.guide_arrow { display:inline-flex; padding:0 30px; align-items:center; justify-content:center; }
.guide_arrow i { font-size:40px; color:#fff; text-shadow:0 0 5px rgba(0,0,0,.15); }
.guide_slide_wrap .or { margin:50px 0; font-size:20px; font-weight:bold; color:#fff; }
.guide_box { display:inline-flex; width:100%; justify-content:center; align-items:center; flex-direction:column; }
.guide_box .guide_title { display:inline-flex; width:auto; margin-bottom:15px; padding:8px 20px; background:var(--main-color); border-radius:20px; font-size:15px; font-weight:bold; color:#fff; }
.guide_slide .cluster_marker { margin:10px 30px; position:relative; top:inherit; left:inherit; transform:scale(1.2); }
.guide_slide .cluster_box:after { filter:none; }
/* HTML: */
.guide_slide_wrap .address_search .search_box { border:4px dashed var(--red_color); animation:border-pulse .8s ease infinite; }
.guide_slide_wrap .map_controls { position:relative; top:inherit; right:inherit; }
.guide_slide_wrap .cluster_marker { border:4px dashed var(--red_color); animation:border-pulse .8s ease infinite; }
.guide_slide_wrap .filter_btn_box li.on { background-color:var(--sub-color); font-weight:bold; color:#fff; }
.guide_slide_wrap .filter_wrap { border:1px solid #ddd; position:relative; top:inherit; left:inherit; }
.guide_slide_wrap #station-click-guide { padding-bottom:60px; position:relative; top:inherit; left:inherit; }
.guide_slide_wrap .popup .info_box h4 { margin-bottom:0; color:#000; position:relative; }
.guide_slide_wrap .popup#station-click-guide .popup_content_box { height:340px; }
#guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default, #guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default:hover { background:var(--main-color); border-color:var(--main-color); }
#guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default:last-child, #guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default:last-child:hover { background:var(--sub-color); border-color:var(--sub-color); }
#guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default:last-child { position:relative; }
#guide_wrap .guide_slide_wrap .popup .info_wrap .btn_box .btn_default:last-child:after { content:''; width:calc(100% + 4px); height:calc(100% + 4px); border:4px dashed var(--red_color); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:border-pulse .8s ease infinite; }
.guide_content_slide_wrap .swiper-button-next, .guide_content_slide_wrap .swiper-button-prev { color:#fff; }
#guide_wrap .info_edit { position:relative; top:inherit; left:inherit; }
#guide_wrap .info_edit .btn_box .btn_default { background:var(--main-color); border-color:var(--main-color); }
#guide_wrap .info_edit .btn_box .btn_default:first-child { background:var(--sub-color); border-color:var(--sub-color); position:relative; }
#guide_wrap #info_edit-guide .btn_box .btn_default:first-child:after { content:''; width:calc(100% + 4px); height:calc(100% + 4px); border:4px dashed var(--red_color); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:border-pulse .8s ease infinite; }
#guide_wrap .info_edit_form { width:450px; position:relative; top:inherit; left:inherit; }
#guide_wrap .info_edit_form .check_box { margin-bottom:0; }
#guide_wrap .info_edit_form .btn_default { background:var(--main-color); border-color:var(--main-color); position:relative; align-self:center; }
#guide_wrap .info_edit_form .btn_default:after { content:''; width:calc(100% + 4px); height:calc(100% + 4px); border:4px dashed var(--red_color); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:border-pulse .8s ease infinite; }
.guide_slide3 { max-width:1000px; }
.guide_slide3 .guide_box_wrap { padding:0; }
.guide_box img { max-width:100%; }
.border_red { position:relative; }
.border_red:after { content:''; width:calc(100% + 4px); height:calc(100% + 4px); border:4px dashed var(--red_color); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:border-pulse .8s ease infinite; }
#guide_wrap .modal_info_pw { position:relative; top:inherit; left:inherit; transform:none; }
#guide_wrap .modal_info_pw h4 { color:#000; }
.guide_slide_wrap .guide_slide4 .or { margin:20px 0; }
.guide_slide_wrap .guide_slide4 .or i { font-size:20px; }
@keyframes border-pulse {
0% { border-color:var(--red_color); }
50% { border-color:transparent; }
100% { border-color:var(--red_color); }
}
#guidePopup { width:700px; max-height:90vh; background:rgba(255,255,255,.95); position:fixed; top:50px; left:50%; transform:translateX(-50%); }
#guidePopup .popup_title { display:none; justify-content:center; }
#guidePopup .popup_content_box { padding-bottom:40px; }
#guidePopup .btn_default { padding:0; }
#guidePopup .btn_default:hover { background:var(--sub-color); color:#fff; }
#guidePopup .btn_default:hover * { color:#fff; }
#guidePopup .popup_content_box { background:transparent; }
#guidePopup .guide_content_wrap { max-height:100%; padding:30px 0; background:transparent; }
#guidePopup .guide_content h4, #guidePopup .guide_content h4 span { color:#000; }
#guidePopup .guide_content h4 span { font-size:24px; }
#guidePopup .mouse { background:var(--sub-color);}
#guidePopup .zoom_mouse { color:#000; }
#guidePopup .up_arrow span { border-color:var(--sub-color); }
#guidePopup .dowm_arrow span { border-color:var(--sub-color); }
#guidePopup .mouse::after { background:#fff; }
#guidePopup .guide_cluster_wrap .cluster_box:after { filter:drop-shadow(0 2px 1px #ccc); }
#guidePopup .search_box input { display:inline-block; width:calc(100% - 80px); height:40px; padding:0 10px; border:1px solid #ddd; border-right:none; border-radius:5px 0 0 5px; }
#guidePopup .search_box input:read-only { background:#fff; }
#guidePopup .search_box .btn_default { width:80px; height:40px; padding:0; background:var(--sub-color); border-color:var(--sub-color); border-radius:0 5px 5px 0; font-size:15px; }
#guidePopup .pop_btn_box { display:inline-flex; width:100%; height:44px; justify-content:space-between; align-items:center; position:absolute; bottom:0; left:0; z-index:1; }
#guidePopup .pop_btn_box .pop_btn_box_btn { display:inline-flex; width:50%; height:100%; background:#333; font-size:15px; color:#fff; cursor:pointer; justify-content:center; align-items:center; }
#guidePopup .pop_btn_box .pop_btn_box_btn:last-child { background:var(--main-color); }
#guidePopup .pop_btn_box .pop_btn_box_btn:hover { background:#000; transition:all .2s; }
#guidePopup .pop_btn_box .pop_btn_box_btn:last-child:hover { background: #289881; }
@keyframes mouse-pulse {
0% { opacity: 1; transform: translateY(0); }
20% { opacity: 0; transform: translateY(6px); }
60% { opacity: 1; transform: translateY(6px); }
100% { opacity: 0; transform: translateY(0); }
}
@keyframes fade-arrow {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes guide_ani {
0% { bottom:80px; }
100% { bottom:85px; }
}
@keyframes guideBubble_ani {
0% { background:rgba(255,255,255,.8); color:var(--red_color); }
50% { background:rgba(255,255,255,.8); color:#000; }
100% { background:rgba(255,255,255,1); color:var(--red_color); }
}
/* 현재위치 마커 */
.location_marker { display:inline-flex; width:60px; position:relative; }
.location_marker img { display:inline-flex; width:50px; height:auto; position:absolute; left:50%; transform:translateX(-50%); }
.location_marker span { display:inline-flex; width:65px; height:20px; padding:0 5px; background:rgba(255,255,255,.8); border-radius:4px; font-size:13px; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); justify-content:center; align-items:center; color:#999; animation:color_ani 1s ease-in infinite alternate; }
.location_marker .loc_top { bottom:10px; animation:loc_marker_move .5s ease-in infinite alternate; }
.location_marker .loc_bot { bottom:-10px; animation:scale_ani .5s ease-in infinite alternate; }
@keyframes loc_marker_move {
from { bottom:13px; }
to { bottom:23px; }
}
@keyframes scale_ani {
0% { transform:translateX(-50%) scale(1); opacity:1; }
100% { transform:translateX(-50%) scale(.6); opacity:.5; }
}
@keyframes color_ani {
0% { color:#000; }
100% { color:#666; }
}
/* 클러스터 */
.cluster_marker { display:inline-flex; width:130px; min-width:60px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.cluster_marker:hover { z-index:1 !important; transition:all .2s; }
.cluster_marker.dong { white-space:nowrap; }
.cluster_box { display:inline-flex; width:100%; margin-bottom:10px; flex-direction:column; border:2px solid #f3f3f3; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.3); overflow:hidden; }
.cluster_box:after { content:''; border-top:10px solid #f3f3f3; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; bottom:1px; left:50%; transform:translateX(-50%); filter:drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.cluster_box>div { display:inline-flex; width:100%; padding:4px 8px; background-color:#333; border-radius:0; flex-direction:column; text-align:center; font-size:13px; font-weight:bold; justify-content:center; align-items:center; color:#fff; }
.cluster_marker.on { transform:translate(-50%, -50%) scale(1.05); transition:all .2s; animation:tongtong .8s cubic-bezier(0.11, 0, 0.5, 0) infinite alternate; will-change: transform; }
@keyframes tongtong {
0% { top:0; }
50% { top:-5px; }
100% { top:0; }
}
.cluster_top span { display:inline-block; width:auto; max-width:100%; font-size:13px; font-weight:bold; color:#fff; }
.cluster_box .cluster_bottom { padding:5px; background-color:#f3f3f3; color:#333; flex-direction:row; justify-content:center; }
.cluster_bottom>div { width:50%; height:16px; font-size:13px; font-weight:500; line-height:15px; }
.cluster_bottom>div.c_fast { border-right:1px solid #ddd; }
.cluster_con i { display:inline-flex; width:15px; justify-content:center; align-content:center; }
.cluster_con span { font-weight:bold; }
.c_fast i { color:var(--sub-color); }
.c_slow i { color:#555; }
.cluster_marker.dong { width:auto; }
.cluster_marker.dong .cluster_bottom { padding:12px 16px; background-color:#333; border:none; border-radius:10px; font-size:14px; color:#fff; }
.cluster_marker.dong .cluster_box { border:none; }
.cluster_marker.dong .cluster_box:after { border-top-color:#333; }
.cluster_marker.style1.on { width:auto; min-width:160px; }
.cluster_box.style1 { border:1px solid #888; }
.cluster_box.style1 .cluster_bottom { width:100%; padding:0; background-color:transparent; color:#333; position:absolute; top:-25px; right:0; }
.cluster_box.style1 .cluster_bottom>div { width:auto; height:auto; padding:3px 10px; background:#fff; border-radius:20px; font-weight:bold; font-size:12px; box-shadow:0 0 5px rgba(0,0,0,.15); }
.cluster_box.style1 .cluster_bottom>div.c_fast { margin-right:5px; border-right:none; }
.cluster_box.style1 .cluster_bottom>div * { font-size:12px;}
.cluster_box.style1:after { border-top-color:#222; }
.cluster_marker.on .cluster_box.style1:after { bottom:2px; }
.cluster_marker.style1.on .cluster_top>span { width:100%; margin-bottom:5px; font-size:15px; font-weight:bold; color:#fff; transition:auto .5s; }
.cluster_box.style1 div.cluster_left { display:inline-flex; width:calc(100% - 68px); min-width:100px; text-align:left; }
.cluster_box.style1 .cluster_top .cluster_info_box { display:inline-flex; width:100%; max-height:0; padding:0; flex-direction:row; justify-content:space-between; align-items:center; overflow:hidden; opacity:0; transition:max-height 0.5s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out; }
.cluster_box.style1.on .cluster_top .cluster_info_box { width:100%; max-height:200px; opacity:1; transition:max-height 0.5s ease-in, opacity 0.3s ease-in, padding 0.3s ease-in; }
.cluster_marker.style1.on.multi_on .cluster_top .cluster_info_box { display:none; }
.cluster_marker.style1.on.multi_on .cluster_top>span { margin-bottom:0; }
.cluster_box.style1.on>div { padding:8px 10px; }
.cluster_box.style1.on .cluster_bottom { top:-35px; }
.dong .cluster_box.style1 .cluster_bottom { display:inline-flex; width: auto; padding: 10px; background-color: #333; border:1px solid #888; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .3); flex-direction: column; text-align: center; font-size: 13px; font-weight: bold; color: #fff; position: inherit; top: inherit; right:inherit; overflow: hidden; }
.cluster_left .charger_box { display:inline-flex; align-items:flex-start; flex-direction:column; }
.cluster_left .charger_box div { display:inline-flex; font-size:12px; align-items:center; line-height:1.1; }
.cluster_left .charger_box div:not(:last-child) { margin-bottom:2px; }
.cluster_left .charger_box .charger_count span { display:inline-flex; height:auto; align-items:center; font-size:12px; font-weight:normal; }
.cluster_left .charger_box .charger_count .status { width:8px; height:8px; margin-right:5px; background:#fff; border-radius:10px; }
.cluster_left .charger_box .charger_count.status1 .status { background:#0050dd; }
.cluster_left .charger_box .charger_count.status2 .status { background:#00af00; }
.cluster_left .charger_box .charger_count.status3 .status { background:#555; }
.cluster_left .charger_box .charger_count.status4 .status { background:#d10000; }
.cluster_right { display:inline-flex; width:58px; margin-left:10px; padding:0; background:transparent; color:#fff; justify-content:flex-end; }
.cluster_right .map_links { display:inline-flex; }
.cluster_right .map_links:not(:last-child) { margin-right:2px; }
.cluster_right .map_links a { display:inline-flex; width:28px; height:28px; justify-content:center; align-items:center; color:#fff; text-decoration:none; transition:all .2s; }
.cluster_right .map_links a.mo_only { display:none; }
.cluster_right .map_links a:hover { transform:scale(1.1); }
.cluster_right .map_links a img { max-width:100%; height:auto; }
/* 필터 */
.filter_wrap { display:inline-flex; width:380px; border-radius:10px; flex-direction:column; position:absolute; top:15px; left:15px; z-index:1; }
.filter_mo { display:inline-flex; width:70px; height:40px; margin-right:5px; background:#fff; border:1px solid #ddd; border-radius:5px; justify-content:center; align-items:center; color:#999; cursor:pointer; }
.filter_mo i, .filter_mo span { display:inline-flex; height:20px; justify-content:center; align-items:center; color:#999; line-height:1; }
.filter_mo i { margin-right:5px; }
.filter_wrap.on { transition:all .2s; }
.filter_wrap.on .filter_mo { background-color:var(--sub-color); border-color:var(--sub-color); color:#fff; }
.filter_wrap.on .filter_mo>* { color:#fff; }
.form_data { display:inline-flex; width:100%; flex-direction:column; }
.filter_box { display:inline-flex; width:100%; padding:10px; flex-direction:column; }
.filter_box.forms { display:none; }
.filter_wrap.on .filter_box.forms { display:inline-flex; margin-top:10px; background:#fff; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,.15); }
.address_search { padding-bottom:10px; background:#fff; border-radius:10px; flex-direction:row; position:relative; box-shadow:0 0 5px rgba(0,0,0,.15); }
.address_search .search_box { display:inline-flex; width:calc(100% - 75px); }
.search_box input { display:inline-block; width:calc(100% - 75px); height:40px; padding:0 10px; border:1px solid #ddd; border-right:none; border-radius:5px 0 0 5px; }
.search_box .btn_default { width:75px; height:40px; padding:0; background:var(--sub-color); border-color:var(--sub-color); border-radius:0 5px 5px 0; font-size:15px; }
.search_box .btn_default i { margin-right:5px; }
.filter_box .check input[type=checkbox]:checked + label:before { background-color:var(--sub-color); border-color:var(--sub-color); }
.popup .search_box input { border-radius:5px 0 0 5px; }
.search_box .btn_default:hover { background:#fff; color:var(--sub-color); }
.search_box .btn_default:hover * { color:var(--sub-color); }
#autocomplete-results { display:none; width:100%; max-height:300px; background-color:#fff; border-radius:0 0 4px 4px; position:absolute; top:100%; left:0; overflow-y:auto; box-shadow:0 0 5px rgba(0,0,0,.15); z-index:1000; }
.autocomplete-item { padding:10px; color:#999; cursor:pointer; }
.autocomplete-item:not(:last-child) { border-bottom:1px solid #ddd; }
.autocomplete-item:hover { background-color:var(--main-color-op10); font-weight:bold; color:var(--main-color); transition:all .2s; }
.autocomplete-item:hover *, .autocomplete-item:hover *:before { font-weight:bold; color:var(--main-color); }
.autocomplete-item>div { display:inline-flex; width:100%; align-items:center; }
.autocomplete-item>div:before { content:'\f3c5'; margin-right:5px; font-family:'Font Awesome 6 Pro'; font-weight:bold; color:#999; }
.autocomplete-item.naverAddressResult { position:relative; }
.autocomplete-item.naverAddressResult:hover .naver-place-badge { color:#fff; }
.autocomplete-item.naverAddressResult>div.autoPlaceName:before { content:''; display:none; }
.naver-place-badge { display:inline-flex; margin-right:5px; justify-content:center; align-items:center; }
.naver-place-badge img { width:auto; height:18px; }
.autocomplete-item.naverAddressResult .autoPlaceName { font-weight:bold; color:#333; margin-bottom:4px; }
.autocomplete-item.naverAddressResult .autoPlaceName .naver-place-badge { margin-right:5px; }
.autocomplete-item.naverAddressResult .autoAddrDetail { color:#666; font-size:13px; font-weight:normal; margin-left:2px; }
.no_result { display:inline-flex; width:100%; padding:10px; background:#f6f6f6; color:#999; font-weight:bold; }
.filter { display:inline-flex; width:100%; flex-direction:column; }
.filter:not(:last-child) { margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ddd; }
.filter .filter_title { height:16px; margin-bottom:15px; font-size:16px; font-weight:bold; color:#888; }
.filter_btn_box { display:inline-flex; width:100%; margin-bottom:10px; background-color:#f3f3f3; border-radius:6px; flex-wrap:wrap; overflow:hidden; }
.filter_btn_box li { display:inline-flex; width:50%; flex-grow:0; height:40px; justify-content:center; align-items:center; font-size:14px; font-weight:400; color:#888; cursor:pointer; }
.filter_btn_box li.active { background-color:var(--sub-color); font-weight:bold; color:#fff; }
.filter_btn_box li .filterCount_number { display:inline-flex; min-width:17px; height:17px; margin-left:3px; padding:3px; background:#999; border-radius:10px; color:#fff; font-size:12px; justify-content:center; align-items:center; }
.filter_btn_box li.active .filterCount_number { background:rgba(255,255,255,.8); color:var(--sub-color); }
.radio_box { display:inline-flex; width:100%; flex-wrap:wrap; position:relative; }
.radio { display:inline-flex; }
.radio:not(:last-child) { margin-right:5px; }
.radio input[type=radio] { width:1px; height:1px; position:absolute; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); border:none; }
.radio input[type=radio] + label { display:inline-flex; height:34px; padding:0 10px; background:#fff; border:1px solid #ddd; border-radius:4px; justify-content:center; align-items:center; cursor:pointer; transition:all .2s; }
.radio input[type=radio]:disabled + label { cursor:inherit; }
.radio input[type=radio]:disabled:not(:checked) + label { background-color:#ddd; color:#999; }
.radio input[type=radio]:checked + label { background-color:var(--main-color); border-color:var(--main-color); color:#fff; }
.check_box { display:inline-flex; width:100%; margin-bottom:-5px; flex-wrap:wrap; }
.check_box .check { width:25%; margin-bottom:5px; font-size:13px; }
.check_box2 .check { width:50%; }
.check input[type=checkbox] { width:1px; height:1px; position:absolute; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); border:none; }
.check input[type=checkbox] + label { position:relative; display:inline-flex; width:auto; margin:0; padding-left:25px; padding-right:5px; cursor:pointer; }
.check input[type=checkbox] + label:before { content:''; width:20px; height:20px; position:absolute; top:1px; left:0; border:1px solid #ddd; text-align:center; border-radius:4px; transition:all .1s; }
.check input[type=checkbox]:disabled + label:before { background-color:var(--bs-secondary-bg); }
.check input[type=checkbox]:checked + label:before { content:'\f00c'; font-family:'Font Awesome 6 Pro'; color:#fff; background-color:var(--main-color); border-color:var(--main-color); }
.check_box .check2 { width:calc((100% - 15px) / 4); margin-bottom:5px; }
.check_box .check2:not(:last-child) { margin-right:5px; }
.check_box .check2:nth-child(4n) { margin-right:0; }
.check_box2 .check2 { width:calc((100% - 5px) / 2); }
.check2 {}
.check2 input[type=checkbox] { width:1px; height:1px; position:absolute; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); border:none; }
.check2 label { display:inline-flex; width:100%; padding:10px 0; padding-bottom:8px; border:1px solid #ddd; border-radius:6px; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; }
.check2 label i { display:inline-flex; width:auto; height:30px; font-size:25px; color:#999; justify-content:center; align-items:center; }
.check2 label span { margin-top:5px; font-size:14px; color:#999; }
.check2 input[type=checkbox]:checked + label { background-color:var(--sub-color-op10); border-color:var(--sub-color); transition:all .2s; }
.check2 input[type=checkbox]:checked + label i, .check2 input[type=checkbox]:checked + label span { color:var(--sub-color); font-weight:bold; transition:all .2s; }
.check2.c_img img { width:30px; height:auto; }
.check2.c_img input[type=checkbox] + label img { display:inline-flex; }
.check2.c_img input[type=checkbox] + label img.on { display:none; }
.check2.c_img input[type=checkbox]:checked + label img { display:none; }
.check2.c_img input[type=checkbox]:checked + label img.on { display:inline-flex; }
.label_box { margin-bottom:10px; justify-content:flex-end; }
.label_box .check2 { width:auto; margin-bottom:0; }
.label_box .check2 label { padding:5px 10px; background:#fff; }
.label_box .check2 label span { margin:0; font-size:13px; }
.label_box .check2 input[type=checkbox]:checked + label { background-color:#333; border-color:#333; }
.label_box .check2 input[type=checkbox]:checked + label span { color:#fff; }
.filter-content { display:inline-flex; flex-direction:column; }
#operator-name { display:inline-flex; width:100%; height:34px; padding:0 10px; border:1px solid #ddd; border-radius:5px;}
#operator-content { flex-direction:column; position:relative; }
#operator-content .cpo_label { margin-top:10px; }
#operator-content .custom-scroll { height:300px; padding:10px; border:1px solid #ddd; border-radius:5px; overflow-y:auto; }
#operator-content .operator_search { height:34px; margin-bottom:10px; }
#operator-content .operator_search input { position:relative; }
#operator-content .operator_search input:before { content:'\f002'; display:inline-flex; width:34px; height:34px; font-family:'Font Awesome 6'; color:#999; position:absolute; top:0; left:0; justify-content:center; align-items:center; }
#operator-list { height:calc(100% - 44px); overflow-y:auto; position:relative; }
.filter_box .filter + .btn_box { display:inline-flex; width:100%; }
.filter_box .filter + .btn_box .btn_default { width:calc((100% - 10px) / 2); height:34px; font-size:14px; font-weight:500; }
.filter_box .filter + .btn_box .btn_default i { maregin-right:5px; }
.filter_box .filter + .btn_box .btn_default.btn_red { background-color:#f12b2b; border-color:#f12b2b; }
.filter_box .filter + .btn_box .btn_default.btn_red:hover { background-color:#fff; color:#f12b2b; }
.filter_box .filter + .btn_box .btn_default.btn_red:hover i { color:#f12b2b; }
.filter_box .filter + .btn_box .btn_default:not(:last-child) { margin-right:10px; }
button#more-content { min-width:34px; height:30px; background-color:#333; border-radius:0 0 10px 10px; border-color:#333; font-size:13px; }
button#more-content i { font-size:13px; color:#fff; }
button#more-content:hover { background-color:var(--sub-color); border-color:var(--sub-color); color:#fff; }
/*.custom-scroll .check_box2 .check { width:100%; }*/
.custom-scroll .check_box2 .check { width:auto; }
.custom-scroll .check:not(:last-child) { margin-right:5px; }
.custom-scroll .check input[type=checkbox] + label:before { display:none; }
.custom-scroll .check input[type=checkbox] + label { height:34px; padding:0 10px; background:#fff; border:1px solid #ddd; border-radius:4px; justify-content:center; align-items:center; }
.custom-scroll .check input[type=checkbox]:checked + label { background:var(--sub-color); border-color:var(--sub-color); font-weight:bold; color:#fff; }
/* 시/구/동/상세 마커 클릭시 나오는 팝업 */
.none { display:none !important; }
.popup { display:inline-flex; width:400px; max-height:calc(100vh - 70px); background-color:#fff; border:1px solid #ddd; border-top:none; position:absolute; top:0; left:-200%; flex-direction:column; box-shadow:none; z-index:100; overflow-y:auto; transition:left 0.2s; }
.popup.on { left:0; }
@keyframes pulse {
0% { transform:scale(1.01); }
100% { transform:scale(1); }
}
.popup_title_box { display:inline-flex; width:100%; flex-direction:column; }
.popup_title { display:inline-flex; height:50px; padding:10px 15px; background-color:#fff; border-bottom:1px solid #ddd; align-items:center; position:relative; }
.popup_title>* { display:inline-flex; min-height:28px; align-items:center; color:#000; }
.popup_titleL { display:inline-flex; min-height:28px; align-items:center; color:#000; }
.popup_title .mo_only { display:none; }
.popup_title .back_btn { margin-right:10px; justify-content:center; align-items:center; cursor:pointer; }
.popup_title .back_btn:hover i { opacity:.8; transition:all .2s; }
.popup_title .close_btn { justify-content:center; align-items:center; cursor:pointer; position:absolute; top:50%; right:15px; transform:translateY(-50%); }
.popup_title .close_btn:hover i { opacity:.8; transition:all .2s; }
.popup_title i { font-size:20px; color:#000; }
.popup_title .title { font-size:16px; font-weight:bold; line-height:15px; }
.popup .info_wrap { display:inline-flex; width:100%; flex-direction:column; }
.popup .info_box { display:inline-flex; width:100%; min-height:100px; padding:10px; justify-content:center; flex-direction:column; }
.popup .info_box h4 { font-size:20px; font-weight:bold; }
.popup .info_box p { min-height:20px; margin:5px 0; font-size:13px; color:#999; }
.popup .info_box div { }
.popup .info_box .info_charger_box { display:inline-flex; width:100%; margin-top:2px; margin-bottom:-5px; flex-wrap:wrap;justify-content:space-between; }
.popup .info_box .info_charger_box .chargerCnt_box { display:inline-flex; }
.popup .info_box .chargerCnt_box span { display:inline-flex; height:24px; margin-bottom:5px; padding:0 5px; background-color:var(--main-color-op10); border-radius:4px; font-size:13px; color:var(--main-color);justify-content:center; align-items:center; }
.popup .info_box .chargerCnt_box span span { min-height:auto; margin:0; margin-left:3px; padding:0; background-color:transparent; border-radius:0; font-weight:bold; }
.popup .info_box .chargerCnt_box span:not(:last-child) { margin-right:5px; }
.popup .info_wrap .btn_box { display:inline-flex; width:100%; height:60px; padding:10px; background-color:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; justify-content:space-between; position:absolute; bottom:0; left:0; }
.popup .info_wrap .btn_box>* { width:calc((100% - 10px) / 2); }
.popup .info_wrap .btn_box>*:last-child { background-color:var(--sub-color); border-color:var(--sub-color); }
.popup .info_wrap .btn_box>*:last-child:hover { background-color:#fff; border-color:var(--sub-color); color:var(--sub-color); }
.popup .info_wrap .btn_box>*:last-child:hover i { color:var(--sub-color); }
.popup .btn_default { height:38px; padding:0 10px; border-radius:4; font-size:14px; }
.popup .popup_content_box { height:calc(100% - 110px); background-color:#f6f6f6; border-top:1px solid #ddd; overflow-y:auto; }
.popup .table_box { display:inline-flex; width:100%; padding:10px; padding-bottom:15px; background-color:#fff; flex-direction:column; }
.popup .table_box:not(:last-child) { margin-bottom:10px; }
.table_title { display:inline-flex; min-height:24px; margin-bottom:10px; align-items:center; }
.table_title2 { flex-wrap:wrap; justify-content:space-between; align-items:center; }
.chargerUpdateDate_box, .chargerUpdateDate_box span { font-size:12px; color:#999; }
.table_title .title { font-size:15px; font-weight:bold; }
.table_con { display:inline-flex; flex-direction:column; }
.table_con table { width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.table_con table thead th { background-color:var(--main-color); text-align:center; color:#fff; }
.table_con table thead th:first-child { background-color:var(--sub-color); }
.table_con table td, .table_con table th { padding:5px; border:1px solid #ddd; border-left:none; border-right:none; font-size:14px; }
.table_con table th, .table_con table th * { font-weight:bold; }
.table_con table td { background-color:#f6f6f6; font-size:13px; text-align:center; }
td .txt_red { font-size:13px; }
.td_div { display:inline-flex; width:100%; align-items:center; }
.table_con table .rank_name span { width:calc(100% - 24px); font-size:13px; }
.table_con table .rank_name i, .table_con table .rank_name .num { display:inline-flex; width:18px; height:18px; margin-right:4px; justify-content:center; align-items:center; }
.table_con table .rank_name i { color:var(--sub-color); font-size:16px; }
.table_con>table tbody tr:nth-child(-n+3) .rank_name span { font-weight:500; }
.table_con table .rank_name .num { font-size:14px; font-weight:bold; color:#999; }
.table_con table .rank_name .num i { display:inline-flex; width:auto; height:18px; margin:0; justify-content:center; align-items:center; font-size:12px; font-weight:bold; color:#999; }
.table_con table .rank_name .trophy_span { display:inline-flex; width:18px; height:18px; margin-right:4px; justify-content:center; align-items:center; }
.table_con table .rank_name .trophy_span i { display:inline-flex; width:auto; height:18px; margin:0; justify-content:center; align-items:center; font-size:15px; }
.table_con table .rank_name #gold { color:var(--gold_color); }
.table_con table .rank_name #gold i { color:var(--gold_color); }
.table_con table .rank_name #silver { color:var(--silver_color); }
.table_con table .rank_name #silver i { color:var(--silver_color); }
.table_con table .rank_name #bronze { color:var(--bronze_color); }
.table_con table .rank_name #bronze i { color:var(--bronze_color); }
.table_con table .strong { font-weight:bold; }
.table_con table th.strong { color:var(--main-color); }
.table_con .table2 td { background-color:#fff; text-align:left; }
.table_con table td.rank_name { padding-right:0; }
.table_con .table2 th { text-align:center; }
th .park { display:inline-flex; align-items:center; }
th .park div:not(:last-child):after { content:'/'; padding:0 5px; color:#999; }
.badge { display:none; border-radius:4px; }
.badge_btn { display:inline-flex; width:24px; height:24px; margin-left:5px; background-color:#fff; border:1px solid var(--main-color); border-radius:4px; justify-content:center; align-items:center; font-size:13px; font-weight:bold; color:var(--main-color); cursor:pointer; }
.badge_btn.on { background-color:var(--main-color); color:#fff; }
.badge_btn:not(:last-child) { margin-right:5px; }
.table_title2 .badge { display:inline-flex; width:100%; margin-top:8px; padding:0; padding-bottom:2px; flex-wrap:nowrap; overflow-x:auto; }
.table_title2 .badge::-webkit-scrollbar { height:4px; }
.table_title2 .badge::-webkit-scrollbar-thumb { background-color:var(--sub-color); border-radius:10px; }
.table_title2 .badge::-webkit-scrollbar-track { background-color:#f3f3f3; border-radius:10px; }
.table_title2 .badge_btn { width:auto; height:28px; margin:0; padding:0 5px; }
.table_title2 .badge_btn:not(:last-child) { margin-right:5px; }
td .unit { font-size:10px; font-weight:bold; }
#fac_table .table_con .facNone { display:inline-flex; width:100%; flex-direction:column; justify-content:center; align-items:center; color:#999; }
#fac_table .table_con .facNone i { margin-bottom:5px; font-size:30px; color:var(--main-color-op30); }
#land_table .table_con .landNone { display:inline-flex; width:100%; flex-direction:column; justify-content:center; align-items:center; color:#999; }
#land_table .table_con .landNone i { margin-bottom:5px; font-size:30px; color:var(--main-color-op30); }
#charger_table .table_con .no_charger { display:inline-flex; width:100%; flex-direction:column; justify-content:center; align-items:center; color:#999; }
#charger_table .table_con .no_charger i { margin-bottom:5px; font-size:30px; color:var(--main-color-op30); }
.popup .table_con .btn_default { margin-top:10px; }
#dong-click .table_con table .strong, #dong-click .table_con .dong tbody tr:last-child th { background-color:var(--main-color-op10); }
#dong-click .table_con .dong tbody tr:last-child * { border-top:3px double #ddd; }
#dong-click .table_con table th { padding:5px; padding-left:5px; }
#dong-click .table_con table tbody th { text-align:right; }
#dong-click .table_con table th:nth-child(2) { border-right:1px solid #ddd; }
.more_btn { display:inline-flex; width:100%; margin-top:10px; justify-content:center; align-items:center; }
.popup .table_con .more_btn .btn_default { height:30px; margin:0; }
.more_btn2 { display:none; }
.more_box {}
.more_box table { display:none; }
.more_box.on .more_btn { display:none; }
.more_box.on .more_btn2 { display:inline-flex; }
.more_box.on table { display:table; margin-top:-1px; border-top:none; }
.popup#station-click { height:calc(100vh - 70px); }
.popup#station-click .popup_content_box { height:calc(100% - 100px); margin-bottom:60px; }
.popup#dong-click .popup_content_box { height:calc(100% - 50px); border-top:none; }
.popup .chargerInfo_btn { display:inline-flex; height:30px; margin-top:10px; padding:0 5px; background:#fff; border:1px solid #ddd; border-radius:4px; font-size:13px; justify-content:center; align-items:center; cursor:pointer; transition:all .2s; }
.popup .chargerInfo_btn:hover { background:var(--main-color); border-color:var(--main-color); color:#fff; transition:all .2s; }
.chargerInfo_btn .chargerInfo_close { display:none; }
.chargerInfo_btn .chargerInfo_open { display:inline-flex; }
.chargerInfo_btn.on .chargerInfo_close { display:inline-flex; }
.chargerInfo_btn.on .chargerInfo_open { display:none; }
.chargerInfo_btn i { margin-left:5px; transform:rotate(180deg); }
.chargerInfo_btn.on i { transform:rotate(0deg); }
.popup .table_box#status_table { display:none; }
.popup .table_box#status_table.on { display:inline-flex; }
#chargerInfo { display:none; position:absolute; top:0; left:100%; }
#station-click.on ~ #chargerInfo.on { display:inline-flex;max-height:calc(100vh - 240px); border-left:none; left: 400px; box-shadow: none; }
#chargerInfo .popup_content_box { padding:10px; background:#fff; border-top:none; }
.chargerStation_box { display:inline-flex; width:100%; flex-wrap:wrap; flex-direction:column; }
.chargerStation_box:not(:last-child) { margin-bottom:10px; }
.chargerStation_box.on:not(:last-child) { margin-bottom:20px; }
.chargerStation_box>div { display:inline-flex; width:100%; }
.chargerStation_box>.chargerStation_title { justify-content:space-between; align-items:center; cursor:pointer; }
.chargerStation_title .chargerCnt_title { display:inline-flex; width:calc(100% - 100px); flex-direction:column; }
.chargerCnt_title h4 { display:inline-flex; font-size:16px; font-weight:bold; align-items:center; }
.chargerCnt_title h4 i { margin-right:5px; font-size:16px; }
.chargerCnt_title span { display:inline-flex; margin-top:2px; font-size:13px; color:#999; align-items:center; line-height:1.2; align-items:center; }
.chargerCnt_title span i { display:inline-flex; min-width:12px; margin-right:5px; font-size:12px; justify+-content:center; align-items:center; }
.chargerCnt_title .location-text { display:inline-block; max-width:calc(100% - 40px); margin:0; }
.chargerCnt_title .location-more-btn { display:inline-flex; width:18px; height:18px; margin:0; margin-left:5px; padding:0; background-color:#fff; border:1px solid #ddd; border-radius:4px; font-size:13px; color:#666; cursor:pointer; align-items:center; justify-content:center; transition:all 0.2s; }
.chargerCnt_title .location-more-btn:hover { background:#e0e0e0; color:#333; }
.chargerCnt_arrow { display:inline-flex; flex:none; margin-left:10px; }
.chargerCnt_arrow span { display:inline-flex; margin-right:5px; }
.chargerStation_box.on .arrow { transform:rotate(180deg); }
.chargerStation_box>.charger_wrap { display:none; margin-top:10px; margin-bottom:-10px; flex-wrap:wrap; }
.chargerStation_box.on>.charger_wrap { display:inline-flex; }
.charger_wrap .charger_box { display:inline-flex; width:calc((100% - 20px) / 3); margin-bottom:10px; padding:10px; border:1px solid #ddd; border-radius:10px; flex-direction:column; }
.charger_wrap .charger_box:not(:last-child) { margin-right:10px; }
.charger_wrap .charger_box:nth-child(3n) { margin-right:0; }
.charger_wrap .charger_box>* { display:inline-flex; justify-content:space-between; align-items:center; line-height:1.2; }
.charger_wrap .charger_box h4 { display:inline-flex; width:100%; margin-bottom:5px; justify-content:space-between; font-size:15px; font-weight:bold; }
.charger_wrap .charger_box>*>* { font-size:13px; }
.charger_wrap .charger_box span.times { font-weight:bold; }
.charger_wrap .charger_box.status1 { border-color:#0050dd; }
.charger_wrap .charger_box.status1 h4 { color:#0050dd; }
.charger_wrap .charger_box.status2 { border-color:#00af00; }
.charger_wrap .charger_box.status2 h4 { color:#00af00; }
.charger_wrap .charger_box.status3 { border-color:#555; }
.charger_wrap .charger_box.status3 h4 { color:#555; }
.charger_wrap .charger_box.status4 { border-color:#d10000; }
.charger_wrap .charger_box.status4 h4 { color:#d10000; }
/* 충전기 설치 팝업 */
#charging_install { z-index:99; }
#charging_install.on { width:400px; height:auto; border-left:none; left:400px; box-shadow:none; }
#charging_install .popup_content_box { border-top:none; }
.popup form { display:inline-flex; width:100%; flex-direction:column; }
.popup .table_con table th input, .popup .table_con table th select, .popup .table_con table th textarea, .popup .table_con table th .radio input[type=radio] + label * { font-size:14px; font-weight:normal; }
.popup input { display:inline-block; width:100%; height:34px; padding:0 10px; background-color:#fff; border:1px solid #ddd; border-radius:5px; font-weight:normal; }
.popup input:disabled, .popup input:read-only { background-color:#f3f3f3; }
.popup .input_span span { height:34px; }
.popup select { display:inline-block; width:100%; height:34px; padding:0 10px; background-color:#fff; border:1px solid #ddd; border-radius:5px; font-weight:normal; cursor:pointer; }
.popup textarea { display:inline-block; width:100%; height:150px; padding:10px; background-color:#fff; border:1px solid #ddd; border-radius:5px; font-weight:normal; resize:none; float:left; outline:none; }
.popup .check_box { margin-top:10px; justify-content:space-between; }
.popup .check_box span { font-size:13px; }
.popup .check_box .check { width:auto; }
.popup .check_box .check + span { display:inline-flex; text-decoration:underline; color:#999; cursor:pointer; transition:all .2s; }
.popup .check_box .check + span:hover { color:#000; }
.txt_red { position:relative; }
.txt_red:before { content:'*'; display:inline-flex; width:10px; height:10px; position:absolute; top:0; right:-10px; color:red; justify-content:center; align-items:center; font-size:18px; }
#charging_install #charging_install_btn { width:auto; margin-top:10px; padding:0 20px; align-self:center; }
/* 정보 수정 신청 팝업 */
.info_edit { height:auto; z-index:99; }
#info_edit.on { width:450px; max-height:calc(100vh - 240px); border-left:none; left:400px; box-shadow:none; }
.info_edit .popup_content_box { display:inline-flex; width:100%; background:#fff; border-top:none; flex-direction:column; overflow:hidden; overflow-y:auto; }
.info_edit .bbs_wrap { width:100%; padding:10px 10px 15px; }
.info_edit .btn_box { display:inline-flex; }
.info_edit .btn_box .btn_default { height:34px; background-color:#333; border-color:#333; }
.info_edit .btn_box .btn_default:not(:last-child) { margin-right:5px; }
.info_edit .btn_box .btn_default:hover { background:#fff; color:#333; }
.info_edit .btn_box .btn_default.btn_info { background:var(--sub-color); border-color:var(--sub-color); }
.info_edit .btn_box .btn_default.btn_info:hover { background:#fff; color:var(--sub-color); }
.info_edit .btn_box .btn_default.btn_post { background:var(--main-color); border-color:var(--main-color); }
.info_edit .btn_box .btn_default.btn_post:hover { background:#fff; color:var(--main-color); }
.info_edit .btn_box .btn_default.btn_report { background:#db7067; border-color:#db7067; }
.info_edit .btn_box .btn_default.btn_report:hover { background:#fff; color:#db7067; }
.info_edit .bbs_top { display:inline-flex; width:auto; justify-content:space-between; position:absolute; top:0; right:0; }
.info_edit .table_top { margin-bottom:10px; }
.info_edit .bbs_num { display:inline-flex; width:auto; padding:0 10px; background:var(--main-color-op10); border-radius:6px; justify-content:center; align-items:center; font-size:14px; color:var(--main-color); }
.info_edit .bbs_num span { margin-left:3px; font-weight:bold; font-size:15px; color:var(--main-color); }
.info_edit .bbs_bottom { display:inline-flex; width:100%; flex-direction:column; position:relative; }
.info_edit .bbs_list_box table { width:100%; }
.info_edit .bbs_list_box table tbody tr { border-bottom:1px solid #ddd; cursor:pointer; }
.info_edit .bbs_list_box table tbody tr:hover { background:var(--main-color-op10); transition:all .2s; }
.info_edit .bbs_list_box table td, .info_edit .bbs_list_box table th { padding:10px; text-align:center; }
.info_edit .bbs_list_box .manage_type { display: inline-flex; width:100%; padding:3px 5px; background:var(--sub-color-op10); border-radius:5px; font-size:13px; font-weight:bold; color:var(--sub-color); justify-content:center; align-items:center; }
.info_edit .bbs_list_box .manage_type.postpone { background:var(--main-color-op10); color:var(--main-color); }
.info_edit .bbs_list_box .manage_type.infoedit { background:var(--sub-color-op10); color:var(--sub-color); }
.info_edit .bbs_list_box .manage_type.report { background:rgba(219,112,103,.1); color:#db7067; }
.info_edit .bbs_list_box table th { padding:8px 10px; background:#f6f6f6; font-weight:bold; }
.info_edit .request_title { display:inline-flex; width:100%; flex-wrap:wrap; }
.info_edit .request_title i { display:inline-flex; width:20px; height:20px; margin-right:5px; color:var(--sub-color); justify-content:center; align-items:center; }
.info_edit .request_title .title { display:inline-block; width:calc(100% - 25px); text-align:left; }
.info_edit .status { color:#999; }
.info_edit .status.ing { padding:3px 5px; background:var(--red_color-op10); border-radius:4px; color:transparent; animation:twinkle .8s ease-in infinite alternate; }
.info_edit .status.ok { font-weight:bold; color:var(--main-color); }
.info_edit .status.return { font-weight:bold; color:var(--red_color); }
.info_edit .time { display:none; }
.info_edit .pagination_box { margin-top:15px; margin-bottom:0; }
@keyframes twinkle {
0% { color:transparent; }
50% { color:var(--red_color); }
}
.info_edit_form { z-index:99; }
#info_edit_form.on { width:450px; border-left:none; left:400px; box-shadow:none; }
#info_edit_form .popup_content_box { border-top:none; }
.info_edit_form #info_edit_btn { width:auto; margin-top:10px; padding:0 20px; align-self:center; }
.info_edit_form .radio input[type=radio]#form_type2:checked + label { background:var(--sub-color); border-color:var(--sub-color); }
.info_edit_form .radio input[type=radio]#form_type3:checked + label { background:#db7067; border-color:#db7067; }
.guide_file_down { display:inline-flex; margin-bottom:10px; padding:3px 8px; border:1px solid #ddd; border-radius:4px; justify-content:center; align-items:center; align-self:flex-end; font-size:13px; cursor:pointer; }
.guide_file_down i { margin-right:5px; }
.guide_file_down:hover { background:var(--main-color); border-color:var(--main-color); color:#fff; transition:all .2s; }
.modal_info_pw { width:400px; height:auto; flex-direction:column; }
.modal_info_pw h4 { display:inline-flex; margin-bottom:10px; font-size:14px; align-items:center; font-weight:normal; }
.modal_info_pw h4 i { display:inline-flex; width:20px; height:20px; margin-right:3px; color:var(--sub-color); justify-content:center; align-items:center; font-size:14px; }
.modal_info_pw .input_box { display:inline-flex; width:100%; }
.modal_info_pw .input_box .password { width:calc(100% - 80px); height:40px; margin-right:10px; }
.modal_info_pw .input_box input { display:inline-flex; width:100%; height:100%; padding:0 10px; border:1px solid #ddd; border-radius:6px; align-items:center; font-size:14px; }
.modal_info_pw .input_box .btn_default2 { width:70px; }
/* 충전기 설치 신청 목록 */
#charging_install_list { height:auto; z-index:99; }
#charging_install_list.on { width:450px; max-height:calc(100vh - 240px); border-left:none; left:400px; box-shadow:none; }
#charging_install_list .popup_content_box { display:inline-flex; width:100%; background:#fff; border-top:none; flex-direction:column; overflow:hidden; overflow-y:auto; }
#charging_install_list .bbs_wrap { width:100%; padding:10px 10px 15px; position:relative; }
#charging_install_list .bbs_top { display:inline-flex; width:auto; justify-content:space-between; position:absolute; top:10px; right:10px; z-index:1; }
#charging_install_list .table_top { margin-bottom:10px; }
#charging_install_list .btn_box { display:inline-flex; }
#charging_install_list .btn_box .btn_default { height:34px; background-color:#333; border-color:#333; }
#charging_install_list .btn_box .btn_default:not(:last-child) { margin-right:5px; }
#charging_install_list .btn_box .btn_default:hover { background:#fff; color:#333; }
#charging_install_list .bbs_num { display:inline-flex; width:auto; padding:0 10px; background:var(--main-color-op10); border-radius:6px; justify-content:center; align-items:center; font-size:14px; color:var(--main-color); }
#charging_install_list .bbs_num span { margin-left:3px; font-weight:bold; font-size:15px; color:var(--main-color); }
#charging_install_list .bbs_bottom { display:inline-flex; width:100%; flex-direction:column; position:relative; }
#charging_install_list .bbs_list_box table { width:100%; }
#charging_install_list .bbs_list_box table tbody tr { border-bottom:1px solid #ddd; cursor:pointer; }
#charging_install_list .bbs_list_box table tbody tr:hover { background:var(--main-color-op10); transition:all .2s; }
#charging_install_list .bbs_list_box table td, #charging_install_list .bbs_list_box table th { padding:10px; text-align:center; }
#charging_install_list .status { color:#999; }
#charging_install_list .status.ing { padding:3px 5px; background:var(--red_color-op10); border-radius:4px; color:transparent; animation:twinkle .8s ease-in infinite alternate; }
#charging_install_list .status.ok { font-weight:bold; color:var(--main-color); }
#charging_install_list .status.return { font-weight:bold; color:var(--red_color); }
#modal_notice, .modal_notice { width:auto; height:auto; }
#modal_notice .modal_content, .modal_notice .modal_content { padding:30px; }
#modal_notice .notice_box, .modal_notice .notice_box { display: inline-flex; width:100%; margin-bottom:20px; font-size:15px; word-break:keep-all; text-align:center; flex-direction:column; }
#modal_notice .notice_box h4, .modal_notice .notice_box h4 { margin-bottom:15px; font-size:18px; font-weight:bold; animation:twinkle2 .5s ease-in infinite alternate; }
@keyframes twinkle2 {
0% { color:#000; }
100% { color:var(--red_color); }
}
#modal_notice .btn_box, .modal_notice .btn_box { justify-content:center; align-items:center;}
@media (max-width:1400px) {
.popup { width:calc(100% - 40px); }
.main>div { padding:50px 20px; }
.main>div.mobile_moveBtn { display:inline-flex; width:calc(100% - 20px); height:40px; padding:0; background:var(--main-color); border:1px solid var(--main-color); border-radius:5px; flex-direction:row; justify-content:center; align-items:center; color:#fff; position:fixed; bottom:10px; left:50%; transform:translateX(-50%); cursor:pointer; z-index:1; box-shadow:0 0 5px rgba(0,0,0,.15); transition:bottom .2s; }
.main>div.mobile_moveBtn.on { bottom:-50px; }
.main>div.mobile_moveBtn * { color:#fff; }
.main>div.mobile_moveBtn i { margin-right:10px; }
.mobile_finished { display:inline-flex; width:max-content; padding:4px 8px; background:var(--bs-blue); border-radius:30px; font-size:12px; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); justify-content:center; align-items:center; color:#fff; }
.mobile_finished i { margin-right:5px; font-size:12px; color:#fff; }
.measure_info_box.area_remove { padding:0; background:transparent; border:none; }
.main_box { width:50%; left:60px; }
.main_box h2 { font-size:60px; }
.main_box p { margin-bottom:30px; font-size:24px; letter-spacing:4px; }
.main_box p span { font-size:24px; }
.main_box span { font-size:16px; }
.main_box .btn_default { margin-top:40px; }
.main01 .swiper-slide>img { width:50%; right:0; }
.slide03 .biz_logo_box { max-width:90%; padding:0 50px; }
.mainBox { width:100%; margin-top:50px; }
.mainBox.main02_con { flex-direction:column; }
.main02_con_L .box_con { padding:20px; }
.box_con .info_box { width:calc((100% - 90px) / 2); padding:20px; }
.box_con .info_box div { width:100%; font-size:16px; }
.main02_con_L .txt_box { width:calc((100% - 90px) / 2); }
.main02_con>div { width:100%; }
.main02_arrow { top:inherit; bottom:-40px; right:auto; left:50%; transform:translateX(-50%) rotate(90deg); }
.main02_con>.main02_con_R { flex-direction:row; }
.main02_con_R { margin-top:60px; }
.main02_con_R .box2 { flex-direction:column; }
.main02_con_R .box2:not(:last-child) { margin:0; margin-right:15px; }
.main02_con_R .box2 .icon_box { width:100%; }
.main02_con_R .box2 .icon_box .img { display:none; }
.main02_con_R .box2 .icon_box img { width:70%; max-width:80px; }
.main02_con_R .box2 .icon_box span { background:var(--main-color); border-radius:10px; font-size:16px; color:#fff; }
.main02_con_R .box2 .con_box { width:100%; height:auto; margin-top:10px; padding:20px; font-size:16px; }
.main02_con_R .box2 .con_box:after { display:none; }
.main03_box .icon_box { width:100px; height:100px; margin-bottom:20px; }
.main03_box img { width:60px; }
.main03_box .con_box p { font-size:16px; }
.main03_box .con_box h4 { font-size:20px; }
.main>.main04 { padding:80px 0; }
.main04 h2 { font-size:40px; }
.main04 h2 span { font-size:55px; }
.main04 h2 p { margin-top:15px; font-size:16px; }
.main04 .btn_box { margin-top:50px; }
.main05 .logo_box { width:100%; }
.main>.main06 { padding:50px 5px; }
.main06 .news_wrap { width:100%; }
#station-click { width:400px; max-height:calc(100vh - 70px); }
}
@media (max-width:768px) {
body { padding-top:50px;}
header { height:50px; padding:0 15px; z-index:2; }
.logo img { height:20px; }
.main_nav { display:none; }
.header_right { display:none; }
.mo_hamburger { display:inline-flex; position:relative; }
.mo_login { display:inline-flex; padding:10px 15px; border-bottom:1px solid #ddd; }
.mo_login .btn_login { display:inline-flex; width:100%; height:40px; padding:0 15px; background-color:var(--main-color); border:1px solid var(--main-color); border-radius:6px; justify-content:center; font-size:16px; font-weight:bold; color:#fff; cursor:pointer; }
.mo_login .btn_login i { margin-right:10px; font-size:16px; color:#fff; }
.mo_login .btn_login:hover { background-color:#fff; border-color:var(--main-color); color:var(--main-color); transition:all .2s; }
.mo_login .btn_login:hover i { color:var(--main-color); transition:all .2s; }
.pc_only { display:none; }
.mo_only { display:inline-block; }
.btn_default { height:38px; padding:0 10px; font-size:14px; }
.main_wrap { width:100%; padding:15px; }
.main_title { margin-bottom:10px; padding:30px 0 0; }
.main_title h4 { font-size:24px; }
.main_title p { margin:10px auto; font-size:12px; position:relative; left:inherit; bottom:inherit; transform:none; }
.main>div { padding:40px 0; }
.main>div>h4 { padding:0 20px; font-size:24px; }
.main>div>p { padding:0 20px; font-size:16px; }
.menu_line { width:calc(100% - 30px); }
.menu_line .car { width:50px; }
.menu_line .plug { width:30px; right:0; }
.main>.main01 { height:auto; padding-bottom:0; background-color:var(--main-color-op10); flex-direction:column-reverse; }
.main01_slide.slide01 { padding:40px 0 0; background-color:transparent; }
.main01_slide.slide02 { margin-bottom:-40px; padding:40px 0 0; background:none !important; }
.main01_slide.slide02 img { display:inline-flex; }
.main_box { width:100%; padding:0 20px; justify-content:center; align-items:center; position:relative; top:inherit; left:inherit; transform:none; text-align:center; }
.main01_slide { width:100%; justify-content:center; align-items:center; position:relative; top:inherit; left:inherit; transform:none; text-align:center; flex-direction:column-reverse; }
.main01 .swiper-slide>img { width:80%; height:auto; position:relative; top:inherit; right:inherit; transform:none; }
.main_box h2 { margin-bottom:5px; font-size:44px; }
.main_box p { margin-bottom:20px; font-size:18px; letter-spacing:2.5px }
.main_box p span { font-size:18px; }
.main_box span { font-size:16px; }
.main_box .btn_default { width:auto; margin-top:20px; padding:0 20px; align-self:center; }
.main01_slide.slide03 { flex-direction:column; }
.main01 .swiper-slide.slide03>img { display:none; }
.slide03 .main_box { width:100%; padding:40px 0 0; }
.slide03 .main_box h2 { font-size:44px; }
.slide03 .main_box .subTitle { font-size:18px; padding:5px 10px; align-self:center; }
.slide03 .bubble_box { max-width:100%; margin-top:40px; padding:0 20px; }
.slide03 .bubble_box div { width:100px; height:100px; padding:15px; font-size:14px; }
.slide03 .biz_logo_box { max-width:calc(100% - 40px); margin-top:60px; position:inherit; bottom:inherit; left:inherit; transform:none; flex-direction:column; }
.slide03 .biz_logo_box img { max-height:60px; }
.main01 .btn_box { margin-top:10px; flex-direction:column; }
.main01 .btn_box .btn_default { width:155px; margin:0; margin-top:10px; padding-right:25px; position:relative; }
.main01 .btn_box .btn_default:not(:last-child) { margin-right:0; }
.main01 .btn_box .btn_default i { position:absolute; top:50%; right:10px; transform:translateY(-50%); }
.mainBox { width:100%; margin-top:30px; padding:0 20px; flex-direction:column; }
.main02_con_L, .main02_con_R { width:100%; }
.main02_con_L { margin-bottom:60px; }
.main02_con_L .box_title { height:40px; font-size:18px; }
.main02_con_L .box_con { padding:20px; flex-direction:column; }
.box_con .info_box { width:100%; padding:20px; }
.box_con .info_box div { width:100%; min-height:40px; font-size:16px; }
.main02_con_L .arrow img { margin:10px 0; transform:rotate(-90deg); }
.main02_con_L .txt_box { width:100%; }
.main02_con_L .txt_box .box { padding:15px; }
.main02_con_L .txt_box .box:not(:last-child) { margin-bottom:15px; }
.main02_arrow { top:inherit; bottom:-35px; right:inherit; left:50%; transform:translateX(-50%); }
.main02_arrow img { height:44px; transform:rotate(90deg); }
.main02_con>.main02_con_R { margin:0; flex-direction:column; }
.main02_con_R .box2 { flex-direction:row; }
.main02_con_R .box2:not(:last-child) { margin:0; margin-bottom:10px; }
.main02_con_R .box2 .icon_box { width:90px; }
.main02_con_R .box2 .icon_box .img { display:inline-flex; }
.main02_con_R .box2 .icon_box img { width:60px; }
.main02_con_R .box2 .icon_box span { height:34px; background:#fff; border-radius:0 0 10px 10px; font-size:16px; color:var(--main-color); }
.main02_con_R .box2 .con_box { width:calc(100% - 120px); margin-top:0; }
.main02_con_R .box2 .con_box:after { content:''; display:inline-flex; border-right:15px solid rgba(255,255,255,.8); border-top:15px solid transparent; border-bottom:15px solid transparent; position:absolute; top:50%; left:-15px; transform:translateY(-50%); }
.main02_con>div>.box_title { width:100%; padding:10px; justify-content:center; font-size:18px; }
.main02_con>.main02_con_T>.box_con { flex-wrap:wrap; color:#555; }
.main02_con>.main02_con_T>.box_con>div { width:calc((100% - 10px) / 2); margin-bottom:10px; font-size:16px; }
.main02_con>.main02_con_T>.box_con>div:not(:last-child) { margin-right:10px; }
.main02_con>.main02_con_T>.box_con>div:nth-child(2n) { margin-right:0; }
.main02_con>.main02_con_T>.box_con>div:nth-child(3), .main02_con>.main02_con_T>.box_con>div:nth-child(4) { margin-bottom:0; }
.flow_prev>div { font-size:16px; }
.flow_prev>.flow_box { flex-wrap:wrap; flex-direction:column; }
.flow_prev>.flow_box>div { width:100%; padding:10px; font-size:16px; }
.flow_prev>.flow_box>div:not(:last-child) { margin-bottom:30px; }
.flow_prev>.flow_box>div:not(:last-child):after { content:'\f13a'; top:calc(100% + 5px); left:50%; transform:translateX(-50%); }
.flow_next { flex-direction:column; }
.flow_next .box2 { width:100%; }
.flow_next .box2:not(:last-child) { margin-bottom:15px; }
.flow_next .box2 .icon_box span { font-size:18px; }
.flow_next .box2 .con_box span { font-size:14px; }
.main02_con>.main02_con_B>.box_title img { max-height:16px; }
.main03_box { width:100%; height:auto; padding:30px 0; aspect-ratio:auto; }
.main03_box:not(:last-child) { margin:0; margin-bottom:20px; }
.main03_box .icon_box { width:100px; aspect-ratio:auto 1 / 1; height:auto; margin-bottom:15px; }
.main03_box img { width:70px; }
.main03_box .con_box p { font-size:16px; }
.main03_box .con_box h4 { font-size:18px; }
.main>.main04 { padding:50px 20px; }
.main04 h2 { font-size:24px; line-height:1.4; word-break:keep-all; }
.main04 h2 span { font-size:34px; }
.main04 .btn_box { margin-top:30px; }
.main05 .logo_box { padding:0 20px; flex-wrap:wrap; }
.main05 .logo_box img { width:calc((100% - 30px) / 3); max-width:calc((100% - 30px) / 3); }
.main05 .logo_box img:not(:last-child) { margin-right:15px; }
.main05 .logo_box img:nth-child(3n) { margin-right:0; }
footer { padding:60px 0 20px; }
footer .terms { width:100%; padding:8px 10px; background:#333; justify-content:center; top:0; left:0; right:inherit; }
footer .terms li { font-size:14px; color:#fff; }
footer .terms li:hover { color:#fff; }
footer .logo { height:24px; margin-bottom:20px; }
footer .logo img { height:30px; }
footer .company { padding:0 30px; flex-direction:column; }
footer .company span { font-size:14px; }
footer .company span:not(:last-child):after { display:none; }
footer .copyright { margin-top:20px; }
.login_wrap { min-height:calc(100vh - 301px); }
.login_box { width:calc(100% - 30px); padding:30px 0; }
#map_wrap { height:calc(100vh - 50px); }
#map_wrap_box { position:relative; z-index:1; }
.map_controls { width:40px; position:absolute; top:65px; right:10px; }
.map_controls .map_type>div { height:30px; }
#map { height:calc(100vh - 50px) !important; }
.measure_control .map_btn_icon.on + .measure_wrap { width:50px; }
.form_data { position:relative; }
.filter_wrap { width:100%; border-left:none; border-right:none; border-radius:0; top:-1px; left:0; }
.filter_mo { display:inline-flex; width:34px; height:34px; border:1px solid #ddd; border-radius:4px; justify-content:center; align-items:center; color:#999; cursor:pointer; }
.filter_mo i { margin-right:0; }
.filter_mo span { display:none; }
.filter_wrap.on .filter_mo { background-color:var(--main-color); border-color:var(--main-color); }
.filter_wrap.on .filter_mo i { color:#fff; }
.guide_slide_wrap .or { margin:20px 0; }
.address_search { background-color:#fff; border-bottom:none !important; border-radius:0; justify-content:space-between; position:relative; z-index:1; }
.address_search .search_box { width:calc(100% - 40px); }
.search_box input { width:calc(100% - 60px); height:34px; font-size:14px; }
.search_box .btn_default { width:60px; height:34px; font-size:14px; }
.search_box .btn_default i { font-size:14px; }
#autocomplete-results { }
.autocomplete-item { padding:5px 10px; font-size:13px; }
.filter_wrap .filter_box.forms { background-color:#fff; position:absolute; top:-100vh; left:0; transition:all .2s ease-in; }
.filter_wrap.on .filter_box.forms { margin-top:0; border-top:1px solid #ddd; border-radius:0; top:54px; box-shadow:0 0 5px rgba(0,0,0,.5); }
.filter_btn_box { margin-bottom:10px; }
.filter_btn_box li { height:34px; font-size:14px; }
.popup { position:fixed; top:0; transition:none; }
.popup.on { width:100%; height:100vh; max-height:100%; border:none; border-radius:0; left:0; }
.popup#dong-click .popup_content_box { height:calc(100% - 50px); }
#station-click .popup_title_box { border-bottom:1px solid #ddd; }
#station-click .popup_title_box { box-shadow:1px 1px 5px rgba(0,0,0,.15); }
.popup_title { background-color:#fff; }
.popup_title>*, .popup_title i { color:#000; }
#station-click .popup_title { justify-content:space-between; }
#map_links_container.mo_only { display:inline-flex; align-self:flex-end; }
#map_links_container a { display:inline-flex; width:30px; height:30px; border:1px solid #ddd; border-radius:5px; justify-content:center; align-items:center; }
#map_links_container .map_kakao { background:#f9e000; border-color:#f9e000; }
#map_links_container a.pc_only { display:none; }
#map_links_container a:not(:last-child) { margin-right:5px; }
#map_links_container a img { display:inline-flex; width:100%; height:auto; }
.popup .popup_content_box { height:100%; border-top:none; }
#charging_install.on { width:100%; left:0; z-index:999; }
#info_edit.on { width:100%; max-height:100vh; left:0; z-index:999; }
#info_edit_form.on { width:100%; left:0; z-index:1000; }
#modal_info_pw.on { width:90%; }
.map_controls .guideBtn, .map_controls .guideBtn.bottomLeft { top:auto; bottom:15px; left:10px; animation:none; }
.notice_bubble { top:auto; bottom:calc(100% + 10px); }
#guide_wrap.scale_on { width:90%; right:inherit; left:50%; top:50%; transform:translate(-50%, -50%); }
#guide_wrap.scale_on .guide_slide { width:100%; padding:0; }
#guide_wrap.scale_on .guide_slide>h4 { flex-wrap:wrap; justify-content:center; }
#guide_wrap.scale_on #info_edit-guide, #guide_wrap.scale_on .info_edit_form { width:100%; height:auto; }
#guide_wrap.scale_on .guide_slide4 .info_edit, #guide_wrap.scale_on .guide_slide4 .info_edit, #guide_wrap.scale_on .guide_slide4 #modal_info_pw2 { width:100% !important; height:auto; }
#guide_wrap.scale_on .guide_arrow { margin:15px; padding:0; transform:rotate(90deg); }
#guidePopup { width:90%; height:90%; max-height:90%; top:50%; transform:translate(-50%, -50%); }
#guidePopup .guide_content_wrap { width:100%; margin:0; padding:20px; }
#guidePopup .filter_wrap .filter_box.forms { display:none; }
#guidePopup .mobile_box { background:#333; }
#guidePopup .mobile_box:before { background:#f6f6f6;}
#guidePopup .mobile_box:after { background:#f6f6f6;}
#guidePopup .finger_box .finger i:after { background:var(--sub-color); opacity:.5; }
#guidePopup .guide_content h4 span { font-size:20px; }
#guidePopup .cluster_marker.dong .cluster_bottom { font-size:13px; }
#guidePopup .filter_mo { margin:4px 0; }
#guidePopup .guide_slide_wrap #station-click-guide { height:auto; }
#guide_wrap { padding:70px 0 50px; }
#guide_wrap>.close_btn { width:40px; height:40px; border-width:3px; top:15px; right:15px; }
#guide_wrap>.close_btn i { font-size:20px; }
.guide_content_wrap { width:100%; padding:0 15px; overflow:hidden; }
.guide_content { width:100%; }
.guide_content:not(:last-child) { margin-bottom:30px; }
#guide_wrap .filter_wrap .filter_box.forms { display:none; position:relative; top:inherit; left:inherit; }
.guide_content h4, .guide_content h4 span { font-size:16px; line-height: 26px; }
.guide_content h4 span { font-size:20px; }
.guide_cluster_wrap .cluster_marker { transform:none; margin:10px; }
#guide_wrap .cluster_marker.dong .cluster_bottom { font-size:13px; }
.cluster_right .map_links a.mo_only { display:inline-flex; }
.zoom_mouse { margin:0 30px; }
.finger_touch { display:inline-flex; position:relative; }
.mobile_box { display:inline-flex; width:100px; height:180px; background:#fff; border-radius:10px; }
.mobile_box:before { content:''; display:inline-flex; width:84px; height:145px; background:#333; border-radius:8px; position:absolute; top:8px; left:8px; }
.mobile_box:after { content:''; display:inline-flex; width:15px; height:15px; background:#333; border-radius:10px; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); }
.finger_box { display:inline-flex; width:100%; height:100%; position:absolute; top:0; left:0; }
.finger_box .finger { position:absolute; transform:none; }
.finger_box .finger_L { animation:touch_zoomIn_L .6s ease-in infinite alternate; }
.finger_box .finger_R { animation:touch_zoomIn_R .6s ease-in infinite alternate; }
.finger_box .finger i { font-size:30px; color:#fff; text-shadow:0 0 5px black; position:relative; }
.finger_box .finger i:before { position:relative; z-index:1; }
.finger_box .finger i:after { content:''; display:inline-flex; width:24px; height:24px; background:var(--sub-color); border-radius:24px; position:absolute; top:-5px; left:50%; z-index:0; opacity:.5; }
.finger_box .finger_R i:after { top:-5px; left:-10px; }
.finger_box .finger_L i { transform:rotate(-45deg); }
.finger_box .finger_R i { transform:rotate(45deg); }
.tableResponsive { display:inline-flex; width:100%; border-bottom:none; }
.tableResponsive colgroup { display:none; }
.tableResponsive tbody, .tableResponsive tr { display:inline-flex; width:100%; flex-direction:column; }
.tableResponsive th { display:none; }
.tableResponsive td { display:inline-flex; width:100%; padding:0; border:none; border-bottom:1px solid #ddd; align-items:center; }
.tableResponsive td:before { content:attr(data-th); display:inline-flex; width:100px; height:100%; background:#f6f6f6; justify-content:center; align-items:center; font-weight:bold; }
.tableResponsive td .td_div { display:inline-flex; width:calc(100% - 100px); padding:8px 10px; }
.tableResponsive .td_txt_red:before { color:var(--red_color); background-color:var(--red_color-op10); }
@keyframes touch_zoomIn_L {
0% { top:calc(50% - 5px); left:calc(50% - 30px); transform:translateY(-50%); }
100% { top:30px; left:10px; }
}
@keyframes touch_zoomIn_R {
0% { top:calc(55% + 10px); left:50%; transform:translateY(-50%); }
100% { top:calc(100% - 45px); left:calc(100% - 35px); }
}
.popup#station-click { width:100%; height:100%; max-height:100%; }
#modal_notice { width:90%; }
}