* {
  padding: 0;
  margin: 0;
  color: white;
  font-family: "Gilroy";
}

@media screen and (min-width: 1200px) and (max-width: 1300px) and (min-height: 680px) and (max-height: 760px) {
  .steps {
    zoom: 82%;
    /*background: red;*/
  }
}
@media screen and (min-width: 1630px) and (max-width: 1750px) and (min-height: 950px) and (max-height: 1150px) {
  .steps {
    zoom: 96%;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1500px) and (min-height: 750px) and (max-height: 900px) {
  .steps {
    zoom: 91%;
  }
}
body::-webkit-scrollbar-track, body::-webkit-scrollbar,
html::-webkit-scrollbar-track,
html::-webkit-scrollbar {
  width: 0px;
}

.changePage-enter-active,
.changePage-leave-active {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease;
}

.changePage-enter-from,
.changePage-leave-to {
  transform: translateX(-150%);
  opacity: 0;
}

.changePageWomen-enter-active,
.changePageWomen-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.changePageWomen-enter-from,
.changePageWomen-leave-to {
  transform: translateX(150%);
  opacity: 0;
}

body {
  background: rgb(0, 0, 0);
}

#ODM {
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#ODM .women {
  position: absolute;
  padding-right: 3.125vw;
  bottom: 0px;
  min-width: 43.1481vh;
  min-height: 65.463vh;
  right: 0px;
  overflow: hidden;
}
#ODM .women img {
  position: relative;
  width: 43.1481vh;
  height: 65.463vh;
  box-shadow: 0px 4px 224px 1px rgba(0, 0, 0, 0.15);
}
#ODM::-webkit-scrollbar {
  width: 0px;
}
#ODM ::-moz-selection {
  color: white;
  background-color: rgba(41, 77, 174, 0.8);
  border-radius: 2px;
}
#ODM ::selection {
  color: white;
  background-color: rgba(41, 77, 174, 0.8);
  border-radius: 2px;
}
#ODM .line {
  position: absolute;
  width: 100vw;
}
#ODM .line:first-child {
  top: 0;
  background: linear-gradient(180deg, rgba(19, 19, 19, 0.7) 0%, rgba(19, 19, 19, 0.7) 46.88%, rgba(19, 19, 19, 0) 100%);
  height: 25.7407vmin;
}
#ODM .line:nth-child(2) {
  z-index: 2;
  bottom: 0px;
  height: 25.7407vmin;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
#ODM .content2,
#ODM .content {
  position: relative;
  z-index: 1;
  width: 83%;
  height: 100%;
  margin-top: 3vw;
  display: flex;
  flex-direction: column;
}
#ODM .content2.pc,
#ODM .content.pc {
  margin-top: 10vh;
}
#ODM .content2 .logo_text,
#ODM .content .logo_text {
  display: flex;
  gap: 25px;
  align-items: center;
}
#ODM .content2 .logo_text .logo,
#ODM .content .logo_text .logo {
  width: 54px;
  height: 66px;
}
#ODM .content2 .logo_text p,
#ODM .content .logo_text p {
  font-weight: 700;
  font-size: 45px;
  width: 509px;
}
#ODM .content2 .st,
#ODM .content .st {
  margin-top: 7px;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.75);
}
#ODM .content2 .ib,
#ODM .content .ib {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  max-width: 327px;
  gap: 35px;
  margin-top: 35px;
}
#ODM .content2 .ib .dbl,
#ODM .content .ib .dbl {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
#ODM .content2 .ib .dbl .dName,
#ODM .content .ib .dbl .dName {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
#ODM .content2 .ib .dbl .bl,
#ODM .content .ib .dbl .bl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 53px;
  background: rgba(87, 92, 93, 0.28);
  -webkit-backdrop-filter: blur(4.5px);
          backdrop-filter: blur(4.5px);
  border-radius: 15px;
}
#ODM .content2 .ib .dbl .bl p,
#ODM .content .ib .dbl .bl p {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
#ODM .content2 .ib.con .dbl,
#ODM .content .ib.con .dbl {
  flex-grow: 1;
  flex-basis: 0;
}
#ODM .content2 .ib.con .dbl:first-child,
#ODM .content .ib.con .dbl:first-child {
  min-width: 209px;
}
#ODM .content2 .ib.con .dbl .bl p,
#ODM .content .ib.con .dbl .bl p {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  font-weight: 300;
}
#ODM .content2 .ib.con.btn .dbl .bl,
#ODM .content .ib.con.btn .dbl .bl {
  transition: background 0.2s ease;
}
#ODM .content2 .ib.con.btn .dbl .bl:hover,
#ODM .content .ib.con.btn .dbl .bl:hover {
  background: rgba(85, 85, 85, 0.8);
}
#ODM .content2 .ib.con.btn .dbl .bl p,
#ODM .content .ib.con.btn .dbl .bl p {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#ODM .content2 .steps,
#ODM .content .steps {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 60px;
  flex-wrap: wrap;
}
#ODM .content2 .steps .lineTwo,
#ODM .content2 .steps .lineOne,
#ODM .content .steps .lineTwo,
#ODM .content .steps .lineOne {
  width: 0px;
  height: 0px;
  position: absolute;
}
#ODM .content2 .steps .s_bl .step:nth-child(2),
#ODM .content .steps .s_bl .step:nth-child(2) {
  margin-top: 12px;
}
#ODM .content2 .steps .s_bl p:nth-child(2),
#ODM .content .steps .s_bl p:nth-child(2) {
  margin-top: 12px;
}
#ODM .content2 .steps .s_bl .step,
#ODM .content .steps .s_bl .step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
  border-radius: 10px;
}
#ODM .content2 .steps .s_bl .step p,
#ODM .content .steps .s_bl .step p {
  font-weight: 300;
  font-size: 2.3148vh;
  line-height: 2.4rem;
  letter-spacing: 0.225em;
  position: relative;
  z-index: 2;
  color: #FFFFFF;
}
#ODM .content2 .steps .s_bl .step span,
#ODM .content .steps .s_bl .step span {
  font-weight: 500;
}
#ODM .content2 .steps .s_bl .step.stepThree,
#ODM .content .steps .s_bl .step.stepThree {
  position: relative;
  width: 32.8704vh;
  height: 363px;
  background: linear-gradient(136.28deg, #0FDA4F 0%, #0F5826 100%);
}
#ODM .content2 .steps .s_bl .step.stepThree .f5,
#ODM .content .steps .s_bl .step.stepThree .f5 {
  position: absolute;
  width: 82px;
  height: 82px;
  left: 29px;
  bottom: 83px;
}
#ODM .content2 .steps .s_bl .step.stepThree .families,
#ODM .content .steps .s_bl .step.stepThree .families {
  position: absolute;
  height: 232px;
  width: auto;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#ODM .content2 .steps .s_bl .step.stepThree p,
#ODM .content .steps .s_bl .step.stepThree p {
  margin-left: 25px;
  margin-top: 35px;
  text-align: left;
  max-width: 207px;
  height: 119px;
}
#ODM .content2 .steps .s_bl .step.stepTwo,
#ODM .content .steps .s_bl .step.stepTwo {
  position: relative;
  width: 32.8704vh;
  height: 363px;
  background: linear-gradient(136.28deg, #5CEA6A 0%, #157D20 100%);
}
#ODM .content2 .steps .s_bl .step.stepTwo .btn,
#ODM .content .steps .s_bl .step.stepTwo .btn {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin-left: 25px;
  margin-bottom: 30px;
  background: #155B1B;
  border-radius: 5px;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  padding: 1.2037vh 1.7593vh;
  transition: background 0.2s ease;
}
#ODM .content2 .steps .s_bl .step.stepTwo .btn:hover,
#ODM .content .steps .s_bl .step.stepTwo .btn:hover {
  background: #247a2b;
}
#ODM .content2 .steps .s_bl .step.stepTwo .rageIcon,
#ODM .content .steps .s_bl .step.stepTwo .rageIcon {
  position: absolute;
  width: 70px;
  height: 66px;
  left: 25px;
  bottom: 120px;
}
#ODM .content2 .steps .s_bl .step.stepTwo .lastImg,
#ODM .content .steps .s_bl .step.stepTwo .lastImg {
  position: absolute;
  height: 305px;
  width: auto;
  right: 0px;
  bottom: 0px;
}
#ODM .content2 .steps .s_bl .step.stepTwo p,
#ODM .content .steps .s_bl .step.stepTwo p {
  margin-left: 25px;
  margin-top: 35px;
  text-align: left;
  max-width: 225px;
  height: 119px;
}
#ODM .content2 .steps .s_bl .step.stepOne,
#ODM .content .steps .s_bl .step.stepOne {
  align-items: center;
  width: 34.8704vh;
  height: 360px;
  background: linear-gradient(130.83deg, #5C83EA 0%, #1A3E9D 100%);
  margin-top: 0px;
}
#ODM .content2 .steps .s_bl .step.stepOne p,
#ODM .content .steps .s_bl .step.stepOne p {
  max-width: 30.463vh;
  text-align: center;
  margin-top: 22px;
}
#ODM .content2 .steps .s_bl .step.stepOne img,
#ODM .content .steps .s_bl .step.stepOne img {
  width: 100%;
}
#ODM .content2 .steps .s_bl p,
#ODM .content .steps .s_bl p {
  font-weight: 300;
  font-size: 2.3148vmin;
  letter-spacing: 0.225em;
  color: rgba(255, 255, 255, 0.6);
}
#ODM .content2 .steps.pc,
#ODM .content .steps.pc {
  gap: 0px;
  justify-content: space-between;
}
#ODM .content2 .steps.pc .lineOne,
#ODM .content .steps.pc .lineOne {
  margin-top: 248px;
  margin-left: 1.6146vw;
  width: 144px;
  height: 123px;
  position: unset;
}
#ODM .content2 .steps.pc .lineTwo,
#ODM .content .steps.pc .lineTwo {
  width: 137px;
  height: 82px;
  margin-left: 1.8229vw;
  margin-top: 224px;
  position: unset;
}
#ODM .content2 .steps.pc .s_bl:nth-child(3),
#ODM .content .steps.pc .s_bl:nth-child(3) {
  margin-top: 58px;
  margin-left: 1.5625vw;
}
#ODM .content2 .steps.pc .s_bl:nth-child(5),
#ODM .content .steps.pc .s_bl:nth-child(5) {
  margin-left: 1.7708vw;
}
#ODM .content2 .steps.pc.stepOne,
#ODM .content .steps.pc.stepOne {
  height: 330px;
  margin-top: 33px;
}
#ODM .pages {
  position: relative;
  z-index: 3;
  width: 100vw;
  margin-top: 30px;
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
#ODM .pages .page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#ODM .pages .page .p_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  -webkit-backdrop-filter: blur(4.5px);
          backdrop-filter: blur(4.5px);
  border-radius: 10px;
  transition: background 0.2s ease;
}
#ODM .pages .page p {
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
  color: rgba(255, 255, 255, 0.75);
}
#ODM .pages.play .page .p_bg {
  background: rgba(78, 198, 90, 0.28);
}
#ODM .pages.play .page.active .p_bg, #ODM .pages.play .page:hover .p_bg {
  background: rgba(41, 77, 174, 0.8);
}
#ODM .pages.play .page.active p, #ODM .pages.play .page:hover p {
  color: rgb(255, 255, 255);
}
#ODM .pages.main .page .p_bg {
  background: rgba(85, 85, 85, 0.28);
}
#ODM .pages.main .page.active .p_bg, #ODM .pages.main .page:hover .p_bg {
  background: rgba(85, 85, 85, 0.8);
}
#ODM .pages.main .page.active p, #ODM .pages.main .page:hover p {
  color: rgb(255, 255, 255);
}/*# sourceMappingURL=index.css.map */