@import 'init.less';
.box-container {
    width: 15.36rem;
    margin: 0 auto;
}
.w1200 {
    width: 1200px;
    margin: 0 auto;
}
body {
    font-size: 16px;
    overflow-x: hidden;
}
.rl {
    writing-mode: tb-rl;
    writing-mode: vertical-lr;
}
@font-face {
    font-family: "light";
    src: url('../fonts/MISANS-LIGHT.TTF');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: "medium";
    src: url('../fonts/MiSans-Medium.ttf');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: "regular";
    src: url('../fonts/MISANS-REGULAR.TTF');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: "mb";
    src: url('../fonts/MontserratBold.ttf');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: "mr";
    src: url('../fonts/Montserrat-Regular.otf');
    font-weight:normal;
    font-style:normal;
}
.light {font-family: "light";}
.medium {font-family: "medium";}
.regular {font-family: "regular";}
.mb {font-family: "mb";}
.mr {font-family: "mr";}

.pic {
    font-size: 0;
    overflow: hidden;
	.block;
	width: 100%;
    img {
        width: 100%;
		.block;
        .transition(transform,0.8s);
		&.phone {.hide;}
    } 
}
:root {
	--fs14: 14px;
	--fs15: 15px;
	--fs16: 16px;
	--fs18: 18px;
	--fs20: 20px;
	--fs22: 22px;
	--fs24: 24px;
	--fs28: 28px;
	--fs30: 30px;
	--fs36: 36px;
	--fs40: 40px;
	--fs42: 42px;
	--fs48: 48px;
	--fs60: 60px;
}
.phone-nav {.hide;}

.content,.desc {
	text-align: justify;
}
.content {
	img,input[type="image"] {
		max-width: 100%;
		height: auto!important;
		.block;
		margin: 0 auto;
	}
}
.swiper-box {
	.rel;
}
.swiperbtn {
	font-size: 0;
	.flex;
	.swiper-btn {
		.rel;
		top: 0;
		transform: none;
	}
	.prev {margin-right: 0.2rem;}
}
.swiper-btn {
	.inline-block;
	.background;
	.abs;
	z-index: 10;
	top: 50%;
	.translateY(-50%);
	.transition(all,0.5s);
	width: 0.64rem;
	height: 0.64rem;
	&.prev {
		background-image: url(../img/prev.png);
		&:hover,&.white {
			background-image: url(../img/prev2.png);
		}
		&.white {
			&:hover {background-image: url(../img/prev3.png);}
		}
	}
	&.next {
		background-image: url(../img/next.png);
		&:hover,&.white {
			background-image: url(../img/next2.png);
		}
		&.white:hover {background-image: url(../img/next3.png);}
	}
}

.border .header-wrapper {
	position: sticky;
	border-bottom: 1px solid #f7f8f9;
}
.sticky .header-wrapper {position: sticky;}
.sticky .header-wrapper,
.border .header-wrapper,
.header-wrapper.shadow,.header-wrapper.on {
	background-color: #fff;
	.logo-box {
		.init {.hide}
		.on {.block}
	}
	.pc-nav-box {
		li.on>a,li:hover>a {
			&:before {.scale(1)}
		}
		li > a {color: #000;&:before {background-color: @color;}}
	}
	.search {background-image: url(../img/search2.png);}
	.lang .caption {color: #000;background-image: url(../img/earth2.png);}
	.nav-icon span {background-color: #444}
}


.header-wrapper {
	.fixed;
	left: 0;
	top: 0;
	z-index: 30;
	width: 100%;
	.transition(all,0.3s);
	&.on,&.shadow {
		.box-shadow(30px);
	}
	.box {
		.flex;
		.flex-between;
		padding: 0 0.5rem;
		height: 1rem;
		align-items: center;
	}
	.logo-box {
		width: 1.79rem;
		a,img {
			width: 100%;
		}
		a,.init {
			.block;
		}
		.on {.hide;}
	}
	.other-box {
		.flex;
		align-items: center;
	}
	.lang {
		.rel;
		width: 0.8rem;
		.txt-center;
		margin-right: 0.2rem;
		&:hover .list {.block;animation: fadeIn 0.35s ease;}
		.caption {
			line-height: 0.4rem;
			background-image: url(../img/earth.png);
			background-position: left center;
			background-size: 0.2rem;
			background-repeat: no-repeat;
			font-size: var(--fs16);
			color: #fff;
			.upper;
			.medium;
		}
		.list {
			.abs;
			left: 50%;
			top: 100%;
			z-index: 10;
			width: 1.4rem;
			margin-left: -0.7rem;
			background-color: #fff;
			.hide;
			padding-top: 0.1rem;
			box-shadow: 0 14px 30px rgba(0, 0, 0, 0.03);
			a {
				.block;
				line-height: 0.3rem;
				.txt-center;
				font-size: var(--fs16);
				.transition(color,0.35s);
				padding-bottom: 0.1rem;
				margin-bottom: 0.1rem;
				border-bottom: 1px solid #eaeaea;
				.medium;
				&:hover {color: @color}
				&:last-child {border-bottom: none;margin-bottom: 0;}
			}
		}
	}
	.search {
		width: 20px;
		height: 20px;
		.background;
		cursor: pointer;
		.transition(all,0.35s);
		background-image: url(../img/search.png);
		&.on {
			background-image: url(../img/search2.png);
		}
	}
}

.pc-nav-box {
	flex:1;
	margin: 0 0.6rem;
	ul {
		list-style: none;
		.flex;
		justify-content: center;
	}
	li {
		.rel;
		margin-right: 0.72rem;
		&:last-child {margin-right: 0;}
		&:hover,&.on {
			>a:before {.scale(1)}
		}
		&:hover .navs {.block;animation: fadeIn 0.35s ease;}
		> a {
			.rel;
			font-size: var(--fs16);
			color: #fff;
			height: 1rem;
			line-height: 1rem;
			.medium;
			&:before {
				content: "";
				width: 100%;
				height: 2px;
				background-color: #fff;
				.scale(0);
				.abs;
				left: 0;
				bottom: 0;
				z-index: 10;
				.transition(all,0.35s);
			}
		}
	}
	a {
		.block;
		.transition(color,0.3s);
	}
	.navs {
		.abs;
		left: 50%;
		top: 100%;
		z-index: 10;
		width: 2rem;
		margin-left: -1rem;
		background-color: #fff;
		.hide;
		padding-top: 0.1rem;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.03);
		a {
			.block;
			line-height: 0.3rem;
			.txt-center;
			font-size: var(--fs16);
			.transition(color,0.35s);
			padding-bottom: 0.1rem;
			margin-bottom: 0.1rem;
			border-bottom: 1px solid #eaeaea;
			&:hover {color: @color}
			&:last-child {border-bottom: none;margin-bottom: 0;}
		}
	}
}
.search-form {
    width: 100%;
    .fixed;
    left: 0;
    top: 1rem;
    background: #fff;
    z-index: 30;
    padding: 0.7rem 0;
    .hide;
    border-top: 1px solid #f7f8f9;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.03);
    .w960 {
        .rel;
        .flex;
		width: 9.6rem;
		margin: 0 auto;
        align-items: center;
        border-bottom: 1px solid #f7f8f9;
    }
    .keywords {
        flex: 1;
        overflow: hidden; 
        line-height: 0.56rem;
        margin-left: 20px;
        font-size: 15px;
        color: #999;
    }
    .input(#999,15px);
    .close {
        .abs;
        right: 0;
        top: 50%;
        z-index: 10;
        color: #999;
        margin-top: -0.15rem;
        width: 0.2rem;
        height: 0.2rem;
        background: url(../img/close.png) no-repeat;
        background-size: contain;
        .transition(transform,0.3s);
        &:hover {
            color: @color;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
        }
    }
}
@media screen and (min-width: 1004px) {
	.header-wrapper {
		&:hover {
			background-color: #fff;
			.logo-box {
				.init {.hide}
				.on {.block;}
			}
			.pc-nav-box {
				li.on>a,li:hover>a {
					color:@color;
					&:before {.scale(1)}
				}
				li > a {color: #333;&:before {background-color: @color;}}
			}
			.search {
				background-image: url(../img/search2.png);
			}
			.lang .caption {color: #333;background-image: url(../img/earth2.png);}
		}
	}
}
@media screen and (max-width: 1600px) {
	.box-container {width: 14rem;}
	.header-wrapper .box {height: 0.94rem;}
	.pc-nav-box li > a {height: 0.94rem;line-height: 0.94rem;}
	.search-form {top: 0.94rem;}
}
@media screen and (max-width: 1440px) {
	.header-wrapper .box {height: 0.9rem;}
	.pc-nav-box li > a {height: 0.9rem;line-height: 0.9rem;}
	.header-wrapper .search {width: 20px;height: 20px;}
	.search-form {top: 0.9rem;}
}
@media screen and (max-width: 1366px) {
	

}

@media screen and (max-width: 1004px) {
	.box-container,.w1200 {
	    width: 100%;
	    padding: 0 0.3rem;
	}
	.swiper-btn {
		width: 0.6rem;
		height: 0.6rem;
	}
	.header-wrapper {
		.box {
			padding: 0 0.3rem;
			height: 1.2rem;
		}
		.logo-box {
			width: 2rem;
		}
		.lang {
			width: auto;
			margin-right: 0;
			.caption {
				line-height: 0.48rem;
				background-size: 0.3rem;
				padding-left: 0.46rem;
				font-size: var(--fs15);
			}
			.list {
				width: 1.6rem;
				margin-left: -0.8rem;
				a {
					line-height: 0.44rem;
					font-size: var(--fs14);
					padding-bottom: 0.1rem;
					margin-bottom: 0.1rem;
				}
			}
		}
		.search {
			width: 16px;
			height: 16px;
			margin: 0 0.4rem;
		}
	}
	.pc-nav-box {.hide;}
	.nav-icon {
	    font-size: 0;
	    width: 0.48rem;
	    height: 0.48rem;
	    .rel;
	    &.on span {
	        &:nth-child(1) {
	            transform: rotate(45deg);
	            margin: 0;
	            transition: margin 180ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 270ms cubic-bezier(0.215, 0.61, 0.355, 1) 180ms, -webkit-transform 270ms cubic-bezier(0.215, 0.61, 0.355, 1) 180ms;
	        }
	        &:nth-child(2) {opacity: 0;}
	        &:nth-child(3) {
	            transform: rotate(-45deg);
	            margin: 0;
	            transition: margin 180ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 270ms cubic-bezier(0.215, 0.61, 0.355, 1) 180ms, -webkit-transform 270ms cubic-bezier(0.215, 0.61, 0.355, 1) 180ms;
	        }
	    }
	    span {
	        .inline-block;
	        width: 100%;
	        height: 0.04rem;
			background-color: #fff;
	        .abs;
	        left: 0;
	        top: 0.2rem;
	        z-index: 10;
			border-radius: 2px;
	        transform-origin: center center;
	        transition: margin 140ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 230ms, transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, -webkit-transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
	        &:nth-child(1) {
	            margin-top: -6px;
	        }
	        &:nth-child(2) {
	            margin-top: 0;
	        }
	        &:nth-child(3) {
	            margin-top: 6px;
	        }
	    }
	}
	.phone-nav {
		width: 100%;
		height: calc(~"100% - 1.2rem");
		position: fixed;
		right: 0;
		top: 1.2rem;
		background: #fff;
		z-index: 501;
		overflow: auto;
		border-top: 1px solid #f3f3f3;
		ul {
		    width: 100%;
		    margin: 0 auto;
		    .rel;
			height: 100%;
		    overflow-y: auto;
		    overflow-x: hidden;
		    .transition(max-height,0.8s);
		    &::-webkit-scrollbar {
		        width: 4px;
		    }
		    &::-webkit-scrollbar-track {
		        background-color: #eaeaea;
		    }
		    &::-webkit-scrollbar-thumb {
		        background-color: @color;
		    }
		    li {
		        .rel;
		        &.active .cat {
		            color: @color;
					.bold;
		            &:before {
		                transform: rotate(90deg);
		                -webkit-transform: rotate(90deg);
		                -moz-transform: rotate(90deg);
		                -ms-transform: rotate(90deg);
		                -o-transform: rotate(90deg);
		            } 
		        }
		        > a {
		            .rel;
		            .block;
		            font-size: 0.3rem;
		            color: #333;
		            line-height: 0.96rem;
		            padding: 0 0.3rem;
		            border-bottom: 1px solid #f3f3f3;
		        }
		        .cat {
		            &:before,&:after {
		                content: "";
		                .inline-block;
		                background: @color;
		                .abs;
		                z-index: 10;
		            }
		            &:before {
		                width: 0.06rem;
		                height: 0.26rem;
		                right: 0.4rem;
		                top: 0.36rem;
		                .transition(transform,0.3s);
		            }
		            &:after {
		                width: 0.26rem;
		                height: 0.06rem;
		                right: 0.3rem;
		                top: 0.46rem;
		            }
		        }
		        &.on {
		            > a {
						.bold;
		                color:@color;
		            }
		        }
		        .navs {
		            background: #f9f9f9;
		            width: 100%;
		            .hide;
		            a {
		                font-size: 14px;
		                .block;
		                color: #666;
		                padding-left: 0;
		                line-height: 1rem;
		                padding: 0 0.3rem;
		                border-bottom: 1px solid #f3f3f3;
		                &:last-child {
		                    margin-bottom: 0;
		                    border-bottom: none;
		                }
		            }
		        }
		    }
		}
	}
	.search-form {
	    top: 1.2rem;
	    padding: 0.24rem 0;
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.05);
		img {width: 14px;}
		.w960 {width: 100%;padding: 0 0.3rem;}
	    .keywords {
	        line-height: 40px;
	        margin-left: 15px;
	        font-size: 14px;
			padding-right: 20px;
	    }
	    .input(#999,14px);
	    .close {
	        margin-top: -10px;
	        width: 16px;
	        height: 16px;
			right: 15px;
	    }
		.search-btn img {width: 16px;}
	}
	
}


.footer-wrapper {
	background: #000;
	padding: 0.9rem 0 0.32rem;
	.box-1,.box-2 {
		.flex;
		.flex-between;
	}
	.contact-box {
		ul {
			list-style: none;
			margin-top: 0.2rem;
		}
		li {
			font-size: var(--fs14);
			color: #666;
			line-height: 24px;
		}
	}
	.logo {
		.block;
		width: 1.38rem;
		margin-bottom: 0.28rem;
		img {.block;width: 100%;}
	}
	.caption {
		font-size: var(--fs16);
		color: #fff;
		line-height: 24px;
		margin-bottom: 2px;
	}
	.tel {
		.inline-block;
		font-size: var(--fs18);
		color: #fff;
		line-height: 0.3rem;
		.mr;
	}
	.box-2 {
		margin-top: 0.96rem;
		align-items: center;
	}
	.copyright,.copyright a {
		font-size: var(--fs14);
		color: #666;
	}
	.copyright {
		line-height: 24px;
		a {
			.transition(color,0.3s);
			&:hover {color: #fff;}
		}
	}
}
.footer-nav-box {
	width: 66.73%;
	ul {
		.flex;
		.flex-between;
		list-style-type: none;
	}
	li {
		> a {
			font-size: var(--fs16);
			color: #fff;
			&:hover {color: @color}
		}
	}
	a {
		.block;
		line-height: 0.3rem;
		.transition(color,0.3s);
	}
	.navs {
		margin-top: 0.15rem;
		a {
			font-size: var(--fs14);
			color: #666;
			&:hover {color: #fff;}
		}
	}
}
.share {
	font-size: 0;
	a {
		.inline-block;
		width: 0.5rem;
		margin-right: 0.15rem;
		&:last-child {margin-right: 0;}
		&:hover {
			.init {.hide;}
			.on {.block;}
		}
		.init {
			.block;
		}
		.on {.hide;}
	}
}

@media screen and (max-width: 1600px) {
	.footer-wrapper {padding-top: 0.8rem;}
	.footer-wrapper .box-2 {margin-top: 0.86rem;}

}
@media screen and (max-width: 1440px) {
	.footer-wrapper {padding-top: 0.7rem;}
	.footer-wrapper .box-2 {margin-top: 0.76rem;}
	
}
@media screen and (max-width: 1366px) {
	.footer-wrapper {padding-top: 0.6rem;}
	.footer-wrapper .box-2 {margin-top: 0.66rem;}

}

@media screen and (max-width: 1004px) {
	.footer-wrapper {
		padding: 0.6rem 0 0.3rem;
		.box-1,.box-2 {
			.block;
		}
		.contact-box {
			ul {
				margin-top: 0.24rem;
			}
			li {
				line-height: 0.44rem;
			}
		}
		.logo {
			width: 1.8rem;
			margin-bottom: 0.4rem;
		}
		.caption {
			line-height: 0.44rem;
		}
		.tel {
			line-height: 0.48rem;
		}
		.box-2 {
			margin-top: 0.6rem;
		}
		.copyright {
			line-height: 0.44rem;
			margin-top: 0.3rem;
		}
	}
	.footer-nav-box {.hide}
	.share {
		a {
			width: 0.6rem;
			margin-right: 0.2rem;
		}
	}
	
}
.ball {
	.abs;
	right: -5rem;
	top: -2rem;
	width: 11.4rem;
	height: 12rem;
	transform: rotate(-28deg);
	background: url(../img/ball.png) no-repeat center center;
	background-size: 100%;
	z-index: -1;
	-webkit-animation: circle_1 8s infinite alternate-reverse;
	animation: circle_1 8s infinite alternate-reverse;
}
@keyframes circle_1 {
	0% {
		-webkit-transform:translate3d(3vw, 0, 0) scale3d(0.9, 0.75, 1) rotateX(0) rotateY(0) rotateZ(-180deg) skew(45deg, -30deg);
		-moz-transform:translate3d(3vw, 0, 0) scale3d(0.9, 0.75, 1) rotateX(0) rotateY(0) rotateZ(-180deg) skew(45deg, -30deg);
		-ms-transform:translate3d(3vw, 0, 0) scale3d(0.9, 0.75, 1) rotateX(0) rotateY(0) rotateZ(-180deg) skew(45deg, -30deg);
		transform:translate3d(3vw, 0, 0) scale3d(0.9, 0.75, 1) rotateX(0) rotateY(0) rotateZ(-180deg) skew(45deg, -30deg);
		will-change: transform;
		transform-style: preserve-3d;
	  }
	  100% {
		-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(10deg, -10deg);
		-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(10deg, -10deg);
		-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(10deg, -10deg);
		transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(10deg, -10deg);
	  }
}
.index-box-4,
.index-box-1,
.index-box-2 {.rel;z-index: 10;}
.index-box-3 {
	.ball {
		right: auto;
		left: -7rem;
		animation-duration: 6s;
		-webkit-animation-duration: 6s;
	}
}
.index-box-4 {
	.ball {
		right: -6rem;
		bottom: -3rem;
		top: auto;
	}
}
.index-box-5 {
	overflow: hidden;
	.ball {
		right: auto;
		left: -9rem;
		top: auto;
		bottom: -4rem;
		animation-duration: 6s;
		-webkit-animation-duration: 6s;
	}
}
.index-banner-wrapper {
    .index-banner-swiper {
        .swiper-slide-active {
        	.box-container {
        		.after;
        		.translateY(0);
        	}
        	img {
        		.scale(1.1);
        	}
        }
        .box-container {
            .before;
            .translateY(120px);
            .transition(all,1.5s);
            transition-delay: 0.4s;
            transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
        }
    }
    .swiper-slide {
		overflow: hidden;
        a {
            .block;
        }
        img {
            .block;
            width: 100%;
            .transition(transform,6s);
            &.phone {.hide;}
        }
    }
	.info {
		.abs;
		left: 0;
		top: 0;
		z-index: 10;
		.flex;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	h3 {
		font-size: var(--fs48);
		color: #fff;line-height: 0.6rem;
		.light;
		span {
			.inline-block;
			margin-left: 1.04rem;
		}
	}
	.swiper-pagination {
	    .block;
	    bottom: 0.3rem;
	    font-size: 0;
	    .swiper-pagination-bullet {
	        opacity: 1;
	        background: #fff;
	        margin: 0 7px;
	        width: 8px;
	        height: 8px;
	        border: none;
	        .transition(background,0.3s);
			&:link,
			&:visited,
			&:active,
			&:focus {outline: none;}
	        &.swiper-pagination-bullet-active {
	            background: @color;
	        }
	    }
	}
}

.breadcrumb {
	font-size: var(--fs14);
	color: #999;
	line-height: 0.3rem;
	margin-bottom: 0.2rem;
}
.goodsinfo-wrapper {
	padding-top: 0.7rem;
	.main {
		.rel;z-index: 10;
		.flex;
		.flex-between;
		padding-top: 0.92rem;
		border-top: 2px solid #000;
		padding-right: 1.2rem;
		.swiper-box {
			width: 35.87%;
			.swiper-container {padding-bottom: 0.44rem;}
			.swiper-pagination {
			    .block;
			    bottom: 0;
			    font-size: 0;
			    .swiper-pagination-bullet {
			        opacity: 1;
			        background: #d0d1d5;
			        margin: 0 0.1rem;
			        width: 8px;
			        height: 8px;
			        border: none;
			        .transition(background,0.3s);
					&:link,
					&:visited,
					&:active,
					&:focus {outline: none;}
			        &.swiper-pagination-bullet-active {
			            background: @color;
			        }
			    }
			}
			.swiper-slide:hover img {.scale(1.05)}
		}
	}
	.box-1 {
		margin-bottom: 0.2rem;
		h1 {
			font-size: var(--fs60);
			color: #000;
			line-height: 0.72rem;
			.medium;
			padding-right: 0.2rem;
		}
		.desc,.desc li {
			font-size: var(--fs16);
			color: #666;
			line-height: 0.36rem;
		}
		.desc {
			margin: 0.25rem auto 0.78rem;
			li {
				.rel;
				list-style: none;
				padding-left: 0.18rem;
				&:before {
					content: "";
					width: 0.08rem;
					height: 0.08rem;
					background: url(../img/icon.png) no-repeat left center;
					background-size: 100%;
					.abs;
					left: 0;
					top: 0.14rem;
					z-index: 1;
				}
			}
		}
		.index-title {
			color: #f4f5f8;
			letter-spacing: 0.12rem;
			margin-top: -0.6rem;
			margin-left: -0.1rem;
			.transition(all,1s);
			.translateX(-2rem);
		}
	}
	.info-box {
		width: 48%;
	}
	.email {
		.inline-block;
		min-width: 2.7rem;
		line-height: 0.48rem;
		.txt-center;
		background-color: #fff;
		border-radius: 24px;
		border: solid 2px @color;
		padding: 0 0.24rem;
		font-size: var(--fs16);
		color: @color;
		.transition(all,0.35s);
		.medium;
		&:hover {
			color: #fff;
			background-color: @color;
			i {
				background-image: url(../img/evl2.png);
			}
		}
		i {
			.inline-block;
			width: 0.21rem;
			height: 0.16rem;
			margin-right: 0.1rem;
			background-image: url(../img/evl.png);
			.background;
			.middle;
			.rel;
			top: -1px;
			.transition(background,0.35s);
		}
	}
	.box-2 {
		.box-container {
			padding-top: 1.52rem;
			border-top: 2px solid #000;
		}
		.swiper-slide:hover {
			.icon {transform: rotateY(180deg);}
		}
		.icon {
			width: 1.1rem;
			margin: 0 auto;
			.block;
			.transition(transform,0.35s);
		}
		.info {
			margin-top: 0.27rem;
			.txt-center;
		}
		h4 {
			font-size: var(--fs24);
			color: #000;
			line-height: 0.3rem;
		}
		p {
			font-size: var(--fs16);
			color: #666;
			line-height: 0.3rem;
			margin-top: 0.05rem;
		}
		.swiper-btn {
			width: 0.18rem;
			height: 0.34rem;
			transform: none;
			top: 0.38rem;
		}
		.prev {
			left: 0;
			background-image: url(../img/iprev.png);
			&:hover {background-image: url(../img/iprev2.png);}
		}
		.next {
			right: 0;
			background-image: url(../img/inext.png);
			&:hover {background-image: url(../img/inext2.png);}
		}
	}
	.box-3 {
		height: 32rem;
		.list {
			position: sticky;
			top: calc(~"(100vh - 7rem) / 2");
			// .flex;
			// .flex-wrap;
			height: 8rem;
			overflow: hidden;
		}
		.swiper-wrapper {.flex-wrap}
		.swiper-slide {
			.rel;
			width: 100%;
			&:nth-child(3),
			&:nth-child(4) {
				.pic {
					margin-left: auto;
					margin-right: 0;
				}
				.swiper-pagination {
					right: auto;
					left: -0.88rem;
				}
			}
			&.on .bg,
			&.swiper-slide-active .bg {
				.after;
				&:before {.translateX(-100%)}
				&:after {.translateX(100%)}
			}
			&.on .box-container {z-index: 10;}
			.swiper-container {z-index: 10;}
			.box-container {
				.rel;z-index: -1;.flex;align-items: center;
				height: 8rem;
				.transition(all,1s);
			}
			.bg {
				width: 100%;
				height: 100%;.abs;
				left: 0;
				bottom: 0;
				z-index: -1;
				background-position: center center;
				background-size: cover;
				background-repeat: no-repeat;
				.before;
				overflow: hidden;
				.transition(all,0.48s);
				&:before,&:after {
					content: "";
					width: 100%;
					height: 50%;
					background-color: #fff;
					.abs;
					left: 0;
					z-index: 0;
					.transition(all,1.5s);
				}
				&:before {
					top: 0;
					left: 0;
				}
				&:after {
					right: 0;
					bottom: 0;
				}
				
			}
		}
		.pic {
			width: 36.98%;
		}
		.infos .box-container {.rel;z-index: 1;}
		.info {
			width: 28.02%;
			.abs;
			top: 50%;
			z-index: 1;
			// .translateY(-50%);
			transform: translate(1rem,-50%);
			.before;
			.transition(all,0.48s);
			right: calc(~"(100% - 15.36rem) / 2");
			&.on {
				.after;
				transform: translate(0,-50%);
			}
			&.white {
				.desc,
				h4 {color: #fff;}
			}
			&:nth-child(2) {
				right: auto;
				left: calc(~"(100% - 15.36rem) / 2 + 1.64rem");
			}
			h4 {
				font-size: var(--fs36);
				color: #000;
				line-height: 0.48rem;
				.bold;
				.transition(color,0.3s);
			}
			.desc {
				font-size: var(--fs16);
				color: #000;
				line-height: 0.3rem;
				.transition(color,0.3s);
				margin-top: 0.27rem;
			}
		}
		.swiper-slide {
			.abs;
			left: 0;top: 0;z-index: -1;
			height: auto;
			&.on {z-index: 1;}
			&.on .pic,
			&.swiper-slide-active .pic {.after;} 
			// .pic {.before;}
		}
		.swiper-pagination {
		    .block;
			right: -0.88rem;
		    bottom: auto;
			top: 50%;.translateY(-50%);
			z-index: 1;
		    font-size: 0;
			width: auto;
		    .swiper-pagination-bullet {
				.block;
		        opacity: 1;
		        background: #d0d1d5;
		        margin: 0.2rem 0;
		        width: 8px;
		        height: 8px;
		        border: none;
		        .transition(background,0.3s);
				&:link,
				&:visited,
				&:active,
				&:focus {outline: none;}
		        &.swiper-pagination-bullet-active {
		            background: @color;
		        }
		    }
		}
		
	}
	.border {
		border-top: 2px solid #000;
	}
	.box-4 {
		.box-container {
			.flex;
			.flex-between;
			> div {padding-top: 1.2rem;}
		}
		.compare-box {
			padding-right: 1rem;
		}
		.download-box {
			padding-left: 1rem;
			border-left: 1px solid #000;
		}
		.inner {
			.rel;
		}
	}
	.caption {
		font-size: 0.42rem;
		color: #000;
		line-height: 0.48rem;
		.bold;
		margin-bottom: 0.34rem;
	}
	.box-5 {
		margin-top: 1.64rem;
		.swiper-slide {
			width: 31.9%;
			margin-right: 2.15%;
			.txt-center;
			&:last-child {margin-right: 0;}
			&:hover {
				.pic img {.scale(1.05)}
				&:before {background-color: @color;}
				.icon {background-color: @color;}
				h4 {color: @color;}
			}
			&:before {
				content: "";
				width: 2px;
				.abs;
				right: 0;
				bottom: 0;
				height: 100%;
				.transition(all,0.3s);
				z-index: 1;
				background-color: #000;
			}
			a {
				.rel;
				.block;
				padding:0.6rem 8px 1.06rem;
			}
		}
		h4 {
			font-size: var(--fs24);
			color: #000;
			line-height: 0.3rem;
			padding: 0 0.6rem;
			margin-top: 0.68rem;
			.transition(color,0.3s);
		}
		.icon {
			width: 0.5rem;
			height: 0.5rem;
			.abs;
			right: 0;
			bottom: 0;
			z-index: 1;
			background: #000 url(../img/i-right3.png) no-repeat center center;
			background-size: 7px;
			.transition(all,0.3s);
			
		}
	}
	.box-6 {
		ul {
			.flex;
			.flex-wrap;
			.flex-between;
			list-style: none;
		}
		li {
			width: 48.7%;
			&:hover {
				.pic img {.scale(1.05)}
				h4 {color: @color}
				p:after {transform: rotate(45deg)}
			}
		}
		.info {
			.flex;
			.flex-between;
			padding-left: 0.26rem;
			border-left: 2px solid #000;
			padding-top: 0.22rem;
		}
		h4 {
			font-size: var(--fs20);
			color: #000;
			.bold;
			line-height: 0.3rem;
			width: 48.66%;
			.transition(color,0.3s);
		}
		p {
			.rel;
			font-size: var(--fs16);
			line-height: 0.3rem;
			color: #000;
			width: 40.64%;
			&:after {
				.block;
				content: "";
				width: 0.2rem;
				height: 0.2rem;
				background: url(../img/right.png) no-repeat center center;
				background-size: 100%;
				margin-top: 0.67rem;
				.transition(transform,0.3s);
			}
		}
	}
	.form {
		.flex;
		.flex-wrap;
		.flex-between;
	}
	.group {
		.rel;
		width: 32.42%;
		margin-right: 1.37%;
		margin-top: 1.37%;
		&.max {width: 100%;margin-right: 0;}
		&:nth-child(-n+3) {margin-top: 0;}
		&:last-child,
		&:nth-child(3n) {margin-right: 0;}
		.text,.msg {
			width: 100%;
			height: 0.65rem;
			line-height: 0.63rem;
			background-color: #fff;
			border-radius: 5px;
			border: solid 1px #000;
			padding-right: 0.28rem;
			padding-left: 0.28rem;
			font-size: var(--fs16);
			color: #000;
			.transition(all,0.3s);
			&:focus {border-color: @color}
		}
		.input(#666,var(--fs16));
		&.pl .text {
			padding-left: 0.42rem;
		}
		.msg {
			resize: none;
			height: 1.15rem;
			line-height: 0.3rem;
			padding-top: 0.15rem;
			padding-bottom: 0.15rem;
		}
		i {
			font-size: var(--fs16);
			color: @color;
			.inline-block;
			.abs;
			left: 0.28rem;
			top: 50%;
			line-height: 0.3rem;
			margin-top: -0.15rem;
			z-index: 1;
		}
	}
	.submit {
		.block;
		margin: 0.5rem auto 0;
		width: 1.7rem;
		line-height: 0.56rem;
		background-color: @color;
		border-radius: 28px;
		.txt-center;
		color: #fff;
		font-size: var(--fs16);
		.transition(all,0.35s);
		&:hover {
			box-shadow: 0 2px 30px rgba(40, 65, 121, 0.5);
		}
	}
}
.download-box {
	width: 33.2%;
	li {
		height: 0.9rem;
		.rel;
		.flex;
		align-items: center;
		border: solid 1px #ebebeb;
		margin-bottom: 0.2rem;
		.transition(all,0.3s);
		background-image: url(../img/download.png);
		background-repeat: no-repeat;
		background-position: right 0.2rem center;
		background-size: 0.16rem;
		&:last-child {margin-bottom: 0;}
		&:hover {
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.13);
			&:after {
				width: 100%;
			}
			a {
				color: @color;
			}
		}
		&:after {
			content: "";
			width: 0;
			height: 2px;
			background-color: @color;
			.transition(all,0.35s);
			.abs;
			left: 0;
			bottom: 0;
			z-index: 1;
		}
		.icon {
			.rel;
			width: 0.87rem;
			height: 100%;
			background: url(../img/pdf.png) no-repeat center center;
			background-size: 0.27rem;
			margin-right: 0.3rem;
			&:after {
				content: "";
				width: 1px;
				height: 0.3rem;
				background-color: #ebebeb;
				.abs;
				right: -1px;
				top: 50%;margin-top: -0.15rem;
				z-index: 10;
			}
		}
		a {
			.rel;
			font-size: var(--fs18);
			color: #000;
			.transition(color,0.3s);
			.morewords(2);
			line-height: 0.3rem;
			flex: 1;
			.medium;
			max-height: .6rem;padding-right: 0.6rem;
			
		}
	}
}
.compare-box {
	width: 66.8%;
	.caption {.abs;left: 0;
	top: 0;z-index: 1;}
	ul {
		list-style: none;
		border-top: 1px solid #e1e1e1;
	}
	li {
		font-size: var(--fs16);
		color: #000;
		height: 0.5rem;
		line-height: 0.49rem;
		justify-content: center;
		border-bottom: 1px solid #e1e1e1;
		&:first-child {.bold;}
	}
	.result-box {
		.flex;
		margin-top: 0.46rem;
		table {
			width: 100%;
			tr:first-child td {.bold;}
			td {
				width: 26.26%;
				border-top: 1px solid #cccfd5;
				font-size: var(--fs16);
				color: #000;
				height: 0.5rem;
				line-height: 0.26rem;
				justify-content: center;
				border-bottom: 1px solid #e1e1e1;
				&:first-child {
					width: 21.21%;
				}
				&:not(:first-child) {
					.txt-center;
					max-width: 2.34rem;
					padding-left: 0.2rem;
					padding-right: 0.2rem;
					border-left: 1px solid #cccfd5;
				}
			}
		}
	}
	.left {
		width: 21.21%;
	}
	.right {
		width: 78.79%;
		.flex;
		.item {
			width: calc(~"100% / 3");
			border-left: 1px solid #cccfd5;
		}
		li {
			.txt-center;
		}
	}
}
.tab-box {
	.rel;
	.flex;
	justify-content: flex-end;
	z-index: 10;
	.item {
		.rel;
		width: 2.1rem;
		margin-right: 0.26rem;
		&:last-child {margin-right: 0;}
		&.on {
			> a {
				color: @color;
				&:after {transform: rotateX(180deg)}
			}
		}
		> a {
			.rel;
			.block;
			width: 100%;
			line-height: 0.44rem;
			background-color: #fff;
			border-radius: 24px;
			border: solid 2px @color;
			padding: 0 0.46rem 0 0.3rem;
			font-size: var(--fs16);
			color: #000;
			.bold;
			z-index: 10;
			.txt;
			.transition(color,0.3s);
			&:after {
				content: "";
				width: 0.15rem;
				height: 100%;
				.abs;
				top: 0;
				z-index: 1;
				right: 0.23rem;
				background: url(../img/i-down.png) no-repeat center center;
				background-size: 100%;
				// .transition(transform,0.3s);
			}
		}
		.list {
			width: 100%;
			.abs;
			left: 0;
			top: 100%;
			background:#fff;
			border: 1px solid @color;
			overflow-y: auto;
			max-height: 2.35rem;
			z-index: 9;
			.hide;
			&::-webkit-scrollbar {
			    width: 2px;
			    background-color: #ccc;
			}
			&::-webkit-scrollbar-thumb {
			    background-color: @color;
			}
			a {
				.block;
				padding: 0.1rem 0.3rem;
				line-height: 0.26rem;
				color: #000;
				.medium;
				.transition(all,0.3s);
				border-bottom: 1px solid #ccc;
				&:last-child {border-bottom: none;}
				&:hover {
					color: #fff;
					background-color: @color;
				}
			}
		}
	}
}

@media screen and (min-width: 1004px) {
	.goodsinfo-wrapper .box-1 .index-title.animated i {
		animation: wordAni2 2s ease forwards;
	}
}
@media screen and (max-width: 1600px) {
	
}
@media screen and (max-width: 1440px) {
	.index-banner-wrapper h3 {line-height: 0.56rem;}
	.index-banner-wrapper h3 span {margin-left: 0.9rem;}
	
}
@media screen and (max-width: 1366px) {
	

}

@media screen and (max-width: 1004px) {
	.index-banner-wrapper {
	    .swiper-slide {
	        img {
	            .hide;
	            &.phone {.block;}
	        }
	    }
		.info {padding-top: 0.6rem;}
		h3 {
			font-size: var(--fs30);
			line-height: 0.56rem;
			span {
				margin-left: 0.8rem;
			}
		}
		.swiper-pagination {
		    .swiper-pagination-bullet {
		        margin: 0 5px;
		        width: 6px;
		        height: 6px;
		    }
		}
	}
	.ball {
		right: -4rem;
		top: 0;
		width: 6rem;
		height: 6rem;
	}
	.index-box-1 {
		// border-bottom: 2px solid #000;
		&.animated:after {.scale(1)}
		&:after {
			content: "";
			width: calc(~"100% - 0.6rem");
			.scale(0.5);
			height: 2px;
			background: #000;
			.abs;
			left: 0.3rem;
			bottom: 0;
			z-index: 1;
			.transition(all,2s);
		}
	}
	.index-box-2.linebg .box-container:after {.hide}
	.index-box-3 {
		.ball {
			left: -4rem;
		}
	}
	.index-box-4 {
		.ball {
			right: -3rem;
			bottom: 0;
		}
	}
	.index-box-5 {
		.ball {
			left: -3rem;
			bottom: -3rem;
		}
	}
	.index-box-4,
	.index-box-1,
	.index-box-2 {overflow: hidden;}
	
}


.index-title {
	font-size: var(--fs60);
	color: #000;
	.bold;
	line-height: 0.7rem;
	.medium;
	margin-bottom: 0.52rem;
	&.center {.txt-center}
	&.ani {
		margin-bottom: 0;
		font-size: 1.2rem;
		letter-spacing: 0.24rem;
		.upper;
		.mb;
		margin-left: 0.36rem;
		line-height: 1.2rem;
		white-space: nowrap;
		&.animated i {
			animation: wordAni 2s ease forwards;
		}
		i {
			.inline-block;
			.before;
		}
	}
}
.index-more {
	.inline-block;
	min-width: 1.14rem;
	height: 0.48rem;
	line-height: 0.44rem;
	background-color: #fff;
	border-radius: 24px;
	border: solid 2px @color;
	.txt-center;
	font-size: var(--fs16);
	padding: 0 0.2rem;
	color: @color;
	.medium;
	.transition(all,0.35s);
	&:hover {
		box-shadow: 0 2px 30px rgba(40, 65, 121, 0.4);
		span {animation: txtAni 0.35s ease}
	}
	&.on {
		background-color: @color;
		color: #fff;
		&:hover {
			box-shadow: 0 2px 30px rgba(40, 65, 121, 0.4);
		}
	}
	span {
		.inline-block;
		.transition(all,0.8s);
	}
}
.learn {
	.rel;
	.inline-block;
	font-size: var(--fs16);
	.medium;
	line-height: 0.36rem;
	color: #666;
	.medium;
	&:before,&:after {
		content: "";
		width: 0;
		height: 2px;
		background-color: @color;
		.abs;
		z-index: 10;
		.transition(all,0.4s);
	}
	&:before {left: 0;top: 0;}
	&:after {right: 0;bottom: 0;}
	&:hover {
		&:before,&:after {width: 100%;}
	}
	&:hover,&.on {
		color: @color;
		i {background-image: url(../img/i-right2.png)}
	}
	i {
		.inline-block;
		margin-left: 0.06rem;
		width: 8px;
		height: 13px;
		background-image: url(../img/i-right.png);
		background-position: center center;
		background-size: 100%;
		background-repeat: no-repeat;
	}
}
.imore {
	width: 0.5rem;height: 0.5rem;
	.block;
	.rel;
	&:hover {
		&:before {
			.after;
			transform: rotate(0deg);
		}
		i {
			transform: rotate(45deg);
			background-image: url(../img/right2.png);
		}
	}
	&:before {
		content: "";
		width: 100%;
		height: 100%;
		background-color: #000;
		.abs;
		left: 0;
		top: 0;
		z-index: 0;
		.before;
		transform: rotate(45deg);
		.transition(all,0.48s);
	}
	i {
		.block;
		width: 0.2rem;height: 100%;
		background-image: url(../img/right.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100%;
		.abs;
		left: 50%;
		top: 0;
		z-index: 10;
		margin-left: -0.1rem;
		.transition(all,0.48s);
	}
}
.btns {
	.txt-center;
	font-size: 0;
	a {margin-right: 0.2rem;&:last-child {margin-right: 0;}}
}
.padding {padding-top: 1.4rem;padding-bottom: 1.4rem;}
.mt {margin-top: 1.4rem;}
.pt {padding-top: 1.4rem;}
.ibtn {
	.block;
	width: 0.5rem;
	height: 0.5rem;
	background: #000 url(../img/i-right3.png) no-repeat center center;
	background-size: 7px;
	.transition(all,0.35s);
	&:hover {background-color: @color;}
}
.linebg {
	.rel;
	&.animated .box-container {
		&:after {.scale(1)}
	}
	.box-container {
		.rel;
		z-index: 10;
		&:after {
			content: "";
			.abs;
			top: 0;
			left: 0;
			z-index: 10;
			height: 2px;
			width: 100%;
			background-color: #000;
			.transition(all,2s);
			.scale(0.5);
		}
	}
}
.cat-box {
	.flex;
	.flex-wrap;
	a {
		.inline-block;
		min-width: 1.44rem;
		line-height: 0.48rem;
		background-color: #dde1e9;
		border-radius: 24px;
		margin-top: 0.2rem;
		margin-right: 0.2rem;
		.txt-center;
		color:#000;
		font-size: var(--fs16);
		.medium;
		.transition(all,0.4s);
		padding: 0 0.2rem;
		&:last-child {margin-right: 0;}
		&:hover,&.on {color: #fff;background-color: @color;}
	}
}
.index-box-1 {
	.index-title {margin-bottom: 0;}
	.info {
		width: 62.24%;
		margin: 0 auto;
	}
	.content {
		font-size: var(--fs16);
		color: #666;
		line-height: 0.3rem;
		margin: 0.28rem auto 0.7rem;
	}
}

.index-box-2 {
	.box-container {
		padding-top: 0.8rem;
		&:after {top: -1.2rem;}
	}
	.index-title {
		.translateY(0.8rem);
	}
	.item {
		opacity: 0;
		width: 100%;
		&:not(:first-child) {
			.abs;
			left: 0;
			top: 0;
			z-index: 0;
		}
		&.on {opacity: 1;}
	}
	.swiper-box {
		margin-top: 1.2rem;
	}
	.swiper-slide {
		.flex;
		.flex-between;
	}
	.swiper-slide-active {
		.beer-slider,.info {
			.after;
			.translateX(0);
		}
	}
	.beer-slider,.info {
		.before;
		.transition(all,1s);
		transition-delay: 0.45s;
	}
	.info {
		width: 19.8%;
		.translateX(1rem);
	}
	.beer-slider {
		width: 61.58%;
		.translateX(-1rem);
	}
	h4 {
		font-size: var(--fs42);
		color: #000;
		line-height: 0.48rem;
		.medium;
	}
	.desc {
		font-size: var(--fs16);
		color: #999;
		line-height: 24px;
		margin: 0.15rem auto 0.42rem;
	}
	.cat {
		.flex;
		a {
			width: 140px;
			height: 140px;
			background-color: #fff;
			border-radius: 0.2rem;
			border: solid 2px @color;
			.txt-center;
			margin-right: 0.2rem;
			padding: 0.26rem 0.2rem 0.2rem;
			&:last-child {margin-right: 0;}
			&.on,&:hover {
				background-color: @color;
				.icon {
					.init {.before;.scale(0.85)}
					.on {.after;.scale(1)}
				}
				p {color: #fff;}
			}
		}
		.icon {
			width: 0.48rem;
			height: 0.48rem;
			.rel;
			margin: 0 auto;
			img {
				.abs;
				left: 0;
				top: 0;
				z-index: 10;
				.transition(all,0.35s);
			}
			.on {.scale(1.2);.before}
		}
		p {
			font-size: var(--fs16);
			color: #000;
			line-height: 0.3rem;
			margin-top: 0.2rem;
			.transition(color,0.35s);
		}
	}
	.bottom {
		margin-top: 1.1rem;
		.flex;
		.flex-between;
		align-items: flex-end;
	}
	.swiperbtn {
		.abs;
		right: 0;
		bottom: -2.5rem;
		z-index: 10;
	}
}

.index-box-3 {
	.swiper-container {
		padding: 0 calc(~"(100% - 15.36rem) / 2");
	}
	.swiper-slide {
		&:hover {
			.pic img {.scale(1.05)}
			h4 {color: @color;}
			.imore {
				&:before {
					.after;
					transform: rotate(0deg);
				}
				i {
					transform: rotate(45deg);
					background-image: url(../img/right2.png);
				}
			}
		}
	}
	.info {
		.flex;
		.flex-between;
		padding: 0.38rem 0 0.2rem 0;
		border-left: 2px solid #000;
	}
	h4 {
		font-size: var(--fs42);
		color: #000;
		.medium;
		line-height: 0.5rem;
		width: 40%;
		padding-left: 0.4rem;
		.transition(color,0.3s);
	}
	.right {
		width: 55.31%;
	}
	.desc {
		font-size: var(--fs18);
		color: #000;
		line-height: 0.3rem;
		height: 1.2rem;
		margin-bottom: 0.7rem;
		.morewords(4);
	}
}

.index-box-4 {
	.cat-box {
		width: 55%;
		margin-top: 0.3rem;
	}
	.swiper-slide {
		&:after {
			content: "";
			width: 100%;
			height: 3rem;
			background: url(../img/casebg.png) no-repeat center bottom;
			background-size: 100%;
			.abs;
			left: 0;
			bottom: 0;
			z-index: 1;
		}
		h5 {
			font-size: var(--fs24);
			color: #fff;
			line-height: 0.36rem;
			.medium;
			.abs;
			left: 0;
			bottom: 0.74rem;
			z-index: 10;
			width: 100%;
		}
	}
	h5,.bottom {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.bottom {
		.abs;
		left: 0;
		bottom: 0.4rem;
		z-index: 10;
		width: 100%;
		.flex;
		.flex-between;
		align-items: flex-end;
		.swiper-pagination {
			.txt-left;
		}
	}
	.swiper-pagination {
		.rel;
		color: #fff;
		line-height: 24px;
		font-size: var(--fs16);
		span {
			.medium;
		}
	}
}
.index-box-5 {
	.top {
		.flex;
		.flex-between;
		align-items: flex-start;
	}
	.swiper-slide {
		width: 31.9%;
		margin-right: 2.15%;
		&:last-child {margin-right: 0;}
		&:hover {
			.pic img {.scale(1.05)}
			h5 {color: @color;}
		}
	}
	.info {
		padding: 0.24rem 0 0;
		border-right: 1px solid #000;
	}
	.time {
		font-size: var(--fs16);
		color: #999;
		.medium;
		line-height: 24px;
		margin-bottom: 0.09rem;
	}
	h5 {
		font-size: var(--fs22);
		color: #000;
		line-height: 0.3rem;
		.morewords(2);
		.medium;
		height: 0.6rem;
		width: 70.2%;
		.transition(color,0.3s);
		margin-bottom: 0.62rem;
	}
	.ibtn {
		margin-right: 0;
		margin-left: auto;
	}
}










@media screen and (min-width: 1004px) {


}
@media screen and (max-width: 1600px) {
	.padding {padding-top: 1.3rem;padding-bottom: 1.3rem;}
	.mt {margin-top: 1.3rem;}
	.pt {padding-top: 1.3rem;}
	.index-box-1 .info {width: 66%;}
	.index-title.ani {font-size: 1.14rem;}
	.index-box-2 .info {width: 21%;}
	.index-box-2 .bottom {margin-top: 1rem;}
	.swiper-btn {width: 0.6rem;height: 0.6rem;}
	.index-box-3 .swiper-container {padding: 0 calc(~"(100% - 14rem) / 2");}
	.goodsinfo-wrapper .box-3 .info:nth-child(2) {left: calc(~"(100% - 14rem) / 2")}
	.goodsinfo-wrapper .box-3 .info {right: calc(~"(100% - 14rem) / 2 + 1.4rem")}
	.index-box-3 .desc {margin-bottom: 0.6rem;}
	.goodsinfo-wrapper .box-1 .index-title {margin-top: 0;}
	.goodsinfo-wrapper .box-1 .index-title {letter-spacing: 0.08rem;}
	.goodsinfo-wrapper .box-2 .box-container {padding-top: 1.36rem;}
	.goodsinfo-wrapper .box-3 .item .swiper-pagination {right: -0.6rem;}
	.goodsinfo-wrapper .box-3 .item:nth-child(even) .swiper-pagination {left: -0.6rem;}
	.tab-box .item {margin-right: 0.2rem;width: 2rem;}
	.goodsinfo-wrapper .box-4 .box-container > div {padding-top: 1.1rem;}
	.goodsinfo-wrapper .box-4 .compare-box {padding-right: 0.9rem;}
	.goodsinfo-wrapper .box-4 .download-box {padding-left: 0.9rem;}
	.download-box li .icon {width: 0.8rem;}
	.download-box li {height: 0.8rem;}
	.download-box li .icon {margin-right: 0.24rem;}
	.goodsinfo-wrapper .box-5 .swiper-slide a {padding-bottom: 0.86rem;}
	.goodsinfo-wrapper .box-5 h4 {margin-top: 0.5rem;}
	.tab-box .item > a {padding-left: 0.24rem;}
	
	
	
	

}
@media screen and (max-width: 1440px) {
	.padding {padding-top: 1.2rem;padding-bottom: 1.2rem;}
	.mt {margin-top: 1.2rem;}
	.pt {padding-top: 1.2rem;}
	.index-box-2 .index-title {font-size: 1.08rem;}
	.index-box-2 .bottom {margin-top: 0.9rem;}
	.swiper-btn {width: 0.56rem;height: 0.56rem;}
	.index-box-3 .desc {margin-bottom: 0.5rem;}
	.goodsinfo-wrapper .box-4 .box-container > div {padding-top: 1rem;}
	.goodsinfo-wrapper .box-4 .compare-box {padding-right: 0.8rem;}
	.goodsinfo-wrapper .box-4 .download-box {padding-left: 0.8rem;}
	.goodsinfo-wrapper .box-2 .box-container {padding-top: 1.2rem;}
	.tab-box .item > a {padding-left: 0.2rem;}
	
	
	
	
	
}
@media screen and (max-width: 1366px) {
	.padding {padding-top: 1.1rem;padding-bottom: 1.1rem;}
	.mt {margin-top: 1.1rem;}
	.pt {padding-top: 1.1rem;}
	.index-box-2 .index-title {font-size: 1.02rem;}
	.index-box-2 .bottom {margin-top: 0.8rem;}
	.index-box-2 .cat a {width: 1.4rem;height: 1.4rem;padding-left: 0.12rem;padding-right: 0.12rem;}
	.index-box-2 .cat p {margin-top: 0.12rem;}



}

@media screen and (max-width: 1004px) {
	
	.index-title {
		font-size: var(--fs40);
		line-height: 0.6rem;
		margin-bottom: 0.48rem;
	}
	.index-more {
		min-width: 1.3rem;
		height: 0.64rem;
		line-height: 0.56rem;
		font-size: var(--fs14);
		padding: 0 0.3rem;
	}
	.learn {
		font-size: var(--fs14);
		line-height: 0.54rem;
		i {
			margin-left: 0.14rem;
			width: 6px;
			height: 11px;
		}
	}
	.imore {
		width: 0.6rem;height: 0.6rem;
		i {
			width: 0.24rem;
			margin-left: -0.12rem;
		}
	}
	.btns {
		a {margin-right: 0.3rem;}
	}
	.padding {padding-top: 1rem;padding-bottom: 1rem;}
	.mt {margin-top: 1rem;}
	.pt {padding-top: 1rem;}
	.ibtn {
		width: 0.6rem;
		height: 0.6rem;
		background-size: 6px;
	}
	.linebg {
		.box-container {
			&:after {
				height: 2px;
				width: calc(~"100% - 0.6rem");
			}
		}
	}
	.cat-box {
		a {
			min-width: 1.6rem;
			line-height: 0.64rem;
			margin-top: 0.24rem;
			margin-right: 0.24rem;
			font-size: var(--fs14);
			padding: 0 0.3rem;
		}
	}
	.index-box-1 {
		.info {
			width: 100%;
		}
		.content {
			font-size: var(--fs15);
			line-height: 0.48rem;
			margin: 0.36rem auto 0.6rem;
		}
	}
	
	.index-box-2 {
		.swiper-container {width: 100%;}
		.box-container {
			padding-top: 0.6rem;
			&:after {top: -1rem;}
		}
		.swiper-box {
			margin-top: 0.8rem;
		}
		.swiper-slide {
			.flex-wrap;
			flex-direction: column-reverse;
		}
		.info {
			width: 100%;
			margin-top: 0.48rem;
		}
		.beer-slider {
			width: 100%;
		}
		.index-title {
			font-size: 0.74rem;
			letter-spacing: 0;
			margin-left: 0.48rem;
			line-height: 0.8rem;
		}
		h4 {
			font-size: var(--fs24);
		}
		.desc {
			font-size: var(--fs15);
			line-height: 0.44rem;
			margin: 0.2rem auto 0.3rem;
		}
		.cat {
			a {
				width: 2rem;
				height: 2rem;
				margin-right: 0.3rem;
				padding: 0.3rem 0.2rem;
			}
			.icon {
				width: 0.6rem;
				height: 0.6rem;
			}
			p {
				font-size: var(--fs14);
				line-height: 0.36rem;
				margin-top: 0.24rem;
			}
		}
		.bottom {
			margin-top: 0.6rem;
		}
	}
	
	.index-box-3 {
		.swiper-container {
			padding: 0 0.3rem;
		}
		.info {
			.block;
			padding: 0.38rem;
		}
		h4 {
			font-size: var(--fs24);
			width: 100%;
			padding-left: 0;
			line-height: 0.48rem;
			margin-bottom: 0.1rem;
		}
		.right {
			width: 100%;
		}
		.desc {
			font-size: var(--fs15);
			line-height: 0.44rem;
			height: auto;
			margin-bottom: 0.4rem;
		}
	}
	
	.index-box-4 {
		.cat-box {
			width: 100%;
		}
		.swiper-slide {
			&:after {
				background-size: 100% 100%;
			}
			h5 {
				font-size: var(--fs20);
				line-height: 0.48rem;
				bottom: 0.9rem;
			}
		}
		h5,.bottom {
			padding-left: 0.3rem;
			padding-right: 0.3rem;
		}
		.bottom {
			bottom: 0.24rem;
		}
		.swiper-pagination {
			line-height: 0.36rem;
			font-size: var(--fs15);
		}
	}
	.index-box-5 {
		.box-container {
			padding-left: 0;
			padding-right: 0;
		}
		.swiper-container,
		.top {padding-left: 0.3rem;padding-right: 0.3rem;}
		.swiper-slide {
			width: 48%;
			margin-right: 15px;
		}
		.info {
			padding: 0.48rem 0 0;
		}
		.time {
			font-size: var(--fs14);
			line-height: 0.36rem;
			margin-bottom: 0.06rem;
		}
		h5 {
			font-size: var(--fs18);
			line-height: 0.44rem;
			height: 0.88rem;
			width: 100%;
			margin-bottom: 0.36rem;
		}
	}
	.breadcrumb {
		font-size: var(--fs14);
	}
	.goodsinfo-wrapper {
		.main {
			.flex-wrap;
			flex-direction: column-reverse;
			padding-top: 0.92rem;
			padding-right: 0;
			.swiper-box {
				width: 100%;
				margin: 0 auto;
				.pic img {width: 70%;margin: 0 auto;}
				.swiper-container {padding-bottom: 0.44rem;}
				.swiper-pagination {
				    .swiper-pagination-bullet {
				        margin: 0 0.15rem;
				        width: 6px;
				        height: 6px;
				    }
				}
			}
		}
		.box-1 {
			margin-bottom: 0.6rem;
			overflow: hidden;
			h1 {
				font-size: var(--fs36);
				line-height: 0.6rem;
				padding-right: 0;
			}
			.desc,.desc li {
				font-size: var(--fs15);
				line-height: 0.48rem;
			}
			.desc {
				margin: 0.36rem auto 0.8rem;
				li {
					padding-left: 0.3rem;
					&:before {
						width: 0.12rem;
						height: 0.12rem;
						top: 0.18rem;
					}
				}
			}
			.index-title {
				font-size: 0.9rem;
				letter-spacing: 0.02rem;
				margin-top: 0.4rem;
			}
		}
		.info-box {
			width: 100%;
			margin-top: 0.6rem;
		}
		.email {
			min-width: 3rem;
			line-height: 0.7rem;
			padding: 0 0.36rem;
			i {
				width: 0.4rem;
				height: 0.32rem;
				margin-right: 0.16rem;
			}
		}
		.box-2 {
			.box-container {
				padding-top: 1rem;
			}
			.icon {
				width: 0.96rem;
			}
			.info {
				margin-top: 0.3rem;
			}
			h4 {
				font-size: var(--fs18);
				line-height: 0.4rem;
			}
			p {
				font-size: var(--fs14);
				line-height: 0.44rem;
			}
			.swiper-btn {
				top: 0.31rem;
			}
		}
		.box-3 {
			height: 6rem;
			.list {
				height: 6rem;
			}
			.item {
				padding: 0.8rem 0.3rem;
				&:nth-child(even) {
					.swiper-pagination {
						left: -0.1rem;
					}
				}
			}
			.swiper-slide {
				.box-container {
					height: 6rem;
				}
			}
			.pic {
				width: 36.98%;
			}
			.info {
				width: 48%;
				right: 0.3rem;
				&:nth-child(2) {
					left: 0.3rem;
				}
				h4 {
					font-size: var(--fs20);
				}
				.desc {
					font-size: var(--fs14);
					line-height: 0.36rem;
					margin-top: 0.1rem;
				}
			}
			.item .swiper-pagination {
				right: -0.1rem;
			    .swiper-pagination-bullet {
			        margin: 0.16rem 0;
			        width: 6px;
			        height: 6px;
			    }
			}
			
		}
		.border {
			border-top: 2px solid #000;
		}
		.box-4 {
			.box-container {
				.block;
				> div {padding-top: 1rem;}
			}
			.compare-box {
				padding-right: 0;
			}
			.download-box {
				padding-left: 0;
				border: none;
				border-top: 1px solid #000;
			}
		}
		.caption {
			font-size: var(--fs24);
			margin-bottom: 0.4rem;
		}
		.box-5 {
			margin-top: 1rem;
			.swiper-slide {
				width: 100%;
				margin-right: 0;
				&:before {
					width: 1px;
				}
				a {
					padding:0.48rem 0.2rem 0.8rem;
				}
			}
			h4 {
				font-size: var(--fs20);
				line-height: 0.48rem;
				padding: 0 0.3rem;
				margin-top: 0.4rem;
			}
			.icon {
				width: 0.6rem;
				height: 0.6rem;
				background-size: 6px;
				
			}
		}
		.box-6 {
			li {
				width: 100%;
				margin-bottom: 0.48rem;
				&:last-child {margin-bottom: 0;}
			}
			.info {
				padding-left: 0.3rem;
				padding-top: 0.3rem;
			}
			h4 {
				font-size: var(--fs15);
				line-height: 0.44rem;
			}
			p {
				font-size: var(--fs14);
				line-height: 0.36rem;
				width: 44%;
			}
		}
		.group {
			width: 48%;
			margin-right: 0;
			margin-top: 4%;
			&:nth-child(3) {margin-top: 4%;}
			.text,.msg {
				height: 0.84rem;
				line-height: 0.66rem;
				padding-right: 0.4rem;
				padding-left: 0.4rem;
				font-size: var(--fs15);
			}
			.input(#666,var(--fs15));
			&.pl .text {
				padding-left: 0.5rem;
			}
			.msg {
				height: 1.8rem;
				line-height: 0.4rem;
			}
			i {
				left: 0.3rem;
			}
		}
		.submit {
			width: 2rem;
			line-height: 0.64rem;
			font-size: var(--fs15);
		}
	}
	.download-box {
		width: 100%;
		margin-top: 1rem;
		li {
			height: 1rem;
			background-size: 0.2rem;
			.icon {
				width: 0.8rem;
				background-size: 0.3rem;
				margin-right: 0.2rem;
				&:after {
					height: 0.3rem;
				}
			}
			a {
				font-size: var(--fs15);
				line-height: 0.4rem;
				max-height: .8rem;
				
			}
		}
	}
	.compare-box {
		width: 100%;
		li {
			font-size: var(--fs14);
			height: 0.68rem;
			line-height: 0.6rem;
		}
		.result-box {
			margin-top: 0.48rem;
		}
		.caption {
			position: static;
		}
		.result-box {
			margin-top: 0.46rem;
			table {
				td {
					font-size: var(--fs14);
					height: 0.64rem;
					line-height: 0.3rem;
					&:not(:first-child) {
						max-width: 1.6rem;
						padding-left: 0.15rem;
						padding-right: 0.15rem;
					}
				}
			}
		}
	}
	.tab-box {
		justify-content: flex-start;
		.item {
			width: 2.6rem;
			margin-right: 0.2rem;
			> a {
				line-height: 0.6rem;
				padding: 0 0.4rem 0 0.24rem;
				font-size: var(--fs14);
				&:after {
					width: 0.2rem;
					right: 0.3rem;
				}
			}
			.list {
				max-height: 4rem;
				padding-top: 0.48rem;
				border-radius: 0.48rem 0.48rem 0 0;
				a {
					padding: 0.14rem 0.24rem;
					line-height: 0.4rem;
				}
			}
		}
	}
	
}


/*分页*/
.pageNum {
    text-align:center;
    font-size: 0;
	margin-top: 0.98rem;
    a {
        .inline-block;
        color: #4d4d4d;
        font-size: 14px;
		font-family: "hr";
        .middle;
        margin: 0 0.1rem;
        width: 0.48rem;
        height: 0.48rem;
        line-height: 0.48rem;
		background-color: #fff;
		border: solid 1px #eee;
		.txt-center;
        .transition(background,.5s);
		&:first-child {margin-left: 0;}
		&:last-child {margin-right: 0;}
    }
    .dot {
		line-height: 0.38rem;
    }
	.btn {
		.background;
		background-size: 8px;
	}
	.prev {
		background-image: url(../img/icon-left2.png);
		&:hover {background-image: url(../img/icon-left.png);}
	}
	.next {
		background-image: url(../img/icon-right2.png);
		&:hover {background-image: url(../img/icon-right.png);}
	}
    a:hover,
    & .on {
        color: #fff;
        background-color: @color;
    }
}
.pageMore {.hide;margin-top: 0.6rem;}
.pageMore a {
    .block;
    width: 100%;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    background: @color;
    color:#fff;
    font-size: 12px;
}



.page-wrapper {
	.content {
		font-size: var(--fs16);
		line-height: 0.36rem;
	}
}
.search-wrapper {
	.result {
		margin-bottom: 0.2rem;
		span {
			.inline-block;
			font-size: var(--fs16);
			margin-right: 0.3rem;
			line-height: 0.48rem;
		}
		b {
			.inline-block;
			margin: 0 4px;
			color: #cd0000;font-family: "mb";text-decoration: underline;
		}
	}
	.list {
		li {
			.rel;
			list-style: none;
			border-bottom: 1px dashed #eee;
			&:first-child {
				border-top: 1px dashed #eee;
			}
			&:hover .title {color: @color}
			a {
				.flex;
				padding: 0.1rem 0;
				align-items: center;
			}
		}
		.title {
			flex:1;
			font-size: var(--fs16);
			color: #666;
			line-height: 0.48rem;
			margin-right: 1rem;
			.transition(color,0.3s);
			.morewords(1);
		}
		p {
			font-size: var(--fs16);
			color: #999;
			font-family: "mr";
		}
	}
}
@media screen and (max-width: 1004px) {
	.page-wrapper {
		.content {
			line-height: 0.48rem;
		}
	}
	.search-wrapper {
		.result {
			margin-bottom: 0.3rem;
			span {
				font-size: var(--fs14);
				margin-right: 0.48rem;
			}
		}
		.list {
			li {
				a {
					padding: 0.2rem 0;
				}
			}
			.title {
				font-size: var(--fs14);
				line-height: 0.48rem;
				margin-right: 0.6rem;
			}
			p {
				font-size: var(--fs14);
			}
		}
	}
}
.imgScale {
	.rel;
	&:hover {
		&:before {
			-webkit-animation: shine 1s;
			animation: shine 1s;
		}
		img {.scale(1.05)}
	}
	&:before {
		position: absolute;
		top: 0;
		left: -90%;
		z-index: 2;
		display: block;
		content: "";
		width: 50%;
		height: 100%;
		background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
		-webkit-transform: skewX(-25deg);
		-ms-transform: skewX(-25deg);
		transform: skewX(-25deg);
		-webkit-transition: All .5s ease;
		transition: All .5s ease;
	}
}
@-webkit-keyframes shine{100%{left:125%}}
@keyframes shine{100%{left:125%}}

@keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-webkit-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-moz-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}@-ms-keyframes circle-chart-fill{to{stroke-dasharray:0 100}
}
@keyframes txtAni {
	0% {
		opacity: 1;
		transform: translate(0,-5px);
	}
	50% {
		opacity: 0;
		transform: translate(0,-3px);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
@media screen and (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 5px;
        background-color: #f7f8f9;
    }
    ::-webkit-scrollbar-thumb {
        background-color: @color;
    }
}
@media screen and (max-width: 1600px) {
	:root {
		--fs18: 17px;
		--fs20: 18px;
		--fs22: 20px;
		--fs24: 22px;
		--fs28: 26px;
		--fs30: 28px;
		--fs36: 34px;
		--fs40: 36px;
		--fs42: 40px;
		--fs48: 44px;
		--fs60: 0.58rem;
	}
}
@media screen and (max-width: 1440px) {
	:root {
		// --fs16: 15px;
		// --fs18: 16px;
		// --fs20: 17px;
		--fs22: 0.2rem;
		--fs24: 0.22rem;
		--fs28: 0.26rem;
		--fs30: 0.28rem;
		--fs36: 0.30rem;
		--fs40: 0.32rem;
		--fs42: 0.36rem;
		--fs48: 0.4rem;
		--fs60: 0.56rem;
	}
}
@media screen and (max-width: 1366px) {
	:root {
		--fs14: 13px;
		--fs15: 14px;
		--fs16: 15px;
		--fs60: 0.54rem;
	}
}
@media screen and (max-width: 1280px) {
	:root {
		--fs14: 12px;
		--fs60: 0.52rem;
	}

}
@media screen and (max-width: 1004px) {
	:root {
		--fs14: 0.24rem;
		--fs16: 0.28rem;
		--fs18: 0.3rem;
		--fs20: 0.32rem;
		--fs22: 0.36rem;
		--fs24: 0.38rem;
		--fs28: 0.4rem;
		--fs30: 0.42rem;
		--fs36: 0.44rem;
		--fs40: 0.46rem;
		--fs48: 0.48rem;
	}
	
	.pic img {
		&.pc {.hide;}
		&.phone {.block;}
	}
}

.beer-slider{display:inline-block;position:relative;overflow:hidden}
.beer-slider *,.beer-slider :after,.beer-slider :before,.beer-slider:after,.beer-slider:before{box-sizing:border-box}
.beer-slider img{vertical-align:bottom}
.beer-slider>img{max-width:100%;height:auto}
.beer-reveal{position:absolute;left:0;top:0;bottom:0;right:50%;overflow:hidden;z-index:1;opacity:0;transition:opacity .35s}
.beer-reveal>:first-child{width:200%;max-width:none}
.beer-reveal>img:first-child{height:auto}
.beer-range{position:absolute;z-index:2;top:0;bottom:0;height:100%;margin:0;left:-1px;width:calc(100% + 2px);cursor:pointer;-webkit-appearance:slider-horizontal!important;-moz-appearance:none;opacity:0;-ms-touch-action:auto;touch-action:auto}
.beer-range::-webkit-slider-thumb{-webkit-appearance:none;height:300vh}
.beer-range::-moz-range-thumb{-webkit-appearance:none;height:300vh}
.beer-range::-ms-tooltip{display:none}
.beer-range:focus~.beer-handle{background:rgba(255,255,255,.85);box-shadow:0 0 3px rgba(0,0,0,.4)}
.beer-reveal[data-beer-label]:after,.beer-slider[data-beer-label]:after{content:attr(data-beer-label);position:absolute;top:1.5rem;line-height:1;padding:.5rem;border-radius:.125rem;background:rgba(255,255,255,.75)}
.beer-slider[data-beer-label]:after{right:1.5rem}
.beer-reveal[data-beer-label]:after{left:1.5rem}
.beer-reveal[data-beer-label=""]:after,.beer-slider[data-beer-label=""]:after{content:none}
.beer-ready .beer-handle,.beer-ready .beer-reveal{opacity:1}
.beer-handle {
	.abs;
	z-index: 10;
	pointer-events:none;opacity:0;
	left: 50%;
	height: 100%;
	width: 2px;
	top: 0;
	background-color: #fff;
	margin-left: -1px;
	&:before {
		content: "";
		width: 0.26rem;
		height: 0.26rem;
		.abs;
		left: 50%;
		top: 50%;
		z-index: 10;
		margin-top: -0.13rem;
		margin-left: -0.13rem;
		background-color: #fff;
		border-radius: 50%;
	}
}

@keyframes wordAni {
	0% {
		.before;
		.translateX(-0.6rem);
	}
	100% {
		.after;
		.translateX(0);
	}
}

@keyframes wordAni2 {
	0% {
		.before;
		.translateX(-0.8rem);
	}
	50% {
		.after;
		.translateX(0);
	}
	100% {
		.after;
		.translateX(0.8rem);
	}
}