@charset "utf-8";

@font-face {
    font-family: 'SangSangShin';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/SangSangShin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

table.tb-style1{width: 100%; border-top: 2px solid #ed1c24;}
table.tb-style1 thead tr th{background-color: #f5f5f3; padding: 15px 20px; font-size: var(--fz16); font-weight: 700; color: #212121;}
table.tb-style1 thead tr th:not(:last-child){border-right: 1px solid #ddd;}
table.tb-style1 thead tr td{}
table.tb-style1 tbody tr th{background-color: #f5f5f3; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding:15px 20px; font-size: var(--fz16); font-weight: 500; color: #212121;}
table.tb-style1 tbody tr td{border-bottom: 1px solid #eee; padding:15px 20px; font-size: var(--fz16); word-break: keep-all;}
table.tb-style1 tbody tr td:not(:last-child){border-right: 1px solid #eee;}

@media all and (max-width:768px){
	table.tb-style1 tbody tr th{font-size: var(--fz15); padding:10px 15px;}
	table.tb-style1 tbody tr td{font-size: var(--fz15); padding:10px 15px;}
}

.s_txt{margin-bottom: 40px; text-align: center;}
.s_txt .tit{font-size: var(--fz36); color: #000; font-weight:500;  word-break: keep-all; font-family: 'LeferiPointBlack';}
.s_txt .tit span{color: #ed1c24; font-weight: 700; word-break: keep-all;}
.s_txt p{font-size: var(--fz17); color: #666;}
.s_txt img{max-width: 100%}

@media all and (max-width:976px){
	.s_txt{margin-bottom: 30px;}
	.s_txt .tit{font-size: var(--fz32);}
}

.s_tit{font-size: 2.4rem; color: #000; font-weight: 700; margin-top: 60px; margin-bottom: 25px;}
.s_tit::before{content: ''; width: 30px; height: 3px; background-color: #ed1c24; display: block; margin-bottom: 10px;}
.s_tit.center::before{margin: 0 auto 10px;}
.s_tit span{color: #ed1c24;}

@media all and (max-width:976px){
	.s_tit{font-size: 2.2rem; margin-top: 40px; margin-bottom: 20px;}
}

.box{margin: 80px 0;}

/* intro1 */
.intro1{}
.intro1 .inner{}
.intro1 .inner .intro1_top{text-align: center; margin-bottom: 75px;}
.intro1 .inner .intro1_top p{font-size: var(--fz24); color: #222222; font-weight: 300; margin-bottom: 30px; line-height: 1.8em;}
.intro1 .inner .intro1_top h3{font-family: 'LeferiPointBlack'; font-size: var(--fz36); color: #ed1c24;}
.intro1 .f-inner{display: flex;}
.intro1 .f-inner .img{width: 50%;}
.intro1 .f-inner .img img{max-width: 100%;}
.intro1 .f-inner .txt{width: 50%; margin-top: 105px;}
.intro1 .f-inner .txt h4{font-size: var(--fz18); color: #222222; margin-bottom: 45px; font-weight: 400; line-height: 2em;}
.intro1 .f-inner .txt p{font-size: var(--fz16); color: #686868; line-height: 2em;}
.intro1 .f-inner .txt p:not(:last-child){margin-bottom: 45px;}
.intro1 .f-inner .txt .name{font-size: var(--fz18); color: #222222; display: flex; align-items: center;}
.intro1 .f-inner .txt .name span{font-size: var(--fz56); color: #222; font-family: 'SangSangShin'; margin-left: 15px;}

@media all and (max-width:1600px){
	.intro1 .f-inner{align-items: center;}
	.intro1 .f-inner .txt{margin-top: 0; padding-left: 60px;}
	.intro1 .f-inner .txt h4{margin-bottom: 30px;}
	.intro1 .f-inner .txt p:not(:last-child){margin-bottom: 30px;}
	.intro1 .f-inner .txt p{word-break: keep-all;}
	.intro1 .f-inner .txt p br{display: none;}
}
@media all and (max-width:976px){
	.intro1 .inner .intro1_top p{font-size:var(--fz20); word-break: keep-all;}
	.intro1 .inner .intro1_top p br{display: none;}
	.intro1 .inner .intro1_top h3{font-size: var(--fz32); word-break: keep-all;}
	.intro1 .f-inner{flex-direction: column; align-items: flex-start;}
	.intro1 .f-inner .img{width: 100%;}
	.intro1 .f-inner .txt{width: 100%; padding-left: 0; width: 96%; margin: 60px auto 80px;}
	.intro1 .f-inner .txt h4{margin-bottom: 20px;}
	.intro1 .f-inner .txt p:not(:last-child){margin-bottom: 20px;}
}


/* intro2 */
.intro2{}
.intro2 .inner{}
.intro2 .inner .cont{display: flex; gap:0 20px;}
.intro2 .inner .cont .l_cont{width: 460px;}
.intro2 .inner .cont .l_cont .img{background: url(/images/sub/intro2_bg_240801.jpg) no-repeat top center / cover; width: 100%; height: 100%;}
.intro2 .inner .cont .r_cont{width: calc(100% - 460px - 20px);}
.intro2 .inner .cont .r_cont table{width: 100%;}

@media all and (max-width:976px){
	.intro2 .inner .cont .l_cont{width: 45vw;}
	.intro2 .inner .cont .r_cont{width: calc(100% - 45vw - 20px);}
}
@media all and (max-width:768px){
	.intro2 .inner .cont{flex-direction: column;}
	.intro2 .inner .cont .l_cont{width: 100%; height: 100vw; margin-bottom: 20px;}
	.intro2 .inner .cont .r_cont{width: 100%;}
}


/* intro3 */
.history_top{background: url(/images/sub/intro3_bg.jpg) no-repeat center center / cover; height: 400px; width: 100%;}
.history_top .txt{height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; word-break: keep-all; color: #fff; font-size: var(--fz28); padding: 50px; line-height: 1.6em; font-weight: 500;}
#history { overflow: hidden; position: relative; }
#history::before { content: ''; width:1px; height: 100%; background: #e5ebe5; position: absolute; left:50%; top:0; margin-left: -0.5px;}
#history li { overflow: hidden; position: relative; margin-top: 40px;}
#history li.absolute{position: absolute; overflow: visible; width: 100%;}
#history li .text { float: right; width: 50%; padding: 2% 0 1% 60px;}
#history li .text.left { float: left; text-align: right; padding: 2% 60px 2% 0;  position: absolute;}
#history li .text.left h4{text-align: center; color: #ed1c24; font-size: 4rem; font-weight: 700;}
#history li .text.left p{text-align: center; font-size: 1.8rem; font-weight: 300; line-height: 1.8em;}

#history li .text h4 { color: #000; font-size: 2.8rem;  position: relative; font-weight: 400; line-height: 1.0em; margin-bottom: 0.4em; letter-spacing: -0.05em;}
#history li .text h4.tit::before { content:''; width: 20px; height: 20px; display: block; position: absolute; left:-60px; top:50%; margin: -10px 0 0 -10px; border-radius: 100%; background: #000; border: 6px solid #eee; z-index:2;  }
#history li .text h4.tit::after { content:''; width: 50px; height: 1px; display: block; background: #237627; z-index:1; position: absolute; left:-60px; top:50%; margin-top: -0.5px;}
#history li .text dl {  font-size: 1.8rem; }
#history li .text dl + dl { margin-top: 0.25em; }
#history li .text dl dt { width:60px; display:inline-block; vertical-align:top; color:#212121; font-weight: 600; line-height: 1.5em; }
#history li .text dl dd {width:calc(100% - 60px); display:inline-block; vertical-align:top; line-height: 1.5em; }
#history li .text dl dd b{color: #333;}

@media all and (max-width:976px) {
	.history_top{height: auto;}
	.history_top .txt{padding: 90px 40px; font-size: var(--fz24);}
	.history_top .txt br{display: none;}
	#history li{margin-top: 10px;}
	#history li.absolute,
	#history li .text.left{display: block; position: static;}
	#history li{clear: both;}
	#history li .text { padding: 2% 0 2% 40px; }
	#history li:nth-child(even) .text { padding: 2% 40px 2% 0; }

	#history li .text h4::after { width: 30px; }
	#history li .text h4::before,
	#history li .text h4::after { left: -40px; }
	#history li:nth-child(even) .text h4::before,
	#history li:nth-child(even) .text h4::after { right: -40px; }

	#history::before { left: 8px; margin-left:0;}
	#history li .text { width: 100%; padding: 2% 0 2% 40px; }
	#history li:nth-child(even) .text { text-align: left; padding: 2% 0 2% 40px; }
	#history li .text h4{font-size: 2rem;}
	#history li .text.left h4 { text-align: left; padding-left: 30px; font-size: 2.4rem;}
	#history li .text dl dd{font-size: 1.6rem; width: 100%;}
	#history li .text h4::before { width: 16px; height: 16px; margin: -8px 0 0 0; border-width: 5px; }
	#history li:nth-child(even) .text h4::before { margin: -8px 0 0 0; }
	#history li:nth-child(even) .text h4::before,
	#history li:nth-child(even) .text h4::after { right: inherit; left: -40px; }
	#history li .text h4.tit::before{right: inherit; left: -40px; margin: -8px 0 0 0;}
	#history li .text h4.tit::after{width: 30px;  right: inherit; left: -40px; }
	#history li:nth-child(even) dt { float: left; }
}
@media all and (max-width:768px){
	.history_top .txt{padding: 60px 25px; font-size: var(--fz22);}
}


/* intro4 */
.intro4{}
.intro4 .list{display: flex; gap:0 30px;}
.intro4 .list li{width: 100%; border: 1px solid #eee; padding: 40px; background-color: #fff;}
.intro4 .list li .img{}
.intro4 .list li .img img{max-width: 100%;}
.intro4 .list li .txt{text-align: center; margin-top: 25px; display: flex; flex-direction: column;}
.intro4 .list li .txt h3{color: #212121; font-size: var(--fz24);}
.intro4 .list li .txt p{font-size: var(--fz18); color: #666; margin-top: 15px;word-break: keep-all; line-height: 1.6em;}
.intro4 .list li .txt a{margin-top: 35px;display: block;} 
.intro4 .list li .txt a img{filter: invert(1);}

@media all and (max-width:1280px){
	.intro4 .list{gap:0 20px;}
	.intro4 .list li{padding: 25px;}
}
@media all and (max-width:976px){
	.intro4 .list{gap:20px 20px; flex-wrap: wrap;}
	.intro4 .list li{width: calc(100% / 2 - 20px / 2); padding: 15px 15px 25px;}
	.intro4 .list li .txt{margin-top: 15px;}
	.intro4 .list li .txt a{margin-top: 20px;}
}
@media all and (max-width:640px){
	.intro4 .list li{width: 100%;}
	.intro4 .list li .img img{width: 100%;}
}


/* intro5 */
.intro5{}
.intro5 .root_daum_roughmap .wrap_controllers{display: none;}
.intro5 .map_list{display: flex; flex-wrap: wrap; gap:60px 50px;}
.intro5 .map_list li{width: calc(100% / 2 - 50px / 2);}
.intro5 .map_list li .info{border-left: 5px solid #ed1c24; padding: 20px 30px; margin-top: 20px; background-color: #f9f9f9;}
.intro5 .map_list li .info h3{color: #000; font-size: var(--fz24); margin-bottom: 15px;}
.intro5 .map_list li .info p{font-size: var(--fz16); line-height: 1.6em;}

@media all and (max-width:976px){
	.intro5 .wrap_map{height: 320px !important;}
}
@media all and (max-width:768px){
	.intro5 .map_list li{width: 100%;}
	.intro5 .wrap_map{height: 280px !important;}
	.intro5 .map_list li .info{padding: 15px 25px; margin-top: 15px;}
	.intro5 .map_list li .info h3{margin-bottom: 12px;}
}


/* skill2 */
.skill2{}
.skill2 .list{display: flex; flex-wrap: wrap; gap:60px 40px; margin-top: 60px;}
.skill2 .list li{width: calc(100% / 3 - 80px / 3);}
.skill2 .list li .txt{margin-bottom: 15px;}
.skill2 .list li .txt h3{color: #000; font-weight: 600; font-size: var(--fz20);}
.skill2 .list li .txt h3::before{content: '⊙'; color: #ed1c24; margin-right: 6px;}
.skill2 .list li .txt h3 span{font-weight: 300; color: #666; font-size: var(--fz16);}
.skill2 .list li .img{border: 10px solid #f3f3f3;}
.skill2 .list li .img img{width: 100%;}

@media all and (max-width:976px){
	.skill2 .list{gap:50px 30px;}
	.skill2 .list li{width: calc(100% / 2 - 30px / 2);}
}
@media all and (max-width:640px){
	.skill2 .list{gap:40px 20px;}
	.skill2 .list li{width: 100%;}
}


/* skill3 */
#certList { overflow: hidden; text-align: left; max-width: 1600px;  font-size:0; }
#certList li { display: inline-block; vertical-align: top; width: calc((100% - 120px) / 4); margin-left: 40px; margin-bottom: 40px;  }
#certList li:nth-child(4n+1) { margin-left:0; }
#certList li .img { border: 1px solid #dedede; padding: 10px; }
#certList li img { max-width: 100%; border: 1px solid #f2f2f2; }
#certList li p { margin-top: 1em; font-size: 1.6rem; font-weight: 600; color:#212121; text-align: center; word-break: keep-all;}


@media all and (max-width:1280px) {
  #certList li { width: calc((100% - 60px) / 4); margin-left: 20px; }
}

@media all and (max-width:976px) {
	#certList { text-align: left; }
  #certList li { width: calc((100% - 40px) / 3); text-align: center; }
  #certList li:nth-child(4n+1) { margin-left:20px; }
  #certList li:nth-child(3n+1) { margin-left:0; }
}

@media all and (max-width:640px) {
  #certList li { width: calc((100% - 20px) / 3); margin-left: 10px;  }
  #certList li:nth-child(4n+1) { margin-left:10px; }
  #certList li:nth-child(3n+1) { margin-left:0; }
}

@media all and (max-width:568px) {
  #certList li { width: calc(50% - 5px); margin-left: 10px !important; margin-bottom: 20px;  }
  #certList li:nth-child(odd) { margin-left: 0 !important; }
}