@charset "utf-8";



/* CSS Document */











.dc_list { padding-top: 30px; }



.dcmin{ min-height:500px;}



.dcmin1{ min-height:300px;}

.dcmin1 h2{font-size: 24px;font-weight: normal;line-height: 24px;color: #3b3b3b;margin:1% 1%;font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.dcmin1 h2 a{color: #3b3b3b;}
.dcmin1 h2 span{float: right;font-size: 18px;}



ul.animate { -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */ }



.stage { width: 100%; margin: 0 auto; padding: 0 ; text-align: center; overflow: hidden; position:relative; }



.stage a.prev{ position:absolute; left:10px; top:50%; height:40px; width:40px; margin-top:-40px; background: url(../images/left.png) no-repeat; display:block;}



.stage a.next{position:absolute; right:10px; top:50%; height:40px; width:40px; margin-top:-40px; background: url(../images/right.png) no-repeat;display:block;}



.sldr {  margin: 0 auto; overflow: visible; position: relative; clear: both; display: block; }



.sldr > ul > li { float: left; display: block; width: 825px; }



div.skew { display: block; overflow: hidden;  }



div.skew > div.wrap { display: block; overflow: hidden;  }



.selectors { /*margin: 15px 0 0;*/



}



.selectors li { font-size: 30px; line-height: 10px; display: inline; padding: 10px 2px 0px 2px; }



.selectors li a { text-decoration: none; font-size: 12px; width: 14px;height: 14px;/*!background: #838282; border: 1px solid #e4e4e4; */}



.selectors li.focalPoint a { color: #CCC; cursor: default; }



.captions div { left: 200%; position: fixed; opacity: 0; -webkit-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */ }



.captions div.focalPoint { opacity: 1; left: inherit; position: static; }







/*分享*/



.a2a_floating_style {animation: a2aFadeIn .2s ease-in;padding: 4px;z-index: 9999995;border-radius: 6px;position: fixed;}



.a2a_floating_style span {clear: left;display: block;overflow: hidden;padding: 4px;text-decoration: none;display: block;overflow: hidden;height: 32px;line-height: 32px;width: 32px;}



.a2a_floating_style span a {display: block;height: 32px;line-height: 32px;width: 32px;}



.a2a_floating_style span.bg1{ background:url(../images/f.png) no-repeat;}



.a2a_floating_style span.bg2{ background:url(../images/t.png) no-repeat;}



.a2a_floating_style span.bg3{ background:url(../images/g.png) no-repeat;}



.a2a_floating_style span.bg4{ background:url(../images/e.png) no-repeat;}



.a2a_floating_style span.bg5{ background:url(../images/i.png) no-repeat;}















.dc_list .item { padding:0; margin: 3% 2%; background: #fff; float: left;  box-shadow: 0px 0px 25px #ccc;}



.dc_list .item  strong { font-size:20px; color:#595757; font-weight:normal; display:block; line-height:30px; padding-bottom:1em; padding-top:0.25em;padding-left: 22px; padding-right:22px; }



.dc_list .item  p{font-size:16px;  font-family:Arial, Helvetica, sans-serif;padding:0 22px 22px 22px;}



#resize_container { position: fixed; margin:0;left: 50%;z-index: 99999; }



#resize a:hover { opacity: 1; }



.dc_list .active { opacity: 1; cursor: default }



















.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }



.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }



.rslides li:first-child { position: relative; display: block; float: left; }



.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }



.slide_container { margin-bottom: 50px; position: relative; float: left; width: 100%; max-width:1058px; }



.slide { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }



.slide li { position: absolute; width: 100%; left: 0; top: 0; }



.slide img { display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0; }







.slide .caption { display: none; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; background: #3b3b3b; background: rgba(0,0,0, .8); left: 0; right: 0; bottom: 0; padding: 10px 20px; margin: 0; max-width: none; }



.slide_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 50%; left: 0px; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 50px; width: 50px;border-radius:50px;-moz-border-radius:50px;  background: url(../images/icon-sd26986d847.png) no-repeat;  margin-top: -25px;background-color: #303030; opacity:0.5;  }











.slide_nav:hover{ background-position: -60px 0; background-color: #f75628; }



.slide_nav.next { background-position: -120px 0; height: 50px; width: 50px; border-radius:50px;-moz-border-radius:50px;right: 0px; left:auto;}



.slide_nav.next:hover { background-position: -180px 0; }















.slide_nav:active { opacity: 1.0; }























.content { width: 100%; margin: 0 auto; max-width: 1200px;  }



#full-screen-slider { width: 100%; height: 600px; float: left; position: relative }



#slides { display: block; width: 100%; height: 100%; list-style: none; padding: 0; margin: 0; position: relative }



#slides li { display: block; width: 100%; height: 100%; list-style: none; padding: 0; margin: 0; position: absolute; cursor: pointer; }



#slides li a { display: block; width: 100%; height: 100%; text-indent: -9999px }



#pagination { display: block; list-style: none; position: absolute; left: 3%; max-width: 1200px; bottom: 30px; z-index: 9999; }



#pagination li { display: block; list-style: none; width: 80px; height: 3px; float: left; margin-right: 16px; background: #3b3b3b }



#pagination li a { display: block; width: 100%; height: 100%; padding: 0; margin: 0; text-indent: -9999px; }



#pagination li.current { background: #18a2ef }



.ny_banner { height: 600px; }



.banner1 { background: url(../images/banner1.jpg) no-repeat center; }



.banner2 { background: url(../images/banner2.jpg) no-repeat center; }



.banner3 { background: url(../images/banner3.jpg) no-repeat center; }



.fw { padding-top: 77px; clear: both; overflow: hidden; width: 100%; margin: 0 auto; max-width: 1200px; }



.fw ul li { float: left; font-size: 16px; height: 192px; text-align: center; width: 20%; color: #999; line-height: 24px; }



.fw ul li a { display: block; padding-bottom: 10px; }



#slides li.libg1 { background: url(../images/banner.jpg) no-repeat center; }



#slides li.libg2 { background: url(../images/banner.jpg) no-repeat center; }



#slides li.libg3 { background: url(../images/banner.jpg) no-repeat center; }











 @media (max-width: 768px) { 



	 .dc_list { padding-top: 20px; position: relative; }







.content { width: 100%; margin: 0 auto; max-width: 1760px; padding: 0 0 50px 0; }



#full-screen-slider { width: 100%; height: 396px; float: left; position: relative }



.ny_banner { height: 343px; }



.banner1, .banner3 { background-size: 1080px; }



.banner2 { background-size: 1080px; background-position: right 30% center; }



#slides li.libg1, #slides li.libg2, #slides li.libg3 { background-size: 1080px; }



.fw { padding-bottom: 35px; padding-top: 37px; }



.fw ul li { width: 33.3333333%; font-size: 14px; height: auto; line-height: 24px;min-height: 200px; }



}



.index_case .examples_body { width: 100%; margin: 0px auto 0 auto; clear: both; padding: 0px 0% 30px 0%; overflow: hidden; position: relative; }



.index_case .bannerHolder { width: 100%; overflow: hidden; }



.index_case .bannerHolder li { list-style: none; display: inline; }



.index_case .banner { width: 33.333333333333333333333333333333%; position: relative; overflow: hidden; float: left; display: inline; }



.index_case .banner img { display: block; border: none; width: 100%; }



.index_case .banner div { position: absolute; z-index: 100; background-color: #fff; width: 60px; height: 60px; cursor: pointer; }



.index_case .banner span { display: none; }



.index_case .banner:hover span { display: block; background: #fff; position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0.2; }



.index_case .banner .cornerTL { left: -63px; top: -63px; display: none; }



.index_case .banner .cornerTR { right: -63px; top: -63px; display: none; }



.index_case .banner .cornerBL { left: -63px; bottom: -63px; display: none; }



.index_case .banner .cornerBR { right: -63px; bottom: -63px; display: none; }



.index_case .banner p { width: 100%; left: 0; top: 57px; z-index: 200; position: absolute; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #FFF; font-size: 11px; text-align: center; cursor: pointer; display: none; }



.more { float: right; padding-bottom: 30px; }



@media (max-width: 768px) {



.index_case .examples_body { width: 100%; margin: 0px auto 0 auto; clear: both; padding: 35px 0 15px 0; ; overflow: hidden; position: relative; }



.more { float: right; padding-bottom: 15px; }



.index_case .banner { width: 100%; position: relative; overflow: hidden; float: left; display: inline; }



}



.index_news dl { float: left; width: 50%; position: relative; background: #18a2ef; }



.index_news dl dt { float: left; width: 50%; }



.index_news dl dt img { width: 100%; display: block; }



.index_news .examples_body { width: 100%; margin: 0px auto 0 auto; clear: both; overflow: hidden; position: relative; }



.index_news .bannerHolder { width: 100%; overflow: hidden; }



.index_news .bannerHolder li { list-style: none; display: inline; }



.index_news .banner { width: 100%; position: relative; overflow: hidden; float: left; display: inline; }



.index_news .banner img { display: block; border: none; width: 100%; }



.index_news .banner div { position: absolute; z-index: 100; background-color: #fff; width: 60px; height: 60px; cursor: pointer; }



.index_news .banner .cornerTL { left: -63px; top: -63px; }



.index_news .banner .cornerTR { right: -63px; top: -63px; display: none; }



.index_news .banner .cornerBL { left: -63px; bottom: -63px; display: none; }



.index_news .banner .cornerBR { right: -63px; bottom: -63px; display: none; }



.index_news .banner span { display: none; }



.index_news .banner:hover span { display: block; background: #fff; position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; opacity: 0.2; }



.index_news .banner p { width: 100%; left: 0; top: 57px; z-index: 200; position: absolute; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #FFF; font-size: 11px; text-align: center; cursor: pointer; display: none; }

.index_news dl dd { float: left; width: 50%; }

.index_news dl dd h2 { position: absolute; left: 53%; top: 4%; color: #fff; width: 45%; font-size: 20px; font-weight: normal; }

.index_news dl dd p { position: absolute; left: 53%; bottom: 4%; width: 45%; font-size: 16px; color: #dadbdc;}

.index_text { padding-top: 80px; }

.ny_text { padding: 140px 0 0 0; }

.index_text h3 { font-size: 35px; font-weight: normal; line-height: 35px; color: #3b3b3b; margin-bottom: 50px;text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif }

.index_text p { font-size: 16px; color: #828282; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; line-height: 23px; padding-bottom: 20px; }

.projects_text { padding-top: 60px; }
.projects_text h3 { font-size: 35px; font-weight: normal; line-height: 35px; color: #3b3b3b; margin-bottom: 30px;text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif }
.projects_text p { font-size: 16px; color: #828282; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; line-height: 23px; padding-bottom: 20px; }

@media (max-width: 768px) {

.waterfall ul.list-group { width: 100%; float:left; overflow: hidden; margin: 0px 0px 20px 0px;}	

.index_text { padding: 20px 10px; height: auto; }

.index_text img{max-width:  100%;}

.ny_text { padding: 160px 10px 0 10px; }

.index_text h3 { font-size: 20px; font-weight: normal; line-height: 30px; color: #3b3b3b; margin-bottom: 8px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif }

.index_text p { font-size: 14px; color: #828282; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; line-height: 22px; }

.projects_text { padding: 160px 0 0; height: auto; }
.projects_text img{max-width:  100%;}
.projects_text h3 { font-size: 20px; font-weight: normal; line-height: 30px; color: #3b3b3b; margin-bottom: 8px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif }
.projects_text p { font-size: 14px; color: #828282; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; line-height: 22px; }
.dcmin1{padding:0 10px;}
}

@media (max-width:1080px) {







.waterfall .list-group { width: 30%; float:left; overflow: hidden; margin: 2% 1.666666%;box-shadow: 0px 0px 25px #ccc;}



.index_news dl { width: 100%; margin-bottom: 5px; }



.index_news dl dd h2 { position: absolute; left: 53%; top: 4%; color: #fff; width: 45%; font-size: 14px; line-height: 18px; font-weight: normal; }



.index_news dl dd p { position: absolute; left: 53%; bottom: 4%; width: 45%; font-size: 12px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



}



.cese_detail { padding-top: 50px; position: relative; }



.contact_detail { padding-top: 111px; position: relative; }



.cese_detail dl { /*padding-bottom: 168px;*/ clear: both; overflow: hidden; }



.cese_detail dl dt { float: left; width: 25.5%; padding:/*30*/0px 3.3% 0 4.3%; font-size: 16px; }



.cese_detail dl dt h1 { font-size: 43px; color: #3b3b3b; margin-bottom: 25px; font-weight: normal; line-height: 52px; }



.cese_detail dl dt h1:nth-child(3) { margin-top:450px; }







.cese_detail dl dt h2 { font-size: 30px; color: #3b3b3b; margin-bottom: 45px; font-weight: normal; line-height: 38px;}



.cese_detail dl dt h2 span { font-size: 24px; }



.cese_detail dl dt span { font-size: 15px; padding-bottom: 25px; line-height: 23px; }



.cese_detail dl dt span.date { font-size: 12px; line-height: 18px; }



.contact_detail dl dt { float: left; width: 19.4%; padding: 30px 11% 0 7.3%; }



.cese_detail dl dt p { font-size: 16px; line-height: 28px; }



.cese_detail dl dd { float: left; width: 66.9%; position: relative; }



.contact_detail dl dd { float: left; width: 62.3%; }



.cese_detail dl dd img { max-width: 100%;  display: block; }















.cese_detail dl dd .service_img img { max-width: 95px; margin-bottom: 22px; }



.cese_detail dl dd .service_img h6 { font-size: 20px; line-height: 40px; color: #3b3b3b; font-weight: normal; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; }



.cese_detail dl dd .service_img p { font-size: 16px; line-height: 30px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; padding-bottom: 50px; }



.cese_detail dl dd .contact { font-size: 20px; color: #3b3b3b; padding-top: 133px; line-height: 40px; }



.cese_detail dl dd .contact img { max-width: 546px; }



#ztbox { width: 970px; height: 420px; margin: 0 auto; }



#ztbox #left { width: 35px; height: 63px; float: left; cursor: pointer; background: url(../images/banner_pre.jpg) no-repeat; margin-top: 140px; }



#ztbox #right { width: 35px; height: 63px; float: left; cursor: pointer; background: url(../images/banner_next.jpg) no-repeat; margin-top: 140px; }



#ztbox #conter { width: 880px; height: 400px; float: left; display: inline; overflow: hidden; position: relative; margin: 0px 10px; }



#ztbox #conter ul { width: auto; height: 357px; top: 0px; left: 0px; position: absolute; overflow: hidden; }



#ztbox #conter li { width: 167px; height: 357px; float: left; padding: 0px 5px; position: relative; }



#ztbox #conter li img { width: 167px; height: 357px; }



#ztbox #scroll { width: 880px; height: 18px; left: 0px; bottom: 8px; cursor: pointer; position: absolute; background: url(../images/banner_bg_xi.jpg) repeat-x left center; }



#ztbox #scroll span { width: 48px; height: 18px; left: 0px; bottom: 0px; cursor: pointer; position: absolute; background: #18a2ef; }



.focus { position: relative; }



.focus dl { margin-bottom: 2px; padding: 0; background: #F0F0F0; }



.focus dl dt { width: 55.8%; float: left; padding: 0; overflow: hidden; }



.focus dl dt img { width: 100%; display: block; }



.focus dl dd { width: 40.6%; float: left; padding: 2% 0 0 3.6%; }



.focus dl dd h4 { font-size: 22px; color: #3b3b3b; font-weight: normal; line-height: 30px; }



.focus { position: relative; width: 100%; padding-bottom: 35px; min-height: 1px; float: left; }



.focus img { max-width: 620px; }



.focus .fPic { }



.focus .fcon { position: relative; width: 100%; float: left; display: none; }



.focus .fcon img { display: block; }



.focus .prev, .focus .next { position: absolute; width: 155px; height: 35px; bottom: 0px; right: 0; }



.focus .prev { background: url(../images/shang.jpg) no-repeat right; cursor: pointer; right: 18px; }



.focus .next { /*background: url(../images/xia.jpg) no-repeat; cursor: pointer;*/ }



.effect-milo { background: #fff }



.effect-milo img { width: -webkit-calc(100% + 60px); width: calc(100% + 60px); opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0px, 0, 0) scale(1.12); transform: translate3d(0px, 0, 0) scale(1.12); -webkit-backface-visibility: hidden; backface-visibility: hidden; }



.effect-milo:hover img { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1.2); }



.cese_detail dl dd .news_text { width: 80%; line-height: 28px; }



.cese_detail dl dd .news_text img { max-width: 745px; }



.cese_detail .fx { position: absolute; bottom: 0px; left: -80px; }



.cese_detail .fx a { float: left; height: 38px; margin-left: 20px; display: block; padding: 0; line-height: 38px; width: 41px; }



.cese_detail .fx a.bds_more { background: url(../images/fx.jpg) no-repeat center; }











.cese_detail .fx2 .drawer { padding-top:30px; height:38px; color: white; text-align: center;font-size: 0; }



.cese_detail .fx2 .drawer li { pointer-events: none; position: relative; display: inline-block; vertical-align: middle; list-style: none; line-height: 100%; transform: translateZ(0); }



.cese_detail .fx2 .drawer a { pointer-events: auto; position: relative; display: block; width:230px; margin-left:-189px; line-height: 100%; /* Reset font-size */



font-size: 16px; text-decoration: none; color: #3b3b3b; transition: background 0.3s; height:38px; }



















.cese_detail .fx2 .drawer a:active,.cese_detail .fx2  .drawer a:focus {  }



.cese_detail .fx2 .drawer i { display: block; font-size: 2em; }



.cese_detail .fx2 .drawer span { font-size: .625em; font-family: Raleway; text-transform: uppercase; }



.cese_detail .fx2 .drawer li:hover ul {transform: translateX(0);}



.cese_detail .fx2 .drawer > li { display: block;}



.cese_detail .fx2 .drawer > li > a { background:url(../images/fx222.jpg) no-repeat right center;}



.cese_detail .fx2 .drawer > li:hover { z-index: 100; }



.cese_detail .fx2 .drawer > li:hover a:after { opacity: 1; }



.cese_detail .fx2 .drawer > li ul { position: absolute;z-index: -1; top: 0; left:189px; height: 100%; width:110px; white-space: nowrap; transform: translateX(-500%); transition: 0.5s transform; }















 @media (max-width: 768px) {



#container { position: relative; max-width:1760px; }



.grid { width: 94%; min-height: 100px; padding: 1.5%; margin: 1% 1.5%; background: #fff; float: left;  box-shadow: 0px 0px 25px #ccc; -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; }



.grid strong { font-size:16px; color:#595757; font-weight:normal; display:block; line-height:26px; padding-bottom:1em; padding-top:0.25em; }



.grid p{font-size:12px;  font-family:Arial, Helvetica, sans-serif;}



.grid .imgholder img { max-width: 100%; background: #ccc; display: block; }







.cese_detail { padding-top: 60px; position: relative; }



.cese_detail dl { padding-bottom: 40px; clear: both; overflow: hidden; }



.cese_detail dl dt { float: none; width: 100%; padding: 0px 0 30px 0; }



.cese_detail dl dt h1 { font-size: 33px; color: #3b3b3b; margin-bottom: 25px; font-weight: normal; line-height: 42px; }



.cese_detail dl dt h2 { font-size: 26px; color: #3b3b3b; margin-bottom: 25px; font-weight: normal; line-height: 30px; }



.cese_detail dl dt h2 span { font-size: 18px; }



.cese_detail dl dt span { font-size: 13px; padding-bottom: 13px; line-height: 28px; }



.cese_detail dl dt p { font-size: 14px; line-height: 26px; }



.cese_detail dl dd { width: 100%; float: none; padding-bottom: 30px; }



.cese_detail dl dd .service_img img { max-width: 65px; margin-bottom: 16px; }



.cese_detail dl dd .service_img h6 { font-size: 18px; line-height: 36px; color: #3b3b3b; font-weight: normal; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; }



.cese_detail dl dd .service_img p { font-size: 14px; line-height: 26px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;; padding-bottom: 30px; }



.cese_detail dl dd .contact { font-size: 16px; padding-top: 0px; color: #3b3b3b; line-height: 30px; }



.cese_detail dl dd .contact img { max-width: 246px; }











.cese_detail .fx2 .drawer { padding-top:10px; height:19px; color: white; text-align: center;font-size: 0; }



.cese_detail .fx2 .drawer li { pointer-events: none; position: relative; display: inline-block; vertical-align: middle; list-style: none; line-height: 100%; transform: translateZ(0); }



.cese_detail .fx2 .drawer a { pointer-events: auto; position: relative; display: block; width:21px; line-height: 100%; /* Reset font-size */



font-size: 16px; text-decoration: none; color: #3b3b3b; transition: background 0.3s; height:19px; margin-left:0; }



.cese_detail .fx2 .drawer a:active,.cese_detail .fx2  .drawer a:focus {  }



.cese_detail .fx2 .drawer i { display: block; font-size: 2em; }



.cese_detail .fx2 .drawer span { font-size: .625em; font-family: Raleway; text-transform: uppercase; }



.cese_detail .fx2 .drawer li:hover ul {transform: translateX(0);}



.cese_detail .fx2 .drawer > li { display: block;}



.cese_detail .fx2 .drawer > li > a { background:url(../images/fx.jpg) no-repeat left top; background-size:21px;}



.cese_detail .fx2 .drawer > li:hover { z-index: 100; }



.cese_detail .fx2 .drawer > li:hover a:after { opacity: 1; }



.cese_detail .fx2 .drawer > li ul { position: absolute;z-index: -1; top: 0; left:0; height: 100%; width:55px; white-space: nowrap; transform: translateX(-500%); background: #fff; transition: 0.5s transform; }



.cese_detail .fx2 .drawer > li img{ height:19px;}











.cese_detail .fx { position: absolute; left: 26px; ; bottom: 0px; }



.cese_detail .fx a { float: left; margin: 0 3% 0 0px; height: 19px; display: block; padding: 0; line-height: 19px; width: 20.5px; }



.cese_detail .fx a.bds_more { background: url(../images/fx.jpg) no-repeat center; background-size: 21px; }



.cese_detail .fx a img { width: 21px; }



.cese_detail .fx2 { padding-top: 30px; }



.cese_detail .fx2 a.bds_more { background: url(../images/fx.jpg) no-repeat center; background-size: 21px; height: 19px; display: block; padding: 0; line-height: 19px; width: 21px; }



.cese_detail dl dd .news_text { width: 100%; }



.cese_detail dl dd .img_new dl dd h4 { font-size: 16px; color: #3b3b3b; font-weight: normal; line-height: 26px; }







}



















.cese_detail .fx3 .drawer { position: absolute; z-index: 10; bottom: 0; left: -300px; height: 38px; color: white; text-align: center; font-size: 0; }



.cese_detail .fx3 .drawer li { pointer-events: none; position: relative; display: inline-block; vertical-align: middle; list-style: none; line-height: 100%; transform: translateZ(0); }



.cese_detail .fx3 .drawer a { pointer-events: auto; position: relative; display: block; width: 230px; line-height: 100%; /* Reset font-size */ font-size: 16px; text-decoration: none; color: #3b3b3b; transition: background 0.3s; height: 38px; }







.cese_detail .fx3 .drawer .bdsharebuttonbox a{ width:46px; float:left;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.f{ background:url(../images/f.jpg) no-repeat;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.t{ background:url(../images/t.jpg) no-repeat;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.in{ background:url(../images/in.jpg) no-repeat;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.weibo{ background:url(../images/weibo.jpg) no-repeat;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.weixin{ background:url(../images/weixin.jpg) no-repeat;}











.cese_detail .fx3 .drawer a:active, .cese_detail .fx3 .drawer a:focus {  }



.cese_detail .fx3 .drawer i { display: block; font-size: 2em; }



.cese_detail .fx3 .drawer span { font-size: .625em; font-family: Raleway; text-transform: uppercase; }



.cese_detail .fx3 .drawer li:hover ul { transform: translateX(0); }



.cese_detail .fx3 .drawer > li { display: block; }



.cese_detail .fx3 .drawer > li > a { background: url(../images/fx222.jpg) no-repeat right center; }



.cese_detail .fx3 .drawer > li:hover { z-index: 100; }



.cese_detail .fx3 .drawer > li:hover a:after { opacity: 1; }



.cese_detail .fx3 .drawer > li ul { position: absolute; z-index: -1; top: 0; left: 230px; height: 100%; width: 230px; white-space: nowrap; transform: translateX(-230px); background: #fff; transition: 0.5s transform; }



 @media (max-width: 768px) {



.cese_detail .fx3 .drawer { position: absolute; z-index: 10; height: 20px; left: 0; bottom: 0; color: white; text-align: center; font-size: 0; }



.cese_detail .fx3 .drawer li { pointer-events: none; position: relative; display: inline-block; vertical-align: middle; list-style: none; line-height: 100%; transform: translateZ(0); }



.cese_detail .fx3 .drawer a { pointer-events: auto; position: relative; display: block; width: 21px; line-height: 100%; /* Reset font-size */ font-size: 16px; text-decoration: none; color: #3b3b3b; transition: background 0.3s; height: 17px; }











.cese_detail .fx3 .drawer .bdsharebuttonbox a{ width:21px; float:left;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.f{ background:url(../images/f.jpg) no-repeat; background-size:21px;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.t{ background:url(../images/t.jpg) no-repeat; background-size:21px;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.in{ background:url(../images/in.jpg) no-repeat; background-size:21px;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.weibo{ background:url(../images/weibo.jpg) no-repeat; background-size:21px;}



.cese_detail .fx3 .drawer .bdsharebuttonbox a.weixin{ background:url(../images/weixin.jpg) no-repeat; background-size:21px;}















.cese_detail .fx3 drawer a:active, .cese_detail .fx3 .drawer a:focus {  }



.cese_detail .fx3 .drawer i { display: block; font-size: 2em; }



.cese_detail .fx3 .drawer span { font-size: .625em; font-family: Raleway; text-transform: uppercase; }



.cese_detail .fx3 .drawer li:hover ul { transform: translateX(0); }



.cese_detail .fx3 .drawer > li { display: block; }



.cese_detail .fx3 .drawer > li > a { background: url(../images/fx.jpg) no-repeat right center; background-size: 21px; }



.cese_detail .fx3 .drawer > li:hover { z-index: 100; }



.cese_detail .fx3 .drawer > li:hover a:after { opacity: 1; }



.cese_detail .fx3 .drawer > li ul { position: absolute; z-index: -1; top: 0; left: 21px; height: 100%; width: 115px; white-space: nowrap; transform: translateX(-300%); background: #fff; transition: 0.5s transform; }



.cese_detail .fx3 .drawer > li img { height: 19px; width: 115px; }



}







@media (max-width: 768px) {







.waterfall { padding: 35px 0% 30px 0%; }



.waterfall .list-group { width: 100%; }



.waterfall .list-groupr { width: 100%; }



}







.waterfall { padding: 0px 0% 0px 0%; }



ul,li{padding: 0px; margin: 0px;}



.product-groupr{padding: 0px; margin: 0px;}



.waterfall .product-groupr{ width: 58%; float:left; overflow: hidden;margin: 1% 1%; }



.waterfall .product-groupr > li img { width: 100%; display: block; }



.waterfall .product-groupr > li { width:100%; }



figure.effect-romeo1 { margin: 0; padding: 0; }







.waterfall .product-group{ width: 38%; float:left; overflow: hidden; margin: 1% 1%;/*box-shadow: 0px 0px 25px #ccc;*/}



.waterfall .product-group > li img { width: 100%; display: block; }



.waterfall .product-group > li { width:100%; }



.waterfall .product-group span { display: none; }



.waterfall .product-group a:hover span { display: block; background: url(../images/blank.png) repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999; }



.waterfall .product-group figure { margin: 0; }















.waterfall .list-group { width: 22.9%; float:left; overflow: hidden; margin: 1% 1%;/*box-shadow: 0px 0px 25px #ccc;*/}



.waterfall .list-group > li:first-child { padding: 0; }



.waterfall .list-group > li:first-child img { width: 100%; display: block; }



.waterfall .list-group > li { width:99%;border: 1px solid #ccc; }

.waterfall .list-group > li p{ padding:10px 0px;text-align:center;font-size:14px }

.waterfall .list-group span { display: none; }



.waterfall .list-group a:hover span { display: block; background: url(../images/blank.png) repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999; }



.waterfall .list-group figure { margin: 0; }



figure.effect-romeo { -webkit-perspective: 1000px; perspective: 1000px; }



figure.effect-romeo img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0, 0, -0); transform: translate3d(0, 0, -0); }



figure.effect-romeo:hover img { opacity: 1; -webkit-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px; }



figure.effect-romeo figcaption::before, figure.effect-romeo figcaption::after { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background: #fff; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }



figure.effect-romeo:hover figcaption::before { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); }



figure.effect-romeo:hover figcaption::after { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); }











/*案例鼠标移上去的效果*/



.waterfall .list-group li{ position:relative;}



.waterfall .list-group li .wenzi { position: absolute; top: -532px; left: 0px; color: #fff; min-height: 50%; width:100%;   -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; z-index: 1; opacity:0; background:url(/skin/web/images/hei_bg.png) repeat ; border-top:4px solid #18a2ef; }



.waterfall .list-group li:hover .wenzi{ top: 0;  opacity:1; }



.waterfall .list-group li:hover .wenzi dl{ padding:12px 3%; clear:both; overflow:hidden;}



.waterfall .list-group li:hover .wenzi dl dt{ width:65%; float:left;}



.waterfall .list-group li:hover .wenzi dl dt .title{ font-size:16px;}



.waterfall .list-group li:hover .wenzi dl dt .mc1{ font-size:13px;}



.waterfall .list-group li:hover .wenzi dl dt .line{ height:1px; padding:10px 0;}



.waterfall .list-group li:hover .wenzi dl dt .line div{ display:block; height:1px; width:18px; background:#fff;}



.waterfall .list-group li:hover .wenzi dl dt .text{ line-height:18px;}



.waterfall .list-group li:hover .wenzi dl dd{ width:32%; line-height:18px; float:right; text-align:right;}



.waterfall .list-group li:hover .wenzi dl dd strong{ font-size:13px;}