@import url(common.css);
@import url(proscrol.css);
/*------------flash------------*/
.flash_div{ width:100%; margin:0 auto; overflow:hidden;}

.i_two_t{ margin-top:3%;  overflow:hidden; text-align:center; line-height:72px; height:72px;  color:#333333;background:url(../images/i_bg1.png) center bottom no-repeat;}
.product .tab { text-align: center; margin-top: 4%;}
.product .tab ul { display: block;}
.product .tab li { float:left;width:calc(18.4% - 2px);width:-webkit-calc(18.4% - 2px);width:-moz-calc(18.4% - 2px);height: 38px; line-height: 38px; text-align: center; margin-right:2%;border: solid 1px #dadada; float: left; font-size: 16px; color: #333333; cursor: pointer; margin-bottom:2%;}
.product .tab li:last-child{ margin-right:0;}
.product .tab li.on {border: solid 1px #dd823d;background: #dd823d;color: #fff;}
.product .tabBox{ overflow:hidden;}
.product .productList { box-sizing: border-box; display: none; margin-top: 2%; clear:both; overflow:hidden; width:100%; margin-bottom:2%;}
.product .productList li {width: 23.5%; float: left;  overflow: hidden; margin-right:2%; margin-bottom:2%;text-align: center;}
.product .productList li:nth-child(4n+0) {margin-right: 0;}
.product .productList li .pic { overflow: hidden;position: relative;}
.product .productList li .pic img {width: 100%; display: block;}
.product .productList li .pic .filter { position: absolute; bottom: 0;left: 0; z-index: 2; width: 100%;height: 0%; background: url(../images/productList_filter.png);box-sizing: border-box;overflow: hidden;
  transition: 0.2s;-webkit-transition: 0.2s;-moz-transition: 0.2s;-ms-transition: 0.2s;-o-transition: 0.2s;}
.product .productList li .pic .filter .line { width: 100%; height: 100%;border: solid 1px #fff; box-sizing: border-box;}
.product .productList li .pic .filter .see { width: 100%; position: absolute;top: 50%;left: 0;transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);-o-transform: translate(0%, -50%); z-index: 2; padding-bottom: 40px;background: url(../images/productList_see.png) no-repeat center bottom; font-size: 16px; color: #fff;}
.product .productList li .text { height: 50px; line-height: 50px;padding: 0 10px; box-sizing: border-box;background: #f4f4f4; font-size: 14px; color: #333333;overflow: hidden; display: -webkit-box;
 -webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all; transition: 0.2s;-webkit-transition: 0.2s; -moz-transition: 0.2s;-ms-transition: 0.2s; -o-transition: 0.2s;}
.product .productList li a:hover .filter {height: 100%;padding: 14px;}
.product .productList li a:hover .text {background: #dd823d; color: #fff;}
.i_more2_div{ text-align:center; overflow:hidden; margin-bottom:6%;}
.i_more2{ width:180px; height:50px; margin:0 auto; display:inline-block; clear:both; text-align:center; line-height:50px; font-size:16px; color:#999999; /*border:1px solid #dcdcdc;*/transition:all 0.3s;}
.i_more2:hover{text-decoration:none;color:#fff;}
.i_more2.hvr-shutter-out-vertical{backface-visibility:hidden;background:transparent none repeat scroll 0 0;position:relative;transform:translateZ(0px);transition-duration:.3s;transition-property:color;-moz-transform:translateZ(0px);-moz-transition-duration:.3s;-moz-transition-property:color;-webkit-transform:translateZ(0px);-webkit-transition-duration:.3s;-webkit-transition-property:color;vertical-align:middle;/*background:url(../images/i_bg2.png) 133px center #fff no-repeat;*/ background:#5d4c42; color:#fff;}
.i_more2.hvr-shutter-out-vertical::before{ background:#dc883f;border:0 none;padding:1px;bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:scaleY(0);transform-origin:50% 50% 0;transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out;-moz-transform:scaleY(0);-moz-transform-origin:50% 50% 0;-moz-transition-duration:.3s;-moz-transition-property:transform;-moz-transition-timing-function:ease-out;-webkit-transform:scaleY(0);-webkit-transform-origin:50% 50% 0;-webkit-transition-duration:.3s;-webkit-transition-property:transform;-webkit-transition-timing-function:ease-out;z-index:-1;}
.i_more2.hvr-shutter-out-vertical:active::before,.i_more2.hvr-shutter-out-vertical:focus::before,.i_more2.hvr-shutter-out-vertical:hover::before{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1);}
.i_more2.btn-enter:active,.btn-enter:focus,.i_more2.btn-enter:hover{/* background:#fff;*/color:#fff;}

/*图片弹窗*/
.mainFilter{width: 100%;height: 100%;position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 100;display: none;background: url(../images/mainFilter.png);}
.popupCase{max-width:800px; width:90%;background: #fff;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);z-index: 105;padding: 65px;box-sizing: border-box;display: none;}
.popupCase .closeBtn{width: 50px;height: 50px;position: absolute;right: 16px;top: 10px;z-index: 5;background: url(../images/closeBtn.gif) no-repeat center;cursor: pointer;transition: 0.4s;-webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;}
.popupCase .closeBtn:hover{transform: rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);-moz-transform:rotate(90deg);}
.popupCase .slideBox {width: 100%;position: relative;}
.popupCase .slideBox .bd{width: 100%;height: 100%;position: relative;z-index: 0;overflow: hidden;}
.popupCase .slideBox .bd li{zoom: 1;vertical-align: middle;}
.popupCase .slideBox .bd img{width: 100%;display: block;}
.popupCase .slideBox .prev,
.popupCase .slideBox .next{width: 16px;height: 30px;position: absolute;left: -40px;top: 50%;z-index: 5;display: block;background: url(../images/popupCase_prev1.png) no-repeat;}
.popupCase .slideBox .next {left: auto;right: -40px;background-image: url(../images/popupCase_next1.png);}
.popupCase .slideBox .prev:hover{background-image: url(../images/popupCase_prev2.png);}
.popupCase .slideBox .next:hover{background-image: url(../images/popupCase_next2.png);}

/*设计案例*/
.case{ overflow:hidden;}
.case .longPic { overflow:hidden; width: 100%; /*height: 169px;*/ padding-bottom:70px;background: url(../images/case_longPic.jpg) no-repeat 0 center; background-size:cover;}
.case .tab {height: 60px;text-align: center;margin-top: -30px; z-index: 5; position: relative;}
.case .tab ul {max-width: 452px;  display: inline-block; padding: 0 4%; width:92%; background: #dc883f; text-align:center;}
.case .tab li {width:50%;height: 60px;line-height: 60px;text-align: center;float: left; font-size: 18px; color: #fff; background: url(../images/case_tab_line.gif) no-repeat 0 center; cursor: pointer;}
.case .tab li:first-child {background-image: none;}
.case .tabBox{ padding-bottom:4%;}
.case .caseList { margin-top: 4%;display: none;}
.case .caseList:after {content: ""; height: 0; display: block;clear: both;}
.case .caseList li { width: 23.5%; overflow: hidden;position: relative; text-align: center; margin-right:2%; float: left;}
.case .caseList li:nth-child(4n+0) {margin-right: 0;}
.case .caseList li a { display: block; position: relative; padding-top: 75%; }
.case .caseList li img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 56px); object-fit: fill; }
.case .caseList li .tit {line-height: 56px; height:56px; overflow:hidden;font-size: 16px;}

/*物美简介*/
.introduction { background: #f3f4f4;padding: 48px 0 62px 0;}
.introduction .content { background: #fff; margin-top: 4%;}
.introduction .content:after { content: ""; height: 0; display: block; clear: both;}
.introduction .video { width: 50%; float: left; position: relative;text-align: center;overflow: hidden;cursor: pointer;}
.introduction .video img {width: 100%;height: 403px;display: block;transition: 0.4s;-webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;}
.introduction .video .pic:hover img {transform: scale(1.1, 1.1);-webkit-transform: scale(1.1, 1.1);-ms-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);}
.introduction .video .txt { width: 100%; position: absolute; top: 50%;left: 0; transform: translate(0%, -50%);-webkit-transform: translate(0%, -50%);-moz-transform: translate(0%, -50%);-ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); z-index: 5; line-height: 26px; font-size: 20px;color: #fff; padding-top: 58px; background: url(../images/video_icon.png) no-repeat center 0;}
.introduction .video video {width: 50%;height: 403px; background: #000; display: none;}
.introduction .text { width: 50%;  float: right; padding: 40px;box-sizing: border-box;}
.introduction .text .en {line-height: 20px; font-size: 14px;}
.introduction .text .tit {line-height: 28px; font-size: 25px;  color: #333333; margin-top: 4px;}
.introduction .text .line { width: 32px; height: 3px; background: #cccccc;margin: 26px 0;}
.introduction .text .txt {line-height: 27px; font-size: 14px; color: #666666; height: 189px; margin-bottom:3%;overflow: hidden;}
.introduction .text .more { font-size: 14px;color: #dc883f; }
.introduction .text .more:hover { color: #dc6600;}

/*服务流程*/
.process {padding:2% 0 2% 0;}
.process .wrap{ overflow:hidden;}
.process .list {margin-top: 4%; margin-left:5%;}
.process .list:after { content: "";height: 0;display: block;clear: both;}
.process .list li { width: 16.66%; float: left; text-align: center; background: url(../images/process_arrow.gif) no-repeat 80% 38%; margin-bottom:4%; overflow:hidden;}
.process .list li:last-child {background: none;}
.process .list li .icon1 { max-width: 130px; width:60%; overflow: hidden; }
.process .list li .icon1 img {width: 100%;height: 100%; display: block;}
.process .list li .icon2 {max-width: 130px; width:60%;overflow: hidden; display: none;}
.process .list li .icon2 img { width: 100%; height: 100%; display: block;}
.process .list li .text {max-width: 130px; width:60%;line-height: 20px;font-size: 16px; color: #333333; margin-top: 13%; overflow:hidden;}
.process .list li:hover .icon1 { display: none;}.process .list li:hover .icon2 { display: block;}
/*新闻资讯*/
.news .tab { text-align: center; margin-top: 4%;}
.news .tab ul { display: block;}
.news .tab li { float:left;width:calc(32% - 2px);width:-webkit-calc(32% - 2px);width:-moz-calc(32% - 2px);height: 38px; line-height: 38px; text-align: center; margin-right:2%;border: solid 1px #dadada; float: left; font-size: 16px; color: #333333; cursor: pointer; margin-bottom:2%;}
.news .tab li:last-child{ margin-right:0;}
.news .tab li.on {border: solid 1px #dd823d;background: #dd823d;color: #fff;}
.news .tabBox{ overflow:hidden; margin-bottom:4%;}
.news {background: #f4f4f4; padding: 1% 0 0% 0; overflow:hidden;}
.news .list { display:none; overflow:hidden;}
.news .list ul { margin-top: 2%;}
.news .list li { margin-bottom: 20px;}
.news .list li a { border: solid 1px #dddddd; padding: 14px 16px; box-sizing: border-box; transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; display: block;}
.news .list li a:after {content: ""; height: 0;display: block;clear: both;}
.news .list li a:hover {border: solid 1px #dd823d;}
.news .list li a:hover .date { background: #dd823d;}
.news .list li a:hover .txt,
.news .list li a:hover .tit {color: #5d4c42;}
.news .list li .date { width: 68px; height: 68px;float: left; background: #c1c1c1;text-align: center; transition: 0.4s; -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s; -o-transition: 0.4s;}
.news .list li .date .day {font-family: Arial; font-size: 26px;line-height: 28px;  display: block; color: #fff; margin-top: 12px;}
.news .list li .date .years { font-family: Arial; font-size: 26px; line-height: 28px;display: block; color: #fff;margin-top: 12px; line-height: 16px; font-size: 14px;margin-top: 0;}
.news .list li .text { padding-left: 82px; box-sizing: border-box;}
.news .list li .tit { height: 20px; line-height: 20px;font-size: 16px; color: #333333; transition: 0.4s;-webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s;-o-transition: 0.4s;overflow: hidden;display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
.news .list li .txt { height: 36px; line-height: 18px; font-size: 14px; color: #999999; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; margin-top: 10px; transition: 0.4s;-webkit-transition: 0.4s; -moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;}



@media screen and (max-width: 1200px) {
/*物美简介*/
.introduction{padding: 20px 0 42px 0;}
.introduction .video img { height:350px;}
.introduction .video video { height:350px;}
.introduction .text{ padding:30px;}
.introduction .text .txt{ line-height:24px; height:144px;}
/*服务流程*/
.process .list li { background-position:80% 32%; }
}
@media screen and (max-width: 1100px) {
/*物美简介*/
.introduction .text .en{ font-size:12px;}
.introduction .text .tit{ font-size:22px;}
.introduction .video .txt{ font-size:18px;}
.introduction .text .line{ margin:16px 0;}
}


@media screen and (max-width: 930px) {
.product .productList li {width: 49%; }
.product .productList li:nth-child(4n+0) {margin-right: 2%;}
.product .productList li:nth-child(2n+0) {margin-right: 0;}
/*设计案例*/
.case .caseList li{ width:49%;}
.case .caseList li:nth-child(4n+0) {margin-right: 2%;}
.case .caseList li:nth-child(2n+0) {margin-right: 0;}
/*物美简介*/
.introduction .video img { height:320px;}
.introduction .video video { height:320px;}
.introduction .text{ padding:20px;}
/*服务流程*/
.process .list{ margin-top:6%; margin-left:12%;}
.process .list li { width:33.33%;}
.process .list li:nth-child(3) {background: none;}
}

@media screen and (max-width: 780px) {
.i_two_t{ height:70px; line-height:70px;}
.product .tab li { width:calc(23.5% - 2px);width:-webkit-calc(23.5% - 2px);width:-moz-calc(23.5% - 2px);}
.product .tab li:nth-child(4n+0){ margin-right:0;}
/*物美简介*/
.introduction{padding: 5px 0 32px 0;}
.introduction .video{ float:none; width:100%;}
.introduction .video img { height:auto;}
.introduction .text{ float:none; width:100%; padding-top:6%; padding-bottom:6%;}
.introduction .text .txt{ height:auto;}


}

@media screen and (max-width: 640px) {
.i_two_t{ height:66px; line-height:66px;}
.product .tab li {width:calc(32% - 2px);width:-webkit-calc(32% - 2px);width:-moz-calc(32% - 2px); font-size:14px; height:34px; line-height:34px;}
.product .tab li:nth-child(4n+0){ margin-right:2%;}
.product .tab li:nth-child(3n+0){ margin-right:0;}
.product .productList li .pic .filter .see{ font-size:14px;}
.i_more2{ width:160px; height:46px; line-height:46px; font-size:14px;}
/*设计案例*/
.case .caseList li .tit { font-size:14px; height:50px; line-height:50px;}
/*物美简介*/
.introduction .text .tit{ font-size:20px;}
/*服务流程*/
.process .list{ margin-left:2.5%; width:106%;}
.process .list li { background-position:90% 32%; background-size:auto 13px; }
.process .list li .icon1 { width:70%; }
.process .list li .icon2 {width:70%;}
.process .list li .text {width:70%;font-size: 14px;margin-top: 10%;}
/*新闻资讯*/
.news .tab li { font-size:14px; height:34px; line-height:34px;}

}
@media screen and (max-width: 520px) {

}
@media screen and (max-width: 480px) {
.i_two_t{ height:60px; line-height:60px;}
.product .productList li a:hover .filter{ padding:7px;}
.product .productList li .text{ height:40px; line-height:40px;}
.i_more2{ width:150px; height:42px; line-height:42px;}
/*设计案例*/
.case .longPic{ padding-bottom:60px;}
.case .tab li { height:50px; line-height:50px; font-size:16px;}
.case .caseList li .text .tit{ font-size:14px;}
/*新闻资讯*/
.news .list li a{ padding:8px 8px;}


}
@media screen and (max-width: 360px) {
.i_two_t{ height:50px; line-height:50px;}

}