.product-content {
  background: none;
  padding: 0;
  border-radius: 0;
  border: none;
}
.article-box {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #E3E3E3;
  margin-bottom: 30px;
}
.article-box ul {
  padding-left: 0;
}
.article-box h2 {
  font-size: 20px;
  margin-left: -30px;
  border-left: 2px solid;
  padding-left: 10px;
  background: #0f2c3a;
  padding: 0px 14px;
  color: #ceebf9;
  border-top-left-radius: 10px;
  position: relative;
  border-bottom-right-radius: 10px;
  display: inline-block;
  top: -30px;
  left: -3px;
}
.advant {
  background: #f0fdf4;
  padding: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 30px;
}
.disadvant {
  background: #fef2f2;
  padding: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.disadvant li {
    position: relative;
    padding-left: 34px;
    margin: 14px 0;
}


.article-box li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c350ff;
  position: absolute;
  left: 0;
  top: 13px;
}
.advant ul {
  padding-left: 0px;
}
.advant li {
  padding-left: 30px !important;
}
.disadvant li {
  padding-left: 30px !important;
}


.article-box li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9d4bc9;
  position: absolute;
  left: 0;
  top: 8px;
}
.advant li::before {
  content: "+" !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 37% !important;
  background: #5ac961 !important;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 3px !important;
}
.disadvant ul {
  padding-left: 0px;
}
.disadvant li::before {
  content: "-" !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 37% !important;
  background: #ff4d4d !important;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0px !important;
}

.check-box {
  padding-left: 0px !important;
}
.check-box li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #a04dcb !important;
    color: #80fe36;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    top: 0 !important;
}



.article-box li {
    position:relative;
    padding-left:30px;
    margin:14px 0;
    list-style: none;
}

.article-box li:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#9d4bc9;
    position:absolute;
    left:0;
    top:8px;
}



.list {
  list-style: none;
  padding: 0;
  
}
.list li {
  position: relative;
  padding: 10px 0 10px 40px;
  color: #000;

  cursor: pointer;
}
.list li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #28a6f3 0%, #0a96eb 100%);
  box-shadow: 0px 0px 0px 7px #f1f1f1;
  content: "";
  left: 0;
  transition: .3s ease-in-out;
  top: 27px;
}
.list li:after {
  position: absolute;
  border-left: 2px dotted #28a6f3;
  width: 1px;
  bottom: -12px;
  content: "";
  left: 3px;
  top: 48px;
}
.list li:hover:before{box-shadow: 0 0 0 10px rgba(0,0,0,.2)}
.list li:last-child:after {content: none;}