@charset "utf-8";
/* CSS Document */

html,body{ transition:all ease 0.4s;}
.left{ float:left;}
.right{ float:right;}
.wrap{ width:100%; position:relative; overflow:hidden; margin:0 auto;}
.content{ overflow:hidden;}
.clear{ height:0; clear:both;}

/*头部*/
.header{ width:100%; background:#fff; position:fixed; z-index:99;}
.header .head{ height:96px; position:relative; margin:0 88px;}
.header h1.logo{ display:block; overflow:hidden; float:left;}
.header h1.logo a{ display:block;}
.header h1.logo a img{ display:block; height:96px;}

/*导航*/
ul.nav{ display:block; height:96px; float:right;}
ul.nav li{ display:block; float:left; position:relative;}
ul.nav li a{ display:block; line-height:96px; color:#333; font-size:16px; text-align:center; padding:0 1.4em;}
ul.nav li a:hover,
ul.nav li.on a,
ul.nav li.cur a{ color:#0052fe;}
ul.nav li p.sub{ display:none !important; width:120%; background:#fff; overflow:hidden; position:absolute; left:-10%; top:100%;}
ul.nav li p.sub a{ line-height:3; color:#444; font-size:14px; padding:0;}
ul.nav li p.sub a:hover{ color:#fff; background:#0052fe;}

.header,
.header .head,
.header h1.logo a img,
.header ul.nav,
.header ul.nav li a{ transition:all ease 0.4s;}
.header.fixed{ box-shadow:0 0 6px 0 rgba(0,0,0,0.6);}
.header.fixed .head,
.header.fixed h1.logo a img,
.header.fixed ul.nav{ height:76px;}
.header.fixed ul.nav li a{ line-height:76px;}

/*banner*/
.banner{ height/:728px; background-size:cover !important; overflow:hidden; margin:96px 0 0;}
.banner img{ display:block; width:100%;}

/*底部*/
.footer{ background:#444;}
.footer .foot{ text-align:center; overflow:hidden; margin:0 88px;}
.footer p.nav{ line-height:1; color:#cacaca; font-size:16px; padding:0.7em 0; margin:2.5% 0 1px;}
.footer p.nav a{ color:#cacaca; letter-spacing:3px; padding:0.5em 0; border-bottom:1px solid #bfbfbf; margin:0 3.5%;}
.footer p.nav a:hover{ color:#fff; border-color:#fff;}
.footer .copyright{ line-height:2; color:#898989; font-size:14px; overflow:hidden; margin:4% 0 2.5%;}
.footer .copyright a{ color:#898989;}
.footer .copyright a:hover{ color:#fff;}

.float{ display:block; background:rgba(255,255,255,0.8); padding:8px 20px; box-shadow:0 0 15px rgba(0,0,0,0.4); border-radius:15px 0 0 15px; position:fixed; right:0; top:32%; z-index:9999;}
.float a{ display:block; width:44px; height:44px; background-size:contain !important; border-radius:50%; margin:12px 0; position:relative;}
.float a em{ display:none; line-height:28px; color:#333; font-size:18px; white-space:nowrap; background:#fff; padding:8px 16px; position:absolute; right:100%; top:0; margin-right:28px; box-shadow:0 0 5px rgba(0,0,0,0.4); border-radius:4px;}
.float a em::after{ content:''; display:block; border:1px solid #fff; border-width:6px 0 6px 8px; border-color:transparent #fff; position:absolute; right:0; top:30px; z-index:1; margin:-14px -8px 0 0;}
.float a em i{ display:block; line-height:44px; color:#666; font-size:14px; text-align:right;}
.float a em img{ display:block; width:100%; margin:0 0 12px;}
.float a.secur{ background:url(../images/common/float_secur.png) center no-repeat; border-radius:0; margin:12px 0 14px;}
.float a.qq{ background:#1b55fe url(../images/common/float_qq.png) center no-repeat; box-shadow:0 0 8px 2px #1b55fe;}
.float a.qq.wap{ display:none;}
.float a.user{ background:#f3e500 url(../images/common/float_user.png) center no-repeat; box-shadow:0 0 8px 2px #f3e500;}
.float a.top{ background:#76bc21 url(../images/common/float_top.png) center no-repeat; box-shadow:0 0 8px 2px #76bc21;}
.float a.more{ height:22px; background:url(../images/common/float_more.png) center no-repeat; border-radius:0; margin:14px 0 10px;}
.float a:hover em{ display:block;}

/*返回顶部*/
.backToTop{ display:block; width:48px; height:48px; background:#0052fe url(../images/common/top.png) center no-repeat; background-size:contain; border-radius:4px; position:fixed; right:1%; bottom:33%; bottom:9%; z-index:9999; cursor:pointer; text-indent:-9999px;}

/*主体样式*/
.main{ overflow:hidden; position:relative; margin:0 88px;}
.main::after{ content:''; display:block; clear:both;}

a.ads{ display:block; max-width:1200px; margin:0 auto;}
a.ads img{ display:block; width:100%;}

.main .position{ display:block; background:url(../images/icons/title_bg.png) left center repeat-x; overflow:hidden; position:relative; margin:28px 0;}
.main .position span{ display:block; line-height:32px; color:#333; font-size:22px; font-weight:bold; font-family:"思源宋体 Heavy","思源宋体 CN Heavy","思源宋体","思源宋体 CN"; letter-spacing:2px; text-indent:-48px; background:#fff url(../images/icons/title_mark.png) right 13px center no-repeat; padding:0 24px 0 62px; border-left:4px solid #980008; position:relative; float:left;}
.main .position span em{ display:block; width:58px; height:32px; color:#fff; text-align:center; overflow:hidden; text-indent:0; background:#0052fe; border-right:4px solid #fff; position:absolute; left:0; top:0;}
.main .position p{ display:block; line-height:32px; color:#999; font-size:14px; background:#fff url(../images/common/posit.png) left 10px center no-repeat; padding:0 0 0 34px; float:right;}
.main .position p a{ color:#999;}
.main .position p a:hover{ color:#0052fe;}

/*内容样式*/
.main .attr{ overflow:hidden; padding:0 1%;}
/*
.main .attr h2.title{ display:block; line-height:76px; color:#0052fe; font-size:30px; padding:36px 0 0; overflow:hidden;}
.main .attr h2.title em{ display:block; width:54px; height:3px; background:#0052fe;}
*/
.main .attr h3.title{ display:block; line-height:1.5; color:#444; font-size:42px; font-weight:normal; padding:0 1%; border-bottom:5px solid #444; margin:4% 0 0;}
.main .attr p.mark{ display:block; line-height:2.15; color:#444; font-size:26px; padding:0 2%; margin:0 0 3%;}
.main .article{ line-height:2.3; color:#444; font-size:16px; overflow:hidden; padding:0 0 2em;}
.main .article *{ line-height:inherit; color:inherit; font-size:inherit;}
.main .article img{ max-width:100%;}

/*文章切换*/
.main .change{ overflow:hidden; line-height:1.5; color:#444; font-size:16px; padding:2% 0 4%;}
.main .change a{ color:#444;}
.main .change a:hover{ color:#0052fe;}

/*页码样式*/
.pages{ text-align:center; font-size:14px; padding:0 0 60px;}
.pages span,
.pages a{ display:inline-block; *display:inline; *zoom:1; min-width:12px; color:#999; height:24px; line-height:24px; text-align:center; padding:4px 11px; background:#fff; border:1px solid #ddd; margin:0 8px;}
.pages a:hover,
.pages span{ color:#fff; background:#0052fe; border-color:#0052fe;}

/*案例列表*/
.main ul.caseList{ display:block; overflow:hidden; margin:3% -6px 8%;}
.main ul.caseList li{ display:block; width:33.33%; overflow:hidden; position:relative; float:left;}
.main ul.caseList li .box{ overflow:hidden; margin:6px; position:relative;}
.main ul.caseList li a.cate{ display:block; line-height:2; color:#fff; font-size:14px; padding:4% 5%; position:absolute; left:0; top:0; z-index:5; opacity:0;}
.main ul.caseList li a.tit{ display:block; width:100%; height:100%; color:#fff; background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; z-index:9; transition:all ease 0.3s; opacity:0; z-index:3;}
.main ul.caseList li .info{ width:90%; position:absolute; left:0; bottom:0; margin:0 5% 4%;}
.main ul.caseList li span{ display:block; line-height:2.5; font-size:17px;}
.main ul.caseList li p{ line-height:1.75; font-size:13px; overflow:hidden;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:99;
}
.main ul.caseList li img{ display:block; width:100%; transition:all ease 0.3s;}
.main ul.caseList li:hover a.cate{ opacity:1;}
.main ul.caseList li:hover a.tit{ opacity:1;}
.main ul.caseList li:hover img{ transform:scale(1.1);}

/*品牌策划*/
.main dl.brand{ display:block; font-size:16px;}
.main dl.brand dt{ display:block; font-size:1.3em; padding:7% 0;}
.main dl.brand dt a{ display:block; line-height:1; color:#333; font-size:0.885em; text-transform:uppercase; overflow:hidden;}
.main dl.brand dt a em{ display:block; font-size:2.08em; padding:0 0 0.6em;}
.main dl.brand dt .txt{ line-height:1.85; color:#717171; overflow:hidden; margin:5% 0 0;}
.main dl.brand dd{ display:block; overflow:hidden; padding:4.2% 0;}
.main dl.brand dd i{ display:block; width:40%; float:left; margin:0 18% 0 0;}
.main dl.brand dd:nth-child(even) i{ float:right; margin:0 0 0 18%;}
.main dl.brand dd i img{ display:block; width:100%;}
.main dl.brand dd a{ display:block; line-height:1; color:#666; font-size:0.8em; text-transform:uppercase; overflow:hidden; padding:0.5em 0 0;}
.main dl.brand dd:nth-child(odd) a{ text-align:right;}
.main dl.brand dd a em{ display:block; font-size:2.25em; padding:0 0 0.34em;}
.main dl.brand dd .txt{ line-height:1.68; color:#999; overflow:hidden; margin:5% 0 0;}
.main dl.brand dd:nth-child(odd) .txt{ text-align:right;}

/*视觉创意*/
.main dl.vision{ display:block; overflow:hidden; font-size:20px; margin:6% -16px;}
.main dl.vision dd{ display:block; width:50%; overflow:hidden; float:left;}
.main dl.vision dd .box{ display:flex; background:#0052fc; border-radius:0 0 60px 0; overflow:hidden; margin:16px;}
.main dl.vision dd i{ display:block; background:url(../images/icons/vision.png) center no-repeat; background-size:100% 100%; flex:1;}
.main dl.vision dd:nth-child(even) i{ right:0;}
.main dl.vision dd a{ display:flex; color:#fff; padding:10px; overflow:hidden; flex:9;}
.main dl.vision dd .txt{ overflow:hidden; border:8px solid #fff; border-radius:0 0 52px 0;}
.main dl.vision dd em{ display:block; width:2em; line-height:1.4; font-size:2em; padding:1em 0.45em 2em; background-size:1.85em auto !important; border-right:8px solid #fff; float:left;}
.main dl.vision dd:nth-child(1) em{ background:url(../images/icons/vision01.png) left bottom no-repeat;}
.main dl.vision dd:nth-child(2) em{ background:url(../images/icons/vision02.png) left bottom no-repeat;}
.main dl.vision dd:nth-child(3) em{ background:url(../images/icons/vision03.png) left bottom no-repeat;}
.main dl.vision dd:nth-child(4) em{ background:url(../images/icons/vision04.png) left bottom no-repeat;}
.main dl.vision dd p{ display:block; line-height:1.65; color:#fff; font-weight:300; padding:0 6%; overflow:hidden; margin:5.6em 0 -5.6em; transform:translateY(-50%);}

/*标识导视*/
.main dl.sign{ display:block; font-size:20px; padding:3% 0 2%;}
.main dl.sign dd{ display:block; overflow:hidden; padding:3% 0;}
.main dl.sign dd i{ display:block; width:40%; float:left; margin:0 18% 0 0;}
.main dl.sign dd:nth-child(even) i{ float:right; margin:0 0 0 18%;}
.main dl.sign dd i img{ display:block; width:100%;}
.main dl.sign dd a{ display:block; line-height:1; color:#575757; font-size:1.66em; overflow:hidden; padding:1.2em 0 0;}
.main dl.sign dd:nth-child(odd) a{ text-align:right;}
.main dl.sign dd .txt{ line-height:1.68; color:#999; overflow:hidden; margin:3.6% 0 0;}
.main dl.sign dd:nth-child(odd) .txt{ text-align:right;}

/*新媒体策划*/
.main dl.media{ display:block; font-size:16px; padding:4% 0 1%;}
.main dl.media dd{ display:block; overflow:hidden; padding:1.5% 0;}
.main dl.media dd i{ display:block; width:40%; float:left; margin:0 18% 0 0;}
.main dl.media dd:nth-child(even) i{ float:right; margin:0 0 0 18%;}
.main dl.media dd i img{ display:block; width:100%;}
.main dl.media dd a{ display:block; line-height:1.5; color:#666; font-size:1.25em; overflow:hidden; padding:1.2em 0 0;}
.main dl.media dd:nth-child(odd) a{ text-align:right;}
.main dl.media dd a em{ display:block; text-transform:uppercase; padding:0 0 0.34em;}
.main dl.media dd .txt{ line-height:1.9; color:#999; overflow:hidden; margin:3.5% 0 0;}
.main dl.media dd:nth-child(odd) .txt{ text-align:right;}

/*联系我们*/
dl.contact{ display:block; line-height:1.86; color:#333; font-size:16px; font-weight:300; overflow:hidden; padding:3.5% 0 7%;}
dl.contact dt{ display:block; width:34%; max-width:512px; float:left;}
dl.contact dt em{ display:block;}
dl.contact dd{ display:block; overflow:hidden;}
dl.contact dd h4{ display:block; font-size:2.1em; font-weight:300; padding:2.6% 0 0;}
dl.contact dd p.line{ display:block; border-bottom:2px solid #efefef; margin:3.5% 0; margin-right:9%;}
dl.contact dd a.tel{ display:block; line-height:1.2; color:#333; font-size:2.88em; padding:0.3em 0 0;}

@media only screen and (min-width:1680px){
.header .head,
.footer .foot,
.main{ margin:0 11%; margin:0 86px;}

.header .head,
.header h1.logo a img,
ul.nav{ height:5.72vw;}
ul.nav li a{ line-height:5.72vw; font-size:18px;}
.footer p.nav{ font-size:18px;}
.footer .copyright{ font-size:15px;}
.banner{ margin:5.72vw 0 0;}

.main .attr{ padding:0 10%; padding:0 5%;}
.main .article,
.main .change{ font-size:18px;}

.main ul.caseList{ margin-left:-12.5%; margin-right:-12.5%; margin-left:-5.5%; margin-right:-5.5%;}

.main ul.caseList.main ul.caseList{ margin-left:-10px; margin-right:-10px;}
.main ul.caseList.main ul.caseList li .box{ margin:10px;}
.main ul.caseList.main ul.caseList li a.cate{ font-size:16px;}
.main ul.caseList.main ul.caseList li span{ font-size:20px;}
.main ul.caseList.main ul.caseList li p{ font-size:14px;}

.main dl.brand{ font-size:18px;}
.main dl.brand dd i{ width:50%; max-width:600px;}

.main dl.vision{ font-size:26px; margin:6% -24px;}
.main dl.vision dd .box{ border-radius:0 0 76px 0; margin:24px;}
.main dl.vision dd .txt{ border-radius:0 0 68px 0;}

.main dl.sign{ font-size:24px;}
.main dl.sign dd i{ width:50%; max-width:600px;}

.main dl.media dd i{ width:50%; max-width:600px;}

dl.contact{ font-size:18px;}

}

@media only screen and (max-width:1368px){
.header .head,
.footer .foot,
.main{ width:1200px; margin:0 auto;}
}

@media only screen and (max-width:1240px){
.header .head,
.footer .foot,
.main{ width:auto; margin:0 20px;}
}

@media only screen and (max-width:1024px){
.header{ z-index:99999;}
.header .head,
.footer .foot,
.main{ width:auto; margin:0 16px;}
.header a.menu{ display:block; width:60px; height:96px; background:url(../images/common/head_menu.png) center no-repeat; background-size:50% auto; float:right; transition:all ease 0.3s;}

ul.nav{ height:auto; background:rgba(0,82,254,0.8); float:none; position:fixed; right:0; top:96px; z-index:99999; box-shadow:0 0 6px 0 rgb(0,0,0,0.6); transform:translateX(110%);}
ul.nav.show{ transform:translateX(0%);}
ul.nav li{ float:none;}
ul.nav li a{ line-height:3.5; color:#fff; font-size:20px;}
ul.nav li a:hover,
ul.nav li.on a,
ul.nav li.cur a{ color:#0052fe; background:#fff;}

.header.fixed a.menu{ height:76px;}
.header.fixed ul.nav{ top:76px; height:auto;}
.header.fixed ul.nav li a{ line-height:3.5;}

.footer p.nav{ font-size:15px;}
.footer p.nav a{ margin:0 2%;}

.float{ transform:scale(0.75); transform-origin:right top;}
.float a.qq.pc{ display:none;}
.float a.qq.wap{ display:block;}

.main .attr{ padding:0 10px;}
.main .attr h3.title{ line-height:2; font-size:36px; margin-left:-10px; margin-right:-10px; margin-top:2%;}
.main .attr p.mark{ line-height:2.8; font-size:22px; margin-left:-10px; margin-right:-10px;}
.main .article{ margin:0 -6px;}
.main .change{ padding:2% 0 6%; margin:0 -6px;}

.main dl.brand dt{ font-size:1.0625em;}
.main dl.brand dt .txt{ line-height:2; margin:4% 0 0;}

.main ul.caseList li{ width:50%;}

.main dl.vision{ font-size:16px;}

.main dl.sign{ font-size:16px;}
.main dl.sign dd i{ width:44%; margin:0 10% 0 0;}
.main dl.sign dd:nth-child(even) i{ margin:0 0 0 10%;}
.main dl.sign dd a{ padding-top:0.7em;}

.main dl.media{ font-size:16px;}
.main dl.media dd i{ width:46%; margin:0 6% 0 0;}
.main dl.media dd:nth-child(even) i{ margin:0 0 0 6%;}
.main dl.media dd a{ padding-top:0.6em;}
.main dl.media dd a em{ padding-bottom:0.2em;}
.main dl.media dd .txt{ margin-top:1.5%; font-size:0.875em;}

dl.contact dt{ width:auto; margin-right:6%;}
dl.contact dd h4{ font-size:1.6em;}
dl.contact dd a.tel{ font-size:2.5em;}
}

@media only screen and (max-width:767px){
.header .head,
.footer .foot,
.main{ width:auto; margin:0 12px;}

.header .head,
.header h1.logo a img,
.header a.menu{ height:60px;}
.header a.menu{ width:40px;}
.header ul.nav{ top:60px;}
.header ul.nav li a{ font-size:13.5px;}

.header.fixed .head,
.header.fixed h1.logo a img,
.header.fixed a.menu{ height:52px;}
.header.fixed ul.nav{ top:52px;}

.banner{ margin-top:60px;}
.banner img{ height:50vw; object-fit:cover;}

.footer p.nav{ display:none;}
.footer .copyright{ font-size:12px; margin:4% 0 4%;}

.float{ transform:scale(0.6);}

.main .attr{ padding:0 4px;}
.main .attr h3.title{ font-size:22px; padding-bottom:1%;}
.main .attr p.mark{ line-height:1.6; font-size:13px; padding-top:0.4em; padding-bottom:0.6em; margin-top:1%;}
.main .article{ font-size:14px; margin:0 -4px;}
.main .change{ font-size:14px; padding:0 0 8%; margin:0 -4px;}

.main dl.brand{ font-size:13.5px;}
.main dl.brand dt .txt{ line-height:1.85;}
.main dl.brand dd i{ width:46%; margin:2% 5% 0 0;}
.main dl.brand dd:nth-child(even) i{ margin:2% 0 0 5%;}
.main dl.brand dd .txt{ font-size:0.8em; margin-top:3%;}
.main dl.brand dd i img{ height:30vw; object-fit:contain; object-position:center bottom;}
.main dl.brand dd a em{ font-size:2em;}

.main ul.caseList{ margin-left:-10px; margin-right:-10px;}
.main ul.caseList li{ width:100%;}

.main dl.vision{ font-size:13.5px;}
.main dl.vision dd{ width:100%;}
.main dl.vision dd .box{ margin:8px 16px;}

.main dl.sign{ font-size:13.5px;}
.main dl.sign dd i{ width:100%; margin:0 auto !important; float:none !important;}
.main dl.sign dd a{ padding-top:0.9em; text-align:left !important; overflow:visible;}
.main dl.sign dd:nth-child(odd) .txt{ text-align:left;}

.main dl.media{ font-size:13.5px;}
.main dl.media dd i{ width:100%; margin:0 auto !important; float:none !important;}
.main dl.media dd a{ font-size:0.9em; text-align:left !important; padding-top:1em;}
.main dl.media dd a em{ font-size:1.5em;}
.main dl.media dd .txt{ margin-top:2.5%; text-align:left !important;}

dl.contact{ font-size:14px;}
dl.contact dt{ line-height:1; font-size:0.8em; float:none; overflow:hidden; padding:1em 0 5%; margin:0 0 4%; border-bottom:2px solid #efefef;}
dl.contact dt em{ font-size:1.8em; padding:0.4em 0 0;}
dl.contact dd{ padding-bottom:3%;}
dl.contact dd h4{ font-size:1.6em;}
dl.contact dd a.tel{ font-size:2.5em;}
dl.contact dd p.line{ margin-right:0;}
}





/**/