|
|
| (같은 사용자의 중간 판 37개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| /* 변시 인트로 */
| |
| .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: Noto Serif KR;
| |
| }
| |
|
| |
| @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(2%);}
| |
| 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;
| |
| }
| |
|
| |
| .AOC-select a:hover {
| |
| background: #00CC9C;
| |
| color: #252525;
| |
| }
| |
|
| |
| .AOC-QnA td {
| |
| background: white;
| |
| color: #191919;
| |
| 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;
| |
| }
| |
|
| |
| .AOC-bg {
| |
| position: relative;
| |
| width: 100%;
| |
| height: 100vh;
| |
| background: #00F1BA;
| |
| display: inherit;
| |
| justify-content: center;
| |
| align-items: center;
| |
| overflow: hidden;
| |
|
| |
| z-index:-3;
| |
| }
| |
|
| |
| /* 대문 리뉴얼 (모바일 대응) */
| |
| @media screen and (max-width: 768px) {
| |
| .AOC-Wrote {
| |
| font-size: 12pt;
| |
| 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 {
| |
| font-size: 9pt;
| |
| font-family: Pretendard JP Variable;
| |
| }
| |
|
| |
| .AOC-QnA b {
| |
| font-family: Pretendard, Pretendard JP Variable;
| |
| }
| |
| }
| |