@charset "utf-8";

.room-movie-link {position:absolute; top:0; left:0; z-index:9999;}

.room-pannel {display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
.room-pannel .no-room {display:table; width:100%; height:100%;}
.room-pannel .no-room > p {display:table-cell; vertical-align:middle; text-align:center; font-size:13px;}

.roomWrap {display:block; position:absolute; top:0; left:0; right:0; bottom:0; padding:30px; z-index:0; background:no-repeat 50% 50%; background-size:cover; overflow:hidden; box-sizing:border-box;}
.objList {display:block; position:absolute !important; top:0; bottom:0; right:0; width:200px; padding:5px 5px 100px; transform:translateX(100%); -webkit-transform:translateX(100%); z-index:9999;}
.objList.open {transform:translateX(0); -webkit-transform:translateX(0);}
.objList > .close {display:block; position:absolute; right:100%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); width:30px; height:40px; overflow:hidden; text-align:center; line-height:40px; padding:0; border:none; border-radius:5px 0 0 5px;}
.objList > .close:before {content:"\e994"; font-family:'icon';}
.objList .inner {display:block; position:relative; height:100%;}

.objList .setting,
.objList .addform {display:block; margin:5px 0; border-radius:10px; background:rgba(255,255,255,.4); padding:5px;}

.objList h3 {font-size:12px; text-align:center; padding-top:5px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid rgba(0,0,0,.1);}
.objList dl {display:table; width:100%; table-layout:fixed; margin:5px 0;}
.objList dl > * {display:table-cell; vertical-align:middle; margin:0;}
.objList dt {width:40px;}
.objList form input[type="text"] {width:40px; height:20px; padding:0; text-align:center;}
.objList form input[type="file"] {display:block; width:100%; height:24px;}
.objList form .ui-btn {height:20px; width:100%; border-radius:9em;}
.objList form input[type="file"] + .ui-btn {margin-top:5px;}

.objList ul {display:block; position:absolute; bottom:0; left:0; right:0; top:10px; overflow:auto;}
.objList ul::-webkit-scrollbar{width: 2px; height: 2px;}
.objList ul::-webkit-scrollbar-thumb{background: #B3AFB3; border-radius: 0px;}
.objList ul::-webkit-scrollbar-thumb:hover{background: #B3AFB3;}
.objList ul::-webkit-scrollbar-track{background: #F0F0F0; border-radius: 0px; box-shadow: inset 0px 0px 0px 0px #F0F0F0;}

.objList li {display:block; position:relative;}
.objList li + li {border-top:1px solid rgba(255,255,255,.2);}
.objList li em {display:block; position:relative; padding:5px; z-index:0;}
.objList li img {max-height:80px;}
.objList li .control {display:block; position:absolute; right:5px; bottom:5px; z-index:1;}
.objList li .control button {border:none; border-radius:9em; padding:0 .5em; height:20px; background:rgba(0,0,0,.6); color:#fff;}

.objCanvas {display:block; position:absolute; top:0; left:0; right:0; bottom:0; overflow:auto; transition:.3s all; -webkit-transition:.3s all;}
#room_area {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); overflow:hidden; background:url(../img/default_room_ms.png) no-repeat 50% 50%;}
#room_area:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:9999999;}
#room_area .obj {display:block; position:absolute; cursor:move;}
#room_area .obj.over:before {content:""; display:block; position:absolute; top:-4px; left:-4px; right:-4px; bottom:-4px; border:4px solid #e5ff10; background:rgba(229,255,16,.5); z-index:-1;}
#room_area img {display:block; position:relative; z-index:0; max-width:none;}

.objList.open + .objCanvas {right:200px;}
.objList.open + .objCanvas #room_area:before {z-index:-9999999999;}

@media all and (min-width:1025px) {
	#room_area.over img {-webkit-filter:grayscale(100%); filter:gray;}
	#room_area.over .obj.over img {-webkit-filter:grayscale(0%); filter:none;}

	.objList.open + .objCanvas #room_area:hover img {-webkit-filter:grayscale(100%); filter:gray;}
	.objList.open + .objCanvas #room_area:hover .obj:hover img  {-webkit-filter:grayscale(0%); filter:none;}
}

@media all and (max-width:1024px) {
	.objList {display:none !important;}
	.objList.open + .objCanvas {right:0px;}
	.objList.open + .objCanvas #room_area:before {z-index:9999999;}

	.room-pannel {overflow:auto;}
	.room-pannel .roomWrap {display:table; width:100%; height:100%;}
	.room-pannel .roomWrap .objCanvas {display:table-cell; vertical-align:middle; position:relative; top:auto; right:sauto; bottom:auto; overflow:visible;}

	#room_area {position:relative; top:auto; left:auto; margin:0 auto; transform:translate(0, 0); -webkit-transform:translate(0, 0);}
}