#ban-skpause { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 5000; } #ban-skpause-inner { position: absolute; top: 50%; left: 50%; font-size: 30px; color: white; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } #ban-skpause { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 5000; } #ban-skpause-inner { position: absolute; top: 50%; left: 50%; font-size: 30px; color: white; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } .hidelist { display: none; } .clock-loader { --clock-color: #FF8800; --clock-width: 2rem; --clock-radius: calc(var(--clock-width) / 2); --clock-minute-length: calc(var(--clock-width) * 0.4); --clock-hour-length: calc(var(--clock-width) * 0.25); --clock-thickness: 0.2rem; position: relative; display: flex; justify-content: center; align-items: center; width: var(--clock-width); height: var(--clock-width); border: 3px solid var(--clock-color); border-radius: 50%; } .clock-loader::before, .clock-loader::after { position: absolute; content: ""; top: calc(var(--clock-radius) * 0.25); width: var(--clock-thickness); background: var(--clock-color); border-radius: 10px; transform-origin: center calc(100% - calc(var(--clock-thickness) / 2)); animation: spin infinite linear; } .clock-loader::before { height: var(--clock-minute-length); animation-duration: 2s; } .clock-loader::after { top: calc(var(--clock-radius) * 0.125 + var(--clock-hour-length)); height: var(--clock-hour-length); animation-duration: 15s; } @keyframes spin { to { transform: rotate(1turn); } } .otabox{width:240px;height:150px;position:absolute;top:calc(50% - 25px);top:-webkit-calc(50% - 25px);left:calc(50% - 120px);left:-webkit-calc(50% - 120px)}.otatext{font-family:Lato,sans-serif;color:#fff;font-weight:300;font-size:30px;position:absolute;top:calc(50% - 105px);top:-webkit-calc(50% - 105px);left:calc(50% - 100px);left:-webkit-calc(50% - 100px);oapcity:1;-webkit-animation:fade-in-out 2.5s infinite;-moz-animation:fade-in-out 2.5s infinite;-o-animation:fade-in-out 2.5s infinite;animation:fade-in-out 2.5s infinite}.otacomp{position:absolute;top:0;width:80px;height:55px;border:3px solid #fff;border-radius:5px}.otacomp:after{content:'';position:absolute;z-index:5;top:19px;left:5px;width:65px;height:10px;border-radius:360px;border:3px solid #fff}.otaloader{position:absolute;z-index:5;top:26px;left:12px;width:8px;height:8px;border-radius:360px;background:#fff;-webkit-animation:otaloader 5s infinite linear .5s;-moz-animation:otaloader 5s infinite linear .5s;-o-animation:otaloader 5s infinite linear .5s;animation:otaloader 5s infinite linear .5s}.otacon{position:absolute;top:28px;left:85px;width:100px;height:3px;background:#fff}.otabyte{position:absolute;top:25px;left:80px;height:9px;width:9px;background:#fff;border-radius:360px;z-index:6;opacity:0;-webkit-animation:otabyte_animate 5s infinite linear .5s;-moz-animation:otabyte_animate 5s infinite linear .5s;-o-animation:otabyte_animate 5s infinite linear .5s;animation:otabyte_animate 5s infinite linear .5s}.otaserver{position:absolute;top:22px;left:185px;width:35px;height:35px;z-index:1;border:3px solid #fff;background:#fff;border-radius:360px;-webkit-transform:rotateX(58deg);-moz-transform:rotateX(58deg);-o-transform:rotateX(58deg);transform:rotateX(58deg)}.otaserver:before{content:'';position:absolute;top:-47px;left:-3px;width:35px;height:35px;z-index:20;border:3px solid #fff;background:#fff;border-radius:360px}.otaserver:after{position:absolute;top:-26px;left:-3px;border-left:3px solid #fff;border-right:3px solid #fff;width:35px;height:40px;z-index:17;background:#fff;content:''}@-webkit-keyframes otabyte_animate{0%{opacity:0;left:80px}4%{opacity:1}46%{opacity:1}50%{opacity:0;left:185px}54%{opacity:1}96%{opacity:1}100%{opacity:0;left:80px}}@-moz-keyframes otabyte_animate{0%{opacity:0;left:80px}4%{opacity:1}46%{opacity:1}50%{opacity:0;left:185px}54%{opacity:1}96%{opacity:1}100%{opacity:0;left:80px}}@-o-keyframes otabyte_animate{0%{opacity:0;left:80px}4%{opacity:1}46%{opacity:1}50%{opacity:0;left:185px}54%{opacity:1}96%{opacity:1}100%{opacity:0;left:80px}}@keyframes otabyte_animate{0%{opacity:0;left:80px}4%{opacity:1}46%{opacity:1}50%{opacity:0;left:185px}54%{opacity:1}96%{opacity:1}100%{opacity:0;left:80px}}@-webkit-keyframes otaloader{0%{width:8px}100%{width:63px}}@-moz-keyframes otaloader{0%{width:8px}100%{width:63px}}@-o-keyframes otaloader{0%{width:8px}100%{width:63px}}@keyframes otaloader{0%{width:8px}100%{width:63px}}@-webkit-keyframes fade-in-out{0%{opacity:1}50%{opacity:0}100%{oapcity:1}}@-moz-keyframes fade-in-out{0%{opacity:1}50%{opacity:0}100%{oapcity:1}}@-o-keyframes fade-in-out{0%{opacity:1}50%{opacity:0}100%{oapcity:1}}@keyframes fade-in-out{0%{opacity:1}50%{opacity:0}100%{oapcity:1}}