@charset="euc-k";

*, *:after, *:before { margin:0; padding:0; font-family:'Malgun Gothic'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break:keep-all;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
li { list-style:none; float:left;}
a { text-decoration:none; color:#232323; text-decoration: none; outline: none;}
p {letter-spacing:-1px;}
img { border:none;}
body { overflow-Y:scroll; position:relative;   }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
#logo { width:250px;  margin:0 auto;}
#logo img { width:100%; }




.dropbtn {
    color: #000;
	background-color:#fff;
    padding: 16px 0;
    font-size: 1.2em;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
	width:160px;
	text-align:center;
}

.dropdown-content {
    display: none;
    position: absolute;
    background:rgba(3,78,135,0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color:#fff;
    padding: 10px 0px;
    text-decoration: none;
    display: block;
	font-size:0.8em;
}

.dropdown-content a:hover { background:rgba(3,78,135,1);  }

.dropdown:hover .dropdown-content {
    display: block;
   
}

.dropdown:hover .dropbtn {
   color: #034e99;
}



/********header********/
.header{position:relative; width:100%; transition:all 1s; z-index:1;  border-top:10px solid #034e99;  background-color:#fff; border-bottom: 2px solid #034e99;}
.top {width:100%; height:90px; background:rgba(255,255,255,5); opacity:0.6;
	  position:relative;
}
.down{position:fixed; top:-100px; transform: translate(0, 100px);}


.gnb { overflow:hidden; border-bottom: 2px solid #034e99; padding:10px 0 5px 0; position:relative;}
.gnb ul { position:absolute; top:20%; right: 0%; font-size:0.8em; width:20%; }
.gnb ul li { padding: 0 2%; }
.gnb ul a { color:#034e99; }



.ptn { overflow:hidden; }
.ptn img { width:100%;  height:15px;}
.lnb { width:1000px; margin:0 auto;}

.sub_lnb{position: absolute;  top:150px;   width:150px; opacity: 0;}



.sub_lnb li{line-height: 30px; float:none; margin-bottom:1px; background:rgba(3, 78, 153, 0.8); letter-spacing:-1px;}
.sub_lnb li a{font-size: 0.9em; color:#fff;}




@media only screen and (max-width:1200px){
	h1 { padding-left:35%;  }
	
	
}
@media only screen and (max-width:1024px){
	.gnb ul, .lnb, .ptn { display:none; }
	#logo { margin:0 auto;}
}
@media only screen and (max-width:480px){
	#logo { width:50%; margin:0 auto;}
}


/*******footer*********/
#footer { overflow:hidden; background-color:#091420; color:#fff;  padding:2% 0; }
#footer ul li { float:none; text-align:center; }
@media only screen and (max-width:480px){
	#footer { font-size:0.8em;}
}


/*******sections*********/
#section { width:100%; overflow:hidden; }
#section ul { overflow:hidden; background-color:#f0f0f0; }
#section >ul >li:first-child { width:30%;  overflow:hidden; color:#fefefe; background-color:#0060a1; position:relative;}
#section >ul >li:first-child div { position:relative; }
#section >ul >li:first-child img { width:100%; padding:10% 0; }
#section >ul >li:first-child  .quick_f01 { font-size:1.6em; position:absolute; top:6%; left:50%; }
#section >ul >li:first-child  .quick_f02 { font-size:0.9em; position:absolute; top:20%; left:50%; }
#section >ul >li:first-child  .quick_f03 { font-size:1.1em; width:50%; line-height:2.2em; text-align:center; 
											background-color:#005792;color:#fff; position:absolute; bottom:14%; left:45%;
											border:1px solid #4289b9;}



#section >ul >li:last-child { width:70%; overflow:hidden;  }
#section >ul >li:last-child div { font-size:1.6em; padding:2%; }
#section >ul >li:last-child  ul {  width:100%; padding-left:2%; overflow:hieen; }
#section >ul >li:last-child  ul li {  width:20%; background-color:#fff; overflow:hidden; border:1px solid #aeaeae; padding:2% 1% 0 1%;
										margin:0 2% 0 0;}
#section >ul >li:last-child  ul li img {  width:100%; }

#section >ul >li:last-child  .quick_p01 { background-color:#0060a1; color:#fff; font-size:1.2em; padding:1%; }
#section >ul >li:last-child  .quick_p02 { font-size:1.2em; color:#353535; }
#section >ul >li:last-child  .quick_p03 { font-size:0.9em; color:#353535; }
#section >ul >li:last-child  .quick_p04 { font-size:2.0em; color:#353535; }

@media only screen and (max-width:1024px){
	#section >ul >li:first-child img { width:70%; padding:0; }
	#section >ul >li:first-child { width:100%; }
	#section >ul >li:last-child { width:100%; }
	#section >ul >li:last-child  ul li {  width:45%; }
	#section >ul >li:first-child  .quick_f01 {  top:25%; left:0; right:10%; text-align:right; }
	#section >ul >li:first-child  .quick_f02 {  top:40%; left:0; right:10%; text-align:right; }
	#section >ul >li:first-child  .quick_f03 {  width:35%;  bottom:25%; left:58%;  }
}
@media only screen and (max-width:480px){
	#section >ul >li:last-child  ul li {  width:100%; text-align:center; }
	#section >ul >li:last-child div { padding:5% 0; text-align:center; }
	#section >ul >li:last-child ul li img { width:70%; }
	#section >ul >li:first-child img { width:100%; padding:0; }
	#section >ul >li:first-child  .quick_f01 { width:100%; top:5%; left:0; text-align:center; }
	#section >ul >li:first-child  .quick_f02 { width:100%; top:25%; bottom:0; left:0; text-align:center; font-size:0.8em;}
	#section >ul >li:first-child  .quick_f03 { bottom:10%; left:0; right:0; margin: 0 auto;}
}




#main { width:100%;  overflow:hidden;  }

#main ul{ width: 100%; height:750px; }
#main ul li{ width: 100%; height:100%; float: left; position: relative;}
#main ul li a{ display: inline-block; position: relative; overflow: hidden; width: 100%; height: 100%;}
/*#main ul li p{position: absolute; width: 100%; text-align: center; top: 50%; font-size: 2.0em; color: #fff; font-weight: 600;}*/
#main ul li a img{ position: absolute; width:100%;}

@media only screen and (max-width:1200px){
	#main ul{ width: 100%; height: 400px; }
}
@media only screen and (max-width:640px){
	#main ul{ width: 100%; height: 150px; }
}





/*******media*********/
#media { width:100%; overflow:hidden; margin-top:5%; padding:5% 10%; border-top:1px solid #0060a1; }
#media  img { width:30%; margin:0 1%; }



@media only screen and (max-width:1200px){
	#media { padding:5% 0%; }
	#media ul { width:100%; }
	#media ul li { width:30%; margin:0 2% 0 1%;}
	#media ul li:last-child { margin:0 0 0 2%;}
}



.title {
	width:100%; height:auto; 
	overflow:hidden;
	
}
.title div { width:100%; overflow:hidden; position:relative;  background:rgba(236, 238, 242, 0.8);}
.title ul { width:1200px; margin:0 auto; }
.title ul li { padding:1% 0; text-align:center; border-right:1px solid #bdbec2;}
.title ul li a { display:block; width:100%; height:100%;}
.title ul li:first-child { border-left:1px solid #bdbec2; }
.title ol {
	width:100%;
	text-align:center;
	padding:5% 0% 5% 0%;
	font-size:3.0em;
	float:left;
}
.title ol li:nth-child(1) { width:0%; display:none;}
.title ol li:nth-child(2) { width:100%; }
.title ol li:nth-child(2) img { display:none; }
.title ol li:nth-child(3) { width:0%; display:none;}

.title ol a {
	color:#fff;
}

.title div ul:last-child { clear:both; }





.company_title{background-image:url(../company/image/title.jpg);}
.company_title ul li { width:25%;}
.products_title{background-image:url(../products/image/title.jpg);}
.products_title ul li { width:14%;  }
.customer_title{background-image:url(../customer/image/title.jpg);}
.customer_title ul li { width:33.333%;  }
.facilities_title{background-image:url(../facilities/image/title.jpg);}
.facilities_title ul li { width:33.333%;  }
.inquary_title{background-image:url(../inquiry/image/title.jpg);}
.inquary_title ul li { width:100%;  }
.title>img {
	width:100%; max-width:120%;
}

@media only screen and (max-width:1024px){
	.title ul li { width:100%; padding: 2% 0;border-bottom:1px solid #fefefe; }
	.title ol {	font-size:2.0em;}
	.title ol li:nth-child(1) { width:15%; display:block; }
	.title ol li:nth-child(2) { width:70%; }
	.title ol li:nth-child(2) img { display:inline; }
	.title ol li:nth-child(3) { width:15%; display:block; }
}











.contents {  overflow:hidden; width:100%; padding:2% 0; }

.contents {   }
		.intro { text-align:center;  padding:4% 0;}
		.intro li{ float:none;}
		.intro li:first-child { color:#b2b2b2; letter-spacing:5px; font-size:1.2em; }
		.intro li:nth-child(2) { font-size:2.0em; }
		.intro li:nth-child(3) { width:1000px; margin:0 auto; text-align:center; }
		
@media only screen and (max-width:1200px){
	.contents { padding:2%; }
	.title ul { width:100%; }
	.intro li:nth-child(3) { width:100%; font-size:0.9em;}
}		
@media only screen and (max-width:640px){
	.intro li:nth-child(3) {  font-size:0.9em;}
}			
		


/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/






.company { width:1200px; margin:0 auto;}

/*인사말*/
.greeting img { width:100%; }
.greeting>p { text-align:center; font-size:1.6em; color:#034e99; font-weight:100; padding-bottom:3%; }
.greeting ul li { float:left; line-height:1.6em;}
.greeting ul li:first-child { width:45%; }
.greeting ul li:last-child {  width:55%; }
/*연혁*/
.history ul { text-align:center; padding:1% 0%;}
.history ul li { float:none;}
.history ul li:first-child { font-size:1.8em;}
.history ul li:last-child { font-size:0.9em;}
/*인증서*/
.certification { text-transform:capitalize;  }
.certification ul li { text-align:center; width:25%; }
.certification ul li img { width:100%; }
/*오시는길*/
.direction {  border-top:7px solid #034e99;}
		

@media only screen and (max-width:1200px){
	.company { width:100%;}
}


@media only screen and (max-width:640px){
	.greeting ul li:first-child { width:100%; }
	.greeting ul li:last-child {  width:100%; }
	.certification ul li { width:50%;  font-size:0.8em;  }
}






/******************************************************************************************/
/******************************************************************************************/



.croquis { position:relative; z-index:-1; }
.croquis img{  position:absolute; top:0; width:100%; }

.products { position:relative; width:1200px; margin:0 auto;  }

.products > img {  width:100%;  }
.products>div { padding-top:10%; }
.products>div>p { font-size:1.6em; color:#034e99; padding:2% 0;}

/*슬라이드*/

.nun_slides { display:none; }
/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #006db7;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*그래프 공통*/
.graph { border-top:4px solid #437bb3; border-bottom:2px solid #437bb3; overflow:hidden;   }
.graph ul {  border-right: 1px solid #ceddeb; }
.graph ul:last-child {  border-right: 0px; }
.graph ul li {  border-bottom:1px solid #ceddeb;  padding:5% 0; text-align:center;}
.graph ul li:last-child { border-bottom:0px;  }
/*그래프*/
.graph2 {  width:50%; }
.graph2 ul {  width:50%; float:left; }
.graph2 ul:first-child {  background-color:#f0f5f9; }
.graph4 {  width:100%; }
.graph4 ul {  width:25%; float:left; }
.graph4 ul li:first-child { background-color:#f0f5f9; padding:7% 0; }



.details { overflow:hidden; }
.details ul li  { text-align:center; position:relative; float:left; }
.details2 ul li  { width:45%; margin:1% 2.5%; }
.details3 ul li  { width:30%; margin:1% 1%;}
.details ul li img { width:100%; }
.details ul li p {  position:absolute; bottom:3px; padding:2% 0; width:100%; color:#fff; background-color:#000; opacity:0.7; }



.feature ul li { float:none;  padding:1% 0;  text-indent:-13px; padding-left:10px;}

.specifications>ul>li:nth-child(n+2) { color:#034e99; padding: 1% 0 0 0;  }
.specifications ul li { float:none;   }
.specifications ul li img { width:100%; }
.specifications ul li:


.products_media video { width:100%;  }



.cant ul li { text-align:center;}
.cant ul li img{ width:100%; }
.cant ul li { width:40%; margin:0 5%; text-align:center;}

.etc div ul li{ width:50%;  line-height:28px; padding:5%;}
.etc div ul li img { width:70%; }
.etc div img {width:100%; }


.options img {width:100%;}
.options { line-height:22px; }
.options > ul > li { width:33.333%; }
.options > ul > li:first-child ul li:first-child{  border-top:4px solid #467db4;  border-bottom:1px solid #467db4;}
.options > ul > li:first-child { }
.options > ul > li ul li { width:100%; padding:2% 0; }
.options > ul > li ul li:nth-child(n+2) { font-size:0.9em;}



.options ul li:nth-child(n+2) ul li:first-child { border-top:4px solid #a6a6a6; border-bottom:1px solid #a6a6a6;  }
.options div { float:left; width:50%; padding:4% 0;  text-align:center;}
.options_div{ background-color:#f0f5f9; color:#034e99;}
.options div p { padding :3% 0; }


.products_media { } 
.products_media video { width:100%;  }




@media only screen and (max-width:1024px){
	.graph2 { width:100%;  }
	.products>div>ul>li { font-size:0.9em; }
	.options > ul > li { width:50% }
	.options > ul > li:last-child { width:100%; }
	.options img {width:50%; margin:0 auto;}
}
@media only screen and (max-width:1200px){
	.products { width:100%;}
}
@media only screen and (max-width:640px){
	.options > ul > li { width:100% }
	.etc div ul li{ width:100%; font-size:0.9em; }
}















.facilities { width:100%;  position:relative; overflow:hidden; }
.facilities > img { width:100%; z-index:-999;}

.f_media{ margin:0 auto; padding-top:5%;}
.f_media video { width:45%; float:left; margin:3% 0 0 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.f_media p { font-size:1.6em; text-align:center; color:#034e99;}

.f_media1 video { width:50%; margin-left:25%; }


@media only screen and (max-width:1200px){
	.f_media{ width:100%; }
}
@media only screen and (max-width:640px){
	.f_media video { width:95%; }
	.f_media1 video { width:95%; margin-left:3%; }
}



/*f01*/


.f0101 { position:absolute; top:40%; left:5%; }
.f0102 { position:absolute; top:30%; left:20%; }
.f0103 { position:absolute; top:15%; left:45% ;}
.f0104 { position:absolute; top:30%; right:25%; }
.f0105 { position:absolute; top:60%; right:25%; }




.f_btn {
	float:right;
    font-size: 16px;
    border: none;
	text-align:center;
	 background:rgba(255,255,255,0);
}

.f0101 {
    display: inline-block;
}

.f_img {
    display: none;
    z-index: 1;
}

.f_img img {
    color: black;
    width:500px;
    text-decoration: none;
    display: block;
	position:absolute;
	background:rgba(255,255,255,0.8);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.f0101:hover .f_img01 { display: block;}
.f0102:hover .f_img02 { display: block;}
.f0103:hover .f_img03 { display: block;}
.f0104:hover .f_img04 { display: block;}



@media only screen and (max-width:860px){
	.f0101 { position:absolute; top:40%; left:2%; }
	.f0102 { position:absolute; top:30%; left:20% ;}
	.f0103 { position:absolute; top:15%; left:45%; }
	.f0104 { position:absolute; top:30%; right:25% ;}
	.f0105 { position:absolute; top:60%; right:25%;  font-size:0.8em;}
	.f_btn { font-size:0.8em; }
	.f_btn img { width:50px; }
	.f_img img{ width:50%; }
}
@media only screen and (max-width:480px){
	.f0101 { position:absolute; top:40%; left:0%; }
	.f0102 { position:absolute; top:20%; left:5%; }
	.f0103 { position:absolute; top:15%; left:55% ;}
	.f0104 { position:absolute; top:30%; right:20% ;}
	.f0105 { position:absolute; top:60%; right:10% ;}
	.f_btn img { width:30px; }
}




/*f02*/


.f0201 { position:absolute; top:70%; left:20%; }
.f0202 { position:absolute; top:23%; left:20%; }
.f0203 { position:absolute; top:10%; right:20% ;}



.f0201 {
    display: inline-block;
}



.f0201:hover .f_img01 { display: block;}
.f0202:hover .f_img02 { display: block;}
.f0203:hover .f_img03 { display: block;}



@media only screen and (max-width:860px){
	.f0201 { position:absolute; top:70%; left:20%; }
	.f0202 { position:absolute; top:23%; left:20%; }
	.f0203 { position:absolute; top:0%; right:20% ;}
	.f_btn { font-size:0.8em; }
	.f_btn img { width:50px; }
	.f_img img{ width:50%; }

}
@media only screen and (max-width:480px){
	.f0201 { position:absolute; top:70%; left:0%; }
	.f0202 { position:absolute; top:10%; left:0%; }
	.f0203 { position:absolute; top:0%; right:0% ;}
	.f_btn img { width:30px; }
	.f_img img{ width:30%; }
}






/*f03*/


.f0301 { position:absolute; top:35%; left:20%; }
.f0302 { position:absolute; top:26%; left:30%; }
.f0303 { position:absolute; top:20%; right:40% ;}
.f0304 { position:absolute; top:12%; right:10%; }
.f0305 { position:absolute; bottom:15%; right:20% ;}




.f0301:hover .f_img01 { display: block;}
.f0302:hover .f_img02 { display: block;}
.f0303:hover .f_img03 { display: block;}
.f0304:hover .f_img04 { display: block;}
.f0305:hover .f_img05 { display: block;}


@media only screen and (max-width:860px){
	.f0301 { position:absolute; top:30%; left:10%; }
	.f0302 { position:absolute; top:25%; left:30%; }
	.f0303 { position:absolute; top:20%; right:30% ;}
	.f0304 { position:absolute; top:0%; right:5%; }
	.f0305 { position:absolute; bottom:10%; right:10% ;}
}
@media only screen and (max-width:480px){
	.f0301 { position:absolute; top:35%; left:0%; }
	.f0302 { position:absolute; top:22%; left:20%; }
	.f0303 { position:absolute; top:15%; right:30% ;}
	.f0304 { position:absolute; top:0%; right:0%; }
	.f0305 { position:absolute; bottom:10%; right:5% ;}
}

















.xx { width:100%;  text-align:center; }
.xx p { width:100%; padding:20% 0; text-align:center; }











.open_btn { position:absolute; top:25%; right:2%; display:none; }


.nav { width:100%;height:100%;z-index:2;  background-color:#034e99; display:none;
position:absolute; top:0; right:-100%; }
.ov_logo { width:100%; margin:0 auto; position:relative;}
		.mark { width:30%; margin-left:35%;  }
		.close_btn { position:absolute; top:25%; right:5%;}

.ov_nav {  }
.ov_nav ul li:first-child div {border:0px;}


.ov_lnb ul li { width:33.333%; font-size:0.8em; text-align:center; padding:2% 0; }
.ov_lnb a { display:inline-block; color:#fff; width:100%; padding:5% 0;}
.item_wrap { float:none; width:100%; overflow:hidden; text-indent:5%; }
.item { width:100%; padding:3% 0;border-top:1px solid #fff; color:#fff;}
.item a {color:#fff; }
.item_list {   background-color:#fefefe;   }
.item_list li { float:none;  padding:3% 0; font-size:0.9em; 
					border-bottom:1px solid #fff; letter-spacing:-1px;
					background-color:#eceef2;}



.ov_lnb ul li a:hover,
.ov_lnb ul li a:focus {
	background-color: #78a0c8;;
}
@media only screen and (max-width:1024px){
	.open_btn  { display:block; }
	.nav { }
}


















.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
    position: relative;
    top: 15%;
    width: 1200px;
    text-align: center;
    margin-top: 30px;
	margin:0 auto;
	color:#fff;
	
}
.overlay-content >p {
    font-size:2.4em;
	padding:0 0 1% 0;
	
}
@media only screen and (max-width:1200px){
	.overlay-content {
    width: 100%;
   
	}
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}



<!---->

/* Style the tab */
.tab {
	width:100%;
    overflow: hidden;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 0px;
    transition: 0.3s;
    font-size: 1.0em;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #034e99;
	color:#fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border-top: none;
	font-size:1.2em; 
	font-weight:500;
}
.tabcontent video{
	width:100%;
}


@media only screen and (max-width:480px){
	.tab button {
		padding: 10px 3px;
		font-size: 0.8em;
	}
}