.title-line {
  position: relative;
  padding-top: 23px;
  text-align: left !important;
}
.title-line:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 60px;
  height: 5px;
  background-color: var(--esp-color-blue);
}
.esp32-p4-wrap .overview-wrap {
  padding-top: 60px;
}
.esp32-p4-wrap .overview-wrap p {
  max-width: 1210px;
  margin: 0 auto;
}
.esp32-p4-wrap p {
  margin-top: 20px;
  margin-bottom: 0;
}
.esp32-p4-wrap .features-wrap {
  padding-top: 0 !important;
}
.features-content-pc-wrap {
  margin: 0 -6px;
  position: relative;
}
.features-content-wrap .features-pc-item:first-child,
.features-content-wrap .features-pc-item:nth-child(2) {
  flex: 0 0 50%;
}
.features-content-wrap .features-pc-item {
  flex: 0 0 33.3333%;
  padding: 6px;
  box-sizing: border-box;
}
.features-content-wrap .features-pc-item .features-pc-item-content {
  background-color: #F7F7F7;
  border-radius: 4px;
}
.features-content-wrap .features-pc-item .features-pc-item-content .item-content {
  position: relative;
  justify-content: flex-end;

}
.features-content-wrap .features-pc-item .features-pc-item-content .item-content .item-title-small {
  position: absolute;
  left: 32px;
  top: 24px
}

.features-content-wrap  a {
  color: var(--esp-color-blue, #1290D8) !important;
  text-decoration: none !important;
}
.features-content-wrap  a:hover {
  text-decoration: underline !important;
}
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap .features-pc-item-hover {
  padding-right: 60px;
}
.features-content-wrap .features-pc-item-hover-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 504px;
  width: calc(100% - 4px);
  padding: 6px;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap   .item-hover-content {
  border-radius: 4px;
}
.features-content-wrap .features-pc-item:nth-child(2) .features-pc-item-hover-wrap {
  top: 0;
  left: unset;
  right: 0;
}
.features-content-wrap .features-pc-item:nth-child(1) .features-pc-item-hover-wrap   .item-hover-content {
  position: absolute;
  top: 4px;
  left: 4px;
}
.features-content-wrap .features-pc-item:nth-child(2) .features-pc-item-hover-wrap  .item-hover-content {
  position: absolute;
  top: 0;
  right: 6px;
}
.features-content-wrap .features-pc-item:nth-child(3) .features-pc-item-hover-wrap  .item-hover-content {
  position: absolute;
  bottom: 0;
  left: 6px;
}
.features-content-wrap .features-pc-item:nth-child(5) .features-pc-item-hover-wrap  .item-hover-content {
  position: absolute;
  bottom: 0;
  right: 2px;
}
.features-content-wrap .features-pc-item:nth-child(4) .features-pc-item-hover-wrap  .item-hover-content {
  position: absolute;
  left: calc(50% + 6px);
  bottom: 0;
  transform: translateX(-50%);
}
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap .item-title {
  color: var(--esp-color-blue, #1290D8);
}
.features-content-wrap .features-pc-item-hover-wrap .item-hover-content {
  display: flex;
  align-items: center;
  width: 50%;
  height: 50%;
  background: linear-gradient( 91deg, #DBEEF7 0%, #F0F0F3 100%);
  box-sizing: border-box;
}
.features-content-wrap .features-pc-item-hover-wrap .item-hover-content .features-pc-item-hover {
  position: absolute;
  top: 70%;
  left: 32px;
  max-width: 648px;
  transform: translateY(-50%);
}
.features-content-wrap .features-pc-item-hover-wrap .item-hover-content .item-img {
  position: absolute;
  right: 0;
  top: 0;
}
.features-content-wrap .item-img img {
  display: block;
}
.features-content-wrap .features-pc-item-hover-wrap .item-hover-content .item-img img {
  opacity: 0;
}
.features-content-wrap .features-pc-item-hover-wrap .item-hover-content .features-pc-item-hover {
  position: absolute;
  top: 60%;
  left: 38px;
  opacity: 0;
  transform: translateY(-50%);
}
.features-content-wrap .features-pc-item:hover .features-pc-item-hover-wrap,
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap:hover {
  display: block;
}
.features-content-wrap .features-pc-item:hover .features-pc-item-hover-wrap .features-pc-item-hover,
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap:hover .features-pc-item-hover {
  animation: up .3s .2s linear;
  animation-fill-mode: forwards;
}

.features-content-wrap .features-pc-item:hover .features-pc-item-hover-wrap .item-img img,
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap:hover .item-img img {
  animation: opacity .3s .3s linear;
  animation-fill-mode: forwards;
}
.features-content-wrap .features-pc-item:hover .features-pc-item-hover-wrap .item-hover-content,
.features-content-wrap .features-pc-item .features-pc-item-hover-wrap:hover .item-hover-content {
  animation: fade .25s linear;
  animation-fill-mode: forwards;
}

@keyframes fade {
  from {
    width: 50%;
    height: 50%;
  }
  to {
    height: 100%;
    width: 100%;
  }
}

@keyframes up {
  from {
    opacity: 0;
    top: 60%;
  }
  to {
    opacity: 1;
    top: 50%;
  }
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.buy-now {
  margin-bottom: 0;
}
.buy-now .inside {
  padding: 78px 0;
}
.buy-now .inside h2 {
  margin-bottom: 0;
}
.row .btn-wrap {
  margin-top: 10px;
}
.buy-now .buy-now-bg {
  background-image: url(../images/esp32-p4/buy-now.png);
  background-size: cover;
}
/* .products-wrap.customer-products-wrap .products-content-desc .product-info a {
  display: flex;
  align-items: center;
}
.products-wrap.customer-products-wrap .products-content-desc a img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
} */

.features-content-mobile-wrap {
  position: relative;
  padding-bottom: 50px;
  overflow: hidden;
}
.features-content-mobile-wrap .item-img {
  margin-top: 20px;
}
.swiper-button-next:after, .swiper-button-prev:after {
  content: '' !important;
  display: block;
  background-image: url(../images/esp32-p4/left.png);
  width: 14px;
  height: 22px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.swiper-button-next:after {
  background-image: url(../images/esp32-p4/right.png);
}
.swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  transition: all .2s linear;
  background-color: #38393a !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  transform: scale(1.3);
  background-color: #38393a !important;
  opacity: 0.6 !important;
}
.row a.button {
  width: 172px;
}
.buy-now .buy-now-bg .button:hover {
    color: var(--esp-color-primary, #38393a) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    background: rgba(255, 255, 255, 1) !important;
}
body.html li.bn-left-center h2 {
  max-width: 640px;
}
body.html.i18n-zh-hans li.bn-left-center h2 {
  max-width: 380px;
}
@media (min-width: 1178px) {
  .features-content-mobile-wrap {
    display: none;
  }
  .products-wrap.customer-products-wrap .products-content {
    padding-top: 6.5em;
  }
}
@media (max-width: 1178px) {
  .features-content-pc-wrap  {
    display: none;
  }
  .features-content-wrap {
    padding: 40px 20px 20px;
    margin: 20px -20px;
    background: linear-gradient(146deg, #DBEEF7 0%, #F0F0F3 100%);
    overflow: hidden;
  }
  .features-content-wrap .swiper-slide {
    background-color: transparent;
  }
  .features-content-wrap .swiper-slide h3 {
    text-align: center;
  }
  .features-content-wrap .item-img img {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .features-content-wrap {
    margin-bottom: 0;
  }
  .products-wrap.customer-products-wrap .products-content-title > ul li span.line {
    padding-left: 0 !important;
  }
  .esp32-p4-wrap .overview-wrap {
    padding-top: 28px;
  }
  .features-content-mobile-content .item p {
    padding: 0 30px;
  }
  .inside {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .swiper-button-next, .swiper-button-prev {
    top: 30% !important;
  }
  .swiper-button-prev {
    left: 0 !important;
  }
  .swiper-button-next {
    right: 0 !important;
  }
  .features-content-wrap {
    padding: 20px 6px 0;
  }
  .features-content-mobile-content .item p {
    margin-top: 12px;
  }
  .products-wrap.customer-products-wrap .products-content {
    padding-top: 1.5em;
  }
  .custom-esp-product-selector-add .esp-product-selector-wrap {
    margin: 0 !important;
  }
  .buy-now .inside {
    padding: 40px 0;
  }
  .buy-now .buy-now-bg .btn-wrap {
    margin-top: 10px !important;
  }
  .features-content-mobile-wrap {
    padding-bottom: 20px;
  }
  .buy-now .buy-now-bg {
    background-image: url(../images/esp32-p4/buy-now-mobile.png);
  }
}
.products-wrap.customer-products-wrap .products-content-desc .product-img a:after {
  margin-top: -2px;
}
.products-wrap.customer-products-wrap .products-content-desc .esp32-p4-devkits .product-img a:after {
  border-color: #38393a !important;
}
.products-wrap.customer-products-wrap .products-content-desc .esp32-p4-devkits .product-img a:hover {
  text-decoration: none !important;
}
.products-wrap.customer-products-wrap .products-content-desc .esp32-p4-devkits .product-img a {
  display: none !important;
}
@media (min-width: 768px) {
  .products-wrap.customer-products-wrap .products-content-title > ul {
    justify-content: flex-start;
  }
  .products-wrap.customer-products-wrap .products-content-title > ul li {
    margin: 27px 0;
  }
}

@media (min-width: 1170px) {
  .products-wrap.customer-products-wrap.products-new-wrap .products-content-desc .products-item-desc {
    width: calc(50% - 12px);
  }
  .products-wrap.customer-products-wrap.products-new-wrap .products-content-desc .product-info {
    padding: 30px 12px 32px 20px;
  }
  .products-wrap.customer-products-wrap.products-new-wrap .products-title {
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .products-wrap.customer-products-wrap.products-new-wrap .products-content-desc .product-img {
    padding-left: 80px;
  }
}
@media (max-width: 1170px) {
  .products-wrap.customer-products-wrap.products-new-wrap .products-title {
    max-width: 1250px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}
@media (max-width: 768px) {
  .products-wrap.customer-products-wrap.products-new-wrap .products-title {
    max-width: 1250px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  
  .products-wrap.customer-products-wrap.products-new-wrap .products-title {
    margin-bottom: 21px;
  }
  .products-wrap.customer-products-wrap.products-new-wrap .products-content-desc {
    padding-top: 40px;
  }
  .products-wrap.customer-products-wrap.products-new-wrap .products-content {
    padding-bottom: 40px;
  }
}