@font-face {
font-family: AktivgrotestBold;
src: url('../fonts/AKTIVGROTESK_TRIAL.TTF')
}

@font-face {
font-family: AktivgrotestMedium;
src: url('../fonts/AKTIVGROTESK_TRIAL_MD.TTF')
}

@font-face {
font-family: AktivgrotestRegular;
src: url('../fonts/AKTIVGROTESK_TRIAL_RG.TTF')
}
*{
	-webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;

}
*{
	-webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;

}
[class^="bi-"]::before, [class*=" bi-"]::before {
    vertical-align: middle;
}
:root{
--bs-main-color:#c5853a;
--bs-second-color:#ffbe13;		
}
body{ background-color:#f8f1ea; font-family:"AktivgrotestRegular",Arial, Helvetica, sans-serif; font-size:14px;overflow-x:hidden; color:#333; line-height:1.6; padding-top:0.75rem;}
.bold-tit{ font-family:"AktivgrotestBold";}
.mbold-tit{ font-family:"AktivgrotestMedium";}
.num-bold{ font-family:Arial, Helvetica, sans-serif}
a{ color:#333; text-decoration:none;}
a:hover{color: var(--bs-main-color); text-decoration:none;}
.btn-red{ background:var(--bs-main-color); color:#fff; padding:0.5rem 1.5rem; text-transform:capitalize; border-radius:20px; font-size:14px;}
.btn-red:hover,.btn-red.active{ background:var(--bs-main-color); color:#fff}
.btn-primary{ background:var(--bs-main-color); border-color:var(--bs-main-color);color:#fff}
.btn-primary:hover{ background:#315299; border-color:#315299;}
.btn-outline-primary{color:var(--bs-main-color); border-color:var(--bs-main-color);}
.btn-outline-primary:hover{background-color:var(--bs-main-color); color:#fff;}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--bs-main-color) !important;
}

.text-primary{color:var(--bs-main-color) !important;}
.fs-12{ font-size:12px;}
.fs-14{ font-size:14px !important;}
.fs-16{ font-size:16px;}
.fs-18{ font-size:18px;}

img{ max-width:100%;}
.container{ max-width:1300px;}

section h2{ font-size:40px;}

.header{ z-index:30; width:100%; position:absolute; left:0; top:10px;}

.navbar {
    margin-bottom:10px;
    border-radius: 0;
	position:relative;	
}

/* 2026.6 xin menu */
      /* --- 1. 导航触发按钮 (汉堡图标) --- */
        .nav-trigger {
            position: fixed;
            top: 30px;
            left: 20px;
            z-index: 100; /* 保证在最上层 */
            cursor: pointer;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease;
        }

        /* 简单的 SVG 汉堡图标 */
        .nav-trigger svg {
            width: 45px;
            height: 45px;
            stroke: #fff; /* 初始颜色深色 */
            stroke-width: 1;
            fill: none;
            transition: stroke 0.3s ease;
        }

        /* 当菜单打开时，汉堡按钮变白（如果在深色背景上）或隐藏 */
        body.menu-active .nav-trigger {
            opacity: 0;
            pointer-events: none;
        }
		.searchtop{			
			position: fixed;
            top: 30px;
            right: 35px;
            z-index: 100; /* 保证在最上层 */
            cursor: pointer;
			font-size:20px;
			color:#fff;
		}

        /* --- 2. 全屏菜单容器 --- */
        .fullscreen-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
			max-width:400px;
            height: 100%;
            background-color:#fff;
            z-index:101;
            transform: translateX(-100%); /* 默认隐藏在左侧屏幕外 */
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); /* 平滑过渡动画 */
            display: flex;
            flex-direction: column;
        }

        /* 激活状态：菜单滑入 */
        .fullscreen-menu.is-open {
            transform: translateX(0);
        }

        /* --- 3. 菜单头部 + 关闭按钮) --- */
        .menu-header {
			position:relative;
			display: flex;
            align-items: center;
            padding: 30px 40px;
			border-bottom:1px solid #ddd;
        }

        .logo {
			position:absolute;
			top:20px;
			left:50%;
			transform:translateX(-50%);
			z-index:100; 
        }
		.logo img{transition: width 0.5s; width: clamp(100px, 7.5vw + 50px, 250px);  filter: brightness(300%);height:auto; }

        /* 关闭按钮 (X) */
        .close-btn {
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: opacity 0.3s;
			margin-right:20px;
        }

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

        .close-btn svg {
            width: 32px;
            height: 32px;
            stroke: #333;
            stroke-width: 1;
        }

        /* --- 4. 菜单内容区域 --- */
        .menu-content {
            flex: 1;
            display: flex;
            padding: 40px 30px 40px 20px;
            width: 100%;
			overflow-y:auto;
        }

        /* 左侧列表 */
        .menu-links {
            list-style: none;
            margin-top: 20px;
            width:100%;
        }

        .menu-links li {
            margin-bottom: 20px;
        }

        .menu-links a {
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            display: block;
            transition: color 0.2s;
        }

        .menu-links a:hover {
            text-decoration: underline;
        }

        /* 带有子菜单的项 */
        .has-submenu > a {
            position: relative;
            padding-right: 20px;
        }

        /* 子菜单箭头指示器 */
        .has-submenu > a::after {
            content: '+';
            position: absolute;
            right: 0;
            font-size: 20px;
            transition: transform 0.3s;
        }

        /* 展开时的箭头旋转 */
        .has-submenu.active > a::after {
            transform: rotate(45deg); /* 变成 x */
        }

        /* 子菜单列表 */
        .submenu {
            list-style: none;
            max-height: 0; /* 默认高度为0 */
            overflow: hidden;
            transition: max-height 0.4s ease-out; /* 高度动画 */
            padding-left: 0;
            display:grid;
			grid-template-columns: repeat(3, 1fr); 
			gap:2px;
        }
		
		.submenu li{margin:10px 0 0; }

        .submenu li a {
            font-size: 14px;
            padding: 0 0 2px 0;
        }

/* language xiala */
.topLanguage{position:relative; display:inline-flex; z-index:10000; }
	.topLanguage i{ font-size:18px; cursor:pointer; line-height:50px; padding-right:8px;}
	.topLanguage .current-lang span{ display:block; line-height:16px; font-size:12px;cursor:pointer;}
	.innerbox{ position:absolute; top:99.9%; left:50%; transform:translateX(-50%);background:#fff; text-align:center; width:100px; padding:15px 15px; display:none; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); font-size:13px; border-radius:3px; border:1px solid #eee;}
	.innerbox a.active{color: #5ba95f;}
	.innerbox a,.innerbox span{ display:block;}
	.innerbox a{ color:#333; white-space:nowrap; line-height:36px;}
	.innerbox a:hover{ color:var(--bs-second-color);}
	.innerbox span{ width:60px; height:0; border-bottom:1px solid #ccc; margin:10px auto;}
	.innerbox:before{ position:absolute; top:-11px; left:50%; margin-left:-5px; content:""; width:0; height:0; border-width:6px; border-style:solid; border-color:transparent transparent #e0e0e0 transparent; }
	.topLanguage:hover ,.topLanguage:hover i{ color:var(--bs-main-color);}
	.topLanguage:hover .innerbox{ display:block;}
/* search xiala */

.search-pop{ background:rgba(0,0,0,0.9); position:fixed; top:0; left:0; right:0; bottom:0; z-index:20000; display:none;}
.search-pop .zhongjian{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%;}
.search-pop.show{ display:block;}
.search-pop .close{ font-size:3rem; color:#ccc !important; cursor:pointer;}
	

.header.fixed-top{ background:#f8f1ea !important; color:#666;box-shadow: 0 3px 3px rgba(0,0,0,0.05); position:fixed !important; height:60px; top:0;}
.header.fixed-top .logo{ top:6px;}
.header.fixed-top .logo img{ height:45px; width:auto; filter: none;}
.header.fixed-top .nav-trigger{ top:8px;}
.header.fixed-top .nav-trigger svg{stroke: #333;width: 30px;  height: 30px;}
.header.fixed-top .searchtop{ display:inline-block; color:#666; top:12px;}

 body.pages{ padding-top:0;}
.pages .header{ background:#f8f1ea !important; color:#666; position:relative; top:0;height: 60px;}
.pages .header .logo{ top:8px;}
.pages .header .logo img{ height:45px; width:auto; filter: none;}
.pages .header .nav-trigger{ top:8px;}
.pages .header .nav-trigger svg{stroke: #333;width: 30px;  height: 30px;}
.pages .header .searchtop{ display:inline-block;color:#666; top:12px;}


#index-slide{ height:calc(100vh - 40px); position:relative;}
#index-slide .swiper-slide{position:relative;}
#index-slide .swiper-slide video{width:100%;  height:100%;  -o-object-fit: cover;  object-fit: cover;}
#index-slide  .swiper-slide .container{ position:absolute;top:calc(10% + 60px); left:50%; transform:translate(-50%,0);z-index:2;}
#index-slide .tx-caption { width:820px; margin:0 auto; color:#fff;}
#index-slide .tx-caption h2{font-size:36px;}
#index-slide .tx-caption p{font-size:32px;}

#index-slide .swiper-pagination {
  bottom: 5%;
}
#index-slide .swiper-pagination-bullet{ background:#fff; height:2px; width:50px; border:0;border-radius:0; opacity:1; margin-left:5px; margin-right:5px;}
#index-slide .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:var(--bs-main-color);opacity:1}
#index-slide .swiper-button-next, #index-slide .swiper-button-prev{ color:var(--bs-main-color)}

.front-hero{ position:absolute; z-index:999; bottom:0; left:50%; transform:translate(-50%,calc(15% + 20px)); color:#fff;}
.text-140 {
  font-size: clamp(1.875rem,7.2916666667vw,17.5rem);
  line-height: 1;
}

.TborderTit{ padding-top:15px; position:relative;}
.TborderTit:before{ content:""; position:absolute; top:0; left:0; width:40px; height:3px; background:var(--bs-main-color); border-top-left-radius:3px; border-bottom-right-radius:3px;}
.TborderTit.white:before{background:#fff;}

.about-home{background:url(../images/index_03.jpg) no-repeat center center; background-size:cover; position:relative;}
.about-home:after{content:""; position:absolute; top:0; left:0; bottom:0; width:300px;background:rgba(255,228,200,0.8); z-index:1;}
.about-home .inn{ z-index:2; position:relative;}
.lettersp{ letter-spacing:1px;}

.ad-home{background:url(../images/handwe-734e.jpg) no-repeat center center; background-size:cover; aspect-ratio: auto 188 / 77;}
.ad-home .container{ padding-top:8%;}

.signature{ padding:0 60px;}
.mySwiper .swiper-slide{ width:310px; height:450px;}
.rcpro{ }
.rcpro .pic img{ width:100%; height:100%; object-fit:contain; }
.signature .swiper-button-prev{
  left:0;
  right: auto;
  width: 36px;
  height: 36px;
  background-color:transparent;
  border-radius:50%;
  color: #666;
  border:1px solid #666;
  opacity: 1;
}
.signature .swiper-button-next {
  left: auto;
  right: 0;
  width: 36px;
  height: 36px;
  background-color:transparent;
  border-radius:50%;
  color: #666;
  border:1px solid #666;
  opacity: 1;
}
.signature .swiper-button-next:after, .signature .swiper-button-prev:after {
  font-size: 20px;
}
.signature .swiper-button-next:hover,.signature .swiper-button-prev:hover {			
	color:var(--bs-main-color);	
	opacity: 1;
	border:1px solid var(--bs-main-color);
	background-color:#fff;
}
.signature .swiper-button-next.swiper-button-disabled, .signature .swiper-button-prev.swiper-button-disabled{
  opacity: .5;
  cursor: auto;
  pointer-events: none;
}



.footer{  position:relative; border-top:1px solid rgba(160,160,160,0.3) }
.footer a{}
.footer a:hover{ color:var(--bs-main-color); }


.foot-menu{ position:relative;}
.footShare{ display:flex; align-items: center !important;}
.footShare a{ display:inline-flex; font-size:20px; margin:0 10px 0 0; background:#333; width:36px; height:36px; line-height:20px; text-align:center;  border-radius:50%;align-items: center !important;justify-content:center;  color:#fff;}
.footShare a:hover{ background:var(--bs-main-color);color:#fff;}


.foot-widget{ margin-bottom:1em;}
.foot-widget h4{ font-size:1.1em; text-transform:uppercase; margin-bottom:20px;}
.foot-widget ul{ display:inline-block;}
.foot-widget li{ padding:6px 0; }
.foot-widget li.active{ border-bottom:2px solid var(--bs-main-color);}

.fcopyright{ border-top:1px solid #ccc; text-align:center;}

.footer-contact-info li{ min-height:42px; line-height:1.8; margin:5px 0 0; position:relative; padding-left:40px; padding-bottom:8px;}
.footer-contact-info li i{ position:absolute; top:2px; left:0; width:36px; height:36px; line-height:32px; font-size:16px; text-align:center; }


/* news */
    .articleItem{  position:relative;  margin:0 auto 20px; text-align:left; }
    .articleItem .pic{ position:relative; padding-top:calc(267/420 * 100%); overflow:hidden;background:var(--bs-main-color);}
    .articleItem .pic img{ position:absolute; top:0; left:0;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
    .articleItem .pic:hover img{ transform:scale(1.1,1.1); opacity:0.8}
    .articleItem .content{ padding:15px 0;color:#555; }
    .articleItem .content h4{ font-size:18px; line-height:1.2; margin-bottom:10px}
.articleItem.ni2{ background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.3); border-radius:12px; overflow:hidden;}
.articleItem.ni2 .pic{ padding-top:calc(250/425 * 100%);}	
.articleItem.ni2 .content{ padding:15px 15px 10px 15px;}

.blogList li{ position:relative; border-bottom:1px solid #ccc; padding:0 0 10px; margin-bottom:25px;}
.blogList li a.linkout{ position:absolute; bottom:30px; right:5px;}

/* pages */

.page-banner{ position:relative; color:#fff; background-color:#121212}
.page-banner .mask{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index:1;}
.page-banner .container{ position:absolute; z-index:2; text-align:center; top:50%; left:50%; transform:translate(-50%,-50%); height:calc(100% - 50px)}
.page-banner .container .inner{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.page-banner h2{ font-size:48px; text-transform:capitalize;line-height:1.5;}
.page-banner .location{  color:#fff; position:absolute; bottom:30px; left:2px;}
.page-banner .location a,.page-banner .location span{ color:#fff;}
.page-banner .location a:hover{color:var(--bs-main-color);}
@media (max-width: 600px) {.page-banner p.lead{ display:none;}}
.pagesTit{ text-align:center;}
.pagesTit .TborderTit:before{ top:0; left:50%; transform:translateX(-50%)}

.promenu a{ padding-bottom:5px; border-bottom:2px solid #fff; margin-right:18px; margin-bottom:10px;}
.promenu a.current{ border-bottom:2px solid var(--bs-main-color);}


.card.craItem{ border:0; border-radius:10px; overflow:hidden; padding-bottom:20px;background-color:transparent; box-shadow:none;}
.card.craItem .card-img-top{padding:15px; padding-bottom:5px;}
.card.craItem .card-title{ font-size:24px; letter-spacing:1px;}
.card.craItem .card-text{ font-size:16px;}

.video video{ width:100%; height:auto;}

.row-eqheight .col-12{ position:relative;}
.row-eqheight .col-12:after{ content:""; position:absolute; top:0; right:0.6rem; left:0.6rem; bottom:0; background:#fff; z-index:0;border-radius:10px;transition: all .35s linear; }
.row-eqheight .col-12 > div{ position:relative; z-index:2;}
.shadowbox .col-12:hover:after{ box-shadow:0 0 20px rgba(0,0,0,0.4)}

.contact-content{ margin-top:-150px; position: relative; z-index: 3;}
@media (max-width: 1200px) {.contact-content{ margin-top:-100px}}
@media (max-width: 800px) {.contact-content{ margin-top:30px}}
.mw-750{ max-width:750px;}
.contact-form .form-control{ font-size:14px; color:#666; border:0; background-color:#fff; border:1px solid #333; line-height:1.8 }
.contact-form p{ margin-bottom:1.5rem;}
.contact-form label{ margin-bottom:6px;}
.contact-form .form-control::placeholder{ font-size:0.9rem; color:#999;}

.page-contact-info{ position:relative; padding-left:50px;}
.page-contact-info h4{ font-size:16px; margin-bottom:5px;text-transform:uppercase;}

.page-contact-info p{ min-height:30px; line-height:1.8; margin:5px 0 0; }

.page-contact-info p i{ position:absolute; top:10px; left:0; width:40px; font-size:18px; border:1px solid #ccc; border-radius:50%; text-align:center; line-height:40px; }

.cshare a{ font-size:16px; margin:0 5px; color:#bbb; display:inline-block;}

.cshare a:hover{ color:var(--bs-main-color);}


.contact-left{ padding-right:7%; border-right:1px solid #eee;}

.sicon { width:32px; height:32px; border-radius:50%;color:#999; font-size:18px; border:1px solid #ccc; display:inline-block; text-align:center; margin:0 5px;}

.s-contact{ background:var(--bs-main-color) url(../images/sbgimg.jpg) no-repeat center top; background-size:cover; color:#fff;}
.s-contact .contactForm .form-control{ font-size:14px; color:#fff; border:1px solid #fff; background-color:transparent; }
.s-contact .contactForm .form-control::placeholder{  color:#ccc;}

.borderTab{ border-bottom:1px solid #ccc;}
.borderTab li{ padding-bottom:12px; position:relative;}
.borderTab li.active:after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; background-color:#333;}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 1.35rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 1.35rem;
}
.leibie span{ display:inline-block; padding:5px 12px; border-radius:15px; background-color:#f8f1ea; border:1px solid #ccc; font-size:12px; margin-right:5px;}
.linkline{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:12px;}

.rpro{ text-align:center;}
.rpro .pic{ background-color:#fff; border-radius:15px; text-align:center; position:relative; padding-bottom:100%; margin-bottom:15px;}
.rpro .pic img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	aspect-ratio: 1;
  object-fit:contain;
  height:auto ;
  width: 70%;
}
.rpro .rtit{ font-size:16px;}
.rpro:hover .pic{ box-shadow:0 0 15px rgba(0,0,0,0.3)}

/* Tab 内容区 */
    .tab-content {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      margin-top: 2rem;
	  margin-bottom:3rem;
    }

.tabdiv{ display:none;min-height: 300px; }
.tabdiv.selected{ display:block;}

.entry-header{  margin-bottom:30px;}
.entry-title{ text-align:center; margin:0 auto 20px; font-size:30px; color:#121212;}
.entry-info{  margin:10px auto; color:#646464; font-size:14px;}
.entry-info{ max-width:860px;}
.author .touxiang{ border-radius:50%; width:74px; height:74px; overflow:hidden; margin-right:15px;}
.author .touxiang img{width:74px; height:74px;object-fit: cover;}
.author .name,.author .datet{ display:block; line-height:2;}

.entry-content{color:#646464; line-height:1.8;max-width:1000px; margin:0 auto; margin-bottom:50px;  }
.entry-content p{ margin-bottom:25px;}
.entry-content img{ max-width:100%;}
.post-share { padding: 20px 0 20px; position:relative; }
.post-share a{ margin:0 5px; display:inline-flex; color:#999; font-size:20px; width:32px; height:32px; border-radius:50%; border:1px solid #ccc; text-align:center;}
.post-share a:hover{ background-color:var(--bs-main-color); color:#fff; border:1px solid var(--bs-main-color);}

.hotproIt{ background:#f9f9f9; position:relative; overflow:hidden; border-radius:20px;}
.hotproIt a{ color:#fff;}
.hotproIt .pic{ margin:0 auto;}
.hotproIt .pic img{max-width:100%;}
.hotproIt .pic .title-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.4));
}
.hotproIt .pic .image-cardTooltip-container-title {
  position: absolute;
  bottom: 33px;
  left: 30px;
  width: calc(100% - 60px);
  line-height: 44px;
  font-size: 27px;
  font-family: RooberttrialMedium;
  word-break: break-word;
  white-space: normal;
}
.hotproIt .txt{ position:absolute; top:0; left:0; width:100%; height:100%;padding: 40px 50px 70px;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  white-space: normal; z-index:2;}
.hotproIt:hover .pic{filter:blur(8px)}
.hotproIt:hover .pic .title-bg,.hotproIt:hover .pic .image-cardTooltip-container-title{ display:none;}
.hotproIt:hover .txt{ opacity:1;}

.image-cardTooltip-info-spitLine {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
  margin: 32px 0;
}
.image-cardTooltip-arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url("../images/icon-imageCardTooltip-arrow.svg") no-repeat;
    background-size: auto;
  background-size: 100% 100%;
  cursor: pointer;
}
.image-cardTooltip-arrow:hover {
  background: url("../images/icon-imageCardTooltip-activeArrow.svg") no-repeat;
}


.page-item.active .page-link {
  background-color: var(--bs-main-color);
  border-color: var(--bs-main-color);
}
.page-link {
  color: #666;
}
.page-link:hover {
  color: var(--bs-main-color);
}

#shuju-about .item:not(:last-child){ border-right:1px solid #333;}

.slitem{position:relative; overflow:hidden; background:var(--bs-main-color); margin-bottom:15px;}
.slitem .pic{ position:relative; overflow:hidden; }
.slitem .pic img{ width:100%;}
.slitem .text{ position:absolute; left:0; right:0; bottom:0;background-image: linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.35) 80%,rgba(0,0,0,0) 100%); color:#fff; padding:10px 5%;}
.slitem:hover .pic img{ transform:scale(1.05,1.05)}
.slitem .text h4{ font-size:24px;}

.slitem.round{ border-radius:20px;}

.product-home .nav-tabs {
  border-bottom:0;
   padding-bottom:30px;
}
.product-home .nav-tabs > li{ margin-bottom:10px;}
.product-home .nav-tabs > li > a {
  margin-right: 12px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding:4px 12px;
  color:#666;
  display:inline-block;
}
.product-home .nav-tabs > li > a:hover {
	background:var(--bs-main-color); color:#fff; text-decoration:none;
}
.product-home .nav-tabs > li.active > a,
.product-home .nav-tabs > li.active > a:hover,
.product-home .nav-tabs > li.active > a:focus {
  background:var(--bs-main-color);border: 1px solid var(--bs-main-color); color:#fff;
}

.pageNav2{ text-align:left; border-bottom:1px solid #ccc; }
.pageMenu{ padding:0; margin:0;font-size:20px;}
.pageMenu li{ display:inline-block; position:relative; padding-bottom:10px; margin-right:calc(4% + 30px);}
.pageMenu a{ padding:0 0; display:block;}
.pageMenu a:hover{ color:var(--bs-main-color);}
.pageMenu li.active:after{ content:" "; position:absolute; bottom:0; left:0; width:100%; height:2px; background-color:#333;}

@media (max-width: 600px) {.pageMenu li{ margin-right:10px;}}

.servicebg{ background:url(../images/rtwsxcgtr.jpg) no-repeat center top; background-size:cover;}
.spcItem{ background:#f2f2f2; padding:8% 8% 5% 8%;}
.spcItem:after{ content:""; position:absolute; top:0; left:15px; right:15px; bottom:0;  background:#f2f2f2; border-radius:10px; z-index:-1;}

.processitem{ background:url(../images/Services_03.png) no-repeat center 0; background-size:contain; width:calc(20% - 15px); min-width:170px; color:#fff; text-align:center; padding:2.2% 0; margin-bottom:20px; }
.processitem .step{ display:block; font-size:20px; letter-spacing:3px; text-transform:uppercase; line-height:1;}
.processitem .num{ display:block; font-size:45px; margin-bottom:20%; line-height:1.3}
.processitem .name{ margin-bottom:2.6%}
/* product details */
/* product detail slide */
	.image-section .d-flex{gap: 15px;}
    /* 自定义色块按钮样式 */
    .color-swatch {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      display: inline-block;
      margin: 4px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .color-swatch:hover {
      transform: scale(1.05);
    }
    .color-swatch.selected {
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
    }

   /* ===== 左侧图片区 ===== */
    .image-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem 0;
    }

    /* 主图容器：确保居中 + 最大宽度限制 */
    .main-image-container {
      width: 100%;
      max-width: 500px;	
	  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);  
	  background-color:#fff;
	  border-radius: 12px;
	  overflow:hidden;
      margin-bottom: 1.5rem;
    }

    .main-img {
      width: 100%;
      height: auto;
      display: block;
      /* 防止因父容器 flex 导致图片被压缩 */
      min-height: 400px; /* 保证最小高度，避免跳动 */
      aspect-ratio: 1 / 1;
	  object-fit: contain; /* 关键！保持比例，不裁剪 */

	 
    }

    /* 缩略图区域：严格垂直排列（大屏） / 横向滚动（小屏） */
    .thumbnails-wrapper {
      width: 100px;
    }

    .thumbnail-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* 默认单列 */
      gap: 12px;
    }

    .thumbnail-item {
      position: relative;
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .thumbnail-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    }

    .thumbnail-item.active::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border: 1px solid #333;
      border-radius: 8px;
      pointer-events: none;
    }

    .thumbnail-img {
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1; /* 严格正方形缩略图 */
      object-fit: cover;
      display: block;
    }

    /* 小屏：横向滚动缩略图 */
    @media (max-width: 991px) {
      .thumbnails-wrapper {
		  width: 100%;
		}
	  .thumbnail-grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .thumbnail-item {
        flex: 0 0 auto;
        width: 80px;
        min-width: 80px;
      }
      .thumbnail-img {
        aspect-ratio: 1 / 1;
      }
	  .thumbnail-item:hover {
		  transform: translateY(0) translateX(-2px);
		}
	.main-img {
	  min-height:inherit;
	}
    }


.imgs-hovers {
 position:relative;
 overflow:hidden;
}
.imgs-hovers:hover img {
 -webkit-transform:scale(1.1);
 -moz-transform:scale(1.1);
 -ms-transform:scale(1.1);
 -o-transform:scale(1.1);
 transform:scale(1.1)
}

.richtext ul {

  list-style:none !important;
  max-width:100%;
  padding:0;
  margin:0;
}

.richtext ul li {

  list-style:none !important;
  position:relative;
  padding-left:18px;
  color:inherit;
  margin-bottom:10px;
}

.richtext ul li em {  font-style:initial}

.richtext ul li * {
  font-size:inherit;
  color:inherit;
  line-height:inherit;
  margin-bottom:0;
}

.richtext ul li:before {
  content:'';
  display:block;
  width:5px;
  height:5px;
  border-radius:100%;
  position:absolute;
  left:0;
  top:10px;
  background-color:var(--bs-main-color);

}

/* 自定义样式：让折叠标题更紧凑，对齐图标 */
    .doc-section {
      overflow: hidden;
    }
    .doc-header {
      background-color: #f8f9fa;
      padding: 0.75rem 1rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
    }
    .doc-header:hover {
      background-color: #e9ecef;
    }
    .doc-content {
      padding: 1rem 0;
    }
    .doc-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1em;
      border-bottom: 1px dashed #dee2e6;
    }
    
    .doc-link a {
      text-decoration: none;
      color: #495057;
      font-size: 0.9rem;
    }
    .doc-link a:hover {
      color: #0d6efd;
    }
    .rotate-icon {
      transition: transform 0.3s ease;
    }
    .collapsed .rotate-icon {
      transform: rotate(180deg);
    }


/* faqs  */

.faq{border:0; box-shadow:none; border-bottom:1px solid #ccc;}

.faq-header .accordion-button{ background-color:transparent; color:#333; border-radius:0; padding:1.1rem 0; position:relative;font-size: 1rem; }

.faq-header .accordion-button:not(.collapsed):after{ color:#fff;}

.faq-header .accordion-button.collapsed{ background-color:transparent;  border:1px solid transparent; box-shadow:none;}

.faq-header .accordion-button:not(.collapsed){box-shadow:none; color:#333;}

.faq-header .accordion-button i{ margin-right:5px;}

.faq-header .accordion-button.collapsed .circleNum{ background-color:transparent; color:#333;  border:1px solid #ccc; border-radius:50%; width:30px; height:30px; text-align:center; line-height:28px;}
.faq-header .accordion-button:not(.collapsed) .circleNum{ background-color:var(--bs-main-color);border:1px solid var(--bs-main-color); color:#fff; border-radius:50%; width:30px; height:30px; text-align:center; line-height:28px;}

.faq-body{ box-shadow:none; padding:5px 0 20px 0; background-color:transparent;  line-height:1.7; color:#666; }

.accordion-button:after{ background:none;}

.accordion-button:not(.collapsed):after{ background:none;}

.faq-header .accordion-button .jia,.faq-header .accordion-button .jian{ display:block;font-size:24px; position:absolute; top:50%; margin-top:-14px; right:12px;}

#customize .faq-header .accordion-button .jia,#customize .faq-header .accordion-button .jian{ font-size:14px; margin-top:-10px;}

.faq-header .accordion-button .jia i,.faq-header .accordion-button .jian i{ margin:0 auto; }

.faq-header .accordion-button.collapsed .jia{ display:block;}

.faq-header .accordion-button.collapsed .jian{ display:none;}

.faq-header .accordion-button:not(.collapsed) .jia{ display:none;}

.faq-header .accordion-button:not(.collapsed) .jian{ display:block;}

#customize .faq-header .accordion-button.collapsed .current{ display:block; position:absolute; top:1.1rem; right:30px; }
#customize .faq-header .accordion-button:not(.collapsed) .current{display:none;}


.cerItem{ display:inline-block; background:#fff;  margin:0 auto;}
.cerItem .title{ padding-top:10px; }

.ad-col {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: #f7f7f7;
  position: relative;
}


@media screen and (max-width: 1024px){
	.navbar-nav{ display:flex;flex-direction: column;}
	.tx-caption{ display:none;}
	}

@media screen and (max-width: 640px){
.proCatInfo{ padding-bottom:50%}
.picFocus .smallImg li{ width:50px; margin-bottom:10px;}
.qcimg { max-width:42%;}.qcimg img{ max-width:100%;}	}
	
	@media screen and (max-width: 768px){

	.top .main_menu > li > a {
	  padding-top: 8px;
	  padding-bottom: 10px;
	}
	.navbar-brand img{ max-height:40px;}
	.carousel-indicators {
    margin-right: 0;
    margin-left: 0;
		}
		

#index-slide .tx-caption h2{ font-size:24px}					
#index-slide .tx-caption .spb{ display:none}

.focus-meta {
  position:relative;
  right:0;
  bottom:0;
}
.post-meta span{ margin:0 4px;}
.post-meta .bi{ margin-right:1px;}
.post-meta { font-size:13px;}

.main_menu > li > a {
  color: #333;
}
.page-banner{ min-height:150px;}
.page-banner h2{ font-size:24px;}

.top {
	height:auto;
}
.navbar-brand {
  padding: 10px 0;
  border-left: 0;
  border-right:0;
}

}



.grid-2{grid-template-columns:1fr 1fr;}


/* 卡片样式：带边框、圆角、悬停阴影 */
    .product-ralx {
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 1.5rem;
      height: 100%;
      display: flex;
      transition: box-shadow 0.3s ease;
    }
    .product-ralx:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* 产品图片容器：固定宽高比，居中 */
    .product-img-wrapper {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f9fa;
      border-radius: 4px;
      overflow: hidden;
	  margin-right:10px;
    }
    .product-img {
      max-width: 100%;
      max-height: 100%;
    }

    /* 标题和型号 */
	.product-rtxt{ position:relative;}
    .product-rtitle {
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #212529;
	  font-size:18px;
    }
    .product-rmodel {
      font-size: 0.875rem;
      color: #6c757d;
      margin-bottom: 1rem;
    }

    /* 右侧箭头按钮：无背景、仅图标，居右对齐 */
    .product-link {
		position:absolute;
		bottom:0;
		right:0;      
      color: var(--bs-main-color);
      text-decoration: none;
      font-size: 1.5rem;
      transition: transform 0.2s;
    }
    .product-link:hover {
      color: #0a58ca;
      transform: translateX(3px);
    }

    /* 响应式：小屏下卡片内元素垂直排列更紧凑 */
    @media (max-width: 576px) {
      .product-ralx {
        padding: 1rem;
      }
      .product-img-wrapper {
        width: 80px;
        height: 80px;
      }
    }
#custom-card{ gap:80px;grid-template-columns: repeat(3, 1fr);}
@media (max-width: 992px) { #custom-card{gap:30px}}
@media (max-width: 400px) {
  #custom-card {
    grid-template-columns: 1fr; /* 更小屏幕下一列 */
	gap:30px;
  }
}
.sb-main{ width:100%}
.sb-side{ width:100%;}
.sidesulist{flex-wrap: wrap;display: flex;gap: 1rem;}
@media (min-width: 992px){
.sb-main{ width:calc(100% - 360px)}
.sb-side{ width:340px;}
.sidesulist{display: block;gap: 0;}
}
.syitem{ background:url(../images/subybg.png) no-repeat 0 0; width:340px; height:271px; margin-bottom:20px;}
.syitem .inbox{ margin:0 30px 0 110px;}
.syitem.s01{ background-position:0 0;}
.syitem.s02{ background-position:0 -295px;}
.syitem.s03{ background-position:0 -590px;}
.syitem.s04{ background-position:0 -885px; height:280px;}

.history {            
			background:#fff url(../images/about_03.jpg) no-repeat center center;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
			height:690px;
        }
.history .inbox{
			display: flex;
            gap: 40px;
            position: relative;	
		}

        /* ——— 左侧时间轴 ——— */
        .timeline {
            width: 120px;
            position: relative;
			background:url(../images/tlinebg.png) repeat-y right 1px;
        }

        .timeline-item {
            position: relative;
            height: 80px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
		.timeline-item#tline02{ height:160px;}
		.timeline-item#tline03{ height:160px;}

        .timeline-item:hover .year-label,
        .timeline-item.active .year-label {
            color: #000000;
        }

        .timeline-item:hover .dot,
        .timeline-item.active .dot {
            background: #000000;
        }

        .dot {
            width: 6px;
            height: 6px;
			display:block;
            border-radius: 50%;
            background: #ccc;
            position: absolute;
			top:8px;
            right: 22px;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .year-label {
            position: absolute;
            right: 35px;
			top:0;
            font-size: 14px;
            color: #cccccc;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        /* ——— 右侧内容区 ——— */
        .content-area {
            flex: 1;
            min-height: 550px;
            
            overflow: hidden;
            position: relative;
        }
        .content-inner {
            padding: 60px 50px 80px;
            position: relative;
            z-index: 1;
        }
		.ctext{ max-width:420px;}

        .highlight-period {
            font-size: 36px;
            color: #222;
            margin-bottom: 16px;
        }

        .highlight-desc {
            font-size: 16px;
            color: #555;
            max-width: 480px;
            line-height: 1.7;
        }

        .gallery { 
            margin-top: 40px;
			position:absolute;
			left:460px;
			top:0;
			width:600px;
			xbackground-color:#f0f0f0;
        }

        .gallery-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            background: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
			padding:10px;
			background-color:#fff;
			display:inline-block;
        }

        .gallery-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
        }

        .gallery-img {
            display: block;
			margin-bottom:6px;
		
        }

        /* 隐藏所有内容，仅显示 active */
        .history .content-section {
            display: none;
        }

       .history  .content-section.active {
            display: block;
        }

        /* 响应式：小屏时改为单列 */
        @media (max-width: 768px) {
            .history {
                flex-direction: column;
                align-items: center;
            }
            .timeline {
                width: 100%;
                max-width: 300px;
            }
            .timeline::before {
                left: 20px;
            }
            .year-label {
                left: 36px;
            }
            .gallery {
                grid-template-columns: 1fr;
            }
            .content-inner {
                padding: 40px 20px;
            }
        }