@import url(https://fonts.googleapis.com/css?family=Montserrat:200);

body{ font-family: "Arial Narrow", Arial, sans-serif;  margin: 0 ; padding :0; width: 100%;}

#container{ overflow:hidden}
.wrapper{ max-width:1200px; margin:0 auto}
img{ max-width:100%; height: auto;}
.clear{ clear:both}

#header{ background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(145,145,145,1) 100%); background-attachment: fixed; overflow:hidden; background-size: 100%;   background-attachment: fixed;}

.logo{    width: 17%;   float: left;   padding-top: 2%;   padding-left: 3;}
.nav{     width: 30%;  float: right;   }
.nav li{ float: right; list-style-type: none;     margin: 0 12%;    padding: 8% 0; font-weight: bold;    }
#header .nav li a{ text-decoration: none; color: #191e62; font-size: 25px; font-weight: bold; font-family: "Arial Narrow", Arial, sans-serif;}
#header .nav li a:hover{color: #1065ae;}

.top_pro{width: 96%;  margin: 4% auto;}
.top_pro li{ width: 15%; float: left;     padding: 0 2%; margin-bottom: 5%;}

#banner{ margin: 0;}

.main {  text-align: center;  position: relative; }

h1{ font-size: 40px; font-weight: bold; background-size: 100%; font-family: arial; clear: both;}
.main span{ color: #1363aa;}


/*.section {text-align: center; margin-bottom: 10%;}*/
.section {width: 96%;  margin: 4% auto; text-align: center;}
.section h2 { color: #14256a; font-family: "Trebuchet MS"; margin: 40px auto; }
.section ul { padding-left: 0; }
.section li { display: inline-block; width: 17%; /*float: left;*/     padding: 0 1%; }
.section .pro li { margin: 0 0.1%; position: relative;}
.section .pro li div {background: #181d61;color: #fff;line-height: 50px;font-size: 18px;font-weight: bold;}
.section .pro li div a { color: #fff; display: block;  text-decoration: none;}
.section .pro li:hover div a { text-decoration: underline; }
.section .pro li .img-top { position: absolute; left: 0; display: none; z-index: 1; }
.section .pro li:hover .img-top { display: inline; }
.solution li { width: 50%; float: left; position: relative; overflow: hidden; }
.solution li .title { position: absolute; bottom: 10px; right: 10px; font-family: "Trebuchet MS"; font-size: 30px; color: #fff; z-index: 1; text-transform: uppercase; }
.solution li .bg { position: absolute; bottom: 0; right: 0; }
.solution li a{ display:block;}

.section .pro a{border: none;}

.product{ width: 96%; margin-top:5%; margin-bottom:5%;}

.product ul {
	float: none;
    margin-left: auto;
    margin-right: auto;
}


.main .product .pro_li1{margin-left:20%; margin-top:4%;} 

.main .product .pro_li1 li{
   float: left;
	width: 40%;
	
   
}


.pro_li2{}

.main .product .pro_li2 li{
	float: left;
	width: 33.3%;
    margin: 4% auto;  
	background:rgba(255,255,255,1.00)
}


.product a{border: 1px solid #cfcfcf;}



.video { width: 96%;   margin: 0 auto;}
.video li{width: 45%; float: left; list-style-type: none; font-family: arial;  font-weight:bold; margin: 4% 2%; }
.video li p{font-size: 18px; margin-top: 2%;}
.video li a{ text-decoration: none;}


#footer{ background:#fff; color:#181e62;clear: both; font-size: 16px; border-top: 3px solid #181e62; height: 330px;    }
.row {  margin-right: -15px;  margin-left: -15px;}

.ft_menu_zone {   padding-top:30px;     margin: 0 auto;    width: 96%; }
.ft_menu_zone li{ font-size: 14px;    color: #000; line-height: 1.7em;}

h3{    font-size: 18px;
    line-height: 1.8;
    color: #181d61;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;}

.ft_logo{width: 10%; float: left; margin-top: 3em;    text-align: center;}
.footer-logo span { display: block;  margin-bottom: 30px;}
.footer-logo img {  margin: 0 10px;}

.ft_menu {width: 80%; float: right; font-size: 15px;    font-family: arial; }

.ft_menu_list1{ width: 20%;float: left;}
.ft_menu_list2{ width: 25%;float: left;}
.ft_menu_list3{ width: 25%;float: left;}
/*.ft_contact{ width: 25%; float: left; margin-left: 2%;}*/
.ft_exhibition{ width: 21%; float: left; margin-left: 2%;}

#footer a{ text-decoration: none; color: #000;}



#copyright{
    text-align: center;
    padding: 10px 15px 5px;
}



/*pro hover*/
.snip1577 {
  font-family: 'Montserrat', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #fff;
  text-align: left;
  font-size: 16px;
  background-color: #2f568f;
 
}



.snip1577 *,
.snip1577:before,
.snip1577:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.snip1577 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}

.snip1577:before,
.snip1577:after {
  position: absolute;
  top: 20px;
  right: 20px;
  content: '';
  background-color: #fff;
  z-index: 1;
  opacity: 0;
}

.snip1577:before {
  width: 0;
  height: 1px;
}

.snip1577:after {
  height: 0;
  width: 1px;
}

.snip1577 figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 15px 20px;
  
}

.snip1577 h3,
.snip1577 h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
  opacity: 0;
  color: white;
}

.snip1577 h4 {
  font-size: .8em;
  text-transform: uppercase;
}

.snip1577 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1577:hover img,
.snip1577.hover img {
  zoom: 1;
  filter: alpha(opacity=20);
  -webkit-opacity: 0.2;
  opacity: 0.2;
}

.snip1577:hover:before,
.snip1577.hover:before,
.snip1577:hover:after,
.snip1577.hover:after {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.snip1577:hover:before,
.snip1577.hover:before {
  width: 40px;
}

.snip1577:hover:after,
.snip1577.hover:after {
  height: 40px;
}

.snip1577:hover h3,
.snip1577.hover h3,
.snip1577:hover h4,
.snip1577.hover h4 {
  opacity: 1;
}

.snip1577:hover h3,
.snip1577.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.snip1577:hover h4,
.snip1577.hover h4 {
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}


@media(max-width:1600px){
	.product pro_li1{    width: 75%;}

	}
@media(max-width:1600px){
	h1{ background-size: 75%;}


	}


@media(max-width:1320px){
	#header .nav li a{font-size: 20px;}
	
	
	}
	
@media(max-width:1160px){
	
	}


@media(max-width:980px){
	#header .nav li a{font-size: 20px;}
	
	.product li{    float: left;    padding:0;}
	.footer_left, .footer_right{ float:none; width:100%;}
	}	
	
@media(max-width:930px){
	#header .nav {  width: 40%;}
	.logo{    padding-top: 3%; padding-left: 5%;}
	
	#header .nav li a{font-size: 16px;}
	
	.main .product .pro_li1{margin: 0;}
	
	.main .product .pro_li1 li {
    float: none;
    width: 100%;
    margin: 4% auto;
	
}
	
	.main .product .pro_li2 li {
    float: none;
    width: 100%;
    margin: 4% auto;
}
	
	
	}
	
@media(max-width:800px){
	.ex_img{ padding-left:5%; padding-right:5%;}
	
	h1{ background-size: 90%;}
	.product pro_li1{ width: 90%;}
	.product li{  padding: 0;}
	
	
	.section .pro{}
	
	
	#footer{ text-align: left;}
	.ft_logo{width: 11%;}
	.ft_menu{width: 80%;     margin-left: 9%;}
	
	.ft_menu_list1{width: 26%; margin-bottom:10%;}
	.ft_menu_list2{width: 40%; margin-bottom:10%;}
	.ft_menu_list3{width: 28%; margin-bottom:10%;}
	.ft_contact{ width: 47%;}
	.ft_exhibition{width: 40%;}
	
	.video li p{    font-size: 15px; line-height: 1.5em;}
	}

@media(max-width:700px){
	#header .nav {  width: 50%;}
	.logo {   padding-top: 4%;}
	h1{ font-size: 25px;}

	}

@media(max-width:650px){
	.product ul{ width: 100%;}
	.product li{    width: 100%; margin: 0 auto;   }
	.product img{ max-width: 100%;}
	
	
	
	.ft_menu_list1{ display: none;}
	.ft_menu_list2{display: none;}
	.ft_menu_list3{display: none;}
	
	
	.ft_menu_zone{margin-left: 22%;}
	.ft_menu {   width: 76%;  margin: 0;}
	.ft_logo {   width: 17%;}
	
	
	}

@media(max-width:560px){
	#header .nav {  width: 55%;}
	.logo {   padding-top: 5%;}
	.product ul{ width: 100%;}
	.product li{    width: 35%; margin: 0 auto;}
	
/*	.section .pro li { width: 49%; margin: 10px auto 0; }*/
	
	
	.video li{width: 80%; float: none; margin: 4% auto; }
	.video li p{font-size: 14px;}
	
	}

@media(max-width:520px){
	#header .nav {  width: 60%;}
	#header .nav li a{font-size: 20px;}
	
	.snip1572{    }

	}

@media(max-width:480px){
	#header .nav {  width: 45%;}
	#header .nav li a{font-size: 12px;}
	
	.nav {  width: 60%;}
	.nav li a{font-size: 18px;}
	
	h1{font-size: 20px; background-size: 100%;}
	
	.ft_menu_zone{margin-left: 35%;}
	.ft_logo {  width: 20%;     margin: 0;}
	.ft_menu {   width: 100%;   margin-left: 0;   margin-top: 5%;}
	.ft_exhibition {   width: 42%;}


	.snip1577{margin: 0; }
	.section {   width: 100%;}
	

	}

@media(max-width:450px){
	#header .nav li a{font-size: 12px;}
	
	.section {   width: 100%;}
	}
	
@media(max-width:348px){
	#header .nav li a { font-size: 10px;}	
	h1 { font-size: 16px; }

	.product li{width:100%; float: none;  margin: 0 auto;}
	
	/*.section h2 { font-size: 20px; margin: 20px auto; }*/
	
	.section {   width: 100%;}
	.section .pro{width: 100%;}
	
	}

@media(max-width:320px){
	
	.section li {   width: 17%;   padding: 0;}
	#header .nav {    width: 65%;}
	
	}