편집 요약 없음 |
편집 요약 없음 |
||
152번째 줄: | 152번째 줄: | ||
animation-fill-mode: forwards; | animation-fill-mode: forwards; | ||
transition: .2s ease; | transition: .2s ease; | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
168번째 줄: | 169번째 줄: | ||
transition: .2s ease; | transition: .2s ease; | ||
transform: translateX(0%); | transform: translateX(0%); | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
184번째 줄: | 186번째 줄: | ||
transition: .2s ease; | transition: .2s ease; | ||
transform: translateX(0%); | transform: translateX(0%); | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
200번째 줄: | 203번째 줄: | ||
transition: .2s ease; | transition: .2s ease; | ||
transform: translateY(0%); | transform: translateY(0%); | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
221번째 줄: | 225번째 줄: | ||
color: #CFA547; | color: #CFA547; | ||
transition: .2s ease; | transition: .2s ease; | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
232번째 줄: | 237번째 줄: | ||
color: #191919; | color: #191919; | ||
font-weight: bold; | font-weight: bold; | ||
font-family: Pretendard; | font-family: Pretendard, Pretendard JP Variable; | ||
transition: .2s ease; | transition: .2s ease; | ||
font-size: 16pt; | font-size: 16pt; | ||
246번째 줄: | 251번째 줄: | ||
color: #191919; | color: #191919; | ||
font-size: 10.5pt; | font-size: 10.5pt; | ||
font-family: Pretendard, Pretendard JP Variable; | |||
} | } | ||
252번째 줄: | 258번째 줄: | ||
.AOC-Wrote { | .AOC-Wrote { | ||
font-size: 10.5pt; | font-size: 10.5pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
.AOC-ani { | .AOC-ani { | ||
font-size: 10pt; | font-size: 10pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
.AOC-ani2 { | .AOC-ani2 { | ||
font-size: 10pt; | font-size: 10pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
.AOC-ani3 { | .AOC-ani3 { | ||
font-size: 10pt; | font-size: 10pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
.AOC-QnA td { | .AOC-QnA td { | ||
font-size: 12pt; | font-size: 12pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
274번째 줄: | 285번째 줄: | ||
color: #191919; | color: #191919; | ||
font-size: 10pt; | font-size: 10pt; | ||
font-family: Pretendard JP Variable; | |||
} | } | ||
} | } |
2023년 11월 12일 (일) 02:19 판
/* 변시 인트로 */
.AOCImage {
animation: AOCImage;
animation-iteration-count: 1;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
background-image:linear-gradient(to right, white 0%, transparent 0%);
}
.AOC-LDtext {
animation: AOC-LDtext;
animation-iteration-count: 2;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes AOC-LDtext {
0% {color: #252525}
50% {color: #CFA547}
100% {color: #252525}
}
.AOC-LDtext2 {
animation: AOC-LDtext2;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0px);
opacity: 1;
}
@keyframes AOC-LDtext2 {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0px);}
}
.AOC-LDP {
display:inherit;
z-index:6;
animation: AOC-LDP;
animation-delay: 6s;
animation-iteration-count: 1;
animation-duration: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: ease;
overflow:hidden;
height:100vh;
opacity:1;
}
@keyframes AOC-LDP {
from {height:100vh;opacity:1; z-index:5;display:inherit;}
to {height:0px;opacity:0; z-index:-1;display:none;}
}
.AOC-bg {
position: relative;
width: 100%;
height: 100vh;
background: #00B88D;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
z-index:-3;
animation: AOC-bg;
animation-iteration-count: 2;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes AOC-bg {
0% {background: #00CC9C}
50% {background: #580009}
100% {background: #00CC9C}
}
.loading {
display: flex;
justify-content: center;
}
.loading::after {
content: "";
width: 400px;
height: 400px;
border: 30px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: loading .800s linear 0s infinite normal;
opacity: 0.6;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
@media screen and (min-width: 768px) {
.AOC-WebDisplay {
display:inherit;
}
.loading-mobile {
display:none;
}
.AOC-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 768px) {
.AOC-WebDisplay {
display:none;
}
.AOC-MobileDisplay {
display:inherit;
width: 100%;
}
.loading-mobile {
display:flex;
justify-content: center;
}
.loading-mobile::after {
content: "";
width: 300px;
height: 300px;
border: 30px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: loading .800s linear 0s infinite normal;
opacity: 0.6;
}
}
/* 대문 리뉴얼 */
.AOC-Wrote {
opacity: 0;
animation: AOC-Wrote;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
font-family: Pretendard, Pretendard JP Variable;
}
@keyframes AOC-Wrote {
from {opacity: 0;}
to {opacity: 1;}
}
.AOC-ani {
opacity: 0;
animation: AOC-ani;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
font-family: Pretendard, Pretendard JP Variable;
}
@keyframes AOC-ani {
from {opacity: 0; transform: translateX(-2%);}
to {opacity: 1; transform: translateX(0%);}
}
.AOC-ani2 {
opacity: 0;
animation: AOC-ani2;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateX(0%);
font-family: Pretendard, Pretendard JP Variable;
}
@keyframes AOC-ani2 {
from {opacity: 0; transform: translateX(2%);}
to {opacity: 1; transform: translateX(0%);}
}
.AOC-ani3 {
opacity: 0;
animation: AOC-ani3;
animation-iteration-count: 1;
animation-duration: 1.5s;
animation-delay: 6.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0%);
font-family: Pretendard, Pretendard JP Variable;
}
@keyframes AOC-ani3 {
from {opacity: 0; transform: translateY(10%);}
to {opacity: 1; transform: translateY(0%);}
}
.AOC-select a {
display: inline-block;
margin-top: 10px;
max-width: 469px;
width: 100%;
border: 2px solid #CFA547;
padding: 10px 12px 10px 12px;
border-radius: 50px;
text-align: center;
font-family: Noto Serif KR;
font-size: 16pt;
background: #580009;
color: #CFA547;
transition: .2s ease;
font-family: Pretendard, Pretendard JP Variable;
}
.AOC-select a:hover {
background: #00CC9C;
color: #252525;
}
.AOC-QnA td {
background: white;
color: #191919;
font-weight: bold;
font-family: Pretendard, Pretendard JP Variable;
transition: .2s ease;
font-size: 16pt;
}
.AOC-QnA td:hover {
background: #00CC9C;
color: #252525;
}
.AOC-QnA p {
background: white;
color: #191919;
font-size: 10.5pt;
font-family: Pretendard, Pretendard JP Variable;
}
/* 대문 리뉴얼 (모바일 대응) */
@media screen and (max-width: 768px) {
.AOC-Wrote {
font-size: 10.5pt;
font-family: Pretendard JP Variable;
}
.AOC-ani {
font-size: 10pt;
font-family: Pretendard JP Variable;
}
.AOC-ani2 {
font-size: 10pt;
font-family: Pretendard JP Variable;
}
.AOC-ani3 {
font-size: 10pt;
font-family: Pretendard JP Variable;
}
.AOC-QnA td {
font-size: 12pt;
font-family: Pretendard JP Variable;
}
.AOC-QnA p {
background: white;
color: #191919;
font-size: 10pt;
font-family: Pretendard JP Variable;
}
}