@charset "UTF-8";
/* CSS Document */

  /* beforeAfter
  ------------------------------------------- */
  #beforeAfter {
    padding: 10px 0 20px;
    width: 100%;
    position: relative;
  }
  
#beforeAfter .inner{
    width: 100%;
    margin: 0 auto;
  	position:relative;
    box-sizing: border-box;
  }
  #beforeAfter ul{
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
  }
#beforeAfter ul .before:after{
    content:"";
    position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 20px solid #cccccc;top: 0;
  right: -15%;
  top: 30%;
}
  #beforeAfter ul li{
    width: 45%;
    float: left;
    position: relative;
  }
#beforeAfter ul li p{font-size: 0.8rem;}

  #beforeAfter ul li img{
    width: 100%;
  }
  #beforeAfter ul li:last-child{
    float: right;
  }
  

#beforeAfter span {
	display: block;
    width: 6em;
	color: #FFF;
	font-size: 12px;
	background-color: #36BEAD;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
} 
#beforeAfter  span.cl_2 {
	background-color: #333333;
}

  #beforeAfter ul li p{
    text-align: left;
  }







@media screen and (max-width: 680px) {

/* beforeAfter
  ------------------------------------------- */
#beforeAfter {
  padding: 20px 0 15px;
  width: 100%;
  position: relative;
}
#beforeAfter .inner {
  position: relative;
}
#beforeAfter ul {
  overflow: hidden;
  position: relative;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 15px;
}
#beforeAfter ul:last-child {
  padding-bottom: 0;
}
#beforeAfter ul:after {
  content: "";
  width: 20%;
  height: 2px;
  background: #d4d4d4;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -25px;
}
#beforeAfter ul:last-child:after {
  display: none;
}
#beforeAfter ul li:first-child {
  padding-bottom:5px;
}
#beforeAfter ul .before:after {
  content: "";
  position: absolute;
  border: 50px solid transparent;
  border-top: 20px solid #cccccc;
    top:auto;
    right:auto;
    bottom:-25px;
    left:45%;
    margin: auto;
}
#beforeAfter ul li {
  width: 100%;
  position: relative;
}
    
#beforeAfter ul li img {
  margin-bottom: 10px;
}

#beforeAfter ul li p {
  text-align: left;
    }
    
 
    
}