@charset "utf-8";
html {
    -ms-touch-action: none;
}
*{	margin: 0;padding: 0;}
ul {  list-style: none;}
a { text-decoration: none;  border: none;  outline: none;}
img { display: block; border:none;}
.containter{width:100%;height:100%;position:absolute;left:0;top:0;}
.page{width:100%;height:100%;}
.dian{position:absolute;left:20px;top:50%;text-align: center;}
.dian ul{text-align:center;width:14px;}
.dian li{width:5px;height:5px;border-radius: 50%;background: #fff;text-align: center;margin:0 auto;margin-bottom: 10px;cursor:pointer;}
.dian .da{width:10px;height:10px;}
body,html{height:100%;overflow: hidden; color:#fff;}



@keyframes dragTop {
    0% {
        opacity:0;
        transform:translateY(-70px)
    }
    60% {
        opacity:1;
        transform:translateY(20px)
    }
    90% {
        transform:translateY(-5px)
    }
    97% {
        transform:translateY(-1px)
    }
    100% {
        transform:translateY(0px)
    }
}
@-webkit-keyframes dragTop {
    0% {
        opacity:0;
        -webkit-transform:translateY(-70px)
    }
    60% {
        opacity:1;
        -webkit-transform:translateY(20px)
    }
    90% {
        -webkit-transform:translateY(-5px)
    }
    97% {
        -webkit-transform:translateY(-1px)
    }
    100% {
        -webkit-transform:translateY(0px)
    }
}
@-moz-keyframes dragTop {
    0% {
        opacity:0;
        -moz-transform:translateY(-70px)
    }
    60% {
        opacity:1;
        -moz-transform:translateY(20px)
    }
    90% {
        -moz-transform:translateY(-5px)
    }
    97% {
        -moz-transform:translateY(-1px)
    }
    100% {
        -moz-transform:translateY(0px)
    }
}
@-ms-keyframes dragTop {
    0% {
        opacity:0;
        -ms-transform:translateY(-70px)
    }
    60% {
        opacity:1;
        -ms-transform:translateY(20px)
    }
    90% {
        -ms-transform:translateY(-5px)
    }
    97% {
        -ms-transform:translateY(-1px)
    }
    100% {
        -ms-transform:translateY(0px)
    }
}
@keyframes scaleAll {
    0% {
        opacity: 0;
        transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
@-webkit-keyframes scaleAll {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}
@-moz-keyframes scaleAll {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1) rotate(0);
    }
}
@-ms-keyframes scaleAll {
    0% {
        opacity: 0;
        -ms-transform: scale(0) rotate(30deg);
    }
    100% {
        opacity: 1;
        -ms-transform: scale(1) rotate(0);
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-ms-keyframes scaleIn {
    0% {
        opacity: 0;
        -ms-transform: scale(3);
    }
    100% {
        opacity: 1;
        -ms-transform: scale(1);
    }
}
@keyframes bgL {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}
@-webkit-keyframes bgL {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}
@-moz-keyframes bgL {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}
@-ms-keyframes bgL {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 2000px 0;
    }
}
@keyframes bgR {
    0% {
        background-position: 2000px 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-webkit-keyframes bgR {
    0% {
        background-position: 2000px 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-moz-keyframes bgR {
    0% {
        background-position: 2000px 0;
    }
    100% {
        background-position: 0 0;
    }
}
@-ms-keyframes bgR {
    0% {
        background-position: 2000px 0;
    }
    100% {
        background-position: 0 0;
    }
}
@keyframes slideleftfast {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideleftfast {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

@keyframes bounceInLeft {
  0% {
    
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
  /*  opacity: 1;*/
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(0px, 0, 0);
  }
  90% {
    transform: translate3d(0px, 0, 0);
  }
  100% {
    transform: none;
  }
}

@keyframes dragBottom {
    0% {
        opacity:0;
        transform:translateY(-70px)
    }
    60% {
        opacity:1;
        transform:translateY(20px)
    }
    90% {
        transform:translateY(-5px)
    }
    97% {
        transform:translateY(-1px)
    }
    100% {
        transform:translateY(0px)
    }
}
@-webkit-keyframes dragBottom {
    0% {
        opacity:0;
        -webkit-transform:translateY(-70px)
    }
    60% {
        opacity:1;
        -webkit-transform:translateY(20px)
    }
    90% {
        -webkit-transform:translateY(-5px)
    }
    97% {
        -webkit-transform:translateY(-1px)
    }
    100% {
        -webkit-transform:translateY(0px)
    }
}
@-moz-keyframes dragBottom {
    0% {
        opacity:0;
        -moz-transform:translateY(-70px)
    }
    60% {
        opacity:1;
        -moz-transform:translateY(20px)
    }
    90% {
        -moz-transform:translateY(-5px)
    }
    97% {
        -moz-transform:translateY(-1px)
    }
    100% {
        -moz-transform:translateY(0px)
    }
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(300px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(300px);}
    100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(300px);}
    100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(300px);}
    100%{opacity:1;transform:translateY(0);}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(500px);}
    60%{opacity:1;-webkit-transform:translateX(-30px);}
    80%{-webkit-transform:translateX(10px);}
    100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinR{
    0%{opacity:0;-moz-transform:translateX(500px);}
    60%{opacity:1;-moz-transform:translateX(-30px);}
    80%{-moz-transform:translateX(10px);}
    100%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinR{
    0%{opacity:0;-ms-transform:translateX(500px);}
    60%{opacity:1;-ms-transform:translateX(-30px);}
    80%{-ms-transform:translateX(10px);}
    100%{-ms-transform:translateX(0);}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(500px);}
    60%{opacity:1;transform:translateX(-30px);}
    80%{transform:translateX(10px);}
    100%{transform:translateX(0);}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(-30px);}
    80%{-webkit-transform:translateY(10px);}
    100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px);}
    60%{opacity:1;-moz-transform:translateY(-30px);}
    80%{-moz-transform:translateY(10px);}
    100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px);}
    60%{opacity:1;-ms-transform:translateY(-30px);}
    80%{-ms-transform:translateY(10px);}
    100%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px);}
    60%{opacity:1;transform:translateY(-30px);}
    80%{transform:translateY(10px);}
    100%{transform:translateY(0);}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
    70%{-webkit-transform:perspective(400px) rotateY(10deg);}
    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{
    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-moz-transform:perspective(400px) rotateY(-10deg);}
    70%{-moz-transform:perspective(400px) rotateY(10deg);}
    100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{
    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-ms-transform:perspective(400px) rotateY(-10deg);}
    70%{-ms-transform:perspective(400px) rotateY(10deg);}
    100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{transform:perspective(400px) rotateY(-10deg);}
    70%{transform:perspective(400px) rotateY(10deg);}
    100%{transform:perspective(400px) rotateY(0);opacity:1;}
}