body{background: #eae9ff;font-family: "微软雅黑";height: 100%;}
a{color: #000; text-decoration: none;}
html{height: 100%;}


/* nav */
.nav{width: 15%;height: 100%;position: fixed;z-index: 999999;top: 0;left: 0; background-color: #7770d2;}
.nav_in{width: 100%;margin: 0 auto ;  }
.logo{margin: 0 auto;height: 65px;text-align: center;padding: 10px 0;}
.logo img{width: 100%;}
.nav_r{margin-top: 50px;}
.nav_r ul li{text-align: center;width: 100%;}
.nav_r ul li a{font-size: 16px;color: #EEEEEE;height: 50px;line-height: 50px;display: block;}
.nav_r p{width: 9px;height: 1px;background: #EEEEEE;margin: 20px auto;}
.navs span{display: block;width: 9px;height: 1px;background: #eee;margin: 20px auto;}
.nav ul .navs .nv{font-size: 16px;text-decoration: none;width: 100%;height: 100%;display: block;line-height: 50px;}
.nav ul .navs .nv:hover{;color: #FFFFFF;font-weight: bold;font-size: 16px;background: #a9a3fd;}
.nav .on a{background: #a9a3fd;}
.nav ul .in{padding-right: 0;background: none;}
.nav_list{display:none; position: absolute;top:0px;background:#666;cursor:pointer;left: 100%;z-index: 999999;height: 100%;background: #FFFFFF;}
.nav_list ul{text-align:center;}
.nav_list ul li{text-align:center;padding: 0;margin: 0;}
.nav_list ul .nov{position: relative;font-family: '微软雅黑';word-wrap:break-word;vertical-align: middle;display: table;}
.nav_list ul .nov a{display: block;height: 40px;text-align: center;color: #fff;line-height: 40px;width:140px;text-decoration: none;font-size: 14px;word-wrap:break-word;vertical-align: middle;display: table;box-sizing: border-box;}
.nav_list ul .nov a:hover{background:#f30e22; color:#fff;}


.nav-b .chen {
    position: absolute;
    z-index: 100;
    bottom: 10%;
    left: 50%;
    width: 26px;
    text-align: center;
    margin-left: -13px;
}
.nav-b .chen li a {

    height: 22px;
    line-height: 22px;
    display: block;
    color: #EEEEEE;
}
.check{background: #FFFFFF;}
.nav-b .chen .check a{color: #000000;font-weight:bold ;}
.chen  p {
    margin: 20px auto;
    height: 1px;
    width: 9px;
    background: url(../images/1.gif) no-repeat center center;
}
.chen li a:hover{background: #FFFFFF;color: #000000;}

.nav2{width: 100%;height: 50px;position: fixed;z-index: 99999;background: #7770d2;display: none;top: 0;}
.nav2 h1 {position: absolute;left: 50%;margin-left: -65.5px;}
.nav2 h1 img{height: 50px;}
.neu-tit span img{width: 22px;}
.neu-menu{width:100%;background: #eee;}
.neu{color: #FFFFFF;font-size: 14px;position: absolute;left: 10px;top: 50%;margin-top: -7.5px;}
.neu-con{position: absolute;width:120px;z-index: 9999999;top:32px;text-align: center;
    border-bottom: 2px solid #3e3771;border-top: 2px solid #3e3771;border-right: none;background:#7770d2;box-sizing: border-box;left: -20px;}
.neu-con ul h2{width:100%;height:50px;text-align: right;}
.neu-con ul h2 a{font-size: 16px;text-decoration: none;cursor: pointer;display: block;width: 26px;height: 26px;text-align: center;line-height: 22px;float: right;margin-left: 10px;}
.neu-con ul h2 .ch{background: #000000;color:#FFFFFF;}
.neu-con ul li{line-height: 50px;position: relative;}
.neu-con ul li a{color: #FFFFFF;cursor: pointer;font-size: 15px;}
.neu-con ul li a:hover{color: #666;text-decoration: none;}
.dan{position: absolute;left: 65px;top: 0;}
.neu-menu ul{list-style: none;margin:0;padding:0;}
.neu-con .neu-menu ul li{border: 0;line-height: 40px;}
.neu-menu  ul li a{color:#666;text-decoration: none;}
.navs2{width:100%;font-size: 1.2em;color:#fff;}
.neu-na span{display: block;width: 9px;height: 1px;margin: 20px auto;background: #ccc;}
/* .neu-na .on{background: #444444;} */
.neu-con ul li.on a{color: #FFFFFF;}

.lan{position: absolute;right: 10px;}
.lan .ages{display: block;position: relative;width:21px;height:50px;line-height: 60px;}
.lan .ages img{width:20px;}
.language{padding:10px;background: #3e3771;position: absolute;top: 50px;right:-10px;z-index: 999999;}
.lan .language li{line-height: 30px;display: block;float: none;}
.language li a{font-size: 14px;color:#fff;display: block;text-decoration: none;font-family: 'microsoft yahei';padding: 0 30px;margin-left: 5px;width: 100%;}



/*··········轮播·············*/
.btop{width: 100%;height: 100%;overflow: hidden;}
.banner{width:100%;height:100%;position: relative;overflow: hidden; margin:0 auto;z-index: 2;}
.banner ol{ position:absolute; z-index:1;right: 50%;bottom: 15px;transform: translateX(50px);}
.banner ol li{float: left;width: 14px;height: 14px; color:#fff;text-align: center;line-height: 20px;margin-left: 20px;font-weight: bold; cursor: pointer;border-radius:7px ;background:#fff;}
.banner .cur{width: 30px;height: 14px;color:#fff;line-height: 30px;background: #fff;border-radius:7px ;}
.banner .all2{width: 300%;height: 100%;position:relative; z-index:0;}
.banner .all2 li{width: 33.333333333333333333%;height:100%;float: left;box-shadow:rgba(0,0,0,0.1) 0px 0px 14px 0px;position: relative;overflow: hidden;z-index: 3;}
.banner .all2 img{width: 100%;}

/*··········轮播结束·············*/
.banner .all2 li h2{width: 410px;height: 110px;background: rgba(171,10,6,0.8);position: absolute;right: 0;bottom: 5%;padding: 15px 65px 0 25px;box-sizing: border-box;}
.banner .all2 li h2 p{font-size: 20px;color: #FFFFFF;font-weight: bold;line-height: 50px;letter-spacing: 2px;}
.banner .all2 li h2 span{font-size: 16px;color: #FFFFFF;font-family: arial;}

.li1{background: url(../images/banner.jpg) no-repeat center center;background-size:cover;}
.li2{background: url(../images/banner.jpg) no-repeat center center;background-size:cover;}
.li3{background: url(../images/banner.jpg) no-repeat center center;background-size:cover;}




/* content */
.content{width: 100%;padding-left:15% ;box-sizing: border-box;}
.content-in{width:100%;background: #FFFFFF;margin:0 auto ;}
.about h2 img{width: 28%;}
.about h2{text-align: center;margin-bottom: 30px;}
.about{padding: 150px 0; width: 90%; margin: 0 auto;}
.ab-in .ab-lo{width: 350px;height: auto;position: relative;margin: 0 auto ;}
.ab-in .ab-lo div{display: block;text-align: center;margin: 3px 0;}
.ab-in .ab-lo div:nth-of-type(1){font-size: 20px;font-weight: bold; color:#3e3771;}
.ab-in .ab-lo div:nth-of-type(2){font-size: 12px;font-family: arial; color:#7770d2;}
.ab-in span{width: 75px;height: 1px;background: #000;position: absolute;display: block;}
.ab-in span:nth-of-type(1){left: 0;top: 50%;}
.ab-in span:nth-of-type(2){right: 0;top: 50%;}
.ab-zi{width:80%;line-height: 50px;margin: 0 auto;font-size: 14px;margin-top:20px; text-align: center;}
.ab-zi a:hover{text-decoration: none;}

.prodcut{width: 100%;height: auto; padding-top: 50px;background-color: #eae9ff;}
.p-in{width: 90%;margin: 0 auto;}
.h3 img{height: 20px;}
.h3{text-align: center;}
.spp{display: block;width: 90px;height: 1px;background: #999;margin:10px auto;}
.pp{text-align: center;font-size: 12px;color: #999999;}
.p-ul{width: 100%;height: auto;overflow: hidden;margin: 75px 0;}
.p-ul li{width: 22.7444444444%;float: left;margin-right: 3%;height: 385px;position: relative;}
.p-ul .p-li4{margin: 0;}
.p-di1{background: url(../images/pro1.jpg) no-repeat center center;background-size:100% 100%;}
.p-di2{background: url(../images/pro2.jpg) no-repeat center center;background-size:100% 100%;}
.p-di3{background: url(../images/pro3.jpg) no-repeat center center;background-size:100% 100%;}
.p-di4{background: url(../images/pro4.jpg) no-repeat center center;background-size:100% 100%;}
.p-ul li .p-black{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.3);top: 0;}
.p-ul li:hover .p-black{top: -385px;transition: all 1s;}
.p-ul div{width: 100%;height: 100%;}
.box{
	height: auto;
	overflow: hidden;
	width: 85%;
	margin: 0 auto;
	position: relative;
	padding: 40px 0 60px;

}

#roll{

	width: 200%;
	overflow: hidden;

}

#roll dd{

	width: 200px;

	height: auto;


	float: left;

	margin-right: 28px;
	position: relative;

}

.box span{position: absolute;bottom: 40%; display: inline-block;width: 50px;text-align: center;cursor: pointer;z-index: 90;color: #fff;}

.box .next{right: 0;}
.box dd .p-black{width: 100%;height: 99%;position: absolute;background: rgba(0,0,0,0.4);top: 0;}
.box dd:hover .p-black{top: -390px;transition: all 2s;}


.event{padding: 95px 0 180px;overflow: hidden;}
.e-in{width: 90%;margin: 0 auto;overflow: hidden;height: auto;}
.e-dl{width: 46%;margin:5% 2% 0 0;float: left;height: auto; padding: 1.5%;background-color: #eae9ff;}
.e-dl:hover{background-color: #3e3771;}
.e-dl:hover .e-h4{color: #fff;}
.e-dl dt{float: left;width: 32%;}
.e-dl dt img{width: 100%;}
.e-dl dd{float: right;width: 65%;margin:13px 0;position: relative;}
.e-h4{font-size: 15px;color: #666666;font-weight: bold;}
.e-p{font-size: 14px;color: #999999;line-height: 32px;}
.e-span{display: block;width: 30px;height: 1px;background: #999999;margin: 10px 0 0;}
.e-time{font-size: 10px;color: #999999;font-family: arial;letter-spacing: 1px;}
.e-m{display: block;width: 25px;height: 25px;border: 1px solid #999999;border-radius: 50%;background: url(../images/more-icon2.png) no-repeat center center;position: absolute;right: 0;bottom: -10%;background-size:70% ;}
.e-dl:hover .e-m{background:url(../images/more-icon1.png) no-repeat center center;background-size:70% ;transition: all 1s;}
.e-dl:hover .e-h4{text-decoration: underline;}
.e-in .no{margin-right: 0;}
.e-dl:nth-child(2n){margin-right: 0;}



.mem{width: 100%;height: auto;overflow: hidden;padding: 70px 0;}
.m-in{width: 80%;margin: 0 auto;}
.banner7{width:100%;height:auto;position: relative;overflow: hidden; margin:0 auto;z-index: 0;}
.banner7 .all7{width: 500%;height: auto;position:relative; z-index:0;}
.banner7 .all7 li{width: 20%;height:auto;float: left;overflow: hidden;}
.banner7 .all7 li img{width: 100%;}
.m-bo{position: relative;margin: 70px 0;}
.lubo_btn7{display: block; position: absolute;  top: 50%;z-index: 100;margin-top: -29px;width: 100%;}
.left7, .right7{ filter:alpha(opacity=80); cursor: pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.left7{position: absolute;left: -73px;}
.right7{position: absolute;right: -73px;}
.m-in .face {
    width: 35%;
    float: left;
    margin: 38px 0 0 0;
}
.m-in .text {
    width: 57%;
    float: right;
}
.m-in .t1 {
    padding: 40px 0 10px 0;
    line-height: 36px;
    font-size: 18px;
    color: #393939;
    background: url(../images/quotes1.png) no-repeat 0 0;
}
.m-in .t1Box {
    padding: 0 0 40px 0;
    background: url(../images/quotes2.png) no-repeat right bottom;
    font-size: 15px;
    color: #666;
}
.fmP {
    font-family: PFDINTEXTPRO-THIN_1;
}
.m-in .t2 {
    line-height: 26px;
}
.m-in .p1 {
    font-size: 24px;
    font-family: arial;
}
.m-in .p2 {
    font-size: 20px;
    font-family: 微软雅黑;
    padding: 10px 0px 30px;
    font-weight: bold;
}
.m-in .p3{font-size: 13px;color: #000000;line-height: 32px;}




.cont{width: 100%;height: auto;}
.c-top{width: 100%;height: 380px;background: url(../images/con1.jpg) no-repeat center center;background-size:cover ;}
.c-bo{background-color: #7770d2;}
.c-bo ul{width: 100%;margin:0 auto ;overflow: hidden;}
.c-bo ul li{width: 40%;float: left;padding: 70px 5% 0 5%; min-height: 280px; position: relative;}
.c-bo ul li:first-child{background-color:#3e3771;color: #fff;}

.c-bo .c-p{font-size: 24px;font-weight: bold;color: #FFF;margin: 20px 0;}
.c-bo .c-p2{font-size: 20px;font-weight: bold;color: #FFF;margin: 5px 0 20px 0;}
.c-bo .c-p2 span{font-size: 20px;font-weight: normal;line-height: 26px;}
.c-bo .c-p2 span:nth-of-type(1){margin-right: 10px;}
.c-bo .c-p2 span:nth-of-type(2){margin-left: 10px;}
.c-bo .c-p3{font-size: 16px;color: #fff;line-height: 30px;}
.share{margin-top: 25%;float: left; color: #fff;font-size: 18px;}
.share p{margin: 15px 0;}
.share a{display: inline-block; width: 25px; height: 20px;margin-right: 5px;}
.weibo{background-image: url(../images/weibo.png);background-repeat: no-repeat;background-size: contain;}
.qq{background-image: url(../images/qq.png);background-repeat: no-repeat;background-size:contain;}
.qrcode{float: right;}
.cop-info{position: absolute;text-align: right; bottom: 0; right: 0; font-size:12px; color: #fff; margin: 0 10px 10px 0;}


/* works html */
.projectsmenu {width:10%; position:fixed; z-index:999;left:15%;top:0; background:#eae9ff;border-left:1px solid #fff;height:100%;color:#FFFFFF; text-align:center;font-size:16px;padding-top:2%;}
.projectsmenu dl.time { position:absolute;top:7.5%;width:100%}
.projectsmenu dl.time2 { position:absolute;top:35%;width:100%}
.projectsmenu dl.time3 { position:absolute;top:60%;width:100%}
.projectsmenu dd { text-align:center;padding:7.5px 20px 7.5px 15px; overflow:hidden; line-height:22px}
.projectsmenu dd a {font-family:'Microsoft YaHei',arial;color: #666;display: block;width: 100%;height: 100%;font-size:16px;}
.projectsmenu dd a:Hover,.projectsmenu dd.check a {border-bottom:1px solid #FFFFFF;color: #fff;}
.projectsmenu dl.cate dd {margin:20px 0; line-height:25px}
.projectsmenu dl.cate dd span {color:#fff; font-family:宋体}
.projectsmenu dl.cate dd a:Hover,.projectsmenu dl.cate dd.check a {font-weight:Bold;border:0}
.projectsmenu dl.cate dd a:Hover span,.projectsmenu dl.cate dd.check a span {color:#FFFFFF}
.projectsmenu a{font-size: 14px;}

.case-content{padding-left:25% ;box-sizing: border-box;width: 100%;}
.clearfix{width: 98%;
  /* background:rgba(255,255,255,0.9); */
  overflow: hidden;margin: 5% auto;padding-right: 3%;box-sizing: border-box;}
.case-title {
    padding-top: 70px;
    padding-bottom: 40px;
}
.gf-news .news-hd a, .case-title a {
    margin-right: 20px;
    color: #474646;
}

.gf-news a:hover, .gf-news a.news-on, .case-title a.news-on, .case-title a:hover {
    color: #141414;
    font-weight: bold;
}
.gf-news a:hover i, .gf-news a.news-on i, .case-title a:hover i, .case-title a.news-on i {
    background: url(../images/index_atr.png) no-repeat center top;
}
.gf-news .news-hd i, .case-title i {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    width: 7px;
    height: 7px;
    background: url(../images/news_atr.png) no-repeat center;
}
.case-content li {
    width: 30%;
    margin-right: 5%;
    float: left;
    margin-bottom: 35px;
}
.case-content .w-pic {
    overflow: hidden;
    height: auto;
}
.case-content li a {
    display: block;
}
.case-content .fix {
    margin-top: 30px;
    min-height: 40px;
}
.case-content .fix span {
    margin-right: 20px;
    line-height: 32px;
    font-weight: bold;
    white-space: nowrap;
}
.italic {
    display: block;
    font-size: 12px;
    font-family: 微软雅黑;
    color: rgb(102, 102, 102);
}

.case-content .w-pic img {
    width: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all 3s;
    transform: scale(1,1);
}
.case-content .w-pic img:hover{transform: scale(1.2,1.2) ;}
.case-content .nor{margin-right: 0;}





/* 产品详情 */
.clearfix2{width: 80%;margin: 5% auto;background: #FFFFFF;padding:6%;box-sizing: border-box;position: relative;}
.main2{width: 100%;height: 100%;}
.m-to{margin-left: 15%;box-sizing: border-box;}
.single-post-article h1 {
    line-height: 24px;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: bold;
}
.post-content .hd {
	font-size: 15px;
	line-height: 24px;
}
.post-content .hd a {
    font-weight: bold;
    text-decoration: underline;

}
.single-post-article p {
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 28px;
    padding-bottom: 20px;
}
.single_share {
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    width: 160px;
}
.bs_share a, .single_share_title {
    font-size: 12px;
}
.single_share_title span {
    display: inline-block;
    margin-left: 12px;
    background-image: url(../images/arrow_down.png);
    width: 12px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
.single_share_dropdown {
    padding-top: 12px;
    display: none;
    padding-bottom: 12px;
}
.post-content p img{width: 90%;}
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.project_close {
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/3.gif) no-repeat;
}
.single-post-article .apost-prev, .single-page-article .apost-prev, .link_wrap .apost-prev {
    display: block;
    cursor: pointer;
    background-image: url(../images/arrow_left2.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    left: -100%;
    top: 0;
}
.single-post-article .apost-next, .single-page-article .apost-next, .link_wrap .apost-next {
    display: block;
    cursor: pointer;
    background-image: url(../images/arrow_right2.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    position: absolute;
    left: -50%;
    top: 0;
}

.link_wrap{position: fixed;right: 10%;top: 10%;}
.single_share a{font-size: 12px;}







/* news html */
.main{margin: 5% 0;overflow: hidden;}
.about1{padding-left: 15%;margin: 0 auto;box-sizing: border-box;}
.about1 h1{font-size: 26px;
    color: rgb(51, 51, 51);
    margin-bottom: 30px;
    }
.news2{width:80%;border-top:1px solid #7c7c7c;margin: 0 auto;background: #FFFFFF;padding: 3%;box-sizing: border-box;}
.news2 ul{list-style: none;margin:0;padding:0;overflow: hidden;}
.news2 ul li{margin-top:20px;border-bottom: 1px dashed #CCCCCC;padding-bottom: 20px; overflow: hidden;}
.news2-img{float:left;width:20%}
.news2-img a img{width:100%;}

.news2-con{float:right;width:73%;}
.news2-con h2{font-size: 14px;color:#666;line-height: 24px;margin:0;}
.news2-con h3{font-size: 1.6em;color:#999;line-height: 30px;margin:10px 0;}
.news2-con h3 a{color:#333;text-decoration: none;font-size: 16px;}
.news2-con h3 a:hover{color:#7770d2;text-decoration: none;}
.news2-con p{font-size: 14px;color:#999;line-height: 24px;margin:0;}
.news2-con h4{font-size: 14px;color:#999;line-height: 30px;margin:20px 0 0 0;font-weight: bold;width: 90px;height: 30px;background: #3e3771;text-align: center;border-radius: 4px;}

.news2-con h4 a{text-decoration: none;color:#FFFFFF;}
.news2-con h4:hover a{text-decoration: none;color:#999;}

.skip{ padding: 20px 0 10px 0;text-align: center;cursor: pointer;}
.skip a{text-decoration: none;}
.skip a.numbers {text-decoration: none;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.skip .iconfont {
    font-size: 14px;
    vertical-align: bottom;
}
.skip .numbers {
    display: inline-block;
    width: 30px;
    padding: 3px 0;
    margin: 0 7px;
    font-size: 14px;
    font-weight: 200;
    line-height: 20px;
    color: #b0b0b0;
	border: 1px solid #d9d9d9;
}

.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.skip .current {border: 1px solid #dd3a3a;background: #dd3a3a; color: #fff;}
.skip .numbers:hover{border: 1px solid #dd3a3a;background: #dd3a3a; color: #fff;}
#dcms_pager{margin: 30px 0;}
#dcms_pager .pages {border: none;text-transform: uppercase;font-size: 12px;margin: 40px 0 10px 0;padding: 0;height: 32px;
    clear: both;text-align: center;font-family: '微软雅黑';
}
#dcms_pager .pages .pgempty {border: 1px solid #eee;color: #696969;}
#dcms_pager .pages a {width: 48px;height: 28px;line-height: 28px;text-align: center;display: inline-block;
    color: #696969;background: #ececec;margin: 0px 2px;font-size: 14px;border-radius: 3px;cursor: pointer;
}
#dcms_pager .pages .pgcurrent {color: #fff;font-weight: bold;background-color: #7770d2;}
#dcms_pager .pages a:hover {background: #000;  color: #fff;}




/* news list html */


.newsshow {
    padding-top: 15px;
    padding-right: 15px;
    width: 80%;
    margin:0 auto ;
    background: #FFFFFF;
    padding: 0 5%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 32px;
}
.newsshow .close {
    text-align: right;
}

.newsshow .title {
    padding: 10px 45px 0 0;
    font-weight: Bold;
    font-size: 20px;
    font-family: 'Microsoft YaHei',arial;
    line-height: 35px;
}

.newsshow .addtime {
    color: #7770d2;
    padding: 5px 0 50px 0;
}


.cons img{width: 100%;}






/* content html */
.conten{width: 80%;margin: 0 auto;background: #FFFFFF;padding: 6%;box-sizing: border-box;line-height: 32px;font-size: 14px;}

.img{width: 20%;}
.map{width: 100%;height: 400px;background: url(../images/map.png) no-repeat center center;position: relative;}
.map a {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 20%;
    display: block;
    width: 24px;
    height: 40px;
}
.map #cons {
    position: absolute;
    z-index: 2;
    left: 53%;
    top: 22%;
    width: 30%;
    display: none;
}
.map #cons .icon {
    background: url(../images/2.png) no-repeat;
    width: 18px;
    height: 23px;
    position: absolute;
    z-index: 5;
    left: 0px;
    top: 10px;
}
.map #cons .mconts {
    background: #000;
    border-radius: 10px;
    -webket-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 20px;
    width: 350px;
    position: absolute;
    z-index: 3;
    left: 17px;
    color: #fff;
}



/* about html */
.a-more{background: #FFFFFF;width: 85%;margin: 0 auto;}




.conp{
  width: 80%;
  margin: 20px auto;
  overflow: hidden;
}
.conp h3{
  display: block;
  width: 40%;
  background-color: #7770d2;
  color: #fff;
  height: 40px;
  float: left;
  font-size: 18px;
  line-height: 40px;
  margin: 5px 0;
}
.conp .right{
  float: right;
  width: 50%;
  text-align: left;
}
.clear{
  clear:both;
}
.under-box{
 position: relative;
}
.under-box img{
  height: 100%;
}

.on-box{
  position: absolute;
  top:-100%;
  width: 80%;
  background-color:rgba(134,130,188, 0.8);
  padding:0 10%;
  color: white;
  transition:all 0.3s ease-in-out;
}
.on-box h2{
  width: 100%;
  line-height: 120px;
  color: rgba(255, 255, 255);
  letter-spacing: 1px;
  text-align: center;
  font-size: 30px;
  height: 50%;
}
.w-line{
  height: 2px;
  background-color: white;
  width: 30%;
  margin: 0 auto;
}
.on-box p{
  line-height: 32px;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}
.box .left:hover .on-box,.box .right:hover .on-box{
  top:0;
}

.box .left,.box .right{
  width: 48%;
  margin: 1%;
  float: left;
  position: relative;
  overflow: hidden;
}
.projectsmenu dd:hover{
  background-color: #7770d2;
}
.case-content>img{
  width: 100%;
}
#showpage {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
    overflow: hidden;
    zoom: 1;
}
#showpage a , #showpage span {
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    color: #666;
    background-color: #fff;
    margin-left: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s;
    padding: 0 10px;
}
 #showpage span, #showpage a:hover{
   background-color: #7770d2;
   color: #fff;
 }