/*
Author: Xpeedstudio
Author URI: http://xpeedstudio.com
*/

/*==========================================
 01.  PREDIFINEED (FROM 1 TO 780 )
 02.  PRELOADER - LINE NO 786
 03.  NAVIGATION - LINE NO 930
 04.  HOME - LINE NO 1150
 05.  THU FEATURE - LINE NO 1280
 06.  THU FLIDE - LINE NO 1355
 07.  THU SERVICE - LINE NO 1385
 08.  PORTFOLIO - LINE NO 1444
 09.  THU SOLUTION - LINE NO 1620
 10.  THU TEAM - LINE NO 1658
 11.  THU CLIENTS FEEDBACK - LINE NO 1730
 12. THU BLOG - LINE NO 1848
 13. THU SUBCRIBS - LINE NO 1935
 14. FOOTER - LINE NO 2020
==========================================*/

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --bg-0: #05070e;
  --bg-1: #070c1a;
  --bg-2: #0b1730;
  --bg-3: #10274a;
  --panel: #0e1a33;
  --panel-2: #0b142b;
  --text: #eaf1f9;
  --muted: #a9b7c9;
  --brand: #18d0ff !important;
  --brand-2: #22c55e;
  --brand-deep: #4f8bff;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(24, 208, 255, 0.35);
  --radius: 16px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-lite: 0 10px 30px rgba(0, 0, 0, 0.18);
  --kpi-bg: var(--panel-2);
  --grey9: #313131;
  --grey7: #3d3d3d;
  --grey6: #646464;
  --grey5: #6b7280;
  --grey4: #9ca3af;
  --grey3: #d1d5db;
  --grey2: #e5e7eb;
  --orange: #fa931e;
}
html,
body {
  background-color: #fff;
  font-size: 16px;
  color: #656565;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  font-family: "Noto Sans Korean", "Roboto", Helvetica, Arial, sans-serif;
  line-height: 1.8em;
  scroll-behavior: smooth;
}
ul li {
  line-height: 2.2em;
}
li:hover {
  color: var(--orange);
  font-weight: 600;
}
ul.navbar-nav li.active a,
nav.ai ul.nav > li.active > a {
  color: #b7ce3b !important;
}
/*------------------------------------------------------------------*/
/*   IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

@media (max-width: 400px) {
  h1 {
    font-size: 3.2em !important;
    margin: auto 10px;
    line-height: 60px !important;
  }
  .navbar-nav {
    padding: 0 !important;
  }
  .navbar-nav li {
    font-weight: 600;
    background-color: black;

    border-bottom: 1px solid #6d6d6d !important;
    padding: 5px 0 5px 20px;
  }
  .navbar-nav li:nth-child(-n + 5) a {
    color: white;
    border: none !important;
  }
  .navbar-nav li.active a {
    color: #b7ce3b !important;
  }
  nav.navbar.bootsnav .navbar-nav > li > a {
    border: none !important;
  }
  .top-menu-hidden div.row div {
    text-align: left !important;
    line-height: 40px;
    padding-left: 30px;
    font-size: 15px !important;
  }
  div.solution {
    width: 50% !important;
  }
  .main-top-fixed-box {
    width: 100% !important;
  }
  .main-top-fixed {
    margin-top: -200px !important;
  }
  .home {
    background-size: cover !important;
    width: 100% !important;
    height: 100vh !important;
    background-position: center !important;
  }
  .home_text {
    margin-top: -100px !important;
  }
  .main3 {
    margin: 20px 0 0 0 !important;
  }
  .uls div.row {
    margin: 0 15px 40px -30px !important;
  }
  .uls div.row div.col-lg-12 {
    padding-right: 0 !important;
    font-size: 14px !important;
  }
  .ab_feature_photo div img {
    height: 100% !important;
  }
  .venture {
    text-align: center !important;
  }
  .bottom div,
  .bottom div img {
    display: block !important;
    margin: 10px 0 !important;
  }
  .bottom div {
    text-align: left !important;
    line-height: 20px !important;
  }
  .main_footer div div.mb30 {
    margin-bottom: 0 !important;
  }
  .bottom div ul li {
    height: 26px !important;
  }
  .py-80 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .top-menu-hidden .row div:not(:last-child) {
    border-bottom: 1px solid #5a5a5a;
  }
  .top-menu-hidden .row div div.main-color2 {
    display: inline !important;
    margin-right: 20px !important;
    padding-left: 0 !important;
  }
  .top-menu-hidden .row div {
    height: 50px !important;
    line-height: 50px !important;
  }
  .head_title .righArrow {
    display: none;
  }
  .head_title h2 span {
    display: block !important;
    text-align: center;
  }
  .head_title h2 div {
    line-height: 30px;
    margin-top: 20px;
  }
  .head_title img:not(.ml-10) {
    width: 100% !important;
  }
  .edu {
    margin-top: 20px;
  }
  div.team_img ul.m-top-100 {
    margin-top: 20px !important;
  }
  .flow div.col-md-2 {
    margin-bottom: 20px !important;
  }
  div.team_img div.row div.col-md-4 img {
    width: 50% !important;
    text-align: center !important;
  }
  .excel img {
    margin-top: 20px !important;
  }
  .mobileImg {
    width: 50% !important;
  }
  .top-search {
    padding: 0 !important;
  }
  .iso ul {
    font-size: 15px !important;
  }
  .moc {
    padding-top: 10px !important;
  }
  .moc ul {
    padding-left: 35px !important;
  }
  .moc ul li {
    font-size: 1em !important;
  }
  .team_img div.text-right {
    text-align: center !important;
  }
  .sd0 div.m-top-80,
  .sd0 div.m-top-120 {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }
  .sd2 div.col-md-6:nth-child(2) {
    margin-top: 40px !important;
  }
  .sd5 {
    padding: 0 !important;
  }
  .sd2 div.col-md-3:nth-child(n + 2),
  .sd2 div.col-md-4:nth-child(n + 2),
  .sd6 div.col-md-3 div.row,
  .sd6 div.col-md-3 p,
  .sd6 div.col-md-4:nth-child(n + 2),
  .cms2 div.col-md-6 div.row ul.ti,
  .cms2 div.col-md-6:nth-child(2),
  .flow div.col-md-4:nth-child(n + 2),
  .summary2 div.col-md-4:nth-child(n + 2) {
    margin-top: 20px !important;
  }
  .head_title p.p-40 {
    padding: 0 !important;
  }
  div.px-80 img {
    width: 60% !important;
  }
  div.px-80 {
    text-align: center !important;
    margin-bottom: 40px !important;
  }
  div.py-40 div.col-md-4:nth-child(2) {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .sd7 img,
  .cmms img {
    width: 100% !important;
  }
  .bounceIn img:last-child {
    margin: 30px 0 0 0 !important;
  }
  .cms div:first-child img {
    text-align: center !important;
    width: 100% !important;
  }
  .cms div:last-child {
    margin-top: 20px !important;
    padding-left: 60px !important;
  }
  .cms2 div.col-md-6 div.row,
  .summary2 div.row {
    height: 100% !important;
  }
  .charm {
    margin-top: 40px !important;
  }
  .ti li:last-child {
    margin-bottom: 20px !important;
  }
  .ras2 {
    margin-top: 20px !important;
  }
  div.mx-auto {
    width: 100% !important;
  }
  div.cmms3 div.col-md-3:nth-child(n + 2) {
    margin-top: 20px !important;
  }
  section#modules div.row div.col-xl-6:nth-child(even) {
    margin-top: 30px !important;
  }
  .kpi-grid div.col-xl-4:nth-child(2),
  .kpi-grid div.col-xl-4:nth-child(3),
  .kpi-grid div.col-xl-4:nth-child(5),
  .kpi-grid div.col-xl-4:nth-child(6) {
    padding-top: 12px !important;
  }
  ul.fixed-nav {
    position: fixed;
    left: 10px !important;
    bottom: 8px; /* scrollup, dropdown 위로 띄우기 */
    list-style: none;
    z-index: 1000;
    text-align: left;
  }
  ul.fixed-nav li {
    display: inline !important;
  }
  .fixed-nav a {
    color: #3d3d3d !important;
    background: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
  }
  .fixed-nav a:hover,
  .fixed-nav a.active {
    color: var(--brand) !important;
    font-weight: bold;
  }
}
.ras li {
  margin-bottom: 20px;
}
.sd6 div.col-md-3 div.row {
  margin-left: 0 !important;
}
.moc {
  padding-top: 100px;
  padding-left: 0;
}
.moc ul {
  list-style: square;
  text-indent: -5px;
  padding-left: 15px;
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src:
    local("Material Icons"),
    local("MaterialIcons-Regular"),
    url(https://example.com/MaterialIcons-Regular.woff2) format("woff2"),
    url(https://example.com/MaterialIcons-Regular.woff) format("woff"),
    url(https://example.com/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga";
}

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/*
    Page Content
------------------------------------------*/
/*
.page-content, 
section { overflow: hidden; }*/

/*
    On Scroll Animations 
------------------------------------------*/

/*.animated { visibility: hidden; }
.visible { visibility: visible; }*/

/*
    Spacing & Alignment 
------------------------------------------*/
nav.navbar.bootsnav ul.nav > li > a {
  font-size: 14px !important;
}
.roomy-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.roomy-80 {
  padding-top: 100px;
  padding-bottom: 80px;
}

.roomy-70 {
  padding-top: 100px;
  padding-bottom: 70px;
}

.roomy-60 {
  padding-top: 100px;
  padding-bottom: 60px;
}

.roomy-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.roomy-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/*text color*/

.text-primary {
  color: #b7ce3b !important;
}

.text-blue {
  color: #337ab7 !important;
  font-weight: 700;
}
.text-blue1 {
  color: #337ab7 !important;
}
.text-orange,
.navbar-nav li.point a {
  color: var(--orange) !important;
}
.bg-orange {
  background-color: var(--orange);
}

.text-finence {
  color: #13a0b2 !important;
}

.text-mega {
  color: #337ab7 !important;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #000 !important;
}

.disabled {
  cursor: not-allowed;
}

/*bacground color*/
.bg-light {
  background-color: #f3f3f3;
}

.bg-finence {
  background-color: #13a0b2;
}

.bg-mega {
  background-color: #e5e5e5;
}

.bg-grey {
  background-color: #f5f5f5;
}

.bg-black {
  background-color: #212121;
}

.bg-white {
  background-color: #fff;
}

.bg-green {
  background-color: #9ed185;
}

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -user-select: none;
  -webkit-user-drag: none;
  -user-drag: none;
}

a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
}

a,
button,
a span {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  cursor: pointer !important;
}

.btn:focus,
.btn:active {
  outline: inherit;
  background-color: transparent;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.clear {
  clear: both;
}

img {
  max-width: 100%;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  outline: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent;
  background-image: none;
}

.form-control {
  border-radius: 0px;
  border: 1px solid #ccc;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
  width: 100%;
  height: auto;
}

.form-control:focus {
  border-color: #bcefeb;
  outline: 0;
  box-shadow:
    inset 0 0px 0px rgba(0, 0, 0, 0.075),
    0 0 0px rgba(102, 175, 233, 0.6);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #303030;
  margin-bottom: 10px;
  font-weight: 600;
}

h1 {
  font-size: 3rem;
  line-height: 4rem;
}

h2 {
  font-size: 2.5rem;
  line-height: 3rem;
}

h3 {
  font-size: 2.1rem;
  line-height: 2.5rem;
}

h4 {
  font-size: 1.6rem;
  line-height: 2.2rem;
}

h5 {
  font-size: 18px;
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

h6 {
  font-size: 1rem;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
p span {
  color: #337ab7;
}

p:last-child {
  margin-bottom: 0px;
}

/*colors*/
.w100 {
  font-weight: 100;
}

.w200 {
  font-weight: 200;
}

.w300 {
  font-weight: 300;
}

.w400 {
  font-weight: 400;
}

.w500 {
  font-weight: 500;
}

.w600 {
  font-weight: 600;
}

.w700 {
  font-weight: 700;
}

.w800 {
  font-weight: 800;
}

/*
Section
*/

.parallax-section {
  max-width: 100%;
  color: #ffffff;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.square {
  list-style: square;
  padding-left: 15px !important;
}

/*all overlay*/
.overlay {
  background-color: rgba(51, 51, 51, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

.left-no-padding {
  padding-left: 0 !important;
}

.right-no-padding {
  padding-right: 0 !important;
}

.fluid-blocks-col {
  padding: 70px 40px 0 80px;
}

.fluid-blocks-col-right {
  padding: 70px 80px 0 40px;
}

/*
Separator
*/
.separator_left {
  width: 85px;
  height: 2px;
  margin: 20px 0px;
  background: #000;
}
.separator_center {
  width: 85px;
  height: 2px;
  margin: 20px auto;
  background: white;
}
.separator_auto {
  width: 85px;
  height: 2px;
  margin: 20px auto;
  background: #000;
}

.separator_small {
  width: 30px;
  height: 2px;
  margin: 20px 0px;
  background: #000;
}
label,
input {
  display: inline !important;
}
/*
Button
*/
.btn {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  /* text-transform: uppercase; */
  font-size: 14px;
  font-weight: 600;
  border-radius: 0;
  /*border:1px solid;*/
}

.btn:hover {
  color: #fff;
  /*border:1px solid;*/
}

.btn-default {
  border: 1px solid white;
  background-color: transparent;
  color: white;
  padding: 0.8rem 2.5rem;
  border-radius: 30px;
}

.btn-default:hover {
  background-color: black;
  border-color: black;
}

.btn-primary {
  color: #fff;
  background-color: #333;
  border: 1px solid;
  border-color: #333;
  padding: 0.8rem 2.5rem;
  border-radius: 30px;
}

.btn-primary:hover {
  background-color: #337ab7;
  border-color: #337ab7;
  color: #fff;
}

/*
socail icon
--------------------------------*/
/*a i.share{
    color:#1E8BC3;
    -webkit-transition: all .6s;
    transition: all .6s;
}*/

/*
Extra height css
*/
.m-0 {
  margin: 0 !important;
}

.m-top-0 {
  margin-top: 0;
}

.m-r-0 {
  margin-right: 0;
}

.m-l-0 {
  margin-left: 0;
}

.m-l-30 {
  margin-left: 30px;
}

.m-l-40 {
  margin-left: 40px;
}

.m-b-0 {
  margin-bottom: 0;
}

.m-r-10 {
  margin-right: 10px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-l-15 {
  margin-left: 15px;
}

.m-top-10 {
  margin-top: 10px;
}

.m-top-20 {
  margin-top: 20px;
}

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

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

.m-top-50 {
  margin-top: 50px;
}

.m-top-60 {
  margin-top: 60px !important;
}

.m-top-70 {
  margin-top: 70px;
}

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

.m-top-90 {
  margin-top: 90px;
}

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

.m-top-110 {
  margin-top: 110px;
}

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

.m-top-150 {
  margin-top: 150px;
}

.m-top-180 {
  margin-top: 180px;
}

.m-t-b-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.m-t-b-120 {
  margin-top: 120px;
  margin-bottom: 120px;
}

.m-bottom-10 {
  margin-top: 10px;
}

.m-bottom-20 {
  margin-bottom: 20px;
}

.m-bottom-30 {
  margin-bottom: 30px;
}

.m-bottom-40 {
  margin-bottom: 40px;
}

.m-bottom-50 {
  margin-bottom: 50px;
}

.m-bottom-60 {
  margin-bottom: 60px;
}

.m-bottom-70 {
  margin-bottom: 70px;
}

.m-bottom-80 {
  margin-bottom: 80px;
}

.m-bottom-90 {
  margin-bottom: 90px;
}

.m-bottom-100 {
  margin-bottom: 100px;
}

.m-bottom-110 {
  margin-bottom: 110px;
}

.m-bottom-120 {
  margin-bottom: 120px;
}

.m_t__b {
  margin: 14rem 0;
}

.p_t__b {
  padding: 6rem 0;
}

.m-100 {
  margin: 100px;
}
.m-80 {
  margin: 80px;
}
.m-50 {
  margin: 50px;
}
.m-30 {
  margin: 30px;
}
.mr-30 {
  margin-right: 30px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
p-0 {
  padding: 0 !important;
}

.p-l-15 {
  padding-left: 15px;
}

.p-r-15 {
  padding-right: 15px;
}
.p-top-10 {
  padding-top: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px-80 {
  padding-left: 80px;
  padding-right: 80px;
}

.p-top-20 {
  padding-top: 1.33rem;
}
.p-20 {
  padding: 20px;
}
.p-10 {
  padding: 10px;
}
.p-bottom-20 {
  padding-bottom: 1.33rem;
}
.pb-10 {
  padding-bottom: 10px;
}
.p-top-30 {
  padding-top: 1.875rem;
}

.p-bottom-30 {
  padding-bottom: 1.875rem;
}

.p-top-40 {
  padding-top: 2.66rem;
}
.p-40 {
  padding: 40px;
}

.p-bottom-40 {
  padding-bottom: 2.66rem;
}

.p-top-60 {
  padding-top: 5rem;
}

.p-bottom-60 {
  padding-bottom: 5rem;
}

.p-top-80 {
  padding-top: 5.714rem;
}

.p-bottom-80 {
  padding-bottom: 5.714rem;
}

.p-top-90 {
  padding-top: 6.429rem;
}

.p-bottom-90 {
  padding-bottom: 6.429rem;
}

.p-top-100 {
  padding-top: 100px;
}

.p-bottom-100 {
  padding-bottom: 100px;
}
.py-100 {
  padding-bottom: 100px;
  padding-top: 100px;
}
.py-80 {
  padding-bottom: 80px;
  padding-top: 80px;
}
.py-60 {
  padding-bottom: 60px;
  padding-top: 60px;
}
.py-50 {
  padding-bottom: 50px;
  padding-top: 50px;
}
.py-40 {
  padding-bottom: 40px;
  padding-top: 40px;
}
.py-30 {
  padding-bottom: 30px;
  padding-top: 30px;
}
.pl-50 {
  padding-left: 50px;
}
.pl-20 {
  padding-left: 20px;
}
.ml-30 {
  margin-left: 30px;
}
.my-100 {
  margin-bottom: 100px;
  margin-top: 100px;
}
.my-80 {
  margin-bottom: 80px;
  margin-top: 80px;
}
.my-60 {
  margin-bottom: 60px;
  margin-top: 60px;
}
.my-50 {
  margin-bottom: 50px;
  margin-top: 50px;
}
.my-40 {
  margin-bottom: 40px !important;
  margin-top: 40px !important;
}
.my-20 {
  margin-bottom: 20px;
  margin-top: 20px;
}
.my-10 {
  margin-bottom: 10px;
  margin-top: 10px;
}
.pr-20 {
  padding-right: 20px;
}
.p-top-110 {
  padding-top: 110px;
}

.p-bottom-110 {
  padding-bottom: 110px;
}

.p-bottom-0 {
  padding-bottom: 0;
}

.p_l_r {
  padding-left: 5.714rem;
  padding-right: 5.714rem;
}

/*border*/
.no-border-top {
  border-top: 0px solid transparent !important;
}

.no-border-rigth {
  border-right: 0px solid transparent !important;
}

textarea::-webkit-input-placeholder,
textarea::-ms-input-placeholder,
textarea::-moz-input-placeholder {
  padding: 5px;
}

/*for image bg*/
/*.img-bg{
  background: url(../images/home-msg.jpg) no-repeat center top fixed;
  background-size
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  overflow: hidden;
}*/

.transform_scal_rotate:hover img {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

.culmn {
  width: 100%;
  overflow: hidden;
}

/*heading title all area*/
.head_title {
  overflow: hidden;
}

.head_title h2 {
  font-weight: 900;
  font-size: 1.6em;
}

.head_title p {
  font-size: 1em;
}
.inner-box h4 a {
  color: #337ab7;
  font-weight: 600;
}
.inner-box h4 a:hover {
  color: #b7ce3b;
}
/*End off pridifain css*/

/*Preloader css*/
#loading {
  background-color: #337ab7;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  z-index: 90;
}

#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}

#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50px;
  width: 150px;
  margin-top: -25px;
  margin-left: -75px;
}

.object {
  width: 8px;
  height: 50px;
  margin-right: 5px;
  background-color: #fff;
  -webkit-animation: animate 1s infinite;
  animation: animate 1s infinite;
  float: left;
}

.object:last-child {
  margin-right: 0px;
}

.object:nth-child(10) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.object:nth-child(9) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.object:nth-child(8) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.object:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.object:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.object:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.object:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.object:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.object:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

@-webkit-keyframes animate {
  50% {
    -ms-transform: translateX(-25px) scaleY(0.5);
    -webkit-transform: translateX(-25px) scaleY(0.5);
    transform: translateX(-25px) scaleY(0.5);
  }
}

@keyframes animate {
  50% {
    -ms-transform: translateX(-25px) scaleY(0.5);
    -webkit-transform: translateX(-25px) scaleY(0.5);
    transform: translateX(-25px) scaleY(0.5);
  }
}

/*End off Preloader*/

/*
Nav Menu style
==================*/

.navbar-brand {
  height: 80px;
  padding-top: 20px;
}

.navbar-nav > li > a {
  padding-top: 30px;
  padding-bottom: 30px;
}

.attr-nav > ul > li > a {
  padding: 30px 15px;
}

.btn-cart {
  background-color: #337ab7;
  padding: 2px 10px;
  color: #fff !important;
  border: 0px solid;
  display: inline-block;
}

.btn-cart:hover {
  border: 0px solid;
  background-color: #ff7854 !important;
}

/*All Banner style*/
.service-banner,
.model-banner,
.contact-banner,
.about-banner,
.blog-banner,
.home {
  background-size: cover;
  position: relative;
}

.home {
  background: url(../images/background/homepage-bg.png) no-repeat top center;
}

.service-banner {
  background: url(../images/background/services-bg.jpg) no-repeat bottom center;
}

.model-banner {
  background: url(../images/background/model-bg.jpg) no-repeat bottom center;
}

.contact-banner {
  background: url(../images/background/contact-bg2.jpg) no-repeat top center;
}

.about-banner {
  background: url(../images/background/about-bg.png) no-repeat bottom center;
}

.blog-banner {
  background: url(../images/background/blog-bg.jpg) no-repeat bottom center;
}

.monoarch-banner {
  background: url(../images/background/monoarch-bg.png) no-repeat bottom center;
}

.ras-banner {
  background: url(../images/background/ras-bg.png) no-repeat bottom center;
}

/*
Home Section style
==================*/

.main_home {
  overflow: hidden;
  padding-top: 300px;
  padding-bottom: 230px;
  position: relative;
  z-index: 1;
}

.home_text h1 {
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 4.286rem;
  font-weight: 600;
  line-height: 6.5rem;
}

.home_text h5 {
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  width: 70%;
  margin: 0px auto;
  line-height: 2rem;
}

/*
About section style
====================*/

.feature_photo {
  position: relative;
}

.feature_img img {
  width: 100%;
}

.photo_border {
  width: 95%;
  height: 78%;
  position: absolute;
  left: 8%;
  top: 15%;
  border: 10px solid #c9c9c9;
}

.counter_item h2 {
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 60px;
}

.counter_item .separator_small {
  margin: 20px auto;
}

/*Work Section
=====================================*/
.work_item {
  position: relative;
  top: -40px;
}

.work_item_img img {
  width: 100%;
}

.work_item_details {
  position: relative;
}

.work_separator1:before {
  content: "";
  position: absolute;
  right: -50%;
  top: 43%;
  width: 120px;
  height: 1px;
  background-color: #337ab7;
  z-index: 1;
}

.work_separator2:before {
  content: "";
  position: absolute;
  left: -50%;
  top: 43%;
  width: 120px;
  height: 1px;
  background-color: #337ab7;
  z-index: 1;
}

/*========================================================================
                gallery Section Style
==========================================================================*/
.gallery {
  overflow: hidden;
}

/* ---- button ---- */

.main-gallery .button {
  display: inline-block;
  margin: 0rem 0.25rem;
  margin-bottom: 10px;
  background: transparent;
  border: none;
  border-radius: 0px;
  color: #000;
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  border-bottom: 1px dotted #333;
  font-weight: 400;
}

.main-gallery .button:focus,
.main-gallery .button:active:focus,
.main-gallery .button.active:focus,
.main-gallery .button.focus,
.main-gallery .button:active.focus,
.main-gallery .button.active.focus {
  outline: 0;
  outline-offset: 0;
}

.main-gallery .button:hover {
  color: #337ab7;
}

.main-gallery .button:active,
.main-gallery .button.is-checked {
  color: #337ab7;
}

.main-gallery .button.is-checked {
  color: #337ab7;
  border-bottom: 1px dotted transparent;
}

/* ---- isotope ---- */

.main-gallery .grid {
  margin: 0;
  padding: 0;
}

/* clear fix */

.main-gallery .grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.main-gallery .grid-item {
  position: relative;
  margin: 5px;
  width: 372px;
  overflow: hidden;
}

.main-gallery .grid-item img {
  width: 100%;
  height: 100%;
  transition: all 0.6s;
}

.main-gallery .grid-item:hover img {
  transform: scale(1.1);
}

.main-gallery .grid-item:hover .grid_hover_area {
  opacity: 1;
}

.main-gallery .grid_hover_area {
  background-color: rgba(7, 8, 10, 0.5);
  height: 100%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0%;
  left: 0%;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
}

.main-gallery .grid_hover_area .btn {
  padding: 0.5rem 1rem;
}

.main-gallery .grid_hover_text a {
  display: block;
}

/*
service section style
========================*/

.service_items {
  margin-top: 40px;
  margin-bottom: 40px;
}

.service_items .hexagon i,
.service_items .hexagon span {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #b7ce3b;
  margin: 0;
  line-height: 50px;
  font-size: 1.6rem;
  color: #fff;
  border-radius: 50%;
}
.service_items .hexagon i:hover,
.service_items .hexagon span:hover {
  background-color: white;
  color: #b7ce3b;
  border: 1px solid #b7ce3b;
}
.service_items .hexagon2 i,
.service_items .hexagon2 span {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #337ab7;
  margin: 0;
  line-height: 50px;
  font-size: 1.6rem;
  color: #fff;
  border-radius: 50%;
}
.service_items .hexagon2 span:hover,
.service_items .hexagon2 i:hover {
  background-color: white;
  color: #337ab7;
  border: 1px solid #337ab7;
}
.service_items .about-content {
  width: 100%;
  /* position: absolute; */
  z-index: 22;
  line-height: 3.2rem;
  text-align: center;
}

.service_items .about-content span.icon {
  font-size: 1.5rem;
  color: #fff;
}

.service_right_text h4,
.service_left_text h4 {
  font-weight: 400;
  font-size: 16px;
}
.service_left_text h4:hover,
.service_rigjt_text h4:hover {
  color: #000;
}
.service_right_text p,
.service_left_text p {
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.service_right_text {
  padding-right: 0 !important;
}
h4.hover:hover,
div.hover:hover {
  color: #000 !important;
}

/*
Testimonial Section style
=======================*/
.testimonial {
  position: relative;
}

.main_testimonial {
  position: relative;
  z-index: 1;
}

.main_testimonial .testimonial_item h6 {
  font-size: 16px;
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-bottom: 10px;
}

.main_testimonial .testimonial_item p {
  font-size: 14px;
  width: 80%;
  margin: 20px auto;
}

.main_testimonial .carousel-control {
  width: 45px;
  height: 45px;
  line-height: 42px;
  text-align: center;
  color: #999;
  cursor: pointer;
  position: relative;
  background-image: none;
  display: inline-block;
  font-size: 14px;
}

.main_testimonial .carousel-control.left,
.main_testimonial .carousel-control.right {
  box-shadow: 0px 0px 0px;
  opacity: 1;
}

.main_testimonial .slash {
  font-size: 2rem;
  color: #ddd;
  height: 45px;
  bottom: -5px;
  display: inline-block;
  position: relative;
}

.test_authour img {
  margin: 0px auto;
}

/*
Brand Section style
=====================*/
.main_cbrand {
  overflow: hidden;
  width: 100%;
}

.cbrand_item {
  height: 100px;
  overflow: hidden;
}

.cbrand_item img {
  width: 50%;
  opacity: 0.7;
  transition: all 0.6s;
}

.cbrand_item img:hover {
  opacity: 1;
}

.cbrand_item img.img_apple {
  width: 25%;
  padding: 10px;
}

/*
Models Section style
=====================*/
.model_img {
  position: relative;
  overflow: hidden;
}

.model_img:hover .model_caption {
  bottom: 0;
}

.model_img img {
  width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.model_img:hover img {
  width: 100%;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.model_caption {
  background-color: #333;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -60px;
  transition: all 0.6s;
}

.model_caption h5 {
  padding: 15px;
}

.meet_team {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.meet_team a {
  padding: 120px 0px;
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  color: #000;
}

/*
Contact Section style
=====================*/
.main_contact {
  overflow: hidden;
}

.widget_socail ul li a i {
  background-color: #434343;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}

.widget_socail ul li a:hover i {
  background-color: #337ab7;
}

/*
Footer Section style
=====================*/

.main_footer {
  overflow: hidden;
  max-width: 1140px;
}

.main_footer i {
  padding: 0px 5px;
  color: #ff0000;
}

.main_footer p a {
  padding: 5px;
}

.main_footer p a,
.main_footer li a {
  color: #000;
}

/* scrollup + solution shortcut pill button */

.scrollup,
.dropdown-shortcut {
  width: 60px;
  position: fixed;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid #9a9a9a;
  color: #8f8f8f;
  cursor: pointer;
  z-index: 1000;
  transition:
    border-color 0.3s,
    color 0.3s,
    opacity 0.5s;
}

.scrollup:hover,
.dropdown-shortcut:hover {
  border-color: #337ab7;
  color: #337ab7;
  background: transparent;
}

.scrollup {
  height: 60px;
  bottom: 80px;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  opacity: 0.6;
}

.scrollup:hover {
  opacity: 1;
}

.scrollup a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.scrollup i {
  font-size: 18px;
  color: inherit;
  position: static;
  margin: 0 0 4px;
}

.scrollup::after {
  content: "TOP";
  position: static;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: inherit;
}

.dropdown-shortcut {
  height: 60px;
  bottom: 24px;
  border-radius: 0 0 10px 10px;
  gap: 6px;
}

.dropdown-shortcut i {
  font-size: 22px;
  color: inherit;
  position: static;
  top: auto;
  left: auto;
  text-decoration: none;
}

.dropdown-shortcut::after {
  content: "문의";
  position: static;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: inherit;
}

.downpdf {
  font-size: 16px;
  margin: 7px;
}

.fixed-nav {
  position: fixed;
  right: 30px;
  bottom: 200px; /* scrollup, dropdown 위로 띄우기 */
  list-style: none;
  z-index: 1000;
  text-align: right;
}
.fixed-nav a {
  font-size: 14px;
  color: #337ab7;
}
.fixed-nav a:hover,
.fixed-nav a.active {
  color: white;
}

/*
==================================================
            About Us Page
==================================================
*/

/*About home
============================*/
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: transparent;
  border-radius: 0px;
}

.breadcrumb li a {
  font-size: 16px;
  color: #fff;
}

/*About Feature section
===============================*/
.sv_feature_item img,
.ab_feature_item img {
  width: 100%;
  height: 124px;
}

/*Teams Feature section
===============================*/
.team_img:hover img,
.team_img5:hover img {
  transform: scale(1.1);
}

.team_img img {
  width: 100%;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}
.team_img5 img {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

/* .team_img2:hover img {
  transform: scale(1.1);
} */

.team_img2 img {
  width: 100%;
  height: 150px;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

.team_img3 img {
  width: 100%;
  height: 250px !important;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

.team_caption {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  font-weight: 300;
  line-height: 26px;
  font-size: 14px !important;
}
.team_caption2 {
  text-align: center;
  font-weight: 300;
  line-height: 26px;
}
.team_caption2 h5 {
  font-weight: 600;
  margin-top: 30px;
}
.caption1 {
  width: 100%;
  position: relative;
  bottom: 26px;
}
.caption2 {
  width: 95.5%;
  position: relative;
  left: 8px;
  bottom: 8px;
  padding: 5px;
  line-height: 20px;
}
.caption4 {
  font-size: 16px;
  color: #337ab7;
  position: relative;
  top: -30px;
}
.caption3 b {
  font-weight: 600;
  color: #b7ce3b;
}
ul.circle {
  list-style-type: square !important;
  line-height: 40px;
}
ul.circle2 {
  margin-top: 10px;
  list-style-type: square !important;
  line-height: 20px;
  text-align: left;
}
.caption3 {
  width: 95.5%;
  position: relative;
  left: 8px;
  bottom: 8px;
  padding: 5px;
  line-height: 20px;
  color: #fff;
}
/*
==================================================
            Service Page
==================================================
*/

.sv_service_item h4 i {
  margin-right: 20px;
}

/*Pricing Table*/
.pricing_item {
  border: 1px solid #ddd;
  padding: 30px;
}

.pricing_item h3 span {
  font-size: 50px;
  font-weight: 700;
  color: #000;
}

.pricing_item h3 sup {
  font-size: 45px;
  font-weight: 700;
}

.pricing_head p {
  letter-spacing: 4px;
  font-weight: 700;
  color: #000;
}

.pricing_item li,
.pricing_item p {
  font-size: 14px;
}

.pricing_item li {
  font-size: 14px;
  line-height: 2rem;
}

/*
==================================================
           Contact Us Page
==================================================
*/

.action_item i {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #f3f3f3;
  color: #000;
  font-size: 2rem;
  border: 1px solid #ddd;
  border-radius: 50%;
}

/*our Maps*/
.ourmap {
  height: 550px;
  width: 100%;
}

/*
==================================================
           Our Model Page
==================================================
*/

.main-model .model-item {
  width: 270px;
  margin: 10px;
  position: relative;
}

.main-model .model-item .btn-default {
  position: absolute;
  left: 50%;
  top: 35%;
  margin-left: -80px;
  color: #fff;
  border-color: #fff;
  opacity: 0;
}

.main-model .model-item:hover .btn-default {
  opacity: 1;
}

/*
==================================================
          Model Details Page
==================================================
*/

/* Skill bar*/

.teamskillbar {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  background: #e1e1e1;
  height: 4px;
  -webkit-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  transition-property: width, background-color;
}

.teamskillbar h6 {
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
}

.teamskillbar h6.one {
  width: 63%;
}

.teamskillbar h6.two {
  width: 75%;
}

.teamskillbar h6.three {
  width: 88%;
}

.teamskillbar h6.foure {
  width: 76%;
}

.teamskillbar-bar {
  height: 2px;
  width: 0px;
  background: #000000;
  position: absolute;
  left: 1px;
  top: 1px;
}

/*========================================================
        Blog Page
==========================================================*/

.blog_fashion_img img {
  width: 100%;
}

.blog_fashion_content {
  padding: 10px 0px;
  background-color: #fff;
  width: 90%;
  position: relative;
  top: -80px;
}

.blog_item .breadcrumb,
.blog_fashion_content .breadcrumb {
  padding: 8px 0px;
  margin-bottom: 0px;
}

.fashion_test {
  background-color: #f3f3f3;
  padding: 40px 20px 55px 20px;
}

.fashion_test img.img-circle {
  width: 125px;
  height: 125px;
  margin: 0px auto;
}

.fashion_praspect {
  -webkit-perspective: 12500px;
  perspective: 1200px;
}

.fashion_praspect_inner {
  padding: 30px 40px 50px 20px;
  transition: 0.3s;
  transform: rotateY(25deg);
}

/*Blog section*/
.blog_area {
  width: 100%;
}

.blog_item .breadcrumb li a {
  font-size: 14px;
  color: #666666;
}

.blog_item h5 {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

/*
======================================================
Blog Details Page
======================================================
*/
.blog_details_head .blog_date {
  float: left;
  width: 50px;
  margin-right: 20px;
}

.blog_details_head .blog_date span {
  background-color: #337ab7;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 35px;
  display: inline-block;
  margin-top: 1px;
  padding: 7px;
}

.blog_details_head .head_text {
  display: inline-block;
}

.socail_share ul li a {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  line-height: 30px;
  text-align: center;
  color: #000;
  display: inline-block;
}

.socail_share ul li a:hover {
  color: #fff;
  background-color: #337ab7;
}

/*command*/

.blog_comments_img img {
  width: 80px;
  height: 80px;
}

.comments_top_tex h5 {
  font-size: 16px;
  font-weight: 700;
}

.comments_top_tex a {
  color: #999;
}

.comments_top_tex a i {
  color: #000;
  margin-right: 5px;
}

/*Live chate*/

.live_chate textarea.form-control {
  height: auto;
}

/*Said Baarea*/

.said_socail h6,
.said_arc h6,
.said_post h6,
.said_ctg h6 {
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.said_arc ul li,
.said_ctg ul li {
  line-height: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.said_arc ul li a,
.said_ctg ul li a {
  color: #999;
  font-family:
    "Noto Sans Korean", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.said_post .post_item {
  width: 100%;
  display: block;
  overflow: hidden;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.said_post .post_item .item_img {
  width: 20%;
  margin-right: 5%;
  display: inline-block;
}

.said_post .post_item .item_text {
  display: inline-block;
  width: 70%;
}

.socail_item {
  float: left;
  width: 30.5%;
  margin: 5px;
}

.socail_item img {
  width: 100%;
}

.top-menu-hidden {
  width: 100%;
  float: left;
}
.top-menu-hidden .row > .col-md-2 {
  text-align: center;
  font-size: 14px;
  color: #fff;
}
@media (min-width: 992px) {
  .top-menu-hidden .row > .col-md-2 {
    float: left;
    width: 20%;
  }
}

.psm12-ul .psm12-li {
  margin: 10px;
  margin-left: 20px;
  padding: 5px;
  padding-left: 10px;
  border: 1px solid #dadada;
  width: 200px;
  border-radius: 5px;
  border-top: 2px solid #337ab7;
}
.psm12-ul .psm12-li-child {
  margin: 10px;
  margin-left: 50px;
  padding: 5px;
  padding-left: 10px;
  border: 1px solid #dadada;
  width: 200px;
  border-radius: 5px;
  border-top: 2px solid #fd7e14;
}

.padding-top-20 {
  padding-top: 50px;
}
.padding-top-50 {
  padding-top: 50px;
}
.padding-top-60 {
  padding-top: 60px;
}
.padding-top-70 {
  padding-top: 70px;
}
.padding-top-80 {
  padding-top: 80px;
}
.padding-top-90 {
  padding-top: 90px;
}
.padding-top-100 {
  padding-top: 100px;
}
.padding-top-110 {
  padding-top: 110px;
}
.padding-top-120 {
  padding-top: 120px;
}
.padding-top-150 {
  padding-top: 150px;
}

.main-top-fixed {
  text-align: center;
  position: relative;
  display: block !important;
}

.main-top-fixed-box {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 5px 10px 20px 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  cursor: pointer;
}

.main-top-fixed-box .title {
  color: #337ab7;
  font-size: 16px;
  font-weight: 600;
  /* text-transform: uppercase; */
}
.main-top-fixed-box .description {
  color: #555;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 20px;
  margin: 0;
}

.footer-wrapper {
  position: relative;
  padding-top: 25px;
  padding-bottom: 15px;
  padding-left: 30px;
}
.footer-content-venture {
  background-color: #fff;
  position: absolute;
  right: 0px;
  bottom: 50%;
  border-radius: 10px;
  visibility: visible;
  animation-name: bounceIn;
}
.footer-content-venture img {
  padding: 20px;
  width: 200px;
}
.size-120 {
  width: 60px;
  margin-bottom: 40px;
}
.tech-title {
  font-size: 1.3em;
  font-weight: 600;
  padding: 6px;
  color: #337ab7;
  padding-bottom: 20px;
  padding-top: 30px;
}
.ab_feature_photo {
  background-color: #e4e4e4;
}
.fw300 {
  font-weight: 300 !important;
}
.fw400 {
  font-weight: 400 !important;
}
.fw500 {
  font-weight: 500 !important;
}
.fw600 {
  font-weight: 600 !important;
}
.fw900 {
  font-weight: 900 !important;
}
.border {
  border: 1px solid #d0d0d0;
}
.border-top {
  border-top: 1px solid #e4e4e4;
}
.border-bottom {
  border-bottom: 1px solid #e4e4e4;
}
.border-right {
  border-right: 1px solid #d0d0d0;
}
.border-left {
  border-left: 1px solid #d0d0d0;
}
.separator {
  margin: 0 10px;
  color: #d0d0d0;
}
.separator_w {
  margin: 0 10px;
  color: white;
  font-weight: 300 !important;
}
.separator_b {
  margin: 0 10px;
  color: #bfbfbf;
  font-weight: 300 !important;
}
.footer {
  line-height: 24px;
  font-size: 14px;
}
.footer a {
  color: #797979;
}
.mb30 {
  margin-bottom: 30px;
}
.mb10 {
  margin-bottom: 10px;
}
.list-inline li a i {
  color: black;
  font-size: 20px;
}
.list-inline li a img {
  width: 26px;
  position: relative;
  top: -3px;
}
.main-color {
  color: #337ab7 !important;
}
.main-color2 {
  color: #b7ce3b !important;
  text-transform: none !important;
}
.subList {
  list-style-type: square !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding-left: 30px !important;
}
.subList2 {
  list-style-type: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-left: 20px !important;
  padding-left: 20px !important;
  border-left: 3px solid #e1e1e1;
}
.secondary {
  color: #474747 !important;
}
.dropdown-menu {
  border: 1px solid #a9a9a9 !important;
  width: 240px !important;
}
.dropdown-menu li,
.dropdown-menu li a {
  border: none !important;
}
.price {
  color: #337ab7 !important;
  font-weight: 600 !important;
}
.dropdown-menu li a i {
  position: relative;
  top: 5px;
}
.dropdown-menu li {
  position: relative;
  top: -5px;
}
.top-menu-hidden div div a {
  color: white;
}
.top-menu-hidden div div a:hover {
  color: #337ab7;
}
.menu-title div div.title {
  background-color: white;
  color: #393939;
  border: 1px solid #dddddd;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  margin-bottom: 10px;
}
.menu-title3 div div.title {
  background-color: white;
  color: #393939;
  border: 1px solid #dddddd;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 5px;
  margin-bottom: 10px;
}
.menu-title2 div.col-md-4 div.inner {
  /* background-color: #f2f2f2; */
  color: #393939;
  border: 1px solid #dddddd;
  padding: 20px !important;
  font-size: 14px;
  font-weight: 400;
  border-radius: 5px;
  div.content {
    line-height: 1.6em !important;
  }
  div.title {
    color: var(--orange) !important;
    font-size: 1.5em !important;
    font-weight: 700;
    margin-bottom: 10px !important;
  }
}
.menu-title2 div.col-md-4 div.inner:hover,
.menu-title2 div.col-md-4 div.inner.active {
  background: #f2f2f2;
}
.inner-g {
  border: 1px solid #dddddd;
  padding: 16px !important;
  border-radius: 5px;
  background: #f6f6f6;
}
.menu-title div div.content ul,
ul.circle3 {
  line-height: 40px;
  text-indent: -20px;
  position: relative;
  left: 25px;
}
.bg-grey2 {
  background-color: #eeeeee;
}
.bg-dark {
  background-color: #484848;
}
.shms-detail div div ul {
  line-height: 30px;
}
.shms-title li,
.shms-title2 li,
.shms-title3 li,
.shms-title4 li,
.shms-title5 li {
  font-size: 18px;
  font-weight: 600;
  color: #a2a2a2;
  line-height: 40px;
}
.p40 {
  padding: 40px;
}
.caption {
  margin-top: 30px;
  font-size: 16px;
  color: #337ab7;
}

.shms-title2 {
  margin-bottom: 170px;
}
.shms-title5 {
  margin-bottom: 90px;
}
.shms-title3,
.shms-title4 {
  margin-bottom: 210px;
}
.flow div div.row div.col-md-10,
.last,
.flow div div.capsule2,
.last2,
.last3,
div.capsule2 {
  border: 1px solid #c3c3c3;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
  padding: 0 !important;
  color: #337ab7;
}
.last2:hover {
  background-color: orange;
  color: #000;
}
.flow i {
  color: #b8b8b8;
  position: relative;
  top: 15px;
}
i.up {
  color: #b8b8b8;
  position: relative;
  top: 0px;
  font-size: 20px;
  margin-top: 5px;
}
.col-xs-4 {
  padding: 10px !important;
}
.psm12-ul li {
  font-weight: 600;
}
div.headTxt {
  font-size: 16px !important;
  line-height: 36px;
}
.ab_feature_photo div img {
  width: 100% !important;
  height: 128px;
  border: 1px solid grey !important;
}
.ab_feature_item {
  padding: 0 10px !important;
}

.arrow6 {
  clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 0 100%) !important;
}
.arrow66 {
  background-color: #d3e2f1;
  color: #337ab7;
  font-weight: 600;
  height: 36px;
  line-height: 36px;
}
.arrow7 {
  background-color: #d3e2f1;
  color: #337ab7;
  font-weight: 600;
  height: 36px;
  line-height: 36px;
}
.capsule {
  padding: 15px;
}
.capsule div {
  padding: 5px;
}
.capsule div p,
.capsule3 {
  padding: 10px !important;
  border-radius: 10px;
  border: 1px solid #c1c1c1 !important;
  color: #337ab7;
  font-weight: 600;
}
.capsule div p:hover,
.last:hover,
.capsule2:hover,
.capsule3:hover,
.last3:hover {
  background-color: #d3e2f1 !important;
}

.fs16 {
  font-size: 16px !important;
}
.righArrow {
  font-size: 14px;
  position: relative;
  top: -5px;
}
.mx-auto {
  margin: 0 auto !important;
}
.px-auto {
  padding: 0 auto !important;
}
.topbtn {
  border: 1px solid white !important;
  border-radius: 10px;
  color: white !important;
  font-size: 14px !important;
  padding: 0 10px !important;
  text-transform: none !important;
}
.topbtn-orange {
  border: 1px solid var(--orange) !important;
  color: var(--orange) !important;
  font-size: 16px !important;
  padding: 3px 10px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  line-height: 24px !important;
}
.topbtn:hover {
  background-color: #000000;
}
.footerBtn {
  border: 1px solid #717171;
  padding: 8px 14px;
  font-size: 12px;
  color: #000 !important;
}
.footerBtn i {
  color: #000;
}
.footerBtn:hover {
  background-color: #000;
  color: white !important;
}
.footerBtn:hover i {
  color: white !important;
}
.sd div.col-md-2,
.sd div.col-md-4 {
  height: 60px;
  line-height: 60px;
}
.sd div.col-md-2 {
  background-color: #d3e2f1;
  border-bottom: 3px solid white;
  color: #337ab7;
  font-weight: 600;
}
.sd div.col-md-2:hover {
  background-color: #4b4b4b;
  color: white;
}
.effect {
  line-height: 34px !important;
  color: black;
}
.sd2 div.col-md-4 div,
.sd2 div div {
  background-color: #337ab7;
  padding: 10px 0 6px 20px;
  font-weight: 600;
  color: white;
}
.sd2 div.col-md-4 p,
.sd2 div ul,
.sd2 div.col-md-3 p {
  padding: 17px 20px;
  border: 3px solid #337ab7;
}
.sd2 div ul {
  padding-left: 30px;
}
.sd2 div.col-md-4 div i,
.sd2 div div i {
  margin-right: 10px;
}
/* .sd3 div.col-md-4 div.arrow6 {
  height: 42px;
  line-height: 42px;
} */
.sd3 div.col-md-4 ul {
  list-style: square;
  padding-left: 20px;
}
.sd2 div ul {
  list-style: square;
}
.orange {
  color: orange;
  font-weight: 600;
}
.law div.col-md-6 h5,
.menu {
  background-color: #565656;
  color: white;
  text-align: center;
  font-weight: 600;
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 40px;
}
.law div.col-md-6 ol li {
  font-weight: 600;
  color: #337ab7;
  line-height: 38px;
}
.law div.col-md-6 ol li:hover {
  color: #000;
}
.sd4 div ul li,
.sd4 div p {
  font-size: 15px;
}
.sd4 ul {
  text-indent: -5px;
}
.team_caption:hover {
  color: #d0ff00;
}
.tracking div p {
  border: 1px solid #337ab7;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-weight: 600;
}
.charm {
  background-color: #e8e8e8;
  padding: 30px;
}
.summary div div.text-center {
  background-color: #424242;
  color: white;
  height: 40px;
  line-height: 40px;
}
.summary div div.row {
  background-color: #e7e7e7;
  padding: 25px 10px;
  margin: 0 !important;
}
.summary2 div div.row {
  background-color: #e7e7e7;
  padding: 20px;
  margin: 0 !important;
}
.head_title h2:hover {
  color: #337ab7;
}
.bounceIn img:hover {
  transform: scale(1.1);
  transition: all 0.6s;
}
.cmms div {
  height: 100% !important;
  line-height: 1.8em !important;
  padding: 15px !important;
}
.chbox label {
  margin-right: 20px;
}
.contact div {
  margin-top: 20px !important;
}
/* swiper  */
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.more {
  font-size: 14px !important;
  margin-left: 20px !important;
  font-weight: 400 !important;
  border: 1px solid black !important;
  color: black;
  padding: 6px 12px !important;
}
.more:hover {
  background-color: black;
  color: white !important;
}

.loadinglayer {
  position: fixed;
  left: 0px;
  top: 0px;
  display: none;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.6;
  position: relative;
}
.loadinglayer.loadshow {
  display: block;
}

.loading-text {
  top: 50%;
  left: 50%;
  position: absolute;
  width: 400px;
  height: 50px;
  color: white;
  margin: -200px 0 0 -200px;
  font-weight: 700;
  font-size: 1.2em;
}
ul.dropdown-menu a {
  cursor: pointer !important;
}
.navbar {
  line-height: 10px !important;
  font-size: 10px !important;
  z-index: 999 !important;
}
.disaster div img {
  border: 1px solid grey !important;
}

/* Hero */
body.darkblue {
  background: #fff;
}
div#popup {
  background:
    radial-gradient(
      950px 520px at 50% -15%,
      rgba(24, 208, 255, 0.25),
      transparent 70%
    ),
    radial-gradient(
      700px 360px at 50% 105%,
      rgba(34, 197, 94, 0.18),
      transparent 70%
    ),
    linear-gradient(180deg, var(--bg-0), var(--bg-2) 60%);
}
.hero {
  position: relative;
  text-align: center;
  padding: 140px 20px 120px;
  background:
    radial-gradient(
      950px 520px at 50% -15%,
      rgba(24, 208, 255, 0.25),
      transparent 70%
    ),
    radial-gradient(
      700px 360px at 50% 105%,
      rgba(34, 197, 94, 0.18),
      transparent 70%
    ),
    linear-gradient(180deg, var(--bg-0), var(--bg-2) 60%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    conic-gradient(
      from 210deg at 50% 0%,
      transparent,
      rgba(24, 208, 255, 0.06),
      transparent 30%
    ),
    conic-gradient(
      from 150deg at 50% 0%,
      transparent,
      rgba(79, 139, 255, 0.08),
      transparent 28%
    );
  opacity: 0.8;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
#heroParticles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.hero-orb-wrap {
  width: 380px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  animation: orbFloat 6s ease-in-out infinite;
}
.hero-orb {
  width: 100%;
  border-radius: 18px;
  filter: drop-shadow(0 0 28px rgba(24, 208, 255, 0.5))
    drop-shadow(0 0 12px rgba(24, 208, 255, 0.5));
}

/* Hologram Ring Rotation (360° AI ring) */
.orb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1.5px solid rgba(24, 208, 255, 0.55);
  box-shadow:
    0 0 18px rgba(24, 208, 255, 0.65),
    inset 0 0 22px rgba(24, 208, 255, 0.35);
  background: conic-gradient(
    from 0deg,
    rgba(24, 208, 255, 0) 0deg,
    rgba(24, 208, 255, 0.9) 35deg,
    rgba(34, 197, 94, 0.9) 90deg,
    rgba(24, 208, 255, 0) 140deg,
    rgba(79, 139, 255, 0.9) 210deg,
    rgba(24, 208, 255, 0) 260deg,
    rgba(24, 208, 255, 0.9) 320deg,
    rgba(24, 208, 255, 0) 360deg
  );
  mask: radial-gradient(
    circle,
    transparent 58%,
    #000 60%,
    #000 66%,
    transparent 68%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 58%,
    #000 60%,
    #000 66%,
    transparent 68%
  );
  animation: ringSpin 8s linear infinite;
  opacity: 0.95;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(24, 208, 255, 0.9));
}
.orb-ring--back {
  width: 92%;
  height: 92%;
  border-color: rgba(79, 139, 255, 0.45);
  background: conic-gradient(
    from 180deg,
    rgba(79, 139, 255, 0) 0deg,
    rgba(79, 139, 255, 0.9) 60deg,
    rgba(24, 208, 255, 0) 120deg,
    rgba(34, 197, 94, 0.9) 180deg,
    rgba(79, 139, 255, 0) 240deg,
    rgba(79, 139, 255, 0.9) 300deg,
    rgba(79, 139, 255, 0) 360deg
  );
  mask: radial-gradient(
    circle,
    transparent 56%,
    #000 58%,
    #000 63%,
    transparent 65%
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 56%,
    #000 58%,
    #000 63%,
    transparent 65%
  );
  animation: ringSpinReverse 12s linear infinite;
  opacity: 0.7;
  filter: drop-shadow(0 0 8px rgba(79, 139, 255, 0.8));
}
@keyframes ringSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes ringSpinReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes orbFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Orb light sweep / hologram scan */
.hero-orb-wrap {
  position: relative;
}
.hero-orb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(24, 208, 255, 0.55) 50%,
    transparent 100%
  );
  opacity: 0;
  animation: sweep 4s ease-in-out infinite;
  mix-blend-mode: screen;
  border-radius: 18px;
  pointer-events: none;
}
.hero-orb-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0px,
    rgba(255, 255, 255, 0.02) 2px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.35;
  animation: scan 2.8s linear infinite;
  mix-blend-mode: screen;
  border-radius: 18px;
  pointer-events: none;
}
@keyframes sweep {
  0% {
    transform: translateX(-180%);
    opacity: 0;
  }
  20% {
    opacity: 0.75;
  }
  40% {
    transform: translateX(180%);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateX(180%);
    opacity: 0;
  }
}
@keyframes scan {
  0% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(8%);
  }
}

.badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* text-transform: uppercase; */
  background: rgba(24, 208, 255, 0.12);
  border: 1px solid var(--line-strong);
  color: #c8f6ff;
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  12% {
    opacity: 1;
    transform: translate(34px, -12px) scale(1.45);
  }
  26% {
    opacity: 0.2;
    transform: translate(70px, 6px) scale(1);
  }
  38% {
    opacity: 0;
    transform: translate(120px, 10px) scale(0.6);
  }
  18% {
    opacity: 1;
    transform: translate(28px, -8px) scale(1.15);
  }
  36% {
    opacity: 0;
    transform: translate(84px, 4px) scale(0.6);
  }
  100% {
    opacity: 0;
  }
}

.hero h1 {
  font-size: clamp(24px, 3.8vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 12px 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #18d0ff, #4f8bff, #22c55e, #18d0ff);
  background-size: 300%;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 8px 32px rgba(24, 208, 255, 0.25);
}
.hero-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 2em;
}
.hero-sub {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(13px, 2vw, 18px);
  position: relative;
  z-index: 1;
}
.hero-sub .hl {
  color: var(--brand);
  font-weight: 700;
}
.usp {
  margin-top: 14px;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.cta-row {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 1;
  position: relative;
}
.cta {
  background: var(--brand);
  color: #001018;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(24, 208, 255, 0.35);
  transition: 0.2s ease;
}
.cta.secondary {
  color: var(--brand) !important;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  font-weight: 700;
}
.cta:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}
section.ai {
  max-width: 1170px;
  margin: 0 auto;
  padding: 64px 20px;
  scroll-margin-top: 92px;
}
p.sub {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 22px;
}
.brand {
  color: var(--brand);
}
.pill {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(79, 139, 255, 0.12);
  border: 1px solid rgba(79, 139, 255, 0.35);
  color: #dbe9ff;
  margin-right: 10px;
  margin-top: 10px;
}
div.float-3d {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
div.float-3d > div > img,
div.float-3d > div > div > img {
  animation: float3d 5s ease-in-out infinite;
  width: 20%;
}
@keyframes float3d {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Modules */
/* .modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } */
.module-card {
  background: #fff;
  color: #0b1226;
  border-radius: 15px;
  padding: 22px;
  box-shadow: var(--shadow-lite);
  /* border:1px solid rgba(0,0,0,.06); */
  overflow: hidden;
  position: relative;
  transition: 0.2s ease;
  transform: translateZ(0);
}
.module-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.18);
}
.module-card:hover img.main-3d {
  transform: scale(1.02);
}
.module-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 900;
  margin: 4px 0 8px;
  line-height: 1.25;
  color: #4a4a4a;
}
.tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0ea5e9;
  background: #e0f2fe;
  padding: 4px 8px;
  border-radius: 999px;
}
.flow {
  font-size: 13px;
  color: #334155;
  margin-top: 16px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
}
.bullets {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.bullets li {
  margin: 6px 0;
  font-size: 14px;
  color: #545454;
}
.bullets li:hover {
  color: var(--brand);
}
.module-card img.main-3d {
  width: 95%;
  max-height: 360px;
  object-fit: contain;
  /* background:#f8fafc;
  border-radius:12px; border:1px solid rgba(0,0,0,.06); */
  padding: 20px 10px;
  transition: 0.2s ease;
}
.module-card i.material-icons {
  margin-right: 10px;
  position: relative;
  top: 4px;
  font-size: 20px;
}
.capture-placeholder {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed rgba(2, 6, 23, 0.25);
  background: #f9fafb;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Plans */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.plan-card {
  background: #fff;
  color: #0b1226;
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-lite);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}
.plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #0ea5e9;
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
}
.plan-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--grey7);
}
.plan-sub {
  font-size: 13px;
  color: #475569;
  font-weight: 700;
  margin-bottom: 10px;
}
.plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plan-list li {
  margin: 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  gap: 8px;
}
.plan-foot {
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
  background: #f1f5f9;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.4em;
}

/* KPI */
/* .kpi-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 14px; } */
.kpi-tab {
  padding: 2px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s ease;
  margin: 0 8px 14px 0;
}
.kpi-tab.active {
  background: rgba(24, 208, 255, 0.18);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(24, 208, 255, 0.25);
}
/* .kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } */
.kpi-grid div.col-xl-4 {
  padding: 0 6px !important;
}
.kpi {
  background:
    linear-gradient(
      180deg,
      rgba(24, 208, 255, 0.1),
      rgba(2, 6, 23, 0.2) 45%,
      rgba(2, 6, 23, 0.6)
    ),
    var(--panel);
  /* background:var(--kpi-bg);
  border:1px solid var(--line);  */
  border: 1px solid rgba(24, 208, 255, 0.35);
  box-shadow:
    0 12px 35px rgba(2, 6, 23, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--brand),
    var(--brand-deep),
    var(--brand-2)
  );
  opacity: 0.9;
}
.kpi::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(24, 208, 255, 0.25),
    transparent 65%
  );
}
.kpi-head {
  font-weight: 700;
  font-size: 14px;
  color: #a5f3fc;
  letter-spacing: 0.02em;
}
.kpi-metric {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.kpi-number {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 6px 20px rgba(24, 208, 255, 0.25);
  color: #cfe8ff;
}
.kpi-unit {
  font-size: 14px;
  font-weight: 900;
  color: #cfe8ff;
  margin-bottom: 4px;
}
.kpi-body {
  margin-top: 8px;
  font-size: 14px;
  color: #e2e8f0;
}
.kpi-body > b {
  color: var(--brand);
}
.kpi-note {
  margin-top: 6px;
  font-size: 12px;
  color: #93a4b8;
}

/* Future slider */
.future-wrap {
  position: relative;
  background: rgba(8, 14, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 14px 14px;
  box-shadow: var(--shadow);
}
.future-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}
.future-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.future-card {
  min-width: 320px;
  flex: 0 0 auto;
  background: #fff;
  color: #0b1226;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-lite);
  border: 1px solid rgba(0, 0, 0, 0.06);
  scroll-snap-align: start;
  position: relative;
}
.future-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #0ea5e9;
  background: #e0f2fe;
  padding: 2px 14px;
  border-radius: 999px;
}
.future-h3 {
  margin: 8px 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.future-desc {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey4);
  line-height: 1.55;
}
.future-desc b {
  font-size: 14px;
}
.future-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px;
}
.future-hero .mini {
  font-size: 12px;
  font-weight: 700;
  color: var(--grey5);
  line-height: 1.4;
}
.future-points {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey6);
}
.future-points li {
  margin: 5px 0;
}

.future-nav {
  position: absolute;
  top: 48%;
  transform: translateY(-49%);
  font-size: 36px;
  color: rgba(5, 8, 20, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
.future-prev {
  left: 22px;
}
.future-next {
  right: 12px;
}
.future-nav:hover {
  transform: translateY(-50%) scale(1.05);
}

.future-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: 0.15s ease;
}
.dot.active {
  width: 20px;
  background: var(--brand);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(24, 208, 255, 0.35);
}

.roi-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: white;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  padding: 5px 8px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.18);
}
div.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.aisuite1 div {
  padding: 0 5px !important;
}
.aisuite1 > div > img {
  width: 80% !important;
}
.aisuite1 > div > p {
  font-size: 0.7em;
  line-height: 1em;
  margin-top: 10px !important;
}
.my-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
}
.my-swiper .swiper-pagination-bullet-active {
  background: rgba(59, 199, 244, 1);
}
.bar {
  opacity: 0.5 !important;
  margin: 0 8px !important;
}
#popup {
  max-height: 88vh; /* 화면 높이의 80% */
  overflow-y: auto; /* 세로 스크롤 */
  overflow-x: hidden; /* 가로 스크롤 방지 */
  border: 1px solid #ccc;
}
.cursor-pointer {
  cursor: pointer !important;
}
ul.greeting li {
  margin-bottom: 10px !important;
  font-weight: 400 !important;
}
.head-title-orange {
  h2 {
    border-left: 5px solid var(--orange) !important;
    font-weight: 700 !important;
    font-size: 1.4em !important;
    line-height: 1.4em !important;
    margin: 0 !important;
    padding-left: 15px !important;
  }
  b {
    border-left: 5px solid var(--orange) !important;
    padding-left: 15px !important;
    line-height: 1.2em !important;
    font-size: 1.2em !important;
  }
}
.text-bold {
  font-weight: 700 !important;
}
.cmms tr {
  td:nth-child(1) {
    text-align: center !important;
    i {
      color: var(--orange) !important;
      font-size: 1.5em !important;
      line-height: 2em !important;
    }
  }
  td:nth-child(2) {
    font-weight: 700 !important;
  }
  td:nth-child(3) {
    font-weight: 400 !important;
  }
}
.cmms2 th,
.cmms2 td,
.cmms3 th,
.cmms3 td {
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 0.88em;
  padding: 10px !important;
}
.cmms2 tbody tr td:nth-child(2),
.cmms2 tbody tr td:nth-child(3) {
  border: 1px solid var(--orange);
}
.cmms-navy tbody tr td:nth-child(2),
.cmms-navy tbody tr td:nth-child(3) {
  border: 1px solid #254b83;
}
.cmms2 thead tr th:nth-child(2) {
  border-right: 1px solid white !important;
}
.strategy1,
.strategy2,
.strategy3 {
  border-top: 1px solid #dadada !important;
}
.text-right {
  text-align: right !important;
}
.cmms3 td,
.cmms3 th {
  padding: 5px 10px !important;
}
.cmms3 th {
  position: relative;
}
.cmms3 th .step-arrow {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 38px !important; /* 머티리얼 아이콘 크기 조절 */
  opacity: 0.8;
}
.cmmsList li {
  line-height: 1.4em !important;
}
.cmmsList2 li {
  line-height: 2em !important;
  font-size: 14px !important;
  text-align: left !important;
}
.bolder {
  font-weight: 700 !important;
}
.border-orange {
  border: 1px solid var(--orange) !important;
  border-radius: 10px !important;
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.box-orange {
  border: 1px solid var(--orange);
  border-radius: 8px !important;
  line-height: 1.4em !important;
  cursor: pointer;
  div.col-md-10 {
    font-size: 14px !important;
    padding: 12px 20px !important;
    font-weight: 400 !important;
  }
  div.col-md-2 {
    line-height: 100px !important;
    i {
      font-size: 36px !important;
    }
  }
}
.box-orange:hover {
  background: #f3f3f3 !important;
}
.bg-navy {
  background: #254b83 !important;
}
.text-navy {
  color: #254b83 !important;
}


/* v7 Product tab/readability normalization */
.tab,
button[data-target],
[role="tab"],
.fac-law-tab,
.ecq-tab{
  font-size:12px !important;
  border-width:1.5px !important;
}


/* v13 CMS media containment */
.icms-hero-grid,
.icms-deck-grid,
.fac-panel-grid,
.ecq-reg-panel{
  min-width:0 !important;
}
.icms-hero-grid > *,
.icms-deck-grid > *,
.fac-panel-grid > *,
.ecq-reg-panel > *{
  min-width:0 !important;
  max-width:100% !important;
}
.icms-hero-image,
.fac-screen,
.icms-deck-card-dark{
  overflow:hidden !important;
}
.icms-hero-image img,
.fac-screen img,
.icms-deck-card-dark img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}