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


/*ra page content*/
body{
	background: #124074;
	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/second-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-box{
    width: 100%;
	height: 990px;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 5;			 
}
.content-box-inner{
    width: 1045px;	
	margin: 0 auto;
	display: block;		 
}
.container-box{
    width: 100%;
	left: 0;
	top: 0;
	position: relative;
	z-index: 6;		 
}
.cell-a{
	width: 297px;
	left: 50%;
	top: 140px;
	position: absolute;
	z-index: 7;
	animation:cell-a 1.1s ease;			
}
.cell-a img{
	max-width: 297px;
	height: auto;
	width: 100%;		
}
@keyframes cell-a{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	50%{
		opacity:1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.cell-b{
	width: 297px;
	left: 50%;
	top: 430px;
	position: absolute;
	z-index: 7;		
	animation:cell-b 1s ease;	
}
.cell-b img{
	max-width: 297px;
	height: auto;
	width: 100%;	
}
.cell-h{
	width: 297px;
	left: 25.6%;
	top: 288px;
	position: absolute;
	z-index: 7;		
	animation:cell-b 1s ease;	
}
.cell-h img{
	max-width: 297px;
	height: auto;
	width: 100%;	
}
@keyframes cell-b{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	50%{
		opacity:1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.cell-c{
	width: 297px;
	left: 74%;
	top: 290px;
	position: absolute;
	z-index: 7;		
	animation:cell-c 1.2s ease;			
}
.cell-c img{
	max-width: 297px;
	height: auto;
	width: 100%;			
}
@keyframes cell-c{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	50%{
		opacity:1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.cell-d{
	width: 297px;
	left: 26.5%;
	top: 580px;
	position: absolute;
	z-index: 7;		
	animation:cell-d 1.3s ease;			
}
.cell-d img{
	max-width: 297px;
	height: auto;
	width: 100%;		
}
@keyframes cell-d{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	50%{
		opacity:1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.cell-e{
	width: 297px;
	left: 2%;
	top: 440px;
	position: absolute;
	z-index: 7;		
	animation:cell-e 1.4s ease;			
}
.cell-e img{
	max-width: 297px;
	height: auto;
	width: 100%;			
}
@keyframes cell-e{
	0%{
		opacity:0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
	}
	50%{
		opacity:1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
	}
	100%{
		opacity:1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
.cell-f{
	width: 297px;
	left: 61%;
	top: 220px;
	position: absolute;
	z-index: 6;
	animation:cell-f 2s ease;		
}
.cell-f img{
	max-width: 297px;
	height: auto;
	width: 100%;	
}
@keyframes cell-f{
	0%{
		opacity:0;
		-webkit-transform: translate(0,-150px);
		-moz-transform: translate(0,-150px);
		-o-transform: translate(0,-150px);
		transform: translate(0,-150px);	
	}
	30%{
		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);
	}
}
.cell-g{
	width: 297px;
	left: 14.5%;
	top: 510px;
	position: absolute;
	z-index: 6;
	animation:cell-g 2s ease;		
}
.cell-g img{
	max-width: 297px;
	height: auto;
	width: 100%;
		
}
@keyframes cell-g{
	0%{
		opacity:0;
		-webkit-transform: translate(0,150px);
		-moz-transform: translate(0,150px);
		-o-transform: translate(0,150px);
		transform: translate(0,150px);	
	}
	30%{
		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);
	}
}
.cell-title{
	width: 340px;
    left: 16%;
	top: 185px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 42px;
	color: #fff;
	line-height: 50px;
	animation:cell-title 1.6s ease;		
}
@keyframes cell-title{
	0%{
		opacity:0;
		-webkit-transform: translate(-100px,0);
		-moz-transform: translate(-100px,0);
		-o-transform: translate(-100px,0);
		transform: translate(-100px,0);	
	}
	30%{
		opacity:0;
		-webkit-transform: translate(-100px,0);
		-moz-transform: translate(-100px,0);
		-o-transform: translate(-100px,0);
		transform: translate(-100px,0);
	}	
	100%{
		opacity:1;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
	}
}
.cell-title-icon{
	width: 121px;
    left: 3%;
	top: 150px;
	position: absolute;
	z-index: 8;
	animation:cell-title 1.8s ease;			 
}
.cell-title-icon img{
	max-width: 121px;
	height: auto;
	width: 100%;		 
}
.word1{
	width: 165px;
    left: 60%;
	top: 90px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 50px;
	animation:word1 1.8s ease;			
}
@keyframes word1{
	0%{
		opacity:0;
	}	
	100%{
		opacity:1;
	}
}
.word2{
	width: 235px;
    left: 84%;
	top: 550px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 50px;
	animation:word1 1.8s ease;		
}
.word3{
	width: 150px;
    left: 62%;
	top: 695px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 30px;
	animation:word1 1.8s ease;		
}
.word4{
	width: 150px;
    left: 37%;
	top: 840px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 50px;
	animation:word1 1.8s ease;		
}
.word5{
	width: 210px;
    left: 4%;
	top: 705px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 50px;
	animation:word1 1.8s ease;		
}
.word6{
	width: 150px;
    left: 15%;
	top: 355px;
	position: absolute;
	z-index: 8;
	font-family: "微軟正黑體";
	font-weight: 400;
	font-size: 24px;
	color: #a1d5ff;
	line-height: 50px;
	animation:word1 1.8s ease;		
}






@media only screen and (max-width: 1680px){

}
@media only screen and (max-width: 1440px){
.content-bk{
    width: 100%;
	height: 900px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 900px;		 
}
.content-box-inner{
    width: 1045px;	
	margin: -80px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 320px;
    left: 19%;
	top: 205px;
	font-size: 36px;
	line-height: 47px;
}
.cell-title-icon{
	width: 115px;
    left: 5%;
	top: 170px;		 
}
.cell-a{
	width: 267px;
	left: 48%;
	top: 160px;		
}
.cell-b{
	width: 267px;
	left: 48%;
	top: 420px;	
}
.cell-c{
	width: 267px;
	left: 70%;
	top: 295px;		
}
.cell-d{
	width: 267px;
	left: 26.5%;
	top: 550px;		
}
.cell-e{
	width: 267px;
	left: 4.5%;
	top: 420px;		
}
.cell-f{
	width: 267px;
	left: 59%;
	top: 240px;	
}
.cell-g{
	width: 267px;
	left: 33%;
	top: 410px;	
}
.cell-h{
	width: 267px;
	left: 25.6%;
	top: 288px;	
}
.word1{
	width: 170px;
    left: 57%;
	top: 115px;
	font-size: 22px;
}
.word2{
	width: 210px;
    left: 79%;
	top: 525px;
	font-size: 22px;
}
.word3{
	width: 150px;
    left: 59%;
	top: 655px;
	font-size: 22px;
}
.word4{
	width: 150px;
    left: 36%;
	top: 780px;
	font-size: 22px;
}
.word5{
	width: 180px;
    left: 8%;
	top: 655px;
	font-size: 22px;		
}
.word6{
	width: 150px;
    left: 15%;
	top: 355px;
	font-size: 22px;	
}
}
@media only screen and (max-width:1366px) and (max-height:1024px){
.content-bk{
    width: 100%;
	height: 1024px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1024px;		 
}
.content-box-inner{
    width: 1045px;	
	margin: 50px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 320px;
    left: 17%;
	top: 205px;
	font-size: 36px;
	line-height: 47px;
}
.cell-title-icon{
	width: 110px;
    left: 5%;
	top: 170px;		 
}
.cell-a{
	width: 267px;
	left: 48%;
	top: 160px;		
}
.cell-b{
	width: 267px;
	left: 48%;
	top: 420px;	
}
.cell-c{
	width: 267px;
	left: 70%;
	top: 295px;		
}
.cell-d{
	width: 267px;
	left: 26.5%;
	top: 550px;		
}
.cell-e{
	width: 267px;
	left: 4.5%;
	top: 420px;		
}
.cell-f{
	width: 267px;
	left: 59%;
	top: 240px;	
}
.cell-g{
	width: 267px;
	left: 33%;
	top: 410px;	
}

.word1{
	width: 150px;
    left: 57%;
	top: 110px;
	font-size: 22px;
}
.word2{
	width: 210px;
    left: 79%;
	top: 525px;
	font-size: 22px;
}
.word3{
	width: 120px;
    left: 59%;
	top: 660px;
	font-size: 22px;
}
.word4{
	width: 100px;
    left: 36%;
	top: 785px;
	font-size: 22px;
}
.word5{
	width: 200px;
    left: 5%;
	top: 655px;
	font-size: 22px;		
}
.word6{
	width: 150px;
    left: 15%;
	top: 355px;
	font-size: 22px;	
}	
}
@media only screen and (max-width:1366px) and (max-height:768px){
.content-bk{
    width: 100%;
	height: 800px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 800px;		 
}
.content-box-inner{
    width: 1045px;	
	margin: -120px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 280px;
    left: 23%;
	top: 200px;
	font-size: 33px;
	line-height: 45px;
}
.cell-title-icon{
	width: 101px;
    left: 11%;
	top: 170px;		 
}
.cell-a{
	width: 237px;
	left: 48%;
	top: 180px;		
}
.cell-b{
	width: 237px;
	left: 48%;
	top: 400px;	
}
.cell-c{
	width: 237px;
	left: 67%;
	top: 290px;		
}
.cell-d{
	width: 237px;
	left: 30%;
	top: 520px;		
}
.cell-e{
	width: 237px;
	left: 11%;
	top: 410px;		
}
.cell-f{
	width: 237px;
	left: 59%;
	top: 240px;	
}
.cell-g{
	width: 237px;
	left: 35%;
	top: 410px;	
}
.cell-h{
	width: 237px;
	left: 29%;
	top: 288px;	
}
.word1{
	width: 170px;
    left: 56%;
	top: 135px;
	font-size: 20px;
}
.word2{
	width: 210px;
    left: 75%;
	top: 495px;
	font-size: 20px;
}
.word3{
	width: 150px;
    left: 57%;
	top: 615px;
	font-size: 20px;
}
.word4{
	width: 100px;
    left: 25%;
	top: 680px;
	font-size: 20px;
}
.word5{
	width: 180px;
    left: 9%;
	top: 620px;
	font-size: 20px;		
}
.word6{
	width: 150px;
    left: 19%;
	top: 325px;
	font-size: 20px;
}
	
}
@media only screen and (max-width: 1280px){
.content-bk{
    width: 100%;
	height: 800px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 800px;		 
}
.content-box-inner{
    width: 1045px;	
	margin: -100px auto 0 auto;
	display: block;		 
}
	
}
@media only screen and (max-width:1024px) and (max-height:1366px){
.content-bk{
    width: 100%;
	height: 1366px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1366px;		 
}
.content-box-inner{
    width: 1045px;	
	margin: 180px auto 0 auto;
	display: block;		 
}
.word2{
	width: 205px;
    left: 74%;
	top: 520px;
	font-size: 22px;
}
}
@media only screen and (max-width:1024px) and (max-height:768px){
.content-bk{
    width: 100%;
	height: 768px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 768px;		 
}
.content-box-inner{
    width: 1024px;	
	margin: -100px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 260px;
    left: 22%;
	top: 215px;
	font-size: 30px;
	line-height: 45px;
}
.cell-title-icon{
	width: 90px;
    left: 11%;
	top: 190px;		 
}
.word2{
	width: 205px;
    left: 74%;
	top: 490px;
	font-size: 20px;
}
}
@media only screen and (max-width: 900px){
.content-bk{
    width: 100%;
	height: 1600px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1600px;		 
}
.content-box-inner{
    width: 900px;	
	margin: 270px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 270px;
    left: 23%;
	top: 200px;
	font-size: 32px;
	line-height: 40px;
}
.cell-title-icon{
	width: 101px;
    left: 10%;
	top: 170px;		 
}
.cell-a{
	width: 227px;
	left: 50%;
	top: 180px;		
}
.cell-b{
	width: 227px;
	left: 51%;
	top: 410px;	
}
.cell-c{
	width: 227px;
	left: 72%;
	top: 290px;		
}
.cell-d{
	width: 227px;
	left: 29%;
	top: 520px;		
}
.cell-e{
	width: 227px;
	left: 6.5%;
	top: 410px;		
}
.cell-f{
	width: 227px;
	left: 59%;
	top: 240px;	
}
.cell-g{
	width: 227px;
	left: 35%;
	top: 410px;	
}
.cell-h{
	width: 227px;
	left: 28%;
	top: 294px;	
}
.word1{
	width: 170px;
    left: 58%;
	top: 135px;
	font-size: 22px;
}
.word2{
	width: 150px;
    left: 80%;
	top: 495px;
	font-size: 22px;
	line-height: 35px;
}
.word3{
	width: 130px;
    left: 60%;
	top: 615px;
	font-size: 22px;
}
.word4{
	width: 100px;
    left: 38%;
	top: 720px;
	font-size: 22px;
}
.word5{
	width: 150px;
    left: 12%;
	top: 615px;
	font-size: 22px;
	line-height: 35px;		
}
.word6{
	width: 150px;
    left: 17%;
	top: 315px;
	font-size: 22px;
}	
}
@media only screen and (max-width: 800px){
.content-bk{
    width: 100%;
	height: 1280px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1280px;		 
}
.content-box-inner{
    width: 800px;	
	margin: 170px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 260px;
    left: 18%;
	top: 220px;
	font-size: 30px;
	line-height: 37px;
}
.cell-title-icon{
	width: 90px;
    left: 5%;
	top: 190px;		 
}
.cell-a{
	width: 227px;
	left: 47%;
	top: 190px;		
}
.cell-b{
	width: 227px;
	left: 47.4%;
	top: 400px;	
}
.cell-c{
	width: 227px;
	left: 70%;
	top: 290px;		
}
.cell-d{
	width: 227px;
	left: 25%;
	top: 510px;		
}
.cell-e{
	width: 227px;
	left: 1.8%;
	top: 410px;		
}
.cell-f{
	width: 227px;
	left: 59%;
	top: 240px;	
}
.cell-g{
	width: 227px;
	left: 35%;
	top: 410px;	
}
.cell-h{
	width: 227px;
	left: 24%;
	top: 298px;	
}
.word1{
	width: 150px;
    left: 55%;
	top: 145px;
	font-size: 22px;
}
.word2{
	width: 120px;
    left: 79%;
	top: 490px;
	font-size: 22px;
}
.word3{
	width: 120px;
    left: 59%;
	top: 605px;
	font-size: 22px;
}
.word4{
	width: 100px;
    left: 36%;
	top: 705px;
	font-size: 22px;
}
.word5{
	width: 100px;
    left: 10%;
	top: 615px;
	font-size: 22px;		
}
.word6{
	width: 120px;
    left: 12%;
	top: 335px;
	font-size: 22px;
}
}
@media only screen and (max-width: 768px){
.content-bk{
    width: 100%;
	height: 1024px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1024px;		 
}
.content-box-inner{
    width: 768px;	
	margin: 20px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 255px;
    left: 16%;
	top: 240px;
	font-size: 30px;
	line-height: 37px;
}
.cell-title-icon{
	width: 101px;
    left: 25%;
	top: 120px;		 
}
.cell-a{
	width: 247px;
	left: 46%;
	top: 25px;		
}

.cell-b{
	width: 247px;
	left: 46%;
	top: 270px;	
}
.cell-c{
	width: 247px;
	left: 46%;
	top: 515px;		
}
.cell-d{
	width: 247px;
	left: 18%;
	top: 640px;		
}
.cell-e{
	width: 247px;
	left: 18%;
	top: 395px;		
}
.cell-f{
	width: 247px;
	left: 32%;
	top: 340px;	
}
.cell-g{
	width: 247px;
	left: 34%;
	top: 680px;	
}
.cell-h{
	width: 247px;
	left: 46%;
	top: 755px;	
}
.word1{
	width: 150px;
    left: 75%;
	top: 190px;
	font-size: 20px;
}
.word2{
	width: 120px;
    left: 75%;
	top: 675px;
	font-size: 20px;
	line-height: 30px;
}
.word3{
	width: 120px;
    left: 75%;
	top: 435px;
	font-size: 20px;
}
.word4{
	width: 100px;
    left: 10%;
	top: 790px;
	font-size: 20px;
}
.word5{
	width: 100px;
    left: 8%;
	top: 555px;
	font-size: 20px;
	line-height: 30px;		
}
.word6{
	width: 100px;
    left: 36%;
	top: 905px;
	font-size: 20px;
}
}
@media only screen and (max-width: 600px){
.content-bk{
    width: 100%;
	height: 1024px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 1024px;		 
}
.content-box-inner{
    width: 600px;	
	margin: -50px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 240px;
    left: 10%;
	top: 270px;
	font-size: 28px;
	line-height: 37px;
}
.cell-title-icon{
	width: 101px;
    left: 20%;
	top: 155px;		 
}
.cell-a{
	width: 227px;
	left: 46%;
	top: 90px;		
}

.cell-b{
	width: 227px;
	left: 46%;
	top: 305px;	
}
.cell-c{
	width: 227px;
	left: 46%;
	top: 520px;		
}
.cell-d{
	width: 227px;
	left: 14%;
	top: 630px;		
}
.cell-e{
	width: 227px;
	left: 14%;
	top: 415px;		
}
.cell-f{
	width: 227px;
	left: 57%;
	top: 365px;	
}
.cell-g{
	width: 227px;
	left: 34%;
	top: 620px;	
}
.cell-h{
	width: 227px;
	left: 45.5%;
	top: 735px;	
}
.word1{
	width: 85px;
    left: 80%;
	top: 250px;
	font-size: 20px;
	line-height: 30px;
}
.word2{
	width: 100px;
    left: 80%;
	top: 675px;
	font-size: 20px;
}
.word3{
	width: 110px;
    left: 78%;
	top: 480px;
	font-size: 20px;
}
.word4{
	width: 80px;
    left: 6%;
	top: 780px;
	font-size: 20px;
}
.word5{
	width: 100px;
    left: 4%;
	top: 585px;
	font-size: 20px;		
}
.word6{
	width: 110px;
    left: 33%;
	top: 885px;
	font-size: 20px;
}
}
@media only screen and (max-width: 480px){
.content-bk{
    width: 100%;
	height: 850px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 850px;		 
}
.content-box-inner{
    width: 480px;	
	margin: -30px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 210px;
    left: 10%;
	top: 230px;
	font-size: 24px;
	line-height: 30px;
}
.cell-title-icon{
	width: 81px;
    left: 21%;
	top: 140px;		 
}
.cell-a{
	width: 187px;
	left: 46%;
	top: 60px;		
}

.cell-b{
	width: 187px;
	left: 46%;
	top: 240px;	
}
.cell-c{
	width: 187px;
	left: 46%;
	top: 423px;		
}
.cell-d{
	width: 187px;
	left: 13%;
	top: 510px;		
}
.cell-e{
	width: 187px;
	left: 13%;
	top: 330px;		
}
.cell-f{
	width: 187px;
	left: 56%;
	top: 333px;	
}
.cell-g{
	width: 187px;
	left: 30%;
	top: 530px;	
}
.cell-h{
	width: 187px;
	left: 45.5%;
	top: 603px;	
}
.word1{
	width: 75px;
    left: 82%;
	top: 180px;
	font-size: 18px;
}
.word2{
	width: 90px;
    left: 79%;
	top: 560px;
	font-size: 18px;
}
.word3{
	width: 90px;
    left: 77%;
	top: 395px;
	font-size: 18px;
	line-height: 25px;
}
.word4{
	width: 70px;
    left: 5%;
	top: 650px;
	font-size: 18px;
}
.word5{
	width: 90px;
    left: 2%;
	top: 480px;
	font-size: 18px;		
}
.word6{
	width:100px;
    left: 32%;
	top: 730px;
	font-size: 18px;
}	
}
@media only screen and (max-width: 414px){
.content-swipe{
	left: 300px;
}
.content-bk{
    width: 100%;
	height: 750px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 750px;		 
}
.content-box-inner{
    width: 414px;	
	margin: -10px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 180px;
    left: 9%;
	top: 180px;
	font-size: 20px;
	line-height: 27px;
}
.cell-title-icon{
	width: 80px;
    left: 18%;
	top: 90px;		 
}
.cell-a{
	width: 167px;
	left: 46%;
	top: 60px;		
}
.cell-b{
	width: 167px;
	left: 46%;
	top: 220px;	
}
.cell-c{
	width: 167px;
	left: 46%;
	top: 384px;		
}
.cell-d{
	width: 167px;
	left: 11%;
	top: 465px;		
}
.cell-e{
	width: 167px;
	left: 11%;
	top: 300px;		
}
.cell-f{
	width: 167px;
	left: 58%;
	top: 345px;	
}
.cell-g{
	width: 167px;
	left: 29%;
	top: 490px;	
}
.cell-h{
	width: 167px;
	left: 45.5%;
	top: 543px;	
}
.word1{
	width: 65px;
    left: 80%;
	top: 185px;
	font-size: 16px;
	line-height: 25px;
}
.word2{
	width: 80px;
    left: 78%;
	top: 515px;
	font-size: 16px;
	line-height: 25px;
}
.word3{
	width: 90px;
    left: 77.5%;
	top: 365px;
	font-size: 16px;
	line-height: 25px;
}
.word4{
	width: 70px;
    left: 6%;
	top: 600px;
	font-size: 16px;
}
.word5{
	width: 70px;
    left: 8%;
	top: 250px;
	font-size: 16px;
	line-height: 25px;		
}
.word6{
	width: 90px;
    left: 30%;
	top: 645px;
	font-size: 16px;
}	
}
@media only screen and (max-width: 375px){
.content-bk{
    width: 100%;
	height: 700px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 700px;		 
}
.content-box-inner{
    width: 375px;	
	margin: -40px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 160px;
    left: 8%;
	top: 180px;
	font-size: 19px;
	line-height: 25px;
}
.cell-title-icon{
	width: 80px;
    left: 17%;
	top: 90px;		 
}
.cell-a{
	width: 157px;
	left: 45%;
	top: 60px;		
}
.cell-b{
	width: 157px;
	left: 45%;
	top: 215px;	
}
.cell-c{
	width: 157px;
	left: 45%;
	top: 372px;		
}
.cell-d{
	width: 157px;
	left: 8%;
	top: 445px;		
}
.cell-e{
	width: 157px;
	left: 8%;
	top: 295px;		
}
.cell-f{
	width: 157px;
	left: 55%;
	top: 260px;	
}
.cell-g{
	width: 157px;
	left: 37%;
	top: 460px;	
}
.cell-h{
	width: 157px;
	left: 44%;
	top: 526px;	
}
.word1{
	width: 60px;
    left: 82%;
	top: 180px;
	font-size: 15px;
	line-height: 20px;
}
.word2{
	width: 80px;
    left: 78%;
	top: 500px;
	font-size: 15px;
	line-height: 20px;
}
.word3{
	width: 90px;
    left: 76%;
	top: 350px;
	font-size: 15px;
}
.word4{
	width: 60px;
    left: 4%;
	top: 575px;
	font-size: 15px;
}
.word5{
	width: 70px;
    left: 6%;
	top: 245px;
	font-size: 15px;		
}
.word6{
	width: 90px;
    left: 27%;
	top: 625px;
	font-size: 15px;
}	
}
@media only screen and (max-width: 360px){
.content-swipe{
	left: 290px;
}	
.content-bk{
    width: 100%;
	height: 700px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 700px;		 
}
.content-box-inner{
    width: 360px;	
	margin: -30px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 160px;
    left: 8%;
	top: 170px;
	font-size: 19px;
	line-height: 25px;
}
.cell-title-icon{
	width: 75px;
    left: 18%;
	top: 80px;		 
}
.cell-a{
	width: 147px;
	left: 46%;
	top: 60px;		
}
.cell-b{
	width: 147px;
	left: 46%;
	top: 205px;	
}
.cell-c{
	width: 147px;
	left: 46%;
	top: 352px;		
}
.cell-d{
	width: 147px;
	left: 9%;
	top: 425px;		
}
.cell-e{
	width: 147px;
	left: 9%;
	top: 280px;		
}
.cell-f{
	width: 147px;
	left: 56%;
	top: 315px;	
}
.cell-g{
	width: 147px;
	left: 29%;
	top: 450px;
	display: block;	
}
.cell-h{
	width: 157px;
	left: 44%;
	top: 496px;	
}
.word1{
	width: 60px;
    left: 81%;
	top: 170px;
	font-size: 15px;
	line-height: 22px;
}
.word2{
	width: 75px;
    left: 78%;
	top: 465px;
	font-size: 15px;
}
.word3{
	width: 80px;
    left: 77%;
	top: 330px;
	font-size: 15px;
}
.word4{
	width: 70px;
    left: 4%;
	top: 540px;
	font-size: 15px;
}
.word5{
	width: 70px;
    left: 7%;
	top: 230px;
	font-size: 15px;		
}
.word6{
	width: 80px;
    left: 30%;
	top: 595px;
	font-size: 15px;
}	
}
@media only screen and (max-width: 320px) and (max-height:568px){
.content-swipe{
	left: 260px;
}
.content-bk{
    width: 100%;
	height: 600px;
	top: 0;
	left: 0;
}
.content-box{
    width: 100%;
	height: 600px;		 
}
.content-box-inner{
    width: 320px;	
	margin: -40px auto 0 auto;
	display: block;		 
}
.cell-title{
	width: 150px;
    left: 7%;
	top: 180px;
	font-size: 17px;
	line-height: 22px;
}
.cell-title-icon{
	width: 70px;
    left: 15%;
	top: 100px;		 
}
.cell-a{
	width: 137px;
	left: 46%;
	top: 70px;		
}

.cell-b{
	width: 137px;
	left: 46%;
	top: 205px;	
}
.cell-c{
	width: 137px;
	left: 46%;
	top: 342px;		
}
.cell-d{
	width: 137px;
	left: 9%;
	top: 405px;		
}
.cell-e{
	width: 137px;
	left: 9%;
	top: 270px;		
}
.cell-f{
	width: 137px;
	left: 56%;
	top: 310px;	
}
.cell-g{
	width: 137px;
	left: 26%;
	top: 440px;	
}
.cell-h{
	width: 137px;
	left: 45%;
	top: 476px;	
}
.word1{
	width: 55px;
    left: 82%;
	top: 170px;
	font-size: 14px;
	line-height: 20px;
}
.word2{
	width: 70px;
    left: 75%;
	top: 457px;
	font-size: 14px;
	line-height: 20px;
}
.word3{
	width: 75px;
    left: 76%;
	top: 322px;
	font-size: 14px;
}
.word4{
	width: 60px;
    left: 4%;
	top: 515px;
	font-size: 14px;
}
.word5{
	width: 60px;
    left: 6%;
	top: 230px;
	font-size: 14px;
	line-height: 20px;		
}
.word6{
	width: 70px;
    left: 30%;
	top: 560px;
	font-size: 14px;
}
}
@media only screen and (max-width: 320px) and (max-height:480px){
body{
	overflow-y: auto;		
}
.content-swipe{
	left: 260px;
}	
}