html {
  scroll-behavior: smooth;
}

body, html {
  overflow-x: hidden;
}

body {
  background-color: #ffffff;
  margin: 0;
}
footer{
 
  height: 1050px;
  background-color: #2b2b2b;
}
#footer{
  
  background-color: #2b2b2b; /* 这是您之前为#footer设置的背景颜色 */
  color: #FFFFFF;
  align-items: center;    /* 垂直居中对齐 */

}
footer .container-us {
  top: 30px;
  position: relative;
  left: 240px;
  width: 1200px;
  display: flex;          /* 启用Flexbox布局 */
  flex-direction: row;
  justify-content: space-between; /* 三个部分均匀分布 */
  align-items: center;    /* 垂直居中对齐 */
  padding: 20px 0;        /* 上下增加一些填充 */
  background-color: #2b2b2b; /* 这是您之前为#footer设置的背景颜色 */
  color: #FFFFFF;
}

.footer-section {

  flex: 1;               /* 允许每个部分自动调整宽度 */
  padding: 0 15px;
  box-sizing: border-box;
}

#footer-address {
  text-align: left;      /* 地址部分文本左对齐 */
}

#footer-badge img {
  max-width: 100px;
  display: block;
  margin: 0 auto;        /* 使图标在中间部分居中 */
}

#footer-follow {
  text-align: right;     /* "Follow us"部分文本右对齐 */
  
}

.must {
  background-color: #2b2b2b;
  position: relative;
  top: 100px;
  text-align: center;
  width: 100%;           /* 撑满整个宽度 */
}
.must hr {
  position: relative;
  width: 80%;
  margin: 0 auto;  /* 使其水平居中 */
}
footer a {
  color: #fff;
}

#cao{
  opacity: 0.15;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.m-p{
  margin-bottom: 3px;
}


.container{
  width: 1700px;
  
}
nav {
  position: fixed;
  Background:linear-gradient(45deg,#ffffff,#E4EBF5);
  box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.4), 0px 2px 4px rgba(0, 0, 0, 0.5);
  
  width: 1700px;
  height: 4em;
  margin: 0 ;
  top:  0;
  left: 0;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}
nav {
  transition: transform 0.3s ease-out;
  
}

.nav-hide {
  transform: translateY(-100%);
}

.select{
  float: right;
  margin-left: 15px;
  top:0.5em;
  right:40px;
 
}
 


.logo {
  
  position: relative;
  top: 0.5em;
  left: 20px;
  float: left;
  width:120px;
  height: auto;
}





:root {

  --primary-light: #09cb3c;
  --primary: #21bc40;
  --primary-dark: #089a47;
  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;








  --background-color: #ffffff;
  --dark-color: #edededfa;
  --light-color: #000000;
  --accent-color-hue: 120;
  --accent-color: hsl(calc(var(--accent-color-hue) * 1deg) 70% 58%);
  --radial-bg-color: #000000;
  --max-height: 300px;
  --bg-y: -50;
  --bg-x: 200;
  --item-y: 40;
  --item-opacity: 0;
  --_inner-radius: 15;
  --_inner-padding: 4;
  --inner-radius: calc(var(--_inner-radius) * 1px);
  --inner-padding: calc(var(--_inner-padding) * 1px);
  --outer-radius: calc(calc(var(--_inner-radius) + var(--_inner-padding)) * 1px);
  --debug: 0;
  --a11y: 0;
  --outline-color: hsla(calc(var(--accent-color-hue) * 1deg) 100% 58% / calc(var(--a11y) * 100%));
}



div.select {
  color:#000000;
  background: var(--dark-color) radial-gradient(ellipse 70% 70% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), var(--radial-bg-color) 20%, var(--dark-color) 100%);
  padding: var(--inner-padding);
  border-radius: var(--outer-radius);
  position: relative;
  width: 145px;
  z-index: 1;
  transition: background 0.3s ease, --bg-y 0.4s ease, --bg-x 0.4s ease;
}
div.select:hover {
  animation: glow 1.8s ease-in-out;
}

div.select:before {
  content: '';
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.5) inset;

  display: block;
  position: absolute;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  top: 1px;
  left: 1px;
  background: var(--dark-color);
  border-radius: var(--outer-radius);
  z-index: -1;
}

div.select > button {
  padding: calc(var(--inner-padding) * 2) calc(var(--inner-padding) * 2);
  background: #e8edf4;
  border-radius: var(--inner-radius);
  border: 0;
  color: #000000;
  text-align: center;
  font-size: 1em;
  width: 100%;
  cursor: pointer;
  position: relative;
   box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.3);
  transform: scale(var(--scale));
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.66, -0.82, 0.33, 1.73);
}

div.select > button:focus {
  outline: 1px solid var(--accent-color);
  outline-offset: -1px;
}

div.select > div {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}

div.select:hover > div,
div.select:focus-within > div {
 max-height: 1000px;
  transition: max-height 0.65s ease-in-out;
}

div.select > div > a {
  display: block;
  padding: calc(var(--inner-padding) * 1.6) calc(var(--inner-padding) * 1.2);
  color: var(--light-color);
  cursor: pointer;
  margin-top: 8px;
  text-decoration: none;
  border-radius: var(--inner-radius);
  position: relative;
}

div.select > div > a > span {
  position: relative;
  display: block;
  transform: translateY(calc(var(--item-y) * 1px));
  opacity: var(--item-opacity);
  transition: --item-y 0.2s ease 0.1s, --item-opacity 0.2s 0.1s;
}


div.select > div > a:focus {
  outline: 1px solid var(--outline-color);
  outline-offset: -1px;
}
div.select > div > a:hover, div.select > div > a:focus {
  color: var(--accent-color);
}


div.select:hover > div, div.select:has(button:focus) > div, div.select:focus-within > div {
  height: calc(var(--max-height) * 1px);
  --item-y: 0;
  --item-opacity: 1;
}

 




.custom-btn {
  margin: 20px;
  width: 45px;
  height: 20px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

  

.btn-13 {
  background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
   background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}