.indBox {
    background: #f7f3f1;
    position: relative;
    z-index: 2;
    margin-bottom: 50vh;
    border-radius: 0 0 20px 20px;
}

.indMore {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.indMore::after {
    content: '';
    width: 100%;
    height: 100%;
    background: url(./images/MoreBg.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    animation: zhuan 200s linear infinite;
}

@keyframes zhuan {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(3600deg);
    }
}

.indMore a {
    position: relative;
    z-index: 2;
}

.indMore a img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
}

.indMore.center {
    margin: 0 auto;
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transition: all .48s;
    z-index: 999999;
}

/*  */

/* .headerw {
    background: #fff;
} */

/* .headerw .headIpt {
    background: #efefef;
} */

.header .inner {
    width: 96%;
}

.headerBox {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: all .48s;
}

.hLogo svg {
    width: 140px;
}

.hLogo svg path {
    fill: #333;
}

.hLogo img {
    width: 140px;
}

.hLogo .img2 {
    display: none;
}

/*  */

.hNav ul {
    display: flex;
    align-items: center;
}

.hNav ul li a {
    padding: 0 30px;
    margin: 15px 30px;
    font-size: 18px;
    letter-spacing: .1em;
    font-weight: 600;
    text-transform: uppercase;
    color: #333;
    display: inline-block;

    position: relative;
    top: 5px;
    transition: all .48s;
}

.hNav ul li a span {
    text-align: center;
}

/* == */
.upA {
    position: relative;
    overflow: hidden;
}

.upS {
    font-family: "Hubot";
    display: block;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
    transition: transform .28s;
}

.upS.hover {
    font-family: "FZZZ";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}

@media (min-width: 1024px) {

    .upA:hover .upS {
        transform: translate3d(0, -110%, 0);
    }
}

/*  */


.menu {
    width: 70px;
    height: 60px;
    background: #ed1d24;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu img {
    width: 20px;
}

/*  */
.headerMain-bg.header .hNav ul li a span {
    color: #fff;
}

.headerMain-bg.header .img2 {
    display: block;
}

.headerMain-bg.header .img1 {
    display: none;
}

.indChange {
    width: 100%;
    padding: 90px 0 20px;
    position: sticky;
    top: 0;
}

.indChangew {
    background: #f7f3f1;
    z-index: 999;
}

.indChangeBox {
    display: flex;
    align-items: center;
}

/* .indChangew .menu_s {
    background: #efefef;
} */

.menu_s {
    width: 46px;
    height: 46px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    margin-right: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.menu_s span {
    display: block;
    width: 20px;
    height: 2px;
    background: #333;
    margin: 3px 0;
    transition: all .48s;
}

/* */
.header.headerMain-bg .menu_s span {
    background: #fff;
}

.header.white .menu_s span {
    background: #fff;
}

.indChangeBox {
    position: relative;
}

.indChangeBox .swiper-container {
    flex: 1;
    transition: all .48s;
}

.indChangeBox .swiper-slide {
    width: auto;
}

.indChangeBox .swiper-slide span {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 300;
    background: #dafff6;
    cursor: pointer;
}

.indChangeBox .swiper-slide:nth-child(2) span {
    background: #d6ecff;
}

.indChangeBox .swiper-slide:nth-child(3) span {
    background: #dad3ff;
}

.indChangeBox .swiper-slide:nth-child(4) span {
    background: #fee2eb;
}

.indChangeBox .swiper-slide:nth-child(5) span {
    background: #ffe4c1;
}

.indChangeBox .swiper-slide:nth-child(6) span {
    background: #fffd93;
}

.indChangeBox .swiper-slide:nth-child(7) span {
    background: #cfffca;
}

.indChangeBox .swiper-slide:nth-child(8) span {
    background: #dafff6;
}

.indChange .prev,
.indChange .next {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.indChange_a.prev {
    left: 0;
    transform: translateY(-50%) rotate(180deg);
}

.indChange_a.next {
    right: 0;
}

.indChange_a svg {
    width: 30px;
    height: 30px;
}

.indChangeBox .swiper-container:hover .indChange_a {
    opacity: 1;
    pointer-events: visible;
}

.headIpt {
    flex: 1;
    margin: 0 20px;
    display: flex;
    align-items: center;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.68); */
    background: #fff;
    border-radius: 50px;
    padding: 12px 20px;
}

.headIpt input {
    width: 100%;
    background: none;
}

.headIpt svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.indCase {
    padding: 60px 0;
    position: relative;
}

.indCaseTit {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;

    opacity: 0;
    transform: translateY(100px);
}

.indCaseTit span {
    line-height: 1;
    font-size: 80px;
    text-transform: uppercase;
    font-family: "Hubot";
}

.indCaseTit b {
    font-size: 24px;
    letter-spacing: 2px;
    padding-left: 10px;
}

.indCaseIpt {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.68);
}

.indCaseIpt input {
    width: 200px;
    padding: 10px;
    background: none;
}

.indCaseIpt svg {
    width: 20px;
    height: 20px;
}

.indCase .More {
    display: flex;
    align-items: center;
    padding-bottom: 40px;
}

.indCase .More a {
    margin-left: 15px;
}

/* ====== */

.indCaseXq {
    position: relative;
}

.indCaseWarp {
    display: none;
    width: 100%;
    padding: 0 2%;
    /* background: #f7f3f1; */
}

.indCaseWarp.show {
    display: block;
    /* clip-path: inset(0 0 0 0); */
    transition: clip-path 1.8s ease-out;
    position: relative;
    z-index: 9;
}

@keyframes upupup {
    0% {
        clip-path: inset(100% 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes opacity_try {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.indCaseWarp.show {
    animation: upupup 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
    opacity: 1;
}

.indCaseWarp.show .indCaseTit {
    animation: opacity_try .68s 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}

.indCaseWarp.show .indCaseBox {
    animation: opacity_try .68s 2.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}

/*  */

.indCaseWarp.pos {
    height: 100vh;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
}

.indCaseWarp.pos .indCaseTit,
.indCaseWarp.pos .indCaseBox {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/*  */

.indCaseBox {
    padding-right: 8%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    opacity: 0;
    transform: translateY(100px);
}

.indCaseItem {
    width: calc(50% - 60px);
    margin-right: 60px;
    margin-bottom: 100px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .48s;
}

.indCaseItem.big {
    width: 80%;
}

/* .indCaseItem.big .indCaseImg {
    padding-top: 56%;
} */

.indCaseImg {
    /* padding-top: 65%; */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: block;
    background: #0a4b3e;
    min-height: 275px;
    /* height: 21vw; */
}

/* .big .indCaseImg {
    height: 40vw;
} */

.indCaseImg img {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.imgFm {
    position: relative;
    z-index: 2;
}

.imgScroll {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: scroll_up 20s infinite .48s linear;
    animation: scroll_up 20s infinite .48s linear;
    animation-play-state: paused;
    transition: all .28s;
}

.indCaseItem:hover .imgScroll {
    animation-play-state: running;
}

@keyframes scroll_up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

/* .indCaseImg.heig {
    padding-top: 103%;
} */

.indCaseImg video {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.indCaseText {
    margin-top: 10px;
    display: flex;
}

.indCaseText a {
    display: block;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.68);
}

.indCaseText span {
    display: block;
    font-size: 24px;
    font-family: "Hubot";
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
}

.indCaseText span.hover {
    font-size: 22px;
}

.indCaseText_r {
    flex: auto;
    margin-left: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.indCaseText_r::after {
    content: '';
    width: 0;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.68);
    position: absolute;
    left: 0;
    bottom: -1px;
    transition: all 1s;
}

.indCaseText p {
    font-size: 24px;
    font-family: "Hubot";
    text-transform: uppercase;
    color: #333;
}

.inCItem:hover .inSbtn {
    opacity: 1;
}

.inSbtn {
    width: 80px;
    height: 0;
    background-image: linear-gradient(90deg, #1fa7f8, #5841d3);
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    left: -40px;
    top: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;

    color: #fff;
    font-family: "Hubot";
    text-transform: uppercase;
    transition: all .48s;
}


/*  */
.indCaseItem:hover {
    transform: scale(0.98);
}

.indCaseItem:hover .upS {
    transform: translate3d(0, -115%, 0);
}

.indCaseItem:hover .indCaseText_r::after {
    width: 100%;
}

.indCaseItem:hover .inSbtn {
    opacity: 1;
    height: 80px;
}


.indCaseImg:hover .imgScroll {
    opacity: 1;
    z-index: 3;
}

/* 选择框 */
.xzk {
    position: relative;
}

.xzk i {
    width: 28px;
    height: 28px;
    display: block;
    position: relative;
}


.xzk i svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.xzk i svg.ax2{
    display: none;
}

.xzk i svg.ax2 path{
    fill: #ed1d24;
}

.xzk input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.xzk.on i svg.ax2 {
    display: block;
}

.xzk.on i svg.ax1{
    display: none;
}

/*  */

.indCaseUl_m {
    width: 100%;
    display: none;
    flex-wrap: wrap;
}

.indCaseUl_m li a {
    display: block;
    font-size: 14px;
    padding: 0 10px;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.indCaseUl_m li a span {
    color: #333;
    font-size: 16px;
}

.indCaseUl_m li.on a span {
    color: #999;
}

/*  */

.indCaseUl {
    width: 120px;
    position: fixed;
    right: 2%;
    top: 72%;
    z-index: 999;
}

.indCaseUl li a {
    display: block;
    font-size: 18px;
    letter-spacing: .1em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.indCaseUl li a span {
    color: #333;
    font-size: 20px;
}

.indCaseUl li.on a span {
    color: #999;
}

.indCaseUl li a:hover span {
    color: #999;
}