:root {
  /* [ 메인 - 비주얼 sec ] */
  --left-pos: 195rem;
}

@media all and (max-width: 1024px) {
  :root {
    /* [ 메인 - 비주얼 sec ] */
    --left-pos: 16rem;
  }
}

/* common */
.cont-sec:not(:first-child) {
  padding-top: 200rem;
  margin-top: 0 !important;
}

#contents {
  position: relative;
}

#contents.main {
  padding-top: 0;
  padding-bottom: 0;
  background: #000;
}

.txt-btn.large:hover {
  background: none !important;
}

.txt-btn.large span {
  background-image: url("/common/en/images/icon-txt-btn-arrow-main.svg") !important;
}

.only-tab {
  display: none;
}

.only-mob {
  display: none;
}

@media all and (max-width: 1024px) {
  .cont-sec:not(:first-child) {
    padding-top: 80rem;
  }

  .only-tab {
    display: block !important;
  }
}

@media all and (max-width: 600px) {
  .only-tab {
    display: none !important;
  }

  .only-mob {
    display: block;
  }
}

/* nav */
/* .sec-nav-wrap:not(.on) .sec-nav-div {cursor: pointer;} */
.sec-nav-wrap:not(.on) .sec-nav {
  pointer-events: none;
}

.sec-nav-wrap:not(.on):hover .btn {
  background-image: url("/common/en/images/icon-sec-nav.svg");
}

.sec-nav-wrap {
  display: none;
  position: fixed;
  bottom: 40rem;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
}

.sec-nav-wrap .sec-nav-div {
  cursor: pointer;
  width: 192rem;
  height: 56rem;
  padding: 8rem;
  border-radius: 28rem;
  background: rgba(0, 0, 0, .8);
  overflow: hidden;
  transition: width .6s ease, height .6s ease, borderRadius .6s ease, padding .6s ease;
}

.sec-nav-wrap .btn {
  position: absolute;
  right: 16rem;
  bottom: 12rem;
  width: 32rem;
  height: 32rem;
  background: url("/common/en/images/icon-sec-nav.svg") no-repeat center center / 20rem auto;
  border-radius: 999rem;
  overflow: hidden;
  transition: right .4s ease, transform .4s ease, background .2s ease;
}

.sec-nav-wrap .btn:hover {
  background-image: url("/common/en/images/icon-sec-nav.svg");
}

.sec-nav-wrap .sec-nav {
  display: flex;
  gap: 16rem;
  flex-direction: column;
  height: 100%;
  width: calc(100% - 10rem);
}

.sec-nav-wrap .sec-nav a {
  width: 100%;
}

.sec-nav-wrap .sec-nav a.on {
  display: block;
}

.sec-nav-wrap .sec-nav a:not(.on) {
  display: none;
}

.sec-nav-wrap .sec-nav a .txts {
  display: flex;
  align-items: center;
  gap: 16rem;
}

.sec-nav-wrap .sec-nav a .txts .txt {
  font-family: "Pretendard-Medium";
  font-size: 14rem;
  line-height: 110%;
  letter-spacing: -0.28rem;
  color: var(--Color-Gray-White);
  transition: color .2s ease;
}

.sec-nav-wrap .sec-nav a .img {
  flex-shrink: 0;
  width: 40rem;
  height: 40rem;
  border-radius: 40rem;
  overflow: hidden;
}

.sec-nav-wrap .sec-nav a .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-nav-wrap.on .sec-nav-div {
  width: 240rem;
  height: 288rem;
  /* height: 100%; */
  padding: 16rem 32rem 8rem 32rem;
  border-radius: var(--border-radius-lg);
}

.sec-nav-wrap.on .btn {
  right: 8rem;
  transform: rotate(180deg);
}

.sec-nav-wrap.on .sec-nav a {
  display: block !important;
  cursor: pointer;
}

.sec-nav-wrap.on .sec-nav a.on .txts .txt {
  color: var(--Color-Green-Eco);
}

.sec-nav-wrap.on .sec-nav a:hover .txts .txt {
  color: var(--Color-Green-Eco);
}

@media all and (max-width: 1024px) {
  .sec-nav-wrap {
    display: none !important;
  }






}

/* [ main - visual sec ] */
.visual-sec {
  position: relative;
  height: 100dvh;
  /*min-height: 49vw;*/
  min-height: 40vw;
}

/* aside */
.main-aside-area.on {
  right: 40rem;
}

.main-aside-area.on .main-aside-wrap {
  visibility: visible;
  opacity: 1;
  pointer-events: unset;
  transition-delay: 0s;
}

.main-aside-area {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 0;
  right: -564rem;
  z-index: 99;
  height: 100%;
  transition: right 1s ease;
}

.main-aside-area .main-aside-wrap {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-delay: 1s;
}

.main-aside-area .main-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 16rem;
  height: 100%;
}

.main-aside .aside-item {
  border-radius: var(--border-radius-md);
  width: 564rem;
}

.aside-btn {
  visibility: hidden;
  opacity: 0;
  z-index: 99;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 52rem;
  height: 88rem;
  transition: right 1.1s ease;
}

.visual-sec:has(.main-aside-area.on) .aside-btn {
  right: 604rem;
}

.aside-btn::before {
  content: "";
  display: block;
  width: 8rem;
  height: 80rem;
  border-radius: 999rem;
  background: rgba(255, 255, 255, .5);
  transition: .4s ease;
}

.aside-btn:hover::before {
  background: var(--Color-Green-Primary);
}


.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  padding: 40rem;
  border-radius: var(--border-radius-md);
  background: var(--Color-Gray-White);
  box-sizing: border-box;
}

.contact-aside>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
}

.contact-aside>div li {
  display: flex;
  align-items: center;
  gap: 20rem;
}


/* swiper */
.visual-sec .visual-swiper {
  height: 100%;
}

.visual-sec .visual-swiper .swiper-slide {
  position: relative;
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap {
  position: absolute;
  top: 50%;
  left: var(--left-pos);
  z-index: 1;
  transform: translateY(-50%);
  max-width: 1000rem;
  color: var(--Color-Gray-White);
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap .tit {
  position: relative;
  overflow: hidden;
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap .tit span {
  display: block;
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap .txt {
  margin-top: 20rem;
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap .btns {
  margin-top: 40rem;
}

.visual-sec .visual-swiper .swiper-slide .img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.visual-sec .visual-swiper .swiper-slide .img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  pointer-events: none;
}

.visual-sec .visual-swiper .swiper-slide .img :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-sec .visual-swiper .swiper-control {
  position: absolute;
  z-index: 1;
  left: var(--left-pos);
  bottom: 60rem;
}


.visual-sec .visual-swiper .swiper-control .swiper-button-pause.on {
  order: 4;
  width: 56rem;
  height: 56rem;
  background: url("/common/en/images/icon-swiper-btn-play.svg") no-repeat center center / 100% auto;
  transition: var(--transition-icon);
}

.visual-sec .visual-swiper .swiper-control .swiper-button-pause {
  order: 3;
  width: 56rem;
  height: 56rem;
  background: url("/common/en/images/icon-swiper-btn-pause.svg") no-repeat center center / 100% auto;
  transition: var(--transition-icon);
}

/* swiper video만 있을 경우 */
.visual-sec .visual-swiper:not(:has(.swiper-slide img)) .swiper-control :is(.swiper-button-prev, .swiper-button-next) {
  display: none;
}

.visual-sec .visual-swiper .swiper-control .swiper-button-pause:hover {
  background-image: url("/common/en/images/icon-swiper-btn-pause-hover.svg");
}


.visual-sec .visual-swiper .swiper-control .swiper-button-pause.on {
  background-image: url("/common/en/images/icon-swiper-btn-play.svg");
}


.visual-sec .visual-swiper .swiper-control .swiper-button-pause.on:hover {
  background-image: url("/common/en/images/icon-swiper-btn-play-hover.svg");
}

/* swiper img만 있을 경우 */
.visual-sec .visual-swiper:not(:has(.swiper-slide video)) .swiper-control .swiper-button-pause {
  display: none;
}

/* swiper img, video 있을 경우 */

.visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause.on {
  width: 24rem;
  height: 24rem;
  background-image: url("/common/en/images/icon-swiper-btn-play-small.svg");
}

.visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause {
  margin-left: 10rem;
  width: 24rem;
  height: 24rem;
  background-image: url("/common/en/images/icon-swiper-btn-pause-small.svg");
}

.visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause:hover {
  background-image: url("/common/en/images/icon-swiper-btn-pause-small.svg");
}


.visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause.on {
  background-image: url("/common/en/images/icon-swiper-btn-play-small.svg");
}


.visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause.on:hover {
  background-image: url("/common/en/images/icon-swiper-btn-play-small.svg");
}

.visual-sec .visual-swiper:has(.swiper-slide.swiper-slide-active img) .swiper-button-pause,

.visual-sec .visual-swiper:has(.swiper-slide.swiper-slide-active img) .swiper-button-pause.on {
  display: none;
}

/* motion */
.visual-sec .visual-swiper .swiper-slide .txt-wrap .tit span {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease;
}

.visual-sec .visual-swiper .swiper-slide.swiper-slide-active .txt-wrap .tit span {
  transform: translateY(0);
  opacity: 1;
}

.visual-sec .visual-swiper .swiper-slide .txt-wrap .txt span,
.visual-sec .visual-swiper .swiper-slide .txt-wrap .btns {
  position: relative;
  opacity: 0;
  top: 80rem;
  transition: opacity 1s ease-out, top 1s ease-out;
}

.visual-sec .visual-swiper .swiper-slide.swiper-slide-active .txt-wrap .txt span,
.visual-sec .visual-swiper .swiper-slide.swiper-slide-active .txt-wrap .btns {
  opacity: 1;
  top: 0;
}

.visual-sec .visual-swiper .swiper-control {
  opacity: 0;
  animation: fadeIn .6s ease forwards .4s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media all and (max-width: 1024px) {
  .visual-sec {
    min-height: unset;
  }

  .main-aside-area {
    display: none !important;
  }

  .aside-btn {
    display: none !important;
  }

  .visual-sec .visual-swiper .swiper-slide .txt-wrap {
    width: calc(100vw - 32rem);
    max-width: unset;
  }

  .visual-sec .visual-swiper .swiper-slide .txt-wrap .tit {
    font-size: 32rem;
  }

  .visual-sec .visual-swiper .swiper-slide .txt-wrap .txt {
    margin-top: 16rem;
    font-size: 15rem;
  }

  .visual-sec .visual-swiper .swiper-slide .txt-wrap .btns {
    margin-top: 32rem;
  }

  .visual-sec .visual-swiper .swiper-control {
    left: var(--left-pos);
    bottom: 32rem;
  }

  .visual-sec .visual-swiper .swiper-control .swiper-button-pause {
    width: 48rem;
    height: 48rem;
  }

  .visual-sec .visual-swiper:has(.swiper-slide img):has(.swiper-slide video) .swiper-control .swiper-button-pause {
    margin-left: 0;
    width: 48rem;
    height: 48rem;
    background-size: 20rem auto;
  }

  /* ios 기기 background transition issue */
  .visual-sec .visual-swiper .swiper-control .swiper-button-pause {
    transition: 0s !important;
  }

  .visual-sec .visual-swiper .swiper-control .swiper-button-pause:hover {
    background-image: url("/common/en/images/icon-swiper-btn-pause.svg");
  }

  .visual-sec .visual-swiper .swiper-control .swiper-button-pause.on:hover {
    background-image: url("/common/en/images/icon-swiper-btn-play.svg");
  }
}






/* [ main - about sec ]  */
/* 2025-12-04 수정 */
.about-sec {
  position: relative;
  /* height: 300vh; */

}

.animate-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  z-index: 1;
  background: #fff;
}


.text-line .mask {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.text-line .text {
  display: flex;
  align-items: center;
  gap: 15rem;
}

.text-line .text .text-2 {
  display: flex;
  align-items: center;
  gap: 15rem;
}

.word {
  display: inline-block;
}

.about-sec .animate-bottom-text {
  margin-top: 30rem;
  opacity: 0;
}

.about-sec .video-box {
  display: inline-block;
  width: 0;
  height: 80rem;
  border-radius: var(--border-radius-sm);
  opacity: 0;
  overflow: hidden;
}

.about-sec .video-box img {
  width: 142rem;
  height: 100%;
  object-fit: cover;
}


.animate-img-box {
  width: 100%;
  height: 100%;
}

.animate-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.ship-bg {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-top: 100vh;
  background: linear-gradient(90deg, #0A477B 0%, #034778 10.55%, #014676 23.44%, #004473 31.56%, #004371 39.07%, #004274 48.59%, #00487A 70.45%, #004C7D 87.45%, #014F82 100%);
}

.ship-bg img {
  width: 100%;
  min-height: 150%;
  object-fit: cover;
}

.ship-bg.index6 {
  object-position: bottom;
}

.ship-bg:first-child {
  opacity: 1;
}

.ship-img {
  position: absolute;
  bottom: 15%;
  left: 60%;
  width: 70%;
  height: 790rem;
  transform: translate(-60%, 0);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}



.about-info {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 100%;
  height: 100vh;
  color: var(--Color-Gray-White);
  z-index: 3;
}

.about-info>div {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 145rem 195rem;
  box-sizing: border-box;
  opacity: 0;
}

.about-info>div p {
  position: relative;
  z-index: 3;
}

.about-arrow-list {
  justify-self: end;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 80rem;
  z-index: 3;
}

.about-arrow-list ul {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.about-arrow-list .square-btn.arrow {
  width: 272rem;
  height: 70rem;
  padding: 20rem 28rem;
  border-radius: var(--border-radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.about-arrow-list .square-btn.arrow span {
  background: none;
  background-position: right center;
  transition: .4s;
}

.about-arrow-list .square-btn.arrow:hover {
  background: var(--Color-Green-Primary)
}

.about-arrow-list .square-btn.arrow:hover span {
  background: url("/common/en/images/icon-arrow-right-wht.svg") no-repeat right center/20rem auto;
}

@media (width <=1500px) {
  .ship-bg {
    padding-top: 50vh;
  }

  .about-info {
    height: 80vh;
  }


}

@media (width <=1300px) {
  .about-info {
    height: 70vh;
  }

}


@media (width <=1024px) {
  .about-sec .inner {
    width: 100%;
  }

  .line-2 .text {
    flex-direction: column;
  }

  .about-sec .video-box {
    height: 60rem;
  }

  .about-sec .video-box img {
    width: 107rem;
  }

  .about-info {
    height: 100vh;
  }

  .about-info>div {
    grid-template-columns: 1fr;
    gap: 200rem;
    padding: 120rem 16rem;

  }

  .ship-img {
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 50%;
    height: auto;
    transform: translate(-50%, -50%);
  }

  .about-arrow-list {
    gap: 40rem;
  }

  .about-info .f-d3 {
    font-size: 22rem;
  }
}


@media (width <=768px) {
  .ship-img {
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
  }
}

/* // 2025-12-04 수정 */






/* [ main - business sec ] */
.business-sec.cont-sec {
  padding-block: 200rem;
}

.business-sec.bg-sec {
  overflow: hidden;
  background: url("/common/en/images/img-main-business-bg.jpg") no-repeat top center/cover;
}


.business-sec .cont-tit-wrap {
  align-items: center;
  color: var(--Color-Gray-White);
}

.business-sec .business>ul {
  display: flex;
  gap: 20px;
}

.business-sec .business>ul>li {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  height: 840rem;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-sizing: border-box;
  transition: .3s;
}

.business-sec .business>ul>li.on {
  align-items: flex-end;
  flex-grow: 2;
}

.business-sec .business .img-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.business-sec .business .img-box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: var(--Color-Gray-White);
  text-align: center;
  opacity: 1;
  transition: .2s;
}

.business-sec .business>ul>li.on .img-box p {
  opacity: 0;
}

.business-sec .business>ul>li .img {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.business-sec .business>ul>li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-sec .business ul .info-box {
  position: absolute;
  left: 80rem;
  top: calc(100% - 80rem);
  transform: translateY(-100%) translateX(0);
  display: flex;
  flex-direction: column;
  gap: 180rem;
  /* width: calc(100% - 160rem); */
  width: 533px;
  color: var(--Color-Gray-White);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 1;
}

.business-sec .business ul li.on .info-box {
  opacity: 1;
  visibility: visible;
}

.business-sec .business ul .info-box>div:not(.tag-box) {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

.business-sec .business ul .info-box>div.tag-box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}



.business-sec .business ul .info-box>div.tag-box li a {
  padding: 13rem 28rem;
  border-radius: var(--border-radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.60);
}

.business-sec .business ul .info-box>div.tag-box li a span {
  font-size: 18rem;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.36px;
}




@media all and (max-width: 1024px) {
  .business-sec.bg-sec {
    overflow: hidden;
    background: url("/common/en/images/img-main-business-bg-mo.jpg") no-repeat top center/cover;
  }

  /* .business-sec .inner {
    width: calc(100% - 32rem);
  } */
  .business-sec .business>ul {
    flex-direction: column;
  }

  .business-sec .business>ul>li {
    flex-direction: column;
    height: 100%;
  }

  .business-sec .business ul .info-box {
    position: static;
    transform: translate(0);
    width: 100%;
    height: 100%;
    padding: 80rem 40rem;
    opacity: 1;
    visibility: visible;
    box-sizing: border-box;
  }


  .business-sec .business ul li:last-child .info-box {
    gap: 67rem;
  }

  .business-sec .business ul .img-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .business-sec .business ul .img-box .txt {
    display: none;
  }

  .business-sec .business ul .info-box>div.tag-box li a span {
    font-size: 15rem;
  }

}






/* 글로벌 네트워크 */

.global-sec {
  position: relative;
  background: url("/common/en/images/img-global-bg.jpg") no-repeat top center/cover;
  z-index: 2;
}

.global-sec.cont-sec {
  padding-block: 200rem;
}

.global-sec .earth-img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;

  z-index: -1;
}

.global-sec>div {
  display: flex;
  align-items: flex-start;
  gap: 142rem;
}


.global-left {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  width: 100%;
  min-width: 520rem;
  color: var(--Color-Gray-White);

}

.global-left-top {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.global-left-top .global-tit {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}

.global-left-bottom {
  display: flex;
  flex-direction: column;
  gap: 56rem;
}


.network-count ul,
.network-count ul li {
  display: flex;
  align-items: center;
  gap: 16rem;
}

.network-count ul li~li::before {
  content: "";
  width: 1px;
  height: 16rem;
  background: var(--Color-Blue-300);
}

.global-sec .control-box a {
  color: var(--Color-Gray-White);
}

.control-box {
  display: flex;
  justify-content: space-between;
}

.control-box>a {
  display: flex;
  align-items: center;
  gap: 16rem;
}

.control-box>a::after {
  content: "";
  width: 48rem;
  height: 48rem;
  background: url(/common/en/images/icon-arrow-border-wht.svg) no-repeat center / contain;
}

.control-box>div {
  display: flex;
  align-items: center;
  gap: 8rem;
}



.golbal-right {
  width: 100%;
  max-width: 1100px;
  margin-top: 360rem;
}

.golbal-right .global-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem;
}

.global-card-list li {
  width: 380rem;
  height: 500rem;
}

.global-card-list li a {
  position: relative;
  display: block;
  height: 100%;
  padding: 45rem 50rem 40rem;
  border-radius: var(--border-radius-lg);
  background: var(--Color-Blue-500);
  color: var(--Color-Gray-White);
  box-shadow: 0 385px 108px 0 rgba(0, 0, 0, 0.00), 0 246px 99px 0 rgba(0, 0, 0, 0.01), 0 139px 83px 0 rgba(0, 0, 0, 0.05), 0 62px 62px 0 rgba(0, 0, 0, 0.09), 0 15px 34px 0 rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
  overflow: hidden;
}

.global-card-list li .golbal-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  height: 100%;
}

.global-card-list li .golbal-tit {
  transition: .3s;
}

.global-card-list li a .img {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: .3s;
}

.global-card-list li.swiper-slide-active a .img,
.global-card-list li.on a .img {
  opacity: 1;
}


.global-sec .rolling-text {
  display: flex;
  align-items: center;
  gap: 20rem;
  margin-top: 200rem;
  color: var(--Color-Gray-White);
  font-size: 200rem;
  font-weight: 700;
  line-height: 110%;
  text-transform: uppercase;
  overflow: hidden;
  opacity: .2;
}

.global-sec .rolling-text p {
  white-space: nowrap;
  animation: scrollText 30s linear infinite;
}


@keyframes scrollText {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}



@media (width <=1024px) {
  .golbal-right {
    margin-top: 0;
  }

  .global-sec>div {
    flex-direction: column;
  }

  .golbalSwiper {
    overflow: visible;
  }

  .golbal-right .global-card-list {
    display: flex;
    gap: 0;
  }

  .global-card-list li {
    height: 405rem;
  }

  .global-card-list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .global-sec .earth-img {
    height: 600rem;
  }

  .global-sec .earth-img img {
    height: 100%;
    object-fit: cover;
  }

  .global-sec .rolling-text {
    font-size: 120rem;
  }
}

.show-500 {
  display: none;
}


@media (width <=500px) {
  .hide-500 {
    display: none;
  }

  .show-500 {
    display: block;
  }

}


/* 미디어허브 */
.media-sec.cont-sec {
  padding-block: 200rem;
  background: #fff;
}

.media-content-box {
  display: flex;
  justify-content: space-between;
  gap: 330rem;
  width: 100%;
}

.media-tab-list {}

.media-tab-list ul {
  display: flex;
  align-items: center;
  gap: 24rem;
}

.media-tab-list ul li button {
  padding-bottom: 10px;
  color: var(--Color-Gray-500);
  box-sizing: border-box;
  transition: .3s;
}

.media-tab-list ul li button.on {
  color: var(--Color-Gray-Black);
  border-bottom: 1px solid var(--Color-Gray-Black);
}

.media-left {
  display: flex;
  flex-direction: column;
  gap: 96rem;
  min-width: 290rem;
}

.media-left .media-tit {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.media-right .media-item-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem 18rem;
}

.media-right .media-item-list li {
  display: flex;
  flex-direction: column;
  gap: 24rem;
}

.media-right .media-item-list li .img {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.media-right .media-item-list li .img img {
  width: 100%;
  object-fit: cover;
}

.media-box {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

.media-box>div {
  display: flex;
  align-items: center;
  gap: 12rem;

}

.media-box>div p.cate {
  color: var(--Color-Gray-Black);
}

.media-box>div p.date {
  display: flex;
  align-items: center;
  gap: 12rem;
  color: var(--Color-Gray-700);
}

.media-box>div p.date::before {
  content: "";
  width: 1px;
  height: 16rem;
  background: var(--Color-Gray-400)
}

@media (width <=1024px) {


  .media-content-box {
    flex-direction: column;
    gap: 60rem;
  }

  .media-left {
    gap: 60rem;
  }

  .media-box .title {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (width <=600px) {
  .media-right .media-item-list {
    grid-template-columns: 1fr;
    gap: 60rem;
  }
}


.recruit-sec.cont-sec {
  padding-block: 200rem;
  background: #fff;
}

.recruit-box .recruit-tit {
  display: flex;
  flex-direction: column;
  gap: 20rem;
  margin-bottom: 40rem;
}

.recruit-card {
  display: flex;
  align-items: center;
  gap: 20rem;
  color: var(--Color-Gray-White);
}


.recruit-card>div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20rem;
}



.recruit-card-frist>div {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  width: 420rem;
}

.recruit-card-frist>div:first-child {
  height: 530rem;
  background: url(/common/en/images/img-recruit01.jpg)no-repeat center / cover;
}

.recruit-card-frist>div:last-child {
  height: 160rem;
  background: url(/common/en/images/img-recruit01-2.jpg)no-repeat center / cover;
}

.recruit-card-frist>div>div {
  position: absolute;
  top: 40rem;
  left: 40rem;
}

.recruit-card-frist>div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-inner-card {
  display: flex;
  align-items: flex-start;
  gap: 20rem;
  width: 100%;
  transform: translateX(-40rem);
}

.recruit-inner-card li {
  position: relative;
  flex: 1;
  width: 100%;
  border-radius: 16rem;
  overflow: hidden;
}



.recruit-inner-card li:nth-child(1) {
  height: 550rem;
  background: var(--Color-Green-Primary);
}

.recruit-inner-card li:nth-child(2) {
  height: 320rem;
  transform: translateY(-40rem);
  background: url(/common/en/images/img-recruit02.jpg)no-repeat center / cover;
}

.recruit-inner-card li:nth-child(3) {
  height: 450rem;
  background: var(--Color-Blue-Light);

}


.recruit-inner-card li a {
  display: block;
  height: 100%;
  padding: 40rem;
  color: var(--Color-Gray-White);
  box-sizing: border-box;
}

.recruit-inner-card li:nth-child(3) a {
  color: var(--Color-Gray-Black);
}

.recruit-inner-card li a>div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}




@media (width <=1024px) {


  .recruit-card {
    flex-direction: column;
  }

  .recruit-card-frist {
    width: 100%;
  }

  .recruit-card .recruit-card-frist>div {
    width: 100%;
  }

  .recruit-card .recruit-card-frist>div:first-child {
    height: 414rem;
  }

  .recruit-card .recruit-card-frist>div:last-child {
    height: 125rem;
  }

  .recruit-inner-card {
    flex-direction: column;
    transform: translateX(0);
  }

  .recruit-inner-card li:nth-child(2) {
    transform: translateY(0);
  }

  .recruit-inner-card li:nth-child(1),
  .recruit-inner-card li:nth-child(2),
  .recruit-inner-card li:nth-child(3) {
    height: 284rem;
  }

  .recruit-inner-card li a>div {
    gap: 116rem;
  }

}



@media (width <=1024px) {

  .business-sec.cont-sec,
  .global-sec.cont-sec,
  .media-sec.cont-sec,
  .recruit-sec.cont-sec {
    padding-block: 160rem;
  }
}