@charset "utf-8";

* {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

body {
	min-width: 86em;
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
	color: #666;
	background-color: #fff;
	font-family: Microsoft Yahei, SimSun
}

img {
	border: 0
}

form,
p {
	margin: 0;
	padding: 0
}

input,
select,
textarea {
	font-size: 1em;
	font-family: Microsoft Yahei, SimSun;
	margin: 0;
	padding: 0
}

input::-ms-clear,
input::-ms-reveal {
	display: none
}

section,
div,
ul,
li,
p,
h1,
h2,
h3 {
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden
}

ul,
li {
	list-style-type: none
}

li {
	text-overflow: ellipsis
}

a {
	text-decoration: none;
	color: #333;
	outline: 0
}

a:hover {
	text-decoration: none;
	color: #333
}

a,
.arow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

@media screen and (max-width:640px) {
	::-webkit-scrollbar {
		width: 0;
		height: 0
	}

	::-webkit-scrollbar-thumb,
	::-webkit-scrollbar-thumb:hover {
		background-color: transparent
	}
}

@keyframes fade-in {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@font-face {
	font-family: 'icon';
	src: url('/skin/fonts/jsvnuih0ak.woff') format('woff')
}

.himg {
	position: relative;
	z-index: 1
}

.himg img {
	width: 100%;
	/*min-width: 100%;*/
	/*height: 90%;*/
	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)
}

.himgs {
	position: relative;
	z-index: 1
}

.himgs img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto;
	transition: transform .6s ease
}

.himgs:hover img {
	transform: scale(1.1, 1.1)
}

.himgss {
	position: relative;
	z-index: 1
}

.himgss img {
	min-width: 100%;
	/*height: 100%;*/
	position: absolute;
	z-index: -1;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto;
	transition: transform .6s ease
}

.trtions {
	transition: transform .3s, opacity .3s, background .3s, visibility .3s;
	transition-timing-function: ease-out
}

.trtiont {
	transition: transform .2s, opacity .2s, background .2s;
	transition-timing-function: ease-out
}

.trtion {
	transition: transform .6s;
	/*transition: transform .6s, opacity .6s, background .6s, visibility .6s;*/
	transition-timing-function: ease-out
}

.trtion-effect {
	transition: transform 1s, opacity 1s, background 1s;
	transition-timing-function: ease-in-out
}

.trm {
	transition: transform .6s, opacity .6s, background .6s;
	transition-timing-function: ease-in-out
}

.trm3 {
	transition: transform .6s, opacity .6s, background .6s;
	transition-timing-function: ease-in-out
}

header {
	width: 18.75em;
	min-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	background: rgba(62, 58, 57, .2)
}

header .logo {
	height: 7.25em;
	position: relative;
	background: url(/skin/images/logo.png) no-repeat center center;
	background-size: contain;
	max-width: 10em;
	margin: 0 auto;
	display: block
}

header .logo2 {
	height: 4.25em;
	position: relative;
	max-width: 11em;
	margin: 0 auto;
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center
}

header .list li {
	margin-bottom: 1em;
	position: relative;
	text-align: center
}

header .list li a {
	color: #fff;
	display: inline-block
}

header .list li:after {
	content: '';
	width: 2em;
	height: 3px;
	display: block;
	background: #c50907;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: .6s;
	transition-timing-function: ease-out
}

header .list li:hover a {
	color: #c50907;
	transform: translateX(1.5em)
}

header .list li:hover:after {
	width: 3.5em;
	opacity: 1
}

header .list li.on:after {
	width: 3.5em;
	opacity: 1
}

header .list li.on a {
	color: #c50907
}

header.on {
	background: rgba(255, 255, 255, 1);
	box-shadow: .7em 0 .3em rgba(176, 176, 176, .1)
}

header.on .logo {
	background: url(/skin/images/logoon.png) no-repeat center center;
	background-size: contain
}

header.on .logo2 {
	color: #000
}

header.on .list li a {
	color: #333
}

header .nav-web {
	width: 3em;
	height: 3em;
	position: absolute;
	left: 2em;
	top: 0.5em;
	text-align: center;
	line-height: 3em;
	font-family: icon;
	color: #fff;
	display: none
}

header .nav-web:after {
	content: '\e708';
	font-size: 2em
}

footer {
	max-width: calc(100% - 18.75em);
	margin-left: 18.75em;
	padding: 2em 0;
	text-align: center;
	background: #222;
	color: #fff;
	position: relative;
	z-index: 1;
}

footer2 {
	max-width: calc(100% - 18.75em);
	margin-left: 18.75em;
	padding: 0em 0;
	text-align: center;
	background: #ccc;
	color: #b5b5b6;
	position: relative;
	z-index: 2;
	height: 40px;
}

footer2 p {
	text-align: center;
	background: #ccc;
	color: #b5b5b6;
	height: 40px;
	width: 100%
}

footer2 a {
	color: #b5b5b6
}

footer a {
	color: #fff
}

.in-banner {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 1
}

.in-banner .list {
	height: 100%;
	white-space: nowrap
}

.in-banner .list li {
	width: 100%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.in-banner .list li img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto;
	transform: scale(1.1, 1.1);
	transition: transform 8s ease-out
}

.in-banner .list li .text {
	max-height: calc(100% - 18.75em);
	white-space: normal;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 18.75em;
	right: 0;
	margin: 0 auto;
	color: #fff;
	line-height: 4em;
	transform: translateY(1em);
	opacity: 0
}

.in-banner .list li .text b {
	font-size: 3em
}

.in-banner .list li .text p {
	font-size: 2em
}

.in-banner .list li.on .text {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 1s
}

.in-banner .list li.on img {
	transform: scale(1, 1)
}

.banner-both li.on {
	border: 2px solid #fff
}

.banner-both {
	max-height: calc(100% - 18.75em);
	position: absolute;
	bottom: 3em;
	z-index: 4;
	left: 18.75em;
	right: 0;
	text-align: center
}

.banner-both li {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid transparent;
	position: relative;
	cursor: pointer;
	margin: 0 .25em
}

.banner-both li:hover {
	border: 2px solid #fff
}

.banner-both li:after {
	content: '';
	width: .25em;
	height: .25em;
	display: block;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto
}

.in-all-box,
.about-all-box,
.inside-box {
	max-width: calc(100% - 18.75em);
	margin-left: 18.75em;
	position: relative
}

.in-all-box {
	margin-top: 100vh;
	z-index: 2;
	background: #fff
}

.inside-center .article_list,
.inside-cases-box {
	transform: translateX(25%);
	opacity: 0
}

.inside-center.on .article_list,
.inside-cases-box.on {
	transform: translateX(0);
	opacity: 1
}

.in-about {
	padding: 6em 0;
	background: #fff;
	text-align: center
}

.in-about .title,
.in-about b {
	font-size: 2.5em;
	color: #3e3a39;
	line-height: 1.5em;
	display: block
}

.in-about .list {
	margin: 0 auto;
	margin-top: 4em;
	max-width: 80%
}

.in-about .list li {
	display: inline-block;
	width: calc(100%/4)
}

.in-about .list li p {
	color: #898989;
	margin-top: 1em
}

.in-about .list li:first-child span.number-symbol {
	display: none
}

.in-about .title {
	transform: translateX(-5em);
	opacity: 0
}

.in-about b {
	transform: translateX(5em);
	opacity: 0
}

.in-about .list {
	transform: translateY(5em);
	opacity: 0
}

.in-about.on .title {
	transform: translateX(0);
	opacity: 1
}

.in-about.on b {
	transform: translateX(0);
	opacity: 1
}

.in-about.on .list {
	transform: translateY(0);
	opacity: 1
}

.number-roll span {
	width: .6em;
	height: 1em;
	line-height: 1em;
	display: inline-block;
	font-size: 4em;
	font-family: Arial;
	overflow: hidden;
	position: relative;
	color: #404040;
	font-weight: 500
}

.number-roll span:after {
	content: '+';
	display: inline-block;
	vertical-align: top
}

.number-roll 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 2s ease-out .4s
}

.number-roll.on span.n1:before {
	transform: translateY(-10em)
}

.number-roll.on span.n2:before {
	transform: translateY(-12em)
}

.number-roll.on span.n3:before {
	transform: translateY(-12em)
}

.number-roll.on span.n4:before {
	transform: translateY(-13em)
}

.number-roll.on span.n5:before {
	transform: translateY(-14em)
}

.number-roll.on span.n6:before {
	transform: translateY(-15em)
}

.number-roll.on span.n7:before {
	transform: translateY(-16em)
}

.number-roll.on span.n8:before {
	transform: translateY(-17em)
}

.number-roll.on span.n9:before {
	transform: translateY(-10em)
}

.number-roll.on span.n10:before {
	transform: translateY(-19em)
}

.number-roll span.symbol {
	width: .3em
}

.number-roll.on span.symbol:before {
	content: ','
}

.number-roll.on span.number-symbol {
	font-size: 1.5em;
	vertical-align: top;
	margin-left: .2em
}

.number-roll.on span.number-symbol:before {
	content: '+';
	vertical-align: top
}

.in-product {
	background: #fff
}

.in-product li {
	width: calc(100%/3);
	height: 36vh;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.in-product-index.in-product li {
	width: calc(100%/3 - 2em);
	margin: 0 1em 2em 1em
}

.in-product.inside-product-list li {
	height: 28vh
}

.in-product li span:after {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(62, 58, 57, .3);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	transition: .6s;
	transition-timing-function: ease-out
}

.in-product li span {
	width: 100%;
	height: 100%;
	display: block
}

/*.in-product li .text {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	/ *background: rgba(25, 29, 32, .5); * /
	background-color: #000000;
	color: #fff;
	text-align: center;
	transform: scale(1.1, 1.1);
	opacity: 0
}*/

.in-product li .text p {
	height: auto;
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	left: 5%;
	right: 5%;
	width: 90%
}

.in-product li .text p b {
	font-size: 1.5em;
	font-weight: normal;
	display: block
}

.in-product li .text p em {
	font-style: normal;
	/*font-size: 1.2em;*/
	font-size: 14px;
	height: 90px;
	/* width: 430px; */
	width: 100%;
	white-space: normal;
	/* display: inline-block; */
	word-wrap: break-word;


	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.in-product li .text p em:before {
	content: '';
	width: 60%;
	height: 2px;
	display: block;
	background: #fff;
	margin: 1em auto
}

.in-product li:hover span:after {
	background: rgba(62, 58, 57, 0)
}

/*.in-product li:hover .text {
	transform: scale(1, 1);
	opacity: 1
}*/

.select-center span.back {
	display: inline-block;
	margin: 0 1.5em;
	border: 1px solid #c9c9c9;
	position: relative;
	font-family: icon;
	border-radius: .25em;
	transition: border .3s;
	transition-timing-function: ease-out;
	float: right
}

.select-center span.back:hover {
	border: 1px solid #c50907
}

.select-center span.back:before {
	content: '\e6b0';
	font-size: 1.5em;
	display: block;
	position: absolute;
	left: .5em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	color: #3e3a39
}

.select-center span.back:nth-child(2):before {
	content: '\e62b'
}

.select-center span.back:nth-child(3):before {
	content: '\e604'
}

.select-center span.back:nth-child(4):before {
	content: '\e666'
}

.select-center span.back:nth-child(5):before {
	content: '\e9fa'
}

.select-center span.back:after {
	content: '\e601';
	font-size: 1.5em;
	display: block;
	position: absolute;
	right: .25em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1
}

.select-center select {
	cursor: pointer;
	z-index: 2;
	width: auto;
	padding: 1em 3em;
	padding-right: 2em;
	font-family: icon;
	display: inline-block;
	vertical-align: middle;
	background: transparent;
	position: relative;
	background-image: none;
	border: 0;
	outline: 0;
	color: #898989;
	appearance: none;
	-webkit-appearance: none
}

.select-center select option {
	padding: 1em
}

.zero {
	width: 100%;
	height: 50vh;
	background: #8e8e8e;
	line-height: 50vh;
	text-align: center
}

.zero:after {
	content: '产品正在努力生产中';
	color: #fff;
	font-size: 4em
}

.in-product li {
	transform: translate3d(-5em, -5em, -5em);
	opacity: 0;
	box-shadow: 0 0 1em rgba(51, 51, 51, .5)
}

.in-product.on li {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	box-shadow: 0 0 1em rgba(51, 51, 51, 0)
}

.in-product.on li:nth-child(2) {
	transition-delay: .2s
}

.in-product.on li:nth-child(3) {
	transition-delay: .4s
}

.in-product.on li:nth-child(4) {
	transition-delay: .6s
}

.in-product.on li:nth-child(5) {
	transition-delay: .8s
}

.in-product.on li:nth-child(6) {
	transition-delay: 1s
}

.in-product.on li:nth-child(7) {
	transition-delay: 1.2s
}

.in-product.on li:nth-child(8) {
	transition-delay: 1.4s
}

.in-product.on li:nth-child(9) {
	transition-delay: 1.6s
}

.in-cases {
	padding: 6em 0;
	background: #fff
}

.in-cases .in-cases-visible {
	width: calc(100% - 10em);
	height: 40em;
	overflow: visible;
	margin: 0 auto;
	position: relative
}

.in-cases .in-cases-visible .in-cases-back-visible {
	width: 42em;
	height: 100%;
	position: relative;
	overflow: visible;
	position: absolute;
	left: 0;
	top: 0
}

.in-cases .in-cases-visible .in-cases-back-visible:after {
	content: '';
	width: calc(100% + 10em);
	height: 22.5em;
	display: block;
	position: absolute;
	left: -5em;
	bottom: 3.5em;
	background: url(/skin/images/in-cases-back.png) no-repeat center center
}

.in-cases .in-cases-visible .in-cases-img-hiden {
	width: 100%;
	height: 100%
}

.in-cases .in-cases-visible .in-cases-img-hiden .list {
	white-space: nowrap;
	height: 100%
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li {
	width: 100%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li .himg {
	width: 42em;
	height: calc(100% - 1em);
	display: block;
	overflow: hidden;
	box-shadow: 0 0 1em rgba(0, 0, 0, .2);
	margin: .5em .5em .5em 0
}

/*.in-cases .in-cases-visible .in-cases-img-hiden .list li .text {
	width: 35em;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%)
}*/

/*.in-cases .in-cases-visible .in-cases-img-hiden .list li .text p {
	font-size: 2.5em;
	color: #3e3a39
}*/

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text span {
	display: block;
	line-height: 200%;
	font-size: 1.25em;
	color: #898989;
	margin-top: 1em
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text .more {
	width: 12em;
	height: 2.4em;
	line-height: 2.4em;
	text-align: center;
	display: block;
	border: 2px solid #b5b5b6;
	margin-top: 2em;
	font-family: icon;
	color: #b5b5b6
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text .more:after {
	content: 'MORE \e603'
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text .more:hover {
	background: #918d87;
	color: #fff;
	border: 2px solid #918d87
}

.cases-title {
	padding: 2em 0;
	border-bottom: 1px solid #dcdcdc;
	max-width: 35em;
	width: 100%;
	position: absolute;
	right: 0;
	top: 0
}

.cases-title p {
	font-size: 1.5em;
	color: #3e3a39
}

.cases-title b {
	color: #b5b5b6;
	font-weight: normal;
	display: block;
	margin-top: .5em
}

.cases-title.web {
	display: none
}

.in-cases .in-cases-visible .page-click {
	width: 9.4em;
	height: 3.4em;
	line-height: 3.4em;
	text-align: center;
	position: absolute;
	right: 0;
	bottom: 0
}

.in-cases .in-cases-visible .page-click .in-cases-click {
	width: calc(100%/2);
	float: left;
	height: 100%;
	font-family: icon;
	cursor: pointer
}

.in-cases .in-cases-visible .page-click .in-cases-click:after {
	content: '\e764';
	font-size: 1.25em
}

.in-cases .in-cases-visible .page-click .in-cases-click.right:after {
	content: '\e603'
}

.in-cases .in-cases-visible .page-click .in-cases-click:hover {
	background: #8d8d8d;
	color: #fff
}

.in-cases .in-cases-img-hiden {
	transform: translateX(25%);
	opacity: 0
}

.in-cases.on .in-cases-img-hiden {
	transform: translateX(0);
	opacity: 1
}

.in-news {
	width: 100%;
	height: auto
}

.in-news .news-title {
	text-indent: 2em
}

.in-news .news-title p {
	font-size: 1.5em;
	color: #3e3a39
}

.in-news .news-title b {
	color: #b5b5b6;
	font-weight: normal;
	display: block;
	margin-top: .5em
}

.in-news .news-title b a {
	float: right;
	display: inline-block;
	padding-right: 2em
}

.news-list {
	margin: 2em 0
}

.news-list li {
	width: calc(100%/4);
	display: inline-block;
	vertical-align: top;
	position: relative;
	overflow: visible
}

.news-list li a {
	width: auto;
	height: auto;
	display: block
}

.news-list li span {
	width: 100%;
	display: block;
	overflow: hidden
}

.news-list li:hover {
	background: #eee
}

.news-list li p {
	padding: 1em 2em
}

.news-list li p b {
	font-weight: normal
}

.news-list li:nth-child(1) strong,
.news-list li:nth-child(2) strong,
.news-list li:nth-child(3) strong,
.news-list li:nth-child(4) strong {
	width: 100%;
	height: 9em;
	display: block;
	text-indent: 3em;
	overflow: hidden;
	font-family: Arial
}

.news-list li:nth-child(1) strong:after,
.news-list li:nth-child(2) strong:after,
.news-list li:nth-child(3) strong:after,
.news-list li:nth-child(4) strong:after {
	content: attr(data-tmaY);
	display: block;
	color: #898989;
	font-family: Arial
}

.news-list li:nth-child(1) strong:before,
.news-list li:nth-child(2) strong:before,
.news-list li:nth-child(3) strong:before,
.news-list li:nth-child(4) strong:before {
	content: attr(data-tmaD);
	display: block;
	font-size: 3em;
	color: #898989;
	margin-top: .7em
}

.news-list li:nth-child(1) span,
.news-list li:nth-child(2) span,
.news-list li:nth-child(3) span,
.news-list li:nth-child(4) span {
	height: 25vh
}

.news-list li:nth-child(1) p,
.news-list li:nth-child(2) p,
.news-list li:nth-child(3) p,
.news-list li:nth-child(4) p {
	padding: 2em
}

.news-list li:nth-child(1) p b,
.news-list li:nth-child(2) p b,
.news-list li:nth-child(3) p b,
.news-list li:nth-child(4) p b {
	font-size: 1.5em;
	color: #333
}

.in-news {
	transform: translateX(-20%);
	opacity: 0
}

.in-news.on {
	transform: translateX(0);
	opacity: 1
}

.in-barnd {
	background: url(/skin/images/db.jpg) no-repeat center center;
	background-size: cover;
	padding: 6em 0;
	text-align: center
}

.in-barnd .title,
.in-barnd b {
	font-size: 2em;
	color: #3e3a39;
	line-height: 1.5em
}

.in-barnd b {
	font-weight: normal;
	color: #898989;
	display: block
}

.in-barnd .text {
	width: 100%;
	max-width: 60%;
	margin: 2em auto;
	line-height: 200%;
	color: #333
}

.in-barnd .more {
	width: 12em;
	height: 2.4em;
	line-height: 2.4em;
	text-align: center;
	display: block;
	border: 2px solid #b5b5b6;
	margin: 0 auto;
	font-family: icon;
	color: #b5b5b6
}

.in-barnd .more:after {
	content: 'MORE \e603'
}

.in-barnd .more:hover {
	background: #918d87;
	color: #fff;
	border: 2px solid #918d87
}

.in-barnd .list {
	margin: 0 auto;
	margin-top: 3em;
	max-width: 70%
}

.in-barnd .list li {
	width: calc(100%/3);
	display: inline-block;
	vertical-align: top;
	text-align: left
}

.in-barnd .list li span {
	width: 5.25em;
	height: 5.25em;
	border-radius: 50%;
	border: 2px solid #898989;
	display: block;
	float: left;
	margin-right: 1.5em;
	font-family: icon;
	text-align: center;
	line-height: 5.25em;
	color: #898989
}

.in-barnd .list li span:after {
	content: attr(data-icon);
	font-size: 2.8em
}

.in-barnd .list li:last-child span:after {
	font-size: 3em
}

.in-barnd .list li p {
	color: #222;
	font-size: 1.25em;
	line-height: 200%;
	margin-top: .5em
}

.in-barnd .list li em {
	font-style: normal;
	font-size: .875em;
	color: #898989
}

.in-barnd .list li:hover span {
	background: #8d8d8d;
	color: #fff
}

.in-barnd .title {
	transform: translateX(-5em);
	opacity: 0
}

.in-barnd b {
	transform: translateX(5em);
	opacity: 0
}

.in-barnd .text {
	transform: translateY(5em);
	opacity: 0
}

.in-barnd .more {
	transform: translateY(-5em);
	opacity: 0
}

.in-barnd .list {
	opacity: 0
}

.in-barnd.on .title {
	transform: translateX(0);
	opacity: 1
}

.in-barnd.on b {
	transform: translateX(0);
	opacity: 1
}

.in-barnd.on .text {
	transform: translateY(0);
	opacity: 1
}

.in-barnd.on .more {
	transform: translateY(0);
	opacity: 1
}

.in-barnd.on .list {
	opacity: 1;
	transition-delay: .6s
}

.about-img {
	height: 100vh;
	width: calc(100% - 18.75em);
	position: fixed;
	top: 0;
	right: 0;
	z-index: -1
}

.about-img span {
	width: 28.75em;
	height: 8.75em;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: url(/skin/images/logo.png) no-repeat center center;
	background-size: contain
}

.brand {
	padding: 7.2em 8.8em;
	margin-top: 100vh;
	background: #fff
}

.brand .title {
	font-size: 1.5em;
	color: #3e3a39;
	line-height: 200%
}

.brand em {
	font-style: normal;
	color: #898989
}

.brand .name {
	font-size: 2.5em;
	color: #3e3a39;
	line-height: 200%;
	margin: .5em 0
}

.brand .name b {
	font-weight: 600
}

.brand .text-one {
	color: #898989;
	line-height: 200%;
	padding-bottom: 2em;
	border-bottom: 1px dashed #b5b5b6
}

.brand .list {
	margin: 0 auto;
	margin-top: 4em
}

.brand .list li {
	display: inline-block;
	width: calc(100%/4);
	text-align: center
}

.brand .list li p {
	color: #898989;
	margin-top: 1em
}

.brand .list li:first-child span.number-symbol {
	display: none
}

.brand .text-tow {
	color: #898989;
	line-height: 200%;
	margin-top: 4em
}

.brand .name {
	transform: translateX(5em);
	opacity: 0
}

.brand .text-one {
	transform: translateX(-15em);
	opacity: 0
}

.brand .list {
	transform: translateY(5em);
	opacity: 0
}

.brand .text-tow {
	opacity: 0
}

.brand.on .name {
	transform: translateX(0);
	opacity: 1
}

.brand.on .text-one {
	transform: translateX(0);
	opacity: 1
}

.brand.on .list {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .3s
}

.brand.on .text-tow {
	opacity: 1;
	transition-delay: .6s
}

.culture {
	padding: 7em 8.8em;
	background: #f6f6f6
}

.culture .text {
	max-width: 26em;
	width: 100%;
	display: inline-block;
	vertical-align: middle
}

.culture .title {
	font-size: 1.5em;
	color: #3e3a39;
	line-height: 200%
}

.culture em {
	font-style: normal;
	color: #898989
}

.culture .text span {
	display: block;
	margin-top: 2em;
	line-height: 250%
}

.culture .img {
	width: calc(100% - 27em);
	display: inline-block;
	vertical-align: middle
}

.culture .img img {
	width: 100%;
	height: auto;
	display: block
}

.culture .text {
	transform: translateX(50%);
	opacity: 0
}

.culture .img {
	transform: translateX(-50%);
	opacity: 0
}

.culture.on .text {
	transform: translateX(0);
	opacity: 1
}

.culture.on .img {
	transform: translateX(0);
	opacity: 1
}

.cooperation {
	padding: 7em 8.8em;
	background: #fff;
	overflow: visible;
	padding-top: 14em
}

.cooperation .title {
	font-size: 1.5em;
	color: #3e3a39;
	line-height: 200%
}

.cooperation em {
	font-style: normal;
	color: #898989
}

.cooperation .cooper-box-visible {
	overflow: visible;
	position: relative;
	width: 100%;
	margin-top: 4em
}

.cooperation .cooper-box-visible .cooper-both {
	width: 4em;
	height: 1.8em;
	line-height: 1.8em;
	text-align: center;
	font-family: icon;
	position: absolute;
	cursor: pointer
}

.cooperation .cooper-box-visible .cooper-both.cooper-left {
	left: -4em;
	top: 50%;
	transform: translateY(-50%)
}

.cooperation .cooper-box-visible .cooper-both.cooper-right {
	right: -4em;
	top: 50%;
	transform: translateY(-50%)
}

.cooperation .cooper-box-visible .cooper-both.cooper-left:after {
	content: '\e764';
	font-size: 2em
}

.cooperation .cooper-box-visible .cooper-both.cooper-right:after {
	content: '\e603';
	font-size: 2em
}

.cooperation .cooper-box-visible .list {
	white-space: nowrap
}

.cooperation .cooper-box-visible .list li {
	width: calc(100%/5);
	height: 5em;
	display: inline-block;
	vertical-align: top;
	text-align: center
}

.cooperation .cooper-box-visible .list li span {
	width: 12em;
	height: calc(100% - 2px);
	border: 1px solid #b5b5b6;
	display: inline-block;
	position: relative;
	cursor: pointer
}

.cooperation .cooper-box-visible .list li span img {
	max-width: 90%;
	max-height: 95%;
	position: absolute;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto
}

.cooperation.on {
	padding-top: 7em
}

.inside-center {
	padding: 7.2em 8.8em;
	background: #fff
}

.inside-center .inside-title p {
	font-size: 1.5em;
	color: #3e3a39;
	line-height: 150%
}

.inside-center .inside-title b {
	color: #898989;
	font-weight: normal
}

.inside-center .sub-nav,
.sub-prod {
	margin-top: 4em;
	text-align: center;
	overflow: visible;
	position: relative;
	z-index: 1
}

.inside-center .sub-nav a,
.sub-prod .prod-title {
	font-size: 1.1em;
	/*font-size: 1.25em;*/
	color: #898989;
	display: inline-block;
	vertical-align: top;
	padding: 0 0.85em;
	/*padding: 0 1.3em;*/
	position: relative;
	line-height: 1em;
	cursor: pointer
}

.inside-center .sub-nav a:after,
.sub-prod .prod-title:after {
	content: '';
	width: 2px;
	height: 100%;
	display: block;
	background: #898989;
	position: absolute;
	right: 0;
	top: 0
}

.inside-center .sub-nav a:last-child:after,
.sub-prod span:last-child .prod-title:after {
	display: none
}

.inside-center .sub-nav a:hover.sub-prod .prod-title:hover {
	color: #3e3a39
}

.inside-center .sub-nav a.on,
.sub-prod .prod-title.on {
	color: #3e3a39
}

.inside-center .sub-nav.none {
	display: none
}

.sub-prod .prod-title {
	padding: 0 1em
}

.sub-prod span {
	display: inline-block;
	position: relative
}

.sub-prod span .sub {
	width: 100%;
	height: auto;
	position: absolute;
	padding-top: 1em;
	opacity: 0;
	visibility: hidden
}

.sub-prod span .sub:before {
	content: '';
	width: 100%;
	height: .25em;
	display: block;
	background: #871b20
}

.sub-prod span .sub a {
	display: block;
	padding: 1em 0;
	color: #fff;
	background: rgba(62, 58, 57, .8);
	transition: transform .6s, opacity .6s, background .6s, visibility .6s;
	transition-timing-function: ease-out
}

.sub-prod span .sub a:hover {
	background: rgba(62, 58, 57, 1)
}

.sub-prod span:hover .sub {
	opacity: 1;
	visibility: visible
}

.inside-product-list {
	margin-top: 4em
}

.inside-product-list li {
	width: calc(100%/3 - 1.5em);
	margin-right: 2.25em;
	margin-bottom: 2.25em
}

.inside-product-list li:nth-child(3n) {
	margin-right: 0
}

.produ-customized {
	margin-bottom: 2.5em
}

.produ-customized a {
	cursor: pointer
}

.page {
	text-align: left;
	margin-top: 2.12em;
	text-align: center
}

/* ----- PB分页数字条效果 结束 ----- */
.pagebar .pagination {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

/*.pagination a {
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	font-size: 14px;
	padding: 8px 12px;
	margin: 0 5px;
	border-radius: 3px;
}*/

.pagination span {
	color: #333;
	font-size: 14px;
	padding: 8px 2px;
	margin: 0 5px;
	border-radius: 3px;
}

.pagination a:hover {
	color: #3e3a39;
	border: 1px solid #3e3a39;
}

.pagination a.page-num-current {
	color: #fff;
	background: #3e3a39;
	border: 1px solid #3e3a39;
}

/* ----- PB分页数字条效果 结束 ----- */
.inside-product-content {
	margin-top: 6em;
	position: relative
}

.inside-product-content .img {
	width: 100%;
	max-width: 45%;
	height: 70vh;
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 10%
}

.inside-product-content .img .absolute-box {
	height: 4.5em;
	padding: .5em;
	background: rgba(62, 58, 57, .3);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.inside-product-content .img .absolute-box span {
	width: calc(100%/6 - .625em);
	margin-right: .75em;
	height: 100%;
	display: inline-block;
	position: relative;
	background: #c9ccd3;
	cursor: pointer
}

.inside-product-content .img .absolute-box span img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto
}

.inside-product-content .img .absolute-box span:after {
	content: '';
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: 4px solid transparent;
	transition: .2s;
	transition-timing-function: ease-out
}

.inside-product-content .img .absolute-box span.on:after {
	border: 4px solid #fff
}

.inside-product-content .img .absolute-box span.on img {
	min-width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%
}

.inside-product-content .img .absolute-box span:last-child {
	margin-right: 0
}

.inside-product-content .img .img-list {
	white-space: nowrap;
	height: 100%
}

.inside-product-content .img .img-list li {
	width: 100%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.inside-product-content .img .img-list li img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto;
	transform: scale(1.1, 1.1);
	transition: transform .6s ease
}

.inside-product-content .img .img-list li.on img {
	transform: scale(1, 1);
	transition-delay: .6s
}

.inside-product-content .text-content {
	display: inline-block;
	vertical-align: top;
	max-width: 45%;
	position: relative;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0
}

.inside-product-content .text-content .title {
	font-size: 2em;
	color: #3e3a39
}

.inside-product-content .text-content .text {
	margin-top: 2em;
	line-height: 2em;
	color: #898989;
	height: 10em;
	overflow-y: auto;
	padding-right: 1em
}

.inside-product-content .text-content .parameter {
	color: #898989;
	line-height: 2.3em;
	height: 13.8em;
	overflow-y: auto
}

.inside-product-content .text-content .parameter b {
	font-weight: normal;
	color: #3e3a39
}

.inside-product-content .text-content .icon {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0
}

.inside-product-content .text-content .icon span {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	margin-right: 1.5em;
	font-size: .875em
}

.inside-product-content .text-content .icon span p {
	font-family: icon;
	width: 3.8em;
	height: 3.8em;
	border-radius: .5em;
	border: 2px solid #c4c4c4;
	text-align: center;
	line-height: 3.8em;
	margin: 0 auto;
	margin-bottom: .5em
}

.inside-product-content .text-content .icon span p:after {
	content: attr(data-icon);
	font-size: 2em
}

.inside-product-content .text-content .icon span em {
	font-style: normal;
	font-size: .875em
}

.scrollbar::-webkit-scrollbar {
	width: .5em;
	height: 1px
}

.scrollbar::-webkit-scrollbar-thumb {
	border-radius: .75em;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #3e3a39
}

.scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 .25em rgba(0, 0, 0, 0.2);
	border-radius: .75em;
	background: #ededed
}

.inside-cases-box {
	height: 80vh;
	width: 100%;
	position: relative
}

.inside-cases-box .inside-cases-hiden {
	height: 100%;
	white-space: nowrap
}

.inside-cases-box .inside-cases-hiden .list {
	width: 100%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.inside-cases-box .inside-cases-hiden .list li {
	display: inline-block;
	vertical-align: top;
	position: relative;
	opacity: 0
}

.inside-cases-box .inside-cases-hiden .list li a {
	width: 100%;
	height: 100%;
	display: block;
	text-align: center
}

.inside-cases-box .inside-cases-hiden .list li a:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background: rgba(62, 58, 57, 0);
	transition: .6s;
	transition-timing-function: ease-out
}

.inside-cases-box .inside-cases-hiden .list li a p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	color: #fff;
	z-index: 1;
	font-size: 1.25em;
	padding: 0 2em;
	opacity: 0
}

.inside-cases-box .inside-cases-hiden .list li:hover a:after {
	background: rgba(62, 58, 57, .6)
}

.inside-cases-box .inside-cases-hiden .list li:hover a p {
	opacity: 1
}

.inside-cases-box .inside-cases-hiden .list li img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: -200%;
	top: -200%;
	right: -200%;
	bottom: -200%;
	margin: auto
}

.inside-cases-box .inside-cases-hiden .list li:nth-child(1),
.inside-cases-box .inside-cases-hiden .list li:nth-child(2),
.inside-cases-box .inside-cases-hiden .list li:nth-child(5),
.inside-cases-box .inside-cases-hiden .list li:nth-child(6) {
	width: 25%;
	height: 33.3%
}

.inside-cases-box .inside-cases-hiden .list li:nth-child(3),
.inside-cases-box .inside-cases-hiden .list li:nth-child(4) {
	width: 50%;
	height: 66.7%
}

.inside-cases-box .inside-cases-hiden .list li:nth-child(4) {
	position: absolute;
	left: 0;
	bottom: 0
}

.inside-cases-box .inside-cases-hiden .list li:nth-child(5) {
	position: absolute;
	right: 25%;
	bottom: 0
}

.inside-cases-box .inside-cases-hiden .list li:nth-child(6) {
	position: absolute;
	right: 0;
	bottom: 0
}

.inside-cases-box .cases-both {
	width: 4.6em;
	height: 4.6em;
	z-index: 8;
	display: block;
	text-align: center;
	line-height: 4.6em;
	background: rgba(255, 255, 255, .6);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	font-family: icon;
	color: #8b8988;
	cursor: pointer
}

.inside-cases-box .cases-both:after {
	content: '\e764';
	font-size: 3em
}

.inside-cases-box .cases-both.right {
	left: auto;
	right: 0
}

.inside-cases-box .cases-both.right:after {
	content: '\e603'
}

.inside-cases-box .cases-both:hover {
	background: rgba(255, 255, 255, 1)
}

.inside-cases-box .inside-cases-hiden li:nth-child(1) {
	transform: translateY(-50%)
}

.inside-cases-box .inside-cases-hiden li:nth-child(2) {
	transform: translateY(-50%)
}

.inside-cases-box .inside-cases-hiden li:nth-child(3) {
	transform: translateX(50%)
}

.inside-cases-box .inside-cases-hiden li:nth-child(4) {
	transform: translateX(-50%)
}

.inside-cases-box .inside-cases-hiden li:nth-child(5) {
	transform: translateY(50%)
}

.inside-cases-box .inside-cases-hiden li:nth-child(6) {
	transform: translateY(50%)
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(1) {
	transform: translateY(0);
	transition-delay: .2s;
	opacity: 1
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(2) {
	transform: translateY(0);
	transition-delay: .4s;
	opacity: 1
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(3) {
	transform: translateX(0);
	transition-delay: .4s;
	opacity: 1
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(4) {
	transform: translateX(0);
	transition-delay: .4s;
	opacity: 1
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(5) {
	transform: translateX(0);
	transition-delay: .2s;
	opacity: 1
}

.inside-cases-box .inside-cases-hiden.on li:nth-child(6) {
	transform: translateX(0);
	transition-delay: .4s;
	opacity: 1
}

.cases-content {
	width: 100%;
	height: 76vh;
	position: relative
}

.cases-content .list {
	white-space: nowrap;
	height: 100%
}

.cases-content .list li {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 100%;
	height: 100%
}

.cases-content .list li img {
	min-width: 70%;
	height: 80%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto
}

.cases-content .img-list {
	padding: .5em 0;
	width: 100%;
	background: rgba(70, 84, 79, .3);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0
}

.cases-content .img-list li {
	width: 7.5em;
	height: 4.5em;
	margin: 0 .5em;
	display: inline-block;
	vertical-align: top;
	position: relative
}

.cases-content .img-list li:after {
	content: '';
	width: calc(100% - .5em);
	height: calc(100% - .5em);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: .25em solid #fff;
	opacity: 0;
	transition: .6s;
	transition-timing-function: ease-out
}

.cases-content .img-list li img {
	min-width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto
}

.cases-content .img-list li.on:after {
	opacity: 1
}

.cases-content .img-list li.on img {
	max-width: calc(100% - .5em);
	height: calc(100% - .5em)
}

.cases-text {
	padding: 5em;
	background: #fff;
	position: relative
}

.cases-text .name {
	color: #3e3a39;
	max-width: 30%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

.cases-text .name p {
	font-size: 2em;
	margin-bottom: .5em
}

.cases-text .name b {
	color: #898989;
	font-weight: normal;
	font-size: 1.25em;
	line-height: 200%
}

.cases-text .text {
	max-width: 60%;
	float: right;
	color: #898989;
	line-height: 200%
}

.article_list {
	margin-top: 4em;
	overflow: visible
}

.article_list li {
	margin-bottom: 4em;
	position: relative
}

.article_list li a {
	white-space: normal
}

.article_list li span {
	width: 31.25em;
	height: 20em;
	display: block;
	position: relative;
	overflow: hidden;
	float: left
}

.article_list li .text {
	max-width: calc(100% - 34.25em);
	width: 100%;
	position: absolute;
	right: 1.5em;
	top: 0;
	bottom: 0
}

.article_list li .text p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0
}

.article_list li .text p strong,
.article_list li .text p b {
	font-weight: normal
}

.article_list li .text p em,
.article_list li .text p i {
	font-style: normal
}

.article_list li .text strong {
	font-size: 1.5em
}

.article_list li .text b {
	display: block;
	line-height: 2em;
	color: #898989;
	font-size: .875em;
	padding: 2em 0;
	max-height: 6em;
	overflow: hidden
}

.article_list li .text b:after {
	content: '';
	width: 0;
	height: 1px;
	display: block;
	background: #b5b5b6;
	margin-top: 2em;
	transition: .6s;
	transition-timing-function: ease-out
}

.article_list li .text em {
	color: #b5b5b6;
	float: left
}

.article_list li .text i {
	width: 12em;
	height: 2.5em;
	text-align: center;
	line-height: 2.5em;
	background: #898989;
	display: block;
	float: right;
	color: #fff;
	font-family: icon
}

.article_list li .text i:after {
	content: 'MORE \e603'
}

.article_list li:hover .text i {
	background: #333
}

.article_list li:hover .text b:after {
	width: 100%
}

.article_list li:hover span img {
	transform: scale(1.1, 1.1)
}

.article_list li:hover {
	background: rgba(51, 51, 51, .2)
}

.article_list li:hover {
	box-shadow: 0 0 1em rgba(51, 51, 51, 8)
}

.contact-list {
	margin-top: 4em
}

.contact-list li {
	width: calc(100%/3);
	height: auto;
	display: inline-block;
	vertical-align: top;
	color: #898989
}

.contact-list li strong,
.contact-list li b {
	color: #333
}

.contact-list li strong {
	display: block;
	font-size: 2em;
	margin: .25em 0
}

.contact-list li span {
	display: block;
	height: 5em;
	position: relative;
	margin-bottom: 2em
}

.contact-list li span:after {
	content: '';
	width: 2em;
	height: 1px;
	display: block;
	background: #898989;
	position: absolute;
	bottom: 0;
	left: 0
}

.contact-list li em {
	font-style: normal;
	display: block;
	color: #333;
	line-height: 200%
}

.contact-list li p {
	line-height: 200%
}

.contact-list li b {
	font-weight: normal
}

.db {
	margin-top: 6em
}

.db:before {
	content: '在线留言';
	font-size: 1.5em;
	color: #333;
	display: block;
	margin-bottom: 3em;
	text-align: center
}

.db input {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	width: calc(100%/3 - 6.1em - 2px);
	margin-right: 8.75em;
	line-height: 3.25em;
	border: 1px solid #e5e5e5;
	margin-bottom: 1em;
	outline: medium;
	color: #898989;
	text-indent: 1em
}

.db input.right {
	margin-right: 0
}

.db input::placeholder,
.in-contact-box .center .con_right .db textarea::placeholder {
	color: #898989
}

.db textarea {
	margin: 0;
	padding: 0;
	border: 0;
	text-indent: 1em;
	background: transparent;
	width: calc(100% - 2px);
	height: 9em;
	border: 1px solid #e5e5e5;
	margin-bottom: 1em;
	outline: medium;
	color: #898989;
	resize: none;
	line-height: 1.8em
}

.db .con-both {
	width: 10.6em;
	height: 2.5em;
	line-height: 2.5em;
	text-align: center;
	color: #898989;
	cursor: pointer;
	margin-top: 1em;
	border: 1px solid #b5b5b6
}

.db .con-both:hover {
	background: #333;
	color: #fff
}

.contact-map {
	width: 100%;
	height: 28em;
	position: relative
}

.contact-map .maponlink {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0
}

#map {
	width: 100%;
	height: 100%
}

#map img {
	max-width: none
}

#map div {
	overflow: visible
}

#map .anchorBL {
	display: none
}

.content {
	width: 100%;
	margin: 6em auto;
	padding: 3em 0;
	background: #fff
}

.content .title {
	font-size: 2.25em;
	font-weight: 520;
	color: #333
}

.content .time {
	font-size: 1.125em;
	color: #999;
	line-height: 2em;
	text-align: center;
	margin-top: 1em;
	padding-bottom: 1.5em;
	border-bottom: .15em solid #f2f2f2
}

.content .text img {
	border-radius: 5px;
	/* box-shadow: 0 0 5px 0 gray; */
}

.content .text .quote {
	color: #666;
	margin: 1em 0;
	font-size: .75em;
	position: relative;
	counter-reset: jsq;
	border-radius: 5px;
	padding: .35em 1.5em;
	border: 1px dashed #f3821f;
}

.content .text .quote::before {
	top: 0;
	bottom: 0;
	left: 5px;
	width: 2px;
	height: 90%;
	content: "";
	margin: auto;
	position: absolute;
	background-color: #f3821f;
}

.content .text .quote .list::before {
	counter-increment: jsq;
	content: counter(jsq) "、";
}

.content .text {
	line-height: 250%;
	margin-top: 3em;
	color: #333;
	padding-bottom: 2em;
	border-bottom: .15em solid #f2f2f2;
	margin-bottom: 2em
}

.content .text h2 {
	color: #f3821f;
}

.content .text img {
	max-width: 100%
}

.content .content-page {
	margin-top: 1em
}

.content .content-page a {
	font-size: .9em;
	color: #666
}

.window {
	width: 6.5em;
	height: auto;
	position: fixed;
	bottom: 2em;
	right: 0;
	overflow: visible;
	z-index: 3
}

.window li {
	padding: 1em 0;
	cursor: pointer;
	position: relative;
	overflow: visible
}

.window li p,
.window li a {
	width: 3.4em;
	height: 3.4em;
	display: block;
	border-radius: 50%;
	background: #898989;
	margin: 0 auto;
	font-family: icon;
	text-align: center;
	line-height: 3.4em;
	color: #474442
}

.window li.window-tel p:after {
	content: '\e621';
	font-size: 2em
}

.window li.window-tel span {
	width: 200%;
	opacity: 0;
	display: none;
	height: 100%;
	z-index: -2;
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: rgba(62, 58, 57, 1);
	overflow: hidden
}

.window li.window-tel span:after {
	content: attr(data-number);
	font-size: 1.5em;
	color: #fff
}

.window li:hover {
	background: rgba(62, 58, 57, 1)
}

.window li.window-tel p:hover+span {
	opacity: 1;
	z-index: 1;
	display: flex
}

.window li.window-wechat p:after {
	content: '\e677';
	font-size: 2em
}

.window li.window-wechat span {
	width: 12em;
	height: 12em;
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	margin: auto 0;
	background: rgba(62, 58, 57, 1);
	opacity: 0;
	z-index: -1;
	display: none
}

.window li.window-wechat span img {
	width: 93%;
	height: 93%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0
}

.window li.window-wechat p:hover+span {
	opacity: 1;
	display: block
}

.window li.window-qq a:after {
	content: '\e75e';
	font-size: 2em
}

/* 
.window li.window-tb a {
	width: 54.4px;
	height: 54.4px;
	background: url(../images/dian.png) no-repeat center;
	font-size: 2em
}
 */
.window li.window-tb a::after {
	content: "\e653";
	font-size: 2em;
}

.web-number-both {
	font-family: icon;
	width: 4em;
	height: 4em;
	display: none;
	box-shadow: 0 0 1em rgba(0, 0, 0, .3);
	color: #fff;
	border-radius: 50%;
	background: rgba(51, 51, 51, .5);
	text-align: center;
	line-height: 4em;
	position: fixed;
	bottom: 8em;
	right: 1em
}

.web-number-both:after {
	content: ' \e621';
	font-size: 2em
}

@media screen and (max-width:1700px) {
	body {
		font-size: 14px
	}

	.in-barnd .list {
		max-width: 90%
	}
}

@media screen and (max-width:1500px) {
	body {
		font-size: 12px
	}

	.in-cases .in-cases-visible .in-cases-img-hiden .list li .himg {
		width: 32em
	}

	.in-cases .in-cases-visible .cases-title {
		max-width: 26em
	}

	.in-cases .in-cases-visible .in-cases-img-hiden .list li .text {
		max-width: 26em
	}

	.cooperation .cooper-box-visible .list li {
		width: calc(100%/4)
	}

	.inside-center {
		padding: 7em 6em
	}

	.sub-prod .prod-title {
		padding: 0 1em
	}
}

@media screen and (max-width:860px) {
	body {
		font-size: 12px;
		min-width: 0
	}

	header {
		position: relative;
		width: 100%;
		min-height: 6.25em;
		background: #ec7347;
		overflow: hidden
	}

	header .logo {
		height: 3em;
		margin: 0.5em auto
	}

	header .list {
		height: 0;
		padding: 0 2em
	}

	header .nav-web {
		display: block
	}

	header .list.open {
		height: 28.4em
	}

	header .list li {
		border-bottom: 1px solid #fff;
		margin-bottom: 0;
		padding: 1.5em 0
	}

	header .list li:last-child {
		border-bottom: 0
	}

	header .list li a {
		padding-left: 0;
		font-size: 1.25em;
		display: block
	}

	header .list li.on a {
		transform: translateX(0)
	}

	header .list li:after {
		display: none
	}

	.in-banner {
		position: relative;
		height: auto
	}

	.in-banner .list li img {
		min-width: auto;
		max-width: 100%;
		height: auto;
		position: static
	}

	.in-about {
		margin-top: 0
	}

	.in-banner .list li .text {
		left: 0;
		padding: 0 2em;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		opacity: 1;
		display: none
	}

	.in-banner .list li .text b {
		font-size: 2em
	}

	.banner-both {
		left: 0;
		text-align: center
	}

	.in-all-box,
	.about-all-box,
	.inside-box {
		max-width: 100%;
		margin: 0 auto
	}

	.in-about {
		padding: 2em 0
	}

	.in-about .title,
	.in-about b {
		font-size: 2em
	}

	.in-about .list {
		max-width: 100%;
		margin-top: 2em
	}

	.in-about .list li {
		width: calc(100%/2);
		margin-bottom: 2em
	}

	.number-roll span {
		font-size: 3em
	}

	.in-product li {
		width: 100%;
		height: 22vh
	}

	.in-cases,
	.in-product {
		padding: 3em 1em
	}

	.in-cases .in-cases-visible {
		width: 100%;
		height: auto
	}

	.in-cases .in-cases-visible .in-cases-back-visible {
		display: none
	}

	.in-cases .in-cases-visible .in-cases-img-hiden .list li .himg {
		position: relative;
		width: 100%;
		height: 35em;
		box-shadow: none
	}

	.in-cases .in-cases-visible .cases-title {
		position: static
	}

	.in-cases .in-cases-visible .in-cases-img-hiden .list li .text {
		position: static;
		transform: translateY(0);
		margin-top: 2em
	}

	.in-barnd {
		padding: 3em 0
	}

	.in-barnd .text {
		max-width: calc(100% - 2em);
		padding: 0 1em;
		white-space: normal;
		margin: 1em auto
	}

	.in-barnd .list {
		max-width: calc(100% - 2em);
		margin: 0 auto;
		margin-top: 3em
	}

	.in-barnd .list li {
		display: inline-block;
		vertical-align: top;
		text-align: center
	}

	.in-barnd .list li span {
		float: none;
		margin: 0 auto
	}

	.about-img {
		height: 38em;
		position: relative;
		width: 100%
	}

	.brand {
		margin-top: 0;
		padding: 3em 1em
	}

	.brand .list {
		margin-top: 2em
	}

	.brand .list li {
		width: calc(100%/2);
		margin-bottom: 2em
	}

	.brand .text-tow {
		margin-top: 2em
	}

	.about-img span {
		max-width: calc(100% - 10em)
	}

	.culture {
		padding: 2em 1em
	}

	.culture .img {
		width: 100%;
		margin-top: 2em
	}

	.cooperation {
		padding: 2em 1em
	}

	.cooperation .cooper-box-visible {
		margin-top: 2em
	}

	.cooperation .cooper-box-visible {
		width: calc(100% - 5em);
		margin: 0 auto;
		margin-top: 2em
	}

	.cooperation .cooper-box-visible .cooper-both {
		width: 2em
	}

	.cooperation .cooper-box-visible .cooper-both.cooper-left {
		left: -2em
	}

	.cooperation .cooper-box-visible .cooper-both.cooper-right {
		right: -2em
	}

	.cooperation .cooper-box-visible .list li {
		width: calc(100%/2)
	}

	.cooperation .cooper-box-visible .list li span {
		width: calc(100% - 2px)
	}

	.inside-center {
		padding: 2em 1em
	}

	.inside-center .sub-nav {
		text-align: left
	}

	/*.inside-center .sub-nav a {
		width: calc(100%/3);
		padding: 0;
		text-align: left;
		margin-bottom: 1em
	}*/

	.inside-center .sub-nav a:after {
		display: none
	}

	.inside-center .inside-title p {
		font-size: 2em
	}

	.inside-product-list {
		margin-top: 2em
	}

	.in-cases,
	.in-product {
		padding: 2em 1em
	}

	.inside-product-content .text-content {
		position: static;
		margin-top: 2em;
		max-width: 100%
	}

	.inside-product-content .text-content .text {
		height: auto
	}

	.inside-product-content .text-content .parameter {
		margin: 2em 0
	}

	.inside-product-content .text-content .icon {
		position: static;
		margin-top: 2em
	}

	.inside-product-content {
		margin-top: 2em
	}

	.inside-cases-box .inside-cases-hiden .list {
		white-space: normal
	}

	.inside-cases-box .inside-cases-hiden .list li:nth-child(1),
	.inside-cases-box .inside-cases-hiden .list li:nth-child(2),
	.inside-cases-box .inside-cases-hiden .list li:nth-child(3),
	.inside-cases-box .inside-cases-hiden .list li:nth-child(4),
	.inside-cases-box .inside-cases-hiden .list li:nth-child(5),
	.inside-cases-box .inside-cases-hiden .list li:nth-child(6) {
		width: 50%;
		height: 16.8em;
		position: relative;
		left: 0;
		right: 0
	}

	.cases-content .img-list {
		position: static
	}

	.cases-content .img-list li {
		width: calc(100%/4 - 1em);
		margin: .5em
	}

	.cases-text .name {
		position: static;
		transform: translateY(0);
		margin-bottom: 2em;
		max-width: 100%
	}

	.cases-text .text {
		max-width: 100%
	}

	.cases-text {
		padding: 2em 1em
	}

	.cases-content .list li img {
		min-width: auto;
		height: auto;
		position: static;
		max-width: 100%
	}

	.article_list li span {
		width: 100%;
		float: none;
		height: 16em
	}

	.article_list li .text {
		position: static;
		margin-top: 0;
		max-width: 100%
	}

	.article_list li .text p {
		position: static;
		transform: translateY(0);
		padding: 1em
	}

	.contact-list li {
		width: 100%;
		margin-bottom: 2em
	}

	.db {
		margin-top: 2em
	}

	.db input {
		width: calc(100%/3 - .5em);
		margin-right: 0
	}

	.contact-map {
		height: 14em
	}

	.inside-product-content .img {
		max-width: 100%;
		margin-right: 0
	}

	.article_list li .text b {
		padding: 0;
		margin: 2em 0
	}

	footer {
		max-width: 100%;
		margin-left: 0;
		padding: 1.5em 1em;
		line-height: 200%;
		background: #ec7347
	}

	footer2 {
		max-width: 100%;
		margin-left: 0;
		padding: 0em 1em;
		background: #cccccc
	}

	.window {
		display: none
	}

	.content {
		margin: 0 auto
	}

	.cases-content {
		height: auto
	}

	.in-banner {
		z-index: 1
	}

	.cases-title.pc {
		display: none
	}

	.cases-title.web {
		display: block;
		position: static;
		margin-bottom: 2em
	}

	.web-number-both {
		display: block;
		z-index: 8
	}

	.news-list {
		width: calc(100% - 2em);
		margin: 2em auto
	}

	.news-list li {
		display: none;
		width: 100%
	}

	.news-list li:nth-child(1),
	.news-list li:nth-child(2),
	.news-list li:nth-child(3),
	.news-list li:nth-child(4) {
		display: block
	}

	.news-list li:nth-child(1) strong,
	.news-list li:nth-child(2) strong,
	.news-list li:nth-child(3) strong,
	.news-list li:nth-child(4) strong {
		display: none
	}

	.select-center span.back {
		width: calc(100% - 2px);
		margin: 0;
		margin-bottom: 1em
	}

	.select-center span.back select {
		width: 100%
	}

	.sub-prod.produ-customized {
		margin: 2em 0
	}

	.produ-customized.sub-prod span {
		width: calc(100%/3);
		display: inline-block;
		padding: 0;
		margin-bottom: 1em
	}

	.produ-customized.sub-prod span:nth-child(3n):after {
		display: none
	}

	/**
	 * @time 2022.8.18-18:16
	 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
	 * @description 修复产品页-头部显示错误
	 * @source 3091
	 */

	.inside-center .sub-nav a {
		width: calc(100%/3 - 5px);
		padding: 0;
		text-align: center;
		margin-bottom: 1em
	}
}

/**
 * @time 2022.8.19-16:32
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修改产品页面头部样式
 * @source line:3102
 */
@media screen and (max-width:860px) {
	.inside-center .inside-title p {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
	}

	.inside-center .inside-title b {
		display: block;
		text-align: center;
	}
}

/**
 * @time 2022.8-19-16:02
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修复文章内移动端图片拉伸的问题
 * @source line:2631
 */
.content .text img {
	margin: auto;
	max-width: 50%;
	display: block;
	height: 100% !important;
}

/**
 * @time 2022.8.18-18:09
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修复产品页-页码显示异常问题
 * @source line:1768
 */

.pagination a {
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	font-size: 14px;
	padding: 4px 4px;
	margin: 0 5px;
	border-radius: 3px;
}

/**
 * @time 2022.8.18-16:48
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修复大尺寸下案例展示异常的问题
 */

.home-cases {
	height: 100%;
	margin: auto;
	max-width: 1400px;
	position: relative;
}

/**
 * @time start 2022.8.18-11:29 end 2022.8.18-14:06
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修改新闻样式-重构结构并增加介绍，移动端兼容处理
 */

.home-news {
	width: 98%;
	margin: auto;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.home-news a {
	display: block;
	font-size: 24px;
	overflow: hidden;
	font-style: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.home-news ul {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.home-news ul li {
	margin-bottom: 10px;
	border-radius: 15px;
}

.home-news li p {
	color: black;
	line-height: 2em;
	padding: 0 10px 5px;
}

.home-news li p span,
.home-news li p b {
	display: block;
}

.home-news li p span {
	color: #999;
}

/**
 * @time 2022.8.20-15:44
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修复新闻在图片为白底时会出现无法辨认边界的情况-加入边框
 */

.home-news .news-pic {
	height: 25vh;
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: 15px;
	border: 1px solid #ccc;
}

.home-news .news-pic img {
	/*min-width: 100%;*/
	width: 100%;
	height: 80%;
    padding-top: 8%;
}

.home-news .news-pic .news-des {
	top: 0;
	left: 100%;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 15px;
	transition: all .4s;
	background-color: rgba(0, 0, 0, 0.4);
}

.home-news .news-pic:hover .news-des {
	left: 0;
}

.home-news .news-pic .news-des p {
	color: white;
	text-indent: 2em;
	font-size: 14px;
	margin-top: 30px;
	overflow: hidden;
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}

.home-news .news-pic .news-des a {
	left: 50%;
	width: 58px;
	color: white;
	bottom: 50px;
	font-size: 14px;
	padding: 2px 5px;
	margin-left: -29px;
	position: absolute;
	border-radius: 15px;
	border: 1px solid white;
	transition: all .4s;
}

.home-news .news-pic .news-des a:hover {
	color: #ccc;
	border-color: #ccc;
}

@media screen and (max-height: 730px) {
	.home-news .news-pic .news-des a {
		bottom: 10px;
	}
}

@media screen and (max-width: 540px) {
	.home-news ul {
		display: grid;
		grid-column-gap: 10px;
		grid-template-columns: 1fr 1fr;
	}

	.home-news a {
		font-size: 16px;
		font-weight: bold;
	}
}

@media screen and (max-width: 375px) {
	.home-news ul {
		display: grid;
		grid-column-gap: 10px;
		grid-template-columns: 1fr;
	}
}

/**
 * @time 2022.8.18-14:59
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修改首页头部样式-兼容性更强
 * @source line:506
 */
.in-about .list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 0 auto;
	max-width: 80%;
	margin-top: 4em;
}

.in-about .list li {
	display: inline-block;
	width: 100%;
}

/**
 * @time 2022.8.19-14:36
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 首页头部兼容移动端
 * @source line:2934
 */
@media screen and (max-width:860px) {
	.in-about .list {
		display: grid;
		max-width: 100%;
		margin-top: 2em;
		grid-template-columns: 1fr 1fr;
	}

	.in-about .list li {
		width: 100%;
		margin-bottom: 2em;
	}
}

/**
 * @time
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 首页产品列表兼容移动端
 */
@media screen and (max-width:860px) {
	.in-product-index.in-product li {
		margin: 0;
		width: 100%;
		height: 36vh;
		margin-bottom: 2em;
		border-radius: 12px;
	}
}

/**
 * @time 2022.8.18-16:48
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修复大尺寸下案例展示异常的问题
 */

.home-cases {
	height: 100%;
	margin: auto;
	max-width: 1400px;
	position: relative;
}

/**
 * @time 2022.8.18-15:44
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 添加网站图片防复制功能-禁止图片拖动、右键保存的方式下载网站图片资源
 */

img {
	pointer-events: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

/**
 * @time 2022.8.18-10:50
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修改产品展示样式-鼠标悬浮时介绍从右至左滑入
 * @source line:683 748
 */

.in-product li .text {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 120%;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: #000000;
	color: #fff;
	text-align: center;
	transform: scale(1.1, 1.1);
	transition: all .4s;
}

.in-product li:hover .text {
	left: 0;
	transform: scale(1, 1);
}

/*
 * @time 2022.8.18-10:11
 * @author 榆璧创新事业部-优化运营组：SEO Chengyong•Li
 * @description 修改案例展示样式-增加一段介绍文字并修改文字展示坐标
 * @source line:950
 */

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text {
	width: 35em;
	position: absolute;
	right: 0;
	top: 40%;
	transform: translateY(-50%)
}

.in-cases .in-cases-visible .in-cases-img-hiden .list li .text p {
	color: #999;
	font-size: 14px;
	overflow: hidden;
	text-indent: 2rem;
	line-height: 1.5rem;
	text-align: justify;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}

/**
 * @time 2022.8.18-9:47
 * @author 创新事业部-优化运营组：SEO Chengyong • Li
 * @description 底部友情链接样式
 */
.flink {
	color: #333;
	height: 40px;
	padding: 0 2em;
	font-size: 12px;
	line-height: 40px;
	background-color: #999;
}

.flink a {
	color: #333;
	margin-left: 5px;
}

/**
 * @time 2022.8.20-17:57
 * @author 创新事业部-优化运营组：SEO Chengyong • Li
 * @description 内页排版优化-优化用户体验
 */
.content p {
	font-size: .95em;
	line-height: 2em;
	overflow: visible;
	font-family: Arial;
}