@charset "utf-8";

#pageCont{padding-bottom: 140px;}
@media all and (max-width:768px){
	#pageCont{padding-bottom: 20%;}
}

.s_tit{font-size: 2.8rem; color: #212121; font-weight: 500; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #dedede;}
.s_tit i{color:#002d65; font-size: 2rem; position: relative; top: -3px;}

@media all and (max-width:768px){
	.s_tit{font-size: 2.6rem;}
	.s_tit i {font-size: 1.9rem;}
}
@media all and (max-width:480px){
	.s_tit{font-size: 2.4rem; margin-bottom: 20px; padding-bottom: 10px;}
	.s_tit i {font-size: 1.8rem;}
}

.s_txt{font-size: 2.4rem; text-align: center; margin-bottom: 30px; color: #444;}
.s_txt span{color: #002d65; font-weight: 600;}

@media all and (max-width:768px){
	.s_txt{font-size: 2.2rem;}
}
@media all and (max-width:480px){
	.s_txt{font-size: 2rem;}
}
	

table.tb1{width: 100%; border-top: 3px solid #273d8f}
table.tb1 thead tr th{}
table.tb1 thead tr td{}
table.tb1 tbody tr th{background-color: #e5e7ea; padding: 1.25rem; font-weight: 500; color: #212121; font-size: 1.7rem; border-bottom: 1px solid #eee}
table.tb1 tbody tr td{ padding: 1.25rem 2rem; border-bottom: 1px solid #eee; font-weight: 300; color: #212121; line-height: 1.7em;}

@media all and (max-width:768px){
	table.tb1 tbody tr th{font-size: 1.6rem;}
	table.tb1 tbody tr td{padding: 1rem; font-size: 1.5rem;}
}

table.tb2{width: 100%; border-top: 3px solid #273d8f}
table.tb2 thead tr th{background-color: #273d8f; color: #fff; padding: 1.25rem; border-right: 1px solid #3f56af;}
table.tb2 thead tr td{}
table.tb2 tbody tr th{ padding: 1.25rem; font-weight: 500; color: #212121; font-size: 1.7rem; border-bottom: 1px solid #eee}
table.tb2 tbody tr td{text-align: center; padding: 1.25rem; border-bottom: 1px solid #eee; font-weight: 300; color: #212121; line-height: 1.7em; border-right: 1px solid #eee;}
table.tb2 tbody tr td img{display: block !important;}
table.tb2 tbody tr:nth-child(even) td{background-color: #f5f5f3;}
table.tb2 tbody tr td:last-child{border-right: 0;}
table.tb2 tbody tr td.bg{background-color: #c6d8d3; font-weight: 500;}
table.tb2 tbody tr td span{font-weight: 500; color: #273d8f;}

@media all and (max-width:768px){
	table.tb2 tbody tr th{font-size: 1.6rem;}
	table.tb2 tbody tr td{padding: 1rem; font-size: 1.5rem;}
}


/* intro1 */
.intro1{}
.intro1 .inner{}
.intro1 .inner .intro1_bg{background: url(/images/sub/intro1_bg.png) no-repeat center center / cover; padding: 70px;}
.intro1 .inner .intro1_bg .txt{font-size: 4.8rem; color: #fff; line-height: 1.1em; font-weight: 700;}
.intro1 .inner .text_box{max-width: 1200px; margin: 0 auto; margin-top: 80px; display: flex; justify-content: space-between;}
.intro1 .inner .text_box .left_box{width: 310px; color: #212121; display: flex; flex-direction: column; justify-content: space-between;}
.intro1 .inner .text_box .left_box .txt h3{font-size: 3.2rem; font-weight: 500;}
.intro1 .inner .text_box .left_box .txt p{font-size: 1.8rem; margin-top: 55px;}
.intro1 .inner .text_box .left_box .txt p span{font-weight: 700; font-size: 2rem;}
.intro1 .inner .text_box .left_box .img{}
.intro1 .inner .text_box .left_box .img img{}
.intro1 .inner .text_box .right_box{width: calc(100% - 310px); margin-left: 100px;}
.intro1 .inner .text_box .right_box p{font-size: 1.7rem; color: #555555; line-height: 1.8em; margin-bottom: 40px; font-weight: 300;}
.intro1 .inner .text_box .right_box p:last-child{margin-bottom: 0;}

@media all and (max-width:1024px){
	.intro1 .inner .intro1_bg{padding: 50px;}
	.intro1 .inner .intro1_bg .txt{font-size: 4.2rem;}
	.intro1 .inner .text_box{margin-top: 55px;}
	.intro1 .inner .text_box .right_box{margin-left: 50px;}
	.intro1 .inner .text_box .left_box .txt h3{font-size: 3rem;}
	.intro1 .inner .text_box .left_box .txt p{font-size: 1.7rem; margin-top: 35px;}
	.intro1 .inner .text_box .right_box p {font-size: 1.7rem; margin-bottom: 30px;}
	.intro1 .inner .text_box .right_box p br{ display: none;}
}
@media all and (max-width:768px){
	.intro1 .inner .intro1_bg{padding: 35px;}
	.intro1 .inner .intro1_bg .txt{font-size: 3.6rem;}
	.intro1 .inner .text_box{flex-direction: column;}
	.intro1 .inner .text_box .left_box{flex-direction: row; width: 100%;}
	.intro1 .inner .text_box .left_box .img img{max-width: 30vw;}
	.intro1 .inner .text_box .left_box .txt{display: flex; flex-direction: column; justify-content: space-between;}
	.intro1 .inner .text_box .left_box .txt h3{font-size: 2.8rem;}
	.intro1 .inner .text_box .left_box .txt p{font-size: 1.6rem;}
	.intro1 .inner .text_box .right_box{margin-left: 0; width: 100%; margin-top: 30px;}
	.intro1 .inner .text_box .right_box p{margin-bottom: 20px; font-size: 1.6rem;}
}
@media all and (max-width:480px){
	.intro1 .inner .intro1_bg{padding: 25px;}
	.intro1 .inner .intro1_bg .txt{font-size: 3.2rem;}
	.intro1 .inner .text_box .left_box .txt h3{font-size: 2.6rem;}
}


/* intro2 */
.intro2{}
.intro2 .s-inner{display: flex; justify-content: space-between; flex-direction: column;}
.intro2 .s-inner > div{width: 100%; position: relative;}
.intro2 .s-inner .img{}
.intro2 .s-inner .info{margin-bottom: 30px;}
.intro2 .s-inner .info .symbol{position: absolute; top: 50%; transform: translateY(-50%); left: -80px; width: 80px; height: 80px; background-color: #fff;display: flex; justify-content: center; align-items: center;border-right: 1px solid #dedede; display: none;}
.intro2 .s-inner .info h3{font-size: 2.8rem; color: #212121; margin-bottom: 20px;}
.intro2 .s-inner .info h3 span{font-weight: 600; font-size: 2rem; color: #ccc;}

@media all and (max-width:1024px){
	.intro2 .s-inner .info h3{font-size: 2.6rem;}
}
@media all and (max-width:768px){
	.intro2 .s-inner .info h3{font-size: 2.4rem; margin-bottom: 15px;}
	.intro2 .s-inner .info h3 span{font-size: 1.8rem;}
}
@media all and (max-width:480px){
	.intro2 .s-inner .info h3{font-size: 2.2rem;}
}


/* intro3 */
#certList { overflow: hidden; text-align: left; max-width: 1400px;  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.8rem; font-weight: 500; color:#444; text-align: center;}

.intro3 .info{border: 5px solid #eee; padding: 2rem; font-size: 1.4rem; font-weight: 300; text-align: center;}


@media all and (max-width:1024px) {
	#certList { text-align: left; }
	#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; }
	#certList li p{font-size: 1.7rem;}
}
@media all and (max-width:768px) {
	#certList li { width: calc(50% - 5px); margin-left: 10px !important; margin-bottom: 20px;  }
	#certList li:nth-child(odd) { margin-left: 0 !important; }
	.scroll{overflow-x: scroll;}
	.scroll table{width: 760px;}
}


/* intro4 */
#history_top { position: relative; width: 100%; overflow: hidden; background: #e4e5e5 url("/images/sub/history_top.png") no-repeat center; }
#history_top .txt { width: 50%; float: right; padding: 10% 0; color: #fff;}
#history_top .txt h3{font-size: 3rem;}
#history_top .txt p{font-size: 2rem;}
#history_top .txt p span{/* color: #58d78e; */ font-size: 2.4rem; font-weight: 600;}
#history_top .txt .s_stxt {margin-top: 2%; padding-right: 5%; word-break: keep-all;}

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

@media all and (max-width:768px) {
	#history_top { background-size: auto 100%; }
	#history_top .txt { padding-left:0; }
}

@media all and (max-width:480px) {
	#history_top { padding-bottom: 35vw; background-color: #fff; background-position: 30% bottom; background-size: auto 35vw; }
	#history_top .txt  { width: 100%; text-align: center; padding-bottom: 6%;}
	#history_top .txt h3{color: #273d8f;}
	#history_top .txt p{color: #666;}
	#history_top .txt p span{color: #333;}
}


#history { overflow: hidden; position: relative; }
#history::before { content: ''; width:1px; height: 100%; background: #e0ede6; position: absolute; left:50%; top:0; margin-left: -0.5px;}
#history li { overflow: hidden; position: relative; margin-top: 30px;}
#history li .txt { float: right; width: 50%; padding: 2% 0 2% 60px;}
#history li:nth-child(even) .txt { float: left; text-align: right; padding: 0% 60px 0% 0; }

#history li .txt h4 { color: #273d8f; font-size: 3.6rem; font-family: 'Montserrat'; position: relative; line-height: 1.0em; font-weight: 600; margin-bottom: 0.75em; letter-spacing: -0.05em; }
#history li .txt h4::before { content:''; width: 20px; height: 20px; display: block; position: absolute; left:-60px; top:50%; margin: -10px 0 0 -10px; border-radius: 100%; background: #273d8f; border: 6px solid #e5ecff; z-index:2;  }
#history li .txt h4::after { content:''; width: 50px; height: 1px; display: block; background: #e5ecff; z-index:1; position: absolute; left:-60px; top:50%; margin-top: -0.5px;}
#history li:nth-child(even) .txt h4::before,
#history li:nth-child(even) .txt h4::after { left: inherit; right: -60px; }
#history li:nth-child(even) .txt h4::before {margin: -10px -10px 0 0; }
#history li .txt dl { font-size: 1.8rem; }
#history li .txt dl dt { width:50px; display:inline-block; vertical-align:top; margin-bottom:15px; color:#212121; font-weight: 600; line-height: 1.5em; }
#history li .txt dl dd {width:calc(100% - 50px); display:inline-block; vertical-align:top; margin-bottom:15px; line-height: 1.5em; }

#history li:nth-child(even) dt { float: right; }

@media all and (max-width:768px) {
  #history li .txt { padding: 2% 0 2% 40px; }
  #history li:nth-child(even) .txt { padding: 2% 40px 2% 0; }

  #history li .txt h4::after { width: 30px; }
  #history li .txt h4::before,
  #history li .txt h4::after { left: -40px; }
  #history li:nth-child(even) .txt h4::before,
  #history li:nth-child(even) .txt h4::after { right: -40px; }
	#history li .txt dl dd,
	#history li .txt dl dt{margin-bottom: 12px;}
	#history li .txt h4{font-size: 3.2rem;}
	#history li .txt dl{font-size: 1.7rem;}
	
  #history::before { left: 8px; margin-left:0;}
  #history li .txt { width: 100%; padding: 2% 0 2% 30px; }
  #history li:nth-child(even) .txt { text-align: left; padding: 2% 0 2% 30px; }
  #history li .txt h4::before { width: 16px; height: 16px; margin: -8px 0 0 0; border-width: 5px; }
  #history li:nth-child(even) .txt h4::before { margin: -8px 0 0 0; }
  #history li:nth-child(even) .txt h4::before,
  #history li:nth-child(even) .txt h4::after { right: inherit; left: -30px; }
	#history li .txt h4::before, #history li .txt h4::after{left: -30px;}

	#history li:nth-child(even) dt { float: left; }
	#history li .txt dl dt{width: 40px;}
	#history li .txt dl dd{width: calc(100% - 40px); word-break: keep-all;}
}


/* intro5 */
.intro5{}
.intro5 img{cursor: pointer;}
.intro5 table{max-width: 480px; margin-left: auto; margin-right: auto;}
.intro5 table tbody tr:nth-child(even) td{background-color: #fff;}
.intro5 table tbody tr td.bg{background-color: #c6d8d3; font-weight: 500;}
.intro5 .info{display: none; border: 5px solid #eee; padding: 2rem; font-size: 1.4rem; font-weight: 300; text-align: center; margin-bottom: 30px;}

@media all and (max-width:1024px){
	.intro5 .info{display: block;}
}

/* intro6 */
.customerList { text-align: center; overflow: hidden; padding: 1px 0 0 1px; }
.customerList li { float: left; width: calc(100% / 5); border: 1px solid #e5e5e5; line-height: 140px; margin: -1px 0 0 -1px; }
.customerList li a { display: block; }
.customerList li a img{ display: inline-block; vertical-align: middle; max-width: 80%; transition: .2s ease-in-out;}
.customerList li:hover a img{filter: grayscale(0); opacity: 1;}


@media all and (max-width:1280px){
	.customerList li { width: calc(100% / 4); }
}

@media all and (max-width:976px){
	.customerList li { width: calc(100% / 3); }
	.customerList li a img { max-width: 70%; }
}

@media all and (max-width:640px){
	.customerList li { width: calc(100% / 2); }
}


/* intro7 */
.wrap_controllers{display: none;}
.sMap-info {width:80%; background:#002d65;position: relative; margin:-3vw auto 0; z-index:55; padding:3%;  color:#fff; overflow:hidden;}
.sMap-info p {float:left; width:50%;text-align: center; line-height: 2em;}
.sMap-info p.p1 {font-size:1.7rem;}
.sMap-info p.p2 {font-size:1.7rem;}

@media screen and (max-width:976px){
#sMap .root_daum_roughmap .wrap_map  { height: 60vw !important; }
.sMap-info {padding:5%;}
.sMap-info p {float:none; width:90%;margin: 0 auto;}
}


/* product */
.product1{}
.product1 > .s-inner .img{background-color: #f8f8f8;}
.product1 > .s-inner .img img{max-width: 100%; display: block !important;}
.product1 ul.car{display: flex; flex-wrap: wrap; height: 100%;}
.product1 ul.car li{width: 33.3333%; height: 100%; border: 1px solid #dedede; margin-left: -1px;margin-top: -1px; background-color: #fff;}
.product1 ul.car li h4{background-color: #bbb;}
.product1 ul.car li .img{margin: 0.5rem 0;}
.product1 ul.car li .img img{max-width: 100%;}
.product1 ul.car li h3{font-size: 1.7rem;}
.product1 ul.car li p{font-size: 1.6rem; font-weight: 300;padding-bottom: 1rem;}
.product1 .info{display: none; border: 5px solid #eee; padding: 2rem; font-size: 1.4rem; font-weight: 300; text-align: center; margin-bottom: 20px;}

@media all and (max-width:768px){
	.product1 .info{display:block}
}


.fancybox-content{padding: 0 !important;}
.fancybox-content img{width: 100%;}