@charset "utf-8";
@import "index.css";

/*----------------------------------------------
# 1、Base Style
# 2、Header Style
# 3、Title Style
# 4、List Style
# 5、Content Body
# 6、Swiper Banner
# 7、Owl Carousel
# 8、Footer
# 9、Other
----------------------------------------------*/

:root {
  --bs-base: rgba(28,28,28, 1.0);
  --bs-base-dark: rgba(55,120,85, 1.0);
  --bs-base-rgb: 28,28,28;
  --bs-base-10: rgba(28,28,28, 0.1);
  --bs-base-25: rgba(28,28,28, 0.25);
  --bs-base-50: rgba(28,28,28, 0.5);
  --bs-base-75: rgba(28,28,28, 0.75);
  --bs-red: rgba(192,33,64, 1.0);
  --bs-red-rgb: 192,33,64;
  --bs-red-10: rgba(192,33,64, 0.10);
  --bs-red-25: rgba(192,33,64, 0.25);
  --bs-red-50: rgba(192,33,64, 0.50);
  --bs-red-75: rgba(192,33,64, 0.75);

  --bs-bright: rgba(14,75,153, 1.0);
  --bs-bright-rgb: 14,75,153;
  --bs-bright-10: rgba(14,75,153, 0.10);
  --bs-bright-25: rgba(14,75,153, 0.25);
  --bs-bright-50: rgba(14,75,153, 0.50);
  --bs-bright-75: rgba(14,75,153, 0.75);

  --bs-blue: rgba(14,75,153,1);
  --bs-blue-rgb: 14,75,153;

  --bs-radius: 0.125rem;
  --bs-white-10: rgba(255, 255, 255, 0.1);
  --bs-white-25: rgba(255, 255, 255, 0.25);
  --bs-white-50: rgba(255, 255, 255, 0.5);
  --bs-white-75: rgba(255, 255, 255, 0.75);
  --bs-yellow: rgba(252,218,12,1.0);
  --bs-yellow-rgb: 252,218,12;

  --bs-body-font-size: 1rem;
  --bs-body-font-weight:400;
  --bs-body-color: rgba(28,28,28, 1.0);
  --bs-body-bg: rgba(255,255,255,1.0);
}

.text-base, .text-base a, a.text-base {color: var(--bs-base);}
.text-bright, .text-bright a, a.text-bright {color: var(--bs-bright);}
.text-bright a:hover, a.text-bright:hover {color: var(--bs-blue);}
.text-blue, .text-blue a, a.text-blue {color:var(--bs-blue);}
.text-yellow, .text-yellow a, a.text-yellow {color:var(--bs-yellow);}
.text-white, .text-white a, a.text-white {color:var(--bs-white);}
.t-indent-2 {text-indent: 2rem;}

a {color: var(--bs-base); text-decoration: none;}
a:hover {color: var(--bs-bright);}
em {font-style: normal;}

.fs-title {font-size: 1.125rem; font-weight: 700;}
.fs-sm, .fs-sm a {font-size: 0.875rem;}
.display-sm {
  font-size: calc(1rem + 0.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-sm {
    font-size: 1.5rem;
  }
}

.bg-base {background-color: var(--bs-base);}
.bg-base-10 {background-color: rgba(var(--bs-base-rgb), 0.10)!important;}
.bg-base-25 {background-color: rgba(var(--bs-base-rgb), 0.25)!important;}
.bg-base-75 {background-color: rgba(var(--bs-base-rgb), 0.75)!important;}

.bg-blue {background-color: var(--bs-blue);}
.bg-blue-10 {background-color: rgba(var(--bs-blue-rgb), 0.10)!important;}
.bg-blue-25 {background-color: rgba(var(--bs-blue-rgb), 0.25)!important;}
.bg-blue-75 {background-color: rgba(var(--bs-blue-rgb), 0.75)!important;}

.bg-white-10 {background-color: rgba(var(--bs-white-rgb), 0.10)!important;}
.bg-white-25 {background-color: rgba(var(--bs-white-rgb), 0.25)!important;}
.bg-white-50 {background-color: rgba(var(--bs-white-rgb), 0.50)!important;}
.bg-white-75 {background-color: rgba(var(--bs-white-rgb), 0.75)!important;}

.bg-bright {background-color: rgba(var(--bs-bright-rgb), 1)!important;}
.bg-bright-10 {background-color: rgba(var(--bs-bright-rgb), 0.10)!important;}
.bg-bright-25 {background-color: rgba(var(--bs-bright-rgb), 0.25)!important;}
.bg-bright-50 {background-color: rgba(var(--bs-bright-rgb), 0.50)!important;}
.bg-bright-75 {background-color: rgba(var(--bs-bright-rgb), 0.75)!important;}

.bg-red {background-color: rgba(var(--bs-red-rgb), 1)!important;}
.bg-red-10 {background-color: rgba(var(--bs-red-rgb), 0.10)!important;}
.bg-red-25 {background-color: rgba(var(--bs-red-rgb), 0.25)!important;}
.bg-red-50 {background-color: rgba(var(--bs-red-rgb), 0.50)!important;}
.bg-red-75 {background-color: rgba(var(--bs-red-rgb), 0.75)!important;}

.bg-blue {background-color: var(--bs-blue);}

.bg-yellow {background-color: var(--bs-yellow);}

.bg-gray-100 {background-color: var(--bs-gray-100);}
.bg-gray-200 {background-color: var(--bs-gray-200);}
.bg-gray-300 {background-color: var(--bs-gray-300);}
.bg-gray-400 {background-color: var(--bs-gray-400);}
.bg-gray-500 {background-color: var(--bs-gray-500);}
.bg-gray-600 {background-color: var(--bs-gray-600);}
.bg-gray-700 {background-color: var(--bs-gray-700);}
.bg-gray-800 {background-color: var(--bs-gray-800);}
.bg-gray-900 {background-color: var(--bs-gray-900);}
.bg-gray-dark {background-color: var(--bs-gray-dark);}

.btn-base {color: var(--bs-base); background-color: var(--bs-base);}
.btn-base:hover {color: var(--bs-base-75); background-color: var(--bs-base-75);}
.btn-outline-base {color: var(--bs-base); border-color: var(--bs-base);}
.btn-outline-base:hover {color: var(--bs-white); background-color: var(--bs-base-25); border-color: var(--bs-base);}

.btn-bright {color: var(--bs-white); background-color: var(--bs-bright);}
.btn-bright:hover {color: var(--bs-white-75); background-color: var(--bs-bright-75);}
.btn-outline-bright {color: var(--bs-bright); border-color: var(--bs-bright);}
.btn-outline-bright:hover {color: var(--bs-white); background-color: var(--bs-bright-25); border-color: var(--bs-bright);}

.btn-blue {color: var(--bs-base); background-color: var(--bs-base);}
.btn-blue:hover {color: var(--bs-base-75); background-color: var(--bs-base-75);}
.btn-outline-blue {color: var(--bs-base); border-color: var(--bs-base);}
.btn-outline-blue:hover {color: var(--bs-white); background-color: var(--bs-base-25); border-color: var(--bs-base);}

.btn-yellow {color: var(--bs-yellow); background-color: var(--bs-yellow);}
.btn-yellow:hover {color: var(--bs-base-75); background-color: var(--bs-yellow-75);}
.btn-outline-yellow {color: var(--bs-yellow); border-color: var(--bs-yellow);}
.btn-outline-yellow:hover {color: var(--bs-white); background-color: var(--bs-yellow-25); border-color: var(--bs-yellow);}

.btn-white {color: var(--bs-base); background-color: var(--bs-white);}
.btn-white:hover {color: var(--bs-base-75); background-color: var(--bs-white-75);}
.btn-outline-white {color: var(--bs-white); border-color: var(--bs-white);}
.btn-outline-white:hover {color: var(--bs-white); background-color: var(--bs-white-25); border-color: var(--bs-white);}

.border-base {border-color: var(--bs-base)!important;}
.border-base-10 {border-color: var(--bs-base-10)!important;}
.border-base-25 {border-color: var(--bs-base-25)!important;}
.border-base-50 {border-color: var(--bs-base-50)!important;}
.border-base-75 {border-color: var(--bs-base-75)!important;}

.border-bright {border-color: var(--bs-bright)!important;}
.border-bright-10 {border-color: var(--bs-bright-10)!important;}
.border-bright-25 {border-color: var(--bs-bright-25)!important;}
.border-bright-50 {border-color: var(--bs-bright-50)!important;}
.border-bright-75 {border-color: var(--bs-bright-75)!important;}

.border-blue {border-color: var(--bs-blue)!important;}
.border-blue-10 {border-color: rgba(var(--bs-blue-rgb),0.10)!important;}
.border-blue-25 {border-color: rgba(var(--bs-blue-rgb),0.25)!important;}
.border-blue-50 {border-color: rgba(var(--bs-blue-rgb),0.50)!important;}
.border-blue-75 {border-color: rgba(var(--bs-blue-rgb),0.75)!important;}


.border-yellow {border-color: var(--bs-yellow)!important;}
.border-yellow-10 {border-color: var(--bs-yellow-10)!important;}
.border-yellow-25 {border-color: var(--bs-yellow-25)!important;}
.border-yellow-50 {border-color: var(--bs-yellow-50)!important;}
.border-yellow-75 {border-color: var(--bs-yellow-75)!important;}

.border-white-10 {border-color: var(--bs-white-10) !important;}
.border-white-25 {border-color: var(--bs-white-25) !important;}
.border-white-50 {border-color: var(--bs-white-50) !important;}
.border-white-75 {border-color: var(--bs-white-75) !important;}

.rounded-4 {
  border-radius: 0.4rem !important;
}
.rounded-5 {
  border-radius: 0.5rem !important;
}
/*Line Overflow*/

.line-clamp, .line-clamp li, .line-clamp1, .line-clamp2, .line-clamp3, .line-clamp4, .line-clamp-auto, .line-clamp-auto li, .art-title, .card-title {overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box;}
.line-clamp, .line-clamp li, .line-clamp-auto, .line-clamp-auto li .line-clamp1 {-webkit-line-clamp: 1;}
.line-clamp2 {-webkit-line-clamp: 2;}
.line-clamp3 {-webkit-line-clamp: 3;}
.line-clamp4 {-webkit-line-clamp: 4;}

.more-s2 a {border:1px solid var(--bs-base); font-size: 0.875rem; padding: 0.125rem 0.75rem; border-radius: 0.25rem; color: var(--bs-base); opacity: 0.75;}
.more-s2 a:hover {opacity: 1; background-color: var(--bs-base-10);}

/**Ratio2**/
.ratio img {object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.rat {position: relative; width: 100%;}
.rat::before {display: block; padding-top: var(--bs-aspect-rat); content: "";}
.rat img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.rat-1x1 {--bs-aspect-rat: 100%;}
.rat-4x3 {--bs-aspect-rat: 75%;}
.rat-3x4 {--bs-aspect-rat: 133.33333%;}
.rat-16x9 {--bs-aspect-rat: 56.25%;}

.rat-swiper {--bs-aspect-rat: 33.3333%;}
@media (max-width:991.98px) {
  .rat-swiper {--bs-aspect-rat: 45%;}
}

/* Animation */
a, button, i {
  -webkit-transition: all .3s ease-out 0s;
  -moz-transition: all .3s ease-out 0s;
  -ms-transition: all .3s ease-out 0s;
  -o-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
  text-decoration: none;
}

/* Icon */
.icon {height: 1.25rem; width: 1.25rem; line-height: 1.25rem; text-align: center; vertical-align: middle; display: inline-block;}
.icon-2x {height: 2rem; width: 2rem; line-height: 2rem;}

/* Button Bezier */
.theme-btn {font-size: 1rem; color: var(--bs-white); height: 3.5rem; line-height: 3.5rem; text-align: center; padding: 0 1.5rem; border-radius: 50rem; display: inline-block; background: var(--bs-bright); font-weight: 600; border: 0; outline: 0; cursor: pointer; position: relative; overflow: hidden;}
.theme-btn:hover{background: var(--bs-base); color:var(--bs-white-75)}

.img_flash_light {position: relative; overflow: hidden;}
.img_flash_light:before,
.theme-btn:before {content:""; width:40px; height:150px; opacity:0; background-color:#fff; position:absolute; left:-75px; top:-35px; transform:rotate(35deg); transition:all 1600ms cubic-bezier(0.19,1,0.22,1);}
.img_flash_light:hover:before,
.theme-btn:hover:before {left:120%;transition:all 1300ms cubic-bezier(0.19,1,0.22,1);opacity:.25}

.btn-bright-hover:hover {background-color: var(--bs-danger) !important;}
.btn-bright-hover:hover i {background: var(--bs-yellow)}
.btn-icon i {height:1.5rem; width:1.5rem; line-height:1.5rem; background-color:var(--bs-white); border-radius:50%; color:var(--bs-bright); margin-right:7px; text-align:center; vertical-align:middle;}

.active-mobi span {visibility: hidden; opacity: 0; transition: all 0.35s;}
.active-mobi:hover span {visibility: visible; opacity: 1;}


/*----------------------------------------------
# 2、Header Style
----------------------------------------------*/
/*Top Link Info*/
.drop-link {position: relative; display:block; z-index: 999;}
.drop-link .drop-title {cursor:pointer; height: 2rem; line-height:2rem; text-align: center; padding: 0 0.5rem; color:var(--bs-base); display: block;}
.drop-link:hover .drop-title {background:var(--bs-gray-200); color:var(--bs-base-dark);}
.drop-link .drop-item {position: absolute; top:2rem; right:0; display:none; z-index: -10;}
.drop-link .drop-title,.drop-link .drop-item a {min-width: 6rem;}

/* Header-Logo */
.logo-box .logo-img {width: 280px;height: 72px; background: url(../images/logo.png) no-repeat center center; background-size:cover; display: block; overflow: hidden; text-indent: -9999rem;}
.logo-txt span:not(:last-child)::after {content: ''; width: 0.35rem; height: 0.35rem; background-color: var(--bs-bright); border-radius: 100%; display: inline-block;margin:0 0.75rem; transform: translateY(-75%);}

@media (max-width:767.98px) {
  .logo-box .logo-img {width: 180px;height: 46px;}
}

/* Search Box */
.sch-key {height: calc(2rem - 2px); line-height: 2rem;}
.sch-form input, .sch-form button {border: none; outline: none;}
.sch-form {border: 1px solid var(--bs-bright); overflow: hidden;}
.sch-form input.inputText {padding:0.25rem 0.5rem; float: left; width: 10rem;}
.sch-form button.inputSub {background-color: var(--bs-bright); padding: 0.25rem 0.5rem; color: var(--bs-white);}

/* Menu Main */
@media (min-width:992px) {
  .menu-list ul {margin: 0; padding: 0; list-style: none;}
  .menu-main .menu-list li {display: inline-block;}
  .menu-main .menu-list > ul > li > a {color: var(--bs-white); padding:0 1rem; height: 4.5rem; line-height: 4.5rem; display: block; font-size: 1.125rem; position: relative; transition: all 0.5s;}
  .menu-main .menu-list .drop-menu > a {padding:0 2.5rem 0 1rem;}
  .menu-main .menu-list > ul > li.active > a,.menu-main .menu-list > ul > li > a:hover {background-color: var(--bs-white-10);}
  .menu-main .menu-list .drop-menu > a::before {content: '\f107'; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);}
  .menu-main .menu-list a::after {content: ''; width: 100%; height: 3px; border-radius: 10rem; background-color: var(--bs-white-75); position: absolute; left: 0; top: 100%; transform: scale(0,1) translateY(-5px);}
  .menu-main .menu-list > ul > li.active > a::after, .menu-main .menu-list > ul > li:hover > a::after {transform: scale(1,1) translateY(-5px); transition: all 0.5s;}
  
  .drop-menu {position: relative; z-index: 999;}
  .drop-menu .drop-nav {position:absolute; left: 0; top: 100%; margin: 0; padding: 0.5rem; list-style: none; visibility: hidden; opacity: 0; transform:scale(0.5,1) translateY(2rem);}
  .drop-menu .drop-nav .drop-item {display: block;}
  .drop-menu .drop-nav a {min-width: 8rem; text-align: center; color: var(--bs-base); display: block; padding: 0.5rem 1rem; white-space: nowrap;}
  .drop-menu .drop-nav a:hover {background: var(--bs-bright); color: var(--bs-white); transition: all 0.5s;}
  .drop-menu .drop-nav .drop-item:not(:first-of-type) {border-top:1px solid var(--bs-gray-200);}
  .drop-menu:hover .drop-nav {visibility: visible; opacity: 1; transform:scale(1,1) translateY(0); transition: all 0.3s;}

}
@media (max-width:991.98px) {
  .stricky-fixed {position: fixed; left: 0; top: 0; right: 0; z-index: 999; background-color: var(--bs-white);}
  .menu-main {position:fixed; left:0; top:0; bottom:0; right: auto; padding: 2rem; z-index: 9999; transform: translateX(-100%); transition: all 0.35s; visibility: hidden;}
  .cross .menu-main {transform: translateX(0); visibility: visible;}
  .menu-main ul {margin: 0; padding: 0;}
  .menu-main li {list-style: none;}
  .menu-main li a {color: var(--bs-white);}

  .menu-main .menu-list > ul > li {line-height: 3rem; align-items: center;}

  .drop-menu > a {height: 2rem; line-height: 2rem;}
  .drop-menu button {border: 1px solid var(--bs-white); width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: 0.25rem; background-color: transparent; margin-left: 1rem;}
  .drop-menu button i {color: var(--bs-white);}
  .drop-menu button.expanded i {transform:rotateX(180deg)}

  .drop-menu .drop-nav {display: none;}
  .drop-menu .drop-nav .drop-item {padding:0 1rem; text-align: center;}
  .drop-menu .drop-nav .drop-item:not(:first-child) {border-top: 1px solid var(--bs-gray-500);}
  .drop-menu .drop-nav .drop-item a {color: var(--bs-base);}

	.expander {width: 2rem; height: 2rem; padding:5px; border:1px solid var(--bs-base); border-radius: 5px; }
	.expander span {width:20px; height: 2px; background: var(--bs-base); display: block; position: relative; top:0.55rem; left:0; border-radius: 1px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
	.expander span::before,.expander span::after {content:''; width:20px; height: 2px; background: var(--bs-base); position: absolute; left:0;  border-radius: 1px; display: block; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
	.expander span::before {top:-0.5rem;}
	.expander span::after {bottom:-0.5rem;}
	.expander:hover {cursor: pointer;}
	.cross .expander span {background-color: transparent;}
	.cross .expander span::before {transform: rotate(45deg); top:0;}
	.cross .expander span::after {transform: rotate(-45deg); bottom:0;}

  .lap {position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: var(--bs-base-50); z-index: 9991; visibility: hidden; opacity: 0; transition: all 0.5s;}
  .cross .lap {visibility: visible; opacity: 1;}

  .logo-fix {box-shadow: 0 0 10px var(--bs-gray-400);}
}
@media (min-width:576px) and (max-width:991.98px) {
  .logo-fix.container {min-width: 100% !important;}
}

/*----------------------------------------------
# 3、Title Style
----------------------------------------------*/
/* Product Nav */
.pp-classnav li {margin: 0.5rem 1rem; border-bottom: 2px solid var(--bs-bright); padding:0.5rem 0; font-size: 1rem;}
.pp-classnav li.active a {color: var(--bs-bright); font-weight: 700;}
.pp-classnav li:not(:first-child) {border-color: transparent; transition: all 0.5s;}
.pp-classnav li:hover {border-color: var(--bs-bright);}

/* Nav-bars */
@media (max-width:991.98px) {
  .nav-bars {position: relative; width: 2rem; height: 2rem; z-index: 9;}
  .bar-icon {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid var(--bs-gray-500); border-radius: 0.35rem;}
  .nav-bars:hover .bar-icon > i {transform:rotateX(180deg); transition: all 0.5s;}
  .nav-bars .list-group {position: absolute; right: 0; top: 100%; white-space: nowrap; border: 1px solid var(--bs-gray-500); background-color: var(--bs-white); border-radius: 0.35rem; padding: 0.5rem; z-index: 99; visibility: hidden; opacity: 0; transform: translateY(1rem);}
  .nav-bars:hover .list-group {visibility: visible; opacity: 1; transition: all 0.5s; transform: translateY(0rem);}
}
@media (min-width:992px) {
  .nav-bars .bar-icon {display: none;}
  .nav-bars .list-group {flex-direction: row;}
  .nav-bars .list-group .list-group-item {border: 1px solid var(--bs-gray-500); border-radius: 0.25rem; margin-left: 0.5rem; padding:0 0.5rem}
  .nav-bars .list-group .list-group-item::before {content: '\f0da'; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); width: 1rem; height: 1rem; margin-right: 0.5rem; color: var(--bs-gray-500);}
}

/* Line Style */
.line-bottom, .line-bottom-fill {position: relative;}
.line-bottom-fill::after {content: ''; width: 100%; height: 1px; background-color: var(--bs-white-50); position: absolute; left: 0; bottom: 0;}
.line-base.line-bottom-fill::after {background-color: var(--bs-base);}
.line-bright.line-bottom-fill::after {background-color: var(--bs-bright);}


.line-bottom::after {content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; z-index: 9;}
.line-bottom::before {content: ''; width: 25%; height: 2px; position: absolute; left: 0; bottom: 0; z-index: 99;}
.line-base.line-bottom::after {background-color: var(--bs-base-25);}
.line-base.line-bottom::before {background-color: var(--bs-base);}
.line-bright.line-bottom::after {background-color: var(--bs-bright-25);}
.line-bright.line-bottom::before {background-color: var(--bs-bright);}
.line-white.line-bottom::after {background-color: var(--bs-white-25);}
.line-white.line-bottom::before {background-color: var(--bs-white);}

/* Title More button */
.tit-more-btn {background-color: var(--bs-yellow); padding:0.75rem 1.5rem; border-radius: 0.35rem; color: var(--bs-base) !important; transition: all 0.5s;}
.tit-more-btn i {transition: all 0.75s;}
.tit-more-btn:hover {background-color: var(--bs-red); color: var(--bs-white) !important;}
.tit-more-btn:hover i {color: var(--bs-yellow);}

/*----------------------------------------------
# 4、List Style
----------------------------------------------*/

/* List Art */
.list-art .list-art-item {height: 3rem; line-height: 3rem; display: flex; align-items: center;}
.list-art .list-art-item:not(:first-child) {border-top:1px solid var(--bs-gray-200)}
.list-icon-arrow .list-art-item::before {content: ''; border: 0.35rem solid var(--bs-gray-300); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; margin-right: 0.25rem; flex-shrink: 0;}
.list-icon-dot .list-art-item::before {content: ''; width:0.35rem; height: 0.35rem; background-color: var(--bs-gray-300);margin-right: 0.5rem; flex-shrink: 0;}

@media (min-width:768px) {
  .list-md-cols-2 {display: flex; flex-wrap: wrap; margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x));}
  .list-md-cols-2 > * {padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5);}
  .list-art.list-md-cols-2 .list-art-item {height: 2rem; line-height: 2rem; width: 50% !important; display: inline-block !important; display: flex !important;}
  .list-art.list-md-cols-2 .list-art-item:not(:first-child) {border:0;}
}

@media (min-width:992px) {
  .list-lg-cols-2 {display: flex; flex-wrap: wrap; margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x));}
  .list-lg-cols-2 > * {padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5);}
  .list-art.list-lg-cols-2 .list-art-item {height: 2rem; line-height: 2rem; width: 50% !important; display: inline-block !important; display: flex !important;}
  .list-art.list-lg-cols-2 .list-art-item:not(:first-child) {border:0;}
}

/* Media Style */
.media-grid {display: flex;}
.media-grid .media-pic {flex-shrink: 0 !important;}
.media-grid .media-wrapper {}

.media-grid .mw-md {width: 4rem;}
.media-grid .mw-lg {width: 6rem;}

/* Page List */
.pagelist {margin: 0 -1.5rem; padding: 1rem 0.5rem; background: var(--bs-ff);}
.pagelist a {color: var(--bs-secondary);}
@media (min-width:768px) {
  .pagelist li:nth-child(1) {border-right: 1px solid var(--bs-e); }
}


/* Pic Title Overlay */
.pp-overlay img {transform: scale(1,1); opacity: 1; transition: all 0.35s;}
.pp-overlay:hover img {transform: scale(1.1,1.1); opacity: 0.9;}
.pp-overlay .pp-cname {height: 4rem; width: 4rem; line-height: 1.5rem;}
.pp-overlay .pp-title {height: 3rem; line-height: 1.5rem;}
a:hover .pp-overlay .bg-bright-75 {background-color: rgba(var(--bs-bright-rgb), 1)!important; transition: all 0.35s;}


/* WMS List */
.wms-bg {position: absolute; height: 100%; width: 68%; top: 0; right: 0;}
.wms-box {position: relative; z-index: 1;}
@media (max-width: 991.98px) {
  .wms-bg {position: absolute; height: 100%; width: 100% !important; top: 0; right: 0;}
  .list-wms {margin-top: 1.5rem; padding: 0;}
  .wms-box .text-start .text-bright {color: var(--bs-white);}
  .wms-box .text-start .text-secondary {color: var(--bs-white-75) !important;}
}
.list-wms .wms-icon {width: calc(5rem + 2px); height: calc(5rem + 2px); padding: 0.5rem; text-align: center;}
.list-wms .wms-icon span {width: 4rem; height: 4rem;}
.list-wms .wms-icon i {font-size: 2.5rem; line-height: 4rem;}
.list-wms .wms-txt .wms-text {color: rgba(var(--bs-white-rgb),0.9)} 


/* News Tabs */
.news-tabs .nav {border-bottom: 2px solid var(--bs-bright);}
.news-tabs .nav-link {border-radius: 0; background-color: var(--bs-gray-200); height: 3rem; line-height: 3rem; padding: 0 1.5rem; font-size: 1.1rem; color: var(--bs-base);}
.news-tabs .nav-link.active {background-color: var(--bs-bright) !important;}
.news-tabs .nav-item + .nav-item {margin-left: 1px;}
.news-tabs .card .card-body {padding:1rem 0.5rem;}
.news-tabs .card .card-title {overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box;-webkit-line-clamp: 2;}
@media (min-width:768px) {
  .news-tabs .card .card-body {padding:1rem 0.5rem 0 0.5rem;}
}
@media (max-width:767.98px) {
  .news-tabs .nav-link {padding: 0 1rem; font-size: 1rem;}
}


/* Faq List */
.faq-list {width: 100%;}
.faq-list .faq-item .faq-button {border: 0; background-color: transparent; font-size: 1.2rem; font-weight: 900; width: 100%; text-align: left; height: 3rem; line-height: 3rem; padding: 0;}
.faq-list .faq-item .faq-button::after {content: ''; width: 100%; height: 1px; background-color: var(--bs-gray-400); display: block;}
.faq-list .faq-item .faq-button:not(.collapsed)::after,
.faq-list .faq-item:last-child .faq-button::after {visibility: hidden; opacity: 0;}

.list-flink {margin: 0 -0.5rem}
.list-flink li {padding: 0 0.5rem}

/* Nav_Sidebar */
@media (min-width:992px) {
  .nav_sidebar li {
    list-style: none;
    background: #fff;
    margin-bottom: 12px;
    line-height: 1;
    height: 60px;
    line-height: 60px;
    padding: 0 25px;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
  }
  .nav_sidebar li a {
    font-size: 18px;
    color: var(--bs-base);
    line-height: 1;
    font-weight: 600;
    font-family: "Saira Semi Condensed",sans-serif;
  }
  .nav_sidebar li a i {
    font-size: 16px;
    color: var(--bs-secondary);
    float: right;
    margin-top: 23px;
  }
  .nav_sidebar li:hover,
  .nav_sidebar li.active {
    background: var(--bs-bright);
  }
  .nav_sidebar li:hover a,
  .nav_sidebar li:hover a i,
  .nav_sidebar li.active a,
  .nav_sidebar li.active a i {
    color: var(--bs-white);
  }
}
@media (max-width:991.98px) {
  .nav_sidebar {display: flex; flex-wrap: wrap; margin:0 -0.5rem;}
  .nav_sidebar i {display: none; visibility: hidden;}
  .nav_sidebar li {border: 1px solid var(--bs-gray-300); background-color: var(--bs-white); padding:0.5rem 0; margin:0.5rem 0.5rem; border-radius: 0.35rem;}
  .nav_sidebar a {padding:0.5rem 1rem;}
}

/* Service Sidebar */
.service_sidebar a {
  font-size: 18px;
  color: #fff;
  height: 60px;
  line-height: 60px;
  background: var(--bs-bright);
  display: inline-block;
  margin-bottom: 15px;
  font-family: "Saira Semi Condensed",sans-serif;
  position: relative;
  width: 100%;
  padding-left: 80px;
}
.service_sidebar a i {
  height: 60px;
  width: 60px;
  background: var(--bs-white-25);
  color: #fff;
  text-align: center;
  line-height: 60px;
  margin-right: 20px;
  font-size: 25px;
  vertical-align: middle;
  top: 0;
  position: absolute;
  left: 0;
}

/* Buscard Sidebar */
.buscard_info-text h5 {
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 5px;
}



/*----------------------------------------------
# 5、Content Body
----------------------------------------------*/
.content img,
.content-body img {max-width: 100%;}
.content h2,.content-body h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--bs-bright);
  text-indent: 1rem;
  position: relative;
  margin-bottom: 1rem;
}
.content h2::before,.content-body h2::before {
  content: '';
  width: 0.35rem;
  height: 100%;
  background-color: var(--bs-bright);
  border-radius: 0.35rem;
  position: absolute;
  left: 0;
}

.content h3,.content-body h3 {
  font-size: 1.125rem;
  font-weight: 900;
}
.ser-faq {
  text-indent: 2rem !important;
}
.ser-faq::before {
  content: '';
  width: 1.5rem !important;
  height: 100% !important;
  background-color: transparent !important;
  background: url('../images/icon-faq.png') no-repeat center center;
  background-size: cover;
  display: block;
  position: absolute;
}

/*----------------------------------------------
# 6、Swiper Banner
----------------------------------------------*/
.swiper-banner {position: relative; z-index: 1; overflow: hidden;}
.swiper-info {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,-3rem); z-index: 2;}
.swiper-info .swiper-button-prev, .swiper-info .swiper-button-next {width: 3rem; height: 3rem; background-color: var(--bs-bright); border-radius: 0.5rem; opacity: 0.5; transition: all 0.35s;}
.swiper-info .swiper-button-prev {right: 3.5rem !important; left: auto;}
.swiper-info .swiper-button-next {right: 0 !important;}
.swiper-info .swiper-button-prev:hover, .swiper-info .swiper-button-next:hover {opacity: 1;}
.swiper-info .swiper-button-prev::after, .swiper-info .swiper-button-next::after {font-size: 2rem; color: var(--bs-white);}
.swiper-info .swiper-pagination {text-align: left; top: 50%; transform: translateY(-50%);}
.swiper-info .swiper-pagination-bullet {
  --swiper-pagination-color: var(--bs-bright);
  --swiper-pagination-bullet-width: 0.65rem;
  --swiper-pagination-bullet-size: 0.65rem;
  --swiper-pagination-bullet-inactive-color: var(--bs-bright);
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}
.swiper-pagination-bullet-active {width: 2rem; border-radius: 50rem;}
@media (max-width:767.98px) {
  .swiper-info .swiper-button-prev, .swiper-info .swiper-button-next {display: none; visibility: hidden;}
  .swiper-info {transform: translate(-50%,-1.5rem);}
  .swiper-info .swiper-pagination {text-align: center;}
}

/* Class Banner */
.class-banner-body {width: 100%; height: 24rem;}
.bg-overlay {background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1;}
.bg-overlay:before {position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; z-index: -1;}
.bg-bright.bg-overlay:before {background: var(--bs-bright-75);}
.bg-base.bg-overlay:before {background: var(--bs-base-75);}
.bg-white.bg-overlay:before {background: var(--bs-white-75);}
.bg-white-50.bg-overlay:before {background: var(--bs-white-50);}


/*----------------------------------------------
# 7、Owl Carousel
----------------------------------------------*/
.factory .card {border: 10px solid var(--bs-white-10); background-color: transparent;}
.factory .card .card-title a {color: var(--bs-blue);}
.factory .card .card-title a:hover {color: var(--bs-bright);}
.factory .card-img-overlay .bg-white-75 {transition: all 0.5s;}
.factory .card-img-overlay:hover .bg-white-75 {background-color: var(--bs-white) !important;}
@media (max-width:767.98px) {
  .factory .tit .text-end {text-align: center !important;}
}
@media (min-width:1200px) {
  .owl-factory .owl-nav {position:absolute; height:2.6rem; width:calc(100% + 6rem); top:50%; left:50%; transform:translate(-50%,-50%); overflow: hidden; z-index: -1;}
  .owl-factory .owl-nav .owl-prev span, .owl-factory .owl-nav .owl-next span {width:2.6rem; height:2.6rem; border-radius: 0.35rem; display: block; border:1px solid var(--bs-white-50); color: var(--bs-white); font-size: 2.6rem; line-height: 2rem; background-color: var(--bs-white-10);}
  .owl-factory .owl-nav .owl-prev {float:left;}
  .owl-factory .owl-nav .owl-next {float:right;}
  .owl-factory .owl-nav .owl-prev:hover span,.owl-factory .owl-nav .owl-next:hover span {background-color: var(--bs-white-75); color: var(--bs-blue);}
}
@media (max-width:1199.98px) {
  .owl-factory .owl-nav {margin-top: 2rem; display: flex; justify-content: space-between;}
  .owl-factory .owl-nav button {flex: 1 0 0%;}
  .owl-factory .owl-nav button span {padding:0 3rem; font-size: 2rem; line-height: 2rem; background-color: var(--bs-bright); color: var(--bs-white);}
  .owl-factory .owl-nav button.owl-prev {text-align: right;}
  .owl-factory .owl-nav button.owl-next {text-align: left; transform: translateX(1px);}
}

.owl-craft .owl-dots {text-align: center; margin-top: 2rem;}
.owl-craft .owl-dot span {width: 0.75rem; height: 0.75rem; border-radius: 50rem; background-color: rgba(var(--bs-base-rgb),0.5); display: block; transition: all 0.35s;}
.owl-craft .owl-dot.active span {background-color: var(--bs-bright); width: 1.5rem;}
.owl-craft .owl-dot + .owl-dot {margin-left: 0.5rem;}
.craft-body {height: 12rem; line-height: 1.5rem; overflow: hidden;}

@media (min-width:1200px) {
  .owl-person .owl-nav {position:absolute; height:2.6rem; width:calc(100% + 6rem); top:50%; left:50%; transform:translate(-50%,-50%); overflow: hidden; visibility: hidden; z-index: -1;}
  .owl-person:hover .owl-nav {visibility:visible}
  .owl-person .owl-nav .owl-prev span, .owl-person .owl-nav .owl-next span {width:2.6rem; height:2.6rem; border-radius: 100%; display: block; border:1px solid var(--bs-gray-200); font-size: 2rem; line-height: 2.4rem; transform: scale(0.1,0.1); visibility: hidden;}
  .owl-person .owl-nav .owl-prev {float:left;}
  .owl-person .owl-nav .owl-next {float:right;}
  .owl-person:hover .owl-nav .owl-prev span, .owl-person:hover .owl-nav .owl-next span {transform: scale(1,1);transition: all .3s; visibility: visible;}
  .owl-person .owl-nav .owl-prev:hover span,.owl-person .owl-nav .owl-next:hover span {background-color: var(--bs-base); color: var(--bs-white);}
  }
  @media (max-width:1199.98px) {
    .owl-person .owl-nav {margin-top: 1rem; display: flex; justify-content: space-between;}
    .owl-person .owl-nav button {flex: 1 0 0%;}
    .owl-person .owl-nav button span {padding: 0.25rem 3rem; background-color: var(--bs-base); color: var(--bs-white);}
    .owl-person .owl-nav button.owl-prev {text-align: right;}
    .owl-person .owl-nav button.owl-next {text-align: left; transform: translateX(1px);}
  }

/*----------------------------------------------
# 8、Footer
----------------------------------------------*/
#bottom {display: none;}
.footer-links > li > a {padding: 0 1.5rem; font-size: 0.875rem; line-height: 1rem; display: block;}
.footer-links li:not(:first-child) a {border-left: 1px solid var(--bs-white-25);}
.foot-body .foot-logo {width: 50%;}
.foot-body .foot-ewm .ewm-img {width: 8rem; display: block; overflow: hidden;}
.kf_bottom {height: 3.6rem; z-index: 995; border-top: 1px solid var(--bs-white-50);}
.kf_bottom a:hover {color: var(--bs-white);}

@media (min-width:576px) and (max-width:991.98px) {
  .foot-body > .col:nth-of-type(n+3) {border-top:1px solid var(--bs-white-25); padding-top:2rem;}
}

@media (max-width:575.98px) {
  .foot-body .foot-logo {width: 100%;}
  .foot-body .foot-logo .logo-img {width: 50%;}
  .foot-body .foot-logo {display: flex; justify-content: center;}
  .foot-body .foot-card {border: 1px solid var(--bs-white-50); padding: 1.5rem;}
  .foot-body > .col:nth-of-type(3) {text-align: center;}
  .foot-body .foot-ewm.justify-content-end {justify-content: center !important;}
}

@media (max-width:767.98px) {
  #bottom {display: block; position: fixed; left: 0; bottom: 0; right: 0;}
  .footer {margin-bottom: 3.6rem;}
  .foot-body > .col:first-child .border-end {border-color: transparent !important;}
}

/*----------------------------------------------
# 9、Other
----------------------------------------------*/
/* Message */
.msg-name, .msg-mycall, .msg-class, .msg-smalltext, .nice-select {width: 100%; height: 3rem; line-height: 3rem; padding: 0 20px; border: 1px solid #fff; border-radius: 3px; outline: none;}
.msg-class option {width: 100%; height: 60px; padding: 0 20px; line-height: 60px;}
.msg-smalltext {height: 6rem; line-height: 2rem; padding: 1rem;}
.msg-btn {width:100%; padding:1rem 0; background-color: var(--bs-yellow); color: var(--bs-dark); outline: none; border:none; border-radius: 0.35rem; font-size: 1rem; transition: all 0.35s; font-weight: 700;}
.msg-btn:hover {background-color: var(--bs-red); color: var(--bs-white);}

/* Union */
.union .bg-gray-200 {z-index: -2; height: 10rem;}
.union .bg-bright {z-index: -1; margin-right: 0;}
@media (min-width:1400px) {
  .union .bg-bright {margin-right: calc((100vw - 1320px) / 4)}
}
@media (max-width:575.98px) {
  .union .text-end {text-align: center !important; margin-bottom: 2rem;}
}

/* Union Grid Border */
.grid-border-inside .col {padding-top: 0.5rem; padding-bottom: 0.5rem; border-right: 1px solid var(--bs-white-50); border-bottom: 1px solid var(--bs-white-50);}
.grid-border-inside .col:nth-of-type(3n) {border-right-color: transparent;}
.grid-border-inside .col:nth-of-type(n+4) {border-bottom-color: transparent;}

/* play-btn */
.ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-md{
  display: block;
  height: 67px;
  width: 67px;
  line-height: 67px;
  margin: 0;
}
.ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-md i.fa-play{ 
  font-size: 2rem;
}
i.fa-play{ padding-left: 5px; line-height: 67px;}

.ttm-play-icon-btn .ttm-play-icon-animation{
  position: relative;
  display: inline-block;
}
.ttm-play-icon-btn .ttm-play-icon-animation .ttm-icon { margin-bottom: 0; }
.ttm-play-icon-btn .ttm-play-icon-animation:after, .ttm-play-icon-btn .ttm-play-icon-animation:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}
.ttm-play-icon-btn .ttm-play-icon-animation:after{
  z-index: 1;
  width: calc(100% * 1.3 );
  height: calc(100% * 1.3 );
  opacity: .3;
  background-color: #fff;
}
.ttm-play-icon-btn .ttm-play-icon-animation:before {
  width: calc(100% * 0.1 );
  height: calc(100% * 0.1 );
  opacity: .5;
  background-color: #fff;
}
.ttm-bgcolor-skincolor .ttm-play-icon-btn .ttm-play-icon-animation:after { opacity: .1; }
.ttm-bgcolor-skincolor .ttm-play-icon-btn .ttm-play-icon-animation:before {opacity: .3;}

.ttm-play-icon-btn:hover .ttm-play-icon-animation:after, 
.ttm-play-icon-btn:hover .ttm-play-icon-animation:before{
  cursor: pointer;
  -webkit-animation:sep-anim 1.05s infinite;
  -moz-animation:sep-anim 1.05s infinite;
  -ms-animation:sep-anim 1.05s infinite;
  -o-animation:sep-anim 1.05s infinite;
  animation:sep-anim 1.05s infinite;
}
@-webkit-keyframes sep-anim{ 100% { width:200%;height:200%;opacity:0 } }
@keyframes sep-anim{ 100% { width:200%;height:200%;opacity:0 } }

/* play-btn style1*/
.ttm-play-icon-btn.style1 {
  text-align: center;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/*----------------------------------------------
# Product Channel
----------------------------------------------*/
/* Product Section */
.p_section .card-body {padding-bottom: 0.5rem; transition: all 0.35s; background-color: var(--bs-gray-100);}
.p_section .card:hover .card-body {background-color: var(--bs-bright);}
.p_section .card:hover .card-body .card-title a {color: var(--bs-white);}
.p_section .card-title {font-size: 1.1rem; line-height: 1.6rem; -webkit-line-clamp: 2;}

/* P_header */
.p_header .p_media {width: 20rem;}
.p_header .p_wrapper {width: 100%;}
@media (max-width:1199.98px) {
  .p_header .p_media {width: 16rem;}
  .kf_btn .btn i {display: none;}
}
@media (max-width:767.98px) {
  .p_header {flex-wrap: wrap;}
  .p_header .p_media {width: 100%; margin-bottom: 1.5rem;}
  .kf_btn .btn {font-size: 0.875rem;}
}

/* product body */
.p_tab_nav {font-size: 1.125rem; border-bottom: 2px solid var(--bs-bright);}
.p_tab_nav-tit {padding: 0 2rem; line-height: 3.2rem; background-color: var(--bs-light); border-right: 1px solid var(--bs-gray-300);}
.p_tab_nav-tit.active {color: var(--bs-white); background-color: var(--bs-bright);}
.p_info-type {min-width:5rem; color: var(--bs-secondary);}
.p_body img {max-width: 100%;}


/*----------------------------------------------
# 
----------------------------------------------*/
/* Contact Form */
.contact__form {
  padding: 0 60px;
}
.contact__item {
  width: 100%;
}
.contact__input {width:100%; border:1px solid transparent; height:60px; line-height:60px; padding:0 20px; font-size:15px; background-color: var(--bs-white);border-radius:3px; margin-bottom:20px; outline: none;}
.contact__input::placeholder,
.contact__input.txt-area::placeholder {color:var(--bs-gray-400); font-size:15px; font-weight:400}
.contact__input:focus {border-color:transparent}
.contact__input.txt-area {height:220px;padding:20px;resize:none;line-height:1;margin-bottom:15px;}

/* Faq Content */
.faq-content .accordion-button::after {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
  width: 20px;
  height: 20px;
  margin-left: auto;
  content: "\f067";
  background-color: var(--bs-yellow);
  color: #000;
  background-image: none;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 12px;
}
.faq-content .accordion-button:not(.collapsed) {background:transparent; box-shadow: none; border-bottom: 1px solid var(--bs-gray-300);}
.faq-content .accordion-button:not(.collapsed)::after {
  content: "\f068";
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
  color: var(--bs-white);
  background-color: var(--bs-danger);
}
.faq-content .accordion-item {border: 0; border-bottom:1px solid var(--bs-bright)}
.faq-content .accordion-button:focus{z-index:3;border-color:none;outline:0;box-shadow:none}
.faq-content .accordion-item:last-child{border-bottom:0}
.faq-content .accordion-button{font-size:18px; font-weight:600; padding:30px 0}
.faq-content .accordion-body {padding:10px 0 30px 0; font-weight:400}
.faq-content .accordion-body p {margin:0; color:var(--bs-secondary)}

/*----------------------------------------------
# 
----------------------------------------------*/