/* 호버 애니메이션 */
.OEU-Imghover {
filter:brightness(0.8);
transition: filter 0.5s;
}
.OEU-Imghover:hover {
filter:brightness(1);
}
.OEU-FLhover {
filter:brightness(0.5);
transition: filter 0.5s;
}
.OEU-LFhover:hover {
filter:brightness(1.0);
}
/* 이미지 애니메이션 */
.OEU-imageAni1 {
opacity: 0;
animation: OEU-imageAni1;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
transition: .2s ease;
transform: translateY(0%);
}
@keyframes OEU-imageAni1 {
from {opacity: 0; transform: translateY(0%);}
to {opacity: 1; transform: translateY(5%);}
}
.OEU-imageAni2 {
animation: OEU-imageAni2;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 48s;
animation-play-state: running;
transition: all ease 1s;
}
@keyframes OEU-imageAni2 {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
.OEU-imageAni3 {
animation: OEU-imageAni3;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 30s;
animation-play-state: running;
transition: all ease 1s;
}
@keyframes OEU-imageAni3 {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.OEU-imageAni4 {
animation: OEU-imageAni4;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 25s;
animation-play-state: running;
transition: all ease 1s;
}
@keyframes OEU-imageAni4 {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
.OEU-imageAni5 {
animation: OEU-imageAni5;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 25s;
animation-play-state: running;
transition: all ease 1s;
}
@keyframes OEU-imageAni5 {
from {transform: translateX(-100%);}
to {transform: translateX(1000%);}
}
.OEU-imageAni6 {
animation: OEU-imageAni6;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-play-state: running;
transition: all ease 1s;
}
@keyframes OEU-imageAni6 {
0%, 100% { transform: translateY(-10%); }
50% { transform: translateY(10%); }
}
/* 이미지 */
.OEU-mainimg {
opacity: 0;
animation: OEU-mainimg;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
transition: .2s ease;
}
@keyframes OEU-mainimg {
from {opacity: 0;}
to {opacity: 1;}
}
.OEU-mainimg2 {
opacity: 0;
animation: OEU-mainimg2;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-mainimg2 {
from {opacity: 1; transform: translateY(5%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-Sec1 {
opacity: 0;
animation: OEU-Sec1;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes OEU-Sec1 {
from {opacity: 0; transform: translateY(-10%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-Sec2 {
opacity: 0;
animation: OEU-Sec2;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes OEU-Sec2 {
from {opacity: 0; transform: translateY(10%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-Sec3 {
transition: opacity 0.5s ease-in-out;
opacity: 0;
animation: OEU-Sec3;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes OEU-Sec3 {
from {transform: translateY(10%);}
to {transform: translateY(0%);}
}
.OEU-Sec3:hover {
opacity: 1;
}
.OEU-Sec4 {
opacity: 0;
transition: filter 1s ease-in-out, right 1s ease-in-out;
right: 0%;
filter: blur(0px);
animation: OEU-Sec4;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes OEU-Sec4 {
from {opacity: 0; transform: translateY(-10%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-Sec5 {
opacity: 0;
right: 0%;
animation: OEU-Sec5;
animation-iteration-count: 1;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes OEU-Sec5 {
from {opacity: 0; transform: translateY(-10%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-SecA {
transition: right 1s ease-in-out;
right: -70%;
}
.OEU-SecA-container:hover .OEU-Sec4 {
right: 40%;
filter: blur(7px);
}
.OEU-SecA-container:hover .OEU-SecA {
right: 0;
}
/* 배경 */
.OEU-bgMain {
position: relative;
width: 100% !important;
height: 100vh !important;
background: #2d1e1e;
display: inherit;
justify-content: center;
align-items: center;
overflow: hidden;
z-index:-3;
}
.OEU-bg {
position: relative;
width: 100%;
height: 100vh;
background: #1a1a1f;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
}
/* 호버 애니메이션 */
.OEU-hoverA {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverA;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 2s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverA {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverA:hover {
filter:brightness(1.4) contrast(120%);
}
.OEU-hoverB {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverB;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 2.2s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverB {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverB:hover {
filter:brightness(1.4) contrast(120%);
}
.OEU-hoverC {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverC;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 2.4s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverC {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverC:hover {
filter:brightness(1.4) contrast(120%);
}
.OEU-hoverD {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverD;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 2.6s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverD {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverD:hover {
filter:brightness(1.4) contrast(120%);
}
.OEU-hoverE {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverE;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 2.8s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverE {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverE:hover {
filter:brightness(1.4) contrast(120%);
}
.OEU-hoverF {
filter:brightness(1) contrast(100%);
transition: filter 0.5s;
opacity: 0;
animation: OEU-hoverF;
animation-iteration-count: 1;
animation-duration: 1.8s;
animation-delay: 3s;
animation-fill-mode: forwards;
transform: translateY(0%);
}
@keyframes OEU-hoverF {
from {opacity: 0; transform: translateY(20%);}
to {opacity: 1; transform: translateY(0%);}
}
.OEU-hoverF:hover {
filter:brightness(1.4) contrast(120%);
}
/* 칸 CSS */
.OEU-MainBox {
background: transparent;
width:100%;
padding: 2em;
display: inline-block;
}
.OEU-SubBox{
background: transparent;
border-radius: 5em;
width:100%;
color: white;
cursor: pointer;
line-height: 2em;
display: inline-block;
}
.OEU-box1{
background: #2b2b2f;
border-radius: 0.25em;
width:100%;
color: white;
cursor: pointer;
line-height: 2em;
padding: 1em;
display: inline-block;
}
@keyframes OEU-TextAnimation {
from {opacity: 0; transform: translateX(-2%);}
to {opacity: 1; transform: translateX(0%);}
}
/* # 모바일 반응성 */
@media screen and (min-width: 700px) {
.OEU-WebDisplay {
display:inherit;
}
}
@media screen and (min-width: 700px) {
.OEU-MobileDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.OEU-WebDisplay {
display:none;
}
}
@media screen and (max-width: 700px) {
.OEU-MobileDisplay {
display:inherit;
}
}