@charset "utf-8";
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,body {
    min-height: 100%;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    background-color: #fff;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    line-height: 1.42857143;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}
body {
    font-size: 0.9375rem;
    color: #444;
}
body,
.menutop ul
{
    font-family: 'Be Vietnam Pro', sans-serif;
}
.prod-h .content-wrapper h3,
.news-h-cate,
.news-h-wrap h3,
.footer-wrapper .items:not(.h-card) .title,
.intro-h-wrapper .viewmore,
.items-wrapper .item .content-wrapper,
.heading,
.article .title
{
    font-family: 'Playfair Display', serif;
}
.header-logo,
.footer-wrapper .items:first-child h3:first-of-type,
.intro-h-wrapper .content-wrapper .title,
.menu-h-wrapper .menu-header,
.intro-h-wrapper .image-wrapper .text-wrapper .text-header
{
    font-family: 'Dancing Script', cursive;
}
.menutop,
.header-right
{
    font-family: 'Oswald', sans-serif;
}
button, label, textarea, input, select {
    font: inherit;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: none;
    box-shadow: none;
    color: #000;
}
input, textarea, select {
    border: 0.0625rem solid #ccc;
}
iframe {
    width: 100%;
    max-width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
}
figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}
button {
    cursor: pointer;
    background-color: transparent;
    border-width: 0;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    outline: 0 none;
    border: 0;
}
img:not([data-src]) {
    -webkit-animation: fadeInImages 1s ease;
    -moz-animation: fadeInImages 1s ease;
    animation: fadeInImages 1s ease;
}
@keyframes fadeInImages {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}
input, textarea, select, label, button {
    outline: none;
}
input[type="submit"], input[type="reset"], button[type="submit"], button[type="button"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
table {
    width: 100%;
    border-spacing: inherit;
    border-collapse: inherit;
    margin-top: 10px;
    margin-bottom: 20px;
}
tr:nth-of-type(odd) td {
    background-color: rgb(160 149 149/5%);
}
.un-odd tr:nth-of-type(odd) td {
    background-color: #fff;
}
td, th {
    padding: 10px;
    text-align: center;
}
thead th {
    padding: 15px 10px;
    font-weight: 500;
}
td {
    border-top: 0.0625rem solid #dee2e6;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
    margin-top: 0;
}
ins, del {
    font-weight: normal;
}
ins {
    text-decoration: none;
}
del {
    margin-right: 10px;
    color: #777;
    opacity: .7;
}
.bg-light {
    background-color: #f5f5f5;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.uppercase {
    text-transform: uppercase;
}
.tomato {
    color: tomato !important;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.price {
    color: #fc0134;
}
.borderbound {
    background-color: #fff;
    border: 0.0625rem solid rgba(38,56,150,.1411764705882353);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px 0 rgb(34 41 47 / 12%);
}
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
}
.container.flex {
    flex-wrap: wrap;
}
@keyframes slide-down{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}

.header-wrapper {
    position: relative;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 24px 0 rgba(34,41,47,.1);
    z-index: 10;
}
.header-wrapper.active {
    position: fixed;
    box-shadow: 0 0 2px rgb(0 0 0 / 10%), 0 1.25rem 40px rgb(0 0 0 / 18%);
    animation: slide-down .7s;
}
.header-wrapper .header {
    position: relative;
    height: 80px;
    align-items: center;
    justify-content: space-between;
}
.header-logo {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}
.header-right {
    align-items: center;
    font-size: 1rem;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    font-weight: 500;
}
.header-right .hotline {
    align-items: center;
}
.header-right .title {
    margin-right: 0.625rem;
}
.header-right .hotline a {
    color: #8a2be2;
}
.menutop,
.footer-wrapper .footer ul,
.menutop ul,
.accordion-body ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}
.menutop li {
    position: relative;
}
.menutop li a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 15px;
    height: 80px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1rem;
}
.menutop .multi::after,
.menutop ul li a::before,
.location a::after,
.menu-h-wrapper .accordion-header::after,
.menu-h-wrapper .accordion-body ul li a::before
{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.menutop .multi::after {
    content: "\f107";
    margin-left: 10px;
    margin-right: 5px;
}
.menutop ul {
    position: absolute;
    background-color: #fff;
    width: 190px;
    display: block;
    top: calc(100% + 20px);
    border-radius: 0 0 4px 4px;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.1);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: .3s;
    overflow: hidden;
    z-index: 9999;
}
.menutop li:hover ul {
    visibility: visible;
    pointer-events: all;
    top: 100%;
}
.menutop ul li:not(:last-of-type) {
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.menutop ul li a {
    text-transform: none;
    height: auto;
    padding: 0.625rem 0.9375rem;
    font-size: 0.875rem;
    font-weight: 400;
}
.menutop ul li a::before {
    position: relative;
    content: "\f0da";
    margin-right: 0.625rem;
    top: 1px;
}
.menutop li:hover > a {
    color: #3f51b5;
}
.widget {
    position: fixed;
    bottom: 200px;
    right: 25px;
    flex-wrap: wrap;
    width: 40px;
    z-index: 10;
}
.widget a {
    display: inline-flex;
    width: 100%;
    margin-bottom: 0.9375rem;
}
.widget img {
    width: 40px;
}
.section {
    position: relative;
    padding-top: 70px;
}
.intro-h-wrapper .item {
    width: 50%;
}
.intro-h-wrapper .item.bg-light {
    -ms-flex-align: center;
    align-items: center;
}
.intro-h-wrapper .content-wrapper {
    width: 75%;
    margin: auto;
    line-height: 170%;
}
.intro-h-wrapper .content-wrapper .title {
    line-height: 150%;
    font-size: 2rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
}
.intro-h-wrapper .image-wrapper {
    position: relative;
}
.intro-h-wrapper .image-wrapper .image {
    position: relative;
    display: flex;
    overflow: hidden;
}
.intro-h-wrapper .image-wrapper .image img,
.news-h-wrapper .image img
{
    width: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
    transition: transform 0.7s linear,-webkit-transform 0.7s linear;
}
.intro-h-wrapper .image-wrapper:hover .image img,
.news-h-wrapper .news-h:hover .image img
{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.intro-h-wrapper .image-wrapper .image::after,
.intro-h-wrapper .image-wrapper .image::before,
.news-h-wrapper .image-wrapper::after,
.news-h-wrapper .image-wrapper::before
{
    position: absolute;
    pointer-events: none;
    transition: all .5s ease-out 0s;
    content: "";
    z-index: 2;
}
.intro-h-wrapper .image-wrapper .image::before,
.news-h-wrapper .image-wrapper::before
{
    top: 10px;
    bottom: 10px;
    right: 20px;
    left: 20px;
    border-right: 0.0625rem solid #fff;
    border-left: 0.0625rem solid #fff;
    transform: scaleY(0);
}
.intro-h-wrapper .image-wrapper .image::after,
.news-h-wrapper .image-wrapper::after
{
    top: 20px;
    bottom: 20px;
    right: 10px;
    left: 10px;
    border-top: 0.0625rem solid #fff;
    border-bottom: 0.0625rem solid #fff;
    transform: scaleX(0);
}
.intro-h-wrapper .image-wrapper:hover .image::after,
.intro-h-wrapper .image-wrapper:hover .image::before,
.news-h-wrapper .news-h:hover .image-wrapper::after,
.news-h-wrapper .news-h:hover .image-wrapper::before
{
    opacity: 1;
    transform: none;
}
.intro-h-wrapper .image-wrapper .text-wrapper {
    position: absolute;
    background-color: rgba(0,0,0,.3);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    top: 0;
    left: 0;
    color: #fff;
}
.intro-h-wrapper .image-wrapper .text-wrapper * {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.intro-h-wrapper .image-wrapper .text-wrapper .text-header {
    position: relative;
    font-size: 2rem;
    margin-top: .2em;
    margin-bottom: 15px;
    padding-bottom: 20px;
    line-height: 1;
}
.intro-h-wrapper .image-wrapper .text-wrapper .text-header::after {
    background-color: rgba(255,255,255,.3);
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 3px;
    transform: translateX(-50%);
    content: "";
}
.intro-h-wrapper .image-wrapper .text-wrapper h3 {
    text-transform: uppercase;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    line-height: 1;
    font-size: 3em;
}
.intro-h-wrapper .image-wrapper .text-wrapper .hotline {
    font-size: 180%;
    font-weight: 700;
    color: #ffff00;
    margin-bottom: 1em;
    margin-top: 1em;
    letter-spacing: 2px;
}
.intro-h-wrapper .image-wrapper .text-wrapper p {
    margin-bottom: 1em;
    margin-top: 1em;
    line-height: 150%;
    max-width: 89%;
    text-align: center;
}
.viewmore {
    position: relative;
    margin-top: 1.25rem;
}
.viewmore a {
    background-color: #000;
    position: relative;
    display: inline-flex;
    padding: 0.9375rem 2.5rem;
    font-size: 0.8125rem;
    line-height: 1;
    text-transform: uppercase;
    border: 2px solid #000;
    letter-spacing: 0.125rem;
    color: #fff;
    transition: .4s;
    overflow: hidden;
}
.viewmore a:hover {
    background-color: #b8aa83;
    border-color: #b8aa83;
}
.heading {
    text-align: center;
    margin-bottom: 50px;
}
.heading .title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: .5rem;
    display: block;
}
.heading .title::after {
    background-color: #eec668;
    margin: 15px auto;
    display: block;
    content: "";
    width: 80px;
    height: 3px;
}
.heading p {
    width: 600px;
    margin: 0 auto;
    line-height: 160%;
}
.prod-h-wrapper {
    padding-bottom: 4.375rem;
}
.prod-h-wrapper .prod-h-wrap {
    flex-wrap: wrap;
    margin: 0 -0.625rem;
}
.prod-h-wrap .prod-h {
    width: 25%;
    padding: 0 0.625rem 0.625rem;
}
.prod-h-wrap .prod-h .box,
.prod-h-wrap .prod-h .image
{
    position: relative;
    overflow: hidden;
}
.prod-h-wrap .prod-h .image {
    background-color: #f5f5f5;
    display: flex;
    transition: .4s;
}
.prod-h-wrap .prod-h .image .overlay {
    position: absolute;
    background-color: rgba(247,248,249,.95);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem 1.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    z-index: 1;
}
.prod-h-wrap .prod-h .image:hover .overlay {
    opacity: 1;
}
.prod-h-wrap .prod-h .image .overlay .viewdetail {
    position: relative;
    display: inline-block;
    line-height: 1rem;
    -webkit-transform: translateY(25px);
    -ms-transform: translateY(25px);
    transform: translateY(25px);
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    opacity: 0;
}
.prod-h-wrap .prod-h .image .overlay .viewdetail::after {
    position: absolute;
    background-color: currentColor;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 0.0625rem;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    will-change: transform;
    content: "";
}
.prod-h-wrap .prod-h:hover .image .overlay .viewdetail {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.prod-h-wrap .prod-h .image .overlay .viewdetail:hover::after
{
    -webkit-animation: btn-simple-animation 1s cubic-bezier(.54,.32,.05,.96) forwards;
    animation: btn-simple-animation 1s cubic-bezier(.54,.32,.05,.96) forwards;
}
@-webkit-keyframes btn-simple-animation{0%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 0;transform-origin:100% 0}50%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 0;transform-origin:100% 0}51%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0}}
@keyframes btn-simple-animation{0%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 0;transform-origin:100% 0}50%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 0;transform-origin:100% 0}51%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0}}
@-webkit-keyframes btn_shine{100%{left:200%}}@keyframes btn_shine{100%{left:200%}}
.prod-h-wrap .prod-h .image img {
    width: 100%;
    object-fit: cover;
    transition: all .8s linear;
}
.prod-h-wrap .prod-h:hover .image img {
    transform: scale(1.04);
}
.prod-h-wrap .prod-h .image .saleoff {
    position: absolute;
    background-color: #e12c43;
    width: 110px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    top: 10px;
    right: -30px;
    letter-spacing: 0.0625rem;
    font-size: 0.75rem;
    padding: 0.3125rem 0.75rem;
    transform: rotate(45deg);
    z-index: 1;
    overflow: hidden;
}
.prod-h .content-wrapper {
    position: relative;
    text-align: center;
    padding: 1.25rem;
}
.prod-h .content-wrapper h3 {
    position: relative;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #000;
}
.news-h-wrapper {
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
}
.news-h-wrapper.news-wrapper,
.prod-h-wrapper.prod-wrapper
{
    padding-top: 0;
}
.news-h-wrapper .news-h-wrap {
    flex-wrap: wrap;
}
.news-h-wrapper .news-h {
    width: 33.33333333333333%;
    margin-bottom: 1.875rem;
}
.news-h-wrapper .box {
    position: relative;
    background-color: #fff;
    padding: 0.9375rem;
}
.news-h-wrapper .image-wrapper,
.news-h-wrapper .image
{
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
}
.news-h-wrapper .image {
    padding-bottom: 65%;
}
.news-h-wrap .image::after {
    background-color: rgba(0,0,0,.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    content: "";
    transition: .5s;
}
.news-h-wrap .news-h:hover .image::after {
    opacity: 1;
}
.news-h-wrapper .image img {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
}
.news-h-wrapper .news-h .image-wrapper:hover .image img {
    transform: scale(1.1);
}
.news-h-cate {
    text-transform: uppercase;
    color: #83868c;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.0625rem;
}
.news-h-wrap .content-wrapper {
    position: relative;
    padding: 0.9375rem;
    text-align: center;
}
.news-h-wrap h3 {
    position: relative;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 1.125rem;
}
.news-h-wrap h3 a {
    position: relative;
    padding-top: 0.3125rem;
    padding-bottom: 0.9375rem;
    margin-bottom: 0.9375rem;
    display: inline-flex;
    line-height: 150%;
    color: #000;
    transition: .4s;
}
.news-h-wrap h3 a::after {
    position: absolute;
    background-color: #b8aa83;
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 0.0625rem;
    transform: translateX(-50%);
    content: "";
}
.news-h-wrap p {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #83868c;
    line-height: 160%;
}
.news-h-wrap .viewmore {
    padding-top: 1rem;
}
.news-h-wrap .viewmore a {
    background-color: #fff;
    border-color: #bbb;
    border-width: 0.0625rem;
    font-size: 0.625rem;
    color: #444;
}
.news-h-wrap .viewmore:hover a {
    color: #000;
    border-color: #000;
}
.border-bottom {
    border-bottom: 0.0625rem solid #eee;
}
.footer-wrapper {
    position: relative;
    border-top: 1px solid #eee;
}
.footer-wrapper .footer {
    position: relative;
    padding: 3.125rem 0;
    line-height: 160%;
}
.footer-wrapper .container {
    justify-content: space-between;
}
.footer-wrapper .footer .items {
    width: 50%;
}
.footer-wrapper .items:not(.h-card) .title {
    position: relative;
    font-weight: 600;
    font-size: 1.0625rem;
    padding-bottom: 1.125rem;
    margin-bottom: 1.25rem;
    color: #000;
}
.footer-wrapper .items:first-child .title {
    font-weight: 600;
    color: #000;
}
.footer-wrapper .items:first-child h3:first-of-type {
    font-size: 32px;
    margin-top: 20px;
}
.footer-wrapper .items:first-child p {
    line-height: 170%;
}
.footer-wrapper .footer .items .item {
    width: 33.33333333333333%;
    padding: 0 1.25rem;
    margin-bottom: 1.25rem;
}
.footer-wrapper .footer ul li {
    position: relative;
    margin: 0.625rem 0;
    display: block;
    opacity: .8;
}
.footer-wrapper .footer ul li a {
    position: relative;
    display: inline-block;
}
.footer-wrapper .social {
    display: flex;
}
.footer-wrapper .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: .1s;
}
.footer-wrapper .social a:hover {
    color: #ff8029;
}
.footer-wrapper .copyright {
    font-size: 0.8125rem;
    padding: 1.625rem 0;
    border-top: 0.0625rem solid #eee;
}
.footer-wrapper .copyright .container {
    align-items: center;
}
.footer-wrapper .copyright .text a {
    position: relative;
}
.footer-wrapper .copyright .text a::after,
.footer-wrapper .footer ul li a::after,
.footer-wrapper .items:not(.h-card) .title::after
{
    position: absolute;
    background-color: #444;
    width: 100%;
    height: 0.0625rem;
    bottom: -1px;
    left: 0;
    content: "";
    transition: .3s;
}
.footer-wrapper .copyright .text a::after {
    bottom: -3px;
}
.footer-wrapper .items:not(.h-card) .title::after {
    width: 40px;
}
.footer-wrapper .footer ul li a::after {
    width: 0;
}
.footer-wrapper .footer ul li:hover a::after {
    width: 100%;
}
.footer-wrapper .copyright img {
    height: 22px;
    width: auto;
    margin-right: 100px;
}
.page {
    position: relative;
    align-items: center;
    justify-content: center;
    padding-top: 0.9375rem;
}
.news-h-wrapper .page {
    padding-bottom: 1.875rem;
}
.page a,
.page span {
    width: 30px;
    height: 30px;
    line-height: 1;
    border-radius: 0.25rem;
    margin: 0 0.15625rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: .1s;
}
.page span {
    border-color: #bbb;
}
.article-wrapper {
    padding-top: 3.125rem;
}
.article-wrapper .container {
    padding-bottom: 3.125rem;
}
.article-wrapper .article-wrap {
}
.article {
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    line-height: 170%;
}
.article .content * {
    margin-bottom: 1.25rem;
}
.article .title {
    position: relative;
    line-height: 145%;
    font-size: 1.5rem;
    margin-bottom: 1.875rem;
    font-weight: 700;
}
.article .image {
    margin-top: 30px;
}
.tags {
    padding-top: 2.5rem;
}
.tags a,
.tags span
{
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 42px;
    margin-right: 10px;
    padding: 0 1.25rem;
    border: 0.0625rem solid transparent;
    letter-spacing: 0.0625rem;
}
.tags a {
    border-color: #000;
}
.tags span {
    padding-left: 0;
}
.location {
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #eaeaea;
}
.location a {
    margin-right: 10px;
}
.location a::after {
    margin-left: 10px;
    content: "\f105";
}
.location span,
.location a:hover
{
    color: #b8aa83;
}
.products-wrapper {
    padding-bottom: 70px;
}
.products-wrapper .products-main,
.article-wrapper .article-wrap
{
    width: calc(100% - 352px);
}
.products-wrapper .products-main .prod-header {
    flex-wrap: wrap;
}
.products-wrapper .prod-header .image-wrapper,
.products-wrapper .prod-header .content-wrapper
{
    width: 50%;
}
.products-wrapper .prod-header .image-wrapper {
    position: relative;
}
.products-wrapper .prod-header .image-wrapper .image,
.products-wrapper .prod-header .image-wrapper .image img
{
    width: 100%;
}
.products-wrapper .prod-header .image-wrapper .image {
    position: sticky;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-wrapper .prod-header .content-wrapper {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
}
.content-wrapper .heading {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}
.content-wrapper .heading .title {
    position: relative;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}
.content-wrapper .heading .title::after {
    margin: auto;
    width: 0;
    height: 0;
}
.content-wrapper .heading .price {
    font-size: 0.9375rem;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.products-wrapper .content-wrapper .prod-infomation,
.products-wrapper .content
{
    line-height: 170%;
}
.products-wrapper .content-wrapper .prod-infomation {
    margin-bottom: 25px;
}
.products-wrapper .content-wrapper .prod-infomation a {
    color: #0000ff;
    text-decoration: underline;
    text-underline-position: under;
}
.products-wrapper .content {
    padding-right: 1.875rem;
    padding-top: 1.875rem;
}
.products-wrapper .callus {
    padding: 0 0 1.5625rem 0;
}
.products-wrapper .callus a {
    background-color: #000;
    color: #fff;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .2em;
    padding: 1rem 2rem;
    min-width: 306px;
    transition: .3s;
}
.callus.first a {
    background-color: #b8aa83;
    min-width: calc(100% - 100px);
}
.callus a:hover {
    background-color: #e96d00;
}
.callus.second a:hover {
    background-color: #027f60;
}
.sidebar {
    width: 352px;
    position: relative;
}
.sidebar .inner {
    position: sticky;
    top: 0;
}
.sidebar .heading {
    text-align: left;
    margin-bottom: 0;
}
.sidebar .heading .title {
    font-size: 0.875rem;
    text-transform: uppercase;
    /*
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 1.25rem;
    */
    letter-spacing: .2em;
    font-weight: 500;
}
.sidebar .heading .title::after {
    margin-left: 0;
}
.sidebar .box {
    position: relative;
    padding: 1.25rem 0;
    align-items: center;
    overflow: hidden;
}
.sidebar .item:not(:last-child) .box {
    border-bottom: 1px solid #f1f1f1;
}
.sidebar .image {
    position: relative;
    width: 80px;
    display: flex;
    border-radius: 0.25rem;
    overflow: hidden;
}
.sidebar .content-wrapper {
    padding-left: 0.9375rem;
    width: calc(100% - 80px);
}
.sidebar .content-wrapper h3 {
    margin-bottom: 0.3125rem;
    font-size: 0.9375rem;
    font-weight: 600;
}
.sidebar .price {
    font-size: 0.8125rem;
}
.items-wrapper {
}
.items-wrapper .items {
    margin: 0 -1.25rem;
    flex-wrap: wrap;
}
.items-wrapper .items .item {
    width: 25%;
    padding: 0 1.25rem 1.42857rem;
}
.items-wrapper .item .box {
    position: relative;
    background-color: #fff;
    width: 100%;
    margin-bottom: 1.75rem;
    text-align: center;
    overflow: hidden;
}
.items-wrapper .item .box::before {
    position: absolute;
    background-color: #eec668;
    height: 1px;
    left: 50%;
    right: 50%;
    bottom: 0;
    transition: .3s;
    content: "";
}
.items-wrapper .item:hover .box::before {
    left: 0;
    right: 0;
}
.items-wrapper .item .image-wrapper {
    position: relative;
}
.items-wrapper .item .image {
    background-color: #faebd7;
    position: relative;
    display: flex;
    padding-bottom: 75%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.items-wrapper .item .image img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    object-fit: cover;
    width: 100%;
}
.items-wrapper .item .content-wrapper {
    padding: 16px 10px 19px;
    margin-bottom: 1.42857rem;
}
.items-wrapper .item .content-wrapper h3 {
    margin-bottom: 0;
}
.backtotop {
    position: fixed;
    display: none;
    bottom: 20px;
    right: 25px;
    z-index: 12;
}
.backtotop .fa-angle-up {
    background-color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
    border: 1px solid #ebebeb;
}
.menu-icon {
    width: 0;
    height: 0;
    display: none;
}
.menu-h-wrapper {
    position: fixed;
    background-color: #fff;
    width: calc(100% - 0.9375rem);
    max-width:20rem;
    top: 0;
    left: -20rem;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: .3s;
    z-index: 11;
}
.menu-h-wrapper.open {
    left: 0;
    visibility: visible;
    pointer-events: all;
    opacity: 1;
}
.menu-h-wrapper .menu-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 1.375rem;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
}
.menu-h-wrapper .icon-close {
    position: relative;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.menu-h-wrapper .icon-close svg {
    fill: #000;
    width: 16px;
    height: auto;
}
.menu-h-wrapper .content {
    position: relative;
    height: calc(100% - 110px);
    margin: auto;
    top: 60px;
    overflow: auto;
}
.menu-h-wrapper .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.menu-h-wrapper .menu-item, 
.menu-h-wrapper .accordion-header, 
.menu-h-wrapper .accordion-body ul, 
.menu-h-wrapper .accordion-body ul li:not(:last-of-type) a {
    border-bottom: 1px solid #ebebeb;
}
.menu-h-wrapper .menu-item, 
.menu-h-wrapper .accordion-header, 
.menu-h-wrapper .accordion-body ul li a 
{
    padding: 0.875rem 1.25rem;
}
.menu-h-wrapper .menu-item, 
.menu-h-wrapper .accordion-header, 
.menu-h-wrapper .accordion-body ul li, 
.menu-h-wrapper .accordion-body ul li a 
{
    position: relative;
}
.menu-h-wrapper .accordion-header::after {
    content: "\f105";
    font-weight: bold;
    font-size: 1.25rem;
}
.menu-h-wrapper .accordion-body {
    display: none;
}
.menu-h-wrapper .accordion-body ul li a {
    display: block;
    font-size: 90%;
    color: #787878;
}
.menu-h-wrapper .accordion-body ul li a::before {
    content: "\f0da";
    margin-right: 10px;
}
.menu-h-wrapper .menu-footer {
    background-color: #b8aa83;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.menu-h-bg {
    position: fixed;
    background-color: rgba(0,0,0,.89);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
}
.menu-h-bg.open {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
}
@media screen and (max-width:800px) {
    .menutop,
    .header-right .hotline
    {
        display: none;
    }
    .menu-icon {
        position: relative;
        width: 45px;
        height: 42px;
        display: inline-flex;
        border: 1px solid #ccc;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
    }
    .products-wrapper .prod-header .content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .container,
    .heading p
    {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
    }
    .intro-h-wrapper .item,
    .intro-h-wrapper .content-wrapper,
    .heading p,
    .news-h-wrapper .news-h,
    .footer-wrapper .footer .items,
    .products-wrapper .products-main, 
    .article-wrapper .article-wrap,
    .products-wrapper .prod-header .image-wrapper, 
    .products-wrapper .prod-header .content-wrapper,
    .callus.first a
    {
        width: 100%;
    }
    .prod-h-wrap .prod-h,
    .footer-wrapper .footer .items .item,
    .items-wrapper .items .item
    {
        width: 50%;
    }
    .article-wrapper,
    .article-wrapper .container,
    .news-h-wrapper.news-wrapper
    {
        padding-top: 0;
        padding-bottom: 0;
    }
    .tags {
        padding-top: 0.3125rem;
        padding-bottom: 1.5625rem;
    }
    .products-wrapper {
        padding-bottom: 0.3125rem;
    }
    .section.intro-h-wrapper,
    .prod-h-wrapper,
    .news-h-wrapper
    {
        padding-top: 1.5625rem;
        padding-bottom: 1.5625rem;
    }
    .section.intro-h-wrapper,
    .products-wrapper .products-main,
    .article-wrapper .article-wrap
    {
        border-bottom: 1px solid #ebebeb;
    }
    .footer-wrapper .footer .items .item {
        padding: 0 1.25rem 0 0
    }
    .footer-wrapper .footer {
        padding: 1.25rem 0.9375rem;
    }
    .items-wrapper .items {
        margin-left: auto;
        margin-right: auto;
    }
    .items-wrapper .items .item {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
    .h-card {
        margin-bottom: 1.5625rem;
        padding-bottom: 1.5625rem;
        border-bottom: 0.0625rem solid #ebebeb;
    }
    .footer-wrapper .footer .items .item,
    .news-h-wrapper .news-h
    {
        margin-bottom: 0;
    }
    .footer-wrapper .copyright .text {
        margin-bottom: 0.625rem;
    }
    .products-wrapper .prod-header .image-wrapper,
    .products-wrapper .products-main,
    .article-wrapper .article-wrap,
    .news-wrapper .heading
    {
        margin-bottom: 0.9375rem;
    }
    .article .title {
        margin-bottom: 1.25rem;
    }
    .intro-h-wrapper .item.bg-light {
        background-color: #fff;
        margin-top: 1.875rem;
        order: 2;
    }
    .heading .title {
        font-size: 1.5rem;
    }
    .content-wrapper .heading .title,
    .article .title
    {
        font-size: 1.25rem;
    }
    .items-wrapper .item .content-wrapper h3 {
        font-weight: 500;
        font-size: 1rem;
    }
    .header-logo {
        width: calc(100% - 90px);
        margin-left: auto;
        justify-content: center;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper {
        flex-wrap: nowrap;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper .text-header {
        font-size: 20px;
        padding-bottom: 15px;
        margin-bottom: 10px;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper *,
    .intro-h-wrapper .image-wrapper .text-wrapper p
    {
        max-width: 100%;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper .hotline {
        margin-bottom: 0;
        margin-top: 0;
        font-size: 120%;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper h3 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 5px;
    }
    .intro-h-wrapper .image-wrapper .text-wrapper p {
        padding-left: 10%;
        padding-right: 10%;
        margin-top: 5px;
        font-family: 'Playfair Display', serif;
        font-size: 90%;
        line-height: 160%;
    }
}