
.main{
    width: 100%;
}

.content{
    width: 91.25%;
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    padding-top: 1px;
}


.header{width: 100%; position: fixed;top:0px;left:0px;height: 116px;z-index: 99;background-color: #00bd71;display: flex;align-items: center;transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}

.header .menu-box{position: relative;}
.header .menu-box li{margin-left: 40px}
.header .menu-box li a{font-size: 30px;color: #ffffff;}
.header .menu-box li.active a{color: #ffffff}
.header .menu-box.innerText li a{color: #00bd71;}


.contact-header{position: relative;height: 116px;}



.header-mobile {width: 100%;position: fixed;z-index: 999;left: 0;top: 0;padding: 0 0.75rem;transition: background-color 0.5s ease;height: 3rem;background-color: #00bd71;display: none;}
.header-mobile #logo img{width:1.8rem;position: relative;top:0.75rem;}
.header-mobile.scroll #logo {	top: 10px}
.header-mobile.scroll #logo img {	height: 70px}
.header-mobile.scroll {	background-color: #12151D}

#btn-menu i {position: absolute;height: 2px;width: 1.55rem;background-color: #ffffff;transition: all 0.5s ease;}
#btn-menu i:nth-child(1) { right: 0; top: 0}
#btn-menu i:nth-child(2) {right: 0;top: 0.5rem}
#btn-menu i:nth-child(3) {right: 0;top: 1rem;}
#btn-menu span {transition: opacity 0.5s ease}
#btn-menu {-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;display: block;z-index: 12;position: fixed;right: 3%;color: #fff;top: 1rem;padding-right: 40px;text-transform: uppercase;font-size: 0.688em;font-weight: 500;letter-spacing: 1px;line-height: 23px;height: 30px;}

#btn-menu.on i {background-color: #00bd71; top: 10px;opacity: 0;}
#btn-menu.on i:nth-child(1) {transform: rotate(45deg);opacity: 1;}
#btn-menu.on i:nth-child(3) { transform: rotate(-45deg);opacity: 1;}
#btn-menu.on i:nth-child(2) { opacity: 0;}

#btn-menu.on span { opacity: 0}

#btn-menu.on {position: fixed}

.header-mobile #menu{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.5s;
}
.header-mobile #menu.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.header-mobile #menu a{font-size: 1.35rem;display: block;color: #000000;margin-top: 1.5rem;padding-left: 1rem;}
.header-mobile #menu a:nth-child(1){margin-top: 4rem}
.header-mobile #menu a.active{color: #00bd71}

.mouse{
    position: fixed;
    top:0px;
    z-index: 999;
    pointer-events: none;
    mix-blend-mode: normal;
}
.mouse .dot{
    width: 5px;
    height: 5px;
    background-color: #00bd71;
    border-radius: 100%;
    backface-visibility: hidden;
    will-change: transform;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: 50% 50%;
    position: absolute;
    left:50%;
    top:50%;
    transition: all 0.2s ease-in-out;
   color: #ffffff;
   text-align: center;
   font-size: 12px;

}

#shadow-mouse{
    position: fixed;
    top:0px;
    z-index: 1;
    pointer-events: none;
}

#shadow-mouse .dot{
    width: 0px;
    height: 0px;
    background-color: #ffffff;
    border-radius: 100%;
    backface-visibility: hidden;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: 50% 50%;
    position: absolute;
    left:50%;
    top:50%;
    transition: all 0.2s ease-in-out;
} 



@media only screen and (max-width: 1280px){
    .mouse{display: none}
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{color: #00bd71;background-color: #00bd71;}

.n-banner{width: 100%;height: 100vh;position: relative;overflow: hidden;}
.n-banner .image{background-repeat: no-repeat;background-position: center;background-size: cover;width: 100%;height: 100%;
    animation: ani-scale 10s ease-in-out 0s infinite alternate;-webkit-animation: ani-scale 10s ease-in-out 0s infinite alternate;
}
.n-banner #text{
    position: absolute;width: 100%;text-align: center;z-index: 5;left:0px;top:40%;font-size: 55px;font-weight: bold;color: #00bd71;letter-spacing: 5px;
}
.n-banner .forYouContent{max-width: 914px;width: 47.6%;height: 100%;position: absolute;left:50%;top:0px;transform: translateX(-50%);}
.n-banner .forYouContent .Img1{width: 26.69%;position: absolute;left:42.77%;top:43.65%;}
.n-banner .forYouContent .dot-text{width: 24.5%;;font-size: 50px;color: #ffffff;text-align: center;position: absolute;transform: translate(-50%,50%);-webkit-transform: translate(-50%,50%)}
.n-banner .forYouContent .dot-text p{position: absolute;line-height: 60px;left:50%;top:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);white-space: nowrap;}
.n-banner .forYouContent .dot-text img{position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.n-banner .forYouContent .dot-box1{left:56%;top:26.2%}
.n-banner .forYouContent .dot-box2{right:12.47%;top:41.2%;transform: translate(50%,50%);-webkit-transform: translate(50%,50%)}
.n-banner .forYouContent .dot-box3{right:16.6%;top:77.77%;transform: translate(50%,50%);-webkit-transform: translate(50%,50%)}
/* .n-banner .forYouContent .dot-box3 p{top:65.5%;left:42%;} */
.n-banner .forYouContent .dot-box4{left:35.22%;top:70.55%;}
/* .n-banner .forYouContent .dot-box4 p{top:65.5%;left:62%;} */
.n-banner .forYouContent .dot-box5{left:11.15%;top:47.96%;}


.case-moudel{padding: 155px 0 100px;width: 100%;}
.case-moudel .case-item{display: flex;justify-content: space-between;width: 89.5%;margin: 0 auto;}
.case-moudel .case-item .case-box{width: 47.38%;margin-bottom: 80px;overflow: hidden;opacity: 0;}
.case-moudel .case-item .case-box .image-show{width: 100%;padding-top: 74.6%;position: relative;overflow: hidden;display: block;}
.case-moudel .case-item .case-box .image-show .image{position: absolute;left:0px;top:0px;width: 100%;height: 100%;transition: transform 0.5s ease-in;-webkit-transition: transform 0.5s ease-in;background-repeat: no-repeat;background-position: center;background-size: cover;}
.case-moudel .case-item .case-box .image-show:hover .image{transform: scale(1.05);-webkit-transform: scale(1.05);}
.case-moudel .case-item .case-box .p-title{font-size: 30px;color: #000000;margin-top: 10px;}
.case-moudel .case-item .case-box .p-text{font-size: 26px;color: #999;margin-top: 5px;}
#case-detail-module{width: 100%;}
#case-detail-module img{width: 100%;}
.case-moudel .case-item.ani .case-box:nth-child(1){
    animation: ani-top 0.5s ease-in-out 0s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0s forwards
}
.case-moudel .case-item.ani .case-box:nth-child(2){
    animation: ani-top 0.5s ease-in-out 0.2s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0.2s forwards
}


.case-text-content{height: 100vh;position: relative;}
.case-text-content .text-box{width: 50%;position: absolute;right: 4%;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.case-text-content .text-box p{font-size: 50px;color: #000000;opacity: 0;}
.case-text-content .text-box p:nth-child(1){
    animation: ani-top 0.5s ease-in-out 0s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0s forwards
}
.case-text-content .text-box p:nth-child(2){
    animation: ani-top 0.5s ease-in-out 0.2s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0.2s forwards;
}

.case-text-content .text-box p:nth-child(3),.case-text-content .text-box p:nth-child(4){
    animation: ani-top 0.5s ease-in-out 0.4s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0.4s forwards;
}
.forYour-moudle{padding-bottom: 240px;}
.forYour-moudle .item-box{margin-top: 178px;display: flex;align-items: flex-start;justify-content: center;}
.forYour-moudle .item-box .l-item{opacity: 0;width: 40%;padding-left: 15%;}
.forYour-moudle .item-box .title{font-size: 60px;color: #000;line-height: 90px;margin-bottom: 30px;}
.forYour-moudle .item-box p{font-size: 40px;color: #000;line-height: 58px;}

.forYour-moudle .item-box.ani .l-item:nth-child(1){
    animation: ani-top 0.5s ease-in-out 0s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0s forwards;
}

.forYour-moudle .item-box.ani .l-item:nth-child(2){
    animation: ani-top 0.5s ease-in-out 0.2s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0.2s forwards;
}


.contact-moudel{display: flex;background-color: #00bd71;}
.contact-moudel .l-cont{width: 46.66%;overflow: hidden;position: relative;vertical-align: top;}
.contact-moudel .l-cont .image{background-repeat: no-repeat;background-position: center;background-size: cover;width: 100%;
    transition: transform 0.8s ease-in-out;-webkit-transition: transform 0.8s ease-in-out;
}
.contact-moudel .l-cont:hover .image{transform: scale(1.05);-webkit-transform: scale(1.05);}
.contact-moudel .l-cont .text-cont{width: 70%;height: 100%;position: absolute;left:6%;top:0px;}
.contact-moudel .l-cont .text-cont .text1{font-size: 65px;line-height: 85px;color: #ffffff;margin-top: 47%;position: relative;}
.contact-moudel .l-cont .text-cont .text2{font-size: 25px;color: #b2b9b7;margin-top: 5.6%;}
.contact-moudel .l-cont .text-cont .text3{font-size: 25px;color: #b2b9b7;}
.contact-moudel .r-cont{vertical-align: top;flex: 1;padding-left: 8.7%;position: relative;z-index: 10;}
.contact-moudel .r-cont .title{font-size: 40px;color: #ffffff;margin-top: 120px;}
.contact-moudel .r-cont .p-title{font-size: 40px;color: #ffffff;margin-top: 15%;margin-bottom: 20px;}
.contact-moudel .r-cont .p-text1{font-size: 20px;color: #ffffff;}
.contact-moudel .r-cont .p-text2{font-size: 12px;color: #ffffff;margin-top: 5px;}

.home-title{font-size: 40px;text-align: center;color: #000000;margin-top: 120px;opacity: 0;}
.home-title.ani{
    animation: ani-top 0.5s ease-in-out 0s forwards;
    -webkit-animation: ani-top 0.5s ease-in-out 0s forwards
}



.footer-moudle{background-color: #00bd71;padding: 38px 0 0px;overflow: hidden;}
.footer-moudle .m-content{width: 89.5%;margin: 0 auto;position: relative;z-index: 10;}
.footer-moudle .top-box{display: flex;align-items: flex-start;justify-content: space-between;}

.footer-moudle .top-box .item-list .title{font-size: 22px;color: #ffffff;}
.footer-moudle .top-box .item-list .ewm-box{display: flex;align-items: flex-end;margin-top: 35px;}
.footer-moudle .top-box .item-list .ewm-box .text{font-size: 13px;color: #fff;width: 90px;margin-left: 18px;}
.footer-moudle .top-box .item-list .a-text{display: block;font-size: 20px;color: #ffffff;margin-bottom: 10px;}
.footer-moudle .lemoon-box{width: 100%;opacity: 0;}
.footer-moudle .lemoon-box .lemoon{width: 100%;
    
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
.footer-moudle .lemoon-box.ani{
    animation: ani-topLogo 1s ease-in-out 0s forwards;
    animation: ani-topLogo 1s ease-in-out 0s forwards;
}   
.footer-moudle .lemoon-box.ani .lemoon{
    -webkit-animation: bounce 2s infinite 0.5s ease-in-out;
    animation: bounce 2s infinite  0.5s ease-in-out; 
}

.recod-box{
    line-height: 40px;
    background-color: #00bd71;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
}
.recod-box a{color: #ffffff;position: relative;}


@keyframes bounce {
    0%,20%,53%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,43% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-30px,0) scaleY(1.1);
        transform: translate3d(0,-30px,0) scaleY(1.1)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-15px,0) scaleY(1.05);
        transform: translate3d(0,-15px,0) scaleY(1.05)
    }

    80% {
        -webkit-transform: translateZ(0) scaleY(.95);
        transform: translateZ(0) scaleY(.95);
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0) scaleY(1.02);
        transform: translate3d(0,-4px,0) scaleY(1.02)
    }
}

@keyframes ani-scale{
    0%{transform: scale(1);}
    100%{transform: scale(1.05);}
}
@-webkit-keyframes ani-scale{
    0%{-webkit-transform: scale(1);}
    100%{-webkit-transform: scale(1.05);}
}

@keyframes ani-top{
    0%{transform: translateY(50%);opacity: 0;}
    100%{transform: translateY(0%);opacity: 1;}
}
@-webkit-keyframes ani-top{
    0%{-webkit-transform: translateY(50%);opacity: 0;}
    100%{-webkit-transform: translateY(0%);opacity: 1;}
}

@keyframes ani-topLogo{
    0%{transform: translateY(100%);opacity: 0;}
    60%{transform: translateY(0%);}
    100%{transform: translateY(50%);opacity: 1;}
}
@-webkit-keyframes ani-topLogo{
    0%{-webkit-transform: translateY(100%);opacity: 0;}
    60%{-webkit-transform: translateY(0%);}
    100%{-webkit-transform: translateY(50%);opacity: 1;}
}


@media only screen and (max-width: 1700px){
    .header{height: 85px;}
    .header .logo{width: 50px}
    .header .menu-box li a{font-size: 24px;}
    .contact-header{height: 85px;}
    
    .case-moudel{padding: 120px 0 65px}
    .case-moudel .case-item .case-box{margin-bottom: 60px;}
    .case-moudel .case-item .case-box .p-title{font-size: 24px;}
    .case-moudel .case-item .case-box .p-text{font-size: 20px;}
    .case-text-content .text-box p{font-size: 35px;}
    .n-banner .forYouContent .dot-text{font-size: 30px;}
    .n-banner .forYouContent .dot-text img{width: 100%;}
    .n-banner .forYouContent .dot-text p{line-height: 40px;}
    /* .footer-moudle .lemoon{margin-top: 180px;} */
    
    .forYour-moudle{padding-bottom: 200px;} 
    .forYour-moudle .item-box{margin-top: 150px;}
    .forYour-moudle .item-box .title{font-size: 50px;}
    .forYour-moudle .item-box p{font-size: 30px;}

    
}

@media only screen and (max-width: 1600px){
    .n-banner .forYouContent .dot-text{font-size: 26px;}
    .n-banner .forYouContent .dot-text img{width: 100%;}
    .n-banner .forYouContent .dot-text p{line-height: 34px;}

    .forYour-moudle{padding-bottom: 150px;} 
    .forYour-moudle .item-box{margin-top: 100px;}
    .forYour-moudle .item-box .title{font-size: 40px;line-height: 60px;}
    .forYour-moudle .item-box p{font-size: 20px;line-height: 40px;}
}
@media only screen and (max-width: 1500px){
    .contact-moudel .l-cont .text-cont .text1{font-size: 50px;line-height: 70px;}
    .contact-moudel .l-cont .text-cont .text2{font-size: 20px;}
    .contact-moudel .l-cont .text-cont .text3{font-size: 20px;}
    .contact-moudel .r-cont .title{font-size: 30px;}
    .contact-moudel .r-cont .p-title{font-size: 30px;}
    .contact-moudel .r-cont .p-text1{font-size: 20px;}
}    


@media only screen and (max-width: 1350px){
    .header .menu-box li a{font-size: 20px;}
    .home-title{font-size: 30px;margin-top: 100px;}
    .case-moudel{padding: 100px 0 45px}
    .case-moudel .case-item .case-box{margin-bottom: 40px;}
    .case-moudel .case-item .case-box .p-title{font-size: 18px;}
    .case-moudel .case-item .case-box .p-text{font-size: 14px;}
    .case-text-content .text-box p{font-size: 26px;}
    /* .footer-moudle .lemoon{margin-top: 140px;} */
    
    .forYour-moudle{padding-bottom: 100px;} 
    .forYour-moudle .item-box{margin-top: 50px;}
    .forYour-moudle .item-box .title{font-size: 35px;line-height: 50px;margin-bottom: 20PX;}
    .forYour-moudle .item-box p{font-size: 16px;line-height: 30px;}

    .contact-moudel .l-cont .text-cont{width: 85%;}
    .contact-moudel .l-cont .text-cont .text1{font-size: 35px;line-height: 55px;}
    .contact-moudel .l-cont .text-cont .text2{font-size: 18px;}
    .contact-moudel .l-cont .text-cont .text3{font-size: 18px;}
    .contact-moudel .r-cont .title{font-size: 26px;margin-top: 80px;}
    .contact-moudel .r-cont .p-title{font-size: 26px;margin-top: 12%;}
    .contact-moudel .r-cont .p-text1{font-size: 16px;}
}


@media only screen and (max-width: 1080px) {
    .header{display: none !important;}
    .header-mobile{ display: block;}
    .contact-header{display: none!important;}   
    .n-banner{height: 20rem;}
    .mouse{display: none;}
    .home-title{font-size: .75rem;margin-top: 3rem;}
    .case-moudel{padding: 3rem 0 2rem}
    .case-moudel .case-item .case-box{margin-bottom: 1rem;}
    .case-moudel .case-item .case-box .p-title{font-size: 0.75rem;}
    .case-moudel .case-item .case-box .p-text{font-size: 0.6rem;}
    .footer-moudle{padding: 1rem 0 2.25rem;}
    .footer-moudle .top-box .item-list .title{font-size: 1.25rem;}
    .footer-moudle .top-box .item-list .a-text{font-size: 0.7rem;}
    
    /* .footer-moudle .lemoon{margin-top: 3rem;} */
    .case-text-content{height: 18rem;}
    .case-text-content .text-box{width: 90%;right: 50%;top:60%;transform:translate(50%,-50%)}
    .case-text-content .text-box p{font-size: 0.85rem;}
    .forYour-moudle .item-box .title{font-size: 1.75rem;}
    .forYour-moudle .item-box p{font-size: 1.25rem;}
    .mt-80{margin-top: 2rem;}
    #shadow-mouse{display: none;}
    
    .forYou .image{height: 100%;}
    .n-banner .forYouContent{width: 90%;}
    .n-banner .forYouContent .Img1{width: 8rem;left:50%;transform: translateX(-50%);}
    .n-banner .forYouContent .dot-text{width: 5.45rem;font-size: 1.25rem;line-height: 1.1rem;}
    .n-banner .forYouContent .dot-box1{left:50%}
    .n-banner .forYouContent .dot-box2{top:53.2%}
    .n-banner .forYouContent .dot-box3{right: 20.6%;top: 80.77%;}
    .n-banner .forYouContent .dot-box4{left: 20.6%;top: 80.77%;}
    .n-banner .forYouContent .dot-box5{top:53.2%}

    .n-banner .forYouContent .dot-text p{line-height: 1.35rem;}

    .contact-moudel{margin-top: 3.35rem;margin-bottom: 0.35rem;}
    
}

@media only screen and (max-width: 900px) {
    .contact-moudel{display: block;}
    .contact-moudel .l-cont{width: 100%;height: 7.5rem;display: block;overflow: hidden;}
    .contact-moudel .l-cont .text-cont{left:1.25rem}
    .contact-moudel .l-cont .text-cont .text1{margin-top: 1.25rem;font-size: 1rem;line-height: 1rem;}
    .contact-moudel .l-cont .text-cont .text2{margin-top: 0.75rem;font-size: 0.6rem;}
    .contact-moudel .l-cont .text-cont .text3{font-size: 0.6rem;}
    .contact-moudel .r-cont{height: 12rem;padding-left: 1.25rem;}
    .contact-moudel .r-cont .title{font-size: 0.85rem;margin-top: 1.1rem;}
    .contact-moudel .r-cont .p-title{font-size: 0.65rem;margin-top: 1rem;margin-bottom: 0.25rem;}
    .contact-moudel .r-cont .p-text1{font-size: 0.6rem;}
    .contact-moudel .r-cont .p-text2{font-size: 0.5rem;}
}
@media only screen and (max-width: 750px) {
    .case-moudel .case-item{display: block;}
    .case-moudel .case-item .case-box{width: 100%;}
    
    .forYour-moudle .item-box{display: block;margin-top: 0;}
    .forYour-moudle .item-box .l-item{width: 100%;padding: 0 2rem;margin-top: 1rem;}
}


@media only screen and (max-width: 600px){
    
    .footer-moudle .top-box{display: block;}
    .footer-moudle .top-box .item-list .title{text-align: center;}
    .footer-moudle .top-box .item-list .ewm-box{display: block;margin-top: 0.85rem;}
    .footer-moudle .top-box .item-list .ewm-box img{width: 9.5rem;display: block;margin: 0 auto 0;}
    .footer-moudle .top-box .item-list .ewm-box .text{width: 100%;text-align: center;margin-left: 0;margin-top: 0.65rem;font-size: 0.95rem;}
    .footer-moudle .top-box .item-list .a-text{display: inline-block;margin: 0.35rem 0.1rem 0;}

}