.join-banner{
	overflow: hidden;
	justify-content: center;
	align-items: center;
	height: 100vh;
	display: flex;
	position: relative;
}
.join-ban-img{
	z-index: 0;
	inset: 0px;
	position: absolute;
}
.join-ban-img img{
	width: 100%;
	max-width: 100%;
	height: 100%;
}
.join-ban-img .ban-mc{
	background-color: rgb(45 52 54 / 0.7);
	inset: 0px;
	position: absolute;
}
.join-ban-text{
	text-align: center;
	padding-left: 1rem;
    padding-right: 1rem;
	margin-left: auto;
    margin-right: auto;
	width:80%;
	z-index: 10;
}
.join-ban-text h2{
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	line-height: 70px;
	font-weight: 700;
	font-size: 60px;
	margin-bottom: 30px;
}
.join-ban-text p{
	color: rgb(229 231 235 / var(--tw-text-opacity, 1));
	font-size: 20px;
	width:65%;
	margin-bottom: 30px;
	margin-left: auto;
    margin-right: auto;
}
.join-ban-text .ban-an{
	gap: 16px;
	justify-content: center;
	flex-direction: column;
	display: flex;
}
.join-ban-text .ban-an a{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	font-weight: 500;
	font-size:24px;
    line-height:30px;
	padding:15px 30px;
	border-radius: 9999px;
	text-decoration: inherit;
}
.join-ban-text .ban-an .an-one{
	background-color: #9bbf0d;
}
.join-ban-text .ban-an .an-two{
	background-color: transparent;
	border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
	border-width: 2px;
	border-style: solid;
}
.join-ban-text .ban-an a:hover{
	transform: translateY(-8px);
}

.join-about{
	padding:80px 0;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.join-container{
	padding:0 16px;
	margin:0 auto;
}
.join-text{
	text-align: center;
	margin-bottom: 64px;
}
.join-text h2{
	font-weight: 700;
	font-size:40px;
	color:#000;
}
.join-text h1{
	font-weight: 700;
	font-size:40px;
	color:#000;
}
.bg-primary{
	background-color:#9bbf0d;
	width: 80px;
	height:4px;
	margin:16px auto;
}
.join-text .text-fbt{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
	margin:0 auto;
}
.about-container{
	gap: 48px;
	align-items: center;
	display: grid;
}
.about-container h3{
    color: #9bbf0d;
	font-weight: 700;
	font-size: 24px;
    line-height: 32px;
	margin-bottom: 24px;
}
.about-container p{
	color: rgb(55 65 81 / var(--tw-text-opacity, 1));
	margin-bottom:24px;
}
.about-sj{
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	display: grid;
}
.sj{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
	padding: 16px;
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
	border-radius:8px;
}
.sj:hover{
	transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sj-sz{
	color: #9bbf0d;
	font-weight: 700;
	font-size: 20px;
    line-height: 28px;
	margin-bottom: 8px;
}
.sj-bt{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.about-right{
	position: relative;
}
.about-img{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	border-radius: 8px;
	overflow: hidden;
	z-index: 10;
	position: relative;
}
.about-img:hover{
	transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.about-img img{
	width: 100%;
	height: auto;
	max-width: 100%;
}

.join-market{
	padding:64px 0;
	background: linear-gradient(135deg, #6c5ce71a, #00d2d31a);
}
.market-container{
	gap: 48px;
	align-items: center;
	display: grid;
}
.market-qs{
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	padding: 24px;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	border-radius: 12px;
}
.market-canvas{
	max-width:100%;
}
.market-bt{
	color: #9bbf0d;
	font-weight: 700;
	font-size: 24px;
    line-height: 32px;
	margin-bottom: 24px;
}
.market-list{
	align-items: flex-start;
	display: flex;
}
.market-img{
	padding: 12px;
	background-color: rgb(108 92 231 / 0.1);
	border-radius: 9999px;
	margin-top: 4px;
	margin-right: 16px;
}
.market-img img{
	display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	color: rgb(108 92 231 / var(--tw-text-opacity, 1));
}
.market-list h4{
	font-weight: 700;
	font-size: 18px;
    line-height: 28px;
	margin-bottom: 8px;
	color:#2c3e50;
}
.market-list p{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}


.join-advantages{
	padding:80px 0;
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.advantages-container{
	gap: 32px;
	display: grid;
}
.join-ys{
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	padding: 32px;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	border-radius: 12px;
}
.ys-i{
	background-color: #9bbf0d33;
	border-radius: 9999px;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	display: flex;
	margin-bottom: 24px;
}
.ys-i img{
	max-width:40px;
}
.join-ys h3{
	font-weight: 700;
	font-size: 20px;
    line-height: 28px;
	margin-bottom: 16px;
	color:#2c3e50;
}
.join-ys p{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.join-ys:hover{
	transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.join-products{
	padding:80px 0;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.products-container{
	gap: 32px;
	display: grid;
}
.join-pro{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
	border-radius: 12px;
	overflow: hidden;
}
.pro-img{
	overflow: hidden;
}
.pro-img img{
	transition-duration: 500ms;
	transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 100%;
}
.pro-text{
	padding: 24px;
}
.pro-text h3{
	font-weight: 700;
	font-size: 20px;
    line-height: 28px;
	margin-bottom: 12px;
	color:#2c3e50;
}
.pro-text p{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
	margin-bottom: 16px;
}
.pro-jg{
	justify-content: space-between;
	align-items: center;
	display: flex;
}
.pro-jg .jg{
	color: #9bbf0d;
	font-weight: 700;
}
.pro-jg .sx{
	color: #9bbf0d;
	font-size: 14px;
    line-height: 20px;
	padding: 4px 12px;
	background-color: rgb(108 92 231 / 0.1);
	border-radius: 9999px;
}
.join-pro:hover{
	transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.join-pro .pro-img img:hover{
	transform: scale(1.1);
}
.pro-all{
	text-align: center;
	margin-top: 48px;
}
.pro-all a{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	padding:12px 32px;
	background-color: #9bbf0d;
	border-radius: 9999px;
	display: inline-block;
}
.pro-all a:hover{transform: translateY(-5px);box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}

.join-process{
	padding:80px 0;
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.process-steps{
	display: flex;
    justify-content: space-between;
    margin-top: 50px;
    flex-wrap: wrap;
}
.step {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 20px;
    position: relative;
}
.step-number {
    width: 60px;
    height: 60px;
    background: #9bbf0d;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0 auto 20px;
}
.step h3{
	font-weight: 700;
	font-size: 20px;
    line-height: 28px;
	margin-bottom: 12px;
	color:#2c3e50;
}
.step p{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
	margin-bottom: 16px;
}

.join-case{
	/* display:none; */
	padding:80px 0;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.case-container{
	gap: 32px;
	display: grid;
}
.case{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
	border-radius: 12px;
	overflow: hidden;
} 
.case-img{
	overflow: hidden;
	height: 256px;
}
.case-img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 100%;
}
.case-text{
	padding:24px;
}
.case-bt{
	justify-content: space-between;
	align-items: flex-start;
	display: flex;
	margin-bottom: 16px;
}
.case-bt h3{
	font-weight: 700;
	font-size: 20px;
    line-height: 28px;
	color:#2c3e50;
}
.case-bt span{
	color: rgb(243 41 4);
	font-size: 12px;
    line-height: 16px;
	padding:4px 8px;
	background-color: rgb(251 47 0 / 13%);
	border-radius: 4px;
}
.case-text p{
	color: rgb(75 85 99 / var(--tw-text-opacity, 1));
	margin-bottom: 16px;
}
.case-tx{
	color: rgb(107 114 128 / var(--tw-text-opacity, 1));
	font-size: 14px;
    line-height: 20px;
	align-items: center;
	display: flex;
}
.case-tx img{
	border-radius: 9999px;
	width: 40px;
	height: 40px;
	margin-right: 12px;
	max-width: 100%;
}
.case-tx{
	box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
.case:hover{
	transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.join-contact{
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	padding: 80px 0;
	background: #6c5ce7cc;
}
.contact-container{
	gap: 48px;
	align-items: center;
	display: grid;
}
.join-form{
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	color: rgb(45 52 54 / var(--tw-text-opacity, 1));
	padding: 32px;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	border-radius: 12px;
}
.join-form h3{
	color: #9bbf0d;
	font-weight: 700;
	font-size: 24px;
    line-height: 32px;
	margin-bottom: 24px;
}
.form-list{
	margin-bottom: 24px;
}
.form-name{
	gap: 24px;
	display: grid;
}
.form-label{
	color: rgb(55 65 81 / var(--tw-text-opacity, 1));
	display: block;
	margin-bottom: 8px;
}
.form-input{
	padding:12px 16px;
	border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
	border-width: 1px;
	border-radius: 8px;
	border: 1px solid #d2d2d2;
	width: 100%;
}
.form-button{
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	font-weight: 700;
	padding:12px 24px;
	background-color: #9bbf0d;
	border-radius: 8px;
	border: 1px solid #9bbf0d;
	width: 100%;
}
.form-button:hover{
	background-color: #9bbf0da3;
}
.contact-bt{
	font-weight: 700;
	font-size: 24px;
    line-height: 60px;
	/* margin-bottom: 32px; */
}
.join-zc{
	padding: 24px;
	background-color: rgb(255 255 255 / 0.1);
	border-radius: 8px;
}
.contactus{
	margin-bottom:40px;
}
.contactus-list{
	align-items: flex-start;
	display: flex;
}
.contactus-img{
	padding: 12px;
	background-color: rgb(255 255 255 / 0.2);
	border-radius: 9999px;
	margin-top: 4px;
	margin-right: 16px;
}
.contactus-text h4{
	font-weight: 700;
	font-size: 18px;
    line-height: 28px;
	margin-bottom:4px;
}
.opacity-90 {
    opacity: 0.9;
}
.opacity-70 {
    opacity: 0.7;
}
.text-sm{
	font-size: 14px;
    line-height: 20px;
}
.list-top{margin-top:24px;}
.follow-us{
	display: flex;
}
.follow-us a{
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: #ffffff33;
	border-radius: 9999px;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	display: flex;
}
.list-left{
	margin-left:16px;
}
.follow-us i{
	font-size: 20px;
    line-height: 28px;
}
.join-download{
	padding: 24px;
	background-color: rgb(255 255 255 / 0.1);
	border-radius: 8px;
	margin-top: 40px;
}
.join-download h4{
	font-weight: 700;
	font-size: 18px;
    line-height: 28px;
	margin-bottom: 8px;
}
.join-download p{
	margin-bottom:16px;
}
.join-download a{
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	color: #9bbf0d;
	padding:8px 16px;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	border-radius: 8px;
	align-items: center;
	display: inline-flex;
}
.join-download a:hover{
	background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.join-download img{
	margin-right: 8px;
	display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 640px) {
	.join-container {
        max-width: 640px;
    }
    .join-ban-text .ban-an{
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .join-container {
        max-width: 768px;
    }
	.about-container{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.market-container{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.advantages-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
	.products-container{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.case-container{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.contact-container{
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.form-name{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
    .join-container {
        max-width: 75%;
    }
	.advantages-container{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.case-container{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.join-ban-text{
		width:100%;
	}
	.join-ban-text p{
		width:100%;
	}
}
@media (max-width: 768px) {
	.process-steps {
        flex-direction: column;
    }
	.step {
        margin-bottom: 30px;
    }
	.join-ban-text h2{
		line-height: 10vw;
		font-size: 8vw;
	}
}

@media (max-width: 460px) {
	.product-tabs .product-tabs-link .buy{
		display:none;
	}
}