@import 'root.css';
/* CSS Document */
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}
@media (min-width: 768px) {
  .gy-sm-0 {
    --bs-gutter-y: calc(0* 15px);
  }
  .gx-sm-0 {
    --bs-gutter-x: calc(0* 15px);
  }
  .gy-sm-1 {
    --bs-gutter-y: calc(1* 15px);
  }
  .gx-sm-1 {
    --bs-gutter-x: calc(1* 15px);
  }
  .gy-sm-2 {
    --bs-gutter-y: calc(2* 15px);
  }
  .gx-sm-2 {
    --bs-gutter-x: calc(2* 15px);
  }
  .gy-sm-3 {
    --bs-gutter-y: calc(3* 15px);
  }
  .gx-sm-3 {
    --bs-gutter-x: calc(3* 15px);
  }
  .gy-sm-4 {
    --bs-gutter-y: calc(4* 15px);
  }
  .gx-sm-4 {
    --bs-gutter-x: calc(4* 15px);
  }
  .gy-sm-5 {
    --bs-gutter-y: calc(5* 15px);
  }
  .gx-sm-5 {
    --bs-gutter-x: calc(5* 15px);
  }
  body.home .order-sm-1 {
    order: 1;
  }
  body.home .order-sm-2 {
    order: 2;
  }
  body.home .align-items-sm-end {
    align-items: flex-end;
  }
}
@media (min-width: 992px) {
  .gy-md-0 {
    --bs-gutter-y: calc(0* 15px);
  }
  .gx-md-0 {
    --bs-gutter-x: calc(0* 15px);
  }
  .gy-md-1 {
    --bs-gutter-y: calc(1* 15px);
  }
  .gx-md-1 {
    --bs-gutter-x: calc(1* 15px);
  }
  .gy-md-2 {
    --bs-gutter-y: calc(2* 15px);
  }
  .gx-md-2 {
    --bs-gutter-x: calc(2* 15px);
  }
  .gy-md-3 {
    --bs-gutter-y: calc(3* 15px);
  }
  .gx-md-3 {
    --bs-gutter-x: calc(3* 15px);
  }
  .gy-md-4 {
    --bs-gutter-y: calc(4* 15px);
  }
  .gx-md-4 {
    --bs-gutter-x: calc(4* 15px);
  }
  .gy-md-5 {
    --bs-gutter-y: calc(5* 15px);
  }
  .gx-md-5 {
    --bs-gutter-x: calc(5* 15px);
  }
  #side1collapse {
    display: block !important;
    height: auto !important;
  }
  .header .navbar > .container-fluid, .header .navbar > .container {
    padding: 0;
  }
  .header .navbar .navbar-header {
    flex: 0 0 100%;
    width: 100%;
  }
  .header .navbar .navbar-brand {
    width: 387px;
    height: 57px;
    margin: 30px auto;
  }
  .header .navbar .navbar-collapse {
    padding: 0;
    border-top: 1px solid #cdcdcd;
  }
  .is_scroll .header .navbar .navbar-brand {
    width: 303px;
    height: 44px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .is_scroll .header .navbar .navbar-nav > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .is_scroll .header .navbar .func-nav li {
    top: 15px;
  }
}
@media (min-width: 1200px) {
  .gy-lg-0 {
    --bs-gutter-y: calc(0* 15px);
  }
  .gx-lg-0 {
    --bs-gutter-x: calc(0* 15px);
  }
  .gy-lg-1 {
    --bs-gutter-y: calc(1* 15px);
  }
  .gx-lg-1 {
    --bs-gutter-x: calc(1* 15px);
  }
  .gy-lg-2 {
    --bs-gutter-y: calc(2* 15px);
  }
  .gx-lg-2 {
    --bs-gutter-x: calc(2* 15px);
  }
  .gy-lg-3 {
    --bs-gutter-y: calc(3* 15px);
  }
  .gx-lg-3 {
    --bs-gutter-x: calc(3* 15px);
  }
  .gy-lg-4 {
    --bs-gutter-y: calc(4* 15px);
  }
  .gx-lg-4 {
    --bs-gutter-x: calc(4* 15px);
  }
  .gy-lg-5 {
    --bs-gutter-y: calc(5* 15px);
  }
  .gx-lg-5 {
    --bs-gutter-x: calc(5* 15px);
  }
  .header .navbar .navbar-brand {
    width: 488px;
    height: 71px;
    margin: 40px auto;
  }
  .is_scroll .header .navbar .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 1400px) {
  .container {
    width: 1320px;
  }
  .col-xl-0 {
    float: left;
    width: 0;
  }
  .col-xl-pull-0 {
    right: 0;
  }
  .col-xl-push-0 {
    left: 0;
  }
  .col-xl-offset-0 {
    margin-left: 0;
  }
  .col-xl-1 {
    float: left;
    width: calc(8.333333% * 1);
  }
  .col-xl-pull-1 {
    right: calc(8.333333% * 1);
  }
  .col-xl-push-1 {
    left: calc(8.333333% * 1);
  }
  .col-xl-offset-1 {
    margin-left: calc(8.333333% * 1);
  }
  .col-xl-2 {
    float: left;
    width: calc(8.333333% * 2);
  }
  .col-xl-pull-2 {
    right: calc(8.333333% * 2);
  }
  .col-xl-push-2 {
    left: calc(8.333333% * 2);
  }
  .col-xl-offset-2 {
    margin-left: calc(8.333333% * 2);
  }
  .col-xl-3 {
    float: left;
    width: calc(8.333333% * 3);
  }
  .col-xl-pull-3 {
    right: calc(8.333333% * 3);
  }
  .col-xl-push-3 {
    left: calc(8.333333% * 3);
  }
  .col-xl-offset-3 {
    margin-left: calc(8.333333% * 3);
  }
  .col-xl-4 {
    float: left;
    width: calc(8.333333% * 4);
  }
  .col-xl-pull-4 {
    right: calc(8.333333% * 4);
  }
  .col-xl-push-4 {
    left: calc(8.333333% * 4);
  }
  .col-xl-offset-4 {
    margin-left: calc(8.333333% * 4);
  }
  .col-xl-5 {
    float: left;
    width: calc(8.333333% * 5);
  }
  .col-xl-pull-5 {
    right: calc(8.333333% * 5);
  }
  .col-xl-push-5 {
    left: calc(8.333333% * 5);
  }
  .col-xl-offset-5 {
    margin-left: calc(8.333333% * 5);
  }
  .col-xl-6 {
    float: left;
    width: calc(8.333333% * 6);
  }
  .col-xl-pull-6 {
    right: calc(8.333333% * 6);
  }
  .col-xl-push-6 {
    left: calc(8.333333% * 6);
  }
  .col-xl-offset-6 {
    margin-left: calc(8.333333% * 6);
  }
  .col-xl-7 {
    float: left;
    width: calc(8.333333% * 7);
  }
  .col-xl-pull-7 {
    right: calc(8.333333% * 7);
  }
  .col-xl-push-7 {
    left: calc(8.333333% * 7);
  }
  .col-xl-offset-7 {
    margin-left: calc(8.333333% * 7);
  }
  .col-xl-8 {
    float: left;
    width: calc(8.333333% * 8);
  }
  .col-xl-pull-8 {
    right: calc(8.333333% * 8);
  }
  .col-xl-push-8 {
    left: calc(8.333333% * 8);
  }
  .col-xl-offset-8 {
    margin-left: calc(8.333333% * 8);
  }
  .col-xl-9 {
    float: left;
    width: calc(8.333333% * 9);
  }
  .col-xl-pull-9 {
    right: calc(8.333333% * 9);
  }
  .col-xl-push-9 {
    left: calc(8.333333% * 9);
  }
  .col-xl-offset-9 {
    margin-left: calc(8.333333% * 9);
  }
  .col-xl-10 {
    float: left;
    width: calc(8.333333% * 10);
  }
  .col-xl-pull-10 {
    right: calc(8.333333% * 10);
  }
  .col-xl-push-10 {
    left: calc(8.333333% * 10);
  }
  .col-xl-offset-10 {
    margin-left: calc(8.333333% * 10);
  }
  .col-xl-11 {
    float: left;
    width: calc(8.333333% * 11);
  }
  .col-xl-pull-11 {
    right: calc(8.333333% * 11);
  }
  .col-xl-push-11 {
    left: calc(8.333333% * 11);
  }
  .col-xl-offset-11 {
    margin-left: calc(8.333333% * 11);
  }
  .col-xl-12 {
    float: left;
    width: 100%;
  }
  .col-xl-pull-12 {
    right: 100%;
  }
  .col-xl-push-12 {
    left: 100%;
  }
  .col-xl-offset-12 {
    margin-left: 100%;
  }
  .gy-xl-0 {
    --bs-gutter-y: calc(0* 15px);
  }
  .gx-xl-0 {
    --bs-gutter-x: calc(0* 15px);
  }
  .gy-xl-1 {
    --bs-gutter-y: calc(1* 15px);
  }
  .gx-xl-1 {
    --bs-gutter-x: calc(1* 15px);
  }
  .gy-xl-2 {
    --bs-gutter-y: calc(2* 15px);
  }
  .gx-xl-2 {
    --bs-gutter-x: calc(2* 15px);
  }
  .gy-xl-3 {
    --bs-gutter-y: calc(3* 15px);
  }
  .gx-xl-3 {
    --bs-gutter-x: calc(3* 15px);
  }
  .gy-xl-4 {
    --bs-gutter-y: calc(4* 15px);
  }
  .gx-xl-4 {
    --bs-gutter-x: calc(4* 15px);
  }
  .gy-xl-5 {
    --bs-gutter-y: calc(5* 15px);
  }
  .gx-xl-5 {
    --bs-gutter-x: calc(5* 15px);
  }
}
@media (min-width: 1600px) {
  .container {
    width: 1520px;
  }
}
@media (min-width: 1720px) {
  .container {
    width: 1640px;
  }
}
@media (max-width: 1599px) {
  .header .navbar .navbar-nav > li > a {
    padding: 15px 3px;
    font-size: 1rem;
  }
  .header .navbar .nav_btn_group {
    margin-left: 5px;
  }
  .header .navbar .nav_btn_group .sub-nav li + li {
    padding-left: 5px;
    margin-left: 5px;
  }
  .header .navbar .nav_btn_group .sub-nav li a > span {
    display: none;
  }
  .header .navbar .nav_btn_group .sub-nav li a .icon {
    margin-right: 2px;
    width: 1.125em;
    font-size: 1.125em;
  }
  .header .navbar .nav_btn_group .sub-nav li a .num {
    top: 15px;
    right: 6px;
  }
  .header .navbar .nav_btn_group .sub-nav li.search {
    margin-left: 10px;
  }
  .footer .siteinfo {
    margin-top: 20px;
    margin-bottom: 60px;
  }
}
@media (max-width: 1399px) {
  .btn-more {
    font-size: 1.125rem;
    padding: 1em 10px;
    min-width: 300px;
    letter-spacing: 1px;
  }
  .header .navbar .navbar-nav > li > a {
    font-size: 0.875rem;
  }
  .header .navbar .sub-nav li + li {
    margin-left: 5px;
  }
  .footer {
    padding: 50px 0 15px;
  }
  .footer .footer-brand {
    width: 326px;
    height: 58px;
  }
  .footer .footer_content {
    font-size: 0.9375rem;
  }
  .footer .siteinfo ul > li:not(:last-child) {
    margin-right: 10px;
    padding-right: 20px;
  }
  .footer .siteinfo ul > li label {
    font-size: 0.9375rem;
  }
  .footer .siteinfo ul > li a {
    font-size: 0.9375rem;
  }
  .footer .siteinfo ul > li .icon > * {
    font-size: 2.75rem;
  }
  .footer .cominfo {
    margin-left: 40px;
    margin-right: 40px;
    font-size: 0.9375rem;
  }
  .footer .cominfo label {
    font-size: 0.9375rem;
  }
  .footer .powered {
    font-size: 0.9375rem;
  }
  .footer .sitemap {
    padding-top: 10px;
    margin-top: 10px;
  }
  .footer .sitemap ul li a {
    font-size: 0.9375rem;
  }
  .main_content {
    padding: 50px 0 65px;
  }
  .content .tag {
    font-size: 0.9375rem;
  }
  .content .product-list .item.status:before {
    width: 100px;
    height: 40px;
    padding: 5px;
    font-size: 0.875rem;
    letter-spacing: 1px;
  }
  .gotop {
    z-index: 999;
    right: 15px;
  }
  .gotop a {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }
  body.home .content section {
    padding: 50px 0;
  }
  body.home .content section .h2 {
    font-size: 2.125rem;
    margin-bottom: 1.5em;
  }
  body.home .content section.about {
    padding-top: 140px;
    padding-bottom: 120px;
  }
  body.home .content section.about .text-box {
    margin-left: 8vw;
    padding-bottom: 7%;
  }
  body.home .content section.product .nav {
    margin-bottom: 15px;
  }
  body.home .content section.product .nav > li > a {
    font-size: 1.25rem;
    padding: 10px 15px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info {
    padding: 35px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .title {
    font-size: 1.125rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .sub {
    font-size: 1.125rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .price {
    font-size: 2.25rem;
  }
  body.home .content section.news {
    padding: 70px 0;
  }
  body.home .content section.news.aos-animate:before {
    top: calc(100% - 125px);
  }
  body.home .content section.news .btn-more {
    padding: 10px 3px;
  }
  body.home .content section.news .btn-more:hover:after {
    margin-right: 15px;
  }
  body.home .content section.brand .wid.wid-home-product .slick {
    margin-left: -25px;
    margin-right: -25px;
  }
  body.home .content section.brand .wid.wid-home-product .slick .slick_item {
    padding: 0 25px;
  }
  body.home .content .wid.wid-home-product .list_item.status:before {
    width: 100px;
    height: 40px;
    padding: 5px;
    font-size: 0.875rem;
    letter-spacing: 1px;
  }
  body.home .content .wid.wid-home-product .list_item .kind {
    margin-top: 15px;
  }
  body.home .content .wid.wid-home-product .list_item .info .title {
    font-size: 1rem;
  }
  body.home .content .wid.wid-home-product .list_item .info .sub {
    font-size: 1rem;
  }
  body.home .content .wid.wid-home-product .list_item .info .price {
    font-size: 1.5rem;
  }
  body.home .content .wid.wid-home-news .list .list_item .info {
    padding: 30px 10px;
  }
  body.home .content .wid.wid-home-news .list .list_item .info .title {
    font-size: 1rem;
  }
  body.home .content .wid.wid-home-news .list .list_item .info .date {
    font-size: 0.875rem;
  }
  body.home .content .wid.wid-home-news .list .list_item .info .tag + small {
    margin-left: 10px;
  }
  body.product.show .content > .row:first-child {
    --bs-gutter-x: 80px;
  }
  body.product.show .content .tab-content ~ .related {
    margin-top: 90px;
  }
  body.product.show .content .related {
    padding-top: 100px;
  }
  body.cart .content .invoice-title {
    margin-top: 5px;
  }
}
@media (max-width: 1199px) {
  .btn-more {
    font-size: 1rem;
    padding: 0.75em 10px;
    min-width: 250px;
  }
  #floating {
    margin-top: -60px;
  }
  .header .navbar .navbar-nav > li > a {
    padding: 12px 2px;
    letter-spacing: 0;
  }
  .header .navbar .func-nav li a {
    font-size: 0.9375rem;
  }
  .footer {
    padding: 40px 0 10px;
  }
  .footer .footer-brand {
    width: 281px;
    height: 50px;
  }
  .footer .footer_content {
    text-align: center;
    font-size: 0.875rem;
  }
  .footer .editor {
    margin-left: auto;
    margin-right: auto;
  }
  .footer .cominfo {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 0.875rem;
  }
  .footer .cominfo label {
    font-size: 0.875rem;
  }
  .footer .siteinfo {
    margin-top: 15px;
    margin-bottom: 50px;
  }
  .footer .siteinfo ul > li:not(:last-child) {
    margin-right: 5px;
    padding-right: 10px;
  }
  .footer .siteinfo ul > li label {
    font-size: 0.875rem;
  }
  .footer .siteinfo ul > li a {
    font-size: 0.875rem;
  }
  .footer .siteinfo ul > li .icon > * {
    font-size: 2.5rem;
  }
  .footer .powered {
    font-size: 0.875rem;
  }
  .footer .sitemap ul {
    justify-content: center;
  }
  .footer .sitemap ul li a {
    font-size: 0.875rem;
  }
  .main_content {
    padding: 30px 0 45px;
  }
  .slick .slick-dots button {
    width: 10px;
    height: 10px;
  }
  .slick .slick-dots button:before {
    width: 10px;
    height: 10px;
  }
  .content .txt img {
    max-width: 100%;
  }
  .content .table.table-stack > tbody > tr > td.pic {
    width: 250px;
  }
  .content .table.table-stack > tbody > tr > td.discount {
    width: 28%;
  }
  .content .list-box .txt-list li {
    padding: 0 3px;
  }
  .content .list-box .txt-list li a {
    padding: 12px 60px 12px 0;
  }
  .content .list-box .txt-list li a:before {
    font-size: 15px;
    width: 36px;
    height: 36px;
  }
  .content .list-box .txt-list li a.kind {
    padding: 5px 10px;
  }
  .content .list-box .txt-list li a:hover:before, .content .list-box .txt-list li a:focus:before {
    width: 42px;
    height: 42px;
  }
  .content .list-box .txt-list li span.date {
    font-size: 1rem;
  }
  .content .list-box .txt-list li span.news-title {
    float: left;
    color: #848275;
    width: 74%;
  }
  .content .product-pic .big-pic {
    width: calc(100% - 100px);
  }
  .content .product-pic .small-pic {
    width: 100px;
  }
  .content section .h3 {
    padding: 30px 0 0;
    font-size: 1.25rem;
  }
  .side2 {
    padding-top: 12px;
    border-top: 2px solid var(--primary-color);
  }
  .wid-slideBanner .jcarousel-control-prev, .wid-slideBanner .jcarousel-control-next {
    width: 24px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
  }
  .wid-slideBanner .jcarousel-control-prev {
    left: -24px;
  }
  .wid-slideBanner .jcarousel-control-next {
    right: -24px;
    background-position: 0 -40px;
  }
  .pic-gallery .pic-stage {
    width: 80%;
  }
  body.home .content section {
    padding: 40px 0;
  }
  body.home .content section .h2 {
    font-size: 2rem;
  }
  body.home .content section.about {
    padding-top: 120px;
    padding-bottom: 100px;
  }
  body.home .content section.about .pic-box .deco {
    font-size: 5vw;
    bottom: 55%;
  }
  body.home .content section.about .text-box {
    margin-left: 6vw;
    padding-bottom: 5%;
  }
  body.home .content section.about .text-box .title {
    font-size: 1.5rem;
    margin-bottom: 1.5em;
  }
  body.home .content section.about .text-box .desc {
    font-size: 1.125rem;
  }
  body.home .content section.product .nav {
    margin-bottom: 10px;
  }
  body.home .content section.product .nav > li > a {
    font-size: 1.125rem;
    padding: 7px 10px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info {
    padding: 25px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .title {
    font-size: 1rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .sub {
    font-size: 1rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .price {
    font-size: 2rem;
  }
  body.home .content section.product .wid.wid-home-product .slick {
    margin-bottom: 30px;
  }
  body.home .content section.news {
    padding: 60px 0;
  }
  body.home .content section.news.aos-animate:before {
    top: calc(100% - 110px);
  }
  body.home .content section.news .news-deco {
    padding: 35px 40px 15px;
  }
  body.home .content section.news .news-deco:before {
    right: calc(100% + 20px);
    width: 182px;
    height: 16px;
  }
  body.home .content section.news .news-deco:after {
    left: calc(100% + 20px);
    width: 211px;
    height: 16px;
  }
  body.home .content section.brand .wid.wid-home-product .slick {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 40px;
  }
  body.home .content section.brand .wid.wid-home-product .slick .slick_item {
    padding: 0 15px;
  }
  body.home .content .wid.wid-home-news .txt-list li a {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  body.home .content .wid.wid-home-product .slick .list_item .kind {
    margin-top: 10px;
  }
  body.home .content .wid.wid-home-product .slick .list_item .info {
    padding: 5px 0;
  }
  body.home .content .wid.wid-home-product .slick .list_item .info .title {
    font-size: 0.9375rem;
  }
  body.home .content .wid.wid-home-product .slick .list_item .info .sub {
    font-size: 0.9375rem;
  }
  body.home .content .wid.wid-home-product .slick .list_item .info .price {
    font-size: 1.25rem;
  }
  body.home .content .wid.wid-home-news .list .list_item .info {
    padding: 20px 10px;
  }
  body.home .content .slick-nav a {
    font-size: 1rem;
  }
  body.show .btn-box .pager li > a {
    font-size: 1rem;
    min-width: 300px;
    padding: 1em 0.75em;
  }
  body.product.show .content > .row:first-child {
    --bs-gutter-x: 60px;
  }
  body.product.show .content .info .h1 {
    font-size: 1.5rem;
  }
  body.product.show .content .info .sub {
    font-size: 1rem;
  }
  body.product.show .content .info .price {
    font-size: 2.5rem;
  }
  body.product.show .content .nav {
    margin-top: 30px;
  }
  body.product.show .content .nav > li > a {
    font-size: 1.25rem;
  }
  body.product.show .content .tab-content ~ .related {
    margin-top: 70px;
  }
  body.product.show .content .related {
    padding-top: 80px;
  }
  body.product.show .content section.related .product-list.slick {
    margin-left: -25px;
    margin-right: -25px;
  }
  body.product.show .content section.related .product-list.slick .slick_item {
    padding: 0 25px;
  }
  body.cart .content .invoice-title {
    margin-top: 10px;
    /*margin-left: 15px;*/
  }
}
@media (max-width: 991px) {
  .btn-more {
    font-size: 0.9375rem;
    min-width: 200px;
  }
  .header {
    z-index: auto;
  }
  .header .navbar {
    width: 100%;
    z-index: 101;
    top: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  }
  .header .navbar .navbar-header {
    float: none;
    clear: both;
    z-index: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .header .navbar .navbar-brand {
    display: block;
    background-position: center;
    float: none;
    width: 158px;
    height: 40px;
    margin: 9px auto;
  }
  .header .navbar .navbar-toggle {
    display: block;
    float: none;
    margin: 0;
    border: none;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    /*padding-left: 14px;*/
    position: absolute;
    /*right: auto;*/
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    transition: all 0.5s ease;
    z-index: 9999;
  }
  .header .navbar .navbar-toggle:hover {
    background: none;
    color: #fff;
  }
  .header .navbar .navbar-toggle .icon-bar {
    transition: all 0.3s ease;
    background-color: var(--primary-color);
  }
  .header .navbar .navbar-toggle .icon-bar:nth-child(3) {
    transform: rotate(-45deg);
    margin-top: -8px;
  }
  .header .navbar .navbar-toggle .icon-bar:nth-child(2) {
    opacity: 0;
  }
  .header .navbar .navbar-toggle .icon-bar:first-child {
    transform: rotate(45deg);
    margin-top: 0;
  }
  .header .navbar .navbar-toggle.collapsed:before {
    transform: translate(-50%, -50%);
  }
  .header .navbar .navbar-toggle.collapsed .icon-bar {
    transform: rotate(0deg);
    margin-top: 0;
    background-color: var(--primary-color);
  }
  .header .navbar .navbar-toggle.collapsed .icon-bar + .icon-bar {
    margin-top: 5px;
  }
  .header .navbar .navbar-toggle.collapsed .icon-bar:nth-child(2) {
    opacity: 1;
  }
  .header .navbar .navbar-collapse {
    border: none;
    position: fixed;
    top: 58px;
    right: 0;
    left: auto;
    width: 70%;
    max-width: 220px;
    height: calc(100vh - 58px) !important;
    background: #f7f7f7;
    opacity: 0;
    display: block !important;
    pointer-events: none;
    transform: translateX(100%);
    padding: 0;
    margin: 0;
    text-align: center;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25);
  }
  .header .navbar .navbar-collapse.collapse {
    transition: all 0.5s ease;
  }
  .header .navbar .navbar-collapse.collapsing {
    border: none;
    position: fixed;
    top: 58px;
    right: 0;
    left: auto;
    width: 70%;
    max-width: 250px;
    height: calc(100vh - 58px) !important;
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
    background-size: cover;
    transform: translateX(100%);
    padding: 0;
    text-align: center;
    transition: all 0.5s ease;
  }
  .header .navbar .navbar-collapse.in {
    opacity: 1;
    pointer-events: visible;
    transform: translateX(0);
    transition: all 0.5s ease;
  }
  .header .navbar .navbar-collapse.in .navbar-nav {
    opacity: 1;
    transition-delay: 0.3s;
    transform: translateY(0);
  }
  .header .navbar .navbar-nav {
    /*border-top: 2px solid #52ced5;*/
    clear: both;
    float: none;
    text-align: center;
    background: none;
    width: 100%;
    max-width: unset;
    padding: 0;
    margin: 0 auto;
    /*min-height: 100vh;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .header .navbar .navbar-nav > li {
    display: block;
    float: none;
    margin: 0;
    flex: 1 1 100%;
    width: 100%;
  }
  .header .navbar .navbar-nav > li + li {
    margin: 0;
  }
  .header .navbar .navbar-nav > li + li:before {
    display: none;
  }
  .header .navbar .navbar-nav > li.open > a {
    color: var(--primary-color);
  }
  .header .navbar .navbar-nav > li a {
    font-size: 16px;
    font-weight: 400;
  }
  .header .navbar .navbar-nav > li a::after {
    bottom: 0;
    display: none;
  }
  .header .navbar .navbar-nav > li ul {
    background: transparent;
  }
  .header .navbar .navbar-nav li a {
    width: auto;
    text-align: center;
    padding: 14px 16px;
    background: none;
    border-bottom-width: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 400;
    text-align: start;
  }
  .header .navbar .navbar-nav li a .title-sub {
    color: var(--grey-color);
  }
  .header .navbar .navbar-nav li a:hover, .header .navbar .navbar-nav li a:focus, .header .navbar .navbar-nav li a:active {
    background: rgba(var(--primary-color-rgb), 0.1);
    color: var(--text-color);
  }
  .header .navbar .navbar-nav li a:hover .title-sub, .header .navbar .navbar-nav li a:focus .title-sub, .header .navbar .navbar-nav li a:active .title-sub {
    color: #fff;
  }
  .header .navbar .navbar-nav li a .caret {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    border-top-color: var(--primary-color);
    transition: all ease 0.3s;
  }
  .header .navbar .navbar-nav li a .txt-en {
    display: none;
  }
  .header .navbar .navbar-nav li.open > a {
    background: rgba(var(--primary-color-rgb), 0.2);
  }
  .header .navbar .navbar-nav li.open > a .caret {
    transform: scaleY(-1);
  }
  .header .navbar .navbar-nav li:last-child a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .header .navbar .navbar-nav > li > ul > li > a {
    font-size: 15px;
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu {
    transform: translate(0);
    left: 0;
    margin-top: 0;
    margin-bottom: -1px;
    width: 100%;
    box-shadow: none;
    background: rgba(var(--primary-color-rgb), 0.05);
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li {
    margin-top: 0;
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li + li {
    margin-top: 0;
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li:last-child {
    margin-bottom: 0;
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li a {
    padding: 10px 20px;
    text-align: start;
    color: var(--text-color) !important;
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li a:hover, .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li a:focus, .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li a:active {
    color: var(--text-color) !important;
    background: rgba(var(--primary-color-rgb), 0.2);
  }
  .header .navbar .navbar-nav .dropdown_submenu .dropdown-menu li ul li a {
    padding: 8px 25px;
    font-size: 14px;
  }
  .header .navbar .navbar-nav li.hover_r_sider.dropdown_submenu {
    margin-top: 0;
    margin-bottom: 0;
  }
  .header .navbar .navbar-nav .open .dropdown-menu {
    position: static;
  }
  .header .navbar .nav_btn_group {
    /*position: static;*/
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /*display: none;*/
    flex-wrap: wrap;
  }
  .header .navbar .nav_btn_group .sub-nav {
    position: static;
    margin: 0;
    text-align: center;
    display: flex;
  }
  .header .navbar .nav_btn_group .sub-nav li.cart a a, .header .navbar .nav_btn_group .sub-nav li.help a a, .header .navbar .nav_btn_group .sub-nav li.search a {
    padding: 0;
    background: #fff;
    color: var(--primary-color);
  }
  .header .navbar .nav_btn_group .sub-nav li.cart a a:hover, .header .navbar .nav_btn_group .sub-nav li.cart a a:focus, .header .navbar .nav_btn_group .sub-nav li.cart a a:active, .header .navbar .nav_btn_group .sub-nav li.help a a:hover, .header .navbar .nav_btn_group .sub-nav li.help a a:focus, .header .navbar .nav_btn_group .sub-nav li.help a a:active, .header .navbar .nav_btn_group .sub-nav li.search a:hover, .header .navbar .nav_btn_group .sub-nav li.search a:focus, .header .navbar .nav_btn_group .sub-nav li.search a:active {
    background: #fff;
    color: var(--primary-color);
  }
  .header .navbar .func-nav .dropdown-menu {
    position: fixed;
    top: 56px;
    right: 0;
    box-shadow: none;
    border-radius: 0;
    background: #f3f3f3;
  }
  .header .navbar .func-nav li a .num {
    width: 1rem;
    height: 1rem;
    left: 1em;
  }
  .header .navbar .btn-default {
    color: #333;
  }
  .header .navbar .lang {
    position: static;
    display: block;
    text-align: center;
    text-align: start;
    margin: 0;
    max-width: unset;
    background: transparent;
  }
  .header .navbar .lang ul li {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .header .navbar .lang ul li + li {
    margin: 0;
  }
  .header .navbar .lang ul li + li:before {
    display: none;
  }
  .header .navbar .lang ul li a {
    display: block;
    height: auto;
    font-size: 16px;
    padding: 10px 16px 6px;
    text-align: start;
  }
  .header .navbar .lang ul li a:hover, .header .navbar .lang ul li a:focus, .header .navbar .lang ul li a:active {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-color-reverse);
  }
  .header .navbar .lang .btn {
    display: block;
    width: 100%;
    float: none;
    padding: 8px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .header .navbar .lang:active .header .navbar .lang .btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .header .navbar .lang .dropdown-backdrop {
    display: none;
  }
  .header .navbar .lang .dropdown-menu {
    position: static;
  }
  .header .navbar .func-nav {
    position: static;
    margin-left: auto;
    margin-right: 35px;
  }
  .header .navbar .func-nav ul {
    display: flex;
    gap: 8px;
    height: 100%;
    align-items: center;
  }
  .header .navbar .func-nav ul li {
    position: static;
  }
  .header .navbar .func-nav ul li a {
    font-size: 0.875rem;
  }
  .header .navbar .func-nav .wid {
    margin-bottom: 0;
  }
  .header .btn-default {
    color: #fff;
    border-color: #fff;
  }
  body.about .header .navbar .navbar-nav li.b1 a, body.about .header .navbar .navbar-nav li.b2 a, body.about .header .navbar .navbar-nav li.b3 a, body.about .header .navbar .navbar-nav li.b4 a, body.product .header .navbar .navbar-nav li.b1 a, body.product .header .navbar .navbar-nav li.b2 a, body.product .header .navbar .navbar-nav li.b3 a, body.product .header .navbar .navbar-nav li.b4 a, body.news .header .navbar .navbar-nav li.b1 a, body.news .header .navbar .navbar-nav li.b2 a, body.news .header .navbar .navbar-nav li.b3 a, body.news .header .navbar .navbar-nav li.b4 a, body.contact .header .navbar .navbar-nav li.b1 a, body.contact .header .navbar .navbar-nav li.b2 a, body.contact .header .navbar .navbar-nav li.b3 a, body.contact .header .navbar .navbar-nav li.b4 a {
    color: var(--text-color);
    /*background: rgba(255,255,255,0.3);*/
  }
  .banner .bxslider .item {
    height: auto !important;
    background: none !important;
  }
  .banner .bxslider .item img.img_small {
    display: block;
  }
  .banner .bxslider .bannerImgBox:not(.banner_mob_bg) .item img.img_small {
    display: block;
  }
  .banner .bxslider .item img.img_big, .banner .bxslider .bannerImgBox:not(.banner_mob_bg) .item img.img_big {
    display: none;
  }
  .banner .slick-dots {
    padding: 5px;
  }
  .banner .slick-prev, .banner .slick-next {
    z-index: 10;
  }
  .banner .slick-prev {
    left: 0;
  }
  .banner .slick-next {
    right: 0;
  }
  .main_content > .container {
    width: 100%;
  }
  .side {
    padding-bottom: 20px;
  }
  .side .h3 {
    /*margin-top: 10px;*/
  }
  .side .nav {
    max-width: none;
    margin: 0;
  }
  .side .nav > li {
    /*                float: none;
    display: inline-block;
    border: 0;
    margin: 0 5px;
    vertical-align: top;*/
  }
  .side .nav > li + li {
    border: 0;
  }
  .side1 .wid {
    max-width: none;
  }
  .side1 .side-toggle {
    border: 1px solid #ddd;
    margin-top: 10px;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 0.875rem;
  }
  .side1 .side-toggle > .glyphicon {
    margin-right: 5px;
  }
  .content .list-box .txt-list li span.news-title {
    float: left;
    color: var(--second-color);
    width: 83%;
  }
  .content .txt img {
    width: auto;
  }
  .content > .h2:after {
    top: 0;
  }
  .content .table.table-stack > thead > tr > th,
  .content .table.table-stack > tbody > tr > th {
    font-size: 16px;
  }
  .content .table.table-stack > thead > tr > td,
  .content .table.table-stack > tbody > tr > td {
    font-size: 14px;
  }
  .content .table.table-stack > tbody > tr > td.pic {
    width: 140px;
  }
  .content .table.table-stack > tbody > tr > td.pic img {
    margin-bottom: 10px;
  }
  .content .table.table-stack > tbody > tr > td.discount {
    width: 28%;
  }
  .content .product-list .h4 {
    font-size: 1.125rem;
  }
  .content .product-list .sub {
    font-size: 1rem;
  }
  .content .product-list .info {
    padding: 20px 15px;
  }
  .content .product-list ul li .price-lighthigh {
    font-size: 1.5rem;
  }
  .content section .h3 .txt-en {
    max-width: unset;
  }
  .content > .h2,
  body.about .content > .h1,
  body.doc .content > .h1,
  body.order .content .h2.t04 {
    font-size: 1.75rem;
    margin-bottom: 0.5em;
  }
  body.about .content > .h1 ~ .eZShareBar,
  body.order .content .h2.t04 ~ .eZShareBar {
    margin-top: -0.5rem;
  }
  .filter-box {
    margin-bottom: 15px;
  }
  .wid-search .form-group {
    width: auto;
    vertical-align: top;
  }
  .wid-search .form-group .form-control {
    width: auto;
    vertical-align: top;
  }
  .footer .footer_top ul li {
    padding: 5px;
  }
  .footer .footer_top ul li a {
    padding: 5px;
  }
  .footer .footer-brand {
    width: 253px;
    height: 45px;
  }
  .footer .footer_content {
    font-size: 0.75rem;
  }
  .footer .cominfo {
    margin-left: 20px;
    margin-right: 20px;
    font-size: 0.75rem;
  }
  .footer .cominfo label {
    font-size: 0.75rem;
  }
  .footer .siteinfo {
    margin-bottom: 40px;
  }
  .footer .siteinfo ul > li {
    gap: 5px;
  }
  .footer .siteinfo ul > li .icon > * {
    font-size: 2.125rem;
  }
  .footer .siteinfo ul > li label {
    font-size: 0.75rem;
    margin-bottom: 2px;
  }
  .footer .siteinfo ul > li a {
    font-size: 0.75rem;
  }
  .footer .powered {
    font-size: 0.75rem;
  }
  body.home .content section {
    /*padding: 35px 0;*/
  }
  body.home .content section .h2 {
    font-size: 1.75rem;
    margin-bottom: 1.25em;
  }
  body.home .content section.about {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  body.home .content section.about:before {
    width: 7%;
    height: 38%;
  }
  body.home .content section.about .row {
    flex-direction: column-reverse;
  }
  body.home .content section.about .pic-box .deco {
    font-size: 6.2vw;
    bottom: 70%;
  }
  body.home .content section.about .text-box {
    margin-left: 4vw;
    padding-bottom: 3%;
    margin-bottom: 80px;
  }
  body.home .content section.about .text-box:before {
    border-bottom-width: 1px;
  }
  body.home .content section.product .nav {
    margin-bottom: 10px;
  }
  body.home .content section.product .nav > li > a {
    font-size: 1.125rem;
    padding: 7px 10px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info {
    padding: 25px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .title {
    font-size: 1rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .sub {
    font-size: 1rem;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info .price {
    font-size: 1.75rem;
  }
  body.home .content section.product .wid.wid-home-product .slick {
    margin-bottom: 20px;
  }
  body.home .content section.news {
    padding: 50px 0;
  }
  body.home .content section.news.aos-animate:before {
    top: calc(100% - 90px);
  }
  body.home .content section.news .news-deco {
    padding: 30px 35px 15px;
  }
  body.show .btn-box .pager li > a {
    font-size: 0.9375rem;
    min-width: 240px;
    padding: 0.75em 0.5em;
  }
  body.product.show .content .nav {
    margin-top: 20px;
  }
  body.product.show .content .nav > li > a {
    font-size: 1.125rem;
  }
  body.product.show .content .tab-content ~ .related {
    margin-top: 30px;
  }
  body.product.show .content .related {
    padding-top: 40px;
  }
  body.product.show .content .related .h3 {
    float: left;
    margin-bottom: 30px;
  }
  body.product.show .content .related .h3 ~ .slick-nav {
    margin-top: 15px;
    float: right;
  }
  body.member .content .btn-box {
    margin-left: 0;
  }
  body.cart .content .invoice-title {
    margin-top: 0;
    margin-left: 5px;
  }
  body.contact .content .contact-box .h3 {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .btn-more {
    min-width: 160px;
  }
  /*#floating.isToggle*/
  #floating.isToggle {
    top: 40px;
    margin-top: 0;
  }
  #floating.isToggle.fixed {
    top: 40px;
    margin-top: 0;
  }
  #floating.isToggle .btn-floating {
    display: block;
  }
  #floating.isToggle ul {
    width: 0;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  #floating.isToggle.open ul {
    width: 60px;
  }
  #floating.isFixed {
    /*margin: 0;
    top: auto;
    left: 0;
    bottom: 0;*/
    bottom: 25px;
    right: 15px;
  }
  #floating.isFixed.fixed {
    /*margin: 0;
    top: auto;
    left: 0;
    bottom: 0;*/
  }
  #floating.isFixed ul {
    /*display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;*/
  }
  #floating.isFixed ul li {
    /*+ li {
        border: none;
    }*/
  }
  #floating.isFixed ul li a {
    width: 50px;
    height: 50px;
  }
  #floating.isFixed ul li.line a {
    height: 50px;
  }
  /*#floating.isFixed*/
  body.about .header .navbar .navbar-nav li.b1 a, body.product .header .navbar .navbar-nav li.b2 a, body.news .header .navbar .navbar-nav li.b3 a, body.contact .header .navbar .navbar-nav li.b4 a {
    color: var(--text-color);
    /*background: var(--primary-color);*/
  }
  .footer {
    padding: 30px 0 10px;
  }
  .footer .footer-brand {
    width: 225px;
    height: 40px;
  }
  .footer .footer_content {
    font-size: 0.75rem;
  }
  .footer .footer_content p {
    font-size: 0.75rem;
  }
  .footer .siteinfo ul > li label {
    margin-bottom: 0;
  }
  .footer .siteinfo {
    margin-bottom: 30px;
  }
  .fancybox-skin {
    width: 580px !important;
    max-width: 90vw;
  }
  .modal-dialog {
    width: 90vw;
  }
  .main {
    z-index: auto;
  }
  .main_content {
    padding: 35px 0;
  }
  .side {
    padding-bottom: 5px;
  }
  .side .nav {
    margin-bottom: 15px;
  }
  .side .nav > li {
    /*float: none;
    display: block;
    margin: 0;*/
  }
  .side .nav > li + li {
    /*border-top: 1px solid #ABCFDB;*/
  }
  .side1 .side-toggle {
    /*margin-bottom: 0;*/
  }
  .wid-search .h3, .wid-search .form-inline {
    display: block;
    width: auto;
  }
  .wid-search .form-group {
    margin: 0;
    width: 100%;
  }
  .wid-search .form-group .form-control {
    width: 100%;
  }
  .wid-search .btn {
    /* width: 100%;*/
  }
  .wid-slideBanner .jcarousel-control-prev {
    left: -17px;
  }
  .wid-slideBanner .jcarousel-control-next {
    right: -17px;
  }
  .content > .h2 .txt-tw {
    display: block;
    margin: 0;
  }
  .content .txt {
    padding-left: 10px;
  }
  .content .txt img {
    max-width: 100%;
  }
  .content .product-list .pic .quick-buy {
    position: sticky;
    opacity: 1;
  }
  .content .product-list .add-cart {
    position: sticky;
    opacity: 1;
  }
  .content .list-box {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }
  .content .list-box .txt-list li.list-header {
    display: none;
  }
  .content .list-box .txt-list li a {
    padding: 6px 50px 10px 0;
  }
  .content .list-box .txt-list li span {
    font-size: 0.875rem;
    font-weight: 300;
    position: static;
    float: none;
    display: table;
    /*margin-top: 5px;*/
    transform: translateY(0%);
    /*padding: 0;*/
  }
  .content .list-box .txt-list li span.date {
    font-size: 0.9375rem;
    margin-bottom: 5px;
  }
  .content .btn-box {
    text-align: center;
    display: block;
  }
  .content .btn-box .pager, .content .btn-box .page-info {
    float: none;
  }
  .content .btn-box .pager {
    display: block;
  }
  .content .btn-box .pager li {
    margin: 0;
  }
  .content .btn-box .pager li > a {
    width: 100%;
    min-width: 2em;
    margin: 5px 0 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    padding: 5px;
    font-size: 14px;
    line-height: 1.2em;
  }
  .content .btn-box .page-info select {
    width: 100px;
    display: inline-block;
  }
  .content .btn-box .pull-right {
    float: none;
  }
  .content .sec {
    padding: 10px 0;
  }
  .content .sec .sum {
    padding: 5px;
    line-height: 1.6;
  }
  .content .form-horizontal .row .form-inline .btn-list {
    /*top: -28px;*/
  }
  .content .form-horizontal .row .form-inline label {
    padding-left: 0;
  }
  .content .form-horizontal .holiday-delivery {
    margin-top: 10px;
  }
  .content .table.table-stack > thead {
    display: none;
  }
  .content .table.table-stack tbody > tr {
    display: block;
    clear: both;
    border-bottom: 1px dotted #ccc;
    position: relative;
    padding: 0;
  }
  .content .table.table-stack tbody > tr:last-child {
    border: none;
  }
  .content .table.table-stack tbody > tr > td {
    display: flex;
    /*align-items: center;*/
    align-items: stretch;
    clear: both;
    border: none;
    text-align: start;
    padding: 0;
    line-height: 1.8em;
    font-size: 15px;
    gap: 5px;
  }
  .content .table.table-stack tbody > tr > td.table-cell {
    display: table-row;
  }
  .content .table.table-stack tbody > tr > td.d-block {
    display: block;
  }
  .content .table.table-stack tbody > tr > td.num {
    display: none;
  }
  .content .table.table-stack tbody > tr > td .tn {
    display: block;
    font-size: 15px;
    color: var(--text-color-reverse);
    background: var(--primary-color);
    width: 5.5em;
    flex: 0 0 auto;
    text-align: start;
    height: 100%;
    padding: 5px 6px;
    line-height: 1.2em;
  }
  .content .table.table-stack tbody > tr > td .tn.long {
    width: 7em;
  }
  .content .table.table-stack tbody > tr > td .input-group {
    margin: 0;
  }
  .content .table.table-stack tbody > tr > td .collapse, .content .table.table-stack tbody > tr > td .collapsing {
    width: 100%;
  }
  .content .table.table-stack tbody > tr > td.pic {
    width: 100px;
    min-height: 55px;
    align-items: flex-start;
  }
  .content .table.table-stack tbody > tr > td.pic > .row {
    width: 100%;
    display: flex;
    margin: 0;
  }
  .content .table.table-stack tbody > tr > td.pic > .row .col-auto {
    flex: 0 0 85px;
    padding: 0 !important;
  }
  .content .table.table-stack tbody > tr > td.pic > .row .col {
    flex: 1 1 auto;
  }
  .content .table.table-stack tbody > tr > td.pic.small {
    width: 60px;
  }
  .content .table.table-stack tbody > tr > td.pic a {
    display: flex;
    align-items: center;
    font-size: 1em;
    position: relative;
    /*height: 55px;*/
    padding-top: 100%;
  }
  .content .table.table-stack tbody > tr > td.pic img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    object-fit: contain;
    object-position: left center;
  }
  .content .table.table-stack tbody > tr > td.discount {
    width: 100%;
  }
  .content .table.table-stack tbody > tr > td.del {
    display: block;
    position: absolute;
    right: 5px;
    top: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
  }
  .content .table.table-stack tbody > tr > td.qty {
    text-align: start;
    width: auto;
    /* position: absolute;
    left: 0;
    bottom: 5px;*/
  }
  .content .table.table-stack tbody > tr > td.count, .content .table.table-stack tbody > tr > td.total, .content .table.table-stack tbody > tr > td.price {
    text-align: end;
    justify-content: flex-end;
  }
  .content .table.table-stack tbody > tr > td.price .tn {
    display: inline-block;
  }
  .content .table.table-stack tbody > tr > td.inquiry, .content .table.table-stack tbody > tr > td.message, .content .table.table-stack tbody > tr > td.reply, .content .table.table-stack tbody > tr > td.detail {
    position: absolute;
    right: 5px;
    width: auto;
  }
  .content .table.table-stack tbody > tr > td.detail {
    bottom: 5px;
    right: 5px;
  }
  .content .table.table-stack tbody > tr > td.inquiry, .content .table.table-stack tbody > tr > td.reply {
    top: 5px;
  }
  .content .table.table-stack tbody > tr > td.message {
    top: 50px;
  }
  .content .table.table-stack tbody > tr > td.fit {
    width: 100%;
    white-space: normal;
  }
  .content .table.table-stack tbody > tr > td.fit .btn, .content .table.table-stack tbody > tr > td.del .btn, .content .table.table-stack tbody > tr > td.inquiry .btn {
    padding: 6px 7px;
    font-size: 14px;
  }
  .content .table.table-stack td.min, .content .table.table-stack th.min {
    width: 100%;
    text-align: start;
    white-space: normal;
  }
  .content .table.table-stack.no-border tbody > tr {
    padding-bottom: 0;
  }
  .content .table.table-stack.no-border th {
    display: block;
    text-align: start;
    width: 100%;
    padding: 8px;
  }
  .content .table.table-stack.no-border td {
    padding: 8px !important;
    display: block !important;
  }
  .content .table.table-stack.list01 tbody > tr {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: start;
  }
  .content .table.table-stack.list01 tbody > tr > td {
    display: block;
    flex: 1 0 auto;
    line-height: 1.4em;
    clear: right;
    margin: 5px 0;
    padding: 0;
  }
  .content .table.table-stack.list01 tbody > tr > td:last-child {
    margin-top: 0;
    margin-bottom: 5px;
  }
  .content .table.table-stack.list01 tbody > tr > td.pic {
    /*flex: 0 0 auto;*/
    /*float: left;*/
    grid-area: 1/1/6/2;
    margin: 10px 10px 15px;
  }
  .content .table.table-stack.list01 tbody > tr > td.count, .content .table.table-stack.list01 tbody > tr > td.total {
    text-align: start;
  }
  .content .table.table-stack.list01 tbody > tr > td.count .tn, .content .table.table-stack.list01 tbody > tr > td.total .tn {
    padding: 0;
    margin-right: 10px;
  }
  .content .table.table-stack.list01 tbody > tr > td.qty, .content .table.table-stack.list01 tbody > tr > td.price {
    flex: 0 0 auto;
    display: inline-block;
    width: auto;
    text-align: start;
  }
  .content .table.table-stack.list01 tbody > tr > td.qty .tn, .content .table.table-stack.list01 tbody > tr > td.price .tn {
    padding: 0;
    margin-right: 10px;
  }
  .content .table.table-stack.list01 tbody > tr > td .tn {
    display: inline-block;
    padding: 5px;
    width: auto;
    background: transparent;
    color: var(--text-color);
  }
  .content .table.table-stack.list01 tbody > tr > td:not(.pic) a {
    display: inline-block;
    max-width: calc(100vw - 135px);
    /*overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;*/
  }
  .content .number-spinner button,
  .content .number-spinner .btn {
    height: 34px !important;
    padding: 7px 9px !important;
  }
  .content .wholesale .table > thead > tr > th, .content .wholesale .table > tbody > tr > th {
    padding: 6px;
    font-size: 0.9375rem;
  }
  .content .wholesale .table tbody > tr > td {
    font-size: 0.9375rem;
    padding: 10px 7px;
  }
  .content .func-area {
    flex-wrap: wrap;
  }
  .content .func-area > * {
    flex: 1 1 100%;
  }
  .content .func-area .search {
    flex-wrap: wrap;
  }
  .content .func-area .search .search-text {
    margin-top: 5px;
  }
  .content .page-box .pagination .page-item {
    margin: 0 3px;
  }
  .content .page-box .pagination .page-item .page-link {
    font-size: 14px;
    padding: 0.7em 0.3em 0.5em;
    width: 33px;
  }
  .content .works-box .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -20px;
  }
  .content .works-box .bx-wrapper .bx-controls-direction a.bx-next {
    right: -20px;
  }
  .card-body {
    padding: 0.5rem 0.5rem;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  .pic-gallery {
    margin-left: 0;
  }
  .pic-gallery .pic-stage {
    width: 100%;
  }
  .pic-gallery .pic-pager {
    display: none;
  }
  .pic-gallery .pic-stage .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -24px;
  }
  .pic-gallery .pic-stage .bx-wrapper .bx-controls-direction a.bx-next {
    right: -24px;
  }
  .faq-box {
    margin-left: 0;
  }
  .banner .bx-wrapper .bx-pager.bx-default-pager {
    display: none;
  }
  .cookie {
    font-size: 15px;
    padding: 15px 10px;
    z-index: 1000;
  }
  .cookie > .container-fluid .row {
    flex-direction: column;
  }
  .cookie .txt {
    margin-right: 0;
  }
  .cookie .agree-btn {
    margin-top: 10px;
    margin-right: auto;
    padding: 10px 15px;
    display: block;
    font-size: 15px;
  }
  .news-list .item .info {
    padding: 30px 15px;
  }
  .news-list.grid .item .info {
    padding: 20px 20px 30px;
  }
  .news-list.grid .item .info .title {
    font-size: 1.125rem;
  }
  body.home .content section .h2 {
    font-size: 1.5rem;
  }
  body.home .content section.about {
    padding-top: 70px;
    padding-bottom: 60px;
  }
  body.home .content section.about:before {
    width: 10px;
    height: 30%;
  }
  body.home .content section.about .pic-box .deco {
    font-size: 10.5vw;
    bottom: 61%;
  }
  body.home .content section.about .text-box {
    margin-bottom: 70px;
  }
  body.home .content section.about .text-box .title {
    margin-bottom: 1.25em;
  }
  body.home .content section.news {
    padding: 40px 0;
  }
  body.home .content section.news .news-deco {
    padding: 20px 25px 15px;
    margin-left: 20px;
    margin-right: 20px;
  }
  body.home .content section.news .more-box {
    bottom: calc(100% + 25px);
    right: -25px;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info {
    padding: 20px;
  }
  body.home .content section.brand .wid.wid-home-product .slick {
    margin-left: -5px;
    margin-right: -5px;
  }
  body.home .content section.brand .wid.wid-home-product .slick .slick_item {
    padding: 0 5px;
  }
  body.home .content .wid .slick .slick-arrow {
    height: 36px;
    width: 36px;
  }
  body.home .content .wid .slick .slick-arrow:before {
    font-size: 20px;
  }
  body.home .content .slick-nav > a {
    height: 36px;
    width: 36px;
    padding: 4px;
    font-size: 20px;
    text-align: center;
  }
  body.cart .content .uni-num {
    width: 140px;
  }
  body.cart .content .hint {
    float: none;
    clear: both;
  }
  body.cart .content .invoice-title {
    margin-top: 10px;
    margin-left: 0;
  }
  body.cart .content .invoice .btn-list {
    margin-top: 0;
  }
  body.cart .content .bargain li {
    display: block;
  }
  body.cart .content .bargain li + li {
    padding-top: 15px;
    margin-top: 5px;
    border-top: 1px solid #ddd;
  }
  body.cart .content .bargain li .tag {
    display: table;
    width: 8em;
  }
  body.cart .content .bargain li .plus {
    text-align: start;
  }
  body.cart .content .number-spinner input {
    height: 34px !important;
  }
  body.cart .content .btn-box {
    padding: 10px 0;
  }
  body.cart .content .btn-box .btn {
    width: 100%;
    float: none;
    margin-bottom: 5px;
  }
  body.product .content .product-list.mode1 .quick-buy ul {
    display: block;
    text-align: center;
  }
  body.product .content .product-list.mode1 .quick-buy ul li {
    display: block;
    text-align: center;
  }
  body.product .content .quick-buy .form-control {
    width: 80%;
    margin: 5px 0 0;
  }
  body.product .content .product-list.mode1 .quick-buy .form-control.qty {
    width: 80%;
    margin: 5px 0 0;
  }
  body.product .content .product-list.mode2 .item {
    flex-wrap: wrap;
    margin: 10px 0 30px;
    position: relative;
    border-radius: 10px;
  }
  body.product .content .product-list.mode2 .item > a {
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    padding: 0;
    width: 100%;
    float: none;
    display: block;
  }
  body.product .content .product-list.mode2 .item .pic {
    width: 100%;
    display: block;
    margin: 0;
    /*padding: 10px;
    border-radius: 10px 10px 0 0;*/
  }
  body.product .content .product-list.mode2 .item .info {
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 10px;
    padding-top: 10px;
  }
  body.product .content .product-list.mode2 .item .info .h4 {
    text-align: center;
  }
  body.product .content .product-list.mode2 .item .info ul {
    width: auto;
    text-align: center;
  }
  body.product .content .product-list.mode2 .item .info p {
    display: none;
  }
  body.product .content .product-list.mode2 .item .quick-buy {
    width: auto;
    float: none;
    /*padding: 10px 10px 50px;*/
    text-align: center;
  }
  body.product .content .product-list.mode2 .item .quick-buy .form-control {
    width: 80%;
    margin: 5px 0 0;
  }
  body.product .content .product-list.mode2 .item .quick-buy .btn {
    bottom: -38px;
    right: 50%;
    /*margin-right: -37px;*/
    margin-bottom: 0;
  }
  body.product.p02 .content .product-list.mode1 .item.i1 > a ul, body.product.p02 .content .product-list.mode1 .item.i2 > a ul, body.product.p02 .content .product-list.mode1 .item.i3 > a ul, body.product.p02 .content .product-list.mode1 .item.i4 > a ul {
    height: auto;
  }
  body.product.p02 .content .product-list.mode1 .item.hasQB > a {
    margin: 0;
  }
  body.product.quick .content .table.table-stack > tbody > tr > td {
    padding: 7px 4px;
  }
  body.product.quick .content .table.table-stack > tbody > tr > td.price {
    text-align: start;
    width: 100%;
  }
  body.product.quick .content .table.table-stack > tbody > tr > td .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  body.product.quick .content .table.table-stack > tbody > tr > td .tn {
    width: 6em;
    text-align: end;
    flex: 0 0 auto;
  }
  body.product.show .content .info .h3 {
    margin-top: 30px;
  }
  body.product.show .content .info .txt {
    min-height: 0;
  }
  body.product.show .content .quick-buy .btn, body.product.show .content .quick-buy .form-control {
    width: 100%;
    margin: 0;
  }
  body.product.show .content .quick-buy .shop_box .btn {
    margin: 0;
    border-radius: 0;
  }
  body.product.show .content > .h3 small {
    display: block;
    margin: 5px 0 0;
  }
  body.product.show .content section.related .product-list.slick {
    margin-left: -15px;
    margin-right: -15px;
  }
  body.product.show .content section.related .product-list.slick .slick_item {
    padding: 0 15px;
  }
  body.member .content .form-border {
    border: none;
    padding: 10px 0 0;
  }
  body.member .content .btn-box {
    padding-left: 0;
    border-top: 1px solid #6a5b54;
  }
  body.member .content .form-group .btn {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }
  body.member .content .nav-func li {
    flex: 0 1 32%;
  }
  body.member.register.finish .content .form-border {
    padding: 0;
  }
  body.member.forget .content .form-border {
    padding-top: 0;
  }
  body.member .content .form-border:before, body.member .content .form-border:after {
    display: none;
  }
  body.news .content > .h1, body.faq .content > .h1 {
    padding: 15px;
  }
  body.news .content > .h1 small, body.faq .content > .h1 small {
    position: static;
    display: block;
    line-height: 1.2em;
  }
  body.news .content .btn-box, body.faq .content .btn-box {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }
  body.news .content .btn-box, body.faq .content .btn-box {
    margin-left: 0;
    padding-left: 0;
  }
  body.order.list .content .card .table.table-stack tbody > tr > td {
    display: block;
    padding: 0 8px;
  }
  body.order.list .content .card .table.table-stack tbody > tr > td.pic {
    padding: 8px;
  }
  body.order.list .content .card .table.table-stack tbody > tr > td .tn {
    padding: 5px;
    width: auto;
    background: transparent;
    color: var(--text-color);
  }
  body.storage .content .table.table-stack tbody > tr > td {
    display: block;
  }
  body.storage .content .table.table-stack tbody > tr > td.chk {
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 1;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.storage .content .table.table-stack tbody > tr > td.chk input {
    width: 20px;
    height: 20px;
  }
  body.storage .content .table.table-stack tbody > tr > td:not(.pic) {
    padding: 0;
  }
  body.show .content .card .table.table-stack tbody > tr > td, body.member:not(.list) .content .card .table.table-stack tbody > tr > td {
    padding: 0;
  }
}
@media (max-width: 640px) {
  .header .navbar .func-nav ul li a {
    /* .text {
        display: none;
    }*/
  }
  .header .navbar .func-nav ul li a .num {
    top: 0.125em;
    left: calc(50% - 1.875em);
  }
  .header .navbar .func-nav ul li:not(.search) {
    --float-width: 33.33%;
    position: fixed;
    width: var(--float-width);
    top: auto;
    bottom: 0;
  }
  .header .navbar .func-nav ul li:not(.search) a {
    color: #fff;
    background: var(--main-color);
    padding: 0.5em 0.25em;
    text-align: center;
  }
  .header .navbar .func-nav ul li:not(.search) a:hover {
    background: var(--sixth-color);
  }
  .header .navbar .func-nav ul li:not(.search):nth-child(1) {
    left: 0;
  }
  .header .navbar .func-nav ul li:not(.search):nth-child(3) {
    left: calc(var(--float-width) * 1);
  }
  .header .navbar .func-nav ul li:not(.search):nth-child(4) {
    left: calc(var(--float-width) * 2);
  }
  .footer {
    padding-bottom: 55px;
  }
  .footer .siteinfo {
    margin-bottom: 20px;
  }
  .footer .siteinfo ul > li {
    letter-spacing: 1px;
  }
  .gotop {
    bottom: 55px;
  }
  body.home .content section.news:before {
    left: 25%;
    right: 25%;
    width: 50%;
    padding-top: 50%;
  }
  body.home .content section.news.aos-animate:before {
    top: calc(100% - 70px);
  }
  body.member .content .nav.nav-pills li a {
    font-size: 18px;
    padding: 8px 10px;
  }
  body.member .side .nav > li {
    display: block;
  }
  body.member .side .nav > li a {
    text-align: start;
  }
  body.cart .content .progress-box {
    margin: 25px 0 15px;
    padding: 0 2vw;
  }
}
@media (max-width: 576px) {
  .btn-more {
    font-size: 0.9375rem;
    min-width: 120px;
  }
  .content .tag {
    font-size: 0.875rem;
  }
  .content .product-list .item {
    /*&.status {
        &:before {
            width: 100px;
            height: 40px;
            padding: 5px;
            font-size: 0.875rem;
            letter-spacing: 1px;
        }
    }*/
  }
  .content .product-list .item .info {
    padding: 15px 10px;
  }
  .content .product-list .item .sub {
    font-size: 0.9735rem;
  }
  .content .product-list .item .h4 {
    font-size: 1rem;
  }
  .content .product-list .item ul li .price-lighthigh {
    font-size: 1.25rem;
  }
  .content .product-pic {
    flex-direction: column;
  }
  .content .product-pic .big-pic {
    width: 100%;
    margin-bottom: 20px;
  }
  .content .product-pic .small-pic {
    width: 100%;
  }
  .content section .h3 {
    font-size: 1.125rem;
    padding-top: 20px;
  }
  .content section .h3 .txt-en {
    font-size: 1.4em;
  }
  .content .news-list .item .info {
    padding: 20px 10px;
  }
  .content .news-list .item .info .date,
  .content .news-list .item .info .kind {
    display: block;
  }
  .footer .footer_content address {
    display: block;
  }
  .footer .footer-brand {
    margin: 0 auto 15px;
  }
  .footer .cominfo {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .footer .sitemap ul {
    flex-wrap: wrap;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer .sitemap ul li:nth-child(6) {
    display: none;
  }
  .footer .siteinfo ul {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .footer .siteinfo ul > li {
    display: flex;
  }
  .footer .siteinfo ul > li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .footer .copyright,
  .footer .powered {
    display: block;
    margin: 5px;
  }
  body.home .content section.product .nav > li > a {
    min-width: 0;
  }
  body.home .content section.product .wid.wid-home-product .list_item .info {
    padding: 15px;
  }
  body.home .content .wid.wid-home-news .txt-list li a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body.product.show .content > .row:first-child {
    --bs-gutter-x: 30px;
  }
  body.product.show .content .product-pic {
    margin-bottom: 20px;
  }
  body.product.show .content .product-pic .small-pic {
    padding-right: 0;
    margin: 0;
  }
  body.product.show .content .product-pic .small-pic .slick-item {
    padding: 0 10px;
  }
  body.product.show .content .info .h1 {
    font-size: 1.25rem;
  }
  body.product.show .content .info .sub {
    font-size: 0.9375rem;
  }
  body.product.show .content .info .price {
    font-size: 2.25rem;
  }
  body.product.show .content .quick-buy .btn {
    font-size: 1rem;
  }
  body.product.show .content .slick-nav a {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
  }
  body.product.show .content section.related .product-list.slick {
    margin-left: -5px;
    margin-right: -5px;
  }
  body.product.show .content section.related .product-list.slick .slick_item {
    padding: 0 5px;
  }
}
@media (max-width: 480px) {
  .header .navbar .navbar-brand {
    width: 156px;
    height: 26px;
    margin: 12px auto 12px 0;
  }
  .header .navbar .navbar-collapse {
    top: 50px;
    height: calc(100vh - 50px) !important;
  }
  body.home .content section.about {
    padding-top: 50px;
    padding-bottom: 40px;
  }
  body.home .content section.about .text-box {
    margin-bottom: 50px;
  }
  body.home .content section.about .text-box .title {
    margin-bottom: 1em;
  }
  body.home .content section.about .text-box .desc {
    font-size: 1rem;
  }
  body.home .content .wid.wid-home-news .list.slick .slick_item {
    padding: 25px 20px;
  }
  body.cart .content .more-cart .item {
    flex-wrap: wrap;
    margin: 0;
  }
  body.cart .content .more-cart .item .pic, body.cart .content .more-cart .item .info {
    flex: 1 1 100%;
  }
  body.cart .content .more-cart .item .info {
    padding: 10px;
  }
  body.member .content .nav-func li {
    flex: 0 0 47%;
  }
}
@media (max-width: 435px) {
  .content .cart-step {
    gap: 5px;
    padding: 10px;
  }
  .content .cart-step .item .icon {
    font-size: 20px;
  }
  .content .cart-step .item .title {
    font-size: 0.9375rem;
  }
  .content .table.table-stack tbody > tr > th {
    font-size: 14px;
    line-height: 1.8em;
  }
  .content .table.table-stack tbody > tr > td {
    font-size: 14px;
    line-height: 1.8em;
  }
  .content .table.table-stack tbody > tr > td .tn {
    font-size: 14px;
    line-height: 1.3em;
  }
  .content .table.table-stack tbody > tr > td .btn {
    font-size: 13px;
    padding: 4px 5px;
    align-self: start;
  }
  .content .form-horizontal .row .form-inline .btn-list {
    position: static;
    display: table;
    margin-left: auto;
    margin-bottom: 10px;
  }
  body.home .content section.about {
    padding-top: 40px;
    padding-bottom: 30px;
  }
  body.home .content section.about .pic-box:before {
    width: 57px;
    height: 40px;
  }
  body.home .content section.about .text-box {
    margin-bottom: 40px;
  }
  body.home .content section.news.aos-animate:before {
    top: calc(100% - 50px);
  }
  body.home .content section.news .news-deco {
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
  }
  body.home .content section.news .news-deco:before {
    right: calc(100% + 18px);
    width: 136px;
    height: 12px;
  }
  body.home .content section.news .news-deco:after {
    left: calc(100% + 18px);
    width: 158px;
    height: 12px;
  }
  body.home .content section.news .more-box {
    bottom: -5px;
    right: calc(50% - 38px);
  }
}
@media (max-width: 375px) {
  .header .navbar > .container-fluid,
  .header .navbar > .container {
    padding-right: 10px;
    padding-left: 10px;
  }
  .header .navbar .func-nav {
    margin-right: 30px;
  }
  .header .navbar .func-nav ul {
    gap: 0;
  }
  .header .navbar .func-nav ul li a {
    font-size: 0.75rem;
  }
  .content .search-box .form-inline .w1 .form-control {
    max-width: unset;
    width: 100%;
  }
  .content .search-box .form-inline .w2 .form-control {
    max-width: calc(100% - 42px);
    width: 100%;
  }
  .content section .h3 .txt-en {
    max-width: 7em;
  }
}