body {
  background-color: #EFEFEF;
}

.page-img {
  width: 100%;
  height: 600px;
}

.page-img img {
  width: 100%;
  height: 100%;

}

.about-top {
  font-size: 0;
  float: left;
  width: 100%;
  height: 50px;
  padding: 0rem 5rem;
}

.about-top .left {
  float: left;
  height: 100%;
  color: #666666;
  font-weight: 300;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.about-top .left a {
  color: #666666;
}

.about-top .left a:hover {
  color: #2054A7;
}

.about-top ul {
  float: right;
}

.about-top ul li {
  float: left;
  width: 130px;
  height: 50px;
  /* transition: all 0.5s linear; */
  cursor: pointer;
}

.about-top ul li a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222222;
  font-size: 16px;
}

.about-top ul .action {
  background: #2054A7;
}

.about-top ul .action a {
  color: #fff;
}

.about-top ul li:hover,
.about-top ul li:hover a {
  background: #2054A7;
  color: #fff;
}

.corporation {
  float: left;
  width: 100%;
  padding: 2rem 5rem;
  background: #fff;
}

.corporation .left {
  float: left;
  width: 48%;
  height: 470px;
}

.corporation .left img {
  width: 100%;
  height: 100%;
}

.corporation .right {
  float: right;
  width: 48%;
}

.corporation .right .top {
  color: #333333;
  font-weight: 700;
  font-size: 30px;
  line-height: 50px;
}

.corporation .right .title {
  color: #E52E2E;
  font-weight: 400;
  font-size: 14px;
  line-height: 55px;
}

.corporation .right .des {}

.corporation .right .des p {
  color: #222;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  padding-bottom: 25px;
}

.culture {
  float: left;
  width: 100%;
  padding: 2rem 5rem 3rem 5rem;
  background: #fff;
}

.culture-top {
  width: 100%;
}

.culture-top h1 {
  text-align: center;
}

.culture-top div {
  width: 60px;
  height: 6px;
  background: #2054A7;
  margin: auto;
  margin-top: 5px;
}

.culture-item {
  position: relative;
}

.culture-item .culture-line {
  width: 100%;
  height: 0px;
  /* background: red; */
  border-bottom: 1px dashed #A5AFBB;
  position: absolute;
  top: 175px;

}

.culture ul {
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.culture ul li {
  float: left;
  width: 187px;
  transition: all 0.5s ease-out 0s;
  margin: 0 40px;
  cursor: pointer;
}

.culture ul .img {
  width: 187px;
  height: 187px;
  background-image: url('../assets/aboutUs-02.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-out 0s;
  position: relative;
  z-index: 9;
}

.culture ul .img img {
  width: 80px;
  height: 80px;

}

.culture ul li h3 {
  text-align: center;
  line-height: 60px;
}

.culture ul li .des {
  color: #666666;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
}

.culture ul li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.culture ul li:hover .img {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.culture ul li:hover .des,
.culture ul li:hover h3 {
  color: #0063ED;
}

.culture-btn {
  padding: 45px 0 0px 0;
}

.culture-btn div {
  width: 49%;
  height: 340px;
  overflow: hidden;
}

.culture-btn div img {
  width: 100%;
  height: 100%;
  transition: all 0.5s linear;
}

.culture-btn .left {
  float: left;
}

.culture-btn .right {
  float: right;
}

.culture-btn div:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.aptitude {
  float: left;
  width: 100%;
  padding: 2rem 9rem 3rem 9rem;
}

.aptitude .box {
  width: 100%;
  padding-top: 47px;
}

.aptitude .box .box-left {
  float: left;
  width: 35%;
  height: 537px;
  border-radius: 4px;
  box-shadow: 2px 4px 3px 3px rgba(75, 109, 156, 0.16);
  background: #fff;
  padding: 30px;
}

.aptitude .box .box-left .img {
  width: 100%;
  height: 315px;
  overflow: hidden;
}

.aptitude .box .box-left .img img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transition: all 0.5s linear;
}

.aptitude .box .box-left .img:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}

.aptitude .box .box-left h2 {
  color: #222;
  text-align: center;
  padding: 40px 0 20px 0;
}

.aptitude .box .box-left .btn {
  color: #222;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}

.aptitude .box .box-left .btn .btn-l {
  color: #666666;
  font-weight: 400;
}

.aptitude .box .box-left .btn .btn-r {
  color: #666666;
  font-size: 16px;
  font-weight: 400;
}

.box-right {
  float: right;
  width: 65%;
  height: 537px;
  padding-left: 6rem;
  overflow: auto;
}

/* 设置滚动条的样式 */
/* // 可配置项
// 滚动条样式，设置整个滚动区域的样式，设置轨道和滑块统一厚度,包含按钮区域
.div-box::-webkit-scrollbar{}            
// 滑块的样式，支持渐变和背景图片填充。
.div-box::-webkit-scrollbar-thumb{}       
// 外轨道样式，支持渐变和背景图片填充。不包含按钮区域
.div-box::-webkit-scrollbar-track{}       
// 两端按钮样式
.div-box::-webkit-scrollbar-button{}     
// 交叉处边角样式 
.div-box::-webkit-scrollbar-corner{}      
// 内轨道样式。不包含按钮区域与外轨道大致相同
.div-box::-webkit-scrollbar-track-piece   

 ::-webkit-scrollbar的width必须设置，否则是0看不到。背景什么的可以不设置

.div-box::-webkit-scrollbar-button:start:decrement {}  // 开始按钮样式
.div-box::-webkit-scrollbar-button:end:increment {}    // 结束按钮样式 */
.box-right::-webkit-scrollbar {
  width: 6px;
  height: 537px;
}

.box-right::-webkit-scrollbar-track-piece {
  background: #DCDBDB;
  border-radius: 10px;
}

.box-right::-webkit-scrollbar-thumb {
  background-color: #2054A7;
  border-radius: 10px;
}

.box-right::-webkit-scrollbar-button {
  display: none;
}

.box-right::-webkit-scrollbar {
  width: 6px;
  height: 537px;
}

.box-right::-webkit-scrollbar-track-piece {
  background: #DCDBDB;
  border-radius: 10px;
}

.box-right::-webkit-scrollbar-thumb {
  background-color: #2054A7;
  border-radius: 10px;
}

.box-right::-webkit-scrollbar-button {
  display: none;
}

/*  */
.box-right ul {}

.box-right ul li {
  float: left;
  width: 40%;
  height: 130px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px rgba(75, 109, 156, 0.16);
  margin: 0 4rem 4rem 0;
  display: flex;
  align-items: center;
  padding: 0 25px;
  cursor: pointer;
  position: relative;
}

.box-right ul li .item {
  padding-left: 17px;
  color: #555555;

}

.box-right ul li .item p {
  line-height: 50px;
  font-size: 16px;
}

.box-right ul li:hover .item {
  color: #2054A7;
}

.box-right ul .action {
  color: #2054A7;
}

.box-right ul .action .item {
  color: #2054A7;
}

.box-right ul .action:after {
  width: 2px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 1px;
  content: '';
  background: #2054A7;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.box-right ul li:after {
  width: 2px;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 1px;
  content: '';
  background: #2054A7;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.box-right ul li:hover:after {
  height: 60px;
}

.strength {
  float: left;
  width: 100%;
  height: 310px;
  background-image: url('../assets/aboutUs-11.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.strength .top {
  color: #FFFFFF;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  padding-top: 50px;
}

.strength .box-item {
  float: left;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strength .box-item .line {
  float: left;
  width: 2px;
  height: 45px;
  background: #fff;
  margin: 0 6rem;
}

.strength .item {
  float: left;
  color: #fff;
}

.strength .item .left {
  font-weight: 600;
  font-size: 30px;
}

.strength .item .left span {
  font-weight: 400;
  font-size: 15px;
}

.strength .item .right {
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
}

.clearfix {}

.clearfix .suspension {
  width: 60px;
  position: fixed;
  right: 10px;
  bottom: 150px;
  z-index: 999;
  min-height: 60px;
  border-radius: 60px;
  background: #fff;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .25);
}

.clearfix .suspension li {
  position: relative;
  width: 60px;
  height: 60px;
  margin-top: 3px;
}
.clearfix .suspension li .to-top{
  background-position: 0px -96px;
  cursor: pointer;
  display: block;
  width: 48px;
  height: 48px;
  margin: 6px;
  float: left;
  border-radius: 40px;
  background-repeat: no-repeat;
  /* background-position: center; */
  background-image: url('https://www.szhulian.com/Public/home/images/suspend_icon.png');
}