@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

h4 { margin-top: 20px; }
h4 + .bbsView.dl { margin-top: 0px; }

#header { min-width: inherit; margin-bottom: 30px; }

.area_subVisual { position: relative; height: 500px; text-align: center; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.area_subVisual > .wrap { position: relative; top: 60%; transform: translateY(-50%); }
.area_subVisual > .wrap h2 { margin-bottom: 7px; font-size: 33px; letter-spacing: 2px; color: #fff; }
.area_subVisual > .wrap p { font-weight: 300; color: #fff; }

#content.sub { padding: 80px 0; }
.sub_tit { margin-bottom: 25px; font-size: 30px; text-align: center; color: #111; }
.pdb80 { padding-bottom: 80px; }
.list01 > li { position: relative; overflow: hidden; margin-bottom: 3px; padding-left: 13px; line-height: 1.7; color: #555; }
.list01 > li:before { position: absolute; top: 9px; left: 0; width: 4px; height: 4px; margin-right: 5px; background: #afafaf; border-radius: 50%; content: ""; }

.list02 > li { position: relative; padding-left: 13px; line-height: 1.7; color: #555; }
.list02 > li:before { position: absolute; top: 10px; left: 0; width: 5px; height: 1px; margin-right: 5px; background: #555; content: ""; }

/* 펜션 소개 */
.about_text { text-align: center; color: #fff; animation: fade-in-bottom 1s 1 linear; }
.about_text h3 { margin-bottom: 10px; font-size: 40px; }
.about_text p { font-weight: 300; }
.sub_scroll { position: absolute; bottom: 20px; left: 50%; z-index: 99; width: 43px; margin-left: -21.5px; transform: translateX(-50%); animation: bounce2 2s infinite; }

.area_about :is(.fp-section.fp-table, .fp-slide.fp-table) { position: relative; background: no-repeat 50% / cover; isolation: isolate;
    &::before { position: absolute; inset: 0; z-index: -1; background: hsla(0, 0%, 0%, 0.3); content: ""; }
}

/* 오시는 길 */
#content .area_location .table { margin-top: 30px; }
#content .area_location .table th { color: #fff; background: #142e52; }
#content .area_location table.table th, #content .area_location table.table td { padding: 22px; }

/* 방소개 */
.area_roomReserved .photo .list li { position: relative; width: 100%; height: 100vh; background-position: 50%; background-size: cover; }
.area_roomReserved .list_item .bx-controls-direction { right: 0; left: auto; }

.area_roomReserved .list_item .photo > em { position: absolute; bottom: 50px; left: 80px; color: #fff; }
.area_roomReserved .list_item .photo > em b { display: block; font-size: 35px; text-align: center; }
.area_roomReserved .list_item .bx-pager .bx-pager-link.active { background: #333; }
.list_tag { margin-bottom: 30px; }
.list_tag i { display: inline-block; margin: 0 5px 5px 0; padding: 5px 25px; font-size: 13px; color: #fff; background: #333; border-radius: 20px; }

/* 예약안내 */
.area_information h3 { margin-bottom: 10px; font-size: 22px; color: #222; }
.area_information .box { margin-top: 50px; }

/* 스페셜 */
.special_wrap { display: flex; align-items: center; }
.special_wrap .list_img { position: relative; width: 50%; margin-right: 5%; }
.special_wrap .list_img .bx-pager.bx-default-pager { position: absolute; bottom: 20px; left: 50%; z-index: 98; margin-left: -37.5px; }
.special_wrap .list_img .bx-pager-item { float: left; margin: 0 8px; }
.special_wrap .list_img .bx-pager-item .bx-pager-link { display: block; width: 9px; height: 9px; text-indent: -9999px; background: #000; border-radius: 50%; opacity: 0.4; transition: all 0.3s ease-in-out 0s; }
.special_wrap .list_img .bx-pager-item .bx-pager-link.active { background: #000; opacity: 1; transition: all 0.3s ease 0s; }
.special_wrap .list_img img { width: 100%; }

.special_wrap .text { width: 45%; }
.special_wrap .text h3 { margin-bottom: 25px; font-size: 25px; color: #111; }
.special_wrap .text h3 span { display: block; margin-bottom: 8px; font-weight: 600; font-size: 18px; color: #0047a9; }
.special_wrap .text p { margin-bottom: 25px; word-break: keep-all; }

.list_travel { display: flex; flex-wrap: wrap; justify-content: space-between; }
.list_travel li { width: 48%; margin-bottom: 35px; }
.list_travel li img { width: 100%; }
.list_travel li .text { padding: 30px 0; background: #fff; }
.list_travel li .text h3 { margin-bottom: 7px; font-size: 25px; color: #111; }
.list_travel li .text p { word-break: keep-all; color: #555; }

.travel-info { color: #666666;
    &::before { color: #888888; content: "※"; margin-right: .4ch; }
}

@media all and (max-width: 767px) {
    .area_subVisual { height: 300px; }
    .area_subVisual > .wrap h2 { font-size: 18px; }

    .sub_tit { font-size: 18px; }

    #content.sub { padding: 40px 0; }

    .about_text h3 { font-size: 18px; }
    .sub_scroll img { height: 18px; }

    #content .area_location table.table th, #content .area_location table.table td { padding: 10px; }

    .area_roomReserved.view .info > em { margin-bottom: 20px; font-size: 20px; }
    .area_roomReserved.view .info em.sub { font-size: 16px; }
    .area_roomReserved .list_item .photo > em { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); }
    .area_roomReserved .list_item .photo > em b { font-size: 20px; }
    .area_roomReserved .photo .list li { height: 480px; }

    .special_wrap { align-items: flex-start; }
    .special_wrap .text h3 { margin-bottom: 10px; font-size: 16px; }

    .list_travel li .text { padding: 15px 0 0 0; }
    .list_travel li .text h3 { font-size: 16px; }

    .area_information h3 { font-size: 16px; }
}

@media all and (max-width: 500px) {
    .special_wrap { flex-direction: column; }
    .special_wrap .list_img { width: 100%; margin-right: 0; }
    .special_wrap .text { width: 100%; margin-top: 25px; }

    .list_travel { flex-direction: column; }
    .list_travel li { width: 100%; }
}

.root_daum_roughmap .cont .section.lst { display: none; }