figure{margin: 0;}
figure.image{clear: both; display: table; margin: 1em auto; min-width: 3em; text-align: center;}
figure.image.image-style-side{float: right; margin-left: 1em;}
figure.table table,
figure.table td{border: 1px solid #b3b3b3; border-collapse: collapse;}
figure.table p{margin: 0;}
figure.media video{width: 100%;}

blockquote{border-left: 5px solid #ccc; font-style: italic; margin-left: 0; margin-right: 0; overflow: hidden; padding-left: 1.5em; padding-right: 1.5em;}

span.text-tiny{font-size: .7em;}
span.text-small{font-size: .85em;}
span.text-big{font-size: 1.4em;}
span.text-huge{font-size: 1.8em;}@charset "utf-8";

/*
font-family: Microsoft YaHei, SimSun;
animation: fadeIn 0.4s;
background-image: linear-gradient(#fff,#eee);
*/
html{width: 100%; height: 100%; padding: 0; margin: 0;}
body{min-width: 320px; width: 90%; height: 100%; margin: 0; padding: 0 0 0 10%; font-size: 16px; font-family: Microsoft Yahei, '黑体', SimSun; color: #666;}
img{border: 0;}
form{margin: 0; padding: 0;}
input, select, textarea{font-family: Microsoft Yahei, '黑体', SimSun;}
div, ul, li{margin: 0; padding: 0; display: block; overflow: hidden; backface-visibility: hidden; perspective: 1000px;}
ul, li{list-style-type: none;}
li{text-overflow: ellipsis;}
a{text-decoration: none; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none;}
a:hover{text-decoration: none; color: rgb(0,20,100);}

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

@font-face{
	font-family: 'icon';
	src: url('/web/images/iconfont.woff?t=1750754303') format('woff');
}

@keyframes msgColor{
	40%{color: red; border-color: rgba(255,0,0,.6);}
}

@keyframes gpsBeat{
	40%{transform: translateY(-.2em);}
}

.himg{position: relative; z-index: 1;}
.himg img{min-width: 100%; height: 100%; position: absolute; z-index: -1; left: -200%; top: -200%; right: -200%; bottom: -200%; margin: auto; transition: transform .4s ease;}
.himg:hover img{transform: scale(1.1,1.1);}

.a_row{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.sidebar{width: 10%; height: 100%; background-color: rgba(255,255,255,.9); box-shadow: 2px 0 6px rgba(0,0,0,.2); position: fixed; z-index: 3; left: 0; top: 0;}
.sidebar .logo{width: 4em; line-height: 2em; text-align: center; color: rgb(0,20,100); margin: 2em auto; display: block;}
.sidebar .logo::before{content: '\e600'; height: 1em; line-height: 1em; font-size: 4em; text-indent: 0; font-family: icon; display: block;}
.sidebar .toggle{display: none;}
.sidebar .nav{overflow: visible;}
.sidebar .nav li{line-height: 3em; text-align: center; overflow: visible;}
.sidebar .nav li .a{display: block; text-indent: -1.6em; transition: text-indent .4s ease;}
.sidebar .nav li .a::before{content: attr(data-ico); font-family: icon; margin-right: .6em; color: transparent;}
.sidebar .nav li .sub{width: 100%; padding: 0; margin: 0; background-color: rgba(0,20,100,.8); position: absolute; left: 100%; top: -3em; display: none;}
.sidebar .nav li .sub a{height: 3em; display: block; color: #fff;}
.sidebar .nav li .sub a:hover{background-color: #000;}
.sidebar .nav li.on .a,
.sidebar .nav li:hover .a{background-color: rgba(0,20,100,.1);}
.sidebar .nav li:hover .a{text-indent: 0;}
.sidebar .nav li:hover .a::before{color: rgba(0,0,0,.4);}
.sidebar .nav li:hover .sub{display: block; animation: fadeIn .2s;}
.sidebar footer{text-align: center; font-family: icon; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;}
.sidebar footer a{width: 6.6em; height: 2em; line-height: 2em; margin: .5em auto; border: 2px solid #eee; color: #999; border-radius: 3px; display: block; cursor: pointer;}
.sidebar footer a::before{content: attr(data-ico); margin-right: .4em;}
.sidebar footer a:hover{color: rgb(0,20,100); border-color: #ccc;}
.sidebar footer a.msg{animation: msgColor 1s infinite;}

.title{width: 4em; font-size: 4em; font-weight: normal; text-transform: uppercase; color: orange; text-align: center; font-family: Arial; display: block; margin: 0 auto;}

.category{text-align: center; margin: 2em 0; overflow: visible;}
.category a{height: 2.6em; line-height: 2.6em; padding: 0 1em; margin: 0 1px; display: inline-block; border-radius: .3em; overflow: visible;}
.category a:hover{background-color: rgba(0,0,0,.1);}
.category a.on{background-color: rgb(0,20,100); color: #fff; position: relative;}
.category a.on::after{content: ''; width: 0; height: 0; border-top: 6px solid rgb(0,20,100); border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 0; top: 100%; right: 0; margin: 0 auto;}

.content{line-height: 200%;}
.content img{max-width: 100%;}

.bdmap div{overflow: visible;}
.bdmap img{max-width: none;}
.bdmap .anchorBL{display: none;}

#netmap{height: 36vw; margin: 0 -4.4%; position: relative; z-index: 3;}

.slogan{width: 100%; height: 100%; background-color: #999; position: relative; overflow: hidden;}
.slogan::before{content: ''; background-color: rgba(146,205,244,.2); position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.slogan video{width: 100%; height: 100%; object-fit: cover; object-position: center center; position: absolute; z-index: -2; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.slogan p{height: 1em; line-height: 1em; font-size: 30em; padding: 0; font-family: icon; text-align: center; color: transparent; transition: all .4s ease; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.slogan p.s1{transform: rotate(-90deg) translateX(-80%) translateY(-80%) scale(.4,.4);}
.slogan p.s1.on{transform: rotate(0) translateX(0) translateY(0) scale(1,1);}
.slogan p.s2{transform: rotate(90deg) translateX(80%) translateY(80%) scale(.4,.4);}
.slogan p.s2.on{transform: rotate(0) translateX(0) translateY(0) scale(1,1);}
.slogan p.s3{transform: translateY(-60%) scale(.2,.2);}
.slogan p.s3.on{transform: translateY(0) scale(1,1); transition-duration: .8s; transition-timing-function: ease-out;}
.slogan p.on{color: #fff; text-shadow: 2px 2px 6px rgba(0,0,0,.4);}

.mousemove{width: 2em; height: 3em; border: 2px solid rgba(255,255,255,.8); border-radius: 1em; position: absolute; left: 0; right: 0; bottom: 2em; margin: 0 auto;}
.mousemove::before{content: ''; width: .4em; height: .4em; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top: .5em; right: 0; margin: 0 auto; opacity: 0; animation: mousemove 2s infinite ease-in-out;}

@keyframes mousemove{
	0%{opacity: 0;}
	30%{opacity: 1;}
	60%{opacity: 0; transform: translateY(1.5em);}
}

.service{padding: 2em 0; text-align: center;}
.service a{width: 6em; height: 3em; line-height: 3em; padding-top: 4em; border: 1px solid transparent; display: inline-block; color: #09c; margin: 1em 2%; position: relative; overflow: visible;}
.service a::before{width: 1em; height: 1em; line-height: 1em; font-family: icon; font-size: 4em; position: absolute; left: 0; top: 0; right: 0; margin: auto;}
.service a.website::before{content: '\e828';}
.service a.mobile::before{content: '\e72a';}
.service a.seo::before{content: '\e6ac';}
.service a.app::before{content: '\e605';}
.service a.wechat::before{content: '\e628';}
.service a.weapp::before{content: '\e619';}
.service a:hover{color: rgb(0,20,100);}
.service a:hover::before{animation: gpsBeat .7s infinite;}

.case{display: grid; grid-template-columns: repeat(4, 1fr);}
.case a{height: calc(100vh / 3); color: #fff; box-shadow: -2px 2px 6px rgba(0,0,0,.2) inset; text-align: center; position: relative;}
.case a strong{height: 1em; line-height: 1em; font-weight: normal; font-size: 1.6em; position: absolute; left: 1em; right: 1em; bottom: 50%; margin: 0 auto .6em auto;}
.case a small{height: 1em; line-height: 1em; font-size: 1em; position: absolute; left: 1em; top: 50%; right: 1em; margin: 0 auto;}
.case a small::before{content: ''; width: 4em; height: 2px; background-color: transparent; display: block; margin: 0 auto 1em auto;}
.case a strong,
.case a small{transform: scale(.4,.4); color: transparent; transition: all .2s ease;}
.case a img{width: 60%; opacity: .9; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: all .2s ease;}
.case a:hover img{transform: translateY(-40%) scale(1.2,1.2); opacity: 0;}
.case a:hover strong,
.case a:hover small{transform: scale(1,1); color: #fff;}
.case a:hover small::before{background-color: rgba(255,255,255,.4);}

.news{padding: 4em 4%; background-color: #fff; position: relative; background: url('/web/images/bg_work.jpg') fixed; background-size: cover;}
.news .list{margin-top: 2em;}
.news .list li{width: 42%; height: 2em; line-height: 2em; color: rgba(0,0,0,.6); margin: .5em 4%; display: inline-block; white-space: nowrap;}
.news .list li small{color: #999; margin-right: 1em; border: 1px solid #ccc; border-radius: 3px; padding: .2em .4em;}

.page{padding: 2em 10%; text-align: center; background: url('/web/images/bg_work.jpg') fixed; background-size: cover;}
.page a{height: 2em; line-height: 2em; display: inline-block; font-family: Verdana; padding: 0 .7em; margin: 0 1px; border-radius: 3px;}
.page a:hover{background-color: rgba(0,0,0,.1);}
.page a.on{background-color: rgba(0,20,100,.8); color: #fff;}

.service.nav{background-color: rgba(255,255,255,.95); padding: 0; white-space: nowrap; position: fixed; z-index: 2; left: 10%; top: 0; right: 0; margin: 0 auto;}
.service.nav a{width: calc(100% / 6); padding: 0; margin: 0;}
.service.nav a::before{font-size: 1em; position: relative; margin-right: .6em;}
.service.nav a:hover{background-color: rgba(00,20,100,.1);}
.service.nav a.on{color: #fff;}
.service.nav a.website.on{background-color: rgb(237,88,0);}
.service.nav a.mobile.on{background-color: rgb(76,111,178);}
.service.nav a.seo.on{background-color: rgb(220,37,44);}
.service.nav a.app.on{background-color: rgb(48,140,180);}
.service.nav a.wechat.on{background-color: rgb(65,164,32);}
.service.nav a.weapp.on{background-color: rgb(37,39,47);}

.website{width: 100%; height: 100%; display: flex; align-items: center; color: #fff; background-attachment: fixed; background-size: cover;}
.website .box{display: inline-block; margin: 0 auto;}
.website h2,
.website h3,
.website h4{line-height: 1.6em; font-weight: normal; text-align: center; padding: .5em 0; margin: 0; display: block; transform: translateY(120%); opacity: 0;}
.website h2{font-size: 4em; font-family: Arial; text-transform: uppercase; padding-bottom: 0;}
.website h3{font-size: 2em; color: orange;}
.website h4{font-size: 1.6em;}
.website.view{background-image: url('/web/images/bg_website_view.jpg');}
.website.code{background-image: url('/web/images/bg_website_code.jpg');}
.website.design{background-image: url('/web/images/bg_website_design.jpg');}
.website.seo{background-image: url('/web/images/bg_website_seo.jpg');}
.website.cloud{background-image: url('/web/images/bg_website_cloud.jpg');}
.website.mobile{background-image: url('/web/images/bg_website_mobile.jpg');}
.website.app{background-image: url('/web/images/bg_website_app.jpg');}
.website.wechat{background-image: url('/web/images/bg_website_wechat.jpg');}
.website .box.on h2,
.website .box.on h2,
.website .box.on h3,
.website .box.on h4{transform: translateY(0); opacity: 1; transition: all 1s ease-out;}
.website .box.on h3{transition-duration: 1.5s;}
.website .box.on h4{transition-duration: 2s;}

.case_body{color: #fff; padding: 4%; overflow: hidden; position: relative; z-index: 1;}
.case_body::before{content: ''; width: 100%; height: 100%; background-color: rgba(255,255,255,.2); transform: skewX(-45deg); position: absolute; z-index: -1; left: 0; bottom: 0;}
.case_body h1,
.case_body h2{padding: 0; margin: 0; font-weight: normal;}
.case_body h1{font-size: 2em;}
.case_body h2{font-size: 1em;}
.case_body h2::before{content: ''; width: 4em; height: 2px; background-color: rgba(255,255,255,.6); display: block; margin: 1em 0;}
.case_body .preview{position: relative;}
.case_body .preview .box{text-align: center; display: inline-block;}
.case_body .preview .box.max{font-size: 1.2em;}
.case_body .preview .box::before{width: 1em; height: 1em; font-family: icon; color: rgba(255,255,255,.4); position: relative; z-index: -1;}
.case_body .preview .box a{line-height: 0; overflow-y: auto; position: absolute; left: 0; right: 0; margin: 0 auto;}
.case_body .preview .box a::-webkit-scrollbar{width: 0;}
.case_body .preview .box a::-webkit-scrollbar-thumb{background-color: transparent;}
.case_body .preview .box a::-webkit-scrollbar-thumb:hover{background-color: transparent;}
.case_body .preview .box a img{width: 100%; float: left;}
.case_body .preview .box.pc a{width: 51.6em; height: 29em; top: 4.9em; right: .16em;}
.case_body .preview .box.pc::before{content: '\e606'; font-size: 46em;}
.case_body .preview .box.mobile{position: absolute; left: 52em; bottom: 4em;}
.case_body .preview .box.mobile::before{content: '\e604'; font-size: 30em;}
.case_body .preview .box.mobile a{width: 12em; height: 21.3em; top: 5.6em; right: .02em;}
.case_body .intro{line-height: 2em; background-color: rgba(255,255,255,.2); padding: 2em 4.4%; margin: 2em -4.4%;}
.case_body .intro p{text-indent: 2em;}
.case_body .intro p.keywords a{text-decoration: underline; color: #fff; margin-right: 1em;}
.case_body .color{line-height: 0; margin-top: 3em; text-align: right;}
.case_body .color .box{width: 6em; height: 6em; line-height: 6em; text-align: center; text-transform: uppercase; display: inline-block; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); position: relative; margin-left: 1em;}
.case_body .seo{overflow: visible; position: relative; margin-top: -6em;}
.case_body .seo p{line-height: 0; display: inline-block; background-color: rgba(0,0,0,.8); box-shadow: 0 0 6px rgba(0,0,0,.6); padding: 0; margin: 0; position: absolute; left: 0; top: 0;}
.case_body .seo p::before{height: 2em; line-height: 2em; font-family: icon; background-color: rgba(255,255,255,.9); font-size: 1.4em; padding: 0 .6em; border-radius: 3px; box-shadow: 2px 2px 6px rgba(0,0,0,.6); position: absolute; z-index: 2; left: -1em; bottom: 1em;}
.case_body .seo p img{opacity: .9;}
.case_body .seo p.sogou{position: relative; z-index: 1; margin-right: 24em; margin-bottom: 12em;}
.case_body .seo p.sogou::before{content: '\e629'attr(data-name); background-color: rgba(232,61,15,.9);}
.case_body .seo p.so{left: 12em; top: 6em; z-index: 2;}
.case_body .seo p.so::before{content: '\e607'attr(data-name); background-color: rgba(237,164,0,.9);}
.case_body .seo p.baidu{left: 24em; top: 12em; z-index: 3;}
.case_body .seo p.baidu::before{content: '\e6b6'attr(data-name); background-color: rgba(70,59,221,.9);}
.case_body .more{position: fixed; z-index: 2; top: 2vw; right: 2vw;}
.case_body .more a{width: 2em; height: 2em; border: 1px solid #fff; border-radius: 50%; display: inline-block; margin-left: 1em; text-indent: 120%; position: relative;}
.case_body .more a::before{width: 1em; height: 1em; line-height: 1em; color: #fff; font-family: icon; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; text-indent: 0;}
.case_body .more a.prev::before{content: '\e697';}
.case_body .more a.next{text-align: right;}
.case_body .more a.next::before{content: '\e6a7';}
.case_body .more a.list::before{content: '\e699';}

.about_body{padding: 4%; border-bottom: 1px solid #eee;}
.about_body .category{margin-top: 0;}

.news_body{padding: 4%; padding-bottom: 0;}
.news_body h1{text-align: center;}
.news_body .info{text-align: center; padding: 1em 4.4%; margin: 1em -4.4%; background-color: #eee;}
.news_body .more{padding: 1em 4.4%; margin: 1em -4.4%; background-color: #eee;}
.news_body .more a.prev::before{content: '上一篇：';}
.news_body .more a.next{float: right;}
.news_body .more a.next::before{content: '下一篇：';}
.news_body .more a.list::before{display: none;}

.contact{position: relative; padding: 2em 20%;}
.contact::before{content: ''; background-color: #999; position: absolute; z-index: -1; left: 0; top: 60%; right: 0; bottom: 0; margin: auto;}
.contact .tel{display: block; text-align: center; font-size: 4em; font-family: Arial; color: orange; margin-bottom: .5em;}
.contact .tel::before{content: attr(data-ico); margin-right: .4em; font-family: icon; font-size: .9em; color: #ccc;}
.contact .adds{display: block; text-align: center; white-space: normal; font-size: 1.2em; color: #fff; margin-top: 1.6em;}
.contact .adds::before{content: attr(data-ico); margin-right: .4em; font-family: icon; color: orange;}

.footer{line-height: 2em; text-align: center; font-size: .8em; padding: 2em 4%;}
.footer p{padding: 0; margin: 0 auto;}
.footer p.a_row{max-width: 60%;}

#form_consult{width: 240px; height: 220px; line-height: 200%; background-color: #ededed; border-radius: 3px; padding: 10px; color: #666; position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#form_consult .close{width: 20px; height: 20px; line-height: 20px; font-size: 20px; font-family: icon; text-align: center; color: #000; text-align: center; border-radius: 50%; background-color: #fff; border: 1px solid #fff; position: absolute; right: -10px; top: -10px; z-index: 3; cursor: pointer;}
#form_consult p{min-height: 20px; border: 1px solid #d5d5d5; background-color: #fff; padding: 5px; margin: 0 0 5px 0; position: relative; z-index: 1;}
#form_consult p::before{content: attr(data-ico); width: 20px; height: 20px; line-height: 20px; font-size: 14px; text-align: center; font-family: icon; color: #aaa; position: absolute; z-index: -1; left: 5px; top: 5px;}
#form_consult p input,
#form_consult p textarea{width: 100%; height: 20px; line-height: 20px; font-size: 12px; border: 0; outline: 0; padding: 0; margin: 0; background-color: transparent; display: block; text-indent: 24px;}
#form_consult p textarea{height: 60px; text-indent: 0;}
#form_consult p.sbt{height: 22px; line-height: 22px; background-color: #00aef3; border-radius: 3px; border: 0; cursor: pointer; text-align: center; color: #fff; font-size: 16px; position: relative;}
#form_consult p.sbt input{width: 100%; height: 100%; padding: 0; border: 0; background-color: transparent; cursor: pointer; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}@media screen and (max-width: 1600px){
	body{font-size: 14px;}
}

@media screen and (max-width: 600px){
	body{width: 100%; padding-left: 0;}
	.sidebar{width: 8em; transform: translateX(-100%); transition: transform .2s ease;}
	.sidebar:before{content: ''; width: 100vw; height: 3.6em; background-image: linear-gradient(rgba(154,204,244,.6),rgba(255,255,255,.4)); position: absolute; z-index: -1; left: 100%; top: 0;}
	.sidebar .logo.on{width: auto; font-size: 1.6em; margin: 0; position: absolute; left: 100%; top: 0; transform: translateX(.4em) translateY(.1em);}
	.sidebar .logo.on:before{display: inline-block; vertical-align: middle; font-size: 1.2em; margin-right: .4em;}
	.sidebar .toggle{width: 1em; height: 1em; line-height: 1em; text-align: center; border-radius: 50%; color: rgb(0,20,100); font-size: 2.6em; font-family: icon; display: block; position: absolute; left: 100%; top: 0; transform: translateX(calc(100vw - 1.4em)) translateY(.2em); transition: transform .2s ease;}
	.sidebar .toggle:before{content: attr(data-ico);}
	.sidebar.on{transform: translateX(0);}
	.sidebar.on:before{display: none;}
	.sidebar.on .toggle{background-color: rgba(255,255,255,.9); color: rgb(0,20,100); padding: .1em; box-shadow: 2px 2px 4px rgba(0,0,0,.2); border-radius: 0 0 5px 0; transform: translateX(0) translateY(0);}
	.sidebar.on .toggle:before{content: '\e69a';}

	.slogan{background-image: url(//data.ntao.cn/01netcn/bg_service.jpg); background-size: cover;}
	.slogan video{display: none;}
	.slogan p{font-size: 20em;}
	.slogan p.on{color: #09c; text-shadow: none;}

	.case a{width: 50%; height: 36vw;}
	
	.news .list li{width: 92%;}

	.contact{padding: 2em 4%;}
	.contact .map .bdmap{height: 40vw;}
	.contact .tel{font-size: 2.4em;}

	.service.nav{display: none;}

	.website h2{font-size: 2em;}
	.website h3{font-size: 1.6em;}
	.website h4{font-size: 1em;}

	.case_body{padding-top: 4em;}
	.case_body .more{top: 4.6em;}
	.case_body .preview .box{font-size: .28em;}
	.case_body .preview .box.max{font-size: .36em;}
	.case_body .intro{line-height: 1.6em; font-size: .8em; padding: 1em 4.4%;}
	.case_body .color{font-size: .8em;}
	.case_body .seo{font-size: .4em; margin-top: 6em;}
	.case_body .seo p img{width: 50vw;}

	.news_body{padding-top: 4em;}
	.news_body .more a{display: block; float: none; white-space: normal; margin: .2em 0;}

	.about_body{padding-top: 4em;}

	#netmap{height: 100vw;}
}