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

.banner .btn{ position:absolute; bottom:-10vw; left:50%; margin-left:-25vw; z-index:10;}
.banner .btn li{ margin-left: 3vw; background: #fff; text-indent: -999em; float: left; width: 3vw; height: 3vw; 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:5vw; top:8vw;}
.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; right:0; top:20vw;}
.banner .list li.bg2 .text2.hover{ animation: img2_2 2s ease; -webkit-animation: img2_2 2s ease;}

@keyframes img2_1{0%{left:-400px;}  50%{left:-400px; opacity:0.3;} 100% {left:5vw; opacity:1;}}
@-webkit-keyframes img2_1{0%{left:-400px;}  50%{left:-400px; opacity:0.3;} 100% {left:5vw; opacity:1;}}
@keyframes img2_2{0%{right:-640px;}  50%{right:-640px; opacity:0.3;} 100% {right:0; opacity:1;}}
@-webkit-keyframes img2_2{0%{right:-640px;}  50%{right:-640px; opacity:0.3;} 100% {right:0; opacity:1;}}


.banner .list li.bg3{ background:#ffc028;}
.banner .list li.bg3 .text1{ position:absolute; left:5vw; top:5vw;;}
.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:0;}
.banner .list li.bg3 .text2.hover{ animation: img3_2 1s ease; -webkit-animation: img3_2 1s ease;}

@keyframes img3_1 { 0% { left:-400px;} 50%{ left:-400px;} 100% { left:5vw; opacity:1;}}
@-webkit-keyframes img3_1 { 0% { left:-400px;} 50%{ left:-400px;} 100% { left:10vw; opacity:1;}}
@keyframes img3_2 { 0% { right:-400px;} 50%{ right:-400px;} 100% { right:0px; opacity:1;}}
@-webkit-keyframes img3_2 { 0% { right:-400px;} 50%{ right:-400px;} 100% { right:0px; opacity:1;}}


.banner .list li.bg4{ background:#ff7575;}
.banner .list li.bg4 .text1{ position:absolute; left:0; top:10vw;}
.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:0; bottom:0;}
.banner .list li.bg4 .text2.hover{ animation: img4_2 1.2s ease-out; -webkit-animation: img4_2 1.2s ease-out;}


@keyframes img4_1 { 0% { top:-400px;} 50%{ top:-400px;} 100% { top:10vw; opacity:1;}}
@-webkit-keyframes img4_1 { 0% { top:-400px;} 50%{ top:-400px;} 100% { top:10vw; opacity:1;}}
@keyframes img4_2 { 0% { bottom:-800px;} 50%{ bottom:0px;} 100% { bottom:0; opacity:1;}}
@-webkit-keyframes img4_2 { 0% { bottom:-800px;} 50%{ bottom:0px;} 100% { bottom:0; opacity:1;}}