@charset "utf-8";

/*main-bn*/
.main-bn-swip .swiper-slide{background-size: cover; background-repeat: no-repeat;}
.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{ position:relative; width: 100%; height:100vh; }
.main-bn .main-bn-in{ width:100%; height:100%; }
.main-bn-swip{ width:100%; height:100%; }
.main-bn-swip .swiper-slide{ width:100%; height:100vh !important; background-size:cover; background-position:center; }
.main-bn-con{ position:absolute; top:80%; left:50%; transform:translate(-50%, -50%); z-index:99; text-align:center; }
.main-bn-con h2 span{ color:#fff; font-size:60px; font-family: "Playfair Display", serif; display:block; text-shadow: 0 1px 3px rgba(0,0,0,.5);}

.swiper-pagination{ margin:0 auto; left:50%; transform:translateX(-50%) !important; font-size:16px !important; }
.swiper-pagination .swiper-pagination-bullet{ background-color:#333; opacity:0.3; }
.swiper-pagination .swiper-pagination-bullet-active{background-color:#afafaf;opacity:1;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 30px !important; }

.main-bn-next{ position:absolute; bottom: 18px; right: 47%; transform: translateX(-50%); z-index:999; }
.main-bn-prev{ position:absolute; bottom: 18px; left: 47%; transform: translateX(-50%); z-index:999; }
.main-bn-next i, .main-bn-prev i{ color:#fff; }

/*intro*/
.intro{ width:100%;}
.intro .intro-in{ width:1400px; margin:80px auto; position: relative;display: flex; justify-content: space-between;}
.intro .intro-in .intro-tit{ position:absolute; top:0px; left:0; z-index: 99;}
.intro .intro-in .intro-tit h2 span{ font-size:60px; display:block; font-family: "Playfair Display", serif; font-weight:500; position:relative; mix-blend-mode: color-dodge; text-shadow: 4px 2px 3px #fff;}
.intro .intro-in .intro-tit p{ margin-top: 30px; }
.intro .intro-in .intro-tit p span{ display:block; font-size: 16px; font-weight:400; line-height:24px; color:#666; }

.intro .intro-in .intro-img{ padding-top:70px; position: relative; top: 0; left:50%; transform:translateX(-50%); display: flex; justify-content: center; z-index: 9;}
.intro .intro-in .intro-img .img-l{ width:240px; height:280px; background-color: yellow; position: relative; bottom: -500px; right: -90px; background:url(../img/main/image9.jpg) no-repeat; background-size: cover; background-position: center;}
.intro .intro-in .intro-img .img-c{ width:600px; height:700px; background-color: skyblue; background:url(../img/main/image4.jpg) no-repeat; background-size: cover; background-position: center;}
.intro .intro-in .intro-img .img-r{ width:240px; height:280px; background-color: yellow; position: relative; top: 30px; left: -90px; background:url(../img/main/image11.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}

.intro .intro-in .intro-txt-r{ position:absolute; bottom:0; right:0; margin-right:30px; z-index: 99;}
.intro .intro-in .intro-txt-r p{ margin-bottom: 40px; }
.intro .intro-in .intro-txt-r p span{ display:block; font-size:16px; color:#666; font-weight:400; line-height:24px; }
.intro .intro-in .intro-txt-r .btn { border: 1px solid #b2b1a8; width:180px; height:50px; border-radius: 25px;}
.intro .intro-in .intro-txt-r .btn a{ display: block; font-family: 'JejuMyeongjo'; font-size:16px; line-height:50px; text-align:center; color:#5d5d5d; transition:all 0.3s ease-in-out; }
.intro .intro-in .intro-txt-r .btn a:hover{ letter-spacing:2px; }

/*rooms*/
#price{ display:none; }

.rooms{ width:100%; height: 600px; margin: 200px auto 120px; background-color: #666;}
.rooms .rooms-in{ width:1400px; height: 0; margin: 0 auto; position:relative;top:0; left:0; }

.rooms .roomslst-img{ position:relative; width:100%; height: 100%; background-size:cover; background-position:center; z-index: 1; overflow: hidden;}
.rooms .roomslst-img-swip{ width:100%; height:100%; }
.rooms .roomslst-img-swip .swiper-slide{ width:100%; height:100%; background-size:cover; background-position:center; }
.roomslst-img-swip .s1{ background:url(http://naerimong.cdn1.cafe24.com/sub2/1/image1.jpg) no-repeat; }
.roomslst-img-swip .s2{ background:url(http://naerimong.cdn1.cafe24.com/sub2/1/image3.jpg) no-repeat; }
.roomslst-img-swip .s3.swiper-slide{ background:url(http://naerimong.cdn1.cafe24.com/sub2/2/image1.jpg) no-repeat; background-position: 50% 75%; }
.roomslst-img-swip .s4{ background:url(http://naerimong.cdn1.cafe24.com/sub2/3/image1.jpg) no-repeat; }
.roomslst-img-swip .s5{ background:url(http://naerimong.cdn1.cafe24.com/sub2/4/image1.jpg) no-repeat; }
.roomslst-img-swip .s6{ background:url(http://naerimong.cdn1.cafe24.com/sub2/3/image3.jpg) no-repeat; }
.roomslst-img-swip .s7{ background:url(http://naerimong.cdn1.cafe24.com/sub2/5/image1.jpg) no-repeat; }

.rooms .rooms-in .roomslst-txtbx{ width:450px; height:600px; background-color: rgba(0, 0, 0, 0.4); position:relative; top:-600px; left:0;z-index:2; }
.rooms .rooms-in .roomslst-txtbx .roomslst-txtbx-con{ width:50%; position:relative; }
.roomslst-txt-swip{ width:100%; height:100%; overflow:visible; margin-bottom:0px; }
.roomslst-txt-swip .swiper-slide{ width:100%; height:100%; }
.roomslst-txt-swip .swiper-slide .con-tit{ margin:60px 0px 0px 30px; }
.roomslst-txt-swip .swiper-slide .con-tit h3{ font-size:14px; color:#fff; font-weight: 400;}
.roomslst-txt-swip .swiper-slide .con-tit h2{ font-size:48px; color:#fff; font-family: "Playfair Display", serif; font-weight:500;}
.roomslst-txt-swip .swiper-slide .con-txt{ margin: 50px 0px 0px 30px; }
.roomslst-txt-swip .swiper-slide .con-txt p{ font-size: 16px; color:#fff; margin-bottom:20px; }
.roomslst-txt-swip .swiper-slide .con-txt p span{ display: block; font-size: 14px; line-height: 1.5em; color:#fff; }
.roomslst-txt-swip .swiper-slide .con-txt p:first-child span{ display: inline; font-size: 16px; line-height: 1.5em; color:#fff; }

.roomslst-txt-swip .swiper-slide .btn{ margin:50px 0px 0px 30px; border: 1px solid #fff; border-radius: 25px; width: 150px; height: 50px;}
.roomslst-txt-swip .swiper-slide a{ display: block; line-height: 50px; text-align: center; font-family: 'JejuMyeongjo'; font-size:16px; text-align:center; color:#fff; transition:all 0.3s ease-in-out; }
.roomslst-txt-swip .swiper-slide a:hover{ letter-spacing:2px; }

.roomslst-page{ color:#fff; }
.swiper-pagination-fraction{ color:#fff !important; text-align:center;position:absolute; bottom:15px !important; left:50%; transform:translateX(-50%); font-size:16px; }

.swiper-button-next, .swiper-button-prev{ position:absolute; top:94.3% !important; }
.swiper-button-next i, .swiper-button-prev i{color: #fff; font-size: 20px;}
.swiper-button-next{ right:35% !important; }
.swiper-button-prev{ left:35% !important; }
.swiper-button-prev:after{ display: none;}
.swiper-button-next:after{ display: none;}

/*.swiper-wrapper{ overflow:hidden; }*/

/*faclst*/
.faclst{ width:100%; margin-bottom:120px; }
.faclst .faclst-in{ width:1400px; margin:0 auto; }
.faclst .faclst-in .faclst-tit h3{ color:#666666; text-align:center; margin-bottom:10px; font-weight:400; }
.faclst .faclst-in .faclst-tit h2{ text-align:center; font-family: "Playfair Display", serif; font-size: 48px; font-weight:500;  }

.faclst .faclst-in .faclst-img{ margin-top:80px; display:flex; justify-content:center; }
.faclst .faclst-in .faclst-img .img-l{ width:50%; height: 690px; background:url(../img/sub3/1/image3.jpg) no-repeat; background-size: cover; background-position: center; margin-right: 20px; position: relative;}

.img-ho{ /*visibility: hidden;*/ opacity: 0; overflow: hidden; background-color:rgba(0, 0, 0, 0.35); width: 100%; height: 0%; position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; transition: all 0.5s ease-in-out; }
.img-ho .img-txt{ padding: 0px 0px 0 30px; }
.img-ho .img-txt h2{ font-family: 'JejuMyeongjo'; font-size:30px; color:#fff; margin-bottom:20px; }
.img-ho .img-txt p span{ display:block; font-size:16px; font-weight:400; color:#fff;  }
.img-ho .btn{ margin-right:30px; border:1px solid #fff; border-radius: 25px; width: 150px; height: 50px;}
.img-ho .btn span{ display: block; font-family: 'JejuMyeongjo';font-size:16px; text-align:center; line-height:50px; color:#fff; transition:all 0.3s ease-in-out; }
.img-ho .btn span:hover{ letter-spacing:1px; }

.img-a{ display:block; width:100%; height:100%; }

.faclst .faclst-in .faclst-img .img-l:hover .img-ho{ opacity: 1; height: 26%; transition: all 0.5s ease-in-out;}

.faclst .faclst-in .faclst-img .img-r{ width:50%; height: 690px; display:flex; justify-content:center; flex-direction:column;}
.faclst .faclst-in .faclst-img .img-r .imglst{ display:flex; justify-content:center;margin-bottom:20px;   }
.faclst .faclst-in .faclst-img .img-r .imglst:last-child{ display:flex; justify-content:center;margin-bottom:0px; }
.faclst .faclst-in .faclst-img .img-r .imglst .img-con{ margin-right:20px; width:50%; height: 335px; background-color:#afafaf; position: relative; top: 0; left: 0;}
.faclst .faclst-in .faclst-img .img-r .imglst:first-child .img-con:first-child{ background:url(../img/sub3/2/image4.jpg) no-repeat; background-size:cover; background-position:center; }
.faclst .faclst-in .faclst-img .img-r .imglst:first-child .img-con:last-child{ background:url(../img/sub3/3/image2.jpg) no-repeat; background-size:cover; background-position:center; margin-right: 0px;}
.faclst .faclst-in .faclst-img .img-r .imglst:last-child .img-con:first-child{ background:url(../img/sub3/4/image1.jpg) no-repeat; background-size:cover; background-position:center; }
.faclst .faclst-in .faclst-img .img-r .imglst:last-child .img-con:last-child{ background:url(../img/sub3/5/image1.jpg) no-repeat; background-size:cover; background-position:center; margin-right: 0px;}

/*.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho{ width:100%; position: absolute; bottom: 0; left: 0; background-color:rgba(0, 0, 0, 0.35); }*/
.faclst .faclst-in .faclst-img .img-r .imglst .img-con:hover .img-ho{ opacity: 1; height: 26%; transition: all 0.5s ease-in-out;}

.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt{ padding: 0px 0px 0px 20px; }
.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt h2{ font-size:20px; margin-bottom:0; }
.img-ho .btn{ margin-right:20px; border:1px solid #fff; border-radius: 25px; width: 120px; height: 40px;}
.img-ho .btn span{ display: block; font-family: 'JejuMyeongjo';font-size:14px; text-align:center; line-height:40px; color:#fff; }



/*banner*/
.banner{ width:100%; background: transparent; margin:0 auto; background-size: cover; background-position: center;}
.banner .banner-in{ width:100%; margin:0 auto; display: flex; justify-content: center; flex-direction:column; align-items: center; position:relative;}
.banner .banner-in .banner-txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.banner .banner-in .banner-txt .ban-ico i{ display: block; font-size:40px; text-align:center; color:#fff; text-shadow:2px 3px 2px rgba(0,0,0,.8); margin: 0 auto; padding-bottom: 20px;}

.banner .banner-in .banner-txt p{ margin-bottom:30px; }
.banner .banner-in .banner-txt p span{ display:block; font-size:16px; font-weight:300; line-height:1.5em; color: #fff; text-align: center; text-shadow:2px 3px 2px rgba(0,0,0,.8); }

.banner .banner-in .btn2{ width:120px; margin: 0 auto; text-align: center; border-bottom: 1px solid #fff; padding-bottom: 10px; text-shadow:2px 3px 2px rgba(0,0,0,.8);}
.banner .banner-in .btn2 a{ color: #fff; text-align: center; letter-spacing: 1px; transition: all 0.3s ease-in-out;}
.banner .banner-in .btn2 a:hover{ letter-spacing: 2px;}
.banner .vid{position: relative; overflow: hidden; width: 100%; height: 100%; }
.banner .vid:after{position: absolute; width: 100%; height: 100%; content: ""; display: block; background:transparent;}

.banner #vid_box{ position:absolute; left:50%; top:50%; transform: translate3d(-50%, -50%, 0); object-fit: cover; min-width: 100%; min-height: 100%; display: block; overflow: hidden; }
.banner #vid_box iframe{ width: 100%; height: 100%; display: block; background:#000; background-repeat:no-repeat; background-position: 50% 50%; background-size: cover;}

/**********************************************반응형********************************************************/

@media all and (max-width: 3840px){
    .banner #vid_box{width: 100%; height:2160px;}
    .banner .banner-in{height: 1100px;}
}

@media all and (max-width: 2560px){
    .banner #vid_box{width: 100%; height:1440px;}
    .banner .banner-in{height: 900px;}
}

@media all and (max-width: 1920px){
    .banner #vid_box{width: 100%; height:1080px;}
    .banner .banner-in{height: 700px;}
}

@media all and (max-width: 1024px){
    .banner #vid_box{width: 1024px; height:576px;}
    .banner .banner-in{height: 550px;}
}

 @media all and (max-width: 768px){
    .banner #vid_box{width: 800px; height:450px;}
    .banner .banner-in{height: 400px;}
} 

@media all and (max-width: 446px){
    .banner #vid_box{width: 560px; height:320px;}
    .banner .banner-in{height: 300px;}
}

@media all and (max-width: 1400px){
	.main-bn-con{ width:100%; }
	.main-bn-con h2 span{ font-size:48px; }

	.intro .intro-in{ width:95%; }
	.rooms .rooms-in{width:95%;}

	.faclst .faclst-in{ width:95%; }
	.banner .banner-in{ width:100%; }

	.intro .intro-in .intro-img .img-c{ width:500px; height:600px; }
	.intro .intro-in .intro-img .img-r{ width:200px; height:240px; left:-60px; }
	.intro .intro-in .intro-img .img-l{ width:200px; height:240px; right:-60px; }

	.banner .banner-in{ width:100% !important; }
}

@media all and (max-width: 1200px){
	.intro .intro-in .intro-txt-r{ margin-right:0px; }
	.intro .intro-in .intro-txt-r p span{ font-size:14px; }

	.intro .intro-in .intro-tit h2 span{ font-size:48px; }
	.intro .intro-in .intro-tit p span{ font-size:14px; }
}
@media all and (max-width: 1024px){

	.main-bn-next{ right:45%; }
	.main-bn-prev{ left:46.5%; }
    
	.intro .intro-in{ flex-direction:column; }
	.intro .intro-in .intro-tit{ position:static; }
	.intro .intro-in .intro-img{ position:static; flex-direction:column; transform:none; }
	.intro .intro-in .intro-img .img-l{ position:static; width:100%; height:400px; margin-bottom:30px; }
	.intro .intro-in .intro-img .img-c{ position:static; width:100%; height:400px; margin-bottom:30px; }
	.intro .intro-in .intro-img .img-r{ position:static; width:100%; height:400px; margin-bottom:0px; }
	.intro .intro-in .intro-txt-r{ position:static; margin-top:80px; }
	.intro .intro-in .intro-tit h2{ text-align:center; }
	.intro .intro-in .intro-tit h2 span{ text-align:center; display:inline-block; }
	.intro .intro-in .intro-tit p span{ font-size:16px; text-align: center;}
	.intro .intro-in .intro-txt-r p span{ font-size:16px; text-align:center; }
	.intro .intro-in .intro-txt-r .btn{ margin:0 auto; }

	/*rooms*/
	.rooms{ margin: 120px auto; }

	/*facility*/
	.faclst .faclst-in .faclst-img{ flex-direction:column; }
	.faclst .faclst-in .faclst-img .img-l{ width:100%; }
	.faclst .faclst-in .faclst-img .img-r{ width:100%; margin-top:20px; }

	.img-ho{ opacity:1; height:26%; }
}
@media all and (max-width:768px){
	.main-bn{ height:calc(100vh - 80px); margin-top:80px; }
	.main-bn-con h2 span{ font-size:24px; }

	.main-bn-next{ right:43%; }
	.main-bn-prev{ left:44%; }

	.intro .intro-in .intro-tit h2 span{ font-size:36px; }
	.intro .intro-in .intro-tit p span{ font-size:14px; }
	.intro .intro-in .intro-txt-r p span{ font-size:14px; }

	.rooms .rooms-in{ width:100%; }
	.rooms .rooms-in .roomslst-txtbx{ width:100%; }

	.faclst .faclst-in .faclst-img .img-l{ height:450px; }
	.img-ho .img-txt h2{ font-size:24px; }
	.img-ho .img-txt p span{ font-size:11px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt{ width:50%; padding:0; }
	.img-ho .btn{ width: 100px; height: 30px; margin-right: 10px;}
	.img-ho .btn a{ font-size:12px; line-height:30px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt h2{font-size: 16px; padding-left: 10px;}

	.faclst .faclst-in .faclst-tit h2{ font-size:36px; }
/*	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt{ width:100%; }*/
	.img-a h2{width:100%; height:100%; }

	.img-ho .img-txt{ padding: 0px 0px 0 10px; }
	.img-ho .btn span{ line-height:30px; }

}

@media all and (max-width: 426px){ 
	.main-bn-next{ right:40%; }
	.main-bn-prev{ left:41%; }

	.faclst .faclst-in .faclst-img .img-r{ height:520px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con{ height:250px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt{ width:100%; }

	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt h2{ padding-left:6px; font-size:13px; } 
	.img-ho .btn{ width: 90px; height: 30px; margin-right: 6px;}

}

@media all and (max-width: 375px){
	.main-bn-next{ right:38%; }
	.main-bn-prev{ left:39%; }

	.img-ho .btn{ display:none; }
	.img-ho .img-txt{ padding: 0px 0 0 10px; }
	.faclst .faclst-in .faclst-img .img-r{ height:420px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con{ height:200px; }
	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt{ width:100%; }
	.img-a{ display:block; width:100%; height:100%; }
/*	.faclst .faclst-in .faclst-img .img-r .imglst .img-con .img-ho .img-txt h2{ margin-top:20px;}*/

	.banner .banner-in .banner-txt p span{ font-size:14px; }
}