﻿@import url(style.css);
@import url(slide.css);
@import url(pscroll.css);
/*优势*/
.i_one{ overflow:hidden; margin-top:-28px; background:#fff;-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.15);box-shadow:0 5px 20px rgba(0,0,0,0.15); position:relative; z-index:1;}
.i_one ul li{ float:left; height:58px; line-height:58px; overflow:hidden;position:relative; width:20%; text-align:center; font-size:16px;}
.i_one ul li:before{ content:""; position:absolute; right:0; top:0; height:100%; width:1px; background:#cccccc;}
.i_one ul li:last-child:before{ width:0;}
.i_one ul li i{ display:inline-block; width:34px; height:35px; background-repeat:no-repeat; background-size:100% 100%; overflow:hidden; vertical-align:middle; margin-right:14px;}
.i_one ul li i.bgs1{ background-image:url(../images/i_ico1.png);}
.i_one ul li i.bgs2{ background-image:url(../images/i_ico2.png);}
.i_one ul li i.bgs3{ background-image:url(../images/i_ico3.png);}
.i_one ul li i.bgs4{ background-image:url(../images/i_ico4.png);}
.i_one ul li i.bgs5{ background-image:url(../images/i_ico5.png);}
/*商城系统开发*/
.i_system_t{ overflow:hidden; color:#333; line-height:1.2; margin-top:5%; text-align:center;}
.i_system_t .h2{ font-weight:normal; margin-bottom:1%;}
.i_system_t .p{ color:#666666; font-size:16px; line-height:1.4;}
.i_system{ overflow:hidden; margin-top:4%; margin-bottom:5%;}
.i_system ul li{ float:left; width:23.5%; margin-right:2%; overflow:hidden;}
.i_system ul li:nth-child(4n+0){ margin-right:0;}
.i_system ul li .imgs{ overflow:hidden;}
.i_system ul li .imgs img{width: 100%; display: block; -moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
.i_system ul li:hover .imgs img{transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); -webkit-transform: scale(1.03);}
.i_system ul li .txts{ border:1px solid #eeeeee; border-top:0; overflow:hidden; padding-left:5%; padding-right:5%;transition:all 0.3s;}
.i_system ul li .txts .h3{ font-weight:bold; height:40px; line-height:40px; overflow:hidden; margin-top:24px;}
.i_system ul li .txts .p{ line-height:25px; height:75px; overflow:hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color:#999999; font-size:14px; margin-top:8px;}
.i_system ul li .txts .end{ border-top:1px solid #eeeeee; margin-top:12px; overflow:hidden; padding-top:22px; margin-bottom:27px;}
.i_system ul li .txts .end em{ display:block;transition:all 0.3s; font-style:normal; width:126px; height:38px; line-height:38px; border:1px solid #f67e34; margin:0 auto; overflow:hidden; color:#f67e34; text-align:center; font-size:15px; position:relative; z-index:1;}
.i_system ul li .txts .end em:after{ content:""; position:absolute; left:50%; right:50%; width:0; top:0; height:100%; background:#f67e34; z-index:-1;transition:all 0.3s;}
.i_system ul li:hover .txts{ border-color:#f67e34;}
.i_system ul li:hover .txts .end em{ color:#fff;}
.i_system ul li:hover .txts .end em:after{ left:0; right:0; width:100%;}
/*技术驱动改变电商*/
.i_service{overflow:hidden; background:#f7f7f7;}
.i_service .wrap{ margin-bottom:5%; margin-bottom:5%;}
.i_service .ul{ margin-top:4%;}
.i_service .ul li{ float:left; width:25%; overflow:hidden; text-align:center;}
.i_service .ul li:nth-child(4n+0){ margin-right:0;}
.i_service .ul li i{ display:block; width:83px; height:89px; overflow:hidden; margin:0 auto;background-repeat:no-repeat; background-size:100% 100%; }
.i_service .ul li i.bgs1{ background-image:url(../images/i_pic1.png);}
.i_service .ul li i.bgs2{ background-image:url(../images/i_pic2.png);}
.i_service .ul li i.bgs3{ background-image:url(../images/i_pic3.png);}
.i_service .ul li i.bgs4{ background-image:url(../images/i_pic4.png);}
.i_service .ul li i.bgs5{ background-image:url(../images/i_pic5.png);}
.i_service .ul li .h3{width:96%; margin:0 auto; font-weight:bold; font-size:18px; overflow:hidden; height:76px; line-height:76px; position:relative;}
.i_service .ul li .h3:after{ content:""; position:absolute; left:50%;  width:40px; margin-left:-20px; bottom:0; height:3px; background:#e4e4e4;}
.i_service .ul li .p{ max-width:300px; width:94%; margin:0 auto; overflow:hidden; line-height:25px; height:50px; color:#999999; font-size:14px;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top:15px;}
/*我们的案例作品*/
.i_case{  overflow:hidden; margin-top:3%; margin-bottom:2%;}
.i_case ul li{width: 25%; float: left;}
.i_case ul li .pic{width: 100%; /*height: 360px;*/ /*padding-top: 65%;*/ overflow: hidden; position: relative; z-index: 1;}
.i_case ul li .pic img{width: 100%; /*max-height: 100%;*/ display: block; /*position: absolute; left: 0; right: 0; top: 0; bottom: 0; */z-index: 1; margin: auto; -moz-transition: all 0.6s ease;-webkit-transition: all 0.6s ease;-o-transition: all 0.6s ease;-ms-transition: all 0.6s ease;transition: all 0.6s ease;}
.i_case ul li .bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; visibility: hidden; opacity: 0; background-color: rgba(0,0,0,.65); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000); transition: all 0.6s ease;-webkit-transition: all 0.6s ease;}
.i_case ul li:hover .bg{visibility: visible; opacity: 1;}
.i_case ul li .bg img{ position:absolute;max-width: 80%; max-height: 80%; width: auto; left:50%; top: 60%; transform: translate(-50%, -50%); transition: all 0.6s ease;-webkit-transition: all 0.6s ease;}
.i_case ul li:hover .bg img{ top:50%;}
.i_case ul li .tit{background-color: #f4f4f4; padding: 15px 50px 13px 24px; position: relative; z-index: 1;}
.i_case ul li .tit:after{content:""; display: block; width: 100%; height: 100%; background-color: #f67e34; position: absolute; left: 0; bottom: 0; z-index: -1; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9;}
.i_case ul li:hover .tit:after{transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9;}
.i_case ul li h2{font-size: 18px; font-weight:normal; color: #333; line-height:50px; height:50px; overflow:hidden;}
.i_case ul li:hover h2{color: #fff;}
.i_case ul li .icon{width: 23px; height: 23px; background:url(../images/case_more.png) no-repeat; position: absolute; right: 20px; top: 50%; margin-top: -11px; z-index: 10; background-size:100% 100%;}
.i_case ul li:hover .icon{background-image:url(../images/case_more_h.png);}
/*我们的客户*/
.in_partner_list{margin-bottom:2%;margin-top:3%;}
.in_partner_list ul{border-left: 1px solid #f2f2f2; border-top: 1px solid #f2f2f2;}
.in_partner_list li{float: left; width: 20%;transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; position:relative;}
.in_partner_list li .imgs { overflow:hidden;border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; position:relative;}
.in_partner_list li .imgs:after{ content:""; position:absolute; bottom:0; width:100%; height:3px; background:#f67e34; left:0;transition:all 0.3s;opacity:0;filter:Alpha(opacity=0);}
.in_partner_list li:hover .imgs:after{opacity:1.0;filter:Alpha(opacity=100);}
.in_partner_list li .imgs img{ opacity: 0.9;width:100%; display:block;/*-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%);  -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;*/}
.in_partner_list li:hover{box-shadow: 0px 0px 20px #ccc; -webkit-box-shadow: 0px 0px 20px #ccc;z-index:1; }
.in_partner_list li:hover .imgs img{opacity: 1;-webkit-filter:grayscale(0%); -moz-filter:grayscale(0%); -ms-filter:grayscale(0%); -o-filter:grayscale(0%); filter:grayscale(0%); filter:gray;}
/*电商资讯*/
.i_news_bg{ background:#f7f7f7; overflow:hidden;}
.i_news_bg .wrap2{ margin-bottom:5%;}
.int-bot{ margin-top:3%;}
.int-bot .int-left{display: block;width: 420px;background: white;float: left; height:560px; position:relative;}
.int-bot .int-left .date{ position:absolute; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.4);}
.int-bot .int-left .h3{font-size: 18px;color: #fff;line-height: 30px; height:30px;margin-bottom: 10px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;transition:all 0.3s;  margin:0 auto; max-width:350px; width:92%;margin-top:22px;}
.int-bot .int-left .h4{font-size: 14px;color: #c3c3c3; height:28px; overflow:hidden;font-family: 'Open sans'; line-height:28px; margin:0 auto; max-width:350px; width:92%; margin-bottom:13px;}
.int-bot .int-left .ine-pic{width: 100%;overflow: hidden;}
.int-bot .int-left .ine-pic img{width: 100%; display: block;transition: all 1s;}
.int-bot .int-left:hover{box-shadow: 0 5px 15px rgba(0,0,0,0.06);}
.int-bot .int-left:hover img{transform: scale(1.1);}
.int-bot .int-mid{width: 29.16%;float: left;margin-left: 20px; margin-right:20px;}
.int-bot .intm{background: #fff; padding-top: 29px; padding-bottom:12px; margin-bottom:20px;}
.int-bot .intm:last-child{ margin-bottom:0;}
.int-bot .intm a{margin:0 auto; max-width:364px; width:94%; display:block;}
.int-bot .intm .h3{ font-size: 18px;color: #444;line-height: 30px; height:30px;margin-bottom: 17px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;transition:all 0.3s;}
.int-bot .intm:hover{box-shadow: 0 5px 15px rgba(0,0,0,0.06);}
.int-bot .intm:hover .h3{ color:#f67e34;}
.int-bot .intm .p{height: 44px; font-size: 14px;color:#999999;line-height: 22px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.int-bot .intm-bot{position: relative; line-height:30px;border-top: solid 1px #e4e4e4;padding-top: 21px;margin-top: 36px;background: url(../images/i_news_pic1.png) no-repeat right 51px; color:#777777; font-family:OpenSans; font-size:14px;font-family: 'Open sans';transition:all 0.3s;}
.int-bot .intm-bot:before{position: absolute;content: '';width: 0%;height: 1px;background: #f67e34;transition: all 1s;top: -1px;}
.int-bot .intm-bot .days{line-height:50px; overflow:hidden; color:#444444; font-size:53px; display:block; font-style:normal;font-family: 'sn';}
.int-bot .intm:hover .intm-bot:before{width: 100%;}
.int-bot .intm:hover .intm-bot{background-image: url(../images/i_news_pic1_on.png);}
.int-bot .int-right{background: #fff;height: 535px;overflow: hidden; padding-top:25px;}
.int-bot .int-right .inr-list{ margin:0 auto; max-width:500px; width:94%;height: 106px;border-bottom: solid 1px #e4e4e4;display: block;margin-top: 24px; position:relative;}
.int-bot .int-right .inr-list:last-child{border-bottom: none;}
.int-bot .int-right .inr-list:last-child:before{ height:0;}
.int-bot .int-right .inr-list:before{position: absolute;content: '';width: 0%;height: 1px;background: #f67e34;transition: all 1s;bottom: -1px;}
.int-bot .int-right .inr-list:hover:before{width: 100%;}
.int-bot .int-right .inr-list .inr-l{width: 100px;float: left;padding-left: 19px;}
.int-bot .int-right .inr-list .inr-l .h4{font-size: 53px;color: #444444;font-family: 'sn';line-height: 50px; margin-top:4px;}
.int-bot .int-right .inr-list .inr-l .h5{font-size: 14px;color: #777777;font-family: 'Open sans';padding-left: 2px;line-height:24px;}
.int-bot .int-right .inr-list .inr-r{ overflow:hidden;}
.int-bot .int-right .inr-list .inr-r .h3{ font-size: 18px;color: #444;line-height: 30px; height:30px; margin-bottom: 8px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;transition:all 0.3s;}
.int-bot .int-right .inr-list .inr-r .p{ height: 44px;font-size: 14px;color: #999;line-height: 22px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;}
.int-bot .int-right .inr-list:hover .inr-r .h3{ color:#f67e34;}

@media screen and (max-width:1440px) {

}
@media screen and (max-width:1360px) {
/*电商资讯*/
.int-bot .int-left{ width:360px; height:480px;}
.int-bot .intm{ padding-top:18px;}
.int-bot .intm .h3{ margin-bottom:10px;}
.int-bot .intm-bot{ margin-top:20px; padding-top:15px; background-position:right 45px;}
.int-bot .int-right{ height:474px; padding-top:6px;}
.int-bot .int-right .inr-list{ margin-top:10px; height:106px;}
}
@media screen and (max-width:1200px) {
/*优势*/
.i_one ul li{ font-size:15px;}
.i_one ul li i{ width:30px; height:31px; margin-right:8px;}
/*商城系统开发*/
.i_system_t .p{font-size:15px;}
.i_system ul li .txts .h3{ margin-top:20px;}
.i_system ul li .txts .p{ font-size:13px; line-height:22px; height:66px;}
.i_system ul li .txts .end em{ font-size:14px; height:32px; line-height:32px; width:110px;}
/*我们的案例作品*/
.i_case ul li{width: 33.333%;}
/*电商资讯*/
.int-bot .int-mid{ margin-left:12px; margin-right:12px;}
.int-bot .intm-bot .days{ font-size:48px;}
.int-bot .int-right .inr-list .inr-l{ width:76px;}
.int-bot .int-right .inr-list .inr-l .h4{ font-size:48px;}
}
@media screen and (max-width:1000px) {
/*优势*/
.i_one ul li{ font-size:14px;}
.i_one ul li i{ width:26px; height:27px; margin-right:6px;}
/*电商资讯*/
.int-bot .int-left{ width:320px; height:426px;}
.int-bot .int-left .h3{ margin-top:10px; margin-bottom:0;font-size:16px;}
.int-bot .int-left .h4{ font-size:13px;}
.int-bot .intm{ padding-top:15px; padding-bottom:10px;margin-bottom:12px;}
.int-bot .intm .h3{ margin-bottom:3px;font-size:16px;}
.int-bot .intm .p{ font-size:14px;}
.int-bot .intm-bot{ margin-top:15px;background-position: right 40px;}
.int-bot .intm-bot .days{font-size:44px; line-height:44px;}
.int-bot .int-right{ padding-top:3px; height:423px;}
.int-bot .int-right .inr-list{ margin-top:5px; height:100px;}
.int-bot .int-right .inr-list .inr-l{ width:74px; padding-left:8px;}
.int-bot .int-right .inr-list .inr-l .h4{ font-size:44px;}
.int-bot .int-right .inr-list .inr-l .h5{ padding-left:0;}
.int-bot .int-right .inr-list .inr-r .h3{font-size:16px; margin-bottom:6px;}
.int-bot .int-right .inr-list .inr-r .p{ line-height:20px; height:40px;}
}
@media screen and (max-width:960px) {
/*优势*/
.i_one{ display:none;}
/*商城系统开发*/
.i_system_t .p{font-size:14px;}
.i_system{ margin-bottom:3%;}
.i_system ul li{ width:49%; margin-bottom:2%;}
.i_system ul li:nth-child(4n+0){ margin-right:2%;}
.i_system ul li:nth-child(2n+0){ margin-right:0%;}
/*我们的案例作品*/
.i_case{ margin-top:3.5%;}
.i_case ul li h2{font-size: 16px; height:40px; line-height:40px;}
/*我们的客户*/
.in_partner_list{ margin-top:3.5%;}
.in_partner_list li{ width:33.33%;}
/*电商资讯*/
.int-bot{margin-top:3.5%;}
.int-bot .int-left{ width:366px; height:488px; margin-bottom:22px;}
.int-bot .int-left .h3{ font-size:18px;}
.int-bot .int-mid{ margin-left:20px; margin-right:0;width:calc(100% - 386px);width:-webkit-calc(100% - 386px);width:-moz-calc(100% - 386px);}
.int-bot .intm{ margin-bottom:20px; padding-top:17px; padding-bottom:15px;}
.int-bot .intm a{ max-width:none;}
.int-bot .intm .h3{ font-size:18px; margin-bottom:7px;}
.int-bot .intm-bot{ margin-top:25px; padding-top:20px;}
.int-bot .int-right{ clear:both;}
.int-bot .int-right .inr-list{ max-width:none; margin-top:10px; height:95px;}
.int-bot .int-right .inr-list .inr-r .h3{ font-size:18px; margin-top:8px;}
}
@media screen and (max-width:830px) {


}


@media screen and (max-width: 780px) {
/*商城系统开发*/
.i_system_t .p{font-size:13px;}
/*我们的案例作品*/
.i_case ul li{width: 50%;}
.i_case ul li .tit{padding: 10px 40px 10px 10px;}
.i_case ul li .icon{right: 10px;}
.i_case ul li .bg img{max-height: 80px;}
/*电商资讯*/
.int-bot .int-left{ width:320px; height:426px;}
.int-bot .int-mid{ margin-left:12px;width: calc(100% - 332px); width: -webkit-calc(100% - 332px); width: -moz-calc(100% - 332px);}
.int-bot .intm{ padding-top:13px; margin-bottom:12px; padding-bottom:11px;}
.int-bot .intm-bot{ margin-top:15px; padding-top:12px;}
}
@media screen and (max-width: 640px) {
/*商城系统开发*/
.i_system ul li .txts .h3{ height:30px; line-height:30px;}
/*我们的案例作品*/
.i_case{ margin-top:4%;}
.i_case ul li h2{font-size: 15px;}
.i_case ul li .icon{ width:20px; height:20px; margin-top:-10px;}
/*我们的客户*/
.in_partner_list{ margin-top:4%;}
/*电商资讯*/
.int-bot{margin-top:4%;}
.int-bot .int-left{ float:none; width:100%; height:auto; margin-bottom:2%; overflow:hidden;}
.int-bot .int-left .h3{ max-width:none;}
.int-bot .int-left .h4{ max-width:none;}
.int-bot .int-mid{ margin-left:0; width:100%;}
.int-bot .intm{ margin-bottom:2%;}
.int-bot .intm a{ max-width:none;}
.int-bot .intm:last-child{ margin-bottom:2%;}
.int-bot .intm .p{ height:auto;}
.int-bot .int-right .inr-list .inr-l{ padding-left:0;}
}
@media screen and (max-width: 520px) {

}

@media screen and (max-width: 480px) {
/*商城系统开发*/
.i_system_t{ margin-top:6%;}
.i_system_t .p{font-size:12px;}
.i_system{ margin-top:4.5%;}
.i_system ul li .txts .h3{ height:26px; line-height:26px; margin-top:15px;}
.i_system ul li .txts .p{ font-size:12px; line-height:20px; height:60px;}
.i_system ul li .txts .end{ padding-top:15px; margin-bottom:18px;}
.i_system ul li .txts .end em{ font-size:13px; width:100px;}
/*我们的案例作品*/
.i_case ul li h2{font-size: 14px; height:28px; line-height:28px;}
/*电商资讯*/
.int-bot .int-left .h3{ font-size:16px;}
.int-bot .intm .h3{ font-size:16px; margin-top:8px; }
.int-bot .int-right .inr-list .inr-r .h3{ font-size:16px;margin-bottom:0px; height:26px; line-height:26px;}
}
@media screen and (max-width: 420px) {
/*商城系统开发*/
.i_system ul li .txts .end em{ font-size:12px;}
/*电商资讯*/
.int-bot .int-left .h3{ font-size:15px;}
.int-bot .intm .h3{ font-size:15px;}
.int-bot .intm .p{ font-size:13px;}
.int-bot .intm-bot .days{ font-size:40px;}
.int-bot .int-right .inr-list .inr-l{ width:65px; padding-left:0;}
.int-bot .int-right .inr-list .inr-l .h4{ font-size:40px;}
.int-bot .int-right .inr-list .inr-l .h5{ font-size:13px;}
.int-bot .int-right .inr-list .inr-r .h3{ font-size:15px;}
.int-bot .int-right .inr-list .inr-r .p{ font-size:13px;}
}
@media screen and (max-width: 380px) {

}

@media screen and (max-width: 360px) {


}


