/* Mixins.less
 * Snippets of reusable CSS to develop faster and keep code readable
 * ----------------------------------------------------------------- */
.wrap-city {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.pointer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--p_x);
  height: var(--p_y);
  border: 1px solid #374E63;
  border-top: none;
  border-left: none;
  z-index: 1000;
  pointer-events: none;
}
.pointer::before {
  content: " (" attr(data-x) " , " attr(data-y) ")";
  position: absolute;
  top: 100%;
  left: 100%;
  font-size: 12px;
  background-color: #3b9c4b;
  color: white;
  padding: 2px;
  white-space: nowrap;
}
#city {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}
#city .picture-wrapper {
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
}
#city .picture-wrapper img {
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  object-fit: contain;
  max-height: 790px;
  max-width: 1500px;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
#city .picture-wrapper img.opa {
  pointer-events: none;
}
.day .txt-wrapper .wrap-desc .desc {
  color: #2D5D5F;
}
.day .btn-wrapper button {
  background-color: rgba(0, 0, 0, 0.1);
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .day .btn-wrapper button {
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.night .txt-wrapper .wrap-desc .desc {
  color: #FFFFFF;
}
.night .btn-wrapper button {
  border-color: white;
  background-color: rgba(0, 0, 0, 0.2);
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .night .btn-wrapper button {
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
.night .btn-wrapper button .icon {
  color: white;
}
.skip .btn-wrapper button {
  transition: none;
}
.skip .btn-wrapper button .icon {
  transition: none;
}
.route-wrapper {
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 100%;
  max-height: 790px;
  max-width: 1500px;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
.route-wrapper .position-route {
  position: relative;
  width: 100%;
  height: 100%;
}
.route-wrapper .start {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  background-color: red;
}
.route-wrapper .route {
  transition-delay: 0s !important;
  position: absolute;
  width: 1px;
  height: 1px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
  z-index: 2;
  transform-origin: bottom right;
}
.route-wrapper .route .pin-balloon {
  position: relative;
  width: 51px;
  height: 55px;
  min-width: 51px;
  transform-origin: bottom center;
  transition: all 0.4s;
}
.route-wrapper .route .pin-balloon img {
  position: absolute;
  top: 0;
  left: 1px;
  width: 100%;
  height: 100%;
}
.route-wrapper .route .pin-balloon img.hover-pin {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.route-wrapper .route .pin-balloon img.msg-img {
  width: 80%;
  object-fit: contain;
  height: 10px;
  margin: auto;
  top: -5px;
  bottom: auto;
  right: 0;
  left: 0;
}
.route-wrapper .route .pin-balloon .balloon-txt {
  position: absolute;
  z-index: 10;
  top: calc(50% - 1px);
  left: 0%;
  width: 100%;
  height: auto;
  font-size: 7px;
  line-height: 8px;
  color: white;
  text-align: center;
  transform: translateY(-50%);
}
.route-wrapper .route.small .pin-balloon {
  width: 44px;
  height: 48px;
  min-width: 44px;
}
.route-wrapper .route.small .balloon-txt {
  font-size: 6px;
  line-height: 7px;
  color: white;
}
.route-wrapper .route.medium .pin-balloon {
  width: 52px;
  height: 57px;
  min-width: 52px;
}
.route-wrapper .route.medium-big .pin-balloon {
  width: 53px;
  height: 59px;
  min-width: 53px;
}
.route-wrapper .route.big .pin-balloon {
  width: 66px;
  height: 71px;
  min-width: 66px;
}
.route-wrapper .route.big .pin-balloon .balloon-txt {
  font-size: 8px;
  line-height: 9px;
  color: white;
}
.route-wrapper .route:hover,
.route-wrapper .route.active {
  z-index: 100 !important;
}
.route-wrapper .route:hover .pin-balloon,
.route-wrapper .route.active .pin-balloon {
  transform: scale(1.32);
}
.route-wrapper .route:hover .pin-balloon img.hover-pin,
.route-wrapper .route.active .pin-balloon img.hover-pin {
  opacity: 1;
}
.route-wrapper .route.active {
  pointer-events: none;
}
.route-wrapper [data-land='grey'] .route:nth-child(1) {
  left: 20.82253182%;
  top: 65%;
  --X: 20.82253182%;
  --Y: 65%;
}
.route-wrapper [data-land='grey'] .route:nth-child(2) {
  left: 25.42188624%;
  top: 68.625%;
  --X: 25.42188624%;
  --Y: 68.625%;
}
.route-wrapper [data-land='grey'] .route:nth-child(3) {
  left: 30.27211453%;
  top: 72.375%;
  --X: 30.27211453%;
  --Y: 72.375%;
}
.route-wrapper [data-land='grey'] .route:nth-child(4) {
  left: 35.3732167%;
  top: 76.375%;
  --X: 35.3732167%;
  --Y: 76.375%;
  z-index: 2;
}
.route-wrapper [data-land='grey'] .route:nth-child(5) {
  left: 39.55444799%;
  top: 72.625%;
  --X: 39.55444799%;
  --Y: 72.625%;
  z-index: 2;
}
.route-wrapper [data-land='grey'] .route:nth-child(6) {
  left: 43.48480541%;
  top: 69.25%;
  --X: 43.48480541%;
  --Y: 69.25%;
  z-index: 2;
}
.route-wrapper [data-land='grey'] .route:nth-child(7) {
  left: 40.13982037%;
  top: 65.75%;
  --X: 40.13982037%;
  --Y: 65.75%;
  z-index: 1;
}
.route-wrapper [data-land='grey'] #pl-8 {
  left: 30.10486528%;
  top: 61.875%;
  --X: 30.10486528%;
  --Y: 61.875%;
}
.route-wrapper [data-land='green'] .route:nth-child(1) {
  left: 67.73594688%;
  top: 60.75%;
  --X: 67.73594688%;
  --Y: 60.75%;
}
.route-wrapper [data-land='green'] .route:nth-child(2) {
  left: 73.67329531%;
  top: 65.125%;
  --X: 73.67329531%;
  --Y: 65.125%;
}
.route-wrapper [data-land='green'] .route:nth-child(3) {
  left: 78.69077286%;
  top: 60.625%;
  --X: 78.69077286%;
  --Y: 60.625%;
}
.route-wrapper [data-land='green'] .route:nth-child(4) {
  left: 71.08093191%;
  top: 53.75%;
  --X: 71.08093191%;
  --Y: 53.75%;
}
.route-wrapper [data-land='blue'] .route:nth-child(1) {
  left: 68.90669164%;
  top: 34%;
  --X: 68.90669164%;
  --Y: 34%;
}
.route-wrapper [data-land='blue'] .route:nth-child(2) {
  left: 72.92067368%;
  top: 36.25%;
  --X: 72.92067368%;
  --Y: 36.25%;
  z-index: 2;
}
.route-wrapper [data-land='blue'] .route:nth-child(3) {
  left: 76.93465572%;
  top: 32.625%;
  --X: 76.93465572%;
  --Y: 32.625%;
  z-index: 2;
}
.route-wrapper [data-land='blue'] .route:nth-child(4) {
  left: 73.08792293%;
  top: 28.125%;
  --X: 73.08792293%;
  --Y: 28.125%;
  z-index: 1;
}
.route-wrapper [data-land='orange'] .route:nth-child(1) {
  left: 53.10163737%;
  top: 47.75%;
  --X: 53.10163737%;
  --Y: 47.75%;
  pointer-events: none;
  transition: all 0.5s ease 0.1s;
  z-index: 8;
}
.route-wrapper [data-land='orange'] .route:nth-child(1) .balloon-txt {
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}
.route-wrapper [data-land='orange'] .route:nth-child(2) {
  left: 54.35600676%;
  top: 48.125%;
  --X: 54.35600676%;
  --Y: 48.125%;
  transition: all 0.5s ease 0.15s;
}
.route-wrapper [data-land='orange'] .route:nth-child(3) {
  left: 54.35600676%;
  top: 48.125%;
  --X: 54.35600676%;
  --Y: 48.125%;
  transition: all 0.5s ease 0.2s;
  z-index: 10;
}
.route-wrapper [data-land='orange'] .route:nth-child(4) {
  left: 54.35600676%;
  top: 48.125%;
  --X: 54.35600676%;
  --Y: 48.125%;
  transition: all 0.5s ease 0.25s;
  z-index: 2;
}
.route-wrapper [data-land='orange'] .route:nth-child(5) {
  left: 55.52675152%;
  top: 48.125%;
  --X: 55.52675152%;
  --Y: 48.125%;
  pointer-events: none;
  transition: all 0.5s ease 0.3s;
}
.route-wrapper [data-land='orange'] .route:nth-child(5) .balloon-txt {
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}
.route-wrapper [data-land='orange'] .route:nth-child(6) {
  left: 54.35600676%;
  top: 48.125%;
  --X: 54.35600676%;
  --Y: 48.125%;
  transition: all 0.5s ease 0.35s;
}
.route-wrapper [data-land='yellow'] .route:nth-child(1) {
  left: 64.30733722%;
  top: 46.625%;
  --X: 64.30733722%;
  --Y: 46.625%;
}
.route-wrapper [data-land='violet'] .route:nth-child(1) {
  left: 39.38719874%;
  top: 35.625%;
  --X: 39.38719874%;
  --Y: 35.625%;
}
.route-wrapper [data-land='violet'] .route:nth-child(2) {
  left: 33.70072419%;
  top: 31.125%;
  --X: 33.70072419%;
  --Y: 31.125%;
}
.route-wrapper [data-land='violet'] .route:nth-child(3) {
  left: 39.30357412%;
  top: 26.25%;
  --X: 39.30357412%;
  --Y: 26.25%;
}
.route-wrapper [data-land='violet'] .route:nth-child(4) {
  left: 44.32105166%;
  top: 30%;
  --X: 44.32105166%;
  --Y: 30%;
}
.route-wrapper [data-land='violet'] .route:nth-child(5) {
  left: 46.16079343%;
  top: 31.25%;
  --X: 46.16079343%;
  --Y: 31.25%;
}
.route-wrapper [data-land='violet'] .route:nth-child(6) {
  left: 50.00752622%;
  top: 28.5%;
  --X: 50.00752622%;
  --Y: 28.5%;
}
.route-wrapper [data-land='brown'] .route:nth-child(1) {
  left: 53.185262%;
  top: 80.625%;
  --X: 53.185262%;
  --Y: 80.625%;
}
.route-wrapper [data-land='brown'] .route:nth-child(2) {
  left: 58.45361342%;
  top: 84.5%;
  --X: 58.45361342%;
  --Y: 84.5%;
}
.route-wrapper [data-land='brown'] .route:nth-child(3) {
  left: 63.97283872%;
  top: 80.375%;
  --X: 63.97283872%;
  --Y: 80.375%;
}
.route-wrapper [data-land='brown'] .route .pin-balloon img.msg-img {
  width: 75%;
  height: auto;
  top: -9px;
}
.route-wrapper [data-land='brown'] .route:nth-child(2) .pin-balloon img.msg-img {
  top: -6px;
}
.route-wrapper [data-land='brown'] .route:nth-child(3) .pin-balloon img.msg-img {
  top: -10px;
}
.route-wrapper .balloon {
  position: relative;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.route-wrapper .balloon img {
  position: absolute;
  left: 35.87496446%;
  top: 53.5%;
  --X: 35.87496446%;
  --Y: 53.5%;
  width: 100%;
  height: 100%;
  transition: top 3s cubic-bezier(0.33, -0.26, 0.56, 1.25);
}
.route-wrapper .balloon.avoid-car img {
  top: calc(var(--Y) - 5%);
}
.route-wrapper .sign {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FAAF33;
  border-radius: 10px;
  transition: background-color 0.4s ease, top 0.4s ease 0.2s, left 0.4s ease 0.2s;
}
.route-wrapper .sign::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: #FAAF3366;
  border-radius: 10px;
  width: 14px;
  height: 14px;
  box-shadow: 0px 2px 12px #FFD48D;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.route-wrapper .sign::after {
  content: '';
  position: absolute;
  left: calc(50% - 0px);
  bottom: 100%;
  background-color: #FAAF33;
  transition: height 0.3s ease 0.2s;
}
.route-wrapper .sign.c-1 {
  z-index: 11;
  width: 0px !important;
  left: 45.15729792%;
  top: 52.75%;
  --X: 45.15729792%;
  --Y: 52.75%;
}
.route-wrapper .sign.c-1:hover {
  z-index: 100 !important;
}
.route-wrapper .sign.c-1::before {
  content: none !important;
}
.route-wrapper .sign.c-1::after {
  content: none !important;
}
.route-wrapper .sign.c-1 .wrap-txt .sign-txt {
  transform-origin: bottom center;
  bottom: 0 !important;
  width: 68px;
  height: 68px;
  font-size: 8px;
  line-height: 9px;
  border-radius: 100%;
  padding: unset !important;
  display: flex;
  gap: 2px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background-color: #B91111;
  -webkit-box-shadow: 0px 1px 12px 0px #FFFFFF inset;
  box-shadow: 0px 1px 12px 0px #FFFFFF inset;
  transition: all 0.3s;
  transform: unset;
}
@media (max-width: 500px) {
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt {
    width: 50px !important;
    height: 50px !important;
    font-size: 6px !important;
    line-height: 7px !important;
  }
}
@media (min-width: 501px) and (max-width: 767px) {
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt {
    width: 66px !important;
    height: 66px !important;
    font-size: 8px !important;
    line-height: 9px !important;
  }
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt .icon {
    margin-bottom: 3px;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt {
    width: 51px;
    height: 51px;
    font-size: 6px;
    line-height: 7px;
  }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt {
    width: 58px;
    height: 58px;
    font-size: 7px;
    line-height: 8px;
  }
}
.route-wrapper .sign.c-1 .wrap-txt .sign-txt:hover {
  background-color: #920E0E;
  scale: 1.3;
}
.route-wrapper .sign.c-1 .wrap-txt .icon {
  position: relative;
}
.route-wrapper .sign.c-1 .wrap-txt .icon .icon_tower {
  display: block;
  position: relative;
}
.route-wrapper .sign.c-1 .wrap-txt .icon .icon_tower img {
  height: 15px;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.2));
}
@media (max-width: 500px) {
  .route-wrapper .sign.c-1 .wrap-txt .icon .icon_tower img {
    height: 12px;
  }
}
.route-wrapper .sign.c-1 .wrap-txt .icon .icon_star {
  position: absolute;
  right: -3px;
  top: -4px;
}
@media (max-width: 500px) {
  .route-wrapper .sign.c-1 .wrap-txt .icon .icon_star {
    right: -3px;
  }
}
@media (min-width: 500px) and (max-width: 768px) {
  .route-wrapper .sign.c-1 .wrap-txt .icon .icon_star {
    right: -5px;
  }
}
.route-wrapper .sign.c-1 .wrap-txt .icon .icon_star img {
  height: 7px;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 0.5px 4px rgba(0, 0, 0, 0.6));
}
@media (max-width: 500px) {
  .route-wrapper .sign.c-1 .wrap-txt .icon .icon_star img {
    height: 7px;
  }
}
.route-wrapper .sign.c-2 {
  left: 43.81930391%;
  top: 36.75%;
  --X: 43.81930391%;
  --Y: 36.75%;
}
.route-wrapper .sign.c-2::after {
  width: 2px;
  height: 77px;
}
.route-wrapper .sign.c-2 .wrap-txt .sign-txt {
  bottom: calc(100% + 77px);
}
.route-wrapper .sign .wrap-txt {
  position: relative;
  z-index: 10;
}
.route-wrapper .sign .wrap-txt .sign-txt {
  position: absolute;
  bottom: calc(100% + 43px);
  left: 0;
  font-size: 8px;
  line-height: 8px;
  white-space: nowrap;
  text-align: center;
  background-color: white;
  border-radius: 15px;
  padding: 7px 18px;
  color: #EFAA39;
  transform: translateX(calc(-50% + 1px));
  max-width: 150px;
  width: auto;
  transition: all 0.3s linear 0.4s;
  overflow: hidden;
  box-shadow: 0px 2px 20px rgba(243, 204, 139, 0.8);
}
.route-wrapper .sign .wrap-txt .sign-txt.invert {
  color: white;
  background-color: #FAAF33;
  box-shadow: 0px 2px 12px rgba(243, 204, 139, 0.8);
}
.route-wrapper .orange-area {
  position: absolute;
  z-index: 1;
  left: 39.47082337%;
  top: 27.25%;
  --X: 39.47082337%;
  --Y: 27.25%;
  width: calc(350 / 1192.85 * 100%);
  height: calc(250 / 800 * 100%);
}
.vehicle-wrapper {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 100%;
  max-width: 1500px;
  max-height: 790px;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
.vehicle-wrapper .position-vehicle {
  position: relative;
}
.vehicle-wrapper .position-vehicle .car {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: left 0.3s linear 0s, top 0.3s linear 0s;
  transform: translate(0);
}
.vehicle-wrapper .position-vehicle .car:nth-child(1) {
  left: 19.40091318%;
  top: 63.125%;
  --X: 19.40091318%;
  --Y: 63.125%;
}
.vehicle-wrapper .position-vehicle .car:nth-child(2) {
  left: 39.13632486%;
  top: 25.375%;
  --X: 39.13632486%;
  --Y: 25.375%;
}
.vehicle-wrapper .position-vehicle .car:nth-child(3) {
  left: 45.57542105%;
  top: 39.625%;
  --X: 45.57542105%;
  --Y: 39.625%;
}
.vehicle-wrapper .position-vehicle .car img {
  width: 100%;
  height: 100%;
  display: none;
}
.vehicle-wrapper .position-vehicle .car.down-right .down-right,
.vehicle-wrapper .position-vehicle .car.down-left .down-left,
.vehicle-wrapper .position-vehicle .car.up-right .up-right,
.vehicle-wrapper .position-vehicle .car.up-left .up-left {
  display: block;
}
.vehicle-wrapper .position-vehicle .car.down-left,
.vehicle-wrapper .position-vehicle .car.up-left {
  z-index: 2;
}
.car-marker-wrapper {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 100%;
}
.car-marker-wrapper .position-marker {
  position: relative;
}
.panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}
.panel .txt-wrapper .title {
  padding-left: 35px;
  max-width: 1200px;
  height: 129px;
}
@media (max-width: 768px) {
  .panel .txt-wrapper .title {
    height: 115px;
  }
}
.panel .txt-wrapper .title img:first-child {
  left: 35px;
  height: 100%;
}
.panel .txt-wrapper .title img:nth-child(2) {
  left: 31px;
  height: 100%;
}
.txt-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 183px;
  width: 100%;
  height: 100%;
  z-index: 99;
  font-size: 20px;
  line-height: 26px;
  color: white;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease, color 0.8s ease;
}
.txt-wrapper .title {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.txt-wrapper .title img {
  position: absolute;
  top: 0;
  left: 0px;
  width: auto;
  height: auto;
}
.txt-wrapper .title img:nth-child(2) {
  z-index: -1;
  left: -3px;
}
.txt-wrapper .wrap-wrap {
  max-width: 225px;
}
.txt-wrapper .wrap-desc {
  position: relative;
  padding-top: 57.33333333%;
}
@media (max-width: 768px) {
  .txt-wrapper .wrap-desc {
    padding-top: 51.11111111%;
  }
}
.txt-wrapper .wrap-desc .desc {
  font-size: 16px;
  position: absolute;
  top: calc(100% + 17px);
  left: 0px;
  width: 100%;
  height: 100%;
  color: #4F5B60;
  transition: color 2.5s ease-out;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(1),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(1) {
  pointer-events: all;
  left: 50.5928986%;
  top: 44.125%;
  --X: 50.5928986%;
  --Y: 44.125%;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(1) .balloon-txt,
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(1) .balloon-txt {
  opacity: 1;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(2),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(2) {
  left: 54.43963138%;
  top: 47.875%;
  --X: 54.43963138%;
  --Y: 47.875%;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(3),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(3) {
  left: 48.58590758%;
  top: 52.5%;
  --X: 48.58590758%;
  --Y: 52.5%;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(4),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(4) {
  left: 47.74966132%;
  top: 40.375%;
  --X: 47.74966132%;
  --Y: 40.375%;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(5),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(5) {
  pointer-events: all;
  left: 51.51276948%;
  top: 37.5%;
  --X: 51.51276948%;
  --Y: 37.5%;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(5) .balloon-txt,
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(5) .balloon-txt {
  opacity: 1;
}
.zoomed .route-wrapper [data-land='orange'] .route:nth-child(6),
.hover-zoomed .route-wrapper [data-land='orange'] .route:nth-child(6) {
  left: 58.78811192%;
  top: 50.875%;
  --X: 58.78811192%;
  --Y: 50.875%;
}
.zoomed .sign.c-1,
.hover-zoomed .sign.c-1 {
  left: 40.39069425%;
  top: 56.875%;
  --X: 40.39069425%;
  --Y: 56.875%;
}
.zoomed .txt-wrapper {
  opacity: 0;
}
.btn-wrapper {
  position: absolute;
  bottom: 120px;
  left: auto;
  right: 30px;
  font-size: 0;
  z-index: 100;
}
@media (max-width: 1104px) {
  .btn-wrapper {
    bottom: 80px;
    right: 40px;
  }
}
.btn-wrapper button {
  border: 1px solid #4F4F4F;
  border-radius: 20px;
  background: transparent;
  margin-top: 10px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  transition: border-color 1.6s ease-out, opacity 0.4s ease;
}
.btn-wrapper button .icon {
  font-size: 14px;
  line-height: 14px;
  color: #4F4F4F;
  transition: color 1.6s ease-out;
}
.btn-wrapper button .icon.icon-dash {
  font-size: 16px;
  line-height: 16px;
}
.btn-wrapper button .icon.icon-home {
  font-size: 20px;
  line-height: 20px;
}
.btn-wrapper button.disabled {
  opacity: 0.3;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.violet-land #sys-6 .balloon-txt img {
  width: 55%;
}
.violet-land #sys-5 .balloon-txt {
  height: 100%;
}
.violet-land #sys-5 .balloon-txt picture {
  height: 100%;
}
.violet-land #sys-5 .balloon-txt img {
  top: 10px;
  width: 80%;
  height: 65%;
}
.violet-land #sys-4 .balloon-txt img {
  width: 60%;
}
.violet-land #sys-2 .balloon-txt img {
  width: 72%;
}
@media (min-width: 768px) and (max-width: 900px) {
  .route-wrapper .route {
    transform: scale(0.7) !important;
  }
}
@media (max-width: 1000px) {
  .route-wrapper .route {
    transform: scale(0.8);
  }
}
@media (min-width: 768px) and (max-height: 689px) {
  .txt-wrapper {
    padding-top: 95px;
    height: 100%;
  }
  .txt-wrapper .title img {
    height: calc(100% - 20px);
  }
  .txt-wrapper .wrap-desc .desc {
    top: 100%;
  }
}
@media (max-width: 767px) {
  .txt-wrapper {
    padding-top: 93px;
    height: 100%;
    left: 20px;
  }
  .txt-wrapper .title {
    padding-right: 40%;
    padding-left: unset !important;
  }
  .txt-wrapper .title img {
    height: 100%;
  }
  .txt-wrapper .title .wrap-desc {
    font-size: 17px;
  }
  .txt-wrapper .title img:first-child {
    left: 0px !important;
  }
  .txt-wrapper .title img:nth-child(2) {
    left: -3px !important;
  }
  .route-wrapper .sign {
    transform: scale(0.5);
    transform-origin: top left;
  }
  .route-wrapper .sign.c-1 {
    left: 44.73917479%;
    top: 52.875%;
    --X: 44.73917479%;
    --Y: 52.875%;
    width: 6px;
    height: 6px;
  }
  .route-wrapper .sign.c-1::before {
    width: 10px;
    height: 10px;
    top: -2px;
    left: -2px;
  }
  .route-wrapper .sign.c-1::after {
    width: 1px;
    height: 10px;
    left: calc(50% - 1px);
  }
  .route-wrapper .sign.c-1 .wrap-txt .sign-txt {
    padding: 2px 6px;
    font-size: 4px;
    line-height: 6px;
    bottom: calc(100% + 10px);
  }
  .route-wrapper .sign.c-1 .wrap-txt .icon {
    width: 10px;
    height: 12px;
    margin-bottom: 1px;
  }
  .route-wrapper .sign.c-2::after {
    width: 2px;
    height: 50px;
  }
  .route-wrapper .sign.c-2 .wrap-txt .sign-txt {
    bottom: calc(100% + 50px);
  }
  .route-wrapper .route {
    transform: scale(0.5);
  }
  .sky img.cloud.show-xs {
    top: auto;
    bottom: 0;
    height: 88vh;
  }
  .zoomed .route-wrapper .sign.c-1,
  .hover-zoomed .route-wrapper .sign.c-1 {
    left: 39.72169725%;
    top: 57.5%;
    --X: 39.72169725%;
    --Y: 57.5%;
  }
}
@media (max-width: 500px) {
  .route-wrapper .route {
    transform: scale(0.32);
  }
}