body{background-color: #f5fbff;}
.banner .con{padding: 10px 80px; background: url(/img/web/down-banner.png) right top no-repeat; background-size: 520px auto;}
.banner .con .line{border-bottom: 3px solid #e0e6f0; padding-bottom: 40px;}
.banner h4.title{font-size: 14px; color: #616161; font-weight: normal; padding: 30px 0; display: inline-block; background: url(/img/web/small-triangle.png) right center no-repeat; padding-right: 20px;}
.banner .con dl{width: 100%; height: auto; padding: 10px 0; opacity: 0; transform-origin: 0 0 0; animation: flipInX .6s forwards;}
/* .banner .con dl:nth-child(2){animation-delay: 0s;} */
.banner .con dl:nth-child(3){animation-delay: 0.3s;}
.banner .con dl:nth-child(4){animation-delay: 0.6s;}
.banner .con dl:nth-child(5){animation-delay: 0.9s;}
.banner .con dl:nth-child(6){animation-delay: 1.2s;}
.banner dl dt{width: 80px; height: 94px; box-sizing: border-box; border-right: 3px solid #fff; border-top-left-radius: 10px; border-bottom-left-radius: 10px; float: left;}
.banner dl dt.dt1{background: url(/img/web/down/1.png) center no-repeat rgba(0, 94, 200, 0.65);}
.banner dl dt.dt2{background: url(/img/web/down/2.png) center no-repeat rgba(0, 94, 200, 0.5);}
.banner dl dt.dt3{background: url(/img/web/down/3.png) center no-repeat rgba(0, 94, 200, 0.65);}
.banner dl dt.dt4{background: url(/img/web/down/4.png) center no-repeat rgba(0, 94, 200, 0.5);}
.banner dl dt.dt5{background: url(/img/web/down/5.png) center no-repeat rgba(0, 94, 200, 0.65);}
.banner dl dd{width: calc(100% - 80px); float: left;}
.banner dd h2{font-family: 'cp'; font-size: 24px; color: #fff; line-height: 44px; padding-left: 16px; height: 0; min-width: 220px; width: auto; display: inline-block; border-bottom: 44px solid rgba(0, 94, 200, 0.65); border-right: 40px solid transparent;}
.banner dd .details{height: 48px; background: url(/img/web/down/three-points.png) calc(100% - 20px) center no-repeat rgba(0, 94, 200, 0.65); margin-top: 2px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; color: #fff; font-size: 16px; line-height: 48px; padding-left: 16px; box-sizing: border-box;}
.banner dd .details big{font-weight: 700;}
/* .banner .one dt{background-color: rgba(0, 94, 200, 0.65);} */
.banner .odd h2{border-bottom: 44px solid rgba(0, 94, 200, 0.65);}
.banner .odd .details{background-color: rgba(0, 94, 200, 0.65);}
/* .banner .two dt{background-color: rgba(0, 94, 200, 0.5);} */
.banner .even h2{border-bottom: 44px solid rgba(0, 94, 200, 0.5);}
.banner .even .details{background-color: rgba(0, 94, 200, 0.5);}

@media screen and (max-width: 700px) {
  .banner .con{padding: 10px;}
  .banner dd h2{min-width: 160px; font-size: 16px;}
  .banner dd .details{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: none;}
  .banner dd .details big{font-weight: normal;}
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

.bottom{width: 100%; height: auto;}
.bottom .container{padding-top: 140px; padding-bottom: 80px; position: relative;}
.bottom .robot{position: absolute; width: 128px; height: 128px; right: 160px; top: 20px; animation: heart 2.3s ease-in-out 1s infinite alternate;}
.bottom .con{display: table; text-align: center; width: 100%;}
.bottom .box{display: table-row; display: inline-block;}
.bottom .box .logo{float: left; margin-left: -90px; margin-top: -22px; width: 96px;}
.bottom .box a{border: 4px solid #d0e0f8; height: 75px; padding: 0 20px; box-sizing: border-box; border-width: 4px 0; background: #fff; display: block; text-decoration: none; float: left;}
.bottom .box a h4{font-size: 40px; font-family: 'age'; color: #599afc; text-align: center; padding: 0;}
.bottom .box a span{font-size: 12px; color: #555; text-align: center; display: block; padding: 0;}
.bottom .box a:hover{background: #599afc; border: 4px solid #599afc; border-width: 4px 0;}
.bottom .box a:hover > h4{color: #fff;}
.bottom .box a:hover > span{color: #fff;}
.bottom .container p{text-align: center; font-size: 14px; color: #565656; padding: 5px 0;}


@media screen and (max-width: 700px) {
  .bottom .robot{right: 0;}
}