/* WebFont - Gotham, NotoSansRK */
@import url("//fonts.cdnfonts.com/css/gotham");
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

/* XEION CDN */
@import url("//cdn.jsdelivr.net/xeicon/2/xeicon.min.css");

@font-face {
  font-family: 'GmarketSansBold';
  src: url('font/GmarketSansBold.woff');
}
@font-face {
  font-family: 'GmarketSansMedium';
  src: url('font/GmarketSansMedium.woff');
}

@font-face {
  font-family: 'PretendardLight';
  src: url('font/Pretendard-Light.woff');
}
@font-face {
  font-family: 'PretendardMedium';
  src: url('font/Pretendard-Medium.woff');
}
@font-face {
  font-family: 'PretendardBold';
  src: url('font/Pretendard-Bold.woff');
}
@font-face {
  font-family: 'PretendardExtraBold';
  src: url('font/Pretendard-ExtraBold.woff');
}

/* ############################## Reset CSS ############################## */
html {
  height: 100%;
}
* {
  box-sizing: border-box;
}
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: #333333;
}
button,
input {
  outline: none;
}
ul {
  list-style: none;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  line-height: 1.5em;
}

/* ############################## Default CSS ############################## */
body {
  font-family: "Noto Sans KR", sans-serif;
  margin: 0;
  letter-spacing: -1px;
  background-color: #eee;
  height: 100%;
}

/* ##### Container, Contents  ##### */
.container {
  margin: 0 auto;
  min-width: 320px;
  max-width: 480px;
  background-color: #fff;
  transition: 1s;
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  /* height: calc(var(--vh, 1vh) * 100); */
}

.contents {
  width: 100%;
  height: calc(100% - 60px);
  overflow-y: auto;
}
.contents.main {
  padding-bottom: 60px;
}
.contents > section {
  width: 90%;
  margin: 0 auto;
}
.container.bg {
  background: url("images/container-bg-gray.png") no-repeat center center/cover;
}
.container.bg .contents {
  height: 100%;
}
.container.bg .contents.main {
  height: calc(100% - 60px);
}
.signin-header {
  display: flex;
  height: 60px;
  align-items: center;
}
/* .bg-header .header {justify-content: space-between !important;} */

/* ############################## Common CSS ############################## */

/* ##### Section Box Design ##### */
.box {
  border-radius: 14px;
  color: #fff;
}
.box-shadow-t1 {
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  border: solid 1px #eee;
}
.box-shadow-t2 {
  border-radius: 14px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}
.box-shadow-t3 {
  border-radius: 14px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.09),
  3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.box-color-t1 {
  background-color: #484038;
}
.box-color-t2 {
  background-color: #ff5393;
}
.box-color-t3 {
  background-color: #3c3022;
}

/* ##### Modal Custom  ##### */
.jquery-modal.blocker {
  padding: 0;
}
.modal {
  width: 100%;
  vertical-align: bottom;
  display: none;
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  animation: scaleUp 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-full {
  min-height: calc(100% - 20px);
  /* height: calc(var(--vh, 1vh) * 100 - 20px); */
  /* overflow-y: auto; */
}
.modal-center {
  vertical-align:middle;
  width:80%;
}
.modal-center .modal-contents {
  margin:0;
}
.modal a.close-modal {
  display: none;
}
.modal a.modal-close {
  position: relative;
  float: right;
  font-size: 20px;
}
.modal-contents {
  margin-top: 40px;
}

/* #####  Gird Columns Template  ##### */
.grid-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.grid-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid-columns-2 div,
.grid-columns-3 div {
  text-align: center;
}

/* #####  Tab checked Function  ##### */
input[name="tabmenu"] {
  display: none;
}
.tab-btn label {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #aaaaaa;
  margin: 20px 0;
}
.tabs .tab {
  display: none;
}
/* 탭 선택시 스타일 지정 */
input[id="tab1"]:checked ~ .tab-btn label[for="tab1"],
input[id="tab2"]:checked ~ .tab-btn label[for="tab2"],
input[id="tab3"]:checked ~ .tab-btn label[for="tab3"] {
  color: #000;
  font-weight: bold;
  border-bottom: 3px solid #000;
}
input[id="tab1"]:checked ~ .tabs .tab1,
input[id="tab2"]:checked ~ .tabs .tab2,
input[id="tab3"]:checked ~ .tabs .tab3 {
  display: block;
}

/* #####  Checkbox, Radio Function  ##### */
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
input[type="checkbox"] + label .xi-check {
  height: 30px;
  width: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #e4e4e4;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  margin-right: 8px;
}
input[type="checkbox"]:checked ~ label .xi-check.pink {
  background-color: #ff5393;
}
input[type="checkbox"]:checked ~ label .xi-check.black {
  background-color: #000;
}

.section-signup input[type="radio"] + label {
  border-radius: 0;
  margin: 0;
  padding: 10px 15px;
  background-color: #e4e4e4;
}
.section-signup input[type="radio"]:checked + label {
  background-color: #ff5393;
}

/* CheckBox Switch */
.form-setting label {
  cursor: pointer;
  text-indent: -9999px;
  width: 54px;
  height: 30px;
  background: grey;
  display: block;
  border-radius: 30px;
  position: relative;
}
.form-setting label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 24px;
  transition: 0.3s;
}
.form-setting input:checked + label {
  background: #ff5393;
}
.form-setting input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

/* #####  Buttons  ##### */
.btn {
  border-radius: 8px;
  border: 0;
  letter-spacing: -1.12px;
  font-size: 18px;
  font-weight: 500;
  background-color: #d8d8d8;
  color: #fff;
}
.popup-btns {
  display: flex;
  justify-content: space-between;
}
.btn-small {
  float: right;
  height: 38px;
  line-height: 38px;
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: -1px;
  border-radius: 19px;
  background-color: #f9f9f9;
  color: #333333;
}
.btn-medium {
  width: calc(50% - 5px) !important;
  padding: 13px;
  line-height: 1.4;
  text-align: center;
}
.btn-large {
  width: 100%;
  margin: 30px 0;
  height: 60px;
}
.buttons a.btn-large {
  display: block;
  line-height: 60px;
  text-align: center;
}
.buttons .btn-large {
  margin: 10px 0;
}
.btn-large.disabled {
  background-color: #d8d8d8 !important;
}
.btn.brown {
  background-color: #3c3022 !important;
  color: #fff;
}
.btn.pink {
  background-color: #ff5393 !important;
}
.btn.blue {
  background-color: #236092 !important;
}
.btn.white {
  background-color: #fff !important;
  color: #000;
}
.btn.gray-line {
  border: 1px solid #e6e6e6;
  color: #333;
  background: #fff;
}
.gray {
  color: #666;
}
span.pink {
  color: #ff5393;
}
.barcode-btn:hover {
  transform: scale(1.1);
}

/* #####  InputGroup  ##### */
input::placeholder {
  color: #aaaaaa;
  font-size: 16px;
}

.input-group {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaaaaa;
}
.input-group select,
.input-group input[type="text"],
.input-group input[type="number"],
.input-group input[type="password"] {
  background-color: #fff;
  border: 0;
  width: 100%;
  height: 40px;
  font-size: 20px;
  padding-left: 10px;
}

.select-giftcard .input-group input[type="text"],
.select-givingmileage .input-group input[type="text"] {
  height: unset;
}
.input-group-num {
  line-height: 40px;
}
.input-group-num input[type="number"] {
  padding-left: 0 !important;
}
.input-group span.unit {
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.input-group.no-line {
  border-bottom: none;
}

.form-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.form-wrap > div {
  width: calc(100% - 120px);
}
.form-wrap button {
  width: 110px;
  height: 42px;
  margin-bottom: 10px;
}
.form-label-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
}
button.btn-dup {
  background-color: #fff !important;
  border: 1px solid #eeeeee;
  width: 120px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 0;
}

.form-wrap .btn-radio {
  width: 80px;
}
.btn-radio .input-group {
  border: none;
}

input.num {
  text-align: center;
  padding: 0;
}
label.form-label {
  font-size: 16px;
  color: #999999;
  display: inline-block;
  margin-top: 25px;
  line-height: 30px;
  width: 100%;
}
select[name="job"] {
  color: #aaaaaa;
}

/* 자주사용하는  */
.my-mileage {
  font-family: "Gotham", "Noto Sans KR", serif;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -1.33px;
  color: #ff5393;
}
.unit-won {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -1.33px;
  color: #ff5393;
  font-family: "Noto Sans KR", sans-serif;
}

.title {
  /* float: left; */
  font-size: 20px;
  font-weight: bold;
}

.main-history .used-mileage {
  font-family: "Gotham", "Noto Sans KR", serif;
  line-height: 26px;
  font-weight: 500;
}
.main-history .used-mileage.plus {
  color: #ff5393;
}

/* ############################## Header ############################## */
.header {
  width: 100%;
  max-width: 480px;
  height: 60px;
  line-height: 1.3;
  padding: 0 10px;
  font-size: 20px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.container.bg .header {
  justify-content: flex-end;
}

.header.active {
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

/* ##### HeaderIcon ##### */
.header-icon {
  height: 36px;
  width: 36px;
  margin-left: 10px;
}
.angle-left {
  display: none;
}

/* ##### HeaderIcon :: Logout시 노출되는 부분 ##### */
.header-user {
  display: none;
}
.header-user a {
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: right;
  float: right;
}
.header-user.disabled a {
  color: #999999;
}
.header-user.disabled img.user {
  filter: invert(61%) sepia(26%) saturate(9%) hue-rotate(314deg) brightness(95%)
  contrast(92%);
}
.header-icon.user {
  height: 26px;
  width: 26px;
}

/*  ############### Header Gnb ############### */
.gnb {
  background-color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  top: 0px;
  right: -100%;
  /* padding-bottom:40px; */
  z-index: 9999;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.gnb.gnb-open {
  right: 0;
  height: 100%;
}
.gnb .gnb-body {
  height: calc(100% - 60px);
  /* height:100%; */
  overflow-y: auto;
}
.gnb .gnb-body .buttons {
  height: 60px;
  margin-bottom: 100px;
}

.gnb .logo {
  height: 40px;
  /* width: 100px; */
  margin: 10px 0 10px 20px;
  position: absolute;
  top: 0;
  left: 0;
}
.gnb > div > div {
  width: 90%;
  margin: 0 auto;
}
.gnb-section-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
}
.gnb .gnb-section-1 {
  width: 100%;
  background-color: #ff5393;
  color: #fff;
  height: 70px;
  padding: 20px;
}
.gnb-section-1 .my-mileage {
  float: right;
  color: #fff;
}
.gnb-section-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #000;
  padding-bottom: 40px;
}
.gnb-section-2 a {
  font-size: 10px;
  margin-top: 30px;
  text-align: center;
  line-height: 18px;
  letter-spacing: -0.09;
  /* border: 1px solid #000; */
}
.gnb-section-2 a img {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto 8px auto;
}
.gnb-section-3 {
  margin: 30px auto !important;
}
.gnb-section-3 a {
  margin: 0 auto;
  display: block;
  font-size: 18px;
  line-height: 58px;
  border-bottom: 1px solid #eeeeee;
}
.gnb-section-3 a:after {
  content: "\e93e";
  font-family: xeicon;
  float: right;
  font-weight: bold;
}
.gnb-footer {
  width: 100% !important;
  padding: 20px 0 25px;
  background: #fafafa;
}
.gnb-footer .inner {
  width: 90%;
  margin: 0 auto;
}
.gnb-footer p {
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.gnb-footer > div {
  font-size: 12px;
  color: #767676;
  line-height: 20px;
  letter-spacing: normal;
}

/* ############################################  Splash  ############################################ */
section.splash {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ############################################  Signin  ############################################ */
.signin-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 60px);
}
.signin-welcome {
  margin-top: 10px !important;
  height: 130px;
}
.signin-inputbox {
  min-height: 210px;
}
.signin-inputbox input::placeholder {
  font-size: 18px;
}
.signin-inputbox a {
  text-decoration: underline;
}
.signin-input-check {
  line-height: 30px;
}
.signin-inputbox .signin-input-check .checkbox-group {
  float: left;
  display: none;
}
.signin-inputbox .signin-input-check .checkbox-group label[for="checklogin"] {
  display: flex;
}
.signin-inputbox .signin-input-check a {
  /* float:right; */
  float: left;
}

/* App일경우 자동로그인 추가  */
.signin-inputbox .signin-input-check.app .checkbox-group {
  display: block;
  float: left;
}
.signin-inputbox .signin-input-check.app a {
  float: right;
}

.signin-input {
  background-color: #fff;
  border-radius: 10px;
  margin: 25px 0;
}
.signin-input .input-group:first-child {
  margin-bottom: 0;
}
.signin-input .input-group input {
  font-size: 18px;
  margin: 20px;
}
.signin-input .btn-reset {
  width: 40px;
  height: 30px;
  border-radius: 50%;
  margin: 0 20px;
  background-color: #d8d8d8;
  display: none;
  padding: 0;
}
.sign-id {
  align-items: center;
}
.signin-btn {
  margin-bottom: 30px;
}
.signin-btn .btn-large {
  margin: 5px 0;
}

/* ############################################  Find  ############################################ */
.captcha-box {
  border: 1px solid #eeeeee;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #767676;
  align-items: center;
}
.captcha-box .captcha-img {
  width: 55%;
  text-align: center;
  border-right: 1px solid #eeeeee;
}

.captch-btn {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
}
.captch-btn div {
  width: 100%;
  height: 50px;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.captch-btn div:first-child {
  border-bottom: 1px solid #eeeeee;
}
.input-group-captcha {
  margin-top: 15px;
}
.section-find {
  height: calc(100% - 60px);
}
.section-find .tabs .tab {
  height: calc(100% - 150px);
}
.section-find .btns {
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.find-body .input-group {
  line-height: 40px;
}
.find-info {
  display: none;
  height: 100%;
  /* display:flex; */
  flex-direction: column;
  justify-content: space-between;
}
.find-info span {
  font-size: 20px;
}
.find-info .info-col {
  /* display:none; */
}
.find-info .btns .btn-large {
  margin: 5px 0;
}
.find-info .btn-signup {
  display: none;
}
.find-desc {
  font-size: 12px;
  color: #999999;
}
.find-id,
.find-pw {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
/* ############################################  Reset Password  ############################################ */
.section-reset-password {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.reset-password {
  padding-top: 20px;
}
.section-reset-password .btns {
  padding-bottom: 20px;
}
.section-reset-password .btns .btn-large {
  margin: 10px 0;
}

/* ############################################  Main  ############################################ */
.my-info,
.mileage,
.change-giftcard {
  margin-top: 25px !important;
}
.membershipdcard,
.giftcard,
.main-guide,
.banner {
  margin-top: 30px !important;
}

/* ##### Main Section: Welcome ##### */
.welcome {
  margin: 7px 0;
}
.welcome.all {
  display: none;
  margin-top: 10px;
  margin-bottom: 40px;
}
.welcome h2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.17em;
  letter-spacing: -1px;
  font-weight: 500;
}
.welcome.user h2 {
  font-weight: bold;
  margin-top: 5px;
}
.welcome span {
  line-height: 1.5;
  letter-spacing: -0.73px;
}
.welcome u.name {
  text-decoration: none;
  background: linear-gradient(
          to Top,
          #fff 10%,
          #ff5393 10% 40%,
          transparent 40%
  );
}
.welcome.user .grade {
  font-size: 0.8em;
  border: 1px solid #000;
  height: 20px;
  border-radius: 8px;
  line-height: 20px;
  padding: 0 10px;
  font-weight: bold;
}

/*  ##### Main Section: MyInfo ##### */
.my-info > div,
.mileage > div,
.change-giftcard > div {
  margin: 23px;
}

.my-info {
  border-radius: 8px;
  color: #000;
}
.my-info div {
  overflow: hidden;
}
.my-info .title {
  float: left;
  line-height: 26px;
}
.my-info .barcode-btn {
  float: right;
  height: 33px;
  width: 75px;
  vertical-align: bottom;
  cursor: pointer;
  transition: 0.5s;
  padding: 5px;
}
.my-info .barcode-btn:hover {
  transform: scale(1.1);
}
.my-info .my-mileage {
  font-family: "Gotham", "Noto Sans KR", serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -1.33px;
  color: #ff5393;
  margin-top: 8px;
}

/*  ##### Main Section: Mileage ##### */
.mileage,
.change-giftcard {
  padding-top: 3px;
  padding-bottom: 3px;
}
.mileage .btn-small,
.change-giftcard .btn-small {
  border-radius: 8px;
}
.mileage > div {
  overflow: hidden;
  line-height: 38px;
}
.mileage .btn {
  background-color: #635c55;
  color: #fff;
}
ul.main-history {
  margin-top: 0;
  position: relative;
}
ul.main-history::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 4px;
  bottom: 24px;
  border-left: 2px dashed #fff;
}
ul.main-history li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 21px;
  width: 6px;
  height: 6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #484038;
  z-index: 100;
}
.main-history li {
  width: 100%;
  height: 48px;
  line-height: 22px;
  margin-bottom: 14px;
  position: relative;
}
.main-history li > div {
  float: left;
  margin-left: 25px;
}
.main-history .date {
  font-size: 12px;
  color: #c7c2bc;
  font-weight: normal;
}
.main-history .used-mileage {
  float: right;
  line-height: 48px;
}
.no-history {
  padding: 20px;
  border: 2px dashed #635c55;
  text-align: center;
  margin-top: 30px;
  border-radius: 14px;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: #cdcac6;
  display: none;
}

/*  ##### Main Section: ChangeGiftcard ##### */
.change-giftcard {
  height: 160px;
  background-color: #ff5393;
}
.change-giftcard > div:first-child {
  height: 50px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.change-giftcard .btn {
  background-color: #fbfbfb;
}
.change-giftcard .my-mileage {
  float: right;
  color: #fff;
}

/*  ##### Main Section: MembershipCard, Giftcard ##### */
.manage-card {
  border-top: 1px solid #eee;
}
.manage-card .title {
  margin: 40px 0 33px 0;
  width: 100%;
  line-height: 35px;
  font-weight: bold;
  letter-spacing: -1.11px;
  position: relative;
}
.manage-card.giftcard .card-info {
  width: calc(100% - 165px);
}
.manage-card i {
  float: right;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}
.card-list.disabled {
  display: none;
}
.card-list .card-item {
  display: inline-flex;
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  position: relative;
}
.card-list .card-item .card-image {
  width: 50px;
  height: 75px;
}
.manage-card .card-list .card-item {
  animation: rtl 0.5s linear both;
}
.manage-card .card-list .card-item .barcode-btn {
  float: right;
  height: 33px;
  width: 75px;
  vertical-align: bottom;
  cursor: pointer;
  transition: 0.5s;
  padding: 5px;
}
.card-list li:last-child {
  margin-bottom: 0;
}
.card-info {
  float: left;
  margin-left: 24px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  width: calc(100% - 50px);
}
.card-info div span {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  vertical-align: middle;
  color: #000;
  display: inline;
}
.card-info .card-number {
  font-size: 1em;
}
.card-info div:nth-child(2) {
}
.card-info div:nth-child(2) span {
  color: #999;
  font-size: 0.8em;
}
.card-info .card-number,
.card-info .card-mileage {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  margin-top: 5px;
}
.card-info .card-mileage {
  font-size: 20px;
  letter-spacing: -1.19px;
}
.no-card {
  border: 2px dashed #eee;
  border-radius: 14px;
  height: 150px;
  align-items: center;
  justify-content: center;
  color: #999;
  display: none;
}
.no-card.active {
  display: flex;
}
/*  ##### Main Section: Banner ##### */
.banner {
  /* margin-top: 60px; */
  overflow: hidden;
  height:350px;
}
.banner-slider img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  height: 300px;
}
.banner .slick-list {
  border-radius: 14px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.banner .slick-list .slick-slide {
  position: relative;
}
.banner .slick-list .slick-slide p {
  position: absolute;
  width: 100%;
  text-align: left;
  color: #fff;
  padding-left: 10px;
}
.banner .slick-list .slick-slide .title {
  bottom: 80px;
}
.banner .slick-list .slick-slide .desc {
  top: 230px;
  font-size: 12px;
}
.banner-slider .slick-dots {
  bottom: -40px;
}
.banner-slider .slick-dots li {
  margin: 0;
}
.banner-slider .slick-dots li button:before {
  font-size: 12px;
}

/*  ##### Main Section: Guide ##### */
.main-guide {
  height: 250px;
  background-color: #fff;
  padding: 20px 5px 20px 15px;
  position: relative;
  margin-bottom: 30px !important;
}
.main-guide a {
  margin: 0 auto;
  display: block;
  font-size: 18px;
  display: flex;
  align-items: center;
  height: 25%;
}
.main-guide a img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.main-guide a::after {
  content: "\e93e";
  font-family: xeicon;
  font-size: 20px;
  font-weight: bold;
  float: right;
  position: absolute;
  right: 15px;
}

/*  ##### Main Section: fixed button ##### */
.main-fixed-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  height: 60px;
}
.main-fixed-btn a {
  position: relative;
  flex: 1;
  display: block;
  height: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 60px;
  background-color: #484038;
}
.main-fixed-btn a:first-child:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background-color: #80756b;
  transform: translateY(-50%);
}

/* ############################################  Mileage  ############################################ */
.mile-info {
  margin-top: 20px;
  margin-bottom: 30px !important;
  height: 70px;
}
.mile-info div {
  display: flex;
  align-items: center;
}
.mile-info .title {
  width: 100%;
  float: left;
  font-size: 16px;
  font-weight: normal;
  display: flex;
  align-items: center;
}
.mile-info .title .xi-help-o {
  font-size: 23px;
  padding-left: 5px;
  position: relative;
  cursor: pointer;
}
.mile-info .mileage-desc:after,
.mile-info .mileage-desc:before {
  bottom: 100%;
  left: 24%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.mile-info .mileage-desc:before {
  /* border-color: rgba(194, 225, 245, 0); */
  border-bottom-color: #333;
  border-width: 11px;
  margin-left: -11px;
}

.mile-info .mileage-desc:after {
  /* border-color:  rgba(194, 225, 245, 0); */
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.mile-info .mileage-desc {
  background-color: #fff;
  position: absolute;
  padding: 5px 15px;
  font-size: 12px;
  left: -50px;
  top: 30px;
  width: 280px;
  border: 1px solid #000;
  border-radius: 15px;
  display: none;
  /* display:block; */
}
.mile-info .mileage-desc li {
  line-height: 1.5em;
  height: 45px;
}
.mile-info .mileage-desc li:nth-child(3),
.mile-info .mileage-desc li:nth-child(4) {
  height: 65px;
}
.mile-info .title em {
  font-family: "Gotham", "Noto Sans KR", serif;
  font-style: normal;
  letter-spacing: -1px;
}
.mile-info .btn-small {
  letter-spacing: -1px;
  padding: 0 15px;
  width: 150px;
  text-align: center;
}
.mile-info .my-mileage {
  float: left;
  font-size: 34px;
  letter-spacing: -2.48px;
  line-height: 40px;
  color: #ff5393;
}
.mile-info-detail {
  background-color: #3c3022;
  color: #fff;
  height: 110px;
  overflow: hidden;
}
.mile-info-detail > div {
  margin: 20px;
  line-height: 35px;
}
.mile-info-detail > div > div {
  border-right: solid 1px rgba(255, 255, 255, 0.2);
}
.mile-info-detail > div > div:last-child {
  border: none;
}
.mile-info-detail .btn-expire {
  color: #fff;
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
}
.mile-info-detail .mile {
  font-family: "Gotham", "Noto Sans KR", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.78px;
}

.select-date-range {
  border: none;
  font-size: 16px;
  padding-right: 5px;
}

/* ##### History ##### */
.history {
  min-height: calc(100% - 240px);
}
.history .tabs {
  min-height: calc(100% - 90px);
}
.history-none {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.history-ul {
  margin-top: 20px;
}
.history-li .type {
  display: inline-block;
  margin-right: 14px;
  width: 60px;
  height: 52px;
  line-height: 52px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
}
/* history 적립/사용/예정 */
.type.saveup {
  background-image: url("images/mileage-saveup.png");
}
.type.used {
  background-image: url("images/mileage-used.png");
}
.type.expire {
  background-image: url("images/mileage-expire.png");
}
.type.change {
  background-image: url("images/mileage-change.png");
  color: #ff5393;
}
.history-li .plus {
  color: #ff5393;
}
.history-li .minus {
  color: #999999;
}

.history-li {
  height: 52px;
  margin-bottom: 32px;
}
.history-li div {
  float: left;
}
.history-li .date {
  font-family: "Gotham", "Noto Sans KR", serif;
  letter-spacing: normal;
  font-size: 12px;
  color: #999;
}
.history-li .used-mileage {
  float: right;
  font-family: "Gotham", "Noto Sans KR", serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

/* ############################################  ChangeGiftcard  ############################################ */
.select-giftcard span {
  color: #555555;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.88px;
}
.giftcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: stretch;
  margin-top: 15px;
}
.giftcards .card {
  min-width: 100px;
  height: 45px;
  line-height: 50px;
  background-color: #ddd;
  border-radius: 23px;
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.7px;
  text-align: center;
  margin: 0 15px 15px 0;
  color: #fff;
}
.giftcards .card.active {
  border-radius: 23px;
  background-color: #ff5393;
}
.selected-card {
  margin: 15px 0;
}
.selected-card .amount {
  border: 0;
  font-size: 18px;
  height: 56px;
}
.selected-card .amount.active {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: -0.2px;
  text-align: right;
  padding-right: 10px;
}
.selected-card .unit {
  text-align: right;
  color: #000;
}
.change-giftcard-desc {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.88px;
  color: #999999;
  margin-bottom: 30px;
}

/* ############################################
Giving Mileage
############################################ */

.select-givingmileage span {
  color: #555555;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.88px;
}
.giftcards .cardspan strong {
  font-weight: 400;
  color: red;
}

.select-givingmileage .giftcards .card {
  line-height: 55px;
}

.select-givingmileage .disabled {
  background-color: #e9e9e9;
}

.select-givingmileage .input-group-num.disabled .num {
  background-color: #e9e9e9;
  color: #bdbcbc;
}

.select-givingmileage button.pink {
  color: #fff;
}
.select-givingmileage button {
  background-color: #e9e9e9;
}

.select-givingmileage .tab1 > span {
  line-height: 1.5em;
}

.giving-li {
  width: 100%;
  height: 52px;
  margin-bottom: 10px;
  position: relative;
}
.giving-li .date {
  font-family: "Gotham", "Noto Sans KR", serif;
  letter-spacing: normal;
  font-size: 12px;
  color: #999;
}
.giving-li .used-mileage {
  font-family: "Gotham", "Noto Sans KR", serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  margin-top: 5px;
}
.giving-li button {
  height: 25px;
  line-height: 25px;
}
.giving-li {
  width: 100%;
}
.giving-li > div:fitst-child {
  float: left;
}
.giving-li > div:last-child {
  width: 40vw;
  position: absolute;
  top: 0;
  right: 0;
}
.giving-li > div:last-child span {
  float: right;
  padding-right: 80px;
}
.giving-li button {
  position: absolute;
  right: 0;
  top: 0;
}
/* .giving-li button {margin-left:7px;} */
/* .giving-li button {float:right;}
.giving-li > div {width:75%} */
.giving-li .plus {
  color: #ff5393;
}
.giving-li .minus {
  color: #999999;
}
.giving-li .expire {
  color: #d3d3d3 !important;
}

.section-givingmileage-complete .mileage {
  font-family: Gotham, "Noto Sans KR", serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  margin-top: 5px;
}
.section-givingmileage-complete {
  height: 100%;
  position: relative;
}

.section-givingmileage-complete button {
  position: absolute;
  margin: 0;
  bottom: 40px;
}

.section-givingmileage-certification .cert-num,
.section-membership-certificaiton .cert-num {
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  color: #3c3022 !important;
}

/* ############################################  Membershipcard, Giftcard  ############################################ */
.section-mcard,
.section-gcard {
  position: relative;
  height: 100%;
}
.section-mcard .title,
.section-gcard .title {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul.card-list {
  margin: 20px 0;
  display: block;
  min-height: calc(100% - 210px);
}
.section-gcard ul.card-list {
  min-height: calc(100% - 235px);
}
.card-list .card-item {
  height: 72px;
}
.section-mcard .barcode-btn,
.section-gcard .barcode-btn {
  height: 23px;
  position: absolute;
  transition: 0.5s;
  top: 0;
  right: 0;
}
.section-mcard .buttons,
.section-gcard .buttons {
  padding: 15px 0;
  margin: 5px 0;
}
.buttons .info {
  display: none;
}
.section-mcard.manage-mode .btn-addcard,
.section-gcard.manage-mode .btn-addcard,
.section-gcard.manage-mode .card-guide,
.btn-set-maincard,
.btn-mileage-combine,
.btn-card-delete {
  display: none;
}
.section-mcard .info strong {
  color: #000;
}
.section-mcard .info {
  margin-top: 20px;
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #999999;
}

/* ### Membershipcard, Giftcard :: ManageMode ### */
.section-mcard .checkbox-group,
.section-mcard.manage-mode .barcode-btn,
.section-gcard .checkbox-group,
.section-gcard.manage-mode .barcode-btn {
  display: none;
}
.section-gcard.manage-mode .card-list .card-item,
.section-mcard.manage-mode .card-list .card-item {
  height: 100px;
  padding: 10px;
  /* border: 3px solid #ff5393; */
}
.section-gcard.manage-mode .card-list .card-item.active {
  border: 3px solid #ff5393;
}
.section-gcard.manage-mode .card-list .card-item.active .xi-check {
  background-color: #ff5393;
}

.section-mcard.manage-mode .checkbox-group,
.section-gcard.manage-mode .checkbox-group {
  display: block;
  margin: 0;
}
.section-mcard.manage-mode .xi-check,
.section-gcard.manage-mode .xi-check {
  position: absolute;
  top: 10px;
  right: 5px;
}
section.manage-mode .btn-set-maincard,
section.manage-mode .btn-mileage-combine,
section.manage-mode .btn-card-combine {
  display: block;
}
.section-gcard input[type="radio"] + label .xi-check {
  height: 30px;
  width: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #e4e4e4;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  margin-right: 8px;
}
.section-gcard input[type="radio"]:checked ~ label .xi-check.pink {
  background-color: #ff5393;
}

/* ############################################  Giftcard  ############################################ */

/* ##### Giftcard Section :: WelcomeGiftcard ##### */
.welcome-giftcard {
  position: relative;
}
.welcome-text {
  background-color: #f04082;
  height: 140px;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
  color: #fff;
  width: 100%;
}
.welcome-contents {
  position: relative;
  text-align: center;
  padding-top: 60px;
}
.welcome-contents img,
.giftcard-mile-info .cardimg {
  width: 124px;
  height: 79px;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}
.giftcard-hedaer.digital {
  background-color: #f04082;
}
.giftcard-hedaer.fashion {
  background-color: #1065a5;
}
.giftcard-mile-info .cardimg {
  border-radius: 5px;
}
.giftcard-mile-info .cardimg.digital {
  background: url("images/card_digital.png") no-repeat center center/contain;
}
.giftcard-mile-info .cardimg.fashion {
  background: url("images/card_fashion.png") no-repeat center center/contain;
}
.welcome-giftcard h2 {
  margin-bottom: 0;
  font-size: 20px;
}
.welcome-contents span {
  font-size: 14px;
  color: #999999;
}
.welcome-contents p {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.68px;
  color: #555555;
  margin-top: 10px;
}
.welcome-giftcard .btns {
  width: 100%;
  overflow: hidden;
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
.welcome-giftcard .btns a {
  width: 150px;
  margin: 0 5px;
  text-align: center;
}
.welcome-giftcard .info {
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.75px;
  color: #999999;
}
.card-guide {
  float: right;
  margin-bottom: 10px;
}
.card-guide a {
  color: #999999;
  text-decoration: underline;
}

/* ############################################  GiftcardDetail  ############################################ */
.giftcard-hedaer {
  background-color: #f04082;
  width: 100% !important;
  height: 80px;
}
.giftcard-mile-info {
  position: relative;
  padding-top: 60px;
}
.giftcard-card-info .card-info {
  margin: 10px 0;
  width: 100%;
}
.giftcard-card-info .card-info div {
  font-size: 16px;
}
.giftcard-card-info .my-mileage {
  font-size: 28px;
  margin-bottom: 20px;
  display: block;
}
.giftcard-card-info .btn-small {
  position: absolute;
  top: 60px;
  right: 0;
  float: right;
}
.mile-avail,
.mile-wait {
  height: 30px;
  line-height: 30px;
  color: #333;
}
.giftcard-card-info .mile {
  float: right;
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  line-height: 30px;
  color: #333333;
}
.history-giftcard .tab-btn {
  display: flex;
  width: 100%;
}
.history-giftcard .tab-btn label[for="tab2"] {
  width: 100%;
  padding-left: 10px;
  text-align: left;
}

/* ############################################  ParkingInfo  ############################################ */
.section-info {
  margin-bottom: 30px !important;
}
.info-text {
  margin-top: 10px;
  line-height: 26px;
  letter-spacing: -1.11px;
}
.info-text h3 {
  font-size: 20px;
}
.info-table {
  margin-top: 30px;
}
.info-table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #000;
  font-size: 13px;
  text-align: center;
}
.info-table table tr {
  border-bottom: 2px solid #eeeeee;
}
.info-table table tr:last-child {
  border-bottom: 2px solid #000;
}
.info-table table th {
  vertical-align: top;
  padding: 20px 0;
  width: 65px;
}

.info-table.t2 table th {
  width: 90px;
}
.info-table.t2 table td {
  text-align: left;
}

.info-table table td {
  color: #555555;
  border-left: 1px solid #eeeeee;
  padding: 10px;
}

.info-desc {
  font-size: 13px;
  line-height: 21px;
  letter-spacing: -0.75px;
  color: #999999;
  margin-bottom: 30px;
  margin-top: 10px;
}

ul.info-desc {
  list-style: circle;
  margin-left: 15px;
  color: #999999;
}

/* ############################################  MileageInfo  ############################################ */
.mileage-info ul,
.mileage-info .star-desc {
  position: relative;
}

.mileage-info ul > li:before {
  content: "- ";
  position: absolute;
  margin-left: -20px;
}
.mileage-info ul > li {
  margin-left: 20px;
}

.star-desc:before {
  content: "* ";
  position: absolute;
  margin-left: -20px;
}
.star-desc.pink:before {
  content: "* ";
  color: #ff5393;
}
.star-desc {
  margin-left: 20px;
}

/* ############################################  Notice  ############################################ */
.notice-list {
  margin-bottom: 40px;
}
.notice-list li {
  position: relative;
  width: 100%;
  padding-top: 10px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.notice-list li::after {
  content: "\e93e";
  font-family: xeicon;
  float: right;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.notice-list li span {
  line-height: 30px;
  width: 100%;
}
.notice-list .subject {
  position: relative;
  width:90%;
}
.notice-list .subject.new::after {
  content: "";
  background-color: #ff0000;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 5px;
  margin-left: 3px;
  border-radius: 50%;
}
.notice-list .date {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 12px;
  color: #999;
}
.btn-more {
  float: none;
  display: block;
  margin: 0 auto;
  width: 100px;
  line-height: 38px;
  text-align: center;
}

/* ############################################  SignUp  ############################################ */
.section-agree {
  height: 100%;
  position: relative;
}
.section-agree p {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.55px;
  color: #999999;
  margin: 20px 0;
}
.section-agree hr {
  border: 0;
  border-bottom: 1px solid #eeeeee;
}
.section-agree .checkbox-group {
  margin-top: 20px;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  letter-spacing: -0.73px;
}
.section-agree .xi-angle-right {
  float: right;
  font-weight: bold;
  font-size: 20px;
  line-height: 35px;
}
.section-agree button {
  position: absolute;
  margin: 0;
  bottom: 50px;
}
.section-signup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.section-signup.input,
.section-signup.signup1,
.section-signup.mypage {
  display: block;
}

.section-signup .title {
  margin: 10px 0 !important;
}
.section-signup input,
.section-signup select {
  border: 0;
}
.offline-signup .input-group,
.section-signup .input-group {
  line-height: 40px;
}
.section-signup .btn-large {
  margin-top: 15px;
}
.section-signup label,
.offline-signup label {
  display: flex;
  align-items: center;
}
.signup-desc {
  font-size: 12px;
  color: #999;
}
.section-complete h2 {
  font-size: 20px;
}
.section-complete {
  height: 100%;
  position: relative;
}
.section-complete p {
  color: #333333;
}
.section-complete button {
  position: absolute;
  margin: 0;
  bottom: 40px;
}

.offline-signup {
  margin-top: 40px !important;
}
.section-signup hr {
  background-color: #e9e9e9;
  height: 2px;
  border: none;
}

.conList {
  font-size: 14px;
  color: #999;
  padding-inline-start: 10px;
}
.subList {
  padding-inline-start: 20px;
}
.agree-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  /* border: 1px solid #ebebeb; */
}
.agree-table th {
  font-weight: bold;
}
.agree-table th,
.agree-table td {
  border: 1px solid #ebebeb;
  color: #999;
  padding: 3px 10px 3px 10px;
}

.section-signup .popup-btns {
  margin: 30px 0;
}
.btn-withdraw {
  margin-top: 30px;
  text-align: right;
}
.btn-withdraw a {
  font-size: 16px;
  color: #999999;
  text-decoration: underline;
}

/* ############################################  Setting  ############################################ */
.form-setting {
  padding: 20px 0;
  border-bottom: 1px solid #f3f3f3;
}
.section-setting .input-group {
  justify-content: space-between;
  border-bottom: 0;
}
.section-setting h4 {
  margin-top: 30px;
}
.section-setting span {
  font-size: 18px;
}
.setting-desc,
.version {
  color: #999999;
}
.setting-desc {
  font-size: 14px;
}
/* .form-setting.setting-on .setting-desc {
  display:none;
} */

/* ############################################  Terms  ############################################ */

article {
  border: 1px solid #ebebeb;
  padding: 10px;
  height: calc(100% - 40px);
  overflow: auto;
  overflow-x: hidden;
  margin: 15px;
  font-size: 14px;
}
article h1 {
  font-weight: bold;
  color: #333;
  padding: 40px 0 10px 0;
  font-size: 18px;
}
article h2 {
  font-size: 16px;
  padding: 20px 0 10px;
}
article h3 {
  font-size: 14px;
  padding: 10px 0 2px;
}
article h1.fir,
article h2.fir {
  padding-top: 0;
}
/* article h1.fir, article h2.fir {.section-membership-certificaiton .form-group>div
  padding-top: 0;
} */
article ol li {
  font-size: 14px;
}

.articel-privacy table.trust {
  border: 1px solid #ebebeb;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
}
.articel-privacy table.trust th {
  padding: 7px;
  border: 1px solid #ebebeb;
  color: #000;
}
.articel-privacy table.trust td {
  padding: 5px;
  border: 1px solid #ebebeb;
  color: #999;
}

/* ############################################  Membership ############################################ */
.section-membership-certificaiton .cert-num {
  margin-top: 50px;
}
.section-membership-certificaiton .form-label {
  width: 120px;
  line-height: 40px;
  margin-top: 0;
}
.section-membership-certificaiton .form-group > div {
  display: flex;
  border-bottom: 1px solid #aaaaaa;
}
.section-membership-certificaiton .form-group .input-group-info {
  display: inline-block;
  width: unset;
  margin-bottom: 0;
  border-bottom: 0;
}
.section-membership-certificaiton .form-group .input-group-info input {
  text-align: left;
  font-size: 16px;
}
.section-membership-certificaiton .form-wrap > div {
  width: 100%;
}
.section-membership-certificaiton ul {
  list-style: disc;
  margin-left: 20px;
  font-size: 12px;
  color: #393939;
}

.section-membership-status input[type="radio"] + label {
  align-items: center;
  display: flex;
}
.section-membership-status input[type="radio"]:checked ~ label .xi-check.black {
  background-color: #000;
}
.section-membership-status input[type="radio"] + label .xi-check {
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 5px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #e4e4e4;
}
.section-membership-status label > div {
  display: inline-block;
}
.section-membership-status .btn-radio {
  width: 100%;
}
.section-membership-status .btn-radio .desc,
.section-membership-status .desc {
  font-size: 14px;
}
.section-membership-status .title > strong {
  color: red;
}

.section-membership-status {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 20px);
}
.section-membership-status .btns .btn-large {
  margin: 0;
  margin-bottom: 10px;
}

/* ############################################  Withdraw ############################################ */
.section-withdraw .withdraw-desc {
  white-space: pre-wrap;
  font-size: 0.8em;
  border: 1px solid #999999;
  padding: 0px 15px;
}
.section-withdraw .title {
  margin-top: 10px;
}
.section-withdraw .title strong {
  background: linear-gradient(
          to Top,
          #fff 10%,
          #ff5393 10% 40%,
          transparent 40%
  );
}
/* .section-withdraw .withdraw-desc{display:none;} */
.section-withdraw label {
  color: #000;
}
.section-withdraw .checkbox-group {
  margin-top: 10px;
}
.section-withdraw .checkbox-group label {
  display: flex;
  align-items: center;
}
.section-withdraw .checkbox-group label div {
  font-size: 0.8em;
  color: #999999;
  line-height: 20px;
}

.section-withdraw hr {
  border: 0;
  border-top: 1px solid #5c5c5c;
  margin-top: 20px;
}
.withdraw-userinfo {
  margin-top: 30px;
}
.withdraw-userinfo dt > div:first-child {
  font-weight: bold;
}
.withdraw-userinfo dt > div:last-child {
  margin-bottom: 10px;
  color: #767676;
}
.withdraw-userinfo .dcard-list {
  margin-top: 0;
}
.withdraw-userinfo .dcard-list li {
  display: flex;
}
.withdraw-userinfo .dcard-list li div:last-child {
  width: 90px;
  text-align: right;
}
.section-withdraw .form-wrap > div {
  width: 100%;
}
.withdraw-btns {
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
}
.withdraw-btns button {
  margin: 5px 0;
}

.section-withdraw-complete {
  height: calc(100% - 60px);
  position: relative;
}
.section-withdraw-complete button {
  position: absolute;
  margin: 0;
  bottom: 30px;
  width: 100%;
}
.section-withdraw-complete .title {
  margin-top: 50px;
}
.withdraw-complete-header {
  height: 60px;
}
.withdraw-complete-header img {
  margin: 10px 0 10px 20px;
  height: 40px;
}

/* ############################################  비밀번호확인, 비밀번호수정 ############################################ */

.section-password-confirm,
.section-change-password {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.section-password-confirm .section-btns {
  margin: 50px 0 20px 0;
  display: flex;
  justify-content: space-between;
}

.section-error {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  height: 400px;
  margin-top: 100px !important;
}
.section-error .title {
  font-size: 23px;
}
.section-error img {
  width: 30%;
}
.section-error p {
  line-height: 30px;
}
.section-error hr {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #000;
}
.section-error .date {
  font-size: 0.9em;
  color: #aaaaaa;
}

/* ############################################  룰렛 이벤트 ############################################ */

.section-roulette {
  /*height:100%;*/
  width: 100% !important;
  background: #f2f3f2;
  width: 83.889vw;
  background: url("images/roulette_bg.jpg");
  background-position: center;
  background-size: 100% 100%;
  padding-bottom: 30px;
  overflow-x: hidden;
}
/* ® {height:calc(100% - 120px);} */

.section-roulette .tit {
  color: #000;
  text-align: center;
}
.section-roulette .tit img {
  width: 65%;
}
.section-roulette .tit h2 {
  font-size: 8.333vw;
  font-weight: lighter;
  margin: 0;
}
.section-roulette .tit p {
  font-size: 140%;
}

.section-roulette .seciton-btns {
  margin-top: 30px;
}

.w1200 {
  width: 100%;
  margin: 0 auto;
  padding: 10vw 0 0;
  text-align: center;
}
.roulette_wrap .tit {
  margin: 0 0 20px;
}
.roulette_wrap .tit h2 {
  font-size: 34px;
  color: #222;
}
.roulette_wrap .tit p {
  font-size: 20px;
  color: #222;
  margin: 5px 0 0;
}

.roulette_box {
  width: 90%;
  height: 100%;
  position: relative;
  margin: 9.444vw auto 5vw;
}
.roulette_box #roulette {
  min-width: 280px;
}
/* .roulette_box #roulette > img {width:100%; position:relative; } */
.roulette_box .roulette_img {
  position: relative;
}
.roulette_box .roulette_img img {
  width: 100%;
}
.roulette_box .shadow {
  height: 20px;
  background-color: #000;
  width: 200px;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 100px);
  margin-top: 30px;
  height: 60px;
  opacity: 0.3;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 20px black;
}

.roulette_box .roulette_txt {
  position: absolute;
  color: #000;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.roulette_box .roulette_txt > div {
  position: absolute;
  text-align: center;
  width: 34vw;
  height: 50%;
  max-width: 165px;
  pointer-events: none;
  z-index: -1;
}
.roulette_box .roulette_txt > div > img {
  width: 100%;
}

/* .roulette_box .roulette_txt div p {font-size:60%;line-height:1.2; font-weight:500;}
.roulette_box .roulette_txt div span {display:block; font-size:60%;} */

.roulette_box .roulette_txt div .mil {
  font-size: 5.556vw;
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-weight: 500;
}
.roulette_box .roulette_txt .strong {
  font-size: 4.167vw;
  font-weight: bold;
  line-height: 1em;
}

.roulette_desc {
  margin-top: 20px;
  display: inline-block;
  margin-bottom: 30px;
}
.roulette_desc > img {
  width: 40%;
  display: block;
  margin: 30px auto;
}
.roulette_desc p {
  text-align: center;
  color: #5c5b5a;
  font-size: 80%;
}

.roulette_box .niddle_bar {
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.roulette_box .niddle_bar img {
  width: 25px;
}
/* .roulette_box #start_btn {cursor:pointer; text-align:center; width:25%; height:25%; background:#282623; border:5px solid #fff; border-radius:50%; box-shadow:5px 0px 10px rgba(0,0,0,0.2); box-sizing:border-box; position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);z-index:1;}
.roulette_box #start_btn .center{width:100%; position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.roulette_box #start_btn .center p {font-size:100%; color:#fff; letter-spacing:0em; font-weight:bold; line-height:1;}
.roulette_box #start_btn .center span{font-size:18px; color:#fff; letter-spacing:-0.025em; font-weight:200;} */
.roulette_box #start_btn {
  width: 30%;
  cursor: pointer;
  margin: 0 auto;
  position: absolute;
  left: 35%;
  top: 35%;
  z-index: 99;
}
.roulette_box #start_btn img {
  width: 100%;
}

.section-roulette-notice {
  background: #1e422e;
  width: 100% !important;
}
.section-roulette-notice .roulette_notice {
  background: #1e422e;
  padding: 5% 3%;
  color: #fff;
}
.section-roulette-notice .roulette_notice h2 {
  font-size: 100%;
  font-weight: 500;
}
.section-roulette-notice .roulette_notice ul {
  font-size: 80%;
  list-style: none;
  line-height: 2;
}
.section-roulette-notice .roulette_notice ul > li {
  font-weight: lighter;
}
.section-roulette-notice .roulette_notice ul > li:before {
  content: "·";
  font-size: 2.971vw;
  font-weight: bold;
  vertical-align: middle;
  line-height: 2.971px;
  padding-right: 1.5vw;
}
.section-roulette-notice .roulette_notice ul > li.bold {
  font-weight: 500;
}
.section-roulette .section-btns button {
  width: 80%;
  height: 40px;
  margin: 0 auto;
  display: block;
  background: #b2342d;
}

.result_popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.result_popup .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.result_popup .box {
  background: #b091c4;
  border-radius: 10px;
  padding: 30px;
  box-sizing: border-box;
  text-align: center;
  width: 600px;
  height: 520px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: 2;
}
.result_popup .box .x_btn {
  position: absolute;
  right: 30px;
  top: 30px;
}
.result_popup .box > img {
  display: block;
  margin: 40px auto 20px;
}
.result_popup .box p {
  font-size: 30px;
  color: #fff;
  letter-spacing: -0.025em;
  font-weight: bold;
}

/* 룰렛 이벤트리스트  */
.section-roulette-eventlist h3 {
  border-bottom: 3px solid #000;
  line-height: 60px;
  font-weight: 500;
  font-size: 1.3em;
  margin-top: 20px;
}
.section-roulette-eventlist ul.eventlist li {
  line-height: 30px;
  margin-bottom: 18px;
}
.section-roulette-eventlist ul.eventlist .date {
  font-size: 1em;
  font-weight: lighter;
}
.section-roulette-eventlist ul.eventlist .item {
  float: right;
  font-weight: 500;
  font-size: 18px;
}
.section-roulette-eventlist ul.eventlist .item.non {
  color: #999990;
}

/* ############################################  Modal  ############################################ */

/* .modal-change-password {height:100%;} */
.modal-change-password .modal-btns {
  margin-bottom: 30px;
  margin-top: 50px;
}
.modal-change-password .modal-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal-change-password .modal-contents .modal-body {
  justify-content: start;
}

/* 휴대폰 인증 */
.modal-change-phone .input-group {
  line-height: 40px;
}

/* Main :: modalCardInfo(카드발급안내)  */
#modalCardInfo {
  position: fixed;
  width: 320px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -160px;
}
#modalCardInfo .modal-contents {
  padding-top: 10px;
}
#modalCardInfo .card-img {
  height: 130px;
  display: block;
  margin: 30px auto;
  border-radius: 10px;
}
#modalCardInfo p {
  text-align: center;
}

/* 선물하기 모달 */
.modal.modal-text {
  position: fixed;
  width: 320px;
  top: 100px;
  left: 50%;
  margin-left: -160px;
}
.modal.modal-text .btn-small {
  background-color: #d8d8d8;
  margin: 30px 0 0 10px;
}

/* Main,Membership,Giftcard Modal :: modalViewBarcode(바코드인증)  */
.modal-view-barcode .modal-tit,
.modal-view-barcode2 .modal-tit {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  font-size: 16px;
  color: #767676;
  text-align: center;
}
.barcode-img {
  width: 280px;
  height: 137px;
  padding: 10px;
}
.modal-view-barcode {
  line-height: 30px;
}
.modal-view-barcode .modal-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-view-barcode .barcode-info,
.modal-view-barcode2 .barcode-info {
  display: flex;
  justify-content: space-between;
  width: 260px;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  text-align: left;
}
.modal-view-barcode .refresh,
.modal-view-barcode2 .refresh {
  text-align: center;
}
.modal-view-barcode .refresh button,
.modal-view-barcode2 .refresh button {
  position: relative;
  height: 28px;
  padding: 0 15px 0 30px;
  border: 1px solid #333;
  border-radius: 19px;
  font-size: 14px;
  line-height: 28px;
  background: #fff;
}
.modal-view-barcode .refresh button::before,
.modal-view-barcode2 .refresh button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 13px;
  height: 13px;
  background: url(images/ico_refresh.png) no-repeat;
  background-size: 100% 100%;
  transform: translateY(-50%);
}
.modal-view-barcode .barcode-info em,
.modal-view-barcode2 .barcode-info em {
  font-style: normal;
}
.modal-view-barcode .barcode-info span,
.modal-view-barcode2 .barcode-info span {
  font-weight: 700;
  color: #ff5393;
}
.modal-view-barcode .barcode-img,
.modal-view-barcode2 .barcode-img {
  width: 280px;
  height: 137px;
  padding: 10px 10px 10px 10px;
}
.modal-view-barcode .card-number,
.modal-view-barcode2 .card-number {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  letter-spacing: 0.5px;
  word-spacing: 6px;
}
.modal-view-barcode2 .modal-contents {
  padding: 20px 0 40px;
}
.modal-view-barcode2 .modal-tit {
  top: 30px;
}
.modal-view-barcode2 .barcode-slider {
  width: 260px;
  margin: 0 auto !important;
}
.modal-view-barcode2 .slick-list,
.modal-view-barcode2 .slick-slide {
  width: 260px !important;
}
.modal-view-barcode2 .slick-slide {
  text-align: center;
}
.modal-view-barcode2 .barcode-info {
  width: 260px;
}
.modal-view-barcode2 .barcode-img {
  width: 100%;
  padding: 10px 0;
}
.modal-view-barcode2 .slick-dots {
  bottom: -25px;
}
.modal-view-barcode2 .slick-dots li {
  width: 10px;
  height: 10px;
}
.modal-view-barcode2 .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}
.modal-view-barcode2 .slick-dots li button:before {
  width: 10px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  opacity: 1;
  color: #d8d8d8;
}
.modal-view-barcode2 .slick-dots li.slick-active button:before {
  color: #ff5393;
}

/* SignupInput/Mypage Modal :: modalChangePassword(비밀번호변경모달)  */
.modal-change-password .modal-contents {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
.modal-change-password .btn-large {
  line-height: 60px;
  margin-bottom: 30px;
  /* position: absolute;
  bottom:50px; */
}

/* SignupInput/Mypage Modal :: modalZipcode(우편번호 검색)  */
.modal-zipcode .xi-search {
  font-size: 25px;
  font-weight: bold;
  line-height: 40px;
}
.modal-zipcode .modal-contents {
  height: calc(100% - 100px);
  position: relative;
}
.modal-zipcode .btn-large {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
}
.modal-agree .title {
  display: block;
  margin-bottom: 20px;
}
.modal-agree p {
  font-size: 14px;
  color: #555555;
}

/* Giftcard Modal :: modalAddCard(멤버십 카드등록, 기프트카드 등록)  */
.modal-add-card {
  height: 100%;
}
.modal-add-card .title {
  position: relative;
  margin-top: 60px;
  margin-bottom: 30px;
}
.modal-add-card .btn-small {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.modal-add-card .input-group {
  line-height: 40px;
  margin-top: 10px;
}
.modal-add-card input[type="text"],
.modal-add-card input[type="password"] {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1.5px;
}
.modal-add-card span {
  color: #999999;
  margin: 10px 0;
}
.modal-add-card .modal-contents {
  height: calc(100% - 100px);
  position: relative;
}
.modal-add-card .btn-add {
  position: absolute;
  bottom: 0;
}

/* Giftcard Modal :: modalGuideStore(사용안내), modalGuideStore(사용가능매장)  */
.modal-guide-store h3 {
  margin-bottom: 50px;
  font-size: 20px;
}
.modal-guide-store p,
.modal-guide-mileage p {
  color: #555;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.68px;
  margin-bottom: 30px;
}
.modal-guide-store .info {
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.75px;
  color: #999999;
  margin-bottom: 100px;
}
.modal-guide-store .info strong {
  color: #000;
}

/* Giftcard Modal :: modalAddGiftcardConfirm(기프트카드 등록확인) */
.modal-add-giftcard-confirm,
.modal-mileage-combine {
  height: 280px;
}
.modal-add-giftcard-confirm .modal-contents p,
.modal-mileage-combine .modal-contents p {
  padding: 30px 0 50px 0;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -2px;
  text-align: center;
  line-height: 1.2em;
}

/* Notice Modal :: modalNoticeDetail(공지사항글 상세) */
.modal-notice-view .date {
  font-family: "Gotham", sans-serif;
  font-size: 12px;
  color: #999;
  margin: 5px 0;
}
.modal-notice-view .subject {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -1.11px;
}

/* ConfirmModal :: modalConfirm(비밀번호 확인창) */
.modal-confirm {
  height: 100%;
}
.modal-confirm .modal-contents {
  height: calc(100% - 100px);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-confirm .popup-btns {
  /* position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 30px; */
  height: 60px;
  margin: 50px 0 20px 0;
}

/*이벤트 모달 */
#modalEventPopup {
  min-height: unset;
  padding: 0;
  vertical-align: middle;
  border-radius: 30px;
  width:90vw;
}

#modalEventPopup .modal-contents {
  margin: 0;
  padding: 20px;
  font-size: 95%;
  line-height: 1;
}

#modalEventPopup.modal-event-popup  .modal-contents {
  padding:0;
}

#modalEventPopup .modal-contents h2 {
  text-align: center;
}
#modalEventPopup p {
  text-align: center;
}

#modalEventPopup img {
  width: 100%;
  border-radius: 30px 30px 0 0;
}
#modalEventPopup img.logo-icon {
  width: 150px;
  display: block;
  margin: 30px auto;
}
#modalEventPopup ul {
  list-style: auto;
  line-height: 2;
  margin-bottom: 30px;
  font-size: 95%;
  margin-left: 20px;
  text-align: left;
}
/* #modalEventPopup .desc {font-size:12px;line-height:1.8;} */
#modalEventPopup .modal-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top: 1px solid #e9e9e9;
}
#modalEventPopup .modal-btns .modal-close {
  font-size: 100%;
  text-align: center;
  line-height: 4;
}
#modalEventPopup .modal-btns .modal-close:first-child {
  border-right: 1px solid #e9e9e9;
}

/* Loading */
.section-loading {
  height: 100%;
  display: flex;
  align-items: center;
}
.loader,
.loader:before,
.loader:after {
  background: #ff5393;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #ff5393;
  text-indent: -9999em;
  margin: 0 auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: "";
}
.loader:before {
  left: -2em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 2em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 3em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 4em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 3em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 4em;
  }
}

/* @Keyframes */
@keyframes ltr {
  0% {
    opacity: 0;
    transform: translateX(-150px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rtl {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1) translateY(1000px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* parking */
.parking-car-info {
  position: relative;
  padding: 25px 16px 90px;
  border: 1px solid #f0efef;
  border-radius: 14px;
  background-color: #fafafa;
  background-image: url(images/parking_carinfo2_b.png);
  background-repeat: no-repeat;
  background-position: center 22px;
  background-size: 98px 77.5px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.parking-car-info p {
  font-size: 20px;
  color: #333;
  line-height: 1.2;
}
.parking-car-info p strong {
  display: block;
}
.parking-car-info .car-number {
  margin-top: 60px;
  height: 70px;
  border-radius: 8px;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 66px;
  background: #4a4c50;
}
.parking-car-info .btn-area {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 60px;
  border-radius: 0 0 14px 14px;
  background: #fff;
}
.parking-car-info .btn-area a {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 60px;
}
.parking-car-info .btn-area a + a {
  color: #ff5393;
}
.parking-car-info .btn-area a + a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 17px;
  background: #eee;
  transform: translateY(-50%);
}
.parking-car-info .modify {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border: 0;
  background: url(images/ico_carinfo_modify.png) no-repeat;
  background-size: 100%;
}
.parking-car-info .btn-large {
  margin: 85px 0 0 0;
}
.parking-car-info.empty {
  padding-bottom: 20px;
  background-image: url(images/parking_carinfo1_b.png);
  background-position: 85% 40%;
  background-size: 109px 87px;
}
.parking-car-info + .parking-car-info {
  margin-top: 20px;
}
.parking-car-add {
  margin-top: 30px;
  text-align: center;
}
.parking-car-add button,
.parking-car-add a {
  display: inline-block;
  height: 50px;
  padding: 0 30px;
  border: 1px solid #eee;
  border-radius: 25px;
  line-height: 46px;
  background: #fff;
  vertical-align: middle;
}
.parking-car-add button span,
.parking-car-add a span {
  font-size: 14px;
  font-weight: 500;
}
.parking-car-add button span::before,
.parking-car-add a span::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  background: url(images/ico_parking_add_b.png) no-repeat;
  background-size: 100%;
  vertical-align: middle;
}
.parking-menu a {
  position: relative;
  display: flex;
  height: 70px;
  padding-left: 65px;
  border: 1px solid #eee;
  border-radius: 14px;
  font-size: 18px;
  line-height: 66px;
  background: url(images/parking_menu1_b.png) no-repeat 20px center;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.parking-menu a::after {
  content: "\e93e";
  position: absolute;
  top: 0;
  right: 20px;
  font-family: xeicon;
  font-size: 20px;
  font-weight: bold;
}
.parking-menu a + a {
  margin-top: 6px;
}
.parking-menu a:first-child {
  margin-top: 30px;
}
.parking-menu a:nth-of-type(2) {
  background-image: url(images/parking_menu2_b.png);
}
.parking-menu a:nth-of-type(3) {
  background-image: url(images/parking_menu3_b.png);
}
.parking-menu a:nth-of-type(4) {
  background-image: url(images/parking_menu4_b.png);
}
.parking-menu a:nth-of-type(5) {
  background-image: url(images/parking_menu5_b.png);
}
.parking-menu a:last-child {
  margin-bottom: 50px;
}

/* 차량조회 */
.parking-check {
  padding: 28px 20px;
  border: 1px solid #2b2c2f;
  border-radius: 14px;
  background-image: url(images/parking_check.png);
  background-repeat: no-repeat;
  background-position: 85% 30px;
  background-size: 110px 69px;
  background-color: #4a4c50;
  box-shadow: px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.parking-check p {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.parking-check p span {
  color: #ff5393;
}
.parking-check .certify {
  display: flex;
  margin-top: 40px;
  text-align: center;
  justify-content: center;
}
/* .parking-check .certify input ~ input{
  margin-left: 7px;
} */
.parking-check .certify input {
  /* width: 68px; */
  width: 100%;
  height: 84px;
  border-radius: 8px;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  line-height: 84px;
  letter-spacing: 10px;
  background-color: #fff;
}
.parking-check + .info {
  margin-top: 20px;
  font-size: 12px;
  color: #999;
}

/* 차량조회결과 */
.parking-list {
  padding-bottom: 50px;
}
.parking-list .list {
  margin-top: 20px;
  padding-bottom: 20px;
  border: 1px solid #f0efef;
  border-radius: 14px;
}
.parking-list .car-img img {
  width: 100%;
  border-radius: 14px 14px 0 0;
}
.parking-list .car-info {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  padding: 0 16px;
}
.parking-list .car-info > div {
  position: relative;
  /* flex-grow: 1; */
  width: 50%;
  text-align: center;
}
.parking-list .car-info > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #ebebeb;
}
.parking-list .car-info > div:first-child::before {
  display: none;
}
.parking-list .car-info .tit {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
}
.parking-list .car-info .time {
  font-size: 16px;
  font-weight: 500;
}
.parking-list .car-info .time span {
  display: block;
  font-size: 8px;
  font-weight: 400;
  color: #777;
}
.parking-list .car-info .num {
  margin-top: -4px;
  font-size: 22px;
  font-weight: 700;
  color: #ff5393;
}
.parking-list .car-info .loaction {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  vertical-align: middle;
}
.parking-list .car-info .loaction > img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.parking-list .car-info .loaction span {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  padding-left: 15px;
  line-height: 20px;
  vertical-align: middle;
}
.parking-list .car-info .loaction span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 11.5px;
  height: 1px;
  background: url(images/bg-parking-location.png) no-repeat;
  background-size: 100% 100%;
  transform: translateY(-50%);
}
.parking-list .buttons {
  padding: 0 16px;
}
.parking-list .buttons .btn-large {
  margin: 0;
}
.parking-list .buttons a + a {
  margin-top: 5px !important;
}

/* 주차결제 */
.parking-payment .parking-info {
  margin-top: 20px;
  padding-bottom: 20px;
  border: 1px solid #f0efef;
  border-radius: 14px;
}
.parking-payment .car-img img {
  width: 100%;
  border-radius: 14px 14px 0 0;
}
.parking-payment .car-info {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 0;
  padding: 0 16px;
}
.parking-payment .car-info > div {
  position: relative;
  width: 50%;
  text-align: center;
}
.parking-payment .car-info > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #ebebeb;
}
.parking-payment .car-info > div:first-child::before {
  display: none;
}
.parking-payment .car-info .tit {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
}
.parking-payment .car-info .time {
  font-size: 16px;
  font-weight: 500;
}
.parking-payment .car-info .time span {
  display: block;
  font-size: 8px;
  font-weight: 400;
  color: #777;
}
.parking-payment .car-info .num {
  margin-top: -4px;
  font-size: 22px;
  font-weight: 700;
  color: #ff5393;
}
.parking-payment .car-info .loaction {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  vertical-align: middle;
}
.parking-payment .car-info .loaction > img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.parking-payment .car-info .loaction span {
  display: inline-block;
  line-height: 16px;
  vertical-align: middle;
}
.parking-payment .fee-info {
  margin-top: 30px;
  padding: 20px 20px 12px 24px;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.parking-payment .fee-info .title {
  padding-left: 38px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  line-height: 32px;
  background: url(images/ico_payment_fee.png) no-repeat 0 0;
  background-size: 32px 32px;
}
.parking-payment .fee-info ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parking-payment .fee-info ul li span {
  padding: 8px 0;
  font-size: 16px;
  color: #333;
}
.parking-payment .fee-info ul li:first-child span + span {
  font-size: 20px;
  font-weight: 700;
  color: #ff5393;
}
.parking-payment .payment-detail {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #000;
}
.parking-payment .payment-detail .title {
  position: relative;
  margin-bottom: 20px;
  padding-left: 38px;
  line-height: 32px;
  background: url(images/parking_payment_detail1.png) no-repeat 0 0;
  background-size: 32px 32px;
}
.parking-payment .payment-detail.card .title {
  background-image: url(images/parking_payment_detail2.png);
}
.parking-payment .payment-detail > div {
  display: flex;
  justify-content: space-between;
}
.parking-payment .payment-detail > div span {
  font-size: 16px;
  color: #333;
  line-height: 30px;
}
.parking-payment .payment-detail > .total span {
  font-weight: 700;
}
.parking-payment .payment-detail > .total span + span {
  color: #ff5393;
}
.parking-payment .payment-detail.charge > div > span {
  font-weight: 700;
}
.parking-payment .payment-detail > .discount {
  display: block;
  margin: 10px 0 15px;
  padding: 10px 0;
  border: solid #eee;
  border-width: 1px 0;
}
.parking-payment .payment-detail > .discount > div {
  display: flex;
  justify-content: space-between;
}
.parking-payment .payment-detail > .discount > div span {
  color: #aaa;
}
.parking-payment .payment-detail > .discount > div span em {
  display: block;
  padding-left: 4px;
  font-style: normal;
}
.parking-payment .payment-detail > .discount > div span + span {
  color: #000;
}
.parking-payment .payment-detail > .discount > div:first-child span {
  padding-bottom: 5px;
  color: #333;
  font-weight: 700;
}
.parking-payment .payment-detail > .discount + .discount {
  margin-top: -10px;
  border-top: 0;
}
.parking-payment .payment-detail > .card-list {
  display: block;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px soldi #f0ede7;
  border-radius: 14px;
  background: #fafafa;
}
.parking-payment .payment-detail > .card-list div {
  display: flex;
  justify-content: space-between;
}
.parking-payment .payment-detail > .card-list div span + span {
  font-weight: 700;
}
.parking-payment .payment-detail > .card-list div:first-child span {
  font-weight: 700;
}
.parking-payment .payment-detail > .card-list div:first-child span a {
  display: inline-block;
  width: 60px;
  height: 32px;
  border: 1px solid #333;
  border-radius: 19px;
  text-align: center;
  font-weight: 500;
}
.parking-payment .payment-detail > .card-list div:first-child + div {
  margin-top: 40px;
}
.parking-payment .payment-detail > .final-list {
  display: block;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.parking-payment .payment-detail > .final-list div {
  display: flex;
  justify-content: space-between;
}
.parking-payment .payment-detail > .final-list div span {
  font-weight: 500;
  line-height: 40px;
}
.parking-payment .payment-detail > .final-list div span + span {
  font-weight: 700;
}
.parking-payment .payment-detail.final > .total span + span {
  font-size: 30px;
}
.parking-payment + .payer-info {
  margin: 55px 0 20px;
  padding: 24px 20px 30px;
  background: #484038;
}
.parking-payment + .payer-info p {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.parking-payment + .payer-info div {
  display: flex;
  justify-content: space-between;
}
.parking-payment + .payer-info div span {
  width: 30%;
  font-size: 16px;
  color: #ccc8c4;
  line-height: 40px;
}
.parking-payment + .payer-info div span input {
  width: 100%;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 40px;
  background-color: #484038;
}
.parking-payment + .payer-info div span a {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: 1px solid #ff5393;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: #ff5393;
  text-align: center;
  line-height: 18px;
}
.parking-payment + .payer-info div span + span {
  width: 70%;
  border-bottom: 1px solid #fff;
}
.parking-payment + .payer-info div:first-of-type span {
  border-color: #ff5393;
}
.parking-payment + .payer-info div:first-of-type span input {
  width: calc(100% - 44px);
}
.parking-payment .cash-receipt {
  display: flex;
  justify-content: space-between;
}
.parking-payment .cash-receipt .checkbox-group {
  width: 80%;
}
.parking-payment .cash-receipt .xi-help-o {
  position: relative;
  padding-left: 5px;
  font-size: 23px;
  cursor: pointer;
}
.parking-payment .cash-receipt .mileage-desc {
  background-color: #fff;
  position: absolute;
  padding: 5px 15px;
  font-size: 12px;
  left: -170px;
  top: 30px;
  width: 210px;
  border: 1px solid #000;
  border-radius: 15px;
  display: none;
}
/* .parking-payment .cash-receipt .mileage-desc:after,
.parking-payment .cash-receipt .mileage-desc:before {
  bottom:100%;
  left: 85%;
  border: solid transparent;
  content:"";
  height:0;
  width: 0;
  position:absolute;
  pointer-events: none;
}
.parking-payment .cash-receipt .mileage-desc:before {
  /* border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #333;
  border-width:11px;
  margin-left: -11px;
}
.parking-payment .cash-receipt .mileage-desc:after {
  /* border-color:  rgba(194, 225, 245, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
} */
.parking-payment .cash-receipt .mileage-desc li {
  height: 45px;
  line-height: 1.5em;
}
.parking-payment .info-desc {
  margin: 30px 0 0;
}
.parking-payment .btn-large {
  margin: 30px 0 30px;
  /* margin: 60px 0 30px; */
}

/* 주차결제완료, 실패 */
.parking-complete .comp-msg {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100vh - 60px - 130px - 20px);
  align-content: center;
}
.parking-complete .comp-msg > p {
  width: 100%;
  padding-top: 133px;
  font-size: 34px;
  font-weight: 500;
  text-align: center;
  background: url(images/parking_complete_b.png) no-repeat center top;
  background-size: 129px 113px;
}
.parking-complete.fail .comp-msg > p {
  background: url(images/parking-payment-fail_b.png) no-repeat center top;
  background-size: 129px 113px;
}
.parking-complete .comp-msg > p span {
  display: block;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 400;
}
.parking-complete .limit-time {
  width: 100%;
  padding: 0 18px;
  margin-top: 20px;
}
.parking-complete .limit-time p {
  height: 60px;
  border: 1px solid #eee;
  border-radius: 30px;
  font-size: 20px;
  text-align: center;
  line-height: 56px;
  background: #fff;
}
.parking-complete .limit-time p span {
  font-weight: 700;
  color: #ff5393;
}
.parking-complete .limit-time p span em {
  font-style: normal;
}
.parking-complete .btn-area {
  position: fixed;
  bottom: 20px;
  left: 5%;
  width: 90%;
  margin: 0 auto;
}
.parking-complete .btn-area .btn-large {
  margin: 0;
}
.parking-complete .btn-area .btn-large + .btn-large {
  margin-top: 10px;
}

/* 자동차번호 등록 */
.modal-parking-add .modal-tit {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.modal-parking-add .modal-contents {
  margin-top: 70px;
}
.modal-parking-add .input-area {
  padding: 30px 16px 25px;
  border: 1px solid #f0efef;
  border-radius: 14px;
  background-image: url(images/parking_add_b.png);
  background-repeat: no-repeat;
  background-position: 85% 30%;
  background-size: 133px 84px;
  background-color: #fafafa;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.modal-parking-add .input-area p {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.modal-parking-add .input-area input {
  margin-top: 70px;
  width: 100%;
  height: 60px;
  border: 2px solid #000;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.modal-parking-add .input-area input:focus,
.modal-parking-add .input-area input.act {
  border-color: #ff5393;
}
.modal-parking-add .input-area input::placeholder {
  font-size: 20px;
  font-weight: 500;
  color: #969c9d;
}
.modal-parking-add .input-area input + p {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  /* text-align: center; */
}
.modal-parking-add .input-agree {
  margin-top: 20px;
}
.modal-parking-add .input-agree .info-txt {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
.modal-parking-add .input-agree .info-txt span {
  display: block;
  color: #333;
}
.modal-parking-add .btn-rarking-add {
  margin-bottom: 0;
}
.modal-parking-add .btn-area {
  display: flex;
}
.modal-parking-add .btn-area .btn + .btn {
  margin-left: 10px;
}

/* 주차장 혼잡도 */
.parking-state {
  padding-bottom: 15px;
  background-color: #fafafa;
}
.parking-state .tit-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parking-state .tit-area p {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}
.parking-state .tit-area .refresh button {
  position: relative;
  height: 38px;
  padding: 0 15px 0 30px;
  border: 1px solid #333;
  border-radius: 19px;
  font-size: 14px;
  line-height: 38px;
  background: #fff;
}
.parking-state .tit-area .refresh button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 13px;
  height: 13px;
  background: url(images/ico_refresh.png) no-repeat;
  background-size: 100% 100%;
  transform: translateY(-50%);
}
.parking-state .parking-floor {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #f0efef;
  border-radius: 14px;
  background: #fff;
}
.parking-state .parking-floor .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parking-state .parking-floor .info > div {
  display: flex;
  align-items: center;
  width: 80%;
}
.parking-state .parking-floor .info > div + div {
  width: 20%;
  justify-content: center;
}
.parking-state .parking-floor .floor img {
  width: 46px;
  height: 46px;
}
.parking-state .parking-floor .count {
  margin: -6px 0 0 10px;
  font-size: 18px;
  color: #a0a0a0;
}
.parking-state .parking-floor .count strong {
  font-weight: 700;
  color: #333;
}
.parking-state .parking-floor .state {
  position: relative;
  padding-top: 40px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
}
.parking-state .parking-floor .state::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 40px;
  transform: translateX(-50%);
}
.parking-state .parking-floor.state1 .state::before {
  background-image: url(images/ico_parking_state1.png);
}
.parking-state .parking-floor.state2 .state::before {
  background-image: url(images/ico_parking_state2.png);
}
.parking-state .parking-floor.state3 .state::before {
  background-image: url(images/ico_parking_state3.png);
}
.parking-state .parking-floor .charge {
  padding-left: 14px;
}
.parking-state .parking-floor .charge span {
  position: relative;
  padding-left: 6px;
  font-size: 12px;
  color: #999;
}
.parking-state .parking-floor .charge span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  background: #999;
  transform: translateY(-50%);
}
.parking-state .parking-floor .charge span strong {
  margin-left: 3px;
  font-weight: 700;
  color: #333;
}
.parking-state .parking-floor .charge span em {
  margin-left: 5px;
  font-style: normal;
}
.parking-state .parking-floor .charge span + span {
  margin-left: 25px;
}
.parking-state .model-example {
  margin-top: 20px;
  padding: 30px 20px 20px;
  border: 1px solid #f0efef;
  border-radius: 14px;
  background: #fff;
}
.parking-state .model-example > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.parking-state .model-example > div .state {
  position: relative;
  padding-top: 40px;
  width: 33.3%;
  height: 60px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-align: center;
}
.parking-state .model-example > div .state::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 40px;
  transform: translateX(-50%);
}
.parking-state .model-example > div .state::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 60px;
  background: #f6f6f6;
}
.parking-state .model-example > div .state:first-child::after {
  display: none;
}
.parking-state .model-example > div .state1::before {
  background-image: url(images/ico_parking_state1.png);
}
.parking-state .model-example > div .state2::before {
  background-image: url(images/ico_parking_state2.png);
}
.parking-state .model-example > div .state3::before {
  background-image: url(images/ico_parking_state3.png);
}
.parking-state .model-example p {
  margin-top: 20px;
  padding-left: 14px;
  font-size: 12px;
  color: #999;
  text-indent: -14px;
}
.parking-state .stit {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.parking-state .day-state {
  margin-top: 10px;
  padding: 10px 20px;
  border: 1px solid #f0efef;
  border-radius: 14px;
  background: #fff;
}
.parking-state .day-state .select-area {
  display: flex;
  justify-content: space-around;
}
.parking-state .day-state .select-area button {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  padding: 0;
}
.parking-state .day-state .select-area button.on {
  color: #fff;
  background: #ff5393;
}
.parking-state .day-state .result-area {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 20px;
  margin-top: 10px;
}
.parking-state .day-state .result-area .y-axis {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
}
.parking-state .day-state .result-area .y-axis span {
  position: absolute;
  top: -8px;
  left: -16px;
  width: 24px;
  height: 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
}
.parking-state .day-state .result-area .y-axis1 {
  top: 0;
  background: #ea3f3f;
}
.parking-state .day-state .result-area .y-axis1 span {
  background: #ea3f3f;
}
.parking-state .day-state .result-area .y-axis2 {
  top: 35%;
  background: #ff703e;
}
.parking-state .day-state .result-area .y-axis2 span {
  background: #ff703e;
}
.parking-state .day-state .result-area .y-axis3 {
  top: 70%;
  background: #34d681;
}
.parking-state .day-state .result-area .y-axis3 span {
  background: #34d681;
}
.parking-state .day-state .result-area .time {
  position: relative;
  padding-top: 145px;
  height: 145px;
}
.parking-state .day-state .result-area .time .graph {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 6px;
  height: 0;
  border-radius: 5px;
  background: #003865;
  transform: translateX(-50%);
  transition: height 0.5s;
}
.parking-state .day-state .result-area .time .graph .blind {
  display: none;
}
.parking-state .day-state .result-area .time .graph + span {
  font-size: 10px;
}

/* 기프트카드 선택 */
.modal-parking-giftcard .modal-contents {
  padding-bottom: 145px;
}
.modal-parking-giftcard .modal-tit {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.modal-parking-giftcard .info {
  width: 220px;
  height: 50px;
  margin: 70px auto 30px;
  border: 1px solid #eee;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 50px;
}
.modal-parking-giftcard .info span {
  color: #ff5393;
}
.modal-parking-giftcard .parking-giftcard {
  border: 1px solid #eee;
  border-radius: 15px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.modal-parking-giftcard .parking-giftcard + .parking-giftcard {
  margin-top: 20px;
}
.modal-parking-giftcard .parking-giftcard .card {
  position: relative;
  display: flex;
  padding: 20px;
}
.modal-parking-giftcard .parking-giftcard .card > div + div {
  padding-left: 20px;
}
.modal-parking-giftcard .parking-giftcard .card img {
  width: 50px;
  height: 75px;
}
.modal-parking-giftcard .parking-giftcard .card div span {
  display: block;
}
.modal-parking-giftcard .parking-giftcard .card .name {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 26px;
}
.modal-parking-giftcard .parking-giftcard .card .num {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 14px;
  color: #999;
  line-height: 26px;
}
.modal-parking-giftcard .parking-giftcard .card .sum {
  padding-top: 10px;
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 20px;
  color: #000;
  line-height: 26px;
}
.modal-parking-giftcard .parking-giftcard .card .sum strong {
  font-weight: 500;
}
.modal-parking-giftcard .parking-giftcard .card .spend {
  position: absolute;
  right: 20px;
  bottom: 25px;
  font-size: 11px;
  color: #aaa;
  text-align: right;
}
.modal-parking-giftcard .parking-giftcard .card .spend span {
  font-family: "Gotham", "Noto Sans KR", sans-serif;
  font-size: 20px;
}
.modal-parking-giftcard .parking-giftcard .card .spend span strong {
  font-weight: 500;
}
.modal-parking-giftcard .parking-giftcard .btns {
  display: flex;
  border-top: 1px solid #f0efef;
}
.modal-parking-giftcard .parking-giftcard .btns button {
  position: relative;
  flex: 1;
  height: 60px;
  border: 0;
  font-size: 18px;
  background: transparent;
}
.modal-parking-giftcard .parking-giftcard .btns button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 18px;
  background: #040404;
  transform: translate(-50%, -50%);
}
.modal-parking-giftcard .parking-giftcard .btns button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #040404;
  transform: translate(-50%, -50%);
}
.modal-parking-giftcard .parking-giftcard .btns button:nth-of-type(2) {
  border: solid #f0efef;
  border-width: 0 1px;
}
.modal-parking-giftcard .parking-giftcard .btns button:nth-of-type(2)::before,
.modal-parking-giftcard .parking-giftcard .btns button:nth-of-type(3)::before,
.modal-parking-giftcard .parking-giftcard .btns button:nth-of-type(3)::after {
  display: none;
}
.modal-parking-giftcard .parking-giftcard.act {
  border-color: #ff5393;
  border-width: 2px;
}
.modal-parking-giftcard .parking-giftcard.act .spend {
  color: #ff5393;
}
.modal-parking-giftcard .fixed-area {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 125px;
  padding: 20px;
  background: #484038;
}
.modal-parking-giftcard .fixed-area .card-sum {
  display: flex;
  justify-content: space-between;
}
.modal-parking-giftcard .fixed-area .card-sum div {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.modal-parking-giftcard .fixed-area .card-sum div + div {
  font-size: 24px;
  font-weight: 700;
  color: #ff5393;
}
.modal-parking-giftcard .fixed-area .card-sum div + div button {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
}
.modal-parking-giftcard .fixed-area .card-sum div + div button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid #fff; /* 화살표 */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transform: translate(-50%, -50%);
}
.modal-parking-giftcard .fixed-area .card-sum div + div button.act {
  border-color: #ea5088;
}
.modal-parking-giftcard .fixed-area .card-sum div + div button.act::after {
  border-bottom: 7px solid #ea5088;
  border-top: 0px;
}
.modal-parking-giftcard .fixed-area .btn-large {
  margin: 20px 0 0;
}
.modal-parking-giftcard .fixed-area .used-list {
  display: none;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.modal-parking-giftcard .fixed-area .used-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-parking-giftcard .fixed-area .used-list > div span {
  font-size: 16px;
  font-weight: 500;
  color: #ccc8c4;
  line-height: 40px;
}
.modal-parking-giftcard .fixed-area .used-list > div span + span {
  font-weight: 700;
  color: #fff;
}
.modal-parking-giftcard .fixed-area .used-list > div:first-child span {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.modal-parking-giftcard .fixed-area .used-list > div:first-child button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 19px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: transparent;
}

/* 주차이용내역 */
.parking-history {
  padding: 30px 0 20px;
}
.parking-history .info {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}
.parking-history .center,
.parking-history-detail .center {
  margin: 20px 0 30px;
  text-align: center;
}
.parking-history .center p,
.parking-history-detail .center p {
  display: inline-block;
  height: 50px;
  padding: 0 20px;
  border: 1px solid #eee;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  color: #767676;
  line-height: 50px;
}
.parking-history .center p span,
.parking-history-detail .center p span {
  color: #ff5393;
}
.parking-history .list {
  padding: 20px 24px 12px;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.03);
}
.parking-history .list + .list {
  margin-top: 20px;
}
.parking-history .list p {
  position: relative;
  padding-left: 36px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 26px;
  background: url(images/ico_parking_history.png) no-repeat left center;
  background-size: 26px 26px;
}
.parking-history .list p a {
  position: absolute;
  top: -4px;
  right: 0;
  width: 35px;
  height: 35px;
}
.parking-history .list p a::after {
  content: "\e93e";
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: xeicon;
  font-size: 20px;
  font-weight: bold;
  transform: translate(-50%, -50%);
}
.parking-history .list ul {
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.parking-history .list li {
  display: flex;
  justify-content: space-between;
}
.parking-history .list li span {
  padding: 8px 0;
  font-size: 16px;
  color: #333;
}
.parking-history .list li span + span {
  color: #aaa;
}
.parking-history .list li:nth-of-type(1) span + span {
  color: #333;
  font-weight: 700;
}
.parking-history .list li:nth-of-type(3) span + span {
  color: #ff5393;
  font-weight: 700;
}

/* 주차이용내역 상세 */
.parking-history-detail {
  padding: 30px 0 20px 0;
}
.parking-history-detail .date {
  padding-left: 36px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  background: url(images/ico_parking_history.png) no-repeat left center;
  background-size: 26px 26px;
}
.parking-history-detail .detail-cont {
  padding-top: 20px;
}
.parking-history-detail .detail-cont,
.parking-history-detail .carge {
  border-top: 1px solid #000;
}
.parking-history-detail .detail-cont li,
.parking-history-detail .carge li {
  display: flex;
  justify-content: space-between;
}
.parking-history-detail .detail-cont li span,
.parking-history-detail .carge li span {
  padding: 8px 0;
  font-size: 16px;
}
.parking-history-detail .basic li span {
  color: #333;
}
.parking-history-detail .basic li span + span {
  color: #aaa;
}
.parking-history-detail .basic li:nth-of-type(1) span + span {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
.parking-history-detail .basic li:nth-of-type(3) span + span {
  font-size: 18px;
  color: #ff5393;
  font-weight: 700;
}
.parking-history-detail .time li span {
  color: #aaa;
}
.parking-history-detail .time li span + span {
  color: #333;
}
.parking-history-detail .time li:nth-of-type(1) span {
  color: #333;
  font-weight: 700;
}
.parking-history-detail .time li:nth-of-type(1) span + span {
  font-size: 18px;
  font-weight: 700;
}
.parking-history-detail .carge {
  border-bottom: 2px solid #000;
}
.parking-history-detail .carge ul + ul {
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.parking-history-detail .carge li span {
  color: #aaa;
}
.parking-history-detail .carge li span em {
  display: block;
  padding-left: 4px;
  font-style: normal;
}
.parking-history-detail .carge li span + span {
  color: #333;
}
.parking-history-detail .carge li:first-child span {
  color: #333;
  font-weight: 700;
}
.parking-history-detail .carge li:first-child span + span {
  font-size: 18px;
}
.parking-history-detail .info {
  padding-top: 25px;
}
.parking-history-detail .info li {
  padding-left: 8px;
  text-indent: -8px;
  font-size: 14px;
  font-weight: 500;
  color: 333px;
}
.parking-history-detail .btn-large {
  margin: 20px 0 0 0;
}

/* 주차위치안내 */
.parking-location-detail .head-area {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 60px;
  line-height: 1.3;
  padding: 0 10px;
  font-size: 20px;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.parking-location-detail .head-area .page-close {
  position: absolute;
  top: 50%;
  right: 20px;
  float: right;
  font-size: 30px;
  transform: translateY(-50%);
}
.parking-location-detail .top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0;
}
.parking-location-detail .info {
  width: 70%;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.parking-location-detail .info span {
  color: #ff5393;
}
.parking-location-detail .info .area.o {
  color: #f29500;
}
.parking-location-detail .info .area.g {
  color: #649b1c;
}
.parking-location-detail .info .area.b {
  color: #121770;
}
.parking-location-detail .info .area.p {
  color: #6d0b7a;
}
.parking-location-detail .top-box button {
  width: 90px;
  height: 40px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #ff5393;
  border: 0;
}
.parking-location-detail .top-box button + button {
  margin-left: 5px;
}
.parking-location-detail .btn-area {
  width: 90%;
  margin: 0 auto;
}
.parking-location-detail .btn-large {
  margin: 20px 0;
}
.parking-location-detail .map-btn {
  position: fixed;
  bottom: 118px;
  right: 20px;
  width: 52px;
}
.parking-location-detail .map-btn button {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 0;
  background: #fff;
}
.parking-location-detail .map-btn button + button {
  margin-top: 6px;
}
.parking-location-detail .map-btn button:before,
.parking-location-detail .map-btn button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #000;
}
.parking-location-detail .map-btn #increase::before,
.parking-location-detail .map-btn #decrease::before {
  width: 20px;
  height: 2px;
  transform: translate(-50%, -1px);
}
.parking-location-detail .map-btn #increase::after {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  background: #000;
  transform: translate(-1px, -50%);
}
.parking-location-detail .select-floor {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.parking-location-detail .select-floor button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #aaa;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: #aaa;
  background: #fff;
}
.parking-location-detail .select-floor button.on {
  color: #000;
  border-width: 2px;
  border-color: #000;
}
.parking-location-detail .select-floor button + button {
  margin-left: 10px;
}
.parking-location-detail .select-floor + p {
  margin-top: 12px;
  padding-bottom: 20px;
  text-align: center;
}

/* 주차이벤트 */
#modalParkingEvent {
  background:url('images/parkingevent-bg.png') no-repeat;
  background-size:100%;
  width:95%;
  /* height:80%; */
  background-color:#fff;
  /* max-height:150vw; */
  padding:0;
  border-radius: 30px;
}

#modalParkingEvent .modal-contents {
  text-align: center;
}

#modalParkingEvent .modal-contents .parkingevent-info {
  font-family:'GmarketSansMedium', "Noto Sans KR", sans-serif;
  line-height:15px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: center;
  color: #333;
  margin-top:110%;
  margin-bottom:20px;
}
#modalParkingEvent .modal-contents button {
  width:90%;
  margin:0 auto 30px auto;
}
#modalParkingEvent .modal-btns {
  display:grid;
  grid-template-columns: 1fr 1fr;
  background-color: #fff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top:1px solid #e9e9e9;
}

#modalParkingEvent .modal-btns .modal-close:first-child {
  border-right: 1px solid #e9e9e9;
}
#modalParkingEvent .modal-btns .modal-close {
  font-size: 100%;
  text-align: center;
  line-height:4;
}

.parkingevent img, .parkingwinner img {
  width:100%;
}
.parking-event h3 {
  font-family: 'GmarketSansBold', "Noto Sans KR", sans-serif;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: -0.82px;
  text-align: center;
  color: #333;
  margin:0;
  margin-bottom:20px;
}
.parking-event .divider {
  width:100%;
  height:1px;
  background-color: #eee;
}

.parkingevent .event-msg, .parkingwinner .event-msg {
  width:210px;
  font-family: 'GmarketSansMedium', "Noto Sans KR", sans-serif;
  font-weight:500;
  font-size:14px;
  color:#333;
  letter-spacing:-0.5px;
  margin:0 auto;
  text-align:center;
}
.parkingwinner .event-msg {
  width:100%;
  line-height:1.5;
  font-size:80%;
}

.parkingevent .event-msg span, .parkingwinner .event-msg span {
  display:block;
  margin-top:10px;
  font-family: 'PretendardLight', "Noto Sans KR", sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 13px;
  letter-spacing: -0.36px;
  text-align: center;
  color: #767676;
}

.event-prize {
  width:100%;
  margin-top:60px;
  text-align:center;
  background:url("images/parkingevent-bg01.png") no-repeat center 100px/cover;
  height:330px;
}
.event-prize h3 {
  font-family: GmarketSans;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: -0.82px;
  text-align: center;
  color: #333;
}
.event-prize .ifccard {
  margin:0 auto;
  width:35%;
}
.event-prize ul li{
  counter-increment:list-number;
  height:20px;
  font-family: 'PretendardMedium', "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.43px;
  color: #2c2c2c;
  margin-top:10px;
}

.event-prize li:before {
  counter-increment: li;
  content: counter(list-number, decimal-leading-zero);
  color: #fe478b;
  width:20px;
  height:20px;
  /* border:solid 1px #fe478b; */
  box-shadow: 0 0 0 1px #fe478b inset;
  border-radius: 50%;
  font-family:'PretendardExtraBold', "Noto Sans KR", sans-serif;
  font-size:8px;
  font-weight:800;
  margin-right:8px;
  display:inline-block;
}

.event-desc {
  margin:0 18px;
}
.event-desc h4, .event-notes h4 {
  margin:0 0 3px 0 !important;
  font-family: 'PretendardBold';
  font-weight:bold;
}
.event-desc, .event-notes {
  margin: 30px 18px 31px;
  font-family: 'PretendardLight';
  font-size: 10px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.36px;
  color: #333;
}
.event-desc ul, .event-notes ul {
  margin:0 0 10px 0 !important;
}

.event-slider {
  background:url("images/parkingevent-bg02.png") no-repeat center 120px/cover;
  background-size:100%;
  /* height:677px; */
  text-align:center;
  position: relative;
  margin-top:60px;
  min-height:720px;
  display:flex;
  flex-direction: column;
}
.event-slider  p {
  font-family: 'PretendardBold';
  font-size:18px;
  letter-spacing: -0.64px;
  color:#000;
}

.event-slider .slick-dots {
  bottom:-35px;
}
.event-slider .slick-dots li button:before {
  font-size:12px;
}
.event-slider .slick-dots li {
  margin:0;
}
.event-slider .parkingevent-slider {
  width:70%;
  margin:-10px auto 0 auto;
  margin-bottom:50px;
}
.event-slider .parkingevent-slider img {
  width:100%;
  margin-bottom:10px;
}

.event-slider .btn {
  display:block;
  margin:0 50px;
  width:calc(100% - 100px);
}

.event-slider .event-cumulative {
  text-align: left;
  margin:0 50px;
  width:calc(100% - 100px);
}
.event-slider .event-cumulative ul {
  list-style:disc;
  font-size:14px;
  margin-left:20px;
}

/* ----- parking-winner ----- */
.winner-box {
  border:1px solid #ccc;
  border-radius: 20px;
  text-align:center;
  color:#333333;
  width:90%;
  margin:0 auto 15px auto;
  padding:25px 0px;
}
.winner-box h2 {
  font-family: 'GmarketSansMedium', "Noto Sans KR", sans-serif;
  margin:-5px;
  font-size:0.9rem;
  font-weight:400;
  line-height:2;
}
.winner-box h1 {
  font-family: 'GmarketSansBold',  "Noto Sans KR", sans-serif;
  font-weight:800;
  font-size:1.6rem;
}
.winner-box.win-50 ul {
  grid-template-columns: 1fr;
  font-weight:800;
}
.winner-box ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: 'PretendardLight', "Noto Sans KR", sans-serif;
  font-size:0.8em;
  letter-spacing: -0.36px;
  line-height:2;
  margin-bottom:0;
}
.winner-box ul li div:first-child {
  width:40px;
  display:inline-block;
  text-align:center;
}
.winner-box ul li div:last-child {
  width:100px;
  display:inline-block;
  text-align:left;
}
.parkingwinner .event-notes h4 {
  font-size:0.8rem;
}
.parkingwinner .event-notes li {
  font-size:0.78rem;
  margin-left:10px;
}
.parkingwinner .event-notes li:before {
  content: '* ';
  margin-left:-7px;
}
/* ----- //parking-winner ----- */

#modalPopup1 .modal-contents {
  text-align:center;
}
#modalPopup1 .modal-btns .btn-large {
  text-align:center;
  margin:20px 0;
}

#modalPopup2 .modal-contents {
  text-align:center;
}
#modalPopup2 .modal-btns {
  display:flex;
  justify-content: space-between;
}
#modalPopup2 .modal-btns .btn-medium{
  width: calc(50% - 5px) !important;
  margin-top:30px;

}