@charset "UTF-8";

/* Page Title */
body { width:100%; height:100%; padding:0px; margin:0px; background:#fff;  }

#sub_wrap .sub_con { width:1200px; margin:0 auto; }

#sub_wrap .text_wrap {font-size:17px; color:#666; line-height:1.5em;  padding:50px 0; width:100%; display:inline-block; box-sizing:border-box}
#sub_wrap .text_wrap b {font-size:1.6em; color:#333; font-weight:700}


.text_box {font-size:16px; color:#666; font-weight:300; line-height:1.5em;}
.text_box1 {font-size:17px; color:#666; font-weight:300; line-height:1.5em;}
.text_box2 {font-size:18px; color:#555; font-weight:400; line-height:1.6em;}
.text_box3 {font-size:20px; color:#444; font-weight:500; line-height:1.8em;}
.text_box4 {font-size:22px; color:#333; font-weight:500; line-height:1.8em;}
.text_box5 {font-size:24px; color:#333; font-weight:500; line-height:1.8em;}

.line {width:100%; height:1px; background-color:#ddd; display:inline-block; margin:50px 0;}

.color_bk {color:#333 !important;}
.color_bl {color:#194475 !important;}

ul.basic {width:100%;}
ul.basic li {width:93%; margin-left:3%; margin-bottom:5px; box-sizing:border-box; font-size:0.97em;  padding-left:10px; list-style:disc}

.sub_tit_wrap {padding-top:140px; margin-bottom:70px;}
.sub_tit_wrap h3 {width:100%; text-align:center; font-size:36px; font-weight:600; color:#333;  }


.h3_under {width: 40px; height: 2px; display: block; background-color: rgb(51, 51, 51); margin-top:10px;}
.h4_tit {font-size:25px; font-weight:500; color:#333; margin-bottom:10px;}

.sub_vi {background:url('/common/img/main/main_vi02.png') no-repeat 0 center;background-size: cover; width:100%; box-sizing:border-box; padding-top:195px; min-width:1240px; height:360px; float:left; text-shadow:1px 2px 5px rgba(0,0,0,0.2)}

.sub_vi01 {background:url('/common/img/sub/sub_vi001.png') no-repeat center center;background-size: cover; width:1200px; box-sizing:border-box; margin:0 auto; min-width:1200px; height:300px;  text-shadow:1px 2px 5px rgba(0,0,0,0.2)}
.sub_vi02 {background:url('/common/img/sub/sub_vi002.png') no-repeat center center;background-size: cover; width:1200px; box-sizing:border-box; margin:0 auto; min-width:1200px; height:300px;  text-shadow:1px 2px 5px rgba(0,0,0,0.2)}
.sub_vi03 {background:url('/common/img/sub/sub_vi003.png') no-repeat center center;background-size: cover; width:1200px; box-sizing:border-box; margin:0 auto; min-width:1200px; height:300px;  text-shadow:1px 2px 5px rgba(0,0,0,0.2)}
.sub_vi04 {background:url('/common/img/sub/sub_vi004.png') no-repeat center center;background-size: cover; width:1200px; box-sizing:border-box; margin:0 auto; min-width:1200px; height:300px;  text-shadow:1px 2px 5px rgba(0,0,0,0.2)}


/* (마우스오버시 펼쳐지는 서브메뉴) */
#primary_nav_wrap {width:100%; float:left; height:65px; background:#fff;  margin-top:0px;
 box-shadow:2px 2px 3px 0px #ddd;}

#primary_nav_wrap ul
{
	max-width:1200px;
	height:65px;
	margin:0 auto;
	list-style:none;
	position:relative;
	padding:0;
}

#primary_nav_wrap ul .primary_nav_title>a
{
	color:#333;
	text-decoration:none;
	font-weight:400;
	font-size:18px;
	line-height:65px;
	padding:0 20px;
	/*font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif*/
}

#primary_nav_wrap ul .primary_nav_title
{
	position:relative;
	float:left;
    width:28%;
	text-align:left;
	border-right:1px solid #ddd;
}

#primary_nav_wrap ul li.home_bt
{width:75px; height:65px; float:left; text-align:Center; background:#194475;
box-sizing:border-box; border-right:1px solid #ddd; border-left:1px solid #ddd;}

#primary_nav_wrap ul li.home_bt a {display:block;  line-height:60px;}
#primary_nav_wrap ul li.home_bt i {line-height:60px; color:#fff;}

/*#primary_nav_wrap ul li:hover
{background:#f6f6f6} */

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0;
	z-index:9999999999;
	border-top:1px solid #ddd;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:325px;
	border-bottom:1px solid #ddd;
}

#primary_nav_wrap ul ul li a:hover {transform:ease-in-out 3s;}


.primary_nav_title ul li a
{ display: block;
  color: #777;
  font-size:0.95em;
  font-weight:400;
  background: #f9f9f9;
  }

.primary_nav_title .fa { font-size:18px; float:right; padding:25px 20px 0 0; color:#333;}

.primary_nav_title ul li a:hover{background:#f0f0f0;}

#primary_nav_wrap ul ul a
{ line-height:77%; padding:18px 20px; font-size:17px; }

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block;

}




/************* sub01 **********************************************************************************************************/
#sub_wrap {width:100%; float:left; position:relative;  background:#fff; padding:3% 0;}
.subvi_wrap {position:relative;width:100%; float:left; height:300px;  box-sizing:border-box;   }
.subvi_001 { background:url('/common/img/sub/sub_vi001.png'); }
.subvi_002 { background:url('/common/img/sub/sub_vi002.png'); }
.subvi_003 { background:url('/common/img/sub/sub_vi003.png'); }
.subvi_004 { background:url('/common/img/sub/sub_vi004.png'); }

.subvi_wrap .sub_vi_txt { width:1200px; margin:0 auto; /*background:rgba(255,255,255,0.3); */ box-sizing:border-box; position:absolute;
top:55%; left:50%; transform: translate(-50%, -50%);color:#fff; z-index:99; text-align:center; }

.subvi_wrap .sub_vi_txt h1 {font-size:40px; font-weight:500;}
.subvi_wrap .sub_vi_txt p {color:#ddd}

#sub_wrap .sub_con_wrap {width:1200px; margin:0 auto;display:block;}
#sub_wrap .sub_con {width:100%; float:left;  background:#fff; padding:60px 40px 0 40px;   box-sizing:border-box; }

#sub_wrap .sub_con_wrap .sub_con_tit_wrap {width:100%; float:left; margin:35px 0 50px 0; text-align:center; font-size:32px; font-weight:600;}
#sub_wrap .sub_con_wrap .sub_con_bar {height:32px; width:1px; background:#D3D3D3; display:block; margin:0 auto; }
#sub_wrap .sub_con_wrap .sub_con_tit_wrap p {margin-top:10px}
#sub_wrap .sub_con_wrap  .sub_con_h2{width:100%; float:left; font-size:35px; text-align:center;  padding-bottom:10px; margin-bottom:45px; }





#sub_wrap .gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
}

#sub_wrap .gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin:1% 0;
	overflow: hidden;
	border:1px solid #ddd;
	box-sizing:border-box;
	position:relative;
}

#sub_wrap .gall_img {height:500px;}

#sub_wrap .gallery-item a {width:100%;  display:inline-block }
#sub_wrap .gallery-image {
	display: block;
	width: 100%;
	height: 100%;
/*	object-fit: cover;*/
	transition: transform 400ms ease-out;
}

#sub_wrap .gallery-item .gallery-image_div {width:100%;float:left; height:100%; max-height:300px; max-width:800px;  }
#sub_wrap .gallery-item .gallery-image {width:100%; height:100%;}


#sub_wrap .gallery-image:hover {
	transform: scale(1.1);
}

#sub_wrap .gallery-image2 {
	display: block;
	width: 100%;
	height: 100%;
	border:1px solid #ddd;
	box-sizing:border-box;
	object-fit: cover;
	transition: transform 400ms ease-out;
}



@media (min-width:1200px) {
#sub_wrap .gallery-item {  width:48%; margin-right:2%;}
#sub_wrap .gallery-item:nth-child(4) {margin-right:0; }
}


/* 제품소개 */
#sub_wrap .prod_container {position:relative; width:100%; float:left; margin-bottom:30px; }
#sub_wrap .prod_title { height:80px; width:600px; display:block;  box-sizing:border-box; }
#sub_wrap .prod_title p { font-size:0.95em; padding:15px; display:block;  box-sizing:border-box; color:#fff; position:absolute;bottom:0;}

#sub_wrap .sub_prod_img {width:32%; float:left; }
#sub_wrap .sub_prod_img .prod_imgbox {width:400px; height:400px; float:left;}

#sub_wrap .sub_prod_txt {width:60%; float:right;  box-sizing:border-box; padding:0px 15px; letter-spacing:0}
#sub_wrap .sub_prod_txt h2{font-size:25px; color:#333;}
#sub_wrap .sub_prod_txt span{font-size:20px; color:#999; font-weight:300;  border-bottom:1px solid #ddd; margin-bottom:15px; padding-bottom:10px; display:block}
#sub_wrap .sub_prod_txt p{font-size:16px; background:#f7f7f7; float:left;  border:1px solid #ddd; margin-bottom:10px; padding:5px 10px; box-sizing:border-box; margin-left:5px;}
#sub_wrap .sub_prod_txt ul li{}


#sub_wrap .sub_prod_con {width:100%; float:left; border:1px solid #ddd; padding:30px; box-sizing:border-box; margin-top:50px; }
#sub_wrap .sub_prod_con h3 {color:#333;font-size:30px; font-weight:500; margin-bottom:20px; text-align:center;}
#sub_wrap .sub_prod_con img {max-width:100%; width:100%;}

#sub_wrap .prod_container .container {
  position: relative;
  float:left;
  background:#333;
}

#sub_wrap .prod_container .container .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  background:#333;
}

#sub_wrap .prod_container .middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width:100%; background:rgba(0,0,0,0.7); height:100%;
}

#sub_wrap .prod_container .container:hover .image {
  opacity: 0.5;
}

#sub_wrap .prod_container .container:hover .middle {
  opacity: 1;

}

#sub_wrap .prod_container .text {
  color: white;
  position:absolute;
   top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 24px;
  width:85%;
  line-height:1.25em;
  font-weight:500
}

#sub_wrap .prod_container .more_bt {
	position:absolute;
	text-align: left; width:185px;
	padding: 10px 15px;
	font-size:0.95em;
	box-sizing:border-box;
	letter-spacing:0;
	color: #fff; border: solid 1px white;
	font-weight:500;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	 -ms-transform: translate(-50%, -50%);
}


#sub_wrap .prod_container .more_bt:hover {
  background:rgba(255,255,255,0.55);
  transition: 0.25s ease-in-out;
}






/*서브메뉴*/
#content_menu    { position:relative;float:left; width:100%; /* box-shadow:3px 3px 7px rgba(0,0,0,0.5);*/  margin-bottom:60px;}
#content_menu .content_menu_wrap {position:absolute; top:-60px; left:0; width:1200px; margin:0 auto;  background:rgba(255,255,255,0.35); }

#content_menu li	 {float:left; text-align:center; font-size:18px; line-height:60px;  box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.3); }
#content_menu li:last-child {border:none; float:right; }

#content_menu li a {width:100%; display:inline-block; text-decoration:none; float:left; }
#content_menu li a:link		{color:#fff; text-decoration:none; }
#content_menu li a:hover	{color:#333;font-weight:600;text-decoration:none; background:#fff;}
#content_menu li a:active	{color:#333;font-weight:600;text-decoration:none; background:#fff;}
#content_menu li a:visited	{ color:#fff; text-decoration:none;}

#content_menu li.ov   { }

#content_menu li.ov a 			{ display:inline-block; font-weight:600; text-decoration:none;}
#content_menu li.ov a:link	 	{ color:#333; text-decoration:none; background:#fff;}
#content_menu li.ov a:hover	 	{ color:#333; text-decoration:none; background:#fff;}
#content_menu li.ov a:active	{ color:#333; text-decoration:none; background:#fff;}
#content_menu li.ov a:visited	{ color:#333; text-decoration:none; background:#fff;}

.f_500 {font-weight:500}
.f_600 {font-weight:600}
.color_777 {color:#777 !important; }

.sub_con_menu {width:100%; float:left; border-bottom:1px solid #ddd; box-sizing:border-box;}
.sub_con_menu ul{position:relative; width:1170px; margin:0 auto; text-align:center;}
.sub_con_menu li {position:relative; display:inline-block; vertical-align:top; margin:0 15px}
.sub_con_menu li:last-child {margin-right:0}
.sub_con_menu li a {position:relative; font-weight:300; font-size:18px; letter-spacing:0; color:#888; display:block; line-height:100%; height:65px; text-align:center; padding:0 8px; box-sizing:border-box;  display:flex; justify-content:center; align-items:center; box-sizing:border-box;}
.sub_con_menu li a:after{position:absolute;; display:block; bottom:-1px; left:0; content:""; overflow:hidden; width:0; height:2px; background:#c00;}
.sub_con_menu li a:hover{color:#c00; font-weight:500; text-decoration: none;}
.sub_con_menu li a:hover:after{width:100%;  transition: all 0.3s ease-out; }

#sub_con_menu_wrap { z-index:999 !important; width:100%; position:relative;  background:#fff; transition: all 0.2s ease-out;}
.mn_on{display:block; color:#c00 !important; font-weight:500 !important; text-decoration: none}
.mn_on:after{width:100% !important; transition: all 0.3s ease-out;}

/*depth_3*/
.sub_con_menu ol.depth_3{border-bottom:1px solid #ddd; padding:0 0 0 20px; background-color:#f9f9f9}
.depth_3 dd:first-child{padding-top:8px;}
.depth_3 dd:last-child{padding-bottom:8px;}
.depth_3 dd a:link, .depth_3 dd a:visited{display:block; font-size:12px; padding:4px 0;}
.depth_3 dd a:hover{display:block; color:#064e91; text-decoration:none}




/* 푸터 footer */
.fixed_top {width:60px; font-size:13.5px;  border-radius:5px;line-height:60px; background-color:#555; color:#fff !important;  text-align:center; float:right; position:fixed; bottom:5%; right:3%; letter-spacing:0.5px;}

#footer01_wrap {position: relative; width: 100%; float:left; border-top:1px solid #eee; background:#f0f0f0}
#footer01_wrap .footer01 {width:1200px; margin: 0 auto; display:block}

#footer01_wrap .footer01 .footer01_left ul li {width:25%; float:left; }
#footer01_wrap .footer01 .footer01_left {width:60%; float:left; padding:40px 30px; box-sizing:border-box;}
#footer01_wrap .footer01 .footer01_left h4 {font-size:18px; font-weight:500; margin-bottom:8px;}
#footer01_wrap .footer01 .footer01_left p {font-size:16px; font-weight:300; line-height:1.7em; color:#999 !important}
#footer01_wrap .footer01 .footer01_left a {font-size:16px; font-weight:300; line-height:1.7em; color:#999 !important}


#footer01_wrap .footer01 .footer01_right {width:40%; float:left; box-sizing:border-box; padding:40px 20px;}
#footer01_wrap .footer01 .footer01_right p {font-size:15.5px; font-weight:300; line-height:1.6em; color:#555 !important}


#footer01_wrap .footer01 .footer_con{float: left; padding: 30px 0 40px 70px; box-sizing:border-box;}
#footer01_wrap .footer01 .footer_con p.f_txt{line-height: 25px; letter-spacing: -.5pt; font-size:15.5px; color:#777;}

/* 여백 */
#footer01_wrap .footer01 .footer_con .nbsp{padding-left: 15px; padding-right: 15px; letter-spacing: -.5pt;  font-size:15px; }

#footer01_wrap .footer01  p.copy{color:#999 !important; text-transform: uppercase; font-weight:300 !important; padding-top: 5px; letter-spacing: .1pt; font-size:14.5px}

#footer01_wrap .footer01 .f_top{ float: right; margin-top: 30px; text-align: center;}
#footer01_wrap .footer01 .f_top a{display:block; letter-spacing: -0.5pt; line-height: 42px; color:#888; width: 80px; height: 43px; border:1px solid #ddd; border-radius:43px; transition: all 0.3s; background:#f9f9f9}
#footer01_wrap .footer01 .f_top a:hover{background: #b0060a; color:#fff; border-color:#b0060a; transition: all 0.2s;}