@charset "utf-8";

#roomList{overflow:hidden;position:relative;height:875px;margin-bottom:215px;background:url(./img/bg.jpg) no-repeat}
#roomList:after{display:block;content:"";visibility:hidden;clear:both}

#roomList .txt_area{position:absolute;top:240px;left:840px;z-index:10;width:35%}
#roomList .tit_area{color:#fff}
#roomList .tit_area .s_tit{font-size:15px;font-weight:700;letter-spacing:0;font-family:'Poppins',sans-serif}
#roomList .tit_area .tit{margin:10px 0;font-size:40px;font-family:'notokr-bold'}

/* 슬라이드 */
.img_area{margin-top:170px}
.img_area ul{align-items:flex-end}
.img_area ul li{overflow:hidden;display:flex}
.img_area ul li .img{width:340px;height:350px;background:center no-repeat;background-size:cover;transition:width .3s}
.img_area ul li .txt_box{opacity:0;position:absolute;width:360px;color:#fff}
.img_area ul li .txt_box .name{margin-bottom:10px;font-size:32px;font-weight:200;letter-spacing:0;font-family:'Poppins'}
.img_area ul li .txt_box span{position:relative;margin-left:12px;padding-left:12px}
.img_area ul li .txt_box span:after{position:absolute;content:'';top:5px;left:0;width:1px;height:10px;background:rgba(255,255,255,.3)}
.img_area ul li .txt_box div{margin-top:60px;font-size:16px;color:#777;word-break:keep-all}
.img_area ul li.on{width:1240px!important;height:720px}
.img_area ul li.on .img{width:760px;height:720px}
.img_area ul li.on .txt_box{opacity:1;left:840px;top:42%;transition:all .4s}

#roomList .link{display:flex;position:absolute;bottom:100px;left:840px;z-index:99}
#roomList .link a{display:block;position:relative;width:150px;font-size:15px;font-weight:700;text-align:center;line-height:55px;letter-spacing:0;transition:all .3s;font-family:'Poppins'}
#roomList .link a:after{position:absolute;z-index:-1;content:'';top:0;width:150px;height:55px;background:#111;transform:scaleX(0);transition:transform .2s cubic-bezier(.65,.05,.36,1)}
#roomList .link p:nth-child(1) a:after{right:0;transform-origin:left}
#roomList .link p:nth-child(2) a:after{left:0;transform-origin:right}

#slide_btn{position:absolute;left:390px;top:250px;z-index:2;width:85px;color:#fff}
#slide_btn div{display:inline-block;padding:0 8px;opacity:.4;transition:all .3s;cursor:pointer}

@media(hover:hover){
.img_area ul li .txt_box a:hover{cursor:none}
#roomList .link a:hover{color:#fff}
#roomList .link p:nth-child(1) a:hover:after{transform-origin:left;transform:scaleX(1)}
#roomList .link p:nth-child(2) a:hover:after{transform-origin:right;transform:scaleX(1)}
#slide_btn div:hover{opacity:1}
}
@media(max-width:1300px){
#roomList{background-size:auto 525px}
#roomList .txt_area{top:225px;left:32%;width:60%}
#slide_btn{top:195px;left:360px}
.img_area ul li.on{height:550px;width:60%!important}
.img_area ul li.on a{display:block;width:50%}
.img_area ul li.on .img{width:100%;height:100%}
.img_area ul li.on .txt_box{left:54%;width:45%}
.img_area ul li a{display:block;width:90%}
.img_area ul li .img{width:100%;height:250px}
.img_area ul li .txt_box{width:100%}
#roomList .link{bottom:155px;left:32%}
}
@media(max-width:1024px){
#roomList{height:635px;background-size:auto 468px}
#roomList .txt_area{top:190px;left:43%;width:55%}
#roomList .tit_area .tit{font-size:35px;line-height:45px}
#slide_btn{top:175px;left:66%}
.img_area{margin-top:135px}
.img_area ul li.on{width:80%!important;height:500px}
.img_area ul li .img{height:215px}
#roomList .link{left:40%;bottom:0}
}
@media(max-width:768px){
#roomList{padding-top:100px;background-size:auto 475px}
#roomList .txt_area{position:relative;top:0;left:0;width:100%;text-align:center}
#roomList .tit_area .tit{padding:0 20px;font-size:30px;line-height:40px}
#slide_btn{display:inline-block;position:relative;top:0;left:0;margin-top:20px}
.img_area{margin-top:70px}
.img_area ul li.on{width:100%!important;height:320px}
.img_area ul li.on a{width:40%}
.img_area ul li.on .txt_box{top:auto;bottom:98px;left:44%;width:56%}
.img_area ul li .txt_box div{margin-top:40px;font-size:14px}
}
@media(max-width:480px){
#roomList{height:auto;margin-bottom:115px}
.img_area ul li.on{flex-wrap:wrap;height:auto}
.img_area ul li.on a{width:100%;height:270px}
.img_area ul li.on .txt_box{position:unset;width:100%;padding:20px;color:#333}
.img_area ul li .txt_box div{margin-top:20px;padding-top:20px;border-top:1px solid #d7d7d7}
#roomList .link{justify-content:center;position:unset}
}