@charset "utf-8";
.layui-layer {transition: none;}
/* title */
.index-title {padding-bottom: 3rem; }
.index-title h3 {position: relative; font-size: 36px;font-weight: bold; color: var(--default);}
.index-title span { margin-top: 2.8rem; display: inline-block; width: 7rem; height: 1px; background-color: var(--default);}
.index-title p { margin-top: 2.8rem; position: relative; margin-top: 2rem; font-size: 1.8rem; line-height: 1.6; color: #707070; text-transform: uppercase;}
.index-title-white h3{color: #fff;}
.index-title-white p {color: #fff;}
.index-title-white span{background-color: #fff;}
.index-title-center{text-align: center;}
@media (max-width:1400px) {
    .index-title h3 { font-size: 24px;}
}

@media (max-width:768px) {
    .index-title {padding-bottom: 30px;}
    .index-title h3 {font-size: 22px;}
    .index-title p { font-size: 14px;}
}
@media (max-width:640px) {
}

.index-more {padding-top: 60px;text-align: center;}
.index-more a {position: relative;display: inline-block;padding: 0 35px;line-height: 55px; font-size: 16px;border: 1px solid #999; color: #999; border-radius: 4px;}
.index-more a i{display: inline-block; margin-left: 0; font-size: 24px; vertical-align: middle; transition: .8s; }
.index-more a:hover { background-color: var(--fuColor); border-color: var(--fuColor); color: #fff; box-shadow: 0 13px 10px rgba(0, 140, 214,.4);}
.index-more a:hover i{ transform: translateX(8px); color: #fff;}

.an-poster{position: absolute; top: 0; right: 0; z-index: 9; content: ''; width: 0; height: 100%; background-color: #f5f5f5;}
.goPoster {
	-webkit-animation-name: picPoster;
	animation-name: picPoster;
	animation-timing-function: cubic-bezier(0.46, 0.64, 0.18, 0.93);
}
@keyframes picPoster{
	0%{width: 100%;}
	100%{width: 0%;}
}

/* banner */
.index-banner{position: relative; overflow: hidden;}
.index-banner .swiper-slide{position: relative; transition: none;overflow: hidden;}
.index-banner-imgs{position: relative;}
.index-banner-imgs img{width: 100%;}
.index-banner-imgs img:nth-child(2){position: absolute; top: 0; left: 0;z-index: 1; }
@media (max-width:768px) {
	.index-banner-imgs{display: none;}
}


/* 汽车动画 */
.index-banner-car{position: absolute; bottom: -6.7%; left: 22%; transform: translateX(0) rotate(-23deg);}
.index-banner-car .car-small{display: block; width: 60px; height: 40px; animation: 10s testCar infinite;}
.index-banner-car .car-small img{width: 100%;}
.index-banner-cars{position: absolute; top: 26%; right: -8%; transform: translateX(0) rotate(-23deg); z-index: 11;}
.index-banner-cars .car-big{ position: relative; display: block; width: 160px; height: 40px;transform: rotate(23deg); animation: 5s testCars 1; animation-fill-mode: forwards;}
.index-banner-cars .car-big img{width: 100%;}
.index-banner-cars .car-big .index-banner-point{bottom: 0; left: 40%;}

@keyframes testCar {
	0% {
		transform: translateX(0) rotate(23deg);
	}
	100% {
		transform: translateX(1800px) rotate(23deg);
	}
}

@keyframes testCars {
	0% {
		transform: translateX(0) rotate(23deg);
	}
	100% {
		transform: translateX(-1050px) rotate(23deg);
	}
}

@media (max-width:1400px) {
    @keyframes testCars {
	0% {
		transform: translateX(0) rotate(23deg);
	}
	100% {
		transform: translateX(-550px) rotate(23deg);
	}
}
}


@media (max-width:768px) {
	.index-banner-car,
	.index-banner-cars{display: none;}
}
/* 标题 */
.index-banner-title{ position: absolute; top: 50%; left: 0; padding-left: 18rem; width: 100%;transform:translateY(-50%);}
.index-banner-title h3{ font-size: 6.4rem; line-height: 1.2; color: var(--default); opacity:0; visibility: hidden; transform:translateY(-50px); transition: 1s;}
.index-banner-title p{ margin-top: 2rem; font-size: 1.8rem; line-height: 1.2; text-transform: uppercase; color: #666; transform:translateY(-50px);transition: 0.5s;}
.index-banner-title a{ position: relative; margin-top: 4.5rem; display: inline-block; padding: 0 5rem; line-height: 5.5rem; font-size: 1.8rem; color: var(--default); border-radius: 56px; border: 1px solid var(--default);  transform:translateY(-20px); opacity: 0; transition-delay: .3s; visibility: hidden; overflow: hidden;}
.index-banner-title a span{position: relative;z-index: 1;}
.index-banner-title a::before{position: absolute; bottom: 0; left: 0;z-index: 1; content: ''; width: 0; height: 100%; background-color: var(--default); transition: .3s;}
.index-banner-title a:hover span{color: #fff;}
.index-banner-title a:hover::before{width: 100%;}

.ani-slide .index-banner-title h3{transform:translateY(0); opacity:1; visibility: visible;}
.ani-slide .index-banner-title p{transform:translateY(0); opacity:1; visibility: visible;}
.ani-slide .index-banner-title a{transform:translateY(0); opacity:1;visibility: visible}

@media (max-width:1700px) {
	.index-banner-title{  padding-left: 7rem;}
	.index-banner-title h3{font-size: 4.8rem;}
}

@media (max-width:1200px) {
	.index-banner-title h3{font-size: 3.2rem;}
	.index-banner-title p{ font-size: 1.4rem;}
	.index-banner-title a{ padding: 0 3rem; line-height: 4rem; font-size: 1.4rem;}
}

@media (max-width:860px) {
	.index-banner-title h3{font-size: 2.4rem;}
	.index-banner-title p{ font-size: 1.6rem;}
	.index-banner-title a{ padding: 0 2rem; line-height: 3.2rem; font-size: 1.2rem;}
}

@media (max-width:768px) {
	.index-banner-title{  padding-left: 1.5rem;}
}

/* 定位点 */
.index-banner-points{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}
.index-banner-point{position: absolute;}
.index-banner-point span { display: block;width: 1.8rem;height: 1.8rem;background: #fff;border: .7rem solid #001eb4;border-radius: 50%; cursor: pointer; }
.index-banner-point span::before,
.index-banner-point span::after {content: ''; display: block; position: absolute; left: 50%;top: 50%; z-index: -1;transform: translate(-50%, -50%);width: 2.5rem;height: 2.5rem;border-radius: 50%;background: rgba(0, 30, 180, 0.2);}

.index-banner-point span::before{animation: boderM 3s .75s infinite;}
.index-banner-point span::after{animation: boderM 3s infinite;}
@keyframes boderM {
    0% {transform: translate(-50%, -50%) scale(1);opacity: 0}
    20% {opacity: 1}
    75% {transform: translate(-50%, -50%) scale(2);opacity: 0}
    100% {opacity: 0}
}

.index-banner-points .index-banner-point:nth-child(2){bottom: 35.2%; left: 43.5%;}
.index-banner-points .index-banner-point:nth-child(3){bottom: 70%; left: 56.5%;}
.index-banner-points .index-banner-point:nth-child(4){bottom: 60%; right: 31%;}
.index-banner-points .index-banner-point:nth-child(5){bottom: 24%; right: 28.5%;}
.index-banner-points .index-banner-point:nth-child(6){bottom: 25%; right: 15.8%;}

/*  */
.index-banner-point-tips{position: absolute; top: -12px; left: 25px; width: 200px; height: 45px; justify-content: space-between; line-height: 45px; padding:0 15px; border-radius: 45px; background-color: var(--default); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition:.3s}
.index-banner-point-tips b{font-weight: normal;}
.index-banner-point-tips b i{font-size: 24px; vertical-align: middle;}

.index-banner-point-info{display: none;}


.index-banner-point:hover .index-banner-point-tips{opacity: 1; visibility: visible;}
@media (max-width:768px) {
	.index-banner-point{display: none;}
}

.index-banner-mask{position: absolute; right: -800px; top: 0; z-index: 99; width: 800px; padding:10% 6% 0; height: 100%; background-color: rgba(12, 40, 126,.9); opacity: 0; visibility: hidden; transition:.3s}
.close-index-banner-mask{position: absolute; top: 45px; right: 45px; width: 50px; height: 50px; cursor: pointer; }
.close-index-banner-mask span {position: absolute;top: 24px;left: 0;width: 100%;height: 2px;background-color: #fff;}
.close-index-banner-mask span:first-child {transform: rotate(45deg);}
.close-index-banner-mask span:last-child {transform: rotate(-45deg);}
.index-banner-work p{ margin-bottom: 25px; line-height: 1.8; font-size: 18px; color: #fff;}
.index-banner-work img{width: 100%;}

.actvie-index-banner-mask{ right: 0; opacity: 1; visibility: visible;}
/*  */
.index-banner-imgs-m{display: none;}
.index-banner-imgs-m img{width: 100%;}
@media (max-width:1500px) {
	.index-banner-mask{ padding:6% 6% 0;}
}

@media (max-width:1500px) {
	.index-banner-mask{width:600px}
	.index-banner-work p{ line-height: 1.6; font-size: 16px;}
}
@media (max-width:1200px) {
	.index-banner-mask{width:400px}
	.index-banner-work p{ line-height: 1.6; font-size: 14px;}
}


@media (max-width:768px) {
	.index-banner-imgs-m{display: block;}
}


/* about */
.index-about-bg{background-image: url(../images/about-bg.png);}
.index-about-content{max-width: 1200px; margin: 0 auto;}
.index-about-content p{line-height: 1.8; font-size: 1.8rem; text-align: center; color:#666;}

.index-about-res{margin-top: 60px;}
.index-about-res ul{justify-content: space-between;}
.index-about-res ul li{width: 22%; animation: 2s tot infinite ease-in-out;}
.index-about-res ul li:nth-child(2n+1){padding-top: 10rem; animation-delay: .2s;}

.index-about-res-item{ position: relative; padding-left: 1.5rem; height: 25rem; color: var(--default); font-size: 1.8rem;}
.index-about-res-item::before,
.index-about-res-item::after{position: absolute; top: 0; left: 0; content: ''; width: 4px;}
.index-about-res-item::before{height: 100%; background: linear-gradient(180deg, #E47C13 0%, rgba(228, 124, 19, 0) 100%);}
.index-about-res-item::after{left: -4px; height: 50px; background-color: var(--fuColor);}

.index-about-res-item h3 span{ margin-right: 1rem; font-size: 4.8rem;}
.index-about-res-item p{margin-top: 1.5rem; font-size: 1.8rem;}

@media (max-width:860px) {
	.index-about-res ul li:nth-child(2n+1){padding-top: 5rem;}
	.index-about-res-item{height: 20rem;}
	.index-about-res-item h3 span{ margin-right: .5rem; font-size: 3.2rem;}
	.index-about-res-item p{ line-height: 1.6; font-size: 1.4rem}
}

@keyframes tot{
	0%{transform: translateY(0);}
	40%{transform: translateY(20px);}
	100%{transform: translateY(0);}
}

/* case */
.index-case-item{width: 25%; justify-content: center; align-items: center;}
.index-case-item ul li{padding: 10px 0;}
.index-case-item ul li a{cursor:inherit;}
.index-case-item ul li img{max-width: 100%;}
.index-case-item-2{width: 50%;}
.index-case-item-2 img{width: 100%;}

.index-case-hide{display: none;}

.index-case-more{background-color: #F6F6F5; text-align: center;}
.index-case-more span{display: inline-block; width: 50px; height: 50px; line-height: 47px; border-radius: 50%; border: 1px solid var(--fuColor); font-size: 3rem; color: var(--fuColor);}
.index-case-more h3{ margin-top: 2rem; color: var(--fuColor); font-size: 2.4rem;}

.index-case-more:hover{background-color: var(--fuColor);}
.index-case-more:hover span{border-color: #fff; color: #fff;}
.index-case-more:hover h3{ color: #fff;}

@media (max-width:1400px) {
	.index-case-item{width: 33.33%;}
	.index-case-item-2,
	.index-case-item:last-child{width: 66.666%;}
}

@media (max-width:1100px) {
	.index-case-item ul li img{max-width: 100%; height: 50px;}
}

@media (max-width:860px) {
	.index-case-item ul li img{max-width: 100%; height: 40px;}
}

@media (max-width:768px) {
	.index-case-item{width: 100%;}
	.index-case-item-2,
	.index-case-item:last-child{width: 100%;}
	.index-case-item ul{display: flex; }
	.index-case-item ul li img{max-width: 100%; height: auto;}
	.index-case-more{padding: 1.5rem 0;}
	.index-case-more span{display: inline-block; width: 40px; height: 40px; line-height: 37px; font-size: 2.4rem; color: var(--fuColor);}
	.index-case-more h3{ margin-top: 1rem; color: var(--fuColor); font-size: 1.6rem;}
	
}

/* safe */
.index-safe-bg{background-image: url(../images/safe-bg.png);}
.index-safe{justify-content: space-between;}
.index-safe-left{width: 19%;}
@media (max-width:1400px) {
	.index-safe-left{width: 22%;}
}
@media (max-width:960px) {
	.index-safe-left{width: 40%;}
}

@media (max-width:640px) {
	.index-safe-left{width: 100%;}
}

.index-safe-swiper{position: relative; width: 78%; padding-left: 10rem;}
@media (max-width:1400px) {
	.index-safe-swiper{ padding-left: 6rem;}
}
@media (max-width:960px) {
	.index-safe-swiper{position: relative; width: 58%;padding-left: 4rem;}
}

@media (max-width:640px) {
	.index-safe-swiper{width: 100%;padding-left: 0;}
}

/*  */
.index-safe-swiper-arr{ padding: 25px 0 0;}
.index-safe-swiper-arr .swiper-button-next,
.index-safe-swiper-arr .swiper-button-prev{position: static; top: inherit; left: inherit; right: inherit; bottom: inherit; margin: 0; background: none; width: 50px; height: 50px; border-radius: 50%;  justify-content:center; align-items:center;}
.index-safe-swiper-arr .swiper-button-next{margin-left: 10px;}
.index-safe-swiper-arr .swiper-button-next i,
.index-safe-swiper-arr .swiper-button-prev i{ font-size: 4.2rem;}

.swiper-button-next:after,
.swiper-button-prev:after{display: none;}

.index-safe-item{position: relative; overflow: hidden;}
.index-safe-item>img{width: 100%;}
.index-safe-mask{position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 40px; background-color: #fff; transform: translateY(30px); opacity: 0; visibility: hidden; transition:.3s;}
.index-safe-mask h3{font-size: 2.4rem; color: var(--default);}
.index-safe-mask p{ margin-top: 2rem; line-height: 1.6; font-size: 1.8rem; color:#666;}
.index-safe-mask a{margin-top: 6rem; display: inline-block; }
.index-safe-mask a i{font-size: 3.2rem; color: var(--fuColor);}
.index-safe-title{padding-top: 2rem; transition:.3s;}
.index-safe-title h3{font-size: 2.2rem;}

@media (min-width:768px) {
	.index-safe-swiper .swiper-slide:hover .index-safe-item .index-safe-mask{transform: translateY(0); opacity: 1; visibility: visible; }
	.index-safe-swiper .swiper-slide:hover .index-safe-title{transform: translateY(20px); opacity: 0; visibility: hidden;}
}
@media (max-width:1200px) {
	.index-safe-mask{padding: 20px;}
	.index-safe-mask h3{font-size: 2rem;}
	.index-safe-mask p{ margin-top: 1.5rem; font-size: 1.4rem;}
	.index-safe-mask a{margin-top: 4rem;}
	.index-safe-title h3{font-size: 2rem;}
}

@media (max-width:768px) {
	.index-safe-mask{padding: 15px;}
	.index-safe-mask h3{font-size: 1.8rem;}
	.index-safe-mask p{ margin-top: 1rem; font-size: 1.2rem;}
	.index-safe-mask a{margin-top: 2rem;}
	.index-safe-mask a i{font-size: 2.2rem;}
	
	.index-safe-swiper .swiper-slide .index-safe-item .index-safe-mask{transform: translateY(0); opacity: 1; visibility: visible; }
	.index-safe-swiper .swiper-slide .index-safe-title{transform: translateY(20px); opacity: 0; visibility: hidden;}
	
}


/* news */
.index-news{padding-top: 3rem;}
.index-news-date span{ position: relative; display: inline-block; color: #ABABAB;}
.index-news-date span:first-child{padding-right: 10px; margin-right: 10px;}
.index-news-date span:first-child::before{position: absolute; right: 0; top: 1px; content: ''; width: 1px; height: 10px; background-color: #ABABAB;}

.index-news-title h3{ margin-top: 2rem; font-size: 2.4rem; line-height: 1.5; height: 7.2rem; color: #333; overflow: hidden; }
/*  */
.index-news-list{flex: 1; -webkit-flex:1; -ms-flex:1; padding-left: 8rem; height: 575px; overflow-y: auto; }
.index-news-list ul li{padding: 40px 0; border-bottom: 1px solid #D8D8D8;}
.index-news-list ul li:first-child{border-top: 1px solid #D8D8D8;}
.index-news-item{display: block;}

/*  */
.index-news-poster{width: 45%; border-bottom: 1px solid #D8D8D8; 
	flex-direction: column; 
	-ms-flex-direction: column;
	-webkit-flex-direction: column; 
	ustify-content: space-between ;
	-ms-justify-content: space-between; 
	-webkit-justify-content: space-between;
} 

.index-news-pic{ position: relative; overflow: hidden;}
.index-news-pic img{width: 100%;}
.index-news-content{ margin-top: 4rem;
    justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}




@media (max-width:1600px) {
	.index-news-list ul li{padding: 30px 0;}
}

@media (max-width:1400px) {
	.index-news-list ul li{padding: 25px 0;}
}

@media (max-width:1300px) {
	.index-news-list ul li{padding: 25px 0;}
	.index-news-title h3{ margin-top: 1.5rem; font-size: 2rem; height: 6rem;}
}

@media (max-width:1200px) {
	.index-news-poster{width: 48%;}
	.index-news-list{padding-left: 4rem; }
	.index-news-list ul li{padding: 25px 0;}
	.index-news-title h3{ margin-top: 1.5rem; font-size: 2rem; height: 6rem;}
}

@media (max-width:1100px) {
	.index-news{display: block;}
	
	.index-news-poster{width: 100%;display: block;}
	
	.index-news-content{}
	
	.index-news-list{padding-left: 0; width: 100%;}
	.index-news-list ul li{padding: 25px 0;}
	.index-news-list ul li:first-child{border-top: none;}
	.index-news-title h3{ margin-top: 1.5rem; font-size: 2rem; height: 6rem;}
}

@media (max-width:768px){.index-news{padding-top: 0;}}

/* contact */
.index-contact-bg{background-image: url(../images/contact-bg.jpg);}
.index-contact-infos,
.index-contact-form{width: 50%;}

.index-contact-infos ul li{position: relative; padding-left: 10rem;margin-top: 5rem;}
.index-contact-infos ul li span{position: absolute; top: 0; left: 0; width: 7rem; height: 7rem; justify-content: center; align-items: center; border: 1px solid #ccc;}
.index-contact-infos ul li span i{font-size: 3.4rem}

.index-contact-infos ul li h3{font-size: 3rem;}
.index-contact-infos ul li p{ margin-top: 1.5rem; font-size: 1.8rem; color: #666;}

.form-input{ margin-bottom: 2.4rem; justify-content: space-between;}
.form-input-item{ position: relative; width: 48%;}
.form-input-item input{display: block; padding-left: 1.8rem; width: 100%; line-height: 5rem; font-size: 1.8rem; border: 1px solid #D5D5D5;}
.form-textarea{ margin-bottom: 2.4rem;}
.form-textarea textarea{width: 100%; padding: 1.5rem; font-size: 1.8rem;line-height: 1.4; border: 1px solid #D5D5D5;}
.index-contact-form button{display: inline-block; padding: 0 60px; line-height: 5rem; background-color: var(--fuColor); color: #fff; font-size: 1.8rem; border-radius: 5rem; border: none;}

@media (max-width:1400px) {
	.index-contact-infos{padding-right: 5rem;}
	.index-contact-infos ul li{position: relative; padding-left: 7rem;margin-top: 5rem;}
	.index-contact-infos ul li span{width: 5rem; height: 5rem; }
	.index-contact-infos ul li span i{font-size: 2.4rem}
	
	.index-contact-infos ul li h3{font-size: 2rem;}
	.index-contact-infos ul li p{ font-size: 1.6rem;}
}

@media (max-width:1200px) {
	.index-contact-infos{width: 100%; padding: 0; padding-bottom: 5rem;}
	.index-contact-form{width: 100%;}
}

@media (max-width:640px) {
    
    	.index-contact-infos ul li{ margin-top: 2rem;}
    
	.form-input{ margin-bottom: 0; justify-content: inherit;}
	.form-input-item{ position: relative; width: 100%; margin-bottom: 2.4rem;}
}