@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
}


/* 헤더 고정 스타일 */
.header {
    position: fixed;
    display: block;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #fff;
    z-index: 99999;

    background: rgba(255, 255, 255, 1);
    transition: background 0.5s ease, box-shadow 0.3s ease;
}

/* 로고 박스 */
.logo_box {
    display: block;
    float: left;
    padding: 12px 0 0 30px;
}

/* 네비게이션 박스 */
.nav_box {
    display: block;
    float: right;
    position: relative;
}

/* 네비게이션 메뉴 스타일 */
.nav_box ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    padding: 40px 0;
}

.nav_box ul li {
    display: inline-block;
    position: relative;
    width: 190px;
    text-align: center;
}

/* 메뉴 항목의 기본 링크 스타일 */
.nav_box ul li a {
    text-decoration: none;
    color: #000;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.5s ease;
}

.logo {
    transition: filter 0.5s ease;
}

.header.transparent {
    background: transparent;
}

.header.transparent .nav_box ul li a {
    color: #fff;
}

/* 예약 버튼 스타일 */
.nav_box ul li a.reserv {
    width: 192px;
    height: 52px;
    padding: 10px 22px 10px 46px;
    border-radius: 26px;
    color: #fff;
    background: url(../images/ic-reserve.png) no-repeat 13px center, #3393a3;
}


/* 서브 메뉴 영역 */
.sub_menu_area {
    position: absolute;
    top: 100%;  /* nav_box 바로 아래에 위치 */
    left: 0;
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.8);
    display: none;  /* 기본적으로 숨겨짐 */
    transition: all 0.3s ease-in-out;
    z-index: 10; /* 서브 메뉴가 다른 요소들 위에 오도록 설정 */
}

/* 서브 메뉴 */
.submenu, .sub_menu_area {
    display: none;
}

.submenu {
    display: none;  /* 기본적으로 숨겨짐 */
    width: 100%;
    height: 100%;  /* 서브 메뉴 영역과 동일한 높이 */
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20; /* 서브 메뉴가 sub_menu_area 위에 표시되도록 */
}

.submenu ul {
    margin: 0;
    padding: 0;
    float:right;
    list-style: none;
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
}

.submenu ul li {
    background-color: #fff;
    margin-right: 5px;
}

.submenu ul li a {
    font-family: "Noto Sans KR", sans-serif;
}

/* 메뉴 항목 hover 시 서브 메뉴 영역 보이도록 */
.nav_box ul li:hover + .sub_menu_area {
    display: block;
}

/* 메뉴 항목 hover 시 서브 메뉴 보이도록 */
.nav_box ul li:hover .submenu {
    display: block;  /* 서브 메뉴 표시 */
}

/* 메뉴 항목이나 서브 메뉴에 마우스를 올리면 서브 메뉴가 사라지지 않도록 */
.sub_menu_area:hover,
.nav_box ul li:hover .sub_menu_area {
    display: block;  /* 서브 메뉴가 표시되도록 */
}

/* 메뉴 항목이나 서브 메뉴에 마우스를 올리면 서브 메뉴가 사라지지 않도록 */
.sub_menu_area:hover .submenu {
    display: block;
}




#main-vod {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mTit {
    position:absolute;
    top: 50%; 
    left: 5%; 
    font-family: "Cormorant Infant", serif;
    font-size: 46px;
    font-weight: 600;
    color: white; 
    text-align: left;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.mDesc {
    position:absolute;
    top: 58%; 
    left: 5%; 
    font-family: "Noto Sans KR", sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    color: white; 
}
.fp-tableCell {
    vertical-align: top;
}
.mn_Title {
    display: block;
    width: 100%;
    margin-top: 150px;
}
.sec_tit {
    font-family: "Cormorant Infant", serif;
    font-size: 46px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}
.sec_desc {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #888;
}
.image-grid, .image-grid2 {
    
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 기본적으로 2열로 설정 */
    grid-template-rows: auto auto auto; /* 3개의 행 */
    gap: 0; /* 각 이미지 박스 간격 */
}



.image-box {
    position: relative;
    background-position: center center;
    background-size: cover;
    height: 610px;
    overflow: hidden;
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' if you prefer */
    display: none;
    position: absolute; /* 필요 시 비디오와 겹치게 */
    top: 0;
    left: 0;
  }

/* 세 번째 행의 하나의 박스를 100% 크기로 확장 */
.image-grid .image-box:nth-child(5) {
    place-items: center;
    grid-column: span 2; /* 두 개의 열을 차지 */
    width: 100%;  /* 세 번째 행은 100% 크기 */
    height:610px;
}

/* Overlay for dim effect and text */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 딤 처리 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1; /* 기본적으로 딤 처리 유지 */
    transition: opacity 0.8s ease;
    text-align: center; /* 텍스트 중앙 정렬 */
}

.room-text, .spa-text {
    font-family: "Cormorant Infant", serif;
    font-size: 18px;
    color: white;
    font-weight: normal;
    margin-bottom: 20px;
    z-index: 2; /* 텍스트가 다른 요소들보다 위로 오도록 */
}

.room-text2, .spa-text2 {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 22px;
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
    z-index: 2; /* 텍스트가 다른 요소들보다 위로 오도록 */
}

.view-more {
    font-size: 18px;
    color: white;
    background-color: rgba(255, 255, 255, 0);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 36px;
    opacity: 0; /* 기본적으로 버튼은 숨겨둠 */
    transition: opacity 0.8s ease;
    z-index: 2; /* 버튼이 텍스트와 같이 표시되도록 */
    position: absolute;
    top: 50%; /* 가운데 위치 */
    left: 50%; /* 가운데 위치 */
    transform: translate(-50%, -50%); /* 정확한 가운데 정렬 */
}

/* 마우스 hover 시 딤 처리만 사라짐 */
.image-box:hover .overlay {
    opacity: 0; /* 딤 처리만 사라짐 */
}

.fade-out {
    opacity: 0;
}

/* hover 시 버튼이 보이도록 */
.image-box:hover .view-more {
    opacity: 1; /* 버튼만 나타남 */
}

/* Video 요소는 기본적으로 숨겨둠 */
.room-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* 기본적으로 숨겨둠 */
    transition: opacity 0.3s ease;
}

/* 마우스 hover 시 비디오가 나타나고 재생되도록 */
.image-box:hover .room-video {
    opacity: 1; /* 비디오 표시 */
}

/* 비디오가 재생되도록 설정 (hover 시) */
.image-box:hover .room-video {
    opacity: 1; /* 비디오 표시 */
    pointer-events: none; /* 비디오 요소 위에서 마우스 이벤트 방지 */
}


.mySwiper2 .swiper-slide {
    position: relative;
    height: 500px;
}

/* 딤 처리 및 텍스트 표시 */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 딤 처리 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 딤 처리 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 1; /* 기본적으로 딤 처리 표시 */
    transition: opacity 0.5s ease; /* 서서히 사라지게 설정 */
}

/* SPA 텍스트 */
.spa-text {
    font-size: 32px;
}
.spa-text, .spa-text2 {
    z-index: 2; /* 텍스트가 버튼 위로 가도록 설정 */
    
}
.spa-text3 {
    font-family: "Cormorant Infant", serif;
    color: #fff;
    font-size: 18px;
}

/* VIEW MORE 버튼 */
.view-more {
    font-size: 18px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 1);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 36px;
    opacity: 0; /* 기본적으로 숨겨둠 */
    transition: opacity 0.5s ease;
    margin-top: 20px; /* SPA 텍스트 아래로 버튼 위치 */
    z-index: 2; /* 버튼이 텍스트와 같은 레벨에 표시되도록 */
}

/* 마우스 hover 시 딤 처리만 사라짐 */
.image-container:hover .overlay {
    opacity: 0; /* 딤 처리 사라짐 */
}

/* hover 시 VIEW MORE 버튼을 보이도록 */
.image-container:hover .view-more {
    opacity: 1; /* 버튼 표시 */
}

.swiper-button-next, .swiper-button-prev {
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* 배경색을 반투명 검은색으로 설정 */
    border-radius: 50%; /* 둥근 모양으로 만들기 */
    width: 45px;
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 30px; /* 화살표 크기 조정 */
}

/* hover 시 배경색 변경 */
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7); /* hover 시 배경색을 어두운 검은색으로 */
}

/* 블로그 리스트 스타일 */
.blog-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 중앙 정렬 */
    gap: 0;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
}

.blog-list2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
}

/* 각 게시물 스타일 */
.blog-item {
    width: 30%;
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-item:nth-child(1),
.blog-item:nth-child(2) {
    border-right: 1px solid #dcdcdc; /* 연한 색상의 보더 */
}

.blog-list2 .blog-item:not(:nth-child(3n)) {
    border-right: 1px solid #dcdcdc;
}

/* 마우스 오버 시 효과 */
.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 게시물 번호 스타일 */
.post-number {
    font-family: "Cormorant Infant", serif;
    text-align: left;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 썸네일 이미지 스타일 */
.post-thumbnail {
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    margin-bottom: 15px;
}

/* 날짜 스타일 */
.post-date {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
    text-align: left;
}

/* 제목 스타일 */
.post-title {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: left;
}

.view-more-g {
    font-size: 18px;
    color: #3393a3;
    border: 1px solid #3393a3;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 36px;
    margin-top: 80px;
    
}

/* Instagram 썸네일 갤러리 스타일 */
.instagram-gallery {
    width: 100%;
    max-width: 1120px; /* 최대 너비 5개의 썸네일이 들어갈 정도로 설정 */
    margin: 0 auto; /* 가운데 정렬 */
    padding: 20px;
}

/* 각 줄을 위한 스타일 */
.instagram-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* 썸네일 스타일 */
.instagram-thumbnail {
    width: 224px;
    height: 224px;
    background-position: center;
    background-size: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* 썸네일에 마우스 오버 시 확대 효과 */
.instagram-thumbnail:hover {
    transform: scale(1.05);
}
.con {
    display: flex;               /* Flexbox를 사용하여 요소들을 가로로 정렬 */
    align-items: center;         /* 세로로 가운데 정렬 */
    justify-content: center;     /* 가로로 가운데 정렬 (선택 사항) */
    margin-top: 64px;
}
img.main_ic_insta {
    width: 36px;
    height: 36px;
    margin: -1px 2px 0 0;
    object-fit: contain;
}
.mh {
    font-size:23px;
}
.con2 {
    display: flex;               /* Flexbox를 사용하여 요소들을 가로로 정렬 */
    align-items: center;         /* 세로로 가운데 정렬 */
    justify-content: center;     /* 가로로 가운데 정렬 (선택 사항) */
    margin-bottom: 200px;
}
.footer {
    width: 100%;
    /*height: 516px;*/
    background-color: #262626;
}

.ft1 {
    display: inline-block;
    width: 1500px;
    margin: 0 auto;
    padding-top: 120px;
}
.ft-l {
    display: block;
    width: 50%;
    float: left;
    text-align: left;
}
.ft-r {
    width: 50%;
    display: block;
    float: right;
    text-align: right;
}

.ft2, .ft3 {
    display: inline-block;
    width: 1500px;
    text-align: left;
    padding-top: 40px;
}
.ft3 {
    padding-top: 0px;
    margin-bottom: 20px;
}
.fcon {
    margin: 10px 0;
}
.ftt {
    display: inline-block;
    width: 150px;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-right: 20px;
    color: #fff;
}
.ftd {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    color: #c5c5c5;
}
.bd {
    display: block;
    height: 1px;
    margin: 40px 0 24px;
    opacity: 0.1;
    background-color: #fff; 
}
.ninano {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    color: #c5c5c5;
    text-decoration: none;
}

#content {
    display: inline-block;
    width: 100%;
    min-height: 2000px;
}

#v_content {
    display: inline-block;
    width: 100%;
    min-height: 1000px;
    background: url('../img/exterior/6.jpg') no-repeat;
    background-size: cover;
}

.videowrap {
    position: relative;
    width: 100%;
    max-width: 1100px;
    min-width: 1100px;
    text-align: center;
    margin: 0 auto;
    padding-top: 8%;
}

.h_sec {
    display: block;
    width: 100%;
    height: 100vh;
}

.h_img {
    display: block;
    width: 100%;
    height: 100vh;
}

.hTit {
    position:absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Jost", sans-serif;
    font-size: 46px;
    font-weight: 400;
    color: white; 
    text-align: left;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.hDesc {
    position:absolute;
    top: 58%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    font-family: "Noto Sans KR", sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    color: white; 
}

.h_Title {
    display: block;
    width: 100%;
    margin: 150px auto 80px;
    text-align: center;
}
.h_sec_tit {
    font-family: "Cormorant Infant", serif;
    font-size: 46px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}
.h_sec_desc {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #888;
}
.h_sec_rdesc {
    font-family: "Jost", serif;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin-bottom: 4px;
}
.h_sec_rtit {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #000;
}
.c_box {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.c_box ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    width: 90%;
    margin: 0 auto;
}
.c_box ul li {
    float: left;
    width: 14%;
    margin-right: 20px;
    border: 1px solid #b7b7b7;
    padding: 8px 10px;
    text-align: center;
    transition: border-color 0.3s ease;
}
.c_box ul li:last-child {
    margin-right: 0;
}
.c_box ul li a {
    display: block;
    height: 100%;
    width: 100%;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #b7b7b7;
    transition: letter-spacing 0.3s ease, color 0.3s ease;
    letter-spacing: 0px;
}
.c_box ul li a:hover {
    letter-spacing: 5px;
    color: #333;
}
.c_box ul li:hover {
    border-color: #333;
}
.c_box ul li.t_active {
    background-color: #3393a3;
    border-color: #333;
    
}
.c_box ul li a.t_active {
    color: #fff;
}
.rp_box {
    position: relative;
    width: 100%;
    height: 500px;
    margin-bottom: 100px;
    /* 👉 애니메이션 초기 상태 */
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
  }

  /* reverse 방향일 때 (오른쪽 → 왼쪽) */
.rp_box.reverse {
    transform: translateX(100px);
  }
  
  /* 스크롤 진입 시 등장 */
  .rp_box.show {
    opacity: 1;
    transform: translateX(0);
  }
  
  
  /* 이미지 공통 */
  .rp_img {
    position: absolute;
    top: 0;
    width: 1320px;
    height: 500px;
    overflow: hidden;
    background: #000;
    z-index: 1;
  }
  
  .rp_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    
  }
  .rp_img a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
  }
  /* 딤 처리 */
.rp_img .dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3); /* 어두운 반투명 딤 */
    transition: background-color 0.3s ease;
    z-index: 2;
  }
  
  .rp_img .view-more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background-color: transparent;     /* ✅ 배경 투명 */
    color: #fff;                       /* ✅ 흰색 글자 */
    border: 2px solid #fff;            /* ✅ 흰색 테두리 */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3;
    cursor: pointer;
  }
  
  /* hover 시 나타남 */
  .rp_img:hover .view-more {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.05); /* 살짝 확대 */
  }
  
  /* hover 시 효과 */
  .rp_img:hover .dim {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  
  
  /* 이미지 왼쪽에 딱 붙기 */
  .rp_img.left {
    left: 0;
  }
  
  /* 이미지 오른쪽에 딱 붙기 */
  .rp_img.right {
    right: 0;
  }
  
  /* 텍스트 공통 */
  .rp_text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: 320px;
    background-color: #f7f7f7;
    z-index: 2;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  }
  
  /* 텍스트 박스 오른쪽 배치 */
  .rp_text.right {
    right: 0;
    margin-right: 100px;
  }
  
  /* 텍스트 박스 왼쪽 배치 */
  .rp_text.left {
    left: 0;
    margin-left: 100px;
  }
  
  .rp_text span {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
  }
.rp_text span.rp1 {
    font-size: 18px;
    font-family: "Cormorant Infant", serif;
}
.rp_text span.rp2 {
    font-size: 26px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: bold;
}
.rp_text span.rp3 {
    margin-top: 10px;
}
.rp_text span.rp3, .rp_text span.rp4, .rp_text span.rp5 {
    font-size: 15px;
    font-family: "Noto Sans KR", sans-serif;
    
}

.room-info-wrap {
    width: 1320px;
    margin: 0 auto;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
  }
  
  .title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
  }
  
  .subtitle {
    font-family: "Jost", sans-serif;
    font-size: 40px;
    color: #555;
    margin-bottom: 10px;
    text-align: left;
  }
  
  .line {
    border-top: 1px solid #ccc;
    margin: 10px 0 30px;
  }
  
  .info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 60px;
  }
  .guide-section{
    margin-top: 50px;
  }
  .info-grid.guide {
    gap: 20px 0;
  }
  
  .info-item {
    width: calc(50% - 30px);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .info-item.full {
    width: 100%;
  }
  
  .label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #222;
  }
  
  .label .bar {
    display: inline-block;
    width: 2px;
    height: 12px;
    background-color: #3393a3;
  }
  
  .value {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    text-align: left;
  }
  .btn-wrap {
    text-align: center; /* 👉 버튼을 가로 중앙 정렬 */
    margin: 100px 0 0;
  }
  
  .reservation-btn {
    background-color: transparent;
    color: #3393a3;
    border: 2px solid #3393a3;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
  }
  
  .reservation-btn:hover {
    background-color: #3393a3;
    color: #fff;
  }

  .c_box ul.res {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    gap: 20px;
}
.c_box ul.res li {
    width: 14%;
    border: 1px solid #b7b7b7;
    padding: 8px 10px;
    text-align: center;
    transition: border-color 0.3s ease;
}
.c_box ul.res li:last-child {
    margin-right: 0;
}
.c_box ul.res li a {
    display: block;
    height: 100%;
    width: 100%;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #b7b7b7;
    transition: letter-spacing 0.3s ease, color 0.3s ease;
    letter-spacing: 0px;
}
.c_box ul.res li a:hover {
    letter-spacing: 5px;
    color: #333;
}
.c_box ul.res li:hover {
    border-color: #333;
}
.c_box ul.res li.t_active {
    background-color: #3393a3;
    border-color: #333;
    
}
.c_box ul.res li a.t_active {
    color: #fff;
}

.container {
    width: 1320px;
    margin: 0 auto;
    padding: 60px 40px;
    background: #fff;
    box-sizing: border-box;
}

.info-block {
    margin-bottom: 60px;
}

.info-block h2 {
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 600;
    text-align: left;
    color: #222;
}

.info-block h2 span {
    display: block;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
}

.info-block hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 16px 0 24px;
}

.info-block p {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 0;
    text-align: left;
}

.table-section {
    margin-top: 60px;
}

.table-section table {
    width: 100%;
    border-collapse: collapse;
}

.table-section td {
    border: 1px solid #ddd;
    padding: 12px 10px;
    font-size: 14px;
    text-align: left;
    background-color: #fafafa;
    transition: background-color 0.3s ease;
}

.table-section td:hover {
    background-color: #f0f0f0;
}

.aurora {
    color: #2fa5e7;
}

.blossom {
    color: #ee266d;
}

.notice_wrap, .notice_wrap .ntable{display:block;width:100%;}
.notice_wrap{border-top:1px solid #333;margin:auto;}
.notice_wrap .ntable_t li:first-child{display:inline-block;float:left;width:60%;padding:15px 5px;overflow:hidden;border-bottom:1px solid #ddd}
.notice_wrap .ntable_t li:nth-child(2){display:inline-block;float:left;width:20%;padding:15px 5px;overflow:hidden;border-bottom:1px solid #ddd}
.notice_wrap .ntable_t li:last-child{display:inline-block;float:left;width:20%;padding:15px 5px;text-align:center;border-bottom:1px solid #ddd}
.notice_wrap .ntable_t.nthead li{text-align:center;font-weight:bold}

.notice_wrap .ntable li:first-child{display:inline-block;float:left;width:70%;padding:15px 5px;overflow:hidden;border-bottom:1px solid #ddd}
.notice_wrap .ntable li:last-child{display:inline-block;float:left;width:30%;padding:15px 5px;text-align:center;border-bottom:1px solid #ddd}
.notice_wrap .ntable.nthead li{text-align:center;font-weight:bold}

.notice_wrap .ntable2{width:100%;display: table; border-collapse: collapse;}
.notice_wrap .ntable2 tbody tr {border-bottom: 1px solid #eaedec;}
.notice_wrap .ntable2 tbody tr td{line-height: 50px;}
.notice_wrap .ntable2 tbody tr td.title{width:60%;display:table-cell;}
.notice_wrap .ntable2 tbody tr td.writer{width:20%;display:table-cell;text-align: center;}
.notice_wrap .ntable2 tbody tr td.date{width:20%;display:table-cell;text-align: center;}

.notice_wrap .ntable2 tbody tr td.title span.answer{display:inline; padding:2px 4px; border:1px solid #666; border-radius:5px;font-size:11px; color:#666; margin-right:10px;}
.notice_wrap .ntable2 tbody tr td.title span.a_complete{display:inline; padding:2px 4px;background:#645a4a; border-radius:5px;font-size:11px; color:#fff; margin-right:10px;}


div.sub_wrap div.notice_wrap form table.qaboard {width:100%;}

div.sub_wrap div.notice_wrap form table.qaboard tbody tr td{text-align: center;}
div.sub_wrap div.notice_wrap form table.qaboard tbody tr td.hd{width:10%;height:80px;vertical-align: middle;font-weight: bold;}

div.sub_wrap div.notice_wrap form table.qaboard tbody tr td.in{width:90%;height:80px;vertical-align: middle;}
div.sub_wrap div.notice_wrap form table.qaboard tbody tr td input, div.sub_wrap div.notice_wrap form table.qaboard tbody tr td textarea {width:100%;border:1px solid #ccc;}
div.sub_wrap div.notice_wrap form table.qaboard tbody tr td.half{width:40%;height:80px;vertical-align: middle;font-weight: bold;}
div.sub_wrap div.notice_wrap form table.qaboard tbody tr td textarea {height:300px; background:#fff; resize: none;}

/*썸네일 Board*/
.notice_wrap {
    display: inline-block;
}
/*
.nt_wrap > ul.nt_thumb {
    display: block;
    width: 1140px;
    margin: 0;
    padding: 0;
    margin: 100px auto 0;
    list-style-type: none;
}
.nt_wrap > ul.nt_thumb > li {
    display: inline-block;
    width: 366px;
    padding: 0 0 10px 0;
    margin-right: 16px;
    margin-bottom: 40px;
    text-align: center;
    border: 1px solid #e0aa35;
    border-radius: 10px;
}
.nt_wrap > ul.nt_thumb > li:hover {
    box-shadow: 1px 1px 15px #e0aa35;
    transition: all .5s ease;
}
.nt_wrap > ul.nt_thumb > li.endevent {
    border: 1px solid #9b9b9b;
}
.nt_wrap > ul.nt_thumb > li.endevent:hover {
    box-shadow: 1px 1px 15px #9b9b9b;
    transition: .3s;
}
.nt_wrap > ul.nt_thumb > li:nth-child(3n) {
    margin-right: 0;
}
.nt_wrap > ul.nt_thumb > li > a {
    line-height: 60px;
   
}
.nt_wrap > ul.nt_thumb > li > a > span.evend {
    display: block;
    position: absolute;
    width: 90px;
    height: 30px;
    line-height: 26px;
    bottom: 50px;
    left: -1px;
    z-index: 999;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #403737;
    padding: 4px 5px;
    color: #fff;
    font-size: 14px;
}
.nt_wrap > ul.nt_thumb > li > a > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt_wrap > ul.nt_thumb > li > a > img {
    width: 100%;
    display: block;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin-bottom: 10px;
}
.nt_wrap > ul.nt_thumb > li > a > img.endevent {
    filter: grayscale(100%);
}
.nt_wrap > ul.nt_thumb > li > a > p.endevent {
    color: #ccc;
}
*/
.b_none {
    border: none;
}
.nodata{text-align:center;padding:5em 0;color:#666}

.blog-item a {
    text-decoration: none;
    color: #333;
}

.c_box .paging {width:50%;text-align:center;margin:10px auto;overflow:hidden;}
.c_box .paging ul{display:inline-block;overflow:hidden;width:auto;}
.c_box .paging ul li{display:inline-block;float:left;padding:0 10px; border:none;}
.c_box .paging ul li a{display:inline-block;padding:10px;}
.c_box .paging ul li.current a{color:#333;font-weight:700}