/*动画*/
/*旋转进入*/
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation: rotateIn 1s;
  animation: rotateIn 1s;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation: rotateInDownLeft 1s;
  animation: rotateInDownLeft 1s;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation: rotateInDownRight 1s;
  animation: rotateInDownRight 1s;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation: rotateInUpLeft 1s;
  animation: rotateInUpLeft 1s;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation: rotateInUpRight 1s;
  animation: rotateInUpRight 1s;
}

/*进入*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/*左进*/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}

/*右进*/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s;
}

/*上进*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation: fadeInUp 1s;
  animation: fadeInUp 1s;
}

/*下进*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation: fadeInDown 1s;
  animation: fadeInDown 1s;
}



/*去除base.css*/
table, caption, tbody, tfoot, thead, tr, th, td {
      border: 1px solid #b0bdd6;
}
strong{
    font-weight: bold;
}
/*去除base.css*/

body {
    font-family: "Microsoft Yahei";
    background: #fff;
}

.wrap {
    width: 750px;
    height: 960px;
    margin: 0 auto;
    position: relative;
}

.header {
    width: 100%;
    height: 100px;
    background: #000;
    position: relative;
}

.header img {
    position: absolute;
    top: 20%;
    left: 20px;
    z-index: 99
}

.header h1 {
    position: absolute;
    top: 10%;
    left: 160px;
    font: 30px/40px "Microsoft Yahei";
    color: #fff;
}

.header h2 {
    position: absolute;
    top: 55%;
    left: 160px;
    font: 24px/30px "Microsoft Yahei";
    color: #999;
}

.header .down-btn {
    width: 26%;
    height: 60%;
    background: #d22735;
    position: absolute;
    right: 3%;
    top: 20%;
    font: normal 30px/60px "Microsoft Yahei";
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.leftmenu {
    width: 335px;
    height: 100%;
    position: fixed;
    top: 88px;
    left: -335px;
    z-index: 10;
}

.leftmenu li {
    width: 300px;
    height: 90px;
    list-style: none;
    float: left;
    margin-left: 10px;
}

.leftmenu a {
    width: 220px;
    background: #ccc;
    padding-left: 80px;
    height: 90px;
    float: left;
    text-align: left;
    font: normal 30px/90px "Microsoft Yahei";
    color: #fff;
    text-decoration: none;
}


.bg1 {
    width: 100%;
    height: 1100px;
    background: url(../images/bg1.jpg) no-repeat;
    position: relative;
    z-index: 1;
}
.videobtn {
    display: block;
    height: 133px;
    width: 220px;
    background: url(../images/videobtn.png);
    position: absolute;
    bottom: 162px;
    left: 50%;
    margin-left: -110px;
}

/*活动*/
section {
    width: 100%;
    position: relative;
}
section .icon {
    background: url(../images/num.png) 0 0 no-repeat;
    width: 108px;
    position: absolute;
    left: 50%;
    margin-left: -54px;
    height: 108px;
    top: -54px;
    z-index: 3;
}
section .tit {
    width: 100%;
    position: absolute;
    top: 66px;
    left: 0;
    z-index: 2;
}

/*act1*/
section.act1 {
    height: 1021px;
    background: url(../images/act1-bg.jpg) 0 0 no-repeat;
}
section.act1 .icon {
    height: 53px;
    top: -1px;
}
section.act1 .con {
    width: 550px;
    padding-left: 30px;
    position: absolute;
    left: 0;
    bottom: 120px;
}
section.act1 .con p {
    color: #242424;
    font: 30px/40px 'microsoft yahei';

}
section.act1 .con p.sp {
    text-indent: 152px;
}


/*act2 */
section.act2 {
    height: 1153px;
}
section.act2 .icon {
    background-position: 0 -53px;
}
section.act2 .con {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
section.act2 .con .swiper-container {
    height: 100%;
}
section .dots1 {
    position: absolute;
    left: 24px;
    bottom: 120px;
    font-family: SimHei;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    height: 60px;
    line-height: 30px;
    z-index: 2;
}
section .dots1 span {
    display: inline-block;
    width: 58px;
    padding: 0 30px;
    height: 60px;
    background: none;
    opacity: 1;
    filter:alpha(opacity=100);
    moz-opacity: 1;
    background: url(../images/ciricon.png) right 50% no-repeat;
}
section .dots1 span.s2 {
    width: 30px;
}
section .dots1 span.s5 {
    background: none;
}
section .dots1 span.swiper-pagination-bullet-active{
    color: #ff6f20;
}

/*act3*/
section.act3 {
    height: 1072px;
    background: url(../images/act3-bg.jpg) 0 0 no-repeat;
}
section.act3 .icon {
    background-position: 0 -161px;
}
section.act3 .con {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
section.act3 .con .swiper-container {
    height: 100%;
}
section.act3 .swiper-slide {
    height: 100%;
    width: 100%;
}
section.act3 .slide1 {
    background: url(../images/act3-1.png);
}
section.act3 .slide2 {
    background: url(../images/act3-4.png);
}
section.act3 .slide3 {
    background: url(../images/act3-3.png);
}
section.act3 .slide3.change {
    background: url(../images/act3-31.png);
}
section.act3 .slide4 {
    background: url(../images/act3-21.png);
}
section.act3 .slide4.change {
    background: url(../images/act3-2.png);
}
section.act3 .swiper-slide div {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}
section.act3 .swiper-slide div span {
    display: block;
    position: absolute;
    width: 70px;
    height: 70px;
    background: url(../images/sex.png);
    right: 30px;
}
section.act3 .swiper-slide div span.checked {
    background: url(../images/sexc.png);
}
section.act3 .swiper-slide div span.unable {
    background: url(../images/sexu.png);
}
section.act3 .swiper-slide div span.boy {
    top: 507px;
    background-position: 0 -95px;
}
section.act3 .swiper-slide div span.girl {
    top: 602px;
    background-position: 0 0;
}


section .dots2 {
    position: absolute;
    z-index: 2;
    height: 111px;
    bottom: 60px;
    font-family: SimHei;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    left: 80px;
}
section .dots2 span {
    width: 125px;
    height: 111px;
    margin-right: 24px;
    line-height: 111px;
    text-align: center;
    padding-left: 5px;
    background: none;
    opacity: 1;
    filter:alpha(opacity=100);
    moz-opacity: 1;
    background: url(../images/act3-btn.png) no-repeat;
}
section .dots2 span.swiper-pagination-bullet-active{
    background: url(../images/act3-btnH.png) no-repeat;
}


/*act4*/
section.act4 {
    height: 973px;
    background: url(../images/act4-bg.jpg) 0 0 no-repeat;
}
section.act4 .icon {
    background-position: 0 -269px;
}
section.act4 .con {
    position: absolute;
    top: 246px;
    height: 605px;
    width: 100%;
}
section.act4 .con div {
    width: 332px;
    height: 605px;
    position: absolute;
}
section.act4 .con div a {
    display: block;
    position: absolute;
    width: 179px;
    height: 58px;
    left: 50%;
    margin-left: -90px;
    bottom: 36px;
}
section.act4 .con div.left {
    background: url(../images/act4-1.jpg);
    left: 20px;
}
section.act4 .con div.right {
    background: url(../images/act4-2.jpg);
    right: 20px;
}

/*more*/
.more {
    display: block;
    width: 100%;
    height: 182px;
    background: url(../images/more.jpg);
}

/*底部图标信息*/
.box4 {
    height: 833px;
    position: relative;
    text-align: center;
    width: 100%;
    float: left;
    background-color: #eee;
}
.box4 .wx {
    float: left;
    height: 200px;
    margin-top: 110px;
    text-align: center;
    width: 100%;
}
.box4 .wx h3 {
    color: #333333;
    font: 36px/60px "Microsoft Yahei";
}
.box4 .wx h4 {
    color: #666666;
    font: 24px/40px "Microsoft Yahei";
}
.box4 .wx b {
    color: #d22735;
    font-size: 28px;
    font-weight: bold;
}
.box4 a {
    float: left;
    height: 180px;
    margin-top: 70px;
    text-decoration: none;
    width: 214px;
}
.box4 .a1 {
    margin-left: 60px;
}
.box4 a h3 {
    color: #333;
    font: 30px/60px "Microsoft Yahei";
}
.box4 a p {
    color: #d22735;
    font: 28px/30px "Microsoft Yahei";
}
.kefu {
    color: #333;
    font-family: "microsoft yahei";
    font-size: 24px;
    position: absolute;
    text-align: center;
    top: 680px;
    width: 100%;
}
.box4 a.back-to-top {
    background: rgba(0, 0, 0, 0) url("../images/toTop_03.png") no-repeat scroll center top;
    bottom: 70px;
    color: #666666;
    float: none;
    font-size: 24px;
    height: 32px;
    left: 50%;
    line-height: 32px;
    margin: 0 0 0 -50px;
    padding-top: 10px;
    position: absolute;
    width: 100px;
}

footer {
    width: 100%;
    height: 100px;
    padding-top: 30px;
    clear: both;
    background: #1c1d22;
    font: normal 24px/35px "Microsoft Yahei";
    color: #666;
    text-align: center;
}

.maskDiv {
    position: fixed;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    z-index: 100;
    display: none;
}
.popdetail {
    position: fixed;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: #e8dfd4;
    overflow: hidden;
    display: none;
    z-index: 101;
}
.popdetail .close {
    width: 62px;
    height: 63px;
    background: url(../images/close.png) no-repeat;
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    color: #000;
    font-family: 'microsoft yahei';
}
.popdetail .tit {
    padding-top: 70px;
    text-align: center;
    font-size: 40px;
    padding-bottom: 30px;
}
.popdetail .con {
    padding: 40px;
    text-align: center;
}