html {
    /* font-size: 16px !important; */
    font-size: 0.83vw;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.top-bar {
    width: 100%;
    padding: 0 18vw;
    /* calc无法以宽度来计算高度  兼容aspect-ratio不支持的浏览器*/
    height: calc( 60 / 1920 * 100vw ); 
    box-sizing: border-box;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar .nav-bar {
    display: flex;
    align-items: center;
    height: 100%;
    user-select: none;
}

.top-bar .nav-bar .nav-item {
    padding: 2px;
    /* font-size: 1rem; */
    font-size:1.375rem;
    color: #333333;
    margin: 0 2rem;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
}


.web-area-one {
    width: 100%;
    /* height: 100vh; */
    height: calc( 1080 / 1920 * 100vw );
    box-sizing: border-box;
    background-image: url('../img/homeweb-bg1.png');
    background-size: 100% 100%;
    position: relative;
    z-index: -1;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.web-area-one .center-block{
    padding-top: calc( 160 / 1920 *100vw);
    box-sizing: border-box;
}
.web-area-one .text1 {
    /* font-size: 3.6rem; */
    /* padding-top: calc( 160 / 1920 *100vw); */
    /* font-size: calc(58 / 1920 * 100vw );
    color: #333333;
    text-align: center;
    font-style: italic;
    font-weight: 600; */
    width: 42%;
    height: calc(58 / 1920 * 100vw );
    margin: auto;
    background: url('../img/big-title.png') no-repeat;
    background-size: 100% 100%;
}

.web-area-one .text2 {
    /* height: 4.4vh; */
    /* font-size: 3.1vh; */
    /* font-size: 2.5rem; */
    font-size: calc(40 / 1920 * 100vw );
    color: #666666;
    text-align: center;
}

.web-area-one .qrcode-big {
    /* width: 26.4vh;
    margin: 5.6vh auto; */
    width: calc(285 / 1920 *100vw);
    margin: calc(50 / 1920 *100vw) auto;
}

.botom-block {
    width: 100%;
    height: calc( 160 / 1920 *100vw);
    padding: 0 18vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    background-color: #333333;
    opacity: 0.6;
    z-index: 10;
    color: #FFFFFF;
}

.web-area-two {
    width: 100%;
    /*height: calc( 1720 / 1920 * 100vw );*/
    padding-bottom: 7.125rem;
    box-sizing: border-box;
    background-image: url('../img/homeweb-background.png');
    background-size: 100% 100%;
    /*display: flex;*/
    /*flex-direction: column;*/
    /* justify-content: space-around; */
    /*align-items: center;*/

}

.web-area-two .title {
    padding-top: 4rem;
    font-size: 2.5rem;
    color: #333333;
    font-weight: 600;
    text-align: center;
}

.web-area-two .subtittle {
    font-size: 1.875rem;
    color: #666666;
    margin-top: 1rem;
    margin-bottom: 4rem;
    text-align: center;
}

.example-box {
    display: flex;
    justify-content: space-between;
    padding: 0 18vw;
    margin: 10px auto;
}

.example-box .leftbox {
    width: 38.44vw;
    height: calc( 662 / 738 * 38.44vw ); 
    background-image: url('../img/homeweb-aaa.png');
    background-size: 100% 100%;
}

.example-box .rightbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 21.6vw;
    margin-left: 2rem;
}

.example-box .phone-text {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 1rem;
}

.example-box .info-text {
    width: 21.6vw;
    font-size: 1.375rem;
    color: #666666;
}

.example-box .code-text {
    margin-top: 50px;
    display: flex;
    height: 5.2vw;
}

.example-box .mid-code {
    width: 5.2vw;
}

.example-box .tips {
    margin-left: 2rem;
    font-size: 1.375rem;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-three-box .serve-box {
    width: 62.6vw;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.serve-box .serve-item {
    width: 29.8vw;
    height: 10.4vw;
    margin-top: 3vw;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
}

.serve-box .serve-item-info {
    flex: 1;
}

.serve-item-info .right {
    margin-left: 2rem;
    margin-right: 1rem;
    padding: 1.2rem 0;
    box-sizing: border-box;
    height: 100%;
}

.serve-item-info .right .tit {
    font-size: 2rem;
    color: #333333;
}

.serve-item-info .right .text {
    font-size: 1.375rem;
    color: #666666;
    margin-top: 1rem;
}

.page-bottominfo {
    width: 100%;
    height: calc( 337 / 1920 * 100vw );
    display: flex;
    align-items: center;
    background-color: #848484;
    color: #FFFFFF;

}

.page-bottominfo .topinfo {
    width: 100%;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.page-bottominfo .lefttext {
    width: 50%;
    padding-right: 5%;
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 2.0rem;
}

.botom-info {
    font-size: 1.375rem;
    text-align: center;
    margin-top: 2rem;
}

.page-bottominfo .rightinfo {
    margin-right: 5%;
    font-size: 1.4rem;
    flex: .8;
    display: flex;
    flex-direction: column;
}
.page-bottominfo .rightinfo-item {
    display: flex;
}