
.banner{
    height: 510px;
    background-image: url(../images/banner-bg.png);
    display: flex;
    padding: 0 60px;
    align-items: center;
    margin: 20px 0 54px;
}

.banner-info{
    width: 600px;
}

.banner-info h3{
    font-size: 50px;
    font-weight: bold;
}

.banner-info p{
    font-size: 16px;
    margin: 30px 0 57px;
}

.banner-btns{
    display: flex;
}

.btn-google, .btn-appstore{
    display: block;
    width: 168px;
    height: 50px;
    background-size: 100% 100%;
    margin-right: 15px;
}

.btn-google{
    background-image: url(../images/btn-google.png);
}

.btn-appstore{
    background-image: url(../images/btn-appstore.png);
}

.section{
    padding: 60px 0;
}

.section.gray{
    background-color: #F8F8F8;
}

.section-title{
    margin-bottom: 60px;
}

.section-title h3{
    font-size: 50px;
    font-weight: bold;
}


.reasons{
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.reason-cover{
    width: 600px;
}

.reason-cover img{
    border-radius: 30px;
}

.reason-info{
    padding: 40px;
}

.reason-title{
    font-size: 30px;
    margin-bottom: 16px;
    font-weight: bold;
}

.reason-desc{
    font-size: 18px;
    color: #666;
}

.reasons:nth-child(2n) .reason-info .reason-title, .reasons:nth-child(2n) .reason-info .reason-desc{
    text-align: left;
}

.products{
    display: flex;
    justify-content: space-between;
}

.product-item{
    width: 360px;
    height: 569px;
    background-size: 100% 100%;
    padding: 30px 20px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-item :hover{
    transform: translateY(4px);
}

.product-info{
    min-height: 162px;
}

.product-info h3{
    color: #fff;
    font-size: 37px;
    font-weight: bold;
    margin-bottom: 8px;
}

.product-info p{
    color: #fff;
    font-size: 18px;
}

.ourApp{
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ourAppQR{
    width: 565px;
    margin-left: 130px;
}

.ourAppQR h4{
    font-size: 36px;
    font-weight: bold;
    line-height: 47px;
}

.ourAppQR h4 span{
    color: #113AED
}

.ourAppQR-btns{
    margin: 37px 0 27px;
    display: flex;
}

.ourAppQR-code{
    display: flex;
    align-items: center;
}

.ourAppQR-code img{
    width: 160px;
    height: 160px;
}

.ourAppQR-code p{
    margin-left: 30px;
    max-width: 272px;
    font-size: 18px;
    line-height: 22px;
    color: #999
}

.splitLine{
    width: 540px;
    height: 1px;
    background-color: #E3E3E3;
    margin: 27px 0 30px;
}


.service{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}

.service-cover{
    width: 640px;
}

.service-l{
    margin-right: 40px;
}

.service-l li{
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.service-l li:last-child{
    margin-bottom: 0;
}

.service-l li .dot{
    flex: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #113AED;
    color: #ffff;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 40px;
    margin-right: 20px;
}

.service-l li p{
    font-size: 18px;
    line-height: 22px;
    color: #666;
}

.service-cover {
    position: relative;
}

.service-cover p{
    color: #fff;
    font-size: 47px;
    font-weight: bold;
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}