/* 麦芒豆前台美化 */
:root {
  --brand: #e15a45;
  --brand-dark: #c44734;
  --brand-soft: #fff3ef;
  --gold: #c9a227;
  --ink: #2b2623;
  --muted: #7a716b;
  --line: #efe8e2;
  --bg: #faf7f3;
  --card: #ffffff;
  --footer: #1b1816;
  --footer-mid: #241f1c;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(43, 38, 35, .08);
  --shadow-hover: 0 18px 48px rgba(225, 90, 69, .16);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

body, div, p, a, span, li, input, textarea, button, h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
}

td, th, div, input, select, textarea, li, ol, dt, dd, h1, h2, h3, h4, h5, h6,
font, span {
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.wrap {
  max-width: 1280px;
  width: 92%;
}

.wrap1200 {
  max-width: 1080px;
}

/* 标题 */
.web-title {
  margin-bottom: 42px;
}

.web-title .title-0 {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
}

.web-title.text-center .title-0,
.web-title.text-center {
  display: block;
}

.web-title .title-0::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.web-title:not(.text-center) .title-0::after {
  margin-left: 0;
}

.web-title .title-1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #a89b93;
  margin-top: 10px;
}

.see-more,
.detail-back,
#contact .message-form .submit {
  transition: all .28s ease;
}

/* 顶栏 */
#header {
  height: 86px;
  padding: 0;
  background: rgba(255, 252, 249, .92);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(43, 38, 35, .06);
}

#header .header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  width: 94%;
  margin: 0 auto;
}

#header #logo {
  float: none;
  margin-top: 0 !important;
  flex: 0 0 auto;
}

#header #logo img,
.logoo {
  height: 48px !important;
  width: auto !important;
}

#header #menu {
  float: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#header #menu #nav {
  float: none !important;
  width: auto;
  max-width: none;
  height: auto;
}

#header #menu #nav .container-fluid,
#header #menu #nav .row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
}

#header #menu #nav .nav-item,
#header #menu #nav .nav-item.col-md-2,
#header #menu #nav .nav-item.col-sm-12 {
  width: auto;
  float: none;
  padding: 0 4px;
}

#header #menu #nav .nav-item .item-a {
  line-height: 86px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink) !important;
  padding: 0 14px;
  position: relative;
}

#header #menu #nav .nav-item .item-a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .25s ease;
}

#header #menu #nav .nav-item .item-a.on,
#header #menu #nav .nav-item:hover .item-a {
  color: var(--brand) !important;
}

#header #menu #nav .nav-item .item-a.on::after,
#header #menu #nav .nav-item:hover .item-a::after {
  transform: scaleX(1);
}

#header #menu #nav .nav-item .sub-nav {
  width: 200px;
  margin-left: -100px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px 0;
  top: 78%;
}

#header #menu #nav .nav-item .sub-nav .sub-item {
  height: 44px;
  line-height: 44px;
  border-top: 0;
}

#header #menu #nav .nav-item .sub-nav .sub-item a {
  display: block;
  padding: 0 18px;
  color: var(--ink) !important;
  border-radius: 0;
}

#header #menu #nav .nav-item .sub-nav .sub-item a:hover {
  color: #fff !important;
  background: var(--brand) !important;
}

.header-hotline {
  display: flex;
  align-items: center;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}

.header-hotline i {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 16px;
  margin-right: 10px;
}

.header-hotline span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.header-hotline strong {
  display: block;
  font-size: 16px;
  color: var(--brand);
  letter-spacing: .5px;
}

#header.on {
  height: 70px;
  box-shadow: 0 8px 24px rgba(43, 38, 35, .08);
}

#header.on #menu #nav .nav-item .item-a {
  line-height: 70px;
}

#header.on #menu #nav .nav-item .item-a::after {
  bottom: 16px;
}

#header-blank {
  height: 86px;
}

/* 轮播 */
#banner.banner {
  overflow: hidden;
}

.banner .item img {
  width: 100% !important;
  object-fit: cover;
}

.banner .banner-btn {
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  font-size: 28px;
  opacity: 0;
}

.banner:hover .banner-btn {
  opacity: 1;
}

.banner .banner-btn:hover {
  background: var(--brand);
}

.page-hero {
  position: relative;
  min-height: 220px;
}

.page-hero .item img {
  min-height: 220px;
  width: 100% !important;
  object-fit: cover;
}

.page-hero .page-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(27, 24, 22, .18), rgba(27, 24, 22, .45));
  color: #fff;
  text-align: center;
}

.page-hero .page-hero-mask h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.page-hero .crumb,
.page-crumb {
  font-size: 13px;
  color: rgba(255, 255, 255, .86);
}

.page-crumb {
  max-width: 1280px;
  width: 92%;
  margin: 28px auto 0;
  color: var(--muted);
}

.page-crumb a:hover {
  color: var(--brand);
}

/* 分类 */
.categorys {
  margin-bottom: 36px;
}

.categorys > a {
  line-height: 40px;
  font-size: 14px;
  color: var(--muted);
  margin: 0 6px 10px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 40px;
  background: #fff;
}

.categorys > a::before {
  display: none;
}

.categorys > a:hover,
.categorys > .on {
  color: #fff !important;
  background: var(--brand);
  border-color: var(--brand);
}

.categorys .dropdown .btn {
  min-width: 160px;
  height: 42px;
  border-radius: 42px;
  border-color: var(--line);
  background: #fff;
}

/* 产品卡片 */
#products .products-list .item,
#products .products-list .item[status='on'] {
  width: 23.5%;
  margin-left: 2%;
  margin-bottom: 28px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}

#products .products-list .item.first {
  margin-left: 0 !important;
}

#products .products-list .item .card-pic {
  position: relative;
  overflow: hidden;
}

#products .products-list .item .card-pic img,
#products .products-list .item > img {
  width: 100% !important;
  display: block;
}

#products .products-list .item .main {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(27, 24, 22, .05), rgba(27, 24, 22, .55));
}

#products .products-list .item .main .name {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
}

#products .products-list .item .main .category {
  color: rgba(255, 255, 255, .82);
}

#products .products-list .item .main .more {
  width: 44px;
  height: 44px;
  margin-top: 18px;
  background-color: var(--brand) !important;
  background-image: none;
  position: relative;
}

#products .products-list .item .main .more::after {
  content: "\f105";
  font-family: FontAwesome;
  color: #fff;
  font-size: 20px;
  line-height: 44px;
}

#products .products-list .item .card-meta {
  padding: 16px 16px 18px;
}

#products .products-list .item .card-meta .name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#products .products-list .item .card-meta .category {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

#products .products-list .item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* 首页新品 */
#index-new-product .rows {
  background: transparent;
}

#index-new-product .item {
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 0;
}

#index-new-product .item .img {
  border-radius: var(--radius);
  overflow: hidden;
}

#index-new-product .item .main-box .main {
  background: #fff;
  margin: 0 8%;
  padding: 42px 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#index-new-product .item .main-box .main .name-0 {
  font-size: 28px;
  font-weight: 700;
}

#index-new-product .item .main-box .main .see-more,
#new-product .new-product-list .item .main .see-more,
#index-brand .see-more,
.web-detail .detail-back {
  width: 148px;
  height: 42px;
  line-height: 40px;
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 42px;
  background: #fff;
}

#index-new-product .item .main-box .main .see-more:hover,
#index-brand .see-more:hover,
.web-detail .detail-back:hover,
#new-product .new-product-list .item .main .see-more:hover {
  color: #fff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

#index-new-product .item .main-box .main .rating .fa-star,
#new-product .new-product-list .item .main .rating .fa-star {
  color: var(--brand);
}

#index-new-product .item .main-box .main .rating .fa-star-o,
#new-product .new-product-list .item .main .rating .fa-star-o {
  color: #f0b3aa;
}

/* 品牌 */
#index-brand .brand-img {
  border-radius: 24px;
  overflow: hidden;
}

#index-brand .brand-img img {
  width: 100% !important;
}

#index-brand .main {
  max-width: 920px;
  margin: -70px auto 0;
  padding: 36px 48px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 2;
  font-size: 15px;
  color: var(--muted);
}

#index-brand .see-more {
  margin-top: 8px;
  background: var(--brand-soft);
}

/* 新闻 */
#news {
  padding: 70px 0 80px;
}

#news.index.bgf5,
.bgf5,
.bgf3 {
  background: linear-gradient(180deg, #f4efe9 0%, #faf7f3 100%);
}

#news .news-list .item {
  width: 23.5%;
  margin-right: 2%;
  margin-bottom: 28px;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}

#news .news-list .item .img .date {
  width: auto;
  min-width: 68px;
  height: auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(27, 24, 22, .72);
  right: 14px;
  top: 14px;
  line-height: 1.3;
}

#news .news-list .item .img .date .day {
  margin-top: 0;
  font-size: 18px;
}

#news .news-list .item .main {
  padding: 18px 20px 20px;
}

#news .news-list .item .main .title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

#news .news-list .item .main .title:hover,
#news .news-list .item .main .see-more:hover {
  color: var(--brand) !important;
}

#news .news-list .item .main .brief {
  height: 72px;
  color: var(--muted);
  margin: 10px 0 14px;
}

#news .opt {
  background: #fff;
  box-shadow: var(--shadow);
}

#news .opt .arrow:hover,
#news .opt .more:hover {
  background: var(--brand);
  color: #fff;
}

#news .news-list .item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* 关于 / 详情 */
#about,
#contact,
#new-product,
#products.products,
#news.wrap {
  background: #fff;
  border-radius: 24px;
  padding: 48px 40px 56px;
  box-shadow: var(--shadow);
  margin-top: 8px;
}

#about .about-line {
  background: var(--line);
  margin: 28px 0 36px;
}

#about .about-item {
  font-size: 16px;
  line-height: 2;
  color: #4d4641;
}

.web-detail {
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow);
  margin: 36px auto 80px;
  padding: 56px 0 72px;
}

.web-detail .detail-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}

.web-detail .detail-description.editor {
  font-size: 16px;
  line-height: 2;
  color: #4d4641;
  text-align: left;
}

.web-detail .detail-back {
  max-width: 220px;
  height: 48px;
  line-height: 46px;
  background: var(--brand-soft);
}

.web-detail .detail-back::before {
  display: none;
}

#new-product .new-product-list .item {
  padding: 10px;
}

#new-product .new-product-list .item .img {
  border-radius: var(--radius);
  overflow: hidden;
}

#new-product .new-product-list .item .main {
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
}

/* 留言 */
#contact .message-form .text,
#contact .message-form .area {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdfb;
}

#contact .message-form .text {
  height: 52px;
}

#contact .message-form .text:hover,
#contact .message-form .text:focus,
#contact .message-form .area:hover,
#contact .message-form .area:focus {
  border-color: #f0b3aa;
  box-shadow: 0 0 0 4px rgba(225, 90, 69, .12);
}

#contact .message-form .submit {
  width: 180px;
  height: 50px;
  border-radius: 50px;
  background: var(--brand);
  letter-spacing: 2px;
}

#contact .message-form .submit:hover {
  background: var(--brand-dark);
}

/* 页脚 */
#footer {
  background: var(--footer);
  margin-top: 20px;
}

#footer .footer-nav {
  background: var(--footer-mid);
  padding: 64px 0 48px;
}

#footer .footer-nav .footer-title-0 {
  font-size: 18px;
  font-weight: 700;
}

#footer .footer-nav .footer-title-1 {
  color: #8b8179;
  margin-bottom: 28px;
}

#footer .footer-nav .contact,
#footer .footer-nav .navs {
  padding-bottom: 0;
  margin-bottom: 0;
  border-right-color: rgba(255, 255, 255, .08);
}

#footer .footer-nav .contact .item {
  background-image: none !important;
  padding-left: 0;
}

#footer .footer-nav .contact .item .contact-title {
  height: auto;
  line-height: 1.4;
  font-family: inherit;
  margin-bottom: 8px;
}

#footer .footer-nav .contact .item .contact-title::after {
  display: none;
}

#footer .footer-nav .contact .item .contact-title i {
  color: var(--brand);
  margin-right: 8px;
}

#footer .footer-nav .navs .navs-item a:hover {
  color: var(--brand) !important;
}

#footer .footer-nav .follow .qrcode {
  color: #b7aea7;
}

#footer .footer-nav .follow .qrcode img {
  border-radius: 12px;
  background: #fff;
  padding: 6px;
}

#footer .footer-bottom {
  color: #8b8179;
}

#footer .footer-bottom .links,
#footer .footer-bottom .copyright {
  color: #8b8179;
}

#footer .footer-bottom a:hover {
  color: #fff;
}

#toTop {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow);
}

#toTop:hover {
  background: var(--brand);
}

/* 分页 */
.pagebar .pagination a {
  min-width: 38px;
  padding: 9px 12px;
  border-radius: 10px;
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}

.pagebar .pagination a:hover,
.pagebar .pagination a.page-num-current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

@media only screen and (max-width: 1280px) {
  #products .products-list .item,
  #products .products-list .item[status='on'] {
    width: 32%;
    margin-left: 2%;
  }
  #products .products-list .item:nth-child(4n+1) {
    margin-left: 2%;
  }
  #products .products-list .item.first,
  #products .products-list .item:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 991px) {
  #header,
  #header.on {
    height: 64px;
  }
  #header-blank {
    height: 64px;
  }
  #header .header-inner {
    width: 94%;
  }
  #header #menu {
    width: auto;
    flex: 0 0 auto;
  }
  #header #menu #nav {
    width: 78%;
    max-width: 360px;
    right: -78%;
    box-shadow: -12px 0 30px rgba(0, 0, 0, .12);
  }
  #header #menu #nav .container-fluid,
  #header #menu #nav .row {
    display: block;
  }
  #header #menu #nav .nav-item {
    float: none;
    width: 100%;
    padding: 0;
  }
  #header #menu #nav .nav-item .item-a {
    line-height: 52px !important;
    padding: 0 7%;
  }
  #header #menu #nav .nav-item .item-a::after {
    display: none;
  }
  #header #menu.open-menu #nav,
  #header #menu #nav .nav-item .sub-nav.open {
    right: 0;
  }
  #website.open-menu,
  #header.open-menu {
    left: -78%;
  }
  .web-title .title-0 {
    font-size: 24px;
  }
  .page-hero .page-hero-mask h1 {
    font-size: 24px;
  }
  #products .products-list .item,
  #products .products-list .item[class],
  #products .products-list .item[status='on'] {
    width: 48%;
    margin-left: 4%;
  }
  #products .products-list .item:nth-child(3n+1),
  #products .products-list .item:nth-child(odd) {
    margin-left: 0;
  }
  #products .products-list .item:nth-child(even) {
    margin-left: 4%;
  }
  #products .products-list .item:hover .main,
  #products .products-list .item .main {
    opacity: 0;
  }
  #news .news-list .item[class] {
    width: 48%;
    margin-right: 4%;
  }
  #about, #contact, #new-product, #products.products, #news.wrap {
    padding: 28px 18px 36px;
  }
  #index-brand .main {
    margin-top: 16px;
    padding: 22px 18px;
  }
}

@media only screen and (max-width: 768px) {
  #news .news-list .item[class] {
    width: 100%;
    margin: 0 0 16px;
  }
  .web-detail .detail-name {
    font-size: 22px;
  }
}

@media only screen and (max-width: 480px) {
  #products .products-list .item[class],
  #products .products-list .item[status='on'] {
    width: 48%;
    margin-left: 4%;
  }
  #products .products-list .item:nth-child(odd) {
    margin-left: 0;
  }
}