.banner-img{ width:100%;}

#nav{ position:fixed; top:0; width:100%; z-index:9999;}
.nav-con{  max-width:1920px; margin:auto; padding:5px 15px;}


#nav.nav-scroll{background:rgba(255,255,255,0.9);}
.top-navbar{ min-height: 95px;}
.top-navbar .navbar-toggler { margin-right: 160px;}
.top-brand{ position: absolute; top: 0; left: 15px; z-index: 1; padding-top: 8px;}

.top-navbar .navbar-collapse { padding-left: 270px; padding-right: 136px;}
.top-navbar .navbar-nav .nav-link {
    color: #333333;
	position: relative;
	padding-left:1rem;
	padding-right:1rem;
}
.top-navbar .navbar-nav .dropdown-toggle::after{ display:none;}
.top-navbar .navbar-nav .nav-link:focus, .top-navbar .navbar-nav .nav-link:hover,.top-navbar .navbar-nav .show .nav-link, .top-navbar .navbar-nav .show .nav-link:focus, .top-navbar .navbar-nav .show .nav-link:hover{
    color: #19397c !important;
	font-weight: bolder;
}
.top-navbar .navbar-nav .nav-link:focus:before, .top-navbar .navbar-nav .nav-link:hover:before, .top-navbar .navbar-nav .show .nav-link:before, .top-navbar .navbar-nav .show .nav-link:before  {
    width: 100%;
}

.top-navbar .navbar-nav .dropdown-menu{ font-size:14px;}
.top-navbar .navbar-nav .dropdown-menu .dropdown-item.active,.top-navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #ffffff;
    background-color: #19397c;
}
.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2851, 51, 51, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.navbar-light .navbar-toggler{border:none;}
button.navbar-toggler:focus {
    outline: none;}
	
.nav-right{position: absolute; right: 0; top: 50%; }
.top-language{ float:left; margin-top: -12px; width: 60px; padding-left: 15px; color:#ffffff; border-left:1px solid #cccccc;}

.top-language .top-language-icon{ color:#19397c; font-size:16px;}
.top-language a{ color:#333333; margin-left:5px;}
.top-language a:hover{ text-decoration:none; opacity:1;color: #19397c;}
.nav-right .nav-search{ float:left; padding:0 20px; margin-top: -26px;}
#btn-search{ background:#19397c; color:#ffffff; display:block; width:48px; height:48px; text-align:center; line-height:48px; font-size:16px;}
#banner{ position:relative;}

.banner-nav ul li{}
.banner-nav ul li a{ position:relative; display:inline-block; width:26px; height:26px; cursor:pointer;}
.banner-nav ul li a b{ position:absolute; display:inline-block; width: 6px; height: 6px; background:#ffffff; border-radius:100%; top:50%; left:50%; margin-top:-3px; margin-left:-3px; opacity:0.5;}
.banner-nav ul li.active a b{ background:#ffffff; opacity:1;}
.banner-1{position:relative; z-index:10; background:rgba(0,0,0,0.1);}


.banner-btn{ position:absolute; right:10%; bottom:40px; z-index:1000;}
.banner-btns{ display:inline-block; position:relative; width:54px; height:54px; font-size:36px; color:#19397c; text-align:center; line-height:54px; }
.banner-btns:before{ content:""; display:block; position:absolute; left:0; right:0; top:0; bottom:0; background:url(../images/icon-btn-bg.png) no-repeat; background-size:cover;}
.banner-btns:hover:before{ background:url(../images/icon-btn-bg-h.png) no-repeat;  background-size:cover; webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;}
.banner-btns:hover{cursor:pointer;}
.banner-btns:focus{outline:none;}
.banner-btns.banner-btn-next{ margin-right:15px;}

.banner-news{ position:absolute; left:0; bottom:0; width:100%; z-index:999;}
.banner-news-con{position:relative;}
.banner-news-con:after{ content:"";  position:absolute; left:0; bottom:0;  top:0; right:60%; background:#19397c; z-index:-1;}

.index-news-container{ background:#19397c; width:50%; padding:24px 12px; position:relative; padding-left:120px; padding-right:100px; height:70px;}
.top-news-icon{ color:#ffffff; left:20px; position:absolute;}
.index-news-wrapper{ height:100%;}

.index-news-wrapper a{ color:#ffffff; display:block; white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;}
	
	
.vfx-image-wrap{position:relative;display:inline-block;margin:0 auto;width:100%;height:100%;margin-bottom:40px;cursor:ew-resize;}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
.before-image{position:absolute;top:0;left:0;z-index:1;width:50%; overflow:hidden;}
.before-image img{height:100%; width:auto !important; max-width:none;}
.after-image img{height:100%; width:auto !important; max-width:none;}
.before-image-bg{position:absolute;top:0;left:0;bottom:0; right:0; background:rgba(0,0,0,0.4);}
.after-image{position:absolute;top:0;left:0;z-index:0;}

.divider-bar{position:absolute;width:6px;left:50%;top:0px;bottom:0px;background:#ca1b1d;height:100%;display:block;z-index:2;box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.4);}


.container-title{ font-weight:bolder; margin-bottom:30px; position:relative;}
.container-title span{font-size:58px; color:#eeeeee; text-transform:uppercase; line-height:58px;}
.container-title h1{ font-size:30px; margin-top:-30px;font-weight:bolder; color:#111111;}
.container-title-center{text-align:center;}

#index-pro{ position:relative; border-bottom:1px solid #eeeeee; padding-top:90px; padding-bottom:70px;}

.pro-item{background:url(../images/pro-bg.jpg) center bottom no-repeat; background-size:cover; display:block; text-align:center; overflow:hidden;}
.pro-item:hover{text-decoration:none;}
.pro-item-name{ font-size:18px; color:#19397c; font-weight:bolder; padding:10px 10px 20px;}

.pro-item .imgBox img{transition: all .5s; width:100%;}
.pro-item:hover .imgBox img{ transform: scale(1.1);transition: all .5s;}

.container-more{ margin-top:50px;}
.container-more a{display:inline-block; background:#19397c; text-align:center; color:#ffffff; padding:10px 30px;}
.container-more a:hover{text-decoration:none;}
.index-pro-more{ text-align:center;}
.index-pro-more a{ min-width:224px;}

#index-yinyong{ position:relative; z-index:1; padding-top:90px; padding-bottom:70px;}
#index-yinyong:before{ content:""; position:absolute; bottom:0; top:66%; left:0; right:0; background:url(../images/index-app-bg.jpg) no-repeat; background-size:cover; z-index:-1;}
.index-app-title{ min-height:80px;}
.index-app-title-right{ position:absolute; right:0; top:0; font-weight:normal; max-width:360px; padding-left:15px;}
.index-app-title-right:before{ content:""; display:block; position:absolute; margin-left:-15px; margin-top:8px; width:6px; height:6px; border-radius:50%; border:2px solid #19397c;}
.index-app-title-right h4{ font-weight:bolder; font-size:16px;}

.app-item a{ position:relative; display:block; overflow:hidden;}
.app-item a:before{ content:""; display:block; position:absolute; z-index:1; height:100%; width:100%; background:url(../images/app-bg.png) no-repeat; background-size:cover;}
.app-item a:hover:before{opacity:0.8;}
.app-item a img{transition: all .5s; width:100%;}
.app-item a:hover img{ transform: scale(1.1);transition: all .5s;}
.app-item .app-item-name{position:absolute; z-index:10; top:50%; left:50%; margin-left:-62px; margin-top:-62px; padding:40px 0; width:125px; height:125px; text-align:center; color:#ffffff;}
.app-item .app-item-name h4{ font-size:20px; font-weight:bolder;}
.app-item .app-item-name:before{content:""; display:block; position:absolute; left:0; right:0; top:0; bottom:0; background:url(../images/icon-app.png) no-repeat; background-size:cover;}
.app-item a:hover .app-item-name:before{webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;}

.index-app-swiper{ padding-bottom:54px;}	
.swiper-container-horizontal > .app-swiper-scrollbar{left:0;background-color: rgba(255,255,255,0.23);height: 2px; width:100%;}
.app-swiper-scrollbar .swiper-scrollbar-drag{background: #ffffff;height: 5px; border-radius:0; width: 10%; cursor: pointer; margin-top:-1px;}

#index-about{padding-top:100px; padding-bottom:100px;}
.index-about-left{ float:left; width:50%; padding-right:20px;}
.index-about-right{ float:right; width:50%; padding-left:20px;}

.container-title-icon{ margin-bottom:10px;}

#index-news{ background:url(../images/index-news-bg.jpg) center center no-repeat; background-size:cover; padding-top:90px; padding-bottom:50px;}
.index-news-btns{position:absolute; right:0; top:30%;}
.index-news-btn{display:inline-block; cursor:pointer; width:44px; height:44px; background:#19397c; color:#ffffff; text-align:center; line-height:44px; margin-left:15px; font-size:30px;}
.news-items a{display:block; background:#ffffff; color:#333333;}
.news-items a:hover{text-decoration:none;  color:#19397c;}
.news-items a .news-con{ padding:15px;}
.news-items a .news-con .news-name{ font-size:16px; font-weight:bolder; margin-bottom:6px;white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;}
.news-items a .news-con .news-jj{ color:#727272;}
.news-items a .news-con .news-time{ color:#727272;}
.index-news-pagination{ position:relative; margin-top:46px;}
.index-news-pagination .swiper-pagination-bullet{position:relative; width: 12px; height: 12px; border-radius: 50%; background: #19397c; opacity:0.5;  margin:0 5px !important;}
.index-news-pagination .swiper-pagination-bullet-active{  opacity:1;}
.index-news-pagination .swiper-pagination-bullet:focus{ outline:none;}

#foot{ background:#171819; background-size:cover; position:relative;}
.foot-con{ background:rgba(0,0,0,0.8); color:#ffffff; }
.foot-con a{ color:#ffffff; opacity:0.8;}
.foot-con a:hover{ text-decoration:none; opacity:1;}
.foot-1{border-bottom:1px solid rgba(255,255,255,0.24); padding:50px 0 26px;}
.foot-nav{ padding:60px 0; border-bottom:1px solid rgba(255,255,255,0.24); min-height:320px; }
.foot-nav-title{ margin-bottom:8px; font-size:16px;}
.foot-nav-con ul li{list-style:none;}
.foot-nav-item{float:left; width:18%;}
.foot-contact{ width:28%;}
.foot-copyright{text-align:center; padding:30px 0;}

.container-title-icon{}
.container-title-icon:before,.container-title-icon:after{ content:""; width:28px; border-bottom:2px solid #19397c; display:inline-block;}
.container-title-icon img{ width:23px; display:inline-block; margin:0px 15px;}

.contain-con{ padding-top:80px; padding-bottom:160px;}

#banner-img{ position:relative;}
.banner-img-title{position:absolute; width:100%; height:100%; top:0; left:0; color:#ffffff;
		text-align: center;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;}
.banner-img-title-con { font-size:36px; text-transform:uppercase; font-weight:bolder;}
.banner-img-title-con .banner-img-title-icon{ margin-bottom:20px;}
.banner-img-title-con h1{ font-size:30px; font-weight:bolder; margin-top:15px;}

.contact-map-con{ position:relative; height:600px;}

.application-con{ overflow:hidden;}
.application-contain{margin-left:-25px; margin-right:-25px;}
.app-items{ width:33.3%; float:left; padding:25px;}

.product-con{ overflow:hidden;}
.product-contain{margin-left:-25px; margin-right:-25px;}
.pro-items{ width:50%; float:left; padding:25px;}


.pro-serise-name{ font-size:20px; height: 108px; padding-left: 0px; color:#ffffff; color:#ffffff;padding-right: 0px; font-weight:normal; }
.pro-serise-name h1{ font-size:26px; font-weight:bolder;}

.products-serise{ border-bottom:1px solid #eeeeee; margin-bottom:30px; padding-bottom:30px;}
.pro-serice-container .swiper-wrapper  .swiper-slide { width: auto !important; }
.pro-serice-container .swiper-wrapper .swiper-slide a{ display: block; position: relative; padding: 12px 15px; color:#333333; background:#eeeeee; min-width:190px; text-align:center;}
.pro-serice-container .swiper-wrapper .swiper-slide a:hover,.pro-serice-container .swiper-wrapper .swiper-slide a.active{ text-decoration: none; color:#ffffff; background:#19397c;}

#pro-view{background:#f5f5f5; padding-top:150px; padding-bottom:90px;}
.pro-view-container .pro-view-left{ width:48%; float:left;}
.pro-view-container .pro-view-right{width:48%; float:right;}
.pro-view-container .pro-img{text-align:center;}
.pro-view-container .pro-title h1{font-size:22px;font-weight:bolder;}
.pro-view-container .pro-title{font-size:18px; position:relative; padding-right:66px; color:#19397c;padding-bottom:20px;border-bottom:1px solid #cccccc;margin-bottom:20px;}
.pro-view-back{position:absolute; right:0; color:#333333; font-size:14px; top:20%;}
.pro-view-back a{color:#333333;}
.pro-view-back a:hover{color:#19397c; text-decoration:none;}
.pro-view-container .pro-view-jj{ min-height:200px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #cccccc;}
.pro-view-container .pro-back{}
.pro-view-container .pro-back a{ display:inline-block; font-size:16px; color:#111111; border:1px solid #111111; padding:6px 15px; margin-right:10px; min-width:140px; text-align:center;}
.pro-view-container .pro-back a.btn-contact{background:#19397c; color:#ffffff;}
.pro-view-container .pro-back a.btn-back i{ margin-right:10px; }
.pro-view-container .pro-back a:hover{background:#19397c; color:#ffffff; text-decoration:none;}
.pro-view-img{ max-width:768px; margin:auto;position: relative;}
.gallery-top{ border:1px solid #cdcdcd;}
.gallery-top .swiper-slide{ text-align:center; background:#ffffff;}
.gallery-thumbs {
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  opacity: 0.4;
  border:1px solid #cdcdcd;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #19397c;
}

.pro-view-btns{ position:absolute; top:36%; opacity:0; width: 100%; left: 0;}
.pro-view-btns .swiper-btn{ position:absolute; width:50px; height:50px; line-height:50px; background:#19397c; color:#ffffff; font-size:36px;}
.pro-view-img:hover .swiper-btns{opacity:1;}
.pro-view-img:hover .swiper-btns .swiper-btn{z-index:10;}
.pro-view-img .swiper-btns .swiper-btn.swiper-button-disabled,.pro-view-img:hover .swiper-btns .swiper-btn.swiper-button-disabled{opacity:0; cursor:unset;}
.pro-view-img .swiper-btn.swiper-but-next{ left:3%;}
.pro-view-img .swiper-btn.swiper-but-prev{ right:3%;}
.pro-view-img .swiper-btn:hover{opacity:1;}
.pro-view-img .swiper-btn:focus{outline:none;}

.product-view-detail-title{ border-bottom:1px solid #eeeeee; margin-bottom:20px; }
.product-view-detail-title span{ color:#ffffff; background:#19397c; padding:15px 30px; font-size:16px; min-width:200px; display:inline-block;}
.product-view-detail-title span i{ margin-right:20px;}

.news-con-title{ text-align:center; color:#19397c; font-size:30px; margin-bottom:25px;}
.news-share{ border: #c5c5c5 1px dashed; margin:0 auto; margin-top:15px;}
.news-conner{ margin-top:15px; }


#particles-js{ width: 100%; height: 100%; background-color: rgba(0,0,0,0); position:fixed; z-index:-10; }

.clear1{ display:block;}
.clear2{ display:none;}
.clear3{ display:none;}

@media screen and (max-width: 1200px){
	.top-brand { width:200px; padding-top: 8px; padding-left:15px;}
	.top-navbar .navbar-collapse{ padding-left:200px;}
	.top-navbar{ min-height:75px;}
	.banner-btns{ width:36px; height:36px; line-height:36px; font-size:26px; }
	
	.banner-news{ position:relative;}
	.banner-news-con:after{ right:0;}
	.index-news-container{ width:100%;}
	.index-news-container{ padding: 12px 12px 12px 120px; height:50px;}
	.banner-btn {
		bottom: 60px;
	}
	
	
	.container-title span{font-size:48px;line-height:48px;}
	.container-title h1{ font-size:26px;}
	
	
	#index-pro{ padding-top:60px;}
	#index-yinyong{ padding-top:60px;}
	#index-about{padding-top:60px; padding-bottom:60px;}
	
	.contain-con{ padding-top:60px; padding-bottom:120px;}
	
	.banner-img-title-con { font-size:30px;}
	.banner-img-title-con .banner-img-title-icon img{ width:90px;}
	.banner-img-title-con h1{ font-size:26px; font-weight:bolder; margin-top:15px;}
	
	.contact-map-con{ height:560px;}
	
}

@media screen and (max-width: 991px){
	#nav{position:relative; background:#ffffff;}
	.nav-con{padding:0;}
	.top-navbar .navbar-collapse { 
	padding: 15px;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.95);}
	#nav.nav-dropdown{background:rgba(255,255,255,0.95);}
	.top-navbar .nav-item { padding: 10px 3px 5px; border-bottom: 1px solid #dddddd;}
	.top-navbar .navbar-nav .nav-link:before {
    
	}
	.top-navbar .nav-item .dropdown-menu{background: none;border: 0;}
	.top-navbar .nav-item .dropdown-menu .dropdown-item {color: #727272;}
	.top-nav .container{ max-width: none; padding-left: 0; padding-right: 0;}
	/*.top-navbar .navbar-nav .nav-link{ color:#333333;}*/
	.top-navbar .navbar-toggler {
    margin-right: 140px;
	}
	
	.index-app-title-right{ position:relative; padding-left:0;}
	.index-app-title-right:before{ display:none;}
	
	
	.index-about-left{ float:none; width:100%; padding-right:0px;}
	.index-about-right{ float:none; width:100%; padding-left:0px; margin-top:50px;}
	
	.foot-nav-item{float:none; width:100%;margin-bottom:20px;}
	.foot-nav-item ul li{display:inline-block;}
	.foot-contact{ width:100%;}
	.foot-nav{ padding:30px 0;}
	
	.application-contain{margin-left:-15px; margin-right:-15px;}
	.app-items{ padding:15px; width:50%;}
	
	.product-contain{margin-left:-15px; margin-right:-15px;}
	.pro-items{ padding:15px; }
	
	.pro-view-container .pro-view-left{ width:100%; float:none;}
	.pro-view-container .pro-view-right{width:100%; float:none; margin-top:30px;}
	
	
	#pro-view{padding-top:60px; padding-bottom:60px;}
	.clear1{ display:none;}
	.clear2{ display:block;}
	.clear3{ display:none;}
}

@media screen and (max-width: 768px){
	
	.container-title span{font-size:38px;line-height:38px;}
	.container-title h1{ font-size:22px;}
	
	#index-pro{ padding-top:50px; padding-bottom:50px;}
	#index-yinyong{ padding-top:50px; padding-bottom:50px;}
	
	.contain-con{ padding-top:50px; padding-bottom:80px;}
	
	.banner-img-title-con { font-size:26px;}
	.banner-img-title-con .banner-img-title-icon img{ width:60px;}
	.banner-img-title-con h1{ font-size:22px; font-weight:bolder; margin-top:10px;}
	
	.contact-map-con{ height:460px;}
	
	
}
@media screen and (max-width: 576px){
	.top-navbar .navbar-toggler{ margin-right:115px; border:none; padding:0;}
	.top-navbar .navbar-toggler:focus{ outline:none;}

	
	.top-brand {
    width: 140px;
    padding-top: 19px;
    padding-left: 15px;
	}
	.nav-right .nav-search {
		padding: 0 10px;
		margin-top: -18px;
	}
	#btn-search {
		width: 36px;
		height: 36px;
		line-height: 36px;
		font-size: 16px;
	}
	
	.container-title span{font-size:30px;line-height:30px;}
	.container-title h1{ font-size:20px; margin-top:-20px;}
	
	.banner-img-title-con { font-size:24px;}
	.banner-img-title-con .banner-img-title-icon{ margin-bottom:10px;}
	.banner-img-title-con .banner-img-title-icon img{ width:40px;}
	.banner-img-title-con h1{ font-size:20px; font-weight:bolder; margin-top:5px;}
	
	.contact-map-con{ height:360px;}
	
	.app-items{ width:100%; float:none;}
	.pro-items{ width:100%; float:none;}
	
	
	.clear1{ display:none;}
	.clear2{ display:none;}
	.clear3{ display:block;}
}