/*----------bubble----------*/
.bubble {
  position: absolute;
  z-index: 30;
  border-radius: 100%;
  background-color: #fff;
  animation-name: bubble;
  animation-timing-function: ease;
  animation-iteration-count: infinite; }

.bubble01 {
  bottom: -100px;
  left: 100px;
  width: 10px;
  height: 10px;
  animation-duration: 8 s; }

.bubble02 {
  bottom: -100px;
  left: 300px;
  width: 15px;
  height: 15px;
  animation-duration: 9.2s; }

.bubble03 {
  bottom: -100px;
  right: 100px;
  width: 10px;
  height: 10px;
  animation-duration: 8.2s; }

.bubble04 {
  bottom: -100px;
  right: 40px;
  width: 20px;
  height: 20px;
  animation-duration: 6.2s; }

.bubble05 {
  bottom: -100px;
  left: 500px;
  width: 20px;
  height: 20px;
  animation: bubble 10.2s ease infinite; }

.bubble06 {
  bottom: -100px;
  left: 600px;
  width: 17px;
  height: 17px;
  animation: bubble 5.8s ease infinite; }

.bubble07 {
  bottom: -100px;
  right: 320px;
  width: 12px;
  height: 12px;
  animation: bubble 5.0s ease infinite; }

.bubble08 {
  bottom: -100px;
  right: 10px;
  width: 12px;
  height: 12px;
  animation: bubble 9.0s ease infinite; }

.bubble09 {
  bottom: -100px;
  right: 480px;
  width: 20px;
  height: 20px;
  animation: bubble 8.1s ease infinite; }

.bubble10 {
  bottom: -100px;
  right: 880px;
  width: 10px;
  height: 10px;
  animation: bubble 6.9s ease infinite; }

.bubble11 {
  bottom: -100px;
  right: 280px;
  width: 30px;
  height: 30px;
  animation: bubble 4.9s ease infinite; }

.bubble12 {
  bottom: -100px;
  left: 290px;
  width: 26px;
  height: 26px;
  animation: bubble 3.9s ease infinite; }

.bubble13 {
  bottom: -100px;
  left: 380px;
  width: 20px;
  height: 20px;
  animation: bubble 8.9s ease infinite; }

.bubble14 {
  bottom: -100px;
  left: 180px;
  width: 10px;
  height: 10px;
  animation: bubble 7.1s ease infinite; }

.bubble15 {
  bottom: -100px;
  left: 80px;
  width: 30px;
  height: 30px;
  animation: bubble 6.1s ease infinite; }

.bubble16 {
  bottom: -100px;
  left: 5px;
  width: 21px;
  height: 21px;
  animation: bubble 9.1s ease infinite; }

.bubble17 {
  bottom: -100px;
  left: 392px;
  width: 10px;
  height: 10px;
  animation: bubble 7.1s ease infinite; }

.bubble18 {
  bottom: -100px;
  left: 620px;
  width: 6px;
  height: 6px;
  animation: bubble 6.8s ease infinite; }

.bubble19 {
  bottom: -100px;
  right: 20px;
  width: 8px;
  height: 8px;
  animation: bubble 5.8s ease infinite; }

.bubble20 {
  bottom: -100px;
  right: 160px;
  width: 6px;
  height: 6px;
  animation: bubble 9.8s ease infinite; }

@keyframes bubble {
  100% {
    bottom: 120%; } }