/*============================================================================================*/
/* 3.  COMMON */
/*============================================================================================*/
/*-------- 3.1 Owl Carousel Custom Nav --------*/
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {
  outline: none;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: transparent !important;
  border: 2px solid  var(--green2);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.owl-theme .owl-dots .owl-dot span {
  position: relative;
  border-radius: 50%;
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  display: block;
  -webkit-backface-visibility: visible;
  transition: all .3s ease;
  border: 2px solid var(--secondary-blue);
}
.owl-theme .owl-dots .owl-dot span::before {
  content: '';
  background-color: var(--secondary-blue) !important;
  display: block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -4px;
  margin-left: -4px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.owl-theme .owl-dots .owl-dot.active span::before {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

/* 네비버튼 상하 위치 조정 
+값이 높을 수록 내부에 위치/ -값이 높을 수록 배너 밖에 위치

*/

.owl-theme .owl-nav {
  position: absolute;
  top: 30%;
  transform: translateY(-40%);
  left: 0;
  width: 100%;
  margin: 0 !important;
}





/* 네비버튼 크기 및 컬러
+
*/

.owl-prev,
.owl-next {
  width: 30px;
   height: 40px;
  position: absolute; 
  top: 0;
  display: block !important;
background: rgba(0,0,0,0.3) !important;
  line-height:36px !important;
  border:0px solid #ededed !important;
}


/* 네비버튼 좌우 위치 조정 
+값이 높을 수록 내부에 위치/ -값이 높을 수록 배너 밖에 위치
EX left: +20px;left: -20px;
*/

.owl-prev {left: -10px;}
.owl-next {right: -10px;}

.owl-prev i,
.owl-next i {
  font-size: 18px;
  font-size: 1.125rem;
color: var(--grey-sub-color);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/*네비 버튼 클릭 시 컬러효과*/

.owl-nav [class*='owl-']:hover,[class*='owl-']:focus {
  text-decoration: none;
 color: var(--grey-sub-color);
  background: rgba(0,0,0,0.7) !important; border:0px solid #ededed !important;
}

.owl-prev i:hover,i:focus,i:active,
.owl-next i:hover,i:focus,i:active {
  color: var(--grey-sub-color);
}




.owl-prev.disabled i:hover,
.owl-next.disabled i:hover 
  color: rgba(255,255,255,0.7);
}