.api-detail-main {
    margin-top: 5rem;
}

.api-detail-banner {
    width: 100%;
    height: 40rem;
    background: url('https://gwfile.a2c.chat/static/images/common/banner.png') no-repeat center center;
    background-size: 100% 100%;
}

.banner-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.banner-left {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.banner-left .banner-title {
    font-size: 56px;
    font-weight: bold;
}

.banner-whatsapp {
    color: #10B981
}

.banner-a {
    color: #00A8FF;
}

.banner-p {
    color: #FF4757;
}

.banner-i {
    color: #2ED573;
}

.banner-desc {
    font-size: 18px;
    margin-top: 2.125rem;
}

.banner-right {
    width: 43.3125rem;
    height: 33.5625rem;
    flex-shrink: 0;
}

.banner-right img {
    width: 100%;
    height: 100%;
}

.api-detail-construct {
    margin-top: 6.25rem;
}

.construct-list {
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
}

.construct-item {
    width: 26%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.construct-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.construct-item-img {
    width: 100%;
    text-align: center;
}

.construct-icon1 {
    width: 10.25rem;
    height: 4.625rem;
}

.construct-icon2 {
    width: 11.0625rem;
    height: 4.5rem;
}

.construct-icon3 {
    width: 10.875rem;
    height: 4.1875rem;
}

.construct-item-title {
    margin-top: 2.5rem;
    font-weight: bold;
    font-size: 20px;
}

.construct-item-desc {
    margin-top: 1.25rem;
    font-size: 14px;
}

.api-detail-information {
    margin-top: 6.875rem;
    padding-top: 6.25rem;
    width: 100%;
    height: 59.625rem;
    background: #023B33;
}

.information-tips,
.information-title,
.information-desc {
    width: 100%;
    text-align: center;
}

.information-tips {
    font-weight: bold;
    font-size: 28px;
    color: #FFD301;
}

.information-title {
    margin-top: 3.125rem;
    font-weight: bold;
    font-size: 36px;
    color: #FFFFFF;
}

.information-desc {
    margin-top: 2.25rem;
    font-size: 18px;
    color: #AEB2C0;
}

.information-content {
    margin-top: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.information-content.animate {
    opacity: 1;
    transform: translateY(0);
}

.information-content .content-right {
    width: 57.5rem;
    height: 31rem;
    background: #10B981;
    border-radius: 1.625rem;
}

.content-left-item {
    display: flex;
    align-items: center;
    width: 15.375rem;
    height: 6.5rem;
    font-weight: 800;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    border-left: 1px solid #345C57;
    cursor: pointer;
}

.content-left-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    margin-left: 1.125rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.content-left-item-icon img {
    width: 2.3125rem;
    height: 2.3125rem;
}

.content-left-item.active {
    background: rgba(255, 255, 255, 0.2);
    border-left: 3px solid #43cd66;
}

.content-left-item.active .content-left-item-icon {
    background: #10B981;
}

.content-left-item.active {
    color: #fff;
}

.information-content .content-right-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.content-right-item-title {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	font-size:18px;
	color:#fff
}

.content-right-item-icon1 {
    margin-top: 2.2rem;
    width: 28rem;
    height: 24.125rem;
}

.content-right-item-icon2 {
    margin-top: 1.2rem;
    width: 28.625rem;
    height: 25.125rem;
}

.content-right-item-icon3 {
    margin-top: 2.2rem;
    width: 36.5rem;
    height: 24.125rem;
}

.content-right-item-icon4 {
    margin-top: 2.2rem;
    width: 29.875rem;
    height: 23.8rem;
}

.api-detail-interaction {
    margin-top: 6.875rem;
}

.interaction-tips,
.interaction-desc {
    width: 100%;
    text-align: center;
}

.interaction-tips {
    margin-bottom: 3.125rem;
    font-size: 28px;
    font-weight: bold;
    color: #10B981;
}

.interaction-desc {
    margin-top: 2.25rem;
    font-size: 18px;
}

.interaction-content .content-item {
    margin-top: 6.25rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.interaction-content .content-item:nth-child(even) {
    transform: translateX(50px);
}

.interaction-content .content-item.animate {
    opacity: 1;
    transform: translateX(0);
}

.interaction-content .content-item .content-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25rem;
    height: 21.875rem;
    background: #EFF2FB;
    border-radius: 1.875rem;
}

.interaction-content .content-item .content-item-icon img {
    width: 22.8125rem;
    height: 19.6875rem;
}

.item-text-title {
    margin-bottom: 1.875rem;
    font-weight: bold;
    font-size: 34px;
}

.item-text-desc {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
}

.item-text-desc img {
    margin-right: 0.625rem;
    width: 1.125rem;
    height: 1.125rem;
}

.major-function-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.major-function-content.animate {
    opacity: 1;
    transform: translateY(0);
}

.major-function-content-right-item {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.major-function-content-right-item.animate {
    opacity: 1;
    transform: translateX(0);
}