.div,
.div * {
  box-sizing: border-box;
}
.div {
  background: #121212;
  height: 100vh;
  position: relative;
  overflow:auto;
}
.ellipse-5 {
  background: radial-gradient(
    closest-side,
    rgba(36, 115, 158, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-radius: 50%;
  width: 795.97px;
  height: 766.12px;
  position: absolute;
  right: -310.97px;
  top: 5078.86px;
  transform-origin: 0 0;
  transform: rotate(-0.494deg) scale(1, 1);
  mix-blend-mode: lighten;
}
.ellipse-1 {
  background: radial-gradient(
    closest-side,
    rgba(103, 141, 255, 0.5) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  border-radius: 50%;
  width: 797.79px;
  height: 727.63px;
  position: absolute;
  left: -474px;
  top: 2262.88px;
  transform-origin: 0 0;
  transform: rotate(-0.494deg) scale(1, 1);
  mix-blend-mode: lighten;
}
.ellipse-4 {
  background: radial-gradient(
    closest-side,
    rgba(36, 89, 158, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  border-radius: 50%;
  width: 1029.49px;
  height: 990.88px;
  position: absolute;
  left: 1230px;
  top: 2929.88px;
  transform-origin: 0 0;
  transform: rotate(-0.494deg) scale(1, 1);
  mix-blend-mode: lighten;
}
.angelo-abear-kn-t-kij-60-p-3-g-unsplash-1 {
  width: 1680.21px;
  height: 945.12px;
  position: absolute;
  left: 904.83px;
  top: 4017px;
  transform-origin: 0 0;
  transform: rotate(5.726deg) scale(-1, 1);
  mix-blend-mode: color-dodge;
  object-fit: cover;
  aspect-ratio: 1680.21/945.12;
}
.angelo-abear-kn-t-kij-60-p-3-g-unsplash-12 {
  width: 1680.21px;
  height: 945.12px;
  position: absolute;
  right: -2298.04px;
  top: 965px;
  transform-origin: 0 0;
  transform: rotate(5.726deg) scale(-1, 1);
  mix-blend-mode: color-dodge;
  object-fit: cover;
  aspect-ratio: 1680.21/945.12;
}
._1 {
  width: 34%;
  height: 966px;
  position: absolute;
  right: 13%;
  top: 100px;
  overflow: visible;
  aspect-ratio: 653.5/966;
}
.frame-2 {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  display:flex;
  justify-content:space-between;
}

.logo {
 display:flex;
 justify-content:space-between;
 position: absolute;
 left: 13%;
 top:30%;
 width:200px;
}
._12 {
  height: 25px;
  cursor: pointer;
}

._12:hover {
    
    color: #17B2FF;
  }


.frame-3 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  right: 13%;
  top: 30%;

}

@media screen and (max-width: 1024px) {
    .frame-3 {
        display:none;
    }
    
    .gnb_button {
        display: block;
        position: absolute;
        top: 30%;
        right: 13%;
        width: 24px;
    }
    .gnb_button span {
   
        display: block;
        height: 2px;
        margin-bottom:8px;
        background-color: white;
        transition: transform .35s cubic-bezier(.9, -.6, .3, 1.6), width .15s ease;
    }
    .frame-11{
       display: flex;
       flex-direction: column;
       gap: 20px;
       align-items: center;
       justify-content: flex-start;
       position: absolute;
       right: 13%;
       top: 5%;
      
    }
    .div100 {
         color: #ffffff;
         text-align: left;
         font-family: "Pretendard-Medium", sans-serif;
         font-size: 20px;
         font-weight: 500;
         position: relative;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
      
    }
    .div100:hover{
      color: #17B2FF;
    }

}
.div2 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.div2:hover {
    
    color: #17B2FF;
  }


.ellipse-3 {
  background: radial-gradient(
    closest-side,
    rgba(103, 141, 255, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  border-radius: 50%;
  width: 736.73px;
  height: 682.18px;
  position: absolute;
  left: calc(50% - 1072px);
  top: 100.35px;
  transform-origin: 0 0;
  transform: rotate(-0.494deg) scale(1, 1);
  mix-blend-mode: lighten;
}
.frame-5 {
  background: linear-gradient(
    180deg,
    rgba(119, 119, 119, 0.1) 0%,
    rgba(68, 68, 68, 0.1) 50%,
    rgba(119, 119, 119, 0.1) 100%
  );
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  width: 17.3%;
  height: 300px;
  position: absolute;
  left: 13%;
  top: 1316px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);

}
.div3 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: absolute;
  left: 40px;
  top: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._20 {
  color: #ffffff;
  text-align: left;
  position: absolute;
  right: 40px;
  top: 190px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._20-span {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 55px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._20-span2 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._20-span3 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.frame-6 {
  background: linear-gradient(
    180deg,
    rgba(119, 119, 119, 0.1) 0%,
    rgba(68, 68, 68, 0.1) 50%,
    rgba(119, 119, 119, 0.1) 100%
  );
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  width: 17.3%;
  height: 300px;
  position: absolute;
  right: 50.8%;
  top: 1216px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
._80 {
  color: #ffffff;
  text-align: left;
  position: absolute;
  right: 40px;
  top: 190px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._80-span {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 55px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._80-span2 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._80-span3 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.frame-7 {
  background: linear-gradient(
    180deg,
    rgba(119, 119, 119, 0.1) 0%,
    rgba(68, 68, 68, 0.1) 50%,
    rgba(119, 119, 119, 0.1) 100%
  );
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  width: 17.3%;
  height: 300px;
  position: absolute;
  right: 31.9%;
  top: 1316px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
._200 {
  color: #ffffff;
  text-align: right;
  position: absolute;
  right: 34px;
  top: 190px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
._200-span {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 55px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._200-span2 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
._200-span3 {
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: -0.05em;
  font-weight: 700;
}
.frame-8 {

  background: linear-gradient(
    180deg,
    rgba(119, 119, 119, 0.1) 0%,
    rgba(68, 68, 68, 0.1) 50%,
    rgba(119, 119, 119, 0.1) 100%
  );
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  width: 17.3%;
  height: 300px;
  position: absolute;
  right: 13%;
  top: 1216px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);

}

@media screen and (max-width: 1024px) {
    .frame-5 {
       top: 1066px;
       width:42.6%;
       left:5.3%;
    }
    .frame-6 {
       right: 5.3%;
       top: 966px;
       width:42.6%;
    }
    .frame-7 {
       left: 5.3%;
       top: 1516px;
       width:42.6%;
    }

    .frame-8 {
       right: 5.3%;
       top: 1416px;
       width:42.6%;
    }

    .div3 {
       left:20px;
    }

}
.arif-riyanto-v-jp-w-z-6-h-g-bg-unsplash-1 {
  width: 360.05px;
  height: 541px;
  position: absolute;
  left: -4px;
  top: calc(50% - 350px);
  mix-blend-mode: lighten;
  object-fit: cover;
  aspect-ratio: 360.05/541;
}
.frame-35 {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-start;
  /*width: 624px;*/
  position: absolute;
  left: 13%;
  top: 377px;
}

@media screen and (max-width: 1024px) {
   .frame-35 {
       left:13%;
       right:13%;
   }
}
.frame-4 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div4 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.it {
  color: #ffffff;
  text-align: left;
  font-family: "-", sans-serif;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.it-span {
  font-family: "Pretendard-Regular", sans-serif;
}
.it-span2 {
  font-family: "Pretendard-Bold", sans-serif;
  font-weight: 700;
}
.frame-34, .frame-341 {
  border-radius: 50px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  padding: 6px 40px 6px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  position: relative;
  overflow: hidden;
}
.frame-21 {
  padding: 10px 0px 10px 0px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div5 {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.more1, .more2 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 20px;
  line-height: 150%;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-63 {
  display: flex;
  flex-direction: column;
  gap: 250px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 1916px;
}
.frame-64 {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  width:74%;
}
.frame-10 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div6 {
  color: #ffffff;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div7 {
  color: #ffffff;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-59 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}
.frame-56 {
  display: flex;
  flex-direction: row;
  gap: 20%;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-52 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 32.9%;
  position: relative;
}
.frame-48 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-47 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  /*width: 166px;*/
  position: relative;
}
.frame-19 {
  border-radius: 50px;
  border-style: solid;
  border-color: #666666;
  border-width: 1px;
  padding: 6px 16px 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.s-w-h-w {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 16px;
  line-height: 150%;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.div8 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 60px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}



.div9 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-49 {
  padding: 10px 80px 10px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 24px;
  position: relative;
}
.div10 {
  color: #17b2ff;
  text-align: left;
  font-family: "Pretendard-Medium", sans-serif;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 500;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 424px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.arrow-1 {
  flex-shrink: 0;
  width: 40px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.frame-15 {
  background: #83a9d9;
  border-radius: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  flex-shrink: 0;
  width: 45.1%;
  height: 467px;
  position: relative;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);
  aspect-ratio: 640.31/467;
}
.image {
  border-radius: 30px;
  width: 434.3px;
  height: 317px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 434.3/317;
}
.frame-57 {
  display: flex;
  flex-direction: row;
  gap: 20%;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-51 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 32.9%;
  position: relative;
}
.div11 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 16px;
  line-height: 150%;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.arrow-12 {
  flex-shrink: 0;
  width: 40px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.frame-14 {
  background: #a7d5cd;
  border-radius: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  flex-shrink: 0;
  width: 45.1%;
  height: 467px;
  position: relative;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);
  aspect-ratio: 640.31/467;
}
.image2 {
  border-radius: 15px;
  width: 435.67px;
  height: 318px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 435.67/318;
}
.frame-58 {
  display: flex;
  flex-direction: row;
  gap: 20%;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-50 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 32.9%;
  position: relative;
}
.arrow-13 {
  flex-shrink: 0;
  width: 40px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.frame-9 {
  background: #c5b2dd;
  border-radius: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  flex-shrink: 0;
  width: 45.1%;
  height: 467px;
  position: relative;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  backdrop-filter: blur(10px);
  aspect-ratio: 640.31/467;
}
.mask-group {
  width: 242px;
  height: 311px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 242/311;
}
.frame-592 {
  display: flex;
  flex-direction: row;
  gap: 20%;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

@media screen and (max-width: 1024px) {
    .frame-56, .frame-57,.frame-58,.frame-592 {
        flex-direction: column;
        gap:30px;
                
    }
    .frame-52, .frame-51, .frame-50, .frame-15, .frame-14, .frame-9{
       width:100%;
    }

}
.arrow-14 {
  flex-shrink: 0;
  width: 40px;
  height: 0px;
  position: relative;
  overflow: visible;
}
.frame-62 {
  display: flex;
  flex-direction: column;
  gap: 200px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-61 {
  display: flex;
  flex-direction: column;
  gap: 250px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 74%;
  position: relative;
}
.frame-60 {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-17 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-67 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-66 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-32 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 74%;
  position: relative;
}
.div12 {
  color: #ffffff;
  text-align: center;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  width: 1440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-65 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-24 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-22 {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px 20px 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  position: relative;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.image-4 {
  flex-shrink: 0;
  /*width: 165px;*/
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 165/32;
}

.image-5 {
  flex-shrink: 0;
  /*width: 181px;*/
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 181/32;
}

.kore-2-1 {
  flex-shrink: 0;
  /*width: 139px;*/
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 139/32;
}

._13 {
  flex-shrink: 0;
  /*width: 177px;*/
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 177/32;
}

._14 {
  flex-shrink: 0;
  /*width: 109px;*/
  height: 32px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 109/32;
}

.frame-252 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-33 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 74%;
  position: relative;
}
.div13 {
  color: #ffffff;
  text-align: center;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.frame-262 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-272 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.rectangle-2 {
  background: linear-gradient(
    180deg,
    rgba(20, 37, 46, 0) 0%,
    rgba(18, 18, 18, 1) 100%
  );
  flex-shrink: 0;
  width: 1440px;
  height: 334px;
  position: absolute;
  left: 99px;
  top: 522px;
}
.frame-18 {
  background: linear-gradient(
    180deg,
    rgba(119, 119, 119, 0.1) 0%,
    rgba(68, 68, 68, 0.1) 50%,
    rgba(119, 119, 119, 0.1) 100%
  );
  background-image: url("./images/_010-10.png");
  background-repeat: no-repeat;
  border-radius: 30px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  border-width: 1px;
  flex-shrink: 0;
  width: 74%;
  position: relative;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display:flex;
}



.frame-46 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  justify-content: flex-start;
  width: 45.1%;
  margin-left:5.6%;
  margin-right: 5.6%;
  margin-top: 80px;
}
.frame-45 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-37 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div14 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Medium", sans-serif;
  font-size: 18px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-36 {
  background: #222222;
  border-radius: 8px;
  align-self: stretch;
  flex-shrink: 0;
  height: 50px;
  position: relative;
  overflow: hidden;
  color:white;
}
.frame-44 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-452 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-43 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}
.frame-362 {
  background: #222222;
  border-radius: 8px;
  align-self: stretch;
  flex-shrink: 0;
  height: 200px;
  position: relative;
  overflow: hidden;
  color:white;
}
.frame-192 {
  border-radius: 50px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  padding: 6px 40px 6px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  position: relative;
  overflow: hidden;
}
.div15 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 20px;
  line-height: 150%;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-332 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  width:30%;
  margin-right: 5.6%;
  margin-left: 5.6%;
  margin-top: 80px;
}
.div16 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Bold", sans-serif;
  font-size: 50px;
  line-height: 130%;
  letter-spacing: -0.05em;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.div17 {
  color: #ffffff;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 20px;
  line-height: 150%;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media screen and (max-width: 1024px) {
   .div4,.div6,.div8,.div16 {
       font-size: 40px;
   }
}

@media screen and (max-width: 1024px) {
    .frame-18 {
        flex-direction: column;
        align-items:center;        
    }
    .frame-46, .frame-332{
        width:80%;
    }

}

.frame-53 {
  align-self: stretch;
  flex-shrink: 0;
  height: 248px;
  position: relative;
  overflow: hidden;
}
._15 {
  width: 187.01px;
  height: 24px;
  position: absolute;
  left: 13%;
  top: 50px;
  overflow: visible;
  aspect-ratio: 187.01/24;
}
.frame-55 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  /*width: 466px;*/
  position: absolute;
  left: 13%;
  top: 104px;
}
.frame-54 {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
._155-sk-v-1-1-314-12902 {
  color: #999999;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 14px;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-1 {
  margin-top: -1px;
  border-style: solid;
  border-color: #666666;
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 10px;
  height: 0px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.tel-02-566-1805 {
  color: #999999;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 14px;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media screen and (max-width: 1024px) {
    .frame-54 {
        flex-direction: column;
        align-items: flex-start;
        
    }
    .line-1 {
       display:none;

    }


}
.documentech-all-rights-reserved {
  color: #999999;
  text-align: left;
  font-family: "Pretendard-Regular", sans-serif;
  font-size: 14px;
  letter-spacing: -0.05em;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}