#wrap main {}
#wrap main #hero_bnr {
    height: 830px; min-width: 1220px;
    background-image: url(../images/horang_hero_bnr.jpg);
    background-size: cover;
    background-position: center;
    padding-top: 503px;
}
#wrap main #hero_bnr .add_text {
    text-align: center;
    padding-bottom: 40px;
}
#wrap main #hero_bnr .add_text p {
    font-size: 1.88rem;
    color: #fff;
    font-weight: 500;
}
#wrap main #hero_bnr .add_text h1 {
    color: #fff;
    font-size: 3.13rem;
    font-weight: 700;
}
#wrap main #hero_bnr .add_text p,
#wrap main #hero_bnr .add_text h1 {
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    line-height: 1.5;
    font-family: 'noto sans kr', san-serif;
}
#wrap main #hero_bnr #reservation_form {
    background-color: rgba(255, 255, 255, 0.8);
    width: 925px; 
    margin: 0 auto;
    padding: 20px;
    border-radius: 6px;
    display: flex; /* 객실 체크인아웃 인원 검색 ~ 자식들 정렬하기 위해 flex사용 */
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* -----------------------------------------객실~인원 공통 디자인------------------------------------------------ */
#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: 10px;
}
#wrap main #hero_bnr #reservation_form .check_in_out .in .check_in a,/* 체크인,아웃 공통 */
#wrap main #hero_bnr #reservation_form .check_in_out .check_out a {
    background-color: #fff;
    display: flex;
    flex-flow: row nowrap;
    width: 150px; height: 42px;
    border: 1px solid #aaa; border-radius: 6px;
    align-items: center;
    padding: 14px 12px; /* 0px 12px 해도 가능 -> 얼라인 아이템을 센터로 맞춰놨기 때문에 */
    font-size: 0.88rem;
    justify-content: space-between;
}
#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: flex;
    flex-flow: column nowrap;
}
#wrap main #hero_bnr #reservation_form .room .room_type > .room_open a,
#wrap main #hero_bnr #reservation_form .room .room_type > a { /* 포사이드방 */
    background-color: #fff;
    border: 1px solid #aaa; border-radius: 6px;
    display: flex;/* flex 설정 시 형제끼리 크기 맞추는 자동설정 때문에 이미지 비율이 커질 수 있음. 메인,교차축 설정하면서 해결됨. */
    flex-flow: row nowrap;
    align-items:center ;
    justify-content: space-between;
    width: 150px; height: 42px;
    font-size: 0.88rem;
    padding: 0 12px;
}
#wrap main #hero_bnr #reservation_form .room .room_type > a .name {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open a .name span, /* open 글자 */
#wrap main #hero_bnr #reservation_form .room .room_type > a .name span {
    font-size: 0.75rem;
    color: #aaa; 
}
#wrap main #hero_bnr #reservation_form .room .room_type > a img {}
#wrap main #hero_bnr #reservation_form .room .room_type .room_open {
    position: absolute; /* absolute 설정 시 기존태그 크기가 inline-block처럼 바뀜 */
    left: 0; top: 100%;
    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: 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 .check_in {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .check_in a {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .check_in a .date {}
#wrap main #hero_bnr #reservation_form .check_in_out .in .check_in a img {}
#wrap main #hero_bnr #reservation_form .check_in_out .day { /* n박  */
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    left: 0; top: 23px;
    padding: 0 10px;
    font-size: 0.88rem;
}
#wrap main #hero_bnr #reservation_form .check_in_out .day img {
    margin-bottom: 4px;
}
#wrap main #hero_bnr #reservation_form .check_in_out .day img 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 .check_out {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .check_out a {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .check_out a .date {}
#wrap main #hero_bnr #reservation_form .check_in_out .out .check_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;
}
#wrap main #hero_bnr #reservation_form .person .number li:first-child, /* 인원 */
#wrap main #hero_bnr #reservation_form .person .number li:last-child {
    width: 150px; height: 42px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
    background-color: #fff; 
    border:  1px solid #aaa; border-radius: 6px;
    padding: 14px 12px;
    font-size: 0.88rem;
}
#wrap main #hero_bnr #reservation_form .person .number li .number_btn {
    width: 20px; 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 {}
#wrap main #hero_bnr #reservation_form .person .number li span label {}
#wrap main #hero_bnr #reservation_form .person .number li span input {
    width: 20px; text-align: center;
    font-size: 0.88rem;
}
#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; left: -10px; top: 12px;
}
#wrap main #hero_bnr #reservation_form > p #search_btn { /* 검색버튼 */
    background-color: #27536B;
    color: #fff;
    width: 54px; height: 42px;
    border-radius: 6px;
    font-size: 0.88rem;
}
/* ----------호랑가시나무 소개------------------------------------------------------------------------------ */
#wrap main #introduction {
    background-color: #f5f5f5;
}
#wrap main #introduction #intro_contents {}
#wrap main #introduction #intro_contents h1 {}
#wrap main #introduction #intro_contents p {}
#wrap main #introduction #intro_contents a {}
#wrap main #introduction #intro_contents a img {
    width: 100%; /* 작은 아이콘 이미지 말고는 이미지에 w100% 걸어주는 습관 들이기 */
}
/* ----------------------------------주변관광지-------------------------------------------------------- */
#wrap main #tourist_attraction {}
#wrap main #tourist_attraction #attraction_list {}
#wrap main #tourist_attraction #attraction_list h1 {}
#wrap main #tourist_attraction #attraction_list h1+p {}
#wrap main #tourist_attraction #attraction_list ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 0 80px;
}
#wrap main #tourist_attraction #attraction_list ul li {
    width: calc((100% - 60px) / 4);
}
#wrap main #tourist_attraction #attraction_list ul li a {
    overflow: hidden;
    display: block;
    height: 200px;
    margin: 0 0 10px;
} /* a를 마스크라고 생각 a 안에서만 보이게 생각(부모만 후보가 될 수 있음) */
#wrap main #tourist_attraction #attraction_list ul li a:hover img {
    width: 120%;
}
#wrap main #tourist_attraction #attraction_list ul li a img {
    width: 100%;
}
#wrap main #tourist_attraction #attraction_list ul li h2 {
    font-size: 1.13rem;
    font-weight: 500;
}
#wrap main #tourist_attraction #attraction_list .more {
    border-bottom: 1px solid black;
    margin: 0 auto;
    width: max-content;
    display: block;
}
#wrap main #reservation {
    background-color: #f5f5f5;
}
#wrap main #reservation #res_contents {}
#wrap main #reservation #res_contents h1 {}
#wrap main #reservation #res_contents p {}
#wrap main #reservation #res_contents ul {
    width: 1220px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
#wrap main #reservation #res_contents ul li {}
#wrap main #reservation #res_contents ul li a {}
#wrap main #reservation #res_contents ul li a img {}
#wrap main #reservation #res_contents ul li h2 {
    margin-bottom: 10px;
}
#wrap main #reservation #res_contents ul li h2+p {
    font-size: 0.94rem;
    line-height: 1.7rem;
    word-spacing: 0;
}
#wrap main #reservation #res_contents .more {
    border-bottom: 1px solid black;
    margin: 0 auto;
    width: max-content;
    display: block;
}
/* ----------------------------------------오시는길----------------------------------- */
#wrap main #transportation {}
#wrap main #transportation #trans_contents {}
#wrap main #transportation #trans_contents .text {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#wrap main #transportation #trans_contents .text h1 {
    font-size: 1.5rem; font-weight: 500;
}
#wrap main #transportation #trans_contents .text p {}
#wrap main #transportation #trans_contents a {}
#wrap main #transportation #trans_contents a img {
    margin-bottom: 30px;
    width: 100%;
}
#wrap main #transportation #trans_contents ul {}
#wrap main #transportation #trans_contents ul li  {}
#wrap main #transportation #trans_contents ul li h2 {
    font-size: 1.5rem; font-weight: 700; line-height: 1.8rem;
}
#wrap main #transportation #trans_contents ul li p {}
#wrap main #transportation #trans_contents ul li p:nth-last-child {}
/* --------------------------------footer--------------------------------------------- */
#wrap footer {background-color: #000;}
#wrap footer #footer_wrap {}
#wrap footer #footer_wrap .container_layout {}
#wrap footer #footer_wrap .container_layout address {
    font-size: 0.81rem; 
    color:#fff; 
    line-height: 2.0;
}
#wrap footer #footer_wrap .container_layout address a {color: #fff; text-decoration: underline;}