@charset "utf-8";
/* 헤더 영역 */
header {
    position: relative;
}
/* 섹션-콘텐츠 영역*/
.content {}
.content h1 {
    font-family: "Playfair Display";
    text-align: center;
    font-size: 16vw;
    line-height: 16vw;
    font-weight: 100;
    color: var(--main);
    text-shadow: 12px 15px 1px #E3E3E3;
    position: relative;
    z-index: 1;
}
.content h1::after {
    content: '';
    display: block;
    background-color: var(--main);
    width: 81%;
    height: 1px;
    position: absolute;
    left:0;
    bottom: -5%;
    opacity: 80%;
}
.content .container {
    padding-top: 500px;
    position: relative;
}
/* 카테고리 영역 */
.content .category{
    position: absolute;
    left: 10%;
    bottom : 0;
    z-index: 92;
}
.content .category::after{
    content: '';
    display: block;
    background-color: var(--main);
    width: 1px;
    height: 430px;
    position: absolute;
    right: -45%;
    top: -300px;
    opacity: 80%;
    z-index: 92;
}
.content .category li {
    padding: 4px 0;
    text-align: right;
}
.content .category li a {
    color: var(--txt);
    font-weight: 700;
    opacity: 60%;
    transition: all .3s;
    font-size: 1.2rem;
}
.content .category li:hover a {
    opacity: 100%;
    color: var(--acc);
}
.content .category li img {
    position: absolute;
    left: 15vw;
    right: 50%;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    pointer-events: none;
}

.content .category .uxui:hover img {
    opacity: 1;
}
.content .category .webapp:hover img {
    opacity: 1;
}
.content .category .ai:hover img {
    opacity: 1;
}
.content .category .img:hover img {
    opacity: 1;
}
/* 카테고리 영역2 */
/* .content .title2 {
    text-align: right;
    position: absolute;
    left: 10%;
    bottom : 0;
    z-index: 92;
}
.content .title2 a {
    color: var(--txt);
    font-weight: 700;
    opacity: 60%;
    transition: all .3s;
    font-size: 1.2rem;
    display: block;
    padding: 4px 0;
    text-align: right;
}
.content .title2 a:hover {
    opacity: 100%;
    color: var(--acc);
}
.content .img-group {
    position: absolute;
    right: 35%;
    bottom: 0;
    width: 500px;
    height: 400px;
    z-index: 92;
    display: none;
}
.content .img-group.show {
    display: flex;
}
.content .img-group.show img {}
.content .img-group.show img:nth-child(1) {
    width: 90%;
    height: 90%;
    transform: translate(190px,-75px);
}
.content .img-group.show img:nth-child(2) {
    width: 75%;
    height: 75%;
    transform: rotate(-8deg) translate(-320px,40px);
    z-index: 2;
}
.content .img-group.show img:nth-child(3) {
    width: 60%;
    height: 60%;
    transform: rotate(5deg) translate(-300px,170px);
} */

/* 프로필 영역 */
.content .profile {
    position: absolute;
    right: 0;
    top : 20%;
    text-align: right;
    color: var(--txt);
}
.content .profile p {
    font-size: 0.8em;
    font-weight: 500;
}
.content .profile h4 {
    font-size: 1.1em;
    font-weight: 900;
}


/* 모바일 - 배경 */
.content .mb-bg {
    display: none;
    position: absolute;
    left: 15%;
    top: 60%;
    transform: translateY(-50%);
    z-index: 90;
    width: 60%;
}
.content .mb-bg img {
    width: 100%;
    height: 100%;
    z-index: 90;
}
/* 모바일 - 디스크립션 */
.content .desc {
    display: none;
    position: absolute;
    top: 45%;
    right: 0;
}
.content .desc p {
    color: var(--txt);
    text-align: right;
    font-size: 1.2em;
    line-height: 1.5em;
}
.content .desc .mo{
    display: none;
}

/* 푸터영역 */
.footer {}
.footer .pc {}
.footer .mo {
    display: none;
}

/* ========== 반응형 ========== */
@media screen and (max-width : 1240px){
    /* 카테고리 영역 */
    .content .category{
        left: 9%;
    }
    .content .category::after{
        right: -35%;
    }
    .content .category li img {
        left: 12vw;
    }
}
@media screen and (max-width : 960px){
    /* 섹션-콘텐츠 영역 */
    .content .container {
        padding-top: 70vh;
    }
    /* 카테고리 영역 */
    .content .category{
        left: 30%;
        bottom : auto;
        top: 50px;
        /* transform: translateX(-50%); */
    }
    .content .category li {
        display: none;
    }
    .content .category::after{
        top: 0;
        height: 65vh;
    }
    /* 모바일-배경 */
    .content .mb-bg {
        display: block;
    }
    /* 모바일-디스크립션 */
    .content .desc {
        display: block;
    }
    /* 푸터영역 */
    .footer .pc {
        display: none;
    }
    .footer .mo {
        display: block;
    }
    .footer {
        bottom: 2%;
    }
}
@media screen and (max-width : 640px){
    .content .mb-bg {
        left: 10%;
        top: 65%;
        width: 70%;
    }
}
@media screen and (max-width : 480px){
    /* 프로필 */
    .content .profile p {
        font-size: 0.8em;
    }
    .content .profile h4 {
        font-size: 1em;
        font-weight: 800;
    }
    /* 모바일 - 배경 */
    .content .mb-bg {
        z-index: 90;
        left: 10%;
        top: 70%;
    }
    /* 모바일 디스크립션 */
    .content .desc p {
        font-size: 1em;
        line-height: 1.3em;
    }
}