/* Base */
html {
	overflow-x: hidden;
}

body {
	line-height: 1.5;
	color: #000;
}
p, h1, h2, h3, h4, h5, h6, a, span {
  word-wrap: break-word;      /* 长单词或URL自动换行 */
  overflow-wrap: break-word;  /* 推荐使用的标准属性 */
  white-space: normal;        /* 允许换行 */
}

.section-subtitle {
    font-weight: 700;
    color: #019ee4;
    text-transform: uppercase;
    font-size: 3rem;
    text-align: center;
	letter-spacing: 2px;
}

@media (max-width: 768px) { /* 针对移动端 */
    .section-subtitle {
        font-size: 1.5rem; /* 移动端字体大小 */
    }
	h2{
		font-size: 1.2rem;
	}
}

.wpforms-field-medium{
border: 1px solid #dee2e6;
    background-color: #ffffff;
    padding: 10px;
}

.section-title {
    color: #fff;
    font-weight: 300;
    text-align: center;
}
.text-black {
    color: #000 !important;
}

.bg-light {
    background-color: #ffffff !important;
}

.text-primary {
    color: #019fea !important;
}


.header-top .quick-contact-icons .text .h4 {
    font-size: 1.2rem;
    color: #000000;
    margin-bottom: 0;
    font-weight: 700;
    font-family: "SimSun", serif;
}

p {
    color: #000;
}

.ml-auto p{
	color: #fff;
	font-weight: 300;
}

::-moz-selection {
	background: #000;
	color: #fff;
}

::selection {
	background: #000;
	color: #fff;
}

a {
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
	color:#0f6890;
}

a:hover {
	text-decoration: none;
}


.border-2 {
	border-width: 2px;
}

.text-black {
	color: #000 !important;
}

.bg-black {
	background: #000 !important;
}

.color-black-opacity-5 {
	color: rgba(0, 0, 0, 0.5);
}

.color-white-opacity-5 {
	color: rgba(255, 255, 255, 0.5);
}
/* 输入框样式 */
.wpforms-field-large,
.wpforms-field-medium {
    border: 1px solid #dee2e6 !important; /* 边框 */
    border-radius: 5px !important; /* 圆角 */
    width: 100% !important; /* 宽度为100% */
    padding: 10px !important; /* 内边距 */
    box-sizing: border-box !important; /* 包含内边距在宽度内 */
}

/* 提交按钮样式 */
.wpforms-submit {
    background-color: #d44848 !important; /* 按钮背景色 */
    color: #fff !important; /* 字体颜色 */
    border: none !important; /* 去掉边框 */
    border-radius: 5px !important; /* 圆角 */
    padding: 15px 40px !important; /* 内边距 */
    cursor: pointer !important; /* 鼠标指针 */
}

/* 鼠标悬停时按钮样式 */
.wpforms-submit:hover {
    background-color: #963b3b !important; /* 鼠标悬停背景色 */
}
.wpforms-field-label {
    font-weight: 400 !important; /* 400 表示正常字体，700 表示粗体 */
    /* 你可以根据需要使用其他数值，如 300（细体）、500（中等）等 */
}
.site-wrap:before {
	display: none;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	background: rgba(0, 0, 0, 0.6);
	content: "";
	position: absolute;
	z-index: 2000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
}

.offcanvas-menu .site-wrap {
	height: 100%;
	width: 100%;
	z-index: 2;
}

.offcanvas-menu .site-wrap:before {
	opacity: 1;
	visibility: visible;
}

.line-height-1 {
	line-height: 1 !important;
}

.bg-black {
	background: #000;
}

.site-section {
	padding: 2.5em 0;
}


.site-section.site-section-sm {
	padding: 4em 0;
}

.site-section-heading {
	padding-bottom: 20px;
	margin-bottom: 0px;
	position: relative;
	font-size: 2.5rem;
}

@media (min-width: 768px) {
	.site-section-heading {
		font-size: 3rem;
	}
}

.border-top {
	border-top: 1px solid #edf0f5 !important;
}

.site-footer {
	padding: 4em 0;
}

@media (min-width: 768px) {
	.site-footer {
		padding: 8em 0;
	}
}

.site-footer p {
	color: #737373;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5 {
	color: #fff;
}

.site-footer a {
	color: #999999;
}

.site-footer a:hover {
	color: black;
}

.site-footer ul li {
	margin-bottom: 10px;
}

.site-footer .footer-heading {
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 900;
}

.bg-text-line {
	display: inline;
	background: #000;
	-webkit-box-shadow: 20px 0 0 #000, -20px 0 0 #000;
	box-shadow: 20px 0 0 #000, -20px 0 0 #000;
}

.text-white-opacity-05 {
	color: rgba(255, 255, 255, 0.5);
}

.text-black-opacity-05 {
	color: rgba(0, 0, 0, 0.5);
}

.hover-bg-enlarge {
	overflow: hidden;
	position: relative;
}

@media (max-width: 991.98px) {
	.hover-bg-enlarge {
		height: auto !important;
	}
}

.hover-bg-enlarge>div {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .8s all ease-in-out;
	-o-transition: .8s all ease-in-out;
	transition: .8s all ease-in-out;
}

.hover-bg-enlarge:hover>div,
.hover-bg-enlarge:focus>div,
.hover-bg-enlarge:active>div {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

@media (max-width: 991.98px) {
	.hover-bg-enlarge .bg-image-md-height {
		height: 300px !important;
	}
}

.bg-image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.bg-image.overlay {
	position: relative;
}

.bg-image.overlay:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
}

.bg-image>.container {
	position: relative;
	z-index: 1;
}

@media (max-width: 991.98px) {
	.img-md-fluid {
		max-width: 100%;
	}
}

@media (max-width: 991.98px) {

	.display-1,
	.display-3 {
		font-size: 3rem;
	}
}

.play-single-big {
	width: 90px;
	height: 90px;
	display: inline-block;
	border: 2px solid #fff;
	color: #fff !important;
	border-radius: 50%;
	position: relative;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
}

.play-single-big>span {
	font-size: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-40%, -50%);
	-ms-transform: translate(-40%, -50%);
	transform: translate(-40%, -50%);
}

.play-single-big:hover {
	width: 120px;
	height: 120px;
}

.overlap-to-top {
	margin-top: -150px;
}

.ul-check {
	margin-bottom: 50px;
}

.ul-check li {
	position: relative;
	padding-left: 35px;
	margin-bottom: 15px;
	line-height: 1.5;
}

.ul-check li:before {
	left: 0;
	font-size: 20px;
	top: -.3rem;
	font-family: "icomoon";
	content: "\e5ca";
	position: absolute;
}

.ul-check.white li:before {
	color: #fff;
}

.ul-check.success li:before {
	color: #8bc34a;
}

.ul-check.primary li:before {
	color: #0f6890;
}

.select-wrap,
.wrap-icon {
	position: relative;
}

.select-wrap .icon,
.wrap-icon .icon {
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 22px;
}

.select-wrap select,
.wrap-icon select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
}



.site-mobile-menu {
	width: 300px;
	position: fixed;
	right: 0;
	z-index: 2000;
	padding-top: 20px;
	background: #eee;
	height: calc(100vh);
	-webkit-transform: translateX(110%);
	-ms-transform: translateX(110%);
	transform: translateX(110%);
	-webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
	box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
}

.offcanvas-menu .site-mobile-menu {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.site-mobile-menu .site-mobile-menu-header {
	width: 100%;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
	float: right;
	margin-top: 8px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
	font-size: 30px;
	display: inline-block;
	padding-left: 10px;
	padding-right: 0px;
	line-height: 1;
	cursor: pointer;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
	color: #25262a;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
	float: left;
	margin-top: 10px;
	margin-left: 0px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
	display: inline-block;
	text-transform: uppercase;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
	max-width: 70px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
	text-decoration: none;
}

.site-mobile-menu .site-mobile-menu-body {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	position: relative;
	padding: 0 20px 20px 20px;
	height: calc(100vh - 52px);
	padding-bottom: 150px;
}

.site-mobile-menu .site-nav-wrap {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

.site-mobile-menu .site-nav-wrap a {
	padding: 10px 20px;
	display: block;
	position: relative;
	color: #212529;
	text-transform: uppercase;
	font-weight: bold;
}

.site-mobile-menu .site-nav-wrap a:hover {
	color: #0f6890;
}

.site-mobile-menu .site-nav-wrap li {
	position: relative;
}

.site-mobile-menu .site-nav-wrap li.active>a {
	color: #0f6890 !important;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
	position: absolute;
	right: 0px;
	top: 10px;
	z-index: 20;
	width: 36px;
	height: 36px;
	text-align: center;
	cursor: pointer;
	border-radius: 50%;
	background-color: #fff;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
	background: #f8f9fa;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
	font-size: 12px;
	z-index: 20;
	font-family: "icomoon";
	content: "\f078";
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(-180deg);
	-ms-transform: translate(-50%, -50%) rotate(-180deg);
	transform: translate(-50%, -50%) rotate(-180deg);
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.site-mobile-menu .site-nav-wrap>li {
	position: relative;
	float: left;
	width: 100%;
}

.site-mobile-menu .site-nav-wrap>li>a {
	padding-left: 20px;
	font-size: 20px;
}

.site-mobile-menu .site-nav-wrap>li>ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
	display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
	padding-left: 40px;
	font-size: 16px;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
	padding: 0;
	margin: 0;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
	display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
	font-size: 16px;
	padding-left: 60px;
}

.site-mobile-menu .site-nav-wrap[data-class="social"] {
	float: left;
	width: 100%;
	margin-top: 30px;
	padding-bottom: 5em;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li {
	width: auto;
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li:first-child a {
	padding-left: 15px !important;
}
@media only screen and (max-width: 767px) {
    .zhuoli {
      display: none;
    }
}
@media only screen and (max-width: 767px) {
  .gt_selector, .notranslate {
    width: 100px;
  }
}  
/*移动端*/
.sticky-wrapper {
	position: absolute;
	z-index: 100;
	width: 100%;
	background: #fff;
}

@media (max-width: 991.98px) {
	.sticky-wrapper {
		display: none;
	}
}

.sticky-wrapper+.site-blocks-cover {
	margin-top: 96px;
}


@media (max-width: 767px) {
	.header-top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
	}
}


.site-menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
}

.site-menu li {
	position: relative;
}

.site-menu li a {
	color: #595959;
	text-decoration: none;
	font-size: 14px;
}

.site-menu li.active a {
	font-weight: bold;
}

.submenu {
	list-style-type: none;
	padding: 0;
}


.site-menu .submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 200px;
	background-color: #f1f1f1;
	padding: 10px;
	box-sizing: border-box;
}

.site-menu li:hover .submenu {
	display: block;
}

.site-menu .submenu li {
	margin-bottom: 5px;
	text-align: left;
}

.site-menu .submenu li a {
	color: #595959;
	font-size: 16px;
	font-weight: 700;

}

.site-menu .submenu li a:hover {

	color: #fff;
	font-size: 16px;

}

.site-menu .submenu li:hover {
	background: #0f6890;

}

/* Blocks */
.intro-section {
	background-size: cover;
	position: relative;
}

.intro-section,
.intro-section .container .row {
	height: 100vh;
	min-height: 700px;
}

.intro-section.innerpage,
.intro-section.innerpage .container .row {
	height: 100%;
	min-height: 400px;
}

.intro-section:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	background: #222;
	opacity: .3;
	border-bottom-right-radius: 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
	.intro-section:before {
		width: 100%;
	}
}

.intro-section h1 {
	font-size: 3rem;
	font-weight: 300;
	color: #fff;
}

.intro-section h1 strong {
	font-weight: 700;
}

.intro-section p {
	color: #fff;
	font-size: 1.1rem;
}

.intro-section p a {
	color: #fff;
	text-decoration: underline;
}

.custom-breadcrumns {
	padding: 20px 0;
}

.custom-breadcrumns span,
.custom-breadcrumns a {
	font-size: 14px;
}

.custom-breadcrumns a {
	display: inline-block;
	color: #bdbdbd;
}

.custom-breadcrumns a:hover {
	color: #0f6890;
}

.custom-breadcrumns .current {
	color: #0f6890;
}

.section-title-underline {
	color: #000;
}

.section-title-underline span {
	display: inline-block;
	border-bottom: 4px solid #0f6890;
}

.section-title-underline.style-2 {
	color: #fff;
}

.section-title-underline.style-2 span {
	border-color: #0f6890;
}

.section-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 0;
}

.section-bg.style-1 {
	position: relative;
}

.section-bg.style-1:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #183661;
	opacity: .9;
	z-index: 0;
}

.section-bg.style-1>.container {
	z-index: 2;
}

.section-bg.style-1 .icon {
	font-size: 3.5rem;
	color: #0f6890;
}

.section-bg.style-1 h3 {
	font-size: 20px;
	color: #0f6890;
	margin-bottom: 30px;
}

.section-bg.style-1 p {
	color: #7697c6;
}

.news-updates {
	padding: 5rem 0;
}

.news-updates .section-heading {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 40px;
}

.news-updates .section-heading h2 {
	margin-bottom: 0;
	line-height: 0;
}

.news-updates .section-heading a {
	font-size: 16px;
}

.news-updates .post-entry-big .img-link {
	position: relative;
	display: inline-block;
	margin-bottom: 30px;
	overflow: hidden;
}

.news-updates .post-entry-big .img-link img {
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.news-updates .post-entry-big .img-link:before {
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	position: absolute;
	content: "";
	background: #000;
	opacity: 0;
	z-index: 2;
	visibility: hidden;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
}

.news-updates .post-entry-big .img-link img {
	z-index: 1;
}

.news-updates .post-entry-big .img-link:hover:before {
	opacity: .6;
	visibility: visible;
}

.news-updates .post-entry-big .img-link:hover img {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

.news-updates .post-entry-big .post-content .post-meta a {
	display: inline-block;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: bold;
	color: #939393;
}

.news-updates .post-entry-big .post-content .post-heading {
	line-height: .9;
}

.news-updates .post-entry-big .post-content .post-heading a {
	font-size: 18px;
	font-weight: bold;
	color: #303030;
}

.news-updates .post-entry-big .post-content .post-heading a:hover {
	color: #0f6890;
}

.news-updates .post-entry-big.horizontal .img-link {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 90px;
	flex: 0 0 90px;
}

.social-wrap a {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #0f6890;
	position: relative;
}

.social-wrap a>span {
	position: absolute;
	color: #fff;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.social-wrap a:hover {
	background: #000;
}

.block-number-1 .icon {
	color: #fff;
	font-size: 2rem;
}

.ftco-testimonial-1 .ftco-testimonial-vcard img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.ftco-testimonial-1 .ftco-testimonial-vcard h3 {
	font-size: 1.2rem;
	display: block;
	margin-bottom: 0;
	color: #000;
}

.ftco-testimonial-1 p {
	color: #a2a2a2;
}

.hero-slide {
margin-top: 47px; /* 导航栏高度 */
  position: relative;
  z-index: 1; /* 避免被其他元素覆盖 */
}

@media (max-width: 991.98px) {
	.hero-slide .owl-nav {
		display: none;
	}
}

.hero-slide .owl-nav .owl-prev,
.hero-slide .owl-nav .owl-next {
	position: absolute;
	top: 50%;
	text-align: center;
	width: 70px;
	height: 70px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	background: #fff;
}

.hero-slide .owl-nav .owl-prev>span,
.hero-slide .owl-nav .owl-next>span {
	font-size: 1.7rem;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #000;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.hero-slide .owl-nav .owl-prev:hover,
.hero-slide .owl-nav .owl-next:hover {
	background: #0f6890;
}

.hero-slide .owl-nav .owl-prev:hover>span,
.hero-slide .owl-nav .owl-next:hover>span {
	color: #fff;
}

.hero-slide .owl-nav .owl-prev {
	left: 0;
}

.hero-slide .owl-nav .owl-next {
	right: 0;
}

.hero-slide .owl-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
}

.hero-slide .owl-dots .owl-dot {
	display: inline-block;
}

.hero-slide .owl-dots .owl-dot>span {
	border-radius: 0%;
	display: inline-block;
	width: 18px;
	height: 4px;
	margin: 2px 5px;
	background: white;
}

.hero-slide .owl-dots .owl-dot.active>span {
	background: #0f6890;
}

.owl-slide-3,
.owl-slide {
	position: relative;
}

.owl-slide-3 .owl-stage,
.owl-slide .owl-stage {
	padding-top: 30px;
	padding-bottom: 30px;
}

.owl-slide-3 .owl-nav .owl-prev,
.owl-slide-3 .owl-nav .owl-next,
.owl-slide .owl-nav .owl-prev,
.owl-slide .owl-nav .owl-next {
	position: absolute;
	top: 50%;
	text-align: center;
	width: 40px;
	height: 40px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	background: #0f6890;
}

.owl-slide-3 .owl-nav .owl-prev>span,
.owl-slide-3 .owl-nav .owl-next>span,
.owl-slide .owl-nav .owl-prev>span,
.owl-slide .owl-nav .owl-next>span {
	color:#fff;
	font-size: 1.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.owl-slide-3 .owl-nav .owl-prev,
.owl-slide .owl-nav .owl-prev {
	left: 0;
}

.owl-slide-3 .owl-nav .owl-next,
.owl-slide .owl-nav .owl-next {
	right: 0;
}

.owl-slide-3 .owl-dots,
.owl-slide .owl-dots {
	position: absolute;
	bottom: -30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center;
}

.owl-slide-3 .owl-dots .owl-dot,
.owl-slide .owl-dots .owl-dot {
	display: inline-block;
}

.owl-slide-3 .owl-dots .owl-dot>span,
.owl-slide .owl-dots .owl-dot>span {
	border-radius: 0%;
	display: inline-block;
	width: 18px;
	height: 4px;
	margin: 2px 5px;
	background: rgba(0, 0, 0, 0.2);
}

.owl-slide-3 .owl-dots .owl-dot.active>span,
.owl-slide .owl-dots .owl-dot.active>span {
	background: #0f6890;
}

.owl-slide .owl-nav {
	display: none;
}

.feature-1 .icon-wrapper {
	position: relative;
	width: 96px;
	height: 55.43px;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 1;
	margin-top: -33.94px;
	background: #ccc;
}

.feature-1 .icon-wrapper>span {
	width: 96px;
	height: 96px;
	text-align: center;
	font-size: 3rem;
	line-height: 96px;
	display: inline-block;
	position: absolute;
	top: -20px;
	left: 0;
}

.feature-1 .icon-wrapper:before,
.feature-1 .icon-wrapper:after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 67.88px;
	height: 67.88px;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	background-color: inherit;
	left: 14.06px;
}

.feature-1 .icon-wrapper:before {
	top: -33.94px;
}

.feature-1 .icon-wrapper:after {
	bottom: -33.94px;
}

.feature-1 .feature-1-content {
	padding: 50px 20px 20px 20px;
	text-align: center;
}

.feature-1 .feature-1-content h2 {
	font-size: 1.3rem;
	color: #000;
}

.course-1-item {
	-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.course-1-item figure {
	position: relative;
}

.course-1-item .category {
	background: #0f6890;
	padding: 20px;
}

.course-1-item .category h3 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 0;
}

.course-1-item .price {
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: translatey(-100%);
	-ms-transform: translatey(-100%);
	transform: translatey(-100%);
	padding: 10px 20px;
	background: #183661;
	color: #fff;
}

.course-1-item .course-1-content {
	padding: 20px 40px;
	text-align: center;
}

.course-1-item .course-1-content h2 {
	margin: 0 0 30px 0;
	font-size: 18px;
	color: #000;
}

.course-1-item .course-1-content .rating {
	text-align: center;
}

.course-1-item .course-1-content .rating>span {
	display: inline-block;
	margin: 2px;
}

.course-1-item .course-1-content .desc {
	font-size: 15px;
}

.footer {
	padding-top: 4rem;
	background: #0f6890;
	color: #fff;
}

.footer .footer-heading {
	color: #fff;
	font-weight:600;
}


.footer ul li {
	margin-bottom: 10px;
}

.footer a {
	color: #fff;
	font-weight: lighter;
}

.footer a:hover {
	color: #ff5e15;
	text-decoration: underline;
}

.footer .copyright {
	color: #fff;
	padding-top: 7rem;
	text-align: center;
}

.ftco-subscribe-1 {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}

.ftco-subscribe-1:before {
	position: absolute;
	content: "";
	background: #183661;
	opacity: .7;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.ftco-subscribe-1>.container {
	position: relative;
	z-index: 2;
}

.ftco-subscribe-1>.container h2,
.ftco-subscribe-1>.container p {
	color: #fff;
}

.ftco-subscribe-1 .form-control {
	height: auto !important;
}

.video-1 {
	position: relative;
	display: block;
}

.video-1 .play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.video-1 .play>span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.video-1:hover {
	-webkit-box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 5px 30px -10px rgba(0, 0, 0, 0.3);
}

#loader {
	position: fixed;
	width: 96px;
	height: 96px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
	box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
	border-radius: 16px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .2s ease-out, visibility 0s linear .2s;
	-o-transition: opacity .2s ease-out, visibility 0s linear .2s;
	transition: opacity .2s ease-out, visibility 0s linear .2s;
	z-index: 2000;
}

#loader.fullscreen {
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	background-color: #fff;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#loader.show {
	-webkit-transition: opacity .4s ease-out, visibility 0s linear 0s;
	-o-transition: opacity .4s ease-out, visibility 0s linear 0s;
	transition: opacity .4s ease-out, visibility 0s linear 0s;
	visibility: visible;
	opacity: 1;
}

#loader .circular {
	-webkit-animation: loader-rotate 2s linear infinite;
	animation: loader-rotate 2s linear infinite;
	position: absolute;
	left: calc(50% - 24px);
	top: calc(50% - 24px);
	display: block;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

#loader .path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	-webkit-animation: loader-dash 1.5s ease-in-out infinite;
	animation: loader-dash 1.5s ease-in-out infinite;
	stroke-linecap: round;
}

@-webkit-keyframes loader-rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loader-rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loader-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -136px;
	}
}

@keyframes loader-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -136px;
	}
}

/*engineers*/
.services-1-wrap .service-1 {
	padding: 20px 30px;
	border: 1px solid #efefef;
	border-right: none;
	position: relative;
}

@media (max-width: 1199.98px) {
	.services-1-wrap .service-1 {
		border: 1px solid #efefef;
		margin-bottom: 30px;
	}
}

.services-1-wrap .service-1 .number {
	position: absolute;
	right: 10px;
	top: 10px;
	font-weight: 400;
	font-family: "Oswald", sans-serif;
	color: #dcdcdc;
}

.services-1-wrap .service-1 .service-1-icon {
	position: relative;
	margin-left: 20px;
}

.services-1-wrap .service-1 .service-1-icon:before {
	position: absolute;
	content: "";
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: -1;
	left: -20px;
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-right: 40px solid #0f6890;
}

.services-1-wrap .service-1 .service-1-icon>span {
	color: #000;
	font-size: 4rem;
}

.services-1-wrap .service-1 .service-1-content .service-heading {
	font-size: 1.5rem;
	color: #000;
	font-weight: 400;
}

.services-1-wrap .service-1 .service-1-content p {
	font-size: 15px;
}

.services-1-wrap [class^="col-"]:last-child .service-1 {
	border-right: 1px solid #efefef;
}

.header-top>.container {
	padding-bottom: 20px;
}

.header-top .quick-contact-icons .icon {
	margin-right: 10px;
}

.header-top .quick-contact-icons .icon span {
	font-size: 40px;
	line-height: 0;
}

.header-top .quick-contact-icons .text .h4 {
	font-size: 1.2rem;
	color: #000;
	margin-bottom: 0;
}

.header-top .quick-contact-icons .text .caption-text {
	font-size: 1rem;
}

.block-2 {
	background: #09162a;
	padding: 7rem 0;
}

.block-2 .img-overlap {
	margin-top: -150px;
	border: 4px solid white;
}

.block-3 {
	background: #09162a;
	padding: 7rem 0;
	margin-bottom: 14rem;
}



.line-height-0 {
	line-height: 0;
}

.projects-carousel-wrap {
	position: relative;
}

.project-item {
	position: relative;
	overflow: hidden;
}



.project-item .project-item-contents {
	z-index: 9;
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
}

.project-item .project-item-contents .project-item-category {
	color: #0f6890;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
}

.project-item .project-item-contents .project-item-title {
	color: #fff;
	margin-bottom: 0;
	font-size:1.5rem;
}

.project-item:hover:before {
	opacity: 1;
	visibility: visible;
}

.project-item:hover .project-item-contents {
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
	opacity: 1;
	visibility: visible;
}


.form-control:hover,
.form-control:focus,
.form-control:active {
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.btn {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .2rem;
	font-family: "Oswald", sans-serif;
}

.quote-form-wrap {
	background: #09162a;
	padding: 5rem;
}

.quote-form .form-control {
	border: none;
	padding-left: 0;
	padding-right: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 0;
	padding-bottom: 10px;
	background: #000;
	color: #fff;
}

.quote-form .form-control::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #fff;
}

.quote-form .form-control::-moz-placeholder {
	/* Firefox 19+ */
	color: #fff;
}

.quote-form .form-control:-ms-input-placeholder {
	/* IE 10+ */
	color: #fff;
}

.quote-form .form-control:-moz-placeholder {
	/* Firefox 18- */
	color: #fff;
}

.quote-form .btn-primary:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

.person {
	position: relative;
}

.person figure {
	margin-bottom: 0;
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}

.person img {
	width: 100%;
    height: 100%;
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.person img {
	width: 100%;
    height: 100%;
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}

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

.person .person-contents h3 {
	color: #000;
}

.person .person-contents .position {
	color: #0f6890;
}

.person:hover img {
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

.blog-entry{
	width: 308px; /* 容器宽度 */
    height: auto; /* 容器高度 */
    overflow: hidden; /* 隐藏超出容器的部分 */
    position: relative;
}
.blog-entry-contents{
	width: 308px; /* 容器宽度 */
    height: auto; /* 容器高度 */
	padding:10px;
	background: #0f6890;
}


.blog-entry-contents h6{
	color: #ffffff;
	text-align: center;
	padding: 5px;
	overflow-wrap: break-word;
}



.blog-entry .img-link {
	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}

/* 添加放大效果 */
.zoom-img {
    transition: transform 0.5s ease; /* 平滑的放大过渡效果 */
}

.img-link:hover .zoom-img {
    transform: scale(1.1); /* 鼠标滑过时放大图片 */
}

.person .social {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
}

.person .social a {
	display: block;
	margin-bottom: 10px;
	width: 40px;
	height: 40px;
	background: #fff;
	position: relative;
}

.person .social a>span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.person .social a:hover {
	background: #000;
	color: #fff;
}

.testimonial img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-bottom: 20px;
}

.testimonial blockquote p {
	font-size: 20px;
	color: #000;
	font-weight: 700;
}

.testimonial .client-name {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: #0f6890;
}



.blog-entry .blog-entry-contents h3 {
	line-height: 1;
}

.blog-entry .blog-entry-contents h3 a {
	color: #000;
	font-weight: 500;
	font-size: 1.2rem;
}

.blog-entry .blog-entry-contents .meta {
	font-size: 1rem;
}

.blog-entry .blog-entry-contents .meta,
.blog-entry .blog-entry-contents .meta a {
	color: #b0b0b0;
}

.blog-entry .blog-entry-contents .meta a {
	color: #0f6890;
}

.block-4 h3 {
	color: #fff;
	font-weight: 300;
	text-transform: uppercase;
}

.block-4 p {
	color: #fff;
}

.block-4 .form-subscribe .form-control {
	border: 2px solid #fff;
	background: none;
	border-radius: 0;
	 background-color: white;
}

.block-4 .form-subscribe .btn {
	background: #ff5e15;
	border-color: #ff5e15;
	border-radius: 0;
}

.block-4 .form-subscribe .btn:hover,
.block-4 .form-subscribe .btn:active,
.block-4 .form-subscribe .btn:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #000;
	border-color: #000;
	outline: none;
}

.sidebar-box {
	margin-bottom: 30px;
	padding: 25px;
	font-size: 15px;
	width: 100%;
	float: left;
	background: #fff;
}

.sidebar-box *:last-child {
	margin-bottom: 0;
}

.sidebar-box h3 {
	font-size: 18px;
	margin-bottom: 15px;
}

.categories li,
.sidelink li {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #dee2e6;
	list-style: none;
}

.categories li:last-child,
.sidelink li:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

.categories li a,
.sidelink li a {
	display: block;
}

.categories li a span,
.sidelink li a span {
	position: absolute;
	right: 0;
	top: 0;
	color: #ccc;
}

.categories li.active a,
.sidelink li.active a {
	color: #000;
	font-style: italic;
}

.comment-form-wrap {
	clear: both;
}

.comment-list {
	padding: 0;
	margin: 0;
}

.comment-list .children {
	padding: 50px 0 0 40px;
	margin: 0;
	float: left;
	width: 100%;
}

.comment-list li {
	padding: 0;
	margin: 0 0 30px 0;
	float: left;
	width: 100%;
	clear: both;
	list-style: none;
}

.comment-list li .vcard {
	width: 80px;
	float: left;
}

.comment-list li .vcard img {
	width: 50px;
	border-radius: 50%;
}

.comment-list li .comment-body {
	float: right;
	width: calc(100% - 80px);
}

.comment-list li .comment-body h3 {
	font-size: 20px;
}

.comment-list li .comment-body .meta {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .1em;
	color: #ccc;
}

.comment-list li .comment-body .reply {
	padding: 5px 10px;
	background: #e6e6e6;
	color: #000;
	text-transform: uppercase;
	font-size: 14px;
}

.comment-list li .comment-body .reply:hover {
	color: #000;
	background: #e3e3e3;
}

.search-form {
	background: #f7f7f7;
	padding: 10px;
}

.search-form .form-group {
	position: relative;
}

.search-form .form-group input {
	padding-right: 50px;
}

.search-form .icon {
	position: absolute;
	top: 50%;
	right: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.post-meta {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .2em;
}

.post-meta a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}


@media (max-width: 991.98px) {
	.hero-slide .owl-nav {
		display: none;
	}
}

.gtranslate_wrapper .gt_switcher-popup {
	color: #ffffff;
	text-decoration: none;
}

.gtranslate_wrapper .gt_switcher-popup span {
	color: #ffffff;
	text-decoration: none;
}

/**/
.breadcrumb-container {
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 20px 0;
	display: flex;
}

.row {
	margin-right: 0;
	margin-left: 0;
}

.breadcrumb-left {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: flex-start;
}
.breadcrumb-left a,
.breadcrumb-left span {
	margin-right: 5px;
	color: black;
	font-size: 16px;
	padding-bottom: 10px;
	padding-top: 10px;
}
.breadcrumb-left a:hover {
	margin-right: 5px;
	color: #0f6890;

}

.breadcrumb-right {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: flex-end;
}

.breadcrumb-right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-grow: 1;
}

.breadcrumb-right a {
	font-weight: 500;
}

.breadcrumb-right a,
.breadcrumb-right span {
	margin-right: 5px;
	color: black;
	font-size: 16px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.scrollable-div {
	white-space: nowrap;
	/* 防止内容换行 */
	overflow-x: auto;
	/* 或者使用 overflow-x: auto; */
	-webkit-overflow-scrolling: touch;
	/* 提高滚动性能（适用于 iOS Safari） */
}

/* å¯é€‰ï¼šæ·»åŠ ä¸€äº›æ ·å¼æ¥å¢žåŠ æ»šåŠ¨å®¹å™¨çš„å¯è§æ€§ */
.scrollable-div::-webkit-scrollbar {
	height: 8px;
}

.scrollable-div::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

.scrollable-div::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 4px;
}

.line-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.line-container::before,
.line-container::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 2px;
	background-color: #0f6890;
	width: 0%;
	transition: width 0.5s ease;
	/* æ·»åŠ è¿‡æ¸¡æ•ˆæžœ */
}

.line-container::before {
	left: 50%;
	transform: translateX(-50%);
}

.line-container::after {
	right: 50%;
	transform: translateX(50%);
}

.line-container:hover::before,
.line-container:hover::after {
	width: 100%;
	/* é¼ æ ‡æ»‘è¿‡æ—¶ï¼Œçº¿æ¡ä»Žä¸­é—´å‘ä¸¤è¾¹å±•å¼€ */
}

/*短线*/
.vertical-line {
	position: relative;
	width: 2px;
	height: 15px;
}

.vertical-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 100%;
	background-color: #555555;
}



.image-container {
	display: flex;
	flex-direction: row;
}

.main-image img {
	width: 100%;
	height: auto;
}

.thumbnail-images img {
	width: 100%;
	height: auto;
	margin-right: 10px;
	cursor: pointer;
}
.thumbnail.active {
	border: 2px solid #0f6890;
}


.thumbnail-images {
	display: block;
}

@media (max-width: 768px) {
	.thumbnail-images {
		display: none;
	}
}


.button-container {
	display: flex;
	justify-content: space-between;
}

.button-container p{
	margin-right: 10px;
}

.category-container {
	display: inline-block;
	vertical-align: middle;
	/* 可选，用于垂直居中对齐 */
	margin-right: 10px;
	/* å¯é€‰ï¼Œç”¨äºŽæ·»åŠ å³ä¾§é—´è· */
	color: #0f6890;
}

.product-h4{
	padding-top: 20px;
}

.product-h4 h3{
	color: #000;
}
.product-h4 h4{
	color: #000;
	padding-top: 20px;
}
.product-h4 p{
	font-size: 16px;
	color: rgb(0, 0, 0);
}
/* æŠ€æœ¯è¡¨æ ¼ */


/* é€‚åº”è¾ƒå°å±å¹•çš„è¡¨æ ¼æ ·å¼ */
@media screen and (max-width: 768px) {
  table {
    width: 100%;
    font-size: 14px;
  }
	.table-container {
  overflow-x: auto;
  white-space: nowrap;
	}
}



@media screen and (max-width: 768px)  {
	.blog-content h2{
	font-size:24px
	}
	.project-item .project-item-contents .project-item-title {
    color: #ffffff;
    margin-bottom: 0;
    font-size: 16px;
	}
	.site-section a h4{
	font-size:14px;
	}
	.site-section .project-item .project-item-contents span{
	font-size: 14px;
	}
}

.site-section a h4{
	text-align: center;
	color: #333;
}
.site-section a h4:hover{
	text-align: center;
	color: #0f6890;
}

.bg-primary {
    background-color: #0f6890!important;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #0f6890;
    border-color:#0f6890;
}

.expand-icon {
		    position: absolute;
		    right: 10px;
		    font-family: 'icomoon';
		    transition: transform 0.3s ease;
		}
		
.expand-icon.expanded {
	transform: rotate(-45deg);
}
/*ä¾§è¾¹æ */

#message-box {
	position: fixed;
	bottom: 0px;
	left: 20px;
	background-color: #f7f7f7;
	border-radius: 5px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	z-index: 99999;
}
#message-header {
	padding: 10px;
	background-color: #0f6890;
	color: #fff;
	font-weight: bold;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	text-align: center;
	cursor: pointer;
}

#message-header {
	/* å…¶å®ƒæ ·å¼ */
	position: relative;
	/* æ·»åŠ å®šä½å±žæ€§ */
}

#message-header::before {
	/* æ·»åŠ ä¼ªå…ƒç´  */
	content: '';
	position: absolute;
	top: 50%;
	left: 80px;
	transform: translateY(-50%);
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	padding: 3px;
	display: inline-block;
	/* åˆå§‹çŠ¶æ€ä¸ºæŒ‡å‘ä¸Šçš„å›¾æ ‡ */
	transform: rotate(-135deg);
	transition: all 0.3s ease-in-out;
	/* æ·»åŠ è¿‡æ¸¡æ•ˆæžœ */
}

/* ç‚¹å‡»åŽï¼Œä¼ªå…ƒç´ æ—‹è½¬180åº¦å˜æˆæŒ‡å‘ä¸‹çš„å›¾æ ‡ */
#message-header.active::before {
	transform: rotate(45deg);
	top: 35%
}


#message-form {
	padding-right: 20px;
	padding-left: 20px;
	max-height: 0px;
	overflow: hidden;
	width: 300px; /* 自定义宽度 */
}

#message-form h3 {
	margin-top: 0;
}

#message-form label {
	display: block;
	margin: 10px 0;
}

#message-form input[type="text"],
#message-form input[type="email"],
#message-form input[type="tel"],
#message-form input[type="product"],
#message-form textarea,
#message-form select {
	border: 1px solid #ccc;
	padding: 5px;
	border-radius: 5px;
	width: 100%;
}

#message-form input[type="submit"] {
	background-color: #232323;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
}

#message-toggle {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

#message-toggle button {
	background-color: #232323;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	margin: 0 auto;
	display: block;
}



/* æ·»åŠ åª’ä½“æŸ¥è¯¢ï¼Œè®¾å¤‡å±å¹•å®½åº¦å°äºŽç­‰äºŽ768px时，隐藏表单内容 */
@media screen and (max-width: 768px) {
	#message-box {
		display: none;
	}

	#message-toggle button {
		display: block;
		/* 显示切换按钮 */
	}
}

/* åº•éƒ¨æ  */

.mobbotact {
    background-color: #0f6890; /* 底色为蓝色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
}

.mobbotact .mobile-bottom-item {
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  text-align: center;
	  border: 1px solid #fff;
	  z-index: 9999;
}


.mobbotact .mobile-bottom-item a {
    display: block;
    padding-top:15px;
	  padding-bottom:15px;
    text-decoration: none;
    color: #fff;
	z-index: 9999;
}
#myBtn {
			  display: none;
			  position: fixed;
			  bottom: 120px;
			  right: 30px;
			  z-index: 99;
			  font-size: 15px;
			  border: none;
			  outline: none;
			  background-color: #0f6890;
			  color: white;
			  cursor: pointer;
			  padding: 15px;
			  width: 50px; /* 修改宽度 */
			  height: 50px; /* 修改高度 */
			  border-radius: 0; /* 取消圆角 */
			}
			
#myBtn:hover {
	background-color: #ff5e15;
}


@media screen and (max-width: 768px) {
  .intro-section{
	 display: none; 
  }
  .breadcrumb-container{
	  padding-top: 100px;
  }
}

@media screen and (min-width: 768px) {
  .mobile-bottom{
	 display: none; 
  }
}

/* --- 全局变量与基础设置 --- */
:root {
    --brand-blue: #019ee4;
    --brand-dark-blue: #007bb3; /* 按钮悬停颜色 */
    --text-main: #333333;
    --text-light: #666666;
    --bg-light: #f8fbfd;
    --border-color: #e0e0e0;
}

/* 优化整体字体阅读体验 */
.site-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.8;
}

/* 链接颜色 */
a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--brand-dark-blue);
    text-decoration: underline;
}

/* --- 标题样式优化 --- */
.blog-content h2 {
    color: var(--brand-blue);
    font-weight: 700;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 25px;
    position: relative;
}
/* 给H2加一个小蓝条装饰 */
.blog-content h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--brand-blue);
}

.blog-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
    border-left: 4px solid var(--brand-blue);
    padding-left: 12px;
    color: #222;
}

.blog-content h4 {
    font-weight: 600;
    color: #444;
    margin-top: 20px;
}

/* --- 正文与列表优化 --- */
.blog-content p {
    margin-bottom: 1.2rem;
    color: #4a4a4a;
}

/* 列表美化 */
.blog-content ul {
    list-style: none; /* 移除默认圆点 */
    padding-left: 10px;
}
.blog-content ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
.blog-content ul li::before {
    content: '✔'; /* 使用对号作为列表图标 */
    color: var(--brand-blue);
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: bold;
}

/* --- 引用块 (Blockquote) 样式 --- */
blockquote {
    background-color: var(--bg-light);
    border-left: 5px solid var(--brand-blue);
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 5px 5px 0;
    font-style: italic;
    color: #555;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- 表格样式 (关键部分) --- */
/* 让表格看起来更像工业标准对比表 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

table thead tr {
    background-color: var(--brand-blue);
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

table th, table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

table tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
}

table tbody tr:hover {
    background-color: #f0faff; /* 鼠标悬停显示淡蓝色 */
}

/* --- 虚线分隔符 --- */
.dashed-line {
    border-top: 2px dashed var(--border-color);
    margin: 40px 0;
}

/* --- 翻页导航 (Previous/Next) --- */
.post-navigation .prev, 
.post-navigation .next {
    font-weight: bold;
    color: #555;
}
.post-navigation a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}
.post-navigation a:hover {
    background-color: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
    text-decoration: none;
}

/* --- 相关产品 (Related Products) 卡片化 --- */
.product-h4 h4 {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.project-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* 确保高度一致 */
}

.project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(1, 158, 228, 0.15); /* 蓝色阴影 */
    border-color: var(--brand-blue);
	 
}

.project-item img {
    border-radius: 6px;
    margin-bottom: 15px;
    max-height: 275px;
    object-fit: contain;
}


.project-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin-top: 10px;
    display: block; /* 建议加上，防止行内元素间距失效 */
}


/* --- 联系表单美化 --- */
#msgform {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.form-group label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 15px;
    background-color: #fff;
    transition: all 0.3s;
}

.form-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(1, 158, 228, 0.2); /* 聚焦时光晕 */
    outline: none;
}

/* 按钮样式覆盖 */
.btn-primary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff;
    padding: 12px 40px;
    border-radius: 4px; /* 或 30px 如果想要圆角按钮 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--brand-dark-blue) !important;
    border-color: var(--brand-dark-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* --- 移动端表格适配 (CSS Only) --- */
@media screen and (max-width: 768px) {
    /* 1. 强制表格变为块级元素，允许横向滚动 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto; /* 超出部分显示滚动条 */
        -webkit-overflow-scrolling: touch; /* iOS 丝滑滚动支持 */
        white-space: nowrap; /* 强制文字不换行，保持列宽，避免挤压 */
    }

    /* 2. 稍微缩小移动端的表格内边距和字体，显示更多内容 */
    table th, 
    table td {
        padding: 10px; /* 减少内边距 */
        font-size: 0.9rem; /* 稍微缩小字体 */
    }

    /* 3. 给表格加一个视觉提示，让用户知道可以左右滑 */
    /* 这是一个小技巧：给表格容器加个阴影提示（可选） */
    table::-webkit-scrollbar {
        height: 6px; /* 滚动条高度 */
    }
    table::-webkit-scrollbar-thumb {
        background: #ccc; 
        border-radius: 3px;
    }
    


}

/* 针对 1400px 以上的宽屏显示器 (Bootstrap 5 的 XXL 标准) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px; /* 相比 1140 增加了 180px，视觉更开阔 */
    }
}

/* =========================================
   1. 顶部信息栏 (Header Top) - 专业商务风
   ========================================= */
.header-top {
    background-color: #ffffff !important; /* 强制白色背景，显得干净 */
    border-bottom: 1px solid #eee; /* 增加一条淡淡的分隔线 */
    padding: 15px 0;
}

/* Logo 尺寸控制 */
.header-top img {
    max-height: 60px; /* 防止 Logo 过大撑破布局 */
    width: auto;
}

/* 联系方式图标 */
.quick-contact-icons .icon {
    font-size: 24px;
    margin-right: 15px;
    color: #019ee4 !important; /* 品牌蓝 */
    transition: transform 0.3s ease;
}

/* 鼠标悬停时图标跳动一下 */
.quick-contact-icons:hover .icon {
    transform: translateY(-3px);
}

/* 联系方式文字 */
.header-top .text .h4 {
    font-size: 16px !important; /* 修正原HTML中h4过大的问题 */
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
    line-height: 1.2;
}

.header-top .text .caption-text {
    font-size: 13px;
    color: #777 !important; /* 覆盖内联样式，使用柔和的灰色 */
    font-weight: 400;
}

/* 链接去除下划线 */
.header-top a {
    text-decoration: none;
    color: inherit;
}

/* =========================================
   2. 导航栏 (Navigation) - 品牌色沉浸式
   ========================================= */
.site-navbar {
    background-color: #019ee4; /* 整个导航栏变蓝 */
    box-shadow: 0 4px 10px rgba(1, 158, 228, 0.2); /* 蓝色投影，增加层次感 */
    padding: 0 !important; /* 移除多余内边距 */
}

/* 菜单项布局 */
.site-navigation .site-menu {
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
}

.site-navigation .site-menu > li {
    display: inline-block;
    padding: 0;
}

/* 一级菜单链接样式 */
.site-navigation .site-menu > li > a {
    padding: 20px 25px; /* 增加点击区域 */
    color: #ffffff !important; /* 白色文字 */
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase; /* 大写显得更正式 */
    letter-spacing: 0.5px;
    display: inline-block;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

/* 鼠标悬停 & 激活状态 */
.site-navigation .site-menu > li > a:hover,
.site-navigation .site-menu > li.active > a {
    background-color: #007bb3; /* 深一点的蓝色 */
    color: #fff;
}

/* =========================================
   3. 下拉菜单 (Dropdown) - 精致卡片
   ========================================= */
.site-navigation .site-menu .submenu {
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* 柔和阴影 */
    border-top: 3px solid #005f8d; /* 顶部加深蓝条装饰 */
    border-radius: 0 0 4px 4px;
    min-width: 220px;
    padding: 10px 0;
    display: none; /* 默认隐藏，由JS控制显示，或配合 hover CSS */
    position: absolute;
    z-index: 99;
}

/* 如果你的模板是纯 CSS hover 触发，需要加上这句 */
.site-navigation .site-menu > li:hover .submenu {
    display: block;
    animation: fadeInUp 0.3s ease;
}

.site-navigation .site-menu .submenu li {
    display: block;
    border-bottom: 1px solid #f5f5f5;
}
.site-navigation .site-menu .submenu li:last-child {
    border-bottom: none;
}

/* 下拉菜单链接 */
.site-navigation .site-menu .submenu li a {
    padding: 12px 20px;
    display: block;
    color: #555 !important; /* 深灰色文字 */
    font-size: 14px;
    text-transform: none; /* 下拉菜单不用全大写 */
    font-weight: 500;
}

.site-navigation .site-menu .submenu li a:hover {
    background-color: #f0f9ff; /* 浅蓝色背景 */
    color: #019ee4 !important; /* 变蓝 */
    padding-left: 25px; /* 稍微右移的动效 */
}

/* =========================================
   4. 语言选择器 (Language Selector)
   ========================================= */
.zhuoli {
    margin-left: auto; /* 推到最右边 */
    padding-left: 20px;
}

.gt_selector {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.gt_selector:hover {
    background-color: #fff;
    color: #019ee4;
}

/* 适配下方的谷歌翻译选项颜色 */
.gt_selector option {
    color: #333;
    background: #fff;
}

/* =========================================
   5. 动画效果
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

			/* --- 产品轮播整体容器 --- */
.projects-carousel-wrap {
    position: relative;
    padding: 0 10px; /* 防止阴影被切掉 */
}

/* --- 单个产品卡片样式 --- */
.projects-carousel-wrap .owl-item .img-link {
    display: block;
    background: #ffffff;
    border-radius: 8px; /* 圆角 */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 轻微的阴影，增加层次感 */
    transition: all 0.3s ease; /* 平滑过渡动画 */
    text-decoration: none; /* 去掉下划线 */
    height: 100%; /* 确保高度一致 */
    border: 1px solid #eee; /* 极淡的边框 */
}

/* --- 鼠标悬停时的效果 (卡片上浮 + 阴影加深) --- */
.projects-carousel-wrap .owl-item .img-link:hover {
    transform: translateY(-5px); /* 向上浮动 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 阴影变深 */
    border-color: #007bff; /* 悬停时边框变色，可改成你的品牌色 */
}


.projects-carousel-wrap .img-fluid.zoom-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保证产品图完整显示不被裁剪，如果想填满可用 cover */
    padding: 5px; /* 图片留白，看起来更透气 */
    transition: transform 0.5s ease;
}

/* --- 图片悬停放大 --- */
.projects-carousel-wrap .img-link:hover .zoom-img {
    transform: scale(1.08); /* 图片轻微放大 */
}

/* --- 文字内容区域 --- */
.projects-carousel-wrap .blog-entry-contents {
    padding: 15px 15px;
    background: #fff;
    text-align: center; /* 文字居中 */
    border-top: 1px solid #f0f0f0;
}

.projects-carousel-wrap .blog-entry-contents h6 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
    
    /* 限制标题最多显示2行，多余显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px; /* 固定高度，保证卡片对齐 */
}

.projects-carousel-wrap .img-link:hover .blog-entry-contents h6 {
    color: #007bff; /* 悬停时标题变色 */
}

/* --- 左右切换箭头美化 (假设使用的是 Owl Carousel 默认导航) --- */
.projects-carousel-wrap .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    color: #333 !important;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
/* --- Brand Story Section Styling --- */

/* 1. 区域整体留白 */
.brand-story-wrap {
    background-color: #fff; /* 确保背景是干净的白色 */
    overflow: hidden;
}

/* 2. 左侧图片美化 (增加层次感) */
.brand-story-wrap .img-container {
    position: relative;
    z-index: 1;
    padding: 20px; /* 给图片留一点内边距 */
}

/* 图片后的装饰方块 */
.brand-story-wrap .img-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 90%;
    background-color: #f4f6f8; /* 浅灰色背景块 */
    z-index: -1;
    border-radius: 10px;
}

/* 图片本体 */
.brand-story-wrap .main-img {
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* 高级感的阴影 */
    transition: transform 0.3s ease;
}

.brand-story-wrap .main-img:hover {
    transform: translateY(-5px); /* 悬停轻微上浮 */
}

/* 3. 标题排版 */
.brand-story-wrap .sub-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ee6100; /* 品牌橙色 */
    margin-bottom: 10px;
    display: block;
}

.brand-story-wrap .main-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: #222;
    margin-bottom: 20px;
}

.brand-story-wrap .main-title span {
    color: #007bff; /* 或者是你的品牌主色蓝 */
}

/* 标题下的短横线装饰 */
.brand-story-wrap .title-line {
    width: 60px;
    height: 4px;
    background: #ee6100;
    border-radius: 2px;
}

/* 4. 正文描述 */
.brand-story-wrap .description-text {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin-top: 25px;
}

/* 5. 特性列表 (Icon Box) */
.brand-story-wrap .feature-item {
    background: #fff;
    align-items: flex-start; /* 图标顶部对齐 */
}

/* 图标样式 */
.brand-story-wrap .icon-box {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%; /* 圆形图标背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.brand-story-wrap .icon-box span {
    font-size: 24px;
    color: #ee6100; /* 图标颜色 */
}

/* 特性文字 */
.brand-story-wrap .text-box h4 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.brand-story-wrap .text-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #777;
    margin: 0;
}

/* --- News Grid Styling --- */

/* 1. 卡片整体样式 */
.news-section-wrap .news-card {
    display: block;
    background: #fff;
    border-radius: 8px;
    overflow: hidden; /* 确保图片放大时不溢出圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%; /* 确保同在一行的卡片高度一致 */
    text-decoration: none; /* 去掉下划线 */
    border: 1px solid #eee; /* 极淡的边框增加质感 */
}

/* 悬停效果：上浮 + 阴影加深 */
.news-section-wrap .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #007bff; /* 悬停边框变蓝 */
}

/* 2. 图片区域控制 */
.news-section-wrap .img-wrap {
    position: relative;
    height: 200px; /* ✅ 强制固定图片高度，保证排版整齐 */
    overflow: hidden;
    background: #f4f4f4;
}

.news-section-wrap .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ 关键属性：裁切图片填充容器，不变形 */
    transition: transform 0.5s ease;
}

/* 悬停时图片缓慢放大 */
.news-section-wrap .news-card:hover .img-wrap img {
    transform: scale(1.1);
}

/* 3. 文字区域样式 */
.news-section-wrap .text-wrap {
    padding: 20px;
}

/* 日期样式 */
.news-section-wrap .date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
}

/* 标题样式 */
.news-section-wrap h6 {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    
    /* 限制标题最多显示 2 行，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px; /* 固定标题高度区域 */
    transition: color 0.3s;
}

/* 悬停时标题变色 */
.news-section-wrap .news-card:hover h6 {
    color: #007bff;
}

/* 4. (可选) 遮罩层图标动画 */
.news-section-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.news-section-wrap .overlay span {
    color: #fff;
    font-size: 24px;
    transform: scale(0);
    transition: transform 0.3s;
}

.news-section-wrap .news-card:hover .overlay {
    opacity: 1;
}

.news-section-wrap .news-card:hover .overlay span {
    transform: scale(1);
}

/* --- Site Footer Styling --- */

/* 1. 整体容器 */
.site-footer {
    padding: 70px 0 30px 0;
    background: #15202b; /* 深空蓝黑背景，比纯黑更高级 */
    color: #a0a6ad;      /* 浅灰色文字，阅读舒适 */
    font-size: 15px;
    line-height: 1.8;
}

.site-footer a {
    color: #a0a6ad;
    transition: .3s all ease;
    text-decoration: none;
}

.site-footer a:hover {
    color: #019ee4; /* 悬停变为品牌橙色 */
    padding-left: 5px; /* 悬停时轻微右移的动效 */
}

/* 2. 标题样式 */
.site-footer .footer-heading {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

/* 标题下方的小横线装饰 */
.site-footer .footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background: #019ee4;
}

.site-footer .footer-heading-logo {
    color: #fff;
    font-weight: 800;
    letter-spacing: 2px;
}

/* 3. 左侧联系信息 */
.site-footer .info-item {
    display: flex;
    margin-bottom: 15px;
}

.site-footer .info-item span {
    color: #019ee4;
    margin-right: 15px;
    font-size: 18px;
    margin-top: 5px;
}

.site-footer .info-item p {
    margin: 0;
    font-size: 14px;
}

/* 4. 社交图标 */
.site-footer .footer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05); /* 半透明背景 */
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    color: #fff;
    transition: all 0.3s;
}

.site-footer .footer-social a:hover {
    background: #019ee4; /* 悬停变橙色 */
    color: #fff;
    transform: translateY(-3px);
    padding-left: 0; /* 覆盖全局链接样式 */
}

/* 5. 链接列表 */
.site-footer .footer-links li {
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* 极淡的分隔线 */
    padding-bottom: 12px;
}

.site-footer .footer-links li:last-child {
    border-bottom: none;
}

.site-footer .news-date {
    color: #019ee4;
    font-size: 12px;
    font-weight: bold;
}

/* 6. 底部表单美化 (暗黑风格) */
.site-footer .footer-form .form-control {
    background: rgba(255,255,255,0.05); /* 输入框半透明 */
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

.site-footer .footer-form .form-control:focus {
    background: rgba(255,255,255,0.1);
    border-color: #019ee4;
    box-shadow: none;
}

.site-footer .btn-primary {
    background-color: #019ee4;
    border-color: #019ee4;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
}

.site-footer .btn-primary:hover {
    background-color: #019ee4; /* 稍深的橙红色 */
}

/* 7. 底部版权线 */
.site-footer .border-top-dark {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.site-footer .copyright-text {
    font-size: 14px;
    color: #777;
    margin: 0;
}
.oi-cert-section {
        width: 100%;
        background-color: #f8f9fa;
        padding: 50px 0;
        overflow: hidden; /* 核心：隐藏超出屏幕的部分 */
        font-family: Arial, Helvetica, sans-serif;
    }

    /* 2. 标题区域样式 */
    .oi-cert-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .oi-cert-header p {
        color: #666;
        font-size: 14px;
        margin: 0;
    }

    /* 3. 核心滚动轨道 (Flex布局 + 无限宽) */
    .oi-slider {
        display: flex;
        width: max-content; /* 让宽度根据图片数量自动撑开，不用算像素 */
        animation: oi-scroll-infinite 30s linear infinite; /* 30秒转一圈，越小越快 */
    }

    .oi-slider:hover {
        animation-play-state: paused; /* 鼠标悬停暂停 */
    }

    /* 4. 单张证书卡片样式 */
    .oi-slide {
        width: 300px; /* 卡片宽度 */
        height: auto; /* 卡片高度 */
        margin: 0 15px; /* 左右间距 */
        background: white;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .oi-slide img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: 0.3s;
    }
    
    /* 5. 动画定义：向左移动 50% 后重置 */
    @keyframes oi-scroll-infinite {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

				/* 1. 容器设置 */
				.oi-page-header {
					position: relative;
					background-size: cover;
					background-position: center center;
					background-repeat: no-repeat;
					/* 视差滚动效果：背景图固定，文字动 (如果不喜欢可以删掉这一行) */
					background-attachment: fixed; 
					padding: 120px 0 100px; /* 调整上下内边距，让高度适中 */
					color: white;
					text-align: center;
					overflow: hidden;
				}

				/* 2. 黑色/深蓝遮罩层 (关键！让文字看清) */
				.oi-page-header::before {
					content: '';
					position: absolute;
					top: 0; left: 0; right: 0; bottom: 0;
					/* 从深蓝到透明黑的渐变，符合品牌色 */
					background: linear-gradient(135deg, rgba(0,51,102,0.9), rgba(0,0,0,0.6));
					z-index: 1;
				}

				/* 3. 内容层 (确保文字浮在遮罩上面) */
				.oi-header-content {
					position: relative;
					z-index: 2;
				}

				/* 4. 主标题 */
				.oi-page-title {
					font-size: 48px;
					font-weight: 800;
					margin-bottom: 10px;
					letter-spacing: 1px;
					text-transform: uppercase;
					animation: fadeInUp 1s ease-out; /* 简单的进入动画 */
				}

				/* 5. 副标题/描述 */
				.oi-page-subtitle {
					font-size: 18px;
					font-weight: 300;
					opacity: 0.9;
					margin-bottom: 30px;
					max-width: 600px;
					margin-left: auto;
					margin-right: auto;
					color:#ffffff;
				}

				/* 6. 面包屑导航美化 */
				.oi-breadcrumb {
					display: inline-block;
					background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
					padding: 8px 25px;
					border-radius: 50px; /* 圆角胶囊形状 */
					font-size: 14px;
					backdrop-filter: blur(5px); /* 磨砂玻璃效果 (高级感) */
				}

				.oi-breadcrumb a {
					color: #fff;
					text-decoration: none;
					font-weight: 500;
					transition: 0.3s;
				}
				
				.oi-breadcrumb a:hover {
					color: #FF6600; /* 悬停变品牌橙色 */
				}

				.oi-breadcrumb span {
					color: rgba(255,255,255,0.6); /* 分隔符颜色变淡 */
					margin: 0 8px;
				}

				/* 简单的淡入动画 */
				@keyframes fadeInUp {
					from { opacity: 0; transform: translateY(20px); }
					to { opacity: 1; transform: translateY(0); }
				}
				
				/* 手机端适配 */
				@media (max-width: 768px) {
					.oi-page-title { font-size: 32px; }
					.oi-page-header { padding: 110px 0 60px; }
				}

/* 局部样式，不影响全站其他部分 */
				.oi-about-section {
					padding: 80px 0;
					background-color: #fff;
					font-family: 'Arial', sans-serif;
				}

				.oi-section-title {
					font-size: 32px;
					font-weight: 700;
					color: #003366; /* 品牌深蓝 */
					margin-bottom: 20px;
					position: relative;
				}
				
				.oi-section-title::after {
					content: '';
					display: block;
					width: 60px;
					height: 3px;
					background: #FF6600; /* 品牌橙色点缀 */
					margin-top: 10px;
				}

				.oi-lead-text {
					font-size: 18px;
					color: #333;
					line-height: 1.6;
					margin-bottom: 25px;
					font-weight: 500;
				}

				.oi-desc-text {
					font-size: 15px;
					color: #666;
					line-height: 1.8;
					margin-bottom: 20px;
					text-align: justify; /* 两端对齐，看起来更整齐 */
				}

				/* 核心优势列表样式 */
				.oi-features-list {
					list-style: none;
					padding: 0;
					margin: 30px 0;
					display: flex;
					flex-wrap: wrap;
				}
				
				.oi-features-list li {
					width: 100%; /* 手机端一行一个 */
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					font-weight: 600;
					color: #003366;
				}
				
				.oi-features-list li::before {
					content: '✔'; /* 使用对勾符号 */
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 24px;
					height: 24px;
					background: #e6f0ff;
					color: #003366;
					border-radius: 50%;
					margin-right: 10px;
					font-size: 14px;
				}

				/* 图片容器美化 */
				.oi-img-wrapper {
					position: relative;
					box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* 柔和阴影 */
					border-radius: 10px;
					overflow: hidden;
					margin-top: 20px; /* 手机端图片顶部留白 */
				}
				
				.oi-img-wrapper img {
					display: block;
					width: 100%;
					height: auto;
					transition: transform 0.5s ease;
				}
				
				.oi-img-wrapper:hover img {
					transform: scale(1.03); /* 鼠标悬停轻微放大 */
				}

				/* 电脑端双栏布局 (假设您使用Bootstrap) */
				@media (min-width: 768px) {
					.oi-features-list li { width: 50%; } /* 电脑端一行两个优势 */
					.oi-img-wrapper { margin-top: 0; }
				}
.oi-stats-section {
        background-color: #003366; /* 品牌深蓝背景 */
        padding: 60px 0;
        color: white;
        text-align: center;
        font-family: 'Arial', sans-serif;
    }
    .oi-stats-container {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 0 auto;
        justify-content: space-around;
    }
    .oi-stat-item {
        flex: 1;
        min-width: 200px;
        margin: 20px 0;
        padding: 0 20px;
        border-right: 1px solid rgba(255,255,255,0.2); /* 分隔线 */
    }
    .oi-stat-item:last-child { border-right: none; }
    
    .oi-stat-number {
        font-size: 48px;
        font-weight: 800;
        color: #FF6600; /* 橙色高亮数字 */
        display: block;
        margin-bottom: 10px;
    }
    .oi-stat-label {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #e0e0e0;
    }
    
    @media(max-width: 768px) {
        .oi-stat-item { border-right: none; margin-bottom: 40px; }
    }

	.oi-vision-section {
        padding: 80px 0;
        background-color: #f4f7f6; /* 浅灰背景 */
        font-family: 'Arial', sans-serif;
    }
    .oi-vision-grid {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 0 auto;
        gap: 30px;
        padding: 0 15px;
    }
    .oi-card {
        background: white;
        flex: 1;
        min-width: 300px;
        padding: 40px 30px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        text-align: center;
    }
    .oi-card:hover {
        transform: translateY(-10px); /* 鼠标悬停上浮效果 */
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    /* 纯CSS画的简单图标圈圈 */
    .oi-icon-circle {
        width: 60px;
        height: 60px;
        background: #e6f0ff;
        color: #003366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 24px;
        font-weight: bold;
    }
    .oi-card h3 { color: #003366; margin-bottom: 15px; font-size: 20px; }
    .oi-card p { color: #666; font-size: 14px; line-height: 1.6; }

	.oi-cta-section {
        background: linear-gradient(45deg, #003366, #004080); /* 渐变蓝 */
        padding: 60px 0;
        text-align: center;
        font-family: 'Arial', sans-serif;
    }
    .oi-cta-content h2 {
        color: white;
        font-size: 28px;
        margin-bottom: 15px;
    }
    .oi-cta-content p {
        color: #ddd;
        font-size: 16px;
        margin-bottom: 30px;
    }
    .oi-btn-cta {
        display: inline-block;
        background-color: #FF6600; /* 显眼的橙色按钮 */
        color: white;
        padding: 15px 40px;
        border-radius: 50px;
        font-weight: bold;
        text-decoration: none;
        transition: 0.3s;
        text-transform: uppercase;
    }
    .oi-btn-cta:hover {
        background-color: #e65c00;
        transform: scale(1.05); /* 按钮放大效果 */
        text-decoration: none; 
        color: white; /* 确保文字颜色保持白色，防止变成主题默认的蓝色 */
    }

				/* 1. 整体板块间距 */
				.oi-cert-grid-section {
					padding: 60px 0;
					background-color: #f9f9f9; /* 浅灰底色，凸显白色卡片 */
				}

				/* 2. 证书卡片容器 */
				.oi-cert-card {
					background: #fff;
					border-radius: 8px;
					overflow: hidden; /* 保证图片放大时不溢出圆角 */
					box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 默认轻微阴影 */
					transition: all 0.3s ease; /* 平滑过渡动画 */
					height: 100%; /* 撑满父容器高度 */
					border: 1px solid #eee;
				}

				/* 3. 悬停效果：卡片上浮 + 阴影加深 + 底部橙色条 */
				.oi-cert-card:hover {
					transform: translateY(-10px); /* 向上浮动 */
					box-shadow: 0 15px 30px rgba(0,0,0,0.15);
					border-color: #FF6600; /* 边框变品牌色 */
				}

				/* 4. 图片区域 */
				.oi-cert-img-wrap {
					width: 100%;
					height: 450px; /* 固定图片高度，防止参差不齐 */
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					padding: 20px;
					border-bottom: 1px solid #f0f0f0;
					overflow: hidden;
				}

				.oi-cert-img-wrap img {
					max-width: 100%;
					max-height: 100%;
					object-fit: contain; /* 保证证书完整显示，不被裁剪 */
					transition: transform 0.5s ease;
				}

				/* 悬停时图片轻微放大 */
				.oi-cert-card:hover .oi-cert-img-wrap img {
					transform: scale(1.05);
				}

				/* 5. 文字内容区域 */
				.oi-cert-content {
					padding: 20px 25px;
					text-align: center;
				}

				.oi-cert-title {
					font-size: 16px; /* 更精致的字号 */
					font-weight: 600;
					color: #333;
					margin: 0;
					line-height: 1.5;
					transition: color 0.3s;
					/* 限制文字最多显示3行，超出省略，保证卡片高度一致 */
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					min-height: 72px; /* 强制预留高度，对齐关键 */
				}

				.oi-cert-card:hover .oi-cert-title {
					color: #003366; /* 悬停变品牌深蓝 */
				}



/* === 产品相册容器 === */
    .oi-product-gallery {
        padding-right: 20px; /* 在大屏下给右侧文字留点距离 */
    }
    @media (max-width: 991px) {
        .oi-product-gallery { padding-right: 0; }
    }

    /* === 主图区域 === */
    .oi-main-image-wrap {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* 轻微的高级感投影 */
        border: 1px solid #eee;
        background: #fff;
        /* 强制一个比例或者高度，防止切换图片时页面抖动 (可选) */
        /* height: 400px; display: flex; align-items: center; justify-content: center; */
    }

    #oiMainImage {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity 0.3s ease-in-out; /* 核心：用于 JS 的淡入淡出效果 */
        opacity: 1;
    }

    /* 用于 JS 切换时的透明度状态 */
    #oiMainImage.fade-out {
        opacity: 0;
    }

    /* === 缩略图区域 === */
    .oi-thumb-row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .oi-thumb-col {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 16px;
    }

    /* 单个缩略图样式 */
    .oi-thumbnail {
        width: 100%;
        height: auto;
        border-radius: 6px;
        cursor: pointer;
        /* 默认状态：稍微透明，无边框 */
        opacity: 0.6;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 悬停状态 */
    .oi-thumbnail:hover {
        opacity: 1;
        transform: translateY(-2px); /* 轻微上浮 */
    }

    /* 选中激活状态 */
    .oi-thumbnail.active {
        opacity: 1;
        border-color: #FF6600; /* ★ 品牌色边框，强烈建议修改为您网站的主色调 */
        box-shadow: 0 4px 10px rgba(255, 102, 0, 0.2); /* 品牌色投影 */
    }


	 /* === 产品详情右侧区域 === */
    .oi-product-info-area {
        padding-left: 20px; /* 大屏左侧留白 */
    }
    @media (max-width: 768px) {
        .oi-product-info-area { padding-left: 0; margin-top: 30px; }
    }

    /* 1. 服务承诺高亮条 */
    .oi-service-badge {
        display: inline-block;
        background-color: #e6f7ff; /* 浅蓝色背景 */
        color: #0050b3; /* 深蓝色文字 */
        padding: 8px 15px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
        border-left: 4px solid #0050b3;
    }
    .oi-service-badge i { margin-right: 6px; }

    /* 2. 产品标题 */
    .oi-prod-title {
        font-size: 28px;
        font-weight: 700;
        color: #222;
        margin-bottom: 25px;
        text-transform: capitalize;
        line-height: 1.3;
    }

    /* 3. 参数列表 (核心美化) */
    .oi-specs-list {
        margin-bottom: 30px;
        border-top: 1px solid #eee;
    }

    .oi-spec-item {
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        font-size: 15px;
    }

    .oi-spec-label {
        width: 140px; /* 标签固定宽度，对齐 */
        color: #666;
        font-weight: 500;
        flex-shrink: 0;
    }

    .oi-spec-value {
        color: #333;
        font-weight: 600;
    }

    /* 4. 按钮组容器 */
    .oi-action-btns {
        display: flex;
        gap: 15px; /* 按钮间距 */
        margin: 30px 0;
    }

    .oi-btn-action {
        flex: 1; /* 两个按钮等宽 */
        padding: 12px 0;
        text-align: center;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .oi-btn-action i { margin-right: 8px; font-size: 16px; }

    /* 主按钮 (Contact) */
    .btn-contact {
        background-color: #FF6600; /* 品牌橙 */
        color: #fff !important;
        border: 1px solid #FF6600;
        box-shadow: 0 4px 10px rgba(255, 102, 0, 0.2);
    }
    .btn-contact:hover {
        background-color: #e65c00;
        transform: translateY(-2px);
    }

    /* 次按钮 (Chat) */
    .btn-chat {
        background-color: #fff;
        color: #003366 !important; /* 品牌蓝 */
        border: 1px solid #003366;
    }
    .btn-chat:hover {
        background-color: #f0f8ff;
    }

    /* 5. 应用领域描述 */
    .oi-app-box {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 6px;
        border-left: 3px solid #ccc;
    }
    .oi-app-box h4 {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
    }
    .oi-app-box p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        margin-bottom: 0;
    }

	 /* === 标题样式 === */
    .oi-details-title {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
        position: relative;
        padding-left: 15px; /* 给左侧装饰条留位置 */
    }
    /* 左侧品牌色竖条 */
    .oi-details-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 4px;
        background-color: #FF6600; /* 品牌橙 */
        border-radius: 2px;
    }

    .oi-sub-title {
        font-size: 18px;
        font-weight: 600;
        color: #003366; /* 品牌蓝 */
        margin-top: 30px;
        margin-bottom: 15px;
    }


    /* 强制覆盖 ACF 输出的默认表格样式 */

    .oi-table-wrapper table th, 
    .oi-table-wrapper table td {
        padding: 12px 15px;
        border: 1px solid #e1e1e1;
        font-size: 14px;
        color: #555;
    }

    /* 表头样式 */
    .oi-table-wrapper table th,
    .oi-table-wrapper table thead tr {
        background-color: #003366; /* 品牌深蓝背景 */
        color: #fff !important;    /* 白色文字 */
        font-weight: 600;
        text-align: left;
    }
    
    /* 斑马纹：隔行变色 */
    .oi-table-wrapper table tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    .oi-table-wrapper table tr:hover {
        background-color: #f0f8ff; /* 悬停高亮 */
    }

    /* === 上一篇/下一篇 导航 === */
    .oi-post-nav-row {
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid #eee;
    }

    .oi-nav-link {
        display: block;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
        transition: all 0.3s;
        height: 100%;
        text-decoration: none !important;
    }

    .oi-nav-link:hover {
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    .oi-nav-label {
        font-size: 12px;
        color: #999;
        text-transform: uppercase;
        display: block;
        margin-bottom: 5px;
    }

    .oi-nav-title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        display: block;
        line-height: 1.4;
        /* 限制标题只显示1行 */
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
    }

    .oi-nav-link:hover .oi-nav-title {
        color: #FF6600; /* 悬停变橙色 */
    }

    /* 箭头图标 */
    .oi-nav-icon {
        color: #FF6600;
        font-size: 14px;
        margin-bottom: 2px;
    }