@charset "utf-8";
@font-face {font-family:'S-CoreDream-3Light';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');font-weight:normal;font-style:normal}
@font-face {font-family:'S-CoreDream-1Thin';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');font-weight:normal;font-style:normal}

@font-face {
    font-family: 'Aritaburi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-buri-SemiBold.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

html{overflow-y: auto;}
html,body {width:100%;}
body {margin:0;padding:0;font-size:0.75em;font-family:'Aritaburi'; color:#3c281b;} 
h1, h2, h3, h4, h5, h6, a, p, div {font-family:'Aritaburi';}


/* 1. 최상위 래퍼: 100% 너비로 설정하여 라인이 끝까지 가도록 함 */
#wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}


/* 2. 섹션 공통 스타일: 하단 라인으로 구분 */
section, .section-wrap {
    width: 100%;
    position: relative;
    box-sizing: border-box;1
}

/* --- 헤더 1400px 중앙 정렬 스타일 --- */

#hd {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;   /* 배경은 무조건 100% */
    height: 80px;             /* 높이 지정 */
    z-index: 1000;
    /* 내부의 .width1400 박스를 화면 정중앙에 배치 */
    display: flex !important;
    justify-content: center !important; 
    padding: 0 !important;    /* 부모 패딩 제거 */
	background-color: rgba(255,255,255,0.20);
}

#hd .logo img{width:150px}

/* 내부 콘텐츠 컨테이너 */
.width1400 {
    width: 100%;
    max-width: 1400px;        /* 최대 너비 제한 */
    height: 100%;  
    /* 내부 요소(로고, 메뉴, 버튼) 가로 정렬 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;          /* 좌우 여백 */
    box-sizing: border-box;
}


#container, section {
    width: 100% !important;
    margin: 0 auto;
}

/* --- 반응형 규격 (1400px 이하 100% 대응) --- */
@media (max-width: 1400px) {
    #wraper, #hd {
        padding: 0 !important; /* 화면 축소 시 유연한 여백 유지 */
    }
}


/* 시안용 추가 스타일 (파일 맨 아래 추가) */
.makers-gnb { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: 15px; }
.makers-gnb a { color: #3c281b; text-decoration: none; }

.outline-text { font-size: 11vw; font-weight: 100; color: #3c281b;  letter-spacing: 0px; line-height: 1; text-align: center;}/*-webkit-text-stroke: 1.5px #1a2432;*/

::selection {background-color:#ff8400;color:#fff}
ul {margin:0;padding:0;list-style:none}
ol,li,dl,dt,dd {margin:0;padding:0} 
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'Aritaburi';font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Aritaburi';font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*:focus {
outline: 0;
outline: none;
}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

.text-vertical-center {display:table-cell;text-align:center;vertical-align:middle}
.text-vertical-center h1 {margin:0;padding:0;font-size:3.5em;font-weight:700;color:#ec6a00}
.text-vertical-center h1 a,.text-vertical-center h1 a:hover{color:#000;text-decoration:none}

#page_nat{position:fixed;top:40%;left:3%;margin:0;padding:0;z-index:99999}
#page_nat li{list-style:none;margin-top:5px;font-size:none !important}
#page_nat li a{font-size:none !important;width:15px;height:15px;border-radius:50%;background:silver;text-indent:-9999px;text-decoration:none;display:inline-block}
#page_nat li a.on{background:#ff8400}

/* 사이드 메뉴 버튼 */
.btn-dark {border:none;width:50px;height:50px;background:url('../img/menu_btn.png') center center no-repeat !important}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active {color: #fff;box-shadow:0 0 5px #e2e2e2}
.btn-light {position:absolute;left:5px;top:10px;width:40px;height:40px;background:url('../img/meue_cloes.png') center center no-repeat !important;border:0 !important}
.btn-light:hover,.btn-light:focus,.btn-light:active{}


/* 사이드 메뉴 */
#sidebar-wrapper {z-index: 1000;position:fixed;right:0;width:250px;height:100%;margin-right:-250px;background: #fff;-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s}
.home {height:55px;border-bottom:1px solid #e8f0ff;background:#f5f5f5;position:relative}
.home a {float:right;margin:10px 10px 0 0;width:30px;height:30px;line-height:30px;text-align:center;color:#6f6f6f;border-radius:3px}
.home a:hover{background:#e4e4e4}
.home:after{display:block;content:"";clear:both}

.profile_ct {padding:30px 0}
.profile_ct .pf_img {width:130px;height:130px;border-radius:50%;background:url('../img/face.png') center center no-repeat !important;margin:0 auto}
.profile_ct ul {margin:10px 0;padding:0;list-style:none;width:250px}
.profile_ct li{text-align:center}

.profile_ct ul.sns{width:250px;display:inline-block !important;text-align:center !important}
.profile_ct ul.sns li{display:inline;margin-left:10px;text-align:center !important}
.profile_ct li a{color:#fff;display:inline-block;width:30px;height:30px;line-height:34px;border-radius:3px}
.profile_ct li.s_facebook a{background:#3b5999}
.profile_ct li.s_twitter a{background:#dd4b39}
.profile_ct li.s_google a{background:#00bbf5}

.sidebar-nav {margin:0;padding:0;list-style:none;background:#f8f9fb;border-top:1px solid #eff0f4;z-index: 99999;}
.sidebar-nav li, .profile_ctv li {line-height:40px;border-bottom:1px solid #eff0f4;text-align:right}
.sidebar-nav li:hover {background:#fff}
.sidebar-nav li a {display:block;text-decoration:none;color: #999;text-align:center}
.sidebar-nav li a:hover {text-decoration: none;color:#ff8400;background: url('../img/btn_on.png') 5% 50% no-repeat}
.sidebar-nav li a:active, .sidebar-nav li a:focus {text-decoration:none}
.sidebar-nav .sidebar-brand {height:55px;font-size:18px;line-height:55px}
.sidebar-nav .sidebar-brand a {color:#999}
.sidebar-nav .sidebar-brand a:hover {color:#fff;background:none}
#menu-toggle {z-index:9999;position:fixed;top:0;right:0;height:50px;width:50px;color:#e2e2e2;border:0;text-align:center}
#sidebar-wrapper {box-shadow: 5px 5px 5px 5px lightgray}
#sidebar-wrapper.active {right:250px;width:250px;-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s}
.toggle {margin:5px 5px 0 0}


/*공통*/
.row {padding:60px 0 !important}
.more {width:15px;height:15px;display:inline-block;background:url('../img/more_btn.png') center right no-repeat}
/*.title_line{width:20px;border-top:1px solid #333;text-align:center;display:inline-block}*/
hr{border-color:transparent -moz-use-text-color -moz-use-text-color !important}
.about, .resume, .contact, .news {background:#fff;padding:30px 0 50px}
.skills{padding:30px 0 50px}
#container section h2 a {color:#000}
#container section h2 a:hover{text-decoration:none;color:#ff8400}
#container_title {padding:35px 0;font-size:1.2em;font-weight:bold;text-align:center;color:#ff8522;margin-bottom:50px;}

@media (max-width:890px) {
	.lead {font-size:1em !important}	
}



/* 2. 예약 버튼 섹션 */
.reservation-section { padding: 0 0 100px 0; background-color: #fff; }

.reservation-section .inner-1400 {
	position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.res-grid { display: flex; flex-direction: column; gap: 5px; padding:70px 0; } /* 이미지 사이 얇은 간격 */

.res-row { display: flex; gap: 5px; width: 100%; }
.res-row.full .res-item { height: 350px; }
.res-row.half .res-item { height: 350px; flex: 1; }

.res-item {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden; /* 이미지 확대시 삐져나감 방지 */
    background-color: #2a2a2a;
    text-decoration: none;
}

/* 배경 이미지 확대 트랜지션 */
.res-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}
/* 마우스 오버 시 1.1배 확대 */
.res-item:hover .res-bg { transform: scale(1.1); }

/* 어두운 오버레이 (글씨 가독성 확보) */
.res-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 평소 어둡게 */
    transition: background-color 0.4s ease;
    z-index: 2;
}
.res-item:hover .res-overlay {
    background-color: rgba(0, 0, 0, 0.3); /* 호버 시 살짝 밝아짐 */
}

/* 예약 텍스트 */
.res-item h3 {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #e6b78a; /* 시안의 베이지/골드빛 텍스트 */
    font-size: 26px; font-weight: 500;
    letter-spacing: -1px; z-index: 3; margin: 0;
}


/* ================== 모바일 반응형 처리 ================== */
@media (max-width: 991px) {
	.res-grid { padding:20px 0; } /* 이미지 사이 얇은 간격 */
	
    .res-row { flex-direction: column; }
    .res-row.full .res-item, .res-row.half .res-item { height: 250px; }
}





/* Hero 섹션 전체 */
#hero {
    position: relative;
    width: 100%;
    height: 95vh;               /* 풀스크린 높이 */
    min-height: 600px;           /* 너무 작아지지 않게 */
    overflow: hidden;
    background: #000;
}

/* 비디오 래퍼 */
.hero-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 1. 메인 섹션 컨테이너 (높이 지정 필수) */
#hero {
    position: relative;
    width: 100%;
    height: 95vh; /* 화면 전체 높이 사용 */
    overflow: hidden;
    background-color: #000; /* 비디오 로딩 전 배경 */
}

/* 2. 비디오 (배경) */
#hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
    object-fit: cover;
    z-index: 1;
}

/* 3. 오버레이 (영상 어둡게) */
.hero-overlay {
    position: absolute;
    inset: 0; /* top, right, bottom, left: 0 과 동일 */
    background: rgba(0, 0, 0, 0.2); /* 0.18 -> 0.2로 소수점 정리 */
    z-index: 2;
    pointer-events: none; /* 클릭 통과 */
}

/* 4. 텍스트 컨테이너 (정중앙 정렬 핵심) */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;          /* 플렉스 박스 사용 */
    flex-direction: column; /* 세로 정렬 */
    align-items: center;    /* 가로 가운데 */
    justify-content: center;/* 세로 가운데 (상하 중앙) */
    text-align: center;
    padding: 0 40px;        /* 모바일 좌우 여백 확보 */
    color: #ffffff;
}

/* 5. 텍스트 래퍼 */
.hero-text-wrapper {
    width: 100%;
    max-width: 1100px;
    /* 내부 요소들도 세로로 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 서브타이틀과 타이틀 사이 간격 */
}

/* 6. 서브 타이틀 (상단 작은 글씨) */
 .hero-subtitle{
    display: block;
    font-size: 1.5rem; /* 고정 크기 추천 (혹은 2vw) */
    font-weight: 600;
    letter-spacing: 0.2em; /* 자간 넓게 */
    text-transform: uppercase;
    opacity: 0.9;
    margin: 0; /* gap으로 간격 조정하므로 마진 제거 */
}
    
/* 모바일 반응형 */
    @media(max-width: 768px) {
		.hero-subtitle{
        font-size: 12px;
			letter-spacing:0;
			}
    }

/* 7. 메인 타이틀 (큰 글씨) */
.hero-title {
    font-family: 'Aritaburi';
    font-size: 8vw; /* 화면 꽉 차게 */
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 그림자 부드럽게 */
    word-break: keep-all; /* 단어 끊김 방지 */
    
    /* 모바일에서는 너무 크지 않게 제한 */
    @media (max-width: 768px) {
        font-size: 40px; 
    }
    @media (min-width: 1600px) {
        font-size: 140px; /* 최대 크기 제한 */
    }
}
/* --- ABOUT 섹션 정밀 교정 (시안 반영) --- */
.about-asymmetric {
    padding: 0 !important; /* 시원한 상하 여백 */
    position: relative;
}

.about-container-1400 {
    width: 100%;
    position: relative;
}

.about-left-content {
	top:0;
}

/* 좌측 상단 이미지: 텍스트 가독성을 위해 위로 올림 */
.about-img-main {
    width: 65% !important;
    margin-bottom: 50px !important;
    position: relative;
    z-index: 2;
}

/* 텍스트 박스 */
.about-text-box {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #3c281b;
    margin-bottom: 80px;
    position: relative;
    z-index: 5;
}

/* 좌측 하단 이미지: 세로선에 살짝 걸침 */
.about-img-sub {
    width: 48% !important;
    margin-left: auto;
    margin-top: -300px;
	margin-right: -140px;
    position: relative;
    z-index: 10;
}
.about-img-bt {
	width: 80% !important;
	margin-top:50px;
    margin-bottom: 0px !important;
    position: relative;
    z-index: 2;
}

/* 우측 도어 이미지: 선 안쪽으로 안정적으로 배치 */
.about-img-door {
    width: 90% !important;
    margin-left: auto !important;
    margin-top: -20px;
	margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* --- WORK 그리드 정돈 및 마우스 오버 효과 (수정됨) --- */

.work-grid-container {
    width: 100%;
    /* 상하 라인은 섹션 공통 스타일에서 처리되므로 좌우만 추가 */
    box-sizing: border-box;
}

.work-grid-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

.work-grid-item {
    width: 50%; /* 2열 배치 */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative; /* 중요: 오버레이 위치 기준 */
    box-sizing: border-box;
}

/* 짝수 번째 아이템(오른쪽)은 우측 선 제거 */
.work-grid-item:nth-child(2n) {
    border-right: none;
}

/* 링크 영역 꽉 채우기 */
.work-grid-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 이미지 스타일 (줌인 효과) */
.work-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.work-grid-item:hover img {
    transform: scale(1.05); /* 마우스 오버 시 이미지 확대 */
}

/* --- [수정] 텍스트 오버레이 (Class: .work-overlay) --- */
.work-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 56, 79, 0.85); /* 네이비 반투명 배경 */
    opacity: 0; /* 평소에는 숨김 */
    transition: all 0.4s ease; /* 부드러운 전환 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 2; /* 이미지보다 위에 */
}

/* 마우스를 올렸을 때 텍스트 보이기 */
.work-grid-item:hover .work-overlay {
    opacity: 1;
}

/* 오버레이 내부 텍스트 스타일 */
.work-overlay h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    transform: translateY(20px); /* 아래에서 위로 올라오는 효과 준비 */
    transition: transform 0.4s ease;
}

.work-overlay p {
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s; /* 약간 늦게 올라옴 */
}

/* 호버 시 텍스트 위치 제자리로 */
.work-grid-item:hover .work-overlay h3,
.work-grid-item:hover .work-overlay p {
    transform: translateY(0);
}

/* 모바일 반응형 (1열로 변경) */
@media (max-width: 768px) {
	
	/* 중앙 세로선 (절제된 감도) */
.about-container-1400::after {
    content: "";
    position: absolute;
    top: 0;
    left: 60%; 
    width: 0px;
    height: 100%;
    background-color: #3c281b;
    z-index: 1;
}
	
    .work-grid-item {
        width: 100%;
        border-right: none; /* 모바일은 우측 선 없음 */
    }
}

/* --- 아웃라인 텍스트 --- */
.about-footer-text .outline-text {
    font-size: 140px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(19, 56, 79, 0.4);
    text-transform: uppercase;
}

/* 모든 이미지 기본 설정 */
img { max-width: 100%; height: auto; display: block; }
/*bg*/
#bg1 {display:table;position:relative;width:100%;height:100%;background:url('../img/SAM_6355.jpg') center center no-repeat;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover} 
#bg2 {display:table;position:relative;width:100%;height:100%;background:url('../img/SAM_6355.jpg') center bottom no-repeat;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover}    
#bg1 .container, #bg2 .container {height:400px}   


/* --- LATEST (QA) 실시간 문의 섹션 수정판 --- */

.latest-split-section {
    padding: 30px 0 20px; /* 좌우 여백 0으로 변경 (1400px 내부에서 제어) */
    overflow: hidden;
    height: auto !important;
    min-height: auto !important;
}

.latest-1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    /* PC에서는 적당한 안쪽 여백 */
    padding: 0 40px; 
    box-sizing: border-box;
}

/* 상단 타이틀 */
.qa-title-box {
    margin-bottom: 40px;
    text-align: center;
}

.qa-title-box h2 {
    font-size: 40px;
    font-weight: 900;
    color: #1a2432;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.qa-title-box p {
    font-size: 16px;
    color: #666;
}

/* --- 리스트 그리드 레이아웃 (PC: 2열 / 세로 3행) --- */
.qa-list-container {
    width: 100%;
    overflow: hidden;
}

.qa-list-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 리스트 아이템 (카드 디자인) */
.qa-list-container li {
    width: calc(50% - 10px); /* PC: 2개씩 보기 */
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0,0,0,0.05);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

/* 마우스 호버 효과 */
.qa-list-container li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #e66e2c;
}

/* 내부 콘텐츠 스타일 */
.qa-list-container li a {
    font-size: 18px;
    font-weight: 700;
    color: #1a2432;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-list-container .lt_date, 
.qa-list-container .txt_date {
    font-size: 13px;
    color: #888;
    float: right;
}

.qa-list-container .icon_hot, 
.qa-list-container .icon_new {
    display: inline-block;
    background: #fff3e0;
    color: #e66e2c;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
    font-weight: 600;
    vertical-align: middle;
}

/* ==========================================================================
   ABOUT 섹션 - 모바일 전용 스타일
   ========================================================================== */
@media (max-width: 991px) {

    /* 섹션 전체 여백 정리 */
    #about {
        padding: 0px !important;
        border-bottom: 1px solid #3c281b;
    }

    .about-container-1400 {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* row와 col 구조 해제 → 세로 흐름으로 변경 */
    .about-asymmetric .row {
        flex-direction: column !important;
        margin: 0 !important;
    }

    .about-asymmetric .col-md-7,
    .about-asymmetric .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 왼쪽 콘텐츠 (메인 이미지 + 텍스트 + 서브 이미지) */
    .about-left-content {
        margin-bottom: 40px !important;
    }

    .about-img-main {
        margin-bottom: 20px !important;
    }

    .about-img-main img,
    .about-img-sub img,
    .about-img-bt img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }


    /* 오른쪽 door 이미지 영역 - 세로 80%만 보이게 제한 */
    .about-right-content {
        width: 100% !important;
        height: 50vh !important;           /* 화면 높이의 80% */
        max-height: 600px !important;      /* 너무 길어지지 않게 상한 */
        overflow: hidden !important;       /* 넘치는 부분 잘림 */
        position: relative !important;
        margin: 0 auto 20px !important;
    }

    .about-img-door {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .about-img-door img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;  /* 위쪽부터 보이게 */
    }

    /* AOS 애니메이션 모바일에서 너무 과하지 않게 */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- [수정] 모바일 반응형 (768px 이하) --- */
@media (max-width: 768px) {
    
    .latest-split-section {
        /* 상하 여백 줄이고, 좌우 여백 0으로 확실하게 초기화 */
        padding: 50px 0 0px !important;
    }

    .latest-1400 {
        /* 모바일에서는 좌우 여백을 20px만 주어 카드를 넓게 표시 */
        padding: 0 0 !important;
    }
    
    .qa-title-box h2 { font-size: 28px; }
    
    .qa-list-container ul {
        gap: 15px; /* 간격 살짝 좁힘 */
    }

    /* 1. 모바일에서는 1열(한 줄에 1개)로 변경 */
    .qa-list-container li {
        width: 100% !important; 
        margin-bottom: 0; /* gap으로 간격 처리 */
    }

    /* 2. [핵심] 모바일에서 6번째 게시물부터 숨김 (5개만 노출) */
    .qa-list-container li:nth-child(n+6) {
        display: none !important;
    }
}

/* =============================================
   ABOUT 모바일 최신 수정 (선 제거 + 모든 요소 세로 단락)
   ============================================= */
@media (max-width: 991px) {
    .about-container-1400,
    .about-left-content,
    .about-right-content,
    .about-img-main,
    .about-img-sub,
    .about-img-bt,
    .about-img-door {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    .about-left-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        margin-bottom: 50px !important;
    }

    .about-img-main,
    .about-img-bt {
        width: 100% !important;
        margin: 0 !important;
    }
	.about-img-sub {
		display: none;
	}
    .about-img-main img,
    .about-img-sub img,
    .about-img-bt img,
    .about-img-door img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }

    .about-text-box {
        padding: 5px !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
        text-align: center !important;
        margin: 0 !important;
    }
}


/*푸터*/
/* --- FOOTER STYLE --- */
.footer_wrapper {
    background-color: #f8f8f8; /* 연한 회색 혹은 흰색 계열 배경 */
    padding: 60px 0 40px;
    border-top: 1px solid #eee;
    color: #666;
}

.footer_container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 중앙 정렬 */
    text-align: center;
}

.footer_logo h2 {
    font-size: 22px;
    color: #3c281b; /* 기존 텍스트 컬러와 통일 */
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.footer_info {
    margin-bottom: 30px;
}

.footer_info_row {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.6;
}

.footer_bar {
    margin: 0 12px;
    color: #ccc;
    font-size: 13px;
    vertical-align: middle;
}

.footer_copyright {
    width: 100%;
    padding-top: 25px;
    border-top: 1px solid #e9e9e9;
}

.footer_copyright p {
    font-size: 13px;
    color: #999;
}

/* --- 푸터 반응형 모바일 --- */
@media (max-width: 768px) {
    .footer_wrapper {
        padding: 40px 20px;
    }
    
    .footer_info_row {
        font-size: 14px;
    }

    .footer_bar {
        display: none; /* 모바일에서는 구분선 숨김 */
    }

    .footer_info_row span {
        display: block; /* 모바일에서는 정보를 세로로 나열 */
        margin-bottom: 5px;
    }
}

/*푸터*/

/*로고*/

/* ==================== 로고 SVG 최적화 ==================== */
.logo img,
#hd .logo img,
#logo img {
    width: 150px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    transition: all 0.3s ease;
    vertical-align: middle;
}

/* 상단 로고 호버 효과 */
.logo-link:hover img {
    opacity: 0.85;
    transform: scale(1.05);
}

/* 하단 푸터 로고 */
.ft_top_wrap .f_logo img {
    width: 180px;
    height: auto;
    max-height: 75px;
    object-fit: contain;
}

/* ==================== 모바일 ==================== */
@media (max-width: 768px) {
    .logo img,
    #hd .logo img {
        width: 125px;           /* 상단 → 125px */
        max-height: 52px;
    }
    
    .ft_top_wrap .f_logo img {
        width: 150px;           /* 하단 → 150px */
        max-height: 62px;
    }
    
    /* 모바일에서 너무 커지지 않게 */
    .ft_top_wrap {
        padding: 18px 15px !important;
    }
}

@media (max-width: 480px) {
    .logo img { width: 110px; }
    .ft_top_wrap .f_logo img { width: 135px; }
}




/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha2.png') no-repeat 0 0 ;vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:#ff8400;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#ff8422}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#ff8400;border-color:#ff8400;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#ff8400;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {margin-bottom:30px;text-align:center;}
.new_win .btn_close {height:45px;width:60px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {margin-bottom:40px}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#ff8400;border:1px solid #ff8400;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* --- 테스트 버전 전용: PC 1400px 고정 레이아웃 --- */

/* 1. PC 환경 (너비 1400px 이상일 때) */
@media (min-width: 1400px) {
    /* 전체 감싸는 영역을 1400px로 제한하고 중앙 정렬 */
    #wrapper {
        width: 1400px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.05); /* 경계 구분을 위한 미세한 그림자 */
    }

    /* 상단 헤더(Fixed일 경우)도 너비 제한 및 중앙 정렬 */
    #hd {
        width: 1400px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
		background-color: rgba(255,255,255,0.20);
    }

    /* 푸터 영역도 1400px에 맞춤 */
    .main_footer {
        width: 1400px !important;
        margin: 0 auto !important;
    }
    
    /* 배경이 바깥쪽까지 채워지도록 설정 */
    html {
        background-color: #c9c4b6 !important; /* 본문보다 살짝 어두운 베이지로 배경 분리 가능 */
    }
}

/* 2. 모바일/태블릿 환경 (기존 반응형 유지) */
@media (max-width: 1399px) {
    #wrapper, #hd, .main_footer {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}
/* 모든 섹션 및 그누보드 기본 레이아웃 배경 초기화 */
#wrapper, #container, section, .row, 
.about, .work, .contact, .about-asymmetric, .work-grid-container {
    border: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* --- [최종] 심플 100% 레이아웃 (라인 풀확장) --- */

/* 1. 겉(Wrapper & Section): 무조건 100%로 풀기 */
#wrapper, #hd, #hero, .main_footer, section, .section-wrap {
    width: 100% !important;
    max-width: none !important; /* 너비 제한 해제 */
    margin: 0 !important;
    left: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}


/* 3. 속(Content): 내용은 1400px로 모으기 */
.about-container-1400, 
.work-grid-wrap, 
.latest-1400,
.ft_inner,
.work-header {
    width: 100% !important;
    max-width: 1400px !important; /* 내용물 규격 */
    margin: 0 auto !important;    /* 중앙 정렬 */
}

/* 4. 메인 영상: 무조건 100% 꽉 차게 */
#hero video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}





/*어바웃페이지*/

/* --- ABOUT PAGE STYLES --- */

/* 1. HERO 섹션 (어두운 네이비 배경 + 텍스트) */
.ab-hero {
    position: relative;
    width: 100%;
    height: 400px; /* 높이 고정 */
    background-color: #3c281b; /* 네이비 배경 */
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: none !important; /* 기존 라인 제거 */
	padding: 30px 0 0;
}

.ab-hero-bg {
    position: absolute;
    inset: 0;                    /* top:0; left:0; right:0; bottom:0; 와 동일 */
    background: url('../img/page_bg.png') center/cover no-repeat;
    z-index: 1;
}

/* 가장 중요한 부분 : 어두운 오버레이 */
.ab-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);   /* 검정 오버레이 - 투명도 조절 가능 */
    z-index: 2;
}

/* 필요하면 배경 이미지 자체도 살짝 어둡게 */
.ab-hero-bg {
    filter: brightness(0.75) contrast(1.05);  /* 선택사항 */
}

.ab-hero .inner-1400 {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.ab-hero-text {
    color: #fff;
	text-align: center;
}

.top-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e66e2c; /* 오렌지 포인트 */
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.3;
}

.point-color {
    color: #e66e2c;
    border-bottom: 3px solid #e66e2c; /* 밑줄 포인트 */
}


/* 2. STATS 섹션 (통계) */
.ab-stats {
    width: 100%;
    background-color: #3c281b; /* 흰색 배경으로 분리 */
    border-bottom: 1px solid #3c281b;
}

.ab-stats .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
}

.stat-box {
    flex: 1;
    text-align: center;
    border-right: 1px solid #3c281b; /* 구분선 */
	padding: 20px 0;
}

.stat-box:last-child { border-right: none; }

.stat-num-wrap {
    font-family: 'Aritaburi', sans-serif;
    color: #1a2432;
    font-weight: 900;
    font-size: 60px;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-num-wrap .unit {
    font-size: 30px;
    color: #e66e2c;
    vertical-align: top;
    margin-left: 5px;
}

.stat-desc {
    font-size: 18px;
    color: #666;
    font-weight: 500;
}


/* 3. CEO MESSAGE 섹션 */
.ab-ceo {
    width: 100%;
    padding: 120px 0;
    border-bottom: 1px solid #3c281b;
}

.ab-ceo .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.ceo-layout {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    gap: 80px;
}

/* 좌측 이미지 영역 */
.ceo-visual {
    flex: 0 0 40%; /* 너비 40% */
    position: relative;
    padding-top: 20px;
    padding-left: 20px;
}

.ceo-img-frame {
    position: relative;
    z-index: 2;
    overflow: hidden;
    /*box-shadow: 20px 20px 0px rgba(19, 56, 79, 0.1);*/ /* 그림자 효과 */
}

.ceo-img-frame img {
    width: 100%;
    display: block;
    filter: grayscale(100%); /* 흑백 처리로 고급스럽게 */
    transition: filter 0.5s;
}

.ceo-visual:hover .ceo-img-frame img {
    filter: grayscale(0%); /* 호버시 컬러 */
}

.ceo-deco-box {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 1px solid #1a2432; /* 외곽선 장식 */
    z-index: 1;
    transform: translate(-20px, -20px); /* 살짝 어긋나게 배치 */
}

/* 우측 텍스트 영역 */
.ceo-text-wrap {
    flex: 1;
    padding: 10px 0 50px;
}

.ceo-head {
    font-size: 36px;
    color: #1a2432;
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 1.3;
}

.ceo-head strong {
    font-weight: 900;
    position: relative;
}

/* 형광펜 효과 */
.ceo-head strong::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 15px;
    background: rgba(230, 110, 44, 0.3);
    z-index: -1;
}

.ceo-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
    word-break: keep-all;
}

.ceo-body .emphasis {
    font-weight: 700;
    color: #3c281b;
    font-size: 18px;
    border-left: 4px solid #e66e2c;
    padding-left: 15px;
}

.ceo-sign {
    margin-top: 20px;
    text-align: right;
}

.ceo-sign img {
    height: 100px;
    width: auto;
    opacity: 1;
}

/* --- 반응형 (태블릿/모바일) --- */
@media (max-width: 1024px) {
    .ab-hero { height: 400px; }
    .hero-title { font-size: 32px; }
    
    .ceo-layout { flex-direction: column; gap: 50px; }
    .ceo-visual { width: 80%; margin: 0 auto; padding: 0; }
    .ceo-deco-box { display: none; } /* 모바일에서 장식 제거 */
}

@media (max-width: 768px) {
    .ab-hero { padding: 70px 20px 0; }
    .hero-title { font-size: 20px; }
    
    .stats-grid { flex-direction: column; gap: 40px; }
    .stat-box { border-right: none; border-bottom: 1px solid #3c281b; padding-bottom: 30px; }
    .stat-box:last-child { border-bottom: none; }
    
    .ab-ceo .inner-1400, .ab-stats .inner-1400, .ab-hero .inner-1400 {
        padding: 0 20px;
    }
    
    .ceo-visual { width: 100%; }
    .ceo-sign { text-align: center; }
}


/* --- [긴급 수정] 게시판(서브페이지) 레이아웃 복구 --- */

/* 1. 게시판 상위 컨테이너 강제 정렬 (리스트, 뷰, 글쓰기 등 모든 스킨 대응) */
#bo_list, #bo_gall, #bo_view, #bo_w, .bo_search {
    width: 100% !important;
    max-width: 1400px !important; /* 1400px로 다시 제한 */
    margin: 0 auto !important;    /* 중앙 정렬 */
    padding: 60px 40px 0 !important; /* 내부 여백 */
    box-sizing: border-box;
    
    /* 사이트 디자인 통일: 좌우 라인 생성 */
    background-color: #fff; /* 게시판 배경은 깔끔하게 화이트 */
}

/* 2. 게시판 타이틀(페이지 제목) 정렬 */
#container_title {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    
    /* 디자인 스타일링 */
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    color: #1a2432;
    padding: 80px 0 30px; /* 상단 헤더 공간 고려 */
    
    /* 타이틀도 라인 안쪽에 맞추려면 아래 주석 해제 */
    /* border-left: 1px solid #3c281b; border-right: 1px solid #3c281b; */
}

/* 3. 게시판 내부 테이블/리스트가 삐져나가지 않도록 처리 */
.tbl_head01, .tbl_wrap {
    width: 100% !important;
    max-width: 100%;
}

/* 4. 모바일 대응 */
@media (max-width: 1024px) {
    #bo_list, #bo_gall, #bo_view, #bo_w {
        padding: 40px 20px !important;
        border-left: none; /* 모바일에서는 라인 제거 */
        border-right: none;
    }
    #container_title {
        padding-top: 40px;
    }
}

/* =========================================
   [수정] 헤더 및 모바일 메뉴 스타일
   ========================================= */

/* 1. PC/모바일 표시 제어 (기본값: PC) */
.mobile-only { display: none !important; } /* PC에서는 무조건 숨김 */
.pc-only { display: flex !important; }     /* PC에서는 보임 */

/* 모바일 전체 메뉴판 (기본 숨김 상태) */
.mobile-full-menu {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 9998;
    background-color: #ffffff;
    
    /* 중앙 정렬 삭제, 상단부터 나열되도록 변경 */
    /* 스크롤바 생성 속성 추가 */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}

/* 2. 반응형 설정 (1024px 이하부터 모바일 모드) */
@media (max-width: 1024px) {
    
    /* PC 요소 숨기기 */
    .pc-only { display: none !important; }
    
    /* 모바일 요소 보이기 */
    .mobile-only { display: block !important; }
    
    /* 헤더 패딩 조정 (우측 밀림 방지) */
    .width1400 { 
        padding: 0 20px !important; /* 좌우 여백 축소 */
    }

    /* 햄버거 버튼 스타일 */
    .mobile-menu-btn {
        display: block;
        width: 30px; height: 20px;
        position: relative;
        cursor: pointer;
        z-index: 10001; /* 최상위 */
        margin-left: auto; /* 우측 끝으로 밀기 */
    }

    .mobile-menu-btn span {
        display: block; position: absolute;
        height: 2px; width: 100%;
        background: #1a2432; border-radius: 2px;
        left: 0; transition: .25s ease-in-out;
    }
    .mobile-menu-btn span:nth-child(1) { top: 0px; }
    .mobile-menu-btn span:nth-child(2) { top: 9px; }
    .mobile-menu-btn span:nth-child(3) { top: 18px; }

    /* 햄버거 버튼 클릭 시 (X 모양) */
    .mobile-menu-btn.open span:nth-child(1) { top: 9px; transform: rotate(135deg); }
    .mobile-menu-btn.open span:nth-child(2) { opacity: 0; left: -20px; }
    .mobile-menu-btn.open span:nth-child(3) { top: 9px; transform: rotate(-135deg); }

    /* 모바일 전체 메뉴 활성화 */
    .mobile-full-menu { display: flex; } /* 모바일에서만 flex로 변경 */
    /* 메뉴 활성화 시 블록 요소로 변경 (flex로 인한 잘림 현상 방지) */
    .mobile-full-menu.active {
        display: block; 
        opacity: 1;
        visibility: visible;
        z-index: 9999;
    }

    /* 내부 컨텐츠 상하 여백 확보 (위아래로 스크롤 시 답답하지 않게) */
    .mo-menu-inner {
        padding: 80px 30px 60px !important;
        margin: 0 auto;
    }

    /* --- 1차 메뉴 (대메뉴) 폰트/간격 축소 --- */
    .mo-gnb { list-style: none; padding: 0; margin-bottom: 30px; }
    .mo-depth1 { margin-bottom: 25px !important; }

    .mo-depth1 > a {
        font-family: 'Aritaburi', sans-serif;
        font-size: 22px !important; /* 기존 32px/24px -> 22px로 축소 */
        font-weight: 800 !important;
        color: #1a2432 !important;
        display: block;
        border-bottom: 2px solid #1a2432;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        text-decoration: none;
    }

    /* --- 2차 메뉴 (서브메뉴) 폰트/간격 축소 --- */
    .mo-sub-menu { list-style: none; padding: 0 0 0 10px; }
    .mo-sub-menu li { margin-bottom: 12px !important; }
    
    .mo-sub-menu li a {
        font-size: 15px !important; /* 16px -> 15px로 축소 */
        font-weight: 500;
        color: #666;
        text-decoration: none;
    }

    /* 모바일 하단 예약/문의 버튼 살짝 축소 */
    .btn-inquire-mo {
        display: inline-block;
        background: #1a2432; color: #fff;
        padding: 12px 30px; 
        font-size: 14px;
        font-weight: 700; text-decoration: none;
    }
}

    /* 메뉴 리스트 스타일 */
    .mo-gnb { list-style: none; padding: 0; margin-bottom: 50px; }
    .mo-gnb li { margin-bottom: 25px; }
    .mo-gnb li a {
        font-family: 'Aritaburi', sans-serif;
        font-size: 32px; font-weight: 800;
        color: #1a2432; text-decoration: none;
    }

    /* 닫기 버튼 (보조) */
    .mo-close-btn {
        position: absolute; top: 25px; right: 20px;
        background: none; border: none;
        font-size: 30px; color: #1a2432;
        cursor: pointer;
        display: none; /* 햄버거 버튼이 X로 변하므로 숨김 */
    }

    /* 모바일 문의 버튼 */
    .btn-inquire-mo {
        display: inline-block;
        background: #1a2432; color: #fff;
        padding: 15px 40px;
        font-weight: 700; text-decoration: none;
    }
}


/* --- CONTACT 섹션 (1400px 레이아웃) --- */

.contact-new-style {
    width: 100%;
    border-bottom: 1px solid #3c281b;
    padding: 0; /* 내부 inner가 패딩 담당 */
}

/* 1400px 컨테이너 설정 (양쪽 라인) */
.contact-new-style .inner-1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    box-sizing: border-box;
}

/* 그리드 래퍼 (좌/우 분할) */
.contact-grid-wrap {
    display: flex;
    width: 100%;
}

/* 1. 좌측: 타이틀 영역 (35%) */
.contact-left-area {
    width: 35%;
    padding: 80px 40px 80px 0; /* 우측 라인과의 간격 */
    border-right: 1px solid #3c281b;
    display: flex;
    flex-direction: column;
}

.contact-left-area .sub-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e66e2c; /* 오렌지 포인트 */
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.contact-big-title {
    font-size: 70px;
    font-weight: 900;
    color: #1a2432;
    line-height: 0.9;
    letter-spacing: -2px;
    margin: 0 0 40px 0;
}

.contact-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    font-weight: 500;
}

/* 2. 우측: 폼 영역 (65%) */
.contact-right-area {
    width: 65%;
    padding: 80px 0 80px 60px; /* 좌측 여백 */
}

/* 폼 내부 레이아웃 */
.contact-row {
    display: flex;
    gap: 40px; /* 항목 간 간격 */
    margin-bottom: 40px;
}

.contact-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a2432;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* 입력 필드 스타일 (밑줄 형태) */
.contact-input-line {
    width: 100%;
    border: none;
    border-bottom: 1px solid #1a2432;
    background: transparent;
    padding: 10px 0;
    font-size: 16px;
    color: #1a2432;
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s;
}

.contact-input-line:focus {
    border-bottom-color: #e66e2c; /* 포커스 시 오렌지색 */
}

/* 텍스트 영역 */
textarea.contact-input-line {
    resize: none;
    min-height: 40px;
    overflow-y: hidden;
}

/* 파일 첨부 버튼 */
.contact-file-box {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.file-label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1a2432;
    border-bottom: 1px dashed #1a2432;
    padding-bottom: 2px;
}
.file-label:hover { color: #e66e2c; border-color: #e66e2c; }

#file_name_display { font-size: 13px; color: #666; }

/* 전송 버튼 */
.btn-send-it {
    margin-top: 20px;
    background: transparent;
    border: none;
    font-size: 32px;
    font-weight: 900;
    color: #1a2432;
    cursor: pointer;
    transition: color 0.3s;
    padding: 0;
}

.btn-send-it:hover {
    color: #e66e2c;
}


/* 모바일 반응형 */
@media (max-width: 991px) {
	.contact-new-style .inner-1400 {
    border-left: 0px solid #3c281b;
    border-right: 0px solid #3c281b;
		border-bottom: 0px solid #3c281b;
}
    .contact-grid-wrap { flex-direction: column; }
    
    .contact-left-area {
        width: 100%;
        border-right: none;
        padding: 60px 0;
    }
    
    .contact-right-area {
        width: 100%;
        padding: 60px 0;
    }
    
    .contact-big-title { font-size: 50px; }
    
    .contact-row {
        flex-direction: column;
        gap: 30px;
    }
}


/* --- LOCATION (오시는 길) 섹션 스타일 --- */

.location-section {
    width: 100%;
}

.location-section .inner-1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 10px 20px;
    position: relative;
    /* 좌우 라인 (1400px 기준) */
    box-sizing: border-box;
}

/* 상단 타이틀 */
.loc-header {
    margin-bottom: 30px;
    padding-bottom: 40px;
	text-align: center;
}

.loc-header .sub-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e66e2c; /* 오렌지 포인트 */
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.loc-header .main-label {
    font-size: 60px;
    font-weight: 900;
    color: #1a2432;
    line-height: 1;
    margin: 0;
}

/* 그리드 레이아웃 (지도 vs 정보) */
.loc-grid-wrap {
    display: flex;
    align-items: stretch;
	margin-bottom:80px;
}

/* 지도 영역 (65%) */
.loc-map-area {
    width: 65%;
    min-height: 500px;
    border-right: 1px solid #3c281b;
    background: #e0e0e0; /* 지도 로딩 전 배경 */
}

.loc-map-area iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(100%) contrast(1.1); /* 지도를 흑백톤으로 세련되게 */
    transition: filter 0.3s;
}

.loc-map-area:hover iframe {
    filter: grayscale(0%); /* 마우스 올리면 컬러 */
}

/* 정보 영역 (35%) */
.loc-info-area {
    width: 35%;
    padding: 50px 40px;
    background: #fff; /* 정보 영역만 흰색 강조 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.info-item h3 {
    font-size: 18px;
    font-weight: 900;
    color: #1a2432;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* 제목 밑줄 장식 */
.info-item h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #e66e2c;
    margin-top: 5px;
}

.info-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    font-weight: 500;
    margin: 0;
}

.addr-text {
    word-break: keep-all;
}

/* 모바일 반응형 */
@media (max-width: 991px) {
	
	.location-section .inner-1400 {
    /* 좌우 라인 (1400px 기준) */
    border-left: 0px solid #3c281b;
    border-right: 0px solid #3c281b;
}
	
    .loc-grid-wrap {
        flex-direction: column;
    }
    
    .loc-map-area {
        width: 100%;
        height: 300px; /* 모바일 지도 높이 */
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #3c281b;
    }
    
    .loc-info-area {
        width: 100%;
        padding: 40px 20px;
    }

    .loc-header .main-label {
        font-size: 40px;
    }
}

/* 포트폴리오 그리드 스크롤바 방지 */
.work-grid-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;          /* 넘치는 경우 숨김 */
}

/* html, body 스크롤바 이중 방지 */
html, body {
    overflow-x: hidden !important;
}

/* ==========================================================================
   헤더 메가 드롭다운 메뉴 (전체가 동시에 나타나는 형태)
   ========================================================================== */

/* 1. 헤더 마우스 오버 시 전체 배경 솔리드 화이트 변경 */
#hd {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
#hd:hover {
    background-color: #ffffff !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 2. 드롭다운 전체 배경판 (가상 요소 활용) */
#hd::before {
    content: '';
    position: absolute;
    top: 80px; /* 헤더 뼈대(80px) 바로 아래부터 시작 */
    left: 0;
    width: 100%;
    height: 0;
    background: #ffffff;
    transition: height 0.4s ease;
    z-index: -1;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    border-top: 1px solid transparent;
}
/* 헤더에 마우스를 올리면 하얀 배경판이 230px만큼 스르륵 내려옴 */
#hd:hover::before {
    height: 230px; 
    border-top: 1px solid #eaeaea; /* 헤더와 서브메뉴 사이의 옅은 구분선 */
}

/* 3. PC 대메뉴 기본 스타일 */
.makers-gnb { 
    display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; 
    font-weight: 500; font-size: 16px; 
}

.makers-gnb > .gnb-depth1 {
    position: relative;
    height: 80px; 
    display: flex;
    align-items: center;
}

.makers-gnb > .gnb-depth1 > a { 
    color: #3c281b; 
    text-decoration: none; 
    display: block; 
    padding: 0 10px;
    font-weight: 600;
}

/* 1. 메인 페이지 기본 상태: depth1 글자색 흰색 */
body.main_page .makers-gnb > .gnb-depth1 > a {
    color: #ffffff;
    transition: color 0.3s ease;
}

/* 2. 메인 페이지 헤더 호버 시: 배경이 흰색으로 변하므로 글자색을 어둡게 변경 */
/* 이 부분이 추가되어야 메뉴를 선택(호버)했을 때 글씨가 보입니다. */
body.main_page #hd:hover .makers-gnb > .gnb-depth1 > a {
    color: #3c281b !important;
}

/* 3. 호버된 특정 메뉴에만 포인트 컬러를 주고 싶을 때 */
body.main_page .makers-gnb > .gnb-depth1:hover > a {
    color: #e66e2c !important; /* 오렌지/브라운 포인트 컬러 */
}

/* 4. 메인 페이지 로고 처리 (선택사항) */
/* 메인에서 로고가 흰색이어야 한다면 아래 코드를 사용하세요 */
body.main_page #hd .logo-link img {
    filter: brightness(0) invert(1); /* 이미지를 흰색으로 */
}
/* 헤더 호버 시 로고를 다시 원래색(어두운색)으로 */
body.main_page #hd:hover .logo-link img {
    filter: none;
}

/* 4. 서브메뉴 (평소엔 투명하게 숨김) */
.makers-gnb .sub-menu {
    position: absolute;
    top: 80px; 
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    text-align: center;
    padding-top: 20px;
    list-style: none;
    
    /* 숨김 처리 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease 0.1s; /* 배경판이 내려온 후 살짝 늦게 텍스트 등장 */
}

/* 로고 이미지 반전 (선택 사항)
   메인 페이지 로고가 검정색이라 안 보인다면 아래 속성을 활용하세요 */
body.main_page #hd .logo-link img {
    filter: brightness(0) invert(1); /* 이미지를 흰색으로 반전 */
}
#hd:hover .logo-link img {
    filter: none; /* 마우스 올리면 다시 원래색(검정)으로 */
}

/* 5. [핵심] 헤더 전체 영역에 마우스를 올리면 '모든' 서브메뉴가 일제히 등장 */
#hd:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.sub-menu li a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    color: #666;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.sub-menu li a:hover {
    color: #e66e2c;
    font-weight: 700;
}




/* ==========================================================================
   모바일 메뉴 구조 스타일링 (이전과 동일)
   ========================================================================== */
@media (max-width: 1024px) {
	#hd:hover::before {
    display: none;
}


body.main_page .mobile-menu-btn span {
        background-color: #ffffff;
    }
    /* 메뉴가 열렸거나 헤더에 호버했을 때는 검정색 */
    .mobile-menu-btn.open span,
    #hd:hover .mobile-menu-btn span {
        background-color: #3c281b;
    }

    .mo-gnb { list-style: none; padding: 0; margin: 40px 0; }
    .mo-depth1 { margin-bottom: 30px; }
    .mo-depth1 > a { 
        font-family: 'Aritaburi', sans-serif;
        font-size: 24px !important; 
        font-weight: 800 !important; 
        color: #1a2432 !important; 
        display: block; 
        border-bottom: 2px solid #1a2432; 
        padding-bottom: 10px; 
        margin-bottom: 15px;
        text-decoration: none;
    }
    .mo-sub-menu { list-style: none; padding: 0 0 0 10px; }
    .mo-sub-menu li { margin-bottom: 15px; }
    .mo-sub-menu li a { font-size: 16px; font-weight: 500; color: #666; text-decoration: none; }
}



/* --- 예약하기 버튼 기본 디자인 (서브 페이지용) --- */
.btn-inquire {
    display: inline-block;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #3c281b; /* 기본 텍스트색 */
    border: 1px solid #3c281b; /* 테두리 */
    border-radius: 0; /* 각진 디자인으로 세련미 강조 */
    text-decoration: none;
    transition: all 0.4s ease;
    background-color: transparent;
}

/* 마우스 호버 시 디자인 */
.btn-inquire:hover {
    background-color: #3c281b;
    color: #ffffff !important;
}

/* --- 메인 페이지용 스타일 (body.main_page 기준) --- */
/* 배경이 어두운 메인 비주얼 위에서는 흰색으로 노출 */
body.main_page .btn-inquire {
    color: #ffffff;
    border-color: #ffffff;
}

/* 메인 페이지에서 헤더에 마우스를 올려 흰색 배경판이 내려왔을 때 */
body.main_page #hd:hover .btn-inquire {
    color: #3c281b;
    border-color: #3c281b;
}

/* 메인 페이지 헤더 호버 상태에서 버튼에 직접 마우스를 올릴 때 */
body.main_page #hd:hover .btn-inquire:hover {
    background-color: #3c281b;
    color: #ffffff !important;
}

/* 우측 배치 조정 */
.hd_right {
    display: flex;
    align-items: center;
    margin-left: 20px;
}


/* ==========================================================================
   서브페이지 전용 상단 비주얼 (Hero Banner)
   ========================================================================== */
#sub-page-hero {
    position: relative;
    width: 100%;
    height: 400px; /* 비주얼 영역의 세로 높이 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 배경 이미지 경로를 실제 업로드한 이미지로 변경해 주세요 */
    background: url('/img/sub_top_bg.jpg') center/cover no-repeat; 
    margin-top: 0;
}

/* 어두운 오버레이 (배경을 눌러주어 흰색 글씨 가독성 확보) */
#sub-page-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(19, 56, 79, 0.4); /* 네이비 톤 반투명 오버레이 */
    z-index: 1;
}

/* 타이틀 텍스트 설정 */
#sub-page-hero .sub-hero-title {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 80px; /* 헤더 높이(80px)만큼 아래로 내려서 정중앙에 오도록 조절 */
}

#sub-page-hero .sub-hero-title h2 {
    font-family: 'Aritaburi', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    #sub-page-hero { height: 250px; }
    #sub-page-hero .sub-hero-title h2 { font-size: 32px; padding-top: 50px; }
}



/* --- SUB PAGE ABOUT (흰색 배경 버전) --- */
#sub-page-about {
    position: relative;
    width: 100%;
    height: 300px; /* PC 기준 높이 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* 흰색 배경 */
    margin-top: 50px;
    border-bottom: 1px solid #f0f0f0; /* 본문과 구분되는 아주 연한 선 */
}

/* 타이틀 스타일 */
#sub-page-about .sub-about-title h2 {
    font-size: 40px;
    color: #3c281b; /* 울릉담다 기본 브라운 컬러 */
    font-weight: 700;
    letter-spacing: -0.02em;
    position: relative;
    padding-bottom: 15px;
}

/* 타이틀 아래 포인트 라인 (선택사항) */
#sub-page-about .sub-about-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #a87c5b;
}

/* --- 반응형 설정 --- */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    #sub-page-about {
        height: 250px;
    }
    #sub-page-about .sub-about-title h2 {
        font-size: 32px;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    #sub-page-about {
        height: 180px; /* 모바일에서는 높이를 컴팩트하게 조절 */
    }
    #sub-page-about .sub-about-title h2 {
        font-size: 26px; /* 모바일 폰트 크기 축소 */
    }
    #sub-page-about .sub-about-title h2::after {
        width: 20px;
        height: 1px;
    }
}


/* ==========================================================================
   ABOUT 페이지 정적 객실 리스트 (Static Room List)
   ========================================================================== */
.static-room-section {
    width: 100%;
    padding: 80px 0; /* 위아래 여백 */
    background: transparent;
}

.static-room-section .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0px;
    box-sizing: border-box;
}

.static-room-item {
    display: flex;
    align-items: stretch;
    margin-bottom: 70px; /* 항목 사이의 간격 */
    gap: 60px; /* 왼쪽 이미지와 오른쪽 텍스트 사이의 간격 */
}

/* 마지막 항목은 아래 간격 제거 */
.static-room-item:last-child {
    margin-bottom: 0;
}

/* --- 왼쪽 이미지 영역 --- */
.static-room-item .room-img {
    flex: 0 0 55%; /* 왼쪽 영역이 55% 차지 */
    overflow: hidden;
    position: relative;
    background: #444; /* 이미지 없을 때 보이는 임시 배경색 */
}

/* 이미지 비율을 일정하게 (16:9 비율 유지) */
.static-room-item .room-img::before {
    content: "";
    display: block;
    padding-top: 56.25%; 
}

.static-room-item .room-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 마우스 오버 시 이미지 살짝 확대 */
.static-room-item:hover .room-img img {
    transform: scale(1.05);
}

/* --- 오른쪽 텍스트 영역 --- */
.static-room-item .room-text {
    flex: 1; /* 나머지 공간 꽉 채움 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 위아래로 텍스트와 버튼을 벌려줌 */
    padding: 30px 0; /* 텍스트 박스 위아래 여백 */
}

.static-room-item .text-top .room-title {
    font-size: 26px;
    font-weight: 700;
    color: #a87c5b; /* 시안의 브라운 컬러 */
    margin: 0 0 15px 0;
}

.static-room-item .text-top .room-desc {
    font-size: 16px;
    color: #a87c5b;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85; /* 설명은 살짝 연하게 */
    word-break: keep-all;
}

.static-room-item .text-bottom {
    text-align: left; 
}

.static-room-item .btn-more {
    display: inline-block;
    font-size: 16px;
    color: #a87c5b;
    font-weight: 600;
    text-decoration: none;
    transition: font-weight 0.2s;
}

/* 버튼 마우스 오버 시 글씨 굵어짐 */
.static-room-item .btn-more:hover {
    font-weight: 800;
}

/* =========================================
   모바일 반응형 처리
   ========================================= */
@media (max-width: 991px) {
    .static-room-section { padding: 50px 0; }
    .static-room-section .inner-1400 { padding: 0 20px; }
    
    .static-room-item {
        flex-direction: column; /* 모바일은 세로 배치 */
        gap: 20px;
        margin-bottom: 50px;
    }
    
    .static-room-item .room-img { flex: auto; width: 100%; }
    .static-room-item .room-text { padding: 10px 0; }
    .static-room-item .text-top .room-title { font-size: 22px; }
}



/* --- ABOUT OUR OVERVIEW (1400px 중앙 정렬) --- */
.about_our_overview {
    padding: 80px 0; /* 상하 여백 */
    background-color: #fff;
    overflow: hidden;
	border:1px solid red;
}


/*
.about_our_overview .inner-1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 10px 20px;
    position: relative;
    box-sizing: border-box;
}*/


/* 내부 플렉스 박스 설정 */
.about_our_flex_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* 이미지와 텍스트 사이 간격 */
	margin-bottom:80px;
}

/* 이미지 영역 */
.about_our_image_area {
    flex: 1.1; /* 이미지 비중을 약간 더 크게 */
}
.about_our_image_area .img_wrap {
    width: 100%;
    overflow: hidden;
}
.about_our_image_area .img_wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.about_our_image_area:hover .img_wrap img {
    transform: scale(1.03);
}

/* 텍스트 영역 */
.about_our_text_area {
    flex: 0.9;
}
.about_our_label {
    display: block;
    font-size: 14px;
    color: #a87c5b; /* 브라운 포인트 컬러 */
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.about_our_title {
    font-size: 44px;
    color: #3c281b;
    line-height: 1.3;
    margin-bottom: 35px;
    font-weight: 700;
    word-break: keep-all;
}
.about_our_desc {
    font-size: 17px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    word-break: keep-all;
}
.about_our_line {
    width: 50px;
    height: 1px;
    background-color: #a87c5b;
}

/* --- 반응형 설정 --- */

/* 태블릿 및 작은 모니터 (1400px 이하) */
@media (max-width: 1440px) {
    .about_our_overview { padding: 100px 20px; } /* 양옆 최소 여백 확보 */
    .about_our_title { font-size: 38px; }
}

/* 모바일 전환 (991px 이하) */
@media (max-width: 991px) {
    .about_our_flex_box {
        flex-direction: column; /* 세로 정렬 */
        gap: 40px;
    }
    .about_our_image_area, .about_our_text_area {
        width: 100%;
        text-align: center; /* 텍스트 중앙 정렬 */
    }
    .about_our_title { font-size: 30px; margin-bottom: 20px; }
    .about_our_desc { font-size: 15px; }
    .about_our_line { margin: 0 auto; } /* 라인 중앙 정렬 */
    .pc_br { display: none; } /* 모바일에서 수동 줄바꿈 해제 */
}

/* 주변광광지 전용 섹션 */
.attr-intro {
    text-align: center;
    padding: 100px 0 60px;

}
.attr-intro .sub-label {
    display: block;
    font-size: 14px;
    letter-spacing: 3px;
    color: #a87c5b;
    margin-bottom: 15px;
}
.attr-intro .title {
    font-size: 42px;
    line-height: 1.3;
    color: #3c281b;
    margin-bottom: 20px;
}
.attr-intro .desc {
    font-size: 17px;
    color: #888;
}

/* --- 반응형 대응 --- */
@media (max-width: 1024px) {  
    .attr-intro .title { font-size: 32px; }
}
/* --- ATTRACTIONS NEW SECTION --- */

/* 전체 아이템 컨테이너: 1400 내부에서 1200으로 제한하여 여백 확보 */
.attractions_new_item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1100px; /* 양옆 여백을 위해 더 슬림하게 조정 */
    margin: 0 auto 150px;
    padding: 0 20px;
}

/* 짝수번째 순서 변경 */
.attractions_new_item.even {
    flex-direction: row-reverse;
}

/* 이미지 영역 */
.attractions_new_visual {
    flex: 1;
    position: relative;
}

.attractions_new_img_box {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    box-shadow: 20px 20px 0px rgba(168, 124, 91, 0.05); /* 은은한 브라운 쉐도우 */
}

.attractions_new_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.attractions_new_item:hover .attractions_new_img_box img {
    transform: scale(1.1);
}

/* 이미지 위 숫자 디자인 */
.attractions_new_num {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 80px;
    font-weight: 100;
    color: #eee;
    font-family: 'S-CoreDream-1Thin', sans-serif;
    z-index: -1;
}

/* 텍스트 콘텐츠 영역 */
.attractions_new_content {
    flex: 0.9;
}

.attractions_new_category {
    font-size: 13px;
    letter-spacing: 3px;
    color: #a87c5b;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.attractions_new_title {
    font-size: 38px;
    color: #3c281b;
    margin-bottom: 25px;
    font-weight: 700;
}

.attractions_new_desc {
    font-size: 16px;
    line-height: 1.8;
    color: #777;
    margin-bottom: 35px;
    word-break: keep-all;
}

/* 링크 버튼 디자인 */
.attractions_new_link {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #3c281b;
    text-decoration: none;
    border-bottom: 2px solid #3c281b;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.attractions_new_link:hover {
    color: #a87c5b;
    border-color: #a87c5b;
    letter-spacing: 1px;
}

/* --- 반응형 대응 --- */

@media (max-width: 1100px) {
    .attractions_new_item {
        gap: 40px;
    }
    .attractions_new_title { font-size: 30px; }
}

@media (max-width: 991px) {
    .attractions_new_item, .attractions_new_item.even {
        flex-direction: column;
        margin-bottom: 100px;
        text-align: center;
    }
    .attractions_new_img_box {
        height: 350px;
    }
    .attractions_new_num {
        display: none; /* 모바일에서는 복잡해 보이므로 숨김 */
    }
}

/* --- ATTRACTIONS MODAL STYLE --- */
.attractions_new_modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: none; /* 기본 숨김 */
}

.attractions_new_modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.attractions_new_modal_overlay {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

/* 모달 컨텐츠 박스 수정 */
.attractions_new_modal_content {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 800px;
    
    /* [중요] 모달의 최대 높이를 화면의 80~90%로 제한 */
    max-height: 90vh; 
    
    /* [중요] 내용이 넘치면 세로 스크롤 생성 */
    overflow-y: auto; 
    
    margin: 5vh auto; /* 화면 중앙 정렬 보정 */
    padding: 30px;
    border-radius: 10px;
    box-sizing: border-box;
}

@keyframes modalUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.attractions_new_modal_close {
    position: absolute;
    top: 15px; right: 20px;
    background: none; border: none;
    font-size: 35px; color: #3c281b;
    cursor: pointer; z-index: 10;
}

/* 스크롤바 디자인 (선택 사항 - 크롬/사파리 전용) */
.attractions_new_modal_content::-webkit-scrollbar {
    width: 8px;
}
.attractions_new_modal_content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* 모달 본문 레이아웃 보정 (이미지와 텍스트가 잘 보이도록) */
.modal_body {
    display: flex;
    flex-direction: column; /* 모바일/긴 내용 대응을 위해 세로 배치 권장 */
    gap: 20px;
}

.modal_img img { width: 100%; height: 400px; object-fit: cover; }

.modal_txt { padding: 40px; text-align: left; }
.modal_txt h3 { font-size: 24px; color: #3c281b; margin-bottom: 20px; }
.modal_txt p { font-size: 16px; color: #666; line-height: 1.8; }

@media (max-width: 768px) {
    .modal_img img { height: 250px; }
    .modal_txt { padding: 25px; }
}


/* --- INFO ROOM SECTION --- */
.info_room_section {
    padding: 120px 0;
    background-color: #fdfdfd;
}

.info_room_header {
    text-align: center;
    margin-bottom: 80px;
}

.info_room_sub {
    font-size: 14px;
    letter-spacing: 3px;
    color: #a87c5b;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.info_room_main_title {
    font-size: 40px;
    color: #3c281b;
    font-weight: 700;
}

/* 아이템 기본 레이아웃 */
.info_room_item {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
}

.info_room_item.even {
    flex-direction: row-reverse;
}

/* 이미지 영역 */
.info_room_visual {
    flex: 1.3;
    z-index: 1;
}

.info_room_img_box {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.info_room_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.info_room_item:hover .info_room_img_box img {
    transform: scale(1.05);
}

/* 텍스트 영역: 이미지 위에 살짝 걸치도록 설정 */
.info_room_content {
    flex: 1;
    background: #fff;
    padding: 60px;
    margin-left: -80px; /* 이미지와 겹침 효과 */
    z-index: 2;
    box-shadow: 30px 30px 60px rgba(0,0,0,0.05);
}

.info_room_item.even .info_room_content {
    margin-left: 0;
    margin-right: -80px; /* 반대방향 겹침 */
}

.info_room_name {
    font-size: 32px;
    color: #3c281b;
    margin-bottom: 15px;
    font-weight: 700;
}

.info_room_meta {
    margin-bottom: 25px;
    font-size: 15px;
    color: #a87c5b;
    font-weight: 500;
}

.info_room_meta .bar {
    margin: 0 10px;
    opacity: 0.3;
}

.info_room_desc {
    font-size: 16px;
    line-height: 1.8;
    color: #777;
    margin-bottom: 40px;
    word-break: keep-all;
}

/* 버튼 디자인 */
.info_room_btn_view {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #3c281b;
    color: #3c281b;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.info_room_btn_view:hover {
    background: #3c281b;
    color: #fff;
}

/* --- 반응형 대응 --- */
@media (max-width: 1200px) {
    .info_room_content { padding: 40px; }
    .info_room_img_box { height: 450px; }
}

@media (max-width: 991px) {
    .info_room_item, .info_room_item.even {
        flex-direction: column;
    }
    .info_room_content, .info_room_item.even .info_room_content {
        margin: -40px 20px 0 20px; /* 모바일에서는 위로 띄움 */
        width: calc(100% - 40px);
        padding: 30px;
        text-align: center;
    }
    .info_room_name { font-size: 26px; }
    .info_room_img_box { height: 350px; }
}

/* --- INFO ROOM VIEW PAGE --- */
/* 1. 최상위 래퍼 중앙 정렬 (1400px) */
.info_room_view_wrapper { 
    padding-bottom: 150px; 
    background-color: #fff; 
    max-width: 1400px; /* 고정 너비가 아닌 최대 너비로 설정해야 반응형이 작동함 */
    margin: 0 auto;    /* 중앙 정렬 */
    width: 100%;
}

/* 2. 갤러리 영역 (대표 이미지 + 썸네일) */
.info_room_view_visual { 
    padding: 50px 0 20px 0; 
}

/* 대표 이미지 설정 */
.info_room_main_img_area {
    width: 100%;
    height: 650px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 15px; /* 썸네일과의 간격 */
    background-color: #f5f5f5;
}

.info_room_main_img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease; /* 이미지 바뀔 때 부드럽게 */
}

/* 썸네일 리스트 설정 */
.info_room_thumb_list {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.info_room_thumb_item {
    flex: 0 0 120px; /* 썸네일 너비 고정 */
    height: 80px;
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
    border: 2px solid transparent; /* 기본 테두리 투명 */
    transition: all 0.3s ease;
    opacity: 0.6; /* 비활성 상태 투명도 */
}

.info_room_thumb_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info_room_thumb_item:hover {
    opacity: 1;
}

/* 현재 선택된 썸네일 강조 스타일 */
.info_room_thumb_item.active {
    border-color: #3c281b; /* 강조 테두리 */
    opacity: 1;
}

/* 3. 레이아웃 그리드 및 나머지 스타일 */
.info_room_view_grid {
    display: flex;
    gap: 80px;
    margin-top: 40px;
}

.info_room_view_main { flex: 1.8; }
.info_room_view_side { flex: 1; }

.info_room_view_header { margin-bottom: 50px; }
.info_room_view_header .category { color: #a87c5b; font-size: 14px; letter-spacing: 2px; font-weight: 600; }
.info_room_view_header .room_name { font-size: 44px; color: #3c281b; margin: 10px 0; font-weight: 700; }
.info_room_view_header .room_sub { font-size: 18px; color: #888; }

.info_room_view_text, .info_room_view_amenities { margin-bottom: 60px; }
.info_room_view_text h4, .info_room_view_amenities h4 { 
    font-size: 18px; color: #3c281b; border-bottom: 1px solid #3c281b; 
    padding-bottom: 15px; margin-bottom: 25px; letter-spacing: 1px;
}
.info_room_view_text p { font-size: 16px; line-height: 1.9; color: #666; margin-bottom: 20px; word-break: keep-all; }

.info_room_view_amenities ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.info_room_view_amenities li { font-size: 15px; color: #777; position: relative; padding-left: 15px; }
.info_room_view_amenities li::before { content: '·'; position: absolute; left: 0; font-weight: bold; }

.info_room_side_box {
    position: sticky; top: 120px;
    background: #f9f7f4; padding: 40px;
    border: 1px solid #eee;
}
.side_title { font-size: 16px; color: #3c281b; margin-bottom: 30px; letter-spacing: 1px; font-weight: 700; text-align: center; }
.side_info_list { list-style: none; padding: 0; margin-bottom: 35px; }
.side_info_list li { 
    display: flex; justify-content: space-between; 
    padding: 12px 0; border-bottom: 1px solid #eaeaea; 
    font-size: 15px; 
}
.side_info_list li strong { color: #3c281b; font-weight: 600; }
.side_info_list li span { color: #777; }

.side_price_area { text-align: center; margin-bottom: 30px; }
.price_label { font-size: 12px; color: #a87c5b; display: block; margin-bottom: 5px; }
.price_val { font-size: 24px; color: #3c281b; font-weight: 700; }

.info_room_btn_reserve {
    display: block; width: 100%; padding: 18px 0;
    background: #3c281b; color: #fff; text-align: center;
    text-decoration: none; font-weight: 700; font-size: 15px;
    transition: 0.3s;
}
.info_room_btn_reserve:hover { background: #a87c5b; }

/* --- 반응형 --- */
@media (max-width: 1024px) {
    .info_room_view_wrapper { width: 100%; padding: 40px 20px; }
    .info_room_view_grid { flex-direction: column; gap: 40px; }
    .info_room_main_img_area { height: 400px; }
    .info_room_view_side { width: 100%; }
    .info_room_side_box { position: static; }
    .info_room_thumb_item { flex: 0 0 80px; height: 60px; }
}

/* --- INFO ROOM VIEW TOP HEADER --- */
.info_room_view_top {
    padding: 60px 0 40px;
    background-color: #fff;
    border-bottom: 1px solid #f2f2f2;
}

.info_room_view_top .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.info_room_top_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 아래쪽 정렬로 안정감 부여 */
}

/* 왼쪽 타이틀 영역 */
.info_room_top_left .top_sub_label {
    display: block;
    font-size: 13px;
    letter-spacing: 3px;
    color: #a87c5b;
    font-weight: 600;
    margin-bottom: 10px;
}

.info_room_top_left .top_room_name {
    font-size: 48px;
    color: #3c281b;
    font-weight: 700;
    margin-bottom: 15px;
}

.info_room_top_left .top_room_features {
    font-size: 16px;
    color: #888;
    letter-spacing: 1px;
}

/* 오른쪽 가격 영역 */
.info_room_top_right {
    text-align: right;
}

.top_price_box .price_unit {
    font-size: 12px;
    color: #a87c5b;
    font-weight: 600;
    letter-spacing: 1px;
}

.top_price_box .price_amount {
    font-size: 32px;
    color: #3c281b;
    font-weight: 700;
    margin-top: 5px;
}

.top_price_box .price_amount small {
    font-size: 18px;
    font-weight: 400;
    color: #aaa;
}

.top_status {
    margin-top: 15px;
}

.status_tag {
    display: inline-block;
    padding: 5px 12px;
    background: #f9f7f4;
    color: #a87c5b;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #eee;
}

/* --- 반응형 --- */
@media (max-width: 1024px) {
    .info_room_top_flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .info_room_top_right {
        text-align: left;
        width: 100%;
        padding-top: 25px;
        border-top: 1px solid #f2f2f2;
    }

    .info_room_top_left .top_room_name {
        font-size: 36px;
    }
}


/* --- INFO RESTAURANT SECTION --- */
.info_restaurant_container {
    width: 100%;
    background-color: #fff;
    padding: 100px 0 150px;
}

/* 1400px 내부 제한 및 중앙 정렬 */
.info_restaurant_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;    /* 중앙 정렬의 핵심 */
    padding: 0 20px;   /* 양옆 최소 여백 유지 (모바일/태블릿용) */
    box-sizing: border-box;
}

.info_restaurant_header {
    text-align: center;
    margin-bottom: 70px;
}

.info_restaurant_sub {
    font-size: 14px;
    letter-spacing: 4px;
    color: #a87c5b;
    font-weight: 600;
    display: block;
    margin-bottom: 20px;
}

.info_restaurant_main_title {
    font-size: 44px;
    color: #3c281b;
    font-weight: 700;
    margin-bottom: 25px;
}

.info_restaurant_intro_txt {
    font-size: 18px;
    color: #777;
    line-height: 1.8;
}

/* 갤러리 레이아웃 */
.info_restaurant_gallery {
    display: flex;
    gap: 20px;
    margin-bottom: 100px;
}

.info_restaurant_big_img {
    flex: 2;
    height: 600px;
    overflow: hidden;
}

.info_restaurant_small_imgs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info_restaurant_small_imgs .img_item {
    height: 290px;
    overflow: hidden;
}

.info_restaurant_gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.info_restaurant_gallery img:hover {
    transform: scale(1.05);
}

/* 상세 정보 플렉스 레이아웃 */
.info_restaurant_info_flex {
	margin-top:80px;
    display: flex;
    gap: 100px;
    align-items: flex-start;
    margin-bottom: 80px;
}

.info_restaurant_desc_side {
    flex: 1.2;
}

.info_restaurant_section_title {
    font-size: 28px;
    color: #3c281b;
    margin-bottom: 30px;
    font-weight: 700;
    position: relative;
    padding-bottom: 15px;
}

.info_restaurant_section_title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 2px;
    background-color: #a87c5b;
}

.desc_p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 20px;
    word-break: keep-all;
}

/* 가이드 박스 */
.info_restaurant_guide_side {
    flex: 1;
}

.info_restaurant_guide_box {
    background-color: #f9f7f4;
    padding: 50px;
    border-radius: 5px;
}

.guide_list {
    list-style: none;
    padding: 0;
}

.guide_list li {
    margin-bottom: 30px;
}

.guide_list li:last-child { margin-bottom: 0; }

.guide_list li strong {
    display: block;
    font-size: 15px;
    color: #a87c5b;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.guide_list li span {
    display: block;
    font-size: 16px;
    color: #3c281b;
    line-height: 1.6;
    font-weight: 500;
}

/* 하단 알림 사항 */
.info_restaurant_notice {
    border-top: 1px solid #eee;
    padding-top: 50px;
}

.notice_title {
    font-size: 16px;
    color: #3c281b;
    font-weight: 700;
    margin-bottom: 20px;
}

.info_restaurant_notice ul {
    list-style: none;
    padding: 0;
}

.info_restaurant_notice li {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}

/* --- 반응형 --- */
@media (max-width: 1024px) {
    .info_restaurant_gallery { flex-direction: column; }
    .info_restaurant_big_img, .info_restaurant_small_imgs .img_item { height: 350px; }
    .info_restaurant_info_flex { flex-direction: column; gap: 50px; }
    .info_restaurant_main_title { font-size: 32px; }
    .info_restaurant_guide_box { padding: 30px; }
}


/* --- ITEM BBQ SECTION --- */
.item_bbq_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}

.item_bbq_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 타이틀 */
.item_bbq_header {
    text-align: center;
    margin-bottom: 70px;
}
.item_bbq_sub {
    font-size: 14px;
    letter-spacing: 4px;
    color: #a87c5b;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}
.item_bbq_main_title {
    font-size: 44px;
    color: #3c281b;
    font-weight: 700;
    margin-bottom: 25px;
}
.item_bbq_intro {
    font-size: 18px;
    color: #777;
    line-height: 1.8;
}

/* 갤러리 */
.item_bbq_gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    /* 기존 100px에서 150px로 확대하여 그리드와의 간격을 벌림 */
    
}

.item_bbq_img_wrap {
    position: relative;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
	margin-bottom: 80px; 
}
.item_bbq_img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.item_bbq_img_wrap:hover img { transform: scale(1.05); }

.img_caption {
    position: absolute;
    bottom: 20px; left: 20px;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.3);
    padding: 5px 15px;
}

/* 정보 그리드 */
.item_bbq_info_grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    /* 갤러리와의 구분을 더 명확히 하고 싶을 때 상단 패딩 추가 가능 */
    padding-top: 20px; 

}
.item_bbq_text_side { flex: 1.2; }
.item_bbq_guide_side { flex: 1; }

.item_bbq_section_title {
    font-size: 28px;
    color: #3c281b;
    margin-bottom: 30px;
    font-weight: 700;
}
.item_bbq_p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 20px;
    word-break: keep-all;
}

/* 가격 카드 */
.item_bbq_price_card {
    margin-top: 40px;
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.02);
}
.item_bbq_price_card h4 { font-size: 18px; margin-bottom: 25px; color: #3c281b; border-bottom: 1px solid #3c281b; padding-bottom: 15px; }

.price_row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
}
.price_row.highlight {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dashed #ddd;
    color: #a87c5b;
    font-weight: 700;
    font-size: 18px;
}

/* 가이드 박스 */
.item_bbq_guide_box {
    background-color: #f9f7f4;
    padding: 50px;
    border-radius: 10px;
}
.guide_title { font-size: 20px; margin-bottom: 30px; color: #3c281b; text-align: center; letter-spacing: 2px; }

.item_bbq_list { list-style: none; padding: 0; }
.item_bbq_list li { margin-bottom: 35px; }
.item_bbq_list li strong { display: block; font-size: 15px; color: #a87c5b; margin-bottom: 10px; }
.item_bbq_list li span { display: block; font-size: 15px; color: #3c281b; line-height: 1.7; font-weight: 500; }

/* 반응형 */
@media (max-width: 1024px) {
    .item_bbq_gallery { grid-template-columns: 1fr;margin-bottom: 80px; }
    .item_bbq_img_wrap { height: 350px; }
   .item_bbq_info_grid {
        flex-direction: column;
        gap: 50px;
        padding-top: 0;
    }
    .item_bbq_main_title { font-size: 32px; }
    .item_bbq_guide_box { padding: 30px; }
}

/* --- INFO FACILITY SECTION --- */
.info_facility_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.info_facility_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 */
.info_facility_header { text-align: center; margin-bottom: 100px; }
.info_facility_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.info_facility_main_title { font-size: 44px; color: #3c281b; font-weight: 700; margin-bottom: 25px; }
.info_facility_intro { font-size: 18px; color: #777; line-height: 1.8; }

/* 리스트 아이템 레이아웃 */
.info_facility_list { display: flex; flex-direction: column; gap: 120px; }

.info_facility_item {
    display: flex;
    align-items: center;
    gap: 80px;
}
.info_facility_item.reverse { flex-direction: row-reverse; } /* 이미지/텍스트 반전 */

/* 이미지 영역 */
.info_facility_img_box { flex: 1.2; height: 500px; overflow: hidden; border-radius: 5px; }
.info_facility_img_box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.info_facility_item:hover .info_facility_img_box img { transform: scale(1.05); }

/* 텍스트 영역 */
.info_facility_text_box { flex: 1; }
.facility_num { font-size: 24px; color: #eee; font-weight: 700; font-family: 'Arial'; display: block; margin-bottom: 10px; }
.facility_name { font-size: 32px; color: #3c281b; font-weight: 700; margin-bottom: 25px; }
.facility_desc { font-size: 17px; color: #666; line-height: 1.8; margin-bottom: 35px; word-break: keep-all; }

/* 위치/시간 정보 */
.facility_meta { list-style: none; padding: 0; border-top: 1px solid #eee; padding-top: 30px; }
.facility_meta li { display: flex; margin-bottom: 12px; font-size: 15px; }
.facility_meta li strong { width: 100px; color: #a87c5b; font-weight: 600; }
.facility_meta li span { color: #3c281b; }

/* 반응형 */
@media (max-width: 1024px) {
    .info_facility_item, .info_facility_item.reverse { flex-direction: column; gap: 40px; }
    .info_facility_header .info_facility_main_title { font-size: 32px; }
    .info_facility_img_box { width: 100%; height: 350px; }
    .info_facility_text_box { text-align: center; }
    .facility_meta { display: inline-block; text-align: left; }
}


/* --- RESORT CONTENT ROOM SECTION --- */
.resort_content_room_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.resort_content_room_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 타이틀 */
.resort_content_room_header { text-align: center; margin-bottom: 80px; }
.resort_content_room_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.resort_content_room_main_title { font-size: 44px; color: #3c281b; font-weight: 700; margin-bottom: 25px; }
.resort_content_room_intro { font-size: 18px; color: #777; line-height: 1.8; }

/* 객실 리스트 아이템 */
.resort_content_room_list { display: flex; flex-direction: column; gap: 100px; }
.resort_content_room_item {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding-bottom: 100px;
    border-bottom: 1px solid #f2f2f2;
}
.resort_content_room_item:last-child { border-bottom: none; }

/* 이미지 영역 */
.resort_content_room_visual { flex: 1; position: relative; height: 500px; overflow: hidden; border-radius: 5px; }
.resort_content_room_visual img { width: 100%; height: 100%; object-fit: cover; }
.resort_content_room_price_tag {
    position: absolute; top: 30px; left: 0;
    background: #3c281b; color: #fff;
    padding: 10px 25px; font-weight: 600; letter-spacing: 1px;
}

/* 텍스트 영역 */
.resort_content_room_info { flex: 1; }
.resort_content_room_name { font-size: 36px; color: #3c281b; margin-bottom: 30px; font-weight: 700; }
.resort_content_room_name small { font-size: 18px; color: #a87c5b; margin-left: 10px; font-weight: 400; }

/* 장점 포인트 */
.resort_content_room_point { margin-bottom: 35px; }
.resort_content_room_point h4 { font-size: 14px; color: #a87c5b; margin-bottom: 15px; letter-spacing: 1px; }
.resort_content_room_point ul { list-style: none; padding: 0; }
.resort_content_room_point li { font-size: 16px; color: #555; margin-bottom: 8px; position: relative; padding-left: 15px; }
.resort_content_room_point li::before { content: '•'; position: absolute; left: 0; color: #a87c5b; }
.resort_content_room_point li strong { color: #3c281b; }

.resort_content_room_desc { font-size: 16px; color: #777; line-height: 1.8; margin-bottom: 40px; word-break: keep-all; }

/* 상세 정보 및 주의사항 */
.resort_content_room_details {
    background: #f9f7f4; padding: 30px; border-radius: 5px; margin-bottom: 40px;
}
.detail_col { display: flex; margin-bottom: 10px; font-size: 15px; }
.detail_col strong { width: 100px; color: #3c281b; }
.detail_col span { color: #666; }
.detail_col.caution { flex-direction: column; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.detail_col.caution strong { color: #d9534f; margin-bottom: 10px; } /* 주의사항 강조 */
.detail_col.caution span { font-size: 14px; margin-bottom: 5px; }

/* 버튼 영역 */
.resort_content_room_btns { display: flex; gap: 15px; }
.resort_content_room_btn_more, .resort_content_room_btn_reserve {
    flex: 1; text-align: center; padding: 18px 0; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.resort_content_room_btn_more { border: 1px solid #3c281b; color: #3c281b; }
.resort_content_room_btn_more:hover { background: #3c281b; color: #fff; }
.resort_content_room_btn_reserve { background: #3c281b; color: #fff; }
.resort_content_room_btn_reserve:hover { background: #a87c5b; }

/* 반응형 */
@media (max-width: 1024px) {
    .resort_content_room_item { flex-direction: column; gap: 40px; }
    .resort_content_room_visual { width: 100%; height: 350px; }
    .resort_content_room_name { font-size: 28px; }
}

/* --- RESORT BREAKFAST SECTION --- */
.resort_breakfast_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.resort_breakfast_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 헤더 */
.resort_breakfast_header { text-align: center; margin-bottom: 70px; }
.resort_breakfast_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.resort_breakfast_main_title { font-size: 44px; color: #3c281b; font-weight: 700; margin-bottom: 25px; }
.resort_breakfast_intro { font-size: 18px; color: #777; line-height: 1.8; word-break: keep-all; }

/* 비주얼 섹션 */
.resort_breakfast_visual_section {  position: relative; }
.resort_breakfast_main_img { width: 100%; height: 550px; overflow: hidden; border-radius: 5px; }
.resort_breakfast_main_img img { width: 100%; height: 100%; object-fit: cover; }

/* 이미지 아래 퀵 정보 바 */
.resort_breakfast_quick_info {
    display: flex;
    background: #3c281b;
    padding: 35px 0;
    margin-top: -50px; /* 이미지 위에 살짝 걸치게 */
	margin-bottom: 100px;
    position: relative;
    z-index: 10;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.resort_breakfast_quick_info .info_item {
    flex: 1;
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.resort_breakfast_quick_info .info_item:last-child { border-right: none; }
.resort_breakfast_quick_info .info_item strong { display: block; font-size: 13px; color: #a87c5b; margin-bottom: 8px; letter-spacing: 2px; }
.resort_breakfast_quick_info .info_item span { font-size: 18px; font-weight: 500; }

/* 컨텐츠 그리드 */
.resort_breakfast_content_grid { display: flex; gap: 80px; align-items: flex-start; margin-top:}
.resort_breakfast_menu_side { flex: 1.2; }
.resort_breakfast_price_side { flex: 1; }

.resort_breakfast_section_title h3 { font-size: 28px; color: #3c281b; margin-bottom: 15px; }
.resort_breakfast_section_title .line { width: 50px; height: 2px; background: #a87c5b; margin-bottom: 35px; }

.resort_breakfast_p { font-size: 17px; line-height: 1.9; color: #666; margin-bottom: 30px; word-break: keep-all; }

.resort_breakfast_menu_list { list-style: none; padding: 0; }
.resort_breakfast_menu_list li { margin-bottom: 15px; font-size: 16px; color: #444; }
.resort_breakfast_menu_list li span { display: inline-block; width: 80px; font-weight: 700; color: #a87c5b; font-size: 14px; text-transform: uppercase; }

/* 가격 카드 */
.resort_breakfast_price_card { background: #f9f7f4; padding: 50px; border-radius: 5px; }
.resort_breakfast_price_card h4 { font-size: 20px; color: #3c281b; margin-bottom: 30px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }

.price_info_list { list-style: none; padding: 0; margin-bottom: 30px; }
.price_info_list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #ddd; }
.price_info_list li .label { color: #555; }
.price_info_list li .price { font-weight: 700; color: #3c281b; }

.resort_breakfast_notice_box { margin-top: 25px; }
.resort_breakfast_notice_box p { font-size: 14px; color: #888; margin-bottom: 8px; line-height: 1.5; text-indent: -10px; padding-left: 10px; }

/* 반응형 */
@media (max-width: 1024px) {
    .resort_breakfast_main_img { height: 350px; }
    .resort_breakfast_quick_info { flex-direction: column; gap: 25px; padding: 30px 0; margin-top: 20px; width: 100%; }
    .resort_breakfast_quick_info .info_item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
    .resort_breakfast_quick_info .info_item:last-child { border-bottom: none; }
    .resort_breakfast_content_grid { flex-direction: column; gap: 50px; }
    .resort_breakfast_main_title { font-size: 32px; }
}


/* --- RESORT GROUPBOOK SECTION --- */
.resort_groupbook_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.resort_groupbook_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 헤더 */
.resort_groupbook_header { text-align: center; margin-bottom: 80px; }
.resort_groupbook_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.resort_groupbook_main_title { font-size: 44px; color: #3c281b; font-weight: 700; margin-bottom: 25px; }
.resort_groupbook_intro { font-size: 18px; color: #777; line-height: 1.8; word-break: keep-all; }

/* 혜택 그리드 */
.resort_groupbook_benefit_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 100px;
}
.benefit_item {
    background: #f9f7f4;
    padding: 40px 30px;
    text-align: center;
    border-radius: 5px;
    transition: 0.3s;
}
.benefit_item:hover { transform: translateY(-10px); background: #3c281b; }
.benefit_item .icon { font-size: 20px; color: #a87c5b; font-weight: 800; margin-bottom: 20px; }
.benefit_item h4 { font-size: 20px; color: #3c281b; margin-bottom: 15px; }
.benefit_item p { font-size: 15px; color: #777; line-height: 1.6; }
.benefit_item:hover h4, .benefit_item:hover p { color: #fff; }

/* 컨텐츠 플렉스 */
.resort_groupbook_content_flex { display: flex; gap: 80px; align-items: flex-start; }
.resort_groupbook_info_side { flex: 1.2; }
.resort_groupbook_process_side { flex: 1; }

.info_img_wrap { width: 100%; height: 450px; overflow: hidden; border-radius: 5px; margin-bottom: 30px; }
.info_img_wrap img { width: 100%; height: 100%; object-fit: cover; }
.info_text_wrap h3 { font-size: 32px; color: #3c281b; margin-bottom: 20px; }
.info_text_wrap p { font-size: 17px; color: #666; line-height: 1.8; margin-bottom: 30px; }

.info_spec_list { list-style: none; padding: 0; }
.info_spec_list li { margin-bottom: 12px; font-size: 15px; display: flex; }
.info_spec_list li span { width: 100px; font-weight: 700; color: #a87c5b; }

/* 프로세스 카드 */
.process_card { background: #3c281b; padding: 50px; border-radius: 5px; color: #fff; }
.process_card h4 { font-size: 24px; color: #a87c5b; margin-bottom: 40px; text-align: center; letter-spacing: 1px; }

.step_list { margin-bottom: 40px; }
.step { margin-bottom: 30px; position: relative; padding-left: 30px; }
.step::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.2); }
.step .num { font-size: 12px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 5px; }
.step p { font-size: 16px; color: #ccc; }
.step p strong { color: #fff; font-weight: 500; }

.contact_box { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; }
.contact_box h5 { font-size: 15px; margin-bottom: 15px; color: #a87c5b; }
.contact_box .tel { font-size: 32px; font-weight: 700; margin-bottom: 5px; }
.contact_box .email { font-size: 16px; color: #ccc; margin-bottom: 25px; }

.btn_inquiry {
    display: block; width: 100%; padding: 18px 0; background: #a87c5b; color: #fff;
    text-decoration: none; font-weight: 700; transition: 0.3s;
}
.btn_inquiry:hover { background: #fff; color: #3c281b; }

/* 반응형 */
@media (max-width: 1024px) {
    .resort_groupbook_benefit_grid { grid-template-columns: 1fr; }
    .resort_groupbook_content_flex { flex-direction: column; gap: 50px; }
    .resort_groupbook_main_title { font-size: 32px; }
    .process_card { padding: 30px; }
}

/* --- BOOK FORM SECTION --- */
.book_form_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #f9f7f4; /* 부드러운 배경색 */
}
.book_form_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 */
.book_form_header { text-align: center; margin-bottom: 60px; }
.book_form_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.book_form_main_title { font-size: 44px; color: #3c281b; font-weight: 700; margin-bottom: 20px; }
.book_form_intro { font-size: 17px; color: #777; line-height: 1.7; }

/* 폼 래퍼 */
.book_form_wrapper {
    background: #fff;
    padding: 60px;
    border-radius: 10px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05);
}

.book_form_grid {
    display: flex;
    gap: 80px;
    margin-bottom: 50px;
}
.book_form_section { flex: 1; }
.book_form_sec_title {
    font-size: 20px;
    color: #3c281b;
    font-weight: 700;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 2px solid #a87c5b;
}

/* 필드 스타일 */
.book_form_field { margin-bottom: 25px; }
.book_form_field label { display: block; font-size: 15px; color: #555; margin-bottom: 10px; font-weight: 600; }
.book_form_field label span { color: #d9534f; margin-left: 3px; }

.book_form_field input, 
.book_form_field select, 
.book_form_field textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    color: #333;
    outline: none;
    transition: 0.3s;
}
.book_form_field input:focus, .book_form_field select:focus { border-color: #a87c5b; }

/* 하프 사이즈 필드 */
.book_form_field_flex { display: flex; gap: 20px; }
.book_form_field.half { flex: 1; }

/* 하단 버튼 및 약관 */
.book_form_footer { text-align: center; border-top: 1px solid #eee; padding-top: 40px; }
.book_form_agree { margin-bottom: 30px; }
.book_form_agree label { font-size: 15px; color: #666; cursor: pointer; }
.book_form_agree .btn_policy { color: #a87c5b; text-decoration: underline; margin-left: 10px; }

.book_form_submit_btn {
    background: #3c281b;
    color: #fff;
    padding: 20px 80px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.book_form_submit_btn:hover { background: #a87c5b; }

/* 반응형 */
@media (max-width: 1024px) {
    .book_form_grid { flex-direction: column; gap: 40px; }
    .book_form_wrapper { padding: 30px; }
    .book_form_main_title { font-size: 32px; }
    .book_form_submit_btn { width: 100%; padding: 20px 0; }
}

/* --- NOTICE LIST SECTION --- */
.notice_list_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.notice_list_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 */
.notice_list_header { text-align: center; margin-bottom: 60px; }
.notice_list_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.notice_list_main_title { font-size: 40px; color: #3c281b; font-weight: 700; margin-bottom: 20px; }
.notice_list_intro { font-size: 17px; color: #777; }

/* 제어바 (검색 등) */
.notice_list_control {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #3c281b;
}
.total_count { font-size: 15px; color: #666; }
.total_count span { color: #a87c5b; font-weight: 700; }

.notice_search_form { display: flex; gap: 5px; }
.notice_search_form select, .notice_search_form input {
    height: 40px; border: 1px solid #ddd; padding: 0 10px; font-size: 14px; outline: none;
}
.notice_search_form input { width: 200px; }
.notice_search_form button {
    width: 45px; height: 40px; background: #3c281b; color: #fff; border: none; cursor: pointer;
}

/* 리스트 테이블 */
.notice_list_table {
    width: 100%;
    table-layout: fixed; /* 테이블 크기를 고정하여 내부 너비 조절 용이하게 함 */
    border-collapse: collapse;
}


.notice_list_table th {
    border-bottom: 1px solid #eee;
   background: #fcfaf8;
}



.notice_list_table th, 
.notice_list_table td {
    padding: 15px 10px;
    text-align: center;
    vertical-align: middle;
    /* [핵심] 텍스트가 세로로 떨어지지 않게 함 */
    white-space: nowrap; 
}

/* 제목 행 스타일 */
.td_num { width: 80px; }      /* 번호 영역 */
.td_date { width: 120px; }     /* 날짜 영역 */
.td_hit { width: 80px; }       /* 조회수 영역 */
.td_subject { 
    width: auto;               /* 제목은 남은 공간 모두 사용 */
    text-align: left !important; 
    white-space: normal !important; /* 제목이 너무 길면 제목만 줄바꿈 허용 */
    overflow: hidden;
    text-overflow: ellipsis;    /* 너무 길면 ... 처리 (선택사항) */
}
.td_subject a { color: #333; text-decoration: none; transition: 0.2s; }
.td_subject a:hover { color: #a87c5b; text-decoration: underline; }

/* 뱃지 및 아이콘 */
.notice_badge {
    background: #a87c5b; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 2px;
}
.is_notice { background: #fdfaf7; } /* 강조된 행 배경색 */
.new_icon {
    display: inline-block; width: 16px; height: 16px; line-height: 16px; 
    background: #d9534f; color: #fff; font-size: 10px; font-weight: 700; 
    text-align: center; border-radius: 50%; margin-left: 5px;
}
.icon_file { color: #aaa; margin-left: 5px; font-size: 13px; }

/* 페이징 */
.notice_list_paging {
    display: flex; justify-content: center; gap: 5px; margin-top: 50px;
}
.pg_btn {
    width: 40px; height: 40px; line-height: 38px; border: 1px solid #ddd;
    text-align: center; color: #666; text-decoration: none; font-size: 14px; transition: 0.3s;
}
.pg_active { background: #3c281b; color: #fff; border-color: #3c281b; }
.pg_btn:hover:not(.pg_active) { background: #f9f9f9; border-color: #aaa; }

/* 반응형 */
@media (max-width: 768px) {
    .td_hit, .td_num { display: none; } /* 모바일에서는 번호와 조회수 숨김 */
    .notice_list_control { flex-direction: column; align-items: flex-start; gap: 15px; }
    .notice_search_form { width: 100%; }
    .notice_search_form input { flex: 1; }
    .notice_list_main_title { font-size: 30px; }

	.notice_list_table_wrap {
        overflow-x: auto; /* 화면이 작아지면 가로 스크롤 생성 */
    }
    .notice_list_table {
        min-width: 500px; /* 테이블이 너무 찌그러지지 않도록 최소 너비 유지 */
    }
    .td_num, .td_date {
        font-size: 13px; /* 모바일에서 폰트 크기 살짝 조절 */
    }

}

/* --- NOTICE VIEW SECTION --- */
.notice_view_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.notice_view_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 */
.notice_view_header { text-align: center; margin-bottom: 60px; }
.notice_view_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.notice_view_main_title { font-size: 40px; color: #3c281b; font-weight: 700; }

/* 상세 페이지 레이아웃 */
.notice_view_content_wrap {
    border-top: 2px solid #3c281b;
}

/* 제목 영역 */
.notice_view_subject_box {
    padding: 40px 30px;
    background: #fcfaf8;
    border-bottom: 1px solid #eee;
}
.subject_top { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.view_badge { background: #a87c5b; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 2px; }
.view_subject { font-size: 26px; color: #333; font-weight: 600; }

.subject_info { font-size: 14px; color: #888; display: flex; gap: 25px; }
.subject_info strong { color: #555; margin-right: 5px; font-weight: 500; }

/* 본문 영역 */
.notice_view_main_text {
    padding: 60px 30px;
    line-height: 1.9;
    font-size: 17px;
    color: #555;
    min-height: 400px;
}
.view_img_area { margin-bottom: 40px; text-align: center; }
.view_img_area img { max-width: 100%; border-radius: 5px; }

/* 첨부파일 영역 */
.notice_view_file_box {
    margin: 0 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    gap: 15px;
}
.notice_view_file_box strong { color: #3c281b; }
.notice_view_file_box a { color: #a87c5b; text-decoration: none; }
.notice_view_file_box a:hover { text-decoration: underline; }

/* 내비게이션 (이전글/다음글) */
.notice_view_nav {
    margin-top: 60px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.notice_view_nav a {
    display: inline-block;
    width: calc(100% - 100px); /* 라벨 제외한 나머지 영역 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 제목이 길면 ... 처리 */
    vertical-align: middle;
}

.nav_row {
    display: flex;
    padding: 20px 30px;
    align-items: center;
}
.nav_row.next { border-bottom: 1px solid #f2f2f2; }
.nav_label { width: 100px; font-size: 14px; color: #a87c5b; font-weight: 600; }
.nav_label i { margin-right: 5px; }
.nav_row a { flex: 1; color: #666; font-size: 15px; text-decoration: none; transition: 0.2s; }
.nav_row a:hover { color: #3c281b; font-weight: 500; }

/* 하단 버튼 */
.notice_view_btn_area {
    margin-top: 50px;
    text-align: center;
}
.btn_list {
    display: inline-block;
    padding: 15px 60px;
    background: #3c281b;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 2px;
    transition: 0.3s;
}
.btn_list:hover { background: #a87c5b; }

/* 반응형 */
@media (max-width: 768px) {
    .view_subject { font-size: 20px; }
    .notice_view_main_text { padding: 40px 15px; font-size: 16px; }
    .nav_label { width: 80px; font-size: 13px; }
    .nav_row a { font-size: 14px; }
    .btn_list { width: 100%; box-sizing: border-box; }
}

/* --- RESORT GALLERY SECTION --- */
.resort_gallery_container {
    width: 100%;
    padding: 100px 0 150px;
    background-color: #fff;
}
.resort_gallery_container .inner-1400 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 헤더 */
.resort_gallery_header { text-align: center; margin-bottom: 70px; }
.resort_gallery_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.resort_gallery_main_title { font-size: 40px; color: #3c281b; font-weight: 700; margin-bottom: 20px; }
.resort_gallery_intro { font-size: 17px; color: #777; }

/* 갤러리 그리드 레이아웃 */
.resort_gallery_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 배치 */
    gap: 20px;
}

.resort_gallery_item {
    position: relative;
    height: 350px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px;
}

.resort_gallery_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 호버 효과 */
.gallery_overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(60, 40, 27, 0.6); /* 메인 다크브라운 색상 */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}
.gallery_overlay i { color: #fff; font-size: 30px; }

.resort_gallery_item:hover img { transform: scale(1.1); }
.resort_gallery_item:hover .gallery_overlay { opacity: 1; }

/* --- 모달 스타일 --- */
.resort_gallery_modal {
    display: none; /* 기본 숨김 */
    position: fixed; z-index: 9999;
    padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.9);
}

.modal_content {
    margin: auto; display: block; width: 80%; max-width: 1000px;
    animation: zoom 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} to {transform:scale(1)}
}

.modal_close {
    position: absolute; top: 40px; right: 50px;
    color: #f1f1f1; font-size: 60px; font-weight: bold; cursor: pointer;
}

#modal_caption {
    margin: auto; display: block; width: 80%; max-width: 1000px;
    text-align: center; color: #ccc; padding: 20px 0; font-size: 18px;
}

/* 반응형 */
@media (max-width: 1024px) {
    .resort_gallery_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .resort_gallery_grid { grid-template-columns: 1fr; }
    .resort_gallery_item { height: 280px; }
    .modal_content { width: 95%; }
}


/* --- MAIN ABOUT SECTION --- */
.main_about_section {
    width: 100%;
    padding: 150px 0;
    overflow: hidden;
    background-color: #fff;
}

.main_about_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.main_about_row {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* 왼쪽 이미지 그룹 스타일 */
.main_about_left { flex: 1.2; position: relative; }

.main_about_img_group { position: relative; width: 100%; height: 750px; }

.main_about_img_main {
    width: 85%;
    height: 600px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.main_about_img_main img { width: 100%; height: 100%; object-fit: cover; }

.main_about_img_sub {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 45%;
    height: 350px;
    z-index: 3;
    border: 15px solid #fff;
    box-shadow: 20px 20px 50px rgba(0,0,0,0.1);
}
.main_about_img_sub img { width: 100%; height: 100%; object-fit: cover; }

.main_about_img_bg {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 300px;
    opacity: 0.05;
    z-index: 1;
}

/* 오른쪽 텍스트 및 도어 이미지 스타일 */
.main_about_right { flex: 1; display: flex; flex-direction: column; gap: 60px; }

.main_about_top_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; }
.main_about_title { font-size: 46px; color: #3c281b; line-height: 1.3; margin: 20px 0 30px; font-weight: 300; }
.main_about_title strong { font-weight: 700; color: #3c281b; }
.main_about_desc { font-size: 18px; color: #777; line-height: 1.9; word-break: keep-all; }

.main_about_img_door_wrap { position: relative; width: 100%; display: flex; justify-content: flex-end; }
.main_about_img_door { width: 80%; height: 400px; overflow: hidden; }
.main_about_img_door img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.main_about_img_door:hover img { transform: scale(1.05); }

.main_about_experience_badge {
    position: absolute;
    left: 0;
    bottom: 40px;
    background: #a87c5b;
    color: #fff;
    padding: 20px;
    font-size: 12px;
    letter-spacing: 2px;
    writing-mode: vertical-lr; /* 세로 텍스트로 포인트 */
    transform: rotate(180deg);
}

/* 반응형 */
@media (max-width: 1024px) {
    .main_about_row { flex-direction: column; gap: 60px; }
    .main_about_img_group { height: auto; display: flex; flex-direction: column; }
    .main_about_img_main { width: 100%; height: 400px; }
    .main_about_img_sub { position: relative; width: 80%; height: 300px; margin-top: -100px; margin-left: auto; bottom: 0; }
    .main_about_title { font-size: 32px; }
    .main_about_img_door { width: 100%; }
}

/* --- MAIN ROOM INTRO SECTION --- */
.main_room_intro_section {
    width: 100%;
    padding: 120px 0;
    background-color: #f7f3f0; /* 기존보다 부드러운 배경색 */

}

.main_room_intro_inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 헤더 영역 */
.main_room_intro_header { text-align: center; margin-bottom: 80px; }
.main_room_intro_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 600; display: block; margin-bottom: 15px; }
.main_room_intro_main_title { font-size: 40px; color: #3c281b; font-weight: 700; }

/* 리스트 아이템 스타일 */
.main_room_intro_list { display: flex; flex-direction: column; gap: 60px; }

.main_room_intro_item {
    display: flex;
    align-items: center;
    background: #fff;
    overflow: hidden;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.05);
    border-radius: 10px;
    transition: 0.4s;
}
.main_room_intro_item:hover { transform: translateY(-10px); }

/* 이미지 영역 */
.main_room_intro_img { flex: 1.2; position: relative; height: 450px; overflow: hidden; }
.main_room_intro_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.main_room_intro_item:hover .main_room_intro_img img { transform: scale(1.1); }

.main_room_intro_overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(60, 40, 27, 0.4); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s; font-weight: 600; letter-spacing: 2px;
}
.main_room_intro_img:hover .main_room_intro_overlay { opacity: 1; }

/* 텍스트 영역 */
.main_room_intro_text { flex: 1; padding: 60px; }
.main_room_intro_tag { color: #a87c5b; font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px; }
.main_room_intro_title { font-size: 32px; color: #3c281b; margin-bottom: 25px; font-weight: 700; }
.main_room_intro_desc { font-size: 16px; color: #777; line-height: 1.8; margin-bottom: 35px; word-break: keep-all; }

/* 버튼 스타일 */
.main_room_intro_btn {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #3c281b;
    color: #3c281b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}
.main_room_intro_btn:hover { background: #3c281b; color: #fff; }

/* 역방향 정렬 (이미지 오른쪽) */
.main_room_intro_item.reverse { flex-direction: row-reverse; }

/* 반응형 */
@media (max-width: 1024px) {
    .main_room_intro_item, .main_room_intro_item.reverse { flex-direction: column; }
    .main_room_intro_img { width: 100%; height: 350px; }
    .main_room_intro_text { padding: 40px 30px; text-align: center; }
    .main_room_intro_main_title { font-size: 30px; }
}


/* --- MAIN ROOM BTN (RESERVATION CTA) --- */
.main_room_btn_section {
    width: 100%;
    padding: 80px 0;
    background-color: #fff;

}

.main_room_btn_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 80px;;
}

.main_room_btn_wrapper {
    position: relative;
    width: 100%;
    height: 350px; /* 배너 높이 */
    overflow: hidden;
    border-radius: 15px; /* 모서리 라운딩으로 부드러운 느낌 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 배경 이미지 및 효과 */
.main_room_btn_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s ease;
    z-index: 1;
}

.main_room_btn_wrapper:hover .main_room_btn_bg {
    transform: scale(1.05); /* 마우스 호버 시 배경 확대 */
}

.main_room_btn_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 40, 27, 0.55); /* 리조트 메인 브라운톤 딤처리 */
    z-index: 2;
}

/* 콘텐츠 스타일 */
.main_room_btn_content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main_room_btn_sub {
    font-size: 13px;
    color: #a87c5b;
    font-weight: 700;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 10px;
}

.main_room_btn_title {
    font-size: 36px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

.main_room_btn_desc {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

/* 버튼(링크) 스타일 */
.main_room_btn_link {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 18px 45px;
    border-radius: 50px; /* 알약 형태 */
    text-decoration: none;
    transition: 0.4s ease;
}

.main_room_btn_link .link_text {
    font-size: 15px;
    font-weight: 800;
    color: #3c281b;
    letter-spacing: 1px;
    margin-right: 15px;
}

.main_room_btn_link .link_arrow {
    font-size: 18px;
    color: #a87c5b;
    transition: transform 0.3s ease;
}

/* 호버 인터랙션 */
.main_room_btn_link:hover {
    background: #a87c5b;
}

.main_room_btn_link:hover .link_text {
    color: #fff;
}

.main_room_btn_link:hover .link_arrow {
    color: #fff;
    transform: translateX(8px); /* 화살표 이동 효과 */
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .main_room_btn_content {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        gap: 30px;
    }
    .main_room_btn_wrapper {
        height: 400px;
    }
    .main_room_btn_title {
        font-size: 28px;
    }
}


/* --- MAIN GALLERY SECTION --- */
.main_gallery_section {
    width: 100%;
    padding: 120px 0;
    background-color: #fff;
}

.main_gallery_inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 헤더 */
.main_gallery_header { text-align: center; margin-bottom: 60px; }
.main_gallery_sub { font-size: 14px; letter-spacing: 4px; color: #a87c5b; font-weight: 700; display: block; margin-bottom: 15px; }
.main_gallery_title { font-size: 40px; color: #3c281b; font-weight: 700; margin-bottom: 15px; }
.main_gallery_desc { font-size: 17px; color: #888; }

/* 슬라이더 아이템 */
.main_gallery_item { padding: 0 12px; outline: none; }

.main_gallery_link { display: block; text-decoration: none; }

.main_gallery_img_frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4.5; /* 세로형 쇼츠 비율 */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #eee;
}

.main_gallery_img_frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 호버 오버레이 */
.main_gallery_overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}
.main_gallery_overlay i { color: #fff; font-size: 32px; }

/* 텍스트 박스 */
.main_gallery_txt_box { padding: 20px 5px; text-align: left; }
.main_gallery_subject {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
}

/* 호버 시 효과 */
.main_gallery_link:hover .main_gallery_img_frame img { transform: scale(1.1); }
.main_gallery_link:hover .main_gallery_overlay { opacity: 1; }
.main_gallery_link:hover .main_gallery_subject { color: #a87c5b; }

/* Slick 화살표 커스텀 */
.main_gallery_slider .slick-prev, .main_gallery_slider .slick-next {
    width: 50px; height: 50px; background: #fff; border-radius: 50%; z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.main_gallery_slider .slick-prev { left: -25px; }
.main_gallery_slider .slick-next { right: -25px; }
.main_gallery_slider .slick-prev:before, .main_gallery_slider .slick-next:before {
    color: #3c281b; font-family: 'FontAwesome'; font-size: 20px;
}
.main_gallery_slider .slick-prev:before { content: '\f104'; }
.main_gallery_slider .slick-next:before { content: '\f105'; }

/* 반응형 */
@media (max-width: 768px) {
    .main_gallery_title { font-size: 30px; }
    .main_gallery_img_frame { aspect-ratio: 3 / 4; }
    .main_gallery_subject { font-size: 15px; }
}

/* 모달 전체 배경 */
.book_modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
}
.book_modal.active { display: block; }

/* 배경 오버레이 */
.book_modal_overlay {
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
}

/* 모달 컨텐츠 박스 */
.book_modal_content {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 600px;
    margin: 10vh auto;
    padding: 40px 30px;
    border-radius: 15px;
    box-sizing: border-box;
    
    /* [핵심] 스크롤 설정 */
    max-height: 80vh; 
    overflow-y: auto;
}

/* 닫기 버튼 */
.book_modal_close {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px; border: none; background: none; cursor: pointer;
}

/* 텍스트 영역 */
.book_modal_body h3 { font-size: 22px; margin-bottom: 20px; text-align: center; }
.book_modal_txt_area { 
    font-size: 14px; line-height: 1.8; color: #444; 
    word-break: keep-all; 
}
.book_modal_txt_area p { margin-bottom: 15px; }