.sec-banner { height: calc(100vh - 112px); }
.slick-dots { position: absolute; left: 0; top: 0; right:unset; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; width: auto; height: 100%; transform: translateX(-100%); }
.slick-dots li,
.slick-dots li button { margin: 0 0 0 -2px; padding: 0; width: 4px; height: 6rem;}
.slick-dots li button:before { content: ''; width: 100%; height: 100%; background-color: black;}
@media screen and (max-width: 768px) {    
    .sec-banner { height: 44.5vh;}    
}
@media screen and (min-width:768px) {
    .slick-dots { width: 3rem;}
}
@media screen and (min-width:1024px) {
    .sec-banner { height: calc(100vh - 105px); }
    .slick-dots { width: 4rem;}
}
@media screen and (min-width:1536px) {
    .sec-banner { height: calc(100vh - 112px); }
    .slick-dots { width: 6rem; }
}

@-webkit-keyframes btnAni {
    20% {
      background-color: rgba(0, 50, 129, 0.3);
    }
    100% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
      background-color: transparent;
    }
}
@keyframes btnAni {
    20% {
      background-color: rgba(0, 50, 129, 0.3);
    }
    100% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
      background-color: transparent;
    }
}
@-webkit-keyframes imgLoading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}
@keyframes imgLoading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}
@-webkit-keyframes slideLeftAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@keyframes slideLeftAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@-webkit-keyframes slideDownAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@keyframes slideDownAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@-webkit-keyframes slideUpAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@keyframes slideUpAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@-webkit-keyframes rotate {
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
}
@keyframes rotate {
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
}
@-webkit-keyframes aniSlideLeft {
    0% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}
@keyframes aniSlideLeft {
    0% {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}
@-webkit-keyframes aniSlideDown {
    0% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}
@keyframes aniSlideDown {
    0% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}
@-webkit-keyframes bannerScrollAnimation {
    0% {
      height: 0;
    }
    50% {
      height: 100%;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
}
@keyframes bannerScrollAnimation {
    0% {
      height: 0;
    }
    50% {
      height: 100%;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
}
@-webkit-keyframes scrollHorizontal {
    100% {
      -webkit-transform: translateX(-30px);
              transform: translateX(-30px);
      opacity: 0;
    }
}
@keyframes scrollHorizontal {
    100% {
      -webkit-transform: translateX(-30px);
              transform: translateX(-30px);
      opacity: 0;
    }
}
@-webkit-keyframes scrollVertical {
    100% {
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
      opacity: 0;
    }
}
@keyframes scrollVertical {
    100% {
      -webkit-transform: translateY(-20px);
              transform: translateY(-20px);
      opacity: 0;
    }
}
@-webkit-keyframes loadingAni {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-15%);
              transform: translateY(-15%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@keyframes loadingAni {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-15%);
              transform: translateY(-15%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@-webkit-keyframes textSlideRightAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@keyframes textSlideRightAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
}
@-webkit-keyframes textSlideDownAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@keyframes textSlideDownAnimation {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0px);
    }
}
@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}

/* Header */  
.fadeInDown {
    animation: 0.3s ease-in-out 0s normal none 1 running fadeInDown;
}
.scroll-up {
    transition: top 5s linear;
    position: fixed;
    animation:slide-down 0.7s;
    backdrop-filter: blur(3px);
}

/* Banner */
.home-banner-nav { width: 100%; box-shadow: inset 0 1px 0 #ffffff00;}
.home-banner-nav .slick-track { margin: 0; border-left: 1px solid #ffffff00; border-right: 1px solid #ffffff00; box-sizing: border-box; }
.home-banner-nav .slick-list { padding: 0 !important; }
.home-banner-nav .slick-slide .nav-items { color: #fff; border-top: 4px solid transparent; transition: 0.3s;}
.home-banner-nav .slick-slide:not(:last-child) .nav-items { border-right: 1px solid #ffffff00;}
.home-banner-nav .slick-slide:hover .nav-items,
.home-banner-nav .slick-slide.slick-current .nav-items { background-color: #ffffffe6; color: #000; border-top-color: #009400;}

/* Product */
.swiper { padding-bottom: 1rem;}
.swiper-slide { display: flex; justify-content: center; }

/* Case */
.case-show .single-item { width: 100%; overflow: hidden;}
.case-show .single-item a .overlay { opacity: 0; transform: scale(1.5); transition: 0.3s; }
.case-show .single-item a:hover .overlay { opacity: 1; transform: scale(1); }
.case-show .slick-slide,
.case-show .slick-list { height: auto !important; }

.single-item .slick-arrow { left: 50%; top: unset; bottom: 0; }
.single-item .slick-prev { transform: translate(-100%, 0%);}
.single-item .slick-next { transform: translate(0%, 0%);}