html,body{margin:0;padding:0;}
.flex{display:flex;}
.flex-center{display: flex;align-items: center;justify-content: center}
.flex-y-center{display: flex;align-items: center}
.flex-x-center{display: flex;justify-content: center;}
.flex-col{display: flex;flex-direction: column}
a{text-decoration: none;}

.header .navbar-mobile{display: none}
.header{position: relative;background: linear-gradient(180deg, #FFBEBE -10.68%, rgba(255, 255, 255, 0) 104.76%);}
.header .b-navbar{left:0;top:0;width:100%;}
.header .b-navbar > div{
    position: relative;
    width:100%;
    padding-bottom: 9%;
}
.header .b-navbar > div .logo{position: absolute;left:4.86%;top:25%;height:50%;}
.header .b-navbar > div .navbar-list{position: absolute;left:0;top:0;width:100%;height:100%;justify-content: flex-end;}
.header .b-navbar > div .navbar-list .navbar-item{width:25%;height:100%;}
.header .b-navbar > div .navbar-list .navbar-item a{color: white;text-decoration: none;font-size: 24px;font-weight: 800}
.header .b-navbar > div .navbar-list .navbar-item.on a{
    background:white;
    border-radius: 10px;
    color:rgba(255, 167, 168, 1);
    width:80%;
    height:50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header .btn-view {
    width:20%;
    /*max-width: 270px;
    min-width: 210px;*/
    height:8.4%;
    /*max-height: 59px;
    min-height: 47px;*/
    font-size: 20px;
    border-radius: 10px;
    background: #F45672;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.navbar-mobile-menu-fixed{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 999;
    display:none;
}
.navbar-mobile-menu-fixed .navbar-mobile-menu{width:100%;height:100%;position: relative;}
.navbar-mobile-menu-fixed .navbar-mobile-menu-mask,
.navbar-mobile-menu-fixed .navbar-mobile-menu-con{position: absolute;top:0;}
.navbar-mobile-menu-fixed .navbar-mobile-menu-mask{left:0;z-index:1;width:100%;width:100%;height:100%;background:rgba(0,0,0,.2);}
.navbar-mobile-menu-fixed .navbar-mobile-menu-con{align-items:center;top:0;left:0;z-index:2;width:100%;padding:5% 0;background:white;box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);}
.navbar-mobile-menu-fixed .navbar-mobile-menu-con > a{text-decoration:none;margin-bottom: 5%;background:#eee;width:90%;padding:3% 0;display: flex;align-items: center;justify-content: center;border-radius: 10px;color:#F45672;}
.navbar-mobile-menu-fixed .navbar-mobile-menu-con > a.on{color:white;background:#F45672;}

/* 通用表单 */
.ajax-form{}
.ajax-form .form-item{color: rgba(0, 0, 0, 1);width:100%;}
.ajax-form .form-item .form-icon{border:none;margin:0;flex-shrink: 0;margin-right:10px;}
.ajax-form .form-item:has(textarea) .form-icon{align-self: flex-start;transform: translateY(6px)}
.ajax-form .form-item .form-label{
    display: flex;
    align-items: center;
    margin-bottom:2.4%;
}
.ajax-form .form-item .form-input{
    border: 0.4px solid rgba(198, 198, 198, 1);
    border-radius: 5px;
    padding:15px;
    display: flex;
    align-items: center;
    width:100%;
}
.ajax-form .form-item .form-input input,
.ajax-form .form-item .form-input textarea{border:none;outline: none;width:0;flex-grow: 1}
.ajax-form .form-item .form-input textarea{min-height:100px;}


/* 首页 */
.home .header{padding-bottom: 58.68%;background:none;}
.home .header .bg,
.home .header .b-navbar,
.home .header .title,
.home .header .subtitle,
.home .header .descript,
.home .header .btn-view{position: absolute;left:0;top:0;text-decoration: none}
.home .header .bg{width:100%;height:100%;background-image: url('/assets/img/home-bg.png');background-size: cover}

.home .header .title,
.home .header .subtitle,
.home .header .btn-view,
.home .header .descript{left:3.4%;}
.home .header .title{
    top:26.5%;
    width:50%;
    font-weight: 700;
    font-size: 36px;
    color: #F45672;
}
.home .header .subtitle{
    top:36%;
    font-size: 23px;
    color: #F45672;
}
.home .header .descript{
    top:44.5%;
    width:35.5%;
    font-size: 16px;
    color: #F45672;
}
.home .header .btn-view {top:63%;width:18.125%;height:6.9739%;}

.home .about-us{
    font-size: 28px;
    color: #000000;
    margin-top:0%;
}
.home .about-us > div{align-items: center}

.home .better-srv{margin-top:4.2%;}
.home .better-srv img{margin-right:2.7%;box-shadow: -40px -40px 80px rgba(255, 255, 255, 0.8), 40px 40px 50px rgba(225, 225, 230, 0.8), inset 0px 0px 50px rgba(217, 217, 217, 0.2);}
.home .better-srv img:last-child{margin-right:0}


.home .solution{margin-top:6%;}
.home .solution .pic{width:49.86%;}
.home .solution .pic img{width:40%;}
.home .solution .info-txt{
    width:0;
    flex-grow: 1;
    background: #FFE7E7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    border-radius: 40px 0px 0px 0px;
    padding:4.3% 11%;
    box-sizing: content-box;
    letter-spacing: 0.02em;
    position: relative;
}
.home .solution .info-txt .circle{position: absolute;left:-10px;top:0px;width:30px;height:30px;border-radius:50%;background: #FB2C51;opacity: 0.5;}
.home .solution .info-txt > div:nth-child(1){font-size: 32px;font-weight: 600;color: #1A1A1A;position: relative}
.home .solution .info-txt .txt{font-size: 24px;color: #1A1A1A;margin-top: 6%;}
.home .solution.reverse .info-txt{border-radius: 0px 0px 40px 0px;}

.home .technology{margin-top:6%;width:100%;}
.home .technology > div:nth-child(1){font-size: 28px;}
.home .technology .tech-pro{width:100%;margin-top:2%;flex-wrap: wrap}
.home .technology .tech-pro .pro-item{
    width:14.28%;
    margin-bottom: 5%;
    flex-shrink: 0;
}
.home .technology .tech-pro .pro-item > div{
    width:60%;
    padding-bottom: 60%;
    border-radius: 50%;
    box-shadow: 0px 0px 30px rgba(244, 86, 114, 0.1);
    overflow: hidden;
    position: relative;
}
.home .technology .tech-pro .pro-item > div > div{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.home .technology .tech-pro .pro-item > div img{}

.home .purchase{
    position: relative;
    width:100%;
    padding-bottom: 46.875%;
    background:none;
}
.home .purchase > div:nth-child(1),
.home .purchase > div:nth-child(2){
    position: absolute;
    left:0;
    width: 100%;
}
.home .purchase > div:nth-child(1){
    top:0;
    height:70%;
    background: rgba(255, 231, 231, 1);
    z-index: 1;
    align-items: center;
}
.home .purchase > div:nth-child(2){
    bottom: 0;
    z-index: 2;
    height:58%;
}
.home .purchase > div:nth-child(1) span:nth-child(1),
.home .purchase > div:nth-child(1) span:nth-child(2){font-size: 28px;}
.home .purchase > div:nth-child(1) span:nth-child(3){margin-top:3%;font-size: 17px;width:37.77%;text-align: center}
.home .purchase > div:nth-child(1) span:nth-child(1){margin-top:4.5%;}
.home .purchase > div:nth-child(2) .step{width:20.7639%;border-radius:15px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);overflow: hidden}
.home .purchase > div:nth-child(2) .step img{width:100%;}
.home .purchase > div:nth-child(2) .step-arrow{margin:4.3%;}

.home .more-view{border-radius:10px;margin:5.9% auto;position:relative;width:16%;padding-bottom:4.1%;background: rgba(244, 86, 114, 1);}
.home .more-view a{position: absolute;left:0;top:0;width:100%;height:100%;text-decoration: none;font-size:24px;color:white;}

/* 联系我们 */
.contact-us{padding-bottom: 39%;}
.contact-us .header{padding-bottom: 39.72%;}
.contact-us .header .beauty,
.contact-us .header .price,
.contact-us .header .buy{position: absolute;left:0;width:100%;}
.contact-us .header .beauty{top:28.85%;}
.contact-us .header .beauty img{width:30%;max-width: 447px;}
.contact-us .header .price{top:53.8%;width:100%;flex-direction: column;align-items: center;font-size: 28px;}
.contact-us .header .buy{top:78.15%;height:80%;}
.contact-us .header .buy .card-box{
    width:26.39%;
    height:95.6%;
    box-shadow: 0px 0px 20px 0px rgba(231, 234, 248, 1);
    border-radius: 20px;
    background:white;
    margin-right:2.4%;
}
.contact-us .header .buy .card-box:last-child{margin-right:0;}
.contact-us .header .buy .card-box.big{
    width:27.78%;
    height:100%;
    box-shadow: 0px 0px 20px 0px rgba(191, 198, 231, 1);
}
.contact-us .header .buy .card-box > div:nth-child(1){
    margin-top:9.5%;
    width:100%;
    color: rgba(26, 26, 26, 1);
    font-size: 28px;
    font-weight: 600;
}
.contact-us .header .buy .card-box > div:nth-child(2){
    margin-top:10%;
    height:0;
    flex-grow: 1;
    font-size: 18px;
    padding:0 14%;
    color: rgba(26, 26, 26, 1);
}
.contact-us .header .buy .card-box > div:nth-child(3){
    padding-left:14%;
    margin-bottom: 8.7%;
    width:100%;
    font-size: 24px;
    color: rgba(244, 86, 114, 1);
}
.contact-us .header .buy .card-box.big > div:nth-child(1){margin-top:12.1%;}
.contact-us .header .buy .card-box.big > div:nth-child(3){margin-bottom: 11.36%;}
.contact-us .info{margin-top:35%;width:79.53%;height:300px;}
.contact-us .info .title{flex-direction:column;align-items: center;font-size:28px;margin-bottom:5%;}
.contact-us .info .touch{flex-grow: 1}
.contact-us .info .touch > div:nth-child(1){font-size: 40px;font-weight: 700;margin-top:10%;margin-bottom:10%;}
.contact-us .info .touch .touch-item{font-size: 18px;margin-bottom:5%;}
.contact-us .info .touch .touch-item span:first-child{font-size: 30px;font-weight: 700;margin-bottom:1%;}
.contact-us .info .form{
    box-sizing: border-box;
    width:47.15%;
    border-radius: 20px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    font-size: 14px;
}
.contact-us .info .form .form-label{font-weight:500;}
.contact-us .info .form .form-item{margin-bottom: 7%;}
.contact-us .info .form .two-col .form-item{margin-bottom: 0}
.contact-us .info .form .two-col{margin-bottom: 7%;}
.contact-us .info .form > div{
    margin:7.41% 10.74%;
}
.contact-us .info .form .two-col > div:nth-child(1),
.contact-us .info .form .two-col > div:nth-child(3){flex-grow: 1;width:0;}
.contact-us .info .form .two-col > div:nth-child(2) {width:11.7%;}
.contact-us .info .form .send-btn{
    width:43.5%;
    padding:15px 0;
    font-size: 18px;
    color:white;
    text-decoration: none;
    background: rgba(244, 86, 114, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

/* MMB */
.mmb .header{}
.mmb .header{padding-bottom: 38%;}
.mmb .header .bg,
.mmb .header .mobile-bg,
.mmb .header .descript,
.mmb .header .btn-view,
.mmb .header .beauty{position: absolute;left:0;top:0;}
.mmb .header .bg{width:100%;}
.mmb .header .beauty{left:3.5%;top:28%;width:31%;}
.mmb .header .beauty img{width:100%;}
.mmb .header .descript{left:3.5%;top:53%;width:28.4%;size:16px;color: rgba(244, 86, 114, 1);}
.mmb .header .btn-view {left:3.5%;top:77%;}
.mmb .header .mobile-bg{display: none;}
.mmb .feature{
    margin-top:4%;
    font-size: 28px;
    color: #000000;
}
.mmb .feature > div{align-items: center;margin-bottom: 5%;}
.mmb .feature .feature-list{width:100%;margin-bottom: 9.7%;}
.mmb .feature .feature-list .feature-item{
    width:17%;
    padding-bottom:17%;
    position: relative;
    margin-right:17%;
}
.mmb .feature .feature-list .feature-item:last-child{margin-right: 0;}
.mmb .feature .feature-list .feature-item > div{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    overflow: hidden;
    font-size: 36px;
}
.mmb .feature .feature-list .feature-item .roof{height:8.8%;width:100%;background:#eee;}
.mmb .feature .feature-list .feature-item img{margin-left:12.4%;margin-top:5%;width:75.2%;height:54%;}
.mmb .feature .feature-list .feature-item span{width:100%;text-align: center;margin-top:5%;}

.mmb .demo-pc{margin-top:4%;font-size: 28px;color: #000000;}
.mmb .demo-pc > div{align-items: center;margin-bottom: 0%;}
.mmb .demo-pc .demo-item{}
.mmb .demo-pc .demo-item .intro{width:50%;flex-shrink: 0;justify-content: flex-end;display: flex;}
.mmb .demo-pc .demo-item .intro > div{
    width:84%;
    border-radius: 10px;
    border: 1px solid rgba(244, 86, 114, 1);
    box-shadow: 0px 0px 20px 0px rgba(255, 184, 184, 0.12);
    font-size: 24px;
    padding:5%;
    margin-right:2.77%;
}
.mmb .demo-pc .demo-item .intro > div .title{position: relative;margin-bottom: 4%;font-size: 32px;font-weight: 600}
.mmb .demo-pc .demo-item .intro .circle{z-index:1;position: absolute;left:-15px;top:-5px;width:35px;padding-bottom:35px;border-radius: 50%;background: rgba(251, 44, 81, .5);}
.mmb .demo-pc .demo-item .pic{flex-grow: 1;width:0;position: relative;}
.mmb .demo-pc .demo-item .pic img{width: 100%;}

.mmb .demo-mobile{margin-top:4%;font-size: 28px;color: #000000;}
.mmb .demo-mobile > div{align-items: center;margin-bottom: 10%;}
.mmb .demo-mobile .demo-item{margin-bottom: 6%;align-items: center}
.mmb .demo-mobile .demo-item .intro{position: relative;width:50%;flex-shrink: 0}
.mmb .demo-mobile .demo-item .intro span{position: relative;z-index: 2;margin-left:20.8%;}
.mmb .demo-mobile .demo-item .intro span:nth-child(2){color: rgba(26, 26, 26, 1);font-weight: 600;font-size: 32px;}
.mmb .demo-mobile .demo-item .intro span:nth-child(3){font-size: 24px;width:65.55%;margin-top:3.4%;}
.mmb .demo-mobile .demo-item .intro .circle{z-index:1;position: absolute;left:-15px;top:-5px;width:35px;padding-bottom:35px;border-radius: 50%;background: rgba(251, 44, 81, .5);}
.mmb .demo-mobile .demo-item .pic{flex-grow: 1;width:0;justify-content: center;}
.mmb .demo-mobile .demo-item .pic img{max-width: 58.47%;}
.mmb .demo-mobile .demo-item.reverse .pic{justify-content: flex-start;}
.mmb .demo-mobile .demo-item.reverse .pic img{margin-left:16%;}

    /* 通用底部 */
.footer{
    position: relative;
    width:100%;
    padding-bottom: 58.54%;
}
.footer .mail-to,
.footer .bottom{position:absolute;width:100%;}
.footer .mail-to{
    left:8.5%;
    top:0;
    width:83%;
    height: 53.74%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    z-index:2;
    overflow: hidden;
}
.footer .mail-to .mail-left{width:0;flex-grow: 1;flex-shrink: 0;}
.footer .mail-to .mail-left > span:nth-child(1){margin-top:15%;font-size: 30px;font-weight: bold;margin-left:16%;}
.footer .mail-to .mail-left > span:nth-child(2){width:60%;font-size: 20px;margin-left:16%;margin-top:4.66%}
.footer .mail-to .mail-left .mail-send{
    width:57%;
    padding-bottom:6.5%;
    min-width: 375px;
    min-height: 42px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    margin-left:16%;
    border-radius: 20px;
    margin-top:4.66%;
    color: rgba(187, 187, 187, 1);
    font-size: 17px;
    position: relative;
}
.footer .mail-to .mail-left .mail-send > div{position: absolute;left:0;top:0;width:100%;height:100%;}
.footer .mail-to .mail-left .mail-send img{margin-left:5.2%;}
.footer .mail-to .mail-left .mail-send .input-box{margin-right:5%;margin-left:2.33%;transform: translateY(-1px);flex-grow: 1;width:0;}
.footer .mail-to .mail-left .mail-send .input-box input{border:none;font-size: 17px;color:rgba(187, 187, 187, 1);outline: none}
.footer .mail-to .mail-left .mail-send .send-btn{flex-shrink:0;font-size:20px;color:white;margin-right:0.6%;width:30.61%;height:90%;background:rgba(244, 86, 114, 1);border-radius:18px}
.footer .mail-to .mail-left .mail-send .send-btn img{margin-left:10%}
.footer .mail-to .mail-right{display:flex;width:36.8%;height:100%;position:relative;}
.footer .mail-to .mail-right img{align-self: center;position: relative}
.footer .mail-to .mail-right div{box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);border-radius: 0px 0px 0px 50px;position:absolute;right:0;top:0;width:64.77%;height:82.78%;background: rgba(255, 167, 168, 1);}
.footer .bottom{left:0;bottom:0;height:73.1%;background: rgba(244, 86, 114, 1);z-index:1}
.footer .bottom > div{align-self:flex-end;width:100%;height:63.31%;}
.footer .bottom .footer-contact{width:0;flex-grow: 1;margin-left:4.6%;color:white;}
.footer .bottom .footer-contact > div{margin-top:3%;font-size: 20px;}
.footer .bottom .footer-contact > div > div{width:4%;margin-right:1%;}
.footer .bottom .footer-map{margin-right:4.6%;height:84%;width:41.87%;background:#eee;border-radius: 20px;overflow: hidden;flex-shrink: 0;}

@media (max-width: 1000px) {
    .header .navbar-mobile{display: block}
    .header .b-navbar > div{padding-bottom: 17.435%;}
    .header .b-navbar .navbar-pc{display: none}
    .header .b-navbar > div .logo{height:55.88%;top:10%}

    .header .b-navbar .navbar-mobile{
        position: absolute;
        right:4%;
        top:2.564%;
        width:12.30%;
        padding-bottom:12.30%;
        cursor: pointer;
    }
    .header .b-navbar .navbar-mobile img{width:100%;height: 100%;}

    .footer{
        position: relative;
        width:100%;
        padding-bottom: 0%;
    }
    .footer .mail-to{
        position: relative;
        width:93%;
        height: auto;
        overflow: hidden;
        left:0%;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
        flex-direction: column;
        padding-bottom: 10%;
        margin-left:3.0769%;
        margin-bottom: 20%;
    }
    .footer .mail-to .mail-left{flex-direction: column;width:100%;}
    .footer .mail-to .mail-left > span:nth-child(1){font-size: 20px;margin-left:6.2%;width:87%;}
    .footer .mail-to .mail-left > span:nth-child(2){width:87.6%;font-size: 14px;margin-left:6.2%;margin-right:6.2%;margin-top:4.66%}
    .footer .mail-to .mail-left .mail-send{
        width:92%;
        padding-bottom:13%;
        margin-left:4%;
        border-radius: 20px;
        margin-top:10%;
        color: rgba(187, 187, 187, 1);
        font-size: 17px;
    }
    .footer .mail-to .mail-left .mail-send img{margin-left:5.2%;}
    .footer .mail-to .mail-left .mail-send .input-box{margin-right:5%;margin-left:2.33%;transform: translateY(-1px);flex-grow: 1;width:0;}
    .footer .mail-to .mail-left .mail-send .input-box input{border:none;font-size: 17px;color:rgba(187, 187, 187, 1);outline: none}
    .footer .mail-to .mail-left .mail-send .send-btn{flex-shrink:0;font-size:20px;color:white;margin-right:0.6%;width:30.61%;height:90%;background:rgba(244, 86, 114, 1);border-radius:18px}
    .footer .mail-to .mail-left .mail-send .send-btn img{margin-left:10%}
    .footer .mail-to .mail-right{
        margin-top:15%;
        width:100%;
        padding-bottom: 72.40%;
        position: relative;
    }
    .footer .mail-to .mail-right img{right:30%;top:10%;position: absolute;height:90%;border-radius:0px;}
    .footer .mail-to .mail-right div{position:absolute;right:0;top:0;width:50.5%;height:90%}

    .footer .bottom{position:relative;bottom:0;height:auto;background: rgba(244, 86, 114, 1);z-index:1;}
    .footer .bottom > div{width:100%;height:auto;flex-direction: column-reverse}
    .footer .bottom .footer-contact{width:92%;margin-left:4%;margin-bottom: 10%;}
    .footer .bottom .footer-contact > div{margin-top:3%;font-size: 20px;}
    .footer .bottom .footer-contact > div > div{width:4%;margin-right:1%;}
    .footer .bottom .footer-map{
        margin-top:10%;
        margin-bottom: 10%;
        width:91.7948%;
        padding-bottom: 50%;
        margin-left:4.1025%;
        left:0;
        height:auto;
    }
}