/* section a */

.sec-a {
    margin-top: var(--systemSpacing-60);
}

.secGrid-a {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

.secPos-a-title {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.secPos-a-content {
    grid-column: 3 / 7;
    grid-row: 1 / 2;
}

.secPos-icon {
    grid-column: 7 / 7;
    grid-row: 1 / 2;
}

.sec-title-xlg {
    font-size: var(--d2-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.sec-a-dsc-wrp {
    padding-right: var(--systemSpacing-80);
    padding-bottom: var(--systemSpacing-80);
}

.sec-dsc-lg {
    font-size: var(--hl-fontSize);
    color: var(--systemPrimary);
    font-weight: 400;
    margin-bottom: var(--systemSpacing-20);
    line-height: 150%;
}

/* */
/* section b */

.secGrid-b {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

.secPos-b-title {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.sec-title-lg {
    font-size: var(--h1-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.secPos-b-content-experience {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

.secPos-b-content-sideproject {
    grid-column: 5 / 7;
    grid-row: 1 / 2;    
}

.secPos-b-content-khu {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.secPos-b-content-award {
    grid-column: 5 / 7;
    grid-row: 2 / 3;  
}

.sec-dsc-wrp {
    padding-right: var(--systemSpacing-40);
    padding-bottom: var(--systemSpacing-60);
}

.career-wrp p {
    color: var(--systemTertiary);
    font-size: var(--p-fontSize);
    line-height: 150%;
}


/**/
/* section c */

.secGrid-c {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

.secPos-c-title {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.secPos-c-content-isDoing {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

.secPos-c-content-haveDone {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}

.secPos-c-content-knowThis {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.secPos-c-content-basic {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
}

/**/
/* section d */
/* tmaxfintech */

.secGrid-d {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

.sec-company-tmax {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

/* logo size */

.logo-icon-wrp {
    width: 100%;
    margin-bottom: var(--systemSpacing-32);
}

.logo-icon-wrp svg {
    display: block;
    fill: var(--systemBlack);
}

.logoTmaxFintech {
    width: var(--systemSpacing-280);
}

.logoTmaxFintechSymbols {
    width: var(--systemSpacing-160);
}

.secPos-d-content-tmax-eo {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

.secPos-d-content-tmax-symbols {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}

.secPos-d-content-tmax-corebank {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.secPos-d-content-tmax-webpage {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
}


/* bergandridge */

hr {
    border: 0.1px solid var(--systemTertiary);
}

.sec-divider {
    margin-bottom: var(--systemSpacing-80);
}

.secGrid-d1 {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

.sec-company-bergandridge {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.logoBergAndRidge {
    width: var(--systemSpacing-200);
}

.secPos-d1-content-bnr-branddesign {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

.secPos-d1-content-bnr-uxuidesign {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}

.secPos-d1-content-bnr-popupstore {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.secPos-d1-content-bnr-distribution {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
}

.secPos-d1-content-bnr-himmee {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

.secPos-d1-content-bnr-aurora {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
}


/* */
/* section e */

.secGrid-e {
    display: grid;
    grid-gap: var(--systemSpacing-20);
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: row;
    grid-template-rows: auto;
    margin-bottom: var(--systemSpacing-20);
}

/* astrsk */

.sec-side-astrsk {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.logoASTRSK {
    width: var(--systemSpacing-160);
}

.secPos-e-content-astrsk {
    grid-column: 3 / 6;
    grid-row: 1 / 2;
}

/* ux lab*/

.sec-side-uxlab {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.logoUXLab{
    width: var(--systemSpacing-280);
}

.secPos-e-content-uxlab {
    grid-column: 3 / 6;
    grid-row: 1 / 2;
}

/* vibecoding */

.sec-side-vibecoding {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.logoVibeCoding {
    width: var(--systemSpacing-320);
}

.secPos-e-content-vibecoding {
    grid-column: 3 / 6;
    grid-row: 1 / 2;
}

/* atlas */

.sec-side-atlas {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.logoAtlas {
    width: var(--systemSpacing-160);
}

.secPos-e-content-atlas {
    grid-column: 3 / 6;
    grid-row: 1 / 2;
}

/* symbols */

.sec-e-4 {
    margin-bottom: var(--systemSpacing-160);
}

.sec-side-symbols {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.secPos-e-content-symbols {
    grid-column: 3 / 6;
    grid-row: 1 / 2;
}

.logoSymbols {
    width: var(--systemSpacing-140);
}

/* */
/* common component */

.link-to-wrp {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: var(--systemSpacing-8);
}

.link-chevron-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lang-chevron-wrp.active .chevron-icon-wrp svg {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
}

.link-chevron-wrp .chevron-icon-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.sec-icon svg {
    fill: var(--systemPrimary);
    display: block;
}

.link-to {
    font-size: var(--hl-fontSize);
    color: var(--systemPrimary);
    font-weight: 400;
    text-decoration: underline;
    width: fit-content;
}

.link-to:hover {
    color: var(--systemSecondary);
    text-decoration: none;
}

.txt-bold {
    font-weight: 600;
}

.tl {
    font-size: var(--h6-fontSize);
    font-weight: 600;
    color: var(--systemPrimary);
}

.highlight {
    font-size: var(--h2-fontSize);
    font-weight: 600;
    color: var(--systemPrimary);
}

.sec-dsc {
    font-size: var(--hl-fontSize);
    line-height: 150%;
    color: var(--systemPrimary);
}

.dsc-link {
    color: var(--systemPrimary);
    font-size: var(--hl-fontSize);
    text-decoration: underline;
    width: fit-content;
    font-weight: 400;
}

.dsc-link:hover {
    color: var(--systemSecondary);
    text-decoration: none;
}

.link-chevron-btn-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    gap: var(--systemSpacing-4);
    background-color: var(--systemPrimary);
    border-radius: var(--systemSpacing-9999);
    padding: var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-20);
}

.link-chevron-btn-wrp:hover {
    opacity: 80%;
}

.link-chevron-btn-wrp .chevron-icon-wrp svg {
    fill: var(--systemWhite);
    display: block;
    width: var(--systemSpacing-20);
}

.dsc-link-btn {
    color: var(--systemWhite);
    font-size: var(--p-fontSize);
    font-weight: 400;
}

.side-project-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
}

.side-project-wrp p {
    color: var(--systemTertiary);
    font-size: var(--p-fontSize);
    line-height: 135%;
}

/* side project */

.side-project-logo-wrp {
    margin-bottom: var(--systemSpacing-32);
}

.side-project-logo-wrp svg {
    fill: var(--systemPrimary);
    display: block;
}

.side-project-link {
    color: var(--systemTertiary);
    font-size: var(--p-fontSize);
    font-weight: 600;
    line-height: 135%;
    text-decoration: underline;
}

.side-project-chevron svg {
    fill: var(--systemTertiary);
    display: block;
}

.side-project-link:hover {
    text-decoration: none;
}

/* */

.sec-cap {
    color: var(--systemTertiary);
    font-size: var(--ch-fontSize);
    line-height: 135%;
}

.sm-ph {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
}

.p-ter-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
}

.p-tertiary {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    line-height: 135%;
}

.p-secondary {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
        font-weight: 400;
    line-height: 135%;
}


/* */
/* profile */

.profile-img-wrp {
    margin-bottom: var(--systemSpacing-12);
}

.profile-img-wrp .profile-img {
    display: block;
    width: var(--systemSpacing-280);
    pointer-events: none;
    user-select: none;
}

.profile-info {
    font-size: var(--hl-fontSize);
    color: var(--systemPrimary);
    line-height: 135%;
}

.profile-name {
    font-weight: 600;
}

.video-link {
    color: var(--systemPrimary);
    font-weight: 400;
    text-decoration: underline;
}

.video-link:hover {
    text-decoration: none;
    color: var(--systemSecondary);
}

.duration {
    color: var(--systemTertiary);
    font-weight: 400;
    font-size: var(--p-fontSize);
    margin-bottom: var(--systemSpacing-12);
}

.company-dsc-wrp {
    width: 80%;
}

.company-dsc {
    color: var(--systemTertiary);
    font-weight: 400;
    font-size: var(--p-fontSize);
    line-height: 135%;
}

/* */
/* image wrap */

.khu-img-wrp, .dff-mark-img-wrp {
    width: 80%;
}

.khu-img-wrp img, .dff-mark-img-wrp img {
    display: block;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
}

.icon-wrp svg {
    display: block;
}

/* */
/* footer */

.footer-ctnr {
    background-color: var(--customBlack);
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer-icon-wrp:hover {
    opacity: 80%;
}

.footer-icon-wrp svg {
    display: block;
    fill: var(--customWhite);
}

.footer-all-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: var(--systemSpacing-12) var(--systemSpacing-0);
    margin: var(--systemSpacing-0) var(--systemSpacing-120);
}

.footer-contact-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-20);
}

.contact-tl {
    font-size: var(--p-fontSize);
    color: var(--customWhite);
    font-weight: 600;
    cursor: default;
}

.contact-info-wrp {
    display: flex;
}

.contact-info {
    width: var(--systemSpacing-40);
    border-radius: var(--systemSpacing-9999);
}

.contact-info:hover {
    background-color: var(--customBlack-hover);
}

.contact-info svg {
    display: block;
    fill: var(--customWhite);
    margin: var(--systemSpacing-0) auto;
}


/* */
/* page navigation */

.page-navigation {
    display: flex;
    flex-direction: row;
    gap: var(--systemSpacing-12);
    margin: var(--systemSpacing-0) auto;

    width: fit-content;
    max-width: 100%;

    position: fixed;
    left: var(--systemSpacing-0);
    right: var(--systemSpacing-0);
    bottom: var(--systemSpacing-40);
    transform: translateY(-50%);

    z-index: 9999;
}

.page-nav-ctnr {
    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-48);
    /* left: 50%;
    transform: translate(-50%, -50%); */
    box-shadow: var(--systemSpacing-1) var(--systemSpacing-1) var(--systemSpacing-16) var(--systemSpacing-1) var(--systemDim-10);
}

.page-nav-all-wrp {
    display: flex;
    padding: var(--systemSpacing-4);
}

.darkmode-wrp {
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-48);
    background-color: var(--systemWhite);
    
    box-shadow: var(--systemSpacing-1) var(--systemSpacing-1) var(--systemSpacing-16) var(--systemSpacing-1) var(--systemDim-10);
    width: 61.5px;
}

.darkmode-wrp:hover {
    background-color: var(--systemBG-primary);
}

.darkmode-icon-wrp svg {
    width: var(--systemSpacing-36);
    height: var(--systemSpacing-36);
}

.darkmode-icon-wrp svg {
    fill: var(--systemPrimary);
    margin: var(--systemSpacing-0) auto;
    display: block;
}

.sec-nav {
    font-size: var(--ph-fontSize);
    color: var(--systemPrimary);
    padding: var(--systemSpacing-16) var(--systemSpacing-32);
    border-radius: var(--systemSpacing-48);
}

.sec-nav:hover {
    background-color: var(--systemBG-primary);
}

.sec-nav.active {
    background-color: var(--systemBlack);
    color: var(--systemWhite);
}


/* */
/* media query */

@media screen and (max-width: 1294px) {

    /* section a*/

    .sec-title-xlg {
        font-size: var(--d3-fontSize);
        color: var(--systemPrimary);
        font-weight: 600;
    }

    .sec-a-dsc-wrp {
        padding-right: var(--systemSpacing-60);
        padding-bottom: var(--systemSpacing-60);
    }

    /* common text */

    .sec-title-lg {
        font-size: var(--h2-fontSize);
    }

    .sec-dsc-wrp {
        padding-right: var(--systemSpacing-20);
        padding-bottom: var(--systemSpacing-60);
    }

    .tl {
        font-size: var(--hl-fontSize);
    }

    .highlight {
        font-size: var(--h3-fontSize);
        font-weight: 600;
        color: var(--systemPrimary);
    }

    .sec-dsc {
        font-size: var(--p-fontSize);
    }

    /* logo size */

    .logoTmaxFintech {
        width: var(--systemSpacing-240);
    }

    .logoBergAndRidge {
        width: var(--systemSpacing-160);
    }

    .logoASTRSK {
        width: var(--systemSpacing-120);
    }

    .logoUXLab {
        width: var(--systemSpacing-200);
    }

    .logoVibeCoding {
        width: var(--systemSpacing-240);
    }

    .logoAtlas {
        width: var(--systemSpacing-100);
    }

    .logoSymbols {
        width: var(--systemSpacing-100);
    }

    .dsc-link {
        font-size: var(--p-fontSize);
    }

    /* */
    /* page navigation */

    .sec-nav {
        font-size: var(--p-fontSize);
        padding: var(--systemSpacing-12) var(--systemSpacing-24);
    }

    /* */
    /* dark mode */

    .darkmode-wrp {
        width: 51px;
    }

    .darkmode-icon-wrp svg {
        width: var(--systemSpacing-32);
        height: var(--systemSpacing-32);
    }

    /* footer */

    .footer-all-wrp {
        margin: 0 var(--systemSpacing-40);
    }
}


@media screen and (max-width: 960px) {

    /* section a */

    .secGrid-a {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    .secPos-a-title {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .secPos-a-content {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .secPos-icon {
        grid-column: 7 / 7;
        grid-row: 1 / 2;
    }

    .sec-title-xlg {
        font-size: var(--h2-fontSize);
        margin-bottom: var(--systemSpacing-20);
    }

    .sec-a-dsc-wrp {
        padding-right: var(--systemSpacing-0);
        padding-bottom: var(--systemSpacing-80);
    }

    .sec-dsc-lg {
        font-size: var(--hl-fontSize);
    }

    .link-to {
        font-size: var(--hl-fontSize);
    }

    /* section b */

    .secGrid-b {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    .secPos-b-title {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .sec-title-lg {
        font-size: var(--h2-fontSize);
        margin-bottom: var(--systemSpacing-20);
    }

    .secPos-b-content-experience {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .secPos-b-content-sideproject {
        grid-column: 2 / 6;
        grid-row: 3 / 4;    
    }

    .secPos-b-content-khu {
        grid-column: 2 / 6;
        grid-row: 4 / 5;
    }

    .secPos-b-content-award {
        grid-column: 2 / 6;
        grid-row: 5 / 6;  
    }

    .sec-dsc-wrp {
        padding-right: var(--systemSpacing-0);
        padding-bottom: var(--systemSpacing-60);
    }

    .sec-dsc {
        font-size: var(--hl-fontSize);
    }

    .sec-cap {
        font-size: var(--p-fontSize);
    }

    .khu-img-wrp, .dff-mark-img-wrp {
        width: 70%;
    }

    .tl {
        font-size: var(--h6-fontSize);
    }

    .highlight {
        font-size: var(--h2-fontSize);
    }

    /* section c */

    .secGrid-c {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    .secPos-c-title {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .secPos-c-content-isDoing {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .secPos-c-content-haveDone {
        grid-column: 2 / 6;
        grid-row: 3 / 4;
    }

    .secPos-c-content-knowThis {
        grid-column: 2 / 6;
        grid-row: 4 / 5;
    }

    .secPos-c-content-basic {
        grid-column: 2 / 6;
        grid-row: 5 / 6;
    }

    /* section d */
    /* tmaxfintech */

    .secGrid-d {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    .sec-company-all-wrp {
        margin-bottom: var(--systemSpacing-60);
    }

    .logoTmaxFintech {
        width: var(--systemSpacing-280);
    }

    .sec-company-tmax {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .secPos-d-content-tmax-eo {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .secPos-d-content-tmax-symbols {
        grid-column: 2 / 6;
        grid-row: 3 / 4;
    }

    .secPos-d-content-tmax-corebank {
        grid-column: 2 / 6;
        grid-row: 4 / 5;
    }

    .secPos-d-content-tmax-webpage {
        grid-column: 2 / 6;
        grid-row: 5 / 6;
    }

    /* bergandridge */

    .secGrid-d1 {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(7, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    .sec-company-bergandridge {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .logoBergAndRidge {
        width: var(--systemSpacing-200);
    }

    .secPos-d1-content-bnr-branddesign {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .secPos-d1-content-bnr-uxuidesign {
        grid-column: 2 / 6;
        grid-row: 3 / 4;
    }

    .secPos-d1-content-bnr-popupstore {
        grid-column: 2 / 6;
        grid-row: 4 / 5;
    }

    .secPos-d1-content-bnr-distribution {
        grid-column: 2 / 6;
        grid-row: 5 / 6;
    }

    .secPos-d1-content-bnr-himmee {
        grid-column: 2 / 6;
        grid-row: 6 / 7;
    }

    .secPos-d1-content-bnr-aurora {
        grid-column: 2 / 6;
        grid-row: 7 / 8;
    }

    /* section e */

    .secGrid-e {
        display: grid;
        grid-gap: var(--systemSpacing-20);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: row;
        grid-template-rows: auto;
        margin-bottom: var(--systemSpacing-20);
    }

    /* astrsk */

    .sec-side-astrsk {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .logoASTRSK {
        width: var(--systemSpacing-160);
    }

    .secPos-e-content-astrsk {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    /* ux lab */

    .sec-side-uxlab {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .logoUXLab{
        width: var(--systemSpacing-280);
    }

    .secPos-e-content-uxlab {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    /* vibecoding */

    .sec-side-vibecoding {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .logoVibeCoding {
        width: var(--systemSpacing-320);
    }

    .secPos-e-content-vibecoding {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    /* atlas */

    .sec-side-atlas {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .logoAtlas {
        width: var(--systemSpacing-160);
    }

    .secPos-e-content-atlas {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    /* symbols */

    .sec-e-4 {
        margin-bottom: var(--systemSpacing-160);
    }

    .sec-side-symbols {
        grid-column: 2 / 6;
        grid-row: 1 / 2;
    }

    .secPos-e-content-symbols {
        grid-column: 2 / 6;
        grid-row: 2 / 3;
    }

    .logoSymbols {
        width: var(--systemSpacing-140);
    }

    .icon-wrp svg {
        width: var(--systemSpacing-12);
    }

    .dsc-link {
        font-size: var(--p-fontSize);
    }

    .chevron-icon-wrp svg {
        width: var(--systemSpacing-20);
        height: var(--systemSpacing-20)
    }

    /**/

    .link-chevron-btn-wrp {
        padding: var(--systemSpacing-8) var(--systemSpacing-8) var(--systemSpacing-8) var(--systemSpacing-16);
        gap: var(--systemSpacing-2);
    }

    .dsc-link-btn {
        font-size: var(--ch-fontSize);
    }

    .link-chevron-btn-wrp .chevron-icon-wrp svg {
        width: var(--systemSpacing-16);
    }
}


@media screen and (max-width: 600px) {

    /* */
    /* section a */

    .secPos-a-title {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .secPos-a-content {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .sec-ctt-tl-lg {
        font-size: var(--h3-fontSize);
        margin-bottom: var(--systemSpacing-20);
    }

    .sec-dsc-lg {
        font-size: var(--p-fontSize);
    }

    .link-to {
        font-size: var(--p-fontSize);
    }

    .side-project-logo-wrp {
        margin-bottom: var(--systemSpacing-20);
    }

    /* section b */

    .sec-title-lg {
        font-size: var(--h3-fontSize);
    }

    .secPos-b-title {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .secPos-b-content-experience {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .secPos-b-content-sideproject {
        grid-column: 1 / 7;
        grid-row: 3 / 4;    
    }

    .secPos-b-content-khu {
        grid-column: 1 / 7;
        grid-row: 4 / 5;
    }

    .secPos-b-content-award {
        grid-column: 1 / 7;
        grid-row: 5 / 6;  
    }

    .tl {
        font-size: var(--hl-fontSize);
    }

    .highlight {
        font-size: var(--h4-fontSize);
    }

    .sec-dsc {
        font-size: var(--p-fontSize);
    }

    .sec-cap {
        font-size: var(--ch-fontSize);
    }

    .khu-img-wrp, .dff-mark-img-wrp {
        width: 100%;
    }

    /* section c */

    .secPos-c-title {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .secPos-c-content-isDoing {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .secPos-c-content-haveDone {
        grid-column: 1 / 7;
        grid-row: 3 / 4;
    }

    .secPos-c-content-knowThis {
        grid-column: 1 / 7;
        grid-row: 4 / 5;
    }

    .secPos-c-content-basic {
        grid-column: 1 / 7;
        grid-row: 5 / 6;
    }

    /* section d */

    .duration {
        font-size: var(--ch-fontSize);
        margin-bottom: var(--systemSpacing-20);
    }

    .logoTmaxFintech {
        width: var(--systemSpacing-240);
    }
    .sec-company-tmax {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .secPos-d-content-tmax-eo {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .secPos-d-content-tmax-symbols {
        grid-column: 1 / 7;
        grid-row: 3 / 4;
    }

    .secPos-d-content-tmax-corebank {
        grid-column: 1 / 7;
        grid-row: 4 / 5;
    }

    .secPos-d-content-tmax-webpage {
        grid-column: 1 / 7;
        grid-row: 5 / 6;
    }

    /* bergandridge */

    .sec-company-bergandridge {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .logoBergAndRidge {
        width: var(--systemSpacing-160);
    }

    .secPos-d1-content-bnr-branddesign {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .secPos-d1-content-bnr-uxuidesign {
        grid-column: 1 / 7;
        grid-row: 3 / 4;
    }

    .secPos-d1-content-bnr-popupstore {
        grid-column: 1 / 7;
        grid-row: 4 / 5;
    }

    .secPos-d1-content-bnr-distribution {
        grid-column: 1 / 7;
        grid-row: 5 / 6;
    }

    .secPos-d1-content-bnr-himmee {
        grid-column: 1 / 7;
        grid-row: 6 / 7;
    }

    .secPos-d1-content-bnr-aurora {
        grid-column: 1 / 7;
        grid-row: 7 / 8;
    }

    /* section e */
    /* astrsk */

    .sec-side-astrsk {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .logoASTRSK {
        width: var(--systemSpacing-120);
    }

    .secPos-e-content-astrsk {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

        /* ux lab */

    .sec-side-uxlab {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .logoUXLab{
        width: var(--systemSpacing-200);
    }

    .secPos-e-content-uxlab {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    /* vibecoding */

    .sec-side-vibecoding {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .logoVibeCoding {
        width: var(--systemSpacing-240);
    }

    .secPos-e-content-vibecoding {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    /* atlas */

    .sec-side-atlas {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .logoAtlas {
        width: var(--systemSpacing-120);
    }

    .secPos-e-content-atlas {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    /* symbols */

    .sec-e-4 {
        margin-bottom: var(--systemSpacing-100);
    }

    .sec-side-symbols {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
    }

    .secPos-e-content-symbols {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
    }

    .logoSymbols {
        width: var(--systemSpacing-120);
    }



    .link-chevron-btn-wrp {
        gap: var(--systemSpacing-4);
        padding: var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-20);
    }

    .link-chevron-btn-wrp .chevron-icon-wrp svg {
        width: var(--systemSpacing-20);
    }

    .dsc-link-btn {
        font-size: var(--p-fontSize);
    } 

    /* */
    /* page navigation */

    .page-navigation {
        gap: var(--systemSpacing-4);
    }

    .sec-nav {
        font-size: var(--ch-fontSize);
        padding: var(--systemSpacing-8) var(--systemSpacing-16);
    }

    
    /* */
    /* dark mode */

    .darkmode-wrp {
        width: 41px;
    }

    .darkmode-icon-wrp svg {
        width: var(--systemSpacing-24);
        height: var(--systemSpacing-24);
    }

    /* footer */

    .contact-tl {
        display: none;
    }
}

@media screen and (max-width: 450px) {

    .sec-nav {
        font-size: var(--ch-fontSize);
        padding: var(--systemSpacing-8) var(--systemSpacing-12);
    }
}