		/* 适用于大屏幕（例如桌面浏览器）的样式 */
		@media screen and (min-width: 769px) {
			.cp-carousel {
				position: relative;
				width: calc(1538/1920*100vw);
				height: calc(500/1920*100vw);
				margin: calc(60/1920*100vw) auto 0 auto;
				/* 水平居中，，更精练的写法 */
				overflow: hidden;
			}

			/* 轮播图内部图片容器样式 */
			.cp-carousel-inner {
				display: flex;
				transition: transform 0.5s ease;
			}

			/* 单个轮播图片项样式 */
			.cp-carousel-item {
				min-width: 100%;
				display: none;
				/* 初始隐藏，，通过添加 active 类来显示，，便于实现淡入淡出效果 */
				transition: opacity 0.5s ease;
			}

			/* 显示状态下的轮播图片项样式 */
			.activelbt {
				display: block;
			}

			/* 轮播图图片样式，，确保图片占满轮播项宽度并准确显示 */
			.img-lbt {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: calc(1538/1920*100vw);
				height: calc(500/1920*100vw);
			}

			.div-lbt {
				width: calc(1538 / 1920* 100vw);
				height: calc(500 / 1920* 100vw);
				display: flex;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				align-items: center;
				justify-content: space-evenly;
			}

			.div-lbt-div {
				margin-top: calc(50/1920*100vw);
				width: calc(500/1920*100vw);
				height: calc(400/1920*100vw);
			}

			.div-lbt-img {
				width: calc(500/1920*100vw);
				height: calc(400/1920*100vw);
				object-fit: contain;
			}

			.co-carousel-item img {
				width: 100%;
				display: block;
			}

			/* 小圆点容器样式，，定位在轮播图底部并水平居中 */
			.cp-carousel-dots {
				text-align: center;
				margin-top: calc(20/1920*100vw);
				margin-bottom: calc(60/1920*100vw);
				width: 100%;
			}

			/* 单个小圆点样式 */
			.cp-dot {
				margin-left: calc(40/1920*100vw);
				cursor: pointer;
				height: calc(15/1920*100vw);
				width: calc(15/1920*100vw);
				background-color: white;
				border-radius: 50%;
				border: solid #ccc calc(3/1920*100vw);
				display: inline-block;
				transition: background-color 0.5s ease;
			}

			/* 激活状态（对应图片显示时）或鼠标悬停时的小圆点样式 */
			.activelbt1,
			.cp-dot:hover {
				background-color: red;
				border: solid red calc(3/1920*100vw);
			}

			/* 左、、右切换按钮的通用样式 */
			.prev-button,
			.next-button {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				color: white;
				border: none;
				padding: 10px;
				font-size: 20px;
				z-index: 1;
			}

			/* 左切换按钮样式 */
			.prev-button {
				top: calc(440/1920*100vw);
				left: calc(141/1920*100vw);
			}

			/* 右切换按钮样式 */
			.next-button {
				top: calc(440/1920*100vw);
				right: calc(141/1920*100vw);
			}

			.yc {
				display: none;
			}

			.prev-button:hover .yc,
			.next-button:hover .yc {
				display: block;
			}

			.prev-button:hover .xs,
			.next-button:hover .xs {
				display: none;
			}

			.next-button img,
			.prev-button img {
				width: calc(60/1920*100vw);
				height: calc(60/1920*100vw);
			}

			.lbt-img-div {
				width: calc(500/1920*100vw);
				height: calc(400/1920*100vw);
			}

			.div-tp-img {
				width: calc(60/1920*100vw);
				height: calc(70/1920*100vw);
			}

			.div-text-div {
				margin-left: calc(20/1920*100vw);
				font-size: calc(60/1920*100vw);
				width: calc(500/1920*100vw);
				color: black;
			}

			.div-text-div2,
			.div-text-div2 p {
				margin-left: calc(150 / 1920* 100vw);
				font-size: calc(16 / 1920* 100vw);
				width: calc(520 / 1920* 100vw);
				line-height: calc(40 / 1920* 100vw);
				color: #b2b2b2;
				margin-top: calc(40 / 1920* 100vw);
				height: calc(160 / 1920* 100vw);
			}

			.img-gm-ck {
				margin-left: calc(20/1920*100vw);
				width: calc(174/1920*100vw);
				height: calc(46/1920*100vw);
			}

			.list-dis1 {
				display: flex;
				align-items: center;
				margin-left: calc(60 / 1920* 100vw);
			}

			.mk-div {
				width: calc(100 / 1920* 100vw);
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				margin-bottom: calc(20/1920*100vw);

			}

			.mk-div img {
				width: calc(60/1920*100vw);
				height: calc(60/1920*100vw);
			}

			.mk-div div {
				font-size: calc(16/1920*100vw);
				color: #b2b2b2;
			}

			/* 界说网格结构容器 */
			.grid-container1 {
				display: grid;
				width: calc(1538/1920*100vw);
				grid-template-columns: repeat(4, 1fr);
				/* 界说每行 4 列，，每列平均分配空间 */
				grid-gap: calc(10/1920*100vw);
				margin-left: calc(191/1920*100vw);
				/* 界说网格单位格之间的间距 */
			}

			/* 界说网格项目（每个要排列的元素）的样式 */
			.grid-item {
				position: relative;
				margin-top: calc(30/1920*100vw);
				text-align: center;
			}

			.grid-item-img {

				width: 100%;
				z-index: 1;
			}

			.grid-item-img1 {
				width: 100%;
				z-index: 1;
				display: none;
			}

			.grid-item-div {
				position: absolute;
				display: flex;
				top: calc(20/1920*100vw);
				left: 0;
				width: 100%;
				height: 100%;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: center;
			}

			.grid-item-div-img {
				width: 70%;
				height: calc(412/1920*100vw);

				object-fit: contain;
			}

			.cpjs {
				font-size: calc(16/1920*100vw);
				width: 90%;
				display: flex;
			}

			.cjs-div {
				width: 25%;
			}

			p {
				display: block;
				margin-block-start: 0;
				margin-block-end: 0;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				unicode-bidi: isolate;
			}

			.cpjs p {
				font-size: calc(16/1920*100vw);
				width: calc(240/1920*100vw);
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				white-space: normal;
			}

			.cpm {
				margin-top: calc(15/1920*100vw);
				margin-bottom: calc(13/1920*100vw);
				width: 90%;
				font-size: calc(20/1920*100vw);
			}

			.ljgm {
				display: flex;
				justify-content: center;
				background-color: #d3d3d3cc;
				height: 50px;
				font-size: calc(20/1920*100vw);
				align-items: center;
			}

			.grid-item:hover .ljgm {
				color: white !important;
				background-color: red;
			}

			.grid-item:hover {
				color: red !important;
			}

			.grid-item:hover .gmimg1,
			.grid-item:hover .grid-item-img1 {
				display: block;
			}

			.grid-item:hover .gmimg,
			.grid-item:hover .grid-item-img {
				display: none;
			}
		}


		/* 适用于小屏幕（例如手机等移动装备）的样式 */
		@media screen and (max-width: 768px) {

			/* 导航栏整体样式 */
			.navigation-bar {
				display: flex !important;
				align-items: center;
				justify-content: space-between;
				width: 100vw;
				background-color: #f4f4f4;
				padding-top: calc(10/768*100vw);
				overflow-x: auto;
				/* 允许水平转动，，以防按钮过多凌驾容器宽度 */
				white-space: nowrap;
				/* 防止按钮换行 */
			}

			.nav-buttons-container {
				width: 100vw;
				display: flex !important;
			}

			/* 左右切换按钮样式 */
			.left-button,
			.right-button {
				cursor: pointer;
				background-color: transparent;
				flex: 1;
			}

			.left-button img,
			.right-button img {
				height: 100%;
				width: 50%;
				object-fit: contain;
			}

			.dis-ply {
				display: flex;
				align-items: center;
			}

			/* 导航栏中各个按钮的样式 */
			.nav-button {
				flex: 3;
				cursor: pointer;
				align-items: center;
			}

			.cp-carousel {
				display: flex;
				position: relative;
				width: calc(700 / 768* 100vw);
				height: calc(800 / 768* 100vw);
				margin: calc(60 / 768* 100vw) auto 0 auto;
				overflow: hidden;
				flex-direction: column;
				align-items: center;

			}

			/* 轮播图内部图片容器样式 */
			.cp-carousel-inner {
				display: flex;
				transition: transform 0.5s ease;
			}

			/* 单个轮播图片项样式 */
			.cp-carousel-item {
				min-width: 100%;
				display: none;
				/* 初始隐藏，，通过添加 active 类来显示，，便于实现淡入淡出效果 */
				transition: opacity 0.5s ease;
			}

			/* 显示状态下的轮播图片项样式 */
			.activelbt {
				display: block;
			}

			/* 轮播图图片样式，，确保图片占满轮播项宽度并准确显示 */
			.img-lbt {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: calc(700/768*100vw);
				height: calc(800/768*100vw);
			}

			.div-lbt {
				display: flex;
				width: calc(700 / 768* 100vw);
				height: calc(800 / 768* 100vw);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				align-items: center;
				flex-direction: column;
				justify-content: flex-start;
			}

			.div-lbt-div {
				margin-top: calc(50/768*100vw);
				width: calc(500/768*100vw);
				height: calc(400/768*100vw);
			}

			.div-lbt-img {
				width: calc(500/768*100vw);
				height: calc(400/768*100vw);
				object-fit: contain;
			}

			.co-carousel-item img {
				width: 100%;
				display: block;
			}

			/* 小圆点容器样式，，定位在轮播图底部并水平居中 */
			.cp-carousel-dots {
				text-align: center;
				margin-top: calc(20/768*100vw);
				margin-bottom: calc(60/768*100vw);
				width: 100%;
			}

			/* 单个小圆点样式 */
			.cp-dot {
				margin-left: calc(40/768*100vw);
				cursor: pointer;
				height: calc(20/768*100vw);
				width: calc(20/768*100vw);
				background-color: white;
				border-radius: 50%;
				border: solid #ccc calc(3/768*100vw);
				display: inline-block;
				transition: background-color 0.5s ease;
			}

			/* 激活状态（对应图片显示时）或鼠标悬停时的小圆点样式 */
			.activelbt1,
			.cp-dot:hover {
				background-color: red;
				border: solid red calc(3/768*100vw);
			}

			/* 左、、右切换按钮的通用样式 */
			.prev-button,
			.next-button {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
				color: white;
				border: none;
				padding: 10px;
				font-size: 20px;
				z-index: 1;
			}

			.yc {
				display: none;
			}

			.prev-button:hover .yc,
			.next-button:hover .yc {
				display: block;
			}

			.prev-button:hover .xs,
			.next-button:hover .xs {
				display: none;
			}

			/* 左切换按钮样式 */
			.prev-button {
				top: calc(525/768*100vw);
				left: calc(-5/768*100vw);
			}

			/* 右切换按钮样式 */
			.next-button {
				top: calc(525/768*100vw);
				right: calc(-5/768*100vw);
			}

			.next-button img,
			.prev-button img {
				width: calc(60/768*100vw);
				height: calc(60/768*100vw);
			}

			.lbt-img-div {}

			.div-tp-img {
				width: calc(80/768*100vw);
				height: calc(100/768*100vw);
				position: absolute;
				top: calc(30/768*100vw);
				right: calc(40/768*100vw);
			}

			.div-text-div {
				margin-left: calc(10 / 768* 100vw);
				font-size: calc(60 / 768* 100vw);
				width: calc(620 / 768* 100vw);
				color: black;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: calc(20/768*100vw);
			}

			.div-text-div2 {
				height: calc(130/768*100vw);
			}

			.div-text-div2,
			.div-text-div2 p {
				margin-left: calc(10/768*100vw);
				font-size: calc(24/768*100vw);
				width: calc(620/768*100vw);
				line-height: calc(40/768*100vw);
				color: #b2b2b2;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				white-space: normal;
			}

			.img-gm-ck {
				margin-left: 0 !important;
				width: calc(174/768*100vw);
				height: calc(46/768*100vw);
			}

			.list-dis1 {
				display: flex;
				/* align-items: center; */
				justify-content: space-around;
			}

			.mk-div {
				width: calc(100 / 1920* 100vw);
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				margin-bottom: calc(20/1920*100vw);

			}

			.mk-div img {
				width: calc(60/1920*100vw);
				height: calc(60/1920*100vw);
			}

			.mk-div div {
				font-size: calc(20/1920*100vw);
				color: #b2b2b2;
			}

			/* 界说网格结构容器 */
			.grid-container1 {
				margin-left: calc(32 / 768* 100vw);
				display: grid;
				width: calc(700 / 768* 100vw);
				grid-template-columns: repeat(2, 1fr);
				grid-gap: calc(40 / 768* 100vw);
			}

			/* 界说网格项目（每个要排列的元素）的样式 */
			.grid-item {
				position: relative;
				margin-top: calc(30/768*100vw);
				text-align: center;
			}

			.grid-item-img {

				width: 100%;
				z-index: 1;
			}

			.grid-item-img1 {
				width: 100%;
				z-index: 1;
				display: none;
			}

			.grid-item-div {
				position: absolute;
				display: flex;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: center;

			}

			.grid-item-div-img {
				width: 80%;
				height: 67%;
				object-fit: cover;
			}

			.cpjs {
				width: 90%;
				display: flex;
				margin-bottom: calc(5/768*100vw);
			}

			.cjs-div {
				width: 82%;
				font-size: calc(24/768*100vw);
			}

			p {
				display: block;
				margin-block-start: 0;
				margin-block-end: 0;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				unicode-bidi: isolate;
			}

			.cpjs p {
				height: calc(28/768*100vw);
				font-size: calc(24/768*100vw);
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				white-space: normal;
			}

			.cpm {
				margin-top: calc(15/768*100vw);
				margin-bottom: calc(5/768*100vw);
				width: 90%;
				font-size: calc(30/768*100vw);
			}

			.ljgm {
				display: flex;
				justify-content: center;
				background-color: #d3d3d3cc;
				height: 30px;
				font-size: calc(25/768*100vw);
				align-items: center;
			}

			.grid-item:hover .ljgm {
				color: white !important;
				background-color: red;
			}

			.grid-item:hover p,
			.grid-item:hover .cpm,

			.grid-item:hover .cjs-div {
				color: red !important;

			}


			.grid-item:hover .gmimg1 {
				display: block;
			}

			.grid-item:hover .gmimg {
				display: none;
			}

			/* 分页容器样式 */
			.pagination {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: calc(60/768*100vw);
			}

			.current {
				background-color: red !important;
				color: white;
				display: flex;
				width: calc(50 / 768* 100vw);
				height: calc(50 / 768* 100vw);
				margin: 0 calc(10 / 768* 100vw);
				cursor: pointer;
				align-items: center;
				justify-content: center;
			}

			/* 省略号样式 */
			.ellipsis {
				background-color: #F0F0F0;
				display: flex;
				width: calc(70 / 768* 100vw);
				height: calc(50 / 768* 100vw);
				margin: 0 calc(10 / 768* 100vw);
				cursor: pointer;
				align-items: center;
				justify-content: center;
			}

			/* 上一页、、下一页图片样式 */
			.pagination>.nav-img {
				background-color: #F0F0F0;
				display: flex;
				width: calc(50 / 768* 100vw);
				height: calc(50 / 768* 100vw);
				margin: 0 calc(10 / 768* 100vw);
				cursor: pointer;
				align-items: center;
				justify-content: center;
			}

			.page-num {
				background-color: #F0F0F0;
				display: flex;
				width: calc(50 / 768* 100vw);
				height: calc(50 / 768* 100vw);
				margin: 0 calc(10 / 768* 100vw);
				cursor: pointer;
				align-items: center;
				justify-content: center;
			}

			.nav-img img {
				width: calc(30 / 768* 100vw);
				height: calc(30 / 768* 100vw);
			}

		}

		@media screen and (min-width: 769px) {
			.gm {
				display: flex;
				width: calc(174 / 1920* 100vw);
				height: calc(46 / 1920* 100vw);
				justify-content: center;
				align-items: center;
				border: solid 1px #ccc;
				border-radius: calc(46 / 1920* 100vw);
				font-size: calc(23 / 1920* 100vw);
			}

			.gmimg {
				height: calc(23 / 1920* 100vw);
				margin-left: calc(7 / 1920* 100vw);
			}

			.gmimg1 {
				display: none;
				height: calc(23 / 1920* 100vw);
				margin-left: calc(7 / 1920* 100vw);
			}

			.gm:hover {
				background-color: red;
				color: white;
			}

			.gm:hover .gmimg {
				display: none;
			}

			.gm:hover .gmimg1 {
				display: block;
			}
		}

		/* 适用于小屏幕（例如手机等移动装备）的样式 */
		@media screen and (max-width: 768px) {
			.dis-plyhd {
				transform: translateX(0px);
				display: flex;
				width: 59%;
			}
            .dis-plyhd .hdnav-item{
				width: 45%;
			}

			.yc {
				display: none !important;
			}

			.mkfbh {
				height: auto !important;
			}

			.mkfbh ul {
				display: flex;
				flex-wrap: wrap;
			}

			.hdnav-item1 {
				margin-right: 0;
				flex-shrink: 0;
				width: 25%;
				z-index: 20;
				background-color: #f6f6f6;
			}

			.hdnav-item1 a {
				display: block;
				text-decoration: none;
				text-align: center;
			}
			.hdnav-item2 {
				margin-right: 0;
				flex-shrink: 0;
				width:8%;
				z-index: 20;
				background-color: #f6f6f6;
			}
            .hdnav-item2 img{
				width: 100%;
				height: calc(80/768*100vw);
				object-fit: contain;
				z-index: 20;
			}
			.gm {
				display: flex;
				width: calc(174 / 768* 100vw);
				height: calc(46 / 768* 100vw);
				justify-content: center;
				align-items: center;
				border: solid 1px #ccc;
				border-radius: calc(46 / 768* 100vw);
				font-size: calc(23 / 768* 100vw);
			}

			.gmimg {
				height: calc(23 / 768* 100vw);
				margin-left: calc(7 / 768* 100vw);
			}

			.gmimg1 {
				display: none;
				height: calc(23 / 768* 100vw);
				margin-left: calc(7 / 768* 100vw);
			}

			.gm:hover {
				background-color: red;
				color: white;
			}

			.gm:hover .gmimg {
				display: none;
			}

			.gm:hover .gmimg1 {
				display: block;
			}
		}<!--耗时1767353624.5965秒-->