/* 페이지 전환 애니메이션 적용할 때 - 로딩 화면 수정 */
.animsition-loading,.animsition-loading:after{
	width:100px !important;
	height:100px !important;
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-50px !important;
	margin-left:-50px !important;
	border-radius:50%;
	z-index:2;
}
.animsition-loading{
	background-color:#cccccc;
	border-top:5px solid rgba(0,0,0,.2);
	border-right:5px solid rgba(0,0,0,.2);
	border-bottom:5px solid rgba(0,0,0,.2);
	border-left:5px solid #eee;
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-duration:.8s;
	animation-duration:.8s;
	-webkit-animation-name:animsition-loading !important;
	animation-name:animsition-loading !important;
}


/* body {background:red !important;}  */


/* body box line */
/*
.bodylineTop {
    top: 0;
    background: #191E23;
}
.bodylineBottom {
    bottom: 0;
    background: #191E23;
}
.bodylineBottom, .bodylineTop {
    height: 5px;
    z-index: 100000;
    position: fixed;
    left: 0;
    display: block;
    right: 0;
}
.bodylineRight {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: block;
    width: 5px;
    background: #191E23;
}
.bodylineLeft {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: block;
    width: 5px;
    background: #191E23;
}
#page-header {padding-top:5px;}
@media (min-width:1201px) {
	.bodylineBottom, .bodylineTop {height: 10px;}
	.bodylineRight, .bodylineLeft {width:10px;}
	#page-header {padding-top:10px;}
}
@media (min-width:783px) {
	.admin-bar .bodylineTop, 
	.admin-bar .bodylineRight, 
	.admin-bar .bodylineLeft {top:32px;}	
}
@media (max-width:782px) {
	.admin-bar .bodylineTop, 
	.admin-bar .bodylineRight, 
	.admin-bar .bodylineLeft {top:46px;}	
}
*/


/* Keyframes ------------------------------------------- */
.glitch-effect .w-text-h, .glitch-effect--- {
	animation: glitch1 2.5s infinite;
	z-index:1;
	text-transform: uppercase;
}
.glitch-effect .w-text-h:before, .glitch-effect---:before,  
.glitch-effect .w-text-h:after, .glitch-effect---:after {
	display: block;
    content: 'OKSAMBARI';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.8;
}
.glitch-effect .w-text-h:before, .glitch-effect---:before {
	color: #67f3da;
	animation: glitch2 2.5s infinite;
    z-index: -1;
}
.glitch-effect .w-text-h:after, .glitch-effect---:after {
	color: #f16f6f;
	animation: glitch3 2.5s infinite;
    z-index: -2;
}
.glitch-effect---:before,  
.glitch-effect---:after {
    content: attr(data-txt);
}

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.1deg, -0.1deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.1deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-0.1deg, 0.1deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.1deg, 0.1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-3px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-3px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}
@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(3px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(3px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}