@charset "utf-8";

@font-face {
  font-family: "HYQiHeiX1-55W-17";
  src: url("../fonts/HYQiHeiX1-55W-17.woff2") format("woff2"),
  url("../fonts/HYQiHeiX1-55W-17.woff") format("woff"),
  url("../fonts/HYQiHeiX1-55W-17.ttf") format("truetype"),
  url("../fonts/HYQiHeiX1-55W-17.eot") format("embedded-opentype"),
  url("../fonts/HYQiHeiX1-55W-17.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HYQiHeiX1-65W-18-1";
  src: url("../fonts/HYQiHeiX1-65W-18-1.woff2") format("woff2"),
  url("../fonts/HYQiHeiX1-65W-18-1.woff") format("woff"),
  url("../fonts/HYQiHeiX1-65W-18-1.ttf") format("truetype"),
  url("../fonts/HYQiHeiX1-65W-18-1.eot") format("embedded-opentype"),
  url("../fonts/HYQiHeiX1-65W-18-1.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HYQiHeiX1-75W-19";
  src: url("../fonts/HYQiHeiX1-75W-19.woff2") format("woff2"),
  url("../fonts/HYQiHeiX1-75W-19.woff") format("woff"),
  url("../fonts/HYQiHeiX1-75W-19.ttf") format("truetype"),
  url("../fonts/HYQiHeiX1-75W-19.eot") format("embedded-opentype"),
  url("../fonts/HYQiHeiX1-75W-19.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}


*{ margin:0; padding:0;}
img{border:0;}
ul,ol,li{list-style:none;}
a{ text-decoration:none;outline:none}
body{background:#fff;width:100%;font-family: "HYQiHeiX1-75W-19" !important;}


.wapper{max-width:7.50rem; margin:0 auto;}
.page{width:100%;height:13.34rem;background:no-repeat center top;background-size:100%; overflow:hidden; position:relative;}
.page div{ position:absolute;background:no-repeat center top;background-size:auto 100%; width:100%; left:0;}
.h1,.h2{ text-align:center; font-size:.60rem; color:#c22e49; font-weight:bold}
.h1 p{ color:#fff; font-size:.50rem; margin-top:14px;}
.h2{ font-size:.40rem;}
.h3{ text-align:center; font-size:.32rem;color:#565553; font-weight:bold}

.h4{text-align:center; color:#565553; font-size:.20rem;}
.h4 span{ display:inline-block; width:2.60rem;}
.h5{text-align:center; color:#565553; font-size:.16rem;}

.p1{ background-image:url(../images/t1.png);}
.p1 .t1{ background-image:url(../images/t2.png); height:7.89rem;bottom:0;}
.p1 .t2{ background-image:url(../images/t3.png); height:2.63rem; bottom:4.10rem;}
.p1 .t3{ background-image:url(../images/t0.png); height:3.64rem; bottom:1.40rem;}
.p1 .t4{ height:1.53rem; top:43px}

.p2{ background-image:url(../images/t5.png);}
.p2 .t1{ background:rgba(0,0,0,0.6); height:100%;}
.p2 .t2{  height:.95rem;top:215px; color:#fff;line-height: 1.5;}
.p2 .t3{top:293px; text-align:center;line-height: 1.4;}
.p2 .t3 p{ padding:0 .80rem; color:#fff; font-size:.20rem;}

.p2 .t4{  height:.50rem;top:390px;}
.p2 .t4 a{ border:1px solid #fff; border-radius:.25rem; font-size:3.2vw; line-height:.50rem; text-align:center; color:#fff; display:block; margin:0 auto; width:3.67rem; height:100%}
.p2 .t4 a i{ vertical-align:middle; display:inline-block;background:url(../images/t7.png) no-repeat center; background-size:100%; width:.16rem; height:.19rem;}

.p3,.p5{ background-image:url(../images/t16.png);}
.p3 .t1{ background-image:url(../images/t9.png); background-position:left center; height:3.34rem;bottom:3.40rem;}
.p3 .t2{ background-image:url(../images/t10.png); background-position:4.50rem center; height:1.78rem;bottom:3.20rem;}
.p3 .t3{ height:4.68rem;bottom:0;background-image:url(../images/t11.png);}
.p3 .t4{ height:.77rem;top:255px;background-image:url(../images/t15.png);}
.p3 .t5{ height:.27rem;top:303px;}
.p3 .t6{ height:1.68rem;top:83px;line-height: 1;}
.p3 .t6 span{display: block; margin-top: 36px;}
.p3 .t7{ height:.82rem;top:185px; text-align:center;line-height: 1.3; }


.wapper .p4{ background-image:url(../images/b2.png);}
.p4 .t4{ height:.77rem;top:233px;background-image:url(../images/t76.png);}
.p4 .t5{ height:.27rem;top:279px;}
.p4 .t5 span{ width:3.00rem;}
.p4 .t6{ height:.46rem;top:93px;}
.p4 .t7{ height:.82rem;top:158px;line-height: 1.3;}
.p4 div.iphone-nav-w{bottom:0; height:6.05rem; }
.p4 div.iphone{ bottom:0; height:6.22rem;}
.p4 div.iphone img{width: 100%;}
.p4 div.iphone-nav{ top:0;left:-.15rem; height:100%}
.p4 div.iphone-nav div{ position:static;}
.p4 div.iphone-nav div img{width:2.93rem;}
.p4 div.iphone-nav div.swiper-slide{ width:3.10rem; float:left; padding-top:2.10rem;}
.p4 div.iphone-nav div.swiper-slide img.r{ display:none;}
.p4 div.iphone-nav div.active{ padding-top:.25rem;}
.p4 div.iphone-nav div.active img.r{ display:block; margin-left:-.75rem; width:3.10rem}
.p4 div.iphone-nav div.active img.s{ display:none;}
.p4 div.iphone-nav div.swiper-wrapper{ width:15.50rem;}
.p4 div.iphone-nav div.swiper-container{ width:100%;}

.p5 .t1{ background-image:url(../images/t17.png); width:2.97rem; height:5.33rem;bottom:0;left:auto; right:0;}
.p5 .t2{ background-image:url(../images/t19.png); width:3.52rem; height:5.38rem;bottom:0; left:.40rem;}
.p5 .t3{width:3.87rem; height:5.97rem;bottom:-.30rem; left:2.30rem;}
.p5 .t3 p{ height:100%; background-image:url(../images/t18.png);background-size:100%;}
.p5 .t4{ height:.21rem;bottom:.20rem; font-size:.16rem; text-align:center; color:#7a7e7e}
.p5 .t5{ height:.46rem;top:113px;}
.p5 .t6{ height:.82rem;top:164px; color:#7a7e7e; line-height:1.4}
.p5 .t7{ height:.77rem;top:248px;background-image:url(../images/t24.png);}
.p5 .t8{ height:.27rem;top:294px;}
.p5 .t8 span{width:2.18rem;}

.p6{ background-image:url(../images/t25.png);}
.p6 .t1{ height:.46rem;top:83px;}
.p6 .t2{ height:.82rem;top:135px;line-height: 1.3;}
.p6 .t3{ height:.77rem;top:208px;background-image:url(../images/t28.png);}
.p6 .t4{ height:.27rem;top:254px;}
.p6 .t4 span{ width:3.10rem;}
.p6 .t5{ height:6.67rem;bottom:0;background-image:url(../images/t30.png);}
.p6 div.sc{top: 1rem;left: 1.1rem;width: 2.20rem;height: 4.4rem;overflow: hidden; transform:rotate(-15deg); -ms-transform:rotate(-15deg);}
.p6 div.sc img{ width:400%; display:block;}
.v1-wrap.animated .img {
  -webkit-animation: v1 3s 1s forwards;
}
.p6 div.sc2{ left:4.12rem;top:1.95rem; height:4.00rem;}
.p6 div.sc2 img{width: 100%;}

.p7{ background-image:url(../images/t31.png);}
.p7 .t5{ height:5.62rem;bottom:0;background-image:url(../images/t32.png);}
.p7 .t1{ height:.46rem;top:83px;}
.p7 .t2{ height:1.14rem;top:152px;}
.p7 .t2 p{ font-size:.20rem; color:#8e8e8e; line-height:1.4; padding:0 .30rem;}

.p7 .t6{ height:1.88rem; width:1.74rem;top:285px;background-image:url(../images/t37.png);}
.p7 .t3,.p7 .t4,.p7 .t10{ height:.51rem; width:2.23rem;top:250px;background-image:url(../images/t35.png);left:.20rem; text-align:center; color:#fff; line-height:.42rem; font-size:.14rem;}
.p7 .t4{ left:2.60rem;}
.p7 .t10{ left:5.10rem;}

.p7 .t7{ height:1.88rem; width:1.74rem;top:285px; left:2.40rem;background-image:url(../images/t36.png);}
.p7 .t8{ height:.39rem; width:.39rem;top:298px; left:2.30rem;background-image:url(../images/t39.png);}
.p7 .t9{ height:.39rem; width:.39rem;top:298px; left:4.80rem;background-image:url(../images/t40.png);}
.p7 .t11{ height:1.88rem; width:1.74rem;top:285px; left:4.90rem;background-image:url(../images/t38.png);}

.p8{ background-image:url(../images/t41.png);}
.p8 .t1{ height:6.57rem;bottom:0; width:4.42rem;background-image:url(../images/t42.png); left:auto; right:0;}
.p8 .t2{ height:4.21rem;bottom:0; background-image:url(../images/t43.png);}
.p8 .t3{ height:1.84rem; width:2.31rem; left:.50rem;bottom:0; }
.p8 .t3 p{ height:100%;background:url(../images/t44.png) no-repeat center; background-size:100%;}
.p8 .t4{ height:.51rem;top:107px;}
.p8 .t5{ height:.26rem;top:156px; }
.p8 .t6{ height:2.44rem; width:2.44rem; left:1.20rem;top:180px;background-image:url(../images/t50.png);}
.p8 .t7{ height:.72rem; width:2.31rem; left:3.50rem;top:200px;background-image:url(../images/t49.png);}
.p8 .t8{ height:.72rem; width:2.31rem; left:3.50rem;top:240px;background-image:url(../images/t48.png);}
.p8 .t8.iPhone{top:250px;}
.p8 .t9{ height:.23rem;top:280px;}
.p8 .t9.iPhone{top:298px;}

.p9 {transition: height 1s;}
.p9 .p9-1{ background-image:url(../images/t53.png); height:21.66rem;}
.p9 .t1{ height:.50rem;top:1rem;}
.p9 .t1 span{ display: block;color: #565553;font-size: .275rem;line-height: 1;;}
.p9 .t2{ height:3.31rem;top:8.70rem;background-image:url(../images/t55.png);}
.p9 .t3{ height:4.7rem;top:3.2rem;background-image:url(../images/t57.png);}
.p9 .t4{ height:.79rem;top:4.1rem;}
.p9 .t5{ height:.66rem;top:5.35rem;background-image:url(../images/t59.png);}
.p9 .t6{ height:.23rem;top:6.15rem;background-image:url(../images/t60.png);}
.p9 .t7{ height:.46rem;top:6.30rem;}
.p9 .t8{ height:.53rem;top:6.7rem;}
.p9 .t8 a{ display:block; width:2.24rem; margin:0 auto; height:100%;background:#c12e48; color:#fff; font-size:.26rem; text-align:center; border-radius:.25rem; line-height:.53rem;}
.p9 .t9,.p9 .btn-more-tips{ height:.24rem; width:.24rem; left:50%; margin-left:-.12rem;bottom:1rem;z-index: 999;}
.p9 .t9 a{display:block; width:100%; height:100%;background:url(../images/t52.png) no-repeat center; background-size:100%;}
.p9 .t9 a.up{background-image:url(../images/t51.png);}
.p9 .btn-more-tips {font-size: .1rem;width: 100%;font-size: 12px;text-align: center;position: absolute;left: 0;bottom: .7rem;color: #565553;}

.p9 div.p9-1-1,.p9 div.p9-1-2{ position:relative;}
.p9 div.p9-1-1{ height:13.34rem;}
.p9 div.p9-1-2{ height:6.30rem; display:none;margin-top: -2rem;}
.p9 .t10{ height:1.28rem;top:.90rem; text-align:center; font-size:.26rem; color:#565553; font-weight:bold;}
.p9 .t11,.p9 .t12,.p9 .t13,.p9 .t14,.p9 .t15,.p9 .t16{ height:1.63rem;top:2.90rem; width:2.00rem;background-image:url(../images/t69.png); background-position:0 0; left:.30rem;}
.p9 .t12{ left:2.30rem;background-position:-2.00rem 0; width:1.40rem;}
.p9 .t13{ left:4.00rem;background-position:-3.60rem 0; width:1.40rem;}
.p9 .t14{ left:5.80rem;background-position:right 0; width:1.60rem;}

.p9 .arr{ height:.14rem; left:1.75rem; width:.39rem;top:3.75rem;background-image:url(../images/t63.png);}
.p9 .t16{ left:3.50rem;}
.p9 .t17{ left:5.30rem;}
.p9 .t18{ height:.51rem;top:2.85rem;background-image:url(../images/t68.png);}
.p9 .t19{ height:1.7rem;top:4.90rem;}
.p9 .t20{ height:1.30rem;top:6.85rem;font-weight: normal;line-height: 1.3;}

.p10{ background-image:url(../images/t71.png);}
.p10 .t1{ height:.45rem;top:1.25rem;background-image:url(../images/t72.png);}
.p10 .qs{ height:9.00rem;top:2.50rem; width:7.10rem; left:.20rem; overflow:auto;}
.p10 .qs div{ position:static;}
.p10 .qs div.qs-item{ border-bottom:0.01rem solid #dadbe8; padding:.20rem 0; height:auto; overflow:hidden;}
.p10 .qs div.qs-tt{ font-size:.28rem; color:#565553; font-weight:bold; position:relative; padding-right:.50rem; width:auto;}
.p10 .qs div.qs-tt a{ display:block; position:absolute; right:0;top:.10rem; width:.24rem; height:.24rem;background:url(../images/t52.png) no-repeat center;background-size:100%;}
.p10 .qs div.qs-tt.up a{background-image:url(../images/t51.png);}
.p10 .qs div.qs-ct{ display:none; color:#848484; font-size:.18rem; padding:0 .60rem 0 .20rem; line-height:1.4; border-left:0.01rem solid #c12e48; margin:.20rem 0 0 0.05rem; width:auto;}






.p9 .cout{ width: 5.20rem;top:2.90rem; margin-left: -2.6rem; left:50%; height:5.40rem;clip: rect(0rem, 5.40rem, 5.40rem, 2.70rem); }
.p9 .circle {
	width: 5.20rem;
	height: 5.20rem;
	border: .10rem solid #e56e79;
	border-radius: 50%;
	clip: rect(0rem, 2.70rem, 5.40rem, 0rem);
}

div.animated[data-anim~=base],
.animated div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.cout.animated[data-anim~=cout] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 1s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

.animated .circle[data-anim~=left] {
  -webkit-animation-duration: 2s; /* Full animation time */
  -webkit-animation-name: left-spin;
}

.animated .circle[data-anim~=right] {
  -webkit-animation-duration: 1s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
.video-pop-up {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: none;
}

.video-pop-up .video-wrap {
  position: absolute;
  width: 80%;
  top: 550px;
	 left: 0;
	 right:0;
	 margin: auto;
}

.video-pop-up .video-wrap video {
  width: 100%;
}

.video-pop-up .video-wrap .close {
  position: absolute;
  top: 0;
  width: 8%;
  right: -8%;
}
@keyframes v1 {
  0% {
    transform: translateX(0%);
  }
  30%, 33.3% {
    transform: translateX(-25%);
  }
  60%, 66.6% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}