@charset 'UTF-8';

@font-face {
    font-family: 'korea_tee';
    src: url('./font/koreaL.woff2') format('woff2');
    src: url('./font/koreaL.woff') format('woff');
    font-weight: 400;
    font-style: normal;
};
@font-face {
    font-family: 'korea_tee';
    src: url('./font/koreaM.woff2') format('woff2');
    src: url('./font/koreaM.woff') format('woff');
    font-weight: 600;
    font-style: normal;
};
@font-face {
    font-family: 'korea_tee';
    src: url('fontSkoreaL.woff2') format('woff2');
    src: url('fontSkoreaL.woff') format('woff');
    font-weight: 700; font-style: normal;
};
html, body, a, div, p {
    font-family: korea_tee, Dotum, "돋움", Verdana, Geneva, sans-serif;
}

strong {
    font-weight: 700;
}


#start-info { bottom: 10%; left: 0; position: fixed; width: 100%;  z-index: 1000;}
#start-info p { color: #fff; text-align: center; }

/* Shapespark custom css  */
#menu-bar-slide .ui-panel {
    background-color: #91002299; 
    color: #e1d7c7;}
    
#view-list #view-list-slide .ui-panel {
    background-color: #910022bb; 
    color: #e1d7c7;
    font-size: 13px; 
    font-family: korea_tee, Dotum;
    font-weight: 600;}
#view-list #view-list-slide .view:nth-child(5), 
#view-list #view-list-slide .view:nth-child(6), 
#view-list #view-list-slide .view:nth-child(7) {background-color: #e1d7c7bb; color: #910022; font-size: 12px; margin-left: 10px; }

#view-list #view-list-slide .view:hover { color: #ffffff; }
#view-list #view-list-slide .active-view, .active-view:hover { background-color: #e13741 !important; color: white !important; }
#view-list #view-list-slide .next-active-view, .next-active-view:hover {background-color: #e1374155; color: white !important; }


#info-bar {display: none; }

.modal-active .modal {
  margin-left: 0;
  margin-bottom: 0;
  transform: rotateY(0deg);
  opacity: 1;
}

.modal-container {
      position: fixed;
      top: 50%;
      left: 0;
      width: 50vw;
      height: auto;
      max-height: 95vh;
      min-height: 32vh;
      transform: translate(0, -50%);
      perspective: 1500px;
      z-index: 500;
      overflow: hidden
  }

  .modal {
      cursor: default;
      position: relative;
      z-index: 1190;
      background-color: #910023;
      max-height: 100%;
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin-bottom: 0;
      transform: rotateY(100deg);
      opacity: 0;
      transition: all .5s ease-out;
      transform-origin: center left;
      padding: 50px 0 26px 0;
      overflow: hidden
  }

.modal-content {
    position: relative;
    transition: all .3s;
    padding: 0 1vw;
    max-height: calc(100vh - 110px);
    text-align: center;
}

.modal-content img{
    width: 58vh;
    max-height: 70vh;
}
.modal-content img.poster{
    width: 60vh;
    max-width: 78vw;
    max-height: 90vh;
    cursor: pointer;
}


.modal-content p {margin: 26px 0 0 0; word-break: keep-all;}

.modal-content a {
  cursor: pointer;
  font-size: 28px;
  text-align: center;
  font-family: korea_tee, Dotum;
  font-weight: 600;
  margin: 0;
  padding: 1vh;
  display: block;
  color: #e1d7c7;
}

/* .modal-active .modal-container {} */

.modal-close {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 8px;
    top: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 3000
}


/* ----------------------------------- */
.modal-container_c {
    position: fixed;
    top: 50%;
    left: 50%;
    /* width: 65vw; */
    width: auto;
    height: auto;
    /* max-height: 85vh;
    min-height: 55vh; */
    transform: translate(-50%, -50%);
    z-index: 500;
    overflow: hidden
}
.modal-container_c .modal {
    cursor: default;
    position: relative;
    z-index: 1190;
    background-color: #910023;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    opacity: 0;
    transition: opacity .5s ease-out;
    transform-origin: 50% 50%;
    padding: 50px 0 26px 0;
    overflow: hidden
}

.modal-container_c .modal-content {
  position: relative;
  transition: all .3s;
  padding: 2vw;
  /* max-width: 78vw;
  max-height: 82vh; */
  max-width: 85vw;
  max-height: 85vh;
  text-align: center;
}
div.modal-container_c.modal-active .modal { margin: 0; opacity: 1; }
div.modal-container_c .modal-content > iframe { width: 80vw !important; height: 38vw !important;}

    

  /* ----------------------------------- */

.btn {
    color: #FFF;
    border: 1px solid #FFF;
    display: inline-block;
    text-decoration: none;
    padding: .5em;
    text-transform: none;
    transition: background .3s
}

.btn:hover {
    background-color: rgba(255, 255, 255, .2)
}

/* Reponsive UI dimensions and positions - small display */

@media (max-width: 739px), (max-height: 739px) {
    #top-Language { top: 5px; right: 82px; width: 100px; }
    #top-Language > a { font-size: 12px; padding: 4px; }
    #top-Language ul.langlist{ padding: 4px 0 0 0; }
    #top-Language ul.langlist > li {margin-bottom: 8px; }
    #top-Language ul.langlist > li a{font-size: 12px; }

    #booking-view-menu { top: 40%; width: 110px; font-size: 12px; }
    #booking-view-menu .booking-title { width: 100%; height: 24px; padding-top: 2px; }
    #booking-view-menu img { width: 64px; height: 64px; margin: 2px; }
    #booking-view-menu #view-list-items { padding: 8px; }

    #booking-view-menu .booking-view-menu-close {
        width: 10px;  height: 38px; 
        margin: 2px; padding: 2px; 
        margin-top: 90px;
    }
    #booking-view-menu .booking-view-menu-close img {
        width: 6px; height: 68px; margin: 0; padding: 0;
        margin-top: -16px;
    }

    #custom-view-menu02 .ui-panel { font-size: 12px; }

    .slider-div .slick-arrow {
        height: 100%;
        padding: 0;
        width: 50%;
        z-index: 3001
    }

    .slider-div .slick-next:before,
    .slider-div .slick-prev:before {
        color: transparent;
        content: "-";
        font-size: 50px
    }

    .slider-div .slick-next:before {
        content: "-"
    }

}

@media (max-width: 739px), (max-height: 739px) and (orientation:portrait) {
    .modal-container {
        top: auto;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        transform: none;}
    .modal {padding: 42px 15px 15px 30px;}
    .modal-content { padding: 0 10px 0 0; max-height: calc(80vh);  max-width: 99vw; }
    .modal-content a { font-size: 18px; }
        
    .modal-content img.poster{ width: 78vw !important; }
}
@media (max-width: 1000px) and (orientation: landscape) { 
    .modal-container {
        top: 0;
        left: 0;
        width: 50vw;
        height: 100vh;
        max-height: 100vh;
        transform: none;
    }
    .modal {padding: 42px 12px 8px 12px;}
    .modal-content { padding: 0px; max-height: calc(76vh); }
    .modal-content img{ width: 78vh;}
    .modal-content a { font-size: 18px; }
}


#info-bar {display: none; }