/* about */
.about-intro { padding: 266px 0 0; overflow: hidden; background: var(--bg); color: #fff; position: relative;}
.about-intro .newsreader { font-size: 206px; font-weight: 500; line-height: 1.3;}
.about-intro .inner { position: relative;}
.about-intro .flex-box { position: absolute; top: 0; left: 0; width: 100%;}
.about-intro .flex-box .col { width: 50%; position: relative; z-index: 1;}
.about-intro .flex-box .col:first-child .newsreader { margin-bottom: 106px;}
.about-intro .flex-box .col:last-child { white-space: nowrap; padding-top: 405px; padding-left: 10%;}
.about-intro .flex-box .col:last-child .img-box { margin-bottom: 80px;}
.about-intro .flex-box .col:last-child .img-box img { margin-left: auto;}
.about-intro .intro-container { margin-top: 343px; width: 100%; height: 100vh;}
.about-intro .intro-container > .img-box { background: url(/images/sub/about/about-intro-bg.png) no-repeat center/cover; width: 100%; height: 100%;}
.about-intro .intro-container .group { position: absolute; top: -363px; left: 0; z-index: 2; width: 100%;}
.about-intro .intro-container .group2 { bottom: 0; top: auto; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.about-intro .intro-container .group2 .row { width: fit-content;}
.about-intro .intro-container .group2 .row + .row { margin-top: 160px; margin-left: auto; padding-right: 110px;}
.about-intro .intro-container .group2 .row .sbj { font-size: 60px; font-weight: 600;}
.about-intro .intro-container .group2 .row .desc { font-size: 20px; margin-top: 40px;}

.about-statistics { padding: 240px 0; background: var(--bg); color: #fff;}
.about-statistics .sticky { top: 100px;}
.about-statistics .col { width: 50%; }
.about-statistics ul { display: flex; flex-direction: column; padding-top: 196px;}
.about-statistics ul li { width: fit-content;}
.about-statistics ul li + li { margin-top: 100px;}
.about-statistics ul li:nth-child(even) { margin-left: auto;}
.about-statistics ul li .text { font-size: 32px; font-weight: 300; margin-bottom: 30px; display: block;}
.about-statistics ul li .num { position: relative; font-size: 80px; margin-top: -20px; margin-right: 18px;}
.about-statistics ul li .num.plus::after { content: ''; display: block; position: absolute; top: -20px; right: -20px; width: 28px; height: 28px; background: url(/images/sub/about/plus.png) no-repeat center/cover;}
.about-statistics ul li .sbj { font-weight: 600; margin-bottom: 10px;}
.about-statistics ul li .desc { opacity: .8;}

.circle-container { overflow-x: clip; position: relative;}
.about-circle { width: 100%; height: 100vh; background: url(/images/main/intro-bg.png) no-repeat center/cover; position: sticky; top: 0;}
.about-circle .text-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.about-circle .text-area .img-box { margin-bottom: 40px;}
.about-circle .text-area .text { font-size: 18px; text-align: center;}
.about .circle-area { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 2;}
.about .circle { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; height: max-content; z-index: 1;}
.about .circle-area .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; height: max-content; z-index: 1;}


.about-partnership { padding: 540px 0 240px; color: #fff; background: var(--bg); position: relative; z-index: 1;}
.about-partnership .flex-box { gap: 80px;}
.about-partnership .flex-box .col { width: 50%;}
.about-partnership .flex-box .col:last-child { padding-bottom: 148px; position: relative;}
.about-partnership .flex-box .col:last-child .img-box:last-child { position: absolute; right: 0; bottom: 0;}
.about-partnership .flex-box .heading { margin-bottom: 120px;}
.about-partnership .flex-box .desc { padding-left: 26%; font-weight: 300;}
.about-partnership .flex-box .text { font-size: 16px; color: #626262; margin-top: 16px;}


.about-solution { padding-bottom: 240px; background: var(--bg); color: #fff; position: relative; z-index: 1;}
.about-solution h1.heading { font-weight: 600; margin-bottom: 60px;}
.about-solution .swiper-container { position: relative;}
.about-solution .swiper { position: relative;}
.about-solution .logo { position: absolute; left: 52%; top: -44%; transform: translateX(-50%); z-index: 2;}
.about-solution .swiper .flex-box { gap: 20px;}
.about-solution .swiper .flex-box .col { width: 50%;}
.about-solution .swiper .flex-box figure { padding-bottom: 69%;}
.about-solution .swiper .flex-box .text-wrap { padding-left: 13%; display: flex; flex-direction: column; justify-content: center;}
.about-solution .swiper .flex-box .text-wrap .heading { margin-bottom: 24px;}
.about-solution .swiper .swiper-wrapper { flex-direction: column;}
.about-solution .pagination-wrap { position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center;}
.about-solution .swiper-pagination { position: static; display: flex; flex-direction: column; align-items: center; right: 30px; left: auto; width: auto; }
.about-solution .pagination-wrap .arrow { width: 12px; height: 12px; cursor: pointer; }
.about-solution .pagination-wrap .arrow.prev { margin-bottom: 15px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(45deg); }
.about-solution .pagination-wrap .arrow.next { margin-top: 15px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.about-solution .pagination-wrap .divider { width: 16px; height: 1px; background: #fff; margin: 8px 0; opacity: 0.8;}
.about-solution .pagination-wrap .swiper-pagination-current,
.about-solution .pagination-wrap .swiper-pagination-total { font-size: 16px; color: #fff; }

.about-it { background: var(--bg); color: #fff; overflow: hidden; height: 100vh; position: relative;}
.about-it .guide-circle { top: 55%;}

/* program */
.program-intro { background: var(--bg); color: #fff; height: 800vh; position: relative;}
.program-intro .content-area { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;}
.program-intro .content-area .box { position: relative; display: inline-block; width: 20%; height: 1.2em; margin-top: 10px; max-width: 0;}
.program-intro .content-area.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.program-intro .content-area.bg .sticky { width: 100%; height: 100vh; overflow: hidden; z-index: 2;}
.program-intro .step-wrap { position: absolute; z-index: 3; top: 0; width: 100%; height: auto;}
.program-intro .step-wrap .step-area { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
.program-intro .step-wrap .step-area .group { max-width: 520px; text-align: left;}
.program-intro .step-wrap .step-area .group figure { padding-bottom: 100%; margin-bottom: 24px;}
.program-intro .step-wrap .step-area .group .sbj { margin-bottom: 6px; }
.program-intro .step-wrap .step-area .group .desc { opacity: .5;}
.program-intro .step-wrap .heading { position: relative; margin-bottom: 40px; font-weight: 600;}
.program-intro .step-wrap .heading::before {  content: ''; display: block; position: absolute; bottom: -43%; left: 44%; transform: translateX(-50%); width: 34.8vw; height: 26.8vw; background: url(/images/sub/program/program-intro-logo.png) no-repeat center/cover; z-index: -1; }
.program-intro .step-wrap .desc { font-size: 18px;}
.program-intro .content-area.bg .step-list { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; text-align: left; padding: 0 80px; z-index: 3;}
.program-intro .content-area.bg .step-list li { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.6); font-weight: 300;}
.program-intro .content-area.bg .step-list li + li { margin-top: 16px;}
.program-intro .content-area.bg .step-list li.active { color: var(--accent-color);}
.program-intro .content-area .img-bg { z-index: 2; width: 0; height: 0; position: absolute; overflow: hidden;}
.program-intro .content-area .img-bg img { width: 100%; height: 100%; object-fit: cover;}
.program-intro .content-area .img-box { width: 100%; height: 100%; position: relative;}
.program-intro .content-area .img-box img { position: absolute;}
.program-intro .content-area .img-box img:nth-child(1) {top: 15%;left: 13%;}
.program-intro .content-area .img-box img:nth-child(2) {left: 0%; bottom: 5%; }
.program-intro .content-area .img-box img:nth-child(3) {right: 17%;top: 30%;}
.program-intro .content-area .img-box img:nth-child(4) {right: 0;bottom: -10%;}