@charset "utf-8";
/*font*/
@font-face {
  font-family: "CG";
  src: url("../fonts/century gothic.woff2") format("woff2"),
       url("../fonts/century gothic.woff") format("woff"),
       url("../fonts/century gothic.ttf") format("truetype"),
       url("../fonts/century gothic.eot") format("embedded-opentype"),
       url("../fonts/century gothic.svg") format("svg");
  font-weight:normal;
  font-style: normal;
}
/* public */
.z-flex{display:flex;display:-webkit-flex;flex-direction:row; -webkit-flex-direction:row;flex-wrap:wrap; -webkit-flex-wrap:wrap;}
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
img{border:0;}
ul,dl,li,dt,dd{list-style:none;}
body{font-family: "微软雅黑";font-size: 14px; background:#fff; overflow-x:hidden; color: #222222;  }
a{font-size:14px;text-decoration:none;  color: #222; }
.clearfix:after{content:""; display:block; height:0; clear:both;}
.clearfix{*zoom:1;}/*IE/7/6*/
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
input,textarea,select{outline: none; font-family:"microsoft yahei"; line-height: normal;}
textarea{resize:none; overflow:hidden;}
select{-webkit-appearance: none;appearance: none; -ms-appearance: none;border-radius: 0;}
select::-ms-expand { display: none; }
i,em{font-style:normal;}
.u_hidden{ display: none;}
.fl{float:left;}
.fr{float:right;}
.z-container {max-width: 1400px;padding:0 20px;height:auto;clear: both;margin: 0 auto;}
.z-container2 {width: 89%;height:auto;clear: both;margin: 0 auto;}
.z-row {width: 100%;height: auto;clear: both;margin: 0 auto;overflow: hidden;}
.ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ellipsis2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow:ellipsis;}
.ellipsis3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow:ellipsis;}
.banner-box{ position: fixed; left: 0; top: 0;}
.logo_box{ position: absolute; left: 0; top: 50%;transform: translateY(-50%); -webkit-transform: translateY(-50%);transition:ease 1.5s;z-index:9999;}
.logo_box.active{ left: -100%; opacity: 0;}
.logo_box .logoimg{ display: inline-block;width: 110px; height: 110px;}
.logo_box .logoimg img{ width: 100%; height: 100%;}
.logo_box .menu_btn{ display: inline-block; width: 110px; height: 110px; background: url(/img/menu_btn.png) no-repeat center; background-size: 100% 100%; margin-left: -5px;}
.banner-box .bannertit{ position: absolute;right: 10%; top: 50%; transform: translateY(-50%);}
.banner-box .bannertit img{}
#slides { display:block; width:100%; height: 100%; list-style:none; padding:0; margin:0; /*position:relative;*/ overflow: hidden }
#slides ul li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0;  background-size: cover;background: #fff overflow: hidden }
#slides ul li img{ width: 100%;height: 100%; display: block;overflow: hidden }
.banner-box{position: relative}
#slides ul li{text-align: center}
#slides ul li a { display:block; width:100%; height:100%; }
#slides ul li{animation:lo 5s;
}
.side_bar{ background: #fff; height: 100%; width: 66%; position: absolute; left: 0; top: 0; background: #004b91; z-index: 9999; color: #fff; padding: 100px; box-sizing: border-box; display: none;}
.side_bar .logo2{ margin-bottom: 160px;}

.z-header{position:absolute; left:0; top:0; z-index:9999; width:100%; transition:ease .65s;}
.z-header2{ height: 107px; background: #e9e9e9;}
.z-header2 .logo3{ float: left}
.z-header2 .logo3 a{ display: block; height: 100%; line-height: 107px;}
.z-header2 .logo3 a img{ vertical-align: middle;}
.lh-logo{position:absolute; left:10.36vw; top:3vw; transition:ease .65s;}

.z-header-r{/*position:absolute; right:5.2vw; top:35px;*/float: right;transition:ease .65s; margin-top: 35px;}
.z-nav{float:left; transition:ease .65s; line-height: 38px;}
.z-nav li{float:left;}
.z-nav li:nth-child(6),.z-nav li:nth-child(7){display:none;}
.z-nav li a{color:#fff; font-size:15px; margin-right:2.34vw;}
.z-header2 .z-nav li a{ color: #333;}
.z-search-btn{float:left; color:#fff; font-weight:bold; position:relative; z-index:3;}
.z-search-btn:hover{color:#fff;}
.tel_bar{ background:url(/img/tel2.png) no-repeat left center ; padding-left: 45px; color: #fff; margin-right: 100px;}
.tel_bar H3{font-family: "CG"; font-size: 18px; font-weight: bold;}
.z-header2 .tel_bar{ margin-right: 0;  color: #333;}
.z-nav-btn,.mobilebtn{display:block; width:37px;  height:30px; position:absolute; left:60px; top:50%; margin-top:-15px; cursor:pointer;}
.mobilebtn{ display: none; }
.z-nav-btn:hover .line1,.mobilebtn.on .line1{transform:rotate(45deg);transform-origin:14% 50%;}
.z-nav-btn:hover .line2,.mobilebtn.on .line2{width:0;}
.z-nav-btn:hover .line3,.mobilebtn.on .line3{transform:rotate(-45deg);transform-origin:14% 50%;}
.z-nav-btn span,.mobilebtn span{display:block; width:28px; height:2px; background:#fff; transition:all .45s;}
.z-nav-btn .line2,.mobilebtn .line2{margin:5px 0;}
.z_sidenav{ padding: 100px; box-sizing: border-box;height:100%; background: #004b91; position:fixed; left:0; top:0; z-index:50; padding-left:150px; width: 66%; transition:ease 1.5s;z-index: 999; transform: translateX(-100%); opacity: 0;}
.z_sidenav.active{ transform: translateX(0); opacity: 1;}
.z-navbar{ position: relative;top:16vw; transform: translateY(-50%);}
.z-navbar dl{ flex:1;animate-duration:5s;animate-delay: 2s;  }
.z-navbar dl dd a{ display: block;}
.z-navbar a{ color: #fff;}
.z-navbar dl dt a{font-size:24px; }
.z-navbar dl dt h3{color:#fff; text-transform:uppercase; height:38px; overflow:hidden;}
.z-navbar dl dd{line-height:24px;}
.z-navbar dl dd a{color:#d4e1ee; font-size:16px; display: block; margin-bottom: 10px;}
.z-navbar dl dt{margin-bottom:3vh;}
.z-navbar dl dd a:hover{color:#fff;}
.z-navbar dl:nth-child(1){animation-delay:.6s;}
.z-navbar dl:nth-child(2){animation-delay:.5s;}
.z-navbar dl:nth-child(3){animation-delay:.4s;}
.z-navbar dl:nth-child(4){animation-delay:.3s;}
.z-navbar dl:nth-child(5){animation-delay:.2s;}

.z-adide-btm { position:absolute; bottom:8.5vw; }
.z-adide-btm.tel_bar{ background:url(/img/tel.png) no-repeat left center ; padding-left: 50px;}
.z-search{ width:240px; height:40px;border-bottom:2px solid #fff; position: absolute; right: 100px; bottom:8.5vw;}
.z-search input{ border:none; background:none; width:80%; color:#fff; height:38px;}
.z-search input::-webkit-input-placeholder {color: #fff;}
.z-search input:-moz-placeholder {　color: #fff;}
.z-search input::-moz-placeholder {color: #fff;}
.z-search input:-ms-input-placeholder {color: #fff;}
.z-search a{position:absolute; right:0; top:0; color:#fff; font-weight:bold;height: 40px; width:40px; text-align:center; background: url(/img/sou.png) no-repeat center;}
.z-search a i{font-size:24px;}
/*首页发展历程*/
.z_progress{ width: 100%; height: 770px; position: relative;}
.z_progress:hover .z_seemore em:before{  transform: translateX(50px); border-color: #004B91;}
.z_progress_fl{ width: 34%; float: left; position: relative; height: 100%;}
.z_progress_fr{ width: 66%; float: right; position: relative; height: 100%;  text-align: center; color: #fff;}
.z_progress_fl .center_box{ margin-top: 100px;}
.center_box{width: 67%; margin: 60px auto; }
.z_progress_fr .center_box{ position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); width: 100%; margin: 0;}
.z_index_text .tit h3{ font-size: 30px;}
.z_index_text .tit em{ display: inline-block; width: 17px; height:37px; background: url(/img/line.png) no-repeat center; background-size: 100% 100%; margin: 25px;}
.z_progress_bd ul{ animate-duration: 1s;}
.z_progress_bd ul h3{ font-size:48px; font-family: "CG"; font-weight: normal; color: #004b91;}
.z_index_text .text{color: #666666; line-height: 30px; margin: 50px 0;font-size: 15px;}
.z_seemore{ width: 60px; height: 20px;display:inline-block; line-height: 20px; margin-top: 140px;}
.z_seemore em{ display:inline-block;width: 50px; height: 1px; background: #646464;transition:ease .5s; margin-left: 10px; position: relative;}
.z_seemore:hover em:before{  transform: translateX(50px); border-color: #004B91;}
.z_seemore em:before{display: block;  content: ""; width: 20px; height: 20px;border:1px solid #646464; border-radius: 50%; position: absolute; left: -10px; top: -10px; transition:ease .5s; }
.z_seemore:hover em{background: #004B91;}

.z_progress_fr .tit h3{ font-size: 44px;}
.z_progress_fr .tit h4{font-size: 30px;}
.z_progress_fr .tit em{ display: inline-block; width: 35px; height: 2px; background: #fff; margin: 30px 0;}
.z_progress_hd ul li{ display: inline-block; font-family: "CG"; margin: 0 10px; position: relative; width: 100px;z-index: 1; position: relative; cursor: pointer;}
.z_progress_hd ul li:before{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #c0a685;
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0;
    transition: ease .5s;}
.z_progress_hd ul li.on:before{ opacity: 1;}
.z_indexbar{ height: 630px; position: relative;}
.z_index_img,.z_index_text{ height: 100%;}
.z_indexbar:nth-child(odd) .z_index_img{float: left; }
.z_indexbar:nth-child(odd) .z_index_img .blue_box{right: 0;}
.z_indexbar:nth-child(odd) .z_index_text{ float: right; text-align: right;}
.z_indexbar:nth-child(even) .z_index_img{float:right;}
.z_indexbar:nth-child(even) .z_index_img .blue_box{float: left;}
.z_indexbar:nth-child(odd) .z_index_img .blue_box{float: right;}
.z_indexbar:nth-child(even) .z_index_text{ float: left; text-align: left;}
.z_index_text{width: 34%; position: relative;}
.z_index_img{ width: 66%; position: relative; z-index: 1;}
.z_index_img:before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(66,66,66,.3); position: absolute;left: 0; top: 0;z-index: -1; } 
.z_index_img .blue_box{display: inline-block;  width: 185px; background:rgba(0,75,145,.85); color: #fff; padding: 40px 30px; box-sizing: border-box; margin-top: 150px;}
.z_index_img .blue_box h4{ font-size: 24px; font-weight: bold; margin: 35px 0;color:#fff;} 
.z_index_img .blue_box p{line-height: 24px; font-size: 16px; color: #8fadca; font-family: "CG";}
.z_indexbar:hover .z_seemore em:before{  transform: translateX(50px); border-color: #004B91;}
/*.z_indexbar:hover .z_index_img .blue_box{ transform:translateX()!important;}*/
.user_tit{ height: 195px; line-height: 195px; padding: 0 100px; box-sizing: border-box; font-size: 30px;}
.user_tit a{ display:inline-block; width: 40px; height: 40px; border-radius: 50%; background: #004B91; color: #fff; text-align: center;line-height: 40px; float: right; margin-top: 75px;}
.z_userstory .boxli{ width: 50%; position: relative;overflow: hidden; float: left; height: 618px;}
.z_userstory .boxli:first-child{ height: 1236px;}
.z_userstory .boxli .img{ width: 100%; height: 100%; }
.z_userstory .boxli .img img{ width: 100%; height: 100%; vertical-align:bottom}
/*.z_userstory .boxli img{ width: 100%; height: 100%; transition:ease 1s; position: relative;}
.z_userstory .boxli:hover img{ transform: scale(1.1,1.1);}*/
.z_userstory .boxli .img:before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute;left: 0;top: 0;}
.z_userstory .boxli:hover .img:before{ opacity: 0;}
.z_userstory .boxli .info{ width: 100%; position: absolute; left: 0;bottom: 0; color: #fff; padding: 90px; box-sizing: border-box; }
.z_userstory .boxli .info h3{ font-size: 24px; background: url(/img/yan.png) no-repeat left center; padding-left: 40px; margin-bottom: 20px;}
.z_userstory .boxli .info p span{ display: inline-block; margin: 0 10px}
.z_userstory .boxli .more{ color: #fff; text-align: center;height: 42px; line-height: 42px; color: #fff; position: absolute; right: 130px; bottom: 100px;}
.z_userstory .boxli .more:hover em{ color: #004B91;}
.z_userstory .boxli .more em{ display: inline-block; width: 44px; height: 42px;background: #004b91; position: relative;z-index: 1;}
.z_userstory .boxli .more em:before{content: ""; display: block; width:0%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; color: #004B91;transition:all .6s;z-index: -1;}
.z_userstory .boxli .more i{ display: inline-block; width: 102px; height: 42px;background: #004b91; margin-left: 2px;z-index: 1;}
.z_userstory .boxli .more i:before{ content: ""; display: block; width:0%; height: 100%; position: absolute; right: 0; top: 0;background: #fff;transition:all .6s;z-index: -1;}
.z_userstory .boxli .more:hover em:before{ width: 100%;}
.z_userstory .boxli .more:hover i:before{ width: 100%;}
.banner-box li img{ width: 100%; vertical-align: middle;}
.company_jj{ width: 100%; padding: 110px 0; background: url(/img/about_bg2.jpg) no-repeat right center;background: auto 100%;  position: relative;}
.company_jj .jj_left{ width:49%; float: left ;}
.company_jj .jj_left h3 span{ font-size: 14px; font-family: "CG"; color: #a5a5a5; display: block;}
.company_jj .jj_left h3 em{ font-size: 30px; color: #3b3b3b;  position: relative; top: 0px;}

.company_jj .jj_left .text_box{ color: #666; line-height: 24px;}
.company_jj .jj_left .text_box p{ font-size: 15px;margin-bottom: 20px;    text-indent: 2em;
    text-align: justify;}
.company_jj .jj_left .text_box p:last-child{ margin-bottom: 0;}
.company_jj .right_bar{ position: absolute; bottom: 0;right: 0; width: 40%;}
.company_jj .right_bar .box{ width: 30%; height: 186px; text-align: center; color: #fff; float:left;}
.company_jj .right_bar .box h3{ font-size: 72px; font-family: "CG"; margin-top: 40PX;}
.company_jj .right_bar .box:nth-child(1){ background: #093085;}
.company_jj .right_bar .box:nth-child(2){ background: #1341a5;}
.company_jj .right_bar .box:nth-child(3){ background: #1f4eb5;}
/*介绍*/

.company_brand{ width: 100%;  background: url(/img/djk55.jpg) no-repeat repeat center; background-attachment: fixed; position: relative;z-index: 1;}
.company_brand:before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; left: 0;top: 0; z-index: -1;}

.company_brand .top_text { padding: 110px 0; color: #fff;z-index: 9; width: 70%;}
 .company_brand .top_text h3{font-size: 30px; margin-bottom: 30px;}
.company_brand .top_text p{     line-height: 1.9;
    font-size: 15px;
    text-indent: 2em;;}

.company_brand .brand_lsit .box{ width: 33.3%; float: left; height: 355px; text-align: center; position: relative; color: #fff; position: relative;z-index: 1;}
.company_brand .brand_lsit .box:before{content: ""; display: block; width: 0%;  height: 100%; background: rgba(0,75,145,.85); position: absolute; left: 50%; top: 0; transition: ease .6s; opacity: 0; }
.company_brand .brand_lsit .box:hover:before{ opacity: 1; width: 100%; left: 0;}
.company_brand .brand_lsit .box .con{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.company_brand .brand_lsit .box.active{ }
.company_brand .brand_lsit h3{ font-size: 24px; margin: 10px 0;}
.company_brand .brand_lsit .more,.proc_box .more{ color: #fff; display: inline-block; background: url(/img/more_bg.png) no-repeat center bottom; line-height: 35px; background-size:100% auto; padding: 0 10px; margin-top: 40px; }
.about_progress{ width: 100%; background: url(/img/fzdsj.jpg) no-repeat center; background-size: cover; padding: 130px 0; color: #fff;}
.about_progress .pg_tit{ margin-bottom: 80px;}
.about_progress .pg_tit h3{ font-size: 30px;}
.pg_hd ul li{ display: inline-block; width: 94px; height: 108px; background: url(/img/liu.png) no-repeat repeat center; background-size: 100% 100%; text-align: center; line-height: 108px; margin-left: 112px; position: relative; cursor: pointer; margin-bottom: 60px; transition: ease .8s; }
.pg_hd ul li:before{ content: ""; display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: -104px; top: 50%; transform: translateY(-50%);}
.pg_hd ul li:last-child:after{ content: ""; display: block; width: 100%; height: 1px; background: #fff; position: absolute; right: -104px; top: 50%; transform: translateY(-50%);}
.pg_hd ul li.on{ background: url(/img/liu2.png) no-repeat center; background-size: 100% 100%; color: #093085;font-weight: normal;}
.pg_bd h3{ font-size: 36px; }
.pg_bd i{ display: block; width: 18px; height: 12px; background:url(/img/line2.png) no-repeat center; background-size: 100% 100%; margin: 20px 0;}
.pg_bd .text{ line-height: 24px;}

.company_honor .honer_text,.company_honor .honor_img{ width: 50%; float: left}
.honor_img{ overflow:hidden; position:relative; height: 850px!important;}
.honor_img .bd {position:relative;z-index:0; }
.honor_img .bd ul {height: 850px; }
.honor_img .bd ul li{ zoom:1; vertical-align:middle;}
.honor_img .bd ul li,.honor_img .bd  img{ width: 100%; height: 100%;}
.honor_img .hd{ width: 100%; position: absolute; left: 0; bottom: 40px; text-align: center; overflow: hidden; height: 20px;z-index: 99;}
.honor_img .hd ul{ overflow:hidden; zoom:1; }
.honor_img .hd ul li{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.5); margin: 0 5px;}
.honor_img .hd ul li.on{ background: rgba(255,255,255,1);}
.honer_text{ padding: 60px 100px; box-sizing: border-box;}
.honer_text .tit{ text-align: center; width: 167px; margin-bottom: 50px;}
.honer_text .tit h3{ font-size: 60px; font-weight: bold; text-align: center; width: 167px; height: 141px; background: url(/img/honor_bg.png) no-repeat center; background-size: 100% 100%; line-height: 100px; font-family: "CG";}
.honer_text .tit h4{ font-size: 30px;}
.honor_li li{ margin-bottom: 10px; color: #666;}


.footer{ width: 100%; background: #004b91; color: #fff;}
.footer>.z-container{ border-bottom: 1px solid #5885b0; padding: 100px 0;}
.footer .foot_l,.footer .foot_r{ width: 50%; float: left;}

.footer .foot_l dl{ float: left; margin-right: 40px;}
.footer .foot_l dl a{ display: block; color: #fff;}
.footer .foot_l dl dt{ margin-bottom: 30px;}
.footer .foot_l dl dt a{ font-size: 16px;}
.footer .foot_l dl dd a{ color: #8fadca; margin-bottom: 10px;}
.footer .foot_r .foot_text{ float: left; text-align: right;}
.footer .foot_r .foot_text h3{ font-size: 16px; margin-bottom: 60px;}
.footer .foot_r .foot_text p{ color: #8fadca; margin-bottom: 10px;}
.footer .foot_r .foot_text p:nth-child(3){ margin-bottom: 30px;}
.footer .foot_r .foot_code{ float: right; /*width: 210px;*/}
.footer .foot_r .foot_tit{ background:url(/img/cir_arr.png) no-repeat center right; margin-bottom: 50px;}
.footer .foot_r .foot_tit h3{font-size: 24px; font-family: "CG";}
.footer .foot_r .code_box .img{ float: left; text-align: center;}
.footer .foot_r .code_box .img img{ width: 90px; height: 90px;}
.footer .foot_r .code_box .img:last-child{ float: right;}
.footer_bar{ line-height: 170px; }
.footer_bar a{color: #8fadca;}
.index_news{ position: relative;}
.index_news ul li{ width: 25%; float: left; position: relative; height: 680px; transition:all .6s; background: #fbfbfb;}
.index_news ul li:hover .z_seemore em:before{  transform: translateX(50px); border-color: #004B91;}
.index_news ul li .content{ position: absolute; left:50%; top: 45%; transform: translateX(-50%) ; width: 62%;}
.index_news ul li h3{ font-size: 16px; margin-bottom: 30px;}
.index_news ul li p{ color: #666; line-height: 24px;}
.index_news ul li .z_seemore{margin-top: 80px;}
.index_news ul li:hover{ background: #ffffff;}
.index_news .tit{ font-size: 36px; position: absolute; left: 100px; top: 120px; color: #333;z-index: 9;}
.hz_logo{ padding: 150px 0;}
.hz_tit{ width: 43%; }
.hz_tit h3{ font-size: 36px; margin-bottom:70px;}
.hz_tit p{ color: #999; line-height: 24px;}
.hzlogo_list{ width: 57%;float: right;border: 1px solid #eaeaea; box-sizing: border-box;}
.hzlogo_list ul li{ width: 25%; height: 85px; line-height: 85px; float:left; border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea; box-sizing: border-box; text-align: center;}
.hzlogo_list ul li:nth-child(4n+0){border-right:none}
.hzlogo_list ul li img{ max-width: 100%; max-height: 100%; vertical-align: middle;transition:all .6s; }
.hzlogo_list ul li img:hover{ transform: scale(1.1,1.1);}


/*.page_nav{ height: 50px; line-height: 50px; background: #004b91;}
.page_nav a{ display: inline-block; color: #fff;font-size: 14px; margin-right: 40px;}*/



#wrapper{ background: #004b91; position: relative;}
.page_nav{width:80%; margin: 0 auto;  height: 50px; line-height: 50px; background: #004b91;}
.page_nav a{ color: #fff;}
.page_nav li { display: inline-block; padding: 0 2vw; }
.page_nav li a{color: #fff; font-size: 15px;}

/*案例列表页*/
.z_indexbar2{ height: auto;}
.z_indexbar2 .z_index_img,.z_indexbar2 .z_index_text{ width: 50%; height: 540px; text-align: left;}
.z_indexbar2:nth-child(odd) .z_index_text{ text-align: left;}
.z_indexbar2 .z_index_img{ overflow: hidden;}
.z_indexbar2 .z_index_img img{ width: 100%; height: 100%; transition: all .8s; vertical-align: bottom;}
.z_indexbar2 .z_index_img img:hover{ transform: scale(1.1,1.1);}
.z_indexbar2 .z_seemore{ margin-top: 50px;}
.z_indexbar2 .center_box{ margin: 100px auto;}
.z_indexbar2 .z_index_text .text{ margin: 40px 0;}
/*案例详情页*/
.case_page{ margin-top: 107px; margin-bottom: 150px;}
.case_left{ width: 25%; float: left;} 
.case_right{ width: 69%; float: right;}
.case_right .box img{ max-width: 100%;}
.case_right .box h3{ line-height: 30px;}
.case_left h3{ font-size: 30px;}
.case_left em{ display: block; width: 24px; height: 5px; background: #004B91;margin: 30px 0;}
.case_left .case_xh li{ line-height: 24px;}
.case_left .case_xh li span{ display: block; color: #898989;}
.case_left .case_desc{ margin: 60px 0;}
.case_left .case_desc h4{font-size: 18px; padding-left: 10px; height: 18px; border-left: 3px  solid #333333; line-height: 18px;  margin-bottom: 20px;}
.case_left .case_desc .desc_text{ line-height: 24px; color: #898989;}
.case_left .case_nav a{display: block; width: 170px; height: 54px; line-height: 54px; text-align: center; color: #fff; background: #282828;}
.case_left .case_nav a.active{ background: #004B91;}
.case_left .case_nav a:last-child{ background: #101010;}
/*产品2*/
.pro_jj{ position: relative;}
.projj_rgt,.projj_lft{ height: 640px;}
.projj_rgt{ width: 50%; position: absolute; right: 0; top: 0;}
.projj_lft{ width: 42%; padding: 90px 0; box-sizing: border-box;}
.projj_lft h3 span{ font-size: 92px; font-family: "CG"; color: #e0e4ec; display: block;}
.projj_lft h3 em{ font-size: 30px; color: #004B91;  position: relative; top: -50px;}
.projj_lft .text{ color: #666; line-height: 24px;}
.projj_lft .text p{ margin-bottom: 20px;}
.projj_lft .text p:last-child{ margin-bottom: 0;}

.pro_ln{ width: 100%; padding: 110px 0; background: url(/img/ln_bg.jpg) no-repeat center; background-size: cover; text-align: center;}
.pro_ln a{ display: block; width: 100%; height: 100%; color: #fff; text-align: center;}
.pro_ln h3{ font-size: 30px; line-height: 48px; margin-bottom: 30px;}
.pro_ln span{ display: inline-block; background: url(/img/more_bg.png) no-repeat center bottom;  background-size: 100% auto; padding: 0 10px; line-height: 30px;}
.pro_show{ padding: 120px 0; box-sizing: border-box; background: url(/img/pro_bg.jpg) no-repeat center; background-size: 100% 100%;}
.pro_show ul,.prost_list ul{ margin-left: -1.5%;}
.pro_show ul li,.prost_list ul li{ width: 23.5%; float: left; margin-left:1.5% ;}
.pro_show ul li .img,.prost_list ul li .img{ height: 356px; width: 100%; overflow: hidden;}
.pro_show ul li .img img,.prost_list ul li .img img{ width: 100%; height: 100%; transition: all .7s;}
.pro_show ul li:hover img,.prost_list ul li:hover img{ transform: scale(1.1,1.1);}
.pro_show ul li .info,.prost_list ul li .info{ background: #fff; padding: 30px; box-sizing: border-box; color: #989898;} 
.pro_show ul li .info h3{ color: #333;font-size: 16px; padding-left: 10px; position: relative; margin-bottom: 8px;}
.pro_show ul li .info h3:before{ content: ""; display: block; width: 5px; height: 2px; background: #333;position: absolute; left: 0;top: 50%;transform: translateY(-50%);}
.pro_show .tit{ line-height: 40px; font-size: 30px; margin-bottom: 38px;}
.pro_show .tit a{ display: inline-block; width: 40px; height: 40px; text-align: center;line-height: 40px; color: #fff; background: #004B91; border-radius: 50%; float: right;}
.pro_st{ background:url(/img/st_bg.jpg) no-repeat center; background-size: cover; color: #fff;}
.pro_st h3{ margin-bottom: 0;}
.pro_store{ background: #fbfbfb; padding: 100px 0; }
.sel_box{ margin-bottom: 50px;}
.sel_box li{ width: 22%; display: inline-block; position: relative;  background: #fff;} 
.sel_box li select{ width: 100%; height: 54px;line-height: 54px;padding: 0 30px; box-sizing: border-box; background: url(/img/arr_b.png) no-repeat right 20px center; border:none; cursor: pointer;}
.sel_box .st_search{ display: inline-block;width: 33%; background: #fff;height: 54px; float: right;}
.sel_box .st_search .s_text{  width: 74%; border:none; height: 52px; float: left; padding: 0 30px; box-sizing: border-box;}
.sel_box .st_search .s_btn{ display:block; width: 24%; height: 100%; background: #004B91; color: #fff; text-align: center; line-height: 54px; float: right; font-size: 16px;}
.sel_box .st_search .s_btn img{ vertical-align: middle; margin-right: 10px;}
.prost_list ul li{ margin-bottom: 30px;}
.prost_list ul li .img{ height: 270px;}
.prost_list ul li .info h3{ background:url(/img/dizi.png) no-repeat center left; padding-left: 30px; color: #333;}
.pro_show2{ background:#fbfbfb; padding: 80px 0; }

/*产品一*/
.banner_tit{ position: absolute; left: 50%;top:50%;  transform: translate(-50%,-50%); text-align: center; width: 35%;  }
.banner_tit h4{ font-size: 30px;}
.banner_tit h3{ font-size: 36px; font-weight: bold;}
.banner_tit p{ line-height: 24px; color: #666; margin: 50px 0;}
.banner_tit .cir{ display: block; width: 1px; height: 50px; background: #004B91; position: relative; margin: 0 auto;}
.banner_tit .cir em{display: block; width: 20px; height: 20px; border:1px solid #004B91; position: absolute; bottom: -10px; left: -10px; border-radius: 50%;  animation:cir 2s linear infinite;  } 
.pro_class{ position: relative;background: rgba(0,0,0,.9);}
.proc_box{ width: 25.5%; float: left; height: 780px; position: relative; z-index: 1; transition: ease .5s}
.proc_box:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5);position: absolute; left: 0; top: 0;z-index: -1;}
.proc_box.on{ width: 49%;}
.proc_box .con{ position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); text-align: center; width: 340px;z-index: 1; padding: 100px 0; color: #fff;}
.proc_box .con:before{ content: ""; display: block; width:100%; height: 100%; background: rgba(0,75,145,.85); position:absolute; left: 50%;top: 50%;z-index: -1; opacity: 0;transition: ease .8s;}
.proc_box.on .con:before{  opacity: 1; left: 0;top: 0;transform: scale(1,1); }
.proc_box h3{font-size: 24px; margin-top: 20px; margin-bottom: 40px;}
.proc_box:last-child{ position: absolute; right: 0;top: 0;}
.proc_box:hover:before{ opacity: 0;}

/*联系*/
.map{}
.map img{ width: 100%;}
.conatct_info{ width: 1200px; margin: 50px auto; }
.contact_tit{ padding: 40px 0; border-bottom: 1px solid #e5e5e5; font-size:24px; margin-bottom: 40px;}

.contact_tit .fr{ font-size: 12px; color: #666;}
.contact_tit .fr em{ display: block; font-size: 24px; font-weight: bold; color: #004B91;}
.contact_li li{ display: inline-block; color:#383838;margin-right: 80px;}
.contact_li li:last-child{ margin-right: 0;}
.contact_li li img{ vertical-align: middle; margin-right: 10px; }

/*留言*/
.ly_page{ background:#fbfbfb; padding: 120px 0;}
.ly_box{ background: #fff; padding: 80px 160px; box-sizing: border-box;}
.ly_box .ly_left{ width: 43%; float: left;}
.ly_box .ly_form{ width: 57%; float: right;}
.ly_tit h3{ font-size: 30px; font-weight: bold; font-family: "CG";}
.ly_tit em{ display: block; width: 18px; height: 4px; background: #004B91;margin: 30px 0;}
.ly_info{ color: #878787; line-height: 24px; }
.ly_tel{ margin-top: 40px; color: #878787;}

.ly_tel h3{ font-size: 24px; font-family: "CG"; color: #333; font-weight: bold;}
.ly_form li{ width: 100%;}
.ly_form li label{ display: block; margin: 20px 0;}
.ly_form li .text_input{ width: 100%; height: 40px;border:none ;border-bottom: 1px solid #eaeaea; }
.ly_form li textarea{ height: 150px; width: 100%; background: #fafafa; border:none; padding: 10px; box-sizing: border-box;}
.ly_form .sub_btn{ display: block; width: 100%; height: 50px; color: #fff; font-size: 18px; background:#141414; line-height: 50px; border: none; margin-top: 60px;    text-align: center;}

/*联系门店*/
.store_name{ text-align: center;font-size:36px; margin-bottom: 60px;}
/*门店展示*/
.storexq_box{ background: #fff; margin: 80px auto;}
.store_addre{ width: 100%;}
.store_left,.store_map{ height: 400px; float: left;}
.store_left{ width:25%; float: left; background: #004B91; color: #fff; padding: 60px; box-sizing: border-box;}
.store_left h3{ font-size: 30px;}
.store_left em{ display: block; width: 16px; height: 3px; background: #fff; margin: 30px 0;}
.store_tel{ line-height: 24px;}
.store_map{ width: 75%;}
.store_map img{ width: 100%; height: 100%;}

.store_pic{ text-align: center;}

.store_pic h3{ font-size: 24px; margin: 40px 0;}
.store_pic img{ max-width: 100%;}

/*新闻详情页*/
.news_list{  margin: 70px auto;}
.news_box{ padding: 80px 160px; box-sizing: border-box;background: #FFF; margin: 70px auto;}
.news_tit{ padding-bottom: 30px; border-bottom: 1px solid #c9c9c9; }
.news_tit h3{ font-size: 24px; margin-bottom: 20px;}
.news_tit p{ color: #898989;}
.news_tit p span{ display: inline-block; margin: 0 10px;}
.news_tit p .time{ display: inline-block; background: url(/img/time.png) no-repeat center left;padding-left: 20px;}
.news_con{ padding: 40px 0; line-height: 24px; color: #898989;border-bottom: 1px solid #c9c9c9; min-height: 400px;}

.news_con img{ max-width: 100%;}
.topbtm_bar{ position: relative; margin-top: 70px;}
.topbtm_bar a{ display: block; width: 100%; margin-bottom: 10px;}
.topbtm_bar a:hover{ color: #004B91;}
.topbtm_bar a.back{ width: 170px; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #004B91; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.news_list .boxli{ float: left; margin-bottom: 30px; transition: all .6s;}
.topnews{margin-left: -2%;}
.topnews .boxli:first-child{ width: 48%; height: 565px; position: relative; }
.topnews .boxli:first-child .img{width: 100%; height: 100%;}
.topnews .boxli:first-child .info{  position: absolute; right: 30px; bottom: 30px; padding: 37px 40px; background: rgba(0,75,145,.9); width: 42%; color: #fff; }
.news_list .boxli .info{padding: 37px 40px;box-sizing: border-box; z-index: 1;position: relative;}
.news_list .boxli .info:before{ content: ""; display: block; width: 100%; height:0%; background: #004b91; transition: all .8s; position: absolute; left: 0; top: 0;z-index:-1;}
.news_list .boxli .info h3,.boxlic .info h3{ font-size: 16px; margin-bottom: 40px; font-weight: bold;}
.news_list .boxli .info p,.boxlic .info p{ line-height: 24px; margin-bottom: 70px;}
.news_list .boxli{ width: 22.9%; float: left; background: #fff; box-sizing: border-box;}
.news_list .boxli .img{ width: 100%; height: 270px; overflow:hidden;}
.news_list .boxli .img img{ width: 100%; height: 100%; transition: all .8s;}
.news_list .boxli:hover .img img{transform: scale(1.1,1.1);}
/*.topnews .boxli{ margin-left: 2%;}*/
.btmnews .boxli{ width: 23.5%;}
.boxlic{ width: 48%; height: 565px; position: relative; }
.boxlic .img{width: 100%; height: 100%;}
.boxlic .info{  position: absolute; right: 30px; bottom: 30px; padding: 37px 40px; background: rgba(0,75,145,.9); width: 42%; color: #fff; }
.boxlic .img img{ width: 100%; height: 100%;}
.news_list .boxli:hover .info{ color:#fff;}
.news_list .boxli:hover .info:before{ height: 100%;}
.load_more{ display: block;width: 170px; height: 54px; text-align: center; background: #fff; line-height: 54px; margin: 120px auto; font-size: 16px;}
#baiduMap{width:100%;height:600px;}
#baiduMap2{width:100%;height:400px;}



.lhimg1{width:42px; display:inline-block;}
.lhimg2{display:inline-block; width:118px;}
.lhimg3{display:block; width:78px;margin:auto}












@media screen and (max-width: 1440px){
#baiduMap{width:100%;height:400px;}
#baiduMap2{width:100%;height:400px;}
.z_sidenav{ width: 70%;}
}
@media screen and (max-width: 1366px){
	.z_index_text .center_box{ width: 84%;}
	.z-container{ width: 94%;}
	.footer .foot_l dl{ margin-right: 20px;}
	.store_left{ padding: 30px;}
}

@media screen and (max-width: 1200px){
	.z_sidenav{ width: 80%; padding: 50px;}
	.conatct_info{ width: 90%;}
	.news_box{ padding: 40px 80px;}
.news_list .boxli .info{ padding: 20px;}
}
@media screen and (max-width: 1025px){
.banner-box .bannertit img{ height: 200px;}
.center_box{ width: 98%;}
.z_userstory .boxli .info{ padding: 40px;}
.z_userstory .boxli .more{ right: 40px; bottom: 50px;}
.news_list .boxli{ width: 31.8%;}
}

@media screen and (max-width: 800px){
.z-nav li:nth-child(6),.z-nav li:nth-child(7){display:block;}
.page_nav a{margin-right:15px;}
#baiduMap{width:100%;height:300px;}
#baiduMap2{width:100%;height:300px;}
.logo_box .logoimg,.logo_box .menu_btn{ height: 55px; width: 55px;}
.footer .foot_r{ width: 100%;}
.footer .foot_l{ display: none;}
.company_jj .jj_left{ width: 100%;}
.company_jj .right_bar{ position: relative;width: 100%;top: 0px;height:130px;}
.hz_tit h3{ font-size: 18px;}
.z_userstory .boxli{ height: 300px; width: 100%;}
.z_userstory .boxli:first-child{ height:300px;}
.user_tit{ line-height: 80px; height: 80px; font-size: 20px;}
.user_tit a{ margin-top: 30px; width: 20px; height: 20px; line-height: 20px;}
.z_userstory .boxli .info{ padding: 20px; padding-bottom: 50px;}
.z_userstory .boxli .info h3{ font-size: 18px;}
.z_userstory .boxli .more{ right: 0; bottom: 0;}
.index_news .tit{ position: absolute;  left: 20px;top: -40px; font-size: 20px;}
.index_news ul{ margin-top: 50px;}
.index_news ul li{ width: 100%; height: auto;}
.index_news ul li .content{ width: 100%; position: relative; left: 0; top: 0; transform: translate(0,0); padding: 20px 10px; box-sizing: border-box;}
.index_news ul li .z_seemore{ margin-top: 20px;}
.hz_logo{ padding: 30px 0;}
.hz_tit,.hzlogo_list{ width: 100%;}
.hzlogo_list{ margin-top: 30px;}
.honor_img,.honor_img .bd ul{height: auto;}
.about_progress .pg_tit{ margin-bottom: 20px;}
.company_honor .honer_text, .company_honor .honor_img{ width: 100%; height: auto;}
.honor_img{ height: auto!important;}
.company_honor .honer_text{ padding: 20px 10px; box-sizing: border-box;}
.z_indexbar2 .z_index_img,.z_indexbar2 .z_index_text{ width: 100%; height: auto;}
.z_indexbar2 .z_seemore{ margin-top: 20px;}
.projj_lft{ width: 100%;}
.projj_rgt{ width: 100%; position: relative; height: 300px;}
.projj_lft h3 span{ font-size: 32px;}
.projj_lft h3 em{ font-size: 16px; top:-10px;}
.projj_lft,.pro_ln,.pro_show,.pro_store{ padding: 30px 0;}
.pro_ln h3{ font-size: 18px; line-height: 24px;}
.pro_show ul li, .prost_list ul li{ width: 48.5%;}
.pro_show ul li .img, .prost_list ul li .img{ height: auto;}
.sel_box li{ width: 32%; margin-bottom: 10px;}
.sel_box .st_search{ width: 100%;}
.case_left,.case_right{ width: 100%;}
.case_page{ margin: 30px auto;}
.case_left .case_nav{ margin-bottom: 20px;}
.case_left .case_nav a{width: 33.3%; float: left;}
.contact_li li{ width: 100%; margin-right: 0; margin-bottom: 10px;}
.conatct_info{ margin: 20px auto;}
.contact_tit{ padding: 10px 0;}
.contact_tit .fr{ width: 100%; margin-top: 20px;}
.ly_page{ padding: 20px 0;}
.ly_box{ padding: 20px;}
.store_name{ font-size: 18px; margin-bottom: 20px;}
.store_left{ height: auto;}
.store_left h3{ font-size: 20px;}
.store_left,.store_map{ width: 100%;}
.storexq_box{ margin: 30px auto;}
.store_map{ height: 200px;margin-top: 20px;}
.z-container2{ width: 94%;}
.news_box{ padding: 20px 0px; margin: 0 auto;}
.news_tit{ padding-bottom: 10px;}
.news_tit h3{ font-size: 16px; margin-bottom: 10px;}
.news_con{ padding: 20px 0;}
.topbtm_bar{ margin-top: 10px;}
.topbtm_bar a.back{ position: relative; transform: translateY(0);}
.news_list .boxli{ width:47%;}
.news_list .boxli .info{ padding: 10px;}
.news_list .boxli .info p{ margin-bottom: 20px;}
.boxlic{ height: 350px;}
.news_list .boxli .img{ height: auto;}
.news_list{ margin: 30px auto;}
.logo_box {width: 50px;}
#wrapper { height: 50px; width: 100%; overflow: hidden;}
.page_nav { line-height: 50px; height: 50px;overflow: hidden; min-width: 100vw; width: auto; }
}

@media screen and (max-width: 420px){
#baiduMap{width:100%;height:200px;}
#baiduMap2{width:100%;height:200px;}
.banner-box .bannertit img{ height: 100px;}
.z_sidenav{ display: none;}
.z-header{ position: fixed; left: 50%; top:0; width: 50%; height: 100%; background:rgba(0,75,145,.7); transform: translateX(100%); transition:ease 1s; }
.z-header.active{ transform: translateX(0);}
.z-header-r{ width: 100%;}
.z-header-r ul{ width: 100%; text-align: center; }
.z-header-r ul li{ width: 100%; line-height: 50px;}
.tel_bar{ position: absolute; bottom: 10px; left:0px; margin-right: 0; }
.tel_bar H3{ font-size: 14px;}
.logo_box{ position: absolute; left: 0; top: 0; transform: translateY(0);}
.logo_box .menu_btn{  display: none;}
.z-header .mobilebtn{ position: absolute; left: -35px; top:0px;margin-top: 0; background:rgba(0,75,145,.7);}
.z-nav-btn span,.mobilebtn span{ margin: 0 auto}
.z-nav-btn .line1,.mobilebtn .line1{ margin-top:5px;}
.z-nav-btn .line2,.mobilebtn .line2{ margin: 5px auto;}
.mobilebtn{ display: block;}
.z_progress{ height: auto;}
.z_index_text,.z_index_img{ width: 100%;}
.z_progress .center_box{ margin-top: 20px;}
.z_index_text .center_box{  margin: 20px auto; width: 90%;}
.z_index_text{ text-align: center;}
.z_index_text .tit h3{ font-size: 20px; margin: 20px 0;}
.z_index_text .tit em{ height: 20px; display: none;}
.z_progress_bd ul h3{ font-size: 22px;}
.z_index_text .text{ margin: 20px 0; line-height: 20px;font-size:14px;text-align: left;}
.z_seemore{ margin-top: 0; margin-bottom: 20px;}
.z_progress_fr .tit h3{ font-size: 24px;}
.z_progress_fr .tit h4{font-size: 16px;}
.z_progress_hd ul li{ margin: 0; margin-bottom: 10px;}
.z_progress_fr .tit em{ margin: 10px 0;}
.z_progress_fr{ position: relative;top: 0; padding: 20px 0;}
.z_indexbar{ height: auto;}
.z_indexbar .z_index_img .blue_box{ position: relative; transform: translateY(0);}
.z_index_img .blue_box{ padding: 30px 30px; margin-top: 0;}
.z_index_img .blue_box h4{ margin: 20px 0; font-size: 18px;}
.company_jj{ padding: 30px 0;}
.company_jj .jj_left h3 span{ font-size: 40px;}
.company_jj .jj_left h3 em{ font-size: 15px; top: -20px;    font-size: 24px;}
.company_jj .right_bar .box{ width: 33.3%; height: auto; padding: 20px 0; font-size: 12px;    min-height: 120px;}
.company_jj .right_bar .box h3{ font-size: 38px; margin: 0;}
.company_brand .top_text{ width: 100%; padding: 30px 0;}
.company_brand .brand_lsit h3{ font-size: 16px;}
.company_brand .brand_lsit .box{ width: 100%; height: auto; height: 200px;}
.company_brand .brand_lsit .box .more{ margin: 0;}
.about_progress{ padding: 30px 0;}
.pg_hd ul li{ margin-left: 20px; margin-bottom: 20px;}
.pg_hd ul li:before{ width: 20px; left: -20px;}
.pg_hd ul li:last-child:after{ width: 20px; right: -20px;}

.honer_text .tit{ margin: 0 auto; margin-bottom: 20px;}
.honer_text .tit h3{ width: 100px; height: 80px; line-height: 80px; font-size: 28px; margin: 0 auto;}
.honer_text .tit h4{ font-size: 20px;}
.honor_li li{ margin-bottom: 10px;}
.footer>.z-container{ padding: 20px 0;}
.footer .foot_r .foot_text h3{ margin-bottom: 20px;}
.footer .foot_r .foot_code{ margin: 0 auto;}
.footer .foot_r .foot_text,.footer .foot_r .foot_code{ width: 100%;}
.footer_bar{ line-height: 30px ;}
.z_progress_fr .center_box{ position: relative; transform: translate(0,0); left: 0; top: 0;}
.ly_box .ly_left,.ly_box .ly_form{ width: 100%;} 
.news_list .boxli2{ display: none;}
.news_list .boxli{ width: 100%;}
.proc_box{ height: 380px; width: 100%;}
.proc_box.on{ width: 100%;}
.proc_box:last-child{position: relative;}
.banner_tit h4,.banner_tit h3,.banner_tit p{ display: none;}
.boxlic .info{    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 20px;
    background: rgba(0,75,145,.9);
    width: 50%;
    color: #fff;}
.news_list .boxli .info h3, .boxlic .info h3{ font-size:14px; margin-bottom:20px}
.news_list .boxli .info p, .boxlic .info p{ margin-bottom:20px}



.conjidi li{ margin-bottom: 10px;}
.company_jj .z-container{ width: 98%!important;}
.company_brand .top_text h3,.about_progress .pg_tit h3{ font-size: 24px;}
.proc_box .con{ padding: 60px 0;}
.company_brand .brand_lsit .box:before{ opacity: 1; left: 0; width: 100%; height: 100%;}
.page_nav li{ padding: 0 1vw;}
	.wrapper .scroller {position:absolute}
	.wrapper .scroller li {height:50px;color:#333;float: left;line-height: 50px;text-align: center}
	.wrapper .scroller li a{display:block;margin:0 10px}
	.wrapper .scroller li.cur a{color:#fff;}
	.lina{ display: block; float:left;}
	.footer_bar p{ display: block; float: left;}
}

























@keyframes lo
{
    from {transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transition: all 30s;
        -webkit-transition: all 30s;
        -o-transition: all 30s;
        -moz-transition:all 30s;
    }
    to {  transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -moz-transform: scale(1);
        transition: all 30s;
        -webkit-transition: all 30s;
        -o-transition: all 30s;
        -moz-transition:all 30s;
    }
}


@keyframes cir
{


    from {
    transform: translateY(-50px);
    

        -webkit-transform: translateY(-50px);
        -o-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        transition: all 30s;
        -webkit-transition: all 30s;
        -o-transition: all 30s;
        -moz-transition:all 30s;
     
    }
    to {  transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -o-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transition: all 30s;
        -webkit-transition: all 30s;
        -o-transition: all 30s;
        -moz-transition:all 30s;
    }
}


@keyframes arr
{
    from {transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        -moz-transform:translateX(-100px);
        transition: all 10s;
        -webkit-transition: all 10s;
        -o-transition: all 10s;
        -moz-transition:all 10s;
    }
    to {  transform:translateX(0px);
        -webkit-transform:translateX(0px);
        -o-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transition: all 10s;
        -webkit-transition: all 10s;
        -o-transition: all 10s;
        -moz-transition:all 10s;
    }
}
@media screen and (max-width: 375px){
.pg_hd ul li {
    margin-left: 0px;
    margin-bottom: 20px;
}
  .pg_hd ul li:before{
      width: 9px;
    left: -7px;
  }
}