@charset "utf-8";
/* CSS Document */


body{
	background:#eeeeee;
	overflow-x:hidden;
	overflow-y:hidden;
}

.content-body{
	width: 100%;
	left: 0;
	top: 0;
	position: relative;
	z-index: 1;
	-webkit-transition: .7s ease;
    -moz-transition: .7s ease;
    -o-transition: .7s ease;
    transition: .7s ease;	
}

.content-bk{
    width: 100%;
	height: 990px;
	top: 0;
	left: 0;
	position: fixed;
	overflow: hidden;
	z-index: 4;	
    background:url(../images/five-bk.jpg) no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
	animation:secbk 1s ease-out;
}
.content-swipe{
	left: 370px;
}
@keyframes secbk{
	0%{
		opacity:0;
		-webkit-transform: translate(0,150px);
		-moz-transform: translate(0,150px);
		-o-transform: translate(0,150px);
		transform: translate(0,150px);	
	}
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.content-psd{
    width: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 5;			 
}
.content-box-inner{
    width: 1060px;
	margin: 50px auto 0 auto;
	display: block;		 
}
.content-box{
    width: 100%;
	height: 990px;
	top: 0;
	left: 0;
	position: relative;
	z-index: 20px;		 
}
.static-center-round{
	width: 429px;
	top: 240px;
	left: 30%;
	position: absolute; 
	z-index: 21;
	animation:dynamic-title-box .8s ease-out;	
}
.static-center-round img{
	max-width: 429px;
	height: auto;
	width: 100%;	
}
.static-center-round-2{
	width: 331px;
	top: 240px;
	right: 0;
	position: absolute; 
	z-index: 21;
	animation:dynamic-title-box .8s ease-out;
	display: none;	
}
.static-center-round-2 img{
	max-width: 331px;
	height: auto;
	width: 100%;	
}
.static-center-round-3{
	width: 322px;
	top: 240px;
	left: 0;
	position: absolute; 
	z-index: 21;
	animation:dynamic-title-box .8s ease-out;
	display: none;	
}
.static-center-round-3 img{
	max-width: 322px;
	height: auto;
	width: 100%;	
}
@keyframes dynamic-title-box{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	60%{
		opacity:1;
		-webkit-transform: scale(1.3);
		-moz-transform: scale(1.3);
		-o-transform: scale(1.3);
		transform: scale(1.3);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.temp{
	width: 302px;
	height: auto;
	top: 125px;
	left: 10%;
	position: absolute; 
	z-index: 21;
	animation:temp 1s ease-out;
}
.temp img{
	max-width: 302px;
	height: auto;
    width: 100%;
}
@keyframes temp{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	20%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}

.cycling{
	width: 318px;
	height: auto;
	top: 260px;
	left: 1%;
	position: absolute; 
	z-index: 21;
	animation:cycling 1s ease-out;
}
.cycling img{
	max-width: 318px;
	height: auto;
	width: 100%;
}
@keyframes cycling{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.msl{
	width: 311px;
	height: auto;
	top: 395px;
	left: -3%;
	position: absolute; 
	z-index: 21;
	animation:msl 1.2s ease-out;
}
.msl img{
	max-width: 311px;
	height: auto;
    width: 100%;
}
@keyframes msl{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.gas{
	width: 318px;
	height: auto;
	top: 530px;
	left: 1%;
	position: absolute; 
	z-index: 21;
	animation:gas 1.4s ease-out;
}
.gas img{
	max-width: 318px;
	height: auto;
    width: 100%;
}
@keyframes gas{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.salt{
	width: 310px;
	height: auto;
	top: 667px;
	left: 10%;
	position: absolute; 
	z-index: 21;
	animation:salt 1.6s ease-out;
}
.salt img{
	max-width: 310px;
	height: auto;
	width: 100%;
}
@keyframes salt{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.free{
	width: 311px;
	height: auto;
	top: 313px;
	left: 72%;
	position: absolute; 
	z-index: 21;
	animation:free 1.2s ease-out;
}
.free img{
	max-width: 311px;
	height: auto;
	width: 100%;
}
@keyframes free{
	0%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.vib{
	width: 311px;
	height: auto;
	top: 453px;
	left: 72%;
	position: absolute; 
	z-index: 21;
	animation:vib 1.4s ease-out;
}
.vib img{
	max-width: 311px;
	height: auto;
	width: 100%;
}
@keyframes vib{
	0%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.envir{
	width: 280px;
	display: block;
	top: 53px;
	left: 10%;
	position: absolute; 
	z-index: 21;
	animation:envir 1s ease-out;	
}

.mark{
	width: 29px;
	display: block;
	float: left;
	margin-top: 2px;
	margin-right: 3px;
}
.mark-title{
	width: 235px;
	display: block;
	float: left;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 28px;
    color: #424242;
}
@keyframes envir{
	0%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(-150px,0);
		-moz-transform: translate(-150px,0);
		-o-transform: translate(-150px,0);
		transform: translate(-150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}


.stress{
	width: 280px;
	display: block;
	top: 243px;
	left: 72%;
	position: absolute; 
	z-index: 21;
	animation:stress 1s ease-out;	
}


@keyframes stress{
	0%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}
	40%{
		opacity:0;
		-webkit-transform: translate(150px,0);
		-moz-transform: translate(150px,0);
		-o-transform: translate(150px,0);
		transform: translate(150px,0);	
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}

.static-box{
	width: 300px;
	display: block;
	top: 133px;
	left: 72%;
	color: #424242;
	position: absolute; 
	z-index: 21;
	animation:stress 1s ease-out;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 60px;		
}



@media only screen and (max-width:1680px){
}
@media only screen and (max-width:1440px){
.content-bk{
    width: 100%;
	height: 900px;
}
.content-box-inner{
    width: 1060px;
	margin: -20px auto 0 auto;	 
}
.content-box{
    width: 100%;
	height: 900px;		 
}
.envir{
	width: 350px;
	top: 70px;
	left: 9%;	
}
.mark{
	width: 29px;
	margin-top: 2px;
	margin-right: 3px;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}
.stress{
	width: 350px;
	top: 228px;
	left: 69%;
}
.static-box{
	width: 430px;
	top: 123px;
	left: 69%;
	font-size: 55px;		
}

.temp{
	width: 272px;
	height: auto;
	top: 125px;
	left: 10%;
}
.cycling{
	width: 288px;
	height: auto;
	top: 240px;
	left: 1%;
}

.msl{
	width: 281px;
	height: auto;
	top: 355px;
	left: -3%;
}

.gas{
	width: 288px;
	height: auto;
	top: 470px;
	left: 1%;
}

.salt{
	width: 280px;
	height: auto;
	top: 590px;
	left: 10%;
}

.free{
	width: 281px;
	height: auto;
	top: 283px;
	left: 69%;
}
.vib{
	width: 281px;
	height: auto;
	top: 403px;
	left: 69%;
}
.static-center-round{
	width: 380px;
	top: 220px;
	left: 30%;	
}
}
@media only screen and (max-width:1366px) and (max-height:1024px){
.content-bk{
    width: 100%;
	height: 1024px;
}
.content-box-inner{
    width: 1060px;
	margin: 120px auto 0 auto;	 
}
.content-box{
    width: 100%;
	height: 1024px;		 
}	
}
@media only screen and (max-width:1366px) and (max-height:768px){
.content-box-inner{
    width: 1060px;
	margin: -60px auto 0 auto;	 
}
}
@media only screen and (max-width:1280px){	
}
@media only screen and (max-width:1024px) and (max-height:1366px){
.content-bk{
    width: 100%;
	height: 1366px;
}
.content-box-inner{
    width: 1024px;
	margin: 260px auto 0 auto;
	-webkit-transform: translate(20px,0);
	-moz-transform: translate(20px,0);
	-o-transform: translate(20px,0);
	transform: translate(20px,0);			 
}
.content-box{
    width: 100%;
	height: 1366px;		 
}
.static-box{
	width: 410px;
	top: 123px;
	left: 66%;
	font-size: 50px;		
}
.cycling{
	width: 288px;
	height: auto;
	top: 240px;
	left: 2%;
}

.msl{
	width: 281px;
	height: auto;
	top: 355px;
	left: -1%;
}
.gas{
	width: 288px;
	height: auto;
	top: 470px;
	left: 2%;
}
.stress{
	width: 350px;
	top: 228px;
	left: 66%;
}
.mark{
	width: 29px;
	margin-top: 0px;
	margin-right: 3px;
}
}
@media only screen and (max-width:1024px) and (max-height:768px){
.content-box-inner{
    width: 1024px;
	margin: -30px auto 0 auto;
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);			 
}
.content-bk{
    width: 100%;
	height: 768px;
}
.content-box{
    width: 100%;
	height: 768px;		 
}
.static-center-round{
	width: 380px;
	top: 220px;
	left: 34%;	
}
.temp{
	width: 272px;
	height: auto;
	top: 125px;
	left: 17%;
}
.cycling{
	width: 288px;
	height: auto;
	top: 240px;
	left: 6%;
}

.msl{
	width: 281px;
	height: auto;
	top: 355px;
	left: 4%;
}

.gas{
	width: 288px;
	height: auto;
	top: 470px;
	left: 6%;
}

.salt{
	width: 280px;
	height: auto;
	top: 590px;
	left: 17%;
}
.free{
	width: 271px;
	height: auto;
	top: 283px;
	left: 72%;
}
.vib{
	width: 271px;
	height: auto;
	top: 403px;
	left: 72%;
}
.static-box{
	width: 230px;
	top: 143px;
	left: 74%;
	font-size: 50px;		
}
.mark-title{
	width: 180px;
}
.envir{
	width: 230px;
	top: 70px;
	left: 15%;	
}
.stress{
	width: 230px;
	top: 228px;
	left: 74%;
}
}
@media only screen and (max-width:900px){
.content-box-inner{
    width: 900px;
	margin: 350px auto 0 auto;
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);			 
}
.content-bk{
    width: 100%;
	height: 1600px;
}
.content-box{
    width: 100%;
	height: 1600px;		 
}

.envir{
	width: 300px;
	top: 70px;
	left: 9%;	
}
.mark{
	width: 29px;
	margin-top: 4px;
	margin-right: 3px;
}
.mark-title{
	width: 265px;
	font-size: 22px;
}
.stress{
	width: 300px;
	top: 228px;
	left: 66%;
}
.static-box{
	width: 310px;
	top: 123px;
	left: 65%;
	font-size: 50px;		
}

.temp{
	width: 242px;
	height: auto;
	top: 125px;
	left: 12%;
}
.cycling{
	width: 258px;
	height: auto;
	top: 240px;
	left: 3%;
}

.msl{
	width: 251px;
	height: auto;
	top: 355px;
	left: 1%;
}

.gas{
	width: 258px;
	height: auto;
	top: 470px;
	left: 3%;
}

.salt{
	width: 250px;
	height: auto;
	top: 590px;
	left: 12%;
}

.free{
	width: 251px;
	height: auto;
	top: 283px;
	left: 69%;
}
.vib{
	width: 251px;
	height: auto;
	top: 403px;
	left: 69%;
}
.static-center-round{
	width: 350px;
	top: 220px;
	left: 30%;	
}
}
@media only screen and (max-width:800px){
.content-box-inner{
    width: 800px;
	margin: 120px auto 0 auto;		 
}
.content-bk{
    width: 100%;
	height: 1580px;
}
.content-box{
    width: 100%;
	height: 1480px;		 
}
body{
	overflow-y:auto;
}


.static-box{
	width: 320px;
	top: -30px;
	left: 15%;
	font-size: 50px;		
}
.stress{
	width: 350px;
	top: 208px;
	left: 69%;
}
.envir{
	width: 350px;
	top: 45px;
	left: 15%;	
}
.static-center-round{
	width:400px;
	top: 220px;
	left: 55%;
	display: none	
}
.static-center-round-2{
	width: 390px;
	top: 150px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 390px;
}
.static-center-round-3{
	width:390px;
	top: 820px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 390px;
}
.mark{
	width: 29px;
	margin-top: 4px;
	margin-right: 3px;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}

.temp{
	width: 242px;
	height: auto;
	top: 105px;
	left: 24%;
}
.cycling{
	width: 258px;
	height: auto;
	top: 230px;
	left: 16%;
}

.msl{
	width: 280px;
	height: auto;
	top: 355px;
	left: 9%;
}

.gas{
	width: 258px;
	height: auto;
	top: 490px;
	left: 16%;
}

.salt{
	width: 250px;
	height: auto;
	top: 620px;
	left: 26%;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}
.stress{
	width: 350px;
	top: 870px;
	left: 49%;
}
.free{
	width: 255px;
	height: auto;
	top: 940px;
	left: 54%;
}
.vib{
	width: 255px;
	height: auto;
	top: 1093px;
	left: 54%;
}

}
@media only screen and (max-width:768px){
.content-box-inner{
    width: 768px;
	margin: 100px auto 0 auto;
	height: 1124px;		 
}
.content-bk{
    width: 100%;
	height: 1100px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 1324px;		 
} 
.static-box{
	width: 280px;
	top: -63px;
	left: 60%;
	font-size: 45px;		
}
.stress{
	width: 350px;
	top: 208px;
	left: 69%;
}
.envir{
	width: 350px;
	top: 45px;
	left: 15%;	
}
.static-center-round-2{
	width: 390px;
	top: 170px;
	right: 0;
	display: block;	
}
.static-center-round-3{
	width:390px;
	top: 820px;
	left: 0;
	display: block;	
}
.mark{
	width: 29px;
	margin-top: 4px;
	margin-right: 3px;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}

.temp{
	width: 252px;
	height: auto;
	top: 105px;
	left: 22%;
}
.cycling{
	width: 268px;
	height: auto;
	top: 240px;
	left: 12%;
}

.msl{
	width: 275px;
	height: auto;
	top: 370px;
	left: 5%;
}

.gas{
	width:268px;
	height: auto;
	top: 510px;
	left: 12%;
}

.salt{
	width: 260px;
	height: auto;
	top: 650px;
	left: 22%;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}
.stress{
	width: 350px;
	top: 868px;
	left: 49%;
}
.free{
	width: 261px;
	height: auto;
	top: 933px;
	left: 58%;
}
.vib{
	width: 261px;
	height: auto;
	top: 1093px;
	left: 58%;
}

}
@media only screen and (max-width:600px){
.content-box-inner{
    width: 600px;
	margin: 100px auto 0 auto;
	height: 1024px;		 
}
.content-bk{
    width: 100%;
	height: 1024px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 1224px;		 
} 
.static-box{
	width: 260px;
	top: -63px;
	left: 55%;
	font-size: 40px;		
}
.envir{
	width: 350px;
	top: 45px;
	left: 15%;	
}
.static-center-round-2{
	width: 290px;
	top: 200px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 290px;
}
.static-center-round-3{
	width:290px;
	top: 770px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 290px;
}
.mark{
	width: 29px;
	margin-top: 4px;
	margin-right: 3px;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}

.temp{
	width: 232px;
	height: auto;
	top: 105px;
    left: 28%;
}
.cycling{
	width: 248px;
	height: auto;
	top: 220px;
	left: 12%;
}

.msl{
	width: 262px;
	height: auto;
	top: 338px;
	left: 5%;
}

.gas{
	width:248px;
	height: auto;
	top: 460px;
	left: 12%;
}

.salt{
	width: 245px;
	height: auto;
	top: 580px;
	left: 28%;
}
.mark-title{
	width: 315px;
	font-size: 25px;
}
.stress{
	width: 350px;
	top: 758px;
	left: 40%;
}
.free{
	width: 251px;
	height: auto;
	top: 843px;
	left: 53%;
}
.vib{
	width: 251px;
	height: auto;
	top: 963px;
	left: 53%;
}

}
@media only screen and (max-width:480px){
.content-box-inner{
    width: 480px;
	margin: 100px auto 0 auto;
	height: 900px;		 
}
.content-bk{
    width: 100%;
	height: 900px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 1084px;		 
} 
.static-box{
	width: 170px;
	top: -13px;
	left: 16%;
	font-size: 35px;		
}
.static-center-round-2{
	width: 240px;
	top: 170px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 240px;
}
.static-center-round-3{
	width:240px;
	top: 660px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 240px;
}
.envir{
	width: 180px;
	top: 45px;
	left: 15%;	
}
.stress{
	width: 180px;
	top: 660px;
	left: 54%;
}
.mark{
	width: 29px;
	margin-top: 2px;
	margin-right: 3px;
}
.mark-title{
	width: 140px;
	font-size: 22px;
}

.temp{
	width: 190px;
	height: auto;
	top: 100px;
    left: 25%;
}
.cycling{
	width: 205px;
	height: auto;
	top: 190px;
	left: 10%;
}

.msl{
	width: 210px;
	height: auto;
	top: 285px;
	left: 5%;
}

.gas{
	width:205px;
	height: auto;
	top: 380px;
	left: 10%;
}

.salt{
	width: 205px;
	height: auto;
	top: 475px;
	left: 25%;
}

.free{
	width: 200px;
	height: auto;
	top: 723px;
	left: 54%;
}
.vib{
	width: 200px;
	height: auto;
	top: 823px;
	left: 54%;
}	
}
@media only screen and (max-width:414px){
.content-swipe{
	left: 300px;
}
.content-box-inner{
    width: 414px;
	margin: 100px auto 0 auto;
	height: 700px;		 
}
.content-bk{
    width: 100%;
	height: 800px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 900px;		 
} 
.static-box{
	width: 140px;
	top: -23px;
	left: 16%;
	font-size: 30px;		
}
.static-center-round-2{
	width: 220px;
	top: 145px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 220px;
}
.static-center-round-3{
	width:220px;
	top: 560px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 220px;
}
.envir{
	width: 170px;
	top: 30px;
	left: 15%;	
}
.stress{
	width: 170px;
	top: 575px;
	left: 52%;
}
.mark{
	width: 29px;
	margin-top: -2px;
	margin-right: 3px;
}
.mark-title{
	width: 135px;
	font-size: 20px;
}

.temp{
	width: 182px;
	height: auto;
	top: 80px;
    left: 20%;
}
.cycling{
	width: 198px;
	height: auto;
	top: 165px;
	left: 7%;
}

.msl{
	width: 200px;
	height: auto;
	top: 248px;
	left: 1%;
}

.gas{
	width:190px;
	height: auto;
	top: 335px;
	left: 7%;
}

.salt{
	width: 190px;
	height: auto;
	top: 420px;
	left: 20%;
}

.free{
	width: 190px;
	height: auto;
	top: 630px;
	left: 53%;
}
.vib{
	width: 190px;
	height: auto;
	top: 720px;
	left: 53%;
}
}
@media only screen and (max-width:375px){
.content-box-inner{
    width: 375px;
	margin: 70px auto 0 auto;
	height: 1000px;		 
}
.content-bk{
    width: 100%;
	height: 700px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 1000px;		 
} 
.static-center-round-2{
	width: 250px;
	top: 150px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 250px;
}
.static-center-round-3{
	width:250px;
	top: 600px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 250px;
}


.static-box{
	width: 130px;
	top: 5px;
	left: 16%;
	font-size: 30px;		
}


.envir{
	width: 180px;
	top: 55px;
	left: 15%;	
}
.stress{
	width: 180px;
	top: 605px;
	left: 48%;
}
.mark{
	width: 29px;
	margin-top: 0px;
	margin-right: 3px;
}
.mark-title{
	width: 135px;
	font-size: 20px;
}

.temp{
	width: 182px;
	height: auto;
	top: 105px;
    left: 25%;
}
.cycling{
	width: 188px;
	height: auto;
	top: 190px;
	left: 10%;
}

.msl{
	width: 190px;
	height: auto;
	top: 278px;
	left: 4%;
}

.gas{
	width:190px;
	height: auto;
	top: 365px;
	left: 10%;
}

.salt{
	width: 185px;
	height: auto;
	top: 455px;
	left: 25%;
}

.free{
	width: 187px;
	height: auto;
	top: 683px;
	left: 48%;
}
.vib{
	width: 187px;
	height: auto;
	top: 773px;
	left: 48%;
}
}
@media only screen and (max-width:360px){
.content-swipe{
	left: 290px;
}
.content-box-inner{
    width: 360px;
	margin: 70px auto 0 auto;
	height: 700px;		 
}
.content-bk{
    width: 100%;
	height: 700px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 884px;		 
} 
.stress{
	width: 170px;
	top: 580px;
	left: 48%;
}
.static-center-round-2{
	width: 250px;
	top: 150px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 250px;
}
.static-center-round-3{
	width:250px;
	top: 600px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 250px;
}
.free{
	width: 187px;
	height: auto;
	top: 693px;
	left: 48%;
}
.vib{
	width: 187px;
	height: auto;
	top: 773px;
	left: 48%;
}	
}
@media only screen and (max-width:320px) and (max-height:568px){
.content-swipe{
	left: 260px;
}
.content-box-inner{
    width: 320px;
	margin: 70px auto 0 auto;
	height: 600px;		 
}
.content-bk{
    width: 100%;
	height: 600px;
	position: fixed;
}
.content-box{
    width: 100%;
	height: 784px;		 
} 

.static-center-round-2{
	width: 220px;
	top: 140px;
	right: 0;
	display: block;	
}
.static-center-round-2 img{
	max-width: 220px;
}
.static-center-round-3{
	width:220px;
	top: 550px;
	left: 0;
	display: block;	
}
.static-center-round-3 img{
    max-width: 220px;
}
.static-box{
	width: 200px;
	top: 5px;
	left: 8%;
	font-size: 30px;		
}
.stress{
	width: 280px;
	top: 490px;
	left: 10%;
}
.envir{
	width: 280px;
	top: 55px;
	left: 8%;	
}
.mark{
	width: 29px;
	margin-top: 2px;
	margin-right: 3px;
}
.mark-title{
	width: 245px;
	font-size: 20px;
}

.temp{
	width: 162px;
	height: auto;
	top: 105px;
    left: 27%;
}
.cycling{
	width: 168px;
	height: auto;
	top: 173px;
	left: 10%;
}

.msl{
	width: 170px;
	height: auto;
	top: 246px;
	left: 4%;
}

.gas{
	width:170px;
	height: auto;
	top: 322px;
	left: 10%;
}

.salt{
	width: 165px;
	height: auto;
	top: 395px;
	left: 27%;
}

.free{
	width: 157px;
	height: auto;
	top: 633px;
	left: 50%;
}
.vib{
	width: 157px;
	height: auto;
	top: 703px;
	left: 50%;
}
}
@media only screen and (max-width:320px) and (max-height:480px){	
}