@charset "UTF-8";
.wrap{opacity: 0; animation: .3s ease-in-out 0s 1 normal forwards running opacity;}
@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

section{position: relative; min-height: 100vh; height: 100vh; max-height: none; z-index: 1;}
/* .banner.active-section{margin-top: 70px;} */
section > div{margin: 0 auto; width: 100%; max-width: 1440px; padding: 0 208px;}

/* 배너 */
.banner > div{max-width: none; padding: 0; max-height: 750px;}
#section-banner{min-height: 100vh !important; height: 100vh !important; max-height: none !important; position: relative; z-index: 2;}
#section-banner > div{max-height: none !important;}
#section-banner .banner-wrap{margin-top: 0;}
#section-top.section-brand-intro{min-height: auto; height: auto; max-height: none; padding: 100px 0 80px; overflow: visible; z-index: 1; background: #fff;}
#section-top.section-brand-intro > div{max-width: none; width: 100%; padding: 0;}
#section-top.section-brand-intro .banner-wrap{margin-top: 0; max-height: none; width: 100%;}
#section-top.section-brand-intro .banner-wrap{display: flex; justify-content: center;}
#section-top.section-brand-intro .slide-wrap{flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 208px; box-sizing: border-box;}
#section-top.section-brand-intro .left-contents{flex: 1 1 0; min-width: 0; max-width: none; width: auto;}
#section-top.section-brand-intro .right-contents{flex: 0 1 48%; position: relative; width: auto; display: flex; justify-content: flex-end; align-items: center;}
#section-top.section-brand-intro .right-contents .img-wrap{position: relative; top: auto; right: auto; transform: none; margin: 0; max-width: 100%; width: 100%; height: auto;}
#section-top.section-brand-intro .right-contents .img-wrap > img{width: 100%; height: auto; object-fit: contain;}
#section-top .brand-eyebrow{font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--primary, #134A9D); margin: 0 0 12px; white-space: nowrap;}

/* 좌상단 로고·타이틀 */
#header .inner .logo{width: auto; max-width: none;}
.site-logo-wrap{display: flex; align-items: center; gap: 8px;}
.site-logo-img{height: 27px; width: auto; flex-shrink: 0;}
.site-logo-text{display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; min-width: 0;}
.site-logo-name{font-size: 17px; font-weight: 800; color: #333; white-space: nowrap;}
.site-logo-tagline{font-size: 10px; font-weight: 600; color: #666; letter-spacing: 0.01em; white-space: nowrap;}

/* Font Awesome 인라인 아이콘 (이모지 대체) */
.ha-with-icon{display: inline-flex; align-items: center; gap: 0.4em;}
.ha-with-icon > .fa{flex-shrink: 0; line-height: 1;}
.connect-container .tel,
.connect-container .mail,
.connect-container address,
.connect-container .quotation-request-banner{display: inline-flex; align-items: center; gap: 0.5em;}
.connect-container .quotation-request-banner{color: #fff; text-decoration: none; line-height: normal;}
.connect-container .quotation-request-banner:hover{color: #fff; text-decoration: underline; opacity: 0.95;}
.connect-container .fa{color: inherit;}
.footer-section .address a .fa{color: #707070;}
.footer-section .address a:hover .fa{color: var(--primary, #134A9D);}
.banner .banner-wrap{position: relative; margin: 68px auto 0; height: 100%; width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;}
.banner .banner-wrap .slide-wrap{max-width: 1440px; width: 100%; height: 100%; position: relative; padding: 0 208px; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px;}
.left-contents{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 32px; color: var(--primary);}
.left-contents .title01{animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.left-contents .text01-500{animation: 1s ease-in-out 0.8s 1 normal forwards running upper_transform;}
.left-contents .text01-500 > span{display: -webkit-flex; display: flex;}
.left-contents .title01.mo{display: none;}
.store-btns{display: -webkit-flex; display: flex; gap: 10px;}
.store-btns .store-btn{display: -webkit-flex; display: flex; width: 180px; height: 56px; align-items: center; justify-content: center; gap: 8px; background: var(--primary, #202020); border-radius: 6px;}
.store-btns .store-btn > span{font-size: 18px; font-weight: 600; line-height: normal; color: #fff;}
.right-contents .img-wrap{position: absolute; top: 50%; transform: translateY(-50%); right: 130px; max-width: 590px; height: 407.5px; flex-shrink: 0;}
.right-contents .img-wrap > img{width: 100%; height: 100%;}
/* 배너 */



/* 서비스 지표 */
.service{background-color: #fff; min-height: 100vh; height: 100vh; max-height: none; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.service > div{width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 50px;}
.service .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform; width: 100%;}
.service .text-wrap .title02, .service .text-wrap .text01{color: #000;}
.service .flex-container{display: -webkit-flex; display: flex; align-items: stretch; gap: 24px; width: 100%;}
.service .flex-box{flex: 1 0 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 30px 20px;
    background: var(--header-bg-silver, rgb(223, 227, 235)); border-radius: 12px; height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.service .flex-box .title02{color: var(--primary, #134A9D);}
.service .flex-box .text{color: #484848;}
.service .text2{color: #484848; font-size: 14px; line-height: 30px;}
/* 서비스 지표 */


/* 광고 특장점 */
.character{background-color: var(--header-bg-silver, rgb(223, 227, 235)); min-height: 100vh; height: 100vh; max-height: none;}
.character > div{padding: 100px 208px; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px;}
.character .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.character .text-wrap .title02{color: var(--color-brand-navy); font-size: 36px; line-height: 144.4%;}
.character .flex-container{display: -webkit-flex; display: flex;  gap: 24px; width: 100%;}
.character .flex-box{flex: 1 0 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 32px 28px; background-color: #fff; border-radius: 12px;}
.character .character-card-head{display: flex; align-items: center; gap: 20px; width: 100%;}
.character .character-card-icon{flex-shrink: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--character-icon-bg-blend, #b0a8bc);}
.character .flex-container .flex-box:nth-child(1) .character-card-icon{background: var(--character-icon-bg-blue, #b4c2d4);}
.character .flex-container .flex-box:nth-child(2) .character-card-icon{background: var(--character-icon-bg-blend, #b0a8bc);}
.character .flex-container .flex-box:nth-child(3) .character-card-icon{background: var(--character-icon-bg-gold, #c4b89e);}
.character .character-card-icon i,
.character .character-card-icon .fa,
.character .character-card-icon .fas,
.character .character-card-icon i::before,
.character .character-card-icon .fa::before{color: #fff !important;}
.character .character-card-icon .fa,
.character .character-card-icon .fas{font-size: 2rem; line-height: 1;}
.character .character-card-titles{display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1;}
.character .character-card-title{font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--primary, #134A9D); word-break: keep-all;}
.character .flex-box .text{margin: 0; color: #484848; line-height: 1.55; font-size: 15px;}
/* 광고 특장점 */


/* nav-bar */
/* .nav-bar{height: auto;}
.nav-bar > div{padding: 120px 0 60px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
.nav-bar .title{font-size: 36px; line-height: 144.444%; color: #000; font-weight: 700; text-align: center;}
.nav-bar .title > span{display: block;}
.nav-bar .btn-wrap{display: -webkit-flex; display: flex; gap: 12px; justify-content: center;}
.nav-bar .btn-wrap .link-btn{color: #000; font-weight: 500; font-size: 16px; line-height: normal; padding: 16px 20px; width: 160px; text-align: center; background-color: #fff; border: 1px solid #cbd2dc; border-radius: 12px; transition: all .3s;}
.nav-bar .btn-wrap .link-btn:hover, .nav-bar .btn-wrap .link-btn.active{border-color: var(--color-brand-blue-bright); background-color: var(--color-brand-blue-bright); color: #fff;}
.nav-bar .btn-wrap .link-btn:first-child{min-width: auto;} */

.nav-bar {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    position: sticky; /* 스크롤 시 고정 */
    top: 0; /* 페이지 상단에 고정 */
    background-color: transparent; /* 배경색을 설정하여 다른 콘텐츠와 구분 */
    z-index: 1000; /* 다른 요소 위에 표시되도록 z-index 설정 */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  */
}

.nav-bar > div {
    padding: 90px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.nav-bar .title {
    font-size: 35px;
    line-height: 144.444%;
    color: #000;
    font-weight: 700;
    text-align: center;
}

.nav-bar .title > span {
    display: block;
}

.nav-bar .btn-wrap {
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.nav-bar .btn-wrap .link-btn {
    color: #000;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    padding: 16px 15px;
    flex: 1; /* 동일한 비율로 공간 차지 */
    min-width: 150px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #cbd2dc;
    border-radius: 10px;
    transition: all .3s;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.nav-bar .btn-wrap .link-btn:hover,
.nav-bar .btn-wrap .link-btn.active {
    border-color: transparent;
    background: #111;
    color: #fff;
}

.nav-bar .btn-wrap .link-btn:first-child {
    min-width: auto;
}


/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .nav-bar .btn-wrap {
        flex-wrap: wrap; /* 모바일에서는 버튼 줄바꿈 허용 */
    }
    
    .nav-bar .btn-wrap .link-btn {
        flex: 1 1 40%; /* 모바일에서 2개씩 배치 */
    }
}
/* nav-bar */


/* 전체 화면 광고 */
.flex-flow > div{display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 224px;}
.flex-container{justify-content: space-between;}
.text-wrap{z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0;}
.flex-flow .text-wrap{flex: 1 1 auto; min-width: 350px; max-width: 600px;}
.active-section .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.flex-flow .text-wrap.ani-upper{animation: 1s ease-in-out 0s 1 normal forwards running upper_transform;}
.text-wrap .text01{color: #484848;}
.contents-wrap{display: -webkit-flex; display: flex; align-items: center; position: relative; height: 100%; max-width: 334px; flex-shrink: 0; max-height: 740px;}
.contents-wrap img{height: 485px;}
.contents-wrap .infra-visual{
    width: 334px;
    height: 485px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-brand-blue, #3175bc);
}
.infra-visual .infra-cloud{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    color: var(--color-brand-blue-bright, #5890c9);
    opacity: 0.22;
}
.infra-visual::before,
.infra-visual::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: #cbd8e8;
    transform: translateX(-50%);
}
.infra-visual::before{
    top: 155px;
    height: 190px;
}
.infra-visual::after{
    top: 246px;
    width: 220px;
    height: 2px;
}
.infra-node{
    position: absolute;
    width: 128px;
    height: 128px;
    border-radius: 28px;
    background: var(--color-brand-blue, #3175bc);
    border: 1px solid rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.infra-node i{
    font-size: 54px;
}
.infra-node-server{
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand-blue, #3175bc);
}
.infra-node-network{
    bottom: 56px;
    left: 0;
    background: var(--color-brand-blue-bright, #5890c9);
}
.infra-node-database{
    bottom: 56px;
    right: 0;
    background: var(--color-brand-gold, #917f43);
}
.contents-wrap .add{background: #fff; border-radius: 12px; position: absolute; width: 283px; height: auto; left: -26px; padding: 8px; display: flex; gap: 8px; align-items: center; box-shadow: 0 1px 4px 0 rgb(12, 12, 13, 0.5);}
.contents-wrap .add > img{width: 79px; height: 74px; flex-shrink: 0;}
.contents-wrap .add .ad{position: absolute; top: 13px; right: 12px; font-size: 6px; color: #707070; border-radius: 2px; border: .5px solid #aeaeae; display: inline-block; padding: 2px 3px;}
.contents-wrap .add .title{font-size: 11px; color: #000; line-height: 16px; font-weight: 600; letter-spacing: -.5px;}
.contents-wrap .add .title > span{display: block;}
.contents-wrap .add .title > span .percent{font-weight: 700;}
.contents-wrap .add .text{font-size: 8px; color: #707070; line-height: normal;}
/* 전체 화면 광고 */

.ending > div,.addon > div{flex-flow: row-reverse;}


/* 광고 집행 절차 */
/* .procedure{background-color: #8d8996; max-height: 523px;} */
.procedure{background: url(/img/banner_background3.png) center / cover no-repeat; min-height: 100vh; height: 100vh; max-height: none;}
.procedure > div{padding: 100px 208px; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 60px;}
.procedure .text-wrap{text-align: center; animation: 1s ease-in-out .3s 1 normal forwards running upper_transform;}
.procedure .text-wrap .title02{color: #fff; font-size: 36px; line-height: 144.4%;}
.procedure .flex-container{display: -webkit-flex; display: flex;  gap: 24px; width: 100%;}
.procedure .flex-box{max-height: 300px; height: 100%; flex: 1 0 0; display: -webkit-flex; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 15px; background-color: #fff; border-radius: 12px;}
.procedure .flex-box .icon{height: 60px; display: -webkit-flex; display: flex; align-items: center; margin-top: 5%;}
.procedure .flex-box .text-wrap{animation: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;}
.procedure .flex-box .text01{color: #000; font-weight: 700; line-height: normal; font-size: 20px;}
.procedure .flex-box .text{color: #202020; line-height: 1.5; letter-spacing: -.5px; font-size: 16px;}
/* 광고 집행 절차 */


/* 광고 문의 및 푸터 영역 */
.footer-section{
    min-height: 100vh;
    height: 100vh;
    max-height: none;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 광고 문의하기 */
.connect{min-height: auto !important; height: auto !important; max-height: none !important; padding: 60px 0; flex: 1; display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.connect > div{height: auto; width: 100%;}
.footer-section #footer{
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    background-color: var(--section-light-bg, #f8f9fa);
    border-top-color: #e8eaed;
}
.footer-section #footer.inner{
    padding: 80px 0;
}
.footer-section #footer .footer-top,
.footer-section #footer .address{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 208px;
    box-sizing: border-box;
}
.connect-container{background: var(--gradient-brand); color: #fff; display: flex; flex-direction: column; gap: 12px; padding: 40px; border-radius: 20px;}
.connect-container .title{font-size: 24px; line-height: normal; font-weight: 500;}
.connect-container .tel{font-size: 36px; font-weight: 700; line-height: 52px; color: #fff;}
.connect-container .mail, .connect-container address, .connect-container .quotation-request-banner{line-height: normal;}
/* 광고 문의하기 */


/* 공유하기 */
.sharing{height: auto;}
.sharing > div{max-height: 325px; padding: 70px;}
.sharing.fp-section.fp-table, .sharing .fp-tableCell {height:auto !important; width: 100%;} 
.sharing .share-box{display: -webkit-flex; display: flex; flex-direction: column; gap: 24px; align-items: center;}
.sharing .share-sns{display: -webkit-flex; display: flex; gap: 16px;}
.sharing .share-sns > a{display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; flex-shrink: 0; padding: 18px 19px; border-radius: 16px;}
.kakao-link{background-color: #FEE500;}
.fb-link{background-color: #044ABA;}
.share-link{background-color: #707070;}
/* 공유하기 */


/* 중간 화면 크기 (1024px ~ 1400px) */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
    .flex-flow > div{gap: 80px;}
    .flex-flow .text-wrap{min-width: 350px; max-width: 500px;}
    .contents-wrap{max-width: 300px;}
    .contents-wrap .infra-visual{width: 300px;}
    .infra-node{width: 112px; height: 112px; border-radius: 24px;}
    .infra-node i{font-size: 48px;}
    .infra-visual::after{width: 194px;}
}

/* 태블릿·모바일: 섹션 높이 고정 해제(컨텐츠 세로 겹침 방지) */
@media screen and (max-width: 1024px) {
    section{min-height: auto; height: auto; max-height: none;}
    section.nav-bar{min-height: auto !important; height: auto !important;}
    section.connect{min-height: auto !important; height: auto !important;}
    .footer-section{min-height: auto; height: auto;}
    #section-banner{min-height: auto !important; height: auto !important; max-height: none !important;}
    #section-top.section-brand-intro{padding: 80px 0 60px;}
    #section-top.section-brand-intro .slide-wrap{flex-direction: column; padding: 0 20px; gap: 40px; align-items: stretch;}
    #section-top.section-brand-intro .left-contents,
    #section-top.section-brand-intro .right-contents{flex: 1 1 auto; width: 100%; justify-content: center;}
    #section-top .brand-eyebrow{white-space: normal;}
    .site-logo-tagline{font-size: 9px;}
    .service{min-height: auto !important; height: auto !important; max-height: none !important;}
    .character{min-height: auto !important; height: auto !important; max-height: none !important;}
    .procedure{min-height: auto !important; height: auto !important; max-height: none !important;}
    section > div{padding: 100px 20px; flex-direction: column;}
    .service > div{padding-top: 40px; padding-bottom: 50px;}
    .title02,.text01 {align-items: flex-start; text-align: left;}
    .banner > div{max-height: none;}
    .service{display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0;}
    .service .flex-container{flex-direction: column;}
    .flex-flow > div{flex-direction: row; gap: 60px;}
    .flex-flow .text-wrap{min-width: auto; max-width: none;}
    .addon > div, .ending > div{flex-flow: row-reverse;}
    .banner .banner-wrap .slide-wrap{padding: 100px 20px; gap: 60px; align-items: center;}
    .right-contents .img-wrap{position: static; transform: none;}
    .contents-wrap .infra-visual{width: 300px; height: 390px;}
    .infra-visual .infra-cloud{top: 10px; font-size: 96px;}
    .infra-visual::before{top: 120px; height: 170px;}
    .infra-visual::after{top: 202px; width: 194px;}
    .infra-node{width: 112px; height: 112px; border-radius: 24px;}
    .infra-node i{font-size: 48px;}
    .infra-node-server{top: 86px;}
    .infra-node-network,
    .infra-node-database{bottom: 36px;}
    .service .flex-container{flex-direction: row;}
    .service .text-wrap .title02, .service .text-wrap .text01{align-items: center; text-align: center;}
    .character{padding: 100px 20px; max-height: none;}
    .character > div{padding: 0;}
    .character .flex-container{flex-direction: column;}
    .character .flex-box{width: 100%;}
    .character .character-card-icon{width: 64px; height: 64px;}
    .character .character-card-icon .fa,
    .character .character-card-icon .fas{font-size: 1.75rem;}
    .character .character-card-title{font-size: 17px;}
    .procedure{max-height: none;}
    .procedure > div{padding: 100px 20px;}
    .procedure .flex-container{display: grid; grid-template-columns: 205px 24px 205px; justify-content: center;}
    .procedure .flex-container .tablet{display: none;}
    .connect{padding: 0;}
    .connect > div{padding: 60px 20px 0;}
    .footer-section #footer .footer-top,
    .footer-section #footer .address{padding: 0 20px;}
}
@media screen and (max-width: 768px) {
    .banner .banner-wrap .slide-wrap{gap: 32px;}
}
/* 태블릿 */


@media screen and (max-width: 650px) {
    .title04, .title01, .title02, .text01{align-items: center; text-align: center;}

    .service{max-height: none;}
    .service .flex-container{height: auto; flex-direction: column;}
    .service .flex-container .flex-box{width: 100%;}
    .nav-bar .btn-wrap{flex-wrap: wrap;}
    .flex-flow > div{flex-direction: column; align-items: center;}
}


/* 모바일 */
@media screen and (max-width: 480px) {
    .banner .banner-wrap .slide-wrap{padding: 48px 11px;}
    .right-contents .img-wrap{height: 206px;}
    .right-contents .img-wrap > img{transform: scale(1.2);}
    .left-contents{text-align: center;}
    .procedure .flex-container{display: flex; flex-direction: column; gap: 12px;}
    .procedure .flex-container .arrow-right{transform: rotate(90deg);}
    .procedure .flex-container .tablet{display: inline-block;}
    .procedure .flex-box{flex-direction: row; width: 100%; align-items: flex-start;}

    .flex-flow > div{padding: 60px 20px;}
    .connect-container{padding: 40px 20px;}
    /* 공유하기 */
    .sharing .share-box{padding: 50px 0;}
    .sharing .share-sns > a{width: 56px; height: 56px; padding: 15px 11px;}
    .kakao-link > svg{width: 24px;}
    .fb-link > svg{width: 15px;}
    .share-link > svg{width: 29px;}
    /* 공유하기 */
}
@media screen and (max-width: 320px) {
    .icons .icon1{top: -49px; left:-26px;}
    .icons .icon2{right: -21px;}
    .icons .icon3{bottom: -37px; right: -14px;}
    .buy .contents-wrap .market-list{width: 270px; top: 100px; left: -10px;}
    .message-wrap.blue-message{right: -14px;}
    .message-wrap.gray-message{left: -10px;}
}
/* 모바일 */