@charset "utf-8";
/* CSS Document */
/*body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form{ padding:0px; margin:0px; border:0; font-size:12px;}
h1,h2,h3,h4,h5,h6 { font-size:12px; font-weight:100;}
select{ padding:0px; margin:0px; overflow:scroll;}
td,tr,td { font-size:12px;}
ul,ol li{ list-style:none;}
input { padding:0px; margin:0px;}
.left { float:left;}
.right { float:right;}
.clear { clear:both; font-size:0px; height:0px; overflow:hidden;}
a:link, a:visited { text-decoration:none;}
a:hover { text-decoration:underline;}
a:focus { outline:none;}
a { text-decoration:none; blr:expression(this.onFocus=this.blur());}
a { outline:none;}*/

/*广告*/
.banner{ width:100%; height:620px; margin-top:80px; position:relative;}
.banner .list{ width:100%; height:620px; overflow:hidden; position:relative; z-index:1;}
.banner .list li{ width:100%; height:620px; position:absolute; left:0px; top:0px; display:none;}
.banner .list li a{ width:980px; margin:0 auto; position:relative; display:block; overflow:hidden; height:620px;}
.banner .list li a:hover{ text-decoration:none;}
.banner .list li.bg1{ background:#2398f8;}
.banner .list li.bg1 a .text1{ width:200px; left:180px; height:200px; top:60px; position:absolute; z-index:3;}
.banner .list li.bg1 a .text1.hover{animation: img1 1s ease-out;-webkit-animation: img1 1s ease-out;}
.banner .list li.bg1 a .text2{ right:90px; top:95px; position:absolute; z-index:3; width:423px;}
.banner .list li.bg1 a .text2.hover{animation: img2 0.7s ease-out;-webkit-animation: img2 0.7s ease-out;}
.banner .list li.bg1 a .text3{ right:220px; width:286px; top:165px; position:absolute; z-index:3;}
.banner .list li.bg1 a .text3.hover{animation: img3 1s ease-out;-webkit-animation: img3 1s ease-out;}
.banner .btn{ position:absolute; top:20px; left:50%; margin-left:340px; z-index:100;}
.banner .btn li{ margin-left: 12px; background: #fff; text-indent: -999em; float: left; width: 14px; height: 14px; cursor: pointer; border-radius:50%; }
.banner .btn li.hover{ background: #FC3; }
@keyframes img1 {0% { left:-200px; transform:rotate(-180deg);} 100% { left:180px; transform:rotate(0deg);}}
@-webkit-keyframes img1 {0% {left:-200px; -webkit-transform:rotate(-180deg);} 100% {left:180px; -webkit-transform:rotate(0deg);}}
@keyframes img2 {0% {right:-350px; opacity:0.3;} 100% {right:90px; opacity:1;}}
@-webkit-keyframes img2 {0% {right:-350px; opacity:0.3;} 100% {right:90px; opacity:1;}}
@keyframes img3 {0% {right:-350px; opacity:0.3;} 100% {right:220px; opacity:1;}}
@-webkit-keyframes img3 {0% {right:-350px; opacity:0.3;} 100% {right:220px; opacity:1;}}
.banner .list li.bg2{ background:url(../images/banner1.jpg) center}
.banner .list li.bg2 .text1{ position:absolute; left:22px; top:-15px;}
.banner .list li.bg2 .text1.hover{ animation: img2_1 1.5s ease; -webkit-animation: img2_1 1.5s ease;}
.banner .list li.bg2 .text2{ position:absolute; left:0; top:-20px;}
.banner .list li.bg2 .text2.hover{ animation: img2_2 2s ease; -webkit-animation: img2_2 2s ease;}
.banner .list li.bg2 .text3{ position:absolute; left:20px; top:90px;}
.banner .list li.bg2 .text3.hover{ animation: img2_3 1.2s ease-out; -webkit-animation: img2_3 1.2s ease-out;}
.banner .list li.bg2 .text4{ position:absolute; left:262px; top:253px; transform:scale(1); -webkit-transform:scale(1);}
.banner .list li.bg2 .text4.hover{ animation: img2_4 1.7s ease-out; -webkit-animation: img2_4 1.7s ease-out;}
.banner .list li.bg2 .text5{ position:absolute; right:48px; top:95px;}
.banner .list li.bg2 .text5.hover{ animation: img2_5 1.5s ease-out; -webkit-animation: img2_5 1.5s ease-out;}
.banner .list li.bg2 .text6{ position:absolute; right:90px; top:180px;}
.banner .list li.bg2 .text6.hover{ animation: img2_6 1.8s ease-out; -webkit-animation: img2_6 1.8s ease-out;}
.banner .list li.bg2 .text7{ position:absolute; right:28px; top:235px;}
.banner .list li.bg2 .text7.hover{ animation: img2_7 2s ease-out; -webkit-animation: img2_7 2s ease-out;}
@keyframes img2_1 { 0% {transform:rotate(150deg);} 100% { transform:rotate(0deg);}}
@-webkit-keyframes img2_1 { 0% { -webkit-transform:rotate(150deg);} 100% { -webkit-transform:rotate(0deg);}}
@keyframes img2_2 { 0% {transform:rotate(280deg);} 100% { transform:rotate(0deg);}}
@-webkit-keyframes img2_2 { 0% { -webkit-transform:rotate(280deg);} 100% { -webkit-transform:rotate(0deg);}}
@keyframes img2_3 { 20%{ transform:rotateY(180deg); left:-500px;} 90% { transform:rotateY(0deg); left:20px;} 92%{ top:85px;} 94%{ top:95px;} 96%{ top:83px;} 98%{ top:97px;} 100%{ top:90px;}}
@-webkit-keyframes img2_3 { 20%{ -webkit-transform:rotateY(180deg); left:-500px;} 90% { -webkit-transform:rotateY(0deg); left:20px;} 92%{ top:85px;} 94%{ top:95px;} 96%{ top:83px;} 98%{ top:97px;} 100%{ top:90px;}}
@keyframes img2_4 {0%{ transform:scale(0);} 40%{ transform:scale(0);} 100% { transform:scale(1);}}
@-webkit-keyframes img2_4 {0%{ -webkit-transform:scale(0);} 40%{ -webkit-transform:scale(0);} 100% { -webkit-transform:scale(1);}}
@keyframes img2_5{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:48px; opacity:1;}}
@-webkit-keyframes img2_5{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:48px; opacity:1;}}
@keyframes img2_6{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:90px; opacity:1;}}
@-webkit-keyframes img2_6{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:90px; opacity:1;}}
@keyframes img2_7{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:28px; opacity:1;}}
@-webkit-keyframes img2_7{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:28px; opacity:1;}}
.banner .list li.bg3{ background:#ffc028;}
.banner .list li.bg3 .text1{ position:absolute; left:0px; top:85px; z-index:10;}
.banner .list li.bg3 .text2-1{ position:absolute; left:32px; top:131px;}
.banner .list li.bg3 .text2-2{ position:absolute; left:389px; top:0px;}
.banner .list li.bg3 .text3{ position:absolute; left:106px; top:0px;}
.banner .list li.bg3 .text4{ position:absolute; left:345px; top:162px; font-size:30px; color:#fff; text-align:center;}
.banner .list li.bg3 .text5{ position:absolute; left:99px; top:218px;}
.banner .list li.bg3 .text6{ position:absolute; left:130px; top:220px; font-size:30px; color:#e9dcff; text-align:center;}
.banner .list li.bg3 .text7{ position:absolute; left:386px; top:220px; font-size:30px; color:#e9dcff; text-align:center;}
.banner .list li.bg3 .text8{ position:absolute; left:640px; top:220px; font-size:30px; color:#e9dcff; text-align:center;}
.banner .list li.bg3 .text1.hover{ animation:img3_1 1s ease; -webkit-animation:img3_1 1s ease;}
.banner .list li.bg3 .text2-1.hover{ transform-origin:right bottom; -webkit-transform-origin:right bottom; animation:img3_2-1 30s linear; -webkit-animation:img3_2-1 30s linear;}
.banner .list li.bg3 .text2-2.hover{ transform-origin:left bottom; -webkit-transform-origin:left bottom; animation: img3_2-2 30s linear; -webkit-animation: img3_2-2 30s linear;}
.banner .list li.bg3 .text4.hover{ animation: img3_4 1.5s ease; -webkit-animation: img3_4 1.5s ease;}
.banner .list li.bg3 .text6.hover{ animation: img3_6 0.7s ease; -webkit-animation: img3_6 0.7s ease;}
.banner .list li.bg3 .text7.hover{ animation: img3_7 0.7s ease; -webkit-animation: img3_7 0.7s ease;}
.banner .list li.bg3 .text8.hover{ animation: img3_8 0.7s ease; -webkit-animation: img3_8 0.7s ease;}
@keyframes img3_1 { 0% { top:-100px;} 50%{ top:-80px;} 100% { top:85px;}}
@-webkit-keyframes img3_1 { 0% { top:-100px;} 50%{ top:-80px;} 100% { top:85px;}}
@keyframes img3_2-1 { 0% {transform:rotate(-20deg);} 10% {transform:rotate(100deg);} 20% {transform:rotate(-20deg);} 30% {transform:rotate(100deg);} 40% {transform:rotate(-20deg);} 50% {transform:rotate(100deg);} 60% {transform:rotate(-20deg);} 70% {transform:rotate(100deg);} 80% {transform:rotate(-20deg);} 90% {transform:rotate(100deg);} 100% { transform:rotate(0deg);}}
@-webkit-keyframes img3_2-1 { 0% {-webkit-transform:rotate(-20deg);} 10% {-webkit-transform:rotate(100deg);} 20% {-webkit-transform:rotate(-20deg);} 30% {-webkit-transform:rotate(100deg);} 40% {-webkit-transform:rotate(-20deg);} 50% {-webkit-transform:rotate(100deg);} 60% {-webkit-transform:rotate(-20deg);} 70% {-webkit-transform:rotate(100deg);} 80% {-webkit-transform:rotate(-20deg);} 90% {-webkit-transform:rotate(100deg);} 100% { -webkit-transform:rotate(0deg);}}
@keyframes img3_2-2 { 0% {transform:rotate(10deg);} 10% {transform:rotate(-100deg);} 20% {transform:rotate(10deg);} 30% {transform:rotate(-100deg);} 40% {transform:rotate(10deg);} 50% {transform:rotate(-100deg);} 60% {transform:rotate(10deg);} 70% {transform:rotate(-100deg);} 80% {transform:rotate(10deg);} 90% {transform:rotate(-100deg);} 100% { transform:rotate(0deg);}}
@-webkit-keyframes img3_2-2 { 0% {-webkit-transform:rotate(10deg);} 10% {-webkit-transform:rotate(-100deg);} 20% {-webkit-transform:rotate(10deg);} 30% {-webkit-transform:rotate(-100deg);} 40% {-webkit-transform:rotate(10deg);} 50% {-webkit-transform:rotate(-100deg);} 60% {-webkit-transform:rotate(10deg);} 70% {-webkit-transform:rotate(-100deg);} 80% {-webkit-transform:rotate(10deg);} 90% {-webkit-transform:rotate(-100deg);} 100% {-webkit-transform:rotate(0deg);}}
@keyframes img3_4 { 0%{ opacity:0; transform: scale(0);} 30%{ opacity:0; transform: scale(0);} 80%{ opacity:0.7; transform: scale(1.2);} 100%{ opacity:1; transform: scale(1);}}
@-webkit-keyframes img3_4 { 0%{ opacity:0; -webkit-transform: scale(0);} 30%{ opacity:0; -webkit-transform: scale(0);} 80%{ opacity:0.7; -webkit-transform: scale(1.2);} 100%{ opacity:1; -webkit-transform: scale(1);}}
@keyframes img3_6 { 0% { left:-210px;} 100% { left:130px;}}
@-webkit-keyframes img3_6 { 0% { left:-210px;} 100% { left:130px;}}
@keyframes img3_7 { 0%{ opacity:0; transform: scale(4);} 100%{ opacity:1; transform: scale(1);}}
@-webkit-keyframes img3_7 { 0%{ opacity:0; -webkit-transform: scale(4);} 100%{ opacity:1; -webkit-transform: scale(1);}}
@keyframes img3_8 { 0% { right:-210px;} 100% { right:130px;}}
@-webkit-keyframes img3_8 { 0% { right:-210px;} 100% { right:130px;}}
.banner .list li.bg4{ background:#ff7575;}
.banner .list li.bg4 .text1{ position:absolute; left:250px; top:45px; font-size:69px; color:#ffe9e9;}
.banner .list li.bg4 .text2{ overflow:hidden; width:66px; position:absolute; left:251px; top:137px;}
.banner .list li.bg4 .text3{ opacity:0; position:absolute; left:485px; top:55px;}
.banner .list li.bg4 .text4{ opacity:0; transform-origin:left bottom; -webkit-transform-origin:left bottom; position:absolute; left:500px; top:105px;}
.banner .list li.bg4 .text5{ opacity:0; position:absolute; left:508px; top:192px;}
.banner .list li.bg4 .text6{ opacity:0; transform-origin: left bottom; -webkit-transform-origin: left bottom; position:absolute; left:510px; top:230px;}
.banner .list li.bg4 .text7{ position:absolute; left:5px; bottom:40px;}
.banner .list li.bg4 .text3.hover{ animation:img4_3 1s 0.5s ease forwards; -webkit-animation:img4_3 1s 0.5s ease forwards;}
.banner .list li.bg4 .text4.hover{ animation:img4_4 1.2s 0.5s ease forwards; -webkit-animation:img4_4 1.2s 0.5s ease forwards;}
.banner .list li.bg4 .text5.hover{ animation:img4_5 1.5s 0.5s ease forwards; -webkit-animation:img4_5 1.5s 0.5s ease forwards;}
.banner .list li.bg4 .text6.hover{ animation:img4_6 0.3s 1.5s ease-out forwards; -webkit-animation:img4_6 0.3s 1.5s ease-out forwards;}
.banner .list li.bg4 .text7.hover{ animation:img4_7 0.8s ease-in; -webkit-animation:img4_7 0.8s ease-in;}
@keyframes img4_3 { 0%{ top:-100px; opacity:0;} 100%{ top:50px; opacity:1;}}
@-webkit-keyframes img4_3 { 0%{ top:-100px; opacity:0;} 100%{ top:50px; opacity:1;}}
@keyframes img4_4 { 0%{ transform:scale(0);} 100%{ transform:scale(1); opacity:1;}}
@-webkit-keyframes img4_4 { 0%{ -webkit-transform:scale(0);} 100%{ -webkit-transform:scale(1); opacity:1;}}
@keyframes img4_5 { 0%{ transform:scale(0);} 100%{ transform:scale(1); opacity:1;}}
@-webkit-keyframes img4_5 { 0%{ -webkit-transform:scale(0);} 100%{ -webkit-transform:scale(1); opacity:1;}}
@keyframes img4_6 { 0%{ transform:rotate(30deg); opacity:0;} 100%{ transform:rotate(0deg); opacity:1;}}
@-webkit-keyframes img4_6 { 0%{ -webkit-transform:rotate(30deg); opacity:0;} 100%{ -webkit-transform:rotate(0deg); opacity:1;}}
@keyframes img4_7{0%{ bottom:-300px; opacity:0;} 100%{ bottom:40px; opacity:1;}}
@-webkit-keyframes img4_7{0%{ bottom:-300px; opacity:0;} 100%{ bottom:40px; opacity:1;}}