.wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.wrapper> :first-child {
    margin-top: 0 !important;
}

.wrapper> :last-child {
    margin-bottom: 0;
}

.wrapper-thin {
    width: 800px;
    margin: 0 auto;

    .posters {
        height: 500px;

        img {
            height: 100%;
            object-fit: cover;
        }
    }
}

.wrapper-thin> :last-child {
    margin-bottom: 0;
}

.accordion-swiper {
    .swiper-pagination {
        display: none;
    }
    .circle__box {
        width: 64px;
        height: 64px;
        position: relative;
        opacity: 0;
        display: none;
      }
      
      .circle__wrapper {
        width: 32px;
        height: 64px;
        position: absolute;
        top: 0;
        overflow: hidden;
        box-sizing: border-box;

      }
      
      .circle__wrapper--right {
        right: 0;
      }
      
      .circle__wrapper--left {
        left: 0;
      }
      
      .circle__whole {
        width: 64px;
        height: 64px;
        border: 4px solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
        transform: rotate(-135deg);
      }
      
      .circle__right {
        border-top: 4px solid var(--xjtlu-light-white);
        border-right: 4px solid var(--xjtlu-light-white);
        right: 1px;
        animation: circleRight var(--circle-speed) linear forwards;
      }
      
      .circle__left {
        border-bottom: 4px solid var(--xjtlu-light-white);
        border-left: 4px solid var(--xjtlu-light-white);
        left: 1px;
        animation: circleLeft var(--circle-speed) linear forwards;
      }

      .swiper-slide-active {
        svg {
            opacity: 1;
        }
        
        .circle {
            -webkit-animation: stroke var(--circle-speed, 1s) linear forwards;
            animation: stroke var(--circle-speed, 1s) linear forwards;
        }
          
        .sc-content {
            opacity: 1;
        }

        .counter {
            opacity: 1;
        }
        
          .circle__box {
            opacity: 1;
            display: block;
        }
	}
}

.section-title-center {
    text-align: center;
	padding:60px 0px 50px;
    .title {
        text-align: center;
        margin-top: 0;
    }

    .logo {
        margin: 0 auto;
        width: 64px;
        height: 64px;
    }

    p {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 24px;
    }

    a {
        font-weight: 600;
    }

    .btns {
        justify-content: center;
        display: flex;
        gap: 24px;
    }
}

.main-page h2{
	    font-weight: 600;
    color: var(--bs-primary);
    font-family: "Gilroy", "SF Pro SC", "PingFang SC", 微软雅黑, "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
	font-size:42px;
}
.a-links-block {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.card {
    border: none;
    width: 100%;
    overflow: hidden;
    border-radius: 12px!important;
    background: linear-gradient(265.75deg, #eef0f4 1.66%, #f9f9f9 98.42%);

    .tag {
        color: var(--bs-primary);
        font-size: 14px;
        font-weight: 600;
    }

    .tags {
        display: flex;
        gap: 8px 16px;
        flex-wrap: wrap;
    }

    .desc {
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        line-height: 16.8px;
        margin-bottom: 0;
    }

    .date {
        font-size: 12px;
        margin-top: 6px;
        color: #474758;
    }


    .card_img {
        max-height: 417px;

        img {
            width: 100%!important;
            height: 100%!important;
            object-fit: cover!important;
            border-radius: 0!important;
        }
    }

    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 36px 24px;

        .card-title {
            line-height: 38.4px;
            text-align: left;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 16px 0 12px 0;
            color: var(--bs-primary);
        }

        p {
            color: var(--xjtlu-dark-secondary);
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
       .card-date{
            color: var(--xjtlu-dark-secondary);
            font-weight: 400;
       }
    }

    .btn-primary {
        font-weight: 600;
    }

    .btn-secondary {
        font-weight: 600;
        color: var(--xjtlu-secondary);
        padding: 0;

        img {
            filter: invert(69%) sepia(30%) saturate(7067%) hue-rotate(276deg) brightness(84%) contrast(90%)
        }

        &:hover {
            background-color: rgb(0, 0, 0, 0);
        }
    }
}



.card.pdf-card.xjtlu-white-linear-gradients {
    .card-body {
        .card-title {
            color: var(--bs-primary);
        }

        .btn-primary {
            border: 1px solid var(--xjtlu-secondary);
            color: var(--xjtlu-dark-black);
            img{
                filter: none;
            }
        }
    }

}

.card.up-down {
    width: 100%;

    .card_img {
        flex: 1 1 100%;
        max-height: 458px;
        overflow: hidden;
    }

    .tag {
        color: var(--bs-primary);
    }
    .card-body {
        .btn-secondary {
            font-weight: 400;
            color: var(--xjtlu-dark-secondary);
        }
    }
}

.card.card-img-bg {
    max-height: 569px;
    height: 569px;

    .card-overlay {
        padding: 0 24px 24px 24px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    h3,
    p,
    a.link {
        color: var(--xjtlu-light-white);
    }

    a.link .revert {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(298deg) brightness(102%) contrast(102%);

    }

    &:hover {
        background: linear-gradient(180deg, rgba(2, 6, 69, 0) 50.52%, rgba(2, 6, 69, 0.5) 100%);

        box-shadow: 0px 8px 26px 0px var(--xjtlu-dark-black15);
    }
}

.card.medium {
    width: 100%;

    .card-body {
        padding: 36px 24px;

        h3 {
            font-size: 24px;
            line-height: 30px;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        p {
            -webkit-line-clamp: 2;
        }
    }
}

.up-down.small {
    .card-body {
        flex: 0;
        padding: 24px;

        h3 {
            font-size: 24px;
            line-height: 30px;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0 0 8px 0;
            letter-spacing: -0.01em;
        }

        p {
            font-size: 16px;
            line-height: 23.2px;
            margin-bottom: 12px;
        }

        a {
            margin: 0;
        }


        .tag {
            color: var(--bs-primary);
            margin-bottom: 16px;
        }
    }
}

.card.up-down-card {
    p {
        display: none;
    }

    .card_img {
        overflow: hidden;
        img {
            aspect-ratio: 450 / 275;
        }
    }
    .card-body {
        padding: 24px;
        
        .btn-secondary {
            margin: 4px 0;
            font-weight: 400;
            color: var(--xjtlu-dark-secondary);
        }
    }
}

.card.across-medium {
    width: 100%;
    transition: all 0.5s linear;

    .card_img {
        max-height: 236px;
        overflow: hidden;
    }

    .col-5,
    .col-7,
    .col-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-7 {
        height: 100%;
        align-self: center;
    }


    .card-body {
        padding: 24px;
        height: 100%;

        .card-title {
            -webkit-line-clamp: 2;
            line-height: 30px;
            margin: 8px 0;
        }

        p {
            -webkit-line-clamp: 2;
            line-height: 20.3px;
        }
        .btn-secondary {
            color: var(--xjtlu-dark-secondary);
            font-weight: 400;
        }
        
    }

    &:hover {
        box-shadow: 0px 8px 26px 0px var(--xjtlu-dark-black15);
        background: linear-gradient(100.73deg, #f2f2f9 1.3%, #ffffff 100%);
    }
}

.article-module-left-right-layout {

    .section-title {
        width: 100%;
        margin-bottom: 24px;
    }


}

.article-module-left-right-layout-list {
    width: 100%;
    display: flex;
    gap: 24px;

    .card {
        .card-title {
            -webkit-line-clamp: 2;
            margin-top: 0;
        }

        .tags {
            margin-bottom: 16px;
        }
        .card-body {
            .btn-secondary {
                color: var(--xjtlu-dark-secondary);
                font-weight: 400;
               }
        }
    }

    .left {
        flex: 0 0 calc((100% - 24px) / 2);

        min-height: 750px;


        .card {
            width: 100%;
            height: 100%;


            .card_img {
                max-height: 458px;
                overflow: hidden;
                aspect-ratio: 688 / 368; 


                img {
                    transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
                    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
                    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
                        -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
                }
            }

            .card-text {
                font-size: 16px;
                line-height: 23.2px;
            }

            &:hover {
                box-shadow: 0px 8px 26px 0px var(--xjtlu-dark-black15);

                background: linear-gradient(100.73deg, #f2f2f9 1.3%, #ffffff 100%);
                transition: all 0.5s linear;
            }
        }


    }

    .right {
        flex: 0 0 calc((100% - 24px) / 2);
        display: flex;
        flex-direction: column;
        gap: 20px;

        .card {
            width: 100%;

            &:nth-child(-n + 3) {
                min-height: calc((100% - 40px) / 3);
            }

            .row {
                height: 100%;
                width: 100%;
                margin-left: 0;
            }

            &:hover {
                box-shadow: 0px 8px 26px 0px var(--xjtlu-dark-black15);
                transition: all 0.5s linear;

                background: linear-gradient(100.73deg, #f2f2f9 1.3%, #ffffff 100%);
            }

            .card_img {
                overflow: hidden;
            }

            .card-body {

                .tags {
                    margin-bottom: 0;
                }

                .card-text {
                    .some-desc {
                        display: block;
                    }

                    .some-date {
                        display: none;
                    }
                }
                
            }
        }

        .card:last-child {
            margin-bottom: 0;
        }
    }
}
.subheading.both-sides {
    width: 100%;
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    justify-content: space-between;
    align-items: center;
	padding: 60px 0px 20px;
    .left,
    .right {
        flex: 1;
    }

    .right {
        display: flex;
        justify-content: flex-end;
        flex: 1;

    }

    p {
        color: var(--bs-primary);
    }

    a {
        padding: 8px 12px;
    }
}
.btn-primary {
    overflow: hidden;
    border: 1px solid var(--xjtlu-secondary);
    background: rgb(0, 0, 0, 0);
    border-radius: 28px;
    color: var(--xjtlu-dark-black);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 8px;

    &:hover {
        background-color: var(--xjtlu-light-white);
        color: #010544;
        border: 1px solid var(--bs-primary);
    }

    &:active {
        background: var(--xjtlu-light-tertiary);
        color: #010544;
        border: 1px solid var(--bs-primary);
    }

    &:focus {
        background-color: var(--xjtlu-light-white);
    }

    img,svg {
        width: 15px!important;
        height: 15px!important;
    }
}
.card.up-down-card {
    p {
        display: none;
    }

    .card_img {
        overflow: hidden;
        img {
            aspect-ratio: 450 / 275;
        }
    }
    .card-body {
        padding: 24px;
        
        .btn-secondary {
            margin: 4px 0;
            font-weight: 400;
            color: var(--xjtlu-dark-secondary);
        }
    }
}

.card.across-medium {
    width: 100%;
    transition: all 0.5s linear;

    .card_img {
        max-height: 236px;
        overflow: hidden;
    }

    .col-5,
    .col-7,
    .col-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .col-7 {
        height: 100%;
        align-self: center;
    }


    .card-body {
        padding: 24px;
        height: 100%;

        .card-title {
            -webkit-line-clamp: 2;
            line-height: 30px;
            margin: 8px 0;
        }

        p {
            -webkit-line-clamp: 2;
            line-height: 20.3px;
        }
        .btn-secondary {
            color: var(--xjtlu-dark-secondary);
            font-weight: 400;
        }
        
    }

    &:hover {
        box-shadow: 0px 8px 26px 0px var(--xjtlu-dark-black15);
        background: linear-gradient(100.73deg, #f2f2f9 1.3%, #ffffff 100%);
    }
}

.across-medium.small {
    .row {
        height: 100%;
    }

    .card_img {
        width: 40%;
        height: 100%;
        max-height: 180px;
        overflow: hidden;
    }

    .card-body {
        width: auto;
        padding: 0 24px 0 16px;
        height: 100%;

        h4 {
            font-size: 20px;
            line-height: 25px;
        }
        .btn-secondary {
            color: var(--xjtlu-dark-secondary);
            font-weight: 400;
        }
    }


}
.card {
    border: none;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(265.75deg, #eef0f4 1.66%, #f9f9f9 98.42%);

    .tag {
        color: var(--bs-primary);
        font-size: 14px;
        font-weight: 600;
    }

    .tags {
        display: flex;
        gap: 8px 16px;
        flex-wrap: wrap;
    }

    .desc {
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        line-height: 16.8px;
        margin-bottom: 0;
    }

    .date {
        font-size: 12px;
        margin-top: 6px;
        color: #474758;
    }


    .card_img {
        max-height: 417px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
        }
    }

    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 36px 24px;

        .card-title {
            line-height: 38.4px;
            text-align: left;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 16px 0 12px 0;
            color: var(--bs-primary);
			font-size:22px;
        }

        p {
            color: var(--xjtlu-dark-secondary);
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
       .card-date{
            color: var(--xjtlu-dark-secondary);
            font-weight: 400;
       }
    }

    .btn-primary {
        font-weight: 600;
    }

    .btn-secondary {
        font-weight: 600;
        color: var(--xjtlu-secondary);
        padding: 0;

        img {
            filter: invert(69%) sepia(30%) saturate(7067%) hue-rotate(276deg) brightness(84%) contrast(90%)
        }

        &:hover {
            background-color: rgb(0, 0, 0, 0);
        }
    }
}
.col-5{    flex: 0 0 auto;
    width: 41.66666667%;}
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

.card-group-3 {

    display: flex;
    gap: 32px 24px;
    flex-wrap: wrap;

    .card,
    .business-card {
        flex: 0 0 calc((100% - 48px) / 3);
        height: auto;
        .email {
            align-items: start;
            justify-content: start;
            div {
                a {
                    text-align: left;
                }
            }
        }
    }

    .business-card {
        width: calc((100% - 48px) / 3);
    }

    .up-down-card {
        .card-body {
            .card-title {
                font-size: 24px;
                line-height: 30px;
                -webkit-line-clamp: 2;
            }

            p {
                display: -webkit-box;
            }
        }
    }
    .cover-card {
        .card_img {
            aspect-ratio:450.67 / 222;
        }
    }
    .portal-card {
        .card_img {
            aspect-ratio:450.67 / 300;
        }
    }
}
.business-card {
    width: 100%;
    text-align: center;

    .business-card-img {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 16px;

        img {
            max-width: 320px;
            max-height: 320px;
            object-fit: cover;
            border-radius: 12px;
            width: 100%;
        }
    }

    a {
        text-decoration: none;
    }

    p {
        margin: 8px 0;
        font-size: 16px;
        line-height: 23.2px;
    }

    .email {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;

        img {
            width: 20px!important;
            height: 20px!important;
        }

        div {
            display: flex;
            gap: 8px;
            align-items: start;
            overflow: hidden;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .different-view {
            span {
                display: none;
            }

            span:first-child {
                display: block;
            }
        }
    }

    .card-content {
        max-width: 320px;
        margin: 0 auto;

        h4,
        h6,
        p {
            text-align: left;
        }

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

    &:hover {
        .business-card-img {
            img {
                box-shadow: 0px 12px 40px 0px var(--xjtlu-dark-black15);
            }
        }
    }

    h4,
    a {
        color: var(--bs-primary);
    }

    h6,
    p {
        color: var(--xjtlu-dark-secondary);
    }

    .email-link:hover {
        text-decoration: underline;
    }

    .different-view {

        .ipad-view,
        .phone-view {
            display: none;
        }
    }
}

.business-card.left {
    text-align: left;

    .business-card-img {
        img {
            width: 300px;
            height: 300px;
        }
    }

    .email {
        justify-content: flex-start;

        a {
            color: var(--bs-primary);
        }
    }
}

.business-card.round-head {

    .business-card-img {
        img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }
    }
}