@import url('sub.css');

/**** S:: 연구소 소개 & 핵심기술 ****/

/* fsE25 - 영문 25px (root.css에 없음) */
.fsE25 { font-family: var(--eng); font-size: 1.389rem; line-height: 1.45; font-weight: 700; letter-spacing: var(--letter-spacing-relaxed); text-transform: uppercase; }

.tech_intro_inner { display: flex; align-items: center; justify-content: center; gap: 0; }
.tech_intro_sec { flex-shrink: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.tech_intro_sec_01 { width: 375px; }
.tech_intro_sec_02 { width: 705px; }
.tech_intro_sec_03 { width: 375px; }
.tech_intro_line { flex-shrink: 0; width: 88px; padding-top: 90px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.tech_intro_line img { width: 88px; height: 337px; object-fit: contain; display: block; }

/* 타이틀 */
.tech_intro_tit { padding-bottom: 10px; margin-bottom: 10px; text-align: center; }
.tech_intro_tit .fsE25 { display: block;  }
.tech_intro_tit h2 { color: var(--black); }
.tech_intro_sec_01 .tech_intro_tit .fsE25,
.tech_intro_sec_03 .tech_intro_tit .fsE25 { color: var(--black); }
.tech_intro_tit_main .fsE25,
.tech_intro_tit_main h2 { color: var(--main); }
.tech_intro_tit_main { background: transparent; }

/* 카드 리스트 */
.tech_intro_cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tech_intro_cards li { padding: 25px 10px; border-radius: 10px; border: 1px solid var(--basic); background: var(--white); box-sizing: border-box; }
.tech_intro_sec_02 .tech_intro_cards li { border-color: var(--main); background: var(--white); }
.tech_intro_cards li .fs18_lbl { color: var(--black); text-transform: uppercase; }
.tech_intro_cards li .fs16 { color: var(--basic); margin-bottom: 4px; line-height: 1.6; }
.tech_intro_cards li .fs16:last-child { margin-bottom: 0; }

    /* sec_01, sec_03 */
    .tech_intro_sec_01 .tech_intro_cards li,
    .tech_intro_sec_03 .tech_intro_cards li { text-align: center; height: 150px; display: flex; flex-direction: column; justify-content: center; }

    /* sec_02  */
    .tech_intro_sec_02 .tech_intro_cards { padding: 20px; background: rgba(197, 1, 61, 0.1); border-radius: 10px; }
    .tech_intro_sec_02 .tech_intro_cards li { text-align: center; }
    .tech_intro_sec_02 .tech_intro_cards li .fs18_lbl,
    .tech_intro_sec_02 .tech_intro_cards li .fs16 { color: var(--main); }
    .tech_intro_sec_02 .tech_intro_card_icon { margin-left: auto; margin-right: auto; }
    .tech_intro_cards_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .tech_intro_card_icon { width: 60px; height: 60px; margin-bottom: 15px; }
    .tech_intro_card_icon img { width: 100%; height: 100%; object-fit: contain; }

/**** E:: 연구소 소개 & 핵심기술 ****/



/* ============================================
   미디어 쿼리
   ============================================ */

/* 1744px 이하 - sec width %화 (비율: 375:705:375, line 88px×2) */
@media all and (max-width: 1744px) {

    .tech_intro_sec_01 { width: calc((100% - 120px) * 375 / 1455); }
    .tech_intro_sec_02 { width: calc((100% - 120px) * 705 / 1455); }
    .tech_intro_sec_03 { width: calc((100% - 120px) * 375 / 1455); }

    .tech_intro_line {width: 40px; overflow: hidden;}

}
@media all and (max-width: 1300px) {


.tech_intro_sec_01 .tech_intro_cards li, .tech_intro_sec_03 .tech_intro_cards li {height:175px;}
.tech_intro_sec_02 .tech_intro_cards li br {display:none;}
}
/* 980px 이하 - 모바일 레이아웃 */
@media all and (max-width: 980px) {

    .tech_intro_inner { flex-direction: column; align-items: stretch; gap: 0; }
    .tech_intro_sec { width: 100% !important; }
    .tech_intro_sec_01,
    .tech_intro_sec_02,
    .tech_intro_sec_03 { width: 100% !important; max-width: 630px; margin: 0 auto; box-sizing: border-box; }

    /* line - 가로형 337×88 (세로 이미지 90도 회전), width %로 max-width에 맞춰 스케일, 높이는 이미지에 맞춤 */
    .tech_intro_line { width: 337px; height: auto; aspect-ratio: 337 / 88; padding-top: 0; margin: 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 80%; }
    .tech_intro_line img { width: 26.11%; height: auto; aspect-ratio: 88 / 337; transform: rotate(90deg); object-fit: contain; }

    /* 타이틀 - 모바일 폰트 */
    .tech_intro_tit .fsE25 { font-size: 1rem; line-height: 1.25; }
    .tech_intro_tit h2 { font-size: 0.778rem; line-height: 1.57; }
    .tech_intro_tit { margin-bottom: 8px; }

    .tech_intro_cards li{padding: 10px 5px;}
    /* sec_01 - 카드 3열 가로 */
    .tech_intro_sec_01 .tech_intro_cards { flex-direction: row; gap: 5px; }
    .tech_intro_sec_01 .tech_intro_cards li { flex: 1; min-width: 0; height: auto; font-size: 0.778rem; }
    .tech_intro_sec_01 .tech_intro_cards li .fs18_lbl { font-size: 0.778rem; margin-bottom: 4px; }
    .tech_intro_sec_01 .tech_intro_cards li .fs16 { font-size: 0.778rem; }

    /* sec_02 - 패딩 10px, 카드 2×2 유지 */
    .tech_intro_sec_02 .tech_intro_cards { padding: 5px; }
    .tech_intro_sec_02 .tech_intro_cards li .fs18_lbl,
    .tech_intro_sec_02 .tech_intro_cards li .fs16 { font-size: 0.778rem; }
    .tech_intro_card_icon { width: 40px; height: 40px; margin-bottom: 10px; }

    /* sec_03 - 카드 위 타이틀 아래, 카드 3열 가로 */
    .tech_intro_sec_03 .tech_intro_cards { flex-direction: row; gap: 5px; }
    .tech_intro_sec_03 .tech_intro_cards li { flex: 1; min-width: 0; height: auto; font-size: 0.778rem; }
    .tech_intro_sec_03 .tech_intro_cards li .fs18_lbl { font-size: 0.778rem; margin-bottom: 4px; }
    .tech_intro_sec_03 .tech_intro_cards li .fs16 { font-size: 0.778rem; }

}