body, html {position: relative; scroll-behavior: smooth; font-size: 15px; color: #252525; letter-spacing: -0.025em; width: 100%; font-family: 'Noto Sans Kr', sans-serif !important;}
.inner, .container, .s-container  {padding: 0 20px; box-sizing: border-box; width: 100%;}
.blind {font-size: 0; text-indent: -9999px; opacity: 0;}
.s-container {padding: 42px 20px 60px; box-sizing: border-box;}
.s-bg {margin: 42px 0 0; padding: 20px 0 60px; background: #ebeffc; box-sizing: border-box;}

@media all and (max-width: 300px) {
  .inner, .container, .s-container {padding: 0 10px;}
  .s-container {padding: 32px 10px 30px;}
  .s-bg {margin: 32px 0 0; padding: 20px 0 30px;}
}

:root {
  --color: #252525;
  --m-color: #0d64b4;
  --a1-color: #ffe3e8;
  --a2-color: #f0e9f8;
  --a3-color: #dbe8f4;
  --a3-color-b: #10375b;
  --a4-color: #ffe7cc;
  --a4-color-b: #f05a00;
}

a {text-decoration: none; color: inherit; font: inherit;}
a:link {text-decoration: none; color: inherit; font: inherit;}
a:visited {text-decoration: none; color: inherit; font: inherit;}
a:hover {text-decoration: none; color: inherit; font: inherit;}
a:focus {text-decoration: none; color: inherit; font: inherit;}

select {font-size:14px; padding:4px 26px 4px 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:#fff url(/m/img/comm/sel_ico.png) 96% 50% no-repeat; border:1px solid #ddd; box-sizing:border-box;}
select::-ms-expand {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; -webkit-filter: alpha(opacity=0); }
select, button, input, a, textarea {outline-color: var(--m-color);}



@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Kr';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
  url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}


header {width: 100%; height: 60px; border-bottom: 1px solid #ddd; box-sizing: border-box; position: relative; z-index: 99;}
header .flex-layout,
header .container {width: 100%; height: 100%;}
header .flex-layout {display: flex; justify-content: space-between; align-items: center;}
header h1 a {display: block; height: 45px; flex: none;}
header h1 a img {width: auto; display: block; height: 100%;}
.all-menu {flex: none; padding: 20px 0 0; box-sizing: border-box; width: 100%; height: 100vh; overflow-y: auto; display: block; background: #fff; position: fixed; top: 0; left: 0; z-index: 2005; transform: translateX(100%); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.all-menu.show {transform: translateX(0); opacity: 1; visibility: visible;}
.all-menu .all-menu-close {position: absolute; right: 20px; top: 20px; display: block; width: 20px; height: 20px;}
.all-menu .header-top {display: flex; justify-content: flex-start; align-items: center; font-size: 13px;}
.all-menu .header-top b {font-weight: 500; display: inline-block; vertical-align: middle; margin: 0 9px 0 0;}
.all-menu .header-top a {color: #555; margin: 0 9px; display: inline-block; vertical-align: middle; position: relative;}
.all-menu .header-top a::before {content: ''; display: block; width: 1px; height: 10px; background: #555; position: absolute; top: 50%; left: -9px; transform: translateY(-50%);}
.all-menu .m-wrap {margin: 20px 0 0; width: 100%; border: 1px solid #ddd; box-sizing: border-box; border-radius: 20px; padding: 28px 14px; }
.all-menu .m-wrap h2 {text-align: center; font-size: 16px; color: #222; line-height: 22px;}
.all-menu .m-wrap h2 span {display: block; text-align: center; font-size: 14px; color: #555;}
.all-menu .m-wrap h2 b {font-weight: 600;}
.all-menu .mileage-wrap {margin: 12px 0 0; width: 100%; background: #fafafa; border-radius: 12px; padding: 20px 30px; box-sizing: border-box;}
.all-menu .mileage-wrap li {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.all-menu .mileage-wrap li em,
.all-menu .mileage-wrap li p {flex: none; font-size: 14px; color: #222;  line-height: 22px;}
.all-menu .mileage-wrap li span {color: #ff5050; display: inline-block; margin: 0 10px 0 0;}
.all-menu .mileage-wrap li em {font-weight: bold;}
.all-menu #gnb > ul > li > a {line-height: 55px; display: flex; width: 100%; padding: 0 12px; box-sizing: border-box; font-size: 16px; color: #222; border-bottom: 1px solid #ddd;}
.all-menu #gnb {box-sizing: border-box; }
.all-menu #gnb > ul > li > a {background: url(/m/img/comm/gnb-go.png) calc(100% - 12px) 50% no-repeat; background-size: 10px 15px;}
.all-menu #gnb > ul > li > a.has-depth2 {background: url(/m/img/comm/gnb-down.png) calc(100% - 12px) 50% no-repeat; background-size: 15px 10px;}
.all-menu #gnb > ul > li.on > a.has-depth2 {background: url(/m/img/comm/gnb-up.png) calc(100% - 12px) 50% no-repeat; background-size: 15px 10px;}
.all-menu #gnb .depth2 {display: none; width: 100%; padding: 18px 24px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.all-menu #gnb .depth2 li a {display: block; font-size: 15px; color: #555; line-height: 35px;}
.all-menu #gnb > ul > li.on .depth2 {display: block;}
.all-menu .bg_area {background: #fff url(/m/img/comm/gnb-bg.jpg) 50% 100% no-repeat; background-size: 100% auto; width: 100%; padding-bottom: 100%; box-sizing: border-box;}
footer {width: 100%; padding: 24px 0 40px; box-sizing: border-box; background: #222; color: #e4e4e4;}

footer .foot_top {padding: 5px 0 15px;}
footer .foot_top a {color: #999;}
footer p {color: #e4e4e4;}
footer address {font-size: 14px; line-height: 22px;}
footer span {color: #b4b4b4;}
footer .copy {font-size: 12px; color: #999; margin: 16px 0 0;}

.container-title {font-size: 22px; font-weight: bold; color: #222; margin: 0 0 24px;}
.container-title.center {text-align: center;}



h2.page-title {font-size: 16px; color: #fff; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; background: #fc9d9a; height: 50px;}
.page-wrap {width: 100%; padding: 24px 0 16px; box-sizing: border-box; border-bottom: 1px solid #ddd; text-align: center; }
.page-wrap h3 {margin: 0 0 12px; font-size: 22px; font-weight: bold; color: #222;}
.page-wrap h3 span {font-size: 18px;}
.page-wrap ul {display: flex; justify-content: center; align-items: center; }
.page-wrap ul li {font-size: 12px; flex: none; margin: 0 18px 0 0; position: relative;}
.page-wrap ul li:first-of-type > a {display: block; width: 13px; height: 12px; background: url(/m/img/comm/lnb-home.png) 50% 50% no-repeat; background-size: 100% auto;}
.page-wrap ul li:last-of-type {margin: 0;}
.page-wrap ul li::after {position: absolute; top: 50%; transform: translateY(-50%); right: -12px; content: ''; display: block; width: 6px; height: 9px; background: url(/m/img/comm/lnb_arrow.png) 50% 50% no-repeat; background-size: 100% auto;}
.page-wrap ul li:last-of-type::after {content: initial;}
.page-wrap ul li:last-of-type span {display: none;}

@media all and (max-width: 340px) {
  .page-wrap h3 {font-size: 20px;}
  .page-wrap h3 span {font-size: 16px;}
  .page-wrap ul li {margin: 0 10px 0 0;}
  .page-wrap ul li::after {right: -8px;}
}


.date-container {display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 0 28px;}
.date-container > * {flex: none;}
.date-container input[type='text'],
.date-container #datepicker1,
.date-container #datepicker2 {font-family: inherit; font-size: 14px; font-weight: bold; width: 40%; max-width: 160px; border: 1px solid #ddd; padding: 0 12px; box-sizing: border-box; height: 40px; display: block;}
.date-container img.ui-datepicker-trigger {display: block; margin: 0 0 0 6px;}
.date-container span.date_spacing {font-size: 14px; color: #222; display: block; margin: 0 4px;}

@media all and (max-width: 340px) {
  .date-container input[type='text'],
  .date-container #datepicker1,
  .date-container #datepicker2 {width: 35%; max-width: 120px; padding: 0 8px; font-size: 12px;}
}