@charset "utf-8";
/* pagination */
.paging .paging__num.active {background: transparent;}

.intro-hero {position: relative; overflow: hidden; height: auto;}
/* .intro-hero .intro-hero-bg {position: absolute;top:0;left:0;width:100%;height:100%;object-fit: cover;} */
.intro-hero .intro-hero-bg {width:100%; object-fit: cover; position: relative;}
.intro-hero .intro-hero-bg p {font-size: 34px; line-height: 1.65; text-align: center; color: #fff; margin: 0; padding-inline: 12px; font-weight: 700; position: absolute;inset: 0; align-content: center; text-shadow: 0 0 15px rgba(0, 0, 0, 0.2);}
.intro-hero .intro-hero-content {padding-block: 180px 90px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px;}
.intro-hero .intro-hero-title {font-size: 64px; font-weight: 700; text-transform: capitalize;}
.intro-hero .intro-hero-desc {font-size: 16px; color:#fff; text-align: center; line-height: 1.75; transform: translateY(-10px); animation: intro-hero-content .6s .3s var(--cubic-pop3) forwards;}

.intro-hero .lnb {display: flex; justify-content: center; align-items: center; gap: 12px;}
.intro-hero .lnb-item {font-size: 16px; font-weight: 400; font-family: var(--ff-secondary); color: #777; text-transform: capitalize;}
.intro-hero .lnb-item.active {font-weight: 600; color: var(--primary-a);}
.intro-hero .lnb-item.page_depth3 {display: none; font-weight: 600; color: var(--primary-a);}
.intro-hero .lnb-item.page_depth3-lineup {display: none;}
.intro-hero .lnb-item.page_depth3-productlist {display: list-item;}
.intro-hero .lnb-arrow.page_depth3 {display: none;}
.intro-hero .lnb-arrow.page_depth3-lineup {display: none;}
.intro-hero .lnb-arrow.page_depth3-productlist {display: list-item;}

main{width: 100%; height: 100%;}
main .intro-hero-ani{position: relative; display: flex; align-items: flex-start; justify-content: center; text-align: center; width: 100%; height: calc(100dvh + 88px); top: 0; left: 0; padding-top: 0; padding-bottom: 8rem; margin-bottom: 0; overflow: hidden;}
main .intro-hero-ani .container{height: 100dvh; align-items: center; display: flex; flex-direction: column; justify-content: space-between; position: relative; padding-top: 88px;}
main .intro-hero-ani .container .intro-hero-ani__hero-wrap .title-box{margin: clamp(20px, 8vh, 100px) 0 clamp(30px, 4vh, 120px);}
main .intro-hero-ani .container>*{flex: initial;}
main .intro-hero-ani .title{color: #000; margin: 20px 0 70px;}
/* main .intro-hero-ani .box{width: 560px; height: 304px; position: fixed; transition: all 1s; left: 50%; top: calc(50% + 102px); transform: translate(-50%, -50%) !important; z-index: 10;} */
main .intro-hero-ani__hero-wrap{display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 1;}
/* 풀스크린: 브레드크럼·제목·패널을 한 래퍼에서 함께 배치 (시안: 한 페이지형 히어로) */
main .intro-hero-ani__hero-wrap.full{position: fixed; top: 0; left: 0; width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; padding-top: 88px; padding-inline: 50px; box-sizing: border-box; z-index: 100; transform: none !important; align-items: stretch; justify-content: flex-start;}
main .intro-hero-ani__hero-wrap.full.full--in-flow{position: absolute; top: 0; left: 50%; margin-left: -50vw; width: 100vw; transform: none !important;}
main .intro-hero-ani__hero-wrap.intro-hero-panel--flip-tween{transition: none !important;}
main .intro-hero-ani__hero-wrap.intro-hero-panel--flip-tween .intro-hero-ani__head,
main .intro-hero-ani__hero-wrap.intro-hero-panel--flip-tween .intro-hero-ani__page-title {
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
main .intro-hero-ani .box{width: 560px; height: 304px; position: relative; transition: border-radius 0.45s cubic-bezier(0.33, 1, 0.68, 1); z-index: 10;}
/* .full 시 풀배경 — transform은 GSAP 확대 연출용으로 비워 둠(!important 금지) */
main .intro-hero-ani__hero-wrap.full .box{position: absolute; inset: 0; min-height: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; z-index: 1; transition: none;}
main .intro-hero-ani__hero-wrap.full .box.intro-hero-ani__box--expand-tween{overflow: hidden;}
main .intro-hero-ani__hero-wrap.full .box img{border-radius: 0;}
main .intro-hero-ani .box-inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; display: flex; opacity: 0; width: 100%; transition: opacity 0.35s ease; transition-delay: 0s;}
main .intro-hero-ani__hero-wrap.full .box-inner{top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; transform: none; justify-content: center; align-items: stretch;}
main .intro-hero-ani .box-inner.active{opacity: 1; transition-delay: 0s;}
main .intro-hero-ani img{transition: border-radius 0.45s cubic-bezier(0.33, 1, 0.68, 1); will-change: auto; object-fit: cover; width: 100%; height: 100%; border-radius: 20px;}
main .intro-hero-ani .box-inner{flex-direction: column; text-align: center; justify-content: center;}
main .bg-img{z-index: -1; object-fit: cover;}
/* main section .container{height: 100%; color: #fff; justify-content: space-between;} */
main .intro-hero-ani .box-inner>*{flex: initial;}

main .intro-hero-ani__head {display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; z-index: 99; flex-shrink: 0;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__head {position: relative; z-index: 3;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {margin: clamp(10px, 2vh, 30px) 0 22px;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item {color: rgb(255, 255, 255, .6);}
main .intro-hero-ani__crumb .lnb .home-icon {width: 20px; height: 20px;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {color: #fff;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item.active {color: #fff;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-arrow {filter: brightness(0) invert(1); opacity: .8;}
.intro-hero-ani__crumb .lnb {justify-content: center; gap: 12px; padding-top: clamp(20px, 3vh, 100px);}
main .intro-hero-ani__crumb {width: 100%;}
main .intro-hero-ani__crumb .lnb {display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;}
main .intro-hero-ani__crumb .lnb-item {font-size: 16px; font-weight: 400; font-family: var(--ff-secondary); color: #777; text-transform: capitalize;}
main .intro-hero-ani__crumb .lnb-item.active {font-weight: 600; color: var(--primary-a);}
main .intro-hero-ani__crumb .lnb-item a {color: inherit; text-decoration: none;}
main .intro-hero-ani__head-fade {display: flex; flex-direction: column; align-items: center; width: 100%;}
main .intro-hero-ani__page-title {font-size: 64px; font-weight: 700; text-transform: capitalize; text-align: center; margin: clamp(10px, 2vh, 30px) 0 clamp(30px, 4vh, 70px); color: #000; line-height: 1.2;}
#company .intro-hero-ani .tab.tab--hero {width: 744px; height: 70px; margin-block: 0 clamp(20px, 8vh, 100px); font-size: 22px; line-height: 1;}
main .intro-hero-ani__slogan {font-size: 40px; line-height: 1.5; text-align: center; color: #000; margin: 0; padding-inline: 12px; font-weight: 700;}
main .intro-hero-ani__slogan strong {color: var(--primary);}
main .intro-hero-ani__split {display: none;}
main .intro-hero-ani__hero-wrap.full .intro-hero-ani__copy {justify-content: center; align-items: stretch; width: 100%; max-width: none; padding-top: clamp(170px, 24vh, 260px); box-sizing: border-box;}

/* .arrow.left 화살표(i.arrow.left)는 제외 — 레이아웃 .left만 */
main .left:not(.arrow){padding-top: 5rem;}
main .name{font-size: 80px; font-weight: 800; font-family: var(--ff-third); letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; max-width: 310px;}
main .right{display: flex; flex-direction: column; justify-content: flex-end;}
main h2{font-size: 40px; font-weight: 700; line-height: 1.3;}
main .right .dot-list li{font-size: 18px; font-weight: 300; color: #C1C1C1; padding: 0 0 0 16px; position: relative; margin: 0 0 14px; line-height: 1.2;}
main .right .dot-list li:last-child{margin: 0;}
main .right .dot-list li span{color: #fff; font-weight: 700;}
main .right .dot-list{padding: 28px 0 40px;}
main .right .dot-list li::before{content: ''; width: 6px; height: 6px; background: rgba(255,255,255,.6); position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 50%;}
main .right .stick-list{padding: 40px 0 0; border-top: 1px solid #fff;}
main .right .stick-list li{font-size: 22px; line-height: 1.2; margin: 0 0 16px; word-break: keep-all;}
main .right .stick-list li:last-child{margin: 0;}
main .right .stick-list li span{font-weight: 700;}
/* #tech .right .stick-list{border-top: none;} */
#tech .red{color: #FF4544; font-weight: 700;}
/* #tech .right .stick-list li{text-indent: -15px; padding-left: 15px; margin: 0 0 30px;} */
/* #tech .right .stick-list li:last-child{margin: 0;} */
main h3{font-size: 40px; font-weight: 700; margin: 24px 0 0;}

@media screen and (max-width: 1399px) {
  .intro-hero .intro-hero-bg p {font-size: 26px; line-height: 1.5; padding-inline: 10px;}
  .intro-hero .intro-hero-content {padding-block: 140px 72px; gap: 20px;}
  .intro-hero .intro-hero-title {font-size: 48px; line-height: 1.2;}
  .intro-hero .intro-hero-desc {font-size: 15px; line-height: 1.65; transform: translateY(-6px);}
  .intro-hero .lnb {gap: 10px;}
  .intro-hero .lnb-item {font-size: 14px;}
  main .intro-hero-ani {height: calc(100dvh + 60px);}
  main .intro-hero-ani .container {height: 100dvh; padding-top: 60px;}
  main .intro-hero-ani__hero-wrap.full {padding-top: 60px;}
  main .intro-hero-ani__crumb .lnb {gap: 10px; padding-top: 20px;}
  main .intro-hero-ani__crumb .lnb .home-icon {width: 18px; height: 18px;}
  main .intro-hero-ani__crumb .lnb-item {font-size: 14px;}
  main .intro-hero-ani__page-title {font-size: 48px; margin: 12px 0 26px;}
  main .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {margin: 8px 0 18px;}
  main .intro-hero-ani__slogan {font-size: 30px; line-height: 1.5;}
  #company .intro-hero-ani .tab.tab--hero {width: min(560px, 100%); height: 58px; margin-block: 0 20px; font-size: 18px;}
  #company .intro-hero-ani .tab.tab--hero .tab-item {padding-block: 12px;}
  main .name{max-width: initial; white-space: initial;}
  main .intro-hero-ani .box-inner h2{font-size: 30px;}
  main .intro-hero-ani .container .title-box{margin: 0 0 clamp(220px, 30vh, 380px);}
  main .intro-hero-ani .box{width: 500px; height: 230px;}
  main .intro-hero-ani .box-inner p{font-size: 18px;}
  main .intro-hero-ani__hero-wrap.full {padding-inline: 15px;}
  main section .container{flex-direction: column;}
  main .left:not(.arrow){padding: 0;}
  main section .container>*{flex: 1;}
  main section .container{justify-content: initial;}
}
@media screen and (max-height: 780px) {
  main .intro-hero-ani__page-title { margin: 10px 0 18px;}
  main .intro-hero-ani__slogan {font-size: clamp(26px, 2.2vw, 34px); line-height: 1.45;}
  #company .intro-hero-ani .tab.tab--hero {height: 58px; margin-block: 0 18px; font-size: 18px;}
  main .intro-hero-ani__hero-wrap.full .box {inset: 0; height: 100%;}
  main .intro-hero-ani__hero-wrap.full .intro-hero-ani__copy {padding-top: clamp(180px, 24vh, 240px);}
}
@media screen and (max-width: 767px) {
  .intro-hero .intro-hero-bg img {min-height: 150px; width: auto; object-fit: cover;}
  .intro-hero .intro-hero-bg p {font-size: 16px; line-height: 1.4; padding-inline: 8px;}
  .intro-hero .intro-hero-content {padding-block: 104px 56px; gap: 14px;}
  .intro-hero .intro-hero-title {font-size: 32px; line-height: 1.2;}
  .intro-hero .intro-hero-desc {font-size: 13px; line-height: 1.5; transform: translateY(-2px);}
  .intro-hero .lnb {gap: 8px;}
  .intro-hero .lnb-item {font-size: 12px;}
  main .intro-hero-ani {height: calc(100dvh + 50px);}
  main .intro-hero-ani .container {height: 100dvh; padding-top: 50px;}
  main .intro-hero-ani__hero-wrap.full {padding-top: 50px;}
  main .intro-hero-ani__crumb .lnb {gap: 8px; padding-top: 14px;}
  main .intro-hero-ani__crumb .lnb .home-icon {width: 16px; height: 16px;}
  main .intro-hero-ani__crumb .lnb-item {font-size: 12px;}
  main .intro-hero-ani__page-title {font-size: 34px; margin: 10px 0 18px;}
  main .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {margin: 6px 0 12px;}
  main .intro-hero-ani__slogan {font-size: 20px; line-height: 1.45;}
  #company .intro-hero-ani .tab.tab--hero {width: 100%; max-width: 340px; height: 48px; margin-block: 0 14px; font-size: 14px; padding: 5px;}
  #company .intro-hero-ani .tab.tab--hero .tab-item {padding-block: 9px;}
  main{word-break: keep-all;}
  main section{padding-bottom: 3rem; padding-top: 7rem;}
  main section .container{justify-content: space-between;}
  main section .container>*{flex: initial;}
  main .intro-hero-ani .container .title-box{margin: 0 0 clamp(180px, 30vh, 300px);}
  main .intro-hero-ani .box{width: calc(100% - 30px); height: 320px;}
  main .intro-hero-ani .box-inner.active{width: min(var(--container-wide-width), calc(100% - 30px)); margin-inline: auto;}
  main .intro-hero-ani__hero-wrap.full .intro-hero-ani__copy {align-items: center;}
  main .intro-hero-ani .box-inner h2{font-size: 24px; margin: 0 0 30px}
  /* main .intro-hero-ani .box-inner h2 br{display: none;} */
  main .name{font-size: 34px; max-width: 240px;}
  main .intro-hero-ani .box-inner p{font-size: 14px; word-break: keep-all;}
  main h2{font-size: 20px;}
  main .right .dot-list li{font-size: 14px;}
  main .right .stick-list li{font-size: 16px; text-indent: -12px; padding-left: 12px; line-height: 1.3;}
  main .right .dot-list li::before{top: 5px; transform: initial;}
}
@media screen and (max-width: 400px) and (max-height: 640px) {
  .intro-hero .intro-hero-bg p { font-size: 14px;}
}

/* common */
.sp-head {margin-bottom: 120px; text-align: center;}
.sp-title {font-size: 54px; font-weight: 700; font-family: var(--ff-secondary); text-transform: capitalize;}
.sp-desc {margin-top: 52px; font-size: 24px; font-weight: 700; line-height: 1.6;}
.sp-desc span {color: var(--primary);}
.bg-dark {background: #F8FAFD;}
.sp-content {padding-block: 140px 200px; position: relative;}
.sp-section {padding-block: 130px;}
.sp-section:last-child {padding-bottom: 220px;}
.section-tit {font-size: 60px; font-weight: 700; padding-bottom: 2.26rem; display: block; line-height: 1.55;}
.title-hide--padding {padding-block: 60px;}
.title-hide h3 {display: none;}
.title-hide--padding h3{display: none;}

.ko {word-break: keep-all;}
.bold {font-weight: 700;}
/* main {overflow-x: hidden;} */
main .container {width: min(var(--container-wide-width), calc(100% - 100px));}
main .container-narrow {width: min(var(--container-width), calc(100% - 100px));}
main .container.layout {display: grid; grid-template-columns: 472px 1fr;}
main .container-narrow.layout {display: grid; grid-template-columns: 372px 1fr;}
main .container.layout>*:first-child {text-align: left;}

@media screen and (max-width: 1399px) {
  .sp-tag {font-size: 18px;}
  .sp-title {font-size: 40px; padding-bottom: 1rem;}
  .sp-desc {font-size: 20px; font-weight: 500;}
  .layout {flex-direction: column;display: flex;}
  .desc {font-size: 20px; word-break: keep-all;}
  .sp-content {padding-block: 90px 150px;}
  .section-tit {font-size: 40px;}
  .sp-section {padding-block: 80px;}
  main {overflow-x: hidden;}
  main .container {width: min(720px, calc(100% - 30px));}
  main .container-narrow {width: min(720px, calc(100% - 30px));}
  main .container.layout,
  main .container-narrow.layout {grid-template-columns: 1fr;}
}
@media screen and (max-width: 767px) {
  .sp-section {padding-block: 60px;}
  .sp-content {padding-block: 80px 100px;}
  .sp-title {font-size: 30px;}
  .section-tit {font-size: 30px;}
  .sp-desc {font-size: 18px;}
  .desc {font-size: 18px;}
}

/* company */
#company {
  .tab {width: 480px; border-radius: 35px; background-color: #F1F5FA; display: flex; margin-inline: auto; padding: 8px; margin-block: 90px 100px;}
  .tab-item {width: 50%; text-align: center; padding-block: 17px; font-family: var(--ff-secondary); font-weight: 500; color: #8290A2;}
  .tab-item.active {background-color: #005FDB; color: #fff; border-radius: 29px;}
  .tab-item a {display: block; width: 100%; height: 100%;}
  @media screen and (max-width: 1399px) {
    .tab {margin-block: 60px; width: 360px;}
    .tab-item {padding-block: 10px; font-size: 14px;}
  }
  @media screen and (max-width: 767px) {
    .tab {width: auto; max-width: 360px;}
  }
  @media screen and (max-height: 780px) {
    .tab-item {padding-block: 10px;}
  }
}

.company-ceo {
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item {color: #777;}
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item.active {color: var(--primary-a);}
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {color: #000;}
  .intro-hero-ani__split.container {display: grid; grid-template-columns: 460px 1fr; gap: 70px; align-items: center; margin: 0 auto; text-align: left; min-height: min(55dvh, 100%); padding: clamp(24px, 4vh, 48px) 0 40px; box-sizing: border-box;}
  .ch-col--visual {padding-bottom: 160px;}
  .ch-tag {font-size: 50px; font-weight: 600; color: #000; line-height: 1.4; margin: 0;}
  .ch-lead {font-size: 34px; font-weight: 700; color: #000; margin: 0 0 clamp(20px, 5vh, 55px); line-height: 1.45;}
  .ch-body {display: flex; flex-direction: column; gap: 16px; position: relative;}
  .ch-body::before {content: ''; width: 60px; height: 4px; background-color: rgba(0, 0, 0, .2); position: absolute; top: 15px;}
  .ch-body p {font-size: 20px; font-weight: 400; line-height: 1.65; color: #000; margin: 0; padding-left: 90px;}
  .ch-body p span {font-weight: 600; color: var(--primary-a)}
  .ch-body .bold strong {color: var(--primary-a);}
  .ch-sign {margin: clamp(24px, 5vh, 55px) 0 0; font-size: 18px; color: #000; padding-left: 90px;font-weight: 700;}
  .ch-sign .name {font-size: 30px; font-weight: 700; letter-spacing: 0.35em; margin-left: 15px;}

  .sp-content {position: relative;}
  .sp-content .container {z-index: 1;}
  .sp-content .section-tit {font-size: 44px; text-align: center; padding-bottom: 80px;}
  .sp-content .content {padding-inline: 80px; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 30px; column-gap: 20px; text-align: center;}
  .sp-content .content .content-item {display: flex; flex-direction: column; padding-inline: 26px; border: #CED7E3 1px solid; border-radius: 20px; box-shadow: 0 3px 6px #CED7E3;}
  .sp-content .content .content-item .tag {font-size: 20px; font-weight: 700; padding-block: 18px; border-bottom: #CED7E3 1px solid;}
  .sp-content .content .content-item:nth-child(odd) .tag {color:var(--primary);}
  .sp-content .content .content-item:nth-child(even) .tag {color:#0012AE;}
  .sp-content .content .content-item p {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 120px; font-size: 24px; font-weight: 700;}
  .sp-content .content .content-item .weak {color: #777777; font-size: 20px;  font-weight: 500;}
  .sp-content .bg::before {content:''; position: absolute; background: linear-gradient(to bottom, #fff, transparent); width: 100%; height: 315px;}

  @media screen and (max-width: 1399px) {
    .intro-hero-ani__hero-wrap.full .intro-hero-ani__split {grid-template-columns: 1fr; min-height: auto; padding: 72px 20px 32px; gap: 0;}
    .ch-col--visual {order: 2; padding-bottom: 0; align-self: center; text-align: center;}
    .ch-col--text {order: 1;}
    .intro-hero-ani .box-inner .ch-tag {font-size: 34px;}
    .ch-sign .name {font-size: 26px;}
    .sp-content .section-tit {font-size: 30px;}
    .sp-content .content {padding-inline: 0; grid-template-columns: repeat(2, 1fr); row-gap: 16px; column-gap: 14px;}
    .sp-content .content .content-item {padding-inline: 16px; border-radius: 14px;}
    .sp-content .content .content-item .tag {font-size: 16px; padding-block: 12px;}
    .sp-content .content .content-item p {height: 88px; font-size: 20px;}
    .sp-content .content .content-item .weak {font-size: 16px;}
  }
  @media screen and (max-width: 767px) {
    .intro-hero-ani__hero-wrap.full .intro-hero-ani__split {display: flex; flex-direction: column; justify-content: space-evenly;}
    .ch-col--visual {order: 1;}
    .ch-col--text {order: 2;}
    .ch-body::before {content: none;}
    .ch-body p {padding: 0;}
    .intro-hero-ani .box-inner .ch-tag {font-size: 24px;}
    .intro-hero-ani .box-inner .ch-lead {font-size: 14px; margin-bottom: 0;}
    .ch-sign {margin-top: 20px; padding-left: 0; text-align: center;}
    .ch-sign .name {font-size: 22px;}
    .sp-content .section-tit {font-size: 24px;}
    .sp-content .content {grid-template-columns: 1fr; row-gap: 12px; column-gap: 0;}
    .sp-content .content .content-item {padding-inline: 14px; border-radius: 12px;}
    .sp-content .content .content-item .tag {font-size: 14px; padding-block: 10px;}
    .sp-content .content .content-item p {height: 72px; font-size: 18px; align-items: center; text-align: center;}
    .sp-content .content .content-item .weak {font-size: 14px;}
  }
  @media screen and (max-width: 400px) and (max-height: 640px) {
    .intro-hero-ani .box-inner .ch-tag {font-size: 20px;}
    .intro-hero-ani .box-inner .ch-lead {font-size: 12px;}
    .intro-hero-ani .box-inner .ch-body p {font-size: 12px;}
  }
}
.en .company-ceo {
  .ch-lead {font-size: 32px;}
  .ch-sign .name {letter-spacing: initial;}
  .sp-content .content .content-item p {font-size: 20px;}
  @media screen and (max-width: 1399px) {
    .ch-lead {font-size: 30px;}
    .intro-hero-ani .box-inner .ch-tag {font-size: 30px;}
    .sp-content .content .content-item p {font-size: 18px;}
  }
  @media screen and (max-width: 767px) {
    .ch-lead {font-size: 20px;}
    .intro-hero-ani .box-inner .ch-tag {font-size: 20px;}
    .sp-content .content .content-item p {font-size: 16px;}
  }
}


@keyframes vision-hero-outer-dot-orbit {from {transform: rotate(var(--vision-orbit-start)) translateY(calc(-1 * var(--vision-orbit-r)));} to {transform: rotate(calc(var(--vision-orbit-start) + 360deg)) translateY(calc(-1 * var(--vision-orbit-r)));}}

@media (prefers-reduced-motion: reduce) {.vision-hero li .outer::after {animation: none; transform: rotate(var(--vision-orbit-start)) translateY(calc(-1 * var(--vision-orbit-r)));}}

.company-vision {
  .vision-hero {font-size: 34px; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: clamp(28px, 3.6vw, 70px);}
  .vision-hero li {--vision-hero-size: min(430px, calc(430 / 1920 * 100vw), calc(430 / 1080 * 100vh)); border-radius: 50%; width: var(--vision-hero-size); height: var(--vision-hero-size); display: flex; justify-content: center; align-items: center; position: relative; isolation: isolate;}
  .vision-hero li .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2;}
  .vision-hero li .inner svg {width: 100%; height: auto;}
  .vision-hero li .outer {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + (50 / 430 * var(--vision-hero-size))); height: calc(100% + (50 / 430 * var(--vision-hero-size))); display: flex; justify-content: center; align-items: center; z-index: 3; border-radius: 50%; border: #005FDB 2px solid; --vision-orbit-r: calc(239 / 430 * var(--vision-hero-size)); --vision-orbit-start: 0deg;}
  .vision-hero li .outer::after {content: ''; position: absolute; left: 50%; top: 50%; width: calc(29 / 430 * var(--vision-hero-size)); height: calc(29 / 430 * var(--vision-hero-size)); margin: calc(-14.5 / 430 * var(--vision-hero-size)) 0 0 calc(-14.5 / 430 * var(--vision-hero-size)); border-radius: 50%; background: radial-gradient(#005FDB, #116FE9 30%, transparent); transform-origin: center center; transform: rotate(var(--vision-orbit-start)) translateY(calc(-1 * var(--vision-orbit-r))); animation: vision-hero-outer-dot-orbit 10s linear infinite;}
  .vision-hero li:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #005FDB; opacity: .9; z-index: 1;}
  .vision-hero li p {position: relative; z-index: 2; font-size: clamp(20px, calc(var(--vision-hero-size) * 0.079), 34px); line-height: 1.45; padding-inline: clamp(10px, calc(var(--vision-hero-size) * 0.05), 22px);}
  .sp-section {display: block;}
  .sp-head {padding-bottom: 140px;}
  .sp-head .slogan {width: 612px; height: auto; margin-inline: auto;}
  .sp-head .sp-title {font-size: 42px; margin-bottom: 60px; font-family: var(--ff-primary);}
  .sp-head .txt-box {display: flex; flex-direction: column; gap: 24px;}
  .sp-head .txt-box p {font-size: 18px; line-height: 1.6;}
  .sp-head .txt-box p strong {font-size: 24px;}
  .sp-head .map-scroll {width: 100%;}
  .sp-head .map-box {position: relative; margin-top: 75px; z-index: 1; overflow: hidden; min-width: 720px;}
  .sp-head .map-box img {position: relative; z-index: 0; display: block;}
  /* .sp-head .map-box::after {content:''; position: absolute; bottom: 0; left: 0; wi dth: 100%; height: 360px; background: linear-gradient(to top, #fff 40%, transparent); z-index: 2; pointer-events: none;} */
  .sp-head .map-box .map-pin,
  .sp-head .map-box .arrow-box,
  .sp-head .map-box .kor {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
  .sp-head .map-box {--map-base-w: 1920; --map-base-h: 763;}
  .sp-head .map-box .arrow-box img.map-arrow-scale {width: 100%; height: auto; display: block; transform: scale(0); transform-origin: calc((845 - 0.3079 * 122.768) / var(--map-base-w) * 100%) calc(317 / var(--map-base-h) * 100%); transition: transform 1.8s linear; transition-timing-function: linear !important; opacity: 1 !important;}
  .sp-head .map-box.sc_eft.active .arrow-box img.map-arrow-scale {transform: scale(1);}
  .sp-head .map-box .map-pin .pin-item {width: calc(26 / var(--map-base-w) * 100%); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(#FFCC1D, transparent); position: absolute; top: calc(var(--top) / var(--map-base-h) * 100%); left: calc(var(--left) / var(--map-base-w) * 100%);}
  .sp-head .map-box .kor .pin {position: absolute; left: calc(845 / var(--map-base-w) * 100%); top: calc(317 / var(--map-base-h) * 100%); width: calc(122.768 / var(--map-base-w) * 100%); transform:translate(-30.79%, -100%); z-index: 5;}
  .sp-head .map-box .kor .pin svg {display: block; width: 100%; height: auto;}
  .sp-head .map-box .kor .txt-box {position: absolute; left: calc(859 / var(--map-base-w) * 100%); top: calc(20 / var(--map-base-h) * 100%); width: calc(368 / var(--map-base-w) * 100%); height: calc(222 / var(--map-base-h) * 100%); z-index: 4;}

  .sp-head .container {padding-inline: 80px; margin-top: 70px; z-index: 2; position: relative;}
  .vision-list {display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;}
  .vision-list .vision-item {display: flex; flex-direction: column; gap: 10px; position: relative; height: 479px; border-radius: 20px; overflow: hidden;}
  .vision-list .vision-item::before {content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); z-index: 1; border-radius: 0 0 20px 20px;}
  .vision-list .vision-item .txt-box {height: 100%; justify-content: end; gap: 12px; padding-bottom: 40px; z-index: 2; pointer-events: none;}
  .vision-list .vision-item .txt-box .tag {font-size: 16px; font-weight: 700; color: #47A9FF;}
  .vision-list .vision-item .txt-box .tit {font-size: 21px; font-weight: 700; line-height: 1.5; color: #fff;}
  .vision-list .vision-item .txt-box .content {font-size: 40px; font-weight: 700; line-height: 1.5; color: #fff; margin-top: 8px;}
  .marquee { width: 100%; overflow: hidden; padding-block: 30px; pointer-events: none;}
  .marquee__track { display: flex; width: max-content; animation: vision-marquee 20s linear infinite;}
  .marquee__strip { display: flex; flex-shrink: 0; gap: 1em; align-items: center; font-size: 110px; font-weight: 700; font-family: var(--ff-secondary); white-space: nowrap; color: #F1F5FA}
  .marquee__strip span { flex-shrink: 0; text-transform: uppercase;}

  @media screen and (hover:hover) {
    .vision-list .vision-item:hover {transform: translateY(-45px); box-shadow: 0 13px 30px rgb(10, 108, 195, .39); transition: all 0.3s ease;}
  }
  @media screen and (max-width: 1399px) {
    .vision-hero li p {font-size: clamp(18px, calc(var(--vision-hero-size) * 0.078), 28px);}
    .sp-head .container {padding-inline: 40px; margin-top: 0;}
    .sp-head .img-box {top: 0;}
    .vision-list {grid-template-columns: 1fr; }
    .vision-list .vision-item {height: 350px;}

    .sp-head .slogan {width: 450px;}
    .sp-head .sp-title {font-size: 36px;}
    .sp-head .txt-box p {font-size: 16px;}
    .sp-head .txt-box p strong {font-size: 20px;}
    .vision-list .vision-item .txt-box .tit {font-size: 18px;}
    .vision-list .vision-item .txt-box .content {font-size: 34px;}
    .marquee__strip {font-size: 60px;}
    
  }
  @media screen and (max-width: 767px) {
    .sp-head .map-scroll {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 30px;}
    .sp-head .map-box {width: 720px;}
    .vision-hero {flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px;}
    .vision-hero li {--vision-hero-size: min(300px, calc(100vw - 56px), calc(100dvh * 0.28));}
    .vision-hero li p {font-size: clamp(14px, calc(var(--vision-hero-size) * 0.11), 20px); line-height: 1.35;}
    .vision-list {margin-top: 30px;}
    .vision-list .vision-item {height: 250px;}
    .sp-head .slogan {width: 300px;}
    .sp-head .sp-title {font-size: 30px;}
    .sp-head .txt-box p {font-size: 14px;}
    .sp-head .txt-box p strong {font-size: 18px;}
    .vision-list .vision-item .txt-box .tit {font-size: 16px;}
    .vision-list .vision-item .txt-box .content {font-size: 28px;}
    .marquee__strip {font-size: 50px;}
  }

  @media screen and (max-width: 400px) and (max-height: 640px) {
    .vision-hero li p {font-size: clamp(14px, calc(var(--vision-hero-size) * 0.08), 20px);}
    .vision-hero {gap: 20px;}
  }
}
.en .company-vision {
  .vision-list .vision-item .txt-box .tit {display: none;}
  .vision-list .vision-item .txt-box .tag {font-size: 21px;}
  .vision-list .vision-item .txt-box .sub {font-size: 30px;}
  @media screen and (max-width: 1399px) {
    .vision-list .vision-item .txt-box .tag {font-size: 18px;}
    .vision-hero li p {font-size: clamp(14px, calc(var(--vision-hero-size) * 0.078), 28px);}
  }
  @media screen and (max-width: 767px) {
    .vision-list .vision-item .txt-box .tag {font-size: 16px;}
  }
}

@keyframes vision-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.company-history {
  .history-timeline-wrap {margin-top: 130px; position: relative;}
  .sp-section {position: relative;}
  .container.layout {display: grid; grid-template-columns: minmax(0, 1fr) 486px; align-items: start; column-gap: clamp(40px, 5vw, 96px);}
  .history-side-image {width: 486px; max-width: 100%; justify-content: center;}
  .history-side-image img {width: 312px; height: auto; display: block;}
  .history-side-image .build-up {margin-top: 505px;}
  .sp-content .content {position: relative;}
  .sp-content .content .content-item {display: flex; flex-direction: column; margin-bottom: 70px; padding-left: 95px; position: relative; --history-year-size: 76px; --history-year-lh: 1.5;}
  .sp-content .content .content-item:last-child {margin-bottom: 0;}
  .sp-content .content .content-item .year {font-size: var(--history-year-size); font-weight: 700; line-height: var(--history-year-lh); font-family: var(--ff-secondary); display: block; margin-bottom: 8px;}
  .sp-content .content .content-item .timeline-bullet {position: absolute; left: 0; top: calc((var(--history-year-size) * var(--history-year-lh)) / 2); transform: translateY(-50%); width: 20px; height: 20px; box-sizing: content-box; border-radius: 50%; border: rgba(210, 210, 210, .3) 12px solid; background-color: #D2D2D2; background-clip: padding-box; flex-shrink: 0; transition: background-color 0.2s ease; z-index: 2;}
  .sp-content .content .content-item .timeline-bullet.filled {background-color: #005FDB; border-color: rgba(0, 95, 219, .2);}
  .sp-content.bg-blue .content .content-item .timeline-bullet.filled {background-color: #fff; border-color: rgba(255, 255, 255, .3);}
  .sp-content .content .content-item .year-box {font-size: 22px; line-height: 1.5;}
  .sp-content .content .content-item .year-box p {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; color: #BFBFBF; transition: color .25s ease; border-top: #E8E8E8 1px solid; padding-block: 18px; line-height: 1.55;}
  .sp-content .content .content-item .year-box p:last-child {border-bottom: #E8E8E8 1px solid;}
  .sp-content .content .content-item .year-box p .sub-txt {font-size: 18px; font-weight: 400; display: block;}
  .sp-content .content .content-item .year-box .month {font-weight: 700; color: #A9A9A9; margin-right: 25px; flex-shrink: 0; width: 42px;}
  .sp-content .content .content-item .year-box p .cont {flex: 1 1 0%; min-width: 0;}
  .sp-content .content .content-item .year-box p .next {display: block; flex-basis: 100%; width: 100%; height: 0; overflow: hidden;}
  .sp-content .content .content-item .year-box p .next-line {display: block; margin-top: 14px;}
  .sp-content .content .content-item .year {color: #B2B2B2; transition: color .25s ease;}
  .sp-content .content .content-item.is-active .year,
  .sp-content .content .content-item.is-active .year-box p .month {color: var(--primary-a);}
  .sp-content .content .content-item.is-active .year-box p {color: #000;}
  .sp-content.bg-blue .content .content-item .year {color: #A8A8A8;}
  .sp-content.bg-blue .content .content-item .year-box p {color: #B5B5B5;}
  .sp-content.bg-blue .content .content-item .year-box .month {color: #B5B5B5;}
  .sp-content.bg-blue .content .content-item.is-active .year,
  .sp-content.bg-blue .content .content-item.is-active .year-box p,
  .sp-content.bg-blue .content .content-item.is-active .year-box .month {color: #fff;}
  .bg-blue {position: relative; background-color: #F3F9FF;}
  .bg-blue .bg {z-index: 0;}
  .bg-blue > .container.layout {position: relative; z-index: 2;}

  .history-timeline-track {position: absolute; width: 6px; pointer-events: none; overflow: visible;}
  .history-timeline-track--upper {z-index: 0;}
  .history-timeline-track--lower {z-index: 1;}
  .history-timeline-track-segment {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
  .history-timeline-track-segment--upper {background: rgba(210, 210, 210, .4);}
  .history-timeline-track-segment--lower {background: rgba(210, 210, 210, .4);}
  .history-timeline-fill-layer {position: absolute; left: 0; width: 100%; height: 0; z-index: 2; pointer-events: none;}
  .history-timeline-fill-layer--upper {top: 0; background: var(--primary-a);}
  .history-timeline-fill-layer--lower {top: 0; background: #fff;}
  .history-timeline-icon {position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 3; pointer-events: none;}
  .history-timeline-icon svg {display: block; width: 49px; height: auto;}

  .min-wrap {display: none;}
  @media screen and (max-width: 1399px) {
    .container.layout {grid-template-columns: minmax(0, 1fr) 180px; column-gap: 36px;}
    .history-side-image {width: 180px; top: 120px;}
    .sp-content .content .content-item {padding-left: 58px; --history-year-size: 36px;}
    .sp-content .content .content-item .year {font-size: var(--history-year-size);}
    .sp-content .content .content-item .year-box {font-size: 16px;}
    .sp-content .content .content-item .year-box p .sub-txt {font-size: 14px; display: block; width: 100%;}
    .bg-blue .bg img {object-position: 65% center;}
    .min-wrap {display: none;}
  }
  @media screen and (max-width: 767px) {
    .container.layout {grid-template-columns: 1fr;}
    .history-side-image {display: none;}
    .sp-content .content .content-item {--history-year-size: 28px; padding-left: 0;}
    .sp-content .content .content-item .year {font-size: var(--history-year-size);}
    .sp-content .content .content-item .year-box {font-size: 14px;}
    .sp-content .content .content-item .year-box .month {margin-right: 5px;}
    .sp-content .content .content-item {display: flex; flex-direction: column; margin-bottom: 70px;}
    .sp-content .content .content-item .timeline-bullet {display: none;}
    .history-timeline-track--upper, .history-timeline-track--lower {display: none;}
    .history-timeline-icon {display: none !important;}
    .min-wrap {display: none;}
  }
  @media screen and (max-width: 400px) and (max-height: 640px) {
    .min-wrap {display: block;}
  }
}
@keyframes bullet01 {
  0% {width: 0; height: 0; opacity: 0.09;}
  100% {width: 700px; height: 700px; opacity: 0;}
}
@keyframes bullet02 {
  0% {width: 0; height: 0;opacity: 0.2;}
  100% {width: 700px; height: 700px; opacity: 0;}
}
@keyframes bullet03 {
  0% {width: 0; height: 0;opacity: 0.4;}
  100% {width: 700px; height: 700px; opacity: 0;}
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.company-global {
  --global-map-base-w: 1920;
  --global-map-base-h: 862;
  .sp-section {padding-block: 0;}
  .sp-head {position: relative;}
  .map-scroll {width: 100%;}
  .bg {width: 100%; min-width: 720px; height: auto; position: relative; z-index: 0; isolation: isolate;}
  .bg > img {width: 100%; height: auto; display: block; position: relative; z-index: 0;}
  .bg .ko-pin img,
  .bg .ko-txt img {width: 100%; height: auto; object-fit: contain; display: block;}
  .bg .ko-zoom {position: absolute; top: calc(347 / var(--global-map-base-h) * 100%); left: calc(1136 / var(--global-map-base-w) * 100%); width: calc(166 / var(--global-map-base-w) * 100%); aspect-ratio: 1 / 1; z-index: 2;}
  .bg .ko-zoom img {width: 100%; height: auto; display: block; transform: scale(0); transform-origin: 50% 50%; transition: transform 1.8s linear;}
  .sc_eft.active .bg .ko-zoom.custom-scaleup img {transform: scale(1);}
  .bg .ko-pin {position: absolute; top: calc(322 / var(--global-map-base-h) * 100%); left: calc(1105 / var(--global-map-base-w) * 100%); width: calc(54 / var(--global-map-base-w) * 100%); height: calc(80 / var(--global-map-base-h) * 100%); z-index: 3;}
  .bg .ko-txt {position: absolute; top: calc(275 / var(--global-map-base-h) * 100%); left: calc(1138 / var(--global-map-base-w) * 100%); width: calc(379 / var(--global-map-base-w) * 100%); height: calc(260 / var(--global-map-base-h) * 100%); z-index: 3;}
  .bg .global-countries {position: absolute; inset: 0; z-index: 4; pointer-events: none;}
  /* 전역 .bg img의 object-fit:cover가 적용되면 라벨 PNG 상단이 잘림(iOS calc 반올림과 겹쳐 더 두드러짐) */
  .bg .global-countries img {position: absolute; width: calc(var(--w) / var(--global-map-base-w) * 100%); height: calc(var(--h) / var(--global-map-base-h) * 100%); left: calc(var(--left) / var(--global-map-base-w) * 100%); top: calc(var(--top) / var(--global-map-base-h) * 100%); overflow: visible; object-fit: contain; object-position: center top;}


  .sp-section .container {text-align: left; position: absolute; width: 100%; top: 140px; left: 0; z-index: 5;}
  .sp-desc {margin-top: 34px;}
  .partners {width: 100%;}
  .partners h4 {font-size: 44px; font-weight: 700; color: #000; margin-bottom: 50px; text-align: center;}
  .partners-list {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px; row-gap: 20px;}
  .partners-list .partners-item {width: 100%; height: 70px; background-color: #fff; padding: 5px 20px; box-shadow: 0px 5px 15px #CED7E3;}
  .partners-marquee {overflow: hidden; width: 100%; position: relative; background-color: #F1F5FA; padding-block: 60px;}
  .marquee-container { display: flex; width: fit-content; animation: marquee 25s linear infinite;}
  .marquee-content { display: flex; list-style: none; margin: 0; margin-right: 20px; padding: 0; gap: 20px; flex-shrink: 0;}
  .marquee-content li {width: 190px; height: 79px; background-color: #fff; padding: 5px 20px; box-shadow: 0px 3px 6px #CED7E3; display: flex; justify-content: center;}
  .marquee-content img {object-fit: contain; height: 100%; width: auto;}
  @media screen and (max-width: 1399px) {
    .sp-section {padding-top: 0;}
    .sp-head {display: flex; flex-direction: column;}
    .sp-desc {font-weight: 700;}
    .sp-section .container {top: 70px;}
    .partners {width: 100%;}
    .partners h4 {font-size: 24px;}
    .partners-list {grid-template-columns: repeat(4, 1fr);}
    .partners-list .partners-item {height: 60px; padding: 6px 14px;}
    .partners-list .partners-item img{object-fit: contain; height: 100%; margin:auto;}
    .partners-marquee {padding-block: 40px;}
    .marquee-content li {width: 160px; height: 64px; padding: 5px 12px;}
  }
  @media screen and (max-width: 767px) {
    .map-scroll {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;}
    .bg {width: 720px;}
    .sp-desc {padding-right: clamp(50px, 20vw, 200px);}
    .sp-section .container {top: 40px;}
    .partners-list {grid-template-columns: repeat(2, 1fr);}
    .partners-list .partners-item {height: 52px; padding: 5px 10px;}
    .partners h4 {font-size: 20px;}
    .partners-marquee {padding-block: 28px;}
    .marquee-content {gap: 12px; margin-right: 12px;}
    .marquee-content li {width: 130px; height: 50px; padding: 4px 8px;}
  }
}

/* business */
#business {
  .banner {width: 100%; height: 336px; padding: 0 100px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; border-radius: 20px; margin-top: 160px;}
  .banner .txt-box {display: flex; flex-direction: column; gap: 28px;}
  .banner .sbj {font-size: 34px; font-weight: 700; color: #fff;  line-height: 1.5;word-break: keep-all; position: relative; z-index: 2; text-align: left; }
  .banner .desc {font-size: 20px; font-weight: 400; color: #fff; word-break: keep-all; margin-top: 15px; position: relative; z-index: 2; margin-block: 0; text-align: left; }
  .banner .btn {height: 63px; position: relative; z-index: 2;}
  .banner .btn span{color: #000;}
  .banner .btn .arrow-box.inactive {background-color: transparent;width: 38px;height: 21px;}
  .banner .btn .arrow-box.active {display: none;}
  .banner .bg {z-index: 1;}
  
  @media (hover: hover) {
    .banner .btn:hover {background-color: #fff;  border-color: #fff;}
    .banner .btn:hover span{color: var(--primary);}
    .banner .btn:hover .arrow-box.inactive {display: none;}
    .banner .btn:hover .arrow-box.active {display: flex;  background-color: var(--primary);  justify-content: center;  align-items: center;}
    .banner .btn:hover .arrow-box.active .arrow-box .btn-arrow {stroke: #fff;}
  }

  @media screen and (max-width: 1399px) {
    .banner {padding-inline: 70px;}
    .banner {flex-direction: column; height: auto; padding: 28px; gap: 30px;}
    .banner .sbj {font-size: 24px; text-align: center;}
    .banner .desc {font-size: 14px; text-align: center; margin-top: 5px;}
    .banner .btn {height: 45px; width: 180px;}
  }
  @media screen and (max-width: 767px) {
  }
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.business-d2d {
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item {color: #777;}
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__crumb .lnb-item.active {color: var(--primary-a);}
  .intro-hero-ani__hero-wrap.full .intro-hero-ani__page-title {color: #000;}
  .d2d-hero .lead {color: #000; font-weight: 700; margin-bottom: 80px;}
  .d2d-hero .lead strong {color: var(--primary-a);}
  .d2d-head {display: flex; margin-inline: auto; width: auto; justify-content: center; align-items: center;}
  .d2d-head .circle {font-size: 22px; width: 240px; height: 240px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center;}
  .d2d-head .blue {--d2d-blue-size: 318px; --d2d-outer-gap: 40px; width: var(--d2d-blue-size); height: var(--d2d-blue-size); min-width: var(--d2d-blue-size); min-height: var(--d2d-blue-size); aspect-ratio: 1 / 1; flex: 0 0 var(--d2d-blue-size); font-size: 34px; font-weight: 700; color: #fff; background: transparent radial-gradient(closest-side at 50% 70%, #005FDB 0%, #178CFF 100%) 0% 0% no-repeat padding-box; position: relative;}
  .d2d-head .blue .outer {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: calc(var(--d2d-blue-size) + (var(--d2d-outer-gap) * 2)); height: calc(var(--d2d-blue-size) + (var(--d2d-outer-gap) * 2)); aspect-ratio: 1 / 1;}
  .d2d-head .blue .outer svg {width: 100%; height: 100%; aspect-ratio: 1 / 1; animation: rotateCircle 12s linear infinite; transform-origin: center center; transform-box: fill-box; display: block;}
  .d2d-head .blue .inner {position: absolute; border-radius: 50%; inset: calc(var(--d2d-blue-size) * 11 / 318);}
  .d2d-head .blue .inner svg {width: 100%; height: 100%;}
  .d2d-head .wrap {display: flex; justify-content: center; align-items: center; position: relative;  border: #fff 2px solid; background: rgba(211,233,255,.35); width: 807px; height: 294px; border-radius: 150px;}
  /* .d2d-head .wrap::before {content:'';} */
  .d2d-head .item {font-weight: 700; background: #fff; border: 3px solid; position: relative; display: flex; flex-direction: column;}
  .d2d-head .item:nth-child(odd) {border-color: #47A9FF; color: #47A9FF;}
  .d2d-head .item:nth-child(even) {border-color: #005FDB; color: #005FDB;}
  .d2d-head .item .icon-box {width: 101px; height: auto;}
  .d2d-head .item .plus {border-radius: 50%; position: absolute; left: 0; transform: translateX(-50%); z-index: 10; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px;}
  .d2d-head .item .plus svg {box-shadow: #A9B5C5 0 0 3px; border-radius: 50%;}
  .d2d-head .arrow-box {position: relative; width: 92px; z-index: 20;}
  .d2d-head .arrow-box svg {margin-left: auto; transform: translateX(20px);}
  .container.split {display: grid; grid-template-columns: 460px 1fr; gap: 40px;}
  .left {
    .section-tit {font-size: 44px; padding-bottom: 50px;}
    .tit-box .desc {color: #333333; line-height: 1.8; font-size: 20px; margin-bottom: 25px;}
  }
  .right {
    padding-top: 60px;
    .step {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
    .step li {position: relative; width: 100%; height: auto; aspect-ratio: 440/280; border-radius: 20px; overflow: hidden; padding: 34px; opacity: .6;}
    .step li .tit {height: 100%; display: flex; justify-content: space-between; align-items: end;}
    .step li .tit .tit-txt {font-size: 24px; font-weight: 700; color: #fff; line-height: 1.6;}
    .step li .tit .num {font-size: 40px; font-weight: 600; color: var(--primary)}
    .step li:hover {opacity: 1;}
  }
  @media screen and (max-width: 1399px) {
    .d2d-head {width: min(720px, 100%);}
    .d2d-head .circle {width: 150px; height: 150px; font-size: 14px;}
    .d2d-head .blue {--d2d-blue-size: 190px; --d2d-outer-gap: 6px; font-size: 22px; flex: 0 0 var(--d2d-blue-size);}
    .d2d-head .wrap {width: clamp(420px, calc(100% - 258px), 520px); height: 190px; border-radius: 100px; flex: 0 1 auto;}
    .d2d-head .item .icon-box {width: 62px;}
    .d2d-head .item .plus {width: 22px; height: 22px;}
    .d2d-head .item .plus svg {width: 100%; height: 100%; display: block;}
    .d2d-head .arrow-box {width: 56px; flex: 0 0 56px;}
    .d2d-head .arrow-box svg {width: 36px; height: 36px; transform: translateX(2px);}
    .container.split {grid-template-columns: 1fr; gap: 28px;}
    .left .section-tit {font-size: 32px; padding-bottom: 26px;}
    .left .tit-box .desc {font-size: 16px; margin-bottom: 0;}
    .right {padding-top: 0;}
    .right .step {gap: 14px;}
    .right .step li {padding: 24px; border-radius: 16px; opacity: 1;}
    .right .step li .tit .tit-txt {font-size: 18px; line-height: 1.5;}
    .right .step li .tit .num {font-size: 30px;}
  }
  @media screen and (max-width: 767px) {
    .d2d-hero .lead {font-size: 16px; margin-bottom: 22px; line-height: 1.45;}
    .d2d-head {width: 100%; flex-direction: column; align-items: center; gap: 0;}
    .d2d-head .circle {width: 108px; height: 108px; min-width: 108px; min-height: 108px; aspect-ratio: 1 / 1; font-size: 12px;}
    .d2d-head .blue {--d2d-blue-size: 148px; --d2d-outer-gap: -10px; width: var(--d2d-blue-size); height: var(--d2d-blue-size); min-width: var(--d2d-blue-size); min-height: var(--d2d-blue-size); aspect-ratio: 1 / 1; font-size: 16px; flex: 0 0 var(--d2d-blue-size);}
    .d2d-head .wrap {width: auto; max-width: 340px; min-width: 0; height: auto; min-height: 0; border-radius: 20px; padding: 12px 10px;}
    .d2d-head .item .icon-box {width: 34px;}
    .d2d-head .item .plus {width: 14px; height: 14px;}
    .d2d-head .item .plus svg {width: 100%; height: 100%; display: block;}
    .d2d-head .arrow-box {width: 28px;}
    .d2d-head .arrow-box svg {width: 22px; height: 22px; transform: translateX(0) translateY(10px) rotate(90deg);}
    .left .section-tit {font-size: 26px; padding-bottom: 14px;}
    .left .tit-box .desc {font-size: 14px; line-height: 1.65;}
    .right .step {grid-template-columns: 1fr; gap: 12px;}
    .right .step li {padding: 18px; border-radius: 14px;}
    .right .step li .tit .tit-txt {font-size: 16px; line-height: 1.4;}
    .right .step li .tit .num {font-size: 24px;}
  }
  @supports (-webkit-touch-callout: none) {
    @media screen and (min-width: 768px) and (max-width: 1199px) {
      .right .step li .tit {padding-bottom: 40px;}
    }
  }
  @media screen and (max-height: 780px) and (min-width: 768px) {
    .intro-hero-ani__hero-wrap.full .intro-hero-ani__copy {padding-top: 200px;}
    .d2d-hero .lead {margin-bottom: 30px; line-height: 1.5;}
    .d2d-head {width: min(860px, 100%);}
    .d2d-head .circle {width: 164px; height: 164px; font-size: 16px;}
    .d2d-head .blue {--d2d-blue-size: 216px; --d2d-outer-gap: 0px; font-size: 23px;}
    .d2d-head .blue .outer svg g {stroke-width: 11px;}
    .d2d-head .wrap {width: 540px; height: 196px; border-radius: 100px;}
    .d2d-head .item .icon-box {width: 62px;}
    .d2d-head .item .plus {width: 26px; height: 26px;}
    .d2d-head .item .plus svg {width: 100%; height: 100%; display: block;}
    .d2d-head .arrow-box {width: 56px;}
    .d2d-head .arrow-box svg {width: 36px; height: 36px; transform: translateX(2px);}
  }
  @media screen and (max-width: 400px) and (max-height: 640px) {
    .intro-hero-ani__page-title {font-size: 32px;}
    .d2d-hero .lead {font-size: 14px; padding-inline: 15px;}
    .d2d-head .blue {--d2d-blue-size: 110px; --d2d-outer-gap: -10px;}
  }
}
.en .business-d2d {
  .d2d-head .item {font-size: 18px;}
  @media screen and (max-width: 1399px) {
    .d2d-head .item .icon-box {width: 45px;}
    .d2d-head .item {font-size: 14px;}
  }
  @media screen and (max-width: 767px) {
    .d2d-head .item .icon-box {width: 35px;}
  }
  @media screen and (max-width: 400px) and (max-height: 640px) {
    .d2d-head .blue {font-size: 14px;}
  }
}

.business-area {
  .tab {width: 1096px; height: 70px; border-radius: 35px; background-color: #F1F5FA; display: flex; margin-inline: auto; padding: 8px; margin-bottom: 70px;  font-size: 22px; line-height: 1; font-weight: 500;}
  .tab-item {width: 50%; text-align: center; padding-block: 17px; font-family: var(--ff-secondary); font-weight: 500; color: #8290A2;}
  .tab-item.active {background-color: #005FDB; color: #fff; border-radius: 29px;}
  .tab-item a {display: block; width: 100%; height: 100%;}
  .sp-section.chapter {padding-block: 120px 160px; scroll-margin-top: 150px;}
  .sp-section {position: relative;}
  .sp-section .half {position: absolute; width: 100%; height: 50%; background-color: #F1F5FA; top: 0; z-index: -1;}
  .sp-section .sp-tit-box {text-align: center;}
  .sp-section .sp-tit-box .section-tit {font-size: 40px; padding-bottom: 30px;}
  .sp-section .sp-tit-box .section-tit span {font-size: 18px; font-weight: 500; color: #777777;}
  .sp-section .sp-tit-box .desc {font-size: 20px; padding-bottom: 20px;}
  .sp-section .sp-tit-box .ls {width: 100%; display: flex; justify-content: space-between; gap: 4px;}
  .sp-section .sp-tit-box .ls li {flex: 1; height: 47px; background-color: #47A9FF; color: #fff; font-size: 18px; font-weight: 700; display: flex; justify-content: center; align-items: center;}
  .sp-section .sp-tit-box .ls li:nth-child(even) {background-color: var(--primary);}
  .sp-section .img-box {margin-block: 30px 40px;}
  .sp-section .container.layout {grid-template-columns: 352px 1fr;}
  .sp-section .container.layout .section-tit {font-size: 34px;}
  .sp-section .container.layout .desc {font-size: 16px; color: #777777; width: 310px;}

  .sp-section .partners {display: grid; grid-template-columns: repeat(var(--grid-count), 1fr); gap: 12px;}

  @media screen and (hover:hover) {
    .tab-item:hover {color: var(--primary); font-weight: 700; background-color: #F0F7FF; border-color: #D3E9FF;}
  }
  @media screen and (max-width: 1399px) {
    .tab {width: min(720px, 100%); height: 58px; border-radius: 29px; padding: 6px; margin-bottom: 40px; font-size: 16px;}
    .tab-item {font-size: 16px;}
    .tab-item {padding-block: 12px;}
    .tab-item.active {border-radius: 23px;}
    .sp-section.chapter {padding-block: 80px 100px;}
    .sp-section.chapter:nth-child(2) {padding-top: 0;}
    .sp-section.chapter .container:first-child {position: relative; padding-block: 30px; z-index: 0;}
    .sp-section.chapter .container:first-child::before {content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background-color: #F1F5FA; z-index: -1;}
    .sp-section .sp-tit-box .section-tit {font-size: 36px;}
    .sp-section .sp-tit-box .section-tit span {font-size: 16px;}
    .sp-section .sp-tit-box .desc {font-size: 18px;}
    .sp-section .sp-tit-box .ls li {font-size: 16px;}
    .sp-section .half {display: none;}
    
    .sp-section.chapter .container.layout {grid-template-columns: 1fr;}
    .sp-section.chapter .container.layout .tit-box {display: grid; grid-template-columns: 150px 1fr; margin-bottom: 20px;}
    .sp-section .container.layout .section-tit {font-size: 30px;}
    .sp-section .container.layout .desc {font-size: 14px; padding-top: 10px; width: 100%;}
  }
  @media screen and (max-width: 767px) {
    .sp-head {padding-bottom: 0;}
    .tab {width: 100%; max-width: none; height: auto; margin: 0 0 26px; padding: 0; border-radius: 0; background: transparent; display: flex; flex-direction: column; gap: 0; font-size: 14px;}
    .tab-item {width: 100%; font-size: 14px; padding-block: 12px; border-radius: 0; border-inline: none; border-bottom: 1px solid #E1E7EF; background: transparent;}
    .tab-item:first-child {border-top: 1px solid #E1E7EF;}
    .tab-item.active {border-radius: 0; background-color: var(--primary-a); color: #fff;}
    .sp-section.chapter {padding-block: 60px;}
    .sp-section .sp-tit-box .section-tit {font-size: 30px;}
    .sp-section .sp-tit-box .section-tit span {font-size: 14px;}
    .sp-section .sp-tit-box .desc {font-size: 16px;}
    .sp-section .sp-tit-box .ls {flex-direction: column;}
    .sp-section .sp-tit-box .ls li {font-size: 14px; padding-block: 5px;}
    .sp-section .img-box {height: 150px;}
    .sp-section .img-box img {width: auto;}
    .sp-section.chapter .container.layout .tit-box {grid-template-columns: 1fr;}
    .sp-section .container.layout .section-tit {font-size: 24px; padding-bottom: 10px;}
    .sp-section .container.layout .desc {font-size: 14px; padding-top: 10px;}
    .sp-section .partners {grid-template-columns: repeat(2, 1fr);}
  }
}


@media screen and (min-width: 1400px) {
  .en .business-area {
    .tab {width: 1200px;}
  }
}

@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}


/* customer */
.customer {
  .sp-section {padding-top: 0;}
  .sp-section .container:first-child {padding-top: 30px; border-top: var(--primary) 2px solid;}
  .intro-hero {margin-bottom: 100px;}
  .intro-hero .intro-hero-bg {color: #000; height: auto; min-height: 60px;}
  .intro-hero .intro-hero-bg p {color: #000; text-shadow: none;}
}
#location {
  /* .sp-title {font-size: 34px; font-weight: 700; text-align: center; padding-bottom: 24px;} */
  .sp-head {margin-bottom: 100px;}
  .content {display: flex; flex-direction: column;}
  .content .map {width: 100%; height: 500px; overflow: hidden;}
  .content .content-box {padding-left: 20px; display: flex; align-items: end; gap: 40px; margin-top: -100px;}
  .content .banner {background: linear-gradient(135deg, #47A9FF, #005FDB); width: 288px; height: 310px; flex-shrink: 0; padding: 40px 35px; display: flex; flex-direction: column; justify-content: space-between; z-index: 50; border-radius: 20px;}
  .content .banner .tag {font-size: 20px; color: #fff;}
  .content .banner .tit {font-size: 54px; font-weight: 700; color: #fff; line-height: 1.2;}
  .content .info {display: flex; justify-content: space-between; row-gap: 20px; flex-wrap: wrap; padding-bottom: 20px;}
  .content .info > div {display: flex; align-items: center; gap: 12px;}
  .content .info .icon-box {width: 57px; height: 57px; background-color: #F1F5FA; border-radius: 50%; display: flex; align-items: center; justify-content: center; object-fit: contain; flex-shrink: 0;}
  .content .info .icon-box svg {height: 24px; width: auto;}
  .content .info .tit {font-size: 18px; font-weight: 700; color: var(--primary);}
  .content .info .desc {font-size: 18px; color: #777777;}
  .content .info .address {width: 100%;}
  .content .info .address .tit {font-size: 20px;}
  .content .info .address .desc {font-size: 20px; font-weight: 700; color: #000;}
  @media screen and (max-width: 1399px) {
    .content .map {height: 300px;}
    .content .content-box {padding-left: 10px; gap: 20px; margin-top: 20px; align-items: start;}
    .content .banner {width: 250px; height: 250px; padding: 30px 25px; position: relative; top: -50px;}
    .content .banner .tag {font-size: 18px;}
    .content .banner .tit {font-size: 48px;}
    .content .info .icon-box {height: 45px; width: 45px;}
    .content .info .icon-box img {height: 20px;}
    .content .info .tit {font-size: 16px;}
    .content .info .desc {font-size: 16px;}
    .content .info .address .tit {font-size: 18px;}
    .content .info .address .desc {font-size: 18px;}
  }
  @media screen and (max-width: 767px) {
    .content .map {height: 200px;}
    .content .content-box {padding-left: 0; gap: 20px; margin-top: 20px; flex-direction: column-reverse;}
    .content .banner {width: 250px; height: 250px; margin-inline: auto; padding: 30px 25px; top: 0; display: none;}
    .content .banner .tag {font-size: 16px;}
    .content .banner .tit {font-size: 40px;}
    .content .info .icon-box {height: 30px; width: 30px;}
    .content .info .icon-box img {height: 15px;}
    .content .info .tit {font-size: 14px;}
    .content .info .desc {font-size: 14px;}
    .content .info .address {width: 100%; flex-wrap: wrap;}
    .content .info .address .tit {font-size: 16px;}
    .content .info .address .desc {font-size: 16px; width: 100%; padding-left: 42px;}
  }
}
.en #location {
  .content .info .address .icon-box {transform: translateY(0);}
  .content .info .address .tit {transform: translateY(0);}
  .content .info .icon-box {width: 50px; height: 50px;}
  @media screen and (max-width: 1399px) {
    .content .info .icon-box {width: 45px; height: 45px;} 
  }
  @media screen and (max-width: 767px) {
    .content .info .icon-box {width: 30px; height: 30px;}
  }
}

#notice {
  .sp-head {margin-bottom: 100px;}
  .gall-ls--h {display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 15px;}
  .gall-ls--h > li {border-bottom: none; min-width: 0; width: 100%;}
  .gall-ls--h > li > a {overflow: hidden; display: block; padding-block: 0; border-radius: 15px; width: 100%;}
  .gall-ls--h > li > a .thumb {width: auto; height: 260px;}
  .gall-ls--h > li > a .thumb img {width: 100%; height: 100%; object-fit: cover;}
  .gall-ls--h > li > a .content {padding: 20px 28px 25px; display: flex; flex-direction: column; justify-content: start; align-items: start; gap: 10px; background-color: #F6F6F6;}
  .gall-ls--h > li > a .content .tag {font-size: 16px; font-weight: 700; color: #17C3F5; text-transform: uppercase;}
  .gall-ls--h > li > a .content .title {font-size: 18px; font-weight: 700; line-height: 1.5; word-break: keep-all;}
  .gall-ls--h > li > a .content .date {font-size: 14px; color: #A4A4A4; line-height: 1.5;}
  .board-view-paging .btn {border: none;}
  .board-view-paging .btn span {color: #000;}
  @media screen and (max-width: 1399px) {
    .gall-ls--h {grid-template-columns: repeat(2, 1fr);}
    .gall-ls--h > li > a .thumb {width: 100%; height: auto;}
    .gall-ls--h > li > a .thumb img {width: 100%; height: 100%; object-fit: cover;}
    .gall-ls--h > li > a .content {padding: 20px 28px 25px; gap: 10px;}
  }
  @media screen and (max-width: 767px) {
    .gall-ls--h {grid-template-columns: 1fr;}

  }
}

#inquiry {
  .sp-section .container:first-child {border: none;}
  .sp-head {margin-bottom: 60px;}
  .tip {font-size: 18px; font-weight: 700;}
  .tip span {color: var(--primary);}

  form {border-top: 2px solid var(--primary); margin-top: 20px; padding-top: 15px;}
  table tbody tr {padding-block: 15px;}
  table tbody td .dd-inp .inp-box {border-radius: 30px; background-color: #F6F6F6; border: 0;}
  table tbody td .dd-inp .inp-box:has(textarea) {border-radius: 15px;}
  table tbody td .guide {font-size: 16px; color: #777777; padding-top: 20px;}
  .dd-form-table tbody tr th .label {text-align: left;}
  .bar {height: 1px; background-color: #d9d9d9; margin-block: 100px;}
  .dd-file .file-box label .label {border-radius: 30px; background-color: #F6F6F6; border: 0;}
  .dd-file .file-box label .btn-find {border-radius: 30px; border: 0; background-color: var(--primary); color: #fff;}
  .dd-file .file-box .btn-cancel {width: 48px; border-radius: 50%; background-color: var(--secondary);}
  .dd-file .file-box .btn-cancel svg path {fill: #fff;}

  .dd-form-indiv-policy .title {font-size: 26px; font-weight: 700; color: #000;}
  .dd-form-indiv-policy .content {background-color: transparent; border: #E8E8E8 1px solid; border-radius: 5px; color: #777777; height: 580px; overflow-y: scroll; padding: 20px; box-sizing: border-box;}

  .dd-form-indiv-policy .content::-webkit-scrollbar {width: 3px; padding-right: 20px; padding-block: 18px;}
  .dd-form-indiv-policy .content::-webkit-scrollbar-track {background: #D3E9FF; border-radius: 5px;}
  .dd-form-indiv-policy .content::-webkit-scrollbar-thumb {background: var(--primary); border-radius: 5px;}
  .dd-form-indiv-policy .content::-webkit-scrollbar-thumb:hover {background: #A0A0A0;}
  
  .dd-form-indiv-policy .dd-inp {justify-content: center;}
  .dd-form-indiv-policy .dd-inp .label {color: #000;}
  .dd-form .submit-button {padding: 15px 40px; border-radius: 30px; background-color: #2C2C2C; transition: background-color 0.3s ease;}

  @media screen and (hover:hover) {
    .dd-form .submit-button:hover {background-color: var(--secondary);}
  }
  @media screen and (max-width: 1399px) {
    .tip {font-size: 16px;}
    table tbody td .guide {font-size: 14px;}
    .dd-form-indiv-policy .title {font-size: 22px;}
  }
  @media screen and (max-width: 767px) {
    .dd-form-indiv-policy .dd-inp .checkbox-group {flex-direction: row; gap: 30px;}
    table tbody tr {padding-block: 5px;}
    .tip {font-size: 14px;}
    .dd-form-indiv-policy .title {font-size: 18px;}
  }
}