@charset "utf-8";

*{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;color:#000;}
.cf:after{
	content:'';
	display:block;
	clear:both;
}

body{
	background-color:#306d85;	
	padding-top:50px;
	box-sizing:border-box;
}
.circle_wrapper{
	width:300px;
	height:300px;
	margin:0 auto;
	border:6px solid #3e8caa;
	border-radius:50%;
	background:linear-gradient(#2c647a,#204858);
	box-sizing:border-box;
	overflow:hidden;
	position:relative;
}

.circle_wrapper .bubble{
	width:7px;
	height:7px;
	border-radius:50%;
	background-color:#6bafca;
	position:absolute;
	animation:bh 1s infinite ease-in,
			  bv 300ms infinite alternate ease-in-out,
			  bs 300ms infinite alternate ease-in-out;
	opacity:0.9;
}
@keyframes bh{
	0%{left:80%;}
	100%{left:-100%;}
}

@keyframes bv{
	0%{top:115px;}
	100%{top:160px;}
}
@keyframes bs{
	0%{transform:scale(1.4);}
	100%{transform:scale(0.9);}
}

.circle_wrapper .bubble:after{
	content:'';
	display:block;
	width:9px;
	height:9px;
	border-radius:50%;
	background-color:inherit;
	position:absolute;
	left:100px;
	top:-20px;
	opacity:0.9;
}
.submarine{
	width:300px;
	height:300px;
	/* border:1px solid #000; */
	animation:diving 3s infinite ease-in-out,
			  diving_rotate 3s infinite ease-in-out;
	position:absolute;
	top:0;
	left:0;
}
@keyframes diving{
	0%{margin-top:5px;}
	50%{margin-top:15px;}
	100%{margin-top:5px;}
}
@keyframes diving_rotate{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(3deg);}
	75%{transfrom:rotate(-2deg);}
	100%{transform:rotate(0deg);}
}

.submarine .s_body{
	width:150px;
	height:80px;
	background:linear-gradient(#d93a54,#bc243d);
	position:absolute;
	left:70px;
	top:100px;
	border-radius:40%;
}

.submarine .s_body .window{
	width:37px;
	height:37px;
	background:linear-gradient(#1e4554,#183642);
	border-radius:50%;
	position:absolute;
	right:18px;
	top:23px;
	border:3px solid #d93a54;
	box-sizing:border-box;
}
.submarine .s_body .window:after{
	content:'';
	display:block;
	width:25px;
	height:25px;
	box-sizing:border-box;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(-45deg);
	border-radius:50%;
	border-top:3px solid #fff;
}
.submarine .s_body .light{
	width:0px;
	height:0px;
	box-sizing:border-box;
	border-width:0px 40px 150px 40px;
	border-style:solid;
	border-color:transparent transparent #377c98 transparent;
	position:absolute;
	right:-43%;
	top:40px;
	transform:rotate(-50deg);
}
.submarine .s_body .light:after{
	content:'';
	display:block;
	width:20px;
	height:13px;
	background-color:#d12844;
	border-radius:5px;
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
}

.submarine .s_body .engine{
	width:30px;
	height:30px;
	background-color:#bc243d;
	position:absolute;
	top:32px;
	left:53px;
	border-radius:50%;
	border:5px solid #d93a54;
	box-sizing:border-box;
	animation:gogo 900ms infinite;
}
@keyframes gogo{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

.submarine .s_body .engine:before,
.submarine .s_body .engine:after{
	content:'';
	display:block;
	width:4px;
	height:20px;
	background-color:#fff;
	border-radius:2px;
	opacity:0.8;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.submarine .s_body .engine:after{
	transform:translate(-50%,-50%) rotate(90deg);
}

.submarine .s_body .helix{
	width:30px;
	height:70px;
	background:linear-gradient(#d93a54,#bc243d);
	border-radius:7px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:-25px;
}
.submarine .s_body .helix:after{
	content:'';
	display:block;
	width:17px;
	height:60px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border-radius:3px;
	background:linear-gradient(#d93a54 0%,#d93a54 50%,#e57a8c 50%,#e57a8c 100%);
	background-size:100% 20px;
	animation:tail 0.6s infinite;
}

.submarine .s_body .hat{
	width:65px;
	height:25px;
	background:linear-gradient(#d93a54,#d72d49);
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:98%;
	border-radius:10% 10% 0 0;
}
.submarine .s_body .hat .led{
	width:53px;
	height:13px;
	background:linear-gradient(#b3233a,#a21f35);
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border-radius:10px;
}
.submarine .s_body .hat .led:after{
	content:'';
	display:block;
	width:5px;
	height:5px;
	background-color:#fff;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border-radius:50%;
	box-shadow:-15px 0 0 #fff,
			   15px 0 0 #fff;
	animation:twinkle 500ms infinite;
}
@keyframes twinkle{
	0%{opacity:1;}
	100%{opacity:0;}
}

.submarine .s_body .hat .periscope{
	width:7px;
	height:20px;
	background-color:#d93a54;
	position:absolute;
	left:32px;
	top:-18px;
	border-radius:5px 0 0 0;
}
.submarine .s_body .hat .periscope:after{
	content:'';
	display:block;
	width:15px;
	height:7px;
	border-radius:5px;
	background-color:inherit;
	position:absolute;
	top:0;
	left:0;
}