body{background:#f5f5f5}
.header{position:absolute;width:100%;left:0;top:0;z-index:99}
.header .header-inner{max-width:1015px;margin:0 auto;padding:0 15px;position:relative;}
.header .logo{float:left;margin-top:56px;}
.header .nav{float:right;margin-top:62px;}
.header .nav .btn-toggle-nav{position:absolute;left:0;top:0;height:61px;width:61px;display:none;}
.header .nav .btn-toggle-nav span{position:absolute;top:50%;margin-top:-1px;left:50%;margin-left:-14px;display:block;width:28px;height:2px;background:#fff;}
.header .nav .btn-toggle-nav span:after,.header .nav .btn-toggle-nav span:before{position:absolute;left:0;width:100%;height:100%;background:#fff;content:'';-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.header .nav .btn-toggle-nav span:before{-webkit-transform:translate(0,-6px);transform:translate(0,-6px);}
.header .nav .btn-toggle-nav span:after{transform:translate(0,6px);-webkit-transform:translate(0,6px);}
.header .nav .btn-toggle-nav.open span{background-color:transparent;}
.header .nav .btn-toggle-nav.open span:after{-webkit-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg);}
.header .nav .btn-toggle-nav.open span:before{-webkit-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);}
.header .nav ul{margin-right:16px;}
.header .nav li{float:left;margin:0 8px;display:inline;text-align:center;height:22px;overflow:hidden;}
.header .nav li a{color:#fff;font-size:15px;display:block;}
.header .nav li span{display:block;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.header .nav li a:hover .en{margin-top:-22px;}
.header .search{float:right;margin-top:69px;border-left:2px solid #fff;height:11px;position:relative;padding-left:44px;}
.header .search a{position:absolute;width:19px;height:19px;background:url(../images/search.png) no-repeat;right:0;top:-4px;}
.footer{background:#000;}
.footer .footer-inner{max-width:1175px;margin:0 auto;position:relative;padding:50px 15px 50px}
.footer .other-site li{margin-top:13px;position:relative;z-index:1;float:left;clear:both;}
.footer .other-site i{display:inline-block;vertical-align:top;width:27px;height:27px;background-repeat:no-repeat;cursor:pointer;}
.footer .other-site .icon-qq{background-image:url(../images/qq.png)}
.footer .other-site .icon-weixin{background-image:url(../images/weixin.png)}
.footer .other-site .icon-weibo{background-image:url(../images/weibo.png)}
.footer .other-site .icon-duoban{background-image:url(../images/duoban.png)}
.footer .other-site .txt{cursor:pointer;display:inline-block;color:#fff;vertical-align:top;height:27px;overflow:hidden;line-height:30px;margin-left:13px;}
.footer .other-site .ewm-box{opacity:0;visibility:hidden;position:absolute;z-index:1;top:50%;margin-top:-98px;right:-208px;color:#333;text-align:center;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;}
.footer .other-site .ewm-box-inner{position:relative;padding:10px;background:#fff;}
.footer .other-site .ewm-box .txt2{margin-top:5px;white-space:nowrap;}
.footer .other-site .ewm-box i{position:absolute;width:0;height:0;border-style:solid;border-color:#000 #fff #000 #000;border-width:8px;top:50%;left:-16px;margin-top:-8px;}
.footer .other-site li.hover .ewm-box{opacity:1;visibility:visible;right:-198px;}
.footer .copyright{color:#898989;font-size:12px;margin-top:50px;}
.footer .logo{position:absolute;right:15px;top:118px}
.page-index-banner{position:relative;height:700px;background:url(../images/banner01.jpg) no-repeat center bottom;}
.page-index-banner .ani-logo{left:50%;bottom:28.4%;margin-left:-87px;position:absolute;width:171px;height:332px;overflow:hidden;}
/* .page-index-banner .ani-logo img{margin-left:100%;} */
.page-index-banner .txt1{position:absolute;width:388px;left:50%;bottom:75px;margin-left:-194px;/* opacity:0;filter:alpha(opacity=0); */margin-bottom:-20px;}
.page-index-banner .txt1 img{width:100%;}
.page-index-banner .txt2{position:absolute;width:606px;left:50%;bottom:45px;margin-left:-303px;/* opacity:0;filter:alpha(opacity=0); */margin-bottom:-20px;}
.page-index-banner .txt2 img{width:100%;}
.page-index-nav{background:#f5f5f5}
.page-index-nav ul{text-align:center;padding:67px 0 60px}
.page-index-nav li{margin:0 28px;display:inline-block;zoom:1;*display:inline;}
.page-index-nav .icon{text-align:center;height:54px;}
.page-index-nav .icon span{display:inline-block;background-repeat:repeat-x;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.page-index-nav .icon-eye{background-image:url(../images/icon-eye.png);width:32px;height:24px}
.page-index-nav .icon-colund{background-image:url(../images/icon-colund.png);width:32px;height:23px}
.page-index-nav .icon-headset{background-image:url(../images/icon-headset.png);width:32px;height:32px}
.page-index-nav .icon-heart{background-image:url(../images/icon-heart.png);width:32px;height:29px}
.page-index-nav .icon-teamug{background-image:url(../images/icon-teamug.png);width:32px;height:24px}
.page-index-nav li .text{font-size:18px;}
.page-index-nav li .text span{margin:0 10px}
.page-index-nav li a:hover span{background-position:-32px 0}
.showcase .showcase-hd{height:228px;background:#fff;text-align:center;}
.showcase .showcase-hd h2{font-size:30px;color:#000;padding-top:55px;}
.showcase .showcase-hd .showcase-nav{margin-top:40px;}
.showcase .showcase-hd .showcase-nav a{display:inline-block;vertical-align:top;font-size:18px;color:#000;margin:0 31px;}
.showcase .showcase-hd .showcase-nav a:hover{color:#df2002}
.showcase .showcase-hd .showcase-nav .active{border-bottom:2px solid #000}
.showcase .showcase-bd{padding-bottom:100px;}
.page-index-works{max-width:1012px;margin:63px auto 0;overflow:hidden;padding:0 15px}
.page-index-works h3{color:#000;font-size:20px;font-weight:bold;margin-bottom:11px;}
.page-index-works ul{margin-right:-8px;}
.page-index-works li{float:left;width:332px;margin:8px 8px 0 0;}
.page-index-works li a{display:block;background:#ffffff}
.page-index-works .pic{height:196px;overflow:hidden;}
.page-index-works .pic img{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}
.page-index-works li .txt{height:195px;overflow:hidden;padding:0 24px;position:relative;}
.page-index-works li .title{margin-top:57px;color:#000;font-size:17px;}
.page-index-works li .summary{font-size:12px;color:#898989;margin-top:5px;max-height:54px;overflow:hidden;}
.page-index-works li .icon-more{position:absolute;width:19px;height:19px;bottom:32px;right:24px;overflow:hidden;cursor:pointer;}
.page-index-works li .icon-more img{display:block;}
.page-index-works li a:hover{background:#df2002}
.page-index-works li a:hover .pic img{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);-o-transform:scale(1.02);transform:scale(1.02);}
.page-index-works li a:hover .title,.page-index-works li a:hover .summary{color:#fff}
.page-index-works li a:hover .icon-more img{margin-top:-19px;}
.page-index-works .show-more{text-align:center;margin-top:30px;}
.page-index-works .show-more a{color:#000;font-size:20px;}
.site-logo{background:#fff;padding:118px 0;text-align:center;}
.site-logo img{max-width:100%}
[data-scroll]{opacity:0;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s;}
.isinview{opacity:1}
@media screen and (max-width:1078px){
    .page-index-works{max-width:672px}
}
@media screen and (max-width:960px){
    .page-index-nav li{margin:0 8px;}
    .page-index-banner{height:650px;background-size:cover}
    .page-index-banner .ani-logo{bottom:28.4%;margin-left:-87px;width:156px;height:303px}
    .page-index-banner .txt1{width:360px;margin-left:-180px;bottom:70px}
    .page-index-banner .txt2{width:564px;margin-left:-282px;bottom:40px}
}
@media screen and (max-width:768px){
    .header{background:#000;}
    .header .header-inner{padding:0}
    .header .nav{float:none;margin-top:0}
    .header .nav .btn-toggle-nav{display:block;}
    .header .nav ul{display:none;margin-right:0;}
    .header .nav li{float:none;width:100%;height:auto;display:block;margin:0;border-top:1px solid #2d2d2d}
    .header .nav li a{display:block;padding:5px 10px;}
    .header .nav li a:hover{background:#171717}
    .header .nav li a:hover .en{margin-top:0}
    .header .nav li span{}
    .header .logo{width:136px;float:none;margin:0 auto;padding:5px 0;}
    .header .logo img{width:100%}
    .header .search{position:absolute;width:61px;height:61px;right:0;top:0;margin-top:0;padding-left:0;border-left:none}
    .header .search a{position:relative;display:block;width:100%;height:100%;background:none;top:0;}
    .header .search a:after{position:absolute;content:"";width:19px;height:19px;top:50%;left:50%;margin:-10px 0 0 -10px;background:url(../images/search.png) no-repeat;}
    .page-index-nav ul{padding:10px 0 40px}
    .page-index-nav .icon{height:34px}
    .page-index-nav li{width:33.33%;margin:30px 0 0;float:left;}
    .showcase .showcase-hd h2{font-size:24PX;}
    .page-index-works{max-width:auto}
    .page-index-works li{width:auto;float:none;}
    .page-index-works .pic{height:auto}
    .page-index-works .pic img{width:100%;}
    .page-index-banner{height:500px;}
    .page-index-banner .ani-logo{bottom:28.4%;margin-left:-63px;width:120px;height:233px}
    .page-index-banner .txt1{width:280px;margin-left:-140px;bottom:60px}
    .page-index-banner .txt2{width:436px;margin-left:-218px;bottom:30px}
}
@media screen and (max-width:568px){
    .showcase .showcase-hd h2{font-size:20px;}
    .page-index-banner{height:400px;}
    .page-index-banner .ani-logo{bottom:28.4%;margin-left:-46px;width:99px;height:192px}
    .page-index-banner .txt1{width:224px;margin-left:-112px;bottom:50px}
    .page-index-banner .txt2{width:350px;margin-left:-175px;bottom:20px}
}
@media screen and (max-width:480px){
    .footer .logo{position:relative;top:0;left:0;right:auto}
    .footer .other-site{margin-top:20px;}
    .page-index-nav li{float:left;width:50%;}
    .page-index-nav li .text{font-size:16px;}
    .showcase .showcase-hd h2 span{display:block;}
    .showcase .showcase-hd h2 em{display:none;}
    .showcase .showcase-hd .showcase-nav a{margin:0 18px;}
    .page-index-banner{height:350px;}
    .page-index-banner .ani-logo{bottom:26.4%;margin-left:-48px;width:90px;height:175px;}
    .page-index-banner .txt1{width:198px;margin-left:-99px;}
    .page-index-banner .txt2{width:306px;margin-left:-153px;}
}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .header .search a:after{background-image:url(../images/search@2x.png);background-size:100% auto;}
}
@-webkit-keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}
@-o-keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}
@-moz-keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}