@import "../table/_table";

.vision-content-area {
    .v-title {
        color: var(--navy); font-weight: 700; font-size: 3rem; line-height: 1; padding-bottom: 20px;
    }
    .v-group {
        padding-bottom: 60px; text-align: center;
        b {
            font-weight: 700;
        }
        &.vision {
            .v-cont {
                font-size: 3.8rem; font-weight: 300;
            }
        }
        &.goal {
            .v-img {
                position: relative; 
                &:after {
                    content: ''; width: 100%; height: 6px; display: block; position: absolute; top: 49%; left: 0; transform: translateY(-50%); background: linear-gradient(90deg, #75ADEE 0%, #75ADEE 8.01%, #75ADEE 20.03%, #75ADEE 32.04%, #3367D6 41.05%, #3D51D0 45.06%, #3A40A8 63.08%, #362F96 79.11%, #1F248D 91.12%, #1A0B5D 100.13%), #FFF;
                }
                img {
                    position: relative; display: block; z-index: 1; padding: 0; width: 1000px; max-width: 100%;
                }
            }
        }
        &.talent {
            .box-txt {
                padding: 20px; background: #ebeef5; border-radius: 50px; border: 1px solid var(--theme);
                .txt {
                    font-size: 2.7rem; font-weight: 300;
                }
            }
        }
        &.strategy {
            .strategy-list {
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;
                .item {
                    position: relative; border: 1px solid; border-radius: 15px; background: #eee; padding: 50px 15px 30px;
                    .num {
                        width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 2.5rem; font-weight: 800; color: #fff; border-radius: 100px; border: 5px solid #FFF; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.12); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); 
                    }
                    .txt {
                        font-size: 2rem; font-weight: 400;
                    }
                    &.type-1 {
                        border-color: #44C5C5; background: #F5FAFB;
                        .num {
                            background: #00C9A7;
                        }
                    }
                    &.type-2 {
                        border-color: #4E8BFF; background: #F5F7FB;
                        .num {
                            background: #4E8BFF;
                        }
                    }
                    &.type-3 {
                        border-color: #EA7EF4; background: #FBF5FB;
                        .num {
                            background: #EA7EF4;
                        }
                    }
                }
            }
            .default-table {
                margin-top: 30px;
                table {
                    tr {
                        th,
                        td {
                            padding: 10px 15px; line-height: 1.7; font-size: 1.7rem; color: #333;
                        }
                    }
                }
            }
        }
        &.super-hero {
            padding-top: 60px;
            .v-title {
                .tit {
                    font-size: 7rem; position: relative; letter-spacing: 60px; font-weight: 900; color: #243186;
                    &:after {
                        content: '['; position: absolute; top: 0; left: 0; transform: translateX(-100%); color: #CECECE; letter-spacing: 0;
                    }
                    &:before {
                        content: ']'; position: absolute; top: 0; right: 0; transform: translateX(100%); color: #CECECE; letter-spacing: 0;
                    }
                }
                .txt {
                    font-size: 2.5rem; letter-spacing: 0; font-weight: 300; padding-top: 30px; color: #000;
                }
            }
            .super-hero-list {
                display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; margin-top: 60px;
                .item {
                    flex: 1 1 18%; position: relative; border-radius: 15px; background: #eee; padding: 50px 15px 30px; font-size: 1.8rem; font-weight: 400; color: #555;
                    .initial {
                        font-size: 2rem; font-weight: 800; color: #fff; border-radius: 100px; border: 5px solid #FFF; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.12); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); background: #997ffb; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
                    }
                    .en {
                        font-weight: 600;
                    }
                }
            }
        }
        &.education {
            padding-top: 60px;
            .v-cont {
                border: 10px solid #eee; padding: 40px 40px 30px; display: flex; gap: 100px; text-align: left;
                .img-area {
                    width: 250px; height: auto; margin-top: -100px;
                    img {
                        width: 100%; height: 100%; object-fit: contain; display: block;
                    }
                }
                .text-area {
                    --mark-size: 30px;
                    font-family: 'Nanum Myeongjo'; line-height: 1.6; position: relative;
                    &:after, &:before {
                        content: ''; background: url(../img/startup/vision_mark.svg) no-repeat center center / contain; width: var(--mark-size); height: var(--mark-size); display: block; position: absolute; 
                    }
                    &:after {
                        top: 0; left: calc(var(--mark-size) * -1.5);
                    }
                    &:before {
                        bottom: 65px; right: calc(var(--mark-size) * -1.5); transform: rotate(180deg);
                    }
                    .p1 {
                        font-size: 2.1rem; font-weight: 400;
                    }
                    .p2 {
                        font-size: 2.5rem; font-weight: 900; padding-top: 10px;
                    }
                    .name {
                        font-size: 2.1rem; text-align: right; padding-top: 10px;
                    }
                }
            }
        }
    }
    

    // 반응형
    @media (max-width: 1200px) {
        .v-group {
            &.education {
                padding-top: 50px;
                .v-cont {
                    gap: 40px; padding: 32px 32px 24px; border-width: 8px;
                    .img-area {
                        width: 200px; margin-top: -80px;
                    }
                    .text-area {
                        --mark-size: 24px;
                        .p1 { 
                            font-size: 1.9rem; 
                        }
                        .p2 { 
                            font-size: 2.2rem; padding-top: 8px; 
                        }
                        .name { 
                            font-size: 1.9rem; padding-top: 8px; 
                        }
                    }
                }
            }
            &.super-hero {
                padding-top: 50px;
                .v-title {
                    .tit {
                        font-size: 5rem; letter-spacing: 40px;
                    }
                    .txt {
                        font-size: 2.2rem; padding-top: 24px;
                    }
                }
                .super-hero-list {
                    gap: 16px; margin-top: 50px;
                    .item {
                        flex: 1 1 22%; padding: 45px 12px 24px; font-size: 1.6rem;
                        .initial {
                            width: 46px; height: 46px; font-size: 1.8rem; top: -22px; border-width: 4px;
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 1024px) {
        .v-title {
            font-size: 2.6rem; padding-bottom: 16px;
        }
        .v-group {
            padding-bottom: 50px;
            &.vision .v-cont {
                font-size: 3.2rem;
            }
            &.talent .box-txt .txt {
                font-size: 2.4rem;
            }
            &.strategy .strategy-list {
                grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px;
                .item {
                    padding: 45px 12px 24px;
                    .num {
                        width: 52px; height: 52px; font-size: 2.2rem; border-width: 4px;
                    }
                    .txt {
                        font-size: 1.8rem;
                    }
                }
            }
            &.strategy .default-table table tr th,
            &.strategy .default-table table tr td {
                padding: 8px 12px; font-size: 1.5rem;
            }
            &.education {
                padding-top: 40px;
                .v-cont {
                    flex-direction: column-reverse; gap: 30px; padding: 28px 24px 20px; border-width: 6px; align-items: center; text-align: center;
                    .img-area {
                        width: 180px; margin-top: 0;
                    }
                    .text-area {
                        --mark-size: 22px;
                        &:before { 
                            bottom: 50px; 
                        }
                        &:after { 
                            left: calc(var(--mark-size) * -1); 
                        }
                        .p1 { 
                            font-size: 1.8rem; 
                        }
                        .p2 { 
                            font-size: 2rem; padding-top: 8px; 
                        }
                        .name { 
                            font-size: 1.8rem; padding-top: 8px; text-align: center; 
                        }
                    }
                }
            }
            &.super-hero {
                padding-top: 40px;
                .v-title {
                    .tit {
                        font-size: 4rem; letter-spacing: 30px;
                    }
                    .txt {
                        font-size: 2rem;
                    }
                }
                .super-hero-list {
                    gap: 16px; margin-top: 40px;
                    .item {
                        flex: 1 1 30%; padding: 40px 12px 20px; font-size: 1.5rem;
                        .initial {
                            width: 44px; height: 44px; font-size: 1.7rem; top: -20px; border-width: 4px;
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 768px) {
        .v-title {
            font-size: 2.2rem; padding-bottom: 12px;
        }
        .v-group {
            padding-bottom: 40px;
            &.vision .v-cont {
                font-size: 2.6rem;
            }
            &.talent .box-txt {
                padding: 16px; border-radius: 30px;
                .txt {
                    font-size: 2rem;
                }
            }
            &.strategy .strategy-list {
                grid-template-columns: 1fr; gap: 12px; margin-top: 12px;
                .item {
                    padding: 40px 15px 20px;
                    .num {
                        width: 48px; height: 48px; font-size: 2rem; top: -24px;
                    }
                    .txt {
                        font-size: 1.6rem;
                    }
                }
            }
            &.strategy .default-table {
                margin-top: 20px;
                table tr th,
                table tr td {
                    padding: 6px 10px; font-size: 1.4rem;
                }
            }
            &.education {
                padding-top: 30px;
                .v-cont {
                    gap: 24px; padding: 24px 20px 16px; border-width: 5px;
                    .img-area {
                        width: 150px;
                    }
                    .text-area {
                        --mark-size: 18px;
                        &:before { 
                            bottom: 40px; 
                        }
                        .p1 { 
                            font-size: 1.6rem; 
                        }
                        .p2 { 
                            font-size: 1.8rem; padding-top: 6px; 
                        }
                        .name { 
                            font-size: 1.6rem; padding-top: 6px; 
                        }
                    }
                }
            }
            &.super-hero {
                padding-top: 30px;
                .v-title {
                    .tit {
                        font-size: 3rem; letter-spacing: 15px;
                    }
                    .txt {
                        font-size: 1.8rem;
                    }
                }
                .super-hero-list {
                    gap: 12px; margin-top: 30px;
                    .item {
                        flex: 1 1 45%; padding: 35px 0 15px;
                        .initial {
                            width: 40px; height: 40px; font-size: 1.6rem; top: -18px; border-width: 4px;
                        }
                    }
                }
            }
        }
    }

    @media (max-width: 480px) {
        .v-title {
            font-size: 1.8rem; padding-bottom: 10px;
        }
        .v-group {
            padding-bottom: 30px;
            &.vision .v-cont {
                font-size: 1.8rem; word-break: keep-all;
            }
            &.talent .box-txt {
                padding: 15px 20px; 
                .txt {
                    font-size: 1.5rem;
                }
            }
            &.strategy {
                .v-title {
                    padding-bottom: 18px;
                }
                .strategy-list {
                    gap: 25px;
                    .item {
                        padding: 30px 10px 15px;
                        .num {
                            width: 35px; height: 35px; font-size: 1.6rem; border-width: 3px; top: -22px;
                        }
                        .txt {
                            font-size: 1.5rem;
                        }
                    }
                }
            }
            &.strategy .default-table table tr th,
            &.strategy .default-table table tr td {
                padding: 6px 8px; font-size: 1.3rem;
            }
            &.education {
                padding-top: 24px;
                .v-cont {
                    gap: 20px; padding: 20px; border-width: 4px;
                    .img-area {
                        width: 120px;
                    }
                    .text-area {
                        --mark-size: 16px;
                        &:before,
                        &:after { 
                            display: none; 
                        }
                        .p1 { 
                            font-size: 1.4rem; 
                        }
                        .p2 { 
                            font-size: 1.6rem; padding-top: 6px; 
                        }
                        .name { 
                            font-size: 1.4rem; padding-top: 6px; 
                        }
                    }
                }
            }
            &.super-hero {
                padding-top: 24px;
                .v-title {
                    .tit {
                        font-size: 2.6rem; letter-spacing: 10px;
                        &:after,
                        &:before {
                            font-size: 2.3rem;
                        }
                    }
                    .txt {
                        font-size: 1.6rem;
                    }
                }
                .super-hero-list {
                    gap: 20px 7px; margin-top: 24px;
                    .item {
                        padding: 25px 0 15px; border-radius: 7px;
                        .initial {
                            width: 36px; height: 36px; font-size: 1.4rem; top: -16px; border-width: 3px;
                        }
                    }
                }
            }
        }
    }
}