@charset "utf-8";
/*-------------------------------------------------------------------
  파일정의 : main
  작성날짜 : 2025-08-14 유지수
  분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
  속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/
/*html, body {*/
/*  overscroll-behavior-y: contain;*/
/*}*/

section:not(.visual) {
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior-y: none;
}

.main_tit {
  display: flex;
  min-width: 68rem;
  flex-direction: column;
  line-height: 1.3;
  color: var(--c_white);
}

.main_tit .tag {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 2.4rem;
  line-height: 1.4;
}

.main_tit h3 {
  font-size: 4.4rem;
  word-break: keep-all;
}

.main_tit .sub_tit {
  margin-top: 2.4rem;
  color: var(--c_white_70);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.6;
}

/*-------------------------------------------------------------------
   ## 메인 visual
-------------------------------------------------------------------*/
.visual {
  width: 100%;
  height: 100vh;
}

.visual video {
  width: 100%;
  position: absolute;
  inset: 0;
  height: 100vh;
  object-fit: cover;
}

.visual .wrapper {
  display: flex;
  height: 100%;
  align-items: center;
}

.visual h3 {
  position: relative;
  left: 50%;
  height: 15.8rem;
  margin-left: -74.8rem;
  max-width: 149.6rem;
  color: var(--c_white);
  font-size: 6.63rem;
}

.visual h3 p {
  display: inline-block;
  overflow: hidden;
  line-height: 1.1;
}

.visual h3 .font {
  margin-top: -2.8rem;
}

.visual h3 p div {
  display: inline-block;
}

.visual h3 .font {
  font-weight: 400;
  line-height: 1.24;
  font-family: var(--font-hanwha);
}

.os-windows .visual h3 {
  height: 14.4rem;
}

.br-edge .visual h3 .font,
.os-windows .visual h3 .font {
  margin-top: -12rem;
  line-height: 1.3;
}

/*-------------------------------------------------------------------
   ## 메인 Vison
-------------------------------------------------------------------*/
.vision {
  position: relative;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
}

.vision[data-variant="light"] {
  background-color: var(--c_black);
}

.vision .bg_con {
  position: absolute;
  top: 0;
  right: 0;
  inset: 0;
  opacity: calc(var(--progress1) * 1) !important;
}

.vision .bg_con img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* GPU 안정화용 */
}

.vision .bg_con .tag {
  opacity: 0;
}

.vision .bg_con .main_tit {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 14rem;
  margin-left: 1.2rem;
}

.vision .bg_con .main_tit p {
  opacity: 0;
}

.vision .vision_link {
  display: block;
  position: relative;
  z-index: 1;
  width: 7.2rem;
  height: 4.8rem;
  margin-top: 2.4rem;
  transition: all .3s ease;
}

.vision .vision_link a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/ic/ic_vision_link_arrow.svg) no-repeat center left;
  background-size: 4.8rem;
  transition: all .3s ease;
}

.vision .vision_link:hover a {
  background-position: center left 2.4rem;
}

.vision .bg_con img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.vision .bg_con img.mo {
  display: none;
}

.vision .cutout {
  display: block;
  width: 100%;
  height: 100vh !important;
  will-change: transform;
  max-height: 100% !important;
  transform: none !important;
}

.vision svg,
.vision #mask-text,
.vision #logo {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.experience-middle-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  /*will-change: transform;*/
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0) !important; /* GPU 안정화용 */
  overflow: hidden;
}

.mask_text {
  transform: scale(calc(var(--progress1) * 13)) !important;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: none;
  pointer-events: none;
}

.mask_text.mo {
  display: none;
}

.vision01 .experience-middle-container {
  mix-blend-mode: darken;
  isolation: isolate;
  color: white;
  background-color: #000;
}

.vision02 .experience-middle-container {
  mix-blend-mode: lighten;
  isolation: isolate;
  color: black;
  background-color: #fff;
}

.vision01 .experience-middle-container .mask_text {
  transform-origin: 50% 52%;
}

.vision02 .experience-middle-container .mask_text {
  transform-origin: 76% 52%;
  margin-right: -13%;
}

/*-------------------------------------------------------------------
   ## 메인 Business
-------------------------------------------------------------------*/
.business {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing_content);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
  overflow: hidden;
  transition: background-image .3s ease-in;
  background-image: url(../images/contents/bg_business.jpg);
}

.business > div {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.business .main_tit {
  margin-bottom: 6.4rem;
  position: relative;
  left: -5rem;
  opacity: 0;
  transition: opacity 1s ease, left 1s ease;
}

.business.show .main_tit {
  left: 0;
  opacity: 1;
}

.business .bu_card_tab_con {
  display: flex;
  justify-content: end;
  margin-right: 6.4rem;
  position: relative;
  right: -5rem;
  opacity: 0;
  transition: right 1s ease;
}

.business.show .bu_card_tab_con {
  right: 0;
  opacity: 1;
}

.business .bu_card_tab_con ul {
  display: flex;
  gap: 2.4rem;
  min-width: 82.4rem;
}

.business .bu_card_tab_con ul:after {
  display: none;
}

.business .bu_card_tab_con ul li {
  position: relative;
  flex: 1;
  border-radius: var(--round_s);
  border: 1px solid rgba(255, 255, 255, 0.24);
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(5px);
  transition: background .3s ease;
}

.business .bu_card_tab_con ul li.energy .thumb {
  background-image: url(../images/contents/bg_bu_card_tab_energy.jpg);
}

.business .bu_card_tab_con ul li.factory .thumb {
  background-image: url(../images/contents/bg_bu_card_tab_factory.jpg);
}

.bu_card_tab_con ul li:hover {
  background-color: rgba(255, 255, 255, 1);
}

.business .bu_slide {
  display: none;
}

.business .bu_slide_wrap {
  transform: translateX(120%);
  transition: transform 1s ease;
}

.business.show .bu_slide_wrap {
  transform: translateX(0);
}

.business .bu_slide .swiper-slide {
  padding: 2rem 2rem 3.2rem;
  border-radius: var(--round_s);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(1rem);
  cursor: pointer;
  overflow: hidden;
  transition: background .3s ease;
}

.business .bu_slide .swiper-slide:hover {
  background-color: rgba(255, 255, 255, 1);
}

.business .bu_slide .swiper-slide:hover .tit {
  color: var(--c_black)
}

.business .bu_slide .swiper-slide .thumb {
  width: 100%;
  border-radius: var(--round_s);
  overflow: hidden;
}

.business .bu_slide .swiper-slide .thumb img {
  width: 100%;
}

.business .bu_slide .swiper-slide .tit {
  margin-top: 1.2rem;
  color: var(--c_white);
  font-size: var(--fz_l);
  line-height: 1.5;
}


.bu_card_tab_con ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2rem 2rem 2.4rem;
}

.bu_card_tab_con ul li .thumb {
  width: 100%;
  height: 26.8rem;
  background-repeat: no-repeat;
  border-radius: var(--round_s);
  background-size: cover;
}

.bu_card_tab_con ul li .txt_box {
  padding-top: 2.4rem;
}

.bu_card_tab_con ul li .txt_box .tit {
  color: var(--c_white);
  font-size: var(--title_fz_s);
  line-height: 1.3;
}

.bu_card_tab_con ul li:hover .txt_box .tit {
  color: var(--c_black);
}

.business .main_tit h3 {
  padding-right: 30rem;
}


/*-------------------------------------------------------------------
   ## 메인 Global
-------------------------------------------------------------------*/
.global {
  position: relative;
  padding: 12rem var(--spacing_content) 0;
}

.global .bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/contents/bg_global.jpg) no-repeat center;
  background-size: cover;
  transform: scale(calc(var(--progress3) * 10)) !important;
}

.global .wrapper {
  width: var(--wrapper-l-size);
}

.global .main_tit {
  position: relative;
  z-index: 3;
  mix-blend-mode: difference;
}

.global .main_tit .sub_tit > * {
  display: inline-block;
  vertical-align: top;
}

body.cursor_active {
  cursor: none;
}

.global_cursor {
  display: none;
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 23.2rem;
  height: 23.2rem;
  text-indent: -999.9rem;
  mix-blend-mode: screen;
  pointer-events: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.global_cursor:before,
.global_cursor:after {
  content: '';
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.global_cursor:before {
  top: 50%;
  left: 50%;
  width: 9.6rem;
  height: 9.6rem;
  background-image: url(../images/ic/ic_text_circle_link.svg);
  transform: translate(-50%, -50%);
  transition: background .3s ease;
}

.global_cursor:after {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/ic/ic_text_circle.svg);
  background-size: 100%;
  animation: spin 6s linear infinite;
  transition: background .3s ease;
}

.global_cursor.pressed:after {
  background-image: url(../images/ic/ic_text_circle_active.svg);
}

.global_cursor.pressed:before {
  background-image: url(../images/ic/ic_text_circle_link_active.svg);
}

.global_cursor.pressed {
  mix-blend-mode: inherit;
}

.global .mask_bg {
  width: 100%;
  height: 100vh;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  /* will-change: transform; 제거 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* GPU 안정화용 */
  mix-blend-mode: lighten;
  isolation: isolate;
  color: black;
  background-color: #fff;
}

.global .mask_bg .main_tit {
  padding: 12rem var(--spacing_content) 0;
}


.global #bg {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh !important;
  transform: scale(calc(var(--progress2) * 4)) !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


@media all and (max-width: 1800px) {
  .en .vision .bg_con .main_tit {
    padding-right: 7rem;
    right: 0;
    left: initial;
  }

  .pc_br3 {
    display: none;
  }
}

@media all and (max-width: 1600px) {
  .visual h3 {
    left: inherit;
    margin-left: 0;
    width: 100%;
    text-align: center;
    font-size: 5.8rem;
    padding: 0 var(--spacing_content);
  }

  .br-edge .visual h3 .font,
  .os-windows .visual h3 .font {
    margin-top: -3rem;
  }

  .os-windows .visual h3 {
    height: 14.7rem;
  }

  .main_tit h3 {
    font-size: 3.8rem;
  }

  .global .circle_txt {
    top: inherit;
    right: 10rem;
    bottom: 10rem;
  }

  .business .main_tit {
    margin-bottom: 5rem;
  }

  .business .main_tit h3 {
    padding-right: 30rem;

  }

  .business .bu_card_tab_con {
    justify-content: center;
    margin-right: 0;
  }

  .bu_card_tab_con ul li .thumb {
    height: 19rem;
  }

  .bu_card_tab_con ul li .txt_box .tit {
    font-size: 2rem;
  }

  .pc_br2 {
    display: none;
  }


  .mask_text.pc {
    display: none;
  }

  .mask_text.mo {
    display: block;
  }

  .mask_text.mo {
    display: block;
    max-width: 100%;
    padding: 0 5.87rem;
  }

  .mask_text {
    transform: scale(calc(var(--progress1) * 10)) !important;
  }

  .vision01 .experience-middle-container .mask_text {
    transform-origin: 50% 52%;
  }

  .vision02 .experience-middle-container .mask_text {
    transform-origin: 39.5% 86%;
    margin-left: -10%;
  }
}

@media all and (max-width: 1199px) {
  .main_tit {
    min-width: 100%;
  }

  .vision .bg_con .main_tit {
    left: 0;
    bottom: 10rem;
    margin-left: 0;
    padding: 0 var(--spacing_content);
  }

  .business {
    height: 100vh !important;
    min-height: auto !important;
    padding: 12rem var(--spacing_content);
  }

  .business .main_tit h3 {
    padding-right: 0;
  }

  .business .bu_card_tab_con ul {
    min-width: 100%;
  }

  .vision .vision_link {
    width: 4.9rem;
    height: 2.5rem;
    margin-top: 2.4rem;
  }

  .vision .vision_link a {
    background-size: 2.5rem;
  }

  .global .circle_txt {
    display: none;
  }
}

@media all and (max-width: 850px) {
  .visual h3 p + p {
    margin-top: -2rem;
  }
}

@media all and (max-width: 1024px) {

}

@media all and (max-width: 768px) {
  .visual h3 {
    font-size: 4.2rem;
  }

  .main_tit .tag {
    font-size: var(--fz_m);
    margin-bottom: .8rem;
    line-height: 1.5;
  }

  .main_tit h3 {
    font-size: 3rem;
  }

  .main_tit h3 p {
    display: inline;
    vertical-align: top;
  }

  .visual h3 .font {
    margin-top: -1rem;
  }

  .visual h3 p + p {
    margin-top: -2rem;
  }

  .br-edge .visual h3 .font,
  .os-windows .visual h3 .font {
    margin-top: -2rem;
  }

  .br-edge .visual h3 p + p,
  .os-windows .visual h3 p + p {
    margin-top: -2rem;
  }

  .vision .bg_con .main_tit {
    bottom: 14rem;
  }

  .vision .main_tit p br {
    display: none !important;
  }

  .vision .bg_con img.pc {
    display: none;
  }

  .vision .bg_con img.mo {
    display: block;
  }

  .business {
    padding: 4.8rem var(--spacing_content);
  }

  .business > div {
    margin-top: -5rem;
  }

  .business .main_tit {
    margin-bottom: 4rem;
  }

  .business .bu_card_tab_con ul {
    display: block;
  }

  .bu_card_tab_con ul li a {
    padding: 1.4rem;
  }

  .business .bu_card_tab_con ul li + li {
    margin-top: 1rem;
  }

  .bu_card_tab_con ul li .txt_box {
    padding-top: 1.4rem;
  }

  .bu_card_tab_con ul li .txt_box .tit {
    font-size: 2.4rem;
  }

  .business .bu_card_tab_con ul li .txt_box .tit {
    font-size: 2rem;
  }

  .business .bu_card_tab_con ul li .thumb {
    height: 16rem;
  }


  .global .mask_bg .main_tit {
    padding: 9.8rem var(--spacing_content) 0;
  }

  .global .sub_tit > div {
    display: inline !important;
    vertical-align: top;
  }

  .main_tit .sub_tit {
    margin-top: 1.6rem;
  }

  .global_cursor {
    width: 15rem;
    height: 15rem;
  }

  .global_cursor:before {
    width: 8.2rem;
    height: 8.2rem;
  }

  .visual h3 {
    padding: 0;
  }

  .business .bu_card_tab_con {
    display: none;
  }

  .business .bu_slide {
    display: block;
  }

  .business .bu_slide .swiper-slide {
    width: 40rem;
  }

  .business .bu_slide .swiper-slide {
    padding: 1.2rem 1.2rem 1.5rem;
  }

  .en .business .bu_slide .swiper-slide .txt_box {
    min-height: 5.4rem;
  }

  .business .bu_slide .swiper-slide .tit {
    font-size: var(--fz_m);
  }

}

@media all and (max-width: 480px) {
  .visual h3 {
    font-size: 3.6rem;
  }

  .main_tit h3 {
    font-size: var(--fz_xl);
  }

  .business .main_tit h3 {
    font-size: var(--fz_xl);
  }

  .inner_txt > * {
    display: inline-block;
  }

  .vision {
    overflow: hidden;
  }

  .vision01 .experience-middle-container .mask_text {
    transform-origin: 44.5% 53%;
    /*will-change: transform;*/
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin-left: 0.3rem;
  }

  .vision02 .experience-middle-container .mask_text {
    transform-origin: 34.5% 86%;
    margin-left: -12.5%;
  }

  .business .bu_slide .swiper-slide {
    width: 25.4rem;
  }

}

@media all and (max-width: 400px) {
  .vision02 .experience-middle-container .mask_text {
    transform-origin: 35% 86%;

  }
}

@media all and (max-width: 375px) {
  .visual h3 {
    font-size: 3.3rem;
  }

  .vision02 .experience-middle-container .mask_text {
    transform-origin: 35.5% 87%;
    margin-left: -14%;
  }
}

@media all and (max-width: 350px) {
  .visual h3 {
    font-size: 3.3rem;
  }

  .vision02 .experience-middle-container .mask_text {
    transform-origin: 36.5% 87%;
    margin-left: -14%;
  }
}