/*
 *	Created by Edward on 25/12/10
 *	Copyright (c) 2025 ishutime.com All rights reserved
*/
@font-face {
	font-family: 'iconfont';
	src: url('iconfont.woff2?t=166374007984301') format('woff2'),
		url('iconfont.woff?t=166374007984301') format('woff'),
		url('iconfont.ttf?t=166374007984301') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0px;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: Quicksand;
	src: url(../fonts/Quicksand-VariableFont_wght.ttf);
}

@font-face {
	font-family: teachers;
	/* src: url(../fonts/Teachers-Regular.ttf); */
	src: url(../fonts/GoogleSansFlex_36pt-Light.ttf);

}

html {
	font-size: 18px;
}

body,
html {

	color: #3e3e3e;
	font-family: "teachers", "Microsoft YaHei", "Arial", sans-serif;
	font-weight: 300;
	overflow-x: hidden;
}

body {
	opacity: 0;
}

b,
strong {
	font-weight: 600;
}

textarea,
input,
select {
	font-family: "teachers", "Microsoft YaHei", "Arial";
	font-size: 0.875rem;
	outline: none;
	border: none;
}

button {
	border: none;
}


.intro {
	height: 200vh;
	width: 100%;
	position: relative;
}


.about-box {
	padding: 10vw 0px;
	position: relative;
	z-index: 2;
}

.parallax {
	width: 10%;
	height: auto;
	position: absolute;
	left: 15%;
	top: 45%;
	will-change: transform;
}

.parallax.parallax1 {
	transform: rotate(15deg);
}

.parallax.parallax2 {
	width: 30%;
	filter: blur(10px);
	left: -10%;
	top: 35%;
}

.intro-center {
	width: 50%;
	margin: 0px auto;
	text-align: center;
}

.intro-center h1 {
	font-size: 3.5vw;
	font-weight: 400;
	margin-bottom: 3vw;
}

.intro-center .desc {
	line-height: 2;
	margin-top: 3vw;
}

.line-p{
	width: 100%;
	overflow: hidden;
}

.line-p.b{
	font-size: 0.875rem;
}

.line-p p{
	transform: translateY(100%);
	transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
	will-change: transform;
}

.line-p:nth-child(2) p{
	transition-delay: 0.05s;
}

.line-p:nth-child(3) p{
	transition-delay: 0.1s;
}

.line-p:nth-child(4) p{
	transition-delay: 0.15s;
}

.line-p:nth-child(5) p{
	transition-delay: 0.2s;
}

.line-p:nth-child(6) p{
	transition-delay: 0.25s;
}

.line-p:nth-child(7) p{
	transition-delay: 0.3s;
}

.line-p:nth-child(8) p{
	transition-delay: 0.35s;
}

.line-p:nth-child(9) p{
	transition-delay: 0.4s;
}

.line-p:nth-child(10) p{
	transition-delay: 0.45s;
}

.is-inview .line-p p{
	transform: translateY(0%);
}

.center {
	width: 47rem;
	margin: 0px auto;
	margin-top: 10vh;
	text-align: center;
	color: #fff;
	line-height: 2;
}

.center img {
	margin-bottom: 5vw;
}

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



.intro h1 {
	color: #ffffff;
	font-size: 5vw;
	text-align: center;
}

.center2 {
	color: #737373;
	font-size: 1.25rem;
}

.banner img {
	width: 100%;
	height: 100%;
}

.bg {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100lvh;
	margin-top: -100lvh;
	z-index: -1;
}

.bg .video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #48c1ea;
}

.bg .video .img,
.bg .video .img img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.bg .is-video-hero {
	z-index: 1;
}

.bg .color video,
.bg .video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bg .is-video-hero {
	position: absolute;
	z-index: 2;
}

.bg .is-video-water:before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: rgba(0, 153, 180, .5);
	display: none;
}

.bg .is-set-mask {
	--mask-position: 30% -30%;
	will-change: mask-position;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: url(../images/mask.png);
	-webkit-mask-size: 800% 300%;
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	visibility: inherit;
}



.bg .is-color-white {
	position: absolute;
	z-index: 4;
	background: url(../images/bg3.jpg) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.main {
	position: relative;
	z-index: 2;
}

header {
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s;
}

header::before {
	width: 100%;
	height: 20vh;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background-image: linear-gradient(180deg, rgba(77, 194, 233, 0.5), rgba(77, 194, 233, 0));
	pointer-events: none;
}

.header-box {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	padding: 2vw 5%;
	align-items: center;
}

header.active {
	opacity: 1;
	pointer-events: auto;
}

.cols-right {
	width: auto;
	display: flex;
	align-items: center;
	gap: 1vw;
}

.logo {
	width: 10vw;
	position: relative;
}

nav {
	width: auto;
	font-size: 0.875rem;
}

nav ul {
	display: flex;
}

nav ul li {
	width: auto;
	height: auto;
	position: relative;
}

nav ul li a {
	color: #fff;
	padding: 0 1.5vw;
	display: block;
	text-transform: capitalize;
}

.hero {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.hero h1 {
	width: 35%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.char {
	opacity: 0;
}

.slogan {
	width: 90%;
	height: auto;
	position: absolute;
	left: 5%;
	top: 25%;
}

.slogan.c {
	top: 45%;
}

.bimg {
	width: 450px;
	margin: 0px auto;
}

.warp {
	width: 100%;
	position: relative;
	z-index: 2;
}

.circle {
	width: 25%;
	height: auto;
	position: absolute;
	right: 5%;
	top: 15vw;
	z-index: 2;
	pointer-events: none;
}

.circle img {
	animation: bubble 8s ease-in-out infinite;
}

.circle.active {
	top: 56vw;
	width: 10%;
	right: 15%;
}

@-webkit-keyframes bubble {

	0%,
	100% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.01, .98);
	}

	40% {
		transform: scale(.995, 1.05);
	}

	60% {
		transform: scale(1.05, .99);
	}

	80% {
		transform: scale(.98, 1.025);
	}
}

.yuan-box {
	width: 100%;
	height: auto;
	position: relative;
	background: #eff4fa;
}

.yuan-box .img {
	width: 50%;
	height: auto;
	position: relative;
	margin: 0px auto;
}

.yuan-box .item {
	width: 10vw;
	height: 10vw;
	position: absolute;
	left: 50%;
	top: 50%;
	cursor: pointer;
}

.yuan-box .item:hover .box {
	background: #9edbf0;
	padding-top: 25%;
}



.yuan-box .item:nth-child(1) {
	left: 3%;
}

.yuan-box .item:nth-child(2) {
	left: 60%;
	top: 5%;
}

.yuan-box .item:nth-child(3) {
	top: 70%;
	left: 65%;
}

.yuan-box .item .box {
	width: 100%;
	height: 100%;
	padding: 1vw;
	background: #f8f9fd;
	text-align: center;
	border-radius: 50%;
	padding-top: 30%;
	transition: all 0.3s;
}



.yuan-box .item .name {
	width: 100%;
	font-size: 1.125rem;
	margin-bottom: 0.25vw;
}

.yuan-box .item .desc {
	width: 100%;
	line-height: 1.5;
	font-size: 0.7vw;
	opacity: .7;
}

.yuan-box .item .plus {
	width: 2vw;
	height: 2vw;
	line-height: 2vw;
	text-align: center;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	left: 50%;
	top: 70%;
	margin-left: -1vw;
	transform: scale(0);
	transition: all 0.5s;
}

.yuan-box .item:hover .plus {
	transform: scale(1);
}

.banner .next,
.banner .prev {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 70%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 5;
	background: #fff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	color: rgba(77, 194, 233, 1);
	font-size: 1.5rem;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, .15);
}

.banner .next:hover,
.banner .prev:hover {
	background: rgba(77, 194, 233, 1);
	color: #fff;
}

.banner .next {
	right: 5%;
}

.banner .prev {
	left: 5%;
}

.product-box {
	width: 100%;
	display: flex;
	height: 100vh;
	flex-wrap: wrap;
	align-items: center;
	z-index: 2;
	background: #eff3fa;
}

.product-box.even {
	direction: rtl;
}

.product-box.even .box {
	direction: ltr;
}

.product-box .gallery {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 4;
}

.product-box .gallery .img,
.product-box .gallery .img img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.mzsm {
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 1vw;
	color: #fff;
	font-size: 0.875rem;
}

.product-box .gallery .img img {
	height: auto;
	transform: translateY(0%);
	will-change: transform;
}

.product-cols {
	width: 50%;
	height: auto;
}

.yg-more {
	width: 150px;
	height: auto;
	text-align: center;
	position: relative;
	margin: 0px auto;
	display: flex;
	justify-content: center;
}

.yg-more a {
	color: #4DC2E9;
	width: auto;
	font-size: 0.75rem;
}

.product-cols .box-top {
	width: 100%;
	text-align: center;
	margin-bottom: 2.5vw;
	padding: 0px 8vw;
}

.product-cols .box-top .name {
	font-size: 2rem;
	margin-bottom: 1vw;
}

.five-bg2 img {
	animation: fiveAnimate 6s linear infinite;
}

@-webkit-keyframes fiveAnimate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.product-cols .box-top .name span {
	color: #367DC7;
}

.product-box2 .product-cols .box-top .name span {
	color: #E8D15B;
}

.product-cols .box-top .desc {
	width: 100%;
	height: auto;
	line-height: 1.3;
	color: rgba(0, 0, 0, .5);
	font-size: 0.875rem;
}

.product-swiper {
	position: relative;
	margin: 0px 8vw;
	margin-bottom: 2vw;
	z-index: 3;
	overflow: hidden;
}

.colorbg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.product-swiper .swiper-slide {
	position: relative;
	cursor: pointer;
}

.product-swiper .swiper-slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-swiper .swiper-slide:nth-child(2) a {
	transition-delay: 0.1s;
}

.product-swiper .swiper-slide .img {
	width: 100%;
	height: 0;
	padding-top: 146%;
	position: relative;
	overflow: hidden;
}

.product-swiper .swiper-slide .box {
	width: 100%;
	height: auto;
	border-radius: 0.5vw;
	background: #fff;
	position: relative;
}


.product-swiper .swiper-slide .img img {
	width: 70%;
	height: auto;
	position: absolute;
	left: 0%;
	bottom: 0%;
	transition: all 0.5s;
}

.product-swiper .swiper-slide:hover .img img {
	transform: scale(1.05);
}

.product-swiper .swiper-slide .info {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 1.5vw;
	line-height: 1.7;
	opacity: 1;
}

.product-swiper .swiper-slide .info .ms {
	width: 100%;
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.6;
}

.culture-box {
	position: relative;
	z-index: 2;
	padding-top: 0vw;
	padding-bottom: 0vw;
	background: rgba(239, 243, 250, 1);
}

.monsi {
	padding: 6vw 0px;
	position: relative;
	z-index: 2;
	background: rgba(239, 243, 250, 1) url(../images/minsi-bg.jpg) center center no-repeat;
	background-size: contain;
}

.monsi::before {
	width: 100%;
	height: 100%;
	background: rgba(239, 243, 250, 1);
	opacity: 0.6;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
}

.culture-box>.w1400 {
	z-index: 3;
}

.img-line {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 65%;
}

.img-sec {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}

.img-sec .img {
	width: 100%;
	height: auto;
	position: relative;
	opacity: 0;
}

.img-sec .img:nth-child(2) {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
}


.img-sec .img.active {
	animation: opacityAnimation 7s linear 1;
}

@-webkit-keyframes opacityAnimation {

	0%,
	100% {
		opacity: 0;
	}

	20%,
	80% {
		opacity: 1;
	}
}


.img-sec .img img:nth-child(2) {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;

}

.img-left {
	width: 35%;
	height: auto;
	position: absolute;
	left: 8.5%;
	top: 70%;
	z-index: 2;
	color: #2193B9;
}

.img-left .name {
	font-size: 1.35rem;
}

.img-left .desc {
	line-height: 1.7;
	font-size: 0.875rem;
}

.img-left .desc {
	width: 100%;
	height: auto;
	line-height: 1.7;
}

.img-right {
	width: 35%;
	height: auto;
	position: absolute;
	right: 8.5%;
	top: 70%;
	z-index: 2;
	color: #2193B9;
	text-align: right;
}

.img-right .desc {
	line-height: 1.7;
	font-size: 0.875rem;
}

.footer {
	width: 100%;
	margin-top: 6vw;
	position: relative;
	padding-bottom: 6vw;
}

/* .footer::before{
	width: 100%;
	height: 43vw;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(../images/footer-bg.jpg) center center no-repeat;
	background-size: cover;
	pointer-events: none;
	content: '';
} */

.footer-img {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: 0;
}

.footer-img::after {
	width: 100%;
	height: 60%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background-image: linear-gradient(180deg, rgba(239, 243, 250, 1), rgba(239, 243, 250, 0));
	pointer-events: none;
}

.footer-img.bc::after {
	background-image: linear-gradient(180deg, rgba(171, 224, 244, 1), rgba(171, 224, 244, 0));
}

.footer .w1400 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer-left {
	width: 60%;
	background: rgba(255, 255, 255, .6);
	border-radius: 0.5vw;
	backdrop-filter: blur(5px);
	padding: 2vw;
	display: flex;
	justify-content: space-between;
}

.footer-left .item {
	width: 48%;
}

.footer-left .item .row {
	width: 100%;
	margin-bottom: 2vw;
}

.footer-left .item .row:last-child {
	margin-bottom: 0;
}

.footer-left .item .row .name {
	text-transform: capitalize;
	margin-bottom: 0.25vw;
}

.footer-left .item .row .desc {
	width: 100%;
	line-height: 1.5;
}

.footer-left .item .row .desc .row-con:first-child {
	margin-bottom: 1vw;
}

.socials {
	width: 100%;
	height: auto;
	display: flex;
	gap: 1vw;
	margin-top: 0.5vw;
}

.socials .row-box {
	width: 40px;
	height: auto;
	font-size: 1rem;
	text-align: center;
	cursor: pointer;
	position: relative;
}

.socials .row-box .icon::before {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.4s;
	background: rgba(255, 255, 255, .4);
	border-radius: 50%;
	opacity: 0;

}

.socials .row-box:hover .icon::before {
	opacity: 1;

}
.socials .row-box .icon i{
	position: relative;
	z-index: 2;
}
.socials .row-box .icon {
	width: 38px;
	height: 38px;
	line-height: 38px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 50px;
	will-change: transform;
	position: relative;
	z-index: 2;
}

.socials .row-box .txt{
	width: 140px;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    background: rgba(255, 255, 255, .5);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 0.875rem;
	opacity: 0;
	pointer-events: none;
	transition: all 0.35s;
}

.socials .row-box:hover .txt{
	opacity: 1;
	pointer-events: auto;
	top: -40px;

}

.socials .row-box:nth-child(2) {
	font-size: 0.875rem;
}

.footer-right {
	width: calc(40% - 20px);
}

.footer-right .fr-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.footer-right .fr-top .item {
	width: 32%;
	height: auto;
	position: relative;
	background: rgba(255, 255, 255, .6);
	border-radius: 0.5vw;
	padding: 0.75vw;
	backdrop-filter: blur(5px);
}

.fr-btom {
	width: 100%;
	height: auto;
	background: rgba(255, 255, 255, .6);
	border-radius: 0.5vw;
	padding: 1.25vw;
	backdrop-filter: blur(5px);
	font-size: 0.875rem;
}

.fr-btom .copyright {
	margin-bottom: 0.5vw;
	text-align: right;
}

.footer-left .item .row .desc p {
	font-size: 0.75rem;
}

.fr-nav {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.fr-nav a {
	color: rgba(0, 0, 0, .5);
	position: relative;
	font-size: 0.75rem;
}

.fr-nav a p {
	position: relative;
}

.fr-nav a p::after {
	width: 0%;
	height: 1px;
	position: absolute;
	right: 0%;
	bottom: 0;
	content: '';
	background: #333;
	transition: all 0.35s;
}

.fr-nav a:hover {
	color: #333;
}

.fr-nav a:hover p::after {
	right: none;
	left: 0;
	width: 100%;
}

.footer-right .fr-top .item .name {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-right .fr-top .item .icon {
	width: 25px;
	height: 25px;
	background: #fff;
	line-height: 25px;
	font-size: 0.65rem;
	text-align: center;
	border-radius: 50%;
	color: rgba(0, 0, 0, .5);
}

.footer-right .fr-top .item .img {
	width: 100%;
	margin-bottom: 0.5vw;
	border-radius: 0.5vw;
	overflow: hidden;
}

.footer-right .fr-top .item .img img {
	transition: all 0.5s;
}

.footer-right .fr-top .item:hover .img img {
	transform: scale(1.1);
}

.cultrues {
	width: 100%;
	height: auto;
	margin-top: 4vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2vw;
	padding-bottom: 6vw;
}

.common-name.c {
	text-align: center;
}

.common-name,.contact-name {
	width: 100%;
	position: relative;
}

.contact-name{
	text-align: center;
	margin-bottom: 3vw;
}

.common-name .name,.contact-name .name {
	font-size: 2rem;
	margin-bottom: 0.5vw;
}

.intro-center .common-name .name{
	font-size: 3rem;
}

.common-name .desc,.contact-name .desc {
	color: rgba(0, 0, 0, .5);
	font-size: 0.875rem;
}

.search-box {
	width: 35px;
	height: 35px;
	position: relative;
	display: block;
	line-height: 35px;
	color: #fff;
	font-size: 1.45rem;
	cursor: pointer;
	text-align: center;
}

.shop-car{
	width: 35px;
	height: 35px;
	position: relative;
	display: block;
	line-height: 35px;
	color: #fff;
	font-size: 1.45rem;
	cursor: pointer;
	text-align: center;
}

.cultrues .item {
	width: 100%;
	height: auto;
	position: relative;
	background: rgba(255, 255, 255, .5);
	padding: 3vw 1.5vw;
	border-radius: 0.5vw;
	box-shadow: 15px 15px 35px rgba(0, 0, 0, .015);
}

.cultrues .item .box {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	padding: 2vw 1vw;
	background: #4DC2E9;
	transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
	clip-path: circle(0 at 50% 100%);
	line-height: 1.7;
	border-radius: 0.5vw;
}

.cultrues .item:hover .box {
	clip-path: circle(140% at 50% 100%);
}

.cultrues .item .box .content {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	font-size: 0.875rem;
}

.cultrues .item:nth-child(2) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.cultrues .item:nth-child(3) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.cultrues .item:nth-child(4) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.cultrues .item .icon {
	width: 80%;
	height: auto;
	position: relative;
	transition: all .5s;
	transform: translateY(0);
	opacity: 1;
}

.cultrues .item:hover .icon {
	transform: translateY(-15px);
	opacity: 0;
}

.cultrues .item:hover .info {
	transform: translateY(-25px);
	opacity: 0;
}

.cultrues .item .info {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -2vw;
	transition: all .5s;
	transform: translateY(0);
	opacity: 1;
}

.cultrues .item .info .desc {
	width: 100%;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, .5);
	font-size: 0.875rem;
}

.cultrues .item .info .name {
	width: 100%;
	margin-bottom: 0.25vw;
	font-size: 1.125rem;
}

.banner-swiper {
	width: 100%;
	height: 100vh;
}

.five-box {
	height: 60vw;
	position: relative;
	background: #eff3fa;
	width: 100%;
}

.five-center {
	width: 40vw;
	height: 40vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.five-bg {
	width: 40vw;
	height: 40vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.five-name {
	width: 40%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
}

.five-name img:nth-child(2) {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.five-name img.five-img1 {
	opacity: 0;
	transform: scale(0.75);
}

.five-center .list {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transform: rotate(30deg);
	will-change: transform;
}

.five-center .list .item {
	width: 10vw;
	height: 10vw;
	position: absolute;
	left: 50%;
	top: 50%;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.five-center .list .item::before,
.five-center .list .item::after {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	content: '';
	background: rgba(77, 194, 233, .1);
	pointer-events: none;
	animation: itemAnimation 3s ease infinite;
}

.five-center .list .item::after {
	animation-delay: 1s;
}

@-webkit-keyframes itemAnimation {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}


.five-center .list .item .box {
	width: 100%;
	height: 100%;
	padding: 1vw 0.5vw;
	background: #f8f9fd;
	text-align: center;
	border-radius: 50%;
	transition: all 0.3s;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
	position: relative;
	z-index: 2;
}

.five-center .list .item:hover .box {
	transform: scale(1.1);
	color: #fff;
}

.five-center .list .item .box::before {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background: #4DC2E9;
	border-radius: 50%;
	transform: scale(0);
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.five-center .list .item:hover .box::before {
	opacity: 1;
	transform: scale(1);
}

.five-center .list .item .name {
	width: 100%;
	font-size: 1.25vw;
	margin-bottom: 0.25vw;
	transform: translateY(0px);
	transition: all 0.5s;
	position: relative;
}

.five-center .list .item .desc {
	width: 100%;
	line-height: 1.3;
	font-size: 0.75rem;
	transform: translateY(0px);
	position: relative;
	transition: all 0.5s;
}

.five-center .list .item:hover .desc,
.five-center .list .item:hover .name {
	transform: translateY(-1vw);
}

.five-center .list .item .icon {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	transition: all 0.5s;
	left: 50%;
	transform: translateX(-50%) scale(0);
	top: 70%;
}

.five-center .list .item:hover .icon {
	transform: translateX(-50%) scale(1);
}

.five-center .list .item .icon span {
	width: 10px;
	height: 1px;
	position: absolute;
	left: 50%;
	top: 50%;
	content: '';
	background: #4DC2E9;
	transform: translate(-50%, -50%);
}

.five-center .list .item .icon::after {
	width: 1px;
	height: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	content: '';
	background: #4DC2E9;
	transform: translate(-50%, -50%);
}

.five-circle {
	width: 10vw;
	height: 10vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}

.five-circle:hover .img,.five-circle:hover .desc{
	opacity: 0.5;
}

.five-circle .img {
	width: 100%;
	margin-bottom: 1vw;
}

.five-circle .desc{
	font-size: 0.875rem;
}

.sky-warp {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
}

.product-show {
	background: #abe0f4;
	min-height: auto;
}

.product-show {
	position: relative;
}

.sidai {
	width: 90%;
	height: auto;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	pointer-events: none;
}

.sky-text {
	width: 50%;
	height: auto;
	position: absolute;
	color: #fff;
	text-transform: capitalize;
	top: 15vw;
	font-size: 4vw;
	will-change: transform;
}

.sky-text .sky-default {
	width: 100%;
	height: auto;

}

.sky-text .sky-mask {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.sky-text.sky-text1 {
	left: 5%;
}

.sky-text.sky-text2 {
	right: 5%;
	text-align: right;
	top: 27vw;
	z-index: 3;
}

.scroll-tips {
	width: 15px;
	height: 125px;
	padding-left: 10px;
	position: absolute;
	left: 5%;
	top: 80vh;
	border-left: 1px solid #fff;
	color: #fff;
}

.scroll-tips.c {
	left: 50%;
	height: 80px;
	top: 87vh;
}

.scroll-tips.c p {
	left: 50%;
	transform: translateX(-50%) rotate(0deg);
	top: -20px;
}

.scroll-tips p {
	position: absolute;
	font-size: 0.6rem;
	text-transform: uppercase;
	width: 100px;
	transform: rotate(90deg);
	transform-origin: left top;
	top: 0;
	left: 20px;
	letter-spacing: 1px;
}

.scroll-tips::after,
.scroll-tips::before {
	width: 5px;
	height: 1px;
	position: absolute;
	bottom: 0;
	content: '';
	background: #fff;
	left: 0;
	transform: rotate(-45deg);
	transform-origin: left bottom;
}

.scroll-tips::before {
	left: -6px;
	transform: rotate(45deg);
	transform-origin: right bottom;
}

.people {
	width: 84%;
	height: auto;
	position: absolute;
	left: 8%;
	top: 56vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9vw;
}

.people .item {
	width: 100%;
	height: auto;
	position: relative;
}

.people .item:nth-child(1) {
	top: 15vw;
}

.people .item:nth-child(2) {
	top: 11vw;
}

.people .item:nth-child(3) {
	top: 5vw;
}

.people .item a {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	border: 3px solid transparent;
	border-radius: 0.5vw;
	transition: all 0.35s;
	overflow: hidden;
}

.people .item a:hover {
	border-color: #fff;
}

.people .item a .box {
	width: 100%;
	height: auto;
	position: relative;
}

.people .item a .box .btm {
	width: 100%;
	height: auto;
	position: relative;
	background: #fff;
	text-align: center;
	padding: 1vw 0.5vw;
	transform: translateY(50%);
	transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
	opacity: 0;
}

.people .item:hover a .box .img .icon {
	opacity: 0;
	
}

.people .item:hover a .box .btm {
	transform: translateY(0%);
	opacity: 1;
}

.people .item a .box .btm .desc {
	margin-bottom: 0.25vw;
	font-size: 0.75rem;
	opacity: 0.7;
}

.people .item a .box .btm .name {
	width: 100%;
	font-size: 1rem;
}

.people .item a .box .img {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0vw;
	transition: all 0.5s;
}

.people .item:hover a .box .img {
	padding: 1vw;
}

.people .item a .box .img img {
	width: 100%;
	aspect-ratio: 100 / 137;
}

.people .item a .box .img .icon {
	width: 35px;
	height: 35px;
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%) scale(0.4);
	background: transparent;
	border-radius: 50%;
	line-height: 35px;
	text-align: center;
	color: #fff;
	transition: all 0.5s;
}

.people .item:nth-child(3) a .box .img .icon{
	top: 45%;
    left: 55%;
}

.people .item:nth-child(4) a .box .img .icon{
	left: 57%;
    top: 40%;
}

.people .item a .box .img .icon i{
	opacity: 0;
}
.people .item a .box .img .icon span{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.people .item a .box .img .icon::before,.people .item a .box .img .icon::after,.people .item a .box .img .icon span::before,.people .item a .box .img .icon span::after{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
	opacity: 0;
	border-radius: 50%;
	content: '';
	animation: peopleAnimation 3s ease infinite;
}

.people .item a .box .img .icon span::after{
	animation-delay: 2.25s;
}

.people .item a .box .img .icon span::before{
	animation-delay: 1.5s;
}

.people .item a .box .img .icon::after{
	animation-delay: 0.75s;
}
@-webkit-keyframes peopleAnimation{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 0.5;
		transform: scale(2);
	}
	100%{
		opacity: 0;
		transform: scale(4.5);
	}
}

.product-list {
	width: 100%;
	margin-top: 4vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3vw;
	z-index: 2;
	position: relative;
	margin-bottom: 2vw;
}

.product-warp {
	width: 100%;
	margin-bottom: 12vw;
}

.product-list .item {
	width: 100%;
	height: auto;
	position: relative;
}

.product-list .item a {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	border: 3px solid #fff;
	border-radius: 0.5vw;
}

.product-list .item a .img {
	width: 100%;
    height: auto;
    position: relative;
    aspect-ratio: 1;
}

.product-list .item a .img img{
	height: 70%;
	width: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.product-show .common-name .desc {
	width: 100%;
	padding: 0% 25%;
}

.product-list .item a .btm {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0px 2vw;
	padding-bottom: 2vw;
}

.product-list .item a .btm .name {
	width: 100%;
	height: auto;
	position: relative;
	font-size: 1.25rem;
	margin-bottom: 0.75vw;
}

.product-list .item a .btm .info .title {
	width: 100%;
	margin-bottom: 0.25vw;
}

.product-list .item a .btm .info .desc {
	width: 100%;
	font-size: 0.875rem;
	line-height: 1.3;
	min-height: 2.35rem;
	opacity: 0.6;
}

.yg-tips {
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 2;
	font-size: 0.75rem;
	color: rgba(0, 0, 0, .35);
}

.boundless {
	width: 100%;
	height: auto;
	position: relative;
	padding-top: 15vw;
	background: #eff3fa;
	overflow: hidden;
}

.boun-img {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
}

.bound-box {
	width: 90%;
	height: auto;
	margin: 0px auto;
	display: flex;
	justify-content: space-between;
	z-index: 2;
	position: relative;
	align-items: flex-start;
}

.bound-grally {
	width: 40%;
	position: relative;
}

.bound-grally .img {
	width: 100%;
	margin: 0px auto;
}

.bound-content {
	width: 50%;
	height: auto;
	position: relative;
	background: #F9F9F9;
	padding: 5vw 3vw;
	border-radius: 0.5vw;
	padding-bottom: 3vw;
	clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
	transition: all 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.bound-box.is-inview .bound-content {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bc-top {
	width: 100%;
	height: auto;
	position: relative;
}

.bc-top .title {
	width: 100%;
	font-size: 3vw;
	margin-bottom: 0.5vw;
	overflow: hidden;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.bc-top .desc {
	width: 100%;
	height: auto;
	position: relative;
	line-height: 1.7;
	color: #737373;
	margin-bottom: 3vw;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
	font-size: 0.875rem;
}

.bc-cate {
	width: 100%;
	display: flex;
	gap: 0.5vw;
	position: relative;
	margin-bottom: 2vw;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.bc-cate .cat {
	width: auto;
	height: auto;
	line-height: 20px;
	position: relative;
	cursor: pointer;
	border-radius: 40px;
	padding: 5px 10px;
	font-size: 0.875rem;
}

.bc-cate .cat.active,
.bc-cate .cat:hover {
	background: #4DC2E9;
	color: #fff;
}

.calc-box {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1.5vw;
	margin-bottom: 2vw;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.calc-con {
	width: auto;
	display: flex;
	align-items: center;
	position: relative;
	gap: 0.25vw;
}

.calc-box .txt {
	font-size: 0.875rem;
}

.calc-con .cbm {
	width: 25px;
	height: 25px;
	position: relative;
	border-radius: 50%;
	line-height: 25px;
	text-align: center;
	cursor: pointer;
	background: #D9D9D9;
	font-size: 0.75rem;
}

.calc-con .cbm span {
	width: 10px;
	height: 1px;
	position: absolute;
	display: block;
	background: #3e3e3e;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.calc-con .cbm.tj::after {
	width: 1px;
	height: 10px;
	position: absolute;
	display: block;
	background: #3e3e3e;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
}

.calc-con input {
	width: 20px;
	text-align: center;
	background: transparent;
}

.cart-btn {
	width: 60%;
	height: auto;
	position: relative;
	padding: 10px 0px;
	cursor: pointer;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}

.cart-btn::before {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background: #4DC2E9;
	border-radius: 50px;
}

.cart-btn p {
	position: relative;
	text-align: center;
	font-size: 0.875rem;
	color: #fff;
}

.para-list {
	width: 100%;
	margin-top: 3vw;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2vw;
}

.para-list .item {
	width: 20%;
	height: auto;
	position: relative;
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s;
}

.para-list .item:nth-child(2) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s;
}

.para-list .item:nth-child(3) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
}

.para-list .item:nth-child(4) {
	transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.85s;
}

.para-list .item .img {
	width: 50px;
	padding: 10px;
	height: auto;
	background: #fff;
	border-radius: 50%;
	margin: 0px auto;
	position: relative;
	margin-bottom: 0.5vw;
}

.para-list .item .txt {
	width: 100%;
	text-align: center;
	color: #737373;
	font-size: 0.75rem;
}

.detail-content {
	width: 90%;
	margin-left: 5%;
	position: relative;
	margin-top: 6vw;
	margin-bottom: 6vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.detail-content .cols-left {
	width: 65%;
}

.detail-content .insgram {
	width: 100%;
	margin-bottom: 25px;
	position: relative;
	display: none;
}

.detail-right {
	width: calc(35% - 50px);
	position: relative;
	overflow: hidden;
	border-radius: 1vw;
}

.detail-right .box {
	width: 100%;
	height: 100%;
	padding: 2vw;
	position: relative;
	background: linear-gradient(to bottom right, var(--boxcolor), var(--midcolor), var(--boxcolor));
}

.detail-right .top {
	width: 100%;
	margin-bottom: 1vw;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	padding-bottom: 0.5vw;
}

.detail-list {
	width: 100%;
	height: auto;
	position: relative;
}

.five-img1{
	width: 100%;
	position: absolute;
	left: 0;
	top: 7%;
	text-align: center;
	font-size: 2rem;
	z-index: 2;
}

.five-img1 .p{
	overflow: hidden;
}

.five-img1 .p p{
	transform: translateY(100%);
}

.five-img2{
	opacity: 0;
	transform: scale(1.2);
	will-change: transform;
}

.detail-list .item {
	width: 100%;
	position: relative;
	height: 8vw;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.detail-list .item .img {
	width: 70px;
	position: relative;
	opacity: 0.3;
	transform: scale(0.75);
	transition: all 0.5s;
}

.detail-list .item.active .img {
	opacity: 1;
	transform: scale(1);
}

.detail-list .item .txt {
	width: calc(50% - 50px);
	height: auto;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1.7;
	transition: all 0.5s;
	font-size: .875rem;
}

.detail-list .item:nth-child(even) .txt {
	left: auto;
	right: 0;
	text-align: right;
}

.detail-right .top .name {
	width: 100%;
	height: auto;
	position: relative;
	font-size: 1.75rem;
}

.detail-right .top .desc {
	font-size: 0.875rem;
}

.detail-right .pics {
	width: 60%;
	height: auto;
	margin: 0px auto;
}

.product-wrap {
	position: relative;
}

.product-show.bc {
	background: #eff3fa;
}



.pz-img {
	width: 53.4%;
	height: auto;
	position: absolute;
	top: 63.1vw;
}

.voyages {
	width: 90%;
	height: auto;
	position: absolute;
	left: 5%;
	top: 55vw;
	background: rgba(26, 181, 233, 0.25);
	backdrop-filter: blur(5px);
	padding: 5vw;
	color: #fff;
	border-radius: 1vw;
	/* background-image: linear-gradient(0deg,rgba(26, 181, 233, 0.75), rgba(26, 181, 233, 0)); */
}

.all-center {
	width: 70%;
	height: auto;
	position: absolute;
	left: 15%;
	top: 20vw;
	text-align: center;
	color: #fff;
	font-size: 3vw;
	line-height: 1.5;
}

.all-text .sky-default {
	width: 100%;
	height: auto;

}

.all-text .sky-mask {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.all-centent {
	width: 60%;
	height: auto;
	position: absolute;
	left: 20%;
	top: 45vw;
	text-align: center;
}

.all-centent .name {
	font-size: 2vw;
	margin-bottom: 1vw;
	overflow: hidden;
	position: relative;
}


.all-centent .desc {
	width: 100%;
	line-height: 1.5;
	font-size: 1.2vw;
	position: relative;
}

.voyage-list {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.voyage-list .item {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, .5);
	position: relative;
	padding-top: 1.5vw;
	padding-right: 4vw;
}

.voyage-list .item .dot {
	width: 10px;
	height: 10px;
	position: absolute;
	left: 0;
	top: -5px;
	content: '';
	background: #fff;
	border-radius: 50%;
}

.voyage-list .item .desc {
	font-size: 0.75rem;
	opacity: 0.6;
	margin-bottom: 0.5vw;
}

.voyage-name .desc{
	font-size: 0.75rem;
}

.voyage-list .item .name {
	width: 100%;
	font-size: 1.125rem;
}

.voyage-name {
	width: 100%;
	text-align: right;
	position: relative;
	margin-top: 8vw;
}

.voyage-name .name {
	width: 100%;
	height: auto;
	position: relative;
	font-size: 1.5rem;
	margin-bottom: 1vw;
}

.all-wrap {
	width: 100%;
	height: auto;
	position: relative;
	background: #eff3fa;
}

.company-box {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0 5vw;
	z-index: 2;
}

.company-list {
	width: 100%;
	height: auto;
	position: relative;
}

.company-list .item {
	width: 40%;
}

.company-list .item:last-child {
	margin-bottom: 5vw;
}

.company-list .item:nth-child(even) {
	width: 40%;
	margin-left: 60%;
}

.company-list .item .c-top {
	width: 100%;
}

.company-list .item .c-name {
	font-size: 2vw;
	font-weight: 500;
	margin-bottom: 1vw;
	position: relative;
	display: flex;
	justify-content: space-between;
}

.company-list .item .c-name .n {
	width: calc(100% - 80px);
	line-height: 50px;
	position: relative;
}

.company-list .item .c-name .n::after {
	width: 0%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	background: rgba(0, 0, 0, .3);
	transition: all 0.5s;
}

.download-pdf {
	width: auto;
    height: auto;
    display: inline-flex;
    line-height: 45px;
    text-align: center;
    border-radius: 100px;
    margin-bottom: 2vw;
    padding: 0px 15px;
    background: rgba(255, 255, 255, .75);
    font-size: 0.875rem;
    align-items: center;
    gap: 1vw;
}

.download-pdf:hover{
	background: rgba(77, 194, 233, 0.6);
	color: #fff;
}

.download-pdf:hover .icon{
	color: rgba(77, 194, 233, 0.6);
	background: #fff;
}

.download-pdf .icon{
	width: 30px;
    height: 30px;
    background: rgba(77, 194, 233, 0.6);
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

.company-list .item .c-name:hover .n::after {
	width: 100%;
}

.company-list .item .c-name .i {
	width: 50px;
	height: auto;
	line-height: 50px;
	font-size: 1rem;
	opacity: 0;
	transform: translateX(10px);
	transition: all 0.5s;
}


.company-list .item .c-name:hover .i {
	opacity: 1;
	transform: translateX(0px);
}

.company-list .item .c-desc {
	width: 100%;
	margin-bottom: 3vw;
}

.company-list .item .c-img {
	width: 100%;
	height: auto;
	border-radius: 1vw;
	overflow: hidden;
	
}

.company-list .item .c-img a{
	position: relative;
	display: block;
	clip-path: polygon( 0% 0%, 100% 0%, 100% 0%, 0% 0%);
	transition: all 0.75s cubic-bezier(0.86, 0, 0.07, 1);
	will-change: transform;
}

.company-list .item .c-img a::after{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background: rgba(77, 194, 233, 1);
	transform-origin: center bottom;
	transition: all 0.75s cubic-bezier(0.86, 0, 0.07, 1) 0.5s;
	will-change: transform;
}

.company-list .item .c-img a img{
	transform: scale(1.1);
	transition: all 4s cubic-bezier(0.215, 0.610, 0.355, 1) 0.5s;
	will-change: transform;
}

.company-list .item .c-img.is-inview a{
	clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.company-list .item .c-img.is-inview a::after{
	transform: scaleY(0);
}

.company-list .item .c-img.is-inview a img{
	transform: scale(1);
}

.company-list .item .c-desc .c-title {
	width: 100%;
	font-size: 1.25rem;
	margin-bottom: 0.5vw;
}

.company-list .item .c-desc .c-info {
	width: 100%;
	height: auto;
	line-height: 1.5;
	font-size: 0.875rem;
	opacity: 0.6;
}

.build-name {
	text-align: center;
	width: 100%;
}

.company-line {
	width: 1px;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	content: '';
	background: rgba(0, 0, 0, .05);
}

.cimpany-circle {
	width: 5vw;
	height: auto;
	position: absolute;
	left: 50%;
	margin-left: -2.5vw;
	top: 0;
}

.cimpany-circle span {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	color: #367DC7;
}

.build-box {
	width: 100%;
	height: auto;
	position: relative;
	padding: 6vw 0;
	z-index: 2;
	background: url(../images/minsi-bg.png) center center no-repeat;
	background-size: contain;
	overflow: hidden;
}

.build-box::before {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background: rgba(255, 255, 255, .6);
}

.build-name {
	width: 100%;
	text-align: center;
	margin-bottom: 3vw;
	position: relative;
}

.build-name .name {
	font-size: max(2.5vw, 1.75rem);
	margin-bottom: 0.5vw;
}

.build-name .desc {
	color: rgba(0, 0, 0, .5);
}

.build-list {
	width: 100%;
	height: auto;
	position: relative;
	height: auto;
}

.build-list .item {
	width: 20vw;
}

.build-list .item .box {
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(10px);
	border-radius: 0.5vw;
	padding: 3vw 4vw;
	text-align: left;
}

.build-list .item .box .icon {
	width: 85%;
	max-width: 150px;
	pointer-events: none;
}

.build-list .item .box .number {
	width: 100%;
	margin-top: -3vw;
	margin-bottom: 1vw;
}

.build-list .item .box .info {
	width: 100%;
	height: auto;
	position: relative;
}

.build-list .item .box .info .name {
	font-size: 1.125rem;
	font-weight: 500;
	margin-bottom: 1vw;
}

.build-list .item .box .info .desc {
	line-height: 1.6;
	min-height: 115px;
	font-size: 0.875rem;
}

.market-warp {
	padding: 6vw 5vw;
	position: relative;
	z-index: 2;
}

.market-grally {
	width: 80%;
	height: 35vw;
	position: relative;
	overflow: hidden;
	border-radius: 1vw;
	margin: 0px auto;
}

.market-grally .img,
.market-grally .img img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.market-box {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: 3vw;
}

.market-list {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.market-list .item {
	position: absolute;
	width: 20vw;
	height: auto;
	left: 0;
	top: 0;
}

.market-list .item .box {
	width: 100%;
	height: auto;
	position: relative;
	padding: 2vw;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	border-radius: 1vw;
}

.market-list .item:nth-child(1) {
	top: 10vw;
}

.market-list .item:nth-child(2) {
	left: 25%;
	top: 15vw;
}

.market-list .item:nth-child(3) {
	left: 45%;
	top: 30vw;
}

.market-list .item:nth-child(4) {
	left: auto;
	right: 5%;
	top: 10vw;
}

.market-list .item .name {
	margin-bottom: 0.5vw;
	font-weight: 600;
	text-align: center;
}

.market-list .item .desc {
	line-height: 1.3;
    font-size: 0.875rem;
    opacity: 0.7;
}

.contact-wrap {
	width: 100%;
	padding: 6vw 5vw;
	position: relative;
	z-index: 2;
	padding-top: 12vw;
}

.contact-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 3vw;
}

.contact-box .contact-img {
	width: 45%;
	border-radius: 0.5vw;
	overflow: hidden;
}

.contact-box .con-cols {
	width: 50%;
	background: rgba(255, 255, 255, .5);
	padding: 3vw;
	border-radius: 1vw;
}

.contact-box .con-cols .name{
	font-size: 1.35rem;
	margin-bottom: 0.5vw;
}

.contact-box .con-cols .desc {
	width: 100%;
	line-height: 1.5;
	margin-bottom: 2vw;
	font-size: 0.875rem;
	opacity: 0.6;
}

.container.transparent {
	background: transparent;
}

.cart-warp {
	width: 35%;
	height: 100%;
	position: absolute;
	background: #fff;
	padding: 3vw;
	right: 0;
	top: 0;
	overflow-y: auto;
}

.cart-tips {
	width: 100%;
	line-height: 1.7;
	position: relative;
	font-size: 0.875rem;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	padding-bottom: 1.5vw;
	margin-bottom: 2vw;
}

.cart-warp .form .row {
	margin-bottom: 0.5vw;
	display: flex;
	font-size: 0.875rem;
	justify-content: space-between;
	align-items: center;
}

.cart-mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0px;
}

.cart-warp .form .row .label {
	width: 165px;
    line-height: 20px;
    
}

.cart-warp .form .row .input-box {
	width: calc(100% - 165px);
	position: relative;
}

.cart-warp .form .row input {
	border: 1px solid rgba(0, 0, 0, .1);
}

.cart-warp .form .row .input-box .radio-item {
	width: 100%;
	height: auto;
	position: relative;
	padding-left: 25px;
	line-height: 35px;
	cursor: pointer;
}

.cart-warp .form .row .input-box .radio-item::before {
	width: 18px;
	height: 18px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 1px solid rgba(0, 0, 0, .1);
	content: '';
}

.cart-warp .form .row .input-box .radio-item::after {
	width: 18px;
	height: 18px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scale(0.8);
	content: '';
	background: url(../images/right-icon.png) no-repeat;
	background-size: cover;
	opacity: 0;
}

.light-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.cart-warp .form .row .input-box .radio-item.active::after {
	opacity: 1;
}

.cart-warp .form .row:nth-child(2) .input-box {
	padding: 5.5px 0px;
}

.cart-submit {
	width: 50%;
	height: auto;
	font-size: 0.875rem;
	position: relative;
	padding: 12px 15px;
	background: #4DC2E9;
	color: #fff;
	cursor: pointer;
	text-align: center;
	margin: 0px auto;
}

.cart-submit.active {
	opacity: 0.5;
	cursor: no-drop;
}

.cart-submit p {
	position: relative;
}

.cart-warp .form {
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	padding-bottom: 1.5vw;
	margin-bottom: 2vw;
}

.cart-close {
	width: 45px;
	height: 45px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1;
	font-size: 1.3rem;
	cursor: pointer;
	line-height: 45px;
	text-align: center;
	transform: rotate(45deg);
	transition: all 0.5s;
}

.cart-close:hover {
	transform: rotate(135deg);
}

.scale-ele {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	border-radius: 0.5vw;
	background: #fff;
	top: 0;
	z-index: 1000;
	opacity: 0;
	will-change: width, height, border-radius, transform;
}


.wheel-slider {
	position: relative;
	margin-top: 3vw;
}

.wheel-slider .swiper-container {
	z-index: 2;
	width: 100%;
	height: auto;
	display: flex;
	position: relative;
	transform: perspective(1200px);
}

.wheel-slider .swiper-wrapper {
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	display: flex;
	position: relative;
}

.wheel-slider .swiper-slide {
	width: 25vw;
	height: auto;
	text-align: center;
	flex: none;
	transition: all .3s;
	position: relative;
	overflow: hidden;
}
.pro-swiper .swiper-slide{
	aspect-ratio: 1;
}
.pro-swiper .swiper-slide img{
	width: auto;
	height: 70%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* basic properties for the slider */
.swiper-wrapper {
	transform-style: preserve-3d;
	transition-property: transform;
	box-sizing: content-box;
}

/* basic properties for the slider */
.swiper-wrapper {
	transform-style: preserve-3d;
	transition-property: transform;
	box-sizing: content-box;
}

/* Fade text down if slide is not active */
#wheel-slider .swiper-slide .slide-heading,
#wheel-slider .swiper-slide .slide-category {
	-webkit-transform: translateY(140%);
	opacity: 0;
}

/* Fade category text up and down with a delay */
#wheel-slider .swiper-slide .slide-category {
	transition-delay: 0.4s;
}

/* Fade heading text up and down with a delay */
#wheel-slider .swiper-slide .slide-heading {
	transition-delay: 0.3s;
}

/* Transform the active slide */
#wheel-slider .swiper-slide.swiper-slide-active {
	opacity: 1;
	-webkit-transform: rotate(0deg) translateY(0em) !important;

}

/* Fade text up if slide is active */
#wheel-slider .swiper-slide.swiper-slide-active .slide-heading,
#wheel-slider .swiper-slide.swiper-slide-active .slide-category {
	transform: translateY(0%);
	-webkit-transform: translateY(0%);

	opacity: 1.0;
}

/* Transform the first slides before */
#wheel-slider .swiper-slide.swiper-slide-prev {
	-webkit-transform: rotate(-10deg) translateY(3em) !important;
	opacity: 0.75;
}

#wheel-slider .swiper-slide.swiper-slide-next {
	-webkit-transform: rotate(10deg) translateY(3em) !important;
	opacity: 0.75;
}

#wheel-slider .swiper-slide.swiper-slide-next+.swiper-slide {
	-webkit-transform: rotate(20deg) translateY(11.5em) !important;
	opacity: 0.3;
}

#wheel-slider .swiper-slide {
	-webkit-transform: rotate(-20deg) translateY(11.5em) !important;
	opacity: 0.3;
}



#wheel-slider .swiper-navigation {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	display: flex;
	z-index: 100;
	position: relative;
	display: none;
}

.build-btn {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 2vw;
	position: relative;
	margin-top: 3vw;
}

.build-btn .btn {
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
	font-size: 0.875rem;
	box-shadow: 15px 15px 35px rgba(0, 0, 0, .1);
}

.form-submit {
	text-transform: uppercase;
}

.pro-swiper{
	width: 100%;
	padding: 2vw;
}
.pro-swiper .swiper-pagination-bullet-active{
	background: #4DC2E9;
}
.detail-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
	border-radius: 1vw;
	aspect-ratio: 50 / 39;
	height: auto;
}

.detail-swiper .swiper-slide {
	height: auto;
	overflow: hidden;
	aspect-ratio: 50 / 39;
}

.detail-swiper .swiper-pagination-bullet-active,
.detail-swiper .swiper-pagination-bullet {
	background: #fff;
}

.detail-swiper .swiper-slide .img {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.detail-swiper .swiper-slide .img img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}


.singe-box{
	width: 100%;
	height: auto;
	position: relative;
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(5px);
	border-radius: 1vw;
	padding: 3vw;
	line-height: 2;
	border: 1px solid rgba(0, 0, 0, .05);
}

.contact-name .name{
	
}


.contact-name .desc{
	width: 100%;
	line-height: 1.2;
	padding: 0px 15%;
	text-align: center;
}

.touch-box{
	width: 45%;
	height: auto;
	position: relative;
	background: rgba(255, 255, 255, .5);
    padding: 3vw;
    border-radius: 0.5vw;
}

.touch-box .name{
	font-size: 1.35rem;
    margin-bottom: 1vw;
}

.after-config{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 3vw;
	gap: 5px;
}

.after-config .after-btn{
	width: 18px;
	height: 18px;
	border: 1px solid #EEE;
    background: #F9F9F9;
	position: relative;
	cursor: pointer;
}

.after-config .after-btn::after{
	width: 12px;
	height: 12px;
	position: absolute;
	left: 50%;
	top: 50%;
	content: '';
	background: url(../images/right-icon.png) no-repeat;
	background-size: cover;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.after-config .after-btn.active::after{
	opacity: 1;
}

.touch-box .item{
	width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 15px;
    margin-bottom: 15px;
	font-size: 0.875rem;
	line-height: 30px;
}

.touch-box .item .title{
	width: 100%;
	height: auto;
	position: relative;
	color: #4DC2E9;
	padding-left: 12px;
	font-size: 1rem;
}

.touch-tips{
	font-size: 0.75rem;
    color: rgba(0, 0, 0, .5);
	line-height: 1.2;
}

.touch-box .item .title::after{
	width: 6px;
	height: 6px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -3px;
	content: '';
	background: #4DC2E9;
	border-radius: 50%;
}

.after-config .tips{
	font-size: 0.75rem;
	color: rgba(0, 0, 0, .5);
}

.touch-box .item .desc{
	width: 100%;
	height: auto;
	position: relative;
}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {

	html {
		font-size: 16px;
	}
	.footer-left {
		width: 55%;
	}

	.footer-right {
		width: calc(45% - 20px);
	}

	.build-list .item .box .info .name {
		min-height: 44px;
	}
}