* {
  padding: 0;
  margin: 0;
  user-select: none;
  font-family: alibabaMedium;
}

ul li {
  list-style-type: none;
}

/* 引用字体 */

.img {
  position: absolute;
}

.opacity {
  opacity: 0;
}

.cursor {
  cursor: pointer;
}

.common-text {
  font-size: 29px;
  font-weight: 500;
  color: #FFFFFF;
  position: absolute;
}

.common-area-text {
  font-size: 67px;
  font-family: alibabaMedium;
  font-weight: bold;
  color: rgba(164, 150, 119, 1);
  position: absolute;
  opacity: 0.25;
}

.common-street-text {
  font-size: 28px;
  font-family: alibabaMedium;
  font-weight: bold;
  color: #95C1A3;
  opacity: 0.59;
  position: absolute;
}

.common-river-text {
  font-size: 20px;
  font-weight: bold;
  color: #5E91A3;
  line-height: 10px;
  position: absolute;
}

.location {
  width: 44px;
  height: 60px;
  background-size: 100% 100%;
  position: absolute;
  z-index: 9;
}


.hover {
  cursor: pointer;
}

.hover:hover .img,
.hover:hover .db,
.scale .img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

.dot,
.hover:hover .db {
  animation: float ease-in-out .4s infinite;
  -webkit-animation: float ease-in-out .4s infinite;
}


.header {
  height: 250px;
  padding: 0 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .service-text {
  width: 538px;
  height: 98px;
  background: #CA3939;
  border-radius: 15px;
  font-size: 80px;
  font-weight: 400;
  color: #FFFEFE;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  margin-top: 0;
  margin-right: 48px;
  width: 1332px !important;
  height: 118px !important;
}

.logo img {
  height: 118px !important;
}

.nav li a i.qq span {
  background: url(../images/nav-ent.png) no-repeat;
  background-size: 100% 100%;
}

/* 内容 */
.mapBox {
  width: 3699px;
  height: 1804px;
  position: relative;
  margin: 0 auto;
  background: #ffee87;
  border: solid 3px #5f250d;
  padding: 8px;
  border-radius: 30px;
  /* overflow: hidden; */
}

.mapBox .box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
}

/* 内容区域 */
.gzzmys .img {
  width: 265px;
  height: 152px;
  left: 465px;
  top: 94px;
}

.gzzmys .db {
  background-image: url(../images/db/dot-23.png);
  left: 888px;
  top: 217px;
}

.hjqmgd .img {
  width: 236px;
  height: 196px;
  left: 489px;
  top: 366px;
}

.hjqmgd .db {
  background-image: url(../images/db/dot-27.png);
  left: 1083px;
  top: 535px;
}

.zckgch .img {
  width: 71px;
  height: 281px;
  left: 277px;
  top: 554px;
}

.xcfsd .img {
  width: 170px;
  height: 252px;
  left: 575px;
  top: 699px;
}

.nineteen-db.db {
  left: 1253px;
  top: 805px;
  background-image: url(../images/db/dot-19.png);
}

.jgfd .img {
  width: 139px;
  height: 200px;
  left: 262px;
  top: 865px;
}

.jgfd .db {
  left: 1032px;
  top: 934px;
  background-image: url(../images/db/dot-16.png);
}

.dghgd .img {
  width: 293px;
  height: 199px;
  left: 547px;
  top: 968px;
}

.dghgd .db {
  left: 1333px;
  top: 1035px;
  background-image: url(../images/db/dot-26.png);
}

.plz .img {
  width: 137px;
  height: 141px;
  left: 844px;
  top: 1158px;
}

.plz .db {
  left: 1302px;
  top: 1141px;
  background-image: url(../images/db/dot-8.png);
}

.gzzd .img {
  width: 112px;
  height: 104px;
  left: 826px;
  top: 1333px;
}

.gzzd .db {
  left: 1397px;
  top: 1333px;
  background-image: url(../images/db/dot-4.png);
}

.pyss .img {
  width: 659px;
  height: 328px;
  left: 0px;
  top: 1143px;
}

.pyss .db {
  left: 1078px;
  top: 1433px;
  background-image: url(../images/db/dot-5.png);
}

.swlbxs .img {
  width: 537px;
  height: 245px;
  left: 19px;
  top: 1559px;
}

.swlbxs .db {
  left: 1097px;
  top: 1469px;
  background-image: url(../images/db/dot-25.png);
}

.gstly .img {
  width: 249px;
  height: 151px;
  left: 774px;
  top: 1639px;
}

.db.one-db {
  left: 1393px;
  top: 1393px;
  background-image: url(../images/db/dot-1.png);
}

.swsnn .img {
  width: 234px;
  height: 95px;
  left: 1069px;
  top: 1692px;
}


.swhsgsf .img {
  width: 172px;
  height: 252px;
  left: 1419px;
  top: 1548px;
}

.gdxs .img {
  width: 160px;
  height: 239px;
  left: 1642px;
  top: 1565px;
}

.gdyy .img {
  width: 115px;
  height: 237px;
  left: 1859px;
  top: 1567px;
}

.swps .img {
  width: 337px;
  height: 428px;
  left: 2065px;
  top: 1376px;
}

.dsny .img {
  width: 338px;
  height: 177px;
  left: 2420px;
  top: 1579px;
}

.mchdzzjy .img {
  width: 134px;
  height: 106px;
  left: 1589px;
  top: 1282px;
}

.mchdzzjy .db {
  left: 1489px;
  top: 1286px;
  background-image: url(../images/db/dot-29.png);
}

.gdxssq .img {
  width: 109px;
  height: 183px;
  left: 1364px;
  top: 1076px;
}

.fiveteen-db.db {
  left: 1586px;
  top: 1116px;
  background-image: url(../images/db/dot-15.png);
}

.gzhs .img {
  width: 288px;
  height: 64px;
  left: 1194px;
  top: 920px;
}

.gx .img {
  width: 79px;
  height: 117px;
  left: 1536px;
  top: 924px;
}


.ctgfyxls .img {
  width: 130px;
  height: 143px;
  left: 1374px;
  top: 654px;
}

.ctgfyxls .db {
  left: 1483px;
  top: 875px;
  background-image: url(../images/db/dot-28.png);
}

.gqjy .img {
  width: 178px;
  height: 125px;
  left: 941px;
  top: 584px;
}

.fourteen-db.db {
  left: 1310px;
  top: 540px;
  background-image: url(../images/db/dot-14.png);
}

.gqys .img {
  width: 133px;
  height: 152px;
  left: 1113px;
  top: 680px;
}

.dsdxc .img {
  width: 165px;
  height: 201px;
  left: 998px;
  top: 252px;
}

.dsdxc .db {
  left: 1150px;
  top: 415px;
  background-image: url(../images/db/dot-20.png);
}

.gsmt .img {
  width: 174px;
  height: 132px;
  left: 1113px;
  top: 31px;
}

.lz .img {
  width: 557px;
  height: 498px;
  left: 1175px;
  top: 15px;
}

.lz .text {
  width: 380px;
  height: 96px;
  position: absolute;
  left: 1221px;
  top: 258.4px;
  background: url(../images/lz-text.png) no-repeat;
  background-size: 100% 100%;
  z-index: 9;
}

.seven-db.db {
  left: 1186px;
  top: 329px;
  background-image: url(../images/db/dot-7.png);
}

.gztq .img {
  width: 146px;
  height: 73px;
  left: 1350px;
  top: 496px;
}

.gztq .db {
  left: 1330px;
  top: 434px;
  background-image: url(../images/db/dot-22.png);
}

.lctwdkgy .img {
  width: 302px;
  height: 151px;
  left: 1466px;
  top: 330px;
}

.seventeen-db.db {
  left: 1640px;
  top: 643px;
  background-image: url(../images/db/dot-17.png);
}

.gdxsst .img {
  width: 123px;
  height: 189px;
  left: 1770px;
  top: 132px;
}

.xzgx .img {
  width: 84px;
  height: 150px;
  left: 2158px;
  top: 408px;
}

.ygps .img {
  width: 106px;
  height: 244px;
  left: 1901px;
  top: 291px;
}

.gx .img {
  width: 103px;
  height: 182px;
  left: 2028px;
  top: 93px;
}

.gx .db {
  left: 2112px;
  top: 331px;
  background-image: url(../images/db/dot-21.png);
}

.gxsq .img {
  left: 1536px;
  top: 924px;
  width: 79px;
  height: 117px;
}

.stlc .img {
  width: 258px;
  height: 221px;
  left: 2238px;
  top: 0px;
}

.stlc .db {
  left: 2217px;
  top: 140px;
  background-image: url(../images/db/dot-10.png);
}

.tsqq .img {
  width: 319px;
  height: 200px;
  left: 2345px;
  top: 305px;
}

.eleven-db.db {
  left: 2286px;
  top: 607px;
  background-image: url(../images/db/dot-11.png);
}

.tsps .img {
  width: 235px;
  height: 323px;
  left: 2711px;
  top: 133px;
}

.gccszjy .img {
  width: 160px;
  height: 194px;
  left: 2680px;
  top: 542px;
}

.gccszjy .db {
  left: 2522px;
  top: 742px;
  background-image: url(../images/db/dot-2.png);
}

.gdsxh .img {
  width: 194px;
  height: 218px;
  left: 1726px;
  top: 616px;
}

.gdsxh .db {
  left: 1588px;
  top: 852px;
  background-image: url(../images/db/dot-18.png);
}

.pgsctzywh .img {
  width: 100px;
  height: 104px;
  left: 2046px;
  top: 663px;
}

.pgsctzywh .db {
  left: 1629px;
  top: 863px;
  background-image: url(../images/db/dot-3.png);
}

.pygslw .img {
  width: 154px;
  height: 154px;
  left: 1822px;
  top: 892px;
}

.pygslw .db {
  left: 1642px;
  top: 1019px;
  background-image: url(../images/db/dot-24.png);
}

.spn .img {
  width: 177px;
  height: 114px;
  left: 1820px;
  top: 1228px;
}

.spn .db {
  left: 2014px;
  top: 1064px;
  background-image: url(../images/db/dot-30.png);
}

.gdxsxq .img {
  width: 226px;
  height: 185px;
  left: 2075px;
  top: 1168px;
}

.six-db.db {
  left: 2069px;
  top: 1009px;
  background-image: url(../images/db/dot-6.png);
}

.sybyw .img {
  width: 121px;
  height: 184px;
  left: 2308px;
  top: 1158px;
}

.xqdtf .img {
  width: 254px;
  height: 192px;
  left: 2575px;
  top: 1279px;
}

.gsymjj .img {
  width: 100px;
  height: 106px;
  left: 2212px;
  top: 808px;
}

.gsymjj .db {
  left: 2129px;
  top: 983px;
  background-image: url(../images/db/dot-9.png);
}

.hxxqf .img {
  width: 141px;
  height: 201px;
  left: 2369px;
  top: 797px;
}

.hxxqf .db {
  left: 2202px;
  top: 975px;
  background-image: url(../images/db/dot-12.png);
}

.ycq .img {
  width: 141px;
  height: 238px;
  left: 2713px;
  top: 904px;
}

.ycq .db {
  left: 2436px;
  top: 1065px;
  background-image: url(../images/db/dot-31.png);
}

/* 图例 */
.tl {
  width: 486px;
  text-align: center;
  border: 8px solid #FFFFFF;
  background-color: rgba(249, 248, 240, .5);
  border-radius: 50px;
  position: absolute;
  left: 3153.8px;
  top: 61.9px;
}

.tl .text {
  font-size: 50px;
  font-weight: 400;
  color: #484848;
  line-height: 50px;
  padding-top: 58px;
  padding-bottom: 56px;
  display: block;
  width: 157px;
  margin: 0 auto;
  letter-spacing: 17px;
}

.tl .list {
  margin: 0 auto;
}

.tl .list li {
  height: 38px;
  padding-bottom: 41px;
  display: flex;
  align-items: center;
  width: 242px;
  margin: 0 auto;
}

.tl .list li:last-child {
  padding-top: 7px;
  padding-bottom: 0;
}

.tl .list li .li-img {
  margin-right: 28px;
  width: 84px;
  min-width: 84px;
}

.list li:last-child .li-img {
  display: flex;
  justify-content: center;
  width: 84px;
  height: 48px;
}

.list li:last-child .li-img .location {
  background-image: url(../images/location.png);
  width: 35px;
  height: 48px;
}

.list li:last-child .li-text {
  /* padding-top: 15px; */
}

.tl .list li .li-text {
  font-size: 28px;
  font-weight: 400;
  color: #484848;
  line-height: 37px;
  white-space: nowrap;
}

.tl .btn {
  width: 255px;
  margin: 81px auto 71px;
  height: 65px;
  border: 4px solid #1172B6;
  border-radius: 30px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, #1475B9 0%, #29C1DC 100%);
  box-shadow: 0px 10px 9px 0px rgba(12, 78, 178, 0.26);
}

.py-address {
  position: absolute;
  font-size: 40px;
  font-weight: 400;
  color: #910202;
  right: 204px;
  top: 992px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  width: 112px;
}

.py-address .top {
  height: 556px;
  display: flex;
}

.py-address .left {
  margin-right: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.py-address .zz {
  font-size: 45px;
  color: #A10C33;
  margin-top: 43px;
  letter-spacing: 10px;
  width: 43px;
}

.time {
  position: absolute;
  right: 71px;
  top: 1724px;
  font-size: 29px;
  font-weight: 400;
  color: #3D2229;
  line-height: 51px;
  letter-spacing: 2px;
}

/* 区域名 */
.area .fssnhq {
  left: 53px;
  top: 319px;
}

.area .fsssdq {
  left: 95px;
  top: 1087px;
}

.area .nsq {
  left: 1993px;
  top: 1628px;
}

.area .dgs {
  left: 3093px;
  top: 880px;
}

.area .hpq {
  left: 2608px;
  top: 12px;
}

.area .hzq {
  left: 1317px;
  top: 5px;
}

/* 街道 */
.street .lpj {
  left: 901px;
  top: 333px;
}

.street .dsj {
  left: 1134px;
  top: 549px;
}

.street .sbj {
  left: 888px;
  top: 826px;
}

.street .zcj {
  left: 1183px;
  top: 871px;
}

.street .stj {
  left: 1203px;
  top: 1109px;
}

.street .swj {
  left: 1291px;
  top: 1392px;
}

.street .qnj {
  left: 1751px;
  top: 1326px;
}

.street .sqj {
  left: 1641px;
  top: 1095px;
}

.street .sxz {
  left: 2162px;
  top: 1042px;
}

.street .slz {
  left: 2481px;
  top: 1153px;
}

.street .dlj {
  left: 1986px;
  top: 990px;
}

.street .dhj {
  left: 1658px;
  top: 916px;
}

.street .ncz {
  left: 1574px;
  top: 713px;
}

.street .xzz {
  left: 2021px;
  top: 474px;
}

.street .hlz {
  left: 2238px;
  top: 311px;
}

.street .xgwj {
  left: 1686px;
  top: 218px;
}

/* 河流 */
.river .ccsd {
  left: 753px;
  top: 655px;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.river .swsd {
  left: 2247px;
  top: 1379px;
  line-height: 7px;
}

.river .sqsd {
  left: 1542px;
  top: 1205px;
  transform: rotate(-12deg);
}

.river .lhssd {
  left: 2661px;
  top: 934px;
  transform: rotate(21deg);
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.river .szy {
  left: 2892px;
  top: 1021px;
  transform: rotate(-17deg);
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.river .zjhjd .z {
  position: absolute;
  left: 1566px;
  top: 308px;
}

.river .zjhjd .j {
  position: absolute;
  left: 1591px;
  top: 300px;
}

.river .zjhjd .h {
  position: absolute;
  left: 1612px;
  top: 283px;
}

.river .zjhjd .hang {
  position: absolute;
  left: 1627px;
  top: 260px;
}

.river .zjhjd .d {
  position: absolute;
  left: 1646px;
  top: 242px;
}


/* 车站 */
.station {
  position: absolute;
  left: 831px;
  top: 739px;
  display: flex;
  align-items: center;
}

.station .img {
  width: 37px;
  height: 37px;
  display: block;
  position: unset;
}

.station .text {
  font-size: 25px;
  font-weight: bold;
  color: #5E5757;
  display: block;
  margin-right: 5px;
}

.port {
  position: absolute;
  left: 2595px;
  top: 828px;
}

.port img {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.port .text {
  margin-top: 15px;
  font-size: 25px;
  font-weight: bold;
  color: #5E5757;
  line-height: 7px;
}

.star {
  position: absolute;
  left: 1742px;
  top: 1133px;
  display: flex;
  align-items: center;
}

.star img {
  width: 28px;
  height: 27px;
}

.star .text {
  font-size: 28px;
  font-family: alibabaMedium;
  font-weight: bold;
  color: #B51C22;
  line-height: 7px;
  padding-left: 5px;
  display: block;
}

/* 保护单位列表 */
.company-list {
  background-color: rgba(165, 180, 181, .5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  display: none;
}

.company-list .name {
  width: 3281px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 50px;
  padding-bottom: 82px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.company-list .close {
  background-image: url(../images/close.png);
  width: 59px;
  height: 59px;
  background-size: 100% 100%;
  position: absolute;
  top: 13px;
  right: 14px;
}

.company-list .title {
  width: 403px;
  margin: 55px auto 0;
  display: flex;
  align-items: center;
}

.company-list .title .db {
  width: 32px;
  height: 43px;
  background-image: url(../images/location.png);
  position: unset;
}

.company-list .title .text {
  font-size: 40px;
  font-weight: 500;
  color: rgba(29, 68, 128, 1);
  line-height: 32px;
  margin-left: 45px;
  white-space: nowrap;
}

.company-list .lists {
  padding-top: 91px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.company-list .lists ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  width: 635px;
  align-content: space-around;
}

.company-list .lists ul li {
  display: flex;
  /* align-items: center; */
  padding-bottom: 45px;
  width: 100%;
}

.company-list .lists ul .db {
  width: 39px;
  min-width: 39px;
  height: 53px;
  position: unset;
  display: block;
  margin-right: 21px;
  font-size: 20px;
  font-family: SourceHanSansCNVF;
  font-weight: 500;
  color: #E23633;
}

.company-list .lists ul .text {
  font-size: 30px;
  font-weight: 400;
  color: #1D4480;
  line-height: 1;
  /* font-family: alibabaMedium; */
}

.company-list .lists ul .address {
  padding-top: 20px;
  color: rgb(36, 36, 36);
  font-size: 30px;
  /* line-height: 64px; */
}

/* 提示 */
.tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: 151px;
  right: 378px;
  font-size: 35px;
  font-weight: 400;
  color: #404040;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.58);
  padding: 32px;
  border-radius: 20px;
}

/* 背景音频 */
.bg-music {
  width: 106px;
  height: 106px;
  position: absolute;
  left: 46px;
  top: 35px;
}

.bg-music .icon {
  background-image: url(../images/bg-music.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: block;
}

.bg-music .pause-icon {
  background-image: url(../images/bg-music-pause.png);
}

.bg-music .icon.rotate {
  animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
}

.company-list .left-info li:nth-child(1) .db {
  background-image: url(../images/db/dot-1.png);
}

.company-list .left-info li:nth-child(2) .db {
  background-image: url(../images/db/dot-2.png);
}

.company-list .left-info li:nth-child(3) .db {
  background-image: url(../images/db/dot-3.png);
}

.company-list .left-info li:nth-child(4) .db {
  background-image: url(../images/db/dot-4.png);
}

.company-list .left-info li:nth-child(5) .db {
  background-image: url(../images/db/dot-5.png);
}

.company-list .left-info li:nth-child(6) .db {
  background-image: url(../images/db/dot-6.png);
}

.company-list .left-info li:nth-child(7) .db {
  background-image: url(../images/db/dot-7.png);
}

.company-list .left-info li:nth-child(8) .db {
  background-image: url(../images/db/dot-8.png);
}

.company-list .center-left-info li:nth-child(1) .db {
  background-image: url(../images/db/dot-9.png);
}

.company-list .center-left-info li:nth-child(2) .db {
  background-image: url(../images/db/dot-10.png);
}

.company-list .center-left-info li:nth-child(3) .db {
  background-image: url(../images/db/dot-11.png);
}

.company-list .center-left-info li:nth-child(4) .db {
  background-image: url(../images/db/dot-12.png);
}

.company-list .center-left-info li:nth-child(5) .db {
  background-image: url(../images/db/dot-13.png);
}

.company-list .center-left-info li:nth-child(6) .db {
  background-image: url(../images/db/dot-14.png);
}

.company-list .center-left-info li:nth-child(7) .db {
  background-image: url(../images/db/dot-15.png);
}

.company-list .center-left-info li:nth-child(8) .db {
  background-image: url(../images/db/dot-16.png);
}

.company-list .center-right-info li:nth-child(1) .db {
  background-image: url(../images/db/dot-17.png);
}

.company-list .center-right-info li:nth-child(2) .db {
  background-image: url(../images/db/dot-18.png);
}

.company-list .center-right-info li:nth-child(3) .db {
  background-image: url(../images/db/dot-1.png);
}

.company-list .center-right-info li:nth-child(4) .db {
  background-image: url(../images/db/dot-20.png);
}

.company-list .center-right-info li:nth-child(5) .db {
  background-image: url(../images/db/dot-21.png);
}

.company-list .center-right-info li:nth-child(6) .db {
  background-image: url(../images/db/dot-22.png);
}

.company-list .center-right-info li:nth-child(7) .db {
  background-image: url(../images/db/dot-23.png);
}

.company-list .right-info li:nth-child(1) .db {
  background-image: url(../images/db/dot-24.png);
}

.company-list .right-info li:nth-child(2) .db {
  background-image: url(../images/db/dot-25.png);
}

.company-list .right-info li:nth-child(3) .db {
  background-image: url(../images/db/dot-16.png);
}

.company-list .right-info li:nth-child(4) .db {
  background-image: url(../images/db/dot-27.png);
}

.company-list .right-info li:nth-child(5) .db {
  background-image: url(../images/db/dot-28.png);
}

.company-list .right-info li:nth-child(6) .db {
  background-image: url(../images/db/dot-29.png);
}

.company-list .right-info li:nth-child(7) .db {
  background-image: url(../images/db/dot-30.png);
}

.company-list .right-info li:nth-child(8) .db {
  background-image: url(../images/db/dot-31.png);
}

.company-list .left-info li:last-child,
.company-list .center-left-info li:last-child,
.company-list .center-right-info li:last-child,
.company-list .right-info li:last-child {
  padding-bottom: 0;
}

@keyframes float {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}