@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
/* Swiper CDN */
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
@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;
}

@font-face {
    font-family: 'pret-sb';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'pret-b';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'pret-eb';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'gangwon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    /* src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2); */
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2);
    /* src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2); */
    font-weight: 400;
    font-display: swap;
}
  


html{width:100%;overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:none;}
body{overflow-x:hidden; word-break: keep-all;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,select,textarea,form,fieldset,legend {
    margin:0;padding:0; font-family:'Noto Serif KR', 'MaruBuri','pret-r','Noto Sans KR',"돋움",Arial; 
    font-weight: 500;
}

body{visibility:visible; width:100%; font-size:13px;color:#2A2A2A; background:#fff; line-height:1.5em;  }
h2,h3,h4 { color: var(--main-brown); line-height: 1.33; font-weight: 400;}
p { font-size:  18px; line-height: 1.777; font-family: 'pret-r';}
img,fieldset{border:none;}
em,address{font-style:normal;}
a{text-decoration:none;color:#2A2A2A;}
li{list-style:none;font-family: 'pret-r';}
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;}
.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.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;}
.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, .block1200, .block1024, .flex1024, .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:#333;}
#skip.on{top:0;}
#header-sticky-wrapper { position:absolute; width:100%; -webkit-transition: alsl 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:30; top:0; left:0; }

#header {position:absolute; opacity:0; z-index:30; text-align:center; float:left; width:100%; top:0; left:0; 
  /* height:87px; */
}

.logo { 
  margin: 37px auto 5px;
  width: 160px; 
  height: 108px;
  display: flex;
  align-items: center; 
}
.logo a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/html/images/common/logo.png) no-repeat center center;
  background-size: cover;
}
.logo img {width: 100%; float: left;}

/* 마우스오버, 스크롤 다운 시 로고 */
.logo img.black { display: none;}


.btn_nav { 
  position:absolute; display:none; 
  width:26px; 
  height:22px; 
  right:10px; 
  top:11px;
  -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; cursor:pointer; z-index:21;
}
.btn_nav .line {
  position: absolute; display: block; 
  width:32px; 
  height:28px; 
  right:4px; 
  top:4px; 
}
.btn_nav .line span {
  position: absolute; display: block; 
  width:32px; 
  height:2px; 
  right: 0;
  background: rgba(255,255,255,0.8); 
  /* transform: translate(-50%, 0px); */
  -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; 
}
.btn_nav .text { position:absolute; left:0; top:0; font-size:2em; line-height:0.8em; font-style:italic; color:#fff; text-align:center; -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; -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);  }

.btn_nav .line .line01 { top:2px; }
.btn_nav .line .line02 { 
  top:calc(50% - 1px);
  width: 24px;
 }
.btn_nav .line .line03 { bottom:2px; }

.btn_nav.open_nav .line01 {
  background: var(--sub-brown);
  transform: translate(0, 7.5px) rotate(45deg); -ms-transform: translate(0, 7.5px) rotate(45deg); -webkit-transform: translate(0, 7.5px) rotate(45deg);
}
.btn_nav.open_nav .line02 {
  background: var(--sub-brown);
  opacity: 0; 
 }
.btn_nav.open_nav .line03 {
  background: var(--sub-brown);
  transform: translate(0, -14px) rotate(-45deg); -ms-transform: translate(0, -14px) rotate(-45deg); -webkit-transform: translate(0, -14px) rotate(-45deg); 
}


:root {
    --main-brown: #b77539;
    --sub-brown: #503F30;
    --main-black: #232323;
    
}
.gangwon {
  font-family: 'gangwon';
}

section { 
  padding: 200px 13.23vw 50px;
  position: relative;
}

.block768 { display: none;}
.mb40 { margin-bottom: 40px;}
.mb80 { margin-bottom: 80px;}


/* 공통 타이틀 */
.common-title {
  font-size: 66px;
  line-height: 1.4;
  color: var(--main-brown);
  text-align: center;
}

/* '공통 타이틀' outline */

.common-title .outline {
  font-size: 1.288em;
  color: #fff;
  text-shadow: 
    -1px -1px 0 var(--main-brown),
     1px -1px 0 var(--main-brown),
    -1px  1px 0 var(--main-brown),
     1px  1px 0 var(--main-brown);
  

}
@media (max-width:1400px){
  .common-title { font-size: 45px;}
}
@media(max-width:768px){
  .common-title { font-size: 28px;}
}



/* ===== GNB 기본 ===== */
.gnbArea {
    position: relative;
}
@media (min-width:1200px){
  #header:hover, #header-sticky-wrapper.is-sticky #header:hover {
    background: #fff;
  }
  #header-sticky-wrapper.is-sticky #header {
    background: rgba(255,255,255,0.8);
  }
  #header:hover .depth1,
  #header-sticky-wrapper.is-sticky .depth1
  {
    color: var(--main-black);

  }
  #header-sticky-wrapper.is-sticky .logo {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 3.13%;
    margin: 0;
    width: 71px;
    height: 79px;
  }
  #header:hover .logo a, #header-sticky-wrapper.is-sticky .logo a {
    background: url(/html/images/common/logo_black.png) no-repeat center center;
    background-size: cover;
  }
  
}


.gnbArea::before {
    content: '';
    position: absolute;
    top: 85px;
    left: 0;
    width: 100%;
    height: 0px;
    box-shadow: 0px 1px 3px #00000029; 
}
.gnbArea:hover::before {
    height: 1px;
}

/*  바로가기 */
.academy-link {
  position: absolute;
  top: 50%;
  right: 2.55vw;
  z-index: 100;
  transform: translateY(-50%);
  width: 177px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  border: 1px solid #fff;
  font-size: 18px;
  font-family: 'pret-m';
}
.academy-link:hover {
  background: var(--main-green);
  color: #2A2A2A;
  border: 1px solid var(--main-green);
}

/* 1depth */
.gnb {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.gnb > li {
    position: relative;
    min-width: 140px;
    text-align: center;
}

/* 1depth 링크 */
.depth1 {
    display: block;
    padding: 33px 0;
    font-size: 20px;
    font-family: 'pret-r';
    color: #fff;
}
.depth1_mobile { display: none;}
/* ===== 2depth (컬럼형) ===== */
.gnb_sub {
    display: none; /* 기본 숨김 */
    padding: 12px 0 10px;
}

.gnb_sub li {
    margin: 11px 0;
}

.depth2 {
    font-size: 18px;
    color: #000;
    position: relative;
}

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

/* ===== 전체 펼침 트리거 ===== */
.gnbArea:hover .gnb_sub {
    display: grid;
}
/* .gnb_sub.room {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;

} */
@media (min-width:1200px){

  
  /* 메뉴 마우스오버 시 라인 생성*/
  .gnbArea::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 86px;
      width: 0;
      height: 2px;
      background: #707070;
      transform: translateX(-50%);
      transform-origin: center;
      transition: width 1s ease-in-out;
  }
  .gnbArea:hover::before {
      width: 80%;
      height: 2px;
  }

  /* 서브메뉴 배경 */
  .gnbArea::after {
      content: '';
      position: absolute;
      top: 87px;
      left: 0;
      width: 100%;
      height: 310px; /* 서브메뉴 높이에 맞게 조절 */
      background: #fff;
      border-top: 1px solid #ddd;
      display: none;
      z-index: -1;
  }
  .gnbArea:hover::after {
      display: block;
  }
  .depth2:hover {
    color: var(--main-brown);
  }
}




/* .gnb > li > .depth1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 86px;
    width: 100%;
    height: 2px;
    background: var(--main-green);
    transform: scaleX(0);
    transition: transform 0.3s;
} */

/* hover & 활성 */
.gnb > li.this > .depth1::after,
.gnb > li:hover > .depth1::after,
.depth2:hover::after {
    transform: scaleX(1);
}

.gnb > li.this > .depth1,
.gnb > li:hover > .depth1 {
    /* color: var(--main-green); */
    font-family: 'pret-b';
}

/* 스크롤 다운 상태 (sticky) */

/* #header .logo img.white { display: block; }
#header .logo img.black { display: none; }

#header.logo-black .logo img.white { display: none; }
#header.logo-black .logo img.black { display: block; } */

#header-sticky-wrapper.is-sticky .gnbArea {
  /* background: rgba(0, 0, 0, 0.8); */
}
/* #header-sticky-wrapper.is-sticky .depth1 {
  color: #000;
} */
@media (max-width:1650px){
  .gnb {gap: 0;}
  .gnb > li { min-width: 120px;}
  .depth1, .depth2 { font-size: 16px;}
  .academy-link {
    font-size: 14px;
    width: 140px;
    height: 37px;
  }
}

@media (max-width:1400px) {
  p { font-size:  16px; }
}
@media (max-width: 1200px) {

  .common-title {
    font-size: 30px;

  }
  p { font-size:  14px; }

  /*  바로가기 링크 */
  .academy-link {
    top: auto;
    bottom: 5px;
    right: 16px;
    border: none;
    background: var(--main-green);
    color: #000;
    line-height: 2.6;
  }

    /* 전체 메뉴 패널 */
    .gnbArea {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #fff;
        padding: 80px 20px 40px;
        transition: right 0.3s;
        z-index: 999;
    }
    .gnbArea::before {
      top: 50px;
    }
    .gnbArea.open {
        right: 0;
    }
    #header.open_nav .gnbArea::before {
        height: 0;
    }
    /* 메뉴 구조 변경 */
    .gnb {
        flex-direction: column;
        gap: 0;
    }

    .gnb > li {
        text-align: center;
    }

    /* 1depth */
    .depth1 {
        padding: 18px 0;
        font-size: 20px;
    }

    .depth1_mobile {
        display: block;
        padding: 25px 0;
        color: #000;
        font-size: 25px;
        letter-spacing: 0.05em;
        font-family: 'pret-r';
        position: relative;
    }
    .gnb > li > .depth1_mobile::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 9px;
        width: 75px;
        height: 2px;
        background: var(--main-green);
        transform: translateX(-50%) scaleX(0);
        transition: transform 0.3s;
    }

    /* 메뉴 열려있을 때 */
    .gnb > li.open > .depth1_mobile {
        color: var(--main-green);
    }
    .gnb > li.open > .depth1_mobile::after {
        transform: translateX(-50%) scaleX(1);
    }
    
    .gnb > li > .depth1 {
        display: none; /* PC용 숨김 */
    }

    /* 2depth */
    .gnb_sub {
        display: none;
        padding: 0 0 15px 0;
    }

    .gnb_sub li {
        margin: 13px 0;
    }

    .depth2 {
        font-size: 18px;
        color: var(--sub-brown);
    }

    /* hover 제거 */
    .gnbArea:hover .gnb_sub {
        display: none;
    }

    /* PC용 효과 제거 */
    .gnbArea::after,
    .depth1::after,
    .depth2::after {
        display: none;
    }
    .mb40 { margin-bottom: 25px;}
    .mb80 { margin-bottom: 50px;}
}
@media (max-width:768px) {
  p { font-size:  13px; }
}

/* .contents_inner { display:inline-block; width:100%; max-width:1530px; margin:0 auto; } */
.mainRow {width:100%; display:inline-block; float:left; }
.mainRow::after {content:'';display:table;clear:both; }

.mainRow .full {width:100%; display:block;}
/*.mainRow_tit, .mainRow_pic {height:540px;float:left;}*/
.mainRow_tit, .mainRow_pic {float:left;}
/* .mainRow_tit {position:relative; width:49.3%; padding-top: 30.56%;} */
.mainRow_tit {position:relative; width:49.3%; padding-top: 29.8%;}
/* .mainRow_tit.gray { background:#cdcdcd;} */
.mainRow_pic {width:50.7%;}
.mainRow_pic li {overflow:hidden;}
.mainRow_pic li img {float:left; -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 {position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%;text-align:left;    line-height:1;  padding-right: 15%; }
.mainRow_tit::before {content:'';position:absolute;top:0;left:0;width:67%;height:30%; background:#ded7d7; }
.mainRow_tit_inner span {display:block;}
.room_desc { float:right; }
span.text_top {color: #81786f; font-size:1.5em; line-height: 0.85; margin-bottom: 4%;}
.text_top strong { color:#553f3f; font-size:1.3em; font-weight:500;}
span.roomTitle {font-size:4.6em; line-height:1.2em; color:#553f3f; margin-bottom:3% }
span.text_mid {color:#553f3f; font-size: 1.3em;  margin-bottom:3%;}
span.text_bot {color: #6e6e72; font-size: 1.1em; margin-top: 2%; line-height: 1.5; }
span.text_roomname {margin-top:2.5em;font-size:1.23em;}
span.roomName {display:none;}
.btn_gotoroom { display:inline-block; background:#7d6969; color:#fff; font-size:1.23em; font-style:italic;font-weight:bold; padding: 3.7% 10%;     padding: 17px 40px; margin-top: 4%;}
.mRoom_arrow_inner {position: absolute; bottom: 5%; left: 10%; width: 100%; max-width: 68px;}
.mainRow_pic .lSAction > a { font-size: 5em; text-align:center; line-height:32px;}
.mainRow_pic .lSAction > .lSPrev {left:4%;}
.mainRow_pic .lSAction > .lSNext {right:4%;}
.goToPrevSlide {float:left;}
.goToNextSlide {float:right;}

.mainRow_spe_inner {position:relative; float:left; width:100%; padding-top:4.6%; padding-bottom:7%;}
.mainRow_spe_inner::before {content:'';position:absolute;top:0;right:0;width:37%;height:125px; background:#ded7d7; z-index: -1; }
.special_desc { width:58.2%; float:right; padding-left:1%;}
.special_desc span { display:block; text-align:left;}
.special_desc span.text_top { margin-bottom:0.5%; }
.special_desc span.text_mid { font-style:italic; color: #989898; font-style: italic;}
.special_desc span.text_bot { color:#5b5b5b; margin-top:1%;}
.spe_list { display:inline-block; max-width:1360px; width:100%; margin-top:4%; }
.spe_list li { width:33.333333%; float:left; padding:2%; }
.spe_list a { position:relative; display:inline-block; padding: 5.64%; -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; }
.spe_list a img { width:100%; -webkit-transform:scale(1.02,1.02); -ms-transform:scale(1.02,1.02); transform:scale(1.02,1.02); 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; }
.spe_list li:hover img {-webkit-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); opacity: 1; filter: alpha(opacity=100;); }
.spe_overlay {position:absolute; width:100%; text-align:center; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);  transform:translate(-50%,-50%); color:#fff; font-size:2em; text-transform:uppercase; }

.mainRow.reserve { position:relative; padding-top:120px; }
.mainRow.reserve::before {content:'';position:absolute;top:0;left:0;width:37%;height:125px; background:#ded7d7; z-index: -1; }
.reserve_desc {position: absolute; text-align: left; top: 85px; left: 20.8%;}
.reserve_desc span {display:block;}
.btn_gotoreserve {display: inline-block; background: #7d6969; color: #fff; font-size: 1.23em; font-style: italic; font-weight: bold; padding: 3.7% 10%; padding: 17px 40px; margin-top: 4%;}


.footer_outer{display:inline-block;width:100%;max-width:1530px;margin:0 auto;padding:3% 0}
.footer_inner{position:relative}
.footer_logo{position:absolute;top:50%;left:0;width:240px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.footer_info{padding-left:240px;text-align:left}
.footer_top{margin-bottom:1.5em}
.footer_top_item{color:#000;font-size:1.15em;font-weight:600}
.footer_bot,.footer_admin{color:#888;font-size:12px}

.main_sentence {padding:5% 0;}
.main_sentence span {display:block;}
.sentence_img {margin-bottom:3%;}
.sentence_tit {font-size:1.3em; line-height:1.5em; font-weight:500; color:#181716; margin:1% 0; white-space:nowrap; letter-spacing:-0.02em; }
.sentence_en {font-size:1.07em; line-height:1.8em; letter-spacing:-0.02em; color:#5b5b5b; }


.mainList {position:relative; z-index:1;}
.mainList:after {content:"";display:block;clear:both;}
.mainList li:first-child {margin-top:0;}
.mainList li { position:relative; float:left; margin-top:7%;}
.mainList li a { display:block;}
/*.mainList li img { width:100%; vertical-align:top;}*/
/*.mainListTitle {height:333px;}*/
.mainListThumb {position:absolute; height:100%; width:100%; top:0; background-size:cover; background-repeat: no-repeat; background-position: center;}
.mainList li .mainListThumb a {display:inline-block; width:100%; height:100%;}
.mainListType01 {width:92.3%; margin-left:7.7%;}
.mainListType01 .mainListTitle {width:18.8%; float:left;}
.mainListType01 .mainListThumb {width:81.2%; right:0;}
.mainListType02 {width:83.1%; margin:0 8.25%;}
.mainListType02 .mainListTitle {width:20.9%; float:right;}
.mainListType02 .mainListThumb {width:79.1%; left:0;}
.mainListType03 {width:73.5%; margin-left:26.5%;}
.mainListType03 .mainListTitle {width:23.6%; float:left;}
.mainListType03 .mainListThumb {width:76.4%; right:0;}

.mainRoom .lightslider li {position:relative; overflow: hidden;}
.mainRoom .lightslider li .txtRoom {position:absolute; bottom: 15%; left:0; width:100%; text-align:center; color:#fff; -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; opacity: 0; filter: alpha(opacity=0;); }
.mainRoom .lightslider li .txtRoom span { display:block; font-size:1.23em; margin-bottom:10px;}
.mainRoom .lightslider li .txtRoom small {font-size:1.07em;}
.mainRoom .lightslider li:hover .txtRoom { opacity: 1; filter: alpha(opacity=100;);}
.mainRoom .lightslider li:hover img { opacity: 0.5; filter: alpha(opacity=50;);}
.mainRoom .lightslider li a { display:block; -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; background:#000;}
.mainRoom .lightslider li:hover a { -ms-transform: scale(1.03); -webkit-transform: scale(1.03); transform: scale(1.03); }

/* .btn_scroll {position:absolute; bottom:0; right:0; width:270px; text-align:center; line-height:42px; border-bottom:1px solid #000; font-family: 'Abhaya Libre', serif; color:#000; font-size:15px; transform:rotate(90deg) translateY(-100%); -ms-transform:rotate(90deg) translateY(-200%); -webkit-transform:rotate(90deg) translateY(-200%); z-index:35; text-decoration:none!important;}
.btn_scroll::before {content:''; position: absolute; bottom: 0; right: 0; width: 42px; height: 1px; background: #000; transform: rotate(45deg) translate(-5px,-14px); -ms-transform: rotate(45deg) translate(-5px,-14px); -webkit-transform: rotate(45deg) translate(-5px,-14px); } */

.mRoom_title {display:inline-block; width:100%; padding:60px 0; margin-bottom:65px; text-align:center;}
/* .title01 { position:relative; font-size:6.4em; line-height:1; color:#545454; font-family: 'Crimson Text', serif; text-align:center; padding-bottom:40px; border-bottom:2px solid #49badb;} */
.mRoom_title .title01 { position:relative; font-size:6.4em; line-height:1; color:#545454;  text-align:center; padding-bottom:40px; }
/* .title01::before { content:'\201d'; position:absolute; top: 12px; right: -25px; } */
/* .title01::after { content:''; position:absolute; top: 12px; right: -25px; } */
.mRoom_title .title01 small { display:block; font-size:0.21em; color:#545454; text-align:center;}

/*.mRoom_arrow {text-align:center; background: #f1efef;}
.mRoom_arrow_inner {display:inline-block;}
.mRoom_arrow_inner a {position:relative; display:inline-block; width:164px; height:128px; float:left; font-size:2.3em;}
.mRoom_arrow_inner a span {position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }*/
.common_typo { width: 100%; float:left; text-align:center; padding:4% 0; font-size:3em; line-height:1.5em; color:#555; letter-spacing:0.1em; text-transform:uppercase; }


@media  (max-width: 1480px){


  .btn_gotoroom {padding: 1.5em 3.5em;}
  span.text_top {font-size:1.7em;}

  .mainRow_tit::before, .mainRow_spe_inner::before, .mainRow.reserve::before {height:100px;}
  .mainRow.reserve { padding-top:100px;}
  .reserve_desc { top:55px;;}

}

@media  (max-width: 1200px){
  #header-sticky-wrapper { 
    position:fixed; top:0; left:0; 
    width:100% !important; height:66px !important;
    z-index:35; 
    background: transparent;
    
  }
  /* 스크롤 시 */
  #header-sticky-wrapper.scrolled {
      background: #fff;
  }
  #header-sticky-wrapper.scrolled .logo a {
    background: url(/html/images/common/logo_black.png) no-repeat center center;
    background-size: cover;
  }
  #header-sticky-wrapper.scrolled .btn_nav .line span {
    background: var(--sub-brown);
  }
  #header { position:relative; width:100% !important; height:66px !important; background: transparent;}
  .logo { position:fixed; left:10px; top:10px; padding:0; z-index:36;}
  .logo, .is-sticky .logo {
    z-index: 2; width: 87px; height: 59px; 
    top: 33px; left: 7px; 
    margin: 0;
    -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); 
    opacity:1; pointer-events: auto;
  }

  .logoW {display:none;}
  .btn_nav { display:block;}
  /* .gnbArea { position:fixed; width:220px; height:100%; left:auto; right:-220px; top:0; margin:0; text-align:left; padding:50px 0 0 0;} */
  .open_nav .gnbArea {
    z-index: 1; right:0; top:0;
    background: #fff;
  }

  .subBlock { float:none; display:block !important; width:100%; height:0;}

  .main_sentence { padding:6%;}
  .main_sentence span { display:inline; }
  .sentence_img img { width:50%; max-width: 224px; }
  .sentence_en {line-height:1.5; letter-spacing:-0.1em; }

  /* #wrap {padding-top:50px;} */
  .is-sticky #header { height:50px; }

  .open_nav .logo a {
    background: url(/html/images/common/logo_black.png) no-repeat center center;
    background-size: cover;
  }
  /* .logo a img {
    width: 100%;
  } */
  .btn_reser {right:60px;}
  .open_nav .btn_reser { color:#fff; }
  .open_nav .btn_reser .line { background:#fff;}
  /* .open_nav .btn_nav .line span {background:var(--main-green);} */

  .mRoom_title {padding: 3% 0; margin-bottom: 60px; margin-top:60px;}
  .mRoom_title .title01 {font-size:3.2em; padding-bottom:25px; }
  /*.mRoom_arrow_inner {width:55%;}
  .mRoom_arrow_inner a {width:50%; height:50px; font-size:1.8em;}*/
  .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_pic .lSAction > a {font-size:4em;}
  .mainRow_tit {font-size:10px;}
  .mRoom_arrow_inner a img {width:20px;}
  span.text_roomname {margin-top:1.5em;}

  .mainRow_tit_inner {padding: 4%;}
  .mainRow_tit::before, .mainRow_spe_inner::before, .mainRow.reserve::before {height:90px;}
  .mainRow.reserve {padding-top:90px;}
  .reserve_desc {top:55px;}

  span.text_top {font-size:1.5em;}
  .special_desc {max-width:500px; width:100%; padding:0 6%;}
  .special_desc span.text_bot {display:block;}
  .common_typo { text-align:center; padding:4% 0; font-size:3em; line-height:1.5em; color:#555; letter-spacing:0.1em; text-transform:uppercase; }

  section {
      padding: 200px 8.23vw 50px;
  }
}


@media  (max-width: 768px){

section { 
  padding: 50px 0 110px;
}

.block768 { display: block;}

.mainRow_tit {font-size:9px;}
.mRoom_arrow_inner {bottom:7%;}
.mRoom_arrow_inner a img {width:18px;}
span.text_bot {display:none;}
.mainRow_tit_inner {padding-top:1.3em;}
span.text_roomname {margin-top:1.3em;}
.mainRow_pic .lSAction > a {font-size:3em;}
.mainRow_tit::before, .mainRow_spe_inner::before, .mainRow.reserve::before {height:80px;}
.mainRow.reserve {padding-top:70px;}
.reserve_desc {top:45px;}

span.text_top {font-size:1.5em;}
.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;}
.mainRow_tit_inner::before {display:none;}
span.text_roomname {margin-top:1em;}

.mainRow_tit::before, .mainRow_spe_inner::before {height:60px;}
/*.mainRow.reserve::before {display:none; }*/
.mainRow.reserve {padding-top:0;}
.mainRow.reserve span.text_top {display:inline-block; float:left; margin:0; }

.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%; }
.mainRow_pic .lSAction > a {font-size:1.5em;}
}

@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;}
.room_desc span.text_mid {display:none;}

}


@media  (max-width: 380px){
.mainRow_tit, .mainMidText {font-size:6px;}
.mRoom_arrow_inner a img {width:12px;}
}
.lSSlideOuter { position:relative; z-index:1;}
.lightSlider { z-index:1;}
.lightslider li { position:absolute; width:100%; background-position:center center !important; background-repeat:no-repeat; background-size:cover !important; }
.lightslider li img { width: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;}*/

/* ===========================
   FOOTER
=========================== */

.footer {
  position: relative;
  background-color: #7f6852;
  color: #fff;
  border-top: 1px solid #e0e0e0;
}

.footer-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 50px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 문의안내 */
.footer-info {
  flex-shrink: 0;
  min-width: 220px;
}

.tel-box {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 30px;
}

.tel-box .tel {
  display: block;
  color: #fff;
  font-size: 30px;
}
.footer-info p {
  font-size: 15px;
  line-height: 2;
}

/* 푸터 로고 */
.footer-logo { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 하단 바 */
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px 30px;
}

.footer-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 0 0 24px;
}

.footer-copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 25px;
}

.footer-logo img {
  width: 192px;
}

.footer-copy-text {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  line-height: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-copy-text img {
  width: 90px;
  transform: translateY(4px);
}

/* 상단으로 버튼 */
.footer-top-btn {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 48px;
  height: 48px;
  background-color: var(--main-green);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'pret-r';
  text-decoration: none;
  z-index: 99;
  opacity: 0;
  transition: all 0.3s;
  
}

.footer-top-btn:hover {
  background-color: #fff;
  color: var(--sub-brown);
}

/* ===========================
   MOBILE — 768px 이하
=========================== */

@media (max-width: 768px) {

  .footer-inner {
    flex-direction: column;
    gap: 0;
    padding: 55px 40px 50px;
  }

  .tel-box {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .tel-box .tel {
    font-size: 25px;
  }

  .footer-info p {
    font-size: 13px;
  }

  .footer-bottom {
    padding: 0 50px 30px;
  }

  .footer-copy {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: auto;
  }

  .footer-logo {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  .footer-logo img {
    width: 139px;
  }
  .footer-copy-text {
    position: static;
    transform: none;
    gap: 6px;
    font-size: 13px;
  }
  .footer-top-btn {
    position: absolute;
    bottom: 116px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}
@media (max-width:359px){
  .footer-bottom {
    padding: 0 25px 30px;
  }
}


@media  (max-width: 1024px){

.btn_top {width:30px; height:30px;}
.gnb_sub { background-color: inherit;}
}
.topArea { position:relative; z-index:1;}
/* .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:30px; height:30px; line-height:30px; top:0; margin:0; 
  color:#fff; font-size:26px; 
  line-height:30px; 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;
}
/* .topArea .lSAction > a, .topArea02 .lSAction > a, .roomSlider01 .lSAction > a { position:absolute; display:inline-block; width:30px; height:30px; top:0; margin:0;  opacity:1; filter: alpha(opacity=100;); -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;} */
.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-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;}
.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-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-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;}
.topArea .lSAction {
  position: absolute; bottom: 16px; left: 50%; width: 216px; height: 30px;
  z-index: 2; -webkit-transform: translate(-50%,0%); -ms-transform: translate(-50%,0%); transform: translate(-50%,0%);
}
.topArea .lSPrev {position:absolute;top:0;left:0;}
.topArea .lSPrev:hover {left:-5px;}
.topArea .lSNext {position:absolute;top:0;right:0;}
.topArea .lSNext:hover {right:-5px;}


/* 스와이퍼 변경 260403*/
.topSwiper {
    position: relative;
    width: 100%;
    height: 100vh;
}
.topSwiper .swiper-slide {
    background-size: cover;
    background-position: center;
}

/* 텍스트 */
.topArea-text {
    position: absolute;
    bottom: 144px;
    left: 9%;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
}
.topArea-title {
    font-size: 50px;
    letter-spacing: 0.03em;
    color: #fff;
}
.topArea-desc {
    font-size: 18px;
    line-height: 1.8;
}

/* 하단 컨트롤 */
.swiper-bottom {
    position: absolute;
    bottom: 70px;
    left: 9%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 22px;
    line-height: 2;
}
.swiper-bottom button {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.swiper-bottom button:hover { opacity: 1; }

/* 프로그레스바 */
.swiper-progressbar {
    margin-right: 10px;
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    overflow: hidden;
}
.swiper-progressbar-fill {
    height: 100%;
    width: 0%;
    background: var(--main-brown);
    border-radius: 2px;
    transition: width 0.1s linear;
}
/* 반응형 */
@media(max-width:768px){
  .topSwiper {
      height: 80vw;
  }
    /* 텍스트 */
  .topArea-text {
      bottom: 45px;
      left: 20px;
  }
  .topArea-title {
      font-size: 20px;
  }
  .topArea-desc {
      font-size: 14px;
  }
  /* 하단 컨트롤 */
  .swiper-bottom {
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      gap: 7px;
      font-size: 17px;
  }
  .swiper-bottom button {
    font-size: 25px;
  }

}


@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;}
}
@media (max-width:1200px) {
  .none1200 { display: none;}
  .block1200 { display: block !important;}
}
@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;}
.flex1024 {display: flex !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, .topArea02 .lSAction > a, .roomSlider01 .lSAction > a {  width:20px;  font-size:3em;}*/
.topArea .lSAction > a.lSPrev, .topArea02 .lSAction > a.lSPrev, .roomSlider01 .lSAction > a.lSPrev { left:5px;}
.topArea .lSAction > a.lSNext, .topArea02 .lSAction > a.lSNext, .roomSlider01 .lSAction > a.lSNext {right:5px;}
.topArea { z-index:auto;}
.topArea .lSAction {width:100%; height:30px; bottom:5%;  right:0; }
.topArea .lSAction > a { font-size:4em; }
.topArea .lSAction > a.lSNext { right: 5%;}
.topArea .lSAction > a.lSPrev { left: 5%;}

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

}

@media  (max-width: 768px){

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


.topArea .lSAction > a { font-size:3em; }


}

@media  (max-width: 560px){

.none560 {display:none !important;;}
.block560 {display:block !important;;}
.in-block560 {display:inline-block !important;;}

  .topArea .lSAction > a { font-size:1.5em; }

}

@media  (max-width: 480px){

.none480 {display:none !important;;}
.block480 {display:block !important;;}
.in-block480 {display:inline-block !important;;}


}


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

/* 텍스트 웨이브 */
.text-wave {
    overflow: hidden;
}
.text-wave .text-line {
    display: inline-block;
}

.text-wave .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
}

/* 애니메이션 실행 */
.text-wave.active .char {
    animation: fadeInUp 0.8s cubic-bezier(0.33, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.09s);
}

/* 두 번째 줄 지연 */
.text-wave.active .text-line[data-line="2"] .char {
    animation-delay: calc(1.7s + var(--char-index) * 0.09s);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.text-hanji.active .char {
    animation: hanjiInk 1.2s ease-out forwards;
    animation-delay: calc(var(--char-index) * 0.12s);
}
.text-hanji.active .text-line[data-line="2"] .char {
    animation-delay: calc(2.2s + var(--char-index) * 0.12s);
}

@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);
    }
}


/* 안개 */
.text-mist .char {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-20px);
}

.text-mist.active .char {
    animation: mistReveal 1.5s ease-out forwards;
    animation-delay: calc(var(--char-index) * 0.1s);
}
.text-mist.active .text-line[data-line="2"] .char {
    animation-delay: calc(1.7s + var(--char-index) * 0.1s);
}

@keyframes mistReveal {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-20px);
    }
    70% {
        opacity: 0.8;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
    }
}



.slow {
  transition: all 5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* 아래 → 위 */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.on {
  opacity: 1;
  transform: translateY(0);
}



/* 위 → 아래 */
.fade-down {
  opacity: 0;
  transform: translateY(-60px);
  transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(5px);
}
.fade-down.on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 왼쪽 → 오른쪽 */
.fade-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
  filter: blur(5px);
}
.fade-left.on {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* 오른쪽 → 왼쪽 */
.fade-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-right.on {
  opacity: 1;
  transform: translateX(0);
}


.trans3000 { transition: all 3s cubic-bezier(0.22, 1, 0.36, 1) !important;}
.delay300 { transition-delay: 0.3s !important; }
.delay400 { transition-delay: 0.4s !important; }
.delay500 { transition-delay: 0.5s !important; }
.delay600 { transition-delay: 0.6s !important; }
.delay700 { transition-delay: 0.7s !important; }
.delay900 { transition-delay: 0.9s !important; }
.delay1000 { transition-delay: 1s !important; }



/* ===========================
   roomList ( room 미리보기 )
=========================== */
    
.roomlist {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.roomlist-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* 왼쪽 정보 영역 */
.room-info {
    width: 50%;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*** 룸, 룸미리보기 공통 사용 ***/
.room-badge {
    background-color: var(--main-brown);
    color: white;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 20px;
    margin-top: 5px;
    text-align: center;
}

.room-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 50px;
    margin-bottom: 50px;
    color: var(--main-brown);
}

.room-features {
    margin-bottom: 60px;
}

.room-features li {
    font-size: 15px;
    color: var(--main-black);
    line-height: 1.8;
    margin-bottom: 8px;
}

.detail-button {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 12px 40px;
    font-size: 18px;
    color: var(--main-black);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 162px;
    height: 53px;
}
.detail-button i {
  position: absolute;
  border: 1px solid var(--sub-brown);
  transition: all 1s ease-out;
  pointer-events: none;
}
.detail-button.white {
  color: #fff;
}
.detail-button.white i {
  border: 1px solid #fff;
}

/* 왼쪽 테두리 */
.detail-button i.left {
  width: 7px;
  height: 100%;
  top: 0;
  left: 0;
  transform: translate(-6px, 0); 
  opacity: 0;
  border-left: none;
}
.detail-button.active i.left {
  opacity: 1;
}

/* 오른쪽 테두리 */
.detail-button i.right {
  width: 7px;
  height: 100%;
  top: 0;
  right: 0;
  transform: translate(6px, 0);
  opacity: 0;
  border-right: none;
}
.detail-button.active i.right {
  opacity: 1;
}

/* 위쪽 테두리 */
.detail-button i.top {
  width: 100%;
  height: 7px;
  top: 0;
  left: 0;
  transform: translate(0, -6px) scaleX(0);
  opacity: 0;
  border-top: none;
  transform-origin: top left;
}
.detail-button.active i.top {
  opacity: 1;
  transform: translate(0, -6px) scaleX(1);
}

/* 아래쪽 테두리 */
.detail-button i.bottom {
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  transform: translate(0, 6px) scaleX(0);
  opacity: 0;
  border-bottom: none;
  transform-origin: top right;
} 
.detail-button.active i.bottom {
  opacity: 1;
  transform: translate(0, 6px) scaleX(1);
} 

@media(min-width:1025px) {
  .detail-button.active:hover i {
    transform: translate(0, 0);
  }
}





/* 썸네일 스와이퍼 (왼쪽에 위치) */
.thumbnail-swiper-wrapper {
    width: 100%;
    position: relative;
    margin-top: 60px;
}

.thumbnail-swiper {
    width: 100%;
    margin: 0;
}

.thumbnail-swiper .swiper-slide {
    width: 25%;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.thumbnail-swiper .swiper-slide-active {
    opacity: 1;
}

.thumbnail-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 썸네일 네비게이션 버튼 */
.thumbnail-swiper-wrapper .swiper-button-next,
.thumbnail-swiper-wrapper .swiper-button-prev {
    color: var(--main-brown);
    width: 30px;
    height: 30px;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-swiper-wrapper .swiper-button-prev {
    left: -50px;
}

.thumbnail-swiper-wrapper .swiper-button-next {
    right: -50px;
}

.thumbnail-swiper-wrapper .swiper-button-next::after,
.thumbnail-swiper-wrapper .swiper-button-prev::after {
    font-size: 30px;
    font-family: swiper-icons;
    content: 'next';
}
.thumbnail-swiper-wrapper .swiper-button-prev::after {
    content: 'prev';
}
/* 오른쪽 이미지 영역 */
.room-images {
    width: 50%;
    max-width: 960px;
    position: relative;
}

.main-swiper {
    width: 100%;
    height: auto;
}

.main-swiper .swiper-slide {
    width: 100%;
}

.main-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 메인 스와이퍼는 네비게이션 숨김 */
.main-swiper .swiper-button-next,
.main-swiper .swiper-button-prev {
    display: none;
}

/* 반응형 */

/* @media(max-width:1560px){
  .detail-button i.left {
    transform: translateX(-5px);
  }
} */


@media (max-width: 1024px) {
    .roomlist {
        min-height: auto;
    }
    
    .roomlist-container {
        flex-direction: column;
    }
    
    .room-info {
        width: 100%;
        padding: 40px 20px;
        order: 2;
    }
    
    .room-badge {
        font-size: 14px;
        padding: 6px 13px;
        margin-top: 3px;
    }
    .room-title {
      justify-content: center;
      font-size: 40px;
      margin-bottom: 30px;
    }
    .room-features {
        display: none;
    }
    
    .room-features p {
        font-size: 13px;
        line-height: 1.6;
    }
    
    .detail-button {
        padding: 10px 32px;
        font-size: 15px;
        margin-bottom: 0px;
        position: absolute;
        transform: translateY(-70vw);
        background-color: rgba(255,255,255,0.66);
        z-index: 9;
    }
    .detail-button.white {
      position: static;
      transform: translateY(0);
      background-color: transparent;
    }
    .detail-button i.left {
      transform: translate(-6.5px, 0); 
    }
    .detail-button i.right{
      transform: translate(6.5px, 0);
    }
    .detail-button i.top {
      transform: translate(0, -6.5px) scaleX(0); 
    }
    .detail-button i.bottom{
      transform: translate(0, 6.5px) scaleX(0);
    }

    .room-images {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    .thumbnail-swiper-wrapper {
       width: 83%;
       margin-top: 0;
      }
    .thumbnail-swiper .swiper-slide {
        width: 33.333%;
    }
    
    .thumbnail-swiper .swiper-button-next,
    .thumbnail-swiper .swiper-button-prev {
        width: 25px;
        height: 25px;
    }
    
    .thumbnail-swiper .swiper-button-next::after,
    .thumbnail-swiper .swiper-button-prev::after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .room-info {
        padding: 0 16px;
    }
    .room-title {
        font-size: 36px;
    }
    .thumbnail-swiper-wrapper .swiper-button-next::after,
    .thumbnail-swiper-wrapper .swiper-button-prev::after {
        font-size: 24px;
    }
    .thumbnail-swiper-wrapper .swiper-button-prev {
        left: -38px;
    }
    .thumbnail-swiper-wrapper .swiper-button-next {
        right: -38px;
    }
}





/* ===========================
   spList ( special 미리보기 )
=========================== */
.spelist {
  width: 100%;
  padding: 200px 13.23vw;
  overflow: hidden;
}

.spelistSwiper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.spelistSwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spelist .slide-image {
  position: relative;
  width: 20.83vw;
  height: 24.58vw;
  max-width: 400px;
  max-height: 472px;
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 30px;
}
.spelist .slide-image::before {
  content: '';
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.41);
  transition: opacity 0.4s ease;
  z-index: 1;
  opacity: 0;
}
.spelist .slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 자세히보기 */
.spelist .slide-image .detail-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
}

/* pc 이펙트 */
@media (min-width: 1025px){
  .spelist .slide-image:hover .detail-button,
  .spelist .slide-image:hover::before
  {
    opacity: 1;
  }
  .spelist .slide-image:hover .detail-button i {
    transform: translate(0, 0);
  }

  .spelist .slide-image:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}


.spelist .slide-content {
  text-align: center;
}

.spelist .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--main-black);
  font-size: 28px;
  margin: 0 0 20px 0;
}

.spelist .title .badge {
  display: inline-block;
  background: var(--main-brown);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 14px;
}

.spelist .description {
  padding: 0 20px;
  color: var(--main-black);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Swiper Navigation */
.spelist .swiper-button-prev,
.spelist .swiper-button-next {
  color: var(--main-brown);
    width: 50px;
    height: 50px;
    margin-top: 0;
    top: 44%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spelist .swiper-button-prev:after,
.spelist .swiper-button-next:after {
  font-size: 45px;
}

.spelist .swiper-button-prev:hover,
.spelist .swiper-button-next:hover {
  
}

.spelist .swiper-button-prev {
  left: 5vw;
}

.spelist .swiper-button-next {
  right: 5vw;
}

@media (max-width:1200px) {
  .spelist .slide-image {
    /* max-width: 30vw; */
  }
}


/* Mobile - 768px 이하 */
@media (max-width: 768px) {
  .spelist {
    padding: 100px 15px;
  }
  
  .spelistSwiper {
    padding: 20px;
  }
  
  .spelist .slide-image {
    width: 75vw;
    height: 88.5vw;
    margin-bottom: 25px;
  }
  .spelist .slide-image::before,
  .spelist .slide-image .detail-button
   {
    opacity: 1;
  }
  .spelist .badge {
    font-size: 13px;
    padding: 6px 16px;
  }
  
  .spelist .title {
    font-size: 24px;
    gap: 15px;
  }
  
  .spelist .description {
    font-size: 14px;
    padding: 0 20px;
  }
  
  .spelist .swiper-button-prev, .spelist .swiper-button-next {
    top: 43%;
  }
  .spelist .swiper-button-prev {
    left: 4vw;
  }
  .spelist .swiper-button-next {
    right: 4vw;
  }
  .spelist .swiper-button-prev:after,
  .spelist .swiper-button-next:after {
    font-size: 30px;
  }
}

@media(max-width:500px) {
  .spelist .swiper-button-prev {
    left: -3px;
  }
  .spelist .swiper-button-next {
    right: -3px;
  }
}