.login-container {
  position: relative;
  min-width: 1200px;
  width: 100%;
}

.why {
  background-color: #2066dd;
  height: 820px;
}
  
  .why-bg {
    max-width: 1574px;
    height: 820px;
    padding-top: 46px;
    margin: 0 auto;
    background: url('https://juheimgs.oss-cn-beijing.aliyuncs.com/cha/why-bg.png') no-repeat;
  }
    
    .why-main {
      width: 1200px;
      margin: 0 auto;
      /* padding: 0 20px; */
    }
     
      .why-left{
        margin-top: 208px;
        width: 384px;
        float: left;
      }
        
      .why-left .why-title {
          font-size: 60px;
          color: #fff;
          line-height: 80px;
          font-weight: bold;
        }
          
        .why-left .why-content {
          margin-top: 14px;
          font-size: 14px;
          line-height: 26px;
          color: #fff;
        }
          
        .why-left .why-but {
          display: block;
          margin-top: 40px;
          background-color: #fff;
          height: 48px;
          line-height: 48px;
          width: 148px;
          text-align: center;
          color: #2066DD;
          font-size: 16px;
          cursor: pointer;
          border-radius: 4px;
        }
          
      .why-right {
        float: right;
        width: 692px;
        height: 538px;
        margin-left: 50px;
        margin-top: 106px;
      }
        

.login-main {
  width: 1200px;
  margin: 0 auto;
}
  
  .scene {
    margin-top: 80px;
  }
    
    .scene-title {
      text-align: center;
    }
      
    .scene-title div {
        font-size: 40px;
        color: #333;
        line-height: 52px;
        margin-bottom: 20px;
      }
        
      .scene-title li {
        width: 40px;
        height: 6px;
        border-radius: 3px;
        background-color: #2066dd;
        margin: 0 auto;
      }
        
    .scene-main {
      padding: 0 24px;
      margin-top: 40px;
    }
     
    .scene-main  .scene-list {
        float: left;
        width: 336px;
        margin-right: 72px;
      }
        
      .scene-main  .scene-list  .list-icon {
          width: 72px;
          height: 72px;
          margin: 0 auto;
        }
         
        .scene-main  .scene-list  .list-title {
          font-size: 24px;
          color: #333;
          line-height: 30px;
          text-align: center;
          margin-top: 24px;
        }
          
        .scene-main  .scene-list  .list-content {
          font-size: 14px;
          color: #666;
          line-height: 24px;
          margin-top: 10px;
          text-align: center;
        }
          
        .scene-main  .scene-list:last-child {
        margin-right: 0;
      }
        

.trait {
  width: 1184px;
  margin: 80px auto 44px;
  position: relative;
}
  
  .trait-title {
    text-align: center;
  }
    
  .trait-title  div {
      font-size: 40px;
      color: #333;
      line-height: 52px;
      margin-bottom: 20px;
    }
      
    .trait-title  li {
      width: 40px;
      height: 6px;
      border-radius: 3px;
      background-color: #2066dd;
      margin: 0 auto;
    }
      
  .trait-bg {
    position: absolute;
    width: 1004px;
    height: 514px;
    left: 160px;
    top: 34px;
  }
    
  .trait-main {
    padding-right: 20px;
    position: relative;
    z-index: 10;
  }
    
    
    .trait-left {
      float: left;
      width: 402px;
      margin-top: 50px;
    }
      
      .trait-list {
        margin-bottom: 50px;
        cursor: pointer;
        opacity: .3;
        transition: opacity .4s
      }
        
      .trait-main .trait-left .trait-list .list-icon {
          height: 60px;
          width: 60px;
          float: left;
          margin-right: 20px;
        }
          
        .trait-main .list-main {
          float: left;
          width: 322px;
        }
          
        .trait-list .list-main  > div:first-child {
            color: #333;
            line-height: 30px;
            font-size: 24px;
            margin-bottom: 12px;
          }
            
          .trait-list .list-main  > div:last-child {
            font-size: 14px;
            line-height: 24px;
            color: #666;
          }
            
      .trait-list-op {
        opacity: 1;
      }
        
    .trait-right {
      float: right;
      width: 649px;
      height: 100%;
      position: relative;
    }
      
    .trait-right  img {
        position: absolute;
        top: 0;
        margin-top: 32px;
        opacity: 0;
        transition: opacity .4s;
      }
       
      .trait-right  .img01 {
        width: 649px;
        height: 382px;
      }
       
      .trait-right  .img02 {
        width: 649px;
        height: 438px;
      }
        
      .trait-right  .img03 {
        width: 648px;
        height: 422px;
      }
       
      .trait-right  .op {
        opacity: 1;
      }
        

.tool {
  width: 1184px;
  height: 292px;
  margin: 118px auto 40px;
  background: url('https://juheimgs.oss-cn-beijing.aliyuncs.com/cha/tool-bg.png') no-repeat;
}
  
  .tool-left {
    float: left;
    width: 200px;
    height: 216px;
    margin: 38px 48px 0 248px;
  }
    
  .tool-right {
    float: left;
    margin-top: 54px;
  }
    
    .tool-dec {
      font-size: 36px;
      color: #333;
      line-height: 50px;
      font-weight: bold;
      margin-bottom: 35px;
    }
      
    .tool-but {
      display: block;
      width: 148px;
      height: 48px;
      background: #2066DD;
      border-radius: 4px;
      line-height: 48px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }