@charset "utf-8";
.banner {
  width: 100%;
  background: #0a2240;
}

.banner img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.case-nav{
  margin: 60px auto 40px;
}
.case-nav a{
  width: 188px;
  height: 116px;
  border: solid 2px #eeeeee;
  text-align: center;
  font-size: 20px;
  color: #000000;
  position: relative;
}
.case-nav a i{
  display: block;
  margin: 30px auto 20px;
  font-size: 32px;
}
.case-nav a span{
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translate(-50%,0);
  font-size: 24px;
  display: none;
}
.case-nav a.active span{
  display: block;
}
.case-nav1 i{
  color: #cd2525;
}
.case-nav2 i{
  color: #e77b2d;
}
.case-nav3 i{
  color: #003577;
}
.case-nav4 i{
  color: #319f84;
}
.case-nav5 i{
  color: #f4ac00;
}
.case-nav6 i{
  color: #3a67a2;
}
.case-nav1 span{
  color: #cd2525;
}
.case-nav2 span{
  color: #e77b2d;
}
.case-nav3 span{
  color: #e3af10;
}
.case-nav4 span{
  color: #319f84;
}
.case-nav5 span{
  color: #3b67a0;
}
.case-nav6 span{
  color: #0a2240;
}

a.case-nav1:hover,a.case-nav1.active{
  background: #cd2525;
  border-color: #cd2525;
  color: #fff;
}
a.case-nav1:hover i,a.case-nav1.active i{
  color: #fff;
}

a.case-nav2:hover,a.case-nav2.active{
  background: #e77b2d;
  border-color: #e77b2d;
  color: #fff;
}
a.case-nav2:hover i,a.case-nav2.active i{
  color: #fff;
}
a.case-nav3:hover,a.case-nav3.active{
  background: #e3af10;
  border-color: #e3af10;
  color: #fff;
}
a.case-nav3:hover i,a.case-nav3.active i{
  color: #fff;
}
a.case-nav4:hover,a.case-nav4.active{
  background: #319f84;
  border-color: #319f84;
  color: #fff;
}
a.case-nav4:hover i,a.case-nav4.active i{
  color: #fff;
}

a.case-nav5:hover,a.case-nav5.active{
  background: #3b67a0;
  border-color: #3b67a0;
  color: #fff;
}
a.case-nav5:hover i,a.case-nav5.active i{
  color: #fff;
}

a.case-nav6:hover,a.case-nav6.active{
  background: #0a2240;
  border-color: #0a2240;
  color: #fff;
}
a.case-nav6:hover i,a.case-nav6.active i{
  color: #fff;
}
.case-item div{
  position: relative;
}

a.play1{
  position: absolute;
  top: 375px;
  left: 160px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #cd2525;
  box-shadow: 0px 0px 6px 0px
  rgba(205, 37, 37, 0.4);
  border-radius: 4px;
  border: solid 1px #e75b5b;
}
a.play2{
  position: absolute;
  top: 410px;
  left: 135px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #e77b2d;
  box-shadow: 0px 0px 6px 0px
  rgba(231, 123, 45, 0.4);
  border-radius: 4px;
  border: solid 1px #fcab71;
}
a.play3{
  position: absolute;
  top: 410px;
  left: 855px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #e77b2d;
  box-shadow: 0px 0px 6px 0px
  rgba(231, 123, 45, 0.4);
  border-radius: 4px;
  border: solid 1px #fcab71;
}
a.play4{
  position: absolute;
  top: 465px;
  left: 135px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #e77b2d;
  box-shadow: 0px 0px 6px 0px
  rgba(231, 123, 45, 0.4);
  border-radius: 4px;
  border: solid 1px #fcab71;
}
a.play5{
  position: absolute;
  top: 384px;
  left: 87px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #e3af10;
  box-shadow: 0px 0px 6px 0px
  rgba(105, 79, 0, 0.8);
  border-radius: 4px;
  border: solid 1px #f9cd48;
}
a.play6{
  position: absolute;
  top: 405px;
  left: 130px;
  width: 206px;
  height: 57px;
  color: #fff;
  padding: 0 35px;
  background-color: #3b67a0;
  box-shadow: 0px 0px 6px 0px
  rgba(59, 103, 160, 0.4);
  border-radius: 4px;
  border: solid 1px #598cce;
}
.case-item div a i{
  font-size: 36px;
}
.case-item div a h3{
  text-align: center;
}
.case-item div a h3 span{
  font-weight: normal;
  font-size: 14px;
}
.case-item div a:hover{
  animation:mymove 5s infinite;
}
@keyframes mymove
{
  0%{
    transform: scale(1);  /*开始为原始大小*/
  }
  25%{
    transform: scale(1.1); /*放大1.1倍*/
  }
  50%{
    transform: scale(1);
  }
  75%{
    transform: scale(1.1);
  }

}

.right-nav{
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translate(-50%,-50%);
  z-index: 99;
}
.right-nav div{
  width: 120px;
  height: 70px;
  padding: 10px 0 10px 30px;
  position: relative;
}
.right-nav div:before{
  position: absolute;
  top: 10px;
  left: 10px;
  content: '';
  width: 1px;
  height: 70px;
  background: #0a2240;
}
.right-nav div:after{
  position: absolute;
  top: 30px;
  left: 4px;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #ffffff;
  border: solid 1px #0a2240;
}
.right-nav div a{
  display: block;
  width: 100%;
  height: 50px;
  line-height: 40px;
  padding: 5px 10px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 4px;
  border: solid 1px #0a2240;
}
.right-nav div a.long{
  line-height: 20px;
}

.right-nav div.right-nav-item1.active a{
  background: #cd2525;
  color: #fff;
  border-color: #cd2525;
}
.right-nav div.right-nav-item1.active:after{
  background: #cd2525;
  border-color: #cd2525;
}
.right-nav div.right-nav-item2.active a{
  background: #e77b2d;
  color: #fff;
  border-color: #e77b2d;
}
.right-nav div.right-nav-item2.active:after{
  background: #e77b2d;
  border-color: #e77b2d;
}
.right-nav div.right-nav-item3.active a{
  background: #003577;
  color: #fff;
  border-color: #003577;
}
.right-nav div.right-nav-item3.active:after{
  background: #003577;
  border-color: #003577;
}
.right-nav div.right-nav-item4.active a{
  background: #319f84;
  color: #fff;
  border-color: #319f84;
}
.right-nav div.right-nav-item4.active:after{
  background: #319f84;
  border-color: #319f84;
}
.right-nav div.right-nav-item5.active a{
  background: #f4ac00;
  color: #fff;
  border-color: #f4ac00;
}
.right-nav div.right-nav-item5.active:after{
  background: #f4ac00;
  border-color: #f4ac00;
}
.right-nav div.right-nav-item6.active a{
  background: #3a67a0;
  color: #fff;
  border-color: #3a67a0;
}
.right-nav div.right-nav-item6.active:after{
  background: #3a67a0;
  border-color: #3a67a0;
}
.right-nav-item7 a{
  padding: 0!important;
  overflow: hidden;
}
.right-nav-item7 a p{
  height: 24px;
  line-height: 27px;
  text-align: center;
}
.right-nav-item7 a p i{
  color: #0a2240;
  font-size: 18px;
}
.right-nav-item7 a p.to-top{
  line-height: 24px;
  color: #fff;
  background: #0a2240;
}
.shade{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0,0,0,.5);
}
.shade-content{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 1200px;
  z-index: 102;
}
.shade-content h3{
  text-align: center;
  font-size: 22px;
  color: #fff;
}
.shade-content video{
  display: block;
  max-width: 800px;
}