@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');



@media (max-width: 1340px) {
    #contact {
        padding-bottom: 10rem;
    }
    #contact .item {
        height: auto;
        padding-top: 5rem;
    }
    #contact .desc {
        padding-top: 15rem;
    }
    #contact .inn {
        padding-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #contact form .inn .info, 
    #contact form .inn .txt {
        width: 100%;
        height: auto;
    }
    
    #contact .form .inn .field,
    #contact .agree,
    #contact .check {
        width: calc(100% - 4rem);
        margin-left: 2rem;
        margin-right: 2rem;
    }
    #contact .form .inn {
        height: auto;
    }
}


@media (max-width: 1240px) {
    #contact .form {
        width: 100%;
        padding: 0 3rem;
    }
}

@media (max-width: 1024px) {
    #contact .desc {
        margin-bottom: 5rem;
    }
    #contact .desc p {
        font-size: 1.6rem;
    }
    #contact fieldset .info .field label {
        font-size: 1.4rem;
    }
}


@media (max-width: 770px) {
    header {
        height: 6rem;
    }
    header nav {
        padding: 0rem 2rem;
    }
    header .btn .box {
        width: 28px;
        height: 3px;
    }
    header .btn.on .box {
        height: 4px;
    }
    header .btn .box:nth-of-type(1) {transform: translateY(-10px);}
    header .btn .box:nth-of-type(2) {transform: translateY(-2px);}
    header .btn .box:nth-of-type(3) {transform: translateY(6px);}
    header nav h1 {
        width: 80px;
        height: 40px;
    }
    header nav .gnb ul {
        width: 100%;
        margin: 0 auto;
        align-items: center;
        padding-left: 0;
    }
    footer {
        padding: 0 10px;
    }
    footer p {
        flex-direction: column;
        line-height: 24px;
    }
    footer p span {
        display: none;
    }
    footer p br {
        display: block;
    }
}

@media (max-width: 640px) {
    header nav .gnb li a {
        width: 360px;
        height: 80px;
        margin: 0 auto;
        font-size: 40px;
        line-height: 80px;
        border-radius: 30px;
    }
    #contact .item {
        padding-top: 0rem;
    }
    #contact .icon {
        margin-top: 0.5rem;
    }
    #contact .desc .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #contact .desc p {
        font-size: 1.4rem;
        line-height: 3rem;
    }
    #contact .form .inn .field,
    #contact .agree,
    #contact .check {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #contact .inn .field {
        line-height: 3.8rem;
    }

    #contact .info .field  {
        padding: 0 0.5rem;
    }
    #contact .field label,
    #contact .category .title  {
        width: 100px;
    }
    #contact .category .title {
        line-height: 34px;
    }
    
    #contact .inn .category {
        padding: 0.5rem;
        height: auto;
    }
    #contact .field input,
    #contact .category .list {
        width: calc(100% - 100px);
    }
    #contact .category .list {
        align-items: center;
    }
    #contact .category .list .list_item {
        height: 24px;
    }
}

@media (max-width: 480px) {
    header nav .gnb li a {
        width: 300px;
    }
    #contact .desc .title h2 {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #contact .desc .title h2 img{
        width: 80%;
        margin: 0 auto;
        height: auto;
    }
}
 

@media (max-width: 430px) {
    #contact .field label, 
    #contact .category .title {
        width: 85px;
    }
    #contact .field input, 
    #contact .category .list {
        width: calc(100% - 85px);
    }
    #contact .category .title {
        line-height: 25px;
    }
    #contact .inn .field {
        font-size: 1.4rem;
        letter-spacing: -0.5px;
    }
    #contact .info .field select {
        width: 130px;
    }
    #contact .inn .category {
        padding: 0.8rem 0.5rem;
    }
    #contact .category .list {
        flex-direction: column;
        align-items: flex-start;
    }
    #contact .category .list .list_item {
        font-size: 1.4rem;
        letter-spacing: -1px;
        padding-right: 0px;
    }
}
@media (max-width: 360px) {
    #contact .desc {
        margin-bottom: 2rem;
    }
    #contact .desc .title h2 {
        font-size: 60px;
        line-height: 90px;
    }
}