html{ overflow-x: hidden;}
body{background: #fff; -webkit-text-size-adjust:none; overflow-x: hidden;}

.icon{display: inline-block; background: url(../images/icon.png); background-size: 500px; vertical-align: middle;}
.hide{display: none;}

.header{ position: fixed; left: 0; top: 0; z-index: 100; padding: 2.86% 0; width: 100%; background: #fff; box-sizing: border-box; text-align: center;}
.header h1{padding: 0.78%; -webkit-transition: all 0.5s; transition: all 0.5s;}
.header h1 img{width: 68px; vertical-align: middle; -webkit-transition: all 0.5s; transition: all 0.5s;}
.menu li{ display: inline-block; padding: 0.78% 1.34%; width: 75px; color: #443e40; cursor: pointer; font-size: 14px; vertical-align: middle;}
.menu li a{color: #443e40;}
.menu li:hover{color: #ff366b; font-weight: bold;}
.menu li a:hover{color: #ff366b; font-weight: bold;}

.fixstyle.header{ padding: 0;}
.fixstyle.header h1 {padding-bottom: 0;}
.fixstyle.header h1 img{ width: 39px;}

.footer{ position: relative; width: 100%; padding: 10% 0; background: url(../images/footer_bg.jpg); background-size: cover;}
.footer_con{position: absolute; top: 0; left: 0; bottom: 0; padding: 4.68% 0; width: 100%; text-align: center; color: #fff;}
.footer .icon_footer_logo{ width: 150px; height: auto; background-position: 0 0;}
.footer .menu{ padding: 1.8% 0 2.34%;}
.footer .menu li{color: #fff;}
.footer .menu li a{ color: #fff;}
.copyright{padding-top: 2.8%;  padding-bottom: 1.56%; font-size:14px ;}
.footer .icon_footer_d{ width: 34px; height: 34px; background-position: -124px 1px;}

.slidebox{position: relative; height: auto; overflow: hidden;}
.hidden_img{ visibility: hidden;}
.slidebox .tabicon{ position: absolute; left: 0; right: 0; bottom: 18px; z-index: 30; width: 100%; text-align: center;}
.slidebox .tabicon .tabicon_box{ display: inline-block; position: relative; height: 10px; line-height: 10px; vertical-align: middle;}
.slidebox .tabicon .tabicon_box span.on{position: absolute; top: 4px; left: 0; z-index: 100; width: 45px; height: 3px; background: #fff; -webkit-transition: all 0.3s; transition: all 0.3s;   -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}

.slidebox .tabicon ul{display: inline-block; font-size: 0; vertical-align: middle; height: 3px; background: rgba(255,255,255,.2);}
.slidebox .tabicon li{ float: left; width: 45px; height: 23px; margin-top: -10px; font-size: 0; text-indent: -999em; vertical-align: middle; cursor: pointer;}
.slidebox .tabicon li b{display: block; width: 45px; height: 3px;}
.slidebox .fouce{ height: 100%;}
.slidebox .fouce .info{ position: absolute; left: 0; top: 0; z-index: 10; width:100%; cursor: pointer; background: #fff;}
.slidebox .fouce .info .movie{width: 100%;}
.slidebox .fouce .info.last-active{z-index:15;}
.slidebox .fouce .info.active{ z-index: 20;}

.phone_kv_box{display: none;}
.swiper-pagination-bullet{width: 45px;height: 3px;border-radius: initial;vertical-align: middle;background: rgba(255,255,255,0.7);}
.swiper-pagination-bullet-active{ background: #fff;}

.home .content .introduce{padding: 8.3% 20px; text-align: center;}
.home .content h3{ padding-bottom: 35px; font-size: 40px; color: #221e20; font-weight: normal;}
.home .content p{margin: 0 auto; padding: 10px 0; max-width: 910px; font-size: 14px; line-height: 24px; color: #443e40;}

.service{position: relative;}
.service img{vertical-align: middle;}
.service_ele {position: absolute; left: 50%; top: 30%; margin-left: -33%; margin-top: -50px; width: 66%; }
.service_ele li{ float: left; width:25%;text-align: center; margin-bottom: 20px;}
.service_ele li span{display: block; padding-top: 30px; color: #fff; font-size: 14px; font-weight: bold;}
.service_ele .icon{ width: 76px; height: 69px; background-position: 0 -72px;}
.service_ele .creative_icon{ width: 64px;}
.service_ele .design_icon{width: 62px; background-position: -68px -72px;}
.service_ele .set_icon{width: 66px; background-position: -133px -72px;}
.service_ele .digital_icon{width: 64px; background-position: -201px -72px;}

.partner ul{ margin: 7.8% auto; width: 64%; overflow: hidden;}
.partner li{float: left; padding: 10px 0; width: 33%; text-align: center;}
.partner li img{width: 300px;}

.gps>img{ width: 100%;}
.gps .gps_detail{ padding: 6.25%; text-align: center; line-height: 52px; font-size: 14px; color: #443e40;}
.gps .gps_detail h4{padding-bottom: 15px; font-size: 32px; font-weight: bold;}
.gps .gps_detail p a{ color: #443E40;}
.gps .gps_detail p a:hover{ color: #FF366B;}

.pro_menu li{display: inline-block; padding: 0.78% 1.17%; font-size: 14px; color: #443e40; cursor: pointer;}
.pro_menu li.on{ color: #ff366b;;}
.pro_menu li[on] a{color: #ff366b;}
.pro_kvs ul{overflow: hidden;}
.pro_kvs ul li{float: left;position: relative;}
.pro_kvs ul li{ width: 20%; }
.pro_kvs ul li a{display: block;}
.pro_kvs ul li img{vertical-align: middle;}
.pro_kvs ul li .pro_hover{position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); -webkit-transition: all 0.8s;transition: all 0.8s;}
.pro_kvs ul li .pro_hover_con{position: absolute; left: 0; top: 50%; margin-top: -6% ; width: 100%; height: 12%; color: #fff; font-size: 12px;text-align: center;}
.pro_kvs ul li .pro_hover_con h6{ font-size: 16px; font-weight: normal;}
.pro_kvs ul li .pro_hover_con h4{ font-size: 20px; padding: 1.2% 0 3%; font-weight: normal;}
.pro_kvs ul li .pro_hover_con p { color: #fff; font-size: 12px; padding: 0;}
.pro_kvs ul li .pro_hover_con p span{margin: 0 7px 0 10px;}
.icon_link{ width: 12px; height: 12px; background-position: -160px 0;}
.icon_digital{ width: 87px; height: 9px; background-position: -176px 0;}
.pro_kvs ul li:hover .pro_hover{opacity: 1;}


/*兼容问题*/

@media screen and (max-width: 1200px) {
	.service_ele{ margin-left: -39%; width: 78%;}
	.partner ul{ width: 80%;}
	.pro_kvs ul li .pro_hover_con{margin-top: -8%;}
	.pro_kvs ul li .pro_hover_con h6{ font-size: 14px;}
	.pro_kvs ul li .pro_hover_con h4{font-size: 20px;}
}
@media screen and (max-width: 1100px) {
	.partner li{width: 33.33%;}
	.footer .icon_footer_logo{ width: 150px; height: 34px; background-size: 250px;}
	.footer .icon_footer_d{ width: 17px; height: 17px; background-position: -62px 0; background-size: 250px;}
}
@media screen and (max-width: 770px) {
	.header h1{padding: 2% 0;}
	.home .content h3{font-size: 36px;}
	.service img{ width: 130%;}
	.partner li img{ width: 150px;}
	.footer{ padding: 11% 0;}
	.copyright{font-size: 12px; padding-top: 4%;}
	
	.pro_menu li{ padding: 0.78% 1.5%;}
}
@media screen and (max-width: 560px) {
	.header h1 img{ width: 40px;}
	.partner li{width: 50%;}
	.home .content h3{font-size: 30px; padding-bottom: 25px;}
	.partner li img{ width: 150px;}
	.icon{ background-size: 250px;}
	.service_ele{ margin-top: -8%;}
	.service_ele li span{ padding-top: 12%; font-size: 12px;}
	.service_ele .creative_icon{ width: 32px; height: 40px; background-position: 0 -36px;}
	.service_ele .design_icon { width: 31px; height: 40px; background-position: -34px -36px;}
	.service_ele .set_icon{ width: 33px; height: 40px; background-position: -67px -36px;}
	.service_ele .digital_icon{ width: 32px; height: 40px; background-position: -101px -36px;}
	.footer{ padding: 16% 0;}
}
@media screen and (max-width: 415px) {
	.header{ padding: 3.5% 0;}
	.header h1{padding: 1.5%;}
	.home .content h3{font-size: 24px; padding-bottom: 15px;}
	/*.home .content p{ font-size: 12px; line-height: 20px;}*/
	.menu{ padding: 2% 0 1%;}
	.gps .gps_detail h4{ font-size: 24px; padding-bottom: 5px;}
	.service_ele{width: 90%; margin-left: -45%;}
	.service img{ width: 180%;}
	.service_ele{ margin-top: -7.5%;}
	.partner ul{width: 100%}
	.home .content .introduce{ padding: 15% 15px;}
	.home .content p{padding: 15px;}
	.partner li img{ width: 100%;}
	.slidebox .tabicon{ bottom: 10px;}
	.menu li:hover{color: #443e40; font-weight: normal;}
	.menu li a:hover{color: #443e40; font-weight: normal;}
	.pro_menu {padding: 2% 0 1%;}
	.pro_menu li{padding: 0.78% 1.5%; }
	.pro_kvs ul li{ width: 50%; }
	.gps>img{ width: 150%; margin-left: -20%;}
	.footer{ padding: 19% 0;}
	.footer_con{ padding: 7.5% 0;}
	
	.fixstyle.header h1 img{ width: 30px;}
	.fixstyle.header li{ font-size: 12px;}
	.icon_link{ width: 6px; height: 6px; background-position: -80px 0;}
	.icon_digital{ width: 44px; height: 5px; background-position: -88px 0;}
	.pro_kvs ul li .pro_hover_con span{font-size: 8px;}
	
	
	.kv_box{display: none;}
	.phone_kv_box{display: block;}
}