.autoWidth {
    width: 100%;
    max-width: calc(100% - 10rem);
    margin: 0 auto;
}

#section01,
#section02,
#section03,
#section04,
#section05 {
    width: 100%;
    height: 100%;
    min-height: 1080px;
    padding-top: 15rem;
}



/* ------------------------------ ▼ section01 ▼ ------------------------------ */
#section01 {
    position: relative;
}

/* ----- ▼ section01의 swiper ▼ ----- */
#section01 .swiper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#section01 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

#section01 .swiper-slide.slide01 {
    opacity: 0.8;
}

#section01 .swiper-slide.slide03 {
    opacity: 0.3;
}

#section01 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#section01 .autoplay-progress {
    position: absolute;
    top: 55%;
    left: 16rem;
    z-index: 10;
    width: 120px;
    height: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
    background-color: #fff;
}

#section01 .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(100 * (1 - var(--progress)));
    stroke-dasharray: 100;
}

#section01 .autoplay-progress .current-count {
    display: block;
    font-size: 1.4rem;
    position: absolute;
    top: -7px;
    left: -20px;
    color: #fff;
    font-weight: 300;
}

#section01 .autoplay-progress .total-count {
    display: block;
    font-size: 1.4rem;
    position: absolute;
    top: -7px;
    right: -20px;
    color: #fff;
    font-weight: 300;
}

#section01 .autoplay-progress .pause-btn {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -7px;
    right: -42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    z-index: 99;
}

/* ----- ▲ section01의 swiper ▲ ----- */

#section01 .text-wrap {
    margin-top: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

#section01 .text-wrap.ver01 {
    display: flex;
}

#section01 .text-wrap.show {
    display: flex;
}

#section01 .text-wrap .main-title {
    font-size: 8rem;
    font-weight: 800;
}

#section01 .text-wrap .main-title .gradient-text {
    background: linear-gradient(to right, #06FFF0, #0668FF);
    color: transparent;
    -webkit-background-clip: text;
}

#section01 .text-wrap .main-title .gradient-text-purple {
    background: linear-gradient(to right, #70FDFD, #E9BDFF);
    color: transparent;
    -webkit-background-clip: text;
}

#section01 .text-wrap .sub-title {
    font-size: 3rem;
    font-weight: 400;
}

#section01 .text-wrap.ver03 .accent-text {
    color: #007AFF;
}

/* ------------------------------ ▲ section01 ▲ ------------------------------ */



/* ------------------------------ ▼ section02 ▼ ------------------------------ */
#section02,
#section03 {
    background-image: url(/resources/img/main_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#section02 .sec2-title-wrap .main-title {
    font-size: 8rem;
    font-weight: 600;
    text-align: center;
}

#section02 .sec2-title-wrap .section-slogan {
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center;
    margin-top: 2rem;
}

#section02 .line-wrap {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 10rem 0 5rem;
    position: relative;
}

#section02 .line-wrap .circle-wrap {
    position: relative;
}

#section02 .line-wrap .circle-wrap .circle {
    position: absolute;
}

#section02 .line-wrap .circle-wrap .circle:nth-child(1) {
    left: 10.3%;
}

#section02 .line-wrap .circle-wrap .circle:nth-child(2) {
    left: 29.8%;
}

#section02 .line-wrap .circle-wrap .circle:nth-child(3) {
    left: 50%;
}

#section02 .line-wrap .circle-wrap .circle:nth-child(4) {
    right: 30.5%;
}

#section02 .line-wrap .circle-wrap .circle:nth-child(5) {
    right: 10.8%;
}

#section02 .line-wrap .circle-wrap .circle .gray-circle {
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#section02 .line-wrap .circle-wrap .circle .front-circle {
    width: 16px;
    height: 16px;
    display: block;
    background-color: #0681FD;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#section02 .line-wrap .circle-wrap .circle .behind-circle {
    width: 25px;
    height: 25px;
    display: block;
    background-color: rgba(6, 129, 253, 0.4);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ----- ▼ section02의 swiper ▼ ----- */
#section02 .swiper {
    padding: 0 2rem;
}

#section02 .swiper .swiper-wrapper {
    display: flex;
    cursor: pointer;
}

#section02 .swiper .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#section02 .swiper .swiper-wrapper .swiper-slide .name-text {
    font-size: 3rem;
}

#section02 .swiper .swiper-wrapper .swiper-slide .description-box {
    width: 100%;
    height: 370px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4rem;
    border-radius: 3rem;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#section02 .swiper .swiper-wrapper .swiper-slide .description-box .description-text {
    width: 100%;
    display: block;
    font-size: 2rem;
    text-align: center;
    line-height: 1.3;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#section02 .swiper .swiper-wrapper .swiper-slide .description-box .img {
    width: 100%;
    height: 100%;
    background-color: transparent;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----- ▲ section02의 swiper ▲ ----- */

/* ------------------------------ ▲ section02 ▲ ------------------------------ */



/* ------------------------------ ▼ section03 ▼ ------------------------------ */
#section03 .sec3-title-wrap {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0 auto;
}

#section03 .sec3-title-wrap>div {
    display: flex;
    gap: 2rem;
    align-items: center;
}

#section03 .sec3-title-wrap>div .main-title {
    font-size: 8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 2rem;
}

#section03 .sec3-title-wrap>div .main-title::after {
    display: block;
    content: '';
    width: 3px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
}

#section03 .sec3-title-wrap>div .sub-title {
    font-size: 3.2rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
}

#section03 .sec3-title-wrap .section-slogan {
    font-size: 2.6rem;
    text-align: center;
    font-weight: 300;
}

#section03 .sec3-contents-wrap {
    margin: 12rem auto 0;
}

#section03 .sec3-contents-wrap .tab-menu-wrap {
    display: flex;
    gap: 4rem;
    justify-content: center;
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button {
    outline: none;
    border: 1px solid transparent;
    background-color: transparent;
    color: #fff;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 3rem;
    transition: .2s;
    cursor: pointer;
    user-select: none;
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button.active {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button .circle {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 100%;
    background-color: #fff;
    position: relative;
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button.active .circle {
    background-color: #0681fd;
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button.active .circle::before {
    display: block;
    content: '';
    width: 22px;
    height: 22px;
    background-color: rgba(6, 129, 253, 0.3);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section03 .sec3-contents-wrap .tab-menu-wrap .tab-button span {
    font-size: 2rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap {
    margin-top: 5rem;
    display: flex;
    gap: 12rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap {
    width: 100%;
    height: 430px;
    max-width: 430px;
    border-radius: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    position: relative;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .selected-content-text {
    font-size: 2rem;
    color: #0681fd;
    position: absolute;
    top: 10%;
    right: -20%;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
    transition: .5s;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box span {
    width: 10px;
    height: 10px;
    display: block;
    background-color: #0681fd;
    border-radius: 100%;
    position: absolute;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box span:nth-child(1) {
    top: 49%;
    left: -1.5%;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box span:nth-child(2) {
    top: 13%;
    right: 14%;
    background-color: #0681fd;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box span::before {
    display: block;
    content: '';
    width: 22px;
    height: 22px;
    background-color: rgba(6, 129, 253, 0.3);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section03 .sec3-contents-wrap .inner-contents-wrap .visual-wrap .circle-box span:nth-child(3) {
    bottom: 1.5%;
    left: 66%;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 2rem;
    position: relative;
}


#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .aiSolution-wrap,
#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .dataScience-wrap,
#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .systemDesign-wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transform: translateX(20px);
    opacity: 0;
    transition: opacity 0.5s, transform .5s;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .aiSolution-wrap.active,
#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .dataScience-wrap.active,
#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .systemDesign-wrap.active {
    visibility: visible;
    transform: translateX(0);
    opacity: 1;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-title-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-title-wrap .inner-title {
    font-size: 3.6rem;
    text-align: center;
    word-break: keep-all;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .dataScience-wrap.active .inner-title-wrap .inner-title,
#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .systemDesign-wrap.active .inner-title-wrap .inner-title {
    display: flex;
    flex-direction: column;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information ul {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information ul li {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 1.6rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information ul li::before {
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 100%;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case {
    display: flex;
    gap: 3rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case>p {
    height: fit-content;
    padding: .5rem 1.5rem;
    font-size: 1.8rem;
    border-radius: 2rem;
    background-color: #0681fd;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li {
    display: flex;
    gap: .5rem;
    align-items: center;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li span {
    flex-shrink: 0;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li::before {
    display: none;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li span img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li .case-name {
    display: flex;
    gap: 1.5rem;
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li .case-name::after {
    display: block;
    content: '';
    width: 2px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
}

#section03 .sec3-contents-wrap .inner-contents-wrap .information-container .inner-information-wrap .inner-information .key-case ul li .case-info {
    margin-left: 1rem;
}


/* ------------------------------ ▲ section03 ▲ ------------------------------ */


/* ------------------------------ ▼ 협력사 가로 슬라이드 ▼ ------------------------------ */
.logo-container {
    padding-top: 40px;
    overflow: hidden;
}

.logo-row {
    display: flex;
    margin-bottom: 40px;
}

.track {
    display: flex;
    gap: 40px;
    width: max-content;
}

.top .track {
    animation: slideRight 40s linear infinite;
}

.bottom .track {
    animation: slideLeft 40s linear infinite;
}

.logo-row:hover .track {
    animation-play-state: paused;
}

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

    100% {
        transform: translateX(calc(-50% - (40px / 2)));
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(calc(-50% - (40px / 2)));
    }

    100% {
        transform: translateX(0);
    }
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.3s ease;
    flex-shrink: 0;
    border-radius: 10px;
    padding: 1rem 4rem;
    background-color: #fff;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ------------------------------ ▲ 협력사 가로 슬라이드 ▲ ------------------------------ */



/* ------------------------------ ▼ section04 ▼ ------------------------------ */
#section04 {
    padding-top: 10rem;
}

#section04 .sec4-title-wrap {
    margin-bottom: 5rem;
}

#section04 .sec4-title-wrap .main-title {
    font-size: 8rem;
    font-weight: 600;
    text-align: center;
}

#section04 .sec4-title-wrap .section-slogan {
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center;
    margin-top: 2rem;
}

#section04 .news-contents-wrap {
    height: 600px;
    display: flex;
    gap: 5rem;
    padding-bottom: 3rem;
    position: relative;
}

#section04 .news-contents-wrap .news-content {
    position: relative;
}

#section04 .news-contents-wrap .news-content .img-box {
    height: fit-content;
    border: 2px solid transparent;
    border-radius: 2rem;
    padding: .5rem;
    background-color: rgba(255, 255, 255, 0.05);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .5s;
}

#section04 .swiper-slide-active .img-box {
    transform: translateY(-120px);
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.3);
}

#section04 .news-contents-wrap .news-content .img-box figure {
    border-radius: 2rem;
    overflow: hidden;
}

#section04 .news-contents-wrap .news-content .img-box figure:hover img {
    scale: 1.05;
}

#section04 .news-contents-wrap .news-content .img-box figure img {
    width: 730px;
    height: 414px;
    object-fit: cover;
    transition: .2s;
}

#section04 .news-contents-wrap .news-content .text-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: end;
    padding-bottom: 2rem;
}

#section04 .news-contents-wrap .news-content .text-box .news-title {
    font-size: 2.4rem;
    text-align: center;
    word-break: keep-all;
    padding: 0 2rem;
}

#section04 .news-contents-wrap .news-content .text-box>div {
    display: flex;
    gap: 1rem;
}

#section04 .news-contents-wrap .news-content .text-box>div .news-company {
    font-size: 1.6rem;
    color: #24B9F4;
}

#section04 .news-contents-wrap .news-content .text-box>div .reporter-name {
    font-size: 1.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

#section04 .news-contents-wrap .news-content .text-box>div .reporter-name::before {
    display: block;
    content: '';
    width: 2px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.2);
}

#section04 .news-contents-wrap .swiper-pagination {
    position: absolute;
    bottom: 0px;
}

#section04 .news-contents-wrap .swiper-pagination-bullet {
    background-color: #fff;
}

#section04 .news-contents-wrap .swiper-pagination-bullet-active {
    background-color: #0681FD;
}

#section04 .line-wrap {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 10rem 0 5rem;
    position: relative;
}

#section04 .line-wrap .circle-wrap {
    position: relative;
}

#section04 .line-wrap .circle-wrap .circle {
    position: absolute;
}

#section04 .line-wrap .circle-wrap .circle:nth-child(1) {
    left: 12%;
}

#section04 .line-wrap .circle-wrap .circle:nth-child(2) {
    left: 50%;
}

#section04 .line-wrap .circle-wrap .circle:nth-child(3) {
    right: 12%;
}

#section04 .line-wrap .circle-wrap .circle .gray-circle {
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#section04 .line-wrap .circle-wrap .circle .front-circle {
    width: 16px;
    height: 16px;
    display: block;
    background-color: #0681FD;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#section04 .line-wrap .circle-wrap .circle .behind-circle {
    width: 25px;
    height: 25px;
    display: block;
    background-color: rgba(6, 129, 253, 0.4);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* ------------------------------ ▲ section04 ▲ ------------------------------ */



/* ------------------------------ ▼ section05 ▼ ------------------------------ */
#section05 .main-text {
    font-size: 8rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5rem;
}

#section05 .location-info-wrap .info-wrap {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

#section05 .location-info-wrap .info-wrap .button-wrap {
    margin: 0 auto;
    display: flex;
    gap: 2rem;
}

#section05 .location-info-wrap .info-wrap .button-wrap button {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10rem;
    padding: 1.5rem 6rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
}

#section05 .location-info-wrap .info-wrap .button-wrap button.active {
    border: 1px solid #0084F8;
    background: linear-gradient(to right, #01BFF8, #0084F8)
}

#section05 .location-info-wrap .info-wrap p {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem 5rem;
    border-radius: 2rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

#section05 .location-info-wrap .info-wrap p span {
    width: fit-content;
    display: block;
}

#section05 .location-info-wrap .info-wrap p span img {
    width: 16px;
    height: 16px;
    margin-left: auto;
}

#section05 .location-info-wrap .map-wrap {
    height: 600px;
    margin-top: 5rem;
}

/* ------------------------------ ▲ section05 ▲ ------------------------------ */



























/* ------------------------------ ▼ aboutUs ▼ ------------------------------ */
#aboutUs-wrap .inner-nav-wrap,
#portfolio-wrap .inner-nav-wrap,
#business-wrap .inner-nav-wrap,
#history-wrap .inner-nav-wrap,
#vision-wrap .inner-nav-wrap {
    width: fit-content;
    margin: 3rem auto 15rem;
}

#aboutUs-wrap .inner-nav-wrap ul,
#portfolio-wrap .inner-nav-wrap ul,
#business-wrap .inner-nav-wrap ul,
#history-wrap .inner-nav-wrap ul,
#vision-wrap .inner-nav-wrap ul {
    display: flex;
    gap: 7rem;
    align-items: center;
}

#aboutUs-wrap .inner-nav-wrap ul li a,
#portfolio-wrap .inner-nav-wrap ul li a,
#business-wrap .inner-nav-wrap ul li a,
#history-wrap .inner-nav-wrap ul li a,
#vision-wrap .inner-nav-wrap ul li a {
    font-size: 2.2rem;
    font-weight: 500;
}

#aboutUs-wrap .inner-nav-wrap ul li,
#portfolio-wrap .inner-nav-wrap ul li,
#business-wrap .inner-nav-wrap ul li,
#history-wrap .inner-nav-wrap ul li,
#vision-wrap .inner-nav-wrap ul li {
    position: relative;
    transition: .3s;
}

#aboutUs-wrap .inner-nav-wrap ul li.active,
#portfolio-wrap .inner-nav-wrap ul li.active,
#business-wrap .inner-nav-wrap ul li.active,
#history-wrap .inner-nav-wrap ul li.active,
#vision-wrap .inner-nav-wrap ul li.active {
    color: #0681fd;
}

#aboutUs-wrap .inner-nav-wrap ul li::before,
#portfolio-wrap .inner-nav-wrap ul li::before,
#business-wrap .inner-nav-wrap ul li::before,
#history-wrap .inner-nav-wrap ul li::before,
#vision-wrap .inner-nav-wrap ul li::before {
    width: 64px;
    height: 12px;
    display: block;
    content: '';
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: .5rem;
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translate(-50%, -2rem);
    transition: .3s;
}

#aboutUs-wrap .inner-nav-wrap ul li:hover,
#portfolio-wrap .inner-nav-wrap ul li:hover,
#business-wrap .inner-nav-wrap ul li:hover,
#history-wrap .inner-nav-wrap ul li:hover,
#vision-wrap .inner-nav-wrap ul li:hover {
    transform: translateY(-6px);
}

#aboutUs-wrap .inner-nav-wrap ul li:hover::before,
#portfolio-wrap .inner-nav-wrap ul li:hover::before,
#business-wrap .inner-nav-wrap ul li:hover::before,
#history-wrap .inner-nav-wrap ul li:hover::before,
#vision-wrap .inner-nav-wrap ul li:hover::before {
    transform: translate(-50%, 0);
}

#aboutUs-wrap .contents-wrap .page-info-wrap .title-text,
#portfolio-wrap .contents-wrap .page-info-wrap .title-text,
#business-wrap .contents-wrap .page-info-wrap .title-text,
#vision-wrap .contents-wrap .page-info-wrap .title-text,
#history-wrap .contents-wrap .page-info-wrap .title-text {
    font-size: 6rem;
    font-weight: 600;
    text-align: center;
}

#aboutUs-wrap .contents-wrap .page-info-wrap .sub-text-box,
#portfolio-wrap .contents-wrap .page-info-wrap .sub-text-box,
#business-wrap .contents-wrap .page-info-wrap .sub-text-box,
#vision-wrap .contents-wrap .page-info-wrap .sub-text-box,
#history-wrap .contents-wrap .page-info-wrap .sub-text-box {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    margin-top: 3rem;
}

#aboutUs-wrap .contents-wrap .page-info-wrap .sub-text-box .sub-text,
#portfolio-wrap .contents-wrap .page-info-wrap .sub-text-box .sub-text,
#business-wrap .contents-wrap .page-info-wrap .sub-text-box .sub-text,
#vision-wrap .contents-wrap .page-info-wrap .sub-text-box .sub-text,
#history-wrap .contents-wrap .page-info-wrap .sub-text-box .sub-text {
    font-size: 2.2rem;
    text-align: center;
}

#aboutUs-wrap .contents-wrap .company-info-box-wrap {
    margin-top: 10rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

#aboutUs-wrap .contents-wrap .company-info-box-wrap .box {
    height: 352px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
}

#aboutUs-wrap .contents-wrap .company-info-box-wrap .box .bold-text {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
}

#aboutUs-wrap .contents-wrap .company-info-box-wrap .box .bold-text::after {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

#aboutUs-wrap .contents-wrap .company-info-box-wrap .box .sub-text {
    font-size: 2.4rem;
    text-align: center;
    margin-top: 3rem;
    word-break: keep-all;
}

#aboutUs-wrap .contents-wrap .organization-table {
    margin-top: 10rem;
    display: flex;
    gap: 3rem;
}

#aboutUs-wrap .contents-wrap .organization-table .SnP-division {
    flex: 1 1 0;
}

#aboutUs-wrap .contents-wrap .organization-table .devBusiness-division {
    flex: 1.5 1 0;
    ;
}

#aboutUs-wrap .contents-wrap .organization-table .SnP-division .division-wrap,
#aboutUs-wrap .contents-wrap .organization-table .devBusiness-division .division-wrap {
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    background-color: #1F223D;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#aboutUs-wrap .contents-wrap .organization-table .SnP-division .division-wrap .division-name,
#aboutUs-wrap .contents-wrap .organization-table .devBusiness-division .division-wrap .division-name {
    font-size: 3rem;
    font-weight: 600;
}

#aboutUs-wrap .contents-wrap .organization-table .SnP-division .division-wrap .division-eng-name,
#aboutUs-wrap .contents-wrap .organization-table .devBusiness-division .division-wrap .division-eng-name {
    font-size: 1.6rem;
    font-weight: 300;
    color: #ddd;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap {
    display: flex;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div {
    width: 100%;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .team-name-wrap {
    width: 100%;
    height: 120px;
    background-color: rgba(31, 34, 61, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .team-name {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .team-eng-name {
    font-size: 1.6rem;
    font-weight: 300;
    text-align: center;
    color: #ddd;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .work-wrap {
    padding: 3rem;
    height: 160px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .work-wrap ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: unset;
}

#aboutUs-wrap .contents-wrap .organization-table .team-wrap>div .work-wrap ul li {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.1px;
    list-style: unset;
}

#aboutUs-wrap .contents-wrap .key-value-wrap {
    height: 746px;
    margin-top: 10rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 10rem;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object {
    width: 100%;
    max-width: 811px;
    height: 811px;
    border-radius: 100%;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box {
    display: flex;
    gap: 2rem;
    align-items: center;
    position: absolute;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box .text-wrap .value-name {
    font-size: 4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .5rem;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box .text-wrap .value-description {
    font-size: 1.8rem;
    display: flex;
    flex-direction: column;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(1) {
    bottom: 50%;
    left: -21%;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(2) {
    top: 2%;
    left: -4%;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(3) {
    flex-direction: column;
    justify-content: center;
    top: -7%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(4) .icon-box,
#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(5) .icon-box {
    order: -1;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(4) {
    top: 2%;
    right: -4%;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box:nth-child(5) {
    bottom: 50%;
    right: -25%;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .value-box .icon-box {
    width: 130px;
    height: 130px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3rem;

    display: flex;
    justify-content: center;
    align-items: center;
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .inner-opacity-circle-object {
    width: 100%;
    max-width: 513px;
    height: 100%;
    max-height: 513px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 100%;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}

#aboutUs-wrap .contents-wrap .key-value-wrap .center-object .inner-opacity-circle-object .inner-white-circle-object {
    width: 100%;
    max-width: 300px;
    height: 100%;
    max-height: 300px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;
}




#portfolio-wrap .contents-wrap .tech-capabilities-wrap {
    margin-top: 5rem;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: center;
}

#portfolio-wrap .contents-wrap .tech-capabilities-wrap div {
    border-radius: 3rem;
    overflow: hidden;
}

#portfolio-wrap .contents-wrap .business-performance-wrap h2 {
    text-align: center;
    margin-top: 10rem;
    font-size: 4.2rem;
    font-weight: 500;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly;
    align-items: center;
    gap: 4rem;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box {
    display: flex;
    gap: 1rem;
    padding: 4rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box .img {
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    padding: 1rem;
    align-content: center;
    min-width: 180px;
    justify-items: center;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box .info-wrap h3 {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box .info-wrap .detail-info-wrap .layout {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box .info-wrap .detail-info-wrap .layout .info-label {
    border: 1px solid #007AFF;
    border-radius: 10rem;
    padding: .5rem 1rem;
    color: #007AFF;
    font-size: 1.4rem;
}

#portfolio-wrap .contents-wrap .business-performance-wrap .performance-box-wrapper .performance-box .info-wrap .detail-info-wrap .layout .info-value {
    font-size: 1.4rem;
}






#vision-wrap .contents-wrap .vision-visual-contents-wrap {
    padding-bottom: 10rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
    position: relative;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .text-wrap {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-items: center;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .text-wrap .title-text {
    font-size: 4.2rem;
    font-weight: 500;
    text-align: center;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .text-wrap .sub-title-text {
    font-size: 2.6rem;
    font-weight: 300;
    text-align: center;

}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10rem;
    position: relative;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .img {
    width: 100%;
    max-width: 500px;
    height: 100%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .img img {
    width: 100%;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box {
    width: 469px;
    height: 352px;
    padding: 3rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box:nth-child(2n) {
    margin-left: auto;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .description-text {
    width: 100%;
    display: block;
    font-size: 2.4rem;
    text-align: center;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .description-text::after {
    margin-top: 5rem;
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .number-wrap {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .number-wrap .number-text {
    font-size: 2rem;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .number-wrap .number-text .accent {
    font-size: 4rem;
    font-weight: 700;
}

#vision-wrap .contents-wrap .vision-visual-contents-wrap .visual-wrap .visual-box .number-wrap>span img {
    width: 20px;
    height: 20px;
}





#history-wrap .contents-wrap .inner-history-wrap {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
    padding-bottom: 10rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap {
    display: flex;
    gap: 10rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap:last-child .month-wrap {
    border-bottom: none;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .year-number {
    height: fit-content;
    flex: .2 1 0;
    font-size: 6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 100px;
    transition: .3s;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .this-year {
    font-size: 8rem;
    color: #fff;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .this-year span {
    position: sticky;
    top: 0;
    left: 0;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .year-number span img {
    opacity: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: .3s;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .this-year span img {
    opacity: 1;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap {
    display: flex;
    gap: 4rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap:last-child {
    margin-bottom: 10rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap .month {
    font-size: 2.6rem;
    font-weight: 600;
    flex: 0 1 5%;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap>div {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap .history {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#history-wrap .contents-wrap .inner-history-wrap .year-wrap .month-wrap .inner-month-wrap .history::before {
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 100%;
    flex-shrink: 0;
}

/* ------------------------------ ▲ aboutUs ▲ ------------------------------ */














/* ------------------------------ ▼ business ▼ ------------------------------ */

#business-wrap .business-banner-wrap {
    width: 100%;
    height: 500px;
    background-color: #0d1021;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#business-wrap .business-banner-wrap .img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(/resources/img/main_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#business-wrap .business-banner-wrap .text-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

#business-wrap .business-banner-wrap .text-wrap .banner-title {
    font-size: 8rem;
    font-weight: 700;
}

#business-wrap .business-banner-wrap .text-wrap .banner-sub-title {
    font-size: 2.8rem;
    text-align: center;
    font-weight: 300;
}

#business-wrap .main-section {
    position: relative;
    padding: 5rem 0;
}

#business-wrap .main-section .object {
    width: 240px;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#business-wrap .main-section .layout {
    display: flex;
    flex-direction: column;
}

#business-wrap .main-section .layout.ai {
    width: 60%;
    margin: 0 auto;
    align-items: center;
    border: 2px solid #00A7EE;
    padding: 2rem;
    border-radius: 2rem;
}

#business-wrap .main-section .layout.sw {
    max-width: 700px;
    align-items: end;
}

#business-wrap .main-section .layout.dataScience {
    max-width: 700px;
    align-items: start;
}

#business-wrap .main-section .flex-wrapper {
    display: flex;
    justify-content: center;
    gap: 34rem;
    margin-top: 20rem;
}

#business-wrap .main-section .layout .key-text {
    font-size: 2rem;
    font-weight: 600;
    padding: 1rem 2rem;
    background-color: #00A7EE;
    border-radius: 10rem;
}

#business-wrap .main-section .layout .sub-text {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 1rem;
}

#business-wrap .main-section .layout .description-box {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #aaa;
    border-radius: 2rem;
    padding: 2rem 1.4rem;
    margin-top: 2rem;
}

#business-wrap .main-section .layout.ai .description-box {
    height: unset;
    margin-top: unset;
}

#business-wrap .main-section .layout.ai .description-box {
    border: none;
}

#business-wrap .main-section .layout .description-box .description-text {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.2;
}




#business-wrap .ai-section {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 2px solid #aaa;
}

#business-wrap .ai-section .count-wrap,
#business-wrap .sw-section .count-wrap,
#business-wrap .dataScience-section .count-wrap {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
}

#business-wrap .ai-section .count-wrap .count,
#business-wrap .sw-section .count-wrap .count,
#business-wrap .dataScience-section .count-wrap .count {
    border-radius: 100%;
    background-color: #007AFF;
    padding: .6rem;
    font-size: 2rem;
    font-weight: 600;
}

#business-wrap .ai-section .count-wrap .title-text,
#business-wrap .sw-section .count-wrap .title-text,
#business-wrap .dataScience-section .count-wrap .title-text {
    font-size: 4rem;
    font-weight: 500;
}

#business-wrap .ai-section .wrapper,
#business-wrap .sw-section .wrapper,
#business-wrap .dataScience-section .wrapper {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#business-wrap .ai-section .wrapper .text-wrap .inner-text,
#business-wrap .sw-section .wrapper .text-wrap .inner-text,
#business-wrap .dataScience-section .wrapper .text-wrap .inner-text {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 2rem 3rem;
}

#business-wrap .ai-section .wrapper .text-wrap .inner-text .accent {
    color: #FFFF00;
}

#business-wrap .ai-section .wrapper .service-area-wrap ul,
#business-wrap .sw-section .wrapper .service-area-wrap ul,
#business-wrap .dataScience-section .wrapper .service-area-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

#business-wrap .ai-section .wrapper .service-area-wrap ul li,
#business-wrap .sw-section .wrapper .service-area-wrap ul li,
#business-wrap .dataScience-section .wrapper .service-area-wrap ul li {
    font-size: 1.4rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10rem;
    padding: 1rem 2rem;
}

#business-wrap .ai-section .ai-tech-list-wrap {
    margin-top: 6rem;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul .box .tech-name {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    padding: 2rem 4rem;
    background-color: #123581;
    border-radius: 1rem;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul .box .tech-name .eng-name {
    font-size: 1.6rem;
    font-weight: 400;
    color: #ddd;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul .box .inner-ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul .box .inner-ul li {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

#business-wrap .ai-section .ai-tech-list-wrap .list-ul .box .inner-ul li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #007AFF;
}

#business-wrap .ai-section .slide-wrapper {
    width: 100%;
    overflow: hidden;
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap,
#business-wrap .sw-section .slide-wrapper .title-text-wrap,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap {
    margin: 10rem 0 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap::before,
#business-wrap .ai-section .slide-wrapper .title-text-wrap::after,
#business-wrap .sw-section .slide-wrapper .title-text-wrap::before,
#business-wrap .sw-section .slide-wrapper .title-text-wrap::after,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap::before,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap::after {
    content: '';
    display: block;
    width: 80px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap::before,
#business-wrap .sw-section .slide-wrapper .title-text-wrap::before,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap::before {
    background-image: url(/resources/img/business/ai_section02-1.png);
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap::after,
#business-wrap .sw-section .slide-wrapper .title-text-wrap::after,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap::after {
    background-image: url(/resources/img/business/ai_section02-2.png);
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap .title-text,
#business-wrap .sw-section .slide-wrapper .title-text-wrap .title-text,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap .title-text {
    font-size: 4rem;
    text-align: center;
    display: block;
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap .title-text .accent,
#business-wrap .sw-section .slide-wrapper .title-text-wrap .title-text .accent,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap .title-text .accent {
    color: #FF7222;
}

#business-wrap .ai-section .slide-wrapper .title-text-wrap .sub-text,
#business-wrap .sw-section .slide-wrapper .title-text-wrap .sub-text,
#business-wrap .dataScience-section .slide-wrapper .title-text-wrap .sub-text {
    font-size: 2rem;
    text-align: center;
}

#business-wrap .ai-section .slide-wrapper .swiper-wrapper .swiper-slide {
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 3rem;
}

#business-wrap .ai-section .slide-wrapper .swiper-wrapper .swiper-slide .title,
#business-wrap .sw-section .slide-wrapper .swiper-wrapper .swiper-slide .title,
#business-wrap .dataScience-section .slide-wrapper .swiper-wrapper .swiper-slide .title {
    padding: 1.6rem 3rem;
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: 2rem;
    background-color: #007AFF;
    text-align: center;
}

#business-wrap .ai-section .slide-wrapper .swiper-button-next,
#business-wrap .ai-section .slide-wrapper .swiper-button-prev {
    top: 65%;
}

#business-wrap .sw-section .slide-wrapper .swiper-button-next,
#business-wrap .sw-section .slide-wrapper .swiper-button-prev {
    top: 60%;
}

#business-wrap .ai-section .slide-wrapper .swiper-pagination-bullet,
#business-wrap .sw-section .slide-wrapper .swiper-pagination-bullet,
#business-wrap .dataScience-section .slide-wrapper .swiper-pagination-bullet {
    background-color: #ccc;
}

#business-wrap .ai-section .slide-wrapper .swiper-pagination-bullet-active,
#business-wrap .sw-section .slide-wrapper .swiper-pagination-bullet-active,
#business-wrap .dataScience-section .slide-wrapper .swiper-pagination-bullet-active {
    background-color: #007AFF;
}


#business-wrap .dataScience-section,
#business-wrap .dataScience-section {
    margin-top: 20rem;
    padding-top: 3rem;
    border-top: 2px solid #aaa;
}

#business-wrap .sw-section .box-wrap {
    margin: 5rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide01 {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 5rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img01,
#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img02,
#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img03 {
    width: auto;
    height: 60px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img01,
#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img02,
#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img03 {
    width: auto;
    height: 240px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 3rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img01 {
    background-image: url(/resources/img/business/sw_section_slide02-1.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img01 {
    background-image: url(/resources/img/business/sw_section_slide02-2.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img02 {
    background-image: url(/resources/img/business/sw_section_slide02-3.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img02 {
    background-image: url(/resources/img/business/sw_section_slide02-4.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .icon-img03 {
    background-image: url(/resources/img/business/sw_section_slide02-5.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .img03 {
    background-image: url(/resources/img/business/sw_section_slide02-6.png);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li .solution-name {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 2rem 3rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li p {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.6rem;
    line-height: 1.5;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide02 ul li p::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content {
    display: flex;
    flex-direction: column;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .img {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box .circle {
    width: 16px;
    height: 16px;
    background-color: #00A1F8;
    border-radius: 100%;
    position: relative;
    z-index: 2;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box .circle::after {
    display: block;
    content: '';
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: rgba(6, 129, 253, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box span {
    width: 2px;
    height: 100px;
    display: block;
    background-color: #00A1F8;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box .description-text-wrap {
    width: 100%;
    border: 2px solid transparent;
    border-radius: 10rem;
    background-image: linear-gradient(#0D1021), linear-gradient(to right, #01BFF8, #0084F8);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 2.5rem 5rem;
    margin-bottom: 5rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .description-box .description-text-wrap p {
    font-size: 2.4rem;
    text-align: center;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .information-box {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 2rem;
    padding: 4rem;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .information-box p {
    font-size: 1.8rem;
    font-weight: 300;
    word-break: keep-all;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .information-box p::before {
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
}

#business-wrap .sw-section .slide-wrapper .swiper-wrapper .slide03 .contents-wrap .content .information-box .img {
    height: fit-content;
    background-color: transparent;
    margin-bottom: 2rem;
}




#business-wrap .dataScience-section .process-wrap {
    margin: 8rem 0;
}

#business-wrap .dataScience-section .process-wrap .list-ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box>div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: auto;
    height: 80px;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .icon-img01 {
    background-image: url(/resources/img/business/dataScience_section_icon01.png);
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .icon-img02 {
    background-image: url(/resources/img/business/dataScience_section_icon02.png);
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .icon-img03 {
    background-image: url(/resources/img/business/dataScience_section_icon03.png);
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .icon-img04 {
    background-image: url(/resources/img/business/dataScience_section_icon04.png);
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .icon-img05 {
    background-image: url(/resources/img/business/dataScience_section_icon05.png);
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .process-step {
    font-size: 1.6rem;
    font-weight: 500;
    padding: 1.5rem 3rem;
    background-color: #123581;
    border-radius: 1rem;
    text-align: center;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .inner-ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .inner-ul li {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 1.4rem;
    position: relative;
}

#business-wrap .dataScience-section .process-wrap .list-ul .box .inner-ul li::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #007AFF;
}

#business-wrap .dataScience-section .slide-wrapper .etl-part-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

#business-wrap .dataScience-section .slide-wrapper .etl-part-wrapper .box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#business-wrap .dataScience-section .slide-wrapper .etl-part-wrapper .box p {
    font-size: 1.6rem;
    border-radius: 1.4rem;
    padding: 1.4rem 4rem;
    background-color: #123581;
    transform: translateY(24px);
}

#business-wrap .dataScience-section .slide-wrapper .etl-part-wrapper .box img {
    width: 400px;
}



/* ------------------------------ ▲ business ▲ ------------------------------ */















/* ------------------------------ ▼ solution ▼ ------------------------------ */
#solution-wrap {
    position: relative;
}

#solution-wrap .solution-banner-wrap {
    width: 100%;
    height: 500px;
    background-color: #0d1021;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#solution-wrap .solution-banner-wrap .img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(/resources/img/main_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#solution-wrap .solution-banner-wrap .text-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

#solution-wrap .solution-banner-wrap .text-wrap .banner-title {
    font-size: 8rem;
    font-weight: 700;
}

#solution-wrap .solution-banner-wrap .text-wrap .banner-sub-title {
    font-size: 2.8rem;
    text-align: center;
    font-weight: 300;
    padding: 0 2rem;
}

#solution-wrap #solution-main .wrapper {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#solution-wrap #solution-main .wrapper .title-text {
    font-size: 5rem;
    font-weight: 600;
    margin-bottom: 6rem;
}

#solution-wrap #solution-main .wrapper .inner-text {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 2rem 3rem;
}

#solution-wrap #solution-main .wrapper .key-value {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-top: 3rem;
}

#solution-wrap #solution-main .wrapper .key-value p {
    font-size: 1.4rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10rem;
    padding: 1rem 2rem;
}

#solution-wrap #solution-main .wrapper .inner-text .accent {
    color: #FFF000;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution {
    max-width: 400px;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution .count {
    font-size: 6.4rem;
    font-weight: 700;
    opacity: 0.1;
    transform: translate(5px, 35px);
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution h2 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 1rem;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution.grid01 h2 {
    color: #453389;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution.grid02 h2 {
    color: #1c598c;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution.grid03 h2 {
    color: #4a6ecb;
}

#solution-wrap #solution-main .wrapper .solution-grid-wrap .solution.grid04 h2 {
    color: #731965;
}

#solution-wrap main section {
    padding: 15rem 0;
}

#solution-wrap main section:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#solution-wrap main section .title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 10rem;
}

#solution-wrap main section .prod-img {
    display: flex;
    justify-content: center;
    margin: 5rem 0;
}

#solution-wrap main section .title-wrapper .about {
    font-size: 2.4rem;
    text-align: center;
}

#solution-wrap main section .title-wrapper .about .accent {
    color: #453389;
    font-weight: 700;
    font-size: 2.8rem;
}

#solution-wrap main section .title-wrapper .about::before,
#solution-wrap main section .title-wrapper .about::after {
    content: '';
    display: block;
    width: auto;
    height: 32px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
}

#solution-wrap main section .title-wrapper .about::before {
    background-image: url(/resources/img/business/ai_section02-1.png);
    margin-bottom: 2rem;
}

#solution-wrap main section .title-wrapper .about::after {
    background-image: url(/resources/img/business/ai_section02-2.png);
    margin-top: 2rem;
}

#solution-wrap main section .title-wrapper .title-box {
    border: 2px solid #453389;
    border-radius: 2rem;
    padding: 3rem 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 5rem;
}

#solution-wrap main #tsPlatformGrid .title-wrapper .title-box {
    border-color: #127baa;
}

#solution-wrap main #BIManager .title-wrapper .title-box {
    border-color: #1c3d90;
}

#solution-wrap main #tsAIGen3D .title-wrapper .title-box {
    border-color: #731965;
}

#solution-wrap main section .title-wrapper .title-box .description-text {
    position: absolute;
    top: -20px;
    padding: .6rem 6rem;
    border-radius: 10rem;
    background-color: #453389;
    font-weight: 500;
    font-size: 2rem;
}

#solution-wrap main #tsPlatformGrid .title-wrapper .title-box .description-text {
    background-color: #127baa;
}

#solution-wrap main #BIManager .title-wrapper .title-box .description-text {
    background-color: #1c3d90;
}

#solution-wrap main #tsAIGen3D .title-wrapper .title-box .description-text {
    background-color: #731965;
}

#solution-wrap main section .title-wrapper .title-box h2 {
    font-size: 5.2rem;
    /* 그라데이션넣기 */
}

#solution-wrap main section .features-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#solution-wrap main section .features-wrapper .features {
    border-radius: 0 10rem 10rem 0;
    padding-right: 2rem;
    display: flex;
    gap: 2rem;
    background: linear-gradient(to right, #0d1021, rgba(255, 255, 255, 0.1));
}

#solution-wrap main section .features-wrapper .features .img img {
    width: auto;
    height: 170px;
    object-fit: contain;
}

#solution-wrap main section .features-wrapper .features .text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#solution-wrap main section .features-wrapper .features .text-wrapper .function-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    padding-bottom: 0;
}

#solution-wrap main section .features-wrapper .features .text-wrapper .function-wrap h3 {
    font-size: 2.4rem;
    background: radial-gradient(circle, #3DB5FF, #738CFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#solution-wrap main section .features-wrapper .features:nth-child(2n) .text-wrapper .function-wrap h3 {
    background: radial-gradient(circle, #FD504F, #FF7222);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#solution-wrap main section .features-wrapper .features .text-wrapper .function-wrap p {
    font-size: 1.6rem;
    color: #7c7c7c;
}

#solution-wrap main section .features-wrapper .features .text-wrapper .function-wrap .bar {
    width: 2px;
    height: 14px;
    background-color: #7c7c7c;
    border-radius: 10rem;
}

#solution-wrap main section .features-wrapper .features .text-wrapper .function-info {
    font-size: 1.6rem;
    padding: 2rem;
}


/* ------------------------------ ▲ solution ▲ ------------------------------ */







/* ------------------------------ ▼ service ▼ ------------------------------ */
#service-wrap .service-banner-wrap {
    width: 100%;
    height: 500px;
    background-color: #0d1021;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

#service-wrap .service-banner-wrap .img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(/resources/img/main_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#service-wrap .service-banner-wrap .text-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

#service-wrap .service-banner-wrap .text-wrap .banner-title {
    font-size: 8rem;
    font-weight: 700;
}

#service-wrap .service-banner-wrap .text-wrap .banner-sub-title {
    font-size: 2.8rem;
    text-align: center;
    font-weight: 300;
}

#service-wrap main section {
    padding: 15rem 0;
}

#service-wrap main #service-section01,
#service-wrap main #service-section02,
#service-wrap main #service-section03 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#service-wrap main section .section-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#service-wrap main section .section-info-wrap .title-text {
    font-size: 5rem;
    font-weight: 500;
    margin: 1rem 0 8rem;
    text-align: center;
    padding: 0 2rem;
}

#service-wrap main section .section-info-wrap .text-box {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.12);
    padding: 2.4rem 2rem;
}

#service-wrap main section .section-info-wrap .text-box .sub-title-text {
    font-size: 1.8rem;
    font-weight: 300;
    text-align: center;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap,
#service-wrap main #service-section02 .section-info-wrap .contents-grid-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 10rem;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 4rem 5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap .content .part-number {
    padding: .8rem 3rem;
    background: linear-gradient(to right, #01BFF8, #0084F8);
    border-radius: 10rem;
    font-size: 1.6rem;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap .content .img {
    width: 100%;
    border-radius: 3rem;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap .content .img img {
    margin: auto;
}

#service-wrap main #service-section01 .section-info-wrap .contents-grid-wrap .content .description-text {
    font-size: 2rem;
    font-size: 300;
}

#service-wrap main #service-section02 .contents-grid-wrap .content {
    width: 100%;
    padding: 4rem 5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    align-items: center;
}

#service-wrap main #service-section02 .contents-grid-wrap .content .img {
    width: 100%;
}

#service-wrap main #service-section02 .contents-grid-wrap .content .img img {
    margin: auto;
}

#service-wrap main #service-section02 .contents-grid-wrap .content .description-text {
    width: 100%;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 3rem;
    text-align: center;
    font-size: 2rem;
    font-size: 300;
}

#service-wrap main #service-section03 .contents-wrap {
    width: 100%;
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

#service-wrap main #service-section03 .contents-wrap .content {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5rem;
    padding: 3rem;
    display: flex;
    gap: 4rem;
}

#service-wrap main #service-section03 .contents-wrap .content .img {
    flex: 0.8 1 0;
    width: 100%;
}

#service-wrap main #service-section03 .contents-wrap .content .img img {
    margin: auto;
}

#service-wrap main #service-section03 .contents-wrap .content .info-wrap {
    flex: 1.2 1 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

#service-wrap main #service-section03 .contents-wrap .content .info-wrap .main-text {
    border: 1px solid transparent;
    border-radius: 10rem;
    background-image: linear-gradient(#0D1021), linear-gradient(to right, #01BFF8, #0084F8);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 2.5rem 10rem;
    margin: 0 5rem;
}

#service-wrap main #service-section03 .contents-wrap .content .info-wrap .main-text p {
    font-size: 3rem;
    text-align: center;
}

#service-wrap main #service-section03 .contents-wrap .content .info-wrap .description-text {
    font-size: 2rem;
    font-weight: 300;
    display: flex;
    align-items: start;
    gap: 1rem;
}

#service-wrap main #service-section03 .contents-wrap .content .info-wrap .description-text .circle {
    width: 20px;
    height: 20px;
    display: block;
    padding: .5rem;
    border-radius: 100%;
    background-color: #0088F8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}