/* animation */
.aniUp{
	opacity: 0;
	transform: translateY(30px);
	transition: all 1s;
}
.aniUp.active{
	opacity: 1;
	transform: translateY(0px)
}
.aniD{
	opacity: 0;
	transform: translateY(-20px);
	transition: all 1s;
}
.aniD.active{
	opacity: 1;
	transform: translateY(0px)
}
.aniL{
	opacity: 0;
	transform: translateX(-30px);
	transition: all 1s;
}
.aniL.active{
	opacity: 1;
	transform: translateX(0px)
}
.aniR{
	opacity: 0;
	transform: translateX(30px);
	transition: all 1s;
}
.aniR.active{
	opacity: 1;
	transform: translateX(0px)
}
.aniUL{
	opacity: 0;
	transform: translate(30px,30px);
	transition: all 1s;
}
.aniUL.active{
	opacity: 1;
	transform: translateX(0px)
}
.aniDR{
	opacity: 0;
	transform: translate(-30px,-30px);
	transition: all 1s;
}
.aniDR.active{
	opacity: 1;
	transform: translateX(0px)
}
.aniFade{
	opacity: 0;
	transition: all 1s;
}
.aniFade.active{
	opacity: 1;
}
.aniBig{
	opacity: 0;
	transform: scale(0.9);
	transition: all 1s;
}
.aniBig.active{
	opacity: 1;
	transform: scale(1);
}
.aniRoX{
	opacity: 0;
	transform: scaleX(-0.3);
	transition: all 1s;
}
.aniRoX.active{
	opacity: 1;
	transform: scaleX(1);
}

.delay1{
	transition-delay: 0.2s;
}
.delay2{
	transition-delay: 0.4s;
}
.delay3{
	transition-delay: 0.6s;
}
.delay4{
	transition-delay: 0.8s;
}
.delay5{
	transition-delay: 1.0s;
}
.delay6{
	transition-delay: 1.2s;
}
.delay7{
	transition-delay: 1.4s;
}
.delay8{
	transition-delay: 1.6s;
}
.delay9{
	transition-delay: 1.8s;
}
.delay10{
	transition-delay: 2.0s;
}
.delay11{
	transition-delay: 2.4s;
}
.delay12{
	transition-delay: 2.6s;
}
.delay13{
	transition-delay: 2.8s;
}
.delay14{
	transition-delay: 3.0s;
}



/* effect */
.twinkle{animation: twinkle infinite alternate 0.6s} /* 서서히 반짝거리는 애니메이션 */
@keyframes twinkle {
    form{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

.blinking{
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}/* 깜빡거리는 애니메이션 */
@-webkit-keyframes blink{
    0% {opacity: 0;}
    1% {opacity: 0;}
    50%{opacity: 0;}
    51%{opacity: 1;}
    100% {opacity: 1;}
}
@-moz-keyframes blink{
    0% {opacity: 0;}
    1% {opacity: 0;}
    49%{opacity: 0;}
    50%{opacity: 1;}
    100% {opacity: 1;}
}
@keyframes blink{
    0% {opacity: 0;}
    1% {opacity: 0;}
    50%{opacity: 0;}
    51%{opacity: 1;}
    100% {opacity: 1;}
}

.blinking_h{
	-webkit-animation:blink_h 0.5s ease-in-out infinite alternate;
    -moz-animation:blink_h 0.5s ease-in-out infinite alternate;
    animation:blink_h 0.5s ease-in-out infinite alternate;
}/* 깜빡거리는 애니메이션 */
@-webkit-keyframes blink_h{
    0% {opacity: 0.5;}
    1% {opacity: 0.5;}
    50%{opacity: 0.5;}
    51%{opacity: 1;}
    100% {opacity: 1;}
}
@-moz-keyframes blink_h{
    0% {opacity: 0.5;}
    1% {opacity: 0.5;}
    49%{opacity: 0.5;}
    50%{opacity: 1;}
    100% {opacity: 1;}
}
@keyframes blink_h{
    0% {opacity: 0.5;}
    1% {opacity: 0.5;}
    50%{opacity: 0.5;}
    51%{opacity: 1;}
    100% {opacity: 1;}
}


.ud{animation: ud infinite alternate 0.5s;display: block} /* 위 아래로 흔들리는 애니메이션 */
@keyframes ud{
    from{
        transform: translateY(2.5px)
    }
    to{
        transform: translateY(-2.5px)
    }
}

.lr{animation: lr infinite alternate 0.5s;display: block} /* 좌우로 흔들리는 애니메이션 */
@keyframes lr{
    from{
        transform: translateX(2.5px)
    }
    to{
        transform: translateX(-2.5px)
    }
}

.bs{animation: bs infinite alternate 0.5s;display: block} /* 커졌다 작아졌다하는 애니메이션 */
@keyframes bs{
    from{
        transform: scale(0.95)
    }
    to{
        transform: scale(1)
    }
}



/* Hover */

.t_ho1{letter-spacing: 0px;transition: letter-spacing 0.6s} /* 마우스 호버 시 자간 넓어지는 효과 */
.t_ho1:hover{letter-spacing: 1.4px}

.total{width: 200px;height: 30px}