.sub_con {width:100%;  margin:0 auto;  font-size:16.5px;  font-weight:300; line-height:1.5; padding-bottom:100px }
.sub_con.about3 {padding-bottom:0}
.sub_con h3 {font-size:30px; margin-bottom:25px; letter-spacing:-1px;  }
.sub_con section + section {margin-top:100px; }

.sub_con section {positioN:relative; overflow:hidden; box-sizing:border-box}
.sub_con section img {max-width:100%}
hr.sub_hr {height:100px}
hr.sub_hr2 {height:60px; }

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

		.sub_con {  font-size:15px; }
		.sub_con h3 {font-size:1.6em;    }

}

h6.bg_h6 {background: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); color:#fff; padding:15px; box-sizing:border-box; line-height:1.2; width:100%;  display:flex; justify-content:center; align-items:center; position:absolute; left:0; bottom:0;}

span.tit_top_line {width:40px; margin-top:20px; margin-bottom:10px;  height:3px; background-color:var(--main_c); display:inline-block;}

.bg {background-color: var(--bg1);;  padding:80px 0;}


.sub_con .vi {position:relative; width:100%; height:500px;   display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.sub_con .vi h3 {font-weight:500; letter-spacing:.5px;  color:#fff; text-transform: uppercase; position:relative; z-index:9}
.sub_con .vi p {font-size:1.2em; font-weight:300; color:#fff;  position:relative; z-index:9}

.sub_con .vi .img {
  animation: zoomOut2 2s ease-out forwards;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  }

  @keyframes zoomOut2 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media all and (max-width:900px) {
 .sub_con .vi p {font-size:1em; }


}
aside {width:100%; background: rgba(255, 255, 255, 1);   position:relative; z-index:99; border-bottom:1px solid #ddd  }
aside ul {width:100%; display:flex; justify-content:center;  }
aside ul li { font-size:1.1em;  padding:17px 0;  margin:0 25px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
aside ul li:after { content:''; width:0; height:4px; background-color: var(--main_c); position:absolute; left:50%; bottom:0; transition: all 0.3s ease-out;}
aside ul li a {color:#555}
 
aside ul li:hover:after {width:100%; left:0 }
aside ul li:hover a {color:var(--main_c); font-weight:500 }
aside ul li.ov:after {width:100%; left:0 }
aside ul li.ov * {color:var(--main_c); font-weight:500}
aside + section {padding-top:100px !important}

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

	aside ul {overflow:auto; justify-content:flex-start }
	aside ul li { font-size:1em; white-space:nowrap;   padding:17px 0;  margin:0 10px;  }
	aside ul li:first-child {margin-left:20px}
	aside ul:after {content:'--------'; color:#fff;     }
 
}

ul.img_list {flex-wrap:wrap; gap:30px;  }
ul.img_list li {width:calc(25% - 23px); background-color:#fff; padding-bottom:15px; border:1px solid #ddd; box-sizing:border-box;  text-align:center}
ul.img_list li img { width:100%; box-sizing:border-box; margin-bottom:10px }

@media all and (max-width:900px) {
	 ul.img_list {gap:20px 0; justify-content:space-between }
	 ul.img_list li {width:48%;  }


}

.top_text {margin-bottom:50px}
.top_text span.line {width:40px;height:3px; margin-top:15px;   margin-bottom:10px;  background-color:red; display:inline-block}
.top_text h4 {font-size:25px; color:#000;  margin-bottom:10px}
.top_text p {font-size:1.2em; color:#111; font-weight:300; }

.right_img {width:28%; z-index:-9;  display:inline-block; position:absolute; right:-10px; top:-100px;}
.right_img svg {opacity:.1}

.about .top_text h4 {font-size:30px}
.about .top_text p {font-size:1.1em}


.about1 .ceo_img {width:500px; flex-shrink:0; }
.about1 .flex {gap:60px}
.about1 .text b.b1 {font-size:1.5em; font-weight:500}
.about1 .text b.b2  {font-size:2.2em; letter-spacing:-1.3px; font-weight:800}
.about1 .text b.b2 span {color:var(--main_c); font-weight:900}
.about1 .text p {font-size:1.03em; line-height:1.6}

@media all and (max-width:900px) {
	.about1 .ceo_img {width:100%; }
	.about1 .text b.b1 {font-size:1.3em;  }
	.about1 .text b.b2  {font-size:1.7em; }
	.about1 .text p {font-size:1em;  }

}

.history_img_bg {width:100%; height:400px; background:url('/general/img/history_img_bg.png') no-repeat center; background-color:#333; background-size:cover}
.history   {display:flex; flex-wrap:wrap; position:Relative;  width:80%; margin:0 auto; background-color:#fff; margin-top:-150px; box-sizing:border-box; padding:80px}
.history:after {content:''; position:absolute; left:222px; top:5px;   width:1px; height:100%;  background-color:var(--main_c); display:inline-block}
.history {display:flex; flex-wrap:wrap;  }
.history h4 {width:150px; color:var(--main_c);   line-height:.9; font-size:30px;  margin-bottom:50px; position:Relative }
.history h4:after {content:'';  border-radius:50%; position:Absolute; right:0; top:3px;   width:14px; height:14px;  background-color:var(--main_c);  box-sizing:border-box;  display:inline-block;  }
.history h4:before {content:'';  border-radius:50%; position:Absolute; right:-3px; top:0px; width:20px; height:20px; border:1px solid var(--main_c); box-sizing:border-box; display:inline-block}
.history ul {width:calc(100% - 150px); padding-left:60px; box-sizing:border-box; margin-bottom:50px}
.history ul:last-child {margin-bottom:0} 
.history ul li {margin-bottom:3px}

@media all and (max-width:900px) {
        .history { width:100%; margin-top:0;   padding:70px 0 30px 0}
		.history h4 {width:120px;   }
		.history:after {  left:111px; top:0}
		.history ul {width:calc(100% - 120px); padding-left:30px;  }


}

@keyframes blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1);
  }
}

.map div {text-align:center; border-right:1px solid #ddd;}
.map div:last-child {border-right:none}
.map h5  {display:flex; font-size:1.1em; font-weight:500;  align-items:center; gap:10px;  justify-content:center; margin-bottom:10px}
.map h5 span {width:50px; height:50px; border-radius:50%; background-color: var(--bg1);; display:flex; justify-content:center; align-items:center}

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

		.map div {text-align:left; border-right:none}
		.map h5  {justify-content:flex-start;  }
		.map div + div {margin-top:40px}
}

.business h4 {font-size:28px; letter-spacing:-1px; color:#000;  margin-bottom:15px}
.business h5 {font-size:23px; color:#222; margin-bottom:15px}
.business h6 {font-size:20px; color:var(--main_c);  margin-bottom:10px}

.business .top_text {margin-bottom:50px}
.business .top_text h3 {margin-bottom:15px}
.business .top_text h4 {margin-bottom:10px}
 
.business .top_text p {font-size:1.05em; line-height:1.6; margin-top:0}

.business .h4_tit_wrap {display:flex; align-items:flex-end; gap:20px; margin-bottom:40px}
.business .h4_tit_wrap h4 {font-size:35px; margin-bottom:0; line-height:1.3}

.business .last_text {font-size:1.25em; font-weight:600}

.business .service_icon_list li {justify-content:flex-start; padding:20px 15px; align-items:center; gap:20px}
.business .service_icon_list li div {text-align:left}
.business .service_icon_list.type2 li {padding:13px 20px; gap:10px; text-align:left}

  @media all and (max-width:900px) {
		.business .h4_tit_wrap {flex-wrap:wrap}
		.business .h4_tit_wrap h4 {width:100%}

		.business h4 {font-size:1.4em }
		.business h5 {font-size:1.3em }
		.business h6 {font-size:1.2em }
		.business .service_icon_list li {flex-direction:column; }
		.business .service_icon_list li div {text-align:center}
		.business .service_icon_list.type2 li {text-align:center}


}
.business h6.bg_h6 {color:#fff; font-weight:500;  margin-bottom:0}

.business1 .section2 ul li b {font-size:1.1em}

.before_after {width:100%; display:flex;    gap:30px 0; flex-wrap:wrap; justify-content:space-between}
.before_after .box {width:calc(50% - 20px); display:flex; gap:50px}
.before_after .box div {width:100%; padding-bottom:250px; background-size:cover !important; position:relative}
.before_after .box div:after {  position:absolute; height:100%; width:50px; text-align:center; display:flex; flex-direction:column; justify-content:Center; right:-50px;  top:0; 
content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px;  color:#555; }
.before_after .box div:last-child:after {display:none}
.before_after .box div span {background-color:#fff; border-radius:5px; font-size:18px;  padding:3px 20px; color:#333; position:absolute; right:10px; top:10px}
.before_after .box div:nth-child(2n) span {background-color:var(--main_c); color:#fff}

 @media all and (max-width:900px) {
	.before_after .box {width:100%; flex-direction:column; }
	.before_after .box div:after {top:auto; bottom:-50px; font-size:20px; height:50px; right:auto; left:50%; margin-left:-25px;  transform: rotate(90deg);}



}
 
.step {gap:50px; width:100%}
.step li {width:25%; padding:40px 30px 30px 30px;  background-color:var(--bg1); box-sizing:border-box; position:relative}
.step li:after {content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px; position:absolute; height:100%; width:50px; top:0;  text-align:center; display:flex; flex-direction:column; justify-content:Center; right:-50px; color:#555;}
.step li:last-child:after {display:none}
.step span {position:Absolute; top:20px; right:20px}

.business2 .section1 ul {position:Relative}
.business2 .section1 ul:after {width:100%; height:100%; position:absolute; left:0; top:0; content:''; background:rgba(0,0,0,.6); }
.business2 .section1 li {padding:0 30px 50px 30px; line-height:1.6;  height:450px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; z-index:9; box-sizing:border-box;  border-right:1px solid rgba(255,255,255,.3);  counter-increment: list-counter; transition: all 0.2s ease-out; }
 .business2 .section1 li:before {content: counter(list-counter, decimal-leading-zero) ""; font-size:20px; position:absolute; left:30px; top:30px}
.business2 .section1 li h6 {color:#fff; font-size:1.4em; margin-bottom:20px; line-height:1.3}
.business2 .section1 li p {color:rgba(255,255,255,.9)}
.business2 .section2 ul li {  padding:0 }
.business2 .section2 ul li div div {padding:15px 20px 25px 20px} 

 @media all and (min-width:900px) {
  .business2 .section1 li:hover {width:30%}


}
 @media all and (max-width:900px) {
		.business2 .section1 li {width:100%; height:auto; padding-top:30px; border-bottom:1px solid rgba(255,255,255,.5) }
		.business2 .section1 li:before {left:auto; right:30px}
		.step {gap:50px 0}
		.flex.col-4.step li {width:100%}
 	    .step li:after {top:auto; bottom:-50px; font-size:20px; height:50px; right:auto; left:50%; margin-left:-25px;  transform: rotate(90deg);}

}


.business3 .section1 .bg_box_list > li:nth-child(1) {background:url('/general/img/business3_box_bg1.png') no-repeat; background-size:cover}
.business3 .section1 .bg_box_list > li:nth-child(2) {background:url('/general/img/business3_box_bg2.png') no-repeat; background-size:cover}
.business3 .section1 .bg_box_list > li:nth-child(3) {background:url('/general/img/business3_box_bg3.png') no-repeat; background-size:cover}
.business3 .section1 .bg_box_list > li:nth-child(4) {background:url('/general/img/business3_box_bg4.png') no-repeat; background-size:cover}
.business3 .section1 .bg_box_list > li:nth-child(5) {background:url('/general/img/business3_box_bg5.png') no-repeat; background-size:cover}
.business3 .section1 .bg_box_list > li:nth-child(6) {background:url('/general/img/business3_box_bg6.png') no-repeat; background-size:cover}
 
.business4 .section2 h4 + p {font-size:1.3em;}
.business4  .section4 .flex.wrap.col-2  {gap:30px 0}
.business4 .aft_ncs {border:1px solid  var(--main_c); display:flex;  box-sizing:border-box}
.business4 .aft_ncs > p {display:flex; background-color: var(--main_c); color:#fff; align-items:center; width:70px; flex-shrink:0;  justify-content:center }
.business4 .aft_ncs > div {padding:30px 25px; width:calc(100% - 70px)}
.business4 .aft_ncs strong {writing-mode:vertical-rl; font-size:20px; font-weight:600}
.business4 .aft_ncs > div span {font-size:1.15em; font-weight:600; border-bottom:1px solid  var(--main_c); padding-bottom:10px; color: var(--main_c); display:block; margin-bottom:25px}

.business4 .section6 .flex {justify-content:space-between; align-items:center; gap:50px}
.business4 .section6 .flex img {width:50%}
.business4 .section6 .flex .text {width:50%; flex-shrink:0; }
.business4 .box_list li h6 {font-size:1.05em; color:#000}


 @media all and (max-width:900px) {
		.business4 .section2 h4 + p {font-size:1.1em;}
		.business4 .section6 .flex {gap:20px}
		.business4 .section6 .flex + .flex {margin-top:20px}
		.business4 .section6 .flex img {width:100%}
		.business4 .section6 .flex .text {width:100%;  }

}



.business3 .section2 h5 {margin-top:40px}
.business3 .section2 ul.box_list.type2 li {font-weight:400}
.business4 .section2 .grap_box {width:551px; height:503px; background:url('/general/img/ncs_graphic_bg.png') no-repeat; background-size:100%; display:block; margin:40px auto;  position:Relative}
.business4 .section2 .grap_box p {position:absolute;  line-height:1.1; font-size:15px}
.business4 .section2 .grap_box p:nth-child(1) {top:90px; color:#fff; font-size:18px; left:190px; width:170px;  line-height:1.3; font-weight:500}
.business4 .section2 .grap_box p:nth-child(2) {top:222px; width:145px; left:22px}
.business4 .section2 .grap_box p:nth-child(3) {top:222px; width:145px;   right:22px}
.business4 .section2 .grap_box p:nth-child(4) {bottom:135px; width:105px; left:220px;}
.business4 .section2 .grap_box p:nth-child(5) {bottom:30px; width:135px; left:205px}
.business4 .section2 .grap_box p:nth-child(6) {bottom:50px; width:200px; line-height:1.3; right:0}
.business4 .section2 .grap_box p:nth-child(7) {bottom:50px; width:200px; line-height:1.3; }

.business4 .section2 .grap_box p b {font-size:20px; margin-bottom:10px; display:block}
 .business4  .flex.col-2.gap20 > div i {position:absolute; color:#333; right:40px; bottom:40px; font-size:40px; }


@media all and (min-width:900px) {
  .business4 .section2 .grap_box + img {display:none;}

}

@media all and (max-width:900px) {
	.business4 .section2 .grap_box  {display:none}
	.business4 .section2 .grap_box + img {margin:20px 0}
 	 .business4  .flex.col-2.gap20 > div i { display:none }

}

.esg1 .section1 ul.box_list {gap:30px}
.esg1 .section1 ul li {width:310px; height:310px; box-sizing:border-box; padding:20px 40px; border-radius:50%; align-items:center; position:relative}
.esg1 .section1 ul li p:nth-child(1) {color:var(--main_c);  }
.esg1 .section1 ul li h5 {color:var(--main_c); font-size:30px; }

.esg1 .section1 ul li:after {content: '&'; position: absolute; width: 40px; font-size: 35px; font-weight: 300; display: flex; align-items: center; justify-content: center; text-align: center; right: -35px; top: 0; z-index:99; height: 100%; font-style:italic;}

.esg1 .section1 .box_list li:last-child:after {display: none;}

.esg1 h3 + p.basic_t {font-size:1.3em;}

.esg1 h5 {font-size: 1.5em;}

.esg1 .vision_box {  color:#000;  font-weight: 500; line-height:1.3; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; font-size: 1.25em; padding: 20px 100px; border-radius: 100px; position:Relative; overflow:hidden }
.esg1 .vision_box:after {width:100%; height:100%; box-sizing:border-box; border-radius:100px; border:2px solid var(--main_c);  left:0; top:0; position:Absolute;  content:'';  z-index:-9; opacity:.7}
.esg1 .vision_box:nth-child(2) {margin: 0 -20px;}

.esg1 hr.sub_hr2 {height: 100px;}

.esg1 .flex {width: 100%;}
.esg1 .flex .left {width: 320px; flex-shrink: 0;}
.esg1 .flex .right {width: 100%;}

.esg1 .section2 .box_list li {padding:0; padding-bottom:20px}
.esg1 .section2 .box_list li div {width:100%}
.esg1 .section2 .box_list li h6 {font-size: 1em; margin-bottom:0;  font-weight:300; background-color:var(--main_c); padding:10px 0; margin-bottom:15px; color:#fff}
.esg1 .section2 .box_list li p {font-size: 1.16em; font-weight:500}
.esg1 .no_list li  {gap:15px}
.esg1 .no_list li b {font-size:1.13em; font-weight:400; color:#000;  }
.esg1 .bg_box h6 {font-size: 1.1em;   margin-bottom:15px; font-weight:600}


@media all and (max-width:1100px) {
	.esg1 .section1 ul.box_list  {flex-wrap:nowrap;  }
	.esg1 .section1 ul li {width:30vw; height:30vw}
}

@media all and (max-width:900px) {
		.esg1 .section1 ul.box_list  {flex-wrap:wrap; gap:10px }
		.esg1 .section1 ul li {width:100%; height:auto; border-radius:0}
		.esg1 .section1 ul li:after {display:none}
		.esg1 .section2 .box_list li {width:100%;  }
		.esg1 ul.no_list.col-2 li  {width:100%}
		.esg1 .bg_box  {width:48%}
		.esg1 .flex.gap20  {gap:10px}
		.esg1 .vision_box {width:100%;  box-sizing:border-box}
		.esg1 .vision_box:nth-child(2) {margin:10px 0}
		.esg1 .section1 ul li h5  {font-size:1.6em}

}

.csr1 h4 {font-size:1.3em; margin-bottom:10px}

.social_dos { position:relative; padding:20px 0; border:1px solid #ddd;}

.social_dos .tt_div {margin:0 auto; line-height:0; text-align:center}
.social_dos .tt_div p {border-bottom:2px solid var(--main_c); font-size:1.1em; line-height:1; color:var(--main_c); font-weight:400; display:inline-block; padding:9px 10px; font-weight:500;}
.social_dos .tt_div span {height:50px;  width:1px; background-color:var(--main_c); display:inline-block}

.social_dos .tt_div.color2 {margin-left:450px;}
.social_dos .tt_div.color2 p {border-bottom:2px solid var(--main_c2);  color:var(--main_c2);} 
.social_dos .tt_div.color2 span { background-color:var(--main_c2);  }
.social_dos .tt_div.color3 {margin:0 auto;}
.social_dos .tt_div.color3 p {border-top:2px solid #e44e3e; color:#e44e3e;  border-bottom:none} 
.social_dos .tt_div.color3 span { background-color:#e44e3e;  }


.social_dos .all_box {position:relative; gap:60px; align-items:center; justify-content:center;  }
.social_dos .dotted_line {width:790px; position:absolute; top:0px; border-radius:200px; height:240px; left:251px; border:2px dotted #e44e3e}
.social_dos .one_wrap {gap:15px; border:2px solid var(--main_c); padding:20px; border-radius:200px}
.social_dos p.one {width:200px; height:200px;border-radius:50%; display:flex; align-items:center; text-align:center;  flex-direction:column; justify-content:center; color:#fff}
.csr1 .box_list.type4 span.icon_one {background-color:var(--main_c)}
.csr1 .box_list.type4 span.icon_one {color: #fff; font-size:22px}
.csr1 .box_list.type4 .dot {text-align:left}
 
@media all and (min-width:1300px) {
  .social_dos + img {display:none;}

}

@media all and (max-width:1300px) {
	.social_dos  {display:none}
	.social_dos + img {margin-top:20px}
}



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

  .csr1 ul.no_list {gap:10px 0; justify-content:space-between }
  .csr1 ul.no_list li {width:49% }

}

.contact .section1 {margin-top:100px}




/* 오버레이 */
  .cert-lightbox {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
    z-index: 99999999999999999999999999999999;
  }
  .cert-lightbox.open { display: flex; }
  body.cert-no-scroll { overflow: hidden; }

  /* 다이얼로그 */
  .cert-lightbox__dialog {
    position: relative;
    max-width: 96vw; max-height: 96vh;
    outline: none;
  }

  /* 큰 이미지 */
  .cert-lightbox__img {
    display: block;
    max-width: 96vw; max-height: 84vh;
   
    background: #fff;
  }

  /* 캡션 */
  .cert-lightbox__caption {
    margin-top: 10px;
    text-align: center;
     background:rgba(0,0,0,.5);
	 color: #fff;
     width:100%; 
 	position:absolute;
	 bottom:0;
	 left:0;
	 font-size:.96em; 
 	 padding:10px;
	 box-sizing:border-box; 
   z-index:99;
   display:none 
  }

  /* 닫기/이동 버튼 */
  .cert-lightbox__btn {
    position: absolute; 
    width: 50px; height: 50px;
    background:rgba(0,0,0,.5);
    color: #fff; font-size:15px;  font-weight: 700;
    display: flex; justify-content:center;  align-items:center; 
    cursor: pointer;
  }
   .cert-lightbox__close { right:0 }
  .cert-lightbox__prev, .cert-lightbox__next {
    top: 50%; transform: translateY(-50%);
  }
  .cert-lightbox__prev { left:0}
  .cert-lightbox__next { right:0 }



.csr2 .tab_wrap {gap:20px; margin-bottom:30px; align-items:flex-end; }
.csr2 .flex .tab {width:auto}
.csr2 .flex select {height:35px; padding:0 5px; color:#333; font-size:15px; border:1px solid #ddd;   }


.csr2  ul.gall li span {display:none}
.statistics  ul.gall li span {display:none}

@media all and (max-width:900px) {
  .csr2 .flex select {margin-left:auto }


}