.dingtalk-nav {
  position        : sticky;
  top             : 0;
  left            : 0;
  width           : 100%;
  box-shadow      : 0 0 1px 0 rgba(0, 0, 0, .5);
  background-color: white;
  z-index         : 999;
}

.dingtalk-nav ul {
  margin     : auto;
  max-width  : 1200px;
  display    : flex;
  align-items: center;
}

.dingtalk-nav ul li {
  text-align : center;
  line-height: 60px;
  flex       : 1;
  position   : relative;
}

.dingtalk-nav ul li>a {
  cursor     : pointer;
  font-weight: bold;
}

.dingtalk-nav ul li.active::after {
  content      : '';
  position     : absolute;
  bottom       : 0;
  width        : 100px;
  border-bottom: 3px solid #f23d49;
  left         : 50%;
  transform    : translateX(-50%);
}

.dingtalk-box {
  /* padding: 0 0 20px; */
}

.dingtalk-box>h1 {
  text-align : center;
  font-size  : 28px;
  color      : #383838;
  font-weight: bold;
  margin-top : 80px;
}

.dingtalk-box>h2 {
  text-align : center;
  font-size  : 18px;
  color      : #383838;
  font-weight: 500;
  margin-top : 20px;
}

.dingtalk-box .detail-btn {
  font-size       : 16px;
  line-height     : 2;
  background-color: #f23d49;
  border-radius   : 4px;
  display         : inline-block;
  padding         : 0 15px;
  color           : white;
}

.dingtalk-zy,
.dingtalk-zy2,
.dingtalk-zs {
  max-width  : 1200px;
  display    : flex;
  margin     : 60px auto auto;
  align-items: center;
}

.dingtalk-zy2 {
  max-width    : 1000px;
  margin-bottom: 40px;
}

.dingtalk-zy .dingtalk-zy-left,
.dingtalk-zy2 .dingtalk-zy2-left {
  flex        : 1;
  margin-right: 20px;
}

.dingtalk-zy .dingtalk-zy-left ol,
.dingtalk-zy2 .dingtalk-zy2-left ol {
  display    : flex;
  align-items: center;
  flex-flow  : wrap;
}

.dingtalk-zy .dingtalk-zy-left ol>li,
.dingtalk-zy2 .dingtalk-zy2-left ol>li {
  font-size  : 18px;
  color      : #383838;
  line-height: 3;
  width      : 50%;
}

.dingtalk-zy .dingtalk-zy-left ol>li::before,
.dingtalk-zy2 .dingtalk-zy2-left ol>li::before {
  color       : #f23d49;
  margin-right: 10px;
}

.dingtalk-zy .dingtalk-zy-right {
  width: 580px;
  flex : none;
}

.dingtalk-zy .dingtalk-zy-right img {
  cursor: pointer;
  width : 100%;
}

.dingtalk-zs .dingtalk-zs-left {
  width       : 60%;
  min-width   : 60%;
  margin-right: 30px;
}

.dingtalk-zs .dingtalk-zs-left img {
  width: 100%;
}

.dingtalk-zs .dingtalk-zs-right>p {
  font-size     : 18px;
  color         : #383838;
  line-height   : 2.2;
  font-weight   : 400;
  letter-spacing: 1px;
  margin-top    : 20px;
}


.dingtalk-zy2 .dingtalk-zy2-left ol>li {
  width: 100%;
}

.dingtalk-zy2 .dingtalk-zy2-right {
  flex: 1;
}

.dingtalk-zy2 .dingtalk-zy2-right ul {
  display        : flex;
  align-items    : center;
  flex-flow      : wrap;
  justify-content: center;
}

.dingtalk-zy2 .dingtalk-zy2-right ul li {
  width  : 50%;
  padding: 15px;
}

.dingtalk-zy2 .dingtalk-zy2-right ul li .li-content {
  width        : 190px;
  margin       : auto;
  text-align   : center;
  padding      : 15px;
  box-shadow   : 0 0 1px 0 rgba(0, 0, 0, .5);
  border-radius: 4px;

}

.dingtalk-zy2 .dingtalk-zy2-right ul li .li-content img {
  width: 60px;
}

.dingtalk-zy2 .dingtalk-zy2-right ul li .li-content h1 {
  font-size  : 22px;
  color      : #383838;
  font-weight: bold;
  margin-top : 20px;
}

.dingtalk-zy2 .dingtalk-zy2-right ul li .li-content p {
  font-size  : 16px;
  color      : #656464;
  font-weight: 400;
  line-height: 1.8;
  margin-top : 10px;
}