body {

    margin: 0;

    padding: 0;

    font-size: 14px;

    font-family: "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", "微软雅黑", Helvetica, STHeiTi, Arial, sans-serif;

}



a {

    text-decoration: none;

    color: #525558;
#content
}



h1,

h2,

h3,

h4,

h5,

ul,

li {

    margin: 0px;

    padding: 0px;

    list-style: none;

}



#header {

    background-color: #49bc85;

}



#header-box {

    padding: 0 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}





#header-logo h1 {



    font-size: 24px;

}



#header-logo h1 a {

    color: #fff;

}



#header-search input {

    height: 28px;

    border: 0;

    background: #fff;

    border-radius: 4px;

    line-height: 30px;

    padding: 0 10px;

    width: 200px;

    color: #ddd;

    outline: none;

}



#header-search input:focus {

    background: #fff;

    width: 300px;

    color: #222;

    transition: width 0.5s ease-out;

}



#header-menu {

    height: 100%;

}



#main-menu {

    display: flex;

    height: 100%;

}



.menu-item a {

    color: #fff;

    display: block;

    line-height: 60px;

    padding: 0px 12px;

}



.menu>a:hover,

.menu.active>a {

    background: #96D48A;

}





#menu-item,

.submenu-item {

    position: relative;

}



.sub-menu {

    top: 60px;

    position: absolute;

    background: #49bc85;

    border-radius: 0px;

    padding: 0;

    display: none;

    z-index: 666;

}



.sub-menu .submenu-item {

    min-width: 180px;

}



.sub-menu .submenu-item a {

    line-height: 36px;

}



ul.sub-menu.active,

ul.last-menu.active {

    display: block;

}



.last-menu {

    display: none;

    position: absolute;

    right: -200px;

    top: 0px;

    width: 200px;

    background: #4299E1;

}



#header {

    min-width: 900px;

    margin: 0 auto;

}



#content {

    min-width: 900px;
    display: table;
    padding: 1.3em 2em 0;
    margin: 0 auto;
    width: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 1440px;
  /*   padding: 2em 6em 0;*/
}

#home-categories-gallery-container{
    min-width: 900px;
    margin: 0 auto;
  /*    padding: 2em 12em 0;*/
}


.gallery-item a{
    font-size:16px;
    font-weight:bold;
    line-height: 1.3;
    padding: 0.5em;
    margin-bottom: 3%;
}

.thumbnail-title a:hover
{
    background: #49bc85;
    color:#FFF;
}

/* 为 gallery-item 类定义默认样式 */
.gallery-item {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
    transition: all 0.3s ease; /* 定义过渡效果，让变化更平滑 */
}

/* 当鼠标悬停在 gallery-item 上时的样式 */
.gallery-item:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
    transform: translateY(-5px); /* 向上移动5px */
    background-color: #f0f0f0; /* 改变背景颜色 */
}

#footer {

    background: #222222;

    margin: 50px auto 0;

    padding: 20px 0;

    text-align: center;

    color: #888;

}



#error-box {

    min-height: 320px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.empty-header {

    font-size: 64px;

}



.content-title {

    padding: 18px;

    text-align: center;

}



.title-h3 {

    display: flex;

}



.title-h3 span {

    background-color: #49bc85;

    color: #fff;

    display: block;

    font-size: 16px;

    padding: 3px 8px;

}



#grid-featured {

    padding: 10px;

}



#grid-featured #featureds {

    border-top: 2px solid #49bc85;

    background-color: #F7F7F7;

}



#featureds,

#gallerys {

    clear: both;

    overflow: hidden;

    display: flex;

    flex-wrap: wrap;

}



.gallery-item {

    padding: 10px;

    margin-bottom: 8px;

}





.gallery-box {

    width: 160px;

    position: relative;

}



.gallery-box img {

    max-height: 100%;

}



.thumbnail {

    display: flex;

    height: 160px;

    background: #F1EFF0;

    align-items: stretch;

}



.g-count {

    position: absolute;

    top: 6px;

    right: 6px;

    color: #fff;

    font-size: 12px;

    text-shadow: 1px 1px 1px #000;

}



.thumbnail a {

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}





.thumbnail-list {

    display: flex;

}



.thumbnail-list {

    padding-top: 6px;

}



.min-thumbnail>div {

    background: #F1EFF0;

    height: 36px;

    width: 36px;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

}



.min-thumbnail+.min-thumbnail {

    margin-left: 5px;

}



.min-thumbnail.select {

    border-top: 3px solid #f32465;

    padding-top: 6px;

    margin-top: -9px;

}



.thumbnail-title {

    margin-top: 8px;

    font-size: 12px;

    font-weight: normal;

    line-height: 18px;

    height: 54px;

    overflow: hidden;

}



.breadcrumb-item.active {

    color: inherit

}



#discover-box {

    padding: 20px;

}



#pictures {

    display: flex;

    flex-wrap: wrap;

}



#pictures>li {

    padding: 10px;

    margin-bottom: 6px;

}



#cover-box {

    padding: 30px 0;

    display: flex;

}



.cover-title {

    padding-left: 20px;

}



.cover-title h1 {

    font-weight: normal;



}



.cover-content {

    margin-top: 30px;

}





.pic-box {

    display: flex;

    width: 145px;

    height: 145px;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border: 2px solid #C7C7C7;

    border-radius: 4px;

}



.pic-box:hover {

    border-color: #49bc85;

}



.pic-box img {

    max-height: 100%;

}



.pic_name {

    text-align: center;

    color: #ccc;

    text-transform: uppercase;

    font-size: 12px;

}



#page-box {

    padding: 36px 0;

    max-width: 960px;

    margin: 0 auto;

}



#page-box .page-title {

    margin-bottom: 24px;

}



#page-box .page-content {

    min-height: 600px;

}



.sub-category-lists {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    padding: 24px;

    justify-content: center;

    border:1px solid #ccc;

    margin:0 30px;

}



.sub-category a {

    display: block;

    padding: 8px 16px;

    border-radius: 6px;

    background-color: #96D48A;

    color: #fff;

    font-size: 14px;

}



.sub-category a:hover {

    background-color: #458FE7;

    color: #fff;

}





#floating-panel {

    position: fixed;

    z-index: 999;

    top: 36%;

    right: 0px;

    margin: 20px;

}



#floating-panel .fp-item a {

    position: relative;

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 42px;

    color: #fff;

}



#floating-panel .fp-item a span {

    position: absolute;

    background: #000;

    color: #fff;

    width: 120px;

    border-radius: 3px;

    text-align: center;

    line-height: 36px;

    top: 3px;

    left: -128px;

    display: none;

}



#floating-panel .fp-item {

    margin-bottom: 5px;

}



#floating-panel .fp-item a:hover span {

    display: block;

}



#floating-panel .fp-email a {

    background-color: #EE6100;

}



#floating-panel .fp-email a:hover {

    background-color: #F5A066;

}



#floating-panel .fp-whats-app a {

    background: #50B83C;

}



#floating-panel .fp-whats-app a:hover {

    background: #96D48A;

}



#floating-panel .fp-instagram a {

    background: #E10493;

}



#floating-panel .fp-instagram a:hover {

    background: #DF99C6;

}


.home-categories-gallery-item {
    padding: 36px 12px;
    padding-bottom: 12px;
}

.home-categories-gallery-item-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-left: 12px;
    color: #000;
}

.home-categories-gallery-item-title::before {
    content: "";
    display: inline-block;
    height: 1em;
    vertical-align: -0.13em;
    width: 4px;
    margin-right: .45em;
    background: #49bc85;
}

.home-categories-gallery-item-more {
    display: block;
    margin-top: 12px;
    text-align: center;
}

a.btn-more {
    display: inline-block;
    padding: 8px 120px;
    border-radius: 50px;
    border: 1px solid #49BC85;
    color: #49BC85;
    font-size: 14px;
    text-decoration: none;
}

a.btn-more:hover {
    background-color: #49BC85;
    color: #fff;
}


.pagination {

    display: flex;

    padding-left: 0;

    list-style: none;

    justify-content: center;



}



.page-link {

    position: relative;

    display: block;

    color: #656d77;

    background-color: transparent;

    border: 0 solid #e7eaef;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out

}



@media (prefers-reduced-motion:reduce) {

    .page-link {

        transition: none

    }

}



pagination {

    display: inline-block;

    padding-left: 0;

    margin: 18px 0;

    border-radius: 3px;



}



.pagination>li {

    display: inline;

}



.pagination>li>a,

.pagination>li>span {

    position: relative;

    float: left;

    padding: 8px 13px;

    line-height: 1.428571429;

    text-decoration: none;

    color: #49bc85;

    background-color: #fff;

    border: 1px solid #ddd;

    margin-left: -1px;

}



.pagination>li:first-child>a,

.pagination>li:first-child>span {

    margin-left: 0;

    border-bottom-left-radius: 3px;

    border-top-left-radius: 3px;

}



.pagination>li:last-child>a,

.pagination>li:last-child>span {

    border-bottom-right-radius: 3px;

    border-top-right-radius: 3px;

}



.pagination>li>a:hover,

.pagination>li>span:hover,

.pagination>li>a:focus,

.pagination>li>span:focus {

    z-index: 2;

    color: #49bc85;

    background-color: #eee;

    border-color: #ddd;

}



.pagination>.active>a,

.pagination>.active>span,

.pagination>.active>a:hover,

.pagination>.active>span:hover,

.pagination>.active>a:focus,

.pagination>.active>span:focus {

    z-index: 3;

    color: #fff;

    background-color: #49bc85;

    border-color: #49bc85;

    cursor: default;

}



.pagination>.disabled>span,

.pagination>.disabled>span:hover,

.pagination>.disabled>span:focus,

.pagination>.disabled>a,

.pagination>.disabled>a:hover,

.pagination>.disabled>a:focus {

    color: #777;

    background-color: #fff;

    border-color: #ddd;

    cursor: not-allowed;

}



.pagination-lg>li>a,

.pagination-lg>li>span {

    padding: 9px 18px;

    font-size: 17px;

    line-height: 1.3333333;

}



.pagination-lg>li:first-child>a,

.pagination-lg>li:first-child>span {

    border-bottom-left-radius: 5px;

    border-top-left-radius: 5px;

}



.pagination-lg>li:last-child>a,

.pagination-lg>li:last-child>span {

    border-bottom-right-radius: 5px;

    border-top-right-radius: 5px;

}



.pagination-sm>li>a,

.pagination-sm>li>span {

    padding: 4px 9px;

    font-size: 12px;

    line-height: 1.5;

}



.pagination-sm>li:first-child>a,

.pagination-sm>li:first-child>span {

    border-bottom-left-radius: 2px;

    border-top-left-radius: 2px;

}



.pagination-sm>li:last-child>a,

.pagination-sm>li:last-child>span {

    border-bottom-right-radius: 2px;

    border-top-right-radius: 2px;

}