/*公共*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Microsoft YaHei";
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

ul,
li,
ol {
  list-style: none;
}

dl,
dd {
  margin: auto;
}

input {
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

a,
a:visited {
  color: #333;
}

a:link,
a:visited {
  text-decoration: none;
  outline: none;
}

a {
  cursor: pointer;
}


/*所有超链接不要下划线*/

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/* 头部 */
.head-bg {
  width: 100%;
  height: 10%;
  position: fixed;
  z-index: 4999;
  background: linear-gradient(to bottom,
      rgb(10, 54, 126),
      /* 深蓝，完全不透明 */
      rgba(45, 128, 255, 0)
      /* 浅蓝，完全透明 */
    );
}

.head {

  position: fixed;
  top: 0;
  left: 0%;
  display: flex;
  justify-content: space-around;
  width: 100vw;
  z-index: 2;
  font-size: 2vh;
  padding: 1vh;
  color: #fff;
  box-sizing: border-box;
  /* 防止padding造成的宽度问题 */
  text-align: left;
  /* 水平对齐：左对齐 */
}


.logo {
  flex: 1;
  /* logo区域占用1个单位 */
}

.head-type {
  display: flex;
  justify-content: space-between;
  margin-top: 1vh;
  width: 90vw;
  flex-shrink: 0;
  /* 禁止内容缩小 */
  align-items: center;
}

.promotion-video-section {
  position: relative;
  text-align: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  /* background-color: rgba(12, 201, 226, 0.9); 浅蓝色透明背景 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promotion-video-title {
  font-size: 3vh;
  font-weight: bold;
  margin-bottom: 3vh;
  margin-top: 3.5vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promotional-page {
  animation: scaleAnimation 8s ease-in-out infinite;
}

.cross-Swiper {
  height: 100%;
}

.cross-Swiper .swiper-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.cross-Swiper .swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.swiper-container {
  width: 100%;
  height: 100vh;
  /* vh 是视口高度单位，100vh 表示整个视口的高度 */
}

/* 设置每个滑块占满整个容器 */



@keyframes scaleAnimation {

  0%,
  100% {
    transform: scale(1);
    /* 原始大小 */
  }

  50% {
    transform: scale(1.2);
    /* 放大到1.1倍 */
  }
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  /* 使背景图在内容后面 */
}

/*主办单位*/
/* 整个 slide 样式 */
/*大赛获奖*/
.main-Organizer {
  width: 100%;
  height: 100%;
  background-image: url(../img/行业领军-bg.png);
  background-size: cover;
  /* 背景图铺满整个页面 */
  background-position: center center;
  /* 背景图居中 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
  position: absolute;
}

/* 标题样式 */
.main-Organizer-title {
  font-size: 4vh;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;


  /* color: #0066cc; */
  text-align: center;
  margin-top: 0%;
}

.alltitle {
  background-image: url(../img/title.png);
  background-size: 100% 100%;
}

/* 容器定位 */
.Organizer-right1 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 14vh;
  /* 离顶部20px */
  left: 23vh;
  /* 固定在页面左侧 */
  width: 65vh;
  /* 设置容器的宽度 */
  height: 54vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
  text-align: left;
}

/* 标题样式 */
.Organizer-right1-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */

}

/* 内容容器 */
.Organizer-right1-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right2 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 88vh;
  /* 离顶部20px */
  left: 15vh;
  /* 固定在页面左侧 */
  width: 300px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right2-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}


.Organizer-right2-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 内容容器 */
.Organizer-right3-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right3 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */

  position: absolute;
  /* 固定定位 */
  top: 37vh;
  /* 离顶部20px */
  left: 100vh;
  /* 固定在页面左侧 */
  width: 300px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right3-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}



/* 内容容器 */
.Organizer-right4-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right4 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 86vh;
  /* 离顶部20px */
  left: 61vh;
  /* 固定在页面左侧 */
  width: 300px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right4-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}


/* 内容容器 */
.Organizer-right5-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right5 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 25vh;
  /* 离顶部20px */
  left: 152vh;
  /* 固定在页面左侧 */
  width: 300px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right5-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}


/* 内容容器 */
.Organizer-right6-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right6 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 66vh;
  /* 离顶部20px */
  left: 175vh;
  /* 固定在页面左侧 */
  width: 300px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right6-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}

/* 内容容器 */
.Organizer-right7-container {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 19px;
  color: #28374B;
  line-height: 14px;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  /* 长单词自动换行 */
}

/* 容器定位 */
.Organizer-right7 {
  display: flex;
  /* 使用flex布局 */
  flex-direction: column;
  /* 设置垂直排列，标题在上，内容在下 */
  position: absolute;
  /* 固定定位 */
  top: 78vh;
  /* 离顶部20px */
  left: 110vh;
  /* 固定在页面左侧 */
  width: 330px;
  /* 设置容器的宽度 */
  height: 100vh;
  /* 高度填满视口 */
  z-index: 10;
  /* 确保容器在前 */
}

/* 标题样式 */
.Organizer-right7-title {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #28374B;
  line-height: 16px;
  margin-bottom: 20px;
  /* 标题和内容之间的间距 */
  text-align: left;
  /* 确保标题左对齐 */
}

.Organizer-right1-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 14vh;
  /* 上边距 */
  left: 19vh;
  /* 左边距 */
  width: 20px;
  height: 56vh;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right2-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 72vh;
  /* 上边距 */
  left: 11vh;
  /* 左边距 */
  width: 20px;
  height: 130px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right3-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 37vh;
  /* 上边距 */
  left: 96vh;
  /* 左边距 */
  width: 20px;
  height: 195px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right4-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 71vh;
  /* 上边距 */
  left: 56vh;
  /* 左边距 */
  width: 20px;
  height: 126px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right5-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 25vh;
  /* 上边距 */
  left: 148vh;
  /* 左边距 */
  width: 20px;
  height: 181px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right6-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 50vh;
  /* 上边距 */
  left: 171vh;
  /* 左边距 */
  width: 20px;
  height: 126px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.Organizer-right7-img {
  position: absolute;
  /* 或者使用relative, 根据需要选择 */
  top: 63vh;
  /* 上边距 */
  left: 106vh;
  /* 左边距 */
  width: 20px;
  height: 126px;
  object-fit: contain;
  /* 保证图片不超出元素框 */
  overflow: hidden;
  /* 确保内容不超出 */
}

.promotion-video {
  width: 100%;
  height: 100%;


}


.head-type div {
  margin: 0 10px;
  /* 菜单项间距 */

}

#langButton {
  flex-shrink: 0;
  /* 禁止语言按钮缩小 */
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

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

.oldDays .swiper-slide-prev {
  filter: blur(5px);
}

.oldDays .swiper-slide-next {
  filter: blur(5px);

}

/* 定义一个渐显且放大的动画 */
@keyframes fadeInAndZoom {
  0% {
    opacity: 1;
    /* 初始透明度为0 */
    transform: scale(1.3);
    /* 初始大小为80% */
  }

  50% {
    opacity: 1;
    /* 最终透明度为1 */
    transform: scale(1);
    /* 最终放大到100% */
  }

  100% {
    opacity: 1;
    /* 最终透明度为1 */
    transform: scale(1.3);
    /* 最终放大到100% */
  }
}

/* 应用在图片上的动态效果 */
.swiper-slide img.dynamic-show {
  animation: fadeInAndZoom 10s ease-out infinite;
  /* 渐显和放大动画，持续2秒 */
  object-fit: cover;
  /* 保证图片按照容器的比例适配，不会变形 */
  width: 100vw;
  /* 保证图片的宽度为视口100% */
  height: 100vh;
  /* 保证图片的高度为视口100% */
}


/* 关于大赛 第二页*/
.About-Contest {
  width: 100%;
  height: 100%;
  padding: 10% 5% 0 5%;
  background-image: url(../img/关于大赛-bg.png);
  background-size: 100% 100%;
}

.About-Contest .title {
  font-size: 2vw;
  margin-bottom: 2%;
  font-weight: 800;
  color: #013685;
  margin-left: 15%
}

.Contest-title {
  color: #2F3233;
  font-size: 1vw;
  font-weight: 800;
  text-align: left;
  padding-left: 1vw;
  margin-top: 2vh;
  width: 100%;
}

.contest-type {
  font-weight: 800;
  display: flex;
  height: 70vh;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.type-categories {
  display: flex;
  align-items: center;
}

#countdown {
  background-color: #333;
  width: 100%;
  height: 100%;

  border-radius: 10px;
  text-align: center;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#countdown2 {
  background-color: #333;
  width: 100%;
  height: 100%;

  border-radius: 10px;
  text-align: center;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@font-face {
  font-family: "HYk1gj";
  src: url("./img/汉仪综艺体简.ttf ");
}


/* 标题样式 */
.countdown_title {
  color: white;
  font-size: 1.5vw;
}

/* 包裹时间项的容器 */
.countdown_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 每个时间项的样式 */
.countdown_box_item {
  background-color: #fff;
  color: #136BCC;
  font-weight: bold;
  width: 20%;
  height: 80%;
  font-size: 1.2vh;

  margin: 0 0.5vh;
  padding: 0.5vh;
  border-radius: 0.2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.countdown_box_item2 {
  background-color: #fff;
  color: #136BCC;
  font-weight: bold;
  width: 24%;
  height: 80%;
  font-size: 1.2vh;

  margin: 0 0.5vh;
  padding: 0.5vh;
  border-radius: 0.2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 时间数字部分 */
.countdown_box_item div {
  font-size: 2vh;
  margin-bottom: 0.2vh;
}

.countdown_box_item2 div {
  font-size: 2vh;
  margin-bottom: 0.2vh;
}

/* 鼠标悬停效果 */
.countdown_box_item:hover {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.type-circle1 {
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
  background-color: #A5A5A5;
  margin-right: 0.5vw;
  margin-left: -0.25vw
}

.type-border {
  border-left: 0.1vw dashed #ccc;
  height: 12%;
  transition: 2s ease;
}

.type-info {
  display: none;
}

/*第三个界面*/
.Smart-Devices {
  width: 100%;
  height: 100%;
  padding: 4% 2% 0 2%;
  /*background-image:url(../img/智能设备-bg.png) ;*/
  background-image: url(../img/行业领军-bg.png);
  background-size: 100% 100%;
  text-align: center;

}

.Smart-Devices .title {
  font-size: 2vw;
  margin-bottom: 2%;
  font-weight: 500;
  color: #013685;
  text-align: center;
}

.device-type {
  display: flex;
  /* 使用 flexbox 实现横向布局 */
  justify-content: space-around;
  /* 使设备标题居中对齐 */
  margin-bottom: 1%;
  /* 增加与照片的间隔 */
  width: 60%;
}

.device-option {
  margin: 0 10px;
  /* 设备之间的间隔 */
  cursor: pointer;
}

.device-title {
  font-size: 1vw;
  color: #0088ff;
  border-radius: 20px;
  padding: 1vh 1vw;
  font-weight: bold;
}

.device-title2 {
  font-size: 1vw;
  color: #0088ff;
  border-radius: 20px;
  padding: 1vh 1vw;
  font-weight: bold;
}

.swiper-slide .overlay1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色蒙版 */
  opacity: 0;
  /* 初始为不可见 */
  transition: opacity 0.3s ease;
  /* 平滑过渡 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
}




/*界面四*/
/*公司产品*/
.Company-Products {
  width: 100%;
  height: 100%;
  padding: 5% 5% 2% 5%;
  background-image: url(../img/关于大赛/精彩瞬间底图.png);
  background-size: 100% 100%;
}

.Company-Productsnone {
  width: 100%;
  padding: 5% 5% 8% 5%;
}

.Company-Products .title {
  font-size: 2vw;
  margin-bottom: 2%;
  font-weight: 800;
  color: #013685;
  text-align: center;
}

.products-main {
  display: flex;
  height: 100%;
  align-items: center;
  justify-items: center;
}

.products-main2 {
  display: block;
  height: 100%;
  align-items: center;
  justify-items: center;
}

.products-text {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}

.products-text2 {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.products-img {
  width: 50%;
  height: 48vh;
  border-radius: 2vw 0 2vw 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 添加阴影 */
  position: relative;
  /* 用于定位子元素 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
}

.products-img2 {
  width: 100%;
  height: auto;
  margin-top: 2vh;
  border-radius: 2vw 0 2vw 0;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 添加阴影 */
  position: relative;
  /* 用于定位子元素 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
}

.img555 {
  transition: transform 0.3s ease
    /* 添加过渡效果 */
}

.img555:hover {
  transform: scale(1.05);
  /* 鼠标悬停时放大 */
  background: white;
}

.products-img:hover {
  transform: scale(1.05);
  /* 鼠标悬停时放大 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  /* 更强的阴影 */
  background: white;
}

.products-left {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
}

.products-left:hover {
  transform: scale(1.05);
  /* 鼠标悬停时放大 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  /* 更强的阴影 */
  background: white;
}

.products-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
  /* 渐变叠加 */
  pointer-events: none;
  /* 确保不会影响到交互 */
}

.products-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保图片按比例填充容器 */
  transition: transform 0.3s ease;
  /* 图片本身的过渡效果 */
}

.products-img:hover img {
  transform: scale(1.1);
  /* 图片放大的程度 */
}

.products-img1 {
  width: 100%;
  height: 40vh;
  margin-top: 1vh;
  border-radius: 1vw;
  overflow: hidden;
}

.products-img11 {
  width: 100%;
  height: auto;
  margin-top: 1vh;
  border-radius: 1vw;
  overflow: hidden;
}

.products-title {
  color: #2F3233;
  font-weight: 800;
  font-size: 1.4vw;
  text-align: center;
  margin: 2vh 0;
}

.products-title2 {
  color: #2F3233;
  font-weight: 800;
  font-size: 3vh;
  text-align: center;
  margin: 2vh 0;
}

.products-title3 {
  color: #2F3233;
  font-weight: 800;
  font-size: 2.5vh;
  text-align: center;
  margin: 2vh 0;
}

.Introduction {
  color: #474A4D;
  font-size: 2vh;
  margin-top: 0vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

}

.Introduction2 {
  color: #474A4D;
  font-size: 2vh;
  margin-top: 0vh;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.products-border {
  background: linear-gradient(to bottom, #0055FE, #FFFFFF);
  opacity: 0.5;
  height: 28.7vh;
  width: 3.12vw;
  position: absolute;
  right: 4vw;
  top: 11.6vw;
}

.event-container {
  font-size: 2vh;
  width: 98%;
  height: 95%;
  background-color: transparent;
  margin-top: 2vh;
  margin-left: 1%;
}

/* 定义所有内部 flex 元素的公共样式 */
.flexible-item {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 定义 eventItem 的样式 */
.event-item {
  position: relative;
  width: 100%;
  /* 修改为100%，因为有padding，不需要再调整left */
  height: 10%;
  border-bottom: 1.5px dashed #7e7e7e;
  display: flex;
  justify-content: space-between;
  /* 确保子元素均匀分布 */
}

/* 定义 icon, title 和 date 的宽度 */
.icon-wrapper {
  display: flex;
  align-items: center;
  flex: 0 0 2%;
  /* 不收缩也不扩展，固定2% */
  justify-content: center;
}

.title-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  /* 自动扩展以填充可用空间 */
  justify-content: flex-start;
  /* 左对齐 */
}

.date-wrapper {
  display: flex;
  align-items: center;
  flex: 0 0 28%;
  /* 不收缩也不扩展，固定28% */
  justify-content: flex-end;
  /* 右对齐 */
  font-size: 2vh;
  color: #6e7681;
}

/*界面五*/
/*学术交流*/
.Academic-Exchange {
  width: 100%;
  height: 100%;
  padding: 4% 4% 4% 4%;
  /*background-image:url(../img/学术交流-bg.png) ;*/
  background-image: url("../img/精彩瞬间底图.png");
  background-size: 100% 100%;
}

.Academic-Exchange .title {
  font-size: 2vw;
  margin-bottom: 2%;
  font-weight: 800;
  color: #2F3233;
  text-align: center;
}

.block-container {
  display: flex;
  /* 使用 flexbox 实现横向布局 */
  justify-content: space-between;
  /* 块之间的间隔 */
  margin-top: 20px;
}

.academic-block {
  width: 15vw;
  height: 60vh;
  background-color: #fff;

}

.block-title {
  font-weight: 800;
  font-size: 1.5vw;
}

.academic-block img {
  width: 100%;
  height: auto;
  margin: 10px 0;
  /* 照片上下间隔 */
}

.block-description {
  font-size: 1vw;
  margin-bottom: 20px;
  /* 描述与链接间隔 */
}

.more-link {
  position: absolute;
  /* 绝对定位 */
  right: 15px;
  /* 距离右边的距离 */
  bottom: 15px;
  /* 距离底部的距离 */
  text-decoration: none;
  /* 去掉下划线 */
  color: #007bff;
  /* 链接颜色 */
  font-size: 1vw;
  /* 链接字体大小 */
}

/*知识科普*/
/* 知识科普部分 */
.Knowledge-Science {
  width: 80%;
  height: 90%;
  margin-top: 10%;
}

.science-title {
  font-size: 2.5vw;
  margin-bottom: 20px;
  font-weight: 800;
  text-align: center;
  color: #333;
  /* 标题颜色 */
}

.science-content {
  display: flex;
  justify-content: space-between;
  /* 左右布局 */
}

.description {
  width: 60%;
  /* 左侧描述区域宽度 */
}

.see-more {
  display: inline-block;
  margin-top: 10px;
  color: #007BFF;
  /* 链接颜色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.image-container {
  width: 35%;
  /* 右侧图片区域宽度 */
}

.science-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* 圆角效果 */
}

.separator {
  height: 2px;
  background-color: black;
  /* 黑色分隔线 */
  margin: 20px 0;
  /* 上下间距 */
}

.statistics {
  display: flex;
  justify-content: space-between;
  /* 块之间的间隔 */
}

.statistic-item {
  font-size: 1.5vw;
  color: #333;
  /* 字体颜色 */
}

.highlight {
  color: #00BFFF;
  /* 高亮蓝色 */
  font-weight: bold;
  /* 粗体 */
}

/* 新闻资讯部分 */
.NewsInfo {
  width: 80%;
  margin: 10% auto;
  padding: 20px;
  background-color: #f0f4f8;
  /* 背景色 */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.news-title {
  font-size: 3vw;
  text-align: center;
  color: #222;
  /* 标题颜色 */
  margin-bottom: 30px;
}

.headline {
  display: flex;
  justify-content: space-between;
  /* 左右布局 */
  align-items: center;
  margin-bottom: 30px;
}

.headline-text {
  width: 60%;
  /* 左侧文字区域宽度 */
}

.headline-image {
  width: 35%;
  /* 右侧图片区域宽度 */
}

.headline-pic {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* 圆角效果 */
  transition: transform 0.3s;
  /* 动效 */
}

.headline-pic:hover {
  transform: scale(1.05);
  /* 鼠标悬停放大效果 */
}

.headline-link {
  display: inline-block;
  margin-top: 10px;
  color: #007BFF;
  /* 链接颜色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.content-section {
  display: flex;
  justify-content: space-between;
  /* 块之间的间隔 */
}

.video-section,
.document-section {
  width: 48%;
  /* 两部分各占48% */
  background-color: #e9ecef;
  /* 背景色 */
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.video-section h3,
.document-section h3 {
  font-size: 2.5vw;
  color: #333;
  /* 子标题颜色 */
}

.doc-link {
  color: #007BFF;
  /* 文档链接颜色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.doc-link:hover {
  text-decoration: underline;
  /* 鼠标悬停下划线效果 */
}


/*精彩瞬间*/
/* 主要容器 */
.Highlights {
  width: 100%;
  height: 100%;
  padding: 12% 0% 0% 0%;
  background-image: url(../img/精彩瞬间底图.png);
  background-size: 100% 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 设置4列 */
  grid-template-rows: auto repeat(2, 1fr);
  /* 设置2行，第一行根据标题的高度自适应 */
  grid-gap: 0;
  /* 去除间距 */
  justify-items: center;
  /* 内容水平居中 */
  align-items: center;
  /* 内容垂直居中 */
  position: relative;
  /* 相对定位，以便标题绝对定位 */
}

/* 标题样式 */
.highlights-title {
  margin-top: 3%;
  font-size: 2vw;
  margin-bottom: 2%;
  font-weight: 800;
  color: #013685;
  text-align: center;
  position: absolute;
  /* 绝对定位 */
  top: 8%;
  /* 距离顶部8%，可根据需要调整 */
  left: 50%;
  transform: translateX(-50%);
  /* 水平居中 */
}

/* 每个子项 */
.Highlights>div {
  width: 100%;
  /* 让每个子项占据容器的100%宽度 */
  height: 100%;
  /* 设置每个子项的高度，保证它们不会堆叠 */
  background-color: rgba(0, 0, 0, 0.3);
  /* 设置每个子项的背景颜色（可更改） */
  border-radius: 8px;
  /* 给每个元素添加圆角 */
  margin-bottom: 0px;
  /* 可选的底部间距 */
}

.highlights-item {
  position: relative;
}

/* 图片样式 */
.highlights-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保图片覆盖整个容器 */
  transition: transform 0.3s ease, filter 0.3s ease;

}

/* 鼠标悬停时效果 */
.highlights-item img:hover .overlay {
  display: block;
}

.overlay {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(49, 73, 117, 0.6);
  /* 蓝色覆盖层 */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 显示文字 */
.overlay .text {
  font-size: 2vw;
  color: white;
  font-weight: lighter;

}

/* 当鼠标悬停时显示覆盖层和文字 */
.highlights-item:hover .overlay {
  opacity: 1;
}

/*专家团队*/

/* 整个 slide 样式 */
.expert-slide {
  width: 100%;
  height: 100%;
  background-image: url(../img/关于大赛/比赛方案底图.png);
  background-size: 80% 100%;
  display: grid;
  justify-items: center;
  /* 内容水平居中 */
  align-items: center;
  /* 内容垂直居中 */
  position: relative;
  /* 相对定位，以便标题绝对定位 */
}

/* 标题样式 */
.expert-title {
  margin-top: 1%;
  font-size: 3vh;
  margin-bottom: 2%;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  position: absolute;
  /* 绝对定位 */
  top: 8%;
  /* 距离顶部8%，可根据需要调整 */
  left: 50%;
  transform: translateX(-50%);
  /* 水平居中 */
}

/* 专家卡片区域 */
/* 专家卡片区域 */
.expert-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3列 */
  /* 2行，行高自适应 */
  gap: 20px;
  /* 设置每个专家卡片之间的间距 */
  width: 100%;
  margin-top: 0vh;
  justify-items: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.expert-section22 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 3列 */
  /* 2行，行高自适应 */
  gap: 20px;
  /* 设置每个专家卡片之间的间距 */
  width: 100%;
  margin-top: 0vh;
  justify-items: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.expert-section2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3列 */
  /* 2行，行高自适应 */
  gap: 20px;
  /* 设置每个专家卡片之间的间距 */
  width: 80%;
  margin-top: -40vh;
  max-width: 1275px;
  justify-items: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

/* 单个专家卡片样式 */
.expert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}

/* 专家头像区域 */
.expert-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #a7b9cb;
  position: relative;
  margin-bottom: 0px;
}

.expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 专家名字 */
.expert-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 0;
}

/* 专家职位或单位 */
.expert-position {
  font-size: 0.8vw;
  color: #b2cfcf;
  margin: 5px 0 0;
  height: 1.5vh;
}

.custom-corner {
  position: absolute;
  top: 5%;
  left: 2%;
  width: 10vw;
  /* 设置宽度 */
  height: 5vh;
  /* 设置高度 */
  background-color: #3f4a5e;
  /* 设置背景颜色 */
  border-radius: 0 25px 0 0;
  /* 只有右上角是圆角 */
  z-index: 12;
  text-align: left;

}

.custom-contant {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 90%;
  /* 设置宽度 */
  height: 90%;
  /* 设置高度 */
  background: linear-gradient(to bottom,
      rgba(56, 109, 215, 0.9),
      /* #386DD7 颜色，90% 透明度 */
      rgba(56, 109, 215, 0.4)
      /* #386DD7 颜色，40% 透明度 */
    );
  border-radius: 0 10px 10px 10px;
  /* 只有右上角是圆角 */
  z-index: 11;
}

.track-introduction {
  height: 24vh;
  width: 34vw;
  display: flex;
  padding: 1vh 1vw;
  align-items: center;
  color: #000;
  /* 初始文字颜色 */
  position: relative;
  /* 为伪元素定位提供参考 */
  overflow: hidden;
  /* 防止溢出 */
  z-index: 2;
  /* 确保背景图在其他内容下方 */

}

.track-introduction::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/icon/赛道介绍-bg.png);
  /* 默认背景图 */
  background-size: 100% 100%;
  background-position: center;
  opacity: 0;
  /* 默认透明度为 0，即背景图不可见 */
  transition: opacity 0.5s ease-in-out;
  /* 背景图的透明度过渡 */
  z-index: -1;
  /* 确保背景图在其他内容下方 */
}

.track-introduction:hover::before {
  opacity: 1 !important;
  /* 鼠标悬停时背景图变为可见 */
}

.track-introduction:hover {
  color: #fff;
  /* 鼠标悬停时文字颜色 */
  box-shadow: 0px 0.06rem 0.15rem 0px rgba(0, 0, 0, 0.45);
  /* 鼠标悬停时阴影 */
  background: transparent;
}

.track-type-img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.track-introduction:hover .track-type-img {
  transform: scale(1.1);
  /* 鼠标悬停时放大背景图 */
}

.track-introduction2 {
  height: 24vh;
  width: 96vw;
  display: flex;
  padding: 1vh 1vw;
  align-items: center;
  color: #000;
  /* 初始文字颜色 */
  position: relative;
  /* 为伪元素定位提供参考 */
  overflow: hidden;
  /* 防止溢出 */
  z-index: 2;
  /* 确保背景图在其他内容下方 */

}

.track-introduction2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/icon/赛道介绍-bg.png);
  /* 默认背景图 */
  background-size: 100% 100%;
  background-position: center;
  opacity: 0;
  /* 默认透明度为 0，即背景图不可见 */
  transition: opacity 0.5s ease-in-out;
  /* 背景图的透明度过渡 */
  z-index: -1;
  /* 确保背景图在其他内容下方 */
}

.track-introduction2:hover::before {
  opacity: 1 !important;
  /* 鼠标悬停时背景图变为可见 */
}

.track-introduction2:hover {
  color: #fff;
  /* 鼠标悬停时文字颜色 */
  box-shadow: 0px 0.06rem 0.15rem 0px rgba(0, 0, 0, 0.45);
  /* 鼠标悬停时阴影 */
  background: transparent;
}

.track-type-img2 {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.track-introduction2:hover .track-type-img2 {
  transform: scale(1.1);
  /* 鼠标悬停时放大背景图 */
}

.about-contest-num {
  font-size: 2vw;
  /* 字体大小可以根据需要调整 */
  font-weight: bold;
  /* 设置字体加粗，增加视觉效果 */
  background: linear-gradient(to top, #fff, #C1E2EA);
  /* 渐变背景，颜色可以随意更改 */
  -webkit-background-clip: text;
  /* Webkit 浏览器需要加这个属性 */
  color: transparent;
  /* 使字体本身透明，显示背景渐变 */
  transition: opacity 0.5s ease-in-out;
  /* 背景图的透明度过渡 */
  opacity: 0;
}

.about-contest-title {
  margin-bottom: 1vh;
  font-size: 1vw;
  color: #fff;
  transition: font-size 0.5s ease-in-out, color 0.5s ease-in-out;
  /* 背景图的透明度过渡 */
  height: 2.5vh;
  cursor: pointer;
}

.about-contest-quan {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.about-contest-quan1 {
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
  background-color: #E8EAEB;
  z-index: 4;
}

.about-contest-center {
  display: none;
  justify-content: space-around;
  align-items: center;
  margin-top: 4vh;
}

.about-contest-yuan {
  animation: rotate-animation 10s linear infinite;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
    /* 初始状态 */
  }

  100% {
    transform: rotate(360deg);
    /* 旋转一圈 */
  }
}

.date-day {
  color: black;
  font-size: 2.5vh;
  font-weight: bold;
  border-bottom: 2px solid rgb(34, 108, 205);
  padding-bottom: 4px;
}

@media (max-width: 1195px) {

  #morePic {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(54, 53, 53, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 20;
    top: 0
  }

  .Notes-topImg {
    height: 10vh;
  }

  .Notes {
    width: 90%;
  }

  .about-contest-title {
    font-size: 3.5vw;
  }

  #navigation {
    display: none !important;
  }

  .MobilePhone {
    display: block !important;
  }

  .web {
    display: none !important;
  }

  .head-bg {
    display: none !important;
  }

  .Navigation {
    background-color: #127CF6;
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100vw;
    display: flex;
    padding: 2vh 3vw;
    align-items: center;
    justify-content: space-between;
  }
  #SignUpBtn {
    display: none !important;
    background-image: url(../img/icon/弹框.png);
    background-size: 100% 100%;
    color: #374569;
    position: fixed;
    top: 0;
    left: 0;
    width: 40vw;
    height: 13vh;
    z-index: 10;
    font-size: 4vw;
    font-weight: 800;
    transition: left 0.1s ease-in-out, top 0.1s ease-in-out;
    /* 背景图的透明度过渡 */
  }

  .SignUpBtn-close {
    display: flex;
    align-items: end;
    height: 3.5vh;
    justify-content: end;
    margin-right: 3vw;
  }

  .SignUpBtn-close img {
    width: 2vw;
    height: 2vw;
  }



  #NavList {
    width: 100vw;
    height: 100vh;
    background-color: #081776;
    position: fixed;
    z-index: 20;
  }

  .NavList-title {
    color: #fff;
    height: 10vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 10vh;
    padding: 0 10vw;
    font-size: 4.5vw;
  }

  .mainPageInfo {
    margin-top: 0.5vh;
  }

  .mobilephone {
    display: flex;
  }

  .menu-item2 {
    height: 8vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    border-bottom: 2px solid #525050;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    /* 添加 transform 的过渡 */
    border-radius: 10px;
  }

  .date-day {
    font-size: 3.5vw;
  }

  .date-year {
    font-size: 3vw;
  }

  .countdown_box_item div {
    font-size: 1.5vh;
  }
}

@media (min-width: 1195px) {

  .countdown_box_item div {
    font-size: 2vh;
  }

  #morePic {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(54, 53, 53, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 20;
    top: 0
  }

  .Notes-topImg {
    height: 18vh;
  }

  .Notes {
    width: 47%;
  }

  #navigation {
    display: flex !important;
  }

  .MobilePhone {
    display: none !important;
  }

  .head-bg {
    display: block !important;
  }

  .Navigation {
    display: none;
  }

 #SignUpBtn {
  position: fixed;
  top: 0;
  left: 0;
  width: 14.5vw;
  height: 11vh;
  background-image: url(../img/新弹框.png); /* 你的背景图路径 */
  background-size: 100% 100%;
  z-index: 9999;
  font-size: 1vw;
  font-weight: 800;
  color: #374569;
}

/* 关闭按钮位置 */
.SignUpBtn-close {
  position: absolute;
  top: 0.8vh;
  right: 1vw;
}

.SignUpBtn-close img {
  width: 0.6vw;
  height: 0.6vw;
  cursor: pointer;
}

/* 左上角的文字内容 */
.SignUpBtn-content {
  position: absolute;
  top: 2.5vh;
  left: 2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5vh;
}

.title-line {
  font-size: 1vw;
}

.subtitle-line {
  font-size: 1vw;
}

/* 右下角“查看”按钮 */
.view-btn {
  position: absolute;
  top:4.6vh;
  right: 3.15vw;
  font-size: 0.7vw;
  color: #000;
  cursor: pointer;
  font-weight: 600;
}


}