html,
  body {
      margin: 0;
      padding: 0;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  .web {
      position: relative;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
  }

  .web_inner_panel {
      position: relative;
      line-height: 0;
      font-size: 0;
  }

  .web_inner_panel img {
      display: block;
      width: 100%;
  }

  .web_inner_panel button,
  .web_inner_panel a,
  .clickable,
  .web_inner_panel .checkbox-item {
      position: absolute;
      display: block;
      padding: 0;
      margin: 0;

      background: transparent;
      cursor: pointer;
      text-indent: -9999px;
      overflow: hidden;
      font-size: 0;
      border: none;
  }

  /* Hide the real checkbox */
 .web_inner_panel .checkbox-item input[type="checkbox"] {
    display: none;
}

#popup1 .web_inner_panel .checkbox-item {
    background: url("../images/unchecked_icon1.jpg") no-repeat scroll left center;
    background-size: 22px auto;
}
#popup1 .web_inner_panel .checkbox-item.checked {
    background: url("../images/checked_icon1.jpg") no-repeat scroll left center;
    background-size: 22px auto;
}

#popup2 .web_inner_panel .checkbox-item {
    background: url("../images/unchecked_icon.jpg") no-repeat scroll left center;
    background-size: 22px auto;
}
#popup2 .web_inner_panel .checkbox-item.checked {
    background: url("../images/checked_icon.jpg") no-repeat scroll left center;
    background-size: 22px auto;
}

  .web_inner_panel input {
      position: absolute;
      display: block;
      padding: 0 10px;
      margin: 0;
      background: #fff;
      outline: none;
      font-size: 20px;
      color: #000;
      text-indent: 0;
      overflow: visible;
      cursor: text;
      border: none;
  }

  .link_01 {
    bottom: 36%;right: 5.9%;width: 42.3%;height: 3.3%;
  }

  .link_02 {
    top: 48%;left: 5.9%;width: 42.3%;height: 3.5%;
  }

  .link_03 {
    top: 45.5%;right: 9.9%;width: 65.3%;height: 5.5%;
  }

  .link_04 {
    top: 55.5%;left:24.9%;width: 16.3%;height: 5.5%;
  }

  .link_05 {
    top: 55.5%;right:33.9%;width: 16.3%;height: 5.5%;
  }

  .link_06 {
    top: 55.5%;right: 9.9%;width: 16.3%;height: 5.5%;
  }

  .link_07 {
    bottom: 6%;left: 3.9%;width: 44.3%;height: 9.5%;
  }

  .link_08 {
    bottom: 6%;right: 5.2%;width: 44.3%;height: 9.5%;
  }


  .link_09 {
    top: 43.2%;right: 9.9%;width: 65.3%;height: 5.5%;
  }

  .link_10 {
    top: 53.2%;left:24.9%;width: 16.3%;height: 5.5%;
  }

  .link_11 {
    top: 53.2%;right:33.9%;width: 16.3%;height: 5.5%;
  }

  .link_12 {
    top: 53.2%;right: 9.9%;width: 16.3%;height: 5.5%;
  }

    .link_13 {
        bottom: 31%;
    right: 7%;
    width: 70.3%;
    height: 7.5%;
  }

      .link_14 {
  bottom: 23%;
    left: 7%;
    width: 58.3%;
    height: 4.5%;
  }

  
      .link_15 {
    bottom: 18%;
    left: 7%;
    width: 69.3%;
    height: 4.5%;
  }

      .link_16 {
     bottom: 23%;
    right: 7%;
    width: 8.3%;
    height: 4%;
  }

   .link_17 {
     bottom: 18%;
    right: 7%;
    width: 8.3%;
    height: 4%;
  }

  /* Popup */

  .popup_panel {
      position: fixed;
      inset: 0;
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, .65);
      z-index: 9999;
  }

  .popup_panel.active {
      display: flex;
  }

  .popup_content {
      position: relative;
      width: 90%;
      max-width: 540px;
      background: transparent;
      border-radius: 12px;
      padding: 0px;
      text-align: center;
  }

  .popup_close {
      margin-top: 20px;
      padding: 10px 20px;
      cursor: pointer;
  }

  .popup_content input {
      outline: none;
  }


  @media screen and (max-width:767px) {
     .web_inner_panel input {
        font-size: 4vw;
     }
     #popup1 .web_inner_panel .checkbox-item, #popup1 .web_inner_panel .checkbox-item.checked,
     #popup2 .web_inner_panel .checkbox-item, #popup2 .web_inner_panel .checkbox-item.checked {
         background-size: 4.074vw auto;
     }
        
  }