/*===========================================================================
    메인페이지
============================================================================*/
.main-wrap {background: #fff;}
.main-wrap .banner {}
.main-wrap .banner li {position: relative;}
.main-wrap .banner li a {display:block; width:100%; height:100%;}
/*.main-wrap .banner li::before {content:''; width: 100%; height: 100%; background: rgba(42, 136, 249,0.07); position: absolute; top: 0; left: 0;}*/
.main-wrap .banner li .text-box {padding-left: 100px; position: absolute; top: 50%; transform: translateY(-50%);}
.main-wrap .banner li .text-box h3 {font-size: 5.6rem; margin-bottom: 40px; font-weight: 600; color: #fff;}
.main-wrap .banner li .text-box p {font-size: 2rem; color: #fff;}
/* 공통 */
.main-wrap section {padding: 150px 0;}
.main-wrap section h2 {font-size: 4.8rem; margin-bottom: 40px; font-weight: bold; text-align: center;}
.main-wrap section .container > p {font-size: 2rem; color:#555555; margin-bottom: 80px; text-align: center;}
.main-wrap section .list-box {display: flex; align-items: center; flex-wrap: wrap; gap: 30px;}
.main-wrap section .list-box li {position: relative; flex: 0 0 calc(100% / 3 - 20px); border-radius: 10px; overflow: hidden;}

.main-wrap .sec01 {padding-bottom: 0;}
.main-wrap .sec01 .button-box {position: relative; margin-bottom: 40px; padding-left: 160px; padding-right: 160px;}
.main-wrap .sec01 .swiper li button {width: 100%; height: 60px; line-height: 60px; font-size: 2rem; border: 1px solid var(--basic-border); color: #999999; font-weight: 500; text-align: center; border-radius: 30px; padding: 0;}
/* .main-wrap .sec01 .swiper li button.active {border-bottom-color: #007bff; font-weight: bold; color: #333333;} */
.main-wrap .sec01 .swiper li button.active {background: var(--main-color); border: 1px solid var(--main-color); color: #fff;}
.main-wrap .sec01 .navigation-box {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main-wrap .sec01 .navigation-box .swiper-button-prev {left: 60px;}
.main-wrap .sec01 .navigation-box .swiper-button-prev::after {width: 20px; height: 40px;}
.main-wrap .sec01 .navigation-box .swiper-button-next::after {width: 20px; height: 40px;}
.main-wrap .sec01 .navigation-box .swiper-button-next {right: 60px;}
.main-wrap .sec01 .list-box {padding: 40px; background: #fbfbfc; }
.main-wrap .sec01 .list-box li {position: relative; flex: 0 0 calc(100% / 3 - 20px); height: 200px; background: #fff; border: 1px solid #fff; box-shadow: var(--box-shadow);}
.main-wrap .sec01 .list-box li::before {content: '+'; font-weight: 100; font-size: 5rem; line-height: 1; color: #9e9e9e; position: absolute; top: 0; right: 18px;}
.main-wrap .sec01 .list-box li a {position: relative; height: 100%; padding: 0 24px 0 54px; display: flex; align-items: center;}
.main-wrap .sec01 .list-box li img {width: auto; height: 70px; margin-right: 40px;}
.main-wrap .sec01 .list-box li:hover {border: 1px solid var(--main-color);}
.main-wrap .sec01 .list-box li:hover .text-box h4, .main-wrap .sec01 .list-box li:hover .text-box p, .main-wrap .sec01 .list-box li:hover::before {color: var(--main-color);}
.main-wrap .sec01 .list-box li:hover img path {fill:var(--main-color)}
.main-wrap .sec01 .list-box li .text-box {}
.main-wrap .sec01 .list-box li .text-box h3 {font-size: 2rem; font-weight: 600; margin-bottom: 16px;}
.main-wrap .sec01 .list-box li .text-box p {color: #293042;}
.main-wrap .sec01 .list-box li .text-box p br.mobile {display: none;}

.main-wrap .sec02 .tab-group {justify-content: center;}
.main-wrap .sec02 .tab-group button {margin-right: 130px; font-size: 20px; display: flex; align-items: center; padding: 0; border: 0;}
.main-wrap .sec02 .tab-group button.active {color: var(--main-color);}
.main-wrap .sec02 .tab-group button:last-child {margin-right: 0;}
.main-wrap .sec02 .tab-group button img {width: auto; height: 40px; margin-right: 10px;}
.main-wrap .sec02 .list-box {background: #fff;}
.main-wrap .sec02 .list-box li {height: 165px; padding:0 60px; background: #f4f6f9; display: flex; justify-content: center; flex-direction: column; transition: 0.2s;}
.main-wrap .sec02 .list-box li:hover {box-shadow: var(--box-shadow);}
.main-wrap .sec02 .list-box li p {color: #555555;}
.main-wrap .sec02 .more-button {display: none; width:140px; height: 42px; font-size: 1.8rem; margin: 40px auto 0;}

.main-wrap .sec03 {background: #f4f6f9;}
.main-wrap .sec03 .list-box {padding: 0 100px; flex-wrap: nowrap;}
.main-wrap .sec03 .list-box li {height: 467px; padding: 82px 40px 60px 60px; background: #fff; box-shadow: var(--box-shadow); display: flex; flex-direction: column; align-items: flex-start;}
.main-wrap .sec03 .list-box li h4 {font-size: 24px; margin-bottom: 24px; font-weight: 600;}
.main-wrap .sec03 .list-box li p {font-size: 18px; color: #555555;}
.main-wrap .sec03 .list-box li img {width: auto; height: 160px; margin-top: auto; margin-left:auto; object-fit: contain;}


@media (max-width:1300px) {
    .main-wrap .banner {height: 800px;}
    .main-wrap .banner .swiper {height: 100%;}
    .main-wrap .banner img {width: 100%; height: 100%;}
    .main-wrap .banner li .text-box {padding-left: 40px;}

    .main-wrap section {padding: 120px 0;}
    .main-wrap section .container > p {margin-bottom: 60px;}
    .main-wrap section .container > p br {display: none;}
    .main-wrap section .list-box li {flex: 0 calc(100% / 2 - 20px);}

    .main-wrap .sec01 .button-box {padding-left: 60px; padding-right: 60px;}
    .main-wrap .sec01 .swiper li button {font-size: 1.8rem; height: 48px; line-height: 48px;}
    .main-wrap .sec01 .list-box li {flex: 0 calc(100% / 2 - 20px);}
    .main-wrap .sec01 .list-box li img {height: 56px; margin-right: 30px;}
    .main-wrap .sec01 .navigation-box .swiper-button-prev {left: 0;}
    .main-wrap .sec01 .navigation-box .swiper-button-next {right: 0;}

    .main-wrap .sec02 .tab-group button {margin-right: 80px;}

    .main-wrap .sec03 .list-box {padding: 0;}
    .main-wrap .sec03 .list-box li {padding: 62px 40px 40px;}

}

@media (max-width:800px) {
    .main-wrap .banner {height: 580px;}
    .main-wrap .banner li .text-box {padding-left: 20px; padding-right: 20px;}
    .main-wrap .banner li .text-box h3 {font-size: 3.4rem; margin-bottom: 20px;}
    .main-wrap .banner li .text-box p {font-size: 1.8rem;}
    .main-wrap .banner li .text-box p br {display: none;}

    .main-wrap section {padding: 60px 0;}
    .main-wrap section h2 {font-size: 2.8rem; margin-bottom: 20px;}
    .main-wrap section .container > p {font-size: 1.6rem; margin-bottom: 40px;}
    .main-wrap section .list-box {gap: 20px;}

    .main-wrap .sec01 .button-box {padding-left: 20px; padding-right: 20px; margin-bottom: 20px;}
    .main-wrap .sec01 .swiper li button {font-size: 1.6rem;}
    .main-wrap .sec01 .list-box {padding: 20px;}
    .main-wrap .sec01 .list-box li {height: 168px; flex: 100%;}
    .main-wrap .sec01 .list-box li a {padding: 0 20px 0 32px;}
    .main-wrap .sec01 .list-box li .text-box h3 {font-size: 1.8rem; margin-bottom: 14px;}
    .main-wrap .sec01 .list-box li .text-box p {font-size: 1.5rem;}
    .main-wrap .sec01 .list-box li .text-box p br.pc {display: none;}
    .main-wrap .sec01 .list-box li .text-box p br.mobile {display: block;}

    .main-wrap .sec02 .tab-group {justify-content: space-evenly; margin-bottom: 40px;}
    .main-wrap .sec02 .tab-group button {flex: 1; font-size: 1.8rem; margin-right: 0; justify-content: center; flex-direction: column;}
    .main-wrap .sec02 .tab-group button img {height: 28px; margin: 0 auto 8px;}
    .main-wrap .sec02 .list-box {gap: 10px;}
    .main-wrap .sec02 .list-box li {padding: 0 30px; flex: 100%;}
    .main-wrap .sec02 .list-box li {display: none;}
    .main-wrap .sec02 .list-box li:nth-child(-n+4) {display: flex;}
    .main-wrap .sec02 .more-button {display: block;}

    .main-wrap .sec03 .list-box {padding: 0; flex-direction: column;}
    .main-wrap .sec03 .list-box li {width: 100%; height: 420px; align-items: center;}
    .main-wrap .sec03 .list-box li p {margin-bottom: 40px;}
    .main-wrap .sec03 .list-box li img {margin-left: auto;}

}

@media (max-width:480px) {
    .main-wrap .sec01 .list-box li img {height: 48px; margin-right: 24px;}
}

/*===========================================================================
    소개페이지
============================================================================*/
.about-wrap {}
.about-wrap .top-area .pc {display:block;}
.about-wrap .top-area .mobile {display:none;}
.about-wrap .top-area {height: 260px; border-bottom: 1px solid #eeeeee; display: flex; flex-direction: column; justify-content: center;}
.about-wrap .top-area h2 {font-size: 4.8rem; margin-bottom: 30px; font-weight: bold; line-height: 1; display:flex; align-items:center; justify-content:space-between;}
.about-wrap .top-area p {font-size: 1.8rem; color: #555555;}
/*.about-wrap .top-area .button-group {margin-top: 30px;}*/
.about-wrap .top-area .button-group {margin-top: 0;}
.about-wrap .top-area .button-group button {width: 200px; height: 44px; font-size: 1.6rem;}
.about-wrap .top-area .button-group button.main-button {margin-right: 20px; border:0; display: inline-flex; align-items: center; width:auto;}
.about-wrap .top-area .button-group button.main-button i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; }
.about-wrap .anchor-box {z-index: 100; position: sticky; top: 0; height: 80px; background: var(--main-color); display: flex; align-items: center; justify-content: center;}
.about-wrap .anchor-box.static {position: static;}
.about-wrap .anchor-box .swiper {height: 100%;}
.about-wrap .anchor-box .swiper-wrapper {align-items: center; justify-content: center;}
.about-wrap .anchor-box a {position: relative; font-size: 2rem; font-weight: normal; color: #fff; white-space: nowrap; cursor:pointer;}
.about-wrap .anchor-box li {width: auto; text-align: center; display: flex; align-items: center;}
.about-wrap .anchor-box li:last-child {margin-right: 0 !important;}
.about-wrap .anchor-box a:hover {font-weight: 600;}
.about-wrap .anchor-box a.active {font-weight: 600;}
.about-wrap .anchor-box a.active::after {content:''; position: absolute; left: 0; top: calc(100% + 8px); width: 100%; height: 2px; background: #fff;}
.about-wrap .anchor-box li.active a {font-weight: 600;}
.about-wrap .anchor-box li.active a::after {content:''; position: absolute; left: 0; top: calc(100% + 8px); width: 100%; height: 2px; background: #fff;}
.about-wrap section {padding: 150px 0; background: #fff;}
.about-wrap section .container > h5.main-color {font-size: 2.4rem; margin-bottom: 20px; line-height: 1; font-weight: bold; text-align: center;}
.about-wrap section .container > h3 {font-size: 4.8rem; font-weight: bold; text-align: center;}
.about-wrap section .container > p {font-size: 2rem; color: #555; margin-top: 30px; text-align: center;}
.about-wrap section .content-group {margin-top: 60px; gap: 30px; display: flex; align-items: center; flex-wrap: wrap;}
.about-wrap section .content-group li {flex: 0 0 calc(100% / 3 - 20px); border: 1px solid var(--basic-border); border-radius: 8px; overflow: hidden;}
.about-wrap section .button-group {margin-top: 60px;}
.about-wrap section .button-group button,
.about-wrap section .button-group a.main-button,
.about-wrap section .button-group a.main-outline-button {font-size: 2rem; width: 240px; height: 58px; line-height: 58px;}
.about-wrap section .button-group button:first-child,
.about-wrap section .button-group a.main-button:first-child {border:0;}

/* 기능 및 특징 */
.about-wrap .sec01 {padding-bottom: 0;}
.about-wrap .sec01 .content-group li {padding: 60px 30px; border-radius: 8px; align-self:normal; overflow: hidden;}
.about-wrap .sec01 .content-group li i {display: block; margin: 0 auto 38px;}
.about-wrap .sec01 .content-group li:nth-child(1) i {width: 62px; height: 66px; background: url(../img/icon/icon-about-sec01-01.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li:nth-child(2) i {width: 73px; height: 66px; background: url(../img/icon/icon-about-sec01-02.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li:nth-child(3) i {width: 63px; height: 66px; background: url(../img/icon/icon-about-sec01-03.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li:nth-child(4) i {width: 65px; height: 66px; background: url(../img/icon/icon-about-sec01-04.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li:nth-child(5) i {width: 78px; height: 66px; background: url(../img/icon/icon-about-sec01-05.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li:nth-child(6) i {width: 63px; height: 66px; background: url(../img/icon/icon-about-sec01-06.svg) no-repeat center center / 100%;}
.about-wrap .sec01 .content-group li h4 {font-size: 2.4rem; font-weight: 600; margin-bottom: 20px; text-align: center;}
.about-wrap .sec01 .content-group li p {font-size: 1.6rem; line-height: 2; color: #555555; text-align: center;}
/* 뉴스/소식 */
.about-wrap .sec02 {padding-bottom: 150px;}
.about-wrap .sec02 .content-group li .img-box {width: 100%; height: 220px;}
.about-wrap .sec02 .content-group li .img-box img {width: 100%; height: 100%; object-fit: cover;}
.about-wrap .sec02 .content-group li .text-box {padding: 30px;}
.about-wrap .sec02 .content-group li .text-box span {font-size: 1.6rem; margin-bottom: 16px; font-weight: 600; line-height: 1; display: block;}
.about-wrap .sec02 .content-group li .text-box span.news {color: #254e9b;}
.about-wrap .sec02 .content-group li .text-box span.word {color: #2a88f9;}
.about-wrap .sec02 .content-group li .text-box h4 {font-size: 2.4rem; margin-bottom: 16px; font-weight: 600; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.about-wrap .sec02 .content-group li .text-box .description {height:52px; color: #555555; margin-bottom: 26px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.about-wrap .sec02 .content-group li .text-box .date {font-size: 1.4rem; font-weight: 400; color: #999999;}
/* 민간범용 공공 클라우드 서비스 */
.about-wrap .sec03 {background: #f6f8fa;}
.about-wrap .sec03 .content-group {}
.about-wrap .sec03 .content-group li {width: 345px; height: 412px; border-radius: 10px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 0; position: relative;}
.about-wrap .sec03 .content-group li img {width: auto;}
.about-wrap .sec03 .content-group li .hover-box {opacity: 0; background: var(--main-color); display: flex; justify-content: center; flex-direction: column; width: 100%; height: 100%; position: absolute; text-align: center; padding: 100px 0 74px; transition: 0.2s;}
.about-wrap .sec03 .content-group li:hover .hover-box {opacity: 1;}
.about-wrap .sec03 .content-group li .hover-box h4 {font-size: 2.8rem; margin-bottom: 24px; color: #fff; font-weight: bold;}
.about-wrap .sec03 .content-group li .hover-box p {font-size: 1.6rem; color: #fff;}
.about-wrap .sec03 .content-group li .hover-box a {display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-top: auto; position: relative; align-self:center}
.about-wrap .sec03 .content-group li .hover-box a::after {content:''; width: 100%; height: 1px; background: #fff; position: absolute; top: calc(100% + 4px);}
.about-wrap .sec03 .content-group li .hover-box a i {width: 10px; height: 9px; background: url('../img/icon/icon-about-sec03-arrow.svg'); margin-left: 10px;}

/* 민간솔루션 파트너 */
.about-wrap .sec04 .aboutPartnerSwiper li {padding: 64px 0; text-align: center; display: flex; flex-direction: column; }
.about-wrap .sec04 .aboutPartnerSwiper li .partner {font-size: 1.6rem; margin-bottom: 20px; font-weight: bold; color: #999999;}
.about-wrap .sec04 .aboutPartnerSwiper li h4 {font-size: 2.4rem; font-weight: bold; margin-bottom: 56px;}
.about-wrap .sec04 .aboutPartnerSwiper li img {width: auto; height: 36px; margin-bottom: 70px; object-fit: none;}
.about-wrap .sec04 .aboutPartnerSwiper li a {display: inline-flex; align-items: center; justify-content: center; margin-top: auto; position: relative; align-self:center}
.about-wrap .sec04 .aboutPartnerSwiper li a::after {content:''; width: 100%; height: 1px; background: #111; position: absolute; top: calc(100% + 4px);}
.about-wrap .sec04 .aboutPartnerSwiper li a i {width: 10px; height: 9px; background: url('../img/icon/icon-about-sec03-arrow-black.svg'); margin-left: 10px;}
.about-wrap .sec04 .aboutPartnerSwiper li a:hover {color: var(--main-color);}
.about-wrap .sec04 .aboutPartnerSwiper li a:hover::after {background: var(--main-color);}
.about-wrap .sec04 .aboutPartnerSwiper li a:hover i {background: url('../img/icon/icon-about-sec03-arrow-black-active.svg');}
.about-wrap .sec04 .content-group {position: relative;}
/* .about-wrap .sec04 .content-group .navigation-box {width: 100%; position: absolute; top: 50%; transform: translateY(-50%);} */
.about-wrap .sec04 .content-group .swiper-button-prev {left: -80px;}
.about-wrap .sec04 .content-group .swiper-button-prev::after {content:''; width:50px; height:80px; background: url('../img/icon/icon-about-prev-arrow.svg') no-repeat center center / cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.about-wrap .sec04 .content-group .swiper-button-next {right: -80px;}
.about-wrap .sec04 .content-group .swiper-button-next::after {content:''; width:50px; height:80px; background: url('../img/icon/icon-about-next-arrow.svg') no-repeat center center / cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

/* 데이터센터 */
.about-wrap .sec05 {background: #f6f8fa;}
.about-wrap .sec05 .content-group {justify-content: center; flex-wrap: nowrap; gap: 0;}
.about-wrap .sec05 .content-group .list-box {}
.about-wrap .sec05 .content-group .list-box .circle-box {width: 200px; height: 200px; border-radius: 50%; background: #fff; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.about-wrap .sec05 .content-group .list-box .circle-box i {}
.about-wrap .sec05 .content-group .list-box01 .circle-box i {width: 75px; height: 56px; background: url(../img/icon/icon-about-datacenter-01.svg) no-repeat center center;}
.about-wrap .sec05 .content-group .list-box02 .circle-box i {width: 60px; height: 64px; background: url(../img/icon/icon-about-datacenter-02.svg) no-repeat center center;}
.about-wrap .sec05 .content-group .list-box03 .circle-box i {width: 74px; height: 56px; background: url(../img/icon/icon-about-datacenter-03.svg) no-repeat center center;}
.about-wrap .sec05 .content-group .list-box p {margin-top: 40px; font-size: 2.4rem; color: #333; text-align: center;}
.about-wrap .sec05 .content-group .plus {font-size: 10rem; margin: -100px 64px 0; color: #333; font-weight: 100;}

.about-wrap .sec05 .datacenter-locations {
    width: 100%;
    max-width: 980px;
    margin: 50px auto 0;
    display: block;
    text-align: left;
}
.about-wrap .sec05 .datacenter-location {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
}
.about-wrap .sec05 .datacenter-location + .datacenter-location {
    margin-top: 24px;
}
.about-wrap .sec05 .datacenter-location-title {
    display: block;
    font-size: 2.1rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.02em;
}
.about-wrap .sec05 .datacenter-location-address {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 1.7rem;
    color: #6b7380;
    line-height: 1.6;
    white-space: normal;
    word-break: keep-all;
}

.about-wrap .sec06 .container {display: flex; align-items: center;}
.about-wrap .sec06 .img-box {padding-right: 100px; flex: 1;}
.about-wrap .sec06 .text-box { flex: 1;}
.about-wrap .sec06 .text-box li:not(:last-child) {margin-bottom: 80px;}
.about-wrap .sec06 .text-box li h5 {font-size: 2.5rem; margin-bottom: 26px; font-weight: bold; line-height: 1;}
.about-wrap .sec06 .text-box li p {font-size: 1.8rem; color: #555555;}

.about-wrap .sec07 {background: #f6f8fa;}
/* 주요(보인) 인증 (공통) */
.key-certification-group {margin-top: 60px; gap: 30px; display: flex; align-items: center; flex-wrap: wrap;}
.key-certification-group li {flex: 0 0 calc(100% / 5 - 30px); height: 84px; padding: 20px; border: 1px solid var(--basic-border); border-radius: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; overflow: hidden;}
.key-certification-group li p {width: 100%; text-align: center; white-space: nowrap;}
.key-certification-group li img {width: 80%; margin-bottom: 4px;}

.about-wrap .sec08 .content-group li {flex: 0 0 calc(100% / 5 - 24px); height: 84px; border-radius: 0; display: flex; align-items: center; justify-content: center;}



@media (max-width:1620px) {
    .about-wrap .sec04 .content-group {padding: 0 60px;}
    .about-wrap .sec04 .content-group .swiper-button-prev {left: -10px;}
    .about-wrap .sec04 .content-group .swiper-button-next {right: -10px;}
}

@media (max-width:1320px) {
    .about-wrap .anchor-box {padding: 0 20px; overflow-x:auto;}
    .about-wrap .anchor-box .swiper-wrapper {justify-content: flex-start;}
    .about-wrap .anchor-box .swiper-wrapper .swiper-slide {width: auto;}

    .about-wrap section .content-group li {flex: 0 calc(100% / 2 - 20px);}

    .about-wrap .sec03 .content-group li {height: 340px; flex: 0 0 calc(100% / 3 - 20px);}

    .about-wrap .sec04 .aboutPartnerSwiper li {flex: 0 0 calc(100% / 2 - 15px);}
    .about-wrap .sec04 .content-group .swiper-button-prev {left: 20px;}
    .about-wrap .sec04 .content-group .swiper-button-next {right: 20px;}

    .about-wrap .sec06 .container {align-items: flex-start;}
    .about-wrap .sec06 .img-box {padding-right: 40px;}

    .key-certification-group li {flex: 0 0 calc(100% / 3 - 30px);}

    .about-wrap .sec08 .content-group li {flex: 0 0 calc(100% / 4 - 24px);}

}

@media (max-width:1000px) {
    .about-wrap .top-area {padding: 60px 0 50px;}
    .about-wrap .top-area .pc {display:none;}
    .about-wrap .top-area .mobile {display:block;}
    .about-wrap .top-area .mobile .button-group {margin-top:20px;}
    .about-wrap .top-area h2 {font-size: 4.4rem;}

    .about-wrap .top-area p br {display: none;}

    .about-wrap section {padding: 100px 0;}
    .about-wrap section .container > h5.main-color {font-size: 2rem; margin-bottom: 14px; font-weight: 600;}
    .about-wrap section .container > h3 {font-size: 3.6rem;}
    .about-wrap section .content-group {margin-top: 54px; margin-top: 40px;}
    .about-wrap section .content-group li {flex: 100%;}

    .about-wrap .sec01 .content-group li {padding: 40px 30px;}

    .about-wrap .sec02 .content-group li .text-box {padding: 30px 30px 20px;}

    .about-wrap .sec03 .content-group li {flex: 0 0 100%;}

    .about-wrap .sec05 .content-group .list-box p {font-size: 2rem; margin-top: 40px;}
    .about-wrap .sec05 .content-group .list-box .circle-box {width: 160px; height: 160px;}
    .about-wrap .sec05 .content-group .plus {margin: -100px 40px 0;}
    .about-wrap .sec05 .content-group .list-box01 .circle-box i {background: url(../img/icon/icon-about-datacenter-01.svg) no-repeat center center / 74%;}
    .about-wrap .sec05 .content-group .list-box02 .circle-box i {background: url(../img/icon/icon-about-datacenter-02.svg) no-repeat center center / 74%;}
    .about-wrap .sec05 .content-group .list-box03 .circle-box i {background: url(../img/icon/icon-about-datacenter-03.svg) no-repeat center center / 74%;}

    .about-wrap .sec05 .datacenter-locations {max-width: 860px; margin-top: 56px;}
    .about-wrap .sec05 .datacenter-location + .datacenter-location {margin-top: 22px;}
    .about-wrap .sec05 .datacenter-location-title {font-size: 1.95rem;}
    .about-wrap .sec05 .datacenter-location-address {font-size: 1.58rem;}

    .about-wrap .sec08 .content-group li {flex: 0 0 calc(100% / 3 - 14px);}

}

@media (max-width:800px) {
    .about-wrap .top-area h2 {font-size: 3.4rem; flex-direction:column; margin-bottom:20px; align-items:flex-start;}
    .about-wrap .top-area p {font-size: 1.6rem;}
    .about-wrap .top-area .button-group button {flex: 1;}

    .about-wrap .anchor-box {height: 64px;}
    .about-wrap .anchor-box a {font-size: 1.8rem;}

    .about-wrap section {padding: 80px 0;}
    .about-wrap section .container > p br {display: none;}
    .about-wrap section .button-group {margin-top: 20px;}
    .about-wrap section .button-group button,
    .about-wrap section .button-group a.main-button,
    .about-wrap section .button-group a.main-outline-button {font-size: 1.6rem}


    .about-wrap .sec04 .aboutPartnerSwiper li {padding: 54px 0; flex: none;}
    .about-wrap .sec04 .button-group button,
    .about-wrap .sec04 .button-group a.main-button,
    .about-wrap .sec04 .button-group a.main-outline-button {width: auto; flex: 1;}
    .about-wrap .sec04 .content-group {padding: 0;}
    .about-wrap .sec04 .content-group .navigation-box {display: none;}
    .about-wrap .sec04 .content-group .swiper-button-prev {left: -10px;}
    .about-wrap .sec04 .content-group .swiper-button-next {right: -10px;}
    .about-wrap .sec04 .content-group .swiper-button-prev::after, .about-wrap .sec04 .content-group .swiper-button-next::after {width: 34px; height: 60px;}

    .about-wrap .sec05 .content-group {flex-direction: column;}
    .about-wrap .sec05 .content-group .list-box {margin: 0;}
    .about-wrap .sec05 .content-group .list-box p {font-size: 2rem; margin-top: 20px;}
    .about-wrap .sec05 .content-group .plus {margin: 0 0 20px; font-size: 6rem;}
    .about-wrap .sec05 .datacenter-locations {max-width: 100%; margin-top: 44px;}
    .about-wrap .sec05 .datacenter-location + .datacenter-location {margin-top: 20px;}
    .about-wrap .sec05 .datacenter-location-title {font-size: 1.8rem;}
    .about-wrap .sec05 .datacenter-location-address {font-size: 1.5rem;}

    .about-wrap .sec06 .container {display: block;}
    .about-wrap .sec06 .img-box {margin-bottom: 40px; padding-right:0;}
    .about-wrap .sec06 .text-box li:not(:last-child) {margin-bottom: 60px;}
    .about-wrap .sec06 .text-box li h5 {font-size: 2.4rem; margin-bottom: 20px;}

    .key-certification-group {gap: 20px;}
    .key-certification-group li {flex: 0 0 calc(100% / 2 - 10px); padding: 20px 0;}
    .key-certification-group li img {width: auto; height: 80%;}

    .about-wrap .sec08 .content-group {gap: 10px;}
    .about-wrap .sec08 .content-group li {flex: 0 0 calc(100% / 3 - 7px);}
    .about-wrap .sec08 .content-group li img {width: 90% !important;}

}

@media (max-width:480px) {
    .key-certification-group li p {font-size: 1.4rem; text-align: center;}

}


/*===========================================================================
    서브페이지 공통
============================================================================*/
/* 왼쪽 사이드바 */
.snb {width: 240px; padding: 50px 30px 0 0; border-right: 1px solid #dddddd;}
.snb .snb-title {font-size: 2.2rem; margin-bottom: 44px; font-weight: 600;}
.snb .nav-box {}
.snb .nav-box li {}
.snb .nav-box li.active p {color: var(--main-color);}
.snb .nav-box li p {padding: 15px 0; font-size: 1.8rem; font-weight: 600; line-height: 1; display: flex; align-items: center; position: relative; cursor: pointer;}
.snb .nav-box li p::before {content: '+'; font-weight: 500; font-size: 2rem; line-height: 1; color: #333333; position: absolute; right: 0; }
.snb .nav-box li.active p::before {content: '-'; color: var(--main-color);}
.snb .nav-box li a {display: none; margin:0 0 16px 10px; line-height: 1; font-weight: 400; color: #999999;}
.snb .nav-box li a:hover {color: #333; font-weight: 500;}
.snb .nav-box li.active a {display: block;}
.snb .nav-box li:first-child p {padding-top: 0;}
/* .snb .nav-box li:last-child a {margin-bottom: 0;} */
.snb .nav-box li a.active {color: #333; font-weight: 500;}

/* 상단 페이지 영역 */
.pc-top-area {height: 260px; border-bottom: 1px solid  #eeeeee; display: flex; flex-direction: column; justify-content: center;}
.pc-top-area h2 {font-size: 4.8rem; margin-bottom: 30px; font-weight: bold; line-height: 1;}
.pc-top-area .breadcrumb {display: flex;}
.pc-top-area .breadcrumb li:not(:last-child) {position: relative; margin-right: 8px; padding-right: 12px;}
.pc-top-area .breadcrumb li::after {content: '/'; color: #aaa; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.pc-top-area .breadcrumb li:last-child:after {display: none;}
.pc-top-area .breadcrumb li p {font-size: 1.8rem; line-height: 1; color: #aaaaaa;}
.pc-top-area .breadcrumb li:last-child {position: relative; cursor: pointer;}
.pc-top-area .breadcrumb li:last-child p {color: #555555; display: flex; align-items: center;}
.pc-top-area .breadcrumb li:last-child i {width: 14px; height: 8px; background: url('../img/icon/icon-breadcrumb-arrow.svg') no-repeat center center / cover; margin-left: 10px;}
.pc-top-area .breadcrumb li:last-child .sub-breadcrumb {z-index:1; display: none; position: absolute; top: calc(100% + 14px); min-width:100px; width: calc(100% + 20px); padding: 10px; border: 1px solid var(--basic-border); background: #fff; border-radius: 4px; left: -10px;}
.pc-top-area .breadcrumb li:last-child .sub-breadcrumb a {line-height: 1.8; font-size: 1.5rem; color: #aaa; white-space:nowrap; font-weight:400;}
.pc-top-area .breadcrumb li:last-child .sub-breadcrumb a:hover {color: #111;}
.pc-top-area .breadcrumb li:last-child.active i {transform: rotate(-180deg);}
.pc-top-area .breadcrumb li:last-child.active .sub-breadcrumb {display: block;}
.mobile-top-area {display: none;}

/* 검색 박스 */
.search-box {display: flex; align-items: center; position: relative; width: 350px; height: 50px; padding: 14px 16px; border: 1px solid var(--basic-border); border-radius: 4px;}
.search-box input {width: 100%; height: 100%; border: 0; padding: 0 20px 0 0;}
.search-box button {padding: 0; border: 0; margin: 0;}
.search-box button i {width: 20px; height: 20px; background: url(../img/icon/icon-search-magnifier.svg) no-repeat center center;}

@media (max-width:1300px) {
    .service-wrap .contents-group .snb {display: none;}

    /* .pc-top-area .container {padding-left: 90px; padding-right: 90px;} */
    .pc-top-area {display: none;}
    .mobile-top-area {display: block; overflow: hidden;}
    .mobile-top-area .top {height: 60px; background: var(--main-color);}
    .mobile-top-area .top h2 {font-size: 2rem; font-weight: 600; line-height: 60px; color: #fff; text-align: center;}
    .mobile-top-area .bottom {overflow-y: auto; display: flex; background: #f4f6f9;}
    .mobile-top-area .bottom a {white-space: nowrap; margin: 20px 0 20px 20px; font-size: 1.5rem; color: #888888;}
    .mobile-top-area .bottom a:last-child {margin-right: 20px;}
    .mobile-top-area .bottom a.active {color: #191919;}
    .mobile-top-area .swiper-button-next, .mobile-top-area .swiper-button-prev {top: 30px;}
    .mobile-top-area .swiper-button-next::after, .mobile-top-area .swiper-button-prev::after {width: 12px; height: 20px;}
}

@media (max-width:800px) {
    .search-box {height: 44px;}

}

/*===========================================================================
    서비스 페이지
============================================================================*/
.service-wrap {}

.service-wrap .contents-group .container {display: flex;}

.service-wrap .contents-group .contents-box {width: calc(100% - 240px); padding: 100px 70px 0;}
.service-wrap .contents-group .contents-box .subject-box {margin-bottom: 100px; display: flex; align-items: center; justify-content: space-between; position:relative;}
.service-wrap .service-title {font-size: 4rem; margin-bottom: 34px; font-weight: 600; display: flex; align-items: center;}
.service-wrap .box > .box-description {margin:0 0 86px; font-size: 1.8rem; color: #555555;}
.service-wrap .contents-group .contents-box .subject-box .text-box .service-title i {width: 40px; height: 40px; margin-right: 16px; background-size: 100%; background-repeat: no-repeat; background-position: center;}
.service-wrap .contents-group .contents-box .subject-box .text-box .service-description { font-size: 2rem; color: #555555; font-weight: 400;}
.service-wrap .contents-group .contents-box .subject-box .button-group {justify-content:flex-start; margin-bottom: auto; position:absolute; top:0; right:0;}
.service-wrap .contents-group .contents-box .subject-box .button-group button {width: 140px; height: 44px; font-size: 1.6rem;}
.service-wrap .contents-group .contents-box .subject-box .button-group button:first-child {margin-right: 20px; border:0;}

.service-wrap .contents-group .box {padding: 150px 0; border-bottom: 1px solid #dddddd;}
.service-wrap .contents-group .box .img-box img {width: auto; max-width: 100%;}
.service-wrap .contents-group .box:last-child {border-bottom: 0;}
.service-wrap .contents-group .box01 {padding-top: 0;}
.service-wrap .box .service-title {margin-bottom: 40 px;}
.service-wrap .contents-group .box .number-list {}
.service-wrap .contents-group .box .number-list li {padding-left: 54px; margin-bottom: 60px;}
.service-wrap .contents-group .box .number-list li:last-child {margin-bottom: 0;}
.service-wrap .contents-group .box .number-list li h4 {font-size: 2.2rem; margin-bottom: 20px; position: relative;}
.service-wrap .contents-group .box .number-list li h4::before {content: ''; font-size: 2.8rem; color: #d0d8e3; font-weight: bold; position: absolute; top: 50%; left: -54px; transform: translateY(-50%);}
.service-wrap .contents-group .box .number-list li:nth-child(1) h4::before {content: '01';}
.service-wrap .contents-group .box .number-list li:nth-child(2) h4::before {content: '02';}
.service-wrap .contents-group .box .number-list li:nth-child(3) h4::before {content: '03';}
.service-wrap .contents-group .box .number-list li:nth-child(4) h4::before {content: '04';}
.service-wrap .contents-group .box .number-list li:nth-child(5) h4::before {content: '05';}
.service-wrap .contents-group .box .number-list li p {font-size: 1.6rem; color: #555555; font-weight: 300;}
.service-wrap .contents-group .box table:not(:last-child) {margin-bottom: 30px;}
.service-wrap .contents-group .box .overflow-box {overflow-x: auto; overflow-y: hidden;}
.service-wrap .contents-group .box .overflow-box:not(:last-child) {margin-bottom: 30px;}
.service-wrap .contents-group .box table .left {text-align: left;}
.service-wrap .contents-group .box table thead th {background: #e7eaee; font-weight: 600;}
.service-wrap .contents-group .box table tbody th:first-child {border-left: 0;}
.service-wrap .contents-group .box table tbody td:last-child {border-right: 0;}
.service-wrap .contents-group .box table th, .service-wrap .contents-group .box table td {border: 1px solid #d6d6d6; padding: 20px 20px 20px 30px;}
.service-wrap .contents-group .box table thead th {padding: 20px 10px;}
.service-wrap .contents-group .box table p {line-height: 1.8; color: #333333;}
.service-wrap .contents-group .box table p.sub-text01 {color: #777777;}
.service-wrap .contents-group .box table p.sub-text02 {margin-left: 10px; color: #777777;}
/* 연관 서비스 */
.service-wrap .contents-group .box .related-services {display: flex; align-items: center; flex-wrap: wrap; gap: 70px;}
.service-wrap .contents-group .box .related-services li {text-align: center;}
.service-wrap .contents-group .box .related-services li .circle {width: 184px; height: 184px; margin: 0 auto 30px; border-radius: 50%; border: 1px solid var(--basic-border); display: flex; align-items: center; justify-content: center;}
.service-wrap .contents-group .box .related-services li .circle img {width: auto;}
.service-wrap .contents-group .box .related-services li .circle i {width: 56px; height: 56px; background-size: cover;}
.service-wrap .contents-group .box .related-services li p {font-size: 2rem; font-weight: bold; line-height: 1;}
.service-wrap .contents-group .box .related-services li button {width: 120px; font-size: 1.6rem; border-radius: 20px; margin-top: 16px;}
/* 요금 기준 */
.service-wrap .contents-group .box05 .overflow-box:nth-child(2) {margin-bottom: 70px;}
.service-wrap .contents-group .box05 .info-text-right {display: block; text-align: right; margin-bottom: 10px; color: #555555;}

.service-wrap .contents-group .box06 .button-group button {width: 200px; height: 57px; font-size: 2rem;}
.service-wrap .contents-group .box06 .button-group button:first-child {margin-right: 20px; border:0;}

@media (max-width:1300px) {
    .service-wrap .contents-group .snb {display: none;}
    .service-wrap .contents-group .contents-box {width: 100%;}
    .service-wrap .contents-group .contents-box .subject-box {display: block;}
    .service-wrap .contents-group .contents-box .subject-box .text-box {margin-bottom: 30px;}

    .service-wrap .contents-group .box .related-services {gap: 50px;}
    .service-wrap .contents-group .box .related-services li .circle {width: 140px; height: 140px;}

    .service-wrap .contents-group .box02 .overflow-box01 table {min-width: 1000px;}


}

@media (max-width:1000px) {
    .service-wrap .contents-group .box05 .overflow-box table {min-width: 800px;}
    .service-wrap .contents-group .contents-box .subject-box .button-group {position:static;}
}

@media (max-width:800px) {
    .service-wrap .pc-top-area .container {padding-left: 20px; padding-right: 20px;}
    .service-wrap .contents-group .contents-box {padding: 40px 0 0;}

    .service-wrap .service-title {font-size: 2.4rem; margin-bottom: 20px;}
    .service-wrap .contents-group .contents-box .subject-box {margin-bottom: 56px;}
    .service-wrap .contents-group .contents-box .subject-box .text-box .service-title i{width: 26px; height: 26px; margin-right: 10px;}
    .service-wrap .contents-group .contents-box .subject-box .text-box .service-description {font-size: 1.5rem;}
    .service-wrap .contents-group .contents-box .subject-box .button-group button {width: 100px; height: 32px; font-size: 1.5rem; padding: 0;}
    .service-wrap .contents-group .contents-box .subject-box .button-group button:first-child {margin-right: 10px;}

    .service-wrap .contents-group .box table th, .service-wrap .contents-group .box table td {font-size: 1.4rem; padding: 20px;}
    .service-wrap .contents-group .box table p {font-size: 1.4rem;}
    .service-wrap .contents-group .box .info-box p {font-size: 1.4rem;}

    .service-wrap .contents-group .box {padding: 56px 0;}
    .service-wrap .contents-group .box01 {padding-top: 0;}
    .service-wrap .box .service-title {font-size: 2rem; margin-bottom: 14px;}
    .service-wrap .contents-group .box01 .service-title {display: block;}
    .service-wrap .contents-group .box01 .service-title::after {content:'클라우드 서비스 이용을 위한 기본 서버를 제공합니다.'; display: block; font-size: 1.5rem; color: #555555; margin:16px 0 38px; font-weight: 500;}
    .service-wrap .contents-group .box .number-list li {padding-left: 30px; margin-bottom: 40px;}
    .service-wrap .contents-group .box .number-list li h4 {font-size: 1.6rem; margin-bottom: 16px; font-weight: 600;}
    .service-wrap .contents-group .box .number-list li h4::before {font-size: 2rem; left: -30px;}
    .service-wrap .contents-group .box .number-list li p {font-size: 1.4rem; margin-left: -30px;}

    .service-wrap .contents-group .box02 .overflow-box02 table {min-width: 700px;}
    .service-wrap .contents-group .box02 .overflow-box02 table table {min-width: 100%;}
    .service-wrap .contents-group .box02 .overflow-box02 colgroup col:first-child {width: 120px;}

    .service-wrap .contents-group .box .related-services {flex-wrap: wrap; gap: 40px; justify-content:center;}
    .service-wrap .contents-group .box .related-services li {flex: 0 0 calc(50% - 40px);}
    .service-wrap .contents-group .box .related-services li .circle {width: 120px; height: 120px; margin-bottom: 18px;}
    .service-wrap .contents-group .box .related-services li .circle img {width: auto; height: 45px; }
    .service-wrap .contents-group .box .related-services li p {font-size: 1.6rem; margin-bottom: 10px;}
    .service-wrap .contents-group .box .related-services li button {width: 100px; min-height: 32px; font-size: 1.4rem;}

    .service-wrap .contents-group .box05 .info-text-right {font-size: 1.4rem;}

    .service-wrap .contents-group .box06 .service-title {display: block; margin-bottom: 30px;}
    .service-wrap .contents-group .box06 .service-title::after {content:'클라우드 서비스 이용을 위한 기본 서버를 제공합니다.'; display: block; font-size: 1.5rem; color: #555555; margin:16px 0 0; font-weight: 500;}
    .service-wrap .contents-group .box06 .button-group button {width: 100px; height: 36px; min-height: 36px; line-height: 36px; font-size: 1.4rem; padding: 0;}
    .service-wrap .contents-group .box06 .button-group button:first-child {margin-right: 10px;}

    /* container */
    .service13-wrap .box02 > table > colgroup col:nth-child(1) {width: 120px;}
}



/*===========================================================================
    솔루션
============================================================================*/
.solution-wrap .box > .box-description {margin-bottom: 40px;}
.solution-wrap .contents-group .box .number-list {margin-top: 86px;}
.solution-wrap .contents-group .snb .nav-box li a {margin: 0 0 16px 10px;}
.solution-wrap .contents-group .snb .nav-box li p {}
.solution-wrap .contents-group .basic-box-list {display: flex; align-items: center; flex-wrap: wrap; gap: 20px;}
.solution-wrap .contents-group .basic-box-list li {min-width: 220px; height: 70px; font-size: 1.8rem; padding: 10px 30px; background: #f6f8fa; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.solution-wrap .contents-group .inquiry-button {width: 175px; height: 57px; font-size: 2rem; margin-top: 10px;}
.solution-wrap .contents-group .inquiry-button:first-child {border:0;}
.solution-wrap .contents-group .inquiry-button i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; }

.solution-wrap .modal .modal-body table tbody th {padding:10px 20px; text-align:left;}
.solution-wrap .modal .modal-body .overflow-table {max-width:60vh; overflow-y:auto;}
.solution-wrap .modal .modal-body table td .three-box {display:flex; align-items:center;}
.solution-wrap .modal .modal-body table td .three-box select {height:45px;}
.solution-wrap .modal .modal-body table td .three-box > *:not(.dsline) {width:114px; flex:1;}
.solution-wrap .modal .modal-body table td .three-box .dsline {width:auto; margin:0 6px;}

.solution-wrap .contents-group .box .number-list li {padding-left: 90px;}
.solution-wrap .contents-group .box .number-list li h4::before {content:'' !important; width: 56px; height: 56px; left: -90px; top: 0; transform: none;}
.solution-wrap .contents-group .box .img-box {margin-top: 60px;}
.solution-wrap .contents-group .box01 .img-box {margin-top: 110px;}
.solution-wrap .contents-group .box01 .img-box .service-title {margin-bottom: 60px; line-height: 1.4 ;}
.solution-wrap .contents-group .box01 .box {padding-bottom: 0;}

/* 솔루션 - 클라우드 - 에너지 산업 공공 클라우드 */
.solution-wrap01 {}
.solution-wrap01 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution01-character01.svg) no-repeat center center / contain;}
.solution-wrap01 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution01-character02.svg) no-repeat center center / contain;}
.solution-wrap01 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution01-character03.svg) no-repeat center center / contain;}
.solution-wrap01 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution01-character04.svg) no-repeat center center / contain;}
.solution-wrap01 .contents-group .box .number-list li:nth-child(5) h4::before {background: url(../img/solution/icon/icon-solution01-character05.svg) no-repeat center center / contain;}
.solution-wrap01 .contents-group .box .number-list li:nth-child(6) h4::before {background: url(../img/solution/icon/icon-solution01-character06.svg) no-repeat center center / contain;}
.solution-wrap01 .key-certification-group {margin-top: 0;}

/* 솔루션 - 클라우드 - 공공 범용 클라우드 */
.solution-wrap02 {}
.solution-wrap02 .tab-group {margin-top:-20px; margin-bottom: -60px;}
.solution-wrap02 .anchor-box {z-index:10; position: sticky; top: 0; width: 100%; background: #fff; padding: 20px 0 10px;}
.solution-wrap02 .anchor-box.end {justify-content: flex-end; }
.solution-wrap02 .tab-group button {width: 150px; height: 44px; color: #999; border: 1px solid #dddddd; padding: 0; margin-right: 20px; border-radius: 20px;}
.solution-wrap02 .tab-group button:last-child {margin-right: 0;}
.solution-wrap02 .tab-group button.active {background: var(--main-color); border-color: var(--main-color); color: #fff;}
.solution-wrap02 .contents-group .inquiry-box {margin-top:80px; border-top: 1px solid var(--basic-border);}
.solution-wrap02 .box .box {padding-bottom: 0;}
.solution-wrap02 .contents-group .content .box:last-child {padding-bottom:0;}

/* NHN Cloud */

.solution-wrap02 .contents-group .nhn-content .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution02-nhn-character01.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .nhn-content .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution02-nhn-character02.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .nhn-content .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution02-nhn-character03.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .nhn-content .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution02-nhn-character04.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .nhn-content .box .number-list li:nth-child(5) h4::before {background: url(../img/solution/icon/icon-solution02-nhn-character05.svg) no-repeat center center / contain;}

/* Naver Cloud */
.solution-wrap02 .contents-group .naver-content .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution02-naver-character01.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .naver-content .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution02-naver-character02.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .naver-content .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution02-naver-character03.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .naver-content .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution02-naver-character04.svg) no-repeat center center / contain;}

/* KT Cloud */
.solution-wrap02 .contents-group .kt-content .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution02-kcloud-character01.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .kt-content .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution02-kcloud-character02.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .kt-content .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution02-kcloud-character03.svg) no-repeat center center / contain;}
.solution-wrap02 .contents-group .kt-content .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution02-kcloud-character04.svg) no-repeat center center / contain;}

.chinese {font-family: "Noto Sans TC", sans-serif; font-weight:300; color:#555555;}

/* 솔루션 - 클라우드 - 클라우드 지원관리 */
.solution-wrap03 {}
.solution-wrap03 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution03-character01.svg) no-repeat center center / contain;}
.solution-wrap03 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution03-character02.svg) no-repeat center center / contain;}
.solution-wrap03 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution03-character03.svg) no-repeat center center / contain;}
.solution-wrap03 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution03-character04.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - 프라이빗 클라우드 구축 */
.solution-wrap04 {}
.solution-wrap04 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution04-character01.svg) no-repeat center center / contain;}
.solution-wrap04 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution04-character02.svg) no-repeat center center / contain;}
.solution-wrap04 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution04-character03.svg) no-repeat center center / contain;}
.solution-wrap04 .contents-group .box .basic-box-list i {width: 42px; height: 42px; margin-right: 20px; background-repeat: no-repeat; background-size: contain; }
.solution-wrap04 .contents-group .box .kps {background: url(../img/solution/icon/icon-solution-kps.svg);}
.solution-wrap04 .contents-group .box .kdn {background: url(../img/solution/icon/icon-solution-kdn.svg);}

/* 솔루션 - 클라우드 - 에너지 ICT 플랫폼(E:um) */
.solution-wrap05 {}

.solution-wrap05 .contents-group .box .number-list li.img-sol0401:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution05-character02.svg) no-repeat center center / contain;}
.solution-wrap05 .contents-group .box .number-list li.img-sol0402:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution05-character01.svg) no-repeat center center / contain;}
.solution-wrap05 .contents-group .box .number-list li.img-sol0403:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution05-character03.svg) no-repeat center center / contain;}

.solution-wrap05 .contents-group .box .number-list li.img-kata0401:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution07-character04.svg) no-repeat center center / contain;}
.solution-wrap05 .contents-group .box .number-list li.img-kata0402:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution03-character01.svg) no-repeat center center / contain;}
.solution-wrap05 .contents-group .box .number-list li.img-kata0403:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution11-character04.svg) no-repeat center center / contain;}

.solution-wrap .contents-group .service-destination-box {}
.solution-wrap .contents-group .service-destination-box ul {margin-top: 50px;}
.solution-wrap .contents-group .service-destination-box ul li:not(:last-child) {margin-bottom: 50px;}
.solution-wrap .contents-group .service-destination-box ul li h4 {font-size: 2rem; font-weight: 600; margin-bottom: 20px; line-height: 1;}
.solution-wrap .contents-group .service-destination-box ul li p {font-size: 1.8rem; padding: 30px; background: #f6f8fa; border-radius: 4px; color: #333;}
.solution-wrap .contents-group .fee-box .box-description {margin-bottom: 0;}

/* 솔루션 - 클라우드 - K-GRID MG */
.solution-wrap06 {}
.solution-wrap06 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution06-character02.svg) no-repeat center center / contain;}
.solution-wrap06 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution06-character01.svg) no-repeat center center / contain;}
.solution-wrap06 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution06-character03.svg) no-repeat center center / contain;}
.solution-wrap06 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution06-character04.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - EVC */
.solution-wrap07 {}
.solution-wrap07 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:initial;}
.solution-wrap07 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution07-character01.svg) no-repeat center center / contain;}
.solution-wrap07 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution07-character02.svg) no-repeat center center / contain;}
.solution-wrap07 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution07-character03.svg) no-repeat center center / contain;}
.solution-wrap07 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution07-character04.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - AI기반 해상안전 위험예측 서비스 */
.solution-wrap08 {}
.solution-wrap08 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:initial;}
.solution-wrap08 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution08-character01.svg) no-repeat center center / contain;}
.solution-wrap08 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution08-character02.svg) no-repeat center center / contain;}
.solution-wrap08 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution08-character03.svg) no-repeat center center / contain;}
.solution-wrap08 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution08-character04.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - APC */
.solution-wrap09 {}
.solution-wrap09 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:initial;}
.solution-wrap09 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution09-character01.svg) no-repeat center center / contain;}
.solution-wrap09 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution09-character02.svg) no-repeat center center / contain;}
.solution-wrap09 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution09-character03.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - AI Vision */
.solution-wrap10 {}
.solution-wrap10 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:initial;}
.solution-wrap10 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution11-character04.svg) no-repeat center center / contain;}
.solution-wrap10 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution07-character03.svg) no-repeat center center / contain;}
.solution-wrap10 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution01-character01.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - K-ERP */
.solution-wrap11 {}
.solution-wrap11 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:auto;}
.solution-wrap11 .contents-group .box .number-list li:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution11-character01.svg) no-repeat center center / contain;}
.solution-wrap11 .contents-group .box .number-list li:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution11-character02.svg) no-repeat center center / contain;}
.solution-wrap11 .contents-group .box .number-list li:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution11-character03.svg) no-repeat center center / contain;}
.solution-wrap11 .contents-group .box .number-list li:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution11-character04.svg) no-repeat center center / contain;}

/* 솔루션 - 클라우드 - K-ESM */
.solution-wrap12 {}
.solution-wrap12 .contents-group .contents-box .subject-box .text-box .service-title i {background-size:initial;}
.solution-wrap12 .contents-group .box .number-list li.img-vpp0401:nth-child(1) h4::before {background: url(../img/solution/icon/icon-solution11-character03.svg) no-repeat center center / contain;}
.solution-wrap12 .contents-group .box .number-list li.img-vpp0402:nth-child(2) h4::before {background: url(../img/solution/icon/icon-solution11-character03.svg) no-repeat center center / contain;}
.solution-wrap12 .contents-group .box .number-list li.img-vpp0403:nth-child(3) h4::before {background: url(../img/solution/icon/icon-solution07-character03.svg) no-repeat center center / contain;}
.solution-wrap12 .contents-group .box .number-list li.img-vpp0404:nth-child(4) h4::before {background: url(../img/solution/icon/icon-solution05-character03.svg) no-repeat center center / contain;}


@media (max-width:800px) {
	.solution-wrap .modal table colgroup col:first-child {width:100%;}
	.solution-wrap .modal .modal-body table tbody tr {display:grid; grid-template-columns: 100%;}
	.solution-wrap .modal .modal-body table tbody td {height:auto; padding:10px 0;}

    .solution-wrap .contents-group .box .number-list li p {margin-left: 0;}
    .solution-wrap .box > .box-description {margin:18px 0 54px; font-size: 1.5rem;}
    .solution-wrap .contents-group .box .service-title::after {display: none;}
    .solution-wrap .contents-group .box .img-box {overflow-x: auto; margin-top: 20px;}
    .solution-wrap .contents-group .box .img-box img {max-width: 800px; width: auto;}
    .solution-wrap .contents-group .basic-box-list li {height: 58px; line-height: 58px;; font-size: 1.6rem;}
    .solution-wrap .inquiry-box > .box-description {margin-bottom: 20px;}
    .solution-wrap .contents-group .inquiry-box table colgroup col:first-child {width: 110px;}
    .solution-wrap .contents-group .button-group {gap:10px; justify-content:center;}
    .solution-wrap .contents-group .inquiry-button {flex:1; width: 180px; height: 46px; line-height: 46px; font-size: 1.6rem; margin: 0;}

    .solution-wrap .contents-group .service-destination-box ul {margin-top:30px;}
    .solution-wrap .contents-group .service-destination-box ul li h4 {font-size:1.6rem;}
    .solution-wrap .contents-group .service-destination-box ul li p {font-size:1.4rem; padding:20px;}

    .solution-wrap01 .contents-group .box .number-list li {padding: 0; margin: 100px 0 0;}
    .solution-wrap01 .contents-group .box .number-list li h4::before {width: 45px; height: 45px; left: 0; top: initial; bottom: calc(100% + 16px);}
    .solution-wrap01 .contents-group .box01 .img-box .service-title {font-size: 2.4rem; margin-bottom: 20px;}
    .solution-wrap01 .contents-group .box01 .img-box .service-title br {display: none;}
    .solution-wrap01 .key-certification-group {margin-top: -34px;}

    .solution-wrap02 .tab-group {margin-bottom: -20px;}
    .solution-wrap02 .tab-group button {font-size:1.4rem;}

    .solution-wrap05 .contents-group .service-destination-box ul li h4 {font-size: 1.8rem; margin-bottom: 14px;}
    .solution-wrap05 .contents-group .service-destination-box ul li p {padding: 20px 30px; font-size: 1.5rem;}

}




/*===========================================================================
    고객센터
============================================================================*/
.customer-wrap .anchor-box{position: static;}
.customer-wrap .anchor-box a:not(:last-child) {margin-right: 100px;}
.customer-wrap section {padding: 100px 0;}
.customer-wrap table {margin-top: 50px;}
.customer-wrap table:not(:last-child) {margin-bottom: 30px;}
.customer-wrap table tbody th, .customer-wrap table tbody td {text-align: left; padding: 15px 20px;}
.customer-wrap table tbody .essential {font-size:14px; font-weight:400; color: var(--main-color);}
.customer-wrap table tbody th {padding-right: 10px;}
.customer-wrap table tbody td .select-box {display: flex; gap: 10px;}
.customer-wrap table tbody td textarea {height: 100%; min-height: 100px;}
.customer-wrap .consent-box {display: flex; align-items: center;}
.customer-wrap .consent-box label {max-width: 260px; width: 100%; display: inline-flex; line-height: 1;}
.customer-wrap .consent-box label input {margin-right: 10px;}
.customer-wrap .consent-box button {height: 40px; margin-left: 30px; font-size: 1.4rem;}
.customer-wrap section .button-group button {width: 140px; height: 44px; line-height: 44px; font-size: 1.6rem; font-weight: 600;}

.customer-wrap .MultiFile-label {display :flex; align-items:center;}
.customer-wrap .MultiFile-label span .MultiFile-label span {position:relative; padding-left:20px;}
.customer-wrap .MultiFile-label span .MultiFile-label span ::before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:14px; height:14px; background: url(../img/icon/icon-file-download.svg) no-repeat center center / 100%;}
.customer-wrap .MultiFile-label .remove-btn {padding-left:4px;}
.customer-wrap .MultiFile-label .remove-btn i {width:10px; height:10px; background: url(../img/icon/icon-file-delete.svg) no-repeat center center / cover;}

/* 공지사항 - 목룍 */
.notice-wrap section {padding: 100px 0;}
.notice-wrap .anchor-box {z-index: 11000; height: 80px; background: var(--main-color); }
.notice-wrap .anchor-box .container {display: flex; align-items: center; height: 100%; overflow-y: auto;}
.notice-wrap .anchor-box.static {position: static;}
.notice-wrap .anchor-box .swiper {height: 100%;}
.notice-wrap .anchor-box .swiper-wrapper {justify-content: center; align-items: center;}
.notice-wrap .anchor-box a {position: relative; font-size: 2rem; margin-right: 50px; font-weight: normal; color: #fff; white-space: nowrap; cursor:pointer;}
.notice-wrap .anchor-box a:last-child {margin-right: 0;}
.notice-wrap .anchor-box a:hover {font-weight: 600;}
.notice-wrap .anchor-box a.active {font-weight: 600;}
.notice-wrap .anchor-box a.active::after {content:''; position: absolute; left: 0; top: calc(100% + 8px); width: 100%; height: 2px; background: #fff;}
.notice-wrap .main-title {font-size: 4rem; margin-bottom: 40px; font-weight: 600;}
.notice-wrap table {margin-top: 30px;}
.notice-wrap table th {font-weight: 600;}
.notice-wrap table th, .notice-wrap table td {padding: 10px;}
.notice-wrap table td.classify {color: #707070;}
.notice-wrap table td a {font-weight: 600; text-align: left; max-width: 1000px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice-wrap table td a i.download {display: inline-block; width: 15px; height: 15px; margin-left: 20px; vertical-align: text-top; background: url(../img/icon/icon-file-download.svg) no-repeat center center / 100%;}
.notice-wrap table td:last-child {color: #333;}

.curtomer-notice-wrap section {padding-top:80px;}

/* 공지사항 - 상세 */
.notice-detail-wrap .title-box {padding-bottom: 40px; border-bottom: 1px solid #111;}
.notice-detail-wrap .title-box .main-title {margin-bottom: 20px;}
.notice-detail-wrap .title-box .date {color:#555555; line-height: 1;}
.notice-detail-wrap .text-box {min-height:420px; padding: 60px 0 80px; border-bottom: 1px solid var(--basic-border); display:flex; flex-wrap:wrap;}
.notice-detail-wrap .file-box {margin-top: auto; width:100%; display:flex; flex-wrap:wrap; gap:20px;}
.notice-detail-wrap .file-box a {height: 50px; padding:0 20px; background: #f6f8fa; border-radius: 8px; margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: center;}
.notice-detail-wrap .file-box a:last-child {margin-bottom: 0;}
.notice-detail-wrap .file-box a i {width: 16px; height: 16px; margin:-2px 0 0 20px; background: url(../img/icon/icon-file-download.svg) no-repeat center;}
.notice-detail-wrap .button-group {margin-top: 40px;}
.notice-detail-wrap .button-group button {width: 100px; height: 46px; font-size: 1.6rem; border-radius: 4px; color:#111}


/* 공지사항 - 약관 */
.term-box .title-box {margin-bottom: 60px;}
.term-box .title-box .main-title {margin-bottom: 30px;}
.term-box .title-box select {max-width: 350px;}
.term-box .text-box {height: 740px; overflow-y: auto; border: 1px solid var(--basic-border); padding: 20px 30px;}
.anchor-box .container a.partner {display: inline-flex; align-items:center;}
.anchor-box .container a.partner i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; }


@media (max-width:1300px) {
    .notice-wrap .pc-top-area {display: flex; height: 200px;}
    .notice-wrap .pc-top-area h2 {font-size: 3.6rem; margin-bottom: 20px;}
    .notice-wrap .pc-top-area .breadcrumb li p {font-size: 1.6rem;}

    .notice-wrap .anchor-box {height: 60px;}
    .notice-wrap .anchor-box a {font-size: 1.6rem; margin-right: 40px;}
    .notice-wrap .anchor-box a.active::after {height: 1px; top: calc(100% + 4px);}
}


@media (max-width:800px) {
    .notice-wrap .pc-top-area {height: 160px;}
    .notice-wrap .pc-top-area h2 {font-size: 2.6rem;}
    .notice-wrap .anchor-box {height: 54px;}

    .customer-wrap .anchor-box a:not(:last-child) {margin-right: 40px;}
    .customer-wrap table colgroup col:first-child {width: 100%;}
    .customer-wrap table tbody tr {display: grid; border-bottom: 0;}
    .customer-wrap table tbody th {background: none;}
    .customer-wrap table tbody td {padding: 10px 20px 20px; height: auto;}
    .customer-wrap .consent-box button {width: 80px; height: 38px; margin-left: 20px; padding: 0;}
    .customer-wrap .consent-box label {font-size: 1.5rem;}


    .notice-wrap section {padding: 60px 0;}
    .notice-wrap .main-title {font-size: 2.4rem; margin-bottom: 30px;}

    .notice-detail-wrap .text-box {min-height:240px;}

    .notice-wrap table colgroup col:nth-child(1) {width: 40px;}
    .notice-wrap table colgroup col:nth-child(2) {width: 80px;}
    .notice-wrap table colgroup col:nth-child(4) {width: 80px;}
    .notice-wrap table th, .notice-wrap table td {font-size: 1.4rem; padding: 10px 4px;}


    .notice-detail-wrap .title-box {padding-bottom: 30px;}
    .notice-detail-wrap .title-box .main-title {font-size: 2.4rem;}
    .notice-detail-wrap .title-box .date {font-size: 1.4rem;}
    .notice-detail-wrap .text-box {padding: 40px 0 60px;}
    .notice-detail-wrap .file-box a p {font-size: 1.4rem; white-space:nowrap;}

    .library-wrap table colgroup col:nth-child(2) {width: 100%;}
    .library-wrap table colgroup col:nth-child(3) {width: 80px;}
    .notice-wrap table td a i.download {width: 14px; height: 14px; background-size: 100%;}
}
@media (max-width:480px) {
    .customer-wrap table tbody th, .customer-wrap table tbody td {padding-left: 10px; padding-right: 10px;}

    .notice-wrap .pc-top-area {height: 140px;}
    .notice-wrap section {padding: 50px 0;}

}

/*===========================================================================
    ㅇㅇㅇ
============================================================================*/



/*===========================================================================
    ㅇㅇㅇ
============================================================================*/



/*===========================================================================
    ㅇㅇㅇ
============================================================================*/

/*===========================================================================
    모달
============================================================================*/


/*===========================================================================
    반응형
============================================================================*/
@media (max-width:1200px){

}


@media (max-width:800px){

}

@media (max-width:500px) {

}