html {line-height: 1.15;-webkit-text-size-adjust: 100%}
body {margin: 0}

h1 {font-size: 2em;margin: .67em 0;}
h1 {display: block;font-weight: bold;}
h1 {margin-block-start: 0.67em;margin-block-end: 0.67em;margin-inline-start: 0px;margin-inline-end: 0px;}

p {display: block; margin: 0;}

img {border-style: none;}

div {display: block;}

ul {display: block;list-style-type: disc;padding-inline-start: 40px;}
ul {margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;}
ol, ul {margin: 0;padding: 0;list-style: none;}
li {display: list-item;text-align: -webkit-match-parent;}
a {text-decoration: none; display: block;color: inherit;}

/* 首页 CSS */
#App{width: 100%;height: auto;position: relative;left:0;right:0;top: 0;bottom: 0;overflow: hidden;}

/* head */
.header {
    display: flex;width: 75%; height: 180px; justify-content: space-between;align-items: center;
    color: #d49ad6;position: fixed;top: -10px;left: 50%;transform: translateX(-50%);z-index: 15;
}

.left-header .title {margin: 0;}
.left-header .title>img {width: 152px;}
.left-header .title:hover {cursor: pointer}

.right-header {position: absolute;top: 50%;right: 0;transform: translateY(-50%);}
.right-header .menu {list-style: none;margin: 0;padding: 0;overflow: hidden;font-size: 16px;position: relative;z-index: 15;}
.right-header .menu>li {float: left;min-width: 125px;text-align: center;}

.right-header .menu .menu-btn {display: inline-block;min-width: 100px;line-height: 36px;}
.right-header .menu .menu-btn {box-sizing: border-box;border: 1px solid transparent;border-radius: 50px;}
.menu .active .menu-btn {color: #923de1;font-weight: 700;background: #fff;}
.menu .active .menu-btn a{color: #923de1;}
.menu .menu-btn a{color: #d49ad6;}
.menu .menu-btn:hover {color: #fff;background: transparent;border: 1px solid #fff;cursor: pointer}

.style2 .menu .active .menu-btn {color: #fff;font-weight: 700;background: #fea01a;}
.style2 .menu .active .menu-btn a{color: #fff;}
.style2 .menu .menu-btn a{color: #ccc;}
.style2 {color: #999;}
.menu .menu-btn:hover {color: #fea01a;background: transparent;border: 1px solid #fea01a;cursor: pointer}
.menu .menu-btn:hover>a {color: #fea01a;}


/* SCROLL PAGE */
.scroll-box {position: relative;width: 100%;}

.section {-webkit-transition: top 1s cubic-bezier(.86,0,.03,1);margin: 0 auto; width: 100%;}
.section .box-container {display: flex;height: 100%;align-items: center;}
.section .box-container {width: 72%;max-height: 47.5rem;justify-content: space-between;margin-left: 3%;}

/* page 1 */
.section1 .box-container .left-content {flex: 1;height: 100%;position: relative;}

.section1 .left-content .title {width: 100%;line-height: 4rem;font-size: 3.5rem;font-weight: 700;color: #fff;margin-bottom: 2.5rem;opacity: 0;}
.section1 .left-content .content-box {width: 100%;position: absolute;top: 6%;left: 0;}
.section1 .left-content .title.show {transition: all .5s;-webkit-transition: all .5s;animation: page1-show .5s ease .5s;}
.section1 .left-content .title.show {-webkit-animation: page1-show .5s ease .5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}

.section1 .left-content .desc-box.show {transition: all .5s;-webkit-transition: all .5s;animation: page1-show .5s ease .75s;}
.section1 .left-content .desc-box.show {-webkit-animation: page1-show .5s ease .75s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section1 .left-content .desc-box>p {line-height: 2.8125rem;font-size: 1.625rem;color: #e3ebfe;}

.section1 .left-content .btn-row.show {transition: all .5s;-webkit-transition: all .5s;animation: page1-show .5s ease 1.2s;}
.section1 .left-content .btn-row.show {-webkit-animation: page1-show .5s ease 1.2s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section1 .left-content .btn-row {overflow: hidden;opacity: 0;}
.section1 .left-content .btn-row .btn1 {background: #ffa326;}
.section1 .left-content .btn-row .btn2 {background: #2196f3;margin-left: 1.25rem;}
.section1 .left-content .btn-row>div {float: left;width: 13.625rem;height: 3.75rem;line-height: 3.75rem;text-align: center;}
.section1 .left-content .btn-row>div {font-size: 1.25rem;color: #fff;border-radius: 1.875rem;}
.section1 .buy-box .box-left .btn a{color: #fff}

.section1 .box-container .right-content {display: flex;flex-flow: column;justify-content: flex-end;align-items: flex-end;position: relative;}
.section1 .right-content>img.show {transition: all .5s;-webkit-transition: all .5s;animation: page1-show .5s ease 1.4s;}
.section1 .right-content>img.show {-webkit-animation: page1-show .5s ease 1.4s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section1 .right-content>img {width: 42.5rem;opacity: 0;margin: 0 -3% 10% 2%;}

@keyframes page1-show {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

@-webkit-keyframes page1-show {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

/* page 2 */
.section2 .content-box {display: flex;width: 100%;text-align: center;flex-flow: column;align-items: center;padding-bottom: 5%;}
.section2 .content-box .title {width: 100%;line-height: 46px;font-size: 40px;font-weight: 400;color: #001c33;margin-bottom: 50px;opacity: 0;}
.section2 .content-box .title.show {transition: all .5s;-webkit-transition: all .5s;animation: show-page2 .5s ease;}
.section2 .content-box .title.show {-webkit-animation: show-page2 .5s ease;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section2 .content-box .card-box {width: 84%;}

.section2 .card-box .box-row {width: 100%;display: flex;justify-content: space-around;opacity: 0;}
.section2 .card-box .box-row:first-child {margin-bottom: 20px;}
.section2 .card-box .box-row:first-child.show {transition: all .5s;-webkit-transition: all .5s;animation: show-page2 .5s ease .25s;}
.section2 .card-box .box-row:first-child.show {-webkit-animation: show-page2 .5s ease .25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section2 .card-box .box-row .box-item {width: 40%;height: 270px;text-align: center;background: #fff;}
.section2 .card-box .box-row .box-item {box-sizing: border-box;border-radius: 10px;border-top: 1px solid hsla(0,0%,86.3%,.3);box-shadow: 0 5px 10px hsl(0deg 0% 86% / 40%);}
.section2 .card-box .box-row .box-item>img {height: 120px;}
.section2 .card-box .box-row .item-title {font-size: 20px;color: #1d274e;margin-top: 10px;}
.section2 .card-box .box-row .item-desc {width: 73%;line-height: 24px;font-size: 13px;color: #747da1;margin: 10px auto 0 auto;}
.section2 .card-box .box-row:nth-child(2).show {transition: all .5s;-webkit-transition: all .5s;animation: show-page2 .5s ease .5s;}
.section2 .card-box .box-row:nth-child(2).show {-webkit-animation: show-page2 .5s ease .5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}

 @keyframes show-page2 {
     0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
     to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
 }

@-webkit-keyframes show-page2 {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

/* page 3 */
.section3 .content-box {width: 100%;margin-bottom: 5%;}
.section3 .content-box .left-content {float: left;width: 35%;height: 100%;}
.section3 .left-content .title.show {transition: all .5s;-webkit-transition: all .5s;animation: show-page3 .5s ease;}
.section3 .left-content .title.show {-webkit-animation: show-page3 .5s ease;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section3 .left-content .title {line-height: 48px;font-size: 42px;font-weight: 400;color: #001c33;margin-bottom: 30px;opacity: 0;}
.section3 .left-content .desc.show {transition: all .5s;-webkit-transition: all .5s;animation: show-data-v-5e21f95b .5s ease .25s;}
.section3 .left-content .desc.show {-webkit-animation: show-page3 .5s ease .25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.section3 .left-content .desc {font-size: 24px;color: #9aa2bb;margin-bottom: 40px;opacity: 0;}
.section3 .left-content>img {width: 22vw;min-width: 270px;opacity: 0;}
.section3 .left-content>img.show {transition: all .5s;-webkit-transition: all .5s;animation: show-page3 .5s ease .4s;}
.section3 .left-content>img.show {-webkit-animation: show-page3 .5s ease .4s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}

.section3 .content-box .right-content {float: right;width: 65%;height: 100%;position: relative;top: -5%;}
.section3 .right-content .map-img {width: 100%;height: 0;padding-top: 55%;position: relative;}
.section3 .right-content .map-img img {width: 100%;height: 100%;position: absolute;top: 0;right: 0;opacity: .6;}


.map-img .position-item {width: 12px;height: 12px;position: relative;}
.map-img .position-item .dot {width: 100%;height: 100%;background: #7b99ef;border-radius: 100%;position: absolute;top: 0;left: 0;}

.position-item1 .move-dot, .position-item3 .move-dot, .position-item9 .move-dot, .position-item11 .move-dot, .position-item15 .move-dot {
    animation: mapPulser-data-v-5e21f95b 2s linear 1.5s infinite;-webkit-animation: show-mapdot 2s linear 1.5s infinite;
}
.position-item2 .move-dot, .position-item4 .move-dot, .position-item6 .move-dot, .position-item8 .move-dot, .position-item10 .move-dot {
    animation: mapPulser-data-v-5e21f95b 3s linear .5s infinite;-webkit-animation: show-mapdot 3s linear .5s infinite;
}
.position-item12 .move-dot, .position-item14 .move-dot, .position-item16 .move-dot, .position-item18 .move-dot, .position-item20 .move-dot {
    animation: mapPulser-data-v-5e21f95b 3s linear 1s infinite;-webkit-animation: show-mapdot 3s linear 1s infinite
}

.position-item .move-dot {width: 88px;height: 88px;background: rgba(48,98,243,.5);border-radius: 100%;top: -38px;left: -38px;position: absolute;}
.position-item .move-dot {box-shadow: 0 0 5px rgb(48 98 243 / 80%);animation: show-mapdot 3s linear infinite;-webkit-animation: show-mapdot 3s linear infinite;}

.map-img .position-item1 {position: absolute;top: 25%;left: 3%;}
.map-img .position-item2 {position: absolute;top: 32%;left: 11%;}
.map-img .position-item3 {position: absolute;top: 32%;left: 20%;}
.map-img .position-item4 {position: absolute;top: 39%;left: 25%;}
.map-img .position-item5 {position: absolute;top: 43%;left: 15%;}
.map-img .position-item6 {position: absolute;top: 61%;left: 28%;}
.map-img .position-item7 {position: absolute;top: 69%;left: 34%;}
.map-img .position-item8 {position: absolute;top: 82%;left: 31%;}
.map-img .position-item9 {position: absolute;top: 95%;left: 26%;}
.map-img .position-item10 {position: absolute;top: 37%;left: 51%;}
.map-img .position-item11 {position: absolute;top: 27%;left: 63%;}
.map-img .position-item12 {position: absolute;top: 52%;left: 54%;}
.map-img .position-item13 {position: absolute;top: 55%;left: 60%;}
.map-img .position-item14 {position: absolute;top: 84%;left: 52%;}
.map-img .position-item15 {position: absolute;top: 51%;left: 70%;}
.map-img .position-item16 {position: absolute;top: 46%;left: 78%;}
.map-img .position-item17 {position: absolute;top: 44%;left: 85%;}
.map-img .position-item18 {position: absolute;top: 63%;left: 75%;}
.map-img .position-item19 {position: absolute;top: 66%;left: 81%;}
.map-img .position-item20 {position: absolute;top: 80%;left: 87%;}

@keyframes show-page3 {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1} }

@-webkit-keyframes show-page3 {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

@keyframes show-mapdot {
    0% {transform: scale(0) translateZ(0);-ms-transform: scale(0) translateZ(0);-webkit-transform: scale(0) translateZ(0)}
    90% {transform: scale(1) translateZ(0);-ms-transform: scale(1) translateZ(0);-webkit-transform: scale(1) translateZ(0)}
    to {opacity: 0} }

@-webkit-keyframes show-mapdot {
    0% {transform: scale(0) translateZ(0);-ms-transform: scale(0) translateZ(0);-webkit-transform: scale(0) translateZ(0)}
    90% {transform: scale(1) translateZ(0);-ms-transform: scale(1) translateZ(0);-webkit-transform: scale(1) translateZ(0)}
    to {opacity: 0}
}

/* page 4 */
.section4 .box-container {width:86%; width: 86vw;padding-bottom: 250px;margin-bottom: 2%;overflow: hidden}
.section4 .box-container {display: block; height: auto;}
.section4 .box-container .title {line-height: 48px;text-align: center;font-size: 42px;font-weight: 400;color: #001c33;margin-bottom: 60px}
.section4 .box-wrap {
    display: flex; width: 100%; height: 100%; justify-content: center;
    align-items: center;box-sizing: border-box;padding-top: 180px;position: absolute;top: 0;left: 0;
}
.box-container .swiper-box {position: relative;}
.swiper-box .swiper-bg {
    width: 80%;height: 300px;background-image: linear-gradient(#5c5bf9, #3bb0ed);
    border-radius: 20px;box-sizing: border-box;padding: 50px 180px;margin: 0 auto;
    text-align: center;
}
.swiper-box .swiper-bg>img {width: 37px}
.swiper-box .swiper-wrapper {width: 84%;position: absolute;top: 120px;left: 0;}

.swiper-box .swiper-slide {float: left;width: 24vw;min-height: 330px;background: #fff;}
.swiper-box .swiper-slide {border-radius: 20px;box-shadow: 0 10px 30px -5px hsla(0, 0%, 60%, .5);box-sizing: border-box;}
.swiper-box .swiper-slide {padding: 90px 40px 30px 40px; position: relative}
.swiper-box .swiper-slide {transition: all .5s;-webkit-transition: all .5s}

.swiper-slide .avatar {
    width: 80px;height: 80px;border-radius: 100%;border: 5px solid #fff;position: absolute;top: -20px;left: 40px;overflow: hidden
}
.swiper-slide .avatar>img {width: 100%;height: 100%}
.swiper-slide .name {font-size: 22px;color: #929ab0;margin-bottom: 20px}
.swiper-slide-active .name {color: #495166}
.swiper-slide .desc {line-height: 30px;font-size: 16px;color: #929ab0;margin-bottom: 30px}
.swiper-slide-active .desc {color: #67696e}
.swiper-slide .star {position: absolute;bottom: 30px;right: 40px}
.swiper-slide .star>img {float: right;width: 20px;opacity: .7;margin: 0 5px}
.swiper-slide-active .star>img {opacity: 1}

/* page 5 */
.section5 .box-container {width: 75%;margin-bottom: 5%; display: block;}
.section5 .box-container .title {line-height: 48px;text-align: center;font-size: 42px;font-weight: 400;color: #001c33;margin-bottom: 60px}
.section5 .box-container .content-box {background: #f3f2f8;border-radius: 20px;position: relative;padding: 10px 60px}
.section5 .box-container .content-box:before {
    content: "";border: 16px solid transparent;border-top: none;border-bottom: 26px solid #f3f2f8;position: absolute;
    top: -26px;left: 50%;transform: translateX(-16px)
}

.section5 .content-box .set-meal-box {overflow-x: auto;display: flex;align-items: flex-start;padding: 60px 0}
.section5 .content-box .set-meal-box .box-item {
    margin-right: 20px;width: 23%;display: flex;flex-flow: column;flex-shrink: 0;justify-content: center;
    align-items: center;border: 4px solid #fff;background: #fff;border-radius: 20px;position: relative;
    cursor: pointer;box-sizing: border-box
}
.section5 .content-box .set-meal-box .box-item.active {border-color: #003df0;}
.set-meal-box .box-item.svip.active {background: #fff;border-color: #d79e50}
.set-meal-box .box-item.active .time {font-weight: 700}
.set-meal-box .box-item.svip.active .time {color: #d79e50}
.set-meal-box .box-item.active .price {color: #fff;background: #003df0}
.set-meal-box .box-item.svip.active .price {background: #d79e50;background: linear-gradient(90deg, #e1bd7b 10%, #d79e50 90%)}
.set-meal-box .box-item.active .desc .day {color: #ff9c25}
.set-meal-box .box-item.active .buy-btn {color: #fff;background: #003df0;border: 1px solid transparent}
.set-meal-box .box-item.svip.active .buy-btn {background: #d79e50;background: linear-gradient(90deg, #e1bd7b 10%, #d79e50 90%)}

.set-meal-box .box-item.svip {background: #fafafc;border-color: #fafafc}
.set-meal-box .box-item>img {margin-top: 40px;height: 70px}
.set-meal-box .box-item .time {line-height: 30px;font-size: 24px;color: #000;margin: 20px 0}
.set-meal-box .box-item .price {
    width: 100%;height: 70px;line-height: 72px;text-align: center;color: #333;
    border-top: 1px solid #f0eff1;border-bottom: 1px solid #f0eff1
}
.set-meal-box .box-item .price>span {font-size: 16px}
.set-meal-box .box-item .price .money {font-size: 36px;font-weight: 700;margin-right: 10px}
.set-meal-box .box-item .desc {height: 50px;line-height: 50px;font-size: 16px;color: grey}
.set-meal-box .box-item .buy-btn {
    margin-bottom: 40px;width: 160px;height: 45px;line-height: 43px;text-align: center;font-size: 16px;
    color: #333;box-sizing: border-box;border: 1px solid #d4d4d5;border-radius: 25px;margin-top: 10px
}
.set-meal-box .box-item.svip .tooltip {
    margin-bottom: -4px;width: calc(100% + 8px);color: #fff;text-align: center;line-height: 32px;
    background: #d79e50;border-bottom-right-radius: inherit;border-bottom-left-radius: inherit
}
.set-meal-box .box-item .tag {
    width: 120px;height: 32px;line-height: 32px;text-align: center;font-size: 16px;color: #fff;
    background: #f4624e;position: absolute;top: -20px;left: -4px;
    border-top-left-radius: 12px;border-bottom-right-radius: 12px;
}
.set-meal-box .box-item .tag2 {background: #d79e50}
.section5 .content-box .desc-box {position: absolute;right: 0;bottom: 32px;left: 0}
.section5 .content-box .desc-box>p {text-align: center;line-height: 26px;font-size: 16px;color: #747da1}


/* page 6 */
.section6 .box-container {
    display: flex;height: 100%;justify-content: center;align-items: center;box-sizing: border-box;padding-top: 180px;
    position: absolute;top: 0;left: 0; width: 100%;
}
.box-container .dl-box {
    display: flex;width: 75%;height: 350px;flex-flow: column;justify-content: center;align-items: center;
    background-image: linear-gradient(#5c5bf9,#3bb0ed);border-radius: 20px;margin: 0 auto 60px auto;
}
.dl-box .dl-desc.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-dl .5s ease;
    -webkit-animation: show-dl .5s ease;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.dl-box .dl-desc {font-size: 24px;color: #e2e5fd;margin-top: 10px;opacity: 0;}
.box-container .dl-btn.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-dl .5s ease .25s;
    -webkit-animation: show-dl .5s ease .25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.box-container .dl-btn {
    width: 200px;height: 60px;line-height: 60px;text-align: center;background: #edf5ff;font-size: 21px;color: #5c62f9;
    border-radius: 40px;margin-top: 40px;opacity: 0;
}
@keyframes show-dl {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

@-webkit-keyframes show-dl {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

/* page6 - footer */
.page-footer {width: 100%;}
.page-footer .container {
    display: flex;width: 100%;height: 240px;justify-content: space-between;align-items: center;
    box-sizing: border-box;padding: 0 130px;border-top: 3px solid rgba(228,230,231,.5);
    border-bottom: 3px solid rgba(228,230,231,.5);margin: 0 auto;
}
.page-footer .container .left-content {display: flex;flex-flow: column;}
.container .left-content .title {
    font-size: 16px;font-weight: 700;color: #4c4c4c;box-sizing: border-box;padding-left: 42px;margin-bottom: 25px;
}
.container .left-content .box {display: flex;justify-content: space-around;}
.left-content .box .box-item {
    display: flex;width: 120px;flex-flow: column;justify-content: center;align-items: center;
    font-size: 16px;color: #4c4c4c;
}
.left-content .box .box-item .img {
    z-index: 1;overflow: hidden;display: flex;width: 40px;height: 50px;justify-content: center;align-items: center;margin-bottom: 5px;
}
.left-content .box .box-item .text {font-size: 16px;}
.page-footer .container .right-content {display: flex;min-width: 200px;justify-content: space-between;}
.container .right-content .menu {width: auto;height: 100%;list-style: none;margin: 0 10px 0 0;padding: 0;}
.right-content .menu>li {line-height: 28px;font-size: 16px;color: #4c4c4c;}
.right-content .menu>li.active {font-weight: 700;color: #4c4c4c;margin-bottom: 10px;}
.page-footer .copyright-info {line-height: 100px;text-align: center;font-size: 12px;color: #4c4c4c;}

/* APP DOWN */
.page-container {width: 75%;box-sizing: border-box;padding-left: 10%; }
.page-container .content-box {display: flex;height: 445px;justify-content: space-between;align-items: center; margin-top: 120px;}
.page-container .content-box .left-content {min-width: 50%;box-sizing: border-box;padding-right: 10px;margin: 0 60px 0 6%;}
.page-container .left-content .title.show {transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease .25s;}
.page-container .left-content .title.show {-webkit-animation: show-app .5s ease .25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}
.appDown .left-content .title {font-size: 32px;color: #363636;margin-bottom: 15px;opacity: 0;}
.appDown .left-content .desc.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease .5s;
    -webkit-animation: show-app .5s ease .5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .desc {line-height: 24px;font-size: 20px;color: #454647;margin-bottom: 4px;opacity: 0;}
.appDown .left-content .desc-mb {margin-bottom: 30px;}
.appDown .left-content .desc:nth-of-type(2).show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease .75s;
    -webkit-animation: show-app .5s ease .75s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .desc.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease .5s;
    -webkit-animation: show-app .5s ease .5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .desc-box.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease 1s;
    -webkit-animation: show-app .5s ease 1s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .desc-box {color: #7f8084;margin-bottom: 50px;opacity: 0;}
.appDown .desc-box .box-row {display: flex;align-items: center;font-size: 18px;margin-bottom: 15px;}
.appDown .desc-box .box-row>img {width: 24px;margin-right: 20px;}

.appDown .left-content .dl-row.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease 1.25s;
    -webkit-animation: show-app .5s ease 1.25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .dl-row-mb {margin-bottom: 20px;}
.appDown .left-content .dl-row {position: relative;opacity: 0;}
.appDown .dl-row .dl-btn {
    float: left;width: 200px;height: 50px;line-height: 50px;text-align: center;font-size: 18px;
    color: #fff;background: #fea01a;border-radius: 10px; margin: 0 5px 20px 5px;
}
.bgBlack {background: #000!important;}
.appDown .dl-row .dl-btn-desc {position: absolute;top: 50%;left: 250px;transform: translateY(-50%);}
.appDown .dl-row .dl-btn-desc>p {line-height: 20px;text-align: center;font-size: 14px;color: #a3a4a6;}
.appDown .left-content .dl-row.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease 1.25s;
    -webkit-animation: show-app .5s ease 1.25s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .left-content .dl-row-mb {margin-bottom: 20px;}
.appDown .left-content .dl-row {position: relative;opacity: 0;}
.appDown .right-content img.show {
    transition: all .5s;-webkit-transition: all .5s;animation: show-app .5s ease 1.5s;
    -webkit-animation: show-app .5s ease 1.5s;animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;
}
.appDown .right-content .img1, .right-content .img2 {width: 545px;}
.appDown .right-content .img3 {width: 447px;}
.right-content .img4 {width: 590px;}

.appDown .right-content img {opacity: 0;}
.page-container .switch-menu {display: flex;width: 70%;justify-content: space-around;align-items: center;margin: 40px auto 30px auto;}
.switch-menu .menu-item {display: flex;flex-flow: column;justify-content: center;align-content: center;}
.switch-menu .menu-item .img {z-index: 1;overflow: hidden;height: 70px;display: inline-flex;justify-content: center;align-items: center;}
.switch-menu .menu-item .text.active {color: #333;}
.switch-menu .menu-item .text {text-align: center;font-size: 16px;color: #ccc; line-height: 25px;}

.down-page-footer {width: 100%;height: 170px;background: #4d4d4d;padding-top: 15px;position: relative;bottom: 0;left: 0;}
.down-page-footer, .page-footer .container {box-sizing: border-box;overflow: hidden;}
.down-page-footer .container {
    display: flex;width: 70%;height: 115px;justify-content: space-between;padding-right: 20px;
    border-bottom: 1px solid #999;margin-left: 15%;
}
.down-page-footer .container .left-content {display: flex;flex-flow: column; }
.down-page-footer .container .left-content .title {font-size: 16px;color: #fff;box-sizing: border-box;padding-left: 42px;margin-bottom: 10px;}
.down-page-footer .container .left-content .box {display: flex;justify-content: space-around;}
.down-page-footer .left-content .box .box-item {
    display: flex;width: 120px;flex-flow: column;justify-content: center;align-items: center;font-size: 16px;color: #fff;
}
.down-page-footer .left-content .box .box-item .img {
    z-index: 1;overflow: hidden;display: flex;width: 40px;height: 40px;justify-content: center;align-items: center;margin-bottom: 5px;
}
.down-page-footer .container .right-content {display: flex;min-width: 200px;justify-content: space-between;}
.down-page-footer .container .right-content .menu {width: auto;height: 100%;list-style: none;margin: 0;padding: 0;}
.down-page-footer .right-content .menu>li.active {color: #fff;}
.down-page-footer .right-content .menu>li {line-height: 24px;font-size: 14px;color: #999;}
.down-page-footer .right-content .menu>li {line-height: 24px;font-size: 14px;color: #999;}
.down-page-footer .copyright-info {line-height: 30px;text-align: center;font-size: 12px;color: #ccc;}

@keyframes show-app {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}

@-webkit-keyframes show-app {
    0% {transform: translateY(100%) translateZ(0);-webkit-transform: translateY(100%) translateZ(0)}
    to {transform: translateY(0) translateZ(0);-webkit-transform: translateY(0) translateZ(0);opacity: 1}
}
.h5-page-footer {display: none;}

/*
 media 查询器
 */
@media screen and (max-width: 960px) {
    html {font-size: 16px;}
    /* head */
    .header { width: 88%;}
    .left-header .title>img {width: 140px;}

    .h5 { display: none;}

    /* SCROLL PAGE */
    .section .box-container {width: 88%;max-height: 550px;margin-left: 6%;}
    .section1 .left-content .title {line-height: 40px;font-size: 32px;margin-bottom: 24px;}
    .section1 .left-content .desc-box>p {font-size: 18px;line-height: 36px;}
    .section1 .left-content .btn-row>div {width: 150px ;height: 38px;line-height: 40px;font-size: 14px; margin-top: 20px;}
    .section1 .right-content>img {width: 390px;}
    .section1 .left-content .btn-row .btn2 {background: #2196f3;margin-left: 1rem;}

     /* page 2 */
    .section2 .content-box {padding-bottom: 5%; margin-top: 12%;}
    .section2 .content-box .title {font-size: 30px;}
    .section2 .content-box .card-box {width: 100%;}
    .section2 .card-box .box-row .box-item {height: 200px;}
    .section2 .card-box .box-row .box-item>img {height: 100px;}
    .section2 .card-box .box-row .item-title {font-size: 16px;}
    .section2 .card-box .box-row .item-desc {line-height: 20px;font-size: 12px;}

    /* page 3 */
    .section3 .content-box {margin-bottom: 7%;}
    .section3 .left-content>img {min-width: 230px;}
    .section3 .content-box .left-content {width: 40%;}
    .section3 .content-box .right-content {width: 60%;}
    .section3 .left-content .title {line-height: 30px;font-size: 26px;margin-bottom: 20px;}
    .section3 .left-content .desc {font-size: 18px;}

    /* page 4 */
    .section4 .box-container {padding-bottom: 86px;}
    .section4 .box-container .title {font-size: 28px;}

    .swiper-box .swiper-bg {width: 88%;height: 240px;margin: 0 auto 60px auto}
    .swiper-box .swiper-slide  {min-height: 225px;padding: 50px 20px 10px 20px}
    .swiper-slide .avatar {width: 54px;height: 54px;left: 20px}
    .swiper-slide .name {font-size: 14px; }
    .swiper-slide .desc {line-height: 18px;font-size: 12px}
    .swiper-slide .star {right: 20px}
    .swiper-slide .star>img {margin: 0 3px}

    /* page 5 */
    .section5 .box-container {width: 88%}
    .section5 .box-container .title{ padding-top: 15px; line-height: 40px; font-size: 30px; margin-bottom: 30px;}
    .section5 .box-container .set-meal-box { height: auto; overflow-x: auto;}
    .section5 .box-container .set-meal-box .tag{ top: -14px; width: 100px; height: 28px; font-size: 14px; line-height: 28px;}
    .section5 .box-container .content-box {min-height: 520px;}

    .set-meal-box .box-item .buy-btn {width: 120px;height: 30px;line-height: 28px;font-size: 12px;}
    .set-meal-box .box-item>img {height: 45px}
    .set-meal-box .box-item .time {font-size: 12px}
    .set-meal-box .box-item .price .money {font-size: 20px}
    .set-meal-box .box-item .desc {font-size: 12px}
    .section5 .content-box .desc-box>p {line-height: 22px;font-size: 12px;}

    /* page 6 */
    .box-container .dl-box {height: 220px;margin: 120px auto 40px auto; width: 100%;}
    .dl-box .dl-desc {font-size: 20px;}
    .box-container .dl-btn {width: 180px;height: 50px;line-height: 50px;font-size: 18px;}

    /* footer */
    .page-footer .container {padding: 0 60px; height: 180px;}
    .left-content .box .box-item {width: 90px;}
    .left-content .box .box-item .img img {min-width: 160px;min-height: 160px;}
    .page-footer .copyright-info {line-height: 70px;}

    /* app down */
    menu {width: 86%;}
    .page-container .content-box {height: 290px;margin-top: 180px; }
    .appDown .page-container .content-box .left-content {min-width: 50% }
    .appDown .left-content .title {font-size: 24px; margin-bottom: 10px;padding: 0}
    .appDown .left-content {min-width: 50%;}
    .appDown .left-content .desc {line-height: 16px;font-size: 14px;}
    .appDown .left-content .desc-box {color: #7f8084;margin-bottom: 20px;}
    .appDown .left-content .desc-mb {margin-bottom: 15px;}
    .appDown .desc-box .box-row {font-size: 13px;margin-bottom: 6px;}
    .appDown .desc-box .box-row>img {width: 16px;margin-right: 10px;}
    .appDown .dl-row .dl-btn {width: 150px;height: 40px;line-height: 40px;font-size: 14px; margin: 0 5px 10px 5px;}
    .appDown .dl-row .dl-btn>img {width:150px; height: 40px;}
    .appDown.left-content .dl-row-mb {margin-bottom: 10px;}
    .appDown .right-content .img1, .right-content .img2 {width: 360px;}
    .appDown .right-content .img3 {width: 290px;}
    .right-content .img4 {width: 370px;}

    .page-container .switch-menu {width: 90%;margin: 50px auto;}
    .switch-menu .menu-item .img {height: 55px;width: 55px;}
    .switch-menu .menu-item .text {font-size: 14px;}
    .down-page-footer {position: relative;}
    .down-page-footer .container {width: 76%;height: 115px; margin-left: 10%;}
    .down-page-footer .container .left-content .title {font-size: 14px;padding-left: 40px;}
    .down-page-footer .left-content .box .box-item {width: 120px;font-size: 14px;}

}

@media screen and (min-width: 961px) and (max-width: 1100px) {
    html {font-size: 16px;}
    /* head */
    .header {height: 140px;}
    .right-header .menu {font-size: 14px;}
    .right-header .menu .menu-btn {min-width: 90px;line-height: 28px;}
    .h5 { display: none;}

    /* SCROLL PAGE */
    .section .box-container {width: 75%;max-height: 700px;margin-left: 12.5%;margin-top: 5%;}
    .section1 .left-content .content-box {top: 5%;}
    .section1 .left-content .title {line-height: 40px;font-size: 32px;margin-bottom: 24px;}

    .section1 .left-content .desc-box {margin-bottom: 30px;}
    .section1 .left-content .desc-box {width: 100%;margin-bottom: 2.5rem;opacity: 0;}
    .section1 .left-content .desc-box>p {font-size: 18px;line-height: 36px;}
    .section1 .left-content .btn-row>div {width: 160px;height: 38px;line-height: 40px;font-size: 16px;}
    .section1 .right-content>img {width: 440px;}

    /* page 2 */
    .section2 .content-box {padding-bottom: 6%; margin-top: 8%;}
    .section2 .content-box .title {font-size: 30px;}
    .section2 .content-box .card-box {width: 98%;}
    .section2 .card-box .box-row .box-item {height: 220px;}
    .section2 .card-box .box-row .box-item>img {height: 110px;}
    .section2 .card-box .box-row .item-title {font-size: 16px;}
    .section2 .card-box .box-row .item-desc {line-height: 20px;font-size: 13px;}

    /* page 3 */
    .section3 .content-box {margin-bottom: 6%;}
    .section3 .left-content .title {line-height: 30px;font-size: 26px;margin-bottom: 20px;}
    .section3 .left-content .desc {font-size: 18px;margin-bottom: 30px;}
    .section3 .left-content>img {min-width: 250px;}

    .section3 .content-box .left-content {width: 40%;}
    .section3 .content-box .right-content {width: 60%;}

    /* page 4 */
    .section4 .box-container {padding-bottom: 200px;}
    .section4 .box-container .title {font-size: 30px;}

    .swiper-box .swiper-slide  {padding: 60px 20px 10px 20px;}
    .swiper-slide .avatar {width: 60px;height: 60px;left: 20px}
    .swiper-slide .name {font-size: 16px}
    .swiper-slide .star {right: 20px}
    .swiper-slide .star>img {margin: 0 3px}

    /* page 5 */
    .section5 .box-container {width: 80%;margin-bottom: 5%}
    .section5 .box-container .title{ padding-top: 45px; line-height: 40px; font-size: 32px;}
    .section5 .content-box .set-meal-box {height: 400px}
    .set-meal-box .box-item>img {height: 50px}
    .set-meal-box .box-item .time {margin: 12px 0; font-size: 12px}
    .set-meal-box .box-item .price {font-size: 20px;}
    .set-meal-box .box-item .buy-btn {width: 120px;height: 30px;line-height: 28px;font-size: 12px}
    .set-meal-box .box-item .tooltip {font-size: 12px}
    .set-meal-box .box-item .tag {top: -12px;width: 80px;height: 24px;line-height: 24px;font-size: 12px}
    .section5 .content-box .desc-box>p {line-height: 22px;font-size: 12px}
    .set-meal-box .box-item .price .money {font-size: 20px}
    .set-meal-box .box-item .desc {font-size: 12px}

    /* page 6 */
    .box-container .dl-box {height: 220px;margin: 0 auto 30px auto; width: 100%;}
    .dl-box .dl-desc {font-size: 20px;}
    .box-container .dl-btn {width: 180px;height: 50px;line-height: 50px;font-size: 18px;}

    /* footer */
    .page-footer .container {padding: 0 60px; height: 180px;}
    .left-content .box .box-item {width: 90px;}
    .left-content .box .box-item .img img {min-width: 160px;min-height: 160px;}
    .page-footer .copyright-info {line-height: 70px;}

    /* app down */
    menu {width: 86%;}
    .page-container {width: 85%;}
    .page-container .content-box {height: 300px;margin-top: 220px; }
    .appDown .left-content .title {font-size: 28px; margin-bottom: 10px;padding: 0}
    .appDown .left-content {min-width: 45%;}
    .appDown .left-content .desc {line-height: 16px;font-size: 14px;}
    .appDown .left-content .desc-box {color: #7f8084;margin-bottom: 20px;}
    .appDown .left-content .desc-mb {margin-bottom: 15px;}
    .appDown .desc-box .box-row {font-size: 13px;margin-bottom: 6px;}
    .appDown .desc-box .box-row>img {width: 16px;margin-right: 10px;}
    .appDown .dl-row .dl-btn {width: 165px;height: 50px;line-height: 50px;font-size: 14px; margin: 0 5px 10px 5px;}
    .appDown .dl-row .dl-btn>img {width:165px; height: 50px;}
    .appDown.left-content .dl-row-mb {margin-bottom: 10px;}
    .appDown .right-content .img1, .right-content .img2 {width: 360px;}
    .appDown .right-content .img3 {width: 290px;}
    .right-content .img4 {width: 370px;}

    .page-container .switch-menu {width: 90%;margin: 50px auto;}
    .switch-menu .menu-item .img {height: 45px;width: 45px;}
    .switch-menu .menu-item .text {font-size: 14px;}

    .down-page-footer { position: relative;}
    .down-page-footer .container {width: 76%;height: 115px; margin-left: 10%;}
    .down-page-footer .container .left-content .title {font-size: 14px;padding-left: 40px;}
    .down-page-footer .left-content .box .box-item {width: 120px;font-size: 14px;}


}

@media screen and (min-width: 1101px) and (max-width: 1600px) {
    html {font-size: 16px;}
    /* head */
    .header {height: 140px;}
    .left-header .title>img {width: 120px;}
    .right-header .menu {font-size: 14px;}
    .right-header .menu .menu-btn {min-width: 90px;line-height: 28px;}
    .h5 { display: none;}

    /* SCROLL PAGE */
    .section .box-container {width: 75%;max-height: 700px;margin-left: 12.5%;margin-top: 4%;}
    .section1 .left-content .content-box {top: 4%;}
    .section1 .left-content .title {line-height: 50px;font-size: 38px;margin-bottom: 30px;}

    .section1 .left-content .desc-box {margin-bottom: 30px;}
    .section1 .left-content .desc-box {width: 100%;margin-bottom: 2.5rem;opacity: 0;}
    .section1 .left-content .desc-box>p {font-size: 18px;line-height: 36px;}
    .section1 .left-content .btn-row>div {width: 180px;height: 50px;line-height: 50px;font-size: 18px;}
    .section1 .right-content>img {width: 480px;}

    /* page 2 */
    .section2 .content-box {padding-bottom: 6%; margin-top: 5%;}
    .section2 .content-box .title {line-height: 36px;font-size: 32px;margin-bottom: 30px;}
    .section2 .content-box .title.show {margin: 18px auto;}
    .section2 .card-box .box-row .box-item {height: 220px;}
    .section2 .card-box .box-row .box-item>img {height: 110px;}
    .section2 .card-box .box-row .item-title {margin-top: 0;}

    /* page 3 */
    .section3 .content-box {margin-bottom: 5%;}
    .section3 .left-content .title {line-height: 40px;font-size: 34px;margin-bottom: 30px;}
    .section3 .left-content .desc {font-size: 22px;}
    .section3 .left-content>img {min-width: 250px;}

    .section3 .content-box .right-content {width: 60%;}

    /* page 4 */
    .section4 .box-container {padding-bottom: 240px;}
    .section4 .box-container .title {font-size: 32px;}

    .swiper-box .swiper-slide  {min-height: 300px;padding: 75px 10px 10px 10px}
    .swiper-slide .avatar {width: 70px;height: 70px}
    .swiper-slide .star {bottom: 20px}

    /* page 5 */
    .section5 .box-container .title{padding-top:45px; margin-bottom: 35px; line-height: 40px; font-size: 30px; }
    .section5 .box-container .content-box {padding: 10px 30px}
    .section5 .content-box .set-meal-box {padding: 30px 0;height: 440px}
    .set-meal-box .box-item>img {height: 60px}
    .set-meal-box .box-item .time {font-size: 16px;margin: 15px 0}
    .set-meal-box .box-item .price {height: 60px;line-height: 62px}
    .set-meal-box .box-item .price .money {font-size: 24px}
    .set-meal-box .box-item .desc {height: 40px;line-height: 40px;font-size: 14px}
    .set-meal-box .box-item .buy-btn {width: 150px;height: 36px;line-height: 36px;font-size: 14px;margin-top: 5px}
    .set-meal-box .box-item .tag {top: -14px;width: 100px;height: 28px;line-height: 28px;font-size: 14px}
    .section5 .content-box .desc-box>p {line-height: 24px;font-size: 14px}

    /* page 6 */
    .box-container .dl-box {height: 270px;margin: 0 auto 30px auto; width: 100%;}
    .dl-box .dl-desc {font-size: 20px;}
    .box-container .dl-btn {width: 180px;height: 50px;line-height: 50px;font-size: 18px;}

    /* footer */
    .page-footer .container {padding: 0 60px; height: 210px;}
    .left-content .box .box-item .img img {min-width: 160px;min-height: 160px;}
    .page-footer .copyright-info {line-height: 70px;}

    /* app down */
    .container {padding-left: 6%;}
    .container .content-box {height: 370px;}
    .appDown .dl-row .dl-btn {width: 165px;height: 50px;line-height: 50px;font-size: 14px; margin: 0 5px 10px 5px;}

}

@media screen and (min-width: 1601px) {
    html {font-size: 20px;}
    /* head */
    .header {height: 140px;}
    .left-header .title>img {width: 120px;}
    .right-header .menu {font-size: 14px;}
    .right-header .menu .menu-btn {min-width: 90px;line-height: 28px;}
    .h5 { display: none;}

    /* SCROLL PAGE */
    .section .box-container {width: 75%;max-height: 700px;margin-left: 12.5%;margin-top: 5%;}
    .section1 .left-content .content-box {top: 5%;}
    .section1 .left-content .title {line-height: 50px;font-size: 38px;margin-bottom: 30px;}

    .section1 .left-content .desc-box {margin-bottom: 30px;}
    .section1 .left-content .desc-box {width: 100%;margin-bottom: 2.5rem;opacity: 0;}
    .section1 .left-content .desc-box>p {font-size: 18px;line-height: 36px;}
    .section1 .left-content .btn-row>div {width: 180px;height: 50px;line-height: 50px;font-size: 18px;}
    .section1 .right-content>img {width: 480px;}

    /* page 2 */
    .section2 .content-box {padding-bottom: 10%;}
    .section2 .content-box .title {line-height: 38px;font-size: 32px;}
    .section2 .content-box .title.show {margin: 18px auto;}
    .section2 .card-box .box-row .box-item {height: 220px;}
    .section2 .card-box .box-row .box-item>img {height: 110px;}
    .section2 .card-box .box-row .item-title {margin-top: 0;}

    /* page 3 */
    .section3 .content-box {margin-bottom: 5%;}
    .section3 .left-content .title {line-height: 40px;font-size: 34px;margin-bottom: 30px;}
    .section3 .left-content .desc {font-size: 22px;}
    .section3 .left-content>img {min-width: 250px;}

    .section3 .content-box .right-content {width: 60%;}

    /* page 4 */
    .section4 .box-container {margin-bottom: 0;padding-top: 40px;}
    .section4 .box-container .title {font-size: 32px;}

    .swiper-box .swiper-slide  {min-height: 300px;padding: 60px 30px 10px 30px;}
    .swiper-slide .avatar {width: 70px;height: 70px}
    .swiper-slide .star {bottom: 20px}

    /* page 5 */
    .section5 .box-container .title{padding-top:45px; margin-bottom: 35px; line-height: 40px; font-size: 34px; }
    .section5 .box-container .content-box {padding: 10px 30px}
    .section5 .content-box .set-meal-box {padding: 30px 0;height: 475px;}
    .set-meal-box .box-item>img {height: 80px}
    .set-meal-box .box-item .time {font-size: 20px;margin: 15px 0}
    .set-meal-box .box-item .price {height: 60px;line-height: 62px}
    .set-meal-box .box-item .price .money {font-size: 36px}
    .set-meal-box .box-item .desc {height: 40px;line-height: 40px;font-size: 18px}
    .set-meal-box .box-item .buy-btn {width: 180px;height: 40px;line-height: 40px;font-size: 18px;margin-top: 5px}
    .set-meal-box .box-item .tag {top: -14px;width: 100px;height: 28px;line-height: 28px;font-size: 14px}
    .section5 .content-box .desc-box>p {line-height: 32px;font-size: 16px}

    /* page 6 */
    .box-container .dl-box {height: 300px;margin: 0 auto 40px auto; width: 100%;}
    .dl-box .dl-desc {font-size: 24px;}
    .box-container .dl-btn {width: 200px;height: 60px;line-height: 60px;font-size: 20px;}

    /* footer */
    .page-footer .container {padding: 0 60px; height: 240px;}
    .left-content .box .box-item .img img {min-width: 160px;min-height: 160px;}
    .page-footer .copyright-info {line-height: 80px;}
    .page-footer .copyright-info {line-height: 80px;}

    /* app down */
    .page-container {width: 75%;}
    .page-container .content-box {height: 400px;margin-top: 140px; margin-left: 10%;}
    .appDown .left-content .title {font-size: 32px; margin-bottom: 10px;padding: 0}
    .appDown .left-content {min-width: 45%;}
    .appDown .left-content .desc {line-height: 20px;font-size: 18px;}
    .appDown .left-content .desc-box {color: #7f8084;margin-bottom: 20px;}
    .appDown .left-content .desc-mb {margin-bottom: 20px;}
    .appDown .desc-box .box-row {font-size: 18px;margin-bottom: 20px;}
    .appDown .desc-box .box-row>img {width: 20px;margin-right: 15px;}
    .appDown .dl-row .dl-btn {width: 185px;height: 55px;line-height: 55px;font-size: 18px; margin: 0 5px 20px 5px;}
    .appDown .dl-row .dl-btn>img {width:185px; height: 55px;}
    .appDown.left-content .dl-row-mb {margin-bottom: 10px;}
    .appDown .right-content .img1, .right-content .img2 {width: 520px;}
    .appDown .right-content .img3 {width: 420px;}
    .right-content .img4 {width: 570px;}

    .page-container .switch-menu {width: 75%;margin: 50px auto;}
    .switch-menu .menu-item .img {height: 45px;width: 45px;}
    .switch-menu .menu-item .text {font-size: 16px;}

    .down-page-footer {height: 195px; position: relative;}
    .down-page-footer .container {width: 70%;height: 125px; margin-left: 10%;}
    .down-page-footer .container .left-content .title {font-size: 16px;padding-left: 40px;}
    .down-page-footer .left-content .box .box-item {width: 120px;font-size: 14px;}
}


/*
 手机 平板
 */
@media screen and (min-width: 310px) and (max-width: 768px) {
    html {font-size: 12px;}
    .pc {display: none;}

    /* head */
    .header {width: 100%; height: 70px; }
    .style2.header {background-color: #fff;filter:alpha(Opacity=65);-moz-opacity:0.6;opacity: 0.6}
    .left-header .title>img {width: 120px;}
    .right-header .menu {font-size: 12px;}
    .right-header .menu>li {min-width: 80px;}
    .right-header .menu .menu-btn {min-width: 75px;line-height: 26px;}

    /* SCROLL PAGE */
    .section .box-container {width: 90%; margin-left: 6%; margin-top: 0; height: auto;}
    .section .box-container {display: block;}

    .section1 .left-content .content-box {top: 5px; position: relative;}
    .section1 .left-content .title {line-height: 30px;font-size: 24px;margin-bottom: 24px;}
    .section1 .left-content .desc-box>p {font-size: 12px;line-height: 18px;}
    .section1 .left-content .btn-row {display: none}
    .section1 .left-content .desc-box {margin-bottom: 30px;}
    .section1 .left-content .desc-box {width: 100%;margin-bottom: 2.5rem;opacity: 0;}
    .section1 .box-container .right-content {display: none;}

    /* h5 - page 1*/
    .buy-box {display: block;position: relative;}
    .buy-box .box-left {display: block;float: left;}
    .buy-box .box-left .btn1 {background: #ffa326;margin-bottom: .4rem;}
    .buy-box .box-left .btn2 {background: #2196f3;}
    .buy-box .box-left .btn {
        min-width:110px; width:30%; max-width: 160px;height: 30px;line-height: 30px;text-align: center;
        font-size: 12px;color: #fff;border-radius: 15px; margin-bottom: 20px;
    }

    .buy-box .box-right {min-width: 125px; width: 50%; float: right;}
    .buy-box .box-right>img {min-width: 125px; width: 90%;position: relative;right: 15%;}
    /* ========================================================================================== */


    /* h5 - page 2*/
    .section2 .content-box {padding-bottom: 6%; margin: 15px 0;}
    .section2 .content-box .title {font-size: 18px; margin: 15px 0; line-height: 26px;}
    .section2 .content-box .card-box {width: 98%;}
    .section2 .card-box .box-row .box-item {height: 200px;}
    .section2 .card-box .box-row .box-item>img {height: 65px;}
    .section2 .card-box .box-row .item-title {font-size: 14px;}
    .section2 .card-box .box-row .item-desc {line-height: 16px;font-size: 12px;}

    /* h5 - page 3*/
    .section3 .content-box {margin-bottom: 6%;}
    .section3 .left-content .title {line-height: 30px;font-size: 20px;margin-bottom: 20px;}
    .section3 .left-content .desc {font-size: 14px;margin-bottom: 30px;}
    .section3 .left-content>img {min-width: 250px;}

    .section3 .content-box .left-content {width: 40%;}
    .section3 .content-box .right-content {width: 60%;}

    /* h5 page 4 */
    .section4 .box-container {padding-bottom: 200px;}
    .section4 .box-container .title {font-size: 24px;}

    .swiper-box .swiper-slide  {padding: 40px 20px 10px 20px;}
    .swiper-box .swiper-slide-active  {width: 90%;}
    .swiper-box .swiper-bg {padding: 40px 60px;}
    .swiper-slide .avatar {width: 40px;height: 40px;left: 15px}
    .swiper-slide .name {font-size: 14px}
    .swiper-slide .star {right: 15px}
    .swiper-slide .desc {font-size: 10px; line-height: 15px;}
    .swiper-slide .star>img {margin: 0 3px; width: 10px;}

    /* h5 page 5 */
    .section5 .box-container {width: 80%;margin-bottom: 5%}
    .section5 .box-container .title{ padding-top: 15px; line-height: 30px; font-size: 24px;}
    .section5 .content-box .set-meal-box .box-item{ width: 90%;}
    .section5 .content-box .set-meal-box {height: 420px; padding: 40px 0 50px 0; width: 100%;}
    .set-meal-box .box-item>img {height: 50px}
    .set-meal-box .box-item .time {margin: 12px 0; font-size: 12px}
    .set-meal-box .box-item .price {font-size: 20px;}
    .set-meal-box .box-item .buy-btn {width: 120px;height: 30px;line-height: 28px;font-size: 12px}
    .set-meal-box .box-item .tooltip {font-size: 12px}
    .set-meal-box .box-item .tag {top: -12px;width: 80px;height: 24px;line-height: 24px;font-size: 12px}
    .section5 .content-box .desc-box {bottom: 50px;}
    .section5 .content-box .desc-box>p {line-height: 22px;font-size: 12px}
    .set-meal-box .box-item .price .money {font-size: 20px}
    .set-meal-box .box-item .desc {font-size: 12px}

    /* h5 page 6 */
    .box-container .dl-box {height: 180px;margin: 0 auto 30px auto; width: 100%;}
    .dl-box .dl-desc {font-size: 13px;}
    .box-container .dl-btn {width: 140px;height: 36px;line-height: 36px;font-size: 14px; }

    /* footer */
    .page-footer .container {padding: 0 20px; height: 140px; display: none;}
    .h5 {display: block;}

    .page-footer .footer-content {
        width: 100%;border-top: .02667rem solid #e8e9ea;border-bottom: .02667rem solid #e8e9ea;
        box-sizing: border-box;padding: .8rem .13333rem .53333rem .13333rem;
    }
    .footer-content .apps-title {font-size: 14px;font-weight: 700;color: #4c4c4c;margin-bottom: .26667rem;}
    .footer-content .apps-box {
    display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
    width: 80%;justify-content: space-between;margin-bottom: 12px; margin-left: 5%;
    -webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;
    }
    .apps-box .box-item .img {
        display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
        width: 100%;min-width: 18px;height: 24px;
        -webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;
        justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;
        align-items: center;
    }
    .apps-box .box-item .img>img {height: 18px;}
    .apps-box .box-item .text {text-align: center;font-size: 12px;color: #4c4c4c;}

    .footer-content .menu-box {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin-top: 30px;}
    .menu-box .menu {color: #4c4c4c;margin-right: 12px;}
    .menu-box .menu>li.active {font-size: 12px;margin-bottom: 8px;}
    .menu-box .menu>li {font-size: 12px;margin-bottom: 8px}
    .menu-box .menu>li:last-child {margin-bottom: 0;}

    .page-footer .copyright-info {line-height: 70px;}

    /* app down */
    .page-container {width: 90%;}
    .page-container .content-box { height: 380px; display: block; margin-top: 80px;}
    .page-container .content-box .left-content{ margin: 0px;}
    .appDown .left-content .title {font-size: 16px; margin-bottom: 8px;padding: 0}
    .appDown .left-content {min-width: 100%; display: block; }
    .appDown .left-content .desc {line-height: 16px;font-size: 10px;}
    .appDown .left-content .desc-box {color: #7f8084;margin-bottom: 10px;}
    .appDown .left-content .desc-mb {margin-bottom: 10px;}
    .appDown .desc-box .box-row {font-size: 12px;margin-bottom: 8px;}
    .appDown .desc-box .box-row>img {width: 12px;margin-right: 8px;}
    .appDown .right-content {display: block}

    .appDown .right-content .img1, .right-content .img2 {min-width: 210px; width: 55%;}
    .appDown .right-content .img3 {min-width: 200px;width: 55%;}
    .right-content .img4 {min-width: 210px; width: 55%}

    .appDown .dl-row .dl-btn {width: 120px;height: 30px;line-height: 30px;font-size: 12px; margin: 0 10px 5px 10px;}
    .appDown .dl-row .dl-btn>img {width:120px; height: 30px;}
    .appDown .left-content .dl-row-mb {margin-bottom: 5px;}


    .page-container .switch-menu {width: 100%;margin: 0;}
    .switch-menu .menu-item {width: 20%; max-width: 55px; margin: 70px 0 30px 0;}
    .switch-menu .menu-item .img {width: 54px; height: 54px;}
    .switch-menu .menu-item .img>img {min-width:140px; }
    .switch-menu .menu-item .text {font-size: 12px; text-align: center;}

    .down-page-footer {display: none; }
    .h5-page-footer {width: 100%;box-sizing: border-box;padding: 0 .8rem .8rem .8rem; display: block;}
    .style2.h5-page-footer {background: #4d4d4d;}
    .style2.h5-page-footer .footer-content {border-top: .02667rem solid transparent;border-bottom: .02667rem solid #707071;}
    .h5-page-footer .footer-content {
        width: 100%;border-top: .02667rem solid #e8e9ea;border-bottom: .02667rem solid #e8e9ea;
        box-sizing: border-box;
    }
    .h5-page-footer .menu-box {
        display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
        width: 90%;padding-left: 15px;
    }
    .style2 .menu-box .menu {color: #fff;}
    .menu-box .menu {color: #4c4c4c;margin-right: 25px;}
    .menu-box .menu>li.active {font-size: 12px;margin-bottom: 8px;}
    .menu-box .menu>li:last-child { margin-bottom:10px;}

    .style2.h5-page-footer .copyright-info {color: #fff;}
    .h5-page-footer .copyright-info {text-align: center;font-size: 12px;color: #4c4c4c;margin-top: 12px;}
}