@charset "UTF-8";
.flex_center {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#mainContent1 .sec_wrap {
  overflow: hidden !important;
}

.none_1000 {
  display: block;
}

.block_1000 {
  display: none;
}

.none_500 {
  display: block;
}

.block_500 {
  display: none;
}

/****** 공통 *******/
.main_section {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  min-height: 75rem;
  z-index: 1;
}

.pin-spacer {
  width: 100% !important;
}

.main_wrap {
  position: relative;
}

/****** 메인 비주얼 영역 *******/
.sec_mainVisual {
  width: 100%;
  height: 100vh;
}
.sec_mainVisual .main_frame {
  width: 100%;
  height: 100%;
  position: relative;
}
.sec_mainVisual .main_visual {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
  pointer-events: auto;
}
.sec_mainVisual .main_visual .wrap_center_video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 5rem;
}
.sec_mainVisual .main_visual .wrap_center_video .wrap_link {
  order: 2;
}
.sec_mainVisual .main_visual .wrap_center_video h3.link {
  background-color: #000;
  border-radius: 4rem;
  margin: 0 auto;
  padding: 1rem 2rem;
  text-align: center;
  word-break: keep-all;
  z-index: 5;
  pointer-events: auto;
  transition: all 0.2s;
}
.sec_mainVisual .main_visual .wrap_center_video h3.link:hover {
  background-color: rgba(12, 12, 12, 0.8823529412);
}
.sec_mainVisual .main_visual .wrap_center_video h3.link a {
  position: relative;
  font-size: 2rem;
  padding-right: 2.6rem;
  pointer-events: auto;
}
.sec_mainVisual .main_visual .wrap_center_video h3.link a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("../img/icon/icon_chevron_right_white.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.sec_mainVisual .main_visual .visual_wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec_mainVisual .main_visual .centered_visual {
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
  max-height: 58.4rem;
}
.sec_mainVisual .main_visual .video_wrap {
  height: 52rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.sec_mainVisual .main_visual .video_wrap video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}
.sec_mainVisual .main_visual .video_wrap::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg/main_visual_logo_bg.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}
.sec_mainVisual .main_visual .video_wrap .main_vid {
  width: 99%;
  height: 99%;
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.sec_mainVisual .main_visual .alphabet_wrap {
  height: 4.1rem;
  margin-bottom: 5rem;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet {
  height: 4.1rem;
  display: inline-block;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet.char_m {
  margin-right: 6.2rem;
  padding-left: 8.1rem;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet.char_g {
  margin-right: 1rem;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet.char_i {
  margin-left: 1.6rem;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet.char_n {
  margin-left: 7.8rem;
}
.sec_mainVisual .main_visual .alphabet_wrap .logo_alphabet.char_e {
  margin-left: 6.8rem;
}

/******* UX&UI 컨설팅 영역 *******/
.sec_consulting .sec_wrap {
  width: 100%;
  position: relative;
  height: 100%;
}
.sec_consulting .bg_wrap {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}
.sec_consulting .bg_wrap::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: calc(100% - 18rem);
  height: 40rem;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 5rem 5rem 0;
  border: 1px solid #777;
  z-index: 0;
  background-image: url("../img/bg/main_consulting_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.sec_consulting .consult_con_wrap {
  width: 156rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.sec_consulting .consult_con_wrap .consult_con {
  display: flex;
  position: relative;
  margin: 0 auto;
}
.sec_consulting .consult_con .text_wrap {
  margin-left: 14rem;
  height: 100vh;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sec_consulting .consult_con .text_wrap h2 {
  font-size: 5rem;
  font-family: "NotoSansBold", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1;
  margin-bottom: 5rem;
}
.sec_consulting .consult_con .text_wrap p {
  font-size: 1.6rem;
  font-family: "NotoSansThin", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.8;
}
.sec_consulting .consult_con .text_wrap .btn_wrap {
  margin-top: 3.6rem;
}
.sec_consulting .consult_con .carousel_wrap {
  position: relative;
  height: 100vh;
  margin-left: auto;
  padding: 0 2rem;
  z-index: 1;
  padding-top: 20vh;
}
.sec_consulting .consult_con .carousel_wrap .swConsulting {
  margin-top: 2.5rem;
  padding-bottom: 44rem;
  overflow: visible;
}
.sec_consulting .consult_con .carousel_wrap .swConsulting .swiper-wrapper {
  display: block;
}
.sec_consulting .consult_con .carousel_wrap .consult_item {
  width: 100%;
  height: 100% !important;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec_consulting .consult_con .carousel_wrap .consult_item .wrap_img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec_consulting .consult_con .carousel_wrap .consult_item .wrap_img img {
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.6));
}

.swiper-pagination {
  display: none;
}

/******* 포트폴리오 영역 *******/
.sec_portfolio {
  position: relative;
}
.sec_portfolio .sec_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 11.4rem 0 4.8rem;
}
.sec_portfolio .title_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180rem;
  margin: 0 auto;
  margin-bottom: 3rem;
}
.sec_portfolio .title_wrap h2 {
  font-size: 3rem;
  font-family: "NotoSansBold", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1;
}
.sec_portfolio .title_wrap h2 span {
  color: #253aeb;
}
.sec_portfolio .title_wrap .btn_wrap {
  margin-left: auto;
}
.sec_portfolio .carousel_wrap {
  width: 100%;
  z-index: 2;
}
.sec_portfolio .carousel_wrap .swiper-wrapper {
  padding: 2.1rem 0;
}
.sec_portfolio .swiper-slide {
  width: 40rem;
  animation-duration: 3200ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
.sec_portfolio .swiper-slide .slide_con_wrap {
  border-radius: 5rem;
  position: relative;
}
.sec_portfolio .swiper-slide .slide_con_wrap .wrap_img {
  border: 1px solid #777;
  overflow: hidden;
  border-radius: 5rem;
  width: 40rem;
  height: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
}
.sec_portfolio .swiper-slide .slide_con_wrap .wrap_img::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
  transition: all 0.3s;
}
.sec_portfolio .swiper-slide .slide_con_wrap .wrap_img img {
  width: 100%;
  transition: all 0.3s;
}
.sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 7.2rem 5rem;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap .pf_title {
  width: 100%;
  font-family: "NotoSansBold", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 2.4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap .pf_caption {
  width: 100%;
  font-family: "NotoSansRegular", "나눔바른고딕", "NanumBarunGothic", "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2rem;
  line-height: 1.5;
}
.sec_portfolio .swiper-slide .slide_con_wrap:hover .wrap_img {
  border-color: #253aeb;
}
.sec_portfolio .swiper-slide .slide_con_wrap:hover .wrap_img::after {
  opacity: 0.1;
}
.sec_portfolio .swiper-slide .slide_con_wrap:hover .wrap_img img {
  transform: scale(120%);
}
.sec_portfolio .swiper-slide .slide_con_wrap:hover .caption_wrap .pf_title, .sec_portfolio .swiper-slide .slide_con_wrap:hover .caption_wrap .pf_caption {
  filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, 0.8));
}
.sec_portfolio .swiper-slide:nth-of-type(4n) {
  animation-name: waveSlide01;
  animation-delay: 0;
}
@keyframes waveSlide01 {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.sec_portfolio .swiper-slide:nth-of-type(4n+1) {
  animation-name: waveSlide02;
  animation-delay: 0.8s;
}
@keyframes waveSlide02 {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.sec_portfolio .swiper-slide:nth-of-type(4n+2) {
  animation-name: waveSlide03;
  animation-delay: 1.6s;
}
@keyframes waveSlide03 {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.sec_portfolio .swiper-slide:nth-of-type(4n+3) {
  animation-name: waveSlide04;
  animation-delay: 2.4s;
}
@keyframes waveSlide04 {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@media all and (max-width: 1920px) {
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .bg_wrap::after {
    width: 174rem;
  }
}
@media all and (max-width: 1850px) {
  /******* 포트폴리오 영역 *******/
  .sec_portfolio .title_wrap {
    width: 100%;
    padding: 0 4rem;
  }
}
@media all and (max-width: 1760px) {
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .bg_wrap::after {
    width: 100%;
    border-radius: 0;
  }
  .sec_consulting .consult_con_wrap {
    width: 100%;
    padding: 0 4rem 0 10rem;
  }
  .sec_consulting .consult_con .text_wrap {
    margin-left: 0;
  }
}
@media all and (max-width: 1360px) {
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual {
    height: unset;
  }
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .consult_con_wrap {
    padding: 0 2rem 0 4rem;
  }
  .sec_consulting .consult_con .carousel_wrap .swConsulting {
    padding-bottom: 36rem;
  }
  .sec_consulting .consult_con .carousel_wrap .consult_item {
    width: 50rem;
  }
  .sec_consulting .consult_con .carousel_wrap .consult_item .wrap_img img {
    width: 100%;
  }
}
@media all and (max-width: 1200px) {
  .main_section {
    height: unset;
    min-height: unset;
  }
  .none_1200 {
    display: none;
  }
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual {
    height: unset;
    padding: 20vh 0 10vh;
  }
  .sec_mainVisual .main_visual {
    height: unset;
  }
  .sec_mainVisual .main_visual .video_wrap {
    height: 35rem;
  }
  .sec_mainVisual .main_visual .centered_visual {
    gap: 2.2rem;
  }
  .sec_mainVisual .main_visual .alphabet_wrap {
    display: none;
  }
  .sec_mainVisual .main_visual .textlogo_wrap {
    display: flex;
    justify-content: center;
  }
  .sec_mainVisual .main_visual .textlogo_wrap img {
    width: 88%;
  }
}
@media all and (max-width: 1000px) {
  .none_1000 {
    display: none;
  }
  .block_1000 {
    display: block;
  }
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .bg_wrap {
    position: static;
    width: 100%;
    height: 100%;
  }
  .sec_consulting .bg_wrap::after {
    height: 64rem;
    transform: translateY(0);
    top: initial;
    bottom: 6rem;
  }
  .sec_consulting .consult_con_wrap {
    top: 0;
    padding: 0;
    padding: 10vh 0 12vh;
    position: relative;
  }
  .sec_consulting .consult_con_wrap .consult_con {
    flex-direction: column;
  }
  .sec_consulting .consult_con .text_wrap {
    height: auto;
    text-align: center;
  }
  .sec_consulting .consult_con .text_wrap p {
    line-height: 1.9;
    padding: 0 4em;
  }
  .sec_consulting .consult_con .text_wrap .btn_wrap {
    display: flex;
    justify-content: center;
  }
  .sec_consulting .consult_con .carousel_wrap {
    height: 100%;
    width: 100%;
    margin-top: 6rem;
    padding: 4.5rem 0;
  }
  .sec_consulting .consult_con .carousel_wrap .swConsulting {
    width: 100%;
    margin: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  .sec_consulting .consult_con .carousel_wrap .swConsulting .swiper-wrapper {
    display: flex;
    align-items: center;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide .wrap_img img {
    width: auto;
    height: 100%;
  }
  .swiper-pagination {
    display: block;
  }
  /******* 포트폴리오 영역 *******/
  .sec_portfolio .sec_wrap {
    padding: 10vh 0 20vh;
  }
  .sec_portfolio .title_wrap {
    margin-bottom: 0;
  }
  .sec_portfolio .title_wrap h2 {
    font-size: 5rem;
    text-align: center;
  }
  .sec_portfolio .carousel_wrap {
    margin: 10% 0;
  }
  .sec_portfolio .swiper-slide {
    width: 30rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .wrap_img {
    width: 30rem;
    height: 30rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap {
    padding: 3rem;
  }
}
@media all and (max-width: 780px) {
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual .main_visual .wrap_center_video .wrap_link {
    width: 100%;
    padding: 0 8rem;
  }
  .sec_mainVisual .main_visual .wrap_center_video h3.link {
    border-radius: 5rem;
  }
  .sec_mainVisual .main_visual .wrap_center_video h3.link a {
    font-size: 1.8rem;
  }
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .bg_wrap::after {
    height: 57.5rem;
  }
  .sec_consulting .consult_con .carousel_wrap .swConsulting {
    height: 48.6rem;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide {
    width: 100%;
    height: 100%;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide .wrap_img {
    padding: 2rem;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide .wrap_img img.long_pic {
    width: auto;
    height: 100%;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide .wrap_img img.wide_pic {
    width: 100%;
    height: auto;
  }
  /******* 포트폴리오 영역 *******/
  .sec_portfolio .swiper-slide {
    height: auto;
    animation: none;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap {
    position: static;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap {
    position: static;
    padding: 0;
    text-align: center;
    margin-top: 3rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap .pf_title {
    margin-bottom: 1.5rem;
  }
}
@media all and (max-width: 680px) {
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual .main_visual .scroll_down_wrap {
    display: none;
  }
}
@media all and (max-width: 500px) {
  .none_500 {
    display: none;
  }
  .block_500 {
    display: block;
  }
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual .main_visual .textlogo_wrap img {
    width: 25.8rem;
  }
  /****** 메인 비주얼 영역 *******/
  .sec_mainVisual .main_visual .wrap_center_video .wrap_link {
    padding: 0 2rem;
  }
  .sec_mainVisual .main_visual .wrap_center_video h3.link a {
    font-size: 1.6rem;
    padding-right: 2rem;
  }
  .sec_mainVisual .main_visual .wrap_center_video h3.link a::after {
    width: 1.2rem;
    height: 1.8rem;
  }
  /******* UX&UI 컨설팅 영역 *******/
  .sec_consulting .bg_wrap::after {
    height: 36.6rem;
  }
  .sec_consulting .consult_con .text_wrap h2 {
    font-size: 3rem;
    margin-bottom: 4rem;
  }
  .sec_consulting .consult_con .text_wrap p {
    font-size: 1.4rem;
  }
  .sec_consulting .consult_con .text_wrap .btn_wrap {
    margin-top: 3rem;
  }
  .sec_consulting .consult_con .carousel_wrap {
    padding: 3rem 0;
  }
  .sec_consulting .consult_con .carousel_wrap .swConsulting {
    height: 30.6rem;
    padding-bottom: 0;
  }
  .sec_consulting .consult_con .carousel_wrap .swiper-slide .wrap_img {
    padding: 1.4rem;
  }
  /******* 포트폴리오 영역 *******/
  .sec_portfolio .title_wrap h2 {
    font-size: 3rem;
  }
  .sec_portfolio .title_wrap h2 span {
    display: none;
  }
  .sec_portfolio .carousel_wrap {
    height: auto;
  }
  .sec_portfolio .carousel_wrap .swPortfolio {
    height: auto;
  }
  .sec_portfolio .carousel_wrap .swiper-wrapper {
    padding: 0;
  }
  .sec_portfolio .swiper-slide {
    width: 15rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .wrap_img {
    border-radius: 2.5rem;
    width: 15rem;
    height: 15rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap .pf_title {
    font-size: 1.6rem;
  }
  .sec_portfolio .swiper-slide .slide_con_wrap .caption_wrap .pf_caption {
    font-size: 1.4rem;
  }
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -40px;
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #fff);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: #fff;
}