body{
	background: url(../images/top/repbg.jpg);
	height: auto;
	min-width: 1100px;
}
header{
	z-index: 100;
	min-width: 1100px;
}
#wrapper{
	background: url(../images/top/wr_bg.png) repeat-x left 105px;
}
a.toDetail{
	position: absolute;
	width: 136px;height: 35px;
	overflow: hidden;
	background: url(../images/top/detailBtn.png) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
}
a.toDetail:hover{
	background-position: 0 -35px;
}
#entryBtn{
	cursor: pointer;
	width: 180px;height: 34px;
	background: url(../images/top/entry_bg.png) no-repeat left bottom;
	overflow: hidden;
	transition:height .2s ease-in-out;
	-webkit-transition:height .2s ease-in-out;
	-ms-transition:height .2s ease-in-out;
	-moz-transition:height .2s ease-in-out;
}
#entryBtn .txt{
	width: 113px;height: 13px;
	background: url(../images/top/entry_txt.png) no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	left:53px;top:10px;

}
#entryBtn:hover{
	height: 93px;
}
#entryBtn:hover .txt{
	background-position: 0 -13px;
}
#entryBtn .btns{
	position: absolute;
	left:10px;top:37px;
}
#entryBtn .btns li{
	margin-bottom: 6px;
}

#titleArea{
	margin: 0 auto;
	height: 594px;width: 1100px;
}

#background{
	position: fixed;
	left:50%;margin-left: -550px;
	width: 1100px;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}
#background .fixBg{
	position: absolute;
	min-height: 100%;
	min-width: 100%;
}
#background .dish{
	position: absolute;
	left:50%;top:50%;
	margin-left: -358px;
	margin-top: -390px;
}
#container{
	position: relative;
	width: 1100px;
	/*min-height: 100%;*/
	margin:  0 auto;
}
.contents{
	position: relative;
	width: 1100px;
	overflow: hidden;
}
#footer .toTopCon{
	position: absolute;
	width: 1100px;height: 57px;
	bottom: 60px;
	left:50%;margin-left: -550px;
}
.toTopCon .toTop{
	display: block;
	position: absolute;
	overflow: hidden;
	height: 57px;width: 115px;
	right: 70px;top:0;
}
.toTopCon .toTop img{
	position: absolute;
	top:0;
}
.toTopCon .toTop:hover img{
	top:-57px;
}
.contents .clouds,
.clouds img,
.contents .swap,
.contents .swap p,
canvas.circle,
.contents h3,
.contents .caption{
	position: absolute;
}
canvas.circle{width: 820px;height: 820px;display: none;}

.contents.cvsOn .swap{display: none;}
.contents.cvsOn canvas{display: block;}
@keyframes move{
	0%{transform:translateX(-200px);}
	100%{transform:translateX(200px);}
}
@-webkit-keyframes move{
	0%{-webkit-transform:translateX(-200px);}
	100%{-webkit-transform:translateX(200px);}
}
@-moz-keyframes move{
	0%{-moz-transform:translateX(-200px);}
	100%{-moz-transform:translateX(200px);}
}
@-ms-keyframes move{
	0%{-ms-transform:translateX(-200px);}
	100%{-ms-transform:translateX(200px);}
}

.clouds .cloud1{
	animation:move 12s linear infinite alternate;
	-webkit-animation:move 12s linear infinite alternate;
	-moz-animation:move 12s linear infinite alternate;
	-ms-animation:move 12s linear infinite alternate;
}
.clouds .cloud2{
	animation:move 18s linear infinite .5s alternate;
	-webkit-animation:move 18s linear infinite .5s alternate;
	-moz-animation:move 18s linear infinite .5s alternate;
	-ms-animation:move 18s linear infinite .5s alternate;
}
.clouds .cloud3{
	animation:move 15s linear infinite 1s alternate;
	-webkit-animation:move 15s linear infinite 1s alternate;
	-moz-animation:move 15s linear infinite 1s alternate;
	-ms-animation:move 15s linear infinite 1s alternate;
}
.contents.s1{
	height: 857px;
	background: url(../images/top/s1bg.png) no-repeat left top;
}
.s1 h3{left:66px;top:224px;}
.s1 .caption{left:67px;top:349px;}
.s1 .circle,
.s1 .swap{left:492px;top:38px;}
.s1 .visual{left:46px;top:41px;}
.s1 .circleImg{left:0;top:0;}
.s1 .toDetail{left:70px;top:521px;}
.s1 .clouds{left:-122px;top:137px;}
.s1 .cloud1{left:559px;top:0px;}
.s1 .cloud2{left:0px;top:382px;}
.s1 .cloud3{left:550px;top:488px;}

.contents.s2{
	height: 827px;
	background: url(../images/top/s2bg.png) no-repeat left 26px;
	margin-top: -5px;
	margin-bottom: 60px;
}

.s2 h3{left:651px;top:281px;}
.s2 .caption{left:651px;top:405px;}
.s2 .toDetail{left:652px;top:539px;}
.s2 .circle,
.s2 .swap{left:-243px;top:-2px;}
.s2 .clouds{left:469px;top:76px;}
.s2 .visual{left:244px;top:39px;}
.s2 .cloud1{left:497px;top:512px;}
.s2 .cloud2{left:0px;top:403px;}
.s2 .cloud3{left:456px;top:0px;}

.contents.s3{
	height: 500px;
	background: url(../images/top/s3img.jpg) no-repeat left top;
	margin: 0 auto;
	margin-bottom: 25px;
}
.s3 h3{left:113px;top:48px;}
.s3 .caption{left:111px;top:164px;}
.s3 .toDetail{left:115px;top:259px;}
.contents.s4{
	height: 879px;
	background: url(../images/top/s1bg.png) no-repeat left bottom;
	margin-bottom: 54px;
}




.s4 h3{left:63px;top:357px;}
.s4 .caption{left:65px;top:482px;}
.s4 .toDetail{left:69px;top:573px;}
.s4 .circle,
.s4 .swap{left:483px;top:-3px;}
.s4 .visual{left:31px;top:39px;}
.s4 .clouds{left:-39px;top:164px;}
.s4 .cloud1{left:478px;top:555px;}
.s4 .cloud2{left:529px;top:53px;}
.s4 .cloud3{left:0px;top:0px;}