/*易优cms（eyoucms.com）做最好的易优整站模板下载网站*/
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	line-height: 1.15;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
	margin: 0;
	font-family: "Microsoft Yahei", PingFangSC-Regular, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
	line-height: 1.42857143;
	font-size: 14px;
	min-width: 1230px;
	background: #fff;
	color: #333;
}
h1 {
	font-size: 2em;
	margin: .67em 0;
}
figure {
	margin: 1em 40px;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}
a {
	-webkit-text-decoration-skip: objects;
	background-color: transparent;
	text-decoration: none;
	color: #333;
}
a:hover {
	color: #dd0000;
}
abbr[title] {
	border-bottom: none;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}
b, strong {
	font-weight: bolder;
}
dfn {
	font-style: italic;
}
mark {
	background-color: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -.25em;
}
sup {
	top: -.5em;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
img {
	border-style: none;
	max-width: 100%;
}
svg:not(:root) {
	overflow: hidden;
}
button, input, optgroup, select, textarea {
	line-height: 1.42857143;
	margin: 0;
	outline: none;
}
body, button, input, select, textarea {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "kern";
}
button, input {
	overflow: visible;
}
button, select {
	text-transform: none;
}
button, html [type=button],/* 1 */ [type=reset], [type=submit] {
-webkit-appearance:button;
}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
border-style:none;
padding:0;
}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
outline:1px dotted ButtonText;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
ul, li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
.container {
	width: 1300px;
	margin: 0 auto;
}
@media (max-width: 1300px) {
	.container {
		width: 100%;
		padding: 15px 15px;
		box-sizing: border-box;
	}
}
.fl { float: left; }
.fr { float: right; }
.img-center {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.img-center img {
	max-width: 100%;
	max-height: 100%;
}

.m-message {
	width: 494px;
	margin: 48px auto 0;
}
.m-message label {
	margin-bottom: 15px;
	display: block;
	font-size: 14px;
}
.m-message label em {
	display: block;
	float: right;
	color: red;
	height: 32px;
	line-height: 32px;
}
.m-message label span {
	width: 70px;
	height: 34px;
	line-height: 34px;
	color: #2F2F2F;
	float: left;
	font-weight: bold;
	text-align: right;
	margin-right: 30px;
	display: inline-block;
}
.m-message label input.inp, .m-message label textarea, .m-message label.code input {
	width: 72%;
	overflow: hidden;
	height: 32px;
	line-height: 32px;
	border: #cccccc 1px solid;
	border-radius: 3px;
	padding: 0 14px;
	box-sizing: border-box;
	color: #555;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.m-message label input:focus, .m-message label textarea:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(247, 150, 0, .6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(247, 150, 0, .6);
}
.m-message label textarea {
	height: 72px;
	line-height: 24px;
	padding: 10px 14px;
}
.m-message label.code {
	line-height: 34px;
}
.m-message label.code input {
	width: 30%;
	float: left;
	margin-right: 30px;
}
.m-message label.code .pic {
	display: inline-block;
	vertical-align: top;
	width: 80px;
	height: 32px;
}
.m-message label.code img {
	display: block;
	width: 100%;
	height: 100%;
}
.btn-1 input {
	width: 52px;
	height: 32px;
	line-height: 32px;
	background: #e8e8e8;
	border: none;
	color: #333;
	margin-right: 22px;
	cursor: pointer;
	transition: 0.3s;
}
.btn-1 {
	padding-left: 100px;
}
.btn-1 input.focus {
	background: #ce2e33;
	color: #fff;
}
.btn-1 input.focus:hover {
	background: #444;
}
.btn-1 input:hover {
	background: #ccc;
}
.footer-fix {
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 10;
	display: none;
}
.footer-fix li {
	float: left;
	width: 25%;
}
.footer-fix li a {
	display: block;
	text-align: center;
	padding: 7px 0;
	font-size: 12px;
	line-height: 1;
}
.footer-fix li i {
	display: block;
	height: 20px;
	background: no-repeat center;
	background-size: contain;
	margin-bottom: 4px;
}
.footer-fix li i.i1 {
	background-image: url(../images/f_01.png);
}
.footer-fix li i.i2 {
	background-image: url(../images/f_02.png);
}
.footer-fix li i.i3 {
	background-image: url(../images/f_03.png);
}
.footer-fix li i.i4 {
	background-image: url(../images/f_04.png);
}
.swiper-pagination-bullet-active {
	background-color: #e13f38;
}
.str_wrap {
	position: relative;
	overflow: hidden;
}
.str_move {
	position: absolute;
	left: 0;
	top: 0;
	cursor: move;
	white-space: nowrap;
}
.header {
	background-color: #fff;
}
.header .topbar {
	line-height: 34px;
	background-color: #f5f5f5;
	font-size: 13px;
}
.header .topbar ul {
	float: right;
}
.header .topbar li {
	float: left;
	color: #ddd;
}
.header .topbar li.pipe {
	padding: 0 10px;
}
.header .logo {
	float: left;
	font-size: 0;
	height: 80px;
	line-height: 80px;
	text-align: left;
	padding: 15px 0;
}
.header .tel {
	float: right;
	background: url(../images/tel.jpg) no-repeat 0 center;
	padding-left: 55px;
	margin-top: 31px;
}
.header .tel strong {
	display: block;
	font-size: 28px;
	font-family: Impact;
	line-height: 1;
	color: #dd0000;
}
.header .text {
	float: left;
	font-size: 16px;
	margin: 20px 0 20px 30px;
	padding: 5px 0 5px 30px;
	border-left: 1px solid #ddd;
}
.header .text strong {
	display: block;
	font-size: 26px;
}
.header .nav {
	font-size: 0;
	background-color: #333;
	color: #fff;
}
.header .nav ul {
    float: left;
}
.header .nav li {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.header .nav li a {
	display: block;
	font-size: 16px;
	line-height: 70px;
	padding: 0 35px;
	color: #fff;
}
.nav-search {
    float: right;
    margin-top: 17px;
}
.nav-search form {
    position: relative;
    width: 220px;
    height: 36px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
}
.nav-search input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 40px 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
    background: transparent;
}
.nav-search button {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 100%;
    border: none;
    background: url(../images/sear.png) no-repeat center / 18px;
    background-color: transparent;
    cursor: pointer;
    opacity: 0.5;
    filter: brightness(0);
}
.nav-search button:hover {
    opacity: 1;
}
.header .nav li .arr {
	float: right;
	height: 40px;
	width: 40px;
	position: relative;
	display: none;
}
.header .nav li .arr:after {
	content: '';
	border-top: 2px solid #ccc;
	border-left: 2px solid #ccc;
	box-sizing: content-box;
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	right: 15px;
}
.header .nav li.active a, .header .nav li.open a, .header .nav li a:hover {
	color: #fff;
	background-color: #222;
}
.header .nav li.dropdown {
	position: relative;
}
.header .nav li.dropdown:before {
	content: "";
	position: absolute;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
	top: 50%;
	margin-top: -6px;
	right: 15px;
}
.dropdown-box {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	min-width: 150px;
	z-index: 100;
}
.header .nav li:hover .dropdown-box {
	display: block;
}
.dropdown-box p {
	margin: 0;
}
.header .nav li .dropdown-box a {
	display: block;
	padding: 6px 15px;
	color: #333;
	line-height: 1.5;
	background: #fff;
}
.header .nav li .dropdown-box a:hover {
	color: #dd0000;
	background: #f5f5f5;
}

/* Reconstructed Desktop Styles */
.banner { position: relative; width: 100%; overflow: hidden; }
.banner img { width: 100%; display: block; }
.section-title { text-align: center; font-size: 30px; margin-bottom: 40px; font-weight: bold; }
.section-title span { color: #009FE8; }
.section-title small { display: block; font-size: 14px; color: #999; margin-top: 10px; font-weight: normal; }

.footer { background-color: #1a1a1a; color: #fff; padding: 50px 0; position: relative; z-index: 10; }
.footer a { color: #ccc; }
.footer-nav { margin-bottom: 20px; text-align: center; }
.footer-nav a { margin: 0 15px; font-size: 16px; color: #ccc; }
.footer-nav a:hover { color: #fff; }
.footer-ewm { float: left; text-align: center; margin-right: 50px; }
.footer-ewm img { width: 120px; height: 120px; }
.footer-info { overflow: hidden; line-height: 2; font-size: 14px; color: #bbb; }
.footer-intro-text * { background-color: transparent !important; color: #bbb !important; }
.footer-intro-text strong, .footer-intro-text b { color: #fff !important; }

/* Main Content Header */
.sub-tit {
    border-bottom: 1px solid #e5e5e5;
    min-height: 50px;
    line-height: 1.5;
    font-size: 24px;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 10px;
}
.curmbs {
    font-size: 14px;
    color: #888;
    font-weight: normal;
    order: 2; /* Move breadcrumbs to the right visually if needed, but flex justify-between handles spacing */
}
.sub-tit-text {
    order: 1;
}
.curmbs a { color: #888; margin: 0 5px; }
.curmbs a:hover { color: #dd0000; }

/* Mobile Styles from previous Read */
@media (max-width: 992px) {
	.yunu-sou .hform input {
		border-color: transparent;
		width: 100%;
		box-sizing: border-box;
		line-height: 20px;
		padding: 9px 60px 9px 15px;
		border-radius: 0;
		border-bottom: 1px solid #eee;
	}
	.yunu-sou .hform button {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 40px;
	}
	.in-prd-cate {
		display: none;
	}
	.in-prd-con {
		float: none;
		width: auto;
	}
	.section {
		padding: 30px 0;
	}
	.section-title {
		margin-bottom: 20px;
		font-size: 18px;
	}
	.section-title small {
		font-size: 12px;
		margin-top: 5px;
	}
	.title-1 {
		font-size: 18px;
		line-height: 24px;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.title-1 small {
		font-size: 12px;
	}
	.list-1 {
		margin: -15px 0 0 -15px;
	}
	.list-1 li {
		width: 50%;
	}
	.list-1 li a {
		margin: 15px 0 0 15px;
	}
	.list-1 li .img-center {
		height: 188px;
		line-height: 188px;
	}
	.list-1 li p {
		margin-top: 10px;
	}
	.list-1 li a:hover .img-center {
		border-color: #dd0000;
	}
	.list-1-1 li .img-center {
		height: 108px;
		line-height: 108px;
	}
	.in-case-menu {
		display: none;
	}
	.in-case-con {
		margin: 0;
	}
	.in-case-con dt {
		float: none;
		width: auto;
	}
	.in-case-con dd {
		margin: 15px 0 0;
	}
	.in-case-con dd p {
		height: auto;
		margin: 10px 0 0;
		line-height: 1.8;
	}
	.in-case-con dd .more {
		margin-top: 15px;
	}
	.in-honours li {
		width: 140px;
	}
	.in-honours li .img-center {
		height: 150px;
		line-height: 150px;
	}
	.in-honours li p {
		margin-top: 10px;
	}
	.in-about dt {
		float: none;
		width: auto;
	}
	.in-about dd {
		margin: 15px 0 0;
	}
	.in-about dd p {
		line-height: 1.8;
	}
	.in-lc li {
		width: 100%;
	}
	.in-news {
		margin-top: -20px;
	}
	.in-news .item {
		width: 100%;
	}
	.in-news .wrap {
		margin-top: 20px;
	}
	.in-news .img-center {
		display: none;
	}
	.in-news .title-1 {
		font-size: 18px;
	}
	.footer {
		padding: 30px 0;
	}
	.footer-nav {
		display: none;
	}
	.footer-ewm {
		display: none;
	}
	.footer-info {
		background: none;
		padding: 0;
		margin: 0;
		font-size: 12px;
	}
	.banner-sub {
		height: 78px;
	}
	.ct2-sd {
		display: none;
	}
	.ct2-mn {
		float: none;
		width: auto;
	}
	.sub-tit {
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.curmbs {
		display: none;
	}
	.pages {
		margin-top: 20px;
	}
	.pages a {
		font-size: 12px;
		line-height: 30px;
		padding: 0 12px;
	}
	.list-3 li .img-center {
		float: none;
		width: auto;
	}
	.list-3 li .text {
		margin: 15px 0 0;
	}
	.list-3 li .text h4 {
		font-size: 16px;
	}
	.list-3 li .text p {
		font-size: 12px;
	}
	.list-4 li a {
		line-height: 40px;
		padding-left: 15px;
	}
	.content-title {
		margin-bottom: 15px;
	}
	.content-title h1 {
		font-size: 18px;
	}
	.content-title p {
		margin-top: 10px;
		padding-top: 10px;
	}
	.content-title p span {
		padding: 0 5px;
	}
	.content-exp {
		margin-top: 15px;
	}
	.pc-slide {
		float: none;
		width: auto;
	}
	.yunu-showcase-info {
		margin: 20px 0 0;
	}
	.yunu-showcase-info h1 {
		padding-bottom: 10px;
	}
	.yunu-showcase-info p {
		margin-top: 10px;
	}
	.map {
		height: 200px;
	}
}
.pagination p {
	margin: 0;
	cursor: pointer
}
.pagination {
	height: 40px;
	text-align: center;
	padding: 20px 0px;
}
.pagination a {
	display: inline-block;
	margin-right: 10px;
	padding: 2px 12px;
	height: 24px;
	border: 1px #cccccc solid;
	background: #fff;
	text-decoration: none;
	color: #808080;
	font-size: 12px;
	line-height: 24px;
}
.pagination a:hover {
	color: #e62022;
	background: white;
	border: 1px #e62022 solid;
}
.pagination a.cur {
	border: none;
	background: #e62022;
	color: #fff;
}
.pagination p {
	display: inline-block;
	padding: 2px 12px;
	font-size: 12px;
	height: 24px;
	line-height: 24px;
	color: #bbb;
	border: 1px #ccc solid;
	background: #fcfcfc;
	margin-right: 8px;
}
.pagination p.pageRemark {
	border-style: none;
	background: none;
	margin-right: 0px;
	padding: 4px 0px;
	color: #666;
}
.pagination p.pageRemark b {
	color: red;
}
.pagination p.pageEllipsis {
	border-style: none;
	background: none;
	padding: 4px 0px;
	color: #808080;
}
.dates li {
	font-size: 14px;
	margin: 20px 0
}
.dates li span {
	float: right
}
@media only screen and (max-width: 500px) {
.m-message label input.inp {
	width: 56%;
}
.m-message label textarea {
	width: 56%;
}
}

.stats-section {
    padding: 20px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    /*background-color: #009FE8;*/
    margin-top: 20px; /* Separator gap */
}
.stats-section::before {
    content: 'HANHAO 汉浩';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vw;
    color: rgba(255, 255, 255, 0.05);
    font-weight: bold;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    font-family: Arial, sans-serif;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.stats-item {
    flex: 1;
    padding: 30px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.stats-item:last-child {
    border-right: none;
}

.stats-num {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.stats-desc {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .stats-grid {
        flex-wrap: wrap;
    }
    .stats-item {
        flex: 0 0 50%;
        margin-bottom: 30px;
        border-right: none;
    }
}
.product-series-section {
    background-color: #009FE8;
    padding: 60px 0;
    color: #fff;
}
.series-header {
    text-align: center;
    margin-bottom: 50px;
}
.series-header h2 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    font-family: Arial, sans-serif;
}
.series-header p {
    font-size: 14px;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    opacity: 0.9;
}
.series-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.series-item {
    width: 50%;
    padding: 15px;
    box-sizing: border-box;
}
.series-box {
    position: relative;
    padding: 20px;
    height: 100%;
    min-height: 280px;
    box-sizing: border-box;
    text-align: center;
    /* background-color: #3eb5ed; */
}

/* Corners */
.series-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: #fff;
    border-style: solid;
    border-width: 0;
    transition: all 0.3s;
}
.corner-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.corner-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.corner-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.corner-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.series-info {
    width: 100%;
    position: relative;
    z-index: 2;
    margin-top: 20px;
}
.series-info h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #fff;
}
.en-name {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 30px;
    text-transform: uppercase;
    line-height: 1.4;
}
.view-more-btn {
    display: inline-block;
    padding: 8px 30px;
    border: 1px solid #fff;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s;
    text-transform: uppercase;
}
.view-more-btn:hover {
    background: #fff;
    color: #009FE8;
}
.series-img {
    width: 100%;
}
.series-img img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .series-item {
        width: 100%;
    }
    .series-box {
        display: block;
        text-align: center;
        padding: 30px 20px;
    }
    .series-info, .series-img {
        width: 100%;
    }
    .series-info {
        margin-bottom: 20px;
        padding-right: 0;
    }
}

.product-list-section {
    padding: 50px 0;
    background-color: #fff;
}

.product-list-section .series-header h2 {
    color: #333;
}
.product-list-section .series-header p {
    color: #666;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.product-item {
    width: 50%;
    padding: 15px;
    box-sizing: border-box;
}
.product-box {
    position: relative;
    padding: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    min-height: 280px;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    transition: all 0.3s;
}
.product-box:hover {
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* Blue Corners */
.product-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #009FE8;
    border-style: solid;
    border-width: 0;
    transition: all 0.3s;
}
.p-corner-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.p-corner-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.p-corner-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.p-corner-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.product-img {
    width: 45%;
    margin-bottom: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info {
    width: 55%;
    padding-right: 20px;
    box-sizing: border-box;
}
.product-info h3 {
    font-size: 16px;
    margin: 0 0 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    height: 44px;
    overflow: hidden;
}
.product-info h3 a {
    color: #333;
}
.product-info h3 a:hover {
    color: #009FE8;
}

.product-view-btn {
    display: inline-block;
    padding: 8px 30px;
    border: 1px solid #009FE8;
    border-radius: 25px;
    color: #009FE8;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s;
    text-transform: uppercase;
}
.product-view-btn:hover {
    background: #009FE8;
    color: #fff;
}

@media (max-width: 768px) {
    .product-item {
        width: 100%;
    }
    .product-box {
        padding: 30px 20px;
        min-height: auto;
        display: block;
        text-align: center;
    }
    .product-info, .product-img {
        width: 100%;
    }
    .product-info {
        padding-right: 0;
        margin-bottom: 20px;
    }
    .product-img {
        height: auto;
    }
}

/* Company Profile Section - Clean Rewrite */
.company-profile-section {
    padding: 0;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.profile-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 900px;
    background: linear-gradient(to right, #009FE8 45%, #f9f9f9 45%); /* Split Background */
    overflow: hidden;
}

/* Background Text */
.profile-bg-text-left, .profile-bg-text-right {
    position: absolute;
    top: 50px;
    font-size: 130px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: transparent;
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

.profile-bg-text-left {
    right: 50%;
    margin-right: 15px;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
}

.profile-bg-text-right {
    left: 50%;
    margin-left: 15px;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.05);
    padding-left: 0;
}

/* Bottom Deco Text */
.bottom-deco-text {
    position: absolute;
    bottom: 30px;
    right: 50px;
    font-size: 80px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.05);
    z-index: 1;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 5px;
}

/* Left Content Wrapper */
.profile-left {
    position: static;
}

/* Since Box */
.since-box {
    position: absolute;
    top: 180px;
    left: 15%; /* Responsive positioning - Moved Right */
    z-index: 5;
    color: #fff;
    width: 400px;
    padding: 0;
    background: transparent;
}

.since-year {
    font-size: 48px;
    margin-bottom: 10px;
    line-height: 1;
}

.since-year strong {
    font-size: 72px;
    font-weight: bold;
}

.company-name-text {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.5;
    margin-top: 10px;
}

/* Right Content Wrapper */
.profile-right {
    position: static;
}

/* Logo Box */
.profile-logo-box {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 200px;
    right: 13%;
    z-index: 5;
    background: transparent;
    padding: 0;
}

.profile-logo-box img {
    height: 90px; /* Larger Logo */
    width: auto;
}

/* Video Wrapper */
.video-wrapper {
    position: absolute;
    top: 350px;
    left: 15%; /* Aligned with since box */
    width: 600px; /* Fixed width for precise alignment */
    height: 400px; /* Same height as features-grid */
    background: none; /* Removed white background */
    padding: 0; /* Removed padding */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    z-index: 10;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* Features Grid */
.features-grid {
    position: absolute;
    top: 350px;
    left: calc(15% + 600px);
    width: 320px;
    height: 400px;
    background: #f4f4f4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    z-index: 9;
    padding-right: 0;
}

/* Redefining layout for Desktop Fixed Style */
@media (min-width: 1200px) {
    .since-box {
        left: 200px;
    }
    .video-wrapper {
        left: 200px;
        width: 650px;
    }
    .features-grid {
        left: 850px;
        width: 350px;
    }
}

/* Fallback/Dynamic for smaller screens */
@media (min-width: 992px) and (max-width: 1199px) {
    .since-box { left: 100px; }
    .video-wrapper { left: 100px; width: 550px; }
    .features-grid {
        left: 650px;
        width: 300px;
        height: 400px;
        background: #f4f4f4;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        z-index: 9;
    }
}

.features-grid .feature-item {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    margin: 0;
}

.feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
    color: #333;
}

.vertical-deco-text {
    position: absolute;
    right: -250px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 40px;
    letter-spacing: 5px;
    color: #ccc;
    font-weight: bold;
    white-space: nowrap;
    width: auto;
    height: auto;
    pointer-events: none;
}

/* Company Gallery Section */
.company-gallery-section {
    padding: 60px 0;
    background-color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* First item spans full width (3 columns) and is taller */
.gallery-item:first-child {
    grid-column: 1 / -1;
    height: 500px;
}

@media (max-width: 992px) {
    .gallery-item:first-child {
        height: 350px;
    }
    .gallery-item {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item:first-child {
        grid-column: auto;
        height: auto;
        aspect-ratio: 16/9;
    }

    .gallery-item {
        height: auto;
        aspect-ratio: 16/9;
    }
}

/* Standardized Workshop Section */
.workshop-section {
    background-color: #009FE8;
    padding: 60px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Background Deco Text */
.workshop-section::before {
    content: 'STANDARDIZED WORKSHOP';
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8vw;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    font-family: Arial, sans-serif;
}

.workshop-grid {
    position: relative;
    z-index: 1;
    column-count: 3;
    column-gap: 15px;
}

.workshop-item {
    break-inside: avoid;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.workshop-item:hover {
    transform: translateY(-5px);
}

.workshop-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 992px) {
    .workshop-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .workshop-grid {
        column-count: 1;
    }
}

/* Global Sales Map Section */
.map-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
}

.map-section .series-header h2 {
    color: #333;
}

.map-section .series-header p {
    color: #666;
}

.map-container {
    width: 100%;
    margin: 40px 0 0;
    position: relative;
    overflow: hidden;
}

.map-container img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

@media (max-width: 768px) {
    .map-section {
        padding: 40px 0;
    }
}

/* Cooperative Brand Section */
.cooperative-brand-section {
    padding: 60px 0;
    background-color: #fff;
    overflow: hidden;
}

.cooperative-brand-section .series-header h2 {
    color: #333;
}

.cooperative-brand-section .series-header p {
    color: #666;
}

.brand-marquee {
    margin-top: 50px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    /* Add fade masks at edges for smoother look */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.brand-track {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

.brand-track:hover {
    animation-play-state: paused;
}

.brand-item {
    display: inline-block;
    width: 180px;
    height: 80px;
    margin: 0 15px;
    vertical-align: middle;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.brand-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #009FE8;
}

.brand-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .brand-item {
        width: 140px;
        height: 60px;
        margin: 0 10px;
    }
}

/* Certificate Display Section */
.certificate-section {
    padding: 60px 0;
    /* Sky blue gradient background */
    background: linear-gradient(180deg, #f0f8ff 0%, #e6f3ff 100%);
    position: relative;
    overflow: hidden;
}

.certificate-section .series-header {
    position: relative;
    z-index: 2;
}

.certificate-section .series-header h2 {
    color: #333;
}

.certificate-section .series-header p {
    color: #666;
}

.cert-icon {
    font-size: 40px;
    color: #009FE8;
    margin-bottom: 15px;
    text-align: center;
}

.cert-icon i {
    font-size: 48px;
}

.certificate-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Reduced gap */
    margin-top: 40px;
}

.cert-item {
    width: calc((100% - 50px) / 6); /* 6 items per row, accounting for 5 gaps of 10px */
    background: #fff;
    padding: 8px; /* Slightly reduced padding */
    border: 1px solid #dcdcdc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    box-sizing: border-box;
}

/* Add a pseudo-element for a double border look often seen on certificates */
.cert-item::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid #eee;
    pointer-events: none;
}

.cert-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 10;
}

.cert-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .cert-item {
        width: calc(33.33% - 20px);
    }
}

@media (max-width: 768px) {
    .cert-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 480px) {
    .cert-item {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Featured Products Section */
.featured-section {
    padding: 60px 0;
    background-color: #f5f5f5;
}

.featured-header {
    background-color: #222;
    padding: 30px 30px 140px; /* Further increased bottom padding */
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    margin-bottom: -120px; /* Increased negative margin */
    position: relative;
    z-index: 1;
}

.featured-header h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: #fff;
}

.featured-header .more-btn {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.featured-header .more-btn:hover {
    color: #009FE8;
}

.featured-header .more-btn i {
    font-size: 12px;
    margin-left: 5px;
}

.featured-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 2; /* Ensure grid sits on top of header */
    padding: 0 15px; /* Add some padding to align visually */
}

.featured-item {
    width: calc((100% - 60px) / 5); /* 5 items per row, 4 gaps of 15px */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.featured-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.media-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background: #f9f9f9;
    overflow: hidden;
}

.media-wrapper img,
.media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure full product is visible */
    background: #fff;
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through to video */
    display: none; /* Hidden by default until duration loaded */
}

.info-wrapper {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left; /* Ensure all text is left-aligned */
}

/* Hot Products Section */
.hot-section {
    padding: 60px 0;
    background-color: #fff;
}

.hot-container {
    border: 1px solid #eee;
    padding: 20px;
    background: #fff;
}

.hot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.hot-header h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.hot-header .more-btn {
    color: #009FE8;
    font-size: 14px;
    text-decoration: none;
}

.hot-swiper {
    position: relative;
    padding: 20px 40px;
}

.hot-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.hot-media {
    width: 50%;
    position: relative;
    padding-top: 50%; /* 1:1 Aspect Ratio */
    background: #f9f9f9;
}

.hot-media img,
.hot-media video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hot-info {
    width: 50%;
    text-align: left;
}

.hot-info h3 {
    font-size: 18px;
    color: #333;
    margin: 10px 0;
    font-weight: normal;
}

.hot-info .price {
    font-size: 24px;
    color: #e65100;
    font-weight: bold;
    margin: 10px 0 5px;
}

.hot-info .min-order {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
}

.hot-info .view-btn {
    display: inline-block;
    padding: 8px 25px;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.hot-info .view-btn:hover {
    border-color: #009FE8;
    color: #009FE8;
}

.hot-prev, .hot-next {
    width: 30px;
    height: 44px; /* Default swiper arrow height */
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -22px; /* Center vertically */
}

.hot-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23cccccc'%2F%3E%3C%2Fsvg%3E");
}

.hot-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23cccccc'%2F%3E%3C%2Fsvg%3E");
}

/* Hide default icon font if any */
.hot-prev:after, .hot-next:after {
    display: none;
}

.hot-pagination {
    bottom: 0 !important;
}

.hot-pagination .swiper-pagination-bullet-active {
    background: #e65100;
}

@media (max-width: 768px) {
    .hot-content {
        flex-direction: column;
    }
    .hot-media, .hot-info {
        width: 100%;
    }
    .hot-swiper {
        padding: 20px 0 40px;
    }
}

/* New Products Section */
.new-section {
    padding: 0 0 60px;
    background-color: #fff;
}

.new-container {
    border: 1px solid #eee;
    background: #fff;
}

.new-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: left; /* Explicitly align left */
}

.new-header h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-transform: uppercase;
}

.new-grid {
    display: flex;
    flex-wrap: wrap;
}

.new-item {
    width: 25%; /* 4 items per row */
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Remove right border for every 4th item */
.new-item:nth-child(4n) {
    border-right: none;
}

/* Remove bottom border for the last row items if needed,
   but grid usually looks better with full borders or specific logic.
   Here we keep simple grid borders. */

.new-item .media-wrapper {
    padding-top: 100%;
    position: relative;
    border-bottom: none; /* Media directly above info */
}

.new-item .info-wrapper {
    padding: 20px;
}

.new-item:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    z-index: 2; /* Bring to front on hover */
    position: relative;
}

@media (max-width: 992px) {
    .new-item {
        width: 33.33%;
    }
    .new-item:nth-child(4n) {
        border-right: 1px solid #eee; /* Reset 4th item border */
    }
    .new-item:nth-child(3n) {
        border-right: none; /* Remove 3rd item border */
    }
}

@media (max-width: 768px) {
    .new-item {
        width: 50%;
    }
    .new-item:nth-child(3n) {
        border-right: 1px solid #eee;
    }
    .new-item:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 480px) {
    .new-item {
        width: 100%;
        border-right: none;
    }
}

/* Factory Strength Section */
.factory-section {
    padding: 20px 0 60px; /* Reduced top padding */
    background-color:#FFFFFF;
}

.factory-container {
    position: relative;
    width: 100%;
    height: 200px; /* Fixed height as requested */
}

.factory-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the container, cropping if necessary */
    display: block;
}

.factory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Removed blue background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-content {
    text-align: center;
    color: #fff;
    width: 100%;
    padding: 0 20px;
}

.factory-content h2 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff; /* White text for better visibility on image */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.factory-content p {
    font-size: 18px;
    color: #fff; /* White text */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.factory-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    background: #fff;
    padding: 4px 20px;
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.stat-item i {
    color: #ff9800; /* Orange checkmark */
    margin-left: 5px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .factory-container {
        height: auto; /* Allow auto height on mobile */
    }
    .factory-overlay {
        position: relative; /* Stack on mobile if needed, or keep absolute with min-height */
        height: auto;
        padding: 40px 0;
        background: rgba(0,0,0,0.3); /* Optional: slight dark overlay on mobile for text */
    }
    .factory-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
    .factory-content h2 {
        font-size: 24px;
    }
    .factory-content p {
        font-size: 16px;
    }
    .factory-stats {
        flex-direction: column;
        align-items: center;
    }
    .stat-item {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* Company Introduction Section */
.about-section {
    background-color: #fff;
}

.about-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
}

.about-divider {
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin-top: 20px;
}

.about-header h2 {
    font-size: 24px;
    font-weight: normal;
    color: #333;
    margin: 0;
}

.about-cert {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.about-cert .cert-badge {
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: #4a90e2; /* Blue text for badge */
}

.about-cert .cert-badge svg {
    margin-right: 5px;
}

.about-features {
    display: flex;
    flex-wrap: wrap;
}

.feature-item {
    width: 33.33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    height: auto;
    border: none;
}

.feature-icon {
    width: 60px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    background-color: #fff;
}

.feature-icon svg {
    width: 30px;
    height: 30px;
    stroke: #ccc; /* Grey icon stroke */
    stroke-width: 1.5;
}

.feature-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: bold;
}

.feature-text p {
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.4;
}

.check-icon {
    width: 16px;
    height: 16px;
    stroke: #ff9800;
    margin-left: 5px;
    flex-shrink: 0;
}

/* Theme Colors */
.orange-theme strong {
    color: #ff9800;
}
.orange-theme p {
    color: #ff9800;
}

.black-theme strong {
    color: #333;
}
.black-theme p {
    color: #333;
}

.about-media-grid {
    display: flex;
    gap: 20px;
}

.media-item {
    width: 25%;
    position: relative;
    padding-top: 25%; /* 1:1 Aspect Ratio */
    border: 1px solid #eee;
}

.media-item video,
.media-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .feature-item {
        width: 50%;
    }
    .about-media-grid {
        flex-wrap: wrap;
    }
    .media-item {
        width: 48%; /* 2 items per row with gap consideration */
        padding-top: 48%;
    }
}

@media (max-width: 480px) {
    .feature-item {
        width: 100%;
    }
    .media-item {
        width: 100%;
        padding-top: 100%;
    }
}

.ce-tag {
    display: inline-block;
    font-size: 12px;
    color: #009FE8;
    font-weight: bold;
    border: 1px solid #009FE8;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.info-wrapper h3 {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    height: 40px; /* Limit to 2 lines */
    overflow: hidden;
    margin: 0 0 10px;
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left; /* Force left align for title */
}

.info-wrapper .price {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin: 0 0 5px;
    text-align: left; /* Force left align for price */
}

.info-wrapper .min-order {
    font-size: 12px;
    color: #666;
    margin: 0;
    text-align: left; /* Force left align for min order */
}

@media (max-width: 1200px) {
    .featured-item {
        width: calc((100% - 45px) / 4);
    }
}

@media (max-width: 992px) {
    .featured-item {
        width: calc((100% - 30px) / 3);
    }
}

@media (max-width: 768px) {
    .featured-item {
        width: calc((100% - 15px) / 2);
    }
    .featured-header {
        padding: 15px;
    }
    .featured-header h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .featured-item {
        width: 100%;
    }
}

/* Refactored Footer Styles */
.footer {
    background-color: #1a1a1a;
    /* background-image: url('../images/footer_bg.png'); */ /* Use dark bg for now */
    color: #fff;
    padding: 0;
    font-size: 14px;
    text-align: center;
}

.footer-top-message {
    padding: 20px 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
}

.footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    width: 100%;
    margin: 0;
}

.footer-contact-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.contact-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 24px;
}

.contact-icon .iconfont {
    font-size: 24px;
}

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

.contact-label {
    display: block;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.contact-value {
    font-size: 16px;
    font-weight: bold;
}

.footer-bottom-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0;
}

.footer-left-qr {
    display: flex;
    gap: 40px;
    align-items: center;
}

.qr-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 20px;
}

.qr-icon-label {
    text-align: center;
    color: #fff;
}

.qr-icon-label .iconfont {
    font-size: 32px;
    display: block;
    margin-bottom: 5px;
}

.qr-icon-label p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.qr-img {
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    width: 100px;
    height: 100px;
}

.qr-img img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Custom News List Styles */
.news-list-custom li {
    padding: 20px 0;
    border-bottom: 1px dashed #e5e5e5;
}
.news-list-custom .item-link {
    display: block;
    color: #333;
}
.news-list-custom .item-link:hover {
    color: #dd0000;
}
.news-list-custom .img-box {
    width: 200px;
    height: 130px;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 4px;
}
.news-list-custom .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-list-custom .item-link:hover .img-box img {
    transform: scale(1.1);
}
.news-list-custom .txt-box {
    overflow: hidden;
}
.news-list-custom .txt-box h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-list-custom .txt-box .desc {
    font-size: 14px;
    color: #666;
    line-height: 24px;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}
.news-list-custom .txt-box .info {
    font-size: 12px;
    color: #999;
}

.footer-right-map {
    width: 500px;
    height: 120px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.footer-copyright-bar {
    background: #000;
    padding: 15px 0;
    font-size: 12px;
    color: #999;
}

.footer-copyright-bar span {
    margin: 0 15px;
}

@media (max-width: 992px) {
    .footer-contact-row {
        flex-direction: column;
        gap: 20px;
    }

    .footer-bottom-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .footer-left-qr {
        flex-direction: column;
        gap: 20px;
    }

    .footer-right-map {
        width: 100%;
        max-width: 400px;
    }
}

.contact-icon-img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon-img img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* News Detail Page Styles */
.content-title {
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 20px;
}
.content-title h1 {
    font-size: 26px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.4;
}
.content-title p {
    font-size: 14px;
    color: #999;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.content-title p span {
    margin: 0 10px;
}

.content-body {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    overflow: hidden;
    min-height: 300px;
}
.content-body p {
    margin-bottom: 15px;
    text-align: justify;
}
.content-body img {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 15px auto;
}

.content-exp {
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.content-exp li {
    width: 48%;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.content-exp li:last-child {
    text-align: right;
}
.content-exp li a {
    color: #666;
    transition: color 0.3s;
}
.content-exp li a:hover {
    color: #e62022;
}

@media (max-width: 768px) {
    .content-title h1 {
        font-size: 20px;
    }
    .content-title p {
        font-size: 12px;
    }
    .content-exp {
        display: block;
    }
    .content-exp li {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    .content-exp li:last-child {
        text-align: left;
    }
}

/* Packaging machine 3 items per row */
.series-grid-3 .series-item {
    width: 33.3333%;
}

@media (max-width: 768px) {
    .series-grid-3 .series-item {
        width: 100%;
    }
}