@charset "utf-8";

.container{ padding: 0 60px; margin: 0 auto; width: 1200px; }

.forward{ display: flex; flex-direction: column-reverse; position: relative; width: 100%; height: 400px; background: center center no-repeat;}
.forward.hotel-info::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: #000; opacity: .6;}
.forward .tab-bar{ display: flex; position: relative; }
.forward .tab-bar li{ flex: 1;}
.forward .tab-bar li.active{ background-color: #AF8D5D;}
.forward .tab-bar li a{ display: block; width: 100%; height: 100%; font-size: 16px; line-height: 50px; color: #fff; text-align: center;}
.forward.hotel-info{ background-image: url(/img/webp/info_header.webp);}
.forward.accommodation{ background-image: url(/img/webp/accomm_header.webp);}
.forward.dining{ background-image: url(/img/webp/restaurant_header.webp);}
.forward.facilities{ background-image: url(/img/webp/tour_header.webp);}
.forward.facilities::before{ content: none;}
.forward.site-map{ background-image: url(/img/info_header.png);}
.forward.site-map::before{ content: none;}


main{ padding: 100px 0;}
main img{ display: block; width: 100%;}

article h2{ padding: 92px 0 51px; font-size: 30px; color: #856F57; text-align: center;}
article h2 span{ display: block; padding-top: 7px; font-size: 20px; color: #2F2F2F; font-weight: 500;}

.greetings strong{ display: block; margin-bottom: 30px; font-size: 20px; text-align: center; color: #222222; }
.greetings p{ margin-bottom: 30px; font-size: 18px; line-height: 30px; text-align: center; color: #555555;}
.greetings > span{ display: block; margin-top: 60px; font-size: 18px; text-align: right; color: #555555; }

.hotel-lobby{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(300px, auto);}
/*.hotel-lobby img:first-child{ grid-column: 1 / span 2;}
.hotel-lobby img:nth-child(2){ grid-column: 3 / span 2; grid-row: 1 / span 2;}
.hotel-lobby .content{ padding: 42px 54px; background-color: #222222; font-size: 0; }
.hotel-lobby .content span{ display: block; padding-top: 10px; margin: 0 auto; width: max-content; font-size: 20px; color: #FFEDB4; line-height: 27px; }
.hotel-lobby .content span:first-child{ padding: 0 0 15px; font-size: 25px; color: #FFFFFF; border-bottom: 1px solid #FFFFFF; line-height: 36px; }
.hotel-lobby .content p{ padding-top: 31px; font-size: 16px; color: #D9D9D9; text-align: center; }*/

.use, .term, .information, map{ padding: 0 200px; }
.use ol,
.term ul{ padding-left: 23px;}
.use ol li{ list-style: decimal; font-size: 18px; line-height: 30px; color: #555555;}
.term ul li{ list-style: disc; text-indent: -5px; font-size: 18px; line-height: 30px; color: #555555;}
.term span{ display: block; font-size: 18px; line-height: 30px; color: #555555;}
.term span:nth-last-child(2){ padding-top: 30px;}
.information p{ font-size: 18px; line-height: 30px; color: #555555;}

.location{ padding: 0 60px;}
.location p{ padding-bottom: 25px; font-size: 18px; color: #666666;}
.location h3{ position: relative; padding: 5px 0 0 34px; font-size: 18px; color: #222222; font-weight: normal}
.location h3::before{ content: ""; display: block; position: absolute; top: 7px; left: 0; width: 24px; height: 24px; background: no-repeat center; background-size: 24px 24px;}
.location h3:nth-of-type(1)::before{ background-image: url(/img/bus-fill.png);}
.location h3:nth-of-type(2)::before{ background-image: url(/img/train-fill.png);}
.location h3:nth-of-type(3)::before{ background-size: 24px 18px; background-image: url(/img/car-fill.png);}
.location ul{ padding-left: 35px; }
.location ul li{ padding: 5px 0; list-style: disc; text-indent: -5px;  font-size: 18px; color: #555555;}
#map{ width: 100%; height: 700px; border: 1px solid #000; box-sizing: border-box; z-index: 0;}

.accomm-tab-bar{ display: flex; margin: 0 auto 80px; width: 900px;}
.accomm-tab-bar li{ flex: 1; background-color: #F7F7F7; border: 1px solid #E2E2E2; box-sizing: border-box;}
.accomm-tab-bar li a{ display: block; font-size: 16px; line-height: 48px; color: #555555; text-align: center;}
.accomm-tab-bar li.active{ background-color: #fff; border-color: #AE906F;}
.accomm-tab-bar li.active a{ color: #AE906F; cursor: initial;}

.detail-box{ position: relative; padding-top: 84px; font-size: 0;}
.detail-box h2{ display: inline-block; padding: 0 0 91px; width: 400px; text-align: center; }
.detail-box h2 > span{ padding-top: 32px;}
.detail-box p{ display: inline-block; padding-top: 41px; width: calc(100% - 600px); font-size: 16px; color: #666666; vertical-align: top; word-break: keep-all;}
.detail-box button{ position: absolute; top: 112px; right: 0; width: 130px; background-color: #AF8D5D;}
.detail-box button a{ display: block; font-size: 18px; color: #fff; line-height: 50px; cursor:pointer;}
.detail-box .detail-info{ display: grid; grid-template-columns: repeat(4, 1fr);}
.detail-box .detail-info h3{ padding-left: 40px; background-color: #7D7667; font-size: 16px; line-height: 50px; color: #fff; font-weight: normal;}
.detail-box .detail-info h3.special{ background-color: #AF8D5D; }
.detail-box .detail-info ul{ padding-left: 40px; margin: 20px 0;}
.detail-box .detail-info ul li{ padding-bottom: 15px; font-size: 16px; color: #666666; word-break: keep-all;}
.detail-box .detail-info ul li::before{ content: "-"; padding-right: 5px;}
.detail-box .detail-info ul:nth-of-type(1){ grid-column: 1 / 2; grid-row: 2/ 3; border-right: 1px solid #C7C7C7;}
.detail-box .detail-info ul:nth-of-type(2){ grid-column: 2 / 3; grid-row: 2/ 3; border-right: 1px solid #C7C7C7;}
.detail-box .detail-info ul:nth-of-type(3){ grid-column: 3 / 4; grid-row: 2/ 3;}
.detail-box .detail-info h3.special + ul{ grid-column: 4 / 5; grid-row: 2/ 3; padding: 0 20px; margin: 0; background-color: #FBFAF5;}
.detail-box .detail-info h3.special + ul li{ padding: 20px 20px 22px; border-bottom: 1px solid #C7C7C7;}
.detail-box .detail-info h3.special + ul li h4{ padding-bottom: 10px; font-size: 16px; font-weight: 500; color: #856F57; }
.detail-box .detail-info h3.special + ul li:first-child span{ display: inline-block; padding-left: 57px; text-indent: -57px;}
.detail-box .detail-info h3.special + ul li:last-child{ border: 0;}
.detail-box .detail-info h3.special + ul li::before{ content: none;}
.detail-box .detail-info.eight{ grid-template-columns: repeat(3, 1fr);}
.detail-box .detail-info.eight ul:nth-of-type(2){ border: 0;}
.detail-box .detail-info.eight h3.special + ul{ grid-column: 3 / 4;}
.detail-box .notes{ display: block; padding: 60px 105px 0;}
.detail-box .notes h4{ display: block; padding-bottom: 15px; text-align: center; font-size: 20px; color: #856F57;} 
.detail-box .notes p{ display: block; padding-top: 15px; width: auto; font-size: 20px;} 
.detail-box .card-container{ display: grid; padding-bottom: 80px;}
.detail-box .card-container.even{ grid-template-columns: repeat(2, 1fr); gap: 40px;}
.detail-box .card-container.odd{ grid-template-columns: repeat(3, 1fr); gap: 45px;}
.detail-box .card-container .card{ position: relative;}
.detail-box .card-container .card .word-container{ position: absolute; top: 50px; left: 0; right: 0;}
.detail-box .card-container .card .word-container::before{ content:""; display: block; position: absolute; width: 100%; height: 100%; background-color: #7D7667; opacity: 60%;}
.detail-box .card-container .card .word-container h2{ display: block; position: relative; padding: 9px 3px; margin: 0 110px; width: auto; border-bottom: 1px solid #FFFFFF; font-size: 28px; text-align: center; color: #ffffff;}
.detail-box .card-container .card .word-container span{ display: block; position: relative; padding: 4px 12px; font-size: 22px; text-align: center; color: #ffffff;}
.detail-box .card-container .card button{ top: auto; bottom: 40px; right: 50%; transform: translateX(50%);}
.detail-box .card-container .card img{ height: 320px; object-fit: cover;}
.detail-box.etc p{ width: calc(100% - 450px);}
.detail-box.etc.menu p{ width: calc(100% - 600px);}
.detail-box.etc.menu .line-break{ display: none;}
.detail-box.etc .detail-info{ grid-template-columns: 1fr 1fr;}
.detail-box.etc .detail-info.terrace{  grid-template-columns: 1fr; }
.detail-box.etc .detail-info.terrace ul{ grid-column: 1 / 2 !important; }
.detail-box.etc .detail-info ul:nth-of-type(2){ grid-column: 2 / 3;}
.detail-box.etc .detail-info ul:nth-of-type(1){ border: 0;}
.detail-box.etc .detail-info .note,
.detail-box.etc .detail-info .note + ul{ grid-column: 1 / 3; grid-row: auto;}
.detail-box.etc .detail-info .note.first{ margin-top: 40px;}

.card-row { display: flex; align-items: center; gap: 40px; margin-bottom: 80px;}
.card-row.reverse { flex-direction: row-reverse;}
.card-image { flex: 1;}
.card-image img { width: 100%; height: auto; display: block; object-fit: cover;}
.card-content { flex: 1; align-self: baseline; padding-top: 26px;}
.card-content .title { padding: 0; margin-bottom: 30px; font-size: 28px; text-align: left; color: #222222;}
.card-content .description { font-size: 18px; line-height: 26px; color: #666; margin-bottom: 30px;}
.card-content .distance { font-size: 18px; color: #808080;}

.swiper.gallary-swiper{ width: 100%; height: 675px; z-index: 0;}
.swiper.gallary-swiper .font{ display: block; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 25px; color: #fff; }
.swiper.gallary-swiper .swiper-button-next::after{content: url("/img/detail-swiper-next.png"); font-size: 0;}
.swiper.gallary-swiper .swiper-button-prev::after{content: url("/img/detail-swiper-prev.png"); font-size: 0;}
.swiper.thumbs-swiper{ margin-top: 3px; width: 100%; height: 150px;}
.swiper.thumbs-swiper .swiper-slide{ position: relative; filter: brightness(60%); box-sizing: border-box;}
.swiper.thumbs-swiper .swiper-slide-thumb-active{ border: 5px solid #AF8D5D; filter: brightness(100%);}
.swiper.gallary-swiper .swiper-slide img,.swiper.thumbs-swiper .swiper-slide img{ display: block; width: 100%; height: 100%; object-fit: cover;}
/* 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; }

.sitemap-container{ display: grid; grid-template-columns: repeat(4, 1fr);}
.sitemap-container > ul{ margin-right: 100px;}
.sitemap-container > ul > li{ padding: 19px 10px 0;}
.sitemap-container > ul > li a{ display: block; font-size: 18px; color: #444444; }
.sitemap-container > ul > li ul{ padding-bottom: 3px; }
.sitemap-container > ul > li ul li{ padding-top: 11px; }
.sitemap-container > ul > li ul li a{ display: block; font-size: 16px; color: #666666;}
.sitemap-container > ul > li:first-child{ padding: 0 0 12px; border-bottom: 1px solid #707070;}
.sitemap-container > ul > li:first-child h3 a{ display: block; font-size: 24px; color: #222222; font-weight: normal; }
.sitemap-container > ul > li:nth-child(2){ padding-top: 28px; }