body {
    margin: 0;
    font-family: Roboto, "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 14px
}

a {
    text-decoration: none
}

a:hover {
    opacity: .7
}

img {
    max-width: 100%;
    max-height: 100%
}

.m-jc {
    display: flex;
    justify-content: center;
    align-items: center
}

.m-jb {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.m-js {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.m-je {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.m-jt {
    align-items: flex-start
}

.flex-wrap {
    flex-wrap: wrap
}

.m-c {
    width: 100%;
    max-width: 1200px
}

.m-menu a,
.m-menu span {
    display: inline-block;
    padding: 5px 10px;
    color: #1976d2
}

.m-menu .m-menu-parent {
    position: relative;
    display: inline-block
}

.m-menu .m-menu-parent>span {
    cursor: pointer
}

.m-menu .m-menu-parent:hover>a,
.m-menu .m-menu-parent:hover>span {
    opacity: .7
}

.m-menu .m-menu-parent>div {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    width: max-content;
    min-width: 200px;
    display: none
}

.m-menu .m-menu-parent:hover>div {
    display: block
}

.m-menu .m-menu-parent>div a,
.m-menu .m-menu-parent>div span {
    color: #1976d2;
    display: block;
    margin: 0 !important
}

.m-menu .m-menu-parent>div a:hover,
.m-menu .m-menu-parent>div span:hover {
    background-color: #1976d2;
    color: #fff;
    display: block
}

.m-menu-h .table {
    position: relative;
    display: block;
    border-bottom: solid 1px #d4d4d4
}

.m-menu-h .cell {
    display: block;
    padding: 15px 20px
}

.m-menu-h .cell.icon {
    padding: 0;
    position: absolute;
    right: 0;
    top: 3px;
    display: flex;
    cursor: pointer
}

.m-menu-h .m-menu-parent div {
    display: none
}

.m-menu-h>a,
.m-menu-h>span {
    padding: 15px;
    color: #1976d2
}

.m-menu-h>a>.m-icon,
.m-menu-h>span>.m-icon {
    margin: 0 25px 0 10px;
    background-color: #1976d2;
    width: 20px;
    height: 20px
}

.m-menu-h .m-icon {
    background-color: #1976d2
}

.m-pa-xs {
    padding: 4px
}

.m-mr-xs {
    margin-right: 4px
}

.m-mx-sm {
    padding: 0 8px
}

.m-mr-sm {
    margin-right: 8px
}

.m-mr-md {
    margin-right: 16px
}

.m-pa-sm {
    padding: 8px
}

.m-my-sm {
    margin: 8px 0
}

.m-ml-sm {
    margin-left: 8px
}

.m-ma-xs {
    margin: 4px
}

.m-ma-sm {
    margin: 8px
}

.m-mb-sm {
    margin-bottom: 8px
}

.m-mb-xs {
    margin-bottom: 4px
}

.m-ma-md {
    margin: 16px
}

.m-px-md {
    margin-left: 16px;
    margin-right: 16px
}

.m-mr-xl {
    margin-right: 32px
}

.m-bc1 {
    background-color: #1976d2
}

.m-bc2 {
    background: #cfd8dc
}

.m-bc3 {
    background-color: #eceff1
}

.m-bw {
    background-color: #fff
}

.m-bc1 .m-menu a,
.m-bc1 .m-menu span {
    color: #fff
}

#m-logo {
    width: 300px;
    height: 120px;
    flex-wrap: wrap
}

#m-logo h3 {
    font-family: Lora, serif;
    font-weight: 600;
    font-size: 35px;
    position: relative;
    z-index: 1;
    color: #e74c3c;
    text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff
}

#add-to-card {
    position: relative
}

#add-to-card a {
    display: inline-block;
    background-color: #26a69a;
    border-radius: 3px;
    padding: 8px 0;
    width: 90px;
    text-align: center;
    font-weight: 500;
    color: #fff
}

.text-caption {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: .03333em
}

.m-badge {
    position: absolute;
    top: -4px;
    right: -3px;
    background: #ff9800;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 12px
}

.m-strong {
    color: #f44336;
    font-weight: 700
}

.m-sku {
    color: #21ba45;
    font-weight: 700
}

#main-menu {
    padding: 4px
}

#main-menu a,
#main-menu span {
    padding: 10px 10px;
    margin-right: 10px;
    margin-left: 10px;
    text-transform: uppercase
}

#main-menu li a,
#main-menu li span {
    text-transform: none
}

#main-menu .cate-menu {
    width: 300px;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid #fff
}

#main-menu .cate-menu:hover {
    opacity: .9
}

#main-menu.m-menu .m-menu-parent>div {
    border: 1px solid #1976d2;
    border-top: 4px solid #1976d2
}

#breadcrumbs a,
#breadcrumbs span {
    padding: 8px
}

#footer {
    border-top: 4px solid #1976d2
}

#footer-1 {
    border-top: 1px solid #cfd8dc
}

#footer-2 {
    border-top: 1px solid #cfd8dc
}

.body {
    padding-bottom: 16px;
    margin-bottom: 16px
}

.body h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: normal;
    color: #1976d2
}

.m-pis {
    flex-wrap: wrap;
    position: relative
}

.m-pi {
    border: 1px solid #dee2e6;
    position: relative;
    flex: none;
    width: 226px;
    height: 290px;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.m-pi>div {
    width: 100%
}

.m-pi table {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .8
}

.m-pi .m-strong {
    font-size: 16px;
    margin: 0 8px
}

.m-line-through {
    text-decoration: line-through
}

.m-pi .m-line-through {
    font-size: .75rem;
    letter-spacing: .03333em
}

.m-pi h3 {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin: 0 8px;
    display: block;
    width: 100%
}

.m-inline-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.m-pi img {
    max-width: 190px;
    max-height: 160px
}

.m-pi>a {
    height: 160px
}

#menuTop .m-menu-parent>div {
    border: 1px solid #cfd8dc;
    border-top: 4px solid #cfd8dc
}

svg {
    margin: 10px;
    width: 24px;
    height: 24px;
    fill: #333
}

#mobile-title>span {
    display: flex;
    position: relative;
    margin-right: 4px
}

#mobile-title a {
    display: flex
}

#mobile-title span .m-badge {
    top: 4px;
    right: 4px
}

#mobile-logo {
    margin-left: 50px
}

#mobile-logo img {
    margin: 5px;
    height: 50px
}

.m-icon {
    width: 24px;
    height: 24px;
    margin: 10px;
    display: inline-block;
    -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
    mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #333
}

.m-drawer,
.mobile-footer-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1001;
    visibility: hidden
}

.m-drawer-session {
    top: 0;
    left: -300px;
    bottom: 0;
    width: 300px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    transform: translateX(0);
    position: fixed;
    z-index: 1002;
    background-color: #fff;
    transition: width .2s;
    overflow-y: auto
}

.m-drawer.active {
    visibility: visible
}

#mobile-footer,
#mobile-footer>.m-jb {
    position: fixed;
    width: 100%;
    z-index: 101;
    bottom: 0;
    background-color: #eceff1;
    box-shadow: 0 6px 10px 0
}

#mobile-footer>.m-jb {
    background-color: #fff
}

#mobile-footer>a,
#mobile-footer>span {
    display: flex
}

.mobile-footer-session {
    display: none
}

.mobile-footer-session .m-icon {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    background-color: #00f
}

.mobile-footer-bg {
    z-index: 100;
    background-color: rgba(0, 0, 0, 0);
    visibility: hidden
}

.mobile-footer-session.active {
    display: block;
    margin-bottom: 50px
}

.mobile-footer-bg.active {
    visibility: visible
}

#mobile-footer .m-jb>a,
#mobile-footer .m-jb>span {
    width: 40%;
    text-align: center
}

#mobile-footer .m-jb>span.active {
    background-color: #eceff1
}

.productCategorys.m-icon {
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    position: absolute;
    top: 13px;
    right: 10px
}

#ProductCategoryMenu {
    position: relative
}

#ProductCategoryMenu ul {
    position: absolute;
    background-color: #fff;
    z-index: 10;
    list-style: none;
    padding: 0;
    min-width: 100%;
    width: max-content;
    border: 1px solid #d4d4d4;
    display: none
}

.home #ProductCategoryMenu>ul {
    display: block
}

#ProductCategoryMenu.hover>ul,
#ProductCategoryMenu:hover>ul {
    display: block
}

#ProductCategoryMenu ul li {
    position: relative
}

#ProductCategoryMenu ul li ul {
    left: 100%;
    top: -1px
}

#ProductCategoryMenu ul li:hover>ul {
    display: block
}

#ProductCategoryMenu a {
    color: #1976d2;
    display: inherit
}

#ProductCategoryMenu li:hover {
    background-color: #1976d2
}

#ProductCategoryMenu li:hover>a {
    color: #fff;
    opacity: 1
}

#ProductCategoryMenu i {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #1976d2
}

#ProductCategoryMenu li:hover>i {
    background-color: #fff
}

#m-search {
    flex-grow: 1;
    padding: 0 16px;
    text-align: center;
    position: relative
}

#m-search button,
#m-search input {
    height: 38px;
    border: 1px solid #1976d2;
    outline: medium
}

#m-search input {
    width: 74%
}

#m-search button {
    width: 23%;
    height: 42px;
    border-left: none;
    cursor: pointer
}

#m-search button:hover {
    background-color: #1976d2;
    color: #fff;
    opacity: .7
}

#m-search>div {
    position: absolute;
    min-width: 600px;
    z-index: 10000;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    display: none
}

#m-search>div.true,
#m-search>div:hover {
    display: block
}

#m-search .mis {
    width: 450px
}

#m-search .end {
    width: 100px;
    text-align: right
}

#m-search a {
    border-bottom: 1px solid #d4d4d4
}

#m-search a:hover {
    background-color: #eceff1;
    opacity: 1
}

#m-search span {
    margin: 0 8px
}

#m-search .m-inline-2 {
    text-align: left;
    color: #0180c7;
    font-size: .875rem;
    font-weight: 500
}

#m-search div,
#m-search img {
    margin: 5px;
    padding: 2px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: .03333em
}

.star {
    width: 18px;
    height: 18px;
    display: inline-block;
    -webkit-mask: url(/icon/star_black_24dp.svg) no-repeat 50% 50%;
    mask: url(/icon/star_black_24dp.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #ff9800
}

.star.half {
    -webkit-mask: url(/icon/star_half_black_18dp.svg) no-repeat 50% 50%;
    mask: url(/icon/star_half_black_18dp.svg) no-repeat 50% 50%
}

.star.border {
    -webkit-mask: url(/icon/star_border_black_18dp.svg) no-repeat 50% 50%;
    mask: url(/icon/star_border_black_18dp.svg) no-repeat 50% 50%
}

.content p {
    text-align: justify;
    line-height: 25px
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: .0125em;
    color: #1976d2
}

.content img {
    width: auto !important;
    height: auto !important;
    display: block;
    margin: auto
}

#slide {
    position: relative
}

.m-title-1 {
    color: #ff9800;
    padding: 16px 16px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: .0125em
}

.body .m-text-1 {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5rem;
    width: 100%;
    display: block
}

.body .m-text-2 {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 2rem;
    width: 100%;
    display: block
}

.m-text-2 a {
    color: #1976d2
}

.m-text-3 {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    color: #1976d2
}

.border-b {
    border-bottom: 1px solid rgba(0, 0, 0, .12)
}

.border-t {
    border-top: 1px solid rgba(0, 0, 0, .12)
}

.border {
    border: 1px solid rgba(0, 0, 0, .12)
}

#slide>span {
    position: absolute;
    top: 44%;
    left: 10px;
    background-color: #000;
    opacity: .3;
    cursor: pointer;
    border-radius: 10px;
    padding: 2px 0 0 1px
}

#slide>span .m-icon {
    background-color: #fff;
    width: 50px;
    height: 50px;
    margin: 0
}

#slide>span.right {
    right: 10px;
    left: auto
}

#slide .slide {
    display: flex;
    overflow-x: auto;
    height: 100%;
    align-items: center
}

#slide .slide::-webkit-scrollbar {
    display: none
}

#slide .stage {
    display: flex
}

#slide a {
    display: flex
}

#slide a img {
    margin: .25%;
    width: 99.5%
}

.m-mb-md {
    margin-bottom: 16px
}

.m-py-sm {
    padding: 8px 0
}

.m-title {
    padding: 8px 16px
}

.m-title h2 {
    -margin: 0;
    color: #fff
}

.body>a {
    display: block;
    width: 100%;
    line-height: 10px
}

.body>a img {
    width: 100%
}

.m-product-slide {
    overflow-x: auto;
    flex-wrap: unset;
    justify-content: flex-start
}

.m-product-slide::-webkit-scrollbar {
    display: none
}

.events-none a,
.events-none div,
.events-none h3,
.events-none i,
.events-none img,
.events-none span {
    pointer-events: none;
    cursor: grabbing
}

.sort a {
    margin: 0 4px 0 3px;
    padding: 5px 10px;
    border: solid #d4d4d4 1px
}

.sort a.active,
.sort a:hover {
    background-color: #1976d2;
    color: #fff;
    opacity: 1
}

.sort a:hover i {
    background-color: #fff
}

.sort .m-je a {
    margin: 4px;
    padding: 0;
    display: flex
}

.sort i {
    margin: 0
}

.text-center {
    text-align: center
}

iframe {
    max-width: 100%
}

.m-pi span.text-caption {
    margin-left: 8px
}

.collum-1 {
    width: 68%;
    margin: .5%
}

.collum-2 {
    width: 30%;
    margin: .5%
}

.articleCategory img {
    min-width: 260px !important
}

.articleCategory p,
.body.articleCategory h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify
}

.body.articleCategory h2 {
    -webkit-line-clamp: 1
}

@media screen and (min-width:1200px) {
    .m-pi {
        margin: 4px
    }
}

@media screen and (max-width:1200px) {
    .m-pi {
        width: 18.5%;
        margin: .5%
    }
}

@media screen and (max-width:1100px) {
    .m-pi {
        width: 220px;
        width: 18.5%;
        margin: .5%
    }
}

@media screen and (max-width:1000px) {
    .m-pi {
        width: 24%;
        margin: .3%
    }

    .collum-1,
    .collum-2 {
        width: 99%
    }
}

@media screen and (max-width:900px) {
    .m-pi {
        width: 31%;
        margin: .9%
    }
}

@media screen and (max-width:800px) {
    .m-pi {
        width: 31%;
        margin: .9%
    }

    .articleCategory img {
        min-width: 200px !important
    }

    .articleCategory p {
        -webkit-line-clamp: 2
    }
}

@media screen and (max-width:700px) {
    .m-pi {
        width: 31%;
        margin: .9%
    }

    .m-pi img {
        max-width: 100%;
        max-height: 160px
    }

    .articleCategory img {
        min-width: 170px !important
    }
}

@media screen and (max-width:600px) {
    .m-pi {
        width: 47%
    }

    .articleCategory img {
        min-width: 100px !important
    }
}

@media screen and (max-width:500px) {
    .m-pi {
        width: 47%
    }
}

@media screen and (max-width:400px) {
    .m-pi {
        width: 47%
    }

    .m-pi>div {
        flex-wrap: wrap
    }

    .m-pi span {
        display: block;
        margin: 0 8px
    }

    .m-pi span.text-caption {
        margin: 0
    }

    .articleCategory div.m-js {
        display: block
    }

    .articleCategory img {
        width: 100%;
        margin: 0;
        padding: 0
    }

    .articleCategory a {
        display: block;
        margin: 0;
        padding: 0
    }

    .articleCategory p {
        -webkit-line-clamp: 4
    }
}

@media screen and (max-width:340px) {
    .m-pi {
        width: 90%
    }

    .m-pi>div {
        flex-wrap: wrap
    }

    .m-pi span {
        display: initial;
        margin: 0
    }
}

.st0 {
    fill: #fdfefe
}

.st1 {
    fill: #0180c7
}

.st2 {
    fill: #0172b1
}

.st3 {
    fill: none;
    stroke: #0180c7;
    stroke-width: 2;
    stroke-miterlimit: 10
}