#stage{
    width:1000px;
    height:600px;
    margin:100px auto;  /*上下100 左右auto*/
    margin-top: 400px ;
    /*border:10px solid #ddd;*/
    /*模拟人的眼睛到投射物的距离*/
    perspective:1200px;
    -webkit-perspective:1200px;
    transform:rotateX(-35deg)    rotatey(0deg)  rotatez(0deg)   translatey(0px);
    /*x35视角变大*/

}

#parent{
    width:1000px;
    height:600px;
    /*border:10px solid #329090;*/
    /*如果没有一个元素有定位， relative  fixed  static  absolute  float 其中的子元素绝对定位会依靠整个页面*/
    position:relative;
    /*保留子元素3D 位置*/
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    /*沿着x轴旋转-20度*/
    transform:rotateX(0deg) rotatey(0deg)  rotatey(0deg)  translatez(0px) ;

    /*进入页面动画开始沿着y轴转动*/
    animation:parent_Skew 50s linear infinite ;
}
#parentblock{
    width:60px;
    height:30px;
    /*border:10px solid #329090;*/
    /*如果没有一个元素有定位， relative  fixed  static  absolute  float 其中的子元素绝对定位会依靠整个页面*/
    position:relative;
    /*保留子元素3D 位置*/
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    /*沿着x轴旋转-20度*/
    top:0px;
    left:0px;
    transform:rotateX(0deg) rotatey(0deg)  rotatey(0deg) translateX(0px) translateY(0px) translatez(0px) ;

    /*进入页面动画开始沿着y轴转动*/
    animation:parent_Skew 20s linear infinite ;
}
@keyframes parent_Skew{
    0%{transform:rotatex(-20deg) rotatey(0deg)}
    100%{transform: rotatex(-20deg) rotatey(-360deg)}
}


@keyframes parentlayer_Skew{
    0%{transform:rotatex(-20deg) rotatey(0deg)}
    100%{transform: rotatex(-20deg) rotatey(-360deg)}
}
#ubottom{
    border: 1px solid orangered;

    background-color: rgba(27, 30, 252, 0.99);
    opacity: 0.8;
    /*position:absolute;*/
    left:0px;
    top:0px;
    border: 1px solid blue;
    color: white;
    /*background-image: url("img/朱夏小学正阳楼2层白.png");*/
    /*background-color:purple;*/
    /*transform:rotatex(90deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(300px) ;*/
    /*底面放平，然后下沉整个高度一半，就是到了中间了，应该是150*/



    /*height: 2000;  block   1200 layer   600 unit  5000  institute*/
    /*width:2000px;*/
    /*height:2000px;*/
    /*!*background-color:purple;*!*/
    /*transform:rotatex(90deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(500px) ;*/


    /*width:1000px;*/
    /*height:600px;*/
    /*background-color:purple;*/
    /*transform:rotatex(90deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(300px) ;*/
    /*底面放平，然后下沉整个高度一半，就是到了中间了，应该是150*/


}

#ubottom-layer{
    border: 1px solid orangered;

    background-color: rgba(27, 30, 252, 0.99);
    opacity: 0.8;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid blue;
    color: white;
    /*background-image: url("img/朱夏小学正阳楼2层白.png");*/
    /*background-color:purple;*/
    /*transform:rotatex(90deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(300px) ;*/
    /*底面放平，然后下沉整个高度一半，就是到了中间了，应该是150*/

    width:2000px;
    height:1200px;
    /*background-color:purple;*/
    transform:rotatex(45deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(300px) ;
    /*底面放平，然后下沉整个高度一半，就是到了中间了，应该是150*/

    /*height: 2000;  block   1200 layer   600 unit  5000  institute*/
    /*width:2000px;*/
    /*height:2000px;*/
    /*!*background-color:purple;*!*/
    /*transform:rotatex(90deg) rotatey(0deg)    translateX(-500px) translatey(0px) translatez(500px) ;*/
}
#ufront{
    /*background-color:E4393C;*/
    /*transform: rotatey(90deg) translatey(0px) translatez(-500px);*/
    background-color: #0a9dc7;
    /*position:absolute;*/
    /*top:150px;*/
    /*left:200px;*/
    /*移动图像到parent中心 应该为200*/
    /*width:600px;*/
    /*height:300px;*/
    border: 1px solid blue;



}
#ubehind{
    /*transform:rotatey(-90deg) translatez(-500px);*/
    /*background-image:url(/img/单元后面.png);*/
    background-color: #0a9dc7;
    /*top:150px;*/
    /*left:200px;*/
    /*width:600px;*/
    /*height:300px;*/
    /*position: relative;*/

}
#uleft{
    /*transform:rotateX(0deg)  rotatey(0deg)  translateY(150px) translatez(300px);*/
    /*左面直立*/
    /*transform:rotateX(-90deg)  rotatey(0deg)  translateY(-450px) translatez(300px);*/
    /*打开左面*/
    /*transform:rotateX(-90deg)  rotatey(180deg)  translateY(-450px) translatez(-300px);*/

    background-color: #0a9dc7;
    /*width:1000px;*/
    /*height:300px;*/

}
#uright{
    /*background-color:orange;*/
    /*transform:rotatey(0deg) translateY(150px) translateZ(-300px);*/
    /*background-image:url(/img/单元右面.png);*/
    /*width:1000px;*/
    /*height:300px;*/
}
#utop{
    /*background-color:green;*/
    /*transform:rotateX(-90deg) translateX(0px)  translateY(-0px) translateZ(-150px) ;*/
    /*顶盖平行*/
    /*transform:rotateX(-45deg) translateX(0px)  translateY(-195px) translateZ(-321px) ;*/
    /*打开盖子*/
    /*width:1000px;*/
    /*height:600px;*/
}
.layer{
    background-color: #0a9dc7;
    opacity: 0.8;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid blue;
    width:1000px;
    height:300px;
}


.layertop{
    background-color: rgba(154, 224, 245, 0.42);
    opacity: 0.8;
    border: 1px solid orangered;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid white;
    width:1000px;
    height:300px;
}


.layerwall{
    background-color: #0a9dc7;
    opacity: 0.8;
    border: 1px solid orangered;
    position:absolute;
    left:0px;
    top:0px;
    border: 2px solid white;
    border-bottom-color:#0a9dc7;
    width:1000px;
    height:300px;
}


.layercabinetbase{
    background-color: #0a9dc7;
    opacity: 0.8;
    border: 1px solid orangered;
    position:absolute;
    left:0px;
    top:0px;
    border: 2px solid white;
    border-bottom-color:#0a9dc7;
    width:60px;
    height:30px;
}

.unit-bottom{
    background-color:#0a9dc7;
    opacity: 0.8;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid #2b4bef;

    /*transform:rotateX(-90deg)  rotatey(180deg)  translateY(-450px) translatez(-300px);*/
    /*transform:rotateX(0deg)  rotatey(0deg)   translateY(0px)  translateY(0px) translatez(0px);*/

    /*transform:rotateX(0deg) translateX(475px) translateY(255px) ;*/
    /*100*60 的*/
    width: 100px;
    height: 90px;
    /*transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg) translateX(475px) translateY(0px) translateZ(-225px);*/
    /*200*180 的*/

    width: 200px;
    height: 180px;
    transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg) translateX(400px) translateY(80px) translateZ(-150px);



}

.unit-top{
    background-color: #5ccaec;
    opacity: 0.8;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid #1e3fb6;

    /*transform:rotateX(-90deg)  rotatey(180deg)  translateY(-450px) translatez(-300px);*/
    /*transform:rotateX(0deg)  rotatey(0deg)   translateY(0px)  translateY(0px) translatez(0px);*/

    /*transform:rotateX(0deg) translateX(475px) translateY(255px) ;*/
    /*100*60 的*/
    width: 100px;
    height: 90px;
    /*transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg) translateX(475px) translateY(0px) translateZ(-225px);*/
    /*200*180 的*/

    width: 200px;
    height: 180px;
    transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg) translateX(400px) translateY(80px) translateZ(-150px);



}


/*//默认 长10米   宽60米  */
.wall{
    background-color: #0a9dc7;
    opacity: 0.8;
    position:absolute;
    left:0px;
    top:0px;
    border: 1px solid blue;
}

.uniticonblue{

    width: 25px;
    height: 25px;
    padding: 0px;
    border: 1px solid #aaaaaa;
    position: absolute;
    float: left;
    display: inline-block;
    background-color: #17b7f6;
    cursor: crosshair;
}
.uniticongolden{

    width: 25px;
    height: 25px;
    padding: 0px;
    border: 1px solid #aaaaaa;
    position: absolute;
    float: left;
    display: inline-block;
    background-color: #fae7c3;
}
.uniticonred{

    width: 25px;
    height: 25px;
    padding: 0px;
    border: 1px solid #aaaaaa;
    position: absolute;
    float: left;
    display: inline-block;
    background-color: #f69292;
}



.fp {
    width: 25px;
    height: 25px;
    padding: 0px;
    /*border: 1px solid #aaaaaa;*/
    position: absolute;
    float: left;
    display: inline-block;
    cursor: move;;
}


.unitinlayer {
    width: 100px;
    height: 90px;
    padding: 0px;
    border: 1px solid #aaaaaa;
    position: absolute;
    float: left;
    display: inline-block;
}


.scale {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fa0606;
    /*background-color: rgb(238, 122, 163);*/
}

.scalelight {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #00ffff;
    /*background-color: rgb(238, 122, 163);*/
}

.scalewhite {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: white;
    /*background-color: rgb(238, 122, 163);*/
}

.scalered {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;

    background-color: red;
}

.scaleblue {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgb(19, 11, 246);
}

.scalegreen {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgb(7, 248, 59);
}

.scaleorange {
    width: 5px;
    height: 5px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgb(250, 210, 5);
}




.photo {
    width: 100%;
    height: 100%;
    cursor: move;

}

.breath_light {
    opacity: 0.1;
    /* 不透明度 */
    overflow: hidden;
    /* 溢出隐藏 */
    animation-name: breath;
    /* 动画名称 */
    animation-duration: 700ms;
    /* 动画时长3秒 */
    animation-timing-function: ease-in-out;
    /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;
    /* 播放次数：无限 */
    -webkit-animation-name: breath;
    /* 动画名称 */
    -webkit-animation-duration: 700ms;
    /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out;
    /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;
    /* 播放次数：无限 */
}
.breath_light2 {
    opacity: 0.1;
    /* 不透明度 */
    overflow: hidden;
    /* 溢出隐藏 */
    animation-name: breath;
    /* 动画名称 */
    animation-duration: 700ms;
    /* 动画时长3秒 */
    animation-timing-function: ease-in-out;
    /* 动画速度曲线：以低速开始和结束 */
    animation-iteration-count: infinite;
    /* 播放次数：无限 */
    -webkit-animation-name: breath;
    /* 动画名称 */
    -webkit-animation-duration: 700ms;
    /* 动画时长3秒 */
    -webkit-animation-timing-function: ease-in-out;
    /* 动画速度曲线：以低速开始和结束 */
    -webkit-animation-iteration-count: infinite;
    /* 播放次数：无限 */
}

@keyframes breath {
    from {
        opacity: 0.01;
    }

    /* 动画开始时的不透明度 */
    50% {
        opacity: 1;
    }

    /* 动画50% 时的不透明度 */
    to {
        opacity: 0.01;
    }

    /* 动画结束时的不透明度 */
}

@-webkit-keyframes breath {
    from {
        opacity: 0.01;
    }

    /* 动画开始时的不透明度 */
    50% {
        opacity: 1;
    }

    /* 动画50% 时的不透明度 */
    to {
        opacity: 0.01;
    }

    /* 动画结束时的不透明度 */
}

@keyframes breath2 {
    from {
        opacity: 1;
    }

    /* 动画开始时的不透明度 */
    50% {
        opacity: 0.01;
    }

    /* 动画50% 时的不透明度 */
    to {
        opacity: 1;
    }

    /* 动画结束时的不透明度 */
}

@-webkit-keyframes breath2 {
    from {
        opacity: 1;
    }

    /* 动画开始时的不透明度 */
    50% {
        opacity: 0.01;
    }

    /* 动画50% 时的不透明度 */
    to {
        opacity: 1;
    }

    /* 动画结束时的不透明度 */
}




.recyclebin{
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: se-resize;
    position: absolute;
    right: 0;
    bottom: 0;
    /*background-color: #00aeff;*/
}

.commonbuttoncommonbutton {
    border-radius:15px;
    background-color: #0bace6;
    border: 0px;
}

.button{
    border-radius: 5px;
    background-color: #f1dccb;
    border:0px;
    font-size: xx-small
}
.buttondoorplate{
    border-radius: 15px;
    background-color: #f6b451;
    border:0px;
    font-size: xx-small
}
.icon_rotate {
    border-radius: 5px;
    width: 5px;
    height: 5px;
    position: absolute;
    border: 1px solid #00ffff;
    top: 0px;
    background: #00ffff;
    left: calc(50% - (15px)/2);
    /*right: 0;*/
    cursor: w-resize;
    /*cursor: url(http://m.aukong.com/scorl/rotate.ico) 10 10,default;*/
}
.icon_rotateunit {
    border-radius: 5px;
    width: 5px;
    height: 5px;
    position: absolute;
    border: 1px solid #00ffff;
    top: 0px;
    background: #00ffff;
    left: calc(50% - (15px)/2);
    /*right: 0;*/
    cursor: w-resize;
    /*cursor: url(http://m.aukong.com/scorl/rotate.ico) 10 10,default;*/
}

.ruler {

    background-image: repeating-linear-gradient(0deg, white 0,white 1px, transparent 0, transparent 17.79px),repeating-linear-gradient(0deg, orange 0,orange 1px, transparent 0, transparent 8.89px),repeating-linear-gradient(0deg, blue 0, blue 0.5px, transparent 0, transparent 17.79px);
    background-position:0 10px ,0 10px ,0 25px;
    background-repeat: no-repeat;
    height: calc(100%+ 5px);
    background-size:5px  100%,5px  100%,2px calc(100% - 1cm);

    display: flex;
    justify-content: space-between;


}
.span {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin-top: 55px;
    text-align: left;
}