.nav {
  display: inline-flex;
  text-align: left;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  /*box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);*/
}

.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 0 6px;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: .3s;
}

.nav-comprofile{width: 72px; left: 40px; background-color: #eb3d00;}

.nav-culture{
	width: 72px;left: 149px;background-color: #eb3d00;
}

.nav-team{width: 72px;left: 253px;background-color: #eb3d00;}

.nav-honour{width: 72px;left: 362px;background-color: #eb3d00;}

.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}

.nav-item:not(.is-active):hover {
  color: #333;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: .4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav {
    overflow: auto;
  }
}

@media screen and (max-width:769px){#foot{position: fixed;bottom: 0;}}

#about-4 #history {height:640px; background-color:#68a6c1; overflow:hidden;max-width: 1680px;margin: 0 auto;}
#about-4 #history .viewport {position:relative;  margin:0 auto; width:1132px; height:100%; background:url(../img/companyInfo/p_4_1.jpg) no-repeat 2px 20px; overflow:visible;}
#about-4 #history .viewport .btn {display:none; position:absolute; top:50%; z-index:2; margin-top:-22px; width:45px; height:45px; background:no-repeat 0 0;}
#about-4 #history .viewport .prev {left: -57px;background-image:url(../img/companyInfo/btn_prev.png);}
#about-4 #history .viewport .next {right: -57px;background-image:url(../img/companyInfo/btn_next.png);}
#about-4 #history .viewport .wrap {position:relative; left:0; top:0; z-index:1; width:100%; height:100%;}
#about-4 #history .viewport .wrap .item {position:absolute; bottom:-100%; width:293px; background:url(../img/companyInfo/p_4_3.jpg) repeat-y 6px 0; -webkit-transition:bottom 500ms; transition:bottom 300ms;}
#about-4 #history .viewport .wrap .on {bottom:0;}
#about-4 #history .viewport .wrap .item div {padding:5px 16px 5px 29px ;background:url(../img/companyInfo/p_4_2.png) no-repeat 0 0;}
#about-4 #history .viewport .wrap .item div p {margin-bottom:15px; line-height:18px; color:#084d82;}
#about-4 #history .viewport .wrap .item div .year {display:block; margin:-10px 0 30px 0; font:lighter 48px "myriadsetpro" !important; color:#03589c;}
#about-4 .link {position:relative; z-index:2; padding:15px 0 20px 0; height:165px; background-color:#fff;}