@charset "utf-8";

#roomList{overflow:hidden;position:relative;min-height:100vh;margin-top:230px;padding-bottom:190px}
#roomList:after{display:block;content:"";visibility:hidden;clear:both}

#roomList .fix_img{position:absolute;left:0;top:0;z-index:10;transform:translateX(-50px);width:50%;height:100vh}
#roomList .fix_img > div{opacity:0;position:absolute;left:0;top:0;width:100%;height:100%;background:center no-repeat;background-size:cover;transition:opacity 1s}
#roomList .fix_img div.on{opacity:1}
#roomList .fix_img div.img01{background-image:url(/sh_img/include/inc_room/img/left_img01.jpg)}
#roomList .fix_img div.img02{background-image:url(/sh_img/include/inc_room/img/left_img02.jpg)}
#roomList .fix_img.fix{position:fixed;left:3%;width:47%}
#roomList .fix_img.absol{position:absolute;left:0;width:50%}
#roomList .fix_img.absol_bt{position:absolute;left:0;top:auto;bottom:0;width:50%}

#roomList .right{float:right;position:relative;z-index:15;width:50%;padding-left:95px}
#roomList .right ul{padding-top:50px}
#roomList .right ul:last-child{padding-top:0 !important}
#roomList .right ul:last-child li{margin-top:0 !important}
#roomList .right ul:first-child{padding-top:140px}
#roomList .right ul:after{display:block;content:"";visibility:hidden;clear:both}
#roomList .right ul li{float:left;opacity:0;transform:translateY(50px);width:46%}
#roomList .right ul li:first-child{animation-delay:.4s}
#roomList .right ul li:last-child{float:right;animation-delay:.2s}
#roomList .right ul li .img{overflow:hidden;transition:all .3s}
#roomList .right ul li .img a{display:block;position:relative;width:100%;height:395px;background:center no-repeat;background-size:cover;transition:all .3s}
#roomList .right ul li .info p{padding:13px 0;margin-bottom:20px;border-bottom:1px solid #555;font-size:14px;color:#111;font-family:'AppleSDGothicNeo'}
#roomList .right ul li .info p span:before{display:inline-block;content:"";width:1px;height:10px;margin:0 12px;background-color:#ccc}
#roomList .right ul li .info dl dt{margin-bottom:10px;font-size:19px;font-weight:700;color:#111;font-family:'AppleSDGothicNeo'}
#roomList .right ul li .info dl dd{padding-right:50px;font-size:14px;word-break:keep-all}
#roomList .right ul li:not(:nth-child(2)){margin-top:200px}

/* 반응형 [s] */
@media (hover:hover){
#roomList .right ul li .img:hover{transform:scale(0.9)}
#roomList .right ul li .img:hover a{transform:scale(1.23)}
}
@media (max-width:1480px){
#roomList .fix_img{width:45%}	
#roomList .fix_img.fix{width:42%}
#roomList .fix_img.absol{width:45%}
#roomList .fix_img.absol_bt{width:45%}
#roomList .right{width:55%}
}
@media (max-width:1280px){
#roomList .right{padding-left:50px}
}
@media (max-width:1024px){
#roomList{min-height:auto;margin-top:0;padding-bottom:0}	
#roomList .fix_img, #roomList .fix_img.fix, #roomList .fix_img.absol, #roomList .fix_img.absol_bt{position:relative!important;left:auto!important;width:100%!important}
#roomList .right{float:none;width:100%;padding:0 5%}
#roomList .right ul{padding-top:0}
#roomList .right ul:first-child{padding-top:80px}		
#roomList .right ul li:not(:nth-child(2)){margin-top:80px}
}
@media (max-width:768px){
#roomList .right{padding:0 20px}	
#roomList .right ul li{width:calc(50% - 10px)}
#roomList .right ul li .img a{height:300px}	
}
@media (max-width:480px){
#roomList .right ul:first-child{padding-top:60px}
#roomList .right ul+ul{padding-top:40px}
#roomList .right ul li{width:100%}
#roomList .right ul li:not(:nth-child(2)){margin-top:0}
#roomList .right ul li+li{margin-top:40px!important}
#roomList .right ul li .img a{height:220px}	
}
@media (max-width:380px){
#roomList .right{padding:0 15px}	
}
/* 반응형 [e] */