html {scroll-behavior:smooth;}


hr.line_hr {width:100%; height:1px; display:inline-block; background-color:#ddd; margin:30px 0;}
hr.sub_hr {height:40px}
.table_wrap {width:100%;   overflow-x:auto}



.con {font-size:1.05rem; line-height:1.4em; color:#333; }
.con  h2 {font-size:2rem; color:#0168b7 ; display:block; margin-bottom:15px;  line-height:1.3em; }
.con  h3 {font-size:1.5rem;  display:block; margin-bottom:15px;  line-height:1.3em; }
 
 

@media all and (max-width:900px) {
        .con {font-size:.97rem; line-height:1.4em;}
		.con  h2 {font-size:1.5rem; }
		.con  h3 {font-size:1.3rem; }
   		 hr.line_hr { margin:30px 0;}
		 hr.sub_hr {height:30px;   box-sizing:border-box}
		
		footer {margin-top:60px}

  }
  


 /*서브비쥬얼*/

 .sub_vi {width:100%; height:350px; position:relative; overflow:hidden; margin-top:60px;}

.sub_vi_t {width:100%; display:inline-block; height:100%;   color:#fff; text-align:center;  position:absolute; top:0; left:0}
.sub_vi_img  {
     width:100%; display:inline-block;  background-size:cover;  overflow:hidden;
   height:100%;  color:#fff; text-align:center;  
    animation-duration: 10s;
    animation-name: background-image-animation;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: linear;
    transform:scale(1); 
}

@keyframes background-image-animation {
  0% {
    transform:  scale(1.2);
  }
  100% {
    transform:  scale(1);
  }
}
 
.sub_vi_t::after {width:100%; height:100%; position:absolute; top:0; left:0; background:rgb(0,0,0,.6); display:inline-block; z-index:9; content:''}
.sub_vi_t div {position:absolute; top:50%; left:50%; color:#fff;  z-index:99;  transform: translate(-50%, -50%); }
.sub_vi_t div b {font-size:3.3rem; display:inline-block; width:100%; font-weight:700; letter-spacing:0px; font-family: 'Montserrat'} 

.sub_vi_t div span {font-size:1.15rem; color:rgba(255,255,255,.7); font-weight:400; display:block; margin-top:10px; display:none} 

.sub_con {width:100%; box-sizing:border-box; padding:1px;  max-width:1240px; margin:0 auto;  }
 
.sub_menu {width:100%;  max-width:1240px; margin:0 auto; margin-top:-35px; position:relative; z-index:999999}
.sub_menu ul { display:flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.sub_menu ul li {border:1px solid #333; border-right:none; width:50%; text-align:center; font-size:1.2rem; line-height:55px;  background-color:#fff;}
.sub_menu ul li  a {color:#333 !important; width:100%; display:inline-block; transition: 0.3s linear;  }
.sub_menu ul li:last-child {border-right:1px solid #333}

.sub_menu ul li:hover { background:#333; }
.sub_menu ul li:hover a {color:#fff !important; }


.sub_menu ul li.ov {background-color:#333; color:#fff}
.sub_menu ul li.ov  a { color:#fff !important}

nav.sub_nav { background: #fff; width:100%; max-width:1240px; margin:0 auto; margin-top:-35px; position:relative; z-index:999999; box-sizing:border-box; }

nav.sub_nav ul {
  font-size:0;
  margin:0; width:100%; margin:0 auto;
  padding:0;   box-sizing:border-box; 
}

nav.sub_nav ul li {
  display: inline-block; width:50%; box-sizing:border-box;  text-align:left;  vertical-align:top;
  position: relative;   height:53px; border:1px solid #333
}
nav.sub_nav ul li:first-child {border-right:none}

nav.sub_nav ul li a {
   display: inline-block;
 font-size:1.2rem; padding-left:3%;   box-sizing:border-box; 
  line-height:53px; width:100%; height:53px; font-weight:500;
  transition: 0.3s linear;   
}


nav.sub_nav ul li:hover { background:#333;  }
nav.sub_nav ul li:hover a {color:#fff;}


nav.sub_nav ul li a span {float:right; font-size:6px; margin-right:15px; color:#333}
nav.sub_nav ul li:hover a span {color:#fff}

nav.sub_nav ul li ul {
 display: none;  margin-top:-1px;
   box-sizing:border-box;   background: #fff; border:1px solid #333; border-top:none;
  width:calc(100% + 1px);  position:relative; z-index:9999999999; padding:20px 0;
}

nav.sub_nav ul li ul li {
 
  display: block; height:32px; width:100%;  border:none
}
nav.sub_nav ul li ul li:first-child {border-right:none}

  
nav.sub_nav ul li ul li a {
  display:inline-block; font-size:1.07rem; font-weight:400;
 line-height:32px; color:#333 !important;
}

nav.sub_nav ul li ul li:hover { background: #fff;  border:none  }
nav.sub_nav ul li ul li a:hover {  color:#333 !important; }





@media all and (max-width:1240px) {
  .sub_con  {padding:0 4%; box-sizing:border-box; }
   nav.sub_nav ul li ul {width:100%}

 
 }


@media all and (max-width:900px) {
	 .sub_vi {height:170px; margin-top:60px; background-attachment:scroll}
	 .sub_vi_t div { font-size:2rem; width:90%}
	 .sub_vi_t div b {font-size:7.5vw; }
	 .sub_vi_t div span {font-size:1rem; line-height:1.4em } 


	 .sub_menu {margin-top:0; }
	 .sub_menu ul { display:flex;width:100%;  overflow-x: auto; overflow-y: hidden; white-space: nowrap;  border-bottom:1px solid #ddd;  background-color:#fff; box-sizing:border-box ; padding-left:5%}
	.sub_menu ul li { padding-right:20px; width:auto; text-align:left; font-size:1.1rem; line-height:45px; border:none; background:none}
	 .sub_menu ul li:hover { background:#fff; }
	 .sub_menu ul li:hover a {color:#333 !important; }
 
	.sub_menu ul li:last-child {border-right:none} 
	.sub_menu ul li.ov {background:none }
	.sub_menu ul li.ov a {text-decoration:underline; font-weight:600; color:#111 !important}
    nav.sub_nav {margin-top:0}
	nav.sub_nav ul li {border:none; border-bottom:1px solid #333}
	nav.sub_nav ul li:nth-child(1)  {border-right:1px solid #333}
	nav.sub_nav ul li a {font-size:1.05rem}
	nav.sub_nav ul li ul {padding:10px 0}
	nav.sub_nav ul li ul li a {font-size:1rem}  


 }
 

.company,.board,.recruit {width:100%; display:inline-block; margin-top:60px}
 
 /*기업정보*/




 .ceo {display:flex; flex-wrap:wrap}
 .ceo .t1 {font-size:1.4em; font-weight:700; width:35%; line-height:1.3em}
 .ceo .t2 {margin-left:auto; width:60%}
 .ceo .t2  span {font-size:1.3rem; font-weight:600; line-height:1.3em; }
 .ceo .t2  span  b {font-family: 'InkLipquid'; font-size:2em; font-weight:400}

 @media all and (max-width:900px) {
	  .ceo .t1 {width:100%; font-size:1.3rem; display:block; margin-bottom:15px}
	  .ceo .t2 {width:100%;}
	  .ceo .t2  span  {font-size:1.15em; line-height:1.3em }
  }




.vision .one_wrap   {width:100%; display:flex; box-sizing:border-box; padding:0 10%; }
.vision  .one_wrap p { background:rgba(6,37,78,.8); width:40%; text-align:center; color:#fff; line-height:70px; font-size:1.7rem; border-radius:50px;   margin:0 -20px; position:relative; font-family: 'Noto Sans SC', sans-serif;}
.vision  .one_wrap p:after {content:'+'; font-size:2rem; font-weight:300; position:absolute; right:10px; top:0; z-index:99}
.vision  .one_wrap p:last-child:after  {display:none}


.vision  .box {display:flex; width:100%; align-items:center; justify-content:space-between; }
.vision  .box .img  {width:50%; padding-bottom:30%; overflow:hidden;  position:relative}
.vision  .box .img img {width:100%; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.vision  .box .t  {width:50%; padding-left:40px; box-sizing:border-box;  position:relative }
/* .vision  .box .t:before {width:100px; height:1px; background-color:#333; content:''; position:absolute; left:-50px; top:-20px;}
 */
.vision  .box .t h3 {font-size:1.6em; margin-bottom:25px}
.vision  .box:nth-child(2) .img {order:2;}
.vision  .box:nth-child(2) .t {order:1; padding-right:40px; padding-left:0; text-align:right;}
.vision  .box:nth-child(2) .t:before {left:auto; right:-50px; top:-20px;}

.con_logo { /* animation-duration: 5s; animation-name: logo_opacity; animation-iteration-count: infinite; animation-direction: alternate; */ width:27%}

@keyframes logo_opacity {
    0% { opacity:0 }
    50% { opacity:1 }
   100% { opacity:0 }
 }

@media all and (max-width:1240px) {
   .vision  .box .t:before {display:none}
}


@media all and (max-width:900px) {
	.vision .one_wrap   { padding:0; }
	.vision  .one_wrap p {  width:33.3333%;   line-height:60px; font-size:4vw;  border-radius:0;  margin:0;   }
	.vision  .one_wrap p:after {display:none}

	.vision  .box {flex-wrap:wrap;}
	.vision  .box:nth-child(n+2) {margin-top:40px}
	.vision  .box .img  {width:100%;  }
	.vision  .box .t  {width:100%; margin-top:25px; padding-left:0 }
	.vision  .box .t h3 {font-size:1.3em; margin-bottom:15px}
	.vision  .box:nth-child(2) .img {order:1}
	.vision  .box:nth-child(2) .t {order:2; text-align:left; padding-right:0}
	.con_logo {width:50%}
}

.history {position:relative; padding:30px 0}
.history p.year {font-family: 'Montserrat','Pretendard'; font-size:2.5em; line-height:0.7em;   margin-bottom:25px; font-weight:700; color:#0168b7}

.history ul li { box-sizing:border-box;  position:relative; }
.history ul li:after {width:20px; height:20px; border:4px solid #0168b7; background-color:#fff; z-index:99; box-sizing:border-box;  content:''; position:absolute;  border-radius:50%;}
 
.history ul li div {  display:flex; width:100%;  margin:6px 0 }
.history div b {width:100px;} 
.history div p {width:calc(100% - 100px);} 


.history_line {width:1px; height:100%; background-color:#ddd; display:inline-block; left:50%; position:absolute; top:0}

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

  .history ul li {width:50%; padding-right:5%; text-align:right; }
  .history ul li:after {right:-10px; top:0;}
  .history ul li:nth-child(2n) {margin-left:auto;  padding-left:5%; text-align:left}
  .history ul li:nth-child(2n):after {right:auto; top:0; left:-10px}
  .history ul li div { justify-content:flex-end;  }
  .history div b {order:2}
  .history div p {order:1}

  .history ul li:nth-child(2n) div { justify-content:flex-start;  }
  .history  ul li:nth-child(2n) div b {order:1}
  .history ul li:nth-child(2n) div p {order:2}

 }
  @media all and (max-width:900px) {
    .history ul li {width:100%; margin-bottom:30px}
    .history ul li:last-child {margin-bottom:0}
    .history ul li:after {width:15px; height:15px; left:0; top:3px}
    .history p.year { width:calc(100% - 30px); margin-left:auto; font-size:1.6rem;   margin-bottom:15px; }
    .history div b {width:85px;} 
    .history div p {width:calc(100% - 85px);} 

    .history ul li div { width:calc(100% - 30px); margin-left:auto }
    .history_line {left:7px}

}

.organization .in {width:100%; position:relative; display:inline-block; }

.organization p.box {position:absolute; left:50%; width:220px; margin-left:-110px; background-color:#333; color:#fff; top:0; text-align:center; line-height:63px; font-size:1.1rem; letter-spacing:-.5px; font-weight:500; z-index:99; border-radius:30px}


.organization p.box.type1 {width:150px; height:150px;  font-size:1.4rem; margin-left:-75px; border-radius:50%; background-color:#0168b7}
.organization p.box.type1 span {line-height:150px}
.organization p.box.type2 {top:230px; border-radius:0;  }

.organization p.box.type3 { width:15.5%;  line-height:46px;  top:143px;  margin-left:15%; border:1px solid #333;  }
.organization p.box.type3 span {background-color:#fff; font-size:1.1rem; box-sizing:border-box;   color:#333;  font-weight:400; width:100%; display:inline-block; line-height:46px;display:none;}
.organization p.box.type3.type3_2 {margin-left:0; left:auto; right:0}
.organization p.box.type3.type3_3 {top:220px}


.organization p.box.type4 { width:15.5%;  line-height:46px;top: 143px;margin-left: 34%;border:1px solid #333; }

 
.y_line {width:1px; height:330px; background-color:#ddd; position:absolute }
.x_line {width:83%; height:1px; background-color:#ddd; position:absolute; }
 
.pc_line p:nth-child(n+5) {top:330px}
.pc_line p:nth-child(n+7) {top:440px}
.pc_line p:nth-child(n+8) {height:100px}
 
.organization ul {display:flex; margin-top:360px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;  width:100%; position:relative; z-index:9}
.organization ul li {width:11%; line-height:1.3em; margin-bottom:-1px; text-align:Center; background-color:#fff; box-sizing:border-box; }
.organization ul li p {background-color:#333; font-size:1.15rem; box-sizing:border-box; padding:12px 0;   color:#fff; border-top:1px solid #fff }
.organization ul li ul { width:100%; margin-top:0;}
.organization ul li ul li {width:100%; border:1px solid #ddd; padding:10px 0; }

.organization ul.low{margin-top:70px;}
.organization ul.lower{margin: 0;display: contents;}
 

.organization p.box.type2:after {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 1px solid rgba(255,255,255,.5);
     position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;}

.organization p.box.type1:after {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;}

@media all and (min-width:900px) {
  .m_line {display:none}
 }


@media all and (max-width:900px) {
    .pc {display:none}
    .pc_line {display:none}
	 
	.organization p.box {font-size:1.05rem; line-height:50px;}
	.organization p.box {width:150px; margin-left:-75px}
	.organization p.box.type1 {width:120px; height:120px; margin-left:-60px;  font-size:1.2rem;}
	.organization p.box.type1 span {line-height:120px}
	.organization p.box.type2 {top:140px;}
	.organization p.box.type3{ width:145px; margin-left:0; top:210px; line-height:45px;left: 50%;right: 0; transform: translate(-50%, 0);}
 	.organization p.box.type3.type3_2 {margin-left:0; left:50%; top:320px }
 
	.organization p.box.type3 span.mo{display:block;}
	.organization p.box.type4.pc{display:none;}
	.organization ul li {width:47%;margin-right:0 !important;}
	.organization ul li p { font-size:1.1rem;  }
	.organization ul li ul{display:block;margin: 0;}
	.organization ul li ul li {font-size:1rem}

	.organization ul{margin-top: 450px;}
	.organization ul.low{margin-top:0;}
	.organization ul.low > div{display:none;}
	.organization ul.lower{width: 47%;display: flex;flex-direction: column;align-items: stretch;}
	.organization ul.lower > li {width:auto;}
 
     
 }

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

}




.guide_line_box {background:url('/common/img/ci_guide_line.png') repeat-x;   width:48%; padding:30px; box-sizing:border-box; display:inline-block;  text-align:center }
 .guide_line_box:nth-child(2) {margin-left:auto; }
 .guide_line_box img {width:50%;}

	 
 .color_chip {width:100%; display:flex; justify-content:space-between}
 .color_chip li {width:24%; border:1px solid #ddd; box-sizing:border-box; }
 .color_chip p.color_bg {width:100%; background-color:#eb1a15; height:90px; display:flex;  align-items:center; }
 .color_chip li:nth-child(2) p.color_bg {background-color:#e7e7e7}
 .color_chip li:nth-child(3) p.color_bg {background-color:#3621ac}
 .color_chip li:nth-child(4) p.color_bg {background-color:#c5c5c5}
 .color_chip p.color_bg span {color:#fff; width:100%; text-align:Center }
 .color_chip p.color_bg + p {padding:13px; font-size:1.1rem; font-weight:500; box-sizing:border-box; }
 

@media all and (max-width:900px) {
   .guide_line_box img {width:90%;}
   .color_chip  {flex-wrap:wrap}
   .color_chip li {width:49%; border:1px solid #ddd; box-sizing:border-box;}
    .color_chip li:nth-child(n+3) {margin-top:10px}
    .color_chip p.color_bg { height:60px;  }
    .color_chip p.color_bg + p {  font-size:1rem;   }
 }


.map_wrap {width:80%; margin-left:10%;  margin-top:50px;  display:inline-block; box-sizing:border-box;  position:relative}

.contact div b {display:block; margin-bottom:2px}
.contact ul {width:100%}
.contact ul li {width:100%; border-bottom:1px solid #ddd; display:flex; padding-bottom:20px; margin-bottom:20px;}
.contact ul li div:nth-child(1) {width:30%; font-size:1.2rem; color:#333; font-weight:600}
.contact ul li div:nth-child(1) span.s_t {font-size:0.9em; font-weight:400; color:#333}
.contact ul li div {font-size:0.98rem;  line-height:1.4em}
.contact ul li div b {font-size:1.2em; font-weight:700;  margin-bottom:7px; letter-spacing:0 }
.contact ul li div b:nth-child(n+2) {margin-top:15px;    }
 
  .one_point  {position:absolute; font-size:1rem; line-height:1em;   }
  .one_point span.p {width:1.1vw; vertical-align:middle; height:1.1vw; border-radius:50%; border:4px solid #0168b7; display:inline-block; box-sizing:border-box;  animation-duration:3s;
  animation-name: point;
  animation-iteration-count: infinite;}

 

@keyframes point {
  0% { transform:  scale(.7); }
   50% { transform:  scale(1); }
  100% { transform:  scale(.7); }
}

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

	.map_wrap {width:115%; margin-left:-15%; margin-top:50px;  }
}

@media all and (max-width:900px) {
     .contact ul li {flex-wrap:wrap;}
     .contact ul li div:nth-child(1) {width:100%; font-size:1.15rem;  margin-bottom:10px }
     .contact ul li div b {font-size:1.1em;  margin-bottom:3px }
     .one_point {font-size:0}

}


.client ul {width:100%; display:flex; flex-wrap:wrap}
.client ul li {border:1px solid #ddd; box-sizing:border-box; position:relative; height:100px; }
.client ul li img  {position: absolute; max-width:90%; max-height:80%; left: 50%; top: 50%; transform: translate(-50%, -50%);}

 @media all and (min-width:900px) {
    .client ul li {width:19%; margin-right:1.2%;  }
	.client ul li:nth-child(5n) {margin-right:0}
	.client ul li:nth-child(n+6) {margin-top:20px}
}

	@media all and (max-width:900px) {
    .client ul li {width:32%; margin-right:2%; }
    .client ul li:nth-child(3n) {margin-right:0}
	.client ul li:nth-child(n+4) {margin-top:20px}

}


.company2 b {font-size:1.15em; font-weight:600; display:block}

.company2 center {width:23%;  }
.company2 center  img {width:100%}
.company2 center + div {width:75%; margin-left:auto} 


.company2 .box div {background-color:#0168b7; color:#fff; border-radius:10px; padding:15px 0;  width:170px;   text-align:center; font-size:1.3rem; position:relative;   display:inline-block;  margin:20px 0; }
.company2 .box div:nth-child(1) {margin-right:20px; }
.company2 .box div:nth-child(1):after {width:100px; height:1px; position:absolute; display:inline-block; background-color:#0168b7; content:''; top:50%;}

.company2  ul  {border:5px solid #ddd; width:100%; display:inline-block; padding:20px; box-sizing:border-box}
.company2  ul li {display:flex; margin-bottom:-1px; align-items:flex-start;  width:100%; box-sizing:border-box; padding:4px}
.company2  ul li:last-child {margin-bottom:0}
.company2  ul li p:first-child {width:60px; background-color:#fff;  font-weight:600; color:#0168b7; text-decoration:underline; }
.company2  ul li p:nth-child(2) {width:calc(100% - 60px); }

@media all and (max-width:900px) {
	.company2 center {width:100%; margin-bottom:20px; }
	.company2 center  img {width:30%}
	.company2 center + div {width:100%; margin-left:auto} 
    .company2 .box {display:flex; }
	.company2 .box div { padding:13px 0;  width:110px;   font-size:1.1rem;   margin:15px 0; }

   .company2 .box div:nth-child(1):after {width:60px;  }
 


}


.company3_2 .flex_box.color_box h4 {width:100%; display:block; font-size:1.2em; margin-bottom:5px}
.company3_2 .flex_box.color_box:nth-child(n + 3) {margin-top:20px}
 



/*인재채용*/



.recruit1 ul {width:100%; display:flex;   flex-wrap:wrap; justify-content:space-between}
.recruit1 ul li {width:48%; display:flex; flex-wrap:wrap; background-color:#fff; box-sizing:border-box;  }
.recruit1 ul li img {width:100%;   }
.recruit1 ul li div {background-color:#fff; padding:40px 15px; box-sizing:border-box; width:90%;  z-index:99;  margin-top:-20%}
 
.recruit1 ul li b {display:block;  font-size:1.5em; font-weight:700; margin-bottom:15px}
.recruit1 ul li b  span {font-weight:400; font-size:.7em; display:block; margin-top:5px; letter-spacing:.5px}
.recruit1 ul li:nth-child(n+3) {margin-top:20px}

@media all and (max-width:900px) {
 	.recruit1 ul li {width:100%;    }
 
}
 
.recruit2 .bg_box {background:url('/common/img/recruit2_bg.png') no-repeat center; background-size:cover; width:100%; position:relative;}
.recruit2 .rgba_bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgb(0,0,0,.6); display: inline-block;}

.recruit2 ul {width:100%; position:relative; z-index:99; display:flex; flex-wrap:wrap; justify-content:space-between}
.recruit2 ul li {width:33.33333%;  border-right:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3);  box-sizing:border-box;  padding:40px 30px}
.recruit2 ul li ul li {width:100%; border:none; padding:0;color:rgba(255,255,255,.8); padding-bottom:3px}

.recruit2 ul li b {display:block; color:#fff; font-size:1.35em; font-weight:600; margin-bottom:15px}

@media all and (max-width:900px) {
	.recruit2 ul li {width:50%; padding:30px}
	.recruit2 ul li b { margin-bottom:10px}
  
}
 
 /*제품정보 1*/

.product_section2 {width:100%; display:inline-block;  margin-top:60px  } 
.product_section2  h3 {font-size:1.4rem;  color:#333;    display:block; margin-bottom:15px}
.product_section2 .con { font-size:1.1rem;  }
.product_section2 ul.flex_box {margin-top:50px;}
.product_section2 ul.flex_box li {width:32.5%; }
.product_section2 ul.flex_box li p  {background-color:#f1f1f1; color:#333; font-size:1.4rem; margin-bottom:20px;  padding:20px 5%; box-sizing:border-box;   font-weight:500; text-align:center; position:relative}
.product_section2 ul.flex_box li p span {position:absolute; font-size:4rem; font-weight:800;  top:-10px; left:10px; color:#0168b7; font-family:'Montserrat','Pretendard'; }
.product_section2 .flex_box.center div {width:56%; margin-left:auto}
.product_section2 .flex_box.center p {width:43%}

.product_section2 .flex {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between}
.product_section2  .flex_in_box {width:48%}
.product_section2 .flex h3 {margin-top:20px}


@media all and (min-width:900px) {
		.product_section2 .img_flex {position:relative;}
		.product_section2 .img_flex p {position:absolute; width:100%;  display:flex; justify-content:center;  top:50%; left:50%; transform: translate(-50%, -50%);}
		.product_section2 .img_flex p img {max-width:50%; max-height:100%}

		.product_section2 .pc_p {padding-bottom:30px; padding-top:10px}

}

@media all and (max-width:900px) {
		.product_section2  h3 {font-size:1.3rem; }
        .product_section2 .con {font-size:.97rem;}

		.product_section2 .flex_box div {width:100%;  }
		.product_section2 ul.flex_box {margin-top:10px;}
		.product_section2 ul.flex_box li {width:100%; margin-top:6vw; }
		.product_section2 ul.flex_box li p span {font-size:11vw}
		.product_section2 ul.flex_box li p {font-size:1.2rem; padding:15px 5%; margin-bottom:15px}
		.product_section2 .flex_box.center p {order:2}
		.product_section2 .flex_box.center div {order:1; margin-bottom:20px }
         
		.product_section2  .flex_in_box {width:100%}
		.product_section2 .flex_in_box.c {text-align:left !important}
		.product_section2 .img_flex p {width:100%; text-align:center; padding:10px 0}
        .product_section2 .img_flex p img {max-width:50%;  }


}



.product_info_wrap {width:100%; margin-top:40px}
.product_info_wrap .box   { width:100%;     position:relative}
.product_info_wrap .box a  {display:flex; width:100%; align-items:center;   position:relative; z-index:99 }
.product_info_wrap .box a  * {transition: all 0.3s ease-out;}
.product_info_wrap .box p.img {width:50%; padding-bottom:35%;  box-sizing:border-box; background-color:#f1f1f1; position:relative; overflow:hidden; line-height:0; }
.product_info_wrap .box img  {width:100%; position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%); }
 

.product_info_wrap .box div.t {width:50%; box-sizing:border-box;   color:#333; padding:0 5%; }
.product_info_wrap .box div.t  b {display:block; font-size:3rem; line-height:1.1em; margin-bottom:20px; color:#111; font-weight:700;  font-family: 'Montserrat';}
.product_info_wrap .box div.t  b:first-letter {color:#0168b7}
.product_info_wrap .box div.t  b:after {content:''; width:25px; height:1px; display:block; background-color:#333; margin-top:30px; transition: all 0.3s ease-out;}
.product_info_wrap .box.right p.img {order:2}
.product_info_wrap .box.right div.t {order:1;  }
 
 
.product_info_wrap .box button {
margin-top:30px;
  width:200px;
  line-height: 45px;
  color: #fff; 
  background-color:#0168b7; 
  border:3px solid #0168b7;
  border-radius: 5px;
  padding: 0 25px;
   font-size:1.1rem;  
   cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
    
  outline: none;
  border-radius:30px; 
}

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

 	.product_info_wrap .box a:hover button {  background-color:#fff; color:#0168b7; }
	.product_info_wrap .box a:hover div.t b  {color:#333 !important; }
	.product_info_wrap .box a:hover div.t   {color:#555 !important; }
 

}

@media all and (max-width:1200px) {
	.product_info_wrap {}
   .product_info_wrap .box div.t  b {font-size:2.5rem}
   .product_info_wrap .box p.img {  padding-bottom:40%;  }

}

@media all and (max-width:900px) {
 
	.product_info_wrap  {margin-top:0}
     .product_info_wrap .text_slide {display:none}
	.product_info_wrap .box a  {flex-wrap:wrap;}
	.product_info_wrap .box p.img {width:100%; background-color:#ddd;   }
    .product_info_wrap .box p.img {width:100%; padding-bottom:70%;   }
	 .product_info_wrap .box p.img img {width:100%; height:auto}


	.product_info_wrap .box div.t {width:100%;   margin-top:30px; padding:0 }

	.product_info_wrap .box div.t  b {font-size:1.6rem; font-weight:600;  margin-bottom:10px;}
    .product_info_wrap .box div.t  b:after { margin-top:15px}
	.product_info_wrap .box:nth-child(n + 2) {margin-top:30px}

	.product_info_wrap .box:nth-child(2n) p.img {order:1}
	.product_info_wrap .box:nth-child(2n) div.t {order:2;  }

	.product_info_wrap .box button {
	 font-size:1rem;
	 line-height:40px;
	 width:150px;
	 margin-top:20px
}



}

 /*제품정보 2*/

.product_section {width:100%; display:inline-block; position:relative;  } 
.product_section h2 {font-family:'Montserrat','Pretendard';  letter-spacing:-1px; margin-bottom:10px }
.product_section  h3 {font-size:1.9rem; color:#333; margin-bottom:10px;   display:block;}

.product_section .con {background-color:#fff; margin-top:180px;   position:relative; width:100%;  margin-bottom:1px; font-size:1.1rem;  }
.product_section .con.type2 {  margin-top:80px; }
.product_section .con  table {width:100%; }
.product_section.type2 .con {margin-top:60px}


.product_tab {width:100%; position:absolute; left:0; top:430px; padding-top:70px; z-index:9999;   }
.product_tab ul { display:flex;  width:100%;  max-width:1240px; margin:0 auto; /* overflow-x: auto; overflow-y: hidden;   */ white-space: nowrap; padding:15px 0; box-sizing:border-box;}


.product_tab li { border-radius:10px; margin-right:15px;  line-height:50px; font-size:1.2rem; text-align:Center; background-color:#fff;  border:1px solid #0168b7; box-sizing:border-box; }
.product_tab li a {padding:0 25px; display:inline-block; color:#0168b7 !important}
.product_tab li a span {border:1px solid #0168b7; border-radius:50%; width:25px;line-height:22px; height:25px;  display:inline-block; box-sizing:border-box; margin-left:10px }
.li_m.on {background-color:#0168b7 !important; }
.li_m.on a {color:#fff !important ; font-weight:500}
.li_m.on a span {border:1px solid #fff;   }


.top_bar_fix {position:fixed; top:70px; left:0;  width:100%;  z-index:9999;  background-color:#0168b7;}
.top_bar_fix.product_tab {padding-top:0; }
.top_bar_fix.product_tab li {line-height:45px; border:1px solid rgba(255,255,255,.5); background-color:#0168b7; opacity:.8}
.top_bar_fix.product_tab li a { color:#fff !important}
.top_bar_fix .li_m.on {background-color:#fff !important; opacity:1 }
.top_bar_fix .li_m.on a {color:#0168b7 !important }

.top_bar_fix.product_tab li a span {border:1px solid #fff;   }
.top_bar_fix .li_m.on a span {border:1px solid #0168b7;   }


.section_point {width:100%; height:10px; position:absolute; left:0; display:inline-block;  z-index:99;}
.scroll {width:100%;  height:1px;  display:inline-block; z-index:99; position:absolute; left:0; top:0}

.gap {width:100%;  position:absolute;  left:0; top:0; padding-top:70px;}


/*탭 ov 위치*/.scroll.type1 {top:-302px}
/*클릭시 이동 지점*/.section_point.type1 {top:-30px;}

.scroll.type2 {top:-122px}
.section_point.type2 {top:-120px; } 
 
 

.product_section .flex_box { align-items:center; justify-content:space-between; flex-wrap:wrap; }
.product_section  .flex_box img { }
.product_section  .flex_box div {width:49%; } 
.product_section .flex_box.type2 div {width:50%; }
.product_section .flex_box.type2 div.t_box { box-sizing:border-box; padding-left:30px}
.product_section .flex_box.type2_right div.t_box { padding-left:0; padding-right:30px}
.product_section td.file_none {color:red  }


.product_section ul.flex_box {border:1px solid #ddd; border-right:none}
.product_section ul.flex_box li {width:33.333%; border-right:1px solid #ddd; box-sizing:border-box; line-height:0}

.product_table {width:100%;   }
.product_table td {border:1px solid #ddd; color:#444; text-align:Center; padding:8px; font-size:0.95rem }
.product_table th {background-color:#444;   padding:9px; font-weight:400; border:1px solid #ddd; color:#fff}
.product_table td a {color:#333 !important;  position:relative; z-index:999;     }
.product_table td a:hover {color:#0168b7 !important; text-decoration:underline}



.product_table2 {width:100%; border:1px solid #ddd; }
.product_table2 th {background-color:#005a96;   padding:9px; font-weight:400; border:1px solid #ddd; color:#fff}

.product_table2 td { color:#444; border-right:1px solid #ddd; text-align:Center; padding:0 8px 5px 8px; font-size:0.95rem }
.product_table2 tr:last-child td {padding-bottom:15px}

.product_table2 td.tt1 {background-color:#444;   padding:9px; font-weight:400; border:1px solid #ddd; color:#fff; font-size:1.05em}
.product_table2 td.tt2 { border-bottom:1px solid #ddd; padding:7px;  font-weight:600; font-size:1.05em; color:#333; }

.product_table2 td a {color:#333 !important;   position:relative; z-index:999;    }
.product_table2 td a:hover {color:#0168b7 !important; text-decoration:underline}
/* .product_table2 td a:visited	{color:blue !important;}
.product_table td a:visited	{color:blue !important;}
 */


@media all and (max-width:1240px) {
   .product_tab { box-sizing:border-box; padding-top:70px; }
   .product_tab  ul {padding-left:4%}
 }


@media all and (max-width:900px) {
         .product_section .con {font-size:.97rem;}
		  .product_section  h3 {font-size:1.3rem;   }
		  .product_section .flex_box h3 {margin-top:20px;   }
		  .product_section .flex_box h2 {margin-top:20px  }

		.product_tab {  top:230px; padding:0; padding-top:70px  }
		.product_tab ul { padding:12px 0 12px 4%;  }
		.product_tab li { line-height:41px; font-size:1rem; margin-right:10px; }
		.product_tab li a { padding:0 20px }
		.top_bar_fix {top:60px; }
		.top_bar_fix.product_tab li {line-height:41px;  }

      	.product_section .con {margin-top:120px; }
		.product_section .con.type2 {  margin-top:70px; }

		.scroll.type1 {top:-42px}
		.section_point.type1 {top:-40px;}

		.scroll.type2 {top:-92px}
		.section_point.type2 {top:-90px; }
		.product_section .flex_box.type2 div.t_box {  padding-left:0}
	 

		.product_section .flex_box.type2_right div.t_box {padding-right:0}
		.product_section .flex_box.type2_right div.t_box {order:1}
	 
		.product_section  .flex_box div {width:100%; } 
		.product_section .flex_box.type2 div {width:100%; }

		 
        .product_table td {  font-size:0.90rem; padding:7px; line-height:1.3em}

}


  


.login_box {width:90%; max-width:400px;  margin:0 auto; }
.login_box input	{font-size:0.90em; color: #555; height:45px; border:none; background-color:#f1f1f1; margin-bottom:15px; text-indent: 10px; box-sizing:border-box; width:100%; vertical-align:middle; -webkit-appearance: none; -webkit-border-radius: 0;}
.login_box input::placeholder {color:#999}
.login_box a.login_btn {width:100%; background-color:#0168b7; display:inline-block; color:#fff; text-align:center; line-height:50px; font-size:1.15rem; font-weight:500}








/* 사업소개 */
 @media all and (min-width:900px) {

			.tool-tip {cursor:pointer}

			.tool-tip::after {
			  background-color: #323a45;
			  border-radius: 2px;
			  color: #fff;
			  content: attr(title) " ";
			   width:400px;
			  padding:10px;
			  text-align: left;
			  font-size:.9em;
			  line-height:1.4em;
			  text-transform: none; 
			 
			}

			.tool-tip.china1::after {content:'Kunshan,China 333 Huang Pujiang Rd,Kunshan,JS.,China. 86-512-5770-9898'}
			.tool-tip.china2::after {content:'Downtown, Gangxi-Zhen, Rongcheng City, Shandong Province, China'}
			.tool-tip.china3::after {content:'No.76, puxing East Rd, Yuliangwei Administration Area Qingxi Town, 523649 Dongguan, Guangdong, China'}
			.tool-tip.korea::after {white-space:pre; content:'31, Dunchon-daero 388beon-gil, Jungwon-gu, Seongnam-si, \A Gyeonggi-do, Korea \A 45, Dusan-ro, Jeungpyeong-eup, Jeungpyeong-gun, \A Chungcheongbuk-do, Republic of Korea \A 36, Naeryong-gil, Jeungpyeong-eup, Jeungpyeong-gun \A Chungcheongbuk-do, Republic of Korea'}
			.tool-tip.japan::after {content:'1-7-9, KAJI-CHO, CHIYODA-GU, TOKYO'}
			.tool-tip.twiwan::after {white-space:pre;  content:'Nol, Central 2nd Street, Nantze Export Processing Zone,\A  Kaohsiung Taiwan  \A Kaohsiung,Taiwan No.20, Kaifa Rd., Nanzi Dist., \A  Kaohsiung City 811, Taiwan (R.O.C.) 886-7-366-1067'}
/* 			.tool-tip.vietnam::after {content:'Lot CN2-4, Que Vo III Industrial park, Viet Hung Commune, Que Vo District, Bac Ninh Province, Vietnam.'}
			 */			.tool-tip.vietnam::after {content:'Lot CN2-4, Que Vo III Industrial Park, Viet Hung Ward, Que Vo Town, Bac Ninh Province, Vietnam'}
			.tool-tip.malaysia::after {content:'Malaysia PTD 37440 Jalan Perindustrian Senai 3 Kawasan Perindustrian Senai Fasa 2 81400 Senai, Johor, Malaysia 607-597-7800'}





			.tool-tip::before {
			  width: 0;
			  height: 0;
			  content: "";
			}

			.tool-tip::before,
			.tool-tip::after {
			  position: absolute;
			  transition: opacity 250ms ease 0ms, transform 250ms ease 0ms;
			  transform-style: preserve-3d;
			  opacity: 0;
			  z-index: -1;
			}

			.tool-tip[data-tooltip-position="top"]::after,
			.tool-tip[data-tooltip-position="bottom"]::after {
			  left: 50%;
			}

			.tool-tip[data-tooltip-position="top"]::after {
			  transform: translate3d(-50%, 10px, 0);
			}

			.tool-tip[data-tooltip-position="bottom"]::after {
			  transform: translate3d(-50%, -10px, 0);
			}

			.tool-tip[data-tooltip-position="top"]::after {
			  bottom: calc(100% + 10px);
			}

			.tool-tip[data-tooltip-position="bottom"]::after {
			  top: calc(100% + 10px);
			}

			.tool-tip[data-tooltip-position="left"]::after,
			.tool-tip[data-tooltip-position="right"]::after {
			  top: 50%;
			}

			.tool-tip[data-tooltip-position="left"]::after {
			  transform: translate3d(10px, -50%, 0);
			}

			.tool-tip[data-tooltip-position="right"]::after {
			  transform: translate3d(-10px, -50%, 0);
			}

			.tool-tip[data-tooltip-position="left"]::after {
			  right: calc(100% + 10px);
			}

			.tool-tip[data-tooltip-position="right"]::after {
			  left: calc(100% + 10px);
			}


			/* Pointers */

			.tool-tip[data-tooltip-position="top"]::before,
			.tool-tip[data-tooltip-position="bottom"]::before {
			  border-left: 7px solid transparent;
			  border-right: 7px solid transparent;
			  left: 50%;
			}

			.tool-tip[data-tooltip-position="top"]::before {
			  transform: translate3d(-50%, 10px, 0);
			}

			.tool-tip[data-tooltip-position="bottom"]::before {
			  transform: translate3d(-50%, -10px, 0);
			}

			.tool-tip[data-tooltip-position="top"]::before {
			  border-top: 7px solid #323a45;
			  bottom: calc(100% + 3px);
			}

			.tool-tip[data-tooltip-position="bottom"]::before {
			  border-bottom: 7px solid #323a45;
			  top: calc(100% + 3px);
			}

			.tool-tip[data-tooltip-position="left"]::before,
			.tool-tip[data-tooltip-position="right"]::before {
			  border-top: 7px solid transparent;
			  border-bottom: 7px solid transparent;
			  top: 50%;
			}

			.tool-tip[data-tooltip-position="left"]::before {
			  transform: translate3d(10px, -50%, 0);
			}

			.tool-tip[data-tooltip-position="right"]::before {
			  transform: translate3d(-10px, -50%, 0);
			}

			.tool-tip[data-tooltip-position="left"]::before {
			  border-left: 7px solid #323a45;
			  right: calc(100% + 3px);
			}

			.tool-tip[data-tooltip-position="right"]::before {
			  border-right: 7px solid #323a45;
			  left: calc(100% + 3px);
			}

			.tool-tip:hover::before,
			.tool-tip:hover::after {
			  opacity: 1;
			  z-index: 100;
			}

			.tool-tip[data-tooltip-position="top"]:hover::before,
			.tool-tip[data-tooltip-position="bottom"]:hover::before,
			.tool-tip[data-tooltip-position="top"]:hover::after,
			.tool-tip[data-tooltip-position="bottom"]:hover::after {
			  transform: translate3d(-50%, 0px, 0);
			}

			.tool-tip[data-tooltip-position="left"]:hover::before,
			.tool-tip[data-tooltip-position="right"]:hover::before,
			.tool-tip[data-tooltip-position="left"]:hover::after,
			.tool-tip[data-tooltip-position="right"]:hover::after {
			  transform: translate3d(0px, -50%, 0);
			}

}




.organization2 .in {width:100%; position:relative; display:inline-block; }

/*이사회*/
.organization2 .box {
	position:absolute; left:50%; top:0; margin-left:-90px; z-index:99;  
	display:flex; align-items:center; justify-content:center;   text-align:center; 
	width:180px; min-height:50px;
	background-color:#333; color:#fff;  border-radius:50px;
	padding:10px 0;  box-sizing:border-box; 
	font-size:1.1rem; letter-spacing:-.5px; font-weight:500; 
 }
/*CEO*/

.organization2 .box.type1 {width:150px; height:150px;  font-size:1.4rem; margin-left:-75px; border-radius:50%; background-color:#0168b7}
.organization2 .box.type2 {top:230px; border-radius:0; z-index:999 }



.organization2 .box.type2:after {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 1px solid rgba(255,255,255,.5);
     position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
	}

.organization2 .box.type1:after {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
	}
 

/*감사 전략추진실*/

.organization2 .box.type3 { background:none; padding:0;  width:15.5%;  top:143px;  margin-left:15%;   z-index:999}
.organization2 .box.type3 p {width:100%; border-radius:50px; background-color:#333; color:#fff;  text-align:center; padding:10px 0;  box-sizing:border-box; min-height:50px; font-size:1.1rem;   font-weight:500; display:flex; align-items:center; justify-content:center;}

.organization2 .box.type3.type3_1 {top:236px;  z-index:99}
.organization2 .box.type3.type3_2 {margin-left:0; left:auto; right:0;z-index:99  }
.organization2 .box.type3.type3_3 {top:220px; z-index:99 }
.organization2 .box.type3:after {width:185px; height:1px; background-color:#ddd; position:absolute; left:-185px; top:50%; content:'';  z-index:-9}  

 
 
.y_line {width:1px; height:330px; background-color:#ddd; position:absolute }
.x_line {width:83%; height:1px; background-color:#ddd; position:absolute; }
 
 
 
.organization2 ul {display:flex; gap:15px;  margin-top:370px; align-items:flex-start; justify-content:space-between;  width:100%; position:relative; z-index:9}
.organization2 ul li {width:100%; line-height:1.3em; margin-bottom:-1px; text-align:Center; background-color:#fff; box-sizing:border-box; position:relative }
.organization2 ul > li.type1 {width:12.5%}
.organization2 ul > li.type2 {width:50%}
.organization2 ul > li.type3 {width:25%}
.organization2 ul > li.type4 {width:12.5%}
.organization2 ul li p {background-color:#333; width:100%; max-width:150px; margin:0 auto;  font-size:1.15rem; box-sizing:border-box; padding:12px 0;   color:#fff; border-top:1px solid #fff; margin-bottom:80px; position:relative; z-index:99 }
.organization2 ul li p:after {width:1px; height:40px; background-color:#ddd; position:absolute; left:50%; bottom:-40px; content:'';  z-index:-9}  
.organization2 ul > li:before {width:1px; height:40px; background-color:#ddd; position:absolute; left:50%; top:-40px; content:''; z-index:-9}  


.organization2 .top_line {position:relative }  
.organization2 .top_line:before {content:''; width:1px; position:absolute;  left:50%; height:40px; top:-40px; background-color:#ddd }  

.organization2 div.flex {gap:10px; position:relative}
.organization2 div.flex div {width:100%; }

.organization2 .top_nbsp {padding-top:40px}


.organization2 div.flex:after {  height:1px; background-color:#ddd; position:absolute;  top:-40px; content:'';   }  
.organization2 li.type2 div.flex:after {width:76%; left:12%; }  
.organization2 li.type3 div.flex:after {width:52%; left:24%; }  

.organization2 h5 { position:relative; z-index:9999; display:flex; align-items:center; justify-content:center; height:40px; background-color:#333; color:#fff; font-size:1rem; font-weight:500 }
.organization2 ul.dep3 {margin-top:0; display:block}
.organization2 ul.dep3 li {width:100%; background-color:#f9f9f9; border-bottom:1px solid #ddd; margin-bottom:0; padding:8px 10px; box-sizing:border-box; color:#333 }
.organization2 ul.dep3 li:last-child {border-bottom:0 }
  

 
@media all and (max-width:1300px) {
		.pc_line {display:none}
		.sub_con.type2 {padding: 0 4%; max-width:100%;  box-sizing:border-box}
		.organization2 .box {width:200px; margin-left:-100px; font-size:1.05rem;  }

		.organization2 .box.type1 {width:120px; height:120px; margin-left:-60px;  font-size:1.2rem;}

		.organization2 .box.type2 {top:140px;}
		.organization2 li.type2 div.flex:after {width:75%; left:12.5%; }  
		.organization2 li.type3 div.flex:after {width:50%; left:25%; }  


		.organization2 .box.type3 {width:45%; max-width:180px;  top:230px ; margin-left:0;   right: 0;  left:0;  transform: translate(0, 0); }
		.organization2 .box.type3 p {font-size:.95em}

		.organization2 .box.type3 + .type3  {left:auto; right:0}
		.organization2 .box.type3.type3_1 {top:230px}
		.organization2 .box.type3.type3_2 {margin-left:0; left:0;  top:310px}

		.organization2 .box.type3:after {width:calc(46vw - 1px); left:0; right:auto   }  
 		.organization2 .box.type3.type3_1:after {left:auto; right:0 }  
 		.organization2 .top_nbsp {padding-top:0}

		.organization2 ul { gap:30px;  margin-top:420px; flex-wrap:wrap}
		.organization2 ul > li.type1 {width:100%}
		.organization2 ul > li.type2 {width:100%}
		.organization2 ul > li.type3 {width:100%}
		.organization2 ul > li.type4 {width:100%}
		.organization2 .box.type1:before {width:1px; height:300px; background-color:#ddd; position:absolute; left:50%; bottom:-300px; content:'';  z-index:-9}  
		.organization2 ul li.type1 p {margin-bottom:40px}
		.organization2 ul li.type4 p {margin-bottom:40px}
		.organization2 div.flex {gap:1px;  }

}


@media all and (max-width:700px) {
 		.organization2 div.flex {flex-wrap:wrap}
		.organization2 div.flex div  {width:calc(50% - 1px)}
		
		
		.organization2 li.type2 div.flex:after {width:50%; left:25%; }  
		.organization2 li.type3 div.flex:after {width:50%; left:25%; }  

 
}