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; height: 100%; margin: 0 auto; padding: 0; font-size: 14px; color: #333; font-family: Microsoft YaHei, SimSun; background: url('/web/images/bg.png') no-repeat center center fixed; background-size: cover;}
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: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none;}
a:hover{text-decoration: none; color: rgb(216,0,22);}

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

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

@keyframes msgColor{
	40%{color: red; border-color: rgb(216,0,22);}
}

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

.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);}
}

.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;}

.mrow{display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal;}

.video{position: absolute; z-index: -9; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.video.low:after{content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.video video{width: 100%; height: 100%; object-fit: cover; object-position: center center;}

header{height: 4em; line-height: 4em; background-color: rgba(0,0,0,.6); color: rgba(255,255,255,.8); text-align: right; position: fixed; z-index: 3; left: 0; top: 0; right: 0; margin: 0 auto;}
header .logo{height: 1em; line-height: 1em; font-size: 2.4em; color: #fff; padding-right: .1em; position: absolute; left: 1%; top: 0; bottom: 0; margin: auto 0;}
header .logo:before{content: '\e601'; font-family: icon;}
header .tel{height: 1em; line-height: 1em; font-size: 1.4em; color: rgba(255,255,255,.8); vertical-align: middle; display: inline-block; overflow: visible; margin-right: .8em;}
header .tel:before{content: '\e725'; font-family: icon; margin-right: .4em;}
header .wx,
header .msg{font-family: icon; font-size: 1.4em; vertical-align: middle; color: rgba(255,255,255,.8); display: inline-block; margin-right: .8em;}
header .tel:hover:before,
header .wx:hover,
header .msg:hover{animation: gpsBeat .7s infinite; display: inline-block;}
header .msg{animation: msgColor 1.6s infinite; cursor: pointer;}
header nav{height: 2em; line-height: 2em; vertical-align: middle; overflow: hidden; display: inline-block;}
header nav a{display: inline-block; text-align: center; color: rgba(255,255,255,.8); margin-right: 2em; transition: transform .2s ease;}
header nav a:before{content: attr(data-en); display: block; text-transform: uppercase;}
header nav a.on,
header nav a:hover{transform: translateY(-2em);}
header nav a.on:hover{transform: translateY(0);}

#banner{width: 100%; height: 100%;}
#banner:after{content: ''; position: absolute; z-index: 3; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#banner li{width: 0; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: width .6s ease;}
#banner li img{width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; position: relative; z-index: -1;}
#banner li:nth-child(2){left: auto;}
#banner li:nth-child(3){right: auto;}
#banner li.on{width: 100%; z-index: 2;}

.slogan{text-align: center; background-image: linear-gradient(rgba(68,68,68,.2),#ddd 60%);}
.slogan article h2{font-size: 2.6em; padding: 1em 0 0 0; margin: 0;}
.slogan .list{padding-top: .8em; padding-bottom: 3em; position: relative;}
.slogan .list:before{content: ''; width: 1px; height: 3em; background-color: #aaa; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
.slogan .list li{display: inline-block; padding: 1em 2vw;}
.slogan .list li span{width: .6em; height: 1em; line-height: 1em; display: inline-block; font-size: 6em; font-family: Arial; overflow: hidden; position: relative;}
.slogan .list li span:before{content: '0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9'; display: block; transition: transform 1s ease-out .4s;}
.slogan .list li span:after{content: ''; border-top: 1px solid #ddd; background-color: rgba(221,221,221,.6); position: absolute; left: 0; top: 50%; right: 0; bottom: 0; margin: auto;}
.slogan .list li strong{font-weight: normal; display: block; color: #999; font-size: .8em;}
.slogan.on .list li span:nth-child(2):before{transition-duration: 1.4s;}
.slogan.on .list li span:nth-child(3):before{transition-duration: 1.8s;}
.slogan.on .list li span.n0:before{transform: translateY(-10em);}
.slogan.on .list li span.n1:before{transform: translateY(-11em);}
.slogan.on .list li span.n2:before{transform: translateY(-12em);}
.slogan.on .list li span.n3:before{transform: translateY(-13em);}
.slogan.on .list li span.n4:before{transform: translateY(-14em);}
.slogan.on .list li span.n5:before{transform: translateY(-15em);}
.slogan.on .list li span.n6:before{transform: translateY(-16em);}
.slogan.on .list li span.n7:before{transform: translateY(-17em);}
.slogan.on .list li span.n8:before{transform: translateY(-18em);}
.slogan.on .list li span.n9:before{transform: translateY(-19em);}

.abt{display: inline-block; text-transform: uppercase; font-weight: normal; text-align: center; font-size: 2.2em; padding: 1em; border-top: 1px solid rgba(0,0,0,.4); border-bottom: 1px solid rgba(0,0,0,.4); font-family: Arial; margin: 2em auto;}
.inside{padding-top: 4em;}

.case{background-color: rgba(0,0,0,.8); text-align: center;}
.case h2{border-top-color: rgba(255,255,255,.4); border-bottom-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8);}
.case .list{display: grid; grid-template-columns: repeat(4, 1fr);}
.case .list a{aspect-ratio: 1.4; line-height: 2em; color: #fff; position: relative; z-index: 1; background-color: #000; box-shadow: 4px 4px 10px 10px rgba(0, 0, 0, .2);}
.case .list a img{min-width: 100%; height: 100%; position: absolute; z-index: -1; left: -100%; top: -100%; right: -100%; bottom: -100%; margin: auto; transition: transform .2s ease;}
.case .list a strong,
.case .list a small{width: 50%; position: absolute; left: 0; right: 0; margin: 0 auto; color: transparent; transform: scale(.6,.6); transition: all .2s ease;}
.case .list a strong{font-size: 1.2em; bottom: 50%; padding-bottom: 3%; font-weight: normal;}
.case .list a strong:after{content: ''; width: 4em; height: 2px; background-color: transparent; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; transform: scale(.6,.6); transition: all .2s ease;}
.case .list a small{height: 3.6em; line-height: 1.8em; top: 53%;}
.case .list a:before{content: ''; background-color: rgba(0,0,0,.4); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.case .list a:hover:before{background-color: rgba(0,0,0,.6);}
.case .list a:hover img{filter: blur(6px); transform: scale(1.2,1.2);}
.case .list a:hover strong,
.case .list a:hover small{color: rgba(255,255,255,.8); transform: scale(1,1);}
.case .list a:hover strong:after{background-color: rgba(255,255,255,.6); transform: scale(1,1);}

.news{background-color: rgba(68,68,68,.2); text-align: center;}
.news .list{background-color: rgba(0,0,0,.06); padding: 4em 0;}
.news .list li{width: 40%; text-align: left; float: left; margin: .6em 5%;}
.news .list li small{color: rgba(0,0,0,.4); font-style: italic; display: block;}
.news .list li a{max-width: calc(100% - 6em);}

.page{padding: 2em 10%; text-align: center;}
.page a{height: 2em; line-height: 2em; display: inline-block; font-family: Verdana; padding: 0 .7em; margin: 0 1px; border-radius: 3px; color: #fff;}
.page a:hover{background-color: rgba(0,0,0,.1);}
.page a.on{background-color: rgba(216,0,22,.8); color: #fff;}

.case_body{width: auto; color: #fff; padding: 4%; padding-top: calc(4% + 4em); text-align: left; overflow: hidden; position: relative; z-index: 1;}
.case_body:before{content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); 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; border: 0;}
.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: '\e605'; 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(0,0,0,.3); 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 .more{position: fixed; z-index: 2; top: 6em; right: 2em;}
.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';}

.news_body{width: auto; text-align: left; padding: calc(4% + 4em) 4% 0 4%; background-color: rgba(220,220,220,.6);}
.news_body h1{text-align: center;}
.news_body .info{line-height: 1.8em; text-align: center; padding: 1em 4.4%; margin: 1em -4.4%; background-color: rgba(0,0,0,.1);}
.news_body .more{line-height: 1.8em; padding: 1em 4.4%; margin: 0 -4.4%; background-color: rgba(0,0,0,.1);}
.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;}

.category{text-align: center; margin-bottom: 2em; 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: rgba(0,0,0,.2); color: #fff; position: relative;}
.category a.on:after{content: ''; width: 0; height: 0; border-top: 6px solid rgba(0,0,0,.2); 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%;}

.contact{height: 18em; text-align: center; background-color: rgba(0,0,0,.8); color: rgba(255,255,255,.8);}
.contact .info{height: 100%; line-height: 2em; position: relative;}
.contact .info a{font-size: 1.2em; display: inline-block; color: rgba(255,255,255,.8);}
.contact .info a:hover{color: rgb(216,0,22);}
.contact .info a:before{content: attr(data-ico); margin-right: .4em; font-family: icon; color: rgba(255,255,255,.4);}
.contact .info a.tel{height: 1em; line-height: 1em; font-size: 3em; margin: 1em 0; color: orange; font-family: Arial;}
.contact .info a.msg{margin-left: 2em; cursor: pointer;}
.contact .info a:hover:before{animation: gpsBeat .7s infinite; display: inline-block;}

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

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

#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{font-size: 12px; padding-top: 4em;}
	
	header .logo{font-size: 2em;}
	header .tel{width: 1em; overflow: hidden; text-overflow: clip;}
	header nav{display: none;}

	#banner{height: 50%;}

	.slogan{background-color: #666;}
	.slogan video{display: none;}
	.slogan .list li span{font-size: 3em;}

	.case .list a{width: 50%; height: 32vw;}

	.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;}

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