@charset "utf-8";
:root {
  --blue-color: #3a7bee;
  --accent-color: #2D2E55;
}
/* css setting start */
html[data-scroll-y="false"] { overflow-y: hidden;}
.sec-wrap,
.sec-header,
.sec-content,
.sec-footer {position:relative;width:100%;margin:0;padding:0;box-sizing:border-box;}
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.highlight { color: var(--blue-color); vertical-align: baseline;}
.highlight2 { color: var(--accent-color);}
.highlight-bg { background-color: var(--blue-color);}
.sec-header { position: absolute; top: 0;}
.test { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; z-index: 10;}
.inner { max-width: 1450px; width: 95%; margin: 0 auto;}
.inner.large { max-width: 1800px;}
.inner.left { margin: 0; margin-left: auto; max-width: 1730px; width: 97.5%;}
.inner.md { max-width: 1560px;}
.hidden { display: none;}
.invisible { opacity: 0; pointer-events: none;}
.heading { font-size: 48px; font-weight: bold;}
.heading.big { font-size: 80px;}
.sub-title { font-size: 20px; font-weight: 500; color: #666; margin-bottom: 30px;}
.flex-box { display: flex;}
.grid-box { display: grid;}
.swiper-notification { display: none;}
figure { width: 100%; height: 0; position: relative; padding-bottom: 50%; margin: 0; overflow: hidden;}
figure img, figure video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.link-arrow { position: relative; display: block;}
.link-arrow span { display: inline-block; background: url(/images/link-arrow.png) no-repeat center/cover; width: 20px; height: 10px; margin-left: 10px;}
.link-arrow.white { color: #fff;}
.link-arrow.white span { filter: invert(1);}
.link-arrow.v2 span { margin-left: 0;}
.link-arrow.big span { background: url(/images/link-arrow-b.png) no-repeat center/cover; width: 50px; height: 23px;}
.link-down { background: #fff; width: 292px; height: 59px; border-radius: 35px; border: 1px solid #ddd; text-align: center; display: flex; align-items: center; justify-content: center;}
.link-down span { width: 24px; height: 25px; display: inline-block; background: url(/images/ico-link-down.png) no-repeat center; margin-left: 10px;}
.pl-20 { padding-left: 20px;}
.mo { display: none;}
@media screen and (max-width: 1024px) {
  .heading.big { font-size: 60px;}
  .heading { font-size: 38px;}
  .sub-title { font-size: 18px; margin-bottom: 10px;}
}
@media screen and (max-width: 767px) {
  .pc { display: none;}
  .mo { display: block;}
  .heading.big { font-size: 30px;}
  .heading { font-size: 24px;}
  .sub-title { font-size: 14px;}
  .inner { width: 90%;}
  .link-arrow.big span { width: 30px; height: 13px;}
}

/* header */
.header { position: fixed; width: 100%; height: 100px; background: transparent; z-index: 10;}
.header .header-inner { max-width: 1800px; width: 95%; height: 100%; margin: 0 auto; position: relative;}
.header .logo { position: absolute; top: 50%; left: 2.5%; transform: translateY(-50%); width: 52px; height: 42px; background: url(/images/logo-hd.png) no-repeat center/cover; z-index: 3;}
.header .gnb { position: absolute; top: 0; display: flex; justify-content: center; width: 100%; height: 100%; overflow: hidden; transition: right 0.5s; z-index: 2;}
.header .gnb .depth1 { display: flex;}
.header .gnb a { color: #fff; padding: 10px 20px; font-weight: 500; display: flex;}
.header .gnb .depth1 > li { width: 12em;}
.header .gnb .depth1 > li > a { padding: 38px 20px; display: block; text-align: center; position: relative;}
.header .gnb .depth1 > li > a::before { content: ''; display: none; width: 20px; height: 20px; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); background: url(/images/ico-arrow.png) no-repeat center/cover; filter: invert(1);}
.header .gnb .depth2{padding:20px 0 40px;}
.header .gnb .depth2 > li > a { display: block; text-align: center;  word-break: keep-all; word-wrap: break-word; }
.header .gnb .close { display: none; position: fixed; top: 30px; right: 2.5%; width: 40px; height: 40px; }
.header .gnb .close a { display: block; width: 100%; height: 100%; }
.header .gnb .close .circle::before, .header .gnb .close .circle::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 26px; height: 2px; background: #fff; }
.header .gnb .close .circle::before { transform: rotate(45deg); }
.header .gnb .close .circle::after { transform: rotate(-45deg); }
/* 임시로 안보이게 */
/* .header-language { display: none;} */
.header-contact { z-index: 2; position: absolute; top: 50%; right: 7%; transform: translateY(-50%);}
.header-contact a { display: flex; align-items: center; justify-content: center; height: 40px; padding: 8px 10px 8px 20px; height: 40px; gap: 8px; font-size: 14px; border: 1px solid #ddd; border-radius: 35px; overflow: hidden; color: #fff;}
.header-contact .ico-arrow { width: 24px; height: 24px; background: url(/images/link-arrow-up.png) no-repeat center/auto 60%;}
.header-language { z-index: 2; position: absolute; top: 50%; right: 2.5%; transform: translateY(-50%);}
.header-language .current {position: relative;padding: 0px 0 0 28px;font-size: 18px;color: inherit;font-weight: 600;height: 100%; color: #fff;}
.header-language .current::before {content: '';position: absolute;top: 7px;left: 0;width: 18px;height: 18px;background: url('/images/ico-global.png') no-repeat center / auto 100%; filter: invert(1);}
.wrap.main .header-language .current::before { filter: invert(0);}
html[lang='en'] .header-language .current::before {top: 5px;}
.header-language .current::after { content: ''; position: absolute; top: 7px; right: 0; width: 12px; height: 12px; background: url('/images/language-arrow.svg') no-repeat center / auto 100%; }
.header-language ul { position: absolute; left: 5px; top: 100%; margin-top: 10px; width: 80px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); visibility: hidden; opacity: 0; }
.header-language ul::before { content: ''; z-index: -1; position: absolute; top: -8px; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; filter: drop-shadow(0px 3px 5px rgba(24, 24, 24, .35)); }
.header-language a { display: block; padding: 10px 0; text-align: center; font-size: 14px; color: #212227; transition: all ease .15s; }
.header-language .current[aria-pressed="true"] + ul { visibility: visible; opacity: 1; }
.header .hamburger { display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 0 8px; width: 50px; height: 50px; }
.header .hamburger a { overflow: hidden; display: block; position: relative; padding: 9px 0; width: 100%; height: 100%; }
.header .hamburger .bar { display: flex; margin-top: 8px; width: 100%; height: 2px; }
.header .hamburger .bar:first-child { margin-top: 0; }
.header .hamburger .bar::before, .header .hamburger .bar::after { content: ''; flex: 1 0 auto; display: block; width: 100%; height: 100%; background: #fff; }
.header .hamburger .bar::after { margin-left: 4px; }
.header .hamburger .bar { transform: translateX(-6px); transition: transform linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) .65s; }
.header .hamburger .bar:nth-child(even) { transform: rotate(180deg) translateX(-6px); }
.wrap.sub:not(.products) .header .hamburger .bar::before, .wrap.sub:not(.products) .header .hamburger .bar::after { background: #000;}
.wrap.sub:not(.products) .header .gnb .close .circle::before, .wrap.sub:not(.products) .header .gnb .close .circle::after { background: #000;}
.wrap.sub .header .gnb .depth1 > li > a::before { filter: invert(1);}
.wrap.sub:not(.products) .header .logo { background: url(/images/logo-hd-sub.png) no-repeat center/cover;}
.wrap.sub:not(.products) .header .gnb a { color: #000;}
.wrap.sub.products .header .header-language .current::before { filter: invert(0);}
.wrap.sub.products .header .header-language .current { color: #fff;}
.wrap.sub:not(.products) .header .header-language .current { color: #000;}
.wrap.sub:not(.products) .header .header-contact a { color: #000;}
.wrap.sub:not(.products) .header .header-contact .ico-arrow { filter: invert(1);}
/* .wrap.sub:not(.products) .header .header-language .current::before { filter: invert(0);} */
.wrap.sub:not(.products) .header[data-header-sticky='true'] { background: #fff;}
.wrap.sub:not(.products) .header[data-header-gnb='opened'] .gnb { background: #fff;}
.header[data-header-sticky='true'] { background: #111;}
.header[data-header-gnb='opened'] .gnb { background: #111;}
.header[data-header-gnb='opened'] .gnb:before { content: ''; display: block; position: absolute; top: 100px; left: 0; width: 100%; height: 1px; background: #ddd;}
.header[data-hamburger='opened'] .gnb { right: 0; background: #000;}
.wrap.sub:not(.products) .header[data-hamburger='opened'] .gnb { background: #fff;}
.header[data-hamburger='opened'] .gnb .close { display: block;}
.gnb .depth1 > li > a[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg);}
.header[data-hamburger='opened'] .header-language .current { color: #fff !important;}
.header[data-header-gnb='opened'] .header-language .current { color: var(--primary-color);}
.header[data-hamburger='opened'] .header-language .current::before { filter: invert(0);}
.header[data-header-gnb='opened'] .header-language .current::before { filter:invert(1);}
.header[data-header-sticky='true'] .header-language .current { color: var(--primary-color);}
.header[data-header-sticky='true'] .header-language .current::before { filter:invert(1);}
.header[data-hamburger='opened'] .header-contact a { color: #fff !important;}
.header[data-hamburger='opened'] .header-contact .ico-arrow { filter: invert(0) !important;}
.wrap.main .header[data-hamburger='opened'] .header-language .current{ color: #fff !important;}
.wrap.main .header[data-header-gnb='opened'] .header-language .current { color: #fff;}
.wrap.main .header[data-hamburger='opened'] .header-language .current::before { filter:invert(0) !important;}
.wrap.main .header[data-header-gnb='opened'] .header-language .current::before { filter:invert(0);}
.wrap.main .header[data-header-sticky='true'] .header-language .current { color: #fff;}
.wrap.main .header[data-header-sticky='true'] .header-language .current::before { filter:invert(0);}
@media screen and (max-width: 1400px) {
  .header .gnb .depth1 > li { width: 9em;}
  .header .gnb .depth1 > li > a { white-space: nowrap;}
}
@media screen and (min-width: 1025px) and (max-width: 1400px) {
  html[lang='en'] .header .gnb .depth1 { width: 80%; margin: 0 auto; }
  html[lang='en'] .header .gnb .depth1 > li { width: fit-content; }
  html[lang='en'] .header .gnb .depth1 > li > a { font-size: 16px; }
  html[lang='en'] .header .gnb .depth2 > li > a { font-size: 16px; }
}
@media screen and (max-width: 1024px) {
  .header-language { right: calc(2.5% + 60px);}
  .header-contact { right: calc(7% + 110px);}
  .header-contact a { padding: 8px 5px 8px 15px; height: 35px; gap: 4px; font-size: 14px;}
  .header .hamburger { display: block; right: 2.5%; padding: 0 6px; width: 40px; height: 40px;}
  .header .gnb { position: fixed; top: 0; right: -100%; height: 100svh; padding: 100px 0; justify-content: flex-start; overflow-y: auto;}
  .header .gnb .nav { width: 100%;}
  .header .gnb .depth1 { flex-direction: column;}
  .header .gnb .depth1 > li { width: 100%;}
  .header .gnb .depth1 > li > a { text-align: left; padding:  20px; font-size: 1.2em;}
  .header .gnb .depth1 > li > a::before { display: block;}
  .header .gnb .depth2{padding:0;}
  .header .gnb .depth2 > li > a { text-align: left;}
  .header .gnb .depth2 { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;}
  .header[data-hamburger='opened'] .gnb { background: #000 !important;}
  .header[data-hamburger='opened'] .gnb a { color: #fff !important;}
  .header[data-hamburger='opened'] .gnb .depth1 > li > a{ color: #fff;}
  .header[data-hamburger='opened'] .logo { background: url(/images/logo-hd.png) no-repeat center/cover !important;}
  .header[data-hamburger='opened'] .gnb .close .circle::before, .header[data-hamburger='opened'] .gnb .close .circle::after { background: #fff !important;}
}
@media screen and (max-width: 767px) {
  .header { height: 80px;}
  .header-contact { right: calc(7% + 130px);}
  .header .logo { width: 42px; height: 32px; left: 5%;}
  .header .hamburger { right: 5%;}
  .header-language { right: calc(5% + 60px);}
  .header .gnb { padding: 80px 0;}
  .header .gnb .close { top: 20px;}
}
/* footer */
.footer { background: #111; padding: 70px 0; color: #fff;}
.footer .inner > .flex-box { gap: 60px;}
.footer .logo { background: url(/images/logo-ft.png) no-repeat center; width: 54px; height: 59px;}
.footer .footer-info { margin-bottom: 10px;}
.footer .footer-info ul { display: flex; flex-wrap: wrap;}
.footer .footer-info ul li { position: relative; font-size: 16px; -webkit-text-fill-color: #fff; text-fill-color: #fff; -webkit-text-size-adjust: 100%; color: #fff;}
.footer .footer-info ul li + li { margin-left: 26px;}
.footer .footer-info ul li + li::before { content: ''; display: block; position: absolute; width: 1px; height: 12px; background: #fff; left: -13px; top: 50%; transform: translateY(-50%);}
.footer .footer-copyright { font-size: 16px; color: #999;}
@media screen and (max-width: 767px) {
  .footer { padding: 50px 0;}
  .footer .inner > .flex-box { flex-direction: column; gap: 30px;}
  .footer .footer-info { margin-bottom: 30px;}
  .footer .footer-info ul li { width: 100%;}
  .footer .footer-info ul li + li { margin-left: 0; margin-top: 10px;}
  .footer .footer-info ul li + li::before { display: none;}
}

/* main */
main { min-height: 100svh;}
main .main-sec-visual { height: 200svh;}
main .main-sec-visual .heading { font-size: 36px;}
main .main-sec-visual .sticky { position: sticky; top: 0; left: 0; width: 100%; height: 100svh;}
main .main-sec-visual .swiper { width: 100%; height: 100%; overflow: hidden;}
main .main-sec-visual .swiper-slide { width: 100%; height: 100svh; background: #0c1235; overflow: hidden;}
main .main-sec-visual .swiper-slide .intro { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
/* main .main-sec-visual .swiper-slide .intro .ring-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0;} */
main .main-sec-visual .swiper-slide .intro .ring-wrap { position: absolute; width: 200px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
main .main-sec-visual .swiper-slide .intro .ring { position: absolute; opacity: 0; width: 41vw;}
main .main-sec-visual .swiper-slide .intro .ring img { display: block;}
/* main .main-sec-visual .swiper-slide .intro .ring:nth-child(1) {top: 10%;left: 4.9%;}
main .main-sec-visual .swiper-slide .intro .ring:nth-child(2) {top: -56%;left: 46.6%;}
main .main-sec-visual .swiper-slide .intro .ring:nth-child(3) {top: 52%;left: 53.5%;} */
main .main-sec-visual .swiper-slide .intro .ring:nth-child(1) {top: -16.5vw;left: -39.1vw;}
main .main-sec-visual .swiper-slide .intro .ring:nth-child(2) {top: -48vw;left: 2vw;}
main .main-sec-visual .swiper-slide .intro .ring:nth-child(3) {top: 3.5vw;left: 9vw;}
main .main-sec-visual .swiper-slide .intro .ring::before {content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);clip-path: circle(0% at center);background: #0c1235;width: 100%;height: 100%; transition: 0.5s;}
main .main-sec-visual .swiper-slide .intro .ring.active::before { clip-path: circle(34% at center);}
main .main-sec-visual .swiper-slide .intro .ring.circle { background: url(/images/main/main-circle2.png) no-repeat bottom right/cover}
main .main-sec-visual .swiper-slide .intro .text-wrap { font-size: 65px; font-weight: bold; text-align: center; color: #fff; position: relative; z-index: 2;}
main .main-sec-visual .swiper-slide .intro .text-wrap .heading { opacity: 0; transform: translateY(100%);}
main .main-sec-visual .swiper-slide .intro .text-wrap .highlight { vertical-align: baseline;}
main .main-sec-visual .swiper-slide .intro .bg-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
main .main-sec-visual .swiper-slide .intro .bg-path img {position: absolute;right: -9.5%;top: -24%; transform: matrix(1, 0, 0, 1, 500, -500); opacity: 0;}
main .main-sec-visual .swiper-slide:nth-child(2) { background: #eeeeee; position: relative;}
main .main-sec-visual .swiper-slide:nth-child(2) .inner { height: 100%;}
main .main-sec-visual .swiper-slide:nth-child(2) .flex-box { width: 100%; height: 100%; align-items: center;}
main .main-sec-visual .swiper-slide:nth-child(2) .text-boxs { padding-right: 50%; position: absolute; z-index: 2;}
main .main-sec-visual .swiper-slide:nth-child(2) .text-boxs .sub-title { margin-bottom: 30px;}
main .main-sec-visual .swiper-slide:nth-child(2) .text-boxs .heading { margin-bottom: 70px;}
main .main-sec-visual .swiper-slide:nth-child(2) a {padding: 16px 0;width: 178px;color: #3a7bee;border:1px solid #3a7bee;border-radius: 35px;display: block;text-align: center; font-weight: 600;}
main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end;}
main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap .circle { width: 23vw; height: 23vw; border: 1px solid #455f94; border-radius: 50%; flex-shrink: 0; margin-left: -14%; overflow: hidden;}
main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap .circle:first-child { margin: 0; position: relative; z-index: 1;}
main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap .circle:first-child .bg{ position: absolute; width: 100%; height: 100%; background: url(/images/main/about-circle.png)no-repeat center/cover; opacity: 0;}
@media screen and (max-width: 1024px) {
  main .main-sec-visual .heading { font-size: 32px;}
  main .main-sec-visual .swiper-slide .intro .bg-path img { right: -39.5%;}
}
@media screen and (max-width: 767px) {
  main .main-sec-visual .heading { font-size: 20px;}
  main .main-sec-visual .swiper-slide .intro .text-wrap .heading { padding: 0 10px;}
  main .main-sec-visual .swiper-slide .intro .ring { width: 61vw;}
  main .main-sec-visual .swiper-slide .intro .ring:nth-child(1) { top: -16.5vw; left: -39.1vw; }
  main .main-sec-visual .swiper-slide .intro .ring:nth-child(2) { top: -58vw; left: 22vw; }
  main .main-sec-visual .swiper-slide .intro .ring:nth-child(3) { top: 13.5vw; left: 29vw; }
  main .main-sec-visual .swiper-slide .intro .bg-path img { top: -14%;}
  main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap { padding-top: 130px;}
  main .main-sec-visual .swiper-slide:nth-child(2) .text-boxs { padding-right: 10px;}
  main .main-sec-visual .swiper-slide:nth-child(2) .text-boxs .heading  {margin-bottom: 200px;}
  main .main-sec-visual .swiper-slide:nth-child(2) .circle-wrap .circle { width: 33vw; height: 33vw; margin-left: -18%;}
  main .main-sec-visual .swiper-slide:nth-child(2) a { width: 128px; padding: 8px 0;}
}
/* business */
.main-sec-business { padding: 180px 0 260px; overflow: hidden;}
.main-sec-business .content-top { margin-bottom: 100px;}
.main-sec-business .icon-box svg { width: 60px; height: 55px; }
.main-sec-business .grid-box { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; align-items: center; gap: 80px;}
.main-sec-business .grid-box + .grid-box { margin-top: 110px;}
.main-sec-business .grid-box figure { padding-bottom: 67%; border-radius: 15px;}
.main-sec-business .grid-box .icon-box { margin-bottom: 35px;}
.main-sec-business .grid-box .sbj { font-size: 36px; font-weight: bold; margin-bottom: 10px;}
.main-sec-business .grid-box .desc { margin-bottom: 30px; color: #333;}
.main-sec-business .grid-box:not(:nth-child(2)) .text-boxs { padding-left: 6%;}
.main-sec-business .grid-box .text-boxs:hover .st0,
.main-sec-business .grid-box .text-boxs:hover .cls-1 { fill: var(--blue-color);}
.main-sec-business .grid-box .text-boxs:hover a { color: var(--blue-color);}
.main-sec-business .grid-box .text-boxs:hover a span { background-image: url(/images/link-arrow-highlight.png);}
@media screen and (max-width: 1024px) {
  .main-sec-business { padding: 80px 0;}
  .main-sec-business .grid-box { gap: 30px;}
  .main-sec-business .grid-box .sbj { font-size: 26px;}
}
@media screen and (max-width: 767px) {
  .main-sec-business { padding: 60px 0;}
  .main-sec-business .content-top { margin-bottom: 50px;}
  .main-sec-business .grid-box { grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto;}
  .main-sec-business .icon-box svg { width: 40px; height: auto;}
  .main-sec-business .grid-box:not(:nth-child(2)) .text-boxs { padding-left: 0;}
  .main-sec-business .grid-box:nth-child(2) .col:first-child { order: 2; }
  .main-sec-business .grid-box + .grid-box { margin-top: 60px;}
  .main-sec-business .grid-box .icon-box { margin-bottom: 15px;}
}
/* careers */
.main-sec-careers { overflow: hidden;}
.main-sec-careers .grid-box { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;}
.main-sec-careers .grid-box .col { background: url(/images/main/careers-bg2.png) no-repeat center/cover; height: 408px; position: relative; overflow: hidden; padding-left: 8.5%; display: flex; align-items: center; color: #fff;}
.main-sec-careers .grid-box .col:last-child { background: url(/images/main/careers-bg3.png) no-repeat center/cover;}
.main-sec-careers .grid-box .col svg { position: absolute; right: -9%; bottom: -50%;}
.main-sec-careers .grid-box .col:not(:last-child) svg { transform: scaleX(-1); right: 5%; bottom: -20px;}
.main-sec-careers .grid-box .col .heading { margin-bottom: 35px;}
.main-sec-careers .grid-box .col .desc { font-size: 20px; margin-bottom: 65px;}
.main-sec-careers .content-body { padding: 186px 0; text-align: center; background: url(/images/main/careers-bg.png) no-repeat center/cover;}
.main-sec-careers .content-body .sub-title { font-size: 20px; color: #fff; font-weight: 500;}
.main-sec-careers .content-body .heading { color: #fff; margin-bottom: 40px;}
.main-sec-careers .content-body a { width: 210px; height: 60px; border: 1px solid #fff; margin: 0 auto; border-radius: 35px; line-height: 60px;}
@media screen and (max-width: 1024px) {
  .main-sec-careers .content-body { padding: 120px 0;}
}
@media screen and (max-width: 767px) {
  .main-sec-careers .grid-box { grid-template-columns: repeat(1, 1fr);}
  .main-sec-careers .grid-box .col { padding-left: 5%; height: 250px;}
  .main-sec-careers .grid-box .col .heading { margin-bottom: 20px;}
  .main-sec-careers .grid-box .col .desc { font-size: 16px; margin-bottom: 30px;}
  .main-sec-careers .content-body { padding: 60px 0;}
  .main-sec-careers .content-body .sub-title { font-size: 18px;}
  .main-sec-careers .content-body a { width: 170px; height: 40px; line-height: 40px;}
}
/* sustainability */
/* strategy-list */
/* .sustainability-strategy-list { overflow: hidden; padding-top: 40px;} */
.sustainability-strategy-list > .inner { position: relative; padding-top: 80px;}
.sustainability-strategy-list .content-top { margin-bottom: 280px; position: relative;}
.sustainability-strategy-list .content-top .heading { margin-bottom: 40px;}
.sustainability-strategy-list .content-top .sbj { font-size: 24px; font-weight: 600; color: #2D2E55; margin-bottom: 40px;}
.sustainability-strategy-list .content-top .desc { color: #666; font-size: 20px;}
.sustainability-strategy-list .content-top::before { content:''; display: block; position: absolute; bottom: -200%; right: -26%; width: 49%; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid rgba(45,46,85,0.3);}
.sustainability-strategy-list .content-body .heading { margin-bottom: 80px;}
.sustainability-strategy-list .img-box { margin-bottom: 80px; margin-left: -11%;}
.sustainability-strategy-list .img-box img { display: block;}
.sustainability-strategy-list .strategy-list .text-boxs { padding-left: 25.7%;}
.sustainability-strategy-list .content-body .strategy-list { display: flex; flex-direction: column;}
.sustainability-strategy-list .content-body .strategy-list li { position: relative;}
.sustainability-strategy-list .content-body .strategy-list li .num { font-size: 24px; font-weight: 700; color: var(--blue-color); margin-bottom: 60px;}
.sustainability-strategy-list .content-body .strategy-list li .sbj { font-size: 32px; font-weight: 700; margin-bottom: 40px;}
.sustainability-strategy-list .content-body .strategy-list li .desc { width: 80%;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(2) .img-box { margin: 0;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(2) img { margin-left: auto; margin-right: -11%;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(2) .text-boxs { padding-left: 0; margin-top: -80px;}
.sustainability-strategy-list .content-body .strategy-list li + li { padding-top: 140px;}
.sustainability-strategy-list .content-body .strategy-list li:last-child { padding-bottom: 200px;}
.sustainability-strategy-list .content-body .strategy-list li::before { content: ''; display: block; position: absolute; background-repeat: no-repeat; background-position: center; z-index: -1; background-size: cover;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(1)::before { background-image: url(/images/sub/sustainability/strategy-bg1.png); width: 43.2%; aspect-ratio: 1/1; right: -17%; bottom: -44%;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(2)::before { background-image: url(/images/sub/sustainability/strategy-bg2.png); width: 58.7%; aspect-ratio: 1/1; left: -34%; bottom: -44%;}
.sustainability-strategy-list .content-body .strategy-list li:nth-child(3)::before { background-image: url(/images/sub/sustainability/strategy-bg3.png); width: 44.4%; aspect-ratio: 1/1; right: -21%; bottom: -20%;}
.sustainability-strategy-list .content-nav { position: absolute; left: 50%; top: 0px; transform: translateX(-50%); z-index: 3;}
.sustainability-strategy-list .content-nav.fixed { top: auto; bottom: 25px;}
.sustainability-strategy-list .content-nav.bt { bottom: 25px; top: auto;}
.sustainability-strategy-list .content-nav ul { position: sticky; top: 40px; display: flex; padding: 18px 90px; justify-content: center; align-items: center; gap: 60px; background: #fff; box-shadow: 1px 3px 6px rgba(0,0,0,12%); border-radius: 35px; flex-direction: row;}
.sustainability-strategy-list .content-nav ul li { font-size: 20px; color: #8E8E8E; position: relative; font-weight: 700; text-wrap: nowrap; cursor: pointer;}
.sustainability-strategy-list .content-nav ul li.active { color: var(--blue-color);}
.sustainability-strategy-list .tab-content { display: none;}
.sustainability-strategy-list .tab-content.active { display: block;}
 @media screen and (max-width: 1024px) {
   .sustainability-strategy-list .content-top { margin-bottom: 100px;}
   .sustainability-strategy-list .content-body .strategy-list li .num { margin-bottom: 20px; font-size: 20px;}
   .sustainability-strategy-list .content-body .strategy-list li + li { padding-top: 70px;}
   .sustainability-strategy-list .content-body .strategy-list li:nth-child(2) .text-boxs { margin-top: -40px;}
 }
@media screen and (max-width: 767px) {
  .sustainability-strategy-list > .inner { padding-top: 80px;}
/*   .sustainability-strategy-list { padding-top: 60px;} */
  .sustainability-strategy-list .content-top { margin-bottom: 60px;}
  .sustainability-strategy-list .content-top .sbj { font-size: 18px;}
  .sustainability-strategy-list .content-top .desc { font-size: 16px;}
  .sustainability-strategy-list .content-body .heading { margin-bottom: 30px;}
  .sustainability-strategy-list .img-box { margin-bottom: 30px;}
  .sustainability-strategy-list .strategy-list .text-boxs { padding-left: 0;}
  .sustainability-strategy-list .content-body .strategy-list li + li { padding-top: 80px;}
  .sustainability-strategy-list .content-body .strategy-list li .sbj { font-size: 20px; margin-bottom: 20px;}
  .sustainability-strategy-list .content-body .strategy-list li .num { font-size: 18px;}
  .sustainability-strategy-list .content-body .strategy-list li:nth-child(2) .text-boxs { margin-top: 30px;}
  .sustainability-strategy-list .content-body .strategy-list li:last-child { padding-bottom: 100px;}
  .sustainability-strategy-list .content-top::before { width: 79%; right: -46%; bottom: -40%;}
  .sustainability-strategy-list .content-body .strategy-list li:nth-child(1)::before { width: 63.2%; right: -27%; bottom: -24%;}
  .sustainability-strategy-list .content-body .strategy-list li:nth-child(2)::before { width: 78.7%; bottom: -24%;}
  .sustainability-strategy-list .content-body .strategy-list li:nth-child(3)::before { width: 64.4%; bottom: -10%;}
  .sustainability-strategy-list .content-nav ul { gap: 20px; width: max-content; margin: 0 auto; padding: 10px 30px;}
  .sustainability-strategy-list .content-nav ul li { font-size: 14px;}
}