table{border-collapse: collapse;}

#wrap{position:relative;width:1920px;height:1080px;}


/*==============

장비현황 start

================*/

/* line 1개인 animation */
.ani-devStatus{position:relative;display:block;width:588px;height:405px ;margin: 0 auto;margin-top: -34px;}

.ani-devStatus .arrow1{position:absolute;top:145px;left: 418px !important;width:18px;height:45px;transform: rotate(-270deg);}
.ani-devStatus .arrow1>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani-devStatus .arrow1>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.ani-devStatus .arrow1>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}



.ani-devStatus .arrow2{position:absolute;top:190px;left: 440px !important;width:18px;height:45px;transform: rotate(-270deg);}
.ani-devStatus .arrow2>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani-devStatus .arrow2>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.ani-devStatus .arrow2>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.ani-devStatus .arrowAct{animation-name:arrowAct;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.arrowAct2{animation-name:arrowAct2;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct2 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}

.ani-devStatus .arrow3{position:absolute;top: 276px;left: 450px;width:18px;height:45px;}
.ani-devStatus .arrow3>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani-devStatus .arrow3>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.ani-devStatus .arrow3>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}




.ani-devStatus .arrow4{position:absolute;top: 290px;left: 411px;width:18px;height:45px;}
.ani-devStatus .arrow4>div{ position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani-devStatus .arrow4>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.ani-devStatus .arrow4>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.ani-devStatus .arrowAct3{animation-name:arrowAct3;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct3 {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.arrowAct4{animation-name:arrowAct4;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct4 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}


.ani-devStatus .lineUp{position:absolute;top: 7px;left: 357px;z-index: 1;}
.ani-devStatus .lineDown{position:absolute;top:210px;left:281px;z-index: 1;}

.ani-devStatus .wrap-circle-ani{position:absolute;top:8px;left:357px;}
.ani-devStatus .circle-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle-ani {
    0%  {left: 150px;top:55px;}
    50% {left: 150px;top: 174px;}
    100% {left:0px;top: 174px;}
}

.ani-devStatus .wrap-circle2-ani{position:absolute;bottom: 6px;left:281px;}
.ani-devStatus .circle2-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle2-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle2-ani {
    0%  {left: 150px;bottom:50px;}
    50% {left: 150px;bottom: 174px;}
    100% {left:0px;bottom: 174px;}
}

.ani-devStatus  table{position:absolute;top:74px;left:68px;width:294px;height: 232px;text-align:center;table-layout: fixed;}
.ani-devStatus .sb1 th{color:#fff;font-weight:bold;font-size: 14px;}
.ani-devStatus .sb1 td{color:rgb(1, 112, 158);font-size:14px;}
/*.ani .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}*/
.ani-devStatus .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height:25px;line-height:25px;margin:0}
.ani-devStatus .sb1 tr:nth-child(1){height:49px;background:#70b0ca}
.ani-devStatus .sb1 tr:nth-child(2){height:111px;background:#f6f6f6}
.ani-devStatus .sb1 tr:nth-child(3){height:49px;background:#ececec}
.ani-devStatus .sb1 .infoView p{height:25px;line-height:25px;margin:0}

.ani-devStatus  .sb2{position:Absolute;top:74px;right: 90px;width: 120px;height: 232px}
.ani-devStatus  .sb2 dl{text-align:Center;font-size:14px;margin: 0;}
.ani-devStatus  .sb2 dd{height:27px; line-height: 27px;width: 120px;margin-left: 0px;}

.ani-devStatus  .in{/* float:left; */width: 120px;height:80px;}
.ani-devStatus  .in dt{background:#6ebf67;color:#fff;height: 26px;line-height: 26px;}
.ani-devStatus  .in dd{background:#f6f6f6;color:#545454}


.ani-devStatus  .dtlImg{width:100px;height:100px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.ani-devStatus  .devDtlImg{position:Absolute;top: 88px;left: 118px;z-index:1;width: 59px;}
.ani-devStatus  .svrDtlImg{position:Absolute;top:96px;left:90px;z-index:1}


.ani-devStatus  .blueBox{position:absolute;bottom: 27px;left:67px;width:300px;height:66px;}
.ani-devStatus  .blueBox dl{width:72px;text-align: center;float:left;color:#fff;margin-right:2px;font-size:14px}
.ani-devStatus  .blueBox dl dt{height:22px;line-height:22px;background:#70b0ca }
.ani-devStatus  .blueBox dl dd{height:33px;line-height:33px; width: 72px; margin:0; background:#3192ba }


.ani-devStatus .out{/* float:right; */width: 120px;height:80px;margin-top: 73px!important;}
.ani-devStatus .out dt{background:#6ebf67;color:#fff;height: 26px;line-height: 26px;}
.ani-devStatus .out dd{background:#f6f6f6;color:#545454;}


/*==============

장비현황 end

================*/



/*==============

운영서버관리 start

================*/

/* line 1개인 animation */
.ani{position:relative;display:block;width:588px;height:405px ;margin: 0 auto;margin-top: -34px;}

.ani .arrow1{position:absolute;top:145px;left: 418px !important;width:18px;height:45px;transform: rotate(-270deg);}
.ani .arrow1>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani .arrow1>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.ani .arrow1>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}



.ani .arrow2{position:absolute;top:190px;left: 440px !important;width:18px;height:45px;transform: rotate(-270deg);}
.ani .arrow2>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani .arrow2>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.ani .arrow2>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.ani .arrowAct{animation-name:arrowAct;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.ani .arrowAct2{animation-name:arrowAct2;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct2 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}

.ani .arrow3{position:absolute;top: 276px;left: 450px;width:18px;height:45px;}
.ani .arrow3>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani .arrow3>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.ani .arrow3>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}




.ani-devStatus .arrow4{position:absolute;top: 290px;left: 411px;width:18px;height:45px;}
.ani-devStatus .arrow4>div{ position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.ani-devStatus .arrow4>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.ani-devStatus .arrow4>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.ani .arrowAct3{animation-name:arrowAct3;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct3 {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.ani .arrowAct4{animation-name:arrowAct4;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct4 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}


.ani .lineUp{position:absolute;top: 7px;left: 357px;z-index: 1;}
.ani .lineDown{position:absolute;top:210px;left:281px;z-index: 1;}

.ani .wrap-circle-ani{position:absolute;top:8px;left:357px;}
.ani .circle-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle-ani {
    0%  {left: 150px;top:55px;}
    50% {left: 150px;top: 174px;}
    100% {left:0px;top: 174px;}
}

.ani .wrap-circle2-ani{position:absolute;bottom: 6px;left:281px;}
.ani .circle2-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle2-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle2-ani {
    0%  {left: 150px;bottom:50px;}
    50% {left: 150px;bottom: 174px;}
    100% {left:0px;bottom: 174px;}
}

.ani  table{position:absolute;top:74px;left:68px;width:294px;height: 232px;text-align:center;table-layout: fixed;}
.ani .sb1 th{color:#fff;font-weight:bold;font-size: 14px;}
.ani .sb1 td{color:rgb(1, 112, 158);font-size:14px;}
/*.ani .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}*/
.ani .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height:25px;line-height:25px;margin:0}
.ani .sb1 tr:nth-child(1){height:49px;background:#70b0ca}
.ani .sb1 tr:nth-child(2){height:111px;background:#f6f6f6}
.ani .sb1 tr:nth-child(3){height:49px;background:#ececec}
.ani .sb1 .infoView p{height:25px;line-height:25px;margin:0}

.ani  .sb2{position:Absolute;top:74px;right: 90px;width: 120px;height: 232px}
.ani  .sb2 dl{text-align:Center;font-size:14px;margin: 0;}
.ani  .sb2 dd{height:27px; line-height: 27px;width: 120px;margin-left: 0px;}

.ani  .in{/* float:left; */width: 120px;height:80px;}
.ani  .in dt{background:#6ebf67;color:#fff;height: 26px;line-height: 26px;}
.ani  .in dd{background:#f6f6f6;color:#545454}


.ani  .dtlImg{width:100px;height:100px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.ani .devDtlImg{position:Absolute;top: 88px;left: 118px;z-index:1;width: 59px;}
.ani .svrDtlImg{position:Absolute;top: 89px;left: 117px;z-index:1;width: 60px;}
.ani .wasDtlImg{position:Absolute;top: 84px;left: 106px;z-index:1;width: 80px;}
.ani .was-devDtl{position:Absolute;top: 128px;right: 24px;z-index:1;width: 30px;}

.ani  .blueBox{position:absolute;bottom: 27px;left:67px;width:300px;height:66px;}
.ani  .blueBox dl{width:72px;text-align: center;float:left;color:#fff;margin-right:2px;font-size:14px}
.ani  .blueBox dl dt{height:22px;line-height:22px;background:#70b0ca }
.ani  .blueBox dl dd{height:33px;line-height:33px; width: 72px; margin:0; background:#3192ba }


.ani .out{/* float:right; */width: 120px;height:80px;margin-top: 73px!important;}
.ani .out dt{background:#6ebf67;color:#fff;height: 26px;line-height: 26px;}
.ani .out dd{background:#f6f6f6;color:#545454;}


/*==============

운영서버관리 end

================*/




/*
.ani{position:relative;display:block;width:588px;height:405px  ;  margin-top: -34px;}

.arrow1{position:absolute;top: 88px;left: 411px;width:18px;height:45px;}
.arrow1>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow1>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.arrow1>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}



.arrow2{position:absolute;top: 75px;left: 450px;width:18px;height:45px;}
.arrow2>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow2>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.arrow2>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.arrowAct{animation-name:arrowAct;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.arrowAct2{animation-name:arrowAct2;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct2 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}

.arrow3{position:absolute;top: 276px;left: 450px;width:18px;height:45px;}
.arrow3>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow3>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.arrow3>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}




.arrow4{position:absolute;top: 290px;left: 411px;width:18px;height:45px;}
.arrow4>div{ position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow4>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.arrow4>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}



.arrowAct3{animation-name:arrowAct3;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct3 {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}
.arrowAct4{animation-name:arrowAct4;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct4 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}


.lineUp{position:absolute;top:6px;left:281px;z-index: 1;}
.lineDown{position:absolute;top:210px;left:281px;z-index: 1;}

.wrap-circle-ani{position:absolute;top:6px;left:281px;}
.circle-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle-ani {
    0%  {left: 150px;top:55px;}
    50% {left: 150px;top: 174px;}
    100% {left:0px;top: 174px;}
}

.wrap-circle2-ani{position:absolute;bottom: 6px;left:281px;}
.circle2-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle2-ani;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle2-ani {
    0%  {left: 150px;bottom:50px;}
    50% {left: 150px;bottom: 174px;}
    100% {left:0px;bottom: 174px;}
}

.ani table{position:absolute;top:74px;left:68px;width:219px;height:209px;text-align:center;table-layout: fixed;}
.ani .sb1 th{color:#fff;font-weight: normal;}
.ani .sb1 td{color:rgb(1, 112, 158);}
*//*
.ani .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height:25px;line-height:25px;margin:0}
.ani .sb1 tr:nth-child(1){height:49px;background:#70b0ca}
.ani .sb1 tr:nth-child(2){height:111px;background:#f6f6f6}
.ani .sb1 tr:nth-child(3){height:49px;background:#ececec}
.ani .sb1 .infoView p{height:25px;line-height:25px;margin:0}

.ani  .sb2{position:Absolute;top:60px;right:6px;width:285px;height:80px;}
.ani  .sb2 dl{text-align:Center;font-size:14px}
.ani  .sb2 dd{height:27px; line-height: 27px; width: 106px; margin-left: 0px;}
.ani  .in{float:left;width:106px;height:80px;}
.ani  .in dt{background:#6ebf67;color:#fff}
.ani  .in dd{background:#f6f6f6;color:#545454}

.ani  .in2{float:left;width:106px;height:80px;margin-top: 110px;}
.ani  .in2 dt{background:#6ebf67;color:#fff}
.ani  .in2 dd{background:#f6f6f6;color:#545454}

.dtlImg{width:95px;height:95px;line-height:95px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.devDtlImg{position:Absolute;top:90px;left:92px;z-index:1}
.svrDtlImg{position:Absolute;top: 83px;left: 85px;z-index:1;width:50px;}*/

/* line 2개인 animation */

.ani2{position:relative;display:block;width:588px;height: 404px; margin-top:10px;}

.ani2 table{position:absolute;top:88px;left:68px;width:219px;height:209px;text-align:center;table-layout: fixed;}
.ani2 .sb1 th{color:#fff;font-weight: normal;}
.ani2 .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.ani2 .sb1 td{color:rgb(1, 112, 158);}
.ani2 .sb1 tr:nth-child(1){height:49px;background:#70b0ca}
.ani2 .sb1 tr:nth-child(2){height:111px;background:#f6f6f6}
.ani2 .sb1 tr:nth-child(3){height:49px;background:#ececec}

.apDtlImg{position:Absolute;top: 88px;left: 112px;z-index:1;width: 65px;}

.smallTit{position:absolute;top: 100px;left: 32px;font-size: 14px;color: #666;}
.smallTit2{position:absolute;top: 167px;left: 43px;font-size: 14px;color: #666;}

/* 장비 뒷배경 원  */
.scale-up-center {
    -webkit-animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
    animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/**/
.out{float:right;width:106px;height:80px;}
.out dt{background:#6ebf67;color:#fff;height:21px}
.out dd{background:#f6f6f6;color:#545454;}

.out2{float:right;width:106px;height:80px;margin-top: 110px;}
.out2 dt{background:#6ebf67;color:#fff;height:21px}
.out2 dd{background:#f6f6f6;color:#545454;}

/**/

.blueBox{position:absolute;bottom:50px;left:67px;width:300px;height:66px}
.blueBox dl{width:72px;text-align: center;float:left;color:#fff;margin-right:2px;font-size:14px}
.blueBox dl dt{height:22px;line-height:22px;background:#70b0ca }
.blueBox dl dd{height:33px;line-height:33px; width: 72px; margin:0; background:#3192ba }


/*== ani3 == */
.ani3{position:relative;display:block;width:774px;height:306px;margin:0 auto;margin-top:-5px}

.arrow5{position:absolute;top: 105px;left: 565px;;width:52px;height:21px;transform: rotate(90deg);}
.arrow5>div{position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow5>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -130deg);}
.arrow5>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 130deg);}


.arrow6{position:absolute;top: 140px;left: 580px;width:52px;height:21px;transform: rotate(90deg)}
.arrow6>div{ position: relative;text-align: center;padding: 0px 0px; margin-bottom: 15px;  height: 5px;  width: 18px;}
.arrow6>div:before {content: '';position: absolute;top: 0px;left: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, -230deg);}
.arrow6>div:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: #6ebf67;transform: skew(0deg, 230deg);}

.arrowAct5{animation-name:arrowAct5;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct5 {
    0%  {left:0;top:0px;}
    100% {left:0;top: 10px;}
}

.arrowAct6{animation-name:arrowAct6;animation-duration: 1s;animation-iteration-count: infinite;animation-direction:alternate;}
@keyframes arrowAct6 {
    0%  {left:0;top:0px;}
    100% {left:0;top:-10px;}
}

.ani3 table{position:absolute;top:20px;left:30px;width:186px;height:176px;text-align:center;table-layout: fixed;}
.ani3 .sb1 th{color:#fff;font-weight: normal;}
.ani3 .sb1 td{color:rgb(1, 112, 158);}
.ani3 .sb1 th p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height:25px;line-height:25px;margin:0}
.ani3 .sb1 tr:nth-child(1){height:40px;background:#70b0ca}
.ani3 .sb1 tr:nth-child(2){height:94px;background:#f6f6f6}
.ani3 .sb1 tr:nth-child(3){height:42px;background:#ececec}
.ani3 .sb1 .infoView p{height:25px;line-height:25px;margin:0}

/* 장비 뒷배경 원*/
.scale-up-center {
    -webkit-animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
    animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



.ani3 .sb2{position:Absolute;top:12px;left:540px;width:95px;height:207px;}
.ani3 .sb2 dl{text-align:Center;font-size:14px}
.ani3 .sb2 dd{height:27PX;line-height: 27px}

.ani3 .in{width:95px;height:69px;margin:0;}
.ani3 .in dt{background:#6ebf67;color:#fff}
.ani3 .in dd{background:#f6f6f6;color:#545454;width:95px;margin:0}

.ani3 .plus{width:95px;height:69px;position:Absolute;left: -208PX;top: 64px;z-index: 3;margin:0}
.ani3 .plus dt{background:#3192ba;color:#fff;height:21px}
.ani3 .plus dd{background:#f6f6f6;color:#545454;width:95px;margin:0}

.ani3 .out{width:95px;height:69px;margin-top:69px;}
.ani3 .out dt{background:#6ebf67;color:#fff;height:21px}
.ani3 .out dd{background:#f6f6f6;color:#545454;width:95px;margin:0}




.bottom-Box{position:absolute;bottom: 5px;left: 29px;width:703px;height:70px;background:#f6f6f6;}
.bottom-Box dl{width: 117px;text-align: center;float:left;color:#000;font-size:14px;margin: 0;}
.bottom-Box dl dt{height:23px;line-height:23px;margin: 0;width: 117px;}
.bottom-Box dl dd{position: relative;height:47px;line-height:47px;margin: 0;}
.bottom-Box dl dd  span{position: absolute;left: 0;width: 117px;z-index: 1;color:#fff}

.ani3 .line-hori{position:absolute;top:113px;left:220px;width:508px;height:6px;background:#6ebf67}
.ani3 .line-hori::before{content:'';position:absolute;top: -2px;left: -8px;width:10px;height:10px;background:#6ebf67;border-radius:10px;z-index: 1;}

.ani3 .wrap-circle3-ani{position:absolute;top:106px;left:209px;}
.ani3 .circle3-ani {
    width: 19px;
    height: 19px;
    background-color: #3192ba;
    border-radius:10px;
    position: relative;
    animation-name: circle3-ani;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes circle3-ani {
    0%  {left: 503px;top:0;}
    100% {left:0px;top: 0;}
}


@-webkit-keyframes circle3-ani {
    0%  {left: 503px;top:0;}
    100% {left:0px;top: 0;}
}

.ani3 .devDtlImg{width:75px;height:75px;line-height:95px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.ifDtlImg{position:Absolute;top: 77px;left: 67px;z-index:1;width: 54px;}

.small-circle-ani {
    position:absolute;
    top: 3px;
    left: 39px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    background: #6ebf67;
    -webkit-animation: small-circle 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
    animation: small-circle 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;
    z-index: 0;
    margin:0
}

@-webkit-keyframes small-circle-ani {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes small-circle-ani {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* dead */

.ani3 .dead-gray{position:absolute;top:113px;left:220px;width:508px;height:6px;background:#aaa}
.ani3 .dead-gray::before{content:'';position:absolute;top: -2px;left: -8px;width:10px;height:10px;background:#aaa;border-radius:10px;z-index: 1;}
.ani3 .text-dead{position: absolute;top: 100px;left: 430px;width: 51px;height:30px;line-height: 30px;background: url(../../img/ani/icoDead.png) 8px 9px no-repeat #aaa;color:#fff;text-align: center;font-size:14px;padding: 0 0 0 20px;}


.aniBox {position: absolute; top: 0px; bottom: 200px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center}
.ani {display: inline-block; margin-top: 0px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)}
.errBubbleBlockWap {height: 100px; bottom: 0px; background: #f6f6f6}
.errBubbleBlock {height: 100%; padding-top: 10px !important; background: transparent }
.operationToolWrap {left: 0px; bottom: 100px; height: 100px; }
.operationTool {padding: 0}

/*== dbms 상세팝업 ==*/

.summaryCenter{display: inline-block;margin-top: 0px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

.summaryCenter .centerTable1{width:380px;margin:0 auto;table-layout: fixed;}
.summaryCenter .centerTable1 th{height:50px;color:#fff;font-weight:bold;font-size: 14px;    text-align: center;padding:0}
.summaryCenter .centerTable1 th p{margin:0;padding:0;height:25px;    line-height: 25px;}
.summaryCenter .centerTable1 td{position:relative;color:rgb(1, 112, 158);font-size:14px;}
.summaryCenter .centerTable1 tr:nth-child(1){height:49px;background:#70b0ca}
.summaryCenter .centerTable1 tr:nth-child(2){height:100px;background:#f6f6f6}
.summaryCenter .centerTable1 tr:nth-child(3){height:45px;background:#f6f6f6}


.summaryCenter  .evtDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 76px;height: 90px;transform: translate(-50%,-50%);}
.summaryCenter  .dtlImg{width:120px;height:120px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.summaryCenter  .dtlImg2{width:78px;height:78px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}/*fms-ups*/
.summaryCenter  .wasImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 101px;transform: translate(-50%,-50%);}
.summaryCenter  .ap_conImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 98px;transform: translate(-50%,-50%);}
.summaryCenter  .apImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryCenter  .devDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryCenter  .svrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryCenter  .svrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryCenter  .apDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 101px;transform: translate(-50%,-50%);}
.summaryCenter  .vsvrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 58px;transform: translate(-50%,-50%);}


.errlegend{margin:10px auto;width: 100%;height:30px;position: absolute;left: 0;bottom:-10px}
.errlegend span{display: inline-block;/* min-width: 94px; */height:30px;line-height: 30px;text-align: center;color: #fff;border-radius: 3px;font-size: 14px;margin-right: 6px;}
.errlegend span:last-child{margin-right:0}
.errlegend  div{width: 20%;float:left;display: block;    text-align: center;}

.errlegend2{margin:0 auto;margin-top:10px;width: 100%;height:30px;}
.errlegend2 span{display: inline-block;height:30px;line-height: 30px;text-align: center;color: #fff;border-radius: 3px;font-size: 14px;margin-right: 6px;}
.errlegend2 span:last-child{margin-right:0}
.errlegend2  div{width: 20%;float:left;display: block;    text-align: center;}

.summaryCenter .centerTable2{table-layout:fixed;width:100%;border:1px solid #d3d3d3;margin-top:5px;background:#fff}
.summaryCenter .centerTable2 .tdBd{position: relative;width: 92%;height:92%;padding: 4%;}
.summaryCenter .centerTable2 td{/*height:54px;*/border-right:1px solid #d3d3d3; border-bottom:1px solid #d3d3d3  ; padding: 0;}
.summaryCenter .centerTable2 td dl{margin:0;height:100%;}
.summaryCenter .centerTable2 td dl dt{position:relative;padding-left:15px;font-size:12px;}
.summaryCenter .centerTable2 td dl dt:before{content: '';position: absolute;top: 3px;left:0;width:9px;height:9px;background:url(/img/MainImg/customer_bullet.png) no-repeat;}
.summaryCenter .centerTable2 td dl dd{margin-left:0;margin-top:4%;text-align:right;font-size:12px;font-weight: bold;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;height:20px;line-height:20px;}

.nonInfo{background:#cacaca;min-width:54px;height:20px;color:#fff;border-radius:3px;font-weight:normal;display: inline-block;line-height: 20px;text-align: center;font-size:12px!important;}
.summaryData2 .nonInfo2{background:#cacaca;width: 20px;height: 20px;color:#fff;border-radius: 50%;font-weight:normal;display: inline-block;line-height: 10px;text-align: center;font-size: 8px!important;padding: 6px;    position: initial;}
.nonInfo2{background:#cacaca;width: 20px;height: 20px;color:#fff;border-radius: 50%;font-weight:normal;display: inline-block;line-height: 10px;text-align: center;font-size: 8px!important;padding: 6px;position: absolute;top: 3px;right: 9px;}
.nonInfoBottom{background:#cacaca;width: 20px;height: 20px;color:#fff;border-radius: 50%;font-weight:normal;display: inline-block;line-height: 10px;text-align: center;font-size: 8px!important;padding: 6px;word-break: break-all}
/*.nonInfoBottom{background:#cacaca;width: 20px;height: 20px;color:#fff;border-radius: 50%;font-weight:normal;display: inline-block;line-height: 10px;text-align: center;font-size: 8px!important;position: absolute;top: -27px;right: 0px;padding: 6px;}*/

.connectSv{position:Absolute;top:98px;left:96px;z-index:20}
.connectSv .cnsvIn{position:relative;}
.connectSv .cnsvIn .sv{width:42px;height:49px;}
.connectSv .cnsvIn .svtxt{padding:0;margin:0;width:42px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:12px}

.connectRack{position:Absolute;top:36px;left:20px;z-index:19}
.connectRack .cnrcIn{position:relative;}
.connectRack .cnrcIn .rc{width:42px;height:44px;display:block;margin-left:12px;}
.connectRack .cnrcIn .rctxt{padding:0;margin:0;width:68px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height:15px;font-size:12px}
.connectRack .cnrcIn .rcLine{margin-left:32px;}

.inout{position:absolute;width:160px;height:136px;top:48px;right:30px;z-index:20}
.inout .inoutIn{position:relative;width:160px;height:136px;}
.inout .inoutIn .inBox{position:absolute;top:8px;left:24px;}
.inout .inoutIn .outBox{position:absolute;bottom:0px;left:24px;}
.inout .inoutIn table{border:1px solid #cfcfcf;width:108px;height:40px;text-align:center;font-size:12px;}
.inout .inoutIn table tr th{background:#f4f4f4;width:31px;border:1px solid #cfcfcf;color:#888888;font-weight:normal;font-size:14px;}
.inout .inoutIn table tr td{background:#fff;border-bottom:1px solid #cfcfcf}
.inout .inoutIn table tr td .inoutUnit2{font-size:10px;}

.movecircle {
    width: 16px;
    height: 16px;
    background-color: #45a7d9;
    border-radius:10px;
    position: absolute;
    animation-name: movecircle;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    z-index:3;
}

@keyframes movecircle {
    0%  {left: 143px;top:0px;}
    50% {left: 143px;top: 64px;}
    100% {left:0px;top: 64px;}
}
/*operationtoolwrap*/
.otw{min-width:510px;height:30px;margin-top:36px;margin-bottom:4px;position: relative}

.moveArrows{position:absolute;top:53px;left:24px;width:109px;height:38px;}
.inArrow{position:relative;width:109px;height:14px;overflow: hidden;}
.inArrow img{position: absolute;
    animation-name: moveinarrow;
    animation-duration: 3s;
    animation-iteration-count: infinite}
.outArrow{position:relative;width:109px;height:14px;overflow: hidden;margin-top:10px;}
.outArrow img{transform: scaleX(-1);position: absolute;
    animation-name: moveoutarrow;
    animation-duration: 3s;
    animation-iteration-count: infinite;}


@keyframes moveinarrow {
    0%  {left: 109px;}
    100% {left:-80px;}
}
@keyframes moveoutarrow {
    0%  {left: -47px;}
    100% {left:143px;}
}

.summaryCenter .centerTable3{position:absolute;top:10px;right:10px;border:1px solid #c9c9c9;width:144px;text-align:center;}
.summaryCenter .centerTable3 th,.summaryCenter .centerTable3 td{height:21px;}
.summaryCenter .centerTable3 th,.summaryCenter .centerTable3 td span{
    font-size: 12px;}
.summaryCenter .centerTable3 th{background: #ececec;color: #808080;}
.summaryCenter .centerTable3 td{background: #fff;color: #202020;font-weight:bold;border-bottom:1px solid #c9c9c9}


/* =====

 패키지 5.10v
 요약상세 리뉴얼

 22.12.08

=====*/

.summaryBT{display:flex;align-items: center;margin-top: 0px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.summaryUPS{display:flex;align-items: center;margin-top: 0px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: inline-block;}
.summaryInnotu{display:flex;align-items: center;margin-top: 0px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: inline-block;}
.summaryLms{display:flex;align-items: center;margin-top: 0px;}
.summaryOLT{display:flex;align-items: center;margin-top: 0px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

.summaryBT .centerTable1{width:380px;margin:0 auto;table-layout: fixed;}
.summaryBT .centerTable1 th{height:50px;color:#fff;font-weight:bold;font-size: 14px;    text-align: center;padding:0}
.summaryBT .centerTable1 th p{margin:0;padding:0;height:25px;    line-height: 25px;}
.summaryBT .centerTable1 td{position:relative;color:rgb(1, 112, 158);font-size:14px;}
.summaryBT .centerTable1 tr:nth-child(1){height:49px;background:#70b0ca}
.summaryBT .centerTable1 tr:nth-child(2){height:100px;background:#f6f6f6}
.summaryBT .centerTable1 tr:nth-child(3){height:45px;background:#f6f6f6}

.summaryBT .sc-ip{text-align:center;font-weight:bold;font-size:16px;margin: 15px 0;height: 17px;color: #343d68;}
.summaryBT .sc-ip{text-align:center;font-weight:bold;font-size:16px;margin: 15px 0;height: 17px;color: #343d68;}
.summaryBT .svrPopInfo{position:absolute;right: 0;top: -5px;width:48px;height:28px;background:#f8fafb;text-align: center;color:#63727d;line-height: 28px;font-weight:bold;cursor: pointer;}
.summaryBT .svrPopInfo:hover{width:46px;height:26px;line-height:26px;background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryBT .svrPopInfoCon{position:absolute;left: 183px;top: 37px;z-index: 2;width:230px;}
.summaryBT .svrPopInfoCon td{text-align:left;height:20px;background:#fff;}

.summaryBT .popRatio{position:absolute;left: 0;top: -5px;width:48px;height:28px;background:#f8fafb;text-align: center;color:#63727d;line-height: 28px;font-weight:bold;cursor: pointer;}
.summaryBT .popRatio:hover{width:46px;height:26px;line-height:26px;background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryBT .popRatioCon{position:absolute;left: 0px;top: 37px;z-index: 2;width:230px;background:#fff}
.summaryBT .popRatioCon th{font-weight:normal}
.summaryBT .popRatioCon td{text-align: center;background:#fff;}
.summaryBT .popRatioCon th,.summaryBT .popRatioCon td{border-right:1px solid #dee0e4}
.summaryBT .popRatioCon th:last-child,.summaryBT .popRatioCon td:last-child{border-right:0}

/* 인아웃 위치 */
.summaryBT .sc-in,.summaryBT .sc-out{font-size: 14px;font-weight:bold;}

.summaryBT .sc-in{position:absolute;left: 0;top: 68px;width: 74px;height: 74px;margin: 0;}
.summaryBT .sc-in dt{color: #59c57f;background: #f0f9f3;}
.summaryBT .sc-in dt,.summaryBT .sc-in dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;border: 1px solid #ededed;}
.summaryBT .sc-in dd{font-size:12px;font-weight: normal;border-top: none;}
.summaryBT .sc-in dd:nth-child(2){border-bottom:1px solid #ededed}
.summaryBT .sc-in dd span:first-child{color:#333;}
.summaryBT .sc-in dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}


.summaryBT .sc-out{position:absolute;right: 0;top: 68px;width: 74px;height: 74px;margin: 0;}
.summaryBT .sc-out dt{color: #50bae0;background: #edf8fc;}
.summaryBT .sc-out dt,.summaryBT .sc-out dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;border: 1px solid #ededed;}
.summaryBT .sc-out dd{font-size:12px;font-weight: normal;border-top: none;}
.summaryBT .sc-out dd:nth-child(2){}
.summaryBT .sc-out dd span:first-child{color:#333;}
.summaryBT .sc-out dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}


/* 포트뷰 인아웃 위치 */
.summaryBT .sc-in2,.summaryBT .sc-out2{font-size: 14px;font-weight:bold;}

.summaryBT .sc-in2{position:absolute;left: 0;top: 68px;width: 74px;height: 74px;border: 1px solid #ededed;margin: 0;}
.summaryBT .sc-in2 dt{color: #59c57f;background: #f0f9f3;}
.summaryBT .sc-in2 dt,.summaryBT .sc-in2 dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;}
.summaryBT .sc-in2 dd{font-size:12px;font-weight: normal;}
.summaryBT .sc-in2 dd:nth-child(2){border-bottom:1px solid #ededed}
.summaryBT .sc-in2 dd span:first-child{color:#333;}
.summaryBT .sc-in2 dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}

.summaryBT .sc-out2{position:absolute;right: 0;top: 68px;width: 74px;height: 74px;border: 1px solid #ededed;margin: 0;}
.summaryBT .sc-out2 dt{color: #50bae0;background: #edf8fc;}
.summaryBT .sc-out2 dt,.summaryBT .sc-out2 dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;}
.summaryBT .sc-out2 dd{font-size:12px;font-weight: normal;}
.summaryBT .sc-out2 dd:nth-child(2){border-bottom:1px solid #ededed}
.summaryBT .sc-out2 dd span:first-child{color:#333;}
.summaryBT .sc-out2 dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}

/*.summaryBT .port-in{position:absolute;right: 206px;}*/
/*.summaryBT .port-out{position:absolute;left: 210px;}*/
/*.summaryBT .port-in,.summaryBT .port-out{font-size: 14px;font-weight: bold;top: 36px;}*/
/*.summaryBT .port-in .inoutUnit2, .summaryBT .port-out .inoutUnit2{color:#808080}*/


.summaryBT  .evtDtlImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 42px;height: 90px;transform: translate(-50%,-50%);}
.summaryBT  .dtlImg{width: 102px;height: 102px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.summaryBT  .dtlImg2{width:78px;height:78px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}/*fms-ups*/
.summaryBT  .wasImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 58px;transform: translate(-50%,-50%);}
.summaryBT  .ap_conImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 98px;transform: translate(-50%,-50%);}
.summaryBT  .apImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 42px;transform: translate(-50%,-50%);}
.summaryBT  .devDtlImg{position:Absolute;top: 50%;left: 50%;z-index: 2;width: 42px;transform: translate(-50%,-50%);}
.summaryBT  .svrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 42px;transform: translate(-50%,-50%) scale(1.3);}
.summaryBT  .apDtlImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 48px;transform: translate(-50%,-50%);}
.summaryBT  .vsvrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:2;width: 42px;transform: translate(-50%,-50%);}
.summaryBT .CircleBg{width: 78px;height: 78px;background:#fff;border-radius:50%;position: absolute;z-index: 1;transform: translate(-50%,-50%);top: 50%;left: 50%;margin: 0;}
.summaryBT .circleOpacity{width: 120px;height: 120px;line-height:100px;border-radius:50%;opacity: 0.05;position: absolute;margin: 0;z-index: 1;transform: translate(-50%,-50%);top: 50%;left: 50%;}

.summaryBT .centerTable2{table-layout:fixed;width:100%;border:1px solid #d3d3d3;margin-top:5px;background:#fff}
.summaryBT .centerTable2 .tdBd{position: relative;width: 92%;height:92%;padding: 4%;}
.summaryBT .centerTable2 td{/*height:54px;*/border-right:1px solid #d3d3d3; border-bottom:1px solid #d3d3d3  ; padding: 0;}
.summaryBT .centerTable2 td dl{margin:0;height:100%;}
.summaryBT .centerTable2 td dl dt{position:relative;padding-left:15px;font-size:12px;}
.summaryBT .centerTable2 td dl dt:before{content: '';position: absolute;top: 3px;left:0;width:9px;height:9px;background:url(/img/MainImg/customer_bullet.png) no-repeat;}
.summaryBT .centerTable2 td dl dd{margin-left:0;margin-top:4%;text-align:right;font-size:12px;font-weight: bold;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;height:20px;line-height:20px;}


.summaryBT .operationTool{height: 100%;display: flex;justify-content: center;align-items: center;width: 100%;border-botton:none!important;margin: 0;}
.summaryBT .operationTool>li{float:left;text-align: center;font-weight: bold;margin: 0 8px 0 0!important;height: 28px!important;line-height: 23px!important;background:none!important;padding: 0 !important;}
.summaryBT .operationTool>li:last-child{    margin-right: 0!important;}
.summaryBT .operationTool>li>div{margin-bottom: 6px;}

/*.summaryBT .operationTool button{width:auto;height: 23px;line-height:23px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;background: #fff;color: #2e2e2e;font-size:12px;border: 1px solid #acacac;padding: 0 8px;}*/
.summaryBT .operationTool button{width: 75px;height: 28px;line-height: 27px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background: #f8f9fa;font-size:12px;border: 1px solid #f8f9fa;padding: 0 8px;color: #63727d;font-weight: bold;}
.summaryBT .operationTool button:hover{background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryBT .operationTool button img{/* margin-right:9px; */}
.summaryBT .otw{margin-top: 13px;position: relative;min-width: auto;height: auto;margin-bottom: 0;text-align: center;}


.summaryBT .errlegend{margin: 10px 0 0 0;width: 376px;height: 21px;position: absolute;left: -70px;bottom: 25px;}
.summaryBT .errlegend span:first-child{width:34px;height:21px;line-height: 21px;border-radius:10px;font-size: 12px;}
/*.summaryBT .errlegend span{display: inline-block;!* min-width: 94px; *!height:30px;line-height: 30px;text-align: center;color: #fff;border-radius: 3px;font-size: 14px;margin-right: 6px;}*/
/*.summaryBT .errlegend span:last-child{margin-right:0}*/
.summaryBT .errlegend  div{width: 75px;float:left;display: block;text-align: center;}
.summaryBT .errlegend  div:last-child{width: 76px;}
.summaryBT .errlegend  div span{float: left;}
.summaryBT .errlegend  div span:last-child{font-size:12px;height: 21px;line-height: 18px;}
.summaryBT .errlegend  div:nth-child(1) span:last-child{color:var(--critical-color, #F64431); fill: var(--critical-color, #F64431)}
.summaryBT .errlegend  div:nth-child(2) span:last-child{color:var(--major-color, #FF9A00); fill: var(--major-color, #FF9A00)}
.summaryBT .errlegend  div:nth-child(3) span:last-child{color:var(--minor-color, #FFCD00); fill: var(--minor-color, #FFCD00)}
.summaryBT .errlegend  div:nth-child(4) span:last-child{color:var(--warning-color, #FEEE24); fill: var(--warning-color, #FEEE24)}
.summaryBT .errlegend  div:nth-child(5) span:last-child{color:var(--info-color, #1428A0); fill: var(--info-color, #1428A0)}


.summaryBT .errlegend2{margin:0 auto;margin-top:10px;width: 100%;height:30px;}
.summaryBT .errlegend2 span{display: inline-block;height:30px;line-height: 30px;text-align: center;color: #fff;border-radius: 3px;font-size: 14px;margin-right: 6px;}
.summaryBT .errlegend2 span:last-child{margin-right:0}
.summaryBT .errlegend2  div{width: 20%;float:left;display: block;    text-align: center;}

.summarylms .CircleBg{width: 64px;height: 64px;background:#fff;border-radius:50%;position: absolute;z-index: 1;transform: translate(-50%,-50%);top: 50%;left: 50%;margin: 0;}
.summarylms .circleOpacity{width: 108px;height: 108px;line-height:100px;border-radius:50%;opacity: 0.05;position: absolute;margin: 0;z-index: 1;transform: translate(-50%,-50%);top: 50%;left: 50%;}



.rackDetail{float:left;/*width:154px;height: 611px;*/margin-right: 100px;}
.rackHeader{width: 154px; height: 27px; background-image: url('/img/rack/RackTop.png'); background-repeat: no-repeat; display: flex; justify-content: center;}
.rackBody{width: 154px; height: 570px; background-image: url('/img/rack/RackMiddle.png'); background-repeat: repeat-y; display: flex; justify-content: center; overflow: hidden;-webkit-background-size: contain;background-size: contain;}
.rackFoot{width: 154px; height: 20px; background-image: url('/img/rack/RackBottom.png'); background-repeat: no-repeat; display: flex; justify-content: center;background-size:contain}

/* 랙 앞, 뒤 표시 */
#rackSection {
    position: absolute;
    right: -37px;
    width: 13px;
    height: 28px;
    line-height: 27px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    border: 1px solid #cccccc;
    padding: 0 8px;
    color: #63727d;
    font-weight: bold;
}


.summaryUPS  .evtDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 76px;height: 90px;transform: translate(-50%,-50%);}
.summaryUPS  .dtlImg{width:120px;height:120px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}
.summaryUPS  .dtlImg2{width:78px;height:78px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}/*fms-ups*/
.summaryUPS  .wasImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 101px;transform: translate(-50%,-50%);}
.summaryUPS  .ap_conImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 98px;transform: translate(-50%,-50%);}
.summaryUPS  .apImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryUPS  .devDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryUPS  .svrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 80px;transform: translate(-50%,-50%);}
.summaryUPS  .apDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 101px;transform: translate(-50%,-50%);}
.summaryUPS  .vsvrDtlImg{position:Absolute;top: 50%;left: 50%;z-index:1;width: 58px;transform: translate(-50%,-50%);}


.summaryInnotu .errlegend{margin: 10px 0 0 0;width: 376px;height: 21px;position: absolute;left: -70px;bottom: 33px;}
.summaryInnotu .errlegend span:first-child{width:34px;height:21px;line-height: 21px;border-radius:10px;font-size: 12px;}
.summaryInnotu .errlegend  div{width: 75px;float:left;display: block;text-align: center;}
.summaryInnotu .errlegend  div:last-child{width: 76px;}
.summaryInnotu .errlegend  div span{float: left;}
.summaryInnotu .errlegend  div span:last-child{font-size:12px;height: 21px;line-height: 18px;}
.summaryInnotu .errlegend  div:nth-child(1) span:last-child{color:var(--critical-color, #F64431); fill: var(--critical-color, #F64431)}
.summaryInnotu .errlegend  div:nth-child(2) span:last-child{color:var(--major-color, #FF9A00); fill: var(--major-color, #FF9A00)}
.summaryInnotu .errlegend  div:nth-child(3) span:last-child{color:var(--minor-color, #FFCD00); fill: var(--minor-color, #FFCD00)}
.summaryInnotu .errlegend  div:nth-child(4) span:last-child{color:var(--warning-color, #FEEE24); fill: var(--warning-color, #FEEE24)}
.summaryInnotu .errlegend  div:nth-child(5) span:last-child{color:var(--info-color, #1428A0); fill: var(--info-color, #1428A0)}

.summarylms  .lmsImg{width: 90px;height: 90px;line-height:100px;border-radius:50%;background:#6ebf67;margin: 0 auto;}



.summaryOLT .sc-ip{text-align:center;font-weight:bold;font-size:16px;margin: 15px 0;height: 17px;color: #343d68;}
.summaryOLT .sc-ip{text-align:center;font-weight:bold;font-size:16px;margin: 15px 0;height: 17px;color: #343d68;}
.summaryOLT .svrPopInfo{position:absolute;right: 0;top: -77px;width:48px;height:28px;background:#ebeff7;text-align: center;color:#63727d;line-height: 28px;font-weight:bold;cursor: pointer;}
.summaryOLT .svrPopInfo:hover{width:46px;height:26px;line-height:26px;background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryOLT .svrPopInfoCon{position:absolute;left: 183px;top: 37px;z-index: 2;width:230px;}
.summaryOLT .svrPopInfoCon td{text-align:left;height:20px;background:#fff;}

.summaryOLT .popRatio{position:absolute;left: 0;top: -77px;width:48px;height:28px;background:#ebeff7;text-align: center;color:#63727d;line-height: 28px;font-weight:bold;cursor: pointer;}
.summaryOLT .popRatio:hover{width:46px;height:26px;line-height:26px;background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryOLT .popRatioCon{position:absolute;left: 0px;top: 37px;z-index: 2;width:230px;background:#fff}
.summaryOLT .popRatioCon th{font-weight:normal}
.summaryOLT .popRatioCon td{text-align: center;background:#fff;}
.summaryOLT .popRatioCon th,.summaryOLT .popRatioCon td{border-right:1px solid #dee0e4}
.summaryOLT .popRatioCon th:last-child,.summaryOLT .popRatioCon td:last-child{border-right:0}

/* 인아웃 위치 */
.summaryOLT .sc-in,.summaryOLT .sc-out{font-size: 14px;font-weight:bold;}

.summaryOLT .sc-in{position:absolute;left: 163px;top: 68px;width: 74px;height: 74px;margin: 0;}
.summaryOLT .sc-in dt{color: #59c57f;background: #f0f9f3;}
.summaryOLT .sc-in dt,.summaryOLT .sc-in dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;border: 1px solid #ededed;}
.summaryOLT .sc-in dd{font-size:12px;font-weight: normal;border-top: none;}
.summaryOLT .sc-in dd:nth-child(2){border-bottom:1px solid #ededed}
.summaryOLT .sc-in dd span:first-child{color:#333;}
.summaryOLT .sc-in dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}


.summaryOLT .sc-out{position:absolute;right: 165px;top: 68px;width: 74px;height: 74px;margin: 0;}
.summaryOLT .sc-out dt{color: #50bae0;background: #edf8fc;}
.summaryOLT .sc-out dt,.summaryOLT .sc-out dd{margin:0;padding:0;text-align: center;height: 25px;line-height: 23px;border: 1px solid #ededed;}
.summaryOLT .sc-out dd{font-size:12px;font-weight: normal;border-top: none;}
.summaryOLT .sc-out dd:nth-child(2){}
.summaryOLT .sc-out dd span:first-child{color:#333;}
.summaryOLT .sc-out dd .inoutUnit2{color:#333;font-size:10px;margin-left:-4px;}


.summaryOLT .operationTool{height: 100%;display: flex;justify-content: center;align-items: center;width: 100%;border-botton:none!important;margin: 0;}
.summaryOLT .operationTool>li{float:left;text-align: center;font-weight: bold;margin: 0 8px 0 0!important;height: 28px!important;line-height: 23px!important;background:none!important;padding: 0 !important;}
.summaryOLT .operationTool>li:last-child{    margin-right: 0!important;}
.summaryOLT .operationTool>li>div{margin-bottom: 6px;}
.summaryOLT .operationTool button{width: 75px;height: 28px;line-height: 27px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background: #f8f9fa;font-size:12px;border: 1px solid #f8f9fa;padding: 0 8px;color: #63727d;font-weight: bold;}
.summaryOLT .operationTool button:hover{background: #ebf7ff;border: 1px solid #3865d1;color:#3865d1}
.summaryOLT .operationTool button img{/* margin-right:9px; */}
.summaryOLT .otw{margin-top: 13px;position: relative;min-width: auto;height: auto;margin-bottom: 0;text-align: center;}

.summaryOLT .errLe-onu{position:relative;width:376px;height:21px;margin:0 auto}
.summaryOLT .errlegend{margin: 10px auto;width: 376px;height: 21px;position: absolute;bottom: -20px;}
.summaryOLT .errlegend span:first-child{width:34px;height:21px;line-height: 21px;border-radius:10px;font-size: 12px;}
.summaryOLT .errlegend  div{width: 75px;float:left;display: block;text-align: center;}
.summaryOLT .errlegend  div:last-child{width: 76px;}
.summaryOLT .errlegend  div span{float: left;}
.summaryOLT .errlegend  div span:last-child{font-size:12px;height: 21px;line-height: 18px;}
.summaryOLT .errlegend  div:nth-child(1) span:last-child{color:var(--critical-color, #F64431); fill: var(--critical-color, #F64431)}
.summaryOLT .errlegend  div:nth-child(2) span:last-child{color:var(--major-color, #FF9A00); fill: var(--major-color, #FF9A00)}
.summaryOLT .errlegend  div:nth-child(3) span:last-child{color:var(--minor-color, #FFCD00); fill: var(--minor-color, #FFCD00)}
.summaryOLT .errlegend  div:nth-child(4) span:last-child{color:var(--warning-color, #FEEE24); fill: var(--warning-color, #FEEE24)}
.summaryOLT .errlegend  div:nth-child(5) span:last-child{color:var(--info-color, #1428A0); fill: var(--info-color, #1428A0)}


/* =====

5.10v 요약상세 애니메이션
2022.11.30

==== */


.lightAni{position:relative;width: 231px;height:155px;}
.lightAni2{position:relative;width:350px;height:155px;}
.arrowBoxBottom{position:absolute;top: 14px;left: 100px;z-index:1;} /* inout animation */
.arrowBoxBottom2{position:absolute;top: 2px;left: 97px;z-index:1;}/* 포트 animation */
.arrowBoxBottom3{position:absolute;top: -3px;left: 273px;z-index:1;}
.arrowBoxTop{position:absolute;top: 30px;left: 128px;z-index:1;transform: rotate(180deg) scaleX(1);} /* inout animation */
.arrowBoxTop2{position:absolute;top:14px;left: 126px;z-index:1;transform: rotate(180deg) scaleX(1);} /* 포트 animation */
.arrowBoxTop3{position:absolute;top: 13px;left: 307px;z-index:1;transform: rotate(180deg) scaleX(1);}
.arrowBoxRight{position:absolute;top: 131px;left: 500px;z-index:1;transform: rotate(270deg) scaleX(1);}
.arrowBoxLeft{position:absolute;top: 131px;left: 800px;z-index:1;transform: rotate(90deg) scaleX(1);}

.aniX{
    -webkit-animation: none!important;
    -o-animation: none!important;
    animation: none!important;
    z-index: 0;}
.aniDetail
{
    display: block;
    margin: 0 0 0px 0px;
    width: 7px;
    height: 7px;
    margin-top: 2px;
    /*background:rgba(255,255,255,0);*/
    background:rgba(215,215,215,1);
    border-radius:1px;
}

.bottomAw
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:7px solid transparent;
    border-top: 13px solid rgba(215,215,215,1);
    position: absolute;
    bottom: -15px;
    left: -4px;
    background: none!important;
    animation: lineLignt 2.5s infinite!important;
    animation-delay: 1.4s!important;
    border-radius:1px;
}
.bottomAw2
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:7px solid transparent;
    border-top: 13px solid rgba(215,215,215,1);
    position: absolute;
    bottom: -15px;
    left: -4px;
    background: none!important;
    animation: lineLignt2 2.5s infinite!important;
    animation-delay: 1.4s!important;
    border-radius:1px;
}
.bottomAw-stop
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:7px solid transparent;
    border-top: 13px solid rgba(215,215,215,1);
    position: absolute;
    bottom: -15px;
    left: -4px;
    background: none!important;
    border-radius:1px;
}
.bottomAw-stop-err
{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:7px solid transparent;
    border-top: 13px solid #F74633;
    position: absolute;
    bottom: -15px;
    left: -4px;
    background: none!important;
    border-radius:1px;
}

.lightAni span,.lightAni2 span{
    -webkit-animation: boxLight 2.5s infinite;
    -o-animation: boxLight 2.5s infinite;
    animation: boxLignt 2.5s infinite;
}
.lightAni .arrowBoxBottom span,.lightAni .arrowBoxBottom2 span,.lightAni2 .arrowBoxBottom span{
    -webkit-animation: boxLight2 2.5s infinite;
    -o-animation: boxLight2 2.5s infinite;
    animation: boxLignt2 2.5s infinite;
}


.stop span {
    animation: none;
    background: rgba(95,166,218,1);
}
.stop-err span {
    animation: none;
    background: #F74633;
}

.sec01{-webkit-animation-delay: .1s;-moz-animation-delay: .1s;-webkit-animation-direction: alternate;animation-delay: .1s!important;animation-direction: alternate;}
.sec02{-webkit-animation-delay: .2s;-moz-animation-delay: .2s;-webkit-animation-direction: alternate;animation-delay: .2s!important;animation-direction: alternate;}
.sec03{-webkit-animation-delay: .3s;-moz-animation-delay: .3s;-webkit-animation-direction: alternate;animation-delay: .3s!important;animation-direction: alternate;}
.sec04{-webkit-animation-delay: .4s;-moz-animation-delay: .4s;-webkit-animation-direction: alternate;animation-delay: .4s!important;animation-direction: alternate;}
.sec05{-webkit-animation-delay: .5s;-moz-animation-delay: .5s;-webkit-animation-direction: alternate;animation-delay: .5s!important;animation-direction: alternate;}
.sec06{-webkit-animation-delay: .1s;-moz-animation-delay: .1s;-webkit-animation-direction: alternate;animation-delay: .6s!important;animation-direction: alternate;}
.sec07{-webkit-animation-delay: .2s;-moz-animation-delay: .2s;-webkit-animation-direction: alternate;animation-delay: .7s!important;animation-direction: alternate;}
.sec08{-webkit-animation-delay: .3s;-moz-animation-delay: .3s;-webkit-animation-direction: alternate;animation-delay: .8s!important;animation-direction: alternate;}
.sec09{-webkit-animation-delay: .4s;-moz-animation-delay: .4s;-webkit-animation-direction: alternate;animation-delay: .9s!important;animation-direction: alternate;}
.sec10{-webkit-animation-delay: .5s;-moz-animation-delay: .5s;-webkit-animation-direction: alternate;animation-delay: 1.0s!important;animation-direction: alternate;}
.sec11{-webkit-animation-delay: 1.1s;-moz-animation-delay: 1.1s;-webkit-animation-direction: alternate;animation-delay: 1.1s!important;animation-direction: alternate;}
.sec12{-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;-webkit-animation-direction: alternate;animation-delay: 1.2s!important;animation-direction: alternate;}
.sec13{-webkit-animation-delay: 1.3s;-moz-animation-delay: 1.3s;-webkit-animation-direction: alternate;animation-delay: 1.3s!important;animation-direction: alternate;}
/*.sec14{-webkit-animation-delay: 1.4s;-moz-animation-delay: 1.4s;-webkit-animation-direction: alternate;animation-delay: 1.4s!important;animation-direction: alternate;}*/

@-webkit-keyframes boxLignt {

    0%   { background:rgba(95,166,218,0.0)}
    25%  { background:rgba(95,166,218,0.0)}
    50%  { background:rgba(95,166,218,1)}
    75% { background:rgba(95,166,218,0.0)}
    100% { background:rgba(95,166,218,0.0)}
}
@-moz-keyframes boxLignt {

    0%   { background:rgba(95,166,218,0.0)}
    25%  { background:rgba(95,166,218,0.0)}
    50%  { background:rgba(95,166,218,1)}
    75% { background:rgba(95,166,218,0.0)}
    100% { background:rgba(95,166,218,0.0)}
}
@-o-keyframes boxLignt {

    0%   { background:rgba(95,166,218,0.0)}
    25%  { background:rgba(95,166,218,0.0)}
    50%  { background:rgba(95,166,218,1)}
    75% { background:rgba(95,166,218,0.0)}
    100% { background:rgba(95,166,218,0.0)}
}
@keyframes boxLignt {

    0%   { background:rgba(95,166,218,0.0)}
    25%  { background:rgba(95,166,218,0.0)}
    50%  { background:rgba(95,166,218,1)}
    75% { background:rgba(95,166,218,0.0)}
    100% { background:rgba(95,166,218,0.0)}
}

@-webkit-keyframes lineLignt {

    0%   { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(95,166,218,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@-moz-keyframes lineLignt {


    0%   { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(95,166,218,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@-o-keyframes lineLignt {

    0%   { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(95,166,218,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@keyframes lineLignt {

    0%   { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(95,166,218,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(95,166,218,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}

@-webkit-keyframes boxLignt2 {

    0%   { background:rgba(89,197,127,0.0)}
    25%  { background:rgba(89,197,127,0.0)}
    50%  { background:rgba(89,197,127,1)}
    75% { background:rgba(89,197,127,0.0)}
    100% { background:rgba(89,197,127,0.0)}
}
@-moz-keyframes boxLignt2 {

    0%   { background:rgba(89,197,127,0.0)}
    25%  { background:rgba(89,197,127,0.0)}
    50%  { background:rgba(89,197,127,1)}
    75% { background:rgba(89,197,127,0.0)}
    100% { background:rgba(89,197,127,0.0)}
}
@-o-keyframes boxLignt2 {

    0%   { background:rgba(89,197,127,0.0)}
    25%  { background:rgba(89,197,127,0.0)}
    50%  { background:rgba(89,197,127,1)}
    75% { background:rgba(89,197,127,0.0)}
    100% { background:rgba(89,197,127,0.0)}
}
@keyframes boxLignt2 {

    0%   { background:rgba(89,197,127,0.0)}
    25%  { background:rgba(89,197,127,0.0)}
    50%  { background:rgba(89,197,127,1)}
    75% { background:rgba(89,197,127,0.0)}
    100% { background:rgba(89,197,127,0.0)}
}

@-webkit-keyframes lineLignt2 {

    0%   { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(89,197,127,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@-moz-keyframes lineLignt2 {


    0%   { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(89,197,127,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@-o-keyframes lineLignt2 {

    0%   { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(89,197,127,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}
@keyframes lineLignt2 {

    0%   { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    25%  { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
    50%  { border-color:rgba(89,197,127,0.7);
        border-left-color: transparent;
        border-right-color: transparent;}
    75% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;)}
    100% { border-color:rgba(89,197,127,0.0);
        border-left-color: transparent;
        border-right-color: transparent;}
}


.portBox{width: 54px;height: 56px;position: absolute;right: 89px;top: 95px;transform: scale(0.78);}