@charset "utf-8";

/* header */
header{height: 100px; border-bottom: 1px solid #ccc; z-index: 100; position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: #fff; width: 100%;}

/* sub_nav 인터넷뱅킹 */
.sub_nav > .inner > ul{display: flex; justify-content: flex-end; padding: 10px 0; margin-right: 40px;}
.sub_nav ul li a{display: block; font-size: 14px; color: #666; padding: 0 10px; border-left: 1px solid #ccc;}
.sub_nav ul li:first-child a{border: none;}

header > .inner{display: flex; justify-content: space-between; align-items: center;}
.logo a{color: transparent; background: url(../../images/logo.svg) 0 0 no-repeat; width: 250px; height: 60px; display: block;}

/* nav */
nav{display: flex; align-items: center;}
.web_nav{
    display: flex;
    align-items: center;
}
.web_nav li{position: relative;}

/* 밑줄 효과 */
.web_nav > li::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #0081CC;
    transition: 0.4s;
}
.web_nav > li.on::after{width: 100%;}

.web_nav > li > a{font-size: 20px; font-weight: 700; color: #333; text-align: center; padding: 30px 30px; height: 50px; display: flex; align-items: center;justify-content: center;}


/* 내비 밑 내용 */
.nav-bg{
    display: none;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 397px;
    background: #fff;
	z-index: 200;
	border-bottom: 1px solid #ccc;
}

.navbar_dropdown li a:hover{
    color: #fff;
}
.navbar_dropdown li a:hover::before{
    width:15px;
    height:100%;
}
.navbar_dropdown li a::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:#0081CC;
    transform:scaleX(0);
    transition:0.5s;
    transform-origin:left;
    z-index:-1;
}
.navbar_dropdown li a:hover::after{
    transform:scaleX(1);
}

.navbar_dropdown{display: none; position: absolute; top: 59px; left: 0; width: 100%; height: 397px; z-index: 200; border-right: 1px solid #ccc;}
.web_nav li:first-child .navbar_dropdown{
    border-left: 1px solid #ccc;
}
.web_nav li:hover .navbar_dropdown{background: #f7f7f7; border-bottom: 1px solid #ccc;}

.navbar_dropdown li{
    width: 100%;
    display: block;
}

.navbar_dropdown li a{
    display: block;
    font-size: 16px;
    color: #666;
    font-weight: normal;
    text-align: center;
    padding: 10px 0;
}


/* menu 버튼 */
header .btnmenu{display: none; overflow: hidden; position: absolute; top: 50%; right: 1vw; z-index: 300; width: 50px; height: 50px; transform: translateY(-50%);}
header .btnmenu span{position: absolute; left: 50%; top: 50%; width: 25px; height: 2px; font-size: 0; background: #333; transform: translate(-50%, -50%);}
header .btnmenu span::before{content: ''; display: block; position: absolute; top: 8px; right: 0; width: 100%; height: 2px; background: #333; transition: all .3s ease;}
header .btnmenu span::after{content: ''; display: block; position: absolute; top: -8px; right: 0; width: 100%; height: 2px; background: #333; transition: all .3s ease;}

header .btnmenu.on span{background: none;}
header .btnmenu.on span:before{top: 50%; width: 100%; left: 0; transform-origin:50% 50%; transform: translateY(-50%) rotate(-45deg);}
header .btnmenu.on span:after{top: 50%; transform-origin:50% 50%; transform:translateY(-50%) rotate(45deg);}

.dim{display: none; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); height: 100vh; width: 100%;}

.m_menu{position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; z-index: 201; background: #fff;}

/* .b-close{cursor: pointer;} */
.m_menu::before{display: block; content: ''; width: 100%; height: 1px; position: absolute; top: 60px; right: 0; background: #ccc;}

.m_nav{overflow-y:auto; display: block; margin-top: 60px; /*  height:calc(100vh - 100px);  */}
.m_nav > li {padding: 20px;}
.m_nav > li > a{display: block; font-size: 18px; font-weight: 700; position: relative;}
.m_nav > li > a::after{content: ''; display: block; position: absolute;  top: 50%; right: 10px; width: 10px; height: 10px; margin-top: -7px; border: 1px solid #333; border-width: 0 1px 1px 0; transform: rotate(45deg); transition: all .3s ease;}
.m_nav > li.on >a:after{transform:rotate(-135deg); margin-top:-3px;}

.menu{
	border-top: 1px solid #ccc;
}
.menu>li {
	border-bottom: 1px solid #ccc;
	padding-top: 10px;
}

.submenu{display: none;}
.submenu li a{
	display: inline-block;
	width: 100%;
	height: 100%;
	padding-left: 20px;
    margin-top: 15px;
}

.menu-b{border-top: 5px solid #f3f3f3; display: flex; padding: 10px 20px 0;}
.menu-b ul{background: #fff; display: flex;}
.menu-b ul li a{display: flex; flex-direction: column; font-size: 14px;  align-items: center; position: relative; width: 100%; height: 100%; width: 85px; height: 60px; display: block; text-align: center;}

.menu-b ul li a figure{display: flex; align-items: center; justify-content: center; height: 40px;}
.menu-b ul li a figure img{display: flex; align-items: center; justify-content: center;}

@media screen and (max-width:1420px) {
    .web_nav > li > a{padding: 30px 2.5vw;}
}

@media screen and (max-width:1400px) {
    .sub_nav > .inner > ul{margin-right: 1vw;}
}
@media screen and (max-width:1200px) {
    .web_nav > li > a{padding: 30px 1.7vw;}
}

@media screen and (max-width:1024px) {
    .header{height: 60px;}
    h1.logo{margin: 0 auto;}
    .logo a{background: url(../../images/logo.svg) 50%/80% no-repeat; width: 200px;}
    .sub_nav{display: none;}
    nav{display: none;}
    header .btnmenu{display: block;}
    header > .inner{height: 60px;}
}