:root{    --custom-body-min-width: 600px;    --custom-body-max-width: 1800px;    /*    --custom-background-color-gradient-darker: #5e30c1;    --custom-background-color-gradient-lighter: #697ded;    */    --custom-background-color-gradient-darker: #1e3799;    --custom-background-color-gradient-lighter: #4a69bd;    --custom-emphasize-color: var(--custom-background-color-gradient-lighter);    --custom-button-background-color: #ffa426;    --custom-button-text-color: white;}body{    min-width:var(--custom-body-min-width);    /*    max-width: var(--custom-body-max-width);   */    margin: 0 auto;    position: relative; /* 锚定 poster-background */}.navbar{    width: 100%;    height: 10vw;    color: white;    display: flex;    align-items: center;    justify-content: center;}.navbar .container{    width: 80%;    height: 100%;    margin: 0 auto;}.navbar .container #brand{    width: 30%;    height: 100%;    text-align: center;    display: flex;    align-items: center;    justify-content: center;    float: left;}.navbar .container #brand a{    font-size: 5vw;    font-weight: bolder;}.navbar .container #nav-items{    width: 70%;    height: 100%;    display: flex;    justify-content: center;    align-items: center;}.navbar .container #nav-items .nav-item{    width: 25%;    height: 100%;    margin-left: 4vw;    box-sizing: border-box;    font-size: 3vw;    line-height: 10vw;}#poster{    width: 100%;    height: 75vw;    color: white;    display: flex;    align-items: center;    justify-content: center;}#poster .container {    width: 80%;    height: 100%;}#poster .container #poster-brief{    width: 100%;    height: 100%;    box-sizing: border-box;    float: left;}#poster .container #poster-brief #promotion{    visibility:hidden; /* 暂时没有营销活动，先隐藏 */    width: 100%;    height: 30%;    display: flex;    align-items: flex-end; /*底部居中*/    justify-content: center;}#poster .container #poster-brief #promotion #promotion-content{    padding: 4px 6px;    border-radius: 2vw;    background-color: rgba(255, 255, 255, 0.1);    /* color: white; */    color: var(--custom-button-background-color);    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;}#poster .container #poster-brief #promotion #promotion-content:hover{    box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.4);    box-sizing: border-box;}#poster .container #poster-brief #promotion #promotion-content .badge{    height: 80%;    padding: 0.3vw 1vw;    box-sizing: border-box;    color: var(--custom-button-text-color);    background-color: var(--custom-button-background-color);    border-radius: 2vw;    font-size: 1.2vw;    line-height: 1.2vw;}#poster .container #poster-brief #promotion #promotion-content span{    padding-left: 1vw;    box-sizing: border-box;    font-size: 2vw;    line-height: 2vw;}#poster .container #poster-brief #title{    width: 100%;    height: 40%;    display: flex;    align-items: center;    justify-content: center;}#poster .container #poster-brief #title #text{    width: 100%;    text-align: center;}#poster .container #poster-brief #title #text h1{    font-size: 5vw;    line-height: 7.5vw;}#poster .container #poster-brief #title #text h2{    margin: 3vw;    font-size: 3vw;    line-height: 4.5vw;    box-sizing: border-box;}#poster .container #poster-brief .button{    width: 100%;    height: 30%;    display: flex;    align-items: flex-start; /* 顶部居中 */    justify-content: center;}#poster .container #poster-brief .button .content{    width: 40%;    padding: 2px 6px ;    box-sizing: border-box;    text-align: center;    cursor: pointer;    color: var(--custom-button-text-color);    background-color: var(--custom-button-background-color);    border-color: var(--custom-button-background-color);    border-radius: 4vw;    display: flex;    align-items: center;    justify-content: center;}#poster .container #poster-brief .button .content:hover{    box-shadow: 4px 4px 4px rgba(255, 255, 255, 0.4);    box-sizing: border-box;}#poster .container #poster-brief .button .content span{    font-size: 2.4vw;    line-height: 4.8vw;}#poster .container #poster-image{    width: 40%;    height: 100%;    box-sizing: border-box;    float: left;    display: flex;    align-items: center;    justify-content: center;}#poster .container #poster-image img{    width: 90%;}#whychoose{    width: 100%;    height: 20vw;    display: flex;    align-items: center;    justify-content: center;}#whychoose .container{    width: 70%;    height: 80%;    background-color: white;    border-radius: 10px;    box-shadow: 5px 5px 5px lightgray;}#whychoose .container #title{    width: 25%;    height: 100%;    float: left;    display: flex;    align-items: center;    justify-content: flex-start; /* 靠左垂直居中 */    padding-left: 5vw;    box-sizing: border-box;}#whychoose .container #title #text{    color: black;}#whychoose .container #title #text h2{    font-size: 2vw;    line-height: 4vw;    font-weight: bold;    vertical-align: baseline;    color: gray;}#whychoose .container #title #text h1{    font-size: 3vw;    line-height: 6vw;    font-weight: bold;    vertical-align: baseline;}#whychoose .container #reason{    width: 75%;    height: 100%;    float: left;    display: flex;    align-items: center;    justify-content: center;}#whychoose .container #reason .data{    width: 30%;    height: 100%;    float: left;    display: flex;    align-items: center;    justify-content: center;}#whychoose .container #reason .data .text{    text-align: center;}#whychoose .container #reason .data .text h1{    font-size: 3vw;    line-height: 6vw;    font-weight: bold;    vertical-align: baseline;}#whychoose .container #reason .data .text h2{    font-size: 2vw;    line-height: 4vw;    color: var(--custom-emphasize-color);    vertical-align: baseline;}.poster-backgroud{    width: 100%;    height: 100vw;    background-image: linear-gradient(to bottom, var(--custom-background-color-gradient-lighter), var(--custom-background-color-gradient-darker));    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);    position: absolute;    top: 0;    left: 0;    z-index: -1;}#features{    width: 100%;    height: 80vw;    display: flex;    align-items: center;    justify-content: center;}#features .container{    width: 80%;    height: 100%;}#features .container .title{    width: 100%;    height: 30%;    display: flex;    align-items: center;    justify-content: center;}#features .container .title .text{    text-align: center;}#features .container .title .text h1{    font-size: 5vw;    line-height: 7.5vw;}#features .container .title .text h2{    font-size: 3vw;    line-height: 4.5vw;    color: gray;}#features .container .six-features{    height: 70%;    width: 100%;}#features .container .six-features .feature-container{    height: 40%;    width: 33.3%;    display: flex;    align-items: center;    justify-content: center;    float: left;}#features .container .six-features .feature-container .feature{    height: 100%;    width: 100%;    text-align: center;}#features .container .six-features .feature-container .feature img{    height: 30%;    max-width: 30%;}#features .container .six-features .feature-container .feature h1{    font-size: 3vw;    line-height: 4.5vw;    margin-bottom: 2vw;}#features .container .six-features .feature-container .feature h2{    font-size: 2vw;    line-height: 3vw;    color: gray;}#highlights{    width: 100%;    height: 120vw;    display: flex;    align-items: center;    justify-content: center;}#highlights .container{    width: 80%;    height: 100%;}#highlights .container .highlight{    width: 100%;    height: 33%;}#highlights .container .highlight .image{    width: 40%;    height: 100%;    float: left;}#highlights .container .highlight .image.image-right{    float: right;}#highlights .container .highlight .image img{    max-height: 100%;    width: 100%;}#highlights .container .highlight .desc{    width: 60%;    height: 100%;    float: left;    padding: 10% 5%;    box-sizing: border-box;}#highlights .container .highlight .desc.image-right{    float: right;}#highlights .container .highlight .desc .label{    width: 100%;}#highlights .container .highlight .desc .label span{    padding: 2px 1vw;    border-radius: 2vw;    box-sizing: border-box;    font-size: 2vw;    line-height: 3vw;    color: white;    text-align: center;    box-shadow: 4px 4px 4px rgba(127, 127, 127, 0.4);    background-color: var(--custom-emphasize-color);}#highlights .container .highlight .desc .text{    margin-top: 1vw;    color: black;}#highlights .container .highlight .desc .text h1{    font-size: 3vw;    line-height: 4.5vw;    margin-bottom: 2vw;}#highlights .container .highlight .desc .text h2{    font-size: 2vw;    line-height: 3vw;    color: gray;}#purchase{    width: 100%;    height: 100vw;    background-image: linear-gradient(to right, var(--custom-background-color-gradient-lighter), var(--custom-background-color-gradient-darker));    color: white;    display: flex;    align-items: center;    justify-content: center;}#purchase .container{    width: 90%;    height: 80%;}#purchase .container .title{    width: 100%;    height: 20%;    text-align: center;    display: flex;    align-items: center;    justify-content: center;}#purchase .container .title .text{    color: white;}#purchase .container .title .text h1{    font-size: 5vw;    line-height: 7.5vw;}#purchase .container .title .text h2{    font-size: 3vw;    line-height: 4.5vw;    color: lightgray;}#purchase .container .platters{    width: 100%;    height: 80%;}#purchase .container .platters .platter{    width: 27%;    height: 90%;    background-color: white;    color: black;    float: left;    margin: 3%;    padding-left: 2%;    padding-right: 2%;    box-sizing: border-box;    border-radius: 10px;    box-shadow: 5px 5px 5px lightgray;}#purchase .container .platters .platter .name{    width: 100%;    height: 10%;    text-align: center;    display: flex;    align-items: flex-start; /* 顶部居中 */    justify-content: center;}#purchase .container .platters .platter .name .text{    width: 12vw;    height: 3.6vw;    font-size: 2vw;    line-height: 3vw;    color: var(--custom-emphasize-color);    background-color: #f3f6f8;    text-align: center;}#purchase .container .platters .platter .price{    width: 100%;    /* height: 10%; */    height: 5%;    font-size: 4vw;    text-align: center;}#purchase .container .platters .platter .timeline{    width: 100%;    /* height: 10%; */    height: 1%;    font-size: 2vw;    color: gray;    text-align: center;}#purchase .container .platters .platter .item{    width: 100%;    /* height: 10%; */    height: 12%;    padding-left: 1%;    box-sizing: border-box;}#purchase .container .platters .platter .item .content{    height: 4vw;    display: flex;    align-items: center;    justify-content: flex-start; /* 靠左垂直居中 */}#purchase .container .platters .platter .item .content .iconfont{    color: var(--custom-emphasize-color);    font-weight: bold;}#purchase .container .platters .platter .item .content span{    font-size: 2vw;    line-height: 2vw;    height: 3vw;    padding-left: 0.2vw;    box-sizing: border-box;}#purchase .container .platters .platter .button{    width: 100%;    height: 20%;    display: flex;    align-items: center;    justify-content: center;}#purchase .container .platters .platter .button .content{    width: 70%;    padding: 1px 2px;    box-sizing: border-box;    text-align: center;    cursor: pointer;    background-color: var(--custom-button-background-color);    border-color: var(--custom-button-background-color);    border-radius: 4vw;    display: flex;    align-items: center;    justify-content: center;}#purchase .container .platters .platter .button .content:hover{    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);}#purchase .container .platters .platter .button .content span{    color: var(--custom-button-text-color);    font-size: 2vw;    line-height: 4vw;}#partner{    width: 100%;    height: 450vw;    display: flex;    align-items: center;    justify-content: center;}#partner .container{    width: 95%;}#partner .container .title{    width: 100%;    height: 10%;    display: flex;    align-items: center;    justify-content: center;}#partner .container .title .text{    text-align: center;}#partner .container .title .text h1{    font-size: 5vw;    line-height: 7.5vw;}#partner .container .title .text h2{    font-size: 3vw;    line-height: 4.5vw;    color: gray;}#partner .container #logo-table{    width: 100%;}#partner .container #logo-table td{    text-align: center;    padding: 2.5vw  0;}#partner .container #logo-table td img{    width: 20vw;}#partner .container #logo-table td p{    font-size: 2vw;    line-height: 3vw;    color: gray;}#partnerx{    width: 100%;    height: 200vw;    display: flex;    align-items: center;    justify-content: center;}#partnerx .container{    width: 100%;    height: 100%;}#partnerx .container .title{    width: 100%;    height: 20%;    display: flex;    align-items: center;    justify-content: center;}#partnerx .container .title .text{    text-align: center;}#partnerx .container .title .text h1{    font-size: 5vw;    line-height: 7.5vw;}#partnerx .container .title .text h2{    font-size: 3vw;    line-height: 4.5vw;    color: gray;}#partnerx .container #logo-table{    width: 100%;}#partnerx .container #logo-table td{    text-align: center;    padding: 2.5vw  0;}#partnerx .container #logo-table td img{    width: 20vw;}#partnerx .container #logo-table td p{    font-size: 2vw;    line-height: 3vw;    color: gray;}#like{    width: 100%;    height: 50vw;}#contactus{    width: 100%;    height: 50vw;    display: flex;    align-items: center;    justify-content: center;}#contactus .container{    width: 80%;    height: 90%;}#contactus .container .title{    width: 100%;    height: 40%;    display: flex;    align-items: center;    justify-content: center;}#contactus .container .title .text{    text-align: center;}#contactus .container .title .text h1{    font-size: 5vw;    line-height: 7.5vw;}#contactus .container .title .text h2{    font-size: 3vw;    line-height: 4.5vw;    color: gray;}#contactus .container .two-contacts{    height: 60%;    width: 100%;}#contactus .container .two-contacts .contact-container{    height: 100%;    width: 50%;    padding: 2vw 2vw;    box-sizing: border-box;    display: flex;    align-items: center;    justify-content: center;    float: left;}#contactus .container .two-contacts .contact-container .contact{    height: 100%;    width: 100%;    text-align: center;    padding: 1vw  2vw;    box-shadow: 5px 5px 5px lightgray;    border-radius: 10px;    background-color: #f8f8f8;}#contactus .container .two-contacts .contact-container .contact .image{    float: left;    height: 100%;    width: 20%;}#contactus .container .two-contacts .contact-container .contact .image img{    max-height: 80%;    max-width: 80%;}#contactus .container .two-contacts .contact-container .contact .text{    float: left;    height: 100%;    width: 80%;}#contactus .container .two-contacts .contact-container .contact .text h1{    width: 100%;    height: 30%;    padding-left: 1vw;    font-size: 2.4vw;    line-height: 4.8vw;    text-align: left;}#contactus .container .two-contacts .contact-container .contact .text h2{    width: 100%;    height: 30%;    padding-left: 1vw;    font-size: 2vw;    line-height: 4vw;    color: gray;    text-align: left;}#contactus .container .two-contacts .contact-container .contact .text .button{    width: 100%;    height: 40%;    padding-top: 1vw;    display: flex;    align-items: center;    justify-content: center;}#contactus .container .two-contacts .contact-container .contact .text .button .content{    width: 70%;    padding: 1px 2px;    box-sizing: border-box;    text-align: center;    cursor: pointer;    background-color: var(--custom-button-background-color);    border-color: var(--custom-button-background-color);    border-radius: 4vw;    display: flex;    align-items: center;    justify-content: center;}#contactus .container .two-contacts .contact-container .contact .text .button .content:hover{    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);}#contactus .container .two-contacts .contact-container .contact .text .button .content span{    color: var(--custom-button-text-color);    font-size: 2vw;    line-height: 4vw;}.footer{    width: 100%;    height: 40vw;    display: flex;    align-items: flex-end; /*底部居中*/    justify-content: center;    color: white;}.footer .container{    width: 80%;    height: 70%;}.footer .container .title{    float: left;    width: 60%;    height: 100%;}.footer .container .title h1{    font-size: 4vw;    line-height: 6vw;}.footer .container .title h2{    font-size: 2vw;    line-height: 4vw;    color: lightgray;}.footer .container .links{    float: left;    width: 40%;    height: 100%;}.footer .container .links .page{    float: left;    width: 50%;}.footer .container .links .page .name{    width: 100%;    font-weight: bold;    font-size: 3vw;    line-height: 6vw;}.footer .container .links .page .link{    width: 100%;    font-size: 2vw;    line-height: 4vw;    color: lightgray;}.footer .container .links .page .link img{    width : 80%;}.footer-backgroud{    width: 100%;    height: 60vw;    background-image: linear-gradient(to bottom, var(--custom-background-color-gradient-lighter), var(--custom-background-color-gradient-darker));    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);    position: absolute;    bottom: 0;    left: 0;    z-index: -1;}.kefu{    position: fixed; /* 固定定位是相对于视口的，包含块为视口，跟视口完全相同的尺寸 */    bottom: 10vmin;    right: 10vmin;    width: 20vmin;    height: 20vmin;    z-index: 999;    display: flex;    align-items: center;    justify-content: center;}.kefu a{    height: 100%;    width: 100%;}.kefu img{    height: 100%;    border-radius:50%;}