/* Fonts */

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

:root {
  --default-font: "Poppins",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #32353a; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1a2e5d; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #3a3939;  /* The default color of the main navmenu links */
  --nav-hover-color: #FBCA4A; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #3a3939; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e84545; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 600;
  padding-left: 3px;
}

.header .btn-language,
.header .btn-language:focus {
  background: #1a2e5d;
  color: #FBCA4A;
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-language:hover,
.header .btn-language:focus:hover {
  background: #FBCA4A;
  color: #1a2e5d;
}



@media (max-width: 767px) {
  .header .logo {
    order: 1;
  }

  .header .btn-language,
  .header .btn-language:focus {
    order: 2;
    margin-left: auto;
    padding: 6px 20px;
    margin-left: auto;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
  --heading-color: #ffffff;
  --nav-color: rgba(255, 255, 255, 0.5);
  --nav-hover-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
  --heading-color: #32353a;
  --nav-color: #3a3939;
  --nav-hover-color: #FBCA4A;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 768px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 5px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }
}

/* Navmenu - Mobile */
@media (max-width: 767px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #1a2e5d;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 5px;
  position: relative;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  color: #FBCA4A;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: #FBCA4A;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #1a2e5d;
  line-height: 0;
}

.scroll-top:hover {
  background-color: rgb(155, 124, 39);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 70px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 64px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Carousel
--------------------------------------------------------------*/
#hero {
  height: 120vh;
  position: relative;
  overflow: hidden;
  margin-top: -60px;
  margin-bottom: -130px;
}

#myCarousel .carousel-caption {
  top: 62%;
  transform: translateY(-50%);
  z-index: 10;
}

#myCarousel .carousel-item {
  height: 100vh;
}

#myCarousel .carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 어둡게 하는 정도를 조절 */
  z-index: 2;
}

#myCarousel .carousel-control-prev, .carousel-control-next {
  z-index: 3; /* 버튼의 z-index를 3으로 조정 */
}

#myCarousel .carousel-indicators{
  z-index: 3; /* 버튼의 z-index를 3으로 조정 */
}


#myCarousel img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#myCarousel .video-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  --background-color: #f4f4f4;
}

.about .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 8px 26px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 4px;
  display: inline-block;
}

.about .content h2 {
  font-weight: 700;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .icon-box {
  background-color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
}

.about .icon-box h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

.about .icon-box p {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
}

.about .icon-boxes .col-md-6:nth-child(2) .icon-box,
.about .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {
  .about .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .about .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
}



/*--------------------------------------------------------------
# solution Section
--------------------------------------------------------------*/
.solution .section-title h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  padding: 10px 18px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.solution .service-item {
  position: relative;
  padding-top: 40px;
}

.solution .service-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
}

.solution .service-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent-color);
  border-right: 5px solid var(--background-color);
}

.solution .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-right: 50px;
  line-height: 0;
}

.solution .service-item .icon i {
  color: #1a2e5d;
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.solution .service-item .icon:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background: #FBCA4A;
  border-radius: 50px;
  z-index: 1;
  bottom: -15px;
  right: -15px;
  transition: 0.3s;
}

.solution .service-item .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.solution .service-item .title a {
  color: var(--heading-color);
}

.solution .service-item .title a:hover {
  color: #FBCA4A;
}

.solution .service-item .description {
  line-height: 24px;
  font-size: 16px;
}

.solution .col-lg-12 img {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.solution ul {
  padding-left: 18px; /* ul의 왼쪽 패딩 제거 */
}

.modal-custom {
  max-width: 80%;
}

@media (max-width: 576px) {
  .modal-custom {
    max-width: 100%;
  }
}


/*--------------------------------------------------------------
# Solution2 Section
--------------------------------------------------------------*/
.solution2 {
  --background-color: #ffffff;
}

.solution2 .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.solution2 .content h2 {
  font-weight: 700;
}

.solution2 .content p:last-child {
  margin-bottom: 0;
}

.solution2 .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.solution2 .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.solution2 .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.solution2 .content .read-more:hover i {
  margin-left: 10px;
}

.solution2 .icon-box {
  background-color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.solution2 .icon-box i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.solution2 .icon-box h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.solution2 .icon-box p {
  margin-bottom: 0;
}

.solution2 .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.solution2 .icon-boxes .col-md-6:nth-child(2) .icon-box,
.solution2 .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {

  .solution2 .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .solution2 .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
}

.solution2 .service-item {
  position: relative;
  padding-top: 40px;
}

.solution2 .service-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
}

.solution2 .service-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent-color);
  border-right: 5px solid var(--background-color);
}

.solution2 .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-right: 50px;
  line-height: 0;
}

.solution2 .service-item .icon i {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.solution2 .service-item .icon:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 50px;
  z-index: 1;
  bottom: -15px;
  right: -15px;
  transition: 0.3s;
}

.solution2 .service-item .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.solution2 .service-item .title a {
  color: var(--heading-color);
}

.solution2 .service-item .title a:hover {
  color: var(--accent-color);
}

.solution2 .service-item .description {
  line-height: 24px;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Video Section
--------------------------------------------------------------*/
.video {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.video .bg-image {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.video:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.video .container {
  position: relative;
  z-index: 3;
}

.video h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.video p {
  color: var(--default-color);
}

.video .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.video .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.embed-responsive-item {
  max-width: 100%;
  height: auto;
}




/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  --background-color: #f4f4f4;
}

.services .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.services .content h2 {
  font-weight: 700;
}

.services .content p:last-child {
  margin-bottom: 0;
}

.services .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.services .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.services .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.services .content .read-more:hover i {
  margin-left: 10px;
}

.services .icon-box {
  background-color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.services .icon-box i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.services .icon-box h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.services .icon-box p {
  margin-bottom: 0;
}

.services .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.services .icon-boxes .col-md-6:nth-child(2) .icon-box,
.services .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {

  .services .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .services .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img[src="assets/img/city.jpg"],
.call-to-action img[src="assets/img/pen.jpg"] {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# History Section
--------------------------------------------------------------*/
.history {
  --background-color: #f4f4f4;
}

.history .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.history .content h2 {
  font-weight: 700;
}

.history ul {
  list-style-type: disc;
}

.col-xl-7 {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1199px) {
  #history.section {
    height: auto;
  }
}

@media (min-width: 1200px) {
  #history.section {
    height: 93vh;
  }
}

.history ul {
  padding-left: 20px; /* ul의 왼쪽 패딩 제거 */
}

.timeline {
  border-left: 1px solid #1a2e5d;
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: #FBCA4A;
  left: -31px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  content: "";
}


/* history scroll section */
.col-xl-7 {
  max-height: 2000px;
  overflow-y: auto; /* 세로 스크롤 활성화 */
  overflow-x: hidden; /* 가로 스크롤 비활성화 */
}

/* 스크롤바 전체 */
.col-xl-7::-webkit-scrollbar {
  width: 8px; /* 스크롤바의 너비 */
}

/* 스크롤바 막대 */
.col-xl-7::-webkit-scrollbar-thumb {
  background-color: #1a2e5d; /* 스크롤바 막대의 색상 */
  border-radius: 6px; /* 스크롤바 막대의 둥근 정도 */
}

/* 스크롤바 트랙 */
.col-xl-7::-webkit-scrollbar-track {
  background-color: #fbc94a48;
}

.blurslider-gradient {
  background: -webkit-linear-gradient(left, #ff557c 0%, #f3823c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*--------------------------------------------------------------
# about1 Section
--------------------------------------------------------------*/
.about1 article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 95%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #D2D2D2;
}

.about1 article p {
  margin-bottom: 0;
}

.about1 .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.about1 .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.about1 .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.about1 .title a:hover {
  color: var(--accent-color);
}

.container.section-title {
  text-align: left;
}

.container.section-title p {
  text-align: left;
}

.about1 .section-title h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  padding: 10px 20px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.about1 ul {
  padding-left: 18px;
}

.card-body {
  height: 100px;
}

.card {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 10px;
}

.card-title {
  margin-bottom: 3px;
  width: 100%;
  font-size: 16px;
}

.card-title1 {
  text-align: center;
  margin-bottom: 3px;
  width: 100%;
  font-size: 16px;
}

@media (max-width: 1199px) {
  .card-body {
      font-size: 15px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .card-body {
      font-size: 11px;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .custom-card-body {
      min-height: 150px; /* 원하는 높이로 수정 */
  }
  .card-title1 {
    font-size: 12px;
  }
}


@media (max-width: 768px) {
  .card-title1 {
    height: 10px;
    margin-top: 15px;
  }
}

/* 슬라이드 0 */
.wrap0 { 
  overflow: hidden;
  width: 100%;
  max-width: 1000px;
}
.roller0 {
  display: flex;
}
.rolling_list0 { 
  display: flex;
  list-style-type: none;
}
.wrap0 .rolling_list0 .item { 
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 50px;
}
.wrap0 .rolling_list0 .item img {
  max-width: 100px; /* 너비 제한 */
  max-height: 30px; /* 높이 제한 */
  height: auto; /* 비율 유지 */
}
.roller0 .rolling_list0.original {
  animation: rollingTop1 50s linear infinite;
}
.roller0 .rolling_list0.clone {
  animation: rollingTop2 50s linear infinite;
}
@keyframes rollingTop1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes rollingTop2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* hover시 일시정지 */
.roller0:hover .rolling_list0 {
   animation-play-state: paused; 
}

/* 슬라이드 1 */
.wrap1 { 
  overflow: hidden;
  width: 100%;
  max-width: 1000px;
}
.roller1 {
  display: flex;
}
.rolling_list1 { 
  display: flex;
  list-style-type: none;
}
.wrap1 .rolling_list1 .item { 
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 50px;
}
.wrap1 .rolling_list1 .item img {
  max-width: 100px; /* 너비 제한 */
  max-height: 30px; /* 높이 제한 */
  height: auto; /* 비율 유지 */
}
.roller1 .rolling_list1.original {
  animation: rollingTop1 110s linear infinite;
}
.roller1 .rolling_list1.clone {
  animation: rollingTop2 110s linear infinite;
}
@keyframes rollingTop1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes rollingTop2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* hover시 일시정지 */
.roller1:hover .rolling_list1 {
   animation-play-state: paused; 
}



/* 슬라이드 2 */
.wrap2 { 
  overflow: hidden;
  width: 100%;
  max-width: 1000px
}
.roller2 {
  display: flex;
}
.rolling_list2 { 
  display: flex;
  list-style-type: none;
}
.wrap2 .rolling_list2 .item { 
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 50px;
}
.wrap2 .rolling_list2 .item img {
  max-width: 100px; /* 너비 제한 */
  max-height: 30px; /* 높이 제한 */
  height: auto; /* 비율 유지 */
}
.roller2 .rolling_list2.original {
  animation: rollingTop1 50s linear infinite;
}
.roller2 .rolling_list2.clone {
  animation: rollingTop2 50s linear infinite;
}
@keyframes rollingTop1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes rollingTop2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* hover시 일시정지 */
.roller2:hover .rolling_list2 {
   animation-play-state: paused; 
}


/* 슬라이드 3 */
.wrap3 { 
  overflow: hidden;
  width: 100%;
  max-width: 1000px
}
.roller3 {
  display: flex;
}
.rolling_list3 { 
  display: flex;
  list-style-type: none;
}
.wrap3 .rolling_list3 .item { 
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
}
.wrap3 .rolling_list3 .item img {
  max-width: 500px;
  height: 30px;
}
.roller3 .rolling_list3.original {
  animation: rollingTop1 90s linear infinite;
}
.roller3 .rolling_list3.clone {
  animation: rollingTop2 90s linear infinite;
}
@keyframes rollingTop1 {
  0% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  50.01% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes rollingTop2 {
  0% { transition: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* hover시 일시정지 */
.roller3:hover .rolling_list3 {
   animation-play-state: paused; 
}

/* 슬라이드 이미지 투명도 */
.item img {
  opacity: 0.5;
}

@media (max-width: 1400px) {
  .wrap0, .wrap1, .wrap2, .wrap3 {
    width: 88%;
  }
}
@media (max-width: 1200px) {
  .wrap0, .wrap1, .wrap2, .wrap3 {
    width: 73%;
  }
}
@media (max-width: 992px) {
  .wrap0, .wrap1, .wrap2, .wrap3 {
    width: 54%;
  }
}
@media (max-width: 768px) {
  .wrap0, .wrap1, .wrap2, .wrap3 {
    width: 48%;
  }

  .wrap0 .rolling_list0 .item { 
    margin-right: 10px;
  }

  .wrap1 .rolling_list1 .item { 
    margin-right: 10px;
  }

  .wrap2 .rolling_list2 .item { 
    margin-right: 15px;
  }

  .wrap3 .rolling_list3 .item { 
    margin-right: -20px;
  }
}
@media (max-width: 576px) {
  .wrap0, .wrap1, .wrap2, .wrap3 {
    width: 33%;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 50px 0;
  position: relative;
  clip-path: inset(0);
}

.contact img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.contact:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.contact .container {
  position: relative;
  z-index: 3;
}

.contact .section-title h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 8px 26px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 4px;
  display: inline-block;
}

.contact .info-item {
  background: #1a2e5de0;
  padding: 30px;
}

.contact .info-item i {
  font-size: 38px;
  line-height: 0;
  color: #ffffff;
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 10px 0;
  color: #FBCA4A;
}

.contact .info-item p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  color: #ffffff;
}

.contact .text-center h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.contact .info-item a {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  color: #ffffff;
  text-decoration: underline;
}

.contact .info-item a:hover {
  color: #007bff;
  text-decoration: underline;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 1400px) and (min-width: 1200px) {
  .info-item {
    height: 220px; /* 원하는 세로 높이 설정 */
  }
}

@media (max-width: 1200px) {
  .info-item {
    height: 250px;
  }
}




/*--------------------------------------------------------------
# Hero Section Font
--------------------------------------------------------------*/

@font-face {
  font-family: 'Freesentation-9Black';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

/* h2 요소의 텍스트 크기 설정 */
h2.custom-heading {
  font-size: 2.5rem;
  font-family: 'Freesentation-9Black', sans-serif;
}

@media (max-width: 576px) {
  h2.custom-heading {
    font-size: 1.5rem; /* 모바일 크기에서는 작은 글씨 크기 */
  }
}

/* p 요소의 텍스트 크기 설정 */
p.custom-paragraph {
  font-size: 1.5rem;
  font-family: 'Poppins', sans-serif;
}

@media (max-width: 576px) {
  p.custom-paragraph {
      font-size: 1rem; /* 모바일 크기에서는 작은 글씨 크기 */
  }
}


/* 초기화면 제목 Animation */
.animate {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.big-bold {
  font-size: 24px; /* 글씨 크기 */
  font-weight: bold; /* 굵게 */
}

.post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-wrapper {
  max-height: 190px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.col-md-10 img {
  width: 100%;
  max-width: 1200px; /* 최대 크기 설정 */
  height: auto;
}


/* #solutioncarousel {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  width: 98.3%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#solutioncarousel .carousel-indicators [data-bs-target] {
  background-color: #FBCA4A;
}

#solutioncarousel .carousel-indicators .active {
  background-color: #1a2e5d;
}

#solutioncarousel .carousel-indicators {
  bottom: -70px;
}

#solutioncarousel .carousel-indicators button {
  width: 15px;
  height: 15px;
  border-radius: 100%;
}
 */
 
.h2-container {
  position: relative;
  z-index: 1; /* h2 요소가 그림자 위에 렌더링되도록 설정 */
}

.h2-container h2 {
  background-color: white; /* 필요에 따라 배경색 설정 */
  margin: 0; /* h2 내부의 여백 제거 */
}



/*--------------------------------------------------------------
# Recruit Section
--------------------------------------------------------------*/
.recruit {
  --background-color: #f4f4f4;
}

.recruit article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recruit .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.recruit .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recruit .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recruit .title a:hover {
  color: var(--accent-color);
}

.container.section-title {
  text-align: left;
}

.container.section-title p {
  text-align: left;
}

.recruit .section-title h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  padding: 10px 20px;
  background: #1a2e5d;
  color: #FBCA4A;
  border-radius: 7px;
  display: inline-block;
}

.recruit .accordion-button {
  font-weight: bold; /* 굵게 */
}

/*--------------------------------------------------------------
# Recruit Footer
--------------------------------------------------------------*/
.footer1 {
  --background-color: #1a2e5d;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 5px;
  position: relative;
}

.footer1 .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  color: #FBCA4A;
}

.footer1 .copyright p {
  margin-bottom: 0;
}

.footer1 .credits {
  margin-top: 6px;
  font-size: 13px;
}

.main {
  min-height: calc(100vh - 76px); /* 76px는 footer의 높이*/
}


/* 스크롤 시 로고 색상 변경 */
.logo-transparent {
  display: block;
}
.logo-white {
  display: none;
}

/* video modal 사이즈 조정 */
.modal-body video {
  width: 100%;
  height: auto;
}

/* video section 모바일 버전 세로 간격 조정 */
@media (max-width: 1199.98px) {
  .col-xl-6.text-center {
    margin-bottom: 1rem;
  }
  .col-xl-6.text-center:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

/* Scroll Animation 삭제 */
html {
  scroll-behavior: auto !important;
}

gmp-map {
  height: 100%;
}


/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-item {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  justify-content: center;
}

.features .features-item.features-item {
  margin-top: 30px;
}

@media (max-width: 991px) {
  .features-item .col-lg-3 {
    margin-top: -30px;
    margin-bottom: -80px;
  }
}

.features .features-item h3 {
  font-weight: 700;
  font-size: 26px;
}

.features .features-item .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 30px 10px 30px;
  border-radius: 4px;
}

.features .features-item .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

.features .features-item ul {
  list-style: none;
  padding: 0;
}

.features .features-item ul li {
  padding-bottom: 10px;
}

.features .features-item ul li:last-child {
  padding-bottom: 0;
}

.features .features-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .features-item img {
  border: 6px solid var(--contrast-color);
  box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--default-color), transparent 75%);
}

.features .features-item .features-img-bg {
  position: relative;
}

@media (max-width: 640px) {
  .features .features-item .features-img-bg {
    min-height: 300px;
  }
}

.features .features-item .features-img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}