html, body {
    overflow-x: hidden;
}
body {
  background: #fff;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
}
@media only screen and (min-width: 768px) {
  .box {
    transform: translate(-50%, -53%);
  }
}
@media only screen and (max-width: 375px) {
  .box {
    transform: translate(-50%, -63%);
  }
}
@media only screen and (max-width: 320px) {
  .box {
    transform: translate(-50%, -64%);
  }
}

.box::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 75%;
}
.box canvas {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.box .star {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
}
.wrap {
  height: 100%;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: relative;
}
.wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}
.wrap .winPart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transition: all 0.3s ease-in-out;
  display: none;
}
.wrap .winPart.active {
  display: block;
}
.wrap .winPart::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
}
.wrap .winPart.active .light {
  position: absolute;
  top: 0vw;
  width: 100%;
  height: 100%;
}
.wrap .winPart.active .light::after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/light.png);
  background-size: 100% 100%;
  -webkit-animation: light 0.5s ease-in;
  -moz-animation: light 0.5s ease-in;
  -o-animation: light 0.5s ease-in;
  animation: light 1s ease-in;
}
.wrap .winPart .winFruit {
  width: 93%;
  margin: 5% auto;
}
.wrap .winPart .point {
  position: absolute;
  width: 35vw;
  left: 29%;
  top: 50%;
}
.wrap .winPart.active .zoomEffect {
  width: 80vw;
  height: 80vw;
  position: absolute;
  left: 10vw;
  top: 60vw;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation: zoomeffct 0.4s ease-in-out;
  -moz-animation: zoomeffct 0.4s ease-in-out;
  -o-animation: zoomeffct 0.4s ease-in-out;
  animation: zoomeffct 0.4s ease-in-out;
}
.wrap .sure {
  width: 45vw;
  height: 15vw;
  background-image: url(../images/CTA_sure.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  left: 27.5vw;
  bottom: 10vw;
  z-index: 14;
  position: absolute;
  display: none;
}
/* .wrap .sure:hover {
  background-image: url(../images/CTA_sure_hover.png);
} */

.wrap .sectionOne {
  height: 160vw;
  /* height: 145vw; */
  background-position: top center;
  background: transparent;
  overflow: hidden;
}
.wrap .sectionOne .topic {
  position: relative;
  top: 2%;
  left: 0%;
  transform: translate(0%, 0%);
  width: 100%;
  z-index: 1;
}
.wrap .sectionOne .topic img {
  width: 100%;
}
.wrap .sectionOne .btnImg {
  width: 54vw;
  height: 20vw;
  background-image: url(../images/CTA.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  position: absolute;
  left: 23vw;
  bottom: -3vw;
  z-index: 2;
}
.wrap .sectionOne .btnImg:hover {
  background-image: url(../images/CTA_clicked.png);
}

.wrap .sectionTwo {

  background: #fff;
}
.wrap .sectionTwo h3 {
  color: #003c79;
  margin: 1em auto;
  text-align: center;
  font-size: 5vw;
}
.wrap .sectionTwo h3::before {
  display: none;
}
.wrap .sectionTwo h3::after {
  display: none;
}
.wrap .sectionTwo h3 span {
  position: relative;
  display: inline-block;
  color: #003c79;
}
.wrap .sectionTwo h3 span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -35vw;
  width: 30vw;
  height: 2px;
  display: inline-block;
  background-color: #003c79;
}
.wrap .sectionTwo h3 span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -35vw;
  width: 30vw;
  height: 2px;
  display: inline-block;
  background-color: #003c79;
}
.wrap .sectionTwo ul li {
  list-style-type: none;
  color: #003c79;
  margin-bottom: 5px;
  position: relative;
  letter-spacing: 0px;
  text-align: justify;
  font-size: 4vw;
}
.wrap .sectionTwo ul li::before {
  left: -14px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  display: inline-block;
  background-color: #003c79;
  background-image: none;
  transform: rotate(45deg);
}



@keyframes zoomeffct {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-o-keyframes zoomeffct {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes zoomeffct {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes zoomeffct {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes light {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes light {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes light {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes light {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

body .wrap .terminal {
  width: 622px;
  height: 495px;
  background: url(../images/spritesheet2.png);
  background-repeat: no-repeat;
}

body .wrap .terminal.active {
  animation: sprite 2s steps(6) forwards;
  -webkit-animation: sprite 2s steps(6) forwards;
}

@keyframes sprite {
  from {
    background-position: 0;
  }
  to {
    background-position: -4267px;
  }
}
@-webkit-keyframes sprite {
  from {
    background-position: 0;
  }
  to {
    background-position: -4267px;
  }
}

.draw_times {
  text-align: center;
  position: relative;
  top: 3%;
  left: 50%;
  transform: translate(-50%, 20%);
  width: 100%;
  font-size: 6vw;
  font-weight: bold;
  color: #1c3b95;
  letter-spacing: 0px;
  /* filter: drop-shadow(-2px -2px 0.3px #261208) drop-shadow(2px -2px 0.3px #261208) drop-shadow(-2px 2px 0.3px #261208) drop-shadow(2px 2px 0.3px #261208); */
  /* text-shadow:  0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d,
                0 0 4px #2d1d0d; */
}
.draw_times .counts {
  text-align: center;
  display: inline-block;
  color: #aced52;
  font-weight: 900;
  font-family: Arial;
  margin: 0 3px;
  font-size: 7vw;
  letter-spacing: 1px;
  text-shadow:  0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d,
                0 0 5px #13488d;
  /* text-shadow: none; */
  /* filter: drop-shadow(-2px -2px 0.3px #f26a35) drop-shadow(2px -2px 0.3px #f26a35) drop-shadow(-2px 2px 0.3px #f26a35) drop-shadow(2px 2px 0.3px #f26a35); */
}

.draw_times.active {
  animation: drawMoveUp 0.8s 0.4s;
  animation-fill-mode: forwards;
}

@keyframes drawMoveUp {
  to {
    top: 15%;
    opacity: 0;
  }
}
