.wrapper {
  position: relative;
}
.wrapper:not([data-active=true]) #header {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
}
.wrapper:not([data-active=true]) #main > section {
  opacity: 0;
  visibility: hidden;
}
.wrapper #header {
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-duration: 0.75s;
}

#kv {
  --top-height:calc(100% - 232 / var(--base-font-size) * var(--default-font-size));
  --bottom-height:calc(232 / var(--base-font-size) * var(--default-font-size));
}

#kv .main-kv-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
#kv .main-kv-slide {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}
#kv .main-kv-slide-item {
  position: relative;
  overflow: hidden;
}
#kv .main-kv-slide-item .bg {
  position: relative;
  padding-top: 704px;
}
#kv .main-kv-slide-item .bg .bg-inner {
  position: absolute;
  top: 0;
  lefT: 0;
  width: 100%;
  height: 100%;
}
#kv .main-kv-slide-item .bg .bg-inner img, #kv .main-kv-slide-item .bg .bg-inner video {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#kv .main-kv-slide-txt-box {
  position: absolute;
  top: 2.5vw;
  left: 3.3333333333vw;
}
#kv .main-kv-slide-txt-box .tit {
  color: var(--color-gray1);
  margin-top: calc(12 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-slide-txt-box .btn {
  margin-top: calc(32 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-slide-arrow {
  position: absolute;
  bottom: 2.9166666667vw;
  left: 3.3333333333vw;
  display: flex;
  gap: calc(8 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-slide-arrow .play-pause-box {
  position: relative;
  width: calc(48 / var(--base-font-size) * var(--default-font-size));
  height: calc(48 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-slide-arrow .play-pause-box button {
  position: absolute;
  opacity: 0;
}
#kv .main-kv-slide-arrow .play-pause-box button.active {
  opacity: 1;
  z-index: 2;
}
#kv .main-kv-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
#kv .main-kv-menu-item {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  position: relative;
}
#kv .main-kv-menu-item .inner {
  padding: 1.875vw;
  height: 100%;
}
#kv .main-kv-menu-item.login {
  background-color: var(--color-midtone-mint);
}
#kv .main-kv-menu-item.login .txt-box {
  display: flex;
  gap: 1rem;
}
#kv .main-kv-menu-item.login .txt-box .icon {
  width: calc(60 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-menu-item.login .txt-box .icon img {
  width: 100%;
}
#kv .main-kv-menu-item.login .txt-box .tit {
  width: calc(100% - 1rem - 60 / var(--base-font-size) * var(--default-font-size));
  word-break: break-all;
}
#kv .main-kv-menu-item.login .login-btn {
  display: flex;
  justify-content: center;
  font-size: calc(22 / var(--base-font-size) * var(--default-font-size));
  background-color: var(--color-gray1);
  border-radius: 0.75rem;
  overflow: hidden;
  padding: calc(18 / var(--base-font-size) * var(--default-font-size)) 0;
  margin-top: calc(32 / var(--base-font-size) * var(--default-font-size));
  position: relative;
}
#kv .main-kv-menu-item.login .login-btn span {
  position: relative;
  font-weight: 500;
}
#kv .main-kv-menu-item.login .login-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#kv .main-kv-menu-item.login .login-btn:hover::before {
  opacity: 1;
}
#kv .main-kv-menu-item.online {
  background-color: var(--color-midtone-green);
  flex: 2.01;
}
#kv .main-kv-menu-item.online .txt-box {
  position: relative;
  height: 100%;
}
#kv .main-kv-menu-item.online .icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11.6666666667vw;
}
#kv .main-kv-menu-item.online .icon img {
  width: 100%;
}
#kv .main-kv-menu-item.online:hover .btn::before {
  opacity: 1;
}
#kv .main-kv-menu-item .tit {
  color: var(--color-gray1);
}
#kv .main-kv-menu-item .btn {
  margin-top: calc(20 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
#kv .main-kv-bottom-menu {
  display: flex;
  gap: 1rem;
}
#kv .main-kv-bottom-menu .menu-item {
  flex: 1;
}
#kv .main-kv-bottom-menu .menu-item a {
  display: flex;
  justify-content: space-between;
  padding: 1.25vw 1.25vw 1.25vw 1.875vw;
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-l);
  height: 100%;
}
#kv .main-kv-bottom-menu .menu-item a .tit {
  display: block;
  font-weight: 500;
  margin-top: 0.625vw;
  width: calc(100% - 96 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-bottom-menu .menu-item a .icon-wrap {
  width: calc(96 / var(--base-font-size) * var(--default-font-size));
}
#kv .main-kv-bottom-menu .menu-item a .icon-wrap .icon {
  position: relative;
  padding-top: 100%;
  background-color: var(--color-gray2);
  border-radius: var(--border-radius-s);
  overflow: hidden;
}
#kv .main-kv-bottom-menu .menu-item a .icon-wrap span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#kv .main-kv-bottom-menu .menu-item a .icon-wrap span img {
  width: 100%;
  height: 100%;
}
/* #kv .main-kv-bottom-menu .menu-item a .icon-wrap span img.icon1 {max-width: 52px; max-height: 52px; object-fit: cover; margin:0 auto;} */
@media screen and (min-width: 1000px) {
  #kv .main-kv-bottom-menu .menu-item a {
    transition: border 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  #kv .main-kv-bottom-menu .menu-item a:hover {
    border-color: var(--color-gray8);
  }
}
#kv .main-kv-bottom .arrow-box {
  flex: 1;
  padding: calc(16 / var(--base-font-size) * var(--default-font-size)) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#kv .main-kv-bottom .arrow-box svg {
  width: calc(40 / var(--base-font-size) * var(--default-font-size));
  height: calc(40 / var(--base-font-size) * var(--default-font-size));
}
@media screen and (min-width: 2561px) {
  #kv .main-kv-slide-item .bg {
    padding-top: max(53.49%, 704px);
  }
}
@media screen and (max-width: 1199px) {
  #kv .main-kv-slide-item .bg {
    padding-top: 447px;
  }
  #kv .main-kv-slide-txt-box {
    top: 3.6vw;
    left: 4.8vw;
  }
  #kv .main-kv-slide-txt-box .tit {
    margin-top: calc(9 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .btn {
    margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow {
    bottom: 3.6vw;
    left: 4.8vw;
  }
  #kv .main-kv-menu-item .inner {
    padding: 1.9vw;
  }
  #kv .main-kv-bottom-menu .menu-item a {
    gap: 1.71rem;
  }
  #kv .main-kv-bottom-menu .menu-item a .tit {
    margin-top: 0;
    width: calc(100% - 1.71rem - 6rem);
  }
  #kv .main-kv-bottom-menu .menu-item a .icon-wrap {
    width: 6rem;
  }
}
@media screen and (max-width: 999px) {
  #kv .main-kv-container {
    gap: 1.25rem;
    height: auto;
  }
  #kv .main-kv-top {
    gap: 1.25rem;
  }
  #kv .main-kv-slide-item .bg {
    padding-top: calc(496 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box {
    top: calc(33 / var(--base-font-size) * var(--default-font-size));
    left: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .tit {
    margin-top: calc(11 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .btn {
    margin-top: calc(27.5 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow {
    bottom: calc(33 / var(--base-font-size) * var(--default-font-size));
    left: calc(33 / var(--base-font-size) * var(--default-font-size));
    gap: calc(5 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow .play-pause-box {
    position: relative;
    width: calc(32 / var(--base-font-size) * var(--default-font-size));
    height: calc(32 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow button::before {
    display: none;
  }
  #kv .main-kv-menu {
    flex-direction: row;
    gap: 1.25rem;
  }
  #kv .main-kv-menu-item {
    flex: 1;
  }
  #kv .main-kv-menu-item .inner {
    padding: calc(27.5 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .txt-box {
    gap: calc(20 / var(--base-font-size) * var(--default-font-size));
    align-items: center;
  }
  #kv .main-kv-menu-item.login .txt-box .icon {
    width: calc(60.5 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .txt-box .tit {
    width: calc(100% - 60.5 / var(--base-font-size) * var(--default-font-size) - 20 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .login-btn {
    margin-top: calc(24.75 / var(--base-font-size) * var(--default-font-size));
    padding: calc(17.62 / var(--base-font-size) * var(--default-font-size)) 0 calc(16.38 / var(--base-font-size) * var(--default-font-size));
    font-size: calc(20.625 / var(--base-font-size) * var(--default-font-size));
    border-radius: 1.25rem;
  }
  #kv .main-kv-menu-item.login .login-btn::before {
    display: none;
  }
  #kv .main-kv-menu-item.online {
    flex: 1;
  }
  #kv .main-kv-menu-item .btn {
    margin-top: calc(19.25 / var(--base-font-size) * var(--default-font-size));
    width: calc(38.5 / var(--base-font-size) * var(--default-font-size));
    height: calc(38.5 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item .btn svg {
    width: calc(13.75 / var(--base-font-size) * var(--default-font-size));
    height: calc(13.75 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item .btn::before {
    display: none;
  }
  #kv .main-kv-bottom {
    display: block;
    height: auto;
  }
  #kv .main-kv-bottom-menu {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  #kv .main-kv-bottom-menu .menu-item {
    flex: none;
    width: calc(50% - 0.625rem);
  }
  #kv .main-kv-bottom-menu .menu-item a {
    padding: calc(17 / var(--base-font-size) * var(--default-font-size)) calc(16.5 / var(--base-font-size) * var(--default-font-size)) calc(16 / var(--base-font-size) * var(--default-font-size)) calc(22 / var(--base-font-size) * var(--default-font-size));
    align-items: center;
    border-radius: var(--border-radius-m);
    gap: calc(12 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-bottom-menu .menu-item a .tit {
    font-size: calc(19.25 / var(--base-font-size) * var(--default-font-size));
    width: calc(100% - 66 / var(--base-font-size) * var(--default-font-size) - 12 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-bottom-menu .menu-item a .icon-wrap {
    width: calc(66 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-bottom .arrow-box {
    display: none;
  }
}
@media screen and (max-width: 999px) and (min-width: 600px) {
  #kv .main-kv-slide-txt-box .btn {
    width: calc(44 / var(--base-font-size) * var(--default-font-size));
    height: calc(44 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .btn .btn-content-wrapper, #kv .main-kv-slide-txt-box .btn svg {
    width: calc(15.125 / var(--base-font-size) * var(--default-font-size));
    height: calc(15.125 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow button, #kv .main-kv-slide-arrow .play-pause-box {
    width: calc(44 / var(--base-font-size) * var(--default-font-size));
    height: calc(44 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow button svg, #kv .main-kv-slide-arrow .play-pause-box svg {
    width: calc(15.125 / var(--base-font-size) * var(--default-font-size));
    height: calc(15.125 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  #kv .main-kv-slide-item .bg {
    padding-top: calc(361 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box {
    top: calc(24 / var(--base-font-size) * var(--default-font-size));
    left: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .tit {
    margin-top: calc(8 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-txt-box .btn {
    margin-top: calc(20 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-slide-arrow {
    bottom: calc(24 / var(--base-font-size) * var(--default-font-size));
    left: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu {
    flex-direction: column;
  }
  #kv .main-kv-menu-item .inner {
    padding: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item .txt-box {
    position: static;
  }
  #kv .main-kv-menu-item .btn {
    width: calc(28 / var(--base-font-size) * var(--default-font-size));
    height: calc(28 / var(--base-font-size) * var(--default-font-size));
    margin-top: calc(14 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item .btn svg {
    width: calc(10 / var(--base-font-size) * var(--default-font-size));
    height: calc(10 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .txt-box {
    gap: calc(16 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .txt-box .icon {
    width: calc(44 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .txt-box .tit {
    width: calc(100% - 44 / var(--base-font-size) * var(--default-font-size) - 16 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.login .login-btn {
    margin-top: calc(18 / var(--base-font-size) * var(--default-font-size));
    padding: calc(13 / var(--base-font-size) * var(--default-font-size)) 0 calc(12 / var(--base-font-size) * var(--default-font-size));
    font-size: initial;
  }
  #kv .main-kv-menu-item.online {
    flex: none;
  }
  #kv .main-kv-menu-item.online .icon {
    width: calc(84 / var(--base-font-size) * var(--default-font-size));
    height: calc(84 / var(--base-font-size) * var(--default-font-size));
    top: 50%;
    transform: translateY(-50%);
  }
  #kv .main-kv-bottom-menu .menu-item a {
    padding: calc(12 / var(--base-font-size) * var(--default-font-size)) calc(12 / var(--base-font-size) * var(--default-font-size)) calc(12 / var(--base-font-size) * var(--default-font-size)) calc(16 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-bottom-menu .menu-item a .icon-wrap {
    width: calc(48 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-bottom-menu .menu-item a .tit {
    font-size: calc(14 / var(--base-font-size) * var(--default-font-size));
    width: calc(100% - 48 / var(--base-font-size) * var(--default-font-size) - 12 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (min-width: 1000px) {
  #kv {
    padding-top: calc(48 / var(--base-font-size) * var(--default-font-size));
  }
}

@media screen and (max-width: 2560px) and (min-width: 1921px) and (max-height: 1600px) and (min-height: 1081px) {
  #kv {
    height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom) - var(--header-height));
  }
  #kv .content-container {
    height: 100%;
  }
  #kv .main-kv-slide {
    height: 100%;
  }
  #kv .main-kv-slide-item {
    height: 100%;
  }
  #kv .main-kv-slide-item .bg {
    padding-top: 0;
    height: 100%;
  }
  #kv .main-kv-menu-item.online .icon {
    width: min(20.74vh, 11.6666666667vw);
  }
  #kv .main-kv-top {
    height: var(--top-height);
  }
  #kv .main-kv-bottom {
    height: var(--bottom-height);
    gap: 0;
  }
  #kv .main-kv-bottom-menu {
    height: calc(100% - 72 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 1920px) and (min-width: 1400px) and (max-height: 1080px) and (min-height: 901px) {
  #kv {
    height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom) - var(--header-height));
  }
  #kv .content-container {
    height: 100%;
  }
  #kv .main-kv-slide {
    height: 100%;
  }
  #kv .main-kv-slide-item {
    height: 100%;
  }
  #kv .main-kv-slide-item .bg {
    padding-top: 0;
    height: 100%;
  }
  #kv .main-kv-menu-item.online .icon {
    width: min(20.74vh, 11.6666666667vw);
  }
  #kv .main-kv-top {
    height: var(--top-height);
  }
  #kv .main-kv-bottom {
    height: var(--bottom-height);
    gap: 0;
  }
  #kv .main-kv-bottom-menu {
    height: calc(100% - 72 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 1399px) and (min-width: 1000px) and (max-height: 900px) and (min-height: 721px) {
  #kv {
    height: calc(var(--vh, 1vh) * 100 - env(safe-area-inset-bottom) - var(--header-height));
  }
  #kv .content-container {
    height: 100%;
  }
  #kv .main-kv-slide {
    height: 100%;
  }
  #kv .main-kv-slide-item {
    height: 100%;
  }
  #kv .main-kv-slide-item .bg {
    padding-top: 0;
    height: 100%;
  }
  #kv .main-kv-menu-item.online .icon {
    width: min(20.74vh, 11.6666666667vw);
  }
  #kv .main-kv-top {
    height: var(--top-height);
  }
  #kv .main-kv-bottom {
    height: var(--bottom-height);
    gap: 0;
  }
  #kv .main-kv-bottom-menu {
    height: calc(100% - 72 / var(--base-font-size) * var(--default-font-size));
  }
  #kv .main-kv-menu-item.online .icon {
    width: min(13.61vh, 11.6666666667vw);
  }
}
#mainPopularCon {
  margin-bottom: var(--spacing-xl);
}

.main-popular-con .tit-box {
  padding-top: calc(48 / var(--base-font-size) * var(--default-font-size));
}
.main-popular-con .tit-box .category {
  margin-top: calc(48 / var(--base-font-size) * var(--default-font-size));
}
@media screen and (max-width: 999px) {
  .main-popular-con .tit-box {
    padding-top: var(--spacing-xl);
  }
  .main-popular-con .tit-box .category {
    margin-top: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  .main-popular-con .tit-box .category {
    margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
}
.main-popular-slide {
  position: relative;
}
.main-popular-slide-wrapper {
  position: relative;
  margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
  margin: calc(24 / var(--base-font-size) * var(--default-font-size)) -0.5rem;
}
.main-popular-slide .swiper-slide {
  padding: 0 0.5rem;
}
.main-popular-slide-item .img-box {
  position: relative;
  border-radius: var(--border-radius-l);
  aspect-ratio: 5/3;
  overflow: hidden;
}
.main-popular-slide-item .img-box .count {
  display: inline-flex;
  padding: calc(6 / var(--base-font-size) * var(--default-font-size)) calc(10 / var(--base-font-size) * var(--default-font-size));
  border-radius: calc(10 / var(--base-font-size) * var(--default-font-size));
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-gray1);
  position: absolute;
  bottom: calc(18 / var(--base-font-size) * var(--default-font-size));
  right: calc(20 / var(--base-font-size) * var(--default-font-size));
}
.main-popular-slide-item .img-box[data-bg-color=orange] {
  background-color: var(--color-pastel-orange);
}
.main-popular-slide-item .img-box[data-bg-color=yellow] {
  background-color: var(--color-pastel-yellow);
}
.main-popular-slide-item .img-box[data-bg-color=blue] {
  background-color: var(--color-pastel-blue);
}
.main-popular-slide-item .img-box[data-bg-color=pink] {
  background-color: var(--color-pastel-pink);
}
.main-popular-slide-item .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.main-popular-slide-item .img-wrap img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.main-popular-slide-item .txt-box {
  margin-top: calc(20 / var(--base-font-size) * var(--default-font-size));
  padding: 0 calc(8 / var(--base-font-size) * var(--default-font-size));
}
.main-popular-slide-item .txt-box .txt {
  margin-top: calc(11 / var(--base-font-size) * var(--default-font-size));
  color: var(--color-gray7);
}
.main-popular-slide-item .txt-box .btn {
  margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
}
.main-popular-slide-item:hover .txt-box .btn::before {
  opacity: 1;
}
.main-popular-slide-arrow .btn-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.1666666667vw;
  top: 0;
  aspect-ratio: 80/280;
}
.main-popular-slide-arrow .btn-wrap.prev {
  right: 100%;
  margin-right: -0.5rem;
}
.main-popular-slide-arrow .btn-wrap.next {
  left: 100%;
  margin-left: -0.5rem;
}
.main-popular-slide-arrow .btn-wrap button {
  display: block;
}
.main-popular-slide-arrow .btn-wrap button svg {
  width: calc(40 / var(--base-font-size) * var(--default-font-size));
  height: calc(40 / var(--base-font-size) * var(--default-font-size));
}
@media screen and (max-width: 999px) {
  .main-popular-slide-wrapper {
    margin-top: calc(16.5 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .img-box .count {
    padding: calc(4.12 / var(--base-font-size) * var(--default-font-size)) calc(8.25 / var(--base-font-size) * var(--default-font-size));
    border-radius: calc(9.625 / var(--base-font-size) * var(--default-font-size));
    right: calc(14.13 / var(--base-font-size) * var(--default-font-size));
    bottom: calc(13.75 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box {
    margin-top: calc(16.5 / var(--base-font-size) * var(--default-font-size));
    padding: 0 calc(5.5 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box .txt {
    margin-top: calc(6.88 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box .btn {
    display: none;
  }
  .main-popular-slide-arrow .btn-wrap {
    width: 4.2042042042vw;
    aspect-ratio: 42/270;
  }
  .main-popular-slide-arrow .btn-wrap button svg {
    width: calc(22 / var(--base-font-size) * var(--default-font-size));
    height: calc(22 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  .main-popular-slide-wrapper {
    margin-top: calc(12 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .img-box .count {
    padding: calc(3 / var(--base-font-size) * var(--default-font-size)) calc(6 / var(--base-font-size) * var(--default-font-size));
    border-radius: calc(7 / var(--base-font-size) * var(--default-font-size));
    right: calc(10.5 / var(--base-font-size) * var(--default-font-size));
    bottom: calc(10 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box {
    margin-top: calc(12 / var(--base-font-size) * var(--default-font-size));
    padding: 0 calc(4 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box .txt {
    margin-top: calc(5 / var(--base-font-size) * var(--default-font-size));
  }
  .main-popular-slide-item .txt-box .btn {
    display: none;
  }
  .main-popular-slide-arrow .btn-wrap {
    width: 4.0100250627vw;
  }
  .main-popular-slide-arrow .btn-wrap button svg {
    width: calc(16 / var(--base-font-size) * var(--default-font-size));
    height: calc(16 / var(--base-font-size) * var(--default-font-size));
  }
}

#mainAgeCon {
  margin-bottom: var(--spacing-xl);
}
#mainAgeCon .main-age-con .tit-box {
  text-align: center;
}
#mainAgeCon .main-age-con-list {
  display: flex;
  gap: 1rem;
  margin-top: calc(32 / var(--base-font-size) * var(--default-font-size));
}
#mainAgeCon .main-age-con-list li {
  flex: 1;
}
#mainAgeCon .main-age-con-list li .img-wrap {
  aspect-ratio: 16/9;
  border-radius: var(--border-radius-s);
  overflow: hidden;
}
#mainAgeCon .main-age-con-list li .txt-box {
  padding: 1rem 0.5rem 0;
}
@media screen and (max-width: 999px) {
  #mainAgeCon .main-age-con-list {
    margin-top: calc(19.25 / var(--base-font-size) * var(--default-font-size));
    flex-wrap: wrap;
    gap: 3.5rem 1.25rem;
  }
  #mainAgeCon .main-age-con-list li {
    flex: auto;
    width: calc(50% - 1.25rem);
  }
  #mainAgeCon .main-age-con-list li .txt-box {
    padding: 1.25rem 0.5rem 0;
  }
}
@media screen and (max-width: 599px) {
  #mainAgeCon .main-age-con-list {
    margin-top: calc(14 / var(--base-font-size) * var(--default-font-size));
    gap: 3.5rem 1.25rem;
  }
}
#mainAgeCon .main-age-tab-container {
  margin-top: calc(48 / var(--base-font-size) * var(--default-font-size));
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-l);
}
#mainAgeCon .main-age-tab-container .img-wrap {
  display: block;
  position: relative;
}
#mainAgeCon .main-age-tab-container .img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
#mainAgeCon .main-age-tab-list {
  display: flex;
  gap: 1rem;
}
#mainAgeCon .main-age-tab-list-box {
  padding: calc(48 / var(--base-font-size) * var(--default-font-size)) 4.1666666667vw 0;
  border-bottom: 3px solid var(--color-gray2);
}
#mainAgeCon .main-age-tab-list li {
  position: relative;
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding-bottom: calc(24 / var(--base-font-size) * var(--default-font-size));
}
#mainAgeCon .main-age-tab-list li .img-wrap {
  aspect-ratio: 2/1;
  border-radius: var(--border-radius-s);
  overflow: hidden;
  background-color: var(--color-grayish2);
  transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mainAgeCon .main-age-tab-list li .tab-tit {
  display: block;
  margin-top: calc(20 / var(--base-font-size) * var(--default-font-size));
  opacity: 0.5;
  transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mainAgeCon .main-age-tab-list li::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 5px;
  transform: translateX(-50%);
  background: var(--color-blue1);
  transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mainAgeCon .main-age-tab-list li.active .tab-tit {
  opacity: 1;
}
#mainAgeCon .main-age-tab-list li.active::before {
  width: 100%;
}
#mainAgeCon .main-age-tab-list li.active[data-color=skyblue] .img-wrap {
  background-color: var(--color-pastel-skyblue);
}
#mainAgeCon .main-age-tab-list li.active[data-color=blue] .img-wrap {
  background-color: var(--color-pastel-blue);
}
#mainAgeCon .main-age-tab-list li.active[data-color=green] .img-wrap {
  background-color: var(--color-pastel-green);
}
#mainAgeCon .main-age-tab-list li.active[data-color=yellow] .img-wrap {
  background-color: var(--color-pastel-yellow);
}
#mainAgeCon .main-age-tab-list li.active[data-color=pink] .img-wrap {
  background-color: var(--color-pastel-pink);
}
#mainAgeCon .main-age-tab-list li.active[data-color=orange] .img-wrap {
  background-color: var(--color-pastel-orange);
}
#mainAgeCon .main-age-tab-list li.active[data-color=gray] .img-wrap {
  background-color: var(--color-pastel-gray);
}
@media screen and (min-width: 1000px) {
  #mainAgeCon .main-age-tab-list li:hover .tab-tit {
    opacity: 1;
  }
  #mainAgeCon .main-age-tab-list li:hover::before {
    width: 100%;
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=skyblue] .img-wrap {
    background-color: var(--color-pastel-skyblue);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=blue] .img-wrap {
    background-color: var(--color-pastel-blue);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=green] .img-wrap {
    background-color: var(--color-pastel-green);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=yellow] .img-wrap {
    background-color: var(--color-pastel-yellow);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=pink] .img-wrap {
    background-color: var(--color-pastel-pink);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=orange] .img-wrap {
    background-color: var(--color-pastel-orange);
  }
  #mainAgeCon .main-age-tab-list li:hover[data-color=gray] .img-wrap {
    background-color: var(--color-pastel-gray);
  }
}
#mainAgeCon .main-age-tab-con .con-box {
  padding: calc(58 / var(--base-font-size) * var(--default-font-size)) 4.1666666667vw calc(80 / var(--base-font-size) * var(--default-font-size));
}
#mainAgeCon .main-age-tab-con .con-box .tit {
  font-weight: 500;
}
#mainAgeCon .main-age-tab-con .con-box .hashtag {
  color: var(--color-gray6);
}
#mainAgeCon .main-age-tab-con .con-box .hashtag::before {
  content: "#";
}
#mainAgeCon .main-age-tab-con .con-box .hashtag-box {
  display: flex;
  gap: calc(6 / var(--base-font-size) * var(--default-font-size));
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
@media screen and (max-width: 999px) {
  #mainAgeCon .main-age-tab-container {
    margin-top: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list {
    gap: 1.25rem;
    width: calc(913 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list-box {
    padding: 0;
    border-bottom: 0;
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap {
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    padding: calc(33 / var(--base-font-size) * var(--default-font-size)) 0 0 calc(33 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap::-webkit-scrollbar {
    display: none;
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap .list-inner {
    padding-bottom: 4px;
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap::before {
    content: "";
    width: calc(946 / var(--base-font-size) * var(--default-font-size));
    height: 2px;
    background-color: var(--color-gray2);
    position: absolute;
    left: 0;
    bottom: 5px;
  }
  #mainAgeCon .main-age-tab-list li {
    width: calc(165 / var(--base-font-size) * var(--default-font-size));
    flex: none;
    padding-bottom: calc(16.5 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list li .tab-tit {
    margin-top: calc(11 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list li::before {
    height: 4px;
    bottom: 0px;
  }
  #mainAgeCon .main-age-tab-con .con-box {
    padding: calc(38 / var(--base-font-size) * var(--default-font-size)) calc(33 / var(--base-font-size) * var(--default-font-size)) calc(44 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-con .con-box .hashtag-box {
    gap: calc(2 / var(--base-font-size) * var(--default-font-size)) calc(5.5 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  #mainAgeCon .main-age-tab-container {
    margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list {
    gap: 1.25rem;
    width: calc(664 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap {
    padding: calc(24 / var(--base-font-size) * var(--default-font-size)) 0 0 calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list-box .list-wrap::before {
    width: calc(688 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list li {
    width: calc(120 / var(--base-font-size) * var(--default-font-size));
    padding-bottom: calc(12 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-list li .tab-tit {
    margin-top: calc(8 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-con .con-box {
    padding: calc(28 / var(--base-font-size) * var(--default-font-size)) calc(24 / var(--base-font-size) * var(--default-font-size)) calc(32 / var(--base-font-size) * var(--default-font-size));
  }
  #mainAgeCon .main-age-tab-con .con-box .hashtag-box {
    gap: calc(2 / var(--base-font-size) * var(--default-font-size)) calc(4 / var(--base-font-size) * var(--default-font-size));
  }
}

.cm-tab-con {
  display: none;
}
.cm-tab-con.active {
  display: block;
}

#mainNewsCon {
  margin-bottom: var(--spacing-xl);
}
#mainNewsCon .main-news-container {
  margin-top: calc(48 / var(--base-font-size) * var(--default-font-size));
}
#mainNewsCon .main-news-container .category::before {
  display: none;
}
#mainNewsCon .main-news-container .main-notice-con {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--base-font-size) * var(--default-font-size));
}
#mainNewsCon .main-news-container .main-notice-con-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}
#mainNewsCon .main-news-container .main-cardnews-con-inner {
  display: flex;
  flex-direction: column;
  gap: calc(24 / var(--base-font-size) * var(--default-font-size));
}
#mainNewsCon .main-news-container .card-news-box {
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-l);
  padding: 2.5vw;
}
#mainNewsCon .main-news-container .card-news-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
#mainNewsCon .main-news-container .card-news-list li {
  width: calc(33.33% - 0.75rem);
}
#mainNewsCon .main-news-container .card-news-list li .img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-m);
  overflow: hidden;
}
#mainNewsCon .main-news-container .card-news-list li .img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#mainNewsCon .main-news-container .notice-box {
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-l);
  padding: 2.5vw;
  flex: 4.5;
}
#mainNewsCon .main-news-container .notice-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#mainNewsCon .main-news-container .notice-list a {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}
#mainNewsCon .main-news-container .notice-list a .txt-box .tit {
  font-weight: 500;
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#mainNewsCon .main-news-container .notice-list a .txt-box .date {
  display: block;
  margin-top: calc(12 / var(--base-font-size) * var(--default-font-size));
  color: var(--color-gray7);
}
#mainNewsCon .main-news-container .sns-box {
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-l);
  flex: 1;
}
#mainNewsCon .main-news-container .sns-list {
  display: flex;
  height: 100%;
}
#mainNewsCon .main-news-container .sns-list li {
  flex: 1;
  border-left: 1px solid var(--color-gray4);
  height: 100%;
}
#mainNewsCon .main-news-container .sns-list li:first-child {
  border-left: 0;
}
#mainNewsCon .main-news-container .sns-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(10 / var(--base-font-size) * var(--default-font-size));
}
#mainNewsCon .main-news-container .sns-list li a .icon {
  display: block;
  width: calc(36 / var(--base-font-size) * var(--default-font-size));
  height: calc(36 / var(--base-font-size) * var(--default-font-size));
}
#mainNewsCon .main-news-container .sns-list li a .icon img {
  width: 100%;
  max-width: none;
}
#mainNewsCon .main-news-container .sns-list li a .txt {
  font-weight: 500;
}
@media screen and (max-width: 1399px) {
  #mainNewsCon .main-news-container .notice-list li:last-child {
    display: none;
  }
}
@media screen and (max-width: 1199px) {
  #mainNewsCon .main-news-container .card-news-list {
    gap: calc(8.3 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .card-news-list li {
    width: calc(33.33% - 8.3 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-box {
    flex: 2.8;
  }
  #mainNewsCon .main-news-container .notice-list li:last-child {
    display: none;
  }
  #mainNewsCon .main-news-container .notice-list li a {
    padding-bottom: 0;
  }
  #mainNewsCon .main-news-container .sns-list li a {
    flex-direction: column;
  }
}
@media screen and (max-width: 999px) {
  #mainNewsCon .main-news-container {
    margin-top: calc(33 / var(--base-font-size) * var(--default-font-size));
    gap: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .main-cardnews-con-inner {
    gap: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .main-notice-con {
    gap: calc(16.5 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .main-notice-con-inner {
    gap: 1.25rem;
  }
  #mainNewsCon .main-news-container .card-news-box {
    padding: calc(33 / var(--base-font-size) * var(--default-font-size));
    flex: auto;
  }
  #mainNewsCon .main-news-container .card-news-list {
    gap: 1.25rem;
  }
  #mainNewsCon .main-news-container .card-news-list li {
    width: calc(33.33% - 1.25rem);
  }
  #mainNewsCon .main-news-container .notice-box {
    padding: calc(33 / var(--base-font-size) * var(--default-font-size));
    flex: auto;
  }
  #mainNewsCon .main-news-container .notice-list {
    gap: calc(5.5 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list li:last-child {
    display: block;
  }
  #mainNewsCon .main-news-container .notice-list li a {
    padding: calc(11 / var(--base-font-size) * var(--default-font-size)) 0;
    gap: calc(8.25 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list li a .txt-box .date {
    margin-top: calc(8.25 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list li a .tag-box .tag {
    padding: calc(5.5 / var(--base-font-size) * var(--default-font-size)) calc(11 / var(--base-font-size) * var(--default-font-size));
    font-size: calc(16.5 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .sns-box {
    height: calc(104 / var(--base-font-size) * var(--default-font-size));
    flex: auto;
  }
  #mainNewsCon .main-news-container .sns-list li a {
    gap: calc(7 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .sns-list li a .icon {
    width: calc(33 / var(--base-font-size) * var(--default-font-size));
    height: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  #mainNewsCon .main-news-container {
    margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
    gap: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .main-cardnews-con-inner {
    gap: calc(12 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .card-news-box {
    padding: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .card-news-list li {
    width: calc(50% - 0.625rem);
  }
  #mainNewsCon .main-news-container .notice-box {
    padding: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list {
    gap: calc(4 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list li a {
    padding: calc(8 / var(--base-font-size) * var(--default-font-size)) 0;
  }
  #mainNewsCon .main-news-container .notice-list li a .txt-box .date {
    margin-top: calc(6 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .notice-list li a .tag-box .tag {
    padding: calc(4 / var(--base-font-size) * var(--default-font-size)) calc(8 / var(--base-font-size) * var(--default-font-size));
    font-size: calc(12 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .sns-box {
    height: calc(76 / var(--base-font-size) * var(--default-font-size));
    flex: auto;
  }
  #mainNewsCon .main-news-container .sns-list li a {
    gap: calc(4 / var(--base-font-size) * var(--default-font-size));
  }
  #mainNewsCon .main-news-container .sns-list li a .icon {
    width: calc(24 / var(--base-font-size) * var(--default-font-size));
    height: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
}

#mainPartnerCon {
  padding-bottom: var(--spacing-xl);
  overflow: hidden;
}
#mainPartnerCon .main-partner-tit-box {
  display: flex;
  justify-content: space-between;
}
#mainPartnerCon .main-partner-slide {
  margin: 0 -0.5rem;
}
#mainPartnerCon .main-partner-slide-box {
  margin-top: calc(48 / var(--base-font-size) * var(--default-font-size));
}
#mainPartnerCon .main-partner-slide-arrow {
  display: flex;
  gap: 0.5rem;
}
#mainPartnerCon .main-partner-slide-arrow .btn-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
#mainPartnerCon .main-partner-slide .swiper-wrapper {
  transition-timing-function: linear;
}
#mainPartnerCon .main-partner-slide .swiper-slide {
  padding: 0 0.5rem;
}
#mainPartnerCon .main-partner-slide a {
  display: block;
  border: 1px solid var(--color-gray4);
  border-radius: var(--border-radius-m);
}
#mainPartnerCon .main-partner-slide a .img-wrap {
  position: relative;
  display: block;
  padding: calc(43 / var(--base-font-size) * var(--default-font-size)) calc(41 / var(--base-font-size) * var(--default-font-size));
}
#mainPartnerCon .main-partner-slide a .img-wrap img {
  max-width: none;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  #mainPartnerCon .main-partner-slide a {
    transition: border 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  #mainPartnerCon .main-partner-slide a:hover {
    border-color: var(--color-gray8);
  }
}
@media screen and (max-width: 999px) {
  #mainPartnerCon .main-partner-slide-box {
    margin-top: calc(33 / var(--base-font-size) * var(--default-font-size));
  }
  #mainPartnerCon .main-partner-slide-arrow .btn-wrap button::before {
    display: none;
  }
  #mainPartnerCon .main-partner-slide a .img-wrap {
    padding: calc(36.64 / var(--base-font-size) * var(--default-font-size));
  }
}
@media screen and (max-width: 599px) {
  #mainPartnerCon .main-partner-slide-box {
    margin-top: calc(24 / var(--base-font-size) * var(--default-font-size));
  }
  #mainPartnerCon .main-partner-slide a .img-wrap {
    padding: 26.65px;
  }
}

#bottomBar {
  display: none;
}
@media screen and (max-width: 999px) {
  #bottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: block;
    width: 100%;
    padding: 0 0.75rem 0.75rem;
  }
  #bottomBar .bottom-bar-con {
    border-radius: var(--border-radius-l);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.75rem 2.5rem 1.75rem 1.75rem;
  }
  #bottomBar .bottom-bar-con .inner-box {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
  }
  #bottomBar .bottom-bar-con .inner-box .img-box {
    width: 5.5rem;
  }
  #bottomBar .bottom-bar-con .inner-box .img-box span {
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
  }
  #bottomBar .bottom-bar-con .inner-box .img-box span img {
    max-width: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box {
    width: calc(100% - 5.5rem - 4rem - 1.5rem - 1.5rem);
    color: var(--color-gray1);
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box .desc {
    opacity: 0.8;
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box .link-box {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box .link-box .txt {
    display: block;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box .link-box .go-btn {
    display: inline-flex;
    align-items: center;
  }
  #bottomBar .bottom-bar-con .inner-box .txt-box .link-box .go-btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  #bottomBar .bottom-bar-con .inner-box .btn-box button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-gray1);
  }
  #bottomBar .bottom-bar-con .inner-box .btn-box button svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  #bottomBar[data-state=hide] {
    display: none;
  }
}

@media screen and (max-width: 999px) and (min-width: 600px) {
  #main .category {
    --base-font-size: 8;
  }
}
@media screen and (max-width: 999px) {
  #main .category {
    border-radius: calc(7 / var(--base-font-size) * var(--default-font-size));
  }
}

@media screen and (min-width: 1000px) {
  [data-hover=list] [data-hover=item] {
    transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  [data-hover=list].active [data-hover=item]:not(.hover) {
    opacity: 0.4;
  }
}

@media screen and (min-width: 1000px) {
  [data-hover=zoomIn] [data-zoomIn=target] img {
    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  [data-hover=zoomIn]:hover [data-zoomIn=target] img {
    transform: scale(1.1);
  }
}


/* 24-04-24 Main START ------------------------------------------*/

/* 전체메뉴 아이콘 크기 안맞음 변경요망 */

:root {
  /* root color */
  --primary-color : #0c5bca;
  /* --point-color : #ff3; */
  font-size: 10px;
}

/* common [S] */
.hidden {font-size: 0; display: none;}
[class*="equal-list"] {display: flex;}
[class*="equal-list"] .items {align-self: center;}

/* common [E] */

/* header [S] */
#skip-nav {position: relative; padding: 0;}
#skip-nav a {position: absolute; top:-150px; left:0; color: #fff;}

#header { position: fixed; background: transparent; z-index: 99;   width: 100%; transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#header .header {padding: 0; border-bottom: 0 none; padding-top: calc(env(safe-area-inset-top)+ 10px); top:-4px;}
#header .header-wrapper {  position: fixed;  top: 0;  left: 0;}
#header .header .logo {position: relative;  z-index: 2; display: block; width:auto}
#header .header .logo img {  max-width: 144px;}
#header .header-units {  position: relative;  z-index: 2;}
#header .header-units-list {  display: flex;  align-items: center;}
#header .header-units-list li {  display: flex;  justify-items: center;}
#header .header-units-list li a,
#header .header-units-list li button {  display: inline-flex; align-items: center;}
#header .header-units-list li a svg,
#header .header-units-list li button svg {  width: 100%;  height: auto;}
#header .header-units-list li.user a .txt {  display: none;}
#header .header-inner { display: flex;justify-content: space-between;  align-items: center; height: 68px;}
#header h1 {width: 144px;}

#header .header-units-list {gap: 12px;}
#header .header-units-list li.user a {width:auto; gap: 0px;}
/* 2024.12.19 통합검색 추가로인한 수정 (height:32px -> height:24px) */
#header .header-units-list li.user a img {height:24px;}
#header .content-container {padding:0 20px;}
.users {font-size: 12px;font-weight: 700; background:#159EDE; width:auto !important; height: 30px; min-width: 32px; padding:8px 10px; border-radius: 10px; color: #fff; margin-top: -2px;}
.users.active {background: #ebf2ff; color: #010101;}
.users.active span {color: #0076C9; font-weight: 700; margin-right: 1px;}

/* header [E] */

/* Contents [S] */

/* main */
.main.wrapper {padding-bottom: 77px; min-height:100vh;}
.main , .main .header, .main .grp_gravity.fixed, body .inner_gravity, body .inner_gravity:before{background-color: #fff;}
.main {background:linear-gradient(#ffffff, #EBF2FF 62%); overflow: hidden;}

.main .logout {display: block;}
.main .login {display: none;}
.main.active .logout {display: none;}
.main.active .login {display: block;}

.main .users  {display: inline-flex !important;}
.main .users.active {display: none !important;}
.main.active .users  {display: none !important;}
.main.active .users.active {display: inline-flex !important;}

.wrapper.main #page-content {padding-bottom: 40px;}

/* index */
.inner-padding {padding: 0 16px;}
.inner-padding.top, .inner-padding > .top {padding-top:32px !important}
.shadow-box {box-shadow: 0 0 8px rgba(0, 0, 0, 0.03); min-height: 100px; border:1px #d2e1f6; border-radius: 20px;background: #fff; margin: 11px 0 0;}
.txtBlue03 {color: #0076C9 !important;}

/* 그림자박스 */
.shadow-box .txt {font-size: 19px; padding:0 64px; text-align: center; line-height: 1.4em;}
.shadow-box .txt span {font-weight: 700;}

/* title */
.title {
	font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem;
}

/* button */
.buttons .btn_comm.arrow:after {border: 1px transparent solid; width: 8px; height: 8px; border-right-color: #707787; border-bottom-color: #707787; display: block; position: absolute; content:''; transform: rotate(-45deg);}

/* 배너 - 서비스 */
.equal-list.service {justify-content: space-between; padding-top: 25px; align-items: center;}
.equal-list.service .timer {font-size: 13px;align-self: center;color: #777;margin-right: 8px; display: flex;justify-content: center; gap: 2px;}
.equal-list.service .timer::before {content: '';display: block;width:14px;height:14px;background: url(../../images/tot/timer-404d6a98fd0bd6d599fc109326497bc4.png) no-repeat 0 0;margin-top: 2.5px;}
.equal-list.service.none {padding-top:0;}
.equal-list.service dt {font-size: 17px; font-weight: 700;}
.equal-list.service dt .txt {display: block; font-size: 13px; color: #707887; font-weight: 500; margin-top: 3px; /*line-height: 1; word-break: break-all;*/}
.equal-list.service dd .word1 {width:86px;}
.equal-list.service dd .word2 {width:58px;}
.equal-list.service dd .word3 {width:62px; margin-top: -16px;;}
.equal-list.service.none dd {min-width: 60px;}
.equal-list.service.none .buttons {margin-top: 8px;}
.equal-list.service.none .buttons .btn_comm {background: #f1f1f1; border-radius: 8px; height:26px; width:auto; padding:5px 21px 5px 10px; line-height: 1;}
.equal-list.service.none .buttons .btn_comm span {font-size: 13px; color: #707787; line-height: 1; position: relative; top:-.5px;}
.equal-list.service.none .buttons .btn_comm.arrow::after {content:''; top:8px; right:11px;}


/* login */
.bg0 .login .equal-list.service {flex-direction: column; align-items: flex-start; padding:40px 17px 0;}
.bg0 .login .equal-list.service .timer {font-size: 13px;align-self: flex-start; color: #002169;margin-right: 8px; display: flex;justify-content: center; gap: 2px; margin-top: 16px;}
.bg0 .login .equal-list.service .timer::before {content: '';display: block;width:14px;height:12px;background: url(../../images/tot/timer-404d6a98fd0bd6d599fc109326497bc4.png) no-repeat 0 0;margin-top: 3.5px; background-size: contain;}
.bg0 .login .equal-list.service dt {font-size: 17px; font-weight: 400; color: #333;}
.bg0 .login .equal-list.service dt .txt {display: block; font-size: 13px; color: #707887; font-weight: 500; margin-top: 3px;}
.bg0 .login .equal-list.service .title {font-size: 20px; line-height: 1.2em;}

.bg0 .login .equal-list.service.another {flex-direction: row; justify-content:space-between; position: relative;padding-top: 0px; padding-bottom: 3px; height: auto; padding-right:0; padding-left:0;}
.bg0 .login .equal-list.service.another .overtime {align-self: center;}
.bg0 .login .equal-list.service.another .overtime p {font-size: 14px; color: #666; text-align: center;}

/* 배너 - 서비스 another */
.equal-list.service.another {justify-content:space-around; position: relative; padding-bottom: 24px;}
.equal-list.service.another dl {display: flex; flex-direction: column; width:auto; min-width: 100px;}
.equal-list.service.another dl + dl dd {margin-left: 5px;}
.equal-list.service.another dl:first-child::before {content: ''; display: block; position: absolute; bottom:8px; left:50%; width:1px; height:14px; background: rgba(17, 17, 17, 0.2);}
.equal-list.service.another dt {font-size: 15px; color: #555; font-weight: 400; line-height: 17px; text-align: center;}
.equal-list.service.another dd {align-self: center; margin-top: 15px;     display: flex; align-items: flex-end; margin-left: -20px;}
.equal-list.service.another dd .txtBlue03 {font-size: 24px; font-weight: 700; line-height: 28px; position: relative; margin-right: 2px; margin-left: 4px;}
.equal-list.service.another dd .txtBlue03::after {content: ''; width:calc(100% - 0px); height:1px; background: #0076c9; position: absolute; bottom: 0; left:0px;}
.equal-list.service.another dd .badge { width:27px; position: relative; top:-15px;}

/* 배너 - 추천금융생활 */
.equal-list.banner { align-items: center; justify-content: center; flex-direction: column-reverse; height: 100%;}
.equal-list.banner dt {line-height: 1em !important;  font-size: 13px; display: inline-flex; height: 100%; align-items: center;text-wrap: nowrap; }
.equal-list.banner dd img {margin-bottom:6px; height:24px;}

/* 배너 - 카드슬라이드 */
.equal-list[class*="type"] {flex-direction: column-reverse; align-items: center; justify-content: center; }
.equal-list[class*="type"] dt {text-align: center;}
.equal-list[class*="type"] .txts {color: #111; letter-spacing: -.6px;}
.equal-list[class*="type"] .tit {font-size: 24px; font-weight: 700;}
.equal-list[class*="type"] .txt {font-size: 15px; font-weight: 300; margin-top: 8px;}
.equal-list[class*="type"] .buttons {margin-top: 16px;}
.equal-list[class*="type"] .buttons .btn_comm {border-radius: 100px; padding: 8px 24px; width: auto;}
.equal-list[class*="type"] .buttons .btn_comm.full span {font-size: 14px; font-weight: 700; letter-spacing: -.6px;}
.equal-list[class*="type"] dd {position: relative; text-align: center; width: 100%;}

/* 메인슬라이드 애니메이션 */
.login-bg-img1 {position: absolute; top:103px; right:14px; z-index: -1;}
.login-bg-img1 img {height:157px;}

.main1_img {margin: 15px auto; width:185px;}
.main1_img1 { width:185px; position: absolute; left:50%; margin-left: -96px; top:80px;}
.ani-1 .main1_img {animation: main1_img 2s 2; -webkit-animation: main1_img 2s 2;}
.ani-1 .main1_img1 {animation: main1_img1 2s 2; -webkit-animation: main1_img1 2s 2;}
.main2_img {margin: 15px auto 32px; height:104px;}
.main2_img1 {position: absolute; top:0; left:50%; margin-left: -100px; top:33px; z-index: -1; transform: rotate(5deg); width:220px;}
.ani-1 .main2_img {animation: main2_img 2s 2; -webkit-animation:main2_img 2s 2;}
.ani-1 .main2_img1 {animation: main2_img1 2s 2;-webkit-animation: main2_img1 2s 2;}

.width {width:auto !important;}
.main3_img {margin: 13px auto 4px; height:135px;}
.main3_img1 {position: absolute; top:88px; left:-23px; height:26px;}
.main3_img2 {position: absolute; top:93px; left:92px; z-index: -1;height: 20.5px;}
.main3_img3 {position: absolute; top:138px; left:0px; height:67px;}
.main3_img4 {position: absolute; top:183px; left:123px; height:14px;}
.ani-1 .main3_img {animation: main3_img 2s 1; -webkit-animation: main3_img 2s 1;}
.ani-1 .main3_img1 {animation: main3_img1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2; -webkit-animation: main3_img1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2;}
.ani-1 .main3_img2 {animation: main3_img2 1s linear 2; -webkit-animation:  main3_img2 1s linear 2;}
.ani-1 .main3_img3 {animation: main3_img3 2s linear 2; -webkit-animation:  main3_img3 1s linear 2;}
.ani-1 .main3_img4 {animation: main3_img4 1.5s linear 2; -webkit-animation: main3_img4 1.5s linear 2;}

.main4_img {height:88px; margin: 55px auto 19px; }
.main4_img1 {height:44px;position: absolute; top:107px; left:50%; margin-left: -57px;}
.main4_img2 {height:18px;position: absolute; top:153px; left:50%; margin-left: -83px;}
.main4_img3 {height:19px;position: absolute; top:90px; left:50%; margin-left: 38px;}

.ani-1 .main4_img1 {animation: main4_img1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;}
.ani-1 .main4_img2 {animation: main4_img2 1s linear; }
.ani-1 .main4_img3 {animation: main4_img3 2s both; }

/* 로고 */
/* .logo1 {} */
/* .logo1.bg {background: linear-gradient(#e1ecff 0%, #dfecfe 100%); width:146px; margin: 0 auto;} */
.logo1 img {margin:19px auto 0; height:43px;}

@keyframes main1_img{
  0% {transform:translateY(12%); -webkit-transform: translateY(12%);}
  50% {transform:translateY(0%); -webkit-transform: translateY(0%);}
  70% {transform:translateY(-12%); -webkit-transform: translateY(-12%);}
  100% {transform:translateY(0%); -webkit-transform: translateY(0%);}
}
@keyframes main1_img1{
  0% {transform:scale(1); -webkit-transform: scale(1);}
  50% {transform:scale(1.1); -webkit-transform: scale(1.1);}
  100% {transform:scale(0); -webkit-transform: scale(0);}
}

@keyframes main2_img{
  0% {transform:scale(1); -webkit-transform: scale(1);}
  35% {transform:scale(.5);-webkit-transform: scale(.5);}
  100% {transform:scale(1);-webkit-transform: scale(1);;}
}
@keyframes main2_img1{
  0% {transform:scale(0);-webkit-transform: scale(0);}
  50% {transform:scale(1);-webkit-transform: scale(1);}
  100% {transform:scale(0);-webkit-transform: scale(0);}
}

@keyframes main3_img{
  0% {transform:scale(1) translateX(30%); -webkit-transform:scale(1) translateX(30%);}
  50% {transform:scale(.7); -webkit-transform:scale(.7);}
  100% {transform:scale(1); -webkit-transform:scale(1);}
}
@keyframes main3_img1{
  0% {transform:translateY(-150px); opacity: 0;  -webkit-transform:translateY(-150px);}
  100% {transform:translateY(0px); opacity: 1; -webkit-transform:translateY(0px);}
}
@keyframes main3_img2{
  0% {transform:scale(0); -webkit-transform:scale(0)}
  50% {transform:scale(1); -webkit-transform:scale(1)}
  100% {transform:scale(0); -webkit-transform:scale(0);}
}
@keyframes main3_img3{
  0% {transform:translateY(10px) rotate(-100deg);-webkit-transform:translateY(10px) rotate(-100deg);}
  80% {transform:translateY(0px) rotate(0deg);-webkit-transform:translateY(0px) rotate(0deg);}
  100% {transform:translateY(0px) rotate(0deg);-webkit-transform:translateY(0px) rotate(0deg);}
}
@keyframes main3_img4{
  0% {transform:scale(0); -webkit-transform:scale(0)}
  50% {transform:Scale(1); -webkit-transform:scale(1)}
  100% {transform:Scale(0); -webkit-transform:scale(0)}
}

@keyframes main4_img{
  0% {transform: translateX(0%);}
  100% {transform:translateX(-30%);}
}
@keyframes main4_img1{
  0% {transform:rotate(0deg);}
  10% {transform:rotate(45deg);}
  20% {transform:rotate(-45deg);}
  30% {transform:rotate(30deg);}
  40% {transform:rotate(-30deg);}
  50% {transform:rotate(10deg);}
  60% {transform:rotate(-10deg);}
  70% {transform:rotate(0deg);}
  100% {transform:rotate(0deg);}
}
@keyframes main4_img2{
  0% {transform: translateY(0px); opacity: 1;}
  100% {transform: translateY(-100px); opacity: 0;}
}
@keyframes main4_img3{
  0% {transform: translateY(-100px);}
  100% {transform: translateY(0px);}

}

/* 배너 - 카드슬라이드 로그인후 */
.login .buttons {text-align: center; margin-top: 20px;}
.login .buttons .btn_comm {border-radius: 100px; background: #159EDE; padding: 8px 24px; width: auto;}
.login .buttons .btn_comm span {font-size: 14px; font-weight: 700;}
.buttons .btn_comm.type1 {background: #0d6fb8;}
.buttons .btn_comm.type2 {background: #b975d2;}
.buttons .btn_comm.type3 {background: #5b89ff;}

/* [TOT_01000001] */
.briefing.wrapper {padding-bottom: 0px; min-height:100vh;}
.briefing , .briefing .header, .briefing .grp_gravity.fixed, body .inner_gravity, body .inner_gravity:before, .briefing.wrapper .submit-btn {background-color: #fff;}
body .inner_gravity:before,.briefing.wrapper .submit-btn:before,.briefing #header {background: #fff;}
.briefing .container {padding-top:68px;}
.briefing .block-span {padding: 0 24px; margin-top: 16px;}
.briefing .block-span > span {font-weight: 600; font-size: 22px; color: #293042; display: block; line-height: 1.4em; word-break: break-all;}
.briefing .block-span.add {position: relative; z-index: 10;}

.briefing .simple_notice {padding:32px; background: #f4f7fd; margin: 40px 16px 0; /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.03)*/; border-radius: 12px;}
.briefing .simple_notice .items {margin:26px 0;}
.briefing .simple_notice .items:first-child{margin-top:0;}
.briefing .simple_notice .items:last-child {margin-bottom:0;}
.briefing .simple_notice .equal-list {flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
.briefing .simple_notice .equal-list dt {font-size: 16px; font-weight: 400; line-height: 1.4em; color: #333; letter-spacing: -1px; word-break: break-all;}
.briefing .simple_notice .equal-list dd img {min-width: 28px;}

.briefing .simple_notice .equal-list .temp1 img {height: 31.5px;}
.briefing .simple_notice .equal-list .temp2 img {height:34px;}
.briefing .simple_notice .equal-list .temp3 img {height:32.5px;}

.add_txt {margin-top: 12px;}
.add_txt > span {font-size: 14px; color: #0c58ca;}
.add_txt .totTooltip__body {background-color: #fff; }
.add_txt .totTooltip__body .txtBlue02 {font-weight: 700;}


/* swiper - 추천금융생활 */
.defalut-swiper.swiper-container.recommend {
	margin: .8rem 1.6rem 0 -1.6rem;
}
.defalut-swiper.swiper-container.recommend .swiper-slide {width:auto; height: auto; min-width:90px; min-height:72px; border-radius: 12px; padding: 8px 10px; text-align: center; box-shadow: 0 0 8px rgba(0, 0, 0, 0.03); overflow-y: scroll; box-shadow: none}

/* swiper - 서비스 */
.m0 {margin: 0 !important;}
.defalut-swiper.swiper-container.service { margin-top: 8px; /* margin-right:16px;*/}
.defalut-swiper.swiper-container.service .swiper-wrapper {flex-direction: column; gap:16px;}
.defalut-swiper.swiper-container.service .swiper-slide {min-width:auto; min-height:100px;  border-radius: 16px; width:100%; padding-left:24px; padding-right:24px; height: auto; display: flex; justify-content: center; flex-direction: column;box-shadow: 0 0 8px rgba(0, 0, 0, 0.03);overflow-y: scroll;}


/* swiper - 공지사항(notice) */
.notice-swiper.swiper-container  {
	position: relative;
}
.notice-swiper.defalut-swiper.swiper-container .swiper-slide {
	width: 100% !important;
	padding: 0;
}
.notice-swiper.swiper-container .swiper-slide .link {
	display: flex;
    justify-content: space-between;
	align-items: center;
	width: 100%; height: 62px;
	background-color: #FFEB9A;
	padding: 1.2rem 2.4rem;
}
.notice-swiper.swiper-container .swiper-slide.bg2 .link {background-color: #C2E5F5;}
.notice-swiper.swiper-container .swiper-slide.bg3 .link {background-color: #B3E9B2;}
.notice-swiper.swiper-container .swiper-slide .link .txt-box {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.notice-swiper.swiper-container .swiper-slide .link .txt-box .tit {
	font-size: 1.5rem;
	font-weight: 500;
	color: #4e4008;
}
.notice-swiper.swiper-container .swiper-slide .link .txt-box .txt {
	font-size: 1.2rem;
	font-weight: 300;
	color: #111;
}
.notice-swiper.swiper-container .swiper-pagination-fraction {
	position: absolute;
	left: auto; top: auto; right: 1.6rem; bottom: .6rem;
	background-color: rgba(0, 0, 0, .7);
	border-radius: 16rem;
	padding: .4rem .8rem;
	width: 3.6rem;
	display: flex;
	gap: .2rem;
	font-size: .9rem;
	color: #fff;
    justify-content: center;
}


/* swiper - index */
.index-swiper.swiper-container .swiper-wrapper {align-items: center;}
.index-swiper.swiper-container .swiper-slide {padding:0; border-radius:24px; background: transparent;}
.index-swiper.swiper-container .swiper-slide .link { height: 403px; /*background: #ebebec;*/ border-radius: 24px; transform: scale(0.9);transition: all 250ms linear; padding:0; overflow-y: scroll;}
.index-swiper.swiper-container .swiper-slide .link {padding:13px 0; display: block;}
.index-swiper.swiper-container .swiper-slide .link{background: #d8e4fc;}
.index-swiper.swiper-container .swiper-slide-active .link {transform: scale(1); transition: all 250ms linear;}
.index-swiper.swiper-container .swiper-slide.bg1 .link {background: linear-gradient(#f2Efff 0%, #d4c9fd 100%);}
.index-swiper.swiper-container .swiper-slide.bg2 .link {background: linear-gradient(#eaeeff 0%, #a4e2fd 100%);}
.index-swiper.swiper-container .swiper-slide.bg3 .link {background: linear-gradient(#ddf9ff 0%, #8ee1fb 100%);}
.index-swiper.swiper-container .swiper-slide.bg0 .link {background: linear-gradient(#B3ECFC 0%, #CFFFE8 100%);}
.active .index-swiper.swiper-container .swiper-slide.bg0 .link {background: #d8e4fc;}
.index-swiper.swiper-container .swiper-slide.bg2 .link .equal-list dd {width:100%;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:var(--swiper-pagination-bottom,36px);}

.thumbSwiper {position: relative; margin:40px 24px 0; overflow: hidden;}
.thumbSwiper .swiper-slide {font-size: 17px; color:#707787; width: auto !important; word-break: break-all; max-width: 100px;}
.thumbSwiper .swiper-slide-thumb-active {color: #0C58CA; font-weight: 700;}
.PhotoSwiper {position: relative; margin: 14px 24px 0; overflow: hidden; padding-bottom: 30px;}
.PhotoSwiper .slide-arrow {position: relative;}
.PhotoSwiper .swiper-horizontal>.swiper-pagination-bullets,
.PhotoSwiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.PhotoSwiper .swiper-pagination-custom, .swiper-pagination-fraction {bottom:5.5px;}
.PhotoSwiper .swiper-pagination-bullet { width:4px; height:4px; background: #c8d3de; transition: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1;}
.PhotoSwiper .swiper-pagination-bullet-active {width:10px; background: #0c58ca;}
.PhotoSwiper .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.PhotoSwiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 1.5px;}
.PhotoSwiper .swiper-slide {width:76% !important;}
.PhotoSwiper .swiper-slide-bg {padding: 22px; background: #fff; border-radius: 0px; display: flex; flex-direction: column; height: 165px; border-radius: 12px; justify-content: space-between; position: relative;overflow-y: scroll !important;}
.PhotoSwiper .swiper-slide-bg .swiper-slide-bg-contents { line-height: 1.4em; margin-right: 45px; font-weight: 500; word-break: keep-all; letter-spacing: -.5px;word-break: auto-phrase !important;}
.PhotoSwiper .swiper-slide-bg.one {background: #EBEDFF;}
.PhotoSwiper .swiper-slide-bg.one .swiper-slide-bg-contents {color: #13216A;}
.PhotoSwiper .swiper-slide-bg.one img {height:84px;}
.PhotoSwiper .swiper-slide-bg.two {background: #FFFBEE;}
.PhotoSwiper .swiper-slide-bg.two .swiper-slide-bg-contents {color: #8c762f;}
.PhotoSwiper .swiper-slide-bg.two img {height:80px;}
.PhotoSwiper .swiper-slide-bg.three {background: #EDF8F0;}
.PhotoSwiper .swiper-slide-bg.three .swiper-slide-bg-contents {color: #548561;}
.PhotoSwiper .swiper-slide-bg .imgs {position: absolute; bottom:20px; right:24px;}
.PhotoSwiper .swiper-slide-bg.three img {height:73px;}
.PhotoSwiper .swiper-slide-bg .imgs.another {bottom:12px;}
.PhotoSwiper .play-pause-box {position: absolute; bottom: 2px; left: 50%; margin-left: 18px; z-index: 999;}
.PhotoSwiper .play-pause-box .active {display: block;}
.PhotoSwiper .play-pause-box button {display: none;}

.briefing p {font-size: 14px;}

[class*="_icon"] {position: absolute; top:50%; left:50%; font-size: 0;}

.temp1, .temp2, .temp3 {min-width: 47px;}

.temp1 img {display: block; width:36px; height: 36px; margin-top: 9px;}
[class*="temp_icon"]{background: url(../../images/tot/@temp1_1.svg) no-repeat; background-size: contain; font-size: 0; display: block;
  position: absolute; top:50%; left:50%; transform: translate(-50%,-50%)
}
.temp1_icon {background: url(../../images/tot/@temp1_3.svg) no-repeat; width:36px; height:36px; top: 9px; left:0; animation:temp1_icon .7s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;}

.temp2 img.s {height:25px; min-width: 21px !important; margin-top: 12px; margin-left: 3px;}
.temp2_icon {background: url(../../images/tot/@temp2_8.svg) no-repeat; width:36px; height:43px; top:-4px; left:0px; background-size: 36px 43px; animation: temp2_icon 1s linear infinite; z-index: 99;}

.temp2_icon1 {
  background: url(../../images/tot/@temp2_2.svg) no-repeat; width:10px; height:7px; margin-left: -13px; margin-top: 4px; animation: temp2_icon1 1s linear;
}

.temp3_icon {background: url(../../images/tot/@temp3_1.svg) no-repeat; width:8px; height:16px; animation: temp3_icon 2s linear infinite;
  margin-left: -12px;
  margin-top: -4px;
  transform-origin: 50% 50%;
  transform: rotate(-35deg);
}

@keyframes temp1_icon{
  0% { transform: translateZ(0) rotateY(0);}
  100% {transform: translateZ(160px) rotateY(180deg);}
}

@keyframes temp2_icon{
  0% {transform:scale(0,0)}
  50% {transform:Scale(1)}
  100% {transform:Scale(1)}
}
@keyframes temp2_icon1{
  0% { opacity: 1;}
  100% {opacity: 0;}
}

@keyframes temp3_icon{
  50% { transform: rotate(20deg); }
  100% { transform: rotate(-35deg);}
}

@keyframes temp4_icon{
  0% {transform: translate3d(0,15%,0);}
  50% { transform: translate3d(0,0%,0);}
  100% { transform:  translate3d(0,15%,0);}

}

[class*="temp"] img {width:auto; height: auto; margin-top: 0;}

/* Contents [E] */


#footer {
  height: auto;
  background-color: #fff;
}

#footer ul {
  justify-content: space-around;
  padding: calc(12 / var(--base-font-size) * var(--default-font-size)) calc(19 / var(--base-font-size) * var(--default-font-size)) !important;
}

/* 모달 팝업 [S] */
.modalPopup.default .popup {
  position: fixed;
  bottom: 7.5rem;
}

.modalPopup.default .popup:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100px;
  background: #fff;
  z-index: -1;
  bottom: -20px;
  left: 0;
}

/* 모달 팝업 [E] */

/* header 나중에 올려달라하기 */
#header::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100px;
  background: #fff;
  z-index: 1;
  top: -90px;
  left: 0;
}


.loading-page-wrap {position:fixed; width:100%; height:100%; background:#7f7f7f; overflow-x:hidden;}
.loading-page-cont {position:relative; min-height:640px; margin:0 20px; padding-top:210px;}
.loading-page-cont .loading-page-top-img {position:relative; width:100%; height:70px; background:url(https://rl9mnsqm6.toastcdn.net/mmc/common/icon-loading-ci.png)no-repeat 50% 50%; background-size:19px auto;}
.loading-page-cont .loading-page-top-img span {	position: absolute; top:35px; left:50%;	width:70px;	height:70px;	border:7px solid #139789;	border-bottom:7px solid transparent;	border-radius:50%;	animation: animate 1s linear infinite;}
@keyframes animate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.loading-page-cont .loading-text-box {padding-top:80px;}
.loading-page-cont .loading-text-box img {width:auto; height:20px;}
.loading-page-cont p.loading-text01{	font-weight:bold; font-size:18px; color:#ffffff;	margin: 0px auto;	white-space: nowrap;	overflow: hidden;	width: 143px;	animation: loading-text01 2s steps(60, end);}
.loading-page-cont p.loading-text02{	font-weight:bold; font-size:18px; color:#ffffff; text-align:center;	margin: 6px auto 0px auto;	white-space: nowrap;	overflow: hidden;	width: 182px;	animation: loading-text02 4s steps(60, end);}
.loading-page-cont p.loading-text03{	font-weight:bold; font-size:18px; color:#ffffff; text-align:center;	margin: 6px auto 0px auto;	white-space: nowrap;	overflow: hidden;	width: 182px;	animation: loading-text03 15s steps(60, end);}
@keyframes loading-text01{
  from {
    width: 0;
  }
}

@keyframes loading-text02{
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 176px;
  }
}

@keyframes loading-text03{
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 176px;
  }
}


@media screen and (min-width: 600px) {

  .wrapper {display: block;}

}

/* 24-04-24 Main END --------------------------------------------*/

/* main badge s */
.buttons:has(.event-badge)  {
  position: relative;
  width: fit-content;
  margin: 26px auto 0;
}
.event-badge  {
  width: 52px;
  position: absolute;
  top: -11px;
  left: -31px;
  z-index: 9;
}
/* main badge e */



/* 20250725 AppMainDesign */
#header .header-wrapper {
	position: initial;
	height: 6.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.4rem;
    gap: 0;
    background-color: #fff !important;
    box-shadow: 0 .2rem .3rem 0 rgba(0, 0, 0, .06);
}
#header .header-wrapper .logo {
	display: flex;
	height: 3rem;
}
.wrapper.main #page-content {
	padding: 6.8rem 0 10.6rem;
}

/* fixed Swiper */
.fixed-swiper.swiper-container {
	position: relative;
	width: 100%;
	height: 150px;
}
.fixed-swiper.swiper-container .swiper-slide {
	background: beige;
}
.fixed-swiper.swiper-container .swiper-slide.slide01 {
	background: url(../../images/main/fixed_banner_01-af637262f203f4cd98e26f9e61d8bb32.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide.slide02 {
	background: url(../../images/main/fixed_banner_02-2bb1beae00773446e3d5bdb0ac7264ba.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide.slide03 {
	background: url(../../images/main/fixed_banner_03_01-51b2ece6ffb87d4fbf8b18d41c9f7caf.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide.slide04 {
	background: url(../../images/main/fixed_banner_04-af0a88729c266a3bd53a702deb8725c0.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide.slide05 {
	background: url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/fixed_banner_online_event.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide.slide06 {
	background: url(https://rl9mnsqm6.toastcdn.net/mmc_v2/images/main/fixed_banner_gift_event.png) no-repeat 50% 0 / 100% auto;
}
.fixed-swiper.swiper-container .swiper-slide .inner-swiper-slide {
	position: relative;
	display: flex;
	padding: 1.6rem;
	height: 100%;
	overflow: hidden;
}
.fixed-swiper.swiper-container .swiper-slide .inner-swiper-slide .txt-box {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	width: calc(100% - 11rem);
	color: #222;
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.3;
}
.fixed-swiper.swiper-container .swiper-slide .inner-swiper-slide .txt-box strong {
	color: #002169;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.1;
}
.fixed-swiper.swiper-container .swiper-slide.slide01 .inner-swiper-slide .txt-box strong {
	color: #0083a3;
}
.fixed-swiper.swiper-container .swiper-slide.slide02 .inner-swiper-slide .txt-box strong {
	color: #3e008d;
}
.fixed-swiper.swiper-container .swiper-slide.slide03 .inner-swiper-slide .txt-box strong {
	color: #1061da;
}
.fixed-swiper.swiper-container .swiper-slide.slide04 .inner-swiper-slide .txt-box strong {
	color: #98000b;
}
.fixed-swiper.swiper-container .swiper-slide .inner-swiper-slide img {
	position: absolute;
	top: 1.2rem; right: 1.6rem;
	height: 15rem;
}

.fixed-swiper.swiper-container .swiper-pagination-bullets {
	bottom: 3.2rem;
}
.fixed-swiper.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
	width: .5rem; height: .5rem;
	background: #999;
	border-radius: .5rem;
}
.fixed-swiper.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active {
	width: 1rem; height: .5rem;
	background: #dc1351;
}

/* 메인 배너 */
#main .main-conts {
	position: relative;
	z-index: 1;
	border-radius: 3rem 3rem 0 0;
	margin-top: -3rem;
	background: linear-gradient(180deg, #f5f8ff 0%, #eaf2ff 100%);
	box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .05) inset;
	padding: 3rem 0;
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
#main .main-conts.login {
	padding: 1.2rem 0 3rem;
}
.main-conts.login .time-box {
	display: flex;
	font-size: 1.2rem;
	color: #666;
	font-weight: 300;
	gap: .2rem;
	min-height: 1.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-bottom: -2rem;
	margin-top: 0.5rem;
}
.main-conts.login .time-box::before {
	content: "";
	display: flex;
	width: 1.2rem; height: 1.2rem;
	background: url(../../images/main/icon_time-f9b882d64cd2f2e0c5d0aaedf7dfe4b8.svg) no-repeat 0 0 /cover;
}
.main-conts.login .time-box .timer {
	font-weight: 700;
}
.main-card-wrap {
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	gap: .8rem;
	padding: 0 1.6rem;
    margin: 0 auto;
    width: 100%;
    max-width: 44rem;
}
.main-card-wrap .main-card {
	position: relative;
	display: flex;
	width: 50%;
}
.main-card-wrap .main-card .card-svg {
	position: absolute;
	left: 0; top: 0;
	z-index: -1;
	width: 100%; height: 100%;
}

.main-card-wrap .main-card .inner-card {
	display: flex;
    flex-direction: column;
	width: 100%; height: 100%;
	filter: drop-shadow(0 0 1.4rem rgba(54, 112, 235, 0.3));
}
.main-card-wrap .main-card .inner-card .txt-box {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 1.6rem 1.2rem 2rem;
	gap: .8rem;
}
.main-card-wrap .main-card .inner-card .txt-box {

}
.main-card-wrap .main-card .inner-card .txt-box strong {
	font-size: 1.8rem;
	color: #002169;
}
.main-card-wrap .main-card .inner-card .txt-box span {
	height: 4rem;
	line-height: 1.3;
}
.main-card-wrap .main-card .inner-card .btn-box {
	position: relative;
	display: flex;
	justify-content: space-between;
}
.main-card-wrap .main-card.main-login-card .inner-card .btn-box {
	margin-top: 0.8rem;
}
.main-card-wrap .main-card .inner-card .btn-box .bi {
	margin: 0 0 0.1rem 1.2rem;
	width: 5.2rem;
	height: 5.2rem;
}
.main-card-wrap .main-card .inner-card .btn-box .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
	width: 3.5rem;
}
.main-card-wrap .main-card.main-login-card .inner-card .btn-box .arrow {
	width: 8rem;
}
.main-card-wrap .main-login-card .inner-card > img {
    position: absolute;
    left: 0; top: 0;
    /* width: 100%; */
    z-index: -1;
}
.main-card-wrap .main-card .inner-card .data-count-box .tit-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.main-card-wrap .main-card .inner-card .data-count-box .tit-box strong {
	margin-bottom: .4rem;
}

.main-card-wrap .main-card .inner-card .data-count-box {
	position: relative;
	background-color: #eff2f9;
	padding: 0.8rem 1.2rem;
	border-radius: 1.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin: 0 1.5rem;
}
.main-card-wrap .main-card .inner-card .data-count-box .recom {
	position: absolute;
	left: 0; top: -10px;
	background-color: #e56f8e;
	border-radius: 18rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1;
    min-width: 3rem; min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-card-wrap .main-card .inner-card .data-count-box span.count {
	font-size: 2rem;
	font-weight: 700;
	color: #3670eb !important;
}
.defalut-swiper.swiper-container.recommend .swiper-slide .equal-list {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.defalut-swiper.swiper-container.recommend .swiper-slide .equal-list .img-wrap {
	/* background-color: #fff;
	border-radius: 8rem; */
	width: 5rem; height: 5rem;
	display: flex;
    justify-content: center;
}
.defalut-swiper.swiper-container.recommend .swiper-slide .equal-list span {
	display: flex;
    min-height: 42px;
    align-items: center;
    line-height: 1.3;
}
.defalut-swiper.swiper-container.recommend .swiper-slide {
    width: auto;
    height: auto;
    min-width: none;
    min-height: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
    box-shadow: none;
    overflow-y: scroll;
    background: transparent;
    border: 0;
}

/* 금융생활 */
.fin-card-wrap {
	border-radius: 1rem;
	background-color: #fff;
	box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .08);
	padding: 0 1.6rem;
	display: flex;
	flex-direction: column;
}
.fin-card-wrap ul {
	display: flex;
    justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding: 1.6rem 0;
}
.fin-card-wrap ul:last-child {
	border-bottom: 0;
}
.fin-card-wrap ul li {
	flex-basis: 0;
    flex-grow: 1;
}
.fin-card-wrap ul li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: 0 .8rem;
}
.fin-card-wrap ul li a img {
	widtH: auto;
	height: 2.4rem;
}
.fin-card-wrap ul li a span {
	display: flex;
    align-items: center;
    text-align: center;
    line-height: 1.3;
    min-height: 3.6rem;
    letter-spacing: -.5px;

}
.swiper-container.foot-swiper .swiper-slide {
	display: flex;
	align-items: center;
	padding: .4rem 1.4rem;
	background: url(../../images/main/sprites/arrow_right_white-cf49c603c2c844fe92fb382c1e5733ec.svg) no-repeat calc(100% - 1.4rem) 50% / 2.4rem;
	border-radius: 1rem;
	min-height: 9.6rem;
}
.swiper-container.foot-swiper .swiper-slide.slide01 { background-color: #22bb7a; }
.swiper-container.foot-swiper .swiper-slide.slide02 { background-color: #707ce4; }
.swiper-container.foot-swiper .swiper-slide.slide03 { background-color: #5499e8; }
.swiper-container.foot-swiper .swiper-slide.slide04 { background-color: #e3a181; }

.swiper-container.foot-swiper .swiper-slide a {
	display: flex;
	gap: 1.2rem;
}
.swiper-container.foot-swiper .swiper-slide a img {
	max-width: 4.8rem;
	height: auto;
}
.swiper-container.foot-swiper .swiper-slide a .txt-box {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	color: #fff;
	font-size: 1.5rem;
	letter-spacing: .24px;
	line-height: 1.3;
}
.swiper-container.foot-swiper .swiper-slide a .txt-box strong {
	font-weight: 600;
	font-size: 1.8rem;
}
#main.index-page {
	padding: 6.8rem 0 7.5rem;
}
.main.wrapper {
	padding-bottom: 0;
	min-height: auto;
	background: transparent;
}