@charset "utf-8";

/****** visualRolling ******/
/* *  mainVisual * */
#mainVisual{overflow:hidden;width:100%;height: 100vh;position:relative;}	

.vis_con {position: relative;height: 100%;/* overflow: hidden; */z-index:1;}
.vis_con .swiper-wrapper {position: absolute;top: 0;left: 0;height: 100vh !important;}
.vis_con .swiper-slide {position: relative;box-sizing: border-box;height: 100vh !important;}
.vis_con .swiper-slide a {display: block;}
.vis_con .swiper-slide a:focus {border: 5px solid #000; box-sizing: border-box;}
.vis_con .swiper-slide a img {display: block; width: 100%; max-height: 330px;}
.vis_con .swiper-slide a img.mobile {display: none;}
.vis_con .swiper-slide .visImg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.vis_con .swiper-slide .visImg > div {transition:2s all;transform:scale(1.1);position: absolute;left:0;top:0;width: 100%;height: 100%;background-color: #000;background-size:cover !important;background-repeat: no-repeat !important;background-position: 50% 50% !important;-webkit-transition: transform 5000ms ease-in-out;-moz-transition: transform 5000ms ease-in-out;-o-transition: transform 5000ms ease-in-out;-ms-transition: transform 5000ms ease-in-out;transition: transform 5000ms ease-in-out;display: block;}
.vis_con .swiper-slide .img_m{display: none !important;}

.vis_con .vis_txt{ position: absolute;top: 50%;left: 0px;width: 100%;-ms-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 2;text-align: center; margin-top: -10rem; word-break: keep-all;}
/*.vis_con .vis_txt .vis_txt1,
.vis_con .vis_txt .vis_txt2{ opacity:1;filter:Alpha(opacity=0);  -webkit-transition:opacity 1.0s 0s, transform 1.0s 0s; -moz-transition:opacity 1.0s 0s, transform 1.0s 0s; -o-transition:opacity 1.0s 0s, transform 1.0s 0s; -ms-transition:opacity 1.0s, transform 1.0s 0s; transition:opacity 1.0s 0s, transform 1.0s 0s; }*/
.vis_con .vis_txt .vis_txt1{display:block;text-transform: uppercase;font-size: 10rem;font-weight: 200;line-height: 1;letter-spacing:-0.25px;color:#fff;margin-bottom: 5rem;font-style: italic;}
.vis_con .vis_txt .vis_txt1 b{display: inline-block;font-weight: 900;/* margin-top: 2rem; */}
.vis_con .vis_txt .vis_txt2{font-size: 2.2rem;letter-spacing:-0.5px;font-weight: 100;color:#fff;text-transform: uppercase;}

/* active */
.vis_con .swiper-slide.swiper-slide-active .visImg > div{-ms-transform: scale(1.0,1.0) rotate(0.002deg);-o-transform: scale(1.0,1.0) rotate(0.002deg);-moz-transform: scale(1.0,1.0) rotate(0.002deg); -webkit-transform: scale(1.0,1.0) rotate(0.002deg);  transform: scale(1.0,1.0) rotate(0.002deg);}
.vis_con .swiper-slide.swiper-slide-active .vis_txt .vis_txt1 {animation: textDwon 2s 0.5s forwards; opacity: 0}
.vis_con .swiper-slide.swiper-slide-active .vis_txt .vis_txt2 {animation: textUp 3.5s 1s forwards; opacity: 0}
@keyframes textUp {
	0% {transform: translateY(100%);opacity: 0;	}
	100% {transform: translateY(0);	opacity: 1;	}
}
@keyframes textDwon {
	0% {transform: translateY(-100%);opacity: 0;}
	100% {transform: translateY(0);	opacity: 1;	}
}
/* controls */
.vis_con .controls{text-align:center;justify-content: center;display: flex;align-items: center;position: absolute;left: 50%;top: inherit;bottom: 25rem;-ms-transform: translate(-50%, 0%);transform: translate(-50%, 0%);z-index: 2;} 
.vis_con .controls > div{display:flex;align-items: center;}
.vis_con .controls button{vertical-align:middle; display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-position:50% 50%; opacity:0.7;}
.vis_con .controls .swiper-pagination {width: auto;display: inline-block;vertical-align: middle;color: #fff;position: relative;left: inherit;top: inherit;bottom: inherit;right: inherit;text-align: left;font-weight: 200;/* text-shadow: 1px 1px 2px rgba(0, 0, 0,0.4); */}
.vis_con .controls .swiper-pagination-current{font-weight:600}
.vis_con .controls .btn{vertical-align:middle;display: inline-block;width:40px;height:40px;opacity:0.7;position: relative;left: inherit;top: inherit;bottom: inherit;right: inherit;margin: 0;}
.vis_con .controls .swiper-button-next:after, .vis_con .controls .swiper-button-prev:after{color:#fff;font-size:16px;line-height: 40px;display: block;width: 40px;}
.vis_con .controls .btn:hover,
.vis_con .controls .btn:focus{ opacity:1;}
.vis_con .controls .btn_play{position:relative;display: inline-block;width:40px;height: 40px;border-radius:40px;opacity: 1;font-size: 0;}
.vis_con .controls .btn_play:before{ content:'';display:block;width:100%;height: 40px;background-repeat:no-repeat;background-position:50% 50%;position: absolute;top: 0;left: 0;z-index: 1; background-image: url('../images/main/ico_play.svg');}
.vis_con .controls .btn_play.on:before{ background-image: url('../images/main/ico_stop.svg');}
.vis_con .dataSegm{position: relative;z-index: 9;background: transparent;border-radius: 0;display: flex;align-items: center;height: 32px;border-width: 1px 0;color: #fff;font-weight: 100;}
.vis_con .dataSegm span {display: inline-block;vertical-align:middle;box-sizing:border-box;position:relative;line-height:1;width: 15px;text-align: center;padding: 0 0.6rem 0 0;}
.vis_con .dataSegm .current {color: #fff;font-weight: 500;}
.vis_con .dataSegm .linkTxt {color: rgba(255,255,255,0.4);}
.vis_con .dataSegm .all {font-weight:300;/* color: rgba(255,255,255,0.8); */padding: 0 0 0 0.6rem;}
.vis_con .controls .swiper-progress-bar {position: relative;margin: 0 10px;width: 80px;height: 1px;background: rgba(255, 255, 255, .3);}
.vis_con .controls .swiper-progress-bar .slide_progress-bar {position: absolute;top: 0;left: 0;width: 0;height: 100%;background: #fff; transition: 0.1s width linear;}
.vis_con .controls .swiper-progress-bar.active .slide_progress-bar{transition: width controls; transition-delay: unset; width: 100%; transition-duration: 4s;}

@media only screen and ( max-width: 1024px ){	
	.vis_con .vis_txt .vis_txt1{font-size: 5.5rem;margin-bottom:3rem}
	.vis_con .vis_txt .vis_txt2{font-size:1.8rem;}
	.vis_con .controls {bottom: 25rem;}	
}
@media only screen and ( max-width: 768px ){/*
	.vis_con .swiper-slide .img_pc{display:none !important}
	.vis_con .swiper-slide .img_m{display:block !important;}*/	
	.vis_con .vis_txt .vis_txt1{font-size:4.5rem;margin-bottom: 2rem;}
	.vis_con .vis_txt .vis_txt2{font-size:1.6rem}
	.vis_con .controls{bottom: 30rem;}
}
@media only screen and ( max-width: 480px ){	
	.vis_con .vis_txt .vis_txt1{font-size:3.4rem;margin-bottom: 1.5rem;}
	.vis_con .vis_txt .vis_txt2{font-size:1.4rem;letter-spacing: 0;}
}


/****** sec01 ******/
.reserv_con{overflow: hidden;width: 100%;position: absolute;bottom: 25px;z-index: 10;}
.reservationBox{ overflow:hidden; height:100%;}
.reservationBox .btnGrp{margin: 0;}
.reservationBox .btnGrp .button,
.reservationBox .btnGrp a{background:#ffc637;color:#000;font-weight: 700;font-size:1.4em;display: block;width: 32.65%;float: left;line-height: 50px;height: 50px;text-align: center;margin: 0;margin-right: 1%;border-radius: 0;}

.reservationBox {}
.reservationBox dl{width: 100%;background-color: #fff;padding: 10px 0;display: block;overflow: hidden;margin-bottom: 10px;}
.reservationBox dl dt{color: #4c4c4c;font-size: 0.98em;font-weight: 700;line-height: 30px;display: block;float:left;width: 25%;text-align: center;}
.reservationBox dl dd{display: block;float:left;width: 75%;}
.reservationBox input {color: #333; font-weight: 400; border-left: 2px solid #e6e6e6;border: none;letter-spacing: -0.3px; position: relative;width: 90%;}
.reservationBox input.date{padding-left:30px;background: url('../images/board/ico_calendar.gif') no-repeat 10px 50%, url('../images/board/ico_arrow.gif') no-repeat 100% 50%;cursor: pointer;width: 100%;}
.reservationBox input.time{ padding-left:30px; background:url('../images/board/ico_clock.gif') no-repeat 10px 50%, url('../images/board/ico_arrow.gif') no-repeat 90% 50%;}
.reservationBox select.time{padding-left:30px;background:url('../images/board/ico_clock.gif') no-repeat 10px 50%, url('../images/board/ico_arrow.gif') no-repeat 90% 50%;}
.reservationBox select.time{cursor:pointer;border:none;width:100%;background-color:#fff;position:relative;-webkit-appearance: button;}
.reservationBox label {display: block;width: 100%;padding: 0 20px 0 0px;margin-bottom: 20px;min-height: 60px;background-color: #fff;}

.reservationBox dl label {border-left: 2px solid #e6e6e6;position: relative;min-height: 28px;color: #999;font-weight: 400;width:100%;margin: 0;}
.reservationBox label .txt{ text-align: right; float: right; line-height: 30px;}
.reservationBox dl .col2 label{width: 50%; float: left; padding: 0;}
.reservationBox dl .col2 input {width: 100%;} 
.reservationBox dl .col2_2{ padding-right:15px;}
.reservationBox dl .col2_2 label{width: 35%;float: left;padding: 0;}
.reservationBox dl .col2_2 label + label{border-left:0;width: 65%;}
.reservationBox dl .col2_2 input {width: 85%;} 
.reservationBox .checkBox{padding-left: 10px !important;display:block;}

.ui-timepicker-wrapper{width: 153px !important;}
.ui-timepicker-list{}
.ui-timepicker-list li{ font-size:0.98em;}
@media only screen and (max-width:1024px) {	
	.reserv_form{flex-direction:column;width: 96%;border-radius: 20px;}
	.reserv_form .from_wrap, .reserv_form .btn_wrap{width:100%;}
	.reserv_form .from_wrap{padding: 20px 0 0 0;background: none;}

	.reservationBox .btnGrp .button,
	.reservationBox .btnGrp a{ font-size:1.2em; height: 40px; line-height: 40px;}
	.ui-timepicker-wrapper{ width:auto !important;}
}


/* sec */
.sec{overflow:hidden;position: relative;padding: 10rem 0;word-break: keep-all;}
.sec .innerWrap{}
.sec .main_tit{font-size: 5.6rem;color: #131313;font-weight: 400;line-height: 1.3;margin-bottom: 6rem;}
.sec .newIcon{ width:auto; display: inline-block; vertical-align: middle;}
.sec a:hover{ text-decoration:none;}

/****** sec01 ******/
.sec01 .con_wrap{display:flex; gap:25px;}
.sec01 .con_wrap > div{width:50%;height: 420px;border-radius:35px;}
.sec01 .con_wrap > div:nth-child(2){padding: 0;height: 100%;}

.con01{background: #ebecf0;position: relative;padding: 5rem;}
.con01 .pic{margin-left:auto;position: absolute;right: 10px;bottom: 20px;}
.con01 .txt{position: relative;z-index: 1;}
.con01 .txt .tit{font-size:2rem; color:#222; opacity:0.6; margin-bottom:2rem; line-height:1}
.price_list{max-width: 350px;}
.price_list li{display:flex;align-items: baseline;font-size:2.3rem;color: #555;font-weight: 500;}
.price_list .price{margin-left:auto;font-size:3rem; color:#222; font-weight:700}
.con01 .txt .desc{margin-top:4rem;font-size:2.2rem;color: #676767;line-height: 1.7;}

/* banner */
.con02{display:flex; flex-direction:column; gap:25px;}
.con02 .banner {border-radius: 3rem 3rem 0rem 3rem;overflow: hidden;height: 50%;}
.con02 .banner a{display: flex;flex-direction: column;justify-content: center;padding: 4rem;min-height: 200px;position: relative;}
.con02 .banner a{}
.con02 .banner .tit{font-size:3rem;margin-bottom: 10px;color:#fff;font-weight:700;}
.con02 .banner .tit b{font-size:4rem;display: block;}
.con02 .banner .desc{ font-size:1.8rem; color:#fff;}
.con02 .banner .btn{display: block;width: 120px;height: 120px;background: url('../images/main/banner_link_w.png') no-repeat 100% 100%;background-size: contain;position: absolute;right: 0;bottom: 0;transition: all .3s 
ease-in-out;}

.banner01{flex: 2 1 33%;}
.banner01 a{height: 100%;background: var(--mainColor) url('../images/main/pic_loc.png') no-repeat 90% 75%;}
.con02 .banner.banner01 .btn{background-image: url('../images/main/banner_link_1.png');}
.banner02 a{background:var(--subColor) url('../images/main/pic_date.png') no-repeat 90% 75%;}
.con02 .banner.banner02 .btn{background-image: url('../images/main/banner_link_2.png');}


.sec02{background:#f3f4f4;}

.box_wrap {display: flex;flex-wrap: wrap;gap: 2.5rem;}
.box_wrap .box {background: #fff;box-shadow: 0 5px 15px rgba(0,0,0,0.1);text-align: center;border-radius: 35px;width: calc(25% - 2.5rem);flex: 1 1 20%;padding: 50px 35px;} .box_wrap .box .inner .ico{overflow: hidden;width: 100%;margin-bottom: 5rem;text-align: center;}
.box_wrap .box .tit {font-size: 2.5rem;font-weight: 600;color: #111;}
.box_wrap .box .desc {font-size: 1.6rem;font-weight: 400;color: #222; margin: 15px 0 0 0;}


.sec03{padding: 0 !important;}
.sec03 .innerWrap{ display:flex;}
.sec.sec03 .main_tit{color:#917153;font-size:1.8rem;font-weight:700;margin: 0 !important;line-height: 70px;background:url('../images/main/ico_bell.png') no-repeat 0 50%;background-size: 22px;padding-left: 30px;width: 150px;}

.noticeSwiper{width:calc(100% - 150px);}
.noticeSwiper .swiper-wrapper{width:calc(100% - 100px);}
.noticeSwiper .swiper-wrapper,
.noticeSwiper .swiper-slide{ height:70px;}
.noticeSwiper .swiper-slide a{display:flex;height: 100%;align-items: center;}
.noticeSwiper .swiper-slide a .tit{font-size:1.8rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.noticeSwiper .swiper-slide a .date{margin-left:auto;}

.noticeSwiper .controls {display: flex;align-items: center;justify-content: center;position: absolute;right: 0;top: 50%;transform: translate(0%, -50%);}
.noticeSwiper .controls button {width: 20px;height: 30px;display: flex;align-items: center;justify-content: center;background-repeat:no-repeat;background-position:50% 50%;background-size: auto; font-size:0;}
.noticeSwiper .controls .btn_prev{background-image: url('../images/common/ico_prev.svg');}
.noticeSwiper .controls .btn_next { background-image:url('../images/common/ico_next.svg'); }
.noticeSwiper .controls .btn_play{background-image: url('../images/common/ico_stop.svg');}
.noticeSwiper .controls .btn_play.on{ background-image: url('../images/common/ico_play.svg');}

@media only screen and (max-width:1024px) {
	/* sec */
	.sec{padding:7rem 0}
	.sec .main_tit{font-size: 2.25em;margin-bottom: 30px;}

	
	.sec01 .con_wrap{flex-direction:column;}
	.sec01 .con_wrap > div{width:100% !important;height: auto;border-radius: 25px;}
	.con01{padding: 3.5rem;}
	.con01 .pic img{max-width: 180px;}
	.con01 .txt .tit{font-size: 1.8rem;margin-bottom: 1rem;}
	.price_list{max-width: 260px;}
	.price_list li{font-size: 1.8rem;}
	.price_list .price{font-size: 2.25rem;}
	.con01 .txt .desc{font-size: 1.7rem;margin-top: 2rem;}

	.con02 .banner a{min-height:inherit;padding: 3.5rem;background-position: 90% 50%;background-size: 95px;}
	.con02 .banner .tit{font-size:2.2rem}
	.con02 .banner .desc{font-size:1.5rem}
	.con02 .banner .btn{background-size: 90px;}

	.box_wrap .box {border-radius: 25px;width: calc(33% - 2.5rem);max-width: 31.333%;flex: auto;padding: 3.5rem 1.5rem;} 
	.box_wrap .box .inner .ico{margin-bottom: 3.5rem;}
	.box_wrap .box .inner .ico img{max-width: 70px;}
	.box_wrap .box .tit {font-size: 2rem;}
	.box_wrap .box .desc {font-size: 1.5rem;}

	.sec.sec03 .main_tit,
	.noticeSwiper .swiper-slide a .tit{font-size:1.6rem;}
	.sec.sec03 .main_tit{width: 100px;}
	.noticeSwiper{width:calc(100% - 100px)}
	.noticeSwiper .swiper-wrapper{width: calc(100% - 70px);}

}
@media only screen and (max-width:768px) {
	#container{ margin-bottom:0;}
	
	/* sec */
	.sec{padding:5rem 0}
	.sec .main_tit{font-size: 2em;margin-bottom: 20px;}

	.sec01 .con_wrap{gap:15px}
	.sec01 .con_wrap > div{border-radius: 20px;}
	.con01{padding: 3rem 2.5rem;}
	.con01 .pic img{max-width: 120px;}
	.con01 .txt .tit{font-size: 1.5rem;margin-bottom: 0.75rem;}
	.price_list{max-width: 230px;}
	.price_list li{font-size: 1.6rem;}
	.price_list .price{font-size: 2rem;}
	.con01 .txt .desc{font-size: 1.5rem;margin-top: 1.5rem;}

	.con02{gap:1.5rem}
	.con02 .banner a{padding: 2.5rem;background-size: 75px;background-position: 83% 50%;}
	.con02 .banner .tit{font-size: 2rem;}
	.con02 .banner .desc{font-size: 1.4rem;max-width: 70%;}
	.con02 .banner .btn{background-size: 75px;}

	.box_wrap{gap:2rem}
	.box_wrap .box {border-radius: 20px;width: calc(50% - 2.5rem);max-width: 50%;padding: 3.5rem 1.5rem;} 
	.box_wrap .box .inner .ico{margin-bottom: 2rem;}
	.box_wrap .box .inner .ico img{max-width: 60px;}
	.box_wrap .box .tit {font-size: 1.8rem;}
	.box_wrap .box .desc {font-size: 1.5rem;margin: 10px 0 0 0;}

	.noticeSwiper .swiper-slide a .tit{font-size:1.5rem}

	
}
@media only screen and (max-width:480px) {
	.box_wrap .box {padding: 3rem 1.5rem;border-radius: 20px;width: 100%;max-width: inherit;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);}
	.noticeSwiper .swiper-slide a .date{display:none}
}