@charset "utf-8";

@keyframes fedein1 {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
99% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes popup {
0% {
transform: translateY(-20px);
opacity: 0;
}
60% {
transform: translateY(3px);
opacity: 1;
}
99% {
transform: translateY(0px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes ups {
0% {
transform: translateY(20px);
opacity: 0;
}
99% {
transform: translateY(0px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes ups02 {
0% {
transform: translateY(40px);
opacity: 0;
}
99% {
transform: translateY(0px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@media screen {
.popup {
opacity: 0;
transform: translateY(-20px)
}
.once.popup {
animation: popup 1.4s forwards;
}
.ups {
opacity: 0;
transform: translateY(-20px)
}
.once.ups {
animation: ups 1.4s forwards;
}
.ups02 {
opacity: 0;
transform: translateY(-60px)
}
.once.ups02 {
animation: ups02 1.4s forwards;
}
.once.popups {
animation: none;
opacity: 1;
transform: translateY(0)
}
.popups>* {
opacity: 0;
transform: translateY(-20px);
}
.once.popups>* {
animation: popup 1.4s forwards;
}
.once.popups>*:nth-child(2) {
animation-delay: 0.2s;
}
.once.popups>*:nth-child(3) {
animation-delay: 0.4s;
}
.once.popups>*:nth-child(4) {
animation-delay: 0.6s;
}
.once.popups>*:nth-child(5) {
animation-delay: 0.8s;
}
.once.popups>*:nth-child(6) {
animation-delay: 1.0s;
}
.once.popups>*:nth-child(7) {
animation-delay: 1.2s;
}
.once.popups>*:nth-child(8) {
animation-delay: 1.4s;
}
.once.popups>*:nth-child(9) {
animation-delay: 1.6s;
}
.once.popups>*:nth-child(10) {
animation-delay: 1.8s;
}
.feder,
.feder_row {
opacity: 0;
}
.once.feder {
animation: fedein1 1.2s forwards;
}
.once.feder_row {
animation: fedein1 2.0s ease-out forwards;
}
.feders>* {
opacity: 0;
}
.once.feders>* {
animation: fedein1 1.8s forwards;
}
.once.delay_set>*:nth-child(2),
.once.delay_1,
.once.delay_1::before,
.once.delay_1>* {
animation-delay: 0.2s !important;
}
.once.delay_set>*:nth-child(3),
.once.delay_2,
.once.delay_2::before,
.once.delay_2>* {
animation-delay: 0.4s !important;
}
.once.delay_set>*:nth-child(4),
.once.delay_3,
.once.delay_3::before,
.once.delay_3>* {
animation-delay: 0.6s !important;
}
.once.delay_set>*:nth-child(5),
.once.delay_4,
.once.delay_4::before,
.once.delay_4>* {
animation-delay: 0.8s !important;
}
.once.delay_set>*:nth-child(6),
.once.delay_5,
.once.delay_5::before,
.once.delay_5>* {
animation-delay: 1.0s !important;
}
.once.delay_set>*:nth-child(7),
.once.delay_6,
.once.delay_6::before,
.once.delay_6>* {
animation-delay: 1.2s !important;
}
.once.delay_set>*:nth-child(8),
.once.delay_7,
.once.delay_7::before,
.once.delay_7>* {
animation-delay: 1.4s !important;
}
.once.delay_set>*:nth-child(9),
.once.delay_8,
.once.delay_8::before,
.once.delay_8>* {
animation-delay: 1.6s !important;
}
.once.delay_set>*:nth-child(10),
.once.delay_9,
.once.delay_9::before,
.once.delay_9>* {
animation-delay: 1.8s !important;
}
.once.delay_set>*:nth-child(11),
.once.delay_10,
.once.delay_10::before,
.once.delay_10>* {
-webkit-animation-delay: 2.0s !important;
animation-delay: 2.0s !important;
}
.once.delay_set02>*:nth-child(2),
.once.delay02_1 {
animation-delay: 1s;
}
.once.delay_set02>*:nth-child(3),
.once.delay02_2 {
animation-delay: 2s;
}
.once.delay_set02>*:nth-child(4),
.once.delay02_3 {
animation-delay: 3s;
}
.once.delay_set02>*:nth-child(5),
.once.delay02_4 {
animation-delay: 4s;
}
.once.delay_set02>*:nth-child(6),
.once.delay02_5 {
animation-delay: 5s;
}
.once.delay_set02>*:nth-child(7),
.once.delay02_6 {
animation-delay: 6s;
}
.once.delay_set02>*:nth-child(8),
.once.delay02_7 {
animation-delay: 7s;
}
.vertical_open,
.holizon_open,
.bg_flash,
.bg_blackout {
position: relative;
overflow: hidden;
}
.vertical_open:before,
.vertical_open:after,
.holizon_open:before,
.holizon_open:after,
.bg_blackout:before {
content: "";
width: 100%;
height: 100%;
z-index: 1201;
background: #fff;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
transition: height .2s;
}
.vertical_open:after {
top: auto;
bottom: 0;
}
.vertical_open.once:before,
.vertical_open.once:after {
height: 0;
}
.holizon_open:before,
.holizon_open:after {
bottom: 0;
right: 0;
left: auto;
transition: width .4s .2s ease-out;
}
.holizon_open:after {
left: 0;
right: auto;
}
.holizon_open.once:before,
.holizon_open.once:after {
width: 0;
}
.smooth {
clip-path: inset(0 100% 0 0);
transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
transition-property: clip-path;
}
.once.smooth {
clip-path: inset(0);
}
.smooths>* {
clip-path: inset(0 100% 0 0);
transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
transition-property: clip-path;
}
.once.smooths>* {
clip-path: inset(0);
}
.once.delay_trans_set>*:nth-child(2),
.once.delay_trans_1 {
transition-delay: 0.2s;
}
.once.delay_trans_set>*:nth-child(3),
.once.delay_trans_2 {
transition-delay: 0.4s;
}
.once.delay_trans_set>*:nth-child(4),
.once.delay_trans_3 {
transition-delay: 0.6s;
}
.once.delay_trans_set>*:nth-child(5),
.once.delay_trans_4 {
transition-delay: 0.8s;
}
.once.delay_trans_set>*:nth-child(6),
.once.delay_trans_5 {
transition-delay: 1.0s;
}
.slide_in,
.slide_down {
position: relative;
}
.slide_in>*,
.slide_down>* {
opacity: 0;
}
.slide_in.once>*,
.slide_down.once>* {
animation-duration: 0s;
animation-delay: 0.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.slide_in::before,
.slide_down::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0%;
right: 100%;
z-index: 100;
height: 100%;
background-color: #fff;
}
.slide_down::before {
top: 0;
bottom: 100%;
left: 0;
right: 0;
height: auto;
width: 100%;
}
.slide_in.once::before,
.slide_down.once::before {
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(0.78, 0.07, 0, 1);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.slide_in.once>*,
.slide_down.once>* {
animation-name: imgopacity;
}
.slide_in.once:before {
animation-name: imgeffect;
}
.slide_down.once:before {
animation-name: imgeffect02;
}
@keyframes imgeffect {
0% {
left: 0%;
right: 100%;
}
50% {
left: 0%;
right: 0%;
}
100% {
left: 100%;
right: 0%;
}
}
@keyframes imgopacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes imgeffect02 {
0% {
top: 0%;
bottom: 100%;
}
50% {
top: 0%;
bottom: 0%;
}
100% {
top: 100%;
bottom: 0%;
}
}
}
.left_in {
overflow: hidden;
transform: translateX(-100%);
transition: transform .6s;
}
.once .left_in {
transform: translateX(0);
}
.left_in img {
overflow: hidden;
transform: translateX(100%);
transition: transform .6s;
}
.once .left_in img {
transform: translateX(0);
}
.right_in {
overflow: hidden;
transform: translateX(100%);
transition: transform .6s;
}
.once .right_in {
transform: translateX(0);
}
.right_in img {
overflow: hidden;
transform: translateX(-100%);
transition: transform .6s;
}
.once .right_in img {
transform: translateX(0);
}
@keyframes lefts {
0% {
transform: translateX(-40px);
opacity: 0;
}
99% {
transform: translateX(0px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
.lefts {
opacity: 0;
transform: translateX(40px)
}
.once .lefts {
animation: lefts 1.4s forwards;
}
@keyframes rights {
0% {
transform: translateX(40px);
opacity: 0;
}
99% {
transform: translateX(0px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
.rights {
opacity: 0;
transform: translateX(-40px)
}
.once .rights {
animation: rights 1.4s forwards;
}
.loop {
animation: loopAnime 40s linear infinite;
}
@keyframes loopAnime {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}