/*------------------------------------------------------------------

01. Animations
02. Base
03. General

04. Cursor
05. Preloader
06. Header
07. Page header
08. Card
09. Blog-card
10. Button
11. Form
12. Footer
13. To top button
14. Social

15. Navigation
    15.1. Menu-icon animation
    15.2. Navigation background
    15.3. Navigation list
    15.4. Subnav
    15.5. Navigation social

16. Slider
    16.1. Slider
    16.2. Slider-navigation
    16.3. Slider-pagination
    16.4. Slider-animation

17. Intro
18. Portfolio section
19. Testimonials
20. About
21. Team
22. Steps
23. Awwards
24. Skills
25. Clients
26. Portfolio work
27. Video
28. Blog page
29. Blog sidebar
30. Contact

31. Testimonials slider
32. Blog slider

33. Porfolio isotope
34. Porfolio slider fullscreen
35. Porfolio slider columns
36. 404 page
37. Breadcrumbs
38. Price cards
39. Particles
40. Anchor menu

--------------------------------------------------------------------*/
/*--------------------------------------------------
	01. Animations
---------------------------------------------------*/
.delay-1 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-1::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-2 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-2::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-3 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-3::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-4 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-4::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-5 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-5::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-6 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-6::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-7 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-7::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-8 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-8::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-9 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-9::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-10 {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.delay-10::after {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

[data-animation-container] {
  pointer-events: none;
}

[data-animation-container] > * {
  pointer-events: none;
}

[data-animation-container].animated {
  pointer-events: auto;
}

[data-animation-container].animated > * {
  pointer-events: auto;
}

.cover-right,
.cover-down {
  display: block;
  position: relative;
}

.cover-right > *,
.cover-down > * {
  opacity: 0;
  pointer-events: none;
}

.cover-right::after,
.cover-down::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: #FF003C;
}

h1.cover-right, h2.cover-right, h3.cover-right, h4.cover-right, h5.cover-right, h6.cover-right {
  padding-bottom: 10px;
}

h1.cover-down, h2.cover-down, h3.cover-down, h4.cover-down, h5.cover-down, h6.cover-down {
  padding-bottom: 10px;
}

.cover-right-anim > *,
.cover-down-anim > * {
  -webkit-animation-name: reveal;
          animation-name: reveal;
  -webkit-animation-duration: 5ms;
          animation-duration: 5ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  pointer-events: auto;
}

.cover-right-anim.delay-1 > *,
.cover-down-anim.delay-1 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-2 > *,
.cover-down-anim.delay-2 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-3 > *,
.cover-down-anim.delay-3 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-4 > *,
.cover-down-anim.delay-4 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-5 > *,
.cover-down-anim.delay-5 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-6 > *,
.cover-down-anim.delay-6 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-7 > *,
.cover-down-anim.delay-7 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-8 > *,
.cover-down-anim.delay-8 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-9 > *,
.cover-down-anim.delay-9 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim.delay-10 > *,
.cover-down-anim.delay-10 > * {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.cover-right-anim::after,
.cover-down-anim::after {
  -webkit-animation-duration:var(--design-motion-duration);
          animation-duration:var(--design-motion-duration);
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
          animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.cover-down::after {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.cover-down-anim::after {
  -webkit-animation-name: coverDown;
          animation-name: coverDown;
}

@-webkit-keyframes coverDown {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  48% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  52% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes coverDown {
  0% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  48% {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  52% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

.cover-right::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.cover-right-anim::after {
  -webkit-animation-name: coverRight;
          animation-name: coverRight;
}

@-webkit-keyframes coverRight {
  0% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  48% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  52% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes coverRight {
  0% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  48% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  52% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@-webkit-keyframes reveal {
  100% {
    opacity: 1;
  }
}

@keyframes reveal {
  100% {
    opacity: 1;
  }
}

.slide-up,
.slide-down,
.slide-left,
.slide-right {
  opacity: 0;
  pointer-events: none;
}

.slide-up {
  -webkit-transform: translateY(35px);
          transform: translateY(35px);
}

.slide-down {
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
}

.slide-left {
  -webkit-transform: translateX(35px);
          transform: translateX(35px);
}

.slide-right {
  -webkit-transform: translateX(-35px);
          transform: translateX(-35px);
}

.slide-anim {
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration:var(--design-motion-duration);
          transition-duration:var(--design-motion-duration);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
          transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  pointer-events: auto;
}

/*--------------------------------------------------
	02. Base
---------------------------------------------------*/
html {
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

.over-hidden {
  overflow: hidden !important;
}

.over-normal {
  overflow: initial !important;
}

body {
  position: relative;
  overflow-x: hidden;
  font-family: 'Noto Sans KR', sans-serif;

  line-height: 100%;
  background-color: white !important;
  width: 100%;
}

.container {
  z-index: 5;
}

section {
  overflow-x: hidden;
  position: relative;
  z-index: 5;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  display: block;
  line-height: 100%;
}

a:hover {
  text-decoration: none !important;
  color: initial;
}

.link {
  color: white;
  -webkit-transition: color var(--design-motion-duration) ease-in-out;
  transition: color var(--design-motion-duration) ease-in-out;
}

.link:hover {
  color: #FF003C;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 700;
  line-height: 100%;
  color: #000000;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, a {
  position: relative;
  z-index: 10;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 55px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 20px;
}

p {
  font-size: 16px;
  line-height: 150%;
  color: #555555;
  margin: 0;
}

.text-lead {
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 21px;
  font-weight: 500;
  line-height: 140%;
}

.text-additional {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 17px;
}

/*--------------------------------------------------
	03. General
---------------------------------------------------*/
.bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

.overlay-black::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 1);
}

.bg-fixed {
  background-attachment: fixed;
}

.section-img-70vh {
  position: relative;
  height: 70vh;
}

.section-img-85vh {
  position: relative;
  height: 85vh;
}

.section-img-100vh {
  position: relative;
  height: 100vh;
}

.section-img-70vh .container,
.section-img-85vh .container,
.section-img-100vh .container {
  height: 100%;
}

.section-60vh,
.section-80vh,
.section-100vh {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.section-20vh {
  min-height: 20vh;
}

.section-40vh {
  min-height: 40vh;
}


.section-60vh {
  min-height: 60vh;
}

.section-80vh {
  min-height: 80vh;
}

.section-100vh {
  min-height: 100vh;
}

.section-small {
  padding: 80px 0;
}

.section-medium {
  padding: 100px 0;
}

.section-large {
  padding: 160px 0;
}

.section-title {
  position: relative;
}

.section-title .subtitle {
  font-family: 'Noto Sans KR', sans-serif;

  color: #FF003C;
  margin-bottom: 6px;
}

.section-title h2 {
  display: inline-block;
  text-transform: capitalize;
  line-height: 100%;
}

.section-title-small h2 {
  font-size: 65px;
}

.section-title-medium h2 {
  font-size: 60px;
}

.section-title-large h2 {
  font-size: 75px;
}

.section-title .text-lead {
  margin-top: 20px;
}

.section-title .section-text {
  font-size: 17px;
  line-height: 160%;
  margin-top: 20px;
}

.bg-gradient-black {
  background-image: linear-gradient(109.5deg, #08090A 22.51%, #000000 93.2%);
}

.bg-black {
  background-color: #08090A;
}

.bg-light {
  background-color: #FFFFFF;
}

.bg-gray {
  background-color: #F3F3F3;
}

.bg-gray-dark {
  background-color: #1a1a1a;
}

.bg-reveal-light {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-reveal-dark {
  background-color: #F3F3F3;
}

.box-shadow {
  -webkit-box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
          box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}

.text-theme {
  color: #FF003C;
}

.text-black {
  color: #000000;
}

.text-white {
  color: #FFFFFF;
}

.text-dark-gray {
  color: #555555;
}

.text-light-gray {
  color: #CFCFCF;
}

.dNone {
  display: none;
}

.dBlock {
  display: block !important;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-120 {
  margin-top: 120px;
}

/*--------------------------------------------------
    04. Cursor
---------------------------------------------------*/

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 99996; /*mediabox와 충돌로 값을 높여줌 */
  will-change: transform;
}

.cursor-item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FF003C;
  -webkit-transition: background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.cursor-big {
  -webkit-transform: scale(3.8);
          transform: scale(3.8);
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.cursor-alt {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/*--------------------------------------------------
	05. Preloader
---------------------------------------------------*/
.background-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background-color: #FCEFF9;
  z-index: -5000;
}

.preloader {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF !important;
  z-index: 5000;
  will-change: transform;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.preloader-visible {
  -webkit-transform: none;
          transform: none;
}

.preloader-out {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.preloader-hidden {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.preloader-num {
  position: absolute;
  font-size: 28vw;
  font-weight: 100 !important;
  color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.preloader-num-out {
  opacity: 0;
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
  pointer-events: none;
}

/*--------------------------------------------------
	06. Header
---------------------------------------------------*/
.header {
  position: absolute;
  top: 0;
  padding: 35px 70px;
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 500;
}

.header .logo {
  z-index: 10;
}

.header-black .logo a {
  color: black;
}

.header-black .menu span {
  background-color: black;
}

.header-black .menu-onepage-list li a {
  color: black;
}

.header-black.header-background {
  background-color: rgba(238, 238, 238, 0.6);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.header-white .logo a {
  color: white;
}

.header-white .menu span {
  background-color: white;
}

.header-white .menu-onepage-list li a {
  color: white;
}

.header-white.header-background {
  background-color: rgba(8, 9, 10, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.header.header-container .container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.header-fixed {
  position: fixed;
  top: -90px;
  -webkit-transform: translateY(90px);
          transform: translateY(90px);
}

.header-to-top {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.header-hidden {
  -webkit-transform: translateY(-90px) !important;
          transform: translateY(-90px) !important;
}

.is-menu-open .header {
  background-color: transparent;
  border: none;
}

/*--------------------------------------------------
	07. Page header
---------------------------------------------------*/
.breadcrumb-wrap {
  position: relative;
  overflow: hidden;
}

.page-header-title {
  overflow: hidden;
  font-size: 68px;
  font-family: 'Noto Sans KR', sans-serif;

  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 !important;
  margin-bottom: 15px !important;
}

.page-header-text {
  font-family: 'Noto Sans KR', sans-serif;

  overflow: hidden;
  font-weight: 400;
  font-size: 18px;
  margin: 0 !important;
}

.slide-over {
  display: inline-block;
  position: relative;
  will-change: transform;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.slide-over-animated {
  -webkit-transform: none;
          transform: none;
}

.page-header {
  will-change: transform;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

.page-header .breadcrumb-wrap .slide-over {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.page-header .page-header-title .slide-over {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.page-header .page-header-text .slide-over {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.page-header-to-bot {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
}

.page-main {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.page-main-to-bot {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translateY(20vh);
          transform: translateY(20vh);
}

/*--------------------------------------------------
	08. Card
---------------------------------------------------*/
.card-group {
  display: block;
  margin-top: 100px;
}

.card {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: none;
  border-radius: 0;
  height: 100%;
  cursor: pointer;
}

.card > * {
  z-index: 5;
}

.card-outer {
  height: 100%;
}

.card-img {
  overflow: hidden;
  border-radius: initial;
  width: 100%;
  border:0px solid red;
  height:358px !important;
}

.card-img div {
  padding-bottom: 100%;
}

.card-icon {
  position: relative;
  font-size: 55px;
  margin-bottom: 60px;
}

.card-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.card-title {
  text-transform: capitalize;
}

.card-title-plog {
  text-transform: capitalize;
  font-size:16px !important;
  font-weight:300;
  text-align:right;
}

.card-text {
  font-weight: 500;
  margin-top: 15px;
}

.card-btn {
  font-size: 14px;
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 30px;
}

.card-btn:hover {
  color: #FF003C;
}

.card-small .card-content {
  padding: 25px 40px 35px 40px;
}

.card-large .card-content {
  padding: 50px 40px;
}

.card-xlarge .card-content {
  padding: 70px 40px;
}

.card-center .card-icon {
  margin-left: auto;
  margin-right: auto;
}

.card-center .card-footer,
.card-center .card-content {
  text-align: center;
}

.card-hover {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.card-hover2 {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}



.card-hover .card-img {
  overflow: hidden;
}

.card-hover .card-img div {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.card-hover:hover {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
          box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}

.card-hover:hover .card-img div {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.card-hover-btn .card-icon i {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card-hover-btn .card-content h3, .card-hover-btn .card-content p, .card-hover-btn .card-content .card-btn {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.card-hover-btn .card-content .card-btn {
  position: absolute;
  bottom: 0;
  opacity: 0;
  margin-top: 0 !important;
}

.card-hover-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FF003C;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.card-hover-btn:hover::after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.card-hover-btn:hover .card-icon i {
  color: white;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.card-hover-btn:hover .card-content h3, .card-hover-btn:hover .card-content p, .card-hover-btn:hover .card-content .card-btn {
  color: white;
}

.card-hover-btn:hover .card-content h3 {
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
}

.card-hover-btn:hover .card-content p {
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
}

.card-hover-btn:hover .card-content .card-btn {
  opacity: 1;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
}

.card-hover-center .card-icon i {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card-hover-center .card-content h3, .card-hover-center .card-content p {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.card-hover-center .card-content .card-btn {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.card-hover-center .card-content .card-btn {
  position: absolute;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: 0 !important;
}

.card-hover-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FF003C;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

.card-hover-center:hover::after {
  opacity: 1;
}

.card-hover-center:hover .card-icon i {
  color: white;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.card-hover-center:hover .card-content h3, .card-hover-center:hover .card-content p, .card-hover-center:hover .card-content .card-btn {
  color: white;
}

.card-hover-center:hover .card-content h3 {
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
}

.card-hover-center:hover .card-content p {
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
}

.card-hover-center:hover .card-content .card-btn {
  opacity: 1;
  -webkit-transform: translateY(-40px) translateX(-50%);
          transform: translateY(-40px) translateX(-50%);
}

/*--------------------------------------------------
	09. Blog-card
---------------------------------------------------*/
.blog-card {
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.blog-card-outer {
  height: 100%;
}

.blog-card-img {
  overflow: hidden;
  border-radius: initial;
  width: 100%;
}

.blog-card-img div {
  padding-bottom: 80%;
}

.blog-card-content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 20px 25px;
  padding-bottom: 35px;
}

.blog-card-tag {
  display: inline-block;
  text-transform: capitalize !important;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 20px;
  margin-right: 15px;
}

.blog-card-tag:last-child {
  margin-right: 0;
}

.blog-card-title {
  text-transform: capitalize;
  font-weight: 600;
  line-height: 120%;
  font-size: 25px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blog-card-title a {
  line-height: inherit;
}

.blog-card-title:hover {
  color: #FF003C;
}

.blog-card-text {
  font-weight: 500;
  margin-top: 15px;
}

.blog-card-btn {
  margin-top: 30px;
}

.blog-card-footer {
  padding: 0 25px 40px;
}

.blog-card {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.blog-card .blog-card-img div {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.blog-card:hover {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
          box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}

.blog-card:hover .blog-card-img div {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/*--------------------------------------------------
	10. Button
---------------------------------------------------*/
.btn {
  position: relative;
  padding: 18px 32px;
  min-width: 160px;
  border-radius: 0px;
  border: 0;
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 5;
  -webkit-transition: border var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn:focus {
  border: 4px solid transparent;
}

.btn-small {
  padding: 16px 26px;
}

.btn-large {
  padding: 22px 42px;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: scaleX(0.02);
          transform: scaleX(0.02);
}

.btn:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.btn-white {
  border: 4px solid #FFF;
}

.btn-white::before {
  background-color: #FFF;
}

.btn-white::after {
  background-color: #111;
}

.btn-white:hover {
  color: #FFF;
}

.btn-black {
  border: 4px solid #111;
}

.btn-black::before {
  background-color: #111;
}

.btn-black::after {
  background-color: #FFF;
}

.btn-black:hover {
  color: #000;
}

.btn-theme {
  border: 4px solid #FF003C;
}

.btn-theme::before {
  background-color: #FF003C;
}

.btn-theme::after {
  background-color: #111;
}

.btn-theme:hover {
  color: #FF003C;
}

.btn-outline-white {
  background-color: transparent;
  border: 4px solid #FFF;
}

.btn-outline-white::after {
  background-color: #FFF;
}

.btn-outline-white:hover {
  color: #000;
}

.btn-outline-black {
  background-color: transparent;
  border: 4px solid #111;
}

.btn-outline-black::after {
  background-color: #111;
}

.btn-outline-black:hover {
  color: #FFF;
}

.btn-outline-theme {
  background-color: transparent;
  border: 4px solid #FF003C;
}

.btn-outline-theme::after {
  background-color: #FF003C;
}

.btn-outline-theme:hover {
  color: #FFF;
}

.btn-hover {
  display: inline-block;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.btn-hover::before {
  content: "";
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 10%;
  background-color: black;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.btn-hover:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.btn-hover.btn-hover-black {
  color: black;
}

.btn-hover.btn-hover-black::before {
  background-color: black;
}

.btn-hover.btn-hover-light {
  color: white;
}

.btn-hover.btn-hover-light::before {
  background-color: white;
}

/*--------------------------------------------------
	11. Form
---------------------------------------------------*/
.form-outer {
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
  padding-bottom: 0;
}

form .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  margin: 20px 0;
}

form input,
form textarea {
  padding: 10px 10px !important;
  border: none;
  font-size: 17px;
  line-height: 145%;
  font-weight: 400;
  letter-spacing: 0.02rem;
  -webkit-transition: border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: border var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

form label {
  font-size: 16px;
  letter-spacing: 0.04rem;
  color: white;
}

.form-checkbox label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  margin: 0;
}

.form-checkbox .checkbox-wrap {
  position: relative;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  margin-right: 8px;
}

.form-checkbox .checkbox-wrap input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.form-checkbox .checkbox-wrap input + span {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.form-checkbox .checkbox-wrap input + span::after {
  content: "\f00c";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
}

.form-checkbox .checkbox-wrap input:checked + span::after {
  opacity: 1;
}

form.form-dark input,
form.form-dark textarea {
  background-color: rgba(8, 9, 10, 0.04);
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid rgba(128, 128, 128, 0.5) !important;
  color: #000000 !important;
}

form.form-dark input::-webkit-input-placeholder,
form.form-dark textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

form.form-dark input::-moz-placeholder,
form.form-dark textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

form.form-dark input:-ms-input-placeholder,
form.form-dark textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

form.form-dark input::-ms-input-placeholder,
form.form-dark textarea::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

form.form-dark input::placeholder,
form.form-dark textarea::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

form.form-dark input:focus,
form.form-dark textarea:focus {
  background-color: rgba(8, 9, 10, 0.1);
  outline: none;
  border-color: black !important;
}

form.form-dark .checkbox-wrap input + span {
  border: 2px solid gray;
}

form.form-dark .checkbox-wrap input + span::after {
  color: black;
}

form.form-dark .checkbox-wrap input:focus + span {
  border-color: black;
}

form input,
form textarea {
  background-color: rgba(255, 255, 255, 0.1);
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid gray !important;
  color: #FFFFFF !important;
}

form input::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

form input::-moz-placeholder,
form textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

form input:-ms-input-placeholder,
form textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

form input::-ms-input-placeholder,
form textarea::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

form input::placeholder,
form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

form input:focus,
form textarea:focus {
  background-color: rgba(255, 255, 255, 0.25);
  outline: none;
  border-color: white !important;
}

form .checkbox-wrap input + span {
  border: 2px solid gray;
}

form .checkbox-wrap input + span::after {
  color: white;
}

form .checkbox-wrap input:focus + span {
  border-color: white;
}

/*--------------------------------------------------
	12. Footer
---------------------------------------------------*/
.footer {
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 80px;
}

.footer .logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.footer-item {
  margin-bottom: 50px;
}

.footer-title {
  font-weight: 600;
  text-transform: capitalize;
}

.footer-content {
  margin-top: 20px;
}

.footer-content li {
  margin-bottom: 20px;
}

.footer-content li:last-child {
  margin-bottom: 0;
}

.footer-text {
  line-height: 140%;
}

.footer-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 2px solid rgba(196, 196, 196, 0.2);
  padding-top: 50px;
}

.footer .copyright p {
  font-size: 14px;
  line-height: 100%;
}

.footer-social {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

/*--------------------------------------------------
	13. To top button
---------------------------------------------------*/
.to-top-button {
  position: fixed;
  bottom: 50px;
  right: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  color: white;
  width: 46px;
  height: 46px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0px white inset;
          box-shadow: 0 0 0 0px white inset;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
}

.to-top-button i {
  -webkit-transition: color var(--design-motion-duration) ease;
  transition: color var(--design-motion-duration) ease;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.to-top-button.visible {
  pointer-events: initial;
  opacity: 1;
}

.to-top-button:hover {
  -webkit-box-shadow: 0 0 0 24px #FF003C inset;
          box-shadow: 0 0 0 24px #FF003C inset;
}

.to-top-button:hover i {
  color: #000000;
}

/*--------------------------------------------------
	14. Social
---------------------------------------------------*/
.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 100;
}

.social-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 20px;
}

.social-item:last-child {
  margin-right: 0;
}

.social a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0 0 0 1px #5a5a5a inset !important;
          box-shadow: 0 0 0 1px #5a5a5a inset !important;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: 17px;
  -webkit-transition: -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.social-item:hover a {
  color: white !important;
  -webkit-box-shadow: 0 0 0 26px #414141 inset !important;
          box-shadow: 0 0 0 26px #414141 inset !important;
}

/*==================================================
	15. Navigation
===================================================*/
/*--------------------------------------------------
    15.1. Menu-icon animation
---------------------------------------------------*/
.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  z-index: 10;
  cursor: pointer;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

.menu-wrap {
  z-index: 3;
}

.menu span {
  background-color: black;
  width: 30px;
  height: 3px;
  margin-bottom: 6px;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  opacity: 1;
}

.menu span:last-child {
  margin-bottom: 0;
}

.menu-line-2::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 13px;
  width: 3px;
  height: 30px;
  background-color: inherit;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.menu:hover span {
  background-color: #FF003C;
}

.menu:hover .menu-line-2::after {
  background-color: #FF003C;
}

.is-menu-open {
  width: 100%;
  height: 100%;
}

.is-menu-open .menu {
  width: 25px;
  height: auto;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.is-menu-open .menu span {
  background-color: white;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.is-menu-open .menu .menu-line-1 {
  -webkit-transform: translateY(9px);
          transform: translateY(9px);
  opacity: 0;
}

.is-menu-open .menu .menu-line-3 {
  -webkit-transform: translateY(-9px);
          transform: translateY(-9px);
  opacity: 0;
}

.is-menu-open .menu .menu-line-2::after {
  background-color: white;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transition: background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, background-color var(--design-motion-duration) ease, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.is-menu-open .menu:hover span, .is-menu-open .menu:hover .menu-line-2::after {
  background-color: #FF003C;
}

/*--------------------------------------------------
	15.2. Navigation background
---------------------------------------------------*/
.menu-navigation {
  position: relative;
  z-index: 200;
}

.menu-pre-background {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 61.8%;
  height: 100vh;
  background-color: #FF003C;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  z-index: 2;
}

.menu-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: 2;
  pointer-events: none;
}

.menu-inner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 61.8vw;
  height: 100vh;
  background-image: linear-gradient(136.18deg, #191B1D 4.01%, #08090A 86.2%);
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 3;
  -webkit-box-shadow: 0 0 25px 1px black;
          box-shadow: 0 0 25px 1px black;
}

.menu-container {
  height: 100%;
  margin-left: 13%;
  margin-right: 12%;
  padding-top: 50px;
  padding-bottom: 50px;
  -webkit-transition: opacity var(--design-motion-duration) ease;
  transition: opacity var(--design-motion-duration) ease;
  opacity: 0;
}

.menu-header h4 {
  display: inline-block;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 20px;
  font-family: 'Noto Sans KR', sans-serif;

  letter-spacing: 0.1em;
  color: #9C9C9C;
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
}

.is-menu-open .menu-overlay {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  pointer-events: all;
}

.is-menu-open .menu-pre-background {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.is-menu-open .menu-inner {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.is-menu-open .menu-inner .menu-container {
  opacity: 1;
}

.is-menu-open .menu-inner .menu-header h4 {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/*--------------------------------------------------
	15.3. Navigation list
---------------------------------------------------*/
.navigation {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.navigation-list {
  position: relative;
}

.navigation-list > li {
  margin-bottom: 25px;
}

.navigation-list > li:last-child {
  margin-bottom: 0;
}

.navigation-list > li > a {
  will-change: transform;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), transform var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), transform var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06), color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06);
  opacity: 0;
  -webkit-transform: translateY(60px);
          transform: translateY(60px);
}

.navigation-list > li > a:hover {
  color: #FF003C;
}

.navigation-list > li > a:hover::after {
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
  color: #FF003C;
}

.navigation-list > li > a:not([href]):not([tabindex]) {
  color: white;
}

.navigation-list > li > a:not([href]):not([tabindex]):hover {
  color: #FF003C;
}

.navigation-list > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 30px;
  line-height: 100%;
  font-weight: 600;
  color: white;
  padding: 0;
}

.menu-item-has-children > a::after {
  content: "\e900";
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  padding-top: 3%;
  font-size: 12px;
  color: #a0a0a0;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
}

.menu-item-has-children > a:hover {
  color: #FF003C;
}

.menu-item-has-children > a:hover::after {
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
  color: #FF003C;
}

.is-menu-open .navigation-list > li > a {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.is-menu-open .navigation-list > li:first-child > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(2) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(3) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(4) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(5) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(6) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(7) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(8) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .navigation-list > li:nth-child(9) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li > a {
  opacity: 0;
  -webkit-transform: translateY(60px);
          transform: translateY(60px);
  pointer-events: none;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(9) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(8) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(7) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(6) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(5) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(4) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(3) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:nth-child(2) > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.is-menu-open .nav-list-hidden.navigation-list > li:first-child > a {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

/*--------------------------------------------------
	15.4. Subnav
---------------------------------------------------*/
.subnav-list {
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
  width: 280px;
}

.subnav-list.subnav-active {
  pointer-events: auto;
}

.subnav-list.subnav-active .subnav-title {
  pointer-events: auto;
}

.subnav-list li {
  margin-bottom: 25px;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.subnav-list li:last-child {
  margin-bottom: 0;
}

.subnav-list li a.subnav-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 30px;
  font-weight: 600;
  color: white;
  pointer-events: none;
  padding-bottom: 20px;
}

.subnav-list li a {
  color: #BEBEBE;
  font-size: 19px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition: color var(--design-motion-duration) cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.subnav-list li a:hover {
  color: white;
}

.subnav-title:not([href]):not([tabindex]) {
  color: white;
}

.subnav-title:not([href]):not([tabindex]):hover {
  color: #FF003C;
}

a.subnav-title::after {
  content: "\e901";
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  padding-top: 2%;
  font-size: 14px;
  color: #a0a0a0;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateX(-35px);
          transform: translateX(-35px);
}

a.subnav-title:hover {
  color: #FF003C;
}

a.subnav-title:hover::after {
  color: #FF003C;
  -webkit-transform: translateX(-45px);
          transform: translateX(-45px);
}

.navigation-list > li .subnav-list li:nth-child(8) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.navigation-list > li .subnav-list li:nth-child(7) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:nth-child(6) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:nth-child(5) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:nth-child(4) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.navigation-list > li .subnav-list li:first-child {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) 0ms;
}

.subnav-active.subnav-list li {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.navigation-list > li .subnav-active.subnav-list li:first-child {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(4) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(5) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(6) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(7) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(8) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(9) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.navigation-list > li .subnav-active.subnav-list li:nth-child(10) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

/*--------------------------------------------------
	15.5. Navigation social
---------------------------------------------------*/
.social-navigation {
  position: absolute;
  bottom: 50px;
}

.social-navigation .social-item {
  will-change: transform;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.is-menu-open .social-navigation .social-item {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.is-menu-open .social-navigation .social-item:first-child {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(4) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(5) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(6) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(7) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.is-menu-open .social-navigation .social-item:nth-child(8) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

/*==================================================
	16. Slider
===================================================*/
/*--------------------------------------------------
	16.1. Slider
---------------------------------------------------*/
.slider-main {
  position: relative;
  overflow: hidden;
  background-color: #000;
  width: 100%;
  height: 100vh;
}

.slider-main .slider-slide {
  overflow: hidden;
}

.main-slider-pagination {
  position: absolute;
  bottom: 40px !important;
}

.video-main {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider-video video {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

.slide-content-static .slide-title {
  margin-bottom: 25px;
}

.slide-content-static .slide-text {
  margin-bottom: 50px;
}

.slide-subtitle {
  display: inline-block;
  overflow: hidden;
  font-size: 18px;
  font-family: 'Noto Sans KR', sans-serif;

  text-transform: uppercase;
  margin-bottom: 5px;
}

.slide-subtitle span {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.slide-title {
  overflow: hidden;
  text-transform: capitalize;
  font-size: 82px;
  line-height: 115%;
  margin-bottom: 10px;
}

.slide-title span {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.slide-text {
  overflow: hidden;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
  font-weight: 400;
  font-size: 19px;
  color: white !important;
}

.slide-text span {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.slide-button {
  opacity: 0;
}

.slide button {
  margin-top: 35px;
}

.slide-content.slide-content-dark .slider-subtitle {
  color: #5f5f5f;
}

.slide-content.slide-content-dark h1 {
  color: black;
}

.slide-content.slide-content-dark h1 span {
  color: black;
}

.slide-content.slide-content-dark p {
  color: #2b2b2b;
}

.slide-content.slide-content-dark p span {
  color: #2b2b2b;
}

.slide-content.slide-content-dark .slider-nav .circle .half-left .item,
.slide-content.slide-content-dark .slider-nav .circle .half-right .item {
  border-color: rgba(0, 0, 0, 0.6);
}

.slide-content.slide-content-dark .slider-nav .icon-arrow-left,
.slide-content.slide-content-dark .slider-nav .icon-arrow-right {
  color: black;
}

.slide-content.slide-content-light .slider-subtitle {
  color: #d6d6d6;
}

.slide-content.slide-content-light h1 {
  color: white;
}

.slide-content.slide-content-light p {
  color: #c2c2c2;
}

.slide-content.slide-content-light .slider-nav .circle .half-left .item,
.slide-content.slide-content-light .slider-nav .circle .half-right .item {
  border-color: rgba(255, 255, 255, 0.6);
}

.slide-content.slide-content-light .slider-nav .icon-arrow-left,
.slide-content.slide-content-light .slider-nav .icon-arrow-right {
  color: white;
}

.slide-content-intro .slide-subtitle span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.slide-content-intro .slide-title span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.slide-content-intro .slide-text span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.slide-content-intro .slide-button {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.slide-content-second .slide-subtitle span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slide-content-second .slide-title span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.slide-content-second .slide-text span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.content-visible .slide-subtitle span,
.content-visible .slide-title span,
.content-visible .slide-text span {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.content-visible .slide-button {
  opacity: 1;
}

/*--------------------------------------------------
	16.2. Slider-navigation
---------------------------------------------------*/
.circle {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  border-radius: 50%;
  width: 68px;
  height: 100%;
}

.circle .half-left,
.circle .half-right {
  position: relative;
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.circle .half-left .item,
.circle .half-right .item {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid;
}

.circle:hover .half-left .item,
.circle:hover .half-right .item {
  border-color: #FF003C !important;
}

.circle:hover .icon-arrow-left {
  color: #FF003C !important;
}

.circle:hover .icon-arrow-right {
  color: #FF003C !important;
}

.slider-nav-outer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slider-nav-outer-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.slider-nav-outer-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.slider-nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 160px;
  height: 68px;
  z-index: 100;
}

.circle-left .half-left .item {
  border-right: none;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
  transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.circle-left .half-right .item {
  border-left: none;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.circle-right .half-left .item {
  left: -100%;
  border-right: none;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
  transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.55, 0.055, 0.675, 0.19) 0ms;
}

.circle-right .half-right .item {
  left: 100%;
  border-left: none;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms, border-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
}

.slider-nav .icon-arrow-left,
.slider-nav .icon-arrow-right {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.slider-nav .icon-arrow-left {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}

.slider-nav .icon-arrow-right {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.slider-nav-visible .circle-right .half-right .item,
.slider-nav-visible .circle-right .half-left .item {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.slider-nav-visible .circle-left .half-right .item,
.slider-nav-visible .circle-left .half-left .item {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

.slider-nav-visible .icon-arrow-left,
.slider-nav-visible .icon-arrow-right {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/*--------------------------------------------------
	16.3. Slider-pagination
---------------------------------------------------*/
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  z-index: 10;
}

.pagination-light .bullet {
  background-color: rgba(255, 255, 255, 0.5);
}

.pagination-dark .bullet {
  background-color: rgba(0, 0, 0, 0.5);
}

.pagination .bullet-active {
  background-color: #FF003C;
}

.bullet {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-left: 15px;
  margin-right: 15px;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.bullet-active {
  -webkit-transform: scale(1.7);
          transform: scale(1.7);
}

/*--------------------------------------------------
	16.4. Slider-animation
---------------------------------------------------*/
.header .logo-box {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header .logo-box a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.header .menu-outer-wrap {
  position: relative;
  z-index: 500;
  overflow: hidden;
  padding: 4px;
}

.header .menu-outer-wrap .menu-wrap {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: translateY(120%);
          transform: translateY(120%);
}

.slider-main-reveal {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}

.slider-main-reveal-animated {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.work-header-reveal {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}

.work-header-animated {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.bottom-left-links {
  position: absolute;
  bottom: 50px;
  left: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
}

.bottom-left-links div {
  font-size: 16px;
  font-weight: 500;
  margin-right: 15px;
}

.bottom-left-links div:last-child {
  margin: 0;
}

.bottom-left-links div {
  overflow: hidden;
}

.bottom-left-links div a {
  will-change: transform;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.bottom-left-links div:nth-child(1) a {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.bottom-left-links div:nth-child(2) a {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.bottom-left-links div:nth-child(3) a {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.slider-main .pagination span {
  will-change: opacity, transform;
  opacity: 0;
}

.slider-main .pagination span:nth-child(1) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider-main .pagination span:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider-main .pagination span:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider-main .pagination span:nth-child(4) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider-main .pagination span:nth-child(5) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slider-main .pagination span:nth-child(6) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header-reveal .header .logo-box a {
  -webkit-transform: none;
          transform: none;
}

.header-reveal .header .menu-outer-wrap .menu-wrap {
  -webkit-transform: none;
          transform: none;
}

.header-reveal .header .menu-anchor ul li {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.header-reveal .bottom-left-links a {
  -webkit-transform: none;
          transform: none;
}

.header-reveal .slider-main .pagination span {
  opacity: 1;
}

/*==================================================
	17. Page Blocks
===================================================*/
/*--------------------------------------------------
	17. Intro
---------------------------------------------------*/
.intro .text-lead {
  margin-top: 30px;
}

.intro-text {
  font-size: 18px;
  line-height: 160%;
  margin-top: 40px;
}

/*--------------------------------------------------
	18. Portfolio section
---------------------------------------------------*/
.portfolio {
  margin-top: 140px;
}

.portfolio-item-left {
  padding-top: 90px;
  padding-right: 30px;
}

.portfolio-item-right {
  padding-left: 30px;
}

.portfolio-img {
  overflow: hidden;
  width: 100%;
}

.portfolio-img div {
  padding-bottom: 130%;
}

.portfolio-info {
  width: 100%;
  margin-top: 30px;
}

.portfolio-info span {
  display: inline-block;
  font-size: 15px;
  color: #FF003C;
}

.portfolio-info span:nth-child(1n + 2) {
  margin-left: 10px;
}

.portfolio-info h2 {
  font-size: 40px;
  text-transform: capitalize;
  font-weight: 600;
  margin-top: 4px;
}

.portfolio-item .portfolio-img {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
}

.portfolio-item .portfolio-img div, .portfolio-item .portfolio-img img {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
}

.portfolio-item .portfolio-info span {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
}

.portfolio-item .portfolio-info h2 {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) 0ms;
}

.portfolio-item:hover .portfolio-img {
  -webkit-transform: scale(0.92) translateY(15px);
          transform: scale(0.92) translateY(15px);
}

.portfolio-item:hover .portfolio-img div, .portfolio-item:hover .portfolio-img img {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.portfolio-item:hover .portfolio-info span {
  -webkit-transform: translate(35px, -15px);
          transform: translate(35px, -15px);
}

.portfolio-item:hover .portfolio-info h2 {
  -webkit-transform: translate(35px, -15px);
          transform: translate(35px, -15px);
}

/*--------------------------------------------------
	19. Testimonials
---------------------------------------------------*/
.testimonials-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 20px 0;
}

.testimonials-pagination {
  margin-top: 70px;
}

.testimonials-img {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 35px;
}

.testimonials-img div {
  border-radius: 50%;
}

.testimonials-comment {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 140%;
}

.testimonials-author {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  text-align: center;
  margin-top: 30px;
}

.testimonials-author h3 {
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.testimonials-author p {
  margin-top: 6px;
}

/*--------------------------------------------------
	20. About
---------------------------------------------------*/
.about-lead {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 40px;
}

.about-text {
  font-size: 18px;
  line-height: 160%;
  margin-top: 30px;
}

.about-text:first-child {
  margin-top: 40px;
}

.about .btn-hover {
  margin-top: 50px;
}

/*--------------------------------------------------
	21. Team
---------------------------------------------------*/
.team {
  margin-top: 120px;
}

.team .row > div:nth-child(1n+4) {
  margin-top: 30px;
}

.team-img {
  overflow: hidden;
  width: 100%;
}

.team-img div {
  padding-bottom: 130%;
}

.team-item {
  position: relative;
  overflow: hidden;
}

.team-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.team-title {
  font-weight: 600;
  text-transform: capitalize;
}

.team-text {
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #BBBBBB;
  margin-top: 8px;
}

.team-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 25px;
}

.team-social-item {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  background-color: transparent;
  color: white;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 25px;
}

.team-social-item:last-child {
  margin-right: 0;
}

.team-social-item a {
  padding: 10px;
}

.team-info {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
}

.team-info h3 {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.team-info p {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

.team-info .team-social-item {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
}

.team-item:hover .team-info {
  opacity: 1;
}

.team-item:hover .team-info h3, .team-item:hover .team-info p {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.team-item:hover .team-social-item {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/*--------------------------------------------------
	22. Steps
---------------------------------------------------*/
.steps {
  margin-top: 100px;
}

.steps .row > div:nth-child(1n + 4) {
  margin-top: 30px;
}

.steps-item {
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 15px 15px;
  padding-bottom: 30px;
}

.steps-number {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  font-weight: 600;
  font-size: 170px;
  line-height: 100%;
  color: rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.steps-number .icon-outer {
  position: absolute;
  bottom: 0;
  padding-bottom: 35px;
  font-size: 70px;
  color: silver;
}

.steps-title {
  font-weight: 600;
  text-transform: capitalize;
}

.steps-text {
  font-size: 17px;
  margin-top: 15px;
}

.steps-item {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.steps-item::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF003C;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: -1;
}

.steps-item .steps-number {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.steps-item .steps-number i {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.steps-item .steps-title,
.steps-item .steps-text {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.steps-item:hover {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
}

.steps-item:hover::after {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.steps-item:hover .steps-number {
  color: rgba(0, 0, 0, 0.4);
}

.steps-item:hover .steps-number i {
  color: white;
}

.steps-item:hover .steps-title {
  color: white;
}

.steps-item:hover .steps-text {
  color: white;
}

/*--------------------------------------------------
	23. Awards
---------------------------------------------------*/
.awards {
  margin-top: 100px;
}

.awards-item {
  padding: 20px 0;
}

.awards-icon {
  font-size: 73px;
  margin-bottom: 30px;
}

.awards-title {
  font-size: 24px;
  font-weight: 500;
  text-transform: capitalize;
}

.awards-text {
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #9A9A9A;
  margin-top: 15px;
}

.awards-item {
  -webkit-transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.awards-item .awards-icon i {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.awards-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.awards-item:hover .awards-icon i {
  color: #FF003C;
}

/*--------------------------------------------------
	24. Skills
---------------------------------------------------*/
.skills {
  margin-top: 100px;
}

.skills .row > div:nth-child(1n + 4) {
  margin-top: 30px;
}

.skills-item {
  text-align: center;
  padding: 20px 15px;
}

.skills-chart-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 35px;
}

.skills-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: auto;
  width: 164px;
}

.skills-percent {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 32px;
  font-weight: 600;
  color: white !important;
}

.skills-title {
  font-weight: 600;
  text-transform: capitalize;
}

.skills-text {
  font-size: 17px;
  margin-top: 15px;
}

.skills-item {
  -webkit-transition: background-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.skills-title {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.skills-text {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.skills-percent {
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.skills-item:hover {
  background-color: white;
}

.skills-item:hover .skills-percent {
  color: black !important;
}

.skills-item:hover .skills-title {
  color: black;
}

.skills-item:hover .skills-text {
  color: #555555;
}

/*--------------------------------------------------
	25. Clients
---------------------------------------------------*/
.clients {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 120px;
}

.clients > div {
  margin-bottom: 30px;
}

.clients-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 300px;
  height: 185px;
  -webkit-transition: -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.clients-item:hover {
  -webkit-box-shadow: 0 0 0 100px #FF003C inset;
          box-shadow: 0 0 0 100px #FF003C inset;
  z-index: 200;
}

/*--------------------------------------------------
	26. Portfolio work
---------------------------------------------------*/
.work-header-content {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}

.work-header-title {
  overflow: hidden;
  font-size: 72px;
  padding-bottom: 7px;
  margin-bottom: 13px;
  font-weight: 600;
}

.work-header-text {
  overflow: hidden;
  font-size: 20px;
}

.work-header .work-header-title .slide-over {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.work-header .work-header-text .slide-over {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;
}

.work-title {
  text-transform: capitalize;
}

.work-lead {
  font-size: 21px;
  letter-spacing: 0.03em;
  margin-top: 30px;
}

.work-text {
  font-size: 18px;
  letter-spacing: 0.03em;
  margin-top: 30px;
}

.work-info {
  margin-top: 80px;
}

.work-info h3 {
  font-weight: 500;
  font-size: 22px;
  font-family: 'Noto Sans KR', sans-serif;

  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.work-info .work-text {
  text-transform: capitalize;
  margin-top: 10px;
}

.work-img-section {
  margin-top: 100px;
}

.work-img-wide div {
  padding-bottom: 60%;
}

.work-img-square div {
  padding-bottom: 100%;
}

.work-img-long div {
  padding-bottom: 130%;
}

.work-next {
  padding: 200px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.work-next-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 600;
  text-transform: uppercase;
  font-size: 70px;
  color: black;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
}

.work-next-button i {
  position: absolute;
  right: 0;
  font-size: 22px;
  padding-top: 5px;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), opacity var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  -webkit-transform: translateX(25px);
          transform: translateX(25px);
}

.work-next-button:hover {
  color: #FF003C;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
}

.work-next-button:hover i {
  -webkit-transform: translateX(55px);
          transform: translateX(55px);
  opacity: 1;
}

/*--------------------------------------------------
	27. Video
---------------------------------------------------*/
.video-inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 5000;
  visibility: hidden;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 0;
}

.video {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.video-link {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: none;
  font-size: 41px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 5;
  -webkit-transition: background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), background-color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-box-shadow var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.video-link i {
  padding-left: 8px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.video-link:hover {
  background-color: #FF003C;
}

.video-link:hover i {
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  color: black;
}

iframe {
  width: 900px;
  height: 500px;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}

.visible {
  visibility: visible;
}

.video-anim {
  opacity: 1;
}

.video-anim iframe {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/*--------------------------------------------------
	28. Blog page
---------------------------------------------------*/
.blog-item {
  margin-bottom: 30px;
}

.blog-item:last-child {
  margin-bottom: 0px;
}

.blog-img {
  width: 100%;
}

.blog-img div {
  padding-bottom: 65%;
}

.blog-img img {
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.blog-content {
  padding: 25px 30px 35px 30px;
}

.blog-info p {
  text-transform: capitalize;
  font-size: 18px;
}

.blog-info a {
  display: inline-block;
}

.blog-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.blog-tags a {
  text-transform: capitalize;
  letter-spacing: 0.05em;
  font-size: 18px;
  padding-right: 20px;
}

.blog-tags a:last-child {
  padding-right: 0;
}

.blog-title {
  display: inline-block;
  text-transform: capitalize;
  line-height: 130%;
  font-size: 28px;
  font-weight: 600;
}

.blog-title a {
  line-height: 120%;
}

.blog-subtitle {
  font-size: 24px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 130%;
  letter-spacing: 1px;
  margin-top: 40px;
}

.blog-text {
  font-size: 17px;
  line-height: 160%;
  margin-top: 15px;
}

.blog-media {
  width: 100%;
  margin-top: 40px;
}

.blog-media div {
  padding-bottom: 65%;
}

.blog-list {
  margin-top: 20px;
}

.blog-list li {
  list-style: disc inside;
  text-transform: capitalize;
  line-height: 100%;
  font-size: 20px;
  font-weight: 500;
  background-color: transparent;
  padding: 12px 15px;
}

.blog-blockquote {
  padding: 30px 20px;
  background-color: #2F2E2E;
  border-left: 3px solid white;
  margin-top: 30px;
}

.blog-blockquote p {
  font-size: 20px;
  line-height: 135%;
}

.blog-blockquote span {
  display: inline-block;
  font-size: 20px;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 600;
  text-transform: capitalize;
  color: #828282;
  margin-top: 20px;
}

.blog-btn-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 100px;
  margin-bottom: 60px;
}

.blog-item .blog-img-hover {
  overflow: hidden;
}

.blog-item .blog-img-hover div, .blog-item .blog-img-hover img {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.blog-item .blog-img-hover:hover div {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.blog-item .blog-img-hover:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.comment-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  padding: 40px 0;
}

.comment-item:first-child {
  border-top: none;
}

.comment-item .comment-item {
  padding: 0;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.comment-body {
  width: 100%;
}

.comment-img {
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  margin-right: 20px;
}

.comment-title h4, .comment-title a {
  font-size: 22px;
  color: white;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.comment-title h4:hover, .comment-title a:hover {
  color: #FF003C;
}

.comment-title span {
  display: inline-block;
  font-size: 15px;
  margin-top: 8px;
  color: #808080;
}

.comment-text p {
  font-size: 17px;
  line-height: 160%;
  color: #CFCFCF;
  margin-top: 10px;
}

.comment-text a {
  display: inline-block;
  text-decoration: underline;
  color: #CFCFCF;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.comment-text a:hover {
  color: #FF003C;
}

.comment-reply a {
  display: inline-block;
  color: white;
  font-size: 16px;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 15px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.comment-reply a:hover {
  color: #FF003C;
}

.comment-respond {
  position: relative;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  padding: 25px 30px 35px 30px;
}

.comment-respond h3 {
  color: white;
  margin-bottom: 15px;
}

.comment-respond h3 small a {
  display: inline-block;
  color: #FF003C;
  font-size: 20px;
  margin-left: 12px;
  letter-spacing: 0.06rem;
  font-family: 'Noto Sans KR', sans-serif;

}

.comment-respond .comment-notes {
  color: #CFCFCF;
  font-size: 18px;
  font-weight: 400;
  display: block;
  text-transform: initial;
}

.comment-respond .logged-in-as {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.comment-respond .logged-in-as a {
  color: white;
  text-decoration: underline;
  padding-right: 20px;
  font-family: 'Noto Sans KR', sans-serif;

  letter-spacing: 0.06rem;
  font-size: 18px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.comment-respond .logged-in-as a:hover {
  color: #FF003C;
}

.comment-respond .comment-form .form-group {
  margin: 0;
  margin-top: 35px;
}

.comment-respond .comment-form .form-checkbox {
  margin: 0;
  margin-top: 35px;
}

.comment-respond .comment-form button {
  margin-top: 40px;
}

.blog-content .comment-respond {
  padding: 20px 0;
  margin-top: 20px;
}

.comment-body .comment-respond {
  padding: 0;
  padding-top: 40px;
  margin-top: 40px;
}

/*--------------------------------------------------
	29. Blog widget
---------------------------------------------------*/
.sidebar .widget {
  padding: 30px 30px;
  margin-bottom: 30px;
  background-color: #08090A;
}

.sidebar .widget-title {
  text-transform: capitalize;
}

.sidebar .widget p {
  margin-top: 15px;
}

.sidebar .widget ul {
  margin-top: 30px;
}

.sidebar .widget li {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 25px;
  padding-left: 25px;
}

.sidebar .widget li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  font-size: 20px;
  font-weight: 900;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget li:last-child {
  margin-bottom: 0;
}

.sidebar .widget li a {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.04rem;
}

.sidebar .widget a {
  color: white;
  font-size: 18px;
  text-transform: capitalize;
  line-height: 130%;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget a:hover {
  color: #FF003C;
}

.sidebar .widget-author {
  position: relative;
  width: 100%;
}

.sidebar .widget-author div {
  padding-bottom: 100%;
}

.sidebar .widget-inner {
  padding: 30px;
}

.sidebar .widget-social {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
}

.sidebar .widget_search .search-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.sidebar .widget_search .search-field {
  width: 100%;
  margin-bottom: 15px;
  margin-top: 25px;
}

.sidebar .widget_search .search-submit {
  color: white;
}

.sidebar .widget_categories li {
  color: white;
  font-size: 18px;
  text-transform: capitalize;
}

.sidebar .widget_categories li a {
  display: inline-block;
}

.sidebar .widget_recent_entries li::before {
  content: "";
}

.sidebar .widget_recent_entries li {
  position: relative;
  padding: 0;
}

.sidebar .widget_recent_entries li > * {
  padding-left: 30px;
}

.sidebar .widget_recent_entries li a {
  margin-bottom: 10px;
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 18px;
  letter-spacing: 0.02rem;
}

.sidebar .widget_recent_entries li a::before {
  content: '\f111';
  position: absolute;
  left: 0;
  font-weight: 400;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  color: white;
  font-size: 12px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sidebar .widget_recent_entries li span {
  text-transform: capitalize;
  line-height: 100%;
  line-height: 130%;
  color: #CFCFCF;
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 18px;
  letter-spacing: 0.04rem;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget_recent_entries li:hover a {
  color: #FF003C;
}

.sidebar .widget_recent_entries li:hover a::before {
  color: #FF003C;
}

.sidebar .widget_recent_entries li:hover span {
  color: #FF003C;
}

.sidebar .widget_recent_comments li {
  color: #CFCFCF;
  padding-left: 30px;
}

.sidebar .widget_recent_comments li .comment-author-link a,
.sidebar .widget_recent_comments li .comment-author-link {
  display: inline-block;
  font-family: 'Noto Sans KR', sans-serif;

  letter-spacing: 0.02rem;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 400;
  color: #CFCFCF;
  padding-right: 2px;
}

.sidebar .widget_recent_comments li .comment-author-link a {
  padding-top: 0;
}

.sidebar .widget_recent_comments li .comment-author-link a:hover {
  color: #FF003C;
}

.sidebar .widget_recent_comments li a {
  display: block;
  letter-spacing: 0.06rem;
  padding-top: 8px;
}

.sidebar .widget_recent_comments li::before {
  content: '\f27a';
  position: absolute;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 400;
  color: white;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget_tag_cloud .tagcloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 25px;
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 19px !important;
  letter-spacing: 0.02rem;
  color: black;
  background-color: white;
  padding: 2px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), background-color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link:hover {
  color: #FFFFFF;
  background-color: #FF003C;
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link:nth-child(1) {
  font-size: 8pt;
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link:nth-child(2n) {
  font-size: 22pt;
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link:nth-child(3n) {
  font-size: 18pt;
}

.sidebar .widget_tag_cloud .tagcloud .tag-cloud-link:nth-child(4n) {
  font-size: 16pt;
}

.sidebar .widget-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 30px;
}

.sidebar .widget-img a {
  overflow: hidden;
  width: 47%;
}

.sidebar .widget-img a:nth-child(1n + 3) {
  margin-top: 6%;
}

.sidebar .widget-img a div {
  padding-bottom: 100%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar .widget-img a:hover div {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/*--------------------------------------------------
	30. Contact
---------------------------------------------------*/
.contact-item {
  margin-top: 100px;
  text-align: center;
}

.contact-icon {
  font-size: 66px;
  color: #D9D9D9;
}

.contact-title {
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 30px;
}

.contact-text {
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
  margin-top: 8px;
}

.contact-text:nth-of-type(1) {
  margin-top: 20px;
}

.contact-message {
  position: relative;
  z-index: 5;
  margin-top: 60px;
}

.contact-message button {
  margin: 0 auto;
  margin-top: 60px;
}

.output-message-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
}

.output-message {
  min-width: 50%;
}

/*--------------------------------------------------
	31. Testimonials slider
---------------------------------------------------*/
.testimonials-card {
  overflow: hidden;
  padding: 20px 0;
}

.testimonials-card .swiper-wrapper {
  margin-bottom: 80px;
}

.testimonials-card-item {
  position: relative;
  height: 100%;
  padding: 35px 30px;
}

.testimonials-card-img {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  margin: 0 auto;
}

.testimonials-card-img div {
  border-radius: 50%;
}

.testimonials-card-author {
  margin-top: 15px;
}

.testimonials-card-author h3 {
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0.04em;
}

.testimonials-card-author p {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.11em;
  margin-top: 7px;
}

.testimonials-card-comment {
  font-size: 17px;
  line-height: 150%;
  margin-top: 25px;
}

/*--------------------------------------------------
	32. Blog slider
---------------------------------------------------*/
.blog-slider {
  overflow: hidden;
  padding: 24px 0;
}

.blog-slider-outer {
  position: relative;
  overflow: hidden;
}

.blog-slider-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}

.blog-slider-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.blog-slider-item {
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.blog-slider-item .blog-card-tag {
  line-height: 130%;
  letter-spacing: 0.13em;
  text-transform: uppercase !important;
  margin-right: 20px;
  margin-bottom: 20px;
}

.blog-slider-item .blog-card-title {
  font-weight: bold;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: 0.01em;
}

.blog-slider-item .blog-card-text {
  margin-top: 20px;
}

.blog-slider-date {
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 15px;
  line-height: 130%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 50px;
}

.blog-slider-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-slider-pagination {
  margin-top: 80px;
}

.blog-slider-outer .blog-slider-img {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.blog-slider-outer .blog-card-title {
  -webkit-transition: color var(--design-motion-duration) ease;
  transition: color var(--design-motion-duration) ease;
}

.blog-slider-outer .blog-card-text {
  -webkit-transition: color var(--design-motion-duration) ease;
  transition: color var(--design-motion-duration) ease;
}

.blog-slider-outer .blog-slider-date {
  -webkit-transition: color var(--design-motion-duration) ease;
  transition: color var(--design-motion-duration) ease;
}

.blog-slider-outer:hover .blog-slider-img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  opacity: 1;
}

.blog-slider-outer:hover .blog-card-title {
  color: #FFFFFF !important;
}

.blog-slider-outer:hover .blog-card-text {
  color: #CFCFCF;
}

.blog-slider-outer:hover .blog-slider-date {
  color: #FFFFFF;
}

/*--------------------------------------------------
	33. Porfolio isotope
---------------------------------------------------*/
.section-filter {
  overflow: initial;
}

.filter-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.filter-item {
  background: none;
  border: none;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 30px;
  margin-right: 20px;
}

.filter-item:last-child {
  margin-right: 0;
}

.filter-item:hover {
  color: #FF003C;
}

.grid {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 60px;
}

.grid-item {
  position: relative;
  display: block;
  width: 33.33%;
}

.grid-item-1_100 {
  padding-bottom: 100%;
}

.grid-item-1_130 {
  padding-bottom: 130%;
}

.grid-inner {
  position: relative;
  overflow: hidden;
  width: initial;
  margin: 30px 15px 0 15px;
}

.grid-img {
  position: absolute;
}

.grid-content {
  position: absolute;
  bottom: 30px;
  left: 20px;
}

.grid-content h4 {
  font-family: 'Noto Sans KR', sans-serif;

  font-size: 32px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.grid-content p {
  font-weight: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
  margin-right: 15px;
}

.grid-content p:last-child {
  margin-right: 0;
}

.grid-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.grid-item {
  position: relative;
}

.grid-item .grid-inner {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.grid-item .grid-img {
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.grid-item .grid-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.grid-item .grid-content h4 {
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.grid-item .grid-content p {
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.grid-item:hover .grid-inner {
  -webkit-transform: scale(0.94);
          transform: scale(0.94);
}

.grid-item:hover .grid-img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.grid-item:hover .grid-inner::after {
  opacity: 1;
}

.grid-item:hover .grid-content h4 {
  opacity: 1;
}

.grid-item:hover .grid-content p {
  opacity: 1;
}

/*--------------------------------------------------
	34. Porfolio slider fullscreen
---------------------------------------------------*/
.portfolio-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.portfolio-slider .swiper-slide {
  overflow: hidden;
}

.portfolio-slider .container-fluid, .portfolio-slider .row {
  height: 100%;
}

.portfolio-slider-img {
  width: 100%;
  height: 100%;
}

.portfolio-slider-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding-left: 55px;
}

.portfolio-slider-reveal {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0;
}

.portfolio-slider-reveal-anim {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.portfolio-slider-title {
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;

  text-transform: uppercase;
  font-size: 80px;
  line-height: 115%;
  letter-spacing: 0.8rem;
  background-color: #000000;
}

.portfolio-slider-title span {
  display: inline-block;
  position: relative;
  padding: 4px 22px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.portfolio-slider-title span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF003C;
  z-index: -1;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.portfolio-slider-title span:hover {
  color: #000000;
}

.portfolio-slider-title span:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.portfolio-slider-img .bottom-left-links a {
  display: inline-block;
  font-family: 'Noto Sans KR', sans-serif;

  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: #000000;
  padding: 4px 10px;
  -webkit-transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) !important;
  transition: color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) !important;
}

.portfolio-slider-img .bottom-left-links a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FF003C;
  z-index: -1;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.portfolio-slider-img .bottom-left-links a:hover {
  color: #000000;
}

.portfolio-slider-img .bottom-left-links a:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.portfolio-slider-pagination {
  position: absolute;
  right: 70px !important;
  width: 40px !important;
}

.portfolio-slider-pagination .bullet {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 20px;
  font-size: 20px;
  color: white;
  font-weight: 500;
  margin: 20px 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, top var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, top var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, top var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, top var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), color var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.portfolio-slider-pagination .bullet-active-prev {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.portfolio-slider-pagination .bullet-active-next {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.portfolio-slider-pagination .bullet-active-prev-prev {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.portfolio-slider-pagination .bullet-active-next-next {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

.portfolio-slider-pagination .bullet-active {
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
  color: #FF003C;
  margin: 20px 0;
}

.portfolio-slider-pagination-reveal .bullet {
  opacity: 1;
}

.portfolio-slider-navigation {
  position: absolute;
  bottom: 30px;
  right: 70px;
}

.r-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/*--------------------------------------------------
	35. Porfolio slider columns
---------------------------------------------------*/
.portfolio-slider-column {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.portfolio-slider-column-item {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.portfolio-slider-column-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(8, 9, 13, 0.7);
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
}

.portfolio-slider-column-item:hover::after {
  opacity: 1;
}

.portfolio-slider-column-item:hover .portfolio-slider-column-img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.portfolio-slider-column-item:hover .portfolio-slider-column-content span {
  -webkit-transform: none;
          transform: none;
}

.portfolio-slider-column-img {
  position: absolute;
  -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5) inset;
          box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5) inset;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.portfolio-slider-column-content {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
}

.portfolio-slider-column-content p {
  display: inline-block;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 115%;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  font-weight: 700;
  overflow: hidden;
}

.portfolio-slider-column-content p span {
  display: inline-block;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.portfolio-slider-column-content h2 {
  overflow: hidden;
  line-height: 115%;
  font-family: 'Noto Sans KR', sans-serif;

  text-transform: uppercase;
  font-size: 44px;
  letter-spacing: 0.08em;
  font-weight: bold;
}

.portfolio-slider-column-content h2 span {
  display: inline-block;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.portfolio-slider-column-reveal .swiper-slide {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1);
}

.portfolio-slider-column-reveal .swiper-slide:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.portfolio-slider-column-reveal .swiper-slide:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.portfolio-slider-column-reveal-anim .swiper-slide {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.portfolio-slider-column-navigation {
  position: absolute;
  bottom: 30px;
  left: 70px;
}

/*--------------------------------------------------
	36. 404 page
---------------------------------------------------*/
.page-404-title {
  font-size: 160px;
}

.page-404-info {
  margin-top: 70px;
}

.page-404-lead {
  font-size: 24px;
  margin-top: 20px;
}

.page-404-btn {
  font-size: 18px;
  margin-top: 70px;
  padding-bottom: 5px;
}

.page-404-btn i {
  font-size: 14px;
  margin-left: 4px;
}

/*--------------------------------------------------
	37. Breadcrubms
---------------------------------------------------*/
.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.breadcrumb-wrap {
  margin-bottom: 29px;
}

.breadcrumb-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 6px;
}

.breadcrumb-item::before {
  content: "" !important;
  position: relative;
  height: 1px;
  margin: 0 13px 0 4px;
  margin-top: 3px;
  background-color: gray;
  width: 16px;
}

.breadcrumb-item:first-child::before {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.breadcrumb-item.item-current {
  color: gray;
}

.breadcrumb-item,
.breadcrumb-item a {
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.breadcrumb-item a {
  color: white;
  -webkit-transition: color var(--design-motion-duration) ease-in-out;
  transition: color var(--design-motion-duration) ease-in-out;
}

.breadcrumb-item a:hover {
  color: #FF003C;
}

/*--------------------------------------------------
	38. Price cards
---------------------------------------------------*/
.price-content {
  margin-bottom: 50px;
}

.price-content > span {
  display: block;
  margin-top: 2px;
}

.price-cost {
  position: relative;
  font-weight: 600;
  font-size: 85px;
  line-height: 120%;
}

.price-cost span {
  position: absolute;
  padding-left: 4px;
  font-weight: 500;
  font-size: 50px;
  line-height: 120%;
  color: #9E9E9E;
}

.price-list {
  margin-top: 25px;
}

.price-list-item {
  font-size: 18px;
  line-height: 120%;
  text-align: center;
  text-transform: capitalize;
  color: #C0C0C0;
  margin-bottom: 12px;
}

.price-list-item:last-child {
  margin-bottom: 0;
}

.price-btn-wrap {
  padding-bottom: 50px;
}

.price-btn {
  margin-top: 65px;
}

/*--------------------------------------------------
	39. Particles
---------------------------------------------------*/
.particles-js-canvas-el {
  position: absolute;
  z-index: 1;
}

/*--------------------------------------------------
	40. Anchor menu
---------------------------------------------------*/
.menu-anchor {
  position: relative;
}

.menu-anchor-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu-anchor-list li {
  margin-right: 25px;
}

.menu-anchor-list li:last-child {
  margin-right: 0;
}

.menu-anchor-list li a {
  font-size: 17px;
  padding: 5px 0;
  font-weight: 600;
  color: white;
  -webkit-transition: color var(--design-motion-duration) ease-in-out;
  transition: color var(--design-motion-duration) ease-in-out;
}

.menu-anchor-list li a:hover {
  color: #FF003C;
}

.menu-anchor-list li a::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #FF003C;
  bottom: 0;
  z-index: -1;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform var(--design-motion-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.menu-anchor-list li.active a::before {
  -webkit-transform: scaleX(1) !important;
          transform: scaleX(1) !important;
}

.header-anchor .menu-outer-wrap {
  display: none;
}

.menu-navigation-md {
  display: none;
}

.menu-anchor ul li {
  opacity: 0;
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
}

.menu-anchor ul li:nth-child(1) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(2) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(3) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(4) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(5) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(6) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(7) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(8) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

.menu-anchor ul li:nth-child(9) {
  -webkit-transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
  transition: opacity var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms, -webkit-transform var(--design-motion-duration) cubic-bezier(0.77, 0, 0.175, 1) 0ms;
}

@media only screen and (min-width: 1024px) {
  html {
    width: 100vw;
  }
  * {
    cursor: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  p {
    font-size: 16px;
    line-height: 150%;
  }
  .text-lead {
    font-size: 19px;
    line-height: 140%;
  }
  .section-small {
    padding: 80px 0;
  }
  .section-medium {
    padding: 100px 0;
  }
  .section-large {
    padding: 120px 0;
  }
  .section-title-small h2 {
    font-size: 60px;
  }
  .section-title-medium h2 {
    font-size: 65px;
  }
  .section-title-large h2 {
    font-size: 70px;
  }
  .type {
    font-size: 66px;
  }
  .page-header-title {
    font-size: 65px;
  }
  .card-group {
    margin-top: 100px;
  }
  .card-group .row > div:nth-child(1n+3) {
    margin-top: 30px;
  }
  .card-group.card-fullwidth .row > div:nth-child(1n+3) {
    margin-top: 0;
  }
  .menu-inner {
    width: 85vw;
  }
  .menu-pre-background {
    width: 85%;
  }
  .portfolio {
    margin-top: 100px;
  }
  .portfolio-item-left {
    padding-right: 20px;
  }
  .portfolio-item-right {
    padding-left: 20px;
  }
  .portfolio-info span {
    font-size: 14px;
  }
  .portfolio-info h2 {
    font-size: 32px;
  }
  .team {
    margin-top: 100px;
  }
  .team .row > div:nth-child(1n+3) {
    margin-top: 30px;
  }
  .work-title {
    font-size: 50px;
  }
  .work-img-section {
    margin-top: 80px;
  }
  .grid-item {
    width: 50%;
  }
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
  .text-additional {
    font-size: 16px;
  }
  .text-lead {
    font-size: 19px;
  }
  .section-title-small h2 {
    font-size: 55px;
  }
  .section-title-medium h2 {
    font-size: 60px;
  }
  .section-title-large h2 {
    font-size: 65px;
  }
  .type {
    font-size: 60px  !important;
  }
  .portfolio-info h2 {
    font-size: 38px;
  }
  .work-title {
    font-size: 46px;
  }
  .portfolio-slider-content {
    padding-left: 15px;
  }
  .portfolio-slider-title {
    font-size: 50px;
    letter-spacing: 0.4rem;
  }
  .portfolio-slider-img .bottom-left-links {
    display: initial !important;
    bottom: 30px;
    left: 30px;
  }
  .portfolio-slider-img .bottom-left-links a {
    padding: 4px 10px;
    font-size: 16px;
  }
  .portfolio-slider-pagination {
    right: 30px !important;
  }
  .portfolio-slider-navigation {
    bottom: 30px;
    right: 30px;
  }
  .portfolio-slider-column-navigation {
    bottom: 30px;
    left: 30px;
  }
  .portfolio-slider-column-content {
    padding: 0 30px;
  }
}

@media only screen and (max-width: 574px) {
  .text-additional {
    font-size: 16px;
  }
  .text-lead {
    font-size: 17px;
  }
  .type {
    font-size: 66px;
  }
  .to-top-button {
    bottom: 30px;
    right: 30px;
    font-size: 13px;
    color: white;
    width: 42px;
    height: 42px;
  }
  .slide-content .slide-subtitle {
    font-size: 16px;
  }
  .slide-content .slide-title {
    font-size: 48px;
  }
  .testimonials-pagination {
    margin-top: 50px;
  }
  .testimonials-comment {
    font-size: 20px;
  }
  .testimonials-author h3 {
    font-size: 24px;
  }
  .about-lead {
    margin-top: 30px;
  }
  .about-text {
    margin-top: 20px;
  }
  .about-text:first-child {
    margin-top: 20px;
  }
  .about .btn-hover {
    margin-top: 40px;
  }
  .awards {
    margin-top: 80px;
  }
  .awards .row > div:nth-child(1n+2) {
    margin-top: 40px;
  }
  .work-next {
    padding: 120px 0;
  }
  .work-next-button {
    font-size: 36px;
  }
  .sm-center {
    text-align: center;
  }
  .work-info {
    margin-top: 50px;
    text-align: center;
  }
  .work-info h3 {
    font-size: 28px;
  }
  .blog-container {
    padding: 0;
  }
  .blog-container .row {
    margin-right: 0;
    margin-left: 0;
  }
  .blog-container .row div[class^="col"] {
    padding: 0;
  }
  .blog-content, .comment-respond {
    padding: 30px 15px 35px 15px;
  }
  .blog-title {
    font-size: 28px;
  }
  .blog-tags a {
    font-size: 16px;
  }
  .comment-respond .comment-form > div {
    padding: 0;
  }
  .widget {
    padding: 35px 15px;
  }
  .portfolio-slider-content {
    padding-left: 0;
  }
  .portfolio-slider-title {
    font-size: 38px;
    letter-spacing: 0.15rem;
  }
  .portfolio-slider-title span {
    padding: 4px 12px;
  }
  .portfolio-slider-img .bottom-left-links {
    display: initial !important;
    bottom: 15px;
    left: 15px;
  }
  .portfolio-slider-img .bottom-left-links a {
    padding: 2px 5px;
    font-size: 14px;
  }
  .portfolio-slider-pagination {
    right: 15px !important;
  }
  .portfolio-slider-navigation {
    bottom: 15px;
    right: 15px;
  }
  .portfolio-slider-navigation .slider-nav {
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  .portfolio-slider-column-navigation {
    bottom: 15px;
    left: 15px;
  }
  .portfolio-slider-column-content {
    padding: 0 15px;
  }
  .portfolio-slider-column-content h2 span {
    display: table-caption;
  }
  .page-404-title {
    font-size: 120px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-large {
    padding: 140px 0;
  }
  .card-small .card-content {
    padding: 20px 25px 25px 25px;
  }
  .card-icon {
    margin-bottom: 40px;
  }
  .card-large .card-content {
    padding: 40px 30px;
  }
  .card-xlarge .card-content {
    padding: 70px 30px;
  }
  .blog-card-content h3 {
    font-size: 23px;
  }
  .menu-inner {
    width: 70vw;
  }
  .menu-pre-background {
    width: 70%;
  }
  .blog-content, .comment-respond {
    padding: 30px 20px 35px 20px;
  }
  .widget {
    padding: 30px 20px;
  }
}

@media only screen and (max-width: 767px) {
  .section-small {
    padding: 60px 0;
  }
  .section-medium {
    padding: 80px 0;
  }
  .section-large {
    padding: 100px 0;
  }
  .section-title .subtitle {
    font-size: 16px;
  }
  .section-title .section-text {
    font-size: 16px;
  }
  .section-title.md-center {
    text-align: center;
  }
  .header {
    padding: 25px 30px;
  }
  .pagination {
    bottom: 30px !important;
  }
  .page-header-title {
    font-size: 50px;
  }
  .breadcrumb-item,
  .breadcrumb-item a {
    font-size: 18px;
  }
  .card-group {
    margin-top: 80px;
  }
  .card-group .row > div:nth-child(1n+2) {
    margin-top: 30px;
  }
  .card-group.card-fullwidth .row > div:nth-child(1n+2) {
    margin-top: 0;
  }
  .footer-item {
    margin-bottom: 50px;
  }
  .footer-bottom {
    margin-top: 20px;
    padding-top: 50px;
  }
  .footer .copyright p {
    text-align: center;
  }
  .footer-social {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 30px;
  }
  .menu-inner {
    width: 100vw;
  }
  .menu-pre-background {
    width: 100%;
  }
  .menu-header {
    display: none;
  }
  .menu-inner .social {
    bottom: 30px;
  }
  .nav-link {
    font-size: 38px;
  }
  .navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
  .menu-inner .social {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    bottom: 20px;
  }
  .slide-content {
    text-align: center;
  }
  .slide-content h1 {
    font-size: 70px;
  }
  .slider-nav {
    margin-left: auto;
    margin-right: auto;
  }
  .bottom-left-links {
    display: none;
  }
  .intro-text {
    font-size: 17px;
    line-height: 150%;
  }
  .portfolio {
    margin-top: 0;
  }
  .portfolio-item-left {
    padding-top: 0;
    padding-right: 0;
  }
  .portfolio-item-right {
    padding-left: 0;
  }
  .portfolio-item {
    margin-top: 100px;
  }
  .about-text {
    font-size: 16px;
    line-height: 150%;
  }
  .team {
    margin-top: 80px;
  }
  .team .row > div:nth-child(1n+2) {
    margin-top: 30px;
  }
  .steps {
    margin-top: 80px;
  }
  .steps .row > div:nth-child(1n+2) {
    margin-top: 30px;
  }
  .skills {
    margin-top: 80px;
  }
  .skills .row > div:nth-child(1n + 2) {
    margin-top: 40px;
  }
  .clients-item {
    margin-left: 0;
    margin-right: 0;
  }
  .work-text {
    font-size: 17px;
  }
  .work-img-section {
    margin-top: 60px;
  }
  .blog-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 0;
  }
  .blog-header div:first-child {
    width: 100%;
    margin-bottom: 15px;
  }
  .blog-header div:last-child {
    width: 100%;
    margin-bottom: 30px;
  }
  .comment-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  .comment-item .comment-item {
    margin-top: 35px;
    margin-left: 25px;
  }
  .comment-item .comment-img {
    width: 74px;
    height: 74px;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .comment-item .comment-text {
    margin-top: 4px;
  }
  .grid-item {
    width: 100%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 574px) {
  .section-title-small h2 {
    font-size: 44px;
  }
  .section-title-medium h2 {
    font-size: 46px;
  }
  .section-title-large h2 {
    font-size: 48px;
  }
  .card {
    max-width: 80%;
    margin: 0 auto;
  }
  .blog-card {
    width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .section-title-small h2 {
    font-size: 36px;
  }
  .section-title-medium h2 {
    font-size: 38px;
  }
  .section-title-large h2 {
    font-size: 40px;
  }
  .card-small .card-content {
    padding: 20px 25px 30px 25px;
  }
}

@media only screen and (max-width: 1024px) {
  .cursor {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .header {
    padding: 20px 20px;
  }
  .page-header-title {
    font-size: 45px;
  }
  .intro .text-lead {
    margin-top: 30px;
  }
  .intro-text {
    font-size: 16px;
    line-height: 150%;
    margin-top: 30px;
  }
}

@media only screen and (max-width: 480px) {
  .page-header-title {
    font-size: 45px;
  }
  .breadcrumb-item,
  .breadcrumb-item a {
    font-size: 16px;
  }
  .slide-content .slide-title {
    font-size: 46px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 991px) {
  .card-small .card-content {
    padding: 25px 35px 30px 35px;
  }
  .card-icon {
    margin-bottom: 45px;
  }
  .card-large .card-content {
    padding: 45px 30px;
  }
  .card-xlarge .card-content {
    padding: 75px 30px;
  }
  .to-top-button {
    bottom: 30px;
    right: 50px;
  }
  .steps .row > div:nth-child(1n+3) {
    margin-top: 30px;
  }
  .awards .row > div:nth-child(1n+3) {
    margin-top: 30px;
  }
  .skills .row > div:nth-child(1n + 3) {
    margin-top: 30px;
  }
  .clients {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 80px;
  }
  .clients-item {
    margin-left: 15px;
    margin-right: 15px;
  }
  .work-img-long {
    margin-bottom: 30px;
  }
  .work-title {
    font-size: 50px;
  }
  .work-next {
    padding: 150px 0;
  }
  .work-next-button {
    font-size: 48px;
  }
  .sidebar {
    margin-top: 120px;
  }
  .widget-author {
    padding-bottom: 70% !important;
  }
  .portfolio-slider-column-item:hover::after {
    opacity: 0;
  }
  .portfolio-slider-column-item:hover .portfolio-slider-column-img {
    -webkit-transform: none;
            transform: none;
  }
  .portfolio-slider-column-img {
    -webkit-box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.3) inset;
            box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.3) inset;
  }
  .portfolio-slider-column-content p {
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .portfolio-slider-column-content p span {
    background-color: black;
    padding: 4px 10px;
    -webkit-transform: none;
            transform: none;
  }
  .portfolio-slider-column-content h2 {
    font-size: 44px;
    letter-spacing: 0.08em;
  }
  .portfolio-slider-column-content h2 span {
    background-color: black;
    padding: 4px 10px;
    -webkit-transform: none;
            transform: none;
  }
  .menu-anchor {
    display: none;
  }
  .header-anchor .menu-outer-wrap {
    display: block;
  }
  .menu-navigation-md {
    display: block;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .card-img div {
    padding-bottom: 80%;
  }
}

@media only screen and (max-width: 300px) {
  .card-small .card-content {
    padding: 20px 15px 25px 15px;
  }
  .portfolio-slider-navigation .slider-nav {
    -webkit-transform: scale(0.65);
            transform: scale(0.65);
  }
}

@media only screen and (max-width: 379px) {
  .card-large .card-content {
    padding: 40px 30px;
  }
  .card-xlarge .card-content {
    padding: 70px 30px;
  }
  .work-title {
    font-size: 36px;
  }
  .widget-social {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .widget-social .social-item {
    margin: 5px 10px;
  }
}

@media only screen and (max-width: 290px) {
  .card-large .card-content {
    padding: 35px 15px;
  }
  .card-xlarge .card-content {
    padding: 60px 15px;
  }
  .card-title {
    font-size: 24px;
  }
  .card-text {
    font-weight: normal;
  }
}

@media only screen and (min-width: 992px) {
  .card-group .row > div:nth-child(1n+4) {
    margin-top: 30px;
  }
  .card-group.card-fullwidth .row > div:nth-child(1n+4) {
    margin-top: 0;
  }
}

@media only screen and (min-width: 575px) and (max-width: 991px) {
  .blog-card-content h3 {
    font-size: 22px;
  }
  .about-text:first-child {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 380px) {
  .blog-card-content h3 {
    font-size: 22px;
  }
  .blog-card-content {
    padding: 20px 15px;
    padding-bottom: 30px;
  }
  .portfolio-info h2 {
    font-size: 34px;
  }
  .clients-item {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    height: 185px;
  }
}

@media only screen and (max-width: 440px) {
  .navigation-list > li {
    margin-bottom: 25px;
  }
  .navigation-list > li:last-child {
    margin-bottom: 0;
  }
  .navigation-list > li a {
    font-size: 28px;
  }
  .subnav-list li {
    margin-bottom: 25px;
  }
  .subnav-list li:last-child {
    margin-bottom: 0;
  }
  .subnav-list li .subnav-title {
    font-size: 28px;
  }
  .subnav-list li a {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .slide-content .slide-title {
    font-size: 42px;
  }
}

@media only screen and (min-width: 420px) and (max-width: 767px) {
  .team-title {
    font-size: 36px;
  }
  .team-text {
    font-size: 18px;
    margin-top: 10px;
  }
  .team-social {
    margin-top: 30px;
  }
  .team-social-item {
    font-size: 24px;
    margin-right: 35px;
  }
  .team-social-item:last-child {
    margin-right: 0;
  }
}

@media only screen and (max-width: 419px) {
  .team-title {
    font-size: 26px;
  }
  .team-text {
    font-size: 17px;
    margin-top: 10px;
  }
  .team-social {
    margin-top: 25px;
  }
  .team-social-item {
    font-size: 24px;
    margin-right: 25px;
  }
  .team-social-item:last-child {
    margin-right: 0;
  }
}

@media only screen and (min-width: 380px) and (max-width: 767px) {
  .steps-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .skills-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 380px) and (max-width: 574px) {
  .work-title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 430px) {
  .blog-title {
    font-size: 24px;
  }
  .comment-item .comment-item {
    margin-top: 25px;
    margin-left: 15px;
  }
  .comment-item .comment-img {
    width: 74px;
    height: 74px;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .comment-item .comment-text {
    margin-top: 4px;
  }
}


/* One duration for site UI/sliding transitions; no staggered waiting. */
:root { --design-motion-duration:500ms; }
.cover-right-anim > *,.cover-down-anim > * { animation-delay:calc(var(--design-motion-duration) / 2)!important; }
@media (prefers-reduced-motion:reduce) {
 :root { --design-motion-duration:1ms; }
 .cover-right-anim > *,.cover-down-anim > * { animation-delay:0ms!important; }
}