.animated {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

@-webkit-keyframes bounceInRight {

	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0)
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0)
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0)
	}

	100% {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes bounceInRight {

	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(3000px, 0, 0);
		-ms-transform: translate3d(3000px, 0, 0);
		transform: translate3d(3000px, 0, 0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(-25px, 0, 0);
		-ms-transform: translate3d(-25px, 0, 0);
		transform: translate3d(-25px, 0, 0)
	}

	75% {
		-webkit-transform: translate3d(10px, 0, 0);
		-ms-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0)
	}

	90% {
		-webkit-transform: translate3d(-5px, 0, 0);
		-ms-transform: translate3d(-5px, 0, 0);
		transform: translate3d(-5px, 0, 0)
	}

	100% {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.bounceInRight {
	-webkit-animation-name: bounceInRight;
	animation-name: bounceInRight
}

@-webkit-keyframes zoomInUp {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
	}
}

@keyframes zoomInUp {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
		animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
		animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
	}
}

.zoomInUp {
	-webkit-animation-name: zoomInUp;
	animation-name: zoomInUp
}

@-webkit-keyframes bounceInUp {

	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3000px, 0);
		transform: translate3d(0, 3000px, 0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	75% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes bounceInUp {

	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3000px, 0);
		-ms-transform: translate3d(0, 3000px, 0);
		transform: translate3d(0, 3000px, 0)
	}

	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		-ms-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}

	75% {
		-webkit-transform: translate3d(0, 10px, 0);
		-ms-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}

	90% {
		-webkit-transform: translate3d(0, -5px, 0);
		-ms-transform: translate3d(0, -5px, 0);
		transform: translate3d(0, -5px, 0)
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.bounceInUp {
	-webkit-animation-name: bounceInUp;
	animation-name: bounceInUp
}

@-webkit-keyframes bounceIn {

	0%,
	100%,
	20%,
	40%,
	60%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes bounceIn {

	0%,
	100%,
	20%,
	40%,
	60%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		-ms-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}

	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		-ms-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		-ms-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}

	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		-ms-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn
}

@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	50% {
		opacity: 1
	}
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}

	50% {
		opacity: 1
	}
}

.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn
}

/*the animation definition*/
@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
	}
}

.slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight
}

@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInDown {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown
}

@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out
	}

	40% {
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out
	}

	50% {
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}

	80% {
		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
		transform: perspective(400px) scale3d(.95, .95, .95);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}
}

@keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out
	}

	40% {
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out
	}

	50% {
		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}

	80% {
		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
		-ms-transform: perspective(400px) scale3d(.95, .95, .95);
		transform: perspective(400px) scale3d(.95, .95, .95);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}

	100% {
		-webkit-transform: perspective(400px);
		-ms-transform: perspective(400px);
		transform: perspective(400px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}
}

.animated.flip {
	-webkit-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-animation-name: flip;
	animation-name: flip
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px)
	}
}

@keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		-ms-transform: perspective(400px);
		transform: perspective(400px)
	}
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-ms-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		-ms-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse
}

@-webkit-keyframes shake {

	0%,
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}

	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0)
	}
}

@keyframes shake {

	0%,
	100% {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: translate3d(-10px, 0, 0);
		-ms-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}

	20%,
	40%,
	60%,
	80% {
		-webkit-transform: translate3d(10px, 0, 0);
		-ms-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
		-moz-transform: translate3d(10px, 0, 0);
		-o-transform: translate3d(10px, 0, 0);
	}
}

.shake {
	-webkit-animation-name: shake;
	animation-name: shake
}

@-webkit-keyframes slideInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideInLeft {
	0% {
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		visibility: visible
	}

	100% {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.slideInLeft {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}


@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, -200deg);
		transform: rotate3d(0, 0, 1, -200deg)
	}

	100% {
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes rotate {
	0% {
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate3d(0, 0, 1, -200deg);
		-ms-transform: rotate3d(0, 0, 1, -200deg);
		transform: rotate3d(0, 0, 1, -200deg)
	}

	100% {
		-webkit-transform-origin: center;
		-ms-transform-origin: center;
		transform-origin: center;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.rotate {
	-webkit-animation-name: rotate;
	animation-name: rotate
}

@-webkit-keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}

	10%,
	20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
	}

	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada
}

.enter-up{
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.fixed {
	position: fixed !important;
}

.product {
	position: relative;
	overflow: hidden;
}

.product-occupy {
	position: relative;
}

.product-nav {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 52px;
	background-color: transparent;
	transition: all .3s;
}

.product-nav.active{
	background-color: rgba(17, 17, 17, 0.7);
	backdrop-filter: saturate(50%) blur(20px);
	-webkit-backdrop-filter: saturate(50%) blur(20px);
	border-bottom: 1px solid #424245;
	position: fixed;
	left: 0;
	top: 0;
}

.product-nav.white.active{
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: saturate(50%) blur(20px);
	-webkit-backdrop-filter: saturate(50%) blur(20px);
	border-bottom: 1px solid rgba(29,29,31,0.2);
}

.product-nav-cnt {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	line-height: 24px;
	color: #fff;
	border-bottom: 1px solid rgba(29,29,31,0.2);
	transition: all .3s;
}

.product-nav.white .product-nav-cnt{
	border-bottom: 1px solid rgba(29,29,31,0.2);
}

.product-nav-cnt.white{
	border-bottom: 1px solid rgba(238, 238, 247, 0.28) !important;
}

.product-nav.white.enter .product-nav-cnt.white{
	border-bottom: 1px solid rgba(29,29,31,0.2) !important;
}

.product-nav.enter.active .product-nav-cnt{
	border-bottom: 0 !important;
}

.product-nav.white.active .product-nav-cnt.white{
	border-bottom: none !important;
}

.product-nav.white.active .pro-name{
	color: #000 !important;
}

.product-nav.white.active ul li.active{
	color: #000 !important;
}

.product-nav.active .product-nav-cnt {
	border-bottom: 0 !important;
}


.pro-name {
	font-size: 18px;
	line-height: 52px;
}

.product-nav-cnt.black .pro-name{
	color: #000 !important;
}

.product-nav-cnt.black ul li.active{
	color: #000 !important;
}

.product-nav-cnt.white .pro-name{
	color: #fff !important;
}

.product-nav-cnt.white .buy{
	background-color: #fff !important;
	color: #000 !important;
}

.product-nav-cnt.white ul li.active{
	color: #fff !important;
}

.product-nav.white .pro-name.w{
	color: #000 !important;
}

.product-nav.white .buy.w{
	background-color: #000 !important;
	color: #fff !important;
}


.product-nav-cnt ul {
	float: right;
	display: flex;
}

.product-nav-cnt li {
	margin-right: 25px;
	font-size: 13px;
	color: #808080;
	line-height: 52px;
}

.product-nav-cnt li.active {
	color: #fff;
}

.section-banner{
    position: relative;
}
.section-banner .video-btn{
    position: relative;
    padding: 10px 46px 10px 18px;
    border-radius: 24px;
    border: 1px solid #F5F5F5;
    color: #F5F5F5;
}
.section-full-img{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    object-fit: cover;
    object-position: center;
}
.section-theme{
    margin-inline-start: auto;
    margin-inline-end: auto;
    position: relative;
    max-width: 1120px;
}
.section-banner .video-btn::after{
    position: absolute;
    right: 15px;
    top: 8px;
    content: '';
    width: 22px;
    height: 22px;
    background: url('https://www.vaporesso.com/hubfs/imgs/2024/icon/icon_video_play.svg') no-repeat center;
    background-size: 100%;
}
.section-pro{
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}
.section-pro .view{
	width: 100%;
	margin-top: 40px;
	overflow: hidden;
}
.section-pro.flex {
	display: flex;
	align-items: center;
}
.section-pro.flex .info{
	display: flex;
	flex-wrap: wrap;
}
.section-pro .info{
	color: #000;
}
.section-pro .info h4{
	line-height: 38px;
	margin-bottom: 14px;
}
.section-pro .info h3{
	line-height: 56px;
	margin-bottom: 20px;
}
.section-pro .info p{
	line-height: 22px;
}
.section-img-box{
    position: relative;
    height: 100%;
}
.section-content{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 1;
}
.section-pro .sales{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 980px;
	margin: 0 auto;
	padding: 150px 0 120px 0;
}
.section-pro .sales .four{
	width: 485px;
	height: 240px;
	border-radius: 20px;
}



.text-cap {
    text-transform: capitalize;
}

.text-center{
	text-align: center;
}

.text-upper {
    text-transform: uppercase;
}

.mb_3{
	margin-bottom: 3px !important;
}
.mb_4{
	margin-bottom: 4px !important;
}
.mb_5{
	margin-bottom: 5px !important;
}
.mb_6{
	margin-bottom: 6px !important;
}
.mb_7{
	margin-bottom: 7px !important;
}
.mb_8{
	margin-bottom: 8px !important;
}
.mb_9{
	margin-bottom: 9px !important;
}
.mb_10{
	margin-bottom: 10px !important;
}
.mb_11{
	margin-bottom: 11px !important;
}
.mb_12{
	margin-bottom: 12px !important;
}
.mb_13{
	margin-bottom: 13px !important;
}
.mb_14{
	margin-bottom: 14px !important;
}
.mb_15{
	margin-bottom: 15px !important;
}
.mb_16{
	margin-bottom: 16px !important;
}
.mb_18{
	margin-bottom: 18px !important;
}
.mb_20{
	margin-bottom: 20px !important;
}
.mb_21{
	margin-bottom: 21px !important;
}
.mb_22{
	margin-bottom: 22px !important;
}
.mb_24{
	margin-bottom: 24px !important;
}
.mb_25{
	margin-bottom: 25px !important;
}
.mb_26{
	margin-bottom: 26px !important;
}
.mb_28{
	margin-bottom: 28px !important;
}
.mb_32{
	margin-bottom: 32px !important;
}
.mb_35{
	margin-bottom: 35px !important;
}
.pb_36{
	padding-bottom: 36px !important;
}
.f_12{
	font-size: 12px !important;
}
.f_13{
	font-size: 13px !important;
}
.f_14{
	font-size: 14px !important;
}
.f_15{
	font-size: 15px !important;
}
.f_16{
	font-size: 16px !important;
}
.f_17{
	font-size: 17px !important;
}
.f_18{
	font-size: 18px !important;
}
.f_19{
	font-size: 19px !important;
}
.f_20{
	font-size: 20px !important;
}
.f_21{
	font-size: 21px !important;
}
.f_22{
	font-size: 22px !important;
	line-height: 32px;
}
.f_24{
	font-size: 24px !important;
	line-height: 32px;
}
.f_25{
	font-size: 26px !important;
}
.f_26{
	font-size: 26px !important;
}
.f_27{
	font-size: 27px !important;
}
.f_28{
	font-size: 28px !important;
}
.f_30{
	font-size: 30px !important;
	line-height: 36px;
}
.f_32{
	font-size: 32px !important;
	line-height: 40px;
}
.f_36{
	font-size: 36px !important;
}
.f_40{
	font-size: 40px !important;
	line-height: 44px;
}
.f_44{
	font-size: 44px !important;
	line-height: 52px;
}
.f_48{
	font-size: 48px !important;
	line-height: 52px;
}
.f_52{
	font-size: 52px !important;
}
.f_53{
	font-size: 53px !important;
}
.f_54{
	font-size: 54px !important;
}
.f_56{
	font-size: 56px !important;
}
.f_60{
	font-size: 60px !important;
	line-height: 60px;
}
.f_64{
	font-size: 64px !important;
}
.f_72{
	font-size: 72px !important;
}
.f_120{
	font-size: 120px !important;
	line-height: 120px;
}
.f_80{
	font-size: 80px !important;
}
.f_180{
	font-size: 180px !important;
	line-height: 1;
}

.buy {
	float: right;
	margin-top: 11px;
	width: 48px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #fff;
	border-radius: 15px;
	color: #000000;
	font-size: 13px;
	color: #808080;
}

.buy:hover,
.buy:focus,
.buy:link,
.buy:active,
.buy:visited {
	color: #000000;
}

.product-nav-cnt, .product-nav-cnt li.active{
	color: #000000;
}

.product-nav.white .product-nav-cnt, .product-nav.white .product-nav-cnt li.active{
	color: #fff;
}

.buy{
	background-color: #000;
	color: #fff !important;
}

.product-nav.active .product-nav-cnt, .product-nav.active .product-nav-cnt li.active{
	color: #fff;
}

.product-nav.white.active .product-nav-cnt, .product-nav.white.active .product-nav-cnt li.active{
	color: #000;
}

.product-nav.enter .product-nav-cnt li.active{
	color: #fff !important;
}

.product-nav.white.enter .product-nav-cnt li.active{
	color: #000 !important;
}

.product-nav.active .buy{
	background-color: #fff;
	color: #000 !important;
}

.product-nav.white.active .buy{
	background-color: #000 !important;
	color: #fff !important;
}

.product-nav.white.active .pro-name.w{
	color: #000 !important;
}

.product-nav.white.enter.active .product-nav-cnt li.active{
	color: #000 !important;
}

.product-nav.enter .product-nav-cnt.white {
	border-bottom: 0;
}

.cover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	padding-top: 18vh;
	text-align: center;
	overflow: hidden;
}

.cover h1 {
	position: relative;
	z-index: 2;
	font-size: 2.86vw;
	line-height: 2.86vw;
}

.slogan {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 2vh;
	font-weight: 400;
	font-size: 1.24vw;
	color: #999999;
}

.btns {
	position: relative;
	z-index: 2;
	margin-top: 3vh;
}

.btns a {
	display: inline-block;
	min-width: 7.81vw;
	height: 1.88vw;
	line-height: 1.78vw;
	border-radius: 0.91vw;
	border: solid 0.05vw #00ff00;
	color: #00ff00;
	font-weight: 400;
	font-size: 1.04vw;
}

.exhibit-btn {
	margin-right: 1vw;
}

.info-img {
	margin-top: -3vh;
	width: 76%;
}

.cover-img {
	width: 45%;
	position: absolute;
	left: 27.5%;
	top: 54vh;
}

.view-color {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	width: 100%;
	height: 100vh;
	padding-top: 70px;
	background-color: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.view-cls {
	position: absolute;
	right: 33%;
	top: 8vw;
	width: 2.24vw;
	height: 2.24vw;
}

.product-main .rotate-box,
.product-main .img-box {
	width: 25%;
	height: 65vh;
	margin: 0 auto;
	text-align: center;
	touch-action: none;
}

.product-img .rotate-box,
.product-img .img-box {
	width: 50%;
	height: 65vh;
	margin: 0 auto;
	text-align: center;
	touch-action: none;
}

.img-360 {
	width: 100%;
	height: 88%;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;

}

.range {
	-webkit-appearance: none;
	background: transparent;
	margin: 0 auto;
	display: block;
	width: 100%;
	border: 0;
	margin-bottom: 1vw;
}

.range:focus {
	outline: none
}

.range::-webkit-slider-runnable-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	box-shadow: none;
	background: rgba(255, 255, 255, .15);
	border-radius: 0;
	border: 0
}

.range:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, .15)
}

.range::-webkit-slider-thumb {
	box-shadow: none;
	border: 0;
	height: 0.47vw;
	width: 10%;
	border-radius: 0.21vw;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -0.235vw;
}

.range:focus::-webkit-slider-thumb {
	outline: 0;
	outline-offset: 2px
}

.range::-moz-range-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	box-shadow: none;
	background: rgba(255, 255, 255, .15);
	border-radius: 0;
	border: 0
}

.range::-moz-range-thumb {
	box-shadow: none;
	border: 0;
	height: 0.47vw;
	width: 10%;
	border-radius: 0.21vw;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -0.235vw;
}

.range:focus::-moz-range-thumb {
	outline: 0;
	outline-offset: 2px
}

.img360-info {
	font-size: 0.83vw;
	color: #999999;
}

.color-list {
	font-size: 0;
}

.color-list a {
	position: relative;
	display: inline-block;
	margin-right: 1vw;
	background-size: cover;
	background-repeat: no-repeat;
	width: 1.6vw;
	height: 1.6vw;
	border-radius: 50%;
}

.color-list a:last-child {
	margin-right: 0;
}

.color-list a:before {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: 50%;
	border: 2px solid transparent;
	transition: all 0.3s;
}

.color-list a:after {
	content: '';
	position: absolute;
	z-index: 2;
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	border-radius: 50%;
	border: 1px solid transparent;
	transition: all 0.3s;
}

.color-list a.active:before {
	border-color: #fff;
}

.color-list a.active:after {
	border-color: #00ff00;
}

.color-info {
	margin-top: 3vh;
	font-weight: 400;
	font-size: 0.94vw;
}

.basic {
	position: relative;
	z-index: 4;
	margin-top: 100vh;
	/*background-color: rgba(0, 0, 0, 0.85);
	  backdrop-filter: blur(5px);*/
}

.basic-info {
	position: relative;
	width: 100%;
	height: 63vh;
}

.basic-box {
	position: absolute;
	left: 0;
	top: 0%;
	width: 100%;
	text-align: center;
}

.msrp {
	text-align: center;
	font-size: 1.25vw;
}

.msrp span {
	color: #00ff00;
}

.basic-info p {
	margin: 3vh auto 0 auto;
	width: 32%;
	font-weight: 400;
	font-size: 0.94vw;
	line-height: 1.46vw;
}

.introduce {
	position: relative;
	width: 100%;
	height: 85vh;
}

.introduce ul {
	display: flex;
	width: 28%;
	left: 50%;
	top: 0;
	transform: translate3d(-50%, 0%, 0px);
	flex-wrap: wrap;
	justify-content: space-between;
}

.introduce ul li {
	width: 40%;
	margin-bottom: 8vh;
	font-weight: 400;
	font-size: 0.94vw;
	letter-spacing: -0.02vw;
	text-align: center;
}

.introduce ul img {
	width: 85%;
	margin-bottom: 2vh;
}

.video {
	position: relative;
	width: 100%;
	height: 49vw;
	font-weight: 400;
	font-size: 0.94vw;
}

.video video {
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
}

.video-box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0px);
	width: 37%;
	text-align: center;
}

.video-box p {
	font-size: 0.94vw;
	line-height: 1.46vw;
}

.video-play {
	position: relative;
	display: inline-block;
	margin-top: 1.5vw;
	width: 11.46vw;
	line-height: 1.78vw;
	height: 1.88vw;
	color: #00ff00;
	border: solid 0.05vw #00ff00;
	border-radius: 1vw;
}

.video-play:after {
	content: '';
	position: absolute;
	right: 0;
	top: 0.39vw;
	z-index: 2;
	border: 0.5vw solid transparent;
	border-left: 0.7vw solid #00ff00;
	transition: all .3s;
}

.video-play:hover:after {
	border-left-color: #000000;
}

.highlights {
	left: 0;
	bottom: 0;
	z-index: 2;
}

.banner {
	position: relative;
	width: 100%;
	height: 50.52vw;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.sticky {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding-top: 55px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.banner-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.banner-cnt {
	position: absolute;
}

.banner h3 {
	font-size: 2.08vw;
	line-height: 2.08vw;
}

.banner p {
	margin-top: 1.2vw;
	line-height: 1.52vw;
	font-size: 1.04vw;
	color: #aaaaaa;
}

.product .intro-list {
	padding: 13vw 7.5%;
	background-color: #222222;
	text-align: center;
}

.intro-list ul {
	display: flex;
	justify-content: space-between;
}

.intro-list ul img {
	width: 100%;
}

.intro-list ul li {
	will-change: transform, opacity;
}

.intro-list li span {
	display: block;
	margin-top: 1.5vw;
	font-size: 1.56vw;
	line-height: 2vw;
}

.intro-list p {
	margin-top: 0.5vw;
	font-size: 0.94vw;
	line-height: 1.56vw;
	color: #a9a9a9;
}

.pro-styles {
	position: relative;
	width: 100%;
	height: 300vh;
}

.pro-styles li img {
	width: 100%;
}

.banner-fllow {
	cursor: pointer;
	height: 100vh;
}

.fllow-fixed {
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 2;
}

.banner-fllow .banner-cnt {
	width: 100%;
	bottom: 15vh;
	font-size: 1.56vw;
	text-align: center;
	line-height: 2.08vw;
}

.ins-tag {
	color: #00ff00;
}

.ins-icon {
	width: 2.08vw;
	margin-right: 2%;
}

.pro-styles h3 {
	margin-top: 5vh;
	font-size: 2.08vw;
	text-align: center;
}

.pro-styles ul {
	height: auto;
	margin: 22vh auto 0 auto;
}

.pro-styles li {
	will-change: transform, opacity;
}

.pro-styles li:last-child {
	opacity: 1 !important;
}

.pro-styles li:last-child span {
	opacity: 1 !important;
}

.pro-styles span {
	display: block;
	margin-top: 5vh;
	font-weight: 400;
	font-size: 0.94vw;
	color: #aaaaaa;
}

.spec {
	position: relative;
	z-index: 3;
}

.configure {
	padding: 11vw 0;
	background-color: #111111;
}

.configure h2 {
	text-align: center;
	font-size: 2.34vw;
}

.configure ul {
	margin: 5vw auto 0 auto;
	width: 62%;
	display: flex;
	flex-wrap: wrap;
}

.configure li {
	width: 25%;
	padding: 1vw 1.5vw 2.5vw 1.5vw;
	border-right: 1px solid rgba(277, 277, 277, 0.1);
}

.configure li:nth-child(4n) {
	border-right: 0;
}

.lastline {
	border-top: 1px solid rgba(277, 277, 277, 0.1);
}

.configure label {
	display: block;
	font-size: 0.94vw;
	font-weight: 400;
	color: #aaaaaa;
}

.configure span {
	display: block;
	margin-top: 0.5vw;
	font-size: 1.04vw;
	line-height: 1.4vw;
}

.pro-fade {
	position: relative;
	height: 300vh;
	background-color: #000;
}

.exploded-view {
	opacity: 0;
}

.exploded-box {
	position: relative;
	margin: 0 auto;
}

.exploded-text {
	position: absolute;
	font-weight: 400;
	font-size: 1.04vw;
	line-height: 1.04vw;
	white-space: nowrap;
	display: flex;
	transition: opacity .6s ease-out;
	opacity: 0;
}

.exploded-text.left:before,
.exploded-text.right:after {
	margin-top: 0.5vw;
	margin-left: 0.5vw;
	height: 0.04vw;
	width: 4.5vw;
	border: 0.04vw solid #aaaaaa;
	content: '';
}

.exploded-text.left:before {
	margin-right: 0.5vw;
	margin-left: 0;
}

.pro-mark ul {
	position: relative;
	display: block;
	height: 200vh;
	text-align: center;
}

.pro-mark li {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding-top: 12vh;
}

.pro-mark h3 {
	margin-bottom: 6vw;
	font-size: 2.08vw;
	color: #fdfdfd;
}

.swiper-box {
	position: relative;
	width: 79%;
	margin: 0 auto;
	padding: 0 2.5vw;
}

.swiper-box .swiper-container {
	border-radius: 1.04vw;
}

.swiper-box .swiper-button-prev,
.swiper-box .swiper-button-next {
	width: 1.41vw;
	height: 2.66vw;
	margin-top: -0.7vw;
	background-size: cover;
}

.swiper-box .swiper-button-prev {
	left: 0;
	background-image: url('https://www.vaporesso.com/hubfs/imgs/2022/index/pc/r.png');
}

.swiper-box .swiper-button-next {
	right: 0;
	background-image: url('https://www.vaporesso.com/hubfs/imgs/2022/index/pc/l.png');
}

.replacement {
	top: 0;
	height: auto;
	background-color: #000;
	margin: 0 auto;
}

.replacement-fixed {
	width: 100%;
	padding-top: 2vw;
	top: 0;
	left: 0;
	z-index: 2;
}

.replacement h3 {
	margin-bottom: 5vw;
	font-size: 2.08vw;
	color: #ffffff;
	text-align: center;
}

.replacement li {
	width: 46%;
	margin-right: 4%;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 1.04vw;
}

.replacement img {
	float: left;
	width: 14.58vw;
	background-color: #f0f0f0;
	margin-right: 1.5vw;
	border-radius: 1.04vw 0 0 1.04vw;
}

.replacement span {
	display: block;
	margin-top: 2.5vw;
	font-size: 1.56vw;
	color: #1f1f33;
}

.view-more {
	position: relative;
	z-index: 2;
	float: left;
	margin-top: 5vw;
	width: 9.43vw;
	height: 3.18vw;
	text-align: center;
	line-height: 3.18vw;
	background-color: #000000;
	border-radius: 1.56vw;
	font-size: 1.04vw;
	color: #00ff00;
	border: 0;
}

.view-more:visited {
	color: #00ff00;
}

.view-more:hover {
	color: #000;
}

.view-more:before {
	border-radius: 1.56vw;
}
.section-3d{
	position: fixed;
	z-index: 30;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: none;
}
.section-3d .content{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 900px;
    padding: 60px 30px 40px 30px;
    text-align: center;
    color: #fff;
	background: #1D1B1D;
}
.section-3d.white .content{
	background: #fff;
}
.section-3d .content h3{
	color: #F5F5F7;
}
.section-3d.white .content h3{
	color: #000;
}
.section-3d .content .icon-cross{
	position: absolute;
	width: 16px;
	height: 16px;
	top: 20px;
	right: 20px;
	cursor: pointer;
	background: url('https://www.vaporesso.com/hubfs/imgs/2023/activity/armour/icon_close.png') no-repeat center;
    background-size: 100%;
}
.section-3d .choose{
	width: 340px;
	margin: 0 auto;
	display: flex;
	text-align: center;
	justify-content: center;
	margin-top: 29px;
}
.section-3d .choose .item{
	padding: 14px 32px 17px 32px;
	border-bottom: 1px solid #424245;
	cursor: pointer;
	color: #808080;
}
.section-3d.white .choose .item{
	border-bottom: 1px solid #808080;
}
.section-3d .choose .item.active{
	border-bottom: 1px solid #fff;
	color: #fff;
}
.section-3d.white .choose .item.active{
	border-bottom: 2px solid #111;
	color: #000;
}
.section-3d .content .detail{
	width: 840px;
	height: 480px;
	margin-top: 40px;
	cursor: grab;
}
.section-3d .content .detail .cloudimage-360{
	display: none;
	height: 480px;
	max-height: 480px;
	background: #111;
}
.section-3d .content .detail .cloudimage-360:first-child{
	display: block;
}
.section-3d.white .content .detail .cloudimage-360{
	background: #f0f0f0;
}
.section-3d .cloudimage-360-loader{
	height: 2px;
}
.section-3d .cloudimage-360-view-360-icon{
	background-color: transparent !important;
	background-size: 100% !important;
	color: transparent !important;
	width: 44px;
	height: 60px;
	opacity: 0.6;
	box-shadow: none !important;
}
.section-3d .cloudimage-360-icons-container{
	top: 10px;
	right: 10px;
}
.section-spec{
	display: none;
	padding: 0 0 120px 0;
	width: 100%;
	background-color: #000;
}
.section-spec.white{
	background-color: #fff;
}
.spec-content{
	padding-top: 60px;
}
.spec-content .card{
	width: 1120px;
	max-width: 1120px;
	margin: 0 auto;
}
.spec-content h2{
	position: relative;
}
.spec-content ul{
	width: 100%;
	display: flex;
	padding: 60px 0;
	border-bottom: 1px solid #424245;
}
.spec-content .t{
	padding: 70px 0 50px 0;
}
.spec-content .t li{
	line-height: 32px;
}
.spec-content ul:last-child{
	border-bottom: none;
}
.spec-content ul li{
	color: #fff;
	line-height: 23px;
}
.section-spec.white ul li{
	color: #000;
}
.spec-content ul li:first-child{
	width: 340px;
	line-height: 28px;
}
.spec-content ul .d{
	color: #A1A1A6;
	padding-right: 60px;
	flex: 1;
}
.spec-content ul .w{
	color: rgba(255,255,255,0.9) !important;
}
.section-spec.white ul .w{
	color: #000 !important;
}
.spec-content ul .d p{
	color: #A1A1A6;
	line-height: 23px;
	max-width: 630px;
}
.section-spec.white .spec-content ul .d p{
	color: #111;
}
.section-spec.white .spec-content ul{
	border-bottom: 1px solid #D2D2D2;
}
.spec-content ul .d .kit{
	margin-bottom: 24px;
}
.spec-content .f li:first-child, .spec-content .t li:first-child{
	width: 200px;
}
.spec-content .f li{
	padding-right: 30px;
}
.spec-content .f li p{
	line-height: 23px;
}
.spec-content .f img{
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 630px;
}
.spec-content .f .colors{
	display: flex;
	max-width: 630px;
	margin: 0 auto;
}
.spec-content .f .colors .item{
	flex: 1;
	text-align: center;
	font-size: 15px !important;
}
.spec-content .l img{
	display: block;
	width: 260px;
	margin-bottom: 39px;
}
.spec-content .r .d{
	display: flex;
}
.spec-content .r .d .item{
	text-align: center;
	color: #fff;
	margin-right: 140px;
	padding-bottom: 22px;
}
.section-spec.white .spec-content .r .d .item{
	color: #000;
}
.section-spec.white .spec-content .r .more-link{
	border-color: #000;
}
.section-spec.white .spec-content .r .more-link:hover{
	background-color: #000;
	color: #fff;
}
.section-spec .spec-content .r .more-link:hover{
	background-color: #fff;
	color: #000;
}
.spec-content .r img{
	display: block;
	width: 220px;
	height: 220px;
	margin: 0 auto;
	margin-bottom: 6px;
}
.spec-content .r .more-link{
	display: block;
	width: fit-content;
	height: 38px;
	line-height: 37px;
	padding: 0 43px;
	margin: 0 auto;
	border: 1px solid #FFFFFF;
}
.spec-content .r .more-link:hover{
	color: #000;
	background-color: #fff;
}

.inthebox {
	position: relative;
	z-index: 3;
	padding: 11vw 0 12vw 0;
	background-color: #000000;
}

.inthebox h2 {
	margin-bottom: 5vw;
	font-size: 2.34vw;
	text-align: center;
}

.inthebox li {
	position: relative;
	min-height: 20.89vw;
	padding: 0;
	background-color: #f0f0f0;
	border-radius: 1.04vw;
	vertical-align: middle;
}

.inthebox li img {
	position: absolute;
	width: 55%;
	top: 50%;
	left: 5%;
	transform: translate3d(0, -50%, 0px);
}

.inthebox-info {
	float: right;
	width: 35%;
	height: 22.69vw;
	padding: 1.6vw 2vw 1.6vw 2vw;
	background-color: #fff;
	border-left: none;
}

.inthebox-info h3 {
	font-size: 1.56vw;
	color: #000000;
}

.inthebox-info p {
	font-weight: 400;
	line-height: 1.56vw;
	font-size: 0.94vw;
	color: #666666;
	margin-top: 1.2vw;
}

.banner-pro-end {
	padding: 130px 0 220px 0;
}

.banner-pro-end .section-pro {
	max-width: 560px;
}

.banner-pro-end img {
	display: block;
	width: 340px;
	margin: 0 auto;
}

.banner-pro-end .long {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content: center;
	row-gap: 12px;
	column-gap: 12px;
}

.banner-pro-end .long .item {
	border: 1px solid #444;
	padding: 8px 15px;
	text-align: center;
	color: #AEAEAE;
}
.banner-pro-end .long.w .item{
	border: 1px solid rgba(68,68,68,0.5);
	color: #666;
}
.banner-pro-end .check-spec{
	background-color: #000;
	color: #fff;
	margin: 0 auto;
	margin-top: 30px;
	padding: 11px 32px;
	width: fit-content;
	cursor: pointer;
}
.banner-pro-end .check-spec.w{
	background-color: #fff;
	color: #000;
}
.banner-pro-end .check-spec:hover{
	color: #00ff00;
}
.banner-pro-end .check-spec.w:hover{
	background-color: #00ff00;
	color: #000;
}
.section-banner .color-area{
	display: flex;
	flex-wrap: wrap;
	max-width: 960px;
	margin: 0 auto;
	margin-top: 48px;
	margin-bottom: 30px;
}
.section-banner .color-pick{
	display: flex;
	width: fit-content;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	column-gap: 40px;
	margin-top: 60px;
	border-bottom: 1px solid rgba(0, 0, 0, .4);
}
.section-banner .color-pick .ctn{
	position: relative;
	text-align: center;
	padding-bottom: 14px;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	font-size: 15px;
	line-height: 21px;
}
.section-banner .color-pick .ctn:hover{
	color: rgba(0, 0, 0, 1);
}
.section-banner .color-pick .ctn.active{
	color: rgba(0, 0, 0, 1);
}
.section-banner .color-pick .ctn.active::after{
	position: absolute;
	content: '';
	bottom: -1.5px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	z-index: 2;
}
.section-banner .color-box{
	display: none;
	width: 100%;
}
.section-banner .color-box.active{
	display: block;
}

@media screen and (min-width: 1024px) {
	.color-choose {
		width: 59vw;
		margin: 8vw auto;
		display: flex;
		justify-content: space-between;
	}

	.color-left {
		width: 21vw;
		text-align: left;
	}

	.color-left-top {
		padding-top: 3vw;
		padding-left: 2vw;
		width: 100%;
		height: 20.57vw;
		background-color: #222222;
		border-radius: 1.56vw;
	}

	.c-label {
		display: block;
		font-size: 1.25vw;
		font-weight: 400;
		color: #cccccc;
	}

	.c-value {
		display: block;
		margin-top: 0.5vw;
		width: 100%;
		font-size: 2vw;
		line-height: 2.71vw;
		font-weight: 600;
	}

	.p-name {
		margin-top: 1.3vw;
		margin-bottom: 0.8vw;
		display: block;
		font-weight: 400;
		font-size: 0.94vw;
		color: #cccccc;
	}

	.color-left .color-list {
		width: 100%;
	}

	.pro-marp {
		margin-top: 1.88vw;
		padding-top: 2vw;
		padding-left: 2vw;
		width: 100%;
		height: 11.15vw;
		background-color: #222222;
		border-radius: 1.56vw;
	}

	.pro-marp label {
		font-size: 1.25vw;
		color: #cccccc;
		font-weight: 400;
	}

	.pro-marp span {
		display: block;
		margin-top: 0.5vw;
		font-size: 2.5vw;
		font-weight: 600;
	}

	.color-right {
		width: 34vw;
		height: 33.65vw;
		background-color: #222222;
		border-radius: 1.56vw;
	}

	.color-right img {
		width: 100%;
		object-fit: cover;
	}

	@keyframes bigIn {
		0% {
			opacity: 0;
			transform: scale3d(4, 4, 4);
		}

		100% {
			opacity: 1;
			transform: scale3d(1, 1, 1);
		}
	}

	.bigIn {
		-webkit-animation-name: bigIn;
		animation-name: bigIn
	}

	.intro-list .row-x-3 {
		width: 22%;
	}

	.intro-list .row-x-4 {
		width: 31%;
	}

	.intro-list .row-x-6 {
		width: 47%;
	}

	.specifications {
		position: relative;
		height: 100vh;
		background-color: #111111;
	}

	.specifications h2 {
		margin-top: 14vh;
		text-align: center;
		font-size: 2.34vw;
	}

	.spec-box {
		margin: 10vh auto 0 auto;
		position: relative;
		overflow: hidden;
		list-style: none;
		padding-left: 13.5%;
	}

	.spec-cnt {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		transition-property: transform, -webkit-transform;
	}

	.spec-img {
		flex-shrink: 0;
		width: 26%;
		padding: 1vh 0;
		background-color: #222222;
		border-radius: 1.04vw;
		text-align: center;
		transition-property: transform, -webkit-transform;
	}

	.spec-img img {
		height: 40vh;
	}

	.spec-info {
		transition-property: transform, -webkit-transform;
	}

	.spec-info ul {
		display: flex;
	}

	.spec-info li {
		width: 23vw;
		flex-shrink: 0;
		margin-left: 1.82vw;
	}

	.spec-info li>div {
		width: 100%;
		height: 19vh;
		margin-bottom: 4vh;
		padding: 1vw 1.5vw 2.5vw 1.5vw;
		background-color: #222222;
		border-radius: 1.04vw;
	}

	.spec-info li>div:last-child {
		margin-bottom: 0;
	}

	.spec-info li label {
		display: block;
		font-weight: 400;
		color: #999999;
		font-size: 0.94vw;
	}

	.spec-info li span {
		display: block;
		margin-top: 0.5vw;
		font-size: 1.25vw;
		font-weight: 600;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1440px){
	.section-3d .content {
		transform: translate3d(-50%, -50%, 0) scale(0.8);
	}
}
@media screen and (min-width: 1024px) {
	.x-hide{
		display: none !important;
	}
}


@media screen and (max-width: 1023px) {
	.section-pro .info h4{
		font-size: .3rem !important;
		line-height: .4rem;
		margin-bottom: .2rem;
	}
	.section-pro .info h3{
		font-size: .6rem !important;
		line-height: .6rem;
		margin-bottom: .32rem;
	}
	.section-pro .info p{
		font-size: .3rem !important;
		line-height: .4rem !important;
	}
	.section-pro .sales{
		padding: 1.6rem .28rem;
		gap: .14rem;
	}
	.section-pro .sales .four{
		width: 3.4rem;
		height: 3.4rem;
		border-radius: .14rem;
	}
	.s-hide{
		display: none !important;
	}
	.mb-10{
        margin-bottom: 0.12rem !important; 
    }
    .mb-20{
        margin-bottom: 0.24rem !important; 
    }
    .f-14{
        font-size: 0.18rem !important; /* 16px */
    }
    .f-16{
        font-size: 0.24rem !important; /* 16px */
    }
    .f-18{
        font-size: 0.24rem !important; /* 18px */
    }
    .f-20{
        font-size: 0.24rem !important; /* 20px */
    }
    .f-24{
        font-size: 0.28rem !important; /* 24px */
    }
    .f-32{
        font-size: 0.32rem !important; /* 32px */
    }
    .f-36{
        font-size: 0.34rem !important; /* 36px */
    }
    .f-40{
        font-size: 0.36rem !important; /* 32px */
    }
    .f-48{
        font-size: 0.4rem !important; /* 48px */
    }
    .f-56{
        font-size: 0.48rem !important; /* 56px */
    }
    .f-72{
        font-size: 0.52rem !important; /* 56px */
    }
    .f-100{
        font-size: 0.6rem !important; /* 56px */
    }
    .f-120{
        font-size: 0.64rem !important; /* 56px */
    }
    .f-140{
        font-size: 0.72rem !important; /* 140px */
    }
    .mb_3{
        margin-bottom: 3px !important;
    }
    .mb_4{
        margin-bottom: 4px !important;
    }
    .mb_5{
        margin-bottom: 5px !important;
    }
    .mb_6{
        margin-bottom: 6px !important;
    }
    .mb_7{
        margin-bottom: 7px !important;
    }
    .mb_8{
        margin-bottom: 8px !important;
    }
    .mb_9{
        margin-bottom: .18rem !important;
    }
    .mb_10{
        margin-bottom: .2rem !important;
    }
    .mb_11{
        margin-bottom: .22rem !important;
    }
    .mb_12{
        margin-bottom: .24rem !important;
    }
    .mb_13{
        margin-bottom: .26rem !important;
    }
    .mb_14{
        margin-bottom: .28rem !important;
    }
    .mb_15{
        margin-bottom: .3rem !important;
    }
    .mb_16{
        margin-bottom: .32rem !important;
    }
    .mb_18{
        margin-bottom: .36rem !important;
    }
    .mb_20{
        margin-bottom: .4rem !important;
    }
    .mb_21{
        margin-bottom: .42rem !important;
    }
    .mb_22{
        margin-bottom: .44rem !important;
    }
    .mb_24{
        margin-bottom: 0.28rem !important;
    }
    .mb_25{
        margin-bottom: .5rem !important;
    }
    .mb_26{
        margin-bottom: .52rem !important;
    }
    .mb_28{
        margin-bottom: .48rem !important;
    }
    .mb_32{
        margin-bottom: .48rem !important;
    }
    .mb_35{
        margin-bottom: 0.7rem !important;
    }
    .pb_35{
        padding-bottom: .35rem !important;
    }
    .pb_36{
        padding-bottom: .48rem !important;
    }
    .f_12{
        font-size: .24rem !important;
    }
    .f_13{
        font-size: .26rem !important;
    }
    .f_14{
        font-size: .28rem !important;
    }
    .f_15{
        font-size: .3rem !important;
    }
    .f_16{
        font-size: .32rem !important;
    }
    .f_17{
        font-size: .34rem !important;
    }
    .f_18{
        font-size: .36rem !important;
    }
    .f_19{
        font-size: .38rem !important;
    }
    .f_20{
        font-size: .34rem !important;
    }
    .f_21{
        font-size: .36rem !important;
    }
    .f_22{
        font-size: .36rem !important;
    }
    .f_24{
        font-size: .36rem !important;
    }
    .f_26{
        font-size: 16px !important;
    }
    .f_27{
        font-size: 20px !important;
    }
    .f_28{
        font-size: 24px !important;
    }
    .f_30{
        font-size: 28px !important;
    }
    .f_32{
        font-size: 28px !important;
    }
    .f_36{
        font-size: .36rem !important;
    }
    .f_40{
        font-size: 30px !important;
    }
    .f_44{
        font-size: 30px !important;
    }
    .f_48{
        font-size: 30px !important;
    }
    .f_52{
        font-size: .64rem;
    }
    .f_53{
        font-size: 32px !important;
    }
    .f_54{
        font-size: .6rem !important;
    }
    .f_56{
        font-size: 30px !important;
    }
    .f_60{
        font-size: 32px !important;
    }
    .f_64{
        font-size: 48px !important;
    }
    .f_72{
        font-size: 72px !important;
        line-height: 80px;
    }
    .f_80{
        font-size: 80px !important;
    }
    .f_120{
        font-size: 80px !important;
    }
    .f_180{
        font-size: 80px !important;
        line-height: 1;
    }
    .section-theme{
        max-width: 100%;
    }
    .section-content{
        padding: 0 0.5rem;
    }
	.section-3d{
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
	.section-pro.flex{
		flex-wrap: wrap;
	}
	.section-banner .color-area{
		padding: 0 .4rem;
		margin-top: .8rem;
		margin-bottom: .48rem;
	}
	.section-banner .color-pick{
		margin: 0 .3rem;
		margin-top: .6rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.section-banner .color-pick .ctn{
		font-size: .3rem;
		padding-bottom: .32rem;
		line-height: .4rem;
		text-align: left !important;
	}
	.banner-pro-end {
		padding: 1.6rem 0 1rem 0;
	}

	.banner-pro-end h3{
		font-size: .5rem !important;
		line-height: .56rem !important;
		margin-bottom: 0 !important;
	}

	.banner-pro-end .content {
		margin-top: 0;
		padding: 0 0.24rem;
	}

	.banner-pro-end .long {
		column-gap: 0.2rem;
		row-gap: 0.2rem;
	}

	.banner-pro-end .long .item {
		padding: .14rem .2rem;
		font-size: .26rem !important;
	}

	.banner-pro-end .check-spec{
		margin-top: 0.8rem;
		padding: 0.22rem 0.8rem;
		font-size: .3rem !important;
	}

	.banner-pods img {
		width: 3rem;
		height: 3.72rem;
		margin-top: -0.2rem;
	}

	.banner-pro-end img {
		width: 80%;
	}
	.spec-content .f .colors .item{
		font-size: 0.24rem !important;
		line-height: 0.32rem;
		color: #AEAEAE !important;
		font-family: 'DinExp-Bold' !important;
	}
	.section-spec.white .spec-content .f .colors .item{
		color: #000 !important;
	}
	.spec-content .f li{
		padding-right: 0;
	}
	.spec-content .f-price{
		font-family: 'DinExp-Bold' !important;
	}
	.section-3d .content{
		width: 6.9rem;
		padding: .88rem .3rem .32rem .3rem;
	}
	.section-3d .content .detail{
		width: 6.3rem;
		height: 7.5rem;
		margin-top: 0;
	}
	.section-3d .content .detail .cloudimage-360{
		height: 7.5rem;
	}
	.section-3d .content .detail .cloudimage-360 canvas{
		transform: scale(1.8) translateY(20%);
	}
	.section-3d .content .detail.single .cloudimage-360 canvas{
		transform: scale(1.8) translateY(25%) translateX(0%);
	}
	.section-3d .content h3{
		font-size: 0.44rem !important;
		line-height: .56rem;
		margin-bottom: .56rem;
		padding: 0 .6rem;
	}
	.section-3d .choose{
		position: absolute;
		margin-top: 0;
		left: 0;
		bottom: .6rem;
		z-index: 31;
		width: 100%;
	}
	.section-3d .choose .item{
		padding: 0;
		font-size: 0.28rem !important;
		line-height: .4rem;
		
	}
	.section-3d .choose .item:first-child{
		padding-right: .6rem;
	}
	.section-3d .choose .item.active{
		border-bottom: 1px solid #424245;
	}
	.section-3d .choose .item.active p{
		border-bottom: 1px solid #fff;
		color: #fff;
		padding-bottom: .2rem;
	}
	.section-3d.white .choose .item.active p{
		color: #000;
	}
	.color-choose {
		width: 100%;
		padding: 0.85rem 0.3rem;
		display: flex;
		justify-content: space-between;
	}

	.color-left {
		width: 55%;
		text-align: left;
	}

	.color-left-top {
		padding-top: 0.3rem;
		padding-left: 0.3rem;
		width: 100%;
		height: 3.95rem;
		background-color: #222222;
		border-radius: 0.3rem;
	}

	.c-label {
		display: block;
		font-size: 0.24rem;
		font-weight: 400;
		color: #cccccc;
	}

	.c-value {
		display: block;
		margin-top: 0.1rem;
		font-size: 0.4rem;
		line-height: 0.5rem;
		font-weight: 600;
	}

	.p-name {
		margin-top: 0.25rem;
		margin-bottom: 0.15rem;
		display: block;
		font-weight: 400;
		font-size: 0.24rem;
		color: #cccccc;
	}

	.product-nav-cnt.white .pro-name{
		color: #000 !important;
	}

	.product-nav-cnt.white .buy{
		background-color: #000 !important;
    	color: #fff !important;
	}

	.product-nav-cnt.white ul li.active{
		color: #000 !important;
	}

	.product-nav-cnt, .product-nav.white .product-nav-cnt{
		border-bottom: none;
	}

	.color-left .color-list {
		width: 100%;
	}

	.color-left .color-list a {
		width: 0.3rem;
		height: 0.3rem;
		margin-right: 0.16rem;
	}

	.pro-marp {
		margin-top: 0.36rem;
		padding-top: 0.3rem;
		padding-left: 0.3rem;
		width: 100%;
		height: 2.14rem;
		background-color: #222222;
		border-radius: 0.3rem;
	}

	.pro-marp label {
		font-size: 0.24rem;
		color: #cccccc;
		font-weight: 400;
	}

	.pro-marp span {
		display: block;
		margin-top: 0.2rem;
		font-size: 0.48rem;
		font-weight: 600;
	}

	.color-right {
		width: 35%;
		height: 6.45rem;
		overflow: hidden;
	}

	.color-right img {
		width: 280%;
		margin-left: -94%;
		object-fit: cover;
		max-width: none;
	}

	.product {
		padding: 0;
		overflow: hidden;
	}

	.mask {
		cursor: pointer;
		z-index: 5;
	}

	.product-nav {
		height: 0.88rem;
	}

	.product-nav-cnt {
		padding: 0.04rem 0.4rem;
	}

	.pro-name {
		display: inline-block;
		width: 80%;
		font-size: 0.36rem;
		line-height: 0.8rem;
		cursor: pointer;
		color: #000 !important;
	}

	.pro-name:after {
		float: right;
		margin-top: 0.3rem;
		width: 0.32rem;
		height: 0.22rem;
		background: url('https://www.vaporesso.com/hubfs/imgs/2024/icon/icon_nav_arrow-1.svg') no-repeat center;
		background-size: 100%;
		content: '';
		transition: all .3s;
		transform: rotate(180deg);
	}

	.pro-name.active:after {
		transform: rotate(0);
	}

	.product-nav-cnt {
		width: 100%;
		line-height: 0.5rem;
		background-color: #fff;
	}
 
	.product-nav.active .product-nav-cnt {
		border-bottom: 1px solid rgba(66,66,69,0.2);
	}

	.product-nav-cnt ul {
		position: absolute;
		left: 0;
		top: 0.88rem;
		padding-bottom: 0.4rem;
		display: block;
		width: 100%;
		background-color: #fff;
		color: #000;
		display: none;
		border-bottom: 1px solid rgba(66,66,69,0.2);
	}

	.product-nav-cnt li {
		margin: 0;
		height: 1rem;
		line-height: 0.985rem;
		margin: 0 0.7rem;
		border-bottom: 1px solid rgba(66,66,69,0.2);
		font-size: 0.28rem;
		color: #808080;
	}

	.product-main{
		padding-top: 0.88rem;
	}

	.product-nav-cnt, .product-nav-cnt li.active{
		border-bottom: 1px solid rgba(66, 66, 69, 0.2);
	}

	.product-nav.active .product-nav-cnt, .product-nav.active .product-nav-cnt li.active{
		color: #000;
	}

	.product-nav.enter .product-nav-cnt, .product-nav.enter .product-nav-cnt li.enter{
		color: #fff;
	}

	.product-nav-cnt li:last-child {
		border-bottom: 0;
	}

	.product-nav.enter .product-nav-cnt li.active{
		color: #000 !important;
	}

	.buy {
		margin-top: 0.12rem;
		padding: 0;
		height: 0.56rem;
		line-height: 0.56rem;
		font-size: 0.26rem;
		border-radius: 0.3rem;
	}

	.product-nav.white .product-nav-cnt .buy {
		background-color: #000 !important;
		color: #fff !important;
	}

	.product-nav.active .buy{
		background-color: #000 !important;
		color: #fff !important;
	}

	.product-nav.white .product-nav-cnt, .product-nav.white .product-nav-cnt li.active{
		color: #000;
	}

	.cover {
		position: static;
		padding: 0;
		height: 11rem;
	}

	.cover h1 {
		font-size: 0.45rem;
		line-height: 0.45rem;
	}

	.slogan {
		margin-top: 0.28rem;
		font-size: 0.24rem;
	}

	.btns {
		margin-top: 0.35rem;
	}

	.btns a {
		min-width: 2rem;
		height: 0.5rem;
		line-height: 0.48rem;
		border-width: 0.01rem;
		font-size: 0.24rem;
		border-radius: 0.25rem;
	}

	.exhibit-btn {
		margin-right: 0.49rem;
	}

	.info-img {
		margin-top: -0.6rem;
		width: 100%;
	}

	.cover-img {
		/*position: relative;*/
	}

	.rotate {
		width: 100%;
		top: 5.6rem;
		left: 0;
		transform: rotate(90deg);
	}

	.view-color {
		position: fixed;
		top: 0;
		z-index: 20;
		padding-top: 1.5rem;
	}

	.product-main .rotate-box,
	.product-main .img-box {
		width: 76%;
		height: 60vh;
	}

	.product-img .rotate-box,
	.product-img .img-box {
		width: 76%;
		height: 60vh;
	}

	.img360-info {
		font-size: 0.23rem;
	}

	.color-list {
		margin-top: 0.1rem;
	}

	.color-list a {
		margin-right: 0.2rem;
		margin-bottom: 0.3rem;
		width: 0.43rem;
		height: 0.43rem;
	}

	.color-info {
		margin-top: 0.4rem;
		font-size: 0.24rem;
	}

	.view-cls {
		left: 50%;
		top: 90vh;
		right: 0;
		width: 0.62rem;
		height: 0.62rem;
		transform: translateX(-50%);
	}

	.basic {
		margin: 0;
		background-color: #111111;
	}

	.basic-info {
		height: auto;
		padding: 1.15rem 0;
	}

	.msrp {
		font-size: 0.27rem;
	}

	.basic-info p {
		width: 92%;
		margin-top: 0.32rem;
		font-size: 0.24rem;
		line-height: 0.32rem;
	}

	.introduce {
		height: auto;
	}

	.basic-box {
		position: relative;
	}

	.introduce ul {
		left: 0;
		transform: translate3d(0, 0px, 0px);
		width: 75%;
		margin: 0 auto;
	}

	.introduce ul li {
		margin-bottom: 1.15rem;
		font-size: 0.24rem;
		letter-spacing: -0.005rem;
	}

	.introduce ul img {
		width: 100%;
		margin-bottom: 0.3rem;
	}

	.video {
		height: 8.5rem;
	}

	.video-box {
		width: 90%;
		text-align: center;
	}

	.video-box p {
		font-size: 0.24rem;
		line-height: 0.34rem;
	}

	.video-play {
		margin-top: 0.45rem;
		border-radius: 0.25rem;
		width: 3rem;
		padding: 0.13rem 0;
		height: auto;
		font-size: 0.24rem;
		line-height: 0.24rem;
	}

	.video-play:after {
		top: 0.12rem;
		border-width: 0.12rem;
		border-left-width: 0.18rem;
	}

	.banner,
	.pro-styles {
		height: 8.5rem;
	}

	.pro-styles {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.sticky {
		height: 100%;
		padding: 0;
	}
	.spec-content{
		padding-top: 1.36rem;
	}
	.spec-content ul{
		flex-wrap: wrap;
		padding: 0.96rem 0;
		padding-top: 0;
		border-bottom: none !important;
	}
	.spec-content .card{
		width: 100%;
		padding: 0 0.5rem;
	}
	.spec-content ul li{
		font-size: .3rem !important;
		line-height: .44rem;
	}
	.spec-content ul li:first-child{
		width: 100% !important;
		padding-bottom: 0.3rem;
		margin-bottom: .48rem;
		font-size: .44rem !important;
		line-height: .56rem;
		border-bottom: 1px solid #D2D2D2
	}
	.spec-content .f li p.color{
		font-size: .28rem !important;
		line-height: .46rem;
		margin-top: .24rem;
		color: #AEAEAE !important;
	}
	.spec-content .l img{
		margin-bottom: 0.2rem;
	}
	.spec-content ul .d p.title{
		font-size: .32rem !important;
		line-height: .46rem;
		color: #fff;
		margin-bottom: .2rem;
	}
	.spec-content ul .d p.title.grey{
		color: #AEAEAE !important;
	}
	.spec-content ul .d .kit{
		margin-bottom: .8rem;
	}
	.spec-content ul .d .kit.bot{
		margin-bottom: 0;
	}
	.spec-content .f img{
		width: 110%;
    	transform: translateX(-5%);
	}
	.spec-content .f .d p.title{
		margin: 1.2rem 0;
		margin-bottom: .8rem;
	}
	.spec-content ul .d{
		flex: auto;
		padding-right: 0;
	}
	.spec-content ul .d-2{
		flex: 1;
	}
	.spec-content ul .d-2.right{
		padding-right: .7rem;
	}
	.spec-content ul .d p{
		font-size: .3rem !important;
		line-height: .44rem;
	}
	.spec-content .l .d p{
		font-size: .28rem !important;
		line-height: .4rem;
		margin-bottom: .12rem !important;
	}
	.spec-content ul .d.size{
		text-align: center;
	}
	.spec-content ul .d.size img{
		width: 3.3rem;
		margin: 0 auto;
		margin-top: .16rem;
		margin-bottom: .72rem;
	}
	.spec-content .r .d .item{
		margin-right: 0;
		padding-bottom: 0;
	}
	.spec-content .r img{
		width: 3.52rem;
		height: 3.52rem;
		margin-bottom: 0;
	}
	.spec-content .r .more-link{
		width: fit-content;
		height: .6rem;
		padding: 0 .5rem;
		line-height: .58rem;
		font-size: .24rem !important;
	}
	.spec-content .r li .f_16{
		font-size: .26rem !important;
		line-height: .38rem;
		margin-bottom: .32rem !important;
	}
	.section-spec{
		padding: 0 0 1.2rem 0;
	}

	.banner-cnt {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0.9rem 0.3rem;
		text-align: center;
	}

	.banner h3,
	.pro-styles h3 {
		font-size: 0.4rem;
		line-height: 0.48rem;
	}

	.banner p {
		margin-top: 0.18rem;
		font-size: 0.24rem;
		line-height: 0.32rem;
	}

	.intro-list li {
		font-weight: 400;
	}

	.intro-list li span {
		margin-top: 0.62rem;
		font-size: 0.35rem;
		line-height: 0.35rem;
	}

	.intro-list li p {
		margin-top: 0.28rem;
		font-size: 0.24rem;
		line-height: 0.32rem;
		padding: 0 0.2rem;
	}

	.product .mob-swiper .swiper-pagination-bullets {
		bottom: 0.5rem;
	}

	.mob-swiper .swiper-pagination-bullet {
		width: 0.18rem;
		height: 0.18rem;
		margin-right: 0.13rem;
		background-color: #cccccc;
	}

	.mob-swiper .swiper-pagination-bullet-active {
		background-color: #00ff00;
	}

	.product .style-list {
		margin-top: 1.6rem;
		padding: 0 0.8rem;
	}

	.banner-fllow {
		height: 5rem;
	}

	.fllow-fixed {
		height: 100%;
	}

	.banner-fllow .banner-cnt {
		left: 50%;
		top: 50%;
		bottom: auto;
		padding: 0;
		width: 50%;
		height: auto;
		transform: translate3d(-50%, -50%, 0px);
		text-align: center;
	}

	.ins-icon {
		width: 0.63rem;
	}

	.banner-fllow span {
		display: block;
		margin-top: 0.3rem;
		font-size: 0.3rem;
		line-height: 0.38rem;
	}

	.ins-tag {
		display: block;
		color: #fff;
	}

	.configure {
		height: auto;
		padding: 1.3rem 0.3rem 1rem 0.3rem;
		background-color: transparent;
	}

	.configure h2 {
		font-size: 0.45rem;
	}

	.configure ul {
		margin-top: 0.85rem;
		width: 100%;
	}

	.configure li {
		width: 50%;
		padding: 0.2rem;
		border-right: 0;
		border-bottom: 1px solid rgba(277, 277, 277, 0.2);
	}

	.configure li:nth-child(odd) {
		border-right: 1px solid rgba(277, 277, 277, 0.2);
	}

	.configure li:nth-last-child(2),
	.configure li:last-child {
		border-bottom: 0;
	}

	.configure label {
		font-size: 0.24rem;
		line-height: 0.24rem;
	}

	.configure span {
		margin-top: 0.15rem;
		min-height: 1.08rem;
		font-size: 0.3rem;
		line-height: 0.36rem;
	}

	.specifications {
		padding: 0.65rem 0.5rem;
	}

	.specifications h2 {
		font-size: 0.45rem;
		text-align: center;
	}

	.spec-info {
		margin-top: 0.4rem;
	}

	.spec-info li {
		display: flex;
		width: 100%;
		min-height: 2rem;
		justify-content: space-between;
		margin-bottom: 0.2rem;
	}

	.spec-info li>div {
		width: 48.5%;
		padding: 0.3rem 0.2rem;
		background-color: #111111;
		border-radius: 0.2rem;
	}

	.spec-info li label {
		display: block;
		font-size: 0.24rem;
		color: #aaaaaa;
	}

	.spec-info li span {
		display: block;
		margin-top: 0.1rem;
		font-size: 0.3rem;
	}

	.pro-fade {
		height: auto;
	}

	.pro-fade .pro-mark {
		padding: 0 0.5rem 1.04rem 0.5rem;
	}

	.pro-mark ul {
		display: flex;
		height: auto;
	}

	.pro-mark li {
		position: static;
		padding: 0.5rem 0.1rem;
		background-color: #111111;
		border-radius: 0.2rem;
	}

	.exploded-view {
		opacity: 1;
	}

	.pro-mark img {
		width: 100%;
	}

	.pro-mark h3 {
		margin-bottom: 0.9rem;
		font-size: 0.4rem;
	}

	.product .replacement {
		background-color: transparent;
		height: auto;
		padding-top: 0.5rem;
	}

	.replacement-fixed {
		height: 100%;
		padding: 0;
	}

	.swiper-box {
		width: 100%;
		padding: 0;
	}

	.replacement .swiper-container {
		padding: 0 0.5rem;
	}

	.replacement h3 {
		margin-bottom: 0.6rem;
	}

	.replacement li {
		width: 100%;
		border-radius: 0.2rem;
	}

	.replacement img {
		width: 2.69rem;
		margin-right: 0.32rem;
		border-radius: 0.2rem 0 0 0.2rem;
	}

	.replacement span {
		margin-top: 0.5rem;
		font-size: 0.3rem;
	}

	.view-more {
		margin-top: 0.95rem;
		width: 1.76rem;
		height: 0.6rem;
		line-height: 0.6rem;
		border-radius: 0.28rem;
		font-size: 0.24rem;
	}

	.inthebox {
		padding: 1.3rem 0;
		height: auto;
	}

	.inthebox h2 {
		margin-bottom: 0.55rem;
		font-size: 0.45rem;
	}

	.inthebox .swiper-container {
		padding: 0 0.5rem;
	}

	.inthebox li {
		padding: 0;
		border-radius: 0.2rem;
		min-height: auto;
		background-color: #f0f0f0;
		padding-bottom: 0.75rem;
	}

	.inthebox-info {
		float: none;
		border: 0;
		width: 100%;
		height: auto;
		padding: 0.35rem;
		background: #fff;
		border-top-left-radius: 0.2rem;
		border-top-right-radius: 0.2rem;
	}

	.inthebox-info h3 {
		font-size: 0.3rem;
	}

	.inthebox-info p {
		margin-top: 0.3rem;
		font-size: 0.24rem;
		line-height: 0.33rem;
	}

	.inthebox li img {
		position: static;
		width: 90%;
		margin-left: 5%;
		margin-top: 1.2rem;
		transform: none;
	}

}