/* css代码 */


body {
   background-color: #f3f3f3;
}

.shortcut {
   position: fixed;
   top: 0;
   width: 100%;
   height: 81px;
   background-color: #333;
}

.shortcut .wrapper {

   background-color: #333;
}



.shortcut ul {
   display: flex;
   height: 81px;
   line-height: 81px;
   justify-content: space-between;
   font-size: 16px;

}

a:hover {
   color: skyblue;
}

h1 {
   font-size: 0px;
}

.shortcut li:nth-child(1) {
   position: relative;
   width: 123px;
   background-image: url(../imgs/logo2.png);

}

.shortcut li:nth-child(1) a {
   display: inline-block;
   width: 123px;
   height: 81px;
}

.hidbox0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 123px;
   height: 81px;
   background-color: rgba(255, 255, 255, 0);


}

.hb0Antf {
   animation: antf 3s steps(5, jump-start) backwards;
}

/* 平移动画 */
@keyframes antf {
   0% {
      left: 108px;
   }

   25% {
      left: 200px;
   }

   50% {
      left: 300px;
   }

   75% {
      left: 400px;
   }

   100% {
      left: 500px;
   }
}


.hidbox1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 123px;
   height: 81px;
   background-color: rgba(0, 0, 0, 0);

}



.shortcut li:nth-child(2) {
   margin: auto 108px auto 12px;
   color: green;
   font-size: 18px;
   font-family: "楷体";
}

.shortcut li:nth-child(2) span {
   color: blue;
   font-size: 32px;
}

.shortcut li:nth-child(2) p {
   display: inline;
   color: red;
}

.shortcut li:nth-child(3) a {
   width: 200px;
   padding: 0 7px;
   border-right: 1px solid #999;

}

.shortcut li:nth-child(4) a {
   padding: 0 7px;
   border-right: 1px solid #999;
}

/* 图集 */
.shortcut li:nth-child(5) a {
   display: inline-block;
   position: relative;
   padding: 0 24px 0 7px;
}

.shortcut li:nth-child(5) a .icon-fabulous {
   display: inline-block;
   transition: all 0.5s;
}

.shortcut li:nth-child(5) a:hover .icon-fabulous {
   transform: rotate(-180deg);
   color: red;
}

.hidlist {
   position: absolute;
   top: 81px;
   z-index: -2;
   padding-top: 7px;
   width: 99px;
   height: 100px;
   color: #333;
   line-height: 27px;
   background-color: #fff;
   border: 2px solid #333;
   border-top: none;
   transition: all 0.5s;
   transform: translateY(-100px);

}

.shortcut li:nth-child(5) a:hover .hidlist {
   transform: translateY(0px);
}




.shortcut li:nth-child(6) {
   flex: 1;

}

.shortcut li:nth-child(6) div {

   margin: 0 auto;
   height: 20.8px;
   color: #fff;

}

.shortcut li:nth-child(6) div input {
   width: 77%
}



.shortcut li:nth-child(7) a {
   padding: 0 7px;
   border-right: 2px solid #999;
}

.shortcut li:nth-child(8) span {
   padding: 0 5px;
   font-size: 24px;
}



.banner {
   width: 1240px;
   text-align: center;

}

/* .banner img {
   position: relative;
   z-index: -3;
} */



/* 底部 */
.bottom {
   margin: 0 auto;
   background-color: #333;
   width: 1240px;
   height: 249px;
   color: #fff;

}

.rela {
   display: flex;
   justify-content: space-between;
   padding-top: 49px;
   height: 200px;

}


.left {
   display: flex;
}

.left dl {
   margin: 0 100px 28px 10px;
}

.left dt {
   padding-bottom: 24px;
}

.left dd {
   padding-bottom: 7px;
}

.right .vx {
   display: inline-block;
   width: 300px;
   height: 150px;
   background-color: #333;
   text-align: center;
   /* overflow: hidden; */
}

.right .vx img {
   /* transform: scale(10%); */
   width: 100px;
   height: 150px;
}

.right .vx img:hover {
   transform: translate(-500px, -500px);
   width: 400px;
   height: 600px;
}


.cpy p {
   display: inline-block;
   color: #999;
}

.cpy {
   /* width: 100%; */
   height: 49px;
   border-top: 1px solid black;
   font-size: 12px;
   background-color: #333;
   color: #fff;
   line-height: 49px;
   text-align: center;
}