/* ============================================
   foreignTradeBird - Main Stylesheet
   Compiled from old site LESS
   ============================================ */

/* --- Variables (compiled) --- */
/* @redc: #ee7907  @bluec: #ee7907  @yellowc: #fdda04 */

/* --- Responsive container --- */
@media screen and (max-width: 1920px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1440px;
  }
}
@media screen and (max-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1440px;
  }
}
@media screen and (max-width: 1366px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1200px;
  }
}

/* --- Utility --- */
.w100m0autop0 { width: 100%; margin: 0 auto; padding: 0; }
.w100m0auto { width: 100%; margin: 0 auto; }

/* --- Global --- */
.carousel .carousel-inner .carousel-item { position: relative; }
.carousel .carousel-inner .carousel-item .carousel-caption {
  position: absolute; left: 20%; top: 50%; transform: translateY(-50%);
  display: flex; align-self: center;
}
.carousel .carousel-inner .carousel-item .carousel-caption h3 { font-size: 64px; }
.carousel .carousel-inner .carousel-item .carousel-caption p { font-size: 16px; }
.carousel .carousel-inner .carousel-item .imgactive {
  transition: 1s 2.7s; transform: perspective(1000px) translate3d(0, 0, 110px);
}
.carousel .carousel-inner .carousel-item.active .imgactive {
  transition: 3s 0s; transform: perspective(1000px) translate3d(0, 0, 0px);
}
.carousel button.carousel-control-prev { background: transparent; border: none; }
.carousel button.carousel-control-next { background: transparent; border: none; }

/* --- Carousel: banner goes to top, navbar overlays --- */

.card { transition: all ease-out 0.5s; }
.card:hover { transform: translateY(-20px); cursor: pointer; }
.media { transition: all ease-out 0.5s; }
.media:hover { transform: translateY(-20px); cursor: pointer; }

/* --- Header --- */
header .navbar {
  height: 100px; background: rgba(0,0,0,0.3);
  width: 100%; margin: 0 auto; padding: 0px 10%;
}
@media screen and (max-width: 768px) {
  header .navbar { height: 50px; background: rgba(255,255,255,0.5); }
}
header .navbar .navbar-brand > img[src*='logo.png'] { display: none; }
header .navbar .navbar-brand > img[src*='wlogo.png'] { display: block; }
@media screen and (max-width: 768px) {
  header .navbar .navbar-brand img { max-width: 160px; }
}
header .navbar .navbar-collapse .navbar-nav .nav-item {
  margin: 0 auto; padding: 0 15px; border-bottom: transparent solid 2px;
}
header .navbar .navbar-collapse .navbar-nav .nav-item.active { border-bottom: #ee7907 solid 2px; }
header .navbar .navbar-collapse .navbar-nav .nav-item:hover { border-bottom: #ee7907 solid 2px; }
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link { color: #ffffff; text-decoration: none; }
header .navbar .navbar-collapse .navbar-text { margin-left: 20px; }
header .navbar .navbar-collapse .navbar-text ul { width: 100%; margin: 0 auto; padding: 0; display: flex; flex-direction: row; justify-content: flex-start; }
header .navbar .navbar-collapse .navbar-text ul li { list-style-type: none; margin-right: 4px; }
header .navbar .navbar-collapse .navbar-text ul li a img { border: rgba(255,255,255,0.1) solid 1px; vertical-align: bottom; margin-top: 5px; }
header .navbar .navbar-collapse .navbar-text ul li i { color: #ffffff; }
header .navbar .navbar-collapse .navbar-text ul li form { position: relative; }
header .navbar .navbar-collapse .navbar-text ul li form input { width: 100%; }
header .navbar .navbar-collapse .navbar-text ul li form button { position: absolute; right: 0px; border: transparent; }
header .navbar .navbar-collapse .navbar-text ul li form button:hover { background: transparent; }
header .navbar .navbar-collapse .navbar-text ul li form button i { color: #333333; }
@media screen and (max-width: 768px) {
  header .navbar .navbar-collapse { background: #333333; }
}
header .navbar .navbar-toggler { background: #333333; }
@media screen and (max-width: 768px) {
  header .navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
}

/* Header scrolled state */
header .navbar.bg-light {
  height: 80px; background: rgba(255,255,255,1) !important; box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
  width: 100%; margin: 0 auto; padding: 0px 10%;
}
@media screen and (max-width: 768px) { header .navbar.bg-light { height: 50px; } }
header .navbar.bg-light .navbar-brand > img[src*='wlogo.png'] { display: none; }
header .navbar.bg-light .navbar-brand > img[src*='logo.png'] { display: block; }
@media screen and (max-width: 768px) { header .navbar.bg-light .navbar-brand img { max-width: 150px; } }
header .navbar.bg-light .navbar-collapse .navbar-nav .nav-item { margin: 0 auto; padding: 0 15px; border-bottom: transparent solid 2px; }
header .navbar.bg-light .navbar-collapse .navbar-nav .nav-item.active { border-bottom: #ee7907 solid 2px; }
header .navbar.bg-light .navbar-collapse .navbar-nav .nav-item:hover { border-bottom: #ee7907 solid 2px; }
header .navbar.bg-light .navbar-collapse .navbar-nav .nav-item .nav-link { color: #666666; text-decoration: none; }
@media screen and (max-width: 768px) { header .navbar.bg-light .navbar-collapse .navbar-nav .nav-item .nav-link { color: #ffffff; } }
header .navbar.bg-light .navbar-collapse .navbar-text { margin-left: 20px; }
header .navbar.bg-light .navbar-collapse .navbar-text ul { width: 100%; margin: 0 auto; padding: 0; display: flex; flex-direction: row; justify-content: flex-start; }
header .navbar.bg-light .navbar-collapse .navbar-text ul li { list-style-type: none; margin-right: 4px; }
header .navbar.bg-light .navbar-collapse .navbar-text ul li a img { border: #f1f1f1 solid 1px; }
@media screen and (min-width: 768px) { header .navbar.bg-light .navbar-collapse .navbar-text ul li a img { margin-top: 5px; } }
header .navbar.bg-light .navbar-collapse .navbar-text ul li i { color: #666666; }
@media screen and (max-width: 768px) { header .navbar.bg-light .navbar-collapse .navbar-text ul li i { color: #ffffff; } }
header .navbar.bg-light .navbar-collapse .navbar-text ul li form { position: relative; }
header .navbar.bg-light .navbar-collapse .navbar-text ul li form input { width: 100%; }
header .navbar.bg-light .navbar-collapse .navbar-text ul li form button { position: absolute; right: 0px; border: transparent; }
header .navbar.bg-light .navbar-collapse .navbar-text ul li form button:hover { background: transparent; }
@media screen and (max-width: 768px) { header .navbar.bg-light .navbar-collapse { background: #333333; } }
header .showsearch { cursor: pointer; }

/* --- Index Page --- */
.index-page .swiper-button-prev { color: #ee7907; }
.index-page .swiper-button-next { color: #ee7907; }
.index-page > div { padding: 70px 0; margin: 0 auto; }

/* Title mixin */
.index-page .hot-products .container .title,
.index-page .products-category .container .title,
.index-page .news .container .title { width: 100%; }
.index-page .hot-products .container .title h2,
.index-page .products-category .container .title h2,
.index-page .news .container .title h2 {
  color: #222222; font-size: 40px;
}
@media screen and (max-width: 768px) {
  .index-page .hot-products .container .title h2,
  .index-page .products-category .container .title h2,
  .index-page .news .container .title h2 { font-size: 24px; }
}
.index-page .hot-products .container .title h2 span,
.index-page .products-category .container .title h2 span,
.index-page .news .container .title h2 span { float: right; }
.index-page .hot-products .container .title h2 span a,
.index-page .products-category .container .title h2 span a,
.index-page .news .container .title h2 span a {
  padding: 10px 20px; border-radius: 26px; border: 1px solid #d1d1d1;
  font-size: 16px; text-decoration: none; color: #666666; font-weight: 400;
}
@media screen and (max-width: 768px) {
  .index-page .hot-products .container .title h2 span a,
  .index-page .products-category .container .title h2 span a,
  .index-page .news .container .title h2 span a { font-size: 14px; padding: 10px 15px; }
}

/* Hot Products */
.index-page .hot-products { background: #f7faff; }
.index-page .hot-products .container .hotProductsSwiper { margin-top: 40px; }
.index-page .hot-products .container .hotProductsSwiper a { color: #666666; text-decoration: none; }
.index-page .hot-products .container .hotProductsSwiper .card { width: 100%; }
.index-page .hot-products .container .hotProductsSwiper .card .text { text-align: center; line-height: 2.6em; }

/* Why Choose Us */
.index-page .why-choose-us {
  background: url("../images/about-bg.jpg") top center no-repeat;
  background-size: 100% 520px; color: #ffffff;
}
@media screen and (max-width: 768px) {
  .index-page .why-choose-us { background-size: 100% 1000px; }
}
.index-page .why-choose-us .container .about-desc h2 { text-align: center; margin-bottom: 20px; }
.index-page .why-choose-us .container .about-desc p {
  text-align: center; width: 80%; margin: 0 auto; font-size: 17px; line-height: 1.7em;
}
@media screen and (max-width: 768px) { .index-page .why-choose-us .container .about-desc p { width: 95%; } }
.index-page .why-choose-us .container .about-desc p .more-btn {
  display: block; margin: 0 auto; padding: 4px 30px; margin-top: 40px;
  color: #ffffff; border: #f1f1f1 solid 2px; border-radius: 16px;
  width: 130px; text-decoration: none;
}
.index-page .why-choose-us .container .about-desc .num {
  width: 100%; margin: 0 auto; padding: 30px 10px; display: flex;
  background: #ee7907; margin-top: 40px; border-radius: 20px;
}
@media screen and (max-width: 768px) { .index-page .why-choose-us .container .about-desc .num { flex-wrap: wrap; } }
.index-page .why-choose-us .container .about-desc .num li {
  width: 25%; list-style-type: none; text-align: center; padding: 0 12px;
}
@media screen and (max-width: 768px) { .index-page .why-choose-us .container .about-desc .num li { width: 50%; } }
.index-page .why-choose-us .container .about-desc .num li h3 { color: #ffffff; line-height: 1.2; font-weight: 700; margin-bottom: 8px; text-align: center; }
.index-page .why-choose-us .container .about-desc .num li h3 span { font-size: 48px; }
.index-page .why-choose-us .container .about-desc .num li h3 em { font-style: normal; font-size: 28px; position: relative; top: -6px; font-weight: 700; }
.index-page .why-choose-us .container .about-desc .num li p { font-size: 14px; color: #ffffff; margin: 0; padding: 0; text-align: center; width: 100%; }

/* Products Category */
.index-page .products-category .container .productsCategorySwiper { margin-top: 40px; }
.index-page .products-category .container .productsCategorySwiper .card { position: relative; box-shadow: 0 0 25px 0 rgba(0,0,0,0.05); border: 1px solid #d1d1d1; }
.index-page .products-category .container .productsCategorySwiper .card .text {
  height: 100%; width: 100%; position: absolute; background: rgba(0,0,0,0.6);
  left: 0; bottom: -101%; display: flex; justify-content: center; align-items: center;
  color: #ffffff; padding: 10px; transition: bottom 0.5s linear;
}
.index-page .products-category .container .productsCategorySwiper .card .text a { color: #ffffff; text-decoration: none; }
.index-page .products-category .container .productsCategorySwiper .card:hover { transform: translateY(-0px); }
.index-page .products-category .container .productsCategorySwiper .card:hover .text { bottom: 0px; }

/* News */
.index-page .news { background: #f7faff; }
.index-page .news .container .newsSwiper { margin-top: 40px; }
.index-page .news .container .newsSwiper .swiper-slide .card { overflow: hidden; border-radius: 0px; background-color: #ffffff; position: relative; box-shadow: 0 0px 25px rgba(0,0,0,0.10); border: none; }
.index-page .news .container .newsSwiper .swiper-slide .card .date {
  position: absolute; left: 0px; top: 0px; height: 40px; width: 115px;
  background: #ee7907; color: #ffffff; line-height: 40px; padding-left: 15px; display: none;
}
.index-page .news .container .newsSwiper .swiper-slide .card a { text-decoration: none; }
.index-page .news .container .newsSwiper .swiper-slide .card a img { transition: all 0.5s ease-out; }
.index-page .news .container .newsSwiper .swiper-slide .card a:hover img { transform: scale(1.05); }
.index-page .news .container .newsSwiper .swiper-slide .card .card-body {
  width: calc(100% - 30px); margin: 0 auto; color: #666666; background: #ffffff; position: relative; padding-top: 0;
}
.index-page .news .container .newsSwiper .swiper-slide .card .card-body h5 { height: 60px; line-height: 60px; overflow: hidden; border-bottom: #f1f1f1 solid 1px; }
.index-page .news .container .newsSwiper .swiper-slide .card .card-body p { height: 76px; line-height: 25px; overflow: hidden; }
@media screen and (max-width: 768px) { .index-page .news .container .newsSwiper .swiper-slide .card { margin-bottom: 30px; } }

/* --- Footer --- */
footer { width: 100%; background: url("../images/footer-bg.jpg") top center no-repeat #111111; border-top: #f1f1f1 solid 1px; margin: 0 auto; padding: 0; }
@media screen and (max-width: 768px) { footer { background: url("../images/footer-bg-m.jpg") top center no-repeat #111111; } }
footer .footer-link { width: 100%; margin: 0 auto; padding: 40px 0; }
footer .footer-link .container .row .col-md-4 h3 { font-size: 22px; color: #e1e1e1; background: url("../images/fa-t.png") left center no-repeat; padding-left: 10px; }
footer .footer-link .container .row .col-md-4 ul { margin: 0 auto; padding: 0; width: 100%; }
footer .footer-link .container .row .col-md-4 ul li { list-style-type: none; color: #e1e1e1; padding-left: 15px; }
footer .footer-link .container .row .col-md-4 ul li a { color: #e1e1e1; }
footer .footer-link .container .row .col-md-4 ul li i { color: #ee7907; margin-right: 10px; }
footer .footer-link .container .row .col-md-4 p { line-height: 2em; color: #e1e1e1; }
footer .footer-link .container .row .col-md-2 h3 { font-size: 22px; color: #e1e1e1; background: url("../images/fa-t.png") left center no-repeat; padding-left: 10px; }
footer .footer-link .container .row .col-md-2 img { max-width: 110px; margin-bottom: 5px; border-radius: 4px; }
footer .footer-link .container .row .col-md-6 { display: flex; }
@media screen and (max-width: 768px) { footer .footer-link .container .row .col-md-6 { flex-direction: column; } }
footer .footer-link .container .row .col-md-6 .link { width: 50%; }
@media screen and (max-width: 768px) { footer .footer-link .container .row .col-md-6 .link { width: 100%; } }
footer .footer-link .container .row .col-md-6 .link h3 { font-size: 22px; color: #e1e1e1; padding-left: 10px; }
footer .footer-link .container .row .col-md-6 .link ul { margin: 0 auto; padding: 0; width: 100%; }
footer .footer-link .container .row .col-md-6 .link ul li { list-style-type: none; color: #e1e1e1; padding-left: 15px; }
footer .footer-link .container .row .col-md-6 .link ul li a { color: #e1e1e1; }
footer .footer-link .container .row > div h3 { margin-bottom: 20px; }
footer .footer-link .container .row > div ul li { line-height: 2em; }
@media screen and (max-width: 768px) { footer .footer-link .container .row > div { margin-bottom: 30px; } }
footer .footer-copyright { width: 100%; margin: 0 auto; padding: 0px; border-top: 1px solid #333333; }
footer .footer-copyright .container p { text-align: left; padding: 0; margin: 0 auto; color: #e1e1e1; line-height: 60px; font-size: 15px; }
@media screen and (max-width: 768px) { footer .footer-copyright .container p span { display: none; } }

/* --- Search Overlay --- */
#search { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(0,0,0,0.75); }
#search > span { position: relative; right: 30px; top: 10px; cursor: pointer; }
#search > span i { font-size: 30px; color: #aaaaaa; }
#search .search-div { width: 100%; display: flex; flex-direction: row; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#search .search-div .container form button { background-color: transparent; border: none; }
#search .search-div .container form button i { color: #aaaaaa; }
#search .search-div .container form button.form-control { border-bottom: transparent; }
#search .search-div .container form .form-control { background: transparent; border-bottom: #555555 solid 1px; border-top: transparent; border-left: transparent; border-right: transparent; }
#search .search-div .container form .form-control:focus { outline: none; }

/* --- Footer Cart (Inquiry Basket) --- */
.footer-cart { z-index: 999; width: 60px; height: 60px; position: fixed; right: 20px; bottom: 200px; cursor: pointer; }
.footer-cart span { width: 50px; height: 50px; border-radius: 25px; background: #7a8599; display: inline-block; text-align: center; position: relative; }
.footer-cart span i { color: #FFFFFF; line-height: 50px; text-align: center; font-size: 30px; }
.footer-cart span em { position: absolute; font-style: normal; background: #ff0000; display: inline-block; width: 20px; height: 20px; border-radius: 10px; top: -5px; right: -5px; line-height: 20px; text-align: center; color: #FFFFFF; font-size: 12px; }

.footer-cart-list { display: none; z-index: 9999; background: #FFFFFF; width: 230px; position: fixed; bottom: 0px; right: 5px; border: #d1d1d1 solid 1px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25); }
.footer-cart-list h3 { background: #7a8599; text-align: center; font-size: 15px; height: 37px; margin: 0 auto; padding: 0px; line-height: 37px; position: relative; color: #FFFFFF; }
.footer-cart-list h3 span { float: left; position: absolute; left: 20px; bottom: 0px; }
.footer-cart-list h3 span i { cursor: pointer; }
.footer-cart-list h3 em { font-style: normal; color: #e64545; font-weight: bold; }
.footer-cart-list ul { margin: 0 auto; padding: 0px; background: #FFFFFF; height: 150px; overflow-y: scroll; }
.footer-cart-list ul li { height: 56px; margin: 5px auto; border-bottom: #d1d1d1 solid 1px; display: flex; }
.footer-cart-list ul li a { display: inline-block; width: 80px; margin-right: 5px; }
.footer-cart-list ul li a img { max-width: 40px; margin-left: 5px; }
.footer-cart-list ul li span p { margin: 0 auto; padding: 0px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 160px; }
.footer-cart-list ul li span a { display: none; }
.footer-cart-list ul li:hover span a { display: block; color: #555555; text-decoration: none; font-size: 14px; }
.footer-cart-list h4 { display: flex; height: 50px; justify-content: center; align-items: center; border-bottom: none; }
.footer-cart-list h4 a { text-decoration: none; border-radius: 4px; }
.footer-cart-list h4 a:nth-child(1) { background: #f1f1f1; color: #ff0000; font-size: 14px; padding: 5px 15px; margin-right: 15px; }
.footer-cart-list h4 a:nth-child(2) { background: #e64545; color: #FFFFFF; font-size: 14px; padding: 5px 15px; }

/* --- Left Sidebar (Products/Showp) --- */
._left .left { background: #ee7907; padding: 30px 0 20px 0; }
._left .left .input-search { width: 90%; height: 36px; border: #f1f1f1 solid 1px; border-radius: 18px; background: #ffffff; margin: 0 5%; }
._left .left .input-search form { margin: 0 auto; padding: 0px; }
._left .left .input-search form input { border: none; height: 32px; width: 80%; margin: 0 0 0 10px; background: #ffffff; line-height: 30px; border-radius: 16px; }
._left .left .input-search form input:focus { outline: none; }
._left .left .input-search form button { background: #ffffff; height: 32px; padding: 0px; margin: 0 auto; border-radius: 16px; }
._left .left h2 { font-size: 24px; color: #fff; font-weight: 0; letter-spacing: 0; line-height: 2.4em; text-align: center; position: relative; margin-top: 10px; }
._left .left h2::before { content: ""; width: 90%; height: 1px; background: rgba(255,255,255,0.8); position: absolute; left: 5%; bottom: 0px; }
._left .left ul { margin: 0 10px; padding: 0px 5px; }
._left .left ul li { list-style: none; margin: 0 auto; color: #ffffff; line-height: 2.2em; border-bottom: rgba(255,255,255,0.5) dashed 1px; }
._left .left ul li span { float: right; }
._left .left ul li span > em { font-style: normal; display: none; }
._left .left ul li span > i { font-style: normal; }
._left .left ul li a { color: #ffffff; text-decoration: none; }
._left .left ul li ul { display: none; margin: 0 auto; padding: 0px 10px; }
._left .left ul li.active span i { display: none; }
._left .left ul li.active span em { display: inline-block; }
._left .left ul li.active span em > i { display: inline-block; }
._left .left ul li.active ul { display: block; }
._left .left ul li.active ul li { list-style: none; margin: 0 auto; padding: 0px; }
._left .left ul li:hover { background: #d56e06; cursor: pointer; }
._left .left .icon { margin-left: 3px; }
._left .left .icon a span { display: inline-block; width: 30px; height: 30px; background: #f1f1f1; font-size: 20px; line-height: 30px; text-align: center; color: #333333; }
._left .left .icon a:hover span { color: #666666; }
._left .left p { padding-left: 20px; color: #ffffff; }
@media screen and (max-width: 768px) { ._left .left { margin-top: 30px; } }

/* --- Products Page --- */
.products { width: 100%; background: #f6f6f6; }
.products .container .row .col-md-3 ._left .left { background: #ee7907; padding: 30px 0 20px 0; }
.products .container .row .col-md-9 .right h2 { line-height: 100px; margin: 0 auto; padding: 0px; border-bottom: #d1d1d1 solid 1px; font-size: 36px; color: #ee7907; font-weight: 700; }
.products .container .row .col-md-9 .right .container .row .col-md-4 { margin-top: 40px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card { background: #ffffff; border: none; border-radius: 0px; box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1); }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire { width: 100%; background: #1f6bb9; overflow: hidden; position: relative; height: 40px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a { line-height: 40px; text-decoration: none; display: inline-block; position: absolute; bottom: 0px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a span { color: #ffffff; line-height: 40px; text-align: center; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.basket span { margin-left: 15px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.basket { left: 0px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire { display: inline-block; float: right; width: 40px; height: 40px; line-height: 40px; border-left: #ffffff solid 1px; background: #ca0000; transition: width 0.5s ease-out; z-index: 888; right: 0px; color: #ffffff;
text-align: center; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire .inquire-wrap { display: none; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire span { width: 40px; height: 40px; text-align: center; color: #ffffff; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire:hover { width: 180px; color: #ffffff; text-align: center;}
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire:hover .inquire-wrap { display: inline-block; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .inquire a.prodlist-pro-inquire:hover span:nth-child(2) { width: 140px; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .card-title { line-height: 28px; height: 28px; overflow: hidden; text-align: center; }
.products .container .row .col-md-9 .right .container .row .col-md-4 .card .card-body .card-title a { color: #666666; font-size: 14px; text-decoration: none; }

/* --- Showp (Product Detail) --- */
.showp { border-top: #9497ba solid 1px; background: #f6f6f6; width: 100%; margin: 0 auto; padding: 0px; }
.showp .container .nav { height: 100px; line-height: 100px; }
.showp .container .nav span { padding: 0 15px; }
.showp .container .nav a { color: #ee7907; font-weight: bold; }
.showp .container .nav a:last-child { font-weight: normal; }
.showp .container .row .col-md-3 ._left .left { background: #ee7907; padding: 30px 0 20px 0; }
.showp .container .row .col-md-9 .right { width: 100%; margin: 0 auto; padding: 0px; background: #ffffff; }
.showp .container .row .col-md-9 .right .desc { display: flex; overflow: hidden; }
@media screen and (max-width: 768px) { .showp .container .row .col-md-9 .right .desc { flex-wrap: wrap; } }
.showp .container .row .col-md-9 .right .desc .desc-left { width: 55%; padding: 20px; }
@media screen and (max-width: 768px) { .showp .container .row .col-md-9 .right .desc .desc-left { width: 100%; } }
.showp .container .row .col-md-9 .right .desc .desc-left .big_img { border: #dddddd solid 1px; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_img img { max-width: 100%; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small { display: flex; flex-direction: row; justify-content: flex-start; margin-top: 30px; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .img { border: #dddddd solid 2px; position: relative; margin-right: 4px; width: 150px; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .img::before { position: absolute; left: 50%; top: -6px; content: ""; border-style: solid; border-width: 0px 5px 5px 5px; border-color: transparent transparent #dddddd transparent; transform: translateX(-50%); }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .img:hover { cursor: pointer; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .img img { max-width: 100%; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .active { border: #ee7907 solid 2px; }
.showp .container .row .col-md-9 .right .desc .desc-left .big_small .active::before { position: absolute; left: 50%; top: -6px; content: ""; border-style: solid; border-width: 0px 5px 5px 5px; border-color: transparent transparent #ee7907 transparent; transform: translateX(-50%); }
.showp .container .row .col-md-9 .right .desc .desc-right { width: 45%; }
@media screen and (max-width: 768px) { .showp .container .row .col-md-9 .right .desc .desc-right { width: 100%; padding-left: 10px; } }
.showp .container .row .col-md-9 .right .desc .desc-right h1 { font-size: 20px; margin-top: 20px; line-height: 1.6em; letter-spacing: 0; text-align: left; color: #222; font-weight: bold; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief { font-size: 16px; color: #000000; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief ul li { color: #666666; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop { display: flex; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dt { width: 50px; margin-right: 10px; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dd { width: calc(100% - 60px); }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dd div { width: 100%; display: flex; flex-wrap: wrap; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dd div a { padding: 0 2px; margin-bottom: 5px; border: #dee2e6 solid 1px; color: #666666; text-decoration: none; width: calc(33.33% - 6px); margin-right: 6px; font-size: 12px; display: flex; line-height: 40px; border-radius: 4px; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dd div a img { width: 40px; height: 40px; margin-right: 4px; border-radius: 4px; }
.showp .container .row .col-md-9 .right .desc .desc-right .prod_brief .tb-prop dd div a.selected { border: #ee7907 solid 1px; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart { display: flex; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart .order-cart { display: flex; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart .order-cart a { border: #dddddd solid 1px; margin-right: 6px; text-align: center; width: 30px; color: #666666; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart .order-cart a.order-minus { display: inline-block; margin-left: 20px; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart .order-cart a.order-plus { display: inline-block; }
.showp .container .row .col-md-9 .right .desc .desc-right .cart .order-cart input { border: #dddddd solid 1px; width: 60px; margin-right: 6px; }
.showp .container .row .col-md-9 .right .line { width: calc(100% - 40px); margin: 40px 20px; background: #dddddd; height: 1px; }
.showp .container .row .col-md-9 .right .detail { width: calc(100% - 40px); margin: 0 20px; }
.showp .container .row .col-md-9 .right .detail h3 { text-align: center; color: #666666; font-size: 30px; line-height: 2em; font-weight: 700; }
@media screen and (max-width: 768px) { .showp .container .row .col-md-9 .right .detail h3 { font-size: 20px; } }
.showp .container .row .col-md-9 .right .detail h3 span::before { content: "—— "; color: #ee7907; }
.showp .container .row .col-md-9 .right .detail h3 span::after { content: " ——"; color: #ee7907; }
.showp .container .row .col-md-9 .right .detail h4 { text-align: center; font-weight: bold; }
.showp .container .row .col-md-9 .right .detail .detail-text img { max-width: 100%; }
.showp .container .row .col-md-9 .right .detail .detail-text p { word-break: break-all; word-wrap: break-word; }
.showp .container .row .col-md-9 .right .detail .detail-text p strong { color: #666666; font-weight: bold; }
.showp .container .row .col-md-9 .right .detail .page { display: flex; justify-content: space-between; margin: 40px auto; }
.showp .container .row .col-md-9 .right .detail .page > div { height: 40px; line-height: 40px; border-radius: 20px; background: #dddddd; padding: 0 15px; max-width: 45%; overflow: hidden; color: #666666; }
.showp .container .row .col-md-9 .right .detail .page > div a { text-decoration: none; color: #0b132f; }
.showp .container .row .col-md-9 .right .related > h2 { text-align: center; font-size: 30px; margin-top: 50px; margin-bottom: 40px; color: #666666; font-weight: 700; letter-spacing: 0; line-height: 1em; }
@media screen and (max-width: 768px) { .showp .container .row .col-md-9 .right .related > h2 { font-size: 20px; } }
.showp .container .row .col-md-9 .right .related span::before { content: "—— "; color: #ee7907; }
.showp .container .row .col-md-9 .right .related span::after { content: " ——"; color: #ee7907; }
.showp .container .row .col-md-9 .right .related .reSwiper { width: calc(100% - 40px); margin: 20px 20px; }
.showp .container .row .col-md-9 .right .related .reSwiper .card-title a { color: #666666; }

/* --- About / Contact Page --- */
.about-page, .case-page, .news-page { background: #f2f4f6; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; }
.about-page .crumbs, .case-page .crumbs, .news-page .crumbs { width: 100%; margin: 0 auto; padding: 0; background: #ffffff; height: 80px; }
@media screen and (max-width: 768px) { .about-page .crumbs, .case-page .crumbs, .news-page .crumbs { height: auto; } }
.about-page .crumbs .crumbsSwiper .swiper-slide, .case-page .crumbs .crumbsSwiper .swiper-slide, .news-page .crumbs .crumbsSwiper .swiper-slide { position: relative; line-height: 80px; text-align: center; border-bottom: transparent 2px solid; }
.about-page .crumbs .crumbsSwiper .swiper-slide a, .case-page .crumbs .crumbsSwiper .swiper-slide a, .news-page .crumbs .crumbsSwiper .swiper-slide a { color: #666666; text-decoration: none; }
.about-page .crumbs .crumbsSwiper .swiper-slide.active, .case-page .crumbs .crumbsSwiper .swiper-slide.active, .news-page .crumbs .crumbsSwiper .swiper-slide.active { border-bottom: #ee7907 2px solid; }
.about-page .crumbs .crumbsSwiper .swiper-slide::after, .case-page .crumbs .crumbsSwiper .swiper-slide::after, .news-page .crumbs .crumbsSwiper .swiper-slide::after { content: ""; width: 1px; height: 15px; right: 0px; top: 50%; transform: translateY(-50%); background: #666666; position: absolute; }
.about-page .crumbs .crumbsSwiper .swiper-slide:hover, .case-page .crumbs .crumbsSwiper .swiper-slide:hover, .news-page .crumbs .crumbsSwiper .swiper-slide:hover { border-bottom: #ee7907 2px solid; cursor: pointer; }
.about-page .container .row .col-md-6 p, .case-page .container .row .col-md-6 p, .news-page .container .row .col-md-6 p { line-height: 80px; font-size: 16px; color: #666666; }
.about-page .container .row .col-md-6 p i, .case-page .container .row .col-md-6 p i, .news-page .container .row .col-md-6 p i { color: #ee7907; font-size: 20px; margin-right: 8px; }
.about-page .container .row .col-md-6 p a, .case-page .container .row .col-md-6 p a, .news-page .container .row .col-md-6 p a { text-decoration: none; color: #666666; }
.about-page .container .about-desc, .case-page .container .about-desc { background: #ffffff; width: 100%; margin: 60px auto; padding: 20px; }
.about-page .container .about-desc h1, .case-page .container .about-desc h1 { text-align: center; border-bottom: #e8e8e8 solid 1px; font-size: 28px; font-weight: normal; line-height: 3em; }
.about-page .container .about-desc p img, .case-page .container .about-desc p img { max-width: 100%; }
.about-page .container .about-desc h2 { text-align: center; font-size: 36px; color: #333333; margin-top: 40px; margin-bottom: 40px; }
.about-page .container .about-desc h2 span::before, .case-page .container .about-desc h2 span::before { content: "—— "; color: #ee7907; }
.about-page .container .about-desc h2 span::after, .case-page .container .about-desc h2 span::after { content: " ——"; color: #ee7907; }

/* News Page */
.news-page .container .news-list { background: #ffffff; width: 100%; margin: 60px auto; padding: 20px; }
.news-page .container .news-list .container .row .col-12 .media { padding: 10px; background: #ffffff; border-radius: 10px; margin-bottom: 30px; border: #f1f1f1 solid 1px; }
.news-page .container .news-list .container .row .col-12 .media a img { max-width: 150px; text-decoration: none; }
.news-page .container .news-list .container .row .col-12 .media .media-body h5 { font-size: 18px; color: #0b132f; }
.news-page .container .news-list .container .row .col-12 .media .media-body h5 span { float: right; font-size: 16px; }
.news-page .container .news-list .container .row .col-12 .media .media-body h5 a { text-decoration: none; color: #0b132f; }
.news-page .container .news-list .container .row .col-12 .media .media-body p a { text-decoration: none; color: #666666; }
@media screen and (max-width: 768px) { .news-page .container .news-list .container .row .col-12 .media .media-body p { display: none; } }
.news-page .container .newsdetail { background: #ffffff; width: 100%; margin: 60px auto; padding: 20px; }
.news-page .container .newsdetail .container { padding: 40px 0px; background: #ffffff; }
.news-page .container .newsdetail .container h1 { font-size: 20px; border-bottom: #d1d1d1 solid 1px; }
.news-page .container .newsdetail .container img { max-width: 100%; }
.news-page .container .newsdetail .container .content { padding: 20px; }

/* --- Inquire Page --- */
.inquirePage .inquire table thead tr th { color: #9396a5; text-align: center; background: #f3f3f3; }
.inquirePage .inquire table tbody tr td { text-align: center; }
.inquirePage .inquire table tbody tr td a { color: #666666; line-height: 120px; }
@media screen and (max-width: 768px) { .inquirePage .inquire table tbody tr td a { line-height: 1.6em; } }
.inquirePage .inquire table tbody tr td a:hover { color: #555555; text-decoration: none; }
.inquirePage .inquire table tbody tr td .proNum { margin-top: 50px; text-align: center; width: 80px; }
.inquirePage .inquire table tr .prod-list td { display: flex; justify-content: center; align-self: center; }
.inquirePage .inquire form label span { color: #ff0000; }
.inquirePage .show_success_info { display: none; padding: 50px 0; }

/* --- Pagination --- */
.page-item.active .page-link { z-index: 3; color: #fff; background-color: #ee7907; border-color: #ee7907; }
.page-item .page-link { z-index: 3; color: #ee7907; background-color: #ffffff; border-color: #eeeeee; }

/* --- Case Page Cards --- */
.case-page > .container > .row { margin-top: 20px; }
.case-page > .container > .row .col-md-4 h5 { text-align: center; }
.case-page > .container > .row .col-md-4 h5 a { text-decoration: none; color: #666666; }
.case-page > .container > .row .col-md-4 p { text-align: center; }
.case-page > .container > .row .col-md-4 p a { text-decoration: none; color: #666666; }
.case-page .card .pic { overflow: hidden; }
.case-page .card .pic img { transition: transform 0.5s ease; }
.case-page .card:hover .pic img { transform: scale(1.05); }

/* --- News Detail --- */
.news-page .newsdetail { background: #ffffff; margin: 30px auto; padding: 30px; }
.news-page .newsdetail h1 { font-size: 24px; font-weight: bold; }
.news-page .newsdetail .content { line-height: 1.8; color: #333; }
.news-page .newsdetail .content img { max-width: 100%; height: auto; }

/* --- WhatsApp --- */
#whatsapp .info { display: none; border-radius: 6px; width: 150px; font-size: 16px; background: #f1f1f1; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); color: #0b132f; position: absolute; right: 50px; top: -60px; height: 50px; line-height: 50px; }
#whatsapp:hover .info { display: block; }