* {
    padding: 0;
    margin: 0
}
html {
    width: 100%;
    margin: 0 auto
}
body {
    margin: 0 auto
}
input {
    border: 0;
    outline: 0
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, img, form, applet, fieldset, legend, button, input, textarea, th, table, tr, td {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    font-family: "微软雅黑";
    color: #666;
    position: relative;
    background: #fff;
    margin: 0 auto;
    max-width: 750px;
    min-width: 320px
}
body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, p {
    font-weight: normal;
    font-style: normal;
    -webkit-text-size-adjust: none
}
input::-ms-clear {
display:none
}
input, select, textarea {
    border: 0;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 0
}
html {
    height: auto;
    width: 100%;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: #fff;
    margin: 0 auto;
    max-width: 750px;
    min-width: 320px
}
html {
    font-size: 13.33333333vw
}

@media screen and (min-width:750px) {
html {
    font-size: 100px
}
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#666
}
img {
    padding: 0;
    margin: 0;
    vertical-align: top;
    border: 0;
    width: 100%
}
li, ul {
    list-style: none;
    outside: none
}
.clear {
    clear: both;
    height: 0;
    width: 100%
}
a, b, i, span, input, select, dl, dd, dt, p {
    font-family: "微软雅黑"
}
i, em {
    font-style: normal
}
a {
    color: #333;
    text-decoration: none
}
a:hover, a:active, a:focus {
    text-decoration: none
}
.mt100 {
    margin-top: 1rem
}
.mt30 {
    margin-top: .3rem
}
.fl {
    float: left !important
}
.fr {
    float: right !important
}
.text-center {
    clear: both;
    text-align: center
}
.clearfix:after, .clearfix:before {
    content: "";
    display: table
}
.clearfix:after {
    clear: both
}
.clearfix {
*zoom:1
}
.order_tips_text {
    box-sizing: content-box
}
body {
    overflow: auto !important
}
.wrap {
    overflow: hidden;
    -webkit-background-size: contain;
    background-size: contain
}
.wrap .swiper-wrapper, .wrap .swiper-slide {
    height: auto !important
}
.box-item {
    border: 0 !important;
    position: relative
}
.box-bg {
    width: 100%
}
.box-bg img {
    width: 100%
}
.box-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}
body.active .popup_mask_t {
    display: none !important
}
.scale {
    animation: scale 1s ease infinite
}
.blink {
    animation: blink 1s ease infinite
}
.float {
    animation: float 2s ease infinite
}
.hvr-buzz-out {
    animation: hvr-buzz-out 2s ease infinite
}
.swiper-prev, .swiper-next {
    position: absolute;
    top: 50%;
    width: .44rem;
    height: .44rem;
    z-index: 4;
    cursor: pointer;
    margin-top: -0.22rem
}
.swiper-prev {
    left: -0.24rem;
    background: url("../images/arrow-l.png") no-repeat;
    background-size: 100% 100%
}
.swiper-next {
    right: -0.24rem;
    background: url("../images/arrow-r.png") no-repeat;
    background-size: 100% 100%
}
form .form-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}
form .input_text, form .sel-box select, form .select-square-box, form .select-square-box select {
    width: 100%;
    height: .66rem;
    color: #222;
    background: #fff;
    font-size: .24rem;
    padding: 0 .1rem;
    margin-bottom: .19rem;
    box-sizing: border-box;
    border-radius: .02rem
}
form .input_text {
    width: 1.98rem
}
form .mobile {
    width: 4.13rem
}
form .sel-box {
    width: 1.98rem;
    height: .66rem;
    margin-bottom: .63rem;
    position: relative
}
form .sel-box select {
    width: 100%;
    position: relative;
    z-index: 5
}
form .sign_btn {
    position: relative;
    text-align: center
}
form .sign_btn a {
    display: block;
    width: 100%;
    height: 100%
}
form .select-square-box {
    width: 5.8rem;
    padding: 0;
    margin-bottom: .52rem;
    position: relative;
    border: 0
}
form .sel-box:after, form .select-square-box:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #222;
    top: 50%;
    margin-top: -4px;
    right: .1rem;
    z-index: 5
}
form input, form select {
    color: #222 !important
}
form ::-webkit-input-placeholder {
color:#8d8d8d
}
.plane {
    display: inline-block;
    position: absolute;
    width: 1.09rem;
    opacity: 0;
    transition: all .3s
}
.plane-1 {
    width: 1.02rem;
    top: .74rem;
    right: 0
}
.plane-2 {
    top: .25rem;
    left: .07rem
}
.plane-3 {
    width: 1.02rem;
    top: .93rem;
    right: .1rem
}
.plane-4 {
    top: 1.23rem;
    left: .07rem
}
.plane-5 {
    top: 1.374rem;
    right: .1rem
}
.plane-1, .plane-3, .plane-5 {
    transform: translateX(100%)
}
.plane-2, .plane-4 {
    transform: translateX(-100%)
}
.animated .plane {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1s !important
}
.box-1 i {
    display: inline-block;
    position: absolute
}
.box-1 .icon-1 {
    width: 1.8rem;
    left: .85rem;
    bottom: 7.3rem
}
.box-1 .icon-2 {
    width: 1.8rem;
    left: 2.74rem;
    bottom: 7.3rem
}
.box-1 .icon-3 {
    width: 1.8rem;
    bottom: 7.3rem;
    right: .9rem
}
.box-1 .icon-4 {
  width: 6rem;
  right: 0.8rem;
  bottom: 4.5rem;
  animation-delay: 0.5s;
}
.box-2 .title {
    width: 5.45rem
}
.box-2 .box-main {
    position: relative;
    margin-top: .34rem;

}
.box-2 .box-swiper-wrap {
    width: 6.63rem;
    margin-bottom: .15rem;
    position: relative
}
.box-2 .sub {
    width: 6.63rem;
    margin-bottom: .15rem
}
.box-2 .sub ul {
    display: flex;
    justify-content: space-between
}
.box-2 .sub li {
    width: 2.13rem;
    height: .58rem;
    font-size: .26rem;
    text-align: center;
    line-height: .58rem;
    cursor: pointer;
    color: #fff;
    background: #ff9b82
}
.box-2 .sub li.on {
    background: #bd0206
}
.box-2 .box-2-form {
    width: 6.5rem;
    margin-top: 3.4rem;
    margin-left: 1.2rem;
}
/*.box-2 .form-main-01 {
    width: 6.25rem;
    margin-bottom: .2rem;
    margin-left: 2.34rem;
}*/


.box-2 .box-2-form .sign_btn {
    width: 3.26rem
}
.box-2 .box-2-list {
    font-size: .22rem;
    line-height: .48rem;
    height: .48rem;
    color: #383838;
    margin-left: 2.34rem;
    overflow: hidden;
    margin-top: -.6rem;
}
.box-2 .box-2-list li {
    margin-bottom: .2rem
}
.box-3 .box-main {
    position: relative;
    padding-top: .01rem
}
.box-3 i {
    width: 1.27rem;
    display: inline-block;
    position: absolute;
    right: 1.4rem
}
.box-3 .icon-1 {
    top: 2.68rem
}
.box-3 .icon-2 {
    top: 5.52rem
}
.box-3 .box-btn-1, .box-3 .box-btn-2 {
    width: 2.65rem;
    margin-left: 4.13rem
}
.box-3 .box-btn-1 {
    margin-top: 4.35rem
}
.box-3 .box-btn-2 {
    margin-top: 1.96rem
}
.box-4 .title {
    width: 5.76rem;
    margin-bottom: 1rem
}
.box-4 .box-main {
    position: relative
}
.box-4 .box-4-swiper {
    position: relative;
    width: 4.4rem;
    margin-left: 2.5rem;
    margin-top: 5.5rem
        
}
.box-4 .box-4-swiper2 {
    position: relative;
    width: 4.4rem;
    margin-left: 2.5rem;
    margin-top: 0rem
        
}
.box-4 .box-4-swiper3 {
    position: relative;
    width: 4.4rem;
    margin-left: 2.5rem;
    margin-top: 0rem
        
}
.box-4 .swiper-prev {
    left: -0.12rem;
    background: url("../images/arrow-l-1.png") no-repeat;
    background-size: 100% 100%
}
.box-4 .swiper-next {
    right: -0.12rem;
    background: url("../images/arrow-r-1.png") no-repeat;
    background-size: 100% 100%
}
.box-4 .box-4-swiper .swiper-container {
    padding-top: .18rem;
    box-shadow: .07rem .07rem .07rem rgba(145,145,145,0.4)
}
.box-4 .swiper-text {
    width: .8rem;
    height: .45rem;
    color: #000;
    font-size: .26rem;
    text-align: center;
    line-height: .45rem;
    position: absolute;
    background: url("../images/icon-4.png") no-repeat;
    background-size: 100% 100%;
    top: -0.18rem;
    left: .3rem;
    z-index: 3;
    opacity: 0;
    transition: opacity .3s
}
.box-4 .swiper-text5 {
    width: 1.1rem;
    background: url("../images/icon-4-1.png") no-repeat;
    background-size: 100% 100%
}
.box-4 .point-box {
    width: .16rem;
    height: .16rem;
    position: absolute;
    border-radius: 50%;
    transition: all .3s;
    opacity: 0
}
.box-4 .point-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.box-4 .point-area .point {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%
}
.box-4 .point-area .point-dot {
    width: .05rem;
    height: .05rem;
    background: #fff;
    transform: translate(-50%, -50%);
    z-index: 2
}
.box-4 .point-area .point-10 {
    width: .16rem;
    height: .16rem;
    margin-left: -0.08rem;
    margin-top: -0.08rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.6);
    animation: scaleBig 2s linear infinite;
    box-sizing: border-box;
    transition: all .3s;
    transform-origin: center center
}
.box-4 .point-text {
    position: absolute;
    top: 50%;
    margin-top: -0.17rem;
    height: .34rem;
    color: #fff;
    line-height: .34rem;
    font-size: .2rem;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
    border-radius: .3rem;
    padding: 0 .13rem;
    background: rgba(0,0,0,0.6);
    border: 1px solid #fff;
    box-sizing: border-box;
    transition: all .3s;
    transform: scaleX(0)
}
.box-4 .point-text-left {
    left: 150%;
    transform-origin: left
}
.box-4 .point-text-right {
    right: 150%;
    transform-origin: right
}
.box-4 .point-1 {
    top: 1.2rem;
    left: 3.5rem
}
.box-4 .point-2 {
    top: 2.08rem;
    right: 2.22rem
}
.box-4 .point-3 {
    top: 1.6rem;
    left: 2.9rem
}
.box-4 .point-4 {
    top: 1.2rem;
    right: .76rem
}
.box-4 .point-5 {
    top: 2.57rem;
    left: 2.68rem
}
.box-4 .box-4-swiper .swiper-slide-active .point-box {
    opacity: 1;
    transition-delay: .1s !important
}
.box-4 .box-4-swiper .swiper-slide-active .point-text {
    transform: scaleX(1);
    transition-delay: .5s !important
}
.box-4 .box-4-swiper .swiper-slide-active .swiper-text {
    opacity: 1
}
.box-4 .box-4-bottom-swiper {
    width: 6.79rem;
    margin-left: .22rem;
    margin-top: -0.11rem;
    position: relative;
    z-index: 2
}
.box-4 .box-4-bottom-swiper .swiper-container {
    padding-bottom: .2rem
}
.box-4 .swiper-pagination {
    text-align: right;
    bottom: 0 !important
}
.box-4 .swiper-pagination-bullet {
    width: .2rem;
    height: .2rem;
    line-height: .2rem;
    font-size: .14rem;
    color: #fff;
    opacity: 1;
    background: #7e7e7e;
    bottom: 0 !important;
    text-align: center
}
.box-4 .swiper-pagination-bullet-active {
    color: #fff;
    background: #e5473d
}
.box-4 i {
    display: inline-block;
    position: absolute
}
.box-4 .icon-1 {
    width: .499rem;
    left: .3rem;
    bottom: .4rem;
    animation: float 1.5s ease infinite
}
.box-4 .box-4-btn {
    margin-top: .5rem;
    width: 3.45rem
}
.box-5 .title {
    width: 5.64rem;
    margin-bottom: 1.03rem
}
.box-5 .box-main {
    position: relative
}
.box-5 .box-5-swiper {
    width: 6.98rem;
    margin-left: .52rem
}
.box-5 .swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    margin: 0 auto
}
.box-5 .swiper-slide {
    width: 6.18rem
}
.box-5 i {
    display: inline-block;
    position: absolute
}
.box-5 .icon-1 {
    width: .54rem;
    left: .3rem;
    bottom: 0rem;
    animation: float 1.5s ease infinite
}
.box-5 .box-5-btn {
    margin-top: 1.8rem;
    margin-left: 3.7rem;
    width: 3.45rem
}
.box-6 .title {
    width: 5.64rem
}
.box-6 .box-main {
    position: relative
}

.box-6 .box-2-form {
    width: 6.5rem;
    margin-top: .6rem;
    margin-left: 1.2rem;
}

.box-6 .progress-text {
    font-size: .24rem;
    color: #282828;
    height: .24rem;
    line-height: .24rem;
    margin-top: 3rem;
    margin-left: 1.6rem;
    margin-bottom: .15rem
}
.box-6 .progress {
    width: 4.65rem;
    height: .16rem;
    margin-left: 1.6rem;
    background: #d2b3b2;
    border-radius: .2rem
}
.box-6 .progress .bar {
    width: 70%;
    height: .16rem;
    margin-left: 0;
    background: url("../images/bar.png") no-repeat;
    background-size: 100% 100%;
    border-radius: .2rem;
    position: relative
}
.box-6 .progress .progress-num {
    width: .49rem;
    height: .55rem;
    color: #fff;
    font-size: .2rem;
    text-align: center;
    line-height: .49rem;
    background: url("../images/icon-7.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.59rem;
    right: -0.25rem
}
.box-6 .box-6-btn {
    width: 3.71rem;
    margin-top: 4.97rem
}
.box-6 .box-6-list {
    height: .85rem;
    position: absolute;
    top: .73rem;
    right: 0;
    overflow: hidden
}
.box-6 .box-6-list li {
    width: 1.76rem;
    height: .34rem;
    color: #fffde5;
    text-align: center;
    font-size: .24rem;
    line-height: .34rem;
    margin-bottom: .16rem;
    background: url("../images/icon-8.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    right: -0.14rem
}
.box-6 .box-6-list li:nth-child(1) {
    right: 0
}
.box-6 .box-6-others {
    width: 6.88rem;
    margin-top: .9rem;
    position: relative;
    cursor: pointer
}
.box-6 i {
    display: inline-block;
    position: absolute
}
.box-6 .icon-1 {
    width: .82rem;
    top: -0.18rem;
    right: 1.3rem;
    z-index: 2;
    cursor: pointer
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: -9999;
    opacity: 0
}
.modal.active {
    opacity: 1;
    z-index: 9999
}
.modal .modal-close {
    display: inline-block;
    width: .33rem;
    height: .33rem;
    background: url("../images/close.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -0.76rem;
    right: .07rem;
    cursor: pointer;
    z-index: 4
}
.modal .modal-content {
    width: 7.27rem;
    height: 5.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.13rem;
    transform: translate(-50%, -50%);
    background: url("../images/m-bg-1.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%
}
.modal .modal-body {
    width: 5.18rem;
    margin-left: 1.18rem;
    padding-top: .01rem;
    position: relative
}
.modal .modal-form {
    margin-top: 2.2rem;
    width: 4.48rem
}
.modal form .input_text, .modal form .sel-box select {
    height: .62rem
}
.modal form .input_text {
    width: 1.42rem;
    margin-bottom: .2rem
}
.modal form .mobile {
    width: 2.95rem
}
.modal form .sel-box {
    width: 1.42rem;
    height: .62rem;
    margin-bottom: .47rem
}
.modal form .sign_btn {
    width: 3.04rem;
    height: 1.03rem
}
.modal form .sign_btn a {
    background: url("../images/m-btn-1.png") no-repeat;
    background-size: 100% 100%;
    animation: scale 1s ease infinite
}
.modal form .sign_btn::after {
    content: '';
    display: inline-block;
    width: .5rem;
    height: .52rem;
    background: url("../images/icon-11.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: -0.13rem;
    bottom: -0.03rem;
    animation: float 2s ease infinite
}
.modal-2 .modal-content {
    background: url("../images/m-bg-2.png") no-repeat;
    background-size: 100% 100%
}
.modal-3 .modal-content {
    height: 6.06rem;
    background: url("../images/m-bg-3.png") no-repeat;
    background-size: 100% 100%
}
.modal-3 .modal-form {
    margin-top: 2.46rem
}
.modal-4 .modal-content {
    height: 6.06rem;
    background: url("../images/m-bg-4.png") no-repeat;
    background-size: 100% 100%
}
.modal-4 .modal-form {
    margin-top: 2.46rem
}
.modal-5 .modal-content {
    height: 5.2rem;
    background: url("../images/m-bg-5.png") no-repeat;
    background-size: 100% 100%
}
.modal-5 .modal-form {
    margin-top: 1.6rem
}
.modal-5 .modal-form .sign_btn a {
    background: url("../images/m-btn-2.png") no-repeat;
    background-size: 100% 100%;
    animation: scale 1s ease infinite
}
.modal-type3 .modal-close {
    top: -0.32rem
}
.modal-type3 .modal-body {
    margin: auto;
    width: 100%
}
.modal-type3 .modal-content {
    width: 7.27rem;
    height: 6.19rem;
    margin-left: 0;
    background: url("../images/m-bg-6.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%
}
.modal-type3 .m-link {
    display: block;
    width: 3.44rem;
    height: .5rem;
    position: absolute;
    top: 5.4rem;
    left: 2rem
}
@keyframes hvr-buzz-out {
5% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
10% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
15% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
25% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
30% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
35% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
40% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
45% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0)
}
50% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0)
}
}
@keyframes scale {
0, 100% {
transform:scale(1)
}
50% {
transform:scale(0.9)
}
}
@keyframes scale1 {
0, 50% {
transform:scale(1)
}
25% {
transform:scale(0.9)
}
100% {
transform:scale(1)
}
}
@keyframes blink {
0, 100% {
opacity:0
}
50% {
opacity:1
}
}
@keyframes light {
0, 100% {
opacity:.5
}
50% {
opacity:1
}
}
@keyframes float {
0, 100% {
transform:translateY(-5px)
}
50% {
transform:translateY(5px)
}
}
@keyframes scaleBig {
0, 100% {
-webkit-transform:scale(1)
}
50% {
-webkit-transform:scale(0.5)
}
}