/* header */
header{position: fixed; width:100%; z-index: 99; top:0; left:0; z-index: 100;}
header .main_nav{ position: relative;  background-color:rgba(0,0,0,.3); border-bottom:1px solid transparent;
    -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out;}
.main_nav .bd{align-items: center; height:80px;}
.nav_inner{display:inline-block; position: absolute;}

/* left */
.nav_inner.left{position: absolute; top:55%; transform:translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);
    z-index: 51; left:12px;}
.nav_inner.left > a > img{height:42px;}

/* right */
.nav_inner.right{position: absolute; width:100%;
    right:0; z-index: 50; height:80px;}
.nav_inner.right > ul > li{float:left; position: relative;}
.nav_inner.right > ul > li:last-child{margin-right:0;}
.nav_inner.right > ul > li a > img{height:42px;}

/* 그룹웨어, 로그아웃 */
.header .pc_staff {position: fixed; right:15px; top:8px; z-index: 15;}
.header .mob_staff{display: none;}

.header .pc_staff > a{color:#fff; font-size:13px; padding:0 6px; font-weight: 300; display: inline-block; margin:0 1px;
    background-color:rgba(255,255,255,.3); border-radius: 4px; z-index: 11;}
.header .pc_staff > a:hover{color:#1f6bbb; background-color: rgba(255,255,255,1); font-weight: 500;}

 /* dept 1 */
.gnb_wrap{position: absolute; right:0; width:100%; text-align: right;
    top:50%; transform:translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);}
ul.gnb{position: relative;}
ul.gnb > li{display:inline-block;  padding:0 4%; position: relative; margin-right:-4px;}
ul.gnb > li > a{font-size:1.15em; padding:28px 0; display: block; position: relative; text-align: center; color:#fff; cursor: default;}

ul.gnb > li.on .sub_dep{display: block;}
/* dept 2 */
.sub_dep{position: absolute; top:100%; width:100%; left:50%; transform: translateX(-50%); display:none;}
.sub_dep ul{width:100%; overflow:hidden; background:rgba(255,255,255,1);}
.sub_dep li{position: relative; z-index: 50; text-align:left;}
.sub_dep li > a{cursor: pointer; position: relative; display: block; padding:12px 16px;}
.sub_dep li > a:hover{font-weight:400; color:#1f6bbb; font-weight: 500;}


.pc_search-container{background-color:#fff; position: absolute; top:96px; width:100%; padding-top:56px; padding-bottom:64px; display: none; border-top:1px solid #d1d1d1;}
.pc_search-container .bd{max-width: 576px; height:auto;}
.pc_search-container .nav-search{position: relative; width: 100%; height:46px;}
.pc_search-container .nav-search input{background-color:#f5f5f5; border:0; height:54px; width: 100%; border:1px solid #d1d1d1; padding-left:16px; padding-right:52px;}
.pc_search-container .header-search-icon{top:58%; transform: translateY(-50%); bottom:initial; right:16px; width:23px;}
.pc_search-container .header-search-icon img{height:23px;}
.header-search-icon{position: absolute; right:0; bottom:2px; width:19px; line-height: 0; cursor: pointer;}
.header-search-icon img{height:19px;}


/* mobile */
.header .mobile_nav, .mobile_gnb_wrap{display:none;}

/* Footer Style */
.footer{width:100%; background:#efefef; height:auto; border-top:1px solid #d1d1d1; margin-top:80px; position: relative; }
.footer ul.content li.address{display: block;}
.footer ul.content li{font-size:1em; display:inline-block;}
.footer ul.content li:after{display:inline-block; content:''; background:#808080; margin:0 2px;}
.footer ul.content li:last-child:after{display:none;}

.footer .f-top{padding-top:48px;}

.f-info{padding:0 48px;text-align: left; margin-bottom:48px;}
.f-info:after{content:''; width:1px; height:100%; position: absolute; right:15%; background-color:#d1d1d1; top:0;}
.f-info:last-child:after{display: none;}
.f-info .num{font-size:1.75em; line-height: 1; margin-top:8px; margin-bottom:8px; font-weight:600; color:#222;}
.f-info p{font-size:.9em; line-height: 1.8; color:#777; }
.f-info p i{margin-right:12px;}
.f-info em img{height:28px; opacity: 0.7;}
.f-info em img:hover, .f-info em img:focus{opacity: 1;}


.footer .f-bt{background-color:#efefef; position: relative; padding-top:32px; padding-bottom:32px;}
.footer .f_logo{position: absolute; left:0;
    top:50%; transform:translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

    .footer .f_logo > img{max-width:58px; width: 100%;}
.footer .addinfo{padding-left:128px; font-size:0.925em; color:#666;}
.footer .addinfo > address{font-style: normal;}


.footer .f_policy{text-align: left; border-bottom:1px solid #d1d1d1; background-color: #fff;}
.footer .f_policy .right{float:right;}

.footer .f_policy span, .footer .f_policy .familysite{margin-right:24px;  display: inline-block; padding-top:16px; padding-bottom:16px; line-height: 1;}
.footer .f_policy span > a{font-weight:400; font-size:0.95em; color:#666;}
.footer .f_policy span > a:hover{color:#222;}

.footer .f_policy .familysite{position: relative; border-left:1px solid #d1d1d1; border-right:1px solid #d1d1d1; padding-left:16px; padding-right:40px; cursor: pointer; margin-right:0;}
.footer .f_policy .familysite:after{content:''; top:50%; transform:translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);
    position: absolute; right: 16px; width: 11px; height:11px;
    background: url(https://d3uke5q3fwv1sm.cloudfront.net/static/images/BF/155968390292859.png) no-repeat center;}
.footer .f_policy .familysite ul{position: absolute; background-color:#fff; width: 100%; left:0; top:100%; border:1px solid #d1d1d1; z-index: 99; display: none;}
.footer .f_policy .familysite ul > li{padding:10px 16px;}
.footer .f_policy .familysite ul > li:hover{background-color:#f6f6f6;}

/* lock */
.footer .lock{position: absolute; bottom:4px; right:16px;}
.footer .lock img{height:21px; opacity:.6; cursor: pointer;}
.footer .lock:hover img{ opacity:1;}


#gnb .categoryWrap {height: 0; overflow: hidden;-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: none;
    position: fixed; top: 104px; right: 0; left:0;background: #fff;  width:1920px;}
#gnb .categoryWrap.open{display: block;}
#gnb.open .categoryWrap {height: 496px;}
#gnb .categoryList {position: relative; z-index: 2; height: 100%; padding-top: 24px; box-sizing: border-box; max-width: 1200px; margin:auto;}

#gnb .categoryList ul li{width:33.333%; float: left; padding-left:32px;}
#gnb .categoryList ul li:first-child{padding-left:0;}
#gnb .categoryList ul li .dep-wrap{width:50%; display: inline-block; margin-right:-4px; vertical-align: top; }
#gnb .categoryList ul li .dep-wrap .dep1{font-weight:500;}
#gnb .categoryList ul li .dep-wrap p[class*="dep"]{padding:3px 0;}
#gnb .categoryList ul li .dep-wrap p > a:hover{color:#222; font-weight: 500;}


.sidebar{position: fixed; right:40px; bottom: 64px;}
.sidebar .top_btn{background-color:#fff; border-radius: 50%; border:1px solid #d1d1d1; width:40px; height:40px; text-align: center;}
.sidebar .top_btn span{padding-top:10px; display: block; font-size:13px; font-weight: 500;}

 /* ********************************************* *
 * 1200px max
 * ********************************************* */
 @media screen and (max-width: 1200px){
    .nav_inner.right{right:20px;}
    ul.gnb > li{padding:0 12px;}
    


    .f-info:after{display: none;}
    
}

 /* ********************************************* *
 * 1024px max
 * ********************************************* */
 @media screen and (max-width: 1024px){


    .main_nav, .main_nav .bd, .nav_inner.right{height:64px;}
    .nav_inner.left > a > img{height:34px;}

    /* 모바일 메뉴 btn */
    .menu_btn{position: absolute; height:40px; width:40px; right:16px;
        top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);}
    .menu_btn > span{position: relative; width:20px; height:2px; background-color: #fff; display: block;}
    .menu_btn > span::before, .menu_btn > span::after{content:''; height:2px; width:28px; display: block;
        background-color: #fff; position: absolute;}
    .menu_btn > span::before{top:-10px;}
    .menu_btn > span::after{bottom:-10px;}

    /* 그룹웨어, 로그아웃 */
    .header .pc_staff{display: none;}
    .header .mob_staff{display: flex; display: -ms-flexbox; display: -webkit-box;
        justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center;
        position: absolute; bottom:0; z-index: 15; width:100%; background-color: #fff;
        border-top:1px solid #e1e1e1; margin:0 auto; margin:0 -2px; padding:8px 16px;}
    .header .mob_staff > a{width:50%; background-color:#fff; color:#1f6bbb; border:1px solid #d1d1d1; text-align: center; padding:8px;}
    .header .mob_staff > a:last-child{border-left:0;}
    
    /* depth */
    .nav_inner.right{right:0;}
    .nav_inner.right .gnb_wrap {display: none; position: fixed; width:100%; max-width: 400px; height:calc(100% - 64px); background-color: rgba(255,255,255,1);
        top:64px; transform: inherit; -ms-transform: inherit; -webkit-transform: inherit;}
    .nav_inner.right .gnb_wrap.show{display: block;}
    .nav_inner.right .gnb_wrap:after{content:''; position: absolute; top:0; left:0; width:144px; height:100%; background-color: #1f6bbb; z-index: 1;}

    /* depth1 */
    ul.gnb{z-index: 4;}
    ul.gnb > li{display: block; padding:0; position:static;}
    ul.gnb > li:hover .sub_dep{display:none;}
    ul.gnb > li > a{padding:16px; font-size: 1em; text-align: left; z-index: 4;
        width:144px; border-bottom:1px solid rgba(255,255,255,.3); background-color: #1f6bbb; color:#fff;}

    /* depth2 */
    ul.gnb > li .sub_dep{padding-left:144px; top:0; z-index: 3;}
    ul.gnb > li.on > a:after{content: ""; display: inline-block; clear: both; width: 8px; height: 8px; margin-bottom: 2px; margin-left: 16px;
         -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff;}
    ul.gnb > li.on .sub_dep{display: block;}
    .sub_dep li > a{padding:16px; border-bottom:1px solid #d1d1d1;}
    

    /* footer */
    .footer .f_logo{left:16px;}
    .footer .addinfo{padding-left:96px;}
    .footer .f_policy span{width:50%; margin-right:-4px; text-align: center;}
    .footer .f_policy .right{float:inherit;}
    .footer .f_policy .familysite {width:100%; padding:12px 16px; margin:0 0 16px 0; border:1px solid #d1d1d1;}
    

 }