/* 로딩바 */
.ACLoadingImage {
animation: ACLoadingImage;
animation-iteration-count: 1;
animation-duration: 2.9s;
animation-fill-mode: forwards;
animation-timing-function: ease;
background-image:linear-gradient(to right, #a1a7bb 0.5%, transparent 0.5%);
}
@keyframes ACLoadingImage {
0% {
background-image: linear-gradient(to right, #89d123 0%, transparent 0%);
}
1% {
background-image: linear-gradient(to right, #89d123 1%, transparent 1%);
}
2% {
background-image: linear-gradient(to right, #89d123 2%, transparent 2%);
}
3% {
background-image: linear-gradient(to right, #89d123 3%, transparent 3%);
}
4% {
background-image: linear-gradient(to right, #89d123 4%, transparent 4%);
}
5% {
background-image: linear-gradient(to right, #89d123 5%, transparent 5%);
}
6% {
background-image: linear-gradient(to right, #89d123 6%, transparent 6%);
}
7% {
background-image: linear-gradient(to right, #89d123 7%, transparent 7%);
}
8% {
background-image: linear-gradient(to right, #89d123 8%, transparent 8%);
}
9% {
background-image: linear-gradient(to right, #89d123 9%, transparent 9%);
}
10% {
background-image: linear-gradient(to right, #89d123 10%, transparent 10%);
}
11% {
background-image: linear-gradient(to right, #89d123 11%, transparent 11%);
}
12% {
background-image: linear-gradient(to right, #89d123 12%, transparent 12%);
}
13% {
background-image: linear-gradient(to right, #89d123 13%, transparent 13%);
}
14% {
background-image: linear-gradient(to right, #89d123 14%, transparent 14%);
}
15% {
background-image: linear-gradient(to right, #89d123 15%, transparent 15%);
}
16% {
background-image: linear-gradient(to right, #89d123 16%, transparent 16%);
}
17% {
background-image: linear-gradient(to right, #89d123 17%, transparent 17%);
}
18% {
background-image: linear-gradient(to right, #89d123 18%, transparent 18%);
}
19% {
background-image: linear-gradient(to right, #89d123 19%, transparent 19%);
}
20% {
background-image: linear-gradient(to right, #89d123 20%, transparent 20%);
}
21% {
background-image: linear-gradient(to right, #89d123 21%, transparent 21%);
}
22% {
background-image: linear-gradient(to right, #89d123 22%, transparent 22%);
}
23% {
background-image: linear-gradient(to right, #89d123 23%, transparent 23%);
}
24% {
background-image: linear-gradient(to right, #89d123 24%, transparent 24%);
}
25% {
background-image: linear-gradient(to right, #89d123 25%, transparent 25%);
}
26% {
background-image: linear-gradient(to right, #89d123 26%, transparent 26%);
}
27% {
background-image: linear-gradient(to right, #89d123 27%, transparent 27%);
}
28% {
background-image: linear-gradient(to right, #89d123 28%, transparent 28%);
}
29% {
background-image: linear-gradient(to right, #89d123 29%, transparent 29%);
}
30% {
background-image: linear-gradient(to right, #89d123 30%, transparent 30%);
}
31% {
background-image: linear-gradient(to right, #89d123 31%, transparent 31%);
}
32% {
background-image: linear-gradient(to right, #89d123 32%, transparent 32%);
}
33% {
background-image: linear-gradient(to right, #89d123 33%, transparent 33%);
}
34% {
background-image: linear-gradient(to right, #89d123 34%, transparent 34%);
}
35% {
background-image: linear-gradient(to right, #89d123 35%, transparent 35%);
}
36% {
background-image: linear-gradient(to right, #89d123 36%, transparent 36%);
}
37% {
background-image: linear-gradient(to right, #89d123 37%, transparent 37%);
}
38% {
background-image: linear-gradient(to right, #89d123 38%, transparent 38%);
}
39% {
background-image: linear-gradient(to right, #89d123 39%, transparent 39%);
}
40% {
background-image: linear-gradient(to right, #89d123 40%, transparent 40%);
}
41% {
background-image: linear-gradient(to right, #89d123 41%, transparent 41%);
}
42% {
background-image: linear-gradient(to right, #89d123 42%, transparent 42%);
}
43% {
background-image: linear-gradient(to right, #89d123 43%, transparent 43%);
}
44% {
background-image: linear-gradient(to right, #89d123 44%, transparent 44%);
}
45% {
background-image: linear-gradient(to right, #89d123 45%, transparent 45%);
}
46% {
background-image: linear-gradient(to right, #89d123 46%, transparent 46%);
}
47% {
background-image: linear-gradient(to right, #89d123 47%, transparent 47%);
}
48% {
background-image: linear-gradient(to right, #89d123 48%, transparent 48%);
}
49% {
background-image: linear-gradient(to right, #89d123 49%, transparent 49%);
}
50% {
background-image: linear-gradient(to right, #89d123 50%, transparent 50%);
}
51% {
background-image: linear-gradient(to right, #89d123 51%, transparent 51%);
}
52% {
background-image: linear-gradient(to right, #89d123 52%, transparent 52%);
}
53% {
background-image: linear-gradient(to right, #89d123 53%, transparent 53%);
}
54% {
background-image: linear-gradient(to right, #89d123 54%, transparent 54%);
}
55% {
background-image: linear-gradient(to right, #89d123 55%, transparent 55%);
}
56% {
background-image: linear-gradient(to right, #89d123 56%, transparent 56%);
}
57% {
background-image: linear-gradient(to right, #89d123 57%, transparent 57%);
}
58% {
background-image: linear-gradient(to right, #89d123 58%, transparent 58%);
}
59% {
background-image: linear-gradient(to right, #89d123 59%, transparent 59%);
}
60% {
background-image: linear-gradient(to right, #89d123 60%, transparent 60%);
}
61% {
background-image: linear-gradient(to right, #89d123 61%, transparent 61%);
}
62% {
background-image: linear-gradient(to right, #89d123 62%, transparent 62%);
}
63% {
background-image: linear-gradient(to right, #89d123 63%, transparent 63%);
}
64% {
background-image: linear-gradient(to right, #89d123 64%, transparent 64%);
}
65% {
background-image: linear-gradient(to right, #89d123 65%, transparent 65%);
}
66% {
background-image: linear-gradient(to right, #89d123 66%, transparent 66%);
}
67% {
background-image: linear-gradient(to right, #89d123 67%, transparent 67%);
}
68% {
background-image: linear-gradient(to right, #89d123 68%, transparent 68%);
}
69% {
background-image: linear-gradient(to right, #89d123 69%, transparent 69%);
}
70% {
background-image: linear-gradient(to right, #89d123 70%, transparent 70%);
}
71% {
background-image: linear-gradient(to right, #89d123 71%, transparent 71%);
}
72% {
background-image: linear-gradient(to right, #89d123 72%, transparent 72%);
}
73% {
background-image: linear-gradient(to right, #89d123 73%, transparent 73%);
}
74% {
background-image: linear-gradient(to right, #89d123 74%, transparent 74%);
}
75% {
background-image: linear-gradient(to right, #89d123 75%, transparent 75%);
}
76% {
background-image: linear-gradient(to right, #89d123 76%, transparent 76%);
}
77% {
background-image: linear-gradient(to right, #89d123 77%, transparent 77%);
}
78% {
background-image: linear-gradient(to right, #89d123 78%, transparent 78%);
}
79% {
background-image: linear-gradient(to right, #89d123 79%, transparent 79%);
}
80% {
background-image: linear-gradient(to right, #89d123 80%, transparent 80%);
}
81% {
background-image: linear-gradient(to right, #89d123 81%, transparent 81%);
}
82% {
background-image: linear-gradient(to right, #89d123 82%, transparent 82%);
}
83% {
background-image: linear-gradient(to right, #89d123 83%, transparent 83%);
}
84% {
background-image: linear-gradient(to right, #89d123 84%, transparent 84%);
}
85% {
background-image: linear-gradient(to right, #89d123 85%, transparent 85%);
}
86% {
background-image: linear-gradient(to right, #89d123 86%, transparent 86%);
}
87% {
background-image: linear-gradient(to right, #89d123 87%, transparent 87%);
}
88% {
background-image: linear-gradient(to right, #89d123 88%, transparent 88%);
}
89% {
background-image: linear-gradient(to right, #89d123 89%, transparent 89%);
}
90% {
background-image: linear-gradient(to right, #89d123 90%, transparent 90%);
}
91% {
background-image: linear-gradient(to right, #89d123 91%, transparent 91%);
}
92% {
background-image: linear-gradient(to right, #89d123 92%, transparent 92%);
}
93% {
background-image: linear-gradient(to right, #89d123 93%, transparent 93%);
}
94% {
background-image: linear-gradient(to right, #89d123 94%, transparent 94%);
}
95% {
background-image: linear-gradient(to right, #89d123 95%, transparent 95%);
}
96% {
background-image: linear-gradient(to right, #89d123 96%, transparent 96%);
}
97% {
background-image: linear-gradient(to right, #89d123 97%, transparent 97%);
}
98% {
background-image: linear-gradient(to right, #89d123 98%, transparent 98%);
}
99% {
background-image: linear-gradient(to right, #89d123 99%, transparent 99%);
}
100% {
background-image: linear-gradient(to right, #89d123 100%, transparent 100%);
}
}
/* Z축 */
.ACLo-z5 {
z-index:5;
}
.ACLo-z6 {
z-index:6;
}
/* 로딩 화면 애니메이션 */
.ACLoading-LDP {
display:inherit;
z-index:6;
animation: ACLoading-LDP;
animation-delay: 3s;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
@keyframes ACLoading-LDP {
from {height:100vh;opacity:1; z-index:5;display:inherit;}
to {height:0px;opacity:0; z-index:-1;display:none;}
}
/* 로딩 텍스트 애니메이션 */
.ACLoading-LDtext1 {
animation: ACLoading-LDtext1;
animation-iteration-count: 2;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
opacity:1;
}
@keyframes ACLoading-LDtext1 {
from {opacity:1;}
50% {opacity:0;}
to {opacity:1;}
}
/* 로딩 화면 배경 */
.ACLoading-bg {
position: relative;
width: 100%;
height: 100vh;
background: #1a1a1f;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
z-index:-3;
}
/* 컴/모바일 스크린 */
@media screen and (min-width: 450px) {
.ACLoading-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 450px) {
.ACLoading-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-WebDisplay {
display:none;
}
}
@media screen and (max-width: 450px) {
.ACLoading-MobileDisplay {
display:inherit;
}
}
/* 로딩 채우기 */
.loading-fill {
background: transparent;
animation: loading-fill;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
transform: translate(0%, -0%);
}
@keyframes loading-fill {
0% {
filter: grayscale(100%);
}
1% {
filter: grayscale(99%);
}
2% {
filter: grayscale(98%);
}
3% {
filter: grayscale(97%);
}
4% {
filter: grayscale(96%);
}
5% {
filter: grayscale(95%);
}
6% {
filter: grayscale(94%);
}
7% {
filter: grayscale(93%);
}
8% {
filter: grayscale(92%);
}
9% {
filter: grayscale(91%);
}
10% {
filter: grayscale(90%);
}
11% {
filter: grayscale(89%);
}
12% {
filter: grayscale(88%);
}
13% {
filter: grayscale(87%);
}
14% {
filter: grayscale(86%);
}
15% {
filter: grayscale(85%);
}
16% {
filter: grayscale(84%);
}
17% {
filter: grayscale(83%);
}
18% {
filter: grayscale(82%);
}
19% {
filter: grayscale(81%);
}
20% {
filter: grayscale(80%);
}
21% {
filter: grayscale(79%);
}
22% {
filter: grayscale(78%);
}
23% {
filter: grayscale(77%);
}
24% {
filter: grayscale(76%);
}
25% {
filter: grayscale(75%);
}
26% {
filter: grayscale(74%);
}
27% {
filter: grayscale(73%);
}
28% {
filter: grayscale(72%);
}
29% {
filter: grayscale(71%);
}
30% {
filter: grayscale(70%);
}
31% {
filter: grayscale(69%);
}
32% {
filter: grayscale(68%);
}
33% {
filter: grayscale(67%);
}
34% {
filter: grayscale(66%);
}
35% {
filter: grayscale(65%);
}
36% {
filter: grayscale(64%);
}
37% {
filter: grayscale(63%);
}
38% {
filter: grayscale(62%);
}
39% {
filter: grayscale(61%);
}
40% {
filter: grayscale(60%);
}
41% {
filter: grayscale(59%);
}
42% {
filter: grayscale(58%);
}
43% {
filter: grayscale(57%);
}
44% {
filter: grayscale(56%);
}
45% {
filter: grayscale(55%);
}
46% {
filter: grayscale(54%);
}
47% {
filter: grayscale(53%);
}
48% {
filter: grayscale(52%);
}
49% {
filter: grayscale(51%);
}
50% {
filter: grayscale(50%);
}
51% {
filter: grayscale(49%);
}
52% {
filter: grayscale(48%);
}
53% {
filter: grayscale(47%);
}
54% {
filter: grayscale(46%);
}
55% {
filter: grayscale(45%);
}
56% {
filter: grayscale(44%);
}
57% {
filter: grayscale(43%);
}
58% {
filter: grayscale(42%);
}
59% {
filter: grayscale(41%);
}
60% {
filter: grayscale(40%);
}
61% {
filter: grayscale(39%);
}
62% {
filter: grayscale(38%);
}
63% {
filter: grayscale(37%);
}
64% {
filter: grayscale(36%);
}
65% {
filter: grayscale(35%);
}
66% {
filter: grayscale(34%);
}
67% {
filter: grayscale(33%);
}
68% {
filter: grayscale(32%);
}
69% {
filter: grayscale(31%);
}
70% {
filter: grayscale(30%);
}
71% {
filter: grayscale(29%);
}
72% {
filter: grayscale(28%);
}
73% {
filter: grayscale(27%);
}
74% {
filter: grayscale(26%);
}
75% {
filter: grayscale(25%);
}
76% {
filter: grayscale(24%);
}
77% {
filter: grayscale(23%);
}
78% {
filter: grayscale(22%);
}
79% {
filter: grayscale(21%);
}
80% {
filter: grayscale(20%);
}
81% {
filter: grayscale(19%);
}
82% {
filter: grayscale(18%);
}
83% {
filter: grayscale(17%);
}
84% {
filter: grayscale(16%);
}
85% {
filter: grayscale(15%);
}
86% {
filter: grayscale(14%);
}
87% {
filter: grayscale(13%);
}
88% {
filter: grayscale(12%);
}
89% {
filter: grayscale(11%);
}
90% {
filter: grayscale(10%);
}
91% {
filter: grayscale(9%);
}
92% {
filter: grayscale(8%);
}
93% {
filter: grayscale(7%);
}
94% {
filter: grayscale(6%);
}
95% {
filter: grayscale(5%);
}
96% {
filter: grayscale(4%);
}
97% {
filter: grayscale(3%);
}
98% {
filter: grayscale(2%);
}
99% {
filter: grayscale(1%);
}
100% {
filter: grayscale(0%);
}
}
/* # 모바일 반응성 */
@media screen and (min-width: 700px) {
.ACLoading-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 700px) {
.ACLoading-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.ACLoading-WebDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.ACLoading-MobileDisplay {
display:inherit;
}
}