/*页头*/
.header{width: 100%; background-color: #fff; position: fixed; z-index: 50; top: 0; left: 0;}
.header .container{padding: 0 40px;}
.header .logo{float: left; width: 100px; height: 60px; margin: 10px 0; overflow:hidden;}
.header .logo a{float: left; width: 100%;  overflow:hidden;}
.header .logo img{display: block; height: 60px; width: auto; margin:0 auto;}
.header .nav{float: right; margin-top: 20px;}
.header .nav ul{float: left; font-size: 18px; line-height: 1.25em; margin:0; padding:0; list-style:none; display:block; box-sizing: border-box;}
.header .nav ul li{float: left; padding:0 5px; margin: 0; text-align: center !important;}
.header .nav ul li a{padding: 10px; display: block; box-sizing: border-box; color: #000; text-align: center !important;}
.header .nav ul li a span{display: block; font-size: 14px; line-height: 1.4em; text-align: center !important;}
.header .nav ul li a:hover,.header .nav ul li.active a{color: #c61727;}
.header.nottop{padding-top: 0; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.header .menu{display: none;}
.header .cover{display: none;}


/*导航右侧联系电话*/
.header .nav .nav-contact{padding-top: 9px; box-sizing: border-box;}
.header .nav .nav-contact a{padding: 0 0 0 10px; font-size: 14px; line-height: 1.5em; text-align:left !important;}
.header .nav .nav-contact a img{display: block; width: 14px; height: 14px; float: left; margin: 3px 4px 0 0;}


/*页脚弹出联系框*/
.contact-box{position: fixed; bottom: -110px; right: 0; z-index: 100; width: 240px; background-color:#fff; border:1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px 0 0 8px; overflow: hidden;}
.contact-box.nottop{bottom: 70px;}
.contact-box.hidden{right: -211px;}
.contact-box .box-btn{float: left; width: 30px; font-size: 14px; padding:10px 5px 0 5px; text-align: center; line-height: 1.1em; cursor: pointer;}
.contact-box .box-btn .icon{width: 10px; height: 10px; margin:7px 5px 0 5px; background-image:url(../images/triangle.png); background-size: 200% 100%; background-position: left center;}
.contact-box.hidden .box-btn .icon{background-position: right center;}
.contact-box .box-content{margin: 0 78px 0 30px; padding: 6px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.contact-box .box-content a{display: block; font-size: 15px; padding: 3px 5px; color: #000;}
.contact-box .box-content a:hover{color: #c61727;}
.contact-box .box-content a span{font-size: 13px; color: #555;}
.contact-box .box-qrcode{float: right; width: 78px; padding: 5px;}
.contact-box .box-qrcode span{display: block; text-align: center; font-size: 12px;}


/*右侧多媒体按键*/
.media-box{position: fixed; right: 0; bottom: 200px; width: 50px; height: 260px; z-index: 110;}
.media-box a{display: block; box-sizing: border-box; width: 50px; overflow: hidden; height: 50px; color: #fff; font-size: 16px; white-space: nowrap; line-height: 50px; text-align: left; padding: 0 0 0 50px; background-image: url(../images/medias.png); background-size: 50px 250px; background-position: left; background-repeat: no-repeat; position: absolute; right: 0;}
.media-box a:hover{width: 130px;}
.media-box .icon-wechat{background-color: #53c656; background-position: 0 0; top: 0;}
.media-box .icon-shichangbu{background-color: #ff7546; background-position: 0 -50px; top: 50px;}
.media-box .icon-youku{background-color: #5cc2ff; background-position: 0 -100px; top: 100px;}
.media-box .icon-weibo{background-color: #ee6e65; background-position: 0 -150px; top: 150px;}
.media-box .icon-backtop{background-color: #444; background-position: 0 -200px; top: 210px;}
.media-box a:hover.icon-wechat{width: 50px; overflow: visible;}
.media-box a.icon-wechat img{display: none; position: absolute; right: 50px; width: 150px; height: 150px; border:5px solid #fff;}
.media-box a:hover.icon-wechat img{display: block;}


/*页脚*/
.footer{width: 100%; margin: 0 auto; border-top: 1px solid #f8f8f8;}
.footer .contact{padding: 40px 10px;}
.footer .contact .contact-info{float: left; width: 60%;}
.footer .contact .contact-map{float: right; width: 40%;}
.footer h4{line-height: 1.5em; font-weight: bold; padding: 5px 0;}
.footer ul{color: #999; font-size: 1.3em; line-height: 1.5em; margin:0; padding:0; list-style:none; display:block; box-sizing: border-box;}
.footer ul li{float: left; margin:0 20px 0 0; padding: 5px 0; display: block; box-sizing: border-box;}
.footer ul li a{color: #999;}
.footer ul li a:hover{text-decoration: underline;}
.footer .media{margin: 10px 0; width: 100%; float: left;}
.footer .media a{display: block; box-sizing: border-box; float: left; width: 40px; height: 40px; overflow: hidden; position: relative; margin-right: 10px; background: url(../images/media.png); background-size: 200% 200%; border-radius: 50%; border: 1px solid #ccc;}
.footer .media a.weibo{background-position: left bottom;}
.footer .media a.wechat{background-position: right bottom;}
.footer .media a:hover.weibo,.footer .media a.active.weibo{background-position: left top;}
.footer .media a:hover.wechat,.footer .media a.active.wechat{background-position: right top;}
.footer .media a.dingding{background-image: url(../images/dingding.png);}
.footer .media a.tianyan{background-image: url(../images/tianyan.png);}
.footer .media a.dingding,.footer .media a.tianyan{background-position: bottom; background-size: 100% 200%;}
.footer .media a:hover.dingding,.footer .media a:hover.tianyan{background-position: top;}

.footer .media a img{position: absolute; display: block; left: 50%; bottom: 65px; margin: -90px 0 0 -90px; display: block; z-index: 200; width:170px; height: 170px; border: 5px solid #fff; border-radius: 10px; opacity: 0; box-shadow: 0 0 8px rgba(0,0,0,0.2);}
.footer .media a:hover,.footer .media a.active{overflow: visible;}
.footer .media a:hover img,.footer .media a.active img{display: block; bottom: 50px; opacity: 1;}
.footer .copyright{background-color: #f0f0f0; border-top: 1px solid #e4e4e4; line-height: 2em; font-size: 13px; color: #777; padding: 18px 0;}
.footer .copyright .container{padding:0 10px;}
.footer .copyright .content{width: auto;}
.footer .copyright .content a{color: #333;}
.footer .copyright .subnav{float: right;}
.footer .copyright .subnav ul{float: right; font-size: 13px; line-height: 2em;}
.footer .copyright .subnav ul li{margin:0 0 0 20px; padding: 0;}
.footer .copyright .subnav ul li a{color: #333; display: block;}

.footer .qrcode{max-width: 860px;}
.footer .qrcode .title{padding: 15px 0;}
.footer .qrcode .title h3{font-size: 22px; color: #333; font-weight: bold;}
.footer .qrcode .item{width: 25%; float: left; text-align: center; margin: 20px 0;}
.footer .qrcode .item a{display: block; width: 100%;}
.footer .qrcode .item img{display: block; width: 50%; margin: 0 auto; padding: 10px; border-radius: 10px; box-sizing: border-box;}
.footer .qrcode .item span{display: block; font-size: 14px; line-height: 20px;}


/*通用*/
.section.active{margin-left: 260px;}
.title{text-align: center; padding:30px 0; color: #333;}
.title h3{line-height: 1.6em; color: #c61727;}
.title h4{font-size:2em; line-height: 1.6em; color: #333;}
.title .time{font-size: 16px; color: #999; line-height: 1.5em;}
.more{text-align: center; padding: 5px 0 0 0; float: left; width: 100%;}
.more a{color: #0070c9; display: inline-block; font-size: 1.5em; line-height: 2em; padding-right: 24px;}
.more a{background: url(../images/arrow.png) center right no-repeat; background-size: auto 50%; padding-bottom: 2px;}
.more a:hover{text-decoration: underline;}


/*首页-banner*/
.banner img{display: block; width: 100%; height: auto;}
.banner .swiper-pagination-bullet{background-color: #fff; opacity: 1;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #c61727;}
.page{padding-bottom: 20px;}


/*数据*/
.data.container{max-width: 1200px; padding-left: 0; padding-right: 0;}
.data .content{background-color: #aba9aa; color: #fff; padding: 8px 5%;}
.data .item{width: 20%; height: 140px; padding: 10px 0; text-align:center;}
/*
.data .item{width: 18%; height: 140px; padding: 10px 0;}
.data .item:nth-child(1){width: 21%;}
.data .item:nth-child(2){width: 21%;}
.data .item:nth-child(3){width: 21%;}
.data .item:last-child{width: auto; float: right; min-width: 148px;}*/
.data .item h1{line-height: 1.2em; color:#2847c4;}
.data .item h3{line-height: 1.25em;}


/*案例作品*/
.case .item{width: 25%; float: left; padding:0 5px 10px 5px;}
.case .item img{display: block; width: 100%; height: auto;}
.case .item a{display: block;}
.case .item .photo{width: 100%; overflow: hidden; background-color: #000;}
.case .item .photo a:hover img{transform: scale(1.1); opacity: 0.5;}
.case .item .info{width: 100%; text-align: center;}
.case .item .info a{display: block; padding: 30px 0;}
.case .item .info span{display: block; font-size: 1.25em; line-height: 2em; color: #999;}
.case .item .info strong{display: block; font-size: 1.5em; line-height: 2em; color: #000;}


/*合作客户*/
.partner .box{margin:0 -2px;}
.partner ul{width: 100%; float: left; padding:0; margin: 0; list-style:none; display:block; box-sizing: border-box;}
.partner ul li{width: 12.5%; float: left; padding:0 4px 4px 4px; margin: 0; display:block; box-sizing: border-box;}
.partner ul li a{display: block;}
.partner ul li img{display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto;}


/*项目日志*/
.log.container-full{background-color: #f8f8f8; margin-top: 30px; padding: 20px 0;}
.log{position: relative;}
.log .box{margin:0 -40px;}
.log .item{width: 33.33333333%; float: left; padding:0 40px 70px 40px;}
.log .item a{display: block;}
.log .item img{display: block; width: 100%; height: auto;}
.log .item a span{display: block; color: #999; font-size: 1.1em; line-height: 1.7em; overflow: hidden; }
.log .item a strong{display: block; color: #000; font-size: 1.5em; line-height: 1.7em;}
.log .item a span .md{float: left; margin:0 15px 0 0;}
.log .item a span .year{float: left;}
.log .item a .line{background-color: #eee; height: 1px; width: 100%; margin: 20px 0;}
.log .item a .line .tran{background-color: #333; height: 1px; width: 10px;}
.log .item a:hover .line .tran{width: 100%;}
.log .item a .photo{overflow: hidden; background-color: #000;}
.log .item a:hover .photo img{transform: scale(1.1); opacity: 0.5;}
.log .more{margin-top: -15px;}


/*工具*/
.tool{position: absolute; right:60px; top: 122px; width: 60px; z-index: 10;}
.tool-fixed{position: fixed; width: 60px;}
.tool a{display: block; box-sizing: border-box; float: left; border: 1px solid #ccc; margin-bottom: 5px; width: 60px; height: 34px; position: relative; background-color: rgba(255,255,255,0.8); overflow: hidden;}
.tool a span,.tool a strong{display: block; box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; z-index: 10;}
.tool a span{left: -100%; color: #333; line-height: 34px; text-align: center; font-size: 14px;}
.tool a:hover span{left: 0;}
.tool a strong{left: 0; background: url(../images/tool.png); background-size: 100% 300%;}
.tool a:hover strong{left: 100%;}
.tool a.menu strong{background-position: top;}
.tool a.prev strong{background-position: center;}
.tool a.next strong{background-position: bottom;}


/*详情*/
.article{max-width: 900px; margin: 0 auto;}
.article img{max-width: 100%; width: auto; height: auto; display: block; margin-bottom: 30px;}
.company .article{max-width: 100%; padding-bottom: 30px;}
.company .article img{margin: 0;}
.case .article,.case .detail{max-width: 980px; padding:0 10px 30px 10px; margin: 0 auto;}
.case .tool{display: none;}
.case .detail{border-bottom: 1px dashed #ccc; width: 100%; text-align: right; padding: 30px 10px; margin-bottom: 40px; font-size: 1.4em; line-height: 1.8em; }
.case .detail h3{line-height: 1.5em; color: #000; padding: 5px 0;}
.case .detail .attr{padding: 5px 0; display:none;}
.case .detail .desc{text-align: left; padding: 5px 0;}
.case .detail .time{padding: 5px 0;}
.case .detail .desc p{margin: 0;}


/*视频播放*/
.video{background-color: #000; position: relative;}
.video .content{max-width: 960px; margin: 0 auto; width: 100%; float: none;}
.video a{display: block; box-sizing: border-box; width: 60px; height: 100px; opacity: 0.3; position: absolute; z-index: 30; top: 50%; margin-top: -50px; background: url(../images/arrows.png) no-repeat; background-size: 100% 200%;}
.video a.prev{left: 10px; background-position: left top;}
.video a.next{right: 10px; background-position: left bottom;}
.video a:hover{opacity: 1;}
.video .videoPlayer{width: 100%; height: 540px; position: relative;}
.video .videoPlayer iframe{position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 100%;}
.video .videoPlayer .xvideo{position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 100%;}


.clear{ font: 0px/0px sans-serif; clear:both; display: block; height:0px; overflow:hidden }
.fenye{text-align:center;margin:20px 0; font-size:14px;}
.fenye ul{padding:0;}
.fenye li{display: inline-block;border:1px solid #ddd;height:35px;line-height:35px;padding:0 15px;margin:5px}
.fenye li a{color:#333;}