:root {
  /* 1px = 100vw/1920 */
  --unit: calc(100vw / 1920);
}

/* 기본 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #040404;
  color: white;
  line-height: 1.6;
}
a {
    text-decoration: none;
    color: #fff;
}
/* .web 영역은 100% 폭 */
.web {
  background-color: #040404;
  position: relative;
  width: 100%;
}

/* .div: 원본 높이 9000px 적용 */
.web .div {
  position: relative;
  width: 100%;
  height: calc(9000 * var(--unit));
  background-color: #040404;
}

/* .overlap: (width:1370px; height:579px; top:2684px; left:275px;) */
.web .overlap {
  position: absolute;
  width: calc(1370 * var(--unit));
  height: calc(579 * var(--unit));
  top: calc(2684 * var(--unit));
  left: calc(275 * var(--unit));
}

/* .overlap-group: 동일 크기, top:0, left:0 */
.web .overlap-group {
  position: absolute;
  width: calc(1370 * var(--unit));
  height: calc(579 * var(--unit));
  top: 0;
  left: 0;
}

/* .group: (width:359px; height:500px; top:79px; left:512px;) */
.web .group {
  position: absolute;
  width: calc(359 * var(--unit));
  height: calc(500 * var(--unit));
  top: calc(79 * var(--unit));
  left: calc(512 * var(--unit));
  background-image: url(./1481-2.png);
  background-size: cover;
  background-position: 50% 50%;
}

/* .DHX-LOGO: (width:316px; height:158px; top:171px; left:15px;) */
.web .DHX-LOGO {
  position: relative;
  width: calc(316 * var(--unit));
  height: calc(158 * var(--unit));
  top: calc(171 * var(--unit));
  left: calc(15 * var(--unit));
}

/* .img: (width:226px; height:107px; top:26px; left:46px;) */
.web .img {
  position: absolute;
  width: calc(226 * var(--unit));
  height: calc(107 * var(--unit));
  top: calc(26 * var(--unit));
  left: calc(46 * var(--unit));
}

/* .DHX-LA-art-tech: (font-size:32px; letter-spacing:-0.64px; line-height:48px;) */
.web .DHX-LA-art-tech {
  position: absolute;
  width: calc(1370 * var(--unit));
  top: 0;
  left: 0;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: calc(32 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.64 * var(--unit));
  line-height: calc(48 * var(--unit));
}

/* .text-wrapper: (width:369px; top:144px; left:903px; font-size:20px; letter-spacing:-0.40px; line-height:30px;) */
.web .text-wrapper {
  position: absolute;
  width: calc(369 * var(--unit));
  top: calc(144 * var(--unit));
  left: calc(903 * var(--unit));
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.40 * var(--unit));
  line-height: calc(30 * var(--unit));
}

/* .frame-custom: (width:1920px; height:1080px;) */
.frame-custom {
  position: relative;
  width: 100%;
  height: calc(1080 * var(--unit));
  background-color: #040404;
}

/* .overlap-custom in .frame-custom: (width:1440px; height:876px; top:104px; left:240px;) */
.frame-custom .overlap-custom {
  position: absolute;
  width: calc(1440 * var(--unit));
  height: calc(876 * var(--unit));
  top: calc(104 * var(--unit));
  left: calc(240 * var(--unit));
}

/* .human-body-man-made: (width:147px; height:266px; top:202px; left:1102px;) */
.frame-custom .human-body-man-made {
  position: absolute;
  width: calc(147 * var(--unit));
  height: calc(266 * var(--unit));
  top: calc(202 * var(--unit));
  left: calc(1102 * var(--unit));
  object-fit: cover;
}

/* .actor-recording-film: (width:201px; height:282px; top:463px; left:137px;) */
.frame-custom .actor-recording-film {
  position: absolute;
  width: calc(201 * var(--unit));
  height: calc(282 * var(--unit));
  top: calc(463 * var(--unit));
  left: calc(137 * var(--unit));
  object-fit: cover;
}

/* .element in .frame-custom: (width:146px; height:200px; top:192px; left:34px;) */
.frame-custom .element {
  position: absolute;
  width: calc(146 * var(--unit));
  height: calc(200 * var(--unit));
  top: calc(192 * var(--unit));
  left: calc(34 * var(--unit));
  object-fit: cover;
}
.actor-recording-film-element{
  position: absolute;
  width: calc(146 * var(--unit));
  height: calc(200 * var(--unit));
  top: calc(192 * var(--unit));
  left: calc(34 * var(--unit));
  object-fit: cover;
}
/* .overlap-group-custom in .frame-custom */
.frame-custom .overlap-group-custom {
  position: absolute;
  width: 100%;
  height: calc(761 * var(--unit));
  top: 0;
  left: 0;
}

/* .group-custom in .overlap-group-custom: (width:428px; height:650px; top:111px; left:506px;) */
.frame-custom .group-custom {
  position: absolute;
  width: calc(428 * var(--unit));
  height: calc(650 * var(--unit));
  top: calc(111 * var(--unit));
  left: calc(506 * var(--unit));
  background-image: url(./SOUL_Turn.gif);
  background-size: 100% 100%;
}

/* .digital-human-x in .frame-custom: (width:1440px; height:192px;) */
.frame-custom .digital-human-x {
  position: absolute;
  width: calc(1440 * var(--unit));
  height: calc(192 * var(--unit));
  top: 0;
  left: 0;
}

/* .ai-images in .frame-custom: (width:272px; height:272px; top:604px; left:1168px;) */
.frame-custom .ai-images {
  position: absolute;
  width: calc(272 * var(--unit));
  height: calc(272 * var(--unit));
  top: calc(604 * var(--unit));
  left: calc(1168 * var(--unit));
  object-fit: cover;
}

/* .header-custom in .frame-custom: (width:1920px; height:80px;) */
.frame-custom .header-custom {

  width: 100%;
  height: calc(80 * var(--unit));
  top: 0;
  left: 0;
  background-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      transition: transform 0.3s ease; /* 부드러운 전환 효과 */
      z-index: 1000;
      transform: translateY(0); /* 초기 상태 */
}

/* .img-custom in header-custom: (width:51px; height:24px; top:28px; left:263px;) */
.frame-custom .img-custom {
  position: absolute;
  width: calc(51 * var(--unit));
  height: calc(24 * var(--unit));
  top: calc(28 * var(--unit));
  left: calc(263 * var(--unit));
}

/* .div-custom in header-custom: (top:33px; left:1346px;) */
.frame-custom .div-custom {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--unit));
  position: absolute;
  top: calc(33 * var(--unit));
  left: calc(1346 * var(--unit));
}

/* .text-wrapper-custom in header-custom: (font-size:12px) */
.frame-custom .text-wrapper-custom {
  position: relative;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(12 * var(--unit));
}

/* .text-wrapper-2-custom in header-custom: (font-size:12px) */
.frame-custom .text-wrapper-2-custom {
  position: relative;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(12 * var(--unit));
}

/* .overlap-group-wrapper-custom in header-custom: (width:78px; height:23px; top:29px; left:1598px;) */
.frame-custom .overlap-group-wrapper-custom {
  position: absolute;
  width: calc(78 * var(--unit));
  height: calc(23 * var(--unit));
  top: calc(29 * var(--unit));
  left: calc(1598 * var(--unit));
}

/* .overlap-group-2-custom in header-custom: (width:76px; height:23px;) */
.frame-custom .overlap-group-2-custom {
  position: relative;
  width: calc(76 * var(--unit));
  height: calc(23 * var(--unit));
}

/* .text-wrapper-3-custom in header-custom: (font-size:12px; top:4px; left:0;) */
.frame-custom .text-wrapper-3-custom {
  position: absolute;
  top: calc(4 * var(--unit));
  left: 0;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(12 * var(--unit));
}

/* .carbon-arrow-left-custom: (width:23px; height:23px; left:53px;) */
.frame-custom .carbon-arrow-left-custom {
  position: absolute;
  width: calc(23 * var(--unit));
  height: calc(23 * var(--unit));
  left: calc(53 * var(--unit));
  top: 0;
}

/* 이하, 원본 CSS의 남은 요소들도 모두 같은 방식으로 변환합니다. */

/* .overlap-2: (width:1920px; height:2776px; top:3514px; left:0;) */
.web .overlap-2 {
  position: absolute;
  width: 100%;
  height: calc(2776 * var(--unit));
  top: calc(3514 * var(--unit));
  left: 0;
}

/* .text: (top:88px; left:95px; font-size:12px;) */
.web .text {
  position: absolute;
  top: calc(88 * var(--unit));
  left: calc(95 * var(--unit));
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: #040404;
  font-size: calc(12 * var(--unit));
  letter-spacing: 0;
  line-height: normal;
}

/* .text-2: (top:294px; left:95px; font-size:12px;) */
.web .text-2 {
  position: absolute;
  top: calc(294 * var(--unit));
  left: calc(95 * var(--unit));
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: #040404;
  font-size: calc(12 * var(--unit));
  letter-spacing: 0;
  line-height: normal;
}

/* .frame-2: (width:1920px; height:800px; top:1976px; left:0;) */
.web .frame-2 {
  position: absolute;
  width: 100%;
  height: calc(800 * var(--unit));
  top: calc(1976 * var(--unit));
  left: 0;
  background-color: #040404;
}

/* .text-wrapper-2: (top:177px; left:240px; font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-2 {
  position: absolute;
  top: calc(177 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  text-align: center;
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .frame-3: (width:968px; top:178px; left:712px; gap:12px;) */
.web .frame-3 {
  display: flex;
  flex-direction: column;
  width: calc(968 * var(--unit));
  align-items: flex-start;
  gap: calc(12 * var(--unit));
  position: absolute;
  top: calc(178 * var(--unit));
  left: calc(712 * var(--unit));
}

/* .frame-4: 내부 flex, gap:12px, align-self:stretch */
.web .frame-4 {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--unit));
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* .logo-wrapper: (width:184px; height:112px; padding:29px 15px; gap:10px;) */
.web .logo-wrapper {
  background-color: #181818;
  display: flex;
  flex-direction: column;
  width: calc(184 * var(--unit));
  height: calc(112 * var(--unit));
  align-items: flex-start;
  gap: calc(10 * var(--unit));
  padding: calc(29 * var(--unit)) calc(15 * var(--unit));
  position: relative;
}

/* .logo: (width:154px; height:54px;) */
.web .logo {
  position: relative;
  width: calc(154 * var(--unit));
  height: calc(54 * var(--unit));
}

/* .text-wrapper-3 in logo: (top:10px; left:39px; font-size:32px; letter-spacing:-0.96px;) */
.web .text-wrapper-3 {
  position: absolute;
  top: calc(10 * var(--unit));
  left: calc(39 * var(--unit));
  font-family: "Helvetica-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: calc(32 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.96 * var(--unit));
  line-height: calc(32 * var(--unit));
  white-space: nowrap;
}

/* .frame-5: (width:968px; top:510px; left:712px;) */
.web .frame-5 {
  display: flex;
  width: calc(968 * var(--unit));
  align-items: center;
  gap: calc(12 * var(--unit));
  position: absolute;
  top: calc(510 * var(--unit));
  left: calc(712 * var(--unit));
}

/* .div-wrapper in frame-5: (width:184px; height:112px; padding:29px 15px; gap:10px;) */
.web .div-wrapper {
  display: flex;
  flex-direction: column;
  width: calc(184 * var(--unit));
  height: calc(112 * var(--unit));
  align-items: flex-start;
  gap: calc(10 * var(--unit));
  padding: calc(29 * var(--unit)) calc(15 * var(--unit));
  position: relative;
}

/* .line: (width:968px; height:1px; top:461px; left:712px;) */
.web .line {
  width: calc(968 * var(--unit));
  height: calc(1 * var(--unit));
  top: calc(461 * var(--unit));
  left: calc(712 * var(--unit));
  position: absolute;
  object-fit: cover;
}

/* .frame-6: (height:1988px; top:0; left:0;) */
.web .frame-6 {
  position: absolute;
  width: 100%;
  height: calc(1988 * var(--unit));
  top: 0;
  left: 0;
  background-color: #040404;
}

/* .overlap-group-2: (width:1440px; height:576px; top:706px; left:240px;) */
.web .overlap-group-2 {
  position: absolute;
  width: calc(1440 * var(--unit));
  height: calc(576 * var(--unit));
  top: calc(706 * var(--unit));
  left: calc(240 * var(--unit));
}

/* .OUR-TECHNOLOGY: (width:799px; height:459px; top:57px; left:320px;) */
.web .OUR-TECHNOLOGY {
  position: absolute;
  width: calc(799 * var(--unit));
  height: calc(459 * var(--unit));
  top: calc(57 * var(--unit));
  left: calc(320 * var(--unit));
  object-fit: cover;
}

/* .OUR-TECHNOLOGY-2: (width:800px; height:450px; top:57px; left:320px;) */
.web .OUR-TECHNOLOGY-2 {
  position: absolute;
  width: calc(800 * var(--unit));
  height: calc(450 * var(--unit));
  top: calc(57 * var(--unit));
  left: calc(320 * var(--unit));
  object-fit: cover;
}

/* .frame-wrapper */
.web .frame-wrapper {
  display: inline-flex;
  align-items: center;
  gap: calc(44 * var(--unit));
  position: absolute;
  top: calc(408 * var(--unit));
  left: 0;
}

/* .frame-7 */
.web .frame-7 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: relative;
  flex: 0 0 auto;
}

/* .text-wrapper-4 in frame-7: (font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-4 {
  position: relative;
  width: auto;
  margin-top: -1px;
  text-shadow: 0px calc(2 * var(--unit)) calc(2 * var(--unit)) #00000080;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: calc(66 * var(--unit));
  white-space: nowrap;
}

/* .frame-8 */
.web .frame-8 {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: relative;
  flex: 0 0 auto;
}

/* .text-wrapper-5 in frame-8: (font-size:36px; letter-spacing:-1.08px;) */
.web .text-wrapper-5 {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(36 * var(--unit));
  letter-spacing: calc(-1.08 * var(--unit));
  line-height: calc(36 * var(--unit));
  white-space: nowrap;
}

/* .p: (font-size:18px; letter-spacing:-0.36px; line-height:27px;) */
.web .p {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(18 * var(--unit));
  letter-spacing: calc(-0.36 * var(--unit));
  line-height: calc(27 * var(--unit));
}

/* .frame-9: (width:974px; left:466px;) */
.web .frame-9 {
  display: flex;
  flex-direction: column;
  width: calc(974 * var(--unit));
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: 0;
  left: calc(466 * var(--unit));
}

/* .OUR-TECHNOLOGY-3: (width:698px; font-size:66px;) */
.web .OUR-TECHNOLOGY-3 {
  position: relative;
  width: calc(698 * var(--unit));
  margin-top: -1px;
  text-shadow: 0px calc(2 * var(--unit)) calc(2 * var(--unit)) #00000080;
  font-family: "Instrument Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  line-height: calc(66 * var(--unit));
}

/* .span */
.web .span {
  font-style: italic;
  letter-spacing: calc(-0.44 * var(--unit));
}

/* .text-wrapper-6 */
.web .text-wrapper-6 {
  font-family: "Helvetica-Regular", Helvetica;
  letter-spacing: calc(-1.31 * var(--unit));
}

/* .frame-10 */
.web .frame-10 {
  display: flex;
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  box-shadow: 0px 0px calc(3.8 * var(--unit)) #00000080;
}

/* .text-wrapper-7 in frame-10: (font-size:36px; letter-spacing:-1.08px;) */
.web .text-wrapper-7 {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(36 * var(--unit));
  text-align: right;
  letter-spacing: calc(-1.08 * var(--unit));
  line-height: calc(36 * var(--unit));
  white-space: nowrap;
}

/* .frame-11: (width:695px; top:240px; left:240px;) */
.web .frame-11 {
  display: flex;
  flex-direction: column;
  width: calc(695 * var(--unit));
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: calc(240 * var(--unit));
  left: calc(240 * var(--unit));
}

/* .WHAT-WE-DO: (font-size:124px;) */
.web .WHAT-WE-DO {
  position: relative;
  width: auto;
  margin-top: -1px;
  text-shadow: 0px calc(2 * var(--unit)) calc(2 * var(--unit)) #00000080;
  font-family: "Instrument Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(124 * var(--unit));
  line-height: calc(124 * var(--unit));
}

/* .text-wrapper-8 */
.web .text-wrapper-8 {
  font-style: italic;
  letter-spacing: 0;
}

/* .text-wrapper-9 */
.web .text-wrapper-9 {
  font-family: "Helvetica-Regular", Helvetica;
  letter-spacing: calc(-4.61 * var(--unit));
}

/* .frame-12 */
.web .frame-12 {
  display: flex;
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* .DHX: (width:316px; font-size:18px; letter-spacing:-0.36px; line-height:27px;) */
.web .DHX {
  position: relative;
  width: calc(316 * var(--unit));
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(18 * var(--unit));
  letter-spacing: calc(-0.36 * var(--unit));
  line-height: calc(27 * var(--unit));
}

/* .frame-13: (width:795px; top:1522px; left:885px;) */
.web .frame-13 {
  display: flex;
  flex-direction: column;
  width: calc(795 * var(--unit));
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: calc(1522 * var(--unit));
  left: calc(885 * var(--unit));
}

/* .text-wrapper-10 in frame-13: (font-size:124px; letter-spacing:-1.24px;) */
.web .text-wrapper-10 {
  position: relative;
  width: auto;
  margin-top: -1px;
  text-shadow: 0px calc(2 * var(--unit)) calc(2 * var(--unit)) #00000080;
  font-family: "Instrument Serif", Helvetica;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  font-size: calc(124 * var(--unit));
  letter-spacing: calc(-1.24 * var(--unit));
  line-height: calc(124 * var(--unit));
  white-space: nowrap;
}

/* .text-wrapper-11: (top:6485px; left:240px; font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-11 {
  position: absolute;
  top: calc(2900 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Instrument Serif", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: normal;
}

/* .text-wrapper-12: (top:6485px; left:477px; font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-12 {
  position: absolute;
  top: calc(2902 * var(--unit));
  left: calc(477 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .contact-dh-x-com-TEL: (top:8135px; left:484px; font-size:52px; letter-spacing:-1.56px; line-height:78px;) */
.web .contact-dh-x-com-TEL {
  position: absolute;
  top: calc(4670 * var(--unit));
  left: calc(484 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(52 * var(--unit));
  letter-spacing: calc(-1.56 * var(--unit));
  line-height: calc(78 * var(--unit));
  text-decoration: underline;
}

/* .text-wrapper-13: (top:8080px; left:240px; font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-13 {
  position: absolute;
  top: calc(4600 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .text-wrapper-14: (top:8080px; left:486px; font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-14 {
  position: absolute;
  top: calc(4600 * var(--unit));
  left: calc(486 * var(--unit));
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  white-space: nowrap;
}

/* .text-wrapper-15: (top:8151px; left:240px; font-size:24px; letter-spacing:-0.24px;) */
.web .text-wrapper-15 {
  position: absolute;
  top: calc(4700 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(24 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.24 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .collaborate-with-the: (top:7272px; left:253px; font-size:128px;) */
.web .collaborate-with-the {
  position: absolute;
  top: calc(3700 * var(--unit));
  left: calc(253 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(128 * var(--unit));
  line-height: normal;
}

/* .text-wrapper-16 */
.web .text-wrapper-16 {
  letter-spacing: 0;
}

/* .text-wrapper-17 */
.web .text-wrapper-17 {
  font-family: "Instrument Serif", Helvetica;
  font-style: italic;
  letter-spacing: calc(-1.64 * var(--unit));
}

/* .text-wrapper-18 */
.web .text-wrapper-18 {
  letter-spacing: calc(-1.64 * var(--unit));
}

/* .text-wrapper-19 */
.web .text-wrapper-19 {
  letter-spacing: calc(-8.19 * var(--unit));
}

/* .text-wrapper-20: (top:9276px; left:240px; font-size:20px; letter-spacing:-0.20px; line-height:24px;) */
.web .text-wrapper-20 {
  position: absolute;
  top: calc(5350 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(20 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: calc(24 * var(--unit));
  white-space: nowrap;
}

/* .text-wrapper-21: (top:9306px; left:240px; font-size:20px; letter-spacing:-0.20px; line-height:24px;) */
.web .text-wrapper-21 {
  position: absolute;
  top: calc(5380 * var(--unit));
  left: calc(240 * var(--unit));
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: calc(24 * var(--unit));
  white-space: nowrap;
}

//* 기존 디자인 코드 */
    .web .frame-14 {
      display: flex;
      width: calc(1440 * var(--unit));
      align-items: center;
      gap: calc(30 * var(--unit));
      position: absolute;
      top: calc(3025 * var(--unit));
      left: calc(240 * var(--unit));
    }
    .web .news-default {
      position: relative;
      flex: 1;
      flex-grow: 1;
      height: calc(343 * var(--unit));
      background-color: #ffffff;
    }
    .web .heading-SAFER-SIX {
    position: absolute;
    top: calc(55* var(--unit));
    left: calc(32* var(--unit));
    font-family: "Helvetica-Regular", Helvetica;
    font-weight: 400;
    color: #111111;
    font-size: calc(50* var(--unit));
    letter-spacing: calc(-0.20* var(--unit));
    line-height: calc(30* var(--unit));
    white-space: nowrap;
    }
    .web .text-wrapper-22 {
    position: absolute;
    top: calc(108* var(--unit));
    left: calc(40* var(--unit));
    font-family: "Helvetica-Regular", Helvetica;
    font-weight: 400;
    color: #9a9a9a;
    font-size: calc(20* var(--unit));
    letter-spacing: calc(-0.14* var(--unit));
    line-height: calc(21* var(--unit));
    white-space: nowrap;
    }
    
    /* 슬라이더 전용 CSS */
    /* 슬라이더 뷰포트: 한 슬라이드만 보이도록 클리핑 */
    .slider-viewport {
      position: absolute;
      top: calc(3025 * var(--unit));
      left: calc(240 * var(--unit));
      width: calc(1440 * var(--unit));
      height: calc(343 * var(--unit));
      overflow: hidden;
    }
    /* 슬라이드 트랙 (.frame-14)은 뷰포트 내부에서 0,0에서 시작 */
    .slider-viewport .frame-14 {
      top: 0 !important;
      left: 0 !important;
      width: auto;
      transition: transform 0.5s ease;
	  display: flex;
    flex-direction: row;
    }
    /* 각 슬라이드는 뷰포트 너비만큼 */
    .slider-viewport .news-default {
      flex: 0 0 calc(1440 * var(--unit));
    }
    
    /* 내비게이션 버튼 */
    .slider-btn {
      position: absolute;
      top: 90%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      border: none;
      color: #fff;
      padding: calc(10 * var(--unit)) calc(15 * var(--unit));
      cursor: pointer;
      font-size: calc(16 * var(--unit));
      z-index: 10;
    }
    .prev-btn {
      left: calc(10 * var(--unit));
    }
    .next-btn {
      right: calc(10 * var(--unit));
    }

/* .it-guides-you-beyond: (width:387px; top:134px; left:32px; font-size:16px; letter-spacing:-0.16px; line-height:24px;) */
.web .it-guides-you-beyond {
position: absolute;
    width: 100%;
    top: calc(134* var(--unit));
    left: calc(32* var(--unit));
    font-family: "Helvetica-Regular", Helvetica;
    font-weight: 400;
    color: #111111;
    font-size: calc(16* var(--unit));
    letter-spacing: calc(-0.16* var(--unit));
    line-height: calc(24* var(--unit));
}

/* .component: (top:259px; left:32px; padding:6px; gap:12px;) */
.web .component {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(12* var(--unit));
    padding: calc(6* var(--unit));
    position: absolute;
    top: calc(259* var(--unit));
    left: calc(32* var(--unit));
    background-color: #ffffff;
}

/* .frame-15 inside component */
.web .frame-15 {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--unit));
  position: relative;
  flex: 0 0 auto;
}

/* .visit-website: (font-size:16px; letter-spacing:-0.16px; line-height:13px;) */
.web .visit-website {
  position: relative;
  width: auto;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #040404;
  font-size: calc(16 * var(--unit));
  letter-spacing: calc(-0.16 * var(--unit));
  line-height: calc(13 * var(--unit));
  text-decoration: underline;
  white-space: nowrap;
}

/* .iconoir-arrow-left: (width:16px; height:16px;) */
.web .iconoir-arrow-left {
  position: relative;
  width: calc(16 * var(--unit));
  height: calc(16 * var(--unit));
}

/* .clip-path-group: (width:50px; height:50px; top:6501px; left:415px;) */
.web .clip-path-group {
  position: absolute;
  width: calc(50 * var(--unit));
  height: calc(50 * var(--unit));
  top: calc(2900 * var(--unit));
  left: calc(415 * var(--unit));
}

/* .element (second web): (width:700px; height:394px; top:7487px; left:980px;) */
.web .element {
  position: absolute;
  width: calc(700 * var(--unit));
  height: calc(394 * var(--unit));
  top: calc(3950 * var(--unit));
  left: calc(980 * var(--unit));
  object-fit: cover;
}

/* .element-SEOLLEUNGRO: (top:8151px; left:1071px; font-size:28px; letter-spacing:-0.84px; line-height:42px;) */
.web .element-SEOLLEUNGRO {
  position: absolute;
  top: calc(4670 * var(--unit));
  left: calc(1071 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(28 * var(--unit));
  letter-spacing: calc(-0.84 * var(--unit));
  line-height: calc(42 * var(--unit));
}

/* .text-wrapper-23: (top:8080px; left:1071px; font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-23 {
  position: absolute;
  top: calc(4600 * var(--unit));
  left: calc(1071 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .frame-16: (width:708px; top:9277px; left:972px; gap:48px;) */
.web .frame-16 {
  display: flex;
  flex-direction: column;
  width: calc(708 * var(--unit));
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: calc(5345 * var(--unit));
  left: calc(972 * var(--unit));
}

/* .frame-17 */
.web .frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

/* .frame-18 */
.web .frame-18 {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--unit));
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

/* .frame-19 */
.web .frame-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(16 * var(--unit));
  position: relative;
  flex: 1;
  flex-grow: 1;
}

/* .text-wrapper-24: (font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-24 {
  position: relative;
  width: 100%;
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
}

/* .frame-20: (height:65px; padding:16px; border-bottom:1px solid #9a9a9a;) */
.web .frame-20 {
  display: flex;
  height: calc(65 * var(--unit));
  align-items: center;
  padding: calc(16 * var(--unit));
  position: relative;
  width: 100%;
  border-bottom: 1px solid #9a9a9a;
}

/* .text-wrapper-25: (font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-25 {
  position: relative;
  width: auto;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .frame-21 */
.web .frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(16 * var(--unit));
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

/* .text-wrapper-26: (font-size:20px; letter-spacing:-0.20px;) */
.web .text-wrapper-26 {
  position: relative;
  flex: 1;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.20 * var(--unit));
  line-height: normal;
}

/* .frame-22: (top:9741px; left:972px; gap:18.05px;) */
.web .frame-22 {
  display: inline-flex;
  align-items: center;
  gap: calc(18.05 * var(--unit));
  position: absolute;
  top: calc(5850 * var(--unit));
  left: calc(972 * var(--unit));
}

/* .send: (font-size:38px; letter-spacing:-0.38px; line-height:19.6px;) */
.web .send {
  position: relative;
  width: auto;
  color: #ffffff;
  font-size: calc(38 * var(--unit));
  letter-spacing: calc(-0.38 * var(--unit));
  line-height: calc(19.6 * var(--unit));
  text-decoration: underline;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  white-space: nowrap;
}

/* .iconoir-arrow-left-2: (width:38px; height:38px;) */
.web .iconoir-arrow-left-2 {
  position: relative;
  width: calc(38 * var(--unit));
  height: calc(38 * var(--unit));
}

/* .contact: (top:9117px; left:240px; font-size:66px; letter-spacing:-1.98px; line-height:63px;) */
.web .contact {
  position: absolute;
  top: calc(5200 * var(--unit));
  left: calc(240 * var(--unit));
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: calc(63 * var(--unit));
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  white-space: nowrap;
}

/* .clip-path-group-2: (width:60px; height:60px; top:9118px; left:559px;) */
.web .clip-path-group-2 {
  position: absolute;
  width: calc(60 * var(--unit));
  height: calc(60 * var(--unit));
  top: calc(5700 * var(--unit));
  left: calc(559 * var(--unit));
}

/* .line-2: (width:1440px; height:1px; top:9228px; left:240px;) */
.web .line-2 {
  width: calc(1440 * var(--unit));
  height: calc(1 * var(--unit));
  top: calc(5300 * var(--unit));
  left: calc(240 * var(--unit));
  position: absolute;
  object-fit: cover;
}

/* .overlap-3: (width:1920px; height:1235px; top:1128px; left:0;) */
.web .overlap-3 {
  position: absolute;
  width: 100%;
  height: calc(1235 * var(--unit));
  top: calc(1128 * var(--unit));
  left: 0;
}

/* .luxurious-grey: (width:1920px; height:1080px; top:155px; left:0;) */
.web .luxurious-grey {
  position: absolute;
  width: 100%;
  height: calc(1080 * var(--unit));
  top: calc(155 * var(--unit));
  left: 0;
  object-fit: cover;
}

/* .frame-23: (width:920px; left:240px;) */
.web .frame-23 {
  display: flex;
  flex-direction: column;
  width: calc(920 * var(--unit));
  align-items: flex-start;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: 0;
  left: calc(240 * var(--unit));
}

/* .digital-human: (font-size:66px;) */
.web .digital-human {
  position: relative;
  width: 100%;
  margin-top: -1px;
  font-family: "Helvetica-Light", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  line-height: calc(66 * var(--unit));
}

/* .text-wrapper-27 */
.web .text-wrapper-27 {
  font-weight: 300;
  letter-spacing: calc(-1.31 * var(--unit));
}

/* .text-wrapper-28 */
.web .text-wrapper-28 {
  font-family: "Instrument Serif", Helvetica;
  font-style: italic;
  letter-spacing: 0;
}

/* .frame-24 */
.web .frame-24 {
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--unit));
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

/* .it-guides-you-beyond-2: (width:464px; font-size:20px; letter-spacing:-0.40px; line-height:30px;) */
.web .it-guides-you-beyond-2 {
  position: relative;
  width: calc(464 * var(--unit));
  margin-top: -1px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.40 * var(--unit));
  line-height: calc(30 * var(--unit));
}

/* .element-d: (width:432px; font-size:20px; letter-spacing:-0.40px; line-height:30px;) */
.web .element-d {
  position: relative;
  width: calc(432 * var(--unit));
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.40 * var(--unit));
  line-height: calc(30 * var(--unit));
}

/* .frame-25: (top:1056px; left:719px;) */
.web .frame-25 {
  display: inline-flex;
  align-items: center;
  gap: calc(48 * var(--unit));
  position: absolute;
  top: calc(1056 * var(--unit));
  left: calc(719 * var(--unit));
}

/* .text-wrapper-29: (font-size:66px; letter-spacing:-0.66px;) */
.web .text-wrapper-29 {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #9a9a9a;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-0.66 * var(--unit));
  line-height: calc(66 * var(--unit));
  white-space: nowrap;
}

/* .text-wrapper-30: (font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-30 {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(66 * var(--unit));
  letter-spacing: calc(-1.98 * var(--unit));
  line-height: calc(66 * var(--unit));
  white-space: nowrap;
}

/* .frame-26 */
.web .frame-26 {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(24 * var(--unit));
  position: relative;
  flex: 0 0 auto;
}

/* .text-wrapper-31: (font-size:20px; letter-spacing:-0.40px; line-height:30px;) */
.web .text-wrapper-31 {
  position: relative;
  width: auto;
  margin-top: -1px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.40 * var(--unit));
  line-height: calc(30 * var(--unit));
  white-space: nowrap;
}

/* .text-wrapper-32: (width:335px; font-size:20px; letter-spacing:-0.40px; line-height:30px;) */
.web .text-wrapper-32 {
  position: relative;
  width: calc(335 * var(--unit));
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(20 * var(--unit));
  letter-spacing: calc(-0.40 * var(--unit));
  line-height: calc(30 * var(--unit));
}

/* .image: (width:861px; height:484px; top:524px; left:719px;) */
.web .image {
  position: absolute;
  width: calc(861 * var(--unit));
  height: calc(484 * var(--unit));
  top: calc(524 * var(--unit));
  left: calc(719 * var(--unit));
  object-fit: cover;
}

/* .text-wrapper-33: (top:2602px; left:314px; font-size:66px; letter-spacing:-1.98px;) */
.web .text-wrapper-33 {
    position: absolute;
    top: calc(2602* var(--unit));
    left: calc(277* var(--unit));
    font-family: "Instrument Serif", Helvetica;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    font-size: calc(66* var(--unit));
    letter-spacing: calc(-1.98* var(--unit));
    line-height: calc(66* var(--unit));
    white-space: nowrap;
    z-index: 99999;
}

/* .footer: (height:160px; top:9940px;) */
.web .footer {
  position: absolute;
  width: 100%;
  height: calc(160 * var(--unit));
  top: calc(6600 * var(--unit));
  left: 0;
  background-color: transparent;
}

/* .frame-27 in footer: (width:215px; height:101px; top:29px; left:240px;) */
.web .frame-27 {
  position: absolute;
  width: calc(215 * var(--unit));
  height: calc(101 * var(--unit));
  top: calc(29 * var(--unit));
  left: calc(240 * var(--unit));
  background-image: url(./group-1.png);
  background-size: 100% 100%;
}

/* .frame-28 in footer: (top:112px; left:610px; gap:126px;) */
.web .frame-28 {
  display: inline-flex;
  align-items: center;
  gap: calc(126 * var(--unit));
  position: absolute;
  top: calc(112 * var(--unit));
  left: calc(610 * var(--unit));
}

/* .text-wrapper-34 in footer: (font-size:16px; letter-spacing:-0.16px;) */
.web .text-wrapper-34 {
  position: relative;
  width: auto;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(16 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.16 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .text-wrapper-35 in footer: (font-size:16px; letter-spacing:-0.16px;) */
.web .text-wrapper-35 {
  position: relative;
  width: auto;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(16 * var(--unit));
  text-align: center;
  letter-spacing: calc(-0.16 * var(--unit));
  line-height: normal;
  text-decoration: underline;
  white-space: nowrap;
}

/* .text-wrapper-36 in footer: (font-size:16px; letter-spacing:-0.16px;) */
.web .text-wrapper-36 {
  position: relative;
  width: auto;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: calc(16 * var(--unit));
  letter-spacing: calc(-0.16 * var(--unit));
  line-height: normal;
  white-space: nowrap;
}

/* .mask-group: (width:1440px; height:400px; top:8418px; left:240px;) */
.web .mask-group {
  position: absolute;
  width: calc(1440 * var(--unit));
  height: calc(400 * var(--unit));
  top: calc(4950 * var(--unit));
  left: calc(240 * var(--unit));
}

/* 여기까지가 원본 CSS의 모든 요소를 vw 단위로 변환한 전체 코드입니다. */
.mask {
  width: 100%;
  height: 115%;
  position: absolute;
  background: #000;
  left: 0;
  top: 0;
  opacity: 0.3;
}