@charset "utf-8";

html {overflow:auto;min-width:320px;}
body {overflow:hidden;}

/* mask */
.mask {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);transition-property:visibility, opacity;z-index:1;}

/* 새로고침 */
.xi-refresh {font-size:0;}
.xi-refresh::before {font-size:15px;}

/* wrap */
#wrap {position:relative;}

/* 홍보동영상 */
.main_video {position:fixed;background:rgba(0,0,0,0.7);top:0;right:0;bottom:0;left:0;z-index:10;display:none;}
.main_video video {width:calc(100% - 200px);max-width:1000px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main_video .close {width:40px;height:40px;position:absolute;top:50%;left:50%;margin-left:464px;margin-top:-352px;}
.main_video .close::before {content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg);width:100%;height:3px;background:#fff;}
.main_video .close::after {content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg);width:100%;height:3px;background:#fff;}

.topbanner {display:none;}
.inner {position:relative;width:1280px;margin:0 auto;}
.header_fix #header {position:fixed;left:0;top:0;width:100%;z-index:10;-webkit-box-shadow:6px 6px 10px 0px rgba(0, 0, 0, 0.08);box-shadow:6px 6px 10px 0px rgba(0, 0, 0, 0.08);}

/* header */
#header {position:fixed;left:0;top:0;width:100%;min-height:92px;background-color:transparent;z-index:3;-webkit-transition:all 0.3s;transition:all 0.3s;}
#header .logo,
#header .m_logo {position:absolute;left:60px;top:29px;width:120px;height:38px;text-indent:-9999px;}
#header .logo a,
#header .m_logo a {display:block;width:100%;height:100%;background:url(../img/layout/logo.svg) left top no-repeat;background-size:120px;}

#visual {-webkit-transition:0.4s ease;transition:0.4s ease;}
.contents_util {-webkit-transition:0.4s ease;transition:0.4s ease;}

#hnb {position:absolute;right:112px;top:30px;}
.hnb2 li {position:relative;float:left;}
.hnb2 li.login {width:32px;height:32px;border-radius:100%;background:url(../img/layout/bg_hnb.png) left top;}
.hnb2 li.login a {display:block;width:100%;height:100%;padding-top:32px;overflow:hidden;}
.hnb2 li.login a::before,
.hnb2 li.login a::after {content:'';position:absolute;left:0;top:0;width:100%;height:100%;}
.hnb2 li.login a::before {border-radius:100%;border:2px solid transparent;-webkit-transition:all 0.2s;transition:all 0.2s;}
.hnb2 li.login a:hover::before {border-color:#848484 !important;}
.hnb2 li.login a::after {background:url(../img/layout/icon_login.png) left top no-repeat;}
.hnb2 .global {position:relative;width:104px;height:32px;margin:0 25px 0 11px;font-size:14px;border:2px solid transparent;border-radius:16px;background:url(../img/layout/bg_hnb.png) left top;-webkit-transition:border-color 0.2s, border-radius 0.1s;transition:border-color 0.2s, border-radius 0.1s;}
.hnb2 .global:hover {border-color:#848484 !important;}
.hnb2 .global::after {content:'';position:absolute;left:3px;top:-2px;width:28px;height:28px;background:url(../img/layout/icon_global.png) left top no-repeat;}
.hnb2 .global > a {position:relative;display:block;padding:5px 34px 0;height:28px;color:#fff;font-weight:700;z-index:2;}
.hnb2 .global > a::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;}
.hnb2 .global > a::after {content:'\e936';font-family:"xeicon";position:absolute;right:11px;top:1px;font-size:8px;line-height:28px;color:#fff;-webkit-transition:all 0.2s;transition:all 0.2s;}
.hnb2 .global .lang {position:relative;overflow:hidden;visibility:hidden;position:absolute;top:30px;left:50%;margin-left:-52px;text-align:center;width:calc(100% + 4px);height:0;padding:0;background-color:#fff;border:2px solid transparent;border-top:0;border-radius:0 0 16px 16px;-webkit-transition:height 0.2s, border-color 0.2s, background-color 0.2s;transition:height 0.2s, border-color 0.2s, background-color 0.2s;}
.hnb2 .global .lang::before {content:'';position:absolute;left:50%;top:0;margin-left:-37px;width:74px;height:1px;background-color:#e5e5e5;}
.hnb2 .global .lang a {display:block;margin-bottom:8px;padding-right:2px;}
.hnb2 .global .lang a:hover {color:#3269c3;}
.hnb2 .global .lang a:first-child {margin-top:10px;}
.hnb2 .global.active {border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#848484 !important;background:#fff;}
.hnb2 .global.active > a::after {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.hnb2 .global.active .lang {height:70px;visibility:visible;opacity:1;border-color:#848484;}
.hnb2 .hnb_search .label {position:relative;display:block;width:32px;height:32px;padding-top:32px;text-indent:-9999px;background:url(../img/layout/icon_search.png) left top no-repeat;}
#header .search {display:none;position:absolute;top:92px;right:0;width:100%;background-color:#fff;-webkit-box-shadow:4px 2px 6px rgba(0,0,0,.12);box-shadow:4px 2px 6px rgba(0,0,0,.12);z-index:99;}
#header .form {position:relative;margin:54px auto;width:600px;z-index:999;}
#header .search input {width:100%;height:50px;line-height:32px;padding-left:24px;color:#787878;border:0 none;background-color:#f4f4f4;}
#header .search .form button {position:absolute;right:0;top:0;min-width:36px;width:36px;height:32px;padding:25px;background:#2284ec url(../img/layout/btn_search.png) center center no-repeat; font-size:0;text-indent:-9999px;-webkit-transition:all 0.2s;transition:all 0.2s;}
#header .search .form button:hover,
#header .search .form button:focus {background-color:#1a6fca;}
#header .search .close {position:absolute;width:32px;height:32px;top:-62px;right:112px;border:none;text-indent:-9999px;background-color:#fff;}
#header .search .close::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;line-height:32px;font-family:"xeicon";font-size:24px;font-weight:700;color:#4d4d4d;text-indent:0;-webkit-transform:rotate(0);transform:rotate(0);-webkit-transition:all 0.2s;transition:all 0.2s;margin-top:0;}
#header .search .close:hover::before, 
#header .search .close:focus::before {-webkit-transform:rotate(180deg);transform:rotate(180deg);}

/* gnb */
#gnb {clear:both;width:878px;margin:0 auto;z-index:1;-webkit-transition:all 0.2s;transition:all 0.2s;}
#gnb::after {content:'';position:absolute;left:-100%;top:91px;width:1000%;height:1px;background-color:rgba(255,255,255,.3);z-index:-1;}
#gnb::before {content:'';display:none;position:absolute;left:50%;top:92px;width:100%;height:calc(100% - 92px);-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#fff url(../img/layout/bg_submenu.png) right bottom no-repeat;-webkit-box-shadow:7px 7px 10px 0px rgba(0,0,0,.1);box-shadow:7px 7px 10px 0px rgba(0,0,0,.1);z-index:-1;-webkit-transition:all 0.5s;transition:all 0.2s;}
#gnb > ul {display:table;width:100%;}
#gnb > ul > li {position:relative;display:table-cell;color:#fff;}
#gnb > ul > li > a {position:relative;display:block;text-align:center;padding:32px 40px 34px;font-size:18px;font-weight:700;-webkit-transition:all 0.2s;transition:all 0.2s;z-index:1;}
#gnb > ul .submenu {position:relative;display:none;color:#525252;z-index:1;width:100%;height:420px;padding:12px 0 24px;z-index:2;-webkit-transition:all 0.2s;transition:all 0.2s;}
#gnb > ul .submenu div {display:none;} 
#gnb > ul .submenu a {display:block;padding:6px 16px 5px;}
#gnb > ul .submenu a:hover,
#gnb > ul .submenu a:focus {color:#1a5dc1;font-weight:700;}
#gnb > ul > li.active::before {content:'';position:absolute;left:0;top:92px;width:100%;height:calc(100% - 92px);background:#f7f7f7;z-index:-1;}
#gnb > ul > li.active .submenu::before {content:'';position:absolute;left:0;top:0;width:100%;height:1px;background-color:#1a5dc1;}

/* header_hover */
.header_hover #quick,
.header_hover #quick_nav {z-index:1;}
.header_hover #header,
.sitemap #header,
#header.hover,
#header.change {background-color:#fff;}
.sitemap #header .logo a,
.header_hover #header .logo a,
#header.hover .logo a,
#header.change .logo a {background-image:url(../img/layout/logo_hover.svg);}
.sitemap #header .hnb2 .login,
.header_hover #header .hnb2 .login,
#header.hover .hnb2 .login,
#header.change .hnb2 .login {background:transparent;}
.sitemap #header .hnb2 .login a::before, 
.header_hover #header .hnb2 .login a::before, 
#header.hover .hnb2 .login a::before, 
#header.change .hnb2 .login a::before {border-color:rgba(196, 196, 196, .5);}
.sitemap #header .hnb2 .login a::after, 
.header_hover #header .hnb2 .login a::after, 
#header.hover .hnb2 .login a::after, 
#header.change .hnb2 .login a::after {background-position:left -32px;}
.sitemap #header .hnb2 .global, 
.header_hover #header .hnb2 .global, 
#header.hover .hnb2 .global, 
#header.change .hnb2 .global {background:#fff;border-color:rgba(196, 196, 196, .5);}
.sitemap #header .hnb2 .global::after, 
.header_hover #header .hnb2 .global::after, 
#header.hover .hnb2 .global::after, 
#header.change .hnb2 .global::after {background-position:left -32px;}
.sitemap #header .hnb2 .global > a, 
.header_hover #header .hnb2 .global > a, 
#header.hover .hnb2 .global > a, 
#header.change .hnb2 .global > a {color:#8f8f8f;}
.sitemap #header .hnb2 .global > a::after, 
.header_hover #header .hnb2 .global > a::after, 
#header.hover .hnb2 .global > a::after, 
#header.change .hnb2 .global > a::after {color:#b7b7b7;}
.sitemap #header .hnb2 .label, 
.header_hover #header .hnb2 .label, 
#header.hover .hnb2 .label, 
#header.change .hnb2 .label {background-position:left -32px;}
.header_hover #header #gnb,
#header.hover #gnb,
#header.change #gnb {width:1070px;}
.header_hover #header #gnb > ul > li > a,
#header.hover #gnb > ul > li > a,
#header.change #gnb > ul > li > a {color:#525252;padding:32px 72px 34px;}
.header_hover #header #gnb::after,
.header_hover #header.active #gnb::after,
#header.hover #gnb::after,
#header.change #gnb::after,
#header.active #gnb::after {background-color:#dfdfdf;}
.header_hover #header.active #gnb::before,
#header.active #gnb::before {display:block;}
.header_hover #header.active #gnb > ul > li > a:hover,
.header_hover #header.active #gnb > ul > li.active > a,
#header.active #gnb > ul > li > a:hover,
#header.active #gnb > ul > li.active > a {color:#1a5dc1;}
#header.active #gnb > ul .submenu {display:block;}
.header_hover #header #gnb2 .open::before,
.header_hover #header #gnb2 .open::after,
.header_hover #header #gnb2 .open span,
#header.hover #gnb2 .open::before,
#header.hover #gnb2 .open::after,
#header.hover #gnb2 .open span,
#header.change #gnb2 .open::before,
#header.change #gnb2 .open::after,
#header.change #gnb2 .open span {background-color:#4d4d4d;}


/* gnb2 */
body.sitemap {overflow:hidden;}
#gnb2 {position:absolute;right:0;top:0;z-index:100;}
#gnb2 .open {overflow:hidden;position:absolute;right:58px;top:30px;width:32px;height:32px;text-indent:-9999px;z-index:3;}
#gnb2 .open::before,
#gnb2 .open::after {content:'';position:absolute;right:0;top:0;width:28px;height:3px;background-color:#fff;}
#gnb2 .open::before {top:5px;}
#gnb2 .open::after {top:25px;}
#gnb2 .open span {position:absolute;right:0;top:15px;width:23px;height:3px;background-color:#fff;-webkit-transition:all 0.2s;transition:all 0.2s;}
#gnb2 .open:hover span {width:28px;}
#gnb2 .close {display:none;position:fixed;right:0;top:0;width:60px;height:60px;text-indent:-9999px;background:#383838 url(../img/layout/btn_gnbClose.png) center center no-repeat;z-index:3;}
#gnb2.active .open {display:none;}
#gnb2.active .close {display:block;}
/* 스크롤 */
#gnb2 .mCustomScrollBox {height:100%;}
#gnb2 .mCSB_inside > .mCSB_container {margin-right:0;}
#gnb2 .mCSB_inside > .mCSB_container.mCS_y_hidden {height:100%;}
#gnb2 .mCSB_scrollTools {width:4px;opacity:1;}
#gnb2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
#gnb2 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
#gnb2 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
#gnb2 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {background-color:#2284ec;border-radius:0;}
#gnb2 .mCSB_scrollTools .mCSB_draggerRail {width:4px;background-color:#383838;border-radius:0;}
#m_header #gnb2 .open::before,
#m_header #gnb2 .open::after,
#m_header #gnb2 .open span {background-color:#383838;}

/* main */
#main {padding:72px 0 90px 0;height:100%;overflow-y:auto;}


/* footer */
#footer {position:fixed;right:0;bottom:0;left:0;z-index:10;}
/* #footer.main_foot_menu {position:absolute;bottom:0;left:0;right:0;} */
#footer .main_foot_menu ul {display:table;width:100%;}
#footer .main_foot_menu ul li {display:table-cell;text-align:center;width:20%;}
#footer .main_foot_menu ul li a {display:block;padding:35px 0 10px 0;background:#fff;font-size:12px;border-top:1px solid #e1e1e1;}
#footer .main_foot_menu ul li:nth-child(1) a {background:url(/app/img/m_menu01.png) center bottom 50px no-repeat #fff;}
#footer .main_foot_menu ul li:nth-child(2) a {background:url(/app/img/m_menu02.png) center bottom 50px no-repeat #fff;}
#footer .main_foot_menu ul li:nth-child(3) a {background:url(/app/img/m_menu03.png) center bottom 50px no-repeat #fff;}
#footer .main_foot_menu ul li:nth-child(4) a {background:url(/app/img/m_menu04.png) center bottom 50px no-repeat #fff;}
#footer .main_foot_menu ul li:nth-child(5) a {background:url(/app/img/m_menu05.png) center bottom 50px no-repeat #fff;}
#footer .main_foot_menu ul li:nth-child(1).active a {background:url(/app/img/m_menu01_on.png) center bottom 55px no-repeat #115ed2;}
#footer .main_foot_menu ul li:nth-child(2).active a {background:url(/app/img/m_menu02_on.png) center bottom 55px no-repeat #115ed2;}
#footer .main_foot_menu ul li:nth-child(3).active a {background:url(/app/img/m_menu03_on.png) center bottom 55px no-repeat #115ed2;}
#footer .main_foot_menu ul li:nth-child(4).active a {background:url(/app/img/m_menu04_on.png) center bottom 55px no-repeat #115ed2;}
#footer .main_foot_menu ul li:nth-child(5).active a {background:url(/app/img/m_menu05_on.png) center bottom 55px no-repeat #115ed2;}
#footer .main_foot_menu ul li.active a {font-weight:bold;color:#fff;padding-top:45px;}


/* quick */
#quick {position:fixed;right:-140px;top:92px;width:200px;color:#fff;font-weight:700;background-color:#eaeaea;z-index:2;-webkit-transition:all 0.2s;transition:all 0.2s;}
.gnb_active #quick {z-index:1;}
#quick a {position:relative;display:block;padding:20px 0 0 60px;height:60px;-webkit-transition:all 0.2s;transition:all 0.2s;}
#quick a::before {content:'';position:absolute;left:0;top:0;width:60px;height:60px;background-position:center center;background-repeat:no-repeat;-webkit-transition:all 0.2s;transition:all 0.2s;}
#quick .popup {color:#fff;background-color:#2284ec;}
#quick .popup a {padding:32px 0 0 17px;}
#quick .popup a::before {background-position:center 11px;background-image:url(../img/layout/icon_quickPopup.png);}
#quick .popup a span {display:none;opacity:0;}
#quick .link_list {color:#595959;}
#quick .link_list li + li a {border-top:1px solid #cacaca;}
#quick .link_list .link01 a::before{background-image:url(../img/layout/icon_linkList01.png);}
#quick .link_list .link02 a::before{background-image:url(../img/layout/icon_linkList02.png);}
#quick .link_list .link03 a::before{background-image:url(../img/layout/icon_linkList03.png);}
#quick .link_list .link04 a::before{background-image:url(../img/layout/icon_linkList04.png);}
#quick .link_list .link05 a::before{background-image:url(../img/layout/icon_linkList05.png);}
#quick .member_list .member01 a {background-color:#4b4b4b;}
#quick .member_list .member02 a {background-color:#f5803a;}
#quick .member_list .member01 a::before{background-image:url(../img/layout/icon_memberList01.png);}
#quick .member_list .member02 a::before{background-image:url(../img/layout/icon_memberList02.png);}
#quick.quick_hover {right:0;}
#quick.quick_hover .popup a {padding:20px 0 0 60px;}
#quick.quick_hover .popup a::before {background-position:center center;}
#quick.quick_hover .popup a span {opacity:1;display:inline;}
#quick .control_m {display:none;}

/* quick_nav */
#quick_nav {position:absolute;right:48px;z-index:1;-webkit-transition:all 0.5s;transition:all 0.5s;}
#quick_nav.btn_top_fix {position:fixed;}
#quick_nav a {position:relative;-webkit-transition:all 0.2s;transition:all 0.2s;}
#quick_nav .anchor > a {display:block;width:80px;height:80px;overflow:hidden;border-radius:100%;text-indent:-9999px;background:#57aeff url(../img/layout/icon_top.png) center center no-repeat;margin-bottom:14px;}
#quick_nav .anchor > a:hover {background-color:#1a6fca;}
/* 챗봇 버튼 */
.chat_active #footer {z-index:4;}
.chat a {-webkit-animation:findeep-widget-transform-zoomIn .5s cubic-bezier(.42, 0, .58, 1);animation:findeep-widget-transform-zoomIn .5s cubic-bezier(.42, 0, .58, 1);}
.findeep-widget-fab {position:relative;display:block;width:80px;height:80px;padding-top:100%;text-align:center;background:url(../img/layout/icon_chat.png) center center no-repeat;cursor:pointer;-webkit-transition:all .1s ease-out;transition:all .1s ease-out;overflow:hidden;}
.findeep-widget-fab::before {content:'\e921';font-family:"xeicon";position:absolute;left:0;top:0;width:100%;height:100%;line-height:80px;font-size:30px;color:transparent;background:url(../img/layout/icon_chat_off.png) center center no-repeat;background-size:32px auto;-webkit-transition:all 0.2s;transition:all 0.2s;}
.findeep-widget-fab.close::before {background-size:0;color:#fff;}
.findeep-widget-chat {position:absolute;right:93px;bottom:-36px;width:0;height:0;font-size:14px;font-weight:300;background-color:#fff;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;opacity:0;-webkit-box-shadow:13px 13px 13px 0px rgba(0, 0, 0, 0.12);box-shadow:13px 13px 13px 0px rgba(0, 0, 0, 0.12);border-radius:20px;-webkit-transition:all .2s ease-out;transition:all .2s ease-in-out;z-index:988;overflow:hidden;}
.findeep-widget-is-visible {opacity:1;width:402px;height:684px;-webkit-animation:findeep-widget-transform-zoomIn .2s cubic-bezier(.42, 0, .58, 1);animation:findeep-widget-transform-zoomIn .2s cubic-bezier(.42, 0, .58, 1);}
@-webkit-keyframes findeep-widget-transform-zoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes findeep-widget-transform-zoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}