.header{ position: fixed; z-index:99;}
.headFixd{box-shadow: 0 2px 6px rgba(0,0,0,.1); height:58px;}
.headFixd .logo a img{ width:140px;}
.headFixd .menu .btn{ margin-top:12px;}
.headFixd .menu li a{ height:58px; line-height:58px;}

.header,.header .logo a img,.header .menu .btn,.header .menu li a{-moz-transition:all .5s linear; -webkit-transition:all .5s linear; transition:all .5s linear;}

.homePage{ position: relative; left:0; top:0; width:100%; z-index:2;background:#f8f8f8;}
body{ background:#f8f8f8;}

.kvBox{ width:100%; overflow:hidden; position:relative; position:fixed; left:0; top:0px; z-index:1; padding-top:68px;}
.kvBox .video{ position:relative;}
.kvBox .txtBox{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; background:url(../../images/index/kv_bg.png) repeat;}
.kvBox .txtBox img{position:absolute; left:50%; top:50%; width:1002px; height:290px; margin-left:-501px; margin-top:-145px;}
.kvBox .txtBox img.web_pic{display: block}
.kvBox .txtBox img.wap_pic{display: none}
.kvBox video{ width:1920px; position:absolute; left:0; bottom:0; -webkit-filter: grayscale(50%); filter: grayscale(50%);}
.kvBox .img{ position:absolute; left:0; top:0; z-index:2; display:none;}
.kvBox .tip{ position:absolute; left:50%; bottom:30px; background:url(../../images/index/tip.png) no-repeat; width:28px; height:48px; margin-left:-14px; z-index:9; opacity:0.75;}

.slogan{ padding:120px 0; text-align:center; color:#1f1f1f; font-size:22px; line-height:40px;}

.caseBox,.newBox{ background:#fff; padding:2px 0 2px 30px;}
.caseBox .title,.newBox .title{ padding:60px 30px 90px 0;}
.caseBox .title{padding:80px 30px 90px 0;}
.caseBox .title h2,.newBox .title h2{ font-size:26px; font-weight:normal; color:#3c3c3c; width:100%; text-align:center; margin-bottom:18px;}
.caseBox .title .tag,.newBox .title .tag{ margin-right:30px; width:100%; text-align:center;}
.caseBox .title .tag a,.newBox .title .tag a{ font-size:14px; color:#999;}
.caseBox .title .tag u,.newBox .title .tag u{ text-decoration:none; padding:0 20px; color:#c3c3c3; font-size:15px;}
.caseBox .title .tag a:hover,.newBox .title .tag a:hover{ color:#f45e5e;}

.caseBox .more,.newBox .more,.customerBox{ padding:45px 30px 60px 0; text-align:center;}
.caseBox .more a,.newBox .more a,.customerBox a{ height:42px; line-height:42px; border:1px solid #e6e6e6; color:#A9A9A9; display:inline-block; width:220px; border-radius: 5px;}
.caseBox .more a:hover,.newBox .more a:hover,.customerBox a:hover{ background:#f45e5e; color:#fff; border-color:#f45e5e;}


.caseList{font-size: 0;
    margin: 0 auto;
    overflow: hidden;
	width: 94%;
}
.case-item{
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    margin-bottom: 34px;
    overflow: hidden;
}
.case-item .con{
    display: block;
    padding-top: 72%;
    margin-bottom: 32px;
    position: relative;
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
	margin-left:15px;
	margin-right: 15px;
}
.case-item .pic{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
	border-radius: 5px;
}
.case-item .pic > img{
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
}
.case-item .bd{
    position: absolute;
    left: 0;
    bottom: -32px;
    right: 0;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
}
.case-item .icon{
    float: right;
    margin: 0 5px;
    width: 16px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.5;
    filter: alpha(opacity=50);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
}
.case-item h3{
    font-size: 15px;
    color: #666;
    line-height: 22px;
    font-weight: normal;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.case-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/index/bg.png) center center repeat;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}
.case-mask .inner{
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.case-mask .tit{
    width: 240px;
    padding-bottom: 20px;
    margin: 0 auto 20px;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
}
.case-mask .tit:after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all .6s ease-out 0s;transition: all .6s ease-out 0s;
}
.case-mask .tit img{
    display: block;
    width: 100%;
}
.case-mask .txt{
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 0 10%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
}
.case-item .con:hover{
    margin-bottom: 0;
    padding-bottom: 32px;
}
.case-item .con:hover .pic{
    height: 100%;
    border-radius: 5px;
}
.case-item .con:hover .pic > img{
    -webkit-transform: scale(1.2, 1.3) translate(-50%, -50%);
    -ms-transform: scale(1.2, 1.3) translate(-50%, -50%);
    -o-transform: scale(1.2, 1.3) translate(-50%, -50%);
    transform: scale(1.2, 1.3) translate(-50%, -50%);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.case-item .con:hover .case-mask{
    opacity: 1;
    filter: alpha(opacity=100);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
}
.case-item .con:hover .tit{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.case-item .con:hover .tit:after{
    width: 30%;
    max-width: 50px;
}
.case-item .con:hover .txt{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.case-item .con:hover .bd{
    bottom: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}


.case-item i.web{ background-image:url(../../images/index/tab_icon02.png);}
.case-item i.mobile{ background-image:url(../../images/index/tab_icon03.png);}
.case-item i.app{ background-image:url(../../images/index/tab_icon04.png);}
.case-item i.ui{ background-image:url(../../images/index/tab_icon05.png);}
.case-item i.design{ background-image:url(../../images/index/tab_icon07.png);}

.tb-arrow a{ width:40px; height:28px; opacity:0.5;}
.tb-arrow a:hover{ opacity:1;}
.tb-arrow a img{ display:none;}
.tb-arrow a.prev{ background:url(../../images/index/left.png) no-repeat center center;}
.tb-arrow a.next{background:url(../../images/index/right.png) no-repeat center center;}

.lpBox{ padding:80px 0 110px 0;}
.lpWrap{ width:100%; margin:0 auto; height:530px;}
.lpMain{ padding-right:620px; min-height:530px; position:relative; padding-left:100px;}
.lpMain .gif{ width:530px; height:530px; position:absolute; right:100px; top:0;}
.lpMain .gif .po{ position:absolute; left:0; top:0;}

.tb-btn{ margin-bottom:-100px;}


.lpMain .info{ color:#888; max-width:930px; padding-top:140px; position:relative; z-index:9;-webkit-transition: all .3s; transition: all .3s;}
.lpMain .info h3{ font-size:26px; font-weight:normal; color:#333; margin-bottom:12px;}
.lpMain .info>p{ font-size:13px; margin:15px 0 20px 0; line-height:22px; color:#999; padding-right:20px;}
.lpMain .info ul{ width:100%;}
.lpMain .info li{ float:left; width:30%; margin-right:3.3%; font-size:14px; margin-bottom:10px; padding-bottom:0;}
.lpMain .info li>h3{ color:#e12432; font-size:15px; padding-bottom:5px; margin:0;}
.lpMain .info li>p{ margin:0; font-size:12px; color:#999;}
.lpMain .info .more{ padding-top:30px; width:100%; clear:both;}
.lpMain .info .more a{ width:180px; height:40px; display:inline-block; color:#fff; text-align:center; line-height:40px; background:#ffcb2d; border-radius: 5px;}
.lpMain .info .more a:hover{ background:#DE5050;}

.newList{ overflow:hidden; width:96%; margin:0 auto;}
.newList li{ float:left; width:50%; margin-bottom:30px; font-family:HELVETICANEUELTPRO-THEX, Arial, 'microsoft yahei';}
.newItem{  padding-right:60px;}
.newItem .pic{ float:left; margin-left:-280px; width:258px; height:150px;border-radius: 5px; overflow:hidden;}
.newItem .pic a img{-webkit-transform: scale(1, 1); transform: scale(1);width: 100%;}
.newItem .pic a:hover img{ -webkit-transform: scale(1.2, 1.2); transform: scale(1.2);}
.newItem h1{ font-size:18px; font-weight:normal; color:#3c3c3c; margin-bottom:15px;overflow:hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp:1; -webkit-box-orient: vertical; max-height:24px;}
.newItem h1 a:hover{ color:#ffcb2d;}
.newItem .box{font-size: 18px;font-weight: normal;color: #3c3c3c;margin-bottom: 15px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;max-height: 24px;}
.newItem .txt{ margin-bottom:15px; height:57px; line-height:19px; color:#999; overflow:hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp:3; -webkit-box-orient: vertical;}
.newItem .date u{ text-decoration:none; padding:0 8px; }
.newItem .date { color:#999;}
.newItem .date a{ color:#999;}
.newItem .date a:hover{color:#ffcb2d;}

.customerBox{ padding:40px 0 90px 0; overflow:hidden;}
.customerBox .title{padding:60px 0 90px 0; text-align:center;}
.customerBox .title h2{font-size:26px; font-weight:normal; color:#3c3c3c; width:100%; text-align:center; margin-bottom:15px;}
.customerBox .title .tag{font-size:14px; color:#999;}

.logoList{ width:100%; margin:0 auto; text-align:center; padding-top:90px;}
.logoList li img{ width:150px;}
.logoList li { width:20%; text-align:center; display:inline-block; margin-bottom:50px; float:left;}


.link{width: 100%;  overflow: hidden;}
.link .wrap{ margin:0 30px; padding: 20px 0;}
.link span{ line-height: 25px; font-size: 14px; color: #645C5A; font-weight: bold;}
.link a{line-height: 25px;  font-size: 12px; color: #666666; padding-right: 10px; margin-top: 8px;}


.caseBox,.footMain{ position:relative; background:none;  padding-left:0;}
.lpBox{ position:relative;}
.w1{position:relative; background:none; padding-left:30px; background: #fff}

.ie9 .caseBox,.ie9 .newBox,.ie9 .footMain{ background:#fff;}
.ie9 .kvBox .img{ top:60px;}

/*css3*/
{-moz-transition:all .2s linear; -webkit-transition:all .2s linear; transition:all .2s linear;}
.newItem .pic a img,
.newItem .pic a:hover img,


.bigScreen .kvBox video{ width:100%; background:#000;}

.bigScreen .lpMain{ padding-left:150px;}
.bigScreen .lpMain .gif{ right:150px;}
.bigScreen .newItem{ padding-right:80px;}
.bigScreen .newList{ width:94%;}


@media only screen and (max-width: 1366px){

	.caseBox .title,.newBox .title{ padding:40px 30px 40px 0;}
	.slogan{font-size: 18px;padding: 80px 0;}
	
	.caseList{width:94% }
	.case-item{width: 50%;}
	
	.lpBox{padding: 40px 0 80px 0;}
	
	.lpWrap{height: auto;}
	.lpMain{width: auto;min-height:auto;padding-left:60px;}
	.tb-list li{height: auto!important}

	.lpMain .gif{width: 450px; height: 450px;right: 60px;}
	.lpMain .info{max-width:1030px;padding-top: 100px;}
	.tb-btn{margin-bottom: -60px;}
	
	.newItem{padding: 0 20px;}
	.newItem .pic{float: none;margin-left:0;width: 100%; height: auto; margin-bottom: 20px;}
	.newItem .pic img{width: 100%; height: auto}
	
	.newBox{padding-left: 0;}
}
@media only screen and (max-width: 1024px){
	.kvBox .video{background: url(../../images/index/banner.jpg)no-repeat center;background-size: cover; }
	.kvBox video{display: none}
	.kvBox .txtBox img.web_pic{width: 90%; height: auto; margin-left:-45%; margin-top: -20%;}
	.slogan{padding: 30px 0;font-size: 14px}

	.lpMain{padding:0 30px;}
	
	.lpMain .info{width: 100%; max-width: 100%; padding: 0;}
	.lpMain .gif{ display: none}
    .link{display: none}
	
	.customerBox{padding: 40px 0;}
}

@media only screen and (max-width: 768px){
	.lpMain{width: auto;padding:0 50px;}
	.slogan{ display: none}
	.lpMain .info .more{text-align: center}
	.kvBox .txtBox img.web_pic{display: none}
	.kvBox .txtBox img.wap_pic{display: block;width: 70%; height: auto; margin-left:-35%; margin-top: -40%;}

	.logoList li{width: 25%}
	.logoList li img{width: 100%;}
	
	.caseList{width:auto;padding: 0 20px;}
}

@media only screen and (max-width: 640px){
	.lpMain .info>p{padding-right:0px;}

	.caseBox .title .tag, .newBox .title .tag{display: none}
	.lpMain{width: auto;padding:0 20px;}
	.w1{padding:0 20px}

	.caseBox .title,.newBox .title{ padding:40px 20px;}
	.caseBox .title h2, .newBox .title h2{margin-bottom: 0;}
	.caseBox .more, .newBox .more{padding: 20px 0 40px 0;}
	

	.case-item{width: 100%; float: none;}
	.case-item .con{margin-left: 0px;margin-right: 0px;}
	
	.newList{width: auto; padding:0 20px;}
	.newList li{width: 100%;}
	.newItem{padding-left: 178px; padding-right: 0;}
	.newItem .pic{float: left;margin-left: -178px;width: 155px;height: 90px;margin-bottom:0px}
	.newItem .txt{display:block}
	.newItem .date{display: none}
	
	
	.customerBox{padding: 20px 0 0 0;}
	.customerBox .title{padding:40px 20px; display: block }
	
	.logoList{padding-top: 40px;}
	
	.logoList li{width: 33.33%;margin-bottom: 30px;}

	.serviceBox{display: none}

	
}

@media only screen and (max-width: 414px){
	.logoList li{width: 50%;margin-bottom: 20px;}
	.logoList li:last-child{display: none}
}