@charset "utf-8";
/* CSS Document */
/*初始化*/
*{-webkit-tap-highlight-color: transparent;-webkit-appearance: none;margin: 0;padding:0;font-size: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a {text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);}
html {height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
img {-ms-interpolation-mode: bicubic;vertical-align: middle;border:0px;max-width:100%;height:auto;padding:0;margin:0;}
th, td, caption {vertical-align: middle;}
input, button, select, textarea {outline: none;border-radius: 0;margin:0; padding:0;}
ol,ul {list-style: none;}
i{font-style: normal;}

/*样式*/
body{min-width:320px;max-width:640px;margin:0 auto;font: 14px/1.4 "微软雅黑", "宋体",arial, Verdana;text-align:justify; text-justify:inter-ideograph;}
.uclick{display: block;width: 65%;margin: 4% auto;text-align: center;position: relative;padding: 1%;border-radius: 38px;color: #000;font-size: 24px;}
.uclick p{position: absolute;top: 25%;left: 0%;right: 0%;margin: 0 auto;}
.uclick p img{vertical-align: -3px;width: 6.6%;position: absolute;right: 5%;top: 15%;}
.shou{position: absolute;top: 57%;right: -2%;z-index: 9; width: 13%;}
.shou,.r3pic{-webkit-animation:fadeInRight 2s .2s ease both infinite;-moz-animation:fadeInRight 2s .2s ease both infinite;-o-animation:fadeInRight 2s .2s ease both infinite;-ms-animation:fadeInRight 2s .2s ease both infinite;}
@-webkit-keyframes fadeInRight{
	0%{opacity:0;
	-webkit-transform:translateX(10px)}
	100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
	0%{opacity:0;
	-moz-transform:translateX(10px)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRight{
	0%{opacity:0;
	-ms-transform:translateX(10px)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
@-o-keyframes fadeInRight{
	0%{opacity:0;
	-o-transform:translateX(10px)}
	100%{opacity:1;
	-o-transform:translateX(0)}
}

.banneryop{position: relative;}
.clickpng{position: absolute;top: 75%;left: 12%;width: 29.6%;display: block;height: 8.5%;z-index: 9;}
.r3pic{position: absolute;top: 59%;right: 8%;width: 8%;z-index: 9;}
.pppng{position: absolute;top: 58%;left: 24%;}

.magic{position: absolute;top: 25.7%;left: 3.7%;width: 17%;z-index: 9;}
.magic img{position: absolute;top: 0%;left: 0%;z-index: 9;}
.xxpng{position: absolute;top: 13%;left: 29.8%;width: 24%;z-index: 9;}
.r1pic{position: absolute;top: 54.5%;left: 13%;width: 3.5%;z-index: 9;}
.r2pic{position: absolute;top: 54%;left: 34.5%;width: 7.6%;z-index: 9;}
.r4pic{position: absolute;bottom: 0%;right: 7%;width: 16%;z-index: 9;}
.r5pic{position: absolute;bottom: 3%;right: 0%;width: 16%;z-index: 9;}

.box_p1{padding-bottom: 15%;}
.pic01{position: relative;}
.picdt{position: absolute;top: 84%;color: #54535d;font-size: 20px;left: 0%;right: 0%;margin: auto;text-align: center;}
.picdt b{color: #6c3db6;}
.picdt .tpo{font-size: 15px;color: #54535d;}

.box_p2{padding-bottom: 8%;}
.kyj{margin: 5% 0%;position: relative;}
.kyj span{color: #6d38bf;font-size: 23px;position: absolute;font-weight: bold;}
.kyj span.tp1{top: 2%;left: 42%;}
.kyj span.tp2{top: 32%;left: 10%;}
.kyj span.tp3{top: 60%;left: 10%;}
.kyj span.tp4{top: 89%;left: 43%;}
.kyj span.tp5{top: 32%;left: 74%;}
.kyj span.tp6{top: 60%;left: 73%;}

.box_p3{padding-bottom: 2%;}
.picwrap{background:#e2d7f2;}
.pic02{width: 83%;margin: 0 auto;position: relative;}
.pic02 span{color: #524e5f;font-size: 17px;position: absolute;}
.pic02 span.typ1{top: 24%;left: 11%;transform: rotate(-4deg);}
.pic02 span.typ2{top: 56.5%;left: 6%;transform: rotate(4deg);}
.pic02 span.typ3{top: 89.5%;left: 11%;transform: rotate(4deg);}
.pic02 span.typo{color: #6d38bf;text-align: center;}
.pic02 span.typ4{top: 23%;left: 59%;transform: rotate(6deg);}
.pic02 span.typ5{top: 56%;left: 57%;transform: rotate(-2deg);width: 36%;}
.pic02 span.typ6{top: 89%;left: 57%;transform: rotate(-2deg);width: 36%;}
.backp{position: relative;}
.backp .uclick{position: absolute;top: 0%;left: 0%;right: 0%;margin: auto;}

.box_p4{padding-bottom: 4%;}

.box_p5{padding-bottom: 2%;}
.box_p5 .picwrap{background: #f0f0f0;}
.box_p5 .backp .uclick{top: 10%;}

.box_p6{margin-bottom: 12%;}

.r2pic{-webkit-animation:flasth 3s .2s ease both infinite;-moz-animation:flasth 3s .2s ease both infinite;-ms-animation:flasth 3s .2s ease both infinite;-o-animation:flasth 3s .2s ease both infinite;}
@-webkit-keyframes flasth{
	0%,50%,100%{opacity: 1;}
	25%,75%{opacity: 0;}
}
@-moz-keyframes flash{
	0%,50%,100%{opacity: 1;}
	25%,75%{opacity: 0;}
}
@-ms-keyframes flash{
	0%,50%,100%{opacity: 1;}
	25%,75%{opacity: 0;}
}
@-o-keyframes flash{
	0%,50%,100%{opacity: 1;}
	25%,75%{opacity: 0;}
}
.r1pic{-webkit-animation:wobbler 1s .2s ease both infinite;-moz-animation:wobbler 1s .2s ease both infinite;-o-animation:wobbler 1s .2s ease both infinite;-ms-animation:wobbler 1s .2s ease both infinite;}
@-webkit-keyframes wobbler{
	0%{-webkit-transform:translateX(0%)}
	15%{-webkit-transform:translateX(-25%) rotate(-5deg)}
	30%{-webkit-transform:translateX(20%) rotate(3deg)}
	45%{-webkit-transform:translateX(-15%) rotate(-3deg)}
	60%{-webkit-transform:translateX(10%) rotate(2deg)}
	75%{-webkit-transform:translateX(-5%) rotate(-1deg)}
	100%{-webkit-transform:translateX(0%)}
}
@-moz-keyframes wobbler{
	0%{-moz-transform:translateX(0%)}
	15%{-moz-transform:translateX(-25%) rotate(-5deg)}
	30%{-moz-transform:translateX(20%) rotate(3deg)}
	45%{-moz-transform:translateX(-15%) rotate(-3deg)}
	60%{-moz-transform:translateX(10%) rotate(2deg)}
	75%{-moz-transform:translateX(-5%) rotate(-1deg)}
	100%{-moz-transform:translateX(0%)}
}
@-ms-keyframes wobbler{
	0%{-ms-transform:translateX(0%)}
	15%{-ms-transform:translateX(-25%) rotate(-5deg)}
	30%{-ms-transform:translateX(20%) rotate(3deg)}
	45%{-ms-transform:translateX(-15%) rotate(-3deg)}
	60%{-ms-transform:translateX(10%) rotate(2deg)}
	75%{-ms-transform:translateX(-5%) rotate(-1deg)}
	100%{-ms-transform:translateX(0%)}
}
@-o-keyframes wobbler{
	0%{-o-transform:translateX(0%)}
	15%{-o-transform:translateX(-25%) rotate(-5deg)}
	30%{-o-transform:translateX(20%) rotate(3deg)}
	45%{-o-transform:translateX(-15%) rotate(-3deg)}
	60%{-o-transform:translateX(10%) rotate(2deg)}
	75%{-o-transform:translateX(-5%) rotate(-1deg)}
	100%{-o-transform:translateX(0%)}
}

/*.magic{-webkit-animation:flipInXr 3s .2s ease both infinite;-moz-animation:flipInXr 3s .2s ease both infinite;-ms-animation:flipInXr 3s .2s ease both infinite;-o-animation:flipInXr 3s .2s ease both infinite;}*/
@-webkit-keyframes flipInXr{
	0%{-webkit-transform:perspective(400px) rotateX(90deg);
	opacity:0}
	40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
	70%{-webkit-transform:perspective(400px) rotateX(10deg)}
	100%{-webkit-transform:perspective(400px) rotateX(0deg);
	opacity:1}
}
@-moz-keyframes flipInXr{
	0%{-moz-transform:perspective(400px) rotateX(90deg);
	opacity:0}
	40%{-moz-transform:perspective(400px) rotateX(-10deg)}
	70%{-moz-transform:perspective(400px) rotateX(10deg)}
	100%{-moz-transform:perspective(400px) rotateX(0deg);
	opacity:1}
}
@-ms-keyframes flipInXr{
	0%{-ms-transform:perspective(400px) rotateX(90deg);
	opacity:0}
	40%{-ms-transform:perspective(400px) rotateX(-10deg)}
	70%{-ms-transform:perspective(400px) rotateX(10deg)}
	100%{-ms-transform:perspective(400px) rotateX(0deg);
	opacity:1}
}
@-o-keyframes flipInXr{
	0%{-o-transform:perspective(400px) rotateX(90deg);
	opacity:0}
	40%{-o-transform:perspective(400px) rotateX(-10deg)}
	70%{-o-transform:perspective(400px) rotateX(10deg)}
	100%{-o-transform:perspective(400px) rotateX(0deg);
	opacity:1}
}

.box_b1{text-align: center;color: #0c0307;font-size: 28px;padding-bottom: 5%;}
.title2{margin: 2% auto 0%;width: 53%;}
.bt{margin: 3% auto;width: 6%;}
.b1_pic{width: 84%;margin: 0 auto;}
.b1_title span{text-align: center;display: inline-block;width: 49%;margin-bottom: 1%;}

.box_b2 .b2title{color: #0c0307;font-size: 28px;text-align: center;}
.box_b2 .b2title font{display: block;font-size: 38px;font-weight: bold;}
.box_b2 .b2title font img{vertical-align: -1px;width: 7.2%;}
.t2case{position: relative;margin: 2% auto 4%;}
.t2case p{position: absolute;top: 9%;left: 58%;font-size: 16px;color: #fff;width: 32%;line-height: 27px;text-indent: 2em;}
.t2case a{position: absolute;top: 83%;left: 60%;width: 25%;}
.xxm{position: absolute;top: 28%;left: 13%;width: 8%;}
.xxm2{position: absolute;top: 32%;left: 21%;width: 8%;}
.bvpic{position: absolute;top: 15%;left: 15%;width: 22%;}
.bvpic2{position: absolute;top: 15%;left: 15%;width: 22%;}

.case_01{position: relative;margin-bottom: 4%;}
.case_01 .uclick{position: absolute;bottom: 3%;left: 0%;right: 0%;margin: auto;}

.box_b4main{padding-bottom: 7%;}
.box_b4 img{margin-top: 5%;}

#zjdt5{margin: 3% auto;}
#zjdt5 .bd li{position: relative;overflow: hidden;}
#zjdt5 .bd li a.uclick{position: absolute;bottom: -2%;left: 4%;width: 28%;}
#zjdt5 .bd li a.uclick p img{width: 15%;right: 7%;}
#zjdt5 .bd li a.uclick .shou{right: -8%;width: 29%;}
#zjdt5 .hd li.on{background: #4f0b3a;color: #4f0b3a;}
#zjdt5 .hd li{background: #9e4984;color: #9e4984;font-size: 0px;}
#zjdt6 .hd li.on{background: #4f0b3a;color: #4f0b3a;}
#zjdt6 .hd li{background: #9e4984;color: #9e4984;font-size: 0px;}

.casewrap{position: absolute;top: 2.5%;left: 32%;width: 35.5%;}
.casewrap{-webkit-animation:fadeOutUphy 3s .2s ease both infinite;-moz-animation:fadeOutUphy 3s .2s ease both infinite;-o-animation:fadeOutUphy 3s .2s ease both infinite;-ms-animation:fadeOutUphy 3s .2s ease both infinite;}
@-webkit-keyframes fadeOutUphy{
    0%{opacity:1;
    -webkit-transform:translateY(0)}
    50%{opacity:1;
    -webkit-transform:translateY(-10px)}
    100%{opacity:1;
    -webkit-transform:translateY(0px)}
}
@-moz-keyframes fadeOutUphy{
    0%{opacity:1;
    -moz-transform:translateY(0)}
    50%{opacity:1;
    -moz-transform:translateY(-10px)}
    100%{opacity:1;
    -moz-transform:translateY(0px)}
}
@-o-keyframes fadeOutUphy{
    0%{opacity:1;
    -o-transform:translateY(0)}
    50%{opacity:1;
    -o-transform:translateY(-10px)}
    100%{opacity:1;
    -o-transform:translateY(0px)}
}
@-ms-keyframes fadeOutUphy{
    0%{opacity:1;
    -ms-transform:translateY(0)}
    50%{opacity:1;
    -ms-transform:translateY(-10px)}
    100%{opacity:1;
    -ms-transform:translateY(0px)}
}

.picitem{position: relative;margin: 2% auto 5%;}
.picitem p{position: absolute;top: 10%;left: 9%;text-indent: 2em;color: #fff;font-size: 17px;width: 33%;line-height: 29px;}

.bodetail{width: 87%;margin-left: 6%;margin-top: 3%;margin-bottom: 14%;text-indent: 2em;font-size: 18px;color: #393535;line-height: 30px;}

.dzzx{width: 70%;margin: 0 auto 15%;position: relative;}
.quanu{position: absolute;top: 3%;left: -17%;width: 40%;text-align: center;z-index: 100;}
.tu{position: absolute;top: 5%;left: 5.2%;width: 89.5%;z-index: 99;}

.quan2{top: -17%;left: 27%;}
.quan3{top: 4%;left: 73%;}
.quan4{top: 56%;left: 73%;}
.quan5{top: 77%;left: 32%;}
.quan6{top: 58%;left: -11%;}


.tuzs{-webkit-animation:flipInYds 1s .2s ease both;-moz-animation:flipInYds 1s .2s ease both;-o-animation:flipInYds 1s .2s ease both;-ms-animation:flipInYds 1s .2s ease both;}
@-webkit-keyframes flipInYds{
	0%{-webkit-transform:perspective(400px) rotateY(90deg);
	opacity:0}
	40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
	70%{-webkit-transform:perspective(400px) rotateY(10deg)}
	100%{-webkit-transform:perspective(400px) rotateY(0deg);
	opacity:1}
}
@-moz-keyframes flipInYds{
	0%{-moz-transform:perspective(400px) rotateY(90deg);
	opacity:0}
	40%{-moz-transform:perspective(400px) rotateY(-10deg)}
	70%{-moz-transform:perspective(400px) rotateY(10deg)}
	100%{-moz-transform:perspective(400px) rotateY(0deg);
	opacity:1}
}
@-ms-keyframes flipInYds{
	0%{-ms-transform:perspective(400px) rotateY(90deg);
	opacity:0}
	40%{-ms-transform:perspective(400px) rotateY(-10deg)}
	70%{-ms-transform:perspective(400px) rotateY(10deg)}
	100%{-ms-transform:perspective(400px) rotateY(0deg);
	opacity:1}
}	
@-o-keyframes flipInYds{
	0%{-o-transform:perspective(400px) rotateY(90deg);
	opacity:0}
	40%{-o-transform:perspective(400px) rotateY(-10deg)}
	70%{-o-transform:perspective(400px) rotateY(10deg)}
	100%{-o-transform:perspective(400px) rotateY(0deg);
	opacity:1}
}	

.xxm2{-webkit-animation:gg1 5s 1.3s linear infinite;-moz-animation:gg1 4s 2.3s linear infinite;animation:gg1 5s 1.3s linear infinite;-ms-animation:gg1 4s 2.3s linear infinite;}
.xxpng,.xxm,.r5pic{-webkit-animation:gg1 4s 1.3s linear infinite;-moz-animation:gg1 4s 2.3s linear infinite;animation:gg1 3s 1.3s linear infinite;-ms-animation:gg1 4s 2.3s linear infinite;}
.r4pic{-webkit-animation:gg1 7s 1.3s linear infinite;-moz-animation:gg1 7s 2.3s linear infinite;animation:gg1 7s 1.3s linear infinite;-ms-animation:gg1 7s 2.3s linear infinite;}
@-webkit-keyframes gg1{0%{opacity:1;}50%{opacity:0.2;}100% {opacity:1;}}
@-moz-keyframes gg1{0%{opacity:1;}50%{opacity:0.2;}100% {opacity:1;}}
@-ms-keyframes gg1{0%{opacity:1;}50%{opacity:0.2;}100% {opacity:1;}}
@keyframes gg1{0%{opacity:1;}50%{opacity:0.2;}100% {opacity:1;}}

.hoverlight {
    cursor: pointer;
    position: absolute;
    left: -180px;
    top: 0%;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
    background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
    background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-15deg);
    -ms-transform: skewx(-25deg);
    animation: light_move 2.5s 1s infinite linear;
    -webkit-animation: light_move 4.5s 1s infinite linear;
    -moz-animation: light_move 2.5s 1s infinite linear;
    -o-animation: light_move 2.5s 1s infinite linear;
    -ms-animation: light_move 2.5s 1s infinite linear;
}
@keyframes light_move {
	0% {left:-180px;}
	30%{left:620px}
	75%{left:50px;}
	100%{left:320px;}
}
@-moz-keyframes light_move {
	0% {left:-180px;}
	30%{left:620px}
	75%{left:50px;}
	100%{left:320px;}
}
@-webkit-keyframes light_move {
	0% {left:-180px;}
	30%{left:620px}
	75%{left:50px;}
	100%{left:320px;}
}
@-o-keyframes light_move{
	0% {left:-180px;}
	30%{left:620px}
	75%{left:50px;}
	100%{left:320px;}
}
@-ms-keyframes light_move{
	0% {left:-620px;}
	30%{left:320px}
	75%{left:50px;}
	100%{left:320px;}
}

.box_like{margin-top: 4%;}

.box_tj li{float: left;margin-left: 2%;width: 46.5%;}
.box_tj li.nor{margin-right: 0%;}

.focus{margin: 0% 0%;position: relative;}
.focus .hd{text-align: center;margin: 3% auto;}
.focus .hd ul{display: inline-block;text-align: center;}
.focus .hd li{float: left;background: #959595;width: 15px;height: 15px;border-radius: 14px;color: #959595;margin-right: 10px;font-size: 0px;}
.focus .hd li.on{background: #68c5f0;color: #68c5f0;}
.box_title{text-align: center;margin:0% auto 5%;}
.box_top{margin: 0% 0% 0%;font-size: 36px;background: url(../images/like.jpg) center;background-repeat: no-repeat;background-size: 100% 4%;-moz-background-size: 100% 4%;-webkit-background-size: 100% 4%;-o-background-size: 100% 4%;}
.box_title h4{font-size: 30px;}
.box_top font{padding: 0% 4%;background-color:#fff;color: #e5004f;font-weight: bold;}
.box_title p{color: #eb3980;font-size: 28px;}
@media screen and (max-width: 500px) {
	.box_top{font-size: 21px;}
	.uclick{font-size: 14px;}

	.box_b2 .b2title font{font-size: 18px;}
	.box_b2 .b2title{font-size: 16px;}
	.bodetail{font-size: 14px;line-height: 21px;}
	.picitem p{line-height: 15px;font-size: 12px;top: 3%;}

	.picdt{font-size: 14px;}
	.picdt .tpo{font-size: 12px;}
	.kyj span{font-size: 12px;}
	.pic02 span{font-size: 12px;line-height: 14px;}
}
@media screen and (min-width: 290px) and (max-width: 334px){
	.uclick{font-size: 12px;}
	.picitem p{line-height: 14px;font-size: 12px;top: 1%;width: 35%;left: 8%;}

	.picdt{font-size: 12px;}
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){/* 兼容iphone6 plus */
	.uclick{font-size: 15px;}
	.picitem p{line-height: 19px;}
	.kyj span{font-size: 14px;}
}