html, body {
    margin: 0;
    padding: 0;
    background: #B9B6D1;
}

/* wheelmenu Stylesheets */
.wheel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 605px; /* this will determine the diameter of the circle  */
  height: 605px; /* this will determine the diameter of the circle  */
  visibility: hidden;
  position: relative;
  display: none;
  z-index: 1;
}

.wheel li {
  overflow: hidden;
  float:left;
}

.wheel li a {
  display: block;
}

.pointer {
  color: #34495e;
  font-family: 'Pacifico', cursive;
  font-size: 22px;
  margin-top: -15px;
}

.wheel-button {
  z-index: 1;
  position: relative;
}

.wheel-button, .wheel-button:visited {
  background:url(../images/p1/circle.png) no-repeat center center;
  width:535px;
  height:535px;
  display:block;
  cursor:pointer;
  position:relative;
  margin:0 auto;
  top: -125px;
  left: 372px;
}

.wheel-button:hover{ 
  color: white;
}

.wheel-button i, .wheel li i {
  position: relative;
  width: 20px;
  height: 20px;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  display: block;
  line-height: 140%;
}

.wheel-button.active i{
  transform: rotate(135deg);
  -ms-transform: rotate(135deg); /* IE 9 */
  -webkit-transform: rotate(135deg); /* Safari and Chrome */
}

.wheel li a, .wheel li a:visited{
  text-align: center;
  color: white;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.wheel li a:hover{
}
/* wheelmenu Stylesheets */

.guide {
  position: fixed;
  top: 5%;
  right: 5%;
  z-index: 99999;
}

.guide a.homepage {
  float: left;
  width: 125px;
  height: 28px;
  cursor: pointer;
  text-indent: 999px;
  white-space: nowrap;
  background: url(../images/button/homepage.png) no-repeat;
  display:none;
}

.guide a.homepage:hover {
  background: url(../images/button/homepage-on.png) no-repeat;
}

.guide a.playmusic {
  float: left;
  width: 26px;
  height: 30px;
  margin-left: 30px;
  cursor: pointer;
  text-indent: 999px;
  white-space: nowrap;
  background: url(../images/button/bgm.png) no-repeat;
}

.guide a.playmusic:hover {
  background: url(../images/button/bgm-off.png) no-repeat;
}

.guide a.stopmusic {
  background: url(../images/button/bgm-off.png) no-repeat;
}

.guide a.stopmusic:hover {
  background: url(../images/button/bgm.png) no-repeat;
}

.guide .goto {
    cursor: pointer;
    position: fixed;
    top: 50%;
    right: 5%;
    margin: 0;
    padding: 0;
    text-indent: 999px;
    white-space: nowrap;
}

.guide .goto-light {
    cursor: pointer;
    position: fixed;
    top: 50%;
    right: 5%;
    margin: 0;
    padding: 0;
    z-index: 999;
	color: #fff;
    letter-spacing: 2px;
	font: 23px "Microsoft YaHei";
	text-shadow: 1px 1px 0 #595a5a;
	-webkit-animation: next-light-an 3s 2s ease-in-out infinite;
	-webkit-mask: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) 0 -60px no-repeat content;
}
@-webkit-keyframes next-light-an {
	to{ -webkit-mask-position: 0 60px; }
}

.guide .goto .next {
    width: 29px;
    height: 52px;
    overflow: hidden;
    text-indent: -9999px;
    background: url(/c/11years/images/button/next.png) no-repeat;
}

.guide .goto-light .next {
    width: 29px;
    height: 52px;
    overflow: hidden;
    text-indent: -9999px;
    background: url(/c/11years/images/button/next-light.png) no-repeat;
}

.section { 
    text-align: center; 
    font: 18px "Microsoft Yahei"; 
    color: #fff;
}

.page1 { 
    z-index: 1;
    background: url(../images/p1/hd-bg.jpg) 50% no-repeat;
}
.page2 { 
    z-index: 2;
    background: url(../images/p2/hd-bg.jpg) 50% no-repeat;
}
.page3 { 
    z-index: 3;
    background: url(../images/p2/hd-bg.jpg) 50% no-repeat;
}
.page4 { 
    z-index: 4;
    background: url(../images/p2/hd-bg.jpg) 50% no-repeat;
}
.page5 { 
    z-index: 5;
    background: url(../images/p2/hd-bg.jpg) 50% no-repeat;
}
.page6 { 
    z-index: 6;
    background: url(../images/p6/bg.png) 50% 0% transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/p6/bg.png', sizingMethod='scale');
}

.page1-inner { 
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto;
}

.page1-inner span { 
    position: absolute;
}

.page2-inner { 
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto; 
    overflow: hidden;
}

.page3-inner {
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto; 
    overflow: hidden;
}

.page4-inner { 
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto; 
    overflow: hidden;
}

.page5-inner { 
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto; 
    overflow: hidden;
}

.page6-inner { 
    position: relative; 
    width: 1280px; 
    height: 840px; 
    margin: 0 auto; 
    overflow: hidden;
}

.page1-inner .star {
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/p1/star.png) 50% no-repeat;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 600s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
.page1-inner .circle {
    z-index: 10;
    left: 372px;
    top:  125px;
    width:  535px;
    height: 535px;
    background: url(../images/p1/circle.png) no-repeat;
}
.page1-inner .flow {
    z-index: 20;
    left: -1000px;
    top: 495px;
    width: 861px;
    height: 243px;
    background: url(../images/p1/flow.png) no-repeat;
}
.page1-inner .logo {
    z-index: 30;
    left: 450px;
    top: -300px;
    width: 383px;
    height: 117px;
    background: url(../images/p1/logo.png) no-repeat;
}
.page1-inner .slogan {
    z-index: 40;
    left: 500px;
    top: 920px;
    width: 279px;
    height: 20px;
    background: url(../images/p1/slogan.png) no-repeat;
}

.page2-inner a { text-decoration: none; color: #686F74; font-size: 26px; float: left; position: absolute; display: inline-block; white-space: nowrap }
.page2-inner a:hover { color: #1c9cff }
.page2-inner .text1 {  }
.page2-inner .text2 {  }
.page2-inner .text3 { color: #4FC8E9; font-size: 36px; }
.page2-inner .text4 {  }
.page2-inner .text5 {  }
.page2-inner .text6 { color: #4FC8E9; font-size: 36px; }
.page2-inner .text7 {  }


.page3-inner a { text-decoration: none; color: #969A9C; font-size: 26px; float: left; position: absolute; display: inline-block; white-space: nowrap }
.page3-inner a:hover { color: #1c9cff }
.page3-inner .split { width: 100%; height: 100%; background: url(../images/p3/dian.png) 600px 40px repeat-y; }
.page3-inner .icon { text-indent: 15px; font-size: 20px; color: #909597; }
.page3-inner .bg2006 { width: 7px; height: 22px; background: url(../images/p3/06dian.png) 0 10px no-repeat; }
.page3-inner .bg2007 { width: 7px; height: 22px; background: url(../images/p3/07dian.png) 0 10px no-repeat; font-size: 16px; }
.page3-inner .bg2008 { width: 7px; height: 22px; background: url(../images/p3/08dian.png) 0 10px no-repeat; }
.page3-inner .bg2009 { width: 7px; height: 22px; background: url(../images/p3/09dian.png) 0 10px no-repeat; font-size: 18px; }


.page4-inner a { text-decoration: none; color: #969A9C; font-size: 26px; float: left; position: absolute; display: inline-block; white-space: nowrap }
.page4-inner .qrcode { background: url(../images/p4/qrcode-bg.png); width: 90px; height: 100px; display: none; }
.page4-inner .qrcode img { padding: 7px 0 0 5px; }
.page4-inner .text3, .page5-inner .text5 { color: #4FC8E9; font-size: 36px; }


.page5-inner a { text-decoration: none; color: #647074; font-size: 28px; float: left; position: absolute; display: inline-block; white-space: nowrap }
.page5-inner .text3, .page5-inner .text5 { color: #4FC8E9; font-size: 36px; }


.page6-inner a { text-decoration: none; color: #676162; font-size: 22px; float: left; position: absolute; display: inline-block; white-space: nowrap }