* { margin: 0; padding: 0; box-sizing: border-box; }

li { list-style: none; }

a { text-decoration: none; }

img { border: none; }

#app.vue { display: block; }

#app { background: white; position: relative; display: none; transition: background 1s linear; -webkit-transition: background 1s linear; }
#app #head .action{display:none}
#app #head .initial{display:inline}
#app #head.fold { transform: translateY(-60px); opacity: 0; }
#app #head.red{ background:rgba(237,78,79,0.9);color:#FFF}
#app #head.red ul li a{color:#FFF}
#app #head.red .action{display:inline}
#app #head.red .initial{display:none}
#app #head { background-color: rgba(255, 255, 255, 0.9); width: 100%; height: 80px; position: fixed; top: 0; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); z-index: 999; /*overflow: hidden;*/ transition: all 0.5s; }
#app #head .box { width: 1200px; margin: 0 auto; }
#app #head ul {  height: 60%; margin-top: 11px; float: right; }
#app #head ul li { height: 100%; float: left; transition: all 0.5s; }
#app #head ul li a { display: block; height: 100%; line-height: 60px; margin: 0 22px; color: #ed4e4f; transition: all 0.5s; }
#app #head ul li:nth-last-of-type(1) a { margin-right: 0; }
#app #head ul li.active a { font-weight: bolder; }
#app #head ul li.fold { transform: translateY(-60px); opacity: 0; }
#app .page { overflow: hidden; height: 750px; position: relative; z-index: 2; }
#app .page .content { perspective: 3000px; position: absolute; width: 1200px; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
#app .page .content .item1, #app .page .content .item2 { transition: all 0.5s; }
#app .page .h_box { margin-bottom: 70px; }
#app .page div > .h { font-size: 30px; margin: 15px 0; }
#app .page div > .t { font-size: 18px; margin: 6px 0; }
#app #page1 { position: relative; width: 100%; z-index: 1; text-align: center; font-size: 22px; color: #ed4e4f; background: url(../img/background.png); }
/* #app #page1 .content { z-index: 99; width: 1300px; padding-top: 40px;} */
#app #page1 .content p { height: 33px; }
#app #page1 .content .item1 { font-size: 28px; height: 250px; position: relative; margin-top: 40px; margin-bottom: 95px; }
#app #page1 .content .item1 img { vertical-align: baseline; }
#app #page1 .content .item1 .a { animation: animation1 0.5s linear; animation-fill-mode: both; }
#app #page1 .content .item1 .a1 { margin-bottom: 5px; animation-delay: 0; }
#app #page1 .content .item1 .a2 { animation-delay: 0.2s; }
#app #page1 .content .item1 .a3 { margin-left: 4px; animation-delay: 0.4s; }
#app #page1 .content .item1 .a4 { animation-delay: 0.6s; }
#app #page1 .content .item1 .a5 { margin-left: 3px; animation-delay: 0.8s; }
#app #page1 .content .item1 .a6 { margin-bottom: -29px; margin-left: 2px; animation-delay: 1s; }
#app #page1 .content .item1 .a7 { margin-bottom: -62px; margin-left: -23px; animation-delay: 1.2s; }
#app #page1 .content .item1 .a8 { margin-left: 3px; animation-delay: 1.4s; }
#app #page1 .content .item1 .a9 { margin-left: -34px; animation-delay: 1.6s; }
/* #app #page1 .content ul { width: 741px; margin: 35px auto; position:relative;} */

#page1 .content ul {
    display: flex;
    width: 854px;
    justify-content: left;
    padding: 0;
    margin-bottom: 20px;
}

#app #page1 .content {
    width: 100%;
}

#page1 .content ul li {
    position: relative;
    margin-right: 35px;
}

#page1 .content ul li:last-child { margin-right: 0; }

/* #app #page1 .content ul li { position: relative; float: left; margin: 0 25px; } */
#app #page1 .content ul li a { display: block; }

#app #page1 .content ul li a .h { display: none; }
#app #page1 .content ul li a:hover .w { display: none; }
#app #page1 .content ul li a:hover .h { display: flex; }

#app #page1 .content ul li .b {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 99;
    bottom: -160px;
}

#app #page1 .content ul li:hover .b { display: block; }
#app #page1 .n { position: absolute; width: 23px; left: 50%; bottom: 50px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); }
#app #page1 .n .d { position: absolute; bottom: 30px; left: 10px; animation: animation2 1.5s linear infinite; }
#app #page1 .bj1 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
#app #page1 .bj2 { position: absolute; right: 0; bottom: 0; }
#app #page2 { background-color: #ed4e4f; }
#app #page2 .bj2 { position: absolute; right: 0; top: 0; }
#app #page2 .content { right: 0; perspective: 3000px; }
#app #page2 .content .item1 { position: relative; float: left; transition: all 1.8s; }
#app #page2 .content .item1 .box { position: absolute; bottom: -58px; right: -165px; }
#app #page2 .content .item1 .box .quan { position: relative; width: 340px; height: 250px; background: white; }
#app #page2 .content .item1 .box .quan .i { position: absolute; }
#app #page2 .content .item1 .box .quan .i1 { top: 80px; left: 28px; }
#app #page2 .content .item1 .box .quan .i2 { top: 104px; left: 91px; }
#app #page2 .content .item1 .box .quan .i3 { top: 85px; left: 85px; }
#app #page2 .content .item1 .box .quan .i4 { top: 66px; left: 167px; z-index: 99; }
#app #page2 .content .item1 .box .quan .i5 { top: 50px; left: 68px; }
#app #page2 .content .item1 .box .quan .i6 { top: 63px; left: 88px; }
#app #page2 .content .item1 .box .text { width: 100%; height: 70px; line-height: 70px; background: #3f60bf; text-align: center; color: white; }
#app #page2 .content .item1 .box .text span { font-size: 24px; }
#app #page2 .content .item1 .a { position: absolute; top: 21px; left: 42px; }
#app #page2 .content .item2 { color: white; float: left; padding-left: 222px; margin-top: 47px; }
#app #page3 { background-color: white; height: 700px; }
#app #page3 .content_3 { width: 1200px; margin: 0 auto; margin-top: 98px; text-align: center; }
#app #page3 .content_3 .item2 { margin-top: 65px; transition: all 1.8s; }
#app #page4 { background-color: #ed4e4f; }
#app #page4 .content .item1 { color: white; margin-top: 50px; margin-left: 9px; float: left; transition: all 1.8s; }
#app #page4 .content .item1 img { height: 650px; }
#app #page4 .content .item2 { transition: all 1.8s; float: left; margin-top: 0px; margin-left: 0px; transform: translateX(55px); -o-transform: translateX(55px); -ms-transform: translateX(55px); -moz-transform: translateX(55px); -webkit-transform: translateX(55px); }
#app #page4 .content .item2 img { float: left; }
#app #page4 .content .item2 .a { position: relative; z-index: 1; margin-right: -24px; margin-top: 106px; }
#app #page4 .content .item2 .b { position: relative; z-index: 2; margin-right: -86px; margin-top: 119px; }
#app #page5 { background-color: #f0eeee; position: relative; height: 700px; }
#app #page5 .content .item1 { float: left; margin-top: 91.5px; }
#app #page5 .content .item2 { transition: all 1.8s; position: relative; float: left; margin-left: 33px; margin-right: 100px; }
#app #page5 .content .item2 .a { position: absolute; top: 20px; left: 39px; }
#app #page5 .bg1 { position: absolute; left: 0; }
#app #page5 .bg2 { position: absolute; right: 0; }
#app #page6 { position: relative; z-index: 2; padding: 50px 0; padding-bottom: 0; background: white; }
#app #page6 .content { text-align: center; }
#app #page6 .content > .t { font-size: 30px; margin-bottom: 20px; }
#app #page6 .content > .t1 { font-size: 18px; margin: 7px 0; }
#app #page6 .content .item1 { margin: 20px 0; }
#app #page6 .content .item1 .b { overflow: hidden; width: 342px; margin: 0 auto; }
#app #page6 .content .item1 .b img { float: left; cursor: pointer; }
#app #page6 .content .item1 .b .s { float: left; height: 25px; width: 2px; background: #ed7473; margin: 0 50px; }
#app #page6 .content .item2 { height: 485px; position: relative; }

#app #page6 .content .item2 .a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#app #page6 .content .item2 video { width: 881px; height: 480px; }

#app #contact {
    position: relative;
    z-index: 2;
    margin-top: 200px;
    padding-bottom: 0;
    background: white;
    display: none;
}

#app #contact .content {
    text-align: center;
}

#app #contact .content > .t {
    font-size: 30px;
    margin-bottom: 20px;
}

#app #contact .content > .t1 {
    font-size: 18px;
    margin: 7px 0;
}

#app #contact .content > .t1 > .tel {
    color: red;
    font-weight: bold;
}

#app #contact .content > .t2 {
    font-size: 14px;
    margin: 7px 0;
}
#app #copy { position: relative; width: 100%; z-index: 2; background: whitesmoke; color: #333333;font-size: 15px }
#app #copy .box_a { width: 1200px; margin: 0 auto; height: 100%; }
#app #copy .item1 { float: left; height: 100%; }
#app #copy .item1 .img { float: left; height: 100%; width: 160px; padding: 65px 30px; }
#app #copy .item1 .text { font-size: 15px; float: left; line-height: 2; height: 100%; padding-top: 45px; }
#app #copy .item1 .text p img { vertical-align: middle; }
#app #copy .item2 { float: right; height: 100%; padding-top: 80px; }
#app #copy .item2 ul { position: relative; height: 27px; }
#app #copy .item2 ul li { position: relative; float: left; margin: 0 25px; cursor: pointer; }
#app #copy .item2 ul .h { display: none; }
#app #copy .item2 ul .m { display: none; position: absolute; top: -200px; left: -70px; }
#app #copy .item2 ul .m img { width: 160px; height: 160px; }
#app #copy .item2 ul .m p { text-align: center; }
#app #copy .item2 ul li:hover .w { display: none; }
#app #copy .item2 ul li:hover .h { display: block; }
#app #copy .item2 ul li:hover .m { display: block; }
#app #copy .item2 ul .a { margin-top: -3px; }
#app #copy .item2 ul .a .m { white-space: nowrap; top: -33px; left: -20px; }
#app #copy .item2 ul .q { margin-right: 52px; }
#app #copy .item2 ul .q .m { white-space: nowrap; top: -36px; left: -68px; }
.androidBeta { position: relative;}
.androidBeta .androidBetaClick .androidBetaIcon{display: block;position: absolute; top: 10px; right: -58px; font-size: 12px;  border: 1px solid white; padding: 4px 5px;
    line-height: 1;
    border-radius: 20px;
    color: white;
    background: rgba(237,78,79,0.9);}
/* #androidBeta-qr{
    position: absolute;top: 78px;display:none
} */
#app #head ul li .androidBetaClick {
    margin: 0 42px 0 22px;
}
.androidBeta .androidBetaClick .androidBetaIcon {
    right: -59px;
    right: -18px;

}
/* .androidBeta #androidBeta-qr img{
    margin-left: -8%;
    margin-top: -20px;
} */
.androidBeta:hover #androidBeta-qr {
    display:block
}

@keyframes animation1 { from { opacity: 0; }
    to { opacity: 1; } }
@keyframes animation2 { 0% { transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); }
    70% { transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -moz-transform: translateY(10px); -webkit-transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -moz-transform: translateY(10px); -webkit-transform: translateY(10px); opacity: 0; } }

/*# sourceMappingURL=index.css.map */

.company-info {
    background: whitesmoke;
    color: rgb(51, 51, 51);
    display: none;
    justify-content: center;
}

.info-box {
    max-width: 60%;
    line-height: 1.5;
    padding-bottom: 20px;
}

.new-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.new-content > .t {
    font-size: 30px;
    margin-bottom: 20px;
}

.new-content > .t1 {
    font-size: 18px;
    margin: 7px 0;
}

.moreDownLoad {
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0px;
}

.m-more {
    width: 100%;
    margin-top: 20px;
    font-size: 12px;
}

.arrow-icon {
    width: 16px;
    height: 16px;
}

.btn-warp {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
    position: relative;
    z-index: 1;
}

#page1 .content ul li a:hover {
    outline: none;
    text-decoration: none;
    color: #fff;
}

.download-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 142px;
    height: 44px;
    border: 2px solid rgba(237, 78, 79, 1);
    font-size: 14px;
    color: rgba(237, 78, 79, 1);
    border-radius: 70px;
}

.download-btn.h {
    background: rgba(237, 78, 79, 1);
    color: #fff;
}

.btn-icon {
    width: 20px;
    margin-right: 4px;
}

.know-hw-web {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    font-size: 20px;
}

.know-hw-web .know-hw-web-a {
    color: rgba(237, 78, 79, 1);
    margin-left: 10px;
    text-decoration: none;
}

.know-hw-web .know-hw-web-a:hover {
    background-color: rgba(237, 78, 79, 1);
    color: #fff;
}

.kefu-box {
    position: fixed;
    right: 40px;
    bottom: 48px;
    width: 64px;
    height: 64px;
    border-radius: 94px;
    background: #fff;
    box-shadow: 0 0 26px 0 #00000014;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 2002;
}

.kefu-box .kefu-icon {
    width: 32px;
    cursor: pointer;
}

.kefu-box .manager-box {
    position: relative;
}

.kefu-box .manager-box .manager-content {
    position: absolute;
    right: 68px;
    bottom: -24px;
    z-index: 1;
    padding: 28px;
    background: #fff;
    box-shadow: 0 0 20px 0 #00000014;
    border-radius: 16px;
    width: 508px;
}

.kefu-box .manager-content .wx-img {
    width: 508px;
}

.kefu-box .manager-content .close-icon {
    width: 28px;
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}

.pc-wx-box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.pc-wx-img {
    width: 140px;
}

.pc-manager-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}