@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:730px; position:relative;z-index:10}
.banner .list{ width:100%; height:730px; overflow:hidden; position:relative; z-index:1;}
.banner .list li{ width:100%; height:730px; position:absolute; left:0px; top:0px; display:none;}
.banner .list li a{ width:1920px; margin:0 auto; position:relative; display:block; overflow:hidden; height:730px;}
.banner .list li a:hover{ text-decoration:none;}

.banner .btn{ position:absolute; bottom:30px; left:50%; margin-left:-120px; z-index:10000;}
.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:#0ecbc9;}
.banner .list li.bg2 .text1{ position:absolute; left:0px; top:20px;}
.banner .list li.bg2 .text1.hover{ animation: img2_1 1.2s ease-out; -webkit-animation: img2_1 1.2s ease-out;}
.banner .list li.bg2 .text2{ position:absolute; left:410px; top:120px;}
.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:430px; bottom:100px; transform:scale(1); -webkit-transform:scale(1);}
.banner .list li.bg2 .text3.hover{ animation: img2_3 1.7s ease-out; -webkit-animation: img2_3 1.7s ease-out;}
.banner .list li.bg2 .text4{ position:absolute; right:0px; top:0px;}
.banner .list li.bg2 .text4.hover{ animation: img2_4 1.5s ease-out; -webkit-animation: img2_4 1.5s ease-out;}

@keyframes img2_1{0%{left:-400px;}  50%{left:-400px; opacity:0.3;} 100% {left:0px; opacity:1;}}
@-webkit-keyframes img2_1{0%{left:-400px;}  50%{left:-400px; opacity:0.3;} 100% {left:0px; opacity:1;}}
@keyframes img2_2{0%{top:-110px;}  50%{top:-110px; opacity:0.3;} 100% {top:120px; opacity:1;}}
@-webkit-keyframes img2_2{0%{top:-110px;}  50%{top:-110px; opacity:0.3;} 100% {top:120px; opacity:1;}}
@keyframes img2_3 {0%{ transform:scale(0);} 40%{ transform:scale(0);} 100% { transform:scale(1);}}
@-webkit-keyframes img2_3 {0%{ -webkit-transform:scale(0);} 40%{ -webkit-transform:scale(0);} 100% { -webkit-transform:scale(1);}}
@keyframes img2_4{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:0px; opacity:1;}}
@-webkit-keyframes img2_4{0%{right:-400px;}  50%{right:-400px; opacity:0.3;} 100% {right:0px; opacity:1;}}

.banner .list li.bg3{ background:#ffc028;}
.banner .list li.bg3 .text1{ position:absolute; left:360px; top:85px;;}
.banner .list li.bg3 .text1.hover{ animation:img3_1 1s ease; -webkit-animation:img3_1 1s ease;}
.banner .list li.bg3 .text2{ position:absolute; right:0px; top:50px;}
.banner .list li.bg3 .text2.hover{ animation: img3_2 1s ease; -webkit-animation: img3_2 1s ease;}

@keyframes img3_1 { 0% { left:-300px;} 50%{ left:-100px;} 100% { left:360px; opacity:1;}}
@-webkit-keyframes img3_1 { 0% { left:-300px;} 50%{ left:-100px;} 100% { left:360px; opacity:1;}}
@keyframes img3_2 { 0% { right:-1300px;} 50%{ right:-500px;} 100% { right:0px; opacity:1;}}
@-webkit-keyframes img3_2 { 0% { right:-1300px;} 50%{ right:-500px;} 100% { right:0px; opacity:1;}}


.banner .list li.bg4{ background:#ff7575;}
.banner .list li.bg4 .text1{ position:absolute; left:400px; top:195px;}
.banner .list li.bg4 .text1.hover{ animation: img4_1 1.2s ease-out; -webkit-animation: img4_1 1.2s ease-out;}
.banner .list li.bg4 .text2{ position:absolute; left:385px; top:450px;}
.banner .list li.bg4 .text2.hover{ animation: img4_2 1.2s ease-out; -webkit-animation: img4_2 1.2s ease-out;}
.banner .list li.bg4 .text3{ position:absolute; right:150px; top:50px;}
.banner .list li.bg4 .text3.hover{ animation: img4_3 1.2s ease-out; -webkit-animation: img4_3 1.2s ease-out;}


@keyframes img4_1 { 0% { top:-400px;} 50%{ top:-100px;} 100% { top:195px; opacity:1;}}
@-webkit-keyframes img4_1 { 0% { top:-400px;} 50%{ top:-100px;} 100% { top:195px; opacity:1;}}
@keyframes img4_2 { 0% { left:-450px;} 50%{ left:0px;} 100% { left:385px; opacity:1;}}
@-webkit-keyframes img4_2 { 0% { left:-450px;} 50%{ left:0px;} 100% { left:385px; opacity:1;}}
@keyframes img4_3 { 0% { right:-850px;} 50%{ right:-100px;} 100% { right:150px; opacity:1;}}
@-webkit-keyframes img4_2 { 0% { left:-850px;} 50%{ right:-100px;} 100% { right:150px; opacity:1;}}