* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}

img {
  width: 100%;
}

.content {
  width: 100%;
  background-image: url("../img/start/bg.png");
  background-size: cover;
  background-position: 60%;
  background-repeat: no-repeat;
  position: relative;
}

.buttonGroup {
  position: fixed;
  top: 48%;
  left: 61.5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 90%;
  max-height: 900px;
  width: 40%;
  min-width: 600px;
  z-index: 2;
}

.buttonGroup .bubble-position-1 {
  bottom: 0;
  left: 0;
}

.buttonGroup .bubble-position-2 {
  top: -3%;
  right: -5%;
}

.buttonGroup .bubble-position {
  position: absolute;
  z-index: 3;
  width: 200px;
  height: 200px;
}

.buttonGroup .bubble-position .bubble-hover-area-1 {
  position: absolute;
  bottom: 0;
  z-index: 10;
  width: 400px;
  height: 200px;
  pointer-events: none;
}

.buttonGroup .bubble-position .bubble-hover-area-2 {
  position: absolute;
  bottom: -8%;
  right: 0;
  z-index: 10;
  width: 430px;
  height: 400px;
  pointer-events: none;
}

.buttonGroup .bubble-position .bubble-line-size-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 2px solid white;
  -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
          filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  border-radius: 50%;
  width: 80%;
  height: 80%;
  opacity: 0;
}

.buttonGroup .bubble-position .bubble-line-size-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 2px solid white;
  -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
          filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  border-radius: 50%;
  width: 80%;
  height: 80%;
  opacity: 0;
}

.buttonGroup .bubble-position > :nth-child(1) {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.buttonGroup .bubble-position > :nth-child(1) .bubble-layout {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 3px solid white;
  border-radius: 50%;
  -webkit-filter: drop-shadow(0 0 3px black);
          filter: drop-shadow(0 0 3px black);
}

.buttonGroup .bubble-position > :nth-child(1) .bubble-image-in {
  background: url("../img/start/water_in.png");
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.buttonGroup .bubble-position > :nth-child(1) .bubble-image-out {
  background: url("../img/start/water_out.png");
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.buttonGroup .bubble-position > :nth-child(1) .bubble-image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.ani {
  -webkit-animation: bubble-ani 3s ease-in-out infinite;
          animation: bubble-ani 3s ease-in-out infinite;
}

@-webkit-keyframes bubble-ani {
  0% {
    -webkit-box-shadow: 0px 0px 0px #07FAF8;
            box-shadow: 0px 0px 0px #07FAF8;
  }
  40% {
    -webkit-box-shadow: 0px 0px 30px rgba(7, 250, 248, 0.8);
            box-shadow: 0px 0px 30px rgba(7, 250, 248, 0.8);
  }
  80% {
    -webkit-box-shadow: 0px 0px 0px #07FAF8;
            box-shadow: 0px 0px 0px #07FAF8;
  }
}

@keyframes bubble-ani {
  0% {
    -webkit-box-shadow: 0px 0px 0px #07FAF8;
            box-shadow: 0px 0px 0px #07FAF8;
  }
  40% {
    -webkit-box-shadow: 0px 0px 30px rgba(7, 250, 248, 0.8);
            box-shadow: 0px 0px 30px rgba(7, 250, 248, 0.8);
  }
  80% {
    -webkit-box-shadow: 0px 0px 0px #07FAF8;
            box-shadow: 0px 0px 0px #07FAF8;
  }
}

.waterGroup {
  position: fixed;
  top: 48%;
  left: 61.5%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 40%;
  min-width: 600px;
}

.waterGroup .line {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 49%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-animation: line-ani 2s ease-in-out forwards infinite;
          animation: line-ani 2s ease-in-out forwards infinite;
}

.waterGroup .waterbg {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 46%;
  -webkit-transform: translate(-50%, -50%) scale(1.05);
          transform: translate(-50%, -50%) scale(1.05);
}

.waterGroup .waterline {
  z-index: 2;
  position: absolute;
  top: 12px;
  left: 46%;
  -webkit-transform: translate(-50%, -50%) scale(1.05);
          transform: translate(-50%, -50%) scale(1.05);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  -webkit-animation: waterline-ani 5s ease-in-out forwards;
          animation: waterline-ani 5s ease-in-out forwards;
}

.groupBtn-position-1 {
  top: 35%;
  right: -6%;
}

.groupBtn-position-2 {
  top: 70%;
  left: 0%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.groupBtn {
  position: absolute;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
}

.groupBtn .item {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 5px;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.groupBtn .item img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.groupBtn .item:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

@-webkit-keyframes line-ani {
  0% {
    opacity: .6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .6;
  }
}

@keyframes line-ani {
  0% {
    opacity: .6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .6;
  }
}

@-webkit-keyframes waterline-ani {
  0% {
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

@keyframes waterline-ani {
  0% {
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

.heading {
  position: fixed;
  top: 20px;
  left: 4%;
  width: 20%;
  min-width: 300px;
}

.logo {
  position: fixed;
  bottom: 1%;
  right: 2%;
  width: 13%;
  min-width: 150px;
  max-width: 200px;
}

.vr {
  position: fixed;
  width: 70px;
  bottom: 10%;
  right: 2%;
}

@media screen and (max-width: 1200px) {
  .buttonGroup {
    z-index: 2;
  }
  .buttonGroup .bubble-position-1 {
    bottom: 8%;
    left: 0%;
  }
  .buttonGroup .bubble-position-2 {
    top: 8%;
    right: -5%;
  }
}

@media screen and (max-width: 640px) {
  .content {
    width: 100%;
    background-size: cover;
    background-position: 50%;
    background-image: url("../img/start/bg_phone.png");
  }
  .water {
    width: 80%;
    min-width: auto;
    position: fixed;
    top: 35%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    -webkit-transform: rotate(-7deg);
            transform: rotate(-7deg);
  }
  .heading {
    min-width: 200px;
    left: 5%;
  }
  .logo {
    display: none;
  }
  .groupBtn {
    top: 90px;
    left: 5%;
  }
  .groupBtn .item {
    width: 40px;
    height: 40px;
    margin: 5px;
  }
  .vr {
    width: 12%;
    top: 105px;
    left: 7%;
  }
  .waterGroup {
    min-width: 400px;
    top: 58%;
    left: 55%;
    -webkit-transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);
            transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);
  }
  .buttonGroup {
    height: 80%;
    max-height: 900px;
    min-width: 400px;
    top: 58%;
    left: 55%;
    -webkit-transform: translate(-50%, -50%) scale(0.8);
            transform: translate(-50%, -50%) scale(0.8);
    z-index: 2;
  }
  .buttonGroup .bubble-position-1 {
    bottom: 0%;
    left: 5%;
  }
  .buttonGroup .bubble-position-2 {
    top: 0%;
    right: 3%;
  }
  .buttonGroup .bubble-position {
    width: 130px;
    height: 130px;
  }
  .buttonGroup .bubble-position .bubble-hover-area-1 {
    width: 230%;
    height: 120%;
  }
  .buttonGroup .bubble-position .bubble-hover-area-2 {
    width: 230%;
    height: 120%;
  }
  .groupBtn-position-1 {
    top: 45%;
    right: 0%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .groupBtn-position-2 {
    top: 50%;
    left: 0%;
  }
}
/*# sourceMappingURL=start.css.map */