body::before{
    clear: both;
    content: "";
    width: 100%;
    height: 480px;
    background: linear-gradient( 180deg, #F7FBFE 0%, rgba(247,251,254,0) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}
.banner{
    align-items: center;
    position: relative;
}
.banner::before{
    clear: both;
    content: "";
    background: url(/images/index/bg1.svg);
    width: 200px;
    height: 102px;
    position: absolute;
    left: -360px;
    top: 100px;
}
.banner>img{
    transform: translateY(-24px);
}
.banner div{
    position: relative;
}
.banner div::before{
    clear: both;
    content: "";
    background: url(/images/index/bg2.svg);
    width: 68px;
    height: 46px;
    position: absolute;
    top: -33px;
    right: 20px;
}
.banner h1{
    font-size: 70px;
    color: #1A1A1A;
    line-height: 82px;
}
.banner .info{
    margin-top: 10px;
    font-size: 16px;
    color: #333333;
    line-height: 30px;
}
.banner .btn{
    width: 170px;
    height: 54px;
    line-height: 54px;
    background: #3270FF;   
    border-radius: 54px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    display: inline-block;
    margin-top: 32px;
    text-decoration: none;
}
.banner .btn::after{
    clear: both;
    content: "";
    background: url(/images/index/more.svg);
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: -4px;
    margin-left: 14px;
}
.main>div{
    max-width: 380px;
    width: 100%;
    background: linear-gradient( 173deg, #EDF8FF 1%, #F9FCFE 100%);
    border-radius: 18px 18px 18px 18px;
    padding-top: 24px;
    padding-bottom: 26px;
    box-sizing: border-box;
    position: relative;
}
.main>div.sale{
    padding-left: 14px;
    padding-right: 14px;
}
.main>div .title{
    font-size: 20px;
    color: #333;
    line-height: 24px;
    font-weight: bold;
}
.main{
    margin-top: 64px;
}
.main>div .more{
    text-align: right;
    color: #454545;
    font-size: 14px;
    margin-top: 20px;
}
.main>div .more a:hover{
    color: #3270FF;
}

.main>div.sale::before{
    clear: both;
    content: "";
    background: url(/images/index/trophy.svg);
    width: 94px;
    height: 44px;
    position: absolute;
    top: 18px;
    right: 36px;
}
.main>div.sale .title{
   padding-left: 32px; 
}
.main>div.sale table{
    width: 100%;
    text-align: center;
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 14px;
    border: none;
}
.main>div.sale table i{
    width: 28px;
    height: 28px;
    background: url(/images//index/ranking.svg);
    vertical-align: -6px;
}
.main>div.sale table i.icon2{
    background-position-y: -28px;
}
.main>div.sale table i.icon3{
    background-position-y: -56px;
}
.main>div.sale table tr:nth-child(1) td{
    font-size: 16px;
    color: #333;
    line-height: 20px;
    font-weight: bold;
    padding-top: 18px;
    padding-bottom: 18px;
}
.main>div.sale table tr:last-child td{
    padding-bottom: 25px;
}
.main>div.sale table tr{
    position: relative;
}
.main>div.sale table tr td:first-child{
    padding-left: 12px;
}
.main>div.sale table tr td:last-child{
    padding-right: 12px;
}
.main>div.sale table tr td{
    line-height: 40px;
    padding: 0;
    padding-bottom: 14px;
    position: relative;
    z-index: 2;
}
.main>div.sale table tr:nth-child(2)::after{
    clear: both;
    content: "";
    width: calc(100% - 24px);
    height: 40px;
    position: absolute;
    left: 12px;
    top: 0px;
    background: linear-gradient(90deg,#FAEEFF,rgba(250, 238, 255, 0.30));
    border-radius: 40px;
}
.main>div.sale table tr:nth-child(3)::after{
    clear: both;
    content: "";
    width: calc(100% - 39px);
    height: 40px;
    position: absolute;
    left: 12px;
    top: 0px;
    background: linear-gradient(90deg,rgba(242, 242, 255, 1),rgba(242, 242, 255, 0.30));
    border-radius: 40px;
}
.main>div.sale table tr:nth-child(4)::after{
    clear: both;
    content: "";
    width: calc(100% - 52px);
    height: 40px;
    position: absolute;
    left: 12px;
    top: 0px;
    background: linear-gradient(90deg,rgba(233, 248, 255, 1),rgba(233, 248, 255, 0.30));
    border-radius: 40px;
}
.main>div.notice{
    border: 1px solid #D6EBFF;
    padding-left: 29px;
    padding-right: 29px;
}
.main>div.notice .title{
    padding-bottom: 24px;
    border-bottom: 1px solid #D6EBFF;
    margin-bottom: 24px;
}
.main>div.notice:nth-child(2)::before{
    clear: both;
    content: "";
    background: url(/images/index/bg5.svg);
    width: 184px;
    height: 40px;
    position: absolute;
    top: 20px;
    right: 79px;
}
.main>div.notice:nth-child(3)::before{
    clear: both;
    content: "";
    background: url(/images/index/bg6.svg);
    width: 184px;
    height: 40px;
    position: absolute;
    top: 20px;
    right: 73px;
}
.main>div.notice>ul>li{
    margin-bottom: 16px;
    font-size: 16px;
    color: #333;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main>div.notice>ul>li>a:hover{
    color: #3270FF;

}
.main>div.notice .more{
    margin-top: 0px;
}