body {
  font-size: 14px;
  background-color: #fff;
  color: #333; }

.container {
  max-width: 1920px;
  margin: 0 auto; }

.w {
  position: relative;
  width: 1366px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden; }

.comp {
  position: relative;
  overflow: hidden; }

.comtit {
  text-align: center;
  position: relative;
  font-size: 36px;
  line-height: 1;
  color: #3d295f;
  margin-top: 140px;
  margin-bottom: 105px; }
  .comtit::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -26px;
    width: 93px;
    height: 1px;
    margin-left: -46px;
    background-color: #3d295f; }

canvas {
  display: block;
  vertical-align: bottom; }

#particles-js {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0; }

.banner {
  background-color: #24092c;
  height: 650px; }
  .banner .logo {
    position: absolute;
    left: 28px;
    top: 28px;
    font-size: 0; }
  .banner h2 {
    margin-top: 280px;
    text-align: center;
    font-size: 36px;
    color: #fff; }

.p1 {
  color: #fff; }
  .p1 ul {
    float: left; }
  .p1 li {
    float: left;
    background-repeat: no-repeat;
    background-image: url("../images/icon.png");
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase; }
    .p1 li.h1 {
      height: 135px;
      line-height: 135px; }
    .p1 li.h2 {
      height: 270px;
      line-height: 1.6;
      padding: 0 10px; }
  .p1 .ul-1 {
    width: 25%;
    -webkit-animation: downtoup .5s ease both;
    -o-animation: downtoup .5s ease both;
    animation: downtoup .5s ease both; }
    .p1 .ul-1 .li-1 {
      width: 100%;
      background-color: #6161d7;
      background-position: 80px 34px;
      padding-left: 202px; }
    .p1 .ul-1 .li-2 {
      width: 50%;
      background-color: #4e2d86;
      text-align: center;
      background-position: center -4005px;
      padding-top: 210px; }
    .p1 .ul-1 .li-3 {
      width: 50%;
      background-color: #4e4ebd;
      text-align: center;
      background-position: center -1282px;
      padding-top: 210px; }
    .p1 .ul-1 .li-4 {
      width: 100%;
      background-position: 80px -4390px;
      padding-left: 202px;
      background-color: #5636b0; }
    .p1 .ul-1 .li-5 {
      width: 100%;
      background-position: 80px -4730px;
      padding-left: 202px;
      background-color: #4e2d86; }
  .p1 .ul-2 {
    width: 50%;
    -webkit-animation: downtoup .5s ease .2s both;
    -o-animation: downtoup .5s ease .2s both;
    animation: downtoup .5s ease .2s both; }
    .p1 .ul-2 .li-1 {
      width: 50%;
      background-color: #4e4ebd;
      background-position: 80px -300px;
      padding-left: 202px; }
    .p1 .ul-2 .li-2 {
      width: 50%;
      background-color: #5636b0;
      background-position: 80px -641px;
      padding-left: 202px; }
    .p1 .ul-2 .li-3 {
      width: 100%;
      background: #6a3db2 url("../images/logo1.png") center center no-repeat; }
    .p1 .ul-2 .li-4 {
      width: 50%;
      background-color: #682d90;
      background-position: 80px -1946px;
      padding-left: 202px;
      line-height: 270px; }
    .p1 .ul-2 .li-5 {
      width: 25%;
      background-color: #f39a63;
      text-align: center;
      background-position: center -2353px;
      padding-top: 110px;
      line-height: 1; }
    .p1 .ul-2 .li-6 {
      width: 25%;
      background-color: #e05d51;
      text-align: center;
      background-position: center -2691px;
      padding-top: 110px;
      line-height: 1; }
    .p1 .ul-2 .li-7 {
      width: 50%;
      background-color: #a13652;
      background-position: 80px -3364px;
      padding-left: 202px; }
  .p1 .ul-3 {
    width: 25%;
    -webkit-animation: downtoup .5s ease .4s both;
    -o-animation: downtoup .5s ease .4s both;
    animation: downtoup .5s ease .4s both; }
    .p1 .ul-3 .li-1 {
      width: 100%;
      background-color: #4e2d86;
      background-position: 80px -982px;
      padding-left: 202px; }
    .p1 .ul-3 .li-2 {
      width: 100%;
      background-color: #3d295f;
      background-position: 80px -1661px;
      padding-left: 202px; }
    .p1 .ul-3 .li-3 {
      width: 100%;
      background-color: #682d90;
      background-position: 80px -2959px;
      padding-left: 202px;
      line-height: 270px; }
    .p1 .ul-3 .li-4 {
      width: 100%;
      background-color: #3d295f;
      background-position: 80px -3704px;
      padding-left: 202px; }

.p2 {
  text-align: center;
  font-size: 0;
  background-color: #fff;
  padding-bottom: 200px; }
  .p2 li {
    opacity: 0;
    display: inline-block;
    width: 448px;
    height: 252px;
    margin: 0 7px;
    font-size: 18px;
    padding-top: 200px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 20px #f5f9fc;
    background-image: url("../images/icon2.png");
    background-repeat: no-repeat; }
  .p2 .li-1 {
    background-position: center 57px; }
  .p2 .li-2 {
    background-position: center -329px; }
  .p2 .li-3 {
    background-position: center -722px; }
  .p2.active .li-1 {
    -webkit-animation: downtoup .5s ease both;
    -o-animation: downtoup .5s ease both;
    animation: downtoup .5s ease both; }
  .p2.active .li-2 {
    -webkit-animation: downtoup .5s ease .2s both;
    -o-animation: downtoup .5s ease .2s both;
    animation: downtoup .5s ease .2s both; }
  .p2.active .li-3 {
    -webkit-animation: downtoup .5s ease .4s both;
    -o-animation: downtoup .5s ease .4s both;
    animation: downtoup .5s ease .4s both; }

.p3 {
  height: 625px;
  background: url("../images/p3-bg.jpg") center 0 no-repeat;
  color: #fff; }
  .p3 .comtit {
    color: #fff; }
    .p3 .comtit::before {
      background-color: #fff; }
  .p3 p {
    line-height: 1.8; }

.footer {
  padding: 70px 0;
  border-top: 1px solid #ccc;
  text-align: center;
  color: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .footer a {
    color: #000; }

@media screen and (max-width: 1366px) {
  .w {
    width: 100%; }

  .comtit {
    margin-top: 50px;
    margin-bottom: 50px; }

  .banner h2 {
    padding: 0 20px; }

  .p1 ul {
    float: none; }
    .p1 ul.ul-1, .p1 ul.ul-2, .p1 ul.ul-3 {
      width: 100%; }
  .p1 li {
    width: 100%; }
    .p1 li.h2 {
      height: 200px;
      padding: 0 10px;
      line-height: 1.5; }
  .p1 .ul-1 .li-2, .p1 .ul-1 .li-3, .p1 .ul-2 .li-1, .p1 .ul-2 .li-2, .p1 .ul-2 .li-4, .p1 .ul-2 .li-5, .p1 .ul-2 .li-6, .p1 .ul-2 .li-7 {
    padding-top: 130px; }
  .p1 .ul-2 .li-1, .p1 .ul-2 .li-2, .p1 .ul-2 .li-4, .p1 .ul-2 .li-5, .p1 .ul-2 .li-6, .p1 .ul-2 .li-7 {
    text-align: center;
    height: 200px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.5; }
  .p1 .ul-1 .li-1, .p1 .ul-1 .li-4, .p1 .ul-1 .li-5, .p1 .ul-3 .li-1, .p1 .ul-3 .li-2, .p1 .ul-3 .li-3, .p1 .ul-3 .li-4 {
    padding-left: 150px; }
  .p1 .ul-1 .li-1 {
    background-position: 68px 34px; }
  .p1 .ul-1 .li-2 {
    background-position: center -4041px; }
  .p1 .ul-1 .li-3 {
    background-position: center -1314px; }
  .p1 .ul-1 .li-4 {
    background-position: 68px -4390px; }
  .p1 .ul-1 .li-5 {
    background-position: 68px -4730px; }
  .p1 .ul-2 .li-1 {
    background-position: center -300px; }
  .p1 .ul-2 .li-2 {
    background-position: center -641px; }
  .p1 .ul-2 .li-3 {
    -webkit-background-size: contain;
    background-size: contain; }
  .p1 .ul-2 .li-4 {
    background-position: center -2005px; }
  .p1 .ul-2 .li-5, .p1 .ul-2 .li-6 {
    width: 50%; }
  .p1 .ul-2 .li-5 {
    background-position: center -2340px; }
  .p1 .ul-2 .li-6 {
    background-position: center -2675px; }
  .p1 .ul-2 .li-7 {
    background-position: center -3359px; }
  .p1 .ul-3 .li-1 {
    background-position: 68px -982px; }
  .p1 .ul-3 .li-2 {
    background-position: 68px -1661px; }
  .p1 .ul-3 .li-3 {
    height: 135px;
    line-height: 135px;
    background-position: 44px -3030px; }
  .p1 .ul-3 .li-4 {
    background-position: 68px -3704px; }

  .p2 {
    padding-bottom: 50px; }
    .p2 li {
      margin: 0 auto;
      width: 100%; }

  .p3 p {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

  .footer {
    padding: 30px 10px; } }
@keyframes downtoup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); } }

/*# sourceMappingURL=index.css.map */