*{
    transition: 0.3s;
}
#contact{
    color:#09A84E;
}
/* contact-us */
.contact-us {
    background-color: #124B8D;
    height: 220px;
    width: 100%; 
    
} 
.contact-us .us-text {
    position: absolute;
    margin-top: 5%;
    left: 25%;
    color: white;
    font-weight: 900;
    font-size: 60px;
    transform: translate(-50%, -50%);
} 
.contact-us .img {
    width: auto; 
    background-size: cover ;
    height: 220px;
    opacity: 20%;
}


/* contact*/
.contact {
    margin-top: 80px;
    width: auto;
} 
.contact .contact-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 1304px;
} 
.contact .contact-detail {
    background-color: #F7F9FB;
    width: 478px;
    height: 558px;
    padding: 30px;
} 
.contact-detail .detail-header {
    font-size: 40px;
    font-weight: 700;
} 
.contact-detail .detail-data {
    margin-top: 40px;
} 
.contact-detail .detail-data .email {
    margin: auto;
    margin-top: 30px;
    font-size: 20px;
    display: flex;
} 
.detail-data .email .mail {
    margin-left: 40px;
} 
.contact-detail .detail-social {
    margin-top: 120px;
    font-size: 26px;
    display: flex;
    align-items: center;
} 
.detail-social .social-name {
    display: flex;
} 
.contact .contact-send {
    height: 558px;
    width: 800px;
} 
.contact-send .send-title {
    width: auto;
    font-size: 40px;
    font-weight: 700;
    margin-top: 20px;
} 
.contact-send .send-name,
.contact-send .send-email {
    width: auto;
    margin: auto;
    margin-top: 20px;
} 
.contact-send .send-name input,
.contact-send .send-email input {
    padding: 10px;
    padding-left: 30px;
    width: 49.7%;
    border: 1px solid black;
} 
.contact-send .send-text textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid black;
    padding-left: 30px;
} 
.contact-send .send-button {
    width: auto;
    margin: auto
} 
.contact-send .send-button input {
    background-color: #124B8D;
    color: white;
    width: 100%;
    height: 85px;
    margin-top: 33px;
    font-size: 36px;
    font-weight: 900;
}

/* mape */
.mape {
    margin: auto;
    margin-top: 80px;
} 
.mape .mape-location {
    width: 1304px;
    height: 666px;
    background-color: black;
    margin: auto;
}

@media only screen and (max-width: 1600px) {
    /* contact-us */
    .contact-us {
        height: 200px;
    }
    .contact-us .us-text {
        margin-top: 7%;
        font-size: 46px;
    }
    .contact-us .img{
        height: 200px;
    }

    /* contact*/
    .contact .contact-text {
        width: 1100px;
    }
    .contact .contact-detail {
        width: 400px;
        height: 450px;
    }
    .contact-detail .detail-header {
        font-size: 34px;
        font-weight: 700;
    }
    .contact-detail .detail-data .email {
        margin-top: 30px;
        font-size: 16px;
    }
    .contact-detail .detail-social {
        margin-top: 40px;
        font-size: 24px;
    }
    .contact .contact-send {
        padding-top: 30px;
        height: 450px;
        width: 690px;
    }
    .contact-send .send-title {
        font-size: 36px;
        margin-top: 0px;
    }
    .contact-send .send-name,
    .contact-send .send-email {
        margin-top: 10px;
    }
    .contact-send .send-name input,
    .contact-send .send-email input {
        padding: 10px;
        padding-left: 30px;
        width: 49.5%;
    }
    .contact-send .send-text textarea {
        min-width: 99.5%;
        max-width: 99.5%;
        min-height: 160px;
        max-height: 160px;
        margin-top: 20px;
    }
    .contact-send .send-button input {
        width: 99.5%;
        height: 50px;
        margin-top: 10px;
        font-size: 24px;
    }

    /* mape */
    .mape .mape-location {
        width: 1100px;
        height: 600px;
    }
} 
@media only screen and (max-width: 1100px) {
    /* contact-us */
    .contact-us {
        height: 130px;
    }
    .contact-us .us-text{
        font-size: 40px;
    }
    .contact-us .img {
        height: 130px;
    }

    /* contact*/
    .contact {
        margin-top: 40px;
    } 
    .contact .contact-text {
        display: block;
        width: 750px;
    }
    .contact .contact-detail {
        width: 700px;
        height: auto;
        margin: auto;
    }
    .contact-detail .detail-header {
        font-size: 40px;
    }
    .contact-detail .detail-data .email {
        font-size: 24px;
    }
    .contact-detail .detail-social {
        font-size: 30px;
    }
    .contact .contact-send {
        height: auto;
        width: 700px;
        margin: auto;
    }
    .contact-send .send-title {
        font-size: 40px;
    }

    /* mape */
    .mape .mape-location {
        width: 700px;
        height: 600px;
    }
} 
@media only screen and (max-width: 600px) {
    /* contact-us */
    .contact-us {
        height: 100px;
        margin-top: 5px;
    }
    .contact-us .us-text {
        margin-top: 13%;
        font-size: 30px;
    }
    .contact-us .img {
        height: 100px;
    }


    /* contact*/
    .contact {
        margin: auto;
        margin-top: 40px;
        width: 90%; 
    }
    .contact .contact-text {
        margin: auto;
        width: 99%;
    }
    .contact .contact-detail {
        width: 99%;
        padding: 10px;
    }
    .contact-detail .detail-header {
        font-size: 24px;
        text-align: center;
    }
    .contact-detail .detail-data .email {
        font-size: 16px;
        justify-content: space-between;
        width: 99%;

    }
    .contact-detail .detail-social {
        margin-top:40px;
        font-size: 16px;
    }
    .contact .contact-send {
        width: 99%;
    }
    .contact-send .send-title {
        font-size: 24px;
        margin-top: 0px;
        text-align: center;
    }
    .contact-send .send-name input,
    .contact-send .send-email input {
        padding: 10px;
        width: 49%;
    }
    .contact-send .send-text textarea {
        min-width: 99.3%;
        max-width: 99.3%;
        min-height: 100px;
        max-height: 100px;
        margin-top: 10px;
        padding-left: 10px;
    }
    .contact-send .send-button input {
        width: 99%;
        height: 35px;
        margin-top: 7px;
        font-size: 16px;
    }

    /* mape */
    .mape {
        margin-top: 40px;
    }
    .mape .mape-location {
        width: 90%;
        height: 250px;
    }
}