@charset "utf-8";

#roomList{position:relative;background:#111}

#roomList .room_slide > li{display:flex;height:100vh}
#roomList .room_slide > li .img{opacity:0;transform:translateX(-60px);width:70%;background:center no-repeat;background-size:cover;transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1)}
#roomList .room_slide > li .info{opacity:0;transform:translateX(60px);display:flex;flex-flow:column;justify-content:center;position:relative;z-index:10;width:30%;padding-left:4%;background:#111;transition:all .8s cubic-bezier(0.165, 0.840, 0.440, 1)}
#roomList .room_slide > li .info .name{margin:5px 0 15px;font-size:48px;line-height:1.1;color:#fff;word-break:keep-all;font-family:'Marcellus', 'Pretendard'}
#roomList .room_slide > li .info .desc{margin:10px 0 50px;padding-right:10%;word-break:keep-all}
#roomList .room_slide > li .info ul li{display:flex;color:rgba(255,255,255,.6)}
#roomList .room_slide > li .info ul li+li{margin-top:5px}
#roomList .room_slide > li .info ul li span{width:25%;font-weight:600;color:#fff}
#roomList .room_slide > li.on .img{opacity:1;transform:translateX(0)}
#roomList .room_slide > li.on .info{opacity:1;transform:translateX(0)}

#roomList .pager{position:absolute;left:74%;top:20%;z-index:101}
#roomList .pager span{opacity:.3;position:relative;width:29px;height:29px;background-color:transparent;transition:all .3s}
#roomList .pager span.on{opacity:1}
#roomList .pager span+span{margin-left:5px}
#roomList .pager span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s}
#roomList .pager span.on:before{opacity:1;width:100%;height:100%}
#roomList .pager span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#fff}

#roomList .controls{display:flex;position:absolute;top:50%;z-index:101;transform:translateY(-50%);width:70%;padding:0 2%}
#roomList .controls span{cursor:pointer}
#roomList .controls .next{margin-left:auto}

#roomList .more_btn{position:absolute;left:74%;bottom:90px;z-index:10;padding:12px 42px;border:1px solid rgba(255,255,255,.2);font-size:16px;color:#fff;background:rgba(0,0,0,.1);transition:all .4s;font-family:'Marcellus'}
#roomList .more_btn:before{display:block;content:"";position:absolute;left:0;top:0;z-index:-1;width:0;height:100%;background:#fff;transition:all .45s cubic-bezier(0.165, 0.840, 0.440, 1)}

@media(hover:hover){
#roomList .more_btn:hover{color:#111}
#roomList .more_btn:hover:before{width:100%}
}
@media(max-width:1024px){
#roomList .room_slide > li .img{width:60%}
#roomList .room_slide > li .info{width:40%}
#roomList .room_slide > li .info .name{font-size:35px}
#roomList .controls{width:60%}
#roomList .pager{left:64%}
}
@media(max-height:560px){
#roomList .pager{display:none}
#roomList .more_btn{left:auto;right:70px;bottom:70px}
}
@media(max-width:768px){
#roomList .room_slide > li .info ul li span{width:auto;flex-shrink:0;margin-right:10px}
#roomList .more_btn{left:auto;right:10px;bottom:50px;padding:12px 15px;font-size:14px}
#roomList .controls span img{height:45px}
#roomList .pager span{width:20px;height:20px}
}
@media(max-width:580px){
#roomList .room_slide > li{flex-flow:column}
#roomList .room_slide > li .img{width:100%;height:50%}
#roomList .room_slide > li .info{width:100%;padding:25px 20px 20px}
#roomList .room_slide > li .info .name{margin:0 0 5px;font-size:28px}
#roomList .room_slide > li .info .desc{margin-bottom:25px}
#roomList .controls{top:28%;width:100%}
#roomList .pager{left:50%;top:auto;bottom:15px;transform:translateX(-50%)}
}