:root {
	--container-width: 1400px;
	--body-font-family: Microsoft YaHei;
	--title-font-family: Microsoft YaHei;
	--body-font-size: 16px;
	--body-color: #555;
	--body-line-height: 1.7;
	--main-color: #c00a14;
	--sub-color: #dd2821;
	--overlay-color: rgba(0, 0, 0, 0);
	--swiper-theme-color: var(--main-color);
	--side-bgcolor: #555;
	--side-active-bgcolor: var(--main-color);
	--mob-color: #333;
	--mob-active-color: #333
}

html {
	scroll-padding-top: 71px
}

@font-face {font-display: swap;font-family: "iconfont";font-style: normal;font-weight: normal;src: url('../fonts/iconfont.woff2') format('woff2');}
@font-face {font-family: "Rubik";src: url("../fonts/Rubik-400.woff2") format("woff2");font-weight: 400;font-display: swap}
@font-face {font-family: "Rubik";src: url("../fonts/Rubik-600.woff2") format("woff2");font-weight: 600;font-display: swap}

@media(max-width:768px) {
	html {
		scroll-padding-top: 56px
	}
}

.side-share .share-item:hover .share-link {
	background: var(--main-color);
	position: relative
}

.side-share .share-item:hover .share-pop {
	background: var(--main-color)
}

.service-mobile .share-text {
	color: #fff
}

a {
	color: #555
}

a:hover {
	color: #666
}

u {
	text-decoration-color: var(--main-color);
	text-underline-offset: 9px
}

ol,
ul {
	padding-left: 20px
}

.form-control::placeholder {
	color: #9b9b9b;
	font-size: 13px
}

.form-feedback .btn {
	background: var(--main-color)
}

.share-text {
	background: transparent;
	border: 0
}

.nav-quote {
	background: var(--main-color);
	border-width: 0;
	color: #fff;
	font-size: 14px;
	padding: 5px 15px
}

.product-col .btn-solid,
.main-container.news .btn-solid,
.main-container.resbonsibility .btn-solid {
	font-size: 13px;
	margin: 10px auto;
	padding: 10px 11px
}

.manufacture .btn-solid {
	font-size: 13px;
	margin: 10px 0;
	padding: 10px 11px;
	background: #b32123;
	border-color: #b32123
}

.main-container {
	padding: 60px 0
}

@media(max-width:768px) {
	.main-container {
		padding: 30px 0
	}
}

.dropdown-search>.search-btn {
	display: flex;
	align-items: center;
	margin-left: 30px
}

.dropdown-search .icon {
	margin-left: 5px
}

.dropdown-search .dropdown-menu {
	margin-top: 10px !important;
	min-width: 300px !important;
	padding: 20px;
	border-top: 4px solid var(--main-color);
	background: #f8f8f8
}

.dropdown-search .dropdown-menu .btn {
	background: var(--sub-color);
	color: #fff
}

@media(max-width:768px) {
	.dropdown-search .icon {
		margin: 0
	}

	.dropdown-search>.search-btn {
		margin-left: 0
	}

	.dropdown-search .dropdown-menu {
		min-width: 250px !important;
		padding: 5px !important
	}
}

.lang {
	margin-left: 10px
}

.lang img {
	margin-right: 5px
}

.lang .dropdown-toggle {
	border: 0;
	color: #fff;
	padding: 3px 12px 2px;
	background: var(--main-color);
	border-radius: 4px;
	font-size: 15px
}

.lang .dropdown-menu {
	z-index: 1021
}

.lang .dropdown-item {
	color: #666;
	font-size: 15px;
	padding: 8px 15px
}

.navbar-brand {
	padding: 20px 0;
	justify-content: center;
	display: flex;
	align-items: center;
	color: #dc1c25;
	font-size: 23px;
	font-weight: 700
}

.navbar-brand>.img-fluid {
	transition: max-width .15s linear;
	max-width: 156px
}

.navbar-brand:hover {
	color: #d80c18
}

.navbar-brand span {
	padding: 0 0 3px 6px;
	text-transform: uppercase
}

.navbar-toggler {
	color: var(--main-color)
}

@media(max-width:576px) {
	.navbar-brand {
		font-size: 20px;
		flex-direction: column;
		align-items: start
	}

	.navbar-brand>.img-fluid {
		max-width: 201px
	}

	.navbar-brand span {
		display: none
	}
}

.navbar {
	transition-property: transform, background;
	transition-duration: .4s;
	transition-timing-function: ease;
	background: rgba(0, 0, 0, .2)
}

.navbar-nav .nav-link {
	flex-grow: 1;
	padding: .5rem 1.25rem;
	font-family: var(--title-font-family);
	text-transform: uppercase;
	color: #fff
}

.navbar-nav .nav-link:hover,
.navbar .nav-link.active {
	color: var(--main-color) !important
}

.navbar-nav .dropdown-item {
	color: #333;
	font-size: 15px
}

.navbar-nav .dropdown-item:hover {
	color: var(--main-color)
}

.dropdown.wide .dropdown-menu {
	padding: 0
}

.navbar-nav .item-col {
	transition: background ease .3s
}

.navbar-nav .item-col:hover {
	background: #e9ecef
}

.navbar-nav .category-text {
	text-align: center;
	padding: 10px 5px
}

.navbar-nav .item-col:hover .category-text a {
	color: var(--main-color)
}

@media(max-width:1200px) {
	.navbar-nav .nav-item {
		padding: 0
	}

	.navbar-nav .dropdown-menu {
		width: 100%
	}

	.navbar-nav .dropdown-item,
	.navbar-nav .nav-link {
		text-align: center;
		justify-content: center
	}
}

.fixed-effect {
	background: #fff;
	box-shadow: 0 3px 15px #1a1a1a1a
}

.fixed-effect.navbar .nav-link {
	color: #000
}

@keyframes slidedown {
	0% {
		transform: translateY(-70px)
	}

	100% {
		transform: translateY(0)
	}
}

.banner-simple {
	height: 400px;
	text-align: center;
	color: #fff
}

.banner-simple .inner-content {
	flex-grow: 1
}

.banner-simple h1 {
	font-size: 54px;
	font-weight: 600;
	font-family: var(--title-font-family);
	line-height: 1.5
}

.swiper h1,
.swiper h2 {
	font-size: 42px;
	font-weight: 600;
	font-family: var(--title-font-family);
	line-height: 1.5;
	margin: auto
}

.banner-simple h1 span,
.swiper span {
	display: block;
	font-size: 26px;
	letter-spacing: 4px
}

.swiper {
	height: 500px
}

.swiper .inner-content {
	color: #fff;
	text-align: center;
	flex-grow: 1;
	margin: 0 auto
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
	display: flex;
	justify-content: center
}

@media(max-width:768px) {
	.banner-simple {
		height: 200px
	}

	.banner-simple h1,
	.swiper h1,
	.swiper h2 {
		font-size: 24px
	}

	.banner-simple h1 span,
	.swiperspan {
		font-size: 14px
	}

	.swiper {
		height: 250px
	}
}

@media(max-width:576px) {

	.banner-simple h1,
	.swiper h1,
	.swiper h2 {
		font-size: 20px
	}
}

.swiper-banner .swiper-pagination{bottom: 20px;}

.banner-nav {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	color: #fff;
	justify-content: center;
	align-items: center
}

.banner-nav .title {
	margin-bottom: 12px;
	font-family: var(--title-font-family);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 40px;
	color: #fff
}

.banner-nav .title::after {
	content: "";
	display: block;
	width: 70px;
	height: 2px;
	background: var(--main-color);
	margin: 12px auto 0
}

.banner-nav .breadcrumb {
	font-size: 15px;
	justify-content: center
}

.banner-nav .breadcrumb-item a {
	color: #fff
}

.banner-nav .breadcrumb-item a:hover {
	color: var(--main-color)
}

@media(max-width:768px) {
	.banner-nav .title {
		font-size: 28px
	}
}

.page-title {
	display: flex;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	line-height: 1
}

.page-title .container-xl,
.page-title .container-fluid {
	display: flex;
	justify-content: space-between;
	align-items: center
}

.page-title .breadcrumb:before {
	font-family: iconfont;
	content: "";
	margin-right: .25rem
}

@media(max-width:768px) {

	.page-title .container-xl,
	.page-title .container-fluid {
		flex-direction: column
	}
}

.shrink-wrapper {
	margin-bottom: 30px
}

.shrink-wrapper .text {
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: height .2s;
	margin-bottom: 8px
}

.shrink-wrapper .text::after {
	position: absolute;
	display: block;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: linear-gradient(0, #fff 0, rgba(0, 0, 0, 0));
	opacity: 1;
	transition: opacity .2s
}

.shrink-wrapper .text.expand {
	max-height: 100% !important;
	text-overflow: unset
}

.shrink-btn {
	background: transparent;
	border-width: 0;
	font-size: 14px;
	text-transform: uppercase;
	color: #696969;
	min-width: 80px
}

.shrink-btn::before {
	display: inline-flex;
	font-family: iconfont;
	content: "";
	margin-right: 5px;
	transition: transform .2s ease-in-out
}

.shrink-btn.expand::before {
	transform: rotate(-180deg)
}

.cate-col {
	background: #fff;
	border-radius: 15px;
	padding: 15px;
	transition: .3s all;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05)
}

.cate-col:hover {
	transform: translateY(-10px);
	background: var(--main-color);
	color: #fff
}

.cate-col:hover .entry-title a,
.cate-col:hover span {
	color: #fff !important
}

.cate-col .entry-wrapper {
	padding: 20px;
	text-align: center;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column
}

.cate-col .entry-title {
	font-family: var(--title-font-family);
	text-transform: capitalize;
	transition: color ease .3s;
	text-align: center;
	font-size: 21px;
	margin: 0 0 15px;
	font-weight: 600
}

.cate-col .entry-title::before {
	display: none
}

.cate-col .entry-title a,
.cate-col .entry-title:hover {
	color: var(--body-color)
}

.cate-col .btn-solid {
	margin-top: 10px;
	font-size: 15px
}

.cate-col:hover .btn-solid {
	background: #fff;
	color: var(--main-color)
}

@media(max-width:768px) {
	.cate-col .entry-title {
		font-size: 18px
	}
}

.product-col {
	margin-bottom: 25px;
	background: #f2f2f2
}

.product-col:hover .entry-title a {
	color: var(--main-color)
}

.product-col .entry-wrapper {
	padding: 20px 8px;
	text-align: center
}

.product-col .entry-title {
	font-weight: 600;
	font-family: var(--title-font-family);
	font-size: 20px
}

.product-col .entry-title a {
	color: #333
}

.product-col .entry-text {
	font-size: 14px
}

.article-col {
	padding: 30px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgb(0 0 0/.16);
	margin-bottom: 35px;
	font-size: 15px
}

.article-col .entry-wrapper {
	padding-top: 20px
}

.article-col .entry-meta {
	margin-bottom: 10px
}

.article-col .entry-title {
	font-size: 19px;
	font-weight: 600;
	font-family: var(--title-font-family);
	margin-bottom: 15px
}

.article-col .entry-title a {
	color: #333
}

.article-col .more {
	color: var(--sub-color);
	text-transform: uppercase;
	display: inline-block;
	margin: 10px 0;
	font-weight: 700;
	position: relative
}

.article-col .more:hover {
	color: #073e70;
	transition: .3s all
}

.article-col .more::after {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translate(0, -50%);
	font-family: iconfont;
	content: ""
}

.article-col .more:hover::after {
	right: -30px;
	transition: .3s all ease-out
}

@media(max-width:768px) {
	.article-col {
		padding: 22px 15px 28px;
		margin-bottom: 20px
	}

	.article-col .entry-wrapper {
		padding: 10px 6px
	}

	.article-col .entry-meta {
		padding-bottom: 5px
	}

	.article-col .entry-title {
		font-size: 17px
	}

	.article-col .entry-text,
	.article-col .more {
		font-size: 14px
	}
}

.article-row {
	margin-bottom: 40px
}

.article-row .entry-wrapper {
	padding: 0 20px
}

.article-row:hover .thumbnail::before {
	opacity: .2
}

.article-row .entry-meta {
	padding-bottom: 10px;
	color: #777;
	font-size: 14px
}

.article-row .entry-title {
	font-family: var(--title-font-family);
	font-size: 22px;
	margin-bottom: 15px
}

.article-row .entry-text {
	color: #777
}

.article-row .more {
	display: block;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	transition: all ease .5s
}

@media(max-width:768px) {
	.article-row .entry-wrapper {
		padding: 20px 0
	}

	.article-row .entry-title {
		font-size: 16px
	}
}

.product-cart {
	display: flex;
	align-items: center
}

.product-cart .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	flex-grow: var(--cart-btn-grow, 1)
}

.product-cart .btn:not(:first-child) {
	margin-left: 15px
}

.product-cart .btn .icon {
	margin-right: 5px
}

.pic-col {
	margin-bottom: 1.75rem;
	border: 1px solid #f2f2f2;
	transition: all ease .2s
}

.pic-col:hover {
	border: 1px solid #ddd
}

.pic-col .entry-wrapper {
	padding: .5rem .75rem;
	text-align: center;
	background: #eee
}

.pic-col .entry-title {
	margin: 0;
	font-size: 15px
}

@media(max-width:768px) {
	.pic-col .entry-wrapper {
		font-size: 14px
	}
}

.video-col {
	margin-bottom: 24px;
	border: 1px solid #f6f6f6;
	overflow: hidden
}

.video-col .entry-wrapper {
	padding: .875rem .75rem;
	background: #777;
	color: #fff
}

.video-col .entry-title {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	text-align: center
}

.sidebar {
	top: 90px;
	position: sticky
}

.widget {
	margin-bottom: 30px
}

.widget-header {
	background: var(--main-color);
	margin-bottom: 15px
}

.widget-header .drop {
	color: #fff
}

.widget-header .title {
	font-family: var(--title-font-family);
	font-size: 18px;
	font-weight: 500;
	color: #f6f6f6;
	margin: 0;
	padding: 15px 10px
}

.widget-collapse {
	border: 1px solid #eee;
	font-size: 15px
}

.widget-collapse .menu-item {
	border-bottom: solid 1px #e5e5e5
}

.widget-collapse .menu-link {
	padding: 10px 8px 10px 15px
}

.widget-collapse .sub-menu .menu-link {
	padding-left: 24px
}

.widget-collapse .third-menu .menu-link {
	padding-left: 34px
}

.widget-collapse .menu-item.active .menu-link {
	color: var(--main-color)
}

.widget-collapse .drop:after {
	font-family: iconfont;
	content: "";
	transition: transform .2s ease-in-out;
	color: var(--main-color)
}

.widget-collapse .drop.collapsed:after {
	transform: rotate(-180deg)
}

@media(max-width:768px) {
	.sidebar {
		margin-top: 30px
	}

	.widget-header {
		margin-bottom: 15px
	}
}

.media-article {
	margin-bottom: 15px
}

.media-article img {
	max-width: 90px;
	margin-right: 12px
}

.media-article .post-title {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 2px;
	line-height: 1.5
}

.media-article .post-title a:hover {
	color: #c42729;
	transition: color ease .2s
}

.media-article time {
	font-size: 13px;
	color: var(--main-color)
}

@media(max-width:992px) {
	.media-article img {
		max-width: 100px
	}
}

.media-product {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #eee
}

.media-product:hover {
	border-color: var(--main-color);
	transition: all ease .3s
}

.media-product img {
	max-width: 85px;
	margin-right: 12px
}

.media-product .post-title {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 2px;
	line-height: 1.5
}

.media-product .post-title a:hover {
	color: var(--main-color);
	transition: color ease .2s
}

.media-product .more {
	margin: 5px 0 0;
	text-transform: uppercase;
	color: var(--main-color);
	font-size: 12px
}

.media-product .more:after {
	font-family: iconfont;
	content: "";
	padding-left: 5px
}

.media-product .more:hover {
	color: var(--main-color);
	transition: all ease .2s
}

@media(max-width:992px) {
	.media-product img {
		max-width: 100px
	}
}

.content-wrapper {
	font-size: 16px
}

.content-wrapper h2,
.content-wrapper h3 {
	font-size: 22px;
	font-weight: 700;
	color: #434176;
	margin: 15px 0
}

.content-wrapper h3 {
	font-size: 19px;
	margin: 10px 0
}

.content-wrapper a {
	color: var(--main-color)
}

.content-wrapper table th,
.content-wrapper table td {
	padding: .5rem;
	vertical-align: middle;
	border: 1px solid #dee2e6;
	text-align: center
}

.content-wrapper table th {
	background: #666;
	color: #fff
}

.content-wrapper table tbody tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, .03)
}

.content-wrapper.product table thead th {
	background: #336185;
	color: #fff;
	font-weight: normal;
	vertical-align: middle
}

.content-wrapper.product table tbody th {
	font-weight: 600
}

.content-wrapper.product table tbody tr {
	background-color: #f0f3fa
}

.content-wrapper.product table tbody tr:nth-of-type(odd) {
	background-color: #d9e0ea
}

.content-wrapper ol li {
	margin: 0 0 1rem
}

@media(max-width:768px) {
	.content-wrapper {
		padding: 10px;
		font-size: 14px
	}

	.content-wrapper h2,
	.content-wrapper h3 {
		font-size: 18px
	}

	.content-wrapper h3 {
		font-size: 16px
	}

	.content-wrapper table thead th {
		font-size: 14px
	}

	.content-wrapper table th,
	.content-wrapper table td {
		padding: 8px
	}
}

.page-link {
	padding: .5rem .875rem
}

.page-item.active .page-link {
	color: #fff;
	background-color: #444;
	border-color: #444
}

.item-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 15px
}

.item-list li {
	border-bottom: 1px dashed #eee;
	padding: 12px 0
}

.item-list>li>a {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.item-list>li>a:hover {
	color: #fe8301
}

.item-list li a::before {
	font-family: iconfont;
	content: "";
	margin-right: 8px;
	margin-left: 4px
}

.item-list li time {
	float: right;
	padding-right: 5px;
	margin-left: 8px;
	color: #999
}

.product-application {
	padding: 60px 0
}

.application-col {
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 25px;
	background: #f9fafa
}

.application-col img {
	border-radius: 20px
}

.application-col .entry-wrapper {
	padding-top: 25px;
	text-align: center
}

.application-col .entry-title {
	font-weight: 600;
	font-size: 22px;
	color: #141414;
	margin-bottom: 15px
}

.application-col .entry-text {
	color: #7a7a7a;
	font-size: 15px
}

.page-footer{background-attachment: fixed;background-image: url(../images/foot_bg.jpg);position: relative;z-index: 1;}

.page-footer .contact-item {
	display: flex;
	align-items: center;
	padding: 6px 0
}

.page-footer .contact-item .icon {
	margin-right: 10px
}

.page-footer {
	background: #313337;
	color: #fff;
	padding-top: 50px;
	font-size: 15px
}

.footer-logo {
	max-width: 156px
}

.page-footer .footer-summary {
	margin-top: 20px;
	max-width: 350px
}

.page-footer li {
	padding: 6px 0;
	display: flex;
	align-items: center
}

.page-footer li::before {
	content: "";
	font-family: iconfont;
	margin-right: 10px;
	color: var(--main-color)
}

.page-footer .row>[class*="col-"] {
	margin-bottom: 20px
}

.footer-title {
	font-family: var(--title-font-family);
	font-size: 22px;
	margin-bottom: 25px;
	font-weight: 600
}

.page-footer a {
	color: #fff;
	transition: color ease .3s
}

.page-footer a:hover {
	color: var(--main-color)
}

.footer-QR {
	display: flex;
	gap: 20px;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eeeeee0d
}

.qr-text {
	font-size: 15px;
	margin-bottom: 6px
}

.footer-bottom {
	padding: 12px 0;
	border-top: 1px solid #555;
	margin-top: 50px;
	text-align: center
}

@media(max-width:768px) {
	.footer-logo {
		max-width: 100%
	}

	.footer-bottom {
		margin-top: 0;
		padding: 10px 0 60px
	}

	.page-footer .footer-summary {
		max-width: 100%
	}

	.footer-QR {
		justify-content: center;
		text-align: center
	}
}

.home-title {
	color: #333;
	font-weight: 600;
	font-size: 36px;
	font-family: var(--title-font-family);
	margin-bottom: 50px;
	text-align: center
}

@media(max-width:768px) {
	.home-title {
		font-size: 26px;
		margin-bottom: 25px
	}
}

.inquiry-wrapper {
	padding: 60px 0;
	background: #f2f2f2
}

.contact-wrapper .title {
	font-family: var(--title-font-family);
	font-size: 32px;
	margin-bottom: 1rem;
	color: #333;
	font-weight: 600
}

.contact-wrapper .summary {
	color: #555
}

.contact-wrapper .social-wrapper {
	margin-top: 20px
}

.contact-wrapper .contact-item {
	display: flex;
	padding: 24px 0;
	border-bottom: 1px solid #e5e5e5;
	align-items: center;
	color: #333
}

.contact-wrapper .contact-whatsapp {
	padding: 16px 0
}

.contact-wrapper .contact-whatsapp img {
	margin-left: 30px
}

.contact-wrapper .contact-item p {
	margin: 0
}

.contact-wrapper .contact-item a {
	color: #333
}

.contact-wrapper .contact-item .icon {
	font-size: 30px;
	color: var(--main-color);
	margin-right: 25px
}

.contact-wrapper .contact-item a:hover {
	color: #c42729
}

.feedback-wrapper {
	padding: 40px 50px;
	background-color: #fff;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .12)
}

.feedback-wrapper .title {
	font-family: var(--title-font);
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 10px
}

.feedback-wrapper .btn-solid {
	font-size: 16px
}

@media(max-width:992px) {

	.contact-wrapper .title,
	.feedback-wrapper .title {
		font-size: 22px
	}

	.contact-item {
		padding: 20px 0
	}

	.feedback-wrapper {
		padding: 40px 25px;
		margin-top: 20px
	}
}

.icon-clock::after {
	content: "";
	font-family: iconfont
}

.btn-solid {
	background: var(--main-color);
	transition: all .3s ease-in-out;
	padding: 12px 15px;
	text-align: center;
	font-size: 16px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	min-width: 150px;
	line-height: 1;
	color: #fff;
	font-weight: 500;
	border: 2px solid var(--main-color);
	text-transform: capitalize
}

.btn-transparent {
	background: transparent;
	transition: all .3s ease-in-out;
	padding: 12px 15px 12px;
	text-align: center;
	font-size: 18px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	min-width: 150px;
	line-height: 1;
	color: #fff;
	font-weight: 500;
	border: 2px solid #fff;
	margin: 15px 0
}

.btn-solid:hover {
	background: transparent;
	color: #000
}

.btn-transparent:hover {
	background: #fff;
	color: #000
}

@media(max-width:768px) {

	.btn-solid,
	.btn-transparent {
		font-size: 14px
	}
}

.swiper-button-prev,
.swiper-button-next {
	padding: 5px;
	background: #fff;
	width: 45px;
	height: 45px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
	--swiper-navigation-sides-offset: 10px;
	color: var(--main-color);
	--swiper-navigation-size: 20px;
	font-weight: 700;
	border-radius: 50%
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
	--swiper-pagination-bottom: 10px;
	--swiper-pagination-bullet-width: 60px;
	--swiper-pagination-bullet-height: 8px;
	--swiper-pagination-bullet-inactive-opacity: .4;
	--swiper-pagination-bullet-border-radius: 0
}

.pagination {
	margin: 30px 0 0;
	--pagination-active-bg: var(--sub-color);
	--pagination-active-color: #fff;
	--pagination-border-color: #e5e5e5;
	--pagination-active-border-color: #fff
}

.pagination .page-item {
	border: 0;
	margin: 0 5px
}

.pagination .page-link {
	border-radius: 20px;
	border: 1px solid var(--pagination-border-color);
	font-size: 20px
}

.title {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 30px;
	text-transform: capitalize;
	color: #000
}

.new-title {
	margin-bottom: 15px
}

.sub-title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 30px;
	color: var(--main-color)
}

@media(max-width:768px) {
	.title {
		font-size: 22px
	}
}

.product-frame {
	padding: 100px 0;
	background: #f2f2f2;
	text-align: center
}

.product-frame .title {
	margin: 0 0 15px 0;
	text-transform: unset
}

.product-frame .summary {
	margin: 0 0 30px 0
}

.product-frame span {
	color: var(--main-color)
}

@media(max-width:768px) {
	.product-frame {
		padding: 40px 0
	}
}

.product-advantage {
	padding: 60px 0
}

.product-advantage .title {
	margin-bottom: 70px
}

.product-advantage-col {
	text-align: center;
	padding: 50px 0;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .12);
	font-size: 15px;
	background: #fff
}

.product-advantage-col p {
	margin: 0
}

.product-advantage-col h2,
.product-advantage-col h3 {
	font-weight: 700;
	font-size: 25px;
	color: #000
}

.product-advantage-col h4 {
	font-size: 19px;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px
}

.product-advantage-col .thumbnail {
	max-width: 80px;
	margin: -70px auto 20px;
	background: var(--main-color);
	padding: 20px;
	border-radius: 50%
}

.product-advantage-col .entry-wrapper {
	padding: 0 20px
}

.product-advantage-col img {
	filter: contrast(0) brightness(100);
	transition-duration: 0s
}

.product-advantage-col:hover .entry-title {
	color: #fff
}

.product-advantage-col:hover h4 {
	color: #fff
}

.product-advantage-col:hover {
	background: var(--main-color);
	color: #fff
}

.product-advantage-col:hover img {
	filter: contrast(0) brightness(0)
}

.product-advantage-col:hover .thumbnail {
	background: #fff;
	box-shadow: 0 0 7px 5px rgba(0, 0, 0, .1)
}

@media(max-width:768px) {
	.product-advantage {
		padding: 40px 0
	}

	.product-advantage .title {
		margin-bottom: 30px
	}

	.product-advantage-col {
		margin: 15px 0
	}
}

.common-wrapper {
	padding: 60px 0;
	background: #f2f2f2
}

.common-wrapper .content-inner {
	padding-right: 35px;
	font-size: 15px;
	color: #333
}

.common-wrapper h1,
.common-wrapper h2 {
	font-size: 28px;
	font-weight: 600;
	font-family: var(--title-font-family);
	color: #000
}

.common-wrapper .btn-solid {
	font-size: 14px
}

.common-wrapper li {
	font-size: 15px;
	font-weight: 400;
	list-style: none;
	position: relative;
	margin: 10px 0
}

.common-wrapper li::after {
	content: "";
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--main-color);
	width: 9px;
	height: 9px;
	border-radius: 50%
}

@media(max-width:768px) {
	.common-wrapper {
		padding: 30px 0
	}

	.common-wrapper .content-inner {
		padding: 0 0 20px;
		font-size: 14px
	}

	.common-wrapper h1,
	.common-wrapper h2 {
		font-size: 20px;
		margin: 0 0 15px
	}
}

.menu-horizontal-wrapper {
	margin-bottom: 0;
	box-shadow: 0 6px 30px 0 rgba(153, 153, 153, .18)
}

.menu-horizontal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0
}

.menu-horizontal .nav-item:first-child {
	border-left: 1px solid #ddd
}

.menu-horizontal .nav-item {
	border-right: 1px solid #ddd
}

.menu-horizontal .nav-link {
	padding: 1rem 3.5rem;
	color: #666;
	font-size: 1rem;
	position: relative
}

.menu-horizontal .nav-link::before {
	content: "";
	width: 100%;
	position: absolute;
	height: 0;
	bottom: 0;
	left: 0;
	background: color-mix(in srgb, var(--main-color) 90%, #000);
	z-index: -1
}

.menu-horizontal .nav-link.active::before,
.menu-horizontal .nav-link:hover::before {
	height: 100%
}

.menu-horizontal .nav-link.active,
.menu-horizontal .nav-link:hover {
	color: #fff
}

#privacy-policy {
	position: fixed;
	width: 450px;
	left: 20px;
	bottom: 10px;
	background: rgba(0, 0, 0, .3);
	backdrop-filter: blur(10px);
	z-index: 19;
	padding: 15px;
	border-radius: 8px;
	color: #fff;
	display: none
}

.privacy-content h2,
.privacy-content h3,
.privacy-content h4,
.privacy-content h5,
.privacy-content h6 {
	font-size: 20px;
	font-weight: 600
}

.privacy-content p {
	font-size: 14px
}

.privacy-inner {
	min-width: 250px;
	display: flex;
	justify-content: center
}

.privacy-inner .btn {
	color: #fff;
	font-size: 14px;
	--bs-btn-border-radius: 5px
}

.btn-accept {
	background: var(--main-color);
	margin-right: 15px
}

.btn-decline {
	background: #000
}

@media(max-width:992px) {
	#privacy-policy {
		width: 100%;
		left: 0;
		bottom: 55px;
		border-radius: 0;
		padding: 10px
	}

	.privacy-wrapper {
		padding-left: 0
	}

	.privacy-content h2,
	.privacy-content h3,
	.privacy-content h4,
	.privacy-content h5,
	.privacy-content h6 {
		font-size: 18px
	}
}

.themecolor {
	padding-left: 20px
}

.themecolor {
	color: var(--main-color)
}

.swiper-pagination-bullet{width: 60px;height: 8px;border-radius: 0;margin: 0 5px;}
.swiper-pagination{width: 100%;text-align: center;bottom: 20px;}

.offcanvas-header,.service-mobile{display: none;}
.pic-col img{max-width: 100%;height: auto;}
.magiczoom{cursor: zoom-in;}

.fenye{margin-bottom: 1rem;margin-top: 3rem;text-align: center;}
.fenye a{display: inline-block;margin: 0 0.2rem;padding: 0 0.5rem;min-width: 3rem;height: 2.0rem;line-height: 2.0rem;text-align: center; border: 1px solid #ccc; color: #333;transition: all 0.3s;}
.fenye a.cur{color: #fff;border-color: var(--main-color);background-color: var(--main-color);}
.fenye a:hover{color: #fff;border-color: var(--main-color);background-color: var(--main-color);}
.fenye .prev{background: url(../images/icon_left_l.png) center no-repeat;border: 1px solid #ccc;}
.fenye .next{background: url(../images/icon_right_l.png) center no-repeat;border: 1px solid #ccc;}
.pcshow{}
@media(max-width: 768px){
	.pcshow{display: none;}
	.navbar-brand{padding-top: 15px;padding-bottom: 15px;}
	.navbar-brand>.img-fluid{max-width: 160px;}
	#header-nav{position: fixed;width: 90vw;height: 100vh;background-color: #fff;left: 0;transition: all 0.4s 0.2s;display: block;transform: translateX(-100%);}
	#header-nav.show{transform: translateX(0);}
	.offcanvas-header{display: flex;background-color: #fff;position: relative;z-index: 2;}
	.navbar-nav{width: 100%;height: 100%;position: relative;z-index: 2;background-color: #fff;padding-top: 0px;max-height: 100%;}
	#header-nav.show::after{opacity: 1;visibility: visible;}
	#header-nav::after{width: 100vw;height: 100vh;left:100%;top: 0;background-color: rgba(0,0,0,0.3);content: "";position: fixed;z-index: 0;opacity: 0;visibility: hidden;transition: all 0.4s;}
	.navbar-nav .nav-link{color: #333;border-bottom: 1px solid #eee;justify-content: flex-start;font-size: 16px;}
	.fixed-effect.navbar .nav-link{color: #333;font-size: 16px;}
	.navbar-nav .dropdown-item{text-align: left;padding-left: 40px;padding: 10px 40px;border-bottom: 1px solid #eee;}
	.navbar-nav .nav-link.dropdown-toggle::after{position: absolute;right: 30px;top: 8px;content: "";color: #666;transition: all 0.4s;}
	.navbar-nav .show .nav-link.dropdown-toggle::after{content: "";}

	.navbar-nav .nav-item .dropdown-menu .row-cols-3>.col{width: 100%;border-bottom: 1px solid #eee;}
	.navbar-nav .nav-item .dropdown-menu .thumbnail{display: none;}
	.navbar-nav .category-text{text-align: left;padding: 10px 40px;}

	.dropdown[data-bs-desktop]:hover>.dropdown-menu, .dropend[data-bs-desktop]:hover>.dropdown-menu{display: none;}
	.fenye{margin: 15px 0 0;}
	.fenye a{min-width: 2rem;}
	.main-container .title{margin-bottom: 0!important;}
	.inquiry-wrapper{padding: 40px 0;}
	.swiper-pagination-bullet{width: 40px;height: 4px;}

	.banner-simple h1 span, .swiper span{font-weight: bold;}

	.service-mobile {
		bottom: 0;
		display: flex;
		flex-flow: row nowrap;
		left: 0;
		line-height: 1;
		position: fixed;
		width: 100%;
		z-index: 997
	}

	.share-item {
		cursor: pointer;
		flex: 1
	}

	.share-link {
		align-items: center;
		background: var(--mob-bgcolor, #fafafa);
		border-right: 1px solid var(--mob-split-color, #f0f0f0);
		color: var(--mob-color, #555);
		display: flex;
		flex-direction: column;
		font-size: 0;
		justify-content: center;
		padding: 8px 6px;
		transition: background-color .3s ease
	}

	.share-link:hover {
		background: var(--mob-active-bgcolor, #eee);
		color: var(--mob-active-color, #555)
	}

	.share-ico::before {
		color: var(--mob-ico-color, #555);
		display: block;
		font-family: "iconfont";
		font-size: 18px;
		margin: 0 auto;
		width: 20px
	}

	.show-text .share-link {
		font-size: 12px;width: 100%;
	}

	.show-text .share-ico::before {
		margin-bottom: 6px
	}

	.share-pop {
		align-items: center;
		background: var(--side-active-bgcolor, #eee);
		bottom: 0;
		color: var(--side-active-color, #fff);
		display: flex;
		font-size: 16px;
		justify-content: center;
		left: 0;
		padding: 5px 18px;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0;
		transform: translateY(100%);
		transition: all .5s ease;
		white-space: nowrap;
		width: 100vw;
		z-index: -1
	}

	.share-item:hover>.share-pop {
		transform: translateY(-34px)
	}

	.show-text .share-item:hover>.share-pop {
		transform: translateY(-52px)
	}

	.share-ico.qq::before {
		content: ""
	}

	.share-ico.skype::before {
		content: ""
	}

	.share-ico.whatsapp::before {
		content: ""
	}

	.share-ico.phone::before {
		content: ""
	}

	.share-ico.mail::before {
		content: ""
	}

	.share-ico.message::before {
		content: ""
	}

	.share-pop>.share-copy {
		background: #111;
		color: #fff;
		font-size: 12px;
		--bs-btn-border-radius: 4px;
		margin-left: 8px;
		padding: 2px 10px
	}
}