

/*================重置样式部分===============*/
html,
body,
div,
span,
object,
iframe,
table,
tr,
th,
td,
em,
img,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
dl,
dt,
dd,
ul,
li,
ol,
form,
label,input,textarea{
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
}
body {
  color: #000;
  font-family: "微软雅黑";
  font-size: 22px;
}
img {
  border: none;
}
a {
  text-decoration: none;
}
ul,
li,ol {
  list-style-type: none;
}

em,i{ font-style:normal}
.tc{ text-align: center}
.pr{ position: relative}
.fl{ float: left}
.fr{ float: right}
.auto{margin: 0 auto}
.ov{ overflow: hidden}
.mr0{ margin-right: 0 !important;}
input,textarea{ outline: none; border: none}

.col-w{ color: #fff}

.fz30{ font-size: 30px;}

.patb30{ padding: 30px 0}
.patb50{ padding: 50px 0}
.patb60{ padding:60px 0}

.warp{ max-width: 1920px; min-width: 1300px; overflow: hidden; font-size: 20px;
  background: url(../images/bg.jpg) repeat-y center
}
.wi{ width: 1200px; position: relative; margin:0 auto;}
.warp img{ vertical-align:bottom}

.warp .ti{ text-align: center;position:relative}
.warp .ti h3{ font-weight: normal; color: #fed01f; font-size: 34px; padding: 20px 0}

.warp .btn { text-align:center}
.warp .btn a{ display: inline-block; border-radius: 50px; line-height: 45px; 
    font-size:22px; width: 175px; text-align: center;
    color: #fff;position: relative;
    animation: movement 5s infinite; -webkit-animation: movement 5s infinite;
    background: #872620; 
    -webkit-transition: .2s;-moz-transition: .2s;-ms-transition: .2s;transition: .2s;
}
.warp .btn i{ display: inline-block; vertical-align: middle; width:26px;height:26px;
  background: url(../images/gwc.png) no-repeat center #ffbe28; border-radius: 50%;
  margin-left: 10px;
}
.warp .btn a:hover{ background: #e3eaff; color: #111842}


.kv img{ width: 100%}
.kv ul li{ width: 8%;position: absolute; top:50%; left:50%;
  animation:movement 2s infinite; -webkit-animation: movement 2s infinite
}
.kv ul li:nth-child(2){ animation-delay: 0.2s; -webkit-animation-delay: 0.2s}
.kv ul li:nth-child(3){ animation-delay: 0.4s; -webkit-animation-delay: 0.4s}
.kv ul li.kv-yun1{ margin-left:-34%; margin-top:0;}
.kv ul li.kv-yun2{ margin-left: 27%;margin-top: -6%;}
.kv ul li.kv-yun3{ width: 19%;margin-left: 9%;margin-top: 18%;}
.kv .tree{ display: block; width: 25%;position: absolute;
  right:-10%; top:5%;
  animation: swing 20s infinite; -webkit-animation: swing 20s infinite;
}
.kv .kv-btn { display: block; width:10%; position: absolute; top:50%; left:50%;margin-left: 14%;margin-top: 0.5%;
  -webkit-transition: .2s; -moz-transition: .2s;-ms-transition: .2s;transition: .2s;
  animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite
}
.kv .kv-btn .kvbtn{ opacity: 0; position: absolute; top:0; left:0;}
.kv .kv-btn i{position: absolute;left: -16%;top: -16%;width: 130%;
  -webkit-animation: glow 5s ease-out infinite normal;
  animation: glow 5s ease-out infinite normal;
}
.kv .kv-btn:hover .kvbtn{ opacity: 1;}

.p1{ margin-top: -50px}
.p1::before,.p1::after,.p1 .wi::before,.p1 .wi::after{content: ""; display: block;position: absolute;  }
.p1::before{width:307px; height:223px;
   background: url(../images/niao1.png) no-repeat;left:5%; top:21%;
   animation:movement 2s infinite; -webkit-animation: movement 2s infinite
}
.p1:after{width:317px; height:83px;
   background: url(../images/yun2.png) no-repeat; left:5%; top:50%;opacity: 0.5;
   animation:movement1 2s infinite; -webkit-animation: movement1 2s infinite
}
.p1 .wi{ overflow: unset}
.p1 .wi::before{width:427px; height:480px;
  background: url(../images/niao2.png) no-repeat;right:-25%; top:21%;
  animation:movement 2s infinite; -webkit-animation: movement 2s infinite
}
.p1 .wi::after{width:773px; height:296px;
  background: url(../images/yun1.png) no-repeat;right: -46%;top: 69%;
  animation:movement1 2s infinite; -webkit-animation: movement1 2s infinite
}
.p1 .text{ line-height: 50px; color: #fff; font-size: 26px; padding:40px 280px 100px}
.p1 a{ display: block; width: 140px; height:100px; background: #be4d2d; position: relative;
  -webkit-transition: .2s; -moz-transition: .2s;-ms-transition: .2s;transition: .2s;
  border-radius: 50%; padding:50px 30px;
  animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite;
  position: absolute; left:740px; top:320px
}
.p1 a  i{ position: absolute;left:-28px;top:-28px; width:254px; height:254px;
  -webkit-animation: glow 5s ease-out infinite normal;
  animation: glow 5s ease-out infinite normal;
}
.p1 a:hover{ background: #000}

.p2 .wi{ width: 1100px; margin:0 auto;}
.p2::before{ content: ""; position: absolute; width:822px; height:197px;
  background: url(../images/yun3.png) no-repeat;left:-30%; top:50%;
  animation:movement 2s infinite; -webkit-animation: movement 2s infinite
}
.p2::after{ content: ""; position: absolute; width:437px; height:406px;
  background: url(../images/tree.png) no-repeat;right:-12%; top:87%;
  animation: swing 20s infinite;-webkit-animation: swing 20s infinite;
}
.p2 .hd { overflow: hidden; padding:60px 0}
.p2 .hd ul{ overflow: hidden; padding:0 30px; width: 1200px}
.p2 .hd li{ width:240px; height:96px; float: left; line-height: 96px; font-size: 35px; 
  background:url(../images/tab1.jpg) no-repeat; text-align: center; margin-right: 30px; 
  border-radius: 20px; overflow: hidden;}
.p2 .hd li.on{background:url(../images/tab2.jpg) no-repeat; color: #fff}
.p2 dd a{animation:movement 2s infinite; -webkit-animation: movement 2s infinite}
.p2 .list { padding:40px 0; overflow: hidden; width: 1200px}
.p2 .list dd{ float: left; position: relative;}
.p2 .list dd a{ position: absolute; bottom:30px; left:0; width: 100%; text-align: center;}
.p2 .list1 dd{ margin-right: 65px}
.p2 .list4 dd{ margin-right: 15px}


.p3{ padding:30px 0; position: relative}
.p3 .dl1::before,.p3 .dl1::after,.p3 .dl2::before,.p3 .dl3::after{content: ""; position: absolute;}
.p3 .dl1::before{width: 457px;height: 323px;
  background: url(../images/niao1.png) no-repeat; background-size:cover; left:-40%;top: -33%;
  animation: movement 2s infinite;-webkit-animation: movement 2s infinite;
}
.p3 .dl1::after{width: 317px;height: 83px;
  background: url(../images/yun2.png) no-repeat;right:-30%;top: 30%;opacity: 0.5;
  animation: movement1 2s infinite;-webkit-animation: movement1 2s infinite;
}
.p3 .dl2::before{width: 317px;height: 83px;
  background: url(../images/yun2.png) no-repeat;left:-30%;top: 50%;opacity: 0.5;
  animation: movement1 2s infinite;-webkit-animation: movement1 2s infinite;
}
.p3 .dl3::after{width: 437px;height: 406px;
  background: url(../images/tree1.png) no-repeat;left: -45%;top: 35%;
  animation: swing 20s infinite;-webkit-animation: swing 20s infinite;
}
.p3 .btn a{ background: #dd1828}
.p3 .list ul{ width: 1200px; padding-top:40px; overflow: hidden;}
.p3 .list ul li{ position: relative; float: left; margin-left: 20px}
.p3 .list ul li .btn{ position: absolute; bottom:50px; left:0; width: 100%}
.p3 dl{ text-align: center; position: relative; margin-top: 80px}
.p3 dl li{line-height: 42px}
.p3 dl li h3{ font-size: 35px}
.p3 dl li b{ font-size: 40px}
.p3 dl dt ul { position: absolute; left:188px; top:0}
.p3 dl dt ul li{ padding:60px 0 0; }
.p3 dl dt ol{ position: absolute; right:50px; top:80px}
.p3 dl dt ol li{ width: 273px; height:190px; padding:30px 0; margin-bottom: 20px; background: url(../images/bg-k1.jpg) no-repeat}
.p3 dl dd ol { padding:0 40px; overflow: hidden; width: 1300px}
.p3 dl dd ol li{ width:351px; height:197px; float: left; margin-right: 30px; padding:30px 0; background: url(../images/bg-k2.jpg) no-repeat}
.p3 dl dd ol .btn{ padding:2% 0 0}
.p3 dl dd ol li:nth-last-child(1){ margin-right: 0}
.p3 .dl2 dt ul{ right:220px; left:auto; top:100px}
.p3 .dl2 dt ol{ right:auto; left:70px; top:120px}

.p4 { padding-top:50px; position: relative}
.p4::before{content: ""; position: absolute;width:307px;height: 223px;
  background: url(../images/niao1.png) no-repeat; left:-5%;top: 5%;
  animation: movement 2s infinite;
  -webkit-animation: movement 2s infinite;
}
.p4 .zj{ padding:50px 0 0}
.p4 .bttn{ position: absolute; width: 100%; bottom:50px; left:0; text-align: center;
  animation: movement1 2s infinite; -webkit-animation: movement1 2s infinite
}
.p4 .bttn a:nth-child(even){ margin-left: 5%;}

@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-0px,0);transform:translate3d(0,-0px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
@keyframes movement {
0% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
50% {  -webkit-transform: translate(10px,0px);  transform: translate(10px,0px);  }
100% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
}
@-webkit-keyframes movement {
  0% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
  50% {  -webkit-transform: translate(10px,0px);  transform: translate(10px,0px);  }
  100% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
}
@keyframes movement1 {
0% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
50% {  -webkit-transform: translate(-10px,0px);  transform: translate(-10px,0px);  }
100% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
}
@-webkit-keyframes movement1 {
  0% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
  50% {  -webkit-transform: translate(-10px,0px);  transform: translate(-10px,0px);  }
  100% {  -webkit-transform: translate(0px,0px);  transform: translate(0px,0px);  }
}

@-webkit-keyframes glow {
  0% {
    opacity: 1;
    -webkit-filter:drop-shadow(0 0 20px #fff);
    filter:drop-shadow(0 0 20px #fff);
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    opacity: 0.5;
    -webkit-filter:drop-shadow(0 0 50px #fff);
    filter:drop-shadow(0 0 50px #fff);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes glow {
  0% {
    opacity: 1;
    -webkit-filter:drop-shadow(0 0 20px #fff);
    filter:drop-shadow(0 0 20px #fff);
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    opacity: 0.5;
    -webkit-filter:drop-shadow(0 0 50px #fff);
    filter:drop-shadow(0 0 50px #fff);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
