@charset "utf-8";
/* 공통클래스 */
h3 {
    font-family: "Playfair Display";
    color: var(--acc);
    font-weight: 900;
    font-size: 2em;
}
body {}
/* 콘텐츠 영역 */
.content .container {
    position: relative;
}
.content .about-content {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    height: 100%;
}

/* 소개글 영역 */
.content .desc {
    grid-row: 1/4;
    grid-column: 1/4;
    margin: 40px 50px;
    word-break: keep-all;
}
.content .desc h3 {
    font-size: 2rem;
    color: var(--main);
    line-height: 2.5rem;
    font-weight: 800;
}
.content .desc p {
    padding-top: 20px;
    font-size: 1.2rem;
    line-height: 1.7rem;
    letter-spacing: -2%;
    color: var(--txt);
    font-weight: 500;
}
.content .desc p strong {}

/* 프로필 영역 */
.content .profile {
    grid-row: 1/4;
    grid-column: 4/6;
    position: relative;
}
.content .profile img {
    width: 105%;
    position: absolute;
    left: -50px;
    top: -10px;
}
.content .mb_profile {
    display: none;
    grid-row: 2/3;
    grid-column: 1/4;
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.content .mb_profile::after {
    content: '';
    display: block;
    width: 40%;
    height: 1px;
    background-color: var(--main);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 30%;
}
.content .mb_profile img {
    width: 100%;
}
/* 백그라운드 영역 */
.content .bg {
    grid-row: 3/6;
    grid-column: 1/4;
    position: relative;
    margin-top: 50px;
}
/* 경력 영역 */
.content .experience {
    background-color: var(--mint);
    width: 75%;
    border-radius: 250px;
    padding: 40px 30px 70px 80px;
    z-index: 98;
    position: absolute;
    left: 90px;
    top: 0;
}
.content .experience h3 {}
.content .experience .exp-wrap {
    display: flex;
    gap: 20px;
    margin-left: 15%;
    white-space: nowrap;
}
.content .experience .date {}
.content .experience .date p {
    margin: 10px 20px;
}
.content .experience .exp {}
.content .experience .exp p {
    position: relative;
    margin: 10px 0;
}
.content .experience .exp p::before {
    content: '';
    display: block;
    background-color: var(--acc);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
}
.content .experience .exp p:nth-child(2)::after{
    content: '';
    display: block;
    background-color: var(--acc);
    width: 1px;
    height: 60px;
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
}

.content .bg-deco {
    width: 90%;
    padding-top: 30%;
    background-color: var(--main);
    rotate: 16deg;
    border-radius: 500px;
    position: absolute;
    left: 0;
    top: 31.5%;
}
/* 학력 영역 */
.content .education {
    background-color: var(--gold);
    width: 60%;
    border-radius: 500px;
    padding: 40px 50px;
    z-index: 99;
    position: absolute;
    left: 10px;
    top: 50%;
}
.content .education h3 {}
.content .education .edu-wrap {
    display: flex;
    gap: 20px;
    margin-left: 15%;
    white-space: nowrap;
}
.content .education .date {
    position: relative;
}
.content .education .date p {
    margin: 10px 20px;
}
.content .education .edu {}
.content .education .edu p {
    margin: 10px 0;
    position: relative;
}
.content .education .edu p::before {
    content: '';
    display: block;
    background-color: var(--acc);
    width: 7px;
    height: 6.5px;
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
}
.content .education .edu p:first-child::after{
    content: '';
    display: block;
    background-color: var(--acc);
    width: 1px;
    height: 30px;
    position: absolute;
    left: -22px;
    top: 110%;
    transform: translateY(-50%);
}

/* 보유스킬 영역 */
.content .skills {
    grid-row: 4/6;
    grid-column: 4/6;
    width: 85%;
    margin-top: 50px;
}
.content .skills h3 {}
.content .skills .progress-area {
}
.content .skills .progress-area .progress {
    display: flex;
    margin: 10px 0;
}
.content .skills .progress-area .progress p {
    width: 60%;
    white-space: nowrap;
}
.content .skills .progress-area .progress .skill-mb {
    display: none;
}

/* ========== 반응형 ========== */
@media screen and (max-width : 1240px){
    /* 소개글 영역 */
    .content .desc {
        margin: 50px 35px;
    }
    .content .desc h3 {
        font-size: 1.9rem;
        line-height: 2rem;
    }
    .content .desc p {
        font-size: 1.05rem;
        line-height: 1.5rem;
    }
    /* 경력영역 */
    .content .experience {
        left: 50px;
    }
    .content .experience .exp-wrap {
        margin-left: 0;
        gap: 15px;
    }
    .content .experience .date p {
        font-size: 0.9rem;
    }
    .content .experience .exp p {
        font-size: 0.9rem;
    }
    .content .bg-deco {
        width: 80%;
        rotate: 13deg;
        top: 30%;
        padding-top: 28%;
    }
    /* 학력 영역 */
    .content .education .edu-wrap {
        margin-left: 5%;
    }
    .content .education .date p {
        font-size: 0.9rem;
    }
    .content .education .edu p {
        font-size: 0.9rem;
    }
}
@media screen and (max-width : 960px){
    /* 콘텐츠 영역 */
    .content .about-content {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
        height: 77%;
    }
    /* 소개글 영역 */
    .content .desc {
        grid-row: 1/2;
        grid-column: 1/4;
        text-align: center;
        width: 100%;
        margin: 100px 0;
    }
    .content .desc h3 {
        font-size: 2rem;
        line-height: 3rem;
    }
    .content .desc p {
        margin-top: 30px;
        font-size: 1.2rem;
        line-height: 1.7rem;
    }
    /* 프로필 영역 */
    .content .profile {
        display: none;
    }
    .content .mb_profile {
        display: block;
    }
    /* 백그라운드 영역 */
    .content .bg {
        grid-row: 4/5;
    }
    /* 경력 영역 */
    .content .experience {
        left: auto;
        right: 50px;
    }
    .content .experience h3 {
        text-align: center;
    }
    .content .bg-deco {
        width: 85%;
        left: 40px;
        top: 100px;
        padding-top: 23%;
    }
    /* 학력 영역 */
    .content .education {
        left: 50px;
        top: 180px;
    }
    .content .education h3 {
        text-align: center;
    }

    /* 보유스킬 영역 */
    .content .skills {
        grid-row: 3/4;
        grid-column: 1/4;
        width: 80%;
        margin: 130px auto 0;
    }
    .content .skills h3 {
        text-align: center;
        margin-bottom: 40px;
    }
    .content .skills .progress-area .progress {
        margin: 25px 0;
    }
}
@media screen and (max-width : 640px){
    /* 소개글 영역 */
    .content .desc h3 {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
    .content .desc p {
        font-size: 1.05rem;
        line-height: 1.6rem;
    }
    /* 프로필 영역 */
    .content .mb_profile {
        width: 100%;
    }
    /* 백그라운드 영역 */
    /* 경력 영역 */
    .content .experience {
        width: 100%;
        left: 0;
        top: 0;
    }
    .content .bg-deco {
        display: none;
    }
    /* 학력 영역 */
    .content .education {
        width: 85%;
        left: 50%;
        transform: translateX(-50%);
    }
    /* 보유스킬 영역 */
    .content .skills {
        margin: 75px auto 0;
    }
}
@media screen and (max-width : 480px){
    /* 소개글 영역 */
    .content .desc {
        margin: 50px 0;
    }
    .content .desc h3 {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
    .content .desc p {
        font-size: 0.85rem;
        line-height: 1.4rem;
    }
    /* 프로필 영역 */
    .content .mb_profile {
        margin-top: 30px;
    }
    .content .mb_profile::after {
        top: -70px;
    }
    /* 백그라운드 영역 */
    .content .bg {
        margin-top: 0px;
    }
    /* 경력 영역 */
    .content .experience {
        padding: 20px 0 180px;
    }
    .content .experience .exp-wrap {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .content .experience .date p {
        margin: 5px 2px 25px 0;
        font-size: 0.8rem;
        opacity: 0.9;
    }
    .content .experience .exp {
        position: absolute;
        top: -1px;
        left: -11px;
        margin: 0;
        text-align: center;
    }
    .content .experience .exp p {
        margin: 23px 0 0;
    }
    .content .experience .exp p::before {
        display: none;
    }
    .content .experience .exp p:nth-child(2)::after{
        display: none;
    }
    /* 학력 영역 */
    .content .education {
        padding: 20px 50px 130px;
        top: 190px;
    }
    .content .education .edu-wrap {
        display: block;
        position: absolute;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }
    .content .education .date p {
        margin-bottom: 25px;
        font-size: 0.8rem;
        opacity: 0.9;
    }
    .content .education .edu {
        position: absolute;
        top: 5px;
        left: -15px;
        text-align: center;
    }
    .content .education .edu p {
        margin: 23px 0;
    }
    .content .education .edu p::before {
        display: none;
    }
    .content .education .edu p:first-child::after{
        display: none;
    }
    /* 보유스킬 영역 */
    .content .skills {
        margin: 80px auto 0;
    }
    .content .skills h3 {
        margin-bottom: 30px;
    }
    .content .skills .progress-area .progress {
        margin: 20px 0;
    }
    .content .skills .progress-area .progress .skill-pc {
        display: none;
    }
    .content .skills .progress-area .progress .skill-mb {
        display: block;
    }
}