﻿@charset "utf-8";
.banner-inner {
	overflow: hidden
}
.banner-inner img {
	width: 100%;
	min-height: 240px;
	object-fit: cover;
	z-index: 0;
	position: relative;
	animation: img_move 6s linear 0s forwards
}
@keyframes img_move {
0% {
transform:scale(1)
}
50% {
transform:scale(1.08)
}
100% {
transform:scale(1)
}
}
.banner-img {
	overflow: hidden
}
.banner-inner .banner-content {
	border-bottom: 1px solid #E5E5E5;
	height: 45px;
	position: relative;
	z-index: 0;
	background: #FFFFFF
}
.banner-inner .banner-content .l-wrap {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center
}
.banner-inner .banner-content .banner-breadcrumbs {
	text-transform: capitalize;
	font-size: var(--fontsize14);
	color: var(--introcolor)
}
.banner-inner .banner-content .banner-breadcrumbs a:hover {
	color: var(--color)
}
.banner-inner .banner-content .banner-breadcrumbs .link-home {
	color: var(--color);
	position: relative;
	margin-right: 30px
}
.banner-inner .banner-content .banner-breadcrumbs .link-home em {
	font-size: var(--fontsize18)
}
.banner-inner .banner-content .banner-breadcrumbs .link-home::after {
	content: "";
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 1px;
	background: var(--color)
}
.banner-inner .banner-content .banner-breadcrumbs h1 {
	font-weight: var(--fontbold4);
	font-size: inherit;
	display: inline-block
}
.nobanner {
	padding-top: 140px
}
@media(min-width:1025px) {
.nobanner header .head-info {
	background: #000000d9
}
}
.common-main {
	padding: 50px 0px
}
.pageabout-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center
}
.pageabout-1 .left {
	width: 40%
}
.pageabout-1 .left img {
	width: 100%;
	border-radius: var(--borderradius)
}
.pageabout-1 .right {
	flex: 1;
	padding-left: 3%
}
.pageabout-1 .right .title {
	font-size: var(--fontsize30);
	margin-bottom: 10px
}
.pageabout-1 .right .boxshow {
	margin-top: 30px;
	display: flex;
	align-items: center;
	box-shadow: 0 3px 12px 0 rgba(4,0,0,.29);
	border-radius: var(--borderradius);
	overflow: hidden
}
.pageabout-1 .right .boxshow em {
	background: #faf6f1;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fontbold6);
	font-size: 34px;
	color: var(--color)
}
.pageabout-1 .right .boxshow .text {
	flex: 1;
	padding: 10px 20px
}
.pageabout-2 {
	margin-top: 50px;
	position: relative;
	padding: 3% 0 5%
}
.pageabout-2::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 1920px;
	height: 100%;
	background: #F7F7F7;
	z-index: -1
}
.pageabout-2 .des {
	text-transform: uppercase;
	color: var(--color);
	text-align: center
}
.pageabout-2 .title {
	text-align: center;
	font-size: var(--hometitlefont)
}
.pageabout-2 .title span {
	color: var(--color)
}
.pageabout-2 .list {
	margin-top: 4%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.pageabout-2 .list .item {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center
}
.pageabout-2 .list .item:hover .icon {
	border-color: var(--color)
}
.pageabout-2 .list .item:hover .icon::after {
	border-top: 28px solid var(--color)
}
.pageabout-2 .list .icon {
	width: 158px;
	height: 158px;
	border: 1px solid #e8dbce;
	border-radius: 50%;
	position: relative;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .1s linear
}
.pageabout-2 .list .icon em {
	color: var(--color);
	font-size: 40px;
	font-weight: var(--fontbold6)
}
.pageabout-2 .list .icon::before {
	content: "";
	position: absolute;
	bottom: calc(-29% + 1px);
	left: 50%;
	transform: translateX(-50%);
	width: 0px;
	height: 0px;
	border: 20px solid transparent;
	border-top: 28px solid #FFFFFF;
	z-index: 11
}
.pageabout-2 .list .icon::after {
	content: "";
	position: absolute;
	bottom: -29%;
	left: 50%;
	transform: translateX(-50%);
	width: 0px;
	height: 0px;
	transition: all .1s linear;
	border: 20px solid transparent;
	border-top: 28px solid #e8dbce;
	z-index: 1
}
.pageabout-2 .list .span {
	margin-top: 40px;
	font-size: var(--fontsize24);
	color: var(--fontcolor)
}
.pageabout-2 .list .text {
	color: var(--introcolor)
}
.teamlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.teamlist .item {
	width: 17%;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.teamlist .item:hover .img {
	border-color: var(--color)
}
.teamlist .item:hover .img em {
	opacity: 1
}
.teamlist .item:hover .info {
	transform: translateY(-30px);
	background: var(--color);
	color: #FFFFFF
}
.teamlist .item:hover .info .p {
	color: #FFFFFF
}
.teamlist .item:hover .info .share {
	opacity: 1;
	visibility: inherit
}
.teamlist .item .img {
	border: 1px solid #FFFFFF;
	position: relative
}
.teamlist .item .img em {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--color);
	color: #FFFFFF;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fontbold6);
	opacity: 0;
	transition: all .1s linear
}
.teamlist .item .img img {
	width: 100%
}
.teamlist .item .info {
	text-align: center;
	padding: 20px 10px;
	background: #FFFFFF;
	z-index: 1;
	transition: all .15s linear;
	border-bottom-left-radius: var(--borderradius);
	border-bottom-right-radius: var(--borderradius)
}
.teamlist .item .info .title {
	font-size: var(--fontsize22)
}
.teamlist .item .info .p {
	color: var(--color)
}
.teamlist .item .info .share {
	margin-top: 10px;
	color: #FFFFFF;
	opacity: 0;
	visibility: hidden;
	display: flex;
	justify-content: center
}
.teamlist .item .info .share a {
	margin: 0px 5px;
	text-decoration: none;
	color: #FFFFFF
}
.rd-wrap .rd-title {
	font-size: var(--fontsize24);
	font-weight: var(--fontbold6);
	text-align: center;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 30px
}
.rd-wrap .rd-title::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: #DCDCDC
}
.rd-wrap .rd-img {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 50px
}
.rd-wrap .rd-img img {
	width: 49%;
	border-radius: var(--borderradius)
}
.rd-wrap .rd-p {
	text-align: center
}
.contact-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px
}
.contact-list .contact-item {
	width: 30%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4% 20px 3%;
	text-align: center;
	z-index: 1
}
.contact-list .contact-item::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	border: 1px solid var(--color);
	opacity: .3;
	z-index: -1;
	border-radius: 5px
}
.contact-list .contact-item em {
	background: var(--color);
	width: 70px;
	height: 70px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -35px;
	border-radius: var(--borderradius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: var(--fontsize22);
	font-weight: var(--fontbold6)
}
.contact-list .contact-item .contact-item-title {
	font-size: var(--fontsize22);
	margin-bottom: 10px;
	font-weight: var(--fontbold5)
}
.contact-box {
	margin-top: 30px
}
.product-catelist {
	display: flex;
	flex-wrap: wrap;
	width: 100%
}
.product-catelist .product-cateitem {
	width: 23%;
	margin-right: 2.6%;
	box-shadow: 0 3px 18px 0 rgba(0,0,0,.16);
	background: #FFFFFF;
	margin-bottom: 2em;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.product-catelist .product-cateitem:nth-child(4n) {
	margin-right: 0px
}
.product-catelist .product-cateitem:hover .cate-img img {
	transform: scale(1.02)
}
.product-catelist .product-cateitem:hover .cate-img .more {
	width: 100%;
	opacity: 1
}
.product-catelist .product-cateitem:hover .cate-title {
	background: var(--color)
}
.product-catelist .product-cateitem:hover .cate-title a {
	color: #FFFFFF
}
.product-catelist .product-cateitem .cate-img {
	max-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center
}
.product-catelist .product-cateitem .cate-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.product-catelist .product-cateitem .cate-img .more {
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	width: 0px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fontsize18);
	line-height: 1;
	color: #FFFFFF;
	background: rgba(39,39,39,.8);
	text-transform: capitalize;
	transition: all .2s linear;
	opacity: 0
}
.product-catelist .product-cateitem .cate-img .more em {
	margin-left: 5px
}
.product-catelist .product-cateitem .cate-title {
	padding: 20px 15px;
	height: 80px;
	display: flex;
	align-items: center
}
.product-catelist .product-cateitem .cate-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: var(--fontsize18);
	font-weight: var(--fontbold6)
}
.page-container {
	display: flex;
	align-items: flex-start;
	width: 100%
}
.sidebar {
	width: 350px
}
.sidebar ul {
	list-style: none;
	padding: 0px
}
.sidebar-item {
	border: 1px solid #E5E5E5;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: var(--borderradius)
}
.sidebar-title {
	font-size: var(--fontsize22);
	margin-bottom: 20px;
	color: #333333;
	text-transform: capitalize
}
.sidebar-search {
	display: flex;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.sidebar-search input {
	flex: 1;
	border: 1px solid #F2F2F2;
	background: #F2F2F2;
	outline: 0;
	padding: 0px 15px;
	transition: all .1s linear;
	border-top-left-radius: var(--borderradius);
	border-bottom-left-radius: var(--borderradius)
}
.sidebar-search input:focus {
	border-color: var(--color)
}
.sidebar-search button {
	border: 1px solid var(--color);
	width: 45px;
	height: 45px;
	background: var(--color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .1s linear
}
.sidebar-search button:hover {
	opacity: .95
}
.sidebar-search button em {
	font-size: var(--fontsize22);
	color: #FFFFFF
}
.sidebar-cate>li {
	background: #F3F3F3;
	margin-bottom: 15px;
	border-radius: 3px;
	position: relative
}
.sidebar-cate>li.active>a {
	color: #FFFFFF;
	background: var(--color)
}
.sidebar-cate>li.active>a:hover {
	color: #FFFFFF
}
.sidebar-cate>li.active em {
	color: #FFFFFF;
	transform: rotateX(180deg)
}
.sidebar-cate>li>a {
	font-weight: var(--fontbold6)
}
.sidebar-cate>li a {
	color: #333333;
	display: inline-flex;
	align-items: center;
	padding: 0px 15px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	transition: all .1s linear;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden
}
.sidebar-cate>li a:hover {
	color: var(--color)
}
.sidebar-cate>li em {
	position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-weight: var(--fontbold6);
	transition: all .1s linear
}
.sidebar-cate>li .sub-menu {
	display: none
}
.sidebar-cate>li .sub-menu li.active a {
	color: var(--color)
}
.sidebar-cate>li .sub-menu a {
	padding-left: 30px
}
.sidebarhot-list .sidebarhot-item {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 20px
}
.sidebarhot-list .sidebarhot-item:last-child {
	margin-bottom: 0px
}
.sidebarhot-list .sidebarhot-item .sidebarhot-img {
	width: 110px;
	height: 80px;
	display: block;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.sidebarhot-list .sidebarhot-item .sidebarhot-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.sidebarhot-list .sidebarhot-item .sidebarhot-info {
	flex: 1;
	padding-left: 15px
}
.sidebarhot-list .sidebarhot-item .sidebarhot-info .title {
	line-height: 1.4;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden
}
.sidebarhot-list .sidebarhot-item .sidebarhot-info .more {
	color: var(--color);
	text-transform: lowercase
}
.sidebarhot-list .sidebarhot-item:hover .sidebarhot-img img {
	transform: scale(1.05)
}
.sidebarhot-list .sidebarhot-item:hover .sidebarhot-info .title {
	color: var(--color)
}
.sidebar-item.inquiry {
	padding: 0px
}
.page-main {
	flex: 1;
	margin-right: 30px;
	width: calc(100% - 350px)
}
.page-main .pro-cate-title {
	font-size: var(--fontsize26);
	line-height: 1;
	margin-bottom: 15px
}
.pro-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0px
}
.pro-list li {
	background: #fbfbfb;
	margin-bottom: 40px;
	border-radius: var(--borderradius);
	position: relative;
	overflow: hidden;
	border: 1px solid #fbfbfb
}
.pro-list li .pro-img {
	position: relative;
	overflow: hidden
}
.pro-list li .pro-img>a {
	display: block;
	width: 100%;
	max-height: 360px
}
.pro-list li .pro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.pro-list li .pro-img .icon {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: #F3F3F3;
	color: var(--color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transform: translateY(20px);
	transition: all .1s linear;
	opacity: 0
}
.pro-list li .pro-img .icon.pro-checked {
	background: var(--color);
	color: #FFFFFF;
	transform: translateY(0);
	opacity: 1
}
.pro-list li .pro-img .icon-hottitle {
	position: absolute;
	left: -50px;
	top: -40px;
	width: 100px;
	height: 80px;
	border-radius: 50%;
	background: var(--color);
	z-index: 1;
	font-size: var(--fontsize16)
}
.pro-list li .pro-img .icon-hottitle::after {
	position: absolute;
	right: 15px;
	bottom: 12px;
	content: "Hot";
	color: #FFFFFF;
	z-index: 2
}
.pro-list li .pro-info {
	padding: 20px 15px;
	flex: 1
}
.pro-list li .pro-info .title {
	font-size: var(--fontsize18);
	font-weight: var(--fontbold6);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden
}
.pro-list li .pro-info .data-price {
	display: none
}
.pro-list li .pro-info .text {
	font-size: var(--fontsize16);
	margin: 10px 0px;
	color: var(--introcolor);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden
}
.pro-list li .pro-info .more {
	font-size: var(--fontsize16);
	color: var(--color)
}
.pro-list li:hover .pro-img img {
	transform: scale(1.02)
}
.pro-list li:hover .pro-img .icon {
	transform: translateY(0);
	opacity: 1
}
.pro-list li:hover .pro-info .title {
	color: var(--color)
}
.pro-list.list1 li {
	width: 31%;
	margin-right: 3.5%
}
.pro-list.list1 li:nth-child(3n) {
	margin-right: 0px
}
.pro-list.list1 li .pro-img {
	width: 100%
}
.pro-list.list0 li {
	width: 100%;
	display: flex;
	align-items: center
}
.pro-list.list0 li .pro-img {
	width: 350px
}
.pro-list.list0 li .pro-info {
	padding: 20px 5%
}
.common-page {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 20px 0px 30px
}
.common-page>a, .common-page>span {
	min-width: 45px;
	height: 45px;
	background: #FFFFFF;
	border: 1px solid #999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0px 7px;
	padding: 0px 10px;
	font-size: var(--fontsize18);
	transition: all .1s linear;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.common-page>a.ctxt, .common-page>span.ctxt {
	color: var(--color);
	border-color: var(--color)
}
.common-page a:hover {
	cursor: pointer;
	border-color: var(--color);
	color: var(--color)
}
.common-page p {
	height: 45px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color);
	margin: 0px 7px;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.common-page p em {
	width: 45px;
	height: 45px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color);
	color: #FFFFFF;
	font-weight: var(--fontbold6)
}
.common-page p a, .common-page p span {
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0px 20px;
	transition: all .1s linear
}
.pro-bottom {
	margin-top: 30px;
	padding: 0px
}
.pro-bottom a {
	text-decoration: underline;
	text-transform: lowercase
}
.pro-bottom a:hover, .pro-bottom a:active {
	color: var(--color)
}
.productsTags a {
	color: var(--fontcolor);
	text-decoration: underline;
	text-transform: lowercase
}
.productsTags a:hover {
	color: var(--color)
}
.prodetails-top {
	display: flex;
	flex-wrap: wrap
}
.preview-container {
	display: flex
}
.preview-container #media {
	background: #FAFAFA;
	width: 100%;
	height: 100%;
	z-index: 99;
	position: relative
}
.preview-container .vPlay {
	display: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 99;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: var(--fontsize22);
	cursor: pointer
}
.thumbnail-box {
	width: 85px;
	margin-right: 30px;
	position: relative
}
.thumbnail-box .list {
	height: 375px;
	overflow: hidden;
	margin: 10px 0px
}
.thumbnail-box .list .item {
	width: 100%;
	cursor: pointer;
	border: 1px solid #EEEEEE;
	border-radius: var(--borderradius)
}
.thumbnail-box .list .item.item-cur {
	border-color: var(--color)
}
.thumbnail-box .list .item img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
#gallerythumbs {
	display: none
}
.imgalt {
	display: none
}
.prodetails-button-next, .prodetails-button-prev {
	width: 100%;
	height: 28px;
	background: #FFFFFF;
	border: 1px solid var(--color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color);
	cursor: pointer;
	border-radius: var(--borderradius)
}
.prodetails-button-prev {
	transform: rotateX(180deg)
}
.singglepic {
	width: 450px;
	height: 450px
}
.singglepic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid #EEEEEE;
	border-radius: var(--borderradius)
}
.thumbnail-show {
	position: relative;
	width: 450px;
	height: 450px
}
.thumbnail-show .small-box {
	width: 100%;
	height: 100%;
	border: 1px solid #dfdfdf
}
.thumbnail-show .small-box img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.thumbnail-show .small-box .hover {
	position: absolute;
	width: 180px;
	height: 180px;
	background-color: rgba(204,204,204,.6);
	border: 1px solid #EEE;
	display: none;
	cursor: move;
	z-index: 9
}
.thumbnail-show .big-box {
	display: none;
	border: 1px solid #dfdfdf;
	border-left: none;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 100%;
	top: 0px;
	overflow: hidden;
	z-index: 999;
	background: #FFFFFF
}
.thumbnail-show .big-box img {
	display: block;
	max-width: none;
	max-height: none;
	width: 150%
}
.thumbnail-show .big-box.act {
	display: none!important
}
.banner-page {
	display: none
}
.prodetails-info {
	flex: 1;
	padding-left: 50px
}
.prodetails-info .prodetails-name {
	font-size: var(--fontsize26);
	line-height: 1.2;
	margin-bottom: 15px
}
.prodetails-info .prodetails-price {
	margin-bottom: 5px
}
.prodetails-info .prodetails-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden
}
.prodetails-info .share-btn-list {
	margin-top: 30px
}
.prodetails-info .prodetails-btnlist {
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px
}
.prodetails-info .prodetails-btnlist>* {
	width: 180px;
	height: 46px;
	background: #FFFFFF;
	border: 1px solid var(--color);
	border-radius: var(--borderradius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color);
	cursor: pointer;
	margin-right: 15px;
	margin-bottom: 10px;
	transition: all .1s linear
}
.prodetails-info .prodetails-btnlist .send em {
	margin-right: 5px
}
.prodetails-info .prodetails-btnlist .addToCart em {
	margin-right: 5px;
	font-size: var(--fontsize20)
}
.prodetails-info .prodetails-btnlist .addToCart.added {
	background: var(--color);
	color: #FFFFFF
}
.prodetails-content {
	margin: 50px 0px
}
.prodetails-content .prodetails-article-title {
	position: relative;
	width: 100%;
	padding-bottom: 3px;
	margin-top: 50px
}
.prodetails-content .prodetails-article-title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0px 20px;
	color: #FFFFFF;
	background: var(--color);
	border: 3px solid var(--color);
	border-radius: 5px 5px 0px 0px;
	font-size: var(--fontsize18);
	text-transform: capitalize;
	font-weight: var(--fontbold5)
}
.prodetails-content .prodetails-article-title::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	background: #E5E5E5
}
article a {
	color: var(--color)
}
article a:hover {
	text-decoration: underline
}
.table-wrap {
	overflow-x: auto;
	width: 100%
}
.table-wrap table {
	border-collapse: collapse;
	width: 100%
}
.table-wrap table td, .table-wrap table th {
	border: 1px solid #DDD;
	padding: 4px 10px
}
.tagContent {
	margin: 15px 0 25px
}
.inquiry-pc {
	margin-top: 20px
}
.inquiry-wrap {
	background: #F7F7F7;
	padding: 20px 15px
}
.newslist {
	display: flex;
	flex-wrap: wrap;
	list-style: none
}
.newslist li {
	margin-bottom: 2em;
	border: 1px solid #E5E5E5;
	background: #FFFFFF;
	transition: all .1s linear;
	border-radius: var(--borderradius);
	overflow: hidden
}
.newslist li:hover {
	border-color: var(--color)
}
.newslist li:hover .newslist-img img {
	transform: scale(1.02)
}
.newslist li:hover .newslist-info .title {
	color: var(--color)
}
.newslist li:hover .newslist-info .more em {
	color: var(--color)
}
.newslist li .newslist-img a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%
}
.newslist li .newslist-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.newslist li .newslist-info {
	padding: 20px 20px 0px
}
.newslist li .newslist-info .date {
	color: var(--color)
}
.newslist li .newslist-info .date em {
	margin-right: 5px
}
.newslist li .newslist-info .title {
	color: var(--fontcolor);
	font-size: var(--fontsize18);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 10px 0px 20px;
	font-weight: var(--fontbold5)
}
.newslist li .newslist-info .more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color);
	text-transform: lowercase;
	border-top: 1px solid #EEEEEE;
	padding: 15px 0px
}
.newslist li .newslist-info .more em {
	color: var(--introcolor);
	font-weight: var(--fontbold5)
}
.newslist.list1 li {
	width: 31%;
	margin-right: 2.3%
}
.newslist.list1 li .newslist-img {
	width: 100%;
	max-height: 300px
}
.newslist.list0 li {
	width: 100%;
	display: flex;
	align-items: center
}
.newslist.list0 li .newslist-img {
	width: 350px
}
.newslist.list0 li .newslist-info {
	flex: 1
}
.newslist.list0 li .newslist-info .title {
	margin: 20px 0px 40px
}
.recentnews-list {
	padding: 20px
}
.recentnews-list li {
	display: flex;
	align-items: center;
	margin-bottom: 20px
}
.recentnews-list li:last-child {
	margin-bottom: 0px
}
.recentnews-list li .img {
	width: 110px;
	height: 80px;
	background: #F3F3F3;
	border-radius: var(--borderradius)
}
.recentnews-list li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .1s linear
}
.recentnews-list li .info {
	flex: 1;
	padding-left: 15px
}
.recentnews-list li .info .title {
	font-weight: var(--fontbold5);
	line-height: 1.4
}
.recentnews-list li .info .date {
	color: #999;
	margin-top: 5px;
	font-size: var(--fontsize14)
}
.recentnews-list li .info .date em {
	margin-right: 5px
}
.recentnews-list li:hover .img img {
	transform: scale(1.05)
}
.recentnews-list li:hover .info .title {
	color: var(--color)
}
.newscontent-title {
	font-size: var(--fontsize26);
	font-weight: var(--fontbold6)
}
.newscontent-details {
	margin-bottom: 20px
}
.newscontent-details article {
	margin-bottom: 30px
}
.newscontent-date {
	color: var(--introcolor);
	display: flex;
	flex-wrap: wrap;
	margin: 5px 0px 20px
}
.newscontent-date p {
	margin-right: 15px
}
.newscontent-date p:last-child {
	margin-right: 0px
}
.newscontent-date em {
	color: var(--color);
	margin-right: 4px
}
.newscontent-date .newsendinquiry {
	cursor: pointer
}
.pagelink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 50px
}
.pagelink .pagelink-item {
	width: 49%;
	display: flex;
	align-items: flex-start;
	flex-direction: column
}
.pagelink .pagelink-item a:hover {
	color: var(--color)
}
.pagelink .pagelink-item .flex {
	display: inline-flex;
	align-items: center;
	width: 100%;
	height: 50px;
	background: #FFFFFF;
	border: 1px solid var(--color);
	overflow: hidden;
	border-radius: var(--borderradius)
}
.pagelink .pagelink-item .flex em {
	width: 50px;
	height: 100%;
	background: var(--color);
	border: 1px solid var(--color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-weight: var(--fontbold6)
}
.pagelink .pagelink-item .flex span {
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	padding: 0px 10px;
	transition: all 0.1s linear
}
.pagelink .pagelink-item.next {
	align-items: flex-end
}
.pagelink .pagelink-item.next span {
	text-align: right
}
.project-wrap {
	display: flex;
	flex-wrap: wrap;
	list-style: none
}
.project-wrap li {
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
	border-radius: var(--borderradius)
}
.project-wrap li:hover .project-info {
	transform: translateY(0);
	opacity: 1;
	visibility: initial
}
.project-wrap li .project-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.project-wrap li .project-info {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 20px 26px;
	transition: all .2s linear;
	background: rgba(0,0,0,.6);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden
}
.project-wrap li .project-info a {
	display: flex;
	height: 100%;
	width: 100%;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--color);
	color: #F3F3F3;
	border-radius: var(--borderradius)
}
.project-wrap li .project-info a .project-name {
	font-size: var(--fontsize22);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 15px;
	line-height: 1.2
}
.project-wrap li .project-info a .project-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden
}
.project-wrap li:nth-child(3n) {
	margin-right: 0px
}
.faqs-list {
	list-style: none
}
.faqs-list li {
	width: 100%
}
.faqs-list .project-info {
	margin-bottom: 1em
}
.faqs-list .project-info.open .project-name em {
	transform: rotateX(180deg)
}
.faqs-list .project-info .project-name {
	width: calc(100% - 50px);
	background: #F7F7F7;
	min-height: 52px;
	border-radius: var(--borderradius);
	position: relative;
	margin-right: 0px;
	margin-left: auto;
	display: flex;
	align-items: center;
	padding: 10px 15px;
	cursor: pointer
}
.faqs-list .project-info .project-name em {
	transition: all .1s linear;
	position: absolute;
	right: 25px;
	top: 14px;
	color: var(--fontcolor);
	font-weight: var(--fontbold6)
}
.faqs-list .project-info .project-name::before {
	position: absolute;
	left: -50px;
	top: 8px;
	content: "Q";
	width: 30px;
	height: 30px;
	background: #acacac;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF
}
.faqs-list .project-info .project-name::after {
	content: "";
	position: absolute;
	left: -18px;
	top: 10px;
	width: 0px;
	height: 0px;
	border: 10px solid transparent;
	border-right: 10px solid #F7F7F7
}
.faqs-list .project-info .project-content {
	display: none;
	border-radius: 5px;
	margin-top: 1em;
	margin-left: 50px;
	margin-right: 40px;
	position: relative;
	padding: 10px 15px;
	z-index: 1
}
.faqs-list .project-info .project-content::after {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: var(--color);
	opacity: .2;
	z-index: -1;
	border-radius: var(--borderradius);
	overflow: hidden
}
.faqs-list .project-info .project-content::before {
	position: absolute;
	right: -40px;
	top: 8px;
	content: "A";
	width: 30px;
	height: 30px;
	background: var(--color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF
}
.download-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.download-list li {
	width: 49%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	box-shadow: 1px 2px 10px rgba(0,0,0,.1);
	transition: all .1s linear;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: var(--borderradius)
}
.download-list li:hover {
	box-shadow: 1px 2px 10px rgba(0,0,0,.2)
}
.download-list li .download-img {
	width: 140px
}
.download-list li .download-img img {
	width: 100%
}
.download-list li .download-info {
	flex: 1;
	padding: 0px 20px
}
.download-list li .download-btn {
	background: var(--color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	border-radius: 4px;
	width: 140px;
	height: 36px;
	transition: all .2s linear;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 10px
}
.download-list li .download-btn:hover {
	box-shadow: 1px 2px 10px var(--color)
}
.pagehistory {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between
}
.pagehistory-left {
	width: 54%;
	position: relative;
	padding: 70px 0px
}
.pagehistory-left::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0px;
	width: 6px;
	height: 100%;
	background: #DCDCDC
}
.pagehistory-right {
	width: 40%
}
.pagehistory-right img {
	width: 100%;
	border-radius: var(--borderradius)
}
#historySwiper {
	position: relative;
	height: 500px;
	overflow: hidden;
	z-index: 9
}
#historySwiper .swiper-slide {
	width: 46%;
	text-align: right;
	z-index: 9;
	position: static;
	transform: none
}
#historySwiper .swiper-slide.swiper-slide-active .round {
	background: var(--color)
}
#historySwiper .swiper-slide.swiper-slide-active .round::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 23px;
	height: 23px;
	border-radius: 50%;
	border: 4px solid var(--color)
}
#historySwiper .swiper-slide.swiper-slide-active .date {
	color: var(--color)
}
#historySwiper .swiper-slide:nth-child(2n+1) {
	margin-left: auto;
	margin-right: 0px;
	text-align: left
}
#historySwiper .swiper-slide .round {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 40px;
	background: #7d7d7d;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	z-index: 9
}
#historySwiper .swiper-slide .round::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	background: #FFFFFF;
	border-radius: 50%
}
#historySwiper .swiper-slide .date {
	color: #333333;
	font-weight: var(--fontbold7);
	font-size: var(--fontsize30);
	line-height: 1
}
#historySwiper .swiper-slide .p1 {
	font-size: var(--fontsize18);
	font-weight: var(--fontbold7);
	color: #333333;
	line-height: 1;
	margin: 10px 0px
}
#historySwiper .swiper-slide .p2 {
	line-height: 1.4
}
.pagehistory-next, .pagehistory-prev {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fontsize22);
	font-weight: var(--fontbold6);
	cursor: pointer;
	bottom: 0px
}
.pagehistory-prev {
	transform: translateX(-50%) rotateX(180deg);
	bottom: auto;
	top: 0px
}
.inquiry-prolist {
	margin: 20px 0px
}
.inquiry-prolist .inquiry-pro-item {
	display: flex;
	align-items: center;
	box-shadow: 1px 2px 10px rgba(0,0,0,.1);
	padding: 20px
}
.inquiry-prolist .inquiry-pro-item:nth-child(n+2) {
	margin-top: 20px
}
.inquiry-prolist .inquiry-pro-item .pro-item-img {
	width: 100px
}
.inquiry-prolist .inquiry-pro-item .pro-item-img img {
	border: 1px solid #EEEEEE
}
.inquiry-prolist .inquiry-pro-item .pro-item-name {
	flex: 1;
	padding: 0px 10px;
	color: #666666
}
.inquiry-prolist .inquiry-pro-item .pro-item-name a {
	color: var(--color);
	font-size: var(--fontsize18)
}
.inquiry-prolist .inquiry-pro-item .pro-item-del {
	background: var(--color);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	cursor: pointer;
	border-radius: 4px;
	transition: all .2s linear
}
.inquiry-prolist .inquiry-pro-item .pro-item-del:hover {
	box-shadow: 1px 2px 10px var(--color)
}
.page-solutions .title {
	color: #333333;
	font-size: var(--fontsize24);
	margin-bottom: 20px
}
.page-solutions .flex {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between
}
.page-solutions .flex .left {
	width: 40%
}
.page-solutions .flex .left img {
	width: 100%;
	border-radius: var(--borderradius)
}
.page-solutions .flex .right {
	flex: 1;
	padding-left: 3%
}
.page-solutions .flex .right p {
	margin-bottom: 10px
}
.page-solutions .solutions-ul {
	list-style: none;
	margin-top: 20px
}
.page-solutions .solutions-ul li em {
	color: var(--color);
	font-size: var(--fontsize20);
	margin-right: 5px;
	font-weight: var(--fontbold5)
}
.page-solutions .solutions-img {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.page-solutions .solutions-img .img {
	width: 24%;
	margin-bottom: 20px
}
.page-solutions .solutions-img .img img {
	width: 100%;
	border-radius: var(--borderradius)
}
@media (max-width:1440px) {
.prodetails-info {
	padding-left: 20px
}
.thumbnail-show {
	width: 400px;
	height: 400px
}
.thumbnail-box {
	width: 72px;
	margin-right: 10px
}
.thumbnail-box .list {
	height: 324px
}
}
@media (max-width:1366px) {
.pagehistory-left {
	width: 66%
}
.pagehistory-right {
	width: 30%
}
#historySwiper {
	height: 550px
}
.pro-list.list0 li .pro-img {
	width: 40%
}
}
@media (max-width:1280px) {
.sidebar {
	width: 280px
}
.page-main {
	margin-right: 20px
}
.preview-container {
	width: 100%
}
.prodetails-info {
	width: 100%;
	padding-left: 0px;
	padding-top: 30px
}
.thumbnail-box {
	width: 100px
}
.project-wrap li .project-info {
	padding: 15px 20px
}
.project-wrap li .project-info a {
	padding: 15px
}
}
.prodetails-wrap {
	margin-top: 40px
}
.prodetails-img {
	position: relative
}
.prodetails-img img {
	width: 100%
}
.prodetails-img .content {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	font-size: var(--fontsize18)
}
.prodetails-img .content .span1 {
	font-weight: var(--fontblod5);
	margin-bottom: 15px;
	font-size: 42px
}
.prodetails-template-title {
	width: 100%;
	height: 43px;
	margin-bottom: 30px;
	display: flex;
	background-color: #EAEAEA;
	color: #FFFFFF;
	position: relative
}
.prodetails-template-title h5 {
	display: inline-block;
	background: var(--color);
	color: #FFFFFF;
	margin: 0px;
	padding: 0px 30px 0px 20px;
	font-size: var(--fontsize18);
	position: relative;
	text-transform: uppercase;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	height: 54px;
	line-height: 54px
}
.prodetails-template-title h5::after {
	content: "";
	display: block;
	width: 26px;
	height: 104%;
	background-color: #FFFFFF;
	position: absolute;
	right: -15px;
	top: -1px;
	transform: skewX(18deg)
}
.prodetails-list li {
	margin-bottom: 20px
}
.prodetails-list li .li1 {
	color: #0162c9;
	font-weight: var(--fontblod5)
}
.prodetails4 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.prodetails4 .item {
	width: 48%;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 20px
}
.prodetails4 .item img {
	width: 100%
}
.prodetails-flex {
	display: flex;
	align-items: center
}
.prodetails-flex .left {
	width: 45%
}
.prodetails-flex .right {
	flex: 1;
	padding-left: 30px
}
.prodetails-flex .right .title {
	display: flex;
	align-items: center;
	justify-content: space-between
}
.prodetails-flex .right .title .lable {
	font-size: var(--fontsize26);
	font-weight: var(--fontblod5);
	position: relative;
	padding-bottom: 10px
}
.prodetails-flex .right .title .lable::after {
	content: "";
	position: absolute;
	left: 0px;
	bottom: 0px;
	background: var(--color);
	width: 70px;
	height: 3px
}
.prodetails-flex .right .title .more {
	text-transform: uppercase;
	color: var(--color);
	font-weight: var(--fontblod5)
}
.prodetails-flex .right .text {
	margin-top: 20px
}
.prodetails-list3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30px
}
.prodetails-list3 li {
	width: 32%;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px
}
.prodetails-list3 li img {
	width: 100%
}
.prodetails6 {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 10px
}
.prodetails6 .item {
	width: 30%;
	background: #153a6e;
	color: #FFFFFF;
	text-align: center;
	margin-bottom: 50px;
	padding: 20px 20px;
	position: relative
}
.prodetails6 .item:nth-child(2n) {
	background: var(--color)
}
.prodetails6 .item:nth-child(2n) .num {
	border-color: var(--color);
	color: var(--color)
}
.prodetails6 .item .num {
	position: absolute;
	left: -20px;
	top: -20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #153a6e;
	color: #153a6e;
	background: #FFFFFF
}
.prodetails6 .item .title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fontsize18);
	margin-bottom: 15px;
	font-weight: var(--fontblod5)
}
.prodetails6 .item .title img {
	margin-right: 10px;
	width: 25px
}
.prodetails6 .item .text {
	font-size: var(--fontsize14);
	line-height: 1.4
}
.packaging-log .title {
	text-align: center;
	font-size: var(--fontsize30);
	font-weight: var(--fontblod5);
	margin-bottom: 10px
}
.packaging-log .text {
	text-align: center;
	margin-bottom: 30px
}
.packagingul {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.packagingul li {
	width: 31%;
	position: relative;
	overflow: hidden
}
.packagingul li:hover img {
	transform: scale(1.02)
}
.packagingul li img {
	width: 100%;
	transition: all .1s linear
}
.packagingul li .info {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.4);
	color: #FFFFFF
}
.list-paddingleft-2 {
	list-style: none
}
h4.cate-h4, h4.pro-h4 {
	clear: both;
	font-weight: var(--fontbold6)
}
ul.cate-ulli, ul.pro-ulli {
	clear: both;
	padding: 10px 0px 10px 20px
}
ul.cate-ulli li, ul.pro-ulli li {
	list-style-type: disc;
	line-height: 1.7
}
ol.cate-ulli, ol.pro-ulli {
	clear: both;
	padding: 10px 0px 10px 30px
}
ol.cate-ulli li, ol.pro-ulli li {
	list-style-type: decimal;
	line-height: 1.7
}
.prohome-content {
	clear: both;
	margin: 0px auto 20px;
	padding: 0px 70px;
	max-width: 1700px;
	line-height: 1.6;
	box-sizing: border-box
}
.prolist-bottom {
	clear: both;
	margin: 0px auto 30px;
	padding: 0px 70px;
	max-width: 1700px;
	line-height: 1.6;
	box-sizing: border-box
}
.prolist-bottom a {
	text-decoration: underline
}
.prolist-bottom a:hover {
	color: var(--color)
}
@media(max-width:1024px) {
.prohome-content {
	clear: both;
	margin: 0px auto 20px;
	padding: 0px 15px
}
.prolist-bottom {
	clear: both;
	margin: 0px auto 30px;
	padding: 0px 15px
}
}
.prolist-content {
	clear: both;
	margin: 0px auto 15px;
	line-height: 1.6
}
.ck-widget-toc {
	display: table;
	border: 1px solid #A2A9B1;
	background-color: #F8F9FA;
	padding: 10px 20px 10px 10px;
	font-size: 95%;
	margin: 15px 0px;
	min-width: 300px;
	max-width: 100%
}
.ck-widget-toc ol {
	padding: 0px 0px 0px 30px;
	counter-reset: item
}
.ck-widget-toc ol li {
	display: block;
	position: relative;
	list-style: none
}
.ck-widget-toc ol li:before {
	content: counters(item, ".");
	counter-increment: item;
	position: absolute;
	margin-right: 100%;
	right: 10px
}
.ck-widget-toc-title {
	text-align: left;
	font-weight: var(--fontbold7);
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 5px
}
.ck-widget-pt {
	padding-top: 100px;
	margin-top: -100px
}
.ck-widget-toc1 {
	display: table;
	border: 1px solid #A2A9B1;
	background-color: #F8F9FA;
	padding: 10px 20px 10px 10px;
	font-size: 95%;
	margin: 15px 0px;
	min-width: 300px;
	max-width: 100%
}
.ck-widget-toc1 ol {
	padding: 0px 0px 0px 30px;
	counter-reset: item
}
.ck-widget-toc1 ol li {
	display: block;
	position: relative;
	list-style: none
}
.ck-widget-toc1 ol li:before {
	content: counters(item, ".");
	counter-increment: item;
	position: absolute;
	margin-right: 100%;
	right: 10px
}
article.blogcontent {
	clear: both;
	margin: 0px auto 40px;
	padding: 0px
}
article.blogcontent h2 {
	margin: 20px 0px 0px 0px;
	font-size: 24px;
	line-height: 1.3
}
article.blogcontent h3 {
	margin: 20px 0px 0px 0px;
	font-size: 22px;
	line-height: 1.3
}
article.blogcontent h4 {
	margin: 20px 0px 0px 0px;
	font-size: 20px;
	line-height: 1.3
}
article.blogcontent h5 {
	margin: 20px 0px 0px 0px;
	font-size: 18px;
	line-height: 1.3
}
article.blogcontent img {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	max-width: 49%;
	margin-right: 1%;
	border: solid 1px #EEEEEE;
	vertical-align: top
}
article.blogcontent p {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	line-height: 1.6
}
article.blogcontent p a {
	color: var(--color)
}
article.blogcontent p a:hover {
	text-decoration: underline
}
article.blogcontent ul {
	margin: 0px;
	padding: 5px 0px 0px 20px
}
article.blogcontent ul li {
	margin: 0px 0px 5px 0px;
	list-style-type: disc
}
.newscontent-details ul {
	margin: 0px;
	padding: 5px 0px 0px 20px
}
.newscontent-details ul li {
	margin: 0px 0px 5px 0px;
	list-style-type: disc
}
/*faq*/
.wmkc-black {
	color: var(--fontcolor)!important
}
.wmkc-border-black {
	border-color: var(--fontcolor)!important
}
.wmkc-green {
	color: #2cb740!important
}
.wmkc-border-green {
	border-color: #2cb740!important
}
.wmkc-blue {
	color: #217fe1!important
}
.wmkc-border-blue {
	border-color: #217fe1!important
}
.wmkc-yellow {
	color: #fcb026!important
}
.wmkc-border-yellow {
	border-color: #fcb026!important
}
.wmkc-red {
	color: #ee2c2d!important
}
.wmkc-border-red {
	border-color: #ee2c2d!important
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item {
	border: 1px solid #DDD;
	padding: 10px;
	box-sizing: border-box;
	margin: 10px auto;
	position: relative
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-tit>p {
	padding-right: 40px;
	margin: 0px;
	line-height: 1.6;
	font-weight: var(--fontbold7);
	font-size: var(--fontsize16);
	cursor: pointer;
	position: relative
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-tit>p::after, .wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-tit>p::before {
	content: "";
	width: 16px;
	height: 2px;
	background-color: var(--fontcolor);
	position: absolute;
	top: 14px;
	right: 12px
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-tit>p::after {
	transform: rotate(90deg)
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-tit.active>p::after {
	opacity: 0
}
.wmkc-template-55>.wmkc-faq-list>.wmkc-faq-item>.wmkc-faq-box {
	color: var(--introcolor);
	line-height: 1.5;
	padding-top: 6px
}
.mediaplay {
	text-align: center;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	color: #FFFFFF;
	text-align: center;
	position: relative;
	transition: .5s;
	cursor: pointer;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
	display: none
}
.mediaplay em {
	font-size: 36px
}
.mediaplay:hover {
	color: var(--color);
	background: rgba(255,255,255,.7)
}
.mediaplay::after {
	content: '';
	display: block;
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: -2px;
	top: -2px;
	border-radius: 50%;
	border: 3px solid;
	opacity: .8;
	border-color: transparent;
	border-right-color: var(--color);
	animation: runDot 2s infinite ease-in-out
}
@keyframes runDot {
0% {
transform:rotate(0)
}
100% {
transform:rotate(359deg)
}
}
#filterlist .filterlist-ul li {
	display: flex;
	align-items: center;
	margin: 10px 0px 20px;
	line-height: 1;
	cursor: pointer;
	user-select: none
}
#filterlist .filterlist-ul li:nth-child(n+21) {
	display: none
}
#filterlist .filterlist-ul li.act {
	color: var(--color)
}
#filterlist .filterlist-ul li.act .input::after {
	transform: translate(-50%, -50%) scale(1)
}
#filterlist .filterlist-ul li .input {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border: 1px solid #666666;
	position: relative
}
#filterlist .filterlist-ul li .input::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 9px;
	height: 9px;
	background: var(--color);
	transition: all .1s linear
}
#filterlist .filterlist-ul li span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden
}
#filterlist .viewmore-filter {
	color: var(--color);
	text-transform: uppercase;
	cursor: pointer
}
#filterlist .viewmore-filter:hover {
	text-decoration: underline
}
.pagesbanner {
	position: relative;
	z-index: 1
}
.pagesbanner>a {
	z-index: 1;
	position: relative;
	display: block
}
.pagesbanner video, .pagesbanner img {
	width: 100%;
	height: auto;
	object-fit: cover
}
.pagesbanner .pagesbanner-animate {
	width: 100%;
	padding: 0px 20px;
	z-index: 1;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #F3F3F3;
	text-align: center;
	margin-top: 20px;
	opacity: 0;
	animation: pagesbanner 1s .5s forwards
}
.pagesbanner .pagesbanner-animate .p1 {
	font-size: var(--fontsize30);
	font-weight: var(--fontbold5, 500);
	line-height: 1.2
}
.pagesbanner .pagesbanner-animate .p2 {
	margin-top: 20px;
	font-size: var(--fontsize18);
	font-weight: var(--fontbold4, 400)
}
@keyframes pagesbanner {
0% {
margin-top:20px;
opacity:0
}
100% {
margin-top:0px;
opacity:1
}
}
@media (max-width:1024px) {
.pagesbanner .pagesbanner-animate {
	top: 50%
}
.pagesbanner .pagesbanner-animate .p1 {
	font-size: var(--fontsize26)
}
.pagesbanner .pagesbanner-animate .p2 {
	margin-top: 10px;
	font-size: var(--fontsize16)
}
}
@media (max-width:768px) {
.pagesbanner .pagesbanner-animate .p1 {
	font-size: var(--fontsize20)
}
.pagesbanner .pagesbanner-animate .p2 {
	font-size: var(--fontsize14)
}
}
.blogflex-info {
	display: flex;
	align-items: flex-start
}
.blogflex-info .img {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	border: 1px solid #EEEEEE;
	overflow: hidden
}
.blogflex-info .img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.blogflex-info .info {
	flex: 1;
	padding-left: 10px
}
.blogflex-info .info-name {
	font-size: 18px;
	font-weight: 700
}
.blogflex-info .info-content {
	line-height: 1.4;
	color: #555555;
	margin-top: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 30;
	overflow: hidden
}
.email-subscription {
	display: flex;
	flex-direction: column;
	width: 100%
}
.email-subscription input {
	width: 100%;
	outline: 0;
	border: 1px solid #CCCCCC;
	height: 40px;
	border-radius: 0;
	padding: 0 10px;
	transition: all .1s linear
}
.email-subscription button {
	margin-top: 10px;
	width: 100%;
	height: 40px;
	background: var(--color);
	color: #FFFFFF;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: all .1s linear
}
.pagination{
	display: flex;
}
.pagination li a{
	display: inline-block;
	margin: 5px 5px;
	padding: 10px 15px;
	text-align:center;
    background: #FFFFFF;
    border: 1px solid #999;
	border-radius: 5px;
}
.pagination li.active a{
	color: var(--color);
    border-color: var(--color);
}

