@charset "utf-8";

.swiper.mainpictureSwiper{ width: 100%; height: auto;}
.swiper.mainpictureSwiper .swiper-slide{ height: 810px;}
.reservation-bar-container{ margin-bottom: 6px; width: 100%; height: 100px; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.16);}
.reservation-bar{ position: relative; margin: 0 auto; width: 1320px; text-align: center; font-size: 0; }
.reservation-bar li{ display: inline-block; position: relative; padding: 0 24px;}
.reservation-bar li .reserv-title{ font-size: 16px; font-weight: 500; color: #888888;}
.reservation-bar li .reserv-content{ padding-left: 49px; font-size: 16px; color: #333333;}
.reservation-bar li::after{ content: ""; position: absolute; top: -6px; right: 0; width: 1px; height: 35px; background-color: #E5E5E5;}
.reservation-bar li:nth-last-child(2)::after,
.reservation-bar li:last-child::after{ content: none;}
.reservation-bar li select{ padding: 0 0 0 44px; width: 65px; height: 24px; font-size: 16px; font-weight: 500; color: #666666; border: 0; text-align: left; -webkit-appearance:none; -moz-appearance:none; appearance:none; vertical-align: top;}
.reservation-bar li input[type=text]{ padding-left: 46px; width: 100px; height: 24px; font-size: 16px; font-weight: 500; text-indent: 0; border: 0; vertical-align: top;}
.reservation-bar .check-in{padding-left: 46px;}
.reservation-bar .headcount-children button{ display: inline-block; margin-left: 3px; width: 15px; height: 15px; background: no-repeat center url("/img/main/info_icon.png"); font-size: 0; vertical-align: 13px; cursor: pointer; }
.reservation-bar .headcount-children button a{ display: block; position: relative; width: 100%; height: 100%;}
.reservation-bar .headcount-children button a::before{ content: attr(data-tooltip) "\a" attr(data-subtooltip); position: absolute; bottom: 23px; left: 7px; width: max-content; max-width: 200px; height: max-content; padding: 11px; background-color: #957E50; visibility: hidden; opacity: 0; z-index: 100; font-size: 13px; color: #fff; white-space: pre-wrap; text-align: center;}
.reservation-bar .headcount-children button a::after{ content: ""; position: absolute; bottom: 15px; left: 7px; border-style:none; border-left: 7px solid #957E50; border-bottom: 10px solid transparent; visibility: hidden; opacity: 0;}
.reservation-bar .headcount-children button a.on::before, .reservation-bar .headcount-children button a.on::after{ visibility: visible; opacity: 1;}
.reservation-bar .search-button{ padding: 0 0 0 84px; }
.reservation-bar .search-button a{ display: block; width: 135px; background-color: #2E1503; line-height: 100px; font-size: 16px; color: #fff; font-weight: 500;}


.main-contents{ position: relative; margin: 0 auto; width: 1320px; font-size: 0; }
.main-contents h2{ padding-top: 38px; margin: 0 60px 20px; font-size: 28px; font-weight: 500; color: #3E2B2C;}
.main-contents h2 span{ margin-left: 15px; font-size: 14px; font-family: KoPubWorldBatangB; font-weight: 500; color: #998465;}

.special-offer{ margin-top: 100px;} 
.swiper{ width: 1200px; height: 532px;}
.swiper-slide{ text-align: center; font-size: 18px;}
.swiper-slide .so-card{ margin: 0 3px 6px; height: calc(100% - 6px); background: #fff; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.swiper-slide .so-card img{ display: block; width: 100%; height: 300px; object-fit: contain;}
.swiper-slide .so-card .card-title{ position: relative; width: 100%; height: 100px; border-bottom: 1px solid #707070; text-align: left; box-sizing: border-box;}
.swiper-slide .so-card .card-title span{ position: absolute; top: 40px; left: 10px; font-size: 16px; font-weight: 500; line-height: 20px; color: #998465;}
.swiper-slide .so-card .card-title span:last-child{ top: auto; left: auto; bottom: 15px; right: 15px; font-size: 12px; font-weight: 500; color: #3E2B2C;}
.swiper-slide .so-card .card-title::before{ content: ""; position: absolute; bottom: -1px; left: 0; width: 10px; height: 1px; background-color: #fff;}
.swiper-slide .so-card .card-title::after{ content: ""; position: absolute; bottom: -1px; right: 0; width: 10px; height: 1px; background-color: #fff;}
.swiper-slide .so-card .card-content{ padding: 15px 10px 10px; width: calc(100% - 20px); font-size: 16px; font-weight: 500; color: #555555; text-align: left;}

#main-swiper-prev,
#main-swiper-next{ top: 342px; width: 20.3px; height: 40.5px;}
#main-swiper-prev{ left: 25px; background-image: url('/img/main/mainSwiperL.png');}
#main-swiper-next{ right: 25px; background-image: url('/img/main/mainSwiperR.png');}
#main-picture-swiper-prev,
#main-picture-swiper-next{ top: 50%; transform: translateY(-50%); width: 25px; height: 46px; margin-top: auto;}
#main-picture-swiper-prev{ left: 25px; background-image: url('/img/main/mainPictureSwiperL.png');}
#main-picture-swiper-next{ right: 25px; background-image: url('/img/main/mainPictureSwiperR.png');}
/* swiper의 default 버튼 이미지 없애기 */
#main-swiper-prev::after,
#main-swiper-next::after,
#main-picture-swiper-prev::after,
#main-picture-swiper-next::after{ display:none;}
#main-swiper-prev:focus,
#main-swiper-next:focus,
#main-picture-swiper-prev::focus,
#main-picture-swiper-next::focus{ outline: none;}
/* swiper pagination 커스텀 */
.swiper-pagination{ line-height: 0;}
.swiper-pagination-bullet{ position: relative; width: 10px; height: 10px; background-color: transparent; border: 1px solid #fff; opacity: 1; box-shadow: 0 0 10px;}
.swiper-pagination-bullet-active{ background-color: #fff; }
/* swiper 정지, 시작버튼 */
.swiper-play-stop{ position: absolute; bottom: 11px; left: calc(50% + 80px); width: 10px; height: 10px; background: center no-repeat url(/img/main/stop.png); z-index: 11;}

.restaurant{ margin-top: 110px; margin-bottom: 135px;}
.restaurant .r-card{ margin: 0 60px 40px; position: relative; width: 1200px; height: 300px; font-size: 0; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.restaurant .r-card img{ width: 500px; height: 100%;}
.restaurant .r-card .card-title{ display: inline-block; position: relative; margin: 60px 60px 0; width: calc(100% - 620px); height: 105px; border-bottom: 1px solid #707070; box-sizing: border-box; vertical-align: top;}
.restaurant .r-card .card-title span{ display: block; font-size: 16px; font-weight: 500; line-height: 22px; color: #998465;}
.restaurant .r-card .card-title span:nth-child(2){ margin-top: 13px; font-size: 20px; line-height: 29px; color: #3E2B2C;}
.restaurant .r-card .card-title a{ display: block; position: absolute; bottom: 22px; right: 0; padding: 5px; font-size: 12px; color: #736049;}
.restaurant .r-card .card-content{ position: absolute; bottom: 0; right: 60px; padding: 15px 0; width: calc(100% - 620px); height: 105px; font-size: 16px; font-weight: 500; line-height: 20px; color: #555555;}

.gallery{margin-bottom: 135px;}
.gallery video{ margin: 0 60px; width: calc(100% - 120px);}

/* popup */
#popup-area{ position: relative;}
#popup-area .kr-show-wrap{ position: absolute; top: 0; left: 0;  border: 2px solid #4A433B; padding: 0px; z-index: 9999; background: #fff; font-size: 0;}
#popup-area .kr-show-wrap #kr-show{ padding: 20px;}
#popup-area .kr-show-wrap #kr-show img{ width: 200px; height: 300px; border: 1px solid #CDCBBE}
#popup-area .kr-show-wrap button{height: 40px; width: 50%; border-top: 1px solid #E9E9E9; background: #fff; cursor: pointer;}
#popup-area .kr-show-wrap button:first-of-type{ border-right: 1px solid #E9E9E9;}

/* datepicker 커스텀 */
.ui-widget-header { border: 0px solid #dddddd; background: #fff; } 
.ui-datepicker-calendar>thead>tr>th { font-size: 14px !important; } 
.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; } 
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; } 
.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; } 
.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); } 
.ui-widget.ui-widget-content { border: 1px solid #eee; } 
#datepicker:focus>.ui-datepicker { display: block; } 
.ui-datepicker-prev,
.ui-datepicker-next { cursor: pointer; } 
.ui-datepicker-next { float: right; } 
.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); } 
.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; } 
.ui-datepicker-calendar { width: 100%; } 
.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 20px; font-weight: 400; } 
.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none;}
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff; } 
.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; } 
.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; } 
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; } 
.ui-widget-header .ui-icon { background-image: url('/img/btns.png'); } 
.ui-icon-circle-triangle-e { background-position: -20px 0px; background-size: 36px; } 
.ui-icon-circle-triangle-w { background-position: -0px -0px; background-size: 36px; } 
.ui-datepicker-calendar>tbody>tr>td:first-child a { color: red !important; } 
.ui-datepicker-calendar>tbody>tr>td:last-child a { color: #0099ff !important; } 
.ui-datepicker-calendar>thead>tr>th:first-child { color: red !important; } 
.ui-datepicker-calendar>thead>tr>th:last-child { color: #0099ff !important; } 
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; padding-top: 10px; padding-bottom: 10px; } 
.inp { padding: 10px 10px; background-color: #f1f1f1; border-radius: 4px; border: 0px; } 
.inp:focus { outline: none; background-color: #eee; }