@charset "utf-8";

/********** 공통 **********/

* {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    
}

/*
html::-webkit-scrollbar {
    display: none;
}
*/
html {
    background-color: #000;
}

#wrap {
    width: 100%;
    background-color: #000;
    filter: inver
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}


.hidden {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
}


/********** header **********/

#header {
    height: 60px;
    background-color: #000;
    padding: 0 30px;
}

#logo_main {
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 60px;
    float: left;
    cursor: pointer;
}

#lnb {
    float: right
}


#lnb > ul > li {
    float: left;
    color: #fff;
    cursor: pointer;
    margin-left: 20px;
    font-weight: 500;
    line-height: 60px;
    font-size: 1em
}



/********** main **********/
#content {
    height: calc(100% - 120px);
    padding: 30px;
}


/********** title **********/
#title {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
}

h2 {
    color: #000;
    font-size: 9em;
    font-weight: 900;
    text-shadow: 0 0 2px #fff,  0 0 2px #fff,  0 0 2px #fff;
    line-height: 0.8;
    letter-spacing: -5px;
    cursor: pointer;
}

h3 {
    color: #000;
    font-size: 9em;
    font-weight: 900;
    text-shadow: 0 0 2px #fff,  0 0 2px #fff,  0 0 2px #fff;
    line-height: 0.8;
    letter-spacing: -5px;
    margin-top: 30px;
    cursor: pointer;
}

/********** portfolio **********/
#portfolio {
}


#portfolio > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}


#portfolio > ul > li:last-child {
    position: relative;

}

#portfolio > ul > li:last-child > a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
}
#portfolio > ul > li:last-child > a:hover {
    color: #ddd
}

.pf_list {
    float: left;
    color: #fff;
    background-color: #333;
    text-align: center;
    height: 220px;
    margin-top: 30px;
}



.pf_list > ul > li:first-child {
    font-size: 1em;
    font-weight: 700;
    padding-top: 10px;

}

.pf_list > ul > li:nth-child(2) {
    position: relative;
}

.pf_list > ul > li:nth-child(2) > a {
    display: block;
    height: 150px;
}

.pf_list img {
    width: 175px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert()
}
.pf_list img:hover {
    opacity: 0.8
}



.pf_list > ul > li:nth-child(3) > a {
    display: block;
    line-height: 40px;
    background-color: #444;
    color: #fff;
    font-weight: 500;
}

.pf_list > ul > li:nth-child(3) > a:hover {
    background-color: #555;
}


/********** about **********/
#about {
}


h4 {
    font-size: 1.5em;
    margin-bottom: 20px;
    margin-right: 20px;
    color: #fff;
    line-height: 1;
}

#about > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}


.abt_list {
    background-color: #333;
    padding: 30px;
     margin-top: 30px;
}
.abt_list > ul {
    float: left;
}

.abt_list > ul > li {
    margin-bottom: 10px;
}

.abt_list > ul > li:last-child {
    margin-bottom: 0;
}

.abt_list > ul > li > p {
    line-height: 1.5;
    font-weight: 300;
    color: #fff
}
.abt_list > ul > li > p:first-child {
    color: #ddd;
    font-size: 0.8em
}
.abt_list > ul > li > p:nth-child(2) {
    font-weight: 700
}






/********** contact **********/
#contact {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    backdrop-filter: blur(10px)
}
#contact p {
    text-align: right;
    color: #fff;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1;
    background-color: #000;
    padding-bottom:20px;
    padding-right: 30px;
}




/********** 반응형 **********/
@media all and (max-width:1023px) {
    #wrap {
        height: 100%;
    }
    #portfolio > ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
    h2 {
        font-size: 7em;
        letter-spacing: -3px
    }
    h3 {
        font-size: 7em;
        letter-spacing: -3px
    }
}

@media all and (max-width:767px) {
    #content {
    padding: 20px;
}
    #header {
        padding: 0 20px;
    }
    #logo_main {
        font-size: 1.2em
    }
    #lnb > ul > li {
        font-size: 0.9em;
        margin-left: 10px;
    }
    
    #portfolio > ul {
        grid-template-columns: 1fr;
    }
    .pf_list {
        margin-top: 0;
       padding-top: 0px;
    }
   
    #about > ul {
        grid-template-columns: 1fr;
        margin: 20px 0
    }
    #portfolio > ul > li:first-child {
        margin-top: 20px;
    }
    .abt_list {
        margin-top: 0;
        padding: 20px
    }
    
     h2 {
        font-size: 3.5em;
        letter-spacing: -1px
    }
    h3 {
        font-size: 3.5em;
        letter-spacing: -1px;
        margin-top: 20px;
    }
}