.section {
    padding: 30px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.section .title {
    margin: 20px 0;
    font-weight: 500;
}
.section .content {
    width: 100%;
}

.section .title .t0 {
    font-size: 26px;
}
.section .title .t1 {
    font-size: 14px;
}
/*.s1 {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    margin-top: 60px;*/
/*    padding: 0 15px 20px;*/
/*    min-height: 69vw;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/

/*.s1::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: url("../../images/official-site/index/bg-main.webp") no-repeat center center;*/
/*    background-size: cover;*/
/*    z-index: -1;*/
/*    animation: bgZoom 9s infinite;*/
/*}*/

/*@keyframes bgZoom {*/
/*    0% {*/
/*        transform: scale(1);*/
/*    }*/
/*    70% {*/
/*        transform: scale(1.03);*/
/*    }*/
/*    100% {*/
/*        transform: scale(1);*/
/*    }*/
/*}*/
.s1 {
    position: relative;
    margin-top: 60px;
    padding-top: 40px;
    padding-bottom: 0;
    min-height: 86vh;
    display: flex;
    justify-content: center;
}
.s1 .tip {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 998;
    min-width: 300px;
    padding: 6px 3px;
    display: inline-block;
    background: #313131;
    color: #FFB72C;
    font-size: 10px;
}
.s1 .tip span {
    cursor: pointer;
    padding: 0 2px;
}

.s1 .content ._ {
    width: 100%;
    margin: 30px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.s1 .content ._0 {
    max-width: 100%;
    display: inline-block;
}
.s1 .features {
    cursor: crosshair;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    color: #fff;
    text-align: center;
    font-weight: 500;
}
.s1 .features .sep {
    height: 24px;
    width: 1px;
    border: 1px solid #E7E7E7;
}
.s1 .features .feature img {
    height: 20px;
}
.s1 .features .feature div:nth-of-type(1) {
    color: #FC3C49;
    font-size: 14px;
}
.s1 .features .feature div:nth-of-type(2) {
    color: #313131;
    white-space: nowrap;
    font-size: 11px;
}
.s1 .title {
    cursor: crosshair;
    margin: 30px 0;
}
.s1 .title .t0 {
    transition: transform 1.5s ease;
    font-size: 36px;
    font-weight: 500;
    color: #313131;
}
.s1 .title .t0:hover {
    transform: scale(1.05);
}
.s1 .title .t1 {
    font-size: 12px;
    font-weight: 500;
    color: #313131;
}
.s1 .title .t1 img {
    height: 16px;
    margin-top: -2px;
    vertical-align: middle;
}
.s1 .title .t2 {
    margin-top: 13px;
    padding: 3px 15px;
    border: 1px solid #E7E7E7;
    border-radius: 30px;
    color: #6C6D75;
    display: inline-block;
    font-size: 10px;
}
.s1 .download-area {
    margin-top: 30px;
}
.s1 .download {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.s1 .download >div {
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.s1 .download >div:hover {
    padding: calc(8px + 1.2%) calc(10px + 1.2%);
    box-shadow: 0 0 10px rgb(203, 248, 2);
}
.s1 .apk {
    background: #020202;
    color: #fff;
    /*animation: fall 2s ease-out;*/
    animation-fill-mode: forwards;
}
.s1 .google-play,.app-store {
    border: 1px solid #020202;
    color: #020202;
}
.s1 .google-play {
    /*animation: fall 1s ease-out;*/
}
.s1 .app-store {
    /*animation: fall 1.5s ease-out;*/
}
@keyframes fall {
    0% {
        transform: translateY(-100vh) scale(0.1) rotate(-5deg);
        opacity: 0;
    }
    70% {
        transform: translateY(10px) scale(1) rotate(2deg);
        opacity: 1;
    }
    85% {
        transform: translateY(-5px) scale(1) rotate(-1deg);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}
.s1 .download img {
    height: 30px;
}
.s1 .download div:first-child {
    font-size: 9px;
}
.s1 .download div:last-child {
    font-weight: 500;
    font-size: 13px;
}
.s1 .other-download {
    cursor: not-allowed;
    margin-top: 30px;
    color: #313131;
    font-size: 11px;
}
.s1 .more {
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 15px;
    border: 1px solid #E7E7E7;
    border-radius: 30px;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 10px;
    color: #6C6D75;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s1 .more img {
    height: 12px;
    margin-top: -2px;
    vertical-align: middle;
}
.s1 .content ._1 {
    margin-top: 30px;
    width: 100%;
    text-align: right;
}
.s1 .content ._1 img {
    max-width: 80%;
}
.s1 .content ._1 img:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.gallery {
    position: relative;
    padding: 150px 0;
}
.gallery div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.gallery img {
    height: 160px;
}
.gallery img:not(:last-child) {
    /*margin-right: 50px;*/
}
.gallery img:hover {
    border-radius: 15px;
    box-shadow: 0 0 10px rgb(0, 208, 255);
    transform: scale(1.2) translateY(-20px);
    transition: all 0.3s ease;
}

.s2 .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.s2 .content .card {
    min-height: 120px;
    width: 100%;
    border: 1px solid #F2F2F2;
    border-radius: 15px;
    display: flex;
    text-align: left;
}
.s2 .content .card:hover {
    box-shadow: 0 0 10px rgb(0, 208, 255, 0.5);
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.s2 .content .card >div {
    width: 100%;
}
.s2 .content .card .name {
    font-size: 16px;
    font-weight: 500;
}
.s2 .content .card img {
    width: 100%;
}

.s2 .content .others {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.s2 .others .card {
    padding: 15px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.s2 .others .card div:nth-of-type(2) {
    margin-bottom: 20px;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}
.s2 .c0 {
    flex-direction: column;
}
.s2 .c0 >div:nth-of-type(1) {
    padding: 20px;
}
.s2 .c0 >div:nth-of-type(2) {
    min-height: 120px;
    border-radius: 0 0 15px 15px;
    background: url("../../images/official-site/index/cards/0.webp") no-repeat center center;
    background-size: cover;
}

.s2 .c1 {
    background: url("../../images/official-site/index/cards/1.webp") no-repeat center right;
    background-size: contain;
}

.s2 .c2 {
    background: url("../../images/official-site/index/cards/2.webp") no-repeat center right;
    background-size: contain;
}

.s3 .content {
    max-width: 100%;
    border-radius: 15px;
    background: linear-gradient(180deg ,#FAFAFA, #FFF);
}
.s3 .content >div {
    display: flex;
}
.s3 .feature:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
}
.s3 .content .all-features {
    padding-top: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px 0;
}

.s3 .content .all-features > .feature {
    flex: 0 0 18%;
}
.s3 .content .all-features > .feature img {
    height: 36px;
}
.s3 .content .all-features > .feature div {
    font-size: 10px;
}

.s3 .content .main-features {
    padding: 0 5px;
    flex-direction: column;
}
.s3 .content .main-features .feature {
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 35px;
    text-align: left;
}
.s3 .content .main-features .feature .illustration {
    max-width: 100px;
    width: 30%;
}
.s3 .content .main-features .feature div {
    max-width: 100%;
}
.s3 .content .main-features .feature .hot {
    margin-bottom: 8px;
    padding: 2px 5px;
    border-radius: 20px;
    background: linear-gradient(45deg, #FE1B60 50%, #FC3C49 80%, #FC3C49);
    color: white;
    display: inline-block;
    font-size: 8px;
}
.s3 .content .main-features .feature .hot img {
    height: 10px;
    margin-top: -1px;
    vertical-align: middle;
}
.s3 .content .main-features .feature .title-0 {
    font-size: 16px;
    font-weight: 500;
}
.s3 .content .main-features .feature .title-1 {
    font-size: 11px;
    font-weight: 500;
}
.s3 .content .main-features .feature .desc {
    margin-top: 8px;
    font-size: 10px;
}

.s4 .content .avatars {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.s4 .content .avatars img:hover {
    transform: scale(1.2);
    transition: all 0.3s ease;
}
.s4 .content .avatars img:nth-of-type(3) {
    height: 60px;
}
.s4 .content .avatars img:nth-of-type(1),
.s4 .content .avatars img:nth-of-type(5){
    height: 35px;
}
.s4 .content .avatars img:nth-of-type(2),
.s4 .content .avatars img:nth-of-type(4){
    height: 45px;
}
.s4 .content .name {
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
}


.s5 .content {
    width: 100%;
}
.s5 .content .table-view {
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(180deg ,#FAFAFA, #FFF);
    display: flex;
    justify-content: center;
}
.s5 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.s5 table tbody tr:hover {
    background: #F3F3F3;
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.s5 table thead th {
    padding: 15px;
    color: #FC3C49;
    font-weight: 500;
    font-size: 14px;
}
.s5 table tbody td {
    padding: 10px;
    font-size: 12px;
}
.s5 table tbody tr:nth-of-type(3) td:not(:first-child) {
    color: #FC3C49;
    font-weight: 500;
}
.s5 .join {
    cursor: pointer;
    padding: 15px 20px;
    margin-top: 30px;
    border-radius: 10px;
    background: linear-gradient(45deg, #FE1B60 50%, #FC3C49 80%, #FC3C49);
    color: #fff;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
}
.s5 .join:hover {
    box-shadow: 0 0 10px rgb(183, 0, 255);
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.s5 .join img {
    margin-top: -2px;
    margin-left: 6px;
    vertical-align: middle;
}