* {



	margin: 0;



	padding: 0;



	box-sizing: border-box;



}







:root {



	--primary: #0a1628;



	--secondary: #1a3a5c;



	--accent: #00b4d8;



	--accent-light: #48cae4;



	--gold: #f4a261;



	--white: #ffffff;



	--gray-light: #f0f4f8;



	--gray: #94a3b8;



	--dark: #0f172a;



}







html {



	scroll-behavior: smooth;



}







body {



	font-family: 'Roboto', sans-serif;



	color: var(--white);



	background: var(--primary);



	overflow-x: hidden;



}





.contain_ydybanner {

  width: 16.4rem;

  margin: 0 auto;

}

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

.contain_ydybanner {

  /*width: 49%;*/

  margin: 0 auto;

}

}





/* ========== HERO ========== */



.hero {



	min-height: 100vh;



	position: relative;



	display: flex;



	align-items: center;



	overflow: hidden;



}







.hero-bg {



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 100%;



	background: url('https://image.qwenlm.ai/public_source/fca11b50-68ca-4713-a481-128135bccf19/1b0abafc0-da78-4eec-98f1-76dba4a62652.png') center/cover no-repeat;



	filter: brightness(0.3);



}







.hero-overlay {



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 100%;



	background: linear-gradient(135deg, rgba(10, 22, 40, 0.9) 0%, rgba(26, 58, 92, 0.6) 50%, rgba(0, 180, 216, 0.1) 100%);



}







.hero-particles {



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 100%;



	overflow: hidden;z-index: 999;



}







.particle {



	position: absolute;



	width: 4px;



	height: 4px;



	background: var(--accent);



	border-radius: 50%;



	opacity: 0;



	animation: float-up 6s infinite;



}







@keyframes float-up {



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



	10% { opacity: 0.6; }



	90% { opacity: 0.6; }



	100% { opacity: 0; transform: translateY(-10vh) scale(1); }



}







.hero-content {



	position: relative;



	z-index: 2;



	max-width: 1400px;



	margin: 0 auto;



	padding: 0 40px;



	width: 100%;



}







.hero-badge {



	display: inline-flex;



	align-items: center;



	gap: 8px;



	background: rgba(0, 180, 216, 0.15);



	border: 1px solid rgba(0, 180, 216, 0.3);



	padding: 8px 20px;



	border-radius: 30px;



	font-size: 13px;



	color: var(--accent-light);



	margin-bottom: 30px;



	letter-spacing: 2px;



	text-transform: uppercase;



	animation: fadeInUp 1s ease 0.2s both;



}







.hero-badge .dot {



	width: 8px;



	height: 8px;



	background: var(--accent);



	border-radius: 50%;



	animation: pulse-dot 2s infinite;



}







@keyframes pulse-dot {



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



	50% { opacity: 0.5; transform: scale(1.5); }



}







.hero-title {



	font-size: clamp(40px, 6vw, 80px);



	font-weight: 900;



	line-height: 1.1;



	margin-bottom: 24px;



	animation: fadeInUp 1s ease 0.4s both;



}







.hero-title .highlight {



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	-webkit-background-clip: text;



	-webkit-text-fill-color: transparent;



	background-clip: text;



}







.hero-subtitle {



	font-size: clamp(16px, 2vw, 22px);



	color: #fff;



	max-width: 650px;



	line-height: 1.7;



	margin-bottom: 40px;



	font-weight: 300;



	animation: fadeInUp 1s ease 0.6s both;



}







.hero-buttons {



	display: flex;



	gap: 20px;



	flex-wrap: wrap;



	animation: fadeInUp 1s ease 0.8s both;



}







.btn-primary {



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	color: var(--primary);



	padding: 16px 40px;



	border: none;



	border-radius: 8px;



	font-size: 15px;



	font-weight: 700;



	cursor: pointer;



	text-decoration: none;



	display: inline-flex;



	align-items: center;



	gap: 10px;



	transition: all 0.3s;



	letter-spacing: 0.5px;



}







.btn-primary:hover {



	transform: translateY(-3px);



	box-shadow: 0 10px 40px rgba(0, 180, 216, 0.4);



}







.btn-secondary {



	background: transparent;



	color: var(--white);



	padding: 16px 40px;



	border: 2px solid rgba(255, 255, 255, 0.2);



	border-radius: 8px;



	font-size: 15px;



	font-weight: 400;



	cursor: pointer;



	text-decoration: none;



	display: inline-flex;



	align-items: center;



	gap: 10px;



	transition: all 0.3s;



	letter-spacing: 0.5px;



}







.btn-secondary:hover {



	border-color: var(--accent);



	color: var(--accent);



	transform: translateY(-3px);



}







.hero-stats {



	display: flex;



	gap: 50px;



	margin-top: 80px;



	animation: fadeInUp 1s ease 1s both;



}







.stat-item {



	text-align: left;



}







.stat-number {



	font-size: 42px;



	font-weight: 900;



	color: var(--white);



	line-height: 1;



}







.stat-number span {



	color: var(--accent);



}







.stat-label {



	font-size: 13px;



	color: var(--gray);



	margin-top: 8px;



	text-transform: uppercase;



	letter-spacing: 2px;



}







@keyframes fadeInUp {



	from { opacity: 0; transform: translateY(40px); }



	to { opacity: 1; transform: translateY(0); }



}







/* ========== SECTION COMMON ========== */



.section {



	padding: 120px 0;



}







.container {



	max-width: 1400px;



	margin: 0 auto;



	padding: 0 40px;



}







.section-header {



	text-align: center;



	margin-bottom: 80px;



}







.section-tag {



	display: inline-flex;



	align-items: center;



	gap: 8px;



	font-size: 13px;



	color: var(--accent);



	text-transform: uppercase;



	letter-spacing: 3px;



	margin-bottom: 20px;



}







.section-tag::before,



.section-tag::after {



	content: '';



	width: 30px;



	height: 1px;



	background: var(--accent);



}







.section-title {



	font-size: clamp(32px, 4vw, 52px);



	font-weight: 900;



	line-height: 1.2;



	margin-bottom: 20px;color: #fff;



}







.section-title .highlight {



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	-webkit-background-clip: text;



	-webkit-text-fill-color: transparent;



	background-clip: text;



}







.section-desc {



	font-size: 18px;



	color: var(--gray);



	max-width: 700px;



	margin: 0 auto;



	line-height: 1.8;



	font-weight: 300;



}







/* ========== ABOUT ========== */



.about {



	background: var(--dark);



	position: relative;



}







.about::before {



	content: '';



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 1px;



	background: linear-gradient(90deg, transparent, var(--accent), transparent);



}







.about-grid {



	display: grid;



	grid-template-columns: 1fr 1fr;



	gap: 80px;



	align-items: center;



}







.about-image-wrapper {



	position: relative;



}







.about-image {



	width: 100%;



	border-radius: 16px;



	overflow: hidden;



	position: relative;



}







.about-image img {



	width: 100%;



	height: auto;



	object-fit: cover;



	display: block;



}







.about-image-accent {



	position: absolute;



	top: -20px;



	left: -20px;



	width: 100%;



	height: 100%;



	border: 2px solid var(--accent);



	border-radius: 16px;



	z-index: -1;



}







.about-floating-card {



	position: absolute;



	bottom: -30px;



	right: -30px;



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	padding: 24px 32px;



	border-radius: 12px;



	color: var(--primary);



	text-align: center;



	box-shadow: 0 20px 60px rgba(0, 180, 216, 0.3);



}







.about-floating-card .number {



	font-size: 48px;



	font-weight: 900;



	line-height: 1;



}







.about-floating-card .label {



	font-size: 13px;



	font-weight: 700;



	text-transform: uppercase;



	letter-spacing: 1px;



}







.about-content .about-tag {



	display: inline-flex;



	align-items: center;



	gap: 8px;



	font-size: 13px;



	color: var(--accent);



	text-transform: uppercase;



	letter-spacing: 3px;



	margin-bottom: 20px;



}







.about-content h2 {



	font-size: 42px;



	font-weight: 900;



	line-height: 1.2;



	margin-bottom: 24px;



}







.about-content h2 .highlight {



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	-webkit-background-clip: text;



	-webkit-text-fill-color: transparent;



	background-clip: text;



}







.about-content p {



	color: var(--gray);



	line-height: 1.8;



	margin-bottom: 20px;



	font-size: 16px;



	font-weight: 300;

overflow-wrap: break-word;

  hyphens: auto;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

}







.about-features {



	display: grid;



	grid-template-columns: 1fr 1fr;



	gap: 20px;



	margin-top: 35px;



}







.about-feature {



	display: flex;



	align-items: center;



	gap: 12px;



	padding: 16px;



	background: rgba(0, 180, 216, 0.05);



	border: 1px solid rgba(0, 180, 216, 0.1);



	border-radius: 10px;



	transition: all 0.3s;



}







.about-feature:hover {



	background: rgba(0, 180, 216, 0.1);



	border-color: rgba(0, 180, 216, 0.3);



	transform: translateX(5px);



}







.about-feature .icon {



	width: 40px;



	height: 40px;



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	border-radius: 8px;



	display: flex;



	align-items: center;



	justify-content: center;



	flex-shrink: 0;



}







.about-feature .icon svg {



	width: 20px;



	height: 20px;



	fill: var(--primary);



}







.about-feature .text {



	font-size: 14px;



	font-weight: 400;



	color: var(--white);



}







/* ========== PRODUCTS ========== */



.products {



	background: var(--primary);



}







.products-grid {



	display: grid;



	grid-template-columns: repeat(4, 1fr);



	gap: 24px;



}







.product-card {



	background: rgba(255, 255, 255, 0.03);



	border: 1px solid rgba(255, 255, 255, 0.06);



	border-radius: 16px;



	overflow: hidden;



	transition: all 0.4s;



	cursor: pointer;



}







.product-card:hover {



	transform: translateY(-10px);



	border-color: var(--accent);



	box-shadow: 0 20px 60px rgba(0, 180, 216, 0.15);



}







.product-card:nth-child(1),



.product-card:nth-child(2) {



	grid-column: span 2;



}







.product-card:nth-child(1) .product-img,



.product-card:nth-child(2) .product-img {



	height: 300px;



}







.product-img {



	height: 250px;



	overflow: hidden;



	position: relative;



}







.product-img img {



	width: 100%;



	height: 100%;



	object-fit: cover;



	transition: transform 0.6s;



}







.product-card:hover .product-img img {



	transform: scale(1.1);



}







.product-info {



	padding: 24px;



}







.product-name {



	font-size: 18px;



	font-weight: 700;



	margin-bottom: 8px;



}







.product-desc {



	font-size: 14px;



	color: var(--gray);



	line-height: 1.6;



}







/* ========== TIMELINE ========== */



.timeline-section {



	background: var(--dark);



	position: relative;



}







.timeline-section::before {



	content: '';



	position: absolute;



	top: 0;



	left: 0;



	width: 100%;



	height: 1px;



	background: linear-gradient(90deg, transparent, var(--accent), transparent);



}







.timeline {



	position: relative;



	max-width: 1000px;



	margin: 0 auto;



}







.timeline::before {



	content: '';



	position: absolute;



	left: 50%;



	transform: translateX(-50%);



	width: 3px;



	height: 100%;



	background: linear-gradient(to bottom, var(--accent), rgba(0, 180, 216, 0.1));



	border-radius: 3px;



}







.timeline-item {



	display: flex;



	justify-content: flex-end;



	padding: 0 0 50px 0;



	position: relative;



	width: 50%;



}







.timeline-item:nth-child(even) {



	align-self: flex-end;



	justify-content: flex-start;



	margin-left: 50%;



	padding-left: 50px;

margin-top: -150px;

}







.timeline-item:nth-child(1) {

	margin-top: 0px !important;

}

.timeline-item:nth-child(odd) {

	padding-right: 50px;

	margin-top: -300px;

}







.timeline-dot {



	position: absolute;



	width: 20px;



	height: 20px;



	background: var(--accent);



	border-radius: 50%;



	border: 4px solid var(--dark);



	z-index: 2;



}







.timeline-item:nth-child(odd) .timeline-dot {



	right: -10px;



}







.timeline-item:nth-child(even) .timeline-dot {



	left: -10px;



}







.timeline-content {



	background: rgba(255, 255, 255, 0.03);



	border: 1px solid rgba(255, 255, 255, 0.06);



	border-radius: 12px;



	padding: 28px;



	transition: all 0.3s;



}







.timeline-content:hover {



	border-color: rgba(0, 180, 216, 0.3);



	background: rgba(0, 180, 216, 0.05);



	transform: translateY(-5px);



}







.timeline-year {



	font-size: 24px;



	color: var(--accent);



	font-weight: 700;



	letter-spacing: 2px;



	margin-bottom: 8px;



}



.timeline-tu{margin: 16px 0;}



.timeline-tu img{width: 100%;max-height: 2.8rem;}



.timeline-title {



	font-size: 20px;



	font-weight: 700;



	margin-bottom: 10px;



}







.timeline-desc {



	font-size: 14px;



	color: var(--gray);



	line-height: 1.7;



	font-weight: 300;



}







.yuyan-section{  width:100%;}



.yuyan-content {



	position: relative;



	z-index: 2;



	max-width: 1400px;



	margin: 0 auto;



	padding: 0 40px;



	width: 100%;



}



.yuyan-title {



	font-size: 46px;



	font-weight: 900;



	line-height: 1.1;



	margin-bottom: 24px;



	animation: fadeInUp 1s ease 0.4s both;text-align: center;



}



.yuyan-title .highlight {



	background: linear-gradient(135deg, var(--accent), var(--accent-light));



	-webkit-background-clip: text;



	-webkit-text-fill-color: transparent;



	background-clip: text;



}







.yuyan-subtitle {



	font-size: clamp(16px, 2vw, 22px);



	color: #fff;



	max-width: 650px;



	line-height: 1.7;



	margin: 0 auto 40px;text-align: center;



	font-weight: 300;



	animation: fadeInUp 1s ease 0.6s both;



}



.yuyan-buttons{text-align: center;



  justify-content: space-evenly;



  width: 50%;



  margin: 0 auto;}











/* ========== VIDEO SECTIONS ========== */



.video-section {



	background: var(--primary);



}







.video-wrapper {



	display: grid;



	grid-template-columns: 1fr 1fr;



	gap: 40px;



	align-items: center;



}







.video-card {



	position: relative;



	border-radius: 16px;



	overflow: hidden;



	background: rgba(255, 255, 255, 0.03);



	border: 1px solid rgba(255, 255, 255, 0.06);



	transition: all 0.4s;



}







.video-card:hover {



	border-color: var(--accent);



	box-shadow: 0 20px 60px rgba(0, 180, 216, 0.15);



	transform: translateY(-5px);



}







.video-thumbnail {



	position: relative;



	height: 350px;



	overflow: hidden;



}







.video-thumbnail img {



	width: 100%;



	height: 100%;



	object-fit: cover;



	transition: transform 0.6s;



}







.video-card:hover .video-thumbnail img {



	transform: scale(1.05);



}







.video-play-btn {



	position: absolute;



	top: 50%;



	left: 50%;



	transform: translate(-50%, -50%);



	width: 80px;



	height: 80px;



	background: rgba(0, 180, 216, 0.9);



	border-radius: 50%;



	display: flex;



	align-items: center;



	justify-content: center;



	cursor: pointer;



	transition: all 0.3s;



	z-index: 2;



}







.video-play-btn::before {



	content: '';



	position: absolute;



	width: 100%;



	height: 100%;



	border-radius: 50%;



	background: rgba(0, 180, 216, 0.3);



	animation: play-pulse 2s infinite;



}







@keyframes play-pulse {



	0% { transform: scale(1); opacity: 1; }



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



}







.video-play-btn svg {



	width: 30px;



	height: 30px;



	fill: var(--white);



	margin-left: 4px;



	position: relative;



	z-index: 2;



}







.video-card:hover .video-play-btn {



	background: var(--accent);



	transform: translate(-50%, -50%) scale(1.1);



}







.video-info {



	padding: 30px;



}







.video-label {



	display: inline-flex;



	align-items: center;



	gap: 6px;



	font-size: 12px;



	color: var(--accent);



	text-transform: uppercase;



	letter-spacing: 2px;



	margin-bottom: 12px;



	font-weight: 700;



}







.video-title {



	font-size: 24px;



	font-weight: 700;



	margin-bottom: 12px;



	line-height: 1.3;



}







.video-desc {



	font-size: 15px;



	color: var(--gray);



	line-height: 1.7;



	font-weight: 300;



}















/* ========== SCROLL ANIMATIONS ========== */



.reveal {



	opacity: 0;



	transform: translateY(40px);



	transition: all 0.8s ease;



}







.reveal.active {



	opacity: 1;



	transform: translateY(0);



}







.reveal-left {



	opacity: 0;



	transform: translateX(-60px);



	transition: all 0.8s ease;



}







.reveal-left.active {



	opacity: 1;



	transform: translateX(0);



}







.reveal-right {



	opacity: 0;



	transform: translateX(60px);



	transition: all 0.8s ease;



}







.reveal-right.active {



	opacity: 1;



	transform: translateX(0);



}







/* ========== RESPONSIVE ========== */



@media (max-width: 1024px) {



	.about-grid {



		grid-template-columns: 1fr;



		gap: 60px;



	}







	.products-grid {



		grid-template-columns: repeat(2, 1fr);



	}







	.product-card:nth-child(1),



	.product-card:nth-child(2) {



		grid-column: span 1;



	}







	.video-wrapper {



		grid-template-columns: 1fr;



	}







	.lang-grid {



		grid-template-columns: repeat(2, 1fr);



	}







   



	.hero-stats {



		gap: 30px;



	}



}







@media (max-width: 768px) {

 .contain_ydybanner {

    width: 92%;

    margin: 0 auto;

  }

.hero-content{ padding:0;}

    .hero-title {

    font-size: 32px;

  }

.btn-primary, .btn-secondary {



		width: 100%;



		justify-content: center;

padding: 9px 2px;

font-size: 14px;

	}









  

  

  

  

  

.about-image img{ height:auto;/*aspect-ratio: 3/2;*/}

.about-content h2{font-size: 30px;}







	.hero-stats {



		flex-wrap: wrap;



		gap: 20px;

margin-top: 50px;

	}



.stat-number{font-size: 32px;}

.stat-label{font-size: 12px;}

	.stat-item {



		min-width: 120px;



	}







	.products-grid {



		grid-template-columns: 1fr;



	}







	.about-features {



		grid-template-columns: 2fr 2fr;



	}







	.lang-grid {



		grid-template-columns: 1fr 1fr;



		gap: 16px;



	}







  







	.container {



		padding: 0 20px;



	}







 







	.section {



		padding: 80px 0;



	}







	.timeline::before {



		left: 20px;



	}







	.timeline-item {



		width: 100%;



		padding-left: 60px !important;



		padding-right: 0 !important;



		margin-left: 0 !important;

margin-top: 0 !important;

	}

.timeline-tu img {

  width: 100%;

  max-height: none;

  aspect-ratio: 3/2;

}



.yuyan-content{padding: 0px 10px;}

.yuyan-title {font-size: 30px;}







	.timeline-item:nth-child(odd) .timeline-dot,



	.timeline-item:nth-child(even) .timeline-dot {



		left: 11px;



		right: auto;



	}







	.about-floating-card {



		bottom: -20px;



		right: 20px;



	}







  



}







@media (max-width: 480px) {



	.lang-grid {



		grid-template-columns: 1fr;



	}













	.hero-buttons {



		flex-direction: column;

		display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

width: 100%;

	}







	



}







/* ========== COUNTER ANIMATION ========== */



.counter {



	display: inline-block;



}