@import url('index-slider.css');
.section {
    min-height: 100vh;
    background-color: white;
}
.section .picture {
    margin-top: 57px;
}
.section ~ .section {
    margin-top: 0;
}
.section-auto {
    height: auto;
}
.section .title {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 46px;
}
.section .left .content {
    margin-left: 70px;
}

.section-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.logo_wrapper {
    position: absolute;
    background-color: white;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.8s ease-in-out;
}
.logo_wrapper .index_logo {
    position: relative;
    width: 1523px;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    margin-bottom: 60px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo_wrapper img {
    max-width: 100%;
    height: 100%;
}
.index_title {
    font-size: 30px;
    color: #808080;
    font-weight: 300;
    letter-spacing: 30px;
    opacity: 0;
    text-align: center;
}
.logo_wrapper.hide {
    transform: translateY(-100%);
    opacity: 0;
}
.arrow-center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    display: flex;
    justify-content: center;
}
.arrow-center img {
    transform: rotateZ(90deg) scale(0.6);
    animation: moveDownInfinit 2s ease-in-out infinite;
}
@keyframes moveDownInfinit {
    from {
        transform: rotateZ(90deg) scale(0.6) translateX(-100px);
    }
    to {
        transform: rotateZ(90deg) scale(0.6) translateX(0);
    }
}
.index_title.active {
    animation: move 1s ease-in-out forwards;
    opacity: 1;
}
.index_title.active span {
    --delay: 0s;
    opacity: 0;
    animation: move 0.4s cubic-bezier(0.56, 0.09, 0.48, 1.77) forwards var(--delay);
    display: inline-block;
}
@keyframes move {
    from {
        opacity: 0;
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-2 {
    background: #d9d9d9;
    position: relative;
    transform: none !important;
}
.section-2 .swiper {
    height: 100%;
    --swiper-navigation-sides-offset: 70px;
}
.section-2 .swiper-button-disabled {
    opacity: 0;
}

.section-2 .content span {
    padding-right: 133px;
}

.section-2 .title {
    padding-top: 1em;
}

.section-2 .btn {
    width: 50px;
    height: 100px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    position: absolute;
    z-index: 100;
}
.xn-layout-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1920px;
    height: 100vh;
}
.xn-page {
    height: 100vh;
    overflow-y: scroll;
}
.layout {
    width: 100%;
    height: 100%;
    background-color: #d9d9d9;
    user-select: none;
}

.layout .inner {
    margin-top: 441px;
    margin-left: 519px;
    position: relative;
    z-index: 100;
}
.layout .left {
    width: 190px;
}
.layout .more {
    height: 47px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
}
.layout .more img {
    width: 10px;
}
.layout .desc {
    padding-top: 5px;
    font-size: 22px;
    line-height: 1.4;
}

.layout .more span {
    font-size: 33px;
    color: #4d4d4d;
    font-weight: 100;
}
.layout-1 .top {
    height: 52%;
    display: flex;
}
.layout-1 .top .item {
    height: 100%;
}
.layout-1 .top .item-1 {
    width: 41%;
}
.layout-1 .top .slot {
    width: 59%;
}
.layout-1 .more-inner {
    padding-top: 342px;
    padding-left: 424px;
    width: 260px;
}

.layout-1 .bottom {
    height: 48%;
    display: flex;
}
.layout-1 .bottom .flex-1 {
    display: flex;
    align-items: flex-end;
    width: 350px;
    height: 100%;
}
.layout-1 .bottom .flex-2 {
    padding-top: 147px;
    width: 1000px;
    padding-left: 74px;
}
.layout-1 .bottom .flex-3 {
    width: 497px;
    display: flex;
    align-items: flex-end;
}
.layout-1 .bottom .flex-1 .slot {
    width: 350px;
    height: 350px;
}
.layout-1 .flex-3 .slot {
    width: 100%;
    height: 100%;
}

.layout-1 .center .en {
    font-size: 100px;
}
.layout-1 .center .cn {
    font-size: 48px;
    padding-top: 6px;
}
.layout-1 .center .sub {
    font-size: 17px;
    padding-top: 23px;
    color: #1a1a1a;
    display: inline-block;
}

.layout-2 .center {
    margin-left: 0;
    margin-top: 74px;
}
.layout-2 .center .en {
    font-size: 100px;
    font-weight: 100;
    opacity: 0.3;
    letter-spacing: 3px;
    padding-bottom: 0px;
}
.layout-2 .center .cn {
    font-size: 48px;
    padding-top: 0em;
}
.layout-2 .center .sub {
    font-size: 20px;
    padding-top: 23px;
    color: #1a1a1a;
    display: inline-block;
}

.layout-2 {
    display: flex;
}
.layout-2 .flex-1 {
    width: 355px;
    display: flex;
    align-items: flex-end;
}
.layout-2 .flex-1 .slot {
    width: 355px;
    height: 355px;
}
.layout-2 .flex-2 {
    width: 885px;
}
.layout-2 .flex-sub-1 {
    height: 250px;
    display: flex;
    justify-content: flex-end;
}
.layout-2 .flex-sub-1 .slot {
    width: 258px;
    height: 250px;
    margin-right: 6px;
}
.layout-2 .flex-sub-2 {
    padding-left: 149px;
    padding-top: 0px;
    margin-top: -45px;
}
.layout-2 .flex-sub-2 .left {
    width: 260px;
}
.layout-2 .flex-sub-2 .arrow {
    width: 67px;
    height: 52px;
    margin-top: 40px;
}
.layout-2 .flex-3 .slot {
    width: 700px;
    height: 100%;
}

.section-2 .btn-prev {
    left: 70px;
    top: 50%;
}
.section-2 .btn-prev:before,
.section-2 .btn-prev:after {
    content: '';
    width: 50px;
    height: 1px;
    background: white;
    display: inline-block;
    position: absolute;
}
.section-2 .btn-prev:before {
    left: 0;
    top: 31px;
    transform: rotateZ(-45deg);
}
.section-2 .btn-prev:after {
    left: 0;
    bottom: 31px;
    transform: rotateZ(45deg);
}

.section-2 .btn-next {
    position: absolute;
    right: 70px;
    top: 50%;
}
.section-2 .btn-next:before,
.section-2 .btn-next:after {
    content: '';
    width: 50px;
    height: 1px;
    background: white;
    display: inline-block;
    position: absolute;
}
.section-2 .btn-next:before {
    left: 0;
    top: 31px;
    transform: rotateZ(45deg);
}
.section-2 .btn-next:after {
    left: 0;
    bottom: 31px;
    transform: rotateZ(-45deg);
}

.xn-project-group {
    display: flex;
    padding-left: 72px;
    padding-top: 175px;
    padding-right: 72px;
    align-items: flex-end;
    column-gap: 72px;
}
.xn-project-group.horizontal-center {
    align-items: center;
}
.xn-project-card .picture {
    overflow: hidden;
}
.xn-project-card .picture:hover img {
    transform: scale(1.1);
}
.xn-project-card {
    width: 875px;
}
.xn-project-group-full .xn-project-card {
    width: 100%;
}
.xn-project-card .top {
    padding: 13px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xn-project-card .top .name {
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    color: #000000;
}
.xn-project-card .top .address {
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    color: #666666;
}
.xn-project-card img {
    width: 100%;
    transition: all 0.5s linear;
}
.xn-card-more {
    flex: 1;
    padding-bottom: 10px;
    text-align: right;
}
.xn-card-more a {
    color: #808080;
    text-decoration: none;
    border-bottom: 1px solid #808080;
    font-weight: 100;
    padding-right: 100px;
    font-size: 40px;
}