/**
* Template Name: iLanding
* Template URL: https://bootstrapmade.com/ilanding-bootstrap-landing-page-template/
* Updated: Nov 12 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {--default-font: "Noto Sans KR", "Roboto",  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: "Nunito",  sans-serif;
  --nav-font: "Inter",  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 { 
  --kakao-color:#FDDF0F;
  --background-color: #ffffff; 
  --default-color: #212529; 
  --heading-color: #2d465e; 
  --accent-color: #0d83fd; 
  --surface-color: #ffffff;
  --contrast-color: #ffffff; 
}

/* 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: #212529;  /* The default color of the main navmenu links */
  --nav-hover-color: #0d83fd; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #0d83fd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f3f9ff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0d83fd;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #409dfd;
  --contrast-color: #ffffff;
}

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
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);}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, em, pre, code, form, fieldset, legend, address, caption, cite, p, blockquote, th, td, input, select, textarea, button, figure, figcaption {margin:0;padding:0;box-sizing:border-box;font-family:'NotoSansKR', 'Malgun Gothic'sans-serif;color:#333;font-weight:400;font-style:normal;letter-spacing:-0.9px;list-style: none;}
textarea{resize: none;}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {display: none;background: #df1529;color: #ffffff;text-align: left;padding: 15px;margin-bottom: 24px;font-weight: 600;}
.php-email-form .sent-message {display: none;color: #ffffff;background: #059652;text-align: center;padding: 15px;margin-bottom: 24px;font-weight: 600;}
.php-email-form .loading {display: none;background: var(--surface-color);text-align: center;padding: 15px;margin-bottom: 24px;}
.php-email-form .loading:before {content: "";display: inline-block;border-radius: 50%;width: 24px;height: 24px;margin: 0 10px -6px 0;border: 3px solid var(--accent-color);border-top-color: var(--surface-color);animation: php-email-form-loading 1s linear infinite;}
@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
  }

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {--background-color: rgba(255, 255, 255, 0);color: var(--default-color);background-color: var(--background-color);padding: 20px 0;transition: all 0.5s;z-index: 997;}
.header .header-container {background: var(--surface-color);border-radius: 50px;padding: 5px 25px;box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);}
.scrolled .header .header-container {background: color-mix(in srgb, var(--surface-color), transparent 5%);}
.header .logo {line-height: 1;padding-left: 5px;}
.header .logo img {max-height: 36px;margin-right: 8px;}
.header .logo h1 {font-size: 24px;margin: 0;font-weight: 500;color: var(--heading-color);}
.header .btn-getstarted,
.header .btn-getstarted:focus {color: var(--contrast-color);background: var(--accent-color);font-size: 14px;padding: 8px 20px;margin: 0 0 0 30px;border-radius: 50px;transition: 0.3s;}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {color: var(--contrast-color);background: color-mix(in srgb, var(--accent-color), transparent 15%);}

.header .no_navmenu{display: none;}
.header .no_menu{padding: 20px 5px;margin: 0 auto;}
@media (max-width: 1200px) {
  .header {padding-top: 10px;}
  .header .header-container {margin-left: 10px;margin-right: 10px;padding: 10px 5px 10px 15px;}
  .header .logo {order: 1;}
  .header .btn-getstarted {order: 2;margin: 0 10px 0 0;padding: 6px 15px;}
  .header .navmenu {order: 3;}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .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: 18px 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 .dropdown ul {margin: 0;padding: 10px 0;background: var(--nav-dropdown-background-color);display: block;position: absolute;visibility: hidden;left: 14px;top: 130%;opacity: 0;transition: 0.3s;border-radius: 4px;z-index: 99;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);}
  .navmenu .dropdown ul li {min-width: 200px;}
  .navmenu .dropdown ul a {padding: 10px 20px;font-size: 15px;text-transform: none;color: var(--nav-dropdown-color);}
  .navmenu .dropdown ul a i {font-size: 12px;}
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {color: var(--nav-dropdown-hover-color);}
  .navmenu .dropdown:hover>ul {opacity: 1;top: 100%;visibility: visible;}
  .navmenu .dropdown .dropdown ul {top: 0;left: -90%;visibility: hidden;}
  .navmenu .dropdown .dropdown:hover>ul {opacity: 1;top: 0;left: -100%;visibility: visible;}
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .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;list-style: none;position: absolute;inset: 60px 20px 20px 20px;padding: 10px 0;margin: 0;border-radius: 6px;background-color: var(--nav-mobile-background-color);overflow-y: auto;transition: 0.3s;z-index: 9998;box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);}
  .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;}
  .navmenu .dropdown ul ul {background-color: rgba(33, 37, 41, 0.1);}
  .navmenu .dropdown>.dropdown-active {display: block;background-color: rgba(33, 37, 41, 0.03);}
  .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 {color: var(--default-color);background-color: var(--background-color);font-size: 14px;position: relative;}
.footer .footer-top {padding-top: 50px;}
.footer .footer-about .logo {line-height: 1;margin-bottom: 25px;}
.footer .footer-about .logo img {max-height: 40px;margin-right: 6px;}
.footer .footer-about .logo span {color: var(--heading-color);font-family: var(--heading-font);font-size: 26px;font-weight: 700;letter-spacing: 1px;}
.footer .footer-about p {font-size: 14px;font-family: var(--heading-font);}
.footer .social-links a {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);font-size: 16px;color: color-mix(in srgb, var(--default-color), transparent 20%);margin-right: 10px;transition: 0.3s;}
.footer .social-links a:hover {color: var(--accent-color);border-color: var(--accent-color);}
.footer h4 {font-size: 16px;font-weight: bold;position: relative;padding-bottom: 12px;}
.footer .footer-links {margin-bottom: 30px;}
.footer .footer-links ul {list-style: none;padding: 0;margin: 0;}
.footer .footer-links ul i {padding-right: 2px;font-size: 12px;line-height: 0;}
.footer .footer-links ul li {padding: 10px 0;display: flex;align-items: center;}
.footer .footer-links ul li:first-child {padding-top: 0;}
.footer .footer-links ul a {color: color-mix(in srgb, var(--default-color), transparent 30%);display: inline-block;line-height: 1;}
.footer .footer-links ul a:hover {color: var(--accent-color);}
.footer .footer-contact p {margin-bottom: 5px;}
.footer .copyright {padding: 25px 0;border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}
.footer .copyright p {margin-bottom: 0;}
.footer .credits {margin-top: 8px;font-size: 13px;}
@media screen and (max-width:990px){
  .footer .footer-top .footer-links{display: none;}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {position: fixed;visibility: hidden;opacity: 0;right: 15px;bottom: -15px;z-index: 99999;background-color: var(--accent-color);width: 44px;height: 44px;border-radius: 50px;transition: all 0.4s;}
.scroll-top i {font-size: 24px;color: var(--contrast-color);line-height: 0;}
.scroll-top:hover {background-color: color-mix(in srgb, var(--accent-color), transparent 20%);color: var(--contrast-color);}
.scroll-top.active {visibility: visible;opacity: 1;bottom: 15px;}
/*--------------------------------------------------------------
# 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);padding: 170px 0 80px 0;text-align: center;position: relative;}
.page-title h1 {font-size: 42px;font-weight: 700;margin-bottom: 10px;}
.page-title .breadcrumbs ol {display: flex;flex-wrap: wrap;list-style: none;justify-content: center;padding: 0;margin: 0;font-size: 16px;font-weight: 400;}
.page-title .breadcrumbs ol li+li {padding-left: 10px;}
.page-title .breadcrumbs 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: 90px;overflow: clip;}

@media (max-width: 1199px) {
  section, .section {scroll-margin-top: 66px;}
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {text-align: center;padding-bottom: 60px;position: relative;}
.section-title h2 {font-size: 32px;font-weight: 700;margin-bottom: 20px;padding-bottom: 20px;position: relative;}
.section-title h2:after {content: "";position: absolute;display: block;width: 50px;height: 3px;background: var(--accent-color);left: 0;right: 0;bottom: 0;margin: auto;}
.section-title p {margin-bottom: 0;}