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



html{width:100%;height: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:'pret-r','Noto Sans KR',"돋움",Arial; 
}

body{visibility:visible; width:100%; font-size:13px;color:#2A2A2A; background:#fff; line-height:1.5em; letter-spacing: 0.03em; }
h2,h3,h4 { font-family: 'pret-b'; line-height: 1.33; letter-spacing: 0.03em;}
p { font-size:  18px; line-height: 1.777;}
img,fieldset{border:none;}
em,address{font-style:normal;}
a{text-decoration:none;color:#2A2A2A;}
li{list-style:none;}
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, .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 { 
  position: absolute; z-index: 1; top: 50%; left:3.13%; 
  width: 240px; 
  height: 100%;
  display: flex;
  align-items: center;
  -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; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);  pointer-events: auto; }
.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:26px; 
  height:28px; 
  right:4px; 
  top:0; 
}
.btn_nav .line span {
  position: absolute; display: block; 
  width:24px; 
  height:2px; 
  left:50%;  
  background: #fff; 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 .line01 { top:4px; }
.btn_nav .line02 { top:calc(50% - 1px); }
.btn_nav .line03 { bottom:4px; }

.btn_nav.open_nav .line01 {transform: translate(-50%, 7.5px) rotate(45deg); -ms-transform: translate(-50%, 7.5px) rotate(45deg); -webkit-transform: translate(-50%, 7.5px) rotate(45deg);}
.btn_nav.open_nav .line02 {opacity:0;  }
.btn_nav.open_nav .line03 {transform: translate(-50%, -10px) rotate(-45deg); -ms-transform: translate(-50%, -10px) rotate(-45deg); -webkit-transform: translate(-50%, -10px) rotate(-45deg); }


:root {
    --main-green: #00F108;
}
.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: 44px;
  font-family: 'gangwon';
  color: var(--main-green);
  text-align: center;
}
.subtitle {
    font-size: 25px;
    margin: 23px 0 93px;
    text-align: center;
}
@media(max-width:768px){
  .subtitle {
      font-size: 16px;
      margin: 13px 0 25px;
  }
}



/* ===== GNB 기본 ===== */
.gnbArea {
    position: relative;
    padding-right: 15.625vw;
}
@media (min-width:1200px){
  #header:hover, #header-sticky-wrapper.is-sticky #header {
    background: rgba(0, 0, 0, 0.8);
  }
}


.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: flex-end;
    gap: 30px;
}

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

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

.gnb_sub li {
    margin: 17px 0;
}

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

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

/* ===== 전체 펼침 트리거 ===== */
.gnbArea:hover .gnb_sub {
    display: block;
}
@media (min-width:1200px){
  /* ===== 전체 배경 (이미지처럼) ===== */
  .gnbArea::after {
      content: '';
      position: absolute;
      top: 87px;
      left: 0;
      width: 100%;
      height: 310px; /* 서브메뉴 높이에 맞게 조절 */
      background: rgba(0, 0, 0, 0.8);
      border-top: 1px solid #ddd;
      display: none;
      z-index: -1;
  }
}

@media (min-width:1025px){
  .gnbArea:hover::after {
      display: block;
  }
}

/* 마우스오버 시 녹색 */
.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;
}
.depth2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    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: 1px;
    }
    /* 메뉴 구조 변경 */
    .gnb {
        flex-direction: column;
        gap: 0;
    }

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

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

    .depth1_mobile {
        display: block;
        padding: 18px 0;
        font-size: 20px;
        letter-spacing: 0.03em;
        font-weight: 600;
        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: 16px;
        color: #fff;
    }

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

    /* PC용 효과 제거 */
    .gnbArea::after,
    .depth1::after,
    .depth2::after {
        display: none;
    }
    .mb40 { margin-bottom: 25px;}
    .mb80 { margin-bottom: 50px;}
}


/* .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:50px !important;
    z-index:35; 
    background: transparent;
    
  }
  /* 스크롤 시 */
  #header-sticky-wrapper.scrolled {
      background: rgba(0, 0, 0, 0.6);
  }
  #header { position:relative; width:100% !important; height:50px !important; background: transparent;}
  .logo { position:fixed; left:10px; top:10px; padding:0; z-index:36;}
  .logo, .is-sticky .logo {z-index: 2; width: 125px; left:1em; -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: rgba(0, 0, 0, 0.8);
    color: #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; }

 
  .logo {
    width:auto; 
    height: 50px;
    top: 26px; 
  }

  .logo a { height:29px;}
  .logo a img { height:100%; width:auto;}
  .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: #fff;
  border-top: 1px solid #e0e0e0;
}

.footer-inner {
  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;
}

.footer-info-title {
  font-size: 17px;
  font-family: 'pret-sb';
  color: var(--main-green);
  margin: 0 0 14px;
}

.footer-info p {
  font-size: 15px;
  line-height: 2;
}

/* GNB */
.footer-gnb-wrap {
  flex: 1;
}

.footer-gnb {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer-gnb > li > a {
  font-size: 17px;
  font-family: 'pret-sb';
  color: var(--main-green);
  text-decoration: none;
  display: block;
  margin-bottom: 14px;
}

.footer-gnb > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-gnb .depth2 {
  font-size: 15px;
  font-family: 'pret-l';
  text-decoration: none;
  line-height: 2;
  display: block;
  transition: color 0.2s;
  color: #2A2A2A;
}

.footer-gnb .depth2:hover {
  color: var(--main-green);
}

/* 하단 바 */
.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;
}

.footer-logo img {
  height: 44px;
  width: auto;
}

.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;
  vertical-align: middle;
  filter: brightness(1.6);
  transform: translateY(-1px);
}

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

.footer-top-btn:hover {
  background-color: #00c200;
}

@media (max-width:1024px){
  .footer-gnb-wrap { display: none;}
}

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

@media (max-width: 768px) {

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

  /* GNB 모바일에서 숨김 */
  .footer-gnb-wrap {
    display: none;
  }

  .footer-info-title {
   
  }

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

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

  .footer-logo img {
    height: 38px;
  }
  .footer-copy-text {
    position: static;
    transform: none;
    gap: 6px;
  }
  .footer-top-btn {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    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;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
}
.topArea-title {
    font-size: 48px;
    letter-spacing: 0.03em;
    margin-bottom: 50px;
}
.topArea-desc {
    font-size: 18px;
    line-height: 1.8;
}

/* 하단 컨트롤 */
.swiper-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
}
.swiper-bottom button {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    font-family: 'pret-r';
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.swiper-bottom button:hover { opacity: 1; }

/* 프로그레스바 */
.swiper-progressbar {
    width: 120px;
    height: 2px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}
.swiper-progressbar-fill {
    height: 100%;
    width: 0%;
    background: #7ed957;
    border-radius: 2px;
    transition: width 0.1s linear;
}
/* 반응형 */
@media(max-width:768px){
  .topSwiper {
      height: 80vw;
  }
    /* 텍스트 */
  .topArea-text {
      position: static;
      transform: none;
      color: #000;
      padding: 50px 42px;
  }
  .topArea-title {
      font-size: 25px;
      margin-bottom: 30px;
  }
  .topArea-desc {
      font-size: 14px;
  }

}


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

.fade-toptitle {

}


/* 아래 → 위 */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1.8s 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 1.8s 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 1.8s 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 1.8s 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; }




/* ===========================
   spList ( special 미리보기 )
=========================== */

.special-inner {
  display: flex;
  gap: 7.8vw;
}

/* 좌측 이미지 */
.special-img-wrap {
  position: relative;
  flex-shrink: 0;
  max-width: 640px;
  max-height: 680px;
  width: 33.33vw;
  height: 35.41vw;
}

.special-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.special-img.active {
  opacity: 1;
}

/* 우측 콘텐츠 */
.special-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.64vw;
}

.special-title {
  line-height: 0.7;
}

/* 리스트 */
.special-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 각 리스트 */
.special-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 607px;
  max-height: 83px;
  width: 31.61vw;
  height: 4.32vw;
  padding: 27px 50px;
  background-color: #f5f5f5;
  font-family: 'pret-b';
  font-size: 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.special-list .special-item:nth-of-type(2n) { background-color: #F9F9F9;}
.special-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

/* 배경이미지 레이어 */
.special-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

/* 어두운 오버레이 */
.special-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.special-item span {
  position: relative;
}

.special-item:hover::before,
.special-item:hover::after,
.special-item.active::before,
.special-item.active::after {
  opacity: 1;
}

.special-item:hover a,
.special-item.active a {
  color: var(--main-green);
}

.arrow {
  font-size: 18px;
}

/* 설명 텍스트 */
.special-desc {
  font-size: 18px;
  line-height: 1.77;
}
@media (max-width:1400px){
  .special-item {
    font-size: 20px;
  }
  .special-desc {
    font-size: 14px;
  }
  .special-title {
    font-size: 32px;
  }
}

@media (max-width:1024px){
  .special-item {
    width: 100%;
  }
}

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

@media (max-width: 768px) {

  .special-title {
    font-size: 30px;
    margin-bottom: 35px;
  }

  .special-inner {
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .special-img-wrap {
    width: 100%;
    height: 107.75vw;
    max-height: 500px;
  }
  .special-content {
    max-width: 640px;
  }
  .special-item {
    max-width: 640px;
    gap: 35px;
  }
  .special-desc {
    padding: 0 30px;
  }
  
}



/* ===========================
   roomList ( room 미리보기 )
=========================== */

.room-pre-inner {
  display: flex;
  align-items: center;
  gap: 8.85vw;
}

.room-pre-header {
  
}

.room-pre-header .common-title {
  margin-bottom: 50px;
}

.room-pre-desc {
  
}

/* 슬라이더 래퍼 */
.room-pre-slider-wrap {
  flex: 1;
  position: relative;
  /* overflow: hidden; */
}

/* 트랙 */
.room-pre-track {
  display: flex;
  gap: 35px;
  transition: transform 1s ease;
}

/* 카드 */
.room-card {
  flex-shrink: 0;
  text-align: center;
  max-width: 400px;
}

.room-card-img-wrap {
  width: 20.8333vw;
  display: block;
  position: relative;
  overflow: hidden;
}

.room-card-img-wrap img {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

/* 오버레이 */
.room-card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(80, 160, 60, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.room-card-img-wrap:hover .room-card-overlay {
  opacity: 1;
}

.room-card-img-wrap:hover img {
  transform: scale(1.03);
}

/* MOVE 버튼 */
.room-move-btn {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 30px;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* 카드 텍스트 */
.room-card-name {
  font-size: 24px;
  font-family: 'pret-b';
  margin-top: 24px;
}

.room-card-info {
  font-size: 18px;
  font-family: 'pret-l';
}

/* 모바일 화살표 — PC에서는 숨김 */
.room-arrow {
  display: none;
}

@media (max-width:1400px) {
  .room-pre-desc br {
    display: none;
  }
}

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

@media (max-width: 768px) {

  .room-pre-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    padding-left: 30px;
    padding-right: 15px;
  }

  .room-pre-header {
    width: 100%;
  }

  .room-pre-header .common-title {
    font-size: 26px;
    margin-bottom: 15px;
  }

  /* 슬라이더 */
  .room-pre-slider-wrap {
    width: 100%;
    overflow: hidden;
  }

  .room-pre-track {
    gap: 16px;
    padding-left: 59px;
  }

  .room-card {
    width: 56vw;
  }
  .room-card-img-wrap {
    width: auto;
  }
  /* 카드 텍스트 */
  .room-card-name {
    font-size: 20px;
    margin-top: 16px;
  }

  .room-card-info {
    font-size: 14px;
  }

  /* 오버레이 — 모바일은 항상 표시 */
  .room-card-overlay {
    opacity: 1;
    background-color: rgba(80, 160, 60, 0);
  }

  /* 화살표 버튼 */
  .room-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    font-family: 'pret-b';
    font-size: 35px;
    color: var(--main-green);
    cursor: pointer;
    padding: 8px;
  }

  .room-arrow--prev {
    left: -4px;
  }

  .room-arrow--next {
    right: -4px;
  }
}