문서 편집 권한이 없습니다. 다음 이유를 확인해주세요: 요청한 명령은 다음 중 하나의 권한을 가진 사용자에게 제한됩니다: 사용자, 관리자. 문서를 고치려면 이메일 인증 절차가 필요합니다. 사용자 환경 설정에서 이메일 주소를 입력하고 이메일 주소 인증을 해주시기 바랍니다. 문서의 원본을 보거나 복사할 수 있습니다. /* 호버 애니메이션 */ .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; } } 틀:OEU-Main/styles.css 문서로 돌아갑니다.