section h2{color:#525252; font-size:24px; padding-top:65px; text-align:center; -webkit-animation:gdownIn 1s 0.7s both; -moz-animation:gdownIn 1s 0.7s both; animation:gdownIn 1s 0.7s both;}
section aside{color:#bbb; font-size:16px; margin-bottom:75px; text-align:center; -webkit-animation:gdownIn 1s 0.9s both; -moz-animation:gdownIn 1s 0.9s both; animation:gdownIn 1s 0.9s both;}
#banner{position:relative; overflow:hidden; padding-top:33.85416666666667%; -webkit-animation:gfadeIn 1s 0.4s both; -moz-animation:gfadeIn 1s 0.4s both; animation:gfadeIn 1s 0.4s both;}
#progress{width:0; height:2px; position:absolute; bottom:0; left:0; background:#ddd; background:rgba(0,0,0,.05);}

#banner .pic{width:100%; vertical-align:top; pointer-events:none; -moz-user-select:none; -webkit-user-select:none; user-select:none;}
#focus_main{width:100%; overflow:hidden; position:absolute; top:0; left:0; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
#focus_main li{width:100%; float:left;}
#focus_main li a{ display:block; height:100%;}

#focus_main img{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}


#focus_info{width:1200px; height:6.2rem; height:120px\9; position:absolute; bottom:50px; left:50%; margin-left:-600px; transform-style:preserve-3d;}
#focus_info article{display:none; position:absolute; top:0; left:0; width:100%; height:88%; padding:10px 0; background:#fff; -webkit-perspective-origin:50% 50%;  -moz-perspective-origin:50% 50%; perspective-origin:50% 50%;}
#focus_info p{float:left; width:620px; min-height:60px; padding:20px 0 0 85px; background:url(../img/quote.png) no-repeat 30px 25px; font-size:0.7rem;}
#focus_info .client_logo{float:right; width:229px; height:100%; border-left:1px dotted #d1d1d1; text-align:center; overflow:hidden;}
#focus_info .client_logo span{display:inline-block; width:0; height:100%; vertical-align:middle;}
#focus_info .client_logo img{max-width:100%; display:inline-block; vertical-align:middle;}


#focus_dot{position:absolute; top:50%; right:0; padding:20px 45px; width:14px; overflow:hidden; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); -webkit-animation:grightIn 1s 0.5s both; -moz-animation:grightIn 1s 0.5s both; animation:grightIn 1s 0.5s both;}
#focus_dot li{float:left; width:10px; height:10px; margin:4px 0; border:2px solid transparent; border-radius:50%; cursor:pointer; overflow:hidden; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#focus_dot li b{width:100%; height:100%; border-radius:50%; background:#fff; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#focus_dot li.cur, #focus_dot li:hover{border-color:#fff;}
#focus_dot li.cur b, #focus_dot li:hover b{-webkit-transform:scale(0); -moz-transform:scale(0); transform:scale(0);}



.flip_front{-webkit-animation:flipOutX 0.4s linear both; -moz-animation:flipOutX 0.4s linear both; animation:flipOutX 0.4s linear both;}
@-webkit-keyframes flipOutX{
	0%{-webkit-transform:perspective(800px) rotateX(0deg) scale(1);}
	100%{-webkit-transform:perspective(800px) rotateX(-90deg) scale(0.86);}
}
@-moz-keyframes flipOutX{
	0%{-moz-transform:perspective(800px) rotateX(0deg) scale(1)}
	100%{-moz-transform:perspective(800px) rotateX(-90deg) scale(0.86)}
}
@keyframes flipOutX{
	0%{transform:perspective(800px) rotateX(0deg) scale(1);}
	100%{transform:perspective(800px) rotateX(-90deg) scale(0.86);}
}

.flip_back{-webkit-animation:flipInX 0.8s ease both; -moz-animation:flipInX 0.8s ease both; animation:flipInX 0.8s ease both;}
@-webkit-keyframes flipInX{
	0%{-webkit-transform:perspective(800px) rotateX(90deg) scale(0.86);}
	40%{-webkit-transform:perspective(800px) rotateX(-10deg);}
	70%{-webkit-transform:perspective(800px) rotateX(10deg);}
	100%{-webkit-transform:perspective(800px) rotateX(0deg) scale(1);}
}
@-moz-keyframes flipInX{
	0%{-moz-transform:perspective(800px) rotateX(90deg) scale(0.86);}
	40%{-moz-transform:perspective(800px) rotateX(-10deg);}
	70%{-moz-transform:perspective(800px) rotateX(10deg);}
	100%{-moz-transform:perspective(800px) rotateX(0deg) scale(1);}
}
@keyframes flipInX{
	0%{transform:perspective(800px) rotateX(90deg) scale(0.86);}
	40%{transform:perspective(800px) rotateX(-10deg);}
	70%{transform:perspective(800px) rotateX(10deg);}
	100%{transform:perspective(800px) rotateX(0deg) scale(1);}
}








.works_link{width:1200px; height:72px; margin:auto; line-height:72px; border-top:1px dotted #d1d1d1; text-align:center; font-size:16px; -webkit-animation:gdownIn 1s 1.2s both; -moz-animation:gdownIn 1s 1.2s both; animation:gdownIn 1s 1.2s both;}
.works_link span{margin:0 23px;}
.works_link a{margin:0 23px; color:#a4a4a4; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.works_link a:hover{color:#333;}


.works_wrap{width:100%; position:relative; overflow:hidden; padding-top:534px; -webkit-animation:gfadeIn 1s 1.5s both; -moz-animation:gfadeIn 1s 1.5s both; animation:gfadeIn 1s 1.5s both;}
#works{width:100%; position:absolute; top:0; left:0; overflow:hidden;}
#works ul{width:100%; overflow:hidden; float:left;}
#works ul li{float:left; width:25%; *width:24.97%; text-align:center;}
#works ul li a{display:block; background:#fff; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#works ul li article{position:relative; width:100%; height:0; padding-top:62.4%; overflow:hidden;}
#works ul li article img{position:absolute; top:0; left:0; width:100.5%; height:auto; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
#works ul li article summary{width:100%; height:50px; position:absolute; bottom:-50px; left:0; line-height:50px; color:#a9a9a9; background:rgba(0,0,0,0.5); background:#666\9; text-align:left; text-indent:20px; z-index:3; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#works ul li h5{line-height:24px; font-size:18px; color:#333; padding-top:16px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#works ul li span{line-height:22px; font-size:14px; color:#999; display:block; padding-bottom:18px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}


#works ul li a:hover{background-color:transparent;}
#works ul li a:hover h5, #works ul li a:hover span{color:#fff;}
#works ul li a:hover article summary{bottom:0;}
#works ul li a:hover article img{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1);}
#works ul li a:hover article:before{opacity:1; filter:alpha(opacity=100); zoom:1;}
#works ul li a:hover article:after{opacity:1; filter:alpha(opacity=100); zoom:1; -webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1);}


#works_ctrl{width:100%; height:85px; background:#f1f1f1; box-shadow:0 2px 20px #edecec inset; text-align:center;}
#works_ctrl button{width:52px; height:50px; display:inline-block; margin:17px 5px; border:none; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#works_ctrl #works_prev{background:#fff url(../img/works_arr.png) no-repeat 0 0;}
#works_ctrl #works_prev:hover{background:#333 url(../img/works_arr.png) no-repeat -52px 0;}
#works_ctrl #works_next{background:#fff url(../img/works_arr.png) no-repeat -52px -50px;}
#works_ctrl #works_next:hover{background:#333 url(../img/works_arr.png) no-repeat 0 -50px;}
#works_prev, #works_next, #works_more{border-radius:2px; vertical-align:middle;}
#works_more{display:inline-block; width:92px; height:50px; background:#fff url(../img/works_more.png) no-repeat center -50px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; vertical-align:middle;}
#works_more:hover{background:#333 url(../img/works_more.png) no-repeat center 0;}


.detail_wrap{width:1200px; height:550px; margin:65px auto 0; position:relative;}
#detail{width:1200px; height:550px; position:relative; background:#f8f8f8;}
#detail li{display:none; width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden;}
#detail li.cur{display:block;}
#detail .pic{float:left; width:770px; height:540px; position:relative; border:5px solid #f1f1f1; background-repeat:no-repeat; background-size:100%; background-position:0 0; cursor:pointer; overflow:hidden; -webkit-animation:fadeIn 0.8s ease-out both; -moz-animation:fadeIn 0.8s ease-out both; animation:fadeIn 0.8s ease-out both; -webkit-transition:background 4s ease-out, border 0.3s; -moz-transition:background 4s ease-out, border 0.3s; transition:background 4s ease-out, border 0.3s;}
#detail .pic img{width:100%;}
#detail .pic:hover{border-color:#8fc35d;}

#detail .info{width:380px; float:right; margin-right:20px;}
#detail .info h5{margin-top:40px; font-size:20px; line-height:20px; color:#333; -webkit-animation:downIn 0.5s ease-out 0.15s both; -moz-animation:downIn 0.5s ease-out 0.15s both; animation:downIn 0.5s ease-out 0.15s both;}
#detail .info span{display:block; margin:10px 0; -webkit-animation:leftIn 0.6s ease-out 0.6s both; -moz-animation:leftIn 0.6s ease-out 0.6s both; animation:leftIn 0.6s ease-out 0.6s both;}
#detail .info p{height:190px; padding:13px; overflow:hidden; position:relative; -webkit-animation:fadeIn 0.8s ease-out 0.9s both; -moz-animation:fadeIn 0.8s ease-out 0.9s both; animation:fadeIn 0.8s ease-out 0.9s both;}
#detail .info p:before, #detail .info p:after{content:''; display:block; position:absolute; width:100%; height:1; -webkit-animation:borderIn 0.6s ease-out 1.3s both; -moz-animation:borderIn 0.6s ease-out 1.3s both; animation:borderIn 0.6s ease-out 1.3s both;}
#detail .info p:before{top:0; left:0; border-top:1px solid #dfdfdf;}
#detail .info p:after{right:0; bottom:0;  border-bottom:1px dotted #c6c6c6;}

#detail .info span, #detail .info p{font-size:14px; color:#999;}
#detail .info a{display:block; width:120px; height:40px; margin:18px 0 0 14px; background:#fff url(../img/magnifier_b.png) no-repeat -20px center; line-height:40px; text-indent:31px; border-radius:2px;-webkit-animation:bounceIn 0.4s ease 2.1s both; -moz-animation:bounceIn 0.4s ease 2.1s both; animation:bounceIn 0.4s ease 2.1s both; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#detail .info a:hover{text-indent:42px; background-position:17px center;}

@-webkit-keyframes downIn{
	0%{opacity:0; -webkit-transform:translateY(20px);}
	100%{opacity:1; -webkit-transform:translateY(0);}
}
@-moz-keyframes downIn{
	0%{opacity:0; -moz-transform:translateY(20px);}
	100%{opacity:1; -moz-transform:translateY(0);}
}
@keyframes downIn{
	0%{opacity:0; transform:translateY(20px);}
	100%{opacity:1; transform:translateY(0);}
}



@-webkit-keyframes leftIn{
	0%{opacity:0; -webkit-transform:translateX(-20px);}
	100%{opacity:1; -webkit-transform:translateX(0);}
}
@-moz-keyframes leftIn{
	0%{opacity:0; -moz-transform:translateX(-20px);}
	100%{opacity:1; -moz-transform:translateX(0);}
}
@keyframes leftIn{
	0%{opacity:0; transform:translateX(-20px);}
	100%{opacity:1; transform:translateX(0);}
}



@-webkit-keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-moz-keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}



@-webkit-keyframes borderIn{
	0%{width:0;}
	100%{width:100%;}
}
@-moz-keyframes borderIn{
	0%{width:0;}
	100%{width:100%;}
}
@keyframes borderIn{
	0%{width:0;}
	100%{width:100%;}
}



@-webkit-keyframes scaleIn{
	0%{opacity:0; -webkit-transform:scale(1.15);}
	100%{opacity:1; -webkit-transform:scale(1);}
}
@-moz-keyframes scaleIn{
	0%{opacity:0; -moz-transform:scale(1.15);}
	100%{opacity:1; -moz-transform:scale(1);}
}
@keyframes scaleIn{
	0%{opacity:0; transform:scale(1.15);}
	100%{opacity:1; transform:scale(1);}
}



@-webkit-keyframes bounceIn{
	0%{-webkit-transform:scale(.5);opacity:0;}
	70%{-webkit-transform:scale(1.05);}
	100%{-webkit-transform:scale(1);}
}
@-moz-keyframes bounceIn{
	0%{-moz-transform:scale(.5);opacity:0;}
	70%{-moz-transform:scale(1.05);}
	100%{-moz-transform:scale(1);}
}
@keyframes bounceIn{
	0%{transform:scale(.5);opacity:0;}
	70%{transform:scale(1.05);}
	100%{transform:scale(1);}
}






.detail_wrap .ctrl{width:420px; height:130px; position:absolute; right:0; bottom:0;}
.detail_wrap .ctrl button{display:block; float:left; width:210px; height:130px; border:none; line-height:200px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.detail_wrap #detail_prev{background:#eee url(../img/detail_arr.png) no-repeat 0 0;}
.detail_wrap #detail_prev:hover{background:#333 url(../img/detail_arr.png) no-repeat -210px 0; color:#fff;}
.detail_wrap #detail_next{background:#eee url(../img/detail_arr.png) no-repeat -210px -130px;}
.detail_wrap #detail_next:hover{background:#333 url(../img/detail_arr.png) no-repeat 0 -130px; color:#fff;}



#news{width:1200px; margin:30px auto; overflow:hidden;}
#news .item{float:left; width:370px; height:430px; margin-right:20px; background:#f8f8f8; position:relative;}
#news .item h3, #news .signing h3{margin:32px 0 30px; font-size:18px; line-height:18px;}
#news .item h3 a, #news .item h3 a:hover, #news .signing h3 a, #news .signing h3 a:hover{color:#999;}
#news .item h5{font-size:18px; font-weight:bold; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#news .item a{color:#000; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#news .item a:hover{color:#8fc35d;}
#news .item span{display:block; font-size:12px; line-height:12px; margin:10px 0 25px; color:#999;}
#news .item summary{height:62px; color:#999; overflow:hidden;}
#news .item h3, #news .item h5, #news .item span, #news .item summary{padding:0 18px;}
#news .pic{position:absolute; bottom:0; left:0; width:100%; height:200px; overflow:hidden;}
#news .pic:after{content:''; display:block; position:absolute; top:0; left:30px; width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent; border-top:16px solid #f8f8f8;}
#news .pic img{width:100%;}

#news .signing{float:right; width:360px; height:430px; padding:0 30px; background:#f8f8f8; overflow:hidden;}
#news .signing ul{width:100%;}
#news .signing ul li{height:42px; line-height:42px; font-size:16px; position:relative;}
#news .signing ul li a{display:block; height:42px; width:240px; color:#666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#news .signing ul li a:hover{color:#8fc35d; -webkit-transform:translateX(10px); -moz-transform:translateX(10px); transform:translateX(10px);}
#news .signing ul li span{position:absolute; top:0; right:0; color:#b4b4b4; font-size:14px;}


.bd_top{margin:104px auto; *padding:74px 0; border-top:1px dotted #c8c8c8; position:relative;}
.client{position:absolute; top:-56px; left:50%; width:320px; height:100px; margin-left:-160px; background:#fff; text-align:center;}
.client h2, .client aside{margin:0; padding:0;}
.client h2{font-size:36px; line-height:36px; margin-bottom:6px; color:#7c7c7c; }
.client aside{font-size:16px; color:#525252;}
.client span{display:block; margin-top:20px; color:#bbb;}



.profession{position:absolute; top:-20px; left:50%; width:460px; height:60px; margin-left:-230px; background:#fff; text-align:center;}
.profession h2{margin:0; padding:0; color:#525252; font-size:24px;}
.profession h2 em{color:#bbb;}
.profession span{color:#bbb; font-size:16px; display:block;}
.profession a{color:#525252; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.profession a:hover{color:#000;}

.profession-nr{font-size:14px; color:#999; margin-top:80px; text-align:center;}
.profession-nr p{margin-top:16px;}
.profession-nr a{color:#525252; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
.profession-nr a:hover{color:#000;}

.profession_list{width:1200px; margin:70px auto 0; overflow:hidden;}
.profession_list dl{float:left; padding-top:88px; width:300px;}
.profession_list dt{color:#333; font-size:18px; font-weight:bold; margin-bottom:30px;}
.profession_list dd{color:#999; font-size:14px; line-height:25px;}
dl.web{background:url(../img/profession_01.png) no-repeat 24px 4px;}
dl.app{background:url(../img/profession_02.png) no-repeat 60px 0;}
dl.seo{background:url(../img/profession_03.png) no-repeat 28px 0;}
dl.vi{background:url(../img/profession_04.png) no-repeat 65px 0;}


.index_pop_qq { display: none; position: fixed; top: 20%; left: 20%; z-index: 10000; width: 500px; height: 300px; background: url(../img/20160407/bg.jpg); }
            .index_pop_qq .close { width: 25px; height: 25px; position: absolute; right: 10px; top: 10px; background: url(../img/20160407/close.png); z-index: 10001; }
                .index_pop_qq .close:hover { background: url(../img/20160407/close2.png); }
            .index_pop_qq .txts { position: absolute; top: 0; padding: 30px; }
                .index_pop_qq .txts .p1 { line-height: 38px; font-size: 24px; color: #ffc602; }
                .index_pop_qq .txts .p2 { line-height: 30px; font-size: 14px; color: #fff; margin-top: 10px; }
                    .index_pop_qq .txts .p2 span { margin-right: 20px; display: inline-block; }
            .index_pop_qq .btns { width: 100%; position: absolute; bottom: 0; padding: 20px 0 30px; text-align: center; }
                .index_pop_qq .btns .btn { width: 160px; height: 50px; font-size: 26px; border: none; background-color: #ffc602; color: #fff; text-align: center; line-height: 50px; display: inline-block; }
                    .index_pop_qq .btns .btn:hover { background-color: #ffae00; }