body{background: url(../img/sky.png)repeat-x 0 0 #9de0e7; width: 100%; display: block; padding: 100px 0; margin: 0;}
div, p,h1,h2h3,h4,h5,h6,ul,li,a{padding: 0; margin: 0;}
.stage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 100;}
.far-clouds {background: url(../img/far-clouds.png) 305px 65% repeat-x;}
.near-clouds { background: url(../img/near-clouds.png) 305px 80% repeat-x;}
.mainContent{position: absolute; width:100%; top: 50%; left: 0; z-index: 101; transform: translateY(-50%); text-align: center; padding: 0;}
.main-area-wrap{position: relative; width: 705px; min-height:660px; display: block; margin: 100px auto 0;}
.main-circle{background: url('../img/icon-frame-circle.png') no-repeat center center; width: 235px; height: 235px; display: block; padding: 74px; margin: 0 auto; top: 76px; position: relative; background-size: 100% 100%;}
.main-circle a{display: block; position: relative; width: 100%;}
.main-circle a img{width: 100%; height: auto; position: absolute; display: block; transition: opacity 0.4s ease-in-out 0s; -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s;}
.main-circle a img.h-img{opacity: 0;}
.main-circle a:hover img.h-img{opacity: 1;}
.main-circle a:hover img.s-img{opacity: 0;}

.icon-frame{background: url('../img/icon-frame-bg.png') no-repeat center center; width: 196px; height: 196px; padding: 5px; display: block; position: absolute; background-size: 100% 100%;}
.icon-frame a{width: 100%; display: block; position: relative;}
.icon-frame a img{width: 100%; height: auto; position: absolute; display: block; transition: opacity 0.6s ease-in-out 0s; -moz-transition: opacity 0.6s ease-in-out 0s; -webkit-transition: opacity 0.6s ease-in-out 0s;}
.icon-frame a img.h-img{opacity: 0; visibility: hidden;}
.icon-frame a:hover img.h-img{opacity: 1; visibility: visible;}
.icon-frame a:hover img.s-img{opacity: 0; visibility: hidden;}
#ic-fr-1.icon-frame{left: 0; top: 0;}
#ic-fr-2.icon-frame{right: 0; top:0;}
#ic-fr-3.icon-frame{left: 50%; margin-left: -103px; bottom: 0;}

.copyrighttext{padding: 20px 0; display: cnnter; text-align: center; color: #048adf; font-size: 13px; line-height: 18px; font-weight: normal;  font-family: 'Arial'; width: 100%;}

@media only screen and (max-width: 767px){
	.main-area-wrap{width: 300px; min-height:305px;}
	.main-circle{width: 120px; height: 120px; padding: 35px; top: 25px;}
	.icon-frame{width: 80px; height: 80px;}
	#ic-fr-3.icon-frame{margin-left: -45px;}
}