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

  Template Name: Go.arch 
  Description: Go.arch  - Architecture HTML Template
  Author: Murren
  Author URI: http://themeforest.net/user/murren20
  Version: 1.0
  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Content styles

  2.  Header 

      2.1 Brand
      2.2 Vertical Panel
      2.3 Navbar Desctop
      2.4 Navbar Desctop Affix
      2.5 Navbar Mobile
      2.6 Navbar Mobile Affix
      

  3.  Main

      3.1 Slider

  4.  About

      4.1 Services
      4.1 Object map

  5.  Projects

      5.1 Project Carousel
      5.2 Magnific popup
      5.3 Project Details

  6.  Experience
  7.  Clients
  8   Blog

      8.1 Blog Details
      8.2 Widgets
      8.3 Widget Recent Post

  9.  Contacts  
  10. Footer
  11. Responsive styles

      11.1 Min width: 768px
      11.2 Min width 992px
      11.3 Min width 1200px 
      11.4 Max height 480px

    
    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/



/* 1.1 General */





html{
  font-size: 75%;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
  max-width: 100%;
}

body{
  font-family: 'montserratlight', 'Noto Sans KR', sans-serif;
  font-size: 1em;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  background-color: #272727;
  overflow-x: hidden;
  max-width: 100%;
}

::-webkit-scrollbar{
  display: none;
}

::selection{
  background-color:#155fa0;
  color:#fff;
}

-webkit-::selection{
    background-color:#155fa0;
    color:#fff;
}

::-moz-selection{
    background-color:#155fa0;
    color:#fff;
}



/* 1.2 Typography */



@font-face {
  font-family: 'montserratlight';
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'montserratsemibold';
  src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
  font-weight: normal;
  font-style: normal;

}

h1,
.h1{ 
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 8vmin;
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h2,
.h2{ 
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 2.1875em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

h3,
.h3{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  font-size: 1.875em;
  line-height: 1.1;
  font-weight: normal;
  color:#fff;
}

h4,
.h4{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  font-size: 1.125em;
  line-height: 1.35;
  font-weight: normal;
  color:#fff;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a{
  color:inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover{
  text-decoration: none;
}

p{
  margin-bottom: 1.6em;
}

b, strong{
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
}

ul{
  list-style: none;
  padding-left: 0;
}

a {
  color:#155fa0;
  -webkit-transition: color .3s ease-out;
       -o-transition: color .3s ease-out;
          transition: color .3s ease-out;
}

a:hover,
a:focus {
  color:#155fa0;
  outline: none;
}

a:focus{
  text-decoration: none;
}



/* 1.3 Fields */



.form-control,
textarea.form-control{
  font-size: 1em;
  height: 3.625em;
  border-radius: 0.75em;
  padding-left: 22px;
  color: #fff;
  background-color: #323232;
  border:1px solid #323232;
  -webkit-box-shadow:none;
          box-shadow:none;
      -webkit-appearance: none;
  -webkit-transition: all .15s;
       -o-transition: all .15s;
          transition: all .15s;
}

textarea.form-control{
  height: 7.9em;
  padding-top:1.1em;
  resize:none;
}

.form-control:focus{
  border-color:#155fa0;
  outline: 0;
  -webkit-box-shadow:none;
          box-shadow:none;
}

.form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #fff;
}

.form-control::-webkit-input-placeholder {
  color: #fff;
}

.form-control.error{
  border-color:#155fa0;
}

.form-group{
  margin-bottom: 10px;
}

.wobble-error{
  -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
           animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
}

label.error{
  display: none!important;
}



/* 1.4 Buttons */



.btn{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  position: relative;
  display: inline-block;
  border:2px solid #155fa0;
  border-radius: 4px;
  padding:1.1em 2.2em 1.05em;
  font-size: 0.875em;
  color:#fff;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #5a5a5a;
  -webkit-transition: all .3s ease-out!important;
          transition: all .3s ease-out!important;
}

.btn:hover,
.btn:focus{
  color: #fff;
  background-color: #155fa0;
  border-color: #155fa0;
  -webkit-box-shadow:none;
  box-shadow: none;
  outline: none!important;
}

.btn .icon-next{
  position: relative;
  top:-0.1em;
  margin-left: 0.6em;
  vertical-align: middle;
}

.btn-gray{
  background-color: #5a5a5a;
  border-color: #5a5a5a;
  color: #fff;
}

.btn-gray:hover{
  background-color: #155fa0;
  border-color: #155fa0;
  color: #fff;
}

.btn-shadow-1{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}

.btn-shadow-2{
  box-shadow:0 15px 34px rgba(0,0,0,0.18);
}



/* 1.5 Icons */



.icon-next{
  display: inline-block;
  width:0.94em;
  height: 0.75em;
  background:url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size:0.94em 0.75em;
}



/* 1.6 Loader */



.loader{
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#272727;
  color:#fff;
  text-align: center;
}

.loader-brand{
  position: absolute;
  left:0;
  width: 100%;
  top:50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #155fa0;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}



/* 1.7 Content styles */



.layout{
  position: relative;
  overflow: hidden;
}

.text-primary{
  color:#155fa0;
}

.page-lines{
  position: absolute;
  z-index: -1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.page-lines .col-line{
  padding: 0;
}

.page-lines .line{
  position: absolute;
  left: 0;
  width: 1px;
  height: 50000px;
  background-color:rgba(255,255,255,0.08);
}

.page-lines .col-line:last-child .line:last-child{
  left: auto;
  right: 0;
}

.row-base{
  margin-top: -3em;
}

.col-base{
  margin-top: 3em;
}

.section{
  position: relative;
  margin-top: 7.1em;
  margin-bottom: 7.1em;
}

.section-header{
  position: relative;
}

.section-title{
  text-align: center;
  margin:0;
  margin-left: 0.32em;
}

.section-subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  text-align: center;
  max-width: 560px;
  margin: 1.2em auto 0;
}

.about .section-title{
  font-size: 4.375em;
  font-weight: 600;
}

.about .section-subtitle{
  margin-top: 80px;
  font-size: 25.5px;
}

.contacts .section-title{
  font-weight: 700;
}

.fade-title-left,
.fade-title-right{
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 10.8em;
  line-height: 1;
  color: #fff;
  position: absolute;
  left: 0;
  top:0.03em;
  opacity: 0.03;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fade-title-right{
  left:100%;
}

.section-content{
  margin-top: 7.1em;
}



/*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/



/* 2.0 Sticky Header */



.sticky-header{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  z-index: 30;
  background-color: rgba(39,39,39,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.35s ease;
          transition: transform 0.35s ease;
}

.sticky-header.is-visible{
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.sticky-header .container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
}

.sticky-brand{
  display: inline-block;
}

.sticky-brand img{
  height: 32px;
  width: auto;
  vertical-align: middle;
}

.sticky-header-right{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sticky-phone{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 0.9em;
  letter-spacing: 0.15em;
  color: #fff;
  margin-right: 2.6em;
  white-space: nowrap;
}

.sticky-nav ul{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}

.sticky-nav li{
  margin-left: 2.2em;
}

.sticky-nav a{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 0.9em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-nav li.active > a,
.sticky-nav a:hover{
  color: #155fa0;
}

@media (min-width: 992px){
  .sticky-header{
    display: block;
  }
}



.header-inner .vertical-panel-content{
  bottom:auto;
  top:12.2vmin;
}



/* 2.1 Brand */



.brand-panel{
  position: absolute;
  z-index: 4;
  left: 0;
  top:0;
  width: 39.47vmin;
  height: 40.7vmin;
  padding: 4.8vmin 2em 4.8vmin;
  background-color: #2b2b2b;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.brand{
  display: inline-block;
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size:4vmin;
  line-height: 1;
  color: #fff;
}

.brand:hover,
.brand:focus{
  color: #fff;
  text-decoration: none;
}

.header-inner .product-nav-panel{
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: 24px;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.9em;
}

.product-nav-arrow{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 1em;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.product-nav-arrow:hover,
.product-nav-arrow:focus{
  background-color: #155fa0;
  border-color: #155fa0;
  color: #fff;
  text-decoration: none;
}

.product-nav-list{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 0.55em 1.3em;
  white-space: nowrap;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.product-nav-list:hover,
.product-nav-list:focus{
  background-color: #155fa0;
  border-color: #155fa0;
  color: #fff;
  text-decoration: none;
}

.brand img{
  height: 1em;
  width: auto;
  vertical-align: middle;
}

.brand-name{
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  right:-0.38em;
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 8.75em;
  line-height: 1;
  opacity: 0.04;
  color: #fff;
}

.slide-number{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  margin-top: 8vmin;
}

.slide-number .current-number{
  font-size: 8vmin;
  letter-spacing: 0.1em;
  line-height: 1;
}

.slide-number sup{
  display: inline-block;
  position: relative;
  top:-3px;
  font-size: 2vmin;
  letter-spacing: 0.1em;
  color: #5e5e5e;
  vertical-align: top;
  margin-left: 0.46em;
}

.slide-number sup .delimiter{
  display: inline-block;
  margin-right: 0.4em;
}

.header-phone{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 300;
  font-size: 0.81em;
  letter-spacing: 0.32em;
  position: absolute;
  z-index: 3;
  color: #fff;
  left: 50vmin;
  top:5.9vmin;
}

 @media (max-width: 480px){
  .header-phone{
    display: none;
  }
 }

  @media (min-width: 992px) and (max-width: 1200px){
  .header-phone{
    display: none;
  }
 }



/* 2.2 Vertical Panel */



.vertical-panel,
.vertical-panel-content{
  position: absolute;
  width: 19.735vmin;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.vertical-panel{
  z-index: 3;
  height: 10000px;
  background-color: #2b2b2b;
}

.vertical-panel-content{
  z-index: 4;
  pointer-events: none;
}

.vertical-panel-info{
  margin-bottom: 3.5vmin;
}

.vertical-panel-info .line{
  height: 5vmin;
  width: 1px;
  margin:15px auto 0;
  background-color:#646464;
}

.vertical-panel-title{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: #fff;
  position: relative;
  left: -6px;
  margin:0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@media (max-height: 850px){
  .vertical-panel-title{
    display: none;
  }
}

.header-inner{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100px;
  padding: 0 20px;
  background-color: rgba(39,39,39,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner .vertical-panel,
.header-inner .vertical-panel-content{
  display: none;
}

.header-inner .brand-panel{
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: auto;
  max-width: 300px;
  height: auto;
  max-height: 150px;
  padding: 0;
  background-color: transparent;
}

.header-inner .brand-panel .brand img{
  max-height: 44px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1025px){
  .header-inner .header-phone{
    display: block !important;
    position: static !important;
    margin-left: 24px;
    margin-right: auto;
    white-space: nowrap;
  }

  .header-inner .navbar-desctop{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .header-inner .navbar-desctop .container{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 100% !important;
    padding-right: 20px !important;
  }

  .header-inner .navbar-desctop-menu{
    float: none !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 !important;
  }

  .header-inner .navbar-desctop-menu > li{
    float: none !important;
  }

}

@media (max-width: 1024px){
  .header-home{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100px;
    padding: 0 20px;
    background-color: rgba(39,39,39,0.97);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .header-home .vertical-panel,
  .header-home .vertical-panel-content{
    display: none;
  }

  .header-home .brand-panel{
    position: static;
    z-index: auto;
    width: auto;
    max-width: 300px;
    height: auto;
    max-height: 150px;
    padding: 0;
    background-color: transparent;
  }

  .header-home .brand-panel .brand img{
    max-height: 44px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .header-home .brand-panel .slide-number{
    display: none;
  }


  .header-phone{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
            transform: translate(-50%, -50%) !important;
    z-index: auto;
    display: block;
    white-space: nowrap;
    letter-spacing: 0.05em;
  }

  .navbar-desctop{
    display: none !important;
  }

  .navbar-mobile{
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    padding: 0 !important;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  .navbar-mobile .brand{
    display: none;
  }

  .navbar-collapse{
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 49;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    margin: 0;
  }

  .navbar-collapse.collapse{
    display: none !important;
  }

  .navbar-collapse.collapse.in{
    display: block !important;
  }

  .arrow-left,
  .arrow-right{
    top: auto !important;
    bottom: 20px !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
  }

  .arrow-left{
    left: 20px !important;
  }

  .arrow-right{
    right: 20px !important;
  }

  #rev_slider .rev-slidebg{
    -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
  }

  #rev_slider .tp-caption{
    text-align: right !important;
    width: 90% !important;
    max-width: 480px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #rev_slider .slide-title{
    width: 94% !important;
    max-width: 640px !important;
    font-size: clamp(18px, 5.8vw, 34px) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  #rev_slider .btn{
    margin-top: 50px !important;
    font-size: 1.75em !important;
  }

  .navbar-toggle{
    display: block !important;
    position: relative !important;
    z-index: 60 !important;
  }
}

@media (max-width: 480px){
  .header-phone{
    display: none !important;
  }

  .mobile-nav-phone{
    display: block !important;
  }
}

@media (min-width: 481px){
  .mobile-nav-phone{
    display: none;
  }
}

.social-list{
  margin-bottom: 3.5vmin;
}

.social-list li{
  margin-top: 3.8vmin;
}

.social-list .fa{
  font-size: 2.4vmin;
  color: #606060;
}

.social-list .fa:hover{
  color:#155fa0;
  text-decoration: none;
}



/* 2.3 Navbar Desctop */



.navbar-desctop{
  display: none;
  position: absolute;
  z-index: 2;
  top:0;
  left:0;
  width: 100%;
  padding:5.9vmin 0 0;
}

.navbar-desctop .container{
  width: 100%;
  max-width: 100%;
  padding-right: 3vw;
}

.navbar-desctop .brand{
  display: none;
  position: relative;
  top:-0.22em;
  font-size: 1.6em;
}

.navbar-desctop-menu{
  float: right;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 1.215em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.navbar-desctop-menu li{
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.navbar-desctop-menu li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.navbar-desctop-menu li a:hover,
.navbar-desctop-menu .active > a{
  color:  #155fa0;
}

.navbar-desctop-menu  > li{
  float: left;
  margin-left: 1.95em;
}

.navbar-desctop-menu > li > a{
  color: #fff;
  background-color: transparent;
  margin-bottom: 1.5em;
}

.navbar-desctop-menu li ul{
  position: absolute;
  z-index: 10;
  left: 100%;
  top:60%;
  visibility: hidden;
  min-width: 200px;
  opacity: 0;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  background:rgba(50, 50, 50, 0.95);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.navbar-desctop-menu > li > ul{
  left: -20px;
  margin-top: 0;
}

.navbar-desctop-menu li:hover > ul{
  top:0;
  visibility: visible;
  opacity: 1;
}

.navbar-desctop-menu > li:hover > ul{
  top:100%;
}

.navbar-desctop-menu li li{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-desctop-menu li li:last-child{
  border-bottom: 0;
}

.navbar-desctop-menu li li a{
  color: #fff;
  padding: 12px 20px 10px;
}





/* 2.5 Navbar Mobile */



.navbar-mobile{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100%;
  padding:6vmin 0;
}

.navbar-mobile .brand{
  display: none;
  margin-left: 15px;
  font-size: 1.6em;
}

.navbar-collapse{
  border:0;
  background-color: rgba(50, 50, 50, 0.95);
  -webkit-box-shadow:none;
  box-shadow:none;
}

@media (max-height: 320px ){
  .navbar-collapse{
    max-height: 240px;
  }
}

.navbar-toggle{
  padding: 0;
  margin-top:0;
  margin-bottom: 0;
  border-radius: 0;
  border:0;
}

.navbar-toggle .icon-bar{
  background-color:#fff;
  height: 2px;
  width: 30px; 
}

.navbar-toggle .icon-bar + .icon-bar{
  margin-top:5px;
}

.navbar-toggle.collapsed .icon-bar{
  background-color: #fff;
}

.navbar-nav-mobile{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 1.8em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 1.2em;
  margin-bottom: 0;
}

.navbar-nav-mobile li{
  position: relative;
  border-top:1px solid rgba(255,255,255,0.1);
}

.navbar-nav-mobile li a{
  display: block;
  padding: 1em 1em;
  color: #fff;
  text-decoration: none;
}

.navbar-nav-mobile > .current > a{
  color: #155fa0;
}

.navbar-nav-mobile li a .fa-angle-down{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav-mobile > .current > a .fa-angle-down{
  top:-0.2em;
  left:-0.3em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navbar-nav-mobile > .active > a,
.navbar-nav-mobile > .active > a:hover{
  background-color: #155fa0;
  color: #fff;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.navbar-nav-mobile ul{
  display: none;
}

.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li .active > a{
  color: #155fa0;
}






/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/



.main{
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.main-inner{
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 33.7vmin 0 33.7vmin;
}


.main-inner .page-lines{
  z-index: 1;
}

.main-inner:after{
  content:'';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top:0;
  background: -webkit-linear-gradient(bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.main-projects,
.main-contacts{
  padding: 34.2vmin 0 34vmin;
}

.main-project{
  padding: 33.7vmin 0 11vmin;
  background-size: cover;
  background-position: center 0;
}

.main-header{
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: right;
  padding-left: 38.5vmin;
}

.main-header h1{
  color: #fff;
  margin:0;
  margin-right: -0.32em;
}

.bg-about .main-header{
  text-align: center;
  padding-left: 0;
  margin-top: -30px;
}

.bg-projects .main-header h1{
  font-weight: 700;
}

.main-header-logo{
  height: clamp(36px, 6.5vw, 90px);
  width: auto;
}

.main-header-subtitle{
  color: #ffffff;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 2.2em;
  font-weight: 400;
  line-height: 1.7;
  margin: 80px 0 0;
}



/* 3.1 Slider */



.rev_slider{
  color: #fff;
  min-height: 420px;
}

.rev_slider .btn{
  -webkit-transition: background-color .3s ease-out!important;
          transition: background-color .3s ease-out!important;
}

.tp-caption{
  padding: 0 20px;
  text-align: right;
}

.arrow-left,
.arrow-right{
  position: absolute;
  z-index: 4;
  bottom: 4vh;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.arrow-left{
  left: 22vmin;
}

.arrow-right{
  right: 15px;
}

.arrow-left:after,
.arrow-right:before{
  content:'';
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

.arrow-left:after{
  content:'Prev';
}

.arrow-right:before{
  content:'Next';
}

.arrow-left:before,
.arrow-right:after{
  content:'';
  display: inline-block;
  vertical-align: middle;
  width:1.3em;
  height: 1em;
  opacity: 0.25;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.arrow-left:hover:before,
.arrow-right:hover:after{
  opacity: 1;
}

.arrow-left:before{
  background: url(../img/img-icon/prev.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-right: 0.82em;
}

.arrow-right:after{
  background: url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-left: 0.72em;
}

.rev-slidebg{
  -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
}

.slide-title{
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif !important;
  font-size: clamp(40px, 3.4vw, 66px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.slide-subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif !important;
  font-size: clamp(15px, 1.05vw, 21px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  margin-top: 28px;
}

/* Hero slide layers: mobile-only layout fix (does not affect tablet/desktop) */
@media (max-width: 767px){
  /*
   * The title's mask-wrap is sized to the pre-shift layout by Revolution
   * Slider's reveal-mask animation, so pushing the title up with margin
   * alone clips its top line against that wrap. Relaxing overflow on
   * just this wrap keeps the shift safe; the slide's own overflow:hidden
   * (an ancestor further up) still contains everything within the banner.
   */
  #rev_slider .tp-mask-wrap:has(.slide-title){
    overflow: visible !important;
  }

  #rev_slider .slide-title{
    margin-top: -42px !important;
    width: 82vw !important;
    min-width: 82vw !important;
    max-width: 340px !important;
    font-size: 19px !important;
  }

  /*
   * .slide-subtitle has no data-width in the markup, so Revolution Slider
   * never assigns it a min/max-width like it does for .slide-title
   * (which resolves to ~56% of the viewport on phones via its own
   * data-width="[...,'550']" responsive scaling). Without an explicit
   * width the caption falls back to shrink-to-fit, and combined with the
   * inline white-space:nowrap Revolution Slider sets per data-whitespace,
   * long copy (slide 3) renders as one unbreakable line wider than the
   * viewport and gets clipped by the slider's overflow:hidden wrappers.
   * We reproduce the same ~56vw box so the two captions share a right
   * edge, and swap nowrap for wrapping so it never needs to overflow.
   */
  #rev_slider .slide-subtitle{
    width: 88vw !important;
    min-width: 88vw !important;
    max-width: 400px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-align: right !important;
  }
}

/*
 * Slide 2 (DUAL WAVE SMART) carries its own data-voffset tier
 * ('-70' vs. '-50' on slides 1 and 3) for the 768-1199px range, so
 * Revolution Slider sits its title ~24-30px higher than the other two
 * slides here natively — nothing to do with the mobile block above.
 * Nudge it back down to match slides 1 and 3 in that range only.
 */
@media (min-width: 768px) and (max-width: 1199px){
  #rev_slider ul li:nth-child(2) .slide-title{
    margin-top: 58px !important;
  }
}




/* ------------------------------------------------------------------------------- */
/*  4. About
/* ------------------------------------------------------------------------------- */



.bg-about{
  background: url(../img/bg/about.webp) 50% 0 no-repeat;
  background-size: cover;
}

.about .fade-title-left{
  top:1em;
}

.col-about-title{
  margin-top: 0;
  margin-bottom:1.1em; 
}

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

.col-about-img{
  position: relative;
}

.col-about-img img{
  display: block;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}



/* 4.1 Services */



.row-services{
  margin-left: -4.1em;
  margin-right: -4.1em;
}

.col-service{
  padding: 0 4.1em;
}

.service-item{
  margin-bottom:2em; 
}

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

.service-item h4{
  margin-top: 0.8em;
  margin-bottom: 1.1em;
}

.services .service-item h4{
  margin-top: 1.25em;
}

.services .section-header{
  margin-bottom: 80px;
}

.services .section-title{
  font-size: 4.921875em;
  font-weight: 700;
  margin-left: 0;
  text-align: center;
}

.services .section-title .text-primary{
  margin-left: 50px;
}

@media (max-width: 768px){
  .services .section-title{
    font-size: clamp(24px, 8vw, 50px) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  .services .section-title .text-primary{
    margin-left: 0.3em;
    display: inline-block;
  }

  .services .service-item h4{
    font-size: clamp(18px, 5.5vw, 32px) !important;
  }
}

.services .service-item h4{
  font-size: 2.53125em;
}

.services .service-item p{
  font-size: 1.73077em;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}

.services .service-item:hover p{
  color: #fff;
}

.service-item p:last-child{
  margin-bottom: 0;
}


/* 4.2 Object Map */



.representative{
  padding: 100px 0;
}

.representative-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.representative-info{
  padding-top: 2em;
}

@media (min-width: 992px){
  .representative-info{
    padding-right: 45px;          /* 15px gutter + 30px extra breathing room before the photo */
  }
}

.representative-name{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0.3em 0 1.6em;
}

.representative-block{
  margin-bottom: 2.2em;
}

.representative-block h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.9em;
}

.representative-block p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.95em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);   /* bold at 0.75 opacity reads muddy, so lift it slightly */
  line-height: 1.9;
  margin: 0 0 0.4em;
}

.representative-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.representative-list li{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.95em;
  color: rgba(255,255,255,0.75);
  line-height: 1.9;
}

.representative-photo{
  position: relative;
}

.representative-photo img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.representative-photo-caption{
  position: absolute;
  left: 1.4em;
  bottom: 1.2em;
  padding: 0.5em 1em;
  background-color: rgba(17,18,20,0.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 4px;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
}

.representative-signature{
  margin-top: 1.6em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

@media (max-width: 991px){
  .representative-photo{
    margin-top: 3em;
  }
}



/* Blog promo carousel */

.section-blog{
  background-color: #111214;
  padding: 100px 0;
}

.section-blog .head{
  text-align: center;
}

.section-blog .title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  color: #fff;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-blog .title-icon{
  height: 0.9em;
  width: auto;
}

.section-blog .title-badge{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.15em;
  padding: 0.4em 0.9em 0.35em;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

.section-blog .title-badge-en{
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
}

.section-blog .title-badge-kr{
  font-size: 1em;
  font-weight: 800;
  color: #fff;
}

.section-blog .subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  margin: 50px 0 0;
}

.section-blog .btn-all{
  display: inline-block;
  margin-top: 28px;
  padding: 0.75em 1.6em;
  border: 2px solid #155fa0;
  border-radius: 4px;
  background-color: #5a5a5a;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.section-blog .btn-all:hover{
  background-color: #155fa0;
  border-color: #155fa0;
  color: #fff;
  text-decoration: none;
}

.blog-carousel{
  position: relative;
  margin-top: 60px;
}

.blog-pagination{
  position: static;
  margin-top: 28px;
  text-align: center;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
}

.blog-pagination .swiper-pagination-current{
  color: #2b5fac;
  font-weight: 700;
}

.blog-swiper{
  overflow: hidden;
  padding: 0 2%;
}

.blog-swiper .swiper-slide{
  opacity: 0.35;
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.blog-swiper .swiper-slide-active{
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.blog-swiper .swiper-slide img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.blog-swiper-prev,
.blog-swiper-next{
  position: absolute;
  top: 50%;
  z-index: 5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.blog-swiper-prev:hover,
.blog-swiper-next:hover{
  background-color: #2b5fac;
}

.blog-swiper-prev{
  left: 2%;
}

.blog-swiper-next{
  right: 2%;
}

@media (max-width: 767px){
  .blog-swiper-prev,
  .blog-swiper-next{
    width: 32px;
    height: 32px;
    font-size: 1.2em;
  }
}




/* ------------------------------------------------------------------------------- */
/*  5. Projects
/* ------------------------------------------------------------------------------- */



.section-products-intro{
  background: #272727;
  padding: 140px 0 120px;
  margin-top: 0;
}

.projects.section{
  margin-top: 0;
}

.section-products-intro .inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
}

.section-products-intro .eyebrow{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #155fa0;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.section-products-intro .title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: clamp(30px, 2.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 50px;
  text-transform: none;
}

.section-products-intro .subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 25.5px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 0;
}



.bg-projects{
  position: relative;
  background:url(../img/bg/projects.webp) 50% 0 no-repeat;
  background-size: cover;
}

.project{
  padding: 0;
  overflow: hidden;
}

.project figure{
  position: relative;
}

.project figure img{
  display: block;
  width: 100%;
  -webkit-transition: all 8s linear;
  -o-transition: all 8s linear;
  transition: all 8s linear;
}

.project figure:after{
  content:'';
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: #111;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project.project-light figure:after{
  opacity: 0.4;
}
    
.project figcaption{
  position: absolute;
  z-index: 1;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  margin: 3.2em 3.6em;
}

.project-title{
  position: relative;
  top:0;
  left:0;
  margin:0;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: normal;
  font-size: 1.56em;
  line-height: 1.45;
  letter-spacing: 0.07em;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-category{
  position: absolute;
  left: 0;
  bottom: 0;
  margin:0 0 -0.8em;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.8em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-zoom{
  position: absolute;
  left: 50%;
  top:50%;
  width: 9em;
  height: 9em;
  margin:-4.5em;
  border-radius: 50%;
  background-color: rgba(197,164,126,0.84);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.project-zoom:after{
  content: '';
  position: absolute;
  left: 50%;
  top:50%;
  width: 2.625em;
  height:2.625em;
  background:url(../img/img-icon/zoom.png) 0 0 no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project figure:hover:after{
  opacity: 0;
}

.project figure:hover img{
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

.project figure:hover .project-title{
  top:30px;
  opacity: 0;
}

.project figure:hover .project-category{
  opacity: 0;
  letter-spacing: 2em;
}

.project figure:hover .project-zoom{
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}



/* 5.1 Carousel */



.owl-prev,
.owl-next{
  position: absolute;
  top:50%;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-size:1em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.owl-prev:hover,
.owl-next:hover{
  opacity: 1;
}

.owl-prev{
  left: 0.8em;
  padding-left: 35px;
  background:url(../img/img-icon/prev.png) left 50% no-repeat;
  background-size: 1.3em 1em;
  
}

.owl-next{
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background:url(../img/img-icon/next.png) right 50% no-repeat;
  background-size: 1.3em 1em;
}



/* 5.2 Magnific popup */



.mfp-figure{
  box-shadow: none;
}

.mfp-iframe-scaler{
  overflow: visible;
}

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close{
  padding: 0;
  margin-top: -10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 300;
  line-height: 0;
}

img.mfp-img{
  min-height: 460px;
}


.mfp-title{
  padding-right: 40px;
  font-size:1.2em;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.mfp-counter{
  top:5px;
}

.mfp-bg{
  background-color: #141414;
}

.mfp-arrow-left:before, .mfp-arrow-left .mfp-b{
  display: none;
}

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b{
  display: none;
}

.mfp-wrap .mfp-content {
  -webkit-perspective: 1300px;
          perspective: 1300px
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform:scale(0) rotateY(60deg);
  -o-transform:scale(0) rotateY(60deg);
  transform:scale(0) rotateY(60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
  -webkit-transform: rotateY(-60deg);
      -ms-transform: rotateY(-60deg);
       -o-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap.mfp-ready .mfp-figure,
.mfp-wrap.mfp-ready .mfp-iframe-scaler {
  opacity: 1;
  -webkit-transform:rotateX(0);
      -ms-transform:rotateX(0);
       -o-transform:rotateX(0);
          transform:rotateX(0);
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-wrap.mfp-removing .mfp-figure ,
.mfp-wrap.mfp-removing .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform: rotateX(-60deg);
      -ms-transform: rotateX(-60deg);
       -o-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
  
}

.mfp-zoom-out-cur, 
.mfp-zoom-out-cur 
.mfp-image-holder .mfp-close{
  cursor:url(../img/zoom-out.cur), zoom-out;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}



/* 5.3 Project Details */



.project-title-info{
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  font-weight: bold;
  font-size: 2vmin;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item{
  display: inline-block;
  margin-left: 1.8em;
}

.product-overview{
  padding: 140px 0;
}

/* Bootstrap's .container clearfix injects :before/:after, and in a flex container
   those become two extra flex items - each one collecting an 80px gap and pushing
   the media column off the right edge. */
.product-overview-grid:before,
.product-overview-grid:after{
  display: none;
}

.product-overview-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 80px;
}

.product-overview-text{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(40% - 40px);
          flex: 0 0 calc(40% - 40px);
  max-width: calc(40% - 40px);    /* the two columns share the 80px gap, so 40/60 must give it back */
}

.product-overview-eyebrow{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #4d82d6;
}

.product-overview-title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.3;
  color: #fff;
  margin: 20px 0 0.9em;
}

.product-overview-descr{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  max-width: 420px;
  margin: 0;
}

.product-overview-media{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(60% - 40px);
          flex: 0 0 calc(60% - 40px);
  max-width: calc(60% - 40px);
}

.product-overview-media img{
  display: block;
  width: auto;                    /* box hugs the picture instead of letterboxing it, */
  max-width: 100%;                /* otherwise the rounded corners land on empty space */
  height: auto;
  max-height: 560px;
  margin: 0 auto;
  border-radius: 8px;
}

@media (max-width: 1024px){
  .product-overview-grid{
    display: block;
  }

  .product-overview-text{
    max-width: 100%;
    margin-bottom: 2.5em;
  }

  .product-overview-media{
    max-width: 100%;
  }

  .product-overview-media img{
    max-height: 400px;
  }
}

.product-section{
  padding: 120px 0;
}

.section-eyebrow{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4d82d6;
  letter-spacing: 0.02em;
  margin-bottom: 0.9em;
}

.product-section-title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: clamp(28px, 2.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1em;
  text-transform: none;
}

.product-spec-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.product-spec-table th,
.product-spec-table td{
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.95em;
  color: rgba(255,255,255,0.85);
}

.product-spec-table th{
  width: 32%;
  color: #fff;
  font-weight: 600;
  background-color: rgba(255,255,255,0.04);
}

.product-feature-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-feature-list li{
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.8em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1em;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}

.product-feature-list li:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4d82d6;
}

.product-cta{
  text-align: center;
  padding: 3em 0 4em;
}

/* Product Hero (2-col: text left / image right, sized to clear the info bar for a 100vh first screen) */

.product-hero{
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: calc(100vh - 140px);
  padding: 9em 0 3em;
  background-color: #111214;
  background-image: -webkit-linear-gradient(315deg, #1a1b1e, #0d0e10 70%);
  background-image: linear-gradient(135deg, #1a1b1e, #0d0e10 70%);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-hero-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 3em;
  width: 100%;
}

.product-hero-text{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 420px;
          flex: 1 1 420px;
  max-width: 620px;
  margin-left: 0;
}

.product-hero-media{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 300px;
          flex: 1 1 300px;
  max-width: 400px;
}

.product-hero-media img{
  width: 100%;
  height: auto;
  border-radius: 8px;             /* one rounding value across every product photo */
  display: block;
}

.product-hero-eyebrow{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #4d82d6;
  letter-spacing: 0.02em;
  margin-bottom: 1em;
}

.product-hero-title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: clamp(36px, 3vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-transform: none;
}

.product-hero-subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 2.4em;
}

.product-hero-divider{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2em;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.product-hero-divider .line{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background-color: rgba(255,255,255,0.2);
}

.product-hero-divider img{
  height: 16px;
  width: auto;
  opacity: 0.85;
}

/* Product Info Bar (4 stat columns + CTA, ~140px tall) */

.product-info-bar{
  background-color: #17181b;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.product-info-bar .row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.6em;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 1.6em 0;
}

.product-info-items{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 2.4em;
}

@media (max-width: 1024px){
  .product-info-bar{
    min-height: 0;
  }

  .product-info-bar .row{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 1.6em 30px;
  }

  .product-info-items{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1.1em;
    width: 100%;
  }

  .product-info-item{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }

  .product-info-bar .btn{
    margin-top: 1.6em;
  }
}

.product-info-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5em;
}

.product-info-item .info-label{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.product-info-item .info-value{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.product-info-item .info-value i{
  color: #4d82d6;
  font-size: 1.3em;
}

/* CTA banner */

.product-cta-banner{
  background-image: -webkit-linear-gradient(315deg, #0e2438, #2b5fac 160%);
  background-image: linear-gradient(135deg, #0e2438, #2b5fac 160%);
  padding: 4.5em 0;
  text-align: center;
}

.product-cta-banner h3{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-transform: none;
}

.product-cta-banner p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.8);
  margin: 0 0 1.8em;
}

.product-cta-banner .btn{
  background-color: transparent;
  border: 1px solid #fff;
}

.product-cta-banner .btn:hover{
  background-color: #2b5fac;
  border-color: #2b5fac;
}

/* Configuration cards (4-card grid) */

.product-config-grid{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6em;
}

.product-config-card{
  background-color: #1d1e22;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2em 1.6em;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.product-config-card:hover{
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  border-color: #2b5fac;
}

.product-config-index{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(43,95,172,0.15);
  color: #4d82d6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  margin-bottom: 1.2em;
}

.product-config-card h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.6em;
  text-transform: none;
}

.product-config-card p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.6);
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0;
}

/* Principle banner + point grid */

.product-principle-banner{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 3em;
}

.product-principle-banner img{
  width: 100%;
  height: auto;
  max-height: 420px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-filter: brightness(0.55);
          filter: brightness(0.55);
}

.product-principle-banner-caption{
  position: absolute;
  left: 2em;
  bottom: 2em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.6em;
  font-weight: 700;
}

/* Video play button + modal */

.product-video-play-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  background-color: rgba(17,18,20,0.35);
  color: #fff;
  font-size: 1.5em;
  cursor: pointer;
  -webkit-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}

.product-video-play-btn i{
  margin-left: 4px;
}

.product-video-play-btn:hover,
.product-video-play-btn:focus{
  background-color: #2b5fac;
  border-color: #2b5fac;
  -webkit-transform: translate(-50%, -50%) scale(1.08);
      -ms-transform: translate(-50%, -50%) scale(1.08);
          transform: translate(-50%, -50%) scale(1.08);
}

.video-modal{
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.video-modal.is-open{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.video-modal-backdrop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10,10,12,0.9);
}

.video-modal-dialog{
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 960px;
}

.video-modal-dialog video{
  display: block;
  width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  background-color: #000;
}

.video-modal-close{
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
}

.video-modal-close:hover{
  background-color: #2b5fac;
  border-color: #2b5fac;
}

.product-point-grid{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6em;
}

.product-point-index{
  display: block;
  color: #4d82d6;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.7em;
}

.product-point-text{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin: 0;
}

/* Feature split (text + image) */

.product-feature-split{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 3em;
}

.product-feature-split-text{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 420px;
          flex: 1 1 420px;
}

.product-feature-split-media{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 320px;
          flex: 1 1 320px;
}

.product-feature-split-media img{
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Numbered recommendation list */

.product-numbered-list{
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.4em 2em;
}

.product-numbered-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1em;
  padding: 1.1em 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.product-numbered-item:last-child{
  border-bottom: 0;
}

.product-numbered-item .num{
  color: #4d82d6;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
}

.product-numbered-item p{
  margin: 0;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Process steps (4-step horizontal) */

.product-steps{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6em;
}

.product-step{
  text-align: center;
}

.product-step-num{
  display: block;
  color: #4d82d6;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.7em;
}

.product-step h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  margin: 0 0 0.5em;
  text-transform: none;
}

.product-step p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.6);
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0;
}

/* Checklist (2-col grid) */

.product-checklist{
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2em 2.4em;
}

.product-checklist-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.8em;
}

.product-checklist-item i{
  color: #4d82d6;
  margin-top: 0.3em;
}

.product-checklist-item p{
  margin: 0;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Related note */

.product-related-card{
  background-color: #1e1e1e;
  border-left: 3px solid #2b5fac;
  padding: 1.6em 2em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
}

@media (max-width: 1024px){
  .product-hero{
    min-height: auto;
    padding: 8em 0 3em;
  }
  .product-hero-text{
    margin-left: 0;
  }
  .product-hero-grid{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .product-info-bar .row{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .product-config-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px){
  .product-section{
    padding: 4em 0;
  }
  .product-point-grid{
    grid-template-columns: 1fr;
  }
  .product-config-grid{
    grid-template-columns: 1fr;
  }
  .product-steps{
    grid-template-columns: 1fr 1fr;
  }
  .product-checklist{
    grid-template-columns: 1fr;
  }
  .product-feature-split{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  /* stacked = column direction, where flex-basis becomes a HEIGHT.
     Left as 420px/320px it padded the text block out to 420px tall and left a
     gap above the photo, so let both blocks size to their content. */
  .product-feature-split-text,
  .product-feature-split-media{
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: 100%;
  }

  .product-feature-split{
    gap: 1.6em;
  }
}



/* ------------------------------------------------------------------------------- */
/*  6. Experience
/* ------------------------------------------------------------------------------- */



.experience{
  text-align: center;
}

.text-parallax {
  background: no-repeat 0 0;
  display: inline-block;
}

.text-parallax-content{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 21.8em;
  line-height: 1;
  overflow: hidden;
  margin-bottom: 0;
  background: #272727;
  color:#fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode:darken;
}

.experience-info{
  position: relative;
  top: -0.75em;
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 1.5625em;
  line-height: 1.45;
  letter-spacing: 0.06em;
  display: inline-block;
  text-align: left;
  margin:0 0 0 0.5em;
}



/* ------------------------------------------------------------------------------- */
/*  7. Clients
/* ------------------------------------------------------------------------------- */



.clients{
  text-align: center;
}

.clients .section-title{
  font-weight: 700;
  font-size: 2.84375em;
}

.clients-list{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  text-align: center;
}

.clients-list .client{
  padding: 0;
  margin: 0;
}

@media (max-width: 767px){
  .clients-list{
    grid-template-columns: repeat(2, 1fr);
  }
}

.clients-list .client-name{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 2.3em;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.clients-list .client:hover .client-name{
  color: #fff;
}



/* ------------------------------------------------------------------------------- */
/*  8. Blog
/* ------------------------------------------------------------------------------- */



.bg-blog{
  background: url(../img/bg/blog.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.blog{
  position: relative;
  margin-bottom: 3em;
  margin-right: 1px;
  background-color: #373737;
  box-shadow:0 1px 15px rgba(0,0,0,0.08);
}

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

.blog-thumbnail{
  position: static;
}

.blog-thumbnail-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 5px;
  padding: 0;
  border-radius: 0.25em 0 0 0.25em;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 0;
}

.blog-thumbnail-img img{
  border-radius: 0.25em 0.25em 0 0;
}

.blog-info{
  padding: 3.3em 3em;
}

.blog-info .blog-tags a{
  background-color: #434343;
}

.blog-tags{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  margin-top:-0.8em;
}

.blog-tags a{
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em 0.77em;
  border-radius: 2em;
  background-color: #333333;
  text-transform: uppercase;
  color:#6f6f6f;
  margin-top: 0.8em;
  margin:0.8em 0.7em 0 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.blog-tags a:hover{
  background-color:#155fa0;
  text-decoration: none;
  color: #fff;
}

.blog-title{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.333;
  margin: 1.8em 0 0.8em;
}

.blog-info p{
  margin-bottom: 0;
  color:#fff;
}

.blog-meta{
  font-size: 0.88em;
  color:#b4b4b4;
  overflow: hidden;
}

.blog-meta .author{
  color: #686868;
  float: left;
}

.blog-meta .author a{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  color:#686868;
}

.blog-meta .author a:hover{
  text-decoration: none;
  color:#155fa0;
}

.blog-meta .time{
  float: right;
  color:#686868;
}

.blog-info .blog-meta{
  border-top:1px solid #474747;
  margin-top: 1.7em;
  padding-top: 1.7em;
}

.read-more{
  display: inline-block;
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  font-size: 0.88em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.read-more{
  padding-right: 2em;
  background:url(../img/img-icon/read-more.png) right 50% no-repeat;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.read-more:hover{
  text-decoration: none;
  background-position: 95% 50%;
}

.blog-info .read-more{
  margin-top: 2.8em;
}



/* 8.1 Blog Details */



.blog-details{
  margin-bottom:8.3em;
}

.col-secondary{
  margin-top: 7.1em;
}

.post-header{
  margin-bottom: 5em;
}

.post-header h3{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 2.2em;
  line-height: 1.43;
  margin:0 0 0 0;
}

.post-header .blog-meta{
  margin-top: 2.45em;
}

.post-thumbnail{
  margin-bottom: 2.5em;
}

.post-thumbnail img{
  width: 100%;
  border-radius: 0.25em;
}

.post .blog-tags{
  margin-top: 5.4em;
}



/* 8.2 Widgets */



.widget{
  margin-bottom: 3.65em;
}

.widget-title{
  font-family: 'montserratsemibold', 'Noto Sans KR', sans-serif;
  font-weight: normal;
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 2.25em 0;
}



/* 8.3 Widget Recent Post */



.recent-post{
  margin-bottom: 1.7em;
  overflow: hidden;
}

.recent-post:last-child{
  margin-bottom: 0;
}

.recent-post-thumbnail{
  width: 9.32em;
  float: left;
}

.recent-post-thumbnail img{
  border-radius: 0.25em;
  max-width: 100%;
}

.recent-post-body{
  padding-left: 11.2em;
}

.recent-post-title{
  font-family: 'Oswald', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  margin:0;
  position: relative;
}

.recent-post-time{
  font-size: 0.88em;
  color:#b4b4b4;
  margin-top: 0.9em;
}



/* ------------------------------------------------------------------------------- */
/*  9. Contacts
/* ------------------------------------------------------------------------------- */



.bg-contacts{
  background: url(../img/bg/contacts.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.contacts .fade-title-right{
  left: 90%;
}

.row-field{
  margin-left: -5px;
  margin-right:-5px;
}

.col-field{
  padding: 0 5px;
}

.col-message{
  display: none;
  margin-top: 20px;
}

.col-address{
  font-size: 1.125em;
  line-height: 2.1;
  margin-top: 2em;
}

.form-submit{
  margin-top: 1.2em;
}

.success-message{
  display: none;
}

.error-message{
  display: none;
}

.success-message .fa{
  margin-right: 7px;
  font-size: 1.5em;
}

.location-section{
  background-color: #111214;
  padding: 100px 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 4%;
}

.location-map{
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 55%;
          flex: 0 0 55%;
  max-width: 55%;
  min-height: 480px;
  border-radius: 8px;
  overflow: hidden;
}

.location-map iframe{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -webkit-filter: invert(90%) hue-rotate(180deg) contrast(0.9);
          filter: invert(90%) hue-rotate(180deg) contrast(0.9);
}

.location-map-open{
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4em;
  padding: 0.55em 1.1em;
  border-radius: 20px;
  background-color: rgba(17,18,20,0.85);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.location-map-open:hover{
  background-color: #2b5fac;
  color: #fff;
  text-decoration: none;
}

.location-info{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 41%;
}

.location-title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 1.1em;
}

.location-address{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.9em;
  margin-bottom: 2em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1.05em;
  color: rgba(255,255,255,0.85);
}

.location-copy-btn{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.95em;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  background-color: transparent;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.82em;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.location-copy-btn:hover{
  border-color: #2b5fac;
  background-color: #2b5fac;
}

.location-map-apps{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8em;
  margin-bottom: 3em;
}

.location-map-app{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.35em;
  border-radius: 24px;
  background-color: #1d1e22;
  border: 1px solid transparent;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.9em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.location-map-app:hover{
  border-color: #2b5fac;
  color: #fff;
  text-decoration: none;
}

.location-block{
  margin-bottom: 2.3em;
}

.location-block:last-child{
  margin-bottom: 0;
}

.location-block h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.9em;
}

.location-block p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.95em;
  line-height: 1.85;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.location-note{
  color: rgba(255,255,255,0.4);
  font-size: 0.88em;
}

.location-directions{
  margin: 0;
  padding: 0;
  list-style: none;
}

.location-directions li{
  margin-bottom: 1.4em;
}

.location-directions li:last-child{
  margin-bottom: 0;
}

.location-directions strong{
  display: block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.6em;
}

.direction-times{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.6em;
}

.direction-times span{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.9em;
  border-radius: 20px;
  background-color: #1d1e22;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.88em;
  color: rgba(255,255,255,0.75);
}

.direction-times .fa{
  color: #2b5fac;
}

.location-toast{
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 999;
  -webkit-transform: translateX(-50%) translateY(20px);
      -ms-transform: translateX(-50%) translateY(20px);
          transform: translateX(-50%) translateY(20px);
  padding: 0.9em 1.6em;
  border-radius: 8px;
  background-color: #2b5fac;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.9em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.location-toast.is-visible{
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0);
      -ms-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}

@media (max-width: 1024px){
  .location-section{
    display: block;
    padding: 60px 20px;
  }

  .location-map{
    max-width: 100%;
    min-height: 320px;
    margin-bottom: 2.5em;
  }

  .location-info{
    max-width: 100%;
  }
}



/* ------------------------------------------------------------------------------- */
/*  10. Footer
/* ------------------------------------------------------------------------------- */



.footer{
  background-color: #171717;
  margin-top: 7.1em;
  padding: 2.6em 0;
}

.footer .container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.5em;
}

.footer-brand{
  display: inline-block;
}

.footer-brand img{
  height: 34px;
  width: auto;
}

.footer-biz{
  text-align: left;
}

.footer-biz p{
  margin: 0 0 0.4em;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.85em;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

.footer-biz p:last-child{
  margin-bottom: 0;
}

.footer-divider{
  margin: 0 0.6em;
  color: rgba(255,255,255,0.25);
}

@media (max-width: 767px){
  .footer .container{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .footer-biz{
    text-align: left;
  }
}

.author-link{
  font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
  color: #d0d0d0;
}

.author-link:hover{
  text-decoration: none;
}



/* ------------------------------------------------------------------------------- */
/*  11. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 11.1 Min width 768px */



@media (min-width: 768px){



  html{
    font-size: 85%;
  }



  /* Slider */



  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right: auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }



  /* About */



  .entry{
    padding: 0 7.5em;
  }

  .col-about-spec{
    padding: 0 4.4em;
  }



  /* Project Carousel */



  .owl-prev{
    left: 3.6em
  }

  .owl-next{
    right:3.6em;
  }



}



/* 11.2 Min width 992px */



@media (min-width: 992px){



  html{
    font-size: 92%;
  }



  /* Content styles */



  .text-center-md{
    text-align: center;
  }

  .text-right-md{
    text-align: right;
  }

  .text-left-md{
    text-align: left;
  }



  /* Navbar Mobile */


  .navbar-mobile{
    position: absolute;
    left: -50000px;
    top: -50000px;
  }



  /* About */



  .col-about-img{
    padding-left: 0;
    left: -5px;
  }

  .col-about-img img{
    max-width: calc(100% + 5px);
  }




  /* Blog Details */


  
  .col-primary{
    padding-right: 2.2em;
  }

  .col-secondary{
    margin-top: 10.62em;
    margin-left: -5px;
    padding:0 10px 0 0;
  }



  /* Contacts */


  .row-field{
    margin-left: -15px;
  }
}


/* 11.3 Min width 1200px */



@media (min-width: 1200px){


   html{
    font-size: 100%;
  }



   /* Header */



  .main-header{
    padding-left: 0;
  }



}



/* 11.4 Max height 480px  */



  @media (max-height: 480px){



  /* Slider */



  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right:auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }
}




/* ==========================================================================
   Product detail page additions: indications table, focal depth, disclosure,
   highlight cards, and the probe accordion (DUAL WAVE SMART content review)
   ========================================================================== */

.product-section-subtitle{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1em;
  color: rgba(255,255,255,0.6);
  margin: -1.2em 0 2em;
}

.product-fineprint{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.8em;
  color: rgba(255,255,255,0.4);
  margin-top: 1.6em;
}

/* Highlight cards (key differentiators) */

.product-highlight-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.6em;
}

.product-highlight-card{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 260px;
          flex: 1 1 260px;
  background-color: #1d1e22;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.8em;
}

.product-highlight-card i{
  font-size: 1.6em;
  color: #4d82d6;
  margin-bottom: 0.7em;
  display: block;
}

.product-highlight-card h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 0.5em;
}

.product-highlight-card p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.65);
  font-size: 0.92em;
  line-height: 1.6;
  margin: 0;
}

/* Indications table */

.product-indication-table-wrap{
  overflow-x: auto;
}

.product-indication-table{
  width: 100%;
  border-collapse: collapse;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.product-indication-table th,
.product-indication-table td{
  padding: 0.9em 1em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 0.92em;
  white-space: nowrap;
}

.product-indication-table th.col-disorder,
.product-indication-table td.col-disorder{
  text-align: left;
  white-space: normal;
}

.product-indication-table thead th{
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,0.2);
}

.product-indication-table .en{
  display: block;
  color: rgba(255,255,255,0.45);
  font-size: 0.85em;
  margin-top: 0.2em;
}

.product-indication-table td.mark{
  color: #4d82d6;
  font-weight: 700;
  font-size: 1.1em;
  background-color: transparent;
  padding: 0.9em 1em;
}

@media (max-width: 640px){
  .product-indication-table thead{
    display: none;
  }
  .product-indication-table, .product-indication-table tbody,
  .product-indication-table tr, .product-indication-table td{
    display: block;
    width: 100%;
  }
  .product-indication-table tr{
    margin-bottom: 1em;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1em 1.2em;
  }
  .product-indication-table td{
    border: none;
    padding: 0.2em 0;
    text-align: left;
    white-space: normal;
  }
  .product-indication-table td.col-disorder{
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5em;
  }
  .product-indication-table td:not(.col-disorder):not(.mark){
    display: none;
  }
  .product-indication-table td.mark{
    display: inline-block;
    background-color: rgba(43,95,172,0.15);
    border-radius: 4px;
    padding: 0.3em 0.7em;
  }
  .product-indication-table td.mark::before{
    content: attr(data-label);
    margin-right: 0.4em;
  }
}

/* Focal depth cards */

.product-depth-grid{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}

.product-depth-card{
  background-color: #1d1e22;
  border-radius: 8px;
  padding: 2em 1.6em;
  text-align: center;
}

.product-depth-gauge{
  width: 10px;
  height: 90px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  margin: 0 auto 1.4em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  overflow: hidden;
}

.product-depth-gauge span{
  display: block;
  width: 100%;
  background-color: #4d82d6;
  border-radius: 5px;
}

.product-depth-card h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.5em;
}

.product-depth-efficacy{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.9em;
  margin: 0 0 0.8em;
}

.product-depth-area{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.5);
  font-size: 0.85em;
  margin: 0;
}

/* Probe accordion (details/summary) */

.product-config-accordion{
  cursor: pointer;
}

.product-config-accordion summary{
  list-style: none;
  cursor: pointer;
  position: relative;
}

.product-config-accordion summary::-webkit-details-marker{
  display: none;
}

.product-config-accordion-icon{
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(255,255,255,0.4);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.product-config-accordion[open] .product-config-accordion-icon{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.product-config-accordion-body{
  margin-top: 1.2em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.9em;
}

.product-config-probe{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.2em;
}

.product-config-probe strong{
  color: #fff;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.92em;
}

.product-config-probe span{
  color: rgba(255,255,255,0.55);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.85em;
}

.product-config-probe-pending strong{
  color: rgba(255,255,255,0.5);
}

/* Regulatory disclosure */

.product-disclosure dl{
  margin: 0;
}

.product-disclosure-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5em 1.5em;
  padding: 0.8em 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.product-disclosure-row dt{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 240px;
          flex: 0 0 240px;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.5);
  font-size: 0.85em;
}

.product-disclosure-row dd{
  margin: 0;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.8);
  font-size: 0.9em;
}

@media (max-width: 640px){
  .product-depth-grid{
    grid-template-columns: 1fr;
  }
  .product-disclosure-row dt{
    flex-basis: 100%;
  }
}


/* ==========================================================================
   Product detail page additions: BeatPain 4-point principle, indication tags,
   core technology list, reimbursement cards, spec accordion (BEATPAIN content review)
   ========================================================================== */

.product-point-grid-4{
  grid-template-columns: repeat(4, 1fr);
}

.product-point-icon{
  display: block;
  color: #4d82d6;
  font-size: 1.4em;
  margin-bottom: 0.6em;
}

@media (max-width: 1024px){
  .product-point-grid-4{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px){
  .product-point-grid-4{
    grid-template-columns: 1fr;
  }
}

/* Indication tag grid */

.product-indication-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1em;
}

.product-indication-badge{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 220px;
          flex: 1 1 220px;
  background-color: #1d1e22;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.4em 1.6em;
}

.product-indication-badge h3{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 0.4em;
}

.product-indication-badge p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.5);
  font-size: 0.85em;
  margin: 0;
}

/* Core technology list (numbered, horizontal) */

.product-tech-list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product-tech-item{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.8em;
  padding: 1.8em 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.product-tech-item:last-child{
  border-bottom: 0;
}

.product-tech-num{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: 2em;
  color: #4d82d6;
  line-height: 1;
}

.product-tech-body h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.6em;
}

.product-tech-body p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.65);
  font-size: 0.92em;
  line-height: 1.7;
  margin: 0;
}

.product-tech-highlight{
  color: #7ba7e6;
  font-weight: 700;
}

@media (max-width: 767px){
  .product-tech-item{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.6em;
  }
  .product-tech-num{
    font-size: 1.5em;
  }
}

/* Reimbursement cards */

.product-reimburse-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.6em;
}

.product-reimburse-card{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 280px;
          flex: 1 1 280px;
  background-color: #1d1e22;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product-reimburse-label{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

.product-reimburse-card h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.6em;
}

.product-reimburse-card p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.6);
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0 0 1.2em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.product-reimburse-card .btn{
  align-self: flex-start;
}

/* Spec accordion (5 grouped tables) */

.product-spec-accordion-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8em;
}

.product-spec-group{
  background-color: #1d1e22;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0 1.6em;
}

.product-spec-group summary{
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.2em 2em 1.2em 0;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-weight: 700;
}

.product-spec-group summary::-webkit-details-marker{
  display: none;
}

.product-spec-group-icon{
  position: absolute;
  top: 1.2em;
  right: 0;
  color: rgba(255,255,255,0.4);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.product-spec-group[open] .product-spec-group-icon{
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.product-spec-group .product-spec-table{
  margin: 0 0 1.2em;
}

.product-spec-group .product-spec-table th{
  background-color: transparent;
  width: 40%;
}

@media (max-width: 640px){
  .product-spec-group .product-spec-table,
  .product-spec-group .product-spec-table tbody,
  .product-spec-group .product-spec-table tr,
  .product-spec-group .product-spec-table th,
  .product-spec-group .product-spec-table td{
    display: block;
    width: 100%;
  }
  .product-spec-group .product-spec-table tr{
    padding: 0.8em 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .product-spec-group .product-spec-table th,
  .product-spec-group .product-spec-table td{
    border-bottom: 0;
    padding: 0.2em 0;
  }
}


/* ==========================================================================
   Product detail page additions: CellaBone labeled cards, spec chips,
   application/component photo-placeholder grids, nested output table
   (CELLABONE content review)
   ========================================================================== */

.product-labeled-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.6em;
}

.product-labeled-card{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 280px;
          flex: 1 1 280px;
  background-color: #1d1e22;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 1.8em;
}

.product-labeled-tag{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
  background-color: rgba(43,95,172,0.15);
  border-radius: 4px;
  padding: 0.3em 0.7em;
  margin-bottom: 0.9em;
}

.product-labeled-card h3{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.5em;
}

.product-labeled-card p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.55);
  font-size: 0.88em;
  line-height: 1.6;
  margin: 0;
}

/* Small spec chip row (used under principle points) */

.product-spec-chip-row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.8em;
  margin-top: 2em;
}

.product-spec-chip{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.5em 1.1em;
}

/* Application / component photo placeholder */

.product-application-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  margin-bottom: 1em;
}

.product-application-photo i{
  font-size: 1.8em;
  color: rgba(255,255,255,0.2);
}

.product-application-grid{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}

.product-application-card{
  text-align: center;
}

.product-application-card h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 0.3em;
}

.product-application-card p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.55);
  font-size: 0.85em;
  margin: 0 0 0.6em;
}

.product-application-fix{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.78em;
  color: #4d82d6;
  background-color: rgba(43,95,172,0.12);
  border-radius: 4px;
  padding: 0.25em 0.7em;
}

@media (max-width: 1024px){
  .product-application-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Component groups (L-type / S-type) */

.product-component-groups{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2.6em;
}

.product-component-group{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 420px;
          flex: 1 1 420px;
}

.product-component-group-title{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 1.2em;
}

.product-component-items{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,..) so long labels wrap instead of overflowing */
  gap: 1em;
}

.product-component-item{
  text-align: center;
}

.product-component-item h4{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  margin: 0 0 0.3em;
  line-height: 1.4;
  word-break: keep-all;            /* wrap between words, not mid-word */
  overflow-wrap: break-word;
}

.product-component-item p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.45);
  font-size: 0.78em;
  margin: 0;
}

/* Reimbursement CTA row (definition list + button) */

.product-reimburse-cta{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1em;
  margin-top: 1.6em;
  padding-top: 1.6em;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.product-reimburse-cta p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.7);
  font-size: 0.92em;
  margin: 0;
}

/* Nested spec output table (L-type / S-type comparison) */

.product-spec-subtable-label{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.5);
  font-size: 0.82em;
  margin: 1.4em 0 0.6em;
}

.product-spec-output-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.product-spec-output-table th,
.product-spec-output-table td{
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.88em;
  color: rgba(255,255,255,0.8);
}

.product-spec-output-table th:first-child,
.product-spec-output-table td:first-child{
  text-align: left;
}

.product-spec-output-table thead th{
  color: #fff;
  font-weight: 600;
  background-color: rgba(255,255,255,0.04);
}

@media (max-width: 767px){
  .product-application-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  /* keep the desktop arrangement on narrow screens: the groups simply wrap.
     flex-direction:column made each group inherit the 420px basis as a HEIGHT,
     which is where the huge empty gaps came from. */
  .product-component-group{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
  .product-component-groups{
    gap: 2em;
  }
  .product-reimburse-cta{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

@media (max-width: 640px){
  .product-spec-output-table thead{
    display: none;
  }
  .product-spec-output-table, .product-spec-output-table tbody,
  .product-spec-output-table tr, .product-spec-output-table td{
    display: block;
    width: 100%;
  }
  .product-spec-output-table tr{
    margin-bottom: 0.8em;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.8em 1em;
  }
  .product-spec-output-table td{
    border: none;
    padding: 0.2em 0;
    text-align: left;
  }
  .product-spec-output-table td:first-child{
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3em;
  }
  .product-spec-output-table td:not(:first-child)::before{
    content: attr(data-label) ": ";
    color: rgba(255,255,255,0.5);
  }
}


/* ==========================================================================
   Product detail page additions: WinBack application subheads, config
   accordion "more" link, Lympha T.i split block, step anchor link
   (WINBACK content review)
   ========================================================================== */

.product-application-subhead{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  margin: 1.6em 0 0.9em;
}

.product-application-subhead:first-of-type{
  margin-top: 0.4em;
}

.product-config-more-link{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.88em;
  font-weight: 600;
  margin-top: 0.4em;
}

.product-config-more-link:hover{
  color: #7ba7e6;
}

/* Lympha T.i split block */

.product-lympha-split{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.6em;
}

.product-lympha-media{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 320px;
          flex: 1 1 320px;
}

.product-lympha-media .product-application-photo{
  aspect-ratio: 4 / 3;
}

.product-lympha-text{
  -webkit-box-flex: 1;
      -ms-flex: 1 1 420px;
          flex: 1 1 420px;
}

.product-lympha-badge{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.8em;
  font-weight: 700;
  background-color: rgba(43,95,172,0.15);
  border-radius: 4px;
  padding: 0.35em 0.8em;
  margin-bottom: 1em;
}

.product-lympha-note{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.6);
  font-size: 0.9em;
  margin-top: 1em;
}

/* Process step anchor link */

.product-step-link{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #4d82d6;
  font-size: 0.85em;
  font-weight: 600;
  margin-top: 0.6em;
}

.product-step-link:hover{
  color: #7ba7e6;
}

@media (max-width: 767px){
  .product-lympha-split{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}


/* ==========================================================================
   Product detail page additions: MagRex indication highlight, applicator
   badges, generic compare table (MAGREX content review)
   ========================================================================== */

.product-indication-highlight{
  background-color: rgba(43,95,172,0.08);
  border: 1px solid rgba(77,130,214,0.3);
  border-radius: 8px;
  padding: 1.6em 1.8em;
  margin: 1.6em 0;
}

.product-indication-highlight h3{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 0.4em;
}

.product-indication-highlight p{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: rgba(255,255,255,0.65);
  font-size: 0.92em;
  margin: 0;
}

.product-indication-en{
  color: rgba(255,255,255,0.45);
  font-size: 0.75em;
  font-weight: 400;
}

/* Applicator cards (3-col grid + option/basic badge) */

.product-config-grid-3{
  grid-template-columns: repeat(3, 1fr);
}

.product-applicator-badge{
  display: inline-block;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3em 0.7em;
  border-radius: 4px;
  margin-bottom: 0.9em;
}

.product-applicator-badge-basic{
  color: #4d82d6;
  background-color: rgba(43,95,172,0.15);
}

.product-applicator-badge-option{
  color: #e6a23c;
  background-color: rgba(230,162,60,0.15);
}

.product-applicator-specs{
  margin-top: 1.2em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.7em;
}

/* Generic comparison table (L/S lineup, applicator 3-way) */

.product-compare-table-wrap{
  overflow-x: auto;
}

.product-compare-table{
  width: 100%;
  border-collapse: collapse;
}

.product-compare-table th,
.product-compare-table td{
  padding: 0.9em 1em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 0.9em;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}

.product-compare-table thead th{
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,0.2);
}

.product-compare-table td:first-child{
  color: #fff;
  font-weight: 600;
  white-space: normal;
}

@media (max-width: 767px){
  .product-config-grid-3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .product-compare-table thead{
    display: none;
  }
  .product-compare-table, .product-compare-table tbody,
  .product-compare-table tr, .product-compare-table td{
    display: block;
    width: 100%;
  }
  .product-compare-table tr{
    margin-bottom: 1em;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1em 1.2em;
  }
  .product-compare-table td{
    border: none;
    padding: 0.25em 0;
    white-space: normal;
  }
  .product-compare-table td:first-child{
    margin-bottom: 0.4em;
  }
  .product-compare-table td:not(:first-child)::before{
    content: attr(data-label) ": ";
    color: rgba(255,255,255,0.5);
    font-weight: 600;
  }
}


/* ==========================================================================
   Product detail page additions: Q-Sio exclusion box + neutral tag variant
   (QSIO content review)
   ========================================================================== */

.product-exclusion-box{
  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 1.6em 1.8em;
  margin: 1.6em 0;
}

.product-exclusion-box h3{
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 0.6em;
}

.product-exclusion-box .product-feature-list{
  margin: 0;
}

.product-labeled-tag-neutral{
  color: rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.08);
}


/* ==========================================================================
   Product detail page addition: PAIN-ZERO treatment-area diagram
   (full-clarity, no crop/darken — distinct from the shared video/photo
   .product-principle-banner used by other products)
   ========================================================================== */

.product-principle-diagram{
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 3em;
}

.product-principle-diagram img{
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   RoboMax principle banner: cutout product image must show in full
   (scoped modifier so the shared .product-principle-banner cover/darken
   treatment used by other products' video banners stays untouched)
   ========================================================================== */

.product-principle-banner-contain img{
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 500px;
  -webkit-filter: none;
          filter: none;
  background-color: #101114;
}


/* ==========================================================================
   CellaBone hero: small patent-badge inset, top-left corner of the main
   hero product image. New class, scoped to this one image only.
   ========================================================================== */

/* Step 1: the box — a plain square, nothing else touches its shape */
.product-hero-badge-box{
  position: absolute;
  top: 0;
  left: auto;
  right: 70%;                     /* anchored by its right edge, so the overlap on the
                                     unit photo stays identical at every badge size */
  width: clamp(160px, 20vw, 293px);
  height: auto;
  z-index: 5;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

/* Step 2 + 3: the image fills the box, full cutout visible, no crop, no added background.
   !important defeats the unrelated ".product-hero-media img" rule (border-radius/height)
   that would otherwise win by specificity and clip this image's edges again. */
.product-hero-badge-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;        /* square source keeps the box square at any width */
  border-radius: 0 !important;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
          filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

@media (max-width: 767px){
  .product-hero-badge-box{
    right: auto;                  /* phones: keep it inside the photo, an overlapping
                                     badge would run off the left edge here */
    left: 0;
    width: 47%;
  }
}


/* ==========================================================================
   CellaBone feature section: the bullets keep the left column and the parts
   cutout sits under them; the unit photo stays on the right.
   Scoped to --parts so the other eight product pages keep the plain split.
   ========================================================================== */

.product-feature-split--parts{
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.product-feature-split--parts .product-feature-list{
  margin-bottom: 2.4em;
}



/* ==========================================================================
   PAIN-ZERO feature section: 동상방지 오토STOP badge pinned to the top-left of
   the unit photo. Sized in % of the photo so it tracks every breakpoint.
   ========================================================================== */

.product-feature-split-media--badged{
  position: relative;
}

.product-feature-badge-box{
  position: absolute;
  top: 2%;
  left: 0;
  width: 40%;
  max-width: 230px;
  z-index: 5;
}

.product-feature-badge-img{
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  -webkit-filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
          filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

@media (max-width: 767px){
  .product-feature-badge-box{
    width: 34%;
    max-width: 170px;
  }
}


/* ==========================================================================
   PAIN-ZERO feature section: larger bullet text, and the column starts at the
   top of the tall unit photo instead of being centred against it.
   ========================================================================== */

.product-feature-split--lg{
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.product-feature-split--lg .product-feature-split-text{
  padding-top: 50px;              /* nudge the list down from the heading */
}

.product-feature-split--lg .product-feature-list li{
  font-size: 1.2em;
  line-height: 1.7;
  margin-bottom: 1.1em;
  padding-left: 1.3em;
}

.product-feature-split--lg .product-feature-list li:before{
  width: 7px;
  height: 7px;
  top: 0.72em;
}

@media (max-width: 767px){
  .product-feature-split--lg .product-feature-split-text{
    padding-top: 0;               /* stacked layout does not need the offset */
  }
  .product-feature-split--lg .product-feature-list li{
    font-size: 1.05em;
    margin-bottom: 0.9em;
  }
}


/* ==========================================================================
   Beat Pain overview: the copy sits 100px higher than the centred default and
   carries a figure underneath, as wide as the text column and 30% shorter.
   ========================================================================== */

.product-overview-text--raised{
  position: relative;
  top: -100px;
}

.product-overview-figure{
  margin: 30px 0 0;               /* nudged 30px below the copy */
  border-radius: 8px;
  overflow: hidden;
}

.product-overview-figure img{
  display: block;
  width: 100%;
  height: 175px;                  /* ~30% shorter than the text block above it */
  -o-object-fit: contain;
     object-fit: contain;         /* a caption graphic - never crop it */
  -o-object-position: left center;
     object-position: left center;
}

@media (max-width: 991px){
  .product-overview-text--raised{
    top: 0;                       /* stacked layout: no offset to correct */
  }
  .product-overview-figure img{
    height: 150px;
  }
}


/* ==========================================================================
   MagRex lineup gallery: four static cards (no links - nothing to click through
   to). The photo carries its own #f5f5f5 backdrop, so the card uses the same
   colour and the two meet without a seam.
   ========================================================================== */

.product-lineup-grid{
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.product-lineup-card{
  background-color: #f5f5f5;
  border-radius: 16px;
  padding-top: 28px;
  overflow: hidden;
}

.product-lineup-card .product-lineup-name{
  margin: 0 0 6px;
  padding: 0 24px;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #17181b;
}

.product-lineup-card img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px){
  .product-lineup-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px){
  .product-lineup-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .product-lineup-card .product-lineup-name{
    font-size: 1.2em;
  }
}


/* ==========================================================================
   Slider CTA on tablet widths. Revolution writes its own inline sizing per
   breakpoint and between 768-1024px it lands ~40% larger than everywhere else,
   so the values below (and only these) are pulled back. Inline styles mean
   !important is required.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px){
  #rev_slider a.btn{
    font-size: 13px !important;
    line-height: 18px !important;
    padding: 15px 30px 14px !important;
    margin-top: 30px !important;
    letter-spacing: 2px !important;
  }

  #rev_slider a.btn .icon-next{
    font-size: 13px !important;
    line-height: 18px !important;
    margin-left: 8px !important;
  }
}


/* ==========================================================================
   Projects hero: the shared .main-inner overlay (0.6 -> 1.0 black) buried the
   background artwork almost completely. Lighter ramp here so the image reads,
   still dark enough behind the heading and where the grid starts.
   ========================================================================== */

.bg-projects.main-inner:after{
  background: -webkit-linear-gradient(bottom, rgba(39,39,39,0.97) 0%, rgba(39,39,39,0.72) 26%, rgba(39,39,39,0.15) 100%);
  background: linear-gradient(to top, rgba(39,39,39,0.97) 0%, rgba(39,39,39,0.72) 26%, rgba(39,39,39,0.15) 100%);
}


/* ==========================================================================
   Images now carry intrinsic width/height attributes (they stop the layout
   jumping while loading). Any rule that scales an image by width alone needs
   height:auto, otherwise the attribute height is used verbatim and the picture
   stretches. Aspect ratio stays exactly as the file defines it.
   ========================================================================== */

.project figure img,
.post-thumbnail img,
.recent-post-thumbnail img,
.col-about-img img{
  height: auto;
}


/* the components section closes with the parts artwork */
.product-parts{
  margin: 2.6em 0 0;
  text-align: center;
}

.product-parts img{
  display: block;
  width: 100%;
  max-width: 1000px;              /* artwork is supplied at 2x (1188px) for this size */
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

@media (max-width: 767px){
  .product-parts{
    margin-top: 2em;
  }
}


/* ==========================================================================
   CellaBone: LIPUS mechanism artwork, sits between the intro and the
   indication list. Scales with the column, never past its native width.
   ========================================================================== */

.product-mechanism{
  padding-top: 0;
}

.product-mechanism-figure{
  margin: 0 auto;
  max-width: 900px;
  border-radius: 100px;
  overflow: hidden;
}

@media (max-width: 575px){
  .product-mechanism-figure{
    border-radius: 60px;          /* scaled down so the corners do not eat the labels */
  }
}

.product-mechanism-figure img{
  display: block;
  width: 100%;
  height: auto;
}