body, section{background-color: #fdfdfd;}
.section2 {
    padding: 0 10vw;
    position: relative;
    overflow: hidden;
    
}

.section2 .top {
    position: absolute;
    right: 5.52083vw;
    bottom: 7.60417vw;
    width: 1.5625vw;
    height: fit-content
}

.section2 .t {
    margin: 0 0 0 1.04167vw
}

.section2 .t .title {
    color: #272727;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 2.083vw;
    letter-spacing: 0.187vw;
}

.section2 .t .cut {
    /*height: 8.4vw;*/
}

.section2 .t .cut .cut_list {
    display: none
}

.section2 .t .cut .cut_list.on {
    display: block;
    animation: yAnimate .6s ease forwards
}

.section2 .t .p1 {
    color: #272727;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    margin: 0 0 .20833vw
}

.section2 .t .p2 {
    width: 35vw;
    color: #5d5d5d;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25vw;
}

.section2 .content {
    margin: 3.38542vw 0 0 0;
    position: relative
}

.section2 .content .swiper-pagination {
    position: static;
    height: 1px;
    background: #ADADAD;
    margin: 1.71875vw 1.04167vw 0 1.04167vw
}

.section2 .content .swiper-pagination .swiper-pagination-progressbar-fill {
    height: 2px;
    background: #4F4F4F;
    top: -1px
}

.section2 .content .swiper1 {
    width: 83.07292vw;
    margin: 0
}

.section2 .content .swiper1 .swiper-slide {
    cursor: pointer
}

.section2 .content .swiper1 .swiper-slide.swiper-slide-active .img .scale {
    height: 100%
}

.section2 .content .swiper1 .swiper-slide.swiper-slide-active .img .scale:after {
    opacity: 1
}

.section2 .content .swiper1 .swiper-slide.swiper-slide-active .img .scale .text {
    opacity: 1
}

.section2 .content .swiper1 .swiper-slide .img {
    height: 22.65625vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.section2 .content .swiper1 .swiper-slide .img:hover .scale:after {
    opacity: 1
}

.section2 .content .swiper1 .swiper-slide .img:hover .scale .text {
    opacity: 1
}

.section2 .content .swiper1 .swiper-slide .img .scale {
    position: relative;
    height: 90%;
    width: 100%;
    transition: all 600ms
}

.section2 .content .swiper1 .swiper-slide .img .scale:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%);
    z-index: 1;
    opacity: 0;
    transition: .6s ease
}

.section2 .content .swiper1 .swiper-slide .img .scale .text {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #FFF;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    opacity: 0;
    transition: .6s ease
}

.section2 .content .swiper1 .swiper-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: all 600ms
}

.section2 .content2 {
    margin: 8.15625vw auto 8.33333vw;
    width: 31.25vw;
    color: #000;
    text-align: center;
    font-style: normal;
    font-weight: 400;
      line-height: 2;
    letter-spacing: 0.125vw;
}

@media screen and (max-width: 1024px) {
    .section2 {
        padding: 1rem 5%
    }

    .section2 .t .cut {
        height: auto;
    }

    .section2 .t .title {
        line-height: unset;
        margin: 0 0 20px
    }

    .section2 .t .p1 {
        margin: 0 0 10px
    }

    .section2 .t .p2 {
        line-height: 1.5;
        width: 100%
    }

    .section2 .content {
        margin: 30px 0 0 0
    }

    .section2 .content .swiper1 {
        width: 100%;
        height: auto
    }

    .section2 .content .swiper1 .swiper-slide .img {
        height: 400px
    }

    .section2 .content .swiper1 .swiper-slide .img .scale {
        height: 100%
    }

    .section2 .content .swiper1 .swiper-slide .img .scale::after {
        opacity: 1
    }

    .section2 .content .swiper1 .swiper-slide .img .scale .text {
        opacity: 1
    }

    .section2 .content .swiper-pagination {
        margin: 30px auto 0
    }

    .section2 .content2 {
        width: 100%;
        margin: 50px auto 0
    }

    .section2 .top {
        right: 50px;
        bottom: 20px;
        width: 15px
    }

    .section2 .top svg {
        width: 100%
    }

}


@font-face {
    font-family: "Noto Sans TC";
    src: local("Noto Sans TC")
}

* {
    font-family: Noto Sans TC, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 首屏全屏样式 */
.hero-section {
    height: calc(100vh - 96px);
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width:1280px) {
    .hero-section{height: 30rem;margin-top: 64px}
    .hero-section h1{font-size: 1.5rem}
    .hero-section .scroll-down {font-size: 20px;bottom: 20px}
    #sectionAbout img{width: 2rem}
    h2{font-size: 2rem !important;}
    #sectionAbout p{font-size: 1rem;padding:0 1rem}
    .img-grid{padding:0 1rem}
    .dark-bg{padding: 4rem 0 !important;}
    .md\:my-28{margin: 1rem 0 !important;}
    .index-chengnuo, .index-fuwu, .index-ziyuan, .index-news, .index-kehu, .index-zeren{padding:1rem !important;}
    .index-chengnuo .max-w-8xl img{height: 20rem}
    .client-logos{gap: 20px;}
    .client-logos img{padding-bottom: 10px;}
    .index-zeren p{font-size: 1rem !important;padding: 0 1rem !important;font-weight: 500 !important;line-height: 1.2}
    .index-zeren .max-w-8xl{height: 30rem}
    .index-ziyuan .max-w-8xl img{width: 16rem}
    .index-ziyuan .max-w-8xl div{padding: 1rem}
}

@media screen and (max-width:768px) {
    .hero-section{height: 18rem;margin-top: 64px}
    .hero-section h1{font-size: 1.5rem}
    .hero-section .scroll-down {font-size: 20px;bottom: 20px}
    #sectionAbout img{width: 2rem}
    h2{font-size: 2rem !important;}
    #sectionAbout p{font-size: 1rem;padding:0 1rem}
    .img-grid{grid-template-columns: unset !important;padding:0 1rem}
    .dark-bg{padding: 4rem 0 !important;}
    .index-chengnuo, .index-fuwu, .index-ziyuan, .index-news, .index-kehu, .index-zeren{padding:1rem}
    .index-news .news-grid{grid-template-columns: unset !important;}
    .client-logos{gap: 0 !important;justify-content: space-between}
    .client-logos img{width: 45%;}
    .index-zeren p{font-size: 1rem !important;padding: 0 1rem !important;font-weight: 500 !important;line-height: 1.2}
    .index-zeren .max-w-8xl{height: auto}
    .index-zeren .zeren{background-image:unset}
    .index-ziyuan .max-w-8xl{flex-direction: column}
    .index-ziyuan .max-w-8xl div{padding: 1rem}
    .index-ziyuan .max-w-8xl img{width: 100%}
}
/* 动态向下箭头 */
.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 30px;
    animation: bounce 1.5s infinite;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(10px);
    }
}


.dark-bg {
    background: #000;
    color: #fff;
    padding: 10rem 0;
}
.img-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 40px;
    max-width: 90rem;
    margin: 0 auto;
}

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

.news-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 40px;
    max-width: 90rem;
    margin: 0 auto;
}

.news-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 66px;
    align-items: center;
    max-width: 90rem;
    margin: 0 auto;
}

.client-logos img {
    height: 50px;
    width: 100px;
}

/*new*/
.sticky-panel-wrapper {
    position:relative
}
.sticky-panel-wrapper {
    opacity:1;
    -webkit-transition:opacity .2s ease-in-out;
    transition:opacity .2s ease-in-out
}
.sticky-panel-wrapper.fade-me {
    opacity:0
}
.sticky-panel {
    height: 100vh;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}
.sticky-panel div, .sticky-panel div::after {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.vimeo-wrapper {
    background-color: #000;
    overflow: hidden;
}
.video-placeholder-img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.vimeo-wrapper h1 {
    line-height: 1;
    font-size: 110px;
    font-weight: 300;
    margin: 0 auto;
    max-width: 8em;
    text-align: center;
}
.sticky-panel-v1 .sticky-panel,.sticky-panel.stuck {
    position:fixed;
    z-index:-1
}
.sticky-panel.unstuck {
    position:absolute;
    top:100vh
}
.sticky-panel div {
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    transition:.4s linear
}
.sticky-panel div,.sticky-panel div:after {
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0
}
.sticky-panel div:after {
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.5) 75%);
    content:""
}
.sticky-panel div:nth-child(odd):after {
    background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 75%)
}
.sticky-panel div:first-child:after {
    content:none
}
.sticky-panel .sticky-panel-1,
.sticky-panel .sticky-panel-2,
.sticky-panel .sticky-panel-3,
.sticky-panel .sticky-panel-4,
.sticky-panel .sticky-panel-5,
.sticky-panel .sticky-panel-6,
.sticky-panel .sticky-panel-7,
.sticky-panel .sticky-panel-8
{
    opacity:0
}
.sticky-panel .sticky-panel-1.show-panel,
.sticky-panel .sticky-panel-2.show-panel,
.sticky-panel .sticky-panel-3.show-panel,
.sticky-panel .sticky-panel-4.show-panel,
.sticky-panel .sticky-panel-5.show-panel,
.sticky-panel .sticky-panel-6.show-panel,
.sticky-panel .sticky-panel-7.show-panel,
.sticky-panel .sticky-panel-8.show-panel
{
    opacity:1
}
.scroll-panel {
    color:#fff;
    min-height:100vh;
    position:relative;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -moz-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}

.wrapper {
    margin: 0 auto;
    width: 90%;
}
.clearfix::after, .clearfix::before {
    content: " ";
    display: table;
}
.column.right {
    float: right;
}
.single-margin-right {
    margin-right: 8.5820895522%;
}
.four-col {
    width: 31.3432835821%;
}
.column {
    display: block;
    float: left;
    margin-left: 2.9850746269%;
    text-decoration: none;
}
.copy {
    max-width:490px
}
.copy p {
    font-size:1.353rem
}
.copy h2 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    padding-bottom: 20px;
}
.vimeo-wrapper .video-line.static {
    opacity: 1;
    z-index:99;
}
.vimeo-wrapper .video-line {
    color: #fff;
    font-size: 2.25rem;
    opacity: 0;
    position: absolute;
    left: 5%;
    line-height: 1;
    top: 50%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 90%;
}
@media only screen and (max-width: 1023px) {
    .single-margin-right, .single-margin-left{
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}