@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0}
header{width:100%;float:left;}
nav{width:100%;float:left;}
footer{width:100%;float:left;}
body {-webkit-text-size-adjust:none;background:#fff;font-family:"微软雅黑",Arial;font-style: normal;font-weight: normal;font-variant: normal;}
a {text-decoration: none; border: 0px none; outline: 0px none;} 
a:link{ text-decoration: none}
a:visited{ text-decoration: none}
a:hover{text-decoration: none}
a:active{text-decoration: none}
.clear {margin: 0px;padding: 0px;clear: both;}
.clearfix:after{content:' ';display:block;clear:both;height:0;visibility:hidden}
ul,li,dt,dl,dd{	list-style-type: none;	margin: 0px; padding: 0px; background:none;}
p {	margin: 0px; padding: 0px;}
img{ width:100%; }

.fl{float:left;}
.fr{float:right;}

.toutu{width:100%; position:relative; z-index:2;}
.toutu i{display:block;width:26%; position:absolute; left:70%; top:65%;animation: showh 1s .2s linear both infinite;}

.con1{width:100%; margin:0 auto; background:#f0c9ef; padding:1px 0;}
.con1 .tips{width:94%; margin:5% auto; position:relative;}
.con1 .tips p{font-size:.32rem;color:#454545; width:67%; position:absolute;left:30%;top:53%;}

.clickbtn{display:block;width:72%; margin:7% auto; position:relative;}
.clickbtn p{width:100%;font-size:.42rem; color:#fff; text-align:center; position:absolute; left:0; top:21%;}
.clickbtn p span{color:#ffed22;}
.clickbtn i{display:block;width:12%; position:absolute; right:-5%;top:40%;animation: ftimg 2s 0s ease both infinite;}

.c1ul{width:96%; margin:5% auto;}
.c1ul li{width:47%;height:3.33rem;float:left; margin-left:2%; margin-bottom:2%; background:#fff; border-radius:.2rem; overflow:hidden;}
.c1ul li .bt{ background:#71369e; color:#fff; font-size:.38rem; font-weight:600; text-align:center; height:.6rem; line-height:.6rem;}
.c1ul li .bt.other{font-size:.32rem;}
.c1ul li .img{width:70%; margin:2% auto;}
.c1ul li p{font-size:.32rem; color:#434343; padding:0 5%;}

.con1 .img1{width:95%; margin:5% auto; position:relative;}
.con1 .img1 p{font-size:.32rem; color:#383838; width:90%; position:absolute; left:7%; bottom:5%;}

.con1 .img2{width:93%; margin:5% auto; position:relative;}
.con1 .img2 p{font-size:.32rem; color:#383838; width:70%; position:absolute; left:27%; bottom:14%;}




.con2{width:100%; margin:0 auto; background: url(../images/bg-repeat.png) repeat-y; background-size:100%;}

.con2 .tt {width:61%;margin:0 auto;}

.c2ul{width:95%; margin:5% auto;}
.c2ul li{width:50%;float:left;}
.c2ul li p{font-size:.32rem;color:#292929; width:90%; margin:2% 0 2% 10%;}
.c2ul li p span{color:#cb98d5;font-weight:600;}
.c2ul li p span.o{color:#77329e;}

.qmimg1{width:55%;margin:7% auto 0;animation: bounce2 1.5s 0s ease both infinite;}
.qmimg2{width:66%;margin:7% auto 0;animation: bounce2 1.5s 0s ease both infinite;}
.qmimg3{width:66%;margin:7% auto 0;animation: bounce2 1.5s 0s ease both infinite;}
.qmimg4{width:57%;margin:7% auto 0;animation: bounce2 1.5s 0s ease both infinite;}
.qmimg5{width:66%;margin:1% auto;animation: bounce2 1.5s 0s ease both infinite;}



.vs{width:92%; margin:2% auto 5%; position:relative;}
.vs p{font-size:.32rem;color:#fff;}
.vs p.p1{ position:absolute; width:40%; right:3%; top:7%;}
.vs p.p2{ position:absolute; width:36%; left:3%; bottom:10%;}

.case{width:100%; margin:0 auto;}



.con3{width:100%; margin:0 auto; background:#f0c9ef; padding-top:1px;}
.con3 .tips{width:94%; margin:5% auto 0; position:relative;}
.con3 .tips p{width:90%; position:absolute; left:7%;top:31%; font-size:.32rem; color:#252525;}
.con3 .tips p span{font-size:.37rem;color:#f36861;}
.con3 .tips p.s{top:27%;}
.ysimg{width:100%; position:relative;}


.con4{width:100%; margin:0 auto; background: url(../images/bg-repeat.png) repeat-y; background-size:100%; padding:1px 0;}

.cp1{width:95%; margin:0 auto; background:#fff; padding:5% 0; border:.03rem solid #7a2db1; border-radius:.2rem;}
.cp1 .img{width:23%;float:left; margin-left:3%;}
.cp1 ul{float:left; margin-left:5%;}
.cp1 ul li{font-size:.32rem; color:#434343; overflow:hidden;}
.cp1 ul li span{color:#7a2db1;float:left;}
.cp1 ul li p{float:left;}
.cp1 ul li p sup{font-size:.2rem;}

.cp2{width:95%; margin:5% auto; background:#fff; padding:3% 0; border:.03rem solid #7a2db1; border-radius:.2rem;}
.cp2 .img{width:30%;float:right; margin-right:3%;}
.cp2 dl{float:left; margin-left:3%; margin-top:6%;font-size:.32rem;}
.cp2 dl dt{color:#7a2db1;}
.cp2 dl dd{color:#434343;}

.cp3{width:95%; margin:5% auto; background:#fff; padding:3% 0; border:.03rem solid #7a2db1; border-radius:.2rem;}
.cp3 .img{width:45%;float:left; margin-left:3%;}
.cp3 p{float:left; margin-top:3%;font-size:.32rem;color:#7a2db1;}

.chengnuo{width:88%; margin:5% auto 7%; font-size:.35rem; color:#1e1e1e;}
.chengnuo span{font-size:.4rem; display:inline-block; background:#d352ce; color:#fff; padding:.1em .5em; font-weight:600;}

#caseswiper .swiper-pagination-bullet-active{ background:#f36861;}
@keyframes rotate {
0% {
    transform: translateY(-2px);
}
50% {
    transform: translateY(2px);
}
100% {
    transform: translateY(-2px);
}
}
@keyframes ftimg{
	0%{-webkit-transform:scale(1)}
	50%{-webkit-transform:scale(1.1)}
	100%{-webkit-transform:scale(1)}
}
@keyframes updown{
	0%{opacity:1;transform:translateY(0)}
	50%{opacity:1;transform:translateY(-10px)}
	100%{opacity:1;transform:translateY(0px)}
}
@keyframes showb{
    0%,100%,20%,50%,80% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px)
    }
    60% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px)
    }
}
@keyframes showh{
0% {opacity:1;}
49% {opacity:1;}
50% {opacity:0;}
100% {opacity: 0;}
}

@-webkit-keyframes bounce2 {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -7px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes bounce2 {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -7px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -2px, 0);
  }
}