@charset "utf-8";
/*updown*/
.updown {position: absolute;bottom:100px;left:50%;z-index: 999;}
.updown a{
    opacity: 1;display: inline-block;-webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font : normal 400 20px/1 'Josefin Sans', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
    color: #999;
}
.updown .s-icon {padding-top: 60px;}
.updown .s-icon span {
    position: absolute;
    top: 0;
    left: 50%;
    width:26px;
    height: 45px;
    margin-left: -13px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
.updown .s-icon span::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: '';
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
}

.banner{width: 100%;height:100vh;}
.index-banner {width: 100%;}
.index-banner .item {
    width: 100%;height:100vh;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    outline: none;
    -webkit-animation: fadeOutIn 1s both;
    animation: fadeOutIn 1s both;
}
.index-banner .item::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;z-index: 1;
}
.index-banner .item .img{width: 100%;position: relative;z-index: 1;}
.index-banner .item .mobile-img{width: 100%;}
.index-banner .item .text {
    text-align: left;
    position: absolute;
    z-index: 10;
    width:1280px;
    height: 100%;left:50%;top:30%;margin-left: -640px
}
.index-banner .item h4 {
    font-size: 60px;width: 100%;
    line-height:75px;
    color: #222;
    margin-bottom:30px;
    font-weight:550;
    -webkit-animation: fadeOutInUp 1s both;
    animation: fadeOutInUp 1s both;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
.index-banner .item p {
    display: block;
    width: 100%;
    color: #222;
    font-size:30px;
    font-weight: 500;
    line-height: 45px;
    margin-bottom:60px;
    -webkit-animation: fadeOutInUp 1s both;
    animation: fadeOutInUp 1s both;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.index-banner .item a.left{margin:0 auto 0 0;}
.index-banner .item a.center{margin:0 auto;}
.index-banner .item a.right{margin:0 0 0 auto;}
.index-banner .item a{width:150px;font-size:18px;border: 1px solid transparent;color:#fff;margin-right:20px;text-align: center;font-weight:400;display: inline-block;line-height:45px;border-radius:6px;background-color:var(--color-2);box-shadow: 0 16px 32px -12px #0055ff4d;}
.index-banner .item a i{font-size:2rem;margin-left:5px;font-weight:400;}
.index-banner .item a:last-child{
    cursor: pointer;
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    transition: background-color .2s;
    color: var(--color-2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:1px solid #fff;
    background-color: rgba(255,255,255,.8);
    -webkit-box-shadow: 0 16px 32px -12px rgb(190 196 207 / 28%);
    box-shadow: 0 16px 32px -12px rgb(190 196 207 / 28%);
}
.index-banner .item a:last-child i{font-size: 1.8rem;}
@media (max-width: 1440px) {
    .index-banner .item .text {width:1200px;margin-left: -600px;}
}
@media (max-width: 1280px) {
    .index-banner .item .text {width:100%;margin-left: 0;padding:70px 60px;left: 0}
}
@media (max-width: 991px) {
    .banner{width: 100%;height:55vh;margin-top: 65px;}
    .index-banner .item {background-image: none!important;height:55vh;width: 100%;}
    .index-banner .item .text {padding:60px 20px 0 20px!important;text-align: center;left:0;top:0}
    .index-banner .item h4 {font-size:2.2rem!important;margin-bottom:20px!important;line-height:3rem;letter-spacing: 0!important;}
    .index-banner .item p {font-size: 1.6rem!important;margin-bottom:40px!important;line-height:2.5rem;letter-spacing: 0!important;width:100%;}
    .index-banner .item a{font-size:1.4rem;margin-right: 10px;width:130px;line-height:40px;border-radius:4px;font-weight: 550}
    .index-banner .item a i{font-size:1.2rem;margin-left:2px;}
    .index-banner .item a.left{margin:0 auto;}
    .index-banner .item a.right{margin:0 auto;}
    .index-banner .item .mobile{display: block;width: 100%;-webkit-animation: fadeOutInUp 0.2s both;animation: fadeOutInUp 0.2s both;}
    .index-banner .item .mobile img{width: 100%}
}
.index-banner .item.slick-active h4 {-webkit-animation: fadeInDown 0.6s both 0.2s;animation: fadeInDown 0.6s both 0.2s;}
.index-banner .item.slick-active p {-webkit-animation: fadeInUp 1s both 0.6s;animation: fadeInUp 1s both 0.6s;}
.index-banner .item.slick-active a {-webkit-animation: fadeInUp 1.4s both 1s;animation: fadeInUp 1.4s both 1s;}
.index-banner .item.slick-active {animation: zoom-in 11s;}
@keyframes zoom-in {
    0% {
        background-size: 130% 130%; /* 背景图初始大小 */
    }
    100% {
        background-size: 100% 100%; /* 背景图放大到 1.3 倍 */
    }
}
@keyframes scalebg {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1.01);
    }

    40% {
        transform: scale(1.1);
    }

    45% {
        transform: scale(1.1);
    }

    90% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}
.slick-slider {
    float: left;
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track {position: relative;top: 0;left: 0;display: block;}
.slick-track:before,.slick-track:after {display: table;content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none;float: left;height: 100%;min-height: 1px;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block;height: auto;border: 1px solid transparent;}
.index-banner .NextArrow,.index-banner .PrevArrow{
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: none;
    background:rgba(0,0,0,0.15);
    text-align: center;
    z-index: 999;
    outline: none;
    bottom: 50%;
    opacity: 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.index-banner .NextArrow i,.index-banner .PrevArrow i{font-size:2.8rem;color:#fff;}
.index-banner .PrevArrow{left:0;}
.index-banner .NextArrow{right:0;transform: rotate(-180deg)}
.index-banner .NextArrow:hover,.index-banner .PrevArrow:hover{opacity: 1;}
.index-banner .NextArrow:hover i,.index-banner .PrevArrow:hover i{color: #fff}
.index-banner .slick-dots {position: absolute;height:10px;bottom:50px;width:100%;padding: 0;list-style-type: none;text-align:center}
.index-banner .slick-dots li button {display: none;}
.index-banner .slick-dots li {width:10px;height:10px;background-color:rgba(255,255,255,1);border-radius: 50%}
.index-banner .slick-dots li:last-child{margin-right: 0;}
.index-banner .slick-dots li.slick-active {background-color:var(--color-3);}

@media (max-width: 1280px) {
    .index-banner .slick-dots {width:100%;margin-left:0;padding: 0 60px;left: 0}
}
@media (max-width: 991px) {
    .index-banner .NextArrow,.index-banner .PrevArrow{opacity:0;}
    .index-banner .slick-dots {width:100%;left:0;bottom:40px;margin-left: 0;padding: 0 0 0 20px;text-align: left}
    .index-banner .slick-dots li {width:8px;height:8px;}
    .index-banner .item.slick-active .mobile {-webkit-animation: fadeIn 1s both;animation: fadeIn 1s both ;}
    .index-banner .item.slick-active {-webkit-animation: fadeIn 0.1s both;animation: fadeIn 0.1s both;}
}
.about{background-color: #f1f3f5;border-bottom-right-radius:400px;}
.text-img{}
.text-img .img{width: 45%}
.text-img .img img{width: auto;max-width: 100%;border-radius: 12px}
.text-img .text{width: 50%}
.text-img .text h6{font-size: 35px;font-weight: 550;margin-bottom:30px;text-transform: uppercase;font-family: 'Oswald', sans-serif;}
.text-img .text p{font-size: 18px;line-height: 30px;margin-bottom: 20px;}
.text-img .text a{
    width: 140px;line-height: 40px;
    border-radius: 35px;text-align: center;display: block;
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(20px);font-size: 14px;
    background-image:-webkit-linear-gradient(45deg, var(--color-1), var(--color-3));
    background-image:linear-gradient(45deg, var(--color-1), var(--color-3));
    box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);
    -webkit-box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);text-transform: uppercase;
    color: #fff;
}

.Maintenance{background-color: #f8f9fa;border-top-left-radius:400px;}

.Business{width: 100%;height:600px;position: relative;background-color:var(--color-2);background-image: url(../images/banner.jpg);background-size:cover;background-position: center;}
.Business-ul{position: relative;z-index: 3}
.Business-ul li{
    background-color: rgba(255,255,255,.75);
    box-shadow: 0 16px 32px -5px rgba(51,102,204,0.2);
    border-radius: 12px;
    position: relative;
    border:2px solid #fff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);cursor: pointer;
}
.Business-ul li:hover{background-color:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,0.5);}
.Business-ul li i{font-size: 5rem;position: absolute;right:20px;color: var(--color-2);top:10px;}
.Business-ul li h6{font-size:25px;font-weight: 550;margin-bottom:30px;text-transform: uppercase;position: relative}
.Business-ul li p{font-size: 15px;line-height: 25px;margin-bottom:40px}
.Business-ul li:hover i,.Business-ul li:hover h6,.Business-ul li:hover p{color:#fff;}
.Business-ul li:hover i{top:140px;font-size: 6rem;font-weight: 300}
.Business-ul li:hover h6{margin-bottom:10px;font-size: 28px}
.Business-ul li:hover p{font-size: 16px}
.Business-ul li a{
    width: 120px;line-height: 40px;
    border-radius: 5px;text-align: center;display: block;
    background-color:#f8f9fa;font-size: 14px;
    color:#495057;
}
.Business-ul li a:hover{background-color: var(--color-2);color: #fff}
.banner_waves{width: 100%;height:600px;position:absolute;left:0;top:0;z-index:1;overflow:hidden;}
.waves {width: 100%;height:580px;z-index: -1;}

.service{background-color: #fff}
.service-ul{flex-wrap: wrap;}
.service-ul li{text-align: center;width:13.5%;padding:20px 10px;background-color: #f8f9fa;border-radius: 8px;}
.service-ul li i{font-size: 6rem;color: var(--color-1);display: block;}
.service-ul li b{font-size:15px;display: block;}
.more{display: block;border-radius: 30px;margin: 20px auto;width: 200px;text-align: center;line-height: 50px;
    background-image:-webkit-linear-gradient(45deg, var(--color-1), var(--color-3));
    background-image:linear-gradient(45deg, var(--color-1), var(--color-3));
    box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);
    -webkit-box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);
    color: #fff!important;
    font-size: 16px;font-weight: 500; }
.more:hover{width: 220px}
/*news*/
.news{width: 100%;}
.news-ul{padding:30px 0;width: 100%;margin: 0 -10px;}
.news-ul li{display: block;margin: 25px 10px;}
.news-ul li a{outline: none;
    display: block;
    padding:0 30px 30px 30px;
    position: relative;
    background-color: #fff;
    -webkit-box-shadow:0 8px 15px 0 rgba(50, 50, 50, 0.05);
    box-shadow:0 8px 15px 0 rgba(50, 50, 50, 0.05);border: 1px solid #eee;
}
.news-ul li a:hover{transform: translateY(10px);-webkit-transform: translateY(10px)}
.news-ul li .time{text-align: center;width:70px;position: relative;top:-30px;background-color:var(--color-8);color: #fff;}
.news-ul li .time span{display: block;font-size: 30px;font-weight: 550;background-color:var(--color-1);border-bottom: 1px solid rgba(255,255,255,0.5);padding-top: 5px;}
.news-ul li .time p{font-size: 14px;font-weight: 400;line-height:22px;}
.news-ul li .info{min-height: 120px;position: relative;}
.news-ul li .info h6{font-size:16px;line-height:22px;font-weight:550;color:#212529;margin-bottom:10px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}
.news-ul li .info:after{content: '';width: 50px;height: 2px;background-color:var(--color-1);position: absolute;left: 0;bottom: -10px;}
.news-ul li .info p{font-size: 14px;line-height: 22px;color:#495057;margin-bottom: 20px;font-weight:400;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;}
.news-ul li a:hover .info h6{color:var(--color-4);}
.news-ul .NextArrow,.news-ul .PrevArrow{
    position: absolute;
    width: 40px;
    height:40px;border-radius: 50%;
    line-height:40px;
    background:transparent;border: none;top:50%;margin-top: -20px;
    text-align: center;
    z-index: 999;
    outline: none;
}
.news-ul .NextArrow i,.news-ul .PrevArrow i{font-size:3rem;color:#868e96;font-weight: 400;}
.news-ul .NextArrow:hover i,.news-ul .PrevArrow:hover i{color:#495057;}
.news-ul .NextArrow{right:-50px;transform: rotate(-180deg)}
.news-ul .PrevArrow{left:-50px;}
@media (max-width: 1440px) {
    .news{padding:50px 0 0 0;}
    .news-ul li .time{width:60px;}
    .news-ul li .time span{font-size: 30px;}
    .news-ul li .info h6{font-size:16px;line-height:25px;}
}
@media (max-width: 991px) {
    .news{padding:20px 0;}
    .news-ul{padding:20px 0 0 0;margin: 0}
    .news-ul li{margin:15px 10px;}
    .news-ul li a{padding:0 20px 20px 20px;}
    .news-ul li a:hover{transform: translateY(0);-webkit-transform: translateY(0)}
    .news-ul li .time{width:80px;top:-20px;}
    .news-ul li .time span{font-size:2.5rem;}
    .news-ul li .time p{font-size:1.5rem;line-height:2.5rem}
    .news-ul li .info{min-height:100px;}
    .news-ul li .info h6{font-size:1.4rem;line-height:2.2rem;}
    .news-ul li .info:after{height:1px;}
    .news-ul li .info p{font-size: 1.4rem;line-height:2rem;}
    .news-ul .NextArrow{right:-10px}
    .news-ul .PrevArrow{left:-10px;}
}

/*contact-form*/
.contact-form{background-color:#495057;background-image: url(../images/form-bg.jpg);background-size: cover;background-position: center;position: relative;}
.contact-form:after{content: '';width:100%;height: 100%;position: absolute;background-color: rgba(0,65,150,.5);left: 0;top:0;z-index: 1;}
.contact-form .container{align-items: center;position: relative;z-index: 2}
.contact-form form{width:50%;position: relative;background-color:rgba(255,255,255,0.8);backdrop-filter: blur(6px);border: 2px solid #fff;padding:40px;border-radius: 8px;}
.contact-form form h4{font-size: 30px;font-weight:550;color:#495057;margin-bottom:20px;text-transform: uppercase }
.contact-form form h4 i{font-size: 3.2rem;font-weight: 400;margin-right:10px;}
.contact-form form label{display: block;width:100%;margin:10px 0;}
.contact-form form input{width: 100%!important;font-weight: 400;border: 1px solid #aaa;text-indent: 20px;line-height:40px;height:40px;background-color:rgba(0,0,0,0);color:#495057;font-size: 14px;}
.contact-form form textarea{font-weight: 400;width: 100%;border: 1px solid #aaa;height:80px;background-color: transparent;outline: none;color:#212529;font-size: 14px;}
.contact-form form textarea{padding: 20px;}
.contact-form form .flex-sb{width: 100%;flex-wrap: wrap}
.contact-form form .flex-sb p{width: 49%;margin-right: 2%;margin-bottom: 1%}
.contact-form form .flex-sb p:nth-child(2n){margin-right: 0;}
.contact-form form b{font-size: 16px;font-weight: 500;color:#495057;margin-bottom: 5px;display: block}
.contact-form form span{color:var(--color-1);font-size: 16px;margin-left: 5px;position: relative;top:4px;font-weight: 400;}
.contact-form form button{
    border: none;text-transform: uppercase;
    width: 180px;height:50px;line-height: 45px;color: #fff;font-size:18px;
    font-weight: 500;outline: none;border-radius:30px;
    background-image:-webkit-linear-gradient(45deg, var(--color-1), var(--color-3));
    background-image:linear-gradient(45deg, var(--color-1), var(--color-3));
    box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);
    -webkit-box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45);
}
.contact-form form button i{font-size: 2.2rem;margin-left: 10px;}
.contact-form .info{width:50%;padding: 0 0 0 80px;}
.contact-form .info h4{font-size: 30px;font-weight:550;color: #fff;margin-bottom:20px;text-transform: uppercase}
.contact-form .info h4 i{font-size: 3.5rem;font-weight: 400;margin-right:10px;}
.contact-form .info hr{border-top: 1px dashed rgba(255,255,255,0.2);border-bottom: 1px dashed rgba(255,255,255,0.6);margin:20px 0;}
.contact-form .info p{font-size: 16px;line-height: 30px;color:rgba(255,255,255,0.8);font-weight: 400;}
.contact-form .info h6{font-size: 18px;line-height: 36px;color:rgba(255,255,255,0.8);}
.contact-form .info a{color:rgba(255,255,255,0.8);}
.contact-form .info h6 i{font-size: 1.8rem;margin-right: 5px;display: inline-block;width: 30px;}
@media (max-width: 1440px) {
    .contact-form{padding:50px 0;}
    .contact-form form h4{font-size: 25px;}
    .contact-form .info h4{font-size: 25px;}
}
@media (max-width: 991px) {
    .contact-form{padding:25px 0 0 0;}
    .contact-form .container{flex-wrap: wrap;}
    .contact-form form{padding: 20px!important;width: 100%!important;}
    .contact-form form h4{font-size: 2.2rem;margin-bottom:20px;}
    .contact-form form h4 i{font-size: 2.5rem;}
    .contact-form form button{width: 100%;}
    .contact-form form button i{color: #fff;}
    .contact-form .container .info{width: 100%;padding:20px 0!important;margin-bottom: 0;}
    .contact-form .info h4{font-size: 2rem!important;margin-bottom:10px!important;}
    .contact-form .info h4 i{font-size: 2.5rem!important;}
    .contact-form .info p{font-size: 1.4rem!important;line-height:2rem!important;}
    .contact-form .info h6{font-size: 1.5rem;line-height:2.5rem;}
    .contact-form .info h6 i{font-size: 1.6rem;width:25px;}
    .contact-form .info hr{margin:15px 0;}
    .contact-form form .form{width: 100%;padding: 20px;}
    .contact-form form .form label{display: block;width:100%;margin:0;flex-wrap: wrap;}
    .contact-form form .form input{line-height:40px;height:40px;width:100%;margin-right:2%;font-size: 1.2rem!important;font-family: arial, sans-serif;border: 1px solid #eee;}
    .contact-form form .form textarea{height:100px;font-size: 1.4rem;margin-bottom: 10px;border: 1px solid #eee;padding:10px;}
    .contact-form form .form button{width: 50%;height: 40px;line-height: 40px;font-size:1.4rem;box-shadow:2px 5px 10px rgba(253,117,4,0.2);-webkit-box-shadow:2px 5px 10px rgba(253,117,4,0.2);-moz-box-shadow:2px 5px 10px rgba(253,117,4,0.2);}
    .contact-form form .form button i{font-size:1.8rem;}
    .contact-form form .form input::-webkit-input-placeholder{font-size:1.2rem;font-family: arial, sans-serif;}
    .contact-form form .form input::-moz-placeholder{font-size:1.2rem;font-family: arial, sans-serif;}
    .contact-form form .form input:-ms-input-placeholder{font-size: 1.2rem;font-family: arial, sans-serif;}
}