@charset 'UTF-8';

#fullpage {height: 100%; position: relative;}

/*右侧导航*/
#fp-nav ul li a span, .fp-slidesNav ul li a span{background-color: #f4f4f4;width: 12px;height: 12px;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{
  background-color: #dddddd;
  margin: -2px 0 0 -2px;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 12px;
    height: 12px;
    margin: -2px 0 0 -2px;
}

.section {
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  overflow: hidden;
}
.wrap {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section0 {
  background: url(../images/bg.jpg) no-repeat bottom center;
  height: 100% !important;
}
.section0-title {
  background: url(../images/p1-title.png) no-repeat;
  width: 80%;
  height: 50%;
  background-size: 100% auto;
  position: absolute;
  left: 10%;
  top: 10%;
  z-index: 2;
  opacity: 1;
}
.section0-star1 {
  background: url(../images/p1-star1.png) no-repeat;
  width: 67%;
  height: 58%;
  position: absolute;
  left: -16%;
  bottom: 36%;
  z-index: 4;
  background-size: 123% auto;
}
.section0-star2 {
  background: url(../images/p1-star2.png) no-repeat;
  width: 90%;
  height: 44%;
  position: absolute;
  left: -10%;
  top: -12%;
  z-index: -4;
  background-size: 100% auto;
}
.section0-star3 {
  background: url(../images/p1-star3.png) no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.section0-penguin1 {
  background: url(../images/penguin1.png) no-repeat;
  background-size: 100% auto;
  width: 24%;
  height: 20%;
  position: absolute;
  bottom: 30%;
  left: 7%;
  z-index: 2;
}
.section0-penguin2 {
  background: url(../images/penguin-big.png) no-repeat;
  background-size: 90% auto;
  width: 37%;
  height: 20%;
  position: absolute;
  bottom: 28%;
  left: 35%;
  z-index: 2;
}
.section0-penguin2 .star1 {
  background: url(../images/star1.png) no-repeat bottom left;
  width: 67%;
  height: 100%;
  position: absolute;
  left: -16%;
  bottom: 9%;
  z-index: 4;
  background-size: cover;
}
.section0-penguin2 .star2 {
  background: url(../images/star2.png) no-repeat bottom left;
  width: 90%;
  height: 33%;
  position: absolute;
  left: 4%;
  top: -13%;
  z-index: -3;
  background-size: contain;
}
.section0-penguin3 {
  background: url(../images/penguin2.png) no-repeat;
  background-size: 100% auto;
  width: 32%;
  height: 23%;
  position: absolute;
  bottom: 29%;
  right: 2%;
  z-index: 2;
}

.section1 {
  background-color: #ff8c3e;
}
.section1-desc {
  background: url(../images/p2-desc.png) no-repeat top center;
  height: 70%;
  width: 58%;
  background-size: 84% auto;
  position: absolute;
  top: 10%;
  left: 21%;
  z-index: 1;
}
.section1-title {
  background: url(../images/p2-title.png) no-repeat top center;
  width: 90%;
  height: 50%;
  background-size: 100% auto;
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 2;
  opacity: 0;
}
.section1-penguin1 {
  background: url(../images/p2-penguin1.png) no-repeat;
  background-size: 85% auto;
  width: 29%;
  height: 20%;
  position: absolute;
  top: 20%;
  left: 38%;
  z-index: 1;
}
.section1-penguin2 {
  background: url(../images/p2-penguin2.png) no-repeat;
  background-size: 100% auto;
  width: 26%;
  height: 20%;
  position: absolute;
  top: 44%;
  left: 36%;
  z-index: 2;
}
.flag {
  background: url(../images/flag.png) no-repeat;
  background-size: 100% auto;
  width: 15%;
  height: 16%;
  position: absolute;
  bottom: 18%;
  left: 40%;
  z-index: 2;
}
.section1-penguin3 {
  background: url(../images/p2-penguin3.png) no-repeat;
  background-size: 100% auto;
  width: 16%;
  height: 16%;
  position: absolute;
  bottom: 16%;
  left: 44%;
  z-index: 3;
}

.section2 {
  background: #ffdb5d;
}
.section2-desc {
  background: url(../images/p3-bg.png) no-repeat;
  background-size: 80% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -5%;
  left: 10%;
}
.seal {
  background: url(../images/p3-seal.png) no-repeat;
  background-size: 100% auto;
  width: 27%;
  height: 24%;
  position: absolute;
  top: 72%;
  right: 24%;
}

.section3 {
  background: url(../images/bg.jpg) no-repeat bottom center;
  height: 100%;
}
.section3-title {
  background: url(../images/p4-title.png) no-repeat top center;
  width: 90%;
  height: 50%;
  background-size: 93% auto;
  position: absolute;
  left: 5%;
  top: 2%;
  z-index: 4;
}
.section3-thank {
  background: url(../images/p4-thank.png) no-repeat;
  background-size: 90% auto;
  width: 50%;
  height: 12%;
  position: absolute;
  top: 30%;
  left: 27%;
  opacity: 0;
  z-index: 5;
}
.section3-star1 {
  background: url(../images/p4-star1.png) no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -20%;
  z-index: 1;
}
.section3-star2 {
  background: url(../images/p4-star2.png) no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.section3-star3 {
  background: url(../images/p4-star3.png) no-repeat;
  background-size: 90% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.section3-penguin2 {
  background: url(../images/penguin-big.png) no-repeat;
  background-size: 88% auto;
  width: 37%;
  height: 26%;
  position: absolute;
  bottom: 22%;
  left: 34%;
  z-index: 2;
}
.section3-penguin2 .star1 {
  background: url(../images/star1.png) no-repeat bottom left;
  width: 67%;
  height: 47%;
  position: absolute;
  left: -19%;
  bottom: 56%;
  z-index: 4;
  background-size: 123% auto;
}
.section3-penguin2 .star2 {
  background: url(../images/star2.png) no-repeat bottom left;
  width: 90%;
  height: 40%;
  position: absolute;
  left: -10%;
  top: -13%;
  z-index: -4;
  background-size: 100% auto;
}