@charset "UTF-8";







#banner { max-width: 1920px; position: relative;  }



/*#banner:before { content: ''; position: absolute; width: 100%; bottom: 0; height: 10px; z-index: -1; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }*/



#banner .item { position: relative; }







#banner .item .text{ position:absolute; color:#000; top:0; width:33%; left:20%;color:#fff; padding-top:7.5%; z-index: 2}



#banner .item .text h1{ font-size:50px; line-height:73px;  width:600px;position:relative; padding-bottom:0px; margin-bottom:10px}



/*#banner .item .text h1:before{ width:106px; height:3px; background:#004097; position: absolute; bottom:0; left:0;  content: ''; font-family: 'icomoon'; }*/



#banner .item .text p{ font-size:20px; line-height:27px; height:110px;font-weight:200 !important;}



#banner .item .text a.more{ color:#fff; border:1px solid #fff; width:100px;height:25px;display: inline-block; text-align:center;font-size: 15px;padding-top:0px; }



#banner .item .text a.more:hover{background:#004097;  border:2px solid #004097;}



#banner .item > a.more { position: absolute; display: inline-block; width: 196px; height: 70px; line-height: 70px; background: #27539b; color: #fff; text-transform: capitalize; font-size: 30px; text-align: center; left: 50%; top: 71%; border-left: 2px solid #6182b6; border-right: 2px solid #6182b6; margin-top: -20px; margin-left: -100px; }

.slick-dots{ bottom:35px}

#banner .slick-prev, #banner .slick-next { font-size: 30px; top:50%; width: 40px; opacity: 1; height:100px; line-height: 100px; font-weight:bold}



#banner .slick-prev { left: 0%;  background:#181c29;  }



#banner .slick-next { right: 0%;  background:#181c29 }



#banner .slick-prev:hover{ background:#666}



#banner .slick-next:hover{ background:#666}



#banner .slick-prev:before { content: '\e625'; color: #fff;  text-align:center }



#banner .slick-next:before { content: '\e628'; color: #fff;  text-align:center }



@media screen and (max-width:1910px){#banner .item .text{ width:50%; }}



@media screen and (max-width:1440px){



	#banner .item .text h1{ font-size:53px; line-height:53px; }



	#banner .item .text p{ font-size:18px; line-height:21px; height:90px }



	}



@media screen and (max-width:1200px){



	#banner .item .text{ width:40%; padding-top:3%;   padding-right: 3%;  padding-left: 3%;background:rgba(51,51, 51, 0.5); left: 10%; height: 100%;

	}



	#banner .item .text h1{ font-size:30px; line-height:43px; padding-bottom:15px; margin-bottom:15px;width:95%;}



	#banner .item .text p{ height:60px }



	.slick-dots{ height:30px; z-index: 710;}

#banner .item .text a.more{}

	}

#banner .item .text{

	display:none;

}

@media screen and (max-width:960px){

#banner .item .text{

	display:block;

}	

#banner{  background:#494949 }

#banner .item .text{background:#494949;

	}

	.slick-dots{ height:10px; }

.slick-list{ padding-bottom: 250px}

#banner .slick-prev, #banner .slick-next {    background: none;}

#banner .slick-prev:before{font-size:70px;}

#banner .slick-prev, #banner .slick-next{font-size:70px;opacity:0.5;top: 20%;}





 #banner .item > a{ height:24px; line-height:24px; font-size:16px;}



#banner .slick-dots li{ margin:0 5px;}



#banner .slick-dots{ margin-bottom:6px;}



#banner .slick-dots li button{ width:12px; height:12px;}



#banner .item .text{top:100%; padding:5%; left:0; width:90% ; }



#banner .item .text h1{ font-size:22px; line-height:10px;color:#fff; }

#banner .item .text h1 b{ color:#fff; }

#banner .item .text p{ }

#banner .item .text a.more{ color:#fff; border:2px solid #fff; padding:5px 10px; display:none; font-size: 21px }

 }



@media screen and (max-width:570px){ 

#banner .item .text p{height:40px;}

#banner .item .text{padding-bottom:0%;}

#banner .item .text h1{font-size:22px;}

#banner .slick-prev:before{font-size:50px;}

#banner .slick-prev, #banner .slick-next{font-size:50px;opacity:0.5;top: 10%;}

#banner .slick-next:before{font-size:50px;}

.slick-list {

    padding-bottom: 220px;

}



 }



 @media screen and (max-width:380px){ 



#banner .slick-prev:before{font-size:30px;}

#banner .slick-prev, #banner .slick-next{font-size:30px;opacity:0.5;top: 5%;}

#banner .slick-next:before{font-size:30px;}





 }

 

#warp_one { position: relative;padding: 2.16667% 0 1.16667% 0; background:#FFFFFF }

.main_prowrap { background: #fff; }







#main_pro { }



#main_pro .title {  overflow: hidden; position: relative; margin-bottom: 2.91667%; }



#main_pro .title b { font-size: 21px; color: #000; display: inline-block; padding: 15px 0px;text-transform: uppercase; font-weight: BOLD; position: relative; line-height: 1; }



#main_pro .title:before { content: ''; height: 2px; width: 100%; position: absolute; top: 96%; left: 0; background: #004097; display: block; width:50px }







#main_pro .box { width: 23%; margin-bottom:15px; }



#main_pro .box img {  display: inline-block; }



#main_pro .box a.title_two { font-size:16px; display: block; margin: 20px 0 20px 0; color: #000; font-weight:bold;}



#main_pro .box:hover a.title_two { color: #004097; }.exhibition #main_pro .box p.time



.t_t2{margin-bottom:14px !important; }

#main_pro .box p { color: #666;  max-height: 76px; overflow: hidden; display: block; font-size:14px; line-height:26px !important; }



#main_pro .box a.more { color: #004097; text-transform: capitalize; display: block; margin: 15px 0; }



.ex2{line-height:16px !important;}



#main_pro .pro_more{ text-align:right; padding-top:3%}



#main_pro .pro_more a{ font-size:16px; color:#004097}



#main_pro .box .fr{ float:right; width:60%; margin-right:20px;}



.exhibition #main_pro .box{ width:50%}



.exhibition #main_pro .box p{color:#666}



.exhibition #main_pro .box p.time{ padding-top:0px}







 @media screen and (max-width: 760px) { #main_pro .box { width: 48%; }}



 @media screen and (max-width: 450px) { #main_pro .box { width: 100%; } }







@media screen and (max-width: 1200px) { 

  #warp_one:before { display: none; } 

  

}







.mtop { border-bottom: 1px solid #ccc; line-height: 1.4; margin-bottom: 30px; }



.mtop .title { font-size: 30px; text-transform: uppercase; color: #122f69; font-weight: bold; padding-left: 50px; }



.mtop .title span { font-size: 16px; display: inline-block; }



.mtop .more { vertical-align: bottom; }



.mtop .more a { color: #5b5b5b; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; font-size: 14px; display: block; }



@media screen and (max-width: 1366px) { .mtop .title { font-size: 22px; background-size: 28px; padding-left: 40px; } }



@media screen and (max-width: 880px) { .mtop { margin-bottom: 20px; }



  .mtop .title { font-size: 18px; background-position: left top; padding-bottom: 4px; } }











  







#wrap_two { background:#eaeaea;   padding:3% 0 4% 0; position:relative; }



#wrap_two .tit{ color:#FFF;text-transform: uppercase; background: url("../images/about_title_bg.png") no-repeat left top; }



#wrap_two .tit li{ float:left; width:127px; text-align:center; }



#wrap_two .tit li a{ color:#000; font-weight:bold; font-size:14px; line-height:45px; display:block ;  position:relative; height:45px; width:100%    }

#wrap_two .tit li a:hover{ color:#fff }

#wrap_two .tit li a:after { content: ''; width:200%; display: block; position: absolute; left: 0; top: 0; height: 100%; }



#wrap_two .tit li a span{display:block ; line-height:45px; position:absolute;left: 0; top: 0; z-index:1;width:100% }





#wrap_two .tit li.company{  width:173px;}

#wrap_two .tit li.company a { color:#fff; }

#wrap_two .tit li.company a:after {  background: url("../images/about_title_bg2.png") no-repeat left top;}



#wrap_two .tit li.services{  width:162px;}

#wrap_two .tit li.services:hover a:after {  background: url("../images/about_title_bg3.png") no-repeat left top; }

#wrap_two .tit li.rd a:after { left:-21px; top: 0; }

#wrap_two .tit li.rd:hover a:after {  background: url("../images/about_title_bg3.png") no-repeat left top; left:-21px; top: 0; }









#wrap_two .content { padding:3% 0 }



#wrap_two .content .left{ background:#fff; width:75%}



#wrap_two .content .right{  width:23%}



#wrap_two .content .right .about_img1{ width:100%}



#wrap_two .content .right .about_img2{ margin-top:17px}



#wrap_two .content .right img{ border:2px solid #fff;background: url(/images/img/load.gif) no-repeat center center;}















.m_video { width: 43%; position: relative;  }



.m_video > a { display: block; width: 100%; overflow: hidden; position: relative;  }



.m_video > a img{ position:relative; background: url(/images/img/load.gif) no-repeat center center;}






.m_video > a:hover:before { background:#004097; filter: alpha(opacity=0.8);border: 2px solid #004097;  }



.m_video:hover a img { transform: scale(1.1); -webkit-transform: scale(1.1); }







.m_about { width: 56%; padding:7% 4% }



.m_about .title { margin-bottom: 17px; text-align: left; font-size: 18px; }







.m_about p {  display: block; overflow: hidden; color: #666; line-height:26px; text-align:left; font-size:15px }



.m_about a { display: inline-block; width: 128px; height: 32px; line-height: 32px; border: 2px solid #376cab; text-align: center; margin-top:18px; color: #376cab; text-transform: capitalize; font-size: 16px; position: relative; overflow: hidden; }



.m_about a:after { content: "\e63d"; font-size: 16px; font-family: icomoon; position: absolute; right: -50%; display: inline-block; }







.m_about:hover a:after { right: 20px; }







@media screen and (max-width: 1200px) {



	#wrap_two .content .left{ width: 100%}



	#wrap_two .content .right{width: 100%}



	#wrap_two .content .right .about_img1{ width:48%; display: inline-block; vertical-align: top; margin-top:17px}



	.m_about {  padding:5% 4% }



	}



@media screen and (max-width: 980px) {



	



	#wrap_two{ padding:5% 0 8% 0; background:#12346a}



	.m_about {  padding:3% 3% }



	



	 }



@media screen and (max-width: 760px) {



	.m_video{ padding:4% 0 4% 4%}



	.m_about{ }



	}



@media screen and (max-width: 640px) {



	



	.m_video{ width:100%; padding:2% 6% 0 6%}



	.m_about{ width:100%}



	}



@media screen and (max-width: 540px) {	



#wrap_two .tit{ background: none}

#wrap_two .tit li{ float:left; width:100%; text-align:center; margin-bottom:1px}



#wrap_two .tit li a{ background:#FFF  ;}

#wrap_two .tit li a:hover{background:#14dfff ; color:#fff; }

#wrap_two .tit li a:after { display:none }



#wrap_two .tit li a span{display:block ; line-height:45px; position:relative;left: 0; top: 0; z-index:1;width:100% }



#wrap_two .tit li.company{  width:100%; background:#14dfff}

#wrap_two .tit li.company a:after {  background:#14dfff}

#wrap_two .tit li.company a{  background:#14dfff}



#wrap_two .tit li.services{  width:100%; }

#wrap_two .tit li.services:hover a:after {background: none}



#wrap_two .tit li.rd:hover a:after { background: none}





}



#main_inqy { width: 48.16667%; }



#main_inqy .list .box { width: 48%; }



#main_inqy .list .box a { display: block; color: #4a4a4a; margin-bottom: 10px; }



#main_inqy .list .box a:hover { color: #2856a4; }



@media screen and (max-width: 980px) { #main_inqy { width: 100%; margin-bottom: 20px; }



  #main_inqy .list .box { text-align: center; } }



@media screen and (max-width: 460px) { #main_inqy .list .box { width: 100%; margin-bottom: 10px; } }



















.m_news { width: 43%; position: relative; margin:0 4%  0  0 }



.m_news .title { line-height: 1.5; padding-bottom: 10px; border-bottom: 2px solid #ffcb4f; margin-bottom: 30px; }



.m_news .title b { font-size: 37px; color: #231815; display: inline-block; margin-left: 42%; text-transform:uppercase }



.m_news .title a { color: #ffcb4f; font-size: 14px; text-transform: capitalize; display: none; }



.m_news .info { margin-bottom: 30px; font-size:20px;}



.m_news .info a { display: block; max-height: 42px; overflow: hidden; color: #797878; float:left }



.m_news .info span { display: block; text-align: right; color: #797878; float:right }



.m_news .info:hover p, .m_news .info:hover span { color: #ffcb4f; }



.m_news:after { content: ''; display: block; width: 80px; height: 7px; background: #ffcb4f; position: absolute; bottom: -20px; left: 42%; }



.m_news:hover:after { left: 0; }



.m_news:hover .title b { margin-left: 0; }



.m_news:hover .title a { display: inline-block; }