/*
	AUTHOR: ALAN HE
	LICENSE: MIT LICENSE
	VERSION: 1.0
*/

.iw{
  width:1200px;
  margin:0 auto;
}
.iw::after{
  content:"";
  display:block;
  clear:both
}
.fl{
  float:left;
}
.fr{
  float:right
}
img.zoom_img{
  -webkit-transform:scale(1,1);
  -webkit-transition-timing-function:ease-out;
  -webkit-transition-duration:250ms;
  -moz-transform:scale(1,1);
  -moz-transition-timing-function:ease-out;
  -moz-transition-duration:250ms
}
img.zoom_img:hover{
  -webkit-transform:scale(1.1);
  -webkit-transition-timing-function:ease-out;
  -webkit-transition-duration:750ms;
  -moz-transform:scale(1.1);
  -moz-transition-timing-function:ease-out;
  -moz-transition-duration:750ms;
  overflow:hidden
}
.glod{
  padding-left:5px;
  vertical-align:middle;
  color:#ed4702
}
.glod i{
  padding-left:15px;
  background:url(../img/home.png) no-repeat 0 3px
}
.v{
  padding-right:15px;
  background:url(../img/home.png) no-repeat -65px 3px
}

/*定义主网页页面解决方案介绍部分的文字排列格式*/

.office-automation-1{margin-top: 20px; margin-left: 20px; width: 380px; height: 30px}

.office-automation{margin-left: 20px;}

.fa-pencil-square-o{margin-left:20px;}

.e-commerce{margin-top: 10px}

.e-commerce-1{margin-top:20px; width: 380px; height: 30px}

.help-desk{margin-top: 10px}

.help-desk-1{margin-top: 20px; width: 380px; height: 30px}

.software-develop{margin-top: 20px}

.software-develop-1{margin-left: 20px; margin-top: 20px; width: 380px; height: 30px}

.knowledge-content{margin-top: 10px}

.knowledge-content-1{margin-top: 20px; width: 380px; height: 30px}

.training{margin-top: 10px}

.training-1{margin-top: 20px; width: 380px; height: 30px}

/*定义主网页页面我们的团队介绍中的格式和显示方式*/

/* 菜单的属性 */
ul.topnav1 {
  margin-top: 5px;
  padding-right: 20px;
  text-align: center;
  position: relative;
  display: inline-block;
}
/* End of菜单的属性 */

/* 定义icon-font的文字图标Social下的属性 */
.social{
  margin: 7px 0 0;
  padding: 0;
  text-align: center;
}
.social li{
  display: inline-block;
  margin: 0 8px;
}
.social li a{
  display: block;
  position: relative;
  color: #333;
  font-size: 15px;
  text-align: center;
  border-radius: 100px;
  transition: all ease-out 0.5s;
  line-height: 35px;
}
.social li a:hover{
  color: #999;
}
/* End of 定义icon-font的文字图标Social下的属性 */


/* 各种容器的属性 */
.container{
  width:100%;
  position:relative;
  overflow: hidden
}

.container1{
  background-color: #26303c;
  width: auto;
  height: 200px;
  margin-left: 15px;
  margin-top: 10px;
  margin-right: 15px;
}

.container2{
  width: auto;
  height: auto;
  border: solid 1px #999;
  border-radius: 3px;
}

.container3{
  width: 270px;
  height: 400px;
  background-color: #eceaea;
}


.container4{
  margin-top: 5px;
  margin-left: 2px;
  height: auto;
  width: 1980px;
  position: relative;
  overflow: hidden;
}

.container5{
  width:1980px;
  height:1250px;
  font-size:20px;
  background-color: #f7f8fa;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container6{
  margin-top: 5px;
  margin-left: 2px;
  height: 80px;
  width: auto;
}

.container7{
  background-color: lightgray;
  width: border-box;
  height: 650px;
  margin: 10px;
}

/**
.container8{
  background-color: #f7f8fa;
  width: border-box;
  height: auto;
  margin: 1px;
}
**/

.container8{
  width:1980px;
  height:auto;
  background-color: #f7f8fa;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container9{
  width: auto;
  height: 780px;
  border: solid 1px #999;
  border-radius: 3px;
  padding-left: 10px;
}

.container10{
  width: 595px;
  height: 510px;
  border: solid 1px #999;
  border-radius: 3px;
  padding-left: 10px;
  margin-bottom: 10px;
}


.container11{
  width: 595px;
  height: 510px;
  border: solid 1px #999;
  border-radius: 3px;
  margin-top: 10px;
  margin-left: 15px;
}

.container12{
  width: auto;
  height: 410px;
  border: solid 1px #999;
  border-radius: 3px;
}

.container30{
  width:1980px;
  height:auto;
  font-size:20px;
  background-color: #f9f7e9;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container31{
  width:1980px;
  height:100px;
  font-size:20px;
  background-color: #f7f8fa;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container32{
  width:1980px;
  min-height: calc(100% + 20px); /* 根据子容器的高度变化，留出额外的间隙 */
  font-size:15px;
  background-color: #f7f8fa;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container42 {
  width: 100vw; /* 占满屏幕宽度 */
  min-height: calc(100% + 20px); /* 根据子容器的高度变化，留出额外的间隙 */
  background-color: #f7f8fa;
  display: flex;
  justify-content: center;
  align-items: center; /* 可选，垂直居中子元素 */
  padding: 10px; /* 上下10px间隙 */
  box-sizing: border-box; /* 确保内边距不会影响容器的宽度 */
}

.container33{
  width:1980px;
  height:100px;
  font-size:20px;
  background-color: #f9f7e9;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.container34{
  width:1980px;
  height:auto;
  background-color: white;
  margin-top: 1px;
  margin-left: 1px;
  float: left;
}

.support-container1 {
    background-color: #305f97;
    position: relative;
    border: 1px solid #305f97;
    padding: 10px 50px 20px 20px;
    font-size: 14px;
    color: #eceaea;
    font-weight: lighter;
    background-repeat: no-repeat;
    background-position: right 10px top 10px;
    margin-top: 10px;
    height: 400px;
    width: 270px;
  }

.support-container2 {
  background-color: #305f97;
  border: 1px solid #305f97;
  padding: 20px 90px 20px 20px;
  font-size: 14px;
  color: #eceaea;
  font-weight: lighter;
  background-repeat: no-repeat;
  background-position: right 10px top 1px;
}

.search-container{
  width: 1980PX;
  height:auto;
  margin-top: 10px;
  background-color: #26303f;
  text-align: center;
  background-size: 100% auto;
  background-repeat: repeat-y;
  position: relative;
  padding-top: 25px;
  padding-bottom: 25px;
}

.breadcrumb-container{
    margin-top: 25px;
    margin-left: 15px;
}

/*
.container-fluid{
    margin-top: 25px;
}
*/

/* End of 容器Container的属性 */

/* 各种图片的属性 */

#img{
  margin-right: 5px;
}

.photo{
  height: 100%;
  width: 100%;
  position: relative;
}

.photo1{
  height: 100%;
  width: 100%;
  margin-left: 1px;
}

.gallery-item{
  margin-top: 10px;
}

.gallery-item1{
  margin-top: 10px;
  margin-left: 10px;
}

.gallery-item2{
  margin-top: 10px;
  margin-left: 10px;
  float: left;
}

.gallery-item3{
  margin-top: 10px;
  margin-left: 5px;
  float: left;
}

.car-gallery {
  float: left;
  margin-left: 5px;
  display: block;
  box-sizing: border-box;
}
/* End of 各种图片的属性 */

/* 各种表格的属性 */
.col-md-2{
  margin-left: 1px;
}

/* End of 各种表格的属性 */

.fb-heading{
    margin-left: 15px;
}

.blog-text{
  width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}

.team-text{
  width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  margin:0px;
}

.row.search-row{
  margin-left: 400px;
}

.search{
  width: 400px;
  height: 40px;
  alignment: center;
  border-radius: 5px;
  font-size: 17px;
}

.text-center{
  color: white;
}

.repair-item{
  float: left;
  margin-right: 10px;
  text-align: center;
}

.active-users{
  margin-right: 20px;
}

.menu-title{
  margin-left: 20px;
}
.dropdown-menu-1{
  margin-left: 25px;
  margin-top: 10px;
}

.home-search{
  margin-top: 10px;
  width: auto;
}

/* 各种按钮的属性 */
.btn-default{
  height: 120px;
  width: 110px;
}

button {
  margin: 0 10px;   /* Space between buttons */
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.buttons {
  position: absolute; /* Positioning buttons over the image */
  bottom: 20px;      /* Adjust this value as needed */
  left: 50%;         /* Center the buttons */
  transform: translateX(-50%);
}

button:hover {
  background-color: rgba(255, 255, 255, 1);
}
/* End of各种按钮的属性 */

.col-md-6{
  margin-top: 10px;
}

.video1{
  width: 100%;
  height: 50%;
  margin:0px;
}

/* 主页中间按钮切换 */
.btn10{
  height: 60px;
  width: 160px;
  margin-left: 25px;
  font-size: 15px;
}

.content1{
  margin: 10px auto;
  display: none;
}
.btn10.active{
  background-color: steelblue;
}
.content1.show{
  display:block;
}
/* End of主页中间按钮切换 */

/* 主页右侧按钮切换 */
.button40{
  width: 183px;
}
.summary1{
  margin: 10px auto;
  display: none;
}
.button40.active{
  background-color: steelblue;
}
.summary1.show{
  display:block;
}
/* End of主页右侧按钮切换 */

.mainbox h3,.mainParentArea1 h2, .mainParentArea2 h2, .mainAreaBox2 h2, .mainAreaBox1 h2 {
  clear:both;
  margin-top: 0px;
  margin-left:1px;
  font-weight:bold;
  color:#444444;
  letter-spacing:2px;
  height:28px;
  background:#edf6ff
  url(title_bg_pic.gif) repeat-x 0 -196px;
  border-bottom:#ace 0px solid;
  font:15px Verdana,Arial,微软雅黑,sans-serif;
  font-weight:bold;
}

.mainAreaBox2{
  margin-top: 0px;
  height: 35rem;
  width: 30rem;
  float: left;
  border: solid 1px lightgrey;
  border-radius: 3px;
  background-color: white;
}

.mainAreaBox3{
  margin-top: 0px;
  margin-left: 25px;
  margin-right: 30px;
  width: auto;
  float: left;
}

.mainAreaBox4{
  margin-top: 0px;
  height: 35rem;
  width: 30rem;
  float: left;
  border: solid 1px lightgrey;
  border-radius: 3px;
  background-color: white;
}

.mainAreaBox5{
  margin-top: 0px;
  margin-left: 25px;
  border: solid 1px #999;
  height: 500px;
  width: 30%;
  float: left;
  background-color: white;
}

.mainAreaBox6{
  margin-top: 0px;
  height: 35rem;
  width: 28rem;
  float: left;
  border: solid 1px lightgrey;
  border-radius: 3px;
  background-color: white;
}

.mainAreaBox7{
  margin-top: 0px;
  height: 10rem;
  width: 28rem;
  float: left;
  border: solid 1px lightgrey;
  border-radius: 3px;
  background-color: white;
}

.boxhead{
  font:23px Verdana,Arial,微软雅黑,sans-serif;
  font-weight:bold;
}

.container-display{
  background-color: white;
  width: auto;
  height: auto;
  border-radius: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.inline {
  display: inline-block;
  margin-right: 10px; /* 可以添加间距 */
}

/** Markdown文档显示**/

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  width: 100%;
}

.container40 {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0 auto; /* 添加此行，将左右外边距设置为自动 */
  padding: 20px;
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.directory {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  width: calc(30% - 20px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.directory:hover {
  transform: scale(1.05);
}

.directory h2 {
  margin: 0;
  font-size: 1.2em;
  color: #007BFF;
}

.directory ul {
  list-style-type: none;
  padding: 0;
  margin: 10px 0 0;
}

.directory li {
  margin: 5px 0;
  color: #555;
}

.directory a {
  text-decoration: none;
  color: #007BFF;
}

.directory a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .directory {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .directory {
    width: 100%;
  }
}


.training-course-container {
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.training-course-header h2 {
  font-size: 2em;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10px;
}

.training-course-header p {
  font-size: 1.2em;
  color: #666666;
  margin-bottom: 20px;
}

.style-three {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, #4caf50, #8bc34a);
  margin: 20px 0;
}

.training-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.course-item {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 1em;
  color: #444444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}