@charset "utf-8";

/* 1400px ~ */
@media all and (min-width:1400px) {

    /*로고*/
    .logo-mobile {
        display: none;
    }

    /*헤더*/
    header {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /*상단바*/
    .nav {
        position: fixed;
        width: 100%;
        height: 12vh;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1;
        transition: 0.3s ease-in-out;
        padding: 0 5%;
        z-index: 2;
    }

    /*스크롤 시 nav*/
    .navbar-effect {
        padding: 0 12%;
    }

    /*text*/
    .header-text {
        position: absolute;
        top: 32%;
        left: 16%;
    }

    .header-text p {
        font-size: 7.2rem;
        line-height: 12rem;
        font-weight: 600;
        color: #000;
        font-family: 'wedrive';
        letter-spacing: 1px;
    }

    /*컨텐츠*/
    .contents {
        width: 100%;
    }

    section {
        width: 100%;
        height: 1080px;
    }

    /*about*/
    #about {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 50px;
    }

    #about h2 {
        font-size: 6rem;
        padding: 6% 0 0 10%;
        font-family: 'GmarketSansMedium';
    }

    #about h1 {
        font-family: 'JSArirang-Regular';
        position: absolute;
        width: 100%;
        top: 12%;
        left: 35%;
        font-size: 9rem;
        color: #eee;
        letter-spacing: 2px;
        transform: rotate(-5deg);
    }

    .about-flex {
        width: 80%;
        margin: 5% auto 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .about-flex p {
        width: 100%;
        font-size: 1.6rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 2.7rem;
    }

    .about-flex .about-img {
        width: 500px;
    }

    .about-p-mobile {
        display: none;
    }

    /*skills*/
    .skills-wrap {
        width: 80%;
        margin: 5% auto 10%;
    }

    .skills-wrap h4 {
        font-size: 3.5rem;
    }

    .skills {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 5%;
    }

    .skills-img {
        width: 20%;
    }

    .skills-img img {
        width: 70%;
        margin: 0 auto;
    }

    .skills p {
        text-align: center;
        font-weight: 600;
        font-size: 1.35rem;
        margin-top: 7%;
    }

    /*swiper*/
    .mySwiper {
        pointer-events: none;
        background: #000;
        color: #fff;
    }

    .mySwiper .swiper-slide {
        font-size: 3rem;
        font-family: 'InkLipquid';
    }

    .mobileSwiper {
        display: none;
    }

    /*work*/
    #work {
        position: relative;
        width: 100%;
        height: auto !important;
        overflow-x: hidden;
        background-color: #f7f7f7;
    }

    #work h2 {
        font-size: 6rem;
        padding: 10% 0 0 10%;
        font-family: 'GmarketSansMedium';
    }

    .work-flex {
        width: 80%;
        margin: 3% auto 0;
        display: flex;
        align-items: center;
    }

    .work-img {
        width: 55%;
        overflow: hidden;
        border-radius: 2rem;
    }

    .work-img img {
        -webkit-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
    }

    .work-img:hover img {
        -webkit-transition: all 300ms ease-in;
        -webkit-transform: scale(1.1);
        -ms-transition: all 300ms ease-in;
        -ms-transform: scale(1.1);
        -moz-transition: all 500ms ease-in;
        -moz-transform: scale(1.1);
        transition: all 300ms ease-in;
        transform: scale(1.1);
        /* transform: scale(1.15) rotate(-3deg); */
    }

    .work-text {
        width: 45%;
    }

    .work-text h4 {
        font-size: 3.5rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
        line-height: 5rem;
        margin-bottom: 5%;
        letter-spacing: 1px;
    }

    .work-text p {
        font-size: 1.5rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 2.5rem;
    }

    .work-text p:nth-child(2) {
        font-size: 1.8rem !important;
    }

    #work-btn {
        background: #000;
        color: #fff;
        font-size: 1.7rem;
        padding: 4% 20%;
        font-family: 'S-CoreDream-3Light';
        margin-top: 5%;
        display: inline-block;
        border-radius: 0.5rem;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    #work-btn:hover {
        transition: all 0.2s ease;
        color: #000;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #000;
    }

    /*portfolio*/
    #portfolio {
        position: relative;
        width: 100%;
        height: auto !important;
        overflow-x: hidden;
    }

    #portfolio h2 {
        font-size: 6rem;
        padding: 10% 0 0 10%;
        font-family: 'GmarketSansMedium';
    }

    .portfolio-flex {
        width: 80%;
        margin: 3% auto 0;
        display: flex;
        align-items: center;
    }

    .portfolio-img {
        width: 55%;
        overflow: hidden;
        border-radius: 2rem;
    }

    .portfolio-img img {
        -webkit-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
    }


    .portfolio-img:hover img {
        -webkit-transition: all 300ms ease-in;
        -webkit-transform: scale(1.1);
        -ms-transition: all 300ms ease-in;
        -ms-transform: scale(1.1);
        -moz-transition: all 500ms ease-in;
        -moz-transform: scale(1.1);
        transition: all 300ms ease-in;
        transform: scale(1.1);
    }

    .portfolio-text {
        width: 45%;
    }

    .portfolio-text h4 {
        font-size: 3.5rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
        line-height: 5rem;
        margin-bottom: 5%;
        letter-spacing: 1px;
    }

    .portfolio-text p {
        font-size: 1.5rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 2.5rem;
    }

    .portfolio-text p:nth-child(2) {
        font-size: 1.8rem !important;
    }

    #portfolio-btn {
        background: #000;
        color: #fff;
        font-size: 1.7rem;
        padding: 4% 20%;
        font-family: 'S-CoreDream-3Light';
        margin-top: 5%;
        display: inline-block;
        border-radius: 0.5rem;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    #portfolio-btn:hover {
        transition: all 0.2s ease;
        color: #000;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #000;
    }

    /*포트폴리오 하단설명*/
    .portfolio-bottom {
        width: 80%;
        margin: 3% auto 0;
    }

    .portfolio-bottom h3 {
        font-size: 2.5rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
    }

    .portfolio-bottom p {
        margin: 2% 0 15% 0;
        font-size: 1.7rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 3rem;
    }

    .portfolio-color {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .color-chip-box {
        display: flex;
        margin: 0 2%;
    }

    .portfolio-color .color-chip {
        width: 100px;
        height: 25px;
        margin-left: 5px;
    }

    .portfolio-bottom-r .portfolio-color {
        justify-content: end;
    }

    .portfolio-bottom-r h3 {
        text-align: right;
    }

    .portfolio-bottom-r p {
        text-align: right;
    }

    .marginleft-5 {
        margin-left: 5%;
    }


}


/* ~ 1399px */
@media all and (max-width:1399px) {

    /*로고*/
    .logo-pc {
        display: none;
    }

    /*헤더 비디오*/
    #header-video {
        width: 100%;
        height: 100vh !important;
        object-fit: fill;
    }

    /*헤더*/
    header {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        overflow: hidden !important;
    }

    /*상단바*/
    .nav {
        display: none;
    }

    /*text*/
    .header-text {
        position: absolute;
        top: 32%;
        left: 8%;
    }

    .header-text p {
        font-size: 3rem;
        line-height: 5rem;
        font-weight: 600;
        color: #000;
        font-family: 'wedrive';
        letter-spacing: 1px;
    }

    /*컨텐츠*/
    .contents {
        width: 100%;
        overflow-x: hidden;
    }

    /*about*/
    #about {
        position: relative;
        padding-bottom: 15%;
    }

    #about h2 {
        font-size: 3rem;
        padding: 15% 0 0 5%;
        font-family: 'GmarketSansMedium';
        position: relative;
        z-index: 2;
    }

    #about h1 {
        background-color: #fff;
        position: absolute;
        width: 100%;
        height: calc(200/720*100vw);
        top: 3%;
        left: 0;
        color: #fff;
        z-index: 1;
    }

    .about-flex {
        width: 100%;
        display: flex;
        flex-flow: column-reverse;
        margin: -10% 0 0 0;
        padding: 0 5%;
    }

    .about-flex p {
        width: 100%;
        font-size: 1rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 1.5rem;
        margin: 0 auto 2%;
    }

    .about-flex .about-img {
        width: 100%;
        margin-bottom: 5%;
    }

    .about-p {
        display: none;
    }

    /*skills*/
    .skills-wrap {
        width: 90%;
        margin: 20% auto 5%;
    }

    .skills-wrap h4 {
        font-size: 2.2rem;
    }

    .skills {
        width: 100%;
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        margin-top: 10%;
    }

    .skills-img {
        width: 21%;
        margin-bottom: 10%;
    }

    .skills p {
        text-align: center;
        font-weight: 600;
        font-size: 0.8rem;
        margin-top: 7%;
    }

    /*swiper*/
    .mobileSwiper {
        pointer-events: none;
        background: #000;
        color: #fff;
        padding: 1% 0;
    }

    .mobileSwiper .swiper-slide {
        font-size: 1.7rem;
        font-family: 'InkLipquid';
    }

    .mySwiper {
        display: none;
    }

    /*work*/
    #work {
        position: relative;
        width: 100%;
        overflow: hidden;
        background-color: #f7f7f7;
    }

    #work h2 {
        font-size: 3rem;
        padding: 15% 0 0 6%;
        font-family: 'GmarketSansMedium';
    }

    .work-flex {
        width: 100%;
        display: flex;
        align-items: center;
        flex-flow: column-reverse;
        margin: 7% 0 2% 0;
    }

    .work-flex:nth-child(2) {
        flex-flow: column !important;
    }

    .work-img {
        width: 90%;
    }

    .work-text {
        width: 90%;
        margin-top: 2%;
    }

    .work-text h4 {
        font-size: 1.7rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
        line-height: 2rem;
        letter-spacing: 1px;
        margin: 2% 0 2% 0;
    }

    .work-text p {
        font-size: 0.8rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 1.5rem;
        float: left;
    }

    .work-text p:nth-child(2) {
        border: 1px solid #000;
        padding: 0 2%;
        margin-right: 2%;
    }

    #work-btn {
        background: #000;
        color: #fff;
        font-size: 1.2rem;
        padding: 4% 20%;
        font-family: 'S-CoreDream-3Light';
        margin: 3% 0 5% 0;
        display: inline-block;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
        width: 100%;
        letter-spacing: 1px;
    }

    #work-btn:hover {
        transition: all 0.2s ease;
        color: #000;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #000;
    }

    /*portfolio*/
    #portfolio {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    #portfolio h2 {
        font-size: 3rem;
        padding: 15% 0 0 6%;
        font-family: 'GmarketSansMedium';
    }

    .portfolio-flex {
        width: 100%;
        display: flex;
        align-items: center;
        flex-flow: column-reverse;
        margin: 7% 0 2% 0;
    }

    .portfolio-flex-c {
        flex-flow: column !important;
    }

    .portfolio-img {
        width: 90%;
    }

    .portfolio-text {
        width: 90%;
        margin-top: 2%;
    }

    .portfolio-text h4 {
        font-size: 1.7rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
        line-height: 2rem;
        letter-spacing: 1px;
        margin: 2% 0 2% 0;
    }

    .portfolio-text p {
        font-size: 0.8rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 1.5rem;
        float: left;
    }

    .portfolio-text p:nth-child(2) {
        border: 1px solid #000;
        padding: 0 2%;
        margin-right: 9%;
    }

    #portfolio-btn {
        background: #000;
        color: #fff;
        font-size: 1.2rem;
        padding: 4% 20%;
        font-family: 'S-CoreDream-3Light';
        margin: 3% 0 5% 0;
        display: inline-block;
        border: none;
        transition: all 0.2s ease;
        cursor: pointer;
        width: 100%;
        letter-spacing: 1px;
    }

    #portfolio-btn:hover {
        transition: all 0.2s ease;
        color: #000;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #000;
    }

    #top-btn {
        background-color: #99dff9;
        right: 5% !important;
    }

    /*포트폴리오 하단설명*/
    .portfolio-bottom {
        width: 90%;
        margin: 2% auto 20%;
    }

    .portfolio-bottom h3 {
        font-size: 1.3rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 600;
    }

    .portfolio-bottom p {
        margin-top: 5%;
        font-size: 1rem;
        font-family: 'S-CoreDream-3Light';
        font-weight: 400;
        line-height: 1.5rem;
    }

    .portfolio-color {
        width: 100%;
        display: flex;
        flex-flow: column-reverse;
    }

    .color-chip-box {
        display: flex;
        margin: 2% 0 5% 0;
    }

    .portfolio-color .color-chip {
        width: 100px;
        height: 25px;
    }

    .portfolio-color .color-chip:nth-child(1) {
        margin-right: 5px;
    }

    .portfolio-bottom-r .portfolio-color {
        justify-content: end;
        flex-flow: column;
    }

}