@charset "UTF-8";
@import url("/resources/css/common/cmp.css");
@import url('./font.css');
/*-------------------------------------------------
title       : 레이아웃
Author      : PLAN I
Create date : 2024-10-25
-------------------------------------------------*/
:root {
  --width1: var(--krds-contents-wrap-size);
  --width2: 100%;
  --time2: var(--krds-transition-base);
  --bdc: var(--krds-color-light-gray-20);
  --ff: var(--krds-typo-font-type);
  --fs: var(--krds-pc-font-size-body-medium);
  --cl: var(--krds-light-color-text-basic);
  --lh: var(--krds-line-height-base);
}

#krds-masthead {
  display: none;
}

#wrap[class*=scroll] #krds-header:not(.sample) .header-in {
  border-bottom: 0 none;
}
#wrap .topbanner .open {
  display: none;
}

#krds-header .header-branding {
  min-width: 100%;
}
#krds-header .header-branding .search, #krds-header .header-utility .utility-list > li:nth-child(n+2) {
  display: none;
}
#krds-header .header-container .inner {
  padding: 0;
  gap: 0;
}
#krds-header .header-container .header-actions {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  right: 3rem;
  gap: 3rem;
  z-index: 1;
}
#krds-header .header-container .logo {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  left: 3rem;
  z-index: 1;
}
#krds-header .header-container .logo a {
  background: url("../../../resources/images/common/layout/logo.png") no-repeat center center;
  background-size: 100% auto;
}
#krds-header .header-container .btn-navi {
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: inherit;
  line-height: 2.5rem;
}
#krds-header .header-container .btn-navi.join {
  display: none;
}
#krds-header .header-container .btn-navi.all {
  display: inline-block;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
  vertical-align: middle;
  display: block;
  line-height: 3.5rem;
}
#krds-header .header-container .btn-navi:nth-last-child(n+3) {
  display: block;
  overflow: hidden;
  position: relative;
  padding-right: 0.5rem;
  white-space: nowrap;
}
#krds-header .header-container .btn-navi:nth-last-child(n+3)::before {
  display: inline-block;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
  vertical-align: middle;
}
#krds-header .header-container .btn-navi:nth-last-child(n+3)::after {
  position: absolute;
  left: 2.5rem;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0.25rem 0 0 0.5rem;
  background-color: #fff;
  text-align: left;
  content: "Search";
  -webkit-transition: var(--time2);
  transition: var(--time2);
}
#krds-header .header-container .btn-navi:nth-last-child(n+3).login::after {
  content: "Login";
}
#krds-header .header-container .btn-navi:nth-last-child(n+3):hover::after {
  background-color: var(--krds-header--navi-color-hover);
}
#krds-header .header-container .btn-navi:nth-last-child(n+3):focus::after {
  background-color: var(--krds-header--navi-color-pressed);
  -webkit-transition: outline, -webkit-box-shadow !important;
  transition: outline, -webkit-box-shadow !important;
  transition: outline, box-shadow !important;
  transition: outline, box-shadow, -webkit-box-shadow !important;
}
#krds-header .header-utility .krds-language {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  right: 29rem;
  z-index: 1;
}
#krds-header .header-utility .krds-language .ico-global {
  margin-left: 0;
}
#krds-header .header-utility .krds-language .krds-btn.text.small {
  height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 2.5rem;
}

.krds-main-menu {
  --krds-main-menu--main-trigger-size-height: 11rem;
  --krds-main-menu--main-trigger-color-border-selected: #00A0DD;
  --krds-main-menu--sub-menu-trigger-color-radius: 0.8rem;
  padding: 0 55rem 0 20rem;
  border-top: 0 none;
}
.krds-main-menu .inner {
  padding: 0;
}
.krds-main-menu .gnb-menu {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.krds-main-menu .gnb-menu .gnb-main-trigger.active, .krds-main-menu .gnb-menu .gnb-main-trigger:hover, .krds-main-menu .gnb-menu .gnb-main-trigger:focus {
  background: none;
  color: var(--krds-main-menu--main-trigger-color-border-selected);
}
.krds-main-menu .gnb-menu .gnb-main-trigger::after {
  display: none;
}
.krds-main-menu .gnb-toggle-wrap {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  min-width: 100%;
}
.krds-main-menu .gnb-toggle-wrap.is-open {
  visibility: visible;
  overflow: visible;
  width: auto;
  height: auto;
  opacity: 1;
  -webkit-transition: var(--time2);
  transition: var(--time2);
  padding: 5.5rem 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 {
  grid-template-columns: repeat(4, 1fr);
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li + li, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li + li {
  padding-left: 3rem;
  border-left: 1px solid #DEDEDE;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li:nth-child(4n+1), .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li:nth-child(4n+1) {
  padding-left: 0;
  border-left: 0 none;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li:nth-child(n+5), .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li:nth-child(n+5) {
  padding-top: 3rem;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 5.3rem;
  padding: 0 2rem;
  border-radius: var(--krds-main-menu--sub-menu-trigger-color-radius);
  border: 1px solid #dedede;
  font-weight: 600;
  color: #000;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a::before, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a::before {
  display: none;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a::after, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a::after {
  margin-left: auto;
  background-color: #000;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a:hover, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a:hover, .krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a:focus, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a:focus {
  border-color: #00A0DD;
  background-color: #00A0DD;
  color: #fff;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a:hover::after, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a:hover::after, .krds-main-menu .gnb-toggle-wrap .gnb-sub-list.single-list.between .gnb-sub-content > ul > li > a:focus::after, .krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a:focus::after {
  background-color: #fff;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list {
  width: 70%;
  max-width: 118rem;
  margin-left: 0;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true]::before {
  display: none;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 {
  display: grid;
  grid-column-gap: var(--krds-gap-7);
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 .gnb-sub-list {
  display: block;
  position: static;
  padding: 2rem;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 > li > a[aria-haspopup=true]::after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 .depth3 {
  display: block;
}
.krds-main-menu .gnb-toggle-wrap .gnb-main-list[data-has-submenu=true] .depth2 .depth3 a {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content .sub-title {
  display: none;
}
.krds-main-menu .desc {
  display: block;
  width: 39rem;
  max-width: 30%;
  margin-left: auto;
}
.krds-main-menu .desc strong {
  display: block;
  margin-bottom: 1rem;
  font-size: 3.3rem;
  color: #000;
}

/* /mum/old/layout_old.css */

body {position:relative;overflow:hidden;min-width:1200px;min-height:700px}
#wrap {overflow:hidden}
.container {width:100% !important}
#header {position:relative;top:0;left:0;width:100%; z-index:100; height:70px; background:#fff; border-bottom:1px solid #ebebeb}
#header > div {/*position:absolute; top:0; left:50%; transform:translateX(-50%); */width:100%; padding:0 90px}
#header > div::after {display:block; clear:both; content:''}
#header .logo {float:left}
#header .logo a {display:block; height:70px; padding:12px 0;position:relative;width:187px}
#gnb {position:relative;position:absolute; left:50%; transform:translateX(-50%); -webkit-transform: translateX(-50%);text-align:center}
#gnb::after {position:absolute; top:70px; left:50%; transform:translateX(-50%); -webkit-transform: translateX(-50%); width:100vw; height:0; background-color:#000;content:''; z-index:-1; transition:height .4s}
#gnb ul:after {display:block;clear:both;content:''}
#gnb li {float:left}
#gnb .depth1 {text-align:center;display:inline-block}
#gnb .depth1 > li {display:inline-block;margin-left:66px}
#gnb .depth1 > li:first-child {margin-left:0}
#gnb .depth1 > li > a {position:relative;display:block; line-height:70px; font-size:1.8rem; color:#2f2f2f; font-weight:600}
#gnb .depth1 > li > a:before {position:absolute;left:0;bottom:0;width:100%;height:3px;background:#db0000;content:'';transform:scaleX(0);transition:all .4s}
#gnb .depth1 > li.active > a:before{transform:scaleX(1);}
#gnb .depth1 > li.active .depth2 { opacity:1; height:auto; transition-delay:.4s}
#gnb .depth1 > li.active .depth2 > li > a {display:block;}
#gnb .gnb-toggle-wrap .desc {display: none;}
#gnb .depth2 {position:absolute;width:100%;padding:0; opacity:0; height:0; transition:all .3s;}
#gnb .depth2 > li {display:inline-block;margin-left:65px;width:120px}
#gnb .depth2 > li:first-child {margin-left:0}
#gnb .depth2 > li > a {display:none; color:#fff;font-weight:200;padding:17px 0;transition:color .4s}
#gnb.menu::after {height:55px;}
#gnb .depth2 > li > a:hover {color:#db0000;font-weight:500}
#util {float:right;}
#util::after {display:block; clear:both; content:''}
#util > * {float:left;margin-left:10px;}
#util > div {overflow:hidden;}
#util > div > a {float:left; display:block;line-height:70px;vertical-align:middle}
#util a.link {margin-right:14px}
#util a.link:hover {text-decoration:underline}
#util .sns {margin:17px 0 17px 10px; width:36px; height:36px; line-height:36px; border-radius:50%; text-align:center; border:1px solid #47515d}
#util .sns-f {background:#fff;border-color:#dedfdf; color:#336bb1; font-size:2rem;}
#util .sns-y {background:#fff;border-color:#dedfdf; color:#E52C26; font-size:2rem;}
#util a:hover {color:#2c518f; transition:all .4s}
#util .sns:hover {color:#fff}
#util .sns-f:hover {background:#2c518f; border-color: #2c518f;}
#util .sns-y:hover {background:#E52C26; border-color: #E52C26;}

/* footer */
#footer {position:relative; background:#000; padding:40px 0;text-align:center;z-index:10;display:none}
#footer address, #footer .copyright {font-size:1.4rem; font-weight:200; color:#c4cad0}
#footer .copyright {margin-top:8px}

@media(max-height:680px){
	body {overflow-y:scroll}	
}