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

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html {
    font-size: 62.5%;
}
body {
    margin: 0;
    padding: 97px 0 0 0;
    font-family: "Nanum Gothic", sans-serif;
    font-size: 12px;
    color: #555;
}
/* Bg Position */
.mancontentlist {
    --display-position-bg-main: 0 0;
    --display-position-bg-firmware: 0 -650px;
    --display-position-bg-menu1: -278px -0px;
    --display-position-bg-menu2: -278px -130px;
    --display-position-bg-menu2static: -556px -130px;
    --display-position-bg-menu2dhcp: -834px -130px;
    --display-position-bg-menu3: -278px -260px;
    --display-position-bg-menu3inv1: -556px -260px;
    --display-position-bg-menu3inv2: -834px -260px;
    --display-position-bg-menu3p1: -1112px -260px;
    --display-position-bg-menu3p2: -1668px -260px;

    --display-position-bg-menu4: -278px -390px;
    --display-position-bg-menu5: -278px -520px;
    --display-position-bg-menu6: -278px -650px;
    --display-position-bg-svrstatus: 0 -260px;
    --display-position-bg-reset: -1390px -260px;
    --display-image-bg-url: url(../SrImg/RTU/2200/rtudisplay.png);
    --display-menuserverstat-anim: menu-flowserverstat 4s infinite linear;
    --display-menuallstop-anim: menu-flowstop 8s infinite linear;
    --display-menuinvset-anim: menu-flowinvset 18s infinite linear;    
    --display-checkadr-anim: menu-checkadr 18s infinite linear;
    /*2s linear 0.95s infinite normal none running buttonclick2*/
    --indicator-size-width: 237px;
    --indicator-size-height: 78px;
    --indicator-size-padbottom: 0px;
    --indicator-span-size-top: 13px;
    --indicator-span-size-width: 20px;
    --indicator-span-size-height: 20px;
    --indicator-span-frame-size-top: 13px;
    --indicator-span-frame-size-left: 37px;
    --indicator-span-frame-size-width: 186px;
    --indicator-span-frame-size-height: 46px;
    --indicator-span-frame-image-url: url(../SrImg/RTU/2200E_EP_M/indicator_frame.svg);
    --indicator-span-r-image-url: url(../SrImg/RTU/2200E_EP_M/indicator_bullet_R.svg);
    --indicator-span-g-image-url: url(../SrImg/RTU/2200E_EP_M/indicator_bullet_G.svg);
    --indicator-span-y-image-url: url(../SrImg/RTU/2200E_EP_M/indicator_bullet_Y.svg);
    --indicator-span-alarm-inset: 10px 90.5781px 48px 143px;
    --indicator-span-power-inset: 43px 90.5781px 15px 143px;
    --indicator-span-tx1-inset: 10px 221.578px 48px 12px;
    --indicator-span-tx2-inset: 10px 155.578px 48px 78px;
    --indicator-span-rx1-inset: 43px 221.578px 15px 12px;
    --indicator-span-rx2-inset: 43px 155.578px 15px 78px;
    --rtubutton-span-esc-position: 0.2em;
    --rtubutton-span-left-position: 8.0em;
    --rtubutton-span-right-position: 16.1em;
    --rtubutton-span-select-position: 24.16em;
    --rtubutton-span-size-width: 2em;
    --rtubutton-span-size-height: 2em;
    --rtubutton-span-size-top: 3.3em;
    --rtubutton-img-size-height: 7.3em;
    --rtubutton-image-bg-url: url(../SrImg/RTU/2200E_EP_M/button_frame.svg);
    --rtubutton-span-image-url: url(../SrImg/RTU/2200E_EP_M/button_part.svg);
    --rtubutton-menuserverstat-span-right-anim: 2s linear 0.95s infinite normal none running buttonclick2;

    --rtubutton-menuallstop-span-esc-anim: 8s linear 6.95s infinite normal none running buttonclick8;
    --rtubutton-menuallstop-span-right-anim: 8s linear 2.95s infinite normal none running buttontwoclick8;
    --rtubutton-menuallstop-span-select-anim: 8s linear 0.95s infinite normal none running buttonclick8;

    --rtubutton-menuinvset-span-esc-anim: 18s linear 0.95s infinite normal none running buttonclickinvsetesc;
    --rtubutton-menuinvset-span-right-anim: 18s linear 0.95s infinite normal none running buttonclickinvsetleft;
    --rtubutton-menuinvset-span-select-anim: 18s linear 0.95s infinite normal none running buttonclickinvsetselect;

    --inverteradds-span-frame-image-url: url(../SrImg/RTU/2200EP_M_N/inverteradds.svg);
    --connector-span-frame-image-url: url(../SrImg/RTU/2200EP_M_N/connector.svg);
    --connector-span-notify-image-url: url(../SrImg/RTU/2200/connector_notify_lan.svg);
    --inv485hor-span-inv-image-url: url(../SrImg/RTU/2200/inv_hor_inv.svg);
}
.mancontentlist.qs2200e {
    --inverteradds-span-frame-image-url: url(../SrImg/RTU/2200E/inverteradds.svg);

    --connector-span-frame-image-url: url(../SrImg/RTU/2200E/connector.svg);
}
.mancontentlist.qs2200eplus {
}
.mancontentlist.qs2200m {
}
.mancontentlist.qs2200n {
    --display-position-bg-main: 0 0;
    --display-position-bg-menu1: -278px -0px;
    --display-position-bg-menu2: -278px -130px;
    --display-position-bg-menu3: -278px -260px;
    --display-position-bg-menu3inv1: -1112px -260px;
    --display-position-bg-menu3inv2: -1390px -260px;    
    --display-position-bg-menu3p1: -1668px -260px;
    --display-position-bg-menu3p2: -1668px -130px;
    --display-position-bg-menu3p3: -556px -260px;
    --display-position-bg-menu3p4: -834px -260px;

    --display-position-bg-menu4: -278px -390px;
    --display-position-bg-menu5: -278px -520px;
    --display-position-bg-menu6: -278px -650px;

    --display-position-bg-menu3s1: -556px -260px;
    --display-position-bg-menu3s2: -834px -260px;
    --display-position-bg-menu3s3: -556px -520px;
    --display-position-bg-menu3s4: -556px -650px;
    --display-position-bg-menu3s5: -556px -780px;
    --display-position-bg-menu3s6: -556px -910px;
    --display-position-bg-menu3s7: -556px -1040px;
    --display-position-bg-menu3s8: -556px -1170px;


    --display-position-bg-menu3s8p1: -834px -390px;
    --display-position-bg-menu3s8p2: -834px -520px;
    --display-position-bg-menu3s8p3: -834px -650px;
    --display-position-bg-menu3s8p4: -834px -780px;
    --display-position-bg-menu3s8p5: -834px -910px;
    --display-position-bg-menu3s8p6: -834px -1040px;
    --display-position-bg-menu3s8p7: -834px -1170px;
    --display-position-bg-menu3s8p8: -1112px -1170px;


    --display-position-bg-adr1c1: -834px 0;
    --display-position-bg-adr1c2: -1112px 0;
    --display-position-bg-adr1c10: -556px 0;

    --display-position-bg-adr2c1: -1946px -130px;
    --display-position-bg-adr2c2: -1946px -260px;
    --display-position-bg-adr2c10:-1946px 0;

    --display-position-bg-adr3c1:  -1946px -520px;
    --display-position-bg-adr3c4:  -1946px -650px;
    --display-position-bg-adr3c7:  -1946px -390px;

    --display-position-bg-svrstatus: 0 -390px;
    --display-position-bg-portstatus: 0 -520px;
    --display-position-bg-reset: -1668px 0;

    --display-image-bg-url: url(../SrImg/RTU/2200N/rtudisplay.svg);

    --display-menuserverstat-anim: menu-flowserverstat2200n 6s infinite linear;
    --display-menuinvset-anim: menu-flowinvset2200n 20s infinite linear;    
    --display-menucheckadr-anim: menu-checkadr 12s infinite linear;    
    --display-menucheckadrpage1-anim: menu-checkadrpage1 8s infinite linear;
    --display-menucheckadrpage2-anim: menu-checkadrpage2 8s infinite linear;
    --display-menucheckadrpage3-anim: menu-checkadrpage3 8s infinite linear;
    --display-menu-ipsetpage1-anim: menu-ipsetpage1 16s infinite linear;
    --display-menu-ipsetpage2-anim: menu-ipsetpage2 5s infinite linear;
    --display-menu-ipsetpage3-anim: menu-ipsetpage3 8s infinite linear;
    --indicator-size-width     : 290px;
    --indicator-size-height    : 46px;
    --indicator-size-padbottom : 10px;
        
    --indicator-span-size-top:   32px;
    --indicator-span-size-width: 13px;
    --indicator-span-size-height:13px;

    --indicator-span-frame-size-top :  3px;
    --indicator-span-frame-size-left : 0px;
    --indicator-span-frame-size-width : 290px;
    --indicator-span-frame-size-height : 46px;

    --indicator-span-frame-image-url: url(../SrImg/RTU/2200N/indicator_frame.svg);

    --indicator-span-r-image-url  : url(../SrImg/RTU/2200N/indicator_bullet_R.svg);  
    --indicator-span-g-image-url  : url(../SrImg/RTU/2200N/indicator_bullet_G.svg);  
    --indicator-span-y-image-url  : url(../SrImg/RTU/2200N/indicator_bullet_Y.svg);  

    --indicator-span-alarm-inset  : 32px 79.2969px 11px 218px;  
    --indicator-span-power-inset  : 32px 27.2969px 11px 270px;  
    --indicator-span-tx1-inset    : 32px 288.297px 11px 9px;    
    --indicator-span-tx2-inset    : 32px 184.297px 11px 113px;  
    --indicator-span-rx1-inset    : 32px 236.297px 11px 61px;   
    --indicator-span-rx2-inset    : 32px 131.297px 11px 166px;  

    
    --rtubutton-span-esc-position   :  0.5em;
    --rtubutton-span-left-position  :  7.5em;
    --rtubutton-span-right-position : 14.6em;
    --rtubutton-span-select-position: 21.5em;

    --rtubutton-span-size-width : 4.8em;
    --rtubutton-span-size-height: 4.3em;
    --rtubutton-span-size-top   : 0.4em;


    --rtubutton-img-size-height: 5.1em;
    --rtubutton-image-bg-url: url(../SrImg/RTU/2200N/button_frame.svg);

    --rtubutton-span-image-url: url(../SrImg/RTU/2200E_EP_M/button_part.svg);
    --rtubutton-span-esc-image-url   : url(../SrImg/RTU/2200N/button_part_esc.svg);   
    --rtubutton-span-left-image-url  : url(../SrImg/RTU/2200N/button_part_left.svg);  
    --rtubutton-span-right-image-url : url(../SrImg/RTU/2200N/button_part_right.svg); 
    --rtubutton-span-select-image-url: url(../SrImg/RTU/2200N/button_part_select.svg);

    --rtubutton-menuinvset-span-esc-anim:    20s linear 0.95s infinite normal none running buttonclickinvsetesc2200n;
    --rtubutton-menuinvset-span-right-anim:  20s linear 0.95s infinite normal none running buttonclickinvsetright2200n;
    --rtubutton-menuinvset-span-select-anim: 20s linear 0.95s infinite normal none running buttonclickinvsetselect2200n;

    --rtubutton-menucheckadr-span-right-anim:  12s linear 0.95s infinite normal none running buttonclickcheckadrright;
    --rtubutton-menucheckadr-span-esc-anim: 12s linear 0.95s infinite normal none running buttonclickcheckadresc;
    --rtubutton-menucheckadr-span-select-anim: 12s linear 0.95s infinite normal none running buttonclickcheckadrselect;


    --rtubutton-menucheckadrpage-span-left-anim: 8s linear 0.95s infinite normal none running buttonclickcheckadrpageleft;
    --rtubutton-menucheckadrpage-span-right-anim: 8s linear 0.95s infinite normal none running buttonclickcheckadrpageright;

    --rtubutton-menucheckipsetpage1_right-anim: 16s linear 0s infinite normal none running buttonclick_ipsetpage1_right;
    --rtubutton-menucheckipsetpage1_select-anim: 16s linear 0s infinite normal none running buttonclick_ipsetpage1_select;

    --rtubutton-menucheckipsetpage2_select-anim: 5s linear 0s infinite normal none running buttonclick_ipsetpage2_select;
    --rtubutton-menucheckipsetpage2_right-anim: 5s linear 0s infinite normal none running buttonclick_ipsetpage2_right;

    --rtubutton-menucheckipsetpage3_select-anim: 8s linear 0s infinite normal none running buttonclick_ipsetpage3_select;
}
/*
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,select,a{margin:0;padding:0;}
    */
h2 {
    word-break: keep-all;
}
b.red{color: #ff0000;}
li{word-break: keep-all;}
.pointover {cursor:pointer;}
.linkover {cursor:pointer;}
div.manmain {
    display: block;
}
div.manmain.tailwrap {
    width: 817px; height:50px;margin:0 auto;
}
div.manmain.tailwrap div.tail {
    display:flex;
    justify-content:space-between;
    padding: 0 60px;
}
div.manmain.tailwrap div.tail span.logo {
    display:inline-block;
    margin: auto 10px auto 0;
    background-size:contain;
    background-image: url(../SrImg/foot_logo.svg);
    background-repeat: no-repeat;
    width: 114px;
    height: 23px;
    filter: contrast(0.1);
}
div.manmain.tailwrap div.tail span.wall {
    display:inline-block;        
    background:#cfcfcf;
    width: 1.5px;
    height: 28px;
}

div.manmain.headwrap .head {width: 880px; margin:0 auto;
                            border-width: 0 0 5px 0; 
    border-style: solid;
    border-image: linear-gradient(to bottom,#efefef, #fbfbfb, rgba(0, 0, 0, 0)) 0 80 100%;
    display:block;
}
div.manmain.headwrap .head .headcontent{
    display:flex;
    justify-content:space-between;
    background: #ffffff;
}
div.manmain.headwrap .head .headcontent h2.title{

    font-size:large; 
}
div.manmain.headwrap .head .headcontent div *{
    display:inline-block;
}
div.manmain.headwrap .head .headcontent div.title {
    height:51px;
}
div.manmain.headwrap .head .headcontent div:first-child {
    margin-right:10px;
    cursor:pointer;
}
div.manmain.headwrap .head .headcontent div:nth-child(2) {
    flex: auto;
}
div.manmain.headwrap .head .right h2.title {text-align: right;}
div.manmain.headwrap p.hs_logo { margin-top:5px; margin-bottom:5px;cursor:pointer;}

div.mancontentwrap { /*article-section-wrapper*/
    display: block;
}
div.mancontentcapsule { /*article-section*/
    display: block;
}
div.mancontentlist { /*AppleTopic apd-topic dark-mode-enabled book book-content*/
    /*must change to responsive*/
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    width: 817px;
}
div.mancontenttitle {font-size: xx-large;margin-bottom: 70px;}

div.mancontent {
    margin-bottom: 3.15em;
    border-bottom: 1px solid #e6e6e6;
}
div.mancontent.fold div.head {
    
}  
.hideitem {display:none !important;}

div.mancontent div.head {    
    margin-top: 3.15em;
}
div.mancontent div.item {
    margin-top: 3.15em;
}
div.mancontent div.item.notopmargin {
    margin-top: 0;
}
div.mancontent div.item imgobj {font-size:62.5%}
div.mancontent div.item imgobj .imgitem {font-size:inherit;}

div.mancontent div.head { border-bottom: 2px solid #e6e6e6;padding-bottom: 1.15em; }
div.mancontent div.item:not(.hor) { display: flex;padding-bottom: 3.15em; }
div.mancontent div.item:not(.hor) imgobj {max-width:30em;}
div.mancontent div.item:not(.hor) imgobj img {max-width:30em;}
div.mancontent div.item imgobj.maxfit {width:100%;}
div.mancontent div.item imgobj.maxfit img.maxfit {width:100%;}


div.mancontent div.subitem {padding-left: 10%;}
div.mancontent div.subitem div.item:not(:last-child).item:not(.noborder) {border-bottom: 2px dotted #e6e6e6; }
div.mancontent div.subitem div.item:last-child {border: 0px; }

div.mancontent div.head h2.itemtitle { font-size:xx-large; cursor:pointer;  }
div.mancontent div.head p { font-size:large; }
div.mancontent div.item h2 { font-size:large; }
div.mancontent div.item h2.itemtitle { font-size:x-large; }
div.mancontent div.item h2.subitemtitle { font-size:large; }
div.mancontent div.item p { font-size:medium; }
div.mancontent div.item  { font-size:medium; }
div.mancontent div.item ul li { margin-bottom: 6px;}
div.mancontent div.item ul > li > ul > li:first-child { margin-top: 7px;}
div.mancontent div.item ul > li > ul > li:last-child { margin-bottom: 10px;}
div.mancontent div.item div { padding-right: 0;}
div.mancontent div.item:not(.hor) div { padding-left: 7%;}


/*var(--display-image-bg-url)*/

imgobj.menuserverstat span.rtudisplay {animation: var(--display-menuserverstat-anim);}
imgobj.menuserverstat div.imgitem.rtubutton span.right {animation: var(--rtubutton-menuserverstat-span-right-anim);}

imgobj.menuallstop span.rtudisplay {animation: var(--display-menuallstop-anim);}
imgobj.menuallstop div.imgitem.rtubutton span.esc   {animation: var(--rtubutton-menuallstop-span-esc-anim);}
imgobj.menuallstop div.imgitem.rtubutton span.right {animation: var(--rtubutton-menuallstop-span-right-anim);}
imgobj.menuallstop div.imgitem.rtubutton span.select {animation: var(--rtubutton-menuallstop-span-select-anim);}

imgobj.menuinvset span.rtudisplay {animation: var(--display-menuinvset-anim);}
imgobj.menuinvset div.imgitem.rtubutton span.esc    {animation: var(--rtubutton-menuinvset-span-esc-anim);}
imgobj.menuinvset div.imgitem.rtubutton span.right  {animation: var(--rtubutton-menuinvset-span-right-anim);}
imgobj.menuinvset div.imgitem.rtubutton span.select {animation: var(--rtubutton-menuinvset-span-select-anim);}

imgobj.menucheckadr span.rtudisplay {animation: var(--display-menucheckadr-anim);}
imgobj.menucheckadr div.imgitem.rtubutton span.esc {animation: var(--rtubutton-menucheckadr-span-esc-anim);}
imgobj.menucheckadr div.imgitem.rtubutton span.select {animation: var(--rtubutton-menucheckadr-span-select-anim);}

imgobj.menucheckadrpage1 span.rtudisplay {animation: var(--display-menucheckadrpage1-anim);}
imgobj.menucheckadrpage1 div.imgitem.rtubutton span.left {animation: var(--rtubutton-menucheckadrpage-span-left-anim);}
imgobj.menucheckadrpage1 div.imgitem.rtubutton span.right {animation: var(--rtubutton-menucheckadrpage-span-right-anim);}

imgobj.menucheckadrpage2 span.rtudisplay {animation: var(--display-menucheckadrpage2-anim);}
imgobj.menucheckadrpage2 div.imgitem.rtubutton span.left {animation: var(--rtubutton-menucheckadrpage-span-left-anim);}
imgobj.menucheckadrpage2 div.imgitem.rtubutton span.right {animation: var(--rtubutton-menucheckadrpage-span-right-anim);}

imgobj.menucheckadrpage3 span.rtudisplay {animation: var(--display-menucheckadrpage3-anim);}
imgobj.menucheckadrpage3 div.imgitem.rtubutton span.left {animation: var(--rtubutton-menucheckadrpage-span-left-anim);}
imgobj.menucheckadrpage3 div.imgitem.rtubutton span.right {animation: var(--rtubutton-menucheckadrpage-span-right-anim);}

imgobj.menuipsetpage1 span.rtudisplay {animation: var(--display-menu-ipsetpage1-anim);}
imgobj.menuipsetpage1 div.imgitem.rtubutton span.right {animation: var(--rtubutton-menucheckipsetpage1_right-anim);}
imgobj.menuipsetpage1 div.imgitem.rtubutton span.select {animation: var(--rtubutton-menucheckipsetpage1_select-anim);}

imgobj.menuipsetpage2 span.rtudisplay {animation: var(--display-menu-ipsetpage2-anim);}
imgobj.menuipsetpage2 div.imgitem.rtubutton span.right {animation: var(--rtubutton-menucheckipsetpage2_right-anim);}
imgobj.menuipsetpage2 div.imgitem.rtubutton span.select {animation: var(--rtubutton-menucheckipsetpage2_select-anim);}

imgobj.menuipsetpage3 span.rtudisplay {animation: var(--display-menu-ipsetpage3-anim);}
imgobj.menuipsetpage3 div.imgitem.rtubutton span.select {animation: var(--rtubutton-menucheckipsetpage3_select-anim);}


imgobj.menuipset span.rtudisplay {animation: var(--display-menuipset-anim);}
imgobj.menuipset div.imgitem.rtubutton span.esc {animation: var(--rtubutton-menuipset-span-esc-anim);}
imgobj.menuipset div.imgitem.rtubutton span.select {animation: var(--rtubutton-menuipset-span-select-anim);}
/**/

/*#region RTU Display*/
imgobj span.rtudisplay {
    background-image: var(--display-image-bg-url);
    background-repeat: no-repeat;
    display: inline-block;
    width: 278px;
    height: 130px;
}
imgobj span.rtudisplay.firmware {background-position: var(--display-position-bg-firmware);}
imgobj span.rtudisplay.menu0 {background-position: var(--display-position-bg-main);}
imgobj span.rtudisplay.menu1 {background-position: var(--display-position-bg-menu1);}
imgobj span.rtudisplay.menu1checkadr1 {background-position: var(--display-position-bg-adr1c1);}
imgobj span.rtudisplay.menu1checkadr2 {background-position: var(--display-position-bg-adr2c1);}
imgobj span.rtudisplay.menu1checkadr3 {background-position: var(--display-position-bg-adr3c1);}
imgobj span.rtudisplay.menu2 {background-position: var(--display-position-bg-menu2);}
imgobj span.rtudisplay.menu2static {background-position: var(--display-position-bg-menu2static);}
imgobj span.rtudisplay.menu2dhcp {background-position: var(--display-position-bg-menu2dhcp);}
imgobj span.rtudisplay.menu3 {background-position: var(--display-position-bg-menu3);}
imgobj span.rtudisplay.menuall {
    animation: menu-flow 6s infinite linear;
}
imgobj span.rtudisplay.menuallstop {
    animation: menu-flowstop 8s infinite linear;
}
imgobj span.rtudisplay.menuinvset {
    animation: menu-flowinvset 18s infinite linear;    
}

imgobj span.rtudisplay.menuinvset1 {
    background-position: var(--display-position-bg-menu3inv1);
}
imgobj span.rtudisplay.menuinvset2 {
    background-position: var(--display-position-bg-menu3inv2);
}
imgobj span.rtudisplay.menuinvset01 {
    background-position: var(--display-position-bg-menu3p3);
}
imgobj span.rtudisplay.menuinvset02 {
    background-position: var(--display-position-bg-menu3p4);
}
imgobj span.rtudisplay.menuinvset3 {
    background-position: var(--display-position-bg-menu3p1);
}
imgobj span.rtudisplay.menuinvset4 {
    background-position: var(--display-position-bg-menu3p2);
}
imgobj span.rtudisplay.rebooting {
    background-position: var(--display-position-bg-reset);
}

imgobj span.rtudisplay.menu1adr1c1  {background-position: var(--display-position-bg-adr1c1 );}
imgobj span.rtudisplay.menu1adr1c2  {background-position: var(--display-position-bg-adr1c2 );}
imgobj span.rtudisplay.menu1adr1c10 {background-position: var(--display-position-bg-adr1c10);}
imgobj span.rtudisplay.menu1adr2c1  {background-position: var(--display-position-bg-adr2c1 );}
imgobj span.rtudisplay.menu1adr2c2  {background-position: var(--display-position-bg-adr2c2 );}
imgobj span.rtudisplay.menu1adr2c10 {background-position: var(--display-position-bg-adr2c10);}
imgobj span.rtudisplay.menu1adr3c1  {background-position: var(--display-position-bg-adr3c1 );}
imgobj span.rtudisplay.menu1adr3c4  {background-position: var(--display-position-bg-adr3c4 );}
imgobj span.rtudisplay.menu1adr3c7  {background-position: var(--display-position-bg-adr3c7 );}
@keyframes menu-flow {
    0% {
        background-position: -278px 0;
    }
    32% {
        background-position: -278px -1px;
    }
    33% {
        background-position: -278px -130px;
    }

    65% {
        background-position: -278px -131px;
    }
    66% {
        background-position: -278px -260px;
    }

    99% {
        background-position: -278px -259px;
    }
    100% {
        background-position: -278px 0;
    }
}
@keyframes menu-flowstop {
     0% {background-position: var(--display-position-bg-main);}

    24% {background-position: var(--display-position-bg-main);}
    25% {background-position: var(--display-position-bg-menu1);}

    49% {background-position: var(--display-position-bg-menu1);}
    50% {background-position: var(--display-position-bg-menu2);}

    74% {background-position: var(--display-position-bg-menu2);}
    75% {background-position: var(--display-position-bg-menu3);}

    99% {background-position: var(--display-position-bg-menu3);}
    100% {background-position: var(--display-position-bg-main);}
}
@keyframes menu-flowserverstat {
    0% {background-position: var(--display-position-bg-main);}

    49% {background-position: var(--display-position-bg-main);}
    50% {background-position: var(--display-position-bg-svrstatus);}

    99% {background-position: var(--display-position-bg-svrstatus);}
    100% {background-position: var(--display-position-bg-main);}
}
@keyframes menu-flowserverstat2200n {
    0% {background-position: var(--display-position-bg-main);}

    32% {background-position: var(--display-position-bg-main);}
    33% {background-position: var(--display-position-bg-svrstatus);}

    65% {background-position: var(--display-position-bg-svrstatus);}
    66% {background-position: var(--display-position-bg-portstatus);}

    99% {background-position: var(--display-position-bg-portstatus);}
    100% {background-position: var(--display-position-bg-main);}
}
@keyframes menu-flowinvset {
    0%    {background-position: 0 0;}
    10.11% {background-position: -1px 0;}
    11.11% {background-position: var(--display-position-bg-menu1);}/**/
    21.22% {background-position: var(--display-position-bg-menu1);}
    22.22% {background-position: var(--display-position-bg-menu2);}/**/
    32.33% {background-position: var(--display-position-bg-menu2);}
    33.33% {background-position: var(--display-position-bg-menu3);}/**/
    43.44% {background-position: var(--display-position-bg-menu3);}
    44.44% {background-position: var(--display-position-bg-menu3inv1);}/**/
    54.56% {background-position: var(--display-position-bg-menu3inv1);}
    55.56% {background-position: var(--display-position-bg-menu3inv2);}/**/
    65.67% {background-position: var(--display-position-bg-menu3inv2);}
    66.67% {background-position: var(--display-position-bg-menu3p1);}/**/
    76.78% {background-position: var(--display-position-bg-menu3p1);}
    77.78% {background-position: var(--display-position-bg-reset);}/**/
    100%   {background-position: var(--display-position-bg-reset);}
}
@keyframes menu-flowinvset2200n {
    0%    {background-position: 0 0;}
    9.1% {background-position: -1px 0;}
    10% {background-position: var(--display-position-bg-menu1);}/**/

    19.1% {background-position: var(--display-position-bg-menu1);}
    20% {background-position: var(--display-position-bg-menu2);}/**/

    29.1% {background-position: var(--display-position-bg-menu2);}
    30% {background-position: var(--display-position-bg-menu3);}/**/

    39.1% {background-position: var(--display-position-bg-menu3);}
    40% {background-position: var(--display-position-bg-menu3p3);}/**/


    49.1% {background-position: var(--display-position-bg-menu3p3);}
    50% {background-position: var(--display-position-bg-menu3inv1);}/**/

    59.1% {background-position: var(--display-position-bg-menu3inv1);}
    60% {background-position: var(--display-position-bg-menu3inv2);}/**/

    69.1% {background-position: var(--display-position-bg-menu3inv2);}
    70% {background-position: var(--display-position-bg-menu3p1);}/**/

    79.1% {background-position: var(--display-position-bg-menu3p1);}
    80% {background-position: var(--display-position-bg-reset);}/**/

    100%   {background-position: var(--display-position-bg-reset);}
}
@keyframes menu-checkadr{
    0%    {background-position: 0 0;}
    13.66% {background-position: -1px 0;}
    14.28% {background-position: var(--display-position-bg-menu1);}/**/
        
    27.96% {background-position: var(--display-position-bg-menu1);}
    28.56% {background-position: var(--display-position-bg-adr1c1);}/**/

    42.23% {background-position: var(--display-position-bg-adr1c1);}/* 특이케이스 - 꺾어져야함*/
    42.24% {background-position: var(--display-position-bg-adr2c10);}
    42.84% {background-position: var(--display-position-bg-adr2c1);}/**/

    56.52% {background-position: var(--display-position-bg-adr2c1);}
    57.12% {background-position: var(--display-position-bg-adr3c1);}

    70.79% {background-position: var(--display-position-bg-adr3c1);}
    70.80% {background-position: var(--display-position-bg-adr2c10);}
    71.40% {background-position: var(--display-position-bg-adr1c1);}

    85.08% {background-position: var(--display-position-bg-adr1c1);}
    85.68% {background-position: var(--display-position-bg-menu1);}

    99.36% {background-position: var(--display-position-bg-menu1);}
    99.96% {background-position: 0 0;}
    100%   {background-position: 0 0;}
}
@keyframes menu-checkadrpage1{
    0%    {background-position: var(--display-position-bg-adr1c1);}
    24% {background-position: var(--display-position-bg-adr1c1);}
    25% {background-position: var(--display-position-bg-adr1c2);}/**/
        
    49% {background-position: var(--display-position-bg-adr1c2);}
    50% {background-position: var(--display-position-bg-adr1c1);}/**/
                                 
    74% {background-position: var(--display-position-bg-adr1c1);}
    75% {background-position: var(--display-position-bg-adr1c10);}
                                                                  
    98% {background-position: var(--display-position-bg-adr1c10);}
    99% {background-position: var(--display-position-bg-adr1c1);}
    100%   {background-position: var(--display-position-bg-adr1c1);}
}
@keyframes menu-checkadrpage2{
    0%  {background-position: var(--display-position-bg-adr2c1);}
    24% {background-position: var(--display-position-bg-adr2c1);}
    25% {background-position: var(--display-position-bg-adr2c2);}/**/
                                                           
    49% {background-position: var(--display-position-bg-adr2c2);}
    50% {background-position: var(--display-position-bg-adr2c1);}/**/
                                                           
    74% {background-position: var(--display-position-bg-adr2c1);}
    75% {background-position: var(--display-position-bg-adr2c10);}
                                                                 
    98% {background-position: var(--display-position-bg-adr2c10);}
    99% {background-position: var(--display-position-bg-adr2c1);}
    100%{background-position: var(--display-position-bg-adr2c1);}
}
@keyframes menu-checkadrpage3{
    0%  {background-position: var(--display-position-bg-adr3c1);}
    24% {background-position: var(--display-position-bg-adr3c1);}
    25% {background-position: var(--display-position-bg-adr3c4);}/**/
                                                           
    49% {background-position: var(--display-position-bg-adr3c4);}
    50% {background-position: var(--display-position-bg-adr3c1);}/**/
                                                           
    74% {background-position: var(--display-position-bg-adr3c1);}
    75% {background-position: var(--display-position-bg-adr3c7);}
                                                                
    98% {background-position: var(--display-position-bg-adr3c7);}
    99% {background-position: var(--display-position-bg-adr3c1);}
    100%{background-position: var(--display-position-bg-adr3c1);}
}

@keyframes menu-ipsetpage1{
    0%    {background-position: 0 0;}
    5.66% {background-position: -1px 0;}
    6.66%  {background-position: var(--display-position-bg-menu1);}

    12.66%  {background-position: var(--display-position-bg-menu1);}
    13.32% {background-position: var(--display-position-bg-menu2);}

    18.92% {background-position: var(--display-position-bg-menu2);}
    19.98% {background-position: var(--display-position-bg-menu3);}

    25.98% {background-position: var(--display-position-bg-menu3);}
    25.985% {background-position: var(--display-position-bg-menu2static);}
    26.64% {background-position: var(--display-position-bg-menu3s1);}
    
    32.3% {background-position: var(--display-position-bg-menu3s1);}
    32.305% {background-position: var(--display-position-bg-menu2dhcp);}
    33.3%  {background-position: var(--display-position-bg-menu3s2);}
    
    38.96%  {background-position: var(--display-position-bg-menu3s2);}
    38.965%  {background-position: var(--display-position-bg-menu3s1);}
    39.96% {background-position: var(--display-position-bg-menu3s3);}
    
    45.62% {background-position: var(--display-position-bg-menu3s3);}
    46.62% {background-position: var(--display-position-bg-menu3s4);}
    
    52.28% {background-position: var(--display-position-bg-menu3s4);}
    53.28% {background-position: var(--display-position-bg-menu3s5);}
    
    58.94% {background-position: var(--display-position-bg-menu3s5);}
    59.94% {background-position: var(--display-position-bg-menu3s6);}
    
    65.6% {background-position: var(--display-position-bg-menu3s6);}
    66.6%  {background-position: var(--display-position-bg-menu3s7);}
    
    72.26%  {background-position: var(--display-position-bg-menu3s7);}
    73.26% {background-position: var(--display-position-bg-menu3s8);}
    
    78.92% {background-position: var(--display-position-bg-menu3s8);}
    78.925%  {background-position: var(--display-position-bg-menu3s2);}
    79.92% {background-position: var(--display-position-bg-menu3s8p1);}
    
    99.8% {background-position: var(--display-position-bg-menu3s8p1);}
    99.9%    {background-position: 0 0;}
    100%    {background-position: 0 0;}
}

@keyframes menu-ipsetpage2{
    0%    {background-position: var(--display-position-bg-menu3s8p1);}
    27% {background-position: var(--display-position-bg-menu3s8p1);}
    30%  {background-position: var(--display-position-bg-menu3s8p2);}
    
    57% {background-position: var(--display-position-bg-menu3s8p2);}
    60% {background-position: var(--display-position-bg-menu3s8p4);}

    99.9% {background-position: var(--display-position-bg-menu3s8p4);}
    100% {background-position: var(--display-position-bg-menu3s8p1);}
}

@keyframes menu-ipsetpage3{
    0%    {background-position: var(--display-position-bg-menu3s8p4);}

    15.6% {background-position: var(--display-position-bg-menu3s8p4);}
    16.6%  {background-position: var(--display-position-bg-menu3s8p5);}
    
    32.2% {background-position: var(--display-position-bg-menu3s8p5);}
    33.2% {background-position: var(--display-position-bg-menu3s8p6);}

    48.8% {background-position: var(--display-position-bg-menu3s8p6);}
    49.8% {background-position: var(--display-position-bg-menu3s8p7);}

    65.4% {background-position: var(--display-position-bg-menu3s8p7);}
    66.4% {background-position: var(--display-position-bg-menu3s8p8);}


    99.5% {background-position: var(--display-position-bg-menu3s8p8);}
    100% {background-position: var(--display-position-bg-menu3s8p4);}
}

/*#endregion */

/*#region RTU Indicator */
imgobj div.imgitem.indicator {
    background-repeat: no-repeat;
    position: relative;
    width: var(--indicator-size-width );
    height: var(--indicator-size-height );
    padding-bottom: var(--indicator-size-padbottom);
}
imgobj div.imgitem.indicator span {    
    position: absolute;
    top:    var(--indicator-span-size-top);
    width:  var(--indicator-span-size-width);
    height: var(--indicator-span-size-height);
}

imgobj div.imgitem.indicator span.frame {
    background-image: var(--indicator-span-frame-image-url);
    top: var(--indicator-span-frame-size-top);
    left: var(--indicator-span-frame-size-left);
    width: var(--indicator-span-frame-size-width);
    height: var(--indicator-span-frame-size-height);
}
imgobj div.imgitem.indicator span.alarm {background-image: var(--indicator-span-r-image-url);}
imgobj div.imgitem.indicator span.rx1,span.rx2 {background-image: var(--indicator-span-y-image-url);}
imgobj div.imgitem.indicator span.tx1,span.tx2,span.power {background-image: var(--indicator-span-g-image-url);}

imgobj div.imgitem.indicator span.alarm {inset: var(--indicator-span-alarm-inset);}
imgobj div.imgitem.indicator span.power {inset: var(--indicator-span-power-inset);}
imgobj div.imgitem.indicator span.tx1   {inset: var(--indicator-span-tx1-inset  );}
imgobj div.imgitem.indicator span.tx2   {inset: var(--indicator-span-tx2-inset  );}
imgobj div.imgitem.indicator span.rx1   {inset: var(--indicator-span-rx1-inset  );}
imgobj div.imgitem.indicator span.rx2   {inset: var(--indicator-span-rx2-inset  );}

imgobj div.imgitem.indicator span.suspend {    
    animation: indicatoroff 6s infinite linear;
}
imgobj div.imgitem.indicator span.blink1 {    
    animation: indicatorblink1 1s infinite linear;
}
imgobj div.imgitem.indicator span.blink2 {    
    animation: indicatorblink2 2s infinite linear;
}
imgobj div.imgitem.indicator span.off {    
    opacity:0.2;
}
imgobj div.imgitem.indicator span.on {    
    opacity:1;
}
@keyframes indicatorblink1 {
    0% {opacity:0.2;}    
    5% {opacity:1;}    
    10% {opacity:0.2;}
    100% {opacity:0.2;}
}
@keyframes indicatorblink2 {
    0% {opacity:0.2;}    
    2.5% {opacity:1;}    
    5% {opacity:0.2;}
    100% {opacity:0.2;}
}
@keyframes indicatoroff {
    0% {opacity:1;}    
    35% {opacity:1;}    
    40% {opacity:0.05;}
    100% {opacity:0.05;}
}
imgobj div.imgitem.indicator span.delay1 {animation-delay: 70ms;}
/*#endregion */

/*#region RTU Button*/
imgobj div.imgitem.rtubutton {
    background-image: var(--rtubutton-image-bg-url);
    background-repeat: no-repeat;
    position: relative;
    width: 27.0em;
    height: var(--rtubutton-img-size-height);
    margin: 5px;
}
imgobj div.imgitem.rtubutton span{    
    position: absolute;
    width:  var(--rtubutton-span-size-width );
    height: var(--rtubutton-span-size-height);
    top:    var(--rtubutton-span-size-top   );
}
imgobj div.imgitem.rtubutton span.esc   {background-image: var(--rtubutton-span-esc-image-url, var(--rtubutton-span-image-url)); left:var(--rtubutton-span-esc-position);   }
imgobj div.imgitem.rtubutton span.left  {background-image: var(--rtubutton-span-left-image-url,var(--rtubutton-span-image-url)); left:var(--rtubutton-span-left-position);  }
imgobj div.imgitem.rtubutton span.right {background-image: var(--rtubutton-span-right-image-url,var(--rtubutton-span-image-url)); left:var(--rtubutton-span-right-position); }
imgobj div.imgitem.rtubutton span.select{background-image: var(--rtubutton-span-select-image-url,var(--rtubutton-span-image-url)); left:var(--rtubutton-span-select-position);}




@keyframes buttonclick2 {
    0% {transform: scale(1);}
    5% {transform: scale(0.5);}
    10% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick4 {
    0% {transform: scale(1);}
    2.5% {transform: scale(0.5);}
    5% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick6 {
    0% {transform: scale(1);}
    1.7% {transform: scale(0.5);}
    3.3% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick8 {
    0% {transform: scale(1);}
    1.3% {transform: scale(0.5);}
    2.5% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick10 {
    0% {transform: scale(1);}
    1% {transform: scale(0.5);}
    2% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick12 {
    0% {transform: scale(1);}
    0.8% {transform: scale(0.5);}
    1.7% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick14 {
    0% {transform: scale(1);}
    0.71% {transform: scale(0.5);}
    1.43% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick16 {
    0% {transform: scale(1);}
    0.63% {transform: scale(0.5);}
    1.25% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick18 {
    0% {transform: scale(1);}
    0.56% {transform: scale(0.5);}
    1.11% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttonclick18example {
    0% {transform: scale(1);}
    0.56% {transform: scale(0.5);}
    1.11% {transform: scale(1);}/* Click1 */
    11.11% {transform: scale(1);}
    11.67% {transform: scale(0.5);}
    12.22% {transform: scale(1);}/* Click2 */
    22.22% {transform: scale(1);}
    22.78% {transform: scale(0.5);}
    23.33% {transform: scale(1);}/* Click3 */
    33.33% {transform: scale(1);}
    33.89% {transform: scale(0.5);}
    34.44% {transform: scale(1);}/* Click4 */
    44.44% {transform: scale(1);}
    45% {transform: scale(0.5);}
    45.55% {transform: scale(1);}/* Click5 */
    55.56% {transform: scale(1);}
    56.12% {transform: scale(0.5);}
    56.67% {transform: scale(1);}/* Click6 */
    66.67% {transform: scale(1);}
    67.23% {transform: scale(0.5);}
    67.78% {transform: scale(1);}/* Click7 */
    77.78% {transform: scale(1);}
    78.34% {transform: scale(0.5);}
    78.89% {transform: scale(1);}/* Click8 */
    88.89% {transform: scale(1);}
    89.45% {transform: scale(0.5);}
    90% {transform: scale(1);}/* Click9 */
    100% {transform: scale(1);}
}
@keyframes buttonclickinvsetleft {
    0% {transform: scale(1);}

    11.11% {transform: scale(1);}
    11.67% {transform: scale(0.5);}
    12.22% {transform: scale(1);}/* Click2 */

    22.22% {transform: scale(1);}
    22.78% {transform: scale(0.5);}
    23.33% {transform: scale(1);}/* Click3 */

    44.44% {transform: scale(1);}
    45% {transform: scale(0.5);}
    45.55% {transform: scale(1);}/* Click5 */

    100% {transform: scale(1);}
}

@keyframes buttonclickinvsetright2200n {
    0% {transform: scale(1);}

    10%{transform: scale(1);}10.51% {transform: scale(0.5);}11.01% {transform: scale(1);}
/* Click2 */

    20%{transform: scale(1);}20.51% {transform: scale(0.5);}21.01% {transform: scale(1);}
/* Click3 */

    50%{transform: scale(1);}50.51% {transform: scale(0.5);}51.01% {transform: scale(1);}
/* Click5 */


    100% {transform: scale(1);}
}
@keyframes buttonclickinvsetselect {
    0% {transform: scale(1);}
    0.56% {transform: scale(0.5);}
    1.11% {transform: scale(1);}/* Click1 */
    33.33% {transform: scale(1);}
    33.89% {transform: scale(0.5);}
    34.44% {transform: scale(1);}/* Click4 */
    55.56% {transform: scale(1);}
    56.12% {transform: scale(0.5);}
    56.67% {transform: scale(1);}/* Click6 */
    100% {transform: scale(1);}
}
@keyframes buttonclickinvsetselect2200n {
    0%{transform: scale(1);}0.51% {transform: scale(0.5);}1.01% {transform: scale(1);}
/* Click1 */

    30%{transform: scale(1);}30.51% {transform: scale(0.5);}31.01% {transform: scale(1);}
/* Click4 */

    40%{transform: scale(1);}40.51% {transform: scale(0.5);}41.01% {transform: scale(1);}
/*  Click6 */

    60%{transform: scale(1);}60.51% {transform: scale(0.5);}61.01% {transform: scale(1);}
/* Click6 */

    100% {transform: scale(1);}
}


@keyframes buttonclickinvsetesc {
    0% {transform: scale(1);}
    66.67% {transform: scale(1);}
    67.23% {transform: scale(0.5);}
    67.78% {transform: scale(1);}/* Click7 */
    100% {transform: scale(1);}
}
@keyframes buttonclickinvsetesc2200n {
    0% {transform: scale(1);}

    70%{transform: scale(1);}70.51% {transform: scale(0.5);}71.01% {transform: scale(1);}
/* Click7 */

    100% {transform: scale(1);}
}

@keyframes buttonclickcheckadrselect {
    0% {transform: scale(1);}
    1% {transform: scale(0.5);}
    2% {transform: scale(1);}/* Click1 */

    14.28% {transform: scale(1);}
    15.28% {transform: scale(0.5);}
    16.28% {transform: scale(1);}/* Click4 */

    28.56% {transform: scale(1);}
    29.56% {transform: scale(0.5);}
    30.56% {transform: scale(1);}/* Click6 */

    42.84% {transform: scale(1);}
    43.84% {transform: scale(0.5);}
    44.84% {transform: scale(1);}/* Click6 */

    57.12% {transform: scale(1);}
    58.12% {transform: scale(0.5);}
    59.12% {transform: scale(1);}/* Click6 */

    100% {transform: scale(1);}
}

@keyframes buttonclickcheckadresc {
    0% {transform: scale(1);}

    71.4% {transform: scale(1);}
    72.4% {transform: scale(0.5);}
    73.4% {transform: scale(1);}/* Click6 */

    85.68% {transform: scale(1);}
    86.68% {transform: scale(0.5);}
    87.68% {transform: scale(1);}/* Click6 */

    100% {transform: scale(1);}
}
@keyframes buttonclickcheckadrpageleft {
    0% {transform: scale(1);}

    25% {transform: scale(1);}
    26% {transform: scale(0.5);}
    27% {transform: scale(1);}/* Click6 */

    50% {transform: scale(1);}
    51% {transform: scale(0.5);}
    52% {transform: scale(1);}/* Click6 */

    100% {transform: scale(1);}
}

@keyframes buttonclick_ipsetpage1_d {
    0% {transform: scale(1);}

    4%  {transform: scale(1);}
    4.33%  {transform: scale(0.5);}
    4.66%  {transform: scale(1);} /* click 1 */

    10.66%  {transform: scale(1);}
    11%  {transform: scale(0.5);}
    11.32% {transform: scale(1);}/* click 2*/

    17.33%  {transform: scale(1);}
    17.66%  {transform: scale(0.5);}
    17.98% {transform: scale(1);}/* click 3*/

    24%  {transform: scale(1);}
    24.33%  {transform: scale(0.5);}
    24.64% {transform: scale(1);}/* click 4*/

    30.66%  {transform: scale(1);}
    31%  {transform: scale(0.5);}
    31.3%  {transform: scale(1);}/* click 5*/

    37.33%  {transform: scale(1);}
    37.66%  {transform: scale(0.5);}
    37.96% {transform: scale(1);}/* click 6*/

    44%  {transform: scale(1);}
    44.33%  {transform: scale(0.5);}
    44.62% {transform: scale(1);}/* click 7*/

    50.66%  {transform: scale(1);}
    51%  {transform: scale(0.5);}
    51.28% {transform: scale(1);}/* click 8*/

    57.33%  {transform: scale(1);}
    57.66%  {transform: scale(0.5);}
    57.94% {transform: scale(1);}/* click 9*/

    64%  {transform: scale(1);}
    64.3%  {transform: scale(0.5);}
    64.6%  {transform: scale(1);}/* click 10*/

    70.66%  {transform: scale(1);}
    70.96%  {transform: scale(0.5);}
    71.26% {transform: scale(1);}/* click 11*/

    77.33%  {transform: scale(1);}
    77.66%  {transform: scale(0.5);}
    77.92% {transform: scale(1);}/* click 12*/

    84%  {transform: scale(1);}
    84.3%  {transform: scale(0.5);}
    84.58% {transform: scale(1);}/* click 13*/

    90.64%  {transform: scale(1);}
    90.94%  {transform: scale(0.5);}
    91.24% {transform: scale(1);}/* click 14*/

    100% {transform: scale(1);}
}

@keyframes buttonclick_ipsetpage1_select {
    0% {transform: scale(1);}

    3.88%  {transform: scale(1);}
    4.22%  {transform: scale(0.5);}
    4.66%  {transform: scale(1);} /* click 1 */

    24%  {transform: scale(1);}
    24.33%  {transform: scale(0.5);}
    24.64% {transform: scale(1);}/* click 4*/

    77.33%  {transform: scale(1);}
    77.66%  {transform: scale(0.5);}
    77.92% {transform: scale(1);}/* click 12*/

    100% {transform: scale(1);}
}
@keyframes buttonclick_ipsetpage1_right {
    0% {transform: scale(1);}

    10.66%  {transform: scale(1);}
    11%  {transform: scale(0.5);}
    11.32% {transform: scale(1);}/* click 2*/

    17.33%  {transform: scale(1);}
    17.66%  {transform: scale(0.5);}
    17.98% {transform: scale(1);}/* click 3*/

    30.66%  {transform: scale(1);}
    31%  {transform: scale(0.5);}
    31.3%  {transform: scale(1);}/* click 5*/

    37.33%  {transform: scale(1);}
    37.66%  {transform: scale(0.5);}
    37.96% {transform: scale(1);}/* click 6*/

    44%  {transform: scale(1);}
    44.33%  {transform: scale(0.5);}
    44.62% {transform: scale(1);}/* click 7*/

    50.66%  {transform: scale(1);}
    51%  {transform: scale(0.5);}
    51.28% {transform: scale(1);}/* click 8*/

    57.33%  {transform: scale(1);}
    57.66%  {transform: scale(0.5);}
    57.94% {transform: scale(1);}/* click 9*/

    64%  {transform: scale(1);}
    64.3%  {transform: scale(0.5);}
    64.6%  {transform: scale(1);}/* click 10*/

    70.66%  {transform: scale(1);}
    70.96%  {transform: scale(0.5);}
    71.26% {transform: scale(1);}/* click 11*/

    100% {transform: scale(1);}
}

@keyframes buttonclick_ipsetpage2_right {
    0% {transform: scale(1);}

    15%  {transform: scale(1);}
    17.5%  {transform: scale(0.5);}
    20%  {transform: scale(1);} /* click 1 */


    100% {transform: scale(1);}
}
@keyframes buttonclick_ipsetpage2_select {
    0% {transform: scale(1);}

    45%  {transform: scale(1);}
    47.5%  {transform: scale(0.5);}
    50%  {transform: scale(1);} /* click 1 */


    100% {transform: scale(1);}
}
@keyframes buttonclick_ipsetpage3_select {
    0% {transform: scale(1);}

    11.6%  {transform: scale(1);}
    12.6%  {transform: scale(0.5);}
    13.6%  {transform: scale(1);} /* click 1 */

    28.2%  {transform: scale(1);}
    29.2%  {transform: scale(0.5);}
    30.2%  {transform: scale(1);} /* click 1 */

    44.8%  {transform: scale(1);}
    45.8%  {transform: scale(0.5);}
    46.8%  {transform: scale(1);} /* click 1 */

    61.4%  {transform: scale(1);}
    62.4%  {transform: scale(0.5);}
    63.4%  {transform: scale(1);} /* click 1 */


    100% {transform: scale(1);}
}

@keyframes buttonclickcheckadrpageright {
    0% {transform: scale(1);}
    1% {transform: scale(0.5);}
    2% {transform: scale(1);}/* Click1 */

    75% {transform: scale(1);}
    76% {transform: scale(0.5);}
    77% {transform: scale(1);}/* Click6 */
    
    100% {transform: scale(1);}
}

@keyframes buttontwoclick4 {
    0% {transform: scale(1);}
    2.5% {transform: scale(0.5);}
    5% {transform: scale(1);}
    50% {transform: scale(1);}
    52.5% {transform: scale(0.5);}
    55% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes buttontwoclick8 {
    0% {transform: scale(1);}
    1.25% {transform: scale(0.5);}
    2.5% {transform: scale(1);}
    25% {transform: scale(1);}
    26.25% {transform: scale(0.5);}
    27.5% {transform: scale(1);}
    100% {transform: scale(1);}
}
imgobj div.imgitem.rtubutton.click span.click {    
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}
imgobj div.imgitem.rtubutton.click span.twoclick {    
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
imgobj div.imgitem.rtubutton.click span.click.dura2 {animation-name: buttonclick2;animation-duration:2s;}
imgobj div.imgitem.rtubutton.click span.click.dura4 {animation-name: buttonclick4;animation-duration:4s;}
imgobj div.imgitem.rtubutton.click span.click.dura6 {animation-name: buttonclick6;animation-duration:6s;}
imgobj div.imgitem.rtubutton.click span.click.dura8 {animation-name: buttonclick8;animation-duration:8s;}
imgobj div.imgitem.rtubutton.click span.click.dura16 {animation-name: buttonclick16;animation-duration:16s;}
imgobj div.imgitem.rtubutton.click span.twoclick.dura4 {animation-name: buttontwoclick4;animation-duration:4s;}
imgobj div.imgitem.rtubutton.click span.twoclick.dura8 {animation-name: buttontwoclick8;animation-duration:8s;}
imgobj div.imgitem.rtubutton.click span.delay1 {animation-delay: 950ms;}
imgobj div.imgitem.rtubutton.click span.delay2 {animation-delay:2950ms;}
imgobj div.imgitem.rtubutton.click span.delay3 {animation-delay:4950ms;}
imgobj div.imgitem.rtubutton.click span.delay4 {animation-delay:6950ms;}
imgobj div.imgitem.rtubutton.click span.delay7 {animation-delay:12950ms;}
imgobj div.imgitem.rtubutton.click span.delay8 {animation-delay:14950ms;}
imgobj div.imgitem.rtubutton.click span.delay9 {animation-delay:16950ms;}

imgobj div.imgitem.rtubutton.click span.click.invset.select {
    animation-name: buttonclickinvsetselect;
    animation-delay: 950ms;
    animation-duration: 18s;
}
imgobj div.imgitem.rtubutton.click span.click.invset.left {
    animation-name: buttonclickinvsetleft;
    animation-delay: 950ms;
    animation-duration: 18s;
}
imgobj div.imgitem.rtubutton.click span.click.invset.esc {
    animation-name: buttonclickinvsetesc;
    animation-delay: 950ms;
    animation-duration: 18s;
}
/*#endregion */

/*#region RTU Inverter address */
div.item imgobj div.imgitem.inverteradds {
    position: relative;
    width: 29.0em;
    height: 4.44em;
}
div.item.hor imgobj div.imgitem.inverteradds {
    width: 71.6em;
    height: 10.97em;
}
div.item imgobj div.imgitem.inverteradds span {
    position: absolute;
    background-repeat: no-repeat;
}
div.item imgobj div.imgitem.inverteradds span.frame {
    width: 29.0em;
    height: 4.44em;
    top: 0em;
    left: 0em;
}

div.item imgobj div.imgitem.inverteradds span.frame {
    background-image: var(--inverteradds-span-frame-image-url);
}

div.item.hor imgobj div.imgitem.inverteradds span.frame {
    width: 71.6em;
    height: 10.97em;
}



/*#endregion */

/*#region RTU Connector */
div.item imgobj div.imgitem.connector {
    position: relative;
    width: 29.0em;
    height: 7.1em;
}
div.item.hor imgobj div.imgitem.connector {
    width: 55.8em;
    height: 13.7em;
}
div.item imgobj div.imgitem.connector span {
    position: absolute;
    background-repeat: no-repeat;
}
div.item imgobj div.imgitem.connector span.frame {
    width: 29.0em;
    height: 7.1em;
    top: 0em;
    left: 0em;
}
div.item.hor imgobj div.imgitem.connector span.frame {
    width: 55.8em;
    height: 13.7em;
}
/*var(--inverteradds-span-frame-image-url);*/
div.item imgobj div.imgitem.connector span.frame {
    background-image: var(--connector-span-frame-image-url);
}
div.item imgobj div.imgitem.connector span.notify.lan {
    background-image: var(--connector-span-notify-image-url);
    width: 4.6em;
    height: 4.3em;
    top: 2.1em;
    left: 19em;
}
div.item.hor imgobj div.imgitem.connector span.notify.lan {
    width: 8.9em;
    height: 8.1em;
    top: 4.2em;
    left: 37.1em;
}
div.item imgobj div.imgitem.connector span.highlight {
    animation: connotifyhighlight 1s infinite linear;
}
@keyframes connotifyhighlight {
    0% {transform: scale(1);}
    5% {transform: scale(1.02);}
    10% {transform: scale(1);}
    100% {transform: scale(1);}
}
/*#endregion */

/*#region RTU Connect - 485 Inverter - Horizontal*/

imgobj div.imgitem {font-size:inherit;background-size:contain;}
imgobj div.imgitem span {font-size:inherit; background-size:contain;}


imgobj div.imgitem.inv485hor span.highlight {
    animation: notifyhighlight 1s infinite linear;
}
imgobj div.imgitem.inv485hor span.linedraw.hor1 {
    animation: linedrawhor1 7s infinite linear;
}
imgobj div.imgitem.inv485hor span.linedraw.hor2 {
    animation: linedrawhor2 7s infinite linear;
}
imgobj div.imgitem.inv485hor span.linedraw.hor3 {
    animation: linedrawhor3 7s infinite linear;
}
@keyframes notifyhighlight {
    0% {transform: scale(1);}
    5% {transform: scale(1.02);}
    10% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes linedrawhor1 {
    0% {clip-path: inset(0 100% 0 0);}
    20% {clip-path: inset(0 100% 0 0);}
    25% {clip-path: inset(0 0 0 0);}
    26% {transform: scale(1);}
    27% {transform: scale(1.05);}
    28% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawhor2 {
    0% {clip-path: inset(0 100% 0 0);}
    30% {clip-path: inset(0 100% 0 0);}
    35% {clip-path: inset(0 0 0 0);}
    36% {transform: scale(1);}
    37% {transform: scale(1.05);}
    38% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawhor3 {
    0% {clip-path: inset(0 100% 0 0);}
    40% {clip-path: inset(0 100% 0 0);}
    45% {clip-path: inset(0 0 0 0);}
    46% {transform: scale(1);}
    47% {transform: scale(1.05);}
    48% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
imgobj div.imgitem.inv485hor {
    position: relative;
    width: 71.6em;
    height: 17em;
}
imgobj div.imgitem.inv485hor span {
    position: absolute;
    background-repeat: no-repeat;    
    
}
imgobj div.imgitem.inv485hor span.frame {
    width: 55.8em;
    height: 13.7em;
    top: 0em;
    left: 0em;
}
imgobj div.imgitem.inv485hor span.frame {
    background-image: var(--connector-span-frame-image-url);
}
imgobj div.imgitem.inv485hor span.inv {
    background-image: var(--inv485hor-span-inv-image-url);
    width: 9.9em;
    height: 13.7em;
    top: 0em;
    left: 61.7em;
}
imgobj div.imgitem.inv485hor span.notify {
    background-image: url(../SrImg/RTU/2200/inv_hor_notify485.svg);
    width: 9.6em;
    height: 10.8em;
    top: 2.5em;
    left: 12.2em;
}
imgobj div.imgitem.inv485hor span.line.plus {
    background-image: url(../SrImg/RTU/2200/inv_hor_line_plus.svg);
    width: 49.7em;
    height: 1.8em;
    top: 13.2em;
    left: 14.2em;
}
imgobj div.imgitem.inv485hor span.line.minus {
    background-image: url(../SrImg/RTU/2200/inv_hor_line_minus.svg);
    width: 49.2em;
    height: 2.9em;
    top: 13.2em;
    left: 16.6em;
}
imgobj div.imgitem.inv485hor span.line.ground {
    background-image: url(../SrImg/RTU/2200/inv_hor_line_ground.svg);
    width: 49.5em;
    height: 3.8em;
    top: 13.2em;
    left: 19.3em;
}
/*#endregion */

/*#region RTU Connect - 485 Inverter - Vertical*/
imgobj div.imgitem.inv485 {
    position: relative;
    width:  30.0em;
    height: 29.5em;
}
imgobj div.imgitem.inv485 span {
    position: absolute;
    background-repeat: no-repeat;
}
imgobj div.imgitem.inv485 span.highlight {
    animation: notify485highlight 1s infinite linear;
}
imgobj div.imgitem.inv485 span.frame {
    background-image: url(../SrImg/RTU/2200/inv_frame.svg);
    width:  29.6em;
    height: 26.9em;
    top:  0em;
    left: 0em;
}
div.item imgobj div.imgitem.inv485 span.rs485_1 {
    background-image: url(../SrImg/RTU/2200/inv485_rs485_1.svg);
    width: 9.0em;
    height: 11.7em;
    top: 0;
    left: 10.5em;
}
div.item imgobj div.imgitem.inv485 span.rs485hub {
    background-image: url(../SrImg/RTU/2200/inv485_rs485hub.svg);
    width: 24.4em;
    height: 10.1em;
    top: 7em;
    left: 2.8em;
}
div.item imgobj div.imgitem.inv485 span.inv {
    background-image: url(../SrImg/RTU/2200/inv485_inv.svg);
    width: 8.1em;
    height: 10em;
    top: 16.9em;
}
div.item imgobj div.imgitem.inv485 span.inv.no1 {    
    left: 0;
}
div.item imgobj div.imgitem.inv485 span.inv.no2 {    
    left: 10.7em;
}
div.item imgobj div.imgitem.inv485 span.inv.no3 {    
    left: 21.2em;
}
imgobj div.imgitem.inv485 span.sign.valid {
    background-image: url(../SrImg/RTU/2200/inv_sign_valid.svg);
    width:  6.7em;
    height: 3.9em;
    top:  3.6em;
    left: 1.2em;
}
imgobj div.imgitem.inv485 span.sign.invalid {
    background-image: url(../SrImg/RTU/2200/inv_sign_invalid.svg);
    width:  8.9em;
    height: 3.8em;
    top: 3.6em;
    left:0.3em;
}
imgobj div.imgitem.inv485 span.sign.redundanttest {
    background-image: url(../SrImg/RTU/2200/inv_sign_redundanttest.svg);
    width: 10.2em;
    height: 1.5em;
    top:  10.0em;
    left: 19.6em;
}
imgobj div.imgitem.inv485 span.sign.redundanttest.line1 {
    background-image: url(../SrImg/RTU/2200/inv_sign_redundanttest_line1.svg);
    width: 12.6em;
    height: 5.7em;
    top: 11.4em;
    left: 2.9em;
}
imgobj div.imgitem.inv485 span.sign.redundanttest.line2 {
    background-image: url(../SrImg/RTU/2200/inv_sign_redundanttest_line2.svg);
    width:  5.0em;
    height: 5.6em;
    top:  11.4em;
    left: 11.8em;
}
imgobj div.imgitem.inv485 span.sign.redundanttest.line3 {
    background-image: url(../SrImg/RTU/2200/inv_sign_redundanttest_line3.svg);
    width: 14.9em;
    height: 5.7em;
    top:  11.4em;
    left: 11.8em;
}
imgobj div.imgitem.inv485 span.sign.checkline {
    background-image: url(../SrImg/RTU/2200/inv_sign_checkline.svg);
    width: 29.8em;
    height: 2.6em;
    top: 13.4em;
    left: 0.1em;
}
imgobj div.imgitem.inv485 span.sign.endresist {
    background-image: url(../SrImg/RTU/2200/inv_sign_endresist.svg);
    width:   9.1em;
    height: 13.3em;
    top:  16.3em;
    left: 20.7em;
}
imgobj div.imgitem.inv485 span.sign.endresistcheck {
    background-image: url(../SrImg/RTU/2200/inv_sign_endresistcheck.svg);
    width:   9.1em;
    height: 13.3em;
    top:  16.3em;
    left: 20.7em;
}
imgobj div.imgitem.inv485 span.status.invalid.line.minus {
    background-image: url(../SrImg/RTU/2200/inv_status_invalid_line_minus.svg);
    width: 21.4em;
    height: 5.6em;
    top: 11.4em;
    left: 6.2em;
}
imgobj div.imgitem.inv485 span.status.invalid.line.plus {
    background-image: url(../SrImg/RTU/2200/inv_status_invalid_line_plus.svg);
    width: 21.1em;
    height: 5.5em;
    top: 11.4em;
    left: 2.5em;
}
imgobj div.imgitem.inv485 span.status.valid.line.minus {
    background-image: url(../SrImg/RTU/2200/inv_status_valid_line_minus.svg);
    width: 21.3em;
    height: 5.4em;
    top: 11.4em;
    left: 6.2em;
}
imgobj div.imgitem.inv485 span.status.valid.line.plus {
    background-image: url(../SrImg/RTU/2200/inv_status_valid_line_plus.svg);
    width: 21.3em;
    height: 5.6em;
    top: 11.4em;
    left: 2.4em;
}
imgobj div.imgitem.inv485 span.status.hub.line.top.minus {
    background-image: url(../SrImg/RTU/2200/inv_status_hub_line_top_minus.svg);
    width: 7.3em;
    height: 2.0em;
    top: 5.7em;
    left: 18.6em;
}
imgobj div.imgitem.inv485 span.status.hub.line.top.plus {
    background-image: url(../SrImg/RTU/2200/inv_status_hub_line_top_plus.svg);
    width: 7.3em;
    height: 2.0em;
    top: 4.7em;
    left: 13.3em;
}
imgobj div.imgitem.inv485 span.status.hub.line.bottom {
    top: 17.1em;
}
imgobj div.imgitem.inv485 span.status.hub.line.bottom.minus {
    background-image: url(../SrImg/RTU/2200/inv_status_hub_line_bottom_minus.svg);
    width: 21.5em;
    height: 4.9em;
    left: 5.6em;
}
imgobj div.imgitem.inv485 span.status.hub.line.bottom.plus {
    background-image: url(../SrImg/RTU/2200/inv_status_hub_line_bottom_plus.svg);
    width: 21.9em;
    height: 4.9em;
    left: 1.9em;
}

imgobj div.imgitem.inv485 span.sign.draw.valid {
    animation: signdrawvalid 5s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.invalid {
    animation: signdrawinvalid 5s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.check.valid {
    animation: signdrawcheckvalid 10s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.check.invalid {
    animation: signdrawcheckinvalid 10s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.endresist {
    animation: signdrawvalidend 5s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.check.endresist {
    animation: signdrawcheckvalidend 10s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw0.redundanttest {
    animation: signdrawredundanttestline0 6s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.checkline {
    animation: signdrawcheckline 2s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.redundanttest.line1 {
    animation: signdrawredundanttestline1 6s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.redundanttest.line2 {
    animation: signdrawredundanttestline2 6s infinite linear;
}
imgobj div.imgitem.inv485 span.sign.draw.redundanttest.line3 {
    animation: signdrawredundanttestline3 6s infinite linear;
}


imgobj div.imgitem.inv485 span.line.valid.linedraw.plus {
    animation: linedrawvalidplus 5s infinite linear;
}
imgobj div.imgitem.inv485 span.line.valid.linedraw.minus {
    animation: linedrawvalidminus 5s infinite linear;
}
imgobj div.imgitem.inv485 span.line.invalid.linedraw.plus {
    animation: linedrawinvalidplus 5s infinite linear;
}
imgobj div.imgitem.inv485 span.line.invalid.linedraw.minus {
    animation: linedrawinvalidminus 5s infinite linear;
}



imgobj div.imgitem.inv485 span.line.check.invalid.linedraw.plus {
    animation: linedrawcheckinvalidplus 10s infinite linear;
}
imgobj div.imgitem.inv485 span.line.check.invalid.linedraw.minus {
    animation: linedrawcheckinvalidminus 10s infinite linear;
}
imgobj div.imgitem.inv485 span.line.check.valid.linedraw.plus {
    animation: linedrawcheckvalidplus 10s infinite linear;
}
imgobj div.imgitem.inv485 span.line.check.valid.linedraw.minus {
    animation: linedrawcheckvalidminus 10s infinite linear;
}
imgobj div.imgitem.inv485 span.line.check.hub.linedraw.plus {
    animation: linedrawcheckhubplus 10s infinite linear;
}

imgobj div.imgitem.inv485 span.line.check.hub.linedraw.minus {
    animation: linedrawcheckhubminus 10s infinite linear;
}

imgobj div.imgitem.inv485 span.inv.check.draw.down {
    animation: objectdrawhalfdown 10s infinite linear;
}

imgobj div.imgitem.inv485 span.rs485_1.check.draw.upright {
    animation: objectdrawhalfupright 10s infinite linear;
}
imgobj div.imgitem.inv485 span.rs485hub.check.draw.up {
    animation: objectdrawfullup 10s infinite linear;
}
imgobj div.imgitem.inv485 span.line.linedrawoff {
    animation: linedrawvalidoff 6s infinite linear;
}
@keyframes notify485highlight {
    0% {transform: scale(1);}
    5% {transform: scale(1.02);}
    10% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes objectdrawhalfdown {
    0% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    50% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transform:translateY(0);}
    60% {clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);transform:translateY(50%);}
    100% {clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);transform:translateY(50%);}    
}
@keyframes objectdrawhalfupright {
    0% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    50% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transform:translateY(0);}
    55% {clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);transform:translateY(-50%) translateX(10.5em);}
    100% {clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);transform:translateY(-50%) translateX(10.5em);}    
}
@keyframes objectdrawfullup {    
    0% {clip-path: inset(100% 0 0 0); transform:translateY(-100%)}
    55% {clip-path: inset(100% 0 0 0);transform:translateY(-100%);}
    60% {clip-path: inset(0 0 0 0);transform:translateY(0);}
    100% {clip-path: inset(0 0 0 0);transform:translateY(0);}    
}


@keyframes linedrawvalidoff {
    0% {opacity:1;}
    28% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@keyframes linedrawvalidplus {
    0% {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    20% {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    25% {clip-path: polygon(0 0, 9.0em 0, 0.2em 5.3em, 0em 5.3em);}
    30% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    31% {transform: scale(1);}
    32% {transform: scale(1.05);}
    33% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawvalidminus {
    0% {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    40% {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    45% {clip-path: polygon(0 0, 9.0em 0, 0.2em 5.3em, 0em 5.3em);}
    50% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    51% {transform: scale(1);}
    52% {transform: scale(1.05);}
    53% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawvalid {
    0% {opacity:0;}
    54% {opacity:0;}
    64% {opacity:1;}
    65% {transform: scale(1);}
    66% {transform: scale(1.05);}
    67% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawinvalid {
    0% {opacity:0;}
    54% {opacity:0;}
    64% {opacity:1;}
    65% {transform: scale(1);}
    66% {transform: scale(1.2);}
    67% {transform: scale(1);}
    68% {transform: scale(1);}
    69% {transform: scale(1.2);}
    70% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawcheckinvalid {
    0%   {opacity:0;}
    27%  {opacity:0;}
    32%  {opacity:1;}
    32.5%{transform: scale(1);}
    33%  {transform: scale(1.2);}
    33.5%{transform: scale(1);}
    34%  {transform: scale(1);}
    34.5%{transform: scale(1.2);}
    35%  {transform: scale(1);}
    49%  {transform: scale(1);opacity:1;}
    50%  {opacity:0;}
    100% {opacity:0;}
}
@keyframes signdrawcheckvalid {
    0%   {opacity:0;}
    77%  {opacity:0;}
    82%  {opacity:1;}
    82.5%{transform: scale(1);}
    83%  {transform: scale(1.05);}
    83.5%{transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawvalidend {
    0% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:1;}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawcheckvalidend {
    0% {opacity:0;}
    80% {opacity:0;}
    85% {opacity:1;}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes signdrawcheckline {
    0% {clip-path: inset(0 100% 0 0);}
    30% {clip-path: inset(0 100% 0 0);}
    35% {clip-path: inset(0 0 0 0);}
    65% {clip-path: inset(0 0 0 0);}
    70% {clip-path: inset(0 0 0 100%);}
    100% {clip-path: inset(0 0 0 100%);}
}
@keyframes signdrawredundanttestline0 {
    0% {clip-path: inset(0 0 100%  0);}
    40% {clip-path: inset(0 0 100%  0);}
    42% {clip-path: inset(0 0 0 0);}
    98% {clip-path: inset(0 0 0 0);}
    100% {clip-path: inset(100% 0 0 0);}
}
@keyframes signdrawredundanttestline1 {
    0% {clip-path: inset(0 0 100%  0);}
    40% {clip-path: inset(0 0 100%  0);}
    42% {clip-path: inset(0 0 0 0);}
    58% {clip-path: inset(0 0 0 0);}
    60% {clip-path: inset(100% 0 0 0);}
    100% {clip-path: inset(100% 0 0 0);}
}
@keyframes signdrawredundanttestline2 {
    0% {clip-path: inset(0 0 100%  0);}
    60% {clip-path: inset(0 0 100%  0);}
    62% {clip-path: inset(0 0 0 0);}
    78% {clip-path: inset(0 0 0 0);}
    80% {clip-path: inset(100% 0 0 0);}
    100% {clip-path: inset(100% 0 0 0);}
}
@keyframes signdrawredundanttestline3 {
    0% {clip-path: inset(0 0 100%  0);}
    80% {clip-path: inset(0 0 100%  0);}
    82% {clip-path: inset(0 0 0 0);}
    98% {clip-path: inset(0 0 0 0);}
    100% {clip-path: inset(100% 0 0 0);}
}
@keyframes linedrawinvalidplus {
    0% {clip-path: inset(0 0 100%  0);}
    20% {clip-path: inset(0 0 100%  0);}
    30% {clip-path: inset(0 0 0 0);}
    31% {transform: scale(1);}
    32% {transform: scale(1.05);}
    33% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawinvalidminus {
    0% {clip-path: inset(0 0 100%  0);}
    40% {clip-path: inset(0 0 100%  0);}
    50% {clip-path: inset(0 0 0 0);}
    51% {transform: scale(1);}
    52% {transform: scale(1.05);}
    53% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}


@keyframes linedrawcheckinvalidplus {
    0%   {clip-path: inset(0 0 100%  0);}
    10%  {clip-path: inset(0 0 100%  0);}
    15%  {clip-path: inset(0 0 0 0);}
    15.5%{transform: scale(1);}
    16%  {transform: scale(1.05);}
    16.5%{transform: scale(1);}
    50%  {clip-path: inset(0 0 0 0);}
	51%   {clip-path: inset(0 0 100%  0);}
	100%   {clip-path: inset(0 0 100%  0);}
}
@keyframes linedrawcheckinvalidminus {
    0%   {clip-path: inset(0 0 100%  0);}
    20%  {clip-path: inset(0 0 100%  0);}
    25%  {clip-path: inset(0 0 0 0);}
    25.5%{transform: scale(1);}
    26%  {transform: scale(1.05);}
    26.5%{transform: scale(1);}
    50%  {clip-path: inset(0 0 0 0);}
	51%   {clip-path: inset(0 0 100%  0);}
	100%   {clip-path: inset(0 0 100%  0);}
}
@keyframes linedrawcheckvalidplus {
    0%   {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    60%  {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    62.5%{clip-path: polygon(0 0, 9.0em 0, 0.2em 5.3em, 0em 5.3em);}
    65%  {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    65.5%{transform: scale(1);}
    66%  {transform: scale(1.05);}
    66.5%{transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawcheckvalidminus {
    0%   {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    70%  {clip-path: polygon(0 0, 100% 0, 100% 0.2em,0em 0.2em);}
    72.5%{clip-path: polygon(0 0, 9.0em 0, 0.2em 5.3em, 0em 5.3em);}
    75%  {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
    75.5%{transform: scale(1);}
    76%  {transform: scale(1.05);}
    76.5%{transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}

@keyframes linedrawcheckhubplus {
    0%   {clip-path: inset(0 0 100%  0);}
    60%  {clip-path: inset(0 0 100%  0);}
    65%  {clip-path: inset(0 0 0 0);}
    65.5%{transform: scale(1);}
    66%  {transform: scale(1.05);}
    66.5%{transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes linedrawcheckhubminus {
    0%   {clip-path: inset(0 0 100%  0);}
    70%  {clip-path: inset(0 0 100%  0);}
    75%  {clip-path: inset(0 0 0 0);}
    75.5%{transform: scale(1);}
    76%  {transform: scale(1.05);}
    76.5%{transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
/*#endregion */

/*#region RTU Connect - 422 Inverter*/
div.item imgobj div.imgitem.inv422 {
    position: relative;
}
div.item.hor imgobj div.imgitem.inv422 {
    width: 61.0em;
    height: 26.5em;
}
div.item imgobj div.imgitem.inv422 span {
    position: absolute;
    background-repeat: no-repeat;
}
div.item imgobj div.imgitem.inv422 span.inv {
    background-image: url(../SrImg/RTU/2200/inv422_inv.svg);
    width: 37.0em;
    height: 15.8em;
    top: 0em;
    left: 23.9em;
}
div.item imgobj div.imgitem.inv422 span.rs485_1 {
    background-image: url(../SrImg/RTU/2200/inv422_rs485_1.svg);
    width: 12.2em;
    height: 16.6em;    
    top: 4.2em;
    left: 0em;
}
div.item imgobj div.imgitem.inv422 span.line {
    top: 15.6em;
}
div.item imgobj div.imgitem.inv422 span.line.plus {
    background-image: url(../SrImg/RTU/2200/inv422_line_plus.svg);
    width: 40.1em;
    height: 7.9em; 
    left:2.3em;
}
div.item imgobj div.imgitem.inv422 span.line.minus {
    background-image: url(../SrImg/RTU/2200/inv422_line_minus.svg);
    width: 40.1em;
    height: 9.4em;        
    left:6.5em;
}
div.item imgobj div.imgitem.inv422 span.line.ground {
    background-image: url(../SrImg/RTU/2200/inv422_line_ground.svg);
    width: 43.7em;
    height:10.7em;        
    left:9.8em;
}
div.item imgobj div.imgitem.inv422 span.line.linedraw.plus {
    animation: inv422linedrawplus 6.7s infinite linear;
}
div.item imgobj div.imgitem.inv422 span.line.linedraw.minus {
    animation: inv422linedrawminus 6.7s infinite linear;
}
div.item imgobj div.imgitem.inv422 span.line.linedraw.ground {
    animation: inv422linedrawground 6.7s infinite linear;
}
@keyframes inv422linedrawplus {
    0% {clip-path: inset(0 100% 0 0);}
    14% {clip-path: inset(0 100% 0 0);}
    21% {clip-path: inset(0 0 0 0);}
    22% {transform: scale(1);}
    23% {transform: scale(1.05);}
    24% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes inv422linedrawminus {
    0% {clip-path: inset(0 100% 0 0);}
    30% {clip-path: inset(0 100% 0 0);}
    37% {clip-path: inset(0 0 0 0);}
    38% {transform: scale(1);}
    39% {transform: scale(1.05);}
    40% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
@keyframes inv422linedrawground {
    0% {clip-path: inset(0 100% 0 0);}
    46% {clip-path: inset(0 100% 0 0);}
    53% {clip-path: inset(0 0 0 0);}
    54% {transform: scale(1);}
    55% {transform: scale(1.05);}
    56% {transform: scale(1);}
    100% {clip-path: inset(0 0 0 0);}
}
/*#endregion */

/*#region 목차 */
div.mancontindex {
    background: rgba(0,0,0,.75);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 1;
}
div.mancontindex.hide{display:none;}
div.mancontindex div.indexwrap {
        margin: 3em auto;
    width: 817px;
    display:block;
}
div.mancontindex div.indexwrappad {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    padding: 80px 8.33333%;
    background: #fff;
    max-height: 70vh;
    overflow-y: scroll;
}
div.mancontindex div.head h2.itemtitle { font-size:x-large; cursor:pointer;  }
div.mancontindex div.subitem h2.itemtitle { font-size:large; cursor:pointer; }
div.mancontindex div.item h2.subitemtitle { font-size:medium; }
div.mancontindex span.close { position: absolute; cursor:pointer;
    background-image: url(../SrImg/run_off.png);
    width:48px;
    height:48px;
    top: 10px;
    right: 10px;
    filter: contrast(0.1) opacity(0.3);
}

/*#endregion  */




@media all and (max-width:1069px) {
    div.mancontent {margin-left: 2%;}
    div.manmain.headwrap .head { width: 80%;   }
    div.mancontentlist { width: 78%;   }
    div.mancontent div.subitem {padding-left: 7%;}
}
@media only screen and (max-width:735px) {    
    div.manmain.headwrap .head .headcontent h2.title{font-size:10px;}
    div.mancontenttitle {font-size: x-large;margin-bottom: 50px;padding-left: 2%;}
    div.manmain.headwrap .head { width: 99%;   }
    div.mancontentlist { width: 98%;   }

    div.manmain.headwrap {height: 65px;}
    div.manmain.headwrap .head  {height: 60px;padding-left: 7px;}
    div.manmain.headwrap .head .index {padding-right: 7px;}

    div.mancontent div.item { display: block;}
    div.mancontent div.item:not(.hor) { display: block;}
    div.mancontent div.head {padding-left: 7px;}
    div.mancontent div.head h2.itemtitle { font-size:x-large; cursor:pointer;  }
    div.mancontent div.head p { font-size:medium; }
    div.mancontent div.item h2 { font-size:medium; }
    div.mancontent div.item h2.itemtitle { font-size:large; }
    div.mancontent div.item h2.subitemtitle { font-size:medium; }
    div.mancontent div.item p { font-size:medium; }
    div.mancontent div.item  { font-size:medium; }    
    div.mancontent div.item imgobj {max-width:100%;display:block;text-align:center;}
    div.mancontent div.item:not(.hor) imgobj {max-width:100%;}
    div.mancontent div.item.hor imgobj {max-width:100%;}
    div.mancontent div.item.hor imgobj img {max-width:95%;}
    div.mancontent div.item imgobj .imgitem {margin: 0 auto;}
    div.mancontent div.item imgobj .imgitem.rtubutton {margin:7px auto;}

    div.mancontindex div.indexwrap {width: 90%;}
    div.mancontindex div.mancontenttitle {font-size: large;}
    div.mancontindex div.head h2.itemtitle { font-size:large; cursor:pointer;  }
    div.mancontindex div.subitem h2.itemtitle { font-size:medium; cursor:pointer; }
    div.mancontindex div.item h2.subitemtitle { font-size:small; }
    div.mancontent div.subitem {padding-left: 2%;}
    div.mancontent div.subitem div.item {padding-bottom: 25px; margin-top: 20px;}
    div.mancontent div.subitem div.item.notopmargin { margin-top: 0;}

    div.mancontent div.item:not(.hor) div { padding-left: 2%;}
    div.mancontent div.item.hor imgobj { font-size:7px;}
    div.mancontent div.item.hor imgobj .imgitem.inv485hor { font-size:5.3px;}
    div.mancontent div.item.hor imgobj .imgitem.inverteradds { font-size:5.3px;}
    
    div.manmain.tailwrap {width: 99%; }
    div.manmain.tailwrap div.tail {padding: 0 10px;}
    div.item ul {padding-left: 20px;word-break: keep-all;}
    
}
div.mancontent.fold div.item {display: none !important;}
div.mancontent.fold div.item:not(.hor) {display: none !important;}
div.mancontent.fold div.item.hor {display: none !important;}