/* # 등장 애니메이션 */
.IM-PO-maintext {
opacity: 0;
animation: IM-PO-maintext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 5.9s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0%);
}
@keyframes IM-PO-maintext {
from {opacity: 0; transform: translateY(-20%);}
to {opacity: 1; transform: translateY(0%);}
}
.IM-PO-subtext {
opacity: 0;
animation: IM-PO-subtext;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
@keyframes IM-PO-subtext {
from {opacity: 0; transform: translateX(-2%);}
to {opacity: 1; transform: translateX(0%);}
}
.IM-PO-subtext2 {
opacity: 0;
animation: IM-PO-subtext2;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 5.3s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
}
@keyframes IM-PO-subtext2 {
from {opacity: 0; transform: translateX(-2%);}
to {opacity: 1; transform: translateX(0%);}
}
.IM-PO-mainimg {
opacity: 0;
animation: IM-PO-mainimg;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 5.3s;
animation-fill-mode: forwards;
transition: .2s ease;
}
@keyframes IM-PO-mainimg {
from {opacity: 0;}
to {opacity: 1;}
}
.IM-PO-keyboard {
opacity: 0;
animation: IM-PO-keyboard;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 6.7s;
animation-fill-mode: forwards;
transition: .2s ease;
}
@keyframes IM-PO-keyboard {
from {opacity: 0;}
to {opacity: 1;}
}
.IM-PO-background {
animation: IM-PO-background;
animation-iteration-count: 1;
animation-duration: .5s;
animation-fill-mode: forwards;
transition: .2s ease;
}
@keyframes IM-PO-background {
from {opacity: 0;}
to {opacity: 1;}
}
.IM-PO-bgnoise {
animation: IM-PO-bgnoise;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-timing-function: ease;
animation-fill-mode: backwards;
transition: .2s linear;
}
@keyframes IM-PO-bgnoise {
0% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
15% {background:#363636; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%, rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
45% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%, rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
50% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
75% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%, rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);}
80% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%, rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);}
100% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);}
}
/* # 반응 애니메이션 */
.IM-PO-Imghover {
filter:brightness(1);
transition: filter 0.5s;
}
.IM-PO-Imghover:hover {
filter:brightness(1.8);
}
.IM-PO-FLhover {
filter:brightness(0.5);
transition: filter 0.5s;
}
.IM-PO-LFhover:hover {
filter:brightness(1.0);
}
/* # CSS 일반 */
.IM-PO-z {
z-index:2;
}
.IM-PO-z0 {
z-index:-1;
}
.IM-PO-z6 {
z-index:6;
}
.IM-PO-z3 {
z-index:3;
}
.IM-PO-BW {
filter: grayscale(100%);
}
/* # 모바일 반응성 */
@media screen and (min-width: 700px) {
.IM-PO-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 700px) {
.IM-PO-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.IM-PO-WebDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.IM-PO-MobileDisplay {
display:inherit;
}
}