@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Regular.subset.woff2") format("woff2");
}

.electrolize-regular {
  font-family: "Electrolize", sans-serif;
  font-weight: 400;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}
marketer-popup-box a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: middle;
  border: 0;
}

html {
  font-size: 16px;
}

body {
  background-color: #000016;
  color: #fff;
  font-family: "Pretendard", sans-serif;
  margin: 0;
  padding: 0;
}

a {
  text-decoration-line: none;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
  /* 필요에 따라 조정 */
}

    /* 스크롤바 관련 */
    html {
        scrollbar-color: rgba(18, 20, 23, 0.8) transparent;
        scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(18, 20, 23, 0.8);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(18, 20, 23, 1);
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 4px;
    }



/* 공통요소 */
.clearfix::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  clear: both;
}

.inner {
  position: relative;
  display: block;
  width: 100%;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.d-none {
  display: none !important;
}

.wrap {
  position: relative;
  display: block;
  width: 100%;
  background-color: #000016;
  z-index: 10000;
}

.float-icon {
  position: fixed;
  display: block;
  width: 140px;
  height: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  transition: all 1s;
}

.float-menu {
  position: fixed;
  display: block;
  width: 422px;
  height: 360px;
  right: -422px;
  top: 64px;
  z-index: 1000;
  transition: all 0.5s;
  letter-spacing: -0.8px;
}

.float-icon.on {
  opacity: 0;
  visibility: hidden;
  z-index: -10;
}

.float-menu.on {
  right: 0;
}

.float-close {
  position: absolute;
  display: block;
 width: 70px;
  height: 80px;
  top: 0;
  left: 6px;
  background: url("../imgs/float-button.webp") no-repeat center;
  background-size: contain;
  cursor: pointer;
}

.float-close span {
  position: absolute;
  display: block;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
}

.float-close div {
  position: absolute;
  display: block;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
}

.float-close div p {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 8px;
}

.float-close div p:nth-child(3) {
  margin-bottom: 0;
}

.float-close div p i {
  font-size: 20px;
  color: #fff;
}

.float-icon .button-frame {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  /* background: url("../imgs/float-on.png") no-repeat center; */
  background: url("../imgs/float-button.webp") no-repeat center;
  background-size: contain;
  cursor: pointer;
  border-radius: 30%;
  margin-bottom: 8px;
}

.float-icon .button-frame i {
    position: relative;
    display: block;
    margin: 0 auto;
    height: 36px;
    width: 36px;
    margin-bottom: 4px;
}

.float-icon .button-frame.talk-contact {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/float-button02.webp") no-repeat center;
  /* background: url("../imgs/talk-contact-icon.png") no-repeat center; */
  background-size: contain;
  color: #333;
  font-weight: 700;
}

/* .float-icon .button-frame:hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/float-button.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
  border-radius: 30%;
}

.float-icon .button-frame.talk-contact:hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/talk-contact-icon.png") no-repeat center;
  background-size: contain;
  color: #333;
  font-weight: 700;
} */



.float-icon .button-frame.agency-contact {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/agency-button.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  border-radius: 30%;
  margin-top: 8px;
}

.float-icon .button-frame.agency-contact {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/agency-button.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  border-radius: 30%;
  margin-top: 8px;
}

.float-icon .button-frame.agency-contact:hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/agency-button-on.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
  border-radius: 30%;
  margin-top: 8px;
}


.float-icon .button-frame.recruit-contact {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/recruit-button.png") no-repeat center;
  background-size: contain;
  color: #fff;
  margin-top: 8px;
}

.float-icon .button-frame.recruit-contact:hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 84px;
  height: 96px;
  background: url("../imgs/recruit-button-on.png") no-repeat center;
  background-size: contain;
  color: #fff;
  margin-top: 8px;
}


.float-menu .form-frame {
  position: absolute;
  display: block;
  width: 380px;
  height: 360px;
  right: 0;
  bottom: 0;
  padding: 36px 30px;
  background-color: #eff1f6;
  color: #000;
  border-bottom-left-radius: 8px;
}

.float-icon .button-frame div {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
}

.float-icon .button-frame div p {
  /* font-size: 12px; */
  font-size: 14px;
  line-height: 16px;
  text-align: center;
    color: #fff;
    font-weight: 700;
}

.float-icon .button-frame.talk-contact div p {
  /* font-size: 12px; */

  color: #000;
}

.float-icon .button-frame div p:nth-child(1) {
  margin-bottom: 4px;
}

.float-menu .form-frame h5 {
  font-size: 24px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 24px;
}

.float-menu .form-frame h5 i {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 26px;
  height: 26px;
  background: url("../imgs/float-title.png") no-repeat center;
  background-size: contain;
  margin-right: 4px;
}

.float-menu .form-frame .input-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 52px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 16px;
  font-size: 0;
}

.float-menu .form-frame .input-frame label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #000;
  z-index: 10;
}

.float-menu .form-frame .input-frame label i {
  color: #e60044;
}

.float-menu .form-frame .input-frame input {
  position: relative;
  display: inline-block;
  vertical-align: top;
  max-width: 196px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  padding: 0 0 0 12px;
  border: none;
  color: #4e4e5d;
  margin: 0;
  opacity: 1;
}

.float-menu .form-frame .input-frame input::placeholder {
  font-size: 14px;
  line-height: 20px;
}

.float-menu .form-frame .input-frame input.tel-form {
  max-width: 236px;
}

.float-menu .form-frame .input-frame input:focus {
  border: none;
  outline: none;
}

.float-menu .form-frame .approve-frame {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 12px;
  line-height: 0;
}

.float-menu .form-frame .approve-frame input {
  height: 14px;
  width: 14px;
  margin: 1px 0;
}

.float-menu .form-frame .approve-frame span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  padding-left: 8px;
}

.float-menu .form-frame button {
  position: relative;
  display: block;
  width: 100%;
  height: 62px;
  background-color: #000;
  border: none;
  color: #fff;
  border-radius: 4px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.header {
  position: fixed;
  display: block;
  width: 100%;
  max-width: 1920px;
  left: calc(50% - 8px);
  top: -25px;
  transform: translateX(-50%);
  padding-top: 0;
  z-index: 100;
}

.header.on {
  top: 0;
  padding: 20px 0;
}

.header.show {
  top: 0;
  padding: 20px 0;
  /* background-color: rgb(0, 0, 22, 0.1); */
  background-color: rgba(226, 226, 226, 0.05);
  backdrop-filter: blur(30px);
  transition: all 0.4s;
}

.header.sub {
  position: fixed;
  display: block;
  width: 100%;
  top: 0;
  left: 50%;
  padding: 20px 0;
  transform: translateX(-50%);
  z-index: 100;
  transition: all 0.2s;
}

.header .inner {
  text-align: right;
  /* max-width: 1760px; */
  /* max-width: 1760px; */
  max-width: 1280px;
  margin: 0 auto;
}

/* .header {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 50px 0;
  z-index: 100;
  font-size: 20px;
} */

.header .logo {
  position: relative;
  display: block;
  float: left;
  width: 230px;
  height: 24px;
  background: url("/imgs/footer-logo.png") no-repeat center;
  background-size: contain;
  opacity: 0.6;
}

.header .logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.nav {
  display: inline-flex;
  vertical-align: top;
  justify-content: flex-end;
  gap: 36px;
  margin: 0 auto;
}

.nav a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
}

.nav a.marketer-menu {
  color: #e60044 !important;
  opacity: 1;
  font-weight: 700;
}

.header.sub.fixed-on01 {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
}

.header.sub.fixed-on02 {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
}

.header.sub.fixed-on01 a {
  color: rgb(255, 255, 255);
}

/* .contents {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: auto;
} */

.contents {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1920px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.main-visual-swiper {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}

.main-visual-swiper-pagination {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  top: 50%;
  left: 88px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.main-visual-swiper-pagination.pagination-visible {
  opacity: 1;
}

.main-visual-swiper-pagination .swiper-pagination-bullet {
  width: 14px;
  height: 16px;
  background: url("../imgs/pagination-bullet.png") no-repeat center center;
  background-size: contain;
  border-radius: 0;
}

.main-visual-swiper-pagination .swiper-pagination-bullet-active {
  width: 14px;
  height: 16px;
  background: url("../imgs/pagination-bullet-active.png") no-repeat center center;
  background-size: contain;
}

.main-intro {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 1540px;
  width: 100%;
  gap: 40px;
}

.contents .phrase {
  position: relative;
  display: block;
}

.phrase h2 {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 80px;
  line-height: 96px;
  font-weight: 700;
  color: #35353f;
}

.phrase h2 span {
  color: #fff;
}

.phrase h2 span.part01 {
  animation: intro-text-part01 1.4s linear;
}

.phrase h2 span.part02 {
  animation: intro-text-part02 2.1s linear;
}

.phrase h2 span.part03 {
  animation: intro-text-part03 2.8s linear;
}

.phrase h2 a {
  color: #fff;
}

.phrase h2 a.part01 {
  animation: intro-text-part01 1.1s linear;
}

.phrase h2 a.part02 {
  animation: intro-text-part02 1.6s linear;
}

.phrase h2 a.part03 {
  animation: intro-text-part03 2.1s linear;
}

@keyframes intro-text-part01 {
  0% {
    color: #35353f;
  }

  51% {
    color: #35353f;
  }

  100% {
    color: #fff;
  }
}

@keyframes intro-text-part02 {
  0% {
    color: #35353f;
  }

  67% {
    color: #35353f;
  }

  100% {
    color: #fff;
  }
}

@keyframes intro-text-part03 {
  0% {
    color: #35353f;
  }

  75% {
    color: #35353f;
  }

  100% {
    color: #fff;
  }
}

.contents .diagram {
  position: relative;
  display: block;
}

.diagram img {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  animation: intro 3s ease-in-out;
}

/* @keyframes intro {
  0% {
    content: url('../imgs/marketing-diagram01.png');
  }

  25% {
    content: url('../imgs/marketing-diagram02.png');
  }

  50% {
    content: url('../imgs/marketing-diagram03.png');
  }

  75% {
    content: url('../imgs/marketing-diagram04.png');
  }

  100% {
    content: url('../imgs/marketing-diagram05.png');
  }
} */

.diagram .figure {
  position: relative;
  display: block;
  width: 560px;
  aspect-ratio: 560/647;
  top: 50%;
  transform: translateY(-50%);
  background: url("../imgs/marketing-diagram06.png") no-repeat center center;
  background-size: contain;
  opacity: 1;
}

.diagram .figure.on {
  animation: intro 2.8s linear;
}

@keyframes intro {
  0% {
    background: url("../imgs/marketing-diagram01.png") no-repeat center center;
    opacity: 1;
  }

  20% {
    background: url("../imgs/marketing-diagram02.png") no-repeat center center;
    opacity: 1;
  }

  40% {
    background: url("../imgs/marketing-diagram03.png") no-repeat center center;
    opacity: 1;
  }

  60% {
    background: url("../imgs/marketing-diagram04.png") no-repeat center center;
    opacity: 1;
  }

  80% {
    background: url("../imgs/marketing-diagram05.png") no-repeat center center;
    opacity: 1;
  }

  100% {
    background: url("../imgs/marketing-diagram06.png") no-repeat center center;
    opacity: 1;
  }
}

/* .diagram img.out { */
/* position: absolute; */
/* } */

/* 예시 */
.main-str {
  position: absolute;
  display: block;
  top: 140px;
  left: 190px;
  max-width: 1730px;
  width: calc(100% - 190px);
  height: calc(100% - 140px);
}

.main-contents-header {
  position: relative;
  display: block;
  text-align: right;
  font-size: 0;
  line-height: 0;
}

.main-contents-header .title {
  position: relative;
  display: block;
  text-align: left;
}

.main-contents-header h3 {
  position: relative;
  display: block;
  color: #ff0055;
  font-size: 24px;
  line-height: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.main-contents-header h4 {
  position: relative;
  display: block;
  color: #ff0055;
  font-size: 100px;
  line-height: 120px;
  font-weight: 900;
}

.main-contents-header p {
  position: relative;
  display: block;
  color: #fff;
  font-size: 40px;
  line-height: 52px;
  font-weight: 200;
}

.main-contents-header p.str {
    letter-spacing: 1.2px;
  font-weight: 700;
}

.main-contents-header p.str span{
  color: #ff0055;
}

.main-contents-header .title > div.more {
  position: absolute;
  display: block;
  top: 40%;
  right: 180px;
  width: 78px;
  height: 70px;
  background: url(https://dodoad.co.kr/css/../imgs/arrow-frame.png) no-repeat center;
  background-size: contain;
  z-index: 100;
}

.main-contents-header .title > div.more i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  text-align: center;
  color: #fff;
  transition: 0.4s all;
}

.main-contents-header .title > div.more:hover {
  cursor: pointer;
}

.main-contents-header .title > div.more:hover i {
  font-size: 32px;
  color: #ff0055;
}

.main-contents-header .swiper-button-container {
  position: absolute;
  display: block;
  top: 64%;
  right: 70px;
  transform: translateY(-50%);
  width: 176px;
  height: 70px;
  font-size: 0;
  z-index: 10;
}

.main-contents-header .swiper-button-container > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  width: 78px;
  height: 70px;
  background: url("../imgs/arrow-frame.png") no-repeat center;
  background-size: contain;
}

.main-contents-header .swiper-button-container > div img {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-contents-header .swiper-button-container > div::after {
  font-size: 0;
  background: none;
}

.main-contents-header .swiper-button-container > div.swiper-button-prev {
  transform: rotate(180deg);
  margin-right: 20px;
}

.main-contents-header .swiper-button-container > div:hover {
}

.main-contents-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 140px);
  padding-top: 20px;
  overflow: hidden;
}

.main-contents-middle {
  position: relative;
  display: block;
  flex: 2;
}

.main-contents-middle.swiper-contents {
  min-height: 480px;
}



.main-contents-middle.graph,
.main-contents-middle.ai,
.main-contents-middle.partners,
.main-contents-middle.rfp {
  flex: 7;
}

.main-project-swiper {
  position: absolute;
  display: block;
  width: calc(100% + 30px);
  /* width: 100%; */
  height: 100%;
  left: -30px;
}

.main-project-swiper .swiper-slide {
  font-size: 0;
  cursor: pointer;
}

.main-project-swiper .swiper-slide div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 300px;
  aspect-ratio: 5/8;
  overflow: hidden;
  background-color: #000016;
}

/* .main-solution-container {
    position: relative;
    display: flex;
    margin-right: 80px;
    height: 100%;
} */

.main-solution-container {
  position: relative;
  display: block;
  margin-right: 80px;
  height: 100%;
}

.main-solution-container .solution-item {
  position: absolute;
  display: block;
  width: calc(1400% / 103);
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.main-solution-container .solution-item.center-item {
  position: absolute;
  display: block;
  width: calc(1900% / 103);
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 10;
}

/* .main-solution-container .solution-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    flex: 14;
} */

/* .main-solution-container .solution-item.center-item {
    flex: 19;
} */

.main-solution-container .solution-item:nth-child(1).on {
  left: 0;
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.6s;
}

.main-solution-container .solution-item:nth-child(2).on {
  left: calc(14% - 7px);
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.4s;
}

.main-solution-container .solution-item:nth-child(3).on {
  left: calc(28% - 14px);
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.2s;
}

.main-solution-container .solution-item:nth-child(4).on {
  background-color: #000016;
}

.main-solution-container .solution-item:nth-child(5).on {
  left: calc(61% - 28px);
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.2s;
}

.main-solution-container .solution-item:nth-child(6).on {
  left: calc(75% - 35px);
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.4s;
}

.main-solution-container .solution-item:nth-child(7).on {
  left: calc(89% - 42px);
  transform: translateY(-50%);
  opacity: 1;
  transition: all 0.6s;
}

.main-solution-container .solution-item i {
  position: absolute;
  display: block;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 7/6;
  transition: all 0.4s;

transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s;
  backface-visibility: hidden;
}

@keyframes spinY {
  from { transform: translateY(-50%) rotateY(0deg); }
  to { transform: translateY(-50%) rotateY(360deg); }
}

.main-solution-container .solution-item:nth-child(1) i {
  background: url("../imgs/growth-tab01.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(2) i {
  background: url("../imgs/growth-tab02.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(3) i {
  background: url("../imgs/growth-tab03.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(4) i {
  height: 100%;
  background: url("../imgs/growth-tab04.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(5) i {
  background: url("../imgs/growth-tab05.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(6) i {
  background: url("../imgs/growth-tab06.webp") no-repeat center center;
  background-size: contain;
}

.main-solution-container .solution-item:nth-child(7) i {
  background: url("../imgs/growth-tab07.webp") no-repeat center center;
  background-size: contain;
}

/* 
.main-solution-container .solution-item:nth-child(1) i:hover {
    animation: hover-action1 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action1 {
    50% {
        background: url('../imgs/growth-tab01_pink.png') no-repeat center center;
        background-size: contain;
    }
}

.main-solution-container .solution-item:nth-child(2) i:hover {
    animation: hover-action2 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action2 {
    50% {
        background: url('../imgs/growth-tab02_pink.png') no-repeat center center;
        background-size: contain;
    }
}

.main-solution-container .solution-item:nth-child(3) i:hover {
    animation: hover-action3 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action3 {
    50% {
        background: url('../imgs/growth-tab03_pink.png') no-repeat center center;
        background-size: contain;
    }
}

.main-solution-container .solution-item:nth-child(5) i:hover {
    animation: hover-action5 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action5 {
    50% {
        background: url('../imgs/growth-tab05_pink.png') no-repeat center center;
        background-size: contain;
    }
}

.main-solution-container .solution-item:nth-child(6) i:hover {
    animation: hover-action6 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action6 {
    50% {
        background: url('../imgs/growth-tab06_pink.png') no-repeat center center;
        background-size: contain;
    }
}

.main-solution-container .solution-item:nth-child(7) i:hover {
    animation: hover-action7 0.6s infinite linear;
    background-size: contain;
}

@keyframes hover-action7 {
    50% {
        background: url('../imgs/growth-tab07_pink.png') no-repeat center center;
        background-size: contain;
    }
} */

.main-solution-container .solution-item:nth-child(1) div:hover i {
  background: url("../imgs/growth-tab01_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item:nth-child(2) div:hover i {
  background: url("../imgs/growth-tab02_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item:nth-child(3) div:hover i {
  background: url("../imgs/growth-tab03_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item:nth-child(5) div:hover i {
  background: url("../imgs/growth-tab05_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item:nth-child(6) div:hover i {
  background: url("../imgs/growth-tab06_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item:nth-child(7) div:hover i {
  background: url("../imgs/growth-tab07_pink.webp") no-repeat center center;
  background-size: contain;
transform: translateY(-50%) rotateY(360deg);
}

.main-solution-container .solution-item p {
  position: absolute;
  display: block;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  text-align: center;
}

.graph-detail-text {
  position: absolute;
  display: block;
  top: 110px;
  left: 0;
  width: 770px;
  height: 120px;
  background-color: #000016;
  z-index: 100;
}

.graph-detail-text ul {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0;
}

.graph-detail-text li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid #f0f0f0;
}

.ql {
  width: 320px;
}

.qt {
  width: 450px;
  padding-left: 40px;
}

.graph-detail-text div {
  position: relative;
  display: block;
  color: #fff;
  font-family: "Electrolize", sans-serif;
}

.graph-detail-text span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 80px;
  line-height: 88px;
  font-weight: 900;
}

.graph-detail-text div p {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  line-height: 60px;
  margin-top: 28px;
  font-weight: 400;
}

.graph-detail-text p {
  font-size: 24px;
  line-height: 24px;
  font-weight: 300;
  color: #cccccc;
}

.graph-detail {
  position: absolute;
  display: block;
  top: 0;
  z-index: 10;
}

.graph-chart-frame {
  position: absolute;
  width: calc(100% - 190px);
  height: 80%;
  bottom: 0;
  right: 192px;
  overflow: hidden;
}

/* .graph-chart-frame .dim {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000016;
    transition: all 1.25s;
}

.graph-chart-frame .dim.on {
    left: 100%;
} */

.graph-chart {
  width: 100%;
  height: 100%;
}

.graph-box {
  position: relative;
  display: block;
  margin-top: 100px;
  height: calc(100% - 100px);
  background: url("../imgs/growth_graph.png") no-repeat center center;
  background-size: contain;
}

/* .rfp-process {
    position: relative;
    display: block;
    margin-right: 80px;
    height: 80%;
    background: url('../imgs/RFP_detail.png') no-repeat center center;
    background-size: contain;
} */

.rfp-process {
  position: relative;
  display: block;
  margin-right: 80px;
  height: 60%;
  text-align: center;
}

.rfp-step {
  position: relative;
  display: inline-block;
  vertical-align: top;
  top: 10%;
  height: 80%;
  opacity: 0;
  aspect-ratio: 1/1;
  transition: all 0.3s;
}

.step1 {
  background: url("../imgs/rfp_step1.png") no-repeat center center;
  background-size: contain;
  opacity: 1;
}

.step2 {
  top: 0%;
  height: 100%;
  aspect-ratio: 1/10;
  background: url("../imgs/rfp_step2.png") no-repeat center center;
  background-size: contain;
}

.step3 {
  aspect-ratio: 1/10;
  background: url("../imgs/rfp_step3.png") no-repeat center center;
  background-size: contain;
}

.step2.on,
.step3.on {
  aspect-ratio: 1/1;
  opacity: 1;
}

.rfp-step.arrow {
  position: relative;
  display: inline-block;
  vertical-align: top;
  top: 45%;
  height: 10%;
  width: 0;
  background: url("../imgs/rfp_arrow.png") no-repeat center center;
  background-size: contain;
  opacity: 0;
}

.rfp-step.arrow.on {
  width: auto;
  aspect-ratio: 10/1;
  opacity: 1;
}

.rfp-detail {
  position: absolute;
  display: block;
  bottom: 10px;
  left: calc(50% - 40px);
  transform: translateX(-50%);
  width: 0;
  height: 40%;
  background: url("../imgs/RFP_detail_info.png") no-repeat center center;
  background-size: contain;
  transition: all 0.6s;
  opacity: 0;
}

.rfp-detail.on {
  width: calc(100% - 80px);
  opacity: 1;
}

.layer-box {
  position: absolute;
  display: block;
  height: 100%;
  aspect-ratio: 59/68;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layer-box > span {
  position: absolute;
  display: block;
  height: 0;
  aspect-ratio: 59/68;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../imgs/ai-frame.png") no-repeat center center;
  background-size: contain;
}

.layer-box > span:nth-child(1).on {
  transition: all 0.1s;
  height: 56.5%;
}

.layer-box > span:nth-child(2).on {
  transition: all 0.3s;
  height: 71%;
}

.layer-box > span:nth-child(3).on {
  transition: all 0.5s;
  height: 85.5%;
}

.layer-box > span:nth-child(4).on {
  transition: all 0.7s;
  height: 100%;
}

/* .ai-process {
    position: absolute;
    display: block;
    width: 80%;
    aspect-ratio: 99/40;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../imgs/AITECH_detail_noframe.png') no-repeat center center;
    background-size: contain;
} */

.ai-process {
  position: absolute;
  display: block;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0;
}

.ai-process div {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 240px;
  height: 240px;
  background-color: black;
  opacity: 0;
  transition: all 0.4s;
}

.ai-process div.core {
  width: 200px;
  aspect-ratio: 1/1;
  background: url("../imgs/ai_core.png") no-repeat center center;
  background-size: contain;
  transition-delay: 0.1s;
}

.ai-process div.solution {
  margin-right: 80px;
  background: url("../imgs/ai_solution.png") no-repeat center center;
  background-size: contain;
}

.ai-process div.team {
  margin-left: 80px;
  background: url("../imgs/ai_team.png") no-repeat center center;
  background-size: contain;
}

.ai-process div.flow {
  width: 40px;
  height: 500px;
  background: url("../imgs/ai_arrow.png") no-repeat center center;
  background-size: contain;
}

.ai-process div.flow.reverse {
  transform: scale(-1, 1);
}

.ai-process div.flow p {
  position: absolute;
  display: block;
  font-size: 24px;
  line-height: 32px;
  top: 60%;
  left: 44%;
  transform: translateX(-50%);
  width: 80%;
  word-break: keep-all;
  opacity: 0;
  transition: all 0.5s;
  transition-delay: 0.2s;
}

.ai-process div.flow.reverse p {
  transform: scale(-1, 1) translateX(50%);
}

.ai-process div.on {
  opacity: 1;
}

.ai-process div.tight {
  margin: 0;
}

.ai-process div.flow.on {
  width: 400px;
}

.ai-process div.flow.on p {
  top: 56%;
  opacity: 1;
}

.partners-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 80px;
}

.partners-list h3 {
  position: relative;
  display: block;
  width: 100%;
  font-size: 32px;
  line-height: 40px;
  padding: 36px 0 14px 0;
  font-weight: 500;
  flex: 1;
}

.partners-list h3.major-partners-title {
  top: 0;
}

.partner-logos {
  position: relative;
  display: flex;
  justify-content: space-between;
  border-left: 1px solid #262639;
  border-top: 1px solid #262639;
  margin-bottom: 20px;
  border-radius: 12px 12px 0 12px;
}

.partner-logos.major-partners {
  flex-wrap: wrap;
}

.partner-logos > div {
  position: relative;
  width: calc(100% / 6);
  height: 72px;
  border: 1px solid #262639;
  border-left: 0;
  border-top: 0;
}

.partner-logos.official-partners > div:nth-child(1) {
  border-radius: 12px 0 0 12px;
}

.partner-logos.official-partners > div:nth-child(6) {
  border-radius: 0 12px 12px 0;
}

.partner-logos.major-partners > div:nth-child(6) {
  border-radius: 0 12px 0 0;
}

.partner-logos.major-partners > div:nth-child(13) {
  border-radius: 0 0 0 12px;
}

.partner-logos.major-partners > div:nth-child(18) {
  border-radius: 0 0 12px 0;
}

.partner-logos > div img {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-contents-middle.counsel {
  display: flex;
  gap: 190px;
  justify-content: space-between;
  margin-right: 190px;
}

.main-contents-middle.counsel.sub {
  gap: 0;
  margin: 0;
}

.pma .main-contents-middle.counsel.sub {
  padding-top: 120px;
}

.counsel-info {
  flex: 4;
  color: #fff;
  padding-top: 16px;
}

.pma .counsel-info i {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  font-size: 28px;
  line-height: 32px;
  margin-right: 0;
}

.partnership .counsel-info i {
    font-size: 36px;
    line-height: 48px;
}

/* .counsel.sub .counsel-info {
  flex:4;
} */

.partnership .counsel.sub .counsel-info {
    flex: 5;
    border:1px solid black;
    padding:60px 0 60px 20px;
    margin-right:20px;
}

.counsel-info div {
  margin-bottom: 24px;
}

.counsel-info span {
  position: relative;
  display: block;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.counsel.sub .counsel-info span {
  color: #222222;
}

.pma .counsel-info div {
  margin-bottom: 0;
}

.pma.partnership .counsel-info div {
  margin-bottom: 36px;
}

.pma.partnership .counsel-info div:last-child {
    margin-bottom: 0;
}

.partnership .counsel.sub .counsel-info p {
    font-size:28px;
    line-height: 32px;
}

.partnership .counsel.sub .counsel-info p.bottom {
    padding-left:70px;
}

.partnership .counsel.sub .counsel-info > div > div {
  font-size: 20px;
  line-height: 28px;
  margin-bottom:0;
  padding-left: 80px;
  padding-bottom: 0;
  color: #222;
}



.pma .counsel.sub .counsel-info span {
  padding-left: 48px;
}

.pma.partnership .counsel.sub .counsel-info span {
    font-size: 36px;
    line-height: 48px;
    padding-left: 54px;
    color: #e60044;
}

.partnership .counsel-info i {
    color: #222;
}

.counsel-info i {
  font-size: 24px;
  margin-right: 21px;
}

.pma .counsel-info p {
  font-size: 18px;
  line-height: 24px;
  padding-left: 50px;
  padding-bottom: 8px;
}

.pma .counsel-info p.mark {
  padding-left: 120px;
}

.counsel-info p {
  font-size: 18px;
  line-height: 28px;
  color: #b5b5c9;
  padding-left: 46px;
}

.counsel.sub .counsel-info p {
  color: #222222;
}

.counsel-form {
  flex: 7;
  position: relative;
  display: block;
  font-size: 0;
}

.partnership .counsel-form {
    flex:5;
}

.contents-form.counsel .counsel-form {
  padding-left: 40px;
}

.partnership .contents-form.counsel .counsel-form {
    border: 1px solid black;
    padding: 48px 20px;
}

.partnership .counsel-form .form-box {
      width: 100%;
      margin-right:0 !important; 
}

.counsel-form .form-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 20px);
  margin-right: 40px !important;
}

.counsel-form .form-box.pay {
  width: 100%;
  margin-right: 0;
}

.counsel-form .form-box:nth-child(2n) {
  margin-right: 0 !important;
}

.counsel-form.promotion .form-box:nth-child(2n) {
    margin-right: 40px !important;
}

.counsel-form.promotion .form-box:nth-child(2n-1) {
    margin-right: 0 !important;
}

.partnership .counsel-form .form-box.wide {
    margin-bottom: 24px;
}

.partnership .counsel-form .form-box.wide.submit {
    margin-bottom:0
}

.counsel-form .form-box.wide {
  width: 100%;
  margin-right: 0;
  margin-bottom: 40px;
  max-width: none;
}

.counsel-form .privacy-info-popup {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  top: 252px;
  border: 2px solid white;
  background-color: #000016;
  width: 100%;
  height: 148px;
  overflow: auto;
  padding: 8px;
  padding-left: 14px;
  z-index: -1;
}

.counsel-form .privacy-info-popup.on {
  display: block;
  z-index: 10;
}

.contents-form .counsel-form .privacy-info-popup {
  top: 300px;
  left: 80px;
  width: calc(100% - 80px);
  border-color: #818181;
  background-color: #fff;
  color: #0f0f0f;
}


.marketer-form .counsel-form .privacy-info-popup {
  top: 258px;
}


.privacy-info-popup p {
  font-size: 20px;
  line-height: 32px;
  word-break: keep-all;
}

.form-box > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 10px 0;
}

.counsel-form input {
  position: relative;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #4e4e5d;
  background-color: transparent;
  color: #4e4e5d;
  font-size: 20px;
  line-height: 24px;
  padding: 8px 8px 14px 8px;
  margin-bottom: 36px;
  opacity: 1;
}

.counsel-form input::placeholder {
  font-weight: 500;
}

.counsel-form select {
  position: relative;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #4e4e5d;
  background-color: transparent;
  color: #75757c;
  font-size: 20px;
  line-height: 24px;
  padding: 8px 8px 18px 8px;
  margin-bottom: 36px;
}

.counsel-form select.selected {
  color: #fdfdfd;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.marketer-form .counsel-form select.selected {
  color: #333;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.counsel-form select option {
  color: #4e4e5d;
}

.counsel-form textarea {
  width: 100%;
  height: 148px;
  padding: 16px 24px;
  font-size: 20px;
  line-height: 32px;
  color: #4e4e5d;
  background-color: transparent;
  resize: none;
  outline: 0;
  border-width: 2px;
  border-color: #4e4e5d;
}

.counsel-form input:focus {
  color: #fdfdfd;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.counsel-form input:focus::placeholder {
  font-weight: 700;
  color: #e60044;
}

.counsel-form select:focus {
  color: #e60044;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.counsel-form textarea:focus {
  color: #fdfdfd;
  font-weight: 700;
  outline: none;
  border-color: #e60044;
}

.marketer-form .counsel-form textarea:focus {
  color: #333;
  font-weight: 700;
  outline: none;
  border-color: #e60044;
}

.counsel-form textarea:focus::placeholder {
  color: #e60044;
  font-weight: 700;
}

.counsel-form .type-in {
  color: #fdfdfd;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.counsel-form textarea.type-in {
  border-color: #e60044;
}

.counsel-form button {
  position: relative;
  display: block;
  float: right;
  background-color: #e60044;
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 28px;
  padding: 10px 36px;
  border-radius: 5px;
  cursor: pointer;
}

.counsel-form button:hover {
  background-color: #e60044;
}

.form-box.wide.submit {
  margin-bottom: 0;
}

.counsel-form .form-box.wide input {
  display: none;
}

.counsel-form .form-box.wide label {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.counsel-form .form-box.wide label i {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 28px;
  border: 2px solid #4e4e5d;
  margin-right: 12px;
}

.partnership .counsel-form .form-box.wide label span {
    font-size: 18px;
    line-height: 24px;
}

.counsel-form .form-box.wide label span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  line-height: 28px;
  color: #b5b5c9;
  opacity: 1;
}

.counsel-form .form-box.wide input:checked + label i::after {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "✔";
  font-size: 20px;
}

.partnership .counsel-form .form-box.wide .privacy-view {
    font-size: 18px;
    line-height: 24px;
}

.counsel-form .form-box.wide .privacy-view {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  line-height: 28px;
  margin-left: 12px;
  color: #b5b5c9;
  cursor: pointer;
}

.counsel-form .form-box.wide .privacy-view:hover {
  text-decoration: underline;
}

.counsel.sub .counsel-form .form-box.wide label {
  color: #4e4e5d;
}

.main-contents-bottom {
  position: relative;
  display: block;
  text-align: right;
  font-size: 0;
  flex: 1;
}

.main-contents-bottom.graph,
.main-contents-bottom.rfp,
.main-contents-bottom.ai,
.main-contents-bottom.partners {
  flex: 2;
}

/* 
.main-contents-bottom.graph a,
.main-contents-bottom.rfp a,
.main-contents-bottom.ai a,
.main-contents-bottom.partners a {
  top: 0;
  transform: none;
} */

/*  */

.side-float {
  position: absolute;
  display: block;
  bottom: 48px;
  right: 60px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.side-float.show {
  opacity: 1;
  visibility: visible;
}

.side-float span {
  position: relative;
  display: block;
  width: 70px;
  height: 78px;
  background: url("../imgs/main_quick_frame.png") no-repeat center;
  background-size: contain;
  cursor: pointer;
}

.side-float li {
  position: absolute;
  display: block;
  bottom: 0;
  width: 70px;
  height: 78px;
  transition: all 0.2s ease-out;
}

.side-float li:nth-child(1) {
  background: url("../imgs/float-popup01.png") no-repeat center;
  background-size: contain;
}

.side-float li:nth-child(2) {
  background: url("../imgs/float-popup02.png") no-repeat center;
  background-size: contain;
}

.side-float li:nth-child(3) {
  background: url("../imgs/float-popup03.png") no-repeat center;
  background-size: contain;
}

.side-float li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.side-float span i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  transition: all 0.2s;
}

.side-float span i::before {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  background-color: pink;
  content: "";
}

.side-float span i::after {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  background-color: pink;
  content: "";
}

/* .side-float open { */
.side-float.on span i {
  transform: translate(-50%, -50%) rotate(45deg);
}

.side-float.on li:nth-child(1) {
  bottom: 88px;
}

.side-float.on li:nth-child(2) {
  bottom: 176px;
}

.side-float.on li:nth-child(3) {
  bottom: 264px;
}

/* 서브페이지 */

.contents-header {
  position: relative;
  display: block;
  width: 100%;
  background-color: #000016;
}

.contents-header i {
  position: relative;
  display: block;
  width: 100%;
  /* height: 480px; */
  height: 300px;
  background: url("../imgs/sub-header-bg01.webp") no-repeat center -160px;
  background-size: cover;
  opacity: 0.2;
}

.contents-header.services i {
  background: url("../imgs/sub-header-bg02.webp") no-repeat center;
  background-size: cover;
}

.contents-header.techsolution i {
  background: url("../imgs/sub-header-bg03.webp") no-repeat center;
  background-size: cover;
}

.contents-header.portfolio i {
  background: url("../imgs/sub-header-bg04.webp") no-repeat center;
  background-size: cover;
}

.contents-header.contact i {
  background: url("../imgs/sub-header-bg05.webp") no-repeat center;
  background-size: cover;
}

.contents-header.marketer i {
  background: url("../imgs/sub-header-bg06.webp") no-repeat center;
  background-size: cover;
}

.contents-header.pma i {
  background: url("../imgs/sub-header-bg07.webp") no-repeat center;
  background-size: cover;
}

.contents-header-title {
  position: absolute;
  display: block;
  top: 360px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  transition: all 0.2s ease-out;
  opacity: 0;
}

.contents-header-title.on {
transform: translate(-50%, -250px);
  opacity: 1;

}

.contents-header-title h5 {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  color: #e60044;
  margin-bottom: 12px;
}

.contents-header-title span {
  position: relative;
  display: block;
  /* font-size: 48px; */
  /* line-height: 60px; */
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  color: #ffffff;
}

.nav-box {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  /* margin-top: 480px; */
  margin-top: 300px;
  background-color: #000016;
  z-index: 150;
  transition: top 0.2s;
}

.nav-box.port-nav {
    background-color: transparent;
}

.nav-box.pma {
  transition: top 0.2s, background-color 0.2s;
}

.nav-box.fixed-on01 {
  margin: 0;
  position: fixed;
  top: 64px;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 150;
}

.nav-box.port-nav.fixed-on01 {
    background-color: #000016;
}

.nav-box.fixed-on03 {
  margin: 0;
  position: fixed;
  top: 66px;
  z-index: 150;
}




.nav-box.fixed-on01.pma {
  padding: 12px 0;
  background-color: transparent;
}

.sub-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* width: 80%; */
  width: 1280px;
  gap: 20px;
}

.sub-nav.active {
  background-color: red;
}

.sub-nav.marketer {
  width: 60%;
}

.sub-nav span {
  position: relative;
  font-size: 15px;
  line-height: 54px;
  font-weight: 500;
  text-align: center;
  /* color: #fff; */
  /* color: #938f8f; */
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.sub-navi {
  position: relative;
  display: flex;
  justify-content: space-between;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  padding: 0 180px;
  gap:20px;
 z-index: 50;
}

.sub-navi.add-on {
    position: absolute;
    display: flex;
    top: -88px ;
    width: 100%;
    background-color: rgba(253, 253, 253, 0.9);
    transition: all 0.5s;
    padding:0 40px;
    gap: 0;
}

.sub-navi.add-on.on {
    top: 0px;
}


.sub-navi.active {
  background-color: red;
}

.sub-navi.marketer {
  width: 60%;
}

.sub-navi span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  padding-bottom: 18px;
  font-weight: 600;
  text-align: center;
  /* color: #fff; */
  color: #938f8f;
  flex: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.sub-nav span:hover {
  color: rgba(230, 0, 68, 0.8);
}


.sub-navi span:hover {
  color: #fff;
}


.sub-navi span.on {
  color: #e60044;
}

.sub-navi span::after {
    position: absolute;
    display: block;
    width: 0%;
    height: 6px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    transition: all 0.2s;
}

.sub-navi span.on::after {
  position: absolute;
  display: block;
  width: 60%;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #e60044;
  content: "";
}


.sub-navi span i {
    margin-top: 12px;
    font-size: 24px;
    line-height: 40px;
}




.sub-navi.add-on span {
    color: #000;
    background-color: #fff;
    padding: 0;
    font-size: 18px;
    line-height: 48px;
    /* border-left: 1px solid rgb(221, 220, 220); */
    /* border-right: 1px solid rgb(221, 220, 220); */
    border: 1px solid rgb(221, 220, 220);
    border-top: 0;
}
.sub-navi span.on {
  color: #e60044;
}

.sub-navi.add-on span:hover {
    color: #e60044;
}


.sub-navi.add-on span.on::after {
}

.pma .sub-nav {
    width : 1000px;
}

.pma .sub-nav span {
  margin: 0 80px;
  border-radius: 32px;
  line-height: 54px;
}

.nav-box.fixed-on01.pma .sub-nav span {
  background-color: rgba(43, 43, 44, 0.76);
}

.nav-box.fixed-on01.pma .sub-nav span.on {
  background-color: #000016;
}

/* .sub-nav span::after {
  position: absolute;
  display: block;
  width: 0%;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  content: "";
  transition: all 0.2s;
} */

/* .sub-nav span:hover::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #E60044;
  content: '';
} */

.sub-nav span.on {
  font-size: 18px;
  font-weight: 700;
  color: #e60044;
  background-color: #000016;
}

.sub-nav span::after {
  position: absolute;
  display: block;
  width: 0%;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  transition: all 0.2s;
}

.sub-nav span:hover::after {
  width: 80%;
  background-color: #e60044;
}

.sub-nav span.on::after {
  position: absolute;
  display: block;
  width: 80%;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #e60044;
  content: "";
}

.pma .sub-nav span.on::after {
  width: 84%;
}

.contents-body {
  position: relative;
  display: block;
  /* padding: 200px 0; */
  padding-bottom: 160px;
  background-color: #fdfdfd  ;
}

.contents-body.about {
  /* margin-top: 80px; */
  /* margin-top: 60px; */
}

.contents-body.portfolio {
  padding-bottom: 120px;
  margin-top: 80px;
}

.contents-body.portfolio.v2 {
    margin-top: 88px;
}


.contents-body.marketer {
  padding: 0;
}

/* .contents-box {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 200px;
}

.contents-box.last-box {
    padding-bottom: 0;
} */

.contents-body.pma .body-frame {
  position: relative;
  display: block;
}

.body-frame > div {
  display: none;
}

.body-frame > div.intro-tab.on,
.body-frame > div.info-tab.on {
  position: relative;
  display: block;
  opacity: 1;
  visibility: visible;
  top: auto;
  width: auto;
  max-height: none;
}

.v2 .contents-box {
    padding-top: 192px;
}

.contents-box {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  /* padding-top: 262px; */
  padding-top: 180px;
  /* margin-top: 180px; */
}

.contents-title {
  position: relative;
  display: block;
  font-size: 48px;
  line-height: 54px;
  font-weight: 900;
  text-align: center;
  color: #000;
  margin-bottom: 54px;
}

.contents-body.marketer .contents-title {
  margin-top: 40px;
}

.pma .contents-title span {
  color: #e60044;
}

.contents-pic {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 80px;
  height: 400px;
  font-size: 0;
}

.contents-box.last-box .contents-pic {
  margin-bottom: 0;
}

.contents-body.marketer .contents-pic {
  margin-bottom: 0;
  height: 300px;
}

.contents-pic.tall01 {
  height: 680px;
}

.contents-pic.tall02 {
  height: 900px;
}

.contents-pic.short {
  height: 210px;
  margin-bottom: 0;
}

.contents-pic.short img {
  height: 100%;
}

.contents-pic.register-step {
  max-width: 1200px;
  height: 440px;
  margin: 0 auto;
  margin-bottom: 0;
}

.contents-pic > img {
    height: 100%;
}

#vision .contents-pic {
    height: auto;
    max-width: 1080px;
    margin-bottom: 60px;;
}

#vision .contents-pic > img {
    height: auto;
    width: 100%;
}

.register-step-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  animation: movingArrow 2.4s infinite linear;
}

@keyframes movingArrow {
  0% {
    background: url("../imgs/register-arrow01.png") no-repeat center center;
  }

  10% {
    background: url("../imgs/register-arrow02.png") no-repeat center center;
  }

  20% {
    background: url("../imgs/register-arrow03.png") no-repeat center center;
  }

  30% {
    background: url("../imgs/register-arrow04.png") no-repeat center center;
  }

  40% {
    background: url("../imgs/register-arrow05.png") no-repeat center center;
  }

  50% {
    background: url("../imgs/register-arrow06.png") no-repeat center center;
  }

  60% {
    background: url("../imgs/register-arrow07.png") no-repeat center center;
  }

  70% {
    background: url("../imgs/register-arrow08.png") no-repeat center center;
  }

  80% {
    background: url("../imgs/register-arrow09.png") no-repeat center center;
  }

  90% {
    background: none;
  }
}

.contents-pic .beat-box {
  position: absolute;
  display: block;
  top: 60px;
  left: 1234px;
  animation: beatBox 1.2s infinite linear;
  z-index: 100;
}

.contents-pic .beat-box img {
  width: 100%;
  height: 100%;
}

@keyframes beatBox {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.92;
  }

  100% {
    scale: 1;
  }
}

.contents-pic .beat-box img {
}

.contents-pic > div {
  position: absolute;
  display: block;
  width: 1200px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}

.contents-pic > div::before {
  position: absolute;
  display: block;
  width: 12%;
  height: 4px;
  background-color: #e60044;
  top: 50%;
  content: "";
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  transition-delay: 0.4s;
}

.contents-pic > div.on::before {
  width: 80%;
  opacity: 0.2;
  visibility: visible;
}

.contents-pic > div.specialization-pic::before {
  left: 10%;
  transform: translateY(-50%);
}

.contents-pic > div.industry-pic::before {
  right: 10%;
  transform: translateY(-50%);
}

.contents-pic > div.media-pic::before {
  left: 50%;
  transform: translate(-50%, -50%);
}

.contents-pic > div.on {
  opacity: 1;
  visibility: visible;
}

.contents-pic > div img {
  position: absolute;
  display: block;
  height: 252px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.6s;
  transition-delay: 0.2s;
}

.contents-pic > div.specialization-pic img {
  left: 0;
}

.contents-pic .specialization-pic.on img.sp_1 {
}

.contents-pic .specialization-pic.on img.sp_2 {
  left: 260px;
}

.contents-pic .specialization-pic.on img.sp_3 {
  left: 500px;
}

.contents-pic .specialization-pic.on img.sp_4 {
  left: 740px;
}

.contents-pic .specialization-pic.on img.sp_5 {
  left: 980px;
}

.contents-pic > div img.main {
  height: 100%;
  z-index: 100;
}

.contents-pic > div.industry-pic img {
  right: 0;
}

.contents-pic .industry-pic.on img.in_1 {
}

.contents-pic .industry-pic.on img.in_2 {
  right: 268px;
}

.contents-pic .industry-pic.on img.in_3 {
  right: 504px;
}

.contents-pic .industry-pic.on img.in_4 {
  right: 740px;
}

.contents-pic .industry-pic.on img.in_5 {
  right: 978px;
}

.contents-pic > div.media-pic img {
  left: 50%;
  transform: translate(-50%, -50%);
}

.contents-pic .media-pic.on img.md_1 {
}

.contents-pic .media-pic.on img.md_2 {
    left: 29.5%;
}

.contents-pic .media-pic.on img.md_3 {
  left: 9.5%;
}

.contents-pic .media-pic.on img.md_4 {
  left: 71%;
}

.contents-pic .media-pic.on img.md_5 {
  left: 90.5%;
}

.contents-pic > div ul li.main {
  position: absolute;
  display: block;
  width: calc(24% - 40px);
  background: url("../imgs/specialization_1.png") no-repeat center center;
  background-size: contain;
}

.contents-pic > div ul li.last {
  margin-right: 0;
}

.contents-pic .process-arrow {
  position: absolute;
  display: none;
  width: 10px;
  height: 120px;
  top: 104px;
  opacity: 1;
  visibility: visible;
  /* animation: movingTrail 8s infinite linear; */
}

@keyframes movingTrail {
  0% {
    left: 180px;
  }

  40% {
    left: 1058px;
    transform: none;
  }

  50% {
    transform: rotate(90deg);
    transform-origin: left bottom;
  }

  60% {
    transform: rotate(180deg);
    transform-origin: left bottom;
  }

  62% {
    left: 1058px;
    transform: rotate(180deg);
    transform-origin: left bottom;
  }

  80% {
    left: 500px;
    transform: rotate(180deg);
    transform-origin: left bottom;
  }

  100% {
    left: 200px;
    transform: rotate(180deg);
    transform-origin: left bottom;
  }
}

.contents-pic .process-arrow span {
  position: absolute;
  display: block;
  width: 10px;
  height: 16px;
  background-color: green;
}

.contents-summary {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 80px;
  color: #222222;
}

.marketer .contents-summary {
  max-width: 1280px;
  margin-bottom: 20px;
}

.pma .contents-summary.narrow {
  max-width: 860px;
  margin-bottom: 80px;
}

.pma .contents-summary.wide {
  max-width: 1320px;
  margin-bottom: 80px;
}

.contents-summary h5 {
  position: relative;
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 24px;
}

.contents-summary p {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  margin-bottom: 60px;
}

.contents-summary div {
  position: relative;
  display: block;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}

.pma .contents-summary.sub-summary div {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.contents-summary .point {
  padding-left: 102px;
  padding-right: 56px;
}

.contents-summary .point::after {
  position: absolute;
  display: block;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 4px;
  height: 80%;

  border-radius: 1px;
  background-color: #e60044;
  content: "";
}

.contents-summary span {
  position: relative;
  display: block;
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
  color: #e60044;
}

.contents-summary div span {
  display: inline-block;
  font-size: 28px;
  color: #e60044;
}

.contents-summary.sub-summary div span {
  font-size: 20px;
  line-height: 28px;
}

.contents-summary > div > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.contents-summary > div > div.text {
  font-weight: 700;
}

.contents-summary .point span {
  position: relative;
  display: block;
}

.contents-body.marketer .contents-summary .num {
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -2%;
  color: #222222;
}

.marketer .contents-summary .point span {
  font-size: 20px;
  line-height: 36px;
  letter-spacing: -2%;
  font-weight: 500;
  color: #222222;
}

.contents-summary i {
  position: absolute;
  display: block;
  top: 0;
  left: 4%;
  width: 42px;
  height: 42px;
  font-size: 120px;
  line-height: 78px;
  font-family: "Noto Sans KR", sans-serif;
  color: #e60044;
  opacity: 0.1;
}

.contents-summary i:nth-child(3) {
  left: auto;
  right: 4%;
  width: 42px;
  height: 42px;
  font-size: 120px;
}

.marketer .contents-summary i {
  position: absolute;
  display: block;
  top: 0;
  left: 2%;
  width: 42px;
  height: 42px;
  font-size: 120px;
  line-height: 78px;
  font-family: "Noto Sans KR", sans-serif;
  color: #e60044;
  opacity: 0.1;
}

.marketer .contents-summary i:nth-child(3) {
  left: auto;
  right: 2%;
  width: 42px;
  height: 42px;
  font-size: 120px;
}

.contents-summary i.pic {
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  background: url("../imgs/person-mark.png") no-repeat center center;
  background-size: contain;
  opacity: 1;
}

.logo-title {
  margin-bottom: 18px;
}

.logo-summary {
  margin-bottom: 18px;
  font-weight: 700 !important;
}

.contents-icon {
  position: relative;
  /* display: flex; */
  display: block;
  width: 100%;
  margin-bottom: 60px;
}

.contents-icon > div {
  /* flex: 1; */
  /* height: 180px; */
  width: 100%;
  max-width: 1200px;
  height: 160px;
  margin: 0 auto;
  background: url("../imgs/contents-icon.png") no-repeat center center;
  background-size: contain;
}

.pma .contents-icon {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.pma .contents-icon > div {
  position: relative;
  display: block;
  height: auto;
  flex: 1;
  margin: 0 auto;
  background: none;
}

.pma .contents-icon > div::after {
  position: absolute;
  display: block;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  width: 2px;
  height: 96%;
  background-color: #eeeeee;
  content: "";
}

.pma .contents-icon > div p {
  position: relative;
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  margin-top: 8px;
  color: #333;
}

.contents-box .contents-history {
  position: relative;
  display: block;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 40px;
  font-size: 0;
}

.histroy-time-box {
  position: relative;
  display: block;
}

.history-subject {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 24px);
  text-align: left;
}

.history-subject span {
  position: relative;
  display: block;
  font-size: 36px;
  line-height: 42px;
  font-weight: 800;
  color: #000016;
  text-align: right;
  padding-right:96px;
}

.history-subject span.on {
  color: #e60044;
}

.history-subject p {
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #50505f;
  margin-top: 12px;
    text-align: right;
  padding-right:96px;
}

.history-timeline {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(50% + 24px);
  text-align: left;
  padding-left: 140px;
  color: #000016;
}

.history-timeline.portfolio {
  padding-left: 140px;
}

.history-timeline span {
  position: relative;
  display: block;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -2px;
}

.history-item span {
  margin-bottom: 8px;
}

.history-item ul {
  list-style: none;
  margin-bottom: 56px;
}

.history-item ul li {
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 16px;
  font-weight: 400;
}

.history-item ul li span {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  margin: 0;
  margin-right: 16px;
  color: #222222;
}

.history-item ul li div {
  position: relative;
  line-height: 28px;
  padding-left: 24px;
}

.history-item ul li div::before {
  position: absolute;
  display: block;
  top: 10px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000016;
  content: "";
}

.history-item.last-item ul {
  margin-bottom: 0;
}

.history-line {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 48px;
  height: 100%;
}

.arrow-line {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 4px;
  height: 36%;
  background-color: #e60044;
  z-index: 10;
}

.arrow-line.active {
  height: 100%;
}

.default-line {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 4px;
  height: 100%;
  opacity: 0.1;
  background-color: #000016;
}

.line-arrow {
  position: absolute;
  display: block;
  top: calc(36% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 8/9;
  background: url("../imgs/line-arrow.png") no-repeat center center;
  background-size: contain;
  z-index: 10;
}

.contents-main-pic {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  /* padding-top: 200px; */
  padding-top: 140px;
}

.pma .contents-main-pic {
  padding-top: 0;
}

.pic-frame {
  position: relative;
  display: inline-block;
  margin-bottom: 140px;
}

.pma .contents-main-pic .pic-frame {
  margin-bottom: 120px;
}

.figure-pic {
  position: relative;
  display: block;
  height:720px;
  z-index: 10;
}

.contents-main-pic .line-pic {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  height: 574px;
  transform: translate(-50%, -50%);
  animation: line-pic-ani 20s infinite linear;
}

@keyframes line-pic-ani {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

.pma .contents-main-pic .pic-frame .impact-pic {
  position: absolute;
  display: block;
  scale: 1;
  transition: 0.8s all;
}

.pma .contents-main-pic .pic-frame .impact-pic.on {
  scale: 1.08;
}

.pma .contents-main-pic .pic-frame .impact-pic.part1 {
  top: 7%;
  right: 10%;
  z-index: 10;
}

.pma .contents-main-pic .pic-frame .impact-pic.part2 {
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  z-index: 10;
}

.pma .contents-main-pic .pic-frame .impact-pic.part3 {
  bottom: 7%;
  right: 10%;
  z-index: 10;
}

.pma .contents-main-pic .pic-frame .impact-pic.part4 {
  bottom: 7%;
  left: 10%;
  z-index: 10;
}

.pma .contents-main-pic .pic-frame .impact-pic.part5 {
  top: 50%;
  transform: translateY(-50%);
  left: 0%;
  z-index: 10;
}

.pma .contents-main-pic .pic-frame .impact-pic.part6 {
  top: 7%;
  left: 10%;
  z-index: 10;
}

.contents-list-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border-top: 1px solid #acacac;
}

.list-item {
  position: relative;
  display: block;
  height: 120px;
  padding: 40px 100px;
  overflow: hidden;
  border-bottom: 1px solid #acacac;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.list-item.active {
  height: auto;
  border-left: 4px solid #e60044;
  background-color: #eeeeee;
}

.list-item span {
  position: relative;
  display: block;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  color: #000;
}

.list-item i {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  margin: 6px 0;
  background: url("../imgs/arrow-down.png") no-repeat center center;
  background-size: contain;
  transition: all 0.3s;
}

.item-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.list-item .item-title span {
  transition: all 0.2s;
}

.list-item.active .item-title span {
  color: #e60044;
  transition: all 0.5s;
}

.list-item.active .item-title i {
  background: url("../imgs/arrow-down-active.png") no-repeat center center;
  background-size: contain;
}

.item-detail {
  position: relative;
  display: block;
  height: 0;
  opacity: 0;
  visibility: hidden;
  color: #000;
  text-align: left;
  /* margin-top: 80px; */
  transition: all 0s;
}

.list-item.active .item-detail {
  height: 100%;
  opacity: 1;
  visibility: visible;
  margin-top: 30px;
  transition: all 0.5s;
  transition-delay: 0.2s;
}

.item-detail > div {
  position: relative;
  display: block;
}

.tech-item .item-detail .process {
  margin-top: 80px;
}

.item-detail h3 {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.item-detail ul {
  margin-bottom: 30px;
}

.pma .item-detail .info:last-child ul {
  margin-bottom: 0;
}

.tech-item .item-detail ul {
  margin-bottom: 32px;
}

.item-detail ul li {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding-left: 22px;
  word-break: keep-all;
}

.item-detail ul li i {
  position: absolute;
  display: block;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0;
  background: none;
  border: 2px solid #e60044;
}

.log01 {
  margin-bottom: 80px;
}

.process > img {
    width: 100%;
}

.info > img {
        width: 100%;
}

.info-pic {
  position: relative;
  display: block;
  text-align: center;
  margin-top: 60px;
  font-size: 0;
}

.info-pic .img-tab {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.info-pic .img-box {
  width: 48%;
}

.info-pic .img-box.log02 {
  aspect-ratio: 592/482;
  background: url("../imgs/log02.png") no-repeat center center;
  background-size: contain;
}

.info-pic .img-box.log03 {
  aspect-ratio: 592/482;
  background: url("../imgs/log03.png") no-repeat center center;
  background-size: contain;
}

.contents-list {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  font-size: 0;
  text-align: left;
  padding: 0 2px;
}

.contents-list .list-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(25% - 40px);
  margin-right: 12px;
  margin-bottom: 24px;
  min-width: 300px;
  aspect-ratio: 2/3;
  opacity: 0;
  cursor: pointer;
  transition: all 2s;
}

.contents-list .list-box:nth-child(4n) {
    margin-right: 0;
}

.contents-list .list-box.on {
  opacity: 1;
}

.contents-list .list-box.on.no {
  pointer-events: none;
}

.contents-list .list-box .box-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.contents-list .list-box .box-frame:hover {
  background: transparent;
}


.box-frame i {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0);
  z-index: 20;
  opacity: 0.6;
  transition: all 0.3s;
}

.contents-list .list-box .box-frame:hover i {
  opacity: 0.1;
}

.contents-list .list-box .box-frame:active i {
  opacity: 0;
}

.box-frame:hover img {
  opacity: 1;
}

.box-frame img {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  aspect-ratio: 1/1;
}

.box-frame img.logo {
  opacity: 1;
  top: 42%;
  width: 100%;
  height: auto;
  z-index: 50;
  transition: all 0.3s;
}

.contents-list .list-box .box-frame:hover img.logo {
  opacity: 0;
}

.box-frame img.bg-img {
  opacity: 0.4;
}

.contents-list .list-box .port-label {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(218, 12, 73, 0.4);
  /* background-color: rgba(255, 255, 255, 0.6); */
  z-index: 100;
}

.contents-list .list-box:hover .port-label {
  background-color: rgba(218, 12, 73, 0.8);
  /* background-color: rgba(255, 255, 255, 0.85); */
}

.contents-list .list-box .port-label p {
    /* color: #181818; */
  font-size: 24px;
  line-height: 48px;
  font-weight: 700;
}

.contents-list .list-box .port-label div {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding: 0 0 14px ;
}

.contents-list .list-box .port-label span {
  padding: 4px 18px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  font-size: 16px;
  line-height: 20px;
}

.contents-nav {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1370px;
  margin: 0 auto;
  font-size: 0;
  text-align: left;
  margin-bottom: 76px;
  padding-left: 4px;
  padding-top: 4px;
}

.contents-nav.add-on {
    position: absolute;
    top: -88px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s;
}

.contents-nav.add-on.on {
    padding: 12px 20px;
    top: 0;
}


.port-nav .contents-nav {
    display: flex;
    justify-content: space-between;
    max-width: none;
    padding: 72px 200px;
    gap: 9px;
    margin: 0 auto;
}

.port-navi .contents-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1240px;
    padding: 12px 20px;
    gap: 10px;
    margin: 0 auto;
}

.port-navi .contents-nav {
    /* background-color: #fdfcfb; */
    background-color: rgba(253, 253, 253, 0.9);
}

.contents-nav span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(100% / 9 - 4px);
  margin-right: 4px;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #000;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #cccccc;
  cursor: pointer;
}

.port-nav .contents-nav > div{
    padding: 24px 0;
    border-radius: 12px;
    min-width: 96px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.2);
    -moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.2);
    cursor: pointer;
    opacity: 0;
    transition: 0.5s all;
}

.port-navi .contents-nav > div {
    padding: 16px 0;
    border-radius: 12px;
    min-width: 76px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 3px 3px 3px -1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 3px 3px 3px -1px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 3px -1px rgba(0,0,0,0.2);
    cursor: pointer;
    opacity: 0;
    transition: 0.5s all;
    background-color: #fcfcfc;
}

.port-nav .contents-nav > div:hover,
.port-navi .contents-nav > div:hover {

    background-color: #FF3778;
}

.port-nav .contents-nav > div:hover img,
.port-navi .contents-nav > div:hover img {

    filter: invert(100%) hue-rotate(180deg);
}


.port-nav .contents-nav div:hover p,
.port-navi .contents-nav div:hover p {

    color: #fff;
}


.port-nav .contents-nav > div.show,
.port-navi .contents-nav > div.show {

    opacity: 1;
}


.port-nav .contents-nav > div.on,
.port-navi .contents-nav > div.on {

    background-color: #FF3778;
}

.port-nav .contents-nav > div img,
.port-navi .contents-nav > div img {

    position: relative;
    display: block;
    width: 30px;
    margin: 0 auto;
    margin-bottom: 10px;
}



.port-nav .contents-nav div p,
.port-navi .contents-nav div p {
    position: relative;
    display: block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
    color: #333;
}

.port-nav .contents-nav > div.on img,
.port-navi .contents-nav > div.on img {
      filter: invert(100%) hue-rotate(180deg);
}

.port-nav .contents-nav div.on p,
.port-navi .contents-nav div.on p {
    color: #fff;
}



.port-nav .contents-nav span::before,
.port-navi .contents-nav span::before {
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 4px;
    background-color: transparent;
    z-index: 200;
    content: '';
    transition: all 0.4s;
}

.port-nav .contents-nav span:hover::before,
.port-navi .contents-nav span:hover::before {
    width: 100%;
    background-color: #e60044;
}

.port-nav .contents-nav span.on,
.port-navi .contents-nav span.on {
    color: #e60044;
}


.port-nav .contents-nav span.on::before,
.port-navi .contents-nav span.on::before {
    width: 100%;
    background-color: #e60044;
}

.nav-box.port-nav.fixed-on01 .contents-nav{
  display: none;
}


.nav-box.port-navi.fixed-on01 .contents-nav {
    padding: 0 20px;
    top: 0px;
}

.nav-box.port-navi.fixed-on01 .contents-nav .part {
    padding:0;
}


.nav-box.port-navi.fixed-on01 .add-on{
    top: -88px;
}

.nav-box.port-navi.fixed-on01 .contents-nav.hover{
    padding: 12px 20px;
    top: 0;
}

.nav-box.port-navi.fixed-on01 .contents-nav.hover .part{
    padding: 12px 0;
}


.nav-box.port-navi.fixed-on01 .add-on.hover{
    top: 0;
}



.contents-nav span.empty {
  cursor: inherit;
}

/* .contents-nav span.on {
  color: #fff;
  background-color: #e60044;
  border-color: #e60044;
} */

.contents-nav span.empty {
  height: 51px;
}

.contents-list .list-box.da-cv {
  position: relative;
  display: inline-block;
  width: 24%;
  max-width: 320px;
  aspect-ratio: 8/9;
  margin-bottom: 80px;
}

.contents-list .list-box.da-cv img {
  width: 100%;
  aspect-ratio: 1/1;
}

.contents-list .list-box.da-cv:nth-child(4n-3) img {
  background-color: blue;
}

.contents-list .list-box.da-cv:nth-child(4n-2) img {
  background-color: red;
}

.contents-list .list-box.da-cv:nth-child(4n-1) img {
  background-color: green;
}

.contents-list .list-box.da-cv:nth-child(4n) img {
  background-color: yellow;
}

.contents-list .list-box.da-cv p {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #000;
  text-align: center;
}

.contents-form {
  position: relative;
  display: block;
  max-width: 1250px;
  width: 100%;
  margin: 0 auto;
  font-size: 0;
}

.contents-form.counsel {
  text-align: left;
  max-width: 1120px;
}

.partnership .contents-form.counsel {
    max-width:1120px;
}

.contents-form .main-contents-middle.counsel {
  margin-right: 0;
}

.main-contents-middle .counsel-title {
  position: relative;
  display: block;
}

.partnership .contents-form .counsel-form input {
    margin-bottom: 32px;
    padding: 12px;
}

.contents-form .counsel-form input,
.contents-form .counsel-form select {
  position: relative;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #818181;
  background-color: transparent;
  color: #818181;
  font-size: 20px;
  line-height: 24px;
  padding: 8px 8px 12px 8px;
  margin-bottom: 32px;
}

.contents-form .counsel-form select.selected {
  color: #0f0f0f;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.contents-form .counsel-form textarea {
  border-color: #818181;
}

.contents-form .counsel-form input:focus {
  color: #0f0f0f;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.contents-form .counsel-form input:focus::placeholder {
  font-weight: 700;
  color: #e60044;
}

.contents-form .counsel-form select:focus {
  color: #e60044;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.contents-form .counsel-form textarea:focus {
  color: #0f0f0f;
  font-weight: 700;
  outline: none;
  border-color: #e60044;
}

.contents-form .counsel-form textarea:focus::placeholder {
  color: #e60044;
  font-weight: 700;
}

.contents-form .counsel-form .type-in {
  color: #0f0f0f;
  font-weight: 700;
  border-bottom: 2px solid #e60044;
}

.contents-form .counsel-form textarea.type-in {
  border-color: #e60044;
}

.portfolio-popup {
  position: fixed;
  /* display: none; */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100vh;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.portfolio-popup.on {
  /* display: block; */
  opacity: 1;
  visibility: visible;
}

.dim {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.portfolio-container {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: 800px;
  padding: 72px;
  font-size: 0;
  background-color: #fff;
  transition: width 0.5s;
}

.portfolio-container.da {
  width: 88%;
}

.on .portfolio-container {
  width: 84%;
}

.on .portfolio-container.da {
  width: 72%;
}

.portfolio-popup-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.portfolio-popup-box .left-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 36%;
  height: 100%;
  padding-right: 32px;
  transition: all 0.2s;
}

.portfolio-popup-box .right-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 64%;
  height: 100%;
  transition: all 0.2s;
}

.on .portfolio-popup-box .left-box {
  /* width: 32.5%; */
  width: calc(100% - 920px);
  overflow-y: auto;
}

.on .portfolio-popup-box .right-box {
  /* width: 67.5%; */
  width: 920px;
}

.portfolio-popup-box .right-box img {
  float: left;
  height: 100%;
  width: 100%;
}

.on .portfolio-popup-box .right-box img {
  float: left;
  height: calc(100% - 16px);
  margin: 8px 0;
  aspect-ratio: 23/16;
}

.portfolio-popup-box .right-box .swiper-container {
  height: calc(100% - 8px);
  margin-bottom: 8px;
}

.on .portfolio-popup-box .right-box .swiper-slide {
  overflow: hidden;
}

.portfolio-popup-box .right-box .swiper-slide img,
.on .portfolio-popup-box .right-box .swiper-slide img {
  float: left;
  width: auto;
  height: 960px;
  aspect-ratio: inherit;
}

.position-frame {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(100% - 48px);
}

.tags {
  margin-bottom: 20px;
}

.tag-frame {
  position: relative;
  display: block;
}

.tag {
  display: inline-block;
  font-size: 14px;
  line-height: 28px;
  font-weight: 500;
  color: #666;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid #666;
  margin-right: 4px;
}

.da .tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.da .tag.on {
  color: #fff;
  background-color: #e60044;
  border: #db0042;
}

.portfolio-popup-box .title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  color: #000;
  margin-bottom: 20px;
  letter-spacing: -1.2px;
}

.highlight {
  font-weight: 700;
  color: #e60012;
}

.details {
  position: relative;
  display: block;
  font-size: 0;
  margin-bottom: 20px;
}

.detail {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 54%;
  margin-bottom: 8px;
}

.detail.side {
  width: 46%;
}

.detail.last {
  margin-bottom: 0;
}

.detail > span {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.label {
  width: 42%;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: #000;
}

.category .label {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

.value {
  width: 58%;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: #666;
}

.description {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
}

.results {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.result {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  max-width: 200px;
  height: 180px;
}

/* .result img {
    float: left;
    height: 180px;
    aspect-ratio: 2/3;
} */

.result .graph {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 47px);
  margin-bottom: 7px;
  padding: 0 24px;
  border-bottom: 1px solid black;
}

.result .graph div {
  position: relative;
  display: block;
  width: 32%;
  height: 100%;
}

/* 증가 */
.result.increase > i {
  position: absolute;
  display: block;
  top: 0;
  left: 40px;
  width: calc(100% - 80px);
  border-bottom: 1px dashed #e60044;
}

.result.increase .graph div span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 10%;
  background-color: #d9d9d9;
  z-index: 5;
}

.result.increase .graph div:last-child span {
  height: 100%;
  background-color: #e60044;
}

.result.increase .graph div i {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("../imgs/graph-arrow.png") no-repeat center;
  background-size: contain;
}

/* 감소 */
.result.decrease .graph div span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #d9d9d9;
  z-index: 5;
}

.result.decrease .graph div:last-child span {
  background-color: #e60044;
}

.result.decrease .graph div i {
  position: absolute;
  display: block;
  top: 0;
  width: 100%;
  border: 1px dashed #e60044;
}

/* 비율 */

.result.ratio .graph div {
  position: absolute;
  display: block;
  width: auto;
  height: calc(100% - 10px);
  aspect-ratio: 1/1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #e60044;
  border-radius: 50%;
  overflow: hidden;
}

.result.ratio .graph div span {
  position: absolute;
  display: block;
  width: auto;
  height: 50%;
  aspect-ratio: 1/1;
  border-radius: 50% 0 0 50%;
}

/* 마트 */

.result.mark .graph > div {
  position: absolute;
  display: block;
  width: auto;
  height: calc(100% - 10px);
  aspect-ratio: 1/1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 10px solid #e60044;
  overflow: hidden;
}

.result.mark .graph div.frame {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  text-align: center;
}

.result.mark .graph div p {
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 18px;
  color: #222222;
}

.result.mark .graph div span {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 900;
  letter-spacing: -1.4px;
  word-break: keep-all;
  color: #e60044;
}

.result .summary {
  position: relative;
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: #222222;
}

.result .summary span {
  font-weight: 700;
  color: #e60044;
}

.works {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.work-item {
  width: calc(100% / 3 - 8px);
  color: #fff;

  font-size: 13px;
  line-height: 24px;
  border-radius: 20px;
  text-align: center;
}

.work-item.on1 {
  background-color: #e60044;
}

.work-item.on0 {
  background-color: #d9d9d9;
}

.close {
  position: sticky;
  display: block;
  top: 0px;
  left: 100%;
  width: 36px;
  height: 36px;
  z-index: 9000;
  cursor: pointer;
}

.close.port-close {
    position: absolute;
    top: 36px;
    right: 36px;
    left: auto;

}


.close::before {
  position: absolute;
  display: block;
  left: 0;
  top: 16px;
  content: "";
  width: 100%;
  height: 4px;
  transform: rotate(45deg);
  background-color: #e60044;
}

.close::after {
  position: absolute;
  display: block;
  left: 0;
  bottom: 16px;
  content: "";
  width: 100%;
  height: 4px;
  transform: rotate(-45deg);
  background-color: #e60044;
}

.portfolio-popup2 {
  position: fixed;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100vh;
  z-index: 200;
}

/* marketer */
.contents-box.list-box {
  padding-top: 80px;
}

.contents-box .list-tab {
  position: relative;
  display: flex;
  width: 1200px;
  padding: 0 140px;
  margin: 0 auto;
  margin-top: 120px;
}

.contents-box .list-tab > div {
  flex: 1;
  border: 1px solid #e60044;
  border-bottom: 1px solid transparent;
  background-color: #fff;
  font-size: 20px;
  line-height: 24px;
  padding: 10px 0;
  color: #e60044;
}

.marketer .contents-box .list-tab {
  margin-top: 40px;
}

.marketer .contents-box .list-tab > div {
  cursor: pointer;
}

.contents-box .list-tab > div.center {
  border-left: 0;
  border-right: 0;
}

.marketer .contents-box .list-tab > div.on {
  background-color: #e60044;
  color: #fff;
}

.contents-box .list-lineup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 1236px;
  margin: 0 auto;
  padding: 28px 0;
  border-top: 1px solid #e60044;
  border-bottom: 1px solid #e60044;
  font-size: 0;
  text-align: left;
}

.contents-box .list-lineup .lineup-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(25%);
  max-width: 300px;
  max-height: 375px;
  margin-right: 12px;
  margin-bottom: 24px;
  aspect-ratio: 4/5;
  border: 1px solid #ccc;
  /* padding: 28px 16px 20px 16px; */
  padding: 18px 12px 12px 12px;
  opacity: 0;
  cursor: pointer;
  transition: all 2s;
  background-color: #fff;
}

.contents-box .list-lineup .lineup-box.on {
  opacity: 1;
}

.contents-box .list-lineup .lineup-box:nth-child(4n) {
  margin-right: 0;
}

.contents-box .list-lineup .lineup-box:hover {
}

.lineup-box .lineup-title {
  position: relative;
  display: block;
  width: 100%;
}

.lineup-box .lineup-intro {
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
  margin-bottom: 12px;
  overflow: hidden;
}

.lineup-box .lineup-reference-list {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  overflow: hidden;
}

.lineup-box .lineup-reference {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 32px;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
}

.lineup-box .lineup-specialty {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 32px;
}

.lineup-box .lineup-specialty::after {
  position: absolute;
  display: block;
  bottom: 0;
  left: 2px;
  width: calc(100% - 4px);
  height: 1px;
  background-color: #c4c4c4;
  content: "";
}

.lineup-box .lineup-detail {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 8px;
  padding-left: 4px;
}

.lineup-box .lineup-more {
  position: relative;
  display: block;
  /* bottom: 20px; */
  /* right: 0; */
  /* padding-right:18px; */
  margin-top: 15px;
  width: 100%;
  text-align: right;
}

.lineup-box .lineup-specialty > span {
  position: absolute;
  display: block;
  top: 4px;
  left: 0;
  font-size: 16px;
  line-height: 16px;
  padding: 4px 8px 4px 30px;
  color: #858585;
}

.lineup-box .lineup-specialty > span i {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 1px;
  background: url("../imgs/codicon_tools.png") no-repeat center center;
}

.lineup-box .lineup-title .mk-info {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 14px 0 16px 144px;
}

.lineup-box .lineup-title .mk-pic {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 132px;
  height: 132px;
  border-radius: 50%;
}

.lineup-box .lineup-title .mk-pic img {
  width: 100%;
  height: 100%;
}

.lineup-box .lineup-title .mk-info span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  line-height: 18px;
  font-weight: 700;
  padding-top: 20px;
  padding-bottom: 2px;
  padding-left: 4px;
  color: #353535;
}

.list-lineup .mk-info span.name {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 38px;
  line-height: 40px;
  font-weight: 700;
  padding: 0;
}

.lineup-box .lineup-title .mk-info p {
  position: relative;
  display: block;
  margin-top: 8px;
  font-size: 18px;
  line-height: 24px;
  padding-left: 2px;
  font-weight: 600;
  color: #e60044;
}

.lineup-box .lineup-intro p {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #e60044;
}

.lineup-box .lineup-intro::after {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #d3d3d3;
  content: "";
}

.lineup-box .lineup-reference-list ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  align-items: normal;
  align-content: normal;
  gap: 8px 2px;
}

.lineup-box .lineup-reference-list ul li {
  position: relative;
  display: block;
}

.lineup-box .lineup-reference-list ul li img {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 20px;
  margin-right: 6px;
}

.lineup-box .lineup-reference ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  align-items: normal;
  align-content: normal;
}

.lineup-box .lineup-specialty ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  gap: 8px;
  padding-bottom: 6px;
}

.lineup-box .lineup-specialty ul.down-list {
  padding-bottom: 14px;
}

.lineup-box .lineup-reference ul li {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  padding-right: 4px;
  color: #a3a3a3;
  text-align: center;
}

.lineup-box .lineup-specialty ul li {
  display: block;
  width: calc(25% - 6px);
  font-size: 10px;
  line-height: 10px;
  padding: 6px;
  border: 1px solid #000;
  color: #000;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
}

.lineup-box .lineup-specialty ul.up-list li {
  background-color: #000;
  border-color: #000;
  color: #fff;
  border-radius: 16px;
}

.lineup-box .lineup-specialty ul.down-list li {
}

/* .lineup-box .lineup-specialty ul li.specialty {
    background-color: rgb(227, 255, 227);
}

.lineup-box .lineup-specialty ul li.media {
    background-color: rgb(233, 233, 255);
}

.lineup-box .lineup-specialty ul li.industry {
    background-color: rgb(255, 238, 238);
} */

.lineup-box .lineup-detail::before {
  position: absolute;
  display: block;
  width: 12px;
  height: 2px;
  right: 0;
  left: calc(100% - 16px);
  bottom: 0;
  transform: rotate(45deg);
  transform-origin: right bottom;
  background-color: #e60044;
  content: "";
}

.lineup-box .lineup-detail::after {
  position: absolute;
  display: block;
  width: calc(100% - 8px);
  height: 2px;
  bottom: 0;
  background-color: #e60044;
  content: "";
}

.lineup-box .lineup-detail span {
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #e60044;
}

.lineup-box .lineup-more span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  line-height: 16px;
  padding: 4px 36px 4px 18px;
  color: #fff;
  background-color: #4d4d4d;
  border-radius: 24px;
}

.lineup-box .lineup-more span i {
  position: absolute;
  display: block;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("../imgs/more-btn.png") no-repeat center center;
  background-size: contain;
}

.marketer-popup {
  position: fixed;
  /* display: none; */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100vh;
  z-index: 200;
  /* opacity: 0; */
  /* visibility: hidden; */
  /* display: block; */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.marketer-popup.on {
  /* display: block; */
  opacity: 1;
  visibility: visible;
}

.marketer-container {
  position: relative;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  height: 720px;
  padding: 48px 60px 60px 60px;
  font-size: 0;
  background-color: #fff;
  overflow-y: auto;
  transition: width 0.5s;
/* Firefox용 표준 속성 */
    scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);
    scrollbar-width: thin;
}

/* 2. Webkit (Chrome, Safari, Edge)용 상세 설정 */
.marketer-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color:rgba(0, 0, 0, 1);
}

.marketer-container::-webkit-scrollbar-thumb {
    background-color: rgba(18, 20, 23, 0.8);
    border-radius: 4px;
}

.marketer-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(18, 20, 23, 1);
}

.marketer-container::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 4px;
}

.marketer-container .counsel-form input {
  color: #333;
}

.marketer-container .counsel-form .type-in {
  color: #333;
}

.marketer-container .counsel-form .form-box.wide input:checked + label i::after {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "✔";
  color: #333;
  font-size: 20px;
}

.marketer-popup-box {
  position: relative;
  display: block;
}

.marketer-popup-top {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}

.marketer-popup-top .info {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 72%;
  height: 100%;
}

.info h4 {
  position: relative;
  display: block;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #e60044;
}

.info .marketer {
  position: relative;
  display: block;
  margin-top: 16px;
}

.info .marketer .name {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #000;
}

.info .marketer .team {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
  padding-left: 8px;
  color: #666666;
}

.info .summary {
  position: relative;
  display: block;
  min-height: 72px;
  font-size: 16px;
  line-height: 28px;
  margin-top: 12px;
  color: #222222;
}

/* 
.info .specialty {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 260px;
  padding: 24px 0;
} */

.info .specialty {
  position: relative;
  display: block;
  width: 100%;
  padding: 28px 0;
}

.info .inbound-button {
  position: absolute;
  display: block;
  bottom: 12px;
  left: 0;
  font-size: 20px;
  line-height: 30px;
  padding: 10px 48px;
  background-color: #e60044;
  border-radius: 8px;
  color: #fff;
}

.specialty .specialty-box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 34%;
}

.specialty .specialty-box:nth-child(3) {
  margin-top: 18px;
}

.specialty-box p {
  font-size: 14px;
  line-height: 18px;
  color: #000;
  font-weight: 700;
  margin-bottom: 8px;
}

.specialty-box div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 20px);
  margin-right: 20px;
  font-size: 16px;
  line-height: 20px;
  padding: 4px 16px;
  color: #fff;
  background-color: #e60044;
  border-radius: 24px;
  text-align: center;
}

.specialty .skill {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 32%;
  height: 100%;
  text-align: right;
}

.specialty .skill img {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 10 / 7;
  z-index: 10;
}

/* .info .reference {
  position: absolute;
  display: flex;
  bottom: 108px;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-right: 48px;
} */

.info .reference {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-top: 24px;
  padding-right: 160px;
}

.info .reference p {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  color: #000;
  font-weight: 700;
}

.info .reference div {
  position: relative;
  height: 48px;
  padding-right: 36px;
}

.info .reference div.count {
  padding-top: 8px;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  padding-right: 0;
  color: #e60044;
}

.info .reference div img {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 32px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.marketer-popup-top .pic {
  position: relative;
  display: block;
  width: 32%;
  margin-left: 68%;
  aspect-ratio: 151/194;
  overflow: hidden;
}

.marketer-popup-top .pic img {
  position: absolute;
  display: block;
  height: 100%;
}

.marketer-popup-mid {
  position: relative;
  display: block;
  width: 100%;
}

.marketer-popup-mid .marketer-chart h5 {
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  font-weight: 700;
}

.marketer-popup-mid .chart-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  font-size: 0;
}

.chart-set > div {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  width: calc(50% - 30px);
  flex-basis: calc(50% - 30px);
  height: 375px;
}

.chart-set > div.reference-box {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.chart-set > div.reference-box.on {
  /* display: block; */
  opacity: 1;
  visibility: visible;
}

.chart-set .logo-box {
  position: relative;
  width: 250px;
  flex-basis: 250px;
}

.chart-set .empty {
  width: 50px;
  flex-basis: 50px;
}

.chart-set .chart-box {
  width: calc(100% - 300px);
  padding: 32px 0;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.chart-set .chart-box .chart-point {
  padding: 12px 0;
  color: #ff0055;
}

.chart-set .chart-box .chart-container {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
}

.chart-set .chart-box .chart.line-type > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 25%;
}

.chart-set .chart-box .chart.line-type > div ul {
  position: relative;
  display: block;
  font-size: 0;
}

.chart-set .chart-box .chart.line-type > div ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 12.5%;
  height: 45px;
  border: 1px dotted black;
}

.chart-set .chart-box .chart.bar-type > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 50%;
}

.chart-set .chart-box .chart.bar-type span {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 20px;
}

.chart-set .chart-box .chart.bar-type span.default {
  background-color: #dbdbdb;
}

.chart-set .chart-box .chart.bar-type span.change {
  background-color: #e60045;
}

.chart-set .chart-box .chart.bar-type > div ul {
  position: relative;
  display: block;
  font-size: 0;
}

.chart-set .chart-box .chart.bar-type > div ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 25%;
  height: 90px;
  border: 1px dotted black;
}

.chart-set .chart-box .chart-effect {
  padding-top: 16px;
  line-height: 20px;
}

.chart-set .chart-box .chart-effect span {
  color: #ff0055;
  font-weight: 700;
}

.marketer-popup-bot {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

.marketer-popup-bot .marketer-process {
  position: relative;
  display: block;
  margin-bottom: 120px;
}

.marketer-popup-bot .marketer-process img {
  height: 100%;
}

.marketer-inbound {
  position: relative;
  display: flex;
  gap: 60px;
  padding: 0 80px 40px 80px;
}

.marketer-inbound .profile-pic {
  position: relative;
  flex: 2;
}

.marketer-inbound .profile-pic img {
  position: absolute;
  display: block;
}

.marketer-inbound .marketer-form {
  flex: 7;
  position: relative;
  display: block;
}

.marketer-form h5 {
  position: relative;
  display: block;
  font-size: 32px;
  line-height: 36px;
  color: #000;
  font-weight: 700;
  margin-top: 80px;
  margin-bottom: 40px;
}

.marketer-inbound .counsel-form .form-box {
  margin-right: 0;
  max-width: none;
}

.marketer-inbound .counsel-form .form-box:nth-child(2n) {
  margin-right: 40px;
}

/* 푸터 */
.footer {
  position: relative;
  display: block;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 100;
}

.footer .inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 60px 0 80px;
}

.footer-left {
  width: calc(100% - 480px);
  margin-right: 0px;
}

.footer-left h2 {
  position: relative;
  display: block;
  margin-bottom: 24px;
}

.footer-left h2 img {
  opacity: 0.6;
}

.footer-left .copyright {
  margin-top: 20px;
}

.footer-left span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  margin-right: 18px;
  color: #999999;
}

.footer-left .copyright span {
  line-height: 40px;
}

.footer-left .social-icons {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.footer-left .social-icons a {
  margin-right: 10px;
}

.footer-right {
  width: 460px;
}

.footer-right > img {
    width: 100%;
}

.footer-right .partners {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 36px 62px;
}

.footer-right .partners img {
  width: calc(100% / 3);
}

.footer-right p {
  margin: 0;
}

.contents-footer.marketer {
  position: relative;
  display: block;
  width: 100%;
  padding: 100px 0;
  background-color: #fff;
}

.flow-box {
  overflow: hidden;
  width: 100%;
}

.logo-flow {
  display: flex;
  white-space: nowrap;
}

.flow-left .logo-flow {
  animation: scroll-left 16s linear infinite;
}

.flow-right .logo-flow {
  animation: scroll-right 16s linear infinite;
}

.flow-left .logo-flow img {
  height: 40px;
  /* 로고 크기 조절 */
  margin: 12px 73px 12px 4px;
}

.flow-right .logo-flow img {
  height: 40px;
  margin: 12px 52px 12px 4px;
}

/* 무한 스크롤 효과 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

/* 관리자페이지 */

.control-container {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 40px;
}

.control-container .control-menu {
  flex: 1;
}

.control-container .control-form {
  flex: 6;
}

.control-container h2 {
  font-size: 32px;
  line-height: 36px;
  padding: 12px 28px;
  background-color: #3f3f3f;
}

.control-container .control-tab {
  position: relative;
}

.control-container .control-tab span {
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  padding: 8px 0;
}

.control-tab span.insert {
  background-color: #28a745;
  /* 부드러운 녹색 */
}

.control-tab span.insert:hover {
  background-color: #218838;
  /* 어두운 녹색 */
}

/* 삭제 (Remove) - 빨간색 */
.control-tab span.remove {
  background-color: #dc3545;
  /* 강렬한 붉은색 */
}

.control-tab span.remove:hover {
  background-color: #c82333;
  /* 어두운 붉은색 */
}

/* 수정 (Update) - 노란색 */
.control-tab span.update {
  background-color: #ffc107;
  /* 밝은 노란색 */
  color: black;
}

.control-tab span.update:hover {
  background-color: #e0a800;
  /* 어두운 노란색 */
}

.contents-footer {
  position: relative;
  display: block;
  /* padding: 200px 0; */
  padding-bottom: 200px;
  background-color: #fff;
}

.contents-footer.partnership {
    padding-top: 120px;
}


.contents-footer .contents-title {
  letter-spacing: 20px;
}

.contents-footer .contents-box {
  padding-top: 0;
}

.contents-footer.pma .contents-box .cousel-title {
  position: absolute;
  display: flex;
  top: 40px;
  left: 0;
  width: 100%;
}

.contents-footer.pma .contents-box .cousel-title div {
    flex:7;
  font-size: 32px;
  line-height: 40px;
  font-weight: 900;
  color: #333;
}

.contents-footer.pma .contents-box .cousel-title div.form-box {
  padding-left: 40px;
}

.contents-footer.partnership .contents-box .cousel-title div {
  font-size: 40px;
  line-height: 48px;
}

.contents-footer.pma .contents-box .cousel-title div.info-box {
  flex: 4;
}

.contents-footer.pma.partnership .contents-box .cousel-title div.info-box {
    flex: 5;
  text-align:center;
      margin-right: 20px;
}

.contents-footer.pma .contents-box .cousel-title div.form-title {
  flex: 7;
  padding-left: 80px;
}


.contents-footer.partnership .contents-box .cousel-title div.form-title {
  flex: 5;
  padding-left: 0;
  text-align:center;
}


.item-detail > div.more {
  text-align: right;
  padding-top: 40px;
}

.item-detail > div.more div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
  padding: 18px 48px;
  background-color: #e60044;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.quick-bar {
  position: fixed;
  display: block;
  bottom: 0;
  width: 100%;
  z-index: 100;
  backdrop-filter: blur(20px);
  background-color: rgba(0, 0, 22, 0.6);
}

.quick-bar ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 80%;
  max-width: 1280px;
  padding: 12px 0;
  margin: 0 auto;
}

.quick-bar ul li:nth-child(1) {
  flex: 4;
}

.quick-bar ul li:nth-child(2) {
  flex: 7;
}

.quick-bar li > div {
  position: relative;
  display: block;
}

.quick-bar .inbound-tab {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 24px;
}

.quick-bar li > div > div {
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}

.quick-bar .info-tab div:nth-child(1) {
  position: absolute;
  display: block;
  width: 312px;
  top: 0;
  left: 0;
  z-index: 10;
  font-size: 16px;
  line-height: 36px;
  font-weight: 700;
  background-color: #e60044;
  border-radius: 24px;
}

.quick-bar .info-tab div:nth-child(2) {
  position: relative;
  display: block;
  margin-left: 280px;
  padding-left: 32px;
  font-size: 16px;
  line-height: 36px;
  font-weight: 700;
  padding-right: 12px;
  background-color: #fcf9f9;
  color: #000016;
  border-radius: 24px;
}

.quick-bar .inbound-tab div {
  flex: 3;
}

.quick-bar .inbound-tab div.wide {
  flex: 5;
}

.quick-bar .inbound-tab div.middle {
  flex: 4;
}

.quick-bar .inbound-tab div.input-button {
  flex: 2;
}

.quick-bar li .kakako-tab {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  background: url("../imgs/kakao-icon.png") no-repeat center center;
  background-size: cover;
  border-radius: 4px;
}

.quick-bar .inbound-tab div input {
  position: relative;
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #c5c5ca;
  border-radius: 0;
  color: #818181;
}

.quick-bar .inbound-tab div select {
  position: relative;
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 8px 0 8px 10px;
  text-align: left;
  border: 1px solid #c5c5ca;
  border-radius: 0;
  color: #818181;
}

.quick-bar .inbound-tab div select option {
  color: #4e4e5d;
  padding-left: 0;
}

.input-button button {
  position: relative;
  display: block;
  width: 100%;
  background-color: #e60044;
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 20px;
  padding: 8px 0;
  border-radius: 5px;
  cursor: pointer;
}

.quick-bar .inbound-tab div input:focus,
.quick-bar .inbound-tab div select:focus {
  color: #e60044;
  font-weight: 700;
}

.quick-bar .inbound-tab div input.type-in {
  color: #0f0f0f;
  font-weight: 700;
}

.quick-bar .inbound-tab div select.selected {
  color: #0f0f0f;
  font-weight: 700;
}

.pma .contents-form .counsel-form .privacy-info-popup {
  border: 2px solid white;
  background-color: #2f2f35;
  color: #f0f0f0;
}

.partnership .contents-form .counsel-form .privacy-info-popup {
left:20px;
bottom:102px;
width:calc(100% - 40px);
}

.swiper-gallery-container .img-wrap {
    padding-bottom: 100%;
    border-radius: 10px;
}


.img-wrap .img-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-wrap .img-item img {
    display: block;
    border: 0;
    width: 100.5%;
    height: auto;
    margin: 0px auto;
}

.dodo_gallery .post_content {
    position: relative;
}

.dodo_gallery .post_text {
    overflow: hidden;
    font-size: 1rem;
    color: #fff;
    margin-top: 25px;
    text-align: center;
    word-break: keep-all;
}


.dodo_gallery .post_text p {
    word-break: keep-all;
}


.main-contents-middle.swiper-contents.article-contents {
  width: 1481px;
  min-height: 452px;
  margin: 0 auto;
  margin-top: 40px;
  margin-right: 205px;
  padding: 0 105px;
}

.swiper-slide.article-slide > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 5px);
    aspect-ratio: 98 / 113;
}

.article-card {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgb(1, 0, 21);
    transition: all 0.2s;
    margin-right: 4px;            
    margin-bottom: 4px;
    margin-top: 4px;
}

div.article-card:hover{
/* background-color: rgba(250, 241, 244, 0.45); */
    background-color: #ff0055;
/* background: #CFCFCF; */
/* background: linear-gradient(-45deg,rgba(207, 207, 207, 1) 0%, rgba(255, 255, 255, 1) 75%, rgba(232, 232, 232, 1) 100%); */
    /* border: 1px solid #ff0055; */
    /* box-shadow: 0px 0px 4px 4px rgba(255, 255, 255, 0.95); */
    /* color: #141313; */
    color: white;
}

.initial-hover div.article-card {
    background-color: #ff0055;
    color: white;
}


.initial-hover .article-head .sub-head{
        color: white !important;
}




.article-slide .article-head {
    width: 100%;
    height: calc(450% / 9);
    padding: 30px;
}

.article-slide .article-head .sub-head{
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 30px;
    font-weight: 700;
    color : #ff0055;
}
.article-slide .article-head .main-head{
    position: relative;
    display: block;
    font-size: 28px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: -0.6px;
    word-break: keep-all;
}

.article-slide .article-head .main-head span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 20px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: -1.2px;
}



.article-slide .article-body {
    width: 100%;
    height: calc(350% / 9);
    overflow: hidden;
    position: relative;
}

.article-slide .article-body .article-img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 0.2s;
}

div.article-card:hover .article-head .sub-head{
    color: white;
}


div.article-card:hover .article-img {
    opacity: 1;
}


.article-slide .article-footer {
    width: 100%;
    height: calc(100% / 9);
}


.article-footer > div {
    line-height: 50px;
    text-align: right;
    padding-right: 20px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.article-swiper {
    position: relative;
}

.article-swiper .swiper-button-prev {
    left: 0;
}


/* Swiper 네비게이션 버튼 기본 스타일 초기화 (선택 사항) */
/* Swiper 버전에 따라 이미 존재하는 기본 스타일을 덮어쓰거나 재정의할 수 있습니다. */
.article-contents .swiper-button-prev:after,
.article-contents .swiper-button-next:after {
    content: ''; /* 기본으로 들어가는 unicode 화살표 제거 */
    display: none; /* 또는 content를 제거하지 않고 display: none; */
}

/* 모든 네비게이션 버튼에 공통 스타일 적용 */
.article-contents .swiper-button-prev,
.article-contents .swiper-button-next {
    width: 46px; /* 원의 너비 */
    height: 46px; /* 원의 높이 */
    border-radius: 50%; /* 원 형태로 만듦 */
    background-color: rgb(51, 52, 68); /* 호버 시 배경색 변경 (선택 사항) */
    display: flex; /* 내부 아이콘 정렬을 위해 flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    cursor: pointer;
}


/* 네비게이션 버튼 호버 시 스타일 */
.article-contents .swiper-button-prev:hover,
.article-contents .swiper-button-next:hover {
    background-color: rgb(51, 52, 68); /* 호버 시 배경색 변경 (선택 사항) */
}

/* 이전 버튼에 화살표 아이콘 추가 */
.article-contents .swiper-button-prev::before {
    content: '←'; /* 왼쪽 화살표 unicode */
    font-size: 26px; /* 화살표 크기 */
    line-height: 26px;
    color: rgb(1, 0, 21);
    background-color: rgb(51, 52, 68); /* 호버 시 배경색 변경 (선택 사항) */
    font-weight: 700;
}

/* 다음 버튼에 화살표 아이콘 추가 */
.article-contents .swiper-button-next::before {
    content: '→'; /* 오른쪽 화살표 unicode */
    font-size: 26px; /* 화살표 크기 */
    line-height: 26px;
    color: rgb(1, 0, 21);
    background-color: rgb(51, 52, 68); /* 호버 시 배경색 변경 (선택 사항) */
    font-weight: 700;
}

/* 만약 Font Awesome과 같은 아이콘 라이브러리를 사용한다면 */
/* .swiper-button-prev::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f060'; // fa-arrow-left
}
.swiper-button-next::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f061'; // fa-arrow-right
} */

.article-slide .article-head .main-sub {
        position: relative;
    display: block;
    font-size: 20px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: -1.2px;
}


.board-container {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: blue; */
    /* z-index: 10000; */
}


/*
 * (신규) 3:7 분할 패널 스타일
 */

/* 두 패널을 감싸는 전체 컨테이너 */
#split-panel-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    
    /* (중요) 평소에는 클릭 이벤트를 막고, 하위 패널들이 밖으로 나가도 안 보이게 */
    pointer-events: none;
    overflow: hidden; 
}

/* 30%, 70% 패널의 공통 스타일 */
.split-panel {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: #ffffff;
    
    /* (중요) 부드러운 애니메이션 효과 */
    transition: transform 0.4s ease-in-out; 
}

/* 30% 왼쪽 패널 */
#split-panel-left {
    left: 0;
    width: 30%;
    background-color: #f8f8f8; /* 목록 영역은 약간 다른 배경색 */
    
    /* (중요) 평소에 왼쪽 밖으로 숨기기 */
    transform: translateX(-100%); 
}

/* 70% 오른쪽 패널 */
#split-panel-right {
    right: 0;
    width: 70%;
    
    /* (중요) 평소에 오른쪽 밖으로 숨기기 */
    transform: translateX(100%); 
}

/* * 컨테이너에 .show 클래스가 추가되었을 때
 */
#split-panel-container.show {
    /* (중요) 클릭 이벤트를 다시 활성화 */
    pointer-events: auto;
}

#split-panel-container.show #split-panel-left {
    /* (중요) 왼쪽 패널을 제자리로 */
    transform: translateX(0);
}

#split-panel-container.show #split-panel-right {
    /* (중요) 오른쪽 패널을 제자리로 */
    transform: translateX(0);
}


/* 패널 내부의 실제 컨텐츠 영역 (스크롤) */
.panel-body-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box; 
}

/* 왼쪽 패널 컨텐츠 여백 */
#left-panel-body {
    padding: 30px;
}

/* 오른쪽 패널 컨텐츠 여백 (닫기 버튼 고려) */
#right-panel-body {
    padding: 70px 40px 40px 40px; 
}

/* 닫기 버튼 (오른쪽 패널 내부에 위치) */
.panel-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    z-index: 10;
}
.panel-close:hover {
    background: #ddd;
}

.warning {
    position: fixed;
    display: block;
    right: 40px;
    bottom: 40px;
    width: 400px;
    height: 560px;
    z-index: 1000000;
}

.warning-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 36px;
  line-height: 48px;
  font-weight: bold;
  cursor: pointer;
}

.warning img {
    width: 400px;
    height: 560px;
    border-radius: 24px;
}

.empty-state {
    padding: 48px 20px;
    text-align: center;
    color: #666;
}

.empty-state strong {
    display: block;
    font-size: 18px;      /* 👈 제목 크기 */
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
    line-height: 1.4;
}

.empty-state p {
    font-size: 14px;      /* 👈 본문 크기 */
    font-weight: 400;
    color: #888;
    line-height: 1.6;
}

.empty-state strong {
    font-size: 20px;
    letter-spacing: -0.02em;
}

.empty-state p {
    font-size: 15px;
}

.empty-state.preparing .badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 12px 20px;
    font-size: 30px;
    font-weight: 700;
    border-radius: 24px;
    background: #ffe4ed;
    color: #555;
}

.navi-hide {
    position: absolute;
    width:100%;
    height: 112px;
    overflow: hidden;
}


.navi-hide > .on {
    

}

.navi-hide.on > .on {
    display: none;;
}