@charset "utf-8";

/* 틈소 BX 포트폴리오
   - INFO(다크올리브) / Project Goal(크림) / Identity Design(세이지) 텍스트 코딩, 나머지 시안 이미지 */
:root {
  --primary: #3C4A2F;
}

/* INFO (다크 올리브) */
.bx_pf .sec_info.info { background: #3C4A2F; }
.bx_pf .sec_info.info .tit,
.bx_pf .sec_info.info .info,
.bx_pf .sec_info.info .info strong,
.bx_pf .sec_info.info .info span { color: #fff; }
.bx_pf .sec_info.info .info strong { opacity: .55; margin-right: 2px; }
.bx_pf .sec_info.info .cont { color: #DCE0CF; }

/* Concept 공통 (타이틀 좌 / 설명 우) */
.bx_pf .sec_info.concept .title_box.side {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; text-align: left;
}
.bx_pf .sec_info.concept .label {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: .04em; margin-bottom: 18px;
}
.bx_pf .sec_info.concept .tit { font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.bx_pf .sec_info.concept .text_box_inner { max-width: 640px; }
.bx_pf .sec_info.concept .text_box_inner p { font-size: 17px; line-height: 1.7; }
.bx_pf .sec_info.concept .text_box_inner strong { display:inline-block; margin-bottom: 12px; }

/* Project Goal (크림) */
.bx_pf .sec_info.concept.cream { background: #EDEBDA; }
.bx_pf .sec_info.concept.cream .label { color: #6B7355; }
.bx_pf .sec_info.concept.cream .tit { color: #2B3320; }
.bx_pf .sec_info.concept.cream .text_box_inner p { color: #5A5F4C; }
.bx_pf .sec_info.concept.cream .text_box_inner strong { color: #2B3320; }

/* Identity Design (세이지) */
.bx_pf .sec_info.concept.sage { background: #A4AD7D; }
.bx_pf .sec_info.concept.sage .label { color: #3C4A2F; }
.bx_pf .sec_info.concept.sage .tit { color: #fff; }
.bx_pf .sec_info.concept.sage .text_box_inner p { color: #F2F3E8; }
.bx_pf .sec_info.concept.sage .text_box_inner strong { color: #fff; }

@media all and (max-width: 1023px) {
  .bx_pf .sec_info .wrapper { align-items: flex-start; }
  .bx_pf .sec_info.info .title_box { text-align: left; align-items: flex-start; }
  .bx_pf .sec_info.info .info { align-items: flex-start; }
  .bx_pf .sec_info.concept .title_box.side { flex-direction: column; gap: 16px; text-align: left; align-items: flex-start; }
  .bx_pf .sec_info.concept .label { font-size: 14px; margin-bottom: 8px; }
  .bx_pf .sec_info.concept .tit { font-size: 30px; }
  .bx_pf .sec_info.concept .text_box_inner p { font-size: 15px; }
}