/* ############################################################
     푸터
############################################################
*/
.tailInfo button {
  background-color: rgba(255, 255, 255, 0.2);
}
#footer02 .wrap_map {
  min-height: 550px !important;
}

#footer02 .footer-bus h6 {
  color: #3a99e9;
}
#footer02 .bus_label {
  background-color: #3a99e9;
}
#footer02 .footer-car h6 {
  color: #3a99e9;
}
#footer02 .car_label {
  background-color: var(--gray-700);
}
#footer02 .footer-list .badge {
  background: #f1c40f;
  padding: 2px 0.4167vw;
}
#footer02 .wrap_controllers {
  display: none;
}
#footer02 .cont {
  display: none;
}



/* ############################################################
     PC 퀵메뉴 — Figma 4486:2353 / 4486:2407 / 4486:2366
############################################################
*/
#quick_menu_box.qm-float {
	position: fixed;
	right: var(--sp-40);
	bottom: var(--sp-40);
	z-index: 99;
	/* width: 70px; */
  width: 150px;
}

#quick_menu_box.qm-float.is-open {
  width: 150px;
}

.qm-float {
	& .qm-float__panel {
		width: 100%;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition:
			max-height 0.35s ease,
			opacity 0.3s ease,
			visibility 0.3s ease,
			margin 0.35s ease;
	}

	& .qm-float__list {
		display: flex;
		flex-direction: column;
		gap: var(--sp-8);
		width: 100%;
	}

	& .qm-float__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		min-height: 48px;
		padding: var(--sp-10) var(--sp-20);
		border: 1px solid transparent;
		border-radius: 50px;
		background-color: var(--main-color);
		color: var(--white, #fff);
		transition:
			background-color 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
	}

	& .qm-float__icon {
		position: relative;
		flex-shrink: 0;
		width: 22px;
		height: 22px;
	}

	& .qm-float__icon img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		transition: opacity 0.2s ease;
	}

	& .qm-float__icon-w {
		position: absolute;
		inset: 0;
		margin: auto;
	}

	& .qm-float__icon-color {
		opacity: 0;
	}

	& .qm-float__label {
		white-space: nowrap;
	}

	& .qm-float__link:hover {
		background-color: var(--neutral-100);
		border-color: var(--main-color);
		color: var(--dark);
	}

	& .qm-float__link:hover .qm-float__icon-w {
		opacity: 0;
	}

	& .qm-float__link:hover .qm-float__icon-color {
		opacity: 1;
	}

	& .qm-float__actions {
		width: 100%;
	}

	& .qm-float__toggle,
	& .qm-float__quick {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 70px;
		height: 70px;
		padding: 0;
		border-radius: 50%;
		box-shadow: 0 4px 6.5px rgba(0, 0, 0, 0.17);
		cursor: pointer;
	}

	& .qm-float__toggle {
		background-color: var(--main-color);
	}

	& .qm-float__toggle-logo,
	& .qm-float__toggle-close {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	& .qm-float__toggle-logo img {
		display: block;
		width: 42px;
		height: auto;
	}

	& .qm-float__toggle-close {
		display: none;
	}

	& .qm-float__toggle-close img {
		display: block;
		width: 20px;
		height: 20px;
	}

	& .qm-float__quick {
		gap: 2px;
		background-color: #f0f3f6;
	}

	& .qm-float__quick-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
	}

	& .qm-float__quick-icon img {
		display: block;
		width: 20px;
		height: 20px;
	}

	& .qm-float__scroll-up {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 0;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition:
			height 0.35s ease,
			opacity 0.35s ease,
			margin 0.35s ease;
	}

	& .qm-float__scroll-up img {
		display: block;
		width: 15px;
		height: auto;
	}

	&.is-open .qm-float__panel {
		max-height: 480px;
		opacity: 1;
		visibility: visible;
		margin-bottom: var(--sp-12);
	}

	&.is-open .qm-float__toggle-logo {
		display: none;
	}

	&.is-open .qm-float__toggle-close {
		display: flex;
	}

	&.is-open .qm-float__quick {
		display: none;
	}

	&.is-scroll-visible .qm-float__scroll-up {
		height: 30px;
		margin-top: var(--sp-20);
		opacity: 1;
		pointer-events: auto;
	}
}

/* ############################################################
     퀵메뉴 (기존 pill)
############################################################
*/
#quick_menu_pill {
  position: fixed;
  bottom: 1.1667vw;
  right: 1vw;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quick_menu_pill-container {
  margin-bottom: 0.8854vw;
}
.quick_menu_pill-items {
  width: 9vw;
  display: flex;
  flex-direction: column;
  gap: 0.6771vw;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    visibility 0.3s;
}
.quick_menu_pill-items.active {
  opacity: 1;
  visibility: visible;
  max-height: 26.0417vw;
  height: 100%;
  padding-top: 2.6042vw;
}
.quick_menu_pill-items svg {
  width: 1.0417vw;
}
.quick_menu_pill-items a {

  width: 100%;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2604vw;
  flex-direction: row;
  padding: 0.625vw 0.8333vw;
  text-decoration: none;
  /* border: 1px solid;
  border-color: var(--sub-color); */
  transition:
    transform 0.2s,
    box-shadow 0.2s;
    max-height: 42px;
}
.quick_menu_pill-items a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.2083vw 0.625vw rgba(0, 0, 0, 0.1);
  background-color: var(--sub-color);
}
/* .quick_menu_pill-items a:hover img {
  filter: brightness(10);
}
.quick_menu_pill-items a:hover p {
  filter: brightness(10);
} */
.quick_menu_pill-items a div {
  font-weight: 500;
  font-size: 0.7292vw;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: #333;
}

.qm-pill-toggle {
  width: 4.5vw;
  height: 4.5vw;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.4167vw auto;
  position: relative;
  overflow: hidden;
  margin-top: 0.8854vw;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qm-pill-toggle svg {
  width: 75%;
  color: #fff;
  transition: transform 0.3s;
}
.qm-pill-toggle.active svg {
  transform: rotate(45deg);
}
.qm-pill-toggle:active {
  width: 2.6042vw;
  height: 2.6042vw;
}

.root_daum_roughmap_landing {
  min-height: 360px;
}

@media screen and (max-width: 992px) {


  #quick_menu_pill {
    right: 5vw;
    bottom: 8vw;
  }
  .qm-pill-toggle {
    width: 8vw;
    height: 8vw;
  }
  #SD {
    width: 8vw!important;
    height: 8vw!important;
  }

  #scrollTop {
       width: 8vw!important;
    height: 8vw!important;
  }


  .quick_menu_pill-items {
    width: 15vw;
    max-height: 30vw ;
  }
  .quick_menu_pill-items.active {
    max-height: 30vw ;
  }

  #footer02 .wrap_map {
  min-height: 320px!important;
  }

  #quick_menu_box.qm-float {
    width: 60px;
    right: var(--sp-20);
    bottom: var(--sp-20);
  }

  #quick_menu_box.qm-float.is-open {
    width: 60px;
  }
  .qm-float {
    & .qm-float__toggle,
    & .qm-float__quick {
      width: 60px;
      height: 60px;
    }
    & .qm-float__toggle-logo img {
      width: 30px;
      height: 30px;
    }
    & .qm-float__toggle-close img {
      width: 15px;
      height: 15px;
    }
    & .qm-float__icon {
      width: 33px;
      height: 33px;
    }
    & .qm-float__quick-icon img {
      width: 15px;
      height: 15px;
    }
    & .qm-float__scroll-up {
      width: 15px;
      height: 15px;
    }
    & .qm-float__scroll-up img {
      width: 10px;
      height: 30px;
    }
    & .qm-float__link {
      min-height: 60px;
      padding: var(--sp-10) var(--sp-10);
      background-color: var(--neutral-100);
      border-color: var(--main-color);
      color: var(--dark);
    }

    & .qm-float__icon-w {
      opacity: 0;
    }

    & .qm-float__icon-color {
      opacity: 1;
    }

    & .qm-float__label {
      display: none;
    }
  }

}



@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(1.0417vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.qm-tip {
  position: absolute;
  right: calc(100% + 0.625vw);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.3125vw 0.625vw;
  border-radius: 6px;
  font-size: 0.6771vw;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: none;
  font-weight: 500;
}
.qm-circle-item:hover .qm-tip {
  opacity: 1;
  visibility: visible;
  right: calc(100% + 0.8333vw);
}
.qm-tip::after {
  content: "";
  position: absolute;
  right: -0.3125vw;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 0.3125vw solid rgba(0, 0, 0, 0.85);
  border-top: 0.3125vw solid transparent;
  border-bottom: 0.3125vw solid transparent;
}


 #scrollTop {
       width: 3.6458vw;
    height: 3.6458vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: 50%;
    background: var(--blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.4167vw auto;
    position: relative;
    overflow: hidden;
    margin-top: 0.8854vw;
    cursor: pointer;
    min-width: 50px;
    min-height: 50px;
  }

#SD-popup .custom-option:hover {
  background-color: var(--light);
}
#SD-popup input:focus {
  outline: none !important;
}
#SD-popup input::placeholder {
  color: var(--gray-400);
}
#SD-popup textarea::placeholder {
  color: var(--gray-400);
}
#SD-popup label {
  white-space: nowrap;
}

/* 커스텀 체크박스 */
#SD-popup .u-check {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1458vw;
  height: 1.1458vw;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}
#SD-popup .u-check:checked {
  background: #a89070;
  border-color: #a89070;
}
#SD-popup .u-check:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.2604vw;
  height: 0.4688vw;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
}

#SD {
  width: 3.6458vw;
  height: 3.6458vw;
}
#SD-popup {
  display: none;
  position: fixed;
  bottom: 160px;
  right: 100px;
  width: 413px;
  z-index: 9999;
}


/* #quick_menu_mobile {
  border-top: 1px solid #EBEBEB;
}

#quick_menu_mobile ul li:nth-of-type(1) {
  border-right: 1px solid #EBEBEB;
}
#quick_menu_mobile ul li:nth-of-type(2) {
  border-right: 1px solid #EBEBEB;
}
#quick_menu_mobile ul li:nth-of-type(3) {
  border-right: 1px solid #EBEBEB;
}
#quick_menu_mobile ul li:nth-of-type(4) {
  border-right: 1px solid #EBEBEB;
} */

/* 모바일 하단 퀵메뉴 — Figma 372:2108 */
.qm-mobile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 1050;
	padding: 0 16px;
	pointer-events: none;
}

.qm-mobile {
	& .qm-mobile__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 390px;
		margin: 0 auto;
		pointer-events: auto;
		transition: gap 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
	}

	& .qm-mobile__inner.is-top-visible {
		justify-content: space-between;
		gap: 14px;
	}

	& .qm-mobile__nav {
		height: 64px;
		padding: 5px 0;
		flex-shrink: 0;
		transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
        box-shadow: 1px 1px 4px 1px #33333321;
	}

	& .qm-mobile__list {
		height: 100%;
	}

	& .qm-mobile__item {
		flex: 0 0 60px;
	}

	& .qm-mobile__link {
		width: 60px;
		color: inherit;
	}

	& .qm-mobile__icon {
		width: 32px;
		height: 32px;
	}

	& .qm-mobile__icon img {
		display: block;
		max-width: 100%;
		max-height: 100%;
    filter: brightness(0);
	}

	& .qm-mobile__top {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 0;
		width: 0;
		height: 64px;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateX(16px) scale(0.85);
		transition:
			width 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
			flex-basis 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
			opacity 0.3s ease,
			transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
	}

	& .qm-mobile__inner.is-top-visible .qm-mobile__top {
		flex: 0 0 64px;
		width: 64px;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0) scale(1);
        box-shadow: 1px 1px 4px 1px #33333321;
	}
}