@charset "utf-8";

#contents_03{ margin-top:150px; }
#contents_03 .width_con{ height:300px; }

#main-bn{ width:100%; clip-path: polygon(0% 0%, calc(100% - 134px) 0, 100% 90px, 100% 100%, 0% 100%); position: relative; top:30px; }
#main-bn .main-swiper{ width:100%; display:block; height:95vh;z-index: -1; }
#main-bn .main-swiper .swiper-slide.img1{ background:url(../img/sub1/image1.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img2{ background:url(../img/sub1/image2.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img3{ background:url(../img/sub1/image3.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img4{ background:url(../img/sub1/image4.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img5{ background:url(../img/sub1/image5.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img6{ background:url(../img/sub1/image6.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img7{ background:url(../img/sub1/image7.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img8{ background:url(../img/sub1/image8.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img9{ background:url(../img/sub1/image9.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img10{ background:url(../img/sub1/image10.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img11{ background:url(../img/sub1/image11.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img12{ background:url(../img/sub1/image12.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img13{ background:url(../img/sub1/image13.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img14{ background:url(../img/sub1/image14.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img15{ background:url(../img/sub1/image15.jpg); background-size:cover; background-position:center; display:block; }

/*Detail View*/
#detail{ width:100%; }
#detail .detail-wrap{ width:100%; margin:0 auto; }

#detail .detail-wrap .room-lst{ margin-top:60px; display:flex; justify-content:space-between; }

#detail .detail-wrap .room-lst .detail-room{ width:50%; height: 500px; margin-right:20px; clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 120px), calc(100% - 120px) 100%, 0% 100%); background-color: #ccc;}

#detail .detail-wrap .room-lst .detail-room:nth-child(1){ background: url(../img/sub1/image4.jpg)no-repeat; background-size: cover; background-position: center;}
#detail .detail-wrap .room-lst .detail-room:nth-child(2){clip-path: polygon(0% 0%, 100% 0, 100% 100%, 120px 100%, 0 calc(100% - 120px));  background: url(../img/sub1/image5.jpg)no-repeat; background-size: cover; background-position: center;}
#detail .detail-wrap .room-lst:last-child{ margin-top:30px; }
#detail .detail-wrap .room-lst:last-child .detail-room:nth-child(1){ clip-path: polygon(0% 0%, calc(100% - 120px) 0, 100% 120px, 100% 100%, 0% 100%); background: url(../img/sub1/image7.jpg)no-repeat; background-size: cover; background-position: center;}
#detail .detail-wrap .room-lst:last-child .detail-room:nth-child(2){ clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%, 0 120px); background: url(../img/sub1/image9.jpg)no-repeat; background-size: cover; background-position: center;}

/*list*/
#pen-list{ width:100%; margin:150px auto;}
#pen-list .list-in{ display:flex; justify-content:space-around; }
#pen-list .list-in .list{ width:33.333%; margin-right: 30px;}
#pen-list .list-in .list:last-child{ margin-right: 0px;}
#pen-list .list-in .list a{ display:block; }
#pen-list .list-in .list a .lst-img{ position: relative; top: 0; left: 0; width:100%; height:350px; background:url(../img/sub2/1/image4.jpg) no-repeat; background-size:cover; background-position:center; margin-bottom:30px; }
#pen-list .list-in .list:nth-child(2) a .lst-img{ background:url(../img/sub3/1/image1.jpg) no-repeat; background-size:cover; background-position:center; }
#pen-list .list-in .list:nth-child(3) a .lst-img{ background:url(../img/sub5/1.jpg) no-repeat; background-size:cover; background-position:center; }
#pen-list .list-in .list a .lst-img .more{ display: none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width: 120px; height:50px; background-color:#fff; opacity:0.7; border-radius: 30px; transition: all 0.5s ease-in-out;}
#pen-list .list-in .list a:hover .lst-img .more{ display:block; transition: all 0.5s ease-in-out; }
#pen-list .list-in .list a .lst-img .more p{ width: 100%; opacity: 1; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#pen-list .list-in .list a .lst-img .more p i{ vertical-align: middle; padding-left: 10px;}
#pen-list .list-in .list .lst-txt h2{ text-align:center; font-size:24px; font-family: 'Cormorant Garamond', serif; font-weight: 500; margin-bottom: 10px;}
#pen-list .list-in .list .lst-txt p{ text-align:center; font-size:14px; font-weight:300; }

/*반응형*/
@media all and (max-width: 1024px){
	#pen-list{ margin:100px auto; }
	#pen-list .list-in .list a .lst-img{ height:200px; }
}
@media all and (max-width: 768px){
	#pen-list .list-in{ flex-direction:column; }
	#pen-list .list-in .list{ margin-right:0; margin-bottom:30px; width:100%; }
	#pen-list .list-in .list a .lst-img{ height:300px; }

	#detail .detail-wrap .room-lst .detail-room{ height:300px; }
}
@media all and (max-width: 520px){
	#main-bn .main-swiper{ height:50vh; }

	#detail .detail-wrap .room-lst{ flex-direction:column; }
	#detail .detail-wrap .room-lst .detail-room{ width:100%; margin-right:0px; margin-bottom:30px; clip-path:none; }
	#detail .detail-wrap .room-lst .detail-room:nth-child(2), 
	#detail .detail-wrap .room-lst:last-child .detail-room:nth-child(1), 
	#detail .detail-wrap .room-lst:last-child .detail-room:nth-child(2){ clip-path:none; }

	#detail .detail-wrap .room-lst:last-child{ margin-top:0px; }
}