@charset "utf-8";

@media(max-width:1024px) {
	.thumbnail-show {
		height: 400px
	}

	.thumbnail-box .prodetails-button-next,
	.thumbnail-box .prodetails-button-prev {
		top: 200px
	}

	.pageabouttitle {
		font-size: 28px
	}

	.pageabout .pageabout-2 .flex>div {
		width: 100%;
		padding-right: 0px
	}

	.pageabout-3 .flex>div {
		width: 100%
	}

	.pageabout-4 ul {
		padding: 0px 20px
	}

	.pageabout-4 ul li {
		width: 100%
	}

	.pageabout-5 .flex .left {
		width: 100%
	}

	.pageabout-5 .flex .right {
		padding-left: 0
	}

	.pagehonour .pagehonour-list .item {
		width: 48%
	}

	.pageteam .pageteam-list .item {
		width: 48%
	}

	.product-cateitem .cate-info {
		padding-top: 38px
	}

	.product-cateitem .cate-info .text {
		margin-top: 30px
	}

	.sidebar {
		display: none
	}

	.pro-list.list1 li {
		width: 32%
	}

	.protype-demo-1 .protype-sec-3 .protype-sec-3-list li {
		width: 48%;
		margin-bottom: 1em
	}

	.protype-demo-1 .protype-sec-5 .protype-sec-5-left {
		width: 100%
	}

	.protype-demo-1 .protype-sec-5 .protype-sec-5-right {
		width: 100%;
		margin-top: 1em
	}

	.maylink-list {
		justify-content: space-between
	}

	.maylink-list li {
		width: 32%;
		margin-right: 0px;
		margin-bottom: 1em
	}

	.pagesolutions .title {
		font-size: 26px
	}

	.contact-list .contact-item {
		width: 48%
	}

	.contact-box>div {
		width: 100%
	}

	.contact-box .contact-inquiry {
		background: 0 0;
		margin-top: 20px
	}

	.contact-box .contact-main .contact-h1 {
		font-size: 34px
	}

	.contact-box .contact-inquiry .wmkcfeedback {
		position: static;
		transform: none;
		width: 100%;
		padding: 0px
	}

	.contact-box .contact-main::before {
		display: none
	}

	.contact-box .contact-inquiry::before {
		display: none
	}

	.contact-box .contact-main {
		padding: 30px 15px
	}

	.singglepic {
		height: 400px
	}

	.prodetails-tabs {
		top: 70px
	}

	.mediaplay {
		width: 50px;
		height: 50px;
		line-height: 50px
	}

	.mediaplay em {
		font-size: 30px
	}

	.product-cateitem {
		width: 100%
	}
}

@media(max-width:768px) {
	.banner-inner .banner-breadcrumbs {
		font-size: 12px
	}

	.prodetails-tabs {
		top: 60px
	}

	.common-main {
		padding: 30px 0px
	}

	.prodetails-content {
		margin-top: 30px
	}

	.pageabouttitle {
		font-size: 24px
	}
	.kche-t208 .kche-t208-sub{
		padding: 10px 0 !important;
	}
	.kche-t208 .kche-t208-title h5{
		font-size: 24px !important;
		font-weight: var(--fontbold9)  !important;
    line-height: 1.2 !important;
    color: #1a1919 !important;
    text-align: center !important;
	}

	.pageabout-3 .flex .right {
		padding: 20px
	}

	.pageabout-4 ul li .top .title {
		font-size: 20px
	}

	.pageabout-5 .flex .right ul li .icon {
		width: 50px;
		height: 50px
	}

	.pageabout-5 .flex .right ul li .info .title {
		font-size: 20px
	}

	.pagehistory .pagehistory-list .item {
		flex-wrap: wrap;
		flex-direction: row-reverse
	}

	.pagehistory .pagehistory-list .item .left {
		flex-direction: row-reverse;
		width: 100%;
		margin-bottom: 10px
	}

	.pagehistory .pagehistory-list .item .icon {
		background: #ccf4e0;
		color: var(--color)
	}

	.pagehistory .pagehistory-list .item .info {
		width: 100%
	}

	.pagehistory .pagehistory-list .item .info .name {
		font-size: 18px
	}

	.pagehistory .pagehistory-list .item .info::after {
		left: -40px;
		right: auto;
		border: 20px solid transparent;
		border-right: 20px solid #FFF;
		display: none
	}

	.pagehistory .pagehistory-list .item .right {
		flex-direction: row-reverse;
		flex: 1
	}

	.pagehistory .pagehistory-list .item .year {
		flex-direction: row-reverse
	}

	.pagehistory .pagehistory-list .item .year::after {
		background: linear-gradient(-90deg, var(--color), #FFF)
	}

	.pagehistory .pagehistory-list::before {
		display: none
	}

	.pageteam .pageteam-list .item {
		width: 100%
	}

	.product-cateitem {
		flex-wrap: wrap;
		padding: 0px 20px
	}

	.product-cateitem .cate-img {
		width: 100%
	}

	.product-cateitem .cate-info {
		padding: 20px 0 !important
	}

	.product-cateitem .cate-info .title {
		font-size: 22px
	}

	.product-cateitem .cate-info .text {
		margin-top: 15px
	}

	.product-cateitem .cate-info .home-more {
		margin-top: 20px
	}

	.pro-list li .pro-info {
		padding: 20px 15px
	}

	.pro-list.list1 li {
		width: 48%
	}

	.pro-list li .icon {
		opacity: 1;
		transform: none
	}

	.banner-inner .banner-title-h1 {
		display: none
	}

	.banner-inner img {
		min-height: inherit;
		height: 140px
	}

	.pro-list {
		margin-top: 1em
	}

	.pro-list.list0 li .pro-info {
		padding: 20px 15px
	}

	.pro-list.list0 li .pro-img {
		width: 46%
	}

	.pro-list li .pro-info .more {
		display: none
	}

	.protype-demo-1 .protype-sec-1 .l-wrap .protype-sec-1-left {
		width: 100%
	}

	.protype-demo-1 .protype-sec-1 .l-wrap .protype-sec-1-right {
		padding-left: 0px;
		padding-top: 20px
	}

	.protype-demo-1 .protype-sec-1 .l-wrap .protype-sec-1-right .protype-sec-1-name {
		font-size: 24px
	}

	.protype-demo-1 .protype-sec-2 .protype-sec-2-list li {
		width: 100%
	}

	.protype-demo-1 .protype-sec-title {
		font-size: 24px
	}

	.protype-demo-1 .protype-sec-3 .protype-sec-3-list li {
		width: 100%
	}

	.protype-demo-1 .protype-sec-3 .protype-sec-3-list li .protype-sec-3-title {
		font-size: 20px
	}

	.protype-demo-1 .protype-sec-4 .protype-sec-4-list li {
		width: 100%;
		margin-bottom: 1em
	}

	.protype-demo-1 .protype-sec-4 .protype-sec-4-list li img {
		aspect-ratio: 16/9;
		object-fit: cover
	}

	.protype-demo-1 .protype-sec-4 .protype-sec-4-list li .protype-sec-4-info {
		position: relative;
		left: auto;
		bottom: 0px;
		width: 100%
	}

	.protype-demo-1 .protype-sec-2 .protype-sec-2-list li .protype-sec-2-num {
		font-size: 30px
	}

	.protype-demo-1 .protype-sec-3 .protype-sec-3-list li em {
		width: 50px;
		height: 50px
	}

	.protype-demo-1 .protype-sec-1 .l-wrap .protype-sec-1-right .protype-sec-1-list li::after {
		width: 100%
	}

	.prodetails-top {
		flex-wrap: wrap
	}

	.preview-container {
		width: 100%
	}

	.singglepic {
		width: 100%;
		height: auto
	}

	.thumbnail-show {
		display: none
	}

	.pro-d-main .banner-inner img {
		display: none
	}

	.thumbnail-box .prodetails-button-next,
	.thumbnail-box .prodetails-button-prev {
		display: none
	}

	.thumbnail-box {
		margin-top: 0px;
		padding: 0px;
		border: 1px solid #EEE;
		border-radius: 5px;
		overflow: hidden;
		height: calc(100vw - 30px)
	}

	.thumbnail-box .list {
		height: 100%
	}

	.thumbnail-box .swiper-slide {
		border: none;
		background: #EEE
	}

	.thumbnail-box .swiper-slide .imgalt {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10px;
		width: 95%;
		height: 40px;
		line-height: 40px;
		background: #00000080;
		color: #FFF;
		border-radius: 30px;
		padding: 0px 20px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden
	}

	.thumbnail-box .banner-page {
		display: block
	}

	.prodetails-info {
		margin-left: 0px;
		margin-top: 15px
	}

	.prodetails-name {
		font-size: 24px
	}

	.prodetails-text {
		margin: 1em 0
	}

	.prodetails-btnlist {
		justify-content: space-between
	}

	.prodetails-btnlist>* {
		width: 48%;
		min-width: inherit;
		margin-right: 0px
	}

	.pagelink {
		flex-direction: column
	}

	.pagelink .pagelink-item {
		width: 100%;
		padding: 15px
	}

	.pagelink .pagelink-item:nth-child(2) {
		margin-top: 10px
	}

	.maylink-list li {
		width: 48%
	}

	.newslist.list1 li .info {
		padding: 15px
	}

	.newslist li .info .title {
		font-size: 18px
	}

	.newslist.list1 li .info .date {
		left: 15px
	}

	.common-page a,
	.common-page span {
		min-width: 40px;
		height: 40px
	}

	.newslist.list0 li .info {
		padding: 15px
	}

	.newslist.list0 li .img {
		width: 45%
	}

	.newslist li .info .text {
		margin: 10px 0px 10px
	}

	.newslist.list0 li .info .more {
		display: none
	}

	.newslist li .info .date {
		margin-bottom: 10px
	}

	.pagesolutions-2 {
		padding: 20px 15px
	}

	.pagesolutions-2-list li {
		width: 48%;
		padding: 20px 15px
	}

	.project-wrap {
		justify-content: space-between
	}

	.project-wrap li {
		width: 48%;
		margin-right: 0px
	}

	.project-wrap li .project-info .project-name {
		font-size: 18px
	}

	.download-list li .download-info {
		padding: 10px 0px
	}

	.contact-list .contact-item {
		width: 100%
	}

	.contact-box .contact-main .contact-h1 {
		font-size: 26px
	}

	.inquiry-title {
		font-size: 24px;
		margin-bottom: 10px
	}

	.newslist li .info .more {
		padding-top: 10px
	}

	footer .foot-item.foot-code {
		display: none
	}

	.newscontent-title {
		font-size: 24px
	}

	.protypefeedback {
		padding: 25px 0px
	}
}