@charset "utf-8";
/*  */
.page-banner{overflow: hidden;}
.page-banner img{width: 100%;animation: bigImg 2s 1;}

@keyframes bigImg{
	0%   {transform: scale(1.4);}
	/* 50%  {transform: scale(.8);} */
	100% {transform: scale(1);}
}

/* about */
.about-title h1{position: relative; padding-bottom: 15px; margin-bottom: 25px; font-size: 48px;}
.about-title h1:before{position: absolute; bottom: 0; left: 0; content: ''; width: 40px; height: 4px; background-color: #777; }
.about-title-white h1{color: #fff;}
.about-title-white h1:before{background-color: #fff; }
.about-left{float: left; width: 50%;}
.about-left p{margin-bottom: 12px; color: #777; font-size: 14px; line-height: 24px;}
.about-left a{display: inline-block; padding: 0 30px; line-height: 40px; border: 1px solid #ccc; text-transform: uppercase; }
.about-left a b{vertical-align: middle;margin-right: 5px; font-weight: normal;}
.about-left a:hover img{transform: translateX(8px);}
.about-right{float: left; width: 50%; padding: 15px; text-align: center;}
.about-right img{max-width: 100%;}
@media (max-width:980px) {
	.about-title h1{margin-bottom: 15px; font-size: 28px;}
	.about-left{width: 40%;}
	.about-right{width: 60%;}
}
@media (max-width:768px) {
	.about-left,
	.about-right{width: 100%; padding: 0;}
}
.cultrue{padding-top: 100px; background-image: url(../images/about/cul-bg.jpg);background-repeat: no-repeat; background-size: cover;}
.cultrue-box{float: right; padding: 65px 100px 100px; width: 50%; background-color: rgba(255,255,255,.7);}
.cultrue-box h3{margin-top: 35px; font-size: 32px; font-weight: bold;}
.cultrue-box p{font-size: 18px; color: #777;}

@media (max-width:1100px) {
	.cultrue-box{width: 70%;}
}
@media (max-width:960px) {
	.cultrue{padding-top: 50px;}
	.cultrue-box{ width: 100%;}
}
@media (max-width:960px) {
	.cultrue-box{padding: 0 35px 35px;}
}
.about-service .swiper-wrapper{margin-bottom: 60px;}
.about-service .swiper-slide a{position: relative;display: block;}
.about-service .swiper-slide img{width: 100%;}
.about-service-mask{position: absolute;top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(36, 113, 169,0); color: #fff; display: flex; align-items: center; justify-content: center;text-align: center; transition: all .3s;}
.about-service-mask h3{margin-bottom: 10px; font-size: 28px;transition: all .3s;}
.about-service-mask p{padding:0 50px; font-size: 18px;display: none;}
.about-service .swiper-pagination-bullet{border-radius: 0; width: 25px; height: 3px;}
.about-service .swiper-slide a:hover .about-service-mask{ background-color: rgba(36, 113, 169,.7);visibility: visible; opacity: 1;transform: scale(1);}
.about-service .swiper-slide a:hover .about-service-mask p{display: block;}

/* cars */
.category-title{padding: 30px 0;border-bottom: 1px solid #eee;}
@media (max-width:960px) {
	.category-title{padding: 10px 0 0;}
}

.cars-type ul li{float: left;margin-right: 10px; margin-bottom: 10px;}
.cars-type ul li a{display: block; padding: 0 15px; line-height: 28px; border-radius: 20px; border: 1px solid #666; font-size: 16px;}
.cars-type ul li a:hover{background-color: #0077AA; color: #fff; border-color: #0077AA;}
.cars-list{padding: 50px 0;}
.cars-list ul {margin-left: -30px; margin-top: 30px;}
.cars-list ul li{float: left; width: 33.33%; padding-left: 30px; margin-bottom: 30px;}
.cars-list ul li .cars-box{position: relative; display: block;overflow: hidden;}
.cars-list ul li .cars-box img{width: 100%;}
.cars-list ul li .cars-mask{position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;background-color: rgba(255,255,255,.7); text-align: center; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transform: translateY(30px);transition: all .3s;}
.cars-mask h3{margin-bottom: 15px; font-size: 24px;}
.cars-mask a{display: inline-block;margin: 0 10px; padding: 0 15px; border: 1px solid #333; line-height: 30px;}
.cars-list ul li .cars-box:hover .cars-mask{visibility: visible; opacity: 1; transform: translateY(0);}
@media (max-width:768px) {
	.cars-list ul li{width: 50%; }
}
@media (max-width:640px) {
	.cars-list ul li{width: 100%; }
}

.cars-gray{width: 100%; height: 100px;background-color: #eee;}
/* cars-show */
.cars-show-one-left{float: left; width: 50%; padding-right: 100px;}
.cars-show-one-left>h3{margin: 30px 0;font-size: 18px; color: #777;}
.cars-show-one-title p{font-size: 16px;color: #777;}
.cars-show-one-title h1{font-size: 32px; color: #006CB7; font-weight: bold;}
.cars-show-one-list li{float: left; width: 33.33%; text-align: center;}
.cars-show-one-list li h3{padding: 25px 0 5px; font-size: 32px; text-transform: uppercase;}
.cars-show-one-list li h3 sup{font-size: 14px;padding-left: 5px; color: #999; }
.cars-show-one-list li p{font-size: 16px; color: #777; text-transform: uppercase;}
.cars-show-one-right{float: left; width: 50%;}
.cars-show-one-right video{width: 100%; height: 400px;}
@media (max-width:980px) {
	.cars-show-one-left{ width: 100%;padding-right: 0;margin-bottom: 35px;}
	.cars-show-one-right{width: 100%;}
}
@media (max-width:768px) {
	.cars-show-one-right video{height: auto;}
}
.cars-show-two{background-image: url(../images/show/p2.jpg);background-repeat: no-repeat; background-size: cover; background-position: center;}
.cars-show-two>div{max-width: 600px; padding: 200px 0; margin: 0 auto;background-color: rgba(0,0,0,.5); text-align: center; color: #fff;}
.cars-show-two>div h3{position: relative; padding-bottom: 30px; margin-bottom: 30px; font-size: 24px;}
.cars-show-two>div h3:before{position: absolute; bottom: 0; left: 50%; content: ''; margin-left: -20px; width: 40px; height: 4px; background-color: #fff; }
.cars-show-two>div p{ padding: 0 50px; min-height: 120px; font-size: 16px; line-height: 30px;}
@media (max-width:768px) {
	.cars-show-two>div{padding: 50px 0;}
}

.cars-show-safe-left{float: left; width: 50%; text-align: center;}
.cars-show-safe-left img{max-width: 100%;}
.cars-show-safe-right{float: left; width: 50%; padding: 80px;}
.cars-show-safe-right p{margin-bottom: 12px; color: #777; font-size: 16px; line-height: 24px;}
.cars-show-safe-right a{display: inline-block; padding: 0 35px; line-height: 40px; border-radius: 2px; background-color: #006CB7; color: #fff; text-transform: uppercase; }
.cars-show-safe-right a b{vertical-align: middle;margin-right: 5px; font-weight: normal;}
.cars-show-safe-right a:hover img{transform: translateX(8px);}
@media (max-width:980px) {
	.cars-show-safe-title h1{margin-bottom: 15px; font-size: 28px;}
	.cars-show-safe-left{width: 50%;}
	.cars-show-safe-right{width: 50%; padding: 25px;}
}
@media (max-width:768px) {
	.cars-show-safe-left{width: 100%;}
	.cars-show-safe-right{width: 100%; padding:25px 0;}
}

.cars-show-allsafe {text-align: center; background-color: #f5f5f5;}
.cars-show-allsafe h3{font-size: 24px; font-weight: bold;}
.cars-show-allsafe p{margin: 25px 0 30px; font-size: 18px;color: #777;}
.cars-show-allsafe .swiper-container{padding-right: 160px;}
.cars-show-allsafe .swiper-wrapper{margin-bottom: 60px;}
.cars-show-allsafe .swiper-container .swiper-slide img{width: 100%;}
.cars-show-allsafe .swiper-button-next,
.cars-show-allsafe .swiper-button-prev{top: inherit; bottom: 0; width: auto; height: auto; margin-top: 0;}
.cars-show-allsafe .swiper-button-next{left: 10%;}
.cars-show-allsafe .swiper-button-prev{right: 10%;}
@media (max-width:980px) {
	.cars-show-allsafe .swiper-button-next{left: 20%;}
	.cars-show-allsafe .swiper-button-prev{right: 20%;}
}
@media (max-width:640px) {
	.cars-show-allsafe .swiper-container{padding-right: 60px;}
	.cars-show-allsafe .swiper-button-next{left: 30%;}
	.cars-show-allsafe .swiper-button-prev{right: 30%;}
}

.news-type ul li{float: left;margin-right: 10px; margin-bottom: 10px;}
.news-type ul li a{display: block; padding: 0 15px; line-height: 20px; font-size: 16px;}
.news-type ul li a:hover{color: #0077AA;}

/* news */
.news-list ul{padding: 0 15px; margin-left: -25px;}
.news-list li{float: left; width: 33.33%;padding-left: 25px; margin-bottom: 25px;}
.news-list li a{display: block; padding-bottom: 15px; transition: all .3s; }
.news-list-pic{margin-bottom: 15px; overflow: hidden;}
.news-list-pic img{width: 100%; transition: all .3s;}
.news-list li span{padding: 0 15px;color: #999;}
.news-list li h3{padding: 0 15px; margin: 10px 0; height: 45px; font-size: 18px; overflow: hidden;}
.news-list li p{padding: 0 15px;height: 60px; color: #777; overflow: hidden;}
.news-list li a:hover{box-shadow: 0 0 10px rgba(0,0,0,.2);}
.news-list li a:hover h3{color: #006CB7;}
.news-list li a:hover .news-list-pic img{transform: scale(1.1);}

@media (max-width:980px) {
	.news-list li{width: 50%;}
}
@media (max-width:640px) {
	.news-list li{width: 100%;}
}

/* show */
/* path */
.category-path{height: 50px;line-height: 50px; background-color: #f5f5f5; overflow: hidden;}
.category-path a{color: #777;}
.category-path img{ vertical-align: middle; }
.category-path i{font-size: 24px; }
.category-path b{font-weight: normal; font-family: simsun;}
.category-path a:last-child{color:#0E73FC;}

.page-news{background-color: #f5f5f5;}
.page-news-left{float: left; width: 70%;}
.page-news-left .show-news-padding{ background-color: #fff; padding: 50px 30px;}
.show-news-title{ padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #eee;}
.show-news-title h3{ padding-bottom: 15px; color: #555; font-size: 24px;}
.show-news-title p{font-family: arial; color: #777;}
.show-news-title p span{margin-right:25px;}
.show-contnet {line-height: 24px;}
.show-contnet p{padding-bottom: 15px;}
.show-contnet img{max-width: 100%!important; height: auto!important;}
/* pageview */
.page-view {padding-top: 25px;}
.page-view ul{padding: 15px;}
.page-view ul li{float: left; width: 50%;}
.page-view ul li:last-child{text-align: right;}
.page-view ul li a{color: #777;}
.page-view ul li a:hover{color:#0E73FC;}
@media (max-width:768px) {
	.page-view ul{padding:10px 0;}
	.page-view ul li{width: 100%;}
	.page-view ul li:last-child{text-align: left; padding-top: 8px;}
}

/*  */
.page-news-right{float: left; width: 30%; padding-left: 2px;}
.page-border-box{ padding: 15px; background-color: #fff;}
.page-border-title{position: relative; line-height: 35px; }
.page-border-title h3{font-size: 20px; color: #006CB7;}
.page-border-box ul li{position: relative; margin-top: 20px; padding-left: 15px;}
.page-border-box ul li:before{position: absolute; top: 50%; left: 0; content: ""; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background-color: #F55743;}
.page-border-box ul li a{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.page-border-box ul li a:hover{ color: #006CB7;}
@media (max-width:1000px) {
	.page-news-right{float: left; width: 30%; padding-left: 30px;}
}
@media (max-width:900px) {
	.page-news-left{ width:100%;}
	.page-news-right{ width: 100%; padding-left:0; margin-top: 2px;}
}

.contact-left,
.contact-right{float: left; width: 50%;}
.contact-title h3{font-size: 28px; font-weight: bold;}
.contact-title p{font-size: 18px; color: #777; text-transform: uppercase;}

.contact-content{padding: 25px 0; margin-top: 25px; width: 70%;font-size: 16px; color: #777;border-top: 1px solid #eee;}
.contact-item{position: relative;margin-top: 30px; padding-left: 50px;}
.contact-item span{position: absolute; top: 4px; left: 0; text-align: center; display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 1px solid #006CB7;  }
.contact-item span i{font-size: 24px; color:  #006CB7;}
.contact-item p{font-size: 14px; color: #777; padding-bottom: 8px;}
.contact-item h3{font-size: 18px; }

.contact-form{margin-top: 35px;}
.contact-form p{margin-bottom: 15px;}
.contact-form p input,
.contact-form p select{display: block; width: 100%; padding-left: 15px; line-height: 45px; border: 1px solid #eee; background-color: #eee; font-size: 16px; color: #777;}
.contact-form button{display: block; width: 100%; line-height: 45px; text-align: center; background-color: #006CB7; color: #fff;font-size: 16px;}

@media (max-width:980px) {
	.contact-left{padding-right: 40px;}
	.contact-content{width: 100%;}
}

@media (max-width:768px) {
	.contact-left,
	.contact-right{ width: 100%;padding-right: 0;}
	.contact-right{margin-top: 30px;}
}