@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); */
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); */

@font-face {
    font-family: 'sookso';
    src:  url('/assets/fonts/icomoon.eot?fbnv3p');
    src:  url('/assets/fonts/icomoon.eot?fbnv3p#iefix') format('embedded-opentype'),
      url('/assets/fonts/icomoon.ttf?fbnv3p') format('truetype'),
      url('/assets/fonts/icomoon.woff?fbnv3p') format('woff'),
      url('/assets/fonts/icomoon.svg?fbnv3p#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    font-family: 'sookso' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-house_logo:before {
    content: "\e900";
  }



body{background-color: #eee; color:#222;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

div.bg_image{
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
}


a{text-decoration: none;}
#main{margin:0 auto; max-width: 600px; background-color: #fff;}
body#home #main{padding-top:112px;}
header{position: fixed; top:0; left:0; right:0;}
header div.header{padding:28px;  max-width: 600px; height: 112px; margin: 0 auto; background-color: transparent;
    transition: .5s ease;}
header div.header a.btn_book{padding:10.5px;} 
header div.header a{color: #222;}
header div.header a#logo{opacity: 0; transition: .5s ease; font-size:45px;}
body.sticky header div.header{background-color: #fff;}
body.sticky header div.header a{color:#222;}
body.sticky header div.header a#logo{opacity: 1;}

div.main_logo{padding:60px 0; text-align: center; z-index: 10;}

div#body{padding: 0 50px;}
div.title h1, div.title h2, div.title h3{text-align: center; font-weight: 700;}
div.title h1{font-size: 64px;}
div.title h2{font-size: 48px;}
div.title h3{font-size: 18px; margin-top:15px;}
div.btn_book{margin:60px 0;}
div.btn_book a{font-weight: 700; padding:23px 0;}

section#video{border-radius: 12px; overflow: hidden; aspect-ratio: 500/273;}

section#photos{margin-top: 60px;}
section#photos img{width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius: 12px; }

section#link{margin:60px 0; display: flex; justify-content: center; column-gap: 20px;}
section#link a{display: flex; width:52px; height: 52px; border-radius: 50%; background-color: #222; justify-content: center; align-items: center;}

footer{height:50px;}

section h2{text-align: center; font-weight: 700;}


div#side_menu{position: fixed; top:0; left:0; right:0; bottom:0; display: none;}
#btn_menu_close{border:0; background-color: transparent;}
div#side_menu_cont{margin:0 auto; max-width: 600px; height:100%; padding: 30px; background-color: #fff;}
div#side_menu ul#menu{list-style: none; width:100%; padding: 0;}
div#side_menu ul#menu li{font-size: 36px; padding: 30px 0; text-align: center;}
div#side_menu ul#menu li a{text-decoration: none; color: #222;}


/* Story */
body#story #main{padding-top:0;}
body#story header a{color:#fff;}
body#story header div.header a#logo{opacity: 1;}
body#story.sticky header div.header a{color: #222;}
#main_image img{width:100%; aspect-ratio: 1/1; object-fit:cover;}
div.post h1{font-size: 36px; text-align: center; margin-top: 55px; font-weight: 700;}
div.post p{margin:30px 0 60px 0;}
div.post figure.photo{margin:60px 0;}
div.post figure img{border-radius: 12px;}


/* Reservation */
#booking_btns div.j{margin:10px 0;}
#booking_btns div.btn_book a.btn{padding:22px 0; border-radius: 16px;}
.guide{border-top:1px solid #CECECE; margin-top:60px;}
#rules dl{margin-top:60px;}
#rules dl dt{font-size: 24px; font-weight: 700; margin-top:50px;}
#rules dl dd{font-size: 18px; line-height: 26px; margin-top:24px;}