﻿#optiobg{ background: #f5f5f5;}

.option-position{ margin: 0 auto; margin-top: 180px !important; width: 90%; font-size: 1.2rem; height: 36px; line-height: 29px; border-bottom:1px solid #000000; padding-bottom: 7px; color: #afafaf;}
.option-position a{ color: #afafaf;}
.option-position span{ padding:0 10px;}
.option-position a.fa-home1{display: inline-block; width: 38px; height: 29px; line-height: 29px; text-align: center; color: #FFFFFF; background: #000000 url(../images/newsicon.jpg) no-repeat center; border-radius:4px;}

/*Grids*/

.option-cate-info{margin: 0 auto;  margin-top: 50px; width: 90%;}

.option-cate-info-left{ width: 50%;}
.option-cate-info-leftbox{ width: 100%; padding: 50px 188px;}
.option-cate-info-leftbox h1{ color: #000000; font-size: 3.4rem; line-height: 78px; margin-bottom: 25px;}
.option-cate-info-leftbox p{ font-size: 1.2rem; line-height: 30px;}

.option-cate-info-right{ width: 50%;}
.option-cate-info-right img{ width: 100%; height: 100%; object-fit: cover;}

.option-contact{margin: 80px auto;   width: 90%;}
.option-contact-left{ width: 50%;}
.option-contact-left img{ width: 100%; height: 100%; object-fit: cover;}

.option-contact-right{ width: 50%;}
.option-contact-right-info{ width: 100%; padding: 50px 138px;}
.option-contact-right-info p{ color: #000000; font-size: 1.3rem; line-height: 30px; margin-bottom: 30px;}
.option-contact-right-info p a{ color: #004EFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.option-contact-right-info p a img{ margin:0 3px;}
.option-contact-right-info a::after{ display:inline-block; content:""; width:14px; height:14px; background:url(../images/casejts.png) no-repeat center; margin:0 5px;}



.option-title{ padding: 25px 0; border-bottom:1px solid #000000;}
.option-title h2{ font-size: 2.8rem; color: #000000; line-height: 36px;}

.option-list{gap: 60px; grid-template-columns: repeat(2, 1fr); /* 3 列 */  display: grid; padding: 50px 0 20px 0;}

.option-list-item{ width: 100%;}
.option-list-item img{ width: 100%; height: auto; margin: 25px 0;}
.option-list-item-pic{ width:100%;}
.option-list-item-pic-left{ width:70%;}
.option-list-item-pic-right{ width:28%;}
.option-list-item h3{ color: #000000; font-size: 1.6rem; line-height: 32px; margin-bottom: 15px;}
.option-list-item p{ font-size: 1rem; line-height: 22px; }
.option-list-item h4{ color: #000000; font-size: 1rem; line-height: 30px;}
/* 鼠标经过效果：加到你现有CSS后面即可 */
.option-list-item{
  transition: transform .18s ease, box-shadow .18s ease,padding .18s ease, background-color .18s ease;
  border-radius: 10px;
}

.option-list-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  background: #fff; padding: 10px;
}

/* 标题微变色（可选） */
.option-list-item:hover h3,
.option-list-item:hover h4{
  color: #000000;
}


.option-pic-warp{ padding: 60px 0;}
.option-pic-menu{ width: 275px;}
.option-pic-menu ul li{ font-size: 1.2rem; line-height: 36px;}
.option-pic-menu ul li a.active{ background: #e4e7eb; display: inline-block; padding: 0 10px; border-radius:6px;}
.option-pic-menu ul li i.fa-angle-up{
    font-size: 1.4rem;
    margin-left: 10px;
    line-height: 20px;
    position: relative;
    top: 1px;
}
.option-pic-menu ul li i.fa-angle-down{
    font-size: 1.4rem;
    margin-left: 10px;
    line-height: 20px;
    position: relative;
    top: 3px;
}

.option-pic-menu ul li ul{ padding: 8px 0; display: none;}
.option-pic-menu ul li ul li a.active{ background: #e4e7eb;}
.option-pic-menu ul li ul li a{ display: inline-block; padding: 0 10px; border-radius:6px;}

.option-pic-list-wap{width: calc(100% - 275px);}
.option-pic-list{ width:100%;  gap: 50px; grid-template-columns: repeat(3, 1fr); /* 3 列 */  display: grid;}
.option-pic-list dl{ width: 100%; text-align: center;}
.option-pic-list dl dt{ background: #FFFFFF;  border: 1px solid #CCCCCC; border-radius:12px; overflow: hidden;}
.option-pic-list dl dt img{ width:100%; height:100%; display:block;}
.option-pic-list dl dd{ width: 100%; font-size: 1.1rem; margin-top: 10px; line-height: 26px; color: #000000; font-family: myFirstFont2; font-weight: 500;}


.option-brand-title{padding: 65px 0; border-top:1px solid #000000;}
.option-brand-title h2{ font-size: 2.8rem; color: #000000; line-height: 36px;}

.option-brand-marquee{ padding-bottom:50px; }

.obm-viewport{
  overflow:hidden;
  position:relative;
}

.obm-track{
  display:flex;
  width:max-content;
  animation: obm-marquee var(--obm-duration, 22s) linear infinite;
  will-change: transform;
}

.obm-group{
  display:flex;
  align-items:center;
  gap:18px;
  flex:0 0 auto;
}

.obm-group a{ flex:0 0 auto; display:block; padding:10px; }
.obm-group img{ display:block; height:74px; width:auto; }

/* 悬停暂停 */
.option-brand-marquee:hover .obm-track{
  animation-play-state: paused;
}

/* 无缝：移动半个轨道（因为我们复制了一份） */
@keyframes obm-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* 低动效偏好：自动停掉 */
@media (prefers-reduced-motion: reduce){
  .obm-track{ animation:none; }
}

.GirdsMore{ font-size:1rem; line-height:32px; margin-top:0; margin-bottom:40px; }
.GirdsMore a{ color:#004EFF; text-decoration:underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.GirdsMore a img{ margin:0 3px;}


@media (max-width: 1200px) {


.option-position{ margin-top: 80px !important; width: 94%; font-size: 1rem;}

/*Grids*/

.option-cate-info{margin: 0 auto;  margin-top: 20px; width: 94%;}

.option-cate-info-left{ width: 100%;}
.option-cate-info-leftbox{ width: 100%; padding:20px 0;}
.option-cate-info-leftbox h1{ font-size: 1.6rem; line-height: 36px; margin-bottom: 15px;}
.option-cate-info-leftbox p{ font-size: 1rem; line-height: 26px;}

.option-cate-info-right{ width:100%;}


.option-contact{margin: 20px auto;   width: 94%;}
.option-contact-left{ width: 100%;}


.option-contact-right{ width: 100%;}
.option-contact-right-info{ width: 100%; padding: 20px 0;}
.option-contact-right-info p{font-size: 1rem; line-height: 26px; margin-bottom: 15px;}



.option-title{ padding: 15px 0;}
.option-title h2{ font-size: 1.4rem; line-height: 30px;}

.option-list{gap: 10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid; padding: 20px 0;}


.option-list-item img{ width: 100%; height: auto; margin: 15px 0;}
.option-list-item h3{ color: #000000; font-size: 1.2rem; line-height: 32px; margin-bottom: 15px;}
.option-list-item-pic{ width:100%;}
.option-list-item-pic-left{ width:70%;}
.option-list-item-pic-right{ width:28%;}

.option-pic-warp{ padding: 30px 0;}
.option-pic-menu{ width: 100%;}
.option-pic-menu ul li{ font-size: 1rem; line-height: 32px;}
.option-pic-menu ul li i{ font-size: 1.2rem; margin-left: 10px;}
.option-pic-menu ul li ul{ padding: 5px 0; display: none;}

.option-pic-list-wap{ width: 100%;}
.option-pic-list{ gap:10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */ margin-top: 30px;  }
.option-pic-list dl dt{ padding: 20px; }
.option-pic-list dl dd{  font-size: 1rem;}


.option-brand-title{padding: 35px 0;}
.option-brand-title h2{ font-size: 1.4rem;  line-height: 30px;}

.option-brand-list{gap: 10px; grid-template-columns: repeat(3, 1fr); /* 3 列 */  display: grid; padding-bottom: 20px;}




}


