/*헤더영역 시작*/
header {position:absolute; top:0; left:0; width:100%; height: 80px; overflow:hidden; background-color: #fff; z-index:99; transition:all 0.3s; }
.h-center {position:relative; width: 95%; height:100%; margin:0 auto;}
.logo {position:absolute; left:0; top: 18px;}

.header.openFull {height: 350px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);}
.header.openFull::before {content:""; display: block; position: absolute; top: 80px; left:0; width: 100%; height:1px; background-color:#ddd;}

.header .gnb_wrap {text-align:center; width:850px; margin: 0 auto;}
.header .gnb_wrap .gnb {display:inline-block;}
.header .gnb_wrap .gnb .dep1 .dep1_li {display:inline-block; height: 50px; position:relative; padding: 30px 38px 0;}
.header .gnb_wrap .gnb .dep1 .dep1_li::after {display:block; content:""; position:absolute; left: 50%; bottom: 0; transform:translateX(-50%); width:0; height:5px; background-color:#509ecb; transition:all 0.3s;}
.header .gnb_wrap .gnb .dep1 .dep1_li:hover::after {width:100%;} 
.header .gnb_wrap .gnb .dep1 .dep1_li .dep1_link {font-weight: 500; font-size: 17px; color:#333;}
.header .gnb .dep2 {width: 100%; position:absolute; top: 80px; left:0; height: 400px; padding-top: 27px; opacity:1; transition: opacity 1ms 300ms;}
.header .gnb .dep2 .dep2_li {padding:10px 0;}
.header .gnb .dep2 .dep2_li a {transition:all 0.3s; color:##1c1c1c; font-size:15px;}
.header .gnb .dep2 .dep2_li a:hover {color:#007dc6;}

.gnbbtn {position: absolute; top: 21px; right: 0; width: 50px; height: 44px; font-size: 0; background-color: transparent; border:none; cursor:pointer;}
.gnbbtn .bar_top,
.gnbbtn .bar_mid,
.gnbbtn .bar_bot{display: block; position: absolute; right: 0; width: 50px; height: 4px; background-color: #007dc6; transform-origin: top right;  transition:all .3s ease-in-out;}
.gnbbtn .bar_top{top: 4px;}
.gnbbtn .bar_mid{top: 50%; transform: translate(0, -50%);}
.gnbbtn .bar_bot{bottom: 4px; width:40px;}

.header.openFull .gnbbtn .bar_top{top: 7px; left:-6px; transform: rotate(-45deg);}
.header.openFull .gnbbtn .bar_mid{opacity:0;}
.header.openFull .gnbbtn .bar_bot{bottom: -3px; left: -4px; width:50px; transform: rotate(45deg);}

.m-btn {display:none;}
.m-navWrap {display:none;}

/*헤더영역 끝*/

/*화면 너비 0 ~ 1300px*/
@media (max-width: 1300px){
	.h-center {width:97%;}
	.header .gnb_wrap {margin: 0 0 0 27%;}
	.loginbox2{display:none;}
}

/*화면 너비 0 ~ 960px*/
@media (max-width: 960px){
	.m-btn {display:block;}

	.m-btn {position: absolute; top: 21px; right: 10px; width: 32px; height: 32px; font-size: 0; background-color: transparent; border:none; cursor:pointer;}
	.m-btn .bar_top,
	.m-btn .bar_mid,
	.m-btn .bar_bot{display: block; position: absolute; right: 0; width: 32px; height: 4px; background-color: #007dc6; transform-origin: top right;  transition:all .3s ease-in-out;}
	.m-btn .bar_top{top: 4px;}
	.m-btn .bar_mid{top: 50%; transform: translate(0, -50%);}
	.m-btn .bar_bot{bottom: 4px; width:20px;}


	.m-navWrap {display:block; position:fixed; right:0; top:0; width:0; overflow:hidden; height: 100%; z-index:99;}
	
	.m-navWrap .bBg {display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position:absolute; z-index: 99; }
	
	.m-navWrap .m-navbox {position: absolute;  right: -100%; top:0; width: 50%; height: 100%; background-color: #fff; z-index: 999; transition:all 0.5s;}
   	.m-navWrap .m-navbox.on {right: 0;}

	.m-navWrap .m-navbox .mn-top {position: relative; height: 80px; background: linear-gradient(to right, #007ec7, #2b62d9);}
    .m-navWrap .m-navbox .mn-top .closeBtn {position: absolute; top: 50%; transform:translateY(-50%); right: 20px; width: 30px; height: 30px;}
    .m-navWrap .m-navbox .mn-top .closeBtn a {display: block; width: 100%; height: 100%;}
    .m-navWrap .m-navbox .mn-top .closeBtn .lnr-cross {font-size: 35px; color: #fff;}

    .m-navWrap .m-navbox .m-nav > li {position: relative;}
    .m-navWrap .m-navbox .m-nav > li > a {display: block; height: 50px; line-height: 50px; color: #383c46; border-bottom: 1px solid #e1e1e1; text-indent: 50px; font-size:1rem; font-weight: 600; transform:skew(-0.03deg);}
    .m-navWrap .m-navbox .m-nav > li .lnr {display: none; position: absolute; top: 19px; right: 20px; font-size: 1rem; color: #000;}
    .m-navWrap .m-navbox .m-nav > li .lnr-chevron-down {display: block;}
    .m-navWrap .m-navbox .m-nav > li.on .lnr-chevron-down {display: none;}
    .m-navWrap .m-navbox .m-nav > li.on .lnr-chevron-up {display: block;}

    .m-navWrap .m-navbox .m-nav .m-depth2 {display: none; padding: 0 0 0 15px; background-color: #f5f5f5;}
    .m-navWrap .m-navbox .m-nav .m-depth2 > li > a {display: block; height: 40px; line-height: 40px; font-size: 0.875rem; text-indent: 50px; color: #383c46; transform:skew(-0.03deg);}


	.gnbbtn {display:none;}
	.gnb_wrap {display:none;}
}

/*화면 너비 0 ~ 660px*/
@media (max-width: 660px){
	.logo {top:27px; left:10px;}
	.logo img {width:160px;}
	.m-navWrap .m-navbox {width:85%;}
}