body {
  margin: 0;
}

.kva_main {
  width: 100%;
  background: #f3f3f3;
}
.kva_main_inner {
  position: relative;
  /* max-width: 1600px; */
  max-height: 774px;
  height: calc(100vw*774/1600);
  margin: 0 auto;
  border-left: solid 1px #ccc;
  border-right: solid 1px #ccc;
  overflow: hidden;
}

.kva_lt_element {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.kva_lt_element img {
  width: calc(100vw*1355/1600);
  display: none;
}

.kva_main svg {
  width: 100%;
  height: 100%;
}

.kva_main_msg {
  position: absolute;
  top: calc(50% - 20px);
  left: 2%;
  right: 0;
  font-size: 0;
  color: #3e3e3e;
  text-shadow: 2px 2px 2px #fefefe;
  text-align: center;
  line-height: 40px;
  letter-spacing: 0.6rem;
  z-index: 2;
}
.kva_main_msg span {
  font-size: 32px;
  transition: all 4s cubic-bezier(.19,1,.435,.99);
  transition-delay: 0ms;
  opacity: 0;
/*transform: scale(.5,.2) rotateY(90deg) translate(-3px,0);*/
  transform-origin: left center;
}
.kva_main_msg.loaded span {
  opacity: 1;
  transform: scale(1,1) rotateY(0deg) translate(0,0);
}
.kva_main_msg.loaded span:first-child {
  transition-delay: 0s;
}
.kva_main_msg.loaded span:nth-child(2) {
  transition-delay: 50ms;
}
.kva_main_msg.loaded span:nth-child(3) {
  transition-delay: 100ms;
}
.kva_main_msg.loaded span:nth-child(4) {
  transition-delay: 150ms;
}
.kva_main_msg.loaded span:nth-child(5) {
  transition-delay: 200ms;
}
.kva_main_msg.loaded span:nth-child(6) {
  transition-delay: 250ms;
}
.kva_main_msg.loaded span:nth-child(7) {
  transition-delay: 300ms;
}
.kva_main_msg.loaded span:nth-child(8) {
  transition-delay: 350ms;
}
.kva_main_msg.loaded span:nth-child(9) {
  transition-delay: 400ms;
}
.kva_main_msg.loaded span:nth-child(10) {
  transition-delay: 450ms;
}
.kva_main_msg.loaded span:nth-child(11) {
  transition-delay: 500ms;
}
.kva_main_msg.loaded span:nth-child(12) {
  transition-delay: 550ms;
}

.kva_person {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 1;
}
.kva_person img {
  vertical-align: bottom;
}
.kva_person.p01 img {
  width: calc(100vw*670/1600);
  max-width: 670px;
}
.kva_person.p02 img {
  width: calc(100vw*796/1600);
  max-width: 796px;
}
.kva_person.p03 img {
  width: calc(100vw*653/1600);
  max-width: 653px;
}
.kva_person.p04 img {
  width: calc(100vw*946/1600);
  max-width: 946px;
  /* padding-left: calc(100vw*300/1600); */
  margin-left: calc(100vw*300/1600);
}
.kva_person.p05 img {
  width: calc(100vw*662/1600);
  max-width: 662px;
}

.kva_wave {
  display: none;
  width: 400px;
  height: 400px;
  position: absolute;
  transform: translate(-50%, -50%);
}
.kva_wave_insvg {
  width: 400px;
  height: 400px;
  background: rgba(170, 230, 50, 0.8);
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  animation: kva_animationWave cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay:0.5s;
  animation-iteration-count: infinite;
}
.kva_wave2_insvg {
  width: 400px;
  height: 400px;
  background: rgba(170, 230, 50, 0.8);
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  animation: kva_animationWave cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay: 0.65s;
  animation-iteration-count: infinite;
}
@keyframes kva_animationWave {
  0% {
    opacity: 0;
    transform:  scale(0.00);
  }
  1% {
    opacity: 1;
  }
  20% {
    background: rgba(170, 230, 50, 0.9);
  }
  100% {
    transform:  scale(1) ;
    background: rgba(170, 230, 50, 0.0);
  }
}

.mark {
/*
  animation: kva_animationWave_svg cubic-bezier(0,.54,.53,1) 2s;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
*/
}
@keyframes kva_animationWave_svg {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  20% {
    fill: rgba(170, 230, 50, 0.9);
  }
  100% {
    fill: rgba(170, 230, 50, 0.0);
  }
}

.kva_person_zoom {
  opacity: 0;
  animation: kva_animationPerson 3s;
}
@keyframes kva_animationPerson {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@media screen and (max-width: 1200px) {
  .kva_main_msg span {
    font-size: 32px;
  }
}
@media screen and (max-width: 960px) {
  .kva_main_msg span {
    font-size: 6vw;
  }
}


/* ï¿½ï¿½ï¿½ï¿½mï¿½Fï¿½p */
.kva_wave2_svg {
  width: 200px;
  height: 200px;
  background: rgba(170, 230, 50, 0.8);
  border-radius: 200px;
  animation: kva_animationWave_svg cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay:1.07s;
  animation-iteration-count: infinite;
}
.kva_wave2 {
  display: none;
  width: 200px;
  height: 200px;
  background: rgba(170, 230, 50, 0.8);
  border-radius: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  opacity: 0;
  animation: kva_animationWave cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay:1.07s;
  animation-iteration-count: infinite;
}
