header {
  width: 100%;
  overflow: hidden;
}

header img {
  width: 100%;
}

.index-header {
  padding: 3vw 5vw;
  background-color: #f7fafc;
  position: relative;
  padding-bottom: 0;
}

.header1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header1 .list {
  width: 3vw;
}

.header1 section .list {
  margin-left: 2vw;
}

.header1 section {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transform: scale(1.05);
}

.btn2:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.reddd{
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
}

.reddd .list{
  height: 100%;
}

.header3 {
  position: absolute;
  right: 5vw;
  top: 5vw;
  height: 100%;
}

.header3 img {
  width: 3vw;
}

.header3 .test3 {
 height: 100%;
}



.header3 .nav {
  position: absolute;
  top: -5vw;
  background: linear-gradient(to right, #f7fafc, #504949);
  height: 100%;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  right: -35vw;
  transition: right 0.3s ease-in-out;
}

.header3 .test3:hover .nav {
  display: flex;
  right: -5vw;
}


.header3 .nav a {
  height: 5vw;
  margin-bottom: 5vw;
  color: #fff;
  font-size: 2.4vw;
  width: 20vw;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header3 a.active {
  background-color: #a41f2b;
}

.header3 .nav a:hover {
  background-color: #a41f2b;
}

.header1 .nav {
  position: absolute;
  top: 0;
  background: linear-gradient(to right, #f7fafc, #504949);
  height: 100%;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  right: -30vw;
  transition: right 0.3s ease-in-out;
  z-index: 100;
}

.header1 .test:hover .nav {
  display: flex;
  right: 0;
}

.header1 .nav a {
  height: 5vw;
  margin-bottom: 5vw;
  color: #fff;
  font-size: 2.4vw;
  width: 20vw;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header1 a.active {
  background-color: #a41f2b;
}

.header1 .nav a:hover {
  background-color: #a41f2b;
}

.header2 {
  width: 80vw;
  margin: 5vw auto;
  position: relative;
  z-index: 10;
}

.index-header p {
  max-width: 50vw;
  padding-left: 5vw;
  font-size: 1vw;
  position: relative;
  z-index: 10;
}

.index-header button {
  width: 12vw;
  height: 4vw;
  color: white;
  background-color: #a41f2b;
  font-size: 1.4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 3vw 0 0 5vw;
  z-index: 10;
  position: relative;
}

nav {
  width: 100%;
  background-color: #f9fafa;
  padding: 2vw 0vw 5vw 5vw;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav_left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
 position: relative;
 z-index: 10;
}

.nav_left img {
  width: 3vw;
  margin-right: 1vw;
}

.nav_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav_right .active {
  background: #a41f2b;
  color: #fff;
}

.nav_right a {
  width: 10vw;
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #a8a9a8;
  text-align: center;
  font-size: 1.1vw;
}

.nav_right a:hover {
  background: #a41f2b;
  color: #fff;
}

main {
  width: 100%;
  background: #f7fafc;
}

.main1 {
  padding: 8vw 10vw 5vw 5vw;
  position: relative;
}

.main1 img {
  width: 100%;
}

.main11 {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  padding: 5vw;
  padding-right: 10vw;
  background-color: #fff;
  /* width: 30vw; */
}

.main11 h2 {
  font-size: 3vw;

  font-weight: 500;
}

.main11 p {
  font-size: 1vw;
  padding: 1vw 0 5vw;
}

.main11 a {
  width: 12vw;
  height: 3vw;
  color: white;
  background-color: #25232a;
  font-size: 1.2vw;
  line-height: 3vw;
  text-align: center;
  display: block;
}

.main2 {
  padding: 5vw 0;
}

.main2 img {
  width: 100%;
}

.main3 {
  /* padding: 5vw 0; */
  position: relative;
}

.main3 .red0 {
  width: 100%;
}

.main3 .main31 img {
  width: 76vw;
  z-index: 10;
  position: absolute;
  /* z-index: 0; */
  left: 1vw;
  top: 2.5vw;
}

.main31 {
  position: absolute;
  left: 12vw;
  top: 25%;
}

.main31::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15vw;
  height: 15vw;
  background-color: #a41f2b;
}

.main3 a {
  width: 12vw;
  height: 4vw;
  color: white;
  background-color: #a41f2b;
  font-size: 1.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  position: absolute;
  left: 12vw;
  bottom: 10vw;
}

.main3 .red2 {
  position: absolute;
  right: 5vw;
  bottom: 1vw;
  width: 5vw;
}

footer {
  background: #25232a;
  padding: 5vw;
}

.footer_up {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer_up a {
  display: block;
  color: #a8a9a8;
  font-size: 1vw;
}

.footer_up .title {
  color: #fff;
  font-size: 1.2vw;
  padding-bottom: 0.8vw;
}

.footer_up .item {
  padding-right: 8vw;
  border-right: 0.1vw solid #a8a9a8;
  padding-left: 4vw;
  padding-bottom: 2vw;
}

.footer_up .item:last-child {
  border: none;
}

.footer_down {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footer_down img {
  width: 3vw;
  margin-right: 1vw;
}

.red {
  padding: 8vw;
}

.main3 img {
  width: 100%;
  margin-bottom: 3vw;
}

.main3_title {
  position: relative;
}

.main3_title h2 {
  position: absolute;
  right: 0;
  bottom: -0.5vw;
  font-size: 2vw;
}

.main3_1 {
  width: 60vw !important;
  margin: 0 auto;
}

.main3_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main3_2_left {
  padding: 3vw;
}
.main3_2_left h3 {
  font-size: 1.4vw;
}

.main3_2_right img {
  width: 47vw;
}

.header {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.header .h1 {
  width: 100%;
  height: 100%;
}

.header .h2 {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
}

.header .h3 {
  position: absolute;
  width: 80vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.contact {
  padding: 8vw;
}

.main4 {
  position: relative;
  padding-bottom: 30vw;
}

.main4 h2 {
  font-size: 2.4vw;
  padding-bottom: 1vw;
}

.main4 p {
  font-size: 1.5vw;
  max-width: 40vw;
}

.main4_1 {
  width: 20vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  right: 10vw;
  bottom: 12vw;
  background-color: #f7fafc;
  z-index: 10;
}

.index-header .line1{
  position: absolute;
  width: 100vw;
  height: 0.1vw;
  background-color: #898989;
  right: -8vw;
  top: 35vw;
  transform: rotate(67deg);
  /* z-index: -1; */
}

.index-header .line2{
  position: absolute;
  width: 158vw;
  height: 0.1vw;
  background-color: #898989;
  right: -54vw;
  top: 23vw;
  transform: rotate(13deg);
}

.index-header .line333{
  position: absolute;
  width: 100vw;
  height: 0.1vw;
  background-color: #898989;
  transform: rotate(308deg);
  top: 12vw;
  right: 12vw;
}

.main4 .line1 {
  position: absolute;
  width: 58vw;
  height: 0.1vw;
  background-color: #25232a;
  right: -3vw;
  transform: rotate(300deg);
}

.main4 .line2 {
  position: absolute;
  width: 40vw;
  height: 0.1vw;
  background-color: #25232a;
  right: -8vw;
  top: 0;
}

.main4_1 .logo1 {
  width: 10vw;
  margin-bottom: 1vw;
}

.main4_1 .logo2 {
  width: 100%;
}

.main5 {
  width: 100%;
  margin-bottom: 2vw;
}

.main5 ul {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5vw; /* 网格间距 */
  padding: 10px;
}

.main5 li {
  border-radius: 5px;
  grid-column: span 2;
}

.main5 li:first-child {
  grid-column: span 4;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 5vw;
  position: relative;
}

.main5 li h2:first-child {
  padding-bottom: 0.5vw;
}

.main5 h2 {
  font-size: 2.2vw;
}

.main5 li img {
  width: 100%;
  height: 20vw;
  margin-bottom: 0.5vw;
}

.main5 p {
  text-align: center;
  font-size: 1vw;
  font-weight: 500;
}

.main5 .lis1 {
  grid-column: span 3;
}

.main5 .lis1 img {
  height: 12vw;
}

.main5 .lis2 {
  grid-column: span 4;
}

.line3 {
  position: absolute;
  left: -5vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(290deg);
  z-index: 2;
}

.line4 {
  position: absolute;
  left: -9vw;
  top: 11vw;
  width: 28vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(328deg);
  z-index: 2;
}

.content {
  z-index: 10;
  background-color: #f7fafc;
  padding: 10px;
}

.line5 {
  position: absolute;
  left: 0vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(230deg);
  z-index: 2;
}

.line6 {
  position: absolute;
  left: -3vw;
  top: 11vw;
  width: 24vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(78deg);
  z-index: 2;
}

.line7 {
  position: absolute;
  left: 0vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(310deg);
  z-index: 2;
}

.line8 {
  position: absolute;
  left: -3vw;
  top: 11vw;
  width: 24vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(106deg);
  z-index: 2;
}

.line9 {
  position: absolute;
  left: 0vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(240deg);
  z-index: 2;
}

.line10 {
  position: absolute;
  left: -3vw;
  top: 11vw;
  width: 24vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(106deg);
  z-index: 2;
}

.line11 {
  position: absolute;
  left: 0vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(308deg);
  z-index: 2;
}

.line12 {
  position: absolute;
  left: -3vw;
  top: 11vw;
  width: 24vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(106deg);
  z-index: 2;
}

.line13 {
  position: absolute;
  left: 0vw;
  top: 12vw;
  width: 20vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(308deg);
  z-index: 2;
}

.line14 {
  position: absolute;
  left: -3vw;
  top: 11vw;
  width: 24vw;
  height: 0.1vw;
  background-color: #25232a;
  transform: rotate(106deg);
  z-index: 2;
}