@charset "utf-8";
@media (min-width: 1px) and (max-width: 768px){
	/*---------------- base ----------------*/
	.lg {
		display: none !important;
	}

	img.lg {
		display: none !important;
	}
		
	.xs {
		display: block;
	}

	img.xs {
		display: block !important;
	}
	
	.layout-padding, .xs-layout-padding {
		padding-left: 4.8%; /* 36 */
		padding-right: 4.8%; /* 36 */
	}

	.content-padding, .xs-content-padding {
		padding-left: 6.8vw; /* 51 */
		padding-right: 6.8vw; /* 51 */
	}

	.container {
		width: 86.4%; /* 648 */
	}

	.main {
		width: 82.4%; /* 618 */
		width: 84vw; /* 630 */
	}

	#wrapper {
		padding-top: 20vw; /* 150 */
	}
	
	/*---------------- header ----------------*/
	.header {
		height: 20vw; /* 150 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #3E3A39;
	}


	.header .logo {
		height: 5.3333vw; /* 40 */
	}

	.header .logo img {
		width: auto;
		height: 100%;
	}

	.header .logo img.black {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		opacity: 0;
	}

	.nav {
		display: none;
	}

	.bar {
		margin-left: 0;
	}

	.bar .lan {
		width: 4.8vw; /* 36 */
		height: 4.8vw; /* 36 */
	}

	.bar .link {
		display: none;
	}

	/* header fixed */
	.header.fixed {
		background: #3E3A39;
	}

	.header.fixed .bar .lan {
		background-image: url(../images/icon_lan.png);
	}

	.header.fixed .bar .link::before {
		background: #3E3A39;
	}

	.btn-menu {
		width: 5.3333vw; /* 40 */
		height: 4.4vw; /* 33 */
		position: relative;
		transition: all .35s ease-in-out;
		-webkit-transition: all .35s ease-in-out;
	}
	

	.btn-menu::before, .btn-menu::after {
		content: " ";
		width: 100%;
		height: 2px;
		display: block;
		margin-top: -1px;
		position: absolute;
		left: 0;
		top: 50%;
		background: #ffffff;
		opacity: 0;
		transition: all .35s ease-in-out;
		-webkit-transition: all .35s ease-in-out;
	}

	.btn-menu::before {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}

	.btn-menu::after {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	.btn-menu i {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}

	.btn-menu i::before {
		content: " ";
		width: 100%;
		height: 3.0667vw; /* 23 */
		display: block;
		box-sizing: border-box;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		position: absolute;
		left: 0;
		top: 0;
		transition: all .35s ease-in-out;
		-webkit-transition: all .35s ease-in-out;
	}

	.btn-menu i::after {
		content: " ";
		width: 4vw; /* 30 */
		height: 3.0667vw; /* 23 */
		display: block;
		box-sizing: border-box;
		border-top: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
		position: absolute;
		left: 0;
		bottom: 0;
		transition: all .35s ease-in-out;
		-webkit-transition: all .35s ease-in-out;
	}

	.btn-menu.show {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}

	.btn-menu.show::before, .btn-menu.show::after {
		opacity: 1;
	}

	.btn-menu.show i::before, .btn-menu.show i::after {
		opacity: 0;
	}

	/*---------------- menu ----------------*/
	.menu {
		width: 100%;
		height: 100%;
		padding: 20vw 0 0 0; /* 150 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1900;
		background: #3E3A39;
		transform: translate3d(-100%, 0, 0);
		-webkit-transform: translate3d(-100%, 0, 0);
		transition: all .35s ease-in-out;
		-webkit-transition: all .35s ease-in-out;
		overflow-y: auto;
	}

	.menu.show {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
	}

	.menu-scroll {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.menu ul {
		width: 100%;
		height: auto;
		float: left;
		border-top: 1px solid #ffffff;
	}

	.menu ul li {
		width: 100%;
		height: 18vw; /* 135 */
		float: left;
		padding: 0 4.8vw; /* 36 */
		border-bottom: 0.5px solid #D8D8D8;
		display: flex;
		align-items: center;
	}

	.menu ul li a {
		color: #ffffff;
		font-size: 4vw; /* 30 */
	}

	/*---------------- footer ----------------*/
	.footer {
		padding: 0 6.8vw; /* 0 51 */
	}

	.footer a {
		font-size: 3.2vw; /* 24 */
	}

	.footer a:hover {
		color: #D13433;
	}

	.ft-top {
		margin-top: 6vw; /* 45 */
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.ft-top .left {
		width: 100%;
		margin-bottom: 4.8vw; /* 36 */
	}

	.ft-top .left img {
		height: 6.8vw; /* 51 */
		margin: 0 auto;
	}

	.ft-top .right {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 150%;
	}

	.ft-top .right a {
		float: none;
		margin-left: 0;
	}

	.ft-top .right img {
		width: 4.8vw;
	}

	.copyright {
		margin-top: 1.6vw; /* 12 */
		padding: 3.2vw 0; /* 24 */
		border-top: 0.5px solid #ffffff;
		text-align: center;
	}

	.copyright, .copyright a {
		font-size: 2.4vw; /* 18 */
	}

	/*---------------- home ----------------*/
	/* home product */
	.home-product {
		padding: 10.8vw 0 20vw 0; /* 81 150 */
		display: flex;
		flex-wrap: wrap;
	}


	.home-product .left {
		width: 100%;
		order: 2;
	}

	.home-product .right {
		width: 100%;
		margin: 0 0 10.8vw 0; /* 81 */
		padding-right: 2.8vw; /* 21 */
	}

	.home-product .right .content {
		margin: 8vw 0; /* 60 */
	}

	/* home counter */
	.home-counter {
		width: 100%;
		margin-bottom: 0;
	}

	.home-counter .counter-list {
		padding: 7.6vw 6.8vw 0 6.8vw; /* 57 51 */
	}

	/* home product list */
	.home-product-list {
		width: 100%;
	}

	/* home case */
	.home-case {
		margin-top: 5.9375vw; /* 114 */
		padding: 10.8vw 6.8vw; /* 81 51 */
		background: #EBEAE9;
	}

	.home-case-info {
		margin-bottom: 4.6875vw; /* 90 */
		padding: 0;
	}

	.home-case-info .content {
		float: left;
		margin: 8vw 0 10.8vw 0; /* 60 81 */
	}

	.home-case-info .content .btn {
		margin-top: 16vw; /* 120 */
	}

	/* home about */
	.home-about-intro {
		margin: 10.8vw 0 9.2vw 0; /* 81 69 */
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.home-about-intro .left {
		width: 100%;
		margin-left: 0;
		padding: 7.2vw 4.8vw 12.8vw 4.8vw; /* 54 36 96 36 */
	}

	.home-about-intro .left .content {
		margin: 8vw 0 16vw 0; /* 60 120 */
	}

	.home-about-intro .right {
		width: 100%;
	}

	.home-about-video{
		margin-bottom: 13.6vw; /* 102 */
	}

	.home-about-video .title {
		margin-bottom: 8vw; /* 60 */
	}

	/*---------------- list ----------------*/
	/* counter list */
	.counter-list {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.counter-list .item {
		margin-bottom: 7.6vw; /* 57 */
	}

	.counter-list .item h2 {
		font-size: 4.8vw; /* 36 */
		line-height: 9.6vw; /* 72 */
	}

	.counter-list .item h2 span, .counter-list .item h2 i {
		font-size: 9.6vw; /* 72 */
		line-height: 9.6vw; /* 72 */
	}

	.counter-list .item p {
		font-size: 2.6667vw; /* 20 */
		font-weight: 500;
		line-height: 3.2vw; /* 24 */
	}


	/* products list */
	.products-list .item {
		padding-bottom: 12.8vw; /* 96 */
		flex-direction: column;
		border-top: 1px solid #D8D8D8;
	}

	.products-list .item:first-child {
		border: 0;
	}

	.products-list .item .thumb {
		width: 100%;
		order: 2;
	}

	.products-list .item .info {
		width: 100%;
		padding: 0;
		margin-top: 10.8vw; /* 81 */
		padding-bottom: 10.8vw; /* 81 */
	}

	.products-list .item .title {
		margin-bottom: 5.6vw; /* 42 */
	}


	/* case list */
	.case-list .item {
		width: 42vw; /* 315 */
		height: 44.4vw; /* 333 */
		margin: 0 calc(100% - 84vw) calc(100% - 84vw) 0; /* 17 */
	}

	.case-list .item:nth-child(2n) {
		margin-right: 0;
	}

	.case-list .item .mask {
		padding: 4.8vw; /* 36 */
	}

	/*---------------- products ----------------*/
	.products-intro {
		margin-top: 9.6vw; /* 72 */
		padding-bottom: 0;
		border: 0;
	}

	.products-intro .title {
		margin-bottom: 7.2vw; /* 54 */
	}

	.products-intro .content img {
		width: 100%; /* 702 */
		margin: 6.8vw 0 0 0; /* 51 */
	}

	.products-page-content {
		margin-top: 14vw; /* 105 */
	}

	.products-page-content .left {
		width: 100%;
		margin-right: 0; /* 120 */
	}

	.products-page-content .right {
		width: 100%;
		margin: 0 0 12vw 0; /* 90 */
	}

	.products-page-content .right .title {
		margin-bottom: 6.8vw; /* 51 */
	}

	.products-page-list {
		width: 100%;
		margin: 12vw 0 0 0; /* 90 */
	}

	.products-page-list .products-list .item:first-child {
		border-top: 1px solid #D8D8D8;
	}

	/*---------------- case ----------------*/
	.case-intro {
		padding: 10.8vw 0 0.4vw 0; /* 81 3 */
	}

	.case-intro .title {
		margin-bottom: 5.6vw; /* 42 */
	}

	.case-page-list .item {
		padding: 9.2vw 0; /* 69 */
		flex-direction: column;
		justify-content: flex-start;
	}

	.case-page-list .item .thumb {
		width: 100%;
		order: 2;
	}

	.case-page-list .item .info {
		width: 100%;
		margin-bottom: 5.6vw;	
	}

	.case-page-list .item .info .title {
		margin-bottom: 5.6vw; /* 42 */
	}

	.case-more {
		padding: 1.6vw 0 10.8vw 0; /* 12 81 */
	}

	/*---------------- about ----------------*/
	.about-intro {
		padding: 10.8vw 0; /* 81 0 */
	}

	.about-intro .title {
		margin-bottom: 5.6vw; /* 42 */
	}

	.about-intro .content img {
		width: 100%; /* 618 */
		float: right;
		margin: 0 0 2.5vw 5vw; /* 48 96 */
	}

	.history {
		padding: 0 0 12.5vw 0; /* 240 */
		background: #EBEAE9;
	}

	.history .title {
		margin: 10.8vw 0 5.6vw 0; /* 81 42 */
	}

	/* history swiper */
	.history-year {
		height: 9.6vw; /* 78 */
		margin-bottom: 5.6vw; /* 42 */
	}

	.history-year .swiper {
		width: calc(100% - 22.4vw); /* - 168 */
		margin: 0 auto;
	}

	.history-year .swiper-slide {
		font-size: 4vw; /* 30 */
		line-height: 9.6vw; /* 78 */
	}

	.history-year .swiper-slide::before {
		height: 3.2vw; /* 24 */
		margin-top: -1.6vw; /* 12 */
	}

	.history-year .swiper-slide.no-border::before {
		display: none;
	}

	.history-prev, .history-next {
		width: 4.8vw; /* 36 */
		height:  4.8vw; /* 36 */
		margin-top: -2.4vw; /* 18 */
		background-size: 1vw; /* 7.5 */
	}

	.history-prev {
		left: 3.2vw; /* 24 */
	}

	.history-next {
		right: 3.2vw; /* 24 */
	}

	.history-info .item .thumb {
		width: 100%;
	}

	.history-info .item .info {
		width: 100%;
		float: left;
	}

	.history-info .item .info h2 {
		width: 100%;
		float: left;
		margin: 5.6vw 0 4vw 0; /* 42 30 */
	}


	/*---------------- contact ----------------*/
	.contact-form {
		padding: 10.8vw 0 4vw 0; /* 81 30 */
	}

	.contact-form .title {
		margin-bottom: 6.4vw; /* 48 */
	}

	.contact-form ul {
		justify-content: flex-start;
	}

	.contact-form ul li {
		width: 100%;
		margin-bottom: 6.8vw; /* 51 */
	}


	.contact-form ul li, .contact-form ul li input, .contact-form ul li textarea {
		font-size: 3.4667vw; /* 26 */
		line-height: 8vw; /* 60 */
	}

	.contact-form ul li input {
		border-bottom: 1px solid #3E3A39;
	}

	.contact-form ul li textarea {
		height: calc(20.4vw + 3.2vw + 4px);
		padding: 1.6vw 2.4vw; /* 12 18 */
		border: 1px solid #3E3A39;
		line-height: 150%;
	}

	.contact .title {
		margin-bottom: 9.6vw; /* 72 */
	}

	.contact .main {
		padding: 10.8vw 0 5.6vw 0; /* 81 42 */
	}

	.contact-info {
		flex-direction: column;
		justify-content: flex-start;
	}

	.contact-info ul {
		width: 100%;
		margin-bottom: 5.6vw; /* 42 */
	}

	.contact-info ul li {
		margin-bottom: 0.8vw; /* 6 */
	}

	.contact-info ul li * {
		font-size: 3.4667vw; /* 26 */
		line-height: 5.6vw; /* 42 */
	}

	.contact-info ul li h3 {
		width: 18vw; /* 135 */
		margin-right: 3.2vw; /* 24 */
	}

	/*---------------- home ----------------*/




	

	
	/*---------------- footer ----------------*/



	

}