@charset "utf-8";

#roomList{padding:200px 0}
#roomList .wrap{display:flex;align-items:flex-start;justify-content:space-between}
#roomList .bg{height:915px;margin-top:100px;padding:100px 0;background:url('./img/bg.jpg') no-repeat;background-size:cover}
#roomList .bg .arrow{position:relative;z-index:20;top:-50%}
#roomList .bg .arrow span{position:absolute;width:50px;height:50px;cursor:pointer;transform:rotate(45deg)}
#roomList .bg .arrow .prev{right:80px;border-right:1px solid #fff;border-top:1px solid #fff}
#roomList .bg .arrow .next{left:80px;border-left:1px solid #fff;border-bottom:1px solid #fff}
#roomList .roomview{padding-top:50px}
#roomList ul li a{display:flex;flex-direction:column;justify-content:space-between;height:650px;padding:30px;background:#fff;transition:all .3s}
#roomList ul li dt{font-size:25px;font-weight:700}
#roomList ul li dd{font-weight:500}
#roomList ul li a:hover{transform:translateY(-30px)}
#roomList ul li .info{padding:10px 0 20px;border-top:1px solid #111}
#roomList ul li img{width:100%;height:300px;object-fit:cover}
#roomList ul li span:before{display:inline-block;content:'';width:1px;height:10px;margin:0 18px;border:1px solid #e1e1e1}
#roomList .swiper-control{display:none}

/* 반응형 [s] */
@media (max-width:1400px){
#roomList{padding:100px 0}
#roomList .inner{padding:0 15px}
#roomList .bg{position:relative;display:flex;flex-direction:column;align-items:center;height:auto;margin-top:70px;padding:70px 0}
#roomList .bg .arrow{position:absolute;top:50%;width:100%;transform:translateY(-50%)}
#roomList .bg .arrow span{width:40px;height:40px}
#roomList .bg .arrow .prev{right:30px}
#roomList .bg .arrow .next{left:30px}
#roomList ul li a{height:550px;padding:24px}
#roomList ul li img{height:260px}
#roomList ul li dt{font-size:23px}
#roomList ul li a:hover{transform:translateY(-20px)}

#roomList .arrow{display:none}
#roomList .swiper-control{display:flex;justify-content:center;align-items:center;gap:10px;width:170px;height:40px;margin-top:40px;background-color:rgba(255, 255, 255, 0.8);border-radius:100px}
#roomList .swiper-control button{all:unset;display:flex;align-items:center;justify-content:center;width:30px;height:30px;cursor:pointer}
#roomList .swiper-control button span{font-size:18px;color:var(--primary);opacity:0.7;transition:opacity 0.2s}
#roomList .swiper-control button:hover span{opacity:1}
#roomList .swiper-control button.prev{transform:rotate(180deg)}
#roomList .swiper-control .pager{display:flex;gap:7px}
#roomList .swiper-control .pager .swiper-pagination-bullet-active{background-color:var(--primary)}
}
@media (max-width:1024px){
#roomList .inner{flex-direction:column;align-items:center;text-align:center}
#roomList .bg{margin-top:50px;padding:50px 0}
#roomList .cm_btn{margin-top:25px}
#roomList ul li a{height:500px}
#roomList ul li img{height:230px}
#roomList ul li dt{font-size:20px}
#roomList ul li dd{font-size:14px;line-height:1.6}
#roomList ul li .info{padding:10px 0 14px;font-size:14px}
}
@media (max-width:768px){
#roomList{padding:60px 0}
#roomList .cm_btn{margin-top:20px}
#roomList .bg{margin-top:40px;padding:40px 0}
#roomList ul li a{min-height:430px;height:auto}
#roomList ul li img{height:200px}
#roomList ul li dt{font-size:18px}
#roomList .swiper-control{margin-top:25px;width:155px;height:35px}
}
@media (max-width:600px){
#roomList ul li a{min-height:490px}
#roomList ul li img{height:260px}
}
@media (max-width:480px){
#roomList .cm_btn{margin-top:15px}
#roomList ul li dt{font-size:16px}
}
/* 반응형 [e] */