@charset "utf-8";

@keyframes global-map-dot-ripple {
  0% {transform: scale(.35); opacity: .75;}
  100% {transform: scale(5.5); opacity: 0;}
}

/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}

#mainpage {
  --container-width: 1400px;
  --main_visual_delay: 6s;
  background: #F3F6FE; min-height: 1080px;

  .link-more {width: fit-content; height: 65px; display: flex; gap: 22px; align-items: center; padding-inline: 26px 6px; background: rgba(255, 255, 255, .2); color: #fff; border-radius: 43px; font-size: 18px; font-weight: 500;}
  .link-more .arrow {width: 53px; height: 53px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: none; padding-left: 5px;}
  .link-more:hover {background: rgba(255, 255, 255, .85); color: var(--primary);}
  .link-more:hover .arrow {background: #09f;}
  .link-more:hover .arrow svg rect {fill: #fff;}

  /* visual */
.visual {width: 100%; height: 100vh; overflow: hidden;}
.visual .main_slide {width: 100%; height: 100%;}
.visual .main_slide .swiper-slide {position: relative;}
.visual .main_slide .swiper-slide::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); z-index: -1;}
.visual-bg {position: absolute;top:0; left:0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2);}
.visual .main_slide .swiper-slide > img.visual-bg {transform: scale(1); transition: none;}
.visual .main_slide .swiper-slide-active > img.visual-bg {transform: scale(1.12); transition: transform var(--main_visual_delay) ease-out;}
.visual .main_slide .swiper-slide .container {height: 100%; padding-block: 200px;}
.visual .main_slide .swiper-slide .container .visual-txt {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: start; opacity: 0; transition: all .7s; transition-delay: .3s;}
.visual .main_slide .swiper-slide .container .visual-txt .title {font-size: 80px; font-weight: 700; line-height: 1.2; color: white; text-align: left; font-family: 'Raleway';}
.visual .main_slide .swiper-slide .container .visual-txt .desc {margin-top: 30px; margin-bottom: 100px; font-size: 20px; line-height: 1.8; color: white; text-align: left;}
.visual .main_slide .swiper-slide .container .visual-bg {width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; padding: 0;}
.visual .main_slide .swiper-slide .container .visual-bg video {min-width: 100%; height: 100vh; position: absolute; z-index: -1; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.visual.init .main_slide .swiper-slide.swiper-slide-active .container .visual-txt {transform: translateY(0); opacity: 1;}

.main-visual-nav {position: absolute; z-index: 10; bottom: 120px; left: 50%; width: 100%; transform: translate(-50%, 0); max-width: 1440px;}
.main-visual-nav .container {margin: 0; display: flex; align-items: center; justify-content: center; color: #fff; gap: 15px; padding-bottom: 0;}
.main-visual-nav .pagination {display: flex; align-items: center; justify-content: flex-start; gap: 0; margin: 0; width: auto; }
.main-visual-nav .pagination-item {display: flex; align-items: center; gap: .5em; opacity: .3; transition: opacity .7s; width: auto; height: auto; background: none; margin-right: 10px;}
.main-visual-nav .pagination-item .no {font-weight: 500;  font-size: 19px; line-height: 1;}
.main-visual-nav .pagination-item .progress {position: relative; transition: width .7s; width: 0px; height: 3px; background: rgb(255,255,255,.3); flex-shrink: 0;}
.main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active {opacity: 1;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 97px;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}
.main-visual .main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual.init .main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}

.swiper-pagination {display: flex; gap: 9px; align-items: center; justify-content: center; position: static; width: auto !important;}
.swiper-pagination-bullet {justify-content: center; min-width: 33px; margin: 0 !important; width: auto; height: auto; background: none; position: relative; display: inline-flex; margin: 0 5px; text-align: center; font-size: 19px; font-weight: 600; color: #fff; font-family: var(--ff-secondary); gap: 9px;}
.swiper-pagination-bullet .progress-bar {position: relative; display: block; width: 97px; height: 3px; background: rgba(255, 255, 255, 0.3); margin-top: 13px; overflow: hidden; flex-shrink: 0;}
.swiper-pagination-bullet .progress-fill {display: block; height: 100%; width: 0%; background: #fff;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .progress-bar {width: 0px; visibility: hidden; opacity: 0;}
.swiper-btnPlay {font-size: 0; background: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid white; cursor: pointer;}
.swiper-btnPlay.active {border: none; width: 20px; height: 20px; background-image: url("../images/mainpage/main-btnStop.svg"); background-repeat: no-repeat; background-size: 9px 13px; background-position: center center;}
.progress-bar {transition: all 1s;}
.progress-bar.hide {width: 0px; visibility: hidden; opacity: 0;}

@media screen and (max-width: 1399px) {
  .intro{display: none;}
  .visual .main_slide .swiper-slide .container {padding-block: 140px;}
  .visual .main_slide .swiper-slide .container .visual-txt .title {font-size: 48px; text-align: left;}
  .visual .main_slide .swiper-slide .container .visual-txt .desc {margin-top: 20px; margin-bottom: 64px; font-size: 18px; line-height: 1.7; text-align: left;}
  .main-visual-nav {bottom: 80px;}
  .main-visual-nav .container {margin: 0 auto;}
  .swiper-pagination-bullet {font-size: 17px;}
  .swiper-pagination-bullet .progress-bar {width: 72px;}
  .main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 72px;}
}

@media screen and (max-width: 767px) {
  #mainpage {min-height: 0;}
  .visual {height: 100svh; min-height: 560px;}
  .visual .main_slide .swiper-slide .container {padding-block: 110px 150px;}
  .visual .main_slide .swiper-slide .container .visual-txt {align-items: flex-start; text-align: left;}
  .visual .main_slide .swiper-slide .container .visual-txt .title {font-size: 32px; text-align: left; width: 100%;}
  .visual .main_slide .swiper-slide .container .visual-txt .desc {margin-top: 16px; margin-bottom: 40px; font-size: 16px; line-height: 1.65; text-align: left;}
  .main-visual-nav {bottom: 48px;}
  .swiper-pagination-bullet {font-size: 15px; min-width: 28px; gap: 6px;}
  .swiper-pagination-bullet .progress-bar {width: 52px; margin-top: 10px;}
  .main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 52px;}
  .swiper-btnPlay.active {width: 18px; height: 18px;}
}

  /* MOBILITY */
  .mp-mobility {padding-block: 180px; overflow: hidden;}
  .mp-mobility .container {display: grid; grid-template-columns: 360px 1fr;}
  .mp-mobility .left {height: 100%; display: flex; flex-direction: column;}
  .mp-mobility .mp-tit-tag {font-size: 24px; font-weight: 700; font-family: 'Raleway'; color: #0C3F98;}
  .mp-mobility .mp-tit {font-size: 44px; font-weight: 700; margin-top: 30px; line-height: 1.5;}
  .mp-mobility .mp-desc {font-size: 18px; opacity: .8; margin-top: 40px; line-height: 1.8;}
  .mp-mobility .link-more {margin-top: auto; margin-bottom: 60px; width: fit-content; gap: 54px;}
  .mp-mobility .right {display: flex; flex-direction: column;}
  .mp-mobility .slogan {font-size: 60px; display: flex; flex-direction: column; opacity: .8; padding-inline: 80px; color: #0C3F98; line-height: 1.3;}
  .mp-mobility .slogan span {display: block;}
  .mp-mobility .slogan .bold {font-size: 60px; font-weight: 700; align-self: flex-end;}
  .mp-mobility .img-box {width: 817px; height: auto; margin: 40px 0 0 140px;}
  .mp-mobility .img-box img {width: 100%; height: 100%; object-fit: contain;}

  .mp-mobility .link-more {background: rgba(255, 255, 255, .85); color: var(--primary);}
  .mp-mobility .link-more .arrow {background: #09f;}
  .mp-mobility .link-more .arrow svg rect {fill: #fff;}


  /* ETC */
  .mp-etc {padding-block: 0; --overlap: 350px;}
  .mp-etc .etc-wrap {position: relative;}
  .mp-etc .mp-sub-section {padding-block: 120px 80px; border-radius: 40px 40px 0 0; position: relative; overflow: hidden; z-index: 1; will-change: transform;}
  .mp-etc .mp-sub-section + .mp-sub-section{margin-top: calc(var(--overlap) * -1);}
  .mp-etc .mp-sub-section .container {display: grid; grid-template-columns: 360px 1fr;}
  .mp-etc .mp-sub-section .container .left {height: 100%; display: flex; flex-direction: column;}
  .mp-etc .mp-sub-section .mp-tit-tag {font-size: 24px; font-weight: 700; font-family: 'Raleway';}
  .mp-etc .mp-sub-section .mp-tit {font-size: 44px; font-weight: 700; margin-top: 30px; line-height: 1.5;}
  .mp-etc .mp-sub-section .mp-desc {font-size: 18px; opacity: .8; margin-top: 40px; line-height: 1.5;}
  .mp-etc .mp-sub-section .link-more {margin-top: auto; width: fit-content; gap: 54px;}
  .mp-etc .mp-sub-section .slogan {font-size: 60px; display: flex; flex-direction: column; opacity: .8; padding-inline: 80px;}
  .mp-etc .mp-sub-section .slogan span {display: block;}
  .mp-etc .mp-sub-section .slogan .bold {font-size: 60px; font-weight: 700; align-self: flex-end;}
  .mp-etc .mp-sub-section .img-box {width: 100%; height: 100%; object-fit: cover; margin-top: -25px;}

  .mp-safeenergy {background-color: #0C3F98; z-index: 2;}
  .mp-safeenergy .mp-tit-tag {color: var(--primary);}
  .mp-safeenergy .mp-tit {color: #fff;}
  .mp-safeenergy .mp-desc {color: #fff;}
  .mp-safeenergy .slogan {color: #EFF0F3;}

  .mp-precision {background-color: #162135; z-index: 3;}
  .mp-precision .mp-tit-tag {color: var(--primary);}
  .mp-precision .mp-tit {color: #fff;}
  .mp-precision .mp-desc {color: #fff;}
  .mp-precision .slogan {color: #EFF0F3;}
  .mp-etc .mp-precision.mp-sub-section .img-box {width: 530px; margin: -40px auto 0;}

  .mp-global {position: relative; background: #F3F6FE; overflow: hidden;}
  .mp-global .global-head {position: relative;}
  .mp-global .global-map-area {position: relative; min-height: 730px; padding-block: 180px 120px;}
  .mp-global .global-map-stage {position: absolute; top: 0; left: 50%; width: 2200px; margin-left: -1100px; pointer-events: none; overflow: visible; z-index: 1;}
  .mp-global .global-map-bg {display: block; width: 100%; height: auto; user-select: none;}
  .mp-global .global-map-dots {position: absolute; inset: 0; overflow: visible; z-index: 4;}
  .mp-global .global-map-dot {position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); overflow: visible; z-index: 2; pointer-events: auto; cursor: pointer;}
  .mp-global .global-map-dot::before,
  .mp-global .global-map-dot::after {content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(9, 173, 255, .32); border: 2px solid rgba(9, 173, 255, .55); transform: scale(.35); opacity: .75; transform-origin: center center; animation: global-map-dot-ripple 2.4s ease-out infinite; z-index: 0; pointer-events: none;}
  .mp-global .global-map-dot::after {animation-delay: 1.2s;}
  .mp-global .global-map-dot.is-active {z-index: 10;}
  .mp-global .global-map-dot.is-active::before,
  .mp-global .global-map-dot.is-active::after {animation: none; opacity: 0;}
  .mp-global .global-map-dot__core {position: absolute; inset: 0; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgba(9, 173, 255, .55); z-index: 2;}
  .mp-global .global-map-dot.is-active .global-map-dot__core {background: var(--secondary); box-shadow: 0 0 14px rgba(12, 63, 152, .9);}
  .mp-global .global-map-dot__pin {position: absolute; left: 50%; top: 50%; width: 29px; height: 40px; opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.9); transition: opacity .35s ease, transform .35s ease; z-index: 3; pointer-events: none;}
  .mp-global .global-map-dot__pin svg {display: block; width: 100%; height: 100%;}
  .mp-global .global-map-dot.is-active .global-map-dot__pin {opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1);}
  .mp-global .global-head-content {position: absolute; left: 50%; top: 180px; z-index: 3; width: max-content; max-width: calc(100% - 40px);}
  .mp-global .mp-tit-tag {font-size: 24px; font-weight: 700; font-family: 'Raleway'; color: var(--secondary);}
  .mp-global .mp-tit {font-size: 44px; font-weight: 400; margin-top: 30px; line-height: 1.5; color: var(--black);}
  .mp-global .detail {margin-top: 48px;}
  .mp-global .detail .detail-tit {display: inline-flex; align-items: center; gap: 12px; min-height: 45px; padding: 8px 20px 8px 12px; margin-bottom: 20px; background: var(--secondary); border-radius: 999px; text-decoration: none; cursor: pointer; transition: opacity .3s ease;}
  .mp-global .detail .detail-tit.is-disabled {cursor: default; pointer-events: none;}
  @media (hover: hover) {
    .mp-global .detail .detail-tit:not(.is-disabled):hover {opacity: .88;}
  }
  .mp-global .detail .global-flag {width: 32px; height: 32px; border-radius: 50%; overflow: hidden;}
  .mp-global .detail .detail-tit img {height: 100%; width: 100%; object-fit: cover;}
  .mp-global .detail .detail-tit p {font-size: 20px; font-weight: 700; color: #fff;}
  .mp-global .detail .detail-list {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px;}
  .mp-global .detail .detail-item {display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;}
  .mp-global .detail a.detail-item {cursor: pointer; transition: opacity .3s ease;}
  @media (hover: hover) {
    .mp-global .detail a.detail-item:hover {opacity: .75;}
    .mp-global .detail a.detail-item:hover p {color: var(--secondary);}
  }
  .mp-global .detail .detail-item svg {width: 14px; height: 20px; flex-shrink: 0;}
  .mp-global .detail .detail-item svg path {fill: var(--secondary);}
  .mp-global .detail .detail-item p {font-size: 18px; font-weight: 700;}

  .mp-global .global-slider {padding-block: 0 100px;}
  .mp-global .global-swiper {width: 100%; overflow: visible;}
  .mp-global .global-swiper .swiper-slide {width: 390px;}
  .mp-global .global-btn {position: relative; overflow: hidden; transition: box-shadow .4s ease, transform .4s ease;}
  .mp-global .global-btn .btn-bg {width: 100%; height: 308px; object-fit: cover; display: block; transition: all .4s ease;}
  .mp-global .global-btn::after {content: ''; display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); transition: opacity .4s ease; z-index: 1; pointer-events: none;}
  .mp-global .global-btn .btn-text {font-size: 20px; font-weight: 600; color: #A4A4A4; position: absolute; bottom: 26px; left: 24px; width: fit-content; text-align: center; padding: 10px 20px; background: rgba(70, 70, 70, .8); border-radius: 999px; transition: all .4s ease; display: flex; align-items: center; gap: 16px; z-index: 2; border: none; cursor: pointer; text-decoration: none;}
  .mp-global .global-btn.is-active {box-shadow: 0 0 0 3px var(--primary);}
  .mp-global .global-btn.is-active::after,
  .mp-global .global-btn:hover::after {opacity: 0;}
  .mp-global .global-btn.is-active .btn-text,
  .mp-global .global-btn:hover .btn-text {background: #fff; color: #000;}
  .mp-global .global-btn.is-active .btn-text svg *,
  .mp-global .global-btn:hover .btn-text svg * {fill: #000;}
  .mp-global .global-btn.is-disabled .btn-text {cursor: default; pointer-events: none;}
  .mp-global .global-btn.is-disabled:hover::after {opacity: 1;}
  .mp-global .global-btn.is-disabled:hover .btn-text {background: rgba(70, 70, 70, .8); color: #A4A4A4;}
  .mp-global .global-btn.is-disabled:hover .btn-text svg * {fill: #A4A4A4;}

  /* ESG */
  .esg-section {--esg-item-h: 275px; --esg-item-h-hover: 400px; position: relative; overflow: hidden; min-height: 100vh; isolation: isolate;}
  .esg-section .bg {inset: 0; z-index: 0; width: 100%; height: 760px;}
  .esg-section .bg img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
  .esg-section .container--wide {position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
  .esg-section .mp-head {text-align: center; margin-bottom: 40px;}
  .esg-section .mp-head .mp-tit-tag {display: block; padding-bottom: 20px; font-size: 30px; font-weight: 600; font-family: var(--ff-secondary); color: #fff;}
  .esg-section .mp-head .mp-tit {font-size: 56px; font-weight: 700; line-height: 1.2; color: #fff;}
  .esg-section .mp-head .mp-tit .mask-wrap {position: relative; display: inline-block; width: max-content;}
  .esg-section .mp-head .mp-tit .mask-wrap .mask-text {position: absolute; top: 0; left: 0; width: 0; height: 100%; color: #fff; overflow: hidden; white-space: nowrap; will-change: width;}
  .esg-section .mp-head .mp-tit .mask-wrap .base {position: relative; color: rgba(255, 255, 255, .2); --line-scale: 0; --line-origin: left;}
  .esg-section .mp-head .mp-tit .mask-wrap .base::before {content: ""; position: absolute; top: 50%; width: 100vw; height: 6px; background: rgba(255, 255, 255, .25); transform: translateY(-50%);}
  .esg-section .mp-head .mp-tit .mask-wrap .base::after {content: ""; position: absolute; top: 50%; width: 100vw; height: 6px; background: #fff; transform: translateY(-50%) scaleX(var(--line-scale)); transform-origin: var(--line-origin) 50%; will-change: transform;}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(1) {margin-right: 520px;}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(1) .base::before,
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(1) .base::after {left: calc(100% + 60px);}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) {margin-left: 600px;}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) .mask-text {left: 0; right: 0; width: 100%; text-align: right; clip-path: inset(0 0 0 0); will-change: clip-path;}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) .base {--line-origin: right;}
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) .base::before,
  .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) .base::after {right: calc(100% + 60px);}
  .esg-section .esg-link-more {margin: 0 auto 32px; background: rgba(255, 255, 255, .85); color: var(--primary);}
  .esg-section .esg-link-more .arrow {background: #09f;}
  .esg-section .esg-link-more .arrow svg rect {fill: #fff;}
  .esg-section .mp-body {display: flex; justify-content: center; align-items: flex-end; gap: 28px; width: 100%; min-height: var(--esg-item-h-hover); height: var(--esg-item-h-hover); overflow: visible;}
  .esg-section .esg-item {position: relative; display: block; width: 380px; height: var(--esg-item-h); flex-shrink: 0; align-self: flex-end; padding: 28px; background: #fff; border-radius: 0; overflow: hidden; box-shadow: 0 10px 20px rgba(130, 143, 150, .2); text-decoration: none; transition: height .45s ease, background-color .4s ease, box-shadow .4s ease;}
  .esg-section .esg-item__icon {position: absolute; top: 20px; right: 16px; width: 100px; height: auto; z-index: 2; object-fit: contain; transition: opacity .4s ease, transform .4s ease;}
  .esg-section .esg-item__watermark {position: absolute; top: 0; right: 0; width: 100%; height: auto; z-index: 1; object-fit: contain; object-position: top right; opacity: 0; pointer-events: none; transition: opacity .4s ease;}
  .esg-section .esg-item__default {position: absolute; left: 28px; bottom: 28px; right: 28px; z-index: 2;}
  .esg-section .esg-item__default .esg-item__tag {display: block; font-size: 18px; font-weight: 700; font-family: 'Raleway', var(--ff-secondary); color: var(--primary); line-height: 1.3;}
  .esg-section .esg-item:nth-child(2) .esg-item__default .esg-item__tag {color: #005DFF;}
  .esg-section .esg-item__default .esg-item__tit {display: block; margin-top: 6px; font-size: 40px; font-weight: 700; color: var(--black); line-height: 1.2;}
  .esg-section .esg-item__hover {position: absolute; inset: 36px 28px 32px; z-index: 3; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;}
  .esg-section .esg-item__hover .esg-item__tag {display: block; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .3); line-height: 1.3;}
  .esg-section .esg-item__hover .esg-item__tit {display: block; margin-top: 10px; font-size: 40px; font-weight: 700; color: #fff; line-height: 1.25;}
  .esg-section .esg-item__bar {width: 100%; height: 3px; margin: 28px 0 24px; background: rgba(255, 255, 255, .3);}
  .esg-section .esg-item__catch {font-size: 20px; font-weight: 700; color: #fff; line-height: 1.35; word-break: keep-all;}
  .esg-section .esg-item__desc {margin-top: 18px; font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, .92); line-height: 1.75; word-break: keep-all;}

  @media (hover: hover) {
    .esg-section .esg-item:hover {height: var(--esg-item-h-hover); background: var(--primary); box-shadow: 0 16px 30px rgba(9, 173, 255, .28);}
    .esg-section .esg-item:nth-child(2):hover {background: #005DFF; box-shadow: 0 16px 30px rgba(0, 93, 255, .28);}
    .esg-section .esg-item:hover::before {opacity: 0;}
    .esg-section .esg-item:hover .esg-item__icon {opacity: 0; transform: translate(12px, -12px);}
    .esg-section .esg-item:hover .esg-item__watermark {opacity: 1;}
    .esg-section .esg-item:hover .esg-item__default {opacity: 0; visibility: hidden;}
    .esg-section .esg-item:hover .esg-item__hover {opacity: 1; visibility: visible;}
  }

  .esg-section .esg-item__default {transition: opacity .4s ease, visibility .4s ease;}

  .mp-news {padding-block: 0 140px; overflow: hidden;}
  .mp-news .container {display: grid; grid-template-columns: 485px 1fr;}
  .mp-news .mp-head {display: flex; flex-direction: column; justify-content: space-between; text-align: left;}
  .mp-news .mp-head .mp-tit {font-size: 24px; font-weight: 700; font-family: 'Raleway'; color: #0C3F98;}
  .mp-news .mp-head .desc {font-size: 44px; font-weight: 700;}
  .mp-news .mp-head .link-more {margin-bottom: 200px; background: rgba(255, 255, 255, .85); color: var(--primary);}
  .mp-news .mp-head .link-more .arrow {background: #09f;}
  .mp-news .mp-head .link-more .arrow svg rect {fill: #fff;}

  .mp-news .news-list {width: 100%; display: flex; flex-direction: column; border-top: 1px solid #6D6D6D;}
  .mp-news .news-list li {width: 100%; border-bottom: 1px solid #D1D1D1; transition: all .4s ease;}
  .mp-news .news-list li a {width: 100%; padding: 20px; padding-right: 37px; display: flex; justify-content: space-between; align-items: center; gap: 2em; font-size: 20px; padding: 1em 0.5em 1em 1em;}
  .mp-news .news-list li a .img-box {width: 305px; height: 165px; border-radius: 13px; overflow: hidden; transition: all .4s ease;}
  .mp-news .news-list li a .img-box img {width: 100%; height: 100%; object-fit: cover;}
  .mp-news .news-list li a .txt-box {width: 420px;}
  .mp-news .news-list li a .txt-box .flex {align-items: center; gap: 12px; margin-bottom: 20px;}
  .mp-news .news-list li a .txt-box .flex .category {display: block; padding: 4px 13px; font-size: 16px; font-weight: 700; border-radius: 50px; color: #fff;}
  .mp-news .news-list li a .txt-box .flex .bar {width: 1px; height: 13px; background-color: var(--gray1);}
  .mp-news .news-list li a .txt-box .flex .date {font-size: 18px; color: #919191;}
  .mp-news .news-list li a .txt-box .tit {font-size: 24px; font-weight: 700; margin-bottom: 14px;}
  .mp-news .news-list li a .txt-box .text {font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--gray1); word-break: keep-all;}
  .mp-news .news-list li a .news-btn {width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #B8BDC6; transition: all .4s ease;}
  .mp-news .news-list li a .news-btn img {transform: rotate(-45deg);}

  .mp-news .news-list li.news a .txt-box .flex .category {background-color: var(--primary);}
  .mp-news .news-list li.notice a .txt-box .flex .category {background-color: #0C3F98;}

  /* partner */
  .partner-section {padding-block: 36px; background: #fff; mix-blend-mode: luminosity;}
  .partner-section .container {position: relative;}
  .partner-swiper {width: calc(100% - 130px); margin-inline: auto; opacity: .5;}
  .partner-swiper .swiper-slide {display: flex; align-items: center; justify-content: center;}
  .partner-swiper .swiper-slide img {display: block; max-width: 100%; height: auto; max-height: 63px; object-fit: contain;}
  .partner-swiper .partner-ls .slide {display: flex; align-items: center; justify-content: center; background: #F8F8F8;}
  .partner-swiper .swiper-slide::before {width: 1px; height: 63px; background: #C5C5C5; position: absolute; content: ''; right: -27.5px; top: 50%; transform: translateY(-50%);}

  .partner-section .controller {position: absolute; inset: 0; z-index: 2; pointer-events: none;}
  .partner-section .navigation {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%;}
  .partner-section .navigation .swiper-button-prev,
  .partner-section .navigation .swiper-button-next {position: relative; top: auto; left: auto; right: auto; margin: 0; width: 51px; height: 51px; flex-shrink: 0; pointer-events: auto; transform: none;}
  .partner-section .navigation .swiper-button-next {transform: rotate(180deg);}
  .partner-section .navigation .swiper-button-next:after,
  .partner-section .navigation .swiper-button-prev:after {display: none;}
  .partner-section .navigation .swiper-button-prev.swiper-button-disabled,
  .partner-section .navigation .swiper-button-next.swiper-button-disabled {opacity: 1; cursor: pointer; pointer-events: auto;}


  @media (hover: hover) {
    .mp-solution .left .solution-bullet-list .solution-bullet:hover {background: #fff; color: var(--primary);}
    .mp-news .news-list li:hover {background-color: rgba(0, 77, 193, .02);}
    .mp-news .news-list li:hover .img-box {border-radius: 85px;}
    .mp-news .news-list li:hover .news-btn {background-color: #004DC1;}
  }
  @media screen and (max-width: 1399px) {
    .link-more {height: 54px; gap: 14px; padding-inline: 18px 4px; font-size: 15px; border-radius: 32px;}
    .link-more .arrow {width: 42px; height: 42px; padding-left: 3px;}
    .link-more .arrow svg {width: 12px; height: auto;}

    .mp-mobility {padding-block: 100px;}
    .mp-mobility .container {grid-template-columns: 1fr; gap: 40px;}
    .mp-mobility .left {height: auto;}
    .mp-mobility .mp-tit-tag {font-size: 20px;}
    .mp-mobility .mp-tit {font-size: 36px; margin-top: 20px;}
    .mp-mobility .mp-desc {font-size: 17px; margin-top: 24px;}
    .mp-mobility .link-more,
    .mp-etc .mp-sub-section .link-more {gap: 24px; margin-top: 40px; margin-bottom: 56px;}
    .mp-mobility .right {gap: 24px;}
    .mp-mobility .slogan {font-size: 40px; padding-inline: 0; text-align: center; align-items: center;}
    .mp-mobility .slogan .bold {font-size: 40px; align-self: center;}
    .mp-mobility .img-box {width: 100%; max-width: 720px; margin: 0 auto;}

    .mp-etc {--overlap: 200px;}
    .mp-etc .mp-sub-section {padding-block: 80px 60px; border-radius: 28px 28px 0 0;}
    .mp-etc .mp-sub-section .container {grid-template-columns: 1fr; gap: 36px;}
    .mp-etc .mp-sub-section .container .left {height: auto;}
    .mp-etc .mp-sub-section .container .right {display: flex; flex-direction: column; gap: 24px;}
    .mp-etc .mp-sub-section .mp-tit-tag {font-size: 20px;}
    .mp-etc .mp-sub-section .mp-tit {font-size: 36px; margin-top: 20px;}
    .mp-etc .mp-sub-section .mp-desc {font-size: 17px; margin-top: 24px;}
    .mp-etc .mp-sub-section .slogan {font-size: 40px; padding-inline: 0; text-align: center; align-items: center;}
    .mp-etc .mp-sub-section .slogan .bold {font-size: 40px; align-self: center;}
    .mp-etc .mp-sub-section .img-box {width: 100%; height: auto; margin-top: 0;}
    .mp-etc .mp-sub-section .img-box img {width: 100%; height: auto; object-fit: contain;}
    .mp-etc .mp-precision.mp-sub-section .img-box {width: 100%; max-width: 420px; margin: 0 auto;}
    .mp-global .global-map-area {min-height: 0; padding-block: 100px 80px; display: flex; flex-direction: column;}
    .mp-global .global-map-stage {width: 1400px; margin-left: -700px; order: 2;}
    .mp-global .global-map-dots {display: none;}
    .mp-global .global-head-content {position: relative; left: auto; top: auto; order: 1; z-index: 3; width: min(calc(100% - 30px), 720px); max-width: none; margin-inline: auto; padding-inline: 0;}
    .mp-global .mp-tit-tag {font-size: 20px;}
    .mp-global .mp-tit {font-size: 36px; margin-top: 20px;}
    .mp-global .detail {margin-top: 32px;}
    .mp-global .detail .detail-tit p {font-size: 18px;}
    .mp-global .detail .detail-list {flex-direction: row; flex-wrap: wrap; gap: 16px 36px;}
    .mp-global .detail .detail-item p {font-size: 17px;}
    .mp-global .global-slider {padding-block: 0 60px;}
    .mp-global .global-swiper .swiper-slide {width: 320px;}
    .mp-global .global-btn .btn-bg {height: 260px;}
    .mp-global .global-btn .btn-text {font-size: 18px;}

    .mp-news {padding-block: 80px 120px;}
    .mp-news .container {grid-template-columns: 1fr; gap: 48px;}
    .mp-news .mp-head {gap: 32px;}
    .mp-news .mp-head .desc {font-size: 36px; line-height: 1.35;}
    .mp-news .mp-head .link-more {margin-bottom: 0;}
    .mp-news .news-list li a {gap: 24px; padding: 24px 0;}
    .mp-news .news-list li a .img-box {width: 240px; height: 130px; flex-shrink: 0;}
    .mp-news .news-list li a .txt-box {width: auto; flex: 1; min-width: 0;}
    .mp-news .news-list li a .txt-box .tit {font-size: 22px;}
    .mp-news .news-list li a .news-btn {width: 48px; height: 48px; flex-shrink: 0;}

    .partner-section {padding-block: 32px;}
    .partner-swiper {width: calc(100% - 108px);}
    .partner-section .navigation .swiper-button-prev,
    .partner-section .navigation .swiper-button-next {width: 44px; height: 44px;}
    .partner-swiper .swiper-slide::before {height: 48px; right: -20px;}

    .esg-section {min-height: 0;}
    .esg-section .bg {height: 100%; min-height: 100%;}
    .esg-section .container--wide {height: auto; min-height: 0; padding-block: 80px 60px;}
    .esg-section .mp-head {margin-bottom: 56px;}
    .esg-section .mp-head .mp-tit-tag {font-size: 32px; padding-bottom: 14px;}
    .esg-section .mp-head .mp-tit {font-size: 40px;}
    .esg-section .mp-head .mp-tit .mask-wrap {display: block; width: 100%; margin: 0 !important; text-align: center;}
    .esg-section .mp-head .mp-tit .mask-wrap .base::before,
    .esg-section .mp-head .mp-tit .mask-wrap .base::after {display: none;}
    .esg-section .mp-head .mp-tit .mask-wrap:nth-child(2) .mask-text {text-align: center;}
    .esg-section .esg-link-more {margin-bottom: 40px;}
    .esg-section .mp-body {flex-direction: column; align-items: center; height: auto; min-height: 0; gap: 20px;}
    .esg-section .esg-item {width: 100%; max-width: 480px; height: auto; align-self: auto; background: var(--primary); box-shadow: 0 16px 30px rgba(9, 173, 255, .28);}
    .esg-section .esg-item:nth-child(2) {background: #005DFF; box-shadow: 0 16px 30px rgba(0, 93, 255, .28);}
    .esg-section .esg-item__icon {opacity: 0; visibility: hidden; transform: translate(12px, -12px);}
    .esg-section .esg-item__watermark {opacity: 1;}
    .esg-section .esg-item__default {display: none;}
    .esg-section .esg-item__hover {position: relative; inset: auto; opacity: 1; visibility: visible;}
    .esg-section .esg-item__hover .esg-item__tit {font-size: 32px;}
    .esg-section .esg-item__catch {font-size: 18px;}
    .esg-section .esg-item__desc {font-size: 16px;}
  }
  @media screen and (max-width: 767px) {
    .link-more {height: 48px; gap: 12px; padding-inline: 16px 4px; font-size: 14px; border-radius: 28px;}
    .link-more .arrow {width: 38px; height: 38px; padding-left: 2px;}
    .link-more .arrow svg {width: 11px; height: auto;}

    .mp-mobility {padding-block: 72px;}
    .mp-mobility .container {gap: 28px;}
    .mp-mobility .mp-tit-tag {font-size: 16px;}
    .mp-mobility .mp-tit {font-size: 30px; line-height: 1.35; margin-top: 12px;}
    .mp-mobility .mp-desc {font-size: 16px; margin-top: 16px; line-height: 1.65;}
    .mp-mobility .link-more,
    .mp-etc .mp-sub-section .link-more {gap: 16px; margin-top: 32px; margin-bottom: 48px;}
    .mp-mobility .right {gap: 16px;}
    .mp-mobility .slogan {font-size: 24px; line-height: 1.35; text-align: center; align-items: center;}
    .mp-mobility .slogan .bold {font-size: 24px; align-self: center;}

    .mp-etc {--overlap: 80px;}
    .mp-etc .mp-sub-section {padding-block: 60px 48px; border-radius: 20px 20px 0 0;}
    .mp-etc .mp-sub-section + .mp-sub-section {margin-top: calc(var(--overlap) * -1);}
    .mp-etc .mp-sub-section .container {gap: 24px;}
    .mp-etc .mp-sub-section .container .right {gap: 16px;}
    .mp-etc .mp-sub-section .mp-tit-tag {font-size: 16px;}
    .mp-etc .mp-sub-section .mp-tit {font-size: 30px; line-height: 1.35; margin-top: 12px;}
    .mp-etc .mp-sub-section .mp-desc {font-size: 16px; margin-top: 16px; line-height: 1.65;}
    .mp-etc .mp-sub-section .slogan {font-size: 24px; line-height: 1.35; text-align: center; align-items: center;}
    .mp-etc .mp-sub-section .slogan .bold {font-size: 24px; align-self: center;}
    .mp-etc .mp-sub-section .img-box {max-height: none;}
    .mp-etc .mp-precision.mp-sub-section .img-box {max-width: 100%;}

    .mp-global .global-map-area {padding-block: 72px 48px; display: flex; flex-direction: column;}
    .mp-global .global-map-stage {width: 900px; margin-left: -450px; order: 2;}
    .mp-global .global-head-content {position: relative; left: auto; top: auto; order: 1; z-index: 3; width: min(calc(100% - 30px), 720px); max-width: none; margin-inline: auto; padding-inline: 0;}
    .mp-global .mp-tit-tag {font-size: 16px;}
    .mp-global .mp-tit {font-size: 28px; line-height: 1.35; margin-top: 12px;}
    .mp-global .detail {margin-top: 24px;}
    .mp-global .detail .detail-tit {min-height: 40px; padding: 6px 16px 6px 10px; margin-bottom: 16px;}
    .mp-global .detail .global-flag {width: 28px; height: 28px;}
    .mp-global .detail .detail-tit p {font-size: 16px;}
    .mp-global .detail .detail-list {flex-direction: column; flex-wrap: nowrap; gap: 10px;}
    .mp-global .detail .detail-item p {font-size: 16px;}
    .mp-global .global-slider {padding-block: 0 48px;}
    .mp-global .global-btn .btn-text {font-size: 16px; padding: 8px 16px; bottom: 20px; left: 16px;}
    .mp-global .global-swiper .swiper-slide {width: 280px;}
    .mp-global .global-btn .btn-bg {height: 220px;}

    .esg-section .container--wide {padding-block: 60px 48px;}
    .esg-section .mp-head {margin-bottom: 64px;}
    .esg-section .mp-head .mp-tit-tag {font-size: 24px; padding-bottom: 10px;}
    .esg-section .mp-head .mp-tit {font-size: 28px; line-height: 1.35;}
    .esg-section .esg-link-more {margin-bottom: 48px;}
    .esg-section .mp-body {gap: 16px;}
    .esg-section .esg-item {max-width: 100%; padding: 22px;}
    .esg-section .esg-item__hover .esg-item__tag {font-size: 16px;}
    .esg-section .esg-item__hover .esg-item__tit {font-size: 28px; margin-top: 8px;}
    .esg-section .esg-item__bar {margin: 18px 0 16px;}
    .esg-section .esg-item__catch {font-size: 17px;}
    .esg-section .esg-item__desc {margin-top: 14px; font-size: 16px; line-height: 1.65;}

    .mp-news {padding-block: 60px 80px;}
    .mp-news .container {gap: 28px;}
    .mp-news .mp-head {gap: 24px;}
    .mp-news .mp-head .mp-tit {font-size: 20px;}
    .mp-news .mp-head .desc {font-size: 28px;}
    .mp-news .mp-head .link-more {margin-bottom: 0;}
    .mp-news .news-list li a {flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 0;}
    .mp-news .news-list li a .img-box {width: 100%; height: auto; aspect-ratio: 305 / 165;}
    .mp-news .news-list li a .txt-box .flex {margin-bottom: 12px;}
    .mp-news .news-list li a .txt-box .flex .category {font-size: 14px;}
    .mp-news .news-list li a .txt-box .flex .date {font-size: 16px;}
    .mp-news .news-list li a .txt-box .tit {font-size: 20px; margin-bottom: 10px;}
    .mp-news .news-list li a .txt-box .text {font-size: 16px;}
    .mp-news .news-list li a .news-btn {display: none;}

    .partner-section {padding-block: 24px;}
    .partner-swiper {width: calc(100% - 96px);}
    .partner-swiper .swiper-slide img {max-height: 44px;}
    .partner-swiper .swiper-slide::before {height: 36px; right: -12px;}
    .partner-section .navigation .swiper-button-prev,
    .partner-section .navigation .swiper-button-next {width: 40px; height: 40px;}
  }
}