@font-face {
  font-family: 'WenYuanSansSCVF';
  src: url('/assets/ttfs/WenYuanSansSCVF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body{
    background-color: #F9FAFB;
}
.top{
    margin: 5px 10% 0px 10%;
}
.top-logo{
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
.top-logo-icon{
    height: 60px;
}
.top-logo-title{
    margin-left: 10px;
}
.top-main{
    display: flex;
}
.top-main-left{
    margin-right: 10px;
}
.top-main-left-title{
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'WenYuanSansSCVF', sans-serif;
}
.top-main-left-context{
    width: 45vw;
    align-items: center;
    justify-content: center;
}
.top-main-left-button{
    display: flex;
    margin-top: 25px;
}
.top-main-left-button-left{
    background-color: #2563EB;
    padding: 13px 30px;
    border-radius: 30px;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 12px;
}
.top-main-left-button-right{
    background-color: #E0E0E0;
    padding: 13px 30px;
    border-radius: 30px;
    color: #000000;
    text-decoration: none;
    margin-left: 12px;
}
.top-main-right{
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.top-main-right-demopic{
    width: 500px;
    max-width: 40vw;
}
.bottom{
    margin: 30px 10% 0px 10%;
}
.bottom-feature{
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom-feature-user{
    width: 33%;
    max-width: 33%;
    height: 200px;
    display: flex;
    flex-direction: column;
    background-color: #F0F0F0;
    padding: 20px;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.bottom-feature-user-icon{
    width: 40px;
    height: 40px;
    margin-top: 10px;
}
.bottom-feature-user-title{
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0px;
}
.bottom-feature-user-context{
    margin: 15px 0px 0px 0px;
    color: #303030;
}
.bottom-feature-placeholder{
    width: 20px;
}