:root{
  --Brand-Color: #f8298a;
  --pink: #f8298a;
  --light-pink: #fff3f9;
  --blue: #1ab8de;
  --light-blue: #f4fbfd;
  --yellow:#f2ff0b;
  --gray-dark:#333; 
  --Brown-Light:#C0A37B;
} 
.border-pink{border-color: var(--pink);}
.border-blue{border-color: var(--blue);}
.text-pink{color: var(--pink);}
.text-blue{color: var(--blue);}
.text-gray-dark{color: var(--gray-dark);}
.bg-pink{ background-color: var(--pink); }
.bg-light-pink{ background-color: var(--light-pink); }
.bg-yellow{ background-color: var(--yellow); }
.bg-blue{ background-color: var(--blue);}
.bg-light-blue{ background-color: var(--light-blue);}
.bg-Brown-Light{ background-color: var(--Brown-Light); }
.bg-unset{background-color: unset;}
a button,a, button{cursor: pointer;}
#header-container{position: sticky;top: 0;z-index: 9;background: #ffffff;}
#mobile-container{position: sticky;z-index: 9;bottom: 0;left: 0;right: 0;background-color: #ffffff;}
#contact-container .branch-card .flex svg{width: 14px;height: 17px;flex-shrink: 0;margin-right: 4px;}
/* 自定义滚动轴样式 */
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 15px; /* 滚动条宽度 */
  height: 10px; /* 滚动条高度（横向滚动条） */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f0f0f0; /* 轨道背景色 */
  border-radius: 10px; /* 圆角 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: #f8298a; /* 滑块颜色 */
  border-radius: 10px; /* 圆角 */
}

/* 滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: pink; /* 悬停时颜色 */
}

/* 移动端菜单 */
/* 初始化 */
[popover]{
  position: unset;
  width: unset;
  height: unset;
  overflow: unset;inset: unset;
}
@media screen and (max-width: 330px) {
  .websiteLOGO img{max-height:20px;}
}

@media screen and (max-width: 768px) { 
#nav[popover]:popover-open {
  translate: 0 0;position: fixed;
  display: flex;flex-flow: column;justify-content: center;
  background: white; 
  width: 100%;height: 100dvh;max-width: 55dvw;
  font-weight: 400;
  padding: 1rem 1.5rem;
  border-radius: 1rem; 
  line-height: 1.4;
  top: 0;right: 0;
  margin: 0 auto;border-radius: unset;background: whitesmoke;
}
/*   EXIT STATE   */
#nav[popover] {
  transition: translate 0.7s ease-out;
  translate:  22rem 0;
  position: unset;
  width: unset;
  height: unset;
  overflow: unset;inset: unset;
  
}
/*   0. BEFORE-OPEN STATE   */
@starting-style {
  #nav[popover]:popover-open {
    translate:  22rem 0;
  }
}
#nav[popover]:popover-open li.relative:hover ul{
  display: flex;width: 100%;flex-flow: column;transform: translateY(20px);
}
}

.contact-us-address .tab-content{display: none;}
  .contact-us-address .tab-content:first-child{display: block;}
  /* 隐藏的radio按钮样式 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* 标签页内容显示控制 */
  input#tab-luohu:checked ~ #content-luohu,
  input#tab-futian:checked ~ #content-futian,
  input#tab-nanshan:checked ~ #content-nanshan {
    display: block;
  }
  
  input#tab-luohu:checked ~ .flex label[for="tab-luohu"],
  input#tab-futian:checked ~ .flex label[for="tab-futian"],
  input#tab-nanshan:checked ~ .flex label[for="tab-nanshan"] {
    color: #fff;
    background-color: #AD8956;
    border-color: #AD8956;
  }
  
  /* 初始状态隐藏其他标签页 */
  .tab-content.hidden {
    display: none;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .grid.md\:grid-cols-3 {
      grid-template-columns: 1fr;
    }
  .service-text {font-size: 14px;}
  }
details{overflow: hidden;}
details[open] > summary {
  background-color:#AD8956;
}
details[open] > summary span{color: white;}
details summary span{font-weight: 500;} 
details p{font-size: 16px;}
/*animate*/
@keyframes wobble{
0%{-webkit-transform:translateZ(0);transform:translateZ(0)}
5%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}
15%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}
25%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}
35%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}
45%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}
to{-webkit-transform:translateZ(0);transform:translateZ(0)}} 
.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}
/*日历选择*/
input[type='date']{
 position:relative;
}
input[type='date']::-webkit-calendar-picker-indicator{
position:absolute;
right:0;
padding-left:calc(100% - 40px);
}