@charset "UTF-8";

main {
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

video {
  width: 196.41vw;
  position: relative;
}

#first {
  align-items: center;
  position: fixed;
  z-index: 1;
  width: 100vw;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#first h1 {
  font-size: 5.13vw;
  line-height: 11vw;
  text-align: center;
  font-weight: 700;
  padding: 2vw 0 1vw;
}

#first h1 span {
  font-size: 8.46vw;
}

#first p,
#second {
  padding: 0 7.69vw;
}

#second {
  background-color: #fff;
  position: relative;
  z-index: 2;
  margin-top: 100vh;
  width: 100vw;
  padding-bottom: 2vw;
}

#second::before {
  content: "";
  display: block;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -9vw;
  width: 298.46vw;
  height: 298.46vw;
  left: -100%;
  z-index: 2;
}

#secondContent {
  position: relative;
  z-index: 3;
}

#sectionIcon {
  display: block;
  width: 21.03vw;
  margin: -19.51vw auto 8vw;
}

#second h1 {
  font-size: 5.9vw;
  line-height: 7.69vw;
  margin-bottom: 10.51vw;
  text-align: center;
  font-weight: 600;
  letter-spacing: -.3vw;
}

p {
  font-size: 3.85vw;
  line-height: 7.60vw;
  font-weight: 500;
}

#second p.HowToParticipate {
  text-align: center;
  font-size: 5.13vw;
  line-height: 7.69vw;
  padding: 0 0;
  margin: 10.51vw 0 7.69vw;
  border: 5px solid #00CC49;
  color: #00A039;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 84.62vw;
  height: 15.38vw;
}

#second a {
  display: block;
  background-image: linear-gradient(45deg, rgb(0, 185, 28) 49%, rgb(0, 217, 118));
  background-image: linear-gradient(45deg, #00b91c 0%, #00d976 33%, #00b91c 66%, #00d976 100%);
  background-size: 300%;
  background-position-x: 0;
  transition: all .4s ease;
  color: #fff;
  font-weight: 500;
  border-radius: 9999px;
  height: 16.92vw;
  width: 84.62vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0 6.15vw 0 9.49vw;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .18);
  font-size: 4.36vw;
  line-height: 5.9vw;
}

#second a:hover {
  background-position-x: 100%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}

#second a:active {
  transition: all .1s;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .18);
}

#second a img {
  width: 6.3vw;
}

.greenTxt {
  text-indent: -1rem;
  padding-left: 1rem;
}

.greenTxt::before {
  content: "●";
  display: inline-block;
  font-size: 3vw;
  color: #00CC49;
}

#Qr {
  display: block;
  width: 69.23vw;
  margin: 11.28vw auto 12.82vw;
}

#step {
  width: 100vw;
  margin: 5.28vw 0 11.92vw -7.69vw;
}

#step .controllScrollWrap {
  padding-left: 7.69vw;
}

#step li {
  margin: 0 9.74vw 0 0;
  width: 66.41vw;
  height: 83.08vw;
  display: flex;
  flex-flow: column;
}

#step li p {
  position: absolute;
  top: 0;
  left: 17.95vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 11.03vw;
}
#step li p span{
    display: flex;
    align-items: center;
}
#step li p img {
  width: 4.62vw;
}

#step li>img {
  width: 100%;
  margin-top: auto;
}

#second a.mb44 {
  margin-bottom: 11.28vw;
}

.controllScrollButtonNext {
  width: 13.59vw;
  height: 13.59vw;
  border: 2px solid #fff;
  background-color: #02B91B;
  border-radius: 50%;
  right: 1vw;
  top: 3vw;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .18);
}

.controllScrollButtonNext img {
  width: 2.67vw;
  filter: brightness(0) saturate(100%) invert(100%) sepia(16%) saturate(7452%) hue-rotate(292deg) brightness(116%) contrast(109%);
}

footer {
  position: relative;
  background-color: #fff;
  z-index: 3;
  margin-bottom: 10vw;
}