@charset "utf-8";

@import url("font.css");

/* RESET */
* {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {box-sizing:border-box;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
td,th {padding:0}

body {background:#fff;overflow-y:scroll !important}
body,th,td,input,select,textarea,button {font-family:'nanum-square-r', sans-serif;font-weight:normal;font-style:normal;color:#444}
a {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

/* LAYOUT */
html, body {width:100%;height:100%}
.wrap {width:100%;height:100%}

/* UNDER iE6 */
*html .container {height:100%}
.content {min-height:calc(100vh - 173px);padding:0;}
.footer {position:relative;}

/* COMMON */
legend, caption {display:none;width:0;height:0;font-size:0;line-height:0}
.txt_hide {overflow:hidden;position:absolute;top:-5000px;left:-5000px;width:0.1%;height:0.1%;line-height:0.1%;font-size:0.1%}
.clear:before,
.clear:after {content:" ";display:table;clear:both}
.blind {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0.1em;line-height:0.01em;text-indent:-9999px}
.font_Barun {font-family: 'NanumBarunGothic','Nanum Gothic','Malgun Gothic','돋움','Dotum','Apple Gothic',sans-serif;}
.br_1024 {display: block;}
.tt_upper {text-transform:uppercase}
.tt_none {text-transform:none !important}

/* WIDTH */
.wf3 {width: 3px;}
.wf6 {width: 6px;}
.wf10 {width: 10px;}
.wf16 {width: 16px;}
.wf20 {width: 20px;}
.wf25 {width: 25px;}
.wf30 {width: 30px;}
.wf35 {width: 35px;}
.wf40 {width: 40px;}
.wf50 {width: 50px;}
.wf55 {width: 55px;}
.wf60 {width: 60px;}
.wf75 {width: 75px;}
.wf80 {width: 80px;}
.wf90 {width: 90px;}
.wf100 {width: 100px;}
.wf110 {width: 110px;}
.wf120 {width: 120px;}
.wf130 {width: 130px;}
.wf150 {width: 150px;}
.wf160 {width: 160px;}
.wf170 {width: 170px;}
.wf190 {width: 190px;}
.wf200 {width: 200px;}
.wf210 {width: 210px;}
.wf250 {width: 250px;}
.wf270 {width: 270px;}
.wf300 {width: 300px;}
.wf305 {width: 305px;}
.wf400 {width: 400px;}
.wf500 {width: 500px;}

.w3 {width: 3%; text-align: center;}
.w5 {width: 5%;}
.w10 {width: 10%;}
.w12 {width: 12%;}
.w15 {width: 15%;}
.w16 {width: 16.66%;}
.w20 {width: 20%;}
.w21 {width: 20.1%;}
.w23 {width: 23.5%;}
.w24 {width: 24.1%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w31 {width: 30.7%;}
.w35 {width: 35%;}
.w40 {width: 40%;}
.w45 {width: 45%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w70 {width: 70%;}
.w74 {width: 74%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w90 {width: 90%;}
.w95 {width: 95%;}
.w99 {width: 99.5%;}
.w100 {width: 100%;}

.hf100 {height: 100px;}
.hf150 {height: 150px;}
.hf200 {height: 200px;}

/* align */
.a-l {text-align:left !important}
.a-c {text-align:center !important}
.a-r {text-align:right !important}

/* 스킵네비게이션 */
#skip-navi {height:0}
#skip-navi a {position:absolute;top:-9999px;z-index:10000;width:100%;height:30px;background-color:#000;color:#fff;font-weight:600;text-align:center;line-height:30px;opacity:0.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}
#skip-navi a:hover,
#skip-navi a:focus,
#skip-navi a:active {top:0;color:#fff}

/* 주메뉴(gnb) */
#header .h_group {overflow:visible;position:fixed;top:0;left:0;z-index:999;width:100%;height:79px;border-bottom:1px solid #888a9a;background-color:transparent}
#header .h_group:before {content:"";position:absolute;top:79px;left:0px;width:100%;height:1px}
#header .h_group > div {position:relative;height:79px;max-width:1200px;margin:0 auto}
#header .h_group > div:after {display:block;clear:both;content:''}
#header .h_group > div h1 a {position:absolute;left:0px;top:36px}
#header .h_group > div h1.top_logo a {display:block;position:absolute;top:25px;left:0px;width:150px;height:40px;background:url(../img/common/gnb_logo_white.png) no-repeat;background-size:97px 40px;text-indent:-9999px;cursor:pointer}
#header .h_group.affix h1.top_logo a,
#header .h_group.sub h1.top_logo a,
#header .h_group.menu_hover h1.top_logo a {background:url(../img/common/infosec_logo_sm.png) no-repeat; background-size:100%}

#header .h_group.menu_hover > div h1 span,
#header .h_group.affix > div h1 span,
#header .h_group.sub > div h1 span {color:#111}

#header .h_group.affix,
#header .h_group.sub {border-bottom:1px solid #e8e8e8;background:#fff}

#header .h_group.affix #gnb > .box > ul > li > a,
#header .h_group.sub #gnb > .box > ul > li > a {color:#111;}

#header .h_group.affix #gnb > .box > ul > li > p > a,
#header .h_group.sub #gnb > .box > ul > li > p > a {color:#111;}

#header .h_group.affix #gnb > .box > ul > li > p > a:hover,
#header .h_group.sub #gnb > .box > ul > li > p > a:hover {color:#111;}

#header .h_group.affix #gnb > .box > ul > li > a:hover,
#header .h_group.sub #gnb > .box > ul > li > a:hover {color:#e0002a}

#header .h_group.affix #gnb > .box > ul > li > a:focus,
#header .h_group.sub #gnb > .box > ul > li > a:focus {color:#e0002a}

#header .gnb_blog a:hover {color:#fff !important;cursor:pointer !important}
#header .h_group.menu_hover .gnb_blog a:hover,
#header .h_group.affix .gnb_blog a:hover,
#header .h_group.sub .gnb_blog a:hover {color:#111 !important;cursor:pointer !important}

#header .gnb_about a:hover {color:#fff !important;cursor:pointer !important}
#header .h_group.menu_hover .gnb_about a:hover,
#header .h_group.affix .gnb_about a:hover,
#header .h_group.sub .gnb_about a:hover {color:#111 !important;cursor:pointer !important}

#header .gnb_support a:hover {color:#fff !important;cursor:pointer !important}
#header .h_group.menu_hover .gnb_support a:hover,
#header .h_group.affix .gnb_support a:hover,
#header .h_group.sub .gnb_support a:hover {color:#111 !important;cursor:pointer !important}

#gnb {position:absolute;left:50%;margin-left:-300px;padding:30px 0 0 0}
#gnb .btn_menu {display:none;}
#gnb .btn_close {display:none;}
#gnb .util_menu_m {display:none;}

#gnb > .box {display:table-cell;width:900px;margin:0 auto;text-align:center}
#gnb > .box > ul {display:block}
#gnb > .box > ul:after {display:block;clear:both;content:''}
#gnb > .box > ul > li {position:relative;display:inline-block;width:19%;text-align:center;}
#gnb > .box > ul > li > p > a {display:block;font-size:18px;color:#fff;cursor:default;}
#gnb > .box > ul > li > p > a:hover {color:#111;cursor:default}

#gnb > .box > ul > li > .sub_menu {display:none;position:absolute;top:49px;left:-135px;width:1180px;}
#gnb > .box > ul > li:nth-child(2) > .sub_menu {left:-310px;}
#gnb > .box > ul > li:nth-child(3) > .sub_menu {left:-486px;}
#gnb > .box > ul > li:nth-child(4) > .sub_menu {left:-660px;}

#gnb > .box > ul > li > .sub_menu > .inner {float:left;position:absolute;left:0;z-index: 999}
#gnb > .box > ul > li:nth-child(2) > .sub_menu > .inner {left:100px}
#gnb > .box > ul > li:nth-child(3) > .sub_menu > .inner {left:247px}

#gnb > .box > ul > li > .sub_menu > .inner > ul {text-align:left;}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li {margin-bottom:15px;}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a {display:block;font-size:15px;color:#111;}
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:hover,
#gnb > .box > ul > li > .sub_menu > .inner > ul > li > a:focus {color:#e0002a}
#gnb > .box > ul > li > .sub_menu > .inner .depth2_menu {float:left;padding-right:90px;}
#gnb > .box > ul > li > .sub_menu > .inner .depth2_menu:nth-last-of-type(1) {padding-right:0px;}
#gnb > .box > ul > li > .sub_menu > .inner .depth2_menu li:nth-child(1) a {margin-bottom:30px;padding-top:30px;font-size: 17px; color:#111; font-weight:bold;}
#gnb > .box > ul > li > .sub_menu > .inner .depth3_menu li {margin-bottom:15px;}
#gnb > .box > ul > li > .sub_menu > .inner .depth3_menu a {font-weight: normal;font-size: 15px;color: #666;}
#gnb > .box > ul > li > .sub_menu > .inner .depth3_menu li:nth-child(1) a {font-weight: normal;font-size: 15px;color: #666;font-family: 'nanum-square-r';}

#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg {float:right;width:240px;height:290px;padding-right:0;text-align:center;border-left:1px solid #f5f5f5}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg.menu1 {background:url(../img/common/simbol_product.png) no-repeat center top 30px;}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg.menu2 {background:url(../img/common/simbol_company.png) no-repeat center top 30px;}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg.menu3 {background:url(../img/common/simbol_news.png) no-repeat center top 30px;}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg.menu4 {background:url(../img/common/simbol_news.png) no-repeat center top 30px;}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg .title {margin-top:150px;font-size:18px;color:#444}
#gnb > .box > ul > li > .sub_menu > .depth2_menu_bg .text {margin-top:10px;font-size:13px;color:#888;line-height: 150%;}

#gnb > .box > ul > li > .sub_menu > .inner .depth2_menu li a:hover {color:#e0002a}
#gnb > .box > ul > li > .sub_menu > .inner .depth2_menu li:nth-child(1) a:hover {color:#e0002a;cursor: pointer;}
#gnb > .box > ul > li > .sub_menu > .inner .depth3_menu li:nth-child(1) a:hover {color:#e0002a;cursor: pointer;}
#gnb > .box > ul > li > .sub_menu.news_room a {color: #111}
#gnb > .box > ul > li > .sub_menu.news_room a:hover {color:#e0002a !important;cursor: pointer !important;}

/* 로그인 */
#header .util_menu {position:absolute;right:0;top:23px}
#header .util_menu ul {float:left;font-size:0;line-height:0}
#header .util_menu ul li {display:inline-block;vertical-align:top}
#header .util_menu ul li:nth-child(1) {margin-right:10px}
#header .util_menu ul li a {display:inline-block;height:30px;padding:0 10px;border:1px solid #999dad;font-size:14px;color:#fff;line-height:30px}
#header .util_menu .keyword {position:relative;float:left;height:30px;margin-right:10px;line-height:30px}
#header .util_menu .keyword a {display:block;margin-left:10px;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
#header .util_menu .keyword input {display:none;width:0;position:absolute;right:0;top:0;text-indent:0;padding:0 20px 0 0;background-color:transparent;border:none;border-bottom:1px solid #999dad;outline:none;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
#header .util_menu .keyword.show input {width:137px;height:30px}
#header .util_menu .keyword input::placeholder {color:#f8f8f8}
#header .util_menu .util-1 span {display:block;width:30px;height:30px;border:1px solid #999dad;background:url(../img/common/btn_search_white.png) center center no-repeat;font-size:12px;color:transparent;text-indent:-9999px}
#header .util_menu .keyword.show .util-1 {-webkit-transform:translateX(-144px);transform:translateX(-144px);opacity:1}
#header .util_menu .btn-cl-search {display:none;position:absolute;right:0px;top:5px;opacity:0}
#header .util_menu .btn-cl-search span {display:block;width:18px;height:18px;color:transparent;font-size:12px;text-indent:-9999px;background:url(../img/common/btn_close_pop_white.png) center center no-repeat}
#header .util_menu .keyword.show .btn-cl-search {display:block;opacity:1}
#header .util_menu .keyword.show .btn-cl-search:hover::after {clear:both;display:none}


/* */
#header .h_group.menu_hover .util_menu .keyword input,
#header .h_group.affix .util_menu .keyword input,
#header .h_group.sub .util_menu .keyword input {border-bottom:1px solid #51555d}
#header .h_group.menu_hover .util_menu .keyword input::placeholder,
#header .h_group.affix .util_menu .keyword input::placeholder,
#header .h_group.sub .util_menu .keyword input::placeholder {color:#444}
#header .h_group.menu_hover .util_menu .util-1 span,
#header .h_group.affix .util_menu .util-1 span,
#header .h_group.sub .util_menu .util-1 span {background:url(../img/common/btn_search.png) center center no-repeat}
#header .h_group.menu_hover .btn-cl-search span,
#header .h_group.affix .btn-cl-search span,
#header .h_group.sub .btn-cl-search span {background:url(../img/common/btn_close_pop.png) center center no-repeat}
#header .h_group.menu_hover ul li a,
#header .h_group.affix .util_menu ul li a,
#header .h_group.sub .util_menu ul li a {color:#111}
#header .util_menu ul li.btn_sitemap {display:inline-block;height:30px;background:url(../img/common/btn_sitemap_white.png) no-repeat center center;line-height:30px;}
#header .h_group.affix .util_menu ul li.btn_sitemap,
#header .h_group.sub .util_menu ul li.btn_sitemap,
#header .h_group.menu_hover ul li.btn_sitemap {display:inline-block;height:30px;background:url(../img/common/btn_sitemap.png) no-repeat center center;line-height:30px}
#header .util_menu ul li.btn_sitemap a {padding: 0 15px;}

/* 푸터 */
.footer {padding:30px 0;background:#fff;width:100%;display:block;clear:both;}
.footer_wrap {position:relative;max-width:1200px;margin:0 auto;text-align:left;display:block;}
.footer_wrap .footer_logo {display:table-cell;vertical-align:middle;width: 140px;height: 41px;background:url(../images/footer_logo.png) no-repeat top 7px left;text-indent: -9999px;background-size: 97px 41px;}
.footer_wrap .copy_txt {display:table-cell;width:590px;vertical-align:middle;}
.footer_wrap .copy_txt .add {font-size:12px;color:#767676;line-height:160%;margin-bottom:5px;}
.footer_wrap .copy_txt a.privacy, .footer_wrap .copy_txt .add a {font-size:12px;color:#222;position:relative;}
.footer_wrap .copy_txt a.privacy:after {content:"";position:absolute;width:90px;height:1px;left:0;top:14px;background-color:#222;}
.footer_wrap .copy_txt .copyright {font-size:12px;color:#999;}
.footer_wrap .web {display: block;}
.footer_wrap .mobile {display: none;}

/* 상단 바로가기 */
.btn_top .web {display: block;}
.btn_top .mobile {display: none;}
.btn_top {display:none;position:fixed;bottom:0;right:20px;width:auto;z-index:2;opacity:0;-webkit-transition-duration:0.4s;transition-duration:0.4s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.btn_top.show {opacity:1}
.btn_top .inner {position:relative;width:auto;margin:0 auto;text-align:center;}
.btn_top .inner a.contact {display:block;position:absolute;bottom:224px;right:0px;width:75px;height:75px;border-radius:50%;text-align:center;background:#ea002c;color:#fff;font-size:14px;box-shadow:4px 6px 21px 0px rgba(0, 0, 0, 0.37);}
.btn_top .inner a.contact img {margin-top:10px;width:32px;}
.btn_top .inner a.top {display:block;position:absolute;bottom:174px;right:10px;width:50px;height:50px;text-align:center;color:#000;font-size:13px;font-family: 'nanum-square-b';padding-top: 10px}

.btn_top .inner a.m-contact {bottom:200px;width:65px;height:65px;font-size:13px;}
.btn_top .inner a.m-contact img {margin-top:8px;width:25px;}
.btn_top .inner a.m-top {display:block;position:absolute;bottom:124px;right:0px;width:65px;height:65px;border-radius:50%;text-align:center;background:#404040;color:#fff;font-size:13px;font-family: 'nanum-square-b';box-shadow:4px 6px 21px 0px rgba(0, 0, 0, 0.37);padding-top:15px}
.btn_top span {display:block;text-indent:-9999px}


@media all and (max-width:1200px){

    /* 메인 */
    .header {min-width:100%}
    .gnb-menu {width:100%}
    .container {min-width:100%;}
    #header .h_group {height:60px !important;padding-left:20px}
    #header .h_group > div {height:60px;}
    #header .h_group > div h1 span.top_logo_txt {display:block}
    #header .h_group.affix .util_menu ul li a,
    #header .h_group.sub .util_menu ul li a {color:#fff}
    #header .h_group > div h1.top_logo a {top:11px;width:86px;height:35px;background-size:86px 35px}
    #gnb .btn_menu {display:inline-block;position:absolute;top:16px;right:20px;background:url(../img/common/btn_sitemap_white.png) no-repeat center center;height:30px;line-height:30px;border:1px solid #999dad;padding:0 15px;font-size:0}
    #header .util_menu ul li.lang {position:absolute;right:48px;top:-7px;}
    #header .util_menu .list_lang li:nth-child(1) {position:static !important;}
    #header .util_menu ul li.btn_sitemap {display:none}
    #header .util_menu .keyword {position:absolute;right:115px;top:-7px}
    #header .h_group.affix .util_menu ul li.btn_sitemap, #header .h_group.sub .util_menu ul li.btn_sitemap, #header .h_group.menu_hover ul li.btn_sitemap {display:none;}
    #header .h_group.affix .util_menu ul li a, #header .h_group.sub .util_menu ul li a, #header .h_group.menu_hover .util_menu ul li a {color:#000;}
    #header .h_group.affix h1.top_logo a, #header .h_group.menu_hover h1.top_logo a, #header .h_group.sub h1.top_logo a {top:11px;width:86px;height:35px;background-size:86px 35px;}


    /* footer */
    .footer_wrap .web {display: none;}
    .footer_wrap .mobile {display: block; margin-top: -31px; width: 100%}
    .footer_wrap .mobile .btn_qna {display:block;vertical-align:top; width: 100%;background: #9a9a9a;margin-bottom: 25px;}
    .footer_wrap .mobile .btn_qna button {width:100%;display: block; height:60px;text-align:left;font-size: 18px;color: #fff;background: #e0002a url(../img/common/btn_qna_arow_m.png) no-repeat right 35px center;border:0}
    .footer_wrap .mobile .footer_logo {display: block; width: 100%; height: 60px; text-align: center; background: url(../img/common/footer_logo.png) no-repeat center top; background-size: 105px 44px;}
    .footer_wrap .mobile .copy_txt {font-size: 0; line-height: 0;width: 100%;display: block;}
    .footer_wrap .mobile .privacy_div {display: inline-block; width: 50%; height: 32px; line-height: 32px;text-align: right; padding-right: 5px;}
    .footer_wrap .mobile .copy_txt a.privacy {line-height: 100%;}
    .footer_wrap .mobile .link_area {display: inline-block; width: 50%; height: 32px; line-height: 32px; text-align: left; padding-left: 5px}
    .footer_wrap .mobile .link_area .family_site {display: inline-block;height: 32px; line-height: 32px; text-align: left;}
    .footer_wrap .mobile .link_area .family_site .select_box {left: 0;}
    .footer_wrap .mobile a.family_select {padding: 0 10px}
    .footer_wrap .mobile .copy_txt .add {text-align: center; padding: 0 20px; margin-top: 10px; word-break: keep-all;}
    .footer_wrap .mobile .copy_txt .copyright  {text-align: center; margin-top: 15px; padding: 0 20px}
	.footer_wrap .mobile .social_link {text-align:center;padding:15px 0}

	.btn_top .web {display: none;}
	.btn_top .mobile {display: block;}

}

@media all and (max-width:1024px){

    .br_1024 {display: inline;}

}

@media all and (max-width:640px){

    /* GNB */
    #header .h_group > div h1 span.top_logo {display:block;position:absolute;top:32px;left:0px;width:54px;height:19px;background:url(../img/logo.png) no-repeat;background-size:54px 19px}
    #header .h_group > div h1 span.top_logo_txt {left:65px;top:29px;line-height:120%}
    #gnb .util_menu_m {left: 25px;}
    #gnb .btn_close {right: 25px;}
    #gnb .util_menu_m li a {font-size: 20px;}
    #gnb > .box > ul > li > p > a {padding: 20px;}
    #gnb > .box > ul > li > .sub_menu > .inner .depth2_menu li a {padding: 20px 25px;}
    #gnb > .box > ul > li > p > a {font-size:22px;background:url(../img/common/bul_up.png) no-repeat top 20px right  25px;padding: 20px 25px}
    #gnb > .box > ul > li > p.current > a {background: url(../img/common/bul_down.png) no-repeat top 28px right 25px;font-size:22px;}
    .depth2_menu > li > a {font-size:20px;background:url(../img/common/bul_up_depth.png) no-repeat top 20px right  25px;padding: 20px 25px}
    .depth2_menu > li.current > a {font-size:20px;background:url(../img/common/bul_down_depth.png) no-repeat top 28px right  25px;padding: 20px 25px}
    #gnb > .box > ul > li > .sub_menu > .inner .depth3_menu {background-color: #f8f8f8;padding:0 25px;}
    #gnb > .box > ul > li > .sub_menu > .inner .depth3_menu li a:before {content:"";position:absolute;top:30px;left:15px;width:3px;height:3px;background-color: #bcbcbc;}
    .footer_wrap .mobile .br {display: block;}

}

@media all and (max-width:320px){

    .footer_wrap .mobile .none {display: none;}
    .footer_wrap .mobile .privacy_div {display: block; width: 100%; text-align: center;}
    .footer_wrap .mobile .link_area {display: block; width: 100%;  text-align: center;}
    .footer_wrap .mobile .link_area .family_site {display: block; width: 100%;}
    .footer_wrap .mobile .link_area .family_site .select_box { left: 50%; transform: translateX(-50%);}
    .footer_wrap .mobile .copy_txt .copyright {line-height: 140%;}

}