@charset "utf-8";
/*-------------------------------------------------
Author : SY,CHo
Create date : 2019. 09. 09.
-------------------------------------------------*/

/* ========================================== BODY */

#wrap {overflow: hidden;}
.container {margin: 0 auto; width: 100%; max-width: 1280px;}

.popupLayout {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999;}
.popupLayout .innerWrap {position: absolute; top: 50%; left: 50%; width: 70%; max-width: 900px; height: 55%; background: #fff; transform: translate(-50%, -50%);}
.popupLayout .innerWrap .popupH1 {padding: 1rem; text-align: center; font-size: 1.3rem; color: #fff; background: #043763; word-break: keep-all;}
.popupLayout .innerWrap .popupCloseX {position: absolute; top: 1.25rem; right: 1.25rem; display: inline-block; width: 1.5rem; height: 1.5rem; color: #fff;}
.popupLayout .innerWrap .popupCloseX i {font-size: 1.5rem;}
.popupBox {margin: 2rem;  line-height: 1.6; word-break: keep-all; overflow: hidden;}
.popupLayout .today_close {position: absolute; bottom: 1rem; left: 1rem;}

.ruleBox {height: calc(100% - 4rem); padding: 2rem; line-height: 1.6; word-break: keep-all; overflow: hidden;}
.ruleBox > .h03:first-child,
.mCSB_container > .h03:first-child {margin-top: 0;}
.ruleBox .h03 span {display: inline-block; margin-left: 0.5rem; font-size: 0.8rem; font-weight: normal;}
.ruleBox h3 {margin: 1rem 0 0.5rem;}
.ruleBox h4 {margin: 0.75rem 0 0.25rem;}
.ruleBox li + li {margin-top: 0.25rem;}
.ruleBox li ul {margin-top: 0.25rem; margin-left: 1rem;}

/* ========================================== 메인메뉴 */
#header {position: relative; height: 8rem; z-index: 999;}
#header:before {position: absolute; left: 0; top: 8rem; width: 100%; height: 0; background-color: rgba(0,0,0,0.7); content: ""; z-index: -1; transition: all .2s .1s; -webkit-transition: all .2s .1s;}
#header.mainMenuOpen:before {height: 1000%;}
.headerWrap .top {position: relative; width: 100%; max-width: 1280px; height: 5rem; margin: 0 auto; padding: 1.2rem 0;}
.headerWrap .top:after {clear: both; display: block; content: "";}

.headerWrap .top h1 {float: left;}
.headerWrap .top h1 .logo {display: inline-block; width: 6.9rem; height: 2.55rem; background: url(/_kor/img/layout/logo.png) no-repeat left center; background-size: auto 100%;}
.brand_logo {display: inline-block;  width: 104px; margin-left: 0.5rem;  vertical-align: top;}
.brand_logo img { width: 100%; height: 100%;}
.headerWrap .float-right {margin-top: 5px;}

.mobileSearchBtn {display: none; width: 2rem; height: 2rem; line-height: 2rem;}
.mobileSearchBtn:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: "xeicon"; font-size: 1.55rem; color: #333; content: "\e97a";}

.topSearch {position: absolute; top: 1.2rem; left: 50%; margin-left: -12.5rem; padding-left: 5rem; width: 25rem; height: 2.6rem; line-height: 2.3rem; background: #fff; border: 0.15rem solid #4e69cc;}
.topSearch input[type="text"] {display: block; padding: 0 0.75rem; width: 100%; height: 2.3rem; background: #fff; border: none;}
.topSearch input[type="text"]::-ms-clear {display: none;}
.topSearch button {position: absolute; top: 0; right: 0; padding: 0; width: 2.3rem; height: 2.3rem; line-height: 2.3rem; border: none;}
.topSearch button:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: "xeicon"; font-size: 0.9rem; color: #333; content: "\e97a";}
.topSearch .searchClose {position: absolute; top: 0; right: -5rem; display: none;}

#topSearchWrap {position: absolute; top: 0; left: 0; width: 5rem; height: 2.3rem; background: #fff; z-index: 1;}
#topSearchWrap > dt > a {position: relative; display: block; padding: 0 0.75rem; height: 2.3rem;}
#topSearchWrap > dt > a:before {position: absolute; top: 0.8rem; right: 0; width: 1px; height: 0.7rem; background: #d6d6d6; content: "";}
#topSearchWrap > dt > a:after {position: absolute; top: 0.7rem; right: 0.25rem; width: 1rem; height: 1rem; line-height: 1; text-align: center; /* font-size: 1rem; */ font-family: "xeicon"; content: "\e936"; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
#topSearchWrap > dd {position: absolute; top: 2.3rem; left: -0.15rem; width: 100%; background: #fff; border: 1px solid #d6d6d6; overflow: hidden; height: 0; opacity: 0; visibility: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; z-index: 2;}
.topSearchList {padding: 0.5rem 0.75rem; line-height: 1;}
.topSearchList li {position: relative; display: block; padding: 0.35rem 0; cursor:pointer;}
.topSearchList li:after {position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #5c5c5c; content: ""; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
.topSearchList li:hover:after {width: 100%;}
#topSearchWrap.active > dt > a:after {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
#topSearchWrap.active > dd {height: auto; opacity: 1; visibility: visible;}

/*
.topSearch {float: left; position: relative; margin-top: 0.15rem; margin-left: 2.5rem; width: 17.5rem; height: 2.3rem; line-height: 2.1rem; background: #fff; border: 0.15rem solid #4e69cc; z-index: 2;}
.top > .topSearch {float: none; position: absolute; top: 1.35rem; left: 50%;  width: 22.5rem;margin-top: 0; margin-left: -11.25rem;}
.topSearch input[type="text"] {display: block; padding: 0 0.75rem; width: 100%; height: 2rem; line-height: inherit; background: #fff; border: none; }
.topSearch input[type="text"]::-ms-clear{ display: none;}
.topSearch button {position: absolute; top: 0; right: 0; padding: 0; width: 2.1rem; height: 2rem; line-height: inherit; border: none;}
.topSearch button:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: inherit; text-align: center; font-family: "xeicon"; font-size: 0.9rem; color: #333; content: "\e97a";}
.topSearch .searchOpen {display: none;}

#searchLayer {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0,0,0,0.1); z-index: 1;}
#searchLayer:before {position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: #fff; content: "";}
#searchLayer .container {position: relative; padding: 1.5rem 0; height: 160px; text-align: center;}
#searchLayer h2 {position: absolute; top: 54px; left: 0;}
#searchLayer .tabSearch {margin: 0 auto; width: 30rem;}
#searchLayer .tab {display: table; width: 100%; table-layout: fixed; overflow: hidden;}
#searchLayer .tab > li {display: table-cell;}
#searchLayer .tab > li + li a {border-left: 2px solid #e3e3e3;}
#searchLayer .tab a {position: relative; display: table; width: 100%; text-align: center; color: #777; white-space: nowrap; background: #efeff2;}
#searchLayer .tab a > span {display: table-cell; width: 100%; height: 100%; vertical-align: middle; word-break: keep-all;}
#searchLayer .tab a:hover,
#searchLayer .tab .active a {color: #fff; background: #4e69cc; border-left: none;}
#searchLayer .topSearch {float: none; margin-top: 0; margin-left: 0; width: 100%;}
#searchLayer .searchClose {position: absolute; top: 64px; right: 0; line-height: 1; color: #777;}
#searchLayer .searchClose .xi-close-thin {margin-left: 0.5rem; vertical-align: middle; font-size: 2rem;}
*/

.molegSNS {float: left; margin-top: 10px; margin-right: 0.5rem;}
.molegSNS li {float: left; margin: 0 0.25rem;}
.molegSNS li + li {margin-left: 0.6rem;}
.molegSNS li a {display: inline-block; height: 22px; background: url(/_kor/img/layout/icons.png) no-repeat; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}

.molegSNS li.facebook a, #footer .molegSNS li.facebook a {padding-left: 11px; width: 11px; background-position: 0 -22px;}
.molegSNS li.twitter a, #footer .molegSNS li.twitter a {padding-left: 20px; width: 20px; background-position: -11px -22px;}
.molegSNS li.youtube a, #footer .molegSNS li.youtube a {padding-left: 22px; width: 22px; background-position: -31px -22px;}
.molegSNS li.blog a, #footer .molegSNS li.blog a  {padding-left: 15px; width: 15px; background-position: -53px -22px;}
.molegSNS li.naver a,  #footer .molegSNS li.naver a {padding-left: 14px; width: 14px; background-position: -67px -22px;}
.molegSNS li.here a, #footer .molegSNS li.here a {padding-left: 56px; width: 56px; background-position: -81px -22px;}

.molegSNS li.facebook a:hover, #footer .molegSNS li.facebook a:hover {background-position: 0 0;}
.molegSNS li.twitter a:hover, #footer .molegSNS li.twitter a:hover {background-position: -11px 0;}
.molegSNS li.youtube a:hover, #footer .molegSNS li.youtube a:hover  {background-position: -31px 0;}
.molegSNS li.blog a:hover, #footer .molegSNS li.blog a:hover  {background-position: -53px 0;}
.molegSNS li.naver a:hover,  #footer .molegSNS li.naver a:hover  {background-position: -67px 0;}
.molegSNS li.here a:hover, #footer .molegSNS li.here a:hover {background-position: -81px 0;}

#site {float: right;}
#site a {position: relative; display: inline-block; letter-spacing: -0.05em; line-height: 2rem;}
#site a:after {position: absolute; top: 0; right: 0.5rem; font-family: "xeicon";}
#child {padding-right: 1.75rem; color: #767676;}
#child:after {right: 0.75rem; content: "\e980";}
#language {margin-left: 0.75rem; padding-right: 1.5rem; color: #333;}
#language:before {position: absolute; top: 0.65rem; left: -0.75rem; width: 1px; height: 0.8rem; background: #d1d1d1; content: "";}
#language:after {content: "\e942";}

.gnb {position: relative; margin: 0 auto; /* padding-right: 3rem; */ width: 100%; max-width: 1280px; height: 3rem;}
.gnb:before {position: absolute; top: 0; left: -100%; width: 300%; height: 3rem; background: #f4f4f5; border-top: 1px solid #dfe0e2; border-bottom: 1px solid #dfe0e2; content: "";}
.gnb:after {clear: both; display: block; content: "";}
.Allmn-close {display:none; position: absolute; top: 0.05rem; right: 0; padding-left: 2.9rem; width: 2.9rem; height: 2.9rem; line-height: 2.9rem; background: #f4f4f5; overflow: hidden;}
.Allmn-close:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: "xeicon"; font-size: 1.55rem; content: "\e91c";}

#head_menu {position: relative; padding: 0 2rem;}
#head_menu a > i[class^="xi-"] {margin-left: 0.25rem;}
#head_menu > li {float: left; width: 16.666%;}
#head_menu > li > a {display: block; line-height: 3rem; text-align: center; font-size: 0.95rem; font-weight: 600; color: #333;}
#head_menu > li + li > a {position: relative;}
#head_menu > li + li > a:after {position: absolute; top: 1.15rem; left: 0; width: 0.1rem; height: 0.75rem; background: #e3e3e3; content: "";}
#head_menu > li > a:hover,
#head_menu > li > a.active,
#head_menu > li > a.on {color: #4560c2; transition: all .2s;}
#head_menu > li > a.on span {position: relative; display: inline-block; padding-right: 1rem;}
#head_menu > li > a.on span:after {position: absolute; top: 0; right: 0; font-family: "xeicon"; content: "\e936";}
#head_menu > li.on .submenu {display: table; transition: all .2s .1s;}
#head_menu .submenu {position: absolute ;left: 0; top: calc(3rem + 1px); display: none; padding: 0; width: calc(100% + 3rem); z-index: 100;}
#head_menu .submenu:before {position: absolute; left: 50%; top: -1px; margin-left: -500%; width: 1000%; height: calc(100% + 1px); background-color: #fff; transition: all .2s .1s; content: "";}
#head_menu .submenu:after {position: absolute; left: -100%; top: -1px; margin-left: 12rem; width: 100%; height: calc(100% + 1px); background-color: #4560c2; transition: all .2s .1s; content: "";}
#head_menu .submenu > .title {position: relative; display: table-cell; width: 14rem; height: 100%; color: #fff; z-index: 1; padding-left:1%;}
#head_menu .submenu > .title strong {display: block; padding-top: 1.75rem; font-size: 1.4rem;}
#head_menu .submenu > .title span {display: block; margin: 1rem 0; width: 90%;  line-height: 1.1rem;}
#head_menu .submenu > .title img {margin: 1rem 0;}
#head_menu .submenu > ul {position: relative; display: table-cell; width: 82%; height: 100%; vertical-align: top; overflow: hidden; }
#head_menu .submenu > ul:before {position: absolute; left: 0; top: 0; width: 12rem; height: 300%; background-color: #f4f4f5; content: '';}
#head_menu .submenu > ul > li {position: relative; display: table; width: 100%;}
#head_menu .submenu > ul > li + li {border-top: 1px solid rgba(0,0,0,0.15);}
#head_menu .submenu > ul > li > a {position: relative; display: table-cell; padding: 0.5rem 1.3rem; width: 12rem; text-align: left; vertical-align: middle; color: #222; transition: all .3s; z-index: 5;}
#head_menu .submenu > ul > li > a:after {position: absolute; top: 50%; right: 1rem; margin-top: -0.5rem; width: 23px; height: 23px; line-height: 23px; text-align: center; font-family: "xeicon"; content: "\e93f";}
#head_menu .submenu > ul > li > a:hover {font-weight: 700; color: #4560c2;}
#head_menu .submenu > ul > li > a:hover:after {color: #fff; background: #4560c2; border-radius: 50%;}
#head_menu .submenu > ul div {display: table-cell; padding: 0.5rem 0; width: calc(100% - 26rem); text-align: left; vertical-align: middle;}
#head_menu .submenu > ul div ul {margin-left: 1rem}
#head_menu .submenu > ul div li {display: inline-block; width: 30%;}
#head_menu .submenu > ul div li a {position: relative; display: inline-block; margin-right: 2rem; padding-left: 0.85rem; line-height: 1.6; color: #666; letter-spacing: -1px;}
#head_menu .submenu > ul div li a:before {position: absolute; top: 0.6rem; left: 0; width: 6px; height: 2px; background-color: #d0d0d0; content: "";}
#head_menu .submenu > ul div li a:hover {font-weight: 700; color: #043763;}
#head_menu .submenu > ul div li a:hover:before {background-color: #043763;}
#head_menu .submenu > ul div li a.linkWindow:after{content:"\e980"; display: inline-block; font-family: 'xeicon'; font-size: .8rem; vertical-align: top; margin-left: 3px;}

#header.fullMenuOpen {}
#header.fullMenuOpen .gnb {position: absolute; top: 5rem; left: 50%; padding: 3rem 0; height: 100%; min-height: 1420px; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2;}
#header.fullMenuOpen .gnb:before {height: 1000%; background: #e0e3eb; border: none;}
#header.fullMenuOpen .Allmn-close {background: transparent;}
#header.fullMenuOpen .Allmn-close:after {content: "\e921";}
#header.fullMenuOpen #head_menu {padding: 0;}
#header.fullMenuOpen #head_menu > li {width: 18.4%;}
#header.fullMenuOpen #head_menu > li + li {margin-left: 2%;}
#header.fullMenuOpen #head_menu > li:last-child {margin-top: -14.5rem; margin-left: 22.8%;}
#header.fullMenuOpen #head_menu > li > a {color: #fff; background: #4560c2;}
#header.fullMenuOpen #head_menu > li + li > a:after {display: none;}
#header.fullMenuOpen #head_menu > li > a.on {color: #fff; transition: none;}
#header.fullMenuOpen #head_menu > li > a.on span {padding-right: 0;}
#header.fullMenuOpen #head_menu > li > a.on span:after {display: none;}
#header.fullMenuOpen #head_menu > li.on .submenu {transition: none;}
#header.fullMenuOpen #head_menu .submenu {position: static; left: auto; top: auto; display: block; padding: 0; width: auto; z-index: auto;}
#header.fullMenuOpen #head_menu .submenu:before,
#header.fullMenuOpen #head_menu .submenu:after {display: none; transition: none;}
#header.fullMenuOpen #head_menu .submenu > .title {display: none;}
#header.fullMenuOpen #head_menu .submenu > ul {position: static; display: block; width: auto; height: auto;}
#header.fullMenuOpen #head_menu .submenu > ul:before {display: none;}
#header.fullMenuOpen #head_menu .submenu > ul > li {position: static; display: block;}
#header.fullMenuOpen #head_menu .submenu > ul > li > a {position: static; display: block; padding: 1rem 0; width: auto; color: #222; transition: none; z-index: auto;}
#header.fullMenuOpen #head_menu .submenu > ul > li > a:after {display: none;}
#header.fullMenuOpen #head_menu .submenu > ul > li > a:hover {background-color: transparent;}
#header.fullMenuOpen #head_menu .submenu > ul div {display: block; padding: 0; width: 100%;}
#header.fullMenuOpen #head_menu .submenu > ul div ul {margin-left: 0; padding: 0 0 0.75rem;}
#header.fullMenuOpen #head_menu .submenu > ul div li {display: block; width: 100%;}
#header.fullMenuOpen #head_menu .submenu > ul div li a {display: block; margin-right: 0;}

/* ========================================== 컨텐츠 레이아웃 */

#contents {}
#contents:after {clear: both; display: block; width: 100%; content: "";}

/* 리스트 스타일 */
.bul_dot ul {margin-top: 0.5rem;}
.bul_dot > li {position: relative;}
.bul_dot > li:before {position: absolute; left: -8px; top: 0.6rem; width: 4px; height: 4px; background-color: #b7b4c7; content: "";}
.bul_dot > li:after {clear: both; display: block; width: 100%; content: "";}
.bul_hyphen > li {position: relative;}
.bul_hyphen > li:before {position: absolute; left: -9px; top: 0.6rem; width: 5px; height: 1px; background-color: #555; content: "";}

/* ========================================== 푸터 레이아웃 */

#footer {position: relative; padding: 0 0 2rem; width: 100%; line-height: 1.5; font-weight: 200; color: #bababa; background: #3f4044;}
#footer:after {position: absolute; top: 3.5rem; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.07); content: "";}
#footer .container {position: relative;}
#protectionLink {line-height: 3.5rem; overflow: hidden;}
#protectionLink h2 {display: none;}
#protectionLink li {float: left; display: inline-block;}
#protectionLink li + li {margin-left: 1rem;}
#protectionLink a {display: inline-block; color: #dddce3;}
#protectionLink a strong {font-weight: 400;}

#relateSiteWrap { display: none; position: absolute; top: 0; right: 0; height: 3.5rem; z-index: 1;}
#relateSiteWrap > dt > a {display: block; padding: 0 1.5rem 0 1rem; line-height: 3.5rem; color: #bababa;}
#relateSiteWrap > dt > a:after {position: absolute; top: 1.25rem; right: 0; width: 1rem; height: 1rem; text-align: center; font-size: 1.2rem; line-height: 1; font-family: "xeicon"; content: "\e9c5"; -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
#relateSiteWrap > dd {position: absolute; bottom: 100%; left: 0; width: calc(100% + 2px); background: #fff; border: 1px solid #97acc5; overflow: hidden; height: 0; opacity: 0; visibility: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.relateSiteList {padding: 0.25rem 0;}
.relateSiteList a {display: block; padding: 0.25rem 0.5rem; line-height: 1rem; color: #333;}
.relateSiteList a:hover {color: #384a56;}
#relateSiteWrap.active > dt > a:after {-webkit-transform: rotate(135deg); transform: rotate(135deg);}
#relateSiteWrap.active > dd {height: auto; opacity: 1; visibility: visible;}

#footer .molegSNS { display: inline-block; display: none; float: none; position: absolute; top: 0; right: 9rem; margin: 1.1rem 0; overflow: hidden;}
#footer .molegSNS li + li {margin-left: 0.25rem;}
#footer .molegSNS li a {background: url(/_kor/img/layout/icons02.png) no-repeat;}
#footer address {margin-top: 1.75rem; font-size: 0.75rem;}
#footer address strong {font-weight: inherit; color: #000;}
#footer .copyright {margin-top: 0.5rem; font-size: 0.75rem;}

#footer .mark {position: absolute; right: 0; bottom: 0.25rem;}
#footer .mark a + a {margin-left: 1rem;}

#funny {position: fixed; bottom: 0; right: 0; display: none;}

/* 전화번호 안내 */
#moleg-telInfo .innerWrap {width: 900px; height: auto; color: #222;  letter-spacing: -0.02rem; overflow: hidden;}
.icon-tel { overflow: hidden;}
.icon-tel li {position: relative; float: left; width: 50%; margin-bottom: 2rem; padding-left: 5.25rem;}
.icon-tel li::before {display: block; position: absolute; top: 0; left: 0; width: 81px; height: 100%; background: url(/_kor/img/layout/tel_icon01.png) no-repeat center center; content: '';}
.icon-tel li + li::before {background: url(/_kor/img/layout/tel_icon02.png) no-repeat center center;}
.icon-tel li strong {display: block; margin-bottom: 0.8rem; line-height: 1.2; letter-spacing: -0.05rem; font-size: 1.1rem; font-weight: 700;}
.icon-tel li strong span { font-weight: 200;}
.icon-tel li .part {display: inline-block; position: relative;}
.icon-tel li .part::after {position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #afafaf; content: ''; }
.icon-tel li .part i {color: #043763;}
.icon-tel li .tel {display: block; color:#043763; font-size: 1.1rem;font-weight: 700;}

.box-tel {display: flex; display: -webkit-flex; flex-flow: row wrap; margin: 0 0 1.75rem -1px; border-bottom: solid 1px #9ca7b2; text-align: center; overflow: hidden; }
.box-tel > li {width: 33.33%; border-top: solid 1px #222;  border-left: solid 1px #ddd; overflow: hidden;}
.box-tel > li .field {display: block; padding: 0.85rem 0; background-color: #f6f7f9; border-bottom: solid 1px #ddd; font-size: 0.8rem; font-weight: 700;}
.box-tel > li .charger {display: block; margin: 1rem 0;}
.box-tel > li .charger a {display: block;}
.box-tel > li .charger .txt-bold {font-weight: 700;}

.main-tel {padding: 0.9rem 0; background-color: #f0f2f7; text-align: center; line-height: 1.3;}
.main-tel li {display: inline-block; position: relative; padding: 0 2rem;}
.main-tel li:first-child::after {display: block; position: absolute; top: 5px; right: 0; width: 1px; height: 18px; background-color: #b7b7b7; content: '';}
.main-tel li span {display: inline-block; margin-left: 0.4rem; color: #043763; font-size: 0.9rem; font-weight: 700;}

/* 반응형 모바일 전용 */
.WD {display: block;}
.MD {display: none;}

@media screen and (max-width: 1300px){
	.container,

	/* #searchLayer h2 {left: 1rem;}
	#searchLayer .searchClose {right: 1rem; bottom: 0; width: 36px; height: 36px; color: transparent;}
	#searchLayer .searchClose .xi-close-thin {position: absolute; top: 0; left: 0; margin-left: 0; color: #000;} */

	#footer .molegSNS {position: static; top: auto; right: auto; margin: 1rem auto 0.5rem;;}
	#footer address {margin-top: 0;}
	#footer .mark {right: 1rem; bottom: 2rem;}
}
@media screen and (max-width: 1280px){
	.headerWrap .top {padding: 1.2rem 1rem;}
	#header.fullMenuOpen .gnb {/*height: calc(100% - 95px); min-height: inherit;*/ padding: 3rem 1rem 0;}
	#head_menu .submenu > .title { width: 20.5rem; }
    #head_menu .submenu > ul {width: 83.5%; }

	#footer {padding: 0;}
	#footer:after {display: none;}
	#footer .container {padding: 3rem 1rem 2rem;}

	#protectionLink {position: absolute; top: 0; left: -1rem; width: calc(100% + 2rem);}
	#protectionLink a {display: block; padding: 0 2rem; height: 2.5rem; line-height: 2.5rem; font-size: 0.8rem; font-weight: 200; color: #96979b; background-color: #3f4044; border-bottom: 1px solid rgba(255,255,255,0.1);}
	#protectionLink h2 {display: block;}
	#protectionLink h2 a {position: relative;}
	#protectionLink h2 a:after {position: absolute; top: 0.75rem; right: 2rem; font-size: 1.2rem; line-height: 1; font-family: "xeicon"; content: "\e9c5";  -webkit-transition: all .25s ease-out; transition: all .25s ease-out;}
	#protectionLink ul {position: absolute; bottom: 100%; left: 0; width: calc(100% + 2px); height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
	#protectionLink li {float: none; display: block;}
	#protectionLink li + li {margin-left: 0;}

	#protectionLink {overflow: visible;}
	#protectionLink.active h2 a:after {-webkit-transform: rotate(135deg); transform: rotate(135deg);}
	#protectionLink.active > ul {height: auto; opacity: 1; visibility: visible;}
	
	#relateSiteWrap {top: 2.5rem; right: auto; left: -1rem; width: calc(100% + 2rem); height: 2.5rem;}
	#relateSiteWrap > dt > a,
	#relateSiteWrap a {padding: 0 2rem; line-height: 2.5rem; background-color: #3f4044; border-bottom: 1px solid rgba(255,255,255,0.1);}
	#relateSiteWrap > dt > a:after {top: 0.75rem; right: 2rem; width: auto; height: auto;}
	#relateSiteWrap > dd {width: 100%; border: none;}
	.relateSiteList {padding: 0;}
	.relateSiteList a,
	.relateSiteList a:hover {color: inherit;}

	#searchLayer::before {display: none;}
	#searchLayer .container {height: 8rem; padding: 1.5rem 5rem 1.5rem 15rem; background-color: #fff;}
}
@media screen and (max-width: 1120px){
    #head_menu .submenu > .title { width: 23rem; }
    #head_menu .submenu > ul {width: 81.5%; }
}
@media screen and (max-width: 1080px){
	.topSearch {left: 15rem; margin-left: 0; width: calc(100% - 27rem);}
}
@media screen and (max-width: 1024px){
	.WD {display: none;}
	.MD {display: block;}

	#header {height: auto;}
	.Allmn-close {display:block;}

	.mobileSearchBtn {position: absolute; top: 1.5rem; right: 3rem; display: inline-block;}
	.mobileSearchBtn.active:after {content: "\e921";}

	.topSearch {display: none; width: 100%; top: 5rem; left: 0; padding: 0 6.25rem 0 1rem; height: 6rem; line-height: 2rem; border: none;}
	.topSearch:before {position: absolute; top: 6rem; left: 0; width: 100%; height: 10000%; background: rgba(0,0,0,0.1); content: "";}
	#topSearchWrap {position: relative; top: auto; left: auto; width: 100%; height: 2.4rem; border: 0.15rem solid #4d6cc8; z-index: auto;}
	#topSearchWrap > dt > a {height: 2.1rem;}
	#topSearchWrap > dt > a:before {display: none;}
	.topSearch input[type="text"] {margin-top: 0.2rem; height: 2.4rem; border: 0.15rem solid #4d6cc8;}
	.topSearch button {right: 1rem; width: 5rem; height: 5rem; line-height: 5rem; background: #4d6cc8;}
	.topSearch button:after {font-size: 1.5rem; color: #fff;}
	#topSearchWrap > dd {width: calc(100% + 0.3rem);}

	.headerWrap .float-right {display: none;}
	.molegSNS{ display: none;}
	#header.fullMenuOpen .gnb {padding: 0;}
	#header.fullMenuOpen .float-right{display: inline-block;}
	#header.fullMenuOpen  #site{ display: inline-block; padding-right: 50px; }
	#header.fullMenuOpen  .top > .topSearch{ display: none;}
	#site a{ color: #fff; border: 1px solid #fff; border-radius: 50px; padding: 0 15px; }
	
	#language:before,
	#language:after,
	#site a:after{ display: none;}
	.gnb {position: static; margin: 0; padding: 0; height: auto;}
	.gnb:before {display: none;}
	.Allmn-close {top: 1.5rem; right: 1rem; padding-left: 2rem; width: 2rem; height: 2rem; line-height: 2rem; background: transparent;}
	.Allmn-close:after {height: 2rem;}
	#head_menu,
	#head_menu .submenu {display: none;}

	/*#header.fullMenuOpen {position: fixed; width: 100%; height: 100%;}*/
	#header.fullMenuOpen .gnb {height: 10000%;}
	#header.fullMenuOpen .headerWrap .top {background: #353541;}
	#header.fullMenuOpen .headerWrap .top h1 a.logo {background-image: url(/_kor/img/layout/logo-MD.png);}
	#header.fullMenuOpen .headerWrap .top .brand_logo {display: none;}

	#header.fullMenuOpen .top > .topSearch input[type="text"] {color: transparent; background: transparent;}
	#header.fullMenuOpen .top > .topSearch button:after {color: #fff;}
	#header.fullMenuOpen .topSearch .searchOpen i {color: #fff;}
	/*#header.fullMenuOpen .gnb {top: 5rem; left: 0; padding: 0; min-height: 70rem; background: #fff; transform: none; -webkit-transform: none;}*/
	#header.fullMenuOpen .Allmn-close {top: -3.5rem; color: #fff;}
	#header.fullMenuOpen #head_menu {position: relative; display: block; height: 100%; background-color: rgba(0,0,0, .7);  overflow-y: scroll;}
	#header.fullMenuOpen #head_menu > li {clear: both; float: none; width: 100%; background: #fff;  border-bottom: 1px solid #fff;}
	#header.fullMenuOpen #head_menu > li + li {margin-left: 0;}
	#header.fullMenuOpen #head_menu > li:last-child {margin-top: 0; margin-left: 0;}
	#header.fullMenuOpen #head_menu .submenu {display: none;}
	#header.fullMenuOpen #head_menu .submenu > ul > li > a {padding: 0.5rem 1rem;}
	#header.fullMenuOpen #head_menu .submenu > ul div ul {margin-bottom: 0.5rem; padding: 0 1rem;}
	
	#header.fullMenuOpen #head_menu > li > a {color: #333; background: #edeff2; font-weight:700;}
	#header.fullMenuOpen #head_menu > li > a.on {background-color: #4560c2;}
	#header.fullMenuOpen #site {padding-right: 40px; font-size: 0.75rem;}
	#header.fullMenuOpen #site a {padding: 0 15px; min-width: 4rem; text-align: center;}
	#header.fullMenuOpen #site #language {margin-left: 0.5rem;}
	
	#contents {padding: 3rem 1rem;}

	#footer {text-align: center;}
	#protectionLink,
	#relateSiteWrap {text-align: left;}
	#footer .mark {display: none;}

	#searchLayer .container {height: 5.5rem; padding: 0.5rem 4rem 0.5rem 0.5rem;}
	#searchLayer .searchClose {top: 50%; transform: translateY(-50%);}
	#searchLayer .tabSearch {max-width: 100%;}
	#moleg-telInfo .innerWrap {width: 95%;}
	.icon-tel {text-align: left;}
}
@media screen and (max-width: 800px){
	/* 
	#searchLayer .container {padding-top: 3rem;}
	#searchLayer .tabSearch {margin: 0 2%; width: 96%;}
	#searchLayer .searchClose {top: 0.5rem;} 
	*/	
	#moleg-telInfo .innerWrap {height: 60%;}	
	.popupLayout .innerWrap .popupH1 {text-align: left;}
	.popupBox {margin: 2rem 1rem; height: 81%; overflow: auto;}
}
@media screen and (max-width: 680px){
	.icon-tel li {float: none; width: 100%;}
}
@media screen and (max-width: 580px){
	.box-tel > li {width: 50%;}
	.box-tel > li .field {padding: 0.7rem 0;}
}
@media screen and (max-width: 535px){
	.main-tel li:first-child::after {display: none;}
}
@media screen and (max-width: 375px){
	/*#header.fullMenuOpen .headerWrap .top h1 a {width: 7rem;}*/
	#header.fullMenuOpen .Allmn-close {right: 0.8rem;}
	#header.fullMenuOpen #site {padding-right: 33px;}
	#header.fullMenuOpen #site a {padding: 0 0.4rem; min-width: 0; border-color: rgba(255,255,255, .2); border-radius: 0;}

	.brand_logo {width: 4rem; margin-left: 0;}
	.headerWrap .top h1 .logo {position: relative; top: 0.5rem; width: 5.8rem; height: 2rem;}

	#searchLayer .container {padding-right: 2.8rem;}
	#searchLayer .searchClose {right: 0.75rem; width: 1.5rem; height: 1.5rem;}
	#searchLayer .searchClose .xi-close-thin {font-size: 1.5rem;}
	#searchLayer .tab a {font-size: 0.6rem;}
	.icon-tel li {padding-left: 0;}
	.icon-tel li::before {display: none;}
	.box-tel > li {width: 100%;} 
}