/* banner */
.top-banner .banner-first {
    background: url('/static/images/api/nb6.png') no-repeat center center / cover;
}

/* 为什么选择极联API接口？ */
.why-choose {}

.why-choose-wrapper {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    gap: 30px;
}

.why-choose-wrapper .card {
    padding: 30px 16px;
    width: calc((100% - 3*30px) / 4);

    background-image: url('/static/images/api/ty0.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;

    background-color: #FFFFFF;
    box-shadow: 0px 1px 20px 0px rgba(9, 67, 135, 0.2);
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.why-choose-wrapper .card img {
    height: 124px;
    width: auto;
}

.why-choose-wrapper .card h3 {
    font-weight: 500;
    font-size: 18px;
    color: var(--primary-color);
}

.why-choose-wrapper .card .line {
    width: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}


.why-choose-wrapper .card ul li {
    font-weight: 400;
    font-size: 14px;
    color: var(--content-color);
}

/* API接口能力全景，模块化通信构建 */
.api-scene {}

.tabs {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    margin-bottom: 33px;
}

.tabs .tab {
    padding: 0 20px;
    height: 50px;
    background: #F5F6FC;
    border: 1px solid #D4D4D4;
    border-right-width: 0;

    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease-out 0.3s;
}

/* .tabs .tab:hover {
    color: white;
    background: var(--primary-color);
    box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.13);
} */

.tabs .tab img {
    height: 27px;
    width: auto;
}

.tabs .tab:last-child {
    border-right-width: 1px;
}

.tab.hover {
    background: var(--primary-color);
    color: white;
    box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.13);
}

.api-scene-wrapper {
    background: url('/static/images/api/bg2.png') no-repeat center center / cover;
    height: 470px;
}

.api-scene-wrapper .card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0;

    display: none;
    justify-content: space-between;
}

.api-scene-wrapper .card.show {
    display: flex;
}

.api-scene-wrapper .card .image {
    width: 580px;
    height: 410px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.13);
}

.api-scene-wrapper .card .content {
    width: calc(100% - 620px);
}

.api-scene-wrapper .card .image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}


.api-scene-wrapper .card .content h3 {
    font-size: 24px;
    font-weight: 600;
}

.api-scene-wrapper .card .content ul {
    margin: 30px 0;
}

.api-scene-wrapper .card .content ul li {
    margin-top: 20px;
}

.api-scene-wrapper .card .content ul li .title {
    font-size: 20px;
    font-weight: 400;
}

.api-scene-wrapper .card .content ul li .desc {
    color: var(--content-color);
    font-size: 14px;
    font-weight: 400;
}

.api-scene-wrapper .card .content ul li .desc img {
    width: 25px;
    height: auto;
}

.api-scene-wrapper .card .content .tag {
    background: var(--primary-color);
}

/* 典型集成场景，赋能关键业务流程 */
.integration-scene {}

.integration-scene-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 66px;
}

.integration-scene-wrapper .card {
    display: flex;
    justify-content: space-between;
}

.integration-scene-wrapper .card:not(:first-child) {
    margin-top: 80px;
}

.integration-scene-wrapper .card .image {
    width: 580px;
    height: 410px;
    border-radius: 8px;
    overflow: hidden;

    box-shadow: 0px 1px 40px 0px rgba(0, 0, 0, 0.13);
}

.integration-scene-wrapper .card .content {
    width: calc(100% - 620px);
}

.integration-scene-wrapper .card .image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}


.integration-scene-wrapper .card .content h3 {
    font-size: 24px;
    font-weight: 600;
}

.integration-scene-wrapper .card .content ul {
    margin-top: 40px;
}

.integration-scene-wrapper .card .content ul li {
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0;
}

.integration-scene-wrapper .card .content ul li .title {
    color: var(--primary-color);
    font-weight: 600;
}

.integration-scene-wrapper .card .content ul li .desc {
    color: var(--content-color);
    margin-top: 10px
}

.integration-scene-wrapper .card .content ul li .desc.button {
    background: var(--secondary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
}