@charset "UTF-8";
/* NO CSS*/
@import url("../fonts/Pretendard/Pretendard.css");
@import url("../fonts/Poppins/Poppins.css");
@import url("../fonts/iconoir/iconoir.css");
@import url("../fonts/remixicon/remixicon.css");
:root {
  --color-1:#1C2952;
  --color-2:#00C284;
  --color-3:#315FF5;
  --bg-color-1:#F4F9FF;
  --bg-color-2:#F5F5F5;
  --line-color-1:#CAD1E1;
}

#wrap {
  font-family: "Pretendard";
  overflow: hidden;
}

/**************** header ****************/
/* 마이페이지 & 팝업알림 */
.header {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.header.down {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.header::before {
  display: none;
}
.header.active {
  background: #fff;
}
.header.active::before {
  display: block;
  border-color: #F0F2F6;
}
.header .header-container {
  width: 176rem;
}
.header .header-container > ul > li > a {
  color: #222;
}
.header .header-util-sitemap > a {
  width: 4.4rem;
  height: 4.4rem;
}
.header .header-util-sitemap > a::after {
  color: var(--color-1);
  font-weight: 600;
}
.header .header-util-sitemap.active > a::after {
  content: "\ebd1";
  display: block;
  background: none;
  font-size: 4.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 80% 50%;
          transform-origin: 80% 50%;
}
.header .header-util .header-util-user {
  color: #222;
  font-size: 1.8rem;
  line-height: 1.4;
}
.header .header-util .header-util-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-1);
  font-size: 1.8rem;
  font-weight: 700;
}
.header .header-util .header-util-login > a {
  display: inline-block;
  vertical-align: middle;
  padding: 1rem 0.4rem;
  color: var(--color-1);
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight: 700;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header .header-util .header-util-login > a:hover, .header .header-util .header-util-login > a:focus {
  color: var(--color-2);
}
.header .header-util .header-util-mypage > a::after {
  content: "";
  width: 4.4rem;
  height: 4.4rem;
  background: url(../images/layout/util_user_icon.svg) no-repeat 50% 50%/cover;
}
.header .header-util .header-util-alert {
  position: relative;
}
.header .header-util .header-util-alert > a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.4rem;
  position: relative;
  padding: 0.9rem 2rem;
  border: 1px solid #CAD1E1;
  border-radius: 4rem;
  color: var(--color-1);
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 600;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header .header-util .header-util-alert > a::before {
  content: "";
  width: 2.5rem;
  height: 2.4rem;
  background: url(../images/layout/util_notice_icon.svg) no-repeat 50% 50%/2.5rem;
}
.header .header-util .header-util-alert > a:hover, .header .header-util .header-util-alert > a:focus {
  border-color: #F4F9FF;
  background: #F4F9FF;
}
.header .header-util .header-util-alert .alert-area {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.header .header-util .header-util-alert .alert-area > .slide {
  width: 40rem;
  height: 21.6rem;
  border-radius: 1.6rem 1.6rem 0 0;
}
.header .header-util .header-util-alert .alert-area > .slide img {
  max-width: 100%;
  min-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header .header-util .header-util-alert .alert-area .next, .header .header-util .header-util-alert .alert-area .prev {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}
.header .header-util .header-util-alert .alert-area .next::after, .header .header-util .header-util-alert .alert-area .prev::after {
  content: "";
  color: #000;
  font-size: 3.2rem;
  font-family: "remixicon" !important;
}
.header .header-util .header-util-alert .alert-area .next {
  right: 0;
}
.header .header-util .header-util-alert .alert-area .next::after {
  content: "\ea6e";
}
.header .header-util .header-util-alert .alert-area .prev {
  left: 0;
}
.header .header-util .header-util-alert .alert-area .prev::after {
  content: "\ea64";
}
.header .header-util .header-util-alert .alert-area .assi {
  position: relative;
  top: -1px;
  padding: 0.8rem 2rem;
  background: #1C2952;
  border-radius: 0 0 1.6rem 1.6rem;
}
.header .header-util .header-util-alert .alert-area .assi .pagination {
  float: left;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  max-width: 60%;
  padding: 0.8rem 0;
}
.header .header-util .header-util-alert .alert-area .assi .pagination .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.6;
}
.header .header-util .header-util-alert .alert-area .assi .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.header .header-util .header-util-alert .alert-area .assi .pop_close {
  float: right;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #fff;
}
.header .header-util .header-util-alert .alert-area .assi .pop_close::after {
  content: "\eb99";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  font-size: 2rem;
  font-family: "remixicon" !important;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header .header-util .header-util-alert .alert-area .assi .pop_close:hover::after, .header .header-util .header-util-alert .alert-area .assi .pop_close:focus::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.header .header-util .header-util-alert .alert-area .assi::after {
  content: "";
  display: block;
  clear: both;
}
.header .header-util .header-util-alert .alert-area.on {
  -webkit-animation: alertOpen 1s forwards;
          animation: alertOpen 1s forwards;
}
.header .header-menu-copyrights .header-util-user, .header .header-menu-copyrights .header-util-login {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 2.16rem;
}
.header .header-menu-copyrights .header-util-user a, .header .header-menu-copyrights .header-util-login a {
  color: var(--color-1);
  font-size: 2.16rem;
  font-weight: 700;
}
.header .header-menu-copyrights .header-util-user a:hover, .header .header-menu-copyrights .header-util-user a:focus, .header .header-menu-copyrights .header-util-login a:hover, .header .header-menu-copyrights .header-util-login a:focus {
  color: var(--color-2);
}

@-webkit-keyframes alertOpen {
  0% {
    top: 100%;
    right: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }
  100% {
    top: calc(100% + 1.6rem);
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }
}

@keyframes alertOpen {
  0% {
    top: 100%;
    right: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }
  100% {
    top: calc(100% + 1.6rem);
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }
}
@-webkit-keyframes alertClose {
  0% {
    top: calc(100% + 1.6rem);
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }
  100% {
    top: 100%;
    right: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }
}
@keyframes alertClose {
  0% {
    top: calc(100% + 1.6rem);
    width: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }
  100% {
    top: 100%;
    right: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
  }
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-bg {
  -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.03);
          box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.03);
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth {
  padding: 4rem 1rem 8rem;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-util.right {
  position: absolute;
  right: 0;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-util-sitemap {
  display: none;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-container > ul > li > a {
  color: #222;
  font-size: 2.4rem;
  font-weight: 600;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-container > ul li.active > a {
  color: #1C2952;
  font-weight: 600;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul {
  gap: 2.4rem;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li {
  display: block;
  text-align: center;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a {
  display: inline-block;
  position: relative;
  width: auto;
  color: #222;
  font-size: 2rem;
  font-weight: 500;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:hover, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:focus, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:focus-visible {
  color: #1C2952;
  font-weight: 600;
  text-decoration: none;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:hover::after, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:focus::after, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a:focus-visible::after {
  content: "";
  display: block;
  position: absolute;
  right: -0.4rem;
  top: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: #00C284;
}
#wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li:hover > a, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li:focus > a, #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li:focus-visible > a {
  text-decoration: none;
}

#wrap[data-library-responsive=mobile].active .header {
  background: rgb(255, 255, 255);
}
#wrap[data-library-responsive=mobile] .header[data-header-lnb=type1] .header-menu-container > ul > li > a {
  font-size: 22px;
}
#wrap[data-library-responsive=mobile] .header[data-header-lnb=type1] .header-menu-container > ul > li.on > a {
  color: #fff;
  background: var(--color-3);
}
#wrap[data-library-responsive=mobile] .header[data-header-lnb=type1] .header-menu-container > ul > li.on > a.arrow::after {
  color: #fff;
}
#wrap[data-library-responsive=mobile] .header[data-header-lnb=type1] .header-menu-2depth {
  background: #F4F9FF;
}

/**************** footer ****************/
#footer {
  background-color: #0F1832;
}
#footer .layout {
  width: 100%;
  max-width: 172rem;
  margin: 0 auto;
  padding: 8rem 8rem 10rem;
}
#footer .layout .quick_wrap {
  position: fixed;
  right: 8rem;
  top: calc(50% + 5rem);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 5;
}
#footer .layout .quick_wrap .quick .list > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid #CAD1E1;
  border-radius: 3.2rem;
  background: #fff;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(49, 88, 245, 0.2);
          box-shadow: 0px 4px 8px 0px rgba(49, 88, 245, 0.2);
  color: var(--color-1);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
}
#footer .layout .quick_wrap .quick .list > li > a i {
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#footer .layout .quick_wrap .quick .list > li > a:hover i, #footer .layout .quick_wrap .quick .list > li > a:focus i {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
#footer .layout .quick_wrap .quick .list > li:first-child > a {
  background: #315FF5;
  border-color: #315FF5;
  color: #fff;
}
#footer .layout .quick_wrap .quick .list > li + li {
  margin-top: 1.6rem;
}
#footer .layout .top {
  position: relative;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
#footer .layout .top .area .logo {
  float: left;
  margin-right: 4rem;
}
#footer .layout .top .area .item1 {
  float: left;
}
#footer .layout .top .area .item1 > li strong {
  display: inline-block;
  margin-right: 0.8rem;
  font-weight: 500;
}
#footer .layout .top .area .item1 > li + li {
  margin-top: 0.8rem;
}
#footer .layout .top .area .logos {
  float: right;
}
#footer .layout .top .area .logos > span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2.5rem;
}
#footer .layout .top .area::after {
  content: "";
  display: table;
  clear: both;
}
#footer .layout .bottom {
  width: 100%;
  padding-top: 6rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 200;
}
#footer .layout .bottom .item2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: 4rem;
}
#footer .layout .bottom .item2 > li:first-child {
  font-weight: 700;
}
#footer .layout .bottom .copyright {
  display: inline;
  color: #ddd;
}

@media (max-width: 1640px) {
  #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-container > ul > li > a {
    padding: 0 2.8rem;
    font-size: 2.2rem;
  }
}
@media (max-width: 1280px) {
  .header-logo a img {
    max-width: 20rem;
  }
  #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-container > ul > li > a {
    padding: 0 2rem;
    font-size: 2rem;
  }
  #wrap[data-library-responsive=pc]:not([data-header-state-item=sitemap]) .header-menu-2depth > ul > li > a {
    font-size: 1.7rem;
  }
  #footer .layout {
    padding: 6rem 4rem 8rem;
  }
  #footer .layout .quick_wrap {
    right: 4rem;
  }
  #footer .layout .top .area .logos {
    float: left;
    margin-top: 3rem;
  }
}
@media (max-width: 1024px) {
  .header .header-util .header-util-user,
  .header .header-util .header-util-login {
    display: none;
  }
}
@media (max-width: 920px) {
  #footer .layout .top .area .item1 {
    width: 100%;
    margin-top: 2rem;
  }
}
@media (max-width: 768px) {
  .header .header-util .header-util-alert .alert-area {
    right: -6rem;
  }
  .header .header-util .header-util-alert > a span {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0 none;
    clip: rect(0, 0, 0, 0);
  }
  #footer .layout .quick_wrap {
    display: none;
  }
}
/**************** sub layout ****************/
#visual {
  position: relative;
  width: 100%;
  height: 36rem;
}
#visual .img {
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-block;
  width: calc(100% - 4rem);
  height: 100%;
  border-radius: 0 2.4rem 2.4rem 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
}
#visual .img img {
  max-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#visual .layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 154.2rem;
  max-width: 100%;
  position: relative;
  margin: 0 auto;
  height: 100%;
  letter-spacing: -0.02em;
}
#visual .layout .title {
  margin-bottom: 2.4rem;
  color: #fff;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
#visual .layout .location {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  max-width: 90%;
}
#visual .layout .location .path {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  text-align: center;
}
#visual .layout .location .path > li {
  position: relative;
  color: #fff;
  font-size: 1.8rem;
}
#visual .layout .location .path > li a {
  white-space: nowrap;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#visual .layout .location .path > li a:hover, #visual .layout .location .path > li a:focus {
  text-decoration: underline;
}
#visual .layout .location .path > li:last-child {
  font-weight: 600;
}
#visual .layout .location .path > li.home a {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../images/layout/home_icon.svg") no-repeat 50% 50%/cover;
}
#visual .layout .location .path > li:not(:first-child)::before {
  content: "\ea6e";
  margin-right: 0.4rem;
  font-family: "remixicon" !important;
  font-weight: 400;
}

@media (max-width: 1640px) {
  #visual .img {
    width: calc(100% - 2rem);
  }
}
@media (max-width: 1280px) {
  html {
    font-size: 9px;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 8px;
  }
  #visual {
    height: 30rem;
  }
}
@media (max-width: 420px) {
  html {
    font-size: 7px;
  }
}/*# sourceMappingURL=layout.css.map */