@charset "utf-8";

#roomList{position:relative;padding:0 0 0 210px}
#roomList::before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:423px;background:rgba(176, 159, 141, 0.25)}
#roomList .all_wrap{position:relative}
#roomList .all_wrap::before{content:"";display:inline-block;position:absolute;right:210px;top:0;width:1px;height:100%;background:rgba(120,102,89,0.25)}
#roomList .all_wrap::after{content:"";display:inline-block;position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(120,102,89,0.25)}

/* 타이틀 */
#roomList .tit_area{display:flex;align-items:flex-start;padding:0 0 100px 0;text-transform:uppercase}
#roomList .tit_area div{width:750px;padding-left:165px}
#roomList .tit_area div b{font-size:14px;font-weight:400;color:var(--primary);opacity:0.6;font-family:var(--e-font)}
#roomList .tit_area div p{padding-top:20px;font-size:41px;font-weight:300;line-height:1.2;color:var(--primary);font-family:var(--e-font)}
#roomList .tit_area div p span{display:block;font-weight:300;line-height:1;color:var(--point)}
#roomList .tit_area > b{padding-top:60px;font-weight:400;white-space:pre-line}

/* 슬라이드 */
#roomList .room_slide{height:720px;padding-bottom:220px}
#roomList .room_slide > li{display:flex;position:relative;pointer-events:unset}
#roomList .room_slide > li .img{opacity:0;transform:translateX(-60px);width:750px;background:center no-repeat;background-size:cover;transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1)}
#roomList .room_slide > li .img01{background:url(/sh_img/include/inc_room/img/img01.jpg) no-repeat}
#roomList .room_slide > li .img02{background:url(/sh_img/include/inc_room/img/img02.jpg) no-repeat}
#roomList .room_slide > li .img03{background:url(/sh_img/include/inc_room/img/img03.jpg) no-repeat}
#roomList .room_slide > li .info{opacity:0;transform:translateX(60px);display:flex;flex-flow:column;position:relative;width:calc(100% - 750px);padding:238px 0 0 100px;border-top:1px solid rgba(120, 102, 89, 0.25);transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1)}
#roomList .room_slide > li .info .name{padding-bottom:20px;font-size:38px;font-weight:300;color:var(--point);text-transform:uppercase;font-family:var(--e-font)}
#roomList .room_slide > li .info .desc{padding-top:60px;color:var(--point);opacity:0.7;word-break:keep-all;white-space:pre-line}
#roomList .room_slide > li .info ul{display:flex;align-items:center;gap:35px}
#roomList .room_slide > li .info ul li{display:flex;position:relative;color:var(--point);opacity:0.7}
#roomList .room_slide > li .info ul li::before{content:"";display:inline-block;position:absolute;top:50%;transform:translateY(-50%);right:-15px;width:1px;height:9px;background-color:rgba(0, 0, 0, 0.2)}
#roomList .room_slide > li .info ul li:last-child::before{display:none}
#roomList .room_slide > li .info ul li span{width:25%;font-weight:600;color:var(--point);opacity:0.7}
#roomList .room_slide > li.on .img{opacity:1;transform:translateX(0)}
#roomList .room_slide > li.on .info{opacity:1;transform:translateX(0)}



/* 페이저 */
#roomList .wrap{position:relative}
#roomList .tabs{display:flex;align-items:center;justify-content:center;position:absolute;right:290px;top:73px;z-index:10;text-align:center;line-height:35px;font-size:15px;font-weight:300;color:var(--point)}
#roomList .swiper-pagination-bullet{position:relative;width:60px;height:35px;border-radius:100%;font-size:15px;color:var(--point);font-weight:300;background:none;opacity:1;font-family:var(--e-font)}
#roomList .swiper-pagination-bullet::before{content:"";display:inline-block;position:absolute;top:48%;left:50%;transform:translate(-50%, -50%);width:35px;height:35px;z-index:-99;border-radius:100%;background:rgba(176,159,141,0.25);opacity:0;transition:0.2s}
#roomList .swiper-pagination-bullet.on::before{opacity:1}

/* btn */
#roomList .room_btn{display:block;position:relative;z-index:999;margin-top:100px;text-transform:uppercase;color:var(--point);cursor:pointer;font-family:var(--e-font)}
#roomList .room_btn span{display:inline-block;padding:0 20px;transition:0.2s}
#roomList .room_btn{display:block;position:absolute;bottom:120px;z-index:999;}
/* 반응형 [s] */
@media (hover:hover){
#roomList .room_btn:hover span{padding:0 30px}
}
@media (max-width:1680px){
#roomList{padding:0 0 0 130px}
#roomList .all_wrap::before{right:130px}
/* #roomList .tit_area div{padding-left:125px;width:665px}
#roomList .tit_area div p{font-size:68px} */
#roomList .tit_area{flex-direction:column;padding-bottom:65px;padding-left:20px}
#roomList .tit_area > b{padding-top:20px;font-size:14px}
#roomList .tit_area div{padding-left:0px;width:auto}
#roomList .tit_area div p{padding-top:15px;font-size:38px}
#roomList .room_slide > li .img{width:43%}
#roomList .room_slide > li .info{padding:220px 0 0 85px;transform:none;width:57%}
#roomList .tabs{right:190px}
}
@media (max-width:1380px){
#roomList{padding:0 0 0 90px}
#roomList .all_wrap::before{right:90px}
#roomList .room_slide > li .img{width:42%}
#roomList .room_slide > li .info{padding:220px 0 0 65px;width:58%}
#roomList .tabs{right:125px}
}
@media (max-width:1180px){
#roomList{padding:0 0 0 40px}
#roomList .all_wrap::before{right:40px}
}
@media (max-width:1024px){
#roomList::before{height:280px}
#roomList .room_slide{padding-bottom:125px;height:455px}
#roomList .room_slide > li .img{transform:translateX(-30px);width:48%}
#roomList .room_slide > li .info{padding:90px 0 0 45px;width:52%}
#roomList .room_slide > li .info .name{padding-bottom:15px;font-size:28px}
#roomList .room_slide > li .info ul{gap:30px}
#roomList .room_slide > li .info ul li{font-size:14px}
#roomList .room_slide > li .info .desc{padding-top:40px;font-size:14px}
#roomList .room_btn{margin-top:70px}
#roomList .tabs{top:3%;right:5%}
#roomList .swiper-pagination-bullet{width:50px}

}
@media (max-width:935px){
#roomList{padding:0px}
#roomList::before{height:250px}
#roomList .all_wrap::after{display:none}
#roomList .all_wrap::before{display:none}
#roomList .tit_area{padding:0 0px 45px 0;align-items:center;text-align:center}
#roomList .tit_area > b{padding-top:15px}
#roomList .tit_area div p{padding-top:10px;font-size:28px}
#roomList .room_slide{padding-bottom:70px;height:auto}
#roomList .room_slide > li{flex-direction:column;gap:30px}
#roomList .room_slide > li .img{margin:auto;width:80%;height:350px;transform:none;order:2}
#roomList .room_slide > li .info{align-items:center;padding:70px 0 0 0;margin:0 auto;width:100%}
#roomList .room_slide > li .info .name{padding-bottom:10px;font-size:20px}
#roomList .room_slide > li .info ul{gap:20px}
#roomList .room_slide > li .info ul li::before{right:-10px}
#roomList .room_slide > li .info .desc{padding-top:20px;text-align:center}
#roomList .room_btn{margin-top:25px}
#roomList .tabs{right:7%}
#roomList .swiper-pagination-bullet{width:40px}
}
@media (max-width:480px){
#roomList::before{height:210px}
#roomList .tit_area{padding:20px 0 40px;margin:auto;width:90%}
#roomList .tit_area > b{padding-top:10px;font-size:13px;white-space:normal}
#roomList .tit_area div b{font-size:13px;line-height:1.4}
#roomList .tit_area div p{padding-top:5px;font-size:22px}
#roomList .room_slide{padding-bottom:60px}
#roomList .room_slide > li{gap:25px}
#roomList .room_slide > li .img{width:88%;height:275px}
#roomList .room_slide > li .info{padding:125px 0 0 0}
#roomList .room_slide > li .info .name{padding-bottom:5px;font-size:18px}
#roomList .room_slide > li .info ul li{font-size:13px}
#roomList .room_slide > li .info .desc{padding-top:10px;font-size:13px}
#roomList .room_btn span{font-size:14px}
#roomList .tabs{top:2%;right:50%;transform:translateX(50%)}
#roomList .swiper-pagination-bullet{width:35px;font-size:14px}
#roomList .swiper-pagination-bullet::before{top:50%;width:30px;height:30px}
}
@media (max-width:380px){
#roomList::before{height:175px}
#roomList .tit_area{padding:10px 0 30px}
#roomList .tit_area > b{padding-top:8px}
#roomList .tit_area div p{padding-top:3px;font-size:20px}
#roomList .room_slide > li{gap:23px}
#roomList .room_slide > li .img{height:235px}
#roomList .room_slide > li .info .name{padding-bottom:3px;font-size:16px}
#roomList .room_slide > li .info .desc{padding-top:8px;white-space:normal}
#roomList .room_btn span{font-size:13px}
#roomList .swiper-pagination-bullet{width:32px;font-size:13px}
#roomList .swiper-pagination-bullet::before{top:48%}
#roomList .room_slide > li .img{background-position:center}
}
/* 반응형 [e] */