img {
  max-width: 100%;
  object-fit: cover
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover
}

.item_hover {
  overflow: hidden
}

.item_hover:hover img {
  transform: scale(1.05)
}

.item_hover img {
  width: 100%;
  height: 100%;
  transition: .6s ease
}

.common_more {
  width: 12.70833vw;
  height: 3.02083vw;
  position: relative;
  z-index: 1;
  padding: 0 0 0 4.16667vw;
  display: flex;
  align-items: center;
  margin: 0 auto 0;
}

.common_more:hover svg path {
  fill: #337AEA
}

.common_more svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1
}

.common_more svg path {
  transition: .6s all
}

.common_more p {
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase
}

.energy1 {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 10.41667vw
}

.energy1 .text {
  color: #FFF;
  font-style: normal;
  font-weight: 700;
  line-height: 125%
}

.energy2 {
  padding: 15.625vw 0 13.22917vw 0;
  position: relative;
  z-index: 2;
  margin-top: -7.70833vw;
  background: #fff
}

.energy2 .bg {
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  top: -10.15625vw
}

.energy2 .clip {
  position: absolute;
  top: -13.02083vw;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: all 2s;
  display: block
}

.energy2 .clip.animated {
  clip-path: inset(0 0 0 0)
}

.energy2 .en {
  color: #337AEA;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase
}

.energy2 .en span {
  font-family: "Montserrat";
  text-shadow: 1.5px 0 0 #337AEA, 0 1.5px 0 #337AEA, -1.5px 0 0 #337AEA, 0 -1.5px 0 #337AEA, 1.5px 1.5px 0 #337AEA, -1.5px -1.5px 0 #337AEA, 1.5px -1.5px 0 #337AEA, -1.5px 1.5px 0 #337AEA;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff
}

.energy2 .content {
  margin: 2.08333vw 0 0 0;
  padding: 0 9.27083vw 0 10.36458vw;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.energy2 .content .l {
  width: 39.21875vw
}

.energy2 .content .l img {
  width: 6.92708vw;
  display: block
}

.energy2 .content .l .text {
  margin: 2.1875vw 0 0 0;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.energy2 .content .images {
  width: 35.88542vw;
  height: 25.46875vw;
  border-radius: 10px
}

.energy3 {
  padding: 0 7.76042vw 9.47917vw 8.28125vw;
  position: relative;
  z-index: 1
}

.energy3 .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 99.42708vw
}

.energy3 .top {
  display: flex;
  justify-content: flex-end
}

.energy3 .top .en {
  color: #337AEA;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-align: right
}

.energy3 .top .en span {
  font-family: "Montserrat";
  text-shadow: 1.5px 0 0 #337AEA, 0 1.5px 0 #337AEA, -1.5px 0 0 #337AEA, 0 -1.5px 0 #337AEA, 1.5px 1.5px 0 #337AEA, -1.5px -1.5px 0 #337AEA, 1.5px -1.5px 0 #337AEA, -1.5px 1.5px 0 #337AEA;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff
}

@keyframes scaleA {
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0
  }
}

.energy3 .content {
  margin: 3.33333vw 0 0 0;
  display: flex;
  gap: 4.79167vw
}

.energy3 .content .l {
  width: 50.46875vw;
  position: relative
}

.energy3 .content .l .position {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none
}

.energy3 .content .l .position .point {
  pointer-events: auto;
  cursor: pointer;
  position: absolute
}

.energy3 .content .l .position .point:hover .hide {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
/* .energy3 .content .l .position .point:nth-child(3) .hide{
  width: 15.85417vw;
    height: 6.20833vw;
    z-index: 2;
} */
.energy3 .content .l .position .point.point1 {
  top: 11.51042vw;
  left: 7.70833vw
}

.energy3 .content .l .position .point.point2 {
  top: 9.11458vw;
  left: 24.42708vw
}

.energy3 .content .l .position .point.point2 .circle {
  width: 1.14583vw;
  height: 1.14583vw
}

.energy3 .content .l .position .point.point3 {
  top: 15.10417vw;
  left: 31.92708vw
}

.energy3 .content .l .position .point.point4 {
  top: 17.08333vw;
  left: 41.45833vw
}

.energy3 .content .l .position .point.point5 {
  top: 19.6875vw;
  left: 13.80208vw
}

.energy3 .content .l .position .point.point6 {
  top: 28.90625vw;
  left: 23.64583vw
}

.energy3 .content .l .position .point.point7 {
  top: 37.03125vw;
  left: 25.26042vw
}

.energy3 .content .l .position .point.point8 {
  top: 31.45833vw;
  left: 35.625vw
}

.energy3 .content .l .position .point .circle {
  width: .72917vw;
  height: .72917vw;
  border-radius: 50%;
  background: #337AEA;
  position: relative;
  z-index: 1
}

.energy3 .content .l .position .point .circle:after {
  content: '';
  position: absolute;
  width: 100%;
  background: #337AEA;
  border-radius: inherit;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: scaleA 1s linear infinite;
  opacity: .5
}

.energy3 .content .l .position .point .hide {
  position: absolute;
  bottom: calc(100% + 1.041666vw);
  left: -5.41667vw;
  width: 13.85417vw;
  height: 5.20833vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .67708vw;
  background: #fff;
  box-shadow: 0 4.628px 23.719px rgba(20, 0, 66, 0.2);
  border-radius: 15px;
  opacity: 0;
  pointer-events: none;
  transition: .6s ease
}

.energy3 .content .l .position .point .hide:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 5.20833vw;
  bottom: -.83333vw;
  border-left: .67708vw solid transparent;
  border-right: .67708vw solid transparent;
  border-top: .83333vw solid #fff
}

.energy3 .content .l .position .point .hide .icon {
  width: 1.875vw;
  height: 1.875vw
}

.energy3 .content .l .position .point .hide p {
  color: #000;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -1.228px
}

.energy3 .content .l .position .point .hide .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.energy3 .content .l .map {
  width: 100%
}

.energy3 .content .r {
  width: 28.64583vw;
  margin: 23.02083vw 0 0 0
}

.energy3 .content .r .p1 {
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 2.60417vw
}

.energy3 .content .r .p2 {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 0.96px
}

.energy4 {
  padding: 5.83333vw 6.04167vw 11.14583vw 6.04167vw;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.energy4 .l .circle {
  width: 11.25vw;
  height: 11.25vw;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2.55208vw
}

.energy4 .l .circle img {
  object-fit: contain;
  width: 8.33333vw
}

.energy4 .l .text {
  text-align: center
}

.energy4 .l .text .p1 {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 .83333vw
}

.energy4 .l .text .p2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.35417vw
}

.energy4 .l .text .p2 span {
  color: #337AEA;
  font-family: Inter;
  font-style: italic;
  font-weight: 900;
  line-height: normal
}

.energy4 .l .text .p2 p {
  color: rgba(0, 0, 0, 0.65);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 0 .36458vw;
  position: relative;
  top: .3125vw
}

.energy4 .l .text .p3 {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.energy4 .img {
  width: 59.84375vw
}

.energy4 .img img {
  width: 100%
}

.energy5 {
  padding: 0 6.04167vw 12.76042vw 6.04167vw;
  display: flex;
  justify-content: space-between
}

.energy5 .img {
  width: 36.71875vw;
  height: 39.21875vw;
  border-radius: .52083vw
}

.energy5 .r {
  width: 48.69792vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.energy5 .r .title {
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.energy5 .r .other .item {
  border-bottom: .10417vw solid #6C6C6C
}

.energy5 .r .other .item.on .show .add svg {
  transform: rotate(45deg)
}

.energy5 .r .other .item:first-child {
  border-top: .10417vw solid #6C6C6C
}

.energy5 .r .other .item .show {
  display: flex;
  justify-content: space-between;
  padding: .67708vw 0;
  cursor: pointer
}

.energy5 .r .other .item .show .l {
  display: flex;
  align-items: center;
  gap: .98958vw
}

.energy5 .r .other .item .show .l p {
  color: #000;
  font-style: normal;
  font-weight: 400
}

.energy5 .r .other .item .show .l .p1 {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.48px
}

.energy5 .r .other .item .show .add {
  width: 1.97917vw;
  height: 1.97917vw;
  border-radius: .10417vw;
  border: 1px solid #337AEA;
  background: #337AEA;
  display: flex;
  align-items: center;
  justify-content: center
}

.energy5 .r .other .item .show .add svg {
  width: .98958vw;
  height: .98958vw;
  transition: .6s ease
}

.energy5 .r .other .item .hide {
  overflow: hidden;
  display: none
}

.energy5 .r .other .item .hide>div {
  margin: 0 0 1.875vw
}

.energy5 .r .other .item .hide>div .text {
  width: 36.77083vw;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.energy6 {
  padding: 5.15625vw 0 8.17708vw;
  background: linear-gradient(244deg, #337AEA 33.56%, #337AEA 74.97%, #337AEA 118.06%);
  backdrop-filter: blur(9.35px);
  overflow: hidden;
  position: relative;
  z-index: 1
}

.energy6 .bg {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 67.91667vw;
  height: fit-content
}

.energy6 .en {
  color: #fff;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  position: relative
}

.energy6 .en span {
  font-family: "Montserrat";
  text-shadow: 1.5px 0 0 #337AEA, 0 1.5px 0 #337AEA, -1.5px 0 0 #337AEA, 0 -1.5px 0 #337AEA, 1.5px 1.5px 0 #337AEA, -1.5px -1.5px 0 #337AEA, 1.5px -1.5px 0 #337AEA, -1.5px 1.5px 0 #337AEA;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff
}

.energy6 .en img {
  width: 69.32292vw;
  display: block
}

.energy6 .content {
  display: flex;
  justify-content: flex-end;
  gap: 3.4375vw;
  margin: 1.71875vw 0 0 0
}

.energy6 .content .l {
  width: 18.22917vw;
  margin: 4.16667vw 0 0 0
}

.energy6 .content .l .p1 {
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  margin: 0 0 4.89583vw
}

.energy6 .content .l .p2 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.energy6 .content .l .button {
  display: flex;
  gap: 1.66667vw;
  margin: 7.29167vw 0 0 0
}

.energy6 .content .l .button .circle {
  position: relative
}

.energy6 .content .l .button .circle:hover img:first-child {
  opacity: 0
}

.energy6 .content .l .button .circle:hover img:last-child {
  opacity: 1
}

.energy6 .content .l .button .circle:last-child {
  transform: rotate(180deg)
}

.energy6 .content .l .button img {
  width: 3.48958vw;
  height: 3.48958vw;
  cursor: pointer;
  transition: .6s ease
}

.energy6 .content .l .button img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0
}

.energy6 .content .r {
  width: 67.91667vw
}

.energy6 .content .r .rSwiper {
  width: 100%
}

.energy6 .content .r .rSwiper .swiper-slide {
  padding: 0 0 1.77083vw
}

.energy6 .content .r .rSwiper .swiper-slide:nth-child(2n) .item {
  transform: translateY(1.77083vw)
}

.energy6 .content .r .rSwiper .swiper-slide .item {
  width: 100%;
  height: 27.91667vw;
  position: relative;
  z-index: 1;
  padding: 1.875vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 1s
}

.energy6 .content .r .rSwiper .swiper-slide .item:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.9) 100%);
  z-index: -1;
  transition: 1s
}

.energy6 .content .r .rSwiper .swiper-slide .item .headline {
  color: #FFF;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  text-transform: capitalize
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .p1 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .more {
  display: flex;
  align-items: center;
  gap: 10px
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .more p {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .more .line {
  display: flex;
  align-items: center
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .more .line svg:first-child {
  width: 1.14583vw
}

.energy6 .content .r .rSwiper .swiper-slide .item .other .more .line svg:nth-child(2) {
  width: .20833vw;
  height: .36458vw;
  position: relative;
  left: -.26042vw
}

.energy7 {
  padding: 9.375vw 6.14583vw 13.54167vw 10.41667vw
}

.energy7 .title {
  color: #000;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 2.86458vw
}

.energy7 .content {
  position: relative
}

.energy7 .content .img {
  width: 53.64583vw;
  height: 45.83333vw;
  border-radius: .52083vw
}

.energy7 .content .r {
  width: 35.41667vw;
  height: 50.98958vw;
  padding: 8.17708vw 2.91667vw 0 2.91667vw;
  position: absolute;
  right: 0;
  top: .20833vw;
  border-radius: .52083vw;
  background: #337AEA
}

.energy7 .content .r .line {
  border-bottom: 1px solid #D9D9D9
}

.energy7 .content .r .line div {
  width: 10.57292vw;
  border-bottom: .10417vw solid #88DBE7
}

.energy7 .content .r .p1 {
  margin: 3.54167vw 0 2.5vw;
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: 139.548%
}

.energy7 .content .r .p2 {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.energy7 .content .r .flex {
  margin: 15vw 0 0 0;
  display: flex;
  justify-content: space-between
}

.energy7 .content .r .flex .item {
  width: 7.8125vw
}

.energy7 .content .r .flex .item .icon {
  width: 4.01042vw;
  height: 4.01042vw;
  display: flex;
  align-items: center;
  justify-content: center
}

.energy7 .content .r .flex .item .icon img {
  width: 100%
}

.energy7 .content .r .flex .item .text {
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: 179.419%;
  margin: .9375vw 0 0 0
}

.energy8 {
  height: 32.65625vw;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 10.3125vw;
  background: #337AEA;
  align-items: center
}

.energy8 .l .cut {
  display: flex;
  gap: 1.04167vw
}

.energy8 .l .cut .list {
  color: #FFF;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: .5;
  cursor: pointer;
  transition: .6s ease
}

.energy8 .l .cut .list.on {
  opacity: 1
}

.energy8 .l .common_more {
  width: 15.3125vw;
  height: 3.59375vw;
  margin: 0
}

.energy8 .l .content {
  margin: 1.77083vw 0 2.55208vw
}

.energy8 .l .content .matter {
  display: none
}

.energy8 .l .content .matter.on {
  display: block
}

.energy8 .l .content .matter a:hover {
  text-decoration: underline;
  color: white
}

.energy8 .l .content .matter .list {
  display: flex;
  align-items: center;
  gap: .83333vw
}

.energy8 .l .content .matter .list:not(:last-child) {
  margin: 0 0 .83333vw
}

.energy8 .l .content .matter .list .icon {
  width: 1.25vw;
  height: 1.25vw;
  display: flex;
  align-items: center;
  justify-content: center
}

.energy8 .l .content .matter .list .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.energy8 .l .content .matter .list p {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.energy8 .r {
  width: 49.47917vw;
  height: 100%;
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 100%, 65% 0)
}

.energy8 .r img {
  width: 100%;
  height: 100%
}

@media screen and (max-width: 768px) {
  .energy1 {
    padding: 0 5%;
    height: 60vh
  }

  .energy2 {
    padding: 100px 5% 30px 5%
  }

  .energy2 .en {
    font-size: 26px
  }

  .energy2 .en span {
    letter-spacing: 2px
  }

  .energy2 .content {
    margin: 40px 0 0 0;
    flex-direction: column;
    padding: 0
  }

  .energy2 .content .l {
    width: 100%
  }

  .energy2 .content .l img {
    width: 130px
  }

  .energy2 .content .l .text {
    margin: 15px 0 0
  }

  .energy2 .content .images {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 0 0
  }

  .energy3 {
    padding: 30px 5%
  }

  .energy3 .top .en span {
    letter-spacing: 2px
  }

  .energy3 .content {
    flex-direction: column;
    padding: 0
  }

  .energy3 .content .l {
    width: 100%
  }

  .energy3 .content .l .position .point.point1 {
    top: 20.510417vw;
    left: 12.708333vw
  }

  .energy3 .content .l .position .point.point2 {
    top: 14.114583vw;
    left: 40.427083vw
  }

  .energy3 .content .l .position .point.point3 {
    top: 25.104167vw;
    left: 57.927083vw
  }

  .energy3 .content .l .position .point.point4 {
    top: 29.083333vw;
    left: 69.458333vw
  }

  .energy3 .content .l .position .point.point5 {
    top: 35.6875vw;
    left: 29.802083vw
  }

  .energy3 .content .l .position .point.point6 {
    top: 45.90625vw;
    left: 38.645833vw
  }

  .energy3 .content .l .position .point.point7 {
    top: 61.03125vw;
    left: 44.260417vw
  }

  .energy3 .content .l .position .point.point8 {
    top: 54.458333vw;
    left: 62.625vw
  }

  .energy3 .content .l .position .point .circle {
    width: 10px !important;
    height: 10px !important
  }

  .energy3 .content .l .position .point .hide {
    padding: 8px;
    height: auto;
    width: max-content;
    gap: 5px;
    left: 50%;
    transform: translateX(-50%)
  }

  .energy3 .content .l .position .point .hide:after {
    left: 50%;
    transform: translateX(-50%)
  }

  .energy3 .content .l .position .point .hide .icon {
    width: 30px;
    height: 30px
  }

  .energy3 .content .l .position .point .hide p {
    font-size: 12px
  }

  .energy3 .content .r {
    width: 100%;
    margin: 30px 0 0 0
  }

  .energy3 .content .r .p1 {
    margin: 0 0 15px
  }

  .energy4 {
    padding: 30px 5%;
    flex-direction: column
  }

  .energy4 .l .circle {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px
  }

  .energy4 .l .circle img {
    width: 30px;
    height: 30px
  }

  .energy4 .l .text .p1 {
    margin: 0 0 10px
  }

  .energy4 .img {
    width: 100%;
    margin: 25px 0 0 0
  }

  .energy5 {
    padding: 30px 5%;
    flex-direction: column
  }

  .energy5 .img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0 0 20px
  }

  .energy5 .r {
    width: 100%
  }

  .energy5 .r .other {
    margin: 30px 0 0 0
  }

  .energy5 .r .other .item .show {
    padding: 10px 0
  }

  .energy5 .r .other .item .show .add {
    width: 30px;
    height: 30px
  }

  .energy5 .r .other .item .show .add svg {
    width: 15px;
    height: 15px
  }

  .energy5 .r .other .item .hide>div {
    margin: 0 0 15px
  }

  .energy5 .r .other .item .hide>div .text {
    width: 100%
  }

  .energy6 {
    padding: 30px 5%
  }

  .energy6 .en img {
    width: 100%
  }

  .energy6 .content {
    margin: 0;
    flex-direction: column
  }

  .energy6 .content .l {
    width: 100%
  }

  .energy6 .content .l .p1 {
    margin: 0 0 15px
  }

  .energy6 .content .l .p2 {
    margin: 0 0 15px
  }

  .energy6 .content .l .button {
    gap: 15px
  }

  .energy6 .content .l .button img {
    width: 40px;
    height: 40px
  }

  .energy6 .content .l .button img foreignObject {
    opacity: 0
  }

  .energy6 .content .r {
    width: 100%;
    margin: 30px 0 0 0
  }

  .energy6 .content .r .rSwiper {
    width: 95vw
  }

  .energy6 .content .r .rSwiper .swiper-slide .item {
    height: 300px;
    transform: none !important
  }

  .energy7 {
    padding: 30px 5%
  }

  .energy7 .content {
    margin: 30px 0 0 0;
    flex-direction: column
  }

  .energy7 .content .img {
    width: 100%;
    height: auto;
    border-radius: 10px
  }

  .energy7 .content .r {
    position: static;
    width: 100%;
    height: auto;
    padding: 30px 5%;
    margin: 20px 0 0 0;
    border-radius: 10px
  }

  .energy7 .content .r .line div {
    height: 3px;
    width: 30%
  }

  .energy7 .content .r .p1 {
    margin: 25px 0
  }

  .energy7 .content .r .flex {
    margin: 25px 0 0;
    flex-direction: column;
    gap: 20px
  }

  .energy7 .content .r .flex .item {
    width: 100%
  }

  .energy7 .content .r .flex .item .icon {
    width: 30px;
    height: 30px
  }

  .energy7 .content .r .flex .item .text {
    width: 100%;
    margin: 10px 0 0 0
  }

  .energy7 .content .r .flex .item .text br {
    display: none
  }

  .common_more {
    width: fit-content !important;
    height: 40px !important;
    padding: 0 40px 0 20px !important;
    margin: 0;
    background: #88DBE7;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%, 0 0)
  }

  .common_more svg {
    display: none
  }

  .energy8 {
    height: auto;
    padding: 0;
    flex-direction: column-reverse
  }

  .energy8 .l {
    width: 100%;
    padding: 30px 5vw
  }

  .energy8 .l .content {
    margin: 20px 0 0 0
  }

  .energy8 .l .content .matter .list {
    gap: 10px
  }

  .energy8 .l .content .matter .list:not(:last-child) {
    margin: 0 0 15px
  }

  .energy8 .l .content .matter .list .icon {
    width: 20px;
    height: 20px
  }

  .energy8 .l .content .matter .list p {
    font-size: 15px
  }

  .energy8 .l .common_more {
    margin: 30px 0 0 0
  }

  .energy8 .r {
    width: 100%;
    height: auto;
    clip-path: unset
  }
}