/**********서브************/


 .sub_vi {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow:hidden;
  height:400px;
}



  .sub_vi img {
  min-width:100%;
  margin-top:-100px;
  will-change: transform;
  animation-duration: 10s;
  animation-name: background-image-animation;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: linear;
  transform: translateX(0) scale(1);

}

@keyframes background-image-animation {
  0% {
    transform:  scale(1.2);
  }
  100% {
    transform:  scale(1);
  }
}


.sub_vi div {width:100%; text-align:center; color:#fff;  display:inline-block;  position:absolute; top:50%; left:50%;  transform: translate(-50%, 0);  box-sizing:border-box; padding:0 5% }
.sub_vi b {font-size:3rem; font-weight:700; font-family:'Montserrat';}
.sub_vi p {font-size:1.3rem; font-weight:500; }

@media (max-width:900px) {

.sub_vi div {  transform: translate(-50%, -15%);  }

}

 ul.sub_menu {width:100%; margin-bottom:5%; display:flex; margin-top:-20px; position:relative}
 ul.sub_menu li {  background-color:#f9f9f9; text-align:center; width:50%; line-height:50px; font-size:1.1rem; color:#333; box-sizing:border-box;  }
 ul.sub_menu li a {width:100%; display:inline-block; transition: all 0.3s ease-out;}
 ul.sub_menu li a:hover {background-color:#002752; color:#fff}

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

 .sub_in {width:100%; display:inline-block;}
 .sub_in h2.guide {font-size:2.5rem; font-weight:700; letter-spacing:-3px;  margin-bottom:40px; text-align:center;}


.content {width:80%; max-width:1240px; margin:0 auto}

.navigatonBox {
  width:100%; float:left; position:relative; border-bottom:1px solid #ddd;
}


.buttonGroup {
  overflow-x: auto;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
}
.navButton, .option {
  display: inline-block;
  margin-right:12px;
  cursor:default;
}

.navButton {}
.navButton a {font-size:0.98em; line-height:45px; font-weight:400; color:#777; }
a.button_ov {font-weight:600; color:#333 !important;  }

.navButton:last-child {
  margin-right:20px;
}
.navButton:first-child {
  margin-left:20px;
}
.optionGroup {
  width:100%;
  height:100px;
  position:absolute;
  top:50px;
  left:0;
}

.option {
  position:absolute;
  top:0;
  left:0;
  padding: 5px 10px;
  border:1px solid #DDD;
  border-radius:3px;
}

.option p {
  margin:0 0 5px;
  white-space: nowrap;
}

.option p:hover {
  background-color:#EEE;
}

.arrow {
 display:none;
  width:20px;
  height:15px;
  position:absolute;
  top:15px;
  background-color:white;
}

.arrow::before {

  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:100% 100%;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwNiAzMDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2hldnJvbi1yaWdodCI+CgkJPHBvbHlnb24gcG9pbnRzPSI5NC4zNSwwIDU4LjY1LDM1LjcgMTc1Ljk1LDE1MyA1OC42NSwyNzAuMyA5NC4zNSwzMDYgMjQ3LjM1LDE1MyAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.arrow.left {
  left:0;
  transform:rotate(180deg);
}
.arrow.right {
  right:0;
}

 @media (min-width:900px)  {
 .sub_in h2.guide2  {margin-top:5vw}
 }

 @media (max-width:1200px) {
	.content {width:90%; margin:0 auto}

	.sub_vi {height:250px}


	.sub_vi b  {font-size:2rem}
	.sub_vi p {font-size:1rem}

	.sub_in {margin-top:50px}
	 .sub_in h2.guide  {font-size:2rem;  letter-spacing:-2px; }


  }



/*컨텐츠*/


ul.bl-img {  width:99%; display:flex;  }
ul.bl-img li { padding:10px; border:1px solid #ddd; margin-right:-1px; box-sizing:border-box; position:relative; font-size:.97rem}
ul.bl-img li img {width:100%}

div.ov_wrap {position:absolute;  z-index:9; bottom:0px;left:0px; top:0px; width:100%; height:100%;  background-color:rgba(0,0,0,.5); }
div.ov_wrap {display:none;}
div.ov_wrap p {display:inline-block; }
ul.bl-img li:hover div.ov_wrap {display:flex; align-items:center; width:100%;}
ul.bl-img li:hover div.ov_wrap p {width:100%; text-align:center; color:#fff; height:100%;}
ul.bl-img li:hover div.ov_wrap  p  a { width:100%; height:100%;  display:inline-block; }
ul.bl-img li:hover div.ov_wrap p a span {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); color:#fff !important; font-size:1rem; font-weight:600; }

 @media (max-width:900px) {
	ul.bl-img { flex-wrap:wrap}
	ul.bl-img li {width:50%; margin-bottom:-1px}

}



.text_box {font-size:1rem; line-height:1.6em; color:#555; letter-spacing:0;}
.text_box b {font-weight:600; color:#333; font-size:1.2rem}

.basic_ul {width:100%}
.basic_ul li {font-size:1.03rem; color:#444; margin-bottom:3px}

.t1 {font-size:2rem; line-height:1.5em; font-weight:700; color:#222;  letter-spacing:-1.5px }
.t2 {font-size:1.3rem; margin-top:10px; line-height:1.5em;  font-weight:500; color:#222;}
.t3 {font-size:1.6rem;   line-height:1.5em;  font-weight:700; color:#333;}
.t4 {font-size:1.4rem;   line-height:1.5em;  font-weight:500; color:#333;}
.content_br {width:100%; height:60px; }
.content_br2 {width:100%; height:40px; }
 
.t4 {font-size: 1.15rem;line-height: 1.5em; color: #444;}
.p_t {font-size:1.5rem;  margin-top:10px; line-height:1.5em; letter-spacing:-1.5px;  font-weight:600; color:#222;}



.line_ul li  {width:100%; padding:0; border:none; padding-left:12px; box-sizing:border-box;font-weight:400;  text-align:left; font-size:1.05em; color:#555; background:url('/common/img/line_icon.png') no-repeat; background-position:0 10px;line-height:1.4em; margin-bottom:5px}




 @media (max-width:1200px) {
	.text_box {font-size:0.95rem; line-height:1.5em; color:#555; letter-spacing:0;}
	.text_box b {width:100%; display:block; padding-bottom:10px; line-height:1.4em}
	.t1 {font-size:1.6rem;}
	.t2 {font-size:1.15rem; }
	.t3 {font-size:1.3rem;  }
	.t4 {font-size:1rem;  }
  .   p_t {font-size:1.3rem; }

   .basic_ul li {font-size:1rem}

  }

 @media (max-width:900px) {
		.content_br {height:40px; }
		.content_br2 {height:30px; }
		.t1 {font-size:1.3rem;  letter-spacing:-.7px   }
		.t2 {font-size:1.05rem; }
		.t3 {font-size:1.2rem; }
         .p_t {font-size:1.15rem;  letter-spacing:-.7px    }
		.basic_ul li {font-size:0.97rem;    }


}

.history {width:100%; padding:20px 0;  }
.history li {display:flex; margin:35px 0; align-items:center;  font-size:1.1rem; line-height:1.4em; color:#444 ;  }
.history li p:nth-child(1) {width:190px; font-size:1.5rem; font-family: 'Montserrat'; font-weight:500; color:#002752 }
.history li p.one {width:30px;  font-size:1.7rem; text-align:Center;color: #002752;}
.history li p:nth-child(3) {width:calc(100% - 220px);  box-sizing:border-box; padding-left:8%}
.history_line  {width:1px; height:100%; background-color:#002752; display:inline-block; position:absolute; left:205px; top:0}

 @media (max-width:1200px) {

	.history li {  font-size:1rem; }

}

 @media (max-width:900px) {
		.history {  margin-bottom:-20px}
		.history li {align-items:flex-start; font-size:1.05rem; margin:0 0 20px 0; }
		.history li p:nth-child(1) {width:140px; font-size:1.05rem    }
		.history li p:nth-child(1):before {
		content: '◆';
			font-size: 1.2rem;
			position: Relative;
			z-index: 99999;
			color: #002752;
			margin-right: 13px;
			width: 25px;
			text-align: center;
			display: inline-block;
			background-color: #fff;
		}

		.history li p.one {display:none }
		.history li p:nth-child(3) {width:calc(100% - 140px); padding-left:0; font-size:0.97rem}
		.history_line  {left:12px}


}
.product_box {width:100%;  border-top:1px solid #ddd; }
.product_box .in {width:100%; font-size:1rem; color:#555; line-height:1.4em; border-left:1px solid #ddd; display:flex; flex-wrap:wrap; text-align:center;}
.product_box .in  img {width:100%}
.product_box .in  h4 {font-size:1.3rem; line-height:1.25em; padding-top:10px; color:#333; font-weight:700;  }
.product_box .in div.box1 {width:25%; border-right:1px solid #ddd; border-bottom:1px solid #ddd;  padding:30px; box-sizing:border-box;  cursor:pointer}
.product_box .in div.box1 h4 {margin-bottom:5px}





.product .box2 {width:100%;display:none; width:100%; order:5; background-color:#f9f9f9; border-right:1px solid #ddd; border-bottom:1px solid #ddd;  text-align:left;}

.product_view {width:100%; display:flex; justify-content:space-between; box-sizing:border-box; padding:50px 30px;}
.product_view div.img_box {width:30%;}
.product_view div.img_box img {width:100%;}

.product_view div.t_box {width:60%; font-size:1rem; line-height:1.4em; color:#444  }
.product_view div.t_box h3 {font-size:1.5rem; color:#222 }
.product_view div.t_box table {width:100%; margin:20px 0; }
.product_view div.t_box table th {width:30%; background-color:#333; color:#fff;  border:1px solid #ddd; padding:7px; font-weight:400;}
.product_view div.t_box table td {border:1px solid #ddd; background-color:#fff; padding:7px; }



@media (min-width:900px) {

	.product_box .in:nth-child(2n+1) div.box1:nth-child(5) {width:50%;display:flex; align-items:center; box-sizing:border-box; }
	.product_box .in:nth-child(2n+1) div.box1:nth-child(5)  div  {width:45%; display:inline-block;}
	.product_box .in:nth-child(2n+1) div.box1:nth-child(5) p {width:55%;  text-align:left;  }



	.product_box .in:nth-child(2n) div.box1:nth-child(1) {width:50%;  display:flex; align-items:center; box-sizing:border-box; }
	.product_box .in:nth-child(2n) div.box1:nth-child(1)  div  {width:45%; display:inline-block;}
	.product_box .in:nth-child(2n) div.box1:nth-child(1) p {width:55%;  text-align:left;}


}



 @media (max-width:1200px) {
	.product_box .in {font-size:1rem; line-height:1.4em}
	.product_box .in  h4 {font-size:1.1rem }

 }
 @media (max-width:900px) {
	 .product_box .in { flex-wrap:wrap; font-size:.97rem  }
	 .product_box .in div.box1 {width:100%}
     .product_box .in div.box1 img {max-width:200px}
	 .product_box .in  h4 {font-size:1.1rem; }


	.product_view {flex-wrap:wrap; padding:5%}
	.product_view div.img_box {width:100%; text-align:center}
	.product_view div.img_box img {width:70%}
	.product_view div.t_box {width:100%; margin-top:30px }

	 .product .box2 {display:none !important}

  }



.tech_wrap {width:100% ; position:relative; }
.tech_line {width:1px ; height:100%; background-color:#002752;  position:absolute; top:0; left:50%}
.tech  {width:100%;}
.tech li {width:100%; display:flex;  box-sizing:border-box; align-items:center; }
.tech li h3 {font-size:1.7rem; position:relative; z-index:999999999999999;  background-color:#fff; width:25%;  text-align:center; line-height:1.3em ; color:#002752; padding:3px 20px}
.tech li div.img_box {width:40%;  min-height:150px }
.tech li div.img_box img {border:1px solid #ddd; box-sizing:border-box;  max-width:100% }

.tech li p {width:40%; }

.tech li.br_li {text-align:Center; font-size:1.7rem; display:block; position:Relative; z-index:99999; color:#002752 }

.tech_box {width:100%; position:relative;  display:flex; align-items:center; justify-content:space-between; margin-bottom:5vh }
.tech_box :last-child {margin-bottom:0}
.tech_box div.img_box {width:50%; order:1; height:330px; background-color:#ddd; display:inline-block}
.tech_box div.t_box {width:50%; order:2; padding-left:5%; box-sizing:border-box;   }
.tech_box div.t_box h3 {width:100%; font-size:1.8rem; margin-bottom:10px }
.tech_box div.t_box p {width:100%; }

.tech_box:nth-child(2n) div.img_box { order:2;   }
.tech_box:nth-child(2n) div.t_box { order:1; padding-left:0; padding-right:5%; text-align:right;  }

.tech_bg_box {width:100%; display:inline-block; background:url('/common/img/tech04_bg.png') no-repeat center; background-size:cover; background-color:#333; box-sizing:border-box; padding:8% 55% 8% 5%; color:#fff; font-size:1.1rem; line-height:1.5em}
 .tech_bg_box  p {position:relative; z-index:99999 }

.tech_t_p { font-size:1.15rem; line-height:1.5em; color:#444;   }



.basic_btn {width:170px; text-align:center;  display:inline-block; transition: all 0.3s ease-out; position:relative; overflow:hidden; }
.basic_btn span {border:1px solid #002752;  box-sizing:border-box; width:100%; display:inline-block; color:#002752 !important;  font-size:0.95em; line-height:45px;  font-weight:500 }

.basic_btn::after {width:100%; height:100%; display:inline-block ;
 position:absolute;
 left:-100%; top:0;
 content:'+바로가기';
 background-color:#002752;
 color:#fff;
 font-size:1em; line-height:45px;  font-weight:500;  transition: all 0.5s ease-out; }
.basic_btn:hover::after  {left:0;  }



@media (min-width:900px) {

	.tech li.reverse p {text-align:right; order:1 }
	.tech li.reverse div.img_box {order:3 }
	.tech li.reverse h3 {order:2 }
}

 @media (max-width:1200px) {
	.tech li h3 {font-size:1.5rem}
    .tech_box div.t_box h3 {font-size:1.5rem}
     .tech_t_p { font-size:1rem;  }

}

 @media (max-width:900px) {
	.tech li { flex-wrap:wrap; padding-bottom:20px;    }
	.tech li h3 {width:100%; padding:0; text-align:left; margin-bottom:10px; font-size:1.2rem }
	.tech li h3:before {content:'◆';   font-size:1.3rem;   position:Relative; z-index:99999; color:#002752; margin-right:20px; width:25px; text-align:center; display:inline-block; background-color:#fff;}


	.tech li div.img_box {width:100%;  background-color:#fff; position:relative;  z-index:999 ; text-align:center; min-height:auto ; }
	.tech li p {width:100%;  box-sizing:border-box; padding-left:45px}
	.tech li.reverse p {text-align:left; }
    .tech li div.r {text-align:center !important; }

	.tech_line {left:13px; }
     .tech li.br_li {display:none}

	.tech_box {flex-wrap:wrap;  }
    .tech_box * {width:100% !important}
    .tech_box div.img_box {height:200px}
	.tech_box div.t_box {margin-top:20px;  padding-left:0; position:static;  transform: translate(0, 0)}

	.tech_box div.t_box h3 {width:100%; font-size:1.2rem; margin-bottom:10px }

	.tech_box:nth-child(2n) div.img_box { order:1;   }
    .tech_box:nth-child(2n) div.t_box { order:2; padding-left:0; padding-right:0; text-align:left;}

	.tech_bg_box {  padding:13% 6%; font-size:1rem; }

	.tech_bg_box:after {width:100%; height:100%; background-color:rgba(0,0,0,.6); position:absolute; top:0; left:0; content:''; display:inline-block}
}


.service .box_wrap {width:100%; display:flex; flex-wrap:wrap; }
.service  .box1 {width:25%; background-color:#fff; border:2px solid #ddd; border-right:none;  color:#333; font-weight:500;   display:flex; cursor:pointer; text-align:center;  box-sizing:border-box;  padding:15px; align-items:center}


.service  .box1:nth-child(7) {border-right:2px solid #ddd}
.service  .box1 p {width:100%; text-align:center; font-size:1.2rem; line-height:1.15em; letter-spacing:-1px;}
.service  .box1 p  img {height:80px; margin-bottom:2px;}
.service  .box2 {width:100%;display:none; width:100%; background-color:#002752; color:#fff; font-size:1.05rem; line-height:1.4em; order:5; margin-top:-2px; padding:30px 3%; }
.service  .box2 b {font-size:1.05em; display:block; margin-bottom:5px}

.map_box {width:100% ; display:flex; align-items: flex-end; justify-content:space-between}
.map_box iframe {width:50%; height:300px}
.map_box div {width:48%; font-size:1rem; line-height:1.5em; color:#444}
.map_box div b {font-size:1.15em; display:block; margin-bottom:10px}


 @media (max-width:900px) {

	.service  .box1 p {font-size:1rem}
	.service  .box1 p  img {height:50px; margin-bottom:5px;}

   .service  .box2 {font-size:0.97rem}


   .map_box {flex-wrap:wrap}
	.map_box iframe {width:100%; height:200px}
	.map_box div {width:100%; margin-top:20px; font-size:0.95rem}
	.map_box div b {font-size:1.1em;}


}

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

.service  .box1 p  img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }
}


.pass_box {width:100%; max-width:500px; margin:0 auto; background-color:#fff; border:1px solid #002752; box-sizing:border-box; padding:3%; border-radius:3px; font-size:0; line-height:0}
.pass_box p {font-family: 'Montserrat';  font-size:2rem; color:#002752;   display:inline-block;  text-align:Center; width:100%; line-height:1em; font-weight:700}
.pass_box input {border:1px solid #ddd; margin:20px 0 20px 0; padding-left:10px; box-sizing:border-box; font-size:0.97rem; height:47px; width:100%}
.pass_box a {background-color:#002752;  display:inline-block; text-align:center; color:#fff !important; line-height:40px; width:50%; box-sizing:border-box; font-size:1rem; font-weight:500}
.pass_box a:last-child {border-left:2px solid #fff; background-color:#111}



.box_ul {width:100%; display:flex; justify-content:space-between}
.box_ul li {width:24%;  background-color:#f5f5f5;   border-radius:3px; padding:30px; box-sizing:border-box; display:flex; align-items:center; justify-content:center}
.box_ul li p {width:100%; text-align:center; font-size:1.2rem; color:#222; line-height:1.3em}
.box_ul li p  span.no {font-size:1.1em; font-weight:600; width:100%; display:block; margin-bottom:10px; font-family:'Montserrat';}

@media all and (max-width:900px) {
.box_ul {flex-wrap:wrap; margin-top:5px !important}
.box_ul li {width:49%;  padding:20px;  margin-top:10px; }
.box_ul li p {  font-size:1.05rem; color:#222; line-height:1.3em}
.box_ul li p  span.no { margin-bottom:5px}

}


.border_box {border:1px solid #ddd; display:inline-block; width:100%; padding:20px; box-sizing:border-box}