﻿/*二级*/
.banner{ height:400px; }
.banner .swiper-pagination .swiper-pagination-bullet{ width:30px; height:5px; margin:0px 2px; background-color:#fff; opacity:1; border-radius:0px;}
.banner .swiper-pagination .swiper-pagination-bullet-active{ background-color:#000;}
    
.main-layout{ position:relative; width:100%; padding-bottom:50px; }
.main-layout .container{ position:relative; width:1200px; margin:0 auto;}
.main-layout .left-con{ float:left; display:inline; width:230px;}
.main-layout .left-con .one-column{ width:100%; height:76px; padding-top:30px; background:url(../images/icon2.png) no-repeat; text-align:center; font-size:26px; color:#ffffff;}
.main-layout .left-con .left-nav{ width:100%; padding:20px 0px 40px 0px; background-color:#ffffff;}
.main-layout .left-con .left-nav li{ position:relative; width:100%; }
.main-layout .left-con .left-nav li i{ display:none; position:absolute; right:0px; top:12px; width:4px; height:26px; background-color:rgba(255, 102, 0, 1);}
.main-layout .left-con .left-nav li a{ display:block; width:170px; padding:15px 0px; margin:0px auto auto auto; font-size:15px; text-align:center; color:#333; border-bottom:solid 1px rgba(240,240,240,1);}
.main-layout .left-con .left-nav li a:hover{ text-decoration:none;}
.main-layout .left-con .left-nav li:hover a,.main-layout .left-con .left-nav li.active a{ color:rgba(255, 102, 0, 1);}
.main-layout .left-con .left-nav li:hover i,.main-layout .left-con .left-nav li.active i{ display:block;}

.main-layout .left-con  .pro-nav li a{ position:relative; width:80px; padding-left:90px; text-align:left;}
.main-layout .left-con  .pro-nav li a img{ position:absolute; top:15px; right:90px;}

.main-layout .right-con{ float:right; width:1080px;}
.main-layout .location{ width:100%; padding:20px 0 0 10px; }
.main-layout .location li{ display:inline-block; padding:0px 3px; font-size:14px;}
.main-layout .location a{ color:#00a1e7; }

.main-layout .right-con .location li.home{ position:relative;}
.main-layout .right-con .location li.home a{ padding-left:20px;  color:rgba(255, 102, 0, 1);}
.main-layout .right-con .location li.home:before{ content: ""; position:absolute; left:0px; top:2px; width:16px; height:16px; background:url(../images/icon3.png) no-repeat ; background-size:100%;}

.main-layout .right-con .con-wrap{}

.main-layout .pro-top-nav{ width:100%; height:auto; border-bottom:solid 1px #ddd; padding:6px 0; text-align:center;  }
.main-layout .pro-top-nav ul{ width:1200px;  height:auto; margin:0px auto 0px auto; text-align:left; }
.main-layout .pro-top-nav li{ position:relative; display:inline-block; min-width:144px; height:48px; line-height:48px; margin:0px 3px; }
.main-layout .pro-top-nav a{ position:relative; display:inline-block; min-width:144px; height:48px; line-height:48px; padding:0px 10px; font-size:14px;  text-align:center; color:#333; }
.main-layout .pro-top-nav a:hover,.main-layout .pro-top-nav a.active{ text-decoration:none; color:#00a1e7; }
.main-layout .pro-top-nav a:before { position: absolute; content: ''; left: 50%; bottom: 0px; width: 0%; height: 3px; background-color: none; transition: all .3s;}
.main-layout .pro-top-nav a:hover:before{ width:80%; left:10%; background-color:#00a1e7; }
.main-layout .pro-top-nav a:after { content: ""; position: absolute; width: 1px; height: 15px; display: block; background: #ccc; top: 50%; margin-top: -7px; right: 0px;}

/*文章内容*/
.single-page{ width:100%; padding-top:30px; line-height:32px;  font-size:14px; color: #333; }
.single-page p{ margin-bottom: 5px; line-height: 28px; color: #221815; font-size: 16px; }
.single-page h3{ line-height: 50px;height: 50px; color: #fe7418; font-size: 18px; background-color:#efefef}
.single-page span{ line-height: 28px; margin: 5px auto auto auto; }

.single-page .title{ font-size:20px; font-weight:bold; text-align:center; padding-bottom:15px;}
.single-page-full{ width:100%; margin: 40px auto auto auto; padding:0px 50px 20px 50px;  line-height:32px;  font-size: 14px; color: #6b6b6c; }
.single-page-full p{ margin-bottom: 10px; line-height: 28px; color: #221815; font-size: 18px; }
.single-page-full span{ line-height: 28px; margin: 5px auto auto auto; }

/*图片新闻列表*/
.img-news-list{ width:100%; margin:0px auto auto auto; min-height: 300px; }
.img-news-list li{  position: relative; float: left; width: 100%;  margin:20px 0px 0px; padding:10px 0px 30px; border-bottom:dashed 1px rgba(221, 221, 221, 1);}
.img-news-list .news-pic{ float:left; width:168px; height:138px; margin-right: 15px;}
.img-news-list .news-pic img{ width:168px; height:138px; }
.img-news-list .news-right{ width: auto; }
.img-news-list .noimg{ width: auto; }
.img-news-list .news-title{ padding-top: 10px; line-height: 24px; }
.img-news-list .news-title a{ font-size: 17px; color:rgba(0, 0, 0, 1); }
.img-news-list .news-title a:hover{ color:rgba(255, 102, 0, 1); text-decoration: underline; }
.img-news-list .news-desc{padding-top: 10px;line-height: 26px;font-size: 14px;color: #7d7d7d;}
.img-news-list .href{ font-size: 12px; color:#c8c8c8; }
.img-news-list .href span{ font-size: 12px; color: #969696; }

/*详细页*/
.detail-page{ position: relative; width:100%; margin: 30px auto auto auto; padding:0px 0px 20px 0px; }
.detail-page .detail-title{ width: 100%; line-height: 38px; font-size:23px; text-align: center; color: #000000; }
.detail-page .detail-time{ width: 100%; height: 28px; line-height: 28px; margin: 10px auto 20px auto; padding-bottom:5px; font-size: 12px; text-align: center; color: #969696; border-bottom:solid 1px rgba(240,240,240,1); }
.detail-page .detail-content{ width: 100%; line-height: 32px; margin: 10px auto auto auto; font-size: 14px; color: #6b6b6c; min-height: 300px; }
.detail-page .detail-content p{ line-height: 32px; margin: 5px auto auto auto; }

.detail-page .detail-content .pro-left{ float:left; display:inline; width:780px;}
.detail-page .detail-content .pro-left img{ max-width:780px;}
.detail-page .detail-content .pro-right{ float:right; display:inline; width:400px;}
.detail-page .detail-content .pro-right img{ width:400px;}
.detail-page .pdf{ padding:10px 10px 10px 50px; color:#ffffff; font-size:18px; background:url(../images/icon6.png) 10px 6px no-repeat rgba(255, 102, 0, 1);}

/*上下*/
.prev-next{ width:100%; margin:30px auto auto auto; padding:5px 0; border-bottom:solid 1px #e7e7e7; border-top:solid 1px #e7e7e7; font-size:14px;}
.prev-next li{ line-height:28px; padding:0px; color:#656565;}
.prev-next li a{ color:#656565;}
.prev-next li a:hover{ color:rgba(255, 102, 0, 1);}
.prev-next li span{ display:inline-block; color:#333333;  padding-left:10px;}

/*案例*/
.case-list{ width:100%; margin:28px auto auto auto; }
.case-list li{ width: calc((100% - 60px)/3); float: left; margin: 10px; cursor:pointer; background: #f7f8fa;}
.case-list li a{ text-decoration:none;}
.case-list li .img{ position:relative; height: 235px; display: block; line-height: normal; overflow: hidden; }
.case-list li .img mark { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(235,97,35,.2); background: #eb6123\9; filter: alpha(opacity=20); z-index: 20; opacity: 0; transform: skewX( 45deg ); visibility: hidden; transition: 360ms;}
.case-list li .img mark:before { content: ""; width: 100%; height: 0%; border-left: 3px solid #eb6123; border-right: 3px solid #eb6123; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.case-list li .img mark:after { content: ""; width: 0%; height: 100%; border-top: 3px solid #eb6123; border-bottom: 3px solid #eb6123; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.case-list li .img mark b { display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; z-index: 30; }
.case-list li .img mark b:before { content: ""; width: 100%; height: 1px; background: #eb6123; position: absolute; left: 0; top: 23px; transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); }
.case-list li .img mark b:after { content: ""; width: 1px; height: 100%; background: #eb6123; position: absolute; left: 23px; top: 0; transform: translateY(-200px);  -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); }
.case-list li .img img{ display: block; width: 394px; height: 235px; }
.case-list li .title{ height:40px; line-height:40px; padding:30px 10px; display: flex; justify-content: space-between; font-size: 15px;}
.case-list li .title span{ color:#333;}
.case-list li .title span.more{ color:#00a1e7;}
.case-list li .other{ display: block; color: #5d5d5d; font-size: 14px; line-height: normal; margin-top: 5px; transition: 350ms; }

.case-list li:hover .img mark{ opacity:1; transform:skewX(0); visibility:visible;} 
.case-list li:hover .img mark:before{ height:100%; transition:330ms 200ms;} 
.case-list li:hover .img mark:after{ width:100%; transition:330ms 200ms;} 
.case-list li:hover .img mark b:before{ transition:355ms 180ms; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0);} 
.case-list li:hover .img mark b:after{ transition:355ms 240ms; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);} 
.case-list li:hover .img img{ transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05);} 
.case-list li:hover .title{color:#00a1e7;}
.case-list li:hover .title span{color:#00a1e7;}
.case-list li:hover .other{color:#00a1e7;}

/*员工风采*/
.ygfc-title{ width:90%; margin:0px auto auto auto; padding-top:30px; font-size: 30px; color: #ff6600;}
.ygfc-con{ width:90%; margin:0px auto auto auto; padding-top:10px; font-size: 16px; color: #666666;}
.ygfc-con p{ line-height:32px; text-indent:2em;}
.ygfc-list{ width:100%; margin:28px auto auto auto; }
.ygfc-list li{ width: calc((100% - 60px)/3); float: left; margin: 10px; cursor:pointer; }
.ygfc-list li .img{ position:relative; background-color: #eee; height: 226px; display: block; line-height: normal; overflow: hidden; }
.ygfc-list li .img mark { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(235,97,35,.2); background: #eb6123\9; filter: alpha(opacity=20); z-index: 20; opacity: 0; transform: skewX( 45deg ); visibility: hidden; transition: 360ms;}
.ygfc-list li .img mark:before { content: ""; width: 100%; height: 0%; border-left: 3px solid #eb6123; border-right: 3px solid #eb6123; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.ygfc-list li .img mark:after { content: ""; width: 0%; height: 100%; border-top: 3px solid #eb6123; border-bottom: 3px solid #eb6123; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.ygfc-list li .img mark b { display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; z-index: 30; }
.ygfc-list li .img mark b:before { content: ""; width: 100%; height: 1px; background: #eb6123; position: absolute; left: 0; top: 23px; transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); }
.ygfc-list li .img mark b:after { content: ""; width: 1px; height: 100%; background: #eb6123; position: absolute; left: 23px; top: 0; transform: translateY(-200px);  -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); }
.ygfc-list li .img img{ display: block; width: 100%; height: auto; transition: 424ms linear; }
.ygfc-list li .title{ display: block; color: #5d5d5d; font-size: 16px; line-height: normal; margin-top: 14px; transition: 350ms; color:#000;}
.ygfc-list li .other{ display: block; color: #5d5d5d; font-size: 14px; line-height: normal; margin-top: 5px; transition: 350ms; }

.ygfc-list li:hover .img mark{ opacity:1; transform:skewX(0); visibility:visible;} 
.ygfc-list li:hover .img mark:before{ height:100%; transition:330ms 200ms;} 
.ygfc-list li:hover .img mark:after{ width:100%; transition:330ms 200ms;} 
.ygfc-list li:hover .img mark b:before{ transition:355ms 180ms; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0);} 
.ygfc-list li:hover .img mark b:after{ transition:355ms 240ms; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);} 
.ygfc-list li:hover .img img{ transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05);} 
.ygfc-list li:hover .title{color:#eb6123;}
.ygfc-list li:hover .other{color:#eb6123;}

/*产品*/
.product-list{ width:100%; margin:5px auto auto auto; }
.product-list li{ width: calc((100% - 60px)/3); float: left; margin: 10px; cursor:pointer; }
.product-list li .img{ position:relative; background-color: #eee; width:380px; height:380px;  display: block; line-height: normal; overflow: hidden; }
.product-list li .img mark { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0,161,231,.2); filter: alpha(opacity=20); z-index: 20; opacity: 0; transform: skewX( 45deg ); visibility: hidden; transition: 360ms;}
.product-list li .img mark:before { content: ""; width: 100%; height: 0%; border-left: 3px solid #00a1e7; border-right: 3px solid #00a1e7; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.product-list li .img mark:after { content: ""; width: 0%; height: 100%; border-top: 3px solid #00a1e7; border-bottom: 3px solid #00a1e7; box-sizing: border-box; position: absolute; left: 0; top: 0; transition: 320ms; }
.product-list li .img mark b { display: block; width: 46px; height: 46px; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; z-index: 30; }
.product-list li .img mark b:before { content: ""; width: 100%; height: 1px; background: #00a1e7; position: absolute; left: 0; top: 23px; transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); }
.product-list li .img mark b:after { content: ""; width: 1px; height: 100%; background: #00a1e7; position: absolute; left: 23px; top: 0; transform: translateY(-200px);  -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); }
.product-list li .img img{ display: block; width:380px; height:380px; transition: 424ms linear; }
.product-list li .title{ display: block; color: #000000; font-size: 16px; line-height: normal; margin-top: 14px; transition: 350ms; }
.product-list li .other{ display: block; color: #5d5d5d; font-size: 14px; line-height: normal; margin-top: 5px; transition: 350ms; }

.product-list li:hover .img mark{ opacity:1; transform:skewX(0); visibility:visible;} 
.product-list li:hover .img mark:before{ height:100%; transition:330ms 200ms;} 
.product-list li:hover .img mark:after{ width:100%; transition:330ms 200ms;} 
.product-list li:hover .img mark b:before{ transition:355ms 180ms; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0);} 
.product-list li:hover .img mark b:after{ transition:355ms 240ms; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);} 
.product-list li:hover .img img{ transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05);} 
.product-list li:hover .title{color:#00a1e7; text-decoration:none;}
.product-list li:hover .other{color:#00a1e7;}
.product-list li a:hover{ text-decoration:none;}


/*留言内容*/
.msg-single-page{ position:relative; width:100%; margin:0px auto auto auto; padding:30px 0px 20px 0px; line-height:32px; font-size: 14px; color: #6b6b6c; }
.msg-map{ width:100%; height:450px; margin:20px auto auto auto; background-color:#ffffff; }
.msg-tab-con{ position:relative; width:100%; height:520px;  margin:30px auto 30px auto;  background:url(../images/linkUsLyBg.jpg) top no-repeat;}
.msg-tab-con .title{ position:absolute; top:16px; }
.msg-tab-con .title h3{ font-size: 24px; color: #0d3674; } 
.msg-tab-con .title p{ font-size: 14px; color: #666666; font-family: arial; margin-top: 10px; line-height:30px }

/*在线留言*/
.msg-tab{ width:500px; margin-left:620px; padding-top:55px; }
.msg-tab td{}
.msg-tab td .txt{width: 408px; height: 58px; line-height: 58px; padding: 0 70px 0 20px; border: none; border: 1px solid #e5e5e5; font-size: 16px; color: #999999; margin-bottom: 20px; outline: none; font-size: 16px; color: #999999; }
.msg-tab td .input1 { background: url(../images/linkUsLy_icon01.png) no-repeat 452px center; }
.msg-tab td .input2 { background: url(../images/linkUsLy_icon02.png) no-repeat 452px center;}
.msg-tab td textarea { width: 408px; height: 80px; padding: 0 70px 0 20px; border: none; border: 1px solid #e5e5e5; font-family:Arial; font-size: 16px; color: #999999; margin-bottom:10px; outline: none; font-size: 16px; color: #999999; padding-top: 20px; background: url(../images/linkUsLy_icon03.png) no-repeat 452px 20px; resize: none;}

.msg-tab td label{ display: inline-block; float: left; line-height: 60px; height: 58px; width: 77px; border: 1px solid #dedede; border-right-width: 0; text-align: center; background: #fff; }
.msg-tab td .yzm{ float: left; width: 130px; margin-bottom: 0px; }
.msg-tab td .yzm-img{ width:150px; height:57px; margin-left:20px; margin-top:0px; cursor:pointer; border:solid 1px #B2D1E3;  vertical-align:middle;}
.msg-tab td .btn{ display: block; width: 100%; height: 60px; margin-top:20px; text-align: center; font-size:22px; color:#fff; line-height: 60px; background:#00a1e7; text-decoration: none; outline: none; border:0px; cursor:pointer; }

    
    
/*图片垂直滚动效果*/
    
.effect-vertical
{
    position:relative;
	width:995px;
	margin:34px auto 0px auto;
	}
.effect-vertical .head-img
{
    float:left;
    display:inline;
    width:130px;
	height:512px;
	text-align:center;
    }
.effect-vertical .pro-img
{
    float:left;
    display:inline;
    width:714px;
    }

.effect-vertical .pro-img img
{
    width:714px;
	height:572px;
    }
.effect-vertical .pro-img .describe
{
    line-height:24px;
    padding-top:20px;
    font-size:14px;
    color:#221815;
    }
    
.effect-vertical .pro-con
{
    float:right;
    display:inline;
    position:relative;
    width:258px;
    height:572px;
    }
.effect-vertical .pro-con .pro-up
{
    position:absolute;
    left:112px;
    top:-15px;
    width:33px;
    height:13px;
    background:url(../images/icon-13.png);
    cursor:pointer;
    }
.effect-vertical .pro-con .pro-down
{
    position:absolute;
    left:112px;
    bottom:-15px;
    width:33px;
    height:13px;
    background:url(../images/icon-14.png);
    cursor:pointer;
    }
.effect-vertical .pro-con .pro-hiddle
{
    position:absolute;
    top:0px;
    left:0px;
    width:258px;
    height:572px;
    overflow:hidden;
    }
.effect-vertical .pro-con .pro-list
{
    position:absolute;
    left:0px;
    top:0px;
    width:258px;
    }
.effect-vertical .pro-con .pro-list li
{
    float:left;
    display:inline;
    width:258px;
    height:195px;
    text-align:center;
    }
.effect-vertical .pro-con .pro-list li img
{
    width:256px;
    height:180px;
    border:solid 1px #22374a;
    border-radius:1px;
    }
    
/*图片水平滚动效果*/
.effect-horizontal
{
    position:relative;
	width:1150px;
	margin:0px auto auto auto;
	padding-top:18px;
	padding-bottom:45px;
	}
.effect-horizontal .pro-img
{
    width:1014px;
	height:800px;
	margin:0px auto auto auto;
    }
.effect-horizontal .pro-img img
{
    width:1014px;
	height:800px;
    }
.effect-horizontal .describe
{
    width:1000px;
    margin:0px auto auto auto;
    padding:15px 0px;
    }
.effect-horizontal .describe .left-class
{
    float:left;
    display:inline;
    width:300px;
    padding-top:8px;
    }
.effect-horizontal .describe .left-class span
{
    display:inline-block;
    height:42px;
    line-height:42px;
    padding:0px 45px;
    border:solid 1px #595757;
    font-size:28px;
    color:#7fbe25;
    }
.effect-horizontal .describe .describe-con
{
    float:left;
    display:inline;
    width:665px;
    line-height:24px;
    padding-top:3px;
    font-size:14px;
    color:#5e686d;
    }
.effect-horizontal .pro-con
{
    position:relative;
    width:1150px;
    height:134px;
    margin:32px auto auto auto;
    }
.effect-horizontal .pro-con .pro-up
{
    position:absolute;
    left:0px;
    top:58px;
    width:45px;
    height:45px;
    background:url(../images/arrowleft.jpg) 0px 0px no-repeat;
    cursor:pointer;
    }

.effect-horizontal .pro-con .pro-down
{
    position:absolute;
    right:0px;
    top:58px;
    width:45px;
    height:45px;
    background:url(../images/arrowright.jpg) 0px 0px no-repeat;
    cursor:pointer;
    }
    
.effect-horizontal .pro-con .pro-hiddle
{
    position:absolute;
    top:0px;
    left:67px;
    width:1017px;
    height:186px;
    overflow:hidden;
    }
.effect-horizontal .pro-con .pro-img-list
{
    position:absolute;
    left:0px;
    top:0px;
    height:186px;
    }
.effect-horizontal .pro-con .pro-img-list li
{
    float:left;
    display:inline;
    width:339px;
    height:186px;
    text-align:center;
    cursor:pointer;
    background-color:transparent;
    }
.effect-horizontal .pro-con .pro-img-list li img
{
    width:240px;
    height:184px;
    }
.lie4{justify-content: center;  }
.lie4 li{ width: calc((100% - 105px)/4);float: left;margin: 10px;cursor: pointer; }
.lie4 li img{ margin: 0 auto;width:100%; }

.lie3{  justify-content: center;  }
.lie3 li{ width: calc((100% - 60px)/3);float: left;margin: 10px;cursor: pointer; }
.lie3 li img{ margin: 0 auto;width:100%; }

.lie2{  justify-content: center;  }
.lie2 li{ width: calc((100% - 60px)/2);float: left;margin: 10px;cursor: pointer; }
.lie2 li img{ margin: 0 auto;width:100%; }
.blank15 {height: 15px;}
