@charset "utf-8";


@font-face {
    font-family: 'ridi';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pret-l';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'pret-r';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'pret-m';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
.eng {
  font-family: "ZCOOL XiaoWei", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pret-l {
  font-family: 'pret-l';
}
.pret-r {
  font-family: 'pret-r';
}
.pret-m {
  font-family: 'pret-m';
}
* {
	box-sizing: border-box;
  margin: 0; padding: 0;
}

:root {
    --main-gold: #A79652;
    --main-black: #4E4E4E;
    
}
html{
  width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'pret-r', 'ridi', 'noto sans kr';
	color: #4E4E4E; 
	word-break: keep-all;
  overflow-x: hidden;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}


/* AOS 커스텀 */
.aos-init { 
  transition: all 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.delay03 { transition-delay: 0.3s !important; }
.delay06 { transition-delay: 0.6s !important; }
.delay10 { transition-delay: 1.0s !important; }
.delay13 { transition-delay: 1.3s !important; }
.o-hidden {overflow: hidden;}
[data-aos=fade-left] {transform: translate3d(50px, 0, 0) !important;}
[data-aos=fade-right] { transform: translate3d(-50px, 0, 0) !important;}
[data-aos=fade-up] { transform: translate3d(0, 50px, 0) !important;}
[data-aos=fade-down] { transform: translate3d(0, -50px, 0) !important;}
[data-aos^=fade][data-aos^=fade].aos-animate { transform: translateZ(0) !important;}


.sound_only { display: none;}
ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
  font-family: 'pret-r';
}
img {
  max-width: 100%;
	padding: 0;
	margin: 0;
  object-fit: cover;
}
h1,
h2,
h3,
h4 {
	margin: 0;
	padding: 0;
	font-weight: 400;
  font-family: 'ZCOOL XiaoWei', 'ridi';
	color: var(--main-gold);
}
h3 {
  font-size: 32px;
}
h4 {
  font-size:20px;
}
p {
	padding: 0;
	margin: 0;
  font-size: 17px;
  font-family: 'pret-r';
}

a {
  color: inherit;
  outline: none;
	text-decoration: none;
}
.mo, .mo_inline, .block1200, .block1024, .block768, .mo_flex, .flex1200 {display: none !important;}
.contents {
  position: relative;
  /* z-index: 1; */
}
.uppercase {
  text-transform: uppercase;
}
@media (max-width:1200px){
  .block1200 { display: block !important;}
  .flex1200 { display: flex !important;}
  .none1200 { display: none !important;}
}
@media (max-width:1024px){
  .block1024 { display: block !important;}
}
@media(max-width:768px){
	.mo, .block768 {display: block !important;}
  .mo_flex {display: flex !important;}
  .mo_inline {display: inline-block !important;}
	.pc, .pc_flex, .none768 {display: none !important;}

  h3 {
    font-size: 22px;
  }
  p, li{
    font-size: 13px;
  }
}

/* 공통 섹션 */
section {
  position: relative;
  padding: 150px 0;
}

@media(max-width:768px){

  section {
    padding: 50px 0;
  }

}

/* common-banner 메인,예약안내 하단에 사용 */
section.common-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 150px 12.76vw;
  background: url(/html/images/main/common_banner.jpg) no-repeat center/cover;
  height: 40.1vw;
  max-height: 770px;
  /* clip-path: circle(100% at 4.4% 51%);
  transition: all 0.8s ease-out;
  transition-delay: 0.5s; */
}
section.common-banner.on {
  clip-path: circle(100% at 31% 51%);
}
.common-banner h2 {
  color: #fff;
  font-size: 55px;
  margin-bottom: 10px;
   width: max-content;
}

.common-banner p {
  color: #fff;
  margin-bottom: 50px;
  width: max-content;
}

.common-banner .more-btn span {
  color: #fff;
  font-family: 'pret-r';
  margin-right: 5px;
}

.common-banner .more-btn .arrow {
    width: 27px;
}

@media (max-width:768px) {
  section.common-banner {
    padding: 50px 5vw;
    background: url(/html/images/main/m/common_banner.jpg) no-repeat center/cover;
    height: 60.75vw;
    /* clip-path: circle(100% at 9% 106%); */
  }
  section.common-banner.on {
    clip-path: circle(100% at 17% 48%);
  }
  .common-banner h2 {
    font-size: 28px;
  }

  .common-banner p {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .common-banner .more-btn span {
    font-size: 13px;
  }

  .common-banner .more-btn .arrow {
    width: 17px;
  }
}

/* 3d 회전 */
.r-parent {
  perspective: 1500px;
  overflow: hidden;
}
.r-child {
  animation: rotate3d 25s linear infinite;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateX(-20px) rotateY(-18deg) scale(1.12);
} 


@keyframes rotate3d {
    0% {
        transform: translateX(-20px) rotateY(-18deg) scale(1.12);
    }

    12.5% {
        transform: translateX(-10px) rotateY(-9deg) scale(1.08);
    }

    25% {
        transform: translateX(0px) rotateY(0deg) scale(1);
    }

    37.5% {
        transform: translateX(10px) rotateY(9deg) scale(1.08);
    }

    50% {
        transform: translateX(20px) rotateY(22deg) scale(1.16);
    }

    62.5% {
        transform: translateX(10px) rotateY(9deg) scale(1.08);
    }

    75% {
        transform: translateX(0px) rotateY(0deg) scale(1);
    }

    87.5% {
        transform: translateX(-10px) rotateY(-9deg) scale(1.08);
    }

    100% {
        transform: translateX(-20px) rotateY(-18deg) scale(1.12);
    }
}



/* 공통: 위 → 아래로 드러나는 효과 */
.reveal-down {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path 4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.3s ease;
}
/* 공통: 좌 → 우로 드러나는 효과 */
.reveal-right {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path 4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.3s ease;
}

/* 공통: 가운데 → 양옆으로 드러나는 효과 */
.reveal-center {
  width: max-content;
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    transition:
        clip-path 2s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s ease;
}

/* 활성화 */
.reveal-down.is-show, .reveal-right.is-show, .reveal-center.is-show {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}


/* 이미지 스크롤 감지 시 회전 */
.rotate-img {
  transform: rotate(-20deg);
}
.rotate-img.on {
  animation: Rotate-img 2s ease forwards;
}
@keyframes Rotate-img {
    0% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* 화살표 마우스오버시 이동(버튼에 포함된) */
.more-btn .arrow {
  transition: 0.7s ease;
}
.more-btn:hover .arrow {
    transform: translateX(10px);
}


/* 밑줄 애니메이션 */
.underline-animation .line {
  position: relative;
  display: inline-block;
}

.underline-animation .underline {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px; /* 밑줄 두께 */
  width: 100%; 
  background-color: #BB7E56;
  transform: scaleX(0); 
  transform-origin: left center;
}


/* 초기 상태 */
.roll-img {
  transform: translate(-200px,0px) rotate(45deg) scale(0.8);
  opacity: 0;
  /* transform-origin: center center; */
  transform-origin: bottom center;
  transition: transform 1.2s cubic-bezier(.68,-0.55,.27,1.55), 
              opacity 0.8s ease, scale 0.8s ease;
}

/* AOS가 활성화됐을 때 */
[data-aos="roll-in-left"].aos-animate {
  transform: translate(0,0) rotate(0deg) scale(1);
  opacity: 1;
}