:root {
    /* btn */
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --btn-height: 2.5rem;
    /* section */
    --bs-section-paddng-y: 3rem;
}

@media(min-width: 992px){
    :root {
        --bs-section-paddng-y: 8rem;
    }
}

/*** NAVIGATION ***/
:root,
.navbar {
    --bs-navbar-padding-x: 0;
    --ba-navbar-padding-y: 0.5rem;
}

@media(min-width: 1200px) {
    :root,
    .navbar {
        --bs-navbar-padding-x: 0;
        --ba-navbar-padding-y: 1rem;
    }
}

.navbar,
.modal-header {
    padding: var(--ba-navbar-padding-y) calc(var(--bs-gutter-x) * .5);
}

.navbar-brand,
.modal-title {
    padding: 0;
}

nav .btn:has(i),
.modal-header .btn:has(i) {
    justify-content: center;
    align-items: center;
    width: var(--btn-height);
    aspect-ratio: auto 1 / 1;
    padding: 0;
}


/*** Section ***/
html {
    /* scroll-snap-type: y proximity; */
    /* scroll-behavior: smooth; */
}

@media(max-width: 576px) {
    html {
        scroll-snap-type: none;
    }
}

header,
section {
    scroll-snap-align: center;
    min-height: 100vh;
}

section {
    padding: var(--bs-section-paddng-y) 0;
}


/*** SECTION - MAIN ***/
#main {
    height: 100vh;
}

@media(max-width: 576px) {
    #main {
        padding-bottom: 10%;
    }
}


/*** SECTOION - BUSINESS ***/
#business {
    width: 100%;
}

#business>* {
    text-align: center !important;
}

#business>div.h-100 {
    min-height: calc(100vh - var(--bs-section-paddng-y) * 2);
}


/* BUSINESS > svg */
#business .item {
    position: relative;
    aspect-ratio: auto 1/1;
    display: flex;
    align-items: center;
}

#business .d-grid {
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-rows: repeat(3, 1fr);
    column-gap: 3.3%;
    justify-content: space-between;
}

@media (max-width: 992px) {
    #business .item:not(.bg-white) dd {
        display: none;
    }
}

    /* svg > OS, DB, Web+WAS, App */
#business .d-grid .item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
}

    /* svg > HW, Network, Backup */
#business .d-grid .item:nth-child(5) {
    display: none;
}

    /* svg > AZEN Service */
#business .d-grid .item:nth-child(6) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
}

@media (max-width: 1200px) {
    #business .d-grid {
        column-gap: 0;
    }
}

@media (max-width: 768px) {
    #business .d-grid {
        grid-template-columns: 2fr 1fr 1fr 2fr;
        grid-template-rows: 2fr 1fr 1fr 2fr;
    }

    /* svg > OS, DB, Web+WAS, App */
    #business .d-grid .item:nth-child(1) {
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 5;
    }

    /* svg > HW, Network, Backup */
    #business .d-grid .item:nth-child(5) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 5;
        display: block;
    }

    /* svg > AZEN Service */
    #business .d-grid .item:nth-child(6) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    #business .d-grid .item:not(:first-child, :nth-child(5), :last-child) {
        display: none;
    }
}

@media (min-width: 576px) {}


/*** SECTION - SERVICE ***/

/* SERVICE > stack cards S */
#service {
    padding-bottom: 0 !important;
}

:root {
    --stacks: 5;
    --cardTop: 9vh;
    --cardHeight: 78vh;
    --cardTopPadding: 1rem;
    --cardMargin: 5vw;
}

#stacks {
    grid-template-rows: repeat(var(--stacks), var(--cardHeight));
    gap: var(--cardMargin);
    padding-bottom: calc(var(--stacks) * var(--cardTopPadding));
    margin-top: var(--cardMargin);
    margin-bottom: var(--cardMargin);
}

#stack1 {
    --stack: 1;
}

#stack2 {
    --stack: 2;
}

#stack3 {
    --stack: 3;
}

#stack4 {
    --stack: 4;
}

#stack5 {
    --stack: 5;
}

.stack {
    position: sticky;
    top: var(--cardTop);
    padding-top: calc(var(--stack) * var(--cardTopPadding));
}

#service .card {
    height: var(--cardHeight);
    transition: all 0.5s;
}
/* SERVICE > stack cards E */

#service .h-100 {
    position: relative;
}

@media (min-width: 768px) {
    #service img {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;        
        padding-right: 2rem;
        height: 70%;
    }
}

@media (min-width: 1200px) {
    #service img {
        top: 0;
        bottom: auto;
        padding-right: 5rem;
    }
}

@media (min-width: 1400px) {
    #service img {
        height: auto;
    }
}

#service .card_cont {
    position: relative;
    z-index: 1;
}




/*** SECTION - PROJECT ***/
#project {
    scroll-snap-align: end;
}

#project a  {
    display: block;
}

#project a dl {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: inherit;
}


/*** SECTION - CONTACT ***/
#contact {
    height: 100vh;
}

/* kakaomap */
#contact .container-fluid > div {
    width: 100%;
}
#contact .wrap_map {
    height: 50vh;
}
#contact .hide {
    display: none;
}