body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Noto Sans TC';
}

@media screen and (min-width: 768px) {
  body {
    margin-bottom: -30%;
  }
}

.body_fixed {
  overflow: hidden;
}

.lightBox {
  width: 100%;
  height: 100vh;
  position: fixed;
  background-color: rgba(12, 12, 12, 0.8);
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lightBox .lightBox_con {
  display: inline-block;
  background-color: #fff;
  width: 80%;
  max-width: 90%;
  position: relative;
  border-radius: 24.5px;
  padding: 40px 20px;
}

@media screen and (min-width: 768px) {
  .lightBox .lightBox_con {
    width: 25%;
    min-width: 300px;
    position: relative;
    border-radius: 24.5px;
    padding: 50px;
  }
}

.lightBox .lightBox_con h3 {
  color: #068967;
  font-size: 27px;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .lightBox .lightBox_con h3 {
    font-size: 33px;
  }
}

.lightBox .lightBox_con p {
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  margin: 5px 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .lightBox .lightBox_con p {
    font-size: 17px;
  }
}

.lightBox .lightBox_con .btn {
  display: inline-block;
  margin-top: 30px;
  text-align: center;
  width: 100%;
}

.lightBox .lightBox_con .btn a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24.5px;
  background-color: #068967;
  text-decoration: none;
}

.lightBox .lightBox_con .btn a:hover {
  background-color: #0aa47d;
}

.lightBox .lightBox_con .close {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 25px;
  cursor: pointer;
}

.lightBox .lightBox_con .close img {
  width: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.lightBox .lightBox_con .close:hover img {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.version_pc {
  display: none;
}

@media screen and (min-width: 768px) {
  .version_pc {
    display: block;
  }
}

.version_mb {
  display: block;
}

@media screen and (min-width: 768px) {
  .version_mb {
    display: none;
  }
}

.menu {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding: 50px 0;
}

@media screen and (min-width: 768px) {
  .menu {
    padding: 0;
  }
}

.section1 {
  position: relative;
  overflow: hidden;
  background-color: #e1fdff;
  width: 100%;
  z-index: 3;
}

.section1 .section1_con {
  width: 100%;
  position: relative;
  height: 100vh;
}

@media screen and (min-width: 768px) {
  .section1 .section1_con {
    padding: 0;
    height: 100%;
  }
}

.section1 .cloud {
  position: absolute;
  width: 7%;
  top: 8.2%;
  left: 7.2%;
  -webkit-animation: section1_cloud linear 90s infinite alternate;
          animation: section1_cloud linear 90s infinite alternate;
}

@-webkit-keyframes section1_cloud {
  0% {
    left: 7.2%;
    top: 8.2%;
  }
  100% {
    left: 100.2%;
    top: 10.2%;
  }
}

@keyframes section1_cloud {
  0% {
    left: 7.2%;
    top: 8.2%;
  }
  100% {
    left: 100.2%;
    top: 10.2%;
  }
}

.section1 .cloud_2 {
  position: absolute;
  width: 7%;
  top: 7.8%;
  left: 4%;
  -webkit-animation: section1_cloud2 linear 100s infinite alternate;
          animation: section1_cloud2 linear 100s infinite alternate;
}

@-webkit-keyframes section1_cloud2 {
  0% {
    top: 7.8%;
    left: 4%;
  }
  100% {
    top: 10%;
    left: 100%;
  }
}

@keyframes section1_cloud2 {
  0% {
    top: 7.8%;
    left: 4%;
  }
  100% {
    top: 10%;
    left: 100%;
  }
}

.section1 .kv_1 {
  width: 100%;
  height: 100%;
}

.section1 .kv_0 {
  position: absolute;
  width: 100%;
  height: 95%;
  top: 0;
  left: 0;
  opacity: 0;
}

.on_the_path {
  background-color: #a19c9b;
  height: 35%;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .on_the_path {
    background-color: #a19c9b;
    height: 42%;
    position: absolute;
    top: 53%;
    left: 0;
    width: 100%;
  }
}

.house_right {
  position: absolute;
  left: 81vw;
  bottom: 38vh;
  width: 25vw;
}

@media screen and (min-width: 768px) {
  .house_right {
    position: absolute;
    left: 51vw;
    top: 25.3%;
    width: 16vw;
  }
}

.trafficcenter {
  position: absolute;
  left: 4.5vw;
  bottom: 35vh;
  width: 59%;
}

@media screen and (min-width: 768px) {
  .trafficcenter {
    position: absolute;
    left: 11.5vw;
    top: 17.1%;
    width: 34%;
  }
}

.walkingplace {
  position: absolute;
  left: -221.3%;
  top: 78.5%;
  width: 300%;
}

@media screen and (min-width: 768px) {
  .walkingplace {
    position: absolute;
    left: -93.3%;
    top: 65.5%;
    width: 180%;
  }
}

.trafficlight {
  position: absolute;
  left: 66.5%;
  bottom: 19.2vh;
  width: 30.5%;
}

@media screen and (min-width: 768px) {
  .trafficlight {
    position: absolute;
    left: 80.5%;
    top: 31.2%;
    width: 15.5%;
  }
}

.car_white {
  position: absolute;
  left: 44.3%;
  bottom: 29vh;
  width: 39%;
  -webkit-animation: car_white_mm 1 5s backwards ease;
          animation: car_white_mm 1 5s backwards ease;
}

@-webkit-keyframes car_white_mm {
  0% {
    left: 100.3%;
  }
  100% {
    left: 44.3%;
  }
}

@keyframes car_white_mm {
  0% {
    left: 100.3%;
  }
  100% {
    left: 44.3%;
  }
}

@media screen and (min-width: 768px) {
  .car_white {
    position: absolute;
    left: 50.3%;
    top: 46.2%;
    width: 21%;
    -webkit-animation: car_white 1 5s backwards ease;
            animation: car_white 1 5s backwards ease;
  }
  @-webkit-keyframes car_white {
    0% {
      left: 100.3%;
    }
    100% {
      left: 50.3%;
    }
  }
  @keyframes car_white {
    0% {
      left: 100.3%;
    }
    100% {
      left: 50.3%;
    }
  }
}

.zebracrossing1 {
  position: absolute;
  left: 24.2vw;
  top: 86.1%;
  width: 59vw;
}

@media screen and (min-width: 768px) {
  .zebracrossing1 {
    position: absolute;
    left: 62.2vw;
    top: 76.1%;
    width: 26vw;
  }
}

.fan {
  display: none;
}

@media screen and (min-width: 768px) {
  .fan {
    display: block;
    position: absolute;
    left: 90%;
    top: 24.5%;
    width: 12vw;
  }
}

.zebracrossing2 {
  position: absolute;
  left: 86vw;
  bottom: 31.8%;
  width: 9vw;
}

@media screen and (min-width: 768px) {
  .zebracrossing2 {
    position: absolute;
    left: 73vw;
    top: 57.5%;
    width: 9vw;
  }
}

.walkingborder1 {
  position: absolute;
  left: 0;
  bottom: 30.5vh;
  width: 100vw;
  height: 0.7vh;
}

@media screen and (min-width: 768px) {
  .walkingborder1 {
    position: absolute;
    left: 0;
    top: 55.3%;
    width: 100vw;
    height: 1.5vh;
  }
}

.walkingborder2 {
  position: absolute;
  left: 0;
  bottom: 34.5vh;
  width: 100vw;
  height: 0.5vh;
}

@media screen and (min-width: 768px) {
  .walkingborder2 {
    position: absolute;
    left: 0;
    top: 52.5%;
    width: 100vw;
    height: 0.7vh;
  }
}

.walkingborder3 {
  position: absolute;
  bottom: 0vh;
  width: 300%;
  border-radius: 0 110px;
}

@media screen and (min-width: 768px) {
  .walkingborder3 {
    position: absolute;
    left: -129%;
    top: 92.4%;
    width: 220vw;
    border-radius: 0 110px;
  }
}

.slogan {
  position: absolute;
  left: 0;
  bottom: 62vh;
  width: 75%;
}

@media screen and (min-width: 768px) {
  .slogan {
    position: absolute;
    left: 48%;
    top: -7%;
    width: 39%;
  }
}

@media screen and (min-width: 768px) {
  .trees_2 {
    position: absolute;
    left: 73.1%;
    top: 31.2%;
    width: 17.5%;
  }
}

.trees_3 {
  position: absolute;
  left: 64.1%;
  bottom: 35%;
  width: 14%;
}

@media screen and (min-width: 768px) {
  .trees_3 {
    position: absolute;
    left: 65.1%;
    top: 35.6%;
    width: 11%;
  }
}

.motobike {
  position: absolute;
  left: 34.1%;
  bottom: 24.6%;
  width: 17%;
  -webkit-animation: motobike_mm linear 5s 1s infinite backwards;
          animation: motobike_mm linear 5s 1s infinite backwards;
}

@-webkit-keyframes motobike_mm {
  0% {
    left: 150.1%;
  }
  100% {
    left: -150.1%;
  }
}

@keyframes motobike_mm {
  0% {
    left: 150.1%;
  }
  100% {
    left: -150.1%;
  }
}

@media screen and (min-width: 768px) {
  .motobike {
    position: absolute;
    left: 89.1%;
    top: 48.6%;
    width: 10%;
    -webkit-animation: motobike linear 5s 1s infinite backwards;
            animation: motobike linear 5s 1s infinite backwards;
  }
  @-webkit-keyframes motobike {
    0% {
      left: 120%;
    }
    100% {
      left: -10%;
    }
  }
  @keyframes motobike {
    0% {
      left: 120%;
    }
    100% {
      left: -10%;
    }
  }
}

.taxi {
  position: absolute;
  left: 48.1%;
  width: 80%;
  z-index: 10;
  bottom: 4vh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: taxi_mm alternate linear 0.15s 3s infinite, taxi_mm_move linear 1.2s 1.5s 1 backwards;
          animation: taxi_mm alternate linear 0.15s 3s infinite, taxi_mm_move linear 1.2s 1.5s 1 backwards;
}

@-webkit-keyframes taxi_mm {
  0% {
    bottom: 4vh;
  }
  100% {
    bottom: 4.2vh;
  }
}

@keyframes taxi_mm {
  0% {
    bottom: 4vh;
  }
  100% {
    bottom: 4.2vh;
  }
}

@-webkit-keyframes taxi_mm_move {
  0% {
    left: 250.1%;
  }
  100% {
    left: 48.1%;
  }
}

@keyframes taxi_mm_move {
  0% {
    left: 250.1%;
  }
  100% {
    left: 48.1%;
  }
}

@media screen and (min-width: 768px) {
  .taxi {
    position: absolute;
    left: 35.1%;
    top: 64.6%;
    width: 29%;
    z-index: 10;
    -webkit-animation: taxi alternate linear 0.15s infinite;
            animation: taxi alternate linear 0.15s infinite;
  }
  @-webkit-keyframes taxi {
    0% {
      top: 64.6%;
    }
    100% {
      top: 64.7%;
    }
  }
  @keyframes taxi {
    0% {
      top: 64.6%;
    }
    100% {
      top: 64.7%;
    }
  }
}

.autobus {
  position: absolute;
  left: -97.5%;
  bottom: 10vh;
  width: 135%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: autobus_mm alternate linear 0.15s 2.2s infinite, autobus_mm_move linear 2s 1 backwards;
          animation: autobus_mm alternate linear 0.15s 2.2s infinite, autobus_mm_move linear 2s 1 backwards;
}

@-webkit-keyframes autobus_mm {
  0% {
    bottom: 10vh;
  }
  100% {
    bottom: 10.2vh;
  }
}

@keyframes autobus_mm {
  0% {
    bottom: 10vh;
  }
  100% {
    bottom: 10.2vh;
  }
}

@-webkit-keyframes autobus_mm_move {
  0% {
    left: -150.5%;
  }
  100% {
    left: -97.5%;
  }
}

@keyframes autobus_mm_move {
  0% {
    left: -150.5%;
  }
  100% {
    left: -97.5%;
  }
}

@media screen and (min-width: 768px) {
  .autobus {
    position: absolute;
    left: -39.5%;
    top: 44%;
    width: 60%;
    -webkit-animation: autobus alternate linear 0.15s infinite;
            animation: autobus alternate linear 0.15s infinite;
  }
  @-webkit-keyframes autobus {
    0% {
      top: 44%;
    }
    100% {
      top: 44.1%;
    }
  }
  @keyframes autobus {
    0% {
      top: 44%;
    }
    100% {
      top: 44.1%;
    }
  }
}

.grass {
  position: absolute;
  left: -54%;
  bottom: 34.9vh;
  width: 250%;
}

@media screen and (min-width: 768px) {
  .grass {
    position: absolute;
    left: -50%;
    top: 43%;
    width: 150%;
  }
}

.parkingmeter1 {
  position: absolute;
  left: 25.1%;
  top: 49.6%;
  width: 0.9%;
}

.parkingmeter2 {
  position: absolute;
  left: 40.9%;
  top: 63.7%;
  width: 2.5%;
}

@media screen and (min-width: 768px) {
  .parkingmeter2 {
    position: absolute;
    left: 48.9%;
    top: 49.7%;
    width: 0.9%;
  }
}

.parkingmeter3 {
  position: absolute;
  left: 72%;
  top: 49.7%;
  width: 0.9%;
}

.parkinglot {
  position: absolute;
  left: 40.9%;
  bottom: 28.56%;
  width: 120%;
}

@media screen and (min-width: 768px) {
  .parkinglot {
    position: absolute;
    left: 3.5%;
    top: 57.9%;
    width: 70%;
  }
}

.busstop {
  position: absolute;
  left: -15%;
  top: 40.9%;
  width: 25%;
}

.trees_left {
  position: absolute;
  left: -3%;
  bottom: 38vh;
  width: 9%;
}

@media screen and (min-width: 768px) {
  .trees_left {
    position: absolute;
    left: 5%;
    top: 39.9%;
    width: 10%;
  }
}

.hint {
  cursor: pointer;
}

.hint1 {
  position: absolute;
  left: 78.8%;
  bottom: 22.9%;
  width: 11%;
  -webkit-animation: hint1_mm alternate linear 1s infinite;
          animation: hint1_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint1_mm {
  0% {
    bottom: 22.9%;
  }
  100% {
    bottom: 23.9%;
  }
}

@keyframes hint1_mm {
  0% {
    bottom: 22.9%;
  }
  100% {
    bottom: 23.9%;
  }
}

@media screen and (min-width: 768px) {
  .hint1 {
    position: absolute;
    left: 45.8%;
    top: 53.9%;
    width: 4%;
    -webkit-animation: hint1 alternate linear 1s infinite;
            animation: hint1 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint1 {
    0% {
      top: 53.9%;
    }
    100% {
      top: 52.9%;
    }
  }
  @keyframes hint1 {
    0% {
      top: 53.9%;
    }
    100% {
      top: 52.9%;
    }
  }
}

.hint2 {
  position: absolute;
  left: 36.8%;
  bottom: 37.9%;
  width: 11%;
  -webkit-animation: hint2_mm alternate linear 1s infinite;
          animation: hint2_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint2_mm {
  0% {
    bottom: 37.9%;
  }
  100% {
    bottom: 38.9%;
  }
}

@keyframes hint2_mm {
  0% {
    bottom: 37.9%;
  }
  100% {
    bottom: 38.9%;
  }
}

@media screen and (min-width: 768px) {
  .hint2 {
    position: absolute;
    left: 47.3%;
    top: 38.9%;
    width: 4%;
    -webkit-animation: hint2 alternate linear 1s infinite;
            animation: hint2 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint2 {
    0% {
      top: 38.9%;
    }
    100% {
      top: 37.9%;
    }
  }
  @keyframes hint2 {
    0% {
      top: 38.9%;
    }
    100% {
      top: 37.9%;
    }
  }
}

.hint3 {
  position: absolute;
  left: 49.4%;
  bottom: 53.9%;
  width: 11%;
  -webkit-animation: hint3_mm alternate linear 1s infinite;
          animation: hint3_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint3_mm {
  0% {
    bottom: 53.9%;
  }
  100% {
    bottom: 54.9%;
  }
}

@keyframes hint3_mm {
  0% {
    bottom: 53.9%;
  }
  100% {
    bottom: 54.9%;
  }
}

@media screen and (min-width: 768px) {
  .hint3 {
    position: absolute;
    left: 39%;
    top: 8%;
    width: 4%;
    -webkit-animation: hint3 alternate linear 1s infinite;
            animation: hint3 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint3 {
    0% {
      top: 8%;
    }
    100% {
      top: 7%;
    }
  }
  @keyframes hint3 {
    0% {
      top: 8%;
    }
    100% {
      top: 7%;
    }
  }
}

.hint4 {
  position: absolute;
  left: 49.5%;
  bottom: 32.8%;
  width: 11%;
  -webkit-animation: hint4_mm alternate linear 1s infinite;
          animation: hint4_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint4_mm {
  0% {
    bottom: 32.8%;
  }
  100% {
    bottom: 33.8%;
  }
}

@keyframes hint4_mm {
  0% {
    bottom: 32.8%;
  }
  100% {
    bottom: 33.8%;
  }
}

@media screen and (min-width: 768px) {
  .hint4 {
    position: absolute;
    left: 25.5%;
    top: 35.8%;
    width: 4%;
    -webkit-animation: hint4 alternate linear 1s infinite;
            animation: hint4 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint4 {
    0% {
      top: 35.8%;
    }
    100% {
      top: 34.8%;
    }
  }
  @keyframes hint4 {
    0% {
      top: 35.8%;
    }
    100% {
      top: 34.8%;
    }
  }
}

.hint5 {
  position: absolute;
  left: 16%;
  bottom: 36.9%;
  width: 11%;
  -webkit-animation: hint5_mm alternate linear 1s infinite;
          animation: hint5_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint5_mm {
  0% {
    bottom: 36.9%;
  }
  100% {
    bottom: 37.9%;
  }
}

@keyframes hint5_mm {
  0% {
    bottom: 36.9%;
  }
  100% {
    bottom: 37.9%;
  }
}

@media screen and (min-width: 768px) {
  .hint5 {
    position: absolute;
    left: 5%;
    top: 30.9%;
    width: 4%;
    -webkit-animation: hint5 alternate linear 1s infinite;
            animation: hint5 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint5 {
    0% {
      top: 30.9%;
    }
    100% {
      top: 29.9%;
    }
  }
  @keyframes hint5 {
    0% {
      top: 30.9%;
    }
    100% {
      top: 29.9%;
    }
  }
}

.hint6 {
  position: absolute;
  left: 83.5%;
  bottom: 44.9%;
  width: 11%;
  -webkit-animation: hint6_mm alternate linear 1s infinite;
          animation: hint6_mm alternate linear 1s infinite;
}

@-webkit-keyframes hint6_mm {
  0% {
    bottom: 44.9%;
  }
  100% {
    bottom: 45.9%;
  }
}

@keyframes hint6_mm {
  0% {
    bottom: 44.9%;
  }
  100% {
    bottom: 45.9%;
  }
}

@media screen and (min-width: 768px) {
  .hint6 {
    position: absolute;
    left: 90%;
    top: 20%;
    width: 4%;
    -webkit-animation: hint6 alternate linear 1s infinite;
            animation: hint6 alternate linear 1s infinite;
  }
  @-webkit-keyframes hint6 {
    0% {
      top: 20%;
    }
    100% {
      top: 19%;
    }
  }
  @keyframes hint6 {
    0% {
      top: 20%;
    }
    100% {
      top: 19%;
    }
  }
}

.version_mb .goDown {
  position: absolute;
  left: 50%;
  translate: 0.5s;
  -webkit-transform: translateX(-50%) rotate(180deg);
          transform: translateX(-50%) rotate(180deg);
  bottom: 30px;
  width: 50px;
  z-index: 11;
  -webkit-animation: goDown alternate linear infinite 1s;
          animation: goDown alternate linear infinite 1s;
}

@media screen and (max-width: 768px) {
  @-webkit-keyframes goDown {
    0% {
      bottom: 30px;
    }
    100% {
      bottom: 40px;
    }
  }
  @keyframes goDown {
    0% {
      bottom: 30px;
    }
    100% {
      bottom: 40px;
    }
  }
}

.manwithphone {
  position: absolute;
  left: 51%;
  bottom: 19.5vh;
  width: 7.4%;
}

@media screen and (min-width: 768px) {
  .manwithphone {
    position: absolute;
    left: 25%;
    top: 46.5%;
    width: 4.4%;
  }
}

.mom {
  position: absolute;
  left: 29.5%;
  top: 47%;
  width: 4%;
}

.boy {
  position: absolute;
  left: 33.8%;
  top: 51.4%;
  width: 3%;
}

.people {
  position: absolute;
  left: 46%;
  top: 45.3%;
  width: 2.9%;
}

.people2 {
  position: absolute;
  left: 42.2%;
  bottom: 31.4%;
  width: 4%;
}

@media screen and (min-width: 768px) {
  .people2 {
    position: absolute;
    left: 86.2%;
    top: 45.4%;
    width: 1.8%;
  }
}

.manwithbike {
  position: absolute;
  left: 12.8%;
  bottom: 34.4%;
  width: 7.1%;
}

@media screen and (min-width: 768px) {
  .manwithbike {
    position: absolute;
    left: 41.8%;
    top: 47.4%;
    width: 3.1%;
  }
}

.goDown {
  position: absolute;
  width: 4%;
  bottom: 10%;
  right: 4%;
  cursor: pointer;
  -webkit-animation: goDown alternate linear infinite 1s;
          animation: goDown alternate linear infinite 1s;
}

@media screen and (min-width: 768px) {
  @-webkit-keyframes goDown {
    0% {
      bottom: 10%;
    }
    100% {
      bottom: 12%;
    }
  }
  @keyframes goDown {
    0% {
      bottom: 10%;
    }
    100% {
      bottom: 12%;
    }
  }
}

.roadgroup_part1 {
  position: absolute;
  width: 13%;
  bottom: -3%;
  right: 2.5%;
}

.section2 {
  background-color: #e1fdff;
}

@media screen and (min-width: 768px) {
  .section2 {
    overflow-y: hidden;
  }
}

.section2 .kv_1 {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.section2_con {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: 50px 20px;
  height: calc(95vh);
  background-color: #e1fdff;
  z-index: 2;
  overflow-x: hidden;
}

@media screen and (min-width: 768px) {
  .section2_con {
    padding: 0;
    z-index: 0;
    height: auto;
    overflow-x: visible;
    height: auto;
  }
}

.section2_con .videoBox .content {
  height: auto;
}

.section2_con .section2_inner {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .section2_con .section2_inner {
    position: absolute;
    width: 50%;
    z-index: 1000;
    /* margin-top: -20%; */
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 768px) {
  .section2_con .section2_inner {
    width: 35%;
    /* margin-top: -20%; */
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.section2_con .section2_inner p {
  font-size: 14px;
  font-weight: 400;
  text-align: justify;
}

.section2_con .section2_inner h2 {
  text-align: center;
  color: #068967;
  font-size: 24px;
  line-height: 30.6px;
  letter-spacing: 2.48px;
  padding: 0;
  margin: 15px 0 5px;
}

@media screen and (min-width: 768px) {
  .section2_con .section2_inner h2 {
    text-align: center;
    color: #068967;
    font-size: 33px;
    line-height: 39.6px;
    letter-spacing: 2.48px;
    padding: 0;
    margin: 30px 0 12px;
  }
}

.section2_con .roadgroup {
  position: absolute;
  top: -20.4%;
  width: 95%;
  right: 2.5%;
}

.section2_con .speed50 {
  position: absolute;
  width: 1.8%;
  right: 69.3%;
  top: 74.2%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.section2_con .slow2 {
  position: absolute;
  width: 1.5%;
  right: 7.3%;
  top: 41%;
}

.section2_con .house_video {
  position: absolute;
  width: 12%;
  right: 12.3%;
  top: 38.2%;
}

.section2_con .section2_walkingborder2 {
  position: absolute;
  width: 77.2%;
  right: 11.2%;
  top: 65.3%;
  height: 0.5%;
}

.section2_con .section2_slow1 {
  position: absolute;
  width: 9%;
  right: 69.3%;
  top: 67.5%;
}

.section2_con .section2_zibracrossing {
  position: absolute;
  width: 10%;
  right: 78.5%;
  top: 67%;
}

.section2_con .section2_trees_left_2 {
  position: absolute;
  width: 7%;
  right: 78.5%;
  top: 56%;
}

.section2_con .section2_tree_right {
  position: absolute;
  width: 5.5%;
  right: 22.5%;
  top: 55.2%;
}

.section2_con .section2_family {
  position: absolute;
  width: 1.5%;
  right: 76.5%;
  top: 60%;
}

.section2_con .section2_sign {
  position: absolute;
  width: 1.7%;
  right: 73.5%;
  top: 59.6%;
}

.section2_con .section2_car_black {
  position: absolute;
  width: 11.7%;
  right: 24.5%;
  top: 62.8%;
}

.videoout {
  margin: auto;
  text-align: center;
  position: relative;
  border: 7px solid #8adbeb;
}

.videoout .video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  /* overflow: hidden; */
}

.videoout .video-container iframe,
.videoout .video-container object,
.videoout .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.goTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  color: #3c3c35;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .goTop {
    width: 40px;
  }
}

@media screen and (min-width: 1500px) {
  .goTop {
    width: 50px;
  }
}

.goTop p {
  font-size: 18px;
  margin-bottom: 5px;
  text-align: center;
  font-weight: 300;
}

@media screen and (min-width: 768px) {
  .goTop p {
    font-size: 18px;
  }
}

@media screen and (min-width: 1500px) {
  .goTop p {
    font-size: 22px;
  }
}

.goTop img {
  width: 100%;
}

.road_2 {
  position: absolute;
  width: 100%;
  left: 40%;
}

.section2 .road_2 {
  position: absolute;
  bottom: 0vh;
  z-index: 0;
  left: 0%;
  width: 100%;
  height: 13vh;
}

.section2 .road_mb {
  position: absolute;
  bottom: 0vh;
  z-index: 0;
  left: -230%;
  width: 450%;
}

.section2 .sign {
  position: absolute;
  bottom: 0vh;
  z-index: 0;
  left: 2%;
  width: 19%;
}

.section2 .grass {
  position: absolute;
  bottom: 17vh;
  z-index: -1;
  left: -3%;
  width: 120%;
  height: 15vh;
}

.section2 .trees_2 {
  position: absolute;
  bottom: 31vh;
  z-index: -1;
  left: -6%;
  width: 20%;
}

.section2 .car_black_mb {
  position: absolute;
  bottom: 4vh;
  z-index: 0;
  left: -32%;
  width: 84%;
  -webkit-animation: car_black_mb 5s infinite linear backwards;
          animation: car_black_mb 5s infinite linear backwards;
}

@-webkit-keyframes car_black_mb {
  0% {
    left: -102%;
  }
  40% {
    left: 102%;
  }
  100% {
    left: 102%;
  }
}

@keyframes car_black_mb {
  0% {
    left: -102%;
  }
  40% {
    left: 102%;
  }
  100% {
    left: 102%;
  }
}

.section2 .chair {
  position: absolute;
  bottom: 18vh;
  z-index: 0;
  left: 72%;
  width: 28%;
}

.section2 .family {
  position: absolute;
  bottom: 17vh;
  z-index: 0;
  left: 80%;
  width: 12%;
}

.blank {
  width: 100%;
  position: absolute;
  top: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #42b0ce;
}

.blank img {
  width: 25%;
}

.blank p {
  color: #fff;
  font-size: 30px !important;
  margin: 5px;
  padding: 0;
  line-height: 40px;
  letter-spacing: 1px;
}

@media screen and (max-width: 769px) {
  .videoBox {
    margin-top: 20%;
  }
}

.section3_con {
  position: relative;
  overflow-x: hidden;
  z-index: 0;
}

@media screen and (min-width: 769px) {
  .section3_con {
    overflow-x: visible;
  }
}

.section3_con .section3_box {
  width: 400vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  position: relative;
}

@media screen and (min-width: 769px) {
  .section3_con .section3_box {
    display: none;
  }
}

.section3_con .section3_moveBox {
  position: absolute;
  left: 0;
  width: 400vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  height: calc(100vh);
  top: 0;
}

.section3_con .section3_inner {
  width: 100vw;
  height: calc(90vh);
  padding: 50px 10px;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 360px) {
  .section3_con .section3_inner {
    height: calc(80vh);
  }
}

@media screen and (min-width: 400px) {
  .section3_con .section3_inner {
    height: calc(70vh);
  }
}

@media screen and (min-width: 769px) {
  .section3_con .section3_inner {
    height: calc(100vh);
  }
}

.section3_con .section3_inner h2 {
  text-align: center;
  color: #068967;
  font-size: 24px;
  line-height: 31.6px;
  letter-spacing: 2.48px;
  padding: 0;
  width: 85%;
  margin: 15px auto 5px;
}

@media screen and (min-width: 768px) {
  .section3_con .section3_inner h2 {
    text-align: center;
    color: #068967;
    font-size: 33px;
    line-height: 39.6px;
    letter-spacing: 2.48px;
    padding: 0;
    margin: 20px 0 15px;
  }
}

.section3_con .section3_inner .btn {
  background-color: #048967;
  padding: 10px 35px;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.section3_con .section3_inner .btn a {
  text-decoration: none;
  color: #fff;
}

.section3_con .section3_inner .btn:hover {
  background-color: #0aa47d;
}

.section3_con .section3_inner p {
  line-height: 25px;
  font-weight: 400;
  text-align: justify;
  margin: 10px auto 10px;
  width: 70%;
  font-size: 15px;
}

@media screen and (min-width: 769px) {
  .section3_con .section3_inner p {
    width: 75%;
  }
}

.section3_con .kv_1 {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.section3_con .roadgroup_2 {
  position: absolute;
  top: -21%;
  width: 95%;
  right: 2.5%;
}

.section3_con .backbg {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}

.section3_con .frontbg_left {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}

.section3_con .frontbg_right {
  position: absolute;
  right: 0;
  width: 100%;
  bottom: 0;
}

.section3_con .section3_taxi_mb {
  position: absolute;
  right: 3%;
  width: 10%;
  bottom: 18.3vh;
}

.section3_con .autobus_mb {
  position: absolute;
  right: 0;
  width: 20%;
  bottom: 16vh;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: autobus_mb 10s infinite linear backwards;
          animation: autobus_mb 10s infinite linear backwards;
}

@-webkit-keyframes autobus_mb {
  0% {
    right: -20%;
  }
  100% {
    right: 102%;
  }
}

@keyframes autobus_mb {
  0% {
    right: -20%;
  }
  100% {
    right: 102%;
  }
}

.section3_con .section3_zibracrossing1 {
  position: absolute;
  width: 6%;
  right: 90.95%;
  top: -17.9%;
}

.section3_con .section3_slow2_2 {
  position: absolute;
  width: 1.5%;
  right: 91.15%;
  top: 10%;
}

.section3_con .section3_articleobject1 {
  position: absolute;
  width: 33%;
  right: 51.06%;
  top: 14.5%;
}

.section3_con .section3_grass {
  position: absolute;
  width: 80%;
  right: 13.06%;
  top: 43.8%;
}

.section3_con .section3_house_article1 {
  position: absolute;
  width: 12%;
  right: 30%;
  top: 31.1%;
}

.section3_con .section3_articleobject12 {
  position: absolute;
  width: 31%;
  right: 16%;
  top: 42.6%;
}

.section3_con .section3_walkingborder2 {
  position: absolute;
  width: 78%;
  right: 11%;
  top: 49.2%;
  height: 0.5%;
}

.section3_con .section3_speed30 {
  position: absolute;
  width: 1.5%;
  right: 80.5%;
  top: 51.2%;
}

.section3_con .section3_slow1 {
  position: absolute;
  width: 8%;
  right: 31.5%;
  top: 58.2%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.section3_con .section3_zibracrossing2 {
  position: absolute;
  width: 14%;
  right: 12.6%;
  top: 50.8%;
}

.section3_con .section3_car_article1_green {
  position: absolute;
  width: 8%;
  right: 72.2%;
  top: 53.5%;
}

.section3_con .section3_trees_left {
  position: absolute;
  width: 7%;
  right: 48.2%;
  top: 35.9%;
}

.section3_con .section3_trees_right {
  position: absolute;
  width: 5%;
  right: 40.2%;
  top: 39.9%;
}

.section3_pc_box {
  position: absolute;
  width: 100%;
  top: -19%;
  display: none;
  max-width: 700px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
  .section3_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 700px;
  }
}

@media screen and (min-width: 1000px) {
  .section3_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 800px;
    top: -24%;
  }
}

@media screen and (min-width: 1300px) {
  .section3_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1000px;
    top: -19%;
  }
}

@media screen and (min-width: 1500px) {
  .section3_pc_box {
    max-width: 1200px;
  }
}

.section3_pc_box .section3_pc_inner {
  padding: 50px 50px;
  text-align: left;
  position: relative;
  z-index: 1;
  width: 50%;
}

@media screen and (min-width: 1000px) {
  .section3_pc_box .section3_pc_inner {
    padding: 50px 30px;
  }
}

@media screen and (min-width: 1300px) {
  .section3_pc_box .section3_pc_inner {
    padding: 50px 50px;
  }
}

@media screen and (min-width: 1500px) {
  .section3_pc_box .section3_pc_inner {
    padding: 50px 30px;
  }
}

.section3_pc_box .section3_pc_inner h2 {
  text-align: left;
  color: #068967;
  font-size: 24px;
  line-height: 30.6px;
  letter-spacing: 2.48px;
  padding: 0;
  width: 100%;
  margin: 15px auto 5px;
}

@media screen and (min-width: 768px) {
  .section3_pc_box .section3_pc_inner h2 {
    text-align: left;
    color: #068967;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 2.48px;
    padding: 0;
    margin: 20px 0 15px;
  }
}

@media screen and (min-width: 1300px) {
  .section3_pc_box .section3_pc_inner h2 {
    font-size: 26px;
    line-height: 38px;
  }
}

@media screen and (min-width: 1500px) {
  .section3_pc_box .section3_pc_inner h2 {
    font-size: 28px;
  }
}

.section3_pc_box .section3_pc_inner .btn {
  background-color: #048967;
  padding: 10px 35px;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.section3_pc_box .section3_pc_inner .btn a {
  text-decoration: none;
  color: #fff;
}

.section3_pc_box .section3_pc_inner .btn:hover {
  background-color: #0aa47d;
}

.section3_pc_box .section3_pc_inner p {
  line-height: 25px;
  font-weight: 400;
  width: 90%;
  text-align: justify;
  font-size: 15px;
  display: none;
}

@media screen and (min-width: 1200px) {
  .section3_pc_box .section3_pc_inner p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.arrow_next {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.arrow_prev {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

.cloud_3 {
  position: fixed;
  top: 5%;
  z-index: 0;
  left: 5%;
  width: 80%;
}

@media screen and (min-width: 768px) {
  .cloud_3 {
    -webkit-animation: section1_cloud_3 linear 90s infinite alternate;
            animation: section1_cloud_3 linear 90s infinite alternate;
  }
  @-webkit-keyframes section1_cloud_3 {
    0% {
      left: 7.2%;
      top: 8.2%;
      width: 80%;
    }
    100% {
      left: 100.2%;
      top: 10.2%;
      width: 100%;
    }
  }
  @keyframes section1_cloud_3 {
    0% {
      left: 7.2%;
      top: 8.2%;
      width: 80%;
    }
    100% {
      left: 100.2%;
      top: 10.2%;
      width: 100%;
    }
  }
}

.section4_con {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: 0%;
}

@media screen and (min-width: 768px) {
  .section4_con {
    margin-bottom: -28.8%;
  }
}

.section4_con .roadgroup_3 {
  position: absolute;
  top: -33%;
  width: 95%;
  z-index: 0;
  right: 2.5%;
}

.section4_con .roadgroup_part2 {
  position: absolute;
  width: 21%;
  bottom: 51.1%;
  left: -17%;
}

.section4_con .section4_grass_3 {
  width: 90%;
  position: absolute;
  top: 24%;
  right: 8%;
}

.section4_con .section4_house_left {
  width: 18%;
  position: absolute;
  top: -3.7%;
  right: 86%;
}

@media screen and (min-width: 1300px) {
  .section4_con .section4_house_left {
    width: 18%;
    position: absolute;
    top: -3.7%;
    right: 82%;
  }
}

.section4_con .section4_zibracrossing1_2 {
  width: 15%;
  position: absolute;
  top: 36.5%;
  right: 48%;
}

.section4_con .section4_stop {
  width: 6%;
  position: absolute;
  top: 38%;
  right: 35%;
}

.section4_con .section4_sign {
  width: 2%;
  position: absolute;
  top: 28.8%;
  right: 76%;
}

.section4_con .section4_house_right {
  width: 12%;
  position: absolute;
  top: 15.7%;
  right: 44%;
}

.section4_con .section4_articleobject3 {
  width: 25%;
  position: absolute;
  top: 25.7%;
  right: 20%;
}

.section4_con .section4_sittinggirl {
  width: 2.4%;
  position: absolute;
  top: 28.3%;
  right: 57%;
}

.section4_con .section4_tree_right {
  width: 10%;
  position: absolute;
  top: 22.25%;
  right: 11.5%;
}

.section4_con .section4_walkingborder1 {
  width: 92%;
  position: absolute;
  top: 48.3%;
  right: 11%;
  height: 0.5%;
}

.section4_con .section4_walkingborder2 {
  width: 92%;
  position: absolute;
  top: 36%;
  right: 11.5%;
  height: 0.6%;
}

.section4_con .section4_zibracrossing2 {
  width: 10%;
  position: absolute;
  top: -28.2%;
  right: 1.1%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.section4_con .section4_truck {
  width: 11%;
  position: absolute;
  top: 38.6%;
  right: 81.5%;
}

.section4_con .section4_taxi_pc {
  position: absolute;
  width: 9.5%;
  right: 63.2%;
  top: 33.5%;
}

.section4_con .section4_pc_box {
  position: absolute;
  width: 100%;
  top: -35%;
  display: none;
  max-width: 700px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
  .section4_con .section4_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 700px;
  }
}

@media screen and (min-width: 1000px) {
  .section4_con .section4_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 800px;
    top: -40%;
  }
}

@media screen and (min-width: 1300px) {
  .section4_con .section4_pc_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1000px;
    top: -35%;
  }
}

@media screen and (min-width: 1500px) {
  .section4_con .section4_pc_box {
    max-width: 1200px;
    top: -25%;
  }
}

.section4_con .section4_pc_box .section4_pc_inner {
  padding: 50px 50px;
  text-align: left;
  position: relative;
  z-index: 1;
  width: 50%;
}

@media screen and (min-width: 1000px) {
  .section4_con .section4_pc_box .section4_pc_inner {
    padding: 50px 30px;
  }
}

@media screen and (min-width: 1300px) {
  .section4_con .section4_pc_box .section4_pc_inner {
    padding: 50px 50px;
  }
}

@media screen and (min-width: 1500px) {
  .section4_con .section4_pc_box .section4_pc_inner {
    padding: 50px 30px;
  }
}

.section4_con .section4_pc_box .section4_pc_inner h2 {
  text-align: left;
  color: #068967;
  font-size: 24px;
  line-height: 30.6px;
  letter-spacing: 2.48px;
  padding: 0;
  width: 100%;
  margin: 15px auto 5px;
}

@media screen and (min-width: 768px) {
  .section4_con .section4_pc_box .section4_pc_inner h2 {
    text-align: left;
    color: #068967;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 2.48px;
    padding: 0;
    margin: 20px 0 15px;
  }
}

@media screen and (min-width: 1300px) {
  .section4_con .section4_pc_box .section4_pc_inner h2 {
    font-size: 26px;
    line-height: 38px;
  }
}

@media screen and (min-width: 1500px) {
  .section4_con .section4_pc_box .section4_pc_inner h2 {
    font-size: 28px;
  }
}

.section4_con .section4_pc_box .section4_pc_inner .btn {
  background-color: #048967;
  padding: 10px 35px;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.section4_con .section4_pc_box .section4_pc_inner .btn a {
  text-decoration: none;
  color: #fff;
}

.section4_con .section4_pc_box .section4_pc_inner .btn:hover {
  background-color: #0aa47d;
}

.section4_con .section4_pc_box .section4_pc_inner p {
  line-height: 25px;
  font-weight: 400;
  width: 90%;
  text-align: justify;
  font-size: 15px;
  display: none;
}

@media screen and (min-width: 1200px) {
  .section4_con .section4_pc_box .section4_pc_inner p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.section2 .cloud_reverse {
  position: fixed;
  width: 30%;
  top: 5%;
  left: 5%;
  z-index: -1;
  -webkit-animation: cloud_reverse 5s infinite linear alternate;
          animation: cloud_reverse 5s infinite linear alternate;
}

.section2 .cloud_reverse_2 {
  width: 40%;
  top: 35%;
  left: 5%;
  position: fixed;
  z-index: -1;
  -webkit-animation: cloud_reverse_2 5s infinite linear alternate;
          animation: cloud_reverse_2 5s infinite linear alternate;
}

.section2 .cloud {
  width: 30%;
  top: 20%;
  right: 5%;
  position: fixed;
  z-index: -1;
  -webkit-animation: cloud 5s infinite linear alternate;
          animation: cloud 5s infinite linear alternate;
}

.section3 .cloud_reverse {
  width: 30%;
  top: 5%;
  left: 5%;
  position: fixed;
  z-index: -1;
  -webkit-animation: cloud_reverse 5s infinite linear alternate;
          animation: cloud_reverse 5s infinite linear alternate;
}

.section3 .cloud_reverse_2 {
  width: 40%;
  top: 35%;
  left: 5%;
  position: fixed;
  z-index: -1;
  -webkit-animation: cloud_reverse_2 5s infinite linear alternate;
          animation: cloud_reverse_2 5s infinite linear alternate;
}

.section3 .cloud {
  width: 30%;
  top: 20%;
  right: 5%;
  position: fixed;
  z-index: -1;
  -webkit-animation: cloud 5s infinite linear alternate;
          animation: cloud 5s infinite linear alternate;
}

@-webkit-keyframes cloud_reverse {
  0% {
    top: 5%;
    left: 5%;
    z-index: -1;
  }
  100% {
    top: 10%;
    left: 10%;
    z-index: -1;
  }
}

@keyframes cloud_reverse {
  0% {
    top: 5%;
    left: 5%;
    z-index: -1;
  }
  100% {
    top: 10%;
    left: 10%;
    z-index: -1;
  }
}

@-webkit-keyframes cloud_reverse_2 {
  0% {
    top: 35%;
    left: 5%;
    z-index: -1;
  }
  100% {
    top: 30%;
    left: 20%;
    z-index: -1;
  }
}

@keyframes cloud_reverse_2 {
  0% {
    top: 35%;
    left: 5%;
    z-index: -1;
  }
  100% {
    top: 30%;
    left: 20%;
    z-index: -1;
  }
}

@-webkit-keyframes cloud {
  0% {
    top: 20%;
    right: 5%;
    z-index: -1;
  }
  100% {
    top: 25%;
    right: -5%;
    z-index: -1;
  }
}

@keyframes cloud {
  0% {
    top: 20%;
    right: 5%;
    z-index: -1;
  }
  100% {
    top: 25%;
    right: -5%;
    z-index: -1;
  }
}
/*# sourceMappingURL=style.css.map */