/* ===== Start of 12.css ===== */
.values-block {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-block: 40px;
  padding-inline: 20px;
  text-align: center;
}

.values-title {
  font-size: 28px;
  font-weight: 700;
  margin-block-end: 10px;
  border-block-end: 2px solid #00a5a5;
  display: inline-block;
  padding-block-end: 4px;
}

.values-subtitle {
  font-size: 16px;
  line-height: 1.6;
  margin-block-start: 12px;
  margin-block-end: 40px;
  color: #444;
  max-inline-size: 800px;
  margin-inline: auto;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  place-items: center;
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  inline-size: 100%;
}

.value-icon {
  font-size: 36px;
  color: #00a5a5;
  margin-block-end: 10px;
}

.value-item h3 {
  font-size: 18px;
  font-weight: 600;
  margin-block-end: 6px;
}

.value-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  padding-inline: 10px;
}

/* 📱 手机自适应 */
@media (max-width: 768px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}
.process-section {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-block: 40px;
  padding-inline: 20px;
  text-align: center;
}

/* Title Styling */
.process-title {
  font-size: 24px;
  font-weight: 700;
  margin-block-end: 20px;
  color: #333;
  border-bottom: 2px solid #00a5a5;
  display: inline-block;
  padding-block-end: 10px;
}

/* Process Grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  place-items: center;
  align-items: start;
}

/* Individual Process Item */
.process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  inline-size: 100%;
}

.process-icon {
  font-size: 40px;
  color: #00a5a5;
  margin-block-end: 10px;
}

.process-item h3 {
  font-size: 18px;
  font-weight: 600;
  margin-block-end: 8px;
}

.process-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  padding-inline: 10px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== End of 12.css ===== */

/* ===== Start of 13.css ===== */
/* 全新独立 CSS，用?Yoga Leggings 部分 */

.yoga-wrapper {
  padding-block-start: 5px;
  container-type: inline-size;
}

.yoga-container {
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
  display: block;
}

.yoga-header {
  margin-block-end: 16px;
  text-align: center;
}

.yoga-title {
  font-size: 28px;
  font-weight: 600;
  color: #222;
  margin-block-end: 6px;
}

.yoga-subtitle {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  max-inline-size: 600px;
  margin-inline: auto;
}

.yoga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding-block-start: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.yoga-grid li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.yoga-grid li:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.yoga-grid .yoga-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  display: block;
}

.yoga-grid .yoga-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yoga-grid .yoga-title-box {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.yoga-grid .yoga-title-box i {
  font-size: 12px;
  color: #00a5a5;
}

/* 移动端微?*/
@media (max-width: 768px) {
  .yoga-title {
    font-size: 22px;
  }

  .yoga-subtitle {
    font-size: 14px;
  }
}


/* ===== End of 13.css ===== */

/* ===== Start of style.css ===== */
@charset "utf-8";
/* CSS Document */
html{ background-color: #E5E5E5;}
body {
	margin:0;
	padding:0;
	font-family:"Merriweather","Lato","Open Sans","Roboto","Poppins","Oswald","Noto Sans","Montserrat",arial,sans-serif;
	font-size:14px;
	line-height:1.5;
	color:#111111;
	max-width:1920px;
	width: 100%;
	margin:0px auto;
	background-color:#fff;
	overflow-x: hidden;
}
a {
	color:#111111;
	text-decoration:none;
}
a:hover {
	color:#111111;
}
img {
	border:0;
	display:inline;
	vertical-align: bottom;
	width:auto;
	height:auto;
	max-width:100%;
}
div, ul, li, dl, dd, span, h1, h2, p, h4, h3 {
	margin:0;
	padding:0;
	list-style:none;
}
.clear {
	clear:both; width:0px; height:0px;
}
.container {
	max-width:1600px;
	padding: 0px 70px;
	margin:0px auto;
}

* {
	box-sizing: border-box;
}

input{
	outline:none;
	width:100%;
}

.main{ overflow:hidden;}
.tpleft{ float:left;}
.tpright{ float:right;}
.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-center-y {
	display: flex;
	align-items: center;
}
.flex-center{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex-column {
	display: flex;
	flex-direction: column;
  }
  :root{
	--linkColor:#58bac5;
   }

.dance{ padding: 4% 0px;}

.ellipsis{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;-webkit-text-overflow:ellipsis;}
.molEllipsis{ display:-webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:1;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;}

   
/* 首页 */
.head-top{ background-color: #1a1414; color: #fff; position:relative; z-index:10000; }
.head-top .head_l ul li{ color: #fff; margin-right: 20px;}
.head-top .container{ height: 50px;}
.head-top .head_l ul li a{ color: #fff;}
.head-top .head_l ul li .iconfont{ margin-right: 5px;}
.head-top .head_l ul li:hover,.head-top .head_l ul li:hover a{ color: var(--linkColor);}
.head-top .head_r .share ul li a{ color: #fff;width: 30px;
    height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;transition: all .1s linear;}
.head-top .head_r .share ul li{ margin-right: 10px;}
.head-top .head_r .share ul li a.fb:hover{ background-color: #3B5998;}
.head-top .head_r .share ul li a:hover{transform:scale(1.02)}
.head-top .head_r .share ul li a.tw:hover{background:#55ACEE}
.head-top .head_r .share ul li a.ins:hover{background:#DE5DCA}
.head-top .head_r .share ul li a.vk:hover{background:#0077FF}
.head-top .head_r .share ul li a.lk:hover{background:#007AB6}
.head-top .head_r .share ul li a.you:hover{background:#FF0000}
.head-top .head_r .share ul li a.pi:hover{background:#DF4B38}
.head-top .head_r .share ul li a.tik:hover{background:#333333}
.head-top .head_r .langer{ position: relative; cursor: pointer;}
.head-top .head_r .langer .img1{ width: 20px; height: auto;}
.head-top .head_r .langer .langcont{    position: absolute;
    top: calc(100% + 26px);
    right: 50%;
    transform: translateX(20%);
    background: #FFFFFF;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, .1);
    z-index: 999999;
    visibility: hidden;
    opacity: 1;
    transition: opacity .3s, top .3s; width: 340px;  padding: 8px; z-index: 30;}
.head-top .head_r .langer:hover .langcont{visibility: visible;
		opacity: 1;
		top: calc(100% + 15px);}
.head-top .head_r .langer .langcont ul{ display: flex;
			flex-wrap: wrap;}
.head-top .head_r .langer .langcont ul li{ width: 33.3%;}
.head-top .head_r .langer .langcont ul li a{ padding: 10px 12px; font-size: 12px;display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;-webkit-text-overflow:ellipsis; display: flex; align-items: center;
    }
.head-top .head_r .langer .langcont ul li a img{width: 24px; margin-right: 4px;}
.head-top .head_r .langer .langcont ul li.active,.head-top .head_r .langer .langcont ul li:hover{background-color: #EEEEEE;}
.head-top .head_r .langer .langcont::before{ content: ""; position: absolute;    display: block;
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-top: 1px solid #EBEEF5;
    border-left: 1px solid #EBEEF5;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    top: -6px;left: 80%;}
.langer::after{ content: ""; position: absolute; height: 20px; width: 100%; top: 100%; left: 0px;}
.header{ background-color: #fff;position: sticky; left:0px; top: 0px; z-index: 9999;box-shadow: 0px 0px 8px rgb(0 0 0 / 8%);}
.header .container{ height: 66px;}
.header .logo img{    width: auto; min-width:140px; object-fit:contain;
    max-height: 56px;}
.header .logo .img2{ display: none;}
.header .menu{ flex:1; margin: 0px 10px;}
.header .menu ul li{ position: relative;}
.header .menu ul li a{ font-size: 15px; display: flex;height: 66px;white-space: nowrap;transition: all .3s ease;-webkit-transition: all .3s ease; align-items: center; justify-content: center; padding: 0px 7px;}
.header .menu ul li a i{ font-size: 14px; margin-left: 5px;}
.header .menu ul li a:hover{ color: var(--linkColor);}
.header .menu ul li.active .title{ color: var(--linkColor);}
.header .menu ul li .title:before{content: "";
    width: 0px;
    height: 12px;
    background: var(--linkColor);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    transition: all .2s linear;}
    .header .menu ul li.active .title:before,.header .menu ul li:hover .title:before{ width: 3px;}

.header .menu ul li .submenu {
	background-color:rgba(255,255,255,1);
	width: 200px;
	position: absolute;
	top: 100%;
	padding: 0px;
	z-index: 20;
	transform-origin: 50% 0;
	transform: scaleY(0) translateZ(0);
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
	overflow: hidden; left: 0px;
	box-shadow: 1px 2px 10px rgba(0, 0, 0, .1); max-height: 80vh;
}

.header .menu ul li .submenu::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	background: #eee;
	border-radius: 5px;
}

.header .menu ul li .submenu::-webkit-scrollbar-thumb {
	background: #fff;
	scrollbar-arrow-color: #fff;
	border-radius: 5px;
}


.header .menu ul li:hover .submenu {
	transform: scaleY(1) translateZ(0);
	opacity: 1;
}

.header .menu ul li .submenu dd {
	border-bottom: 0.5px rgba(0,0,0,0.1) solid;
}

.header .menu ul li .submenu dd:last-child {
	border-bottom: 0px;
}

.header .menu ul li .submenu dd a {
	color: #111111;
	text-align: left;
	text-transform: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	font-weight: normal;
	height: auto;
	width: 100%; font-size: 14px;
	padding: 0px 10px;
    height: 45px;
    line-height: 45px;
}

.header .menu ul li .submenu dd a:hover {
	color: var(--linkColor);
}
.header .search_1{ cursor: pointer; position: relative; height: 66px; display: flex; align-items: center; justify-content: center;}
.header .search_1 .icon-search{ color: var(--linkColor); font-size: 28px; font-weight: 500;}
.header .search_1 .sear_cont{ background-color: #fff; z-index: 20;position: absolute;
    top: 100%;
    right: 0px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center; width: 240px; height: 40px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); display:none;}
.header .search_1 .sear_cont.show{ display:flex;}
.header .search_1 .sear_cont .formbit{ flex:1;
    height: 40px; font-size: 18px;
    padding-left: 10px; border: 0px; line-height: normal; outline: none;}
.header .search_1 .sear_cont .sumbit{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; background-color: #f0f0f0; border: 0px; outline: none;}

.banner{ position: relative;}
.banner ul li img{ width: 100%; height: auto;}
.banner ul li{ position: relative; text-align: center;}
.banner ul li .content{ color: #000000; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);font-size: 28.9px;
    font-weight: bold;
    padding: 0;
    max-width: 90%;
    width: 80%;}
.banner ul li .content .lab{    line-height: 1;}
.banner ul li .content .title{  font-size: 81px;
    line-height: 1.1;
    text-transform: uppercase;}
.banner ul li .content .eng{  line-height: 1;
    text-transform: capitalize;}
.banner ul li .bannertxt2{ top: 24%;}
.banner ul li .bannertxt2 .lab{ font-size: 59.5px; text-transform: uppercase; line-height: 1;}
.banner ul li .bannertxt2 .title{ line-height: 1;
    text-transform: capitalize; font-size: 17px;}
.banner .s_btn{ position: absolute; bottom: 8% !important; z-index: 20; width: 100%;}
.banner .s_btn span{ width: 12px; height: 12px; background-color: rgba(255,255,255,0.5);  border-radius: 50%; margin: 0px 5px; cursor: pointer; opacity:1;}
.banner .s_btn span.active{border: 2px rgba(255,255,255,1) solid;}
.banner .btn{position: absolute;
    top: 45%;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 0 0;
    border: 2px solid rgba(231, 231, 231, .5);
    color: #fff;
    z-index: 9;
    cursor: pointer;
    transition: all .15s linear;
    border-radius: 30px; font-size: 24px;}
.banner .btn:hover{background: rgba(255, 255, 255, .6); color: #111;}
.banner .prev{ left: 70px;}
.banner .next{ right: 70px;}
.banner .iconfont{ font-size: 24px;}
.index_bt{ text-align: center; margin-bottom: 3%;}
.index_bt .title{ font-size: 30px; line-height: 1.4; text-transform: capitalize; margin-bottom: 10px;}
.index_bt .eng{ font-size: 18px; margin-bottom: 10px;}
.index_product ul{display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 36px 22px;
align-items: stretch;}
.index_product ul li a{ display: block;}
.index_product ul li a .photo{position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #EEEEEE;
    border: 1px solid #EEEEEE; overflow: hidden;
    aspect-ratio: 25 / 16;}
.index_product ul li a .photo img{    width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all .1s linear;}
.index_product ul li a:hover .photo img{    transform: scale(1.02);}
.index_product ul li a .photo:before{content: "";
    transition: all .1s linear;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%; z-index: 10;
    background: rgba(0, 0, 0, .4);
    opacity: 0;}
.index_product ul li a:hover .photo:before{opacity: 1;}
.index_product ul li a .title .box{ font-size: 18px;    text-transform: capitalize;
    transition: color .1s linear;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;}
.index_product ul li a .title .box .iconfont{opacity: 0;
		display: inline-block;
		width: 0px;
		transition: all .1s linear;}
.index_product ul li a:hover .title .box .iconfont{margin-left: 15px;
    opacity: 1;
    width: 20px;}
.index_product ul li a:hover .title .box{color: var(--linkColor);
		border-color: #000000;}
.index_product ul li a .title { margin-top: 10px; padding: 4px 0px;}
.index_sample ul{ display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap;}
.index_sample ul li{ width: 50%; position: relative;}
.index_sample ul li img{width: 100%;
    height: 100%;
    object-fit: cover;}
.index_sample ul li .box{ position: absolute;transform: translate(-50%,-50%); left: 50%; top: 50%; color: #fff; text-align: center; width: 100%;}
.index_sample ul li .box .title{font-size: 36px;
    margin-bottom: 30px;
    line-height: 1.2; font-weight: 500;}
.index_sample ul li .box .more{width: 170px;
    padding: 0px 20px; margin: 0px auto;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 30px;
    color:#fff;
    font-weight: 500;
    text-transform: uppercase;    background: rgba(0, 0, 0, 0.5);transition: all .1s linear;}
.index_sample ul li .box .more:hover{    border-color: var(--linkColor);
    color:var(--linkColor);}
	.part_2 .index_bt { margin-bottom: 2%;}
.part_2 .index_bt .title{ margin-bottom: 0px;}
.index_why .box{ width: 31%; font-size: 18px; color: #555;}
.index_why .photo{ width: 35%;}
.index_why .box .items{ margin-bottom: 20px;}
.index_why .box .items .title { margin-bottom: 15px;}
.index_why .box .items .title img{ width: 30px; margin-right: 15px;}
.index_why .box .items .desc{ line-height: 1.8;}
.index_why .box .items:last-child{ margin-bottom: 0px;}
.part_3 .index_bt{ margin-bottom: 0px;}

.part_4{ background-image: url(../images/bg2.jpg); background-repeat: no-repeat;background-size: cover; position: relative;}
.part_4:before{content: '';
    background: rgba(255, 255, 255, .65);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;}
.about_title{    color: var(--linkColor);
    font-size: 22px;
    font-weight: 700;
    position: relative;
    display: inline-block;
    margin: 0px auto 50px;}
.about_title:before{content: '';
    width: 35%;
    height: 2px;
    background: #0a0a0a;
    display: block;
    position: absolute;
    top: 50%;
    left: -40%;
    margin: 0 auto;}
.about_title:after{content: '';
	content: '';
    width: 35%;
    height: 2px;
    background: #0a0a0a;
    display: block;
    position: absolute;
    top: 50%;
    right: -40%;
    margin: 0 auto;}
.part_4 .container{ position: relative; z-index: 30;}
.part_4{ text-align: center;}
.part_4 .desc{    font-size: 20px;
    max-width: 1000px;
    margin: 0px auto;
    text-align: center;
    line-height: 2.5;}
.part_4 .lab{ color: var(--linkColor);
    font-style: italic;
    font-size: 36px;
    margin: 20px 0; line-height: 1.8;
    font-weight: 700;}
.part_4 .more{display: inline-block;
    color: #FFF;
    font-weight: 700;
    font-size: 20px;
    background:var(--linkColor);
    padding: 0px 30px; height: 56px; line-height: 56px;
    transition: all .3s;
    text-transform: uppercase;}
.part_5{ position: relative;}
.part_5 .pic{ width: 40%; position: absolute; right: 0px; top: 0px;}
.part_5 .pic img{ width: 100%;}
.index_fac .title{text-transform: capitalize; font-size: 30px; font-weight: 500; line-height: 1.4; margin-bottom: 10px;}
.index_fac .desc{ font-size: 18px; width: 55%; line-height: 1.8; margin-bottom: 10px;}
.part_5 .container{ padding-top: 4%; padding-bottom: 4%;}
.index_fac .more{   width: 170px;
    padding: 0px 20px;
    height: 50px;
    border: 1px solid #111;
    border-radius:30px;
    color: #111;
    font-weight:500;
    text-transform: uppercase;
    transition: all .1s linear;}
.index_fac .more .iconfont{ margin-left: 10px;}
.index_fac .more:hover{ color: var(--linkColor);border-color: var(--linkColor);}
.fav_list{ width: 80%; position: relative; z-index: 50; margin-top: 40px;}
.fav_list:after{content:"\200B";display:block; height:0px; overflow:hidden;clear:both;}
.fav_list ul li{ width: 30%; margin-right: 3.5%; float: left; overflow: hidden;}
.fav_list ul li img{ width: 100%;object-fit: cover;
	object-position: center center;transition:all .5s;-webkit-transition:all .5s;}
.fav_list ul li:hover img{transform:scale(1.05);-webkit-transform:scale(1.05);}
.fav_list ul li:last-child{ margin-right: 0px;}
.index_bt .infor{ color: var(--linkColor); text-transform: uppercase;
    margin-bottom: 10px; font-size: 18px; line-height: 1.8;}
.part_6{ padding-top: 1%; padding-bottom: 4%;}
.swiper1 .swiper-pagination,
.index_new .swiper-pagination{ position:static; margin-top:20px;}
.swiper1 .swiper-pagination .swiper-pagination-bullet,
.index_new .swiper-pagination .swiper-pagination-bullet{width:10px; height:10px;}
.swiper1 .swiper-pagination .swiper-pagination-bullet.active,
.index_new .swiper-pagination .swiper-pagination-bullet.active{ background-color:#58bac5;opacity:1;}
.index_new ul{}
.index_new ul li{ overflow: hidden; margin-right:2%;}
.index_new ul li a{ display: block;}
.index_new ul li a .photo{ overflow: hidden; margin-bottom: 20px; position: relative; padding-top: 93.7%;}
.index_new ul li a .photo img{ position: absolute; width: 100%;
    height: 100%;
    object-fit: cover;
 object-position: center center;transition:all .5s;-webkit-transition:all .5s; left: 0px; top: 0px; }
 .index_new ul li a:hover .photo img{transform:scale(1.05);-webkit-transform:scale(1.05);}
 .index_new ul li a .date{ color: var(--linkColor); font-size: 18px;}
 .index_new ul li a .title{ font-size: 18px; margin: 10px 0px;display:-webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis; line-height: 1.4;}
 .index_new ul li a .desc{ color: #555; margin-bottom: 15px;display:-webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;}
 .index_new ul li a .more{ text-transform: uppercase; padding-bottom: 10px; transition: all .1s linear; color: #555; position: relative; display: inline-block;}
 .index_new ul li a .more .iconfont{ margin-left: 10px;}
 .index_new ul li a .more:before{
	content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 70px;
    height: 1px;
    background: #000000;
    transition: all .1s linear;
 }
 .index_new ul li:hover a .more:before{ width: 100%;}
 .index_new ul li:hover .title{ color: var(--linkColor);}
 .index_new ul li:hover .more{ color: var(--linkColor);}
 .index_adv{background-image: url(../images/2024103104354717871.jpg); background-size: cover; background-repeat: no-repeat; padding: 3% 0px;text-align: center;}
 .index_adv .eng{text-transform: uppercase;
    margin-bottom: 10px; color: var(--linkColor); font-size: 18px;}
.index_adv .title{ font-size: 26px; margin-bottom: 20px; color: #fff;}
.index_adv .more{min-width: 200px; background-color: var(--linkColor); color: #fff;text-transform: uppercase; height: 50px; line-height: 50px; padding: 0px 20px; border-radius: 30px; display: inline-block;}
footer .foot_1{ padding: 3% 0px;background-image: url(../images/footer.webp); background-size: cover; background-repeat: no-repeat; color: #222; background-color: #eef8f9;}
footer .foot_1 .container{ align-items: flex-start;}
footer .foot_1 .tpleft{ width: 24%;}
footer .foot_1 .dbmenu{ flex:1; margin-left: 7%; align-items: flex-start;}
footer .foot_1 .dbmenu .items{ width: 32%;}
footer .foot_1 .dbmenu .items .title{ font-size: 22px; font-weight: 700; margin-bottom: 15px; line-height: 1.8;}
footer .foot_1 .tpleft .dblogo img{ height: 60px;}
footer .foot_1 .tpleft .desc{ margin: 20px 0px; line-height: 1.8;}
footer .foot_1 .tpleft .link ul{ flex-wrap: wrap; gap: 10px;}
footer .foot_1 .tpleft .link ul li{ width: 30px;}
footer .foot_1 .tpleft .link ul li a img{transition: all .1s linear;}
footer .foot_1 .tpleft .link ul li a:hover img{ transform: scale(1.02);}
footer .foot_1 .dbmenu .items .submenu a{    position: relative;
    padding: 4px 0px;
    padding-left: 15px;
    display: inline-block; line-height: 1.7;}
footer .foot_1 .dbmenu .items .submenu a:before{content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    width: 5px;
    height: 5px;
    background:#222;
    border-radius: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
footer .foot_1 .dbmenu .items .submenu a:hover{ color: #555;text-decoration: underline;}
footer .foot_1 .dbmenu .items .list ul li{ display: flex; align-items: baseline; line-height: 1.8; margin-bottom: 10px;}
footer .foot_1 .dbmenu .items .list ul li .cont{ flex:1;}
footer .foot_1 .dbmenu .items .list ul li .iconfont{ font-size: 22px; margin-right: 5px; color: #555; display: flex; align-items: center;justify-content: center;}
footer .foot_1 .dbmenu .items .list ul li a:hover{color: #555;text-decoration: underline;}
.copyright{ text-align: center; background-color: #F1EDE8; padding: 16px 0px;}
.gotop{cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1);
    transition: all .4s ease; position: fixed; right: 35px; bottom: 10%; z-index: 10000;}
.gotop:hover{ background-color: #c1c1c1;}
.gotop .iconfont{ transform: rotate(180deg); font-weight: 600; position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);}
.gotop.scroll-top{ display: none;}
.online{ position: fixed;right: 5px; z-index: 99999; top: 50%;transform:translateY(-50%);-webkit-transform:translateY(-50%); width: 40px;}
.online ul li{border-bottom: 1px solid #eee; height: 43px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.online ul li.no1{ background-color: #25d366;}
.online ul li.no2{ background-color: #0091df;}
.online ul li.no3{ background-color: #ff9900;}
.online ul li.no4{ background-color: #00ce12;}
.online ul li:hover{ background-color: #fafafa;}
.online ul li:last-child{ border-bottom: 0px; border-radius: 0px 0px 4px 4px;}
.online ul li:nth-child(1){ border-radius: 4px 4px 0px 0px;}
.online ul li a{ padding: 4px;}
.online ul li a i{ width: 32px; height: 32px; background-image: url(../images/wmkc-ico24.webp);  background-repeat: no-repeat; display: block;}
.online ul li a .wmkc-icon{background-position: -94px -94px;}
.online ul li a .wmkc-icon1{background-position: -94px -6px;}
.online ul li a:hover .wmkc-icon1{background-position: -94px -50px;}
.online ul li a .wmkc-icon2{background-position: -6px -6px;}
.online ul li a .wmkc-icon3{background-position: -138px -50px;}
.online ul li a:hover .wmkc-icon{background-position: -138px -6px;}
.online ul li a:hover .wmkc-icon2{background-position: -50px -6px;}
.online ul li a:hover .wmkc-icon3{background-position: -138px -94px;}

/*移动菜单*/
.menubtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: 40px;
	right: 0px;
	z-index: 100;
	display: none;
	position: relative;
	margin-left: 10px;

}

.menubtn .name {
	font-size: 16px;
	left: -60px;
	font-weight: 500;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	position: absolute;
	font-weight: 600;
}

.menubtn .navbar-icons {
	height: 20px;
	width: 100%;
	position: relative;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: .5s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
}

.menubtn .navbar-icons span {
	display: block;
	height: 2px;
	width: 100%;
	opacity: 1;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: .25s ease-in-out;
	top: 0;
	-webkit-transform-origin: left center;
	transform-origin: left center;
	background-color: #fff;
	position: relative;
	border-radius: 5px;
}

.menubtn .navbar-icons span:first-child {
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.menubtn .navbar-icons span:nth-child(2) {
	-webkit-transform-origin: left center;
	transform-origin: left center;
	width: 70%;
}

.menubtn .navbar-icons span:nth-child(3) {
	-webkit-transform-origin: left center;
	transform-origin: left center;
}

.menubtn.open .navbar-icons span:first-child {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 1px;
}

.menubtn.open .navbar-icons span:nth-child(2) {
	opacity: 0;
}

.menubtn.open .navbar-icons span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 1px;
}

.menu-mc {
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 500;
	transition: all .5s;
	-webkit-transition: all .5s;
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	padding-top: 75px;
	display: flex;
	flex-direction: column;
	display: none;

}

.menu-mc.active {
	transform: translateY(0);
	-webkit-transform: translateY(0);
}

.menu-mc .list {
	flex: 1;
	overflow: auto;
}

.menu-mc .list ul {
	padding: 0 0px;
}

.menu-mc .list ul li {
	line-height: 50px;
}

.menu-mc .list ul li .submenu {
	display: none;
}

.menu-mc .list ul li .title {
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	color: #343434;
	padding: 0px 15px; 
}

.menu-mc .list ul li .title .icon{
	width: 15px; height: 15px;  background-image: url(../images/icon_21.png);
	background-repeat: no-repeat; background-size: cover; background-position: center;
	margin-right: 5px;transform: rotate(
		180deg);
		-webkit-transform: rotate(180deg); display: inline-block;
}
.menu-mc .list ul li .title .txt{ display: flex; align-items: center; font-size: 16px;}
.menu-mc .list ul li .title .txt img{ width: 25px; height: auto; margin-right: 10px;}
.menu-mc .list ul li a {
	display: block;
	font-size: 15px;
	color: #333;
}
.menu-mc .list ul li .submenu{ padding-top: 7px; padding-bottom: 7px;}
.menu-mc .list ul li .submenu a {
	padding-left: 20px;
	line-height: 35px;
}

.menu-mc .list ul li .submenu a:hover {

	font-weight: 600;
}
.menu-mc .list ul li .submenu dd .lab a{ color: #004283; font-weight: 600;}
.menu-mc .search_2{ padding: 0px 15px;}
.menu-mc .search_2 .sear_cont{ background-color: #fff; 
    background: #FFFFFF;
    display: flex;
    align-items: center; height: 40px;
    }
.menu-mc .search_2 .sear_cont .formbit{ flex:1;
    height: 40px; font-size: 14px;
    padding-left: 10px; border: 0px; line-height: normal; outline: none; border: 1px #EEEEEE solid;}
.menu-mc .search_2 .sear_cont .sumbit{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; background-color: #f0f0f0; border: 0px; outline: none; color: var(--linkColor); }
.menu-mc .search_2 .sear_cont .sumbit .iconfont{font-size: 20px; font-weight: 600;}
.foot_menu{ background-color: #fff;position: sticky;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 50;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .2); background: #FBFBFB; display: none;}
 .foot_menu ul li{ flex:1; height: 55px;  display: flex; align-items: center; justify-content: center;}
 .foot_menu ul li a{ display: flex; flex-direction: column; justify-content: center; text-align: center; width: 100%; height: 100%; line-height: 1;}
 .foot_menu ul li a p{ padding-top: 2px; font-size: 12px;}
 .foot_menu ul li a .iconfont{ font-size: 20px;}
 .foot_menu ul li .icon-arrow-down{background:var(--linkColor);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #FFFFFF;transform: rotate(180deg); font-weight: 600;}

@media (max-width:1540px){
	.header .menu ul li a{ font-size: 14px; }
	
}
@media (max-width:1024px){
	.container{ padding: 0px 15px;}
    .head-top{ display: none;}
    .header .menu{ display: none;}
    .header .search_1{ display: none;}
    .header{background-color: #1a1414;}
    .header .logo .img2{ display: block;}
    .header .logo .img1{ display: none;}
    .header .logo img{ height: 50px;}
    .header .container{ height: 60px;}
    .menubtn,.menu-mc {
		display: flex;
	}
    .online{display: none;}
    .index_sample ul li .box .title{ font-size: 26px;}
    .index_sample ul li .box .more{ height: 45px; width: 160px;}
    .index_why { flex-direction: column;}
    .index_why .box{ width: 100%;}
    .index_why .photo{ width: 100%;  margin: 20px 0px;}
    .gotop.scroll-top{ display: none !important;}
    .foot_menu{ display: block; }
}
@media (max-width:767px){
    .banner .btn{ display: none;}
    .banner ul li .content{ font-size: 12px;}
    .banner ul li .content .title{ font-size: 27px;  margin: 3px 0px;}
    .banner ul li .bannertxt2 .lab{  font-size: 25px;}
    .banner ul li .bannertxt2 .title{ font-size: 12px;}
    .banner ul li .bannertxt2{ top: 22%;}
    .banner .s_btn{ bottom: 6% !important;}
    .dance{ padding: 30px 0px;}
    .index_bt .title{ font-size: 22px;}
    .index_bt .eng{ font-size: 14px; color: #555;}
    .index_product ul{    grid-template-columns: repeat(2, 1fr);
        grid-gap: 16px 12px;}
    .index_product ul li a .title .box{ font-size: 16px;}
    .index_product ul li a .title{ margin-top: 0px;}
    .index_sample ul li{ width: 100%;}
    .index_sample ul li .box .title{ font-size: 22px; margin-bottom: 10px;}
    .about_title{ font-size: 18px; margin-bottom: 10px;}
    .about_title:before{ width: 10%;
            left: -14%;}
    .about_title::after{ width: 10%;
                right: -14%;}
     .part_4 .desc{ font-size: 13px; line-height: 1.8;}
     .part_4 .lab{ font-size: 20px; margin: 5px 0px;}
     .part_4 .more{ font-size: 14px; padding: 5px 15px; height: auto; line-height: 2;}
     .part_5 .pic{ position: static; width: 100%;}
     .index_fac .desc{ width: 100%; font-size: 14px;}
     .index_fac .title{ font-size: 22px;}
     .index_fac .more{  height: 45px;}
     .fav_list{ width: 100%; margin-top: 20px; padding-bottom: 20px;}
     .index_new ul{    grid-template-columns: repeat(1, 1fr);grid-gap: 25px 0px;}
     .part_6{ padding: 10px 0px;}
     .index_adv .title{ font-size: 20px;}
     .index_adv{ padding: 30px 0px;}
     .index_adv .more{ height: 45px; line-height: 45px;}
     footer .foot_1{ padding: 30px 0px;} 
     footer .foot_1 .container{ flex-direction: column;} 
     footer .foot_1 .tpleft{ width: 100%; margin-bottom: 24px;}    
     footer .foot_1 .dbmenu{ flex: none; width: 100%; margin-left: 0px; flex-direction: column;}
     footer .foot_1 .dbmenu .items{ width: 100%; margin-bottom: 20px;}
     footer .foot_1 .dbmenu .items .title{ margin-bottom: 0px;}
     footer .foot_1 .dbmenu .items .submenu ul{ display: flex; flex-wrap: wrap;}
     footer .foot_1 .dbmenu .items .submenu ul li{ width: 50%;}
     footer .foot_1 .dbmenu .items .title{ font-size: 20px;}
     footer .foot_1 .dbmenu .items:last-child{ margin-bottom: 0px;}
}
@charset "utf-8";
@import url(message.css);
.banner-inner{overflow:hidden;background:#EEEEEE;position:relative}
.banner-inner::after{content:"";position:absolute;left:0px;top:0px;width:100%;height:calc(100% - 50px);background:rgba(0,0,0,.6)}
.banner-inner img{width:100%;min-height:240px;object-fit:cover;z-index:0;position:relative}
.banner-inner .banner-content{background:#FFFFFF;height:50px;font-weight:var(--fontbold5);font-size:var(--fontsize14);border-bottom:1px solid #E5E5E5}
.banner-inner .banner-content .l-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.banner-inner .banner-title-h1{font-weight:var(--fontbold5);text-transform:capitalize;color:var(--fontcolor);font-size:var(--fontsize18)}
.banner-inner .banner-breadcrumbs{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;color:var(--introcolor)}
.banner-inner .banner-breadcrumbs em{margin-right:5px}
.banner-inner a:hover{color:var(--color)}
.nobanner{padding-top:116px}
.nobanner header .head-top{background:#1a1414}
.nobanner header .head-info{background:#1a1414}
article{color:var(--fontcolor);font-size:var(--fontsize14);line-height:1.8}
article a{color:var(--color)}
article a:hover{text-decoration:underline}
.table-wrap{overflow-x:auto;width:100%}
.table-wrap table{border-collapse:collapse}
.table-wrap table td,.table-wrap table th{border:1px solid #DDDDDD;padding:8px 16px}
.common-main{padding:50px 0px}
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}
.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 20px;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:.5rem}
.ck-widget-toc-title{text-align:left;font-weight:var(--fontbold7);margin:0px;margin-bottom:5px;padding:0px;padding-left: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 20px;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:.5rem}
.wmkc-black{color:var(--fontcolor) !important}
.wmkc-border-black{border-color:#111111!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 #DDDDDD;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:#000000;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}
.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 20px;color:var(--fontcolor)}
.inquiry-prolist .inquiry-pro-item .pro-item-name a{color:var(--color);font-size:var(--fontsize16);font-weight:var(--fontbold6)}
.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)}
@media (max-width:768px){.inquiry-prolist .inquiry-pro-item .pro-item-img{width:100px}
.inquiry-prolist .inquiry-pro-item .pro-item-name{padding:0px 10px}
.inquiry-prolist .inquiry-pro-item .pro-item-del{margin-right:0px}}
.aboutcompany-1{padding:4% 0px;position:relative;z-index:1}
.aboutcompany-1::before{content:"";position:absolute;left:50%;top:0px;transform:translateX(-50%);width:1920px;height:100%;background:url(https://css02.v15cdn.com/m431/imgs/about-company-1.webp);z-index:-1}
.aboutcompany-1 .home-des,.aboutcompany-1 .home-title{color:#FFFFFF}
.aboutcompany-1 .list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin-top:7%}
.aboutcompany-1 .list li{width:23%;background:#FEFEFE;border-radius:10px;text-align:center;padding:50px 25px 30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}
.aboutcompany-1 .list li .icon{background:var(--color);width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-45px;left:50%;transform:translateX(-50%)}
.aboutcompany-1 .list li .title{font-weight:var(--fontbold6);font-size:var(--fontsize20);padding:10px 0px}
.aboutcompany-1 .list li .text{color:var(--introcolor)}
.aboutcompany-2{padding:4% 0}
.aboutcompany-2 .list{margin-top:3%;display:flex;flex-wrap:wrap;list-style:none}
.aboutcompany-2 .list li{width:33.33333%}
.aboutcompany-2 .list li .img{overflow:hidden}
.aboutcompany-2 .list li .img img{transition:all .1s linear;width:100%}
.aboutcompany-2 .list li .info{background:#FFFFFF;box-shadow:0 3px 29px 0 rgba(228,228,228,.48);text-align:center;padding:30px 20px;transition:all .1s linear}
.aboutcompany-2 .list li .info .title{color:var(--color);font-size:var(--fontsize20)}
.aboutcompany-2 .list li .info .text{color:var(--introcolor)}
.aboutcompany-2 .list li:hover .img img{transform:scale(1.02)}
.aboutcompany-2 .list li:hover .info{background:var(--color)}
.aboutcompany-2 .list li:hover .info .text,.aboutcompany-2 .list li:hover .info .title{color:#FFFFFF}
.aboutcompany-3 .item{display:flex;flex-wrap:wrap;justify-content:space-between}
.aboutcompany-3 .item .img{width:50%}
.aboutcompany-3 .item .img img{width:100%;height:100%;object-fit:cover}
.aboutcompany-3 .item .info{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#332f2c;padding:20px 4%}
.aboutcompany-3 .item .info .home-title{text-align:left;color:#FFFFFF;margin-bottom:20px}
.aboutcompany-3 .item .info .text{color:#9A9A9A}
.aboutcompany-4{padding:4% 0 2%}
.aboutcompany-4 .home-icon{display:flex;align-items:center;justify-content:center}
.aboutcompany-4 .home-icon::after,.aboutcompany-4 .home-icon::before{content:"";display:inline-block;width:50px;height:1px;background:var(--color);margin:0px 10px}
.aboutcompany-4 .home-title{max-width:800px;margin:10px auto}
.aboutcompany-4 .list{text-align:center;list-style:none;margin-top:20px}
.aboutcompany-4 .list li{margin-bottom:10px}
.aboutcompany-4 .list li em{color:var(--color)}
.aboutcompany-4 .logolist{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin-top:30px}
.aboutcompany-4 .logolist li{width:20%}
.pagehonour .list{list-style:none;margin-top:30px;display:flex;flex-wrap:wrap;justify-content:space-between}
.pagehonour .list li{width:30%;text-align:center}
.pagehonour .list li .img img{width:100%}
.pagehonour .list li .info{padding:20px 0px}
.pagehonour .list li .info .title{color:var(--color);font-size:var(--fontsize20)}
.pagehonour .list li .info .text{color:var(--introcolor)}
.pageteam .flex{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.pageteam .flex .home-title{text-align:left;position:relative;padding-right:20px}
.pageteam .flex .home-title::after{content:"";position:absolute;right:0px;top:0px;width:1px;height:100%;background:#E9E9E9}
.pageteam .flex .home-des{text-align:right;margin:0px}
.pageteam .list{margin-top:30px;list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between}
.pageteam .list li{width:32%;display:flex;justify-content:space-between;align-items:flex-end}
.pageteam .list li .info{width:45%;border-radius:5px 0px 0px 5px;border:1px solid #DFDFDF;margin-bottom:40px;padding:20px;text-align:right;position:relative}
.pageteam .list li .info::before{content:"";position:absolute;right:0px;top:-90px;width:70%;height:90px;background:#F4F4F4}
.pageteam .list li .info .title{font-weight:var(--fontbold6)}
.pageteam .list li .info .manager{font-size:var(--fontsize14)}
.pageteam .list li .info .share{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-end}
.pageteam .list li .info .share a{margin-left:5px;color:var(--fontcolor)}
.pageteam .list li .img{flex:1;border-radius:5px;overflow:hidden}
.pageteam .list li .img img{width:100%;height:100%;object-fit:cover;transition:all .1s linear}
.pageteam .list li:hover .img img{transform:scale(1.02)}
.common-main.video{background:#F7F7F7}
.pagevideo .list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none}
.pagevideo .list li{background:#FFFFFF;width:32%;margin-bottom:2em}
.pagevideo .list li>p{padding:20px;height:60px;transition:all .1s linear;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.pagevideo .list li lite-youtube{margin:0px;width:100%;max-width:100%;height:calc(100% - 60px);object-fit:cover}
.pagevideo .list li:hover>p{color:var(--color);box-shadow:1px 3px 15px 2px rgba(0,0,0,.1)}
.pagevideo .list.list2 li:nth-child(1){flex:1;margin-right:2%}
.pagevideo .list.list2 li:nth-child(2){width:32%}
.pro-cate-title{text-align:center;font-weight:var(--fontbold6);color:var(--fontcolor);font-size:32px;margin:30px auto 0;line-height:1}
.catelist{display:flex;flex-wrap:wrap;width:100%}
.catelist .cateitem{width:100%;background:#FFFFFF;transition:all .1s linear;padding:4% 0}
.catelist .cateitem:nth-child(2n+1){background:#f5f5f5}
.catelist .cateitem:nth-child(2n+1) .l-wrap{flex-direction:row-reverse}
.catelist .cateitem:nth-child(2n+1) .cate-info{padding-left:0px;padding-right:5%}
.catelist .cateitem .l-wrap{display:flex;justify-content:space-between}
.catelist .cateitem .cate-img{width:50%;position:relative}
.catelist .cateitem .cate-img::after,.catelist .cateitem .cate-img::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .2s linear}
.catelist .cateitem .cate-img::before{width:0%;height:90%;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF}
.catelist .cateitem .cate-img::after{width:90%;height:0%;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF}
.catelist .cateitem .cate-img img{width:100%;transition:all .1s linear}
.catelist .cateitem .cate-img:hover::before{width:90%}
.catelist .cateitem .cate-img:hover::after{height:90%}
.catelist .cateitem .cate-info{flex:1;padding:6% 0;padding-left:5%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.catelist .cateitem .cate-info .title{font-size:var(--hometitlefont);font-weight:var(--fontbold5);text-transform:capitalize;color:var(--fontcolor);margin-bottom:10px}
.catelist .cateitem .cate-info .title:hover{color:var(--color)}
.catelist .cateitem .cate-info .text{color:var(--introcolor);font-size:var(--fontsize14);border-top:1px solid rgba(51,47,44,.1);padding-top:30px}
.catelist .cateitem .cate-info .more{min-width:180px;height:45px;padding:0px 20px;background:#e6af5d;border-radius:var(--borderradius);display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF;text-transform:capitalize;font-size:var(--fontsize14)}
.catelist .cateitem .cate-info .more:hover{background:#333333}
.procate-demo-1{color:#6b6460}
.page-nav{background:linear-gradient(#FFFFFF,#FFFFFF,#FAFAFA);border-bottom:1px solid #f1f1f1;padding:40px 0px 40px;margin-bottom:40px}
.page-nav .pagenav-cate{background:#FFFFFF;box-shadow:0 1px 29px 0 rgba(225,225,225,.48);border-radius:10px}
.page-nav .pagenav-catelist{list-style:none}
.pagenav-search{display:flex;justify-content:center;align-items:center;position:relative;width:100%;max-width:460px;margin:40px auto}
.pagenav-search input{width:100%;height:50px;background:#EAEAEA;border:1px solid #EAEAEA;outline:0;padding:0px 20px;transition:all .1s linear}
.pagenav-search input:focus{border-color:var(--color)}
.pagenav-search button{position:absolute;right:0px;top:0px;width:50px;height:50px;background:0 0;outline:0;border:none;color:#9D9D9D;cursor:pointer}
.pagenav-search button em{font-size:var(--fontsize28,28px);font-weight:var(--fontbold6)}
@media (min-width:1025px){.page-nav .pagenav-cate{width:100%;padding:0px 40px}
.page-nav .pagenav-catelist{text-align:center;padding:6px 0px}
.page-nav .pagenav-catelist>li{position:relative;margin-right:40px;font-size:var(--fontsize15);height:100%;display:inline-flex;align-items:center;padding:10px 0px}
.page-nav .pagenav-catelist>li.active>a,.page-nav .pagenav-catelist>li.active>em{color:var(--color)}
.page-nav .pagenav-catelist>li em{margin-left:5px;font-weight:var(--fontbold6);font-size:var(--fontsize14)}
.page-nav .pagenav-catelist>li a{color:var(--introcolor)}
.page-nav .pagenav-catelist>li ul{position:absolute;top:100%;left:0px;list-style:none;background:#FFFFFF;box-shadow:1px 2px 10px rgba(0,0,0,.1);z-index:9;min-width:200px}
.page-nav .pagenav-catelist>li ul a:hover{color:var(--color)}
.page-nav .pagenav-catelist>li ul li{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:100%}
.page-nav .pagenav-catelist>li ul li{padding-right:10px}
.page-nav .pagenav-catelist>li ul a{font-size:var(--fontsize14);display:flex;width:100%;height:100%;padding:8px 14px;white-space:nowrap}
.page-nav .pagenav-catelist>li ul li:hover>a,.page-nav .pagenav-catelist>li ul li:hover>em{color:var(--color)}
.page-nav .pagenav-catelist>li:hover>a,.page-nav .pagenav-catelist>li:hover>em{color:var(--color)}
.page-nav .pagenav-catelist>li ul{transform-origin:top;transform:scaleY(0);opacity:0;transition:all .3s ease-in-out}
.page-nav .pagenav-catelist>li:hover>ul{transform:scaleY(1);opacity:1}
.page-nav .pagenav-catelist>li ul li>ul{position:absolute;left:100%;top:0px;transform-origin:top;transform:scaleY(0);opacity:0;transition:all .3s ease-in-out}
.page-nav .pagenav-catelist>li ul li:hover>ul{transform:scaleY(1);opacity:1}}
.page-main .pro-list{display:flex;flex-wrap:wrap;list-style:none}
.page-main .pro-list .cate-title{text-align:center;padding-top:5px}
.page-main .pro-list li:hover a{color:var(--color)}
.page-main .pro-list li{background:#FFFFFF}
.page-main .pro-list li .pro-img{width:100%;aspect-ratio:1/1;position:relative;border-radius:5px 5px 0px 0px;overflow:hidden}
.page-main .pro-list li .pro-img>a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.page-main .pro-list li .pro-img>a .icon-videoplay{display:none}
.page-main .pro-list li .pro-img>a.lazy-loaded .icon-videoplay{display:flex}
.page-main .pro-list li .pro-img>a::after{content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,.4);opacity:0;transition:all .1s linear}
.page-main .pro-list li .pro-img img{width:100%;height:100%;object-fit:cover;transition:all .1s linear}
.page-main .pro-list li .icon{position:absolute;bottom:15px;right:20px;display:flex;align-items:center;justify-content:center;width:35px;height:35px;background:#FFFFFF;border-radius:50%;cursor:pointer;transform:translateY(10px);opacity:0;transition:all .1s linear}
.page-main .pro-list li .icon.pro-checked{transform:translateY(0);opacity:1;background:var(--color);color:#FFFFFF;box-shadow:0 0 8px 1px rgba(225,225,225,.48)}
.page-main .pro-list li .pro-info{position:relative;border-radius:0px 0px 5px 5px}
.page-main .pro-list li .pro-info .title{font-size:var(--fontsize18);color:var(--fontcolor);display:inline-block}
.page-main .pro-list li .pro-info .text{font-size:var(--fontsize14);color:var(--introcolor)}
.page-main .pro-list li .pro-info .more{height:45px;padding:0px 30px;display:inline-flex;align-items:center;justify-content:center;color:var(--color);border-radius:var(--borderradius);border:1px solid transparent;font-size:var(--fontsize14);text-transform:uppercase}
.page-main .pro-list li:hover .pro-img img{transform:scale(1.02)}
.page-main .pro-list li:hover .pro-img>a::after{opacity:1}
.page-main .pro-list li:hover .pro-meta .icon{transform:translateY(0);opacity:1}
.page-main .pro-list li:hover .pro-info .title{color:var(--color)}
.page-main .pro-list li:hover .pro-info .text{margin-bottom:10px}
.page-main .pro-list li:hover .pro-info .more{background:var(--color);color:#FFFFFF;margin-top:10px}
.page-main .pro-list.list1 li{width:24%;margin-right:1.3%}
.page-main .pro-list.list1 li:nth-child(4n){margin-right:0px}
.page-main .pro-list.list1 li .pro-info{text-align:center;padding:15px 20px 20px}
.page-main .pro-list.list1 li .pro-info .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.page-main .pro-list.list1 li .pro-info .text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.page-main .pro-list.list1 li .pro-info .data-price{opacity:0;visibility:hidden;overflow:hidden;height:0px;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--fontsize14);color:var(--color)}
.page-main .pro-list.list1 li:hover{z-index:9;margin-bottom:-20px}
.page-main .pro-list.list1 li:hover .pro-info{box-shadow:0px 5px 10px 5px rgba(224, 224, 224, .42)}
.page-main .pro-list.list1 li:hover .pro-info .data-price{opacity:1;visibility:inherit;overflow:inherit;transition:height .3s;height:20px}
.page-main .pro-list.list0 li{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:3em;padding-bottom:3em;border-bottom:1px solid #e2e2e2}
.page-main .pro-list.list0 li .pro-img{width:380px;border-radius:5px}
.page-main .pro-list.list0 li .pro-info{flex:1;padding:20px 0px 20px 30px}
.page-main .pro-list.list0 li .pro-info .title{margin-bottom:20px}
.page-main .pro-list.list0 li .pro-info .text{margin-bottom:20px}
.page-main .pro-list.list0 li .pro-info .more{border:1px solid #d0d0d0;color:var(--introcolor)}
.page-main .pro-list.list0 li .data-price{display:flex;color:var(--color);margin-bottom:15px}
.page-main .pro-list.list0 li:hover .pro-info .more{color:#FFFFFF;border-color:var(--color)}
.icon-hottitle{position:absolute;left:10px;top:15px;padding:0px 10px;min-width:40px;height:22px;color:#FFFFFF;background:#ed7742;border-radius:3px;font-size:var(--fontsize14);line-height:1;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;z-index:1}
.icon-hottitle::after{content:"HOT"}
.common-page{display:flex;flex-wrap:wrap;justify-content:center;margin-top:50px}
.common-page a,.common-page span{min-width:45px;height:45px;padding:0px 10px;display:inline-flex;align-items:center;justify-content:center;color:#929292;background:#FFFFFF;border-radius:10px;border:1px solid #e0e0e0;margin:5px;font-size:var(--fontsize14);transition:all .1s linear}
.common-page a.ctxt,.common-page span.ctxt{background:var(--color);border-color:var(--color);color:#FFFFFF}
.common-page a:hover{color:var(--color);border-color:var(--color)}
.prodetails-info .prodetails-flex{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:40px}
.prodetails-info .prodetails-left{width:54%;padding-right:2%}
.prodetails-info .prodetails-name{font-weight:var(--fontbold6);font-size:36px;color:#2c2b2b;line-height:1.4;text-align:center}
.prodetails-info .prodetails-price{margin-top:1em;font-size:var(--fontsize14);color:var(--color);text-align:center}
.prodetails-info .prodetails-share{margin-top:30px;display:flex;align-items:center}
.prodetails-info .prodetails-share>span{margin-right:20px;white-space:nowrap;font-size:var(--fontsize14)}
.prodetails-info .prodetails-right{flex:1;padding:2% 4%;box-shadow:0 -4px 20px 0 rgba(0,0,0,.06);background:#FFFFFF;border-radius:10px}
.prodetails-info .prodetails-text-title{font-size:var(--fontsize18);color:var(--fontcolor);text-transform:capitalize;margin-bottom:10px}
.prodetails-info .prodetails-text{font-size:var(--fontsize14);color:var(--introcolor);line-height:1.8}
.prodetails-info .prodetails-text ol,.prodetails-info .prodetails-text ul{padding-left:20px}
.prodetails-info .prodetails-btnlist{margin-top:30px;display:flex;flex-wrap:wrap}
.prodetails-info .prodetails-btnlist>*{min-width:180px;height:50px;padding:0px 15px;display:inline-flex;align-items:center;justify-content:center;color:var(--fontcolor);border-radius:var(--borderradius);border:1px solid #d0d0d0;text-transform:capitalize;transition:all .1s linear;font-size:var(--fontsize14);cursor:pointer;text-align:center;margin-right:15px;margin-bottom:10px}
.prodetails-info .prodetails-btnlist>:last-child{margin-right:0px}
.prodetails-info .prodetails-btnlist>:hover{border-color:var(--color);color:var(--color)}
.prodetails-info .prodetails-btnlist>* em{margin-right:5px}
.prodetails-info .prodetails-btnlist .addToCart{color:var(--color);border-color:var(--color)}
.prodetails-info .prodetails-btnlist .addToCart:hover{opacity:.8}
.prodetails-info .prodetails-btnlist .addToCart.added{background:var(--color);color:#FFFFFF}
.prodetails-pictitle{text-align:center;font-size:38px;padding:20px 0px}
.imgalt{display:none}
.preview-container{position:relative;display:flex;height:500px}
.preview-container .thumbnail-show{flex:1;position:relative;display:flex;justify-content:center}
.preview-container .small-box{width:500px;aspect-ratio:1/1;background:#FFFFFF;border:1px solid #CCCCCC;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview-container .small-box:hover{cursor:crosshair}
.preview-container .small-box img{width:100%;height:100%;object-fit:contain;}
.preview-container .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}
.preview-container .big-box img{display:block;max-width:none;max-height:none;width:150%}
.preview-container .big-box.act{display:none!important}
.small-box .hover{position:absolute;width:180px;height:180px;background-color:rgba(204,204,204,.6);border:1px solid #EEEEEE;display:none;cursor:move;z-index:9}
.preview-container .thumbnail-show #media{background:#EEEEEE;width:100%;aspect-ratio:1/1;object-fit:contain;z-index:9}
.preview-container .thumbnail-box{width:120px;margin-right:20px;padding:25px 0px}
.preview-container .thumbnail-box .swiper{padding-right:20px;width:100%;height:100%}
.preview-container .thumbnail-box .item{width:82px;overflow:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid transparent;transition:all .1s linear;position:relative;border:1px solid #EEEEEE}
.preview-container .thumbnail-box .item.item-cur{border-color:var(--color)}
.preview-container .thumbnail-box .item.item-cur::before{content:"";position:absolute;top:50%;transform:translateY(-50%);right:-20px;width:0px;height:0px;border:10px solid transparent;border-left:10px solid var(--color)}
.preview-container .thumbnail-box .item img{width:100%;height:100%;object-fit:cover}
.thumbnail-box .prodetails-button-next,.thumbnail-box .prodetails-button-prev{position:absolute;top:0px;left:0px;width:82px;height:20px;background:var(--color);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .1s linear;z-index:9}
.thumbnail-box .prodetails-button-next.not,.thumbnail-box .prodetails-button-prev.not{background:#EEEEEE;color:#999999}
.thumbnail-box .prodetails-button-next:hover,.thumbnail-box .prodetails-button-prev:hover{opacity:.9}
.thumbnail-box .prodetails-button-prev em{transform:rotate(180deg)}
.thumbnail-box .prodetails-button-next{top:auto;bottom:0px}
.thumbnail-show .prodetails-button-next,.thumbnail-show .prodetails-button-prev{width:45px;height:45px;background:#FFFFFF;border-radius:10px;border:1px solid #e0e0e0;color:#999999;display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;transition:all .1s linear;cursor:pointer}
.thumbnail-show .prodetails-button-next:hover,.thumbnail-show .prodetails-button-prev:hover{color:#FFFFFF;border-color:var(--color);background:var(--color)}
.thumbnail-show .prodetails-button-next{left:auto;right:0}
.preview-container .thumbnail-box .banner-page{display:none}
.singglepic{width:500px;height:500px;text-align:center;overflow:hidden;margin:0px auto}
.singglepic img{max-height:500px}
.mediaplay{display:flex;align-items:center;justify-content:center;width:70px;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%);display:none;z-index:1}
.mediaplay em{font-size:36px;position:static;border:none;background:0 0;transform:none;width:auto;height:auto}
.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}
.mediaplay:hover{color:var(--color);background:rgba(255,255,255,.7)}
@keyframes runDot{0%{transform:rotate(0)}
100%{transform:rotate(359deg)}}
.prodetails-tabs{background:#f2f2f2;margin:50px 0px 20px}
.prodetails-tabs .l-wrap{height:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.prodetails-tabs .prodetails-tabs-item{font-size:var(--fontsize24);text-transform:capitalize;padding:20px 20px;height:100%;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.prodetails-tabs .prodetails-tabs-item::after{content:"";position:absolute;bottom:0px;left:50%;transform:translateX(-50%);width:0px;height:3px;background:var(--color);transition:all .1s linear}
.prodetails-tabs .prodetails-tabs-item.act::after{width:100px}
.tagContent+.tagContent{margin-top:30px}
.pagelink{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid #EEEEEE;border-bottom:1px solid #EEEEEE;padding:30px 0px;margin:30px 0px}
.pagelink .pagelink-item{width:50%;display:flex;flex-direction:column}
.pagelink .pagelink-item.prev{align-items:flex-start;padding-right:20px;text-align:left}
.pagelink .pagelink-item.next{align-items:flex-end;padding-left:20px;text-align:right}
.pagelink .pagelink-item .icon{color:var(--color);text-transform:capitalize}
.pagelink .pagelink-item .link{font-size:var(--fontsize18);padding-top:5px}
.pagelink .pagelink-item .link:hover{color:var(--color)}
.prohome-content{clear:both;margin:0px auto 20px;padding:10px;max-width:1510px;line-height:1.6;box-sizing:border-box;border-radius:5px}
.prolist-bottom{clear:both;margin:0px auto 0px;padding:10px;max-width:1510px;line-height:1.6;box-sizing:border-box;border-radius:5px}
.prolist-bottom a{text-decoration:underline}
.prolist-bottom a:hover{color:var(--color)}
.pro-bottom{margin:0px auto;padding:0px}
.pro-bottom a{text-decoration:underline;text-transform:lowercase}
.pro-bottom a:active,.pro-bottom a:hover{color:var(--color)}
@media (max-width:1700px){.prohome-content,.prolist-bottom{max-width:1400px}}
@media (max-width:1500px){.prohome-content,.prolist-bottom{max-width:1200px}}
@media (max-width:1240px){.prohome-content,.prolist-bottom{max-width:98%}}
@media (max-width:768px){.prohome-content,.prolist-bottom{max-width:100%;margin-left:3vw;margin-right:3vw}}
@media (max-width:768px){.prohome-content{clear:both;line-height:1.6;padding:0px}
.prolist-bottom{clear:both;line-height:1.6;padding:0px}}
.prolist-content{clear:both;margin:0px auto 15px;line-height:1.6}
.protypefeedback{padding:3% 0px;background:#FAFAFA}
.inquiry-title{font-size:36px;text-align:center;text-transform:capitalize;margin-bottom:20px;line-height:1}
.inquiry-des{font-size:var(--fontsize14);text-align:center;margin-bottom:20px}
.maylink-list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin-top:1%}
.maylink-list li{background:#FFFFFF;width:16%}
.maylink-list li .pro-img{width:100%;aspect-ratio:1/1;position:relative;border-radius:5px 5px 0px 0px;overflow:hidden}
.maylink-list li .pro-img>a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.maylink-list li .pro-img>a::after{content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,.4);opacity:0;transition:all .1s linear}
.maylink-list li .pro-img img{width:100%;height:100%;object-fit:cover;transition:all .1s linear}
.maylink-list li .pro-info{position:relative;border-radius:0px 0px 5px 5px;text-align:center;padding:15px 20px 20px}
.maylink-list li .pro-info .title{font-size:var(--fontsize16);color:var(--fontcolor);display:inline-block;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.maylink-list li .pro-info .text{font-size:var(--fontsize14);color:var(--introcolor);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.maylink-list li .pro-info .more{height:40px;padding:0px 30px;display:inline-flex;align-items:center;justify-content:center;color:var(--color);border-radius:var(--borderradius);border:1px solid transparent;font-size:var(--fontsize13);text-transform:uppercase;margin-top:15px}
.maylink-list li:hover{z-index:9}
.maylink-list li:hover .pro-img img{transform:scale(1.02)}
.maylink-list li:hover .pro-img>a::after{opacity:1}
.maylink-list li:hover .pro-info{box-shadow:0px 5px 10px 5px rgba(224, 224, 224, .42)}
.maylink-list li:hover .pro-info .title{color:var(--color)}
.maylink-list li:hover .pro-info .more{background:var(--color);color:#FFFFFF}
.page-hotnews{padding:2% 0}
.page-hotnews .swiper-slide{display:flex;border:1px solid #EEEEEE;border-radius:10px;overflow:hidden;}
.page-hotnews .swiper-slide .img{width:36%;border-radius:10px}
.page-hotnews .swiper-slide .img img{width:100%;transition:all .1s linear}
.page-hotnews .swiper-slide .img:hover img{transform:scale(1.01)}
.page-hotnews .swiper-slide .info{flex:1;position:relative}
.page-hotnews .swiper-slide .info .box{background:#EEEEEE;padding:12% 10%;border-radius:3px;position:absolute;top:50%;transform:translateY(-50%);right:0px;width:calc(100% + 100px);min-height:80%}
.page-hotnews .swiper-slide .info .date{color:var(--color);text-transform:uppercase;margin-bottom:10px}
.page-hotnews .swiper-slide .info .title{font-size:var(--fontsize24);line-height:1.2}
.page-hotnews .swiper-slide .info .title:hover{color:var(--color)}
.page-hotnews .swiper-slide .info .text{margin-top:20px;margin-bottom:30px;font-size:var(--fontsize14);color:var(--introcolor)}
.page-hotnews .swiper-slide .info .more{position:relative;display:inline-flex;align-items:center;font-size:var(--fontsize14);text-transform:uppercase;padding-bottom:4px}
.page-hotnews .swiper-slide .info .more:hover{color:var(--color)}
.page-hotnews .swiper-slide .info .more:hover::after{background:var(--color);width:100%}
.page-hotnews .swiper-slide .info .more em{margin-left:10px}
.page-hotnews .swiper-slide .info .more::after{content:"";position:absolute;left:0px;bottom:0px;width:50px;height:1px;background:#333333;transition:width .1s linear}
.page-hotnews .hotnews-pagination{position:absolute;bottom:20%;left:auto;right:30px;width:auto;z-index:1}
.page-hotnews .hotnews-pagination .swiper-pagination-bullet{width:11px;height:11px;background:#e1e1e1;border-radius:50%;opacity:1}
.page-hotnews .hotnews-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#FFFFFF;border-radius:50%;border:2px solid #272727}
.newslist{width:100%;display:flex;flex-wrap:wrap;list-style:none;margin-top:3%}
.newslist li{transition:all .1s linear}
.newslist li .img{aspect-ratio:3/2;border-radius:15px 15px 0px 0px;width:100%}
.newslist li .img img{width:100%;height:100%;object-fit:cover}
.newslist li .img .date{position:absolute;left:20px;top:20px;background:var(--color);text-align:center;color:#FFFFFF;padding:10px;border-radius:3px;z-index:1;font-size:var(--fontsize14);text-transform:uppercase;line-height:1.2}
.newslist li .info .title{font-size:var(--fontsize20);line-height:1.4}
.newslist li .info .text{margin-bottom:20px;margin-top:10px;font-size:var(--fontsize14);color:var(--introcolor)}
.newslist li .info .more{position:relative;display:inline-flex;align-items:center;font-size:var(--fontsize14);text-transform:uppercase;padding-bottom:4px}
.newslist li .info .more:hover{color:var(--color)}
.newslist li .info .more:hover::after{background:var(--color);width:100%}
.newslist li .info .more em{margin-left:10px}
.newslist li .info .more::after{content:"";position:absolute;left:0px;bottom:0px;width:50px;height:1px;background:#333333;transition:width .1s linear}
.newslist li:hover{transform:translateY(-5px)}
.newslist li:hover .info .title{color:var(--color)}
.newslist.list1 li{width:31%;margin-right:2%;margin-bottom:3em;display:flex;flex-direction:column;align-items:flex-end}
.newslist.list1 li:nth-child(3n){margin-right:0px}
.newslist.list1 li .info{width:90%;background:#FFFFFF;box-shadow:0 1px 28px 1px rgba(228,228,228,.55);border-radius:15px 0 15px 0px;padding:30px 20px;z-index:2;margin-top:-30px}
.newslist.list0 li{width:100%;display:flex;align-items:center;border-bottom:1px solid #E9E9E9;padding-bottom:2em;margin-bottom:2em}
.newslist.list0 li .img{border-radius:15px;width:380px}
.newslist.list0 li .info{flex:1;padding:20px 0px 20px 40px}
.newscontent-title{font-weight:var(--fontbold5);font-size:36px;line-height:1.2;margin-bottom:10px}
.newscontent-meta{display:flex;align-items:center;font-size:var(--fontsize14);color:var(--color);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #EEEEEE}
.newscontent-meta>p{margin-right:15px}
.newscontent-meta>p:last-child{margin-right:0px}
.newscontent-meta .newsendinquiry{cursor:pointer}
.newscontent-details{margin-bottom:40px}
.pageproject .home-title p:nth-child(2){color:var(--color)}
.pageproject .pageproject-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:3%;list-style:none}
.pageproject .pageproject-list li{width:32%;margin-bottom:3em}
.pageproject .pageproject-list li .img{border-radius:10px}
.pageproject .pageproject-list li .info{display:flex}
.pageproject .pageproject-list li .info .box{width:100%;max-width:260px;background:#332f2c;border-radius:10px;padding:20px;margin-top:-60px;color:#FFFFFF;display:flex;flex-direction:column}
.pageproject .pageproject-list li .info .box .p1{font-size:var(--fontsize14)}
.pageproject .pageproject-list li .info .box .p2{font-size:var(--fontsize20);line-height:1.4;font-weight:var(--fontbold3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pageproject .pageproject-list li .info .more{min-width:110px;height:38px;padding:0px 15px;background:#faf6f1;border-radius:0 0 10px 0px;text-decoration:none;color:var(--fontcolor);display:inline-flex;align-items:center;justify-content:center}
.pageproject .pageproject-list li .info .more em{margin-right:5px}
.pageproject .pageproject-list li:hover .info .more{background:var(--color);color:#FFFFFF}
.project-list{list-style:none}
.project-wrap{display:flex;flex-wrap:wrap;margin-top:30px}
.project-wrap li{width:23%;margin-right:2.6%;margin-bottom:20px}
.project-wrap li:nth-child(4n){margin-right:0px}
.project-wrap li .project-img{aspect-ratio:3/2;border-radius:10px;border:1px solid #EEEEEE;overflow:hidden}
.project-wrap li .project-img img{width:100%;height:100%;object-fit:cover;transition:all .1s linear}
.project-wrap li .project-info{padding:10px}
.project-wrap li .project-name{font-size:var(--fontsize18);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.project-wrap li .project-content{margin-top:10px;font-size:var(--fontsize14);color:var(--introcolor);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.project-wrap li:hover .project-img img{transform:scale(1.02)}
.project-wrap li:hover .project-name{color:var(--color)}
.faqs-list li{width:100%;margin-bottom:25px}
.faqs-list .project-info{margin-bottom:1em}
.faqs-list .project-info.open .project-name{color:var(--color)}
.faqs-list .project-info .project-name{width:100%;position:relative;display:flex;align-items:center;cursor:pointer;font-size:var(--fontsize16);padding-right:70px}
.faqs-list .project-info .project-name em{transition:all .1s linear;position:absolute;right:30px;top:0px;color:#FFFFFF;font-weight:var(--fontbold6);display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#DDDDDD;border-radius:50%;font-size:var(--fontsize16)}
.faqs-list .project-info.open .project-name em{transform:rotateX(180deg);background:var(--color)}
.faqs-list .project-info .project-content{display:none;margin-top:.5em;position:relative;padding:20px 20px;color:var(--introcolor);font-size:var(--fontsize14);border-radius:5px;background:#f3f7fa;z-index:1}
.download-list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:2%}
.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:10px}
.download-list li:hover{box-shadow:1px 2px 10px rgba(0,0,0,.2)}
.download-list li:hover .download-img img{transform:scale(1.01)}
.download-list li .download-img{width:140px}
.download-list li .download-img img{width:100%;transition:all .1s linear}
.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)}
.contactlist{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none}
.contactlist li{width:23%;background:#F7F7F7;border-radius:5px;overflow:hidden}
.contactlist li:hover .icon em{background:var(--color);color:#FFFFFF}
.contactlist li .icon{position:relative;z-index:1}
.contactlist li .icon::after{content:"";position:absolute;left:0px;top:0px;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:0}
.contactlist li .icon img{width:100%}
.contactlist li .icon em{z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:35px;color:var(--color);background:#FFFFFF;border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;transition:all .2s linear}
.contactlist li .info{text-align:center;padding:20px 10px 10px}
.contactlist li .info .p1{color:var(--color);font-weight:var(--fontbold5)}
.contactlist li .info .p2{color:var(--fontcolor)}
.contactlist li .info .p2 *{color:var(--fontcolor)}
.contactbox{position:relative;z-index:1;padding:3% 0px}
.contactbox::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0px;width:1920px;height:100%;background:#f1f1f1;z-index:-1}
.contactbox .contactflex{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:2%;background:#FFFFFF}
.contactbox .contactflex .contactform{width:50%;padding:4% 3%}
.contactbox .contactflex .contactform .contact-title{font-size:var(--fontsize30)}
.contactbox .contactflex .contactform .wmkcfeedback{margin-top:20px}
.contactbox .contactflex .contactimg{flex:1}
.contactbox .contactflex .contactimg img{width:100%;height:100%;object-fit:cover}
@media (max-width:1366px){.inquiry-title{font-size:var(--fontsize30)}
.pageteam .list{margin-top:60px}
.preview-container{height:400px}
.preview-container .small-box{width:400px}
.thumbnail-show .prodetails-button-next{right:0px}
.preview-container .thumbnail-box{margin-right:0px}
.thumbnail-box .prodetails-button-next,.thumbnail-box .prodetails-button-prev{width:85px}
.preview-container .thumbnail-box .item{width:85px}
.prodetails-info .prodetails-right{padding:2%}
.thumbnail-show .prodetails-button-prev{left:0px}
.prodetails-info .prodetails-btnlist>*{min-width:160px;height:45px;margin-right:7px}}
@media (max-width:1280px){.inquiry-title{font-size:var(--fontsize26)}
.pageteam .list li{width:49%;margin-right:0px;margin-bottom:20px}
.prodetails-info .prodetails-right{padding-left:20px}
.page-hotnews .swiper-slide .info .title{font-size:var(--fontsize20)}
.page-hotnews .swiper-slide .img{width:50%;border-radius:10px 0px 0px 10px}
.page-hotnews .swiper-slide .info .box{width:100%;position:static;transform:none;height:100%;padding:20px}
.newslist.list1 li .info{width:100%}
.maylink-list li{width:33%}}
.catecontainer .cate1title{font-size:var(--fontsize24)}
.catecontainer .cate1title a:hover{color:var(--color)}
.catenavwrap{padding:10px 0px;box-shadow:1px 2px 5px rgba(0,0,0,.1);margin-bottom:20px;position:sticky;top:75px;background:#FFFFFF;z-index:1}
.catenav{display:flex;flex-wrap:wrap;align-items:center;list-style:none}
.catenav li{color:var(--introcolor);margin-right:40px;line-height:1;font-size:var(--fontsize14);cursor:pointer;display:inline-flex;align-items:center;padding:6px 0px;transition:all .1s linear}
.catenav li em{width:14px;height:14px;display:inline-block;border:2px solid #999999;margin-right:5px}
.catenav li.active{color:var(--color)}
.catenav li.active em{border-color:var(--color);background:var(--color)}
.catecontainer .cateitem{width:100%;padding-top:40px}
.catecontainer .cate1title{text-align:center;font-size:36px;font-weight:var(--fontbold6);margin-bottom:20px;color:#444444}
.catecontainer .cate2list{display:flex;flex-wrap:wrap;list-style:none}
.catecontainer .cate2list li{width:23%;margin-bottom:20px;margin-right:2.6%}
.catecontainer .cate2list li:nth-child(4n){margin-right:0px}
.catecontainer .cate2list li .img{background:#FFFFFF;border:1px solid #EEEEEE;border-radius:5px;aspect-ratio:1/1}
.catecontainer .cate2list li .img img{width:100%;height:100%;object-fit:cover}
.catecontainer .cate2list li .title{text-align:center;font-size:var(--fontsize16);margin-top:5px}
.catecontainer .cate2list li:hover .img img{transform:scale(1.02)}
.catecontainer .cate2list li:hover .title a{color:var(--color)}
.custom-form{display:flex;flex-wrap:wrap}
.custom-form .sidebar{width:280px;margin-right:20px;background:#FAFAFA;padding:20px 10px}
.custom-form .page-container{flex:1}
.custom-form .sidebar-title{font-weight:var(--fontbold6);font-size:var(--fontsize18)}
.custom-form .pro-cate-title{margin:0px 0px 20px}
@media (max-width:1024px){.custom-form .sidebar{width:100%;margin:0px 0px 20px;padding:20px}}
.singgle-main{overflow:hidden}
#filterlist .sidebar-item{margin-bottom:20px}
#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:65%;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);line-height:1.2}
.pagesbanner .pagesbanner-animate .p2{margin-top:20px;font-size:var(--fontsize18);font-weight:var(--fontbold4)}
@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)}}
.news-nav li a.active{color:var(--color)}


/* ===== End of style.css ===== */

