@charset "utf-8";
/* 공통 */
.sub-pd { padding: 100px 0;}
.sub-pd.first { padding-bottom: 100px; padding-top: 0; }
.sub-pd.last { padding-top: 100px; padding-bottom: 0; }
.sub-pd.bg { background: #f8f8f8; }

/* Vision & Philosophy */
.vs-top { display: flex; align-items: flex-start; justify-content: center; text-align: center; gap: 24px; margin-bottom: 60px; }
.vs-top .cen p { color: #242424; }
.vs-top .cen h4 { color: #242424; font-size: var(--font-size24); line-height: 1.2em; font-weight: 400; margin: 15px 0 20px; }
.vs-top .cen h4 strong { color: var(--color-primary); font-weight: 700; text-transform: uppercase;}
.vs-top .cen .gray-txt { color: #b1b1b1; font-size: 14px; font-weight: 300; }
.vs-wrap { display: flex; flex-wrap: wrap; gap: 30px; }
.vs-wrap .col { width: calc(100%/2 - 15px); padding: 30px 40px; border: 1px solid #ddd; border-radius: 16px; }
.vs-wrap .col .tit { font-size: var(--font-size20); line-height: 1.5em; color: #242424; font-weight: 700; margin: 30px 0 16px;}
.vs-wrap .col .txt { line-height: 1.5em; }

/* History */
.hst { position: relative;}
.hst::before { content: ""; position: absolute; left: 194px; top: 10px; width: 1px; height: 95%; background: #ddd; }
.hst .group { display: flex; margin-bottom: 30px; align-items: flex-start;}
.hst .year { width: 195px; position: relative; font-size: var(--font-size32); font-weight: 700; line-height: 1.2em; color: var(--color-primary); }
.hst .year::after { content: ""; position: absolute; right: -8px; width: 17px; height: 17px; top: 8px; background: url(../images/sub/hst-dots.png) center no-repeat; background-size: contain;}
.hst .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 115px; padding-top: 3px; }
.hst .info ul li { display: flex; margin-bottom: 30px; }
.hst .info ul li:last-child { margin-bottom: 0; }
.hst .info ul li .month { width: 55px; font-size: var(--font-size20); font-weight: 600; line-height: 1.5em; color: #242424; }
.hst .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-top: 4px; }
.hst .info ul li .txt p { position: relative; padding-left: 11px; line-height: 1.5em; margin-bottom: 30px; }
.hst .info ul li .txt p:last-child { margin-bottom: 0; }
.hst .info ul li .txt p:before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; background: var(--color-primary); border-radius: 3px; }
.organ { text-align: center; }

/* sub2 공통 */
.sub2-tit { position: relative; letter-spacing: 0; padding-left: 13px; font-size: var(--font-size22); font-weight: 600; line-height: 1.27em; margin-bottom: 30px; }
.sub2-tit::before { content: ""; position: absolute; left: 0; width: 3px; height: 24px; background: var(--color-primary); top: 1px; }
.sub2-fx { display: flex; gap: 30px; }
.sub2-fx>div { flex: 1;}
.sub2-fx.flex>div { flex: none;}
.sub2-fx.flex .left { width: calc(33% - 15px);}
.sub2-fx.flex .right { width: calc(67% - 15px);}
.sub2-fx.flex.rv { flex-direction: row-reverse;}
.sub2-fx.flex .left.wt { width: calc(34.6% - 15px);}
.sub2-fx.flex .right.wt { width: calc(65.4% - 15px);}
.sub2-fx.flex.mg { margin-bottom: 30px; }
.sub2-col { border-radius: 16px; overflow: hidden; }
.sub2-col.mg { margin-bottom: 30px; }
.sub2-col ul { background: #fff; padding: 20px; border-radius: 0 0 16px 16px; border: 1px solid #ddd; border-top: none; }
.sub2-col ul li { display: flex; line-height: 1.5em; margin-bottom: 4px; }
.sub2-col ul li:last-child { margin-bottom: 0; }
.sub2-col ul li .tt { width: 80px; font-weight: 700; color: var(--color-primary);}
.sub2-col ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.sub2-img { text-align: center; border-radius: 16px; overflow: hidden; position: relative; }
.sub2-img.mg { margin-bottom: 30px; }
.sub2-img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #ddd;}

/* Mechanical Systems */
.mc-txtbox { background: rgba(6, 83, 104, 0.03); border-left: 3px solid var(--color-primary); border-radius: 16px; padding: 20px 30px; margin-bottom: 60px;  } 
.mc-txtbox p { font-size: var(--font-size18); line-height: 1.444em; font-weight: 400; color: #242424; padding-left: 12px; position: relative; margin-bottom: 10px; }
.mc-txtbox p:last-child { margin-bottom: 0; }
.mc-txtbox p::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; background: var(--color-primary); border-radius: 3px; }
.mc-tit { font-size: var(--font-size20); line-height: 1.5em; font-weight: 600; color: var(--color-primary); padding: 10px; background: #eaeaea; border-radius: 16px; text-align: center; margin-bottom: 30px; }
.mc-tit.af { background: var(--color-primary); color: #fff; }

/* Directions */
.sub4-img { margin-bottom: 60px; }
.sub4-fx { display: flex; }
.sub4-fx>div { width: calc(100%/2);}
.sub4-fx .map { border-radius: 16px; overflow: hidden; height: 345px; }
.sub4-fx .map iframe { width: 100%; height: 345px; }
.sub4-fx .info { padding-left: 60px; }
.sub4-fx .info .col { display: flex; margin-bottom: 40px; align-items: center;}
.sub4-fx .info .col:last-child { margin-bottom: 0; }
.sub4-fx .info .col .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 20px; }
.sub4-fx .info .col h4 { line-height: 1em; font-size: var(--font-size24); color: #242424; font-weight: 600; margin-bottom: 16px;}
.sub4-fx .info .col p { line-height: 1.333em; font-size: var(--font-size18);}
.sub4-fx.rv { flex-direction: row-reverse;}
.sub4-fx.rv .info { padding-left: 0; padding-right: 60px; }

/* Project View - 상세 정보 (etc-1, etc-2, etc-3) */
.etc-info-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.etc-info-wrap > div { display: flex; flex-direction: column; gap: 6px; background: #f4f8fa; border-top: 3px solid var(--color-primary); border-radius: 10px; padding: 16px 20px; flex: 1 1 auto; min-width: 160px; }
.etc-info-wrap > div h3 { font-size: 12px; font-weight: 600; color: var(--color-primary); line-height: 1em; }
.etc-info-wrap > div p { font-size: 15px; color: #242424; line-height: 1.5em; }