@charset "utf-8";
/* CSS Document */


.wrapper {
    position: relative;
}

.background {
    font-size: 0;
}

.background img {
    width: 100%;
}


.posbox {
    position: absolute;
    z-index: 20;
}

.sys-state {
    left: .75rem;
    top: 2.0rem;
}

.sys-state ul li {
    background: #fff;
    border: 1px solid #33cccc;
    padding: 1px;
}

.sys-state ul li span {
    display: block;
    background: #008000;
    width: 1.3rem;
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    color: #fff;
    font-size: .28rem;
}

.sys-state ul li span.error {
    background: #d31111;
}

.sys-state ul li span.doing {
    background: #00ff00;
    color: #000000;
}


@keyframes errorFlash {
    from {
        background: #ff0000;
    }
    to {
        background: #008000;
    }
}


.sys-switch {
    font-size: 0;
    left: 8.03rem;
    top: 2.58rem;
}

.sys-switch span {
    display: block;
    transition: transform .2s;
}

.sys-switch span.on {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sys-switch img {
    width: .35rem;
    height: .35rem;
}

.sys-cake {
    left: 5.75rem;
    top: 3.95rem;
}

.sys-cake .shadow {
    display: block;
    width: 1.28rem;
    height: 1.28rem;
    background: url("../images/cake-shadow.png") no-repeat center / 100%;
    border-radius: 50%;
    transform: rotateY(50deg) rotate(0deg);
    box-shadow: -.05rem 0 .02rem rgba(0, 0, 0, .1);
}

.sys-cake .box {
    display: block;
    background: url("../images/cake.png") no-repeat center / 100%;
    border-radius: 50%;
    width: 1.28rem;
    height: 1.28rem;
    transform: rotateY(55deg) translateX(.23rem);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
}

.sys-cake .box.on {
    animation-name: cakeRotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes cakeRotate {
    from {
        transform: rotateY(55deg) translateX(.23rem) rotate(0deg);
    }
    to {
        transform: rotateY(55deg) translateX(.23rem) rotate(360deg);
    }
}


.valbox {
    position: absolute;
    z-index: 20;
}

.valbox span {
    display: block;
    width: .35rem;
    height: .35rem;
    background: url("../images/value.png") no-repeat left top / auto 100%;
}

.valbox span.easy {
    background-position-x: 0;
}

.valbox span.stop {
    background-position-x: -.35rem;
}

.valbox span.error {
    background-position-x: -.7rem;
}

.valbox.dp-106 {
    left: 3.37rem;
    top: 3.32rem;
}

.valbox.dp-101 {
    left: 5.9rem;
    top: 2.92rem;
}

.valbox.dp-104 {
    left: 4.88rem;
    top: 4.75rem;
}

.valbox.dp-102 {
    left: 7.11rem;
    top: 4.25rem;
}

.valbox.dp-103 {
    left: 7.13rem;
    top: 4.83rem;
}

.valbox.dp-105-1 {
    left: 6.84rem;
    top: 7.01rem;
}

.valbox.dp-105-2 {
    left: 7.37rem;
    top: 7.71rem;
}

.valbox.psv-01 {
    left: 10.02rem;
    top: 5.37rem;
}

.valbox.psv-04 {
    left: 11.44rem;
    top: 5.36rem;
}

.valbox.psv-07 {
    left: 12.81rem;
    top: 5.34rem;
}

.valbox.psv-02 {
    left: 11.05rem;
    top: 6.61rem;
}

.valbox.psv-05 {
    left: 12.46rem;
    top: 6.6rem;
}

.valbox.psv-08 {
    left: 13.87rem;
    top: 6.6rem;
}

.valbox.psv-03 {
    left: 11.04rem;
    top: 8.14rem;
}

.valbox.psv-06 {
    left: 12.45rem;
    top: 8.11rem;
}

.valbox.psv-09 {
    left: 13.91rem;
    top: 8.09rem;
}


.conbox {
    position: absolute;
    z-index: 20;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: .16rem;
}

.conbox.pic-01pa {
    width: .8rem;
    height: .2rem;
    left: 2.92rem;
    top: 2.32rem;
}

.conbox.dpt01 {
    width: .54rem;
    height: .2rem;
    left: 3.89rem;
    top: 2.32rem;
}

.conbox.dpt03 {
    width: .54rem;
    height: .2rem;
    left: 4.64rem;
    top: 2.32rem;
}

.conbox.dpt04 {
    width: .54rem;
    height: .2rem;
    left: 5.285rem;
    top: 2.33rem;
}

.conbox.dpt02 {
    width: .54rem;
    height: .2rem;
    left: 4.31rem;
    top: 3.6rem;
}

.conbox.wind-two {
    width: .35rem;
    height: .2rem;
    left: 7.14rem;
    top: 1.88rem;
}

.conbox.wind-rto {
    width: .38rem;
    height: .2rem;
    left: 8.47rem;
    top: 6.73rem;
}

.conbox.cake-01 {
    width: .36rem;
    height: .2rem;
    left: 6.26rem;
    top: 5.25rem;
}

.conbox.cake-02 {
    width: .44rem;
    height: .2rem;
    left: 6.26rem;
    top: 5.47rem;
}

.conbox.tic-02 {
    width: .66rem;
    height: .2rem;
    left: 9.12rem;
    top: 2rem;
}

.conbox.dp-107 {
    width: .44rem;
    height: .2rem;
    left: 8.75rem;
    top: 2.47rem;
}

.conbox.te-03 {
    width: .6rem;
    height: .2rem;
    left: 6.85rem;
    top: 3.41rem;
}

.conbox.dp-106 {
    width: .4rem;
    height: .2rem;
    left: 7.95rem;
    top: 3.43rem;
}

.conbox.te-01b {
    width: .6rem;
    height: .2rem;
    left: 7.835rem;
    top: 4.225rem;
}

.conbox.tic-01a {
    width: .6rem;
    height: .2rem;
    left: 8.63rem;
    top: 4.225rem;
}

.conbox.tis-02a {
    width: .6rem;
    height: .2rem;
    left: 5.51rem;
    top: 5.69rem;
}

.conbox.te-02b {
    width: .6rem;
    height: .2rem;
    left: 5.5rem;
    top: 6.24rem;
}


.conbox.tic-03 {
    width: .6rem;
    height: .24rem;
    left: 12.26rem;
    top: 2.35rem;
}

.conbox.te-10 {
    width: .6rem;
    height: .24rem;
    left: 10.31rem;
    top: 2.84rem;
}

.conbox.te-11 {
    width: .6rem;
    height: .24rem;
    left: 13.28rem;
    top: 2.82rem;
}

.conbox.te-05 {
    width: .65rem;
    height: .24rem;
    left: 10.46rem;
    top: 3.95rem;
}

.conbox.te-07 {
    width: .65rem;
    height: .24rem;
    left: 11.78rem;
    top: 3.93rem;
}

.conbox.te-09 {
    width: .65rem;
    height: .24rem;
    left: 13.15rem;
    top: 3.92rem;
}

.conbox.te-04 {
    width: .65rem;
    height: .24rem;
    left: 10.44rem;
    top: 4.86rem;
}

.conbox.te-06 {
    width: .65rem;
    height: .24rem;
    left: 11.78rem;
    top: 4.86rem;
}

.conbox.te-08 {
    width: .65rem;
    height: .24rem;
    left: 13.18rem;
    top: 4.86rem;
}

.conbox.overtime {
    width: .66rem;
    height: .24rem;
    left: 14.545rem;
    top: 4.655rem;
}


.ligbox {
    position: absolute;
    z-index: 20;
}

.ligbox span {
    display: block;
    width: .14rem;
    height: .14rem;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    background: #ff0000;
}

.ligbox span.on {
    background: #ff0000;
}

.ligbox span.off {
    background: #67fc67;
}

.ligbox span.error {
    animation-name: lightFlash;
    animation-duration: .2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes lightFlash {
    from {
        background: #ff0000;
    }
    to {
        background: #67fc67;
    }
}

.ligbox.dps01 {
    left: 8.085rem;
    top: 1.91rem;
}

.ligbox.dps02 {
    left: 12.655rem;
    top: 1.72rem;
}

.ligbox.lel {
    left: 5.802rem;
    top: 6.83rem;
}


.fanbox {
    position: absolute;
    z-index: 20;
}

.fanbox span {
    display: block;
    width: .28rem;
    height: .28rem;
    background: url("../images/fan.png") no-repeat center / 100%;
}

.fanbox span.on {
    animation-name: fanStar;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes fanStar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fanbox.fan-two {
    left: 7.22rem;
    top: 2.235rem;
}

.fanbox.fan-rto {
    left: 8.52rem;
    top: 7.12rem;
}

.fanbox.fan-aid {
    left: 13.325rem;
    top: 2rem;
}


.sys-fire {
    left: 11.4rem;
    top: 2.95rem;
}

.sys-fire .box {
    width: 1.2rem;
    height: .4rem;
    border-radius: 45%;
    box-sizing: border-box;
    filter: blur(.01rem)
}

.sys-fire .box.on .particle {
    animation: fireMove 1s ease-in infinite;
    background-image: radial-gradient(#ff3c00 20%, rgba(255, 80, 0, 0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: .4rem;
    height: .4rem;
}

.sys-fire .box .particle:nth-of-type(1) {
    animation-delay: 0.9316443316s;
    left: calc((100% - .02rem) * 0);
}

.sys-fire .box .particle:nth-of-type(2) {
    animation-delay: 0.3971833409s;
    left: calc((100% - .02rem) * 0.02);
}

.sys-fire .box .particle:nth-of-type(3) {
    animation-delay: 0.5447022088s;
    left: calc((100% - .02rem) * 0.04);
}

.sys-fire .box .particle:nth-of-type(4) {
    animation-delay: 0.9749367479s;
    left: calc((100% - .02rem) * 0.06);
}

.sys-fire .box .particle:nth-of-type(5) {
    animation-delay: 0.6899809007s;
    left: calc((100% - .02rem) * 0.08);
}

.sys-fire .box .particle:nth-of-type(6) {
    animation-delay: 0.3585618075s;
    left: calc((100% - .02rem) * 0.1);
}

.sys-fire .box .particle:nth-of-type(7) {
    animation-delay: 0.5740169521s;
    left: calc((100% - .02rem) * 0.12);
}

.sys-fire .box .particle:nth-of-type(8) {
    animation-delay: 0.4855226246s;
    left: calc((100% - .02rem) * 0.14);
}

.sys-fire .box .particle:nth-of-type(9) {
    animation-delay: 0.9547701574s;
    left: calc((100% - .02rem) * 0.16);
}

.sys-fire .box .particle:nth-of-type(10) {
    animation-delay: 0.2122846919s;
    left: calc((100% - .02rem) * 0.18);
}

.sys-fire .box .particle:nth-of-type(11) {
    animation-delay: 0.2786116144s;
    left: calc((100% - .02rem) * 0.2);
}

.sys-fire .box .particle:nth-of-type(12) {
    animation-delay: 0.6686685536s;
    left: calc((100% - .02rem) * 0.22);
}

.sys-fire .box .particle:nth-of-type(13) {
    animation-delay: 0.7312286142s;
    left: calc((100% - .02rem) * 0.24);
}

.sys-fire .box .particle:nth-of-type(14) {
    animation-delay: 0.9733483025s;
    left: calc((100% - .02rem) * 0.26);
}

.sys-fire .box .particle:nth-of-type(15) {
    animation-delay: 0.2639956519s;
    left: calc((100% - .02rem) * 0.28);
}

.sys-fire .box .particle:nth-of-type(16) {
    animation-delay: 0.8238837555s;
    left: calc((100% - .02rem) * 0.3);
}

.sys-fire .box .particle:nth-of-type(17) {
    animation-delay: 0.0437607595s;
    left: calc((100% - .02rem) * 0.32);
}

.sys-fire .box .particle:nth-of-type(18) {
    animation-delay: 0.2573705645s;
    left: calc((100% - .02rem) * 0.34);
}

.sys-fire .box .particle:nth-of-type(19) {
    animation-delay: 0.2234003805s;
    left: calc((100% - .02rem) * 0.36);
}

.sys-fire .box .particle:nth-of-type(20) {
    animation-delay: 0.2317346818s;
    left: calc((100% - .02rem) * 0.38);
}

.sys-fire .box .particle:nth-of-type(21) {
    animation-delay: 0.7738109995s;
    left: calc((100% - .02rem) * 0.4);
}

.sys-fire .box .particle:nth-of-type(22) {
    animation-delay: 0.3372981135s;
    left: calc((100% - .02rem) * 0.42);
}

.sys-fire .box .particle:nth-of-type(23) {
    animation-delay: 0.9904689628s;
    left: calc((100% - .02rem) * 0.44);
}

.sys-fire .box .particle:nth-of-type(24) {
    animation-delay: 0.3739074565s;
    left: calc((100% - .02rem) * 0.46);
}

.sys-fire .box .particle:nth-of-type(25) {
    animation-delay: 0.0693958716s;
    left: calc((100% - .02rem) * 0.48);
}

.sys-fire .box .particle:nth-of-type(26) {
    animation-delay: 0.6764170972s;
    left: calc((100% - .02rem) * 0.5);
}

.sys-fire .box .particle:nth-of-type(27) {
    animation-delay: 0.6720688612s;
    left: calc((100% - .02rem) * 0.52);
}

.sys-fire .box .particle:nth-of-type(28) {
    animation-delay: 0.3541773014s;
    left: calc((100% - .02rem) * 0.54);
}

.sys-fire .box .particle:nth-of-type(29) {
    animation-delay: 0.5271777133s;
    left: calc((100% - .02rem) * 0.56);
}

.sys-fire .box .particle:nth-of-type(30) {
    animation-delay: 0.2997199298s;
    left: calc((100% - .02rem) * 0.58);
}

.sys-fire .box .particle:nth-of-type(31) {
    animation-delay: 0.0847340815s;
    left: calc((100% - .02rem) * 0.6);
}

.sys-fire .box .particle:nth-of-type(32) {
    animation-delay: 0.117240147s;
    left: calc((100% - .02rem) * 0.62);
}

.sys-fire .box .particle:nth-of-type(33) {
    animation-delay: 0.1758716981s;
    left: calc((100% - .02rem) * 0.64);
}

.sys-fire .box .particle:nth-of-type(34) {
    animation-delay: 0.9977031039s;
    left: calc((100% - .02rem) * 0.66);
}

.sys-fire .box .particle:nth-of-type(35) {
    animation-delay: 0.2137962577s;
    left: calc((100% - .02rem) * 0.68);
}

.sys-fire .box .particle:nth-of-type(36) {
    animation-delay: 0.8727243859s;
    left: calc((100% - .02rem) * 0.7);
}

.sys-fire .box .particle:nth-of-type(37) {
    animation-delay: 0.1508320993s;
    left: calc((100% - .02rem) * 0.72);
}

.sys-fire .box .particle:nth-of-type(38) {
    animation-delay: 0.2389603525s;
    left: calc((100% - .02rem) * 0.74);
}

.sys-fire .box .particle:nth-of-type(39) {
    animation-delay: 0.4213985739s;
    left: calc((100% - .02rem) * 0.76);
}

.sys-fire .box .particle:nth-of-type(40) {
    animation-delay: 0.4397331763s;
    left: calc((100% - .02rem) * 0.78);
}

.sys-fire .box .particle:nth-of-type(41) {
    animation-delay: 0.6897869631s;
    left: calc((100% - .02rem) * 0.8);
}

.sys-fire .box .particle:nth-of-type(42) {
    animation-delay: 0.8114280726s;
    left: calc((100% - .02rem) * 0.82);
}

.sys-fire .box .particle:nth-of-type(43) {
    animation-delay: 0.113132309s;
    left: calc((100% - .02rem) * 0.84);
}

.sys-fire .box .particle:nth-of-type(44) {
    animation-delay: 0.155538212s;
    left: calc((100% - .02rem) * 0.86);
}

.sys-fire .box .particle:nth-of-type(45) {
    animation-delay: 0.358764845s;
    left: calc((100% - .02rem) * 0.88);
}

.sys-fire .box .particle:nth-of-type(46) {
    animation-delay: 0.9424104472s;
    left: calc((100% - .02rem) * 0.9);
}

.sys-fire .box .particle:nth-of-type(47) {
    animation-delay: 0.3042872818s;
    left: calc((100% - .02rem) * 0.92);
}

.sys-fire .box .particle:nth-of-type(48) {
    animation-delay: 0.2772524546s;
    left: calc((100% - .02rem) * 0.94);
}

.sys-fire .box .particle:nth-of-type(49) {
    animation-delay: 0.0293830805s;
    left: calc((100% - .02rem) * 0.96);
}

.sys-fire .box .particle:nth-of-type(50) {
    animation-delay: 0.1347902463s;
    left: calc((100% - .02rem) * 0.98);
}

@keyframes fireMove {
    from {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    25% {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateY(-.4rem) scale(0);
    }
}