@media(max-width: 767px) {
	
}

@media(max-width: 991px) {
	.component h1{font-size: 2.4rem; margin-bottom: 1rem;}
	.component h2{font-size: 2.2rem; margin-bottom: 1rem;}
	.component h3{font-size: 2.0rem; margin-bottom: 1rem;}
	.component h4{font-size: 1.8rem; margin-bottom: 1rem;}
	.component h5{font-size: 1.6rem; margin-bottom: 1rem;}
	.component h6{font-size: 1.4rem; margin-bottom: 1rem;}
	.section-header{
		margin-bottom: 2rem;
	}
	
	.diy-conten .site-content{
		padding-top: 17.2rem;
	}
	.index-bg-box {
	    position: relative;
	    /* display: inline-block; */
		display: block;
		/*height: calc(100vh - 6.2rem);*/
		height: calc(100vh - 16.2rem);
	}
	.index-bg-box::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 0;
	}
	.index-bg-box .swiper-slide{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#videoBkg{
		width: auto !important;
		height: 100% !important;
		max-width: fit-content !important;
	}
	/* .swiper {width: 100%; height: 100%;}
	.swiper-slide {text-align: center; display: flex; justify-content: center; align-items: center;}
	.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}*/
	.hero__video .swiper-pagination-bullet {
	    width: .8rem !important;
	    height: .8rem !important;
	}
	.hero__video .swiper-pagination-bullet-active {
	    opacity: var(--swiper-pagination-bullet-opacity, 1);
	    background: #10384d;
		width: 1.0rem !important;
		height: 1.0rem !important;
	}
	
	.hero__content {
	    bottom: 6rem;
	}
	.hero__content h1  {
	    text-shadow: 2px 2px 10px #333;
	    font-size: 5rem;
	    font-size: 2.4rem;
	    font-weight: 300;
	}
	.hero__content h1 span {
	    display: block;
	    font-weight: 300;
	    border-left: 6px solid #10384d;
	    padding-left: 0.6rem;
	    margin-left: 0rem;
	    font-size: 2.4rem;
	}
	.hero__content p  {
	    font-size: 1.8rem;
	    font-weight: bold;
	    text-shadow: 2px 2px 10px #333;
	}
	.hero__content p img{
	    width: 3.0rem !important;
		vertical-align: middle;
	}
	
	.the-index-1-1 p{
		color: #000;
		margin-bottom: 0.6rem !important;
		margin-top: 0 !important;
	}
	.the-index-1-1 .section-introduction__content{
		flex-basis: 45%;
	}
	.the-index-1-1 .container .section-introduction__content{
		padding: 2rem 0;
	}
	.the-index-1-1 .section-introduction__images__02 {
	    max-width: 70%;
	    position: relative;
	    margin-left: auto;
	    margin-top: -17rem;
	}
	
	/*.the-index-1-1 .introduction .pre-title {
		text-transform: uppercase;
		font-weight: 500;
		border-top: none !important;
		padding-top: 0.0rem;
		margin: 0 auto !important;
		max-width: 225px !important;
		margin-bottom: 1rem !important;
		position: relative;
	}
	.the-index-1-1 .introduction .pre-title::before {
		content: '';
		position: absolute;
		top: -0.6rem;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50px;
		height: 5px;
		background: #60b9f0;
	}*/
	.introduction .pre-title {
		text-transform: uppercase;
		font-weight: 500;
		border-top: none !important;
		padding-top: 0.4rem;
		margin: 0 auto !important;
		max-width: 225px !important;
		margin-bottom: 1rem !important;
		position: relative;
	}
	.introduction .pre-title::before {
		content: '';
		position: absolute;
		top: -0.6rem;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50px;
		height: 5px;
		background: #60b9f0;
	}
	
	
	
	.the-index-1-1 .section-introduction__content h2 span {
	    display: inline-block;
	    width: 30px;
	    background: #60b9f0;
	    height: 5px;
	    margin-right: 1rem;
	}
	.the-index-1-1 .section-introduction__content p:nth-of-type(2) {
	    max-width: 100%;
	    margin-left: auto;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}
	
	.the-index-1-2{
	    background: #10384d;
	    color: #ffffff;
	} 
	.the-index-1-2 .products__content {
		display: flex;
		flex-wrap: wrap;
	    justify-content: space-between;
	}
	.the-index-1-2 .products__content {
		display: flex;
		flex-wrap: wrap;
	    justify-content: space-between;
	}
	.the-index-1-2 .products__content__item {
	    flex-basis: 49%;
	    margin-bottom: 0;
	}
	.the-index-1-2 .products__content__item__content .col-title{
		font-size: 1.6rem;
		margin-bottom: 1.0rem;
	}
	.the-index-1-2 .products__content__item__content>p>a{
		padding: 0.4rem 0.6rem;
		font-size: 1.4rem;
	}
	.the-index-1-2 .products__content__item__image{
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border: 4px solid white;
		position: relative;
	}
	.the-index-1-2 .products__content__item__content{
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		padding: 1rem;
		min-height: 22rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.the-index-1-2 .products__content__item__content ul {
	    margin-bottom: 1rem;
	}
	.the-index-1-2 .products__content__item__content ul li{
	    font-size: 1.2rem;
	}
	.the-index-1-2 .products__content__item__content>p:last-child{
		margin-bottom: 1rem;
	}
	
	
	.the-index-1-3 .services__content {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: flex-start;
	}
	
	.the-index-1-3 .services__content .services__content__item {
	    animation: zoomsmall 0.5s forwards;
	    background-size: auto 100%;
	    transition: transform 0.3s ease;
	    transform: translateY(0);
	    min-height: 18rem;
		flex-basis: 49%;
		margin-bottom: 0;
		position: relative;
		text-align: center;
		margin-bottom: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.the-index-1-3 .services__content .services__content__item .services__content__item__title {
	    position: relative;
	    z-index: 10;
	    font-size: 1.4rem;
	    text-transform: uppercase;
	}
	
	.the-index-1-4 {
	    background: #10384d;
	    color: #ffffff;
	}
	.section-introduction__images__01,
	.section-introduction__images__02{
		-webkit-box-shadow: 2px 2px 5px rgb(119 119 119 / 70%);
		box-shadow: 2px 2px 5px rgb(119 119 119 / 70%);
	}
	.generic-content .about-hero h1 {
	    color: white;
	    text-shadow: 2px 2px 10px #333;
	}
	
	
	
	.compliance__content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.compliance__content__item {
	    text-align: center;
	    margin-bottom: 3rem;
	    flex-basis: 31%;
	    margin-bottom: 1rem;
	}
	/* 这个问题可能是由于CSS动画和:hover状态的交互导致的。在你的代码中，当鼠标悬停在.services__content__item元素上时，它会触发zoombig动画，将背景大小从100%增加到150%，并且将元素向上移动。但是，当鼠标离开元素时，没有明确的动画将背景大小恢复到原来的状态，因此它可能会突然缩小。
	以下是几个可能导致这种行为的原因：
	动画的突然停止：当你将鼠标移开时，zoombig动画会停止，但是由于没有定义如何回到初始状态，背景大小可能会突然跳回到非动画值。
	:hover状态的动画与离开状态的动画没有良好对接：在:hover状态中，你定义了background-size从150%开始，但是在zoomsmall关键帧动画中，你从150%开始，但是结束在110%，这并不是元素悬停之前的原始状态。
	没有定义离开悬停状态的动画：你只有定义了进入悬停状态时的动画（zoombig），但是没有定义当鼠标离开时应该发生的动画。
	
	要解决这个问题，你可以：
	确保当你离开悬停状态时，有动画平滑地将背景大小恢复到原始状态。
	修改zoomsmall动画的关键帧，使其从当前悬停状态的值开始，并回到原始状态。
	下面是一个修改后的示例： */
	.services__content__item {
		animation: zoomsmall 0.5s forwards; /* 使用forwards保持最后的关键帧样式 */
		background-size: auto 100%;
		transition: transform 0.3s ease;
		transform: translateY(0);
		min-height: 28.8rem;
	}
	.services__content__item:hover {
		animation: zoombig 0.5s forwards; /* 使用forwards保持最后的关键帧样式 */
		background-size: auto 150%;
		transform: translateY(-1.0rem);
	}
	@keyframes zoombig {
		0% {background-size: auto 100%;}
		100% {background-size: auto 150%;}
	}
	@keyframes zoomsmall {
		0% {background-size: auto 150%; /* 从悬停状态开始 */}
		100% {background-size: auto 100%; /* 回到原始状态 */}
	}
	
	/* 请注意，我还添加了forwards到动画属性中，这样动画结束后，元素会保持动画的最终状态。
	但是，这也会导致当鼠标移开时没有动画过渡回到初始状态。为了解决这个问题，你可能需要添加另一个动画来处理从悬停状态离开的情况： */
	.services__content__item:not(:hover) {
		animation: zoomback 0.5s forwards; /* 新增动画，处理鼠标离开的状态 */
	}
	@keyframes zoomback {
		0% {background-size: auto 150%; /* 假设这是悬停状态的背景大小 */}
		100% { background-size: auto 100%; /* 初始状态 */}
	}
	.services__content__item__link:hover{
		color: white !important;
	}
	
	
	
	
	.the-index-1-5 .recent-projects__content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.the-index-1-5 .recent-projects__content__item {
	    transition: transform 0.3s ease;
	    transform: translateY(0);
	    flex-basis: 48%;
		margin-bottom: 2rem;
	}
	.the-index-1-5 .recent-projects__content__item__location {
		margin-top: 0.6rem;
		margin-bottom: 0rem;
		text-align: ;
		color: #10384d;
	}
	.the-index-1-5 .recent-projects__content__item__title {
		font-size: 1.6rem;
		text-align: ;
		color: #10384d;
		margin-bottom: 0rem;
	}
	.the-index-1-5 .recent-projects__content__item__link {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(45deg, #295c89 50%, #295c89 50.5%, rgba(255,255,255,0) 50%);
		transition: all .2s ease-in-out;
		display: block;
		z-index: 100;
		opacity: 0;
		background: linear-gradient(-147deg, rgb(255,255,255,0.0) 49.5%, #295c89 50.1%, #295c89);
	}
	.the-index-1-5 .recent-projects__content__item__image:hover .recent-projects__content__item__link {
		opacity: 0.7;
	}
	.the-index-1-5 .recent-projects__content__item{
		transition: transform 0.3s ease; /* 鍔ㄧ敾鎸佺画鏃堕棿涓�0.3绉� */
		transform: translateY(0); /* 鍒濆鐘舵€佷笉绉诲姩 */
	}
	.the-index-1-5 .recent-projects__content__item:hover {
		transform: translateY(-1.0rem); /* 榧犳爣鎮仠鏃跺悜涓婄Щ鍔�10鍍忕礌 */
	}
	
	
	.the-index-1-6{
		background: #10384d;
		color: #ffffff;
	}
	.the-index-1-6 .media-block__content{
		flex-basis: 30%;
	}
	.the-index-1-6 .media-block__image{
		flex-basis: 70%;
	}
	
	.the-index-1-6 .media-block__content h2{
		color: #fff;
		position: relative;
		    text-transform: none;
		    font-weight: 400;
		    font-size: 1.5rem;
	}
	.the-index-1-6 .media-block__content h2 span {
	    display: inline-block;
	    width: 30px;
	    background: #60b9f0;
	    height: 5px;
	    margin-right: 1rem;
	}
	.the-index-1-6 .media-block__content h3{
		color: #fff;
	}
	.the-index-1-6 .the-17-2-box{
		background: transparent;
		margin-top: 0rem;
		margin-bottom: 0rem;
	}
	.the-index-1-6 .the-17-2-box .container{
		padding-top: 0rem;
		justify-content: flex-start;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content {
	  flex-wrap: nowrap;
	    justify-content: space-between;
	    align-items: flex-start;
	}
	.the-index-1-6 .the-17-2-box .swiper-button-next{
		position: absolute;
		right: 1.0rem;
		top: 4rem;
		background: #10384d;
		width: 2.6rem;
		height: 2.6rem;
		border-radius: 50%;
	}
	.the-index-1-6 .the-17-2-box .swiper-button-prev{
		top: 4rem;
		left: 28rem; 
		background: #10384d;
		width: 2.6rem;
		height: 2.6rem;
		border-radius: 50%;
	}
	.the-index-1-6 .the-17-2-box .swiper-button-next:after{
	    content: 'next';
	    font-size: 1.2rem;
	    font-weight: normal;
	    color: #ffffff;
	}
	.the-index-1-6 .the-17-2-box .swiper-button-prev:after {
	    content: 'prev';
	    font-size: 1.2rem;
	    font-weight: normal;
	    color: #ffffff;
	}
	.the-index-1-6 .the-17-2-box .swiper-wrapper {
	    box-sizing: border-box;
		margin-top: 0rem;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__location {
	    margin-top: 0.6rem;
	    margin-bottom: 0rem;
		font-size: 1.4rem;
	    text-align: left;
	    color: #295c89;
		font-weight: bold;
		cursor: pointer;
		text-decoration: underline;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__location:hover {
	    color: #10384d;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__title {
	    font-size: 1.6rem;
	    text-align: left;
	    color: #000;
		margin-top: 0.6rem;
	    margin-bottom: 0rem;
		cursor: pointer;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__time{
		font-size: 1.4rem;
		font-weight: bold;
		color: #295c89;
		text-align: left;
		margin-bottom: 0rem;
		cursor: pointer;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__link {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(45deg, #295c89 50%, #295c89 50.5%, rgba(255,255,255,0) 50%) !important;
		transition: all .2s ease-in-out;
		display: block;
		z-index: 100;
		opacity: 0;
		background: linear-gradient(-147deg, rgb(255,255,255,0.0) 49.5%, #295c89 50.1%, #295c89) !important;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__image:hover .recent-projects__content__item__link {
		opacity: 0;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__image{
		border-radius: 0.3rem;
		flex-basis: 50%;
		padding: 2rem;
	}
	.the-index-1-6 .the-17-2-box .r_txt_diy{
		flex-basis: 48%;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__image img {
		border-radius: 0.3rem;
		width: 100%;
		max-width: 100%;
		margin-left: 0%;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item__image:hover img {
		transform: scale(1);
		transition: all .3s ease-in-out;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item{
		transition: transform 0.3s ease; /* 动画持续时间为0.3秒 */
		transform: translateY(0); /* 初始状态不移动 */
		flex-basis: 100%;
		padding: 4rem 0rem 1rem 0rem;
		box-sizing: border-box;
		background: #fff;
		border-radius: 0.6rem;
		display: flex;
		justify-content: start;
		align-items: center;
	}
	.the-index-1-6 .the-17-2-box .recent-projects__content__item:hover {
	  transform: translateY(0rem) !important;  /* 鼠标悬停时向上移动10像素 */
	}
	
	
	
	
	
	
	
}