/*================重置样式部分===============*/
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 {
  border: 0 none;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
}
body {
  color: #000;
  font-family: "微软雅黑";
  font-size: 18px;
}
input,
select {
  font-size: 12px;
  line-height: 16px;
}
img {
  border: none;
  display: block;
}
a {
  text-decoration: none;
}
ul,
li,ol {
  list-style-type: none;
}

em,i{ font-style:normal}
.tc{ text-align: center}
.line28{line-height: 28px}
.line30{line-height: 30px}
.line35{line-height: 35px}
.line40{line-height: 40px}
.pr{ position: relative}
.fl{ float: left}
.fr{ float: right}
.auto{margin: 0 auto}
.ov{ overflow: hidden}
.mr0{ margin-right: 0 !important;}
.dsib{ display: inline-block}

input{ outline: none}

.pat30{ padding-top: 30px}
.patb20{ padding: 20px 0}
.patb30{ padding: 30px 0}
.patb50{ padding: 50px 0}


.warp{ max-width: 1920px; min-width: 1300px; overflow: hidden; font-size: 20px;}
.wi{ width: 1200px; position: relative; margin:0 auto;}

.warp .ti{ text-align: center}
.warp .ti h3{ font-weight: normal; font-size: 45px; color: #bd5dff}
.warp .ti h3::before,.warp .ti h3::after{ content: ""; display: inline-block; vertical-align: middle; 
  width:97px; height:64px; background: url(../images/bf.png) no-repeat; margin:0 10px}
.warp .ti h3::after{ width: 72px; height:60px; background: url(../images/af.png) no-repeat}
.warp .ti p{ font-size: 52px}

.btn { text-align: center}
.btn a{ display: inline-block; background: #e258fb; font-size: 39px; padding: 5px 20px; border-radius: 50px; color: #fff;
  animation: heartBeat 2s infinite; -webkit-animation: heartBeat 2s infinite;
}

.kv { height:781px; background: url(../images/kv.jpg) no-repeat top center}
.kv a{ width: 183px; display: block;position: absolute; top:50%; left:50%; margin-left: 10%; margin-top: 3%;
  animation: heartBeat 2s infinite; -webkit-animation: heartBeat 2s infinite; z-index: 2
}

.warp .animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.p1{ background: #beaffa; position: relative;}
.p1::before{ content: ""; display: block; width:549px; height:144px; background: url(../images/p1-af.png) no-repeat;
  position: absolute; top:-180px; left:150px; z-index: 2
}
.p1 dl{ background: #fff; padding: 50px; width: 1100px; margin:0 auto; 
  border-radius: 20px; position: absolute; top:-94px; left:0; right:0}
.p1 dl .ti{ width:820px; position: relative; z-index: 2}
.p1 dl dt{ position: relative; z-index: 2}
.p1 dl dt p{ display: block; width: 580px; padding-left: 20px}
.p1 ul { overflow: hidden; padding-bottom: 30px}
.p1 ul li{ padding: 19.6px 0; line-height: 32px;}
.p1 ul li b{ color: #a476f0; font-size: 25px; line-height: 50px}
.p1 .list{ overflow: hidden;}
.p1 .list span{ display: block; width: 300px; padding: 10px; background: #8f7af1; 
  background: -webkit-linear-gradient(left, #8b7bf0 , #ab74f5);
  background: -o-linear-gradient(right, #8b7bf0 , #ab74f5);
  background: -moz-linear-gradient(right, #8b7bf0 , #ab74f5);
  background: linear-gradient(to right,#8b7bf0 , #ab74f5); 
  border-radius: 10px; overflow: hidden; font-size: 22px; color: #fff; float: left; margin-right: 10px}
.p1 .list img{ float: left; margin-right: 10px}
.p1 .list h3{ font-size: 40px; padding: 10px 0}
.p1 .list i{ color: #fefb00;}
.p1 dd{ position: absolute; top:-27px; right:0}
.p1 .text{ padding-left: 120px}
.p1 .btn{ padding-top: 900px }

.Add{ background: url(../images/bgadd.jpg) repeat}
.Add ul li{ display: inline-block; margin-right: 10px}
.Add ul li i{ color: #e854a4;}
.Add ul li label{ font-size: 26px; margin: 0 10px}
.Add ul li input{ line-height:60px; height:60px; border: 1px solid #d5d5d5; padding: 0 10px; 
  font-size: 22px; border-radius: 5px; width: 230px}
.Add ul li input::placeholder{ color: #c9c9c9}
.Add ul li input::-webkit-placeholder{ color: #c9c9c9}
.Add .btn a{ padding: 5px 50px}

.p2{ background: url(../images/bg.jpg) repeat}
.p2 ul { overflow: hidden; padding: 0 30px}
.p2 ul li{ width: 234px; float: left; text-align: center; font-size:24px; border-radius: 200px; padding: 15px; margin-right: 25px}
.p2 ul li:nth-child(odd){ background: #9880f6}
.p2 ul li:nth-child(even){ margin-top: 30px;background: #663cf9}
.p2 ul li:nth-last-child(1){ margin-right: 0}
.p2 ul li img{ display: inline-block; border-radius: 50%; overflow: hidden; width: 234px; height:234px;}
.p2 ul li span{ display: block; height: 100px; position: relative; color: #fff; padding: 30px 0; line-height: 35px}
.p2 ul li p{display: block; position: absolute; left: 0; top: 50%; right: 0; margin: 0 auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

.p3{ background:url(../images/line1.jpg) no-repeat bottom center #ccc0fb; padding: 30px 0}
.p3 .ti h3,.p3 .ti p{ color: #663cf9}

.p4 ul li { background:#ac83fe; border-radius: 20px; overflow: hidden;}
.p4 ul li .db{ padding: 30px 30px 60px}
.p4 ul li .pic{ display: inline-block}
.p4 ul li span{ display: block; width: 375px; float: right; color: #fff;}
.p4 ul li span h3{ font-size: 35px; padding-bottom: 20px}
.p4 ul li span i{ margin-left: 20px}
.p4 ul li span p{ line-height: 35px; padding: 5px 0}
.p4 ul li span em{ display: inline-block; background: #e857fb; border-radius: 30px; padding: 0 20px; margin-right: 10px}
.p4 ul li span small{ display:block; width: 229px; margin:0 auto;}
.p4 .hd { text-align: center; position: absolute; bottom:20px; left:0; width: 100%}
.p4 .hd li{ display: inline-block; vertical-align: middle; width:70px; height:10px; background: #fff; border-radius: 10px; 
  text-indent: 999px; margin-right:5px}
.p4 .hd li.on{ background: #ccc0fb}

.p5 { height:940px; background: url(../images/bg5.jpg) no-repeat top center; position: relative}
.p5 span{ font-size: 35px; color: #fff; display: block; width: 360px; text-align: center; line-height: 60px;
  position: absolute; left:50%; top:50%; margin-top: -15%; margin-left: 5%}
.p5 a{ width: 183px; display: block;position: absolute; top:50%; left:50%; margin-left: -24%; margin-top: 54%;
  animation: heartBeat 2s infinite; -webkit-animation: heartBeat 2s infinite; z-index: 2
}

@keyframes fadeInUp{
  0% {opacity: 0;-webkit-transform: translate3d(0,40%,0);transform: translate3d(0,40%,0);}
  100% { opacity: 1;-webkit-transform: none;transform: none;}
}
@-webkit-keyframes fadeInUp{
  0% {opacity: 0;-webkit-transform: translate3d(0,40%,0);transform: translate3d(0,40%,0);}
  100% { opacity: 1;-webkit-transform: none;transform: none;}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(0.9);transform:scale(0.9)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(0.9);transform:scale(0.9)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(0.9);transform:scale(0.9)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(0.9);transform:scale(0.9)}70%{-webkit-transform:scale(1);transform:scale(1)}}