.header {
  color: #CCC;
  background: #2C323D;
}

.header .container-fluid {
  padding-top: 10px;
  padding-bottom: 10px;
}

.header a {
  color: #DDD;
}

.header a:hover {
  color: #FFF;
  text-decoration: none;
}

/*定义图标的大小*/
.header .logo1 {
  float: left;
  padding-top: 0px;
  margin-left: 0px;
  position: relative;
  line-height: 25px;
  float: left;
  display: inline-block;
}
.header .logo2 {
  float: left;
  padding-top: 20px;
  margin-left: 380px;
  font-size: 40px;
  font-weight: bolder;
  position: relative;
  line-height: 20px;
}
.header .logo3 {
  float: left;
  padding-top: 10px;
  margin-left: 30%;
  margin-right: 5%;
  position: relative;
  line-height: 20px;
}
.header .logo4 {
   float: left;
   padding-top: 10px;
   margin-left: 25%;
   margin-right: 1%;
   position: relative;
   height: 55px;
   width: 45px;
}
.header .logo5 {
  float: left;
  padding-top: 20px;
  margin-left: 5px;
  position: relative;
  line-height: 20px;
}
/*END OF HEADER LOGO*/

.header .search-form {
  margin-right: 20px;
}

/*定义广告图片的大小*/
.photo{
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background-size:contain;
  position: relative;
}
/*END OF ADVERTISEMENT PICTURE*/

/* NAVIGATION */
.navigation {
  margin-left: 10px;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


.flex {
  display: flex;
}

.menu {
  padding: 0;
  margin: 40px 20px;
  list-style: none;
}

.menu .pages {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu li {
  line-height: 30px;
}

.menu .category-title {
  margin: 25px 0 10px 0;
  font-size: 12px;
  text-transform: uppercase;
}

.menu .category.active .category-title {
  font-weight: bold;
}

.menu a {
  display: inline-block;
  line-height: 20px;
  color: #888;
}

.menu a:hover {
  color: #444;
  text-decoration: none;
}

.menu .page.active a {
  font-weight: bold;
  color: #444;
}

.home .header .search-form {
  display: none;
  border-radius: 0px;
}

.home-search {
  text-align: center;
  background-color: #26303f;
  background-size: 100% auto;
  background-repeat: repeat-y;
  height: 100px;
  position: relative;
  margin: 10px;
}

.home-search .white{
 font-family: sans-serif;
 font-size:40px;
 font-weight:bold;
 color: #ffffff;
}

.home-search .nested{
  font-family: sans-serif;
  font-size: 20px;
  color: #ffffff;
}

.home-search .text-center{
  margin-top: 20px;
}

.home-search .form-group{
  margin-top: 10px;
}

/* FEATURED BOX */
.home-video .featured-box {
  text-align: center;
  padding: 15px;
  border: 2px solid #e9e9e9;
  border-radius: 0px;
  background-color: #FFFFFF;
}
.fb-heading {
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
}
.fb-heading i {
  margin-right: 5px;
}
@media only screen and (max-width: 500px) {
  .fb-heading {
    font-size: 18px;
  }
}@media only screen and (max-width: 400px) {
  .fb-heading {
    font-size: 15px;
  }
}
.fb-sub-heading {
  font-size: 16px;
  font-weight: lighter;
  margin-top: 5px;
  text-transform: none;
}
.fb-content {
  width: inherit;
  margin: 0 auto;
}

.main-content{
overflow: hidden;
}


.panel-heading {
  margin:0;
  font-size: 100%;
  font-weight: normal;
}

.panel .page {
  text-overflow: ellipsis;
}

.panel-default {
  margin: 5px;
}

.col-md-12{
  font-size: 13px;
  margin-top: 20px;
}


.content {
  padding: 40px;
  margin: 40px 20px;
  color: #555;
  border: 1px solid #E9E9E9;
  -webkit-box-shadow: 0 1px 50px rgba(0,0,0,0.1);
  box-shadow: 0 1px 50px rgba(0,0,0,0.1);
}

.content .title {
  margin: 0 0 20px 0;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: #222;
}

.content p,
.content ul,
.content ol,
.content pre,
.content blockquote,
.content table,
.content iframe {
  margin-bottom: 1em;
}

.content img {
  display: block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #D6D6D6;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.content code {
  color: #555;
  background-color: #FFFDDC;
}

.content pre {
  background: #FFFDDC;
  border: 0;
}

.content pre code {
  color: #657B83;
}

.content .hljs {
  background: none;
}

.content .page-meta {
  margin-top: 50px;
  font-size: 85%;
  color: #999;
}

.content .page-meta a {
  color: #999;
  border-bottom: 1px dotted #999;
}

.content .page-meta a:hover {
  color: #428BCA;
  text-decoration: none;
}

/*定义网页开发团队简介*/
/* FEATURED AREA COLORS */
.featured-area-default {
  background-color: #ffffff;
}
.featured-area-grey {
  background-color: #f3f3f3;
  margin-top:0px
}

/* END OF FEATURED AREA COLORS */

/* FEATURED BOX */
.featured-box {
  text-align: center;
  padding: 15px;
  border: 2px solid #e9e9e9;
  border-radius: 7px;
  background-color: #ffffff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.fb-heading {
  font-size: 25px;
  margin-top: 10px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
}
.fb-heading i {
  margin-right: 5px;
}
@media only screen and (max-width: 500px) {
  .fb-heading {
    font-size: 18px;
  }
}@media only screen and (max-width: 400px) {
  .fb-heading {
    font-size: 15px;
  }
}
.fb-sub-heading {
  font-size: 16px;
  font-weight: lighter;
  margin-top: 5px;
  text-transform: none;
}
.fb-content {
  width: inherit;
  margin-bottom: 30px;
}
.fb-heading-small {
  font-size: 18px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bolder;
  margin-top: 20px;
}

.fb-heading-middle {
  font-size: 18px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bolder;
  margin-top: 20px;
  margin-left: 40px;
}

.fb-body ul li a {
  color: #134989;
}
/*END OF FB*/

.support-container {
  background-color: #fdf8c8;
  border: 1px solid #e7e0a1;
  padding: 20px 90px 20px 20px;
  font-size: 14px;
  color: #676767;
  font-weight: lighter;
  background-repeat: no-repeat;
  background-position: right 10px top 10px;
  margin-top: 5px;
}

h2.support-heading {
  font-size: 20px;
  margin: 0;
  color: #eceaea;
  padding-bottom: 15px;
}

.fat-content-tags a {
  margin-top: 10px;
  color: white;
  float: left;
}

/* BUTTON DEFINITION */
.btn-sm-1{
  background-color: #a2fca2;
}

.btn-sm-2{
  background-color: #d3a60c;
}

.btn-sm-3{
  background-color: #b92c28;
}

.btn-sm-4{
  background-color: #0d3349;
}

.btn-sm-5{
  background-color: #a200c2;
}

.btn-sm-6{
  background-color: #2a9292;
}

.btn-sm-7{
  background-color: #3d62f5;
}

.btn-sm-8{
  background-color: #55ffff;
}

.btn-sm-9{
  background-color: #9de428;
}

.btn{
  width: auto;
  height: auto;
  float: right;
  margin-left: 10px;
  margin-right: 10px;
}

.btn1{
  width: 70px;
  height: 35px;
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
}
/*END OF BUTTON DEFINITION*/

.admin-support{
  margin-top: 10px;
}
/*
.container-fluid{
  margin-top: 3px;
  margin-left: 0;
  width: 100%;
  height: 30px;
  position: relative;
}
*/
.container-header{
  margin-top: 3px;
  margin-left: 0;
  width: 100%;
  height: auto;
  position: relative;
}
/* 定义网页页脚 */
.footer {
  padding: 20px 0px 20px 0px;
  background: #f7f8fa;
  color: black;
  margin-top: 3rem;
}
.footer-copyright {
  padding: 20px 0px 20px 0px;
  background: #243549;
  color: #fff;
}
.footer-copyright a {
  color: #d5d4d4;
}
.footer-copyright a:hover {
  color: #ffffff;
}
.text-center {
  text-align: center;
}
.footer-heading {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.footer-body {
  font-size: 14px;
  color: black;
}
.footer-body ul {
  margin-left: 0;
  padding-left: 0;
}
.footer-body ul li {
  list-style-image: url('../images/videoicon.png');
  list-style-position: inside;
  padding: 4px 5px 8px 5px;
  text-indent: -0.8em;
}
.footer-body ul li:last-child {
  border-bottom: none;
}
.footer-body ul li a {
  color: black;
}
.footer-body ul li a:hover {
  color: #ffffff;
  text-decoration: none;
}
/* END OF FOOTER */

.page-excerpt .search-query {
  background: #FFFDDC;
}

.error {
  padding: 0 20px;
}

@media only screen and (max-width: 767px) {

  .home-search .form-group {
    margin-bottom: 0;
  }

  #home-search {
    margin-bottom: 10px;
  }

}


/*定义侧面类别*/

.list-title{
  font-family: sans-serif;
  font-size: 13px;
  color: #007dcb;
  margin-top: 0px;
  margin-bottom: 0px;
}

.container13{
  background-color: #2a384a;
  height: 550px;
}

/************************/
/* 网站菜单部分CSS代码 */
/***********************/

/* 一级菜单 */
.navigation {
  background-color: #f8f9fa;
  padding: 10px 20px;
}

.nav_list {
  display: flex; /* 一级菜单水平排列 */
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav {
  position: relative; /* 便于显示悬浮菜单 */
}

.nav_link {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.nav_link:hover {
  background-color: #eaeaea;
  border-radius: 5px;
}

/* 二级菜单 */
.nav_sub_list {
  position: absolute;
  top: 100%;
  left: 0;
  display: none; /* 默认隐藏 */
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: 10px 0;
  z-index: 1000;
  min-width: 200px;
}

/* 父菜单项（一级菜单和二级菜单）的样式 */
.nav_sub_list > li {
  position: relative;
}


.nav:hover .nav_sub_list {
  display: block; /* 悬浮显示 */
}

.sub_nav_link {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.sub_nav_link:hover {
  background-color: #f1f1f1;
}

/* 隐藏三级菜单，默认情况下不显示 */
.sub_menu {
  display: none;  /* 默认为隐藏 */
  position: absolute;
  left: 100%;  /* 显示在二级菜单的右侧 */
  top: 0;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 100;
  padding: 10px;
  min-width: 700px;
}

/* 鼠标悬停在二级菜单时，显示三级菜单 */
.nav_sub_list > li:hover .sub_menu {
  display: block;
}

.sub_nav_link:hover + .sub_menu {
  display: block; /* 悬浮显示 */
}

/* 鼠标悬停在三级菜单上时，保持三级菜单显示 */
.sub_menu:hover {
  display: block;
}

/* 三级菜单的内容 */
.sub_menu_content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 卡片样式 - 调整尺寸比例 */
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 120px; /* 卡片宽度 */
  height: 70px; /* 卡片高度，调整比例 */
  text-align: center;
  overflow: hidden;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* 卡片标题样式 */
.card_title {
  font-size: 12px; /* 标题字体大小 */
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* 容器的样式，控制每行显示3-4个图标 */
.icon-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-evenly; /* 均匀分布，确保每行图标的间距相同 */
  gap: 15px; /* 每个图标之间的间距 */
  float: left;
  padding: 0; /* 去掉默认的内边距 */
  list-style: none; /* 去掉列表的圆点 */
}

/* 每个图标的样式 */
.icon-item {
  display: flex;
  flex-direction: column; /* 让图标和文件名纵向排列 */
  align-items: center;    /* 图标和文件名居中对齐 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* 确保宽度包括内边距和边框 */
}

/* 图标的样式 */
.icon-img {
  width: 160px;    /* 图标宽度 */
  height: 60px;   /* 图标高度 */
  margin-bottom: 5px; /* 图标和文件名之间的间距 */
}


/* 文件名的样式 */
.icon-name {
  display: block; /* 让文件名独占一行 */
  font-size: 14px; /* 文件名的字体大小 */
  color: #333;     /* 文件名的颜色 */
  word-wrap: break-word; /* 文件名可以换行 */
  text-align: center; /* 文件名居中 */
}

/* 确保每行至少显示 3 个图标 */
.icon-item {
  width: calc(33.33% - 15px); /* 每个图标占据大约 1/3 屏幕宽度，减去间距 */
}

/* 响应式设计：当屏幕较小（如手机）时，减少每行显示的个数 */
@media (max-width: 1024px) {
  .icon-item {
    width: calc(50% - 15px); /* 每个图标占据 1/2 屏幕宽度 */
  }
}

@media (max-width: 768px) {
  .icon-item {
    width: 100%; /* 小屏幕时，每行只显示一个图标 */
  }
}

/* 视频封面样式 */
.video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 覆盖层样式 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 播放按钮样式 */
.play-icon {
  width: 50px;
  height: 50px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* 悬停效果 */
.video1:hover .overlay {
  opacity: 1;
}

.video1:hover .play-icon {
  opacity: 1;
}