@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; outline: none;}
*:not(input,textarea) { -webkit-touch-callout: inherit; -webkit-user-select: auto;}
body { width: 100%; font-family:"微软雅黑"; font-size:14px; color:#878787; -webkit-touch-callout:inherit; -webkit-user-select:auto; background-color: #fff;}
a { color: #878787; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a:hover {  text-decoration: none;}
button,input,select,textarea { font-size: 100%; margin: 0; padding: 0; outline: none;}
dt,dd { display: inline-block;}
textarea,input { resize: none; outline: none;}
textarea { resize: none; -webkit-appearance: none;}
ul,ol,li { list-style: none;}
em { font-style: normal;}

/*@media screen and (min-width:640px){
	body{width:640px;}
	header{width:640px;}
}
@media screen and (max-width:320px){
	body{width:320px;}
	header{width:320px;}
}*/



/*第一页*/
@-webkit-keyframes 'up'{
 0%,30%{opacity:0;-webkit-transform:translate(0,10px);transform:translate(0,10px);}
 60%{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}
 100%{opacity:0;-webkit-transform:translate(0,-8px);transform:translate(0,-8px)}
}
.up{ position:absolute; bottom:10px; left:50%; z-index:50; margin-left:-12px; -webkit-animation:'up' 1.5s ease-in 0 infinite; animation:'up' 1.5s ease-in 0 infinite;}
.up img{ width:24px; height:14px;}

@keyframes draw {
to { stroke-dashoffset: 0; }
}
@-webkit-keyframes draw {
to { stroke-dashoffset: 0; }
}
@keyframes fadeInUp{
	0%{ opacity:0; transform:translate3d(0,100%,0); -webkit-transform:translate3d(0,100%,0);}
	100%{opacity:1; transform:none; -webkit-transform:none;}
}
@-webkit-keyframes fadeInUp{
	0%{ opacity:0;transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0);}
	100%{opacity:1; transform:none; -webkit-transform:none;}
}
@keyframes stress{
	0%{transform:translate3d(0,13%,0);-webkit-transform:translate3d(0,13%,0);}
	30%{transform:translate3d(0,20%,0);-webkit-transform:translate3d(0,20%,0);}
	60%{transform:translate3d(0,13%,0);-webkit-transform:translate3d(0,13%,0);}
	100%{transform:translate3d(0,7%,0);-webkit-transform:translate3d(0,7%,0);}
}
@-webkit-keyframes stress{
	0%{transform:translate3d(0,13%,0);-webkit-transform:translate3d(0,13%,0);}
	30%{transform:translate3d(0,20%,0);-webkit-transform:translate3d(0,20%,0);}
	60%{transform:translate3d(0,13%,0);-webkit-transform:translate3d(0,13%,0);}
	100%{transform:translate3d(0,7%,0);-webkit-transform:translate3d(0,7%,0);}
}

.pageone{ background:url(../images/bg8.jpg) no-repeat; background-size:cover;}
.dazzle1{ position:relative; width:100%; height:100%;}
.dazzle1 ul{}
.dazzle1 ul li{ position:absolute; }
.dazzle1 ul .daz_a1{left:50%; margin-left:-75px; top:20%;}
#first { position: relative;width:150px; height:150px; }
#svg-canvas { position: relative; width:150px; height:150px;}
.a1_title {stroke-dasharray:1000; stroke-dashoffset:1000;font-weight: bold;}
.dazzle1 ul .daz_a2{left:0; top:55%; width:100%; text-align:center;}
.daz_acon2{ color:#fff; font-size:18px; text-transform:uppercase; letter-spacing:2px; height:100px;}
.dazzle1 ul .daz_a3{left:0; top:62%; width:100%; text-align:center;}
.daz_acon3{ color:#fff; font-size:48px; transform:rotate(10deg); -webkit-transform:rotate(10deg); font-weight:bold; text-shadow: 2px 2px 2px #e7edc0;}

.active .a1_title{animation: draw 5s linear forwards;-webkit-animation: draw 8s linear forwards;}
.active .dazzle1 ul .daz_a2{ animation: fadeInUp 1s ease 0s 1 both; -webkit-animation:fadeInUp 1s ease 0s 1 both;}
.active .dazzle1 ul .daz_a3{ animation: stress 1s ease 0s 3 both; -webkit-animation:stress 1s ease 0s 3 both;}

/*第二页*/




/*第四页*/

@-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);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
	100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}
}

.pagefour{}
.dazzle4{}
.dazzle4 ul{}
.dazzle4 ul li{ position:absolute;}
.dazzle4 ul .daz_f1{ top:8%; left:50%; margin-left:-45px;}
.daz_fcon1{ width:90px; height:90px; background:#d8ce2e; border-radius:45px; display:table-cell; vertical-align:middle; text-align:center;}
.daz_fdet1{ color:#fff; font-size:16px; width:70px; padding-left:10px;}
.dazzle4 ul .daz_f2{top:23%; margin-left:-100px;}
.daz_fcon2{ background:#ea6000;}
.daz_fdet2{}
.dazzle4 ul .daz_f3{top:23%; margin-left:4%;}
.daz_fcon3{ background:#20d7a5;}
.daz_fdet3{}
.dazzle4 ul .daz_f4{top:40%; margin-left:-146px;}
.daz_fcon4{ background:#1ecfc5;}
.daz_fdet4{}
.dazzle4 ul .daz_f5{top:40%; margin-left:54px;}
.daz_fcon5{ background:#d888b0;}
.daz_fdet5{}
.dazzle4 ul .daz_f6{top:40%;}
.daz_fcon6{ background:#5528c8;}
.daz_fdet6{}
.dazzle4 ul .daz_f7{top:57%; margin-left:-100px;}
.daz_fcon7{ background:#ccd0d9;}
.daz_fdet7{}
.dazzle4 ul .daz_f8{top:57%; margin-left:4%;}
.daz_fcon8{ background:#50c1e9;}
.daz_fdet8{}
.dazzle4 ul .daz_f9{ top:72%;}
.active .dazzle4 ul .daz_f1{  -webkit-animation: fadeInDown 0.8s ease 1s 1 both; animation: fadeInDown 0.8s ease 1s 1 both;}
.active .dazzle4 ul .daz_f2{  -webkit-animation: fadeInDown 0.8s ease 0.8s 1 both; animation: fadeInDown 0.8s ease 0.8s 1 both;}
.active .dazzle4 ul .daz_f3{  -webkit-animation: fadeInDown 0.8s ease 0.8s 1 both; animation: fadeInDown 0.8s ease 0.8s 1 both;}
.active .dazzle4 ul .daz_f4{  -webkit-animation: fadeInDown 0.8s ease 0.6s 1 both; animation: fadeInDown 0.8s ease 0.6s 1 both;}
.active .dazzle4 ul .daz_f5{  -webkit-animation: fadeInDown 0.8s ease 0.6s 1 both; animation: fadeInDown 0.8s ease 0.6s 1 both;}
.active .dazzle4 ul .daz_f6{  -webkit-animation: fadeInDown 0.8s ease 0.6s 1 both; animation: fadeInDown 0.8s ease 0.6s 1 both;}
.active .dazzle4 ul .daz_f7{  -webkit-animation: fadeInDown 0.8s ease 0.4s 1 both; animation: fadeInDown 0.8s ease 0.4s 1 both;}
.active .dazzle4 ul .daz_f8{  -webkit-animation: fadeInDown 0.8s ease 0.4s 1 both; animation: fadeInDown 0.8s ease 0.4s 1 both;}
.active .dazzle4 ul .daz_f9{  -webkit-animation: fadeInDown 0.8s ease 0.2s 1 both; animation: fadeInDown 0.8s ease 0.2s 1 both;}


/*进度模式*/

.section_slide{ background: linear-gradient(#787675,#828081,#787675);  background:-webkit-linear-gradient(#787675,#828081,#787675);}
.slide{ position:relative; overflow:hidden;}
.tem_tit{ position:absolute; top:5%; left:5%; z-index:2;}
.tem_tit_con{ color:#0070c3;}
.tem_tit_con h3 a{ font-size:1.15em; color:#fff; }
.tem_tit_con span{ display:block; padding-top:10px;}
.shaft_line{ position:absolute; bottom:14%; left:0; width:100%;}
.shaft_line_det{ width:100%; height:4px; background:rgba(255,255,255,0.2);}
/*1*/
.slide01{ background:url(../images/ban1.png); background-size:cover;}
.shaft{ width:100%; height:100%; position:relative; }
.shaft ul{}
.shaft ul li{ position:absolute;}
.shaft ul .shaft_con1{ bottom:10%; left:50%; margin-left:-60px; height:35px; line-height:35px; width:120px;}
.shaft_det1{ width:50px; height:50px; background:rgba(8,106,178,1);  position:absolute; left:0px; top:6px; z-index:5; border:6px solid rgba(0,0,0,0.6); opacity:0.9;}
.shaft_det3{color:#000; z-index:6; font-weight:bold; top:22px; width:100%; text-align:center; font-size:16px; background:rgba(255,255,255,1);border-radius:30px;}
.shaft_det4{background:rgba(255,255,255,0.5);border-radius:30px;color:#000; padding:5px 20px;}
.shaft ul .shaft_con2{ bottom:7%; left:50%; transform:rotate(325deg); font-size:0.9em; margin-left:-20px;}
.shaft ul .shaft_con3{ top:15%; left:6%; width:88%; height:55%; overflow:hidden;}
.shaft_det5{ color:#fff; line-height:27px; letter-spacing:1px; width:100%;}
.shaft_det5 span{ width:48%; display:inline-block;}
.shaft_det5 .shaft_pay{ width:100%;}
.shaft_det5 .shaft_pay b{ font-size:1.1em;}
.shaft_language{ padding-top:10px;}
.shaft_language span{ background:rgba(255,255,255,0.6); padding:5px 10px; border-radius:14px; margin-right:8px; display:inline-block; float:left; margin:4px 3px; white-space:nowrap;}
.shaft_det7 span{ width:auto; color:#fff;}


.active .active .shaft_con1{-webkit-animation:axle 1s ease 0.2s 1 both; animation:axle 1s ease 0.2s 1 both;}
.active .active .shaft_det1{ background:#feec02;  width:50%;}
.active .active .shaft_con2{-webkit-animation:axleup 1s ease 0.2s 1 both; animation:axleup 1s ease 0.2s 1 both;}
.shaft_con2{-webkit-animation:axleup_fan 1s ease 0s 1 both; animation:axleup_fan 1s ease 0s 1 both;}
.active .active .shaft_con3{-webkit-animation:axledown 1.2s ease 1s 1 both; animation:axledown 1.2s ease 1s 1 both;}
.shaft_con3{-webkit-animation:axledown_fan 1.2s ease 0.2s 1 both; animation:axledown_fan 1.2s ease 0.2s 1 both;}

/*2*/
.slide02{ background:url(../images/ban2.png); background-size:cover;}
.bid{}
.bid ul{}
.bid ul li{}
.bid ul .bid_con3{ top:15%; left:5%; width:90%; height:55%; overflow:hidden;}
.bid_det3{ color:#fff; font-size:1em; line-height:28px;}

.active .active .bid_con1{ -webkit-animation:fadeInLeft 1.2s ease 1.2s 1 both; animation:fadeInLeft 1.2s ease 1.2s 1 both;}
.active .active .bid_con2{ -webkit-animation:fadeInRight 1.2s ease 1.2s 1 both; animation:fadeInRight 1.2s ease 1.2s 1 both;}
.active .active .bid_con3{-webkit-animation:axledown 1.2s ease 1s 1 both; animation:axledown 1.2s ease 1s 1 both;}
.bid_con1{ -webkit-animation:fadeInLeft_fan 1.2s ease 0.2s 1 both; animation:fadeInLeft_fan 1.2s ease 0.2s 1 both;}
.bid_con2{ -webkit-animation:fadeInRight_fan 1.2s ease 0.2s 1 both; animation:fadeInRight_fan 1.2s ease 0.2s 1 both;}
.bid_con3{-webkit-animation:axledown_fan 1.2s ease 0.2s 1 both; animation:axledown_fan 1.2s ease 0.2s 1 both;}

/*3*/
.slide03{ background:url(../images/ban3.png); background-size:cover;}
.app{}
.app ul{}
.app ul li{}
.app ul .app_con1{ top:20%; left:5%; width:90%;}
.app_det1{ color:#fff; line-height:32px;}
.app_det1 span{ display:block;}
.app ul .app_con2{ top:50%; left:5%; width:90%;}
.app_det2{ width:80%; background:rgba(255,255,255,0.6); margin:0 auto; padding:8px; border-radius:8px; position:relative;}
.app_det2 i{position:absolute;display:block;border:4px solid #fff;border-color:rgba(255,255,255,0.6) transparent;border-width:10px 10px 0px 10px; top:-10px; left:8px; transform:rotate(180deg); -webkit-transform:rotate(180deg); letter-spacing:1px;}

.active .active .app_con1{ -webkit-animation:fadeInRight 1.2s ease 1.2s 1 both; animation:fadeInRight 1.2s ease 1.2s 1 both;}
.active .active .app_con2{ -webkit-animation:fadeInLeft 1.2s ease 1.2s 1 both; animation:fadeInLeft 1.2s ease 1.2s 1 both;}
.app_con1{ -webkit-animation:fadeInRight_fan 1.2s ease 0.2s 1 both; animation:fadeInRight_fan 1.2s ease 0.2s 1 both;}
.app_con2{ -webkit-animation:fadeInLeft_fan 1.2s ease 0.2s 1 both; animation:fadeInLeft_fan 1.2s ease 0.2s 1 both;}

/*4*/
.slide04{ background:url(../images/ban4.png); background-size:cover;}
.shaft_det6{ width:100%; text-align:center; padding-bottom:15px;}
.shaft_det6 a{ color:#fff; font-size:1.1em; text-decoration:underline;}

.tem_tit_con{-webkit-animation:fadeInRight_fan 1s ease 0s 1 both; animation:fadeInRight_fan 1s ease 0s 1 both;}
.active .tem_tit_con{-webkit-animation:fadeInRight 1s ease 0.2s 1 both; animation:fadeInRight 1s ease 0.2s 1 both;}
/*联系方式*/
.section_gift_t_touch{width:160px; position:absolute;top:20px;left:50%; font-size:16px;color:#fff; margin-left:-80px; text-align:center; -webkit-transform:translate(500px,0px); -webkit-transition:all 1s ease-in}
.active  .section_gift_t_touch{-webkit-transform:translate(0px,0px);}
.section_touch_ul{ padding:20px; }
.section_touch_ul li{background: rgba(255,255,255,0.1); text-align:center; padding:20px 0; margin-top:20px; opacity:0}
.section_touch_ul li a{ display:block;color:#fff}
.active  .section_touch_icon{ display:block; font-size:30px; opacity:0.9}
.company_t_icon{width:300px;height:300px; position:absolute;bottom:-200px;left:50%; margin-left:-130px; background:url(../images/t_bg.png) no-repeat; background-size:100%;-webkit-animation:section_touch_icon 4s  linear 4s  infinite both;
-moz-animation:section_touch_icon 4s  linear 4s  infinite both;
-ms-animation:section_touch_icon 4s  linear 4s  infinite both;
-o-animation:section_touch_icon 4s  linear 4s  infinite both;
animation:section_touch_icon 4s  linear 4s  infinite both;
}
.active .section_touch_ul li:nth-child(1){-webkit-animation:section_touch_ul 1s  linear  both;
-moz-animation:section_touch_ul 1s  linear  both;
-ms-animation:section_touch_ul 1s  linear  both;
-o-animation:section_touch_ul 1s  linear  both;
animation:section_touch_ul 1s  linear  both;
}
.active .section_touch_ul li:nth-child(2){-webkit-animation:section_touch_ul 1s  linear 1s both;
-moz-animation:section_touch_ul 1s  linear 1s both;
-ms-animation:section_touch_ul 1s  linear 1s both;
-o-animation:section_touch_ul 1s  linear 1s both;
animation:section_touch_ul 1s  linear 1s both;
}
.active .section_touch_ul li:nth-child(3){-webkit-animation:section_touch_ul 1s  linear 2s  both;
-moz-animation:section_touch_ul 1s  linear 2s  both;
-ms-animation:section_touch_ul 1s  linear 2s  both;
-o-animation:section_touch_ul 1s  linear 2s  both;
animation:section_touch_ul 1s  linear 2s  both;
}
.active .section_touch_ul li:nth-child(4){-webkit-animation:section_touch_ul 1s  linear 3s  both;
-moz-animation:section_touch_ul 1s  linear 3s  both;
-ms-animation:section_touch_ul 1s  linear 3s  both;
-o-animation:section_touch_ul 1s  linear 3s  both;
animation:section_touch_ul 1s  linear 3s  both;
}
@-webkit-keyframes section_touch_ul {
 0% {
-webkit-transform:translate(0px, 0px) scale(0);
-moz-transform:translate(0px, 0px) scale(0);
-ms-transform:translate(0px, 0px) scale(0);
-o-transform:translate(0px, 0px) scale(0);
transform:translate(0px, 0px) scale(0);
opacity:0
}
 
 100% {
-webkit-transform:translate(0px, 0px)  scale(1);
-moz-transform:translate(0px, 0px)  scale(1);
-ms-transform:translate(0px, 0px)  scale(1);
-o-transform:translate(0px, 0px)  scale(1);
transform:translate(0px, 0px)  scale(1);
opacity:1
}
}
@-webkit-keyframes section_touch_icon {
 0% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
 100% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}}


@-webkit-keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
	100%{opacity:1;transform:none}
}
@keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
	100%{opacity:1;transform:none}
}
@-webkit-keyframes axle{
	0%{}
	100%{ bottom:13%;}
}
@keyframes axle{
	0%{}
	100%{ bottom:13%;}
}
@-webkit-keyframes axleup{
	50%{ opacity:0; transform:translate(-50%, -50%) translate3d(20px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(20px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);}
	100%{ opacity:1; bottom:10%; margin-bottom:64px; left:38%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);font-size:1.05em;}
}
@keyframes axleup{
	50%{ opacity:0; transform:rotate(325deg); -webkit-transform:rotate(325deg);}
	100%{ opacity:1; bottom:10%; margin-bottom:64px; left:38%; transform:rotate(0deg); -webkit-transform:rotate(0deg); font-size:1.05em;}
}
@-webkit-keyframes axleup_fan{
	50%{ opacity:1; bottom:10%; margin-bottom:64px; left:38%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); font-size:1.05em;}
	100%{opacity:0; transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@keyframes axleup_fan{
	50%{ opacity:1; bottom:10%; margin-bottom:64px; left:38%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);font-size:1.05em;}
	100%{opacity:0; transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@-webkit-keyframes axledown{
	0%{ opacity:0; transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2); -webkit-transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2);}
	100%{ opacity:1; transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit- transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@keyframes axledown{
	0%{ opacity:0; transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2); -webkit-transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2);}
	100%{ opacity:1; transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit- transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@-webkit-keyframes axledown_fan{
	0%{ opacity:1; transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
	100%{ opacity:0; transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2); -webkit-transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2);}
}
@keyframes axledown_fan{
	0%{ opacity:1; transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(0%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
	100%{ opacity:0; transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2); -webkit-transform:translate(5%, 0%) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.2);}
}
@-webkit-keyframes fadeInRight_fan{
	0%{opacity:1;transform:none;}
	100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
}
@keyframes fadeInRight_fan{
	0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
	100%{opacity:1;transform:none}
}
@-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}
}

/*向左滑动*/

.slip{ position:absolute; top:6%; right:6%;color:#eee; z-index:2; font-size:1em;}
.slip span{}

.active .slip span:nth-child(1){ -webkit-animation:fadeIn 1.2s ease 0.08s infinite; animation:fadeIn 1.2s ease 0.08s infinite;}
.active .slip span:nth-child(2){ -webkit-animation:fadeIn 1.2s ease 0.16s infinite; animation:fadeIn 1.2s ease 0.16s infinite;}
.active .slip span:nth-child(3){ -webkit-animation:fadeIn 1.2s ease 0.24s infinite; animation:fadeIn 1.2s ease 0.24s infinite;}
.active .slip span:nth-child(4){ -webkit-animation:fadeIn 1.2s ease 0.32s infinite; animation:fadeIn 1.2s ease 0.32s infinite;}
.active .slip span:nth-child(5){ -webkit-animation:fadeIn 1.2s ease 0.4s infinite; animation:fadeIn 1.2s ease 0.4s infinite;}
@-webkit-keyframes fadeIn{
	0%{opacity:0}
	100%{opacity:1}
}
@keyframes fadeIn{
	0%{opacity:0}
	100%{opacity:1}
}

/*node*/

.section_gift{ background: url(../images/bg8.jpg) repeat; background-size:cover; width:640px;}
.node{ width:100%; height:100%; position:relative;}
.node ul{}
.node ul li{ position:absolute;}
.node ul .node_con1{ top:10%; width:100%;}
.node_det1{ color:#0167a2; text-align:center; width:100%;}
.node_det1 h3{ font-size:1.1em; font-weight:bold; padding-bottom:8px;}
.node_det1 span{ font-size:0.8em; display:block;}
.node ul .node_con2{ top:30%; left:50%; margin-left:-66px; z-index:1;}
.node_det2{}
.node_det2 img{ width:132px;}
.node ul .node_con3{ top:30%; margin-top:110px; left:50%; margin-left:40px; z-index:2;}
.node_det3{}
.node_det3 img{ width:100%;}
.node ul .node_con4{ top:60%; width:100%; text-align:center;}
.node_det4{}
.node_det4 a{ color:#0167a2;}
.node ul .node_con5{ width:100%; text-align:center; bottom:10%;}
.node_det5{ color:#1370a8;}

.active .node_con1{ -webkit-animation:fadeInDown 2s ease 0s 1 both; animation:fadeInDown 2s ease 0s 1 both;}
.active .node_con2{ -webkit-animation:axledown 1.5s ease 1s 1 both; animation:axledown 1.5s ease 1s 1 both;}
.active .node_con3{ -webkit-animation:bounceIn 2s ease 1s infinite both; animation:bounceIn 2s ease 1s infinite both;}
.active .node_con4{ -webkit-animation:bounceInRight 2s ease 2s 1 both; animation:bounceInRight 2s ease 2s 1 both;}
.active .node_con5{ -webkit-animation:bounceIn 2s ease 2s infinite both; animation:bounceIn 2s ease 2s infinite both;}

.active .daz_g3{  -webkit-animation: fadeIn 1s ease 1.4s both; animation: fadeIn 1s ease 1.4s both;}
.active .daz_g4{  -webkit-animation: fadeIn 1s ease 1.6s both; animation: fadeIn 1s ease 1.6s both;}

.daz_g3{ width:100%; bottom:15%;}
.daz_gcon3{ width:100%; height:100px; background:rgba(0,0,0,0.6);}
.daz_g4{ bottom:23%; width:100%; text-align:center;}
.daz_gcon4 a{ color:#fff; font-size:1em; background:#0167a2; padding:14px 25px; border-radius:5px; letter-spacing:1px;}
.app_det1_aa{width:40%; background:#36F;color:#fff; display:inline-block; padding:4px 10px; text-align:center}
.app_det1_bb{width:40%; background:#f60;color:#fff; display:inline-block; padding:4px 10px;text-align:center}
/*效果*/
@-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}
}
@-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}
}
@-webkit-keyframes bounceInLeft{
	0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
	0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
	75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
	90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
	100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{
	0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
	0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
	75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
	90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
	100%{-webkit-transform:none;transform:none}
}
@-webkit-keyframes bounceInRight{
	0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
	0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
	75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
	90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
	100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInRight{
	0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
	0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
	75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
	90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
	100%{-webkit-transform:none;-ms-transform:none;transform:none}
}


@media (min-device-width:175px) and (max-device-width:320px) and (max-device-height:500px) and (-webkit-min-device-pixel-ratio:2){

.shaft ul .shaft_con2{ }
.shaft ul .shaft_con3 ,.bid ul .bid_con3{ height:200px; overflow:hidden;}
.shaft_language{ padding-top:5px;}
.bid ul .bid_con3{ }
.node ul .node_con4{ top:68%;}
.daz_fcon1{ width:74px; height:74px; border-radius:37px;}
.daz_fdet1{ width:58px; padding-left:8px; font-size:0.95em;}
.dazzle4 ul .daz_f1{ margin-left:-37px;}
.dazzle4 ul .daz_f2{ margin-left:-88px;}
.dazzle4 ul .daz_f3{ margin-left:4%;}
.dazzle4 ul .daz_f4 { margin-left: -130px;}
.dazzle4 ul .daz_f5 { margin-left: 54px;}
.dazzle4 ul .daz_f7 { margin-left: -100px;}
.dazzle4 ul .daz_f8 { margin-left: 4%;}
@-webkit-keyframes axle{
	0%{}
	100%{ bottom:11%;}
}
@keyframes axle{
	0%{}
	100%{ bottom:11%;}
}

}

@media (max-device-width:640px) and (orientation : landscape){
.dazzle1 ul .daz_a1{ top:8%;}
.dazzle1 ul .daz_a2{ top:58%;}
.dazzle1 ul .daz_a3{ top:65%;}
.daz_fcon1{ width:74px; height:74px; border-radius:37px;}
.daz_fdet1{ width:58px; padding-left:8px; font-size:0.95em;}
.dazzle4 ul .daz_f1{ margin-left:-37px;}
.dazzle4 ul .daz_f2{ margin-left:-88px;}
.dazzle4 ul .daz_f3{ margin-left:4%;}
.dazzle4 ul .daz_f4 { margin-left: -130px;}
.dazzle4 ul .daz_f5 { margin-left: 54px;}
.dazzle4 ul .daz_f7 { margin-left: -100px;}
.dazzle4 ul .daz_f8 { margin-left: 4%;}

@-webkit-keyframes axleup{
	50%{ opacity:0; transform:translate(-50%, -50%) translate3d(20px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(20px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);}
	100%{ opacity:1; bottom:10%; margin-bottom:62px; left:42%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);font-size:1.05em;}
}
@keyframes axleup{
	50%{ opacity:0; transform:rotate(325deg); -webkit-transform:rotate(325deg);}
	100%{ opacity:1; bottom:10%; margin-bottom:62px; left:42%; transform:rotate(0deg); -webkit-transform:rotate(0deg); font-size:1.05em;}
}
@-webkit-keyframes axleup_fan{
	50%{ opacity:1; bottom:10%; margin-bottom:62px; left:42%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); font-size:1.05em;}
	100%{opacity:0; transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}
@keyframes axleup_fan{
	50%{ opacity:1; bottom:10%; margin-bottom:62px; left:42%; transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); -webkit-transform:translate(-50%, -50%) translate3d(40px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25);font-size:1.05em;}
	100%{opacity:0; transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -webkit-transform:translate(-50%, -50%) translate3d(000px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);}
}



}