*{ margin:0; padding:0;}
html{ margin:0; padding:0; text-align: left; overflow: auto;height: 100%;}
body{ margin:0; padding:0; text-align:center; background-color:#fff; font-family:Microsoft YaHei; color:#000000; font-size:16px;}
table { border-spacing:0;}
table, table tr, table td{ margin:0; padding:0;}
ul, li{ list-style-type:none;}
a{ text-decoration:none;}
a:hover { color:#fff;}
img{ border:0;}



.top{ width:100%; float:left;}
.top2{ width:1000px; height:65px; margin:0 auto; background:url(top.png) no-repeat;}
.introduce{ width:100%; height:600px; float:left; background:url(introduce.png) no-repeat center center;}
.content1{ width:1000px; margin:0 auto;}
.content3{ width:500px; float:left;}
.introduce1{ width:139px; height:50px; float:left; margin:134px 0 0 37px; background:url(introduce1.png) no-repeat; animation:mycss3 1800ms;}
.introduce2{ width:439px; height:54px; float:left; margin:0 0 0 37px; background:url(introduce2.png) no-repeat; animation:mycss4 800ms;animation-fill-mode:backwards;}
@keyframes mycss4{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
                  40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}
                  60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}
.introduce3{ width:431px; height:39px; float:left; margin:18px 0 0 37px; border:2px #fff solid; background:url(introduce3.png) no-repeat; animation:mycss5 1000ms 800ms;animation-fill-mode:backwards;}
@keyframes mycss5{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}
.introduce4{ width:444px; height:29px; float:left; margin:18px 0 0 37px; background:url(introduce4.png) no-repeat; -webkit-animation:mycss6 800ms 1800ms;animation:mycss6 800ms 1800ms;animation-fill-mode:backwards;}
.introduce5{ width:444px; height:29px; float:left; margin:0 0 0 37px; background:url(introduce5.png) no-repeat; -webkit-animation:mycss6 800ms 2600ms;animation:mycss6 800ms 2600ms;animation-fill-mode:backwards;}
.introduce6{ width:444px; height:29px; float:left; margin:0 0 0 37px; background:url(introduce6.png) no-repeat; -webkit-animation:mycss6 800ms 3400ms;animation:mycss6 800ms 3400ms;animation-fill-mode:backwards;}
.introduce7{ width:444px; height:29px; float:left; margin:0 0 0 37px; background:url(introduce7.png) no-repeat; -webkit-animation:mycss6 800ms 4200ms;animation:mycss6 800ms 4200ms;animation-fill-mode:backwards;}
@-webkit-keyframes mycss6{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
                            100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes mycss6{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
                    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}

.bounce{-webkit-animation-name:bounce;animation-name:bounce}
.content{ width:100%; float:left;}
.content1{ width:1000px; margin:0 auto;}
.column1{ width:1000px; height:488px; float:left; background:url(column1.png) no-repeat;}
.column1_1{ width:1000px; height:300px; float:left; margin:188px 0 0 0;}
.column1_1_1{ width:316px; height:300px; float:left;}
.column1_1_2{ width:316px; height:300px; float:left; margin-left:26px;}
.column1_1 img{ width:160px; height:176px; float:left; margin:0 78px; position: relative}
.column1_1 span{ width:316px; max-height:92px; line-height:23px; float:left; margin-top:20px; text-align:center;}

.column3{ width:1000px; float:left; padding-top:178px; background:url(column3.png) no-repeat;}
.column3_1{ width:500px; height:120px; float:left; position:relative; transition:800ms ease all;}
.column3 .color1:hover{ color:#5bb9f0;}
.column3 .color2:hover{ color:#fe825e;}
.column3 .color3:hover{ color:#ff826d;}
.column3 .color4:hover{ color:#0dbdc5;}
.column3 .color5:hover{ color:#ff9755;}
.column3 .color6:hover{ color:#869aff;}
.column3 .color7:hover{ color:#17c4bb;}
.column3 .color8:hover{ color:#fe9e21;}
.column3_1:before,.column3_1:after{ content:''; position:absolute; top:0; right:0; height:3px; width:0; transition:400ms ease all;}
.color1:before,.color1:after{ background: #5bb9f0;}
.color2:before,.color2:after{ background: #fe825e;}
.color3:before,.color3:after{ background: #ff826d;}
.color4:before,.color4:after{ background: #0dbdc5;}
.color5:before,.color5:after{ background: #ff9755;}
.color6:before,.color6:after{ background: #869aff;}
.color7:before,.color7:after{ background: #17c4bb;}
.color8:before,.color8:after{ background: #fe9e21;}
.column3_1:after{ right:inherit; top:inherit; left:0; bottom:0;}
.column3_1:hover:before,.column3_1:hover:after{ width:100%; transition:800ms ease all;}
.column3_1 img{ width:80px; height:80px; float:left; margin:20px 20px 20px 40px;}
.column3_1 .txt1{ width:270px; height:30px; line-height:30px; float:left; margin-top:15px; text-align:left; font-size:20px;}
.column3_1:hover .txt1{ margin-top:9px; transition:800ms ease margin-top;}
.column3_1 .txt2{ width:270px; line-height:22px; float:left; margin-top:9px; text-align:left; color:#777777; font-size:12px;}
.column3_1:hover .txt2{ width:320px; line-height:25px; margin-top:4px; font-size:15px;}

.column4{ width:1000px; float:left; padding:40px 0; background:url(column4.png) no-repeat;}
.column4_1{ width:500px; height:120px; float:left; background:none; transition:800ms ease all;}
.column4_1:hover{ background:url(column4_1.png) no-repeat; }
.column4 .color1:hover{ color:#14d195;}
.column4 .color2:hover{ color:#c0afff;}
.column4 .color3:hover{ color:#ff6e5b;}
.column4 .color4:hover{ color:#fc4f4f;}
.column4 .color5:hover{ color:#cb8eff;}
.column4 .color6:hover{ color:#ffbf43;}
.column4 .color7:hover{ color:#fd715a;}
.column4 .color8:hover{ color:#ff4031;}
.column4_1 img{ width:80px; height:80px; float:left; margin:20px 20px 20px 40px;}
.column4_1:hover img{
transform:translateY(0); -ms-transform:translateY(0); -moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0);
animation:mycss2 800ms; -ms-animation:mycss2 800ms; -moz-animation:mycss2 800ms; -webkit-animation:mycss2 800ms; -o-animation:mycss2 800ms;
animation-iteration-count:infinite;}
@keyframes mycss2 {
0% {transform:translateY(0);}
50% {transform:translateY(-3px);}
100% {transform:translateY(0);}
}
@-ms-keyframes mycss2 {
0% {transform:translateY(0);}
50% {transform:translateY(-3px);}
100% {transform:translateY(0);}
}
@-moz-keyframes mycss2 {
0% {transform:translateY(0);}
50% {transform:translateY(-3px);}
100% {transform:translateY(0);}
}
@-webkit-keyframes mycss2 {
0% {transform:translateY(0);}
50% {transform:translateY(-3px);}
100% {transform:translateY(0);}
}
@-o-keyframes mycss2 {
0% {transform:translateY(0);}
50% {transform:translateY(-3px);}
100% {transform:translateY(0);}
}

.column4_1 .txt1{ width:270px; height:30px; line-height:30px; float:left; margin-top:15px; text-align:left; font-size:20px;}
.column4_1:hover .txt1{ margin-top:9px; transition:800ms ease margin-top; animation:mycss3 1600ms;}
@keyframes mycss3 {
  0% { transform: skew(0); -webkit-transform: skew(0); -ms-transform: skew(0); }
  16.65% { transform: skew(-12deg); -webkit-transform: skew(-12deg); -ms-transform: skew(-12deg); }
  33.3% { -webkit-transform: skew(10deg);-webkit-transform: skew(10deg); -ms-transform: skew(10deg); }
  49.95% { transform: skew(-6deg); -webkit-transform: skew(-6deg); -ms-transform: skew(-6deg); }
  66.6% { -webkit-transform: skew(4deg); -webkit-transform: skew(4deg); -ms-transform: skew(4deg); }
  83.25% { -webkit-transform: skew(-2deg); -webkit-transform: skew(-2deg); -ms-transform: skew(-2deg); }
  100% { -webkit-transform: skew(0);-webkit-transform: skew(0); -ms-transform: skew(0); }
}
.column4_1 .txt2{ width:270px; line-height:22px; float:left; margin-top:9px; text-align:left; color:#777777; font-size:12px;}
.column4_1:hover .txt2{ width:320px; line-height:25px; margin-top:4px; font-size:15px;}

.content2{ width:100%; height:450px; float:left; background-color:#4ba7e6;}
.column2{ width:1000px; height:450px; margin:0 auto; background:url(column2.png) no-repeat;}
.column2_1{ width:140px; height:120px; float:left; margin:210px 0 0 242px; background:url(column2_1.png) no-repeat;
transform:rotate(0); -ms-transform:rotate(0); -moz-transform:rotate(0); -webkit-transform:rotate(0); -o-transform:rotate(0);
animation:mycss1 3s; -ms-animation:mycss1 3s; -moz-animation:mycss1 3s; -webkit-animation:mycss1 3s; -o-animation:mycss1 3s;
animation-iteration-count:infinite;
}
@keyframes mycss1 {
0% {transform:rotate(9deg);}
50% {transform:rotate(-9deg);}
100% {transform:rotate(9deg);}
}
@-ms-keyframes mycss1 {
0% {transform:rotate(9deg);}
50% {transform:rotate(-9deg);}
100% {transform:rotate(9deg);}
}
@-moz-keyframes mycss1 {
0% {transform:rotate(9deg);}
50% {transform:rotate(-9deg);}
100% {transform:rotate(9deg);}
}
@-webkit-keyframes mycss1 {
0% {transform:rotate(9deg);}
50% {transform:rotate(-9deg);}
100% {transform:rotate(9deg);}
}
@-o-keyframes mycss1 {
0% {transform:rotate(9deg);}
50% {transform:rotate(-9deg);}
100% {transform:rotate(9deg);}
}

/*
.button1{ width:130px; float:right; margin: 0 40px 0 0; border:0; background:url(button1.png) no-repeat center center; cursor:pointer;}
.button2{ width:130px; float:right; margin: 0 40px 0 0; border:0; background:url(button2.png) no-repeat center center; cursor:pointer;}
.button3{ width:130px; float:right; margin: 0 60px 0 0; border:0; background:url(button3.png) no-repeat center center; cursor:pointer;}
.button1:hover{ background:url(button1_1.png) no-repeat center center; transition:background 0.3s ease-in-out;}
.button2:hover{ background:url(button2_1.png) no-repeat center center; transition:background 0.3s ease-in-out;}
.button3:hover{ background:url(button3_1.png) no-repeat center center; transition:background 0.3s ease-in-out;}

.content{ width:100%; float:left;}
.content1{ width:1000px; margin:0 auto;}
.column1{ background:url(column1.jpg) no-repeat center center; filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;}
.column2, .column6{ background:#29adff;}
.column4{ background:url(column4.png) no-repeat center center; filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;}
.column8{ background:url(column8.jpg) no-repeat center bottom; filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;}
.column9{ background:url(column9.jpg) no-repeat center center; filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size:100% 100%; background-size:100% 100%;}

/*.column2_1{ background:url(column2_1.png) no-repeat center center;}
.column3_1{ background:url(column3_1.png) no-repeat center center;}
.column5_1{ background:url(column5_1.png) no-repeat center center;}
.column6_1{ background:url(column6_1.png) no-repeat center center;}
.column7_1{ background:url(column7_1.png) no-repeat center center;}
.column8_1{ background:url(column8_1.png) no-repeat center center;}
.column9_1{ background:url(column9_1.png) no-repeat center center;}*/