body{
            background:#171c61
        }

.outer {
	position:relative;
	top:20%;
	left:40%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	text-align:center;
	overflow:hidden;
	width:90%;
    min-width:800px;
}
.inner {
	position:relative;
	width:50px;
	height:250px;
	display:inline-block;
}
.inner div {
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
}
.inner .top {
	top:0;
	background-color:yellowgreen;
    background:url("../i/ball.svg") no-repeat;
    background-size:50px 50px;
	-webkit-animation:5s topNode ease-in-out infinite;
	animation:5s topNode ease-in-out infinite;
}
.inner .foot {
	bottom:0;
	background-color:royalblue;
    background:url("../i/ball.svg") no-repeat;
    background-size:50px 50px;
	-webkit-animation:5s footNode ease-in-out infinite;
	animation:5s footNode ease-in-out infinite;
}
@-webkit-keyframes topNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}@keyframes topNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}@-webkit-keyframes footNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}@keyframes footNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}
.inner .line {
	width:0;
	height:145px;
	border:3px solid transparent;
	border-radius:0px;
	opacity:0.5;
	background-color:#182987;
	top:50px;
	left:23px;
	bottom:50px;
	-webkit-animation:5s lineNode linear infinite;
	animation:5s lineNode linear infinite;
}
@keyframes lineNode {
	0% {
	transform:scale(0.5);
	transform:rotateX(0deg);
}
100% {
	transform:scale(1);
	transform:rotateX(360deg);
}
}

.scroll-toggle i{
            color:rgba(243,152,0,0.8);
    border: 3px solid rgba(243,152,0,0.8);

        }
        .scroll-toggle i:hover {
	color: rgba(243,152,0, 1);
	border: 3px solid rgba(243,152,0,1);
}
        .title{
            color:#333
        }
        .outer {
            transform: rotate(45deg) scale(0.5);
            height: 250px;
            position: fixed;
            top: 50px;
        }

        .s22 {
            top: 0;
            left: 20%;
        }

        /*.s42 {
            left: 25%;
            top: 50px;
        }*/
        .bgs02{
            height:100%;overflow:hidden;background:url(../i/ad02/title0203.svg) no-repeat;background-position:right bottom;background-size:60vh;
        }
        @media only screen and (max-width:640px) {
            .outer {
                left: -30%;
                top: -20px;
                transform: rotate(45deg) scale(0.4);
            }

            .s22 {
                top: 50px;
                left: 50px;
            }


            .bgs02{
                background-size:contain
            }

        }