/* Mobile Layout */
@media (max-width: 768px) {
  #scroll { display: none; }

.dina{display: block !important;}



  /* Header */
  header { }
  header .inner { display: none; }
  header .m-logo { display: inline-block; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); }
  header .m-logo img { transition: opacity 0.3s; position: absolute; top: 0; left: 50%; transform: translateX(-50%);  }
  header .m-logo .big { width: 90px; opacity: 1; visibility: visible;  }
  header .m-logo .small { width: 80px; opacity: 0; visibility: hidden; }
  header.on .m-logo .big { opacity: 0; visibility: hidden; }
  header.on .m-logo .small { width: 110px; margin-top: 17px; opacity: 1; visibility: visible; }

  header .m-btn { display: block; position: absolute; top: 16px; right: 30px; width: 30px; height: 30px; cursor: pointer; z-index: 100; }
  header .m-btn .line {height: 2px; background-color: #fff; display: block; position: absolute; top: calc(50% - 1px); right: 0; transition: 0.5s;}
  header .m-btn .line1{ width: 100%; transform: translateY(8px);}
  header .m-btn .line2 {width: 80%;}
  header .m-btn .line3 {width: 100%; transform: translateY(-8px);}
  header .m-resv {display:block; position:absolute; top:22px; left:20px;}
  header .m-resv a {display:block; font-size:17px; color:#fff;font-size:20px; text-transform: uppercase; font-weight: bold;}

  header .m-btn.on .line1{transform: rotate(45deg); } 
  header .m-btn.on .line2{opacity: 0;}
  header .m-btn.on .line3{transform: rotate(-45deg); }
  header.on .m-btn .line { background-color: #000;  }

  header span {display:block;; color:#fff;}
  header span.btn {display:block; font-size:37px; margin-top:5px;}
  header span.close {display:none; font-size:30px;}
  header .m-btn.on span.btn {display:none;}
  header .m-btn.on span.close {display:block;}

  header .m-menu { opacity: 0; visibility: hidden; display: block; position: absolute; top: 0; left: 0; background-color:#C9D5D7 /*#c9bca8*/; width: 100vw; height: 100vh; transition: 0.8s; }
  header .m-menu::before { content: ''; position: absolute; top: 0; right: 0; width: 50vw; height: 100vh; background-color: rgba(0, 0, 0, 0.3);z-index: 2; }
  header .m-menu::after { content: ''; position: absolute; top: 0; right: 0; width: 50vw; height: 100vh; background: url(https://gonylab8.speedgabia.com/bay591/room/1/1.jpg) no-repeat center center; background-size: cover; z-index: 1; }
  header .m-menu .m-logo-inner { position: absolute; top: 20px; left: 20px; }
  header .m-menu .m-logo-inner img { width: 100px; }
  header .m-menu .m-gnb { display: block; width: 50vw; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 10; }
  header .m-menu .m-gnb>li { }
  header .m-menu .m-gnb>li>a { font-size: 22px; font-family: MyLotte-r; padding: 20px 0; cursor: pointer; color: #333; }
  header .m-menu .m-gnb>li.on>a { color: #fff; }
  header .m-menu .m-gnb .lnb { position: absolute; top: 0; left: 100%; transition: opacity 0.3s; opacity: 0; visibility: hidden;  }
  header .m-menu .m-gnb>li.on .lnb { opacity: 1; visibility: visible; } 
  header .m-menu .m-gnb .lnb a { padding: 17px 0; width: 150px; color: #fff; font-family: MyLotte-r; }
  header .m-btn.on+.m-menu { opacity: 1; visibility: visible; z-index:50;}

  /* Footer */
  footer .inner .top .text-logo img { width: 90px; }
  footer .inner .top .icons { right: 10px; }
  footer .inner .middle { padding: 30px 10px; }
  footer .inner .middle>div img { width: 70px; }
  footer .inner .middle>div span { font-size: 13px; }
  footer .inner .middle>div i { font-size: 30px; }
  footer .inner .bottom p { font-size: 13px; line-height: 1.6em; }

  /* Visual */
  .visual { height: 400px; }
  .visual .MyFrame { height: 400px; min-height: 400px; }
  .visual .heading h1 { font-size: 30px; margin-bottom: 20px; }
  .visual .heading p { font-size: 14px; }
  .visual .Swipers { height: 100%; }

  /* Swiper */
  .Swipers .InBox { height: 100%; }

  /* Index ---------------------------------------------------------------------- */
  #index .Swipers .swiper-controls { padding-right: 0; justify-content: space-around; }
  #index .Swipers .swiper-btns { margin-right: 0; }
  #index .Swipers .swiper-pagination-bullet { width: 8px; height: 8px; }
  #index .intro { padding: 150px 0 70px 0; }
  #index .intro .photo-container { width: 210px; height: 280px; }
  #index .intro .photo-container .photo { width: 210px; height: 280px; left: -7px; top: 7px;  }
  #index .intro .photo-container .photo iframe { height: 285px !important; margin-top: -5px; background-size: contain; }
  #index .intro .photo-container .shadow { left: 7px; top: -7px; }
  #index .intro .photo-container .text { font-size: 37px; }
  #index .intro .photo-container .text1 { top: 65px; left: -130px; } 
  #index .intro .photo-container .text2 { top: 163px; right: -129px; } 
  #index .intro .desc { margin-top: 50px; }
  #index .intro .desc h1 { font-size: 18px; }
  #index .intro .desc p { font-size: 14px; }

  #index .room { padding-top: 100px; padding-bottom: 50px; }
  #index .room .title { left: 50px; top: -75px; }
  #index .room .title h1 { font-size: 35px; }
  #index .room .title p { font-size: 13px; }
  #index .room .wrap { width: 100%; height: 160vw;}
  #index .room .label { width: 100%; height: 45px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); border-left: none; }
  #index .room .label::after { transform: rotate(90deg); bottom: 80%; right: 50px; }
  #index .room .contents { width: 100%; height: 0; background-size: cover; }
  #index .room input[type=radio]:checked + .contents { width: 100%; height: calc(100% - 315px); visibility: visible; background-size: cover; }
  #index .room .label p { margin-top: 0; margin-left: 50px; transform: rotate(0deg); line-height: 45px; font-size: 14px; }
  #index .room .label:nth-of-type(1) p { margin-top: 0;  }
  #index .room .label:nth-of-type(2) p { margin-top: 0; }
  #index .room .label:nth-of-type(3) p { margin-top: 0; }
  #index .room .label:nth-of-type(4) p { margin-top: 0; }
  #index .room .label:nth-of-type(5) p { margin-top: 0; }
  #index .room .label:nth-of-type(6) p { margin-top: 0; }
  #index .room .label:nth-of-type(7) p { margin-top: 0; }
  #index .room .heading { padding: 0; }
  #index .room .heading img { width: 65px; margin-bottom: 10px; }
  #index .room .heading h5 { font-size: 16px; margin-bottom: 30px; font-family: MyLotte-r; }
  #index .room .heading h5::after { height: 15px; bottom: -33px; }
  #index .room .heading p { font-size: 14px; line-height: 1.4em; }
  #index .room .heading p:last-of-type::after { width: 75px; }

  #index .special { padding: 100px 0; background-color: #dad3c8; }
  #index .special .Swiper { width: 97%; height: 60vw; margin: 0 auto; }
  #index .special .Swiper .title { left: 50px; top: -50px; }
  #index .special .Swiper .title h1 { font-size: 35px; }
  #index .special .Swiper .title p { font-size: 13px; }
  #index .special .Swiper .swiper-slide .img { width: 100%; }
  #index .special .Swiper .swiper-btn { position:absolute; top: 50%; transform: translateY(-50%); z-index:10; cursor:pointer; color: #fff; background-color: transparent; font-size: 16px; border: 1px solid #fff; width: 27px; height: 27px; text-align: center; line-height: 25px; transition: 0.5s; }
  #index .special .Swiper .swiper-btn:hover { background-color: #fff; color: #333; }
  #index .special .Swiper .swiper-button-prev { display: block; left: 10px;}
  #index .special .Swiper .swiper-button-next { right: 10px; }
  #index .special .Swiper .swiper-button-next::before { display: block; }
  #index .special .Swiper .swiper-button-next .pointer { display: none; }
  #index .special .Swiper .texts { height: 100px; }
  #index .special .Swiper .text { padding-top: 0; height: 100px; padding-left: 20px; }
  #index .special .Swiper .text span { display: block; margin-top: 20px; font-family: MyLotte-l; font-size: 14px; }
  #index .special .Swiper .text h1 { font-size: 25px; }
  #index .special .Swiper .text p { display: none; }
  #index .special .Swiper a { right: -10px; bottom: -50px; width: 130px; }

  #index .vimeo .inner { width: 97%; padding-top: 170px; padding-bottom: 50px; margin: 0 auto;}
  #index .vimeo .title { top: 115px; left: 20px; }
  #index .vimeo .title h1 { font-size: 35px;}
  #index .vimeo .title p { font-size: 14px; }
  #index .vimeo .bg { width:70%;  height: 150px; bottom: 0; }

  /* About ---------------------------------------------------------------------- */
  #about .intro { padding: 100px 0; }
  #about .intro .inner { width: 100%; flex-direction: column; justify-content: center; align-items: center; }
  #about .intro .photo-container { width: 45vw; height: 60vw; }
  #about .intro .photo-container .photo { width: 45vw; height: 60vw; background: url(https://gonylab8.speedgabia.com/7placeres/m/exterior/4.jpg) no-repeat center center; background-size: cover;  }
  #about .intro .photo-container .shadow { width: 45vw; height: 60vw; top: -12px; left: 12px; }
  #about .intro .desc { text-align: center; width: 90%; }
  #about .intro .desc h1 { font-size: 30px; }
  #about .intro .desc p span { font-size: 14px; }

  #about .Swipers2 { padding: 50px 0; }
  #about .Swipers2 .swiper-view { width: 95%; height: 57vw; }
  #about .Swipers2 .swiper-slide>div { height: 57vw; }
  #about .Swipers2 .swiper-button-prev { width: 27px; height: 27px; line-height: 25px; font-size: 16px; left: 10px; } 
  #about .Swipers2 .swiper-button-next { width: 27px; height: 27px; line-height: 25px; font-size: 16px; right: 10px; } 

  #about .location { padding-top: 100px; padding-bottom: 70px; }
  #about .location .inner { width: 90%; }
  #about .location .map { width: 100%; }
  #about .location .map>div { width: 100% !important; }
  #about .location .map .wrap_map { height: 300px !important;}
  #about .location .text { width: 100%; flex-direction: column; }
  #about .location .text>div p { line-height: 1.6em; font-size: 14px; }
  #about .location .text>div p b { display: block; }
  #about .location .bg { width: 70%; height: 250px; top: 50px; }
  #about .location .title { top: -3px; left: 20px; }
  #about .location .title h1 { font-size: 35px; }
  #about .location .title p { font-size: 14px; }

  /* Room ----------------------------------------------------------------------  */
  #room .intro { padding-top: 130px; width: 100%;}
  #room .intro .inner { width: 100%; flex-direction: column; justify-content: center; align-items: center; }
  #room .intro .photo-container { width: 45vw; height: 60vw; }
  #room .intro .photo-container .photo { width: 45vw; height: 60vw; }
  #room .intro .photo-container .shadow { width: 45vw; height: 60vw; top: -12px; left: 12px; }
  #room .intro .desc { width: 90%; }
  #room .intro .desc h1 { font-size: 18px; }
  #room .intro .desc p span { font-size: 14px; margin-bottom: 15px; }

  #room .info { width: 80%; flex-direction: column; margin: 0 auto 50px auto; }
  #room .info .inner h1 { font-size: 20px; margin-bottom: 50px; }
  #room .info .inner h1::after { content: ''; position: absolute; top: 50px; left: 0; width: 30px; height: 1px; background-color: #444; }
  #room .info .inner ul { margin-top: 0; }
  #room .info .inner ul li { line-height:2; margin-bottom: 7px; } 
  #room .info .inner:first-of-type { padding-left: 0; }
  #room .info .inner:last-of-type ul li { padding-left: 0; }
  #room .info .inner ul li span { font-size: 14px; }

  #room .Swipers2 { height: 60vw; margin: 100px auto 70px auto; }
  #room .Swipers2 .swiper-view { width: 95%; height: 57vw; }
  #room .Swipers2 .swiper-slide>div { height: 57vw; }
  #room .Swipers2 .swiper-button-prev { width: 27px; height: 27px; line-height: 25px; font-size: 16px; left: 10px; } 
  #room .Swipers2 .swiper-button-next { width: 27px; height: 27px; line-height: 25px; font-size: 16px; right: 10px; } 

  #room .Swipers3 { margin-top: 0; height: 60vw; }
  #room .Swipers3 .swiper .inner { width: 90%; }
  #room .Swipers3 .inner .heading { font-size: 35px; top: -29px; }
  #room .Swipers3 .inner .text { bottom: 2vw; right: 2vw; width: 200px; padding: 13px;  }
  #room .Swipers3 .inner .text h3 { font-size: 12px; }
  #room .Swipers3 .inner .text p { font-size: 10px; }
  #room .Swipers3 .swiper-btn { width: 27px; height: 27px; line-height: 25px; font-size: 16px; }
  #room .Swipers3 .swiper-button-prev { left: 10px; } 
  #room .Swipers3 .swiper-button-next { right: 10px; } 

  /* Notice ----------------------------------------------------------------------  */
  #notice .visual { height: 100vw; min-height: 100vw; }
  #notice .visual>div p { font-size: 14px; }
  #notice .visual>div h1 { font-size: 30px; }
  #notice .contents .InBox { width: 100%; padding: 0; }

  /* Reserve ----------------------------------------------------------------------  */
  #reserve .visual { height:100vw; min-height:100vw; } 
  #reserve .visual h1 span { font-size: 14px; } 
  #reserve .visual h1 { font-size: 30px; } 
  #reserve .contents { margin: 50px auto; }
  #reserve .snb { width: 300px; }
  #reserve .snb > li a { font-size: 12px; }
  #reserve .frame_02 table tr th,
  #reserve .frame_02 table tr td { font-size: 10px; }

  /* Special ----------------------------------------------------------------------  */
  #special .content .Swiper { width: 97%; margin-top: 0; padding-top: 100px; }
  #special .content .Swiper h3 { display: none; }
  #special .content .Swiper .swiper-view { height: 57vw; }
  #special .content .Swiper .txt { top: 60px; left: 20px; }
  #special .content .Swiper .txt h1 { font-size: 35px; }
  #special .content .Swiper .swiper-btn { width: 27px; height: 27px; line-height: 25px; }
  #special .content .Swiper .swiper-button-prev { left: 10px;}
  #special .content .Swiper .swiper-button-next { right: 10px; }
  #special .content .Swiper .desc { flex-direction: column; margin-top: 20px; padding-left: 10px; }
  #special .content .Swiper .desc p:first-child { font-size: 20px; margin-bottom: 10px; }
  #special .content .Swiper .desc p:last-child { font-size: 14px; line-height: 1.6em; }
  #special .content .Swiper .swiper-pagination-bullet { width: 8px; height: 8px; }
  #special .content .Swiper .target-room { top: 85px; font-size: 10px; }

  #special .bg-icon { display: none; }
}