.fl{ float: left;}
.fr{ float: right;}
.main{ width: 1000px; height: 400px; margin: 0 auto;}
.part{ position: relative; width: 100%; height: 100%; overflow: hidden;}

.part1{ background: url(../img/bg1.jpg) no-repeat top center;}
.part1_1{ position: absolute; bottom: 30px; left: 58%; z-index: 9; margin-left: -21px; width: 42px; height: 45px; background: url(../img/9.png) no-repeat top center; pointer-events: none;}
.part1_2{ position: absolute; bottom: 46px; left: 50%; z-index: 8; margin-left: -128px; width: 256px; height: 94px; background: url(../img/b3.png) no-repeat top center; cursor: pointer;}

.part2_1{ position: relative; width: 5207px; height: 100%; background: url(../img/bg2.jpg) no-repeat top center;}
.part2_2{ position: absolute; right: 18.4%; top: 44.56%; width:126px; height: 84px; z-index: 2; background: url(../img/1.png) no-repeat top center;}
.part2_3{ position: absolute; width: 349px; height: 232px; top:70px; left: 50%; z-index: 3; margin-left: -174.5px;}
.part2_3_1{ position: relative; width: 100%; cursor: pointer;}
#wbg{ width: 349px; height: 232px; background: url(../img/3.png) no-repeat top center;}
#cbg{ position: absolute;top:0;left: 0; width: 100%;z-index: 9;height: 100%;}
#name{width: 80%;position: absolute; font-size: 64px; top: 25%;left: 12%;text-align: center; color: #252525; opacity: 0.7;}
#canvas{position: absolute;top:0;left: 0;width: 100%;z-index: 9;height: 100%;}

.part2_3_2{ position: relative; width: 318px; height: 124px; margin: -90px auto 0; z-index: 99; background: url(../img/2.png) no-repeat top center;}

.star{position: absolute; top: 186px; left: 50%; margin-left: -17px; z-index: 2; width: 34px; height: 34px; background: url(../img/star.png) no-repeat top; }
#stars{ top:400px;}

.part3{ width: 100%; height: 100%; background: url(../img/bg3.jpg) no-repeat top center;}
.part3_1{ position: relative; width: 100%; height: 100%;}

.part3_1_2{ position: absolute; width: 117px; height: 141px; bottom: 20px; left: 50%; z-index: 3; margin-left: -58.5px;  background: url(../img/6.png) no-repeat top center;}

.part3_1_3{position: absolute;top: 80px;left: 170px;z-index: 3;text-align: center;color: #FFF;font-size: 24px;}
.part3_1_3 span{ color: #151414; font-weight: bold;}
.part3_1_3_1{ line-height: 112px;}
#names{ display: inline-block; width: 222px; height: 112px; background: url(../img/5.png) no-repeat center; background-size: cover;}

.part3_5{position: absolute;top: 25px;right: 226px;z-index: 4;width: 63px;height: 68px;background: url(../img/star1.png) no-repeat top center;}
.part3_6{position: absolute;top: 42px;left: 202px;z-index: 4;width: 41px;height: 41px;background: url(../img/star2.png) no-repeat top center;}
.part3_4{ position: absolute; top: 100%; left: 28%; z-index: 9; width: 44vw; max-width: 328px;}

@keyframes flash {
  50%{
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.2;
  }
}

.flash {
  -webkit-animation: flash 2s infinite linear;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  
	50%{
		 opacity: 0.5;
	}

  100% {
    transform: rotate(360deg);
  }
}

.swing {
  
  -webkit-animation: swing 2s infinite linear;
}

@keyframes bounceIn {

  0% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }

}

.bounceIn {
   -webkit-animation: bounceIn 1s infinite linear;
}