/* 커스텀 2023.11.01 추가 */
html {
  font-size: 16px !important;
}
html.xsm {
  font-size: 14px !important;
}
html.md {
  font-size: 18px !important;
}
html.lg {
  font-size: 20px !important;
}
html.xlg {
  font-size: 22px !important;
}

.lang-color {
  color: #ff5e04;
  font-weight: 700;
}

.m-lang-btn {
  transition: 0.1s;
  font-weight: 700;
}

.m-lang-btn:hover {
  color: #ff5e04;
  /* font-weight: 700; */
}

.main-logo-wrap {
  height: 86px;
  float: left;
  display: flex;
  align-items: center;
}

.main-logo-wrap a {
  display: flex;
  align-items: center;
}

.main-logo-wrap a img {
  width: 90%;
}

.header-search-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
}

.header-search-wrap label {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 라이브러리 */
.con {
  max-width: 1300px;
  margin: 0 auto;
}
.row::after {
  content: '';
  display: block;
  clear: both;
}
.cell {
  float: left;
  box-sizing: border-box;
}
.cell-right {
  float: right;
}
.line-height-0 {
  line-height: 0;
}
.line-height-0 > * {
  line-height: normal;
}
.visible-on {
  display: block;
}
.visible-off {
  display: none;
}
.img-box {
  overflow: hidden;
}
.img-box > img {
  width: 100%;
  display: block;
}
.relative {
  position: relative;
}
.block {
  display: block;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

html.m-menu-scroll,
html.m-menu-scroll > body {
  overflow: hidden;
}

/* 커스텀 */
.header {
  position: relative;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .15);
  z-index: 100;
}
.header > .header-inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0 20px;
  background-color: #FFF;
  box-sizing: border-box;
}
.header > .header-inner.fl-end {
  height: 40px;
  z-index: 2;
}
.header > .header-inner.fl-end > .head-etc {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.header > .header-inner.fl-bt {
  padding-top: 4px;
  padding-bottom: 16px;
  z-index: 1;
}
.header > .header-inner.fl-bt > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.header > .header-inner.gnb {
  max-width: 100%;
  padding: 0;
  z-index: 0;
}

/* 상단 메뉴바 24.10.07 수정 */
.header > .header-inner.gnb > .top-menu-bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 0 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.header > .header-inner.gnb > .top-menu-bar:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
  z-index: 10;
}
.header > .header-inner.gnb > .top-menu-bar:after {  
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
  z-index: 10;
} 
.header.nav-up > .header-inner.gnb > .top-menu-bar {
  position: fixed;
  top: 0;
  left: 0;
}
.header > .header-inner.gnb > .top-menu-bar > ul {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 1;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > a {
  display: flex;  
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  position: relative;
  height: 64px;
  margin: 0 16px;
  font-size: 1.2rem;
  color: #555;
  font-weight: 700;
  position: relative;
  z-index: 2;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > a:before {
  content: '';
  display: block;
  background-color: #FFF4F0;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 64px;
  transform: translateX(-50%);
  transition: all .3s;
  z-index: 0;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active > a {
  color: #1D1D1D;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active > a:before {
  width: calc(100% + 32px);
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > a:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../../../img/svg/icon-hd-gnb-arr.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  transform: rotate(0deg);
  transition: all 0.3s;
  z-index: 1;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active > a:after {  
  transform: rotate(180deg);
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > a.sub-menu-4:after {
  display: none;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > a > span {
  position: relative;
  z-index: 1;
}

/* 2차 메뉴 배경 */
.header > .header-inner.gnb > .top-menu-bar > .sub-menu-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.header > .header-inner.gnb > .top-menu-bar > .sub-menu-bg.active {
  opacity: 1;
  visibility: visible;
}

/* 2차 메뉴 */
.header > .header-inner.gnb > .top-menu-bar > ul > li > .sub-menu-info {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 0;
  padding: 0 20px;
  padding-top: 88px;
  background-color: #fff;
  visibility: hidden;
  box-sizing: border-box;
  transform: translateX(-50%);
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active > .sub-menu-info {
  height: 264px;
  visibility: visible;
  z-index: 1;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > .sub-menu-info > h2 {
  display: none;
  max-width: 1280px;
  margin: 0 auto;
  height: 56px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1D1D1D;
  border-bottom: 1px solid #D8D8D8;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li > .sub-menu-info > ul {
  display: flex;   
  flex-flow: row wrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  min-height: 102px;
  margin: 0 auto;
}
.header > .header-inner.gnb > .top-menu-bar > ul .sub-menu-info ul > li {
  display: inline-flex; 
  flex-flow: row nowrap;
  align-items: center;
  gap: 4px;
  min-width: 220px;
}
.header > .header-inner.gnb > .top-menu-bar > ul .sub-menu-info ul > li:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background-color: #2D2D2D;
  border-radius: 50%;
}
.header > .header-inner.gnb > .top-menu-bar > ul .sub-menu-info ul > li > a {
  display: inline-block;
  position: relative;
  font-size: 1.062rem;
  padding: 7px 0;
  visibility: hidden;
  color: #1D1D1D;
  transform: translatex(-10px);
  opacity: 0;
}

/* 2차 메뉴 나오는 딜레이 */
.header > .header-inner.gnb > .top-menu-bar > ul > li.active .sub-menu-info ul > li > a {
  visibility: visible;
  opacity: 1;
  transform: translatex(0);
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active ul > li > a.delay-1 {
  transition: visibility 0.5s, opacity 0.5s, transform 0.5s;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active ul > li > a.delay-2 {
  transition: visibility 0.5s 0.1s, opacity 0.5s 0.1s, transform 0.5s 0.1s;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active ul > li > a.delay-3 {
  transition: visibility 0.5s 0.2s, opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active ul > li > a.delay-4 {
  transition: visibility 0.5s 0.3s, opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
.header > .header-inner.gnb > .top-menu-bar > ul > li.active ul > li > a.delay-5 {
  transition: visibility 0.5s 0.4s, opacity 0.5s 0.4s, transform 0.5s 0.4s;
}

/* 서브메뉴 hover 컬러 */
.header > .header-inner.gnb > .top-menu-bar > ul .sub-menu-info ul > li > a:hover {
  text-decoration: underline;
  text-underline-position : under;
}

/* 3차 메뉴 */
.header > .header-inner.gnb > .top-menu-bar > ul ul ul > li {
  margin-right: 80px;
}

/* 검색 메뉴 */
.header > .header-inner > .search {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translatey(-50%);
}

.header > .header-inner > .search > a > span {
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: -2px;
}
.header > .header-inner > .search > a > img {
  width: 15px;
  padding-left: 5px;
}

/* 검색 클릭 시 상세 */
.search-on {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  background-color: #FFF;
  z-index: 200;
  visibility: hidden;
  transition: visibility 0.3s;
}
.search-on.active {
  visibility: visible;
}
.search-on::after {
  content: '';
  display: block;
  background-color: #FFF;
  width: 100%;
  height: 86px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  transition: height 0.3s;
}
.search-on.active::after {
  height: 280px;
}
.search-on > .search-inner {
  max-width: 1220px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.search-on > .search-inner > .logo {
  position: absolute;
  top: 5%;
  left: 30px;
  width: 128px;
}

/* 서치 박스 */
.search-on > .search-inner > .search-box {
  position: relative;
  display: inline-block;
  line-height: 86px;
}
.search-on > .search-inner > .search-box > input {
  width: 460px;
  height: 50px;
  padding: 0 10px;
  border: none;
}
.search-on > .search-inner > .search-box > input::-webkit-input-placeholder {
  font-size: 16px;
}

/* 검색 아이콘 */
.search-on > .search-inner > .search-box > a > img {
  width: 20px;
  padding-left: 5px;
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translatey(-50%);
}

.search-on > .search-inner > .close-btn {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translatey(-50%);
  cursor: pointer;
}

/* 추천 검색 리스트 */
.search-on > .search-inner > .recommend-word {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translatex(-50%);
  text-align: left;
  width: 450px;
}

.search-on > .search-inner > .recommend-word > p > a {
  font-size: 14px;
  font-weight: bold;
  line-height: 50px;
  transform: translatex(-10px);
  opacity: 0;
  visibility: hidden;
}

.search-on > .search-inner > .recommend-word > ul > li > a {
  line-height: 34px;
  transform: translatex(-10px);
  opacity: 0;
  visibility: hidden;
}

.search-on.active > .search-inner > .recommend-word > p > a {
  transform: translatex(0);
  opacity: 1;
  visibility: visible;
  transition: visibility 0.5s, opacity 0.5s, transform 0.5s;
}

.search-on.active > .search-inner > .recommend-word > ul > li > a {
  transform: translatex(0);
  opacity: 1;
  visibility: visible;
}

.search-on.active > .search-inner > .recommend-word > ul > li > a.delay-1 {
  transition: visibility 0.5s 0.1s, opacity 0.5s 0.1s, transform 0.5s 0.1s;
}

.search-on.active > .search-inner > .recommend-word > ul > li > a.delay-2 {
  transition: visibility 0.5s 0.2s, opacity 0.5s 0.2s, transform 0.5s 0.2s;
}

.search-on.active > .search-inner > .recommend-word > ul > li > a.delay-3 {
  transition: visibility 0.5s 0.3s, opacity 0.5s 0.3s, transform 0.5s 0.3s;
}

/* 모바일 헤더 */
.m-header {
  display: none;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #FFF;
  text-align: center;
  z-index: 500;
  box-shadow: 0px 3px 3px 0px #00000040;
}

.m-header > .logo {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  height: 100%;
}

.m-header > .search {
  width: 25px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translatey(-50%);
}

/* 모바일 메뉴 버튼 */
.m-header > .m-menu-btn {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translatey(-50%);
  width: 46px;
  height: 46px;
  cursor: pointer;
}

.m-header > .m-menu-btn > div {
  width: 50%;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translatex(-50%);
  transition: top 0.2s, transform 0.2s, opacity 0.2s;
}

.m-header > .m-menu-btn > div:nth-child(2) {
  top: 23px;
}

.m-header > .m-menu-btn > div:nth-child(3) {
  top: 30px;
}

/* 버튼 클릭 시 애니메이션 */
.m-header > .m-menu-btn.active div:nth-child(1) {
  top: 50%;
  transform: translatex(-50%) translatey(-50%) rotate(45deg);
}

.m-header > .m-menu-btn.active div:nth-child(3) {
  top: 50%;
  transform: translatex(-50%) translatey(-50%) rotate(-45deg);
}

.m-header > .m-menu-btn.active div:nth-child(2) {
  opacity: 0;
}

/* 모바일 배경 마스크 */
.m-header > .mobile-mask {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #FFF;
  z-index: -5;
  transition: height 0.3s;
}

/* 모바일 메뉴 리스트 */
.m-header > .m-menu-list {
  overflow-y: auto;
  /* 2023.11.02 추가, display: none 같은 효과인데 영역을 차지하는 속성 */
  visibility: hidden;
}

.m-header > .m-menu-list > ul > li {
  border-bottom: 1px solid #ccc;
  visibility: hidden;
  transform: translatey(-20px);
  opacity: 0;
  position: relative;
}

.m-header > .m-menu-list.active > ul > li {
  visibility: visible;
  transform: translatey(0);
  opacity: 1;
}

.m-header > .m-menu-list.active > ul > li.delay-1 {
  transition: visibility 0.5s, opacity 0.5s, transform 0.5s;
}

.m-header > .m-menu-list.active > ul > li.delay-2 {
  transition: visibility 0.5s 0.1s, opacity 0.5s 0.1s, transform 0.5s 0.1s;
}

.m-header > .m-menu-list.active > ul > li.delay-3 {
  transition: visibility 0.5s 0.2s, opacity 0.5s 0.2s, transform 0.5s 0.2s;
}

.m-header > .m-menu-list.active > ul > li.delay-4 {
  transition: visibility 0.5s 0.3s, opacity 0.5s 0.3s, transform 0.5s 0.3s;
}

.m-header > .m-menu-list.active > ul > li.delay-5 {
  transition: visibility 0.5s 0.4s, opacity 0.5s 0.4s, transform 0.5s 0.4s;
}

.m-header > .m-menu-list > ul > li > a {
  display: block;
  padding: 30px 24px;
  text-align: left;
  font-size: 17px;
}

.m-header > .m-menu-list > ul > li > a > span {
  transition: transform 0.3s;
}

.m-header > .m-menu-list > ul > li.active > a > span {
  transform: rotate(180deg);
}

/* 2차 메뉴 관련 */

.m-header > .m-menu-list > ul > li > ul {
  padding: 20px 48px;
  background-color: #f9f9f9;
  display: none;
}

.m-header > .m-menu-list > ul > li > ul > li > a {
  display: block;
  text-align: left;
  padding: 10px 0;
  font-size: 15px;
}

/* 3차 메뉴 */
.m-header > .m-menu-list > ul > li > ul ul {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
}

.m-header > .m-menu-list > ul > li > ul ul > li > a {
  display: block;
  text-align: left;
  font-size: 15px;
  font-weight: 300;
  padding: 10px 0;
}

/* 모바일 서치 온 */
.m-header > .m-search-on {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
}

.m-header > .m-search-on.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 1s;
}

.m-header > .m-search-on > .m-search-box {
  position: relative;
  border-bottom: 1px solid #0c0c0c;
}

.m-header > .m-search-on > .m-search-box > input {
  width: 320px;
  height: 46px;
  border: none;
  padding: 0 10px 0 45px;
}

.m-header > .m-search-on > .m-search-box > .img-box {
  width: 24px;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translatey(-50%);
}

.m-header > .m-search-on > .m-recommend-word {
  padding: 20px 0 0 44px;
  text-align: left;
}

.m-header > .m-search-on > .m-recommend-word > p {
  font-size: 14px;
  padding-bottom: 5px;
}

.m-header > .m-search-on > .m-recommend-word > ul > li > a {
  padding: 10px 0;
}

/* 본문 바로가기 링크 2024.10.04 추가 */
#u_skip {
  position: relative;
  z-index: 1000;
}
#u_skip > a {
  position: absolute;
  top: -30px;
  left: 0;
  min-width: 138px;
  border: 1px solid #666;
  background: #333;
  text-align: center;
  opacity: 0;
}
#u_skip > a > span {
  display: inline-block;
  padding: 2px 6px 0 0;
  font-size: .78em;
  color: #FFF;
  letter-spacing: -1px;
  white-space: nowrap;
}
#u_skip > a:focus,
#u_skip > a:active {
    top: 0;
    opacity: 1;
}

/* header 추가 작업 24.10.07 */
#header-top {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 32px;
  background-color: #EDF1F5;
  z-index: 101;
}
.toggle-top {
  width: 100%;
  height: 100%;  
  background-color: #EDF1F5;
}
.toggle-top > .inner {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 16px;
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.toggle-top > .inner > p {
  display: inline-flex;  
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
}
.toggle-top > .inner > p:before {
  content: "";
  display: block;
  width: 24px;
  height: 16px;
  background-image: url(../../../img/svg/taegeukgi.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.toggle-top > .inner > span {  
  display: inline-flex;  
  flex-flow: row nowrap;
  align-items: center;
  gap: 2px;
  color: #003675;
}
.toggle-top > .inner > span:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(../../../img/svg/icon-ht-arrow.svg);
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: center;
}
.etc-ul {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
}
.etc-ul > li {
  position: relative;
  padding: 0 12px;
  font-size: .94rem;
  box-sizing: border-box;
}
.etc-ul > li:first-child {
  padding-left: 0;
}
.etc-ul > li:last-child {
  padding-right: 0;
}
.etc-ul > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 1rem;
  background-color: #D8D8D8;
  transform: translateY(-50%);
}
.etc-ul > li:last-child:before {
  display: none;
}
.etc-ul > li a,
.etc-ul > li button {
  display: block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.krds-drop-wrap {
  display: inline-flex;
  position: relative;
}
.krds-drop-wrap .drop-btn {
  cursor: pointer;
}
.krds-drop-wrap .drop-btn > span {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 2px;
}
.krds-drop-wrap .drop-btn > span:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(../../../img/svg/icon-ht-arrow.svg);
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: center;
  transform: rotate(0deg);
  transition: all .3s;
}
.krds-drop-wrap .drop-btn.active > span:after {
  transform: rotate(180deg);
}
.krds-drop-wrap .btn-reset {
  cursor: pointer;
}
.krds-drop-wrap .btn-reset > span {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 2px;
}
.krds-drop-wrap .btn-reset > span:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url(../../../img/svg/icon-ht-refresh.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  transform: rotate(0deg);
  transition: all .3s;
}
.krds-drop-wrap .drop-btn.active > span:after {
  transform: rotate(180deg);
}
.krds-drop-wrap .drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 6;
  min-width: 13rem;
  padding: 8px;
  margin-top: 16px;
  border-radius: 8px;
  border: 0.1rem solid #D8D8D8;
  background-color: #FFF;
  box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
}
.krds-drop-wrap .drop-menu.active {
  display: block;
}
.krds-drop-wrap .drop-menu:before {
  display: inline-flex;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1rem;
  height: .8rem;
  background-image: url(../../../img/svg/icon-ht-drop-arr.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  transform: translateX(-50%);
}
.krds-drop-wrap .drop-menu .drop-in {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;
}
.krds-drop-wrap .drop-menu .drop-top-info {
  width: 100%;
  padding: 16px;
  border-bottom: 1px solid #D8D8D8;
}
.krds-drop-wrap .drop-menu .drop-btm-btn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  padding: 16px;
  border-top: 1px solid #D8D8D8;
  box-sizing: border-box;
}
.krds-drop-wrap .drop-menu .drop-btm-btn .btn {
  flex: 1;
}
.krds-drop-wrap .drop-menu .drop-list {
  display: flex;
  flex-flow: column nowrap;
  gap: 2px;
  width: 100%;
}
.krds-drop-wrap .drop-menu .drop-list .item-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 4px;
  min-height: 38px;
  font-size: 1rem;
  padding: 0 8px;
  border-radius: 8px;
}
.krds-drop-wrap .drop-menu .drop-list .item-link:hover {
  background-color: #EDF1F5;
}
.krds-drop-wrap .drop-menu .drop-list .item-link:active {
  background-color: #FFF4F0;
}
.krds-drop-wrap.zoom-drop .drop-menu {
  width: 12rem;
}
.krds-drop-wrap.zoom-drop .item-link:before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-shrink: 0;
  content: "가";
  font-size: 1rem;
  line-height: 1;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #D8D8D8;
  background-color: #FFF;
  box-sizing: border-box;
}
.krds-drop-wrap.zoom-drop .item-link.active {
  font-weight: 700;
  color: #003675;
  background-color: #EDF1F5;
}
.krds-drop-wrap.zoom-drop .item-link.active:before {
  color: #FFF;
  background-color: #003675;
}
.krds-drop-wrap.zoom-drop .item-link.xsm:before {
  font-size: .6rem;
  width: 1.2rem;
  height: 1.2rem;
}
.krds-drop-wrap.zoom-drop .item-link.sm:before {
  font-size: 1rem;
  width: 1.4rem;
  height: 1.4rem;
}
.krds-drop-wrap.zoom-drop .item-link.md:before {
  font-size: 1.2rem;
  width: 1.6rem;
  height: 1.6rem;
}
.krds-drop-wrap.zoom-drop .item-link.lg:before {
  font-size: 1.4rem;
  width: 1.8rem;
  height: 1.8rem;
}
.krds-drop-wrap.zoom-drop .item-link.xlg:before {
  font-size: 1.6rem;
  width: 2rem;
  height: 2rem;
}
.dv-total-serach {
  display: inline-flex;  
  flex-flow: row nowrap;
  align-items: center;
}
.dv-total-search-fieldset {
  display: none;
  flex-flow: row nowrap;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background-color: #FFF;
  border: 1px solid #9D9D9D;
  border-radius: 28px;
}
.dv-total-search-fieldset form {  
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 4px;
}
.dv-total-search-fieldset form input {
  width: calc(100% - 38px);
  max-width: 180px;
  height: 36px;
  padding: 0 16px;
  font-size: 1rem;
  border: 1px solid #ABABAB;
  border-radius: 18px;
}
.dv-total-search-fieldset .btn-total-search,
.dv-total-search-fieldset .btn-total-close {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  line-height: 1;
  font-size: 0;
  background-color: transparent;
  border: 1px solid #ABABAB;
  border-radius: 18px;
  cursor: pointer;
}
.dv-total-search-fieldset .btn-total-search > img {
  display: block;
  width: 18px;
}
.dv-total-search-fieldset .btn-total-close {
  position: relative;
  background-color: #ABABAB;
}
.dv-total-search-fieldset .btn-total-close:before,
.dv-total-search-fieldset .btn-total-close:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background-color: #FFF;
}
.dv-total-search-fieldset .btn-total-close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.dv-total-search-fieldset .btn-total-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dv-total-serach .a-total-search {
  padding: 14px 12px;
}
.dv-total-serach .a-total-search > span {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.dv-total-serach .a-total-search > span:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../../../img/svg/icon-ht-search.svg);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: center;
}
.dv-total-serach.active .dv-total-search-fieldset {
  display: inline-flex;
}
.dv-total-serach.active .a-total-search {
  display: none;
} 

/* 상단 헤더 반응형 */
@media screen and (max-width: 1500px) {
  .krds-drop-wrap .drop-menu {
    left: auto;
    right: 0;
    transform: none;
  }
  .krds-drop-wrap .drop-menu:before {
    left: auto;
    right: 20px;
    transform: none;
  }
}

@media screen and (max-width: 1025px) {
  header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
  }  
  html.m-menu-scroll header {
    position: fixed;
  }
  .header {
    display: none;
  }
  .m-header {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  html {
      font-size: 14px !important;
  }
  html.xsm {
    font-size: 12px !important;
  }
  html.md {
      font-size: 16px !important;
  }
  html.lg {
      font-size: 18px !important;
  }
  html.xlg {
      font-size: 20px !important;
  }
  .toggle-top > .inner {
    gap: 4px;
    padding: 5px 20px;
  }
}
@media screen and (max-width: 580px) {
  .toggle-top > .inner {    
    flex-flow: column wrap;
    align-items: flex-start;
  }
  .m-header > .mobile-mask {
    top: 62px;
  }
}