@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: fixed; z-index: 9999; display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.1) }*/
#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: 110px; 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; }
#logo a.logo { display: inline-block; float: left; width: 140px; height: 42px; text-indent: -9999px; background: url(../images/common/logo2.svg) left top no-repeat; background-size: 100% auto }
#subArea-wrap .spotArea { opacity: 0; transition: opacity .5s ease; animation: fade-in 1s ease forwards; }
@keyframes fade-in { to {
 opacity: 1;
}
}
/***************** 메뉴네비게이션 **********************/
.m-fullpage { background: #ccc }
.menu-container { margin: 0 auto; width: 100%; position: absolute; top: 0px; left: 0; z-index: 999 }
#gnb { margin: 0 auto; width: 1000px; font-size: 20px; position: relative; opacity: 1; transition: .2s ease-in-out; }
#gnb:after { display: table; content: ""; clear: both; }
#gnb > ul { text-align: center; }
#gnb:after { display: block; content: ""; clear: both; }
#gnb > ul li { position: relative; display: inline-table; font-size: 20px; padding: 28px 16px 6px; transition: .2s ease-in-out; }
#gnb > ul li a { color: #fff; font-weight: 500; transition: .2s ease-in-out; }
#gnb > ul li a:hover { color: #fff; }
#gnb > ul li .on { color: #fff; }
#gnb > ul li a.dep01 { position: relative; display: block; text-align: center; padding: 16px 22px 46px }
#gnb > ul > li:hover > a { color: #fff }
#gnb > ul > li:hover > a:active { color: #fff }
#gnb > ul > li > a:after { transition: .2s ease-in-out; }
#gnb > ul > 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 > ul > li:hover > a:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
#gnb > ul > li:hover > a { color: #121212 }
#gnb > ul > li:hover ul li a { color: #ccc; width: 100% }
#gnb > ul > li ul li a:active { color: #666; }
#gnb > ul > li:hover ul li a:hover { color: #fff }
#gnb > ul > li ul li a { margin-bottom: 3px }
#gnb > ul > li.on > a:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
/*#gnb > ul > li ul li a.smnb { font-size: 13px }*/
#gnb li.first a { }
#gnb li.last a.dep01 { }
#gnb > ul li ul { display: none; position: absolute; top: 120px; left: 0px; padding: 0; width: 100%; z-index: 1000; }
#gnb > ul li.first ul { }
#gnb > ul li.last ul { }
#gnb.active ul li a { color: #ccc }
#gnb > ul li.active a { color: #ccc }
#gnb > ul li.active ul { width: 100%; }
#gnb > ul li.active ul:hover { width: 100%; }
#gnb > ul li.active ul:active { width: 100%; }
#gnb > ul li > ul li { padding: 5px 0; clear: both; width: 100%; text-align: center; font-size: 17px; }
#gnb > ul li > ul li a { display: block; width: 100%; color: #ccc; padding: 10px 0; position: relative }
#gnb > ul li > ul li a em { display: inline-block; position: relative; background: rgba(255, 255, 255, 0); }
#gnb > ul li > ul li a em::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0); transition: .2s ease-in-out; }
#gnb > ul li > ul li a:hover em::after { background: rgba(255, 255, 255, .7); }
/*#gnb ul li ul li.active a { display: block; color: #333; }*/
#gnb > ul li > ul li.active a { color: #666; }
#gnb > ul li > ul li a:hover, #gnb ul li ul li a:focus { color: #666; }
/******************/
.gnb_menu { width: 100%; height: 0px; background: rgba(0, 0, 0, 0); position: absolute; top: 0; z-index: 600; transition: .2s ease-in-out; }
#header.active .gnb_menu { height: 460px; background: rgba(0, 0, 0, .8); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.20); }
/***************** 언어 **********************/
/*
.m-fullpage #head .fnb { display: block }
.m-fullpage.overflow .fnb { display: block }
*/
.m-fullpage #head .fnb { position: absolute; }
.fnb { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; transition: .2s ease-in-out; }
.fnb > div { position: relative; width: 1560px; margin: 0 auto; transition: .2s ease-in-out; }
/*.fnb { position: absolute; z-index: 9999; top:0; left:0; display: block; width: 100%; padding: 0;  }*/
/*.fnb > div { position: relative; width: 1560px; height: 110px; margin: 0 auto; padding: 0; }*/
.fnb .langArea { position: absolute; top: 44px; right: 60px; 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; }
.fnb .langArea > a { color: #fff; padding-left: 30px; font-size: 14px; font-weight: 600; transition: .2s ease-in-out; }
.fnb .langArea > a.on { }
.fnb .langArea > a > i { position: relative; font-size: 12px; top: 1px }
.fnb .langArea.is-active { background: url("../images/common/ico_lang.svg") left top no-repeat !important; }
.fnb .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; display: none }
ul.floating-lang.off a { cursor: default }
/***************** 풀메뉴버튼 **********************/
.header_toggle { position: absolute; top: 42px; right: 0px; display: block; cursor: pointer; width: 40px; height: 40px; z-index: 99999; ; transition: .2s ease-in-out; }
/*.header_toggle { position: absolute; top: 42px; display: block; cursor: pointer; right: 6px; width: 40px; height: 40px; z-index: 99999 }*/
.header_toggle span { display: block; background: #fff; width: 38px; height: 3px; transition: 0.25s margin 0.25s, 0.25s transform; }
.header_toggle span:nth-child(1) { margin-bottom: 8px; }
.header_toggle span:nth-child(3) { margin-top: 8px; }
.header_toggle.is-active span { transition: 0.25s margin, 0.25s transform 0.25s; }
.header_toggle.is-active span:nth-child(1) { margin-top: 8px; margin-bottom: -3px; transform: rotate(45deg); }
.header_toggle.is-active span:nth-child(2) { transform: rotate(45deg); }
.header_toggle.is-active span:nth-child(3) { margin-top: -3px; transform: rotate(135deg); }
/***************** 풀메뉴 **********************/
/*.full-gnb { display: none; width: 100%; }*/
.full-gnb { width: 100%; visibility: hidden; }
.full-gnb.is-active { width: 100%; visibility: visible; }
.full-gnb:after { content: ''; position: absolute; top: 0; width: 100%; height: 100vh; background-color: #2b364f; }
.full-gnb * { position: relative; z-index: 1; }
/***************/
#masthead { width: 100%; position: fixed; top: 0; left: 0; background: #2b364f; }
#masthead.is-active { width: 100%; height: 100%; z-index: 9999; min-height: 600px; }
#masthead:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2b364f; opacity: 0; transition: opacity 0.3s ease; }
#masthead.is-active:after { opacity: 1; }
#masthead.is-active .hamburger-label { color: #000; }
#masthead div.header { width: 100%; height: 110px; border-bottom: 1px solid rgba(255, 255, 255, .1) }
#masthead div.header > div { width: 1560px; height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#masthead div.header > div p { height: 110px; }
#masthead div.header > div p.logo { width: 140px; height: auto; }
#masthead div.header > div p.logo img { width: 100%; }
#masthead div.header > div p:last-child { border-left: 1px solid rgba(255, 255, 255, .1); flex-basis: 30% }
#masthead .cont-frame { width: 100%; height: 66%; border-bottom: 1px solid rgba(255, 255, 255, .1) }
#masthead .cont-frame .cont-area { width: 1560px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#masthead .cont-frame .cont-area .container { width: 70%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
#masthead .cont-frame .cont-area .contact-infor { height: 100%; flex-basis: 30%; padding: 0 3%; display: flex; align-items: center; }
#masthead .cont-frame .cont-area .contact-infor dl { font-size: 18px }
#masthead .cont-frame .cont-area .contact-infor dl dt { color: #fff; font-size: 20px; padding-bottom: 4vh; }
#masthead .cont-frame .cont-area .contact-infor dl dd { padding: 1.4vh 0; }
#masthead .cont-frame .cont-area .contact-infor dl dd:last-child { max-height: 200px; overflow: auto }
#masthead .cont-frame .cont-area .contact-infor dl dd span { color: #fff; display: inline-block; min-width: 100px; padding-bottom: 2vh; }
#masthead .cont-frame .cont-area .contact-infor dl dd em { display: inline-block; color: #b4b9ba; line-height: 140%; margin-bottom: 10px }
#masthead .cont-frame .cont-area .contact-infor dl dd:last-child em { display: block }
#masthead .cont-frame .cont-area .contact-infor a:hover em { color: #fff }
#masthead .footer { width: 100%; height: 24% }
#masthead .footer .ft_area { width: 1560px; height: 100%; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; }
#masthead .footer .ft_area .ft { padding: 30px 0 0 0; }
#masthead .footer .ft_area .ft ul { float: left; position: relative; opacity: 0; }
#masthead .footer .ft_area .ft ul li { float: left; margin-right: 30px; padding: 20px 0 }
#masthead .footer .ft_area .ft ul li a { padding: 20px 0; color: #b4b9ba; transition: color 0.3s ease; }
#masthead .footer .ft_area .ft ul li a em { display: inline-block; position: relative; background: rgba(255, 255, 255, 0); }
#masthead .footer .ft_area .ft ul li a em::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0); transition: .2s ease-in-out; }
#masthead .footer .ft_area .ft ul li a:hover em::after { background: rgba(255, 255, 255, .7); }
#masthead .footer .ft_area .ft ul li a:hover em:focus { color: #fff; }
#masthead .footer .ft_sns { border-left: 1px solid rgba(255, 255, 255, .1); flex-basis: 30%; height: 100%; display: flex; padding: 30px 0 0 3%; }
#masthead .footer .ft_sns ul { display: flex }
#masthead .footer .ft_sns ul li { margin-right: 10px }
#masthead .footer .ft_sns ul li a { }
#masthead .footer .ft_sns ul li a.sns { display: inline-block; width: 48px; height: 48px; text-indent: -9999px; background-size: 48px auto; transition: all 0.2s ease-out; }
#masthead .footer .ft_sns ul li a.sns.spacemagic { background: url("../images/common/sns_space_k.svg") left top no-repeat; }
#masthead .footer .ft_sns ul li a.sns.face { background: url("../images/common/sns_face_k.svg") left top no-repeat; }
#masthead .footer .ft_sns ul li a.sns.instar { background: url("../images/common/sns_instar_k.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.naver { background: url("../images/common/sns_naver_k.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.youtube { background: url("../images/common/sns_youtube_k.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.meet { background: url("../images/common/sns_meet_k.svg") left top no-repeat; }
#masthead .footer .ft_sns ul li a.sns.spacemagic:hover { background: url("../images/common/sns_space_.svg") left top no-repeat; }
#masthead .footer .ft_sns ul li a.sns.face:hover { background: url("../images/common/sns_face_.svg") left top no-repeat; }
#masthead .footer .ft_sns ul li a.sns.instar:hover { background: url("../images/common/sns_instar_.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.naver:hover { background: url("../images/common/sns_naver_.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.youtube:hover { background: url("../images/common/sns_youtube_.svg") left top no-repeat }
#masthead .footer .ft_sns ul li a.sns.meet:hover { background: url("../images/common/sns_meet_.svg") left top no-repeat; }
/***************/
#site-nav { clear: both; height: 0; }
#site-nav.is-active { height: auto; overflow: visible; width: 100%; display: flex; flex-direction: column; }
#site-nav li a { padding: 20px 10px; padding: 0; color: #b4b9ba; transition: color 0.3s ease; }
#site-nav li a em { display: inline-block; position: relative; background: rgba(255, 255, 255, 0); }
#site-nav li a em::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0); transition: .2s ease-in-out; }
#site-nav li a:hover em::after { background: rgba(255, 255, 255, .7); }
#site-nav li a:hover, #site-nav li a:focus { color: #fff; }
#site-nav .col { font-size: 20px; padding: 4vh 0; display: flex; }
#site-nav .col > a { float: left; min-width: 130px; display: flex; flex-wrap: wrap; gap: 20px 0px; }
#site-nav .col > ul { float: left; display: flex; flex-wrap: wrap; gap: 20px 0; }
#site-nav .col > ul li { float: left; margin-right: 30px }
/***************/
#masthead .col { opacity: 0; }
#masthead.is-active .col > a { color: #fff; }
#masthead.is-active .col { transform: translateY(40px); transition: opacity 0.3s ease; animation: fade-in-stagger 0.8s ease forwards; }
@keyframes fade-in-stagger { to {
 opacity: 1;
 transform: translateY(0);
}
}
#masthead.is-active .col:nth-child(1) { -webkit-animation-delay: 0s; }
#masthead.is-active .col:nth-child(2) { -webkit-animation-delay: 0.1s; }
#masthead.is-active .col:nth-child(3) { -webkit-animation-delay: 0.2s; }
#masthead.is-active .col:nth-child(4) { -webkit-animation-delay: 0.3s; }
#masthead.is-active .col:nth-child(5) { -webkit-animation-delay: 0.4s; }
#masthead.is-active .col:nth-child(6) { -webkit-animation-delay: 0.4s; }
#masthead .cont-frame .cont-area .contact-infor { position: relative; }
#masthead.is-active .cont-frame .cont-area .contact-infor { border-left: 1px solid rgba(255, 255, 255, .1); }
#masthead .cont-frame .cont-area .contact-infor dl { position: relative; opacity: 0; }
#masthead.is-active .cont-frame .cont-area .contact-infor dl { transform: translateY(40px); transition: opacity 0.3s ease; animation: fade-in-stagger 0.8s ease forwards; -webkit-animation-delay: 0.5s; }
#masthead .footer .ft_sns ul { position: relative; opacity: 0; }
#masthead.is-active .footer .ft_sns ul { transform: translateY(40px); transition: opacity 0.4s ease; animation: fade-in-stagger 0.9s ease forwards; -webkit-animation-delay: 0.6s; }
#masthead.is-active .footer .ft_area .ft ul { transform: translateY(40px); transition: opacity 0.3s ease; animation: fade-in-stagger 0.8s ease forwards; -webkit-animation-delay: 0.5s; }
/*****************/
* 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% }
#footer .footer_notice { width: 100%; border-bottom: 1px solid #4f5154 }
#footer .footer_notice dl { position: relative; width: 1560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between }
#footer .footer_notice dl dt { color: #bdc1c6; float: left; font-weight: 600; flex-basis: 150px }
#footer .footer_notice dl dd { }
#footer .footer_notice dl dd.nav_btn { }
#footer .footer_notice dl dd.nav_btn > div { cursor: pointer; color: #4f5154; font-size: 24px; padding: 20px; display: inline-block; border-right: 1px solid #4f5154 }
#footer .footer_notice dl dd.nav_btn > div:first-child { border-left: 1px solid #4f5154 }
#footer .footer_notice dl dd.nav_btn > div i { }
#footer .footer_notice dl dd.nav_btn > div:hover { color: #999 }
#footer .footer_notice dl dd ul { }
#footer .footer_notice dl dd ul li { }
#footer .footer_notice dl dd ul li a { color: #bdc1c6; }
#footer .footer_notice dl dd ul li a:hover { color: #eee }
#footer .footer_notice dl dd ul li span { }
#footer .footer_notice dl dd ul li em { margin-left: 30px; color: #797D83 }
#footer .newsData { overflow: hidden; position: relative; height: 24px; float: left; color: #bdc1c6; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1 }
#footer .newsData ul { }
#footer .newsData dl dt { }
#footer .newsData dl dd { }
#footer .newsData dl dd span { }
#footer .newsData dl dd em { }
address { font-size: 15px; color: #bdc1c6; margin: 30px 0 0 148px; line-height: 140%; }
address span { }
address span em { }
.helpDesk { position: fixed; right: 20px; bottom: 22%; background: #fff; border-radius: 18px; padding: 20px 8px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); z-index: 9990; border: 1px solid rgba(0, 0, 0, 0); width: 110px; }
.helpDesk:hover { border: 1px solid rgba(0, 0, 0, .1); opacity: 1 }
.helpDesk ul { color: #4D515C; }
.helpDesk ul li { border-bottom: 1px solid #eee; padding: 10px; position: relative }
.helpDesk ul li:first-child { padding: 0 6px 10px; }
.helpDesk ul li:last-child { border-bottom: none; padding: 10px 10px 0px; }
.helpDesk ul li a { color: #4D515C; width: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.helpDesk ul li a:hover { color: #000 }
.helpDesk ul li a span { font-size: 13px; line-height: 140%; text-align: center }
.helpDesk ul li:nth-child(1) em { font-size: 11px }
.helpDesk ul li:nth-child(1) span { font-size: 14px; font-weight: 600 }
.helpDesk ul li a > div { width: 40px; height: 40px; text-indent: -9999px }
.helpDesk ul li:nth-child(1) a > div { background: url("../images/common/banner_img01.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(2) a > div { background: url("../images/common/banner_img02.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(3) a > div { background: url("../images/common/banner_img03.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(4) a > div { background: url("../images/common/banner_img05.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(2) a:hover > div { background: url("../images/common/banner_img02_.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(3) a:hover > div { background: url("../images/common/banner_img03_.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:nth-child(4) a:hover > div { background: url("../images/common/banner_img05_.svg") left top no-repeat; background-size: 40px auto; }
.helpDesk ul li:first-child a { pointer-events: none; cursor: default; }
/**********************/
.helpDesk .intro_dong { position: absolute; top: -124px; width: 100px; height: 140px; display: flex; text-indent: -9999px; transition: .3s ease-in-out; background: url(../images/main/dong_banner.png) left top / 100px no-repeat; }
.helpDesk .intro_dong:hover { width: 100px; height: 140px; background: url(../images/main/dong_banner_.png) left top / 100px no-repeat; }