@charset "utf-8";

.wrap{position:relative;  max-width:1200px; margin:0 auto;  /*overflow:hidden*버튼등 영역밝 가려짐떄문에 못씀*/ } /*전체 최대 넓이 조절 */

@media screen and (max-width:1260px) {
.wrap{margin:0 2% !important; }
}
@media screen and (max-width:640px) {
.wrap{margin:0 4% !important; }
}



/* Common Layout*/

#header_wrap { position: relative;  z-index: 2000 !important; height:80px}
#header { width: 100%;  height: 80px; background:#FFF; position: fixed;}
#header h1 {position: absolute; z-index: 10000; padding: 20px 0px 0px; left: 50%;  margin-left: -600px;  }

@media screen and (max-width:1200px) {
#header h1	{ margin-left: -48%;}
}



/*search*/
.basic_search_area{ display:none; position:fixed; top:0px; left:0; padding:50px 0; height:70px; z-index:100000; width:100%; background:#000; text-align:center; background:#1b1b1b; background:rgba(0,0,0,0.9);}
.basic_search_box{width:50%; text-align:center; margin:4px auto 0 auto}
.basic_search_box img{ padding:10px 5px 5px 5px}
.basic_search_box .search_ico{ padding:0px}
.basic_search_box input[type=text]{ width:50%; border:0; height:36px; line-height:36px; padding:0 5px; margin:0 ; background:none; border-bottom: 1px solid #999; color:#fff}

@media screen and (max-width:640px) {
.basic_search_area{}
.basic_search_box{width:90%;}
.basic_search_box input{ width:60%; }
}

.allmenu_area { position:absolute; top:0; right:left; display:inline-block}
.search_area { position:absolute; top:0; right:0; display:inline-block}




/*gnb*/
.gnb { margin: 0 auto;  padding-top:25px; z-index:100;  max-width:1200px}
.gnb .select_languge {display:inline-block; position: relative; height: 30px; width: 37px; text-align:left; float:right;}
.gnb .select_languge .select_tit { position: relative; width: 35px; height: 30px; font-size: 12px; line-height: 30px; color: #666;  background: #fff; cursor: pointer; z-index: 100;}
.gnb .select_languge .select_tit .tit { height: 28px; line-height: 30px;  letter-spacing:0px;}
.gnb .select_languge .select_tit .arr { position: absolute; top: 0; right: 0px; width: 10px; height: 30px; background: url("../img/common/select_arr_s.png") left 2px no-repeat; overflow: hidden }
.gnb .select_languge .select_tit .arr.on { background-position: left top }
.gnb .select_languge .select_list { position: absolute; top: 0; right: 0; width: 100% !important; padding-top: 30px; overflow: hidden; border-bottom: none; display: block; z-index: 0; height:0 ; display:block}
.gnb .select_languge .select_list ul { width: 35px; background:#fff; border:1px solid #d8d8d8 }
.gnb .select_languge .select_list li{ width:100%; margin-left:0 !important}
.gnb .select_languge .select_list li a { display: block; height: 30px; font-size: 12px; color: #666; padding-left: 5px; line-height: 30px;  }
.gnb .select_languge .select_list li:hover{ background:#ebebeb}
.gnb .search {float:right; margin:0 0 0 14px;}




/*lnb*/
.lnb { position: absolute; z-index: 11 !important; top: 0px; line-height:80px; left: 50%; width: 1200px; margin-left: -600px; overflow:hidden;    }
.lnb:hover{/*background: url(../img/common/gnb_line.png)*/ /*border-left:1px solid #03F; border-right:1px solid #03F*/}
.lnb > ul{}
.lnb > ul > li{ border-left:1px solid #fff}
.lnb > ul > li:last-child{border-right:1px solid #fff; }
.lnb > ul > li:first-child{ margin-left: 27%;}
/*.lnb > ul:hover { border-right:1px solid #eeeeee;    }*/

.lnb > ul:hover > li{ border-left:1px solid #eeeeee}
.lnb > ul:hover > li:last-child{border-right:1px solid #eeeeee}
.lnb > ul > li { text-align: center; letter-spacing: -0.5px }
.lnb > ul > li > a { padding: 0px 10px; display: block; font-size: 16px;  letter-spacing:0px ; color:#000; font-weight: 400 }
.lnb > ul > li:hover { /*background:#bb413c;*/ background:#0052a6; }
.lnb > ul > li:hover > a{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.lnb > ul > li > a:hover, .lnb > ul > li > a.on {/* color: #c6322c;*/ color:#0052a6; } /* 오버색상*/
.lnb > ul > li:hover a{ color:#fff !important }

.lnb ul li.lnb_1 { float: left; position: relative; width: 14.6%; text-align: center; box-sizing: border-box;}
.lnb ul li.lnb_1 ul {  display: none;  position: relative; top:0px; height: 100%; clear: both; height:180px; overflow:hidden}
.lnb ul li.lnb_1 ul li a { font-size: 14px; display: block; padding: 3px 5px; color: #444; line-height:1.5em; font-weight:200; }
.lnb li.on ul li a {  }
.lnb li.on ul li a:hover { color: #0052a6; text-decoration:underline  }   /*오버색상*/
/*
.lnb li.lnb1 { width: 140px; text-align: center }
.lnb li.lnb2 { width: 140px; text-align: center }
.lnb li.lnb3 { width: 140px; text-align: center }
.lnb li.lnb4 { width: 140px; text-align: center }
.lnb li.lnb5 { width: 140px; text-align: center }
.lnb li.lnb6 { width: 140px; text-align: center }
.lnb li.lnb7 { width: 140px; text-align: center }
*/
  .bg_navi { background: #fff; top: 80px; width: 100%; height: 0px; overflow: hidden; position: absolute; z-index: 10; /*opacity:.99;filter:alpha(opacity=99);*/}
  .bg_navi li.bgn { left: 50%; top: 0px; width: 1000px; padding-top: 10px; margin-left: -500px; position: absolute; z-index: 10000; }
  .bg_navi li.bgn p.lnb_tit { font-size: 14px; font-weight:600; margin-bottom:10px; display:none }
  .bg_navi li.bgn p.lnb_img {  padding-top: 0px; width: 250px; font-size: 12px; letter-spacing: -1px; display:none }
  .bg_navi li.bgn p.lnb_img img { margin-bottom: 10px; }
  .bg_navi li.bgn p.text { float: left; letter-spacing: -1px; color: #666; line-height:normal }

#header.small { width: 100%;  height: 50px; background:#FFF; border-bottom:1px solid ; border-color:rgba(0,0,0,0.1) }
#header.small .gnb {   padding-top:10px; }
#header.small .lnb {  line-height:50px;   }
#header.small h1 { padding: 10px 0px 0px; }
#header.small h1 img{width:136px;}
#header.small .bg_navi {top: 50px;}

.mobile_lnb { display: none }

@media screen and (max-width:1200px) {
#header_wrap { height: 50px}
#header { width: 100%; margin: 0 auto; height: 50px; position:relative }
#header h1 { padding: 10px 0px 0px; left: 2%; top: 0px; margin-left: 0; position: absolute; z-index: 1 ; max-width:150px ; position:relative ; text-align: left}
#header h1 img{ width:136px;}
.gnb { display: none;  }
.lnb{ display:none}

.mobile_lnb { display: block; position: absolute; top: 0px;  width:100%; text-align:right ;}
.mobile_lnb a.menu_btn{ padding:0 2% 0 0 ; display:inline-block }
.mobile_lnb a.menu_btn img{ margin:12px 0;margin-right:0%;}
.mobile_global{position:absolute; top:0; right:8%}
.mobile_global li{ float:left; line-height:48px; color:#888; font-weight:200;}
.mobile_global li a{ /*border-left:1px solid #CCC;*/ padding:0 5px; font-size:14px; }
.mobile_global li:first-child a{ border:0; }
/*
.mobile_menu_area > ul{ position:absolute; top:60px; z-index:3000 !important ; width:100%;  left:0;  background:#fff;}*/
.mobile_menu_area{ overflow:hidden; display:none; background:#0052a6; border-bottom:1px solid #0052a6; display:block; /*opacity:.98;filter:alpha(opacity=98);*/}
.mobile_menu_area > li { clear:both; padding:15px 2%; border-top:1px solid #00468e; overflow:hidden}
.mobile_menu_area li h3{ float:left;  text-align:left; margin:0; padding:0; font-size:16px; padding:5px 5px; color:#fff; font-weight:500; letter-spacing:0px;}
.mobile_menu_area li ul{ margin-left:150px;   text-align:left}
.mobile_menu_area li ul li{ float:left; margin-right:15px; padding:0}
.mobile_menu_area li ul li a{ font-size:14px; padding:3px 5px; display:inline-block; color:#eeeeee; font-weight:200;}
.mobile_menu_area li.menu_close{ text-align:left ; background:#fff; overflow:hidden; }
.mobile_menu_area li.menu_close a{ border-bottom:0;  }
.mobile_menu_area li.menu_close img{ margin:0 10px; float:right}
.mobile_menu_area li a.call {   width:auto;  padding: 10px 10px; font-size:16px;   text-align:left; font-weight:600 ; color:#fff}
.mobile_menu_area li a.call span{ color:#fff}

}

@media screen and (max-width:640px) {
#header h1 { left: 4%;}
.mobile_lnb a.menu_btn{ padding:0 4% 0 0 ; }
.mobile_global {right:12%}
.mobile_menu_area > li {  padding:10px 3%; }
.mobile_menu_area li ul{ margin-left:0;   text-align:left}
.mobile_menu_area li h3{padding:5px 0; font-size:14px; width:100%;}
.mobile_menu_area li ul li{ width:50%; padding:0 0; margin:0}
.mobile_menu_area li ul li a{ font-size:13px; padding:0;}
}
@media screen and (max-width:400px) {
.mobile_global {right:13%; }
.mobile_global li a {font-size:13px;}
}








/* Footer */
#footer { position: relative; clear:both; border-top:2px solid #e9e9e9;}
#footer:after{ clear:both; display:block; content:"";}

#footer .sitemap {width:77%; float:left;}
#footer .sitemap:after{ clear:both; display:block; content:"";}
#footer .sitemap ul li {width: 20%; float:left;}
#footer .sitemap ul li dl {padding:0 24px; margin:32px 0; height:152px; background:url("../img/common/line_eee.gif") right center repeat-y;}
#footer .sitemap ul li:last-child dl {background:none;}
#footer .sitemap ul li dl dt {font-size:14px; margin:0 0 5px 0; font-weight:400;}
#footer .sitemap ul li dl dd {font-size:13px; color:#777;}

#footer .foot_banner {width:23%; float:left; background:url("../img/common/footer_bannerbg.jpg") left center no-repeat; height:216px; overflow:hidden;}
#footer .foot_banner .foot_banner_inner {}
#footer .foot_banner p.title_logo {margin:28px 0 0 32px;}
#footer .foot_banner p.title_logo img {width:124px;}
#footer .foot_banner p.banner_p {margin:20px 0 0 90px;}
#footer .foot_banner p.banner_p img {width:150px;}

#footer .info {width:100%; position:relative; font-size:14px; color:#999; background:#efefef; text-align:center;}
#footer .info .shortcut {border-bottom:1px solid #ddd;}
#footer .info .shortcut a {display:inline-block; line-height:45px; vertical-align:middle; padding:0 8px; color:#767676;}
#footer .info address {padding:52px 0 8px 0; font-weight:200;}
#footer .info address p span {padding:0 8px;}
#footer .copy { font-size:12px; letter-spacing:0.5px; padding:0 0 52px 0; font-weight:200;}
#footer .copy span {font-weight:500; }

@media screen and (max-width:1200px) {
#footer .info .shortcut a {line-height:40px; padding:0 4px;}
#footer .info address {padding:32px 0 6px 0;}
#footer .info address p span {padding:0 4px;}
#footer .copy {padding:0 0 32px 0; }
}
@media screen and (max-width:1000px) {
#footer {border-top:0px solid #e9e9e9;}
#footer .foot_top {display:none;}
}
@media screen and (max-width:640px) {
#footer .info .shortcut a span {display:none;}
}




/*go_top*/
.btn_top{ position:fixed; right:10px; bottom:10px; width:50px; z-index:100}

@media screen and (max-width:640px){
.btn_top { display:none;}
}







/* Sub Layout */


/*Sub Visual */

.sub_visual {position:relative; overflow:hidden; height:420px; transition:all .1s linear; z-index:8; background:#f5f5f5;}
.sub_visual .visual_dot {position:absolute;left:0;top:0; z-index:4; width:100%;height:100%; /*background: url(../img/sub/visual_dot.png) repeat;*/ }
.sub_visual .visual_img {display:block;position:absolute; z-index:3; width:2000px; height:420px;margin:0 0 0 -1000px;left:50%}
.sub_visual .visual_img img{animation:ani_slide1 3s ease-in-out;display:block;margin:0 auto}

@keyframes ani_slide1{
  0%{margin-top:0}
  50%{margin-top:-20px}
  100%{margin-top:0}
}

.sub_visual .wrap{ position:absolute;left:50%;top:0;width:1200px; height:100%; z-index:100; display:table ; margin:0 0 0 -600px !important;}
.sub_visual .text{ position:relative; display: table-cell; vertical-align: middle; width:;  z-index:9; }
.sub_visual h2 { font-size: 68px; font-weight:500; margin:0; color:#fff; }
.sub_visual p {color: #e8e8e8; padding:0;  letter-spacing:0.5px; font-weight:200; margin:-52px 0 0 0;}
.sub_visual p span {border-bottom:1px solid rgba(255, 255, 255, 0.4); display:inline-block; line-height:1.9em; }

@media all and (max-width:1260px) {
.sub_visual .wrap {left:0; top:0;width:100%; height:; margin:0 2% !important;}
.sub_visual p {font-size:14px;}
}
@media all and (max-width:1200px) {
.sub_visual{ height:280px; margin:0 0 0 0;}
.sub_visual.navi_none {margin:0px 0 0 0;}
.sub_visual .visual_img {height:280px; width:1200px ; margin-left:-600px }
.sub_visual h2 { font-size: 48px;}
}
@media all and (max-width:640px) {
.sub_visual{height:240px; transition:all .3s ease}
.sub_visual .visual_dot {position:absolute;left:0;top:0; z-index:4; width:100%;height:100%; background: url(../img/sub/visual_dot.png) repeat;  }
.sub_visual .visual_img {height:240px;}
.sub_visual .visual_img img{width:100%; animation:ani_slide2 2s ease-in-out;display:block;margin:0 auto}
.sub_visual h2 { font-size: 32px; margin:-30px 0 0 0; font-weight:500; text-align:center; color:#fff;}
.sub_visual p {display:none;}
.visual_short .sub_visual{height:180px;}
.visual_short .sub_visual .visual_img {height:180px;}
.visual_short .sub_visual h2 {margin:0 0 0 0;}
}

@keyframes ani_slide2{
  0%{margin-top:0}
  50%{margin-top:-10px}
  100%{margin-top:0}
}





.sub_container {clear:both; position:relative; margin:0 auto;  z-index:1;overflow:hidden; padding:50px 0 70px 0; min-height:680px; }
.sub_container:after {clear:both; display:block; content:"";}
.sub_container.lining {border-top:1px solid rgba(0,0,0,0.1);}

@media all and (max-width:640px) {
.sub_container {padding:30px 0 50px 0; min-height:auto; }
}

/* 서브메뉴 */
.submenu {margin:-52px 0 0 0; position:relative; z-index:10;}
.submenu .submenu_item {text-align:center; background:#fff; height:51px; border-bottom:1px solid #e9e9e9;}
.submenu .submenu_item a {display:inline-block; line-height:49px; vertical-align:middle; margin:0 12px; color:#777; font-weight:200;}
.submenu .submenu_item a.on {border-bottom:3px solid #555; color:#333; font-weight:400;}

@media all and (max-width:640px) {
.submenu {margin:20px 0 0 0;}
.submenu .submenu_item {height:auto; border-bottom:0px solid #e9e9e9; margin:0 0 0 -5px;}
.submenu .submenu_item:after {clear:both; display:block; content:"";}
.submenu .submenu_item span {display:block; float:left; width:33.333%; }
.submenu .submenu_item a { display:block; line-height:40px; margin:0 0 5px 5px; border:1px solid #e9e9e9; font-size:14px;}
.submenu .submenu_item a.on {border-bottom:0px solid #555; border:1px solid #555;}
.submenu .submenu_item a .mobile {display:inline; float:none; width:auto;}
}
@media all and (max-width:480px) {
.submenu .submenu_item a .mobile {display:none;}
}




/* 모바일 페이지 네비게이션 */
.m_page_navi {display:none;}

@media screen and (max-width:640px){
.m_page_navi {display:block; position:absolute; z-index:12; width:100%; margin:184px 0 0 0;}
.m_page_navi:after {clear:both; display:block; content:"";}
.m_page_navi ul li {width:50%; float:left;}
.m_page_navi ul li.prv {text-align:left;}
.m_page_navi ul li.nxt {text-align:right;}
.m_page_navi ul li.prv dl {padding:0 0 0 8px; }
.m_page_navi ul li.nxt dl {padding:0 8px 0 0;}
.m_page_navi ul li dl dd {font-size:13px; color:#fff; line-height:1em; padding:4px 0 0 0; letter-spacing:0.5px;}
}




/*타이틀, path*/
.tit_area{  position:relative; color:#333; z-index:1999 !important ; margin-bottom:3em; }
.tit_area h2{  font-size:38px; padding:0 ; letter-spacing:-1px; font-weight:400 ; color:#333;}

@media all and (max-width:1200px) {
.tit_area h2 {font-size: 30px;}
}
@media screen and (max-width:1000px){
.sub_container{  padding:50px 0;}
.tit_area {margin-bottom:2em; text-align:center;}
}
@media screen and (max-width:860px) {
.tit_area h2 { font-size:28px;}
}
@media screen and (max-width:640px){
.sub_container{  padding:30px 0;}
.tit_area h2{  font-size:22px;   }
}









/* 서브 컨텐츠*/
.sub_contents {width:77%; float:left;}
.sub_contents .contents_inner {margin:0 72px 0 0;}

.sub_contents.wide {width:100%;}
.sub_contents.wide .contents_inner {margin:0 0 0 0;}

@media screen and (max-width:1000px){
.sub_contents {width:100%;}
.sub_contents .contents_inner {margin:0 0 0 0;}
}




/* 서브 공통 - Right */
.sub_right {width:23%; float:left;}
.sub_right .sub_right_tit {font-size:18px; font-weight:400; padding:0 0 14px 0;}

.sub_right .right_product .right_product_list li {margin:0 0 5px 0; border:1px solid #e9e9e9;}
.sub_right .right_product .right_product_list li:hover {border:1px solid #555;}
.sub_right .right_product .right_product_list li p {line-height:42px; padding:0 20px; background: url("../img/common/plus_small.png") 94% center no-repeat;}
.sub_right .right_product .right_product_list li:hover p {background: url("../img/common/plus_small_on.png") 94% center no-repeat;}
.sub_right .right_product .right_product_list li p a {display:block;}

.sub_right .right_download .right_download_list li dl {margin:0 0 10px 0;}
.sub_right .right_download .right_download_list li dl a {display:block;}
.sub_right .right_download .right_download_list li dl a:after {clear:both; display:block; content:"";}
.sub_right .right_download .right_download_list li dl dt {float:left; width:40px; padding:9px 0 0 0;}
.sub_right .right_download .right_download_list li dl dd {float:left; margin:0 0 0 0;}
.sub_right .right_download .right_download_list li dl dd .d_sub {font-size:13px; font-weight:200; color:#999;}

.sub_right .right_contact dl:after {clear:both; display:block; content:"";}
.sub_right .right_contact dl dt {width:86px; float:left;}
.sub_right .right_contact dl dd {float:left;}
.sub_right .right_contact dl dd p {padding:0 0 0 12px;}
.sub_right .right_contact dl dd .c_name {font-size:15px; margin:8px 0 0 0; max-width: 170px;}
.sub_right .right_contact dl dd .c_job {font-size:13px; font-weight:200; color:#999;}
.sub_right .right_contact dl dd .c_send {font-size:14px; font-weight:400; margin:4px 0 0 0;}
.sub_right .right_contact dl dd .c_send span {padding:0 0 0 5px;}
.sub_right .right_contact dl dd .c_send span img {vertical-align:middle;}

@media screen and (max-width:1000px){
.sub_right {width:100%; border-top:2px solid #ddd; margin:32px 0 0 0; padding:32px 0 0 0;}
.sub_right:after {clear:both; display:block; content:"";}
.sub_right .sub_right_tit {font-size:16px; padding:0 0 8px 0;}

.sub_right .right_product {width:50%; float:left;}
.sub_right .right_product .sub_right_tit {margin:0 20px 0 0;}
.sub_right .right_product .right_product_list {margin:0 20px 0 0;}
.sub_right .right_download {width:50%; float:left; margin-top:0 !important;}
.sub_right .right_download .sub_right_tit {margin:0 0 0 20px;}
.sub_right .right_download .right_download_list {margin:0 0 0 20px;}

.sub_right .right_contact {display:none;}
}
@media screen and (max-width:640px){
.sub_right .right_product {width:100%;}
.sub_right .right_product .sub_right_tit {margin:0 0 0 0;}
.sub_right .right_product .right_product_list {margin:0 0 0 0;}
.sub_right .right_product .right_product_list li p {line-height:36px; padding:0 12px; font-size:14px;}
.sub_right .right_download {width:100%; margin-top:20px !important;}
.sub_right .right_download .sub_right_tit {margin:0 0 0 0;}
.sub_right .right_download .right_download_list {margin:0 0 0 0;}
}
@media screen and (max-width:400px){
.sub_right {display:none;}
}