/*
  ***************** 공통 *******************
*/
/* cl_titleArea */
.cl_titleArea { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.cl_titleArea .title { display: flex; align-items: center; font-size: 20px; font-family: 'PretendardB'; color: #222;}
.cl_titleArea .title.omGotic{ font-family: 'PretendardB';}
.cl_titleArea .title span { display: inline-block; font-size: 15px; color: #777; border: 1px solid #ddd; box-sizing: border-box;border-radius: 100px; margin-right: 10px; padding: 5px 12px;font-family: 'PretendardB'; }
.cl_titleArea .btnList { display: flex; justify-content: center; align-items: center;}
.cl_titleArea .btnList .btn.on { background-color: #222;}
.cl_titleArea .btnList .btn { display: flex; justify-content: center; align-items: center; width: 70px; height: 30px; border-radius: 5px; background-color: #bbb; font-size: 15px; font-family: 'PretendardB'; color: #fff; margin-left: 3px; cursor:pointer;}
.cl_titleArea .btnList .btn:first-child { margin-left: 0;}

/*
  ***************** intro 페이지 *******************
*/

.introWrap .intro{ position: relative; width: 100%; height: 1700px; /*background: url("../images/introVisual.png")no-repeat center top;*/ background-size: cover;  }
.introWrap .Logo { padding-top: 27px;}
.introWrap .introArea { display: flex; justify-content: space-between; align-items: center;}
.introWrap .introArea .cl_mainTitle { margin-right: 200px;}
.introWrap .introListWrap .title  { font-size: 28px; font-family: 'PretendardB'; color: #fff; margin-top: 20px;}
.introWrap .introListWrap .subTitle {display: flex; align-items: center; font-size: 18px; font-family: 'PretendardB'; color: #fff; margin-top: 30px; margin-bottom: 15px;}
.introWrap .introListWrap .subTitle img { margin-right: 5px;}
.introWrap .introListWrap { flex: 1}
.introWrap .introListWrap .gridWrapper {overflow:hidden;}
.introWrap .introListWrap .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
.introWrap .introListWrap .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 4);
    border:0 solid transparent;
    border-width:0 10px 10px 0;
    font-family: 'PretendardM';
}
.introWrap .introListWrap .grid .gridCell.expected { opacity: 0.6; pointer-events: none;}
.introWrap .introListWrap .grid .gridCell a { display: flex; justify-content: center; align-items: center; text-align: center; height: 45px; border: 2px solid #fff;font-size: 15px; color: #fff;}
.introWrap .introListWrap .grid .gridCell a img { margin-right: 5px;}
.introWrap .introFooter { background-color: #222; }
.introWrap .introFooter .contentsWrap { display: flex; justify-content: space-between; align-items: center; height: 105px;}
.introWrap .introFooter .logoArea { display: flex; justify-content: center; align-items: center}
.introWrap .introFooter .logoArea .logo { margin-right: 30px;}
.introWrap .introFooter .list { display: flex; justify-content: center ;align-items: center; font-size: 16px; color: #fff; font-family: 'PretendardR'; opacity: 0.5; }
.introWrap .introFooter .list li { position: relative; margin-left: 25px;}
.introWrap .introFooter .list li:first-child { margin-left: 0}
.introWrap .introFooter .list li:first-child:after { display: none;}
.introWrap .introFooter .list li:after { content: ''; position: absolute; top:50%; left: -12px; transform: translateY(-50%) ;width: 1px; height: 12px; background-color: #fff;}

/*
  ***************** 시술소개 *******************
*/

.surgeryListWrap .searchArea { position: relative;  width: 450px; height: 60px; margin: 0 auto;}
.surgeryListWrap .searchArea input { width: 100%; height: 100%; background-color: #F3EFF6; padding-left: 20px; font-size: 16px; font-family: 'PretendardR'; color: #777;  box-sizing: border-box;}
.surgeryListWrap .searchArea input::placeholder { color: #777; font-family: 'PretendardR';}
.surgeryListWrap .searchArea .searchIcon { position: absolute; top: 0; right: 0; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background-color: #C296E5; cursor: pointer;}
.surgeryListWrap .surgeryTabList { margin-top: 50px;}
.surgeryListWrap .surgeryTabList ul { display: flex; /*justify-content: center;*/ justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.surgeryListWrap .surgeryTabList ul li { /*margin-right: 40px;*/ width:calc(100%/8); text-align: center; margin-bottom: 40px;}
.surgeryListWrap .surgeryTabList ul li:last-child { /*margin-right: 0;*/}
.surgeryListWrap .surgeryTabList ul li a { font-size: 16px; color: #777; font-family: 'PretendardR'; padding-bottom: 5px; cursor: pointer;}
.surgeryListWrap .surgeryTabList ul li a.on { color: #C296E5; font-family: 'PretendardB'; border-bottom: 3px solid #C296E5;}
.surgeryListWrap .bar { margin-top: 40px ; width: 100%; height: 10px; background-color: #F3EFF6; border-top: 1px solid #DDDDDD; box-sizing: border-box;}
.surgeryListWrap .surgeryList { /*display: flex; justify-content: center;*/ align-items: center; margin-top: 50px; }
/*.surgeryListWrap .surgeryList .listArea { padding-bottom: 40px; }*/

.surgeryListWrap .surgeryList .listBox { position: relative; border: 1px solid #ddd; padding: 15px; box-sizing: border-box; /*margin-right: 30px;*/ max-width: 800px; margin: 0px auto; margin-bottom: 20px;}
/*.surgeryListWrap .surgeryList .listBox:last-child {  padding-bottom: 20px;  }*/
.surgeryListWrap .surgeryList .listBox .title { display: flex; justify-content: space-between; align-items: center; font-size: 26px; font-family: 'PretendardB'; padding-bottom: 15px;}
.surgeryListWrap .surgeryList .listBox .title .info { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 39px; background-color: #C296E5; cursor: pointer;}
.surgeryListWrap .surgeryList .listBox .title .info a{ display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px; font-family: 'PretendardB';}
.surgeryListWrap .surgeryList .listBox .title .info a img { margin-right: 5px;}
.surgeryListWrap .surgeryList .listText .listOption {padding: 0 15px 0px 15px; border-top: 1px dashed #DDDDDD; }
.surgeryListWrap .surgeryList .listBox .listOption:nth-child(2) {border-top-style: solid !important;}

.surgeryListWrap .surgeryList .listText {
    /*padding:15px 0 15px 10px; */
    /*box-sizing: border-box;*/
    /*border-top: 1px dashed #DDDDDD; */
}
.surgeryListWrap .surgeryList .listText .listTitle { display: flex; align-items: center; font-size: 18px; font-family: 'PretendardB';}
.surgeryListWrap .surgeryList .listText .listTitle span { display: flex; justify-content: center; align-items: center; width: 60px; height: 27px; color: #C296E5; font-size: 13px; margin-left: 10px; border: 1px solid #C296E5; box-sizing: border-box; cursor: pointer;}
.surgeryListWrap .surgeryList .listText .text { font-size: 16px; font-family: 'PretendardR'; color: #777; /*margin-bottom: 5px;*/}
.surgeryListWrap .surgeryList .listText .price { font-family: 'PretendardB'; display: flex; align-items: flex-end; gap: 1px; margin-top: 5px;}
.surgeryListWrap .surgeryList .listText .price span { font-size: 15px; display: inline-block; margin-left: 1px;}
.surgeryListWrap .surgeryList .listText .price .priceAfter {color: #C296E5; margin-right: 5px; font-size: 20px;}

.surgeryListWrap .surgeryList .listText .priceBeforeDiscount {
    box-sizing: border-box;
    color: #cccccc;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.surgeryListWrap .surgeryList .listText .priceBeforeDiscount .percent {
    color: #C296E5;
    font-size: 16px;
    font-family: 'PretendardM';
    text-decoration: none !important;
}
.surgeryListWrap .surgeryList .listText .priceBeforeDiscount .priceLine{
    display: inline;
    text-decoration: line-through;
    font-family: 'PretendardM';
}

/*
 * 2025-06-25 추가 시작
*/
.surgeryListWrap .surgeryList .listBox {padding-bottom: 40px;}
.surgeryListWrap .surgeryList .listBox .title .flex {display: flex;flex-direction: row;align-items: flex-end;}
.surgeryListWrap .surgeryList .listBox .title .flex .text {font-size: 16px;font-family: 'PretendardR';color: #777;margin-left: 5px;padding: 0 5px;}
.surgeryListWrap .surgeryList .listBox .plusBtn {display: flex;align-items: center;justify-content: center;font-family: 'PretendardB';color: #C296E5;background-color: #f4eff6;padding: 15px;position: absolute;bottom: 0px;left: 0px;width: 100%;box-sizing: border-box;cursor: pointer;}
.surgeryListWrap .surgeryList .listBox .listOption {padding: 0 15px 0px 15px;border-top: 1px dashed #DDDDDD;}
.surgeryListWrap .surgeryList .listBox .listOption:first-of-type {border-top: 1px solid #DDDDDD;}
.surgeryListWrap .surgeryList .listBox .listOption .optionName {display: flex;align-items: center;font-size: 20px;font-family: 'PretendardB';color: #444;padding-top: 15px;}
.surgeryListWrap .surgeryList .listBox .vat {position: absolute; right: 28px; padding-top: 15px; font-family: 'PretendardM'; font-size: 15px; color: #C296E5;}
.surgeryListWrap .surgeryList .listBox .listText .listRelative {position: relative;}
.surgeryListWrap .surgeryList .listBox .listText .listRelative .listAbsolute {position: absolute; left: 68px; top: 10px;}
.surgeryListWrap .surgeryList .listBox .listText .listRelative .listMargin {margin: 15px 0 15px 85px;}
.surgeryListWrap .surgeryList .listBox .listText .price .priceLine {color: #7a7a7a;padding: 0 5px;}
.surgeryListWrap .surgeryList .listBox .title .flex .name{display: flex; flex-shrink: 0;}

@media (max-width: 1024px)
{
    .surgeryListWrap .surgeryList .listBox .title .flex .text {font-size: 14px;}
    .surgeryListWrap .surgeryList .listText .price .priceAfter {font-size: 18px;}
    .surgeryListWrap .surgeryList .listText .priceBeforeDiscount .percent {font-size: 15px;}
    .surgeryListWrap .surgeryList .listText .priceBeforeDiscount {font-size: 13px;}
    .surgeryListWrap .surgeryList .listBox .vat {right: 25px; font-size: 14px;}
    .surgeryListWrap .surgeryList .listText {padding: 0px;}
}
@media (max-width: 768px)
{
    .surgeryListWrap .surgeryList .listBox .title .flex {display: block; !important;}
    .surgeryListWrap .surgeryList .listBox .title .flex .text {font-size: 13px; margin-left: 0px; padding-left: 0px;}
    .surgeryListWrap .surgeryList .listBox .vat {right: 30px; font-size: 13px;}
    .surgeryListWrap .surgeryList .listBox .listText .listRelative .listAbsolute {left: 20px;top: 10px;}
    .surgeryListWrap .surgeryList .listBox .listText .listRelative .listMargin {margin: 15px 0 15px 41px;}
}
@media (max-width: 425px)
{
    .surgeryListWrap .surgeryList .listBox .vat {right: 25px;}
    .surgeryListWrap .surgeryList .listBox .title {padding : 0px 10px 10px 10px;}
    .surgeryListWrap .surgeryList .listBox .listOption {padding: 0 10px 0px 10px;}
    .surgeryListWrap .surgeryList .listBox .title .flex {width: 260px;}
}
@media (max-width: 360px)
{
    .surgeryListWrap .surgeryList .listBox .vat {right: 24px;}
}

/*
 * 2025-06-25 추가 종료
*/


/*
  ***************** 시술소개 상세 *******************
*/

.detailList { background-color: #F3EFF6; padding: 100px 0;}
.detailList .listArea { display: flex; justify-content: center; align-items: center; margin-bottom: 50px;}
.detailList .listArea:last-child { margin-bottom: 0;}
.detailList .listArea .list { margin-right: 30px; flex: 1}
.detailList .listArea .list:last-child { margin-right: 0;}
.detailList .listArea .title { font-size: 26px; font-family: 'PretendardB'; margin-bottom: 10px;}
.detailList .listArea .box { height: 200px; background-color: #fff; padding: 30px; box-sizing: border-box; overflow: auto; align-content: center; line-height: 25px;}
.detailList .listArea .box .text { display: flex;  font-size: 18px; color: #777; font-family: 'PretendardR'; margin-bottom: 5px; letter-spacing: -0.4px;}
.detailList .listArea .box .text:last-child { margin-bottom: 0;}
.detailList .listArea .box .text .icon { margin-right: 8px;}
.detailList .listArea .box .text .tit { font-family: 'PretendardB'; color: #222; margin-right: 10px;}

.detailList .listArea .box::-webkit-scrollbar {background-color: #ffffff;}
.detailList .listArea .box::-webkit-scrollbar-thumb {background-color: #c892de; }
.detailList .listArea .box::-webkit-scrollbar-button { background: url("/app/layout/web/images/scrollButtonCustom.png") center center no-repeat; width: 20px; height: 17px; }
.detailList .listArea .box::-webkit-scrollbar-button:increment { display: none; }

.surgeryDetailWrap .visualArea { margin-top: 100px;}
.surgeryDetailWrap .visualArea img{  width: 100%;}

.surgeryDetailWrap .buttonWrap { display: flex; justify-content: center;}



/*
  ***************** 시술후기 *******************
*/

.reviewArea .gridWrapper {overflow:hidden;}
.reviewArea .grid {display:flex; flex-wrap:wrap; padding:20px 0 0 20px; margin:-20px}
.reviewArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 3);
    border:0 solid transparent;
    border-width:0 20px 20px 0;
}
.reviewArea .grid .gridCell .imgArea { cursor: pointer;}
.reviewArea .grid .gridCell .img img { display: block; width: 100%;}
.reviewArea .cl_titleArea { border-bottom: none;}
.reviewArea .grid .gridCell .imgArea .hashtag { display: flex; align-items: center; width: 100%; height: 45px; font-size: 15px; color: #777; font-family: 'PretendardR'; border-radius: 5px; background-color: #F3EFF6; margin-bottom: 30px;}
.reviewArea .grid .gridCell .imgArea .hashtag span { display: inline-block; margin-left: 10px;}

.reviewWrap .pagination { text-align: center; }
.reviewWrap .pagination span { position: relative; margin-right: 5px; cursor: pointer; font-size: 13px; color: #999999; font-family: 'PretendardR';}
.reviewWrap .pagination span:last-child { margin-right: 0;}

.reviewWrap .pagination span.num.on a { color: #C296E5; font-family: 'PretendardB'; border-bottom: 2px solid #C296E5;}
.reviewWrap .pagination span.num a {display:inline-block; width:10px; height:28px; line-height:28px; font-size:14px; color:#a5a5a5; font-family: 'PretendardR'; vertical-align: middle; box-sizing: border-box; margin: 0px 9px 0px 9px;}

/*
.reviewWrap .pagination span.num.on:before { content: ''; position: absolute; bottom: -2px; left: 0;  width: 100%; height: 2px ; background-color: #C296E5;}
*/


/*
  ***************** 후기 상세페이지 *******************
*/

.detailWrap { border-top: 2px solid #C296E5;}
.detailWrap .cl_titleArea { border-bottom: none; justify-content: center; padding: 20px 0 5px;}
.detailWrap .dateText { display: flex; justify-content: center; align-items: center;}
.detailWrap .dateText .date { font-size: 16px; color: #777; font-family: 'PretendardR'; margin-left: 5px;}
.detailWrap .detail { margin-top: 25px; border-top: 1px solid #ddd; box-sizing: border-box; }
.detailWrap .detail .imgArea { padding-top: 25px; display: flex; justify-content: center; align-items: center;}
.detailWrap .detail .imgArea img { width: 100%;}
.detailWrap .detail .detailText { margin-top: 25px; font-size: 18px; color: #777; font-family: 'PretendardR';}
.detailWrap .detail .detailText .text { line-height: 1.4; letter-spacing: -0.4px;}
.detailWrap .detail .detailText .margin { margin-bottom: 20px;}
.detailWrap .detail .listText { margin-top: 25px;}
.detailWrap .detail .listText .list { display: flex; align-items: center; height: 60px; border-bottom: 1px solid #ddd; font-size: 16px;}
.detailWrap .detail .listText .list:first-child { border-top: 1px solid #ddd;}
.detailWrap .detail .listText .list span { margin-right: 20px; display: inline-flex; }
.detailWrap .detail .listText .list span:last-child { margin-right: 0;}
.detailWrap .detail .listText .list .title { font-family: 'PretendardB'; color: #222;}
.detailWrap .detail .listText .list .name { font-family: 'PretendardR'; color: #777; cursor: pointer;}
.reviewDetailWrap .buttonWrap { display: flex; justify-content: center; align-items: center; margin-top: 50px;}

/*
  ***************** 전후사진 *******************
*/

.BnAWrap .tabBtnArea { display: flex; justify-content: center; align-items: center; margin-bottom: 20px;}
.BnAWrap .tabBtnArea .tabBtn { display: flex; justify-content: center; align-items: center; flex: 1; height: 45px; border: 1px solid #ddd; border-radius: 100px; font-size: 16px; font-family: 'PretendardR'; color: #777; margin-right: 6px; box-sizing: border-box; cursor: pointer;}
.BnAWrap .tabBtnArea .tabBtn a { color: #777; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.BnAWrap .tabBtnArea .tabBtn:last-child { margin-right: 0;}
.BnAWrap .tabBtnArea .tabBtn.on { color: #fff; background-color: #C296E5;}
.BnAWrap .tabBtnArea .tabBtn.on a { color: #fff;}
.BnAWrap .titleImgArea { display: flex; justify-content: center; align-items: center;}
.BnAWrap .titleImgArea .imgArea { position: relative; width:400px;}
.BnAWrap .titleImgArea .imgArea .mainImg { display: block; width: 100%;}
.BnAWrap .titleImgArea .imgArea .markIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.BnAWrap .titleImgArea .imgArea .text { position: absolute; top: 15px; width: 70px; height: 30px; display: flex; justify-content: center ;align-items: center; font-size:15px;font-family: 'PretendardB'; color: #fff; background-color: rgba(0,0,0,0.5); border-radius: 100px; box-sizing: border-box; }
.BnAWrap .titleImgArea .imgArea.before .text{ left: 15px;}
.BnAWrap .titleImgArea .imgArea.after .text{ right: 15px;}
.BnAWrap .BnAList { margin-top: 30px;}
.BnAWrap .BnAList .gridWrapper {overflow:hidden;}
.BnAWrap .BnAList .grid {display:flex; flex-wrap:wrap; padding:20px 0 0 20px; margin:-20px}
.BnAWrap .BnAList .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 3);
    border:0 solid transparent;
    border-width:0 20px 20px 0;
}
.BnAWrap .BnAList .grid .gridCell .listImg { position: relative; display: flex;align-items: center; cursor: pointer;}
.BnAWrap .BnAList .grid .gridCell .listImg .list { flex: 1;}
.BnAWrap .BnAList .grid .gridCell .listImg img { width: 100%;}
.BnAWrap .BnAList .grid .gridCell .listImg.on:before { content: '';position: absolute; top: 0; left: 0;width: 100%; height: 100%; border: 5px solid #C296E5; box-sizing: border-box; }
.BnAWrap .infoArea .title { display: flex; align-items: center;  font-size: 18px; font-family: 'PretendardB'; margin-bottom: 10px; margin-top: 30px;}
.BnAWrap .infoArea .title .icon { margin-right: 5px;}
.BnAWrap .infoArea .box { font-size: 18px;color: #777; font-family: 'PretendardR'; border: 1px solid #ddd; padding:  37px;box-sizing: border-box; line-height: 1.6}
.BnAWrap .infoArea .box .text { position: relative;}
.BnAWrap .infoArea .box .text:before { content: ''; position: absolute; top: 12px; left: -7px; width: 3px; height: 3px; background-color: #999;}

/*
  ***************** 이벤트 *******************
*/

.eventWrap .kakaoBtn { display: flex; justify-content: center ;align-items: center; }
.eventWrap .kakaoBtn a { display: flex; justify-content: center ;align-items: center;  width: 180px; height: 60px; background-color: #FBE300; border-radius: 100px; font-size: 16px; font-family: 'PretendardB'; color: #3B1E1E;}
.eventWrap .kakaoBtn a img { vertical-align: middle; margin-right: 5px;}
.eventWrap .eventImg { margin: 30px 0;}
.eventWrap .eventImg img { display: block; width: 100%;}




/*
  ***************** 상담예약 *******************
*/

.reservationWrap .quickReservation .subText { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background-color: #F3EFF6; font-size: 16px; font-family: 'PretendardR'; color: #777; margin-bottom: 25px; }
.reservationWrap .quickReservation .subText .icon { height: 24px; margin-right: 3px;}
.reservationWrap .quickReservation .privacyText { margin: 50px 0; color: #777;font-family: 'PretendardR';}
.reservationWrap .quickReservation .privacyText .title{ font-size: 26px; font-family: 'PretendardB'; color: #222; margin-bottom: 20px;}
.reservationWrap .quickReservation .privacyText .textArea{ font-size: 16px;  background-color: #F3EFF6;padding: 25px; border: 1px solid #ddd; box-sizing: border-box;}
.reservationWrap .quickReservation .privacyText .textArea .text { margin-bottom: 20px;}
.reservationWrap .quickReservation .privacyText .textArea .text:last-child { margin-bottom: 0;}
.reservationWrap .quickReservation .privacyText .agreement { display: flex; justify-content: center; align-items: center; margin-top: 15px; font-size: 18px; }
.reservationWrap .agreement input[type="checkbox"]{
    display: none;
}

.reservationWrap .agreement input[type="checkbox"] + label > span{
    vertical-align: middle;
    padding-left: 5px;
}

/* label:before에 체크하기 전 상태 CSS */
.reservationWrap .agreement input[type="checkbox"] + label:before{
    content:"";
    display:inline-block;
    width:18px;
    height:19px;
    background: url(../images/inputIcon.png) no-repeat 0 0;
    vertical-align:middle;
}

/* label:before에 체크 된 상태 CSS */
.reservationWrap .agreement input[type="checkbox"]:checked + label:before{
    content:"";
    background: url(../images/inputIcon_on.png) no-repeat 0 0;
}

/*
  ***************** 개인정보 이용 약관 페이지 *******************
*/
.privacyArea .intro { font-size: 18px; font-family: 'PretendardR'; color:#777;; }
.privacyArea .intro div { margin-bottom: 15px;}
.privacyArea .intro div:last-child { margin-bottom: 0;}
.privacyArea .title { font-size: 20px; font-family: 'PretendardB'; ;margin-top: 43px; }
.privacyArea .textArea { margin: 10px 0; line-height: 1.6}
.privacyArea .textArea .title { font-size: 20px; font-family: 'PretendardB';}
.privacyArea .textArea .main { font-size: 18px; font-family: 'PretendardM';}
.privacyArea .textArea .sub { font-size: 16px; font-family: 'PretendardR'; color: #777;}
.privacyArea .textArea.last { margin-top: 20px; }
.privacyArea .textArea.last .main { font-size: 20px;}
.privacyArea .box { font-size: 18px; color: #777; font-family: 'PretendardR'; letter-spacing: -0.5px ;border: 1px solid #ddd; padding: 25px; box-sizing: border-box; line-height: 1.6}
.privacyArea .box .small { display: flex; align-items: center; font-size: 16px; color: #777;}
.privacyArea .box .small .bar { display: inline-block; width: 5px; height: 2px; background-color: #777; margin-right: 5px;}
.privacyArea.privacy .box { padding-left: 32px;}
.privacyArea.privacy .box .text{ position: relative; }
.privacyArea.privacy .box .text:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -7px; width: 3px ;height: 3px; background-color: #999;}
.privacyArea.privacy .box .text.none:before{ display: none;}




@media (max-width: 1350px) {
    /*
      ***************** intro 페이지 *******************
    */

    .introWrap .Logo { padding-top: 27px;}
    .introWrap .introArea .cl_mainTitle { margin-right: 50px; flex: 1}

    /*
      ***************** 시술소개 상세 *******************
    */

    .detailList { padding: 80px 0;}
    .detailList .listArea { margin-bottom: 40px;}
    .detailList .listArea .list { margin-right: 20px;}
    .detailList .listArea .title { font-size: 22px;}
    .detailList .listArea .box { height: 230px; padding: 15px;}
    .detailList .listArea .box .text { font-size: 16px; line-height: 1.2}
    .detailList .listArea .box .text .icon { margin-right: 6px;}
    .detailList .listArea .box .text .tit { margin-right: 8px;}
    .surgeryDetailWrap .visualArea { margin-top: 80px;}

}


@media (max-width: 1024px) {
    /*
      ***************** intro 페이지 *******************
    */

    .introWrap .intro{  height: 860px; }
    .introWrap .Logo { padding-top: 15px;}
    .introWrap .introListWrap .title  { font-size: 24px;}
    .introWrap .introListWrap .subTitle { font-size: 18px; margin-top: 20px; margin-bottom: 10px;}
    .introWrap .introListWrap .grid { padding:5px 0 0 5px; margin:-5px}
    .introWrap .introListWrap .grid .gridCell {
        box-sizing:border-box;
        border-width:0 5px 5px 0;
    }
    .introWrap .introListWrap .grid .gridCell a {  height: 40px; font-size: 15px; }
    .introWrap .introFooter .contentsWrap { height: 95px;}
    .introWrap .introFooter .logoArea .logo { margin-right: 15px;}
    .introWrap .introFooter .logoArea .logo img { width: 100px}
    .introWrap .introFooter .list { font-size: 14px; }
    .introWrap .introFooter .list li {  margin-left: 10px;}
    .introWrap .introFooter .list li:after {left: -4px; ;}
    .introWrap .introFooter .cl_button {  width: 130px; height: 45px; font-size: 15px;  padding: 0 20px; }
    .introWrap .introFooter .cl_button .icon { width: 25px; height: 25px; }

    /*
       ***************** 시술소개 *******************
     */

    .surgeryListWrap .searchArea { width: 400px; height: 45px;}
    .surgeryListWrap .searchArea .searchIcon { width: 45px; height: 45px;}
    .surgeryListWrap .surgeryTabList { margin-top: 35px;}
    .surgeryListWrap .surgeryTabList ul li { /*margin-right: 20px;*/}
    .surgeryListWrap .surgeryTabList ul li a { font-size: 16px; }
    .surgeryListWrap .surgeryTabList ul li a.on { border-bottom: 2px solid #C296E5;}
    .surgeryListWrap .bar { /*margin-top: 30px;*/ }
    .surgeryListWrap .surgeryList { margin-top: 35px; }
    .surgeryListWrap .surgeryList .listBox { padding: 10px; /*margin-right: 20px;*/}
    .surgeryListWrap .surgeryList .listBox .title { font-size: 22px;  padding-bottom: 10px;}
    .surgeryListWrap .surgeryList .listBox .title .info {  height: 30px;}
    .surgeryListWrap .surgeryList .listBox .title .info a{ font-size: 14px;}
    .surgeryListWrap .surgeryList .listText { padding:10px 0;}
    .surgeryListWrap .surgeryList .listText .listTitle span { width: 50px; height: 23px;}
    .surgeryListWrap .surgeryList .listText .text { font-size: 14px;}
    .surgeryListWrap .surgeryList .listText .price { font-size: 18px; margin-top: 5px;}

    /*
     ***************** 시술소개 상세 *******************
   */

    .detailList { padding: 60px 0;}
    .detailList .listArea { margin-bottom: 30px;}
    .detailList .listArea .list { margin-right: 15px;}
    .detailList .listArea .title { font-size: 20px;}
    .detailList .listArea .box { height: 220px;}
    .detailList .listArea .box .text { font-size: 15px;}
    .surgeryDetailWrap .visualArea { margin-top: 60px;}

    /*
      ***************** 시술후기 *******************
    */

    .reviewArea .grid { padding:10px 0 0 10px; margin:-10px}
    .reviewArea .grid .gridCell {
        border-width:0 10px 10px 0;
    }
    .reviewArea  .cl_titleArea { padding: 12px 0;}
    .reviewArea  .cl_titleArea .title { font-size: 16px;}
    .reviewArea  .cl_titleArea .title span{ font-size: 13px; margin-right: 8px; padding: 4px 9px;}
    .reviewArea .grid .gridCell .imgArea .hashtag { height: 40px; font-size: 14px;  margin-bottom: 20px;}



}


@media (max-width: 768px) {
    /*
      ***************** 공통 *******************
    */

    /* cl_titleArea */
    .cl_titleArea { padding: 15px 0; }
    .cl_titleArea .title { font-size: 16px;}
    .cl_titleArea .title span { font-size: 12px; margin-right: 7px; padding: 5px 12px; }
    .cl_titleArea .btnList .btn { width: 45px; height: 25px;  font-size: 13px;}


    /*
      ***************** intro 페이지 *******************
    */

    .introWrap .intro{  height: auto; background:none;}
    .introWrap .mobileVisual { position: relative;}
    .introWrap .mobileVisual img { width: 100%; display: block;}
    .introWrap .Logo {position: absolute; top: 12px; left: 20px;  padding-top: 0; margin-bottom: 0;}
    .introWrap .introArea { flex-direction: column; justify-content: center; align-items: center;}
    .introWrap .introArea .introTitle { display: none;}
    .introWrap .cl_mainTitle {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ;margin-right: 0; white-space: nowrap; text-align: center}
    .introWrap .cl_mainTitle .mainText { letter-spacing: -2px}
    .introWrap .cl_mainTitle .subText { letter-spacing: -1px; margin-bottom: 0;}
    .introWrap .introListWrap { padding: 0 0 30px 0;}
    .introWrap .introListWrap .title { font-size: 20px; color: #222;}
    .introWrap .introListWrap .title span { color: #C296E5; }
    .introWrap .introListWrap .subTitle { font-size: 15px; color: #222; margin-top: 20px; margin-bottom: 20px;}
    .introWrap .introListWrap .subTitle img { margin-right: 5px;}
    .introWrap .introListWrap .gridWrapper {overflow:hidden;}
    .introWrap .introListWrap .grid {padding:10px 0 0 10px; margin:-10px}
    .introWrap .introListWrap .grid .gridCell {
        border-width:0 10px 10px 0;
    }
    .introWrap .introListWrap .grid .gridCell a { /*justify-content: flex-start;*/ height: 38px; border: none; border-bottom: 1px solid #DDDDDD; font-size: 12px; color: #222; /*padding-left: 10px;*/ box-sizing: border-box;}
    .introWrap .introListWrap .grid .gridCell a img {width: 14px; margin-right: 0;}
    .introWrap .introFooter .contentsWrap { flex-direction: column; justify-content: center; align-items: flex-start; height: 130px;}
    .introWrap .introFooter .logoArea { width: 100%; justify-content: space-between; margin-bottom: 15px; }
    .introWrap .introFooter .logoArea .logo { margin-right: 0;}
    .introWrap .introFooter .logoArea .logo img { width: 110px;}
    .introWrap .introFooter .cl_button {  width: 140px; height: 40px; font-size: 13px;  padding: 0 15px; }
    .introWrap .introFooter .cl_button .icon { width: 26px; height: 26px; }

    .introWrap .introFooter .list { display: block; font-size: 13px;  }
    .introWrap .introFooter .list li { position: relative; margin-left: 0; margin-bottom: 5px; }
    .introWrap .introFooter .list li:last-child { margin-bottom: 0;}
    .introWrap .introFooter .list li:after { display: none;}
    .introWrap .introFooter .list li .bar { display: inline-block; width: 1px; height: 9px; background-color: #fff; margin: 0 5px;}

    /*
       ***************** 시술소개 *******************
     */

    .surgeryListWrap .searchArea { width: 100%; }
    .surgeryListWrap .searchArea input { font-size: 13px;}
    .surgeryListWrap .surgeryTabList { margin-top: 20px;}
    .surgeryListWrap .surgeryTabList ul {flex-wrap: wrap; justify-content: center; gap:0 20px;}
    .surgeryListWrap .surgeryTabList ul li { /*margin-right: 15px;*/ line-height: 1.6; margin-bottom:0px; width: auto;}
    .surgeryListWrap .surgeryTabList ul li a { font-size: 13px; padding-bottom: 2px; }
    .surgeryListWrap .surgeryTabList ul li a.on { border-bottom: 2px solid #C296E5;}
    .surgeryListWrap .bar { display: none; }
    .surgeryListWrap .surgeryList { margin-top: 30px; }
    .surgeryListWrap .surgeryList .listBox { /*display: none;*/ display: block; width: 100%}
    .surgeryListWrap .surgeryList .listBox:first-child { display: block;}
    .surgeryListWrap .surgeryList .listBox { padding: 15px; margin-right: 0;}

    .surgeryListWrap .surgeryList .listBox .title { font-size: 20px;  padding-bottom: 15px;}
    .surgeryListWrap .surgeryList .listBox .title .info {  height: 35px; min-width: 95px;}
    .surgeryListWrap .surgeryList .listBox .title .info a{ font-size: 13px;}
    .surgeryListWrap .surgeryList .listText { padding:15px 0;}
    .surgeryListWrap .surgeryList .listText .listTitle { font-size: 16px; }
    .surgeryListWrap .surgeryList .listText .listTitle span { width: 50px; height: 24px; font-size: 12px;}
    .surgeryListWrap .surgeryList .listText .text { font-size: 13px;}

    /*
      ***************** 시술소개 상세 *******************
    */

    .detailList { padding: 30px 0;}
    .detailList .listArea { flex-direction: column; margin-bottom: 30px;}
    .detailList .listArea .list { margin-right: 0; width: 100%; margin-bottom: 30px;}
    .detailList .listArea .list:last-child { margin-right: 0; margin-bottom: 0;}
    .detailList .listArea .title { font-size: 20px; margin-bottom: 10px;}
    .detailList .listArea .box {
        /*height: auto;*/
        padding: 15px;}
    .detailList .listArea .box .text { font-size: 13px;}
    .detailList .listArea .box .text .icon { margin-right: 6px; }
    .detailList .listArea .box .text .icon img { width: 15px;}
    .detailList .listArea .box .text .tit { margin-right: 6px;}
    .surgeryDetailWrap .visualArea { margin-top: 30px;}







    /*
         ***************** 시술후기 *******************
    */
    .reviewArea .grid { padding:0; margin:0}
    .reviewArea .grid .gridCell {
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0;
    }

    .reviewArea  .cl_titleArea .title span{ font-size: 12px; padding: 2px 9px;}
    .reviewArea .grid .gridCell .imgArea .hashtag {font-size: 13px; margin-bottom: 30px;}

    /*
      ***************** 후기 상세페이지 *******************
    */

    .detailWrap .cl_titleArea {  padding: 20px 0 10px;}
    .detailWrap .cl_titleArea .title { flex-direction: column; font-size: 18px; }
    .detailWrap .cl_titleArea .title span { margin-bottom: 10px;}
    .detailWrap .dateText .date { font-size: 13px; margin-left: 0;}
    .detailWrap .dateText .dateIcon {display: none;}

    .detailWrap .detail { margin-top: 20px;}
    .detailWrap .detail .imgArea { padding-top: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}

    .detailWrap .detail .detailText { margin-top: 15px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; font-size: 13px;}
    .detailWrap .detail .detailText .margin { margin-bottom: 15px;}
    .detailWrap .detail .listText { margin-top: 20px;}
    .detailWrap .detail .listText .list {  height: 45px;  font-size: 13px;}
    .detailWrap .detail .listText .list span { margin-right: 20px;}
    .reviewDetailWrap .buttonWrap { margin-top: 25px;}



    /*
        ***************** 전후사진 *******************
    */

    .BnAWrap .tabBtnArea { margin-bottom: 20px; flex-wrap: wrap;}
    .BnAWrap .tabBtnArea .tabBtn { flex: none; height: 30px;  font-size: 13px; width: calc(100% /4 - 6px ); margin-bottom: 6px; }
    .BnAWrap .tabBtnArea .tabBtn:nth-of-type(4) { margin-right: 0;}
    .BnAWrap .titleImgArea .imgArea .text { top: 5px; width: 53px; height: 22px; font-size:12px; }
    .BnAWrap .titleImgArea .imgArea.before .text{ left: 5px;}
    .BnAWrap .titleImgArea .imgArea.after .text{ right: 5px;}
    .BnAWrap .BnAList { margin-top: 20px;}
    .BnAWrap .BnAList .grid { padding:15px 0 0 15px; margin:-15px}
    .BnAWrap .BnAList .grid .gridCell {
        width:calc(100% / 2);
        border-width:0 15px 15px 0;
        box-sizing: border-box;;
    }
    .BnAWrap .infoArea .title {  font-size: 14px; margin-bottom: 5px; margin-top: 20px;}
    .BnAWrap .infoArea .title .icon { width: 18px; height: 18px; margin-right: 3px;}
    .BnAWrap .infoArea .title .icon img{ width: 100%;}
    .BnAWrap .infoArea .box { font-size: 13px; padding:  15px; line-height: 1.4}
    .BnAWrap .infoArea .box .text:before {top: 7px; left: -7px;}


    /*
      ***************** 이벤트 *******************
    */

    .eventWrap .kakaoBtn a {   width: 140px; height: 45px; font-size: 13px;}
    .eventWrap .eventImg { margin: 20px 0;}


    /*
      ***************** 상담예약 *******************
    */
    
    .reservationWrap .quickReservation .formWrap .formRow.full { flex-direction: column; align-items: flex-start}
    .reservationWrap .quickReservation .formWrap.large { height: auto;}
    .reservationWrap .quickReservation .formWrap .formRow.full .formCol.head { width: 100%; height: 60px;}
    .reservationWrap .quickReservation .formWrap .formRow.full .formCol.body { width: 100%;}
    .reservationWrap .quickReservation .subText { height: 40px;  font-size: 13px;margin-bottom: 15px; }
    .reservationWrap .quickReservation .subText .icon { width: 18px;height: 18px; margin-right: 3px;}
    .reservationWrap .quickReservation .subText .icon img { width: 100%;}
    .reservationWrap .quickReservation .privacyText { margin: 25px 0; }
    .reservationWrap .quickReservation .privacyText .title{ font-size: 20px; margin-bottom: 10px;}
    .reservationWrap .quickReservation .privacyText .textArea{ font-size: 13px; padding: 15px;}
    .reservationWrap .quickReservation .privacyText .textArea .text { margin-bottom: 0;}
    .reservationWrap .quickReservation .privacyText .agreement {  margin-top: 15px; font-size: 13px; }


    /*
         ***************** 개인정보 이용 약관 페이지 *******************
    */

    .privacyArea .intro { font-size: 13px; }
    .privacyArea .intro div { margin-bottom: 10px;}
    .privacyArea .title { font-size: 16px; margin-top: 20px; }
    .privacyArea .textArea { margin:7px 0; line-height: 1.6}
    .privacyArea .textArea .title { font-size: 16px;}
    .privacyArea .textArea .main { font-size: 13px; }
    .privacyArea .textArea .sub { font-size: 13px; }
    .privacyArea .textArea.last { margin-top: 15px; }
    .privacyArea .textArea.last .main { font-size: 16px;}
    .privacyArea .box { font-size: 13px; padding: 15px; box-sizing: border-box;}
    .privacyArea .box .small { font-size: 12px; align-items: flex-start;}
    .privacyArea .box .small .bar { margin-right: 3px; margin-top: 9px; flex: none;}
    .privacyArea .box .small span { flex: 1}
    .privacyArea.privacy .box { padding-left: 22px;}
    .privacyArea.privacy .box .text:before {top: 7px; transform: translateY(0); left: -7px;}

}