.logo-icon{height: 38px;width: auto;}
.section.is-video {
  /* margin-top: 6rem; */
  padding-top: 15vh;
  padding-bottom: 0;
}
.section.is-video .flex-center {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex
;
}
.heading-style-h1 {
    letter-spacing: -.02em;
    text-transform: uppercase;
    font-family: Q-M;
    font-size: 6rem;
    font-weight: 400;
    line-height: .9;
    position: relative;
    color: var(--heading);
    font-weight: 900;
    /* width: 100%; */
}
.heading-style-h1 span{display: block;}
/* .creative-wrapper .creative h1{font-size: ;} */
.section.is-video .max-width-700 {
  z-index: 2;
  flex-flow: column;
  /* max-width: 43.75rem; */
  max-width: 100%;
  position: relative;
}
.section.is-video .video_wall {
  height: 300vh;
  margin-top: -34vh;
  margin-bottom: -100vh;
  position: relative;width: 100%;
}
/* .heading-style-h1 {
  letter-spacing: -.02em;
  font-family: Coolvetica Condensed, sans-serif;
  font-size: 11.25rem;
  font-weight: 400;
  line-height: .9;
  position: relative;
} */
.section.is-video .video{margin-top: 0;}
.section.is-video .video-box{width: 100%;height: 100%;}
.section.is-video .video_box{width: auto;height: auto;}
.header-wrap{background: #fff;}
.header-wrap a{color: var(--black);
  /* border: 1px solid #0000008c; */
}
.header-link:hover{}
.social-link,.footer-link-menu{color: var(--white);}
.submit-button{margin-left: 0;}
.hero-section.home{background: var(--white);    /* min-height: 100vh; */
}
.hero-section.home section{margin: 50px auto;}
.w-dropdown-toggle{display: flex;padding: 0;}
.faq-block{color: var(--black);}
.vertical-icon,.answer-block {
  transition: transform 0.3s ease;
}
.w-dropdown.w--open .vertical-icon {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
}
.w-dropdown-list{position: relative;background: none;display: block;}
.answer-block{font-size: 14px;}
/* .recent-right-box-top .w-inline-block,.recent-left-box-top .w-inline-block{aspect-ratio: 5/4;} */
.recent-right-box-top .w-inline-block,.recent-left-box-top .w-inline-block{aspect-ratio: 5/4;display: flex;align-items: center;justify-content: center;/* align-content: center; *//* flex-wrap: wrap; */}
.recent-right-box-top .w-inline-block img,.recent-left-box-top .w-inline-block img{height: 100%;width: auto;max-width: none;}
/* .faq-question{font-size: 20px;} */
/* Global */
html {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
.video_section{width: 100%;overflow: auto;}
body:not(.no-transition),body:not(.no-transition) .transition {
    transition: background-color 1s var(--ease)
}

.transitioning {
    pointer-events: none
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

.lineswrap {
    overflow: hidden
}

/* Header */
.section-header {
    pointer-events: none
}

.header-col {
    pointer-events: auto
}

/* Loading animation */
body:not(.dark) .loading {
    background-color: var(--white)
}

body:not(.dark) .loading>* {
    filter: invert(1)
}

.loading {
    display: flex;
    transition: 1.5s var(--ease2)
}

.loading:not([data-loading]) {
    transform: translate3d(0,-101%,0)
}

.loading>* {
    transition: opacity .5s ease-in-out
}

.loading:not([data-loading])>* {
    opacity: 0
}

.loading:not([data-loading=true])>* {
    opacity: 0!important
}

.loading-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 2.125rem;
    transform-origin: left;
    transform: scaleX(var(--progress))
}

/* Page transitions */
body::before,.transition {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 5;
    transform-origin: bottom;
    pointer-events: none
}

body::before {
    transition: transform 1s var(--ease2),background-color 1s var(--ease)
}

body.dark::before,.dark .transition {
    background-color: var(--black)
}

.transition,.once body::before {
    transform: scaleY(0);
    transform-origin: top
}

.section-bottom-nav {
    transition: transform 1s var(--ease)
}

html:not(.ready) .section-bottom-nav,html.transitioning .section-bottom-nav,.section-bottom-nav.on {
    transform: translate3d(0,100%,0)
}

.section-bottom-nav.on .filters-menu {
    opacity: 0;
    pointer-events: none
}

.project-item-header,.section-project .grid-2 {
    transition: opacity .5s
}

.transitioning .project-item-header,.transitioning .section-project .grid-2 {
    opacity: 0
}

/* Animations */
[data-anim],[data-stagger]>*,.line {
    transition: opacity 1.25s var(--ease),transform 1.25s var(--ease)
}

html:not(.ready) [data-anim],html:not(.ready) [data-stagger]>* {
    opacity: 0;
    transform: translate3d(0,3rem,0)
}

html:not(.ready) [data-anim="2"],html:not(.ready) .line,.transitioning .project-header h1 {
    transform: translate3d(0,100%,0)
}

[data-delay="1"] {
    transition-delay: .2s
}

[data-delay="2"] {
    transition-delay: .4s
}

[data-delay="3"] {
    transition-delay: .6s
}

[data-delay="4"] {
    transition-delay: .8s
}

.project {
    opacity: 0;
    transform: translate3d(0,5rem,0)
}

.project-header h1 {
    transition: transform 1s var(--ease)
}

/* Intro */
.intro-heading {
    opacity: calc(1 - var(--progress))
}

.intro-p .lineswrap {
    opacity: calc(1 - (var(--progress) * var(--delay)))
}

.intro-p .line {
    position: relative
}

.intro-heading::before,.intro-p .line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-90deg,var(--white) 50%,rgba(255,255,255,0));
    transform: translate3d(calc(100% * (1 - var(--progress))),0,0)
}

.intro-heading-1 {
    transform: translate3d(calc(100% * var(--progress)),0,0)
}

.intro-heading-1::before {
    width: 250%
}

.intro-heading-2 {
    transform: translate3d(calc(-75% * var(--progress)),0,0)
}

.intro-heading-2::before {
    background-image: linear-gradient(90deg,var(--white) 30%,rgba(255,255,255,0) 100%);
    transform: translate3d(calc(-100% + 100% * var(--progress)),0,0)
}

.intro-heading-3 {
    transform: translate3d(calc(50% * var(--progress)),0,0)
}

.clients,.discover {
    opacity: calc(1 - (var(--progress) * 2))
}

.intro-nav {
    transition: opacity .5s
}

.scroll-intro-nav[data-scroll=off] ~ * .intro-nav,.scroll-intro-nav:not([data-scroll=off]) ~ * .creative-wrapper {
    opacity: 0;
    pointer-events: none
}

.creative-wrapper {
    display: block
}

.container.intros{padding: 0;}

.creative-wrapper .creative {
    opacity: calc(0 + var(--progress));
    transform: translate3d(calc(-50% + 50% * var(--progress)),0,0);
    height: auto;
    width: auto;
}

.creative-wrapper .btn {
    opacity: max(0,calc((var(--progress) - 0.8) * 5));
    transform: translate3d(0,calc(100% * (1 - var(--progress))),0)
}

/* Intro Nav */
.intro-nav-link {
    transition: opacity 1s var(--ease)
}

.intro-nav:hover .intro-nav-link:not(:hover),.intro-nav-link.off:not(:hover) {
    opacity: .3
}

.intro-nav-link.on {
    opacity: 1!important
}

.intro-nav-link>.diamond {
    transition: transform .5s;
    will-change: transform
}

.intro-nav-link:not(.on)>.diamond {
    transform: scale(0)
}

/* Clients Logos */
.clients {
    -webkit-mask: linear-gradient(transparent,#fff 30%)
}

.clients .w-dyn-list {
    width: 100%
}

.clients .w-dyn-item {
    position: relative;
    display: flex;
    justify-content: center
}

.clients a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    transform: translate3d(0,100%,0)
}

.clients img {
    position: absolute;
    width: 100%;
    max-width: 12.3125rem;
    min-height: 5rem;
    object-fit: contain
}

.clients a.in {
    animation: in 1.5s cubic-bezier(.76,0,.24,1) both
}

.clients a.out {
    animation: out 1.5s cubic-bezier(.76,0,.24,1) both
}

@keyframes in {
    0% {
        transform: translate3d(0,100%,0)
    }

    100% {
        transform: none
    }
}

@keyframes out {
    0% {
        transform: none
    }

    100% {
        transform: translate3d(0,-100%,0)
    }
}

/* Flickity */
.flickity-enabled {
    display: block;
    position: relative
}

.flickity-enabled:focus {
    outline: none
}

.flickity-viewport {
    position: relative;
    height: 100%
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%
}

.flickity-enabled.is-draggable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

/* Testimonials */
.testimonial {
    min-height: 100%;
    transition: opacity .8s var(--ease)
}

.testimonial .dash {
    transition: transform .8s var(--ease)
}

.testimonial:not(.is-selected) {
    opacity: .1
}

.testimonial:not(.is-selected) .dash {
    transform: scaleX(0)
}

/* Cursor */
.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    pointer-events: none
}

.mf-cursor::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: .8125rem;
    height: .8125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M13 6.5A41.74 41.74 0 0 1 6.5 0 41.74 41.74 0 0 1 0 6.5 41.74 41.74 0 0 1 6.5 13c1.921-2.399 4.101-4.579 6.5-6.5z' fill='%230d0d0d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transition: opacity .3s,transform .4s
}

.mf-cursor.-pointer::before {
    opacity: 0;
    transform: scale(0)
}

.mf-cursor-text {
    position: absolute;
    top: 1rem;
    left: 1rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -.025em;
    padding: 1rem 1.5rem;
    border-radius: .75rem;
    color: var(--black);
    background-color: var(--white);
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s,transform .4s
}

.mf-cursor.-text .mf-cursor-text {
    opacity: 1;
    transform: scale(1)
}

.mf-cursor-media {
    display: none
}

/* canvas */
canvas {
    position: fixed;
    top: 0;
    left: 0;
}
.intros{position: relative;height: 100vh;}
.intro{position: absolute;
  /* top: 50%;left: 50%;transform: translate(-50%, -50%); */
  margin: auto;}
.dash {
  background-image: linear-gradient(-110deg, var(--blue), var(--primary));
  transform: scaleY(1.001);
}
.creative-wrapper .gap-xl{width: 200px;margin-left: auto;margin-right: auto;}
.hide{display: none;}
blockquote{background: none;border-left:none}
#footer{background: var(--black);}
blockquote{color: var(--text);}
.industries-surfaces,.section.section-testimonials{background: var(--white-3);color: var(--text);}
.benefits{background: var(--white-3);}
.benefits .splide__track{overflow: visible;}
.benefits .splide__pagination{display: none;}

.xfbiaodan{color: #fff;font-family: 'Q-L';}
.xfbiaodan h2{color: #fff;}

.container-full{max-width: 100%;width: 100%;}
.dingbu{padding-top: 10rem;}
.dingbu h1{font-size: 5em;margin-bottom: 1rem;font-family: 'Q-M';line-height: 1;}
.shang-{padding-top: 7rem;padding-bottom: 2rem;}
.shangxia{padding-top: 7rem;padding-bottom: 10rem;}
/* .dibu h2{color: #fff;} */
.neiye h2{font-size: 48px;}
.neiye h3{font-size: 42px;}
.grid-slider-years .w-slider-mask,.neiye .w-slider-mask{overflow: visible;}
.grid-slider-years .w-slider,.neiye .w-slider{overflow: visible;background: none;height: auto;}
.history-right{height: 600px;display: flex;justify-content: center;}
.history-right .grid-slider-years .w-slider{height: 150px;}

.w-slider-arrow-left{border: 1px solid var(--color--primary-1);justify-content: center;align-items: center;width: 50px;height: 50px;margin-top: 0;margin-bottom: 0;transition: background-color .3s ease-in-out;display: flex;inset: auto auto 125% 50vw;}
.w-slider-arrow-right{    border-style: solid;border-width: 1px 1px 1px 0;border-color: var(--color--primary-1);justify-content: center;align-items: center;width: 50px;height: 50px;transition: background-color .3s ease-in-out;display: flex;inset: auto auto 125% calc(50vw + 50px);}

.page-section{color: #fff;}
.page-section h1{color: #fff;}

/* .prolist dl{position:relative; width:calc(100%/3); float:left; box-sizing:border-box; overflow:hidden; border:1px #ebebeb solid;max-height: 600px;margin: 0;}
.prolist dl dt{aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
.prolist dl dt img{max-width: 75%;}
.prolist dl dd{color: var(--black);position: absolute;top: 95%;left: 50%;transform: translate(-100%,-50%);} */

.prolist{}
.prolist h1{
    /* font-family: 'Poppins';  */
    font-size:48px; color:#7dd00e; text-align:center; text-transform:uppercase; letter-spacing:3px; margin:80px 0 50px;}
.prolist_des{ line-height:40px;font-size:18px; color:#c4c8bf;}
.prolist_des img{ float:left; max-width:600px; margin-right:15px;}
.prolist{margin:50px 0 50px;display: grid;grid-template-columns: repeat(4, 2fr);grid-gap: 60px;}
.prolist dl{/* width:20%; *//* margin:0 0 20px 4%; */float:left;overflow: hidden;}
.prolist dl dt{ border:#e1e1e1 3px solid;transition:300ms;}
.prolist dl dt{aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;}
.prolist dl dt img{ max-width:75%;}
.prolist dl dd{ font-size:16px; text-align:center; line-height:40px; height:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#0e486d;background: #e1e1e1;transition:300ms;margin: 0;}
.prolist dl:hover dt{ border:#063e71 3px solid;transition:300ms;}
.prolist dl:hover dd{ background:#063e71; color:#fff; transition:300ms;}

/* .mid_nav{ margin:0px 0 30px; padding-left:15px;}
.mid_nav a{  display:inline-block; background:#ebebeb; color:#000; font-size:14px; padding:0 15px; line-height:30px; border-radius:3px; margin-right:5px;}
.mid_nav a:hover{ background:#1bb0f3; color:#fff;}
.mid_nav .act{ background:#1bb0f3; color:#fff;} */

.mid_nav{padding:3% 0;}
.mid_nav_l{position: relative;max-width: 25%;}
.mid_nav h3{font-size: 1.125rem;min-width: 250px;font-weight: lighter;border: solid 1px rgba(204,204,204,.5);padding: 8px 16px 8px 16px;justify-content: space-between;align-items: center;cursor: pointer;/* max-width: 40%; */}
.mid_nav h3:hover{border:solid 1px rgba(146, 146, 146, 0.5);}
.mid_nav_ul{padding-top: 15px;background: white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);}
.mid_nav_div{position: absolute; display:none; z-index: 55;width:100%;}
.mid_h3{}
.mid_nav a,.mid_nav .sf-menu .erji a,.mid_nav .sf-menu .erjii a{transition: 600ms;display: block;  color: black;font-size: 16px;margin:3px 0;    padding: 3px 16px 3px 16px;}
.mid_nav a:hover{color:rgb(103, 135, 191);}
.mid_nav .act{color:rgb(103, 135, 191);}
.mid_nav li i{margin-top: -30px;margin-right: 5px;float:right}
.mid_nav .erji,.mid_nav .erjii{position: relative;top: 0;left: 0;}
.mid_nav .sf-menu a{width:calc(100% - 50px)}

.prolist-top{margin-top: -3%;}

.col-lg-6{width: 50%;position: relative;}
/* .little{  border: 1px solid black;} */
/* 小图 */
/* .little img{  width: 480px;  height: 300px;} */
/* 小放大镜 */
.little .mark{  width: 150px;  height: 150px;  background-color: #939393; opacity: 0.5; position: absolute; left: 0; top: 0;cursor: move;display: none;}

/* 大放大镜 */
.great{width: 100%;/* height: 100%; */background: #fff;border: 1px solid #000;overflow: hidden;position: absolute;display: none;margin-left: 100%;z-index: 100;aspect-ratio: 1/1;}
.great div{  position: absolute;  left: 0;  top: 0;  width: 1600px;  max-width: 300%;display: flex;justify-content: center;align-items: center;}
.great img{max-width: 300%;max-width: 1600px;max-height: 1600px;object-fit: contain;}

.first-line{  width: 100%;display: flex;padding-bottom: 3%;}
/* .product-img{  width: 100%;  height: 400px;  margin: 10px;} */
.swiper-pagination11{  width: 37%;}
.product-information{  margin-top: 2rem;font-size: 1.5rem;}
.product-information-title{border-bottom-style: solid; border-bottom-color: #53647a;font-size: 2.4rem; color: #53647a; font-style: normal; border-bottom-width: 2px;
    padding-top: 8px;padding-bottom: 4px;}
.product-information-conception{ margin-top: 10px;}
.text-wrapper{ display: flex; flex-direction: column; width: 270px; line-height: 2.5rem; padding-top: 10px;}
.text-wrapper p{text-align: center;}
.product-display{display: flex;flex-wrap: wrap;}
.aboutus img{  width: 1000px;}

.xiaopro{width: 34%;margin: auto 7%;}

#service>div{cursor: auto;}
.beige-box.counter{background: var(--white-3);line-height: 1.3;/* width: 100%; */text-align: center;align-items: center;}

.cultural .slide-wrap{background: none;}
.cultural .slider-mask{width: 22%;}
.cultural .slider-mask img{aspect-ratio: 4/3;}

.containera{max-width: 1336px;padding-top: 5vw;padding-bottom: 7vw;}
.article img{max-width: 80%;margin: auto;display: block;}
.article h2,.article h3,.article h4{margin-bottom: .5em;}
.article h2{font-size: 28px;}
.article h3{font-size: 26px;}
.article h4{font-size: 24px;}


.swiper-container{max-width: 100%;}
.lunb{ width: 100%;  margin: auto;  background: #000;  height: 100%;}
.procont_pic_{/* border: 1px solid #ccc; */}
.procont_pic_ img{max-width: 24%;cursor: pointer;opacity: .5;margin: auto 0.7rem;}
.procont_pic_ .check{/* border: 1px solid #005bb1; */opacity: 1;}
.foot{ padding:30px 10px 10px; background:#333;}
.foot_box{ width:31%; float:left;margin-right: 2%;font-size: 17px;}
.foot_box h3{ font-size:30px; color:#fff; margin-bottom:15px;font-family: "sab";}
.foot_box a{ display:block; color:#fff;}
.foot_box a:hover{ color:#fff;}
.foot_box p{color:#fff;}
.foot_lx{ width:30%;}
.ewm{ width:18%; text-align:right;}
.links{ color:#ccc; margin:15px auto 5px;;}
.links span{ color:#fff;}
.links a{ display:inline-block; padding:0 10px; color:#999;}
.links a:hover{ color:#fff;}
.bdsharebuttonbox a{ padding:0;}
.banquan{ text-align:center; color:#ccc; border-top:1px #ccc dashed; padding:10px 0 5px;}
.banquan span{ color:#fff;}
.source{display: flex;justify-content: space-around;padding: 5% 0;}
.source a{border-left: 1px solid #fff;margin: 7px;padding-left: 9px;}

.swiper-container.product-img{aspect-ratio: 1/1;}
#el_SmallContainer{aspect-ratio: 1/1;}
.details p{font-size: 1.3rem;margin: 1rem 0;}
.details .contact-form a{width: 50%;}
.details#w-node-_4d628a0a-6ac8-6e94-b944-d7f177672ec7-51d13b85{align-self: start;}

@media screen and (min-width: 992px) {
.contact-hero-section .about-data .liangh{margin-bottom: -50px;}
}

@media screen and (max-width: 991px) {
.prolist{grid-template-columns: repeat(3, 2fr);grid-gap: 30px;}
.cms-industries .mobile-flex *{color: var(--black);}
}

@media screen and (max-width: 767px) {
.first-line .xiaopro,.first-line .contact-form-wrap{width: 100%;}
.first-line{flex-wrap: wrap;}
}

@media screen and (max-width:479px) {
.logo-icon{height: 30px;width: auto;}
.lottie-motion{padding-top:4rem;padding-left:2rem;padding-right:2rem}

.primary-button,.contact-detail-item,.beige-box.counter,.faq-data{font-size: 1rem;}
.neiye h2{font-size: 32px;}
.button-arrow-link.left{inset: -50px 70px auto auto;}
.button-arrow-link.right {inset: -50px 0% auto auto;}
.heading-style-h1 span{    word-wrap: break-word;font-size: 52px;}
.video-embed{position: relative;}
.section.is-video .video_wall{height: 180vh;}

.prolist{grid-template-columns: repeat(2, 2fr);grid-gap: 15px;width: 100%;overflow: hidden;display: flex;flex-wrap: wrap;}
.prolist dl{margin: 0;/* width: 50%; */max-width: 100%;float: none;}
.container-full p.w-col-10{width: 100%;}

.about-card,.creative-wrapper .gap-xl,.opening-title{font-size: 1rem;}
.history-right{height: 450px;}
.history-right>div{display: flex;}
.cultural .slider-mask{width: 100%;}
.details .contact-form a{width: 75%;}
.mid_nav_l{width: 100%;max-width: 100%;}
}
@media screen and (min-width: 480px) {
.lottie-motion{display:flex;justify-content:center;align-items:center;width:650px;max-width:50%;margin:auto}
}