* {margin:0; padding:0;}
nav {color:#000; font:18px/1.5 "Noto Sans KR"; font-weight:300;}
a {color:inherit; text-decoration:none;}
li {list-style:none;}
button {overflow:visible; cursor:pointer; background:none; border:0; font:18px/1.5 "Noto Sans KR"; }
#header .btnMenu:before{content:""; position:absolute; right:0; left:0; top:10px; height:3px; background:#ceae81; font:0/0 a; transition:all .3s, top .3s .3s;}
#header .btnMenu:after{content:""; position:absolute; right:0; left:0; top:20px; height:3px; background:white; font:0/0 a; transition:all .3s, top .3s .3s;}
#header .btnMenu span {content:""; position:absolute; right:0; left:0; top:0; height:3px; background:white; font:0/0 a; transition:all .3s, top .3s .3s;}


.topBanner img {max-width:60%;}
.menuOn #gnb {z-index:100000;}
.lang .langList {top:6rem;}
.btnMenu {display:none; position:absolute; top:36px; right:20px; width:38px;}
.btnMenu {width:2.5rem; height:2rem; top:1.3rem; right:1.5rem;}
.btnMenu:before, .btnMenu:after, .btnMenu span {content:""; position:absolute; right:0; left:0; top:0; height:4px;  font:0/0 a; transition:all .3s, top .3s .3s;}
.btnMenu:before, .btnMenu:after, .btnMenu span {height:2px;}
.btnMenu:after {top:100%;}
.menuOn .btnMenu {position:fixed; top:20px; z-index:101;}
.menuOn .btnMenu:before, .menuOn .btnMenu:after, .menuOn .btnMenu span {height:2px; top:50%; background:#212c65; transition:all .3s, transform .3s .3s;}
.menuOn .btnMenu span {transform:rotate(45deg);}
.menuOn .btnMenu:before {display:none;}
.menuOn .btnMenu:after {transform:rotate(-45deg);}
.infoBtnMenu {position:relative; top:20px;left: 15px; z-index:101;}
.infoBtnMenu a {font-family:'Pretendard';font-weight:300;font-size:20px;color:#a3a3a3;}

.btnMenu {display:block;}
#gnb {position:absolute; z-index:100; top:100px; left:0; width:100%; background:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.subOpen #gnb {border-bottom:0; box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.3);}
#gnb:after {content:""; position:absolute; top:0; right:0; left:0; height:70px; background:#fbfbfb;}
#gnb:after {display:none;}
#gnb {position:fixed; top:0; right:-100%; bottom:0; left:auto; width:560px; background:#f8f8f8; transition:all .3s;}
.menuOn #gnb {right:0;}
#gnb {width:70%;}
#gnb .login {position:absolute; z-index:2; top:-75px; right:50%; height:46px; margin-right:-700px; padding:0 20px; border:2px solid #eee; border-radius:46px;}
#gnb .login {right:30px; margin:0;}
#gnb .login {position:absolute; top:0; right:0; left:0; height:5rem; padding:0 0 0 1.5rem; background:#fff; border:0; border-radius:0; box-sizing:border-box;}
#gnb .login {height:6rem;}
#gnb .login .out {display:none;}
#gnb .login span:last-child {position:relative; margin-left:10px; padding-left:12px;}
#gnb .login span:last-child {margin-left:0.8rem; padding-left:1.2rem;}
#gnb .login span:last-child:before {content:""; position:absolute; top:8px; left:0; height:16px; border-left:1px solid #ddd;}
#gnb .login span:last-child:before {top:0.25rem; height:1.25rem;}
#gnb .login span:last-child:before {top:0.5rem;}
#gnb .login .sign:before {content:""; display:inline-block; width:15px; height:18px; margin-right:10px; background:url("/resource/images/icon_login.png") no-repeat; vertical-align:-3px;}
#gnb .login .sign:before {display:none;}
#gnb .login a {color:#000; font-size:14px; font-weight:500;}
#gnb .login a {font-size:1.4rem; font-weight:400;}
#gnb .list {position:relative; z-index:2; max-width:1400px; margin:0 auto;}
.menuOn #gnb .list {overflow:visible; padding:30px 0; -webkit-overflow-scrolling:touch;}
#gnb .list {overflow:auto !important; padding:0 !important; background:#f8f8f8; position:absolute; top:5rem; right:0; bottom:0; left:0;}
#gnb .list:after {display:none;}
#gnb .list {top:5rem;}
#gnb .list > ul {width:auto; height:auto; overflow:visible; border:0;}
#gnb .list > ul > li {float:left; width:14.28%; height:100%; box-sizing:border-box;}
#gnb .list > ul > li:first-child {border-left:1px solid #ddd;}
#gnb .list > ul > li:hover > a {margin-left:-1px; border-color:#a3a3a3; color:#000000;}
#gnb .list > ul > li:hover .subDepth {background:#f4f8fb;}
#gnb .list > ul > li {float:none; width:auto; height:auto; border:0; border-bottom:1px solid #ddd;}
#gnb .list > ul > li:first-child {border-left:0;}
#gnb .list > ul > li > a {display:block;position:relative; font-family:'Pretendard';margin:0; padding:0 1.5rem;background:#fbfbfb; /*border-right:1px solid #ddd;*/ text-align:center; color:#000; font-size:1rem; line-height:3.6rem;  font-weight:600; text-align:left;}
#gnb .list > ul > li > a > span.icon {position:absolute;right:1rem;top:1.2rem;} 
#gnb .list > ul > li > a > span.icon img {width:70%;}

/*#gnb .list > ul > li > a:after {content:""; position:absolute; top:1.5rem; right:2rem; width:0.5rem; height:0.5rem; border-bottom:2px solid #3b3b3b; border-left:2px solid #3b3b3b; transform:rotate(-45deg); transition:all .3s;}*/
#gnb .list > ul > li.open > a {color:#0087e5;}
/*#gnb .list > ul > li.open > a:after {top:1.75rem; transform:rotate(135deg); border-color:#000;}*/
#gnb .subDepth {height:0; overflow:hidden; transition:all .3s; box-sizing:border-box;}
.subOpen #gnb .subDepth {height:365px;}
#gnb .subDepth {position:relative; display:none; height:auto; transition:none;}
#gnb .subDepth > ul {height:100%; padding:10px 0 0; border-right:1px solid #ddd;}
#gnb .subDepth > ul {padding:0; border:0;}
#gnb .subDepth li {margin:0; background:#fbfbfc; border-top:1px solid #dfe5ed;}
#gnb .subDepth li > a {display:block; font-family:'Pretendard';font-weight:300;margin:0; padding:1.1rem 0 1.1rem 2rem; line-height:1; color:#7b7b7b; font-size:1rem;}
#gnb .subDepth li > a:hover {color:black; text-decoration:underline;}