@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 자신있는, 시술 전/후 스타일
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.11.06
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

/* 자신있는, 시술전/후 -> 치료별 전/후 사진 */

.before-after-thumb{display:inline-block; width:100%;}
.before-after-thumb .inner {overflow:hidden; padding:0;}
.before-after-thumb .item{position:relative; width:calc(33.3333333333% - 10px); float:left; margin-right:15px; margin-bottom:15px; height:200px; box-sizing:border-box; cursor:pointer;}
.before-after-thumb .item::before{opacity:0; display:inline-block; width:100%; height:100%; box-sizing:border-box; border:5px solid #ff3e62; left:0; top:0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.before-after-thumb .item:hover::before{opacity:1;}
.before-after-thumb .item:nth-child(3n + 3){margin-right:0;}

.before-after-thumb .item.active::before{opacity:1;}
.before-after-thumb .item .thumbnail{width:100%; height:200px; border:1px solid #ddd; box-sizing:border-box;}

.before-after{position:relative; width:100%;}
.before-after .inner {padding:0;}
.before-after .item{width:100%; height:500px;}

.before-after .before-after-tab{display:inline-block; width:100%; text-align:center;}
.before-after .before-after-tab .brick{display:inline-block;}
.before-after .before-after-tab button{display:inline-block; float:left; margin-right:1px; height:50px; line-height:50px; text-align:center; color:#fff; font-size:18px; font-weight:100; background:#ddd; width:150px; cursor:pointer;}
.before-after .before-after-tab button:last-child{margin-right:0;}
.before-after .before-after-tab button.active{background:#333;}

.before-after-state{position:absolute; width:100%; left:0; top:0; z-index:2;}
.before-after-state button{position:absolute; display:inline-block; padding:0 0 0 12px; width:90px; height:90px; line-height:1; box-sizing:border-box; font-size:15px; color:#fff; font-weight:100; text-align:left;}
.before-after-state button em{display:block; font-size:20px; font-weight:700; margin-bottom:5px;}
.before-after-state button.btn-before{left:20px; top:20px; background: linear-gradient( 125deg, #777, #333);}
.before-after-state button.btn-after{left:620px; top:20px; background: linear-gradient( 125deg, #ff6979, #ff3e62);}

#tab01{display:block;}
.before-after-con{display:none; position:absolute; left:0; top:0; width:100%; height:inherit; border:1px solid #ddd;}


/* 자신있는, 시술전/후 -> 셀프수술후기 */








/* 자신있는, 시술전/후 -> 라인업, 리얼스토리 */