.main-sub .inner { max-width: 1400px;}
.main-sub .desc { color: #333;}
.rolling-container { width: 100%; overflow: hidden;}
.rolling-wrap { display: flex;  width: max-content;}
.rolling-wrap span { font-size: 12rem; font-weight: 800; color: #e4e4e4; margin-right: 40px;}
.rolling-wrap img { display: block; }

/* sub-visual */
.sub-visual { height: 200vh; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub-visual .sticky { position: sticky; height: 100vh; top: 0; padding-top: 280px;}
.sub-visual h1.heading { font-size: 6rem; text-align: center; margin-bottom: 60px;}
.sub-visual h2.heading { font-size: 8rem; color: #fff;}
.sub-visual .list { }
.sub-visual .list .swiper { width: max-content; max-width: 90%; margin: 0 auto; padding: 10px; background: #F7F7F7; border-radius: 80px;}
.sub-visual .list .swiper-slide { width: auto; text-align: center;}
.sub-visual .list .swiper-slide a { border-radius: 35px; display: block; padding: 9px 50px; font-weight: 600; white-space: nowrap;}
.sub-visual .list .swiper-slide a.active { background: #164194; color: #fff;}
.sub-visual .visual-scale { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: flex-end; padding-bottom: 140px; z-index: 1; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sub-visual.no-bg { height: auto; }
.sub-visual.no-bg .sticky { height: 100%; }
.sub-visual.vs-about .visual-scale { background-image: url(/images/sub/visual-about.jpg);}
.sub-visual.vs-recruit .visual-scale { background-image: url(/images/sub/visual-recruit.jpg);}
.sub-visual.vs-business1 .visual-scale { background-image: url(/images/sub/visual-business1.jpg);}
.sub-visual.vs-business2 .visual-scale { background-image: url(/images/sub/visual-business2.jpg);}
.sub-visual.vs-business3 .visual-scale { background-image: url(/images/sub/visual-business3.jpg);}
.sub-visual.vs-business4 .visual-scale { background-image: url(/images/sub/visual-business4.jpg);}
.sub-visual.vs-business5 .visual-scale { background-image: url(/images/sub/visual-business5.jpg);}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .sub-visual h2.heading { font-size: 5rem;}
  .sub-visual .sticky { padding-top: 180px;}
  .sub-visual .list .swiper-slide a { padding: 8px 30px;}
}

@media screen and (max-width: 767px) {
  .rolling-wrap span { margin-right: 20px;}
  .sub-visual h1.heading { font-size: 2.5rem; margin-bottom: 20px;}
  .sub-visual h2.heading { font-size: 2.5rem;}
  .sub-visual .list .swiper-slide a { padding: 5px 20px;}
}

.sub-header { padding: 160px 0;}
.sub-visual .visual-scale { padding-bottom: 80px;}
.sub-header .label { color: var(--clr-primary); font-weight: 700; display: block; margin-bottom: 20px;}
.sub-header .heading { font-weight: 700; font-size: 6rem; line-height: 1.2;}
.sub-header .desc { margin-top: 40px; font-size: 2.4rem;}

/* about */
.about h3.sbj { font-size: 3.6rem; font-weight: 700; margin-bottom: 40px;}
.about-intro { padding: 160px 0;}
.about-intro .img-box { margin-bottom: 80px;}
.about-intro .intro-text { margin-left: auto; width: max-content; max-width: 100%;}
.about-intro .intro-text .desc { font-size: 2rem; margin-bottom: 40px;}
.about-intro .intro-text dl .list-item { display: flex; padding: 20px 0; font-size: 1.6rem;}
.about-intro .intro-text dl .list-item + .list-item { border-top: 1px solid #E5E5E5;}
.about-intro .intro-text dl .list-item dt { flex: 0 0 133px; font-weight: 700;}
.about-intro .intro-text dl .list-item dd { flex: 1 0 0; color: #666;}

.about-message { background: #F7F7F7; padding-bottom: 160px;}
.about-message .img-box { margin-bottom: 120px; }
.about-message .message-text { margin-left: auto; width: max-content;}
.about-message .rolling-container { margin-bottom: 100px;}
.about-message .text { margin-bottom: 40px;}
.about-message .sign { display: flex; gap: 16px; align-items: center; justify-content: flex-end;}
.about-message .sign dl { display: flex; align-items: center; gap: 10px; font-size: 2.4rem;}
.about-message .sign dl dt { font-weight: 700;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .about-message .message-text { width: 100%;}
}

@media screen and (max-width: 767px) {
  .sub-header { padding: 80px 0;}
  .sub-header .label { margin-bottom: 10px;}
  .sub-header .desc { margin-top: 20px; font-size: 1.6rem;}
  .about-intro { padding: 80px 0;}
  .about-intro .img-box { margin-bottom: 40px;}
  .about h3.sbj { font-size: 2.2rem; margin-bottom: 20px;}
  .about-intro .intro-text .desc { font-size: 1.6rem; margin-bottom: 20px;}
  .about-intro .intro-text dl .list-item { padding: 15px 0;}
  .about-intro .intro-text dl .list-item dt { flex: 0 0 100px;}
  html[lang='en'] .about-intro .intro-text dl .list-item dt { flex: 0 0 120px;}
  .about-message .img-box { margin-bottom: 60px;}
  .about-message .rolling-container { margin-bottom: 50px;}
  .about-message .sign dl { font-size: 1.6rem;}
  .about-message .sign img { width: 70px;}
  .rolling-wrap span { font-size: 6rem;}
  .about-message { padding-bottom: 80px;}
}

.history { padding: var(--sub-padding); }
.history .inner { display: flex;}
.history .inner > div { flex: 1;}
.history .history-intro { position: relative;}
.history .sticky { position: sticky; top: 150px; min-height: 300px;}
.history .intro-area { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .3s;}
.history .intro-area.active { opacity: 1; visibility: visible;}
.history .intro-area .label { font-weight: 700; color: var(--clr-primary); margin-bottom: 20px; display: block;}
.history .intro-area .heading { font-size: 12rem; font-weight: 700; margin-bottom: 40px; line-height: 1;}
.history .intro-area .desc { font-size: 3.2rem;}
.history .intro-area .desc span { font-weight: 700; vertical-align: baseline;}
.history .timeline-area { padding-left: 52px; position: relative;}
.history .timeline-area:not(:last-child) { padding-bottom: 120px;}
.history .timeline-area .group { flex: 1;}
.history .timeline-area .group .title { font-size: 3.6rem; font-weight: 700; margin-bottom: 33px; opacity: .6;}
.history .timeline-area .group .timeline-list { display: flex; }
.history .timeline-area .group .timeline-list + .timeline-list { margin-top: 24px;}
.history .timeline-area .group .timeline-list dt { flex: 0 0 44px; font-weight: 700; color: var(--clr-primary);}
.history .timeline-area .group .timeline-list dd { flex: 1 0 0; color: #333; opacity: .6;}
.history .timeline-area .group .timeline-list dd img { display: block; margin-top: 20px;}
.history .timeline-area .progress { width: 12px; height: 100%; position: absolute; top: 20px; left: 0;}
.history .timeline-area .progress .point { width: 100%; aspect-ratio: 1; background: #E5E5E5; transform: rotate(45deg);}
.history .timeline-area .progress .line { width: 1px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; background: #ddd; z-index: -1;}
.history .timeline-area .progress .line .percentage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: var(--clr-primary);}
.history .timeline-area:last-child .progress .line { display: none;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .history .intro-area .heading { font-size: 6rem;}
  .history .intro-area .desc { font-size: 2rem;}
}

@media screen and (max-width: 767px) {
  .history .inner { flex-wrap: wrap;}
  .history .inner > div { flex: 0 0 100%;}
  .history .history-intro { display: none;}
  .history .timeline-area { padding-left: 25px;}
  .history .timeline-area .group .timeline-list + .timeline-list { margin-top: 12px;}
  .history .timeline-area .progress { width: 6px; top: 15px;}
  .history .timeline-area .group .title { font-size: 2.6rem; margin-bottom: 16px;}
  .history .timeline-area:not(:last-child) { padding-bottom: 60px;}
}

.vision .heading { font-size: 6rem; line-height: 1.2;}
.vision .points { background: #f7f7f7; padding: 120px 0;}
.vision .points .heading { text-align: center; margin-bottom: 80px;}
.vision .points .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: 44px;}
.vision .points .list li { padding: 40px; background: #fff; border-radius: 20px;}
.vision .points .list li .label { margin-top: 125px; display: block; font-size: 1.6rem; color: #009FE3; font-weight: 700; margin-bottom: 8px;}
.vision .points .list li .sbj { font-size: 2.8rem; font-weight: 700; margin-bottom: 39px;}
.vision .points .list li.on { color: #fff; background: var(--clr-primary); transition: all .3s;}
@media screen and (max-width: 1024px) {
  .vision .heading { font-size: 4rem;}
}
@media screen and (max-width: 767px) {
  .vision .heading { font-size: 2.2rem;}
  .vision .points { padding: 80px 0;}
  .vision .points .heading { margin-bottom: 40px;}
  .vision .points .list { gap: 25px;}
  .vision .points .list li { padding: 30px;}
  .vision .points .list li .sbj { font-size: 2rem; margin-bottom: 20px;}
  .vision .points .list li .label { margin-top: 60px;}
}
/* .vision .points .points-area { height: 450vh;}
.vision .points .container { width: 100%;  height: 100vh;  overflow: hidden;  position: sticky; top: 0;  margin: 0 auto; padding-top: 150px;}
.vision .points .guide-circle { width: 90%; aspect-ratio: 1/1;  position: absolute;  top: 50%;  left: 50%;  transform: translateX(-50%);  border-radius: 50%; border: 1px solid #ddd;}
.vision .points .guide-circle article { position: absolute; width: 28.8%; min-height: 300px; transform-origin: center;}
.vision .points .guide-circle article .group { opacity: 0; visibility: hidden; transition: all .15s;}
.vision .points .guide-circle article .line { width: 1px; height: 195px; background: #d9d9d9; margin: 15px auto 25px; display: block;}
.vision .points .guide-circle article .text { text-align: center; color: #373737;}
.vision .points .guide-circle article .text .sbj { font-size: 4rem; font-weight: 700; line-height: 1; margin-bottom: 20px;}
.vision .points .guide-circle article .text .desc { font-size: 2rem; line-height: 1.4;}
.vision .points .guide-circle article .circle-top { position: absolute; bottom: calc(100% - 7px); left: 50%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;}
.vision .points .guide-circle article .circle-top .num { padding: 5px 25px; font-size: 2.4rem; font-weight: 700; color: var(--clr-primary); border-radius: 50%; aspect-ratio: 1; border: 1px solid #ddd; place-content: center;}
.vision .points .guide-circle article .circle-top .dot { width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--clr-primary); }
.vision .points .guide-circle article.active .group { opacity: 1; visibility: visible; transition: all .85s;}
@media screen and (max-width: 1280px) {
  .vision .points .guide-circle { width: 150%;}
}

@media screen and (max-width: 1024px) {
  .vision .heading { font-size: 4rem;}
  .vision .points .guide-circle article .text .desc { font-size: 2rem;}
}

@media screen and (max-width: 767px) {
  .vision .points .points-area { height: 225vh;}
  .vision .points .guide-circle { width: 170%;}
  .vision .points .guide-circle article { width: 50%;}
  .vision .heading { font-size: 2.2rem;}
  .vision .points .container { padding-top: 80px;}
  .vision .points .guide-circle article .circle-top .num { font-size: 1.8rem; padding: 5px 15px;}
  .vision .points .guide-circle article .circle-top .dot { width: 10px;}
  .vision .points .guide-circle article .line { height: 65px; margin-bottom: 15px;}
  .vision .points .guide-circle article .text .sbj { font-size: 2rem; margin-bottom: 10px;}
  .vision .points .guide-circle article .text .desc { line-height: 1.3; font-size: 1.6rem;}
} */

.location { padding: 120px 0 160px;}
.location .location-area { display: flex; gap: 80px; align-items: center;}
.location .location-area + .location-area { margin-top: 80px;}
.location .location-area figure { flex: 1; height: 0; padding-bottom: 50%; position: relative; border-radius: 20px; overflow: hidden;}
.location .location-area figure iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.location .location-area .area-text { flex: 1;}
.location .location-area .area-text .label { font-weight: 700; color: var(--clr-primary); margin-bottom: 12px; display: block;}
.location .location-area .area-text .sbj { font-size: 3.2rem; font-weight: 700; color: #373737; margin-bottom: 83px;}
.location .location-area .area-text .location-list { display: flex;}
.location .location-area .area-text .location-list + .location-list { margin-top: 20px;}
.location .location-area .area-text .location-list dt { flex: 0 0 82px; font-weight: 700;}
html[lang='en'] .location .location-area .area-text .location-list dt { flex: 0 0 100px;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .location .location-area { gap: 40px;}
}

@media screen and (max-width: 767px) {
  .location { padding: 80px 0;}
  .location .location-area { flex-wrap: wrap; gap: 20px;}
  .location .location-area + .location-area { margin-top: 40px;}
  .location .location-area figure { padding-bottom: 100%;}
  .location .location-area .area-text { flex: 0 0 100%;}
  .location .location-area .area-text .sbj { font-size: 2.2rem; margin-bottom: 40px;}
}


/* pr */
.pr-video { padding: 100px 0 160px; margin: 0 auto; width: 90%; max-width: 1020px; text-align: center;}
.pr-video figure { position: relative; width: 100%; height: 0; padding-bottom: 57%; margin-bottom: 20px;}
.pr-video figure video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer;}
.pr-video figure .play-button,
.pr-video figure .pause-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;}
.pr-video figure .pause-overlay { opacity: 0; transition: opacity 0.5s;}
.pr-video .title { font-size: 2.2rem; font-weight: 700;}
@media (hover: hover) and (pointer: fine) {
  .pr-video figure:hover .pause-overlay { opacity: 1;}
  video:active::-webkit-media-controls-panel,
  video:hover::-webkit-media-controls-panel,
  video:focus::-webkit-media-controls-panel { opacity: 1; }
  video::-webkit-media-controls-panel { opacity: 0; transition: opacity 0.5s; }
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .pr-video figure .play-button,
  .pr-video figure .pause-button { display: none;}
}

@media screen and (max-width: 767px) {
  .pr-video { padding: 80px 0;}
  .pr-video figure { margin-bottom: 10px;}
  .pr-video .title { font-size: 1.8rem;}
}

/* support */
.support { padding: 80px 0 160px;}
.support > .inner { max-width: 1020px;}
.support form .support-notice { font-size: 14px; font-weight: 500; text-align: right; margin-bottom: 14px;}
.support form .form-header { padding-bottom: 20px; border-bottom: 1px solid #333; margin-bottom: 40px;}
.support form .form-header .title { font-size: 3.2rem; font-weight: 700;}
.support form .form-title { font-size: 42px; font-weight: 600; margin-bottom: 40px;}
.support form .form-row {display: flex; margin-bottom: 32px;}
.support form .form-row:last-child { margin-bottom: 54px;}
.support form .form-textarea::placeholder,
.support form .form-row input::placeholder { font-size: 1.6rem; font-weight: 7400; color: #999;}
.support form .form-label {flex: 0 0 126px; padding-top: 20px; font-weight: 600;}
html[lang='en'] .support form .form-label {flex: 0 0 180px;}
.support form .form-label.required::after {content: "*";color: #D72638; margin-left: 4px;}
.support form .form-input-container {flex: 1;}
.support form .form-input-container .text { font-size: 1.6rem; color: #D72638; line-height: 1; display: block; margin-top: 12px;}
.support form .form-input, .form-select, .form-textarea {width: 100%; height: 60px; padding: 10px 20px !important; border: 1px solid #ddd; color: #333; font-weight: 500; border-radius: 0; font-size: inherit;}
.support form .form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { outline: 2px solid var(--accent-color);}
.support form .form-select { background: url(/images/ico-dropdown.svg) #fff no-repeat right 30px center/ 11px 20px;}
.support form .form-textarea {min-height: 228px; resize: vertical;}
.support form .group-container {display: flex;align-items: center;gap: 10px;}
.support form .email-part {flex: 1;}
.support form .email-separator { font-size: 24px;}
.support form .form-input-container input { flex: 1;}
.support form .email-domain-select { flex: 1;}
.support form .policy-title {font-size: 22px; font-weight: 600;margin-bottom: 30px;}
.support form .policy-content {height: 300px;overflow-y: auto;padding: 30px;background-color: #fff;border: 1px solid #ddd;margin-bottom: 10px;font-size: 17px; color: #666;}
.support form .consent-checkbox {display: flex;align-items: center;gap: 10px;margin-top: 15px;}
.support form .privacy-policy .desc { font-size: 17px;}
.support form .form-submit {text-align: center;margin-top: 30px;}
.support form .submit-button {background-color: #000; color: #fff; border: none; border-radius: 35px;padding: 16px 40px;font-size: 22px;font-weight: 500;cursor: pointer;transition: background-color 0.3s; width: 200px;}
.support form .submit-button:hover {background-color: #333;}
.support form .consent-container { width: 100%;}
.support form .consent-checkbox {display: flex;align-items: center; }
.support form .consent-checkbox a { font-size: 16px; font-weight: 600; line-height: 1; text-decoration: underline; text-underline-offset: 5px;}
.support form .consent-checkbox input[type="checkbox"] {position: absolute;opacity: 0;width: 0;height: 0;}
.support form .consent-checkbox label {position: relative;padding-left: 30px; cursor: pointer; font-size: 16px; user-select: none;}
.support form .consent-checkbox label:before {content: "";position: absolute;left: 0;top: 0px;width: 20px;height: 20px;border: 1px solid #ddd;background-color: #fff;transition: all 0.2s ease; border-radius:2px; background: #ddd;}
.support form .consent-checkbox input[type="checkbox"]:checked + label:before {background-color:  #164194; border-color: #164194; }
.support form .consent-checkbox input[type="checkbox"]:checked + label:after {content: "";position: absolute;left: 7px;top: 2px;width: 6px;height: 12px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);}
.support form .desc-list { margin-top: 34px;}
.support form .desc-list li { position: relative; font-size: 16px; color: #777; padding-left: 10px;}
.support form .desc-list li::before { content: ''; display: block; position: absolute; top: 10px; left: 0; width: 5px; height: 1px; background: #777;}
.support-header { margin-bottom: 80px;}
.support-header .sbj { font-size: 2.4rem; font-weight: 700; margin-bottom: 20px;}
.support-header .desc { font-size: 2rem; line-height: 1.4;}
.support form .file-upload input[type="file"] { display: none;}
.support form .file-upload { display: flex; flex-direction: column;}
.support form .file-upload label { height: 60px; padding: 10px 60px; font-size: 1.6rem; color: #666; border: 1px solid #ddd; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; width: fit-content; cursor: pointer;}
.support form .file-upload span { width: auto; background: transparent; border: none; padding: 0;}
.support form .file-upload .file-item { display: flex; align-items: center; gap: 12px; font-size: 1.6rem;}
.support form .file-upload .file-remove { display: none; align-items: center; justify-content: center;}
.support form .information { width: 100%; max-height: 130px; overflow-y: auto;  padding: 22px 20px; border: 1px solid #ddd; font-size: 1.6rem; color: #999;}
.support .form-btns { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 132px;}
.support .form-btns button { height: 48px; padding: 5px 83px; font-size: 1.6rem; font-weight: 600; color: #999; border: 1px solid #ddd;}
.support .form-btns button.submit { background: #164194; color: #fff; border-color:#164194;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .support form .form-header .title { font-size: 2.2rem;}
  .support form .form-label { flex: 0 0 100px;}
  .support .form-btns { margin-top: 70px;}
}

@media screen and (max-width: 767px) {
  .support { padding: 80px 0;}
  .support-header { margin-bottom: 40px;}
  .support-header .sbj { font-size: 2rem;}
  .support-header .desc { font-size: 1.6rem;}
  .support form .form-row { flex-wrap: wrap; gap: 10px; margin-bottom: 15px;}
  .support form .form-label { flex: 0 0 100% !important; padding-top: 10px;}
  .support form .form-input, .form-select, .form-textarea { height: 45px; padding: 10px !important; font-size: 1.5rem;}
  .support form .form-input-container .text { font-size: 1.2rem; margin-top: 6px;}
  .support form .file-upload label { height: 45px; margin-bottom: 10px;}
  .support form .form-row:last-child { margin-bottom: 30px;}
  .support form .form-header { padding-bottom: 10px; margin-bottom: 20px;}
  .support form .form-header .title { font-size: 2rem;}
  .support form .information { padding: 10px; font-size: 1.4rem;}
  .support form .consent-checkbox label { font-size: 1.4rem;}
  .support .form-btns { margin-top: 35px;}
  .support .form-btns button { padding: 5px 30px;}
}

/* recruit */
.recruit { padding: 120px 0 160px;}
.recruit .recruit-header { margin-bottom: 120px;}
.recruit .recruit-header .label { font-weight: 700; color: var(--clr-primary); display: block; margin-bottom: 18px;}
.recruit .recruit-header .heading { font-size: 5.2rem; font-weight: 700;}
.recruit .recruit-area { margin-bottom: 100px;}
.recruit .recruit-area figure { border-radius: 20px; overflow: hidden; margin-bottom: 40px;}
.recruit .recruit-area .label { font-weight: 700; color: var(--clr-primary); display: block; margin-bottom: 8px;}
.recruit .recruit-area .sbj { font-size: 3.2rem; font-weight: 700;}
.recruit .link-btn { display: flex; justify-content: center; align-items: center; width: fit-content; height: 48px; padding: 5px 54px; color: #fff; font-size: 1.6rem; font-weight: 600; color: #fff; background: var(--clr-primary); margin: 0 auto;  border-radius: 8px;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .recruit .recruit-header .heading { font-size: 3rem;}
  .recruit .recruit-area .sbj { font-size: 2.2rem;}
}

@media screen and (max-width: 767px) {
  .recruit { padding: 80px 0;}
  .recruit .recruit-header { margin-bottom: 60px;}
  .recruit .recruit-header .heading { font-size: 2.2rem;}
  .recruit .recruit-area { margin-bottom: 50px;}
  .recruit .recruit-area figure { margin-bottom: 20px;}
  .recruit .recruit-area .sbj { font-size: 1.8rem;}
  .recruit .link-btn { padding: 5px 30px;}
}


/* business */
.business-header { padding: 120px 0;}
.business-header .label { font-weight: 700; display: block; margin-bottom: 20px; color: var(--clr-primary); }
html[lang='en'] .business-header .label { font-size: 2.2rem;}
.business-header .heading { font-size: 5.2rem;}
.business-wrap { padding: 120px 0 160px; background: #f7f7f7;}
.business-wrap .flex-box { display: flex;}
.business-wrap .link-btns { display: flex; margin-bottom: 80px;}
.business-wrap .link-btns a { display: flex; align-items: center; justify-content: center; flex: 1; text-align: center; position: relative; padding: 28px 10px; line-height: 1; font-weight: 2rem; color: #3C3B3B; border-bottom: 2px solid #D9D9D9;}
.business-wrap .link-btns a.on { border-color: var(--clr-primary); font-weight: 700;}
.business-wrap .link-btns a.on::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-primary); margin-right: 15px;}
.business-wrap .service-area + .service-area { margin-top: 120px;}
.business-wrap .service-area figure { border-radius: 20px; overflow: hidden;}
.business-wrap .service-top { display: flex; align-items: center; gap: 20px; margin-bottom: 37px;}
.business-wrap .service-top .title { flex: 0 0 680px;}
.business-wrap .service-top .label { font-weight: 600; margin-bottom: 12px; display: block; color: var(--clr-primary); }
.business-wrap .service-top .heading { font-size: 3.6rem; font-weight: 700; line-height: 1.2;}
.business-wrap .service-top .desc { font-weight: 500; color: #555; flex: 1 0 0;}

.business-wrap .process-area .heading { font-size: 3.6rem; font-weight: 600; margin-bottom: 80px; text-align: center;}
.business-wrap .process-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); grid-auto-rows: 1fr; gap: 20px;}
.business-wrap .process-list article { padding: 40px 40px 80px; background: #fff; border-radius: 20px;}
.business-wrap .process-list article .num { width: 41px; aspect-ratio: 1; display: block; text-align: center; border-radius: 50%; font-weight: 700; color: #ddd; border: 1px solid #ddd; place-content: center; margin-left: auto; margin-bottom: 84px;}
.business-wrap .process-list article .label { font-size: 1.6rem; font-weight: 700; color: #009FE3; margin-bottom: 8px; display: block;}
.business-wrap .process-list article .sbj { font-size: 2.8rem; font-weight: 700; margin-bottom: 39px;}
.business-wrap .process-list article.on { color: #fff; background: var(--clr-primary); transition: all .5s !important;}
.business-wrap .process-list article.on .desc { color: #fff; transition: all .5s;}
.business-wrap .process-list article.on .num { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.4); transition: all .5s;}

.business-wrap .business-tabs { flex: 0 0 400px;}
.business-wrap .business-tabs .sticky { position: sticky; top: 150px;}
.business-wrap .business-tabs .swiper-wrapper { flex-direction: column; gap: 10px;}
.business-wrap .business-tabs .swiper-slide { position: relative; padding: 20px; border-radius: 10px; background: #fff; width: 280px; color: #999; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
html[lang='en'] .business-wrap .business-tabs .swiper-slide { width: 300px;}
.business-wrap .business-tabs .swiper-slide::after { content: ''; display: none; flex-shrink: 0; width: 24px; aspect-ratio: 1; background: url(/images/sub/business/business-arrow.png) no-repeat center/cover;}
.business-wrap .business-tabs .swiper-slide.on { background: var(--clr-primary); color: #fff;}
.business-wrap .business-tabs .swiper-slide.on::after { display: block;}
.business-wrap .business-content { flex: 1 0 0; max-width: calc(100% - 400px);}
.business-wrap .business-content .business-area { display: none;}
.business-wrap .business-content .business-area.on { display: block;}
.business-wrap .business-content .product-top { margin-bottom: 60px;}
.business-wrap .business-content .product-top .title { font-size: 3.6rem; font-weight: 600; margin-bottom: 20px;}
.business-wrap .business-content ul li { position: relative; padding-left: 16px; color: #555;}
.business-wrap .business-content ul li + li { margin-top: 4px;}
.business-wrap .business-content ul li::before { content: ''; display: block; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: #555;}
.business-wrap .business-content .product-slide .title { font-size: 2.4rem; font-weight: 600; margin-bottom: 22px;}
.business-wrap .business-content .product-slide + .product-slide { margin-top: 80px;}
.business-wrap .business-content .product-slide .swiper { overflow: visible; clip-path: inset(0% -30% -30% 0%);}
.business-wrap .business-content .product-slide .swiper + .swiper { margin-top: 40px;}
.business-wrap .business-content .product-slide .swiper .swiper-slide { width: auto;}
.business-wrap .business-content .product-slide .swiper-pagination { position: static; margin-top: 22px; justify-content: flex-start;}
.business-wrap .business-content .product-slide .swiper-pagination-bullet { background: #ddd; margin: 0 10px; opacity: 1; position: relative;}
.business-wrap .business-content .product-slide .swiper-pagination-bullet-active { background: var(--clr-primary); }
.business-wrap .business-content .product-slide .swiper-pagination-bullet-active::before { content: ''; display: block; width: 22px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--clr-primary); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.business-wrap .business-content .performance-wrap .title { font-size: 3.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 48px;}
.business-wrap .business-content .performance-wrap .performance-area { padding: 60px 50px; background: #fff; border-radius: 20px;}
.business-wrap .business-content .performance-wrap .performance-area + .performance-area { margin-top: 40px;}
.business-wrap .business-content .performance-wrap .label { display: inline-block; padding: 11px 20px; margin-bottom: 12px; border: 1px solid var(--clr-primary); color: var(--clr-primary); font-size: 1.6rem; font-weight: 700; line-height: 1; border-radius: 35px;}
.business-wrap .business-content .performance-wrap .sbj { font-size: 2.8rem; font-weight: 600; margin-bottom: 16px;}
.business-wrap .business-content .performance-wrap .swiper { margin-top: 40px;}
/* .business-wrap .business-content .performance-wrap .swiper-slide { border: 1px solid #ddd; border-radius: 20px; width: auto; max-width: 520px; max-height: 350px;} */
.business-wrap .business-content .performance-wrap .swiper-slide { border: 1px solid #ddd; border-radius: 20px; width: auto; max-height: 350px;}
.business-wrap .business-content .performance-wrap .swiper-slide figure { padding: 20px; }
.business-wrap .business-content .performance-wrap .swiper-slide img { max-height: 320px;}
/* .business-wrap .business-content .performance-wrap .swiper-slide figure { width: 100%; height: 0; padding-bottom: 80%; position: relative;}
.business-wrap .business-content .performance-wrap .swiper-slide figure img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-height: 80%; transform: translate(-50%, -50%);} */
.business-wrap .business-content .performance-wrap .swiper-pagination { position: static; margin-top: 22px; justify-content: center;}
.business-wrap .business-content .performance-wrap .swiper-pagination-bullet { background: #ddd; margin: 0 5px; opacity: 1; position: relative;}
.business-wrap .business-content .performance-wrap .swiper-pagination-bullet-active { background: var(--clr-primary); }

.business-wrap .business-content .partners-top { margin-bottom: 80px;}
.business-wrap .business-content .partners-top .label { display: inline-block; font-size: 2rem; font-weight: 700; margin-bottom: 16px; color: var(--clr-primary);}
.business-wrap .business-content .partners-top .sbj { font-size: 4rem; font-weight: 700; margin-bottom: 40px; line-height: 1.2;}
.business-wrap .business-content .partners-top .desc { font-size: 2rem; color: #101010;}
.business-wrap .business-content .partners-area + .partners-area { margin-top: 80px;}
.business-wrap .business-content .partners-area .title { font-size: 2.8rem; font-weight: 700; margin-bottom: 20px;}
.business-wrap .business-content .partners-area .table-container { overflow-x: auto; width: 100%; margin-bottom: 40px;}
.business-wrap .business-content .partners-area .table-container table { width: 100%; border: 1px solid #E5E5E5; background: rgba(255,255,255,.81); border-radius: 20px; overflow: hidden; min-width: 768px;}
.business-wrap .business-content .partners-area .table-container th,
.business-wrap .business-content .partners-area .table-container td { padding: 12px 5px; text-align: center; font-size: 1.6rem; border: 1px solid #E5E5E5; font-family: 'Pretendard';}
.business-wrap .business-content .partners-area .table-container th { background: #5B6271; color: #fff; font-weight: 500;}
.business-wrap .business-content .partners-area .img-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.business-wrap .business-content .partners-area .img-box-auto { display: flex; }
.business-wrap .business-content .partners-area .img-box-auto img { min-width: 0; }

@media screen and (min-width: 1025px) {
	.business-header .label { font-size: 2rem; }
}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {
  .business-header .heading { font-size: 4rem;}
  .business-wrap .service-top .heading { font-size: 3rem;}
  .business-wrap .service-top .title { flex: 0 0 380px;}
  .business-wrap .flex-box { flex-wrap: wrap;}
  .business-wrap .business-tabs { flex: auto; margin-bottom: 40px; width: 100%;}
  .business-wrap .business-tabs .sticky { position: static;}
  .business-wrap .business-tabs .swiper-wrapper { flex-direction: row; gap: 0;}
  .business-wrap .business-tabs .swiper-slide { width: auto; line-height: 24px;}
  html[lang='en'] .business-wrap .business-tabs .swiper-slide { width: auto;}
  .business-wrap .business-content { max-width: 100%; flex: 0 0 100%;}
  .business-wrap .business-content .performance-wrap .title img { width: auto; height: 36px; }
}

@media screen and (max-width: 767px) {
  .business-header { padding: 80px 0;}
  .business-header .heading { font-size: 2.2rem;}
  html[lang='en'] .business-header .label { font-size: 1.8rem;}
  .business-wrap { padding: 80px 0; overflow: hidden;}
  .business-wrap .service-area + .service-area { margin-top: 60px;}
  .business-wrap .service-top { flex-wrap: wrap; margin-bottom: 20px;}
  .business-wrap .service-top .heading { font-size: 2rem;}
  .business-wrap .service-top .label { font-size: 1.4rem; margin-bottom: 10px;}
  .business-wrap .process-area .heading { font-size: 2.2rem; margin-bottom: 40px;}
  .business-wrap .process-list article { padding: 30px 30px 50px; }
  .business-wrap .process-list article .num { margin-bottom: 40px; width: 35px;}
  .business-wrap .process-list article .sbj { font-size: 2rem; margin-bottom: 20px;}
  .business-wrap .business-content .product-top .title { font-size: 2rem; margin-bottom: 10px;}
  .business-wrap .business-tabs .swiper { width: 100%;}
  .business-wrap .business-tabs .swiper-slide { padding: 8px 20px;}
  .business-wrap .business-content .product-slide .title { font-size: 2rem; margin-bottom: 11px;}
  .business-wrap .business-content .product-slide + .product-slide { margin-top: 60px;}
  .business-wrap .business-content .performance-wrap .title { font-size: 2.2rem; margin-bottom: 24px;}
  .business-wrap .business-content .performance-wrap .performance-area { padding: 30px;}
  .business-wrap .business-content .performance-wrap .label { padding: 6px 10px; font-size: 1.4rem; margin-bottom: 6px;}
  .business-wrap .business-content .performance-wrap .sbj { font-size: 2rem;}
  .business-wrap .business-content ul li { padding-left: 12px;}
  .business-wrap .business-content ul li::before { top: 8px;}
  .business-wrap .business-content .performance-wrap .swiper { margin-top: 20px;}
  .business-wrap .business-content .performance-wrap .swiper-slide { border-radius: 10px;}
  .business-wrap .business-content .partners-top { margin-bottom: 40px;}
  .business-wrap .business-content .partners-top .label { font-size: 1.6rem; margin-bottom: 8px;}
  .business-wrap .business-content .partners-top .sbj { font-size: 2.2rem; margin-bottom: 20px;}
  .business-wrap .business-content .partners-top .desc { font-size: 1.5rem;}
  .business-wrap .business-content .partners-area .title { font-size: 2.2rem;}
  .business-wrap .business-content .partners-area .table-container { margin-bottom: 20px;}
  .business-wrap .business-content .partners-area .img-box { gap: 10px;}
  .business-wrap .business-content .partners-area .table-container th, .business-wrap .business-content .partners-area .table-container td { padding: 8px 5px; font-size: 1.5rem;}
  .business-wrap .business-content .partners-area + .partners-area { margin-top: 50px;}
  .business-wrap .business-content .product-slide .swiper .swiper-slide img { width: auto; height: 230px; }
}

.policy { padding-bottom: 160px;}
.policy .inner { max-width: 1240px;}
@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {
  .policy { padding-bottom: 80px;}
  .business-wrap .business-content .performance-wrap .swiper-slide img { height: 115px; }
}