@import "../../res.less";

.Mappage {
  position: absolute;
  width: 100vw;
  height: 1624px;
  overflow-y: scroll;

  .map_bg {
    position: absolute;
    overflow-y: scroll;
    width: 750px;
    height: 1624px;
    top: 0px;
    left: 0px;
    .sparkBg("mapPage/bg.jpg");

    .back_btn {
      left: 39px;
      top: 240px;
      width: 62px;
      height: 62px;
      transform-origin: left center;
      position: absolute;
      .sparkBg("mapPage/back_btn.png");
    }

    .map_title {
      position: absolute;
      width: 195px;
      height: 62px;
      top: 240px;
      left: 281px;
      .sparkBg("mapPage/title.png");
    }

    .city_box {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
      margin-top: 333px;

      .city_card {
        // width: 342px;
        height: 349px;
        .sparkBg("mapPage/item_bg.png");
        padding: 18px;
      }

      .city_icon {
        position: relative;
        width: 309px;
        height: 192px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .city_icon_sp_landmark1{
        .sparkBg("mapPage/icon_sp_landmark1.png");
      }
      .city_icon_sp_landmark2{
        .sparkBg("mapPage/icon_sp_landmark2.png");
      }
      .city_icon_sp_landmark3{
        .sparkBg("mapPage/icon_sp_landmark3.png");
      }
      .city_icon_sp_landmark4{
        .sparkBg("mapPage/icon_sp_landmark4.png");
      }
      .city_icon_sp_landmark5{
        .sparkBg("mapPage/icon_sp_landmark5.png");
      }

      .city_icon_lock_sp_landmark1{
        .sparkBg("mapPage/lock_icon_sp_landmark1.png");
      }
      .city_icon_lock_sp_landmark2{
        .sparkBg("mapPage/lock_icon_sp_landmark2.png");
      }
      .city_icon_lock_sp_landmark3{
        .sparkBg("mapPage/lock_icon_sp_landmark3.png");
      }
      .city_icon_lock_sp_landmark4{
        .sparkBg("mapPage/lock_icon_sp_landmark4.png");
      }
      .city_icon_lock_sp_landmark5{
        .sparkBg("mapPage/lock_icon_sp_landmark5.png");
      }

      .city_overlay {
        padding: 16px;
        border-radius: 8px;
        text-align: center;
        color: #290d10;
      }

      .city_name {
        margin: 0 0 15px 0;
        font-size: 30px;
      }

      .see_btn {
        width: 278px;
        height: 67px;
        .sparkBg('mapPage/see_btn.png')
      }
      .lock_see_btn {
        width: 278px;
        height: 67px;
        .sparkBg('mapPage/lock_see_btn.png')
      }
    }

  }

  .info_box {
    position: absolute;
    width: 100%;
    height: 1624px;
    // visibility: hidden;
    display: none;

    .info_mask {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.8;
    }

    .info_img {
      position: absolute;
      width: 702px;
      height: 993px;
      top: 270px;
      left: 25px;
    }

    .info_img_sp_landmark1 {
      .sparkBg('mapPage/map_info_sp_landmark1.png')
    }

    .info_img_sp_landmark2 {
      .sparkBg('mapPage/map_info_sp_landmark2.png')
    }

    .info_img_sp_landmark3 {
      .sparkBg('mapPage/map_info_sp_landmark3.png')
    }

    .info_img_sp_landmark4 {
      .sparkBg('mapPage/map_info_sp_landmark4.png')
    }

    .info_img_sp_landmark5 {
      .sparkBg('mapPage/map_info_sp_landmark5.png')
    }

    .close_btn {
      position: absolute;
      width: 66px;
      height: 66px;
      left: 342px;
      top: 1342px;
      .sparkBg("mapPage/close.png");
    }
  }

}