html, body {position: relative;height: 100%;padding: 0;}
.swiper-container {width: 100%;height: 100%;}
.swiper-slide{position: relative;}
.introd p{font-family: 'STKaiti';font-size: 22px;line-height: 40px;text-align: center;color: #333;letter-spacing: 2px;}
.page1{background: url(../images/page_02.jpg) top center no-repeat;background-size: cover;background-position-y: 100px;}
.page2{background: url(../images/page_02.jpg) top center no-repeat;background-size: cover;background-position-y: 100px;}
.page3{background: url(../images/page_03.jpg) top center no-repeat;background-size: cover;background-position-y: 100px;}
.page4{background: url(../images/page_04.jpg) top center no-repeat;background-size: cover;background-position-y: 100px;}
.page5{background: url() top center no-repeat;background-size: cover;background-position-y: 100px;}
.page6{background: url(../images/page_05.jpg) top center no-repeat;background-size: cover;background-position-y: 100px;}

.box{position: absolute;top: 50%;left: 50%;}
.page1 .box{width:980px;height: 600px;margin-top: -300px;margin-left: -490px;background: url() no-repeat;}
.page1 .logo{width: 370px;height: 115px;background: url() no-repeat;margin: 0 auto;margin-top: 140px;;}
.page1 .buttons{width: 392px;margin: 60px auto;}
.page1 .buttons a{width: 168px;height: 39px;display: block;border: 1px solid #12a5f8;border-radius: 8px;line-height: 39px;text-align: center;color: #fff;font-size: 16px;}
.page1 .buttons .buttons_l{float: left;color: #12a5f8;}
.page1 .buttons .buttons_r{float: right;background: #12a5f8;margin: 0 auto;}
.page1 .introd .l{opacity: 0;}
.page1 .introd .r{opacity: 0;}
.page1 .box.start .clock-n1{-webkit-animation: swinging .2s linear forwards;animation: swinging .2s linear forwards;}
.page1 .box.start .clock-n2{-webkit-animation: swinging .2s linear forwards;animation: swinging .2s linear forwards;}
.page1 .box.start .minute{-webkit-transform-origin: 8px 83px;transform-origin: 8px 83px;-webkit-animation: round .5s 3 .2s linear forwards;animation: round .5s 3 .2s linear forwards;}
.page1 .box.start .hour{-webkit-transform-origin: 8px 63px;transform-origin: 8px 63px;-webkit-animation: round 5s .3 .2s linear forwards;animation: round 5s .3 .2s linear forwards;}
.page1 .box.start .clock-n2:after{-webkit-transform-origin: 1px 89px;transform-origin: 1px 89px;-webkit-animation: round 6s .25 .2s linear forwards;animation: round 6s .25 .2s linear forwards;}
.page1 .box.start .vstime{-webkit-animation: swingIn .2s 1.8s linear forwards;animation: swingIn .2s 1.8s linear forwards;}
.page1 .box.start .introd .myimg2_1{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}


.page1 .box.start .introd .btn{-webkit-animation: bounceIn 1.8s .8s linear forwards;animation: bounceIn 1.8s .8s linear forwards;}
.page1 .introd .btn{opacity: 0;}
.page1 .introd .myimg2_1{opacity: 0;}
.page1 .introd .myimg2_1{color:#da475a;font-size:45px;}
.page1 .introd .myimg2_1 span{color:#1d5298;font-size: 45px;}

.page2 .box,.page3 .box,.page4 .box,.page6 .box{width:1000px;height: 660px;margin-top: -290px;margin-left: -500px;}
.page2 .logo,.page3 .logo,.page4 .logo{width: 384px;height: 151px;background: url() no-repeat;margin: 0 auto;}
.page2 .time{margin-top: 30px;}
.page2 .clock{width:320px;height: 350px;display: inline-block;}
.page2 .clock-n1{background: url() no-repeat;position: relative;}
.page2 .clock-n1:after{content: '';width: 13px;height: 13px;border-radius: 50%;background:#933131;border: 6px solid #f0efed;position: absolute;left: 150px;top: 188px;box-shadow: 0 0 2px 1px #e4e4e3;}
.page2 .clock-n1 div{width: 16px;height: 90px;position: absolute;left:154px;background: #f0efed;box-shadow: 0 0 2px #e6e6e4;top: 118px;border-radius: 12px;}
.page2 .clock-n1 .hour{height: 70px;top: 138px;}
.page2 .clock-n2{background: url() no-repeat;position: relative;}
.page2 .clock-n2:after{content: '';display: block;height: 117px;width: 3px;position: absolute;background: #b05957;border-radius: 50%;top: 112px;left: 158px;}
.page2 .vstime{width: 350px;height: 350px;display: inline-block;opacity: 0;}
.page2 .vstime:after{content: '';display: block;height: 40px;background: url() -10px 0 no-repeat;margin-top: 140px;}
.page2 .introd .l{opacity: 0;}
.page2 .introd .r{opacity: 0;}
.page2 .box.start .clock-n1{-webkit-animation: swinging .2s linear forwards;animation: swinging .2s linear forwards;}
.page2 .box.start .clock-n2{-webkit-animation: swinging .2s linear forwards;animation: swinging .2s linear forwards;}
.page2 .box.start .minute{-webkit-transform-origin: 8px 83px;transform-origin: 8px 83px;-webkit-animation: round .5s 3 .2s linear forwards;animation: round .5s 3 .2s linear forwards;}
.page2 .box.start .hour{-webkit-transform-origin: 8px 63px;transform-origin: 8px 63px;-webkit-animation: round 5s .3 .2s linear forwards;animation: round 5s .3 .2s linear forwards;}
.page2 .box.start .clock-n2:after{-webkit-transform-origin: 1px 89px;transform-origin: 1px 89px;-webkit-animation: round 6s .25 .2s linear forwards;animation: round 6s .25 .2s linear forwards;}
.page2 .box.start .vstime{-webkit-animation: swingIn .2s 1.8s linear forwards;animation: swingIn .2s 1.8s linear forwards;}
.page2 .box.start .introd .l,.page2 .box.start .introd .r{-webkit-animation: swingIn 1s 2s linear forwards;animation: swingIn 1s 2s linear forwards;}
.page2 .box.start .introd .myimg2_1{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}
.page2 .introd .myimg2_1{opacity: 0;}
.page2 .introd .myimg2_1{color:#da475a;font-size:45px;}
.page2 .introd .myimg2_1 span{color:#1d5298;font-size: 45px;}
.page3{overflow: hidden;}
.page3 .logo{background: url() no-repeat;}
.page3 .libra{width: 800px;height: 340px;background: url() no-repeat;margin: 66px auto;position: relative;}
.page3 .lever{position: absolute;top: 13px;left: 88px;;width: 622px;height: 40px;background: url() no-repeat;-webkit-transform:rotateZ(-25deg);transform:rotateZ(-25deg);}
.page3 .dish{position: absolute;width: 151px;height: 148px;background: url() no-repeat;}
.page3 .dish.l{top:145px;left: 40px;}
.page3 .dish.r{top: -115px;right: 50px;}my
.page3 .book{width: 114px;height: 114px;background: url() no-repeat;position: absolute;top: 18px;left: 19px;}
.page3 .free{width: 142px;height: 65px;background: url() no-repeat;position: absolute;top: -300px;right: 3px;}
.page3 .introd{position: absolute;left: 0;bottom: 66px;width: 100%;}
.page3 .introd p{color: #fff;text-align: left;width: 200px;opacity: 0;}
.page3 .introd .l{opacity: 0;}
.page3 .introd .r{opacity: 0;}
.page3 .box.start .free{-webkit-animation: free .4s ease-in forwards;animation: free .4s ease forwards;}
.page3 .box.start .lever{-webkit-transform-origin: 309px 20px;transform-origin: 309px 20px;-webkit-animation: lever .2s .4s ease-in forwards;animation: lever .2s .4s ease-in forwards;}
.page3 .box.start .dish.l{-webkit-animation: dish_l .2s .4s ease-in forwards;animation: dish_l .2s .4s ease-in forwards;}
.page3 .box.start .dish.r{-webkit-animation: dish_r .2s .4s ease-in forwards;animation: dish_r .2s .4s ease-in forwards;}
.page3 .box.start .book{-webkit-animation: book .3s .6s ease-out forwards;animation: book .3s .6s ease-out forwards;}
.page3 .box.start .introd .l{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}

.page3 .box.start .introd{    position: absolute;
    left: auto;
    bottom: auto;
    width: auto; }
.page4 .logo{background: url() no-repeat;}
.page4 .work_pic{width: 452px;height: 429px;background: url() 0 bottom no-repeat;position: relative;float: left;opacity: 0;}
.page4 .work_pic.l .think{width: 84px;height: 90px;background: url() no-repeat;position: absolute;left: 133px;opacity: 0;}
.page4 .work_pic.r{width: 339px;background: url() 0 bottom no-repeat;float:right;margin-right: 40px;}
.page4 .work_pic.r .think{width: 101px;height: 101px;background: url() no-repeat;position: absolute;right:-24px;opacity: 0;}
.page4 .introd{margin-top: 10px;}
.page4 .introd p{text-align: left;width: 430px;opacity: 0;}
.page4 .introd .l{opacity: 0}
.page4 .introd .r{float: right;width: 400px;}
.page4 .box.start .work_pic.l{-webkit-animation: work_pic .5s linear forwards;animation: work_pic .5s linear forwards;}
.page4 .box.start .work_pic.l .think{-webkit-animation: swingIn .4s .6s ease-out forwards;animation: swingIn .4s .6s ease-out forwards;}
.page4 .box.start .work_pic.r{-webkit-animation: work_pic .5s 1.4s linear forwards;animation: work_pic .5s 1.4s linear forwards;}
.page4 .box.start .work_pic.r .think{-webkit-animation: swingIn .4s 2s ease-out forwards;animation: swingIn .4s 2s ease-out forwards;}
.page4 .box.start .introd .r{-webkit-animation: swingIn .4s 2.4s ease-out forwards;animation: swingIn .4s 2.4s ease-out forwards;}
.page4 .box.start .introd .l{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}
.page4 .box.start .introd{    position: absolute;
    left: auto;
    bottom: auto;
    width: auto; }

.page4 .box.start .shou {
    position: absolute;
    top: 30%; 
    text-align: center;
    width: 100%;
  }

.page5 h3{line-height: 55px;font-size: 20px;color:#fff;font-weight: normal;}
.page5 li{float: left;padding: 7px 10px;}
.page5 li:nth-child(1){width: 216px}
.page5 li:nth-child(2){width: 10px}
.page5 li:nth-child(3){width: 100px}
.page5 li:nth-child(4){width: 100px}
.page5 li:nth-child(5){width: 100px}
.page5 li:nth-child(6){width: 100px}
.page5 li:nth-child(7){width: 100px}
.page5 li:nth-child(8){width: 100px}
.page5 .pic{height: 90px;position: relative;overflow: hidden;}
.page5 img{width:180px;height:90px;display: block;}
.page5 .skew{width: 100px;height: 90px;background: #eee;position: absolute;top:0;left: -160px;-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: skew(-10deg);transform: skew(-10deg);-webkit-transition: all .3s ease;transition: all .3s ease;opacity: .2;}
.page5 .pic:hover .skew{left: 240px;}
.page5 .info{margin-top: 10px;color: #999;}
.page5 .info p{line-height: 28px;font-size: 1.16em;color: #fff;text-align: center;}
.page5 .bottom{margin-top: 50px;}

.page5 .introd .l{opacity: 0}
.page5 .btnLg{width: 197px;height: 54px;display: block;background:url();margin: 10px auto;}
.page5 .box.start .introd .l{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}
.page5 .box.start .introd{    position: absolute;
    left: auto;
    bottom: auto;
    width: auto; }
.page5 .box .uldiv{    background: #5fb5b2;
    background-image: -webkit-linear-gradient(0deg, #5fb5b2, #22528f);
    background-image: linear-gradient(90deg, #5fb5b2, #22528f);}
.page5 .box.start .shou {
    position: absolute;
    top: 30%;
    left: 25%;
    text-align: center;
    width: 50%;
  }
/*.page5 .friend{width: 800px;height: 65px;margin: 50px auto;background:url(.png) no-repeat;}
.page5 .friend a{display: block;height: 65px;float: right;}*/
/*
.page6 h3{line-height: 55px; font-size: 20px; color:#FFF; font-weight: bold;}
.page6 .friend{ margin: 60px auto;}
.page6 .friend li{display: block; height: 50px; margin:15px 0; padding:0 10px; float: left;}
.page6 .friend li {border-right:1px solid #646262;}
.page6 .friend li:nth-child(6n){border-right:none;}
.page6 .friend li img {height:50px;}*/
.page6 .logo{background: url() no-repeat;}
.page6 .work_pic{width: 452px;height: 429px;background: url() 0 bottom no-repeat;position: relative;float: left;opacity: 0;}
.page6 .work_pic.l .think{width: 84px;height: 90px;background: url() no-repeat;position: absolute;left: 133px;opacity: 0;}
.page6 .work_pic.r{width: 339px;background: url() 0 bottom no-repeat;float:right;margin-right: 40px;}
.page6 .work_pic.r .think{width: 101px;height: 101px;background: url() no-repeat;position: absolute;right:-24px;opacity: 0;}
.page6 .introd{margin-top: 10px;}
.page6 .introd p{text-align: left;width: 430px;opacity: 0;}
.page6 .introd .l{opacity: 0}
.page6 .introd .r{float: right;width: 400px;}
.page6 .box.start .work_pic.l{-webkit-animation: work_pic .5s linear forwards;animation: work_pic .5s linear forwards;}
.page6 .box.start .work_pic.l .think{-webkit-animation: swingIn .4s .6s ease-out forwards;animation: swingIn .4s .6s ease-out forwards;}
.page6 .box.start .work_pic.r{-webkit-animation: work_pic .5s 1.4s linear forwards;animation: work_pic .5s 1.4s linear forwards;}
.page6 .box.start .work_pic.r .think{-webkit-animation: swingIn .4s 2s ease-out forwards;animation: swingIn .4s 2s ease-out forwards;}
.page6 .box.start .introd .r{-webkit-animation: swingIn .4s 2.4s ease-out forwards;animation: swingIn .4s 2.4s ease-out forwards;}
.page6 .box.start .introd .l{-webkit-animation: fadeInDown 1.2s .2s linear forwards;animation: fadeInDown 1.2s .2s linear forwards;}
.page6 .box.start .introd{    position: absolute;
    left: auto;
    bottom: auto;
    width: auto; }

.page6 .box.start .shou {
    position: absolute;
    top: 40%;
  }

/*响应式样式*/
.smallScreen .page2 .time{margin-top: 0;}
.smallScreen .page4 .work{margin-top: -40px;}
.smallScreen .page5 h3 {line-height: 40px;}
.smallScreen .page5 .bottom {margin-top: -10px;}

.black .swiper-pagination-bullet{background: #fff;}
.black .swiper-pagination-bullet-active{background: #12A5F8;}
.phone{position: fixed;top: 43px;left: 0;width: 100%;height: 60px;line-height:60px;background: #9f1c14;z-index: 99;font-size:2rem;text-align: center;color: #e7e7e7;overflow: hidden;display: none;}
.phone span{width: 35px;height: 35px;background: url() 0 12px no-repeat;float: right;font-weight: bold;padding-top: 12px;}
@-webkit-keyframes round{
  100%{-webkit-transform:rotateZ(360deg);}
}
@keyframes round{
  100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes swinging{
  50%{-webkit-transform:scale(1.2);}
  90%{-webkit-transform:scale(.9);}
  100%{-webkit-transform:scale(1);}
}
@keyframes swinging{
  50%{transform:scale(1.2);}
  50%{transform:scale(.9);}
  100%{transform:scale(1);}
}
@-webkit-keyframes swingIn{
  50%{-webkit-transform:scale(1.2);opacity: 1;}
  90%{-webkit-transform:scale(.9);opacity: 1;}
  100%{-webkit-transform:scale(1);opacity: 1;}
}
@keyframes swingIn{
  50%{transform:scale(1.2);opacity: 1;}
  50%{transform:scale(.9);opacity: 1;}
  100%{transform:scale(1);opacity: 1;}
}

@-webkit-keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes lever{
  100%{-webkit-transform:rotateZ(0deg);}
}
@keyframes lever{
  100%{transform:rotateZ(0deg);}
}
@-webkit-keyframes dish_l{
  100%{left: 15px;top: 15px;}
}
@keyframes dish_l{
  100%{left: 15px;top: 15px;}
}
@-webkit-keyframes dish_r{
  100%{right: 15px;top: 15px;}
}
@keyframes dish_r{
  100%{right: 15px;top: 15px;}
}
@-webkit-keyframes free{
  100%{top: 68px;}
}
@keyframes free{
  100%{top: 68px;}
}
@-webkit-keyframes book{
  40%{top: 0px;}
  60%{top: 18px;}
  80%{top: 10px;}
  100%{top: 18px;}
}
@keyframes book{
  40%{top: 0px;}
  60%{top: 18px;}
  80%{top: 10px;}
  100%{top: 18px;}
}
@-webkit-keyframes work_pic{
  20%{opacity: 1;}
  40%{opacity: 0;}
  60%{opacity: 1;}
  80%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes work_pic{
  20%{opacity: 1;}
  40%{opacity: 0;}
  60%{opacity: 1;}
  80%{opacity: 0;}
  100%{opacity: 1;}
}