@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/*main banner*/
.main-bn-swip .s1{background-image:url(../img/main/image1.jpg);}
.main-bn-swip .s2{background-image:url(../img/main/image2.jpg);}
.main-bn-swip .s3{background-image:url(../img/main/image3.jpg);}
.main-bn-swip .s4{background-image:url(../img/main/image4.jpg);}
.main-bn-swip .s5{background-image:url(../img/main/image5.jpg);}
.main-bn-swip .s6{background-image:url(../img/main/image6.jpg);}
.main-bn-swip .s7{background-image:url(../img/main/image7.jpg);}
.main-bn-swip .s8{background-image:url(../img/main/image8.jpg);}
.main-bn-swip .s9{background-image:url(../img/main/image9.jpg);}
.main-bn-swip .s10{background-image:url(../img/main/image10.jpg);}
.main-bn-swip .s11{background-image:url(../img/main/image11.jpg);}
.main-bn-swip .s12{background-image:url(../img/main/image12.jpg);}
.main-bn-swip .s13{background-image:url(../img/main/image13.jpg);}
.main-bn-swip .s14{background-image:url(../img/main/image14.jpg);}
.main-bn-swip .s15{background-image:url(../img/main/image15.jpg);}
.main-bn-swip .s16{background-image:url(../img/main/image16.jpg);}
.main-bn-swip .s17{background-image:url(../img/main/image17.jpg);}
.main-bn-swip .s18{background-image:url(../img/main/image18.jpg);}
.main-bn-swip .s19{background-image:url(../img/main/image19.jpg);}
.main-bn-swip .s20{background-image:url(../img/main/image20.jpg);}


/*intro*/
#intro{
	width: 1400px;
	height: 1000px;
	margin: -80px auto 80px auto;
}
#intro .intro-in{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}
.intro-in .intro-l{ position:relative; width: 50%;}
.intro-in .intro-l .intro-deco{
	width: 208px;
	height: 240px;
	background-image: url(../img/deco-l.png);
    background-size:cover;
	position: absolute;
	top:270px;
	left: 0;
    opacity: .08;
}
.intro-in .intro-l .intro-deco2{
	width: 190px;
	height: 267px;
	background-image: url(../img/deco-r.png);
    background-size:cover;
	position: absolute;
	top:200px;
	right: 160px;
    opacity: .08;
}
.intro-in .intro-l .intro-txt{
	width: 100%;
	position: absolute;
	top:473px;
	left: 100px;
}
.intro-in .intro-l .intro-txt h3{
	font-family: "GowunBatang";
	font-size: 12px;
	color: #8c857a;
}
.intro-in .intro-l .intro-txt h2{
	font-family: "GowunBatang";
	font-size: 36px;
	font-weight: 700;
	color: #8c857a;
	margin-top: 20px;
	margin-bottom: 40px;
}
.intro-in .intro-l .intro-txt p{
	font-family: "AritaDotum";
	font-weight: 300;
	font-size: 14px;
	color: #8c857a;
	line-height: 24px;
}
.intro-in .intro-l .intro-btn{
	border-bottom: 2px solid #8c857a;
	padding-bottom: 10px;
	width: 60px;
	margin-top: 50px;
}
.intro-in .intro-l .intro-btn a{
	font-family: "AritaDotum";
	text-align: center;
	display: block;
	letter-spacing: 4px;
	font-size: 16px;
	color: #8c857a;
}
.intro-in .intro-r{ width:50%; position:relative; }
.intro-in .intro-r .right-img{ width:100%; filter: drop-shadow(10px 10px 5px #ccc); }
.intro-in .intro-r .right-img div.img{
	width: 680px;
	height: 900px;
	position: absolute;
	top:0;
	right: 0;
    background:url(../img/main/image20.jpg) 60% 20% no-repeat;
    background-size: cover;
}

/*rooms*/
#rooms{
	width: 100%;
	height: auto;
	background-color: #f3eee7;
    padding-top:70px;
    padding-bottom: 120px;
}
#rooms .room-in{
	width: 1400px;
	margin: 0px auto;
	position: relative;
}
#rooms .room-in .room-tit{
	margin: 0 auto;
	position: relative;
}
#rooms .room-in .room-tit h3{
	margin: 0 auto;
	font-family: "GowunBatang";
	font-size: 10px;
	font-weight: 400;
	text-align: center;
	color: #8c857a;
}
#rooms .room-in .room-tit h2{
	font-family: "GowunBatang";
	font-size: 36px;
	font-weight: 700;
	color: #8c857a;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}
#rooms .room-in .room-tit img{
	text-align: center;
	position: absolute;
	top:130px;
	left: 50%;
	transform: translateX(-50%);
}
.roomlst-con{ width:1400px; }

.room-in .roomlst-page{
	width: 100%;
	position: absolute;
	top:200px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
}
.roomlst-page .swiper-pagination-bullet{
	width: auto;
	background-color: transparent;
	opacity: 1;
}
.roomlst-page .swiper-pagination-bullet::after{
	margin-top: 60px;
	font-family: "AritaDotum";
	font-size: 18px;
	margin:0 40px;
	color: #8c857a;
	font-weight: 300;
	text-align: center;
}
.roomlst-page .swiper-pagination-bullet-active::after{
	color:#8c857a;
	font-weight: 600;
	border-bottom: 2px solid #8c857a;
	padding-bottom: 10px;
	text-align: center;

}
.roomlst-page .swiper-pagination-bullet:nth-child(1)::after{ content:'거실'; }
.roomlst-page .swiper-pagination-bullet:nth-child(2)::after{ content:'부엌'; }
.roomlst-page .swiper-pagination-bullet:nth-child(3)::after{ content:'침실'; }
.roomlst-page .swiper-pagination-bullet:nth-child(4)::after{ content:'테라스'; }
.roomlst-page .swiper-pagination-bullet:nth-child(5)::after{ content:'화장실'; }

.roomlst-con{
	width: 100%;
	padding: 150px 0 0;
}
.roomlst-swip{
	width: 100%;
	height: 100%;
}
.roomlst-swip .swiper-slide{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: space-around;
/*	background-color: #f3eee7;*/
}
.roomlst-conbx-img{ background-size:cover; background-position:center center; }
.roomlst-conbx-l{ width:60%; margin-top: 50px;}
.roomlst-conbx-l .roomlst-conbx-img{ width:100%; height: 500px;}
.roomlst-conbx-r{width: 40%;}
.roomlst-swip .swiper-slide.s1 .roomlst-conbx-l .roomlst-conbx-img{ background-image:url(http://jangsimwon.cdn1.cafe24.com/room/image7.jpg); }
.roomlst-swip .swiper-slide.s2 .roomlst-conbx-l .roomlst-conbx-img{ background-image:url(http://jangsimwon.cdn1.cafe24.com/room/image32.jpg); }
.roomlst-swip .swiper-slide.s3 .roomlst-conbx-l .roomlst-conbx-img{ background-image:url(http://jangsimwon.cdn1.cafe24.com/room/image13.jpg); }
.roomlst-swip .swiper-slide.s4 .roomlst-conbx-l .roomlst-conbx-img{ background-image:url(http://jangsimwon.cdn1.cafe24.com/room/image43.jpg); }
.roomlst-swip .swiper-slide.s5 .roomlst-conbx-l .roomlst-conbx-img{ background-image:url(http://jangsimwon.cdn1.cafe24.com/room/image22.jpg); }

.roomlst-con .roomlst-conbx-r{
	position: relative;
	margin-top: 100px;
}
/*.roomlst-con .roomlst-conbx-r .roomlst-conbx-txt{
	width: 100%;
}*/
.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit img{
	width: 50px;
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
}
.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit h2{
	font-family: "GowunBatang";
	font-weight: 400;
	font-size: 30px;
	margin-top: 50px;
	text-align: center;
	color: #8c857a;
}
.roomlst-conbx-r .roomlst-conbx-txt p{
	position: absolute;
	top:50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	color: #8c857a;
	text-align: center;
	line-height: 24px;
	font-family: 'AritaDotum';
	font-weight: 300;
	margin-top: 50px;
}
.roomlst-conbx-r .roomlst-conbx-txt div a{
	width: 200px;
	height: 50px;
	border:1px solid #8c857a;
	text-align: center;
	margin-top: 0px;
	position: absolute;
	bottom: 120px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	font-family: 'AritaDotum';
	font-weight: 500;
	line-height: 48px;
	color: #8c857a;
	transition: 0.3s;
}
.roomlst-conbx-r .roomlst-conbx-txt div a:hover{
	background-color: #8a857a;
	color:#fff;
	transition: 0.3s;
}

/*design*/
#design{
	width: 100%;
	height: 280px;
}
#design .design-in{
	width: 1400px;
	margin: 0 auto;
}
.clearfix::before{ content:''; clear:both; }
#design .design-in .design-img img{
	display: block;
	margin: 120px auto 40px auto;
}
#design .design-in .design-txt p{
	text-align: center;
	font-family: 'GowunBatang';
	font-size: 12px;
	font-weight: 100;
	color: #9c958b;
	line-height: 18px;
}

/*facility*/
#facility{
	width: 100%;
	height: auto;
	padding: 120px 0;
	background-color: #f7f6f4;
}
#facility .facility-in{
	width: 1400px;
	margin: 0 auto;
}
#facility .facility-in .facility-tit{
	margin:0 auto;
}
#facility .facility-in .facility-tit h3{
	font-family: 'AritaDotum';
	font-weight: 500;
	font-size: 13px;
	text-align: center;
	color: #8c857a;
}
#facility .facility-in .facility-tit h2{
	font-family: "GowunBatang";
	font-size: 28px;
	font-weight: 700;
	color: #8c857a;
	margin-top: 20px;
	text-align: center;
}
#facility .facility-in .fac-con{ width:100%; margin: 100px auto 0 auto; display:flex; justify-content:space-between;  }
#facility .facility-in .fac-con .fac-con-l{display:flex; width:50%; flex-direction:column;  float: left;}
#facility .facility-in .fac-con .fac-con-l p{ width: 80%; display: inline-block; font-family: "AritaDotum"; font-size: 14px; color: #8c857a; line-height: 1.2rem;}
#facility .facility-in .fac-con .fac-con-l p:nth-child(1){ display: block; font-family: "GowunBatang"; font-size: 24px; color: #8c857a; font-weight: 700!important; margin-bottom:20px; }
#facility .facility-in .fac-con .fac-con-r{display:flex; width:50%; flex-direction:column;  }
#facility .facility-in .fac-con .fac-con-r p{ width: 80%; display: inline-block; font-family: "AritaDotum"; font-size: 14px; color: #8c857a; line-height: 20px;}
#facility .facility-in .fac-con .fac-con-r p:nth-child(1){ display: block; font-family: "GowunBatang"; font-size: 24px; color: #8c857a; font-weight: 700; margin-bottom: 20px;}
.fac-btn{ border-bottom: 2px solid #8c857a; padding-bottom: 10px; width: 60px; margin: 0px 10px 0px 0px; float:right; }
.fac-btn a{ font-family: "AritaDotum"; text-align: center; display: block; letter-spacing: 4px; font-size: 16px; color: #8c857a; transition: 0.3s;}
.fac-btn:hover a{ transform:scale(1.1); font-weight: 700;}
#facility .facility-in .fac-con .fac-con-l .fac-con-l-txt{ margin: 0px 20px; }
#facility .facility-in .fac-con .fac-con-l .fac-con-l-txt p:nth-child(1){font-size:24px; font-family:"GowunBatang"; font-weight:400; margin-bottom:20px; }
#facility .facility-in .fac-con .fac-con-r .fac-con-r-txt{ margin: 0px 20px; padding-top:40px }
#facility .facility-in .fac-con .fac-con-l .fac-con-l-img{width:95%; height:600px; margin:40px auto; background:url(../img/sub3/1/image1.jpg) no-repeat; background-size:cover; background-position:center; }
#facility .facility-in .fac-con .fac-con-r .fac-con-r-img{width:95%; height:600px; margin:0px auto; background:url(../img/sub3/2/image1.jpg) no-repeat; background-size:cover; background-position:center; }


/*reservation*/
#res{
	width: 100%;
	height: 600px;
}
#res .res-in{
	width: 100%;
	margin:0 auto;
    position: relative;
}
#res .res-in .res-tit{
    position: absolute;
    width:100%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
#res .res-in .res-tit h2{
	font-family: 'Noto Serif CJK KR', serif;
	font-size: 48px;
	font-weight: 400;
	color:#fff;
	padding-bottom: 20px;
    line-height: 1.25em;
}
#res .res-in .res-tit h3{
	font-family: 'AritaDotum';
	font-size: 13px;
	text-align: center;
	padding-bottom: 50px;
	color:#fff;
	line-height: 1.5em;
}
#res .res-in .res-btn a{
	width: 230px;
	height: 50px;
	border:1px solid #fff;
	padding: 20px 50px;
	color: #fff;
	font-size: 18px;
	font-family: 'AritaDotum';
	font-weight: 500;
	transition: 0.3s;
}
#res .res-in .res-btn a:hover{
	background-color: #8c857a;
	color: #fff;
	border:1px solid #8c857a;
	transition: 0.3s;
}
.video{width:100%;}
.vid{position: relative; overflow: hidden; width: 100%; height: 600px; }
.vid:before{position: absolute; width: 100%; height: 100%; content: ""; display: block; }
#vid_box{ position:absolute; left:50%; top:50%; transform: translate3d(-50%, -50%, 0); object-fit: cover; min-width: 100%; min-height: 100%; max-width:3840px; max-height: 2160px; width: 1920px; height: 1080px; display: block; overflow: hidden; }
#vid_box iframe{ width: 100%; height: 100%; display: block; background:#000; background-repeat:no-repeat; background-position: 50% 50%; background-size: cover;}
.video-m-box { display: none; }




/********************반응형************************/
@media screen and (max-width: 1400px){
	/*intro*/
	#intro{ width:100%; height: 830px; padding:0px 30px; margin-top:30px; }
	.intro-in .intro-r .right-img div.img {width: 500px; height: 709px; transition: 0.8s;}
	.intro-in .intro-l .intro-deco{ top:50px; left: 30px;}
	.intro-in .intro-l .intro-txt{ top: 230px; left:80px; }
	.intro-in .intro-l .intro-txt h2{font-size: 35px;}
	.intro-in .intro-l .intro-txt p{ font-size:15px; }

	/*ROOMS*/
	#rooms{ height:auto; }
	#rooms .room-in{ width:90%;}
	.roomlst-conbx-l{ width:70%; height: 400px; padding-left:30px; }
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit img{ width:50px; }
	.roomlst-conbx-r .roomlst-conbx-txt p{ font-size: 12px; line-height:24px; }
	.roomlst-conbx-r .roomlst-conbx-txt div a{ width:180px; font-size:14px; top:210px; }
	.roomlst-con .roomlst-conbx-r{margin-top: 50px;}
	.roomlst-page .swiper-pagination-bullet::after{ font-size:16px; }

	/*design*/
	#design{ width:100%; }
	#design .design-in{ width:100%; }
	
	/*facility*/
	#facility{ width:100%; }
	#facility .facility-in{ width:95%; padding: 0px 0px; margin: 0 auto;}
	#facility .facility-in .faclist{ width:100%; }

	/*reservation*/
}
@media screen and (max-width: 1024px){
	/*intro*/
	#intro{ width:100%; height: 650px; padding:0px 30px; margin-top:0px;  }
	#intro .intro-in{ margin-top:0; }
	.intro-in .intro-r .right-img div.img {width: 400px; height: 567px; right: 0; transition: 0.8s;}
	.intro-in .intro-l .intro-deco{ width: 110px; height: 202px; background-size: 100% 100%; top:150px; left: 30px; display: none;}
	.intro-in .intro-l .intro-deco2{ display:none; }
	.intro-in .intro-l .intro-txt{ top: 130px; left: 0px; width: 100%; padding:0 30px; transition: 0.8s;}

	.intro-in .intro-l .intro-txt h2{font-size: 30px;}
	.intro-in .intro-l .intro-txt p{ font-size:12px; }

	/*ROOMS*/
	#rooms .room-in{ width:90%; }
	.roomlst-conbx-r .roomlst-conbx-txt p{ font-size: 10px; line-height:18px; margin-top: 30px;}
	.roomlst-page .swiper-pagination-bullet::after{ font-size:16px; }
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit{ margin-top:30px; }
	.roomlst-conbx-l .roomlst-conbx-img{ height:300px; }
	.roomlst-conbx-l{ width:80%; padding-left:30px; }
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit h2{ font-size: 24px; margin-top: 30px;}
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit img{ width:50px; }
	.roomlst-conbx-r .roomlst-conbx-txt div a{ width:150px; font-size:14px; top:150px; }
	.roomlst-con .roomlst-conbx-r{ margin-top: 20px; }

	/*Facility*/
	.facility-in .faclist .faclist-first .bbq .bbq-txt .bbq-txt-tit h2{ font-size:16px; }
	.facility-in .faclist .faclist-first .bbq .bbq-txt .bbq-txt-tit .bbq-btn a{font-size: 14px; padding-bottom: 0px;}
	.facility-in .faclist .faclist-first .bbq .bbq-txt .bbq-txt-tit{ margin-bottom:10px; }
	.facility-in .faclist .faclist-first .bbq .bbq-txt p{ font-size:10px; line-height:18px; }
	#facility .facility-in .fac-con .fac-con-l p{ width:80%; }
	#facility .facility-in .fac-con .fac-con-r p{ width:80%; }

    #res .res-in .res-tit{top:45%;}
    #res{ height: 500px; }
    .vid{ height: 500px; }
}
@media screen and (max-width: 780px){
	/*intro*/
	#intro{ width:100%; height: 1050px; padding:0px 15px; margin-top:0px; margin-bottom:0px; }
	#intro .intro-in{ margin-top:0; display: flex; justify-content:center; flex-direction:column;}
	#intro .intro-in .intro-r{ width:100%; position: relative; }
	#intro .intro-in .intro-r .right-img{ width:100%;}
	#intro .intro-in .intro-r .right-img div.img{ width: 95%; height: 60vh; position: absolute; right:0; left:50%; transform:translate(-50%); transition: 0.8s;}

	#intro .intro-in .intro-l{ width:100%; }
	#intro .intro-in .intro-l .intro-txt{ top: 480px; left: 50%; transform: translateX(-50%); width: 100%; padding:0 30px; transition: 0.8s; margin: 60px 0;}
	#intro .intro-in .intro-l .intro-txt h3{ text-align:center; font-size: 6px;}
	#intro .intro-in .intro-l .intro-txt h2{text-align: center; font-size: 28px; line-height: 36px;}
	#intro .intro-in .intro-l .intro-txt p{ text-align: center; font-size:12px; line-height:20px; }
	#intro .intro-in .intro-l .intro-btn{ margin: 50px auto; }

	/*ROOMS*/
	#rooms{ padding-bottom:70px; }
	#rooms .room-in{ width:100%;  }
	.roomlst-conbx-l{ height:auto; }
	.roomlst-page{width: 100%; margin: 0 auto;}
	.roomlst-con{ width:100%; margin-top: 120px; padding: 0px 30px; }
	.roomlst-conbx{ display:flex; justify-content:center; flex-direction:column; }
	.roomlst-conbx-r .roomlst-conbx-txt{ display:flex; justify-content:center; flex-direction:column; height:auto; }
	.roomlst-conbx-r .roomlst-conbx-txt p{ font-size: 12px; line-height:1.2rem; margin-top: 30px; width: 100%;}
	.roomlst-page .swiper-pagination-bullet::after{ font-size:14px; }
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit{ margin-top:30px; }
	.roomlst-conbx-l .roomlst-conbx-img{ width: 100%; height:270px; }
	.roomlst-conbx-l{ width:100%;  padding-left: 0px;}
	.roomlst-conbx-r{ width:100%;  margin: 0 auto;}
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit h2{ font-size: 24px; margin-top: 10px;}
	.roomlst-conbx-r .roomlst-conbx-txt .roomlst-tit img{ width:50px; }
	.roomlst-conbx-r .roomlst-conbx-txt div a{ width:150px; font-size:14px; top:150px; margin-top: 0px;}
	.roomlst-con .roomlst-conbx-r{ margin-top: 30px; margin-bottom: 150px;}
	.room-in .roomlst-page{ top: 170px; }
	#rooms .room-in .room-tit img{ width:90%; }
	.roomlst-page .swiper-pagination-bullet::after{ margin:0 10px; }

	/*facility*/
	#facility{ width:100%; height: auto;}
	#facility .facility-in{ width:95%; padding: 0px 0px; margin: 0 auto;}
	#facility .facility-in .faclist{ width:100%; display: flex; justify-content: center; flex-direction: column;}
	#facility .facility-in .facility-tit h2{ font-size:24px; }

	.fac-btn{ margin:0px; }

	#facility .facility-in .fac-con{ width: 95%; justify-content:center; flex-direction:column; }
	#facility .facility-in .fac-con .fac-con-l{ width:100%; }
	#facility .facility-in .fac-con .fac-con-l p{ width:70%; }
	#facility .facility-in .fac-con .fac-con-r p{ width:70%; }
	#facility .facility-in .fac-con .fac-con-r{ width:100%; }
	#facility .facility-in .fac-con .fac-con-l .fac-con-l-img{ width:95%; height:400px; }
	#facility .facility-in .fac-con .fac-con-r .fac-con-r-img{ width:95%; height:400px; }

	#facility .facility-in .fac-con .fac-con-r{ justify-content:center; flex-direction:column-reverse; }
	#facility .facility-in .fac-con .fac-con-r .fac-con-r-txt{ padding-top:0px; padding-bottom:40px; }

	#facility .facility-in .fac-con{ margin: 60px auto 0 auto; }

	/*design*/
	#design{ height:auto; margin:80px auto; }
	#design .design-in .design-img img{ width: 100px; margin:20px auto; }

	/*RESERVATION*/
	#res .res-in .res-tit h2{ font-size:30px; }
	#res .res-in .res-tit h3{ font-size: 12px; }
	#res .res-in .res-btn a{ font-size:14px; width:180px; }
    
    #res{ height: 420px; }
    .vid{ height: 420px; }
}
@media screen and (max-width: 500px){
    #res{ height: 360px; }
    .vid{ height: 360px; }
	#res .res-in .res-tit h3{ padding-bottom:40px; }
}