/*Content CSS*/
/* modal 버튼 */
#room {width:100%; }
.modal_btn_wr {display: flex; width:100%; flex-wrap:wrap;}
.modal_btn {width:100%; height:100%; cursor: pointer; position: relative; z-index: 1; overflow: hidden; display: block; min-height:220px;}
.room_img {position: absolute; left:0; top:0; transition: all .4s ease; z-index: -2;  background: url('../img/btn_room201.jpg?v=240621') 50% 50% no-repeat; width:100%; height:100%;}
.room_subject {text-align: left; padding:20px 0 0 20px;}
.room_subject h1 {font-size:45px; font-weight: 500; color:#fff;   text-shadow: 0 3px 4px rgba(0, 0, 0, 0.16); letter-spacing: .65px; font-family: 'Montserrat'; position: relative; z-index: 1;
min-width:200px;}
/* .room_subject h1::after {position: absolute; content: ""; width: 0; height: 20px; top: 50px; right: 0; z-index: -1; background: #ac5649; transition: all 0.5s ease;}
.modal_btn:hover h1::after {left: 0; width: 200px;}
.modal_btn:hover .room_subject {text-align: center; left:50%; transform:translateX(-50%);}
.modal_btn:hover .room_img {transform: scale(1.1);} */
.room_subject h2 {font-size:20px;   text-shadow: 0 3px 4px rgba(0, 0, 0, 0.16); font-weight: 500; color:#fff; letter-spacing: .3px; font-family: 'Montserrat'; }

.modal_btn .cover_bg {position: absolute; left:0; top:0; z-index: -1; background: rgba(0,0,0,.4); width:100%; height:100%; transition: all .4s ease;}
.modal_btn:hover .cover_bg {background: rgba(0,0,0,0);}

.room_view {position: absolute; left:0; bottom:0; width:100%; height:50px; line-height: 50px; }
.room_view h3 {font-size:15px; font-weight: 500; color:#e8cab9; text-shadow: 0 3px 4px rgba(0, 0, 0, 0.16); position: absolute; bottom:15px; right:20px; transition: all .4s ease; font-family: 'Montserrat'; line-height: 20px;}
.room_view h3 > span {display: inline-block; margin-left:8px; width:18px; height:1px; background: #e8cab9; position: relative; transition: all .4s ease;}
.room_view h3 > span::after {content: ''; position: absolute; display: block; width: 8px; height: 1px; background: #e8cab9; right: 0; transform: rotate(35deg); top: -3px; transition: all .4s ease;}
.room_view > div {position: absolute; left:0; bottom:-50px; z-index: -1; background: rgba(36,24,22,.9); width:100%; height:100%; transition: all .4s ease;}

.modal_btn:hover .room_view > div  {bottom:0;}
.modal_btn:hover .room_view h3 { color:#fff; }
.modal_btn:hover .room_view h3 > span, .modal_btn:hover .room_view h3 > span::after {background: #fff;}

.modal_btn:nth-child(1) .room_img { background-size:100% 100%; background: url('../img/btn_room201_1.jpg?V=240621') 50% 50% no-repeat; background-size:cover;}
.modal_btn:nth-child(2) .room_img {background: url('../img/btn_room202_1.jpg?V=240621') 50% 50% no-repeat; background-size:cover;}
.modal_btn:nth-child(3) .room_img {background: url('../img/btn_room301_1.jpg?V=240621') 50% 40% no-repeat; background-size:cover;}
.modal_btn:nth-child(4) .room_img {background: url('../img/btn_room302_1.jpg?V=240621') 50% 50% no-repeat; background-size:cover;}
.modal_btn:nth-child(5) .room_img {background: url('../img/btn_room304_1.jpg?V=240621') 50% 50% no-repeat; background-size:cover;}





@media screen and (max-width:1200px) {

}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 640px) {

}