@charset "gb2312";
/* CSS Document */
/*
body.overflow, html.overflow { overflow-y: hidden }
html::-webkit-scrollbar { display:  none; }*/

html { height: 100%; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
body { margin: 0; font-family:'Microsoft YaHei', Arial,sans-serif; color: #666; background: #fff }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1 }
p { margin: 0 }
address { margin-bottom: 1.125rem; font-style: normal; line-height: inherit }
dd, dl, ol, ul { margin: 0; padding: 0; list-style: none }
a { color: inherit; text-decoration: none }
i { font-style: inherit }
ul, li, ol { list-style: none;}
figure { margin: 0 }
img { vertical-align: top; border: 0 none }
img::-moz-selection { background: 0 0 }
img::selection { background: 0 0 }
hr { visibility: visible; height: 1px; margin: 0; background: #eee; border: 0 none }
svg { width: 100%; height: 100% }
*, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box }
.clearfix:after{ display: block;clear:both; content: ""; visibility: hidden; height: 0;}
.clearfix{ zoom: 1;}
:focus { outline: 0 none }
.fl {float: left;}
.fr {float: right;}
.container{ width: 1300px; margin: 0 auto;}
.fixedImg {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.l { float: left; display: inline-block; }

.r { float: right; display: inline-block; }


/* µÈ±ÈÌî³ä */
*[class*="rect-"]{position: relative;display: block; width: 100%;height: 0;overflow: hidden;}
*[class*="rect-"] .full{position: absolute;left: 0;top:0;width: 100%;height: 100%;
*height: auto;}
.rect-58{padding-bottom: 58%;}
.rect-68{padding-bottom: 68%;}
.rect-70{padding-bottom: 70%;}
.rect-78{padding-bottom: 78%;}
.rect-100{padding-bottom: 100%;}
.rect-140{padding-bottom: 140%;}
.rect-130{padding-bottom: 130%;}
.rect-156{padding-bottom: 156%;}

.header{ width: 100%; position: fixed; height: 90px; background: #fff;z-index: 999; box-shadow:0 0 10px rgba(0,0,0, 0.2)}
.header .logo{ position: relative;height: 50px; margin: 20px 0;}
.header .nav>ul>li{ display: inline-block;}
.header .nav>ul>li a{ color:#fff; margin:0 25px; line-height: 90px; font-size: 18px; color: #333;  display: block;position: relative; }
.header .nav .nLi{ float:left; display:inline; text-align: center; line-height: 60px;position: relative;}
.header .nav .nLi:hover{ background:#fff; }
.header .nav .nLi:hover>a{ color: #ed7d31; }
.header .nav .nLi.active{ background:#fff; color:#ed7d31; }
.header .nav .nLi.active>a{ color:#ed7d31; font-weight: bold;}
.header .nav .sub{ display:none; width:100%; left:0; top:90px; z-index: 9999;  position:absolute; background:#ed7d31;  line-height:35px; padding:5px 0;}
/*.header .nav .nLi:nth-child(3) .sub{ width: 220px;}*/
.header .nav .nLi:nth-child(6) .sub{ width: 160px;}
.header .nav .sub li{ width: 100%; position:relative;}
.header .nav .sub a{ display:block; color: #fff; font-size: 15px; line-height: 45px; margin: 0; text-align: center;}
.header .nav .sub li:hover{ background:#faa164; color:#fff; }
.header .nav .sub li dl{ display:none; position:absolute; width:130px; background:#FAA164; left:100%; top:0;}
.header .nav .sub li:hover dl{ display:block;}
.header .nav .sub li dl dd a:hover{ background:rgba(255,255,255,.3); color:#333;}


/* banner */
.banner{position:relative; overflow:hidden; margin:0 auto; width:100%;}
.banner .bd{position:relative; z-index:0;margin: 0 auto; overflow: hidden;}
.banner .bd li{position:relative; text-align:center; overflow:hidden;}
.banner .bd li img{vertical-align:top; width:100%;}
.banner .hd{ position: absolute; bottom:3%; text-align: center; width: 100%; }
.banner .hd li {cursor:pointer;display:inline-block;*display:inline;zoom:1;width:12px;height:12px;background: #fff; border-radius:6px; margin:0 5px;overflow:hidden;line-height:999px;}
.banner .hd .on{background:#ed7d31;}
.banner .prev, .banner .next{display:block;position:absolute;z-index:1;top:50%;margin-top:-22px;left:8%;z-index:1;width:44px;height:44px;background:url(../images/ad_ctr.png) 0 0 no-repeat;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;display:none;}
.banner .next {left:auto;right:8%;background-position:0 -44px;}

.InAbout{ width: 100%; position: relative; padding: 60px 0;}
.InAbout .InAboutl{ width: 53%; float: left;}
.InAbout .InAboutl .AboTit{ font-size: 20px; color: #000; font-weight: bold; position: relative;}
.InAbout .InAboutl .AboTit::after{ content: ''; position: absolute; width: 30px; height: 2px; left: 0; bottom: -25px; background: #dedede;}
.InAbout .InAboutl .AboTxt{ font-size: 30px; color: #ed7d31; font-weight: bold; margin: 45px 0 30px;}
.InAbout .InAboutl .AboCon{ font-size: 14px; color: #666; line-height: 30px;}
.InAbout .InAboutl .AboIcon{ width: 100%; position: relative; margin: 60px 0 30px;display: flex;}
.InAbout .InAboutl .AboIcon a{ display: block; width: 25%; text-align: center;}
.InAbout .InAboutl .AboIcon a:hover .AboIco{ -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: beat 0.5s 1; animation: beat 0.5s 1;}
@keyframes beat {
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
    from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
    25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
    50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
    75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
.InAbout .InAboutl .AboIcon p{ font-size: 16px; color: #333; font-weight:  500; line-height: 50px;}
.InAbout .InAboutl .AboIcon a:hover p{color: #ed7d31;}
.InAbout .InAboutr{ width: 38%;  float: right; position: relative;}
.InAbout .InAboutr .videolist {width: 470px; height: 350px; background: url(../images/video_bg.jpg) center center no-repeat; position: relative;}
.InAbout .InAboutr .videolist::before{ content: ''; position: absolute;background: url(../images/abokbg.jpg) center no-repeat; width: 550px; height: 370px;bottom: -100px; right: -30px; z-index: -1;}
.InAbout .InAboutr .videolist:hover{ cursor: pointer; }
.InAbout .InAboutr .videoed {width: 34px; height: 34px; position: absolute; top:50%; left: 50%; margin-left: -17px; margin-top: -17px; z-index:99; border-radius:100%;display: block !important; }
.InAbout .InAboutr .videos{ display:none; position:fixed; left:0; top:0;    z-index:999; width:100%; height:100vh; background: rgba(0, 0, 0, .8);  }
.InAbout .InAboutr .videosList{ position: relative;width: 60%; margin: 8% auto 0;}
.InAbout .InAboutr .vclose{ position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }

.InProduct{ width: 100%; position: relative; padding: 60px 0; background: #f2f2f2;}
.InProduct .Top{ font-size: 28px; color: #ed7d31; text-align: center;font-weight: bold;}
.InProduct .ProductCate{position: relative; text-align: center; width: 90%; margin: 20px auto 0; }
.InProduct .ProductCate a{ font-size: 15px; color: #666; line-height: 28px; position: relative; margin: 0 15px; padding-left:5px; display: inline-block;}
.InProduct .ProductCate a::before{ content: '/'; position: absolute; right: -26px; top: 0; font-size: 15px; color: #666;}
.InProduct .ProductCate a:last-child::before{ display: none;}
.InProduct .ProductCate a:hover{color: #ed7d31;}
.InProduct .ProductBox{ position: relative; margin-top: 30px;}
.InProduct .ProductBox .ProDl{ width: 33.333%; margin-right: 1.5%; float: left; position: relative;}
.InProduct .ProductBox .ProDl .Img{position:relative ; overflow: hidden; width: 100%;}
.InProduct .ProductBox .ProDl .Img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InProduct .ProductBox .ProDl:hover .Img img{transform: scaleX(1.1) scaleY(1.1);}
.InProduct .ProductBox .ProDl .ProTit{ width: 100%; position:absolute; bottom: 0; left:0; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;}
.InProduct .ProductBox .ProDl .ProTit .Text_box{ padding: 15px 25px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;  background: -webkit-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -o-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -moz-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));}
.InProduct .ProductBox .ProDl .ProTit p{ font-size: 15px; color: #fff; font-weight: bold;}
.InProduct .ProductBox .ProDl .ProTit span{font-size: 14px; color: #fff; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 5px 0;}
.InProduct .ProductBox .ProDl .ProTit b{font-size: 14px; color: #666; font-weight: normal; margin-top: 15px; display: none; }
.InProduct .ProductBox .ProDl:hover .ProTit .Text_box{ padding: 18px 25px;}
.InProduct .ProductBox .ProDl:hover .ProTit p{color: #fff;}
.InProduct .ProductBox .ProDl:hover .ProTit span{color: #fff;}
.InProduct .ProductBox .ProDl:hover .ProTit b{ display: block; color: #fff;}
.InProduct .ProductBox .ProDr{ float: left; width: 65.167%; position: relative;}
.InProduct .ProductBox .ProDr .ProDr1{ width: 100%; position: relative;}
.InProduct .ProductBox .ProDr .ProDr1 .saml{ width: 49%; margin-right: 2%; float: left; display: block;}
.InProduct .ProductBox .ProDr .ProDr1 .saml:last-child{ margin-right: 0;}
.InProduct .ProductBox .ProDr .ProDr1 .saml .Img{position:relative ; overflow: hidden; width: 100%;}
.InProduct .ProductBox .ProDr .ProDr1 .saml .Img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InProduct .ProductBox .ProDr .ProDr1 .saml:hover .Img img{transform: scaleX(1.1) scaleY(1.1);}
.InProduct .ProductBox .ProDr .ProDr1 .saml .ProTit{ width: 90%; position:absolute; bottom: 5%; left: 5%; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;}
.InProduct .ProductBox .ProDr .ProDr1 .saml .ProTit .Text_box{ padding: 15px 15px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;  background: -webkit-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -o-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -moz-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));}
.InProduct .ProductBox .ProDr .ProDr1 .saml .ProTit p{ font-size: 15px; color: #fff; font-weight: bold;}
.InProduct .ProductBox .ProDr .ProDr1 .saml .ProTit span{font-size: 14px; color: #fff; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 5px 0;}
.InProduct .ProductBox .ProDr .ProDr1 .saml .ProTit b{font-size: 14px; color: #666; font-weight: normal; margin-top: 15px; display: none; }
.InProduct .ProductBox .ProDr .ProDr1 .saml:hover .ProTit .Text_box{background: -webkit-linear-gradient(110deg, #439079, #267f93);background: -o-linear-gradient(110deg, #439079, #267f93);background: -moz-linear-gradient(110deg, #439079, #267f93);background: linear-gradient(110deg, #439079, #267f93); padding: 30px 15px;}
.InProduct .ProductBox .ProDr .ProDr1 .saml:hover .ProTit p{color: #fff;}
.InProduct .ProductBox .ProDr .ProDr1 .saml:hover .ProTit span{color: #fff;}
.InProduct .ProductBox .ProDr .ProDr1 .saml:hover .ProTit b{ display: block; color: #fff;}
.InProduct .ProductBox .ProDr .ProDr2{ width: 100%; position: relative; }
.InProduct .ProductBox .ProDr .ProDr2 .saml{ width: 32.333%; margin-right: 1.5%; float: left; display: block; margin-bottom:15px;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:last-child{ margin-right: 0;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:nth-child(3n){ margin-right: 0;}
.InProduct .ProductBox .ProDr .ProDr2 .saml .Img{position:relative ; overflow: hidden; width: 100%;}
.InProduct .ProductBox .ProDr .ProDr2 .saml .Img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:hover .Img img{transform: scaleX(1.1) scaleY(1.1);}
.InProduct .ProductBox .ProDr .ProDr2 .saml .ProTit{ width: 100%; position:absolute; bottom: 0; left: 0; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;}
.InProduct .ProductBox .ProDr .ProDr2 .saml .ProTit .Text_box{ padding: 15px 15px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;  background: -webkit-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -o-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -moz-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));}
.InProduct .ProductBox .ProDr .ProDr2 .saml .ProTit p{ font-size: 15px; color: #fff; font-weight: bold;}
.InProduct .ProductBox .ProDr .ProDr2 .saml .ProTit span{font-size: 14px; color: #fff; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 5px 0;}
.InProduct .ProductBox .ProDr .ProDr2 .saml .ProTit b{font-size: 14px; color: #666; font-weight: normal; margin-top: 15px; display: none; }
.InProduct .ProductBox .ProDr .ProDr2 .saml:hover .ProTit .Text_box{ padding: 18px 15px;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:hover .ProTit p{color: #fff;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:hover .ProTit span{color: #fff;}
.InProduct .ProductBox .ProDr .ProDr2 .saml:hover .ProTit b{ display: block; color: #fff;}

.InField{ width: 100%; position: relative; padding: 60px 0; background: url(../images/fieldbg.jpg) center bottom no-repeat;}
.InField .Top{ font-size: 28px; color: #ed7d31; text-align: center; font-weight: bold;}
.InField .Titcon{ font-size: 15px; color: #666; text-align: center; margin-top: 20px;}
.InField .FieldBox{ position: relative; width: 100%; margin-top: 30px;}
.InField .FieldBox .Item{width: 100%; position: relative;}
.InField .FieldBox .Item .FielDl{ width: 46%; float: left; position: relative; overflow: hidden;}
.InField .FieldBox .Item .FielDl img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InField .FieldBox .Item .FielDr{ width: 48%; float: right; position: relative;}
.InField .FieldBox .Item .FielDr .Tit{ font-size: 20px; color: #333; font-weight: bold;  margin: 35px 0 20px;}
.InField .FieldBox .Item .FielDr .Txtcon{ font-size: 14px; color: #999; line-height: 28px;}
.InField .FieldBox .Item .FielDr .info{ width: 150px; height: 40px; border-radius: 5px; background: -webkit-linear-gradient(110deg, #439079, #267f93);background: -o-linear-gradient(110deg, #439079, #267f93);background: -moz-linear-gradient(110deg, #439079, #267f93);background: linear-gradient(110deg, #439079, #267f93); float: left; line-height: 40px; color: #fff; text-align: center; font-size: 14px; margin-top: 90px;}
.InField .FieldBox .hd{ margin-top: 20px;}
.InField .FieldBox .List{ display: inline-block;margin: 0 45px; cursor: pointer;}
.InField .FieldBox .List .ico{display:block; width:90px; height:104px; margin:0 auto; position:relative;}
.InField .FieldBox .List .ico img{position:absolute; left:0px; top:0px; width:100%;}
.InField .FieldBox .List .ico .i1{ transition: 400ms;}
.InField .FieldBox .List .ico .i2{ -webkit-transform:scale(0); transform:scale(0); opacity:0; filter:alpha (opacity=0); transition:500ms;}
.InField .FieldBox .List p{ font-size: 15px; color: #666; font-weight: bold; line-height: 50px; text-align: center;}
.InField .FieldBox .List:hover .ico .i2{ -webkit-transform:scale(1); transform:scale(1); opacity:1;  filter:alpha(opacity=100);}
.InField .FieldBox .List:hover .ico .i1{opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale (1.2); transform: scale(1.2); }
.InField .FieldBox .List.on .ico .i2{ -webkit-transform:scale(1); transform:scale(1); opacity:1;  filter:alpha(opacity=100);}
.InField .FieldBox .List.on .ico .i1{opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale (1.2); transform: scale(1.2); }


.InSuper{ width: 100%; position: relative; padding: 60px 0;}
.InSuper .Top{ font-size: 28px; color: #ed7d31; text-align: center; font-weight: bold;}
.InSuper .Titcon{ font-size: 15px; color: #666; text-align: center; margin-top: 20px;}
.InSuper .SuperBox{ width: 100%; position: relative; margin-top: 30px;}
.InSuper .SuperBox li{ width: 16.666%; float: left; position: relative; cursor: pointer;}
.InSuper .SuperBox li .supercon{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding:45% 8%; text-align: center;}
.InSuper .SuperBox li .supercon .Tit{ font-size: 16px; color: #fff; font-weight: bold; position: relative;}
.InSuper .SuperBox li .supercon .Tit::before{ content: '';position: absolute; width: 30px; height: 3px; background: #fff; left: 50%; margin-left: -15px; bottom: -30px;}
.InSuper .SuperBox li .supercon .Con{ font-size: 14px; color: #fff; line-height: 26px; margin-top: 45px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.InSuper .SuperBox li:hover .supercon{ background: -webkit-linear-gradient(110deg, rgba(250,125,50, 0.9), rgba(150,50,0, 0.9));background: -o-linear-gradient(110deg, rgba(250,125,50, 0.9), rgba(150,50,0, 0.9));background: -moz-linear-gradient(110deg, rgba(250,125,50, 0.9), rgba(150,50,0, 0.9));background: linear-gradient(110deg, rgba(250,125,50, 0.9), rgba(150,50,0, 0.9));}



.InNews{ width: 100%; position: relative; padding: 0 0 60px;}
.InNews .Top{ font-size: 28px; color: #ed7d31; text-align: center; font-weight: bold;}
.InNews .Titcon{ font-size: 15px; color: #666; text-align: center; margin-top: 20px;}
.InNews .NewsBox{ width: 100%; position: relative; margin-top: 30px;}
.InNews .NewsBox .Newsl{ width: 44%; float: left;}
.InNews .NewsBox .Newsl img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InNews .NewsBox .Newsl:hover img{transform: scaleX(1.1) scaleY(1.1);}
.InNews .NewsBox .Newsl .Text_box{ width: 100%; position: relative;}
.InNews .NewsBox .Newsl .Text_box p{ font-size: 16px; color: #000;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 15px 0 10px;}
.InNews .NewsBox .Newsl:hover .Text_box p{color: #ed7d31;}
.InNews .NewsBox .Newsl .Text_box span{ font-size: 14px; color: #999; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; width: 100%;margin-bottom: 15px;}
.InNews .NewsBox .Newsl .Text_box b{ font-size: 14px; color: #999; font-weight: normal; } 
.InNews .NewsBox .Newsr{ width: 54%; float: right;}
.InNews .NewsBox .Newsr li{ width: 100%; position: relative; float: left; margin-bottom: 15px; border-bottom: 1px #eee solid; padding-bottom: 15px;}
.InNews .NewsBox .Newsr li .img{ width: 32%; float: left; position: relative;}
.InNews .NewsBox .Newsr li .img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.InNews .NewsBox .Newsr li:hover .img img{transform: scaleX(1.1) scaleY(1.1);}
.InNews .NewsBox .Newsr li .Text_box{ width: 64%; float: right;}
.InNews .NewsBox .Newsr li .Text_box p{ font-size: 16px; color: #000;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 5px 0 10px;}
.InNews .NewsBox .Newsr li .Text_box span{ font-size: 14px; color: #999; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; width: 100%;margin-bottom: 15px;}
.InNews .NewsBox .Newsr li .Text_box b{ font-size: 14px; color: #999; font-weight: normal; } 
.InNews .NewsBox .Newsr li:hover .Text_box p{color: #ed7d31;}
.InNews .NewsBox .Newsr li:last-child{ border-bottom: none; padding-bottom: 0;}

.footer{ width: 100%; position: relative;background: -webkit-linear-gradient(110deg, rgba(100,100,100, 0.9), rgba(30,30,30, 0.9));background: -o-linear-gradient(110deg, rgba(100,100,100, 0.9), rgba(30,30,30, 0.9));background: -moz-linear-gradient(110deg, rgba(100,100,100, 0.9), rgba(30,30,30, 0.9));background: linear-gradient(110deg, rgba(100,100,100, 0.9), rgba(30,30,30, 0.9));}
.footer .footTop{ width: 100%; position: relative;  padding: 60px 0; border-bottom:1px solid #444;}
.footer .foot_nav{ width: 70%; float: left;height: 208px;}
.footer .foot_nav li{ width: 20%; float: left; position: relative; padding-left: 30px; height: 100%; box-sizing:border-box;}
.footer .foot_nav li::before{ content: ''; position: absolute; width: 1px; height: 100%; background: #333; right: 1px;top: 0;}
.footer .foot_nav li::after{ content: ''; position: absolute; width: 1px; height: 100%; background: #888; right: 0;top: 0;}
/*.footer .foot_nav li:nth-child(2){ width: 28%;}
.footer .foot_nav li:nth-child(4){ width: 25%;}*/
.footer .foot_nav li dt{ font-size: 18px; color: #fff; margin-bottom: 15px; }
.footer .foot_nav li dd{ width: 100%;display:  inline-block; }
.footer .foot_nav li dd a{ width: 100%; display: inline-block;font-size: 14px; line-height: 28px; color: #fff; }
.footer .foot_nav li a:hover{ color: #ED7D31; }
.footer .foot_nav li dd .qr{  margin-right:30px; }
.footer .foot_nav li dd .qr img{ width:100%; height:auto;}

.footer .foot_hd{ width: 26%; float: right; }
.footer .foot_hd dt{ font-size: 20px; color: #fff; font-weight: bold; margin-bottom: 15px;}
.footer .foot_hd .fLx{ position: relative; color: #fff; font-size: 14px; line-height: 28px; color: #fff;}
.footer .foot_hd .fLx a{ color:#fff;} 
.footer .foot_hd .fLx p{ font-size: 14px; line-height: 28px; color: #fff;}

.footer .copy{ width: 100%; position: relative; border-top: 1px #666 solid; line-height: 60px; color: #fff; font-size: 14px; text-align:center}
.footer .copy a{ color: #fff; font-size: 14px;}
.footer .copy a:hover{ text-decoration: underline;} 



/* page_banner */
.page_banner{ width: 100%; position: relative;  height: 295px;}
.page_banner .t{  font-weight: 600;  text-align: center; padding-top: 100px;}
.page_banner .t .en{ font-size: 70px; color: rgba(255,255,255,.2); line-height: 0px;}
.page_banner .t .cn{color: #fff;position: relative;font-size: 42px;line-height: 1;font-weight: bold;}


.PageMain{ width: 100%; position: relative;}
.PageNav{ width: 100%; position: relative; border-bottom: 1px #eee solid;}
.PageNav .NavList{ width: 68%; float: left; }
.PageNav .NavList li{position: relative;display: inline-block;color: #fff;width: auto;vertical-align: top;}
.PageNav .NavList li a{position: relative;font-size: 15px;height: 70px;line-height: 70px;padding: 0px 28px;color: #333;display: block;transition: 0.3s ease 0s;}
.PageNav .NavList li:before{position: absolute;content: '';left: 50%;bottom: 0px;width: 0%;height: 3px;background-color: #ed7d31;transition: all .3s;}
.PageNav .NavList li:hover:before{width:80%;left:10%;background-color:#ed7d31;}
.PageNav .NavList li:hover a{ color: #ed7d31; }
.PageNav .NavList li.select:before{position: absolute;content: '';left: 10%;bottom: 0px;width: 80%;height: 3px;background-color:#ed7d31;}
.PageNav .NavList li.select a{  color: #ed7d31; }
.PageNav .NavList li a:after{content: "";position: absolute;width: 1px;height: 15px;display: block;background: #ccc;top: 50%;margin-top: -7px;right: 0px;}
.PageNav .Crumbs{ width: 32%;text-align: right; position: relative; float: right;}
.PageNav .Crumbs .crumbs{ line-height: 65px; height: 65px;font-size: 14px; }
.PageNav .Crumbs .crumbs .fangzi{display: inline-block; width: 18px; height: 15px;  background: url(../images/fangzi.jpg); margin-right: 5px; margin-bottom: -1px;}
.PageNav .Crumbs .crumbs a{display: inline-block;font-size: 14px;color: #555;}

.PageNav .NavList1{ width: 100%; float: left; }
.PageNav .NavList1 li{position: relative;display: inline-block;color: #fff;width: auto;vertical-align: top;}
.PageNav .NavList1 li a{position: relative;font-size: 16px;height: 65px;line-height: 65px;padding: 0px 15px;color: #333;display: block;transition: 0.3s ease 0s;}
.PageNav .NavList1 li:before{position: absolute;content: '';left: 50%;bottom: 0px;width: 0%;height: 3px;background-color: #ed7d31;transition: all .3s;}
.PageNav .NavList1 li:hover:before{width:80%;left:10%;background-color:#ed7d31;}
.PageNav .NavList1 li:hover a{ color: #ed7d31; }
.PageNav .NavList1 li.select:before{position: absolute;content: '';left: 10%;bottom: 0px;width: 80%;height: 3px;background-color:#ed7d31;}
.PageNav .NavList1 li.select a{  color: #ed7d31 }
.PageNav .NavList1 li a:after{content: "";position: absolute;width: 1px;height: 15px;display: block;background: #ccc;top: 50%;margin-top: -7px;right: 0px;}



.PageCon{ width: 100%; position: relative;}
.PageCon .PageAbout{padding: 60px 0; width: 100%; }
.PageCon .PageAbout .con{ font-size: 16px; line-height: 36px; color: #666; }

.Pageform{padding: 60px 0; width: 100%; }
.Pageform .cover{ padding: 40px; background: #fff;}
.Pageform .txt_box { text-align: left;width: 100%;}
.Pageform .txt_box .part_tit { font-size: 26px; font-weight: bold; margin-bottom: 15px;}
.Pageform .txt_box .part_tit .black { color: #000000;}
.Pageform .txt_box .part_tit .red { color: #ed7d31;}
.Pageform .txt_box .part_dec { line-height: 1.8em; margin-bottom: 30px;}
.Pageform .form_area{ padding-top: 20px;}
.Pageform .form_area .form_group{ width: 49%; margin-right: 2%; float: left; margin-bottom: 20px;}
.Pageform .form_area .form_group1{ width: 100%;}
.Pageform .form_area .form_group:nth-child(2n){ margin-right: 0;}
.Pageform .form_area .form_group .control-label{ width: 100%; font-size: 15px; color: #777;}
.Pageform .form_area .form_group .col-9{ width: 100%; margin-top: 15px;}
.Pageform .form_area .form_group .form-control{height: 34px; padding: 6px 12px; background-color: #fff; border: 1px solid #c2cad8; border-radius: 4px; width: 100%;}
.Pageform .form_area .form_group1 .form-control{ height: 100px;}
.Pageform .form_area .form_group .radio-list{ padding: 6px 0}
.Pageform .form_area .form_group .radio-inline{display: inline-block; vertical-align: middle;  font-weight: 400; cursor: pointer; position: relative; font-size: 15px; color: #333; padding-left: 20px;}
.Pageform .form_area .form_group .radio-inline:first-child{ padding-left: 0;}
.Pageform .form_area .form_group .radio-inline .radio{min-height: 27px; display: inline-block; zoom: 1; vertical-align: middle;}
.Pageform .form_area .form_group .radio-inline .radio span{display: inline-block;     margin-top: 2px;}
.Pageform .form_area .form_group .form_btn { width: 20%; padding: 10px 0; display: inline-block; margin-right: 5%;border: none; border-radius: 3px; color: #FFFFFF; cursor: pointer;}
.Pageform .form_area .form_group .form_btn.tijiao {background: #ed7d31;}
.Pageform .form_area .form_group .form_btn.chongzhi {  background: #c00e0e;}


/* PageDown */
.PageDown{width:100%; position: relative; padding: 60px 0; }
.PageDown .DownList{ position: relative;}
.PageDown .DownList li{ width: 49%; margin-right: 2%; float: left; margin-bottom:20px; line-height: 45px; height: 45px; background: #f7f7f7;}
.PageDown .DownList li:nth-child(2n){margin-right: 0;}
.PageDown .DownList li .Text_box{padding: 0 15px;}
.PageDown .DownList li .Text_box p{ float: left; width: 85%;overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 15px; color: #000; cursor: pointer;}
.PageDown .DownList li .Text_box a{ float: right; font-size: 15px; color: #333; background: url(../images/down.png) left center no-repeat; padding-left: 24px; display: block;}
.PageDown .DownList li:hover{ background: #ed7d31;}
.PageDown .DownList li:hover .Text_box p{ color: #fff;}
.PageDown .DownList li:hover .Text_box a{ color: #fff; background: url(../images/downh.png) left center no-repeat;}

/* PageJoin */
.PageJoin{ width: 100%; position: relative; padding: 60px 0;}
.PageJoin .part_con { margin-bottom: 30px;}
.PageJoin .part_con .pic_join{ position:relative; width: 523px; font-size:14px; color:#555; float: left;}
.PageJoin .part_con .box{padding-top:42px; float: left; width: 747px; margin-left: 30px;}
.PageJoin .part_con .CenTitle{ float:left; margin-bottom:20px;}
.PageJoin .part_con .CenTitle .name{ font-size: 24px; font-weight: bold;color: #ed7d31;}
.PageJoin .part_con .txt01{ clear:both; background:url(../images/pic_joinbtn.png) left center no-repeat;color: #333; font-weight:bold; line-height:30px; margin-top:20px; font-size: 18px; margin-bottom: 20px; }
.PageJoin .part_con .txt02{ line-height:32px;}
.PageJoin .part_con .txt01,
.PageJoin .part_con .txt02{ padding-left:30px; }
.PageJoin .Joinlist{position: relative; width: 100%;}
.PageJoin .Joinlist .jnlist{ background: #e0f6ee; }
.PageJoin .Joinlist .jnlist li{float: left; text-align: center; padding: 20px 0; font-size: 16px; color: #333; width: 20%; font-weight: bold;}
.PageJoin .Joinlist .jnlist li:nth-child(2),.PageJoin .Joinlist .jnlist li:nth-child(4){ width: 30%;}
.PageJoin .Joinlist .joblist{ width: 100%; position: relative; margin-top: 10px;}
.PageJoin .Joinlist .joblist .list_dt{ cursor: pointer;  overflow: hidden; text-overflow: ellipsis;white-space: nowrap; position: relative; border-bottom: 1px solid #ddd; background: #f9f9f9;}
.PageJoin .Joinlist .joblist .list_dt p{float: left; text-align: center; padding: 15px 0; font-size: 15px; color: #333; width: 20%;}
.PageJoin .Joinlist .joblist .list_dt p:nth-child(2),.PageJoin .Joinlist .joblist .list_dt p:nth-child(4){ width: 30%;}
.PageJoin .Joinlist .joblist #open{ background: #ed7d31;}
.PageJoin .Joinlist .joblist #open p{ color: #fff }
.PageJoin .Joinlist .joblist .list_dt:hover{ background: #ed7d31;}
.PageJoin .Joinlist .joblist .list_dt:hover p{ color: #fff; }
.PageJoin .Joinlist .joblist .list_dd{ display: none; padding: 30px; font-size: 15px; line-height: 30px; color: #555;background: #f0f6fb;}



.PageHonor{width:100%; position: relative; padding: 60px 0; }
.PageHonor .HonorList li{ width: 23.5%; margin-right: 2%; float: left; margin-bottom: 2%; cursor: pointer;}
.PageHonor .HonorList li:nth-child(4n){ margin-right: 0;}
.PageHonor .HonorList li .img{position: relative; overflow: inherit;  border: 2px #f5f5f5 solid; transition: 0.3s all ease;}
.PageHonor .HonorList li:hover .img{border: 2px #ed7d31 solid;}
.PageHonor .HonorList li .img img{ display: block;-webkit-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;transition: 0.5s ease-in-out;transform-origin:50% 50%;}
.PageHonor .HonorList li:hover .img img{-webkit-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);}
.PageHonor .HonorList li p{ background:#f5f5f5; line-height: 50px; text-align: center; color: #333; transition: 0.3s all ease; font-size: 16px;overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.PageHonor .HonorList li:hover p{ background: #ed7d31; color: #fff;}



.PagePro{ width: 100%; position: relative; padding: 60px 0;}
.PagePro .saml{ width: 23.875%; margin-right: 1.5%; float: left; display: block; margin-bottom: 1.5%;}
.PagePro .saml:nth-child(4n){ margin-right: 0;}
.PagePro .saml .Img{position:relative ; overflow: hidden; width: 100%;}
.PagePro .saml .Img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.PagePro .saml:hover .Img img{transform: scaleX(1.1) scaleY(1.1);}
.PagePro .saml .ProTit{ width: 100%; position:absolute; bottom: 0; left: 0; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;}
.PagePro .saml .ProTit .Text_box{ padding: 15px 15px; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;  background: -webkit-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -o-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: -moz-linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));background: linear-gradient(110deg, rgba(250,125,50, 0.8), rgba(150,50,0, 0.8));}
.PagePro .saml .ProTit p{ font-size: 15px; color: #fff; font-weight: bold;}
.PagePro .saml .ProTit span{font-size: 14px; color: #fff; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 5px 0;}
.PagePro .saml .ProTit b{font-size: 14px; color: #666; font-weight: normal; margin-top: 15px; display: none; }
.PagePro .saml:hover .ProTit .Text_box{ padding: 15px 15px;}
.PagePro .saml:hover .ProTit p{color: #fff;}
.PagePro .saml:hover .ProTit span{color: #fff;}
.PagePro .saml:hover .ProTit b{ display: block; color: #fff;}

.downlist{ width: 1220px; padding: 40px; background: #fff;}
.picFocus{ float:left;  width:430px;  position:relative;  overflow:hidden;  zoom:1;   }
.picFocus .hd{ width:100%; padding-top:5px;  overflow:hidden; }
.picFocus .hd ul{  width: 88%; margin: 0 auto; overflow:hidden; zoom:1; }
.picFocus .hd ul li{ padding-top:5px; float:left;  text-align:center;  margin-right: 2%; width: 23%;}
.picFocus .hd ul li:nth-child(4n){ margin-right: 0;}
.picFocus .hd ul li img{ width:100%; border:2px solid #ddd; cursor:pointer; margin-right:8px; display:  block;  }
.picFocus .hd ul li.on{ background:url("../images/icoup.gif") no-repeat center 0; }
.picFocus .hd ul li.on img{ border-color:#fcb026;  }
.picFocus .bd li{ vertical-align:middle; }
.picFocus .bd{ width: 100%; }
.picFocus .bd img{ width:99%; display: flex; border:2px #ddd solid;}
.picFocus .prev{ position:absolute; left:0 ; bottom:15px;}
.picFocus .next{ position:absolute; right:0 ; bottom:15px;}

.floatl{ float: left;width: 502px;}
.floatr{ width: 690px; float: right;}
.floatr .title{ font-size: 24px; color:#333; width:100%;word-break:break-all;font-weight: bold;}
.floatr .table-list{ width: 100%; border-top:1px #ccc dashed;}
.floatr .table-list tr{margin-bottom: 10px; width: 100%;}
.floatr .table-list td{ width: 100%; font-size: 14px; color:#666; line-height:24px; padding:5px 0;}
.floatr .table-list td span{ color:#333; font-weight: bold;}
.floatr .table-list .input-text{ width:40px; height: 25px; text-align:center; color:#dd2328;}
.floatr .table-list .button{ width: 80px; height: 35px; text-align:center; background:#dd2328; border: none; text-align:center; color:#fff; cursor:pointer; margin-top: 5px; font-size: 14px;}
.floatr .div-bz{ font-size: 14px; margin-top:20px;}
.left02{ width: 100%; margin:20px auto 0; border-top:1px #ccc solid; padding-top:30px; float: left;}
.left02 p{ font-size: 14px; line-height: 28px;}
.left02 img{max-width:100%;}


.PageNews{ width: 100%; position: relative; padding: 60px 0;}
.PageNews .NewsList li{ width: 100%; position: relative; float: left; margin-bottom: 15px; border-bottom: 1px #eee solid; padding-bottom: 15px;}
.PageNews .NewsList li .img{ width: 22%; float: left; position: relative;}
.PageNews .NewsList li .img img{transform: scaleX(1) scaleY(1);transition: all 0.5s ease 0s;}
.PageNews .NewsList li:hover .img img{transform: scaleX(1.1) scaleY(1.1);}
.PageNews .NewsList li .Text_box{ width: 76%; float: right;}
.PageNews .NewsList li .Text_box p{ font-size: 16px; color: #000;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; margin: 15px 0 10px;}
.PageNews .NewsList li .Text_box span{ font-size: 14px; color: #999; line-height: 28px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; width: 100%;margin-bottom: 15px;}
.PageNews .NewsList li .Text_box b{ font-size: 14px; color: #999; font-weight: normal; } 
.PageNews .NewsList li:hover .Text_box p{color: #ed7d31; font-weight: bold;}
.PageNews .NewsList li:last-child{ border-bottom: none; padding-bottom: 0;}

.PageDian{ width: 100%; position: relative; padding: 60px 0;}
.PageDian .item{ background: #f7f7f7; position: relative;height: 380px;}
.PageDian .Img{ width: 50%; float: left; height: 100%;  overflow: hidden;}
.PageDian .Img img{transition: 1s; -webkit-transition: 1s; width: 100%; height: 100%; display: block; }
.PageDian .Titc{ width: 42%; float: right; padding: 4%; background: #f7f7f7;}
.PageDian .Titc .line{ width: 50px; height: 3px; background: #045e74; margin: 15px 0;}
.PageDian .Titc .T{ font-size: 24px; color: #006db8; font-weight: bold; position: relative;}
.PageDian .Titc .T[data-content]::after{content:attr(data-content);display: block; position:absolute;
 color:#ed7d31; left:0;top:0;z-index:2;-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(#ed7d31), to(rgba(0, 0, 255, 0)));}
.PageDian .Titc .Tc{ font-size: 16px; line-height: 30px; color: #666;}
.PageDian .Titc .Te{ margin-top: 30px; font-size: 15px; position: relative;}
.PageDian .Titc .Te span{ float: left; width: 120px; height: 38px; text-align: center; line-height: 38px; color: #fff;  background: -webkit-linear-gradient(120deg, #ed7d31, #016b69); background: -o-linear-gradient(120deg, #ed7d31, #016b69); background: -moz-linear-gradient(120deg, #ed7d31, #016b69); background: linear-gradient(120deg, #ed7d31, #016b69);-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.PageDian .Titc .Te:hover span{ padding-left: 15px;-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.PageDian .Titc .Te .m{ width: 38px; height: 38px; float: left; margin-left: 3px; color: #fff; text-align: center; line-height: 38px; background: #ed7d31;}
.PageDian .Img:hover img{ -webkit-transform:scale(1.3) rotate(5deg); transform: scale(1.3) rotate(5deg);}
.PageDian .item:nth-child(2n) .Img{ float: right;}
.PageDian .item:nth-child(2n) .Titc{ float: left;}


/* PageLanx */
.PageLanx{ width: 100%; position: relative; padding: 60px;}
.PageLanx .conl{ width: 39%; float: left; background: #f9f9f9; min-height:350px;}
.PageLanx .conl1{ width: 59%; float: right; background: #f9f9f9;}
.PageLanx .cover{ padding: 30px;}
.PageLanx .cover .T{ font-size: 20px; font-weight: bold; color: #333; padding-bottom: 20px;}
.PageLanx .cover .Tcon{ position: relative; font-size: 15px; line-height: 28px; color: #666;}
#map{ width: 100%; margin-top: 30px; float: left;}



.pageNewsT{ width:100%; margin:0 auto; font-size:20px; text-align:center; color:#333; font-weight:bold;}
.pageNewsC{ width:100%; margin:0 auto; font-size:14px; color:#333; text-align:center; padding:20px 0; border-bottom:dashed 1px #999;}
.pageNewsD{ width:100%; margin:0 auto; font-size:15px; color:#333; line-height:30px; margin-top:20px;}
.pageNewsD img{ max-width:100%; margin:5px 0;}


/* fenye */
.pages1{ width:100%; margin:30px auto 0;}
.pages1_l{ float:left; width:100%; height:40px;}
.pages1_l a{ line-height:40px; color:#666;display:block; font-size: 14px;}
.pages1_l:hover a{ color:#ed7d31;}
.pages1_r{ float:left; width:100%; height:40px; }
.pages1_r a{ line-height:40px; color:#666;display:block;font-size: 14px;}
.pages1_r:hover a{ color:#ed7d31;}

.pages { margin:0; text-align:center; font-size:14px;}
.pages li { display:inline-block; height:26px; line-height:26px; background:#fff; border:1px solid #ccc;  margin-left:6px;}
.pages li a{text-align:center; color:#333; padding:0 13px;}
.pages .page-active {background:#ed7d31;  border:1px solid #ed7d31;text-decoration:none}
.pages .page-active a{color:#fff; }
.pages li:hover { background:#ed7d31;  border:1px solid #ed7d31;  text-decoration:none }
.pages li:hover a{ color:#fff;}
.pages span { display:inline-block; height:26px; line-height:26px;  border:1px solid #ccc; color:#333; text-align:center; padding:0 13px;}




/*main CSS*/
#pictureViewer{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    z-index: 10000;
}
#pictureViewer > .content{
    background-color: #fff;
    position: absolute;
    width: 590px;
    height: 590px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#pictureViewer .menu-bar{
    width: 100%;
}
#pictureViewer .menu-bar .handel{
    width: 40px;
    height: 40px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}
#pictureViewer .menu-bar .handel:hover{
    background-color: #ed7d31;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#pictureViewer .menu-bar .handel.maximization{
    background-image: url(../images/maximization_black.png);
    background-size: 14px;
}
#pictureViewer .menu-bar .handel.maximization:hover{
    background-image: url(../images/maximization_white.png);
}
#pictureViewer .menu-bar .handel.miniaturization{
    background-size: 16px;
    background-image: url(../images/miniaturization_black.png);
}
#pictureViewer .menu-bar .handel.miniaturization:hover{
    background-image: url(../images/miniaturization_white.png);
}
#pictureViewer .menu-bar .handel.close-view{
    background-image: url(../images/close_black.png);
    background-size: 15px;
}
#pictureViewer .menu-bar .handel.close-view:hover{
    background-image: url(../images/close_white.png);
}
#pictureViewer .handel-prev,
#pictureViewer .handel-next{
    display: inline-block;
    width: 50px;
    height: 70px;
    position: relative;
    top: calc(50% - 80px);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 50%;
    cursor: pointer;

    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#pictureViewer .handel-prev{
    background-image: url(../images/prev_blank.png);
}
#pictureViewer .handel-next{
    background-image: url(../images/next_blank.png);
}
#pictureViewer .handel-prev:hover,
#pictureViewer .handel-next:hover{
    background-color: #ed7d31;
}
#pictureViewer .handel-prev:hover{
    background-image: url(../images/prev_white.png);
}
#pictureViewer .handel-next:hover{
    background-image: url(../images/next_white.png);
}
#pictureViewer .picture-content{
    display: inline-block;
    width: 80%;
    height: calc(100% - 80px);
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#pictureViewer .picture-content .cover{
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#pictureViewer .counter{
    position: absolute;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
    color: #808080;
    font-size: 13px;
}
#pictureViewer .hide{
    display: none;
}
#pictureViewer .left{
    float: left;
}
#pictureViewer .right{
    float: right;
}
#pictureViewer .clear-flex{
    clear: both;
}
#pictureViewer img{
    max-width: 100%;
    max-height: 100%;
}














