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

.common_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

.item_hover {
    overflow: hidden
}

.item_hover:hover img {
    transform: scale(1.05)
}

.item_hover img {
    width: 100%;
    height: 100%;
    transition: .6s ease
}

.common_lt {
    position: relative;
    font-weight: 700
}

.common_lt .num {
    color: #000;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    top: -3.64583vw;
    left: -5vw
}

.common_lt .cn {
    background: linear-gradient(108deg, #000 64.27%, #8C1B21 92.7%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content
}

.common_lt .en {
    color: rgba(202, 173, 140, 0.5);
    margin-top: .67708vw;
    text-transform: uppercase
}

.common_lt .line {
    position: absolute;
    left: -2.70833vw;
    top: -2.70833vw
}

.common_lt .line img {
    width: 1.5625vw
}

@keyframes roteA {
    100% {
        transform: rotate(360deg)
    }
}

.index1 {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10.41667vw;
    z-index: 5
}

.index1 .common_bg {
    object-fit: cover
}

.index1 .p1 {
    color: #FFF;
    font-style: normal;
    font-weight: 700;
    margin: 0 0 1.30208vw
}

.index1 .p2 {
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.index1 .rote {
    margin: 5.20833vw 0 0 0;
    width: 8.48958vw;
    height: 8.48958vw;
    position: relative;
    transform: scale(0);
    transition: 1s;
    cursor: pointer
}

.index1 .rote.animated {
    transform: scale(1);
    transition-delay: .4s
}

.index1 .rote.animated .circle {
    transform: translate(-50%, -50%) scale(1);
    transition-delay: .5s
}

.index1 .rote .roteImg {
    width: 100%;
    animation: roteA 15s linear infinite
}

.index1 .rote .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 4.16667vw;
    height: 4.16667vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s
}

.index1 .rote .circle svg {
    width: 100%
}

.index2 {
    position: relative
}

.index2 .circle1 {
    position: absolute;
    top: 4.47917vw;
    right: 0;
    z-index: 1;
    max-width: unset;
    max-height: unset;
    width: 100vw;
    pointer-events: none
}

.index2 .circle2 {
    width: 97.5vw;
    position: absolute;
    top: 4.47917vw;
    right: 0;
    z-index: 1;
    max-width: unset;
    max-height: unset;
    pointer-events: none
}

.index2 .position {
    position: absolute;
    right: 21.35417vw;
    top: 4.89583vw
}

.index2 .position .list {
    color: #CAAD8C;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    opacity: .2
}

.index2 .position .list:last-child {
    transform: translateX(17.13542vw)
}

.index2 .top {
    padding: 8.69792vw 15.88542vw 5.9375vw 15.88542vw;
    position: relative;
    z-index: 5
}

.index2 .top .text {
    margin: 7.34375vw 0 0 0;
    color: #000;
    font-style: normal;
    font-weight: 300;
    line-height: 300%
}

.index2 .top .text span {
    font-weight: bold;
    color: #8C1B21
}

.index2 .bottom {
    height: calc(100vh + 700px);
    position: relative;
    z-index: 6;
    margin-top: -40vh;
    pointer-events: none
}

.index2 .bottom .fix {
    height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.index2 .bottom .common_bg {
    transform: scale(0.2)
}

.index2 .bottom .text {
    width: 64.47917vw;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    padding: 1.19792vw 2.39583vw;
    color: #000;
    font-style: normal;
    font-weight: 300;
    line-height: 300%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: 1s
}

.index2 .bottom .text.on {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
}

.index2 .bottom .text span {
    font-weight: bold;
    color: #8C1B21
}

.index3 {
    background: #fff;
    position: relative;
    z-index: 10
}

.index3 .fix {
    width: 100%;
    height: 100vh;
    position: sticky;
    overflow: hidden;
    top: 0;
    padding: 3.125vw 0 0 10.41667vw;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.index3 .top {
    padding: 0 5vw
}

.index3 .top .common_lt .en {
    margin-top: 0
}

.index3 .content {
    position: relative
}

.index3 .content .serviceSwiper {
    height: 33.33333vw;
    transform: translateX(300px);
    opacity: 0;
    transition: 1s;
    display: none
}

.index3 .content .serviceSwiper.animated {
    opacity: 1;
    transform: translateX(0)
}

.index3 .content .serviceSwiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: flex-end;
    padding: 1.5625vw;
    left: -5.41667vw
}

.index3 .content .serviceSwiper .swiper-slide .item {
    width: 23.4375vw;
    background: #F7F7F7;
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5625vw;
    height: 26.04167vw;
    transition: 1s
}

.index3 .content .serviceSwiper .swiper-slide .item .num {
    color: #8C1B21;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 1.35417vw
}

.index3 .content .serviceSwiper .swiper-slide .item .p1 {
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    margin: 0 0 1.04167vw
}

.index3 .content .serviceSwiper .swiper-slide .item .p2 {
    color: #CAAD8C;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    transition: .6s ease;
    height: 5.3125vw;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.index3 .content .serviceSwiper .swiper-slide .item .img {
    width: 100%;
    height: 10.625vw;
    margin: 1.04167vw 0 0 0
}

.index3 .content .serviceSwiper .swiper-slide.swiper-slide-active .item {
    height: 30.20833vw;
    background: #FFF;
    box-shadow: 0 2px 20px 6px rgba(0, 0, 0, 0.15)
}

.index3 .content .list {
    display: flex;
    gap: 3.38542vw;
    width: max-content;
    margin-top: 1.04167vw;
    align-items: flex-end;
    padding: 0 0 0 30vw;
    height: 27.60417vw
}

.index3 .content .list .item {
    width: 23.4375vw;
    background: #F7F7F7;
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5625vw;
    height: 26.04167vw;
    transition: 1s
}

.index3 .content .list .item .num {
    color: #8C1B21;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 1.35417vw
}

.index3 .content .list .item .p1 {
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    margin: 0 0 1.04167vw
}

.index3 .content .list .item .p2 {
    color: #CAAD8C;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    transition: .6s ease;
    height: 5.3125vw;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.index3 .content .list .item .img {
    width: 100%;
    height: 10.625vw;
    margin: 1.04167vw 0 0 0
}

.index3 .content .list .item.on {
    height: 27.60417vw;
    background: #FFF;
    box-shadow: 0 2px 20px 6px rgba(0, 0, 0, 0.15)
}

.index3 .content .more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .78125vw;
    position: relative;
    z-index: 5;
    margin-top: 1.66667vw;
    margin-left: -10.41667vw
}

.index3 .content .more svg {
    width: 4.58333vw;
    height: 3.64583vw
}

.index3 .content .more p {
    color: #000;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase
}

@keyframes moveA {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(0, -20px)
    }
}

.index4 {
    padding: 5.26042vw 19.6875vw 10.88542vw 19.47917vw
}

.index4 .flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.index4 .flex:hover .icon {
    animation-play-state: unset
}

.index4 .flex:not(:last-child) {
    margin: 0 0 1.04167vw
}

.index4 .flex .icon {
    width: 7.08333vw;
    height: 6.35417vw;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: moveA .6s infinite ease alternate;
    animation-play-state: paused
}

.index4 .flex .icon img {
    object-fit: contain
}

.index4 .flex .item {
    background: #fff;
    box-shadow: 0px 2px 20px 6px rgba(0, 0, 0, 0.15);
    transition: .6s ease;
    cursor: pointer
}

.index4 .flex .item.on {
    background: #8C1B21;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25)
}

.index4 .flex .item.on .show .l .num {
    color: rgba(255, 255, 255, 0.6)
}

.index4 .flex .item.on .show .l p {
    color: #fff
}

.index4 .flex .item.on .show .r {
    border-bottom: 1px solid #fff;
    padding: 0 .78125vw 1.25vw .78125vw
}

.index4 .flex .item.on .show .r .text {
    color: rgba(255, 255, 255, 0.8)
}

.index4 .flex .item.on .show .r svg {
    transform: rotateX(180deg)
}

.index4 .flex .item.on .show .r svg path {
    stroke: rgba(255, 255, 255, 0.8)
}

.index4 .flex .item .hide {
    width: 33.07292vw;
    color: rgba(255, 255, 255, 0.8);
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    margin: 0 0 1.77083vw auto;
    display: none
}

.index4 .flex .item .show {
    width: 45.15625vw;
    height: 6.25vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 3.48958vw;
    transition: .6s ease
}

.index4 .flex .item .show .l {
    position: relative
}

.index4 .flex .item .show .l p {
    color: #131525;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.55px;
    position: absolute;
    left: 2.86458vw;
    bottom: 0;
    white-space: nowrap;
    transition: .6s ease
}

.index4 .flex .item .show .l .num {
    color: #CAAD8C;
    font-size: 4.58333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    transition: .6s ease
}

.index4 .flex .item .show .r {
    width: 33.07292vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .78125vw;
    border-bottom: 1px solid transparent;
    transition: .6s ease
}

.index4 .flex .item .show .r .text {
    color: #CAAD8C;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    transition: .6s ease
}

.index4 .flex .item .show .r svg {
    width: 1.19792vw;
    height: 1.40625vw;
    transition: .4s ease
}

.index4 .flex .item .show .r svg path {
    transition: .6s ease
}

.index5 {
    padding: 0 10.41667vw 8.69792vw 10.41667vw
}

.index5 .top {
    padding: 0 4.94792vw
}

.index5 .content {
    margin: 4.27083vw 0 0 0;
    display: flex;
    justify-content: space-between
}

.index5 .content .left {
    width: 28.33333vw;
    height: 30.88542vw
}

.index5 .content .left .hxysSwiper {
    width: 100%;
    height: 100%
}

.index5 .content .left .hxysSwiper .swiper-slide img {
    width: 100%;
    height: 100%
}

.index5 .content .right {
    width: 42.44792vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 1.5625vw 0 0 0
}

.index5 .content .right .item {
    background: #FAFAFA;
    margin: 0 0 0 auto;
    width: 39.53125vw;
    height: 7.34375vw;
    padding: 1.04167vw 3.125vw;
    position: relative;
    transition: 0.6s
}

.index5 .content .right .item .item_bg {
    position: absolute;
    height: 9.27083vw;
    left: -1.66667vw;
    top: 0;
    z-index: 3;
    transition: 0.6s;
    clip-path: inset(0 0 100% 0)
}

.index5 .content .right .item .item_bg img {
    display: block;
    height: 100%
}

.index5 .content .right .item .item_bg1 {
    position: absolute;
    width: 1.35417vw;
    left: -1.35417vw;
    bottom: 0;
    transition: 0.6s;
    clip-path: inset(0 0 100% 0)
}

.index5 .content .right .item .item_bg1 img {
    display: block;
    width: 100%
}

.index5 .content .right .item .item_bg2 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    transition: 0.6s
}

.index5 .content .right .item .item_bg2 img {
    display: block;
    height: 100%
}

.index5 .content .right .item .h5 {
    color: #000;
    font-weight: 500;
    line-height: 2;
    opacity: 0.6;
    transition: 0.6s
}

.index5 .content .right .item .p {
    overflow: hidden;
    color: #000;
    text-overflow: ellipsis;
    font-weight: 400;
    line-height: 2;
    opacity: 0.6;
    transition: 0.6s
}

.index5 .content .right .item.on {
    width: 41.66667vw;
    height: 9.27083vw;
    background: #F5F5F5;
    padding: 1.5625vw 1.40625vw
}

.index5 .content .right .item.on .h5 {
    font-size: 1.66667vw;
    color: #000;
    font-weight: 500;
    line-height: 1.5;
    opacity: 1;
    margin-bottom: .72917vw
}

.index5 .content .right .item.on .p {
    opacity: 1
}

.index5 .content .right .item.on .item_bg {
    clip-path: inset(0 0 0% 0)
}

.index5 .content .right .item.on .item_bg1 {
    clip-path: inset(0 0 0% 0)
}

.index5 .content .right .item.on .item_bg2 {
    opacity: 1
}

.index5 .content .right .item:not(:last-child) {
    margin-bottom: 2.08333vw
}

.index6 {
    padding: 0 15.46875vw 9.94792vw 15.46875vw
}

.index6 .content {
    margin: 12.5vw 0 0 2.60417vw;
    width: 55.78125vw;
    position: relative
}

.index6 .content .item {
    position: absolute;
    opacity: 0;
    transition: .6s ease
}

.index6 .content .item.on {
    opacity: 1
}

.index6 .content .item .icon {
    width: 3.28125vw;
    height: 3.28125vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.index6 .content .item .text {
    color: #131525;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.55px;
    margin: 2.60417vw auto 0;
    width: fit-content;
    position: relative
}

.index6 .content .item .text span {
    color: #8C1B21;
    text-align: center
}

.index6 .content .item .text .num {
    color: rgba(0, 0, 0, 0.08);
    font-size: 4.58333vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    right: 100%;
    top: -3.85417vw;
    transform: translateX(2.86458vw)
}

.index6 .content .item .circle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2.08333vw;
    width: 1.09375vw
}

.index6 .content .item .circle.small {
    width: 2.34375vw;
    bottom: -2.70833vw
}

.index6 .content .item .pick {
    width: 10.9375vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6.77083vw;
    color: #8C1B21;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.index6 .content .item1 {
    top: -9.01042vw;
    left: -1.25vw
}

.index6 .content .item2 {
    top: -9.01042vw;
    left: 12.23958vw
}

.index6 .content .item3 {
    top: -9.01042vw;
    left: 33.64583vw
}

.index6 .content .item3 .pick {
    bottom: -5.52083vw
}

.index6 .content .item4 {
    top: 0;
    right: -13.02083vw
}

.index6 .content .item4 .text {
    margin: 1.51042vw auto 0
}

.index6 .content .item4 .circle {
    transform: none;
    left: -4.27083vw;
    bottom: -.26042vw
}

.index6 .content .item4 .pick {
    bottom: -3.64583vw
}

.index6 .content .item5 {
    top: 7.8125vw;
    right: 1.25vw
}

.index6 .content .item5 .text {
    margin: .78125vw auto 0
}

.index6 .content .item5 .text .num {
    top: -2.23958vw
}

.index6 .content .item5 .pick {
    bottom: -5.20833vw
}

.index6 .content .item6 {
    top: 7.8125vw;
    right: 20.98958vw
}

.index6 .content .item6 .text {
    margin: 2.5vw auto 0
}

.index6 .content .item6 .text .num {
    top: -3.38542vw
}

.index6 .content .item7 {
    top: 7.8125vw;
    right: 39.16667vw
}

.index6 .content .item7 .text {
    margin: 2.5vw auto 0
}

.index6 .content .item7 .text .num {
    top: -3.38542vw
}

.index6 .content .item8 {
    top: 20.88542vw;
    right: calc(100% - 7.552083333333334vw)
}

.index6 .content .item8 .text {
    margin: 1.04167vw auto 0;
    white-space: nowrap
}

.index6 .content .item8 .text .num {
    top: -3.38542vw
}

.index6 .content .item8 .circle {
    bottom: 2.08333vw;
    right: -2.1875vw;
    left: auto;
    transform: translateX(0)
}

.index6 .content .item9 {
    top: 23.48958vw;
    left: 16.875vw
}

.index6 .content .item9 .text {
    margin: 1.04167vw auto 0;
    white-space: nowrap
}

.index6 .content .item9 .text .num {
    top: -3.38542vw
}

.index6 .content .item9 .circle {
    bottom: -2.91667vw;
    left: 3.125vw
}

.index6 .content .position {
    position: absolute;
    left: 29.21875vw;
    bottom: -1.45833vw;
    display: flex;
    gap: 3.4375vw;
    align-items: center;
    transition: .6s ease
}

.index6 .content .position.on .btns {
    opacity: 1
}

.index6 .content .position.on .p1 {
    opacity: 1;
    transition-delay: .3s
}

.index6 .content .position .btns {
    display: flex;
    position: relative;
    opacity: 0;
    transition: .6s ease
}

.index6 .content .position .btns img {
    width: 4.16667vw;
    transition: all 600ms
}

.index6 .content .position .btns img:hover {
    transform: scale(1.05)
}

.index6 .content .position .btns .prev {
    transform: translateX(1.5625vw);
    z-index: 10;
    cursor: pointer
}

.index6 .content .position .btns .next {
    transform: translateY(-2.08333vw);
    cursor: pointer;
    position: relative;
    z-index: 15
}

.index6 .content .position .p1 {
    color: #131525;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.55px;
    position: relative;
    top: -.52083vw;
    opacity: 0;
    transition: .6s ease
}

.index6 .content svg {
    width: 100%;
    height: max-content
}

.index6 .content svg path {
    stroke-dasharray: 2982.9892578125;
    stroke-dashoffset: 2982.9892578125;
    transition: 1s ease
}

.index7 {
    position: relative;
    z-index: 1
}

.index7 .tp1 {
    position: absolute;
    top: 2.44792vw;
    left: 0;
    width: 12.96875vw
}

.index7 .tp2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 18.02083vw
}

.index7 .img {
    width: 100%
}

.index7 .position {
    position: absolute;
    width: 50vw;
    left: 50%;
    top: 12.1875vw;
    transform: translateX(-50%);
    z-index: 2
}

.index7 .position .left {
    top: -1.04167vw;
    left: -3.59375vw;
    position: absolute;
    width: 1.97917vw
}

.index7 .position .right {
    position: absolute;
    bottom: 2.08333vw;
    right: -2.60417vw;
    width: 1.97917vw
}

.index7 .position .p1 {
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    line-height: 200%
}

.index7 .position .p2 {
    color: #FFF;
    font-style: normal;
    font-weight: 400;
    text-align: right;
    margin: 1.5625vw 0 0 0
}

.index8 {
    padding: 7.5vw 10.41667vw 1.14583vw 10.41667vw;
    background: linear-gradient(180deg, #fff 0%, #F0F0F0 100%);
    position: relative;
    z-index: 5
}

.index8 .top {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 5vw
}

.index8 .top .pick p {
    background: linear-gradient(90deg, #000 -30.81%, #8C1B21 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    margin-left: auto;
    text-align: right;
    font-style: normal;
    font-weight: 700;
    line-height: 170%
}

.index8 .content {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.index8 .content .left {
    width: 34.42708vw
}

.index8 .content .left .lefSwiper {
    height: 31.25vw
}

.index8 .content .left .lefSwiper .swiper-slide.swiper-slide-active .item {
    opacity: 1
}

.index8 .content .left .lefSwiper .swiper-slide.swiper-slide-active .item .text {
    opacity: 1
}

.index8 .content .left .lefSwiper .swiper-slide.swiper-slide-prev .item {
    transform: translateY(4.6875vw)
}

.index8 .content .left .item {
    opacity: .3;
    transition: .6s ease
}

.index8 .content .left .item:not(:last-child) {
    margin: 0 0 3.125vw
}

.index8 .content .left .item.on {
    opacity: 1
}

.index8 .content .left .item.on .item_list {
    display: none
}

.index8 .content .left .item.on .item_list.on {
    display: block
}

.index8 .content .left .item .headline {
    display: flex;
    align-items: flex-end;
    gap: 1.09375vw
}

.index8 .content .left .item .headline .p1 {
    color: #8C1B21;
    font-style: normal;
    font-weight: 500;
    line-height: 100%
}

.index8 .content .left .item .headline .p2 {
    color: #777;
    font-style: normal;
    font-weight: 400;
    line-height: 100%
}

.index8 .content .left .item .text {
    margin: 1.04167vw 0 0 0;
    overflow: hidden;
    color: #000;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    opacity: 0;
    transition: .6s ease
}

.index8 .content .left .item .pic {
    display: none
}

.index8 .content .left .more {
    display: flex;
    align-items: center;
    gap: .78125vw;
    position: relative;
    top: -4.16667vw;
    z-index: 5
}

.index8 .content .left .more svg {
    width: 4.58333vw;
    height: 3.64583vw
}

.index8 .content .left .more p {
    color: #000;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase
}

.index8 .content .r {
    display: flex;
    gap: .57292vw;
    height: 42.55208vw;
    overflow: hidden
}

.index8 .content .r .matter {
    height: max-content;
    -webkit-animation: img_go 30s infinite linear;
    animation: img_go 30s infinite linear;
}

.index8 .content .r .matter:nth-child(2) {
    animation-direction: reverse
}

@keyframes img_go {
    0%{
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%)
    }
}

.index8 .content .r .matter:hover {
    animation-play-state: paused
}

.index8 .content .r .flex:not(:last-child) {
    margin-bottom: .57292vw
}

.index8 .content .r .flex .img {
    width: 11.04167vw;
    height: 12.91667vw;
    display: block;
    opacity: .4;
    transition: .6s ease;
    cursor: pointer
}

.index8 .content .r .flex .img:not(:last-child) {
    margin: 0 0 .57292vw
}

.index8 .content .r .flex .img.on {
    opacity: 1
}

.index8 .content .r .flex .img img {
    width: 100%;
    height: 100%
}

.index9 {
    padding: 10.36458vw 11.45833vw 3.33333vw 11.45833vw;
    position: relative
}

.index9 .tp {
    position: absolute;
    right: 0;
    top: -3.90625vw;
    z-index: 2;
    pointer-events: none;
    max-width: unset;
    max-height: unset;
    width: 77.08333vw
}

.index9 .top {
    padding: 0 0 0 4.01042vw;
    display: flex;
    justify-content: space-between
}

.index9 .top .btns {
    display: flex;
    position: relative;
    top: 3.64583vw
}

.index9 .top .btns img {
    width: 4.16667vw;
    transition: all 600ms
}

.index9 .top .btns img:hover {
    transform: scale(1.05)
}

.index9 .top .btns .prev {
    transform: translateX(1.5625vw);
    z-index: 10;
    cursor: pointer
}

.index9 .top .btns .next {
    transform: translateY(-2.08333vw);
    cursor: pointer;
    position: relative;
    z-index: 15
}

.index9 .content {
    margin: 3.48958vw 0 0 0
}

.index9 .content .end {
    margin: 3.95833vw 0 0 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 18.75vw 0 0
}

.index9 .content .end .swiper-pagination {
    position: static;
    display: flex
}

.index9 .content .end .swiper-pagination span {
    width: .625vw;
    height: .625vw;
    border-radius: 50%;
    background: #E4D6C5;
    transition: .6s ease;
    margin: 0 .57292vw 0 0 !important;
    opacity: 1 !important
}

.index9 .content .end .swiper-pagination span.swiper-pagination-bullet-active {
    background: #8C1B21
}

.index9 .content .end .swiper-pagination span:last-child {
    margin: 0 !important
}

.index9 .content .newsSwiper .swiper-slide .item {
    width: 100%;
    position: relative;
    z-index: 1
}

.index9 .content .newsSwiper .swiper-slide .item:hover .img:before {
    opacity: 0
}

.index9 .content .newsSwiper .swiper-slide .item:hover .img img {
    transform: scale(1.05)
}

.index9 .content .newsSwiper .swiper-slide .item .img {
    height: 15.26042vw;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.index9 .content .newsSwiper .swiper-slide .item .img:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 600ms;
    z-index: 10
}

.index9 .content .newsSwiper .swiper-slide .item .img img {
    width: 100%;
    height: 100%;
    transition: .6s ease
}

.index9 .content .newsSwiper .swiper-slide .item .text {
    padding: 1.04167vw 0 0 0
}

.index9 .content .newsSwiper .swiper-slide .item .text .dis {
    display: flex;
    gap: 1.82292vw;
    margin: 0 0 .52083vw
}

.index9 .content .newsSwiper .swiper-slide .item .text .dis .time {
    color: #8C1B21;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 1.041px
}

.index9 .content .newsSwiper .swiper-slide .item .text .dis p {
    color: #CAAD8C;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 1.041px
}

.index9 .content .newsSwiper .swiper-slide .item .text .p1 {
    color: #1A1A1A;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1.041px
}

@media screen and (max-width: 768px) {
    .common_lt .num {
        position: static;
        margin: 0 0 10px
    }

    .common_lt .en {
        margin-top: 5px
    }

    .common_lt .cn {
        margin-top: 25px
    }

    .common_lt .line {
        left: 0;
        top: 18px
    }

    .common_lt .line img {
        width: 20px
    }

    .home {
        overflow: hidden
    }

    .index1 {
        padding: 0 5%
    }

    .index1 .p1 {
        font-size: 28px;
        margin: 0 0 25px
    }

    .index1 .rote {
        margin: 30px 0 0 0;
        width: 100px;
        height: 100px
    }

    .index1 .rote .circle {
        width: 50px;
        height: 50px;
        border-width: 2px
    }

    .index1 .rote .circle svg {
        width: 40px;
        height: 40px
    }

    .index2 .top {
        padding: 50px 5%
    }

    .index2 .top .position {
        position: static;
        margin: 15px 0 0
    }

    .index2 .top .position .list {
        transform: none
    }

    .index2 .top .text {
        line-height: 200%;
        margin: 30px 0 0 0
    }

    .index2 .bottom {
        height: auto;
        padding: 0;
        margin-top: 0 !important
    }

    .index2 .bottom .common_bg {
        transform: scale(1) !important
    }

    .index2 .bottom .text {
        line-height: 200%;
        width: 90%;
        padding: 25px 5%;
        opacity: 1;
        transform: translateY(0)
    }

    .index3 {
        height: auto !important
    }

    .index3 .fix {
        height: auto !important;
        padding: 50px 5% 0 5%
    }

    .index3 .top {
        padding: 0
    }

    .index3 .content {
        height: auto;
        margin: 30px 0 0 0
    }

    .index3 .content .list {
        display: none
    }

    .index3 .content .serviceSwiper {
        height: auto;
        overflow: unset;
        padding: 0;
        display: block
    }

    .index3 .content .serviceSwiper .swiper-slide {
        left: 0;
        padding: 0
    }

    .index3 .content .serviceSwiper .swiper-slide .item {
        width: 100%;
        height: auto !important;
        padding: 20px 5%
    }

    .index3 .content .serviceSwiper .swiper-slide .item .num {
        margin: 0 0 15px
    }

    .index3 .content .serviceSwiper .swiper-slide .item .p1 {
        margin: 0 0 15px
    }

    .index3 .content .serviceSwiper .swiper-slide .item .p2 {
        height: auto;
        line-height: 1.2;
        font-size: 16px
    }

    .index3 .content .serviceSwiper .swiper-slide .item .img {
        width: 100%;
        height: auto;
        margin: 25px 0 0 0
    }

    .index3 .content .more {
        margin: 30px 0 0 0;
        gap: 10px
    }

    .index3 .content .more svg {
        width: 30px;
        height: auto
    }

    .index4 {
        padding: 50px 5%
    }

    .index4 .flex {
        flex-direction: column;
        align-items: unset;
        gap: 20px
    }

    .index4 .flex:not(:last-child) {
        margin: 0 0 30px
    }

    .index4 .flex .icon {
        width: 50px;
        height: 50px;
        animation: none !important
    }

    .index4 .flex .item .show {
        width: 100%;
        padding: 30px 5%;
        height: auto;
        flex-direction: column;
        align-items: unset
    }

    .index4 .flex .item .show .l .num {
        font-size: 20px
    }

    .index4 .flex .item .show .l p {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0
    }

    .index4 .flex .item .show .r {
        width: 100%;
        margin: 10px 0 0 0;
        padding: 0 0 10px !important
    }

    .index4 .flex .item .show .r .text {
        width: 70%
    }

    .index4 .flex .item .show .r svg {
        width: 9px;
        height: max-content
    }

    .index4 .flex .item .hide {
        padding: 0 5%;
        margin: 0 0 15px 0;
        width: 100%
    }

    .index5 {
        padding: 50px 5% 20px 5%
    }

    .index5 .top {
        padding: 0
    }

    .index5 .content {
        margin: 30px 0 0 0;
        flex-direction: column
    }

    .index5 .content .left {
        width: 100%;
        height: auto
    }

    .index5 .content .right {
        width: 100%;
        margin: 30px 0 0 0
    }

    .index5 .content .right .item {
        background: #FAFAFA;
        width: 100% !important;
        height: auto !important;
        padding: 15px 20px !important;
        position: relative;
        transition: 0.6s;
        border-top: 3px solid #8C1B21
    }

    .index5 .content .right .item:not(:last-child) {
        margin: 0 0 20px
    }

    .index5 .content .right .item .item_bg {
        display: none
    }

    .index5 .content .right .item .item_bg2 {
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        opacity: 1
    }

    .index5 .content .right .item .item_bg2 img {
        display: block;
        height: 100%
    }

    .index5 .content .right .item .h5 {
        color: #000;
        font-weight: 500;
        line-height: 1.5 !important;
        font-size: 20px !important
    }

    .index5 .content .right .item .p {
        overflow: hidden;
        color: #000;
        text-overflow: ellipsis;
        font-weight: 400;
        line-height: 2;
        opacity: 0.6;
        transition: 0.6s
    }

    .index6 {
        padding: 100px 5% 30px 5%
    }

    .index6 .content {
        width: 100%;
        margin: 30px 0 0 0
    }

    .index6 .content .line {
        display: none
    }

    .index6 .content .item {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 1 !important
    }

    .index6 .content .item:not(:last-child) {
        margin: 0 0 30px
    }

    .index6 .content .item .icon {
        width: 30px;
        height: 30px;
        margin: auto
    }

    .index6 .content .item .text {
        margin: 20px auto 0 !important;
        width: fit-content
    }

    .index6 .content .item .text .num {
        font-size: 20px
    }

    .index6 .content .item .circle {
        display: none
    }

    .index6 .content .item .pick {
        position: static;
        width: 100%;
        text-align: center;
        margin: 20px 0 0 0;
        transform: none
    }

    .index6 .content .position {
        left: 0;
        position: static;
        justify-content: center;
        margin-top: 40px
    }

    .index6 .content .position .btns .prev {
        transform: translateX(12px)
    }

    .index6 .content .position .btns .next {
        transform: translateY(-10px)
    }

    .index6 .content .position .btns img {
        width: 40px
    }

    .index7 {
        padding: 60px 0
    }

    .index7 .img {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .index7 .position {
        position: relative;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        transform: none;
        padding: 0 5%
    }

    .index7 .position .p2 {
        margin: 15px 0 0 0
    }

    .index7 .position .left {
        top: -27px;
        left: 5%;
        width: 22px
    }

    .index7 .position .right {
        bottom: 40px;
        right: 5%;
        width: 22px
    }

    .index8 {
        padding: 50px 5%
    }

    .index8 .top {
        flex-direction: column;
        align-items: unset;
        padding: 0
    }

    .index8 .top .pick {
        margin: 20px 0 0 0;
        text-align: left
    }

    .index8 .top .pick p {
        margin: 0;
        text-align: left
    }

    .index8 .content {
        flex-direction: column;
        margin: 30px 0 0 0;
        align-items: unset
    }

    .index8 .content .left {
        width: 100%
    }

    .index8 .content .left .lefSwiper {
        height: auto
    }

    .index8 .content .left .item:not(:last-child) {
        margin: 0 0 30px
    }

    .index8 .content .left .item .text {
        margin: 15px 0
    }

    .index8 .content .left .item .pic {
        display: block;
        width: 100%
    }

    .index8 .content .left .item .pic img {
        width: 100%;
        height: 400px;
        object-fit: cover
    }

    .index8 .content .left .more {
        margin: 30px 0 0 0;
        gap: 10px;
        top: 0
    }

    .index8 .content .left .more svg {
        width: 30px;
        height: auto
    }

    .index8 .content .r {
        margin: 30px 0 0 0;
        gap: 20px;
        display: none
    }

    .index8 .content .r .flex:first-child {
        margin: 35px 0 0 0
    }

    .index8 .content .r .flex:last-child {
        margin: 25px 0 0 0
    }

    .index8 .content .r .flex .img {
        width: 26vw;
        height: auto
    }

    .index8 .content .r .flex .img:not(:last-child) {
        margin: 0 0 20px
    }

    .index9 {
        padding: 50px 5%
    }

    .index9 .top {
        padding: 0
    }

    .index9 .top .btns {
        top: 70px
    }

    .index9 .top .btns img {
        width: 40px;
        margin-top: -30px
    }

    .index9 .top .btns .prev {
        transform: translateX(15px)
    }

    .index9 .top .btns .next {
        transform: translateY(-5px)
    }

    .index9 .content {
        margin: 30px 0 0 0;
        flex-direction: column
    }

    .index9 .content .newsSwiper .swiper-slide .item {
        height: auto
    }

    .index9 .content .newsSwiper .swiper-slide .item .img {
        height: auto
    }

    .index9 .content .newsSwiper .swiper-slide .item .text {
        margin: 15px 0 0 0
    }

    .index9 .content .newsSwiper .swiper-slide .item .text .dis {
        margin: 0 0 10px;
        gap: 14px
    }

    .index9 .content .newsSwiper .swiper-slide .item .text .p1 {
        font-size: 16px
    }

    .index9 .content .end {
        padding: 0;
        justify-content: unset;
        margin: 30px 0 0 0
    }

    .index9 .content .end .swiper-pagination span {
        width: 8px;
        height: 8px;
        margin: 0 7px 0 0 !important
    }

    .index9 .content .end .swiper-pagination span:last-child {
        margin: 0 !important
    }
}