/*
  Pretendard Font Weight Reference
  Thin: 100, ExtraLight: 200, Light: 300, Regular: 400,
  Medium: 500, SemiBold: 600, Bold: 700, ExtraBold: 800
*/

/* ===============================================
   Contact Page
   =============================================== */
   
.contact-section {
    padding: 12.8rem 2.0rem 25.6rem 2.0rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.contact-width {
    width: 65ch;
    display: flex;
    flex-direction: column;
    gap: 6.4rem;
}

.contact__group {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.contact__group-bottom {
    padding-bottom: 6.4rem;
    border-bottom: 0.1rem solid #EEEEEE;
}

.contact__title {
    padding: 0;
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 200%;
    color: var(--color-main);
}

.contact__list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.contact__item {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1.6rem;
}

.contact__icon {
    width: 2.0rem;
    height: 2.0rem;
    flex-shrink: 0;
}

.contact__text {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 200%;
}



/* ===============================================
   모바일 반응형
   1152px == 72em  ( (1152 / 16 = 72) )
   1024px == 64em  ( (1024 / 16 = 64) )
   >>> 768px == 48em  ( (768 / 16 = 48) )
   672px == 42em  ( (672 / 16 = 42) )
   >>> 390px == 25em  ( (390 / 16 = 24.375) )
   320px == 16em  ( (320 / 16 = 16) )
   =============================================== */

@media (max-width: 48em) {
    .contact-section {
        padding-top: 6.4rem;
    }

    .contact-width {
        width: 100%;
    }
}



@media (max-width: 25em) {
    .contact-section {
        padding: 3.2rem 1.6rem 12.8rem 1.6rem;
    }

    .contact-width {
        gap: 3.2rem;
    }

    .contact__group {
        gap: 1.6rem;
    }

    .contact__group-bottom {
        padding-bottom: 3.2rem;
    }

    .contact__title {
        font-size: 1.8rem;
        line-height: 160%;
    }

    .contact__list {
        gap: 1.6rem;
    }

    .contact__icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    .contact__text {
        font-size: 1.4rem;
    }
}