#header { position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s; z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#header #header-warp {position: relative; width:100%;  margin:0 auto; padding:0; text-align: center; transition: all 0.5s;}
#header-warp.header-scrolled {transition: all 0.5s; background-color: rgba(255, 255, 255, 0.93); border-bottom: 1px solid rgba(236, 236, 236, 1.0);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
/* background-color: rgba(4, 9, 30, 0.8); */
}

#header #manu-bg { display:none; position: absolute; left: 0;right: 0;width: 100%;height:100%;top: 0;z-index: -2;transition: all 0.5s; }

#header #manu-bg.bgcolor {  transition:all 0.5s;
-webkit-transition:all 0.5s;
 -moz-transition:all 0.5s;
 -o-transition:all 0.5s;
 -ms-transition:all 0.5s;  Opacity:0.2;}


#header .header-top { min-height: 40px;  padding: 8px 0 0 0; }
#header .header-container {position:relative;width:1170px;padding:0; margin:0 auto; z-index:2;}


#header .top-warp {width:100%; margin:0 auto; padding:0;}

#header .top-info li{display:inline-block;font-size:14px;color: rgba(255, 255, 255, 0.7);margin-right:25px}
#header .top-info li:last-child{margin-right:0}
#header .top-info li a{ color: rgba(255, 255, 255, 0.7);}
#header .top-info li a:hover{color:#fff}
#header .top-info li i, .top-info li {padding-right:5px}


#header .top-social li{display:inline-block;}
#header .top-social li a{font-size:14px; color: rgba(255, 255, 255, 0.7); -webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;
-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s}
#header .top-social li a:hover{color:#fff}
#header .top-social li:after{content:"|";color: rgba(255, 255, 255, 1.0);padding-left:10px;padding-right:10px;font-weight:400}

#header .top-social li:last-child::after{display: none;}

#header .top-social li:nth-child(1){display: none;}
#header .top-social li:nth-child(3){display: none;}

#header .top-social li i, .top-social li {padding-right:5px}


/* Dropdown Button */
.dropdown-content { display: none;}



/**** pc 언어별 텍스트 ***/
#header .lang { margin:0 ;padding:1px; z-index:20000;}
#header .lang li{float:left;margin:0 auto; padding:0px; position: relative;}
#header .lang li a {cursor: pointer;display: block;padding: 0 10px;font-size: 12px;font-weight: 400; }
#header .lang li a.color {color: rgba(255, 255, 255, 0.7); }
#header .lang li a.active {color: rgba(255, 255, 255, 1.0); font-weight: 600;}
#header .lang li a.color:hover{color: #ffffff;}

#header .lang li a:after {content: '';display: block;width: 1px;height: 8px;position: absolute;top: 50%;right: 0;margin-top: -4px; 
background: #ffffff;}
#header .lang li:first-child a {padding-left: 0;}
#header .lang li:last-child a {padding-right: 0;}
#header .lang li:last-child a:after {display: none;}



#header .lang li:hover ul{display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */}
#header .lang .sub-lang {display: none;padding:7px 0 0 0;margin:0px;border:0px;position:absolute;width:140px;z-index:900;left:-40px; /*top:1em;left:0;*/}
#header .lang .sub-lang li {display:block;float:none;margin:0px;padding:5px 10px 8px 10px;width:140px;}
#header .lang .sub-lang li:first-child {padding:7px 10px 0px 10px; }
#header .lang .sub-lang li a{display:block;margin:0px;padding:0px; text-align:left;font-size: 12px;font-weight: 500;color: rgba(255, 255, 255, 0.7); }
#header .lang .sub-lang li:hover a{color:#ffffff;}
#header .lang .sub-lang li a:after {display: none;}
#header .lang .sub-lang li a.active {color: rgba(255, 255, 255, 0.7);}






#header .navi-warp {width:100%; margin:0 auto; text-align: center;position: relative; }

#header .navi-warp .lnb-logo {height:80px; width:20%;text-align:left;padding:0 0px 0 0px;}
#header .navi-warp .lnb-logo img {width:200px;height:auto; vertical-align: middle; margin:20px 0 0 0}

#header .navi-warp .lnb-logo img.scroll {display:none;}

#header .navi-warp .navi {width:1170px;margin:0 auto; padding:0; text-align: center;}
#header .navi-warp { text-align: center;}

#header .navi-warp .menu-warp {text-align: right; width:80%; height:100%; margin:0 ; padding:0;}
#header .navi-warp .main-menu { text-align: right; width:100%; height:100%; margin:0 ; padding:0;}
#header .navi-warp .main-menu2 { text-align: right; width:100%;display:none;}



#navigation {width:100%;height:80px;margin:0 auto; padding:0;}
#navigation li { display: inline-block; position: relative; height:100%;}
#navigation > li { padding: 0px 10px;text-align:center}
#navigation > li:first-child {padding-left: 0px;}
#navigation > li:last-child { padding-right: 0px;}



#navigation > li > a.first {color:#ffffff}

#navigation > li > a { display: block;position: relative;padding: 30px 0px 20px 0; text-align: center;font-size: 15px;font-weight: 300;  
                        line-height: 20px;text-transform: capitalize;}

#navigation > li > a::after { background: #ffffff; border-radius:2px;right:-15px; top:39px; width:4px; height:4px;  
                              position: absolute; content: "";} 

#navigation > li:last-child > a::after { display: none;}


#navigation > li.menu > a::after { background: #6b6b6b; border-radius:2px;right:-15px; top:39px; width:4px; height:4px;  
                              position: absolute; content: "";} 





#navigation li a i { font-size: 0.8rem;margin-left:5px;}


/* 메뉴 마우스 오버시 라인 생성 */
#navigation li .over-line { position: absolute; width: 50%; height: 3px;bottom: 10px; left: 0;  z-index: 9;
   top: 80%;   left: 30%;  transform: translate(-80%, -30%);
  transform: scaleX(0);
-webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s;
}

#navigation li:hover .over-line { opacity: 1;
  transform: scaleX(1);
-webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s;
}


#navigation li .page-line { opacity: 1;width: 50%;
  transform: scaleX(1);
-webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s;
}




#navigation > li:hover > a.first {color:#ff0000}
#navigation > li:hover > a.df-color {color:#ff0000; }



/*** 페이지 인식**/
.page1 li a.dep1-color { color:#ff0000;}
.page1 li a.first.dep1-color {color:#ff0000}
.page2 li a.dep1-color { color:#ff0000;}






/* 드랍메뉴 첫번째 스타일 **/

.dropdown .scroll-bg1 { background: rgba(0, 0, 0, 0.3); }
.dropdown .scroll-bg2 { background: rgba(255, 255, 255, 1.0);}
 
.dropdown .submenu {position: absolute; top:80px; left: -55px; width: 280px; overflow: hidden;  display: block; text-align: left;
padding:0px 0 15px 0;margin:0px 0 0 0;  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.5s;  transform-origin: top center;  transform: scale(1, 0);}
.dropdown:hover .submenu { transform: scale(1);}



/* 드랍메뉴 두번째 스타일
#navigation li .submenu {
position: absolute;
  left: -50px;
  top: 140%;
  background: #000;
  width: 240px;
  z-index: -10000000000000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.02);
  opacity: 0;
  visibility: hidden;
  text-align: left;
padding:0px 0 20px 0;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;


}
*/


#navigation li .submenu li {width:100%; margin:0 auto; padding:0 0 0 0;}

#navigation li .submenu li a.first  {color:#ffffff} 

#navigation li .submenu li a {padding: 4px 10px 4px 15px;font-size: 14px; font-weight: 400;text-transform: capitalize;
position: inherit; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: block; }

#navigation li:hover > .submenu {  opacity: 1; visibility: visible;  top: 100%;}

#navigation li .submenu li:hover a {color:#000000}
#navigation li .submenu li:hover a.df-color {color:#000000}


#side-menu { display:none }
.side_menu{ display:none }







@media only screen and (max-width:1170px)
{




}




@media (max-width:980px)
{
#header .header-top { min-height: 40px;  padding: 8px 0 0 0;  }
#header .header-container {position:relative; width:90%; padding:0; margin:0 auto; z-index:2;}

#header .navi-warp .lnb-logo {height:60px; width:100%;text-align:center;padding:0 0px 0 0px;}
#header .navi-warp .lnb-logo img {width:200px;height:auto; vertical-align: middle; margin:10px 0 0 0}
#header .navi-warp .main-menu2 { display:none;}




#header .navi-warp .menu-warp {text-align: center; width:100%; height:100%; margin:0 ; padding:0;}
#header .navi-warp .navi {width:100%;margin:0 auto; padding:0; text-align: center;}

#header .navi-warp .main-menu { text-align: center; width:100%; height:100%; margin:0 ; padding:0;}
#header .navi-warp .main-menu2 { text-align: center; width:100%;display:none;}





#navigation {width:100%;height:50px;margin:0 auto; padding:0;}
#navigation li {  position: relative; height:100%;}
#navigation > li { padding: 0px 10px;text-align:center}
#navigation > li:first-child {padding-left: 0px;}
#navigation > li:last-child { padding-right: 0px;}



#navigation > li > a { display: block;position: relative;padding: 10px 0px 0px 0; text-align: center;font-size: 15px;font-weight: 300;  
                        line-height: 20px;text-transform: capitalize;}

#navigation > li > a::after { background: #ffffff; border-radius:2px;right:-15px; top:20px; width:4px; height:4px;  
                              position: absolute; content: "";} 

#navigation > li:last-child > a::after { display: none;}


#navigation > li.menu > a::after { background: #6b6b6b; border-radius:2px;right:-15px; top:20px; width:4px; height:4px;  
                              position: absolute; content: "";} 





/* 메뉴 마우스 오버시 라인 생성 */
#navigation li .over-line { position: absolute; width: 50%; height: 3px;bottom: 10px; left: 0;  z-index: 9;
   top: 110%;   left: 30%;  transform: translate(-110%, -30%);
  transform: scaleX(0);
-webkit-transition: all 300ms linear 0s; -moz-transition: all 300ms linear 0s; -o-transition: all 300ms linear 0s; transition: all 300ms linear 0s;
}





}





@media (max-width: 768px) {





#header .main-menu, #header .main-menu {display:none}
#header .header-top { min-height: 30px;  padding: 0px 0 0 0; }

#header .navi-warp .lnb-logo {height:60px; width:60%;text-align:left;padding:0 0px 0 15px;}
#header .navi-warp .lnb-logo img {width:160px;height:auto; vertical-align: middle; margin:12px 0 3px 0}
#header .navi-warp .lnb-logo img.scroll {display:none;}


#header .navi-warp .navi {width:100%;margin:0 auto; padding:0; text-align: center; background-color: rgba(4, 9, 30, 0.7);}
#header .navi-warp { text-align: left;}

#header .side_menu {width:40%;font-size:2rem;text-align: right;padding:13px 20px 0 0px; font-weight:100; color:#fff}




#header .top-info {display:none; }
#header .top-info li{display:inline-block;font-size:0.8rem;color: rgba(255, 255, 255, 0.7);margin-right:25px}
#header .top-info li:last-child{margin-right:0;}
#header .top-info li a{ color: rgba(255, 255, 255, 0.7);}
#header .top-info li a:hover{}
#header .top-info li i, .top-info li {padding-right:10px}

#header .top-social {position: absolute; right:-20px; margin:0px 0 0 0px;min-height: 30px;  padding: 2px 10px 0px 0;}
#header .top-social li{display:inline-block;margin-right:0px}
#header .top-social li a{font-size:0.7rem;color: rgba(255, 255, 255, 0.7);font-weight:400;}
#header .top-social li a:hover{color:#fff}


#header .top-social li:after{content:"|";color: rgba(255, 255, 255, 1.0);padding-left:8px;padding-right:0px;font-weight:400}
#header .top-social li a.dropbtn:after{content:"";color: rgba(255, 255, 255, 1.0);padding-left:8px;padding-right:8px;font-weight:400}

#header .top-social li:last-child::after{display: none;}


#header .top-social li:nth-child(1){display:inline-block}
#header .top-social li:nth-child(3){display:inline-block}

#header .top-social li i, .top-social li {padding-right:5px}


/* Dropdown Button */
#header .top-social .dropbtn {cursor: pointer;}
#header .top-social .dropbtn i {padding:3px 0 0 5px;color:#e3e3e3;}

#header .top-social .dropdown { position: relative; }
#header .top-social .dropdown-content {display: none; width: 100%; min-width:100%;}
#header .top-social .dropdown-content .col { width: 25%; padding:0 10px 0 10px;background:red}

.show {display:block; border-top: 1px solid rgba(255, 255, 255, 0.2);}






/**** Mobile 언어별 텍스트 ***/
#header .M-lang { margin:0 ;padding:1px; z-index:20000;}
#header .M-lang li{float:left;margin:0 auto; padding:8px 15px; position: relative;}
#header .M-lang li a {cursor: pointer;display: block;padding:0px;font-size: 0.7rem;font-weight: 500; }
#header .M-lang li a.color {color:#ffffff; }

#header .M-lang li a:after {content: '';display: block;width: 1px;height: 8px;position: absolute;top: 50%;right: 0;margin-top: -4px; 
background: #ffffff;}
#header .M-lang li:first-child a {padding-left: 0;}
#header .M-lang li:last-child a {padding-right: 0;}
#header .M-lang li:last-child a:after {display: none;}



#header .navi-warp { text-align: left;}
#header .navi-warp .navi {width:100%;margin:0 auto; padding:0; text-align: center;}
#header .navi-warp .navi {transition: all 0.5s; background-color: rgba(255, 255, 255, 0.93); border-bottom: 1px solid rgba(236, 236, 236, 1.0);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);}




#header .side_menu {width:40%;font-size:2rem;text-align: right;padding:15px 20px 0 0px; color:#fff}
#header .navi-warp .menu-warp  { display:none }



/**************************** 모바일 사이드 메뉴 ***********************************/
#side-menu { display:inline-block }
.side_menu { display:inline-block }

#side-menu {background: rgb(75, 80, 89); max-width: 280px; z-index:10000}
#side-menu div.push-warp {width:100%; height:100%;  overflow-y:scroll;}
#side-menu > div {z-index:10000}
#side-menu .menuCtg {background: rgb(255, 255, 255);}


#side-menu .closeArea { left: -45px; top: 40px; position: absolute;background:black}
#side-menu .closeArea .close i{width: 30px; height: 29px; color:#ffffff;font-size:30px;display: block; position: relative; z-index:10000;}


#side-menu .menuCtg .member {background: rgb(75, 80, 89); text-align: center; overflow: hidden;}
#side-menu .menuCtg .member p {position: relative; box-sizing: border-box;}
#side-menu .menuCtg .member p:first-child::before {
 background: rgba(255, 255, 255, 0.15); top: 15px; width: 1px; height: 28px; right: 0px; position: absolute; content: "";
}
#side-menu .member .logo {width: 100%; margin:0 auto; text-align:center;padding:10px 0 7px 0}
#side-menu .member .logo img {width:180px; border-image: none;}
#side-menu .member .logo a {  border-image: none;text-decoration: none; cursor: pointer; }
#side-menu .member .title { width: 100%; font-size:15px; font-weight:bold; text-align:center;color:#abb7cd;padding:0px 0 15px 0}
#side-menu .menuCtg .member p a {
 padding: 16px 0px 16px 20px; color: rgb(238, 238, 238); line-height: 28px; font-size: 15px; display: block;}

#side-menu .t_a_line {width:100%;overflow: hidden;}
#side-menu .mnTit {color: rgb(69, 69, 69); float: left; letter-spacing: -0.04em; font-size: 17px; font-weight: 500;
	padding: 10px 0px 10px 19px; width: calc(100% - 54px);  box-sizing: border-box; }
#side-menu span.arrow {background: url("../../img/ml_down_arrow.png") no-repeat center; width: 54px; height: 51px; float: left; cursor: pointer;}
#side-menu .on > .t_a_line {	background-color: rgb(154, 24, 36);}
#side-menu .on > .t_a_line > .mnTit {color: rgb(255, 255, 255);float: left; letter-spacing: -0.04em; font-size: 17px; font-weight: 500;
	padding: 15px 0px 15px 19px; width: calc(100% - 54px);  box-sizing: border-box;}
#side-menu .on > .t_a_line > span.arrow {background: url("../../img/ml_up_arrow.png") no-repeat center;}

#side-menu .mnTit + ul {	display: none;}
#side-menu .on > .mnTit + ul {border-bottom-color: rgb(225, 225, 225); border-bottom-width: 1px; border-bottom-style: solid; display: block;}
#side-menu .menuCtg > .on > ul > li {border-bottom-color: rgb(204, 204, 204); border-bottom-width: 1px; border-bottom-style: solid;}

#side-menu .side_sub {display: none; list-style-type: square; }
#side-menu .on > .side_sub {background: rgb(242, 242, 242);0width:100%; display: block;padding: 5px 0px 15px 35px;}
#side-menu .on > .side_sub > li {padding: 4px 0px 4px 0px;}
#side-menu .on > .side_sub > li > ul {}

#side-menu .side_sub li a { color: rgb(51, 51, 51); letter-spacing: -0.04em; font-size: 1rem; font-weight: 500; display: block; position: relative;}
#side-menu .side_sub li a:hover {color: rgb(154, 24, 36);}
#side-menu .side_sub li a.active {color: rgb(154, 24, 36);}


#side-menu .side_sub li > ul > li a {padding: 6px 0px 6px 50px; color: rgb(102, 102, 102); font-size: 14px;}
#side-menu .side_sub li > ul > li a.active {	color: rgb(25, 127, 199);}
#side-menu .side_sub li > ul > li a::before {background: rgb(170, 170, 170); left: 36px; top: 13px; width: 6px; height: 2px; position: absolute; content: "";}


#side-menu .navi_util_warp {width:100%}
#side-menu .navi_util {width:100% overflow:hidden; background: url("../../img/navi_title.jpg") no-repeat center;}
#side-menu .navi_title_warp { padding: 16px 0 0 20px;}
#side-menu .navi_title_warp .navi_title { }
#side-menu .navi_title_warp .navi_title p.title {font-size: 16px; font-weight: 500;line-height: 1.5; padding:0 0 5px 0;}
#side-menu .navi_title_warp .navi_title p {font-size: 13px; font-weight: 300; line-height: 1.5;  color:#abb7cd;}
#side-menu .navi_util_warp i {padding:0 5px 0 0; font-size:18px }
#side-menu .navi_util_warp .ml_tel {width:100%;margin-top:0px;padding-top: 0px; border-top-color: rgba(255, 255, 255, 0.1); border-top-width: 0px; 
                                    border-top-style: solid; }
#side-menu .navi_util_warp .ml_tel {color: rgb(204, 204, 204); letter-spacing: -0.04em; font-size: 15px;}
#side-menu .navi_util_warp .ml_tel a {color: rgb(229, 229, 229); letter-spacing: -0.04em;  font-size: 15px; }
#side-menu .navi_util_warp .ml_fax {width:100%;margin-top:10px;padding-top: 0px; }
#side-menu .navi_util_warp .ml_fax {color: rgb(204, 204, 204); letter-spacing: -0.04em;  font-size: 15px;}
#side-menu .navi_util_warp .ml_fax span {color: rgb(229, 229, 229); letter-spacing: -0.04em;  font-size: 15px; }
#side-menu .navi_util_warp .ml_email {width:100%;margin-top:10px;padding-top: 0px; }
#side-menu .navi_util_warp .ml_email {color: rgb(204, 204, 204); letter-spacing: -0.04em; font-size: 15px;}
#side-menu .navi_util_warp .ml_email a {color: rgb(229, 229, 229); letter-spacing: -0.04em; font-size: 15px;}
#side-menu .navi_util_warp .ml_email span {color: rgb(229, 229, 229); letter-spacing: -0.04em; font-size: 15px; }


}



@media screen and (max-width:480px)
{


#header .main-menu, #header .main-menu {display:none}
#header .header-top { min-height: 30px;  padding: 0px 0 0 0;  }

#header .navi-warp .lnb-logo {height:60px; width:60%;text-align:left;padding:0 0px 0 15px;}
#header .navi-warp .lnb-logo img {width:160px;height:auto; vertical-align: middle; margin:12px 0 3px 0}
#header .navi-warp .lnb-logo img.scroll {display:none;}


#header .navi-warp .navi {width:100%;margin:0 auto; padding:0; text-align: center;}
#header .navi-warp .navi {transition: all 0.5s; background-color: rgba(255, 255, 255, 0.93); border-bottom: 1px solid rgba(236, 236, 236, 1.0);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);



#header .navi-warp { text-align: left;}

#header .side_menu {width:40%;font-size:2rem;text-align: right;padding:13px 20px 0 0px; font-weight:100; color:#fff}


}