﻿@charset "utf-8";
*{
	padding:0;
	margin:0;
}
.w200{width:200px;}
@media only screen and (max-width: 576px){
.headtop .swiper-container{
	height:240px;
}
	.headtop .inner{
	position:relative;
	display:block;
	width:100%;
	height:240px;
	margin:0 auto;
}
.headtop	.pagination {
  position: absolute;
  left: 40%;
  text-align: center;
  bottom:5px;
  width: 100%;
	z-index: 100;
}
.t1,.t2,.t3,.t4,.t5{left: 10%;top: 120px;font-size:36px;max-width: 80%}

}
@media only screen and (min-width: 576px) and (max-width: 768px){
.headtop .swiper-container{
	height:320px;
}	
	.headtop  .inner{
	position:relative;
	display:block;
	width:100%;
	height:320px;
	margin:0 auto;
}	.t1,.t2,.t3,.t4,.t5{left: 50%;max-width: 80%}
.pagination {
  position: absolute;
  left: 42%;
  text-align: center;
  bottom:5px;
  width: 100%;
	z-index: 100;
}}
@media only screen and (min-width: 768px) {
.headtop.swiper-container{
	height:600px;
}
.inner{
	position:relative;
	display:block;
	width:100%;
	height:600px;
	margin:0 auto;
}
.t1{left: 20%;top: 25%;font-size:36px;}
.t2{left: 50%;margin-left: -44px; top: 100px;font-size:36px;}
.t3{left: 50%;margin-left: -184px; top: 250px;font-size:36px;}
.t4{left: 50%;margin-left: -184px; top: 150px;font-size:36px;}
.t5{left: 50%;margin-left: 84px; top: 150px;font-size:36px;}
.headtop .pagination {
  position: absolute;
  left: 48%;
  text-align: center;
  bottom:5px;
  width: 100%;
	z-index: 100;
}
}
.sarrow-left {
  background: url(../images/arrows.png) no-repeat left top;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index:10;
}
.sarrow-right {
  background: url(../images/arrows.png) no-repeat left bottom;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index:10;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #222;
  margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #cc0000;
}
.headtop .swiper-wrapper .swiper-slide{
	position:relative;
	opacity:0;
	transition: opacity 0.7s ease-in-out;
	background-size: cover!important;
}
.headtop .swiper-wrapper .swiper-slide-active{
	opacity:1;
}
.swiper-slide .img{
	position:absolute;
}

.slide1{
	background-color: #03c36b;
}
.slide2{
	background-color: #1284d0;
}
.slide3{
	background-color: #43cfc8;
}


.s0{left: 50%;margin-left: -184px; top: 150px;font-size:36px;}
.s1{left: 50%;margin-left: -425.5px;top: 200px;}
.slide1 .s2{left: 50%;margin-left: -435px;top: 280px}
.slide1 .s3{left: 0;bottom: 0px;z-index: 5;height:190px}
.slide1 .s4{right: 0;bottom: 0px;z-index: 0;height: 160px}
.slide2 .zh-a-1{left: 60px;top: 77px;z-index: 9;}
.slide2 .zh-a-2{left: 0;top: 0;}
.slide3 .b-1 {right: 72px;top: 180px;}
.slide3 .b-2 {left: 90px;top: 180px;}
.slide3 .b-3 {left: 50%;margin-left: -381px;top: 330px;}
.slide3 .b-s-1 {width: 100px; left: 50px; bottom:0px;}
.slide3 .b-s-2 {left: 160px;width: 160px;bottom:0px;}
.slide3 .b-s-3{left: 390px;width: 58px;bottom:0px;}
.slide3 .b-s-4{right: 359px; width: 103px;bottom:0px;}
.slide3 .b-s-5{right: 250px;width: 150px;bottom:0px;}
.slide3 .b-s-6{right: 0;width: 65px;bottom:0px;}
.slide3 .b-y-1 {top:40px;left: 50%; margin-left: -20px;}
.slide3 .b-y-2{top:40px;left:0}
.slide3 .b-y-3{top:40px;right: 0}
.loop{
	animation-iteration-count: infinite;/*无限*/
	animation-timing-function:linear;/*平滑*/
}
.targetBtn {
    margin-top: 20px;
    position: absolute;
    bottom: 60px;
    left: 352px;
    z-index: 999;
}
.targetBtn a{
	height:50px;
	border-radius:50px;
	background:rgba(0,0,0,.5);
	float:left;
	line-height:50px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	}
.targetBtn .a1{
	width:110px;
	}
.targetBtn .a2{
	width:170px;
	margin-left:15px;
	}	
/*自定义CSS动画*/
.moveRight{-webkit-animation-name:moveRight;animation-name:moveRight}
@-webkit-keyframes moveRight{0%{opacity: 0;left:0px;}
10%{opacity: 1;}
100%{opacity: 1;left:550px;}}
@keyframes moveRight{0%{opacity: 0;left:0px;}
10%{opacity: 1;}
100%{opacity: 1;left:550px;}}

.moveLeft{-webkit-animation-name:moveLeft;animation-name:moveLeft}
@-webkit-keyframes moveLeft{0%{opacity:0;left:390px;}
10%{opacity:1;}
100%{opacity:1;left:-370px;}}
@keyframes moveLeft{0%{opacity:0;left:390px;}
10%{opacity:1;}
100%{opacity:1;left:-370px;}}


*, *:after, *:before {
  box-sizing: border-box;
}
.menubg{background: #cc0000}
.animenu__toggle {
  display: none;
  cursor: pointer;
  background-color: #990000;
  border: 0;
  padding: 10px;
  height: 40px;
  width: 40px;
}
.animenu__toggle:hover {
  background-color: #990000;
}

.animenu__toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  -webkit-transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
  -o-transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
  transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
}
.animenu__toggle__bar + .animenu__toggle__bar {
  margin-top: 4px;
}

.animenu__toggle--active .animenu__toggle__bar {
  margin: 0;
  position: absolute;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
  opacity: 0;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animenu {
  display: block;
}
.animenu ul {max-width: 1220px;
	margin: 0 auto;
  padding: 0;
  list-style: none;
  font: 0px 'Open Sans', Arial, Helvetica;
}
.animenu li, .animenu a {
  display: inline-block;
  font-size: 15px;
}
.animenu a {
  color: #ffffff;
  text-decoration: none;
}

.animenu__nav {
  background-color: #cc0000;
}
.animenu__nav > li {
  position: relative;
  border-right: 1px solid #990000;
}
.animenu__nav > li > a {
  padding: 15px 19px;
  text-transform: uppercase;
}
.animenu__nav > li > a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top-color: currentColor;
  top: 50%;
  margin-top: -2px;
  right: 10px;
}
.animenu__nav > li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.animenu__nav > li:hover > a {
  color: #fff;
}

.animenu__nav__child {
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  opacity: 0;
  visibility: hidden;
  margin: 20px 0 0 0;
  background-color: #990000;
  transition: margin .15s, opacity .15s;
}
.animenu__nav__child > li {
  width: 100%;
  border-bottom: 1px solid #660000;
}
.animenu__nav__child > li:first-child > a:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  left: 1em;
  top: -6px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: inherit;
}
.animenu__nav__child > li:last-child {
  border: 0;
}
.animenu__nav__child a {
  padding: 10px;
  width: 100%;
  border-color: #373737;
}
.animenu__nav__child a:hover {
  background-color: #cc0000;
  border-color: #990000;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .animenu__toggle {
    display: inline-block;
  }

  .animenu__nav,
  .animenu__nav__child {
    display: none;
  }

  .animenu__nav {
    margin: 10px 0;
  }
  .animenu__nav > li {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #515151;
  }
  .animenu__nav > li:last-child {
    border: 0;
  }
  .animenu__nav > li:first-child > a:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: 1em;
    top: -6px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: inherit;
  }
  .animenu__nav > li > a {
    width: 100%;
    padding: 10px;
    border-color: #111;
    position: relative;
  }
  .animenu__nav a:hover {
    background-color: #990000;
    border-color: #660000;
    color: #fff;
  }

  .animenu__nav__child {
    position: static;
    background-color: #990000;
    margin: 0;
    transition: none;
    visibility: visible;
    opacity: 1;
  }
  .animenu__nav__child > li:first-child > a:after {
    content: none;
  }
  .animenu__nav__child a {
    padding-left: 20px;
    width: 100%;
  }
}
.animenu__nav--open {
  display: block !important;
}
.animenu__nav--open .animenu__nav__child {
  display: block;
}