:root {
  --en-font:  "Archivo", sans-serif;
  --kr-font:  "Noto Sans KR", sans-serif;
}


.noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.archivo {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  
}
.navbar .navbar-nav .nav-link
.container-fluid {
  box-sizing: border-box;
  padding-left:2.5rem;
  padding-right:2.5rem;
}

h4 {
    font-size: 2rem;
    letter-spacing: -2px;
    font-weight: 600;}

.nav-item.mgw {margin:0 5px 0;}

/* --------------- Menu --------------- */
.navbar-collapse {
  /* flex-basis: 100%; */
  /* flex-grow: 1; */
  align-items: center;
  justify-content: center;
}

.menu-icon {
    padding: 0 15px;
}
.navbar .topnav .menu-icon {
    margin-left: 80px;
}


/* --------------- Sub header title --------------- */
.header-mda .caption .h1 {
  font-size: 13rem;
  font-family: var(--en-font);
  line-height: .85;
  padding-bottom: 0px;
  font-weight: 600;
  letter-spacing: -10px;
}
.subtit {
  font-family: var(--kr-font);
  font-size: 2.6rem;
  letter-spacing: -3.2px;
  font-weight: 600;
  margin-top:2rem;
  line-height: 3.3rem;
}
.mglft-1 {
  margin-left: 1rem;
}

.skills {
  font-family: var(--en-font);
  font-size: 0.875rem;
  letter-spacing: 0px;
  font-weight: 400;
  margin-top:3rem;
  line-height: 1.3rem;
}
.headpd {height:760px;}
.headpd_b {height:1300px;}

.box-item p {
    color: #b6b6b6;
    letter-spacing: -1.3px;
    word-break: keep-all;
}
.box-tit h6{
    font-size: 1.0rem;
    letter-spacing: 1px;
    margin-bottom: 1.0rem;
}

/* --------------- footer --------------- */
.footer-mp.section-padding {
    padding-top: 30px; }
.footer-mp .footer-logo {
    position: relative;
    margin-top: 3rem;
}
.footer-mp .footer-logo h1 {
    font-size: 18rem;
    line-height: 1.0;
    letter-spacing: -10px;
    font-weight: 700;
}
.footer-mp .info-item h5 {
 font-size: 1.6rem;
 font-weight: 700;
    letter-spacing: -1.5px;
}
.footer-mp .info-item h6 {

    letter-spacing: 0;}

/*  section title */
.section-title {
  word-break: keep-all;
  font-size: 3rem;
  letter-spacing: -4px;
  font-weight: 500; }

.work-mda .item .img {
    height: 260px;
}
.row.lg-marg > * {
    padding-left: 10px;
    padding-right: 10px;
}


/* --------------- Works swiper --------------- */
.works-ma {
  position: relative;
  overflow: hidden !important; }
.works-ma .gallery-img .swiper-container {
    overflow: visible; }
.works-ma .gallery-img .bg-img {
  height: 500px;
  overflow: hidden;
  position: relative;
  border-radius: 15px;
  background-position: center; }
.works-ma .gallery-img .bg-img a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
.works-ma .gallery-text {
  text-align: center;
  margin: 60px auto 0;
  z-index: 9; }
.works-ma .gallery-text .swiper-container,
.works-ma .gallery-text .swiper-slide {
  height: 100px !important; }
.works-ma .gallery-text .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
.works-ma .gallery-text .text {
width: 100%;
text-align: center; }
.works-ma .gallery-text .text h4 {
font-size: 50px;
line-height: 1; }
.works-ma .gallery-text .text h6 {
margin-top: 15px;
overflow: hidden;
font-size: 14px;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px; }
.works-ma .gallery-text .text h6 span {
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all .8s;
-o-transition: all .8s;
transition: all .8s; }
.works-ma .gallery-text .swiper-slide-active .text h6 span {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s; }
.works-ma .swiper-controls {
position: absolute;
bottom: 140px;
left: 0;
width: 100%;
z-index: 9; }
.works-ma .swiper-controls .swiper-button-prev,
.works-ma .swiper-controls .swiper-button-next {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: auto;
color: #fff;
z-index: 9; }
.works-ma .swiper-controls .swiper-button-prev:after,
.works-ma .swiper-controls .swiper-button-next:after {
display: none; }
.works-ma .swiper-controls .swiper-button-prev span,
.works-ma .swiper-controls .swiper-button-next span {
white-space: nowrap; }
.works-ma .swiper-controls .swiper-button-prev {
left: 120px; }
.works-ma .swiper-controls .swiper-button-prev i {
margin-right: 25px; }
.works-ma .swiper-controls .swiper-button-next {
right: 120px; }
.works-ma .swiper-controls .swiper-button-next i {
margin-left: 25px; }
.works-ma .swiper-pagination {
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: auto;
display: none; }
.works-ma .swiper-pagination-bullet {
background: transparent;
margin: 0 10px !important; }
.works-ma .swiper-pagination-bullet-active .path {
display: inline-block !important;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
-webkit-animation: dash linear 10s;
animation: dash linear 10s;
-webkit-animation-iteration-count: unset;
animation-iteration-count: unset; }
  .works-ma .path {
    display: none; }

@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash {
  from {
    stroke-dashoffset: 1000; }
  to {
    stroke-dashoffset: 0; } }


@media screen and (max-width: 768px) {
    .works-ma {
      padding-bottom: 200px;
    }
    .works-ma .gallery-text .text h4 {
      font-size: 1.3rem;
    }
}

  /* --------------- footer swiper --------------- */
  .swiper {
    width: 100%;
    height: 100%;
  }

  .mySwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mySwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mySwiper .item .bg-img {
    height: 300px;
  }


.mobswiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

  /* --------------- Sub header title --------------- */
  @media screen and (max-width: 768px) {
  .header-mda .caption .h1 {
    font-size: 2rem;
    letter-spacing: -1px;
  }
  .subtit {
    word-break: keep-all;
    font-size: 1.2rem;
    letter-spacing: -1.7px;
    font-weight: 600;
    margin-top: 0rem;
    line-height: 1.6rem;
  }
  .skills {
    font-size: 0.765rem;
    letter-spacing: 0px;
    font-weight: 400;
    margin-top: 2rem;
    line-height: 1rem;
  }
  .headpd {height:500px;}
  .mglft-1 {
    margin-left: 0.5rem;
  }
    .mglft-10 {
    margin-left: 10px;
  }
  /* --------------- section --------------- */
  .section-padding {
      padding-top: 80px;
      padding-bottom: 80px;
  }
    .section-title {
        font-size: 1.4rem;
        letter-spacing: -1.5px;
    }
  .pd-right10 {
      padding: 0rem 0rem 0rem 0rem;
  }

  /* --------------- swiper --------------- */
  .works-ma .gallery-img .bg-img {
    height: 280px;
  }
  .works-ma .gallery-text {
    margin: 0px auto 0;
  }
  .works-ma .swiper-controls {
    bottom: 50px;
  }
  .works-ma .swiper-controls .swiper-button-prev {
    left: 4.5rem;
  }
  .works-ma .swiper-controls .swiper-button-next {
    right: 4.5rem;
  }

  /* --------------- footer --------------- */
  .footer-mp .info-item h6 {
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: 0rem;
  }
.footer-mp .footer-logo {
    margin-top: 30px;
}
  }

  /* --------------- detail --------------- */

@media (max-width: 960px) {
    .container-sm{
        max-width: 96%;
        margin:0 auto
    }
    .headpd_b {
    height: 500px;
  }
    .main-menu .logo img {width:60%;}
  .main-menu h2 { font-size: 2rem;}
  .footer-mp .footer-logo h1 {
    letter-spacing: 0px;
    
}

    .work-mda .item .img {
    height: 200px;
    }
    .navbar .logo {
    padding: 7px 15px;}
    .menu-icon {padding:0 15px;}
    .Related .col-lg-6 {width:50%;}
    .Related .mt-60 {
    margin-top: 16px !important;
    }
    .footer-mp {padding-top: 20px;}

    .footer-mp .md-mb30 {
        margin-bottom: 0px;
    }
    .footer-mp .pb-30 {
    padding-bottom: 0px !important;
    }
    .footer-mp .pt-30 {
    padding-top: 0px !important;
    }
    .footer-mp .mt-30 {
    margin-top: 0px !important;
    }
    .footer-mp .footer-logo h1 {
        font-size: 2rem;
    }


}
@media (min-width: 768px) {
    .container-sm{
        max-width: 768px;
    }
}
@media (max-width: 768px) {
    .container-sm{
        max-width: 96%;
        margin:0 auto
    }
    
}