/* =============================
   about.css
   ============================= */

.page__layout--about { 
    margin-top: 6rem;
}

/* 인사말 */
.about__title { 
    font-size: 3.2rem;
    font-weight: 800;
}

.about__slogan { 
    display: block;
    margin-bottom: 2rem;
    font-size: 3.6rem;    
    font-weight: 700;
    line-height: 1.24;
}

.about__lead {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-primary);    
}

.about__sub-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.8rem;
}

.about__sub-title.border-t-2 { 
    padding-top: 1.8rem; 
}

.about__desc {
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--text-secondary);    
}

.greeting__slogan { 
    display: block;
    margin-bottom: 3.4rem;
    font-size: 6.4rem;    
    font-weight: 800;
    line-height: 1.13;
}

.about-content { 
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 3.2rem;
}

.greeting { 
    display: block;
}

.greeting__thumb { 
    aspect-ratio: 120 / 23;
    background: url(../../img/pages/about/company_photo.png) no-repeat center / cover;
}

.greeting__intro {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    gap: 60px;
    position: relative;
    margin-top: 7rem;
}

.greeting__intro-text {
    flex: 1;
}

.greeting__ceo-photo {  
    aspect-ratio: 265 / 391;  
    flex: 0 0 265px;    
    background-image: url(../../img/pages/about/ceo-photo.png);
    background-color:var(--background-dark);   
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 86%;     
    border-radius: 12px;
    overflow: hidden;    
}

.greeting__ceo-photo img {
    display: block;
    width: 100%;
}

.greeting__body, 
.about__body { 
    margin-top: 7rem;    
    border-top: 1px solid var(--stroke-separator);
}

.about__section { 
    margin-top: 4.6rem;
}

.greeting__footer {
    margin-top: 50px;
}

.greeting__signature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.greeting__ceo-info {
    display: flex;
    flex-direction: column;    
    align-items: flex-end;
    gap: 15px;
    font-size: 1.8rem;
    font-weight: 500;
    color: #111;
    line-height: 1;    
}

.greeting__ceo-name {    
    display: inline-block;
    width: 140px;
    height: 60px;
    background: url(../../img/pages/about/sign-vice-president.svg) no-repeat center / contain;    
}

/* 비전 */
.vition-image { 
    aspect-ratio: 908 / 247;
    margin: 5rem 0;    
    background: url(../../img/pages/about/about-vision.png) no-repeat center / contain;        
}


/* 매체소개 */
.media .about__body {     
    border: none;    
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);    
    grid-template-rows: repeat(6, 120px); 
    gap: 20px;    
}

.media-card:nth-child(1) { 
    grid-row: span 3; 
} 
.media-card:nth-child(4) { 
    grid-row: span 3; 
} 

.media-card:nth-child(2) { 
    grid-row: span 2; 
} 
.media-card:nth-child(3) { 
    grid-row: span 2; 
} 
.media-card:nth-child(5) { 
    grid-row: span 2; 
} 

.media-card {
    position: relative;    
    height: 100%; 
}

.media-card {
    position: relative;
    padding: 30px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    text-align: left;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.media-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.media-card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;    
    height: 100%;    
    z-index: 2;
}

.media-card__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    word-break: keep-all;
}

.media-card__desc {
    max-height: 0;            
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    word-break: keep-all;
    overflow: hidden;
    opacity: 0;
    transition: all 1s ease;
}

.media-card.is-active .media-card__desc {
    max-height: 200px; 
    margin-top: 15px;
    opacity: 1;    
}

.media-card__icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    z-index: 2;
}

.media-card__icon::before,
.media-card__icon::after {
    content: '';
    position: absolute;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

.media-card__icon::before { width: 14px; height: 2px; }
.media-card__icon::after { width: 2px; height: 14px; }

.media-card.is-active .media-card__icon::after {
    display: none;
}

/* 오시는 길 */

.badge {    
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 25px;
    margin: 0 8px 0 0;        
    font-size: 14px;
    font-weight: 500;    
    color: var(--text-inverted);
    border-radius: 4px;
    vertical-align: middle;
    white-space: nowrap;
}
.badge:nth-child(2) { 
    margin-left: -4px;
}

.bg-blue { background-color: #2888E9; }
.bg-skyblue { background-color: #63A5D2; }
.bg-red { background-color: #F84D46; }
.bg-green { background-color: #35C03D; }
.bg-lightgreen { background-color: #90C83D; }

.bd-red {  color:#C4001B; border: 1px solid #C4001B; }
.bd-orange { color:#FA5F2C; border: 1px solid #FA5F2C; }
.bd-green { color:#35C03D;  border: 1px solid #35C03D; }

.address .about__body {     
    border: none;    
}

.address__map { 
    height: 375px;
    margin-bottom: 3.4rem;     
    background-color: #E5E3DF;
    border-radius: 12px;     
    overflow: hidden;    
}

.address__map iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.address__item { 
    display: flex;
    gap: 1.6rem;    
}

.address__item + .address__item { 
    margin-top: 1.8rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--stroke-separator);
}

.address__body { 
    padding-top: .4rem;
}

.address__icon { 
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 4px;
}

.address__icon--location { 
    background-image: url(../../img/pages/about/ico-location-40.svg);
}
.address__icon--phone { 
    background-image: url(../../img/pages/about/ico-phone-40.svg);
}
.address__icon--subway { 
    background-image: url(../../img/pages/about/ico-subway-40.svg);
}
.address__icon--bus { 
    background-image: url(../../img/pages/about/ico-bus-40.svg);
}

.address__desc {         
    margin-top: 6px;
    font-size: 1.6rem;
}

.address__desc.d-flex { 
    gap: 24px
}

.address__desc-item { 
    display: block;
    margin-top: 0;
    font-size: 1.6rem;
}

.address__desc-item.divider-left::before { 
    left: -12px;
}

.address__body:not(:has(.address__desc.d-flex)) .address__desc-item + .address__desc-item { 
    margin-top: 24px;
}

.bus-num { 
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.bus-num__list { 
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}

.bus-num__list li {     
    color: var(--text-secondary);
}
@media (max-width: 1024px) { 
    .about-content { 
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 1.4rem;
    }
}

@media (max-width: 768px) {
    .page__layout--about { 
        margin-top: 3rem;
    }
    .greeting__body, .about__body { 
        margin-top: 3.6rem;
    }    
    .greeting__intro { 
        margin-top: 0;
    }
    .greeting__thumb {
        display: none;
    }    
    .greeting__ceo-photo { 
        position: absolute;
        top: 0;
        right: 0;                
        width: 280px;
        z-index: 1;        
    }
    .greeting__slogan {     
        position: relative;                
        aspect-ratio: 400 / 413;   
        width: 400px;
        padding: 4% 0 0 5%;        
        z-index: 2;       
    }
    .about__section { 
        margin-top: 2.4rem;
    }
    .about__slogan { 
        font-size: 3.2rem;
    }
    .about__title { 
        font-size: 2rem;
        font-weight: 700;
    }        
    .about__lead { 
        font-size: 2.2rem;
    }
    .about__sub-title { 
        font-size: 2rem;
        margin-bottom: 1.6rem;
    }
    .greeting__footer { margin-top: 2.4rem;}
    .greeting__ceo-info { 
        font-size: 1.6rem;        
    }    
    .greeting__ceo-name { 
        width: 130px;
        height: 56px;
    }
    .vition-image { 
        width: 100%;
        height: 480px;        
        margin: 3rem 0;
        background: url(../../img/pages/about/about-vision-mo.png) no-repeat center / contain;
    }
    .media-grid { 
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: unset;
        gap: 8px;
    }
    .media-card:nth-child(1), 
    .media-card:nth-child(2), 
    .media-card:nth-child(3), 
    .media-card:nth-child(4), 
    .media-card:nth-child(5) { 
        grid-row: unset;
    }    
    .media-card__title { 
        font-weight: 500;
    }
    .media-card__desc { 
        line-height: 1.5;
    }
    .media-card { 
        height: 140px;
        padding: 24px 20px;
        transition: all 0.5s ease;
    }
    .media-card.is-active { 
        height: 280px;
    }
    .address__map { 
        height: 280px;
        margin-bottom: 2.4rem;
    }
    .address__body { 
        padding-top: 0;
    }    
    .address__item { 
        gap: 1.4rem;
    }
    .address__desc { 
        margin-top: 3px;
    }
    .address__desc, 
    .address__desc-item {
        font-size: 1.5rem;        
    }
    .address__desc.d-flex {     
        flex-direction: column;    
        gap: 4px;
    }
    .address__desc-item.divider-left::before { 
        content: none;
    }
    .address__icon {
        width: 50px;
        height: 50px;
        background-size: 32px;
    }
    .bus-num {
        align-items: flex-start;
    }

}
@media (max-width: 570px) { 
     .greeting__ceo-photo {         
        width: 55%;
    }
    .greeting__slogan {     
        aspect-ratio: 265 / 391;        
        width: 55%;
        margin-bottom: 2.4rem;
        font-size: 4.2rem;        
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);    
    }
    
    
}