.color-dkred {
  color: #b83c3c;
}

.color-red {
  color: #d1410f;
}

.color-blue {
  color: #00aaf1;
}

@font-face {
  font-family: "GmarketSans";
  src: url("../../font/GmarketSansLight.otf") format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "GmarketSans";
  src: url("../../font/GmarketSansMedium.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "GmarketSans";
  src: url("../../font/GmarketSansBold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "PretendardR";
  src: url("../../font/Pretendard-Regular.woff") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "PretendardM";
  src: url("../../font/Pretendard-Medium.woff") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "PretendardSB";
  src: url("../../font/Pretendard-SemiBold.woff") format("woff2");
  font-weight: 600;
}
@font-face {
  font-family: "PretendardB";
  src: url("../../font/Pretendard-Bold.woff") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../font/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../font/Montserrat-Bold.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../font/Montserrat-ExtraBold.woff") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "SCDream";
  src: url("../../font/SCDream4.woff") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "SCDream";
  src: url("../../font/SCDream5.woff") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "SCDream";
  src: url("../../font/SCDream6.woff") format("woff2");
  font-weight: 700;
}
:root {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  cursor: default;
  line-height: 1.5;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
  --header: 83px;
  --total-height: calc(var(--util-height) + var(--header));
  --util-height: 48px;
  --whole-height: 70px;
  --whole-total-height: calc(var(--util-height) + var(--whole-height));
  --inner: 110px;
}

@media (max-width: 1680px) {
  :root {
    --inner: 50px;
  }
}
@media (max-width: 1300px) {
  body {
    overflow-x: hidden;
  }
}
@media (max-width: 1024px) {
  :root {
    --inner: 30px;
    --whole-height: 70px;
  }
}
@media (max-width: 768px) {
  :root {
    --header: 70px;
    --inner: 15px;
  }
}
body {
  min-height: 100%;
  font-weight: normal;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  word-break: keep-all;
  line-height: 1.2;
  word-wrap: break-word;
  letter-spacing: normal;
  font-size: 14px;
  color: #1a1a1a;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -o-text-size-adjust: none;
}
@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

body,
input,
select {
  border-radius: 0;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 1024px) {
  body.hide #divWholeMenu {
    display: block;
  }
}
body.hide .ad-banner {
  display: none;
}

.hide {
  overflow: hidden;
}

.no-book {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  min-height: 376px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .no-book {
    min-height: 436px;
  }
}
@media (max-width: 768px) {
  .no-book {
    min-height: 402px;
  }
}

.noData {
  display: block;
  text-align: center;
  padding: 100px 0;
}

nav a {
  transition: all 0.3s;
}
nav .depth-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #555555;
  border: 1px solid #d8d9da;
  border-radius: 5px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1024px) {
  nav .depth-title {
    justify-content: start;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}
nav .depth-title span {
  padding-top: 5px;
}
nav .depth3 a {
  position: relative;
  display: flex;
  font-size: 15px;
  padding: 6px 0;
  font-weight: 500;
}
@media (max-width: 1300px) {
  nav .depth3 a {
    font-size: 15px;
  }
}
@media (max-width: 1200px) {
  nav .depth3 a {
    font-size: 14px;
  }
}
nav .depth3 span {
  padding-left: 12px;
}
nav .depth3 span::before {
  position: absolute;
  top: 50%;
  left: -13px;
  display: block;
  transform: translateY(-50%);
  content: "";
}
nav .depth3 span::before {
  left: 0;
  width: 4px;
  height: 4px;
  background: #d3d3d3;
}

.link .title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.thumb {
  position: relative;
}
.thumb img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.control-area {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 13px;
  width: 100%;
}
.control-area .progress-box {
  position: relative;
  width: 80px;
  z-index: 11;
}
.control-area .progress-box .fraction {
  display: flex;
  justify-content: space-between;
  position: static;
  text-align: left;
  color: #1c1c1c;
  font-weight: 500;
}
.control-area .progress-box .fraction .curr {
  color: #0091d0;
}
.control-area .progress-box .fraction span {
  text-align: center;
  min-width: 20px;
}
.control-area .progress-box .autoplay-progress {
  position: absolute;
  left: 31px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 16px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.1);
}
.control-area .progress-box .autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  stroke-width: 60;
  stroke: #1c1c1c;
  fill: none;
  stroke-dashoffset: calc(100 * (1 - var(--progress)));
  stroke-dasharray: 100;
}

.uline {
  position: relative;
  transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.uline::before {
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
  content: "";
}
.uline:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.btn-wrap .slide-btn {
  display: block;
  width: 20px;
  height: 16px;
}
.btn-wrap .slide-btn.prev {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='27px' height='22px'><path fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(34, 34, 34)' d='M25.138,13.644 L6.664,13.644 L11.412,18.473 C12.159,19.233 12.159,20.465 11.412,21.224 C10.665,21.984 9.454,21.984 8.707,21.224 L0.593,12.972 C0.089,12.459 -0.046,11.736 0.131,11.083 C-0.144,10.383 -0.004,9.553 0.553,8.986 L8.667,0.734 C9.414,-0.026 10.625,-0.026 11.372,0.734 C12.119,1.493 12.119,2.725 11.372,3.484 L5.315,9.645 L25.138,9.645 C25.966,9.645 26.638,10.316 26.638,11.145 L26.638,12.145 C26.638,12.973 25.966,13.644 25.138,13.644 Z'/></svg>") no-repeat center/contain;
}
.btn-wrap .slide-btn.next {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='27px' height='22px'><path fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(34, 34, 34)' d='M26.789,11.083 C26.966,11.734 26.831,12.454 26.327,12.965 L18.213,21.185 C17.466,21.942 16.255,21.942 15.508,21.185 C14.761,20.428 14.761,19.201 15.508,18.445 L20.241,13.650 L1.782,13.650 C0.954,13.650 0.282,12.978 0.282,12.150 L0.282,11.150 C0.282,10.322 0.954,9.650 1.782,9.650 L21.604,9.650 L15.548,3.514 C14.801,2.758 14.801,1.531 15.548,0.775 C16.295,0.018 17.506,0.018 18.253,0.775 L26.367,8.995 C26.924,9.560 27.064,10.386 26.789,11.083 Z'/></svg>") no-repeat center/contain;
}
.btn-wrap .slide-btn.stop {
  width: 7px;
  height: 12px;
  background: url("../../../image/ko/local/main/ico-stop.png") no-repeat center/contain;
}
.btn-wrap .slide-btn.stop.active {
  background: url("../../../image/ko/local/main/ico-play.png") no-repeat center/contain;
}

.pagination-area {
  position: absolute;
  left: 50%;
  bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 15rem;
  transform: translateX(-50%);
  z-index: 3;
}
.pagination-area .btn-wrap {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}
.pagination-area .btn-wrap .slide-btn.stop.active {
  width: 18px;
  height: 18px;
}
.pagination-area .swiper-pagination {
  position: relative;
  bottom: 0;
  display: flex;
  gap: 12px;
  z-index: 0;
}
.pagination-area .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0;
  transition: all 0.3s;
}

.content3 .control-area, .content4 .control-area {
  position: absolute;
  top: -30px;
  right: 0;
  gap: 14px;
  padding-right: 60px;
}
@media (max-width: 1024px) {
  .content3 .control-area, .content4 .control-area {
    top: -11px;
  }
}
.content3 .control-area .slide-btn, .content4 .control-area .slide-btn {
  display: block;
}
.content3 .control-area .slide-btn.stop, .content4 .control-area .slide-btn.stop {
  width: 11px;
  height: 15px;
  background: url("../../../image/ko/local/main/ico-stop_b.png") no-repeat center/contain;
}
.content3 .control-area .slide-btn.stop.active, .content4 .control-area .slide-btn.stop.active {
  background: url("../../../image/ko/local/main/ico-play_b.png") no-repeat center/contain;
}
.content3 .control-area .more-w, .content4 .control-area .more-w {
  right: 0;
  top: -12px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #d3e2ec;
  background: #fff;
}
.content3 .control-area .more-w::after, .content4 .control-area .more-w::after {
  width: 19px;
  height: 19px;
  background: url("../../../image/ko/local/main/ico-more.png") no-repeat center/contain;
  content: "";
}

.more-w {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 15rem;
}

.group-inner .thumb {
  border-radius: 16px;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
  #color: inherit;
}

:after,
:before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a:hover {
  color: inherit;
}

#divHeader .wrapper .inner,
#divFooter .wrapper .inner {
  padding: 0 var(--inner);
  max-width: 1720px;
  width: 100%;
  margin: 0 auto;
}

#divHeader * {
  box-sizing: border-box;
}

#divFooter * {
  box-sizing: border-box;
}

#divHeader {
  position: relative;
  height: var(--total-height);
  font-family: "GmarketSans", "PretendardR", sans-serif;
}
#divHeader::after {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 8;
  content: "";
}
#divHeader.fixed .group-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#divHeader.fixed .group-header::after {
  display: block;
}
@media (max-width: 1300px) {
  #divHeader.fixed .group-header .util-wrap {
    color: #222222;
  }
}
#divHeader.on::after {
  display: block;
}
#divHeader.on .group-header::before {
  opacity: 1;
  visibility: visible;
}
#divHeader.on .group-header::after {
  height: 460px;
}
#divHeader.on #gnb .depth1 > li > a {
  padding: 0 85px;
  max-width: 228.3333333333px;
}
@media (max-width: 1680px) {
  #divHeader.on #gnb .depth1 > li > a {
    padding: 0 50px;
  }
}
@media (max-width: 1450px) {
  #divHeader.on #gnb .depth1 > li > a {
    padding: 0 35px;
  }
}
@media (max-width: 1200px) {
  #divHeader.on #gnb .depth1 > li > a {
    padding: 0 25px;
  }
}
#divHeader.on #gnb .depth2 {
  padding-top: 35px;
  height: 460px !important;
}
@media (max-width: 1680px) {
  #divHeader.on #gnb .depth2 {
    padding-top: 20px;
  }
}
@media (max-width: 1300px) {
  #divHeader.on #gnb .depth2 {
    padding-top: 25px;
  }
}
#divHeader .header {
  position: absolute;
  top: var(--util-height);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
}
#divHeader .group-header {
  position: relative;
  background: #fff;
}
#divHeader .group-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 1px;
  transition: all ease-out 0.3s;
  background-color: rgba(224, 224, 224, 0.8);
  z-index: 1;
}
#divHeader .group-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  height: 0;
  width: 100%;
  background: #fff url(../../../image/ko/local/bg-menu.png) no-repeat bottom right/441px 236px;
  transition: all ease-out 0.3s;
}
@media (min-width: 2100px) {
  #divHeader .group-header::after {
    background: #fff url(../../../image/ko/local/bg-menu.png) no-repeat bottom right 10vw/441px 236px;
  }
}
#divHeader .group-header .inner {
  height: var(--header);
}
#divHeader .inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1790px;
  padding: 0 35px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #divHeader .inner {
    padding: 0 var(--inner);
  }
}
#divHeader h1.logo {
  display: flex;
  align-items: center;
}
@media (max-width: 1450px) {
  #divHeader h1.logo img {
    width: 200px;
  }
}
@media (max-width: 1300px) {
  #divHeader h1.logo img {
    width: 180px;
  }
}
#divHeader #gnb {
  flex: 1;
  max-width: 1168px;
}
@media (max-width: 1024px) {
  #divHeader #gnb {
    display: none;
  }
}
#divHeader #gnb .depth1 {
  display: flex;
  justify-content: center;
  height: 100%;
}
#divHeader #gnb .depth1 > li {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 18px;
}
#divHeader #gnb .depth1 > li:nth-child(1) .depth2 {
  border-left: 1px solid rgba(224, 224, 224, 0.8);
}
#divHeader #gnb .depth1 > li:hover .depth2 {
  background-color: rgba(231, 244, 249, 0.7);
}
@media (max-width: 1680px) {
  #divHeader #gnb .depth1 > li {
    width: 16.6666666667%;
  }
}
@media (max-width: 1450px) {
  #divHeader #gnb .depth1 > li {
    font-size: 16px;
  }
}
#divHeader #gnb .depth1 > li > a {
  position: relative;
  justify-content: center;
  padding: 0 50px;
  color: #0c0c0c;
  width: 100%;
  transition: all ease-out 0.5s;
}
@media (max-width: 1450px) {
  #divHeader #gnb .depth1 > li > a {
    padding: 0 35px;
  }
}
@media (max-width: 1200px) {
  #divHeader #gnb .depth1 > li > a {
    padding: 0 25px;
  }
}
#divHeader #gnb .depth1 > li > a.on {
  color: #1955a6;
}
#divHeader #gnb .depth1 > li > a.on::before {
  width: 100%;
  left: 0;
}
#divHeader #gnb .depth1 > li > a.on::after {
  opacity: 1;
  visibility: visible;
}
#divHeader #gnb .depth1 > li > a::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 4px;
  bottom: 0;
  left: 50%;
  background-color: #1955a6;
  transition: all ease-out 0.5s;
  z-index: 1;
}
#divHeader #gnb .depth1 > li > a::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  width: 12px;
  height: 7px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: all ease-out 0.5s;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(25, 85, 166)' d='M6.707,6.064 C6.317,6.455 5.683,6.455 5.293,6.064 L1.165,1.936 C0.535,1.306 0.981,0.229 1.872,0.229 L10.128,0.229 C11.019,0.229 11.465,1.306 10.835,1.936 L6.707,6.064 Z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
}
#divHeader #gnb .depth1 > li > a span {
  white-space: nowrap;
}
#divHeader #gnb .depth1 > li a {
  display: flex;
  align-items: center;
}
#divHeader #gnb .depth2 {
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 0;
  text-align: center;
  overflow: hidden;
  font-size: 15px;
  transition: all ease-out 0.3s;
  z-index: 1;
  border-right: 1px solid rgba(224, 224, 224, 0.8);
}
@media (max-width: 1450px) {
  #divHeader #gnb .depth2 {
    font-size: 14px;
  }
}
@media (max-width: 1300px) {
  #divHeader #gnb .depth2 {
    gap: 7px;
  }
}
#divHeader #gnb .depth2 > li {
  padding: 0px 30px;
}
@media (max-width: 1450px) {
  #divHeader #gnb .depth2 > li {
    padding: 0px 15px;
  }
}
@media (max-width: 1200px) {
  #divHeader #gnb .depth2 > li {
    padding: 0px 10px;
  }
}
@media (max-width: 1120px) {
  #divHeader #gnb .depth2 > li {
    padding: 0px 5px;
  }
}
#divHeader #gnb .depth2 > li > a {
  position: relative;
  padding-left: 12px;
}
#divHeader #gnb .depth2 > li > a::before {
  position: absolute;
  top: 50%;
  left: -13px;
  display: block;
  transform: translateY(-50%);
  content: "";
}
@media (max-width: 1200px) {
  #divHeader #gnb .depth2 > li > a {
    padding-left: 8px;
  }
}
#divHeader #gnb .depth2 > li > a::before {
  top: 13px;
  left: 0;
  width: 5px;
  height: 2px;
  background: #969696;
}
@media (max-width: 1450px) {
  #divHeader #gnb .depth2 > li > a::before {
    top: 12px;
  }
}
#divHeader #gnb .depth2 a:hover .uline {
  color: #1955a6;
}
#divHeader #gnb .depth2 .uline {
  display: inline;
  padding-top: 5px;
  text-align: left;
  transition: all ease-out 0.3s;
}
#divHeader .group-util {
  position: relative;
  height: var(--util-height);
  border-bottom: 1px solid rgba(224, 224, 224, 0.8);
  font-family: "PretendardR";
  font-size: 15px;
  background: #fff;
  z-index: 115;
}
#divHeader .group-util .util-area {
  height: 100%;
}
#divHeader .group-util .util-area a {
  color: #1a1a1a;
}
#divHeader .group-util .util-area .wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1610px;
  width: 100%;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper {
    justify-content: end;
  }
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .link-wrap {
    display: none;
  }
}
#divHeader .group-util .util-area .wrapper .link-wrap a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 33px;
  background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /%3E%3Cpolyline points="9 22 9 12 15 12 15 22" /%3E%3C/svg%3E') no-repeat left center;
  background-size: 26px;
}
#divHeader .group-util .util-area .wrapper .link-wrap a span {
  display: block;
  padding-top: 5px;
}
#divHeader .group-util .util-area .wrapper .util-wrap {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 30px;
  line-height: 20px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap {
    font-size: 14px;
    gap: 0;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list {
  display: flex;
  gap: 6px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .signup {
  padding-right: 19px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .login,
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout {
  display: flex;
  align-items: center;
  padding-left: 25px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 width%3D%2224%22 height%3D%2224%22 class%3D%22main-grid-item-icon%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22%3E%3Cpath d%3D%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22 /%3E%3Ccircle cx%3D%2212%22 cy%3D%227%22 r%3D%224%22 /%3E%3C/svg%3E") no-repeat center left;
  background-size: 22px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .login a,
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout a {
  position: relative;
  display: block;
  padding-right: 25px;
  font-weight: 500;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .login a::after,
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout a::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 21px;
  height: 20px;
  content: "";
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout a::after {
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 width%3D%2224%22 height%3D%2224%22 class%3D%22main-grid-item-icon%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22%3E%3Cpath d%3D%22M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4%22 /%3E%3Cpolyline points%3D%2216 17 21 12 16 7%22 /%3E%3Cline x1%3D%2219%22 x2%3D%229%22 y1%3D%2212%22 y2%3D%2212%22 /%3E%3C/svg%3E") no-repeat left center;
  background-size: 21px 20px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout span {
  color: #0458bc;
  font-weight: 500;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .logout span span {
  color: #1a1a1a;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item .list .login a::after {
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 width%3D%2224%22 height%3D%2224%22 class%3D%22main-grid-item-icon%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22%3E%3Cpath d%3D%22M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4%22 /%3E%3Cpolyline points%3D%2210 17 15 12 10 7%22 /%3E%3Cline x1%3D%2215%22 x2%3D%223%22 y1%3D%2212%22 y2%3D%2212%22 /%3E%3C/svg%3E") no-repeat left center;
  background-size: 22px 22px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .item a {
  display: flex;
  align-items: center;
  padding: 0 5px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .item a {
    padding: 0 10px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap li.summary {
  position: relative;
  display: flex;
  gap: 5px;
  line-height: 20px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap li.summary {
    position: static;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap li.summary > span {
  display: flex;
  font-weight: 500;
  color: #0d4296;
}
@media (max-width: 1024px) {
  #divHeader .group-util .util-area .wrapper .util-wrap li.summary > span {
    display: none;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap li.summary a.summaryBtn {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 15rem;
  padding: 9px 15px;
  background: #ff4800;
  color: #fff;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap li.summary a.summaryBtn {
    padding: 0 5px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenu {
  position: absolute;
  top: calc(var(--util-height) - 10px);
  right: 0;
  width: 410px;
  opacity: 0;
  visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.23);
  background: #f5f5f5;
  font-family: "GmarketSans";
  transition: all 0.3s;
  z-index: 22;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenu {
    top: var(--util-height);
    border-radius: 0px;
    width: 100%;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenu.on {
  opacity: 1;
  visibility: visible;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuArea {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
  position: absolute;
  top: 41px;
  right: 30px;
  width: 435px;
  border: 1px solid #e8eaed;
  background: #f5f5f5;
  box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.23);
  z-index: 20;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuArea.on {
  opacity: 1;
  visibility: visible;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop {
  padding: 20px 25px 25px;
  background: #0091d0;
  color: #fff !important;
  border-bottom: 1px solid #e8eaed;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop {
    padding: 15px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .infoTit {
  height: 40px;
  line-height: 40px;
  padding-left: 30px;
  background: url(../../../image/ko/local/myInfoIcon.png) no-repeat left center;
  font-size: 18px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary {
  font-weight: 300;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary li {
  position: relative;
  padding-left: 10px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary li::before {
  position: absolute;
  top: 50%;
  left: -13px;
  display: block;
  transform: translateY(-50%);
  content: "";
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary li::before {
  left: 0;
  width: 3px;
  height: 3px;
  background: #fff;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary li span {
  display: inline-block;
  padding-top: 5px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myInfoTop .summary li #overdueCount {
  color: #034ea2;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList {
  background: #f2f5fb;
  padding: 15px 20px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList {
    padding: 10px 15px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul {
    gap: 10px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li {
  display: block;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.1);
  padding: 20px 10px 22px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li {
    padding: 15px 10px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li:nth-child(1) .myMenuTit::before {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /%3E%3Cpath d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /%3E%3C/svg%3E') no-repeat left center;
  background-size: 24px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li:nth-child(2) .myMenuTit::before {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /%3E%3Cpath d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /%3E%3C/svg%3E') no-repeat left center;
  background-size: 24px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li:nth-child(3) .myMenuTit::before {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpolyline points="6 9 6 2 18 2 18 9" /%3E%3Cpath d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" /%3E%3Crect height="8" width="12" x="6" y="14" /%3E%3C/svg%3E') no-repeat left center;
  background-size: 24px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li:nth-child(4) .myMenuTit::before {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="main-grid-item-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"%3E%3Cpath d="M12 20h9" /%3E%3Cpath d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" /%3E%3C/svg%3E') no-repeat left center;
  background-size: 24px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .myMenuTit {
  display: flex;
  font-size: 17px;
  font-weight: 600;
  padding: 0 10px;
  color: #000;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .myMenuTit {
    font-size: 16px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .myMenuTit::before {
  margin-right: 10px;
  content: "";
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .myMenuTit::before {
    margin-right: 8px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .myMenuTit span {
  padding-top: 5px;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 25px 22px 0 22px;
  margin-top: 10px;
  border-top: 2px solid #d5d5d5;
  color: #717171;
}
@media (max-width: 480px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box {
    padding: 15px 10px 0 10px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box .myMenuStatus {
  white-space: nowrap;
  color: #717171;
  padding: 0;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box .myMenuStatus span {
  font-size: 22px;
  padding-right: 5px;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box .myMenuStatus span {
    font-size: 18px;
  }
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box .myMenuStatus span.blue {
  color: #093889;
}
#divHeader .group-util .util-area .wrapper .util-wrap .myMenuListW .myMenuList ul li .stat-box .myMenuStatus span.red {
  color: #d8416f;
}
#divHeader .group-util .util-area .wrapper .util-wrap .closeBtn {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22 width%3D%2224%22 height%3D%2224%22 class%3D%22main-grid-item-icon%22 fill%3D%22none%22 stroke%3D%22%23FFFFFF%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22%3E%3Cline x1%3D%2218%22 x2%3D%226%22 y1%3D%226%22 y2%3D%2218%22 /%3E%3Cline x1%3D%226%22 x2%3D%2218%22 y1%3D%226%22 y2%3D%2218%22 /%3E%3C/svg%3E") no-repeat center;
}
@media (max-width: 768px) {
  #divHeader .group-util .util-area .wrapper .util-wrap .closeBtn {
    top: 23px;
  }
}
#divHeader .group-util .info {
  display: none;
}
#divHeader .btn-menu {
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
}
#divHeader .btn-menu::before {
  content: "";
  width: 32px;
  height: 23px;
  background: url(../../../image/ko/local/ico-menu.png) no-repeat center/contain;
}
@media (max-width: 1450px) {
  #divHeader .btn-menu::before {
    width: 28px;
    height: 19px;
  }
}

#divWholeMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 0;
  width: 100%;
  background: #00489d;
  color: #fff;
  z-index: 150;
  overflow: hidden;
  transition: 0.7s;
}
@media (max-width: 1024px) {
  #divWholeMenu {
    display: none;
    height: 100%;
    overflow-y: auto;
    transition: none;
    color: #080808;
    background: #bfe3f3;
  }
}
#divWholeMenu.active {
  height: 100vh;
  overflow-y: auto;
}
#divWholeMenu .inner {
  position: relative;
  flex-direction: column;
}
@media (max-width: 1300px) {
  #divWholeMenu .inner {
    padding: 0 20px;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .inner {
    padding: 0;
  }
}
#divWholeMenu .inner-mobile {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 var(--inner);
}
@media (min-width: 1024px) {
  #divWholeMenu .inner-mobile {
    padding: 0;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}
#divWholeMenu .fixed > .inner-mobile {
  display: block;
  top: 0;
  box-shadow: -2px 0px 15.04px 0.96px rgba(0, 0, 0, 0.18);
}
#divWholeMenu .fixed .top {
  display: flex;
  padding: 82px 0 15px;
  color: #fff;
}
#divWholeMenu .fixed .top.pc {
  border-bottom: 2px solid #fff;
}
#divWholeMenu .fixed .top.pc strong {
  font-size: 36px;
}
@media (max-width: 1024px) {
  #divWholeMenu .fixed .top.pc strong {
    display: none;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .fixed .top.pc {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 22px 0;
    height: var(--whole-height);
    border-bottom: none;
    background: #034ea2;
  }
}
#divWholeMenu .gnb {
  position: relative;
  padding-top: 40px;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb {
    padding-top: 0;
  }
}
#divWholeMenu .gnb > .inner {
  padding: 0 var(--inner);
  max-width: 1720px;
}
@media (max-width: 1300px) {
  #divWholeMenu .gnb > .inner {
    padding: 0;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb {
    position: fixed;
    top: var(--whole-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--whole-height));
    overflow-y: auto;
  }
}
#divWholeMenu .gnb .depth1 {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
@media (max-width: 1300px) {
  #divWholeMenu .gnb .depth1 {
    gap: 15px;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1 {
    flex-direction: column;
    gap: 0;
  }
}
#divWholeMenu .gnb .depth1-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 100px;
}
#divWholeMenu .gnb .depth1-item.no-outline a::after {
  background-color: transparent;
}
#divWholeMenu .gnb .depth1-item:hover .depth-title {
  background: #0091d0;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item:hover .depth-title {
    color: #565656 !important;
    background: transparent;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item:hover .depth-title::after {
    background-color: #fff !important;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item.active > .depth-title {
    color: #fff !important;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item.active > .depth-title::after {
    background-color: transparent !important;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item.active {
    background: #0091d0;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item.active .depth-title {
    color: #fff;
  }
}
#divWholeMenu .gnb .depth1-item.active .depth2 {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item {
    flex-direction: row;
    width: 50%;
    padding-bottom: 0;
  }
}
#divWholeMenu .gnb .depth1-item > .depth-title {
  position: relative;
  padding: 0 16px;
  font-size: 16px;
  color: white;
  border: 1px solid rgba(216, 217, 218, 0.5);
}
#divWholeMenu .gnb .depth1-item > .depth-title:hover {
  color: white;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item > .depth-title:hover::after {
    background-color: transparent;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item > .depth-title::after {
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 1px;
    width: 95%;
    background: #fff;
    content: "";
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth1-item > .depth-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    color: #565656;
    border: none;
  }
}
@media (max-width: 768px) {
  #divWholeMenu .gnb .depth1-item > .depth-title {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  #divWholeMenu .gnb .depth1-item > .depth-title {
    font-size: 14px;
  }
}
#divWholeMenu .gnb .depth2 {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 {
    position: absolute;
    top: 0;
    right: 0;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    width: 50%;
    min-height: calc(100vh - var(--whole-height));
    padding: 0 20px;
    transition: all 0.4s;
  }
}
@media (max-width: 1024px) and (max-width: 480px) {
  #divWholeMenu .gnb .depth2 {
    padding: 0 10px;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 li span {
    font-family: "GmarketSans";
  }
}
#divWholeMenu .gnb .depth2 > li {
  border-bottom: 1px solid rgba(216, 217, 218, 0.2);
  padding: 0 20px 0 30px;
}
@media (max-width: 1680px) {
  #divWholeMenu .gnb .depth2 > li {
    padding: 0 10px;
  }
}
@media (max-width: 1300px) {
  #divWholeMenu .gnb .depth2 > li {
    padding: 0;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li {
    border-bottom: 0;
  }
}
#divWholeMenu .gnb .depth2 > li > a {
  position: relative;
  display: block;
  font-size: 15px;
  color: #fff;
}
#divWholeMenu .gnb .depth2 > li > a:hover .uline::before {
  transform: scaleX(1);
  transform-origin: left;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li > a::before {
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 1px;
    width: 100%;
    transition: background-color 0.3s;
    background: rgba(216, 217, 218, 0.5);
    content: "";
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li > a {
    color: #080808;
  }
}
@media (max-width: 768px) {
  #divWholeMenu .gnb .depth2 > li .has-child {
    height: 50px;
    line-height: 50px;
  }
}
#divWholeMenu .gnb .depth2 > li .has-child.active::after {
  transform: rotate(180deg);
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li .has-child.active::after {
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(25, 85, 166)' d='M6.707,6.064 C6.317,6.455 5.683,6.455 5.293,6.064 L1.165,1.936 C0.535,1.306 0.981,0.229 1.872,0.229 L10.128,0.229 C11.019,0.229 11.465,1.306 10.835,1.936 L6.707,6.064 Z'/%3E%3C/svg%3E") no-repeat center/contain;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li .has-child.active {
    border-bottom: 2px solid #034ea2;
  }
}
#divWholeMenu .gnb .depth2 > li .has-child::after {
  position: absolute;
  right: 0px;
  top: 22px;
  display: block;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: url("../../../image/ko/local/ico-arr_menu01.png") no-repeat center;
  content: "";
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li .has-child::after {
    top: 25px;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li .has-child {
    display: flex;
    position: relative;
  }
  #divWholeMenu .gnb .depth2 > li .has-child::after {
    width: 12px;
    height: 7px;
    transition: 0.3s;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='12px' height='7px'%3E%3Cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='%235656' d='M6.707,6.064 C6.317,6.455 5.683,6.455 5.293,6.064 L1.165,1.936 C0.535,1.306 0.981,0.229 1.872,0.229 L10.128,0.229 C11.019,0.229 11.465,1.306 10.835,1.936 L6.707,6.064 Z'/%3E%3C/svg%3E") no-repeat center/contain;
  }
}
#divWholeMenu .gnb .depth2 > li .uline {
  font-size: 15px;
  line-height: 50px;
}
@media (max-width: 480px) {
  #divWholeMenu .gnb .depth2 > li .uline {
    font-size: 14px;
    padding-top: 3px;
  }
}
#divWholeMenu .gnb .depth2 > li .uline::before {
  bottom: -3px;
  height: 70%;
  opacity: 0.8;
  background: #0091d0;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth2 > li .uline::before {
    display: none;
  }
}
#divWholeMenu .gnb .depth3 {
  padding-bottom: 18px;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth3 {
    display: none;
    padding: 13px 0;
    border-bottom: 1px solid #034ea2;
  }
}
#divWholeMenu .gnb .depth3 a {
  font-family: "PretendardR";
  font-weight: 400;
  opacity: 0.8;
  color: #fff;
  padding: 0;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth3 a {
    color: #565656;
  }
}
#divWholeMenu .gnb .depth3 a:hover {
  opacity: 1;
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth3 a:hover {
    color: #080808;
  }
}
@media (max-width: 1024px) {
  #divWholeMenu .gnb .depth3 a span::before {
    background: #0091d0;
  }
}
#divWholeMenu .gnb .depth3 li + li a {
  padding-top: 5px;
}
#divWholeMenu .btn-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 35px;
  top: 82px;
  border-radius: 10px;
  text-align: center;
}
@media (max-width: 1024px) {
  #divWholeMenu .btn-close {
    right: var(--inner);
    top: 22px;
    border: none;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
#divWholeMenu .btn-close::before {
  content: "";
  width: 25px;
  height: 25px;
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25px' height='25px'%3E%3Cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='0px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(255, 255, 255)' d='M24.203,2.512 L13.892,12.812 L23.849,22.769 L22.133,24.485 L12.175,14.527 L2.446,24.245 L0.728,22.530 L10.458,12.810 L0.400,2.751 L2.115,1.036 L12.175,11.095 L22.485,0.796 L24.203,2.512 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

#divFooter {
  font-family: "PretendardR";
  font-size: 16px;
}
#divFooter > .inner {
  padding: 0 var(--inner);
  max-width: 1720px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #divFooter .group-footer {
    font-size: 14px;
  }
}
#divFooter .group-footer .top .list {
  display: flex;
  gap: 18px;
}
#divFooter .group-footer .top .list a {
  line-height: 70px;
}
#divFooter .group-footer .top .list span.color-mt {
  color: #14acae;
}
#divFooter .group-footer .top .list span.text-bullet {
  position: relative;
  padding-left: 12px;
  color: #787878;
}
#divFooter .group-footer .top .list span.text-bullet::before {
  position: absolute;
  top: 50%;
  left: -13px;
  display: block;
  transform: translateY(-50%);
  content: "";
}
#divFooter .group-footer .top .list span.text-bullet::before {
  left: 0;
  width: 3px;
  height: 3px;
  background: #787878;
}
#divFooter .group-footer .bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 30px 0 25px;
  border-top: 1px solid #ebebeb;
}
@media (max-width: 768px) {
  #divFooter .group-footer .bottom {
    padding: 20px 0 40px;
  }
}
@media (max-width: 550px) {
  #divFooter .group-footer .bottom {
    flex-direction: column;
    gap: 15px;
  }
}
#divFooter .group-footer .bottom .left {
  display: flex;
  gap: 57px;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .left {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #divFooter .group-footer .bottom .left {
    gap: 50px;
  }
}
@media (max-width: 550px) {
  #divFooter .group-footer .bottom .left {
    gap: 10px;
  }
}
#divFooter .group-footer .bottom .left .img-area {
  padding-top: 20px;
}
@media (max-width: 768px) {
  #divFooter .group-footer .bottom .left .img-area {
    padding-top: 30px;
  }
}
@media (max-width: 550px) {
  #divFooter .group-footer .bottom .left .img-area {
    padding-top: 0;
  }
}
#divFooter .group-footer .bottom .left .address-area {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .left .address-area {
    gap: 10px;
  }
}
#divFooter .group-footer .bottom .left .address-area address {
  display: flex;
  gap: 30px;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .left .address-area address {
    flex-direction: column;
    gap: 0;
  }
}
#divFooter .group-footer .bottom .left .address-area .copy {
  color: #8b8b8b;
}
#divFooter .group-footer .bottom .right {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 18px;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .right {
    position: absolute;
    top: 30px;
    right: 0;
    gap: 15px;
  }
}
@media (max-width: 550px) {
  #divFooter .group-footer .bottom .right {
    position: static;
  }
}
#divFooter .group-footer .bottom .right .mark-area {
  display: flex;
  align-items: center;
  gap: 30px;
}
#divFooter .group-footer .bottom .right .mark-area .sns-list {
  display: flex;
  gap: 9px;
}
#divFooter .group-footer .bottom .right .mark-area .sns-list a {
  display: block;
  height: 26px;
  width: 26px;
}
#divFooter .group-footer .bottom .right .mark-area .sns-list a:hover img.on {
  display: block;
}
#divFooter .group-footer .bottom .right .mark-area .sns-list a:hover img.off {
  display: none;
}
#divFooter .group-footer .bottom .right .mark-area .sns-list a img.on {
  display: none;
}
#divFooter .group-footer .bottom .right .site-area {
  width: 220px;
  position: relative;
}
@media (max-width: 768px) {
  #divFooter .group-footer .bottom .right .site-area {
    position: relative;
  }
}
#divFooter .group-footer .bottom .right .site-area .btn-site {
  position: relative;
  display: block;
  line-height: 45px;
  height: 45px;
  width: 100%;
  -moz-text-align-last: left;
       text-align-last: left;
  padding-left: 20px;
  border-radius: 8px;
  border: 1px solid #d7d7d7;
  color: #787878;
  background: #f2f2f2;
  z-index: 1;
}
#divFooter .group-footer .bottom .right .site-area .btn-site span {
  padding-left: 5px;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .right .site-area .btn-site {
    line-height: 40px;
    padding: 0 15px;
  }
}
#divFooter .group-footer .bottom .right .site-area .btn-site.active::after {
  transform: translateY(-50%) rotate(180deg);
}
#divFooter .group-footer .bottom .right .site-area .btn-site::after {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: url("../../../image/ko/local/ico-arr_foot.png") no-repeat center/contain;
  z-index: 5;
  content: "";
}
#divFooter .group-footer .bottom .right .site-area .list {
  display: none;
  position: absolute;
  width: 100%;
  bottom: 38px;
  left: 0;
  padding: 11px 25px 18px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #d7d7d7;
  background: #f2f2f2;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .right .site-area .list {
    padding: 10px;
  }
}
#divFooter .group-footer .bottom .right .site-area .list a {
  display: flex;
  padding: 10px 0;
  color: #8e8e8e;
  transition: all 0.34s;
}
#divFooter .group-footer .bottom .right .site-area .list a:hover {
  color: #1a1a1a;
}
@media (max-width: 1024px) {
  #divFooter .group-footer .bottom .right .site-area .list a {
    padding: 5px 0;
  }
}