
.sub_vi  {width:100%;  display:inline-block;  text-align:center;  box-sizing:border-box;  height:400px;  position:relative; display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; margin-top:-92px}
.sub_vi1  {background:url('/common/img/fc1.png') no-repeat center / cover , rgba(0, 0, 0, 0.5); background-blend-mode: multiply; }
.sub_vi2  {background:url('/common/img/subvi2.png') no-repeat 0 60% / cover , rgba(0, 0, 0, 0.2); background-blend-mode: multiply; }
.sub_vi3  {background:url('/common/img/subvi.png') no-repeat 0 26% / cover , rgba(0, 0, 0, 0.1); background-blend-mode: multiply; }
.sub_vi4  {background:url('/common/img/commu_vi.jpg') no-repeat center / cover , rgba(0, 0, 0, 0.3); background-blend-mode: multiply; }
.sub_vi h3 {font-size:3em; color:#fff; margin:40px 0 10px 0}
.sub_vi p {font-size:1.2em; color:#fff; font-weight:300; letter-spacing:0}

 @media(max-width:960px){
	.sub_vi  { margin-top:0}
	.sub_vi h3 {margin-top:0}

}

.guide {font-size:2.5rem; position:Relative; z-index:9; background-color:#fff; width:100%; display:inline-block; margin-bottom:50px; text-align:center}
.content  {margin:100px 0 130px 0; font-size:18px;  line-height:1.4}
.content .inner  {max-width:1240px }

hr.sub_hr {height:80px}
.content  h3 {font-size:1.5em; margin-bottom:20px}

.sub_menu  {font-size:1.2em; border-bottom:1px solid #ddd; background:#f9f9f9}
.sub_menu .inner {display:flex; align-items:center; width:100%; max-width:1300px; border:none}
.sub_menu h5 { text-align:center; width:200px;  flex-shrink:0;  display:inline-block; font-size:1.1em;line-height:65px;  font-weight:600; box-sizing:border-box; white-space: nowrap; border-right:1px solid #ddd; }
.sub_menu ul {display:flex; overflow-x:auto; padding-left:4%}
.sub_menu a {font-weight:400; white-space:nowrap;  overflow:hidden; box-sizing:border-box; display:inline-block; line-height:65px; padding:0 30px; position:relative; }
.sub_menu a::before {content:'▼'; top:-1px; left:-100%; display:inline-block; width:100%; text-align:center; position:absolute; line-height:10px; color:#2b8a8e; font-weight:600; font-size:12px; height:10px; transition: 0.4s all; }
.sub_menu a:hover {color:#2b8a8e; font-weight:600}
.sub_menu a:hover::before { left:0;  }

.sub_menu a.ov {color:#2b8a8e; font-weight:600}
.sub_menu a.ov::before {content:'▼'; top:-1px; left:0; display:inline-block; width:100%; text-align:center; position:absolute; line-height:10px; color:#2b8a8e; font-weight:600; font-size:12px; height:10px; }

.product_sub_menu a{line-height:normal;padding:13px 30px 5px 30px}
@media(max-width:959px){
		.guide {font-size:2rem; margin-bottom:30px; }

		.sub_menu h5 { display:none}
		.sub_menu ul { padding-left:10px}
		.sub_menu a {  line-height:53px; padding:0 15px; font-size:1.07rem }
		.product_sub_menu a{line-height:normal;padding:10px 15px 5px 15px}


}

.about {position:relative}
/* .about::after {position:absolute; top:51%; left:0; background:#f3f3f3; width:100%; height:100%; content:''; z-index:-1; }
 */

.about .box_wrap { display:flex; gap:5%}
.about .box_wrap .blue {color:#2b8a8e}

.about .box_wrap .imgbox {width:45%;  position:relative; flex-shrink:0;  }
.about .box_wrap .imgbox img {max-width:100%; width:100%; }
.about .box_wrap .imgbox p {width:calc(100% - 50px);  float:right;  height:calc(100% - 50px);  display:inline-block;  background:url('/common/img/intro_img.png') no-repeat center;  background-size:cover;  position:relative;  z-index:99;  border-radius:5px}
.about .box_wrap .imgbox .img02  { background:url('/common/img/intro_img.png') no-repeat center;  background-size:cover;   position:absolute;  left:0;  bottom:0;  z-index:9;  border-radius:10px; opacity:.2} 

.about .box_wrap .txtbox {font-size:1em; line-height:1.5; padding:30px 0}
.about .box_wrap b {font-size:1.5em; line-height:1.4}


@media(max-width:1241px){
  .content .inner  {padding:0 4%}
 
}

@media(max-width:959px){
	.about .box_wrap {flex-wrap:wrap}
	.about .box_wrap .imgbox {width:100%; height:250px; margin-bottom:60px}
	.about .box_wrap .txtbox {font-size:1em; }
 


}
 


.history .inner {position:relative;   }
.history p.year { font-size:3rem;line-height:.7;   margin-bottom:40px; font-weight:700; color:#2b8a8e}
.history p.year span {font-size:1.3rem; font-weight:400; width:100%; display:inline-block;  }




.history ul li { box-sizing:border-box;  position:relative;}
.history ul li:after {width:20px; height:20px; border:4px solid #2b8a8e; background-color:#fff; z-index:99; box-sizing:border-box;  content:''; position:absolute;  border-radius:50%; top:10px}
 
.history ul li div {  display:flex; width:100%;  margin:11px 0 }
.history ul li div b {width:100px;} 
.history ul li 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 ul li div b {order:2}
  .history ul li 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 ul li:after {width:15px; height:15px; left:0; top:3px}
    .history ul li p.year { width:calc(100% - 30px); margin-left:auto; font-size:1.6rem;   margin-bottom:15px; }
    .history ul li div b {width:85px;} 
    .history ul li div p {width:calc(100% - 85px);} 

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

}




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

.one_point  {position:absolute; font-size:1rem; color:red; text-align:center; line-height:1em;/* background-color:#fff;  */width:1.1vw; height:1.1vw;  }
.one_point span.p {width:1.1vw; top:0; left:0; position:absolute; vertical-align:middle; height:1.1vw; border-radius:50%; border:4px solid #2b8a8e; 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:1500px) {

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

@media all and (max-width:900px) {
      .one_point {font-size:0}

}


 

/* 사업소개 */
 @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:80px;
			  padding:10px;
			  text-align: left;
			  font-size:.9em;
			  line-height:1.4em;
			  text-transform: none; 
			 
			}

			.tool-tip.tip1::after {content:'China'}
			.tool-tip.tip2::after {content:'Japan'}
			.tool-tip.tip3::after {content:'Taiwan'}
			.tool-tip.tip4::after {content:'Vietnam'}
			.tool-tip.tip5::after {content:'Thailand'}
			.tool-tip.tip6::after {content:'UAE'}
			.tool-tip.tip7::after {content:'Australia'}
			.tool-tip.tip8::after {content:'India'}
			.tool-tip.tip9::after {content:'Saudi Arabia'}
			.tool-tip.tip10::after {content:'Iran'}
			.tool-tip.tip11::after {content:'Turkey'}
			.tool-tip.tip12::after {content:'Bulgaria'}
			.tool-tip.tip13::after {content:'Rumania'}
			.tool-tip.tip14::after {content:'Italy'}
			.tool-tip.tip15::after {content:'France'}
			.tool-tip.tip16::after {content:'United Kingdom'}
			.tool-tip.tip17::after {content:'Sweden'}
			.tool-tip.tip18::after {content:'Germany'}
			.tool-tip.tip19::after {content:'Czech Republic'}
			.tool-tip.tip20::after {content:'Canada'}
			.tool-tip.tip21::after {content:'USA'}
			.tool-tip.tip22::after {content:'Brazil'}
			.tool-tip.tip23::after {content:'Tanzania'}




			.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);
			}

}


.certificate ul {width:100%; display:flex; flex-wrap:wrap;   }
.certificate ul li {width:24%; margin-right:1.3%; border:1px solid #ddd; text-align:center;  box-sizing:border-box  }
.certificate ul li:nth-child(4n) {margin-right:0}
.certificate ul li:nth-child(n + 5) {margin-top:20px}
.certificate ul li div.img_div {width:100%;  display:inline-block}
.certificate ul li div.img_div img {width:100%}
.certificate ul li h4 { width:100%; margin:7px 0 11px 0;  letter-spacing:0; font-size:1em; font-weight:600; color:#222; }


@media all and (max-width:900px) {
		.certificate ul {justify-content:space-between}
		.certificate ul li {width:48%; margin-right:0%; padding:0; border:0}
		.certificate ul li:nth-child(n + 3) {margin-top:20px}


}
.product img {max-width:100%}
.product hr.sub_hr {height:40px}
 .product .flex div.img_box {width:40%; border:1px solid #ddd; text-align:center}
.product .flex div.t_box {width:55%; margin-left:auto}
.product .flex div.t_box b {font-size:1.2em; display:inline-block; width:100%; margin-bottom:20px}


.product .product_top {background-color:#111}
.product .product_top div.img_box {background-color:#fff; display:flex; align-items:center; justify-content:center}
.product .product_top div.t_box {position:relative; width:60%; box-sizing:border-box; padding:70px 50px; display:flex; flex-wrap:wrap;  align-content:center; color:#fff; overflow:hidden}
.product .product_top div.t_box img {position:absolute; right:0; top:0; z-index:0; opacity:.2}
.product .product_top div.t_box p {position:relative; z-index:9}
.product .product_top div.t_box b {position:relative; z-index:9; font-size:1.5em;  }


@media all and (max-width:900px) {
.product .product_top{display:block;}
.product .product_top div.img_box{width:100%}
.product .product_top div.t_box{width:100%;padding:30px}
}