@import "./common.css";
@import "./style.css";

.swiper {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: .54rem 0;
    background: #fff;
    overflow-x: hidden;
    border-bottom: 1px dashed var(--border-color-light);
}

.block {
    padding: 1.1rem var(--content-padding) 1.2rem;
    background: #fff;
}

.block .in {
    width: var(--content-width);
    margin: 0 auto;
    position: relative;
}

.block .in .title {
}

.block .in .sub-title {
    position: relative;
    min-width: 0;
    width: 100%;
}

.gateway {
    background: linear-gradient(to bottom, #fff, #f6f8fb);
    overflow: hidden;
}

.gateway .in > .sub-title {
    width: 100%;
    margin: unset;
}

.gateway .in > .sub-title > span {
    display: block;
    width: 9rem;
    color: inherit;
}

.gateway .in > .sub-title .pager {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: .26rem;
}

.gateway .in > .sub-title .pager img {
    width: .48rem;
    height: .48rem;
    min-width: 36px;
    min-height: 36px;
    cursor: pointer;
    transition: opacity .2s;
}

.gateway .in > .sub-title .pager img:hover {
    opacity: .6;
}

.gateway .features {
    width: 100vw;
    padding-top: .6rem;
}

.gateway .features .items {
    white-space: nowrap;
    display: table-cell;
    font-size: 0;
    transition: 1s ease-in-out;
}

.gateway .features .item {
    display: inline-flex;
    padding: .28rem;
    height: 5.2rem;
    width: 4.66rem;
    border: 1px solid var(--border-color-light);
    border-radius: 12px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.gateway .features .item.type1 {
    width: 5.82rem;
}

.gateway .features .item:not(:first-child) {
    margin-left: .3rem;
}

.gateway .features .item .name {
    font-size: .24rem;
    font-weight: bolder;
}

.gateway .features .item .desc {
    margin-top: .2rem;
    font-size: .16rem;
    line-height: 1.5;
    color: var(--text-color-secondary);
    white-space: normal;
}

.gateway .features .item img {
    height: 2.88rem;
}

.partner .reach-us {
    width: 2rem;
    line-height: .5rem;
    border-radius: .25rem;
    background: var(--theme);
    color: #fff;
    font-size: .2rem;
    margin-top: .5rem;
    box-shadow: 0 0 4px rgba(50, 50, 50, .5);
}

.reach-us:hover {
    text-shadow: 1px 1px 2px rgba(50, 50, 50, .5);
}

.partner {
    overflow: hidden;
    position: relative;
}

.partner .content {
    gap: .86rem;
}

.partner::before {
    content: '';
    width: 100%;
    height: calc(100% -  2.3rem);
    position: absolute; z-index: 2;
    left: 0; top: 1.1rem;
    border-style: dashed;
    border-color: var(--border-color-light);
    border-width: 1px 0 1px 0;
}

.partner .left {
    width: 6.2rem;
    flex-shrink: 0;
}

.partner .right {
    flex-shrink: 0;
    position: relative;
}

.partner .right::before {
    content: '';
    position: absolute; z-index: 2;
    height: calc(100% + 1rem);
    width: 100%;
    left: 0; top: -.5rem;
    border-style: dashed;
    border-color: var(--border-color-light);
    border-width: 0 1px 0 1px;
}

.partner .right::after {
    content: '';
    position: absolute; z-index: 2;
    height: calc(100% + 1rem);
    width: 50%;
    left: 25%; top: -.5rem;
    border-style: dashed;
    border-color: var(--border-color-light);
    border-width: 0 1px 0 1px;
}

.partner .deco {
    position: absolute; z-index: 2;
    height: 33.33%;
    width: 100%;
    left: 0; top: 33.33%;
    border-style: dashed;
    border-color: var(--border-color-light);
    border-width: 1px 0 1px 0;
}

.partner .right img {
    width: 9.12rem;
}

@media (max-width: 960px) {
    .gateway .features .item {
        padding: 14px;
        height: 320px;
        width: 290px;
    }

    .gateway .features .item.type1 {
        width: 360px;
    }

    .gateway .features .item .name {
        font-size: 14px;
    }

    .gateway .features .item .desc {
        font-size: 10px;
    }

    .gateway .features .item img {
        height: 185px;
    }

    .partner .content {
        flex-direction: column;
    }

    .partner .left {
        width: 100%;
    }

    .partner .__basic-title {
        width: 100%;
    }

    .partner .__basic-sub-title {
        width: 100%;
    }

    .partner::before {
        display: none;
    }

    .partner .reach-us {
        display: none;
    }

    .partner .right::before,
    .partner .right::after {
        height: 100%;
        top: 0;
    }

    .partner .right {
        width: 90%;
        margin-left: 5%;
    }
    .partner .right img {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .gateway .in > .sub-title .pager {
        display: none;
    }

    .gateway .in > .sub-title > span {
        width: 100%;
    }

    .gateway .features {
        padding-top: 40px;
        overflow-x: auto;
        width: 100%;
    }
    .partner .right {
        width: 100%;
        margin-left: 0;
    }
}