/* index.css */
#wrap main {}
#wrap main #hero_bnr {
    height: 830px; min-width: 1220px;
    background-image: url(../images/hero_bnr.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 487px;
}
#wrap main #hero_bnr .ad_txt {text-align: center;}
#wrap main #hero_bnr .ad_txt p,
#wrap main #hero_bnr .ad_txt h1 {
    color: #fff;
    line-height: 1.5;
    /* text-shadow: x y 흐림 색상; */
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'noto sans kr', sans-serif;
}
#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 #reservation_form {
    background-color: rgba(255, 255, 255, 0.8);
    width: 1003px; margin: 40px auto 58px;
    padding: 24px 32px;
    border-radius: 16px;
    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: 8px;
}
#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 {
    /* 포사이드방 */
    display: flex;/* flex설정 시 형제끼리 크기 맞추는 자동설정때문에 이미지 비율이 망가져 보일 수 잇음 (메인, 교차축 설정 적용하면 해결됨) */
    flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
    padding:0 12px;
    background-color: #fff;
    width: 168px; height: 44px;
    border: 1px solid #aaa; 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: #888;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a img {}
#wrap main #hero_bnr #reservation_form .room_type .room_open {
    position:absolute; left: 0; top: 44px;
    /* absolute 설정 시 기존 태그 크기가 inline-block 처럼 바뀜 */
    display: none;/* 초기 숨기기 */

}
#wrap main #hero_bnr #reservation_form .room_type .room_open a {}
#wrap main #hero_bnr #reservation_form .room_type .room_open a .name {}
#wrap main #hero_bnr #reservation_form .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:11px;
}
/* ------------------------------------체크인/이웃 공통 */
#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: 168px; height: 44px;
    border:1px solid #aaa; border-radius: 12px;
    background-color: #fff;
    display: flex; flex-flow: row nowrap;
    align-items: center; justify-content: space-between;
    padding: 12px;
}
#wrap main #hero_bnr #reservation_form .check_in_out .in .chk_in a .date,
#wrap main #hero_bnr #reservation_form .check_in_out .out .chk_out a .date {font-size: 0.88rem;}
/* -------------------------------------------체크인 */
#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;
    justify-content: end;/* 하단 줄에 맞춤으로 내리는 방법 */
    align-items: center;/* flex로 인해 이미지가 커지는 것을 방지하기 위해 메인,교차 축 값 입력 */
    gap:3px; /* 자식 사이(이미지와 텍스트)에 들어가는 여백 */
}
#wrap main #hero_bnr #reservation_form .check_in_out .day img {}
#wrap main #hero_bnr #reservation_form .check_in_out .day em {}
/* --------------------------------------------------체크아웃 */
#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:8px
}
/* --------------------------------인원 공통 */
#wrap main #hero_bnr #reservation_form .person .number li {
    width: 140px; height: 44px;
    background-color: #fff;
    border: 1px solid #aaa; border-radius: 12px;
    display: flex; flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
}
#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:hover {background-color: #ddd;}/* btn hover */
#wrap main #hero_bnr #reservation_form .person .number li .number_btn img {}
#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 {font-size: 0.88rem;}
#wrap main #hero_bnr #reservation_form .person .number li span input {width: 20px; text-align: center;}
#wrap main #hero_bnr #reservation_form .person .number li span input:hover {background-color: #ddd;}/* input hover */
/* -------------------------------------------------인원 개별 (성인/어린이) */
#wrap main #hero_bnr #reservation_form .person .number li #adult_add {}
#wrap main #hero_bnr #reservation_form .person .number li span #adult {}
#wrap main #hero_bnr #reservation_form .person .number li #adult_remove {}
#wrap main #hero_bnr #reservation_form .person .number li #kid_add {}
#wrap main #hero_bnr #reservation_form .person .number li span #kid {}
#wrap main #hero_bnr #reservation_form .person .number li #kid_remove {}
/* -----------------------------------검색버튼 */
#wrap main #hero_bnr #reservation_form > p {
    position: relative; top:12px;/* 위치를 살짝 바꾸는 방법으로 조정 */
}
#wrap main #hero_bnr #reservation_form > p #search_btn {
    background-color: #bbb;
    width: 65px; height: 44px;
    border-radius: 12px; font-size: 0.88rem;
}
#wrap main #hero_bnr #reservation_form > p #search_btn:hover {background-color: #AFE271;}
/* -------------------------- 2. info */
#wrap main #info_bg {
    background-color: #f5f5f5;
}
#wrap main #info_bg #info {}
#wrap main #info_bg #info h1 {}
#wrap main #info_bg #info p {}/* 공통 p */
#wrap main #info_bg #info h1+p {}
#wrap main #info_bg #info .info_img {}
#wrap main #info_bg #info .info_img img {width:100%;}
/* ------------------------------------3. near_place */
#wrap main #near_place {}
#wrap main #near_place h1 {}
#wrap main #near_place p {}
#wrap main #near_place .place {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 80px;
}
#wrap main #near_place .place a {
    width: calc((100% - 60px) / 4);
}
#wrap main #near_place .place a .place_img {
    margin-bottom: 10px;
    overflow: hidden; height: 250px;
}
#wrap main #near_place .place a .place_img img {width: 100%;}
#wrap main #near_place .place a .place_img:hover img {width: 110%;}
#wrap main #near_place .place a h2 {
    font-size: 1.13rem; font-weight: 500;
}
#wrap main #near_place .more {
    display: block;
    border-bottom: 1px solid #000;
    margin: 0 auto; width: max-content;
}
/* ----------------------------------4. room */
#wrap main #room_res_bg {
    background-color: #f5f5f5;
}
#wrap main #room_res_bg #room_res {}
#wrap main #room_res_bg #room_res h1 {}
#wrap main #room_res_bg #room_res p {}
#wrap main #room_res_bg #room_res .room_container {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
}
#wrap main #room_res_bg #room_res .room_container {
    transition: width 1s;
}
#wrap main #room_res_bg #room_res .room_container .active {
    width: 500px;
}
#wrap main #room_res_bg #room_res .room_container .room {
    width: calc(((100% - 500px) - 60px) / 3);
} 
#wrap main #room_res_bg #room_res .room_container .room a {} 
#wrap main #room_res_bg #room_res .room_container .room a .r_img {} 
#wrap main #room_res_bg #room_res .room_container .active a .r_img img,
#wrap main #room_res_bg #room_res .room_container .room a .r_img img {width: 100%;}
#wrap main #room_res_bg #room_res .room_container .active a .r_name,
#wrap main #room_res_bg #room_res .room_container .room a .r_name {
    font-size: 1.13rem; font-weight: 500;
    margin: 10px 0;
}
#wrap main #room_res_bg #room_res .room_container .room .r_info {
    display: none;
}
#wrap main #room_res_bg #room_res .room_container .active .r_info {
    font-size: 0.88rem; color: #555; line-height: 1.7;
    margin-bottom: 0;
}
/* ------------------------------ 개별 */
#wrap main #room_res_bg #room_res .room_container .room1 {}
#wrap main #room_res_bg #room_res .room_container .room2 {}
#wrap main #room_res_bg #room_res .room_container .room3 {}
#wrap main #room_res_bg #room_res .room_container .room4 {}
#wrap main #room_res_bg #room_res .res_btn {
    display: block; margin: 80px auto 0;
    border-bottom:1px solid #000; width: max-content;
}
/* --------------------------------------------5. way */
#wrap main #way {}
#wrap main #way .title {
    display: flex; flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 0 30px;
}
#wrap main #way .title h1 {margin: 0;}
#wrap main #way .title .res_num {}
#wrap main #way .map {display: block; margin-bottom: 30px;}
#wrap main #way .map img {}
#wrap main #way .public_transport {}
#wrap main #way .public_transport dt,
#wrap main #way .public_transport dd {color: #555; line-height: 1.8;}
#wrap main #way .public_transport dt {font-size: 1.5rem; font-weight: 700;} /* 공통 */
#wrap main #way .public_transport dd {font-size: 0.94rem;} /* 공통 */
#wrap main #way .public_transport dd:nth-child(2) {margin-bottom: 20px;}
#wrap main #way .public_transport dd:nth-child(3) {margin-bottom: 20px;}
#wrap main #way .public_transport .subway {}
/* ---------------------------------------- footer */
#wrap footer {background-color: #000;}
#wrap footer #f_txt {}
#wrap footer #f_txt * {
    font-size: 0.81rem; line-height: 2.0;
    color: #fff;
}
#wrap footer #f_txt address {}
#wrap footer #f_txt p {}
#wrap footer #f_txt p a {}