@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css');

/* 내용관리 */
#ctt { background:#fff; }
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con { }
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.inner {  width:100%; max-width:1230px; line-height:1; margin:0 auto; padding:clamp(70px, 10vw, 130px) 15px; text-align:center; }
.full { width:100%; line-height:1; margin:0 auto; padding:0; text-align:center; }

.title_wrap { display:flex; flex-flow:column; text-align:left; }
.title_wrap .bold_title { line-height:1.5; font-size:clamp(18px, 2.4vw, 30px); font-weight:600; letter-spacing:-0.02em; word-break:keep-all; }
.title_wrap .title2 { width:fit-content; line-height:1.5; margin-bottom:10px; font-size:clamp(16px, 1.8vw, 20px); font-weight:600; word-break:keep-all; position:relative; }
.title_wrap .title2::after { content:''; display:flex; width:clamp(6px, 1vw, 8px); aspect-ratio:1/1; border-radius:50%; background:#f59023; position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); }

.text_wrap { display:flex; flex-flow:column; text-align:left; }
.text_wrap .tit { line-height:1.5; font-size:clamp(16px, 2vw, 24px); font-weight:600; letter-spacing:-0.02em; word-break:keep-all; }
.text_wrap .txt { line-height:1.7; margin-top:clamp(10px, 1vw, 15px); font-size:clamp(14px, 1.7vw, 20px); font-weight:400; color:#000; letter-spacing:-0.02em; word-break:keep-all; }
.text_wrap .txt .bold { font-weight:600; color:#333; }

.section1 .inner { padding-top:clamp(40px, 10vw, 60px); }
.history_section { background:#fff; position:relative; overflow:hidden; }
.history_section .history_wrap { display:flex; flex-flow:column; margin-top:clamp(30px, 5vw, 70px); position:relative; }
.history_section .history_wrap .history_era { display:flex; flex-flow:column; }
.history_section .history_wrap .history_era .era_name {
	display:flex; flex-flow:column; justify-content:center; width:100%; aspect-ratio:10/2; margin:clamp(15px, 2vw, 30px) 0; padding:clamp(20px, 3vw, 40px) 0; padding-left:clamp(20px, 15vw, 200px); border-radius:clamp(10px, 1vw, 15px);
	text-align:left; text-shadow:0 0 8px rgba(0,0,0,0.8); position:relative; overflow:hidden;
}
.history_section .history_wrap .history_era .era_name::before { content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; }
.history_section .history_wrap .history_era:first-of-type .era_name { background:url('./img/img1.jpg') no-repeat center 15% / 120%; margin-top:0; }
.history_section .history_wrap .history_era:nth-of-type(2) .era_name { background:url('./img/img2.jpg') no-repeat 80% 80% / 120%; }
.history_section .history_wrap .history_era:nth-of-type(3) .era_name { background:url('./img/img3.jpg') no-repeat center 2% / 110%; }
.history_section .history_wrap .history_era:nth-of-type(4) .era_name { background:url('./img/img4.jpg') no-repeat center center / 150%; }
.history_section .history_wrap .history_era .era_name .text1 { line-height:1.5; font-size:clamp(16px, 2.3vw, 30px); font-weight:600; letter-spacing:-0.02em; color:#fff; z-index:1; }
.history_section .history_wrap .history_era .era_name .text2 { line-height:1.5; font-size:clamp(12px, 1.8vw, 24px); font-weight:500; letter-spacing:-0.02em; color:#fff; z-index:1; }

.history_section .history_wrap .history_era .era_wrap { display:flex; flex-flow:column; width:100%; position:relative; }
.history_section .history_wrap .history_era .era_wrap::before { content:''; width:1px; height:100%; border-left:1px solid #ccc; position:absolute; left:20%; }
.history_section .history_wrap .history_era .era_wrap .era_box { display:flex; align-items:flex-start; width:100%; line-height:1.3; margin:clamp(10px, 2vw, 20px) 0; padding-left:calc(20% - clamp(-40px, -2vw, -20px)); text-align:left; position:relative; }
.history_section .history_wrap .history_era .era_wrap .era_box .year { width:fit-content; line-height:1; margin-right:3%; font-size:clamp(16px, 2.4vw, 24px); font-weight:bold; position:relative; }
.history_section .history_wrap .history_era .era_wrap .era_box .year::before { content:''; display:flex; width:15px; height:15px; border:4px solid #000; border-radius:50%; background:#fff; position:absolute; left:clamp(-40px, -2vw, -20px); top:50%; transform:translate(-50%, -50%); }
.history_section .history_wrap .history_era .era_wrap .era_box .year::after { content:''; display:flex; width:clamp(15px, 2vw, 30px); border-top:1px dashed #999; position:absolute; top:50%; left:clamp(-40px, -2vw, -20px); z-index:-1; }
.history_section .history_wrap .history_era .era_wrap .era_box .career { width:100%; }
.history_section .history_wrap .history_era .era_wrap .era_box .career li { display:flex; margin-bottom:12px; font-size:clamp(10px, 1.8vw, 18px); color:#000; letter-spacing:-0.02em; word-break:keep-all; }
.history_section .history_wrap .history_era .era_wrap .era_box .career li .month { display:inline-flex; margin-right:2%; font-weight:600; color:#777; }
.history_section .history_wrap .history_era .era_wrap .era_box .career li span { font-size:0.9em; color:#003892; }




/* 반응형 */
@media (max-width: 1450px){
	
}

@media (max-width: 1250px){

}

@media (max-width: 1200px){
	.inner { width:90% !important; }
}

@media (max-width: 980px){

}

@media (max-width: 760px){

}

@media (max-width: 540px){

	.history_section .history_wrap .history_era .era_name { padding-left:20px; }
	.history_section .history_wrap .history_era .era_wrap::before { left:5%; }
	.history_section .history_wrap .history_era .era_wrap .era_box { padding-left:calc(5% - clamp(-40px, -2vw, -20px)); }

}