.top-gimmick{
height: 163px;
padding: 97px 0 0;
}
.top-gimmick1{
color: #35AA6E;
font-size: 91px;
text-align: center;
line-height: 0.5;
font-weight: bold;
}
#praen1{
position: relative;
top: -10px;
}
#top-visual{
margin: 0 auto 0;
width: 667px;
position: relative;
height: 77px;
line-height: 0.5;
}
.topimg-mo span{
position:absolute;
cursor:pointer
}
.topimg-mo span:hover{
background-color:#ff258c!important
}
.topbox-l1,.topbox-r1{
width:48%
}
.topbox-l1 li{
padding:0 0 10px;
font-size:16px;
color:#333;
background-color:#ececec
}
#topimg1 span{
top:30px;
left:0px;
width:30px;
height:30px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime0 12s ease 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime0{
0%{
opacity:0.8
}
49%{
left:5px;
top:35px;
opacity:0.8;
transform:skew(20deg, 10deg)
}
50%{
opacity:0.2;
transform:rotate(50deg)
}
51%{
opacity:0.8
}
to{
left:0;
top:30px;
transform:skew(15deg, 25deg)
}
}
@keyframes boxanime1{
0%{
left:30%;
top:8%;
opacity:0.8
}
25%{
left:32%;
top:7%
}
49%{
opacity:0.8;
transform:skew(20deg, 10deg)
}
50%{
left:30%;
top:8%;
opacity:0.2
}
51%{
opacity:0.8
}
to{
left:32%;
top:8%;
transform:rotate(50deg);
transform:skew(10deg, 15deg)
}
}#topimg2 span{
top:100px;
left:100px;
width:20px;
height:20px;
background-color:#60cdff;
opacity:0.5;
animation:boxanime1 7s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime3{
0%{
left:42%;
top:0%;
opacity:0.8
}
25%{
left:41%;
top:-1%;
opacity:1
}
49%{
transform:skew(10deg, 5deg)
}
50%{
left:42%;
top:2%;
opacity:0.2
}
51%{
opacity:1
}
to{
left:41%;
top:0%;
transform:rotate(-50deg);
transform:skew(-20deg, -5deg)
}
}#topimg3 span{
top:100px;
left:100px;
width:40px;
height:60px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime3 4s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime4{
0%{
left:37%;
top:30px;
opacity:1;
transform:rotate(-50deg);
transform:skew(-20deg, -5deg)
}
25%{
left:34%;
top:36px
}
49%{
transform:skew(10deg, 5deg)
}
50%{
left:35%;
top:40px;
opacity:0.2
}
51%{
opacity:0.8
}
to{
top:30.5px
}
}#topimg4 span{
top:0px;
left:37%;
width:80px;
height:30px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime4 5s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime5{
0%{
left:54%;
top:5px;
opacity:0.2;
transform:rotate(10deg);
transform:skew(-20deg, -5deg)
}
25%{
left:50%
}
49%{
transform:skew(10deg, 5deg);
opacity:1
}
50%{
left:58%;
top:5px;
opacity:0.2
}
51%{
opacity:0.8
}
52%{
opacity:0.3
}
}#topimg5 span{
top:0;
left:54%;
width:80px;
height:80px;
background-color:#00ffea;
opacity:0.2;
animation:boxanime5 6s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime6{
0%{
left:5%;
top:38px;
}
49.5%{
opacity:1;
background-color:#aeeee6
}
49.9%{
opacity:1;
background-color:#FFF
}
50%{
left:4%;
top:30px;
opacity:0.2
}
51%{
opacity:0.8
}
}
#topimg6 span{
top:0;
left:5%;
width:80px;
height:50px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime6 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime7{
0%{
left:16%;
top:7%
}
25%{
left:17%;
top:8%;
opacity:0.2;
transform:rotate(10deg);
transform:skew(-20deg, -5deg)
}
50%{
opacity:0.2
}
51%{
opacity:0.5
}
}
#topimg7 span{
top:7%;
left:18%;
width:110px;
width:20px;
height:90px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime7 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime8{
0%{
left:16%;
top:0;
transform:skew(5deg, 5deg)
}
25%{
left:16%;
top:1%;
opacity:0.5
}
50%{
width:90px;
transform:skew(10deg, 10deg)
}
51%{
top:6%
}
}
#topimg8 span{
top:0;
left:18%;
width:110px;
height:20px;
background-color:#60cdff;
opacity:0.5;
animation:boxanime8 8s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(-5deg, -5deg)
}
@keyframes boxanime9{
0%{
left:20%;
top:10%;
transform:skew(1deg, 2deg)
}
25%{
opacity:0.5
}
50%{
left:20%;
top:11%;
width:70px;
transform:skew(0deg, 1deg)
}
51%{
left:21%
}
}#topimg9 span{
left:20%;
top:10%;
width:90px;
height:30px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime9 8s ease-in-out 0s infinite alternate;
animation-fill-mode:both
}
@keyframes boxanime10{
0%{
left:0%;
top:21%;
transform:skew(50deg, -5deg)
}
50%{
left:2%;
top:18%;
width:70px;
transform:skew(0deg, -5deg)
}
to{
opacity:0.5
}
}
#topimg10 span{
left:0%;
top:21%;
width:90px;
height:30px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime10 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(50deg, -5deg)
}
@keyframes boxanime11{
0%{
left:0%;
top:25%;
transform:skew(-50deg, 5deg)
}
50%{
left:2%;
top:27%;
width:90px
}
75%{
transform:skew(0deg, -5deg)
}
to{
opacity:0.5
}
}#topimg11 span{
left:0%;
top:25%;
width:30px;
height:90px;
background-color:#60cdff;
opacity:0.5;
animation:boxanime11 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(50deg, -5deg)
}
@keyframes boxanime12{
0%{
left:2%;
top:68%;
transform:skew(-50deg, 5deg)
}
50%{
left:2%;
top:68%;
width:90px
}
75%{
transform:skew(0deg, -5deg)
}
to{
opacity:0.5
}
}#topimg12 span{
left:2%;
top:68%;
width:50px;
height:60px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime12 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(50deg, -5deg)
}
@keyframes boxanime13{
0%{
left:90%;
top:45%;
transform:skew(0deg, -5deg)
}
50%{
left:90%;
top:45%;
width:90px
}
75%{
transform:skew(0deg, -10deg)
}
to{
opacity:0.5
}
}#topimg13 span{
left:90%;
top:45%;
width:50px;
height:60px;
background-color:#60cdff;
opacity:0.5;
animation:boxanime13 10s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(50deg, -5deg)
}
@keyframes boxanime14{
0%{
left:75%;
top:45%;
transform:skew(10deg, -5deg)
}
50%{
left:74%;
top:45%;
width:120px;
transform:skew(-10deg, -10deg)
}
to{
opacity:0.5
}
}#topimg14 span{
left:75%;
top:45%;
width:80px;
height:40px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime14 9s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(10deg, -5deg)
}
@keyframes boxanime15{
0%{
left:80%;
top:32%;
transform:skew(-20deg, 15deg)
}
50%{
left:80%;
top:30%;
opacity:0.5;
width:120px;
transform:skew(10deg, -15deg)
}
}#topimg15 span{
left:80%;
top:32%;
width:80px;
height:40px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime15 9s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(-20deg, 15deg)
}
@keyframes boxanime16{
0%{
left:60%;
top:38%;
transform:skew(10deg, -15deg)
}
50%{
left:60%;
top:38%;
opacity:0.5;
width:120px;
transform:skew(-20deg, 15deg)
}
}#topimg16 span{
left:60%;
top:38%;
width:100px;
height:20px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime16 7s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(10deg, -15deg)
}
@keyframes boxanime17{
0%{
left:60%;
top:45%;
transform:skew(10deg, -15deg);
transform:rotate(10deg)
}
50%{
left:57%;
top:47%;
opacity:0.5;
width:120px;
transform:skew(-20deg, 15deg);
transform:rotate(0deg)
}
}#topimg17 span{
left:60%;
top:45%;
width:150px;
height:30px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime17 7s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(10deg, -15deg);
transform:rotate(10deg)
}
@keyframes boxanime18{
0%{
left:70%;
top:40%;
transform:rotate(-10deg)
}
25%{
transform:skew(10deg, -15deg)
}
50%{
left:75%;
top:40%;
opacity:0.5;
width:120px;
transform:rotate(20deg)
}
75%{
transform:skew(-50deg, 15deg)
}
}

#topimg18 span{
left:70%;
top:40%;
width:100px;
height:60px;
background-color:#60cdff;
opacity:0.5;
animation:boxanime18 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(10deg, -15deg);
transform:rotate(-10deg)
}
@keyframes boxanime19{
0%{
left:25%;
top:40%;
transform:rotate(-70deg)
}
25%{
transform:skew(30deg, -35deg)
}
50%{
left:35%;
top:40%;
opacity:0.5;
transform:rotate(0deg)
}
75%{
width:200px;
transform:skew(0deg, 0deg)
}
}#topimg19 span{
left:25%;
top:40%;
width:150px;
height:30px;
background-color:#00eaff;
opacity:0.5;
animation:boxanime19 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(30deg, -35deg);
transform:rotate(-70deg)
}
@keyframes boxanime20{
0%{
left:18%;
top:25%
}
25%{
transform:skew(10deg, -10deg)
}
50%{
left:15%;
top:20%;
width:120px;
opacity:0.5;
transform:rotate(0deg)
}
75%{
transform:skew(0deg, 0deg)
}
}#topimg20 span{
left:18%;
top:25%;
width:80px;
height:40px;
background-color:#aeeee6;
opacity:0.5;
animation:boxanime20 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(10deg, -10deg)
}
@keyframes boxanime21{
0%{
left:18%;
top:35%
}
25%{
transform:skew(5deg, 5deg)
}
50%{
left:18%;
top:36%;
width:80px;
opacity:0.8;
transform:rotate(0deg)
}
75%{
transform:skew(0deg, 0deg)
}
}
#topimg21 span{
left:18%;
top:35%;
width:120px;
height:80px;
background-color:#ace5ff;
opacity:0.5;
animation:boxanime21 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(5deg, 5deg)
}
@keyframes boxanime22{
0%{
left:10%;
top:35%;
transform:skew(0deg, 0deg)
}
50%{
left:8%;
top:36%;
width:50px;
height:80px;
transform:skew(5deg, 5deg);
transform:rotate(0deg)
}
}#topimg22 span{
left:10%;
top:35%;
width:60px;
height:60px;
background-color:#00eaff;
opacity:0.3;
animation:boxanime22 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(0deg, 0deg)
}
@keyframes boxanime23{
0%{
left:10%;
top:75%;
transform:skew(5deg, 5deg)
}
50%{
left:8%;
top:75%;
transform:rotate(5deg)
}
75%{
width:120px;
height:40px
}
}#topimg23 span{
left:10%;
top:75%;
width:150px;
height:30px;
background-color:#55b1ff;
opacity:0.3;
animation:boxanime23 12s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(5deg, 5deg);
transform:rotate(0deg)
}
@keyframes boxanime24{
0%{
left:30%;
top:75%;
transform:skew(-5deg, 5deg)
}
50%{
left:30%;
top:75%;
transform:rotate(5deg);
transform:skew(0deg, 0deg)
}
75%{
width:80px;
height:40px
}
}#topimg24 span{
left:30%;
top:75%;
width:50px;
height:50px;
background-color:#00eaff;
opacity:0.3;
animation:boxanime24 8s ease-in-out 0s infinite alternate;
animation-fill-mode:both;
transform:skew(-5deg, 5deg);
transform:rotate(0deg)
}