* {
	padding: 0;
	margin: 0;
	transition: 0.3s all ease-in-out;
}

div,
dl,
dt,
dd,
form,
h1,
h2,
h3,
h4,
h5,
h6,
img,
ol,
ul,
li,
table,
th,
td,
p,
span,
a,
a:hover {
	border: 0;
	color: inherit;
}

img,
input {
	border: none;
	vertical-align: middle;
}

@font-face {
	font-family: SourceHanSerifCN-Heavy;
	src: url(../fonts/SourceHanSerifCN-Heavy.otf);
}

body {
	font-family: Montserrat, FFClanProThin, Tahoma, Arial, Helvetica, "微软雅黑" !important;
	text-align: center;
	background: #fff !important;
	color: #555 !important;
}

html {
	overflow-y: scroll;
}

ul,
ol {
	list-style-type: none;
	margin: 0 !important;
	padding: 0;
}

main {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}

.at-share-btn-elements a {
	background: transparent !important;
}

.text-title {
	font-family: SourceHanSerifCN-Heavy;
}


.img-transform img {
	width: 100%;
}

.img-transform:hover img {
	transform: scale(1.1);
}

.black-text {
	color: #000;
}

.black-bg {
	background-color: #000;
}

.black-btn {
	background-color: #000;
	color: #fff;
	border: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-size: 0% 100%;
	cursor: pointer;
	position: relative;
}

.black-btn a,
.black-btn a:hover {
	text-decoration: none;
	color: inherit;
	display: block;
	background-size: 100% 100%;
}

.black-btn:hover {
	background-color: #888;
	background-size: 100% 100%;
}

.black-btn:after {
	content: "";
	width: 4px;
	height: 40px;
	position: absolute;
	right: -4px;
	top: 0;
	background-color: #666;
}

#index {
	position: relative;
}

.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 30px;
}


#index .bot-copyright-right i:hover {
	color: #eac899;
}


#index .mob-search-i i {
	/* color: #fff; */
}

.top-bar {
	width: 100%;
	color: #fff;
	padding: 0.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-bar a,
.top-bar a:hover {
	color: #fff;
}

.top-text i {
	margin: 0 10px;
	font-size: 14px;
}

.top-share {}

.top-nav-box {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 0 auto;
	max-width: 1300px;
	justify-content: space-between;
	padding: 0em 1em;
}

.top-logo {
	width: 100%;
	max-width: 108px;
	float: left;
}

.top-logo img {
	width: 100%;
}

#products-index .top {
	justify-content: space-between;
	position: absolute;
}

#products-index .top-right {
	display: flex;
	justify-content: space-between;
}

#products-index .top-logo {
	display: none;
}

.top-nav-search {
	display: flex;
	justify-content: flex-end;
}

.top-nav {
	font-size: 14px;
	position: relative;
	/* font-family: "AlibabaSans-Medium"; */
}

.top-nav>ul {
	display: flex;
	/* text-transform: uppercase; */
	margin: 0;
}

.top-nav>ul>li {
	/* padding: 0.4em 1em; */
	margin: 0 1vw;
	position: relative;
	cursor: pointer;
	/* padding: 0.7em 1.5em; */
}

.top-nav>ul>li:hover:before,
.top-nav .active:before {
	width: 100%;
	bottom: 0;
}

.top-nav li ul {
	position: absolute;
	top: 100%;
}

.top-nav>ul>li:hover,
.top-nav .active {
	background: #003b4a;
	color: #eac899;
	border-radius: 0px 20px 0px 20px;
	text-decoration: none;
	text-decoration: none;
}

.top-nav>ul>li>ul>li {
	/* height: 2em; */
	line-height: 2em;
	text-align: left;
	/* display: flex; */
	/* align-items: center; */
	padding: 0.3em 1em;
}

.top-nav li a {
	color: inherit;
	padding: 0.7em 1.5em;
	display: block;
}

.top-nav>ul>li:hover a {
	text-decoration: none;
	color: #eac899;
}

.top-nav>ul>li:hover>ul>li a {
	color: #fff;
}

.top-nav>ul>li>ul {
	display: none;
	position: absolute;
	z-index: 99;
	top: 100%;
	left: 0;
	width: 20rem;
	margin-left: -1em;
	padding: 0.5em 0;
	/* border: 1px solid #eceef1; */
	/* border-radius: 3px; */
}

.top-nav>ul>li>ul::before {
	position: absolute;
	z-index: 98;
	top: -.5rem;
	left: 3rem;
	width: 1rem;
	height: 1rem;
	/* border-top: 1px solid #eceef1; */
	/* border-left: 1px solid #eceef1; */
	opacity: 1;
	background-color: #000;
	content: '';
	transition-delay: .3s;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.top-nav>ul>li:hover>ul {
	display: block;
}

.top-nav>ul>li>ul>li:hover {
	background-color: #fc0021;
}

.top-nav>ul>li>ul>li a {
	color: #fff;
}

.nav-products {
	display: none;
	position: absolute;
	top: 116px;
	background-color: hsla(0, 0%, 100%, 0.5);
	backdrop-filter: blur(5px);
	width: 100%;
	left: 0;
	padding: 1.5vw;
	z-index: 100;
}

.top-nav>ul>li:nth-child(2):hover .nav-products {
	display: block;
}

#products-index .nav-products {
	top: 101px;
	display: none;
}

.nav-products ul {
	display: flex;
	justify-content: center;
	/* gap: 5vw; */
}

.nav-products ul li {
	margin-right: 4vw;
}

.nav-products ul li a {
	color: inherit;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.nav-products ul li a:hover i {
	color: #eac899;
}

.nav-products ul li i {
	font-size: 30px;
	margin-right: 10px;
	color: #003B4A;
}

#products .nav-products {
	background-color: hsla(0, 0%, 100%, 1);
	display: block;
	border-top: 1px solid #f3f3f3;
}

.top-search-box-flex {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
}

.top-search {
	display: flex;
	align-items: center;
	/* width: 50px; */
	justify-content: space-between;
}

.top-search a:hover {
	text-decoration: none;
}

.top-search i {
	font-size: 20px;
	cursor: pointer;
	color: #eac899;
	background: #003B4A;
	padding: 0.2em 0.4em;
	border-radius: 50%;
}

.top-search-box {
	display: none;
	position: relative;
}

.top-search-box input {
	height: 40px;
	width: 20em;
	margin-right: 1em;
	/* border-radius: 20px; */
	border: #eac899 1px solid;
	outline: 0;
	color: #eac899;
	padding: 5px 35px 5px 15px;
	background: #003B4A;
	border-radius: 0px 20px 0px 20px;
}

.top-search-box button {
	background: transparent;
	border: 0px;
	color: #000;
	width: 30px;
	height: 30px;
	position: absolute;
	/* font-size: 40px; */
	right: 3em;
	outline: none;
}

.top-search-box button:focus,
.top-search-box button:active,
.top-search-box button:hover {
	border: 0;
}

.top-search-box button i {
	font-size: 20px;
	color: #eac899;
}

.top-search-box input:focus {
	border: #000 1px solid;
}

.top-search-close i {
	font-size: 24px;
	color: #eac899;
	cursor: pointer;
	transition: 0.3s all ease-in-out;
}

.top-search-close:hover {
	transform: rotate(180deg);
}

.mob-search-i,
.mob-search-box {
	display: none;
}

.mob-search-i i {
	font-size: 24px;
	cursor: pointer;
}

.mob-nav-box {
	display: none;
	align-items: center;
}

/* 移动端导航 */
#toggler {
	display: none;
	margin: 0;
}

#toggler:checked+label .top-menu span:nth-child(1) {
	transform: rotate(45deg);
	top: 0.6em;
	transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
	background: #eac899;
}

#toggler:checked+label .top-menu span:nth-child(2) {
	transform: rotate(-45deg);
	transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
	top: 0.5em;
	background: #eac899;
}

.menu-nav {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	transform: scaleY(0);
	/* font-size: 12px; */
	top: 0px;
	z-index: 100;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out 0.3s;
	transform-origin: 50% 0;
	opacity: 0;
	background: #003b4a;
}

.menu-nav>ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	/* margin-top: 50px !important; */
	/* height: calc(100vh - 150px); */
	margin: 0;
}

.menu-nav ul li {
	color: #fff;
	padding: 1.5em;
	width: 70vw;
	text-align: left;
	font-family: AlibabaSans-Medium;
}

.menu-nav-products ul li {
	padding: 1em 1.5em;
}

.menu-nav ul li>ul>li {
	padding: 0.5em 0;
}

.menu-nav ul li span {
	/* margin-bottom: 1em; */
}

.menu-nav ul li span::after {
	content: '\e625';
	margin-left: 5px;
	font-family: "iconfont" !important;
}

.menu-nav-ul-li-span-tran {
	transform: rotate(0deg) !important;
}

.menu-nav ul li:nth-last-child(1) {
	border-bottom: 0px;
}

.menu-nav ul li a {
	color: #eac899;
	display: block;
	width: 100%;
}

.menu-nav ul li i {
	display: inline-block;
	margin-right: 1em;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.1em;
}

.menu-nav ul li i:nth-child(1) {
	margin-right: 6px;
}

.menu-nav ul li i:nth-child(2) {
	margin-left: 0.5em;
	transform: rotate(180deg);
}

.menu-nav ul li>ul {
	display: none;
	margin-top: 15px !important;
	margin-left: 30px !important;
}

.top-menu {
	display: none;
	width: 1.8em;
	height: 1em;
	position: relative;
	margin-left: 1em;
}

.top-menu span {
	display: block;
	height: 2px;
	background: #000;
	position: relative;
	top: 0;
	transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
}

.top-menu span:nth-child(2) {
	top: 1em;
}

.top label {
	margin: 0;
	display: none;
}

/* 移动端导航结束 */
/* 全屏动画 */
.section {
	width: 100%;
	position: relative;
}

.in-pro-cate {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: #000000;
	overflow: hidden;
}

.in-pro-cate span {
	padding: 5px 10px;
	position: absolute;
	z-index: 1;
	display: block;
	font-size: 14px;
	border: 1px solid #fff;
	color: #fff;
	transform: translateY(-250px);
}

.in-pro-cate span a {
	color: inherit;
}

.in-pro-cate:hover span {
	transform: translateY(0);
}

.in-pro-cate img {
	width: 100%;
	opacity: 1;
}

.in-pro-cate:hover img {
	opacity: 0.5;
	transform: scale(1.1);
}

/* .in-1-box {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	overflow: hidden;

	display: flex;
	flex-flow: column;
	align-items: center;
}
 */
.in-1-title,
.in-2-title,
.in-3-title {
	font-size: 48px;
	font-weight: bold;
	color: #ccc;

}

.in-1-title span:first-child,
.in-2-title span:first-child,
.in-3-title span:first-child {
	color: #eac899;
}

.in-1-title span:last-child,
.in-2-title span:last-child,
.in-3-title span:last-child {
	color: #003B4A;
}

/* .in-1-title span,
.in-4-title span {
	color: #003B4A;
	text-shadow: none;
	text-shadow: -1px 1px 0 #eac899, 1px 1px 0 #eac899, 1px -1px 0 #eac899, -1px -1px 0 #eac899;
} */



/* .in-1-con i {
	color: #eac899;
	font-size: 30px;
	position: absolute;
}

.in-1-con i:first-child {
	left: -60px;
	top: -40px;

}

.in-1-con i:last-child {
	right: -60px;
	bottom: -40px;
	transform: rotate(180deg);
}
 */
.in-4-con {
	margin: 2vh 0;
	color: #fff;
	/* text-shadow: 0px 2px 2px rgb(0 0 0 / 40%); */
}


.in-4-box {
	width: 100vw;
	height: 100vh;
	/* position: fixed; */
	top: 0;
	right: 0;
	overflow: hidden;
	background-size: cover;
	display: flex;
	flex-flow: column;
	align-items: center;
}



.in-1-box,
.in-2-box,
.in-3-box {
	display: flex;
	justify-content: space-between;
	width: 100vw;
	height: 100vh;
	align-items: flex-end;
	padding: 20vh 0 20vh 10vw;
}

.in-1-box {}

.in-2-box {}

.in-1-left,
.in-2-left,
.in-3-left {
	width: 500px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: center;
}

.in-1-right,
.in-2-right,
.in-3-right {
	position:
		relative;
	width: 50vw;
}

.in-1-right img:nth-child(1),
.in-2-right img:nth-child(1),
.in-3-right img:nth-child(1) {
	position:
		absolute;
	left: -5vw;
	top: 5vw;
	z-index: 1;
}

.in-1-right img:nth-child(2),
.in-2-right img:nth-child(2),
.in-3-right img:nth-child(2) {

	width: 100%;
}

.in-2-title span,
.in-3-title span {
	/* -webkit-text-stroke: 1px #eac899; */
	/* -webkit-text-fill-color: rgba(0, 59, 74, 1); */
}

.in-1-con,
.in-2-con,
.in-3-con {
	color: #555;
	margin: 2vh 0;
	line-height: 24px;
	display: flex;
	text-align: left;
	align-items: flex-start;
	font-size: 14px;
	flex-flow: column;
}

.in-1-btn,
.in-2-btn,
.in-3-btn,
.in-4-btn {
	background: #003B4A;
	/* padding: 10px 15px; */
	border-radius: 3px;
	color: #eac899;
}

.in-1-con img,
.in-2-con img,
.in-3-con img {
	margin-bottom: 15px;
}

.in-1-btn,
.in-2-btn,
.in-3-btn {
	/* width: 120px; */
	margin-top: 2vh;
}

.in-1-btn a,
.in-1-btn a:hover,
.in-2-btn a,
.in-2-btn a:hover,
.in-3-btn a,
.in-3-btn a:hover,
.in-4-btn a,
.in-4-btn a:hover {
	color: inherit;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
}

.in-1-btn i,
.in-2-btn i,
.in-3-btn i,
.in-4-btn i {
	margin-left: 10px;
	transition: 0.3s all ease-in-out;
	display: inline-block;
}

.in-1-btn:hover i,
.in-2-btn:hover i,
.in-3-btn:hover i,
.in-4-btn:hover i {
	transform: rotate(180deg);
}

/* #dowebok img{
	animation:myfirst 5s;
		-moz-animation:myfirst 5s; 
		-webkit-animation:myfirst 5s; 
		-o-animation:myfirst 5s; 
}
@keyframes myfirst
{
	0%   {-webkit-filter: blur(0px);filter: blur(0px);}
	100% {-webkit-filter: blur(10px);filter: blur(10px);}
}

@-moz-keyframes myfirst 
{
	0%   {-webkit-filter: blur(0px);filter: blur(0px);}
	100% {-webkit-filter: blur(10px);filter: blur(10px);}
}

@-webkit-keyframes myfirst
{
	0%   {-webkit-filter: blur(0px);filter: blur(0px);}
	100% {-webkit-filter: blur(10px);filter: blur(10px);}
}

@-o-keyframes myfirst 
{
	0%   {-webkit-filter: blur(0px);filter: blur(0px);}
	100% {-webkit-filter: blur(10px);filter: blur(10px);}
} */
@media screen and (max-width:1600px) {

	.in-1-box,
	.in-2-box,
	.in-3-box {
		padding: 20vh 0 20vh 5vw;
		align-items: center;
	}

	.in-2-con,
	.in-3-con {

		text-shadow: none;
	}

	.in-1-right,
	.in-2-right,
	.in-3-right {
		width: 50vw;
	}

	.in-1-right img:nth-child(2),
	.in-2-right img:nth-child(2),
	.in-3-right img:nth-child(2) {
		width: 100%;
		max-width: 100%;
	}
}

@media screen and (max-width:1000px) {

	.in-1-left,
	.in-2-left,
	.in-2-right,
	.in-3-left,
	.in-3-right {
		width: 100%;
		/* justify-content: flex-end; */
		/* display: none; */
		max-width: 100%;
	}

	#products .nav-products {
		display: none !important;
	}
}

/*---------------*/
/***** Bubba *****/
/*---------------*/
.grid figure {
	position: relative;
	/* z-index: 1; */
	display: inline-block;
	overflow: hidden;
	/* margin: -0.135em; */
	/* width: 31%; */
	/* height: 100%; */
	background: #3085a3;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
}

.grid figure img {
	position: relative;
	height: 100%;
	display: block;
	/* min-height: 100%; */
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 1em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
	z-index: 1;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 800;
}

.grid figure h2 span {
	font-weight: 300;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 12px;
	color: #eac899;
}

#index figure.effect-bubba {
	display: flex;
	justify-content: center;
	align-items: center;
}

figure.effect-bubba {
	background: #003b4a;
	overflow: hidden;
}

figure.effect-bubba img {
	/* width: 100%; */
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: all 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #eac899;
	border-bottom: 1px solid #eac899;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #eac899;
	border-left: 1px solid #eac899;
	-webkit-transform: scale(1, 0);
	transform: scale(1, 0);
}

figure.effect-bubba h2 {
	padding-top: 70%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: all 0.35s ease-in-out;
	-webkit-transform: translate3d(0, -20px, 0);
	transform: translate3d(0, -20px, 0);
	color: #eac899;
}

figure.effect-bubba p {
	padding: 0px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2 {
	padding-top: 20%;
}

figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

figure.effect-bubba a {
	display: block;
}

figure.effect-bubba:hover img {
	transform: scale(1.1);
}


.in-3-a {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 200px;
	left: 100px;
}

.in-3-b {
	position: absolute;
	bottom: 200px;
	left: 100px;
	font-size: 2vw;
	text-align: left;
	font-family: AlibabaSans-Medium;
}

.in-3-b span {
	font-size: 3vw;
	color: #000000;
	display: block;
}

.in-3-c {
	width: 30vw;
	/* position: absolute;
	top: 100px;
	left: 40vw; */
}

.in-3-c img {
	width: 100%;
}

.in-3-d {
	width: 300px;
	position: absolute;
	text-align: left;
	right: 100px;
	top: 300px;
}

.in-3-e {
	width: 300px;
	height: 300px;
	position: absolute;
	right: 100px;
	bottom: 200px;
}

@media screen and (max-width:1400px) {
	figure.effect-bubba h2 {
		font-size: 20px;
	}
}

@media screen and (max-width:1000px) {
	.top {
		padding: 15px 4vw;
	}

	.mouse {
		display: none;
	}



	.in-1-a {
		left: 4vw;
	}

	.in-1-b {
		width: 60vw;
		right: 4vw;
	}

	.in-1-c {
		left: 4vw;
		justify-content: space-around;
		width: 92vw;
	}

	.in-1-d {
		right: 4vw;
		bottom: 40vh;
		width: auto;
	}

	.in-1-p1,
	.in-1-p2 {
		width: 25vw;
		height: 25vw;
	}

	.in-1-box,
	.in-2-box,
	.in-3-box,
	.in-4-box {
		padding: 10vh 4vw;
		flex-wrap: wrap;
		/* margin: 5vw 0; */
		flex-flow: column;
		justify-content: flex-start;
	}

	.in-1-right,
	.in-2-right,
	.in-3-right {
		width: 100%;
		margin-top: 2vh;
	}

	.in-1-right img:nth-child(1),
	.in-2-right img:nth-child(1),
	.in-3-right img:nth-child(1) {
		position:
			absolute;
		right: 10vw;
		top: -10vh;
		left: unset;
		z-index: 1;
	}

	#index .gotop {
		display: none;
	}


}

@media screen and (max-width:600px) {
	.in-1-a {
		font-size: 8vw;
		top: 40vh;
	}

	.in-1-a span {
		font-size: 10vw !important;
	}

	.in-1-b {
		width: 92vw;
	}

	.in-1-d {
		width: 92vw;
	}

	.in-1-p1,
	.in-1-p2 {
		width: 40vw;
		height: 40vw;
	}

	.in-1-con {
		/* color: #000; */
		/* text-shadow: 0px 2px 2px rgb(255 255 255 / 40%); */
		font-size: 18px !important;
	}

	.in-1-con i {
		font-size: 20px;
	}

	.in-1-con i:first-child {
		left: -40px;
		top: -20px;
	}

	.in-1-con i:last-child {
		right: -40px;
		bottom: -20px;
	}

	.in-pro-cate span {
		border: none;
	}

	.in-2-a {
		width: 50vw;
	}

	.in-2-b {
		font-size: 15vw !important;
		left: auto;
		padding: 0 10px;
	}

	figure.effect-bubba h2 {
		font-size: 14px;
	}

	figure.effect-bubba h2 span {
		/* display: none; */
	}


	.in-2-right,
	.in-3-right {
		width: 100%;
		/* bottom: 80px; */
	}

	.in-3-a,
	.in-3-e,
	.in-3-d {
		width: 40vw;
		height: 40vw;
	}

	.in-3-b {
		font-size: 4.5vw;
		bottom: 150px;
	}

	.in-3-b span {
		font-size: 10vw;
	}

	.in-3-c {
		width: 60vw;
	}

	.in-3-e {
		bottom: 100px;
	}

	.in-3-d {
		top: 150px;
	}
}

/* 全屏动画结束 */
#index .bot-copyright {
	position: fixed;
	bottom: 0;
	border-top: none;
}

#products-index .bot-copyright {
	position: absolute;
	bottom: 0px;
}

.bot-copyright {
	width: 100%;
	text-align: left;
	text-transform: uppercase;
	border-top: 1px solid #f3f3f3;
}

.bot-copyright-right {
	text-align: center;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
}

.bot-copyright-right a {
	color: inherit;
	text-decoration: none !important;
}

.bot-copyright-right i {
	font-size: 24px;
	display: block;
	width: 30px;
	color: #003B4A;
}

.bot-copyright-right i:hover {
	color: #eac899;
}

.bot-copyright-box {
	width: 100%;
	padding: 30px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.bot-copyright-left {
	color: #000000;
}

.bot-copyright-left a,
.bot-copyright-left a:hover {
	color: inherit;
	/* font-weight: bold; */
}

.bot-copyright span {
	color: #555;
}

@media only screen and (max-width:1000px) {
	.in-banner-con {
		font-size: 1.5vw;
		padding: 4vw;
	}

	.in-banner-con,
	.in-banner .carousel-inner .item {
		height: 400px;
	}

	.top label {
		display: block;
		margin-top: -5px;
		position: relative;
		z-index: 110;
	}

	.top-nav-box {
		padding: 1em;
	}

	.top-nav,
	.top-search {
		display: none;
	}

	.mob-search-box {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 1);
		padding: 4vw;
		z-index: 1000;
	}

	.mob-nav-box {
		display: flex;
	}

	.mob-search-i {
		display: block;
	}

	.mob-search-input {
		float: left;
		position: relative;
	}

	.mob-search-box button {
		background: transparent;
		border: 0px;
		color: #000;
		width: 30px;
		height: 30px;
		/* position: absolute; */
		position: absolute;
		/* font-size: 40px; */
		top: 5px;
		right: 10px;
		outline: none;
	}

	.mob-search-box button i {
		font-size: 20px;
	}

	.mob-search-cancel {
		float: right;
		margin-right: 2vw;
	}

	.mob-search-box input {
		height: 40px;
		width: calc(92vw - 50px);
		/* border-radius: 20px; */
		border: #eee 1px solid;
		outline: 0;
		padding: 5px 35px 5px 15px;
	}

	.mob-search-cancel i {
		font-size: 24px;
		font-weight: bold;
		display: block;
		cursor: pointer;
		margin-top: 4px;
	}

	#toggler:checked~.menu-nav {
		transform: scaleY(1);
		opacity: 1;
	}

	.top-menu {
		display: block;
	}

}

@media only screen and (max-width: 600px) {
	.top {}

	.top-text {
		display: none;
	}

	.top-bar {
		justify-content: flex-end;
	}

	.top-logo {
		max-width: 80px;
	}

	.top-nav-box {
		padding: 1.5em 1em;
	}

	.menu-nav {
		top: 0px;
	}


	.bot-copyright span {
		display: none;
	}

	.text-title {
		font-size: 36px;
	}

	.in-1-con,
	.in-2-con,
	.in-3-con {
		font-size: 14px !important;
	}

	.in-1-right,
	.in-2-right,
	.in-3-right {
		margin-top: 2vh;
	}

	.in-1-right img:nth-child(1),
	.in-2-right img:nth-child(1),
	.in-3-right img:nth-child(1) {
		width: 200px;
		right: 0;
		top: -3.5vh;
	}

	.bot-copyright-left {
		display: none;
	}

	.bot-copyright-right {
		width: 50%;
		text-align: center;
	}

	.bot-copyright-box {
		padding: 2vw;
		justify-content: center;
	}

	.gotop {
		right: 4vw !important;
	}

	#index .gotel {
		display: none !important
	}

	.gotel {
		display: block !important;
	}

	.in-1-title,
	.in-2-title {
		margin-top: 0vh;
		font-size: 30px;
	}


}

/* 鼠标动画 */
.mouse {
	background: #eac899 linear-gradient(transparent 0%, transparent 50%, #003b4a 50%, #003b4a 100%);
	position: absolute;
	left: calc(50vw - 16px);
	width: 32px;
	height: 46px;
	border-radius: 100px;
	background-size: 100% 200%;
	-webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
	animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}

.mouse:before,
.mouse:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.mouse:before {
	width: 28px;
	height: 42px;
	background-color: #003b4a;
	border-radius: 100px;
}

.mouse:after {
	background-color: #eac899;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	-webkit-animation: trackBallSlide 5s linear infinite;
	animation: trackBallSlide 5s linear infinite;
}


@-webkit-keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}

	20% {
		background-position: 0% 0%;
	}

	21% {
		background-color: #eac899;
	}

	29.99% {
		background-color: #003b4a;
		background-position: 0% 0%;
	}

	30% {
		background-color: #eac899;
		background-position: 0% 100%;
	}

	50% {
		background-position: 0% 0%;
	}

	51% {
		background-color: #eac899;
	}

	59% {
		background-color: #003b4a;
		background-position: 0% 0%;
	}

	60% {
		background-color: #eac899;
		background-position: 0% 100%;
	}

	80% {
		background-position: 0% 0%;
	}

	81% {
		background-color: #eac899;
	}

	90%,
	100% {
		background-color: #003b4a;
	}
}

@keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}

	20% {
		background-position: 0% 0%;
	}

	21% {
		background-color: #eac899;
	}

	29.99% {
		background-color: #003b4a;
		background-position: 0% 0%;
	}

	30% {
		background-color: #eac899;
		background-position: 0% 100%;
	}

	50% {
		background-position: 0% 0%;
	}

	51% {
		background-color: #eac899;
	}

	59% {
		background-color: #003b4a;
		background-position: 0% 0%;
	}

	60% {
		background-color: #eac899;
		background-position: 0% 100%;
	}

	80% {
		background-position: 0% 0%;
	}

	81% {
		background-color: #eac899;
	}

	90%,
	100% {
		background-color: #003b4a;
	}
}

@-webkit-keyframes trackBallSlide {
	0% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	6% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	14% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	15%,
	19% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	28%,
	29.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	30% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	36% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	44% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	45%,
	49% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	58%,
	59.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	66% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	74% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	75%,
	79% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	88%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
}

@keyframes trackBallSlide {
	0% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	6% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	14% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	15%,
	19% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	28%,
	29.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	30% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	36% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	44% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	45%,
	49% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	58%,
	59.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}

	66% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}

	74% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}

	75%,
	79% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}

	88%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
}

@-webkit-keyframes nudgeMouse {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	20% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	80% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes nudgeMouse {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	20% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	80% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes nudgeText {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	20% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	80% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes nudgeText {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	20% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	80% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes colorText {
	21% {
		color: #eac899;
	}

	30% {
		color: #003b4a;
	}

	51% {
		color: #eac899;
	}

	60% {
		color: #003b4a;
	}

	81% {
		color: #eac899;
	}

	90% {
		color: #003b4a;
	}
}

@keyframes colorText {
	21% {
		color: #eac899;
	}

	30% {
		color: #003b4a;
	}

	51% {
		color: #eac899;
	}

	60% {
		color: #003b4a;
	}

	81% {
		color: #eac899;
	}

	90% {
		color: #003b4a;
	}
}

.gotop {
	position: fixed;
	bottom: 6em;
	right: 1em;
	width: 3em;
	height: 3em;
	line-height: 3em;
	background: #eee;
	color: #003b4a;
	cursor: pointer;
	transition: 0s all ease-in-out !important;
	z-index: 90;
}

.gotop i {
	font-size: 24px;
	display: block;
}

.gotop:hover {
	background: #003b4a;
	color: #eac899;
}

.gotop:hover a {
	color: inherit;
	text-decoration: none;
	transition: 0s all ease-in-out !important;
}

.gotop a {
	display: block;
	text-decoration: none;
	width: 100%;
	color: inherit;
}

.gotop a:active,
.gotop a:visited,
.gotop a:link {
	text-decoration: none;
	color: inherit;
}

#index .gotop-btn {
	display: none;
}

#index .gomember {
	bottom: 6em;
}

.gomember {
	bottom: 9.2em;
	background: #eee;
	border: 1px solid #003b4a;
	color: #003b4a;
}

.gotel {
	bottom: 12.4em;
	display: none;
	background: #003b4a;
	color: #eac899;
}

.kefu {
	position: fixed;
	bottom: 130px;
	right: 70px;
	/* width: 3em; */
	/* height: 3em; */
	line-height: 3em;
	background: #eee;
	color: #eac899;
	background: #003b4a;
	transition: 0s all ease-in-out !important;
	padding: 10px;
	border-radius: 4px;
	display: none;
}

.kefu img {
	width: 100%;
}

.kefu span {
	display: block;
	height: 24px;
	margin-top: 10px;
	line-height: 24px;
}

.kefu:after {
	position: absolute;
	content: "";
	right: -22px;
	bottom: 0;
	width: 0;
	height: 0;
	border: 15px solid #003b4a;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

.headroom {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	transition: all .2s ease-in-out;
	backdrop-filter: blur(4.5px);
	border-bottom: 1px solid #f9f9f9;
}

.headroom--unpinned {
	top: -116px;
}

.headroom--pinned {
	top: 0;
	background-color: hsla(0, 0%, 100%, .5);

}

/* 公司简介 */
.who-we {
	width: 100%;
	max-width: 1300px;
	margin: 193px auto 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.who-we-con {
	text-align: left;
	padding-right: 50px;
	width: 50%;
	line-height: 30px;
}

.who-we-con span {
	display: block;
	font-size: 40px;
	color: #000;
	margin-bottom: 20px;
	font-weight: bold;
	text-transform: uppercase;
}

.who-we-video {
	width: 50%;
}

.who-we-video video {
	width: 100%;
}

.who-btn {
	width: 120px;
	margin-top: 20px;
}

.our-partners {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.our-partners span {
	position: absolute;
	z-index: 1;
	font-size: 6vw;
	text-transform: uppercase;
	font-weight: bold;
	background: url(/uistatic/img/giphy.gif);
	background-size: contain;
	background-position: top left;
	-webkit-background-clip: text;
	color: transparent;
}

.our-partners ul {
	display: flex;
	/* justify-content: center; */
	/* align-items: center; */
	/* background: #000; */
	flex-wrap: wrap;
	border-top: 1px solid #f3f3f3;
}

.our-partners ul li {
	width: 8.3333%;
	display: flex;
	align-items: center;
	background: #fff;
	overflow: hidden;
	opacity: 0.4;
	position: relative;
	cursor: pointer;
	justify-content: center;
	border-right: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;
}

.our-partners ul li:hover {
	opacity: 1;
}

.our-partners ul li:after {
	content: "";
	position: absolute;
	border: 0px solid #000;
	height: 10%;
	width: 10%;
}

.our-partners ul li:hover:after {
	content: "";
	position: absolute;
	border: 3px solid #000;
	height: 100%;
	width: 100%;
}

.our-partners ul li:hover img {
	transform: scale(1.1)
}

.our-partners ul li img {
	width: 100%;
	padding: 10% 15%;
}

.why-us {
	width: 100%;
	max-width: 1300px;
	margin: 80px auto;
}

.why-us .text-title {
	font-size: 40px;
	font-weight: bold;
	color: #000;
	margin-bottom: 40px;
}

.why-us ul {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.why-us ul li {
	width: 30%;
	border: 1px solid #f3f3f3;
	display: flex;
	align-items: center;
	flex-flow: column;
	padding: 30px;
	margin-bottom: 30px;
	position: relative;
	cursor: pointer;
}

.why-us-span {
	font-weight: bold;
	margin: 5% 0;
}

/* .why-us ul li:after{
	content: "";
	width: 100%;
	height: 0;
	border: 2px solid #000;
	position: absolute;
} */
.why-us ul li i {
	display: block;
	font-size: 50px;
	color: #000;
}

.why-us ul li:hover {
	border: 1px solid #000;
	transform: translateY(-10px);
}

.why-us-text {
	font-size: 16px !important;
}

.our-team {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
}

.our-team img {
	width: 100%;
	filter: brightness(0.5);
}

.our-team .text-title {
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	position: absolute;
	top: 50px;
	z-index: 1;
}

.about-box {
	width: 100%;
	max-width: 1400px;
	margin: 4vw auto;
	display: flex;
	flex-flow: column;
	/* gap: 3vw; */
}

.about-box>div {
	margin-bottom: 3vw;
}

.about-se-box {
	width: 100%;
	max-width: 1400px;
	text-align: left;
	margin: 0 auto;
	padding: 5vw 0;
}

.about-se {
	display:
		flex;
	justify-content: space-between;
	align-items: center;
}

.about-se .text-title {
	font-size: 36px;
	color: #003B4A;
}

.about-company-img img {
	/* width:100%; */
	/* max-width: 100%; */
}

.about-brand {
	width: 100%;
}

.about-brand video {
	width: 100%;
}

.about-brand iframe {
	width: 100%;
	height: 860px;
}
.about-company-map{
	display: none;
}
@media screen and (max-width:1400px) {
	.about-brand iframe {
		width: 100%;
		height: 58vw;
	}
}

@media screen and (max-width:600px) {
	.about-brand iframe {
		width: 100%;
		height: 52vw;
	}
}

.about-title {
	font-size: 36px;
	font-weight: bold;
	text-align: left;
	color: #eac899;
}

.about-title span {
	/* display: block; */
	color: #003B4A;
}


.about-title span:nth-child(2) {
	color: #003B4A;
	position: relative;
}

.about-title span:nth-child(2):before {
	width: 50px;
	height: 4px;
	content: "";
	background: #eac899;
	position: absolute;
	top: -45px;
	right: 0;
}

.about-brand-con {
	margin-top: 3vw;
	line-height: 30px;
	width: 100%;
	text-align: left;
}

.about-banner {
	margin-top: 150px;
	/* overflow: hidden; */
	/* height: auto; */
}

.about-company {
	display: flex;
	align-items: flex-end;
}

#about .about-box {
	margin-top: 0;
}

#about .contact-title span {
	margin-left: 20px;
}

.about-yl {
	width: 100%;
	margin-top: 115px;
	/* max-width: 1400px; */
	/* margin: 4vw auto; */
	padding: 5vw 0;
	background: #f9f9f9;
}

.about-company-con {
	/* padding: 3vw; */
	width: 100%;
	max-width: 1400px;
	text-align: left;
	margin: 0 auto;
}

.map-content {
	padding: 30px 0;
}

.map-module {
	width: 1200px !important;
	margin: 0 auto;
	position: relative;
	transition: all .3s ease;
}

.map-title {
	font-size: 24px;
	color: #333;
	text-align: center;
	margin: 50px 0;
	position: relative;
}

.map-branch .map-title {
	margin: 20px 0 0;
	z-index: 1;
}

.map-title:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	bottom: -23px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid;
	border-color: #20B09F transparent transparent;
}

.map-title:after {
	content: "";
	position: absolute;
	width: 52px;
	height: 3px;
	background-color: #20B09F;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
}

.map-content-info {
	position: relative;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
}

.branch-map-l {
	width: 849px;
	height: 600px;
	position: relative;
}

.map-content-box {
	width: 100%;
	height: 100%;
	background: url("/uistatic/img/map-bj.jpg") no-repeat center;
	position: relative;
}

.map-dot {
	position: absolute;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}

.beijing {
	left: 585px;
	top: 220px;
}

.tianjin {
	left: 604px;
	top: 234px;
}

.hebei {
	left: 575px;
	top: 254px;
}

.shanxi {
	left: 540px;
	top: 276px;
}

.liaoning {
	left: 77.6%;
	top: 32.6%;
}

.jilin {
	left: 696px;
	top: 167px;
}

.heilongjiang {
	left: 676px;
	top: 106px;
}

.shanghai {
	left: 668px;
	top: 341px;
}

.jiangsu {
	left: 646px;
	top: 316px;
}

.zhejiang {
	left: 78.2%;
	top: 63.3%;
}

.anhui {
	left: 71.2%;
	top: 55.6%;
}

.fujian {
	left: 625px;
	top: 428px;
}

.jiangxi {
	left: 595px;
	top: 402px;
}

.shandong {
	left: 610px;
	top: 284px;
}

.henan {
	left: 66.1%;
	top: 52.7%;
}

.hubei {
	left: 555px;
	top: 359px;
}

.hunan {
	left: 64.1%;
	top: 68.3%;
}

.guangdong {
	left: 67.6%;
	top: 77.6%;
}

.guangxi {
	left: 506px;
	top: 461px;
}

.chongqing {
	left: 495px;
	top: 364px;
}

.sichuan {
	left: 425px;
	top: 354px;
}

.guizhou {
	left: 484px;
	top: 424px;
}

.yunnan {
	left: 405px;
	top: 462px;
}

.shanxi1 {
	left: 502px;
	top: 312px;
}

.map-dot:after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	background-color: #003B4A;
	border-radius: 50%;
}

.map-dot.beijing:after {
	width: 13px;
	height: 12px;
	border-radius: 0;
	background: url("../images/icon-star.png") no-repeat center;
}

.branch-map-data {
	position: absolute;
	box-sizing: border-box;
	width: 260px;
	border: 1px solid #ccc;
	box-shadow: 0 0 2px 2px #e9e9e9;
	background-color: #fff;
	padding: 20px;
	z-index: 1;
	border-radius: 6px;
	/* display: none; */
}

.branch-map-data-title {
	/* border-bottom: 1px solid #eee; */
}

.branch-map-data-title p {
	font-size: 18px;
	color: #333;
	line-height: 28px;
}

.branch-map-data-info {
	/* max-height: 236px;
    overflow-y: auto; */
	/* padding-bottom: 10px; */
}

.branch-map-data-info img {
	width: 100%;
}

.branch-map-data-info:last-child .data-branch {
	/* border-bottom:none; */
}

.data-branch {
	border-bottom: 1px dashed #eee;
	box-sizing: border-box;
	padding-bottom: 10px;
}

.data-branch:last-child {
	border: none;
	padding-bottom: 0;
}

a,
button,
input,
textarea {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.data-branch .data-name {
	font-size: 14px;
	color: #666;
	line-height: normal;
	margin: 10px 0;
}

.data-branch p {
	font-size: 12px;
	color: #999;
	line-height: 20px;
}

.data-branch p {
	font-size: 12px;
	color: #999;
	line-height: 20px;
	margin: 0;
}

.branch-map-data:before {
	content: "";
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border: 8px solid;
	border-color: transparent #003B4A transparent transparent;
}

.branch-map-data:after {
	content: "";
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border: 8px solid;
	border-color: transparent #fff transparent transparent;
}

.map-dot.cur:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -3px;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #003B4A;
	animation: dot 4s infinite;
}

@keyframes dot {
	100% {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateX(-50%) scale(1.5);
		opacity: .1;
	}
}

#brand .about-brand-con {
	text-align: center;
}

#brand .about-brand img {
	margin-top: 20px;
}

#brand .about-box>div {
	margin-bottom: 0;
}

#brand .about-brand img {
	width: 100%;
}

.about-content {
	width: 100%;
}

.about-content ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		'a b '
		'c d ';
}

.about-content-li-1,
.about-content-li-4 {
	border: 1px solid #f3f3f3;
	display: flex;
	align-items: center;
	text-align: left;
	line-height: 30px;
}

.about-content-li-1 {
	grid-area: a;
}

.about-content-li-2 {
	grid-area: b;
}

.about-content-li-3 {
	grid-area: c;
}

.about-content-li-4 {
	grid-area: d;
}

.about-content ul li img {
	width: 100%;
}

.about-desi {
	margin: 3vw auto 0;
	width: 100%;
	overflow: hidden;
}

.about-desi ul {
	display: flex;
}

.about-desi li {
	width: 25%;
	list-style: none;
	transition: all 0.5s;
	background: #003B4A;
	overflow: hidden;
	position: relative;
}

.about-desi li img {
	display: block;
	opacity: 0.7;
}

.about-desi-con {
	position: absolute;
	bottom: 0;
	padding: 20px;
	width: 100%;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
}

.about-desi ul:hover li {
	width: 15%;
}

.about-desi ul li:hover {
	width: 55%;
}

.about-desi ul li:hover img {
	opacity: 1;
}

.about-company-con .title,
#about .about-brand .title {
	font-weight: bold;
	font-family: AlibabaSans-Medium;
	font-size: 24px;
	color: #003B4A;
}

.about-company-con span {
	margin: 20px 0;
	display: inline-block;
	margin-right: 10px;
}

.about-company-btn {
	background: #003b4a;
	color: #eac899;
	border-radius: 0px 20px 0px 20px;
	text-decoration: none;
	text-align: center;
	width: 120px;
}

.about-company-btn a {
	padding: 1em 1.5em;
	display: block;
	color: inherit;
	text-decoration: none;
}

.about-company-btn a:hover {
	color: #fff;
	text-decoration: none;
}

.about-mh-img {
	width: 100%;
	background: url(/uistatic/img/ab-1.jpg) center center no-repeat;
	height: 500px;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: flex-end;
	padding: 3vw;
	position: relative;
}

.about-dx {
	width: 100%;
}

.about-dx-title {
	font-size: 36px;
	font-weight: bold;
	color: #003B4A;
	margin-bottom: 3vw;
}

.about-dx-title span:nth-child(1) {
	-webkit-text-fill-color: rgba(234, 200, 153, 0.4);
	-webkit-text-stroke: 1px #eac899;
	font-size: 72px;
}

.about-dx-title span:nth-child(2) {
	-webkit-text-fill-color: rgba(0, 59, 74, 0);
	-webkit-text-stroke: 1px #003b4a;
}

.about-mh-title {
	transform: rotate(-90deg) !important;
	background: #003B4A;
	width: 320px;
	height: 90px;
	-webkit-text-fill-color: rgba(234, 200, 153, 0);
	-webkit-text-stroke: 1px #eac899;
	position: absolute;
	left: -160px;
	top: 205px;
	letter-spacing: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: lighter;
}

.about-dx-con {
	margin-top: 3vw;
	display: flex;
	flex-flow: column;
}

.about-dx-con ul {
	display: grid;
	grid-template-columns: repeat(3, 30%);
	gap: 5%;
}

.about-dx-con ul li {
	display: grid;
	/* flex-flow: column; */
	gap: 1vw;
	grid-template-rows: auto;
	padding: 2vw 1vw;
	border: 1px solid #eee;
}

.about-dx-con ul li:hover {
	transform: translateY(-10px);
	border: 1px solid #003B4A;
}

.about-dx-con-title {
	font-size: 16px;
	color: #000;
	font-weight: bold;
	display: flex;
	flex-flow: column;
	gap: 20px;
}
@media screen and (max-width:800px) {
	.about-company-con .title {
		font-size: 18px;
	}

	.about-banner {
		margin-top: 100px;
	}

	.about-content ul {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			'b'
			'a'
			'c'
			'd';
	}

	.about-desi ul {
		flex-wrap: wrap;
	}

	.about-desi ul li {
		width: 100%;
		margin-bottom: 3vw;
	}

	.about-content-li-1,
	.about-content-li-4 {
		border: none;
	}

	.about-company-con {
		padding: 3vw 0;
	}

	.about-desi ul:hover li {
		width: 100%;
	}

	.about-desi ul li:hover {
		width: 100%;
	}

	.about-desi li img {
		width: 100%;
	}

	.about-yl .text-title,
	.about-se .text-title,.about-title {
		font-size: 24px;
	}
	.map-content-info{
		display: none;
	}
	.about-company-map{
		display: block;
	}
	.about-company-map .branch-map-data-title{
		font-weight: bold;
	}
	.about-company-map .products-list{
		min-height: unset;
	}
	.about-company-map .products-list-name{
		background:#fff;
	}

}

.about-dx-con-title i {
	display: block;
	font-size: 50px;
	color: #eac899;
	font-weight: 100;
}

.about-group-sl {
	margin-top: 3vw;
}

.about-group-sl ul {
	width: 100%;
	display: grid;
	/* justify-content: space-between; */
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 200px);
	align-items: center;
	justify-items: center;
	/* flex-wrap: wrap; */
	gap: 20px;
}

.about-group-sl ul li {
	padding: 1vw;
	width: 100%;
	height: 100%;
	border: 1px solid #f3f3f3;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.about-group-sl ul li:hover {
	transform: translateY(-10px);
	border: 1px solid #003B4A;
}

.about-group-sl ul li span {
	display: block;
	font-weight: bold;
	font-family: AlibabaSans-Medium;
	font-size: 40px;
	color: #003B4A;
	position: relative;
}

.about-group-sl ul li span i {
	transform: rotate(45deg);
	display: block;
	position: absolute;
	right: -10px;
	top: -10px;
	color: #eac899;
}

.about-factory-img {
	margin-top: 3vw;
}

.about-factory-img ul {
	display: grid;
	/* justify-content: space-between; */
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	/* flex-wrap: wrap; */
	gap: 20px;
	width: 100%;
}

.about-factory-img ul li {
	display: flex;
	/* gap: 20px; */
	flex-flow: column;
	margin-bottom: 10px;
}

.about-honor-img ul li {
	display: flex;
	/* gap: 20px; */
	flex-flow: column;
	margin-bottom: 0px;
}

.about-factory-img ul li span {
	background: #003B4A;
	display: block;
	overflow: hidden;
	border: 1px solid #f3f3f3;
	margin-bottom: 10px;
}

.about-factory-img ul li img {
	width: 100%;
	opacity: 1;
	border: 8px solid #fff;
}

.about-factory-img ul li:hover img {
	opacity: 0.8;
	transform: scale(1.1);
}

.about-sh-img ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: auto;
}

.about-sh-img ul li {
	width: 23.5%;
}

.about-sh-img ul li:nth-child(1) {
	width: 49%;
}

.about-sh-img ul li:nth-child(2) {
	/* grid-column: 3 / 6; */
	width: 49%;
}

.about-contact {
	margin: 80px auto;
	width: 100%;
	max-width: 1300px;
}

.about-honor-img ul li:hover img {
	opacity: 1;
	transform: scale(1.2);

}

.about-contact ul {
	display: flex;
	justify-content: space-between;
	margin-top: 40px !important;
	flex-wrap: wrap;
}

.about-contact ul li {
	background: #000000;
	color: #fff;
	padding: 10px 20px;
	position: relative;
	width: 20%;
	border: 2px solid #fff;
	outline: 1px solid #000;
}

.about-contact ul li:after {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
}

.about-contact ul li i {
	display: inline-block;
	margin-right: 10px;
}

.about-contact ul li a {
	color: inherit;
}

.our-factory {
	width: 100%;
	max-width: 1300px;
	margin: 80px auto;
}

.our-factory .text-title {
	font-size: 40px;
	font-weight: bold;
	color: #000;
	margin-bottom: 0px;
}

.our-factory span {
	display: block;
	margin-bottom: 30px;
}

.our-factory ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.our-factory ul li {
	width: 31.5%;
	background: #000;
	overflow: hidden;
}

.our-factory ul li img,
.our-showroom ul li img {
	width: 100%;
	opacity: 0.7;
	/* -webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%); */
}

.our-factory ul li:hover img {
	opacity: 1;
	transform: scale(1.1);
	/* -webkit-filter: grayscale(30%);
	-moz-filter: grayscale(30%);
	-ms-filter: grayscale(30%);
	-o-filter: grayscale(30%);
	filter: grayscale(30%); */
}

.our-showroom {
	width: 100%;
	max-width: 1300px;
	margin: 80px auto;
}

.our-showroom .text-title {
	font-size: 40px;
	font-weight: bold;
	color: #000;
	margin-bottom: 40px;
}

.our-showroom ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.our-showroom ul li {
	width: 31.5%;
	margin-bottom: 30px;
	background: #000000;
	overflow: hidden;
}

.our-showroom ul img {
	width: 100%;
}

.our-showroom ul li:hover img {
	opacity: 1;
	transform: scale(1.1);
	-webkit-filter: grayscale(10%);
	-moz-filter: grayscale(10%);
	-ms-filter: grayscale(10%);
	-o-filter: grayscale(10%);
	filter: grayscale(10%);
}

.our-certificate {
	width: 100%;
	max-width: 1300px;
	margin: 80px auto;
}

.our-certificate .text-title {
	font-size: 40px;
	font-weight: bold;
	color: #000;
	margin-bottom: 40px;
}

.our-certificate ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.our-certificate ul li {
	width: 20%;
}

.our-certificate ul li img {
	width: 100%;
}

.our-certificate ul li:hover img {
	transform: scale(1.1);
}

@media screen and (max-width:1400px) {

	.about-box,
	.brand-title {
		padding: 0 3vw;
	}

	.about-yl,
	.about-se-box {
		padding: 5vw 3vw;
	}
}

@media screen and (max-width:1300px) {

	.who-we,
	.why-us,
	.about-contact,
	.our-factory,
	.our-showroom,
	.our-certificate {
		padding: 0 30px;
	}

	.about-sh-img ul {
		gap: 2%;
	}

	.about-sh-img ul li {
		width: 49%;
	}
}

@media screen and (max-width:1000px) {

	.about-contact ul li {
		width: 45%;
		margin-bottom: 20px;
	}

	.about-se {
		flex-flow: column;
	}

	.about-company-img {
		width: 100%;
		margin-top: 30px;
		text-align: center;
	}

	.about-company-img img {
		width: 100%;
	}

	.about-yl {
		margin-top: 85px;
	}

}

@media screen and (max-width:600px) {
	.who-we {
		margin-top: 150px;
	}

	.our-partners ul li {
		width: 25%;
	}

	.our-partners span {
		font-size: 12vw;
	}

	.who-we,
	.why-us,
	.about-contact,
	.our-factory,
	.our-showroom,
	.our-certificate {
		padding: 0 4vw;
	}

	.who-we-con {
		width: 100%;
		padding: 0;
		margin-bottom: 30px;
	}

	.who-we-video {
		width: 100%;
	}

	.black-btn {
		font-size: 14px !important;
	}

	.who-we-con span,
	.why-us .text-title {
		font-size: 24px;
	}

	.our-team .text-title {
		font-size: 24px;
		top: 10px;
	}

	.why-us ul li {
		width: 100%;
	}

	.about-contact ul li {
		width: 100%;
	}

	.our-factory ul li,
	.our-showroom ul li,
	.our-certificate ul li {
		width: 100%;
		margin-bottom: 15px;
	}

	.about-dx-title span:nth-child(1) {
		font-size: 36px;
	}

	.about-mh-title {
		left: -120px;
		top: 120px;
		width: 260px;
		height: 60px;
	}

	.about-yl {
		margin-top: 71px;
	}

}

#products-detail {
	/* width: 100vw; */
	/* height: 100vh; */
}

#products-detail header {
	/* position: unset; */
	/* border-bottom: 1px solid #f3f3f3; */
}

#products-detail footer {
	/* position: fixed; */
	/* bottom: 0; */
	width: 100%;
	background: #fff;
}

.products-box {
	width: 100%;
	/* margin: 4vw auto; */
	/* max-width: 1400px; */
	position: relative;
	/* padding: 0px 30px; */
	/* display: flex; */
	/* justify-content: space-between; */
}

.products-mbx {
	width: 100%;
	display: flex;
	align-items: center;
	max-width: 1400px;
	/* position: absolute; */
	margin: 0 auto 0;
	justify-content: space-between;
	/* top: 0; */
	/* left: 0; */
	/* z-index: 2; */
	/* right: 0; */
}

@media screen and (max-width:1800px) {
	.products-mbx {
		/* left: 3vw; */
		/* width: 75vw; */
		/* right: unset; */
		/* max-width: unset; */
	}
}

.products-mbx-name {
	font-size: 18px;
	color: #003B4A;
}

.products-mbx-name i {
	color: #ccc;
	margin-right: 10px;
}

.products-mbx-name a {
	color: inherit;
	font-weight: bold;
}

.products-mbx-cate {
	display: flex;
	align-items: center;
	font-size: 36px;
	/* gap: 20px; */
}

.products-mbx-cate a {
	margin-right: 20px;
}

.products-mbx-cate a:last-child {
	margin-right: 0px;
}

.products-mbx-cate a:hover {

	text-decoration: none;
}

.products-mbx-cate i {
	/* margin: 0 8px; */
	display: block;
	color: #ccc;
	font-size: 30px;
}

.products-mbx-cate .active,
.products-mbx-cate i:hover {
	color: #003B4A;
}

.products-cate {
	width: 200px;
	text-align: left;
	border-right: 1px solid #f3f3f3;
	padding: 100px 0;
}

.products-title {
	font-weight: bold;
	margin-bottom: 20px;
}

.products-cate .text-title {
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.products-title i {
	transform: rotate(180deg);
	display: none;
	float: right;
}

.products-banner-con {
	width: 100%;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	/* text-align: right; */
	padding: 20px 0;
}

.products-cate ul li {
	width: 100%;
	margin: 8px 0;
	color: #999;
	text-transform: capitalize;
}

.products-cate ul li a {
	color: inherit;
}

.products-cate ul li a:hover,
.products-cate .active {
	color: black;
}

.products-cate ul li>ul li i {
	margin-right: 5px;
	color: #fff;
}

.products-cate ul li>ul li:hover i,
.products-cate ul li>ul .active i {
	color: #000000;
}

.product-con-box {
	/* position: relative; */
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.products-list {
	width: 100%;
	/* margin: 0px auto; */
	/* padding: 100px 0 60px; */
	max-width: 1400px;
	/* position: absolute; */
	/* top: 0; */
	/* left: 0; */
	/* z-index: 1; */
	/* right: 0; */
}

.products-list>i {
	display: none;
}

.products-list-cate {
	font-size: 24px;
	text-transform: uppercase;
	text-align: left;
	margin-bottom: 40px;
}

.products-list>ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2vw;
}

.products-index-con-right .products-list>ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2vw;
}

@media screen and (max-width:1600px) {
	.products-index-con-right .products-list>ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
	}
}

.products-list>ul>li {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 12px;
	/* grid-auto-columns: 1fr; */
}

.products-list>ul>li a {
	color: inherit;
	display: -webkit-box;
	/* gap: 1vw; */
	text-decoration: none;
	/* grid-auto-columns: 1fr; */
}

.products-list>ul>li:hover .products-list-img {
	border: 1px solid #003B4A;
}

.products-list>ul>li:hover .products-list-name {
	border-bottom: 1px solid #003B4A;
}

.products-list-click {
	width: 200px;
	height: calc(100vh - 212px);
	right: 0;
	padding: 0;
	left: unset;
	top: 0;
	position: absolute;
	display: flex;
	align-items: center;
	flex-flow: column;
	justify-content: center;
}

.products-list-click i {
	display: block;
	font-size: 36px;
	color: #ccc;
	cursor: pointer;
}

.products-list-click i:hover {
	color: #003B4A;
}

.products-list-click i:nth-child(3) {
	transform: rotate(180deg);
}

.products-list-click .products-color,
.products-list-click .products-page,
.products-list-click .products-list-name {
	display: none;
}

.products-list-click ul {
	flex-flow: column;
	height: calc(100% - 103px);
	align-items: center;
	justify-content: center;
	/* overflow:hidden; */
	overflow-x: hidden;
	width: 100%;
	overflow-y: scroll;
	display: block;
}

.products-list-click ul::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.products-list-click ul li {
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

.products-list-click .products-list-img,
.products-list-click .products-list-img img {
	height: 100%;
	width: auto;
	margin: 0 auto;
}

.products-list-click .products-list-img i {
	display: none;
}

.products-color {
	position: absolute;
	width: 100%;
	display: flex;
	bottom: 35px;
	justify-content: center;
}

.products-color span {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #eee;
	cursor: pointer;
	margin: 0 3px;
	/* display: inline-block; */
}

.products-color span img {
	width: 100%;
	max-width: 100%;
	border-radius: 50%;
}

.products-list li img {
	width: 100%;
	cursor: pointer;
	/* margin: 0; */
	/* display: block; */

}


.products-color img {
	border: 2px solid #fff;
}

.products-color .active img {
	border: 2px solid #eac899;
}

.products-list-img {
	border: 1px solid #f3f3f3;
	width: 100%;
	overflow: hidden;
	/* display: block; */
	/* position: relative; */
}

.products-list-color {
	display: flex;
	/* height: 20px; */
	overflow: hidden;
}

.products-list-color .active img {
	border: 2px solid #eac899;
}

.products-list-color img {
	border: 2px solid #fff;
}

.products-list-name {
	padding: 10px 12px;
	border: 1px solid #f3f3f3;
	text-align: left;
}

.products-list-color span {
	/* display: inline-block; */
	width: 30px;
	height: 30px;
	margin-right: 5px;
	/* float: left; */
	border: 1px solid #f3f3f3;
}

.products-list-img i {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	height: 100%;
}

.products-list-img i:before {
	content: '';
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}

.products-list-img i:after {
	content: '';
	transition: all .3s;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: scale(0);
	background-color: #eee;
}

.products-list-img:hover i:after {
	transform: scale(0.9);
}

.products-list-no {
	width: 100%;
	padding: 10px 0;
	text-align: left;
}

.products-list-no span {
	color: #000000;
	display: inline-block;
	font-weight: bold;
	margin-right: 5px;
}

.products-list-desc {
	width: 100%;
	text-align: left;
	padding-bottom: 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.products-list-desc span {
	color: #000000;
	display: inline-block;
	font-weight: bold;
	margin-right: 5px;
}

.products-list-btn {
	text-align: left;
	width: 100%;
}

.products-list>ul>li:hover .products-list-img img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.mob-cate-btn {
	display: none;
	float: right;
}

.products-cate-box {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2vw 0;
}

.products-cate-list {
	width: 100%;

}

.products-cate-list ul {
	display: grid;
	gap: 2vw;
	grid-template-columns: repeat(3, 1fr);
}

.products-cate-list ul li a {
	color: inherit;
	text-decoration: none;
}

.products-cate-list ul li img {
	width: 100%;
}

.products-cate-img {
	overflow: hidden;
}

.products-cate-list ul li:hover img {
	transform: scale(1.1);
}

.products-cate-con {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #ccc;
	margin: 15px 0;
	text-align: left;
}

.products-cate-name {
	padding: 10px 15px;
	text-align: left;
	border: 1px solid #f3f3f3;
}

.products-cate-list ul li:hover .products-cate-name {
	border: 1px solid #003B4A;
}

#products-cate .products-page {
	margin-top: 2vw;
}

@media screen and (min-width:600px) and (max-width:1400px) {

	.product-con-box,
	.products-detail-box {
		min-height: 800px;
	}

	.products-detail-r {
		left: -50px !important;
	}

	.products-detail-r-click {
		left: calc(100vw - 120px) !important;
	}

	.products-list {
		min-height: 925px;
	}
}

@media screen and (min-width:1000px) {
	.products-list>ul {
		/* justify-content: flex-start; */
	}

	.products-list>ul>li {
		/* margin-right: 3%; */
		/* margin-bottom: 3%; */
	}

	.products-list>ul>li:nth-child(4n) {
		/* margin-right: 0; */
	}

}

.products-page {
	margin-top: 100px;
	text-align: left;
	display: flex;
	justify-content: center;
}

.products-page .pagination {
	display: flex;
}

.products-page .pagination>.products-page .pagination>li>a,
.products-page .pagination>li>span {
	border: none;
	color: inherit;
	margin: 0 5px;
}

.products-page li {
	margin: 0 5px;
}

.products-page li a {
	padding: 15px 20px !important;
	color: inherit !important;
	border-radius: 4px;
}

.products-page .pagination>.active>a,
.products-page .pagination>.active>a:focus,
.products-page .pagination>.active>a:hover,
.products-page .pagination>.active>span,
.products-page .pagination>.active>span:focus,
.products-page .pagination>.active>span:hover {
	color: #eac899;
	background: #003B4A;
	border-radius: 4px;
	z-index: 0;
}

.products-page .pagination .active {
	color: #fff;
	color: #eac899;
	border-radius: 4px;
	background: #003B4A;
}

.products-mob-cate-box {
	display: none;
}

.products-detail {
	/* position: absolute; */
	/* left: 0; */
	/* top: 0; */
	width: 100%;
	/* padding: 2vw 0; */
	/* height: calc(100vh - 212px); */
	/* border-right: 1px solid #f3f3f3; */
	/* gap: 3vw; */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.products-detail-xq-box {
	width: 100%;
	position: relative;
	border: 1px solid #f3f3f3;
	padding: 30px;
}

.products-detail-con-title {
	border: 1px solid #f3f3f3;
	padding: 13px 20px;
	position: absolute;
	top: -20px;
	background: #fff;
	font-weight: bold;
	left: calc(50% - 49px);
	color: #003B4A;
}

.products-detail-xq {
	text-align: center;
}

.products-detail-xq img {
	max-width: 100%;
}

.products-detail-con {
	/* width: calc(100% - 230px); */
	/* padding: 100px 0; */
	width: 50%;
}

.products-detail-sm {
	width: 100%;
	display: flex;
	flex-flow: row;
	align-items: center;
}

.products-detail-sm i {
	font-size: 30px;
	color: #ccc;
	cursor: pointer;
	transform: rotate(-90deg);
}

.products-detail-sm i:hover {
	color: #003B4A;
}

.products-detail-sm i:last-child {
	transform: rotate(90deg);
}

.products-detail-sm ul {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* flex-flow: row; */
	/* align-items: center; */
	gap: 10px;
	/* justify-content: center; */
	/* height: 200px; */
	overflow-x: hidden;
	overflow-y: scroll;
}

.products-detail-sm ul::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.products-detail-sm ul li {
	/* width: 50px; */
	border: 1px solid #eee;
	padding: 0;
	/* border-radius: 50%; */
	cursor: pointer;
	/* height: 50px; */
	/* margin: 15px 0; */
}

.products-detail-sm ul li img {
	/* height: 100%; */
	width: 100%;
}

.products-detail-big {
	width: 35%;
	display: grid;
	/* position: relative; */
	gap: 10px;
}

.products-detail-big .carousel-control.right,
.products-detail-big .carousel-control.left {
	background-image: none;
}

.products-detail-big>img {
	width: 100%;
	border: 1px solid #f3f3f3;
}

.products-detail-big-bg {
	background: #eee;
	height: 80%;
	width: 80%;
	border-radius: 50%;
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: -1;
}

.products-detail-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.products-detail-img {
	width: 45%;
}

.products-detail-img-big img {
	width: 100%;
}

.products-detail-img-sm {
	width: 100%;
	margin-top: 20px;
	display: flex;
	justify-content: flex-start;
}

.products-detail-img-sm span {
	width: 23%;
	display: inline-block;
	border: 1px solid #f3f3f3;
	margin-right: 2.6%;
}

.products-detail-img-sm span:nth-last-child(1) {
	margin-right: 0%;
}

.products-detail-img-sm img {
	width: 100%;
}

.products-detail-box {
	width: 100%;
	text-align: left;
	/* height: calc(100vh - 212px); */
	margin: 3vw 0;
	/* top: 0px; */
	display: grid;
	gap: 3vw;
	/* position: absolute; */
	/* background: #fff; */
	/* overflow: hidden; */
	/* z-index: 80; */
}

.products-detail-r {
	border: 1px solid #f3f3f3;
	width: 40px;
	display: flex;
	height: 80px;
	left: 30px;
	top: 40vh;
	position: absolute;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 1;
	background: #fff;
}

.products-detail-r i {
	font-size: 24px;
	color: #003B4A;
	transform: rotate(0deg);
}

.products-detail-r-click {
	/* right: 240px; */
	left: calc(100vw - 240px);
}

.products-detail-r-click i {
	transform: rotate(180deg);
}

.products-detail-name {
	font-size: 36px;
	margin-bottom: 20px;
	text-transform: capitalize;
	color: #000000;
}

.products-detail-price {
	color: #eac899;
}

.products-detail-price span {
	color: #003B4A;
	font-size: 48px;
	font-weight: bold;
}

.products-detail-ms {
	margin-top: 50px;
	width: 100%;
}

.products-detail-color {}

.products-detail-no {}

.products-detail-no span {
	color: #003B4A;
	font-weight: bold;
}

.products-detail-color span {
	width: 35px;
	height: 35px;
	display: inline-block;
	border-radius: 2px;
	border: 1px solid #ccc;
	cursor: pointer;
	margin-right: 5px;
}

.products-detail-color .active img {
	border: 2px solid #eac899;
}

.products-detail-color img {
	width: 100%;
	border-radius: 2px;
	border: 2px solid #fff;
}

.products-detail-size span,
.products-detail-cz span {
	display: inline-block;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid #eee;
	cursor: pointer;
	margin-right: 5px;
	border-radius: 2px;
}

.products-detail-size .active,
.products-detail-cz .active {
	background: #003B4A;
	color: #eac899;
}

.products-detail-cz {}

.products-detail-cz {}

.products-detail-text {
	margin-top: 20px;
	color: #ccc;
}

.products-detail-btn {
	background: #003B4A;
	padding: 10px 15px;
	border-radius: 3px;
	color: #eac899;
	width: 120px;
}

.products-detail-ms-title {
	width: 100%;
	border-bottom: 1px solid #f3f3f3;
	overflow: hidden;
}

.products-detail-ms-title span {
	padding: 10px 15px;
	background: red;
	display: block;
	float: left;
	color: #fff;
}

.products-detail-btn i {
	margin-right: 10px;
	display: inline-block;
}

.products-detail-btn:hover i {
	transform: rotate(360deg);
}

.products-detail-btn a,
.products-detail-btn a:hover {
	color: inherit;
	text-decoration: none !important;
}

.products-detail-ms-con {
	padding-top: 30px;
	line-height: 24px;
	text-align: left;
}

.products-detail-ew {
	display: none;
}

.products-detail-ew img {
	border: #003B4A 1px solid;
}

.products-detail-ms img {
	width: 100%;
}

.products-detail-tag a {
	display: inline-block;
	padding: 5px 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	color: #fff;
	background: #69956d;
}

.products-detail-tag a:hover {
	color: #fff;
}

.products-detail-rel a {
	margin-right: 5px;
	margin-bottom: 5px;
	color: inherit;
}


.products-detail-mob-btn {
	display: none;
}

.products-inquiry {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#products-index {
	display: flex;
	justify-content: space-between;
}

.products-index-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 1;
	/* overflow: auto; */
	position: absolute;
}

.products-index-jk {
	position: relative;
	width: 40vw;
	background: url(/uistatic/img/p-jk.jpg) center center no-repeat;
	height: 100vh;
	background-size: cover;
	border-radius: 0 100px 100px 0px;
	/* z-index: 1000; */
}
.products-index-ss {
	position: relative;
	width: 40vw;
	background: url(/uistatic/img/p-ss.jpg) center center no-repeat;
	height: 100vh;
	background-size: cover;
	border-radius: 0 100px 100px 0px;
	/* z-index: 1000; */
}
.products-logo {
	position: absolute;
	padding: 30px;
	/* top:15px; */
	/* left:20px; */
}

.products-index-left>img {
	border-radius: 0 100px 100px 0px;
	height: 100vh;
	width: 100%;
}

.products-index-right {
	width: 60vw;
	position: relative;
}

.products-index-con-right {
	/* position: absolute; */
	right: 0;
	height: calc(100vh - 196px);
	top: 116px;
	overflow: scroll;
	margin-top: 101px;
	padding: 5vw 3vw 3vw;
	overflow-x: hidden;
}

.products-index-con-right::-webkit-scrollbar {
	display: none;
}

.products-index-con-img {
	display: none;
}

.products-index-con-title {
	display: flex;
	justify-content: start;
	align-items: center;
}

.products-index-con-title .text-title {
	font-size: 60px;
	color: #003B4A;
	display: block;
}

.products-index-con-title span:nth-child(2) {
	background: #003B4A;
	padding: 5px 10px;
	background: #003B4A;
	/* padding: 10px 15px; */
	display: inline-table;
	height: 40px;
	margin-left: 20px;
	line-height: 40px;
	border-radius: 3px;
	color: #eac899;
}

.products-index-con-title span:nth-child(2) i {
	margin-left: 10px;
}

.products-index-con-title span:nth-child(2) a {
	color: inherit;
	display: block;
	text-decoration: none;
}

.products-index-con-text {
	padding: 20px 0;
	text-align: left;
}

@media screen and (max-width:1400px) {
	.products-detail {
		width: 100%;
		/* border-bottom: 1px solid #f3f3f3; */
		border-right: unset;
		height: auto;
		top: 100px;
		padding: 30px;
	}

	.products-detail-big {
		width: 40vw;
	}

	.products-detail-con {
		width: 50vw;
	}

	.products-list-click {
		width: 100%;
		bottom: 95px;
		flex-flow: row;
		display: none !important;
		/* top: calc(100vh - 95px); */
		height: auto;
	}

	.products-list-click ul {
		flex-flow: row;
		height: 100px;
		justify-content: flex-start;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.products-list-click ul li {
		/* width: 25%; */
		float: left;
	}

	.products-list-click i {
		transform: rotate(270deg)
	}

	.products-list-click i:nth-child(3) {
		transform: rotate(90deg)
	}

	.products-mbx {
		width: 100%;
		/* padding: 0 4vw; */
		/* left: unset; */
	}
}

@media screen and (max-width:1200px) {
	#products-index .top-logo {
		display: block;
	}

	.products-index-left,.products-index-jk,.products-index-ss {
		display: none;
	}

	.products-index-right {
		width: 100vw;
		position: unset;
	}

	.products-index-jk-img {
		display: block;
		width: 100%;
		height: 40vh;
		border-radius: 0 100px 0 100px;
		margin-bottom: 15px;
		background: url(/uistatic/img/p-jk.jpg) center center no-repeat;
		background-size: cover;
	}
	.products-index-ss-img {
		display: block;
		width: 100%;
		height: 40vh;
		border-radius: 0 100px 0 100px;
		margin-bottom: 15px;
		background: url(/uistatic/img/p-ss.jpg) center center no-repeat;
		background-size: cover;
	}

	.products-index-con-img img {
		width: 100%;
	}
}

@media screen and (max-width:600px) {

	.products-index-con-right {
		height: calc(100vh - 124px);
		margin-top: 72px;
	}
	.products-index-con-img,.products-index-jk-img,.products-index-ss-img {
		height:30vh;
		border-radius: 0 60px 0 60px;
	}

	.products-index-con-title .text-title {
		font-size: 36px;
	}
}

.products-inquiry input {
	width: 48%;
	height: 40px;
	border: #eee 1px solid;
	font-size: 12px;
	margin-bottom: 10px;
	text-transform: uppercase;
	/* margin-bottom: 10px; */
	padding: 5px 10px;
}

.products-inquiry input:nth-child(1) {
	width: 100%;
}

.products-inquiry textarea {
	height: 80px;
	width: 100%;
	/* border-radius: 20px; */
	border: #eee 1px solid;
	outline: 0;
	font-size: 12px;
	text-transform: uppercase;
	margin-bottom: 10px;
	padding: 5px 10px;
}

.products-inquiry input:focus,
.products-inquiry textarea:focus {
	border: 1px solid #000;
	outline: 0;
}

.products-inquiry-btn {
	width: 120px;
}

.products-inquiry-btn:focus {
	outline: 0;
}

.products-detail-goback {
	width: 100%;
	margin-top: 10px;
	padding: 10px 15px;
	color: #fff;
	background: red;
}

.products-detail-goback a,
.products-detail-goback a:hover {
	color: inherit;
}

.products-detail-inquiry-btn {
	width: 130px;
}

.products-detail-inquiry-btn i {
	margin-right: 10px;
}

.mob-cate-name {
	display: none;
	width: 100%;
}

.directory {
	margin: calc(117px + 1vw) auto 1vw;
	/* width: 100vw; */
	overflow: hidden;
	/* max-width: 1400px; */
	padding: 0 1vw;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 14vw);
	gap: 1vw;
	grid-template-areas:
		'a b c d d'
		'e e c f g'
		'h i i j g';
}

.directory .effect-bubba {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.directory .effect-bubba p {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.directory figure.effect-bubba h2 {
	padding-top: 40%;
}

.directory figure figcaption {
	padding: 1vw;
}

.directory .directory .item {
	font-size: 4em;
	text-align: center;
	border: 1px solid #e5e4e9;
}

.directory .item-1 {
	grid-area: a;
}

.directory .item-2 {
	grid-area: b;
}

.directory .item-3 {
	grid-area: c;
}

.directory .item-4 {
	grid-area: d;
}

.directory .item-5 {
	grid-area: e;
}

.directory .item-6 {
	grid-area: f;
}

.directory .item-7 {
	grid-area: g;
}

.directory .item-8 {
	grid-area: h;
}

.directory .item-9 {
	grid-area: i;
}

.directory .item-10 {
	grid-area: j;
}

.directory .item-1 img,
.directory .item-2 img,
.directory .item-4 img,
.directory .item-5 img,
.directory .item-6 img,
.directory .item-8 img,
.directory .item-9 img,
.directory .item-10 img {
	width: 100%;
	height: auto !important;
}

.directory .item-4 h2,
.directory .item-5 h2,
.directory .item-9 h2 {
	padding-top: 17% !important;
}

.directory .item-3 h2,
.directory .item-7 h2 {
	padding-top: 82% !important;
}

.directory .item-3 img,
.directory .item-7 img {
	width: auto;
}

.directory ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.directory ul li {
	width: 22%;
	margin-right: 4%;
	margin-bottom: 4%;
	position: relative;
	overflow: hidden;
}

.directory ul li:nth-child(4n) {
	margin-right: 0;
}

.directory ul li img {
	width: 100%;
}

.directory ul li:hover img {
	transform: scale(1.1);
}

.directory-text {
	position: absolute;
	bottom: 0px;
	display: flex;
	justify-content: center;
	height: 15%;
	align-items: center;
	width: 100%;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	font-family: AlibabaSans-Medium;
}

.directory-cate {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	top: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.directory-cate span {
	display: block;
	width: 100%;
	font-size: 24px;
	margin-top: 25%;
}

.directory-btn {
	padding: 5px 10px;
	border: 1px solid #ccc;
	margin-bottom: 25%;
}

.directory-btn a,
.directory-btn a:hover {
	color: inherit;
}

.directory ul li:hover .directory-cate {
	top: 0;
}

@media screen and (max-width:1400px) {
	.directory h2 {
		font-size: 18px;
	}
}

@media screen and (max-width:1000px) {
	.products-list>ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
	}

	.products-banner {
		margin-top: 85px !important;
	}

	.products-list>ul>li {}

	.products-detail-img,
	.products-detail {
		width: 100%;
		flex-flow: column;
	}

	.products-detail-big,
	.products-detail-con {
		width: 100%;
	}

	.products-banner,
	.products-cate-box {
		padding: 4vw !important;
	}

	.products-cate-list ul {
		display: grid;
		gap: 4vw;
		grid-template-columns: repeat(2, 1fr);
	}

	.directory {
		margin: calc(87px + 1vw) auto 1vw;
		/* width: 100vw; */
		overflow: hidden;
		/* max-width: 1400px; */
		padding: 0 1vw;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(6, 30vw);
		gap: 2vw;
		grid-template-areas:
			'a b c '
			'e e c'
			'h i i '
			'd d d '
			'f g g'
			'j g g ';
	}

	.directory .item-7 h2 {
		padding-top: 50% !important;
	}

	.directory .item-3 h2 {
		padding-top: 120% !important;
	}

	.directory .item-4 h2 {
		padding-top: 16% !important;
	}

	.directory .item-7 img {
		width: 100%;
		height: auto;
	}


}

@media screen and (max-width:600px) {
	.directory .effect-bubba p {
		padding: 0 1.5vw;
		-webkit-line-clamp: 3;

		display: none;
	}

	.products-box {
		flex-wrap: wrap;
		padding: 4vw;
		/* margin-top: 77px; */
		/* margin-bottom: 52px; */
		overflow: hidden;
	}

	.products-banner {
		margin-top: 71px !important;
	}

	.products-list-cate {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.products-cate-list ul {
		display: grid;
		gap: 4vw;
		grid-template-columns: repeat(1, 1fr);
	}

	.mob-cate-btn {
		display: inline-flex;
		padding: 5px 10px;
		color: #fff;
		/* font-size: 24px; */
		background: #000;
	}

	.products-detail-xq-box {
		padding: 4vw 0 0;
		border-left: none;
		border-right: none;
		margin-top: 8vw;
		border-bottom: none;
	}

	.products-detail-mob-btn {
		display: none;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 58px;
		left: calc(50vw - 40px);
		height: 30px;
		line-height: 30px;
		width: 80px;
		border: 1px solid #f3f3f3;
		background: #003b4a;
		border-radius: 3px;
	}

	.products-detail-mob-btn i {
		transform: rotate(270deg);
		display: block;
		color: #eac899;
	}

	.mob-cate-btn i {
		font-size: 24px;
	}

	.products-list ul .text-title {
		font-size: 14px;
	}

	.products-cate {
		width: 100%;
		display: none;
	}

	.products-title {
		/* padding: 10px 15px; */
		/* border: 1px solid #f3f3f3; */
		cursor: pointer;
		font-size: 7vw !important;
	}

	.products-title i {
		display: inline-block;
	}

	.products-cate ul {
		display: none;
	}

	.products-list {
		width: 100%;
		padding: 0;
		/* margin-bottom: 30px; */
		position: unset;
	}

	.products-detail-box {
		height: auto;
		/* position: unset; */
		/* display: flex; */
		margin: 0;
		/* justify-content: flex-start; */
		/* flex-flow: column; */
		/* margin-bottom: 50px; */
		/* display: none; */
		overflow: unset;
	}

	.products-detail-click {
		display: none;
	}

	.products-detail {
		flex-flow: column;
		position: unset;
		padding: 0;
	}

	.products-detail-sm {
		/* display: none; */
	}

	.products-detail-big {
		width: 100%;
	}

	.products-mob-cate-box {
		display: flex;
		position: fixed;
		width: 80vw;
		height: 100vh;
		z-index: 1000;
		top: 0;
		left: 100vw;
		background: rgba(0, 0, 0, 0.9);
		justify-content: center;
		align-items: center;
	}

	.products-detail-r {
		display: none !important;
		top: 0;
	}

	.products-mob-cate-box-flex {
		display: flex;
	}

	.products-mob-cate {
		width: 80vw;
		color: #ccc;
		/* height: 200px; */
		padding: 8vw;
		text-align: left;
		position: relative;
	}

	.products-mob-cate>i {
		display: block;
		position: absolute;
		top: -30px;
		right: 20px;
		color: #fff;
		font-weight: bold;
		font-size: 24px;
		width: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 15px;
		height: 30px;
	}

	.products-mob-cate ul li i {
		margin-right: 5px;
		color: transparent;
	}

	.products-mob-cate ul li.active a {
		color: #fff;
	}

	.products-mob-cate ul li>ul .active i {
		color: #fff;
	}

	.products-mob-cate .text-title {
		color: #fff;
		text-transform: uppercase;
	}

	.mob-cate-name {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-transform: uppercase;
	}

	.products-mob-cate ul {
		width: 100%;
	}

	.products-mob-cate ul li {
		margin: 5px 0;
		padding: 5px 0px;
		text-transform: capitalize;
	}

	.products-mob-cate ul li a {
		color: inherit;
	}

	.products-detail-con {
		width: 100%;
		padding: 0;
		margin: 4vw 0;
	}

	.products-detail-price span {
		font-size: 36px;
	}

	.products-detail-name {
		margin: 20px 0;
		font-size: 30px;
	}

	.products-detail-ms {
		margin-top: 20px;
	}

	.products-detail-ms-con {
		padding-top: 20px;
	}

	.products-inquiry input {
		width: 100%;
	}

	.directory {
		margin: calc(72px + 2vw) auto 2vw;
		padding: 0 4vw;
	}

	.directory ul {
		justify-content: space-between;
	}

	.directory ul li {
		width: 48%;
		margin-right: 0;
	}

	.directory .item-3 h2 {
		padding-top: 120% !important;
	}

	.directory figure.effect-bubba h2 {
		padding-top: 62%;
	}

	.item-4 h2,
	.item-5 h2,
	.item-9 h2 {
		padding-top: 29% !important;
	}

	.directory .item-4 h2 {
		padding-top: 19% !important;
	}

	.directory .item-7 h2 {
		padding-top: 55% !important;
	}

	.directory-cate span {
		font-size: 16px;
	}

	.directory-text {
		font-size: 12px;
	}

	.products-color {

		bottom: 35px;
	}

	.products-color span {
		width: 20px;
		height: 20px;
		clear: both;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (min-width:601px) {
	.products-detail-mob-btn {
		/* display: none !important; */
	}
}

.news-banner {
	background: url(/uistatic/img/news-banner.jpg) center center no-repeat;
	background-size: cover;
	height: 30vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.products-banner {
	/* height: 30vw; */
	/* display: flex; */
	/* justify-content: center; */
	padding: 3vw 0;
	/* flex-flow: column; */
	margin-top: 115px;
	width: 100%;
	text-align: left;
	border-top: 1px solid #f3f3f3;
	border-bottom: 1px solid #f3f3f3;
}

.brand-banner {
	background: url(/uistatic/img/brand-banner.jpg) center center no-repeat;
	background-size: cover;
	height: 30vw;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	/* text-align: right; */
}

.news-box {
	margin: 100px auto;
	width: 100%;
	max-width: 1400px;
}

.products-service-box {
	margin: 100px auto;
	width: 100%;
	max-width: 1400px;
}

.products-service-list {
	width: 100%;
	max-width: 1400px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 500px 500px;
}

.products-service-list figure {
	/* width: 23.5%; */
	width: 100%;
}

.products-service-list figure.effect-bubba:hover h2 {
	padding-top: 40%;
}

.news-mbx-box {
	/* padding: 50px 0; */
	border-bottom: 1px solid #f3f3f3;
}

.news-mbx {
	width: 100%;
	max-width: 1400px;
	/* padding: 50px 0; */
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.news-mbx-left {}

.news-mbx-left ul {
	display: flex;
}

.news-mbx-left ul li {
	/* padding: 30px 20px; */
	transition: 0.3s all;
}

.news-mbx-left ul li:hover,
.news-mbx-left ul .active {
	background: #003b4a;
	color: #eac899;
	cursor: pointer;
}

.news-mbx-left ul li a {

	display: -webkit-box;
	color: inherit;
	padding: 30px 20px;
	text-decoration: none;
}

.news-mbx-right {
	color: #aaa;
}

.news-mbx-right i {
	color: #003B4A;
}

.news-mbx-right span {
	color: #003B4A;
}

.news-list {
	margin: 70px 0;
	width: 100%;
}

.news-title {
	text-align: left;
	font-size: 3vw;
	font-weight: bold;
	color: #003b4a;
	text-transform: uppercase;
	width: 100%;
	max-width: 1400px;
}

.products-title {
	/* text-align: right; */
	font-size: 2.5vw;
	font-weight: bold;
	color: #003b4a;
	text-transform: uppercase;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	max-width: 1400px;
	/* display: flex; */
	/* flex-flow: column-reverse; */
}

.brand-title {
	text-align: left;
	font-size: 3vw;
	font-weight: bold;
	color: #003b4a;
	text-transform: uppercase;
	width: 100%;
	max-width: 1400px;
	display: flex;
	flex-flow: column;
}

.news-list a,
.products-title a {
	color: inherit;
}

.news-title span,
.products-title span,
.brand-title span {
	/* font-weight: normal; */
	color: rgba(255, 255, 255, 1);
	text-transform: uppercase;
	/* text-shadow: -1px 1px 0 #eac899, 1px 1px 0 #eac899, 1px -1px 0 #eac899, -1px -1px 0 #eac899; */
	margin-left: 10px;
	/* -webkit-text-fill-color: rgba(234, 200, 153, 0.3); */
	/* -webkit-text-stroke: 1px #eac899; */
	font-weight: lighter;
	text-shadow: -1px 1px 0 #003B4A, 1px 1px 0 #003B4A, 1px -1px 0 #003B4A, -1px -1px 0 #003B4A;
}

.brand-title span {
	font-size: 2vw;
	font-weight: lighter;
}

.makeup-list>ul {
	display: flex;
	justify-content: flex-start !important;
	flex-wrap: wrap;
}

.makeup-list>ul>li {
	width: 23% !important;
	text-align: left;
	margin-right: 2.6%;
	margin-bottom: 8% !important;
	position: relative;
	border: none !important;
}

.news-list>ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.news-list>ul>li {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #f3f3f3;
	/* padding-bottom: 2em; */
	flex-flow: column;
	align-items: center;
	justify-content: space-between;
	transition: 0.3s all ease-in-out;
}

.news-list>ul>li .news-img {
	display: none;
}

.news-list>ul>li:nth-child(1),
.news-list>ul>li:nth-child(2) {
	width: 48%;
}

.news-list>ul>li:nth-child(1) .news-img,
.news-list>ul>li:nth-child(2) .news-img {
	display: flex;
}

.news-con-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.makeup-list>ul>li:nth-child(4n) {
	margin-right: 0;
}

.makeup-list ul li img {
	width: 100%;
}

.makeup-list ul li:hover {
	transform: translateY(0px) !important;
}

.news-img {
	overflow: hidden;
	margin-bottom: 1em;
}

.news-img img {
	width: 100%;
}

.news-list ul li:hover {
	transform: translateY(-10px);
}

.news-right:hover a {
	text-decoration: none;
}

.news-line {
	width: 1px;
	height: 100%;
	background: #f3f3f3;
}

.news-time {
	padding: 0.5em 0;
	flex-direction: column;
	display: flex;
	width: 90px;
	color: #003B4A;
	font-size: 12px;
	border: #003B4A 1px solid;
	font-weight: bold;
	border-radius: 4px;
	font-family: AlibabaSans-Medium;
	align-items: center;
}

.news-time-day {
	font-size: 3em;
	display: block;
	/* color: #000; */
	width: 100px;
	font-weight: bold;
	height: 50px;
	line-height: 50px;
	text-align: center;
	/* font-family: AlibabaSans-Medium; */
}

.news-right {
	padding: 1em 0;
	width: calc(100% - 140px);
	overflow: hidden;
	text-align: left;
}

.news-con {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #aaa;
	overflow: hidden;
}

.news-list>ul>li:hover img {
	transform: scale(1.1);
}

.news-list-title {
	font-weight: bold;
	margin: 10px 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 16px;
	color: #003B4A;
}

.news-list-img {
	overflow: hidden;
}

.news-list-con {
	position: absolute;
	bottom: -75px;
	margin: 0px auto;
	width: 90%;
	left: 5%;
	border: 1px solid #f3f3f3;
	padding: 10px 20px;
	background: #fff;
}

.news-list>ul>li:hover .news-list-con {
	bottom: 0;
}

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

.news-detail {
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
	text-align: left;
}

.news-detail-title {
	font-size: 36px;
	color: #003b4a;
	font-weight: bold;
}

.news-detail-time {
	margin: 10px 0;
	font-size: 12px;
	padding-bottom: 20px;
	color: #999;
	border-bottom: 1px solid #f3f3f3;
}

.news-detail-time i {
	color: #000;
	margin-right: 5px;
}

.news-detail-con {
	line-height: 24px;
	padding: 20px 0;
	border-bottom: 1px solid #f3f3f3;
}

.news-detail-con img {
	display: block;
	max-width: 100%;
	/* width: 100%; */
	margin: 10px 0;
}

.news-detail-con iframe {
	width: 100%;
	height: 860px;
}

@media screen and (max-width:1400px) {
	.news-detail-con iframe {
		width: 100%;
		height: 58vw;
	}
}

@media screen and (max-width:600px) {
	.news-detail-con iframe {
		width: 100%;
		height: 52vw;
	}
}

.news-detail-sx {
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
	color: #aaa;
}

.news-detail-sx a {
	color: inherit;
	display: flex;
	align-items: center;
}

.news-detail-s i {
	display: inline-block;
	transform: rotate(270deg);
	color: #eac899;
	margin-right: 10px;
}

.news-detail-x i {
	display: inline-block;
	transform: rotate(90deg);
	color: #eac899;
	/* margin-left: 10px; */
}

.news-detail-s span:nth-child(2) {
	color: #003b4a;
	font-weight: bold;
	margin: 0 15px;
}

.news-detail-x span:nth-child(1) {
	color: #003b4a;
	font-weight: bold;
}

.news-detail-s span:nth-child(3) {
	width: 250px;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
	overflow: hidden;
}

.news-detail-x span:nth-child(2) {
	width: 250px;
	text-overflow: ellipsis;
	display: block;
	white-space: nowrap;
	margin: 0 15px;
	overflow: hidden;
}

@media screen and (max-width:1400px) {
	.news-banner {
		height: 300px;
	}

	.products-banner {
		padding: 30px;
	}

	.products-cate-box {
		padding: 30px;
	}

	.products-service-box {
		padding: 0 4vw;
		margin: 4vw auto;
	}

	.news-title,
	.news-mbx {
		padding: 0 4vw;
	}

	.news-box {
		margin: 0;
		padding: 4vw;
	}

	.news-list {
		margin: 0;
	}

	.products-page {
		margin-top: 4vw;
	}

	.products-service-list {
		grid-template-rows: repeat(auto-fill, 350px);
	}
}

@media screen and (min-width:1300px) and (max-width:1400px) {
	.products-service-list figure img {
		width: 100%;
	}
}

@media screen and (min-width:1000px) and (max-width:1400px) {
	.products-service-list figure {
		height: 350px;
	}
}

.contact-banner {
	width: 100%;
	margin-top: 99px;
}

.contact {
	width: 100%;
	max-width: 1400px;
	display: flex;
	justify-content: space-between;
	position: relative;
	flex-wrap: wrap;
	border: #f3f3f3 1px solid;
	margin-top: -250px;
	margin-bottom: 100px;
	background: #fff;
	align-items: center;
	z-index: 10;
}

.contact-title {
	font-size: 42px;
	font-weight: bold;
	color: #003b4a;
	padding: 2vw;
	text-transform: uppercase;
}

.contact-title span {
	color: #fff;
	text-shadow: -1px 1px 0 #eac899, 1px 1px 0 #eac899, 1px -1px 0 #eac899, -1px -1px 0 #eac899;
}

.contact-con {
	line-height: 24px;
	text-align: left;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 2vw;
}

.contact-con a {
	color: inherit;
}

.contact-con>span {
	display: block;
	width: 25%;
}

.contact-dz {
	display: inline-flex;
}

.contact-con .text-title {
	display: block;
	font-size: 36px;
	font-weight: bold;
	color: #000000;
	margin-bottom: 30px;
}

.contact-con span i {
	color: #eac899;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 5px;
	/* font-size: 20px; */
	border-radius: 3px;
	padding: 3px 7px;
	background: #003b4a;
}

.contact-map {
	width: 100%;
	margin-top: 116px;
	height: 30vw;
}

.contact-map iframe {
	width: 100%;
}

.contact-map-btn-box {
	position: relative;
	bottom: 250px;
	z-index: 20;
}

.contact-map-btn {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 2vw;
	display: flex;
	justify-content: flex-end;
}

.contact-map-btn div {
	padding: 10px 20px;
	background: #fff;
	color: #003B4A;
	margin-right: 10px;
	font-size: 16px;
	border: 1px solid #003B4A;
	cursor: pointer;
	border-radius: 0px 20px 0px 20px;
}

.contact-map-btn div:last-child {
	margin-right: 0;
}

.contact-map-btn .active {
	background: #003B4A;
	color: #eac899;
}

.contact-form {
	margin-top: 30px;
	border-top: 1px solid #f3f3f3;
	position: relative;
	padding-top: 50px;
}

.contact-form-title {
	display: block;
	font-size: 36px;
	font-weight: bold;
	color: #000000;
	margin: 0 auto;
	padding: 0 10px;
	background: #fff;
	position: absolute;
	left: 41%;
	top: -25px;
}

.contact-form .products-inquiry input:nth-child(1) {
	width: 48%;
}

.contact-img {
	padding: 2vw;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.contact-img figure {
	width: 48.5%;
	height: 150px;
	display: flex;
	align-items: center;
}

.contact-img figure img {
	width: 100%;
	height: auto;
	opacity: 0.5;
}


.contact-img figure.effect-bubba h2 {
	padding-top: 65px;
}

.contact-img figure.effect-bubba p {
	padding: 0px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media screen and (max-width:1000px) {

	.contact-img,
	.contact-title,
	.contact-con {
		padding: 4vw;
	}

	.contact-con {
		flex-wrap: wrap;
	}

	.contact-con>span {
		width: 50%;
		margin-bottom: 10px;
	}

	.contact-img figure {
		width: 48% !important;
	}

	.contact-map {
		margin-top: 86px;
	}

	.products-service-list {
		grid-template-rows: auto;
	}

	.products-service-list figure h2 {
		font-size: 18px;
	}

	.products-service-list figure.effect-bubba p {
		padding: 0;
	}

	.brand-banner {
		height: 600px;
	}
}

@media screen and (max-width:600px) {
	.contact-map {
		margin-top: 71px;
		height: 500px;
	}

	.contact-con>span {
		width: 100%;
		margin-bottom: 10px;
	}

	.contact-title {
		font-size: 24px;
	}

	.contact-img figure.effect-bubba h2 {
		padding-top: 80px;
	}

	.contact-img figure.effect-bubba:hover p {
		display: none;
	}

	.about-box,
	.brand-title {
		padding: 0 4vw;
	}

	.about-box {
		gap: 10vw;
	}

	.about-title {
		font-size: 24px;
	}

	.brand-title {
		font-size: 7vw;
	}

	.brand-banner {
		height: 400px;
		align-items: flex-end;
	}

	.brand-title span {
		font-size: 4vw;
	}

	.about-title span:nth-child(2):before {
		top: -30px;
	}

	.about-dx-title {
		font-size: 24px;
	}

	.about-dx-con ul {
		grid-template-columns: repeat(1, 100%);
		grid-template-rows: repeat(3, 220px);
		gap: 4vw;
	}

	.about-dx-con ul li {
		gap: 5vw;
		padding: 2vw;
	}

	.about-mh-img {
		height: 300px;
		padding: 6vw 3vw;
	}

	.about-group-sl {
		margin-top: 10vw;
	}

	.about-group-sl ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
		grid-template-rows: repeat(4, 150px);
	}

	.about-group-sl ul li span {
		font-size: 30px;
	}

	.about-honor-img ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-factory-img ul {
		gap: 4vw;
		grid-template-columns: repeat(1, 1fr);
	}

	.about-sh-img ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-sh-img ul li {
		width: 100% !important;
	}
}

.error {
	margin: 200px 0 100px;
}

.error-btn {
	width: 150px;
	margin: 0 auto;
}

.error-btn:hover i {
	transform: rotate(360deg);
}

.error img {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.error-text {
	font-size: 18vw;
	text-transform: uppercase;
	font-weight: bold;
	background-size: contain;
	background-position: top left;
	-webkit-background-clip: text;
	color: #003B4A;
}

main {
	margin: 0 auto;
	width: 100%;
	max-width: 1400px;
}

.login {
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.login a {
	color: #555;
}

.login a:hover {
	color: #000000;
}

.login-img {
	width: 50%;
	background: url(/uistatic/img/login.jpg) center center no-repeat;
	background-size: cover;
	height: 600px;
	position: relative;
}

.login-img-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: 40px;
	color: #fff;
	text-align: left;
}

.login-img-text span {
	display: block;
	font-size: 60px;
}

.login-form {
	width: 50%;
	padding: 30px;
	border: 1px solid #f3f3f3;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-flow: column;
}

.login-form .text-title {
	font-size: 30px;
	color: #000000;
}

.login-form input {
	width: 100%;
}

.login-bot {
	border: 1px solid #000;
	width: 260px;
	padding: 10px 15px;
	cursor: pointer;
}

.login-form form {
	margin: 30px 0;
}

.sign-up {
	display: none;
}

.sign-up i {
	color: #000;
	font-size: 30px;
	display: block;
	margin-bottom: 50px;
	cursor: pointer;
}

.sign-up .text-title {
	margin-bottom: 20px;
}

.find {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.find .text-title {
	font-size: 36px;
	color: #000000;
	margin-bottom: 50px;
	text-align: left;
}

.find input {
	width: 400px !important;
}

.find .products-inquiry {
	justify-content: flex-start;
	overflow: hidden;
	width: auto;
}

.find-text {
	text-align: center;
}

.member-box {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	margin-top: 113px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.member-box .text-title {
	font-size: 18px;
	margin-bottom: 20px;
}

.member-box .products-cate {
	width: 250px;
}

.member-box .products-list {
	width: calc(100% - 300px);
}

.member-box .products-cate .text-title span {
	display: block;
	font-size: 12px;
	margin-top: 10px;
	text-transform: capitalize;
}

.member-box .products-cate .text-title span a {
	color: #555;
}

.member-box .products-cate i {
	margin-right: 10px;
}

.member-box .products-inquiry input:nth-child(1) {
	width: 48%;
}

.member-inquiry .form-control {
	border: 1px solid #f3f3f3;
	border-radius: 0;
	padding: 5px 10px !important;
	height: 40px;
	box-shadow: none;
}

.member-inquiry .form-control:focus {
	border: 1px solid #000;
	box-shadow: none;
}

.member-password-list {
	flex-flow: column;
}

.member-inquiry-mes {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.member-inquiry-no {
	color: #000000;
}

.member-inquiry .cart-products tr td:nth-last-child(1),
.member-inquiry .cart-products tr th:nth-last-child(1) {
	max-width: 400px;
}

@media screen and (max-width:1300px) {

	main,
	.member-box {
		padding: 4vw;
	}

}

@media screen and (max-width:1000px) {

	.news-list>ul {
		justify-content: space-between;
	}

	.makeup-list>ul>li {
		width: 48%;
		margin-right: 0;
		margin-bottom: 12%;
	}
}

@media screen and (max-width:600px) {
	.news-banner {
		height: 300px;
	}

	.news-title {
		font-size: 8vw;
	}

	.news-list>ul>li {
		width: 100%;
		margin-bottom: 4vw;
	}

	.news-box,
	.news-detail,
	main {
		margin: 0px auto;
		/* overflow: hidden; */
	}

	.news-title {
		margin-bottom: 30px;
	}

	.news-mbx-right {
		display: none;
	}

	.news-mbx-left ul li a {
		padding: 20px;
	}

	.news-list {
		margin: 0px 0;
	}

	.news-list>ul>li:nth-child(1),
	.news-list>ul>li:nth-child(2) {
		width: 100%;
	}

	.news-img {
		margin-bottom: 0;
	}

	.news-right {
		width: calc(100% - 100px);
	}

	.news-list-title {
		font-size: 14px;
	}

	.news-detail-sx {
		display: none;
	}

	.products-page {
		padding: 4vw;
		margin: 0;
	}

	.products-service-list {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		gap: 4vw;
	}

	#products-detail .products-page {
		/* margin-bottom: 100px; */
	}

	.makeup-list>ul>li {
		width: 100% !important;
		margin-bottom: 12vh !important;
	}

	.contact {
		margin: 4vw auto;
		margin-top: -150px;
	}

	.contact-con,
	.contact-map {
		width: 100%;
	}

	.contact-map iframe {
		height: 300px;
	}

	.contact-con {
		/* margin-bottom: 30px; */
	}

	.contact-map-btn-box {
		bottom: 130px;
	}

	.contact-map-btn {
		padding: 4vw;
	}

	.contact-con ul li {
		width: 100%;
		margin: 10px 0;
		height: 120px;
	}

	.contact-con .text-title,
	.contact-form-title {
		font-size: 24px;
	}

	.contact-form .products-inquiry input:nth-child(1) {
		width: 100%;
	}

	.contact-form {
		border-top: none;
	}

	.contact-form-title {
		top: 0;
		left: 0;
		padding: 0;
	}

	.login-img {
		display: none;
	}

	.login-form {
		width: 100%;
	}

	.login-form form {
		margin: 50px 0;
	}

	.find {
		margin: 50px 0;
		display: block;
	}

	.find input {
		width: 100%;
	}

	.find .text-title {
		font-size: 24px;
	}

	.member-box .products-cate {
		width: 100%;
		display: block;
		padding: 30px 0;
		border-right: none;
		border-bottom: 1px solid #f3f3f3;
	}

	.member-box .products-cate .text-title {
		text-align: center;
	}

	.member-box .products-cate i {
		display: block;
		font-size: 24px;
		margin-right: 0;
	}

	.member-box .products-cate ul {
		display: flex;
		justify-content: space-between;
	}

	.member-box .products-cate ul li {
		width: 30%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: column;
		border: 1px solid #f3f3f3;
		padding: 10px;
		text-align: center;
	}

	.member-box .products-list {
		width: 100%;
		padding: 30px 0;
	}

	.member-box .products-inquiry input:nth-child(1) {
		width: 100%;
	}

	.error {
		margin: 100px 0;
	}
}

/* 购物车 */
.cart-box {
	width: 100%;
	max-width: 1300px;
	text-align: left;
	border: 1px solid #f3f3f3;
	padding: 2em;
	margin: 200px auto 80px;
}

.cart-title {
	font-size: 40px;
}

.cart-products img {
	width: 100%;
	max-width: 80px;
	margin-right: 5px;
}

.cart-products td {
	vertical-align: baseline !important;
	text-align: left;
}

.cart-products i {
	font-size: 20px;
	cursor: pointer;
	display: block;
}

.cart-delete {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	clear: both;
}

.cart-delete:hover {
	transform: rotate(180deg);
}

.cart-products i:hover {
	color: #000000;
}

.cart-message {
	padding-top: 2em;
	border-top: 1px solid #f3f3f3;
}

.cart-message ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.cart-message ul li {
	width: 23%;
	margin-bottom: 1em;
}

.cart-message ul li:nth-last-child(1) {
	width: 100%;
}

.cart-message ul li textarea {
	width: 100%;
}

.cart-box .form-control {
	border: 1px solid #f3f3f3;
	border-radius: 0;
	padding: 5px 10px !important;
	height: 40px;
	box-shadow: none;
}

.cart-box .products-inquiry {
	padding-top: 30px;
	border-top: 1px solid #f3f3f3;
}

.cart-box .products-inquiry input:nth-child(1) {
	width: 48%;
}

.cart-box .form-control:focus {
	border: 1px solid #000;
	box-shadow: none;
}

.cart-products a {
	color: inherit;
}

.cart-message-btn {
	width: 200px;
	margin: 0 auto;
}

.cart-message-btn input {
	padding: 1em 2em;
}

@media screen and (max-width:900px) {
	.cart-message ul li {
		width: 48%;
	}
}

@media screen and (max-width:600px) {
	.cart-box .form-control {
		/* padding: 0.5em!important; */
	}

	.cart-message ul li {
		width: 100%;
	}

	.cart-box {
		padding: 1em;
		margin: 120px 0 50px;
	}

	.cart-products img {
		max-width: 40px;
	}

	.cart-message-btn {
		width: 100%;
	}

	.cart-message-btn input {
		/* padding: 0.5em 1em; */
	}

	.contact-btn {
		width: 100% !important;
	}

	.cart-box .products-inquiry input:nth-child(1) {
		width: 100%;
	}
}

/* 提示框 */
.tips-fat {
	display: flex !important;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
}

.tips-box {
	width: auto;
	width: 25%;
	min-width: 300px;
	margin: 0 auto;
	background: #fff;
	border-radius: 5px;
	/* color: #fff; */
	text-align: left;
}

.tips-title {
	font-size: 1.5em;
	padding: 0.5em 1em;
	border-bottom: 1px solid #f3f3f3;
}

.tips-con {
	padding: 2em 1.5em;
	border-bottom: 1px solid #f3f3f3;
}

.tips-btn {
	display: flex;
	padding: 1.5em;
	justify-content: space-between;
}

.tips-btn span {
	display: block;
	width: 48%;
}

.tips-btn span button {
	width: 100%;
	color: #fff;
	border: 0;
	background: #141414;
}

.tips-btn span:nth-child(1) button {
	background: #ccc;
}

.tips-btn span button:focus {
	border: none;
	background: red;
}

/* 提示页 */
#tips .error-btn {
	margin-bottom: 10em;
}

.tips-content {
	text-align: center;
	margin-bottom: 1em;
}

.tips-success-box {
	height: 50vh;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

.tips-icon {
	width: 80px;
	height: 80px;
	border: 4px solid gray;
	border-radius: 50%;
	margin: 0em auto 2em;
	padding: 0;
	position: relative;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.tips-back {
	padding: 1em 2em;
	background: #141414;
	color: #fff;
	width: 35%;
	min-width: 350px;
	margin: 0 auto;
}

@media only screen and (max-width: 800px) {
	.tips-icon {
		margin: 0em auto 2em;
	}

	.tips-success-box {
		min-height: 65vh;
	}
}

.tips-icon.error {
	border-color: #f27474;
}

.tips-icon.error .x-mark {
	position: relative;
	display: block;
}

.tips-icon.error .line {
	position: absolute;
	height: 5px;
	width: 47px;
	background-color: #f27474;
	display: block;
	top: 37px;
	border-radius: 2px;
}

.tips-icon.error .line.left {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 17px;
}

.tips-icon.error .line.right {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 16px;
}

.tips-icon.warning {
	border-color: #f8bb86;
}

.tips-icon.warning .body {
	position: absolute;
	width: 5px;
	height: 47px;
	left: 50%;
	top: 10px;
	border-radius: 2px;
	margin-left: -2px;
	background-color: #f8bb86;
}

.tips-icon.warning .dot {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -3px;
	left: 50%;
	bottom: 10px;
	background-color: #f8bb86;
}

.tips-icon.info {
	border-color: #c9dae1;
}

.tips-icon.info::before {
	content: "";
	position: absolute;
	width: 5px;
	height: 29px;
	left: 50%;
	bottom: 17px;
	border-radius: 2px;
	margin-left: -2px;
	background-color: #c9dae1;
}

.tips-icon.info::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -3px;
	top: 19px;
	background-color: #c9dae1;
}

.tips-icon.success {
	border-color: #ff2e56;
}

.tips-icon.success::before,
.tips-icon.success::after {
	content: '';
	border-radius: 50%;
	position: absolute;
	width: 60px;
	height: 120px;
	background: white;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.tips-icon.success::before {
	border-radius: 120px 0 0 120px;
	top: -7px;
	left: -33px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 60px 60px;
	-ms-transform-origin: 60px 60px;
	transform-origin: 60px 60px;
}

.tips-icon.success::after {
	border-radius: 0 120px 120px 0;
	top: -11px;
	left: 30px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0px 60px;
	-ms-transform-origin: 0px 60px;
	transform-origin: 0px 60px;
}

.tips-icon.success .placeholder {
	width: 80px;
	height: 80px;
	border: 4px solid red;
	border-radius: 50%;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	left: -4px;
	top: -4px;
	z-index: 2;
}

.tips-icon.success .fix {
	width: 5px;
	height: 90px;
	background-color: white;
	position: absolute;
	left: 28px;
	top: 8px;
	z-index: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.tips-icon.success .line {
	height: 5px;
	background-color: red;
	display: block;
	border-radius: 2px;
	position: absolute;
	z-index: 2;
}

.tips-icon.success .line.tip {
	width: 25px;
	left: 14px;
	top: 46px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.tips-icon.success .line.long {
	width: 47px;
	right: 8px;
	top: 38px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.tips-icon.custom {
	background-size: contain;
	border-radius: 0;
	border: none;
	background-position: center center;
	background-repeat: no-repeat;
	/*
 * Animations
 */
}

@-webkit-keyframes showSweetAlert {
	0% {
		transform: scale(0.7);
		-webkit-transform: scale(0.7);
	}

	45% {
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
	}

	80% {
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-tranform: scale(0.95);
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@keyframes showSweetAlert {
	0% {
		transform: scale(0.7);
		-webkit-transform: scale(0.7);
	}

	45% {
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
	}

	80% {
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-tranform: scale(0.95);
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes hideSweetAlert {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	100% {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
	}
}

@keyframes hideSweetAlert {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	100% {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
	}
}

.showSweetAlert {
	-webkit-animation: showSweetAlert 0.3s;
	animation: showSweetAlert 0.3s;
}

.hideSweetAlert {
	-webkit-animation: hideSweetAlert 0.2s;
	animation: hideSweetAlert 0.2s;
}

@-webkit-keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px;
	}

	54% {
		width: 0;
		left: 1px;
		top: 19px;
	}

	70% {
		width: 50px;
		left: -8px;
		top: 37px;
	}

	84% {
		width: 17px;
		left: 21px;
		top: 48px;
	}

	100% {
		width: 25px;
		left: 14px;
		top: 45px;
	}
}

@keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px;
	}

	54% {
		width: 0;
		left: 1px;
		top: 19px;
	}

	70% {
		width: 50px;
		left: -8px;
		top: 37px;
	}

	84% {
		width: 17px;
		left: 21px;
		top: 48px;
	}

	100% {
		width: 25px;
		left: 14px;
		top: 45px;
	}
}

@-webkit-keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px;
	}

	65% {
		width: 0;
		right: 46px;
		top: 54px;
	}

	84% {
		width: 55px;
		right: 0px;
		top: 35px;
	}

	100% {
		width: 47px;
		right: 8px;
		top: 38px;
	}
}

@keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px;
	}

	65% {
		width: 0;
		right: 46px;
		top: 54px;
	}

	84% {
		width: 55px;
		right: 0px;
		top: 35px;
	}

	100% {
		width: 47px;
		right: 8px;
		top: 38px;
	}
}

@-webkit-keyframes rotatePlaceholder {
	0% {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	5% {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	12% {
		transform: rotate(-405deg);
		-webkit-transform: rotate(-405deg);
	}

	100% {
		transform: rotate(-405deg);
		-webkit-transform: rotate(-405deg);
	}
}

@keyframes rotatePlaceholder {
	0% {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	5% {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	12% {
		transform: rotate(-405deg);
		-webkit-transform: rotate(-405deg);
	}

	100% {
		transform: rotate(-405deg);
		-webkit-transform: rotate(-405deg);
	}
}

.animateSuccessTip {
	-webkit-animation: animateSuccessTip 0.75s;
	animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
	-webkit-animation: animateSuccessLong 0.75s;
	animation: animateSuccessLong 0.75s;
}

.tips-icon.success.animate::after {
	-webkit-animation: rotatePlaceholder 4.25s ease-in;
	animation: rotatePlaceholder 4.25s ease-in;
}

@-webkit-keyframes animateErrorIcon {
	0% {
		transform: rotateX(100deg);
		-webkit-transform: rotateX(100deg);
		opacity: 0;
	}

	100% {
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		opacity: 1;
	}
}

@keyframes animateErrorIcon {
	0% {
		transform: rotateX(100deg);
		-webkit-transform: rotateX(100deg);
		opacity: 0;
	}

	100% {
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		opacity: 1;
	}
}

.animateErrorIcon {
	-webkit-animation: animateErrorIcon 0.5s;
	animation: animateErrorIcon 0.5s;
}

@-webkit-keyframes animateXMark {
	0% {
		transform: scale(0.4);
		-webkit-transform: scale(0.4);
		margin-top: 26px;
		opacity: 0;
	}

	50% {
		transform: scale(0.4);
		-webkit-transform: scale(0.4);
		margin-top: 26px;
		opacity: 0;
	}

	80% {
		transform: scale(1.15);
		-webkit-transform: scale(1.15);
		margin-top: -6px;
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		margin-top: 0;
		opacity: 1;
	}
}

@keyframes animateXMark {
	0% {
		transform: scale(0.4);
		-webkit-transform: scale(0.4);
		margin-top: 26px;
		opacity: 0;
	}

	50% {
		transform: scale(0.4);
		-webkit-transform: scale(0.4);
		margin-top: 26px;
		opacity: 0;
	}

	80% {
		transform: scale(1.15);
		-webkit-transform: scale(1.15);
		margin-top: -6px;
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		margin-top: 0;
		opacity: 1;
	}
}

.animateXMark {
	-webkit-animation: animateXMark 0.5s;
	animation: animateXMark 0.5s;
}

@-webkit-keyframes pulseWarning {
	0% {
		border-color: #f8d486;
	}

	100% {
		border-color: #f8bb86;
	}
}

@keyframes pulseWarning {
	0% {
		border-color: #f8d486;
	}

	100% {
		border-color: #f8bb86;
	}
}

.pulseWarning {
	-webkit-animation: pulseWarning 0.75s infinite alternate;
	animation: pulseWarning 0.75s infinite alternate;
}

@-webkit-keyframes pulseWarningIns {
	0% {
		background-color: #f8d486;
	}

	100% {
		background-color: #f8bb86;
	}
}

@keyframes pulseWarningIns {
	0% {
		background-color: #f8d486;
	}

	100% {
		background-color: #f8bb86;
	}
}

.pulseWarningIns {
	-webkit-animation: pulseWarningIns 0.75s infinite alternate;
	animation: pulseWarningIns 0.75s infinite alternate;
}

.tips-list {
	width: 35%;
	min-width: 350px;
	padding: 0 1.5em;
	margin: 0 auto;
	border: 1px solid #f3f3f3;
	/* background: #f3f3f3; */
	text-align: center;
	/* border-radius: 5px; */
	color: #888;
}

.tips-list li {
	padding: 1em 0;
	border-bottom: 1px solid #f3f3f3;
}

.tips-list span {
	font-weight: bold;
	color: #555;
}

/* 产品列表勾选框 */
.cbx {
	width: 100%;
	margin-bottom: 0px;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	padding: 0px;
	border-radius: 2px;
	overflow: hidden;
	transition: all 0.2s ease;
	display: flex;
	justify-content: flex-start;
}

.cbx:not(:last-child) {
	margin-right: 6px;
}

/* .cbx:hover {
	background: rgba(26, 148, 253, 0.06);
} */

.cbx span {
	float: left;
	vertical-align: middle;
	transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	transform: scale(1);
	border: 2px solid #c8ccd4;
	transition: all 0.2s ease;
}

.cbx span:first-child svg {
	position: absolute;
	top: 2px;
	left: 1px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16px;
	stroke-dashoffset: 16px;
	transition: all 0.3s ease;
	transition-delay: 0.1s;
	transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
	padding-left: 8px;
	line-height: 18px;
}

.cbx:hover span:first-child {
	border-color: black;
}

.inp-cbx:checked+.cbx span:first-child {
	background: black;
	border-color: black;
	animation: wave 0.4s ease;
}

.inp-cbx:checked+.cbx span:first-child svg {
	stroke-dashoffset: 0;
}


.inline-svg {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
	user-select: none;
}

@-moz-keyframes wave {
	50% {
		transform: scale(0.9);
	}
}

@-webkit-keyframes wave {
	50% {
		transform: scale(0.9);
	}
}

@-o-keyframes wave {
	50% {
		transform: scale(0.9);
	}
}

@keyframes wave {
	50% {
		transform: scale(0.9);
	}
}

@media only screen and (max-width: 768px) {
	.cbx span:first-child {
		width: 22px;
		height: 22px;
	}

	.cbx span:nth-child(2n) {
		display: none;
	}

	.cbx span:first-child svg {
		top: 3px;
		left: 3px;
	}
}

/* 服务页面 */
.service-title {
	display: block;
	font-size: 40px;
	color: #000;
	margin: 40px 0;
	font-weight: bold;
	text-transform: uppercase;
}

.service-con {
	text-align: center;
	line-height: 24px;
}

.service-con span {
	display: block;
	font-weight: bold;
	margin-bottom: 20px;
}

.service-con img {
	width: 100%;
}

.service-con i {
	color: #ccc;
	margin-right: 10px;
}

.service-con-box {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
}

.service-con-item:nth-child(1) {
	background: url(/uistatic/img/se3.jpg) center center no-repeat;
	position: relative;
}

.service-con-item:nth-child(1) span {
	position: absolute;
	font-size: 50px;
	color: #fff;
	bottom: 40px;
	left: 40px;
	text-align: left;
}

.service-con-item:nth-child(2),
.service-con-item:nth-child(3) {
	padding: 30px;
}

.service-con-item:nth-child(4) {
	background: url(/uistatic/img/se4.jpg) center center no-repeat;
	position: relative;
}

.service-con-item:nth-child(4) span {
	position: absolute;
	font-size: 50px;
	color: #fff;
	bottom: 40px;
	right: 40px;
	text-align: right;
}

.service-con-item img {
	width: 100%;
	max-width: 100%;
}

.service-title span {
	color: #ccc;
}

.low-box {
	text-align: center;
	line-height: 24px;
}

.low-con {
	width: 100%;
	max-width: 700px;
	margin: 30px auto;
	text-align: left;
}

.low-box span {
	font-weight: bold;
	font-size: 16px;
}

.service-lc-con {
	width: 100%;
	text-align: left;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.service-lc-con ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.service-lc-con ul li {
	width: 45%;
	margin-bottom: 20px;
}

.service-lc-con span {
	width: max-content;
	text-align: left;
}

.service-lc-no {
	width: 60px;
	height: 60px;
	border: 2px solid #000;
	text-align: center;
	line-height: 60px;
	font-family: AlibabaSans-Medium;
	float: left;
	margin-right: 20px;
}

/* .service-lc-con span::after {
	content: "\e625";
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	font-style: normal;
	font-family: "iconfont" !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
 */
.service-lc-con-fk {
	position: relative;
	width: 60%;
	border-left: none;
	border-right: none;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
	height: 150px;
	/* padding: 10px; */
	margin: 10px 0;
}

.service-lc-con-fk span {
	margin: 0;
}

.service-lc-con-fk span:nth-child(1) {
	/* position: absolute; */
	/* top: -15px; */
	/* left: 0; */
}

.service-lc-con-fk span:nth-child(2) {
	/* position: absolute; */
	/* bottom: -15px; */
	/* left: 0; */
}

.service-lc-con-fk span:nth-child(3) {
	position: absolute;
	top: 60px;
	right: 30%;
	/* height: 105px; */
	/* line-height: 100px; */
	background: #777;
}

/* .service-lc-con-fk span:nth-child(1)::after {
	content: "\e625";
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	font-style: normal;
	font-family: "iconfont" !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
} */
.service-lc-jt {
	position: absolute;
	left: 36%;
	top: 65px;
}

.service-lc-jt-right {
	position: absolute;
	bottom: 35px;
	transform: rotate(180deg);
	right: 36%;
}

.service-lc-jt-left {
	position: absolute;
	top: 40px;
	transform: rotate(180deg);
	right: 36%;
}

.service-lc-con-my {
	background: #ccc !important;
	color: #000000 !important;
}

@media screen and (max-width:1200px) {
	.service-lc-con-fk {
		width: 100%;
	}
}

@media screen and (max-width:1200px) {

	.service-con-item:nth-child(1) span,
	.service-con-item:nth-child(4) span {
		font-size: 30px;
	}
}

@media screen and (max-width:700px) {
	.service-con-box {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 1fr);
	}

	.service-con-item:nth-child(2),
	.service-con-item:nth-child(3) {
		padding: 30px 0;
	}

	.service-lc-con ul li {
		width: 100%;
	}
}

@media screen and (max-width:600px) {
	.service-title {
		font-size: 24px;
	}

	.service-lc-con span {
		width: auto;
	}

	.service-lc-con-fk {
		height: 180px;
	}

	.service-lc-con-fk span:nth-child(3) {
		top: 42%;
		right: 0%;
	}

	.service-lc-jt {
		top: 42%;
		left: 10%;
	}

	.service-lc-jt-right {
		bottom: 50px;
		right: 15%;
	}

	.service-lc-jt-left {
		top: 55px;
		right: 15%;
	}
}


@media screen and (max-width:600px) {
	.faq-title {
		font-size: 24px;
	}

	.products-mbx {
		margin: 0px;
		width: 100%;
		padding: unset;
		position: unset;
	}

	.products-detail-btn {
		display: none;
	}

	.products-detail-ew {
		display: flex;
		flex-flow: column;
	}

	.products-detail-ew a {
		display: initial;
	}
}