@charset "utf-8";

/* Default */
.scrolldumy {height: 400vh;}
.sp-article {margin-block: 200px;}
.sp-article--banner {padding-block: 156px;}
.sp-title-1 {font-size: 56px; font-weight: 400; color: var(--dark-navy); margin-bottom: 0.53em;}
.sp-title-1 .label {display: block; font-size: .46em; color: var(--primary); font-weight: 700; line-height: 1.3; margin-bottom: 0.5em;}
.sp-title-2 {font-size: 50px; font-weight: 700; color: var(--primary); margin-bottom: 0.53em; line-height: 1.4;}
.sp-title-3 {font-size: 40px; font-weight: 700; color: var(--primary); margin-bottom: 0.53em; line-height: 1.4;}
.sp-title-3.mb--1em {margin-bottom: 1em;}
.sp-p1 {font-size: 16px;}
.sp-content-body {position: relative; z-index: 1;}

.ly--split {--head-size: 532px; display: flex; gap: 40px;}
.ly--split--400 {--head-size: 400px; display: flex; gap: 25px;}
.ly--split--400 .head,
.ly--split .head {width: var(--head-size); flex-shrink: 0;}
.ly--split--400 .body,
.ly--split .body {width: 100%;}

.px-cards {display: flex; gap: 50px;}
.px-cards .item {width: 260px;}
.px-cards .item .card {position: relative; border-radius: 35px; background: linear-gradient(135deg, #fff, #808080); padding: 3px; margin-bottom: 22px; width: 100%;}
.px-cards .item .card::after {position: absolute; top: 100%; left: 0; z-index: 0; width: 100%; height: 100%; content: ''; display: block; border-radius: 35px; background: linear-gradient(to bottom, rgb(255,255,255,.2), rgb(255,255,255,.05), transparent 25%); margin-top: 5px;}
.px-cards .item .card .inner {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; border-radius: 35px; background: linear-gradient(135deg, #efefef, #d5d5d5); padding: 27px 15px 33px 15px;}
.px-cards .item .card .icon {display: flex; align-items: center; justify-content: center; width: 120px; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff; margin-bottom: 24px;}
.px-cards .item .card .icon img {display: block;}
.px-cards .item .card .key {font-size: 24px; font-weight: 700; color: #000; display: block; line-height: 1; margin-bottom: 0.5em;}
.px-cards .item .card .val {color: var(--primary); font-size: 20px; line-height: 1;}

.hl-diagram {--size: 268px; display: flex; justify-content: center;}
.hl-diagram > li {width: var(--size); height: var(--size); position: relative; padding: 15px; margin-inline: -2.5px;}
.hl-diagram > li .outer {position: absolute; top: 50%; left: 50%; z-index: 0; transform: translate(-50%, -50%); border-radius: 50%; width: 100%; height: 100%;}
.hl-diagram > li .outer::before {position: absolute; top: 0; left: 0; width: 100%; height: 50%; box-sizing: border-box; border: 5px solid var(--primary); content: '';}
.hl-diagram > li .outer::after {position: absolute; top: 0; left: 0; width: 100%; height: 50%; content: ''; display: block;}
.hl-diagram > li:nth-child(odd) .outer::before {border-bottom: none; border-radius: var(--size) var(--size) 0 0;}
.hl-diagram > li:nth-child(even) .outer::before {top: auto; bottom: 0; border-top: none; border-radius: 0 0 var(--size) var(--size); border-color: #fff;}
.hl-diagram > li:nth-child(odd) .outer::after {background: linear-gradient(to top, var(--dark-navy) 10%, transparent);}
.hl-diagram > li:nth-child(even) .outer::after {top: auto; bottom: 0; background: linear-gradient(to bottom, var(--dark-navy) 10%, transparent);}
.hl-diagram > li .inner {position: relative; z-index: 1; background: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.hl-diagram > li .inner::before {position: absolute; top: 100%; left: 0; width: 100%; height: calc(var(--size) / 2); background: linear-gradient(to bottom, #fff, transparent 60%); content: ''; border-radius: var(--size) var(--size) 0 0; margin-top: 40px; filter: blur(10px); opacity: .3;}
.hl-diagram > li .inner .gear {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 15px;}
.hl-diagram > li .inner .gear img {display: block; animation: rotate 10s 0s infinite linear; width: 100%;}
.hl-diagram > li:nth-child(even) .inner .gear img {animation: rotate-reverse 10s 0s infinite linear;}
.hl-diagram > li .inner .cont {text-align: center;}
.hl-diagram > li .inner .cont .key {display: block; margin-bottom: 0.5em; font-size: 18px;}
.hl-diagram > li .inner .cont .val {display: block; font-size: 62px; line-height: 1;}
.hl-diagram > li .inner .cont .val .num {color: var(--primary);}
.hl-diagram > li .inner .cont .val small {font-size: 0.4em; color: #000;}

.tabmenu { margin: 90px 0 60px 0; display: flex; flex-wrap: wrap;}
.tabmenu a {text-align: center; padding: 16px 20px; border: 1px solid #E8E8E8; margin: -1px 0 0 -1px; font-size: 20px; font-weight: 500; line-height: 1.3; background: #fff; width: calc(100% / 3);}
.tabmenu a:nth-child(4) {width: 50%;}
.tabmenu a:nth-child(5) {width: 50%;}
.tabmenu a:nth-child(6) {width: 50%;}
.tabmenu a:nth-child(7) {width: 50%;}
.tabmenu a small {font-size: 0.9em; opacity: .3;}
.tabmenu a.active {position: relative; z-index: 1; background: var(--primary); border-color: var(--primary); color: #fff;}

.pin-spacer:has(.dinamic-island) {pointer-events: none;}
.dinamic-island-track {position: relative;}
.dinamic-island {position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; display: flex; justify-content: center; align-items: flex-end; padding: 50px; z-index: 100; pointer-events: none;}
.dinamic-island .island {width: 50px; border-radius: 50px; overflow: hidden; display: flex; justify-content: center; transform: scale(0); box-shadow: 10px 10px 20px rgb(0,0,0,.15);}
.dinamic-island .island > .inner {display: flex; gap: 5px; padding: 5px; border-radius: 100px; background: #fff; pointer-events: initial;}
.dinamic-island .island button {background: #f3f2f1; border-radius: 100px; padding: 5px; width: 180px; display: flex; align-items: center; justify-content: center; text-align: center; color: #707070; white-space: nowrap; overflow: hidden; transition: all .5s var(--cubic-pop1); flex-shrink: 0; opacity: 0;}
.dinamic-island .island button.active {background: var(--primary); color: #fff; width: 280px; font-weight: 700;}
.dinamic-island-track.active .island button {opacity: 1;}

@media (hover: hover) {
  .tabmenu a:not(.active):hover {color: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .sp-article {margin-block: 150px;}
  .sp-article--banner {padding-block: 120px;}
  .ly--split--400,
  .ly--split {--head-size: 100%; flex-direction: column; gap: 20px;}
  .sp-title-1 {font-size: 38px;}
  .sp-title-2 {font-size: 32px;}
  .sp-title-3 {font-size: 28px;}

  .px-cards .item .card,
  .px-cards .item .card .inner {border-radius: 25px;}
  .px-cards .item .card .icon {width: 100px;}
  .px-cards .item .card .key {font-size: 20px;}

  /* .hl-diagram {--size: 240px; flex-wrap: wrap;}
  .hl-diagram > li .outer::before {height: 100%; border: 5px solid var(--primary)!important; border-radius: 50%!important;}
  .hl-diagram > li .outer::after {display: none;}
  .hl-diagram > li .inner .gear {padding: 10px;}
  .hl-diagram > li .inner::before {display: none;} */

  .tabmenu {margin: 50px 0 30px 0;}
  .tabmenu a {font-size: 16px; padding: 10px;}

  .dinamic-island {padding: 20px;}
}

@media screen and (max-width: 767px) {
  .sp-article {margin-block: 80px;}
  .sp-article--banner {padding-block: 70px;}
  .sp-title-1 {font-size: 28px;}
  .sp-title-2 {font-size: 25px;}
  .sp-title-1 .label {font-size: 0.7em;}
  .sp-p1 {font-size: 15px;}

  .px-cards .item .card .key {font-size: 18px;}
  .px-cards .item .card .val {font-size: 16px;}
  .px-cards .item .card .icon {width: 80px;}
  .px-cards .item .desc {font-size: 15px;}

  /* .hl-diagram {--size: 140px;}
  .hl-diagram > li .outer::before {border-width: 3px!important;}
  .hl-diagram > li {padding: 8px; transform: none!important; margin: -1.5px!important;}
  .hl-diagram > li .inner .cont .key {font-size: 14px; line-height: 1;}
  .hl-diagram > li .inner .cont .val {font-size: 42px;} */

  .tabmenu {grid-template-columns: repeat(1, 1fr); margin: 30px 0; display: grid;}
  .tabmenu a {font-size: 15px; margin: -1px 0 0 0; width: 100% !important;}

  .dinamic-island {padding: 15px;}
  .dinamic-island .island button {--theme: #dadada; font-size: 12px; color: var(--theme); background: var(--theme); height: 30px; width: 40px; box-sizing: border-box;}
  .dinamic-island .island button.active {width: 160px; color: #fff;}
}


/* Intro basic */
.intro-super,
.intro-basic {padding: 215px 0 147px 0;}

.intro-super {--theme: #000; color: var(--theme); overflow: hidden;}
.intro-super .title {position: relative; font-size: 160px; font-weight: 500; line-height: 1.15; text-transform: uppercase; margin-bottom: 0.2125em; text-indent: -0.06em;}
.intro-super .title::before {position: absolute; top: 0.925em; right: 100%; content: ''; display: block; width: 100vw; height: 10px; background: var(--theme); border-radius: 10px; margin-right: 0.2125em; transform: translate(0, -100%);}
.intro-super .desc {font-size: 40px; line-height: 1.5;}
.intro-super.sml .title {font-size: 100px; margin-bottom: 0.5em;}
.intro-super.sml .title::before {height: 6px;}
.intro-super.sml .desc {font-size: 32px;}

/* Intro hero */
.intro-hero {position: relative; overflow: hidden; height: min(calc(var(--vh, 1vh) * 100), 1200px); padding-top: 88px;}
.intro-hero .bg {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
.intro-hero .content {position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: center; height: 100%;}
.intro-hero .content .container {}
.intro-hero .content .title {font-family: var(--font-secondary); margin-bottom: 60px;}
.intro-hero .content .title .inner {position: relative;}
.intro-hero .content .title .inner .bar {position: absolute; width: 50vw; height: 10px; background: #fff; border-radius: 10px;}
.intro-hero .content .description {width: 50%; margin-left: auto;}
.intro-hero .content .description .tit {font-size: 28px; font-weight: 700; color: var(--primary); display: block; margin-bottom: 0.3em;}

.intro-hero.type1 .content .title {display: flex; justify-content: center; font-size: 170px; font-weight: 500; line-height: 1.1;}
.intro-hero.type1 .content .title .inner .bar {top: 50%; margin-top: -5px;}
.intro-hero.type1 .content .title .inner .bar--l {right: calc(100% + .4em);}
.intro-hero.type1 .content .title .inner .bar--r {left: calc(100% + .4em);}

.intro-hero.type2 {background: #f2f2f2; height: 200vh; padding-top: 0;}
.intro-hero.type2 .bg {width: min(100%, 1920px); height: 100%; left: 50%; transform: translate(-50%);}
.intro-hero.type2 .bg .el {position: absolute;}
.intro-hero.type2 .bg .el--1 {top: -10%; right: 50px;}
.intro-hero.type2 .bg .el--2 {top: 10%; left: -230px;}
.intro-hero.type2 .bg .el--3 {top: 45%; right: -230px; width: 667px;}
.intro-hero.type2 .content {position: absolute; top: 0; height: calc(var(--vh, 1vh) * 100); mix-blend-mode: exclusion;  padding-top: 88px;}
.intro-hero.type2 .content .container {padding-inline: 80px;}
.intro-hero.type2 .content .title {font-size: 90px; font-weight: 300; color: #fff;}
.intro-hero.type2 .content .title .txt {position: relative; display: block;}
.intro-hero.type2 .content .title .txt .bar {top: 0.65em; transform: translate(0, -50%);}
.intro-hero.type2 .content .title .txt--1 {text-align: left; margin-left: 100px;}
.intro-hero.type2 .content .title .txt--1 .bar {right: 100%; margin-right: 0.3em;}
.intro-hero.type2 .content .title .txt--2 {text-align: right;}
.intro-hero.type2 .content .title .txt--2 .bar {top: auto; bottom: 0.65em; transform: translate(0, 50%); left: 100%; margin-left: 0.3em;}
.intro-hero.type2 .content .description .tit,
.intro-hero.type2 .content .fc--primary {color: #D38E00;}

@media screen and (max-width: 1699px) {
  .intro-hero.type2 .content .title {font-size: 80px;}
  .intro-hero.type2 .content .title .txt--1 {transform: translate(130px);}
  .intro-hero.type2 .content .title .txt--2 {transform: translate(-20px);}
  .intro-hero.type2 .bg .el {width: 540px;}
  .intro-hero.type2 .bg .el--1 {right: -100px;}
  .intro-hero.type2 .bg .el--2 {left: -170px;}
  .intro-hero.type2 .bg .el--3 {right: -100px; width: 500px;}
}
@media screen and (max-width: 1549px) {
  .intro-hero.type2 .content .title {font-size: 60px;}
}
@media screen and (max-width: 1399px) {
  .intro-super,
  .intro-basic {padding: 100px 0 80px 0;}

  .intro-super .title {font-size: 50px;}
  .intro-super .title::before {height: 3px;}
  .intro-super .desc {font-size: 20px;}
  .intro-super.sml .title {font-size: 50px;}
  .intro-super.sml .title::before {height: 3px;}
  .intro-super.sml .desc {font-size: 20px;}

  .intro-hero .content .title .inner .bar {height: 6px; margin-top: -3px;}
  .intro-hero .content .description .tit {font-size: 24px;}

  .intro-hero.type1 .content .title {font-size: 90px;}

  .intro-hero.type2 {height: 140vh;}
  .intro-hero.type2 .content .container {padding-inline: 50px;}
  .intro-hero.type2 .content .title {font-size: 52px;}
  .intro-hero.type2 .content .title .txt--1 {transform: translate(0px);}
  .intro-hero.type2 .content .title .txt--2 {transform: translate(0px);}
  .intro-hero.type2 .bg .el {width: 440px;}
  .intro-hero.type2 .bg .el--1 {top: -5%;}
  .intro-hero.type2 .bg .el--2 {left: -150px;}
  .intro-hero.type2 .bg .el--3 {top: 60%; right: -80px; width: 400px;}
  .intro-hero .content .description {width: 100%; text-align: center;}
}
@media screen and (max-width: 767px) {
  .intro-super,
  .intro-basic {padding: 100px 0 50px 0;}

  .intro-super .title {display: inline-block; font-size: 34px;}
  .intro-super .title::before {left: 100%; right: auto; margin-right: 0; margin-left: 0.5em;}
  .intro-super .desc {font-size: 18px;}
  .intro-super.sml .title {font-size: 28px;}
  .intro-super.sml .title::before {}
  .intro-super.sml .desc {font-size: 16px;}

  .intro-hero .content .title .inner .bar {height: 4px; margin-top: -2px;}
  .intro-hero .content .description {width: 100%; max-width: 400px; margin: 0 auto; text-align: center; font-size: 15px;}
  .intro-hero .content .description .tit {font-size: 18px;}
  .intro-hero .content .description .desc {font-size: 14px;}
  .intro-hero.type1 .content .title {font-size: 42px;}

  .intro-hero.type2 .content .container {padding-inline: 30px; max-width: 400px;}
  .intro-hero.type2 .content .title {font-size: 32px;}
  .intro-hero.type2 .bg .el {width: 240px;}
  .intro-hero.type2 .bg .el--1 {top: -5%;}
  .intro-hero.type2 .bg .el--2 {left: -100px;}
  .intro-hero.type2 .bg .el--3 {right: -50px; width: 200px;}
  .intro-hero.type2 .content .title .txt--1 {margin-left: 0;}
}


/* Inquiry banner */
.inq-banner {padding-block: 80px 180px; background: linear-gradient(to right, #F4F4F4, #DFDFDF); overflow: hidden;}
.inq-banner .container {padding-left: 400px;}
.inq-banner .sp-title-1 {position: relative; display: inline-block; font-size: 46px;}
.inq-banner .sp-title-1 .txt {position: relative; display: inline-block;}
.inq-banner .sp-title-1 .bar {position: absolute; left: 100%; bottom: .3em; width: 50vw; height: 10px; background: #000; border-radius: 10px;}
.inq-banner .round-button {font-size: 16px; background: #fff; margin-top: 30px; white-space: nowrap;}
.inq-banner:has(nav .round-button) {padding-bottom: 80px;}
.inq-banner nav {display: flex; justify-content: flex-end;}
.inq-banner .sp-title-1 .round-button {position: absolute; top: 100%; left: 100%;}
@media screen and (max-width: 1699px) {
  .inq-banner .container {padding-left: 200px;}
  .inq-banner .sp-title-1 {font-size: 40px;}
}
@media screen and (max-width: 1399px) {
  .inq-banner .container {padding-left: 0px;}
  .inq-banner .sp-title-1 {font-size: 32px;}
  .inq-banner .sp-title-1 .bar {height: 6px;}
}
@media screen and (max-width: 767px) {
  .inq-banner {padding-block: 50px 60px;}
  .inq-banner .sp-title-1 {display: block; text-align: center; font-size: 22px;}
  .inq-banner .sp-title-1 .bar {display: none;}
  .inq-banner .sp-title-1 .txt {display: block; font-weight: 400;}
  .inq-banner .sp-title-1 .txt span {font-weight: 700;}
  .inq-banner .round-button {color: #fff; background: var(--primary);}
  .inq-banner .round-button::after {border-color: #fff;}
  .inq-banner .sp-title-1 .round-button {position: relative; left: 0; top: 0;}
  .inq-banner nav {justify-content: center;}
}


/* WWA */
#wwa .intro-hero {color: #fff;}
#wwa .intro-hero .content .title {text-align: center;}
#wwa .vnm {padding-block: 160px;}
#wwa .vnm article {display: flex;}
#wwa .vnm article:not(:last-child) {margin-bottom: 96px;}
#wwa .vnm article .head {width: 400px; flex-shrink: 0;}
#wwa .vnm article .head .title {font-size: 50px; font-weight: 700; color: var(--primary); line-height: 1.3;}
#wwa .vnm article .body {width: 100%;}
#wwa .vnm article .body .card {width: min(916px, 100%); background: #F8F8F8; padding: 65px; border-radius: 20px; text-align: center;}
#wwa .vnm article .body .card .visual {width: 302px; height: 302px; position: relative; margin: 0 auto 50px auto}
#wwa .vnm article .body .card .tit {display: block; font-size: 32px; font-weight: 500; color: #000; line-height: 1.3; margin-bottom: 0.5em;}
#wwa .vnm article .body .card .desc {display: block;}

#wwa .vnm article.vision .body .card .visual {}
#wwa .vnm article.vision .body .card .visual .circle {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#wwa .vnm article.vision .body .card .visual .circle::before {display: block; content: ''; width: 0px; opacity: 0; height: 100%; border-radius: 50%; border: 6px solid var(--primary); animation: vnm-vision-circle 2s var(--delay) infinite linear; transform: scaleX(1); will-change: width, opacity;}
@keyframes vnm-vision-circle {
  0% {width: 0px; opacity: 0;}
  5% {width: 10px; opacity: 1;}
  95% {width: 100%; opacity: 0.1;}
  100% {width: 105%; opacity: 0;}
}
#wwa .vnm article.mission .body .card .visual svg {display: block; max-width: 100%; max-height: 100%;}
#wwa .vnm article.mission .body .card .visual .ms-outer {animation: vnm-mission-outer 2s 0s infinite linear; width: 100%; height: 100%;}
#wwa .vnm article.mission .body .card .visual .ms-outer svg {width: 100%; height: 100%;}
#wwa .vnm article.mission .body .card .visual .ms-inner-1,
#wwa .vnm article.mission .body .card .visual .ms-inner-2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; align-items: center; justify-content: center;}
@keyframes vnm-mission-outer {
  to {transform: rotate(360deg);}
}

#wwa .slogan-banner {position: relative; z-index: 1; overflow: hidden; padding: 214px 0 285px 0;}
#wwa .slogan-banner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 900px; background: var(--dark-navy); z-index: 0;}
#wwa .slogan-banner .container {position: relative; z-index: 1; }
#wwa .slogan-banner .container .typo {position: absolute; top: -.25em; left: 50%; transform: translate(-50%); font-size: 320px; font-weight: 700; font-family: var(--font-secondary); line-height: 1; white-space: nowrap; color: var(--primary); opacity: .1;}
#wwa .slogan-banner .container .title {font-size: 56px; line-height: 1.5; font-weight: 300; text-align: center; margin-bottom: 162px;}
#wwa .slogan-banner .container .cards {display: flex; justify-content: center; gap: 10px;}
#wwa .slogan-banner .container .cards > li {position: relative; width: min(385px, 100%); background: #F2F2F2; border-radius: 30px; display: flex; flex-direction: column; align-items: center; padding: 30px 20px 56px 20px; text-align: center; box-shadow: 20px 20px 30px rgb(0,0,0,.15);}
#wwa .slogan-banner .container .cards > li:nth-child(1) {z-index: 3;}
#wwa .slogan-banner .container .cards > li:nth-child(2) {z-index: 2;}
#wwa .slogan-banner .container .cards > li:nth-child(3) {z-index: 1;}
#wwa .slogan-banner .container .cards > li .num {display: block; font-family: var(--font-secondary); font-size: 24px; font-weight: 700; color: #aaa; margin-bottom: .7em;}
#wwa .slogan-banner .container .cards > li .icon {display: block; margin-bottom: 30px; height: 129px;}
#wwa .slogan-banner .container .cards > li .tit {display: block; font-size: 30px; font-weight: 700; color: #000; margin-bottom: 0.5em; line-height: 1.3;}
#wwa .slogan-banner .container .cards > li .desc {display: block;}
#wwa .slogan-banner .container .cards > li .arw {position: absolute; top: 255px; right: -5px; width: 36px; height: 36px; border-radius: 50%; background: #767676; overflow: hidden; display: flex; align-items: center; justify-content: center; transform: translate(50%); z-index: 10;}
#wwa .slogan-banner .container .cards > li .arw::before {content: ''; display: block; width: 30%; height: 30%; border-top: 4px solid var(--secondary-dark); border-right: 4px solid var(--secondary-dark); transform: translate(-10%) rotate(45deg);}
#wwa .slogan-banner .container .cards > li:last-child .arw {display: none;}

#wwa .history {}
#wwa .history .container {position: relative; padding-bottom: 150px;}
#wwa .history .container .line-wrap {position: absolute; top: 0; left: 50%; transform: translate(-50%); height: 100%;}
#wwa .history .container .line-wrap .circle {position: absolute; bottom: 100%; left: 50%; transform: translate(-50%); width: 982px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--gray-light);}
#wwa .history .container .line-wrap .line {position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: var(--gray-light);}
#wwa .history .container .line-wrap .line::before {position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; border-radius: 50%; background: var(--gray-light); content: ''; display: block;}
#wwa .hist-container {position: relative; z-index: 1; width: min(1300px, 100%); margin: 0 auto;}
#wwa .hist-group {display: flex; padding-top: 130px;}
#wwa .hist-group .head {width: 50%; color: var(--gray-light); padding-right: 50px;}
#wwa .hist-group .head .year {font-family: var(--font-secondary); font-size: 293px; font-weight: 700; line-height: 1; display: block; margin-bottom: 0.1em;}
#wwa .hist-group .head .slogan {display: block; font-size: 40px; line-height: 1.5;}
#wwa .hist-group .hist-yearly {width: 50%; padding-left: 93px; padding-top: 134px;}
#wwa .hist-group .hist-yearly > li:not(:last-child) {margin-bottom: 96px;}
#wwa .hist-group .hist-yearly > li .year {display: block; position: relative; font-size: 40px; font-weight: 700; line-height: 1; margin-bottom: 0.8em;}
#wwa .hist-group .hist-yearly > li .year .clip {width: 75px; height: 1px; background: var(--gray); position: absolute; top: 50%; right: 100%; margin-right: 18px;}
#wwa .hist-group .hist-yearly > li .year .clip::after {position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 31px; height: 31px; border-radius: 50%; border: 11px solid var(--gray-light); content: ''; box-sizing: border-box; background: var(--gray);}
#wwa .hist-group:first-child .hist-yearly > li:first-child .year {color: var(--primary);}
#wwa .hist-group:first-child .hist-yearly > li:first-child .year .clip {background: var(--primary);}
#wwa .hist-group:first-child .hist-yearly > li:first-child .year .clip::after {background: var(--primary); border-color: #B2D3FF;}
#wwa .hist-group .hist-yearly > li .cont {font-size: 18px;}
#wwa .hist-group .hist-yearly > li .cont > li {padding-left: 1.4em;}
#wwa .hist-group .hist-yearly > li .cont > li:not(:last-child) {padding-bottom: 0.8em;}
#wwa .hist-group .hist-yearly > li .cont > li::before {width: 7px; height: 7px; background: var(--gray-dark);}
#wwa .hist-group .hist-yearly > li .cont > li:has(.fc--primary)::before {background: var(--primary);}

@media screen and (max-width: 1399px) {
  #wwa .vnm {padding-block: 90px; display: block; gap: 20px;}
  #wwa .vnm article {display: flex; flex-direction: column; width: 100%;}
  #wwa .vnm article:not(:last-child) {margin-bottom: 80px;}
  #wwa .vnm article .head {width: 100%; margin-bottom: 20px;}
  #wwa .vnm article .head .title {font-size: 32px; text-align: center;}
  #wwa .vnm article .body {height: 100%;}
  #wwa .vnm article .body .card {width: 100%; height: 100%; padding-inline: 20px;}
  #wwa .vnm article .body .card .tit {font-size: 22px;}
  #wwa .vnm article .body .card .desc {font-size: 14px;}
  #wwa .vnm article .body .card .visual {width: 150px; height: 150px;}
  #wwa .vnm article.vision .body .card .visual .circle::before {border-width: 4px;}
  #wwa .vnm article.mission .body .card .visual .ms-inner-1 {width: 75%;}
  #wwa .vnm article.mission .body .card .visual .ms-inner-2 {width: 55%;}

  #wwa .slogan-banner {padding-top: 150px; padding-bottom: 180px;}
  #wwa .slogan-banner .bg {height: 620px;}
  #wwa .slogan-banner .container .typo {font-size: 190px;}
  #wwa .slogan-banner .container .title {font-size: 42px; margin-bottom: 80px;}
  #wwa .slogan-banner .container .cards > li {padding-block: 40px; border-radius: 20px;}
  #wwa .slogan-banner .container .cards > li .num {font-size: 20px;}
  #wwa .slogan-banner .container .cards > li .icon {height: 100px;}
  #wwa .slogan-banner .container .cards > li .tit {font-size: 24px;}
  #wwa .slogan-banner .container .cards > li .desc {font-size: 15px;}
  #wwa .slogan-banner .container .cards > li .arw {top: 235px;}

  #wwa .hist-group .head .year {font-size: 150px;}
  #wwa .hist-group .head .slogan {font-size: 30px;}
  #wwa .hist-group {padding-top: 70px;}
  #wwa .hist-group .hist-yearly {padding-top: 55px; padding-left: 40px;}
  #wwa .hist-group .hist-yearly > li .year {font-size: 28px;}
  #wwa .hist-group .hist-yearly > li .year .clip {width: 29px; margin-right: 10px;}
  #wwa .hist-group .hist-yearly > li .year .clip::after {width: 21px; height: 21px; border-width: 7px;}
  #wwa .hist-group .hist-yearly > li .cont {font-size: 16px;}
  #wwa .hist-group .hist-yearly > li .cont > li::before {width: 5px; height: 5px;}
  #wwa .hist-group .hist-yearly > li:not(:last-child) {margin-bottom: 66px;}


}
@media screen and (max-width: 767px) {
  #wwa .vnm {padding-block: 80px; display: block;}
  #wwa .vnm article:not(:last-child) {margin-bottom: 50px;}
  #wwa .vnm article .head {margin-bottom: 15px;}
  #wwa .vnm article .head .title {font-size: 32px;}
  #wwa .vnm article .body .card {padding: 40px 20px;}
  #wwa .vnm article .body .card .tit {font-size: 18px;}
  #wwa .vnm article .body .card .desc {font-size: 14px;}
  #wwa .vnm article .body .card .visual {width: 170px; height: 170px;}

  #wwa .slogan-banner {padding-top: 100px; padding-bottom: 60px;}
  #wwa .slogan-banner .bg {height: calc(100% - 150px);}
  #wwa .slogan-banner .container .typo {font-size: 100px;}
  #wwa .slogan-banner .container .title {font-size: 28px;}
  #wwa .slogan-banner .container .cards {flex-direction: column;}
  #wwa .slogan-banner .container .cards > li {width: 100%; flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; padding: 40px 30px; border-radius: 10px;}
  #wwa .slogan-banner .container .cards > li .top {flex-shrink: 0;}
  #wwa .slogan-banner .container .cards > li .num {margin-bottom: 0; position: absolute; top: 10px; left: 15px;}
  #wwa .slogan-banner .container .cards > li .icon {width: 70px; height: 80px; object-fit: contain; flex-shrink: 0; margin: 0;}
  #wwa .slogan-banner .container .cards > li .tit {font-size: 20px;}
  #wwa .slogan-banner .container .cards > li .arw {top: auto; right: auto; left: 50%; bottom: -5px; transform: translate(-50%, 50%) rotate(90deg);}
  
  #wwa .history .container .line-wrap {transform: none; left: 12px;}
  #wwa .history .container .line-wrap .circle {display: none;}
  #wwa .hist-group {flex-direction: column;}
  #wwa .hist-group .head {display: flex; gap: 20px; align-items: flex-start; width: 100%; padding-right: 0;}
  #wwa .hist-group .head .year {font-size: 70px; margin-bottom: 0; display: none;}
  #wwa .hist-group .head .slogan {font-size: 24px; padding-block: 10px; background: #fff;}
  #wwa .hist-group .hist-yearly {width: 100%; padding-left: 0; padding-top: 45px;}
  #wwa .hist-group .hist-yearly > li:not(:last-child) {margin-bottom: 40px;}
  #wwa .hist-group .hist-yearly > li .year {font-size: 24px; padding-block: 10px; margin-bottom: 0.5em; background: #fff;}
  #wwa .hist-group .hist-yearly > li .year .clip {display: none;}
  #wwa .hist-group .hist-yearly > li .cont {padding-left: 10px; font-size: 15px;}
  #wwa .hist-group .hist-yearly > li .cont > li:not(:last-child) {padding-bottom: 0.4em;}
}



/* Patents */
.patent-hl {padding-block: 130px 190px; background: var(--dark-navy);}
.patent-hl .title {color: #fff; font-size: 30px; font-weight: 500; font-family: var(--font-secondary); margin-bottom: 74px;}
.patent-hl .hl-diagram > li:nth-child(odd) {transform: translate(0, -15%);}
.patent-hl .hl-diagram > li:nth-child(even) {transform: translate(0, 15%);}

.awards-hist {}
.awards-hist .row {display: flex; gap: 15px;}
.awards-hist .row:not(:last-child) {margin-bottom: 140px;}
.awards-hist .row .year {width: 250px; flex-shrink: 0; border-top: 2px solid #585858; padding-top: 20px;}
.awards-hist .row .year h4 {font-size: 35px; font-weight: 700; line-height: 1.2;}
.awards-hist .row .cont {width: 100%; border-top: 2px solid var(--gray); padding-top: 20px;}
.awards-hist .row .cont ul {font-size: 20px; color: #767676;}
.awards-hist .row .cont ul > li:not(:last-child) {margin-bottom: 60px;}
.awards-hist .row .cont ul > li img {display: block; margin-top: 25px;}

@media screen and (max-width: 1399px) {
  .patent-hl {padding-block: 100px; overflow: hidden;}
  .patent-hl .title {margin-bottom: 54px;}
  .patent-hl .hl-diagram {--size: 170px; justify-content: center; flex-wrap: nowrap;}
  .patent-hl .hl-diagram > li {flex-shrink: 0;}
  .patent-hl .hl-diagram > li:nth-child(odd) {transform: translate(0, -10%);}
  .patent-hl .hl-diagram > li:nth-child(even) {transform: translate(0, 10%);}
  .hl-diagram > li .inner .cont .val {font-size: 42px;}
  .hl-diagram > li .inner .cont .key {margin-bottom: 0.2em; font-size: 16px;}

  .awards-hist .row .year {width: 150px;}
  .awards-hist .row .year h4 {font-size: 26px;}
  .awards-hist .row .cont ul {font-size: 18px;}
  .awards-hist .row .cont ul > li img {height: 50px; margin-top: 15px;}
  .awards-hist .row .cont ul > li:not(:last-child) {margin-bottom: 40px;}
  .awards-hist .row:not(:last-child) {margin-bottom: 100px;}
}
@media screen and (max-width: 767px) {
  .patent-hl {}
  .patent-hl .title {margin-bottom: 30px; font-size: 26px;}
  .patent-hl:not(.type2) .hl-diagram {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;}
  .patent-hl:not(.type2) .hl-diagram > li {transform: none!important; padding: 0; width: 100%;}
  .patent-hl:not(.type2) .hl-diagram > li:last-child {grid-column: span 2;}
  .patent-hl:not(.type2) .hl-diagram > li .outer::before {display: none;}
  .patent-hl:not(.type2) .hl-diagram > li .outer::after {display: none;}
  .patent-hl:not(.type2) .hl-diagram > li .inner {border-radius: 10px;}
  .patent-hl:not(.type2) .hl-diagram > li .inner::before {display: none;}
  .patent-hl:not(.type2) .hl-diagram > li .inner .gear img {width: auto; height: 100%;}

  .patent-hl:not(.type2).dark .hl-diagram > li .inner {background: rgb(0,0,0,.4); color: #fff;}
  .patent-hl:not(.type2).dark .hl-diagram > li .inner .cont .val .num {color: var(--secondary);}
  .patent-hl:not(.type2).dark .hl-diagram > li .inner .cont .val small {color: #fff;}

  .patent-hl.type2 .hl-diagram {flex-wrap: wrap;}
  .patent-hl.type2 .hl-diagram > li {transform: none!important; margin: 5px!important;}
  .patent-hl.type2 .hl-diagram > li:last-child {margin-top: -15px!important;}
  .patent-hl.type2 .hl-diagram > li .outer::after {display: none;}
  .patent-hl.type2 .hl-diagram > li .outer::before {height: 100%; border-radius: 50%; border: 4px solid var(--primary)!important;}
  .patent-hl.type2 .hl-diagram > li .inner::before {display: none;}

  .awards-hist .row {flex-direction: column;}
  .awards-hist .row:not(:last-child) {margin-bottom: 60px;}
  .awards-hist .row .year {width: 100%; padding-top: 0; border-top: none;}
  .awards-hist .row .year h4 {font-size: 20px;}
  .awards-hist .row .cont ul {font-size: 15px;}
  .awards-hist .row .cont ul > li img {margin-top: 8px; height: 40px;}
  .awards-hist .row .cont ul > li img.auto {height: auto;}
}


/* Achievements */
.achieve-ls {border-top: 2px solid var(--primary); width: 100%; table-layout: fixed;}
.achieve-ls .col--num {width: 100px;}
.achieve-ls .col--client {width: 280px;}
.achieve-ls .col--date {width: 120px;}
.achieve-ls tr {border-bottom: 1px solid var(--gray-light);}
.achieve-ls tr.show {display: table-row;}
.achieve-ls tr.hide {display: none;}
.achieve-ls :where(th, td) {padding-block: 18px; padding-inline: 18px; font-size: 18px; vertical-align: top;}
.achieve-ls .v-m {vertical-align: middle;}
.achieve-ls th {color: var(--primary); font-weight: 500;}
.achieve-ls td {font-weight: 700;}
.achieve-ls td.gray {color: var(--gray-light);}
.achieve-ls td.tit {color: #000; font-weight: 700;}
.achieve-ls tfoot tr {border-bottom: none;}
.achieve-ls tfoot td {padding: 20px 0 0 0;}
.achieve-ls .load-btn {--color: #aaa; display: flex; width: 100%; height: 60px; align-items: center; justify-content: center; gap: 20px; color: var(--color); font-size: 18px; font-weight: 700;}
.achieve-ls .load-btn .arrow {width: 14px; height: 14px; border-color: var(--color); margin-top: -8px;}
.achieve-ls .load-btn.disabled {opacity: .0; pointer-events: none;}

.our-partners {background: rgb(235, 235, 235, .5); overflow: hidden;}
.our-partners .marque {--speed: 40s; --count: 28; --size: 250px; --gap: 20px; display: block; padding-top: 30px;}
.our-partners .marque li {width: calc((var(--size) + var(--gap)) * var(--count)); display: flex; flex-wrap: nowrap; flex-shrink: 0; gap: var(--gap); animation: var(--speed) 0s infinite linear; padding: calc(var(--gap) / 2) var(--gap); will-change: transform;}
.our-partners .marque li img {display: block; width: var(--size); flex-shrink: 0; border: 1px solid var(--gray-light); box-shadow: 20px 20px 30px rgb(0,0,0,.15); border-radius: 10px; background: #fff;}
.our-partners .marque li:nth-child(odd) {animation-name: marque;}
.our-partners .marque li:nth-child(even) {animation-name: marque-reverse; transform: translate(-50%);}
@keyframes marque {
  to {transform: translate(-50%);}
}
@keyframes marque-reverse {
  to {transform: translate(0%);}
}

@media (hover: hover) {
  .achieve-ls .load-btn:not(.disabled):hover {--color: var(--primary);}
  .our-partners .marque li:hover {animation-play-state: paused;}
}
@media screen and (max-width: 1399px) {
  .achieve-ls .col--num {width: 70px;}
  .achieve-ls .col--client {width: 180px;}
  .achieve-ls .col--date {width: 80px;}
  .achieve-ls :where(th, td) {font-size: 16px; padding: 12px;}
  .achieve-ls .load-btn {font-size: 16px;}
  .achieve-ls .load-btn .arrow {width: 10px; height: 10px; margin-top: -6px;}

  .our-partners .marque {--size: 200px; --gap: 10px; padding-top: 0;}
}
@media screen and (max-width: 767px) {
  .achieve-ls .num {display: none;}
  .achieve-ls col {display: none;}
  .achieve-ls thead {display: none;}

  .achieve-ls {display: block;}
  .achieve-ls tfoot,
  .achieve-ls tfoot :where(tr, td, th),
  .achieve-ls tbody {display: block; width: 100%;}
  .achieve-ls :where(th, td) {font-size: 14px; padding: 10px;}
  .achieve-ls tr {padding-block: 12px; width: 100%;}
  .achieve-ls tr.show {display: flex; flex-wrap: wrap; gap: 0px;}
  .achieve-ls tr.show td:not(.num) {display: block;}
  .achieve-ls td {padding-block: 0;}
  .achieve-ls td.tit {order: 0; width: 100%; line-height: 1.5; font-weight: 500; color: inherit; margin-bottom: 0.3em;}
  .achieve-ls td.date {order: 1;}
  .achieve-ls td.client {order: 2;}
  .achieve-ls td:is(.client, .date) {font-size: 13px; font-weight: 400; line-height: 1.5;}
  .achieve-ls tfoot td {padding-top: 0;}

  .our-partners .marque {--size: 150px; --gap: 10px; padding-top: 0;}
  .our-partners .marque li img {border-radius: 5px;}
}



/* Digital twin */
.dt-plug-ins {}
.dt-plug-ins .container {display: flex; justify-content: center; padding-block: 80px 125px; border-bottom: 1px solid #2A304B;}
.dt-plug-ins .chip {position: relative; margin-top: -200px; border-radius: 30px;}
.dt-plug-ins .chip::after {position: absolute; top: 100%; left: 50%; transform: translate(-50%); width: 120%; height: 125px; content: ''; backdrop-filter: blur(10px); background: rgb(17, 23, 50, .3);}
.dt-plug-ins .chip .inner {position: relative; -webkit-box-reflect: below 20px linear-gradient(rgb(255,255,255,0) 75%, rgb(255,255,255,.4) 100%);}
.dt-plug-ins .chip img {display: block;}
.dt-plug-ins .content {padding-left: 82px;}
.dt-plug-ins .content .title {font-size: 24px; margin-bottom: 0.5em;}
.dt-plug-ins .content .title b {display: inline-block; font-size: 1.25em; margin-right: 0.3em;}

.dt-plug-platform {padding-block: 84px 166px;}
.dt-plug-platform .cards {margin-top: 132px;}
.dt-plug-platform .cards .item .card .ico {position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);}
.dt-plug-platform .cards .item .card .cont .description {position: absolute; top: 100%; left: 50%; transform: translate(-50%); width: 100%; display: block; padding-top: 1.5em;}
.dt-plug-platform .cards .item:nth-child(4) {margin-right: 20px;}
.dt-plug-platform .cards .item:nth-child(4) .card .inner {background: var(--primary);}
.dt-plug-platform .cards .item:nth-child(5) .card .inner {background: #004094;}
.dt-plug-platform .cards .item:is(:nth-child(4), :nth-child(5)) .card .inner :where(.key, .val) {color: #fff;}
.dt-plug-platform .cards .item:is(:nth-child(4)) .card .inner .icon {background: rgb(255,255,255,.8);}
.dt-plug-platform .cards .item:is(:nth-child(5)) .card .inner .icon {background: rgb(255,255,255,.7);}
.dt-plug-platform .cards .item:is(:nth-child(4)) .card .inner .ico {left: calc(100% + 38px); transform: translate(-50%, -50%);}

.dt-plug-platform .cards .item.to-right {transform: scale(0.5); opacity: 0;}
.dt-plug-platform .cards .item.merge-left {transform: translate(40px); opacity: 0;}
.dt-plug-platform .cards .item:is(:nth-child(4)) .card .inner .ico {transform: translate(-50%, -50%) scale(0); opacity: 0;}
.dt-plug-platform .cards .item.merge-right {transform: translate(-40px); opacity: 0;}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .dt-plug-ins .container {padding-bottom: 95px;}
  .dt-plug-ins .chip {margin-top: -150px;}
  .dt-plug-ins .chip::after {height: 95px;}

  .dt-plug-platform .cards {flex-wrap: wrap; gap: 80px 20px; justify-content: center;}
  .dt-plug-platform .cards .item {position: relative; width: calc((100% - 40px) / 3);}
  .dt-plug-platform .cards .item .ico {display: none;}
  .dt-plug-platform .cards .item:nth-child(2) .ico {display: block; transform: translate(-50%, 0) rotate(90deg); top: 100%; left: 50%; margin-top: 100px;}
  .dt-plug-platform .cards .item:is(:nth-child(4)) {margin-right: 40px;}
  .dt-plug-platform .cards .item:is(:nth-child(4)) .card .inner .ico {display: block; left: calc(100% + 33px); z-index: 10; width: 40px;}

  .dt-plug-platform .cards .item.to-right {transform: translate(0, -20%);}
  .dt-plug-platform .cards .item.merge-left,
  .dt-plug-platform .cards .item.merge-right {margin-top: 20px;}
}
@media screen and (max-width: 767px) {
  .dt-plug-ins .container {flex-direction: column; padding-bottom: 50px;}
  .dt-plug-ins .chip {width: 200px; margin-inline: auto; margin-bottom: 40px; margin-top: -100px;}
  .dt-plug-ins .content {position: relative; z-index: 1; padding-left: 0; text-align: center;}

  .dt-plug-platform .cards {margin-top: 70px; flex-direction: column; flex-wrap: nowrap; gap: 20px;}
  .dt-plug-platform .cards .item {width: 100%;}
  .dt-plug-platform .cards .item.to-right,
  .dt-plug-platform .cards .item.merge-left,
  .dt-plug-platform .cards .item.merge-right {transform: translate(0, -50%);}
  .dt-plug-platform .cards .item .card {margin-bottom: 0; border-radius: 20px;}
  .dt-plug-platform .cards .item .card::after {display: none;}
  .dt-plug-platform .cards .item .card .inner {display: flex; flex-direction: row; align-items: center; text-align: left; gap: 20px; padding: 20px; border-radius: 20px;}
  .dt-plug-platform .cards .item .card .inner .icon {flex-shrink: 0; width: 64px; margin-bottom: 0;}
  .dt-plug-platform .cards .item .card .inner .icon img {display: block;}
  .dt-plug-platform .cards .item .card .inner .cont {width: 100%;}
  .dt-plug-platform .cards .item .card .inner .cont .key {display: inline-block; margin-bottom: 0; font-size: 16px;}
  .dt-plug-platform .cards .item .card .inner .cont .val {display: inline-block; margin-left: 0.3em; font-size: 13px;}
  .dt-plug-platform .cards .item .card .inner .cont .description {position: static; padding-top: 0em; transform: none; color: #000; font-size: 14px; line-height: 1.5;}
  .dt-plug-platform .cards .item:is(:nth-child(4), :nth-child(5)) .card .inner .cont .description {color: #fff;}
  .dt-plug-platform .cards .item:is(:nth-child(4), :nth-child(5)) {color: #fff; margin-top: 0;}

  .dt-plug-platform .cards .item:nth-child(1) {z-index: 10;}
  .dt-plug-platform .cards .item:nth-child(2) {z-index: 9;}
  .dt-plug-platform .cards .item:nth-child(3) {z-index: 8;}
  .dt-plug-platform .cards .item:nth-child(4) {z-index: 7;}
  .dt-plug-platform .cards .item:nth-child(5) {z-index: 6;}
  
  .dt-plug-platform .cards .item .card .inner .ico {z-index: 10;}
  .dt-plug-platform .cards .item:is(:nth-child(4)) .card .inner .ico,
  .dt-plug-platform .cards .item .card .ico {display: block; top: 100%; left: 52px; transform: translate(-50%, -50%) rotate(90deg)!important; opacity: 1!important; margin-top: 15px;}
}


/* Operational Optimization */
#operational-optimization .intro-hero.type2 .content .title {margin-bottom: 0;}

.os-content {padding-block: 158px; overflow: hidden;}
.os-content .head {padding-bottom: 180px;}
.os-content .head .cont .counter-cont {font-size: 300px; line-height: 1; margin-bottom: -40px;}
.os-content .head .cont .counter-cont .counter {display: block; color: transparent; background: linear-gradient(to bottom, #A8C9F4, #193963, transparent 90%); -webkit-background-clip: text;}

.op-diagram {text-align: center;}
.op-diagram__area {}
.op-diagram__wing {--theme: var(--primary); --padding: 93px; padding-block: var(--padding); position: relative; margin-top: 32px;}
.op-diagram__wing .starter {display: inline-block; padding: 17px 45px; border-radius: 100px; color: #fff; border: 2px solid var(--theme); font-size: 18px; font-weight: 700; line-height: 1.33; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #00214B; z-index: 1;}
.op-diagram__wing .starter::after {position: absolute; top: 100%; left: 50%; width: 2px; height: 66px; content: ''; display: block; background: var(--theme); transform: translate(-50%);}
.op-diagram__wing .cards {position: relative; z-index: 1; display: flex; gap: 15px;}
.op-diagram__wing .cards.px-cards > li {width: 100%;}
.op-diagram__wing .cards:not(.px-cards) > li {width: 100%; border-radius: 35px; border: 2px solid var(--theme); height: 175px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.op-diagram__wing .cards:not(.px-cards) > li strong {font-size: 24px; line-height: 1.3; margin-bottom: 0.2em;}
.op-diagram__wing .cards:not(.px-cards) > li span {font-size: 20px; font-weight: 300; opacity: .4; line-height: 1.3;}
.op-diagram__wing .lines {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
.op-diagram__wing .lines * {position: absolute;}
.op-diagram__wing .lines .round {--round: 100px; left: 50%; transform: translate(-50%); border: 1px solid var(--theme); width: 100%; height: var(--padding);}
.op-diagram__wing .lines .round.top {top: 0; border-radius: var(--round) var(--round) 0 0; border-bottom: none;}
.op-diagram__wing .lines .round.bottom {bottom: 0; border-radius: 0 0 var(--round) var(--round); border-top: none;}
.op-diagram__wing .lines .round-1 {width: 80%;}
.op-diagram__wing .lines .round-2 {width: 80%;}
.op-diagram__wing .lines .round-3 {width: 40%;}
.op-diagram__wing .lines .vertical {position: absolute; width: 2px; left: 50%; background: linear-gradient(to bottom, var(--theme), transparent); height: 410px; top: 100%; transform: translate(-50%, calc(var(--padding) * -1));}

.op-diagram__foot {--theme: var(--secondary-dark);}
.op-diagram__foot .starter {background: #002A2B;}
.op-diagram__foot .lines .vertical {background: linear-gradient(to top, var(--theme), transparent); top: auto; bottom: 100%; height: calc(410px - var(--padding));  transform: translate(-50%, 0);}
.op-diagram__foot .px-cards .item .card .inner,
.op-diagram__foot .px-cards .item .card {height: 100%; margin: 0;}
.op-diagram__foot .px-cards .item .card .val {color: var(--secondary-dark); font-size: 18px;}

.op-diagram__body {position: relative;}
.op-diagram__body .bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: .4; width: 100vw; max-width: none;}
.op-diagram__body .core-wrap {position: relative; z-index: 1;}
.op-diagram__body .core-wrap .shade {display: block; margin: 0 auto;}
.op-diagram__body .core-wrap .core {--size: 480px; --padding: 33px; width: var(--size); height: var(--size); border-radius: 50%; margin: 0 auto; padding: 21px; background: #040B24; margin-block: -10px; position: relative; z-index: 1;}
.op-diagram__body .core-wrap .core .inner {position: relative; padding: var(--padding); border-radius: 50%; width: 100%; height: 100%;}
.op-diagram__body .core-wrap .core .inner > .gear {position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: rotate 30s 0s infinite linear;}
.op-diagram__body .core-wrap .core .inner .inner {position: relative; z-index: 1; background: linear-gradient(to bottom, var(--primary), var(--secondary)); overflow: hidden;}
.op-diagram__body .core-wrap .core .inner .inner::before {position: absolute; top: 50%; left: 50%; content: ''; display: block; width: calc(100% - var(--padding)); aspect-ratio: 1 / 1; border-radius: 50%; border: 2px dotted #fff; transform: translate(-50%, -50%);}
.op-diagram__body .core-wrap .core .inner .inner::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: block; background: linear-gradient(to bottom, var(--primary) 10%, transparent);}
.op-diagram__body .core-wrap .core .inner .inner .cont {position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; background: #fff; padding: 15px; color: #000; display: flex; align-items: center; justify-content: center;}
.op-diagram__body .core-wrap .core .inner .inner .cont .symbol {position: absolute; top: 50%; left: 50%; opacity: .1; transform: translate(-50%, -50%);}
.op-diagram__body .core-wrap .core .inner .inner .cont .txt {position: relative; z-index: 1; display: flex; flex-direction: column;}
.op-diagram__body .core-wrap .core .inner .inner .cont .txt span {font-size: 18px; color: #767676; line-height: 1.3; margin-bottom: 0.8em; font-weight: 500;}
.op-diagram__body .core-wrap .core .inner .inner .cont .svg-plug-logo {display: block; margin: 0 auto;}

.op-diagram__body .core-wrap .core .inner > .detail {position: absolute; top: 50%; left: 50%; z-index: 0; width: 0; height: 0; display: flex; align-items: center; justify-content: center; gap: 150px;}
.op-diagram__body .core-wrap .detail-ls {width: 645px; display: flex; flex-direction: column; gap: 20px; flex-shrink: 0;}
.op-diagram__body .core-wrap .detail-ls.mo,
.op-diagram__body .core-wrap > .detail-ls {display: none;}
.op-diagram__body .core-wrap .detail-ls .item {display: flex; align-items: center; gap: 35px; height: 172px; border-radius: 172px; border: 1px solid var(--primary); background: linear-gradient(var(--dir), rgb(0, 64, 148, .9), rgb(0, 33, 77, .9)); padding: 20px 40px; text-align: left;}
.op-diagram__body .core-wrap .detail-ls .item .icon {display: flex; align-items: center; justify-content: center; width: 110px; flex-shrink: 0;}
.op-diagram__body .core-wrap .detail-ls .item .icon img {display: block;}
.op-diagram__body .core-wrap .detail-ls .item .wrap .tit {font-size: 19px; font-weight: 700; display: block; line-height: 1.3; margin-bottom: 0.6em;}
.op-diagram__body .core-wrap .detail-ls .item .wrap .bullet {font-size: 14px; color: var(--gray);}
.op-diagram__body .core-wrap .detail-ls .item .wrap .bullet > li {}
.op-diagram__body .core-wrap .detail-ls .item .wrap .bullet > li::before {background: var(--secondary)}
.op-diagram__body .core-wrap .detail-ls.left {--dir: to left;}
.op-diagram__body .core-wrap .detail-ls.left .item {padding-right: 132px;}
.op-diagram__body .core-wrap .detail-ls.right {--dir: to right;}
.op-diagram__body .core-wrap .detail-ls.right .item {padding-left: 153px;}

@media screen and (max-width: 1399px) and (min-width: 768px) {
  #our-service .intro-hero.type2 .content .container,
  #operational-optimization .intro-hero.type2 .content .container {padding-inline: 0;}
  #our-service .intro-hero.type2 .content .title,
  #operational-optimization .intro-hero.type2 .content .title {font-size: 47px;}
}
@media screen and (max-width: 1399px) {
  .os-content {padding-block: 120px;}
  .os-content .head .cont .counter-cont {font-size: 270px;}
  .os-content .head {padding-bottom: 100px;}
  .op-diagram__wing {--padding: 50px;}
  .op-diagram__wing .starter {font-size: 16px; padding-block: 13px;}
  .op-diagram__wing .starter::after {height: 29px;}
  .op-diagram__wing .cards:not(.px-cards) > li {border-radius: 20px;}
  .op-diagram__wing .lines .round {--round: 30px;}
  .op-diagram__wing .cards:not(.px-cards) > li strong {font-size: 16px;}
  .op-diagram__wing .cards:not(.px-cards) > li span {font-size: 14px;}
  .op-diagram__wing .cards:not(.px-cards) > li {height: 125px;}
  .op-diagram__wing .px-cards .item .card .inner {padding-inline: 5px;}
  .op-diagram__wing .px-cards .item .card .icon {width: 70px;}
  .op-diagram__wing .px-cards .item .card .key {font-size: 16px;}
  .op-diagram__wing .px-cards .item .card .val {font-size: 13px; line-height: 1.3;}
  .op-diagram__foot .px-cards .item .card .val {font-size: 16px;}

  .op-diagram__body .core-wrap .core {--size: 300px; --padding: 15px;}
  .op-diagram__body .core-wrap .core .inner .inner .cont .symbol {width: 70%;}
  .op-diagram__body .core-wrap .core .inner .inner .cont .txt span {font-size: 16px;}
  .op-diagram__body .core-wrap .core .inner .inner .cont .svg-plug-logo {width: 100px; height: auto;}
  .op-diagram__body .core-wrap .core .inner > .detail {display: none;}
  .op-diagram__body .core-wrap > .detail-ls {display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 10px;}
  .op-diagram__body .core-wrap .detail-ls .item {padding-inline: 20px!important; height: auto; border-radius: 20px; align-items: flex-start;}
  .op-diagram__body .core-wrap .detail-ls.mo .item,
  .op-diagram__body .core-wrap .detail-ls.top .item {--dir: to top;}
  .op-diagram__body .core-wrap .detail-ls.bot .item {--dir: to bottom;}
  .op-diagram__body .core-wrap .detail-ls .item .icon {width: 50px; display: none;}
  .op-diagram__body .core-wrap .detail-ls .item .wrap .tit {font-size: 17px;}
}
@media screen and (max-width: 767px) {
  .os-content {padding-block: 80px;}
  .os-content .head {padding-bottom: 60px;}
  .os-content .head .cont .counter-cont {font-size: 130px; margin-bottom: -20px;}

  .op-diagram__wing {--padding: 40px;}
  .op-diagram__wing .starter {font-size: 15px; padding-inline: 20px; border-radius: 10px;}
  .op-diagram__wing .starter::after {display: none;}
  .op-diagram__wing .cards {display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px;}
  .op-diagram__wing .cards > li {grid-column: span 1;}
  .op-diagram__wing .cards:not(.px-cards) > li {height: 85px; border-radius: 10px; border-width: 1px;}
  .op-diagram__wing .cards:not(.px-cards) > li strong {font-size: 14px;}
  .op-diagram__wing .lines .round-3 {display: none;}
  .op-diagram__wing .lines .vertical {transform: translate(-50%); height: 80px;}
  .op-diagram__body .core-wrap .shade {height: 80px; width: auto;}
  .op-diagram__body .core-wrap .core {--size: 270px;}
  .op-diagram__body .core-wrap .core .inner .inner .cont .txt span {font-size: 14px;}
  .op-diagram__body .core-wrap .core .inner .inner .cont .txt strong {font-size: 32px;}
  .op-diagram__body .core-wrap > .detail-ls:not(.mo) {display: none;}
  .op-diagram__body .core-wrap > .detail-ls.mo {display: grid;}
  .op-diagram__body .core-wrap > .detail-ls {grid-template-columns: repeat(1, 1fr);}
  .op-diagram__body .core-wrap .detail-ls .item .wrap .tit {font-size: 15px;}
  .op-diagram__body .core-wrap .detail-ls .item .wrap .bullet {font-size: 13px;}
  .op-diagram__foot .px-cards .item .card {background: none; padding: 0; border: 1px solid var(--secondary-dark); border-radius: 10px;}
  .op-diagram__foot .px-cards .item .card .inner {background: none; padding: 20px; flex-direction: row; align-items: center; text-align: left; gap: 15px;}
  .op-diagram__wing .px-cards .item .card .key {display: block; color: #fff; font-size: 14px;}
  .op-diagram__foot .px-cards .item .card .val {display: block; font-size: 12px;}
  .op-diagram__foot .px-cards .item .card::after {display: none;}
  .op-diagram__wing .px-cards .item .card .icon {width: 50px; margin-bottom: 0;}
}


/* AI Simulation */
.ai-content {position: relative; padding-block: 150px 300px;}
.ai-content > .bg {position: absolute; top: 0; left: 0; width: 100%; height: 783px; object-fit: cover; opacity: .5; z-index: 0;}
.ai-content .container {position: relative; z-index: 1;}

.ai-simul-diagram {--size: 400px; --mt: 195px; position: relative; display: flex; justify-content: space-between; gap: 20px; padding: 40px 55px; border: 1px solid var(--primary-dark); border-radius: 528px; margin-top: var(--mt); width: 1400px; max-width: 100%; margin-inline: auto}
.ai-simul-diagram::before {position: absolute; bottom: 100%; left: 50%; transform: translate(-50%); width: 1px; height: var(--mt); content: ''; background: linear-gradient(to top, #2E61E6, transparent);}
.ai-simul-diagram .item {position: relative; width: var(--size); height: var(--size); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); border-radius: 50%;}
.ai-simul-diagram .item:nth-child(1) {--bg: #004094;}
.ai-simul-diagram .item:nth-child(2) {--bg: #0058CD;}
.ai-simul-diagram .item:nth-child(3) {--bg: #006EFF;}
.ai-simul-diagram .item .circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none;}
.ai-simul-diagram .item .icon {margin-bottom: 20px; margin-top: -10px; width: 80px;}
.ai-simul-diagram .item .tit {font-size: 28px; color: #fff; font-weight: 700; line-height: 1.4; margin-bottom: 0.4em;}
.ai-simul-diagram .item .desc {font-size: 16px; line-height: 1.7; color: #99C5FF;}

.simul-carousal {position: relative; margin-bottom: 235px;}
.simul-carousal::before {position: absolute; top: 50%; left: 50%; width: 120%; height: 100px; border-radius: 50%; background: var(--primary-dark); content: ''; display: block; transform: translate(-50%, -50%); filter: blur(50px); opacity: .4;}
.simul-carousal .labtop {display: block; margin: 0 auto;}
.simul-carousal .swiper {position: absolute; top: 78px; left: 50%; transform: translate(-50%); width: 716px; height: 329px;}
.simul-carousal .swiper-slide {}
.simul-carousal .swiper-slide img {display: block;}
.simul-carousal .info {position: absolute; top: 100%; padding-top: 52px; width: 100%;}
.simul-carousal .title-box {font-size: 18px; margin-bottom: 50px;}
.simul-carousal nav {display: flex; justify-content: center; align-items: center; gap: 16px;}
.simul-carousal nav .swiper-pagination-bullet {all: unset; cursor: pointer; position: relative; opacity: .3; transition: opacity .5s; margin: 0!important;}
.simul-carousal nav .swiper-pagination-bullet::after {position: absolute; top: 100%; left: 50%; transform: translate(-50%); width: calc(100% - 10px); height: 4px; border-radius: 4px; background: var(--primary); content: ''; display: block; margin-top: 11px; opacity: 0; transition: opacity .5s;}
.simul-carousal nav .swiper-pagination-bullet-active {opacity: 1;}
.simul-carousal nav .swiper-pagination-bullet-active::after {opacity: 1;}
.simul-carousal nav .swiper-pagination-bullet img {width: 84px; display: block; border-radius: 10px;}
@media (hover: hover) {
  .simul-carousal nav .swiper-pagination-bullet:hover {opacity: 1;}
}
@media screen and (max-width: 1599px) {
  .ai-simul-diagram {--size: 400px; padding: 30px;}
  .ai-simul-diagram .item .icon {width: 90px;}
  .ai-simul-diagram .item .tit {font-size: 30px;}
  .ai-simul-diagram .item .desc {font-size: 16px;}
}
@media screen and (min-width: 1400px) {
  .ai-content .head {padding-bottom: 120px;}
}
@media screen and (max-width: 1399px) and (min-width: 768px) {
  #ai-simulation .intro-hero.type2 .content .container {padding-inline: 0;}
  #ai-simulation .intro-hero.type2 .content .title {font-size: 47px;}
}
@media screen and (max-width: 1399px) {
  .ai-content {padding-block: 100px 200px;}
  .ai-simul-diagram {--mt: 100px; padding: 20px; border-radius: 20px;}
  .ai-simul-diagram .item {width: 100%; height: auto; border-radius: 10px; padding: 30px 10px;}
  .ai-simul-diagram .item .circle {display: none;}
  .ai-simul-diagram .item .icon {width: 60px; margin-bottom: 10px; margin-top: 0;}
  .ai-simul-diagram .item .tit {font-size: 21px;}
  .ai-simul-diagram .item .desc {font-size: 14px;}

  .simul-carousal .swiper {width: 562px; height: 258px; top: 62px;}
}
@media screen and (max-width: 767px) {
  .ai-content {padding-block: 100px 150px;}
  .ai-content > .bg {height: 270px;}
  .ai-simul-diagram {flex-direction: column; gap: 10px; padding: 15px; width: 320px;}
  .ai-simul-diagram .item .icon {width: 45px;}
  .ai-simul-diagram .item .tit {font-size: 16px;}
  .ai-simul-diagram .item .desc {font-size: 13px;}

  .simul-carousal {display: flex; justify-content: center;}
  .simul-carousal .labtop {width: 124%; max-width: none;}
  .simul-carousal .swiper {width: 96.5%; top: 15%; height: auto;}
  .simul-carousal .info {padding-top: 30px;}
  .simul-carousal .title-box {font-size: 16px; margin-bottom: 30px;}
  .simul-carousal nav {gap: 5px;}
  .simul-carousal nav .swiper-pagination-bullet img {border-radius: 5px;}
}



/* Extended service */
#extended-service .intro-hero.type2 .content .title .txt--2 {transform: translate(-265px);}
#extended-service .intro-hero.type2 .content .title .txt--3 {text-align: right; transform: translate(-80px);}
.es-parallax {--h: calc(var(--vh, 1vh) * 100); position: relative; height: calc(4 * var(--h)); overflow: hidden;}
.es-parallax-progress {--size: 10px; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: var(--h); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 100px;}
.es-parallax-progress .container {height: var(--size); border-radius: var(--size); overflow: hidden; background: rgb(255,255,255,.15);}
.es-parallax-progress .container .inner {width: 100%; height: 100%; background: #fff; border-radius: var(--size); transform: scaleX(0.5); transform-origin: left;}
.es-parallax-wrap {width: 200%; display: flex;}
.es-parallax-item {position: relative; overflow: hidden; width: 50%; height: var(--h);}
.es-parallax-item .bg {position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.es-parallax-item::after {position: absolute; content: ''; display: block; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgb(0,0,0,.7), transparent);}
.es-parallax-item .container {position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; height: 100%; padding-bottom: 157px;}
.es-parallax-item .container .content {width: 50%;}
.es-parallax-item .container .content .title {}
.es-parallax-item .container .content .desc {}
.es-vision-ai {z-index: 10; opacity: 1;}
.es-vision-meta {z-index: 9; opacity: 0;}
.es-vision-ai .diagram {margin-top: 50px;}
.es-vision-ai .diagram .icons {display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;}
.es-vision-ai .diagram .icons > li {border-radius: 30px; border: 1px solid var(--primary); background: #000000; display: flex; align-items: center; flex-direction: column; text-align: center; width: 125px; height: 125px; padding: 12px 10px 10px 10px;}
.es-vision-ai .diagram .icons > li span {font-size: 12px; line-height: 1.3; height: 2.6em; display: flex; align-items: center; justify-content: center;}
.es-vision-ai .diagram .res {display: flex; justify-content: center;}
.es-vision-ai .diagram .res .inner {position: relative; width: 695px; height: 83px; border-radius: 83px; border: 1px solid var(--primary); background: #fff; color: var(--primary); display: flex; justify-content: center; align-items: center; margin-top: 64px;}
.es-vision-ai .diagram .res .arw {position: absolute; bottom: 100%; left: 50%; transform: translate(-50%); }
.es-vision-ai .diagram .res span {font-size: 18px; font-weight: 700; position: relative; padding-inline: 32px; line-height: 1;}
.es-vision-ai .diagram .res span:not(:last-child)::after {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); height: 1em; width: 1px; background: var(--gray-light); content: ''; display: block;}
@media screen and (max-width: 1399px) {
  #extended-service .intro-hero.type2 .content .title .txt--2 {transform: translate(20px);}
  #extended-service .intro-hero.type2 .content .title .txt--3 {text-align: right; transform: translate(-80px);}
  .es-parallax {height: auto;}
  .es-parallax-progress {display: none;}
  .es-parallax-wrap {width: 100%; display: block;}
  .es-parallax-item {width: 100%; height: auto;}
  .es-parallax-item .container {padding-block: 100px;}
  .es-parallax-item .container .content {width: 100%;}
  .es-vision-ai .diagram .icons > li {width: 100%;}
  .es-vision-ai .diagram .res .inner {width: 100%; height: 50px;}
  .es-vision-ai .diagram .res span {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  #extended-service .intro-hero.type2 .content .title .txt--2 {transform: translate(0); text-align: center;}
  #extended-service .intro-hero.type2 .content .title .txt--3 {text-align: right; transform: translate(0);}
  .es-parallax-item .container {padding-block: 70px;}
  .es-vision-ai .diagram .icons {display: flex; flex-wrap: wrap;}
  .es-vision-ai .diagram .icons > li {border-radius: 10px; flex: 1 90px; height: auto; padding: 13px 10px 20px 10px;}
  .es-vision-ai .diagram .icons > li .icon {width: 60px;}
  .es-vision-ai .diagram .res span {padding-inline: 12px; font-size: 12px; text-align: center; line-height: 1.3;}
  .es-vision-ai .diagram .res .inner {margin-top: 60px;}
  .es-vision-ai .diagram .res .arw {margin-bottom: 10px;}
}



/* Plug */
.plug-intro {padding-block: 190px 90px; background: linear-gradient(to bottom, rgb(240, 240, 240, .5), #fff);}
.plug-intro .container {display: flex; gap: 84px; padding-inline: 240px;}
.plug-intro .container .title {font-size: 52px; font-weight: 400; color: #000; letter-spacing: -0.02em;}
.plug-intro .container .title span {margin-right: 0.2em;}
.plug-intro .container .title .svg-plug-logo {height: .85em; width: auto;}
.plug-intro .container .desc {font-size: 18px; line-height: 1.8;}

.plug-body {--indent: 400px;}
.plug-hero {padding-bottom: 100px;}
.plug-hero .bg {display: block; width: 100%; height: 682px; object-fit: cover;}
.plug-hero .bg.type2 {background-attachment: fixed; background-position: bottom;}
.plug-hero .bg.parallax {position: relative; overflow: hidden;}
.plug-hero .bg.parallax img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 150%; object-fit: cover; will-change: transform; -webkit-will-change: transform;}
.plug-hero .container {padding-left: var(--indent); }
.plug-hero .container .title {position: relative; font-size: 160px; font-weight: 500; line-height: 1; color: #000; margin-bottom: 0.3em; margin-top: -.15em;}
.plug-hero .container .title::before {position: absolute; top: .5em; transform: translate(0, -50%); right: 100%; margin-right: 0.3em; height: 10px; width: 100vw; border-radius: 10px; background: #000; content: '';}
.plug-hero .container .desc {font-size: 20px;}
.plug-hero .container .desc strong {display: block; font-size: 28px; color: #000; line-height: 1.4; margin-bottom: 0.5em;}

.plug-tab-content {position: relative; padding-block: 0 100px; display: grid; grid-template-columns: var(--indent) 1fr; gap: 0; align-items: start;}
.plug-tab-content .tab-nav {position: sticky; left: 0; top: calc(50% - var(--h)); display: flex; flex-direction: column; gap: 20px; width: 126px; padding-block: 100px;}
.plug-tab-content .tab-nav button {display: flex; align-items: center; justify-content: center; min-width: 126px; height: 60px; border: 1px solid #BDBDBD; border-radius: 60px; color: #BDBDBD; font-weight: 600;}
.plug-tab-content .tab-nav button.active {border: none; background: var(--primary); color: #fff; box-shadow: 10px 10px 20px rgb(0,0,0,.15);}
.plug-tab-content .tab-wrap {position: relative;}
.plug-tab-content .tab-content {display: block;}
.plug-tab-content .tab-content {padding-block: 100px; scroll-margin-block-start: 50px;}
.plug-tab-content .tab-content.active {display: block;}
.plug-tab-content .tab-content .head {display: flex; gap: 54px; align-items: center; margin-bottom: 55px;}
.plug-tab-content .tab-content .head .cont {width: 50%;}
.plug-tab-content .tab-content .head .cont .tit {font-size: 58px; text-transform: uppercase; color: #000; font-weight: 500;}
.plug-tab-content .tab-content .head .icons {width: 50%; display: flex;}
.plug-tab-content .tab-content .head .icons > li {position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 10px;}
.plug-tab-content .tab-content .head .icons > li:not(:last-child)::after {position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 1px; height: 150px; background: #E6E7EC; content: '';}
.plug-tab-content .tab-content .head .icons > li .icon {}
.plug-tab-content .tab-content .head .icons > li span {line-height: 1.7;}
.plug-tab-content .tab-content .body {}
.plug-tab-content .tab-content .body .plug-carousal {padding: 110px 40px 40px 40px; position: relative; overflow: hidden; background: #EFEFF3; border-radius: 30px; border: 1px solid #D6D6D6;}
.plug-tab-content .tab-content .body .plug-carousal:has(.major-project) {padding-bottom: 0;}
.plug-tab-content .tab-content .body .plug-carousal::before,
.plug-tab-content .tab-content .body .plug-carousal::after {position: absolute; top: 0; width: 150px; height: 100%; content: ''; z-index: 10; pointer-events: none;}
.plug-tab-content .tab-content .body .plug-carousal::before {left: 0; background: linear-gradient(to right, #EFEFF3, transparent);}
.plug-tab-content .tab-content .body .plug-carousal::after {right: 0; background: linear-gradient(to left, #EFEFF3, transparent);}
.plug-tab-content .tab-content .body .plug-carousal .swiper {margin: 0 auto; width: 472px; height: 274px; overflow: visible; margin-bottom: 80px;}
.plug-tab-content .tab-content .body .plug-carousal .swiper-wrapper {align-items: center;}
.plug-tab-content .tab-content .body .plug-carousal .swiper-slide {transition: opacity .5s, filter .5s; display: flex; align-items: center; justify-content: center;}
.plug-tab-content .tab-content .body .plug-carousal .swiper-slide img {display: block;}
.plug-tab-content .tab-content .body .plug-carousal .swiper-slide:not(.swiper-slide-active) {opacity: .5; filter: blur(5px)}
.plug-tab-content .tab-content .body .plug-carousal .labtop {position: absolute; top: -26px; left: 50%; max-width: none; width: 604px; transform: translate(-50%);}
.plug-tab-content .tab-content .body .plug-carousal:has(.kiosk) .swiper {width: 555px; height: auto;}
.plug-tab-content .tab-content .body .plug-carousal:has(.kiosk) .swiper-slide {border-radius: 12px; overflow: hidden;}
.plug-tab-content .tab-content .body .plug-carousal .kiosk {position: absolute; top: -19px; left: 50%; max-width: none; transform: translate(-50%); width: 592px; height: 349px; background: #fff; border: 2px solid #6C6C6C; border-radius: 30px; padding: 3px; box-shadow: 30px 20px 40px rgb(0,0,0,.15);}
.plug-tab-content .tab-content .body .plug-carousal .kiosk .inn {background: #000; height: 100%; width: 100%; border-radius: 27px;}
.plug-tab-content .tab-content .body .plug-carousal nav {display: flex; justify-content: center; gap: 10px;}
.plug-tab-content .tab-content .body .plug-carousal nav:has(.prev.swiper-button-disabled ~ .next.swiper-button-disabled) { opacity: 0; pointer-events: none;}
.plug-tab-content .tab-content .body .plug-carousal nav button {width: 60px; height: 60px; border-radius: 50%; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.plug-tab-content .tab-content .body .plug-carousal nav button:not(.swiper-button-disabled) {border-color: var(--primary); background: var(--primary); box-shadow: 10px 10px 20px rgb(0,0,0,.15); pointer-events: initial;}
.plug-tab-content .tab-content .body .plug-carousal nav button:not(.swiper-button-disabled) svg path {stroke: #fff;}
.plug-tab-content .tab-content .body .plug-carousal .major-project {display: flex; align-items: flex-start; gap: 20px; font-size: 16px; position: relative; z-index: 20; padding-block: 30px; border-top: 1px solid #ddd; margin-top: 43px;}
.plug-tab-content .tab-content .body .plug-carousal .major-project .tit {width: 280px; flex-shrink: 0; font-weight: 400;}
.plug-tab-content .tab-content .body .plug-carousal .major-project .bullet {font-weight: 700; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; width: 100%;}
.plug-tab-content .tab-content .body .plug-carousal .major-project .bullet > li {padding-bottom: 0; font-weight: 700; color: #585858;}

@media (hover: hover) {
  .plug-tab-content .tab-nav button:not(.active):hover {border-color: var(--primary); color: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .plug-intro {padding-block: 100px 50px;}
  .plug-intro .container {flex-direction: column; padding: 0; gap: 20px;}
  .plug-intro .container .title {font-size: 38px; width: 500px;}
  .plug-intro .container .desc {font-size: 16px;}

  .plug-body {--indent: 0;}
  .plug-hero {padding-bottom: 0;}
  .plug-hero .bg {height: 400px;}
  .plug-hero .bg.type2 {background-attachment: local;}
  .plug-hero .bg.parallax {height: 500px;}
  .plug-hero .container .title {font-size: 100px;}
  .plug-hero .container .desc {font-size: 16px;}
  .plug-hero .container .desc strong {font-size: 22px;}

  .plug-tab-content {--indent: 180px; padding-block: 0 100px;}

  .plug-tab-content .tab-nav {padding-block: 120px;}
  .plug-tab-content .tab-nav button {height: 50px;}

  .plug-tab-content .tab-content {display: block; padding-block: 120px;}
  .plug-tab-content .tab-content .head {flex-direction: column; gap: 20px; margin-bottom: 20px;}
  .plug-tab-content .tab-content .head :where(.cont, .icons) {width: 100%!important;}
  .plug-tab-content .tab-content .head .cont .tit {font-size: 32px;}
  /* .plug-tab-content .tab-content .head .icons {border-radius: 20px; overflow: hidden; border-radius: 20px; background: #EFEFF3; padding: 10px 20px 20px 20px;} */
  .plug-tab-content .tab-content .head .icons > li span {font-size: 14px;}
  .plug-tab-content .tab-content .head .icons > li::after {height: 100%;}

  .plug-tab-content .tab-content .body .plug-carousal {padding: 90px 30px 30px 30px; border-radius: 20px;}
  .plug-tab-content .tab-content .body .plug-carousal::before, .plug-tab-content .tab-content .body .plug-carousal::after {display: none;}
  .plug-tab-content .tab-content .body .plug-carousal .swiper {width: 400px; height: 224px; margin-bottom: 55px;}
  .plug-tab-content .tab-content .body .plug-carousal .labtop {width: 510px;}
  .plug-tab-content .tab-content .body .plug-carousal:has(.kiosk) .swiper {width: 420px;}
  .plug-tab-content .tab-content .body .plug-carousal .kiosk {width: 455px; height: 270px; top: -17px;}
  .plug-tab-content .tab-content .body .plug-carousal nav button {width: 50px; height: 50px;}
  .plug-tab-content .tab-content .body .plug-carousal nav button svg {width: 20%;}
  .plug-tab-content .tab-content .body .plug-carousal nav button.prev svg {margin-right: 3px;}
  .plug-tab-content .tab-content .body .plug-carousal nav button.next svg {margin-left: 3px;}

  .plug-tab-content .tab-content .body .plug-carousal .major-project {font-size: 15px; flex-direction: column; gap: 15px;}
  .plug-tab-content .tab-content .body .plug-carousal .major-project .tit {width: 100%;}
  .plug-tab-content .tab-content .body .plug-carousal .major-project .bullet {grid-template-columns: repeat(2, 1fr); gap: 5px 10px;}
}
@media screen and (max-width: 767px) {
  .plug-intro {padding-block: 100px 30px;}
  .plug-intro .container {flex-direction: column; align-items: flex-start; gap: 15px;}
  .plug-intro .container .title {font-size: 28px; width: 100%;}

  .plug-hero {overflow: hidden;}
  .plug-hero .bg {height: 220px;}
  .plug-hero .bg.parallax {height: 220px;}
  .plug-hero .container .title {font-size: 48px; margin-top: -0.3em; mix-blend-mode: exclusion; color: #fff;}
  .plug-hero .container .desc {font-size: 15px;}
  .plug-hero .container .desc strong {font-size: 18px;}

  .plug-tab-content {padding-block: 30px 70px; display: block;}
  .plug-tab-content .tab-nav {display: none;}
  .plug-tab-content .tab-content {padding-block: 50px; width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px;}
  .plug-tab-content .tab-content:nth-child(odd) {background-color: #f9f8f7; margin-block: 50px;}
  .plug-tab-content .tab-content .head .cont .tit {font-size: 24px;}
  .plug-tab-content .tab-content .head .icons {padding: 10px 0;}
  .plug-tab-content .tab-content .head .icons > li {padding: 0 10px 10px 10px;}
  .plug-tab-content .tab-content .head .icons > li:not(:last-child)::after {height: 100%;}
  .plug-tab-content .tab-content .head .icons > li .icon {width: 70px; margin-top: -5px;}
  .plug-tab-content .tab-content .head .icons > li span {font-size: 13px; line-height: 1.5; margin-top: -5px;}
  /* .plug-tab-content .tab-content .body .plug-carousal .kiosk,
  .plug-tab-content .tab-content .body .plug-carousal .labtop {display: none;}
  .plug-tab-content .tab-content .body .plug-carousal {padding: 0; border-radius: 0; width: calc(100% + 30px); margin-left: -15px; background: none; border: none; overflow: visible;}
  .plug-tab-content .tab-content .body .plug-carousal::before, .plug-tab-content .tab-content .body .plug-carousal::after {display: none;}
  .plug-tab-content .tab-content .body .plug-carousal .swiper {margin-bottom: 20px; overflow: hidden; width: 100%!important; height: auto!important; background: #000;}
  .plug-tab-content .tab-content .body .plug-carousal .swiper-slide {opacity: 1!important; filter: none!important; border-radius: 0!important; height: 100%; background: #000;}
  .plug-tab-content .tab-content .body .plug-carousal .swiper-slide img {width: 100%;} */

  .plug-tab-content .tab-content .body .plug-carousal {padding: 50px 20px 20px 20px;}
  .plug-tab-content .tab-content .body .plug-carousal .labtop {width: 100%; top: -10%}
  .plug-tab-content .tab-content .body .plug-carousal .swiper {width: 100%!important; height: auto; aspect-ratio: 1 / 0.45; margin-bottom: 15%;}
  .plug-tab-content .tab-content .body .plug-carousal .swiper-slide img {width: 77%;}
  .plug-tab-content .tab-content .body .plug-carousal .kiosk {display: none; width: 100%; height: auto; aspect-ratio: 1 / 0.60; top: -9%;}
  .plug-tab-content .tab-content .body .plug-carousal:has(.kiosk) .swiper {aspect-ratio: auto; height: auto; margin-bottom: 5%; background: #000; padding: 10px; border-radius: 20px; border: 3px solid #fff; box-shadow: 0 0 10px rgb(0,0,0,.15); overflow: hidden;}
  .plug-tab-content .tab-content .body .plug-carousal:has(.kiosk) .swiper-slide img {width: 100%; height: auto; border-radius: 10px;}

  .plug-tab-content .tab-content .body .plug-carousal .major-project {font-size: 14px;}
  .plug-tab-content .tab-content .body .plug-carousal .major-project .bullet {grid-template-columns: repeat(1, 1fr);}
}


/* Our culture */
.oc-ideal-talent {padding-block: 140px; position: relative; margin-top: -75px;}
.oc-ideal-talent::before {position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: var(--dark-navy); content: '';}
.oc-ideal-talent .container {}
.oc-ideal-talent .hl-diagram {--size: 300px; justify-content: flex-end;}
.oc-ideal-talent .hl-diagram > li:nth-child(odd) .outer::after {background: linear-gradient(to top, #fff 10%, transparent)}
.oc-ideal-talent .hl-diagram > li .inner {border: 1px solid var(--gray-lighter);}
.oc-ideal-talent .hl-diagram > li .inner .cont .key {font-size: 48px; font-weight: 700; line-height: 1; color: var(--primary); margin-bottom: .2em;}
.oc-ideal-talent .hl-diagram > li .inner .cont .val {font-size: 15px;}

.oc-benefits {}
.oc-benefits .prime {display: grid; grid-template-columns: repeat(2, 1fr); gap: 90px 50px; padding-bottom: 80px; margin-bottom: 80px; border-bottom: 1px solid var(--gray-light);}
.oc-benefits .prime > li {display: flex; align-items: center; gap: 30px;}
.oc-benefits .prime > li .icon {width: 150px; border: 1px solid var(--gray-lighter); border-radius: 30px; box-shadow: 20px 20px 30px rgb(0,0,0,.15); flex-shrink: 0;}
.oc-benefits .prime > li .icon img {display: block; width: 100%;}
.oc-benefits .prime > li .cont {}
.oc-benefits .prime > li .cont .tit {display: block; font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 0.5em;}
.oc-benefits .prime > li .cont .desc {display: block; line-height: 1.8;}
.oc-benefits ul.etc {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-size: 20px;}
.oc-benefits ul.etc > li {font-weight: 700;}
.oc-benefits ul.etc > li::before {width: 6px; height: 6px; background: var(--gray);}

.oc-team {}
.oc-team .team-ls {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.oc-team .team-ls:has(.board-empty) {grid-template-columns: repeat(1, 1fr);}
.oc-team .team-ls > li {}
.oc-team .team-ls > li > a {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: #fff; border-radius: 30px; padding: 55px 38px 38px 38px; height: 287px; transition: box-shadow .5s;}
.oc-team .team-ls > li > a .tit {font-size: 40px; font-weight: 700; color: #000;}
.oc-team .team-ls > li > a .tit .desc {font-size: 0.45em; color: var(--gray-darker); font-weight: 400; display: block; line-height: 1.6; margin-bottom: 0.4em;}
.oc-team .team-ls > li > a .more {display: inline-block; font-weight: 500; padding-bottom: 0.4em; line-height: 1; border-bottom: 1px solid var(--gray-dark); color: var(--gray-dark);}

/* #modal-interview {display: flex; opacity: 1;} */
#modal-interview .container .head {}
#modal-interview .container .head .desc {color: var(--gray-dark); margin-bottom: 0.3em; line-height: 1.5;}
#modal-interview .container .head .title {margin-bottom: 0;}
#modal-interview .container .content {font-size: 16px;}

@media (hover: hover) {
  .oc-team .team-ls > li:hover {position: relative; z-index: 1;}
  .oc-team .team-ls > li:hover > a {box-shadow: 20px 20px 30px rgb(0,0,0,.15);}
  .oc-team .team-ls > li:hover > a .more {color: var(--primary); border-color: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .oc-ideal-talent {padding-block: 110px; margin-top: -55px;}
  .oc-ideal-talent .hl-diagram {--size: 180px; justify-content: center;}
  .oc-ideal-talent .hl-diagram > li {padding: 10px;}
  .oc-ideal-talent .hl-diagram > li .outer::before {border-width: 3px;}
  .oc-ideal-talent .hl-diagram > li .inner .gear {padding: 10px;}
  .oc-ideal-talent .hl-diagram > li .inner .cont .key {font-size: 28px; margin-bottom: 0.5em;}

  .oc-benefits .prime {gap: 40px; grid-template-columns: repeat(1, 1fr); padding-bottom: 60px; margin-bottom: 60px;}
  .oc-benefits .prime > li {}
  .oc-benefits .prime > li .icon {width: 100px; border-radius: 20px; box-shadow: 10px 10px 20px rgb(0,0,0,.05);}
  .oc-benefits .prime > li .cont .tit {font-size: 20px;}
  .oc-benefits .prime > li .cont .desc {font-size: 15px;}

  .oc-benefits ul.etc {grid-template-columns: repeat(2, 1fr); font-size: 16px;}

  .oc-team .team-ls > li > a {height: auto; padding: 30px; border-radius: 20px;}
  .oc-team .team-ls > li > a .tit {font-size: 24px; margin-bottom: 1.5em;}
  .oc-team .team-ls > li > a .tit .desc {font-size: 0.6em;}

  #modal-interview .container .content {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .oc-ideal-talent {padding-block: 50px 0; margin-top: 0;}
  .oc-ideal-talent::before {display: none;}
  .oc-ideal-talent .hl-diagram {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;}
  .oc-ideal-talent .hl-diagram > li {transform: none!important; padding: 0; width: 100%;}
  .oc-ideal-talent .hl-diagram > li .outer::before {display: none;}
  .oc-ideal-talent .hl-diagram > li .outer::after {display: none;}
  .oc-ideal-talent .hl-diagram > li .inner {border-radius: 10px; background: #fff;}
  .oc-ideal-talent .hl-diagram > li .inner::before {display: none;}
  .oc-ideal-talent .hl-diagram > li .inner .cont .key {font-size: 24px;}
  .oc-ideal-talent .hl-diagram > li .inner .gear img {width: auto; height: 100%;}

  .oc-benefits .prime > li {gap: 20px; align-items: flex-start;}
  .oc-benefits .prime > li .icon {width: 70px; border-radius: 10px;}
  .oc-benefits .prime > li .cont .tit {font-size: 16px;}
  .oc-benefits .prime > li .cont .desc {font-size: 14px;}

  .oc-benefits ul.etc {font-size: 15px; grid-template-columns: repeat(1, 1fr);}

  .oc-team .team-ls {grid-template-columns: repeat(1, 1fr);}
  .oc-team .team-ls > li > a {border-radius: 15px; padding: 25px 15px 15px 25px;}
  .oc-team .team-ls > li > a .tit {font-size: 20px;}
  .oc-team .team-ls > li > a .tit .desc {font-size: 0.7em;}
  .oc-team .team-ls > li > a .more {font-size: 14px; width: 100%; text-align: right; padding-bottom: 10px; padding-right: 15px; padding-top: 10px; border-color: var(--gray-light); border-right: 1px solid var(--gray-light); border-radius: 0 0 5px 0;}

  #modal-interview .container .content {font-size: 14px;}
}


/* Recruitment */
.rc-process {padding-block: 110px;}
.rc-process .process {--size: 260px; display: flex; gap: 39px;}
.rc-process .process > li {position: relative; width: var(--size); height: var(--size); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #18234C; color: #fff;}
.rc-process .process > li .num {color: var(--secondary); margin-bottom: 27px; line-height: 1; font-size: 20px;}
.rc-process .process > li .icon {margin-bottom: 20px;}
.rc-process .process > li .key {font-size: 18px; line-height: 1; margin-bottom: 15px;}
.rc-process .process > li .arw {position: absolute; top: 50%; left: 100%; transform: translate(0, -50%);}
.rc-process .process > li:last-child .arw {display: none;}

.rc-notice {margin-top: 80px;}
.rc-notice-cont {margin-bottom: 40px;}
ul.rc-notice-cont.bullet > li {--fs: 24px; --lh: 1.8; line-height: 1.8;}
ul.rc-notice-cont.bullet > li::before {background: var(--gray); top: 1.3em;}
ul.rc-notice-cont.bullet > li .wrap { display: flex; gap: 30px; font-size: var(--fs);}
ul.rc-notice-cont.bullet > li .wrap .key {font-size: 0.67em; line-height: calc(var(--fs) * var(--lh)); flex-shrink: 0;}
ul.rc-notice-cont.bullet > li .wrap .val {font-weight: 700; color: #000;}
.rc-notice .notice {color: #767676;}
.rc-notice .notice .bullet > li {padding-bottom: 0.7em;}
.rc-notice .notice nav {display: flex; gap: 20px; justify-content: flex-end; padding-top: 20px;}
@media screen and (max-width: 1399px) {
  .rc-process {padding-block: 90px;}
  .rc-process .process {--size: 165px; gap: 20px; margin-top: 20px;}
  .rc-process .process > li .arw {width: 20px;}
  .rc-process .process > li .num {font-size: 16px; margin-bottom: 0;}
  .rc-process .process > li .key {font-size: 16px;}
  .rc-process .process > li .icon {margin-block: 5px 15px; width: 80px;}

  .rc-notice .head {display: none;}
  .rc-notice-cont {margin-bottom: 20px;}
  ul.rc-notice-cont.bullet > li {--fs: 20px;}
  ul.rc-notice-cont.bullet > li::before {top: 1em;}
  ul.rc-notice-cont.bullet > li .wrap {gap: 20px;}
  .rc-notice .notice > .bullet {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .rc-process {padding-block: 70px;}
  .rc-process .sp-title-3 {text-align: center;}
  .rc-process .process {flex-wrap: wrap; justify-content: center; gap: 10px; --size: 155px;}
  .rc-process .process > li {border-radius: 10px;}
  .rc-process .process > li .arw {display: none;}
  .rc-process .process > li .icon {width: 60px;}
  .rc-process .process > li .num {font-size: 14px; margin-bottom: .6em;}
  .rc-process .process > li .key {font-size: 14px;}

  .rc-notice {margin-top: 50px;}
  .rc-notice-cont {margin-bottom: 30px;}
  ul.rc-notice-cont.bullet > li {--fs: 15px; padding-left: 0;}
  ul.rc-notice-cont.bullet > li::before {display: none;}
  ul.rc-notice-cont.bullet > li .wrap {flex-direction: column; gap: 0;}
  ul.rc-notice-cont.bullet > li .wrap .key {font-size: 1em;}
  .rc-notice .notice > .bullet {font-size: 14px;}

  .rc-notice .notice nav {padding-top: 50px; gap: 10px; flex-direction: column;}
  .rc-notice .notice nav .round-button {justify-content: space-between;}
}




/* Forms */
.plx-form {--inp-height: 48px; --inp-gray1: #bfbfbf; --inp-gray2: #e8e8e8; --inp-gray3: #fcfcfc; --invalid-bd: #e31212; --invalid-bg: #fef6f6; --error: #e31212;}
.plx-form-notice {padding: 30px; background: var(--inp-gray3); border: 1px solid var(--inp-gray2); border-radius: 15px; margin-bottom: 40px; color: var(--gray1);}
.plx-form-foot {padding-top: 50px;}

.plx-form-table {width: 100%; font-size: 18px; table-layout: fixed;}
.plx-form-table colgroup {}
.plx-form-table colgroup .col--th {width: 154px;}
/* .plx-form-table colgroup .col--td {width: calc(100% - 154px);} */
.plx-form-table {}
.plx-form-table tr {}
.plx-form-table tr :where(th, td) {padding-block: 17px; vertical-align: top;}
.plx-form-table tr th {padding-right: 17px;}
.plx-form-table tr th .label {font-size: 19px; font-weight: 500; min-height: var(--inp-height); line-height: 1.5; display: flex; align-items: center; gap: .3em;}
.plx-form-table tr th span.req {color: var(--primary);}
.plx-form-table tr td {}

.plx-inp {width: 100%;}
.plx-inp :where(input, textarea) {all: unset; font: inherit; border: none;}
.plx-inp input::placeholder, .plx-inp textarea::placeholder {opacity: .5;}
.plx-inp .inp-box {display: block; width: 100%; height: var(--inp-height); border: 1px solid var(--inp-gray1); background: var(--inp-gray3); border-radius: 5px; overflow: hidden;}
.plx-inp .inp-box textarea,
.plx-inp .inp-box .inp {display: block; width: 100%; height: 100%; font-size: 18px; padding: 0 1em; color: var(--gray);}
.plx-inp .inp-box .inp--date {all: initial; display: flex; align-items: center; height: 100%; padding: 0 1em; font-size: 18px; color: var(--gray);}
.plx-inp .inp-box:has(textarea) {height: 300px;}
.plx-inp .inp-box textarea {padding-block: 1em;}
.plx-inp .inp-error {display: block; padding-top: 1em; padding-left: 0em; color: var(--error); font-size: 16px;}
.plx-inp .inp-error:empty {display: none;}
.plx-inp .inp-notice {display: block; text-align: right; color: var(--inp-gray1);}

.plx-inp .radio-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px 30px;}
.plx-inp .radio-group .radio {position: relative; height: var(--inp-height);}
.plx-inp .radio-group .radio label {display: flex; align-items: center; gap: .8em; height: 100%; cursor: pointer;}
.plx-inp .radio-group .radio label input[type="radio"] {position: absolute; top: 50%; left: 0; z-index: -1; transform: translate(0, -50%); width: 0; height: 0;}
.plx-inp .radio-group .radio label .chck {width: 1.78em; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--inp-gray1); padding: 5px; background: var(--inp-gray3); flex-shrink: 0;}
.plx-inp .radio-group .radio label .chck::before {content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--primary); opacity: 0;}
.plx-inp .radio-group .radio label input[type="radio"]:checked ~ .chck {border-color: var(--primary); background: #fff;}
.plx-inp .radio-group .radio label input[type="radio"]:checked ~ .chck::before {opacity: 1;}
.plx-inp .radio-group .radio label .inp-box {width: 273px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.plx-inp .radio-group .radio label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.plx-inp .radio-group .radio label .label {color: var(--gray); flex-shrink: 0;}

.plx-checkbox-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px 30px;}
.plx-checkbox-group.vertical {flex-direction: column; align-items: flex-start;}
.plx-checkbox {position: relative; height: auto; }
.plx-checkbox label {display: flex; align-items: flex-start; gap: .8em; height: 100%; cursor: pointer;}
.plx-checkbox label input {position: absolute; top: 50%; left: 0; z-index: -1; transform: translate(0, -50%); width: 0; height: 0;}
.plx-checkbox label .chck {width: 1.5em; height: 1.5em; border-radius: 5px; border: 1px solid var(--inp-gray1); padding: 5px; background: var(--inp-gray3); flex-shrink: 0;}
.plx-checkbox label .chck::before {content: ''; display: block; opacity: 0; width: 100%; height: 60%; border-left: 3px solid var(--primary); border-bottom: 3px solid var(--primary); transform: translate(0, 15%) rotate(-45deg); box-sizing: border-box;}
.plx-checkbox label input:checked ~ .chck {border-color: var(--primary); background: #fff;}
.plx-checkbox label input:checked ~ .chck::before {opacity: 1;}
.plx-checkbox label .inp-box {width: 300px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.plx-checkbox label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.plx-checkbox label .label {color: var(--gray); flex-shrink: 1; line-height: 1.5;}

.plx-file {--gap: 10px; display: flex; flex-direction: column; gap: var(--gap); width: 100%;}
.plx-file .file-row {width: 100%;}
.plx-file .inp-error {padding-top: var(--gap);}
.plx-file .file-box {position: relative; display: flex; gap: var(--gap); align-items: center; height: var(--inp-height); width: 100%;}
.plx-file .file-box input[type="file"] {position: absolute; top: 50%; left: 0%; z-index: -1; width: 0; height: 0; transform: translate(0, -50%);}
.plx-file .file-box label {display: flex; gap: var(--gap); width: 100%; height: 100%;}
.plx-file .file-box label .label {display: block; width: 100%; height: 100%; border: 1px solid var(--inp-gray2); background: var(--inp-gray3); border-radius: 5px; padding: 0 1em; line-height: var(--inp-height); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all;}
.plx-file .file-box label .label:empty::before {content: attr(data-placeholder); opacity: .4;}
.plx-file .file-box button {display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; font-family: inherit; padding: 5px 15px; background: #ccc; color: #fff; border-radius: 5px; border: 1px solid var(--inp-gray2); flex-shrink: 0;}
.plx-file .file-box label .btn-find {width: 150px;}
.plx-file .file-box label .btn-cancel {width: auto; aspect-ratio: 1 / 1;}

.plx-inp--invalid .inp-box {border-color: var(--invalid-bd); background: var(--invalid-bg);}
.plx-inp--invalid.plx-checkbox label input:not(:checked) ~ .chck {border-color: var(--invalid-bd); background: var(--invalid-bg);}
.plx-inp--invalid.plx-checkbox label input:not(:checked) ~ .label {color: var(--error);}

@media (hover: hover) {
  .search-bar form .sch-btn:hover {background: var(--primary);}
  .plx-file .file-box button:hover {background: var(--gray-lighter);}
}
@media screen and (max-width: 1399px) {
  .search-bar {--size: 40px;}

  .plx-form {--inp-height: 42px;}
  .plx-form-notice {padding: 25px;}

  .plx-form-table {font-size: 17px;}
  .plx-form-table tr th .label {font-size: 17px;}
  .plx-inp .inp-box textarea, .plx-inp .inp-box .inp {font-size: 16px;}
  .plx-inp .inp-error {font-size: 14px;}
  .plx-file .file-box label .btn-find {width: 100px;}
  .plx-inp .inp-notice {font-size: 15px;}
  .plx-checkbox-group {gap: 10px 25px;}
}
@media screen and (max-width: 767px) {
  .plx-form {--inp-height: 38px;}
  .plx-form-notice {padding: 20px;}
  .plx-form-table {font-size: 15px;}
  .plx-form-table colgroup {display: none;}
  .plx-form-table {display: block;}
  .plx-form-table :where(tbody, tfoot, thead, tr, th, td) {display: block;}
  .plx-form-table tr {padding-block: 10px;}
  .plx-form-table tr th {padding: 0 0 10px;}
  .plx-form-table tr th .label {min-height: 0; font-size: 16px;}
  .plx-form-table tr td {padding: 10px 0; padding-top: 0;}
  .plx-form-table tfoot .wrap .flex.jc--fe {justify-content: center!important;}
  .plx-inp .inp-box textarea, .plx-inp .inp-box .inp {font-size: 14px;}

  .plx-inp .radio-group {flex-direction: column;}
  .plx-inp .radio-group .radio label .chck {width: 1.4em; height: 1.4em; padding: 3px;}
  .plx-checkbox-group {gap: 7px 20px;}
  .plx-checkbox label {font-size: 13px;}
  .plx-checkbox label .chck {width: 1.4em; height: 1.4em; padding: 3px;}
}




/* Boards */
.paging {--size: 40px;}
.paging .paging__end, .paging .paging__start {display: none;}
.paging .paging__controller {width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid #BDBDBD;}
.paging .paging__controller.disabled {opacity: 1;}
.paging .paging__controller svg.left {transform: translate(-15%);}
.paging .paging__controller svg.right {transform: translate(15%);}
.paging .paging__controller:not(.disabled) {border-color: var(--primary); background: var(--primary); box-shadow: 10px 10px 20px rgb(0,0,0,.15);}
.paging .paging__controller:not(.disabled) path {stroke: #fff;}
.paging .paging__num {position: relative; font-size: 20px; font-weight: 500; color: var(--gray);}
.paging .paging__num.active {color: var(--primary); pointer-events: none;}
.paging .paging__num.active::after {position: absolute; bottom: 0; left: 50%; transform: translate(-50%); width: 20px; height: 1px; background: var(--primary); content: '';}

.board-view {--border: 2px solid #DDDDDD; word-break: normal;}
.board-view-row {padding-block: 60px; border-bottom: var(--border);}
.board-view-head {border-top: var(--border); text-align: center; border-bottom: none;}
.board-view-head .title {font-size: 40px; font-weight: 700; color: #000; margin-bottom: 0.5em;}
.board-view-head .info {display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: var(--gray); gap: 1em;}
.board-view-head .info i {height: .7em; width: 1px; background: #ddd; flex-shrink: 0;}
.board-view-head .info .ca {color: var(--primary);}
.board-view-head .info .hash::before {content: '# ';}
.board-view-body .content {border-bottom: none; border: 1px solid #ddd; background: #f7f7f7; padding: 80px; font-size: 20px; min-height: 500px;}
.board-view-body .content .divider {width: 100%; height: 1px; margin: 50px auto; background: var(--gray-light);}
.board-view-body .content .newsletter-iframe {display: block; margin: 0 auto; width: 720px; border-radius: 20px; border: 1px solid #ebebeb; max-width: 100%; height: 80svh;}
.board-view-subscribe {word-break: keep-all;}
.board-view-paging {display: flex; justify-content: space-between; align-items: center; gap: 20px 50px; padding-block: 30px;}
.board-view-paging .btn--list {flex-shrink: 0; width: 200px; justify-content: center; font-size: 22px; height: 80px;}
.board-view-paging .btn--list::after {display: none;}
.board-view-paging .btn--paging {width: 250px;}
.board-view-paging .btn--paging .label {display: flex; align-items: center; color: var(--primary); gap: .7em; font-size: 18px; font-weight: 500; margin-bottom: 0.3em;}
.board-view-paging .btn--paging .label .arrow {border-color: var(--primary); width: .5em; height: .5em; margin-top: -0.15em;}
.board-view-paging .btn--paging .sbj {font-size: 16px; font-weight: 500; color: #000;}
.board-view-paging .btn--paging.disabled {pointer-events: none;}
.board-view-paging .btn--paging.disabled .sbj {color: var(--gray);}
.board-view-paging .btn--paging.next {text-align: right;}
.board-view-paging .btn--paging.next .label {justify-content: flex-end;}
.board-view-paging .btn--paging.next .label .arrow {order: 2;}
.board-view-paging .btn--paging.next .label span {order: 1;}

.board-ls-thumb-h {border-top: 2px solid #EBEBEB;}
.board-ls-thumb-h > li {border-bottom: 2px solid #EBEBEB}
.board-ls-thumb-h > li > a {display: flex; align-items: center; padding: 50px 45px; gap: 45px; transition: opacity .5s;}
.board-ls-thumb-h > li > a .thumb {width: 384px; aspect-ratio: 1 / 0.625; border-radius: 10px; background-color: #EBEBEB; font-size: 0; color: transparent; object-fit: cover; flex-shrink: 0; border: 1px solid #ebebeb;}
.board-ls-thumb-h > li > a .cont {display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-right: 100px;}
.board-ls-thumb-h > li > a .cont .label {font-size: 18px; font-weight: 700; color: var(--primary); line-height: 1.33;}
.board-ls-thumb-h > li > a .cont .tit {font-size: 30px; font-weight: 700; color: #000; margin-bottom: 0.3em;}
.board-ls-thumb-h > li > a .cont .desc {height: 3em; margin-bottom: 3em;}
.board-ls-thumb-h > li > a .cont .date {font-weight: 500; color: var(--gray); margin-top: auto;}
.board-ls-thumb-h > li > a .round-button {flex-shrink: 0;}

.board-ls-thumb-v:has(.board-empty) {grid-template-columns: repeat(1, 1fr)!important;}
.board-ls-thumb-v {display: grid; grid-template-columns: repeat(4, 1fr); gap: 70px 20px;}
.board-ls-thumb-v > li > a {display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid #EBEBEB; border-radius: 10px; transition: box-shadow .5s;}
.board-ls-thumb-v > li > a .thumb {width: 100%; aspect-ratio: 1 / 0.96; border-radius: 0; background-color: #EBEBEB; font-size: 0; color: transparent; object-fit: cover; flex-shrink: 0; margin-bottom: 44px; border: 1px solid #ebebeb;}
.board-ls-thumb-v > li > a .cont {padding-inline: 5px;}
.board-ls-thumb-v > li > a .cont .label {color: var(--primary); font-size: 18px; font-weight: 700; line-height: 1.33;}
.board-ls-thumb-v > li > a .cont .tit {font-size: 28px; font-weight: 700; color: #000;}
.board-ls-thumb-v > li > a .hash {margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; padding-inline: 5px;}
.board-ls-thumb-v > li > a .hash span {display: inline-block; color: #ddd; font-size: 16px; font-weight: 500; line-height: 1;}
.board-ls-thumb-v > li > a .hash span::before {content: '# ';}


@media (hover: hover) {
  .paging .paging__btn:not(.disabled):hover {opacity: .5;}
  .board-view-paging .btn--paging:hover {opacity: .6;}
  .board-ls-thumb-h > li > a:hover {opacity: .5;}
  .board-ls-thumb-v > li > a:hover {box-shadow: 20px 20px 30px rgb(0,0,0,.15);}
}
@media screen and (max-width: 1399px) {
  .board-view-row {padding-block: 40px;}
  .board-view-head .title {font-size: 22px; margin-bottom: 0.8em;}
  .board-view-head .info {font-size: 16px;}
  .board-view-body .content {padding: 30px; font-size: 16px; min-height: 400px;}
  .board-view-body .content .divider {margin: 40px auto;}
  .board-view-paging .btn--list {height: 50px; font-size: 16px; width: 150px;}
  .board-view-paging .btn--paging {width: 150px;}
  .board-view-paging .btn--paging .label {font-size: 15px;}
  .board-view-paging .btn--paging .sbj {font-size: 15px;}

  .board-ls-thumb-h > li > a {padding: 30px 0; align-items: flex-start; gap: 30px;}
  .board-ls-thumb-h > li > a .thumb {width: 250px;}
  .board-ls-thumb-h > li > a .cont {padding-right: 0;}
  .board-ls-thumb-h > li > a .cont .label {font-size: 16px;}
  .board-ls-thumb-h > li > a .cont .tit {font-size: 24px;}
  .board-ls-thumb-h > li > a .cont .desc {font-size: 15px; margin-bottom: 1em;}
  .board-ls-thumb-h > li > a .cont .date {font-size: 15px;}
  .board-ls-thumb-h > li > a .round-button {display: none;}

  .board-ls-thumb-v {grid-template-columns: repeat(2, 1fr);}
  .board-ls-thumb-v > li > a {padding: 15px;}
  .board-ls-thumb-v > li > a .thumb {margin-bottom: 30px;}
  .board-ls-thumb-v > li > a .cont .label {font-size: 16px;}
  .board-ls-thumb-v > li > a .cont .tit {font-size: 24px;}
  .board-ls-thumb-v > li > a .hash span {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .board-view-row {padding-block: 30px;}
  .board-view-head {text-align: left; border-bottom: var(--border); padding-bottom: 15px;}
  .board-view-head .title {font-size: 18px;}
  .board-view-head .info {justify-content: flex-start; font-size: 14px; gap: .5em;}
  .board-view-body .content {background: none; border: none; padding-inline: 0; border-bottom: var(--border); font-size: 15px; min-height: 300px;}
  .board-view-body .content .divider {margin: 40px auto 30px auto;}
  .board-view-subscribe {background: #f4f3f2; width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px;}
  .board-view-paging {flex-direction: column; gap: 0; padding-top: 10px;}
  .board-view-paging .btn--paging {width: 100%; max-width: 100%; display: flex; align-items: center; gap: 1em; padding-block: 15px; text-align: left!important;}
  .board-view-paging .btn--paging.prev {border-bottom: 1px solid var(--gray-light);}
  .board-view-paging .btn--paging .label {flex-shrink: 0; margin-bottom: 0; font-size: 14px;}
  .board-view-paging .btn--paging .label span {order: 1!important;}
  .board-view-paging .btn--paging .label .arrow {order: 0!important; transform: rotate(-135deg)!important;}
  .board-view-paging .btn--paging .sbj {font-size: 14px;}
  .board-view-paging .btn--list {order: 3; margin-top: 25px;}

  .board-ls-thumb-h {display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;}
  .board-ls-thumb-h > li > a {flex-direction: column;}
  .board-ls-thumb-h > li > a .thumb {width: 100%;}
  .board-ls-thumb-h > li > a .cont .label {font-size: 14px;}
  .board-ls-thumb-h > li > a .cont .tit {font-size: 18px;}
  .board-ls-thumb-h > li > a .cont .desc {font-size: 14px;}
  .board-ls-thumb-h > li > a .cont .date {font-size: 13px;}

  .board-ls-thumb-v {gap: 50px 15px;}
  .board-ls-thumb-v > li > a {padding: 0; border: none; box-shadow: none!important;}
  .board-ls-thumb-v > li > a .thumb {margin-bottom: 20px;}
  .board-ls-thumb-v > li > a .cont .label {font-size: 15px;}
  .board-ls-thumb-v > li > a .cont .tit {font-size: 18px;}
  .board-ls-thumb-v > li > a .hash {margin-top: 10px; padding-top: 7px;}
  .board-ls-thumb-v > li > a .hash span {font-size: 14px; line-height: 1.3;}
}
@media screen and (max-width: 499px) {
  .board-ls-thumb-v,
  .board-ls-thumb-h {grid-template-columns: repeat(1, 1fr);}
}



/* Inquiry */
.inq-container {padding: 100px 130px; border-radius: 20px; background: #F7F7F7}
.inq-container:has(.newsletter-subscribe-form) {padding-inline: 230px;}
@media screen and (max-width: 1399px) {
  .inq-container {padding: 50px 30px!important;}
}
@media screen and (max-width: 767px) {
  .inq-container {padding: 70px 15px!important; width: calc(100% + 30px); margin-left: -15px;}
}

/* Newsletter subscribe form */
.newsletter-subscribe-form {display: flex; gap: 30px 50px;}
.newsletter-subscribe-form .head {width: 100%;}
.newsletter-subscribe-form .head .tit {font-size: 30px; font-weight: 400; color: #000; line-height: 1.5;}
.newsletter-subscribe-form .cont {width: 918px; flex-shrink: 0;}
.newsletter-subscribe-form .cont .plx-form-table tbody tr:first-child :where(th, td) {padding-top: 0;}
.newsletter-subscribe-form .cont .plx-form-table tfoot tr:last-child :where(th, td) {padding-bottom: 0;}
.newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap {display: flex; align-items: center; gap: 30px; justify-content: space-between;}
.newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap .round-button {flex-shrink: 0;}
.inq-container .newsletter-subscribe-form .head {display: none;}
.inq-container .newsletter-subscribe-form .cont {width: 100%;}
@media screen and (max-width: 1399px) {
  .newsletter-subscribe-form {flex-direction: column;}
  .newsletter-subscribe-form .head .tit {font-size: 24px;}
  .newsletter-subscribe-form .cont {width: 100%;}
  .newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap {flex-direction: column; align-items: flex-start;}
  .newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap .round-button {margin-left: auto;}
}
@media screen and (max-width: 767px) {
  .newsletter-subscribe-form .head .tit {font-size: 18px;}
  .newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap {gap: 50px;}
  .newsletter-subscribe-form .cont .plx-form-table tfoot td .wrap .round-button {margin: 0 auto;}
}



/* Location */
.loca-content {}
.loca-content-head {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #EBEBEB; padding-block: 30px; gap: 20px 50px;}
.loca-content-head .title {font-size: 60px; font-weight: 500; line-height: 1; color: #000;}
.loca-content-head nav {display: flex; gap: 5px;}
.loca-content-head nav a {--hover-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 15px; line-height: 1; border-radius: 100px; background: var(--gray); color: #ddd; min-width: 123px; font-size: 18px;}
.loca-content-head nav a.google {--theme: #006EFF;}
.loca-content-head nav a.naver {--theme: #4BBA58;}
.loca-content-head nav a.kakao {--theme: #F6DB35; --hover-color: #000;}
.loca-content-info {padding-block: 30px 100px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 50px;}
.loca-content-info .item {display: flex;}
.loca-content-info .item::before {background: var(--primary)!important;}
.loca-content-info .item > .key {color: var(--primary); font-size: 18px; width: 90px; flex-shrink: 0; text-transform: uppercase;}
.loca-content-info .item > .val {font-size: 20px; font-weight: 700;}
.loca-content-info .item:has(.val ul) {grid-row: span 3;}
.loca-content-info .item > .val ul li {display: flex;}
.loca-content-info .item > .val ul li:not(:last-child) {margin-bottom: 0.8em;}
.loca-content-info .item > .val ul li .key {width: 120px; flex-shrink: 0;}
.loca-content-map {height: 600px; border-radius: 30px; border: 1px solid #ddd;}
@media (hover: hover) {
  .loca-content-head nav a:hover {background: var(--theme); color: var(--hover-color); font-weight: 700;}
}
@media screen and (max-width: 1399px) {
  .loca-content-head .title {font-size: 36px;}
  .loca-content-head nav a {padding: 13px 15px; font-size: 15px; min-width: 100px;}
  .loca-content-info {grid-template-columns: repeat(1, 1fr); padding-block: 30px; gap: 0;}
  .loca-content-info .item > .key,
  .loca-content-info .item > .val {font-size: 16px;}
  .loca-content-info .item:has(.val ul) {order: 1; margin-top: 7px;}
  .loca-content-map {height: 500px; border-radius: 20px;}
}
@media screen and (max-width: 767px) {
  .loca-content-head {padding-block: 20px;}
  .loca-content-head .title {font-size: 24px;}
  .loca-content-head nav a {background: var(--theme); color: var(--hover-color); font-weight: 600;}
  .loca-content-info .item > .key,
  .loca-content-info .item > .val {font-size: 15px;}
  .loca-content-info .item > .key {width: 70px;}
  .loca-content-info .item > .val ul li .key {width: 90px;}
}





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