@import url("../fonts/font.css");

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

* {
    box-sizing: border-box;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

em {
    font-style: normal;
}

a {
    color: inherit;
    text-decoration: none;
}

html,body {
    font-family: "Pretendard";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.625rem; /* 162.5% */
    /* 16px */
}

.huge {
    font-size: 3rem;
    font-weight: 600;
    line-height: 3.875rem;
    /* 129.167% */
    letter-spacing: -0.12rem;
    /* 48px; */
}

h1,.h1 {
	font-size: 2.75rem;
	font-style: normal;
	font-weight: 600;
	line-height: 3.875rem; /* 140.909% */
    letter-spacing: -2.64px;
	/* 44px */
}

h2,.h2 {
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 3.25rem;
    /* 130% */
    letter-spacing: -0.1rem;
    /* 40px */
}

h4,.h4 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.5rem;
    /* 142.857% */
    letter-spacing: -0.07rem;
    /* 28px; */
}

h5,.h5 {
    font-size: 1.375rem;
    font-style: normal;
    line-height: 2.5rem;
    /* 181.818% */
    /* 22px */
}

h6,
.h6 {
    font-size: 1.125rem;
    font-style: normal;
    line-height: 1.75rem;
    font-weight: 600;
    /* 155.556% */
    letter-spacing: -0.023rem;
    /* 18px */
}

p {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.625rem;
    letter-spacing: -0.56px;
    /* 162.5% */
}

.p {
    font-size: 0.938rem;
    font-style: normal;
    line-height: 1.625rem;
    /* 173.333% */
    letter-spacing: -0.009rem;
    /* 15px */
}

small {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.5rem;
    /* 171.429% */
    letter-spacing: -0.018rem;
    /* 14px */
}

.small {
    font-size: 0.75rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.008rem;
    /* 12px */
}

.text_13 {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 153.846% */
    letter-spacing: -0.26px;
}

.text_14 {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.5rem;
    /* 171.429% */
    letter-spacing: -0.018rem;
    /* 14px */
}

.text_20 {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.875rem;
    /* 150% */
    letter-spacing: -0.013rem;
    /* 20px */
}

.text_32 {
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.75rem;
    /* 137.5% */
    letter-spacing: -0.08rem
        /* 32px */
}


strong,
.strong {
    font-weight: 700;
}

.bold {
    font-weight: 600;
}

.semibold {
    font-weight: 500;
}

.normal {
    font-weight: 400;
}

.light {
    font-weight: 300;
}

.text_left {
    text-align: left !important;
}

.text_center {
    text-align: center !important;
}

.text_right {
    text-align: right !important;
}

/* layout */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

.xl_container {
    margin: 0 auto;
    width: 100%;
    max-width: 1630px;
}

.lg_container {
    margin: 0 auto;
    width: 100%;
    max-width: 1350px;
}

.md_container {
    margin: 0 auto;
    width: 100%;
    max-width: 1030px;
}

.sm_container {
    margin: 0 auto;
    width: 100%;
    max-width: 830px;
}

.xs_container {
    margin: 0 auto;
    width: 100%;
    max-width: 410px;
}

.common_section {
    padding-top: 48px;
    padding-bottom: 80px;
}

.view_section {
    padding-top: 30px;
    padding-bottom: 140px;
}

.title_section {
    background: #EEF5FB;
    padding-top: 130px;
    padding-bottom: 48px;
}

.title_section.lg {
    background: #EEF5FB;
    padding-top: 130px;
    padding-bottom: 60px;
}

.title_section .breadcrumb {
    margin-bottom: 24px;
}

.content_section.sm {
    padding: 48px 0;
}

.content_section {
    padding-top: 80px;
    padding-bottom: 140px;
}

.content_section .content_list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.content_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* color */
.highlight {
    color: var(--Blue-60, #065BBD);
}

.deep_gray {
    color: #9EA5AF;
}

.gray_80 {
    color: #23262B;
}

.gray_70 {
    color: #424850;
}

.gray_60 {
    color: #5F666E;
}

.gray_50 {
    color: #767E88;
}

.gray_45 {
    color: #878f9a;
}

.gray_40 {
    color: #9EA5AF;
}

.gray {
    color: #8C9098;
}

.blue_60 {
    color: #065BBD;
}

.red_50 {
    color: #DD1E0D;
}

.red {
    color: #D93434;
}

.dark_gray {
    color: #8F9194;
}

.light_gray {
    color: #A7AAAD;
}

.white {
    color: #FFF;
}

.blue {
    color: #00509E;
}

.blue_500 {
    color: var(--Blue-50, #0B72D3);
}

.navy {
    color: #09244F;
}

/*
        icon
        small 12px
        midium 16px
        large 24px
*/
.btn_ico {
    font-size: 0;
    border: none;
    background: none;
}

.btn_link {
    color: #0099B0 !important;
    background: none !important;
    border: none !important;
}

.ico {
    font-size: 0;
    font-style: normal;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.ico.xs {
    display: block;
    width: 12px;
    height: 12px;
    background-size: 12px;
}

.ico.sm {
    display: block;
    width: 16px;
    height: 16px;
    background-size: 16px;
}

.ico.md {
    display: block;
    width: 20px;
    height: 20px;
    background-size: 20px;
}

.ico.lg {
    display: block;
    width: 24px;
    height: 24px;
    background-size: 24px;
}

.ico.xl {
    display: block;
    width: 30px;
    height: 30px;
    background-size: 30px;
}

.ico.xxl {
    display: block;
    width: 48px;
    height: 48px;
    background-size: 48px;
}

.ico.big {
    display: block;
    width: 78px;
    height: 78px;
    background-size: 78px;
}

.ico.huge {
    display: block;
    width: 96px;
    height: 96px;
    background-size: 96px;
}

.ico.ico_28 {
    width: 28px;
    height: 28px;
}

.arrow_right {
    background-image: url('../images/icon/arrow/arrow_right_black.svg');
}

.arrow_down {
    background-image: url('../images/icon/arrow/arrow_down_black.svg');
}

.arrow_left_white {
    background-image: url('../images/icon/arrow/arrow_left_white.svg');
}

.arrow_right_gray {
    background-image: url('../images/icon/arrow/arrow_right_gray.svg');
}

.weather_sun {
    background-image: url('../images/weather/weather_sun.svg');
    cursor: default;
}

.weather_cloud {
    background-image: url('../images/weather/weather_cloud.svg');
    cursor: default;
}

.weather_fog {
    background-image: url('../images/weather/weather_fog.svg');
    cursor: default;
}

.weather_rain {
    background-image: url('../images/weather/weather_rain.svg');
    cursor: default;
}

.weather_rain_snow {
    background-image: url('../images/weather/weather_rain_snow.svg');
    cursor: default;
}

.weather_snow {
    background-image: url('../images/weather/weather_snow.svg');
    cursor: default;
}

.weather_shower {
    background-image: url('../images/weather/weather_shower.svg');
    cursor: default;
}

.ico_close_black {
    background-image: url('../images/icon/ico_close.svg');
}

.ico_search_black {
    background-image: url('../images/icon/ico_search.svg');
}

.ico_location_black {
    background-image: url('../images/icon/ico_location.svg');
}

.ico_speaker_red {
    background-image: url('../images/icon/ico_speaker.svg');
}

.ico_search_white {
    background-image: url('../images/icon/ico_search_white.svg');
}

.ico_dashboard_nav_1 {
    background-image: url('../images/icon/dashboard_nav/nav_1.svg');
}

.ico_dashboard_nav_2 {
    background-image: url('../images/icon/dashboard_nav/nav_2.svg');
}

.ico_dashboard_nav_3 {
    background-image: url('../images/icon/dashboard_nav/nav_3.svg');
}

.ico_dashboard_nav_4 {
    background-image: url('../images/icon/dashboard_nav/nav_4.svg');
}

.ico_dashboard_nav_5 {
    background-image: url('../images/icon/dashboard_nav/nav_5.svg');
}

.ico_dashboard_nav_6 {
    background-image: url('../images/icon/dashboard_nav/nav_6.svg');
}

.ico_dashboard_nav_7 {
    background-image: url('../images/icon/dashboard_nav/nav_7.svg');
}

.ico_dashboard_nav_8 {
    background-image: url('../images/icon/dashboard_nav/nav_8.svg');
}

.ico_dashboard_nav_9 {
    background-image: url('../images/icon/dashboard_nav/nav_9.svg');
}

.ico_dashboard_nav_10 {
    background-image: url('../images/icon/dashboard_nav/nav_10.svg');
}

.ico_hamburger {
    background-image: url('../images/icon/ico_hamburger.svg');
}

.ico_note {
    background-image: url('../images/icon/ico_note.svg');
}

.ico_arrow_right_round_blue {
    background-image: url('../images/icon/btn_arrow_round_blue.svg');
}

.ico_timetable {
    background-image: url('../images/icon/ico_timetable.svg');
}

.ico_bus_blue {
    background-image: url('../images/icon/ico_bus_blue.svg');
}

.ico_marker {
    width: 15px;
    height: 20px;
    background-image: url('../images/icon/ico_marker.svg');
    background-size: contain;
}

.ico_home_opacity {
    background-image: url('../images/icon/ico_home_opacity.svg');
}

.ico_blue_bus {
    background-image: url('../images/icon/ico_blue_bus.svg');
}

.ico_green_bus {
    background-image: url('../images/icon/ico_bus_green.svg');
}

.ico_reset {
    background-image: url('../images/icon/ico_reset.svg');
}

.ico_map_btn_sort {
    background-image: url('../images/icon/map/btn_sort.svg');
}

.ico_map_btn_close {
    background-image: url('../images/icon/map/btn_close.svg');
}

.ico_list_toggle {
    background-image: url('../images/icon/map/list_toggle.svg');
}


.ico_new {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-image: url('../images/icon/ico_new.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #F97415;
}

.ico_reply {
    display: block;
    padding: 2px 6px;
    color: #0099B0;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: -0.2px;
    border-radius: 10px;
    border: 1px solid #D1D6DD;
}

/* button */
button {
    font-family: 'Pretendard';
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px 32px;
    background-color: #FFF;
    color: #000;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid var(--gray-10-line, #E3E6E9);
}

.button.blue {
    background-color: #065BBD;
    color: #fff;
}

.button.red {
    background-color: #dc3545;
    color: #fff;
}

.button.black {
    background-color: #000;
    color: #fff;
}

.button.capsule {
    border-radius: 1000px;
}

.button.full {
    width: 100%;
}

.button.lg {
    font-size: 1.125rem;
}

.button.sm {
    padding: 11px 24px;
}

.button.xs {
    padding: 6px;
    font-size: 13px;
    color: #5F666E;
}

.btn_arrow {
    position: relative;
    min-width: 240px;
    max-width: 240px;
    padding: 15px 22px;
    color: #000;
    font-size: 1.125rem;
    line-height: 32px;
    font-weight: 600;
    border-width: 2px;
    background-color: #FFF;
    background-image: url('../images/icon/btn_arrow_black.svg');
    background-size: 16px;
    background-position: right 22px center;
    background-repeat: no-repeat;
    transition: 0.08s ease-in;
    -o-transition: 0.08s ease-in;
    -ms-transition: 0.08s ease-in;
    -moz-transition: 0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
    z-index: 1;
}

.btn_arrow.white {
    color: #FFF;
    background: none;
    border-color: #FFF;
    background-image: url('../images/icon/btn_arrow_white.svg');
    background-size: 16px;
    background-position: right 22px center;
    background-repeat: no-repeat;
}

.btn_arrow_round {
    padding: 0 30px 0 0;
    height: 32px;
    line-height: 32px;
    font-size: 1.125rem;
    border: none;
    background: none;
    background-image: url('../images/icon/btn_arrow_round.svg');
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: right center;
}

.btn_arrow:hover {
    color: #FFF;
}

.btn_arrow:before {
    content: '';
    position: absolute;
    background: #000;
    bottom: 0;
    left: 0;
    top: 0;
    right: 100%;
    z-index: -1;
    -webkit-transition: right 0.2s ease-in;
    background-image: url('../images/icon/btn_arrow_white.svg');
    background-size: 16px;
    background-position: right 22px center;
    background-repeat: no-repeat;
}

.btn_arrow:hover:before {
    right: 0;
}

.btn_arrow.white:hover {
    color: #000;
}

.btn_arrow.white:before {
    background: #FFF;
    background-image: url('../images/icon/btn_arrow_black.svg');
    background-size: 16px;
    background-position: right 22px center;
    background-repeat: no-repeat;
}


/* btn size */
.btn_block {
    width: 100%;
    justify-content: center;
}

.btn.disabled {
    opacity: 0.4;
    cursor: auto;
}


/*badge*/
.badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 10000px;
    color: #FFF;
    border-color: #14171B;
    background-color: #14171B;
    white-space: nowrap;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    /* 150% */
    letter-spacing: -0.64px;
    font-family: 'Gothic A1';
}

.badge_red {
    font-family: 'Pretendard';
    padding: 4px 8px;
    color: #DD1E0D;
    background-color: #FFDFDA;
    font-size: 12px;
    line-height: 1;
}

.badge_green {
    font-family: 'Pretendard';
    padding: 4px 8px;
    color: #0EA800;
    background-color: #D3F5D0;
    font-size: 12px;
    line-height: 1;
}

.badge_blue {
    font-family: 'Pretendard';
    padding: 4px 8px;
    color: #0B72D3;
    background-color: #EEF5FB;
    border: 1px solid #D4E7F8;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
}

/* input */
input,
select,
textarea {
    font-family: Pretendard;
    font-size: 1rem;
    line-height: 28px;
    /* font-family: "Inter", sans-serif; */
    font-weight: 400;
}

input:focus,
select:focus {
    /* outline: 1px solid #0C0D0D; */
}

input[type='date'],
input[type='time'] {
    -webkit-appearance: none;
    background-color: #FFF;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #FFF;
}

select:required:invalid {
    color: #909090;
}

input::placeholder,
select::placeholder {
    color: #909090;
}

.pagination {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    gap: 8px;
}

.pagination > li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a {
    display: block;
    width: 24px;
    height: 24px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    color: #9EA5AF;
}

.pagination .on a {
    color: #121212;

}

.prev a {
    font-size: 0;
    background-image: url('../images/icon/ico_pagination_left.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    margin-right: 24px;
}

.next a {
    font-size: 0;
    background-image: url('../images/icon/ico_pagination_right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    margin-left: 24px;
}

.prev.on a {
    font-size: 0;
    background-image: url('../images/icon/ico_pagination_left_active.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    margin-right: 24px;
}

.next.on a {
    font-size: 0;
    background-image: url('../images/icon/ico_pagination_right_active.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    margin-left: 24px;
}

.inline_text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inline_text.no_gap {
    gap: 0;
}

.inline_text.gap8 {
    gap: 8px;
}

.inline_text.baseline {
    align-items: baseline;
}

.lb_radio {
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}

.lb_radio > span {
    display: inline-block;
    vertical-align: middle;
}

.lb_radio > small {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.lb_radio > input[type=radio] {
    display: none;
}

.lb_radio > input[type=radio]+span {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #D2D4D8;
    border-radius: 50%;
}

.lb_radio > input[type=radio]:checked+span {
    position: relative;
    border: none;
    background-color: #065BBD;
}

.lb_radio > input[type=radio]:checked+span::before {
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #fff;
}

.lb_radio_btn {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.lb_radio_btn > input[type=radio] {
    display: none;
}
.lb_radio_btn > input[type=checkbox] {
    display: none;
}

.lb_radio_btn > input[type=radio]+span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    background-color: #F6F8FA;
    border-radius: 50%;
}
.lb_radio_btn > input[type=checkbox]+span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    background-color: #F6F8FA;
    border-radius: 50%;
}

.lb_radio_btn > input[type=radio]:checked+span {
    background-color: #0B72D3;
    color: #fff;
}
.lb_radio_btn > input[type=checkbox]:checked+span {
    background-color: #0B72D3;
    color: #fff;
}

.lb_radio_btn > input[type=radio]:checked+span+small {
    color: #0B72D3;
}
.lb_radio_btn > input[type=checkbox]:checked+span+small {
    color: #0B72D3;
}

.lb_text_btn {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    white-space: wrap;
    max-width: 500px;
}

.lb_text_btn > input[type=text] {
    background-color: #F6F8FA;
    border: none;
    border-radius: 10px;
}

.lb_text_btn > input[type=text].short {
    width: 150px;
}

.lb_text_btn > input[type=text].subjective {
    width: 500px;
    height: 100px;
}

.flex_break {
    flex-basis: 100%;
    height: 0;
    margin: 100px 0; /* 공간만 띄우기 */
}

.input {
    font-family: Pretendard;
    width: 100%;
    padding: 12px 16px;
    border: none;
    outline: none;
    border-radius: 10px;
    background: var(--Common-White, #FFF);
}

.input.border {
    border: 1px solid var(--gray-10-line, #E3E6E9);
}

.select.border {
    border: 1px solid var(--gray-10-line, #E3E6E9);
}

.input::placeholder {
    color: var(--Gray-40, #9EA5AF);
}

.select {
    font-family: 'Pretendard';
    padding: 11px 32px 11px 16px;
    background-image: url('../images/icon/arrow/arrow_down_black.svg');
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 20px;
    border: none;
    border-radius: 10px;
}

.button.submit {
    display: flex;
    padding: 11px 24px;
    align-items: center;
    border-radius: 10px;
    background: var(--Gray-80, #23262B);
    color: #FFF;
}

.dot_text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    width: 6px;
    background-color: #000;
}

.dot_text {
    position: relative;
    padding-left: 16px;
}

.list_text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 17px;
    width: 3px;
    background-color: #065BBD;
}

.list_text {
    position: relative;
    padding-left: 13px;
    margin-bottom: 20px;
}

.dash_text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 2px;
    width: 8px;
    background-color: #14171B;
}

.dash_text {
    position: relative;
    padding-left: 15px;
    margin-bottom: 16px;
}

.index_circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
    background-color: #000;
    color: #fff;
    font-size: 9px;
    line-height: normal;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
}

.form_area {
    padding: 40px 0;
    border-radius: 12px;
    background: var(--Gray-5, #F6F8FA);
}

.no_data_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    border-radius: 20px;
    border: 1px solid var(--gray-10-line, #E3E6E9);
    background: #FFF;
}

.no_data_item_no_border {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    /*border-radius: 20px;
    border: 1px solid var(--gray-10-line, #E3E6E9);*/
    background: #FFF;
}

.no_data_icon {
    display: inline-block;
    width: 37px;
    height: 37px;
    background-image: url('../images/icon/ico_no_data.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.table_wrapper {
    width: 100%;
    overflow-x: auto;
}

/* 테이블 기본 */
.common_table {
    width: 100%;
    min-width: 600px;
    border-top: 2px solid var(--Gray-90, #14171B);
}

.common_table.no_border_top {
    border-top: unset;
}

.common_table.responsive {
    min-width: unset;
}

.common_table th,
.common_table td {
    padding: 12px 10px;
    border: 1px solid #E3E6E9;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
}

/* 테이블 셀 크기 */
.common_table th.lg,
.common_table td.lg {
    padding: 24px 10px;
}

.common_table th.sm,
.common_table td.sm {
    padding: 6px 10px;
}

/* 테이블 기본 스타일 */
.common_table thead th {
    background: var(--Blue-5, #EEF5FB);
    font-weight: 600;
    line-height: 22px;
    /* 157.143% */
    letter-spacing: -0.56px;
}

.common_table thead th.blue {
    background: var(--Blue-5, #EEF5FB);
}

.common_table tbody th {
    background: var(--Blue-5, #EEF5FB);
    line-height: 22px;
    font-weight: 500;
    /* 157.143% */
    letter-spacing: -0.56px;
}

.common_table td {
    color: #5F666E;
    font-weight: 500;
    background-color: #fff;
}

/* 회색 테이블 */
.common_table.gray th {
    background-color: #F6F8FA;
    color: #14171B;
}

.common_table.gray td {
    color: #14171B;
}

/* 흰색 테이블 */
.common_table.white thead th {
    background-color: #fff;
    font-weight: 600;
    color: #14171B;
}

.common_table.white tbody th {
    background-color: #fff;
    font-weight: 500;
    color: #14171B;
}

.common_table.white td {
    color: #5F666E;
}


.common_table .border_vertical {
    border-left: none;
    border-right: none;
}


.common_table .border_right {
    border-left: none;
}

.common_table .button_area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.common_table td.blue,
.common_table th.blue {
    color: #065BBD;
}

.common_table td.red,
.common_table th.red {
    color: #DD1E0D;
}

.common_table td.blue_bg,
.common_table th.blue_bg {
    background: #EEF5FB;
}

.common_table td.red_bg,
.common_table th.red_bg {
    background: #FEF4EF;
}

.common_table td.gray_bg,
.common_table th.gray_bg {
    background: #F6F8FA;
}

.image_wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    border: #14171B solid 5px;
    border-radius: 35px;
}

@media (max-width: 768px) {
    .image_wrapper {
        border-radius: 15px;
    }
}

.image_wrapper > img {
    min-width: 600px;
    width: 100%;
    height: 100%;
}

.image_wrapper.responsive > img {
    min-width: unset;
}

.image_wrapper.sm > img {
    max-width: 100%;
    min-width: 0;
    height: auto;
}

.bg_item {
    padding: 68px 60px 80px 60px;
    border-radius: 20px;
    background: var(--Gray-5, #F6F8FA);
}

.bg_item.xl {
    padding: 126px 140px;
}

.bg_item.sm {
    padding: 40px;
}

.bg_item.xs {
    padding: 32px 40px;
}

.bg_item.xxs {
    border-radius: 10px;
    padding: 16px 24px;
}

.bg_item.xxxs {
    border-radius: 8px;
    padding: 12px 8px;
}

.bg_item.bg_gray {
    background: var(--Gray-5, #F6F8FA);
}

.bg_item.bg_white {
    background: #fff;
}

.bg_item.bg_red {
    background: #FCF4F1;
}

.border_item {
    padding: 50px 48px;
    border-radius: 16px;
    border: 1px solid var(--gray-10-line, #E3E6E9);
    background: #FFF;
}

.border_item .image_map {
    display: flex;
    flex-direction: column;
    gap: 136px;
}


.flex_column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.flex_column.lg {
    gap: 40px;
}

.flex_column.gap40 {
    gap: 40px;
}

.flex_column.md {
    gap: 30px;
}

.flex_column.sm {
    gap: 20px;
}

.flex_column.xs {
    gap: 10px;
}

.flex_column.gap100 {
    gap: 100px;
}

.flex_column.gap24 {
    gap: 24px;
}

.flex_column.gap22 {
    gap: 22px;
}

.flex_column.gap16 {
    gap: 16px;
}

.flex_column.gap12 {
    gap: 12px;
}

.flex_column.gap8 {
    gap: 8px;
}

.flex_column.gap4 {
    gap: 4px;
}


.info_list > li {
    width: 100%;
    padding: 24px 0;
    border-bottom: 1px solid #E3E6E9;
}

.info_list > li > dl {
    display: flex;
    width: 100%;
}

.info_list > li > dl > dt {
    flex: 0 1 16%;
}

.info_list > li > dl > dd {
    flex: 1;
}

.tag {
    display: inline-block;
    color: var(--Blue-60, #065BBD);
    padding: 4px 8px 3px 8px;
    border-radius: 6px;
    border: 2px solid #91BBEB;
    background: var(--Common-White, #FFF);
}

.tag.xs {
    padding: 0px 4px;
    background: unset;
    border: 1px solid var(--gray-20-line, #D2D4D8);
    color: #5F666E;
}

.tag_green {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: var(--Green-53C000, #53C000);
    color: #fff;
    line-height: 1.4;
    border: none;
}

.tag_blue {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: #065BBD;
    color: #fff;
    line-height: 1.4;
    border: none;
}

.tag_bluegreen {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: #00AFBD;
    color: #fff;
    line-height: 1.4;
    border: none;
}

.tag_orange {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: #E47E34;
    color: #fff;
    line-height: 1.4;
    border: none;
}

.tag_purple {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: #6A0DAD;
    color: #fff;
    line-height: 1.4;
    border: none;
}

.tag_yellow {
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    background: #FFD700;
    color: #fff;
    line-height: 1.4;
    border: none;
}


.common_map {
    aspect-ratio: 2.4/1;
}

.flex_wrap_list.item3 {
    display: flex;
    gap: 56px 40px;
    flex-wrap: wrap;
}

.flex_wrap_list.item3 > li {
    flex: 0 0 calc(100% / 3 - (2 * 40px) / 3);
}

/* img 태그 안쓰는 경우 */
.bg_image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 3/2;
}

.search_input {
    padding: 11px 16px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #E3E6E9;
    background-color: #fff;
}

.search_input.sm {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #E3E6E9;
    background-color: #fff;
}

.search_input > input {
    width: 100%;
    flex: 1;
    border: none;
    outline: none;
}

.view_content {
    padding: 0 28px 30px 28px;
}

.view_files {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 30px 28px;
    border-top: 1px solid #E3E6E9;
    border-bottom: 1px solid #E3E6E9;
}

.view_files > span {
    min-width: 60px;
    position: relative;
}

.view_files > span::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--gray-20-line, #D2D4D8);
}

.view_section .button_group {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.line1 {
    white-space: nowrap;
}

/* 경유 경류장 정보 */
.stopover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 25px;
    border-radius: 20px;
    border: 1px solid var(--gray-10-line, #E3E6E9);
    background: #FFF;
    /*overflow-x: auto;*/
}

.stopover_scroll {
    overflow-x: auto;
    width: 100%;
}
.stopover ul {
    /*position: relative;*/
    width: 880px;
    list-style: none;
    margin: 30px;
    padding: 0;
}
.stopover ul li {
    width: 110px;
    height: 130px;
    line-height: 24px;
    position: relative;
    /*font-size: 12px;*/
    text-align: center;
    padding: 0 2px;
}
.p_left {
    float: left;
    margin: 0;
    padding: 0;
    overflow: visible;
}
.p_right {
    float: right;
    margin: 0;
    padding: 0;
    overflow: visible;
}
.t_line {
    height: 10px;
    width: 100%;
    background-color: #D1D4D8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: auto;
    margin: 0;
    padding: 2px 0 2px 0
}
.s_line {
    height: 10px;
    width: 50%;
    background-color: #D1D4D8;
    position: absolute;
    top: 0;
    left: 55px;
    z-index: auto;
    margin: 0;
    padding: 2px 0 2px 0
}
.e_line {
    height: 10px;
    width: 50%;
    background-color: #D1D4D8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: auto;
    margin: 0;
    padding: 2px 0 2px 0
}
.r_line {
    height: calc(100% + 10px);
    width: 50px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    /*background-color: #D1D4D8;*/
    border: 10px solid #D1D4D8;
    border-left: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: auto;
    margin: 0;
    padding: 2px 0 2px 0;
    overflow: visible;
}
.l_line {
    height: calc(100% + 10px);
    width: 50px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    /*background-color: #D1D4D8;*/
    border: 10px solid #D1D4D8;
    border-right: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: auto;
    margin: 0;
    padding: 2px 0 2px 0;
    overflow: visible;
}
img {
    vertical-align: middle;
}
.f_icon {
    position: absolute;
    top: -14%;
    left: 38%;
    z-index: auto;
    margin: 0;
    padding: 0;
}
.circle {
    position: absolute;
    top: -3.5%;
    left: 41%;
    width: 20px;
    height: 20px;
    z-index: auto;
    border: 2px solid #ADB2B9;
    background-color: #fff;
    border-radius: 50%;
}
.f_txt {
    margin: 20px 0 0 0;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    font-size: 14px;
    font-weight: 500;
    z-index: auto;
    display: block;
}
.s_txt {
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #5F666E;
    z-index: auto;
    display: block;
}
.clear {
    clear: both;
}

/*수정 css*/

@media (max-width: 1150px) {
    .main_title {
        font-size: 1.75rem; /* 36px */
        line-height: 2.25rem; /* 44px */
        letter-spacing: -1.44px;
    }
}

@media (max-width: 767px) {
    .main_title {
        font-size: 0.75rem; /* 36px */
        line-height: 1.25rem; /* 44px */
        letter-spacing: -1.44px;
    }
}

@media (max-width: 1150px) {
    .button.lg {
        font-size: 0.875rem; /* 14px */
        padding: 12px 24px;
    }
}
@media (max-width: 767px) {
    .button.lg {
        font-size: 0.813rem; /* 13px */
        padding: 10px 20px;
    }
    .button.lg .ico.md {
        width: 12px;
        height: 12px;
        background-size: 12px;
    }
}

/* Select2 디자인 커스터마이징 */
.select2-container--default .select2-selection--single {
    width: 100%;
    height: 50px; /* input과 select의 기본 높이에 맞춤 */
    padding: 11px 32px 11px 16px;
    font-family: 'Pretendard';
    font-size: 1rem;
    line-height: 28px;
    border: 1px solid var(--gray-10-line, #E3E6E9);
    border-radius: 10px;
    background-color: #FFF;
    background-image: url('../images/icon/arrow/arrow_down_black.svg');
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 20px;
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none; /* 기본 화살표 숨기기 */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--Gray-40, #9EA5AF);
}

/* 포커스 상태 스타일 */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #065BBD; /* 포커스 시 테두리 색상 변경 */
    box-shadow: 0 0 0 1px #065BBD;
}

/* 드롭다운 메뉴 스타일 */
.select2-dropdown {
    border: 1px solid var(--gray-10-line, #E3E6E9);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #EEF5FB;
    color: #14171B;
}

.select2-container--default .select2-results__option--selectable {
    font-family: 'Pretendard';
    color: var(--Gray-60, #5F666E);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--gray-10-line, #E3E6E9);
    border-radius: 8px;
}