/* index.css */
#wrap main {}
#wrap main #hero_bnr {
    height: 830px; min-width: 1220px;
    background-image: url(../images/hero_bnr.png);
    background-size: cover;
    background-position: center;
    padding-top: 483px;
}
#wrap main #hero_bnr .ad_txt {text-align: center; margin-bottom: 53px;}
#wrap main #hero_bnr .ad_txt p {font-size: 1.88rem; font-weight: 500;}
#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 흐림 색상; */
    color: #fff; line-height: 1.5;
    text-shadow: 0 4px 4px rgba(0,0,0,0.25);
    font-family: 'noto sans kr', sans-serif;
}
#wrap main #hero_bnr #reservation_form {
    width:1126px;
    margin: 0 auto;
    padding: 20px 30px;
    border-radius: 20px;
    background-color: rgba(255,255,255,0.7);
    display: flex; /* 객실 ~ 체크인아웃 ~ 인원 ~ 검색 | 자식들 정렬 flex */
    flex-flow: row nowrap; /* 메인축(수평) */
    align-items: flex-end;
    justify-content:space-between;
}
/* ------------------------------------------------------ 객실~인원 공통디자인 */
#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 {
    position: relative; /* room_open 기준 */
}
#wrap main #hero_bnr #reservation_form .room .room_type:hover .room_open {
    display: block;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a,
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open a,
#wrap main #hero_bnr #reservation_form .check_in_out a {
    /* 포사이드방~객실 리스트, 체크인아웃, 인원 박스 디자인 */
    background-color: #fff;
    width:160px; height: 39px;
    display: flex; /* flex 설정 시 형제끼리 크기 맞추는 자동설정때문에 이미지 비율이 망가져 보일 수 있음(메인, 교차축 설정 적용하면 해결됨) */
    flex-flow: row nowrap;
    align-items: center; justify-content: space-between;
    padding:0 16px; border: 1px solid #D9D9D9; border-radius: 4px;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a {}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name,
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open .name,
#wrap main #hero_bnr #reservation_form .check_in_out .date,
#wrap main #hero_bnr #reservation_form .person .number li span {
    /* 공통 글짜 크기 */
    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.63rem; color: #888;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name span {}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name img {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open {
    position: absolute; left:0; top:39px;
    /* 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;
}
#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 a,
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a {}
/* ------------------------------------------------------ 체크인 */
#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 {}
/* ------------------------------------------------------ n박 */
#wrap main #hero_bnr #reservation_form .check_in_out .day {
    display: flex; 
    flex-flow: column wrap;
    margin: 9px 15px;
}
#wrap main #hero_bnr #reservation_form .check_in_out .day img {margin-bottom: 7px;}
#wrap main #hero_bnr #reservation_form .check_in_out .day em {font-size: 0.88rem;}
/* ------------------------------------------------------ 체크아웃 */
#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:15px;
}
#wrap main #hero_bnr #reservation_form .person .number li {
    background-color: #fff;
    width:160px; height: 39px;
    border: 1px solid #D9D9D9; border-radius: 4px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center; justify-content: space-between; }
#wrap main #hero_bnr #reservation_form .person .number li .number_btn {
    display: inline-block;
    padding: 11px 14px;
}
#wrap main #hero_bnr #reservation_form .person .number li .number_btn:hover img {transform: scale(1.3);}
#wrap main #hero_bnr #reservation_form .person .number li .number_btn img {width: 12px; transition:0.3s ease;}
#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 {}
#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 #kids {}
#wrap main #hero_bnr #reservation_form .person .number li #kids_add {}
#wrap main #hero_bnr #reservation_form .person .number li #kids_remove {}
#wrap main #hero_bnr #reservation_form > p {}
#wrap main #hero_bnr #reservation_form > p #search_btn {
    background-color: #FFC445;
    width:150px; height: 50px;
    border-radius: 8px;
    font-size: 0.88rem;
}
#wrap main #hero_bnr #reservation_form > p #search_btn:hover {background-color: #ff9900;}
/* --------------------------------------------------------- 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 {} /* 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-bottom: 80px;
}
#wrap main #intro_tourist .contents li {
    width:calc((100% - (20px * 3)) / 4);
}
#wrap main #intro_tourist .contents li a {margin-bottom: 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 a:hover img {transform: scale(1.5);} */
#wrap main #intro_tourist .contents li h2 {font-size: 1.13rem; font-weight: 500;}
#wrap main #intro_tourist .more {
    font-size: 0.94rem;
    display: block; width:max-content; margin: 0 auto;
    border-bottom: 1px solid #000;
    /* text-decoration: underline; 밑줄과 글자사이 여백 불가능 */
}
/* ----------------------------------------------------- 4. 객실 및 예약안내 */
#wrap main #room_info_bg {
    background-color: #f5f5f5;
}
#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_list {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}
#wrap main #room_info_bg #room_info .room_list li {}
#wrap main #room_info_bg #room_info .room_list li a {
    margin-bottom: 10px;
    display: block;
}
#wrap main #room_info_bg #room_info .room_list li .active {}
#wrap main #room_info_bg #room_info .room_list li a img {}
#wrap main #room_info_bg #room_info .room_list li h2 {
    font-size: 1.13rem; font-weight: 500;
    margin-bottom: 10px;
}
#wrap main #room_info_bg #room_info .room_list li p {
    font-size:0.88rem; color:#555; line-height: 1.7;
}
#wrap main #room_info_bg #room_info .reservation {
    font-size: 0.88rem;
    border-bottom:1px solid #000;
    display: block; margin: 0 auto; width:max-content;
}
#wrap main #guest_location {width:1220px; margin:0 auto; padding:70px 0;}
#wrap main #guest_location .location_title {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between;
}
#wrap main #guest_location .location_title h1 {font-size: 1.5rem; font-weight: 600; margin: 0 0 30px;}
#wrap main #guest_location .location_title p {}
#wrap main #guest_location > p {}
#wrap main #guest_location .map_bus {}
#wrap main #guest_location .map_bus h2 {}
#wrap main #guest_location .map_bus p {margin-bottom: 41px;}
#wrap main #guest_location .map_subway {}
#wrap main #guest_location .map_subway h2 {}
#wrap main #guest_location .map_subway p {}
#wrap main #guest_location .map_bus h2,
#wrap main #guest_location .map_subway h2 {
    color:#555; font-size: 1.5rem; font-weight: 700;
    line-height: 1.8;
}
#wrap main #guest_location .map_bus p,
#wrap main #guest_location .map_subway p {
    color:#555; font-size: 0.94rem; line-height: 1.8;
}
#wrap footer {background-color: #000;}
#wrap footer address {font-size: 0.81rem; color:#fff; line-height: 2.0;}