@charset "utf-8";
body.overflow { overflow: hidden !important }
#skipnavigation a { position: absolute; left: -3000%; }
#skipnavigation a:focus { display: block; left: 0; top: 0; z-index: 10000000000; width: 100%; height: 30px; line-height: 30px; background: #039; color: #fff; text-align: center; }
#header { position: absolute; z-index: 9999; display: block; width: 100%; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transition: .2s ease-in-out; animation: fade-in .5s ease forwards; }
#head { position: relative; width: 1560px; height: 100px; margin: 0 auto; padding: 0; transition: .2s ease-in-out; }
#logo { position: absolute; top: 40px; left: 0px; z-index: 9999; transition: .2s ease-in-out; float: none; padding: 0 }
#logo a.logo { display: inline-block; float: left; width: 140px; height: 42px; text-indent: -9999px; background: url(../images/common/logo_w.svg) left top no-repeat; background-size: 100% auto }
@keyframes fade-in {  to {
 opacity: 1;
}
}
/***************** 메뉴네비게이션 **********************/
#gnb { width: calc(100% - 100px); font-size: 20px; position: relative; opacity: 1; transition: .2s ease-in-out; display: flex; justify-content: flex-end; background: unset; }
#gnb > li { position: relative; display: inline-table; font-size: 20px; padding: 28px 16px 26px; transition: .2s ease-in-out; }
#gnb > li > a { position: relative; display: block; text-align: center; padding: 16px 10px 37px; color: rgba(255, 255, 255, .9) }
#gnb > li > a:after { transition: .2s ease-in-out; }
#gnb > li > a:after { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; content: ''; background-color: #fff; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); }
#gnb > li:hover > a:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
#gnb > li > div { float: left; position: relative; width: 100%; margin: 0; top: -1px }
#gnb li div ul { float: left; position: absolute; width: 100%; background: #fff; height: auto; opacity: 0; transform: translateY(-22px); transition: all .2s; -webkit-transition: all .2s; border: 1px solid #a3a5a5; z-index: -10 }
#gnb li div ul li { width: 100%; text-align: left; display: inline-block; color: #4d4d4d; border-top: 1px solid #a3a5a5 }
#gnb li div ul li:first-child { border: none }
#gnb li div ul li a { position: relative; font-size: 16px; width: 100%; text-align: left; display: inline-block; padding: 11px 12px 11px 22px; color: #4d4d4d; }
#gnb li div ul li a i { color: #d7ad7f; font-size: 16px; font-weight: 600; position: relative; top: 4px; float: right; opacity: 0; transform: translateX(-10px); transition: all .2s; -webkit-transition: all .2s; }
#gnb li div ul li dl { }
#gnb li div ul li dl dd { border-top: 1px solid #eee }
#gnb li div ul li dl dd a { font-size: 15px; width: 100%; text-align: left; display: inline-block; padding: 10px 14px 10px 20px; }
#gnb li div ul li dl dd a i { font-size: 15px; top: 4px; }
#gnb > li.on > a { color: #fff; }
#gnb > li.on > a::after { width: 100%; opacity: 1; transform: scale3d(1, 1, 1) }
#gnb > li.on ul li a:hover { background-color: #27303b; color: #fff }
#gnb > li.on div ul { display: block; opacity: 1; transform: translateY(0px); z-index: 10 }
#gnb > li.on ul li a:hover i { opacity: 1; transform: translateX(0px); }
#gnb > li.this > a { color: #fff }
#gnb > li.this > a::after { opacity: 1; transform: translateX(0px); transition: all .2s; -webkit-transition: all .2s; }
/*****************/
#head .langArea { position: absolute; top: 44px; right: 6px; width: 80px; height: 40px; color: #fff; z-index: 99999; background: url("../images/common/ico_lang.svg") left top no-repeat; background-size: 20px auto; transition: .2s ease-in-out; }
#head .langArea > a { color: #fff; padding-left: 30px; font-size: 14px; font-weight: 600; transition: .2s ease-in-out; }
#head .langArea > a.on { }
#head .langArea > a > i { position: relative; font-size: 12px; top: 1px }
#head .langArea.is-active { background: url("../images/common/ico_lang.svg") left top no-repeat !important; }
#head .langArea.is-active >a { color: #fff !important; }
ul.floating-lang { position: absolute; top: 34px; right: 5px; width: auto; height: auto; background: #fff; border: 1px solid #eaeaea; box-shadow: 1px 1px 8px rgba(0,0,0,0.1); font-size: 14px; padding: 6px 12px }
ul.floating-lang::after { content: ""; display: inline-block; width: 10px; height: 10px; background-color: inherit; position: absolute; top: 0px; left: 50%; transform: translate(-50%, -50%) rotate( -45deg ); z-index: -1; border-top: 1px solid #eaeaea; border-right: 1px solid #eaeaea;/*	box-shadow: 1px 1px 8px rgba(0,0,0,0.1);*/ }
ul.floating-lang li { width: 100%; border-bottom: 1px solid #eaeaea }
ul.floating-lang li:last-child { border: none }
ul.floating-lang li a { height: auto; text-align: center; display: inline-block; width: 100%; padding: 4px 3px; color: #999 }
ul.floating-lang li a.on { font-weight: 600; color: #121212 }
ul.floating-lang li a:hover { color: #121212; font-weight: 600; }
ul.floating-lang.on { z-index: 1; opacity: 1; transform: translateY(0px); transition: all .2s; -webkit-transition: all .2s; }
ul.floating-lang.off { z-index: -9999; opacity: 0; transform: translateY(-8px); transition: all .2s; -webkit-transition: all .2s; }
ul.floating-lang.off a { cursor: default }

/*****************/
* html #sub_wrapper { height: 100% }
/* 바디 */
#sub_wrapper { width: 100%; min-height: 100%; /*	margin: 0 0 -248px*/ background: #f8f9fa; }
/* head 의 높이값과 footer 의 높이값 */
* html #sub_wrapper { height: 100% }
address { font-size: 15px; color: #bdc1c6; line-height: 140%; }
address p { }
address span { display: inline-block; margin-right: 20px }
address span em { }
/*메뉴 들어가는 부분*/
.panel { display: none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; position: fixed; z-index: 9999; top: 0; height: 100%; width: 100%; background-color: #383b42; }
.panel .btn-mgnb { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; display: inline-block; float: left; cursor: pointer; padding: 30px; position: absolute; z-index: 2; top: 0; width: 30px; height: 20px; }
.panel .btn-mgnb span, .panel .btn-mgnb span:before, .panel .btn-mgnb span:after { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; width: 30px; height: 2px; background-color: #fff; }
.panel .btn-mgnb span { position: relative; display: inline-block; float: left; }
.panel .btn-mgnb span:before, .panel .btn-mgnb span:after { content: ""; position: absolute; left: 0; }
.panel .btn-mgnb span:before { top: -9.09090909px; }
.panel .btn-mgnb span:after { top: 9.09090909px; }
/*메뉴 클릭후, 메뉴 버튼을 활성화 시켰을때 속성*/

.panel .btn-mgnb.active span:before, .panel .btn-mgnb.active span:after { top: 0; }
.panel .btn-mgnb.active span:before { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); }
.panel .btn-mgnb.active span:after { -webkit-transition-delay: 0.09s; -moz-transition-delay: 0.09s; -o-transition-delay: 0.09s; -msa-transition-delay: 0.09s; transition-delay: 0.09s; transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); }
/* 안보이는 패널위치고정 */
.panel-overlay { position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; }
.panel.left { right: -1024px; }
/*패널 버튼 부분 위치*/
.panel.left .btn-mgnb { right: 1024px; margin: 20px 30px }
/* 패널이 활성화 되었을때 */
.panel.left.active { right: 0; }
.panel.left.active .btn-mgnb { right: 26px; margin: 20px 0 0 -90px }
.panel ul li.sub-menu { background: #2e333c; padding: 11px 0 0 50px; }
.panel .navCon { position: relative; height: 100%; background: #010616; }
.panel .navCon .myinfor { display: flex; width: 100%; height: 100px; padding: 30px; }
.panel .navCon .myinfor .infor { margin-top: 10px }
.panel .navCon .myinfor .infor img { width: 140px }
.panel .navCon a { display: flex; font-size: 15px; line-height: 100%; color: #fff; align-items: center; padding: 2px 0; }
.panel .navCon a span { display: block; padding: 0 30px 0 25px; }
.panel .navCon .mgnb { padding: 10px 20px; overflow: auto; height: calc(100% - 170px); }
.panel .navCon > ul > li { border-bottom: 1px solid rgba(255,255,255,.1); }
.panel .navCon > ul > li > a { font-size: 18px; line-height: 40px; background: url(../images/common/bl_nav1.png) no-repeat right 8px; background-size: 24px 80px; padding: 10px; color: #fff; }
.panel .navCon > ul > li.active > a { background-position: right -33px }
.panel .navCon > ul > li:first-child > a { background: none }
.panel .navCon > ul > li:last-child > a { background: none }
.panel .snb, .panel .nb { display: none; }
.panel .on .snb, .panel .snb li.on .nb { display: block; }
.panel .snb > ul > li { border-top: 1px solid #cececf; background: #e9e9ea; }
.panel .snb > ul > li:first-child { border-top: 1px solid #b6b6b8; }
.panel .snb > ul > li.add > a { background: url('../images/common/bl_nav2.png') no-repeat right top; background-size: 23px 60px; }
.panel .snb > ul > li.on > a { background-position: right -30px }
.panel .nb > ul > li { border-top: 1px solid #e4e5e5; background: #f2f2f2; }
.panel .nb > ul > li:first-child { border-top: 1px solid #cececf; }
ul.mgnb li > ul { display: none; }
ul.mgnb li > ul li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
ul.mgnb li > ul li { border-top: 1px solid rgba(255, 255, 255, .1); background: #4c4c5f; padding: 12px 28px }