/* index.css */
#wrap main {}
#wrap main #hero_bnr {
    height:830px; min-width:1220px;
    background-image:url(../images/image.jpg);
    background-size:cover;
    background-position:center;
    padding-top:425px;
}
#wrap main #hero_bnr .ad_txt {text-align:center;}
#wrap main #hero_bnr .ad_txt p {font-size:1.88rem; font-weight:600;}
#wrap main #hero_bnr .ad_txt h1 {font-size:3.13rem; font-weight:700;}
#wrap main #hero_bnr .ad_txt p,
#wrap main #hero_bnr .ad_txt h1 {
    /* text-shadow:x y 흐림 색상; */
    text-shadow:0 4px 4px rgba(0,0,0,0.25);
    color:#fff; line-height:1.5;
    font-family:'noto sans kr', sans-serif;
}
#wrap main #hero_bnr #reservation_form {
    width:1164px;
    margin:0 auto;
    padding:16px 16px;
    border-radius:7px;
    background-color:rgba(255,255,255,0.8);
    display:flex; /* 객실~체크인아웃~인원~검색 자식들 정렬 */
    flex-flow:row nowrap; /* 메인축(수평) */
    justify-content:space-between; /* 메인축(수평) 양쪽끝 */
    align-items:center;
}
/* ------------------------------------------------------------------객실~인원 공통디자인 */
#wrap main #hero_bnr #reservation_form .room h2,
#wrap main #hero_bnr #reservation_form .check_in_out .in h2,
#wrap main #hero_bnr #reservation_form .check_in_out .out h2,
#wrap main #hero_bnr #reservation_form .person h2 {
    margin-bottom:12px;
}
#wrap main #hero_bnr #reservation_form h2+div,
#wrap main #hero_bnr #reservation_form ul li {}
/* ----------------------------------------------------------------------객실선택 */
#wrap main #hero_bnr #reservation_form .room {}
#wrap main #hero_bnr #reservation_form .room h2 {}
/* ----------------------------------------------------------------------객실선택 */
#wrap main #hero_bnr #reservation_form .room .room_type:hover .room_open {display:block;}
#wrap main #hero_bnr #reservation_form .room .room_type {
    position:relative; /* room_oepn 기준 */
}
#wrap main #hero_bnr #reservation_form .room .room_type > a,
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open a {
    /* 포사이드방 */
    width:174px; height:41px;
    display:flex; /* flex설정 시 형제끼리 크기 맞추는 자동설정때문에 이미지 비율이 망가져 보일 수 있음(메인교차축 설정 적용하면 해결됨) */
    align-items:center; justify-content:space-between;
    padding:0 14px; border-radius:6px; border:1px solid#999;
    background:#fff;
    border-radius:12px;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name,
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open .name {
    font-size:0.88rem;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name span,
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open .name span {
    font-size:0.75rem;
    color:#999;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a img {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open {
    position:absolute; left:0; top:41px;
    /* absolute 설정 시 기존태그 크기가 inline-block 처럼 바뀜 */
    display:none; /* 초기 숨기기 */
}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open a {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open a .name {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open a .name span {}
/* --------------------------------------------------------------------------------체크인/아웃날짜 */
#wrap main #hero_bnr #reservation_form .check_in_out {
    display:flex;
    /* 필수! 메인축방향 줄바꿈처리 flex-flow */
    flex-flow:row nowrap; gap:29px;
    
}
/* -----------------------------------------------------------------------------체크인&아웃 공통 */
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in a,
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a {
    width:174px; height:41px;
    display:flex; flex-flow:row nowrap;
    align-items:center; justify-content:space-between;
    padding:0 14px; border-radius:6px; border:1px solid#999;
    background:#fff;
    border-radius:12px;
}
/* --------------------------------------------------------------------------체크인 */
#wrap main #hero_bnr #reservation_form .check_in_out .in {}
#wrap main #hero_bnr #reservation_form .check_in_out .in h2 {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in a {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in a .date {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in a img {}
#wrap main #hero_bnr #reservation_form .check_in_out .day {
    display:flex; flex-flow:column nowrap;
    margin:auto;
}
#wrap main #hero_bnr #reservation_form .check_in_out .day img {}
#wrap main #hero_bnr #reservation_form .check_in_out .day em {margin:7px 0 0;}
#wrap main #hero_bnr #reservation_form .check_in_out .out {}
#wrap main #hero_bnr #reservation_form .check_in_out .out h2 {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a .date {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a img {}
/* -------------------------------------------------------------------------------인원 */
#wrap main #hero_bnr #reservation_form .person {}
#wrap main #hero_bnr #reservation_form .person h2 {}
#wrap main #hero_bnr #reservation_form .person .number {
    display:flex; flex-flow:row nowrap;
    gap:14px;
}
/* --------------------------------------------------------------------------인원 공통 */
#wrap main #hero_bnr #reservation_form .person .number li {
    width:174px; height:41px;
    display:flex; flex-flow:row nowrap;
    align-items:center; justify-content:space-between;
    border-radius:6px; border:1px solid#999;
    background:#fff;
    border-radius:12px;
    padding:0 5px;
}
#wrap main #hero_bnr #reservation_form .person .number li .number_btn {
    width:24px; height:24px;
}
#wrap main #hero_bnr #reservation_form .person .number li .number_btn img {}
#wrap main #hero_bnr #reservation_form .person .number li #adult_add {}
#wrap main #hero_bnr #reservation_form .person .number li #adult_remove {}
#wrap main #hero_bnr #reservation_form .person .number li span label {}
#wrap main #hero_bnr #reservation_form .person .number li span input {
    width:30px; text-align:center;
}
/* ---------------------------------------------------------------------------인원 개별(성인/어린이) */
#wrap main #hero_bnr #reservation_form .person .number li span #adult {}
#wrap main #hero_bnr #reservation_form .person .number li span #kid {}
#wrap main #hero_bnr #reservation_form .person .number li #kid_add {}
#wrap main #hero_bnr #reservation_form .person .number li #kid_remove {}
/* ----------------------------------------------------------------------------검색버튼 */
#wrap main #hero_bnr #reservation_form > p {
    position:relative; top:13px;
}
#wrap main #hero_bnr #reservation_form > p #search_btn {
    background-color:#9771A1; color:#fff;
    width:75px; height:41px;
    border-radius:12px;
    font-size:0.88rem;
}
/* ---------------------------------------------------------------------2. 양림동 호랑가시나무 소개 */
#wrap main #intro_guest_bg {
    background-color:#f5f5f5;
}
#wrap main #intro_guest_bg #intro_guest {}
#wrap main #intro_guest_bg #intro_guest h1 {}
#wrap main #intro_guest_bg #intro_guest p {} /* 공통 */
#wrap main #intro_guest_bg #intro_guest h1+p {}
#wrap main #intro_guest_bg #intro_guest p:last-child {}
#wrap main #intro_guest_bg #intro_guest p:last-child img {width:100%;}
/* ----------------------------------------------------------------------------3. 관광지 소개 */
#wrap main #intro_tourist {}
#wrap main #intro_tourist h1 {}
#wrap main #intro_tourist p {}
#wrap main #intro_tourist .contents {
    display:flex; flex-flow:row nowrap; /* 메인축정렬 */
    justify-content:space-between;
    margin:0 0 50px;/* ul + a 여백 */
}
#wrap main #intro_tourist .contents li {
    width:calc((100% - 60px) / 4);
    /* width:calc((100% - (20px * 3)) / 4); */
}
#wrap main #intro_tourist .contents li a {
    margin:0 0 10px; display:block;
    overflow:hidden; height:250px;
}
#wrap main #intro_tourist .contents li a img {width:100%;}
#wrap main #intro_tourist .contents li a:hover img {width:120%;}
#wrap main #intro_tourist .contents li h2 {
    font-size:1.13rem; font-weight:600;
}
#wrap main #intro_tourist .more {
    font-size:0.94rem;
    margin:0 auto;
    display:block; width:max-content;
    /* text-decoration:underline; 밑줄과 글자사이 여백불가능 */
    border-bottom:1px solid #000;
}
/* -------------------------------------------------------------------------------4. 객실 및 예약안내 */
#wrap main #room_info_bg {background-color:#f5f5f5; width:100%;}
#wrap main #room_info_bg #room_info {}
#wrap main #room_info_bg #room_info h1 {}
#wrap main #room_info_bg #room_info p {}
#wrap main #room_info_bg #room_info .room {
    display:flex; flex-flow:row nowrap;
    justify-content:space-between; align-items:baseline;
    margin:0 0 50px;
    overflow: visible;
}
#wrap main #room_info_bg #room_info .room li {
    transition:transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease;
    transform-origin:center center; /* 가운데서 커지게 */
}
#wrap main #room_info_bg #room_info .room li a {}
#wrap main #room_info_bg #room_info .room li a img {width:100%;}
#wrap main #room_info_bg #room_info .room li h2 {font-size:1.13rem; font-weight:600; margin:12px auto;}
#wrap main #room_info_bg #room_info .room li p {font-size:0.88rem; line-height:1.7; color:#555;}
#wrap main #room_info_bg #room_info .realtime {
    font-size:0.94rem;
    margin:0 auto;
    display:block; width:max-content;
    border-bottom:1px solid #000;
}
#wrap main #room_info_bg #room_info .room li:hover {
transform:scale(1.06);
    z-index:5;
    box-shadow:0 14px 32px rgba(0,0,0,0.18);
    }
/* --------------------------------------------------------------------------------------------5. 게스트 하우스 찾아오는 길 */
#wrap main #directions {}
#wrap main #directions .directions_top {
    display:flex; flex-flow:row nowrap;
    justify-content:space-between;
}
#wrap main #directions .directions_top h1 {}
#wrap main #directions .directions_top p {font-size:1.00rem; color:#000;}
#wrap main #directions p {}
#wrap main #directions p img {width:100%;}
#wrap main #directions .directions_info {}
/* ------------------------------------------------------------------------------------------------공통 */
#wrap main #directions .directions_info .info_block_bus h2,
#wrap main #directions .directions_info .info_block_subway h2 {
    font-size:1.50rem; 
    font-weight:700; 
    color:#555; 
    margin:20px auto;
}
#wrap main #directions .directions_info .info_block_bus .info_list li span,
#wrap main #directions .directions_info .info_block_subway .info_list li span {
    font-size:0.94rem;
    color:#555;
    line-height:1.8;
    display: block;
}

/* -----------------------------------------------------------------------------------------버스 */
#wrap main #directions .directions_info .info_block_bus {margin:30px auto;}
#wrap main #directions .directions_info .info_block_bus h2 {}
#wrap main #directions .directions_info .info_block_bus .info_list {}
#wrap main #directions .directions_info .info_block_bus .info_list li {margin-bottom: 16px;}
#wrap main #directions .directions_info .info_block_bus .info_list li span {}
/* ------------------------------------------------------------------------------------------지하철 */
#wrap main #directions .directions_info .info_block_subway {}
#wrap main #directions .directions_info .info_block_subway h2 {}
#wrap main #directions .directions_info .info_block_subway .info_list {}
#wrap main #directions .directions_info .info_block_subway .info_list li {}
#wrap main #directions .directions_info .info_block_subway .info_list li span {}