/* common 영역 반응형 */
/* -break point 1700px- */
@media screen and (max-width:1700px) {
    .container {
        width: 90%;
    }
}
/* -break point 1600px- */
@media screen and (max-width:1600px) {
    .container {
        width: 85%;
    }
}
/* -break point 768px- */
@media screen and (max-width:768px) {
    h2 {
        font-size: 5.5vw;
    }
    h3 {
        font-size: 2.7vw;
    }
    h4 {
        font-size: 3.1vw;
    }
}
/* -break point 640px- */
@media screen and (max-width:640px) {
    .container h2{
        font-size: 6vw;
    }
    
}
/* -break point 480px- */
@media screen and (max-width:480px) {
    .container h3{
        font-size: 3.1vw;
    }
    
}

/* ========= nav 반응형 ========= */
/* -breaek point 1400px- */
@media screen and (max-width:1400px) {
    nav .btn-wrap .gotop {
        width: 6vw;
        height: 6vw;
}
    nav .btn-wrap .btn {
        padding: 0 4vw;
        border: 2px solid #918f87;
        border-radius: 60px;
        background-color: #1e1b1a;
        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.4);
    }    
    nav .btn-wrap .btn div a {
        font-size: 1.1vw;
    }
}
@media screen and (max-width:1024px) {
    nav .btn-wrap .btn div a {
        font-size: 1.3vw;
    }
}
@media screen and (max-width:768px) {
    nav .btn-wrap .btn div a {
        font-size: 1.7vw;
    }
    nav .btn-wrap .btn {
        padding: 2vw 4vw;
    }
    nav .btn-wrap .gotop {
        width: 8vw;
        height: 8vw;
    }
    nav .btn-wrap .gotop .img-wrap {
        width: 3vw;
        height: 3vw;
    }
    nav .btn-wrap .btn div .line::after {
    display: none;
}   
}
/* breake point 640px */
@media screen and (max-width:640px) {
    nav .btn-wrap .btn {
        padding: 2.5vw 4vw;
    }
    nav .btn-wrap .btn div a {
        font-size: 2.1vw;
    }
    nav .btn-wrap .gotop {
        width: 11vw;
        height: 11vw;
    }
    nav .btn-wrap .gotop .img-wrap {
        width: 4vw;
        height: 4vw;
    }
}
/* breake point 390px */
@media screen and (max-width:390px) {
    nav .btn-wrap .btn {
        padding: 0vw 5vw;
    }

    nav .btn-wrap .btn div a {
        font-size: 2.9vw;
    }
    nav .btn-wrap .gotop {
        width: 13vw;
        height: 13vw;
    }
    nav .btn-wrap .gotop .img-wrap {
        width: 5vw;
        height: 5vw;
    }
}

/* ======== visual section ======== 반응형 */
/* breake point 1600px */
@media screen and (max-width:1600px) {
    .visual .container .visual-txt {
    padding-top: 10vw;
    padding-bottom: 8vw;
}
}
/* -breake point 768px- */
@media screen and (max-width:768px) {
    .visual .container h2 {
    font-size: 10vw;
}
    .visual .container h2 br {
    display: block;
}
.visual .container .text-shadow-m {
    display: block;
}
.visual .container .text-shadow {
    display: none;
}
}
/* -breake point 640px- */
@media screen and (max-width:640px) {
    .visual .container .year::before {
    top: 27%;
    width: 100%;
    height: 100%;
    background-size: 4vw;
}
}
/* -breake point 480px- */
@media screen and (max-width:480px) {
    .visual .container .year::before {
    top: 27.5%;
    width: 100%;
    height: 100%;
    background-size: 7vw;
    left: 1.5%;
    }
}

/* ======== about section 반응형 ========== */
/* breakepoint 1024px */
@media screen and (max-width:1024px) {
    .about .container >p {
        font-size: 1.6vw;
    }
    .about .left-box .desc-wrap {
        margin-bottom: 8vw;
    }
    .right-box .desc-wrap .img-wrap {
        margin-left: 22%;
        width: 33vw;
    }
    .about .left-box .desc-wrap .name {
        font-size: 1.9vw;
        margin-bottom: 0.6vw;
    }
    .about .left-box .desc-wrap .birth {
        font-size: 1.7vw;
    }
    .about .left-box .contact .intro,
    .right-box .desc-wrap .title {
        font-size: 1.6vw;
    }
    .about .left-box .contact p,
    .right-box .desc-wrap .date,
    .right-box .desc-wrap .desc {
        font-size: 1.2vw;
    }
    
}
/* breakepoint 768px */
@media screen and (max-width:768px) {
    .about .container >p {
        font-size: 2.2vw;
    }
    .about .left-box .desc-wrap {
        margin-bottom: 3vw;
    }
    .right-box .desc-wrap .img-wrap {
    margin-left: 22%;
    width: 36vw;
    }
    .about .left-box .img-wrap {
        width: 29vw;
    }
    .about .left-box .desc-wrap .name {
        font-size: 2.1vw;
    }
    .about .left-box .desc-wrap .birth {
        font-size: 1.8vw;
    }
    .about .left-box .contact .intro,
    .right-box .desc-wrap .title {
        font-size: 1.7vw;
    }
    .about .left-box .contact p,
    .right-box .desc-wrap .date,
    .right-box .desc-wrap .desc {
        font-size: 1.2vw;
    }
}
/* breakepoint 640px */
@media screen and (max-width:640px) {
    .about .left-box .desc-wrap {
        /* margin-top: 1.5vw; */
        margin-bottom: 7.6vw;
    }
    .right-box .desc-wrap .img-wrap {
        margin-left: 15%;
        margin-top: 1vw;
        width: 40vw;
    }
    .about .left-box .desc-wrap .name {
        font-size: 2.2vw;
        margin-bottom: 1vw;
    }
    .about .left-box .desc-wrap .birth {
        font-size: 2vw;
    }
    .about .left-box .contact .intro,
    .right-box .desc-wrap .title {
        font-size: 2vw;
    }
    .about .left-box .contact p,
    .right-box .desc-wrap .date,
    .right-box .desc-wrap .desc {
        font-size: 1.4vw;
    }
    .right-box .desc-wrap .title-line {
        flex-grow: 1;
        border-top: 1px dashed #3b3a37;
        height: 1px;
        margin-left: 15px;
    }
    }
/* breakepoint 480px */
@media screen and (max-width:480px) {
    .right-box .desc-wrap .img-wrap {
        margin-left: 15%;
        width: 40vw;
    }
    .about .left-box .desc-wrap .name {
        font-size: 2.4vw;
    }
    .about .left-box .desc-wrap .birth {
        font-size: 2.2vw;
    }    
    .about .left-box .contact .intro,
    .right-box .desc-wrap .title {
        font-size: 2.2vw;
    }
    .about .left-box .contact p,
    .right-box .desc-wrap .date,
    .right-box .desc-wrap .desc {
        font-size: 1.5vw;
    }

}
/* breakepoint 390px */
@media screen and (max-width:390px) {
    .right-box .desc-wrap .img-wrap {
    margin-top: 1.5vw;
    margin-left: 13%;
    width: 40vw;
}
}

/* ========== coding-work 반응형 ========== */
@media screen and (max-width:1024px) {
    .coding-work h2 span {
        font-size: 1.6vw;
    }
}
@media screen and (max-width:768px) {
    .coding-work h2 span {
        font-size: 2.2vw;
    }
    .coding-work .coding-wrap {
        padding-top: 2.5vw;
    }
    .coding-work .coding-wrap .left-box .mockup .img-wrap {
        width: 30vw;
        height: 21.5vw;
    }
    .coding-work .coding-wrap .right-box .info p {
        font-size: 1.4vw;
        margin-bottom: 1vw;
        color: #7e7874;
        font-family: 'GmarketsansMedium';
    }
    .coding-work .coding-wrap .right-box .btn p {
        font-size: 1.7vw;
        border-bottom: 1px solid #3f3b36;
    }
    .coding-work .coding-wrap {
        border-bottom: 1px solid #3f3b36;
    }
    
}


/* ========== design-work 반응형 =========== */
@media screen and (max-width:640px) {
    /* design-work 반응형 */
@media screen and (max-width: 1240px) {
    /* .content .work-wrap {
        width: 96%;
        grid-template-columns: repeat(2,1fr);     
    } */
    /* modal */
    .window-content {
        width: 90%;
    }
    .window-content-close {
        right: 8%;
        font-size: 4.5vw;
    }
}
@media screen and (max-width: 640px) {
    .content .work-wrap {
        grid-template-columns: repeat(auto-fill,99%);
        
    }
      /* modal */
      .window-content {
        width: 100%;
    }
    .window-content-close {
        right: 20px;
        font-size: 7.5vw;
    }
    .content .work-content {
        padding: 3vw;
        border-radius: 6px;
        border: 2px solid #20539e;
        margin-bottom: 1.5vw;
    }
    .design-work .container ul li:hover {
        background-size: auto;
        background-color: #20539e;
        color: #1e1b1a;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), calc(100% - 70px) 100%, 0 100%);
    }
    .content .work-content .work-desc p {
        font-size: 2vw;
    }
    .content .work-content .work-desc h4 {
        font-size: 3vw;
    }  
    .content .work-content .work-desc:first-child {
        /* font-size: 1.1em; */
    }
    
}
}
/* breake point 480px */
@media screen and (max-width:480px) {
    .content .work-content .work-desc h4 {
        font-size: 3.2vw;
    }
    .content .work-content .work-desc p {
        font-size: 2.5vw;
    }
}
/* breake point 390px */
@media screen and (max-width:480px) {
    .content .work-content .work-desc p {
        font-size: 2.8vw;
    }
}

/* ============= footer 반응형 ============= */
/* breake point 1024px */
@media screen and (max-width:1024px) {
    .footer .container .contact >p {
        font-size: 2vw; 
    }      
    .footer .container .contact .contact-txt p {
        font-size: 1.35vw;
    }
    .footer .container .end {
        font-size: 1.8vw;
}
}
/* breake point 768px */
@media screen and (max-width:768px) {
    .footer .container .contact >p {
        font-size: 2.4vw; 
    }      
    .footer .container .contact .contact-txt p {
        font-size: 1.6vw;
    }
    .footer .container .end {
        font-size: 2vw;
    }
    .footer .container .touch .email {
        border: 1px solid #918f87;
        border-radius: 1vw;
        /* width: 20vw;
        height: 3.8vw;
        margin-bottom: 3.5vw; */
    }
}
/* breake point 640px */
@media screen and (max-width:640px) {
    .content .work-wrap {
        max-width: 90%;
    }
    .footer .container .touch {
        gap: 6vw;
    }   
    .footer .container .contact >p {
        font-size: 2.6vw; 
    }      
    .footer .container .contact .contact-txt p {
        font-size: 2.2vw;
    }
    .footer .container .end {
        font-size: 2.2vw;
    }
    .content .work-content:hover {
        background-size: 7vw;
        background-color: #20539e;
        color: #1e1b1a;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7.3vw), calc(100% - 7.3vw) 100%, 0 100%);
    }
}
@media screen and (max-width:480px) {
    .footer .container .touch {
        gap: 5vw;
    }  
    .footer .container .touch .email {
        border: 1px solid #918f87;
        border-radius: 1vw;
        width: 26vw;
        height: 5.5vw;
        margin-bottom: 3.5vw;
    }
    .footer .container .touch .email a {
        font-size: 2vw;
        line-height: 5.5vw;
    }
}
@media screen and (max-width: 330px) {
    .footer .container .text-shadow {
        top: 12.3vw;
        /* position: absolute;
        left: 0%;
        width: 35vw; */
}
}