@charset "utf-8";

/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
i,
figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 15px;
	font-family: HarmonyOS Sans SC, 思源黑体, Source Han Sans, MiSans, PingFangSC, Arial;
	vertical-align: baseline;
	color: #333;
}

:focus {
	outline: 0;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
}

a {
	text-decoration: none;
	transition: all .4s;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
}

a:hover {
	text-decoration: none;
}

a img,
iframe {
	border: none;
}

a:focus {
	outline: none;
}

img {
	vertical-align: top;
}

ol,
ul {
	list-style: none;
}

input,
textarea,
select,
button {
	font-size: 100%;
	font-family: inherit;
	outline: none;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
}

select {
	margin: inherit;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol {
	margin-left: 2em;
}

::-webkit-scrollbar {
	width: 5px;
	height: 8px;
	background-color: rgba(246, 248, 249, 1);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(123, 121, 121, 0.7);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

html,
body {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: #333;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	overflow-x: hidden;
}

html {
	font-size: calc(100vw/19.2);
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

:root {
	/* 1. 主题主色 */
	--primary-color: #014099;
	/* 主品牌色 */
	--primary-light: #e8f3ff;
	/* 主色浅色 */
	--primary-dark: #0958d9;
	/* 主色深色 */

	/* 2. 辅助色 */
	--secondary-color: #6b7280;
	--accent-color: #ff7d00;
	/* 强调色（按钮、高亮） */

	/* 3. 状态色 */
	--success-color: #00b42a;
	/* 成功 */
	--warning-color: #ff7d00;
	/* 警告 */
	--danger-color: #f53f3f;
	/* 错误/危险 */
	--info-color: #86909c;
	/* 信息 */

	/* 4. 文字颜色 */
	--text-primary: #1d2129;
	/* 主文本 */
	--text-secondary: #4e5969;
	/* 次文本 */
	--text-muted: #86909c;
	/* 弱文本 */
	--text-light: #c9cdd4;
	/* 最淡文本 */
	--text-white: #ffffff;
	/* 白色文本 */

	/* 5. 背景颜色 */
	--bg-body: #f2f3f5;
	/* 页面背景 */
	--bg-card: #ffffff;
	/* 卡片/容器背景 */
	--bg-hover: #f7f8fa;
	/* 悬浮背景 */
	--bg-mask: rgba(0, 0, 0, 0.45);
	/* 遮罩层 */

	/* 6. 边框/分割线颜色 */
	--border-color: #e5e6eb;
	--border-light: #f2f3f5;
}

/* common */
.container {
	margin: 0 auto;
	max-width: 1300px;
}

.flex {
	display: flex;
}

.flex-between {
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

.title {
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.title h2 {
	font-size: 30px;
	font-weight: 600;
	position: relative;
	padding-bottom: 10px;
}

.title h2::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 5px;
	background-color: var(--primary-color);
	transform: translateX(-50%);
}

.title p {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 15px;
}

.imgbox {
	position: relative;
	overflow: hidden;
}

.imgbox>img {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: all .3s;
}

.img-center {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	margin: 0;
	display: block;
	width: 100% !important;
	height: auto !important;
	z-index: 1;
}

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

.more-btn {
	background-color: #2042e3;
	border: 1px solid #2042e3;
	color: #fff;
	padding: 14px 23px;
	white-space: nowrap;
	text-transform: uppercase;
	font-size: 16px;
	display: inline-block;
	border-radius: 3px;
	position: relative;
}

.more-btn i {
	margin-left: 10px;
	color: #fff;
}

.preloader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	z-index: 999;
	background-color: #191634;
}

.loader {
	animation: rotate 1s infinite;
	height: 50px;
	width: 50px;
}

.h100 {
	height: 100%;
}

.bg-gray {
	background-color: var(--bg-hover);
}

.wrapper {
	padding: 80px 0;
}

.bg1 {
	background: url(../images/bg1.jpg) no-repeat center bottom;
}

.bg2 {
	background: url(../images/bg2.jpg) no-repeat center;
}

.text-center {
	text-align: center;
}

.more {
	position: relative;
}

.more a {
	display: inline-block;
	border: 1px solid var(--border-color);
	padding: 15px 20px;
	font-size: 15px;
	position: relative;
	z-index: 1;
}

.more a::after {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
	transition: transform .3s;
	transform: scaleX(0);
	transform-origin: right center;
	z-index: -1;
}

.more a:hover::after {
	transform: scaleX(100%);
	transform-origin: left center;
}

.more a:hover {
	color: var(--text-white);
}

/* fonts */
@font-face {
	font-family: 'iconfont';
	/* Project id 1884120 */
	src: url('https://at.alicdn.com/t/c/font_4149679_8hlplso7kt6.woff2?t=1671611633004') format('woff2'),
		url('https://at.alicdn.com/t/c/font_4149679_8hlplso7kt6.woff?t=1671611633004') format('woff'),
		url('https://at.alicdn.com/t/c/font_4149679_8hlplso7kt6.ttf?t=1671611633004') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}

.icon-down:before {
	content: "\e625";
}

.icon-search:before {
	content: "\e628";
}

.icon-mouse:before {
	content: "\e654";
}

.icon-lang:before {
	content: "\e676";
}

.icon-more::before {
	content: "\e63b";
}

.icon-arrow::before {
	content: "\e63b";
}

.icon-zhihu::before{
	content: "\ea8b";
}

.icon-baijia::before{
	content: "\e777";
}

.icon-shouhu::before{
	content: "\e605";
}

@font-face {
	font-family: 'Conv_Montserrat-Bold';
	src: url('../fonts/Montserrat-Bold.eot');
	src: local('☺'), url('../fonts/Montserrat-Bold.woff') format('woff'),
		url('../fonts/Montserrat-Bold.ttf') format('truetype'),
		url('../fonts/Montserrat-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_Montserrat-Light';
	src: url('../fonts/Montserrat-Light.eot');
	src: local('☺'), url('../fonts/Montserrat-Light.woff') format('woff'),
		url('../fonts/Montserrat-Light.ttf') format('truetype'),
		url('../fonts/Montserrat-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_Montserrat-Regular';
	src: url('../fonts/Montserrat-Regular.eot');
	src: local('☺'), url('../fonts/Montserrat-Regular.woff') format('woff'),
		url('../fonts/Montserrat-Regular.ttf') format('truetype'),
		url('../fonts/Montserrat-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* crumbs */
.crumbs {
	display: flex;
	align-items: center;
}

.crumbs a {
	display: inline-block;
	position: relative;
	color: var(--text-muted);
}

.crumbs a::after {
	content: '>';
	font-family: 'Courier New', Courier, monospace;
	width: 25px;
	text-align: center;
	display: inline-block;
	color: var(--text-muted);
	line-height: 12px;
}

.crumbs a:last-child::after {
	display: none;
}

.crumbs a:last-child {
	color: var(--text-primary);
}

/* pagination */
.pagination {
	display: flex;
	justify-content: center;
}

.pagination li {
	width: 40px !important;
	height: 40px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	margin: 10px 5px;
	padding: 0 !important;
}

.pagination li span,
.pagination li a {
	display: block !important;
	font-size: 16px;
	line-height: 40px;
	border: 0 !important;
	width: 100%;
	text-align: center;
}

.pagination li.active,
.pagination li:hover {
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: var(--text-white);
}

.pagination li:hover a,
.pagination li.active span {
	color: var(--text-white);
}

.pagination li.disabled {
	background-color: #f8f8f8;
	color: #999;
	border: 1px solid #ddd;
}



/* =====================================
   1.0 Home Styles
   ===================================== */

/* header */
.header {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 99;
	background-color: #fff;
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	transition: ease .3s;
	max-height: 80px;
	z-index: 999;
}

.m-header{
	display: none;
}

.header .container {
	width: 1600px;
}

.header-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}

.logo {
	width: 160px;
}

.logo a {
	display: inline-block;
}

.logo img {
	width: 100%;
}

.nav {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 300px);
	height: 80px;
}

.nav>ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

.nav>ul>li {
	margin: 0 3%;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
}

.nav>ul>li a {
	display: flex;
	align-items: center;
	height: 100%;
	color: var(--text-primary);
	font-size: 16px;
}

.nav>ul>li a:hover,
.nav>ul>li a.active {
	color: var(--primary-color);
}

.m-menu{
	height: 0;
}

.submenu {
	position: fixed;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	background-color: var(--bg-card);
	border-top: 1px solid var(--border-light);
	display: none;
}

.product-child {
	padding: 40px 0;
	display: flex;
	justify-content: space-between;
}

.product-child .imgbox{
	width: 220px;
	height: auto;
}

.child-nav {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: calc(100% - 260px);
}

.child-nav>li {
	width: 33.33%;
	box-sizing: border-box;
	padding-right: 40px;
}

.child-nav>li:last-child {
	padding-right: 0;
}

.child-nav>li>a {
	display: block!important;
	width: 100%;
	margin-bottom: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.child-title {
	border-bottom: 1px solid var(--border-color);
	padding: 20px 0;
	margin-bottom: 20px;
}

.child-title>a {
	font-size: 20px !important;
	font-weight: 600;
	margin-bottom: 5px;
}

.child-title > a > i {
	font-size: 12px;
	font-weight: 400;
	margin-left: 15px;
	color: var(--text-light);
}

.child-title p {
	color: var(--text-muted);
}

.child {
	display: flex;
	justify-content: center;
	padding: 25px 0;
}

.child a {
	display: inline-block;
	margin: 0 20px;
}

.child a:hover {
	color: var(--primary-color);
}

.top-side {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 25px;
}

.top-side i {
	font-size: 25px;
	color: #333;
}

.top-side .search {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.search-box {
	background-color: var(--bg-card);
	position: absolute;
	top: 100%;
	right: 15px;
	display: none;
	justify-content: space-between;
	align-items: center;
	height: 42px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.search:hover .search-box {
	display: flex;
	align-items: center;
}

.search-btn {
	background: url(../images/search.svg) no-repeat center;
	background-size: 60%;
	display: inline-block;
	width: 42px;
	height: 42px;
	cursor: pointer;
}

.search-ipt {
	padding: 10px 20px;
}

.top-side .language {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 15px;
	position: relative;
	height: 100%;
}

.language .lang-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.lang-text {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap;
	margin-left: 5px;
	font-size: 16px;
}

.langs {
	display: none;
	position: absolute;
	top: 100%;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
	box-sizing: border-box;
	padding: 15px 20px;
	border-radius: 12px;
	background-color: var(--bg-card);
}

.langs a {
	display: block;
	white-space: nowrap;
	padding: 8px 0;
}

.langs a:hover span,
.langs a.on span {
	color: var(--primary-color);
}

.langs span {
	display: inline-block;
	margin-right: 15px;
	text-align: left;
	width: 40px;
}

.language:hover .langs {
	display: block;
}


/* banner */
.slider {
	width: 100%;
	position: relative;
}

.full-page {
	height: 100vh;
}

.slider-swiper {
	height: 100%;
}

.slider-box {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.slider-swiper .swiper-pagination {
	bottom: 30px !important;
}

.typesetting {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	box-sizing: border-box;
	padding-left: 2%;

}

.typesetting h3 {
	font-size: 40px;
	font-weight: 600;
	color: var(--text-white);
	width: 100%;
	display: block;
}

.typesetting ul {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 30px;
	color: var(--text-white);
	font-size: 20px;
}

.typesetting ul li {
	color: var(--text-white);
	font-size: 18px;
	padding: 5px 0;
}

.typesetting a.more {
	display: inline-block;
	border: 1px solid var(--border-light);
	color: var(--text-white);
	padding: 15px 30px;
	border-radius: 50px;
}

.typesetting a.more:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.mouse-down {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 60px;
	z-index: 99;
	animation: banner-down .5s linear infinite alternate;
}

.mouse-down i{
	font-size: 30px;
	color: var(--text-white);
}

@keyframes banner-down {
    to{bottom:55px}
}

/* home product */
.wrapper-title {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 30px;
}

.wrapper-title .left {
	width: 40%;
}

.wrapper-title .right {
	width: 60%;
}

.wrapper-title .right .more{
	text-align: right;
}

.wrapper-title .right .more a{
	border-radius: 50px;
	overflow: hidden;
}

.wrapper-title .right .more a i{
	margin-left: 5px;
	font-size: 14px;
}

.wrapper-title .right .more a:hover i{
	color: var(--text-white);
}

.wrapper-title .left p {
	font-size: 16px;
	color: var(--text-muted);
}

.wrapper-title .left h3 {
	font-size: 30px;
	font-weight: 600;
}

.wrapper-title .right p {
	font-size: 16px;
	color: var(--text-muted);
	text-align: right;
}

.product-box {
	background-color: var(--bg-card);
	border-radius: 20px;
}

.product-box a {
	display: block;
	width: 100%;
	padding: 35px 35px 30px;
	box-sizing: border-box;
	transition: all .3s;
}

.product-box a .imgbox {
	text-align: center;
	padding-top: 69.52%;
	position: relative;
}

.product-box a .imgbox img{
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
	width: 100%;
}

.product-info h3 {
	font-size: 20px;
	margin: 20px 0 10px;
}

.product-info p {
	font-size: 14px;
	margin-bottom: 20px;
	color: var(--text-muted);
}

.product-info span {
	display: inline-block;
	border: 1px solid var(--border-color);
	padding: 10px 20px;
	transition: all .3s;
}

.product-info span i{
	font-size: 12px;
}

.product-box a:hover .product-info span{
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: var(--text-white);
}

.product-box a:hover .product-info span i{
	color: var(--text-white);
}

/* home about */
.about-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.about-box .left {
	width: 56.25%;
	box-sizing: border-box;
	padding-right: 60px;
}

.about-box .right {
	width: 43.75%;
	border-radius: 20px;
	overflow: hidden;
}

.about-title {
	font-size: 30px;
	font-weight: 600;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 20px;
}

.about-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 5px;
	background-color: var(--primary-color);
}

.about-text {
	max-height: 300px;
	overflow-y: scroll;
	padding-right: 15px;
}

.about-text p {
	font-size: 15px;
	margin-bottom: 20px;
	line-height: 1.8;
}

.about-more {
	margin-top: 15px;
}

.about-more a {
	border: 1px solid var(--border-color);
	padding: 15px 30px;
	display: inline-block;
	position: relative;
	font-size: 15px;
	z-index: 1;
}

.about-more a::after {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
	transition: transform .3s;
	transform: scaleX(0);
	transform-origin: right center;
	z-index: -1;
}

.about-more a:hover::after {
	transform-origin: left center;
	transform: scaleX(100%);
}

.about-more a:hover {
	color: var(--text-white);
}

.about-items {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 40px;
	margin-bottom: 30px;
}

.about-items li {
	width: 25%;
}

.about-icon img {
	width: auto;
	height: 40px;
}

.about-num span {
	font-size: 30px;
	font-weight: 600;
	display: inline-block;
	padding-right: 10px;
}

.about-items li p {
	color: var(--text-muted);
}

.about-box .tips {
	font-size: 12px;
	color: var(--text-muted);
}

/* home news */
.tab-swiper .swiper-wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.tab-swiper .swiper-slide {
	width: auto;
}

.tab-swiper .swiper-slide:last-child {
	margin-right: 0 !important;
}

.news-item {
	width: 100%;
	padding: 15px 40px;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 16px;
	background-color: var(--primary-light);
}

.swiper-slide-thumb-active .news-item {
	background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
	color: var(--text-white);
}

.news-card {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.headlines {
	width: calc(56.25% - 50px);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 20px;
}

.headlines .imgbox{
	display: block;
	padding-top: 60%;
}

.headlines .imgbox img {
	object-fit: cover;
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all .4s;
}

.headlines a:hover img{
	-webkit-transform: translate(-50%,-50%) scale(1.04);
	transform: translate(-50%,-50%) scale(1.04);
}

.headlines .info {
	box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: 0;
	color: var(--text-white);
	padding: 20% 40px 35px;
	background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .8) 90%);
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.headlines .info span,
.headlines .info h3 {
	color: var(--text-white);
	width: 350px;
}

.headlines .info h3 {
	font-size: 20px;
	margin-top: 10px;
}

.headlines .info i {
	color: var(--text-white);
	border: 1px solid var(--border-color);
	width: 30px;
	height: 30px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.headlines-list {
	width: 43.75%;
}

.headlines-list ul li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--bg-card);
	margin-bottom: 15px;
	border-radius: 10px;
	overflow: hidden;
}

.headlines-list ul li:last-child {
	margin-bottom: 0;
}

.headlines-list ul li .imgbox {
	width: 152px;
}

.headlines-list ul li .imgbox a{
	display: block;
	width: 100%;
	padding-top: 60%;
	position: relative;
}

.headlines-list ul li .imgbox img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

.headlines-info {
	padding: 0 20px;
	width: calc(100% - 152px);
	box-sizing: border-box;
}

.headlines-info h3 {
	font-size: 16px;
	margin-bottom: 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.headlines-info p {
	color: var(--text-muted);
}

/* footer */
.footer {
	padding: 30px 0;
	background-color: var(--bg-hover);
}

.footer-logo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 20px;
}

.footer-logo img {
	height: 50px;
}

.social-media {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.social-media span {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
}

.social-media a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	margin-left: 15px;
}

.social-media a:hover {
	color: var(--text-white);
	border: 1px solid var(--primary-color);
}

.social-media a img{
	width: 24px;
	height: auto;
}

.footer-content {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 30px 0;
}

.footer-content .footer-info {
	width: 21%;
	padding-right: 20px;
}

.footer-info ul li {
	margin-bottom: 15px;
}

.footer-info ul li span {
	color: var(--text-muted);
	display: block;
	margin-bottom: 5px;

}

.footer-info ul li p {
	font-weight: 600;
	font-size: 18px;
}

.footer-info ul li img {
	margin-top: 5px;
	width: 120px;
	height: 120px;
}

.footer-menu {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
}

.footer-menu dl {
	margin-right: 8%;
}

.footer-menu dl dt {
	font-weight: 600;
	margin-bottom: 30px;
}

.footer-menu dl dt a {
	font-size: 18px;
}

.footer-menu dl dd a {
	display: block;
	margin-bottom: 10px;
	color: var(--text-muted);
}

.footer-menu dl dd a:hover{
	color: var(--primary-color);
}

.links {
	margin-bottom: 20px;
}

.links span {
	display: inline-block;
}

.links a {
	display: inline-block;
	margin-left: 10px;
	color: var(--text-muted);
}

.links a:hover {
	color: var(--primary-color);
}

.copyright {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid var(--border-color);
	padding-top: 20px;
}

.copyright p {
	color: var(--text-muted);
}

.policy a {
	margin-left: 15px;
	display: inline-block;
	color: var(--text-muted);
}

.policy a:hover {
	color: var(--primary-color);
}

/* bottom contact */
.bottom-contact {
	padding: 70px 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.contact-title {
	font-size: 32px;
	font-weight: 600;
	color: var(--text-white);
	text-align: center;
	position: relative;
	padding-bottom: 15px;
}

.contact-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 5px;
	background-color: var(--bg-card);
	transform: translateX(-50%);
}

.bottom-contact .info {
	text-align: center;
}

.bottom-contact .info p {
	text-align: center;
	font-size: 16px;
	color: var(--text-white);
	margin-top: 20px;
}

.bottom-contact .info a {
	display: inline-block;
	font-size: 16px;
	color: var(--text-white);
	border: 1px solid var(--border-color);
	padding: 10px 30px;
	margin-top: 30px;
}

.bottom-contact .info a:hover {
	background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
	border: 1px solid var(--primary-dark);
}

/* =====================================
   1.1 Products Styles
   ===================================== */

.pages .header {
	position: relative;
}

.category {
	border-top: 1px solid var(--border-color);
	background-color: var(--bg-card);
	position: sticky;
	top: 0;
	z-index: 9;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
}

.category-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	padding: 20px 0;
}

.subcategory {
	width: 70%;
	display: flex;
	justify-content: flex-end;
}

.subcategory a {
	display: inline-block;
	margin-left: 30px;
}

.subcategory a.current {
	color: var(--primary-color);
}


/* banner */
.banner {
	padding-top: 22.39%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.banner-text {
	position: absolute;
	width: 50%;
	top: 50%;
	transform: translateY(-50%);
}

.banner-text h4 {
	font-size: 38px;
	font-weight: 600;
	color: var(--text-white);
	margin-bottom: 10px;
}

.banner-text p {
	color: var(--text-white);
	font-size: 18px;
}

.main {
	padding: 50px 0;
}

.product-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 -15px;
}

.product-list li {
	width: 50%;
	padding: 0 15px;
	box-sizing: border-box;
	margin-bottom: 30px;
}

.product-card a {
	background-color: var(--bg-card);
	padding: 30px;
	box-sizing: border-box;
	display: block;
}

.product-card h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 40px;
	margin-bottom: 30px;
}

.product-card .info {
	display: flex;
	justify-content: space-between;
}

.product-item {
	width: 35%;
}

.product-item .etitle {
	font-size: 16px;
	margin-bottom: 30px;
}

.product-tags p {
	color: var(--text-muted);
	margin-top: 10px;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	padding-left: 15px;
}

.product-tags p::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	background-color: var(--text-light);
	border-radius: 50%;
}

.product-item .more {
	display: inline-block;
	border: 1px solid var(--border-color);
	padding: 10px 20px;
	margin-top: 30px;
}

.product-card a:hover .product-item .more {
	background: linear-gradient(to right, var(--primary-color), var(--primary-dark));
	color: var(--text-white);
	border: 1px solid var(--primary-color);
}

.product-card a:hover h3 {
	color: var(--primary-color);
}

.product-card a:hover .imgbox img {
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

.product-card .info .imgbox {
	width: 60%;
	padding-top: 41.73%;
}

.product-card .info .imgbox img {
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

.paging {
	padding: 20px 30px;
}

/* product detail */
.product-block {
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 50px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.product-block .left {
	width: 50%;
}

.product-block .right {
	width: calc(50% - 50px);
}

.product-images .imgbox {
	padding-top: 69.5%;
	position: relative;

}

.product-images .imgbox img {
	position: absolute;
	left: 0;
	top: 0;
}

.product-title {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 5px;
}

.product-etitle {
	font-size: 18px;
	margin-bottom: 20px;
}

.product-summary {
	line-height: 30px;
	color: var(--text-muted);
	margin-bottom: 40px;
}

.product-summary ul li{
	font-size: 16px;
	line-height: 35px;
	position: relative;
	box-sizing: border-box;
	padding-left: 15px;
}

.product-summary ul li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 15px;
	width: 5px;
	height: 5px;
	background-color: var(--primary-color);
	border-radius: 25px;
}

.product-contact{
	display: inline-block;
	border: 1px solid var(--border-color);
	padding: 12px 30px;
	transition: all .3s;
}

.product-contact:hover{
	border: 1px solid var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-white);
}

.product-details{
	margin-top: 50px;
}

.product-details > h1{
	position: relative;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	padding-bottom: 10px;
	margin: 20px 0 30px;
}

.product-details > h1::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 5px;
	background-color: var(--primary-color);
	transform: translateX(-50%);
}

.product-details table{
	width: 100%;
	border-top: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	margin-bottom: 40px;
}

.product-details table td,
.product-details table th{
	border-bottom: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	padding: 15px 30px;
	box-sizing: border-box;
	vertical-align: middle;
}

.product-details table th{
	font-weight: 600;
	background-color: var(--bg-body);
	padding: 15px 30px;
	font-size: 20px;
}

.product-details table tr td{
	background-color: var(--bg-card);
}

.product-details table tr td:first-child{
	font-weight: 600;
}

.product-details table tr td ul{
	display: flex;
	justify-content: flex-start;
}

.product-details table tr td ul li{
	width: 50%;
}

.product-details > p{
	font-size: 18px;
	line-height: 36px;
}

.product-details ol{
	padding: 15px 0;
}

.product-details ol li{
	padding: 5px 0;
	list-style-type:decimal;
	font-size: 18px;
}

.product-details > img,
.product-details > p > img{
	display: block;
	width: 100%!important;
	height: auto!important;
}

.product-details table > td > img{
	width: 60px!important;
	height: 60px!important;
}

/* =====================================
   1.2 SingPages Styles
   ===================================== */

/* contact */
.contact-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contact-box .contact-info {
	width: calc(40% - 30px);
}

.contact-box .map {
	width: 55%;
}

.contact-info h3 {
	font-size: 26px;
	margin-bottom: 20px;
	font-weight: 600;
}

.contact-text {
	margin-bottom: 40px;
}

.contact-text p {
	margin-bottom: 10px;
	font-size: 16px;
}

a.navigation {
	display: inline-block;
	border: 1px solid var(--info-color);
	border-radius: 50px;
	padding: 10px 30px;
}

a.navigation:hover {
	color: var(--text-white);
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.more-contact {
	margin-top: 40px;
}

.more-contact ul {
	display: flex;
}

.more-contact ul li {
	width: 140px;
	margin-right: 15px;
}

.more-contact ul li img {
	width: 100%;
	display: block;
}

.more-contact ul li p {
	font-size: 14px;
	text-align: center;
	line-height: 40px;
}

/* about */
.about-data {
	background-image: url("../images/about-bg.jpg");
	padding: 10% 0 13%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.about-honor {
	padding: 60px 0 100px;
	background-image: url("../images/desk.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
}

.honor-swiper {
	margin-top: 50px;
}

.honor-swiper .swiper-slide {
	width: 230px;
	height: 273px;
}

.honor-swiper .imgbox {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.honor-swiper .imgbox img {
	width: auto !important;
	max-width: 100%;
	max-height: 100%;
}

/* culture */
.culture {
	padding: 60px 0;
}

.culture-item {
	display: flex;
	height: 450px;
	position: relative;
	margin-bottom: 50px;
}

.culture-item .imgbox {
	width: 68.75%;
}

.culture-item .info {
	width: 50%;
	height: 370px;
	padding: 60px 60px 0;
	position: absolute;
	right: 0;
	bottom: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
	background-color: var(--bg-card);
	box-sizing: border-box;
}

.culture-item .info .info-title h3 {
	font-size: 26px;
	font-weight: 600;
}

.culture-item .info .info-title p {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 25px;
}

.culture-item .info .info-text {
	color: var(--text-muted);
	font-size: 16px;
	line-height: 30px;
}

.culture-item:nth-child(2) {
	justify-content: flex-end;
}

.culture-item:nth-child(2) .info {
	left: 0;
}

/* value */
.value-box {
	padding: 20px 0;
}

.value-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 -10px;
}

.value-list li {
	width: 33.33%;
	box-sizing: border-box;
	padding: 0 10px;
}

.value-card {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
}

.value-card .imgbox {
	padding-top: 58.53%;
}

.value-list li:nth-child(2) .value-card .imgbox {
	padding-top: calc(117.06% + 20px);
}

.value-card .imgbox img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.value-card .info {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10% 30px 20px;
	color: #fff;
	background: linear-gradient(to bottom, transparent 10%, var(--text-primary) 90%);
	box-sizing: border-box;
}

.value-card .info h4 {
	color: var(--text-white);
	font-size: 20px;
	transform: translateY(48px);
	transition: .5s;
}

.value-card .info p {
	color: var(--text-white);
	transition: .5s;
	margin-top: 10px;
	transform: translateY(148px);
}

.value-card:hover h4,
.value-card:hover p {
	transform: translateY(0);
}

/* course */
.course-card {
	position: relative;
}

.course-card .line {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -.5px;
	width: 1px;
	height: 100%;
	background: var(--border-color);
}

.course-card ul {
	padding: 50px 0 90px;
}

.course-card ul li {
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.course-info {
	padding-left: 40px;
	box-sizing: border-box;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.course-info p {
	width: 100%;
	box-sizing: border-box;
	padding-right: 24%;
	color: var(--text-muted);
	line-height: 25px;
}

.course-info h3 {
	font-size: 24px;
	line-height: 34px;
	color: var(--primary-color);
	margin: 25px 0 5px;
}

.course-card ul li::before {
	content: '';
	position: absolute;
	top: 38px;
	left: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary-color);
	z-index: 2;
}

.course-card ul li::after {
	content: '';
	position: absolute;
	top: 31px;
	left: calc(50% - 11px);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
}

.course-card ul li:nth-child(2n) {
	justify-content: flex-start;
}

.course-card ul li:nth-child(2n) .course-info {
	padding-left: 0;
	padding-right: 40px;
	text-align: right;
}

.course-card ul li:nth-child(2n) .course-info p {
	padding-right: 0 !important;
	padding-left: 24%;
}

/* feedback */
.feedback-box .item{
	width: 100%;
	margin-bottom: 26px;
}

.feedback-box .item p{
	font-size: 16px;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.feedback-box .item p span{
	color: var(--danger-color);
	font-size: 24px;
	width: 15px;
	height: 26px;
	display: inline-block;
}

.ipt-text{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ipt-text li{
	width: calc( 33.33% - 20px);
}

.ipt-text input,
.feedback-text{
	border: 1px solid var(--border-color);
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
}

.radio label{
	margin-right: 50px;
	font-size: 16px;
	cursor: pointer;
	display: inline-block;
}

.radio label input{
	margin-right: 5px;
}

.ipt-btn{
	background-color: var(--primary-color);
	color: var(--text-white);
	padding: 15px 80px;
}

.agree{
	color: var(--text-muted);
}

.agree a{
	color: var(--primary-color);
	text-decoration: underline;
}

.agree input{
	margin-right: 10px;
	display: inline-block;
}


/* =====================================
   1.3 Article Styles
   ===================================== */
/* article list */
.article-box {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.article-box li {
	width: 33.33%;
	padding: 0 15px;
	box-sizing: border-box;
	margin-bottom: 30px;
}

.article-card .imgbox{
	position: relative;
	padding-top: 60%;
}

.article-card .imgbox img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	object-fit: cover;
}

.article-box li a {
	display: block;
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	overflow: hidden;
	transition: .3s;
}

.article-info {
	padding: 35px 40px;
	box-sizing: border-box;
}

.article-info p {
	line-height: 30px;
	color: var(--text-muted);
	margin-bottom: 15px;
}

.article-info h2 {
	font-size: 18px;
	font-weight: 600;
	line-height: 30px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	-webkit-box-orient: vertical;
	margin-bottom: 30px;
	height: 60px;
}

.article-info span {
	display: inline-block;
}

.article-box li a:hover h2,
.article-box li a:hover span {
	color: var(--primary-color);
}

.article-box li a:hover .imgbox img {
	-webkit-transform: translate(-50%,-50%) scale(1.04);
	transform: translate(-50%,-50%) scale(1.04);
}

/* article content */
.article-content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.article-block {
	width: 70%;
}

.article-title {
	border-bottom: 1px solid var(--border-color);
}

.article-title h2 {
	font-size: 32px;
	line-height: 42px;
	font-weight: 600;

}

.article-detail {
	padding: 20px 0 35px;
}

.article-detail span {
	display: inline-block;
	color: var(--text-muted);
	margin-right: 20px;
}

.article-content .right {
	width: 25%;

}

.page-title{
	font-size: 30px;
	font-weight: 600;
}

.contents {
	box-sizing: border-box;
	border-bottom: 1px solid var(--border-color);
	padding: 30px 0 50px;
	margin-bottom: 50px;
}

.contents h2{
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 20px;
}

.contents p {
	font-size: 16px;
	line-height: 35px;
	margin-bottom: 20px;
}

.contents strong{
	color: var(--primary-color);
}

.contents p:last-child {
	margin-bottom: 0;
}

.contents img {
	width: 90% !important;
	height: auto !important;
	margin: 0 auto !important;
	display: block;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.contents ul li{
	margin-bottom: 20px;
	position: relative;
	box-sizing: border-box;
	padding-left: 20px;
}

.contents ul li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	background-color: var(--primary-color);
	border-radius: 50%;
}

.article-nav {
	display: flex;
}

.article-nav .left {
	width: calc(100% - 200px);
}

.article-nav>ul>li {
	line-height: 30px;
}

.article-nav .right {
	width: 200px;
	display: flex;
	justify-content: flex-end;
}

.article-btn {
	display: inline-block;
	width: 168px;
	height: 57px;
	line-height: 57px;
	border-radius: 28px;
	background-color: var(--primary-color);
	color: var(--text-white);
	text-align: center;
	transition: .3s;
}

.recommend {
	border: 1px solid var(--border-color);
	border-radius: 10px;
	box-sizing: border-box;
	position: sticky;
	top: 88px;
	padding: 35px 40px;
}

.recommend-title {
	font-size: 24px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 15px;
	margin-bottom: 25px;
	font-weight: 600;
}

.recommend>a {
	font-size: 16px;
	line-height: 30px;
	color: var(--text-muted);
	padding-left: 15px;
	position: relative;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	-webkit-box-orient: vertical;

}

.recommend>a::before {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary-color);
	top: 12px;
	left: 0;
}

.recommend>a:hover {
	color: var(--primary-color);
}

/* download styles */
.download-item{
	position: relative;
}

.download-box li{
	margin-bottom: 30px;
}

.download-item a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--border-color);
	box-sizing: border-box;
	padding: 30px;
	border-radius: 10px;
}

.download-item a .imgbox{
	width: 300px;
}

.download-info{
	width: calc(100% - 480px);
	box-sizing: border-box;
	padding:  20px 40px;
}

.download-info h2{
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
	transition: all .4s;
	display: flex;
	align-items: center;
}

.download-info h2 span{
	display: inline-block;
	background-color: var(--danger-color);
	color: var(--text-white);
	font-size: 12px;
	padding: 0 5px;
	border-radius: 2px;
	margin-left: 10px;
	font-weight: 400;
}

.download-info p{
	margin-bottom: 30px;
	color: var(--text-muted);
}

.download-item .more{
	width: 180px;
	margin-top: 0;
}

.download-item .more span{
	display: inline-block;
	border: 1px solid var(--border-color);
	width: 100%;
	height: 46px;
	line-height: 46px;
	text-align: center;
	transition: all .4s;
}

.download-item a:hover .more span{
	border: 1px solid var(--primary-color);
	background-color: var(--primary-color);
	color: var(--text-white);
}

.download-item a:hover h2{
	color: var(--primary-color);
}

.download-info span{
	font-size: 16px;
	display: inline-block;
	color: var(--text-muted);
}

/* solution */

.solution-content{
	padding-bottom: 60px;
}

.solution-summary{
	padding: 0 40px;

}

.solution-summary p:first-child{
	max-width: 840px;
	margin: 0 auto 40px;
}

.solution-summary p{
	line-height: 30px;
	margin-bottom: 20px;
	font-size: 18px;
}

.solution-summary img{
	width: 100%!important;
	height: auto!important;
}

.solution-point{
	padding: 60px 0;
	background-color: var(--bg-hover);
}

.point-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.point-list li{
	width: 50%;
	box-sizing: border-box;
	padding: 0 15px;
	margin-bottom: 20px;
}

.point-item {
	padding: 40px 40px 50px;
	background-color: var(--bg-card);
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	border-radius: 20px;
	overflow: hidden;
}

.point-item .imgbox{
	width: 54px;
	height: 54px;
}

.point-item .point-text{
	width: calc(100% - 84px);
}

.point-item .point-text h3{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
}

.point-item .point-text p{
	color: var(--text-muted);
}

/* case */
.case{
	padding: 60px 0;
}

.case-item{
	background-color: var(--bg-hover);
	border-radius: 20px;
	overflow: hidden;
}

.case-item .imgbox{
	padding-top: 57.31%;
	position: relative;
}

.case-item .imgbox img{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.case-item .info{
	padding: 30px 30px 40px;
}

.case-item .info h3{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
}

.case-item .info p{
	color: var(--text-muted);
	line-height: 28px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	-webkit-box-orient: vertical;
}

.case-more{
	text-align: center;
	padding-top: 50px;
}

.btn{
	padding: 17px 30px;
	display: inline-block;
}

.btn i{
	margin-left: 10px;
	font-size: 12px;
}

.btn-primary{
	background-color: var(--primary-color);
	color: var(--text-white);
}

.btn-primary i{
	color: var(--text-white);
}

/* faq */
.faq-box li{
	margin-bottom: 20px;
}

.faq-item{
	border: 1px solid var(--border-color);
	border-radius: 10px;
	overflow: hidden;
}

.faq-title{
	background-color: var(--bg-body);
	padding: 22px 30px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	padding-left: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.faq-title i{
	font-size: 15px;
	font-weight: 400;
	color: var(--info-color);
	transition: all .4s;
}

.faq-title i.up{
	transform: rotate(-180deg);
}

.faq-title::before{
	content: 'Q';
	position: absolute;
	left: 20px;
	top: 50%;
	width: 30px;
	height: 30px;
	background-color: var(--primary-color);
	color: var(--text-white);
	transform: translateY(-50%);
	border-radius: 50px 50px 0 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Conv_Montserrat-Bold', 'Microsoft YaHei';
}

.faq-content{
	height: auto;
	box-sizing: border-box;
	line-height: 30px;
	display: none;
	padding-left: 60px;
	position: relative;
}

.faq-content::before{
	content: 'A';
	position: absolute;
	left: 20px;
	top: 20px;
	width: 30px;
	height: 30px;
	background-color: var(--accent-color);
	color: var(--text-white);
	border-radius: 50px 50px 0 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-family: 'Conv_Montserrat-Bold', 'Microsoft YaHei';
	font-size: 18px;
}

.faq-content .box{
	padding: 22px 20px 20px 0;
}

.faq-content p{
	font-size: 16px;
}

/* =====================================
   2.0 Products Styles
   ===================================== */

/* 手机 */
@media (max-width: 575px) {

	/* common */
	.container {
		padding: 0 20px;
	}

	.wrapper{
		padding: 40px 0;
	}

	.wrapper-title .left,
	.wrapper-title .right{
		width: 100%;
	}

	.wrapper-title .left{
		text-align: center;
		margin-bottom: 15px;
	}

	.wrapper-title .left p{
		display: none;
	}

	.wrapper-title .left h3{
		font-size: 26px;
	}

	.wrapper-title .right p{
		text-align: center;
		padding: 5px 20px;
	}

	.main{
		padding: 20px 0;
	}

	/* header */
	.header {
		display: none;
	}

	.m-header {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background-color: var(--bg-card);
	}

	.header-box {
		height: 60px;
	}

	.logo {
		width: 120px;
	}

	.m-hamburger {
		height: 20px;
		display: flex;
		align-items: center;
		transition: .3s;
	}

	.m-hamburger .line {
		position: relative;
	}

	.m-hamburger .line,
	.m-hamburger .line::before,
	.m-hamburger .line::after {
		display: inline-block;
		width: 20px;
		height: 2px;
		border-radius: 5px;
		background-color: var(--text-primary);
	}

	.m-hamburger .line::before,
	.m-hamburger .line::after {
		content: '';
		position: absolute;
		left: 0;
		-webkit-transform-origin: 10px center;
		transform-origin: 10px center;
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-webkit-transition: top 0.3s 0.6s ease-in-out, -webkit-transform 0.3s ease-in-out;
		-moz-transition: top 0.3s 0.6s ease-in-out, -moz-transform 0.3s ease-in-out;
		-o-transition: top 0.3s 0.6s ease-in-out, -o-transform 0.3s ease-in-out;
		transition: top 0.3s 0.6s ease-in-out, transform 0.3s ease-in-out;
	}

	.m-hamburger .line::before {
		top: 6px;
	}

	.m-hamburger .line::after {
		top: -6px;
	}

	.m-toggle .m-hamburger .line {
		transition: background 0.3s 0s ease-in-out;
		background: transparent !important;
	}

	.m-toggle .m-hamburger .line::before,
	.m-toggle .m-hamburger .line::after {
		-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s 0.5s ease-in-out;
		-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s 0.5s ease-in-out;
		-o-transition: top 0.3s ease-in-out, -o-transform 0.3s 0.5s ease-in-out;
		transition: top 0.3s ease-in-out, transform 0.3s 0.5s ease-in-out;
		top: 0;
		width: 20px;
	}

	.m-toggle .m-hamburger .line::before {
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		-moz-transform: rotate3d(0, 0, 1, 45deg);
		-o-transform: rotate3d(0, 0, 1, 45deg);
		-ms-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
	}

	.m-toggle .m-hamburger .line::after {
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		-moz-transform: rotate3d(0, 0, 1, -45deg);
		-o-transform: rotate3d(0, 0, 1, -45deg);
		-ms-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
	}

	.m-menu{
		width: 100%;
		height: 0;
		background-color: var(--bg-card);
		position: absolute;
		left: 0;
		z-index: 998;
		overflow: hidden;
		transition: all .3s;
	}

	.m-toggle .m-menu{
		height: 100vh;
	}

	.m-toggle{
		overflow: hidden;
	}

	.m-search,
	.m-lang{
		margin-right: 10px;
	}

	.m-toggle .m-search,
	.m-toggle .m-lang{
		display: none;
	}

	.dropdown-links{
		padding: 6%;
		box-sizing: border-box;
	}

	.dropdown-item > a{
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid var(--border-color);
		cursor: pointer;
	}

	.sub-links{
		padding: 15px 0 15px 20px;
		box-sizing: border-box;
	}

	.sub-links li a{
		display: block;
		padding: 15px 0;
	}

	.sub-links{
		display: none;
	}

	.wrapper-title .right .more{
		display: none;
	}

	/* banner */
	.full-page{
		height: 60vh!important;
	}

	.typesetting h3{
		font-size: 30px;
	}

	.typesetting ul{
		margin-bottom: 0;
	}

	.typesetting a.more{
		padding: 10px 30px;
	}

	.product-info{
		text-align: center;
	}

	.about-title{
		font-size: 24px;
	}

	.about-box .left{
		width: 100%;
		padding-right: 0;
		margin-bottom: 20px;
	}

	.about-items li{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.about-num span{
		font-size: 24px;
	}

	.about-icon{
		width: 40px;
	}

	.about-info{
		width: calc(100% - 60px);
	}

	.about-items{
		margin-top: 20px;
		margin-bottom: 5px;
	}

	.about-box .right{
		width: 100%;
	}

	/* news */
	.news-item{
		padding: 10px 20px;
	}

	.tab-swiper .swiper-wrapper{
		justify-content: center;
		margin-top: 20px;
	}

	.headlines{
		width: 100%;
		margin-bottom: 15px;
	}

	.headlines .info{
		padding: 15% 20px 20px;
		flex-wrap: wrap;
	}

	.headlines .info i{
		display: none;
	}

	.headlines-list{
		width: 100%;
	}

	.headlines-info h3{
		white-space: wrap;
		margin-bottom: 5px;
	}
	

	.footer-content .footer-info{
		width: 100%;
		padding-right: 0;
	}

	.footer-menu{
		display: none;
	}

	.footer-logo > img{
		display: none;
	}

	.footer-content{
		justify-content: center;
	}

	.footer-info{
		text-align: center;
	}

	.links{
		display: none;
	}

	.copyright p{
		font-size: 14px;
		text-align: center;
		width: 100%;
	}

	.policy{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}

	.policy > a{
		margin-right: 15px;
	}

	/* product */
	.category{
		position: relative;
		margin-top: 60px;
	}

	.category-box{
		padding: 15px 0;
	}

	.subcategory{
		display: none;
	}

	.banner{
		padding-top: 56%;
	}

	.typesetting{
		padding-top: 20px;
	}

	.typesetting ul{
		margin-top: 10px;
		color: var(--text-white);
	}

	.banner-text h4{
		font-size: 30px;
	}

	.product-list li{
		width: 100%;
	}

	.product-card .info{
		flex-wrap: wrap;
	}

	.product-card .info .imgbox{
		width: 100%;
	}
	
	.product-item .product-tags,
	.product-item .more{
		display: none;
	}

	.product-card .info .imgbox{
		padding-top: 68.27%;
	}

	/* details */
	.product-block{
		padding: 20px;
		border-radius: 10px;
	}

	.product-block .left{
		width: 100%;
	}
	
	.product-block .right{
		width: 100%;
		margin-top: 20px;
	}
	
	.product-title{
		font-size: 26px;
	}

	/* contact */
	.contact-box .contact-info{
		width: 100%;
		padding-bottom: 20px;
	}

	.contact-box .map{
		width: 100%;
		margin-top: 20px;
	}

	.more-contact{
		display: none;
	}

	.honor-swiper{
		margin-top: 30px;
		margin-left: 10%;
	}

	.honor-swiper .swiper-button-prev,
	.honor-swiper .swiper-button-next{
		display: none;
	}


	/* feedback */
	.radio label{
		margin-right: 30px;
		margin-bottom: 10px;
	}

	.ipt-text li{
		width: 100%;
		margin-bottom: 26px;
	}

	.ipt-text li:last-child{
		margin-bottom: 0;
	}

	.feedback-box .item p,
	.feedback-box .item p a{
		font-size: 14px;
	}

	.ipt-btn{
		width: 100%;
	}


}

/* 平板 */
@media (min-width: 576px) and (max-width: 991px) {
	.header {
		display: none;
	}
}

/* 笔记本/小屏电脑 */
@media (min-width: 992px) and (max-width: 1199px) {

	/* haeder */


	.top-side {
		margin-left: 15px;
	}

	.nav>ul>li {
		margin: 0 2%;
	}

}

/* 大屏桌面 */
@media (min-width: 1200px) {}