@charset "utf-8";

.container{ padding: 0 .5rem; margin: 0; width: calc(100% - 1rem); }

.forward{ height: 7.5rem;}
.forward::before{ height: 1.5rem;}
.forward .container{ padding: 0; width: 100%;}
.forward .tab-bar li a{ font-size: .6rem; line-height: 1.5rem;}
.forward.hotel-info{ background-image: url(/img/webp/info_header_m.webp);}
.forward.accommodation{ background-image: url(/img/webp/accomm_header_m.webp);}
.forward.dining{ background-image: url(/img/webp/restaurant_header_m.webp);}
.forward.facilities{ background-image: url(/img/webp/tour_header_m.webp);}
.forward.site-map{ background-image: url(/img/info_header_m.png);}

main{ padding: 2rem 0 2.5rem;}

article h2{ padding: 1.25rem 0 2.05rem; font-size: 1rem;}
article h2 span{ padding-top: .1rem; font-size: .8rem;}

.greetings strong{ margin-bottom: 1rem; font-size: .7rem;}
.greetings p{ margin-bottom: 30px; font-size: .7rem; line-height: 1rem; color: #666666;}
.greetings > span{ margin-top: 2rem; font-size: .7rem;}

.hotel-lobby{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(8.5rem, auto);}
.hotel-lobby img{ object-fit: cover; height: 100%;}
.hotel-lobby img:first-child{ grid-column: 1 / span 1;}
.hotel-lobby img:nth-child(2){ grid-column: 2 / span 1; grid-row: 1 / span 1;}
.hotel-lobby .content{ padding: 1.1rem 1.25rem;}
.hotel-lobby .content span{ display: block; padding-top: .3rem; font-size: .55rem; line-height: .75rem;}
.hotel-lobby .content span:first-child{ padding: 0 0 .45rem; font-size: .7rem; border-bottom: .05rem solid #FFFFFF; line-height: 1rem;}
.hotel-lobby .content p{ padding-top: .75rem; font-size: .5rem;}

.use, .term, .information{ padding: 0;}
.use ol,
.term ul{ padding-left: 1rem;}
.use ol li{ font-size: .7rem; line-height: 1rem; color: #666666;}
.term ul li{ text-indent: -.25rem; font-size: .7rem; line-height: 1rem; color: #666666;}
.term span{ font-size: .7rem; line-height: 1rem; color: #666666;}
.term span:nth-last-child(2){ padding-top: 1rem;}
.information p{ font-size: .7rem; line-height: 1rem; color: #666666;}

.location{ padding: 0;}
.location p{ padding-bottom: .875rem; font-size: .7rem; color: #666666;}
.location h3{ padding: .675rem 0 .375rem 1.7rem; font-size: .65rem; color: #222222;}
.location h3::before{ top: .45rem; width: 1.2rem; height: 1.2rem; background-size: 1.2rem 1.2rem;}
.location ul{ padding-left: 1rem;}
.location ul li{ padding: .375rem 0; text-indent: 0;  font-size: .7rem; color: #666666;}
#map{ height: 15rem;}

.accomm-tab-bar{ display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1.5rem; width: 100%;}
.accomm-tab-bar li{ border: .05rem solid #E2E2E2;}
.accomm-tab-bar li a{ font-size: .6rem; line-height: 1.4rem;}

.detail-box{ padding-top: 1.25rem;}
.detail-box h2{ display: block; padding: 0; width: 100%; text-align: left;}
.detail-box h2 > span{ padding-top: .6rem;}
.detail-box p{ display: block; padding-top: 2.05rem; padding-bottom: 2rem; width: 100%; font-size: .7rem; vertical-align: baseline;}
.detail-box button{ top: 2.3rem; width: 5rem;}
.detail-box button a{ font-size: .7rem; line-height: 2rem;}
.detail-box .detail-info{grid-template-columns: 1fr;}
.detail-box .detail-info h3{ padding-left: 2rem; font-size: .7rem; line-height: 1.75rem;}
.detail-box .detail-info ul{ padding-left: 2rem; margin: .25rem 0;}
.detail-box .detail-info ul li{ padding: .25rem 0; font-size: .7rem;}
.detail-box .detail-info ul li::before{ padding-right: .25rem;}
.detail-box .detail-info ul:nth-of-type(1){ grid-column: auto; grid-row: auto; border: 0;}
.detail-box .detail-info ul:nth-of-type(2){ grid-column: auto; grid-row: auto; border: 0;}
.detail-box .detail-info ul:nth-of-type(3){ grid-column: auto; grid-row: auto;}
.detail-box .detail-info h3.special + ul{ grid-column: auto; grid-row: auto; padding: 0 1rem;}
.detail-box .detail-info h3.special + ul li{ padding: .75rem 1rem; border-bottom: .05rem solid #C7C7C7;}
.detail-box .detail-info h3.special + ul li h4{ padding-bottom: .5rem; font-size: .7rem;}
.detail-box .detail-info.eight{ grid-template-columns: 1fr;}
.detail-box .detail-info.eight h3.special + ul{ grid-column: auto;}
.detail-box .notes{ padding: 1.5rem 0 1rem;}
.detail-box .notes h4{ padding-bottom: .25rem; font-size: .8rem;} 
.detail-box .notes p{ padding-top: 0.75rem; padding-bottom: 0; font-size: .7rem;}
.detail-box .card-container{ padding-bottom: 3rem; margin: 0 auto; max-width: 30rem;}
.detail-box .card-container.even{ grid-template-columns: 1fr; gap: 1rem;}
.detail-box .card-container.odd{ grid-template-columns: 1fr; gap: 1rem;}
.detail-box .card-container .card .word-container{ top: 2.5rem;}
.detail-box .card-container .card .word-container h2{ margin: 0 2.5rem; font-size: 1rem;}
.detail-box .card-container .card .word-container span{ font-size: .8rem;}
.detail-box .card-container .card button{ bottom: 2rem;}
.detail-box .card-container .card img{ height: 16rem;}
.detail-box.etc p,.detail-box.etc.menu p{ width: 100%;}
.detail-box.etc .detail-info{ grid-template-columns: 1fr;}
.detail-box.etc .detail-info ul:nth-of-type(2){ grid-column: auto;}
.detail-box.etc .detail-info .note,
.detail-box.etc .detail-info .note + ul{ grid-column: auto;}
.detail-box.etc .detail-info .note.first{ margin-top: 0;}

@media( max-width: 410px){
	.detail-box.etc.menu .line-break{ display: block;}	
}

.card-row, .card-row.reverse { flex-direction: column; gap: 0; margin-bottom: 4rem;}
.card-content { padding-top: .9rem; margin: 0 auto; max-width: 30rem;}
.card-content .title { margin-bottom: .5rem; font-size: .8rem;}
.card-content .description { font-size: .7rem; line-height: 1rem; margin-bottom: .5rem;}
.card-content .distance { font-size: .7rem;}


.swiper.gallary-swiper{ width: 100%; height: auto;}
.swiper.gallary-swiper .font{ bottom: 1.5rem; font-size: .7rem; }
.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: .15rem; height: 4.3rem;}
.swiper.thumbs-swiper .swiper-slide-thumb-active{ border: .25rem solid #AF8D5D;}
/* swiper pagination 커스텀 */
.swiper-pagination-bullet{ position: relative; width: .5rem; height: .5rem; border: .05rem solid #fff; box-shadow: 0 0 .5rem;}

.sitemap-container{ display: grid; grid-template-columns: 1fr;}
.sitemap-container > ul{ margin: 0 .5rem 2.3rem;}
.sitemap-container > ul > li{ padding: .7rem 0 0;}
.sitemap-container > ul > li a{ font-size: .65rem;}
.sitemap-container > ul > li ul{ padding-bottom: .65rem;}
.sitemap-container > ul > li ul li{ padding-top: .55rem;}
.sitemap-container > ul > li ul li a{ font-size: .6rem;}
.sitemap-container > ul > li ul li:first-child{ padding-top: .7rem;}
.sitemap-container > ul > li:first-child{ padding: 0 0 .6rem; border-bottom: .05rem solid #D6D6D6;}
.sitemap-container > ul > li:first-child h3 a{ font-size: .8rem;}
.sitemap-container > ul > li:nth-child(2){ padding-top: 1rem;}
.sitemap-container > ul:last-child{ margin-bottom: 0;}