* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.communication_title {
  text-align: center;
  margin: 62px 0 65px;
  font-weight: 500;
  font-size: 48px;
  color: #333333;
}
.flex_box_video {
  width: auto;
  margin: 0 auto;
}
.communication_category_content{
	padding-bottom:80px;
	display: flex;
	justify-content: space-between;
}
.scroller-container {
	padding-bottom: 10px;
	box-sizing: border-box;
	margin-right: 38px;
	width: 26%;
	max-width: 300px;
}
.arrow-btn {
	display:block;
	width:100%;
	padding:10px 0 5px;
	background: #f2f2f2;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align:center;
}

.arrow-btn:hover {
	background: transparent;
}

#mobileScrollLeft,#mobileScrollRight{
	display:none;
}

.flex_box_video_category {
	flex-grow: 1;
	position: relative;
	height: 500px;
	overflow: hidden;
}
.video_category_lists {
	background-color: #f8f8f8;
	border-radius: 3px;
	border: 1px solid #F1F1F1;
	box-sizing: border-box;
	height: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;
}
 .video_category_lists::-webkit-scrollbar {
	 width: 8px;
}

.video_category_lists::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.video_category_lists::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.video_category_lists::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}
.video_category_list {
	font-size: 18px;
	color: #555555;
	display: flex;
	align-items: center;
	border-radius: 3px;
	height: 50px;
	padding:0 20px;
	cursor:pointer;
}
.video_category_lists .active,
.video_category_list:hover {
	background: linear-gradient(36deg, #F76C5D 0%, #FE833A 100%);
	color: #fff;
}
.video_category_content_lists {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.video_category_content_list {
	flex: 1 1 calc(33.333% - 20px);
	background: #f7f7f7;
	border-radius:8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s;
}
.video_category_content_list:hover {
  background-color: #fff;
  box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);
}
.video_body {
  position: relative;
  width: 100%;
  height: 260px;
}
.video_category_content_img {
  width: 100%;
  height: 100%;
}
.video_category_content_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 遮罩层 - 默认隐藏 */
.video_category_content_img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.5); /* 50%透明度的灰色 */
  opacity: 0; /* 默认不可见 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

/* 悬停状态 - 显示遮罩 */
.video_category_content_list:hover .video_category_content_img::after {
  opacity: 1; /* 悬停时可见 */
}
.video_play {
  display: none;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
.video_play img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.video_category_content_list:hover .video_play {
  display: block;
}
.video_category_content_text {
  padding: 18px;
  box-sizing: border-box;
}
p.video_text_title {
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  line-height: 1.5;
}
.video_play_content {
  display: none;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.video_play_content .msg-tt.msg-tt2 {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.video_play_content .msg-close {
  cursor: pointer;
}
.video_play_content .layui-layer-content video {
  height: 500px;
  margin-bottom: 40px;
}
/* 遮罩层样式 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

#overlay.active {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1440px) {
  .flex_box_video {
/*     width: 1075px; */
  }
}
@media (max-width: 1100px) {
  .communication_title {
    font-size: 30px;
  }
}
@media (max-width: 1074px) {
  .flex_box_video {
/*     width: 710px; */
  }
  .video_play_content .layui-layer-content video {
    height: fit-content;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
	.communication_category_content{
		display:block;
	}
	.scroller-container {
		width: 100%;
		max-width: 100%;
	}
	#scrollUp,#scrollDown{
		display:none;
	}
	#mobileScrollLeft,#mobileScrollRight{
		display:block;
	}
	
	.arrow-btn {
		width:50px;
		padding: 13px 0 5px;
	}
	.flex_box_video_category{
		display:flex;
		height:auto;
	}
	.video_category_lists{
		display:flex;
	}
	.video_category_list{
		white-space: nowrap;
	}
	.flex_box_video {
		width:100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.video_body{
		height:188px;
	}
	.video_category_content_list{
		flex: none;
		width:100%;
	}
	
	
}