@charset "utf-8";
@media only screen and ( max-width : 767px ) {
  .mo_dal {
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s, visibility 0s 0.3s;
    background: rgba(0,0,0,.6);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mo_dal.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0s 0s;
  }
  .model_modal_wrap {
    background: #fff;
    position: relative;
  }
  .modal_inner {
    /*overflow: hidden;*/
  }

  .mdClose {
    transition: .3s;
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    width: 60px;
    height: 60px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 15px;
    right: 15px;
    background: #686767;
    border-radius: 50%;
  }

  .mdClose-trigger {
    width: 30px;
    height: 18px;
    position: relative;
  }
  .mdClose-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all .5s;
  }

  .mdClose-trigger span:nth-of-type(1) {
    top: 0;
    transform: translateY(8px) rotate(-45deg);
  }

  .mdClose-trigger span:nth-of-type(2) {
    bottom: 0;
    transform: translateY(-8px) rotate(45deg);
  }

  .modal_inner {
  }
}