body.fixed {overflow-y: hidden;}
body.scrollfix #header > .btm {position:fixed; top:0; right:-100%; width:100%; z-index:900}
#header > .navinner > .right_btn .btn-allmenu {float:right; position:relative; width:43px; height:43px; border:none; border-radius:50%; background:none; cursor:pointer; outline:none; top:30px;right:10px;}
#header > .navinner > .right_btn .btn-allmenu:hover {/*background:#c39e5a*/}
#header > .navinner > .right_btn .btn-allmenu span {position:absolute; display:block; left:50%; width:22px; height:3px; margin-left:-11px; background:#101010}
#header > .navinner > .right_btn .btn-allmenu span.line1 {top:14px}
#header > .navinner > .right_btn .btn-allmenu span.line2 {top:20px}
#header > .navinner > .right_btn .btn-allmenu span.line3 {top:26px}      
#header > .btm {display:none;position:relative; border-bottom:1px solid #eeeff0; background:#fff}
#header > .btm .m_loginArea {display:none;height:72px;width:100%;border-bottom:solid 1px #ebebeb;}
#header > .btm .m_loginArea ul {padding:25px 0px 0px 20px;}
#header > .btm .m_loginArea ul li {display:inline-block;padding:0px 5px; color: #979797;}
#header > .btm .m_loginArea ul li a {font-size:14px; color: #222;}

/*header*/
header{ position: fixed; top: 0; left: 0; right: 0; background: #FFF; z-index: 10; }
header.on .gnb:before{visibility: visible; opacity: 1; }
header .wrap{width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; align-items: center;}
header .wrap h1 {margin-top: 4px;}
header .gnb{display: flex; align-items: center;}
header .gnb:before{content: ''; position: absolute; left: 0; right: 0; top: 99px; background: #FFF; height: 320px; visibility: hidden; opacity: 0;transition: all 0.3s ease-out; border-bottom:1px solid #e8e8e8;}
header .gnb>li{/*margin-left: 90px;*/ position: relative; height: 100%;}
header .gnb>li:first-child{margin-left: 0;}
header .gnb>li>a{color: #121212; font-size: 18px; font-weight: 600; transition: all 0.2s; display: block; height: 100%; padding: 40px 45px; position: relative;}
header .gnb>li>a:before{content: ''; left: 20%; right: 20%; display: block; position: absolute; bottom: -1px; transition: all 0.5s; height: 1px; background: #EC6800; opacity: 0;}
header .gnb>li:hover>a:before{left: 0; right: 0; opacity: 1;}
header .gnb>li:hover>a,header .pc-menu .depth-1 li:hover a{color: #449aff;}
header .pc-menu .depth-1{position: absolute; right: 0; left: 0; padding-top: 30px; visibility: hidden; opacity: 0;transition: all 0.3s ease-out;}
header.on .pc-menu .depth-1{visibility: visible; opacity: 1; }
header .pc-menu .depth-1 li{text-align: center; margin-top: 30px;}
header .pc-menu .depth-1 li:first-child{margin-top: 0px;}
header .pc-menu .depth-1 li a{font-size: 16px; color: #444; font-weight: 400; transition: all 0.2s;}
header .pc-menu .lang {margin-left: auto;border: 1px solid #E8E8E8;border-radius: 50px;text-align: center;transition: all 0.2s;}
header .pc-menu .lang a {display: inline-block;transition: all 0.2s;font-size: 14px;width: 60px;height: 32px;line-height: 32px;font-weight: 600;}
header .pc-menu .lang:hover {border: 1px solid #EC6800;background-color: #EC6800;}
header .pc-menu .lang:hover a {color: #fff;}

header .pc-menu a.menu{position: relative; height: 20px; display: inline-block; width: 28px;margin-left:122px;}
header .pc-menu a.menu:before{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; top: 0; left: 0; transition: 0.3s}
header .pc-menu a.menu:after{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; bottom: 0; left: 0; transition: 0.3s}
header .pc-menu a.menu span{position: absolute; display: inline-block; width: 21px; height: 2px; top: 50%; right: 0; background: #111; margin-top: -1px; transition: 0.3s}

header .pc-menu a.menu{position: relative; height: 20px; display: inline-block; width: 28px;margin-left:122px;}
header .pc-menu a.menu:before{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; top: 0; left: 0; transition: 0.3s}
header .pc-menu a.menu:after{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; bottom: 0; left: 0; transition: 0.3s}
header .pc-menu a.menu span{position: absolute; display: inline-block; width: 21px; height: 2px; top: 50%; right: 0; background: #111; margin-top: -1px; transition: 0.3s}

header .all-menu{position: fixed; top: 0; width: 100%; right: 0%; bottom: 20%; background: #FFF; opacity: 0; visibility: hidden; line-height: 1;} 
header .all-menu.on{bottom: 0; opacity: 1; visibility: visible;z-index: 999999;}
header .all-menu .top{display: flex; height: 7em; padding: 0 30px; justify-content: space-between; align-items: center; background-color: #0071d7;}
header .all-menu .top a div {position: absolute; right: 30px; width: 25px; height: 2px; background: #fff;}
header .all-menu .top a div:first-child {transform: rotate(45deg);}
header .all-menu .top a div:last-child {transform: rotate(-45deg);}
header .all-menu .middle{margin-top: 80px; justify-content: space-between;}
header .all-menu .middle:hover{background: none;}
header .all-menu .big-menu{display: flex; justify-content: center; padding: 0 70px;}
header .all-menu .big-menu li:hover strong{border-bottom: 1px #449aff solid; color: #449aff;}
header .all-menu .big-menu li:hover>a{color: #449aff;}
header .all-menu .big-menu > li{width: 100%; margin-left: 2%}
header .all-menu .big-menu > li:first-child{margin-left: 0;}
header .all-menu .big-menu strong{border-bottom: 1px #ddd solid; font-size: 22px; font-weight: 600; color: #121212; display: block; padding-bottom: 40px; transition: 0.3s;}
header .all-menu .small-menu>li{margin-top: 45px;}
header .all-menu .small-menu>li:first-child{margin-top: 55px;}
header .all-menu .small-menu>li>a{font-size: 20px; font-weight: 400; color: #4c4c4c; padding-right: 25px; line-height: 25px; word-break: keep-all; transition: 0.3s;}
header .all-menu .hide{display: none;}
header .all-menu .hide li{margin-top: 20px;}
header .all-menu .hide li:first-child{margin-top: 30px;}
header .all-menu .hide li a{font-size: 14px; color: #444;}
header .all-menu .click > a{background: url('/public/img/common/hide-arrow.svg') right center no-repeat;}
header .all-menu .click.on > a{background: url('/public/img/common/hide-arrow-on.svg') right center no-repeat; color: #449aff;}
header .all-menu .bottom{display: flex; justify-content: space-between; margin-top: 6%; padding: 0 70px;}
header .all-menu .bottom ul{display: flex; }
header .all-menu .bottom ul li{margin-left: 30px;}
header .all-menu .bottom ul li:first-child{margin-left: 0;}
header .all-menu .bottom ul li a{font-size: 16px; color: #121212;}

header .mo-menu{display: none; width: 100%;}
header .mo-menu .in{position: fixed; top: 56px; right: -20%; width: 100%; bottom: 0; background: #FFF; opacity: 0; visibility: hidden; transition: all 0.3s ease-out;}
header .mo-menu .in.active{opacity: 1; visibility: visible; right: 0;}
header .mo-menu .big-menu>li{border-bottom: 1px #E8E8E8 solid;}
header .mo-menu .big-menu>li:first-child{border-top: 1px #e8e8e8 solid;}
header .mo-menu .big-menu>li>a{font-size: 20px; font-weight: bold; color: #121212; display: block; padding: 25px 20px; }
header .mo-menu .big-menu>li.mo-click>a{background: url('/public/img/common/mo-menu-arrow.svg') right+20px center no-repeat;}
header .mo-menu .big-menu>li.on>a{color: #449aff; background: url('/public/img/common/mo-menu-arrow-on.svg') right+20px center no-repeat;}
header .mo-menu .depth-1{display: none;}
header .mo-menu .depth-1 a{font-size: 15px; display: block;}
header .mo-menu .depth-1 li{margin-top: 30px; padding: 0 20px;}
header .mo-menu .depth-1 li:first-child{margin-top: 20px;}
header .mo-menu .depth-1 li:last-child{margin-bottom: 30px;}
header .mo-menu a.menu{position: relative; height: 20px; display: inline-block; width: 28px;}
header .mo-menu a.menu:before{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; top: 0; left: 0; transition: 0.3s}
header .mo-menu a.menu:after{content: ''; display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; bottom: 0; left: 0; transition: 0.3s}
header .mo-menu a.menu span{position: absolute; display: inline-block; width: 21px; height: 2px; top: 50%; right: 0; background: #111; margin-top: -1px; transition: 0.3s}
header .mo-menu a.menu.on:before{top: 50%; margin-top: -2px; transform: rotate(45deg); transition: all 0.3s transform 0.4s;}
header .mo-menu a.menu.on span{right: -10px; transition: all 0.2s; opacity: 0;}
header .mo-menu a.menu.on:after{bottom: 50%; margin-top: -1px; transform: rotate(-45deg); transition: all 0.3s transform 0.4s;}

header .mo-menu .in .lang-btn {position: absolute;bottom: 40px;left: 20px;}
header .mo-menu .in .lang-btn a {font-size: 15px;font-weight: 600;color: #9EA3A6;position: relative;display: inline-block;margin-right: 20px;transition: all 0.2s;}
header .mo-menu .in .lang-btn a:hover {color: #449aff;}
header .mo-menu .in .lang-btn a:after {content: '';display: inline-block;position: absolute;right: -10px;top: 3px;width: 1px;height: 11px;background: #ddd;}
header .mo-menu .in .lang-btn a:last-child:after {display: none;}

#gnbTrigger {position:absolute; top:0px; right:0px; width:77px; height:70px; border:none; /*background:#fff;*/ cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;}
#gnbTrigger > span {display:block; position:absolute; left:50%; width:26px; height:3px; margin-left:-13px; background:#fff; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbTrigger > .bar1 {top:26px}
#gnbTrigger > .bar2 {top:34px;width:22px;margin-left:-9px;}
#gnbTrigger > .bar3 {top:42px}
#gnbTrigger.open {background:#316bd8;}
#gnbTrigger.open > span {background:#fff}
#gnbTrigger.open > .bar1 {top:34px; transform:rotate(135deg)}
#gnbTrigger.open > .bar2 {opacity:0; left:-30px}
#gnbTrigger.open > .bar3 {top:34px; transform:rotate(-135deg)}

#gnbmenu1 {position:absolute; top:30px; right:10px; width:43px; height:43px; border:none; /*background:#fff;*/ cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;}
#gnbmenu1 > span {display:block; position:absolute; left:50%; width:22px; height:3px; margin-left:-11px; background:#fff; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbmenu1 > .bar1 {top:14px}
#gnbmenu1 > .bar2 {top:20px;}
#gnbmenu1 > .bar3 {top:26px}
/*#gnbmenu1.open {background:#0039a4}*/
#gnbmenu1.open > span {background:#fff}
/* #gnbmenu1.open > .bar1 {top:34px; transform:rotate(135deg)}
#gnbmenu1.open > .bar2 {opacity:0; left:-30px}
#gnbmenu1.open > .bar3 {top:34px; transform:rotate(-135deg)} */

#header .login_btn {display:none;}

@media screen and (max-width:1024px) {
  #gnbTrigger {display:block !important}
  #gnbmenu1 {display:block !important}  
  #header > .btm {display:block;position:fixed;right:-300px;width:300px;z-index:999;background:#fff;height:100%;top:0px;overflow-y:auto;-ms-overflow-style:none;}
  #header > .btm .m_loginArea {display:block;}
  #nav {width:100%;height:auto;margin:auto;overflow:hidden;font-size:0px;display:block;}
  #nav:after {display:block; width:100%; content:'';}
  #nav > li {display:block; width:auto;padding:0px;text-align:left;border-bottom:solid 1px #ebebeb;}
  #nav > li > a {display:block; font-size:16px; font-weight:600; color:#404040; line-height:50px;padding-left:20px;}
  #nav > li div.menu-item {display:none;width:100%;position:relative;z-index:99;background:#f9f9f9;left:0px;border-top:solid 1px #ebebeb;padding:20px 0px;}
  #nav > li div.menu-item .inner {width:100%;margin:0px auto;}
  #nav > li div.menu-item.active {display:block}
  #nav > li div.menu-item:after {clear:both; display:block; content:''}
  #nav > li div.menu-item .titleArea {display:none;}
  #nav > li div.menu-item .titleArea span:before {display:none;}
  #nav > li div.menu-item .titleArea span:after {display:none;}
  #nav > li div.menu-item ul {float:none; width:100%; padding-top:0px;margin-left:0px;}
  #nav > li div.menu-item ul:after {clear:both; display:block; content:''}
  #nav > li div.menu-item ul > li {float:left; width:100%; margin-bottom:0px;margin-right:0px;}
  #nav > li div.menu-item ul > li a {font-size:14px;color:#404040;display:block;line-height:2;padding-left:20px;}
  #nav > li div.menu-item ul > li a:before {display:none;}
  #nav > li div.menu-item ul > li.on a, #nav > li div.menu-item ul > li a:hover {color:#0039a4}
  #nav > li.on > a, #nav > li > a:hover {color:#333}
  #nav > li:before {content:'';width:100%;position:fixed;}
  #nav > li:first-child {padding-left:0px;}
  #nav > li:last-child {padding-right:0px;}
  header .all-menu{display:none;}
}

@media screen and (max-width:768px) {
  header {height: 70px;}
  #gnbTrigger {background:#fff;}
  #gnbTrigger > span {background:#101010;}
  #gnbmenu1 {background:#fff;}
  #gnbmenu1 > span {background:#101010;}  
  #header .login_btn { display:block;top: 20px;right: 75px;  position: absolute;}
  #header .login_btn img {display:block;width: 28px;}    
}