@charset "utf-8";

/* @import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,700|Kanit|Abhaya+Libre|Oranienbaum|Unica+One|Playfair+Display'); */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap'); */

.oooh-baby-regular {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}

@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: 'arita-m';
		src: url('/html/css/fonts/AritaBuriKR-Medium.ttf') format('truetype');
		font-weight: 400;
		font-display: block;
}
@font-face {
    font-family: 'arita-sb';
    src: url('/html/css/fonts/AritaBuriKR-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}
:root {
  --main-blue: #1FC1BC;
  --main-black: #363636;
  --main-brown: #847362;
}

.dancing {
  font-family: "Dancing Script", cursive;
}

.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  font-family: 'arita-m';
  color: var(--main-brown);
  text-decoration: none;
}

.more-btn .line {
  position: relative;
  display: inline-block;
  width: 10.9vw;
  height: 1px;
  background: rgba(132, 115, 98, 0.3); /* 처음엔 흐리게 */
  overflow: hidden;
}

.more-btn .line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(132, 115, 98, 1);
  transform: scaleX(0);
  transform-origin: left; 
  transition: transform 0.4s ease;
}

.more-btn:hover .line-fill {
  transform: scaleX(1); /* 왼쪽으로 채워짐 */
}

/* 흰색 버튼 커스텀 */
.more-btn.white {
  color: #fff;
}
.more-btn.white .line {
  background: rgba(255, 255, 255, 0.3); 
  width: 67px;
}
.more-btn.white .line-fill {
  background: #fff;
  transform-origin: right; /* 오른쪽부터 시작 */
}

/* 세로 라인 커스텀 */
.more-btn.vert {
  flex-direction: column;
  gap: 7px;
}
.more-btn.vert .line {
  width: 1px;
  height: 56px;
}
.more-btn.vert .line-fill {
  transform-origin: top;
  transform: scaleY(0);
}
.more-btn.vert:hover .line-fill {
  transform: scaleY(1); 
}



@media (max-width:1400px) {
  .more-btn {
    font-size: 16px;
    gap: 12px;
  }
  
}

@media (max-width:768px) {
  .more-btn {
    font-size: 15px;
  }
  .more-btn .line-fill {
    transform: scaleX(1);
  }
  .more-btn .line {
    width: 93px;
  } 
}

/* 공용 버튼 02 */
.more-btn02 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 28px;
    border: 1px solid #fff;
    color: #fff;
    letter-spacing: 0;
    border-radius: 999px;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.more-btn02::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main-brown);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: -1;
}

.more-btn02:hover {
    border: 1px solid var(--main-brown);
}

.more-btn02:hover::before {
    transform: scaleX(1);
}

.more-btn02 .arrow {
    font-style: normal;
    font-family: "Marcellus", "pret-l";
    transition: transform 0.3s ease;
}

.more-btn02:hover .arrow {
    transform: translateX(3px);
}

@media (max-width:1200px) {
  .more-btn02 {
      gap: 6px;
      padding: 10px 22px;
      font-size: 17px;
  }
}

@media (max-width:768px) {
  .more-btn02 {
      padding: 8px 20px;
      font-size: 14px;
  }
}



/* aos 커스텀 */
.o-hidden {overflow: hidden;}

[data-aos] {
    transition-duration: 1.8s !important;
}

[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;}

.delay03 { transition-delay: 0.3s !important; }
.delay06 { transition-delay: 0.6s !important; }
.delay10 { transition-delay: 1.0s !important; }
.delay13 { transition-delay: 1.3s !important; }
.delay23 { transition-delay: 2.3s !important; }




html{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:none;
  /* scroll-behavior: smooth; */
}
/* body{overflow-x:hidden;} */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,select,textarea,form,fieldset,legend,body{margin:0;padding:0; font-family:'arita-m','pret-r' ,Arial; }
/* p,span,ul li, div {font-family: "Noto Serif KR", serif;} */
body{
  background-color: #F3F0EA;
  visibility:visible; width:100%; font-size:13px;color:var(--main-black); line-height:1.5em; }
img {
  max-width: 100%;
  object-fit: cover;
}
img,fieldset{border:none;}
em,address{font-style:normal;}
h2,h3,h4 {color: var(--main-brown); font-family: 'arita-m'; font-weight: 400; line-height: 1;}
a{text-decoration:none;color:var(--main-black);}
p,a { font-size: 16px; line-height: 2em; font-family: 'pret-r';}
span {line-height: 1.6;}
li{list-style:none; font-family: 'pret-r';}

@media (max-width:1300px) {
  p,a{ font-size: 14px;}
}

@media (max-width:1024px) {
  p,a{ font-size: 13px;}
}

@media (max-width:768px) {
  /* p,a{ font-size: 13px;} */

  .common-btn {
    width: 117px;
    height: 43px;
    border-radius: 60px;
    box-shadow: 0px 0px 10px #39D9D9, 0px 0px 1px var(--main-blue);
  }
  .common-btn span {
    font-size: 13px;
    text-shadow: 1px 0 0 var(--main-blue), -1px 0 0 var(--main-blue), 0 1px 0 var(--main-blue), 0 -1px 0 var(--main-blue);
    filter: drop-shadow(0 0 6px var(--main-blue));
  }


}


select,textarea{border-radius:0;}
.clear {}
.clear:after {content:"";display:block;clear:both;}
.blind, .sound_only{visibility:hidden;width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
.img_100 {width:100%; height:auto !important; vertical-align:top;}
select{min-width:50px;height:26px;margin:0;padding:0;font-size:12px;line-height:26px;font-family:Dotum,sans-serif;}
.underline {text-decoration:underline; }
.tl { text-align:left;}
.tc { text-align:center;}
.tr { text-align:right;}
.vt {vertical-align:top;}
.mb0 { margin-bottom:0 !important;}
.mb3 { margin-bottom:3px !important;}
.mb20 { margin-bottom:20px !important;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.boxShadow {-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); box-shadow:2px 2px 3px rgba(0, 0, 0, 0.1);}

.transAll015 {-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.transAll03 {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.transAll03_ease {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5 ease; -ms-transition: all 0.5 ease; -o-transition: all 0.5 ease; transition: all 0.5 ease;}
.transAll02_ease {-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.scale01 {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.scale01:hover, .scale01:focus {-ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}


.strongColor01 { color:#ac2525;}

.block1280, .block1024, .block768, .block560, .block480, .block380 {display:none !important;}
.in-block1280, .in-block1024, .in-block768, .in-block560, .in-block480, .in-block380 {display:none !important;}


#skip{position:fixed;top:-9999px;left:0;z-index:1000;width:240px;height:30px;background:#676462;}
#skip a{display:block;height:30px;padding:0 0 0 20px;line-height:30px;font-size:12px;color:#47423E;}
#skip.on{top:0;}









.lSSlideOuter {height:100% !important;}
.lSSlideWrapper {height:100%;}
.lSSlideOuter .lightSlider {height:100% !important;}
.lSSlideWrapper.usingCss .lSFade > * {height:100% !important;}


/*ROOM 미리보기 */
.mainRow {display: flex; width:100%; padding: 7% 0;}
.specialRow {padding: 3% 0;}
.mainRow::after {content:'';display:table;clear:both; }
.mainRow .lSSlideOuter {height: 100%;}
.mainRow .lSSlideWrapper {height: 100%;}
.mainRow .lSSlideWrapper ul {height: 100%;}
.mainRow .lSSlideWrapper ul li {height: 100%;}
.roomImageWrapper {position: relative; height: 100%;}
.mainRow .full {width:100%; display:block;}
.mainRow_tit, .mainRow_pic {}
/* .mainRow_tit {position:relative; width:49.3%; padding-top: 30.56%;} */
.mainRow_tit {position:relative; width:30%; padding: 0 4%;} /*룸리스트 왼쪽영역*/
/* .mainRow_tit.gray { background:#cdcdcd;} */
.mainRow_pic {width:70%; position: relative;} /*룸리스트 오른쪽영역*/
.mainRow_pic ul {}
.mainRow_pic li {overflow:hidden; border: 2px solid rgba(204,170,144,0.3);}
.mainRow_pic li img {max-height: 480px; object-fit: cover; -webkit-transform:scale(1.02, 1.02); -ms-transform:scale(1.02, 1.02); transform:scale(1.02, 1.02); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mainRow_pic li:hover img {-webkit-transform:scale(1, 1); -ms-transform:scale(1, 1); transform:scale(1, 1); opacity: 1; filter: alpha(opacity=100;);}
.mainRow_tit_inner { 
  opacity: 0;
  display: flex; justify-content: center; align-items: center; 
  flex-direction: column; 
  height: 100%; 
  text-align: center;
}
.mainRow_tit_inner .roomlist_thumbnail {width: 280px; height: 280px; border-radius: 50%; overflow: hidden;}
.mainRow_tit_inner span {display:block;}
.room_desc { }
/* information 텍스트 */
span.text_top {
  color: #fff;
  font-size:80px; 
}
span.main_special, span.main_landscape {line-height: 1;}
.text_top strong {}
span.roomTitle {font-family:"HaenamFont", cursive; font-size:4em; color:#3f4255; margin-bottom:3% }
span.text_mid {font-weight:600; color:#3f4255; font-size: 1.3em;  margin-bottom:3%;}
span.text_bot {margin: 10% 0; color: #6e6e72; font-size: 15px; }
.roomImageWrapper .blur_area {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%;
    height: 40px;
    /* backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
}
.roomImageWrapper span.roomName {
    position: absolute; 
    bottom: 5px; 
    left: 10px;  
    color: white; 
    padding: 5px 10px; 
    font-size: 28px; 
    font-family: "pret-r";
    /* font-weight: bold; */
}
.roomImageWrapper .btn_more{
    position: absolute; 
    bottom: 5px; 
    right: 10px;  
    color: white; 
    padding: 5px 10px; 
    font-size: 19px; 
    transition: all 0.3s;
    /* font-weight: bold; */
}
.roomImageWrapper .btn_more:hover {
  transform: translate(7px);
  -webkit-transform: translateX(7px);
}
.btn_gotoroom { display:inline-block; font-family: 'PT Sans', sans-serif;background:#6D798D; color:#fff; font-size:1.23em; font-style:italic;font-weight:bold; padding: 3.7% 10%; padding: 17px 40px; margin-top: 9%;}
.mRoom_arrow_inner {position: absolute; bottom: 5%; left: 10%; width: 100%; max-width: 68px;}
.mainRow_pic .lSAction > a { font-family: 'Oranienbaum', serif; font-size: 6em; text-align:center; line-height:32px;}
.mainRow_pic .lSAction > .lSPrev {left:4%;}
.mainRow_pic .lSAction > .lSNext {right:4%;}
.goToPrevSlide {float:left;}
.goToNextSlide {float:right;}

@media (max-width:1400px) {
  span.text_top {
    font-size: 60px;
  }
}


@media (max-width:1024px){
  .mainRow {flex-wrap: wrap; padding: 10% 0; margin-bottom: 15%;}
  .mainRow_tit {width:100%; } /*룸리스트 왼쪽영역*/
  .mainRow_tit_inner {padding-top: 0;}
  .mainRow_tit_inner .roomlist_thumbnail {display: none;}
  .mainRow_pic {width:100%; min-height: 400px; } /*룸리스트 오른쪽영역*/
  .mainRow_pic li {border: none;}
  .roomImageWrapper {padding: 0 5%;}
  .roomImageWrapper span.roomName { font-size: 18px;}
  .roomImageWrapper .btn_more { font-size: 15px;}
  .roomImageWrapper .blur_area {width: 94%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
  /* .roomImageWrapper span.roomName {left: 25px;}
  .roomImageWrapper .btn_more {right: 25px;} */
  .specialRow {margin-bottom: 0; padding: 0;} /*모바일 스페셜리스트 여백 0*/
}
@media (max-width:768px){
  
  .room_desc {
    float: left;
  }
  span.roomTitle {
    font-size: 3.5em;
  }
  span.text_top {
    font-size: 40px;
  }
  
}




/*스페셜 special 미리보기*/
.mainRow_spe_inner {
  position:relative; width:100%; padding-top:4.6%; padding-bottom:7%;
  gap: 9.5vw;
  display: flex;
}
.special_desc { }
.special_desc span { display:block; text-align:center;}
.special_desc span.text_top { font-size: 18px; padding-bottom: 0; color: #fff;}
.special_desc span.text_top strong{font-size: 70px; line-height: 85px; }
.special_desc span.text_top i {font-style: normal; font-weight: normal; line-height: 40px;}
.special_desc span.text_mid { color: #989898; font-style: italic;}
.special_desc span.text_bot { color:#5b5b5b; margin-top:1%;}

.spe_contents {
  display: flex; 
  width:70%;
} 


.spe_list { 
  display:flex; flex-wrap: wrap; 
  width: 100%;
  position: relative;
}
.spe_list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 55.73vw;
  margin: 1.5%;
  box-sizing: border-box;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.spe_list li.on {
  opacity: 1;
  z-index: 2;
}

.hover-wrapper {
  position: relative;
  height: 100%;
}


.spe_list .img-wrap { position:relative; display: block; height: 100%; cursor: auto; -webkit-box-shadow:4px 4px 5px rgba(0,0,0,0.1); -moz-box-shadow:4px 4px 5px rgba(0,0,0,0.1); box-shadow:4px 4px 5px rgba(0,0,0,0.1); line-height:0; overflow:hidden;}
.spe_list_inner {overflow:hidden; background:#505051; height: 100%; }
.spe_list .img-wrap img { width:100%; height: 100%; object-fit: cover; box-shadow: 3px 6px 8px #00000029; }

.spe_shortcut {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; 
  width: 530px; 
  padding: 0 4%; 
}
.spe_shortcut h2 {
  min-width: 60%;
  text-align: center;
  font-size: 70px;
  font-family: "Dancing Script", cursive;
  line-height: 1;
  margin-bottom: 75px;
}
.spe_shortcut a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px; 
  width: 420px; 
  font-size: 29px; 
  color: #4a4a4a; /* 기본 글자색 - 시안 색상에 맞춰 조정하세요 */
  font-family: 'arita-m';
  margin: 10px 0;
  padding: 10px 0 10px 50px;
  border-radius: 65px; 
  text-align: center; 
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}
.spe_shortcut a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--main-brown);
  z-index: -1;
  transition: width 0.5s ease;
}

.spe_shortcut a.on::before,
.spe_shortcut a:hover::before {
  width: 100%;
}

.spe_shortcut a.on,
.spe_shortcut a:hover {
  color: #fff;
}

.spe_shortcut a span {
  font-size: 18px;
}

.spe_link {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 29px;
  font-size: 21px;
  font-family: 'arita-m';
  color: #fff;
  background-color: #BEAC98; 
  border-radius: 30px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.spe_link:hover {
  background-color: var(--main-brown);
}

@media (max-width:1500px) {
  .mainRow_spe_inner {
    gap: 4.5vw;
  }
  .spe_contents {
    margin-top: 80px;
  }
  .spe_shortcut h2 {
    margin-bottom: 45px;
  }
  .spe_shortcut a {
    width: 370px;
    padding: 4px 0 4px 40px;
    font-size: 26px;
  }
}


@media (max-width:768px){
  .mainRow_spe_inner {
    flex-direction: column;
    padding-top: 100px;
  }
  .spe_shortcut {
    width: 100%;
    padding: 0;
  }
  .spe_shortcut a {
    justify-content: flex-start;
    gap: 20px;
    width: 300px;
    margin: 3px 0;
    padding: 4px 0 4px 30px;
    font-size: 22px;
  }
  .spe_shortcut h2 {
    margin-bottom: 25px;
    font-size: 50px;
  }
  .spe_shortcut a span {
    font-size: 13px;
  }
  .spe_contents {
    margin-top: 20px;
    width: 100%;
    height: 77vw;
  }
  .spe_list {
    width: 90%;
    margin: 0 auto;
  }
  .spe_list li {
    width: 100%;
    margin: 0;
  }
  .spe_link {
    left: 10px;
    bottom: 10px;
    padding: 1px 23px;
    font-size: 14px;
  }
}









@media  (max-width: 1480px){
/*.logo img { width: 70%;}*/
.is-sticky #header {padding-left:40px;}

.btn_gotoroom {padding: 1.5em 3.5em;}

.mainRow_tit::before, .mainRow_spe_inner::before {height:100px;}

.reserve_desc { top:55px;;}

}



@media  (max-width: 1024px){


.topArea {height: 70vh;} /*메인 최상단 슬라이드*/
.lSSlideOuter { position:relative; z-index:1; 
  width: 100%; height: 100% !important;
  overflow: visible;
}
.lSSlideWrapper {width: 100%; height: 100% !important;}

.lightSlider { z-index:1; height: 100% !important;}
.lightslider li { position:absolute; width:100%; height: 100% !important; background-position:center center !important; background-repeat:no-repeat; background-size:cover !important; }


.mRoom_title {padding: 3% 0; margin-bottom: 60px; margin-top:60px;}
.mRoom_title .title01 {font-size:3.2em; padding-bottom:25px; }
.mainRoom .lightslider li.active .txtRoom { opacity: 1; }
.mainRoom .lightslider li.active img { opacity: 0.5; }
.mainRoom .lightslider li.active a { -ms-transform: scale(1.03); -webkit-transform: scale(1.03); transform: scale(1.03); }
.mainRoom .lightslider li .txtRoom {bottom:8%;}
.mainRoom .lightslider li .txtRoom span {font-size:1em; margin-bottom:0;}
.mainRoom .lightslider li .txtRoom small {font-size:0.9em;}
.mainRow_tit {font-size:10px;}
.mRoom_arrow_inner a img {width:20px;}
span.text_roomname {margin-top:1.5em;}

.mainRow_tit_inner {}
.mainRow_tit::before, .mainRow_spe_inner::before {height:90px;}
.reserve_desc {top:55px;}

.special_desc {padding-bottom: 5%;}
.special_desc span.text_bot {display:block;}
.common_typo { text-align:center; padding:4% 0; font-family: 'Cormorant SC', serif; font-size:3em; line-height:1.5em; color:#555; letter-spacing:0.1em; text-transform:uppercase; }
}


@media  (max-width: 768px){
  /* body {overflow-x: hidden;} */
.topArea {height: 50vh;} /*메인 최상단 슬라이드*/

.mainRow_tit {font-size:9px;}
.mRoom_arrow_inner {bottom:7%;}
.mRoom_arrow_inner a img {width:18px;}
.mainRow_tit_inner {}
span.text_roomname {margin-top:1.3em;}
.mainRow_tit::before, .mainRow_spe_inner::before {height:80px;}

.reserve_desc {top:45px;}

.special_desc span.text_top, .reserve_desc span.text_top { font-size:1.2em;}

.common_typo { font-size:5vw; padding:5% 0;}

.spe_overlay { font-size:1.35em;}


}

@media  (max-width: 560px){
.mainRow_tit, .mainMidText {font-size:8px;}
.mRoom_arrow_inner a img {width:16px;}
span.text_roomname {margin-top:1em;}

.mainRow_tit::before, .mainRow_spe_inner::before {height:60px;}

.btn_gotoroom, .btn_gotoreserve {padding:1em 2.5em;}
/* .btn_gotoreserve {float: right; margin-top: 8.5px;} */
.btn_gotoreserve {position:absolute; bottom:0; right:4%; margin:0; }
.reserve_desc {position:relative; float: left; width: 100%; bottom: 0; top:auto; left:0; padding: 5% 4% 0; margin-bottom:2%; }
}

@media  (max-width: 480px){
.mainRow_tit, .mainMidText {font-size:7px;}
.mRoom_arrow_inner a img {width:14px;}
span.text_roomname {margin-top:0.5em;}

.mainRow_tit::before, .mainRow_spe_inner::before {height:40px;}
.btn_gotoroom, .btn_gotoreserve {padding:0.5em 1.5em; margin-top: 1%;}
.room_desc span.text_mid {display:none;}

}


@media  (max-width: 380px){
.mainRow_tit, .mainMidText {font-size:6px;}
.mRoom_arrow_inner a img {width:12px;}
}

.lightslider li img { width:100%; height: 100%; vertical-align:top;}

/*.lSAction a { float:left; display:block; width:82px; height:84px; cursor:pointer; opacity:0.5; filter: alpha(opacity=50;);
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.lSAction a:hover, .lSAction a:focus {opacity:0.8; filter: alpha(opacity=80;);}
.lSAction a.lSNext { background-position:-82px 0;}*/

/*메인 지도/레이아웃 영역 */
.map_cont {display: flex; position: relative; width: 100%; max-height: 634px; margin: 7% 0; padding: 0; overflow: hidden; box-sizing: border-box; background: #F3F0EA;}
.map_cont #indimap, .map_cont #navermap {position: absolute; top: -100px; left: 0;}
.map_cont.con1 {margin-bottom: 0;}
.map_cont.con2 {margin-top: 0;}
.map_cont .img_area {width: 85%; display: flex;}
.map_text, .layout_text {
  width: 8%; display: flex; justify-content: center; align-items: center; 
  border: 1px solid #707070; cursor: pointer; background: #E6E3DD;
}
.address_text {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 15%; display: flex; justify-content: center; align-items: center;}
.map_text p, .layout_text p{
  font-size: 30px; line-height: 45px; font-family:'HakgyoansimBareondotumR','NanumSquareNeo' ,Arial;
  -webkit-text-stroke: 2px #47423E;}
.map_text b, .layout_text b {
  display: inline-block; 
  transform: rotate(90deg);
  font-size: 35px; 
  font-family: serif;
  -webkit-text-stroke: 0px #8B7666; 
  color: #8B7666;
} /*화살표*/
.map_text b {
  transform: rotate(90deg) translateY(-1px);
}
.address_text p {font-size: 18px; color: #47423E; line-height: 23px; }
.address_text span.space {display: none;}
.layout_imgbox { overflow: hidden; box-sizing: border-box; transition: all 1s ease; }
.layout_imgbox img {width: 100%; height: 100%; object-fit: cover;}
.layout_imgbox img.mo {display: none;}

.map_box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 92%;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    overflow: hidden;
    box-sizing: border-box; 
    transition: all 1s ease;
}
.map {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
.root_daum_roughmap {
    width: 100% !important;
    height: 100%;
}
  @media (max-width: 1024px) {
    .map_cont {display: block;}
    .map_cont .img_area {width: 100%; display: block; }
    .map_box {width: 100%;}
    .map_text, .layout_text {width: 100%; }
    .map_text p, .layout_text p {letter-spacing: 5px;}
    .map_text b, .layout_text b { /*화살표*/
      transform: rotate(90deg) translate(6px, -20px);
    } /*화살표*/
    
    .address_text {width: 100%; position: static; margin-top: 30px;}
    .map_cont br {display: none;}
    .root_daum_roughmap {height: 450px;}
    .address_text span.space {display: inline;}
    .layout_imgbox img.mo {display: inline-block;}
    .layout_imgbox img.pc {display: none;}
  }
  @media (max-width: 500px){
    .map_box {height: 300px;}
    .root_daum_roughmap {height: 300px;}
    .root_daum_roughmap .wrap_map {height: 300px !important;}
    .layout_imgbox img.mo {height: auto;}
  }
  
.subTitle { margin:3% 0; font-size:1em; font-weight:400; text-align:center;}
.subTitle .title01 { position:relative; display:inline-block; font-family: 'GowunDodum-Regular',serif; font-size:1.4em; line-height:1.5em; font-weight:200;  letter-spacing:0.05em; padding-left:0.05em; color:#81786f; text-transform:uppercase;}
.subTitle .title01:after { content:"";display:block; width:20px; height:1px; margin:1.2em auto; background:#81786f;}
.subTitle .title02 { display:block; font-size:2.4em; line-height:1.2em;  color:#553f3f; text-transform:uppercase; }
.room .subTitle .title02 span { font-family:'NanumSquareNeo', serif; font-size:0.85em; font-weight:300; letter-spacing:0em; }
.subTitle .title03 { display:block; font-size:1.5em; line-height:1.8em; color:#47423E; margin-top:0.8em;  }


@media  (max-width: 1024px){
.subTitle { margin-bottom:8%;}
.subTitle .title01 {font-size:1.3em;}
.subTitle .title01:after { margin:0.8em auto;}
.subTitle .title02 { font-size:32px;}
.subTitle .title03 { font-size:15px;}
}

@media  (max-width: 770px){
.subTitle .title01 {font-size:1.1em; letter-spacing:-0.05em;}
.subTitle .title01:after { width:15px; margin:0.8em auto;}
.subTitle .title02 { font-size:32px;}
.subTitle .title03 { font-size:15px; margin-top:0;}
}

@media  (max-width: 560px){
.subTitle .title01 {font-size:1em; letter-spacing:-0.05em;}
.subTitle .title01:after { width:12px; margin:0.8em auto;}
.subTitle .title02 { font-size:32px;}
.subTitle .title03 { font-size:15px; margin-top:0;}
}


/* footer */
#footer { 
  position:relative; float:left; 
  width:100%; text-align:center; 
  z-index:15; 
  background: var(--main-brown); 
  color: #fff;
}
#footer:after {content:"";display:block;clear:both;}
/* .footer01 {position:relative; } */
.footer01 .top_btn {
    display: block;
    position: absolute;
    z-index: 3;
    right: 73px;
    bottom: 42px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--main-brown);
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 11px 15px;
    background: #fff;
    border-radius: 50%;
}
.footer01 .top_btn:hover {
    /* color: #fff; */
    /* background: var(--main-blue); */
}


.f_sns{
    position: absolute;
    top: 20px;
    right: 80px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.f_sns a{
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0 20px;
    opacity: 0.9; 
}
.f_sns a img {
    width: 18px;
}
.f_sns a:not(:last-child){
    border-right: 1px solid #fff;
}






.footerContents { position:relative; padding: 1% 0; }
.footer_link { padding:1% 0; }
.footer_link li { display:inline; margin:0 1.5em;}
.footer_link li a { display:inline-block;}
.footer_link li a i { font-size:36px; line-height:36px; }
.footer_link li a i.fa-comments-o { font-size:40px; }
.footer_link li a span {display:block; font-size:11px; line-height:2em;  letter-spacing:-0.02em; margin-top:0.2em; }
/*.footerContents:first-child::before { content:''; position:absolute; bottom:24px; left:50%; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); display:inline-block; width: 27px; height:1px; background:#c4c4c4;  }*/
.footer01 span.footTitle {
    display: block;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.1em;
    opacity: 0.9;
    text-transform: uppercase;
}
.footer01 span.footContent {
  display:block; text-align:center; 
  font-family: 'arita-m', sans-serif; 
  
}

.footer01 span.footContent a {
  font-size: 25px;
  letter-spacing: 0.2em;
  font-family: 'arita-m';
}
.footer01 span.footBank {font-size: 1em; color: #000; margin-top: 1.05%; display: block;}

/* .footer02 {background:#efefef;} */
.footerLogo { padding: 2.5% 0 3% 0;}
.footerInfo { line-height:2; padding:0.5% 0 1%; text-align:center; font-size:16px; opacity: 0.9; }
.footerInfo a { }
.footerInfo ul { display:inline-block; }
.footerInfo li {float:left;}
.footerInfo li:first-child::before { display:none; }
/*.footerInfo li::before { content:'|'; float:left; margin:0 5px; }*/
.footerInfo li span { 
  content:'|'; 
  float:left; 
  margin:0 5px; 
  line-height: 2;
  opacity: 0.6;
}

.btn_top { position:absolute; bottom:0; left:50%; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); display:inline-block; width:60px; height:60px; }
.btn_top img { width:100%; }


.footer02 .footerInfo ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    width: 500px;
}

.footer03 {
  margin: 0 80px;
  border-top: 1px solid #fff;
}
.footer03 .footerInfo {
  padding: 0;
}
.yeowan_li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  font-size: 14px;
}

.yeowanlogo {
    width: 80px;
    transform: translateY(3px);
    /* filter: invert(0.8); */
}





@media  (max-width: 1024px){
  #footer {  
    padding: 80px 5% 0;
  }

  .f_sns {
    right: 5vw;
  }
  .f_sns a {
    font-size: 13px;
    gap: 5px;
    padding: 0 14px;
  }

  .footer01 .top_btn { 
      margin-top: 0;
      padding: 8px 0px;
      bottom: 46px;
      right: 5%;
      transform: none;
      width: 44px;
      height: 44px;
      font-size: 11px;
  }
  .footer01 span.footTitle {
    font-size: 13px;
  }
  .footer01 span.footContent a {
    letter-spacing: 0.1em;
  }

  .footerInfo {
    width:100%; margin:0 auto; 
    font-size:14px;
  }
  .footer02 .footerInfo {
    padding-bottom: 50px;
  }   
  .footer02 .footerInfo ul {
      margin: 0;
      width: auto;
  }
  
  .footer03 {
    margin: 0;
  }
  .btn_top {width:30px; height:30px;}
  .gnb_sub { background-color: inherit;}
}




.topArea { position:relative; z-index:1; height: 100vh; }
.topArea .main_slidetext {
  position: absolute; bottom: 50px; left: 50px; z-index: 11;
  color: #fff; font-size: 30px; letter-spacing: 6px;
  font-weight: bold;
}
.topArea .main_slidetext span {
  font-size: 20px;
  font-family:'HakgyoansimBareondotumR','NanumSquareNeo' ,Arial;
  letter-spacing: 3px;
}
/* .topArea { position:relative; z-index:31;} */
.topArea02 .lSAction, .roomSlider01 .lSAction { position:absolute; width:100%; left:0; top:50%; margin-top:-15px; z-index:2;}
.topArea .lSAction > a, .topArea02 .lSAction > a, .roomSlider01 .lSAction > a {  /*이전다음 페이지이동 버튼*/
  position: absolute;
  display: inline-block;
  width: 48px;
  height: 48px;
  top: 0;
  margin: 0;
  font-family: 'arita-m', serif;
  font-size: 18px;
  letter-spacing: 0.07em;
  line-height: 1em;
  color: #fff;
  text-align: center;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}
.progress-bar-container {  /*프로그레스바*/
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: 2px;
  width: 232px;
  max-width: 54vw;
  background-color: rgba(255, 255, 255, 0.3);
}
.progress-bar {
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: all 0.4s;
}
.pagination-container { /*페이지네이션*/
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  /* background-color: rgba(0, 0, 0, 0.3); */
  color: white;
  padding: 8px 10px;
  border-radius: 15px;
  font-size: 16px;
  letter-spacing: 0.2em;
}
.pagination-container span {
  margin: 0 6px;
}
.mainRow_pic .progress-bar-container {  /*룸리스트 프로그레스바*/
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: 5px;
  width: 48%;
  background-color: #707070;
}
.mainRow_pic .progress-bar {
  background-color: var(--main-blue);
}
.mainRow_pic .pagination-container { /*룸리스트 페이지네이션*/
  position: absolute;
  bottom: -13.3%;
  left: 23%;
  transform: translateX(-50%);
  z-index: 10;
  /* background-color: rgba(255, 255, 255, 0.3); */
  color: #707070;
  padding: 8px 10px;
  border-radius: 15px;
  font-size: 14px;
}
.mainRow_pic .lSAction {display: none !important;}
.mainRow_pic .lSAction_outside {display: block !important;}
/* .mainRow_pic .lSAction_outside .lSPrev {display: none !important;} */
.mainRow_pic .lSAction_outside .lSPrev {display: block !important;}
.mainRow_pic .lSNext_outside {
  right: 22% !important;
  top: 108.3%;
}
.total_List .pagination-container { /*통합내비게이션 페이지네이션*/
  bottom: -20.5%;
  font-size: 17px;
} 
.total_List .progress-bar-container {  /*통합내비게이션 프로그레스바*/
  bottom: -16%;
}
.total_List .lSNext_outside { /*통합내비게이션 이동 화살표*/
  top: 113.3%;
}

.topArea02 .lSAction > a.lSPrev, .roomSlider01 .lSAction > a.lSPrev { left:10px;}
.topArea02 .lSAction > a.lSPrev:hover, .roomSlider01 .lSAction > a.lSPrev:hover { left:5px;}
.topArea02 .lSAction > a.lSNext, .roomSlider01 .lSAction > a.lSNext {right:10px;}
.topArea02 .lSAction > a.lSNext:hover, .roomSlider01 .lSAction > a.lSNext:hover { right:5px;}
.topArea .count, .topArea02 .count { position:absolute; display:block; width:60px; right:50px; bottom:40px; text-align:center; font-family: 'Playfair Display', "GowunDodum-Regular", serif; font-size:1.5em; line-height:1.5em; color:#fff;  -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);z-index:5;}
.topArea .count .current, .topArea02 .count .current { position:absolute; right:35px; top:-10px;}
.topArea .count .count_line {}
.topArea .count .total, .topArea02 .count .total { position:absolute; left:35px; bottom:-5px;}
.topLine { position:absolute; width:1px; height:44%; background:url(../images/bg/white_30.png); top:28%; z-index:2;}
/* .board .topLine, .board .lSAction { display:none !important;} */
.board .topLine { display:none !important;}
.topLine01 { left:80px;}
.topLine02 { right:80px;}
.btn_scroll_box { position:absolute; width:88px; left:50%; bottom:10%; margin-left:-44px; opacity:0; filter: alpha(opacity=0;);z-index:3; }
.active.topArea .btn_scroll_box { opacity:1; filter: alpha(opacity=100;); bottom:8%; transition: all 0.3s ease 1.2s; }
.topArea .btn_scroll {display:block;  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.topArea .btn_scroll img { width:100%; vertical-align:top;}
.topArea .btn_scroll:hover, .topArea .btn_scroll:focus { margin-bottom:-10px;}

.btn_detail { display:inline-block; font-family: 'Abhaya Libre', serif; font-size:1.6em; line-height:2em; color:#fff; padding:5px 50px; border:1px solid rgba(255, 255, 255, 0.3); }
.btn_detail span { display:inline-block; font-size:1.2em; margin-left:10px;}

.btn_reser01 {display:inline-block; font-family: 'Abhaya Libre', serif; font-size:1.6em; line-height:2em; color:#3b3b3b; padding:5px 50px; border:1px solid #9a9a9a;}
.btn_reser01 span { display:inline-block; font-size:1.2em; margin-left:10px;}

/* ISAction 이전 다음 페이지이동버튼 박스*/
.topArea .lSAction {
  position: absolute; 
  bottom: 60px; left: 50%; 
  width: 367px;
  max-width: 85vw;
  height: 30px; 
  z-index: 10; 
  transform: translateX(-50%);
}
/* .topArea .lSPrev {display: none !important; position:absolute;top:0;left:0;}  */
/* 이전버튼 안보이게 */

.topArea .lSPrev {position:absolute;top:0;left:0;} 

.topArea .lSNext {position:absolute;top:0;right:0;}

@media(min-width:769px){
  .topArea .lSPrev:hover {left:-5px;}
  .topArea .lSNext:hover {right:-5px;}
}


@media (max-width:768px){ 
  

  .topArea .main_slidetext { /*탑 슬라이드 하단 텍스트 */
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    width: max-content;
  }
  .topArea .main_slidetext span { /*탑 슬라이드 하단 작은 텍스트 */
    font-size: 13px;
  }
  .topArea .roompre_slidetext {
    bottom: 5%;
  }
  /*룸리스트*/
  .mainRow_pic .pagination-container {
    bottom: -14.3%;
    left: 9%;
}
.mainRow_pic .progress-bar-container {
  width: 62%;
}
}
@media (max-width:480px){
  .mainRow_pic .pagination-container {
    bottom: -14%;
    left: 9%;
}
}
@media (max-width:400px){
  .topArea .main_slidetext { /*탑 슬라이드 하단 텍스트 */
    font-size: 15px;
  }
  .topArea .main_slidetext span { /*탑 슬라이드 하단 작은 텍스트 */
    font-size: 11px;
  }
}

@media  (max-width: 1680px){
}

@media  (max-width: 1480px){
.btn_scroll_box {  width:44px;  margin-left:-22px;}
.main .btn_scroll {width: 200px; line-height: 27px; font-size: 14px;}
.btn_scroll::before {width: 26px; -webkit-transform: rotate(45deg) translate(-2px,-9px);-ms-transform: rotate(45deg) translate(-2px,-9px);transform: rotate(45deg) translate(-2px,-9px);}
.active.topArea .btn_scroll_box { opacity:1;  bottom:8%; transition: all 0.3s ease 1.2s; }

.mainList li .mainTitle { position:absolute; width:100%; left:0; top:0; margin:0;}

.topArea .lSAction {}
}

@media  (max-width: 1280px){

.none1280 {display:none;}
.block1280 {display:block !important;}
.in-block1280 {display:inline-block !important;}

}

@media  (max-width: 1024px){

.none1024 {display:none !important;}
.block1024 {display:block !important;}
.in-block1024 {display:inline-block !important;}

.btn_detail { font-size:0.95em; padding:2px 15px;}
.btn_reser01 { font-size:0.95em; padding:2px 20px;}
.btn_detail span, .btn_reser01 span {  margin-left:5px;}

.topArea .lSAction > a.lSPrev, .topArea02 .lSAction > a.lSPrev, .roomSlider01 .lSAction > a.lSPrev { 
  /* left:5px; */
}
.topArea { 
  z-index:auto; 
 }


.mainListType01 .mainListTitle {width:30%;}
.mainListType01 .mainListThumb {width:70%;}

.mainListType02 .mainListTitle {width:33.35%;}
.mainListType02 .mainListThumb {width:66.65%;}

.mainListType03 .mainListTitle {width:37.66%;}
.mainListType03 .mainListThumb {width:62.34%;}
.topArea .btn_scroll, .btn_scroll {display:none;}


.mainRow_pic .lSNext_outside {
  right: 19% !important;
  top: 108.3%;
}

}

@media  (max-width: 768px){

  .mainRow_pic .lSNext_outside {
    right: 5% !important;
    top: 109.3%;
}

.none768 {display:none !important;;}
.block768 {display:block !important;;}
.in-block768 {display:inline-block !important;;}

.roomList li .text { font-size:0.7em;letter-spacing:-0.1em;}
.mainListType01, .mainListType02, .mainListType03 {width:100%; margin:0;}
.mainListType01 .mainListTitle {width:35%;}
.mainListType01 .mainListThumb {width:65%;}

.mainListType02 .mainListTitle {width:35%;}
.mainListType02 .mainListThumb {width:65%;}

.mainListType03 .mainListTitle {width:35%;}
.mainListType03 .mainListThumb {width:65%;}
.mRoom_title {padding: 3% 0;}
.footer_logo {top:auto; -webkit-transform:none; -ms-transform:none; transform:none; margin-bottom:0.5em;}
.footer_top {margin-bottom:0.5em;}
.topArea { height: 83.25vw;}



.lSSlideWrapper {
  overflow: visible;
}
/* 프로그레스바 */
.progress-bar-container {
    bottom: -38px;
    background-color: rgba(132, 115, 98, 0.3);
}
.progress-bar {
    background-color: rgba(132, 115, 98, 1);
}
/* 페이지네이션 */
.pagination-container {
    bottom: -76px;
    color: #847362;
    font-size: 13px;
}

/*슬라이드 화살표*/
.topArea .lSAction {
  bottom: -77px;
  background: #F3F0EA;
  width: 100vw;
  max-width: 100vw;
  height: 77px;
} 
.topArea .lSAction > a { 
  font-size:15px; 
  top: 29px;
  color: #847362;
}
.topArea .lSPrev {
  left: 20px;
}
.topArea .lSNext {
  right: 20px;
}

.topArea .lSAction > a.lSPrev, .topArea02 .lSAction > a.lSPrev, .roomSlider01 .lSAction > a.lSPrev {
 
}
.footerContents { padding:2% 0;}

.footer_link { padding:2% 0; }
.footer_link li {  margin:0 1em;}
.footer_link li a { display:inline-block;}
.footer_link li a i { font-size:24px; }
.footer_link li a i.fa-comments-o { font-size:28px; }
.footer_link li a span { font-size:8px; letter-spacing:-0.05em; margin-top:0.2em; }


}

@media  (max-width: 560px){

.none560 {display:none !important;;}
.block560 {display:block !important;;}
.in-block560 {display:inline-block !important;;}
.footer_logo {position:relative; width:100%;}
.footer_info {padding-left:0; text-align:center;}
.footerItem {display:inline-block;}
.footerDivider {display:none;}
.footerLogo img { width:90px; }
.footerContents { padding-bottom:10px;}

/*슬라이드 화살표*/
.topArea .lSAction {
  /* width: 93%; 
  bottom: -3.5%; */
} 
.topArea .lSAction > a, .topArea02 .lSAction > a, .roomSlider01 .lSAction > a { 
  /* width: 28px;
  height: 28px;
  line-height: 20px; */
}

  /* .topArea .lSAction > a { font-size:2.5em; } */

}

@media  (max-width: 480px){

.none480 {display:none !important;;}
.block480 {display:block !important;;}
.in-block480 {display:inline-block !important;;}
/* .footer01 span { display:none;} */
.footer01 a { display:block; text-align:center; margin: 5px 0;}
.mainRow_pic .lSNext_outside { /*메인 룸리스트 화살표 */
    right: 5% !important;
    top: 109.3%;
}
}


@media  (max-width: 380px){

.none380 {display:none;}
.block380 {display:block;}
.in-block380 {display:inline-block;}
}
.lightslider .item, .lightslider .owl-item, .lightslider li {position:relative;}
.item {width:100%!important;}
.owl-carousel .item {background-size:cover; background-position:center bottom; }
.owl-carousel .owl-item {position:relative;}
/* Feel free to change duration  */ 
.animated  {
  -webkit-animation-duration : 1000 ms  ;
  animation-duration : 1000 ms  ;
  -webkit-animation-fill-mode : both  ;
  animation-fill-mode : both  ;
}  
/* .owl-animated-out - only for current item */ 
/* This is very important class. Use z-index if you want move Out item above In item */ 
.owl-animated-out {
  z-index : 1 
   }
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */ 
.owl-animated-in {
  z-index : 0 
   }
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */ 
.fadeOut  {
  -webkit-animation-name : fadeOut  ;
  animation-name : fadeOut  ;
}  
@-webkit-keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}

@media (max-width:350px) {
  .none350 { display: none;}
}

/* 이펙트 모음*/

.scale-up {
  transform: scale(0.7);
  filter: brightness(0.5);
  transition: all 1.5s ease-in-out;
}
.scale-up.active {
  transform: scale(1);
  filter: brightness(1);
}

/* 테두리 모션 */
.draw-box {
  --draw-color: #fff;
  --draw-size: 1px;
  --draw-dur: 1.2s;
  --draw-delay: 0s;
  position: relative;
}
.draw-box.brown-box {
  --draw-color: var(--main-brown);
}
.draw-box::before,
.draw-box::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--draw-color), var(--draw-color)),
    linear-gradient(var(--draw-color), var(--draw-color)),
    linear-gradient(var(--draw-color), var(--draw-color));
  background-size: 0 var(--draw-size), var(--draw-size) 0, 0 var(--draw-size);
}

/* 왼쪽 절반: 상단 중앙 → 왼쪽 → 아래 → 하단 중앙 */
.draw-box::before {
  left: 0;
  background-position: right top, left top, left bottom;
}
/* 오른쪽 절반 */
.draw-box::after {
  right: 0;
  background-position: left top, right top, right bottom;
}

/* 감지되면 실행 */
.draw-box.active::before,
.draw-box.active::after {
  animation: drawBox var(--draw-dur) linear var(--draw-delay) forwards;
}

@keyframes drawBox {
  0%   { background-size: 0 var(--draw-size),    var(--draw-size) 0,    0 var(--draw-size); }
  35%  { background-size: 100% var(--draw-size), var(--draw-size) 0,    0 var(--draw-size); }
  65%  { background-size: 100% var(--draw-size), var(--draw-size) 100%, 0 var(--draw-size); }
  100% { background-size: 100% var(--draw-size), var(--draw-size) 100%, 100% var(--draw-size); }
}






/* 한지 효과 */
.text-hanji span {
  
}
/* 왼쪽부터 */
.text-hanji .char {
    opacity: 0;
    filter: blur(8px) brightness(1.5);
    transform: scale(1.2);
}

.text-hanji.active .char {
    animation: hanjiInk 0.7s ease-out forwards;
    animation-delay: calc(var(--char-index) * 0.1s);
}
.text-hanji.active .text-line[data-line="2"] .char {
    animation-delay: calc(1.5s + var(--char-index) * 0.1s);
}
/* 오른쪽부터 */
.text-hanji.right .char {
    opacity: 0;
    filter: blur(8px) brightness(1.5);
    transform: scale(1.2);
}

.text-hanji.right.active .char {
    animation: hanjiInk 0.7s ease-out forwards;
    animation-delay: calc((var(--char-count) - 1 - var(--char-index)) * 0.1s);
}

.text-hanji.right.active .text-line[data-line="2"] .char {
    animation-delay: calc(
        1.5s + (var(--char-count) - 1 - var(--char-index)) * 0.1s
    );
}
@keyframes hanjiInk {
    0% {
        opacity: 0;
        filter: blur(8px) brightness(1.5);
        transform: scale(1.2);
    }
    50% {
        opacity: 0.7;
        filter: blur(3px) brightness(1.1);
    }
    100% {
        opacity: 1;
        filter: blur(0px) brightness(1);
        transform: scale(1);
    }
}