@charset "utf-8";
/* CSS Document */


* { margin: 0; padding: 0; }
html, body { width: 100%;     font-family: "Microsoft YaHei"; font-size: 14px; }
img { border:none ;max-width:100%;     text-align-last: center;    vertical-align: middle;}
a { color:#333;text-decoration:none; }
a:hover { color:#333 ;text-decoration:none;}
ul { list-style:none;}
li{ list-style-type :none;}
.clear {clear:both;    float: none!important;    background: none;    width: 0 !important;    height: 0 !important;}
.fl {    float: left;    display: inline;}
.fr {    float: right;    display: inline;}

span{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.w1200{ width:1200px; margin: 0 auto;}
.swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: calc((100% - 30px) / 2);

      /* 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;
    }
/* ------------------                 header                --------------------------------------      */
/*    top  head    */

.header{   width: 100%;  background: #fff; height: 74px; }
.header .logo{ float: left; }
.header ul{ float: right; }
.header ul li{ float:left; line-height: 74px; height: 74px; }
.header ul li a{ color: #000; font-size: 15px; padding: 0 18px;}
.header ul li:hover a,.header ul li.on a{ color: #013589; display: block;}

.header ul li.search { padding: 0px 16px; font-size: 16px; color: #444;  text-align: center; line-height: 74px;  isplay: inline-block; transition: all .25s;}
.header ul li.search img{     height: 18px;    width: auto; 
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;}
.header ul li.search:hover img{    
	-webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);  }

.header #search{    position: absolute;    z-index: 100;    left: 0;    top: 74px;    width: 100%;    height: 80px;    background: #eee;
    overflow: hidden;    display: none;    transition: top .35s;}
.header #search form {    border: 1px solid #ddd;    border-radius: 10px;    right: 0px;    width: 400px;    height: 40px;    margin-top: 20px;    background: #fff;	max-width: 1000px;    float: right;    text-align: left;}
.header #search input[type="text"]{outline: medium;float:left;height:40px;line-height:40px;width:78%; padding:0 5%;border:none; font-family:微软雅黑; background:none;color:#777;box-sizing:border-box;overflow:hidden;}
.header #search input::-webkit-input-placeholder, .header #search textarea::-webkit-input-placeholder { color:#ccc;}
.header #search button{	float:right;width:12%;height:40px;border:none; opacity:.8;background:url(../img/go.png) no-repeat center center;background-size:auto 18px;cursor:pointer;box-sizing:border-box;overflow:hidden;}

.m_head{display:none;}
#m_search{display:none;}
#m_menu{display:none;}
@media only screen and (max-width: 768px){

	.w1200{ width:90%; margin: 0 auto;}
	.header{ display: none; }
	.m_head{ display:block; width: 100%;} 
	.m_head { position:fixed; left:0; top:0; height:60px; border-bottom:1px solid #ccc; z-index: 9999; background: #fff;}
	.m_head .logo{width:60%;height:60px; float: left;}
	.m_head .logo img{ height:60px; width:auto;}
	.m_head .m_search{ display:block; width:10%; text-align:right; line-height:60px; float: right}
	.m_head .m_search img{ height:25px; width:auto;}
	.m_head .m_menu{ display:block; width:10%; text-align:right; line-height:60px;float: right; margin: 0 20px 0 0;}
	.m_head .m_menu img{ height:25px; width:auto;}
	
	#m_search{ position:fixed; left:0; top:60px; width: 100%; z-index: 9999;background: rgba(0,40,40,.8); height: 80px;  }
	#m_search form{ position:fixed; left:0; right: 0; top:60px; width: calc(100% - 40px);padding: 20px} 
	#m_search form input{border: 1px solid #ddd;    border-radius: 5px;    width: calc(100% - 2px);    height: 40px;    background: #fff;  }
	#m_search form button {
    float: right;    width: 12%;    height: 40px;    border: none;    opacity: .8;    background: url(../img/go.png) no-repeat center center;
    background-size: auto 18px;    cursor: pointer;    box-sizing: border-box;    overflow: hidden; position: absolute; right:20px; top: 20px;}
	
	#m_menu{ display:block; position:fixed; left:-100%;top:60px;width: 100%;height: 100%; background:#eee; overflow:hidden; z-index: 999}
	#m_menu.on{ left: 0;}
	#m_menu ul{ width:90%; margin:0 auto; padding:20px 0;}
	#m_menu ul>li{display:block; width:100%; text-align:left;}
	#m_menu ul>li>a{ display:block; width:100%; padding:25px 0; font-size:16px; color:#444; margin:0px auto; text-align:left; border-bottom:1px solid rgba(0,0,0,.2); /*background:url("../images/icon-plus.png") no-repeat;*/ background-position:98% 50%; background-size:26px auto;}
	#m_menu ul>li.A>a{ color:#004EA2 !important; background:url("../images/icon-minus.png") no-repeat; background-position:98% 50%; background-size:26px auto;}
	#m_menu ul>li>div{ display:none; padding:10px 0px; width:100%; margin:0px auto;}
	#m_menu ul>li>div a{display:block;padding:5px 0;font-size:16px; color:#999;}

}	

/* ------------------                 header                --------------------------------------      */
/* ------------------                 banner                --------------------------------------      */

.banner { position: relative; }
.banner h1{ position: absolute; width: 1200px; left: 0; right: 0; top: 45%;  margin: 0 auto; color: #fff;     font-size: 30px; font-weight: 100;}
.banner h1:after {    content: "";    position: absolute;    top: 50px;    left: 0px;    width: 50px;    height: 2px;    background-color: #fff;}

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

	.banner{margin: 60px 0 0 0;}
	.banner h1{ width:100%;     font-size: 20px; display: none;}
	
}
@media only screen and (max-width: 1200px){ .banner h1{ width:100%;} }
/* ------------------                 banner                --------------------------------------      */
/* ------------------                 black1                --------------------------------------      */

.black1{ margin:50px 0;}
.black1 h2 { text-align: center;    position: relative;    display: block;    padding: 5px 0;    font-size: 28px;    font-weight: bold;    text-transform: uppercase;    color: #444;}
.black1 h2:after {    position: absolute;    content: "";    left: 50%;    margin-left: -40px;    bottom: -10px;    width: 80px;
    height: 2px;    background-color: #004EA2;}
.black1 ul{ margin:50px 0 0;}
.black1 li{ width:calc(( 100% - 90px ) / 4 ); float: left; margin: 0 30px 30px 0;}
.black1 li:nth-child(4n){ margin: 0;}
.black1 li.img{ background: #004EA2;  }
.black1 li img{; border: 1px solid #ccc; }
.black1 li span{ width:100%; line-height: 32px;     overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap; display: block; text-align: center;     background: #fff;}
.black1 li a{      position: relative;    display: block;    background-color: #000;     transition: all 0.3s;}
.black1 li a.a1:before{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -47px;
	width: 40px;
	height: 40px;
	display: block;
	content: "";
	opacity: 0;
	background: url(../img/proli_more.png) no-repeat center center;
	transition: all 0.3s;
}
.black1 li a:hover img{
	opacity: 0.4;
	border:1px solid #fff;
}
.black1 li a:hover{

}
.black1 li a.a1:hover:before{
	opacity: 1;
}

.black1 li a.tb{  display: table;    padding: 0 0 0 30px;    margin: 0 auto; background: url(../img/taobao.png) no-repeat left center;  line-height: 32px; border-radius: 20px; text-align: center;    transition: all 0.3s; color: #ff5000;}


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

	.black1{margin: 60px 0 60px 0;}
	.black1 li{ width:calc(( 100% - 30px ) / 2 ); float: left; margin: 0 30px 20px 0;}
	.black1 li:nth-child(2n){ margin: 0 0 20px;}
}


/* ------------------                 black1                --------------------------------------      */
/* ------------------                 black2                --------------------------------------      */

.black2 { position:relative; width:100%; height:490px; overflow:hidden;background-image:url("../img/search-bg.jpg");background-repeat:no-repeat;background-position:center;/*background-attachment:fixed;*//*background-size:cover;-webkit-background-size:cover;*/margin:0 auto;}
.black2  .text{ position:relative; z-index:98; width:90%; max-width:1140px; padding-top:90px; margin:0 auto;text-align:center;}
.black2  .text .en{ font-family:"Arial"; font-size:24px; text-transform:uppercase; color:#fff;}
.black2  .text .en>h1{ font-size:55px; font-weight:normal; text-transform:none;}
.black2  .text .cn{ padding:10px 0; font-size:18px; color:#fff;}
.black2  .container{ position:relative; z-index:99; width:400px; padding-top:120px; margin:0 auto; transition:all .35s;}
.black2  .container #mainsearch{ width:99.8%; height:55px; border:1px solid #fff; border-radius:30px; overflow:hidden; transition:all .35s;}
.black2  .container #mainsearch input[type="text"]{outline: medium;float:left;height:55px;line-height:55px;width:78%; padding:0 10%;border:none; font-family:微软雅黑; background:none;color:#fff;font-size:18px; box-sizing:border-box;overflow:hidden;}
.black2  .container #mainsearch input::-webkit-input-placeholder, #main .search .container #mainsearch textarea::-webkit-input-placeholder { color:#fff;}
.black2  .container #mainsearch button{float:right;width:18%;height:55px;border:none; opacity:.8;background:url(../img/go-white.png) no-repeat center center;background-size:auto 24px;cursor:pointer;box-sizing:border-box;overflow:hidden;}
.black2  .container #mainsearch:hover{ background:rgba(225,255,255,.1);}
.black2  .container #mainsearch:hover button{opacity:1;background: rgba(255,255,255,1) url(../img/go-dark.png) no-repeat center center;background-size:auto 24px;}

/* ------------------                 black2                --------------------------------------      */
/* ------------------                 black3                --------------------------------------      */

.black3{ margin:50px 0;}
.black3_left{ width: 50%; float: left;  }
.black3_left img{ width: 90%;}
.black3_right{ width:50%; float: left;  }
.black3_right h3{padding: 25px 0;    border-bottom: 1px solid #b8b6b6;    font-size: 24px;    color: #444;}
.black3_right p{margin: 25px 0;    height: 180px;    padding: 0 10px 0 0;    font-size: 14px;    line-height: 30px;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 6;    overflow: hidden; color: #333}
.black3_right a{    display: inline-block;    padding: 7px 40px;    color: #fff;    font-size: 18px;    background: #004EA2;    border: 1px solid #004EA2;    border-radius: 30px;    transition: all .35s;}
.black3_right a:hover {    background: none;    color: #004EA2;}

@media only screen and (max-width: 768px){
	.black3_left{ width: 100%; float: none;  }
	.black3_left img{ width: 100%;}
	.black3_right{ width:100%; float: none;  }
	
}



/* ------------------                 black3                --------------------------------------      */
/* ------------------                 black4                --------------------------------------      */

.black4{ padding:50px 0; background: #f4f4f4; }
.black4 h2 { text-align: center;    position: relative;    display: block;    padding: 5px 0;    font-size: 28px;    font-weight: bold;    text-transform: uppercase;    color: #444;}
.black4 h2:after {    position: absolute;    content: "";    left: 50%;    margin-left: -40px;    bottom: -10px;    width: 80px;
    height: 2px;    background-color: #004EA2;}
.black4 ul{ margin: 50px 0 20px;}
.black4 ul li{display: table;}
.black4 ul li:nth-child(1){ float: left;width: 67%; margin: 0 8px 8px 0;}
.black4 ul li:nth-child(2){ float: left; margin: 0 8px 0px 0; width: calc((67% - 8px) / 2 );}
.black4 ul li:nth-child(3){ float: left; margin: 0 8px 0px 0; width: calc((67% - 8px) / 2 );}
.black4 ul li:nth-child(4){ float: none;  width: calc(33% - 8px);}
.black4 ul li:nth-child(5){ display: none;}
.black4 ul li a{position: relative;    display: block;    width: 100%;    height: 100%;    overflow: hidden;} 
.black4 ul li img{ width: 100%; transition: all 0.2s linear; display: block;}
.black4 ul li span{position: absolute;    z-index: 2;    left: 0;    top: 0;    width: 90%;    height: 100%;    padding: 5%;    text-align: left;
    font-size: 24px;    color: #fff;    background-position: 50% 45%;    background-size: auto 70px;    content: attr(data-title);    transition: all .35s;}
.black4 ul li a:hover img {    transform: scale(1.1);}
.black4 ul li a:hover span {    background: rgba(0,0,0,.6);    background-position: 50% 45%;    background-size: auto 70px;}

@media only screen and (max-width: 768px){
	.black4 ul li:nth-child(1){ float: none;width: 100%; margin: 0 0px 8px 0;}
	.black4 ul li:nth-child(2){ float: left; margin: 0 8px 8px 0; width: calc((100% - 8px) / 2 );}
	.black4 ul li:nth-child(3){ float: left; margin: 0 0px 8px 0; width: calc((100% - 8px) / 2 );}
	.black4 ul li:nth-child(4){ float: left; margin: 0 8px 8px 0; width: calc((100% - 8px) / 2 );}
	.black4 ul li:nth-child(5){ display: block; margin: 0 0px 8px 0; width: calc((100% - 8px) / 2 );    background: #004EA2 url(../img/icon-more.png) no-repeat;
    background-position: 50% 50%;    background-size: 100px auto;    display: block!important;    float: right;    max-width: 380px;}
	.black4 ul li span{ font-size:20px;}
}


/* ------------------                 black4                --------------------------------------      */
/* ------------------                 black5                --------------------------------------      */

.black5{ padding:50px 0; background: #fff; }
.black5 h2 { text-align: center;    position: relative;    display: block;    padding: 5px 0;    font-size: 28px;    font-weight: bold;    text-transform: uppercase;    color: #444;}
.black5 h2:after {    position: absolute;    content: "";    left: 50%;    margin-left: -40px;    bottom: -10px;    width: 80px;
    height: 2px;    background-color: #004EA2;}

.black5_news{ margin:50px 0 80px;  }
.black5_news img{ float:right; width: 49%; }
.black5_news ul{    width: 49%;    text-align: left;    overflow: hidden; float: left;}
.black5_news ul h3{    font-size: 24px;    font-weight: bold;    color: #777;}
.black5_news ul li{ margin:30px 0 0 ;}
.black5_news ul a {}
.black5_news ul a span{ padding: 24px 0; font-size: 24px; color: #004EA2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .35s; display: block;}
.black5_news ul a p{    height: 70px;    font-size: 14px;    color: #444;    line-height: 24px;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3;    overflow: hidden;}


.black5_ul li{ }
.black5_ul li{ position:relative; display:block;float:left; width:48%; margin-bottom:40px;}
.black5_ul li:nth-of-type(2n){float:right;}
.black5_ul li a .time{ width:60px; text-align:center;float:left;}
.black5_ul li a .time>.day{ width:60px; height:60px; background:#999;border-radius:3px; text-align:center; overflow:hidden; color:#fff; font-size:14px; transition:all .35s;}
.black5_ul li a .time>.day>span{ display:block; padding-top:5px; font-size:24px;}
.black5_ul li a .time>.year{ padding:8px 0; font-size:14px; color:#999;}
.black5_ul li a .content{  width:86%; text-align:left;float:right;}
.black5_ul li a .content>.name{ padding-bottom:20px; font-size:18px; color:#444;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
.black5_ul li a .content>.text{ font-size:14px; color:#444; line-height:20px; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.black5_ul li a:hover .time>.day{ background:#004EA2;}
.black5_ul li a:hover .name{color:#004EA2;}

.black5_ul > a{display: table; padding: 12px 36px; font-size: 18px; color: #004EA2; border: 1px solid #004EA2; border-radius: 50px; transition: all .35s; margin:30px auto 0;}
.black5_ul > a:hover {    background: #004EA2;    color: #fff;    transform: translateY(-6px);}


@media only screen and (max-width: 768px){
	
	.black5_news img{ float:none; width: 100%; }
	.black5_news ul{float:none; width: 100%; margin: 20px 0 0 }
	.black5_ul li{ float:none; width: 100%; }
	.black5_ul li a .content{  width:calc(100% - 70px);}
}

/* ------------------                 black5                --------------------------------------      */
/* ------------------                 footer                --------------------------------------      */

.link {  }
.link a{ color: #b8b6b6; float: left; display: block; line-height: 36px;}

#foot{ width:100%; margin:0 auto;background:#ececec; padding: 50px 0;}
#foot .nav-left{ width:86%; text-align:left; float: left;}
#foot .nav-left>ul{ width:100%;}
#foot .nav-left>ul>li{ display:block; float:left; width:auto; padding-right:10%;}
#foot .nav-left>ul>li:last-of-type{ padding-right:0 !important;}
#foot .nav-left>ul>li>a{ display:block; font-size:18px; color:#555;}
#foot .nav-left>ul>li>div{ padding-top:30px;}
#foot .nav-left>ul>li>div>a{ display:block; padding:5px 0; font-size:14px; color:#555; transition:all .35s}
#foot .nav-left>ul>li>div>a:hover{ color:#004EA2;}
#foot .nav-left>ul>li>div>p{padding:5px 0; font-size:14px; color:#555; }
#foot .nav-right{ width:14%; text-align:right; float:right;}
#foot .nav-right .gotop{ padding-bottom:30px;}
#foot .nav-right .gotop>a{ display:block; font-size:18px; color:#555;}
#foot .nav-right .gotop>a>img{ margin-right:6px;}
#foot .nav-right .qrcode{position:relative;}
#foot .nav-right .qrcode img{ width:104px; height:auto;}
#foot .nav-right .qrcode .tips{ position:absolute; right:120px; bottom:0; width:120px; line-height:25px; font-size:14px; color:#555; text-align:left;}

#copyright{ width:100%; margin:0 auto; background:#004EA2;}
#copyright{ display:inline-block; color:#fff; transition:all .35s; padding: 30px 0;}

@media only screen and (max-width: 768px){
	#foot .nav-left{ width:75%; }
  #copyright .wrap{ font-size:12px; padding:20px 0;}
	#foot .nav-left>ul>li:nth-child(1){display: none;}
	#foot .nav-left>ul>li:nth-child(2){display: none;}
	#foot .nav-right{ width:25%; }
}


/* ------------------                 footer                --------------------------------------      */
/* ------------------                 about                --------------------------------------      */

.about{ margin:50px 0;    font-size: 14px;    line-height: 24px;    color: #444;    text-align: left;}
.about span{    white-space: inherit;}

/* ------------------                 about                --------------------------------------      */
/* ------------------                 news                --------------------------------------      */
.news { margin: 50px 0;}
.news li{
	background-color: #fff;
	padding: 30px;
	margin: 30px;
}
.news li a{
	display: block;
	padding-left: 260px;
	position: relative;
	height: 160px !important;
	transition: all 0.3s;
}
.news li img{
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 240px;
	height: 160px;
	transition: all 0.3s;
}
.news li h3{
	text-align: left;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 10px;
	transition: all 0.3s;
}
.news li p{
	text-align: left;
	font-size: 14px;
	line-height: 24px;
	color: #888;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.news li span{
	display: block;
	float: left;
	background-color: #fff;
	text-align: center;
	width: 100px;
	line-height: 32px;
	font-size: 14px;
	color: #D70D23;
	border: 1px solid #D70D23;
	transition: all 0.3s;
}
.news li:nth-child(2n){
	background-color: #f1f1f1;
}
.news li:nth-child(2n) h3{
	
}
.news li:nth-child(2n) a{
	padding-right: 260px;
	padding-left: 0px;
}
.news li:nth-child(2n) img{
	left: auto;
	right: 0px;
}
.news li a:hover span{
	background-color: #D70D23;
	color: #fff;
}


@media only screen and (max-width: 768px){
	.news li{ margin:0;}
.news li a{
	    padding-left: 0;
    width: 100%;
}
.news li a img{
	width: 30%;
	height: auto;
	display: none;
}
.news li:nth-child(2n) a{
	padding-left: 0px;
	padding-right: 35%;
}
}
.newnei span{    white-space: inherit;}
.newnei{
	margin: 50px 0;
	min-height: 300px;
	position: relative;
	padding-bottom: 80px;
}
.newnei .newstl{
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px dashed #ccc;
}
.newnei .newstl h3{
	text-align: center;
	font-size: 24px;
	color: #333;
	font-weight: normal;
	margin-bottom: 8px;
}
.newnei .newstl span{
	text-align: center;
	font-size: 14px;
	color: #666;
	display: block;
}
.newnei p{
	color: #444;
	text-align: left;
	font-size: 14px;
	line-height: 24px;
}
.newnei .pagefy a.page {
    display: block;
    border-radius: 15px;
    font-size: 14px;
    line-height: 26px;
    background-color: #fff;
    color: #da150c;
    border: 1px solid #da150c;
    margin-top: -60px;
    padding: 0 20px;
    float: right;
}

/* ------------------                 news                --------------------------------------      */
/* ------------------                 fenye                --------------------------------------      */

.fenye{ width: 1100px; margin:50px auto;    text-align: center;}
.fenye a{    border: #ddd solid 1px;    color: #000000;    margin:0 3px;    padding:8px 13px;}
.fenye a:hover {border: 1px solid #004EA2; background: #004EA2; color: #fff;}
.fenye a.page-num-current{border: 1px solid #004EA2; background: #004EA2; color: #fff;}
.fenye .page-status{ display: none;}
.pagefy{	width: 100%;	padding: 0px 0px;	transition: all 0.3s;}
.pagefy .pagebk{	margin: 30px 0 0;	border-top: 1px solid #dcdcdc;	padding-top: 10px;}
.pagefy .pagebk > a{	display: inline-block;	transition: all 0.3s;	color: #555;}
.pagefy p{	color: #555; line-height: 36px;}
.pagefy .pagebk > a:hover{	color: #00a496;}
@media only screen and (max-width: 1100px){
	.fenye{ width: 100%;}

}

/* ------------------                 fenye                --------------------------------------      */
/* ------------------                 dq                --------------------------------------      */

.dq{background-color: #f5f5f5;    width: 100%;    padding: 20px 20px;    border-bottom: 1px solid #eee;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}
.dq li{    display: inline-flex;    font-size: 16px;    line-height: 32px; margin: 0 0 0 40px;}
.dq li:nth-child(1){margin:0; }
.dq li.on a,.dq li:hover a{ color:#004EA2;  }
.dq li.one{ font-weight: bolder; font-size: 16px;}
@media only screen and (max-width: 768px){
	.dq{ width: 100%;  padding:5px 0;}
	.dq li{ width: 100%;  margin: 0px; }
	.dq li a{display:block;text-align: center; width: 100%; border-bottom: 1px #eee dashed; line-height: 36px;}

}

/* ------------------                 dq                --------------------------------------      */
/* ------------------                 pro                --------------------------------------      */

.pro{ margin:50px 0;}
.pro li{
	float: left;
	width: calc((100% - 9%) / 4);
	margin-right: 3%;
	margin-bottom: 30px;
}
.pro li:nth-child(4n){
	margin-right: 0px;
}
.pro li a{
	position: relative;
	display: block;
	background-color: #000;
	border-bottom: 1px solid #ddd;
	transition: all 0.3s;
}
.pro li a img{
	display: block;
	width: 100%;
	border: 1px solid #ddd;
	opacity: 1;
	transition: all 0.3s;
}
.pro li a h3{
	line-height: 24px;
	font-size: 16px;
	padding: 10px 0 20px;
	color: #555;
	font-weight: normal;
	background-color: #fff;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	text-align: center;
}
.pro li a:before{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -47px;
	width: 40px;
	height: 40px;
	display: block;
	content: "";
	opacity: 0;
	background: url(../img/proli_more.png) no-repeat center center;
	transition: all 0.3s;
}
.pro li a:hover img{
	opacity: 0.4;
	border:1px solid #fff;
}
.pro li a:hover{
	border-bottom: 1px solid #999;
}
.pro li a:hover:before{
	opacity: 1;
}
@media only screen and (max-width: 768px){
	
.pro li{	width: calc((100% - 3%) / 2);}
.pro li:nth-child(2n){	margin-right: 0px;}	
	
}

.pro_cont{ margin: 50px 0;}
.pro_cont h3{    text-align: left;    font-size: 28px;    line-height: 36px;    color: #004EA2;    font-weight: normal;    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;    padding: 20px 0 20px;}

.pro_cont span{   white-space: inherit;}
.pro_cont .w1200 > img{ max-width: 100%; margin: 0 auto;display: block;}

.pro_cont .pro_tt{
	background-color: #ececec;
	width: 100%;
	margin: 20px 0;
}
.pro_cont .pro_tt h4{
	position: relative;
	font-size: 16px;
	line-height: 42px;
	color: #004EA2;
	font-weight: normal;
	text-align: left;
	padding: 0 20px 0 25px;
}
.pro_cont .pro_tt h4:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 4px;
	height: 16px;
	margin-top: -7px;
	background-color: #004EA2;
}
.pro_cont .pagefy a.page {
    display: block;
    border-radius: 15px;
    font-size: 14px;
    line-height: 26px;
    background-color: #fff;
    color: #da150c;
    border: 1px solid #da150c;
    margin-top: -60px;
    padding: 0 20px;
    float: right;
}
@media only screen and (max-width: 768px){
	
.gbook li.submit button{ margin: 0 auto;    display: block; float: none!important;}
	
}

/* ------------------                 pro                --------------------------------------      */
.contact{ margin: 50px 0; }

/* ------------------                 pro                --------------------------------------      */


 .gbook{
	margin: 50px 0;
}
 .gbook li{
	float: left;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 15px;
}
 .gbook li:nth-child(2n){
	margin-right: 0px;
}
 .gbook li:nth-child(5){
	width: 100%;
}
 .gbook li h3{
	text-align: left;
	font-size: 14px;
	line-height: 30px;
	color: #333;
	font-weight: bold;
	margin-bottom: 5px;
}
 .gbook li h3 span{
	display: inline-block;
	color: #ff2200;
}
 .gbook li input{
    display: block;
    width: calc(100% - 20px);
    padding: 0 10px;
    font-size: 14px;
    color: #555;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 .gbook li textarea{
	display: block;
     width: calc(100% - 20px);
    padding: 0 10px;
    font-size: 14px;
    color: #555;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 .gbook li.code{
	width: 100%;
}
 .gbook li.code h5{
	float: left;
	font-size: 14px;
	line-height: 32px;
	font-weight: normal;
}
 .gbook li.code input{
	float: left;
	width: 100px;
	margin-right: 10px;
}
 .gbook li.code img{
	float: left;
	display: block;
	height: 32px;
}
 .gbook li.submit{
	width: 100%;
}
 .gbook li.submit button{
    float: left;
    font-size: 14px;
    line-height: 32px;
    width: 200px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #ccc;
    border: none;
    transition: all 0.3s;
    border-radius: 3px;
}
 .gbook li.submit button:hover{
	background-color: #D70D23;
}

/* ------------------                 pro                --------------------------------------      */

.jobli{ margin:50px 0;}
.jobli li{
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}
.jobli li h3{
	position: relative;
	line-height: 50px;
	font-size: 16px;
	color: #333;
	font-weight: normal;
	text-align: center;
}
.jobli li h3 a.btn{
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background-color: #D70D23;
}
.jobli li h3 a.btn:after{
	content: "+";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	font-weight: normal;
	transition: all 0.3s;
}
.jobli li.on h3 a.btn:after{
	content: "-";
}
.jobli li .jobli_box{
	display: none;
	background-color: #fff;
	padding: 0px 20px;
	text-align: left;
	font-size: 14px;
	color: #666;
	line-height: 20px;
}
.jobli li:nth-child(1) .jobli_box{
	display: block;
}
.jobli li .jobli_box p{
	font-size: 14px;
	color: #666;
	line-height: 20px;
}
.jobli li .jobli_box span{
	display: inline-block;
	width: 25%;
	font-size: 14px;
	color: #666;
	line-height: 20px;
	/*margin-right: 45px;*/
}
.jobli li .jobli_box .jobli_text{
	padding-top: 10px;
}
.jobli li .jobli_box .jobli_text2{
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px dashed #ccc;
	padding-bottom: 10px;
}

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

.jobli li .jobli_box span{
	width: 33.33%;
}

}

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

.jobli li .jobli_box span{
	width: 50%;
}

}

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

.jobli li .jobli_box span{
	width: 100%;
}

}