* {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
.container {
  background-image: url(/images/public/bg2.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.container .info {
  width: 45%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.container .info_inner {
  width: 250px;
  background-color: rgba(0, 0, 0, 0.5);
}
.container .info_inner .title {
  text-align: center;
  background-color: #ee9539;
  padding: 20px;
}
.container .info_inner .title img {
  width: 150px;
}
.container .info_inner .title p {
  font-size: 12px;
}
.container .info_inner .content_inner {
  padding: 20px;
}
.container .info_inner .content_inner_text p {
  margin-bottom: 20px;
}
.container .info_inner .content_inner_contact {
  display: flex;
}
.container .info_inner .content_inner_contact img {
  width: calc(100% / 3);
}
.container .site {
  width: 55%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  transform: skewX(-15deg);
}
.container .site .item {
  min-width: 20%;
  height: 100vh;
  background-image: linear-gradient(to top, #ee9539 0%, rgba(255, 255, 255, 0.1) 1%);
  color: #ee9539;
  border-right: 2px solid rgba(0, 0, 0, 0.5);
  padding-top: 20px;
  position: relative;
  overflow: hidden;
}
.container .site .item a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.container .site .item p {
  transform: skewX(15deg);
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
}
.container .site .item img {
  transform: skewX(15deg);
  width: 150px;
  position: absolute;
  bottom: 10%;
  opacity: 0.5;
}
.container .site .item .img_1 {
  opacity: 0;
}
.container .site .item:hover {
  color: white;
  animation: liuguang 0.2s forwards;
}
.container .site .item:hover .img_1 {
  animation: liuguangimg 0.5s forwards;
}
@keyframes liuguang {
  0% {
    background-image: linear-gradient(to top, #ee9539 0%, rgba(255, 255, 255, 0.1) 1%);
  }
  1% {
    background-image: linear-gradient(to top, #ee9539 1%, rgba(255, 255, 255, 0.1) 2%);
  }
  2% {
    background-image: linear-gradient(to top, #ee9539 2%, rgba(255, 255, 255, 0.1) 3%);
  }
  3% {
    background-image: linear-gradient(to top, #ee9539 3%, rgba(255, 255, 255, 0.1) 4%);
  }
  4% {
    background-image: linear-gradient(to top, #ee9539 4%, rgba(255, 255, 255, 0.1) 5%);
  }
  5% {
    background-image: linear-gradient(to top, #ee9539 5%, rgba(255, 255, 255, 0.1) 6%);
  }
  6% {
    background-image: linear-gradient(to top, #ee9539 6%, rgba(255, 255, 255, 0.1) 7%);
  }
  7% {
    background-image: linear-gradient(to top, #ee9539 7%, rgba(255, 255, 255, 0.1) 8%);
  }
  8% {
    background-image: linear-gradient(to top, #ee9539 8%, rgba(255, 255, 255, 0.1) 9%);
  }
  9% {
    background-image: linear-gradient(to top, #ee9539 9%, rgba(255, 255, 255, 0.1) 10%);
  }
  10% {
    background-image: linear-gradient(to top, #ee9539 10%, rgba(255, 255, 255, 0.1) 11%);
  }
  11% {
    background-image: linear-gradient(to top, #ee9539 11%, rgba(255, 255, 255, 0.1) 12%);
  }
  12% {
    background-image: linear-gradient(to top, #ee9539 12%, rgba(255, 255, 255, 0.1) 13%);
  }
  13% {
    background-image: linear-gradient(to top, #ee9539 13%, rgba(255, 255, 255, 0.1) 14%);
  }
  14% {
    background-image: linear-gradient(to top, #ee9539 14%, rgba(255, 255, 255, 0.1) 15%);
  }
  15% {
    background-image: linear-gradient(to top, #ee9539 15%, rgba(255, 255, 255, 0.1) 16%);
  }
  16% {
    background-image: linear-gradient(to top, #ee9539 16%, rgba(255, 255, 255, 0.1) 17%);
  }
  17% {
    background-image: linear-gradient(to top, #ee9539 17%, rgba(255, 255, 255, 0.1) 18%);
  }
  18% {
    background-image: linear-gradient(to top, #ee9539 18%, rgba(255, 255, 255, 0.1) 19%);
  }
  19% {
    background-image: linear-gradient(to top, #ee9539 19%, rgba(255, 255, 255, 0.1) 20%);
  }
  20% {
    background-image: linear-gradient(to top, #ee9539 20%, rgba(255, 255, 255, 0.1) 21%);
  }
  21% {
    background-image: linear-gradient(to top, #ee9539 21%, rgba(255, 255, 255, 0.1) 22%);
  }
  22% {
    background-image: linear-gradient(to top, #ee9539 22%, rgba(255, 255, 255, 0.1) 23%);
  }
  23% {
    background-image: linear-gradient(to top, #ee9539 23%, rgba(255, 255, 255, 0.1) 24%);
  }
  24% {
    background-image: linear-gradient(to top, #ee9539 24%, rgba(255, 255, 255, 0.1) 25%);
  }
  25% {
    background-image: linear-gradient(to top, #ee9539 25%, rgba(255, 255, 255, 0.1) 26%);
  }
  26% {
    background-image: linear-gradient(to top, #ee9539 26%, rgba(255, 255, 255, 0.1) 27%);
  }
  27% {
    background-image: linear-gradient(to top, #ee9539 27%, rgba(255, 255, 255, 0.1) 28%);
  }
  28% {
    background-image: linear-gradient(to top, #ee9539 28%, rgba(255, 255, 255, 0.1) 29%);
  }
  29% {
    background-image: linear-gradient(to top, #ee9539 29%, rgba(255, 255, 255, 0.1) 30%);
  }
  30% {
    background-image: linear-gradient(to top, #ee9539 30%, rgba(255, 255, 255, 0.1) 31%);
  }
  31% {
    background-image: linear-gradient(to top, #ee9539 31%, rgba(255, 255, 255, 0.1) 32%);
  }
  32% {
    background-image: linear-gradient(to top, #ee9539 32%, rgba(255, 255, 255, 0.1) 33%);
  }
  33% {
    background-image: linear-gradient(to top, #ee9539 33%, rgba(255, 255, 255, 0.1) 34%);
  }
  34% {
    background-image: linear-gradient(to top, #ee9539 34%, rgba(255, 255, 255, 0.1) 35%);
  }
  35% {
    background-image: linear-gradient(to top, #ee9539 35%, rgba(255, 255, 255, 0.1) 36%);
  }
  36% {
    background-image: linear-gradient(to top, #ee9539 36%, rgba(255, 255, 255, 0.1) 37%);
  }
  37% {
    background-image: linear-gradient(to top, #ee9539 37%, rgba(255, 255, 255, 0.1) 38%);
  }
  38% {
    background-image: linear-gradient(to top, #ee9539 38%, rgba(255, 255, 255, 0.1) 39%);
  }
  39% {
    background-image: linear-gradient(to top, #ee9539 39%, rgba(255, 255, 255, 0.1) 40%);
  }
  40% {
    background-image: linear-gradient(to top, #ee9539 40%, rgba(255, 255, 255, 0.1) 41%);
  }
  41% {
    background-image: linear-gradient(to top, #ee9539 41%, rgba(255, 255, 255, 0.1) 42%);
  }
  42% {
    background-image: linear-gradient(to top, #ee9539 42%, rgba(255, 255, 255, 0.1) 43%);
  }
  43% {
    background-image: linear-gradient(to top, #ee9539 43%, rgba(255, 255, 255, 0.1) 44%);
  }
  44% {
    background-image: linear-gradient(to top, #ee9539 44%, rgba(255, 255, 255, 0.1) 45%);
  }
  45% {
    background-image: linear-gradient(to top, #ee9539 45%, rgba(255, 255, 255, 0.1) 46%);
  }
  46% {
    background-image: linear-gradient(to top, #ee9539 46%, rgba(255, 255, 255, 0.1) 47%);
  }
  47% {
    background-image: linear-gradient(to top, #ee9539 47%, rgba(255, 255, 255, 0.1) 48%);
  }
  48% {
    background-image: linear-gradient(to top, #ee9539 48%, rgba(255, 255, 255, 0.1) 49%);
  }
  49% {
    background-image: linear-gradient(to top, #ee9539 49%, rgba(255, 255, 255, 0.1) 50%);
  }
  50% {
    background-image: linear-gradient(to top, #ee9539 50%, rgba(255, 255, 255, 0.1) 51%);
  }
  51% {
    background-image: linear-gradient(to top, #ee9539 51%, rgba(255, 255, 255, 0.1) 52%);
  }
  52% {
    background-image: linear-gradient(to top, #ee9539 52%, rgba(255, 255, 255, 0.1) 53%);
  }
  53% {
    background-image: linear-gradient(to top, #ee9539 53%, rgba(255, 255, 255, 0.1) 54%);
  }
  54% {
    background-image: linear-gradient(to top, #ee9539 54%, rgba(255, 255, 255, 0.1) 55%);
  }
  55% {
    background-image: linear-gradient(to top, #ee9539 55%, rgba(255, 255, 255, 0.1) 56%);
  }
  56% {
    background-image: linear-gradient(to top, #ee9539 56%, rgba(255, 255, 255, 0.1) 57%);
  }
  57% {
    background-image: linear-gradient(to top, #ee9539 57%, rgba(255, 255, 255, 0.1) 58%);
  }
  58% {
    background-image: linear-gradient(to top, #ee9539 58%, rgba(255, 255, 255, 0.1) 59%);
  }
  59% {
    background-image: linear-gradient(to top, #ee9539 59%, rgba(255, 255, 255, 0.1) 60%);
  }
  60% {
    background-image: linear-gradient(to top, #ee9539 60%, rgba(255, 255, 255, 0.1) 61%);
  }
  61% {
    background-image: linear-gradient(to top, #ee9539 61%, rgba(255, 255, 255, 0.1) 62%);
  }
  62% {
    background-image: linear-gradient(to top, #ee9539 62%, rgba(255, 255, 255, 0.1) 63%);
  }
  63% {
    background-image: linear-gradient(to top, #ee9539 63%, rgba(255, 255, 255, 0.1) 64%);
  }
  64% {
    background-image: linear-gradient(to top, #ee9539 64%, rgba(255, 255, 255, 0.1) 65%);
  }
  65% {
    background-image: linear-gradient(to top, #ee9539 65%, rgba(255, 255, 255, 0.1) 66%);
  }
  66% {
    background-image: linear-gradient(to top, #ee9539 66%, rgba(255, 255, 255, 0.1) 67%);
  }
  67% {
    background-image: linear-gradient(to top, #ee9539 67%, rgba(255, 255, 255, 0.1) 68%);
  }
  68% {
    background-image: linear-gradient(to top, #ee9539 68%, rgba(255, 255, 255, 0.1) 69%);
  }
  69% {
    background-image: linear-gradient(to top, #ee9539 69%, rgba(255, 255, 255, 0.1) 70%);
  }
  70% {
    background-image: linear-gradient(to top, #ee9539 70%, rgba(255, 255, 255, 0.1) 71%);
  }
  71% {
    background-image: linear-gradient(to top, #ee9539 71%, rgba(255, 255, 255, 0.1) 72%);
  }
  72% {
    background-image: linear-gradient(to top, #ee9539 72%, rgba(255, 255, 255, 0.1) 73%);
  }
  73% {
    background-image: linear-gradient(to top, #ee9539 73%, rgba(255, 255, 255, 0.1) 74%);
  }
  74% {
    background-image: linear-gradient(to top, #ee9539 74%, rgba(255, 255, 255, 0.1) 75%);
  }
  75% {
    background-image: linear-gradient(to top, #ee9539 75%, rgba(255, 255, 255, 0.1) 76%);
  }
  76% {
    background-image: linear-gradient(to top, #ee9539 76%, rgba(255, 255, 255, 0.1) 77%);
  }
  77% {
    background-image: linear-gradient(to top, #ee9539 77%, rgba(255, 255, 255, 0.1) 78%);
  }
  78% {
    background-image: linear-gradient(to top, #ee9539 78%, rgba(255, 255, 255, 0.1) 79%);
  }
  79% {
    background-image: linear-gradient(to top, #ee9539 79%, rgba(255, 255, 255, 0.1) 80%);
  }
  80% {
    background-image: linear-gradient(to top, #ee9539 80%, rgba(255, 255, 255, 0.1) 81%);
  }
  81% {
    background-image: linear-gradient(to top, #ee9539 81%, rgba(255, 255, 255, 0.1) 82%);
  }
  82% {
    background-image: linear-gradient(to top, #ee9539 82%, rgba(255, 255, 255, 0.1) 83%);
  }
  83% {
    background-image: linear-gradient(to top, #ee9539 83%, rgba(255, 255, 255, 0.1) 84%);
  }
  84% {
    background-image: linear-gradient(to top, #ee9539 84%, rgba(255, 255, 255, 0.1) 85%);
  }
  85% {
    background-image: linear-gradient(to top, #ee9539 85%, rgba(255, 255, 255, 0.1) 86%);
  }
  86% {
    background-image: linear-gradient(to top, #ee9539 86%, rgba(255, 255, 255, 0.1) 87%);
  }
  87% {
    background-image: linear-gradient(to top, #ee9539 87%, rgba(255, 255, 255, 0.1) 88%);
  }
  88% {
    background-image: linear-gradient(to top, #ee9539 88%, rgba(255, 255, 255, 0.1) 89%);
  }
  89% {
    background-image: linear-gradient(to top, #ee9539 89%, rgba(255, 255, 255, 0.1) 90%);
  }
  90% {
    background-image: linear-gradient(to top, #ee9539 90%, rgba(255, 255, 255, 0.1) 91%);
  }
  91% {
    background-image: linear-gradient(to top, #ee9539 91%, rgba(255, 255, 255, 0.1) 92%);
  }
  92% {
    background-image: linear-gradient(to top, #ee9539 92%, rgba(255, 255, 255, 0.1) 93%);
  }
  93% {
    background-image: linear-gradient(to top, #ee9539 93%, rgba(255, 255, 255, 0.1) 94%);
  }
  94% {
    background-image: linear-gradient(to top, #ee9539 94%, rgba(255, 255, 255, 0.1) 95%);
  }
  95% {
    background-image: linear-gradient(to top, #ee9539 95%, rgba(255, 255, 255, 0.1) 96%);
  }
  96% {
    background-image: linear-gradient(to top, #ee9539 96%, rgba(255, 255, 255, 0.1) 97%);
  }
  97% {
    background-image: linear-gradient(to top, #ee9539 97%, rgba(255, 255, 255, 0.1) 98%);
  }
  98% {
    background-image: linear-gradient(to top, #ee9539 98%, rgba(255, 255, 255, 0.1) 99%);
  }
  99% {
    background-image: linear-gradient(to top, #ee9539 99%, rgba(255, 255, 255, 0.1) 100%);
  }
  100% {
    background-image: linear-gradient(to top, #ee9539 100%, rgba(255, 255, 255, 0.1) 101%);
  }
}
@keyframes liuguangimg {
  0% {
    opacity: 0%;
  }
  1% {
    opacity: 1%;
  }
  2% {
    opacity: 2%;
  }
  3% {
    opacity: 3%;
  }
  4% {
    opacity: 4%;
  }
  5% {
    opacity: 5%;
  }
  6% {
    opacity: 6%;
  }
  7% {
    opacity: 7%;
  }
  8% {
    opacity: 8%;
  }
  9% {
    opacity: 9%;
  }
  10% {
    opacity: 10%;
  }
  11% {
    opacity: 11%;
  }
  12% {
    opacity: 12%;
  }
  13% {
    opacity: 13%;
  }
  14% {
    opacity: 14%;
  }
  15% {
    opacity: 15%;
  }
  16% {
    opacity: 16%;
  }
  17% {
    opacity: 17%;
  }
  18% {
    opacity: 18%;
  }
  19% {
    opacity: 19%;
  }
  20% {
    opacity: 20%;
  }
  21% {
    opacity: 21%;
  }
  22% {
    opacity: 22%;
  }
  23% {
    opacity: 23%;
  }
  24% {
    opacity: 24%;
  }
  25% {
    opacity: 25%;
  }
  26% {
    opacity: 26%;
  }
  27% {
    opacity: 27%;
  }
  28% {
    opacity: 28%;
  }
  29% {
    opacity: 29%;
  }
  30% {
    opacity: 30%;
  }
  31% {
    opacity: 31%;
  }
  32% {
    opacity: 32%;
  }
  33% {
    opacity: 33%;
  }
  34% {
    opacity: 34%;
  }
  35% {
    opacity: 35%;
  }
  36% {
    opacity: 36%;
  }
  37% {
    opacity: 37%;
  }
  38% {
    opacity: 38%;
  }
  39% {
    opacity: 39%;
  }
  40% {
    opacity: 40%;
  }
  41% {
    opacity: 41%;
  }
  42% {
    opacity: 42%;
  }
  43% {
    opacity: 43%;
  }
  44% {
    opacity: 44%;
  }
  45% {
    opacity: 45%;
  }
  46% {
    opacity: 46%;
  }
  47% {
    opacity: 47%;
  }
  48% {
    opacity: 48%;
  }
  49% {
    opacity: 49%;
  }
  50% {
    opacity: 50%;
  }
  51% {
    opacity: 51%;
  }
  52% {
    opacity: 52%;
  }
  53% {
    opacity: 53%;
  }
  54% {
    opacity: 54%;
  }
  55% {
    opacity: 55%;
  }
  56% {
    opacity: 56%;
  }
  57% {
    opacity: 57%;
  }
  58% {
    opacity: 58%;
  }
  59% {
    opacity: 59%;
  }
  60% {
    opacity: 60%;
  }
  61% {
    opacity: 61%;
  }
  62% {
    opacity: 62%;
  }
  63% {
    opacity: 63%;
  }
  64% {
    opacity: 64%;
  }
  65% {
    opacity: 65%;
  }
  66% {
    opacity: 66%;
  }
  67% {
    opacity: 67%;
  }
  68% {
    opacity: 68%;
  }
  69% {
    opacity: 69%;
  }
  70% {
    opacity: 70%;
  }
  71% {
    opacity: 71%;
  }
  72% {
    opacity: 72%;
  }
  73% {
    opacity: 73%;
  }
  74% {
    opacity: 74%;
  }
  75% {
    opacity: 75%;
  }
  76% {
    opacity: 76%;
  }
  77% {
    opacity: 77%;
  }
  78% {
    opacity: 78%;
  }
  79% {
    opacity: 79%;
  }
  80% {
    opacity: 80%;
  }
  81% {
    opacity: 81%;
  }
  82% {
    opacity: 82%;
  }
  83% {
    opacity: 83%;
  }
  84% {
    opacity: 84%;
  }
  85% {
    opacity: 85%;
  }
  86% {
    opacity: 86%;
  }
  87% {
    opacity: 87%;
  }
  88% {
    opacity: 88%;
  }
  89% {
    opacity: 89%;
  }
  90% {
    opacity: 90%;
  }
  91% {
    opacity: 91%;
  }
  92% {
    opacity: 92%;
  }
  93% {
    opacity: 93%;
  }
  94% {
    opacity: 94%;
  }
  95% {
    opacity: 95%;
  }
  96% {
    opacity: 96%;
  }
  97% {
    opacity: 97%;
  }
  98% {
    opacity: 98%;
  }
  99% {
    opacity: 99%;
  }
  100% {
    opacity: 100%;
  }
}
@media screen and (max-width: 750px) {
  .container {
    height: auto;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .container .info,
  .container .site {
    width: 100%;
  }
  .container .site {
    transform: skewX(0);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    box-sizing: border-box;
  }
  .container .site .item {
    width: 100%;
    height: 136px;
    border-right: 0px;
  }
  .container .site .item p,
  .container .site .item img {
    transform: skewX(0);
    font-size: 16px;
    text-align: right;
    padding-right: 10%;
  }
}