@charset "utf-8";
/* CSS Document */
body{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: Microsoft JhengHei;}
a{cursor: pointer;}
a:hover, a:focus{text-decoration: none;}

/*main btns ============================================================================*/
.logo{ display: block;position: fixed; top:15px; left:15px; width: 302px; background: rgba(255, 255, 255, 0.7); border-radius: 8px; padding: 8px;}
    .logo img{width: 100%;}
.burger{position: fixed;top: 15px;left: 15px;text-align: center;}
.burger:hover{color:#000;}
.selectroom{position: fixed; top: 15px; right: 140px;}
.savepic{position: fixed; top: 15px; right: 264px;}
.productinfo{position: fixed; top: 15px; right: 15px;}

/*pens =============================================================================*/
.pens{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.pens a{background: rgba(255, 255, 255, 0.8);border-radius: 1000px;padding: 10px;width: 50px;height: 50px;color: #6c645e;position: absolute;text-align: center;font-size: 20px;
-moz-box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 0.8);
-webkit-box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 0.8);
box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 0.8)}
.pens a:hover{color: #000;background: rgba(255, 255, 255, 1);
-moz-box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 1);
-webkit-box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 1);
box-shadow:inset 0px 0px 30px rgba(108, 100, 94, 1)}

/*navi =============================================================================*/
#navi .modal-dialog{margin:0; width: 400px;}
#navi .modal-content{border-radius: 0;border: 0;}
#navi .modal-body{padding: 0;}

.modal-sidebar_header{padding: 15px;}
.modal-burger{text-align: center; float: left; margin-left: 28px;}
.modal-logo{display: block;float: left; padding-top: 8px;width: 286px;margin-left: 8px;}
.modal-logo img{width: 100%;}

.menus{padding: 15px;border-top:1px solid #ddd;}

.menus_cons{border-top:1px solid #ddd;}
.cons_title{margin:0;padding: 15px;}
.cons_title span[data-status=off]{display:none;}
.cons_title span[data-status=on]{display:block;}
/*.zigzag_des{display: none;}*/

.cons_body{padding: 0 15px 15px; width: 100%; overflow-y: auto;}
.select_tile{}
.select_tile .panel-group{margin-bottom: 0;}
.select_tile .panel-heading{padding: 0;}
.select_tile .panel-heading .panel-title{padding: 0;cursor: pointer;}
.select_tile .panel-heading .panel-title a{display: block; width: 100%; padding: 15px 10px;}
.select_tile .panel-heading i{transition: all 0.2s ease;}
.select_tile .panel-heading i[data-status=off]{transform: rotate(0deg);}
.select_tile .panel-heading i[data-status=on]{transform: rotate(90deg);}

.select_tile .panel-collapse[data-status=off]{display: none;}
.select_tile .panel-collapse[data-status=on]{display: block;}

.panel-group .panel-group{margin-bottom: 0;}
.panel-group .panel-group .panel-heading{background: none;}
.panel-group .panel-group .panel-heading a{padding: 8px 10px;}

.panel-group .panel-group .panel-body{padding: 5px;}


.item_list{font-size: 0; padding: 5px;}
.item_list .sTile{ display: inline-block;width:60px; margin: 8px; cursor: pointer; position: relative;}
.item_list .sTile img{width:100%;}
.item_list .sTile:hover, .item_list .sTile[data-status=on]{outline:#f0ad4e solid 2px;}
.item_list .sTile input{position: absolute; left:5px; bottom: 5px;width: 20px;height: 20px; display: none;}

.select_size a{min-width: 150px;}

.select_layout .sl_btn{display: block; color:#6c645e; margin-bottom: 15px;}
.select_layout img{width: 100%; margin-bottom: 5px;}
.select_direction img{width: 100%; margin-bottom: 5px;}
.sd_btn{display: block; color:#6c645e; margin-bottom: 15px;}

#select_scene .nav-tabs a, #check_info .nav-tabs a{color:#6c645e;}
#select_scene .ss_btn{width: 100%;margin-bottom: 15px;}
#select_scene img{width: 100%;}

#check_info img{width: 100%;}
#check_info .list-group-item-text{margin-bottom: 10px;}
#check_info hr{margin-top: 3px;margin-bottom: 10px;}
#check_info .list-group{margin-bottom: 0;}

.modal-title{padding: 10px 0;}

/*scene =============================================================================*/

/*開發用 =============================================================================*/
/*.cube .back   {background-color: hsla(213, 100%, 50%, 0.5) !important; background-image: url(../img/common/spacegrid.png) !important;}
.cube .right  {background-color: hsla( 120, 100%, 50%, 0.5 ) !important; background-image: url(../img/common/spacegrid.png) !important;}
.cube .left   {background-color: hsla( 180, 100%, 50%, 0.5 ) !important; background-image: url(../img/common/spacegrid.png) !important;}
.cube .bottom {background-color: hsla( 300, 100%, 50%, 0.5 ) !important; background-image: url(../img/common/spacegrid.png) !important;}*/
/*開發用 =============================================================================*/

.scene{position: relative; left: 0; top: 0;}
.scene_bg{width: 100%;}
.scene_trns{position: absolute; left: 0; top:0;width: 100%;}
.scene_pers1{position: absolute; left: 0; top:0;width: 100%;}

.cube figure {display: block;position: absolute;width: 100%;height: 100%;}

.cube .back   { transform: rotateY( 90deg ) translateX( 50% ) rotateY( -90deg );}
.cube .bottom { transform: translateY( 50% ) rotateX( 90deg );}

/*.content[data-wall-status="on"] .cube .theW figure{background-image: url(../img/tiles/edited/wall/wall.png);}
.content[data-floor-status="on"] .cube .theF figure{background-image: url(../img/tiles/edited/floor/floor.png);}
.content[data-wall-status="off"] .cube .theW figure{background-image: none;}
.content[data-floor-status="off"] .cube .theF figure{background-image: none;}*/

.cube .grid{background-color: transparent !important;}

.conta{width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d; }
.mixx{mix-blend-mode: multiply;}
.singlePanel{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d; width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

/*場景*/
.kitchen_01 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:54.8% 48%;
    -moz-perspective-origin:54.8% 48%;
    -webkit-perspective-origin:54.8% 48%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}


    .kitchen_01 .cube {width: 100%;height: 100%;position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform: rotateY( 90deg ) translateX( calc(-30%) ) rotateY( -90deg ) translateY( calc(-53.7%) )  translateX( calc(5%) );}
        
        .kitchen_01 .cube .left{transform: translateX( -78% ) rotateY( 90deg );}
        .kitchen_01 .wal1{transform:translateX( -45.3% )  rotateY( 90deg ) translateX( 76.5% ) translateY( 0 );}
        .kitchen_01 .wal2{transform:rotateY( 90deg ) translateX( 27% ) rotateY( -90deg ) translateX( -95.5% ) translateY( 0% );}
        
        .kitchen_01 .pen_01{left: 34%; top: 38%;}
        .kitchen_01 .pen_02{left: 28%; top: 79%;}

.bathroom_01 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:49.8% 49%;
    -moz-perspective-origin:49.8% 49%;
    -webkit-perspective-origin:49.8% 49%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}

    .bathroom_01 .cube {width: 100%;height: 100%;position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform: rotateY( 90deg ) translateX( calc(-54%) ) rotateY( -90deg ) translateY( calc(-56.1%) )  translateX( calc(0%) );}
        
        .bathroom_01 .cube .bottom{transform: translateY( 50% ) rotateX( 90deg ) translateX( 0% ) translateY( -3% );}
        .bathroom_01 .cube .back{transform: rotateY( 90deg ) translateX( 50% ) rotateY( -90deg ) translateX( 25.2% ) translateY( 0% );}
        .bathroom_01 .cube .left{display: none;}
        .bathroom_01 .cube .right{display: none;}
        
        .bathroom_01 .pen_01{left: 40%;top: 38%;}
        .bathroom_01 .pen_02{left: 70%;top: 85%;}

.balcony_01 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:37.28% -8.24%;
    -moz-perspective-origin:37.28% -8.24%;
    -webkit-perspective-origin:37.28% -8.24%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}

    .balcony_01 .cube {width: 100%;height: 100%;position: absolute;left: 0; top: 0; -webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform:rotateY(90deg) translateX(-85.72%) rotateY(-53.53deg) translateY(-69.82%) translateX(36.02%)}
        
        .balcony_01 .cube .bottom{transform: translateY( 50% ) rotateX( 90deg ) translateX( 2.5% ) translateY( -38% ); }
        .balcony_01 .cube .back{transform: rotateY( 90deg ) translateX( 89% ) rotateY( -130deg ) translateX( 18.15% ) translateY( 6% );}
        .balcony_01 .cube .back2{transform: rotateY( 90deg ) translateX( 89% ) rotateY( -130deg ) translateX( 18.15% ) translateY( -18% );}
        .balcony_01 .cube .left{display: none;}
        .balcony_01 .cube .right{display: none;}
        
        .balcony_01 .pen_01{left: 59%;top: 28%;}
        .balcony_01 .pen_02{left: 73%;top: 75%;}
        .balcony_01 .pen_03{left: 59%;top: 7%;}

.livingroom_01 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:51.8% 47%;
    -moz-perspective-origin:51.8% 47%;
    -webkit-perspective-origin:51.8% 47%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}

    .livingroom_01 .cube {width: 100%;height: 100%;position: absolute;left: 0; top: 0; -webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform: rotateY( 90deg ) translateX( -71% ) rotateY( -90deg ) translateY( -61.4% )  translateX( 0% );}
        
        .livingroom_01 .cube .bottom{transform: translateY( 50% ) rotateX( 90deg ) translateX( 2.5% ) translateY( 3% ); }
        .livingroom_01 .cube .back{transform: rotateY( 90deg ) translateX( 50% ) rotateY( -90deg ) translateX( 9.15% ) translateY( 0% );}
        .livingroom_01 .cube .left{display: none;}
        .livingroom_01 .cube .right{display: none;}
        
        .livingroom_01 .pen_01{left: 40%;top: 38%;}
        .livingroom_01 .pen_02{left: 73%;top: 75%;}

.livingroom_02 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:46.32% 43.07%;
    -moz-perspective-origin:46.32% 43.07%;
    -webkit-perspective-origin:46.32% 43.07%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}

    .livingroom_02 .cube {width: 100%;height: 100%;position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform:rotateY(90deg) translateX(calc(-38.03%)) rotateY(-113.57deg) translateY(-59.99%) translateX(0.12%);}
        
        .livingroom_02 .cube .back {transform: rotateY( 90deg ) translateX( 50% ) rotateY( -89deg ) translateX( 0% ) skewy(-1deg);}
        .livingroom_02 .cube .right{transform:translateX( 50% ) rotateY(  -90deg );}
        .livingroom_02 .cube .bottom{transform:translateY( 50% ) rotateX( 90deg ) translateX( -18% ) rotateY( -2deg )}
        .livingroom_02 .cube .left{display: none;}

        .livingroom_02 .pen_01{left: 86%;top: 38%;}
        .livingroom_02 .pen_02{left: 23%;top: 79%;}

.elevaterroom_01 .conta {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;
    perspective-origin:33.4% 47%;
    -moz-perspective-origin:33.4% 47%;
    -webkit-perspective-origin:33.4% 47%;

    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;}

    .elevaterroom_01 .cube {width: 100%;height: 100%;position: absolute;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
        transform: rotateY( 90deg ) translateX( calc(2%) ) rotateY( -90deg ) translateY( calc(-56.4%) )  translateX( calc(3.6%) );}
        
        .elevaterroom_01 .cube .back{transform:rotateY( 90deg ) translateX( -13% ) rotateY( -90deg ) translateX( -46.5% ) translateY( -1.3% );}
        .elevaterroom_01 .cube .right{transform:translateX( 50% ) rotateY(  -90deg ) translateX( -83% );}
        .elevaterroom_01 .cube .right2{transform:translateX( 50% ) rotateY(  -90deg ) translateX( 19% );width: 100%; height: 100%;}
        .elevaterroom_01 .cube .bottom{transform:translateY( 50% ) rotateX( 90deg ) translateY( 3% );}
        .elevaterroom_01 .cube .left{display: none;}

        .elevaterroom_01 .pen_01{left: 9%;top: 57%;}
        .elevaterroom_01 .pen_02{left: 73%;top: 75%;}

/*磁磚的大小*/