/* 行业解决方案-转盘 */
.content-solution {
  position: relative; 
  min-width: 1200px;
  height: 1080px;
  background-position: center;
  background-size: cover;
  background-image: url('../images/bg-7@2x.png');
  background-color: #fff;
  transition: all 0.5s;
}
.content-solution-show-footer {
  margin-top: -225px;
}
.div-content-solution-title {
  position: absolute;
  top: 43px;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
  min-width: 240px;
  text-align: center;
  font-size: 40px;
  color: #3a416f;
}
.div-content-solution-subtitle {
  position: absolute;
  top: 107px;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
  min-width: 200px;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  color: #3a416f;
}
.container-round {
  position: relative;
  top: 120px;
  margin: 0 auto;
  width: 766px;
  height: 766px;
  transform: scale(0.8, 0.8);
}
.div-round-background {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.div-round-background-dial {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/dial.png');
}
.div-round-background-dial-green {
  background-image: url('../images/round-dial-green@2x.png');
}
.div-round-background-dial-blue {
  background-image: url('../images/round-dial-blue@2x.png');
}
.div-round-background-dial-yellow {
  background-image: url('../images/round-dial-yellow@2x.png');
}
.div-round-background-dial-purple {
  background-image: url('../images/round-dial-purple@2x.png');
}
.div-round-background-dial-animation {
  animation-name: rotationDial;
  animation-iteration-count: 1;
  animation-duration: 2s;
}
@keyframes rotationDial {
  0% {
    transform: rotateZ(0);
  }
  40% {
    transform: rotateZ(180deg);
  }
  to {
    transform: rotateZ(90deg);
  }
}
.div-round-main-default {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 558px;
  height: 558px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center;
  background-image: url('../images/round-blue@2x.png');
}
.div-round-main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 558px;
  height: 558px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center;
  background-image: url('../images/round-blue@2x.png');
}
.div-round-background-halo {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 778px;
  height: 778px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center;
  z-index: 0;
}
.div-round-background-halo-green {
  background-image: url('../images/round-background-green@2x.png');
}
.div-round-background-halo-blue {
  background-image: url('../images/round-background-blue@2x.png');
}
.div-round-background-halo-yellow {
  background-image: url('../images/round-background-yellow@2x.png');
}
.div-round-background-halo-purple {
  background-image: url('../images/round-background-purple@2x.png');
}
.div-round-background-halo-green,
.div-round-background-halo-blue,
.div-round-background-halo-yellow,
.div-round-background-halo-purple {
  transform: rotate3d(0, 1, 0, 90deg) !important;
}
.round-green {
  background-image: url('../images/round-green@2x.png');
}
.round-blue {
  background-image: url('../images/round-blue@2x.png');
}
.round-yellow {
  background-image: url('../images/round-yellow@2x.png');
}
.round-purple {
  background-image: url('../images/round-purple@2x.png');
}
.div-round-main-disappear {
  transform: rotate3d(0, 1, 0, -90deg) !important;
  transition: transform 0s;
}
.div-round-main-appear {
  transform: rotate3d(0, 1, 0, 0deg) !important;
  transition: transform 0.5s;
}
/* 行业解决方案-转盘内文字 */
.round-blue-title-main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 50px;
}
.round-blue-title {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translate(-54%);
  padding-left: 40px;
  margin-right: 24px;
  color: #ffffff;
  text-align: center;
  font-size: 28px;
  background-position: 9px 9px;
  background-repeat: no-repeat;
  background-image: url('../images/round-title-icon@2x.png');
}
.round-blue-content {
  position: absolute;
  top: 219px;
  left: 50%;
  width: 360px;
  color: #ffffff;
  font-size: 20px;
  transform: translate3d(-50%, 0, 0);
}
/* 行业解决方案-周边小圈 */
.div-round-rim-icon-small {
  position: absolute;
  /*width: 36px;*/
  height: 36px;
  background-repeat: no-repeat;
  background-size: cover;
}
.div-round-rim-icon-small-1 {
  top: 100px;
  left: 36px;
  width: 94px;
  height: 39px;
  background-image: url('../images/rim-icon-1@2x.png');
}
.div-round-rim-icon-small-2 {
  top: 292px;
  left: -54px;
  width: 94px;
  background-image: url('../images/rim-icon-2@2x.png');
}
.div-round-rim-icon-small-3 {
  top: 507px;
  left: -44px;
  width: 94px;
  background-image: url('../images/rim-icon-3@2x.png');
}
.div-round-rim-icon-small-4 {
  top: 696px;
  left: 121px;
  width: 92px;
  background-image: url('../images/rim-icon-4@2x.png');
}
.div-round-rim-icon-small-5 {
  top: 696px;
  left: 553px;
  width: 92px;
  background-image: url('../images/rim-icon-5@2x.png');
}
.div-round-rim-icon-small-6 {
  top: 507px;
  left: 716px;
  width: 89px;
  background-image: url('../images/rim-icon-6@2x.png');
}
.div-round-rim-icon-small-7 {
  top: 292px;
  left: 734px;
  width: 94px;
  background-image: url('../images/rim-icon-7@2x.png');
}
.div-round-rim-icon-small-8 {
  top: 102px;
  left: 633px;
  height: 38px;
  width: 92px;
  background-image: url('../images/rim-icon-8@2x.png');
}
/* 行业解决方案-动画后小圆变方向盘 */
.div-round-rim-icon-green {
  width: 61px;
  height: 62px;
  background-image: url('../images/rim-icon-green@2x.png');
}
.div-round-rim-icon-purple {
  width: 63px;
  height: 63px;
  background-image: url('../images/rim-icon-purple@2x.png');
}
.div-round-rim-icon-yellow {
  width: 61px;
  height: 62px;
  background-image: url('../images/rim-icon-yellow@2x.png');
}
.div-round-rim-icon-blue {
  width: 63px;
  height: 63px;
  background-image: url('../images/rim-icon-blue@2x.png');
}
/* 行业解决方案-周边文本标签 */
.div-round-rim-text-label-small {
  position: absolute;
  display: inline-block;
  padding-right: 5px;
  color: #323232;
  font-size: 24px;
}
.div-round-rim-text-label-small-1 {
  left: -94px;
  top: 84px;
}
.div-round-rim-text-label-small-2 {
  left: -167px;
  top: 294px;
}
.div-round-rim-text-label-small-3 {
  left: -149px;
  top: 509px;
}
.div-round-rim-text-label-small-4 {
  left: 16px;
  top: 728px;
}
.div-round-rim-text-label-small-5 {
  left: 659px;
  top: 721px;
}
.div-round-rim-text-label-small-6 {
  right: -154px;
  top: 509px;
}
.div-round-rim-text-label-small-7 {
  right: -184px;
  top: 294px;
}
.div-round-rim-text-label-small-8 {
  right: -71px;
  top: 86px;
}
/* 行业解决方案-周边文本标签变大 */
.div-round-rim-text-label-big {
  min-width: 150px;
  font-size: 36px;
  transition: all 0.5s;
}
.div-round-rim-text-label-big-1 {
  left: -114px;
  top: 91px;
  border-bottom: 1px solid #79d96c;
  color: #79d96c;
}
.div-round-rim-text-label-big-2 {
  left: -145px;
  top: 248px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #6766f2;
  color: #6766f2;
}
.div-round-rim-text-label-big-3 {
  left: -115px;
  top: 528px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #f0c42f;
  color: #f0c42f;
}
.div-round-rim-text-label-big-4 {
  left: 4px;
  top: 642px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #427cdf;
  color: #427cdf;
}
.div-round-rim-text-label-big-5 {
  left: 603px;
  top: 641px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #79d96c;
  color: #79d96c;
}
.div-round-rim-text-label-big-6 {
  right: -105px;
  top: 535px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #f0c42f;
  color: #f0c42f;
}
.div-round-rim-text-label-big-7 {
  right: -155px;
  top: 229px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #6766f2;
  color: #6766f2;
}
.div-round-rim-text-label-big-8 {
  right: -87px;
  top: 90px;
  border-bottom: 1px solid transparent;
  border-bottom-color: #427cdf;
  color: #427cdf;
}
/* 行业解决方案-周边文本标签指示线 */
.div-round-rim-text-line {
  position: absolute;
  width: 25px;
  height: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s;
}
.div-round-rim-text-line-1 {
  right: -75px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-1@2x.png');
}
.div-round-rim-text-line-2 {
  right: -75px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-2@2x.png');
}
.div-round-rim-text-line-3 {
  right: -75px;
  bottom: -2px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-3@2x.png');
}
.div-round-rim-text-line-4 {
  right: -75px;
  bottom: -2px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-4@2x.png');
}
.div-round-rim-text-line-5 {
  left: -75px;
  bottom: -2px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-5@2x.png');
}
.div-round-rim-text-line-6 {
  left: -75px;
  bottom: -2px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-6@2x.png');
}
.div-round-rim-text-line-7 {
  left: -75px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-7@2x.png');
}
.div-round-rim-text-line-8 {
  left: -75px;
  width: 75px;
  height: 50px;
  background-image: url('../images/rim-text-line-8@2x.png');
}

@media screen and (max-height: 920px) {
  .content-solution {
    height: 920px;
  }
  .container-round {
    top: 100px;
    transform: scale(0.8, 0.8);
  }
}
@media screen and (max-height: 877px) {
  .content-solution {
    height: 877px;
  }
  .container-round {
    top: 100px;
    transform: scale(0.8, 0.8);
  }
}
@media screen and (max-height: 768px) {
  .content-solution {
    height: 768px;
  }
  .container-round {
    top: 50px;
    transform: scale(0.7, 0.7);
  }
}