:root {
    --ffffff: #ffffff;
    --282828: #282828;
    --ffd733: #ffd733;
    --2997ff: #2997ff;
    --ff9b3d: #ff9b3d;
    --FAFAFA: #FAFAFA;
    --F0F1F2:#F0F1F2;
    --A3A3A3:#A3A3A3;
    --2A2A2A:#2A2A2A;
}

[v-cloak] {
    display: none;
}

body {
    background: var(--FAFAFA);
    color: var(--282828);
    line-height: 1.4;
    font-weight: 400;
}



.fz {
    font-size: 20px;
}

.page {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

/*  */
#app {
    padding-top: 24px;
}

.banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



.h_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: .2em;
    background-color: var(--ffd733);
    padding: .4em .9em;
}
.h_top img{
    width: auto;
    height: .9em;
}
.h_top span {
    font-size: .9em;
    margin-right: .5em;
    background: var(--ffd733);
    color: var(--282828);
    border-radius: .2em;
    font-weight: 600;
    line-height: 1;
}

.banner h1 {
    width: 600px;
    font-size: 2em;
    margin: .3em 0 ;
    color: var(--ffd733);
    font-weight: bold;
}

.desc {
    width: 600px;
    font-size: 1em;
    margin: 0 0 .6em 0;
    font-weight: 400;
}

.sub-desc {
    font-size: 0.7em;
    opacity: 0.9;
}

/*  */
.title {
    font-size: 1.2em;
    padding-left: 1.33em;
    color: var(--282828);
    margin: 2.5em 0 1.5em;
    font-weight: bold;
    position: relative;
}

.title::before {
    content: '';
    width: .4em;
    height: 1em;
    background-color: var(--ffd733);
    position: absolute;
    top: .2em;
    left: 0;
}

.title span {
    font-size: .9em;
    opacity: .7;
    font-weight: 400;
    margin-left: .5em;
}

html[lang="ar"] .title {
    padding-right: 1.33em;
    padding-left: 0;
}

html[lang="ar"] .title::before {
    left: auto;
    right: 0;
}
/* add */
.banner .all{
    width: 100%;
    height: auto;
    border-radius: .4em;
    overflow: hidden;
}
.banner .all img {
    width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 主要内容区域 */
.main {
    padding: 20px 0;
}

.waSlide {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--ffffff);
    padding: 2em;
    border-radius: .2em;
    box-sizing: border-box;
}

.swiperContainer {
    overflow: hidden;
    border-radius: .4em;
}

.we_left {
    width: 48%;
    height: auto;
    border-radius: .5em;
    position: relative;
}

.we_left img {
    width: 100%;
    height: 303px;
    object-fit: cover;
}

.we_left .swiper-slide {
    display: flex;
}

.swiper-pagination-bullet {
    width: .2em;
    height: .2em;
    background: var(--ffffff);
    opacity: .6;
}

.swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    width: .5em;
    border-radius: .1em;
    opacity: 1;
}

.we_right {
    width: 52%;
    color: var(--282828);
    padding-left: 1.5em;
}

html[lang="ar"] .we_right {
    padding-left: 1.5em;
    margin-right: 1.5em;
}

/* 新增虚线背景样式 */
.we_right .w_rt_item {
    padding-bottom: 1.2em;
    margin-bottom: 1.2em;
    position: relative;
}

.we_right .w_rt_item h4 {
    font-size: 1em;
    margin-bottom: .3em;
}

.we_right .w_rt_item p {
    font-size: .8em;
    margin-bottom: .63em;
    color: var(--A3A3A3);
}

.we_right .w_rt_item a {
    font-size: .7em;
    color: var(--2A2A2A);
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.we_right .w_rt_item a img{
    width: 1.4em;
    height: 1.4em;
    margin-left: .2em;
}

html[lang="ar"] .we_right .w_rt_item a img{
    margin-left: 0;
    margin-right: .2em;
    transform: scaleX(-1);
}

.w_rt_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--A3A3A3), var(--A3A3A3) 5px, transparent 5px, transparent 10px);
}

.w_rt_item:last-child::after {
    display: none;
}


/* 时间线样式 */
.timeline_section {
    color: var(--282828);
}

.timeline_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: var(--ffffff);
    border-radius: .2em;
    padding: 2em 2em;
    margin-bottom: 1em;
}

.timeline_container .timeline_item:last-child {
    margin-bottom: 0;
}

.timeline_l {
    width: 86%;
}

.timeline_r {
    width: 14%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.te_tag {
    max-width: 90%;
    margin-bottom: 1.1em;
    display: flex;
}

.te_tag span {
    background-color: var(--ffd733);
    font-size: .8em;
    padding: .3em 1.25em;
    border-radius: .25em;
    font-weight: 600;
}

.content {
    padding-left: 0em;
}

.content h4 {
    font-size: 1.1em;
}

.content p {
    font-size: .8em;
    margin: .63em 0;
    color: var(--A3A3A3);
}

.content a {
    font-size: .7em;
    color: var(--2A2A2A);
    text-align: right;
    color: var(--282828);
    display: flex;
    justify-content: flex-end;
}

.w_rt_item {
    position: relative;
    padding-bottom: 1.6em;
    margin-bottom: 1.6em;
}

w_rt_item:last-of-type {
    margin-bottom: 0;
}

.w_rt_item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, rgba(163, 163, 163, .4), rgba(163, 163, 163, .4) 5px, transparent 5px, transparent 10px);
}
.timeline_l .w_rt_item a img{
    width: 1.4em;
    height: 1.4em;
    margin-left: .2em;
}

html[lang="ar"] .timeline_l .w_rt_item a img{
    margin-left: 0;
    margin-right: .2em;
    transform: scaleX(-1);
}

.timeline_r .number {
    font-size: 1.9em;
    font-weight: 800;
    text-align: right;
}

.line {
    width: 2px;
    height: calc(100% - 4em);
    background-color: var(--282828);
    margin: 1em 2em 1em 0;
    position: relative;
    box-sizing: border-box;
}

.line::after {
    content: '';
    position: absolute;
    bottom: -.45em;
    left: -.55em;
    width: 1.2em;
    height: 1.2em;
    background: url(../images/tobottom.png) no-repeat center center;
    background-size: contain;
}

/*  */
html[lang="ar"] .line {
    margin: 1em 0 1em 2em;
}


.content .w_rt_item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* 模块区 */
.modules {
    display: flex;
    flex-direction: column;
}

.cards_container {
    background-color: var(--ffffff);
    display: flex;
    flex-wrap: wrap;
    border-radius: .2em;
}
.cards_container .card {
    width: calc(100%);
    padding: 1.6em;
    box-sizing: border-box;
    position: relative;
}
/* .cards_container .card {
    width: calc(100% / 3);
    padding: 1.6em;
    box-sizing: border-box;
    position: relative;
} */

/* .cards_container .card::after {
    content: '';
    position: absolute;
    bottom: 1.6em;
    right: 0;
    width: 1px;
    height: calc(100% - 3.2em);
    background: repeating-linear-gradient(to bottom, rgba(163, 163, 163, .4), rgba(163, 163, 163, .4) 5px, transparent 5px, transparent 10px);
} */

.cards_container .card:nth-child(3n)::after {
    opacity: 0;
}

/*  */
html[lang="ar"] .cards_container .card::after {
    right: auto;
    left: 0;
}


.card h4 {
    font-size: 1.1em;
}

.card p {
    font-size: .8em;
    margin: .5em 0 1em;
    color: var(--A3A3A3);
}

.card a {
    font-size: .7em;
    text-align: right;
    color: var(--2A2A2A);
    display: flex;
    justify-content: flex-end;
}
.card a img{ 
    width: 1.4em;
    height: 1.4em;
    margin-left: .2em;
}
html[lang="ar"] .card a img{ 
    margin-left: 0;
    margin-right: .2em;
    transform: scaleX(-1);
}

.tips {
    font-size: 0.7em;
    color: var(--282828);
    text-align: right;
    margin: 5em 0 2em;
    opacity: .7;
}

/*  */
html[lang="ar"] .tips {
    text-align: left;
}

/* 响应式媒体查询 */
@media (max-width: 1280px) {
    .page {
        width: 100%;
        padding: 0 5%;
    }

    .fz {
        font-size: 16px;
    }
}

@media (max-width: 799px) {
    .fz {
        font-size: 15px;
    }

    header {
        padding-top: 0em;
    }

    header .page {
        width: 100%;
        padding: 0;
    }
    /* add */
    .banner .all {
        width: 100%;
        height: auto;
        border-radius: 0em;
        overflow: hidden;
    }
    .banner h1 {
        width: 100%;
    }
    .desc {
        width: 100%;
    }
    .desc {
        margin: .5em 0;
    }

    .h_top {
        padding: .6em 2em;
    }

    .h_top span {
        font-size: 1.5em;
    }

    .waSlide {
        flex-direction: column;
    }

    .we_left {
        width: 100%;
        border-radius: 0;
    }

    .we_right {
        width: 100%;
        margin-top: 1em;
        padding-left: 0;
    }

    html[lang="ar"] .we_right {
        padding-left: 0;
        margin-right: 0em;
    }

    .swiperContainer {
        border-radius: .5em;
    }

    .swiper-slide img {
        border-radius: .5em;
    }

    .swiper-pagination {
        display: none;
    }

    .we_right .w_rt_item p {
        margin-bottom: .5em;
    }

    .title {
        padding-left: 1em;
    }

    .title::before {
        width: .4em;
    }

    .timeline_r {
        width: 12%;
        height: 90%;
        position: absolute;
        top: 2em;
        right: 0;
    }

    html[lang="ar"] .timeline_r {
        right: auto;left: 0;
    }

    .timeline_l {
        width: 85%;
    }

    .timeline_item {
        justify-content: flex-start;
    }

    .timeline_r .number {
        font-size: 1.5em;
    }

    .line {
        width: 1px;
        margin: 1em 0;
        transform: translateX(1.5em);
    }

    html[lang="ar"] .line {
        transform: translateX(-1.5em);
    }

    .line::after {
        bottom: -.5em;
        left: -.6em;
        width: 1.2em;
        height: 1.2em;
    }

    .timeline_r {
        width: 20%;
        align-items: center;
    }

    .content p {
        margin: .5em 0;
    }

    .cards_container .card {
        width: 100%;
    }
    /* .cards_container .card {
        width: 50%;
    } */

    /* .cards_container .card::after {
        content: '';
        position: absolute;
        bottom: 1em;
        right: 0;
        width: 1px;
        height: calc(100% - 2em);
        background: repeating-linear-gradient(to bottom, rgba(163, 163, 163, .4), rgba(163, 163, 163, .4) 3px, transparent 5px, transparent 6px);
        opacity: 1;
    }

    .cards_container .card:nth-child(3n)::after {
        content: '';
        position: absolute;
        bottom: 1em;
        right: 0;
        width: 1px;
        height: calc(100% - 2em);
        background: repeating-linear-gradient(to bottom, rgba(163, 163, 163, .4), rgba(163, 163, 163, .4) 3px, transparent 5px, transparent 6px);
        opacity: 1;
    }

    .cards_container .card:nth-child(2n)::after {
        opacity: 0;
    } */

    .tips {
        padding: 0 5%;
        font-size: .8em;
        margin: 4em 0 1.5em;
        text-align: center;
    }

    .we_right .w_rt_item:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/*  */
.nav_sum {
    display: flex;
    flex-wrap: wrap;
    padding: 2em 0 0em;
}

.navagit_item {
    margin-right: .7em;
    margin-bottom: .7em;
    display: flex;
    justify-content: center;
    align-items: center;
}

html[lang="ar"] .navagit_item {
    margin-right: 0;
    margin-left: 1.5em;
}

.navagit_item a {
    background-color: var(--F0F1F2);
    color: var(--282828);
    font-size: .8em;
    padding: 0.56em 2.25em;
    border-radius: 0.25em;
    font-weight: bold;
}

.navagit_item.nav_active a {
    background-color: var(--ffd733);
}

#tag1 {
    margin: 0 0 2em;
}

@media (max-width: 1280px) {
    .nav_sum {
        padding: 2em 5% 0em;
    }
}

@media (max-width: 999px) {
    .navagit {
        overflow: auto;
    }
}


/* 隐藏移动端滚动条 */
@media (max-width: 799px) {
    #app {
        padding-top: 0px;
    }

    .navagit {
        overflow: auto;
        /* 隐藏滚动条 */
        -ms-overflow-style: none;
        /* IE 和 Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .navagit::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .nav_sum {
        width: 790px;
        overflow: auto;
        /* 隐藏滚动条 */
        -ms-overflow-style: none;
        /* IE 和 Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    html[lang="en"] .nav_sum {
        width: 990px;
    }
    html[lang="ar"] .nav_sum {
        width: 990px;
    }

    .nav_sum::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }
}